/* ─────────────────────────────────────────────────────
   PURGD DESIGN SYSTEM v4  — ported from client/src/index.css
   ───────────────────────────────────────────────────── */
:root {
  /* Spacing (8px base) */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem;
  --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;

  /* Purple primary */
  --purple-500:#8A2BE2; --purple-400:#A855F7; --purple-300:#C084FC; --purple-200:#D8B4FE;
  --purple-glow:rgba(138,43,226,.14); --purple-subtle:rgba(138,43,226,.07); --purple-border:rgba(138,43,226,.18);

  /* Amber secondary */
  --amber-500:#F59E0B; --amber-400:#FBBF24;
  --amber-subtle:rgba(245,158,11,.10); --amber-border:rgba(245,158,11,.25);

  /* Teal tertiary */
  --teal-500:#06B6D4; --teal-400:#22D3EE;
  --teal-subtle:rgba(6,182,212,.10); --teal-border:rgba(6,182,212,.25);

  /* Semantic */
  --success:#34C759; --warning:#FF9F0A; --error:#FF453A;

  /* Neutral */
  --black:#050509; --surface-1:#0B0B10; --surface-2:#121218; --surface-3:#1A1A22; --surface-4:#242430;
  --text-primary:#F8F8FB; --text-secondary:#B1B1BC; --text-tertiary:#7D7D8A;
  --border-subtle:rgba(255,255,255,.07); --border-medium:rgba(255,255,255,.12); --border-strong:rgba(255,255,255,.20);

  /* Type */
  --font-display:'Sora',system-ui,-apple-system,sans-serif;
  --font-serif:'Instrument Serif',Georgia,serif;
  --font-mono:'JetBrains Mono',monospace;

  --text-display:clamp(2.8rem,5vw,4.5rem);
  --text-h1:clamp(2.2rem,4vw,3.5rem);
  --text-h2:clamp(1.75rem,3vw,2.5rem);
  --text-h3:1.25rem;
  --text-body:1rem; --text-body-lg:1.125rem;
  --text-caption:.8125rem; --text-label:.75rem;

  --radius-sm:.5rem; --radius-md:.625rem; --radius-lg:.75rem; --radius-xl:.75rem; --radius-full:9999px;

  --shadow-card:0 1px 3px rgba(0,0,0,.4);
  --shadow-elevated:0 8px 32px rgba(0,0,0,.5);
  --shadow-glow-purple:0 0 18px var(--purple-glow);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --duration-fast:150ms; --duration-normal:250ms; --duration-slow:500ms;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-display);
  background:var(--black); color:var(--text-primary);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  line-height:1.6; font-size:var(--text-body);
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit;}

:focus-visible{outline:2px solid var(--purple-400); outline-offset:2px; border-radius:2px;}

::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--black);}
::-webkit-scrollbar-thumb{background:rgba(138,43,226,.3); border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:rgba(138,43,226,.5);}
::selection{background:rgba(138,43,226,.3); color:#fff;}

/* ── Layout ── */
.container{width:100%; max-width:1200px; margin:0 auto; padding:0 var(--space-6);}
@media (max-width:640px){ .container{padding:0 var(--space-4);} }

.section-cinematic{padding:var(--space-20) 0;}
.section-standard {padding:var(--space-24) 0;}
.section-compact  {padding:var(--space-16) 0;}
.section-dense    {padding:var(--space-12) 0;}

/* ── Headings ── */
.heading-display{font-size:var(--text-display); font-weight:800; letter-spacing:0; line-height:1; color:var(--text-primary); margin:0;}
.heading-section{font-size:var(--text-h1); font-weight:700; letter-spacing:0; line-height:1.1; color:var(--text-primary); margin:0;}
.heading-sub{font-size:var(--text-h3); font-weight:600; letter-spacing:0; line-height:1.3; color:var(--text-primary); margin:0;}
.body-text{font-size:var(--text-body-lg); color:var(--text-secondary); line-height:1.7; max-width:520px; margin:0;}
.body-text-center{font-size:var(--text-body-lg); color:var(--text-secondary); line-height:1.7; max-width:520px; margin:0 auto;}
p{margin:0;}

.serif-accent{font-family:'Instrument Serif', Georgia, serif; font-style:italic; font-weight:400; letter-spacing:0;}

/* ── Section labels ── */
.section-label{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.15rem 0;
  background:transparent; border:0;
  border-radius:0;
  font-size:var(--text-label); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--purple-300);
}
.section-label-amber{color:var(--amber-400);}
.section-label-teal {color:var(--teal-400);}
.section-label-green{color:#4ADE80;}

/* ── Buttons ── */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:var(--space-3) var(--space-8);
  background:var(--purple-500); color:#fff;
  border-radius:var(--radius-full);
  font-weight:600; font-size:var(--text-caption);
  box-shadow:0 6px 18px rgba(0,0,0,.22); border:none; cursor:pointer;
  transition:all var(--duration-normal) var(--ease-out);
}
.btn-primary:hover{background:var(--purple-400); box-shadow:0 8px 22px rgba(0,0,0,.28); transform:translateY(-1px);}
.btn-primary:active{transform:translateY(0);}

