/* ─────────────────────────────────────────────────────────────────────
   RecallAI — Landing Page Styles
   Palette:
     --c-dark  : #30364F   (rgb 48 54 79)
     --c-mid   : #ACBAC4   (rgb 172 186 196)
     --c-warm  : #E1D9BC   (rgb 225 217 188)
     --c-cream : #F0F0DB   (rgb 240 240 219)
   ───────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --c-dark  : #30364F;
  --c-dark2 : #252a3e;
  --c-dark3 : #1c2033;
  --c-mid   : #ACBAC4;
  --c-warm  : #E1D9BC;
  --c-cream : #F0F0DB;
  --c-red   : #e87575;
  --c-green : #7bc99a;

  --font-mono   : 'Share Tech Mono', monospace;
  --font-display: 'Orbitron', sans-serif;
  --font-body   : 'Inter', sans-serif;

  --nav-h      : 70px;
  --section-pad: 110px;
  --max-w      : 1280px;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  background: var(--c-dark3);
  color: var(--c-cream);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  width: 100%;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--c-dark3); }
::-webkit-scrollbar-thumb { background: rgba(172,186,196,.4); border-radius: 2px; }

/* ── GLOBAL HELPERS ────────────────────────────────────────────────── */
.noise-overlay {
  position: fixed; inset: 0; z-index: 1000; pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}
.scanlines {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(0,0,0,.05) 3px, rgba(0,0,0,.05) 4px);
}
#grid-canvas    { position: fixed; inset: 0; z-index: 0; opacity: .14; pointer-events: none; }
#particle-canvas{ position: fixed; inset: 0; z-index: 1; opacity: .5;  pointer-events: none; }

code {
  font-family: var(--font-mono);
  font-size: .82em;
  background: rgba(172,186,196,.08);
  border: 1px solid rgba(172,186,196,.15);
  padding: 1px 6px;
  color: var(--c-warm);
}

/* ── NAV ───────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: var(--nav-h);
  background: rgba(28,32,51,.8);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(172,186,196,.1);
  transition: background .3s, box-shadow .3s;
}
.nav.scrolled { background: rgba(28,32,51,.97); box-shadow: 0 4px 40px rgba(0,0,0,.4); }

.nav-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 28px;
  height: 100%; display: flex; align-items: center; gap: 32px;
}

.nav-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; }
.logo-icon { width: 28px; height: 28px; color: var(--c-warm); flex-shrink: 0; }
.logo-icon.small { width: 22px; height: 22px; }
.logo-icon svg { width: 100%; height: 100%; }
.logo-text { font-family: var(--font-display); font-size: .9rem; font-weight: 700; letter-spacing: .1em; color: var(--c-cream); }
.logo-badge { font-family: var(--font-mono); font-size: .55rem; color: var(--c-mid); background: rgba(172,186,196,.1); border: 1px solid rgba(172,186,196,.2); padding: 2px 7px; letter-spacing: .1em; }

.nav-links { list-style: none; display: flex; gap: 28px; margin-left: auto; }
.nav-links a {
  position: relative; font-family: var(--font-display); font-size: .58rem;
  letter-spacing: .18em; color: var(--c-mid); text-decoration: none; transition: color .2s;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 1px; background: var(--c-warm); transition: width .3s;
}
.nav-links a:hover { color: var(--c-cream); }
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  display: flex; align-items: center; gap: 8px; padding: 8px 18px;
  background: transparent; border: 1px solid var(--c-warm); color: var(--c-warm);
  font-family: var(--font-display); font-size: .6rem; letter-spacing: .18em;
  text-decoration: none; cursor: pointer; transition: all .25s; flex-shrink: 0;
}
.nav-cta svg { width: 14px; height: 14px; }
.nav-cta:hover { background: var(--c-warm); color: var(--c-dark3); }

.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--c-mid); transition: all .3s; }

/* ── SECTION SHARED ────────────────────────────────────────────────── */
.section-header { margin-bottom: 56px; }
.section-num {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .3em;
  color: var(--c-mid); display: block; margin-bottom: 10px;
}
.section-title {
  font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 900; letter-spacing: -.01em; color: var(--c-cream); margin-bottom: 14px;
  opacity: 0;
}
.section-title em { font-style: normal; color: transparent; -webkit-text-stroke: 1px var(--c-mid); }
.section-desc { font-size: .93rem; color: var(--c-mid); line-height: 1.75; max-width: 480px; opacity: 0; }

/* ── BUTTONS ───────────────────────────────────────────────────────── */
.btn-primary {
  position: relative; overflow: hidden; display: inline-flex; align-items: center;
  padding: 14px 32px; background: var(--c-warm); border: none; color: var(--c-dark3);
  font-family: var(--font-display); font-size: .65rem; letter-spacing: .22em; font-weight: 700;
  cursor: pointer; transition: transform .2s, box-shadow .2s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  text-decoration: none;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(225,217,188,.2); }
.btn-glare {
  position: absolute; top: 0; left: -120%; width: 80%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transform: skewX(-20deg); transition: left .45s ease;
}
.btn-primary:hover .btn-glare { left: 140%; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px; background: none;
  border: 1px solid rgba(172,186,196,.25); color: var(--c-mid);
  font-family: var(--font-display); font-size: .6rem; letter-spacing: .2em;
  padding: 13px 24px; cursor: pointer; transition: all .25s; text-decoration: none;
}
.btn-ghost svg { width: 16px; height: 16px; }
.btn-ghost:hover { border-color: var(--c-mid); color: var(--c-cream); }

/* ── HERO ──────────────────────────────────────────────────────────── */
.hero {
  position: relative; z-index: 10; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: calc(var(--nav-h) + 64px) 10vw 80px;
  overflow: hidden;
}

.hero-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: .65rem; letter-spacing: .2em; color: var(--c-mid);
  margin-bottom: 40px; opacity: 0;
}
.tag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-green); animation: pulse-dot 2s ease infinite; flex-shrink: 0; }
.tag-sep { color: rgba(172,186,196,.3); }
.tag-live { color: var(--c-green); font-weight: 600; }

.hero-title { display: flex; flex-direction: column; gap: 2px; margin-bottom: 28px; }
.title-row { display: flex; align-items: center; overflow: hidden; }
.title-row.row2 { margin-left: 40px; }
.title-row.row3 { margin-left: 80px; }

.hero-word {
  font-family: var(--font-display); font-size: clamp(3rem, 8.5vw, 8.5rem);
  font-weight: 900; line-height: .9; letter-spacing: -.02em; color: var(--c-cream);
  display: inline-block; opacity: 0; transform: translateY(60px);
}
.hero-word.dim    { color: rgba(240,240,219,.3); }
.hero-word.accent { color: var(--c-warm); }

