/* ============================================================
   Just Say It — Jovana
   Warm light design system
   ============================================================ */

:root{
  /* warm light surfaces */
  --cream:    #FAF7F1;
  --cream-2:  #F4EEE3;
  --cream-3:  #EDE5D7;
  --paper:    #FFFDF9;
  --ink:      #1b1813;
  --ink-2:    #5c5448;
  --ink-3:    #968d7f;
  --line:     rgba(27,24,19,.10);
  --line-2:   rgba(27,24,19,.055);

  /* amber accent family (warm) */
  --amber:    #E27B16;   /* primary CTA / deepest */
  --amber-2:  #F2952B;   /* bright */
  --gold:     #F1B544;
  --coral:    #EF7F4E;
  --amber-ink:#A8560C;   /* amber text on cream (contrast) */

  --glow:     rgba(232,128,28,.35);

  --maxw: 1180px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 26px;
  --r-xl: 36px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --font: "Schibsted Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

/* Accent: Violet (#7C5CFF) — baked-in default for the shipped site.
   The warm amber family above is kept as the reference scale; these hooks remap
   every accent surface (text, CTAs, glow, aurora) to violet, matching the chosen
   "Violet" accent. --amber-ink / --glow are re-declared here to override the
   amber values in the block above (the variable names are kept). */
:root{
  --accent:        #7C5CFF;
  --accent-bright: #9277FF;
  --amber-ink:     #5b3fd6;             /* accent "ink": accent text on cream (contrast) */
  --glow:          rgba(124,92,255,.32);
  --aur-1:         #9277FF;
  --aur-2:         #B58CFF;
  --aur-3:         #6FA8FF;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  font-family:var(--font);
  background:var(--cream);
  color:var(--ink);
  font-size:18px;
  line-height:1.55;
  overflow-x:hidden;
  letter-spacing:-.01em;
}
::selection{ background:rgba(124,92,255,.22); color:var(--ink); }

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; }

/* ---------- type ---------- */
h1,h2,h3{ font-weight:760; line-height:1.02; letter-spacing:-.035em; }
.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--amber-ink);
  font-weight:500;
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{
  content:""; width:18px; height:1.5px; background:var(--accent); display:inline-block;
}
.h-display{ font-size:clamp(2.9rem, 7.2vw, 6.2rem); letter-spacing:-.045em; }
.h-section{ font-size:clamp(2.1rem, 4.6vw, 3.6rem); }
.lede{ font-size:clamp(1.12rem,1.6vw,1.32rem); color:var(--ink-2); line-height:1.5; font-weight:420; letter-spacing:-.015em; }
.tnum{ font-variant-numeric:tabular-nums; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:54px; padding:0 26px; border-radius:100px;
  font-size:16px; font-weight:600; letter-spacing:-.01em;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease), background .3s;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn-primary{
  background:var(--ink); color:var(--cream);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 10px 26px -12px rgba(27,24,19,.6);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 18px 38px -14px rgba(27,24,19,.65); }