.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:var(--space-3) var(--space-8);
  background:transparent; color:#fff;
  border:1px solid var(--border-medium); border-radius:var(--radius-full);
  font-weight:500; font-size:var(--text-caption); cursor:pointer;
  transition:all var(--duration-normal) var(--ease-out);
}
.btn-secondary:hover{border-color:var(--border-strong); background:rgba(255,255,255,.04); transform:translateY(-1px);}

/* ── Cards ── */
.card-feature{
  background:var(--surface-1); border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm); padding:var(--space-8);
  transition:border-color var(--duration-normal), box-shadow var(--duration-normal), transform var(--duration-normal);
}
.card-feature:hover{border-color:var(--border-medium); box-shadow:0 4px 18px rgba(0,0,0,.24); transform:translateY(-1px);}

.card-bento{
  background:var(--surface-1); border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm); padding:var(--space-10);
  position:relative; overflow:hidden;
  transition:border-color var(--duration-normal), box-shadow var(--duration-normal);
}
.card-bento:hover{border-color:var(--border-medium); box-shadow:0 8px 28px rgba(0,0,0,.32);}

.card-stat{
  background:var(--surface-1); border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm); padding:var(--space-8);
}

.card-pricing{
  background:var(--surface-1); border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm); padding:var(--space-10);
}
.card-pricing-highlight{
  background:rgba(138,43,226,.045);
  border:1px solid rgba(138,43,226,.24);
  border-radius:var(--radius-sm); padding:var(--space-10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color var(--duration-normal), box-shadow var(--duration-normal);
}
.card-pricing-highlight:hover{border-color:rgba(138,43,226,.42); box-shadow:0 8px 28px rgba(0,0,0,.26);}

/* ── Feature icons ── */
.icon-container{
  width:2.75rem; height:2.75rem; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.icon-purple{background:var(--purple-subtle); border:1px solid var(--purple-border); color:var(--purple-300);}
.icon-amber {background:var(--amber-subtle);  border:1px solid var(--amber-border);  color:var(--amber-400);}
.icon-teal  {background:var(--teal-subtle);   border:1px solid var(--teal-border);   color:var(--teal-400);}
.icon-green {background:rgba(52,199,89,.10);  border:1px solid rgba(52,199,89,.22);  color:#4ADE80;}

/* ── App badges ── */
.app-badge{
  display:inline-flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-6);
  background:rgba(255,255,255,.04); border:1px solid var(--border-medium);
  border-radius:var(--radius-md); color:#fff;
  font-size:var(--text-caption); font-weight:500;
  backdrop-filter:blur(8px);
  transition:all var(--duration-normal) var(--ease-out);
}
.app-badge:hover{border-color:var(--purple-border); background:var(--purple-subtle); transform:translateY(-1px);}
.app-badge-label{font-size:.6rem; color:#A1A1AA; line-height:1.2; font-weight:500;}
.app-badge-name{font-size:.875rem; font-weight:700; line-height:1.25; color:#fff;}

/* ── Check list ── */
.check-item{display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-caption); color:#E5E5E5;}
.check-icon{width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;}

/* ── Gradient text ── */
.gradient-text{color:var(--purple-200);}

/* ── Glow blobs ── */
.glow-blob{position:absolute; border-radius:50%; pointer-events:none; filter:blur(78px); opacity:.16 !important;}
.glow-blob-purple{background:radial-gradient(circle, rgba(138,43,226,.18) 0%, transparent 70%);}
.glow-blob-teal  {background:radial-gradient(circle, rgba(6,182,212,.12) 0%, transparent 70%);}
.glow-blob-amber {background:radial-gradient(circle, rgba(245,158,11,.10) 0%, transparent 70%);}

/* ── Phone frame ── */
.phone-frame{
  position:relative; width:300px; aspect-ratio:9/18;
  border-radius:44px; background:var(--surface-1);
  border:2px solid var(--border-medium);
  box-shadow:var(--shadow-elevated);
  overflow:hidden;
  transform:rotateY(-3deg); transform-style:preserve-3d;
  display:flex; flex-direction:column;
}
.phone-frame::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:100px; height:30px; background:var(--black);
  border-radius:0 0 20px 20px; z-index:10;
}
.phone-frame::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.03) 45%, rgba(255,255,255,.06) 50%, transparent 55%);
  pointer-events:none; z-index:20; border-radius:inherit;
}
.phone-screen{
  padding:44px 0 0;
  display:flex; flex-direction:column;
  background:var(--black); position:relative; flex:1;
  min-height:0;
}

