/* VibeClip Studio — marketing site. Broadcast control-room aesthetic, ultraviolet.
   Extends the product design system (chat/static/style.css). */
:root{
  /* black-dominant; purple used as a restrained accent, not an ambient wash */
  --ink:#060509; --panel:#0c0a12; --panel2:#100d17; --raise:#15111d;
  --line:#1f1b29; --line-hi:#2b2539;
  --bone:#ece9f3; --bone-dim:#8d8799; --bone-faint:#56505f;
  --accent:#9b6cf2; --accent-dim:#3a2c5a; --accent-glow:rgba(155,108,242,.08);
  --accent-ink:#f7f3ff; --accent-hi:#b69bf0; --hilite:#cba7f5;
  --green:#3ddc97; --red:#f4524d; --blue:#6b8dff; --orange:#ffb454;
  --zoom:#6b8dff; --broll:#8f7bf0; --subt:#9a90b3; --music:#3ddc97;
  --maxw:1180px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{
  overflow-x:hidden; /* guard: no horizontal scroll on narrow phones */
  background:var(--ink); color:var(--bone);
  font-family:'Archivo',system-ui,sans-serif; font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* barely-there timeline-tick grid */
  background-image:
    repeating-linear-gradient(90deg, rgba(155,108,242,.018) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.008) 0 1px, transparent 1px 72px);
}
.mono{font-family:'IBM Plex Mono',monospace}
a{color:inherit; text-decoration:none}
::selection{background:var(--accent-dim); color:var(--accent-ink)}

/* ===== base keyframes ===== */
@keyframes blink{50%{opacity:0}}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ===== brand block ===== */
.brand{display:flex; align-items:center; gap:9px; user-select:none}
.brand-block{width:10px; height:18px; border-radius:2px; background:var(--accent);
  box-shadow:0 0 12px var(--accent-glow); flex:none}
.brand .word{font-weight:800; font-size:1.05rem; letter-spacing:.14em; color:var(--bone)}
.brand .sub{font-size:.56rem; letter-spacing:.34em; color:var(--bone-faint); text-transform:uppercase}

/* ===== buttons ===== */
.btn{display:inline-flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.12em;
  padding:9px 16px; border-radius:7px; cursor:pointer; border:1px solid transparent;
  transition:all .16s; white-space:nowrap}
.btn-solid{background:var(--accent); color:var(--accent-ink); font-weight:700}
.btn-solid:hover{filter:brightness(1.1); transform:translateY(-1px)}
.btn-ghost{background:none; color:var(--bone-dim); border-color:var(--line-hi)}
.btn-ghost:hover{color:var(--accent-hi); border-color:var(--accent-dim); background:var(--accent-glow)}
.btn-glow{box-shadow:0 0 0 0 var(--accent-glow), 0 10px 30px -8px rgba(155,92,255,.5)}
.btn-glow:hover{box-shadow:0 14px 38px -8px rgba(155,92,255,.65)}
.btn-lg{font-size:.72rem; padding:13px 24px}
.btn-full{width:100%; margin-top:auto}

/* ===== eyebrow / headings / type scale ===== */
.eyebrow{font-size:.6rem; letter-spacing:.22em; color:var(--accent-hi);
  text-transform:uppercase; margin-bottom:14px}
h1{font-weight:800; font-size:clamp(2.6rem,6vw,4rem); line-height:1.04; letter-spacing:-.01em}
h2{font-family:'Bricolage Grotesque','Archivo',sans-serif; font-weight:800;
  font-size:clamp(1.9rem,4vw,2.6rem); line-height:1.08; letter-spacing:-.02em}
h3{font-weight:700; font-size:1.15rem; margin-bottom:8px}
.sect-head{max-width:760px; margin:0 auto 52px; text-align:center}
.sect-sub{font-size:clamp(.95rem,1.3vw,1.08rem); color:var(--bone-dim); line-height:1.6;
  max-width:56ch; margin:16px auto 0}
section{padding:120px 32px; max-width:1280px; margin:0 auto}

/* ===== scroll reveal ===== */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* ===================== NAV ===================== */
.nav{position:sticky; top:0; z-index:50; display:flex; align-items:center;
  gap:24px; padding:0 28px; height:62px; background:rgba(13,9,22,.82);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav::before{content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--accent) 0%, transparent 38%); opacity:.8}