.btn-accent{
  background:linear-gradient(180deg, var(--accent-bright), var(--accent));
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 12px 30px -10px var(--glow);
}
.btn-accent:hover{ transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 20px 44px -12px var(--glow); }
.btn-ghost{
  background:rgba(27,24,19,.04); color:var(--ink); border:1px solid var(--line);
}
.btn-ghost:hover{ background:rgba(27,24,19,.07); transform:translateY(-2px); }
.btn-lg{ height:60px; padding:0 32px; font-size:17px; }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  transition:background .4s var(--ease), backdrop-filter .4s, border-color .4s, padding .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(250,247,241,.72);
  backdrop-filter:saturate(1.4) blur(18px);
  -webkit-backdrop-filter:saturate(1.4) blur(18px);
  border-bottom:1px solid var(--line-2);
}
.nav-inner{ height:74px; display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:30px; width:auto; }
.brand b{ font-weight:740; font-size:19px; letter-spacing:-.03em; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{ font-size:15px; color:var(--ink-2); font-weight:500; transition:color .25s; letter-spacing:-.01em; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-cta .btn{ height:44px; padding:0 20px; font-size:14.5px; }
@media(max-width:880px){ .nav-links{ display:none; } }

/* ---------- sections ---------- */
section{ position:relative; }
.section-pad{ padding:clamp(90px,12vh,150px) 0; }
.section-head{ max-width:720px; margin-bottom:clamp(48px,6vw,76px); }
.section-head .lede{ margin-top:22px; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding-top:74px; overflow:hidden; }
#aurora{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
#heroParticles{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:.5; }
.hero-grain{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(27,24,19,.05) 1px, transparent 1px);
  background-size:4px 4px; mix-blend-mode:multiply;
}
.hero-inner{ position:relative; z-index:3; width:100%; padding:60px 0; }
.hero-grid{ display:grid; grid-template-columns:1.04fr .96fr; gap:48px; align-items:center; }
@media(max-width:840px){ .hero-grid{ grid-template-columns:1fr; gap:40px; } }

.hero h1{ margin:22px 0 0; }
.hero h1 .accent{ color:var(--accent); position:relative; }
.hero .lede{ margin-top:26px; max-width:520px; }
.hero-cta{ display:flex; align-items:center; gap:14px; margin-top:36px; flex-wrap:wrap; }
.hero-meta{ margin-top:24px; display:flex; gap:22px; align-items:center; color:var(--ink-3); font-size:13.5px; font-family:var(--mono); flex-wrap:wrap; }
.hero-meta span{ display:inline-flex; align-items:center; gap:7px; }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--glow); }

/* hero visual: mic orb + waveform + transcription card */
.hero-visual{ position:relative; display:flex; flex-direction:column; align-items:center; gap:26px; }

.orb-stage{ position:relative; width:300px; height:300px; display:grid; place-items:center; }
.orb-ring{ position:absolute; border-radius:50%; border:1px solid var(--line); }
.orb-ring.r1{ inset:0; }
.orb-ring.r2{ inset:34px; }
.orb-ring.r3{ inset:68px; }
.orb-pulse{ position:absolute; inset:34px; border-radius:50%; border:1.5px solid var(--accent); opacity:0; }
.orb{
  position:relative; width:148px; height:148px; border-radius:50%;
  background:radial-gradient(120% 120% at 35% 28%, #fff, var(--cream-2) 60%, var(--cream-3));
  box-shadow:0 30px 60px -22px rgba(27,24,19,.4), 0 2px 0 rgba(255,255,255,.9) inset, 0 -14px 30px -16px var(--glow) inset;
  display:grid; place-items:center;
}
.orb::after{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  background:conic-gradient(from 180deg, transparent, var(--accent-bright), transparent 60%);
  opacity:.0; transition:opacity .5s; z-index:-1; filter:blur(6px);
}
.orb.live::after{ opacity:.7; animation:spin 3s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.orb-wave{ display:flex; align-items:center; gap:5px; height:54px; }
.orb-wave i{
  width:5px; height:14px; border-radius:4px; background:var(--accent);
  transform-origin:center; transition:height .12s var(--ease);
}

.transcript-card{
  width:min(420px,92%); background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:22px 24px;
  box-shadow:0 30px 70px -34px rgba(27,24,19,.45), 0 1px 0 rgba(255,255,255,.8) inset;
}
.tc-row{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.tc-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding:4px 9px; border-radius:100px; background:var(--cream-2); }
.tc-raw{ font-family:var(--mono); font-size:14px; color:var(--ink-3); min-height:22px; line-height:1.5; }
.tc-div{ height:1px; background:var(--line-2); margin:14px 0; }
.tc-clean{ font-size:18.5px; color:var(--ink); font-weight:480; min-height:28px; line-height:1.45; letter-spacing:-.015em; }
.tc-clean .caret{ display:inline-block; width:2px; height:1em; background:var(--accent); margin-left:1px; vertical-align:-2px; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.tc-foot{ margin-top:16px; display:flex; align-items:center; justify-content:space-between; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); }
.tc-app{ display:inline-flex; align-items:center; gap:7px; }
.tc-app i{ width:8px; height:8px; border-radius:2px; background:var(--accent); }

/* scroll cue */
.scroll-cue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:4; display:flex; flex-direction:column; align-items:center; gap:9px; color:var(--ink-3); font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; }
.scroll-cue .line{ width:1px; height:38px; background:linear-gradient(var(--accent), transparent); position:relative; overflow:hidden; }
.scroll-cue .line::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--ink); animation:cue 1.8s var(--ease-out) infinite; }
@keyframes cue{ 0%{ transform:translateY(-100%); } 60%,100%{ transform:translateY(300%); } }