/* ── Phone: status bar ── */
.phone-status-bar{display:flex; justify-content:space-between; align-items:center; padding:6px var(--space-4); font-size:.6rem; color:var(--text-tertiary); font-weight:600;}

/* ── Phone: capture bar ── */
.phone-capture-bar{padding:0 var(--space-3) var(--space-2);}
.phone-capture-inner{display:flex; align-items:center; gap:var(--space-2); background:var(--surface-3); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:8px 10px;}
.phone-capture-text{flex:1; font-size:.78rem; color:var(--text-primary); font-weight:500; white-space:nowrap; overflow:hidden;}
.phone-cursor{display:inline-block; width:2px; height:.82em; background:var(--purple-400); margin-left:1px; vertical-align:text-bottom; animation:blink 1s step-end infinite;}
.phone-capture-actions{display:flex; gap:5px; flex-shrink:0;}
.phone-action-btn{width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-tertiary);}
.phone-action-send{background:var(--purple-500); color:#fff;}
.phone-routed-hint{display:flex; align-items:center; gap:4px; padding:4px var(--space-3) 0;}
.phone-routed-dot{width:5px; height:5px; border-radius:50%; flex-shrink:0;}

/* ── Phone: task list ── */
.phone-items{list-style:none; padding:0; margin:0; flex:1; min-height:0; overflow-x:hidden; overflow-y:auto;}
.phone-item{display:flex; align-items:center; gap:8px; padding:10px var(--space-4); border-left:3px solid transparent;}
.phone-item:not(:last-child){border-bottom:1px solid rgba(255,255,255,.03);}
.phone-checkbox{width:17px; height:17px; border-radius:5px; border:1.5px solid; flex-shrink:0;}
.phone-item-text{flex:1; min-width:0; font-size:.74rem; color:var(--text-primary); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.phone-tag{font-size:.5rem; font-weight:700; padding:2px 6px; border-radius:var(--radius-full); letter-spacing:.06em; flex-shrink:0; border:1px solid; text-transform:uppercase;}

/* ── Phone: tab bar ── */
.phone-tab-bar{display:flex; justify-content:space-around; padding:8px 0 10px; border-top:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.6); backdrop-filter:blur(8px); margin-top:auto;}
.phone-tab{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:.52rem; font-weight:600; color:var(--text-tertiary); letter-spacing:.01em;}
.phone-tab-active{color:var(--purple-400);}

/* ── Navbar ── */
.nav{position:fixed; top:0; left:0; right:0; z-index:50;
  transition:background var(--duration-normal), border-color var(--duration-normal);
  background:transparent; border-bottom:1px solid transparent;}
.nav.scrolled{background:rgba(0,0,0,.88); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); border-bottom-color:var(--border-subtle);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:var(--space-4) var(--space-6);}
.nav-brand{display:flex; align-items:center; gap:var(--space-2);}
.nav-brand-mark{width:32px; height:32px; border-radius:8px;}
.nav-brand-name{font-weight:700; font-size:1.125rem; letter-spacing:0; color:#fff;}
.nav-links{display:none; align-items:center; gap:var(--space-1);}
.nav-link{font-size:var(--text-caption); font-weight:500; color:var(--text-secondary); padding:var(--space-2) var(--space-3); border-radius:var(--radius-full); transition:color var(--duration-fast), background var(--duration-fast);}
.nav-link:hover{color:var(--text-primary); background:rgba(255,255,255,.05);}
.nav-cta{display:none;}
.nav-toggle{display:flex; flex-direction:column; gap:5px; padding:var(--space-2); background:none; border:none; cursor:pointer;}
@media (min-width:768px){
  .nav-links{display:flex;}
  .nav-cta{display:flex;}
  .nav-toggle{display:none;}
}
.nav-toggle span{display:block; width:20px; height:2px; background:var(--text-primary); border-radius:2px; transition:transform .2s, opacity .2s;}
.nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}
.nav-mobile{display:none; padding:var(--space-2) var(--space-6) var(--space-6); background:rgba(0,0,0,.95); border-bottom:1px solid var(--border-subtle);}
.nav-mobile.open{display:block;}
.nav-mobile a{display:block; padding:var(--space-3) 0; font-size:var(--text-caption); font-weight:500; color:var(--text-secondary); border-bottom:1px solid var(--border-subtle);}