.hero-sub {
  font-size: 1rem; line-height: 1.8; color: var(--c-mid); max-width: 560px;
  margin-bottom: 44px; opacity: 0;
}
.hero-sub strong { color: var(--c-cream); }

.hero-actions { display: flex; align-items: center; gap: 20px; margin-bottom: 64px; opacity: 0; flex-wrap: wrap; }

.hero-stats { display: flex; align-items: center; gap: 32px; margin-bottom: 64px; opacity: 0; flex-wrap: wrap; width: 100%; }
.hstat { display: flex; flex-direction: column; }
.hstat-val { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--c-cream); line-height: 1.1; }
.hstat-val span { font-size: 1rem; font-weight: 400; color: var(--c-mid); }
.hstat-lbl { font-family: var(--font-mono); font-size: .52rem; letter-spacing: .2em; color: var(--c-mid); margin-top: 4px; }
.hstat-div { width: 1px; height: 40px; background: rgba(172,186,196,.2); }

/* Terminal preview */
.hero-terminal {
  width: 100%; max-width: 720px;
  border: 1px solid rgba(172,186,196,.2);
  background: rgba(28,32,51,.85);
  backdrop-filter: blur(10px);
  opacity: 0;
}
.terminal-bar {
  display: flex; align-items: center; gap: 6px; padding: 10px 16px;
  background: rgba(172,186,196,.05); border-bottom: 1px solid rgba(172,186,196,.1);
}
.t-dot { width: 10px; height: 10px; border-radius: 50%; }
.t-dot.red { background: #e87575; }
.t-dot.yellow { background: #e8c975; }
.t-dot.green { background: var(--c-green); }
.t-title { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; color: rgba(172,186,196,.5); margin-left: 8px; }
.terminal-body { padding: 16px 20px; font-family: var(--font-mono); font-size: .72rem; line-height: 1.6; }
.t-line { display: block; }
.t-blank { height: 8px; }
.t-comment { color: rgba(172,186,196,.4); }
.t-head    { color: var(--c-warm); font-weight: 600; }
.t-key     { color: var(--c-mid); }
.t-val     { color: var(--c-cream); }
.t-high    { color: #e87575; }
.t-med     { color: #e8c975; }
.t-bullet  { color: var(--c-mid); }
.t-mod     { color: #e8c975; margin-right: 4px; }
.t-add     { color: var(--c-green); margin-right: 4px; }
.t-diff    { color: rgba(172,186,196,.5); }
.t-cursor-line { color: rgba(172,186,196,.5); }
.t-time    { color: var(--c-warm); }
.t-cursor-blink { color: var(--c-warm); animation: blink 1s step-end infinite; }

/* HUD */
.hud {
  position: absolute; font-family: var(--font-mono); font-size: .58rem;
  padding: 12px 16px; border: 1px solid rgba(172,186,196,.12);
  background: rgba(28,32,51,.7); backdrop-filter: blur(8px); opacity: 0;
}
.hud-tl { top: calc(var(--nav-h) + 24px); left: 28px; }
.hud-br { bottom: 90px; right: 28px; }
.hud-row { display: flex; gap: 12px; margin-bottom: 4px; }
.hud-row:last-child { margin-bottom: 0; }
.hud-key  { color: rgba(172,186,196,.6); letter-spacing: .1em; }
.hud-val  { color: var(--c-warm); letter-spacing: .05em; }
.status-on { color: var(--c-green); }

.hero-scroll-hint {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .3em; color: rgba(172,186,196,.4);
}
.scroll-line { width: 1px; height: 44px; background: rgba(172,186,196,.15); overflow: hidden; position: relative; }
.scroll-dot {
  position: absolute; top: -5px; left: -2px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-warm); animation: scroll-drop 1.8s ease-in-out infinite;
}

/* ── PROBLEM SECTION ───────────────────────────────────────────────── */
.problem-section {
  position: relative; z-index: 10; padding: var(--section-pad) 10vw;
  background: rgba(48,54,79,.2);
  border-top: 1px solid rgba(172,186,196,.07);
  border-bottom: 1px solid rgba(172,186,196,.07);
}

.problem-split {
  display: flex; gap: 0; align-items: stretch;
  border: 1px solid rgba(172,186,196,.1);
  margin-bottom: 56px;
  opacity: 0;
}

.problem-side {
  flex: 1; padding: 40px 36px;
}
.problem-bad  { background: rgba(232,117,117,.04); }
.problem-good { background: rgba(123,201,154,.04); }

.problem-label {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em;
  padding: 4px 10px; display: inline-block; margin-bottom: 28px;
}
.problem-label.bad  { border: 1px solid rgba(232,117,117,.35); color: var(--c-red); }
.problem-label.good { border: 1px solid rgba(123,201,154,.35); color: var(--c-green); }

.flow-steps { display: flex; flex-direction: column; gap: 0; }
.flow-step {
  display: flex; gap: 16px; align-items: flex-start; padding: 14px 0;
}
.flow-step strong { font-size: .88rem; color: var(--c-cream); display: block; margin-bottom: 4px; }
.flow-step p { font-size: .8rem; color: var(--c-mid); line-height: 1.6; }
.step-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }

.flow-arrow { font-family: var(--font-mono); font-size: .9rem; padding-left: 20px; }
.bad-arrow  { color: rgba(232,117,117,.4); }
.good-arrow { color: rgba(123,201,154,.4); }

.problem-cost {
  margin-top: 24px; padding: 16px 20px;
  border: 1px solid rgba(232,117,117,.2);
  background: rgba(232,117,117,.05);
  display: flex; flex-direction: column;
}
.problem-cost.good { border-color: rgba(123,201,154,.2); background: rgba(123,201,154,.05); }
.cost-label { font-family: var(--font-mono); font-size: .55rem; letter-spacing: .2em; color: var(--c-mid); margin-bottom: 6px; }
.cost-val { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--c-red); }
.problem-cost.good .cost-val { color: var(--c-green); }

.problem-divider {
  width: 1px; display: flex; flex-direction: column; align-items: center;
  background: rgba(172,186,196,.1);
}
.divider-line { flex: 1; width: 1px; background: rgba(172,186,196,.1); }
.divider-vs {
  font-family: var(--font-display); font-size: .7rem; letter-spacing: .15em;
  color: var(--c-mid); padding: 12px 0; writing-mode: vertical-lr;
}

/* Metrics table */
.metrics-table {
  border: 1px solid rgba(172,186,196,.1);
  overflow: hidden;
  opacity: 0;
}
.metrics-header, .metrics-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
}
.metrics-header {
  background: rgba(172,186,196,.05);
  border-bottom: 1px solid rgba(172,186,196,.1);
}
.metrics-row { border-bottom: 1px solid rgba(172,186,196,.06); transition: background .2s; }
.metrics-row:last-child { border-bottom: none; }
.metrics-row:hover { background: rgba(172,186,196,.04); }
.metrics-col { padding: 12px 20px; font-size: .82rem; display: flex; align-items: center; }
.metric-label { font-family: var(--font-mono); font-size: .65rem; letter-spacing: .08em; color: var(--c-mid); }
.metrics-header .metric-label { letter-spacing: .15em; font-size: .6rem; text-transform: uppercase; }
.metric-without { font-family: var(--font-mono); font-size: .7rem; color: rgba(232,117,117,.7); border-left: 1px solid rgba(172,186,196,.06); }
.metric-with    { font-family: var(--font-mono); font-size: .7rem; color: var(--c-green); border-left: 1px solid rgba(172,186,196,.06); }
.metrics-header .metric-without,
.metrics-header .metric-with { font-size: .6rem; letter-spacing: .1em; }
.bad-val  { color: rgba(232,117,117,.8); }
.good-val { color: var(--c-green); }

/* ── HOW IT WORKS ──────────────────────────────────────────────────── */
.how-section { position: relative; z-index: 10; padding: var(--section-pad) 10vw; }

.flow-diagram {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0;
  margin-bottom: 64px; padding: 32px;
  border: 1px solid rgba(172,186,196,.1);
  background: rgba(48,54,79,.2);
  opacity: 0;
}
.flow-node {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 16px 20px; min-width: 120px;
}
.fn-icon { font-size: 1.8rem; margin-bottom: 8px; }
.fn-label { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; color: var(--c-mid); line-height: 1.5; }
.highlight-node { background: rgba(225,217,188,.06); border: 1px solid rgba(225,217,188,.2); }
.highlight-node .fn-label { color: var(--c-warm); }
.end-node .fn-label { color: var(--c-green); }
.flow-connector { display: flex; align-items: center; color: rgba(172,186,196,.3); font-size: 1.2rem; }
.fc-line { width: 20px; height: 1px; background: rgba(172,186,196,.2); }
.fc-arrow { font-family: var(--font-mono); color: rgba(172,186,196,.4); }

.triggers-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(172,186,196,.08); margin-bottom: 56px;
}
.trigger-card {
  position: relative; padding: 32px 24px; background: var(--c-dark3);
  transition: background .3s; opacity: 0; transform: translateY(20px);
}
.trigger-card:hover { background: rgba(48,54,79,.8); }
.trigger-num {
  font-family: var(--font-display); font-size: .6rem; letter-spacing: .2em;
  color: rgba(172,186,196,.35); margin-bottom: 20px;
}
.trigger-icon { width: 44px; height: 44px; color: var(--c-mid); margin-bottom: 16px; }
.trigger-icon svg { width: 100%; height: 100%; }
.trigger-card h3 {
  font-family: var(--font-display); font-size: .7rem; letter-spacing: .15em;
  color: var(--c-cream); margin-bottom: 10px;
}
.trigger-card p { font-size: .82rem; color: var(--c-mid); line-height: 1.7; margin-bottom: 16px; }
.trigger-card code { font-size: .75rem; }
.trigger-freq {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .15em;
  color: var(--c-warm); border: 1px solid rgba(225,217,188,.2); padding: 3px 8px; display: inline-block;
}