.nav-links{display:flex; gap:26px; margin:0 auto; font-size:.7rem; letter-spacing:.06em}
.nav-links a{color:var(--bone-dim); transition:color .15s}
.nav-links a:hover{color:var(--accent-hi)}
.nav-cta{display:flex; gap:10px; align-items:center}

/* ===================== HERO — calm, centered, type-led ===================== */
.hero{position:relative; overflow:hidden; padding:118px 0 56px; text-align:center}
/* hero copy is ALWAYS visible — entrance never gates opacity, so the hero can
   never load blank if the animation is throttled (background tab / slow device). */
.hero.reveal{opacity:1; transform:none; transition:none}

/* --- atmosphere layers (pure CSS) --- */
.hero-atmos{position:absolute; inset:0; z-index:0; pointer-events:none}
.atmos-glow{position:absolute; border-radius:50%}
/* one soft, still pool of light behind the headline — no breathing, no pulse */
.atmos-glow.g1{width:1080px; height:600px; left:50%; top:-240px;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(155,108,242,.11), transparent 72%)}
.atmos-glow.g2{display:none}
/* static, very faint timeline grid masked to the hero core (no drift) */
.atmos-grid{position:absolute; inset:-64px;
  background-image:
    repeating-linear-gradient(90deg, rgba(155,108,242,.022) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(155,108,242,.014) 0 1px, transparent 1px 72px);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 34%, #000 25%, transparent 100%);
  mask-image:radial-gradient(70% 60% at 50% 34%, #000 25%, transparent 100%)}
/* signal sweep removed — it was the main source of eye-strain */
.atmos-sweep{display:none}
/* whisper of film grain so flat blacks don't band */
.atmos-grain{position:absolute; inset:0; opacity:.025; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* --- centered single column --- */
.hero-inner{position:relative; z-index:1; max-width:880px; margin:0 auto;
  padding:0 28px; display:flex; flex-direction:column; align-items:center}

/* pill badge above the headline */
.hero-badge{display:inline-flex; align-items:center; gap:9px; font-size:.58rem;
  letter-spacing:.2em; color:var(--bone-dim); text-transform:uppercase;
  border:1px solid var(--line-hi); border-radius:999px; padding:7px 16px;
  margin-bottom:34px; background:rgba(155,108,242,.03);
  transition:border-color .15s, color .15s}
.hero-badge:hover{color:var(--accent-hi); border-color:var(--accent-dim)}
.badge-dot{width:6px; height:6px; border-radius:50%; flex:none; background:var(--accent);
  box-shadow:0 0 10px var(--accent)}

/* staggered entrance — TRANSFORM ONLY so content stays visible even if the
   animation is throttled; opacity is never touched. */
.hrise{transform:translateY(12px)}
.hero.in .hrise{animation:heroRise .6s cubic-bezier(.2,.8,.25,1) both;
  animation-delay:var(--d,.1s)}
@keyframes heroRise{from{transform:translateY(12px)} to{transform:none}}

/* pulsing dot reused by the LIVE DEMO badge below */
.rec-dot{display:inline-block; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--red); box-shadow:0 0 10px rgba(244,82,77,.8);
  animation:recPulse 1.6s ease-in-out infinite}
@keyframes recPulse{50%{opacity:.35; box-shadow:0 0 4px rgba(244,82,77,.4)}}

/* headline — distinctive display face, tight, confident */
.hero-h1{font-family:'Bricolage Grotesque','Archivo',sans-serif; font-weight:800;
  font-size:clamp(2.9rem,7vw,5rem); line-height:1.0; letter-spacing:-.025em;
  margin-bottom:26px}
.accent-word{position:relative; color:var(--accent-hi)}
/* soft glow pooled under the accent word — static, calm, no box */
.accent-word::after{content:""; position:absolute; left:-.06em; right:-.06em;
  bottom:.04em; height:.46em; z-index:-1; border-radius:.3em;
  background:radial-gradient(62% 100% at 50% 100%, rgba(155,108,242,.32), transparent 72%)}

.lead{font-size:clamp(1rem,1.4vw,1.18rem); color:var(--bone-dim); line-height:1.62;
  max-width:60ch; margin:0 auto 36px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
  margin-bottom:26px}
.trust{font-size:.58rem; letter-spacing:.18em; color:var(--bone-faint)}

/* --- demo shell: the interactive "how it works" panel, framed like a monitor --- */
.demo-shell{position:relative; z-index:1;
  width:100%; max-width:calc(var(--maxw) + 56px);
  margin:0 auto; padding:24px 28px 28px;
  border:1px solid var(--line-hi); border-radius:18px;
  background:linear-gradient(180deg, rgba(29,20,48,.45), rgba(19,13,31,.72));
  box-shadow:0 0 0 1px rgba(155,108,242,.04),
    0 50px 140px -60px rgba(155,108,242,.12),
    0 36px 90px -36px rgba(0,0,0,.9);
  backdrop-filter:blur(6px)}
.demo-shell::before{content:""; position:absolute; top:-1px; left:26px; right:26px;
  height:2px; border-radius:2px; opacity:.75;
  background:linear-gradient(90deg, transparent, var(--accent) 30%,
    var(--hilite) 55%, transparent)}
.demo-head{display:flex; align-items:center; gap:14px; margin-bottom:22px;
  font-size:.58rem; letter-spacing:.2em; text-transform:uppercase}
.demo-live{display:inline-flex; align-items:center; gap:8px; color:var(--accent-hi);
  background:var(--accent-glow); border:1px solid var(--accent-dim);
  padding:6px 12px; border-radius:6px; letter-spacing:.22em}
.demo-sub{color:var(--bone-faint); letter-spacing:.16em}
.demo-head::after{content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--line-hi), transparent)}