/* ── Hero ── */
.hero-section{
  min-height:100svh; display:flex; align-items:center;
  padding-top:var(--space-20); padding-bottom:var(--space-8);
  position:relative; overflow:hidden;
}
.hero-brain-bg{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none; overflow:hidden;
}
.hero-brain-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center center;
  opacity:.55;
  pointer-events:none;
  display:block;
}
/* Legibility scrim: darkens left side behind copy, fades right where mockup sits */
.hero-brain-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:
    /* Left-side scrim for copy legibility */
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.05) 75%, rgba(0,0,0,.35) 100%),
    /* Top + bottom fade for nav/section transitions */
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 70%, rgba(0,0,0,.85) 100%);
}
@media (max-width:767px){
  .hero-brain-overlay{
    background:
      linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.7) 100%),
      linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,.85) 100%);
  }
}
@media (prefers-reduced-motion: reduce){ .hero-brain-video{opacity:.3;} }
.hero-bottom-fade{position:absolute; bottom:0; left:0; right:0; height:180px; background:linear-gradient(to bottom, transparent, var(--black)); pointer-events:none; z-index:1;}
.hero-container{position:relative; z-index:2; width:100%;}
.hero-grid{display:grid; grid-template-columns:1fr; gap:var(--space-12); align-items:center;}
.hero-label{margin-bottom:var(--space-6);}
.hero-heading{margin-bottom:var(--space-6);}
.hero-body{margin-bottom:var(--space-8);}
.hero-badges{display:flex; flex-wrap:wrap; gap:var(--space-3); margin-bottom:var(--space-8);}
.hero-secondary-cta{gap:var(--space-2); padding:var(--space-2) var(--space-6);}
.hero-mockup-wrapper{display:flex; justify-content:center; position:relative; perspective:1200px;}
@media (min-width:768px){ .hero-grid{grid-template-columns:1fr 1fr;} }

/* ── Stats bar ── */
.stats-strip{border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); background:rgba(255,255,255,.015);}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr);}
@media (max-width:640px){ .stats-grid{grid-template-columns:repeat(2,1fr);} }
.stat-cell{padding:var(--space-6) var(--space-4); text-align:center; border-right:1px solid var(--border-subtle);}
.stat-cell:last-child{border-right:none;}
.stat-number{font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:0; line-height:1; color:var(--purple-200);}
.stat-label{font-size:var(--text-label); color:var(--text-secondary); margin-top:var(--space-1); font-weight:500;}

/* ── Steps (how it works) ── */
.steps-grid{display:grid; grid-template-columns:1fr; gap:var(--space-6); position:relative;}
.step-arrow-inline{display:none;}
@media (min-width:700px){
  .steps-grid{grid-template-columns:1fr auto 1fr auto 1fr; gap:var(--space-4); align-items:start;}
  .step-arrow-inline{display:flex; align-items:center; justify-content:center; padding-top:3rem;}
}
.step-cell{text-align:center;}
.step-num{font-size:var(--text-label); font-weight:800; letter-spacing:.15em; margin-bottom:var(--space-4); opacity:.7;}
.step-icon{margin:0 auto var(--space-6); width:3.5rem; height:3.5rem; border-radius:var(--radius-lg);}
.step-sub{font-size:var(--text-label); font-weight:600; margin-bottom:var(--space-4); letter-spacing:.03em;}
.step-body{font-size:var(--text-caption); color:var(--text-secondary); line-height:1.65; max-width:280px; margin:0 auto;}

/* ── Features bento ── */
.features-header{text-align:center; margin-bottom:var(--space-12); display:flex; flex-direction:column; align-items:center; gap:var(--space-4);}
.features-row-large{display:grid; grid-template-columns:1fr; gap:var(--space-4); margin-bottom:var(--space-4);}
.features-card-large{min-height:220px; display:flex; flex-direction:column;}
.features-icon-large{width:3.25rem; height:3.25rem; border-radius:var(--radius-lg); margin-bottom:var(--space-6);}
.features-row-small{display:grid; grid-template-columns:1fr; gap:var(--space-4);}
.features-body{font-size:var(--text-caption); color:var(--text-secondary); line-height:1.65; margin-top:var(--space-2);}
@media (min-width:640px){ .features-row-large{grid-template-columns:1fr 1fr;} }
@media (min-width:480px){ .features-row-small{grid-template-columns:repeat(2,1fr);} }
@media (min-width:900px){ .features-row-small{grid-template-columns:repeat(4,1fr);} }