.deep-dive {
  border: 1px solid rgba(172,186,196,.1);
  background: rgba(28,32,51,.6);
  padding: 36px;
  opacity: 0;
}
.deep-title { margin-bottom: 24px; }
.deep-title h3 {
  font-family: var(--font-display); font-size: 1rem; letter-spacing: .12em;
  color: var(--c-cream); margin-top: 6px;
}
.code-flow { display: flex; flex-direction: column; }
.cf-step {
  display: flex; gap: 16px; align-items: flex-start; padding: 10px 0;
}
.cf-n {
  font-family: var(--font-display); font-size: .65rem; color: var(--c-mid);
  border: 1px solid rgba(172,186,196,.2); width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
}
.cf-text { font-family: var(--font-mono); font-size: .72rem; color: var(--c-mid); line-height: 1.6; }
.cf-text strong { color: var(--c-cream); }
.cf-arrow { font-family: var(--font-mono); color: rgba(172,186,196,.2); padding-left: 36px; font-size: .8rem; }
.highlight-step .cf-n { border-color: var(--c-green); color: var(--c-green); }
.highlight-step .cf-text { color: var(--c-cream); }

/* ── FEATURES ──────────────────────────────────────────────────────── */
.features { position: relative; z-index: 10; padding: var(--section-pad) 10vw; }

.features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: rgba(172,186,196,.08);
}

.feat-card {
  position: relative; padding: 36px 28px; background: var(--c-dark3);
  transition: background .3s; overflow: hidden; opacity: 0; transform: translateY(24px);
}
.feat-card:hover { background: rgba(48,54,79,.75); }
.feat-primary { background: rgba(48,54,79,.5); }
.feat-card--wide { grid-column: span 3; display: flex; gap: 40px; align-items: flex-start; }

.feat-icon { width: 46px; height: 46px; color: var(--c-mid); margin-bottom: 20px; }
.feat-icon svg { width: 100%; height: 100%; }
.feat-icon-lg { width: 64px; height: 64px; color: var(--c-mid); flex-shrink: 0; margin-top: 4px; }
.feat-icon-lg svg { width: 100%; height: 100%; }
.feat-wide-body { flex: 1; }

.feat-card h3 {
  font-family: var(--font-display); font-size: .72rem; letter-spacing: .15em;
  color: var(--c-cream); margin-bottom: 12px;
}
.feat-card p { font-size: .87rem; line-height: 1.75; color: rgba(172,186,196,.8); margin-bottom: 16px; }

.feat-pill {
  display: inline-block; font-family: var(--font-mono); font-size: .56rem;
  letter-spacing: .15em; color: var(--c-warm); border: 1px solid rgba(225,217,188,.25); padding: 3px 9px;
}

.feat-corner { position: absolute; width: 10px; height: 10px; }
.feat-corner.tl { top: 0; left: 0; border-top: 1px solid rgba(172,186,196,.3); border-left: 1px solid rgba(172,186,196,.3); }
.feat-corner.br { bottom: 0; right: 0; border-bottom: 1px solid rgba(172,186,196,.3); border-right: 1px solid rgba(172,186,196,.3); }

.file-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.file-tag {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em;
  color: var(--c-mid); border: 1px solid rgba(172,186,196,.2); padding: 3px 8px;
}