/* ===================== INTERACTIVE STUDIO DEMO ("TRY IT") ===================== */
.try{max-width:var(--maxw); margin:0 auto; display:grid; text-align:left;
  grid-template-columns:1fr 360px; gap:28px; align-items:stretch}

/* --- A/B stage: two real 9:16 phones (ported from studio style.css) --- */
.try-stage{display:flex; justify-content:center; align-items:flex-start; gap:0;
  transition:gap .35s cubic-bezier(.2,.8,.25,1)}
.try-stage.compare{gap:22px}
.abcol{display:flex; flex-direction:column; align-items:center; gap:10px;
  min-width:0}
.ablabel{font-family:'IBM Plex Mono',monospace; font-size:.6rem;
  letter-spacing:.2em; color:var(--bone-dim); text-transform:uppercase}
/* B column hidden until compare; slides in beside A like showPlanCompare() */
#abB{opacity:0; transform:translateX(-24px) scale(.96);
  max-width:0; overflow:hidden; pointer-events:none;
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.25,1),
    max-width .35s ease}
.try-stage.compare #abB{opacity:1; transform:none; max-width:340px;
  pointer-events:auto}
.phone{
  width:min(100%, 300px); aspect-ratio:9/16; border-radius:14px;
  border:1px solid var(--line-hi); background:#000; overflow:hidden;
  position:relative; flex:none;
  box-shadow:0 0 0 4px #0f0c16, 0 28px 64px -24px rgba(0,0,0,.9),
    0 0 48px -20px rgba(155,108,242,.14);
}
.try-stage.compare .phone{width:min(100%, 280px)}
.phone video{width:100%; height:100%; object-fit:cover; background:#000; display:block}
/* per-phone audio toggle — sits ABOVE the tap-to-play overlay so muting always
   works even while the overlay is visible */
.demo-sound{position:absolute; top:9px; right:9px; z-index:6; cursor:pointer;
  font-size:.7rem; line-height:1; padding:5px 7px; border-radius:6px;
  background:rgba(10,7,18,.62); border:1px solid var(--line);
  color:var(--bone-dim); transition:color .15s, border-color .15s}
.demo-sound.on{color:var(--accent-hi); border-color:var(--accent-dim);
  background:var(--accent-glow)}
/* autoplay-rejection tap overlay — only shown while A is genuinely paused
   (JS hides it the moment 'playing' fires), so it never darkens a live frame */
.demo-play{position:absolute; inset:0; z-index:4; display:flex;
  align-items:center; justify-content:center; cursor:pointer;
  font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.16em;
  color:var(--accent-hi); background:rgba(8,5,12,.42)}
.demo-play[hidden]{display:none}
/* B buffering shimmer (until canplaythrough) */
.demo-shim{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(110deg, transparent 30%, rgba(155,92,255,.18) 50%, transparent 70%);
  background-size:220% 100%; animation:tpShim .8s linear infinite}
@keyframes tpShim{from{background-position:120% 0}to{background-position:-120% 0}}
/* pick buttons — ported from studio .pickbtn (+ ghost variant) */
.pickbtn{font-family:'IBM Plex Mono',monospace; font-size:.62rem; padding:8px 16px;
  border-radius:6px; cursor:pointer; background:var(--accent); border:1px solid var(--accent);
  color:var(--accent-ink); font-weight:700; letter-spacing:.1em;
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, filter .15s}
.pickbtn:hover{filter:brightness(1.1)}
.pickbtn.ghost{background:none; color:var(--bone-dim); border-color:var(--line-hi)}
.pickbtn.ghost:hover{color:var(--accent-hi); border-color:var(--accent-dim);
  background:var(--accent-glow); filter:none}
.try-stage.compare .pickbtn{opacity:1; transform:none; pointer-events:auto}

.demo-note{text-align:center; font-size:.58rem; letter-spacing:.06em;
  color:var(--bone-faint); margin-top:18px; grid-column:1 / -1}

/* --- chat composer --- */
.try-chat{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.8); position:relative}
.try-chat::before{content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--accent) 0%, transparent 42%); z-index:2}
.tc-head{display:flex; align-items:center; gap:6px; padding:9px 13px;
  border-bottom:1px solid var(--line); background:var(--panel2)}