/* Integrations grid override */
.integrations-grid{display:grid; grid-template-columns:1fr; gap:var(--space-4);}
@media (min-width:480px){ .integrations-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:900px){ .integrations-grid{grid-template-columns:repeat(5,1fr);} }
.integration-tag{position:absolute; top:var(--space-4); right:var(--space-4); font-size:.55rem; font-weight:700; letter-spacing:.08em; padding:.2rem .5rem; border-radius:var(--radius-full); border:1px solid;}
.integration-logo{width:40px; height:40px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-4); border:1px solid;}

/* Integrations — "more to come" teaser card */
.integration-coming{
  border:1px dashed rgba(255,255,255,.12) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0)) !important;
}
.integration-coming:hover{border-color:rgba(138,43,226,.25) !important;}
.integration-logo-coming{background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.08); color:var(--text-tertiary);}
.integration-coming-dots{display:flex; gap:6px; margin-top:var(--space-4);}
.integration-coming-dots span{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.2); animation:coming-dot 1.4s ease-in-out infinite;}
.integration-coming-dots span:nth-child(2){animation-delay:.2s;}
.integration-coming-dots span:nth-child(3){animation-delay:.4s;}
@keyframes coming-dot{0%,100%{opacity:.25; transform:translateY(0);} 50%{opacity:.9; transform:translateY(-2px);}}

.integrations-footnote{
  margin-top:var(--space-10);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2);
  padding:var(--space-4) var(--space-6);
  border:1px solid var(--border-subtle);
  border-radius:999px;
  background:rgba(255,255,255,.015);
  max-width:max-content; margin-left:auto; margin-right:auto;
  font-size:var(--text-body); color:var(--text-secondary);
}
.integrations-footnote-dot{width:8px; height:8px; border-radius:50%; background:var(--purple-400); animation:coming-dot 2s ease-in-out infinite;}
.integrations-footnote-link{color:var(--purple-300); font-weight:600; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s;}
.integrations-footnote-link:hover{border-color:var(--purple-300);}

/* Stat source footnote (manifesto section) */
.stat-footnote{
  max-width:640px; margin:0 auto var(--space-16);
  text-align:center;
  font-size:.75rem; line-height:1.6;
  color:var(--text-tertiary);
}
.stat-footnote sup{font-weight:700; color:var(--text-secondary); margin-right:.25em;}
.stat-footnote a{color:var(--text-secondary); text-decoration:underline; text-decoration-color:rgba(255,255,255,.2); text-underline-offset:2px;}
.stat-footnote a:hover{color:var(--purple-300); text-decoration-color:currentColor;}

/* Manifesto — quote card */
.quote-card{
  max-width:620px; margin:0 auto;
  position:relative;
  padding:var(--space-10) var(--space-8) var(--space-8);
  background:rgba(255,255,255,.025);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  text-align:center;
}
.quote-mark{
  position:absolute; top:var(--space-3); left:var(--space-5);
  font-family:var(--font-serif); font-weight:400;
  font-size:3.5rem; line-height:.9; color:rgba(138,43,226,.25);
  user-select:none; pointer-events:none;
}
.quote-text{
  font-family:'Instrument Serif', Georgia, serif; font-style:italic;
  font-size:clamp(1.2rem, 2.2vw, 1.55rem);
  line-height:1.4; color:#F4F4F5;
  margin-bottom:var(--space-5);
  text-wrap:pretty;
}
.quote-attribution{
  font-size:var(--text-label); color:var(--text-tertiary);
  letter-spacing:.12em; font-weight:600; text-transform:uppercase;
}

/* ── Focus Mode ── */
.focus-grid{display:grid; grid-template-columns:1fr; gap:var(--space-16); align-items:center;}
@media (min-width:768px){ .focus-grid{grid-template-columns:1fr 1fr;} }