/* Sidebar preview */
.sidebar-preview {
  border: 1px solid rgba(172,186,196,.15); background: rgba(28,32,51,.8);
  margin-top: 20px; font-family: var(--font-mono); max-width: 380px;
}
.sb-section { padding: 12px 14px; border-bottom: 1px solid rgba(172,186,196,.08); }
.sb-section:last-child { border-bottom: none; }
.sb-header { font-size: .62rem; color: var(--c-cream); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.sb-dot { width: 6px; height: 6px; border-radius: 50%; }
.sb-dot.on { background: var(--c-green); animation: pulse-dot 2s infinite; }
.sb-row { display: flex; gap: 10px; font-size: .6rem; margin-bottom: 4px; }
.sb-k { color: rgba(172,186,196,.5); flex-shrink: 0; }
.sb-v { color: var(--c-cream); }
.sb-focus { color: var(--c-warm); }
.sb-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-btn { font-size: .58rem; padding: 5px 10px; border: 1px solid rgba(172,186,196,.15); color: var(--c-mid); cursor: pointer; }
.sb-btn-wide { flex: 1 0 100%; text-align: center; }
.sb-sub-header { font-size: .56rem; letter-spacing: .15em; color: rgba(172,186,196,.5); margin-bottom: 8px; }
.sb-task { font-size: .62rem; color: var(--c-cream); margin-bottom: 4px; }
.sb-session { font-size: .58rem; color: var(--c-mid); margin-bottom: 3px; }

.ai-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ai-badge {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em;
  color: var(--c-mid); border: 1px solid rgba(172,186,196,.2); padding: 3px 9px;
}

/* ── CONTEXT PREVIEW ───────────────────────────────────────────────── */
.context-preview-section {
  position: relative; z-index: 10; padding: var(--section-pad) 10vw;
  background: rgba(48,54,79,.2); border-top: 1px solid rgba(172,186,196,.07);
  border-bottom: 1px solid rgba(172,186,196,.07);
}
.context-preview-wrap { opacity: 0; }
.cp-label {
  display: flex; align-items: center; gap: 16px; margin-bottom: 0;
  padding: 10px 20px; border: 1px solid rgba(172,186,196,.15); border-bottom: none;
  background: rgba(172,186,196,.04);
}
.cp-file { font-family: var(--font-mono); font-size: .68rem; color: var(--c-warm); }
.cp-tag  { font-family: var(--font-mono); font-size: .58rem; color: var(--c-green); background: rgba(123,201,154,.1); border: 1px solid rgba(123,201,154,.25); padding: 2px 8px; }

.context-code {
  border: 1px solid rgba(172,186,196,.15); background: rgba(28,32,51,.8);
  padding: 28px 32px; overflow-x: auto;
}
.context-code pre { margin: 0; }
.context-code code {
  font-family: var(--font-mono); font-size: .72rem; line-height: 1.7;
  background: none; border: none; padding: 0; color: var(--c-cream);
}
.cc-head   { color: var(--c-warm); font-weight: 600; }
.cc-key    { color: var(--c-mid); }
.cc-bullet { color: rgba(172,186,196,.5); }
.cc-high   { color: var(--c-red); }
.cc-med    { color: #e8c975; }
.cc-mod    { color: #e8c975; }
.cc-add    { color: var(--c-green); }
.cc-comment { color: rgba(172,186,196,.4); }

.cp-footer {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px; border: 1px solid rgba(172,186,196,.1); border-top: none;
  background: rgba(172,186,196,.03);
  font-family: var(--font-mono); font-size: .6rem; color: var(--c-mid);
}
.cpf-sep { color: rgba(172,186,196,.3); }

/* ── FILE STRUCTURE ────────────────────────────────────────────────── */
.file-structure-section { position: relative; z-index: 10; padding: var(--section-pad) 10vw; }
.fs-wrap { display: flex; gap: 0; border: 1px solid rgba(172,186,196,.1); opacity: 0; }
.fs-tree {
  flex: 1; padding: 28px 24px;
  font-family: var(--font-mono); font-size: .72rem; line-height: 1.9;
  background: rgba(28,32,51,.6); border-right: 1px solid rgba(172,186,196,.08);
}
.fs-line { display: block; }
.root    { color: var(--c-cream); font-weight: 600; }
.indent1 { padding-left: 0; }
.indent2 { padding-left: 20px; }
.fs-dir  { color: var(--c-warm); }
.fs-file { color: var(--c-mid); cursor: pointer; transition: color .2s; }
.fs-file:hover { color: var(--c-cream); }
.accent-file { color: var(--c-warm); }
.fs-note { color: rgba(172,186,196,.4); font-size: .64rem; }
.fs-clickable:hover .fs-file { text-decoration: underline; }
.fs-main .accent-file { text-decoration: underline; text-underline-offset: 3px; }

.fs-desc-panel {
  width: 300px; flex-shrink: 0; padding: 28px 24px;
  background: rgba(48,54,79,.3);
}
.fsd-title {
  font-family: var(--font-display); font-size: .68rem; letter-spacing: .15em;
  color: var(--c-cream); margin-bottom: 12px;
}
.fsd-body { font-size: .83rem; color: var(--c-mid); line-height: 1.75; }

/* ── COMMANDS ──────────────────────────────────────────────────────── */
.commands-section { position: relative; z-index: 10; padding: var(--section-pad) 10vw; }

.cmd-palette { border: 1px solid rgba(172,186,196,.15); overflow: hidden; opacity: 0; }
.cmd-palette-bar {
  display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  background: rgba(172,186,196,.07); border-bottom: 1px solid rgba(172,186,196,.12);
}
.cmd-palette-icon {
  font-family: var(--font-display); font-size: .7rem; color: var(--c-mid);
  width: 24px; height: 24px; border: 1px solid rgba(172,186,196,.3);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cmd-palette-input {
  font-family: var(--font-mono); font-size: .78rem; color: var(--c-cream); flex: 1;
}
.cmd-cursor-blink { animation: blink 1s step-end infinite; color: var(--c-warm); }

.cmd-list {}
.cmd-row {
  display: grid; grid-template-columns: 220px 1fr 80px;
  align-items: center; padding: 14px 20px;
  border-bottom: 1px solid rgba(172,186,196,.06);
  transition: background .2s; cursor: default; opacity: 0;
}
.cmd-row:last-child { border-bottom: none; }
.cmd-row:hover { background: rgba(172,186,196,.05); }
.cmd-name { font-family: var(--font-mono); font-size: .7rem; color: var(--c-cream); letter-spacing: .06em; }
.cmd-desc { font-size: .82rem; color: var(--c-mid); line-height: 1.5; padding: 0 20px; }
.cmd-when {
  font-family: var(--font-mono); font-size: .55rem; letter-spacing: .15em;
  color: var(--c-warm); border: 1px solid rgba(225,217,188,.2); padding: 3px 7px;
  text-align: center; justify-self: end;
}

/* ── SETTINGS ──────────────────────────────────────────────────────── */
.settings-section {
  position: relative; z-index: 10; padding: var(--section-pad) 10vw;
  background: rgba(48,54,79,.2); border-top: 1px solid rgba(172,186,196,.07);
  border-bottom: 1px solid rgba(172,186,196,.07);
}
.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(172,186,196,.08); }
.setting-card {
  padding: 24px 28px; background: var(--c-dark3); opacity: 0; transform: translateY(16px);
  transition: background .3s;
}
.setting-card:hover { background: rgba(48,54,79,.7); }
.setting-key {
  font-family: var(--font-mono); font-size: .68rem; color: var(--c-warm);
  letter-spacing: .06em; margin-bottom: 6px;
}
.setting-default {
  font-family: var(--font-mono); font-size: .58rem; color: rgba(172,186,196,.5);
  margin-bottom: 10px;
}
.default-true  { color: var(--c-green); }
.default-num   { color: #e8c975; }
.default-str   { color: var(--c-mid); }
.setting-desc  { font-size: .82rem; color: var(--c-mid); line-height: 1.65; }

/* ── ROADMAP ───────────────────────────────────────────────────────── */
.roadmap-section { position: relative; z-index: 10; padding: var(--section-pad) 10vw; }
.roadmap-track { display: flex; gap: 1px; background: rgba(172,186,196,.08); }
.roadmap-col { flex: 1; display: flex; flex-direction: column; gap: 1px; }

.rm-version { padding: 36px 32px; background: var(--c-dark3); flex: 1; opacity: 0; transform: translateX(-20px); }
.rm-version-label {
  font-family: var(--font-display); font-size: .65rem; letter-spacing: .15em;
  color: var(--c-cream); margin-bottom: 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.rm-ship   { font-family: var(--font-mono); font-size: .55rem; color: var(--c-green); border: 1px solid rgba(123,201,154,.3); padding: 3px 8px; }
.rm-next   { font-family: var(--font-mono); font-size: .55rem; color: var(--c-warm); border: 1px solid rgba(225,217,188,.3); padding: 3px 8px; }
.rm-future { font-family: var(--font-mono); font-size: .55rem; color: var(--c-mid); border: 1px solid rgba(172,186,196,.3); padding: 3px 8px; }

.rm-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rm-done, .rm-todo { display: flex; gap: 12px; font-size: .83rem; line-height: 1.6; }
.rm-done { color: var(--c-mid); }
.rm-todo { color: rgba(172,186,196,.55); }
.rm-check { color: var(--c-green); flex-shrink: 0; }
.rm-box   { color: rgba(172,186,196,.3); flex-shrink: 0; }

/* ── INSTALL SECTION ───────────────────────────────────────────────── */
.install-section { position: relative; z-index: 10; padding: var(--section-pad) 10vw; }

.install-cards { display: flex; gap: 1px; background: rgba(172,186,196,.08); margin-bottom: 48px; }
.install-card {
  flex: 1; position: relative; padding: 40px 36px; background: var(--c-dark3);
  opacity: 0; transform: translateY(24px);
}
.install-card:hover { background: rgba(48,54,79,.6); }
.primary-install { background: rgba(48,54,79,.4); }

.install-badge {
  font-family: var(--font-mono); font-size: .55rem; letter-spacing: .2em;
  color: var(--c-warm); border: 1px solid rgba(225,217,188,.3);
  padding: 3px 9px; display: inline-block; margin-bottom: 20px;
}
.install-icon { width: 52px; height: 52px; color: var(--c-mid); margin-bottom: 20px; }
.install-icon svg { width: 100%; height: 100%; }
.install-card h3 {
  font-family: var(--font-display); font-size: .75rem; letter-spacing: .15em;
  color: var(--c-cream); margin-bottom: 24px;
}
.install-steps { margin-bottom: 28px; display: flex; flex-direction: column; gap: 14px; }
.install-step { display: flex; gap: 14px; align-items: flex-start; font-size: .85rem; color: var(--c-mid); line-height: 1.6; }
.ins-n {
  font-family: var(--font-display); font-size: .6rem; color: var(--c-warm);
  border: 1px solid rgba(225,217,188,.3); width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.install-step strong { color: var(--c-cream); }
.install-btn { width: 100%; justify-content: center; }
.install-btn-ghost {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 14px 32px; background: none; border: 1px solid rgba(172,186,196,.25); color: var(--c-mid);
  font-family: var(--font-display); font-size: .62rem; letter-spacing: .2em; cursor: pointer; transition: all .25s;
}
.install-btn-ghost svg { width: 16px; height: 16px; }
.install-btn-ghost:hover { border-color: var(--c-mid); color: var(--c-cream); }

/* Setup box */
.setup-box {
  border: 1px solid rgba(172,186,196,.12); padding: 36px; margin-bottom: 40px;
  background: rgba(48,54,79,.2); opacity: 0;
}
.setup-title {
  font-family: var(--font-display); font-size: .65rem; letter-spacing: .2em;
  color: var(--c-warm); margin-bottom: 28px;
}
.setup-steps { display: flex; align-items: flex-start; gap: 0; }
.setup-step { flex: 1; }
.ss-num {
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 900;
  color: rgba(172,186,196,.1); line-height: 1; margin-bottom: 10px;
}
.ss-content strong { font-size: .9rem; color: var(--c-cream); display: block; margin-bottom: 6px; }
.ss-content p { font-size: .82rem; color: var(--c-mid); line-height: 1.7; }
.setup-arrow { font-family: var(--font-display); font-size: 1.5rem; color: rgba(172,186,196,.2); padding: 0 24px; margin-top: 12px; }

/* Troubleshoot */
.troubleshoot {
  border: 1px solid rgba(172,186,196,.1); padding: 32px 36px;
  background: rgba(28,32,51,.5); opacity: 0;
}
.ts-title {
  font-family: var(--font-display); font-size: .65rem; letter-spacing: .2em;
  color: var(--c-mid); margin-bottom: 24px;
}
.ts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ts-item { padding: 16px 20px; border: 1px solid rgba(172,186,196,.08); }
.ts-problem { font-family: var(--font-mono); font-size: .65rem; color: var(--c-warm); margin-bottom: 8px; }
.ts-fix { font-size: .8rem; color: var(--c-mid); line-height: 1.65; }

/* ── AUTHOR ────────────────────────────────────────────────────────── */
.author-section {
  position: relative; z-index: 10; padding: 64px 10vw;
  background: rgba(48,54,79,.3); border-top: 1px solid rgba(172,186,196,.08);
  border-bottom: 1px solid rgba(172,186,196,.08);
  text-align: center;
}
.author-inner { max-width: 720px; margin: 0 auto; opacity: 0; }
.author-quote {
  font-family: var(--font-body); font-style: italic; font-size: 1.1rem;
  line-height: 1.8; color: var(--c-mid); margin-bottom: 20px;
}
.quote-mark { font-size: 2rem; color: rgba(172,186,196,.3); vertical-align: middle; }
.author-credit { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; color: var(--c-mid); margin-bottom: 20px; }
.author-credit strong { color: var(--c-cream); }
.author-tech-stack { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tech-tag {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em;
  color: var(--c-mid); border: 1px solid rgba(172,186,196,.18); padding: 4px 12px;
}

/* ── CTA ───────────────────────────────────────────────────────────── */
.cta {
  position: relative; z-index: 10; padding: var(--section-pad) 10vw;
  text-align: center; overflow: hidden;
}
.cta-border {
  position: absolute; top: 0; left: 10vw; right: 10vw; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-mid), transparent); opacity: .18;
}
.cta-inner { position: relative; z-index: 1; }
.cta-pre {
  font-family: var(--font-mono); font-size: .65rem; letter-spacing: .3em;
  color: var(--c-mid); display: block; margin-bottom: 20px; opacity: 0;
}
.cta-title {
  font-family: var(--font-display); font-size: clamp(2.5rem, 7vw, 6.5rem);
  font-weight: 900; line-height: .92; margin-bottom: 24px; opacity: 0;
}
.cta-word { color: var(--c-cream); display: block; }
.cta-word.accent { color: var(--c-warm); }
.cta-word.dim { color: rgba(240,240,219,.3); }
.cta-sub { font-size: .95rem; color: var(--c-mid); margin-bottom: 40px; opacity: 0; }
.cta-actions { display: flex; flex-direction: column; align-items: center; gap: 20px; opacity: 0; }
.cta-main-btn { font-size: .68rem; padding: 16px 40px; }
.cta-verify { font-family: var(--font-mono); font-size: .65rem; color: var(--c-mid); }
.cta-verify-check { color: var(--c-green); margin-left: 8px; }
.cta-note { font-family: var(--font-mono); font-size: .58rem; color: rgba(172,186,196,.35); letter-spacing: .1em; margin-top: 24px; }
.cta-bg-ring {
  position: absolute; border-radius: 50%; border: 1px solid rgba(172,186,196,.06);
  transform: translate(-50%,-50%); pointer-events: none; top: 50%; left: 50%;
}
.ring1 { width: 380px; height: 380px; animation: ring-spin 18s linear infinite; }
.ring2 { width: 660px; height: 660px; animation: ring-spin 32s linear infinite reverse; }
.ring3 { width: 940px; height: 940px; animation: ring-spin 48s linear infinite; }

/* ── FOOTER ────────────────────────────────────────────────────────── */
.footer { position: relative; z-index: 10; background: var(--c-dark3); }
.footer-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 56px 10vw 40px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  border-top: 1px solid rgba(172,186,196,.08);
}
.footer-brand .footer-logo {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.footer-brand p { font-size: .8rem; color: rgba(172,186,196,.5); line-height: 1.7; }
.footer-links-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col-title {
  font-family: var(--font-display); font-size: .55rem; letter-spacing: .25em;
  color: var(--c-mid); margin-bottom: 4px;
}
.footer-links-col a {
  font-size: .8rem; color: rgba(172,186,196,.45); text-decoration: none; transition: color .2s;
}
.footer-links-col a:hover { color: var(--c-mid); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 10vw; border-top: 1px solid rgba(172,186,196,.06);
  font-family: var(--font-mono); font-size: .58rem; color: rgba(172,186,196,.35);
}
.footer-version { color: var(--c-green); }
.footer-bottom-line {
  height: 2px;
  background: linear-gradient(90deg, var(--c-dark3), var(--c-dark), var(--c-mid), var(--c-warm), var(--c-mid), var(--c-dark), var(--c-dark3));
  opacity: .25;
}

/* ── KEYFRAMES ─────────────────────────────────────────────────────── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.6); }
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes scroll-drop {
  0%   { top: -6px; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@keyframes ring-spin {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}

/* Glitch */
@keyframes glitch-a {
  0%,100% { clip-path: inset(0 0 100% 0); }
  10%     { clip-path: inset(10% 0 60% 0); transform: translateX(-3px); }
  25%     { clip-path: inset(55% 0 25% 0); transform: translateX(3px); }
  40%     { clip-path: inset(0 0 100% 0); }
}
@keyframes glitch-b {
  0%,100% { clip-path: inset(0 0 100% 0); }
  15%     { clip-path: inset(20% 0 55% 0); transform: translateX(5px); color: rgba(172,186,196,.8); }
  30%     { clip-path: inset(65% 0 18% 0); transform: translateX(-4px); }
  45%     { clip-path: inset(0 0 100% 0); }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — ALL BREAKPOINTS
   1280px  Desktop (base)
   1100px  Large tablet / small laptop
    960px  Tablet landscape
    768px  Tablet portrait / large mobile
    480px  Mobile
    360px  Small mobile
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1100px ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .features-grid                { grid-template-columns: repeat(2, 1fr); }
  .feat-card--wide              { grid-column: span 2; }
  .triggers-grid                { grid-template-columns: repeat(2, 1fr); }
  .nav-links                    { gap: 18px; }
  .nav-links a                  { font-size: .54rem; }
  .hero                         { padding: calc(var(--nav-h) + 56px) 6vw 80px; }
  .hero-terminal                { max-width: 100%; }
  .footer-inner                 { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 28px; }
}

/* ── 960px ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  :root { --section-pad: 88px; }

  /* Nav */
  .nav-links                    { gap: 14px; }
  .nav-links a                  { font-size: .5rem; }
  .nav-cta                      { padding: 7px 14px; font-size: .55rem; }

  /* Hero */
  .hero                         { padding: calc(var(--nav-h) + 48px) 5vw 72px; }
  .title-row.row2               { margin-left: 24px; }
  .title-row.row3               { margin-left: 48px; }
  .hero-sub                     { max-width: 100%; }
  .hero-stats                   { gap: 24px; flex-wrap: wrap; }

  /* Problem */
  .problem-split                { flex-direction: column; }
  .problem-divider              { width: 100%; height: auto; flex-direction: row; align-items: center; padding: 16px 0; }
  .divider-line                 { flex: 1; height: 1px; width: auto; }
  .divider-vs                   { writing-mode: horizontal-tb; padding: 0 16px; }

  /* How it works */
  .flow-diagram                 { flex-wrap: wrap; justify-content: center; gap: 4px; }
  .flow-connector               { display: none; }
  .flow-node                    { flex: 0 0 calc(33% - 8px); min-width: 100px; padding: 12px; }

  /* Roadmap */
  .roadmap-track                { flex-direction: column; }
  .rm-version                   { transform: none !important; }

  /* Settings */
  .settings-grid                { grid-template-columns: 1fr 1fr; }

  /* Footer */
  .footer-inner                 { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand                 { grid-column: span 2; }
}

/* ── 768px ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --section-pad: 72px; --nav-h: 60px; }

  /* ── Global padding ── */
  .hero,
  .problem-section,
  .how-section,
  .features,
  .context-preview-section,
  .file-structure-section,
  .commands-section,
  .settings-section,
  .roadmap-section,
  .install-section,
  .author-section,
  .cta                          { padding-left: 5vw; padding-right: 5vw; }

  /* ── Nav ── */
  .nav-links, .nav-cta          { display: none; }
  .hamburger                    { display: flex; }

  /* ── Mobile nav overlay (flex so it can center children; hidden via opacity/pointer-events until .open) ── */
  .mobile-nav                   { display: flex; }

  /* ── Hero ── */
  .hero                         { padding-top: calc(var(--nav-h) + 36px); padding-bottom: 56px; min-height: auto; }
  .hero-title                   { gap: 0; }
  .title-row                    { flex-wrap: wrap; overflow: visible; }
  .title-row.row2               { margin-left: 0; }
  .title-row.row3               { margin-left: 0; }
  .hero-word                    { font-size: clamp(2rem, 11.5vw, 3.8rem); line-height: .95; }
  .hero-eyebrow                 { font-size: .56rem; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; }
  .hero-sub                     { font-size: .88rem; margin-bottom: 32px; }
  .hero-actions                 { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 40px; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost      { width: 100%; justify-content: center; text-align: center; }
  .hero-stats                   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  .hstat-div                    { display: none; }
  .hstat                        { padding: 12px 14px; border: 1px solid rgba(172,186,196,.1); background: rgba(172,186,196,.04); }
  .hstat-val                    { font-size: 1.2rem; }
  .hstat-lbl                    { font-size: .48rem; }
  .hero-terminal                { display: none; }
  .hud                          { display: none; }
  .hero-scroll-hint             { display: none; }

  /* ── Section headers ── */
  .section-header               { margin-bottom: 40px; }
  .section-desc                 { max-width: 100%; }

  /* ── Problem ── */
  .problem-section              { padding-top: var(--section-pad); }
  .problem-side                 { padding: 28px 20px; }
  .metrics-header,
  .metrics-row                  { grid-template-columns: 1fr 1fr; }
  .metrics-col.metric-label:first-child { display: none; }
  .metrics-col                  { padding: 10px 14px; font-size: .75rem; }

  /* ── How it works ── */
  .flow-diagram                 { padding: 20px; gap: 0; }
  .flow-node                    { flex: 0 0 50%; padding: 10px; }
  .triggers-grid                { grid-template-columns: 1fr; }
  .trigger-card                 { padding: 24px 20px; }
  .deep-dive                    { padding: 24px 20px; }
  .cf-step                      { gap: 10px; }

  /* ── Features ── */
  .features-grid                { grid-template-columns: 1fr; }
  .feat-card                    { padding: 28px 22px; }
  .feat-card--wide              { grid-column: span 1; flex-direction: column; }
  .feat-icon-lg                 { width: 48px; height: 48px; }
  .sidebar-preview              { max-width: 100%; }

  /* ── Context preview ── */
  .context-code                 { padding: 20px 16px; overflow-x: auto; }
  .context-code code            { font-size: .65rem; }
  .cp-footer                    { flex-wrap: wrap; gap: 8px; font-size: .56rem; }

  /* ── File structure ── */
  .fs-wrap                      { flex-direction: column; }
  .fs-tree                      { border-right: none; border-bottom: 1px solid rgba(172,186,196,.08); }
  .fs-desc-panel                { width: 100%; }

  /* ── Commands ── */
  .cmd-row                      { grid-template-columns: 1fr; padding: 14px 16px; gap: 6px; }
  .cmd-desc                     { padding: 0; font-size: .78rem; }
  .cmd-when                     { justify-self: start; }
  .cmd-palette-bar              { padding: 12px 16px; }

  /* ── Settings ── */
  .settings-grid                { grid-template-columns: 1fr; }
  .setting-card                 { padding: 20px 20px; }

  /* ── Roadmap ── */
  .rm-version                   { padding: 28px 24px; }

  /* ── Install ── */
  .install-cards                { flex-direction: column; }
  .install-card                 { padding: 32px 24px; }
  .setup-steps                  { flex-direction: column; gap: 20px; }
  .setup-arrow                  { display: none; }
  .ts-grid                      { grid-template-columns: 1fr; }
  .troubleshoot                 { padding: 24px 20px; }

  /* ── Author ── */
  .author-quote                 { font-size: .95rem; }

  /* ── CTA ── */
  .cta-title                    { font-size: clamp(2rem, 12vw, 4rem); }
  .cta-main-btn                 { width: 100%; padding: 16px 20px; font-size: .6rem; }
  .cta-verify                   { flex-direction: column; gap: 6px; font-size: .58rem; }
  .cta-verify-check             { margin-left: 0; }
  .cta-bg-ring                  { display: none; }

  /* ── Footer ── */
  .footer-inner                 { grid-template-columns: 1fr 1fr; padding: 40px 5vw 32px; }
  .footer-brand                 { grid-column: span 2; }
  .footer-bottom                { flex-direction: column; gap: 8px; text-align: center; padding: 16px 5vw; }
}

/* ── 480px ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root { --section-pad: 60px; --nav-h: 56px; }

  /* ── Nav ── */
  .logo-badge                   { display: none; }
  .logo-text                    { font-size: .8rem; }

  /* ── Hero ── */
  .hero                         { padding: calc(var(--nav-h) + 28px) 4vw 48px; }
  .hero-word                    { font-size: clamp(1.8rem, 10.5vw, 2.6rem); }
  .title-row.row2,
  .title-row.row3               { margin-left: 0; }
  .hero-eyebrow                 { font-size: .52rem; margin-bottom: 24px; }
  .hero-sub                     { font-size: .84rem; line-height: 1.65; margin-bottom: 28px; }
  .hero-stats                   { grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 0; }
  .hstat                        { padding: 10px 12px; }
  .hstat-val                    { font-size: 1.05rem; }
  .hstat-lbl                    { font-size: .44rem; letter-spacing: .14em; }

  /* ── Global padding ── */
  .hero,
  .problem-section,
  .how-section,
  .features,
  .context-preview-section,
  .file-structure-section,
  .commands-section,
  .settings-section,
  .roadmap-section,
  .install-section,
  .author-section,
  .cta                          { padding-left: 4vw; padding-right: 4vw; }

  /* ── Problem ── */
  .problem-side                 { padding: 20px 16px; }
  .flow-step strong             { font-size: .82rem; }
  .flow-step p                  { font-size: .75rem; }
  .step-icon                    { font-size: 1.2rem; }
  .cost-val                     { font-size: 1.2rem; }
  .metrics-col                  { padding: 8px 10px; font-size: .7rem; }

  /* ── How it works ── */
  .flow-node                    { flex: 0 0 50%; }
  .fn-icon                      { font-size: 1.4rem; }
  .fn-label                     { font-size: .52rem; }
  .trigger-card                 { padding: 20px 16px; }
  .trigger-card p               { font-size: .78rem; }
  .cf-text                      { font-size: .66rem; }
  .cf-n                         { width: 22px; height: 22px; font-size: .58rem; }

  /* ── Features ── */
  .feat-card                    { padding: 22px 18px; }
  .feat-card h3                 { font-size: .65rem; }
  .feat-card p                  { font-size: .82rem; }
  .feat-icon                    { width: 38px; height: 38px; margin-bottom: 16px; }
  .file-list                    { gap: 4px; }
  .file-tag                     { font-size: .52rem; }

  /* ── Context code ── */
  .context-code code            { font-size: .6rem; }
  .cp-label                     { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* ── File structure ── */
  .fs-tree                      { font-size: .64rem; padding: 20px 16px; }
  .indent2                      { padding-left: 14px; }
  .fs-desc-panel                { padding: 20px 16px; }

  /* ── Commands ── */
  .cmd-name                     { font-size: .64rem; }
  .cmd-desc                     { font-size: .74rem; }
  .cmd-palette-input            { font-size: .7rem; }

  /* ── Settings ── */
  .setting-key                  { font-size: .62rem; }
  .setting-desc                 { font-size: .78rem; }

  /* ── Roadmap ── */
  .rm-version                   { padding: 22px 18px; }
  .rm-done, .rm-todo            { font-size: .78rem; }

  /* ── Install ── */
  .install-card                 { padding: 24px 18px; }
  .install-step                 { font-size: .8rem; }
  .setup-box                    { padding: 24px 18px; }
  .ss-num                       { font-size: 2rem; }
  .ss-content strong            { font-size: .84rem; }
  .ss-content p                 { font-size: .76rem; }
  .ts-item                      { padding: 14px 16px; }
  .ts-fix                       { font-size: .74rem; }

  /* ── CTA ── */
  .cta-pre                      { font-size: .56rem; letter-spacing: .2em; }
  .cta-title                    { font-size: clamp(2rem, 14vw, 3.5rem); line-height: .95; }
  .cta-sub                      { font-size: .85rem; }
  .cta-note                     { font-size: .52rem; }

  /* ── Author ── */
  .author-quote                 { font-size: .88rem; }
  .tech-tag                     { font-size: .52rem; padding: 3px 9px; }

  /* ── Footer ── */
  .footer-inner                 { grid-template-columns: 1fr; }
  .footer-brand                 { grid-column: span 1; }
  .footer-links-col a           { font-size: .75rem; }
}

/* ── 360px ──────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .hero-word                    { font-size: clamp(1.6rem, 9.5vw, 2.2rem); }
  .title-row.row2,
  .title-row.row3               { margin-left: 0; }
  .hero-stats                   { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hstat-div                    { display: none; }
  .hstat-val                    { font-size: .95rem; }
  .flow-node                    { flex: 0 0 100%; }
  .section-title                { font-size: 1.6rem; }
  .problem-side                 { padding: 16px 12px; }
  .feat-card                    { padding: 18px 14px; }
  .cmd-row                      { padding: 12px 14px; }
  .rm-version                   { padding: 18px 14px; }
  .install-card                 { padding: 20px 14px; }
  .cta                          { padding-left: 4vw; padding-right: 4vw; }
  .btn-primary                  { padding: 12px 20px; font-size: .58rem; }
  .btn-ghost                    { padding: 11px 16px; font-size: .56rem; }
}

/* ── MOBILE NAV OVERLAY ─────────────────────────────────────────────── */
.mobile-nav {
  display: none; /* shown via @media below */
  position: fixed; inset: 0; z-index: 950;
  background: rgba(28,32,51,.97);
  backdrop-filter: blur(24px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.mobile-nav.open {
  opacity: 1;
  pointer-events: all;
}
.mobile-nav-close {
  position: absolute; top: 20px; right: 20px;
  background: none; border: 1px solid rgba(172,186,196,.25);
  color: var(--c-mid); font-family: var(--font-mono); font-size: .8rem;
  width: 36px; height: 36px; cursor: pointer; transition: all .2s;
  display: flex; align-items: center; justify-content: center;
}
.mobile-nav-close:hover { border-color: var(--c-cream); color: var(--c-cream); }
.mobile-nav a {
  font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .18em;
  color: var(--c-mid); text-decoration: none; padding: 14px 28px;
  width: 100%; text-align: center; max-width: 300px;
  border-bottom: 1px solid rgba(172,186,196,.06);
  transition: color .2s, background .2s;
}
.mobile-nav a:hover { color: var(--c-cream); background: rgba(172,186,196,.05); }
.mobile-nav .mobile-nav-cta {
  margin-top: 20px;
  display: flex; align-items: center; gap: 8px;
  padding: 14px 32px; background: var(--c-warm); color: var(--c-dark3);
  font-family: var(--font-display); font-size: .65rem; letter-spacing: .2em;
  font-weight: 700; text-decoration: none; border: none;
}

/* ── HAMBURGER OPEN STATE ───────────────────────────────────────────── */
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── ENSURE IMAGES / PREFORMATTED TEXT DON'T OVERFLOW ──────────────── */
img, svg, video, canvas        { max-width: 100%; }
pre, code                      { word-break: break-word; }
.terminal-body                 { overflow-x: auto; }
.context-code                  { overflow-x: auto; }

/* ── TOUCH-FRIENDLY TAP TARGETS ─────────────────────────────────────── */
@media (hover: none) {
  .nav-links a::after           { display: none; }
  .feat-card:hover              { background: var(--c-dark3); }
  .svc-row:hover .svc-arrow     { color: rgba(172,186,196,.3); transform: none; }
  .svc-row:hover .svc-content h3 { color: var(--c-cream); }
  .trigger-card:hover           { background: var(--c-dark3); }
  .setting-card:hover           { background: var(--c-dark3); }
  .btn-primary:hover            { transform: none; box-shadow: none; }
  .install-card:hover           { background: var(--c-dark3); }
}