/* ===== Tokens ===== */
:root{
  --canvas:#0b0a0a;
  --panel:#17151a;
  --panel-2:#1d1a20;
  --line:rgba(255,255,255,0.10);
  --line-soft:rgba(255,255,255,0.06);
  --accent:#f3f1ec;
  --text:#f3f1ec;
  --text-dim:#a9a39c;
  --text-dimmer:#6f6a66;
  --radius:18px;
  --radius-sm:10px;
  --ff-display:"Space Grotesk",system-ui,sans-serif;
  --ff-body:"Manrope",system-ui,sans-serif;
  --ff-mono:"Space Mono",monospace;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:clip;background:var(--canvas)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--ff-body);
  color:var(--text);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
input,textarea{font:inherit;color:inherit}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--accent);color:var(--canvas);
  padding:10px 16px;border-radius:0 0 8px 0;z-index:999;
}
.skip-link:focus{left:0}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:860px}

.eyebrow{
  font-family:var(--ff-mono);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin:0 0 14px;
}

.h2{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:clamp(1.8rem,4vw,2.8rem);
  line-height:1.12;
  letter-spacing:-0.01em;
  margin:0 0 18px;
  max-width:18ch;
}

.lede{
  font-size:1.02rem;
  color:var(--text-dim);
  max-width:56ch;
  margin:0 0 40px;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 24px;border-radius:999px;font-weight:600;font-size:0.92rem;
  transition:transform .35s var(--ease),background-color .25s,border-color .25s,color .25s;
  white-space:nowrap;
}
.btn-primary{background:var(--accent);color:var(--canvas)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-secondary{border:1px solid var(--line);color:var(--text)}
.btn-secondary:hover{border-color:rgba(255,255,255,0.3);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line);padding:9px 18px;font-size:0.85rem}
.btn-ghost:hover{border-color:rgba(255,255,255,0.3)}

/* ===== Nav ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:16px 0;
  background:linear-gradient(to bottom, rgba(11,10,10,0.75), transparent);
  backdrop-filter:blur(0px);
  transition:background-color .3s, backdrop-filter .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(11,10,10,0.72);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav-inner{
  max-width:1180px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:9px}
.brand-mark{width:22px;height:22px;color:var(--accent)}
.brand-mark svg{width:100%;height:100%}
.brand-name{font-family:var(--ff-display);font-weight:700;font-size:1.02rem;letter-spacing:-0.01em}
.brand-ai{color:var(--text-dim);font-weight:500}
.nav-links{display:flex;gap:28px;font-size:0.88rem;color:var(--text-dim)}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-cta{display:inline-flex}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:6px}
.nav-toggle span{width:20px;height:1.5px;background:var(--text)}
.nav-mobile{
  display:none;flex-direction:column;gap:18px;padding:20px 24px 26px;
  background:rgba(11,10,10,0.97);border-top:1px solid var(--line);
}
.nav-mobile a{font-size:0.95rem;color:var(--text-dim)}
.nav-mobile .btn{margin-top:6px;width:fit-content}
.nav.open .nav-mobile{display:flex}

@media (max-width:860px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:flex}
}

/* ===== Hero pin + scrub stage ===== */
.hero-pin{
  position:relative;
  height:580vh;
}
.hero-stage{
  position:sticky;top:0;left:0;
  height:100svh;width:100%;
  overflow:hidden;
  background:#050505;
}
.hero-video,.hero-static{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  will-change:transform;
  transform:translateZ(0);
}
/* Canvas target: object-fit doesn't apply to drawImage pixels, so cover-fit
   math happens in JS. The poster shows as a CSS background until the first
   real frame paints over it. */