/* ── Gamification ── */
.gami-grid{display:grid; grid-template-columns:1fr; gap:var(--space-16); align-items:center;}
@media (min-width:800px){ .gami-grid{grid-template-columns:1fr 1fr;} }
.streak-badge{display:inline-flex; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-6); background:var(--amber-subtle); border:1px solid var(--amber-border); border-radius:var(--radius-lg); margin-bottom:var(--space-6);}
.streak-num{font-size:2rem; font-weight:800; letter-spacing:0; line-height:1;}
.streak-label{font-size:var(--text-caption); color:var(--text-secondary); font-weight:600;}
.streak-divider{width:1px; height:40px; background:var(--border-medium); margin:0 var(--space-2);}
.gami-row{display:flex; align-items:flex-start; gap:var(--space-3);}
.gami-row-icon{width:26px; height:26px; border-radius:var(--radius-sm); background:rgba(255,255,255,.05); border:1px solid var(--border-medium); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.milestone-card{display:flex; align-items:center; gap:var(--space-6);}
.milestone-emoji{width:52px; height:52px; flex-shrink:0; border-radius:var(--radius-md); background:var(--amber-subtle); border:1px solid var(--amber-border); display:flex; align-items:center; justify-content:center; font-size:1.5rem;}

/* ── Privacy grid ── */
.privacy-grid{display:grid; grid-template-columns:1fr; gap:var(--space-8);}
@media (min-width:600px){ .privacy-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .privacy-grid{grid-template-columns:repeat(4,1fr);} }
.privacy-item{display:flex; gap:var(--space-4); align-items:flex-start;}
.privacy-title{font-weight:700; font-size:var(--text-body); margin-bottom:var(--space-1); color:var(--text-primary);}
.privacy-body{font-size:var(--text-caption); color:var(--text-secondary); line-height:1.65;}

/* ── Pricing ── */
.pricing-grid{display:grid; grid-template-columns:1fr; gap:var(--space-4); max-width:860px; margin:0 auto;}
@media (min-width:640px){ .pricing-grid{grid-template-columns:1fr 1fr;} }

/* ── Problem section ── */
.problem-row{display:flex; gap:var(--space-6); padding-left:var(--space-6); margin-bottom:var(--space-10);}
.problem-row-head{display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-2);}

/* ── Reveal ── */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);}
.reveal.visible{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .phone-frame{transform:none;}
}

/* ── Keyframes ── */
@keyframes blink{0%,100%{opacity:1;} 50%{opacity:0;}}
@keyframes scroll-hint{0%,100%{opacity:.4; transform:translateY(0);} 50%{opacity:.8; transform:translateY(6px);}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes pulse-ring{0%{transform:scale(1); opacity:.7;} 100%{transform:scale(1.6); opacity:0;}}
@keyframes route-pop{0%{transform:scale(.85); opacity:0;} 50%{transform:scale(1.05); opacity:1;} 100%{transform:scale(1); opacity:1;}}

/* ── Footer ── */
.footer{padding:4rem 0 2.5rem; border-top:1px solid rgba(255,255,255,.06); background:var(--black);}
.footer-top{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,200px), 1fr)); gap:2.5rem; margin-bottom:3rem;}
.footer-col-title{font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8E8E93; margin-bottom:1rem;}
.footer-link{display:block; font-size:.825rem; color:#A1A1AA; text-decoration:none; margin-bottom:.6rem; transition:color .2s;}
.footer-link:hover{color:#fff;}
.footer-disclaimer{border-top:1px solid var(--border-subtle); padding-top:var(--space-4); margin-bottom:var(--space-4); font-size:.7rem; color:var(--text-tertiary); line-height:1.5;}
.footer-bottom{display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:space-between; align-items:center; font-size:var(--text-label); color:var(--text-tertiary);}
.footer-divider{height:1px; background:rgba(255,255,255,.05); margin-bottom:1.5rem;}

/* ═════════════════════════════════════════════════════
   NEW ADDITIONS (not in original site)
   ═════════════════════════════════════════════════════ */

/* ── Interactive routing demo ── */
.demo-section{position:relative; overflow:hidden;}
.demo-panel{
  max-width:960px; margin:0 auto;
  background:var(--surface-1); border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm); padding:var(--space-10);
  position:relative;
}
.demo-input-wrap{position:relative; margin-bottom:var(--space-2); display:flex; gap:var(--space-3); align-items:stretch;}
.demo-input{
  flex:1; background:var(--surface-3); border:1px solid var(--border-medium);
  border-radius:var(--radius-lg); padding:var(--space-5) var(--space-6);
  color:#fff; font-family:var(--font-display); font-size:1rem; font-weight:500;
  outline:none; transition:border-color var(--duration-normal), box-shadow var(--duration-normal);
  min-width:0;
}
.demo-input:focus{border-color:var(--purple-400); box-shadow:0 0 0 3px rgba(138,43,226,.15);}
.demo-input::placeholder{color:var(--text-tertiary);}
.demo-run-btn{
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:0 var(--space-6);
  background:var(--purple-500);
  color:#fff; font-weight:700; font-size:.9rem; letter-spacing:0;
  border:none; border-radius:var(--radius-lg);
  cursor:pointer; transition:transform var(--duration-fast), box-shadow var(--duration-fast);
  box-shadow:0 4px 16px rgba(0,0,0,.24);
  flex-shrink:0;
}
.demo-run-btn:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.28);}
.demo-run-btn:active{transform:translateY(0);}
.demo-helper{display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-label); color:var(--text-tertiary); margin-bottom:var(--space-6); padding-left:var(--space-2);}
.demo-kbd{display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border:1px solid var(--border-medium); border-bottom-width:2px; border-radius:5px; background:var(--surface-3); font-family:var(--font-display); font-size:.7rem; color:var(--text-secondary);}
.demo-meta{display:flex; flex-wrap:wrap; gap:var(--space-3); margin-bottom:var(--space-4); font-size:var(--text-label); color:var(--text-tertiary);}
.demo-suggestions{display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-6); align-items:center;}
.demo-suggestions-label{font-size:var(--text-label); color:var(--text-tertiary); letter-spacing:.06em; text-transform:uppercase; font-weight:600; margin-right:var(--space-2);}
.demo-chip{
  font-size:var(--text-label); padding:.4rem .85rem; border-radius:var(--radius-full);
  background:rgba(255,255,255,.04); border:1px solid var(--border-subtle); color:var(--text-secondary);
  cursor:pointer; transition:all var(--duration-fast);
  font-family:inherit;
}
.demo-chip:hover{border-color:var(--purple-border); color:var(--text-primary); background:var(--purple-subtle); transform:translateY(-1px);}
.demo-result{display:flex; align-items:center; gap:var(--space-4); padding:var(--space-5) var(--space-6); background:var(--surface-2); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); min-height:76px; transition:border-color .3s, box-shadow .3s;}
.demo-result.demo-result-hit{border-color:var(--purple-border); box-shadow:0 0 0 3px rgba(138,43,226,.1);}
@media (max-width:560px){
  .demo-input-wrap{flex-direction:column;}
  .demo-run-btn{padding:var(--space-4); justify-content:center;}
}
.demo-result-dot{width:10px; height:10px; border-radius:50%; flex-shrink:0;}
.demo-result-cat{font-weight:700; letter-spacing:.08em; font-size:var(--text-caption); text-transform:uppercase;}
.demo-result-reason{font-size:var(--text-caption); color:var(--text-secondary); margin-top:2px;}
.demo-result-placeholder{color:var(--text-tertiary); font-size:var(--text-caption);}
.demo-passes{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:var(--space-3); margin-top:var(--space-6); font-size:var(--text-label);}
.demo-pass{padding:var(--space-3) var(--space-4); border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:rgba(255,255,255,.02); color:var(--text-tertiary); transition:all var(--duration-fast);}
.demo-pass.active{border-color:var(--purple-border); background:var(--purple-subtle); color:var(--purple-300);}
.demo-pass-num{font-size:.6rem; letter-spacing:.1em; font-weight:700; opacity:.6; text-transform:uppercase; margin-bottom:2px;}
.demo-pass-name{font-weight:600;}