.tc-head .dot{width:8px; height:8px; border-radius:50%; background:var(--line-hi)}
.tc-title{margin-left:8px; font-size:.56rem; letter-spacing:.14em; color:var(--bone-faint);
  text-transform:uppercase}
/* grows to fill the panel so it stays as tall as the 9:16 phone beside it */
.tc-log{padding:14px; display:flex; flex-direction:column; gap:9px; flex:1 1 auto;
  min-height:160px; overflow-y:auto}
.tc-empty{font-size:.66rem; color:var(--bone-faint); margin:auto 0}
.tc-msg{max-width:86%; padding:8px 12px; border-radius:9px; font-size:.8rem; line-height:1.45;
  animation:fadeUp .25s ease both}
.tc-msg.user{align-self:flex-end; background:var(--accent); color:var(--accent-ink);
  border-bottom-right-radius:3px; font-weight:500}
.tc-msg.tool{align-self:flex-start; background:none; padding:1px 2px; font-size:.62rem;
  color:var(--bone-faint)}
.tc-msg.tool::before{content:"▸ "; color:var(--accent-hi)}
.tc-msg.render{align-self:flex-start; font-size:.64rem; color:var(--accent-hi);
  background:none; padding:1px 2px; letter-spacing:.04em}
.tc-msg.render .dots::after{content:""; animation:tcDots 1.1s steps(4,end) infinite}
@keyframes tcDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

.tc-composer{border-top:1px solid var(--line); padding:11px 14px; background:var(--ink)}
.tc-line{min-height:18px; font-size:.82rem; color:var(--bone);
  font-family:'Archivo',sans-serif}
.tc-caret{display:inline-block; width:7px; height:1em; background:var(--accent);
  vertical-align:-2px; animation:blink 1s step-end infinite}

.tc-chips{display:flex; flex-wrap:wrap; gap:8px; padding:12px 14px;
  border-top:1px solid var(--line)}
.chip{font-family:'IBM Plex Mono',monospace; font-size:.64rem; letter-spacing:.02em;
  color:var(--bone-dim); background:var(--raise); border:1px solid var(--line-hi);
  border-radius:7px; padding:8px 12px; cursor:pointer; transition:all .15s; text-align:left}
.chip::before{content:"→ "; color:var(--accent-hi)}
.chip:hover{color:var(--accent-hi); border-color:var(--accent-dim); background:var(--accent-glow);
  transform:translateY(-1px)}