canvas.hero-video{
  background-image:url("hero-poster.jpg");
  background-size:cover;
  background-position:center;
}
.hero-video-source{display:none}
.hero-static{display:none}
.hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.35) 38%, rgba(5,5,5,0.15) 60%, rgba(5,5,5,0.5) 100%);
  pointer-events:none;
}
.hero-scrim-radial{
  background:radial-gradient(68% 58% at 50% 38%, rgba(5,5,5,0.66) 0%, rgba(5,5,5,0.3) 50%, transparent 78%);
}
.hero-grain{
  position:absolute;inset:0;pointer-events:none;opacity:0.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-top{
  position:absolute;top:0;left:0;right:0;z-index:5;
  padding:96px 24px 0;text-align:center;
}
.hero-top .eyebrow{margin:0;color:rgba(243,241,236,0.7)}

.hero-bands{
  position:absolute;top:0;left:0;right:0;height:58%;z-index:4;
  display:flex;align-items:center;justify-content:center;
  padding:0 24px;
  pointer-events:none;
}
.band{
  position:absolute;max-width:720px;text-align:center;
  opacity:0;transform:translateY(14px);
  transition:none;
}
/* Phone chapter: the clip's own "StarStream AI / Answering" label sits in
   the middle of the frame, so this caption is pinned higher, in the clear
   dark space above the phone, instead of the usual vertically-centered spot. */
.band[data-band="1"]{
  top:28%;
  left:0;right:0;
  margin:0 auto;
}

/* Narrow/short viewports: captions now also run on phones (scrub is no
   longer desktop-only), so give them clearance from the fixed top eyebrow
   instead of the desktop-tuned centering, which sits too high here. */
@media (max-width:480px), (max-height:700px){
  .hero-bands{ top:132px; height:calc(58% - 132px); }
  .band[data-band="1"]{ top:150px; }
}
.band-eyebrow{
  font-family:var(--ff-mono);font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(243,241,236,0.55);margin:0 0 14px;
  text-shadow:0 2px 20px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,0.95);
}
.band h2{
  font-family:var(--ff-display);font-weight:700;
  font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.1;letter-spacing:-0.01em;
  margin:0 0 14px;
  text-shadow:0 4px 28px rgba(0,0,0,0.92), 0 1px 4px rgba(0,0,0,0.95);
}

.hero-bottom{
  position:absolute;bottom:0;left:0;right:0;z-index:5;
  padding:0 24px 72px;text-align:center;
  opacity:0;
  transition:none;
}
.hero-headline{
  font-family:var(--ff-display);font-weight:700;
  font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.12;letter-spacing:-0.01em;
  margin:0 0 12px;max-width:26ch;margin-left:auto;margin-right:auto;
  text-shadow:0 4px 28px rgba(0,0,0,0.92), 0 1px 4px rgba(0,0,0,0.95);
}
.hero-subhead{
  font-size:0.96rem;color:rgba(243,241,236,0.7);max-width:46ch;margin:0 auto 24px;
  text-shadow:0 2px 18px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,0.95);
}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.hero-stat{
  font-size:0.8rem;color:rgba(243,241,236,0.55);
  display:flex;align-items:center;gap:8px;justify-content:center;margin:0;
}
.hero-stat .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}

.scroll-cue{
  position:absolute;top:50%;right:28px;z-index:5;
  transform:translateY(-50%) rotate(90deg);
  display:flex;align-items:center;gap:8px;
  font-family:var(--ff-mono);font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(243,241,236,0.45);
}
.scroll-cue span{width:28px;height:1px;background:rgba(243,241,236,0.45)}

/* word/char split engine */
.split-line{opacity:1}
.w,.c{
  display:inline-block;
  transform:translate(calc(var(--jx,0) * (1 - var(--k,0))),calc(var(--jy,8px) * (1 - var(--k,0))));
  opacity:calc(var(--k,0));
  transition:opacity .5s var(--ease) var(--th,0s), transform .6s var(--ease) var(--th,0s);
  will-change:transform,opacity;
}
.w{margin-right:0.26em}

/* ===== Static hero (gated) ===== */
.static-mode .hero-video{display:none}
.static-mode .hero-static{display:block}
.static-mode .band{display:none}
.static-mode .hero-bands{display:none}
.static-mode .scroll-cue{display:none}
.static-mode .hero-bottom{opacity:1 !important;transform:none !important;pointer-events:auto !important}
.static-mode .w,.static-mode .c{opacity:1 !important;transform:none !important}