/* ── Comparison table ── */
.compare-section{background:var(--surface-1); position:relative;}
.compare-table-wrap{max-width:980px; margin:0 auto; overflow-x:auto;}
.compare-table{width:100%; border-collapse:separate; border-spacing:0; min-width:640px;}
.compare-table th, .compare-table td{padding:var(--space-4) var(--space-6); text-align:left; border-bottom:1px solid var(--border-subtle);}
.compare-table th{font-size:var(--text-label); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-tertiary);}
.compare-col-purgd{background:rgba(138,43,226,.045); border-left:1px solid var(--purple-border); border-right:1px solid var(--purple-border);}
.compare-table tr:first-child th.compare-col-purgd{border-top:1px solid var(--purple-border); border-top-left-radius:var(--radius-md); border-top-right-radius:var(--radius-md);}
.compare-table tr:last-child td.compare-col-purgd{border-bottom:1px solid var(--purple-border); border-bottom-left-radius:var(--radius-md); border-bottom-right-radius:var(--radius-md);}
.compare-row-label{color:var(--text-primary); font-weight:600; font-size:var(--text-caption);}
.compare-cell{font-size:var(--text-caption); color:var(--text-secondary); line-height:1.5;}
.compare-cell.yes{color:var(--purple-300); font-weight:600;}
.compare-cell.no{color:var(--text-tertiary);}
.compare-cell.meh{color:var(--amber-400);}