.chip:disabled{opacity:.4; cursor:default; transform:none}
.chip.busy{border-color:var(--accent-dim); color:var(--accent-hi)}
/* applied / subsumed chip — green check, disabled */
.chip.done{color:var(--green); border-color:rgba(61,220,151,.4);
  background:rgba(61,220,151,.07); opacity:1}
.chip.done::before{content:"✓ "; color:var(--green)}
.chip-reset{margin-left:auto; color:var(--bone-faint)}
.chip-reset::before{content:""}

/* applied confirmation flash */
.tc-applied{max-height:0; overflow:hidden; padding:0 14px; background:var(--accent-glow);
  border-top:1px solid transparent; color:var(--accent-hi); font-size:.62rem;
  letter-spacing:.03em; transition:max-height .3s ease, padding .3s ease}
.tc-applied.on{max-height:60px; padding:11px 14px; border-top-color:var(--accent-dim)}
.tc-applied.flash{animation:tcFlash .5s ease}
@keyframes tcFlash{0%{background:rgba(155,92,255,.4)}100%{background:var(--accent-glow)}}

/* ===================== PRICING ===================== */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  max-width:var(--maxw); margin:0 auto; align-items:stretch}
.tier{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:30px 28px; display:flex; flex-direction:column; position:relative;
  transition:border-color .2s, transform .2s}
.tier:hover{border-color:var(--line-hi)}
/* the recommended plan is lifted and ringed in accent */
.tier-pop{border-color:transparent; transform:translateY(-10px);
  background:linear-gradient(180deg, rgba(155,108,242,.07), var(--panel) 58%);
  box-shadow:0 0 0 1px var(--accent-dim),
    0 40px 90px -46px rgba(155,108,242,.45), 0 24px 60px -40px rgba(0,0,0,.9)}
.tier-pop:hover{border-color:transparent}
.tier-tag{position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  font-size:.52rem; letter-spacing:.2em; color:var(--accent-ink); white-space:nowrap;
  background:var(--accent); padding:4px 13px; border-radius:6px; font-weight:700;
  box-shadow:0 6px 18px -6px rgba(155,108,242,.6)}
.tier-name{font-size:.62rem; letter-spacing:.22em; color:var(--accent-hi);
  text-transform:uppercase; margin-bottom:9px}
.tier-desc{font-size:.84rem; color:var(--bone-faint); line-height:1.5;
  min-height:38px; margin-bottom:18px}
.tier-price{font-family:'Bricolage Grotesque','Archivo',sans-serif;
  display:flex; align-items:baseline; gap:3px; font-size:3rem; font-weight:800;
  letter-spacing:-.02em; line-height:1; margin-bottom:22px}
.tier-price .cur{font-size:1.35rem; font-weight:700; color:var(--bone-dim);
  align-self:flex-start; margin-top:.35em}
.tier-price .per{font-size:.85rem; font-weight:500; color:var(--bone-faint);
  letter-spacing:0; font-family:'IBM Plex Mono',monospace}
.tier .btn-full{margin-top:0}
.tier-feats{list-style:none; display:flex; flex-direction:column; gap:12px;
  margin-top:24px; padding-top:22px; border-top:1px solid var(--line)}
.tier-pop .tier-feats{border-top-color:var(--accent-dim)}
.tier-feats li{font-size:.86rem; color:var(--bone-dim); line-height:1.4;
  padding-left:26px; position:relative}
.tier-feats li::before{content:"✓"; position:absolute; left:0; top:-1px;
  color:var(--accent-hi); font-weight:700}
.tier-feats li b{display:block; color:var(--bone-faint); font-weight:600;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase}
.tier-feats li:has(b){padding-left:0}
.tier-feats li:has(b)::before{content:""}

.price-foot{text-align:center; font-size:.62rem; letter-spacing:.1em;
  color:var(--bone-faint); margin-top:34px; text-transform:uppercase}

/* ===================== FEATURES / WHAT YOU CAN DO ===================== */
/* asymmetric "capability ledger" — two wide lead tiles up top, then a denser
   row of compact ones. Each tile carries a mono index number + a violet glyph,
   so it reads like a spec sheet rather than a generic card wall. */
.feat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  max-width:var(--maxw); margin:0 auto}
.feat{position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:24px 22px 22px; overflow:hidden;
  transition:border-color .2s, transform .2s, background .2s}