/* logos strip */
.logos{ border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:30px 0; }
.logos-inner{ display:flex; align-items:center; gap:18px; justify-content:space-between; flex-wrap:wrap; }
.logos p{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.logos ul{ list-style:none; display:flex; gap:34px; flex-wrap:wrap; opacity:.62; }
.logos li{ font-weight:680; font-size:18px; letter-spacing:-.02em; color:var(--ink-2); }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:860px){ .steps{ grid-template-columns:1fr; } }
.step{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px; position:relative; overflow:hidden;
  transition:transform .5s var(--ease-out), box-shadow .5s;
}
.step:hover{ transform:translateY(-5px); box-shadow:0 26px 56px -32px rgba(27,24,19,.35); }
.step-num{ font-family:var(--mono); font-size:12px; color:var(--amber-ink); letter-spacing:.1em; }
.step h3{ font-size:1.5rem; margin:14px 0 10px; letter-spacing:-.03em; }
.step p{ color:var(--ink-2); font-size:15.5px; }
.step-vis{ height:130px; margin-top:24px; border-radius:var(--r); background:var(--cream); border:1px solid var(--line-2); position:relative; overflow:hidden; display:grid; place-items:center; }

/* key cap */
.keycap{
  font-family:var(--mono); font-weight:600; font-size:15px; color:var(--ink);
  padding:14px 18px; border-radius:12px; background:linear-gradient(180deg,#fff,var(--cream-2));
  border:1px solid var(--line); box-shadow:0 4px 0 var(--cream-3), 0 6px 12px -6px rgba(27,24,19,.3);
  display:inline-flex; align-items:center; gap:8px;
}
.keycap.press{ animation:press 1.6s var(--ease) infinite; }
@keyframes press{ 0%,100%{ transform:translateY(0); box-shadow:0 4px 0 var(--cream-3),0 6px 12px -6px rgba(27,24,19,.3);} 18%,40%{ transform:translateY(4px); box-shadow:0 0 0 var(--cream-3),0 2px 6px -4px rgba(27,24,19,.3);} }

.mini-wave{ display:flex; align-items:center; gap:4px; height:44px; }
.mini-wave i{ width:4px; border-radius:3px; background:var(--accent); height:10px; animation:mw 1.1s var(--ease) infinite; }
@keyframes mw{ 0%,100%{ height:10px; } 50%{ height:38px; } }

.inject-line{ font-family:var(--mono); font-size:13px; color:var(--ink-2); }
.inject-line .cur{ display:inline-block; width:7px; height:15px; background:var(--accent); vertical-align:-2px; animation:blink 1s steps(1) infinite; }

/* ============================================================
   FEATURES (bento)
   ============================================================ */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px; }
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px; position:relative; overflow:hidden;
  transition:transform .5s var(--ease-out), box-shadow .5s, border-color .4s;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 26px 56px -34px rgba(27,24,19,.34); border-color:var(--line); }
.card h3{ font-size:1.42rem; letter-spacing:-.03em; margin-bottom:10px; }
.card p{ color:var(--ink-2); font-size:15px; }
.card .icon{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(160deg, rgba(146,119,255,.16), rgba(124,92,255,.1)); border:1px solid rgba(124,92,255,.2); margin-bottom:18px; color:var(--amber-ink); }
.card .icon svg{ width:22px; height:22px; }
.col-3{ grid-column:span 3; } .col-2{ grid-column:span 2; } .col-4{ grid-column:span 4; } .col-6{ grid-column:span 6; }
@media(max-width:860px){ .bento{ grid-template-columns:1fr; } .col-3,.col-2,.col-4,.col-6{ grid-column:span 1; } }