/* ── FAQ ── */
.faq-list{max-width:720px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--border-subtle);}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-6);
  padding:var(--space-6) 0; background:none; border:none; cursor:pointer; text-align:left;
  font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:var(--text-primary);
  transition:color var(--duration-fast);
}
.faq-q:hover{color:var(--purple-300);}
.faq-toggle{width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.04); border:1px solid var(--border-subtle); display:flex; align-items:center; justify-content:center; color:var(--text-secondary); transition:transform var(--duration-normal), background var(--duration-fast); flex-shrink:0;}
.faq-item.open .faq-toggle{transform:rotate(45deg); background:var(--purple-subtle); border-color:var(--purple-border); color:var(--purple-300);}
.faq-a{display:grid; grid-template-rows:0fr; overflow:hidden; transition:grid-template-rows var(--duration-slow) var(--ease-out); font-size:var(--text-caption); color:var(--text-secondary); line-height:1.7;}
.faq-a-inner{min-height:0; padding:0 0 var(--space-6); max-width:640px;}
.faq-item.open .faq-a{grid-template-rows:1fr;}

/* ── Tweaks panel ── */
.tweaks-panel{
  position:fixed; bottom:var(--space-6); right:var(--space-6); z-index:60;
  width:280px; background:rgba(10,10,10,.92); backdrop-filter:blur(18px) saturate(180%);
  border:1px solid var(--border-medium); border-radius:var(--radius-lg);
  padding:var(--space-5); box-shadow:0 12px 42px rgba(0,0,0,.55);
  font-size:var(--text-caption); display:none;
}
.tweaks-panel.open{display:block;}
.tweaks-title{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-4);}
.tweaks-title-label{font-size:.65rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--purple-300);}
.tweaks-close{background:none; border:none; color:var(--text-tertiary); cursor:pointer; font-size:1rem; padding:0; line-height:1;}
.tweak{margin-bottom:var(--space-4);}
.tweak-label{font-size:.7rem; font-weight:600; color:var(--text-secondary); letter-spacing:.06em; text-transform:uppercase; margin-bottom:var(--space-2); display:block;}
.tweak-row{display:flex; gap:var(--space-2); flex-wrap:wrap;}
.swatch{width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:transform var(--duration-fast), border-color var(--duration-fast);}
.swatch:hover{transform:scale(1.1);}
.swatch.active{border-color:#fff;}
.tweak-toggle{display:flex; align-items:center; gap:var(--space-3); cursor:pointer; user-select:none;}
.tweak-switch{position:relative; width:36px; height:20px; background:var(--surface-4); border-radius:9999px; transition:background var(--duration-fast);}
.tweak-switch::after{content:''; position:absolute; left:2px; top:2px; width:16px; height:16px; background:#fff; border-radius:50%; transition:transform var(--duration-fast);}
.tweak-toggle.on .tweak-switch{background:var(--purple-500);}
.tweak-toggle.on .tweak-switch::after{transform:translateX(16px);}
.tweak-toggle span:last-child{font-size:.8rem; color:var(--text-primary);}

/* ── Coming-soon modal ── */
.coming-soon-modal{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:var(--space-4);}
.coming-soon-modal[hidden]{display:none;}
.coming-soon-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(8px); animation:cs-fade var(--duration-fast) var(--ease-out);}
.coming-soon-card{position:relative; max-width:380px; width:100%; padding:var(--space-8); background:var(--surface-2); border:1px solid var(--purple-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-elevated); text-align:center; animation:cs-pop var(--duration-normal) var(--ease-out);}
.coming-soon-close{position:absolute; top:var(--space-3); right:var(--space-3); width:32px; height:32px; border-radius:var(--radius-sm); background:transparent; border:1px solid var(--border-medium); color:var(--text-secondary); cursor:pointer; font-size:.875rem; line-height:1; display:flex; align-items:center; justify-content:center; transition:color var(--duration-fast), border-color var(--duration-fast);}
.coming-soon-close:hover{color:var(--text-primary); border-color:var(--border-strong);}
.coming-soon-icon{display:flex; align-items:center; justify-content:center; width:64px; height:64px; margin:0 auto var(--space-5); border-radius:50%; background:var(--purple-subtle); border:1px solid var(--purple-border); color:var(--purple-300);}
.coming-soon-title{font-family:var(--font-display); font-size:1.5rem; font-weight:700; letter-spacing:0; line-height:1.2; margin-bottom:var(--space-3); color:var(--text-primary);}
.coming-soon-body{font-size:var(--text-caption); line-height:1.6; color:var(--text-secondary); margin-bottom:var(--space-6);}
.coming-soon-cta{display:inline-block; padding:var(--space-3) var(--space-8);}
@keyframes cs-fade{from{opacity:0;} to{opacity:1;}}
@keyframes cs-pop{from{transform:translateY(8px) scale(.98); opacity:0;} to{transform:none; opacity:1;}}