/* ===== Sections ===== */
.section{padding:108px 0}
.section-tint{background:var(--panel)}
.section-cta{background:linear-gradient(180deg, var(--canvas), #100e12)}

@media (max-width:720px){.section{padding:76px 0}}

/* reveal engine */
.reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{transition:none;opacity:1;transform:none}
}

/* ===== Problem / leaks ===== */
.leak-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.leak-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 20px;
}
.leak-tag{
  display:inline-block;font-family:var(--ff-mono);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:10px;
}
.leak-card p{margin:0;font-size:0.92rem;color:var(--text-dim)}
@media (max-width:900px){.leak-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.leak-grid{grid-template-columns:1fr}}

/* ===== Calculator ===== */
.calc-card{
  background:var(--panel-2);border:1px solid var(--line);border-radius:24px;
  padding:34px 30px;
}
.calc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-bottom:28px}
.calc-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:12px}
.calc-field label{font-size:0.78rem;color:var(--text-dim)}
.calc-field .unit{
  margin-left:4px;background:rgba(255,255,255,0.08);border-radius:999px;padding:1px 7px;font-size:0.65rem;
}
.calc-value{font-family:var(--ff-display);font-weight:700;font-size:1.1rem}
input[type="range"]{
  width:100%;height:5px;border-radius:999px;appearance:none;background:rgba(255,255,255,0.1);cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,0.5);transition:transform .2s;
}
input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.1)}
input[type="range"]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--accent)}
.calc-result{
  border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,0.04);
  padding:20px 22px;
}
.calc-result p{margin:0;font-family:var(--ff-display);font-weight:800;font-size:clamp(1.5rem,3vw,2rem)}
.calc-suffix{font-family:var(--ff-body);font-weight:400;font-size:0.9rem;color:var(--text-dim);margin-left:4px}
@media (max-width:760px){.calc-grid{grid-template-columns:1fr}}

/* ===== How it works ===== */
.hiw-layout{display:grid;grid-template-columns:1fr 420px;gap:60px;align-items:center}
.hiw-steps{display:flex;flex-direction:column;gap:30px}
.hiw-step{border-left:2px solid var(--line);padding-left:20px}
.hiw-index{font-family:var(--ff-display);font-weight:700;font-size:0.82rem;color:var(--text-dimmer)}
.hiw-step h3{font-family:var(--ff-display);font-size:1.15rem;font-weight:700;margin:8px 0 6px;letter-spacing:-0.01em}
.hiw-step p{margin:0;font-size:0.92rem;color:var(--text-dim);max-width:40ch}
.loop-frame{
  position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);
  background:#0a0a0a;aspect-ratio:3/4;
}
.loop-frame-wide{aspect-ratio:16/10}
.loop-video{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .hiw-layout{grid-template-columns:1fr;gap:36px}
  .loop-frame{max-width:340px;margin:0 auto}
}

/* ===== Split sections (video + description) ===== */
.split-wrap{display:grid;grid-template-columns:1fr 440px;gap:56px;align-items:center}
.split-reverse .split-wrap{grid-template-columns:440px 1fr}
.split-reverse .split-copy{order:2}
.split-reverse .split-visual{order:1}
.split-copy .eyebrow{margin-bottom:14px}
.split-copy .h2{margin-bottom:16px}
.split-copy .lede{margin-bottom:0;max-width:44ch}
@media (max-width:900px){
  .split-wrap,.split-reverse .split-wrap{grid-template-columns:1fr;gap:32px}
  .split-reverse .split-copy,.split-reverse .split-visual{order:0}
  .loop-frame{max-width:420px;margin:0 auto}
}

/* ===== Features ===== */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feature-card{
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px;
}
.feature-card h3{font-family:var(--ff-display);font-size:1.02rem;font-weight:700;margin:0 0 8px;letter-spacing:-0.01em}
.feature-card p{margin:0;font-size:0.88rem;color:var(--text-dim)}
@media (max-width:900px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.feature-grid{grid-template-columns:1fr}}

