/* 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)}

/* --- hero product showcase (looping phone + floating chat bubble) --- */
.hero-copy{display:flex; flex-direction:column; align-items:center}
.hero-show{position:relative; display:flex; align-items:center; justify-content:center;
  min-height:360px; margin-top:30px}
.hero-show::before{content:""; position:absolute; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(155,108,242,.22), transparent 70%);
  filter:blur(8px); z-index:0}
.hero-phone{position:relative; z-index:1; width:236px; aspect-ratio:9/16;
  border-radius:26px; overflow:hidden; background:#000;
  border:1px solid var(--line-hi);
  box-shadow:0 44px 100px -34px rgba(155,92,255,.6), 0 0 0 1px rgba(155,108,242,.14);
  transform:rotate(-3deg)}
.hero-phone video{width:100%; height:100%; object-fit:cover; display:block}
/* one slow violet scan pass for a touch of "AI is working" life */
.hp-scan{position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(180deg, transparent 0%, rgba(155,108,242,.16) 50%, transparent 100%);
  height:42%; animation:hpScan 5.5s ease-in-out infinite}
@keyframes hpScan{0%,100%{transform:translateY(-60%); opacity:0}
  45%,55%{opacity:1} 50%{transform:translateY(150%)}}
.hero-bubble{position:absolute; z-index:2; top:10%; right:-6%;
  display:flex; flex-direction:column; gap:5px;
  background:rgba(12,10,18,.94); border:1px solid var(--accent-dim);
  border-radius:13px 13px 13px 3px; padding:10px 13px; font-size:.6rem;
  letter-spacing:.02em; color:var(--bone); max-width:200px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.8); animation:floaty 6s ease-in-out infinite}
.hb-row{display:flex; align-items:center; gap:6px; line-height:1.3}
.hb-you{color:var(--accent-hi); text-transform:uppercase; letter-spacing:.12em; font-size:.52rem}
.hb-ai{color:var(--bone-dim)}
.hb-ai b{color:var(--green)}
.hb-dot{width:6px; height:6px; border-radius:50%; background:var(--green); flex:none;
  box-shadow:0 0 8px var(--green)}
.hero-chip{position:absolute; z-index:2; bottom:9%; left:-8%;
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(12,10,18,.94); border:1px solid var(--line-hi); border-radius:999px;
  padding:7px 13px; font-size:.54rem; letter-spacing:.12em; color:var(--bone-dim);
  box-shadow:0 16px 40px -18px rgba(0,0,0,.8); animation:floaty 6s ease-in-out infinite reverse}
.hc-dot{width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 8px var(--accent)}
@keyframes floaty{50%{transform:translateY(-7px)}}

/* desktop: two-column hero (copy left, showcase right) */
@media(min-width:900px){
  .hero{text-align:left; padding:124px 0 60px}
  .hero-inner{max-width:1180px; display:grid; grid-template-columns:1.04fr .96fr;
    gap:40px; align-items:center}
  .hero-copy{align-items:flex-start}
  .hero-copy .lead{margin-left:0; margin-right:0}
  .hero-copy .hero-cta{justify-content:flex-start}
  .hero-show{margin-top:0; min-height:460px}
  .hero-phone{width:266px}
}
@media(max-width:520px){
  .hero-phone{width:208px}
  .hero-bubble{right:-2%; max-width:170px}
  .hero-chip{left:-2%}
}

/* --- 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:""}
/* the split-screen "brainrot" showcase chip — tinted so it reads as the wow move */
.chip-wow{color:var(--accent-hi); border-color:var(--accent-dim);
  background:linear-gradient(180deg, rgba(155,108,242,.10), var(--raise))}
.chip-wow::before{content:"✦ "; color:var(--hilite)}
.chip-wow:hover{border-color:var(--accent); background:var(--accent-glow)}

/* 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}

/* ===================== TRUST / PUBLISH-READY BAND ===================== */
.sect-trust{padding-top:0; padding-bottom:120px}
.trust-card{max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:.8fr 1.2fr; gap:0;
  border:1px solid var(--line-hi); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, rgba(29,20,48,.35), rgba(19,13,31,.6))}
.trust-plats{padding:30px 30px; border-right:1px solid var(--line)}
.trust-plats .eyebrow{margin-bottom:16px}
.tplat-row{display:flex; flex-wrap:wrap; gap:8px}
.tplat{font-size:.66rem; letter-spacing:.04em; color:var(--bone);
  border:1px solid var(--line-hi); border-radius:999px; padding:7px 13px;
  background:var(--panel-quiet,rgba(14,10,22,.6)); transition:border-color .15s, color .15s}
.tplat:hover{border-color:var(--accent-dim); color:var(--accent-hi)}
.trust-pillars{display:grid; grid-template-columns:repeat(3,1fr)}
.tpill{padding:26px 22px; display:flex; flex-direction:column; gap:11px;
  border-left:1px solid var(--line)}
.tpill-ic{width:34px; height:34px; border-radius:9px; color:var(--accent);
  border:1px solid var(--accent-dim); background:rgba(155,108,242,.06);
  display:flex; align-items:center; justify-content:center}
.tpill-ic svg{width:19px; height:19px}
.tpill-t{display:flex; flex-direction:column; gap:4px}
.tpill-t b{font-size:.82rem; letter-spacing:.01em; color:var(--bone)}
.tpill-t span{font-size:.68rem; color:var(--bone-dim); line-height:1.5}
@media(max-width:820px){
  .trust-card{grid-template-columns:1fr}
  .trust-plats{border-right:none; border-bottom:1px solid var(--line)}
  .trust-pillars{grid-template-columns:1fr}
  .tpill{border-left:none; border-top:1px solid var(--line)}
  .tpill:first-child{border-top:none}
}