/* correction demo inside feature */
.correct-demo{ font-family:var(--mono); font-size:15px; line-height:2; margin-top:8px; }
.strike{ color:var(--ink-3); text-decoration:line-through; text-decoration-color:var(--coral); }
.fixed{ color:var(--amber-ink); font-weight:600; }
.chip{ display:inline-block; padding:5px 12px; border-radius:100px; background:var(--cream-2); border:1px solid var(--line); font-family:var(--mono); font-size:13px; margin:4px 4px 0 0; transition:transform .3s; }
.chip:hover{ transform:translateY(-2px); }

/* ============================================================
   INTERACTIVE DEMO
   ============================================================ */
.demo-shell{ background:var(--ink); color:var(--cream); border-radius:var(--r-xl); padding:clamp(34px,5vw,64px); position:relative; overflow:hidden; }
.demo-shell .eyebrow{ color:var(--gold); }
.demo-shell .eyebrow::before{ background:var(--gold); }
.demo-shell h2{ color:var(--cream); }
.demo-shell .lede{ color:rgba(250,247,241,.72); }
.demo-aur{ position:absolute; inset:0; z-index:0; opacity:.6; }
.demo-body{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-top:40px; }
@media(max-width:860px){ .demo-body{ grid-template-columns:1fr; gap:28px; } }

.demo-stage{ display:flex; flex-direction:column; align-items:center; gap:26px; }
.push-btn{
  position:relative; width:170px; height:170px; border-radius:50%;
  background:radial-gradient(120% 120% at 35% 30%, #fff, var(--cream-2) 55%, var(--cream-3));
  box-shadow:0 24px 50px -18px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.7) inset;
  display:grid; place-items:center; transition:transform .2s var(--ease); user-select:none; touch-action:none;
}
.push-btn:active,.push-btn.holding{ transform:scale(.95); }
.push-btn .mic{ color:var(--ink); transition:color .3s; }
.push-btn.holding .mic{ color:var(--accent); }
.push-btn .halo{ position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--accent-bright); opacity:0; }
.push-btn.holding .halo{ animation:halo 1.3s var(--ease-out) infinite; }
@keyframes halo{ 0%{ transform:scale(1); opacity:.6;} 100%{ transform:scale(1.45); opacity:0;} }
.push-wave{ display:flex; align-items:flex-end; gap:5px; height:60px; }
.push-wave i{ width:6px; height:6px; border-radius:4px; background:var(--gold); transition:height .1s var(--ease); }
.push-hint{ font-family:var(--mono); font-size:12.5px; color:rgba(250,247,241,.55); letter-spacing:.04em; text-align:center; }
.push-hint b{ color:var(--cream); font-weight:600; }