/* hairline accent that lights up the top edge on hover, echoing the demo shell */
.feat::before{content:""; position:absolute; top:0; left:18px; right:18px; height:2px;
  border-radius:2px; opacity:0; transition:opacity .2s;
  background:linear-gradient(90deg, transparent, var(--accent) 35%, var(--hilite) 60%, transparent)}
.feat:hover{border-color:var(--line-hi); transform:translateY(-3px);
  background:linear-gradient(180deg, rgba(155,108,242,.05), var(--panel) 60%)}
.feat:hover::before{opacity:.7}
/* two lead tiles each span two columns and sit taller */
.feat-lead{grid-column:span 2; padding:28px 26px}
/* faint mono index, top-right, like a shot number on a slate */
.feat-no{position:absolute; top:16px; right:18px; font-size:.62rem;
  letter-spacing:.18em; color:var(--bone-faint); opacity:.7}
/* violet stroke glyph in a soft well */
.feat-ico{display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:11px; margin-bottom:16px;
  color:var(--accent-hi); background:var(--accent-glow);
  border:1px solid var(--accent-dim)}
.feat-ico svg{width:22px; height:22px}
.feat-lead .feat-ico{width:48px; height:48px}
.feat-lead .feat-ico svg{width:25px; height:25px}
.feat h3{color:var(--bone); margin-bottom:7px}
.feat p{font-size:.86rem; color:var(--bone-dim); line-height:1.55}
.feat-lead p{font-size:.92rem}

/* ===================== STATS / SOCIAL-PROOF STRIP ===================== */
/* thin, monospaced "broadcast readout" band — four metrics divided by hairlines */
.sect-stats{padding-top:0; padding-bottom:120px}
.stats-strip{display:grid; grid-template-columns:repeat(4,1fr);
  max-width:var(--maxw); margin:0 auto;
  border:1px solid var(--line-hi); border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg, rgba(29,20,48,.35), rgba(19,13,31,.6))}
.stat{padding:26px 22px; text-align:center; border-left:1px solid var(--line)}
.stat:first-child{border-left:none}
.stat-n{font-family:'Bricolage Grotesque','Archivo',sans-serif; font-weight:800;
  font-size:2rem; letter-spacing:-.02em; color:var(--accent-hi); line-height:1;
  margin-bottom:9px}
.stat-l{font-size:.54rem; letter-spacing:.16em; color:var(--bone-faint);
  text-transform:uppercase; line-height:1.4}

/* ===================== BLOG / RESOURCES TEASER ===================== */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  max-width:var(--maxw); margin:0 auto}
.post{display:flex; flex-direction:column; background:var(--panel);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:border-color .2s, transform .2s; cursor:pointer}
.post:hover{border-color:var(--line-hi); transform:translateY(-3px)}
/* editorial thumbnail well — a violet-tinted gradient with a faint grid + SOON tag */
.post-thumb{position:relative; aspect-ratio:16/9; display:flex;
  align-items:center; justify-content:center;
  background:
    radial-gradient(120% 120% at 18% 0%, rgba(155,108,242,.22), transparent 60%),
    linear-gradient(180deg, var(--raise), var(--panel2));
  border-bottom:1px solid var(--line)}
.post-thumb::after{content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    repeating-linear-gradient(90deg, rgba(155,108,242,.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 26px)}
.post-soon{position:relative; z-index:1; font-size:.56rem; letter-spacing:.26em;
  color:var(--accent-hi); border:1px solid var(--accent-dim);
  background:rgba(10,7,18,.45); padding:6px 13px; border-radius:999px}
.post-body{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1}
.post-meta{display:flex; align-items:center; gap:12px; margin-bottom:12px;
  font-size:.54rem; letter-spacing:.16em}
.post-tag{color:var(--accent-hi); border:1px solid var(--accent-dim);
  background:var(--accent-glow); padding:3px 9px; border-radius:5px}
.post-read{color:var(--bone-faint)}
.post-body h3{color:var(--bone); line-height:1.25; margin-bottom:9px}
.post-body p{font-size:.84rem; color:var(--bone-dim); line-height:1.55}
.post:hover .post-body h3{color:var(--accent-hi)}
.blog-foot{text-align:center; font-size:.62rem; letter-spacing:.1em;
  color:var(--bone-faint); margin-top:30px; text-transform:uppercase}

/* ===================== PRICING — COMING SOON ===================== */
/* a single centered early-access card floating over a softly ghosted preview
   of the three tiers that will land later. Reads as intentional, not broken. */
.price-soon{position:relative; max-width:var(--maxw); margin:0 auto;
  padding:14px 0 6px}
/* ghosted tier silhouettes behind the card */
.price-ghost{position:absolute; inset:0; display:grid;
  grid-template-columns:repeat(3,1fr); gap:20px; align-items:center;
  pointer-events:none; opacity:.45;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent)}