/* ===================== BLOG STRIP (links to /blog) ===================== */
/* The real blog lives at /blog. This is a single banner that points to it,
   so the landing stays rich without faking article cards. */
.blogcta-card{max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  padding:clamp(26px,4vw,40px) clamp(24px,4vw,44px);
  background:
    radial-gradient(130% 160% at 0% 0%, rgba(155,108,242,.12), transparent 58%),
    linear-gradient(180deg, var(--panel2), var(--panel));
  border:1px solid var(--line); border-radius:18px}
.blogcta-text{flex:1; min-width:260px}
.blogcta-text .eyebrow{margin-bottom:10px}
.blogcta-text h2{margin-bottom:8px}
.blogcta-btn{flex:none; align-self:center}
@media(max-width:560px){ .blogcta-btn{width:100%} }

/* ===================== 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)}

/* ===================== GITHUB BUTTON ===================== */
.btn-gh{gap:8px}
.btn-gh svg{flex:none; margin-top:-1px}

/* ===================== DEPLOYMENT-MODE CTAs ===================== */
/* HOSTED_STUDIO flag is stamped on <html> at serve time. Default / absent =
   hosted (login + signup, for a self-hoster using their own instance). When the
   public v1 marketing site sets HOSTED_STUDIO=false (data-hosted-studio="0"),
   login/signup CTAs hide and the self-host (→ GitHub) CTAs take their place. */
.cta-selfhost{display:none}
html[data-hosted-studio="0"] .cta-hosted{display:none}
html[data-hosted-studio="0"] a.cta-selfhost{display:inline-flex}
html[data-hosted-studio="0"] div.cta-selfhost{display:block}

/* ===================== OPEN SOURCE / SELF-HOST ===================== */
.sect-oss{padding-top:0}
.oss-card{max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:1.02fr .98fr; gap:0;
  border:1px solid var(--line-hi); border-radius:18px; overflow:hidden;
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(155,108,242,.10), transparent 56%),
    linear-gradient(180deg, rgba(29,20,48,.42), rgba(19,13,31,.72));
  box-shadow:0 50px 130px -60px rgba(155,108,242,.16), 0 30px 70px -40px rgba(0,0,0,.85)}

/* left column — pitch, providers, CTA */
.oss-copy{padding:clamp(26px,3.4vw,40px); display:flex; flex-direction:column; gap:22px;
  border-right:1px solid var(--line)}
.oss-points{list-style:none; display:flex; flex-direction:column; gap:16px}
.oss-points li{display:flex; gap:13px; align-items:flex-start;
  font-size:.92rem; color:var(--bone-dim); line-height:1.5}
.oss-points li b{color:var(--bone); font-weight:700}
.oss-ic{flex:none; width:34px; height:34px; border-radius:9px; margin-top:1px;
  display:flex; align-items:center; justify-content:center; color:var(--accent-hi);
  background:var(--accent-glow); border:1px solid var(--accent-dim)}
.oss-ic svg{width:18px; height:18px}

.oss-byok{display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding-top:20px; border-top:1px solid var(--line)}
.oss-byok-lbl{font-size:.54rem; letter-spacing:.2em; color:var(--bone-faint);
  margin-right:4px}
.oss-prov{font-size:.62rem; letter-spacing:.04em; color:var(--bone);
  border:1px solid var(--line-hi); border-radius:999px; padding:6px 12px;
  background:rgba(14,10,22,.6); transition:border-color .15s, color .15s}
.oss-prov:hover{border-color:var(--accent-dim); color:var(--accent-hi)}

.oss-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:2px}

/* right column — terminal window */
.oss-term{display:flex; flex-direction:column; background:var(--ink);
  min-width:0}
.oss-term-bar{display:flex; align-items:center; gap:7px; padding:11px 15px;
  background:var(--panel2); border-bottom:1px solid var(--line)}
.ot-dot{width:9px; height:9px; border-radius:50%; background:var(--line-hi); flex:none}
.ot-dot:nth-child(1){background:#f4524d66}
.ot-dot:nth-child(2){background:#ffb45466}
.ot-dot:nth-child(3){background:#3ddc9766}
.ot-title{margin-left:8px; font-size:.56rem; letter-spacing:.14em;
  color:var(--bone-faint); text-transform:uppercase}
.oss-term-body{padding:20px 20px 22px; margin:0; font-size:.74rem; line-height:1.95;
  color:var(--bone); white-space:pre-wrap; word-break:break-word; flex:1;
  overflow-x:auto}
.ot-p{color:var(--accent-hi); user-select:none}
.ot-cmt{color:var(--bone-faint)}
.ot-ok{color:var(--green)}

/* pricing — dual action row inside the early-access card */
.price-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.price-actions .btn{flex:0 1 auto}

/* footer license link + faq inline code */
.foot .copy a{color:var(--bone-dim); text-decoration:underline; text-underline-offset:2px}
.foot .copy a:hover{color:var(--accent-hi)}
.faq-a code{font-family:'IBM Plex Mono',monospace; font-size:.84em;
  background:var(--raise); border:1px solid var(--line-hi); border-radius:5px;
  padding:1px 6px; color:var(--accent-hi)}
.faq-a a{color:var(--bone); text-decoration:underline; text-underline-offset:2px}
.faq-a a:hover{color:var(--accent-hi)}

@media(max-width:860px){
  .oss-card{grid-template-columns:1fr}
  .oss-copy{border-right:none; border-bottom:1px solid var(--line)}
  .oss-term-body{font-size:.68rem}
}

/* ===================== 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}
}