/* ===== Beyond ===== */
.beyond-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.beyond-card{
  position:relative;z-index:2;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:18px 16px;transition:border-color .3s,background-color .3s,transform .3s;
}
.beyond-card:hover{border-color:rgba(255,255,255,0.28);background:var(--panel-2);transform:translateY(-3px)}
.beyond-tag{
  display:block;font-family:var(--ff-mono);font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--text-dimmer);margin-bottom:8px;
}
.beyond-card h3{font-family:var(--ff-display);font-size:0.95rem;font-weight:700;margin:0 0 6px}
.beyond-card p{margin:0;font-size:0.8rem;color:var(--text-dim);line-height:1.4}
.beyond-lines{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}
.beyond-lines path{
  fill:none;stroke:var(--accent);stroke-width:1.4;opacity:0;
  transition:opacity .35s ease;
}
.beyond-lines path.show{opacity:0.55}
@media (max-width:760px){.beyond-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.beyond-grid{grid-template-columns:1fr}}

/* ===== Pricing ===== */
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:28px}
.price-card{
  background:var(--panel-2);border:1px solid var(--line);border-radius:20px;padding:28px 24px;
}
.price-card-accent{border-color:rgba(243,241,236,0.35)}
.price-label{
  font-family:var(--ff-mono);font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim);
}
.price-amount{font-family:var(--ff-display);font-weight:800;font-size:1.8rem;margin:10px 0 6px}
.price-detail{margin:0;font-size:0.88rem;color:var(--text-dim)}
.perk-list{display:flex;flex-wrap:wrap;gap:10px 22px}
.perk-list li{
  font-size:0.86rem;color:var(--text-dim);display:flex;align-items:center;gap:8px;
}
.perk-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
@media (max-width:620px){.pricing-grid{grid-template-columns:1fr}}

/* ===== FAQ ===== */
.accordion{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 4px;text-align:left;font-family:var(--ff-display);font-weight:600;font-size:1rem;
}
.acc-icon{
  position:relative;width:18px;height:18px;flex:none;
}
.acc-icon::before,.acc-icon::after{
  content:"";position:absolute;background:var(--text);top:50%;left:50%;
  transform:translate(-50%,-50%);
}
.acc-icon::before{width:14px;height:1.4px}
.acc-icon::after{width:1.4px;height:14px;transition:transform .3s var(--ease)}
.acc-item.open .acc-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc-panel{
  max-height:0;overflow:hidden;transition:max-height .4s var(--ease);
}
.acc-panel p{margin:0;padding:0 4px 22px;font-size:0.92rem;color:var(--text-dim);max-width:56ch}

/* ===== Final CTA ===== */
.cta-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:40px;align-items:start}
.cta-steps li{display:flex;gap:16px;margin-bottom:26px}
.cta-step-n{
  flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:var(--ff-display);font-weight:700;font-size:0.82rem;
}
.cta-steps h3{font-family:var(--ff-display);font-size:1rem;font-weight:700;margin:0 0 4px}
.cta-steps p{margin:0;font-size:0.86rem;color:var(--text-dim)}
.cta-form{
  background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:26px;
}
.form-row{margin-bottom:16px;display:flex;flex-direction:column;gap:7px}
.form-row label{font-size:0.78rem;color:var(--text-dim)}
.form-row input,.form-row textarea{
  background:rgba(255,255,255,0.05);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font-size:0.92rem;resize:vertical;
}
.form-row input:focus,.form-row textarea:focus{outline:1px solid rgba(255,255,255,0.4)}
.form-submit{width:100%;margin-top:4px}
.form-note{min-height:20px;font-size:0.82rem;color:var(--text-dim);margin:10px 0 0}
@media (max-width:860px){.cta-layout{grid-template-columns:1fr}}

/* ===== Footer ===== */
.footer{border-top:1px solid var(--line);padding:56px 0 28px}
.footer-wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-brand p{margin:14px 0 0;font-size:0.86rem;color:var(--text-dim);max-width:34ch}
.footer-col h4{font-family:var(--ff-mono);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dimmer);margin:0 0 14px}
.footer-col a{display:block;font-size:0.88rem;color:var(--text-dim);margin-bottom:10px}
.footer-col a:hover{color:var(--text)}
.footer-bottom{border-top:1px solid var(--line-soft);padding-top:22px}
.footer-bottom p{margin:0;font-size:0.78rem;color:var(--text-dimmer)}
@media (max-width:760px){.footer-wrap{grid-template-columns:1fr;gap:28px}}