.ghost-tier{height:300px; border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg, var(--panel), var(--panel2)); filter:blur(1px)}
.ghost-pop{height:340px; border-color:var(--accent-dim);
  background:linear-gradient(180deg, rgba(155,108,242,.06), var(--panel) 60%)}
/* the live card */
.price-card{position:relative; z-index:1; max-width:520px; margin:0 auto;
  text-align:center; padding:42px 38px 34px;
  border:1px solid var(--accent-dim); border-radius:18px;
  background:linear-gradient(180deg, rgba(29,20,48,.7), rgba(16,13,23,.92));
  box-shadow:0 0 0 1px rgba(155,108,242,.05),
    0 50px 130px -50px rgba(155,108,242,.4), 0 30px 70px -40px rgba(0,0,0,.9);
  backdrop-filter:blur(8px)}
.price-badge{position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  font-size:.56rem; letter-spacing:.28em; color:var(--accent-ink); font-weight:700;
  background:var(--accent); padding:5px 16px; border-radius:7px;
  box-shadow:0 8px 22px -6px rgba(155,108,242,.65)}
.price-card .tier-name{margin-bottom:14px}
.price-card-h{font-family:'Bricolage Grotesque','Archivo',sans-serif; font-weight:800;
  font-size:1.5rem; line-height:1.15; letter-spacing:-.01em; color:var(--bone);
  margin-bottom:14px}
.price-card-p{font-size:.92rem; color:var(--bone-dim); line-height:1.6;
  max-width:44ch; margin:0 auto 26px}
.price-card .btn-lg{display:inline-flex}
.price-card-foot{font-size:.58rem; letter-spacing:.18em; color:var(--bone-faint);
  margin-top:18px}

/* ===================== FAQ (CSS-only accordion) ===================== */
.faq-list{max-width:780px; margin:0 auto; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--panel)}
.faq-item{border-top:1px solid var(--line)}
.faq-item:first-child{border-top:none}
.faq-item summary{display:flex; align-items:center; gap:16px; cursor:pointer;
  list-style:none; padding:20px 24px; font-weight:600; font-size:1rem;
  color:var(--bone); transition:color .15s; user-select:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent-hi)}
/* animated + / × marker drawn in CSS (two strokes, the vertical one collapses) */
.faq-mark{position:relative; flex:none; width:14px; height:14px; margin-left:auto}
.faq-mark::before,.faq-mark::after{content:""; position:absolute; top:50%; left:50%;
  background:var(--accent-hi); border-radius:1px; transition:transform .22s ease}
.faq-mark::before{width:14px; height:2px; transform:translate(-50%,-50%)}
.faq-mark::after{width:2px; height:14px; transform:translate(-50%,-50%)}
.faq-item[open] .faq-mark::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-a{padding:0 24px 22px; font-size:.92rem; color:var(--bone-dim); line-height:1.65;
  max-width:64ch; animation:faqSlide .26s ease both}
@keyframes faqSlide{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}

/* ===================== FINAL CTA ===================== */
.sect-final{max-width:1000px; text-align:center}
.sect-final h2{margin-bottom:28px}
.sect-final .trust{margin-top:18px}

/* ===================== FOOTER ===================== */
.foot{display:flex; align-items:center; gap:22px; padding:30px 32px;
  border-top:1px solid var(--line); max-width:1280px; margin:0 auto; flex-wrap:wrap}