.demo-output{ }
.macwin{ background:var(--paper); border-radius:16px; overflow:hidden; box-shadow:0 40px 80px -30px rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.1); }
.macbar{ height:42px; background:var(--cream-2); border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 16px; gap:8px; }
.macbar .tl{ width:12px; height:12px; border-radius:50%; }
.macbar .tl.r{ background:#ff5f57; } .macbar .tl.y{ background:#febc2e; } .macbar .tl.g{ background:#28c840; }
.macbar .title{ margin-left:12px; font-size:13px; color:var(--ink-2); font-family:var(--mono); }
.macbody{ padding:26px 26px 30px; min-height:230px; color:var(--ink); }
.macbody .to{ font-size:13px; color:var(--ink-3); font-family:var(--mono); border-bottom:1px solid var(--line-2); padding-bottom:12px; margin-bottom:16px; }
.macbody .field{ font-size:18px; line-height:1.6; min-height:120px; letter-spacing:-.01em; }
.macbody .field .cur{ display:inline-block; width:2px; height:1.05em; background:var(--accent); vertical-align:-3px; animation:blink 1s steps(1) infinite; }
.macbody .placeholder{ color:var(--ink-3); }
.demo-status{ margin-top:16px; font-family:var(--mono); font-size:12.5px; color:rgba(250,247,241,.6); display:flex; align-items:center; gap:9px; min-height:20px; }
.demo-status .s-dot{ width:7px; height:7px; border-radius:50%; background:var(--ink-3); }
.demo-status.rec .s-dot{ background:var(--coral); box-shadow:0 0 0 4px rgba(239,127,78,.25); }
.demo-status.proc .s-dot{ background:var(--gold); box-shadow:0 0 0 4px rgba(241,181,68,.25); }
.demo-status.done .s-dot{ background:#28c840; }
.demo-samples{ display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.demo-samples button{ font-family:var(--mono); font-size:12px; color:rgba(250,247,241,.7); padding:7px 13px; border-radius:100px; border:1px solid rgba(255,255,255,.16); transition:.25s; }
.demo-samples button:hover{ background:rgba(255,255,255,.08); color:var(--cream); }
.demo-samples button.active{ border-color:var(--gold); color:var(--gold); }

/* ============================================================
   USE CASES (tabs + floating windows)
   ============================================================ */
.uc-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.uc-tab{ font-size:15px; font-weight:560; color:var(--ink-2); padding:11px 20px; border-radius:100px; border:1px solid var(--line); background:var(--paper); transition:.3s; display:inline-flex; gap:9px; align-items:center; }
.uc-tab .em{ font-size:14px; }
.uc-tab:hover{ transform:translateY(-2px); }
.uc-tab.active{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.uc-stage{ position:relative; min-height:430px; }
.uc-panel{ position:absolute; inset:0; opacity:0; transform:translateY(16px) scale(.99); pointer-events:none; transition:opacity .5s var(--ease), transform .5s var(--ease-out); display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; }
.uc-panel.active{ opacity:1; transform:none; pointer-events:auto; }
@media(max-width:860px){ .uc-panel{ grid-template-columns:1fr; } }
.uc-copy h3{ font-size:1.9rem; letter-spacing:-.035em; margin-bottom:14px; }
.uc-copy p{ color:var(--ink-2); margin-bottom:20px; }
.uc-copy .said{ font-family:var(--mono); font-size:13.5px; color:var(--ink-3); padding-left:16px; border-left:2px solid var(--accent); margin-bottom:8px; }

/* ============================================================
   PRIVACY
   ============================================================ */
.privacy{ background:var(--cream-2); }
.priv-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; }
@media(max-width:860px){ .priv-grid{ grid-template-columns:1fr; } }
.priv-list{ list-style:none; display:flex; flex-direction:column; gap:2px; margin-top:30px; }
.priv-item{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line-2); }
.priv-item:last-child{ border-bottom:none; }
.priv-item .pi-ic{ flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--paper); border:1px solid var(--line); color:var(--amber-ink); }
.priv-item .pi-ic svg{ width:19px; height:19px; }
.priv-item h4{ font-size:17px; letter-spacing:-.02em; margin-bottom:3px; }
.priv-item p{ font-size:14.5px; color:var(--ink-2); }
.shield-stage{ display:grid; place-items:center; }
.shield{ width:280px; height:280px; position:relative; display:grid; place-items:center; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:20px; width:max-content; animation:scrollx 46s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee.rev .marquee-track{ animation-direction:reverse; animation-duration:54s; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }
.quote{ width:380px; flex:none; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; }
.quote p{ font-size:16px; color:var(--ink); line-height:1.55; letter-spacing:-.01em; }
.quote .qhead{ display:flex; align-items:center; gap:12px; margin-top:20px; }
.quote .av{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--coral)); display:grid; place-items:center; color:#fff; font-weight:700; font-size:15px; }
.quote .qn{ font-size:14px; font-weight:600; }
.quote .qr{ font-size:12.5px; color:var(--ink-3); font-family:var(--mono); }
.quote .stars{ color:var(--gold); font-size:13px; letter-spacing:2px; margin-bottom:14px; }

/* ============================================================
   PRICING
   ============================================================ */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
@media(max-width:860px){ .price-grid{ grid-template-columns:1fr; } }
.plan{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px; display:flex; flex-direction:column; }
.plan.feat{ background:var(--ink); color:var(--cream); border-color:var(--ink); box-shadow:0 40px 80px -36px rgba(27,24,19,.6); transform:scale(1.02); }
.plan.feat .lede,.plan.feat li{ color:rgba(250,247,241,.78); }
.plan .pname{ font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-ink); }
.plan.feat .pname{ color:var(--gold); }
.plan .price{ font-size:3rem; font-weight:740; letter-spacing:-.04em; margin:14px 0 4px; }
.plan .price small{ font-size:1rem; font-weight:500; color:var(--ink-3); letter-spacing:0; }
.plan.feat .price small{ color:rgba(250,247,241,.6); }
.plan ul{ list-style:none; margin:24px 0; display:flex; flex-direction:column; gap:13px; }
.plan li{ font-size:15px; color:var(--ink-2); display:flex; gap:11px; align-items:flex-start; }
.plan li svg{ flex:none; width:18px; height:18px; margin-top:2px; color:var(--accent); }
.plan.feat li svg{ color:var(--gold); }
.plan .btn{ margin-top:auto; width:100%; }
.badge{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:100px; background:rgba(241,181,68,.18); color:var(--gold); border:1px solid rgba(241,181,68,.3); margin-left:10px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:50px; }
@media(max-width:860px){ .faq-grid{ grid-template-columns:1fr; gap:24px; } }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0; font-size:18.5px; font-weight:560; letter-spacing:-.02em; }
.faq-q .pm{ flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition:.4s var(--ease); position:relative; }
.faq-q .pm::before,.faq-q .pm::after{ content:""; position:absolute; background:var(--ink); border-radius:2px; }
.faq-q .pm::before{ width:11px; height:1.6px; } .faq-q .pm::after{ width:1.6px; height:11px; transition:.4s var(--ease); }
.faq-item.open .pm{ background:var(--accent); border-color:var(--accent); transform:rotate(90deg); }
.faq-item.open .pm::before,.faq-item.open .pm::after{ background:#fff; }
.faq-item.open .pm::after{ opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.faq-item.open .faq-a{ max-height:340px; }
.faq-a p{ padding:0 0 26px; color:var(--ink-2); font-size:16px; max-width:560px; }

/* ============================================================
   CTA / FOOTER
   ============================================================ */
.cta{ position:relative; overflow:hidden; background:var(--ink); color:var(--cream); text-align:center; padding:clamp(80px,11vw,140px) 0; }
#cta-aurora{ position:absolute; inset:0; opacity:.7; }
.cta-inner{ position:relative; z-index:2; }
.cta h2{ color:var(--cream); font-size:clamp(2.4rem,5.5vw,4.6rem); }
.cta .lede{ color:rgba(250,247,241,.72); margin:22px auto 38px; max-width:540px; }
.cta-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta .btn-primary{ background:var(--cream); color:var(--ink); }
.cta .micro{ margin-top:22px; font-family:var(--mono); font-size:12.5px; color:rgba(250,247,241,.5); }

footer{ background:var(--ink); color:var(--cream); padding:60px 0 40px; border-top:1px solid rgba(255,255,255,.08); }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
@media(max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:30px; } }
.foot-brand img{ height:34px; margin-bottom:16px; }
.foot-brand p{ color:rgba(250,247,241,.55); font-size:14.5px; max-width:280px; }
.foot-col h5{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(250,247,241,.45); margin-bottom:16px; }
.foot-col a{ display:block; color:rgba(250,247,241,.7); font-size:14.5px; margin-bottom:11px; transition:color .25s; }
.foot-col a:hover{ color:var(--cream); }
.foot-bot{ margin-top:50px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; color:rgba(250,247,241,.45); font-size:13px; font-family:var(--mono); }

/* ---------- reveal ----------
   transform-only (opacity stays 1) so content is never invisible even if the
   animation timeline is frozen (e.g. backgrounded/offscreen render contexts). */
.reveal{ transform:translateY(26px); transition:transform 1s var(--ease-out); will-change:transform; }
.reveal.in{ transform:none; }
.reveal.d1{ transition-delay:.07s; } .reveal.d2{ transition-delay:.14s; } .reveal.d3{ transition-delay:.21s; } .reveal.d4{ transition-delay:.28s; }

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ transform:none; }
}