/* ─────────────────────────────────────────
   SaaSBox — style.css
   Dark/light mode, all components
───────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background-color: #0a0a0a;
  color: #ede8dc;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── CURSOR (desktop only) ── */
@media (hover: hover) {
  body { cursor: none; }
  .cursor { width: 10px; height: 10px; background: #f5c400; border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999; transition: transform 0.1s ease; }
  .cursor-ring { width: 34px; height: 34px; border: 1.5px solid rgba(245,196,0,0.4); border-radius: 50%; position: fixed; pointer-events: none; z-index: 9998; }
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 0 40px; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  background-color: #0a0a0a;
  border-bottom: 1px solid #1e1e1e;
}
.logo { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 4px; color: #ede8dc; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.logo-mark { width: 26px; height: 26px; background-color: #f5c400; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.logo-mark span { font-family: 'Bebas Neue', sans-serif; font-size: 15px; color: #0a0a0a; }
.nav-right { display: flex; align-items: center; gap: 28px; }
.nav-link { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #aaa; text-decoration: none; transition: color 0.2s; }
.nav-link:hover { color: #ede8dc; }
.nav-btn { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; background-color: #f5c400; color: #0a0a0a; padding: 10px 20px; text-decoration: none; font-weight: 500; transition: background-color 0.2s; display: inline-block; }
.nav-btn:hover { background-color: #e85d04; color: #ede8dc; }

/* ── THEME TOGGLE ── */
.theme-toggle { display: flex; align-items: center; gap: 8px; background-color: #1a1a1a; border: 1px solid #2e2e2e; padding: 5px 5px 5px 12px; }
.theme-toggle-label { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: #888; white-space: nowrap; }
.toggle-btn { width: 36px; height: 20px; background-color: #f5c400; position: relative; cursor: pointer; border: none; padding: 0; flex-shrink: 0; transition: background-color 0.2s; }
.toggle-knob { width: 14px; height: 14px; background-color: #0a0a0a; position: absolute; top: 3px; left: 3px; transition: transform 0.2s; }

/* ── HERO ── */
.hero { min-height: 100vh; background-color: #0a0a0a; display: flex; flex-direction: column; justify-content: center; padding: 120px 40px 80px; position: relative; overflow: hidden; }
.hero-grid { position: absolute; inset: 0; background-color: #0a0a0a; background-image: linear-gradient(#161616 1px, transparent 1px), linear-gradient(90deg, #161616 1px, transparent 1px); background-size: 64px 64px; pointer-events: none; }
.hero-spotlight { position: absolute; inset: 0; background: radial-gradient(ellipse 65% 50% at 28% 42%, rgba(245,196,0,0.07) 0%, #0a0a0a 68%); pointer-events: none; }
.hero-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: #f5c400; margin-bottom: 28px; display: flex; align-items: center; gap: 14px; position: relative; z-index: 2; opacity: 0; animation: fadeUp 0.6s ease forwards 0.2s; }
.hero-eyebrow::before { content: ''; width: 28px; height: 1px; background-color: #f5c400; }
h1.hero-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(76px, 13vw, 190px); line-height: 0.88; letter-spacing: 3px; margin-bottom: 36px; position: relative; z-index: 2; }
.ht-1 { display: block; color: #ede8dc; opacity: 0; animation: fadeUp 0.7s ease forwards 0.3s; }
.ht-2 { display: block; color: #f5c400; opacity: 0; animation: fadeUp 0.7s ease forwards 0.45s; }
.ht-3 { display: block; color: transparent; -webkit-text-stroke: 1.5px rgba(237,232,220,0.2); opacity: 0; animation: fadeUp 0.7s ease forwards 0.6s; }
.hero-body { font-size: 17px; font-weight: 500; color: #bbb; max-width: 500px; line-height: 1.75; margin-bottom: 20px; position: relative; z-index: 2; opacity: 0; animation: fadeUp 0.7s ease forwards 0.75s; }
.hero-pillars { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 44px; position: relative; z-index: 2; opacity: 0; animation: fadeUp 0.7s ease forwards 0.85s; }
.hero-pill { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; border: 1px solid #3a3a3a; color: #aaa; padding: 7px 14px; display: flex; align-items: center; gap: 6px; }
.hero-pill em { color: #f5c400; font-style: normal; }
.hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; position: relative; z-index: 2; opacity: 0; animation: fadeUp 0.7s ease forwards 0.95s; }
.btn-primary { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; background-color: #f5c400; color: #0a0a0a; padding: 16px 32px; text-decoration: none; font-weight: 500; display: inline-block; transition: background-color 0.2s, transform 0.2s; }
.btn-primary:hover { background-color: #e85d04; color: #ede8dc; transform: translateY(-2px); }
.btn-ghost { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; border: 1px solid #3a3a3a; color: #aaa; padding: 16px 32px; text-decoration: none; display: inline-block; transition: border-color 0.2s, color 0.2s; }
.btn-ghost:hover { border-color: #aaa; color: #ede8dc; }
.hero-stats { position: absolute; right: 40px; bottom: 80px; display: flex; flex-direction: column; gap: 32px; z-index: 2; opacity: 0; animation: fadeIn 1s ease forwards 1.1s; }
.stat { text-align: right; padding-right: 18px; border-right: 2px solid #f5c400; }
.stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 42px; color: #ede8dc; line-height: 1; }
.stat-lbl { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #888; margin-top: 2px; }

/* ── EARLY EMAIL ── */
.early-email { background-color: #111; border-top: 1px solid #1e1e1e; border-bottom: 1px solid #1e1e1e; padding: 20px 40px; }
.early-email-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; }
.early-email-title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1px; color: #ede8dc; margin-bottom: 2px; }
.early-email-sub { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #999; }
.early-email-form { display: flex; border: 1px solid #3a3a3a; flex-shrink: 0; }
.early-email-form input { background-color: transparent; border: none; padding: 13px 18px; font-family: 'DM Mono', monospace; font-size: 12px; color: #ede8dc; outline: none; width: 240px; }
.early-email-form input::placeholder { color: #666; }
.early-email-form button { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; background-color: #f5c400; color: #0a0a0a; border: none; padding: 13px 20px; font-weight: 500; cursor: pointer; transition: background-color 0.2s; white-space: nowrap; }
.early-email-form button:hover { background-color: #e85d04; color: #ede8dc; }

/* ── NOT GPT BANNER ── */
.not-gpt { background-color: #f5c400; padding: 16px 40px; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.not-gpt-label { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 2px; color: #0a0a0a; }
.not-gpt-dot { width: 5px; height: 5px; background-color: rgba(0,0,0,0.3); border-radius: 50%; }
.not-gpt-text { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(0,0,0,0.6); }

/* ── TICKER ── */
.ticker { background-color: #141414; border-top: 1px solid #1e1e1e; border-bottom: 1px solid #1e1e1e; overflow: hidden; padding: 13px 0; white-space: nowrap; }
.ticker-track { display: inline-flex; animation: ticker 35s linear infinite; }
.t-item { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #777; padding: 0 24px; display: inline-flex; align-items: center; gap: 24px; }
.t-item em { color: #f5c400; font-style: normal; font-size: 13px; }

/* ── SHARED SECTIONS ── */
.section { background-color: #0a0a0a; padding: 90px 40px; }
.section-alt { background-color: #141414; padding: 90px 40px; border-top: 1px solid #1e1e1e; border-bottom: 1px solid #1e1e1e; }
.s-label { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: #f5c400; margin-bottom: 12px; }
.s-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(42px, 6vw, 76px); letter-spacing: 2px; line-height: 1; color: #ede8dc; }
.s-sub { font-size: 16px; font-weight: 500; color: #aaa; line-height: 1.75; max-width: 560px; margin-top: 12px; }
.s-header { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid #1e1e1e; padding-bottom: 28px; margin-bottom: 52px; }
.s-count { font-family: 'Bebas Neue', sans-serif; font-size: 88px; color: #1e1e1e; line-height: 1; }

/* ── PILLARS ── */
.pillars-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background-color: #1e1e1e; border: 1px solid #1e1e1e; }
.pillar { background-color: #0a0a0a; padding: 48px 40px; position: relative; overflow: hidden; transition: background-color 0.2s; }
.pillar:hover { background-color: #0f0f0f; }
.pillar-number { font-family: 'Bebas Neue', sans-serif; font-size: 120px; color: #141414; line-height: 1; position: absolute; top: 0; right: 20px; pointer-events: none; }
.pillar-icon { width: 48px; height: 48px; background-color: #f5c400; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 24px; position: relative; z-index: 1; }
.pillar-title { font-family: 'Bebas Neue', sans-serif; font-size: 32px; letter-spacing: 1px; color: #ede8dc; margin-bottom: 12px; position: relative; z-index: 1; }
.pillar-desc { font-size: 15px; font-weight: 500; color: #aaa; line-height: 1.7; position: relative; z-index: 1; margin-bottom: 20px; }
.pillar-tags { display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; margin-bottom: 24px; }
.ptag { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 11px; border: 1px solid #333; color: #888; }
.ptag.hi { border-color: #f5c400; color: #f5c400; }

/* ── PILLAR PREVIEW MOCKUPS ── */
.pp { background-color: #111; border: 1px solid #222; padding: 16px; position: relative; z-index: 1; }
.pp-lbl { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #666; margin-bottom: 10px; }
.pp-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid #1a1a1a; }
.pp-row:last-child { border-bottom: none; }
.pp-k { font-family: 'DM Mono', monospace; font-size: 11px; color: #777; }
.pp-v { font-family: 'DM Mono', monospace; font-size: 11px; color: #ede8dc; }
.pp-v.y { color: #f5c400; }
.pp-bars { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.pp-bar-r { display: flex; align-items: center; gap: 8px; }
.pp-bar-lbl { font-family: 'DM Mono', monospace; font-size: 10px; color: #888; width: 52px; flex-shrink: 0; }
.pp-bar-t { flex: 1; height: 6px; background-color: #1e1e1e; }
.pp-bar-f { height: 6px; background-color: #f5c400; }
.pp-bar-n { font-family: 'DM Mono', monospace; font-size: 10px; color: #aaa; width: 28px; text-align: right; flex-shrink: 0; }
.pp-hist { display: flex; flex-direction: column; gap: 4px; }
.pp-hist-i { display: flex; justify-content: space-between; align-items: center; padding: 7px 8px; background-color: #161616; }
.pp-hist-l { display: flex; align-items: center; gap: 8px; }
.pp-dot { width: 6px; height: 6px; background-color: #f5c400; border-radius: 50%; flex-shrink: 0; }
.pp-tool { font-family: 'DM Mono', monospace; font-size: 10px; color: #ccc; }
.pp-date { font-family: 'DM Mono', monospace; font-size: 9px; color: #666; }
.pp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.pp-card { background-color: #161616; padding: 10px; text-align: center; }
.pp-cn { font-family: 'Bebas Neue', sans-serif; font-size: 28px; color: #f5c400; line-height: 1; }
.pp-cl { font-family: 'DM Mono', monospace; font-size: 9px; color: #777; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.pp-cal { display: flex; gap: 4px; margin-top: 8px; }
.pp-cday { flex: 1; background-color: #161616; padding: 6px 3px; text-align: center; }
.pp-cd { font-family: 'DM Mono', monospace; font-size: 7px; color: #333; margin-bottom: 5px; text-transform: uppercase; }
.pp-dots { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.pp-d { width: 5px; height: 5px; background-color: #1e1e1e; border-radius: 50%; }
.pp-d.on { background-color: #f5c400; }
.pp-d.med { background-color: rgba(245,196,0,0.35); }

/* ── DASHBOARD PREVIEW ── */
.dash-wrap { display: grid; grid-template-columns: 200px 1fr; gap: 1px; background-color: #1e1e1e; border: 1px solid #1e1e1e; }
.dash-sidebar { background-color: #0d0d0d; padding: 28px 20px; }
.dash-logo { font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 3px; color: #ede8dc; margin-bottom: 28px; display: flex; align-items: center; gap: 8px; }
.dash-logo span { width: 8px; height: 8px; background-color: #f5c400; display: inline-block; flex-shrink: 0; }
.dash-nav-i { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #888; padding: 9px 10px; margin-bottom: 1px; display: flex; align-items: center; gap: 8px; border-left: 2px solid transparent; }
.dash-nav-i.on { color: #f5c400; border-left-color: #f5c400; background-color: rgba(245,196,0,0.04); }
.dash-nav-i.recent { color: #aaa; }
.dash-nav-divider { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: #333; padding: 14px 10px 6px; }
.dash-main { background-color: #0a0a0a; padding: 28px; }
.dash-title { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #777; margin-bottom: 20px; }
.dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background-color: #1e1e1e; border: 1px solid #1e1e1e; margin-bottom: 20px; }
.ds-card { background-color: #0d0d0d; padding: 18px; }
.ds-n { font-family: 'Bebas Neue', sans-serif; font-size: 38px; color: #ede8dc; line-height: 1; }
.ds-n.y { color: #f5c400; }
.ds-l { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #777; margin-top: 2px; }
.dash-sub { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #666; margin-bottom: 10px; }
.dash-log { display: flex; flex-direction: column; gap: 1px; background-color: #1e1e1e; border: 1px solid #1e1e1e; margin-bottom: 18px; }
.dl-i { background-color: #0d0d0d; padding: 11px 14px; display: flex; align-items: center; justify-content: space-between; }
.dl-l { display: flex; align-items: center; gap: 10px; }
.dl-dot { width: 6px; height: 6px; background-color: #f5c400; border-radius: 50%; flex-shrink: 0; }
.dl-tool { font-family: 'DM Mono', monospace; font-size: 11px; color: #ede8dc; }
.dl-inp { font-family: 'DM Mono', monospace; font-size: 10px; color: #777; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-date { font-family: 'DM Mono', monospace; font-size: 10px; color: #ede8dc; }
.dash-cal { display: flex; gap: 1px; background-color: #1e1e1e; border: 1px solid #1e1e1e; }
.dc-day { flex: 1; padding: 8px 4px; background-color: #0d0d0d; text-align: center; }
.dc-d { font-family: 'DM Mono', monospace; font-size: 7px; color: #555; margin-bottom: 6px; text-transform: uppercase; }
.dc-dots { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.dc-dot { width: 5px; height: 5px; background-color: #1a1a1a; border-radius: 50%; }
.dc-dot.on { background-color: #f5c400; }
.dc-dot.med { background-color: rgba(245,196,0,0.3); }

/* ── TOOLS GRID ── */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background-color: #1e1e1e; border: 1px solid #1e1e1e; }
.tool-card { background-color: #0a0a0a; padding: 30px 26px 64px; position: relative; transition: background-color 0.25s; overflow: hidden; }
.tool-card::after { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 0; background-color: #f5c400; transition: height 0.35s ease; }
.tool-card:hover { background-color: #141414; }
.tool-card:hover::after { height: 100%; }
.tc-num { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 2px; color: #777; margin-bottom: 16px; text-transform: uppercase; }
.tc-icon { width: 40px; height: 40px; background-color: #1c1c1c; display: flex; align-items: center; justify-content: center; font-size: 17px; margin-bottom: 16px; transition: background-color 0.25s; }
.tool-card:hover .tc-icon { background-color: #f5c400; }
.tc-name { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 1px; color: #ede8dc; margin-bottom: 10px; }
.tc-desc { font-size: 14px; font-weight: 500; color: #aaa; line-height: 1.65; margin-bottom: 14px; }
.tc-fmt { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 9px; border: 1px solid #f5c400; color: #f5c400; display: inline-block; margin-bottom: 14px; }
.tc-io { font-family: 'DM Mono', monospace; font-size: 11px; color: #777; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tc-io strong { color: #f5c400; font-weight: 500; }
.tc-arrow { position: absolute; bottom: 24px; right: 24px; font-size: 17px; color: #333; transition: color 0.2s, transform 0.2s; }
.tool-card:hover .tc-arrow { color: #f5c400; transform: translate(3px,-3px); }

/* ── HOW IT WORKS ── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background-color: #1e1e1e; border: 1px solid #1e1e1e; }
.step { background-color: #0a0a0a; padding: 44px 32px; position: relative; }
.step-num { font-family: 'Bebas Neue', sans-serif; font-size: 100px; color: #f5c400; line-height: 1; margin-bottom: -12px; opacity: 0.7; }
.step-title { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 1px; color: #ede8dc; margin-bottom: 12px; position: relative; z-index: 1; }
.step-desc { font-size: 14px; font-weight: 500; color: #aaa; line-height: 1.7; }
.step-con { position: absolute; right: -13px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; background-color: #f5c400; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #0a0a0a; z-index: 2; font-family: 'DM Mono', monospace; }

/* ── PRICING ── */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background-color: #1e1e1e; border: 1px solid #1e1e1e; }
.price-card { background-color: #0a0a0a; padding: 40px 28px; display: flex; flex-direction: column; position: relative; }
.price-card.featured { background-color: #f5c400; }
.pc-tier { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #888; margin-bottom: 24px; }
.price-card.featured .pc-tier { color: rgba(0,0,0,0.5); }
.pc-free { font-family: 'Bebas Neue', sans-serif; font-size: 72px; line-height: 1; color: #ede8dc; margin-bottom: 4px; }
.pc-price { display: flex; align-items: flex-start; margin-bottom: 4px; }
.pc-dollar { font-family: 'Bebas Neue', sans-serif; font-size: 26px; color: #888; margin-top: 10px; margin-right: 2px; }
.price-card.featured .pc-dollar { color: rgba(0,0,0,0.4); }
.pc-amt { font-family: 'Bebas Neue', sans-serif; font-size: 72px; line-height: 1; color: #ede8dc; }
.price-card.featured .pc-amt { color: #0a0a0a; }
.pc-per { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #777; margin-bottom: 32px; }
.price-card.featured .pc-per { color: rgba(0,0,0,0.45); }
.pc-feats { list-style: none; flex: 1; display: flex; flex-direction: column; gap: 13px; margin-bottom: 36px; }
.pc-feats li { font-family: 'DM Mono', monospace; font-size: 12px; color: #aaa; display: flex; align-items: flex-start; gap: 9px; line-height: 1.5; }
.price-card.featured .pc-feats li { color: rgba(0,0,0,0.65); }
.pc-feats li::before { content: '◆'; font-size: 6px; color: #f5c400; margin-top: 4px; flex-shrink: 0; }
.price-card.featured .pc-feats li::before { color: rgba(0,0,0,0.35); }
.pc-btn { display: block; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; text-align: center; padding: 14px; text-decoration: none; border: 1px solid #333; color: #aaa; transition: all 0.2s; margin-top: auto; }
.pc-btn:hover { background-color: #ede8dc; color: #0a0a0a; border-color: #ede8dc; }
.price-card.featured .pc-btn { background-color: #0a0a0a; color: #ede8dc; border-color: #0a0a0a; }
.price-card.featured .pc-btn:hover { background-color: #1c1c1c; }
.pc-badge { position: absolute; top: -1px; right: 28px; background-color: #0a0a0a; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; padding: 5px 10px; color: #f5c400; border: 1px solid #333; border-top: none; }

/* ── BUILDER ── */
.builder-wrap { display: flex; align-items: center; justify-content: space-between; gap: 60px; flex-wrap: wrap; margin-bottom: 56px; }
.builder-left { flex: 1; min-width: 260px; }
.builder-left h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(44px, 6vw, 72px); color: #ede8dc; line-height: 1; letter-spacing: 2px; margin-bottom: 16px; }
.builder-left h2 span { color: #f5c400; }
.builder-left p { font-size: 15px; font-weight: 500; color: #aaa; line-height: 1.75; max-width: 440px; margin-bottom: 32px; }
.btn-yellow { display: inline-block; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; background-color: #f5c400; color: #0a0a0a; padding: 16px 32px; text-decoration: none; font-weight: 500; transition: background-color 0.2s, transform 0.2s; }
.btn-yellow:hover { background-color: #e85d04; color: #ede8dc; transform: translateY(-2px); }
.builder-right { flex-shrink: 0; text-align: center; }
.split-big { font-family: 'Bebas Neue', sans-serif; font-size: 150px; color: #ede8dc; line-height: 1; }
.split-sub { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #777; margin-top: -6px; }
.builder-feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background-color: #1e1e1e; border: 1px solid #1e1e1e; }
.bf-i { background-color: #0a0a0a; padding: 28px; }
.bf-t { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: #ede8dc; letter-spacing: 1px; margin-bottom: 8px; }
.bf-d { font-size: 14px; font-weight: 500; color: #999; line-height: 1.65; }

/* ── EMAIL SIGNUP ── */
.email-center { max-width: 580px; margin: 0 auto; text-align: center; }
.email-center h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(48px, 7vw, 72px); letter-spacing: 2px; color: #ede8dc; margin-bottom: 14px; }
.email-center p { font-size: 15px; font-weight: 500; color: #aaa; line-height: 1.7; margin-bottom: 36px; }
.email-row { display: flex; border: 1px solid #333; background-color: #0a0a0a; }
.email-row input { flex: 1; background-color: transparent; border: none; padding: 16px 20px; font-family: 'DM Mono', monospace; font-size: 12px; color: #ede8dc; outline: none; min-width: 0; }
.email-row input::placeholder { color: #666; }
.email-row button { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; background-color: #f5c400; color: #0a0a0a; border: none; padding: 16px 22px; font-weight: 500; cursor: pointer; transition: background-color 0.2s; white-space: nowrap; }
.email-row button:hover { background-color: #e85d04; color: #ede8dc; }

/* ── FOOTER ── */
footer { background-color: #0a0a0a; border-top: 1px solid #1e1e1e; padding: 34px 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.f-logo { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 4px; color: #666; }
.f-copy { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 2px; color: #666; text-transform: uppercase; }
.f-links { display: flex; gap: 22px; list-style: none; }
.f-links a { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #666; text-decoration: none; transition: color 0.2s; }
.f-links a:hover { color: #f5c400; }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── LIGHT MODE ── */
body.light-mode { background-color: #f5f0e8; color: #111; }
body.light-mode .toggle-knob { transform: translateX(16px); }
body.light-mode .toggle-btn { background-color: #222; }
body.light-mode .theme-toggle { background-color: #e8e3d8; border-color: #ccc; }
body.light-mode .theme-toggle-label { color: #555; }
body.light-mode nav { background-color: #f5f0e8; border-bottom-color: #ddd; }
body.light-mode .logo { color: #111; }
body.light-mode .nav-link { color: #666; }
body.light-mode .nav-link:hover { color: #111; }
body.light-mode .hero { background-color: #f5f0e8; }
body.light-mode .hero-grid { background-color: #f5f0e8; background-image: linear-gradient(#e0dbd0 1px, transparent 1px), linear-gradient(90deg, #e0dbd0 1px, transparent 1px); }
body.light-mode .hero-spotlight { background: radial-gradient(ellipse 65% 50% at 28% 42%, rgba(200,150,0,0.1) 0%, #f5f0e8 68%); }
body.light-mode .ht-1 { color: #111; }
body.light-mode .ht-3 { -webkit-text-stroke: 1.5px rgba(0,0,0,0.15); }
body.light-mode .hero-body { color: #555; }
body.light-mode .hero-pill { border-color: #ccc; color: #555; }
body.light-mode .btn-ghost { border-color: #bbb; color: #555; }
body.light-mode .btn-ghost:hover { border-color: #555; color: #111; }
body.light-mode .stat-num { color: #111; }
body.light-mode .stat-lbl { color: #888; }
body.light-mode .early-email { background-color: #ede8dc; border-color: #ccc; }
body.light-mode .early-email-title { color: #111; }
body.light-mode .early-email-sub { color: #777; }
body.light-mode .early-email-form { border-color: #bbb; }
body.light-mode .early-email-form input { color: #111; }
body.light-mode .early-email-form input::placeholder { color: #aaa; }
body.light-mode .ticker { background-color: #ede8dc; border-color: #ccc; }
body.light-mode .t-item { color: #999; }
body.light-mode .section { background-color: #f5f0e8; }
body.light-mode .section-alt { background-color: #ede8dc; border-color: #ccc; }
body.light-mode .s-title { color: #111; }
body.light-mode .s-sub { color: #555; }
body.light-mode .s-header { border-bottom-color: #ccc; }
body.light-mode .s-count { color: #ddd; }
body.light-mode .pillars-grid { background-color: #ccc; border-color: #ccc; }
body.light-mode .pillar { background-color: #f5f0e8; }
body.light-mode .pillar:hover { background-color: #ede8dc; }
body.light-mode .pillar-number { color: #e8e3d8; }
body.light-mode .pillar-title { color: #111; }
body.light-mode .pillar-desc { color: #555; }
body.light-mode .ptag { border-color: #ccc; color: #777; }
body.light-mode .pp { background-color: #ede8dc; border-color: #ccc; }
body.light-mode .pp-lbl { color: #888; }
body.light-mode .pp-row { border-bottom-color: #ddd; }
body.light-mode .pp-k { color: #777; }
body.light-mode .pp-v { color: #111; }
body.light-mode .pp-bar-lbl { color: #777; }
body.light-mode .pp-bar-t { background-color: #ccc; }
body.light-mode .pp-bar-n { color: #555; }
body.light-mode .pp-hist-i { background-color: #ede8dc; }
body.light-mode .pp-tool { color: #333; }
body.light-mode .pp-date { color: #999; }
body.light-mode .pp-card { background-color: #ede8dc; }
body.light-mode .pp-cl { color: #888; }
body.light-mode .pp-cday { background-color: #ede8dc; }
body.light-mode .pp-cd { color: #aaa; }
body.light-mode .pp-d { background-color: #ccc; }
body.light-mode .dash-wrap { background-color: #ccc; border-color: #ccc; }
body.light-mode .dash-sidebar { background-color: #ede8dc; }
body.light-mode .dash-logo { color: #111; }
body.light-mode .dash-nav-i { color: #888; }
body.light-mode .dash-nav-divider { color: #bbb; }
body.light-mode .dash-nav-i.recent { color: #666; }
body.light-mode .dash-main { background-color: #f5f0e8; }
body.light-mode .dash-title { color: #888; }
body.light-mode .dash-stats { background-color: #ccc; border-color: #ccc; }
body.light-mode .ds-card { background-color: #ede8dc; }
body.light-mode .ds-n { color: #111; }
body.light-mode .ds-l { color: #888; }
body.light-mode .dash-sub { color: #888; }
body.light-mode .dash-log { background-color: #ccc; border-color: #ccc; }
body.light-mode .dl-i { background-color: #ede8dc; }
body.light-mode .dl-tool { color: #111; }
body.light-mode .dl-inp { color: #777; }
body.light-mode .dl-date { color: #333; }
body.light-mode .dash-cal { background-color: #ccc; border-color: #ccc; }
body.light-mode .dc-day { background-color: #ede8dc; }
body.light-mode .dc-d { color: #aaa; }
body.light-mode .dc-dot { background-color: #ccc; }
body.light-mode .tools-grid { background-color: #ccc; border-color: #ccc; }
body.light-mode .tool-card { background-color: #f5f0e8; }
body.light-mode .tool-card:hover { background-color: #ede8dc; }
body.light-mode .tc-num { color: #999; }
body.light-mode .tc-icon { background-color: #ddd; }
body.light-mode .tc-name { color: #111; }
body.light-mode .tc-desc { color: #555; }
body.light-mode .tc-io { color: #888; }
body.light-mode .tc-arrow { color: #bbb; }
body.light-mode .steps { background-color: #ccc; border-color: #ccc; }
body.light-mode .step { background-color: #f5f0e8; }
body.light-mode .step-title { color: #111; }
body.light-mode .step-desc { color: #555; }
body.light-mode .pricing-grid { background-color: #ccc; border-color: #ccc; }
body.light-mode .price-card { background-color: #f5f0e8; }
body.light-mode .pc-tier { color: #888; }
body.light-mode .pc-free { color: #111; }
body.light-mode .pc-dollar { color: #888; }
body.light-mode .pc-amt { color: #111; }
body.light-mode .pc-per { color: #888; }
body.light-mode .pc-feats li { color: #555; }
body.light-mode .pc-btn { border-color: #bbb; color: #555; }
body.light-mode .pc-btn:hover { background-color: #111; color: #ede8dc; border-color: #111; }
body.light-mode .pc-badge { background-color: #f5f0e8; border-color: #bbb; }
body.light-mode .builder-feats { background-color: #ccc; border-color: #ccc; }
body.light-mode .bf-i { background-color: #f5f0e8; }
body.light-mode .bf-t { color: #111; }
body.light-mode .bf-d { color: #555; }
body.light-mode .split-big { color: #111; }
body.light-mode .split-sub { color: #888; }
body.light-mode .builder-left h2 { color: #111; }
body.light-mode .builder-left p { color: #555; }
body.light-mode .email-center h2 { color: #111; }
body.light-mode .email-center p { color: #555; }
body.light-mode .email-row { border-color: #bbb; background-color: #ede8dc; }
body.light-mode .email-row input { color: #111; }
body.light-mode .email-row input::placeholder { color: #aaa; }
body.light-mode footer { background-color: #f5f0e8; border-top-color: #ccc; }
body.light-mode .f-logo { color: #aaa; }
body.light-mode .f-copy { color: #aaa; }
body.light-mode .f-links a { color: #aaa; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  nav { padding: 0 20px; }
  .nav-link { display: none; }
  .hero { padding: 100px 20px 60px; }
  .hero-stats { display: none; }
  .section, .section-alt { padding: 64px 20px; }
  .pillars-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .step-con { display: none; }
  .dash-wrap { grid-template-columns: 1fr; }
  .dash-sidebar { display: none; }
  .builder-wrap { flex-direction: column; }
  .split-big { font-size: 100px; }
  .builder-feats { grid-template-columns: 1fr; }
  footer { flex-direction: column; align-items: flex-start; }
  .not-gpt { padding: 14px 20px; }
  .early-email { padding: 20px; }
  .early-email-form { width: 100%; }
  .early-email-form input { flex: 1; width: auto; }
}
@media (max-width: 540px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .s-count { display: none; }
}