.foot .copy{font-size:.6rem; color:var(--bone-faint); margin-left:auto; letter-spacing:.1em}
.foot-links{display:flex; gap:18px; font-size:.6rem; letter-spacing:.08em}
.foot-links a{color:var(--bone-faint); transition:color .15s}
.foot-links a:hover{color:var(--accent-hi)}
.foot .credit{flex-basis:100%; font-size:.56rem; line-height:1.5;
  color:var(--bone-faint); opacity:.7; letter-spacing:.04em}
.foot .credit a{color:var(--bone-dim); text-decoration:underline; text-underline-offset:2px}
.foot .credit a:hover{color:var(--accent-hi)}

/* ===================== RESPONSIVE ===================== */
@media (max-width:980px){
  /* pricing: popular plan can't float above its neighbours when 1-up — drop the lift */
  .tiers{grid-template-columns:1fr; gap:16px; max-width:440px}
  .tier-pop{transform:none}
  /* features collapse 4→2 cols; lead tiles still span the full row */
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .feat-lead{grid-column:span 2}
  /* blog 3→2, last card spans full width to keep the row balanced */
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .post:last-child{grid-column:1 / -1}
}
@media (max-width:768px){
  h1{font-size:2.3rem}
  .hero-h1{font-size:clamp(2.3rem,9.5vw,3rem)}
  .nav-links{display:none}
  .nav{gap:14px; padding:0 18px}
  .hero{padding:60px 0 20px}
  .hero-inner{padding:0 20px}
  .hero-badge{font-size:.52rem; letter-spacing:.14em; padding:6px 13px}
  .lead{font-size:1rem}
  .hero-cta{width:100%}
  .hero-cta .btn{flex:1; min-width:0}
  section{padding:60px 18px}
  .sect-head{margin-bottom:34px}
  /* interactive demo */
  .demo-shell{width:100%; margin:0 auto; padding:16px 13px 18px}
  .demo-head{flex-wrap:wrap; gap:10px; margin-bottom:16px}
  .demo-sub{order:3; flex-basis:100%; letter-spacing:.12em}
  .try{grid-template-columns:1fr; gap:20px}
  .try-stage{order:-1}
  .phone{width:min(76vw,300px)}
  .try-stage.compare{gap:10px}
  .try-stage.compare .phone{width:43vw}
  .try-stage.compare #abB{max-width:46vw}
  .abcol{min-width:0}
  .try-stage.compare .abcol{flex:1}
  /* keep both A/B labels to ONE line so the two phones stay vertically aligned
     (a wrapping "CAPTIONS ADDED" label used to push the B phone down a row) */
  .ablabel{font-size:.5rem; letter-spacing:.04em; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; max-width:100%}
  .pickbtn{width:100%; font-size:.54rem; padding:9px 6px; white-space:normal; line-height:1.3}
  .tc-chips{gap:7px; padding:11px}
  .chip{font-size:.62rem; padding:8px 10px}
  /* features: single column on phones; lead tiles stop spanning */
  .feat-grid{grid-template-columns:1fr; gap:12px}
  .feat-lead{grid-column:auto; padding:24px 22px}
  .feat-lead .feat-ico{width:42px; height:42px}
  .feat-lead .feat-ico svg{width:22px; height:22px}
  /* stats strip: 4→2, add an inner divider row */
  .stats-strip{grid-template-columns:repeat(2,1fr)}
  .stat{border-left:1px solid var(--line)}
  .stat:nth-child(odd){border-left:none}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .sect-stats{padding-bottom:60px}
  /* blog: single column */
  .blog-grid{grid-template-columns:1fr}
  .post:last-child{grid-column:auto}
  /* pricing-soon: ghost preview is busy on small screens — hide it, keep the card */
  .price-ghost{display:none}
  .price-card{padding:38px 24px 30px}
  .price-card-h{font-size:1.3rem}
  /* faq padding tightens */
  .faq-item summary{padding:18px 18px; font-size:.94rem; gap:12px}
  .faq-a{padding:0 18px 20px}
}
@media (max-width:380px){
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .hrise,.demo-shell{transform:none !important; animation:none !important}
  .atmos-glow.g1{animation:none}
  .rec-dot{animation:none}
  .tc-caret{animation:none}
  .faq-a{animation:none}
  .feat:hover,.post:hover{transform:none}
}