/* =========================================================
   OPTOPUS Marketing — cinematic scroll zone
   Loaded only on /marketing so it never touches the rest of
   the site. Uses the shared tokens from styles.css and adds
   its own world on top, sampled from the hero footage.
   ========================================================= */

:root{
  --mkt-canvas:#0a0c10;
  --mkt-panel:#14171f;
  --mkt-panel-2:#1b1f29;
  --mkt-accent:#7fe8e0;
  --mkt-accent-hover:#9df2eb;
  --mkt-accent-muted:rgba(127,232,224,.22);
  --mkt-warm:#e8d2a4;
  --mkt-text:#f2f3f5;
  --mkt-text-2:#a4a9b5;
  --mkt-line:rgba(164,169,181,.16);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --mkt-ease:cubic-bezier(.16,1,.3,1);
  --mkt-ease-soft:cubic-bezier(.4,0,.2,1);
}

html.mkt,body.mkt{overflow-x:hidden;overflow-x:clip}
body.mkt{background:var(--mkt-canvas);color:var(--mkt-text);font-family:"Manrope",system-ui,sans-serif}

.mkt h1,.mkt h2,.mkt h3,.mkt .display{font-family:"Syne",system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.02}
.mkt .kicker{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mkt-accent);font-weight:400}

/* ---------- the fixed environment layer ---------- */
.mkt-env{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 78% 12%,rgba(127,232,224,.055),transparent 60%),
    radial-gradient(900px 600px at 12% 82%,rgba(232,210,164,.035),transparent 62%),
    var(--mkt-canvas)}
.mkt-env::after{content:"";position:absolute;inset:-50%;opacity:.5;
  background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.5) .5px,transparent .6px);
  background-size:180px 180px;
  animation:mkt-drift 90s linear infinite;animation-delay:-30s}
@keyframes mkt-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-180px,-180px,0)}}

main.mkt-main{position:relative;z-index:1}

/* =========================================================
   THE SCRUB HERO
   ========================================================= */
.hero-scroll{position:relative;height:640vh}
.hero-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--mkt-canvas)}

.hero-poster{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:opacity .8s var(--mkt-ease-soft)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .7s var(--mkt-ease-soft);will-change:transform;transform:translateZ(0)}
.hero-stage.video-ready .hero-video{opacity:1}
.hero-stage.video-ready .hero-poster{opacity:0}
.hero-stage.video-failed .hero-video{display:none}

/* layer 1 of the legibility system: the always-on base scrim */
.hero-scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%)}
.hero-vignette{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,7,10,.72) 0%,rgba(6,7,10,.1) 26%,rgba(6,7,10,.12) 62%,rgba(6,7,10,.78) 100%)}

/* the loading ring */
.hero-ring{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);width:34px;height:34px;
  color:var(--mkt-accent);opacity:.85;pointer-events:none}
.hero-ring circle{transition:stroke-dashoffset .18s linear;transform:rotate(-90deg);transform-origin:50% 50%}
.hero-stage.video-ready .hero-ring{opacity:0;transition:opacity .5s var(--mkt-ease-soft)}
/* the initial discovery hint: sits above the ring's spot, over the darkest part of
   the vignette; marketing.js adds .is-on (desktop scrub mode, until the visitor
   interacts or the intro has progressed) */
.hero-cue{position:absolute;left:50%;bottom:112px;transform:translateX(-50%);display:flex;
  align-items:center;gap:10px;white-space:nowrap;pointer-events:none;color:var(--mkt-text-2);text-shadow:var(--tshadow);
  font-family:"JetBrains Mono",ui-monospace,monospace;text-transform:uppercase;
  opacity:0;visibility:hidden;transition:opacity .6s var(--mkt-ease-soft),visibility 0s .6s}
.hero-cue.is-on{opacity:.85;visibility:visible;transition:opacity .9s var(--mkt-ease-soft) .9s,visibility 0s .9s}
.hero-cue__t{font-size:.7rem;letter-spacing:.24em}
.hero-cue__arrow{animation:mkt-cue-bob 2.2s var(--mkt-ease-soft) infinite}
@keyframes mkt-cue-bob{0%,100%{transform:translateY(-2px);opacity:.6}50%{transform:translateY(3px);opacity:1}}

/* ---------- caption bands ---------- */
.band{position:absolute;inset:0;display:grid;align-content:center;
  padding:0 clamp(24px,7vw,140px);pointer-events:none;opacity:0;text-shadow:var(--tshadow)}
/* The band scrim has to cover the WHOLE text box, not just its left
   half: a headline that runs to 94% of the stage would otherwise lose
   its right edge to whatever the footage is doing there. Measured
   worst-case contrast drops under 3.5:1 once the combined dark layers
   fall below about 0.50 alpha, so the ellipse is sized to keep every
   glyph inside it. */
.band::before{content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 96% 72% at 44% 50%,rgba(5,6,12,.72) 0%,rgba(5,6,12,.58) 52%,rgba(5,6,12,0) 88%)}
.band>*{position:relative}
.band .btn{text-shadow:none}

.band-line{font-family:"Syne",system-ui,sans-serif;font-weight:800;
  font-size:clamp(2.5rem,6.6vw,5.6rem);line-height:1;letter-spacing:-.03em;
  /* 9ch, not the usual 13 to 16: Syne's zero glyph is about 1.07em wide,
     so a ch here is nearly double a normal font's. Measured, not guessed. */
  max-width:9ch;color:var(--mkt-text)}
/* the closing headline used to be an <h1> and picked up .mkt h1's metrics; keep them exactly */
.band-line--title{line-height:1.02;letter-spacing:-.02em}
.band-line .w{display:inline-block;white-space:nowrap}
.band-line .c{display:inline-block;will-change:transform,opacity}

/* band 1: scatter */
.band[data-entrance="scatter"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
/* band 2: drift-down */
.band[data-entrance="drift"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px))}
/* band 3: grid snap-align */
.band[data-entrance="snap"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3.1,1);opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
/* band 4: staged settle */
.band[data-entrance="settle"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.9,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*22px))}
.band-sub{margin-top:22px;max-width:34ch;font-size:clamp(1rem,1.5vw,1.22rem);line-height:1.5;color:var(--mkt-text);
  opacity:var(--ks,0);transform:translateY(calc((1 - var(--ks,0))*14px))}
.band-cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;pointer-events:auto;
  opacity:var(--kb,0);transform:translateY(calc((1 - var(--kb,0))*14px))}

.mkt-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:999px;
  border:1px solid var(--mkt-accent);background:var(--mkt-accent);color:#04120f;
  font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:.94rem;cursor:pointer;
  transition:background .28s var(--mkt-ease),transform .28s var(--mkt-ease),box-shadow .28s var(--mkt-ease);
  box-shadow:0 10px 40px rgba(127,232,224,.16)}
.mkt-btn:hover{background:var(--mkt-accent-hover);transform:translateY(-2px);box-shadow:0 16px 54px rgba(127,232,224,.26)}
.mkt-btn--ghost{background:transparent;color:var(--mkt-text);border-color:var(--mkt-line);box-shadow:none}
.mkt-btn--ghost:hover{background:rgba(255,255,255,.05);border-color:var(--mkt-accent);color:var(--mkt-text)}

/* the static hero, for phones and reduced motion */
.hero-static{position:absolute;inset:0;display:none;align-content:center;
  padding:0 clamp(24px,7vw,120px);text-shadow:var(--tshadow)}
/* the static hero gets the same legibility treatment the bands get */
.hero-static::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,6,12,.28) 0%,rgba(5,6,12,.72) 42%,rgba(5,6,12,.82) 74%,rgba(5,6,12,.6) 100%)}
.hero-static>*{position:relative}
.hero-static .band-line{max-width:13ch}
.hero-static .band-sub,.hero-static .band-cta{opacity:1;transform:none}

@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero-scroll{height:100vh}
  .hero-stage{position:relative}
  .band,.hero-ring,.hero-cue{display:none}
  .hero-static{display:grid}
  .hero-poster{opacity:1}
}

/* =========================================================
   THE PAGE BELOW
   ========================================================= */
.mkt-section{position:relative;padding:clamp(90px,13vh,170px) clamp(24px,7vw,140px)}
.mkt-inner{max-width:1180px;margin:0 auto}
.mkt-h2{font-size:clamp(2rem,4.6vw,3.7rem);margin:14px 0 0;max-width:18ch}
.mkt-lede{margin:22px 0 0;max-width:56ch;font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.62;color:var(--mkt-text-2)}

/* the current line: one drawn path down the page */
.mkt-current{position:absolute;left:clamp(10px,2.6vw,44px);top:0;bottom:0;width:2px;pointer-events:none}
.mkt-current svg{height:100%;width:2px;overflow:visible}
.mkt-current path{stroke:var(--mkt-accent);stroke-width:1.4;fill:none;opacity:.3;
  stroke-dasharray:var(--len,1000);stroke-dashoffset:calc(var(--len,1000) * (1 - var(--draw,0)))}

/* 6.1 premise */
.mkt-premise{text-align:center;overflow:hidden}
.mkt-premise .mkt-h2{margin-inline:auto;max-width:20ch}
.mkt-premise .mkt-lede{margin-inline:auto;text-align:center}
.mkt-premise-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.3;z-index:-1}
.mkt-premise-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 90% 80% at 50% 50%,rgba(10,12,16,.5) 0%,rgba(10,12,16,.94) 78%)}

/* 6.2 the gap: two columns */
.mkt-gap-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(24px,4vw,64px);margin-top:56px;align-items:start}
.mkt-gap-col h3{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:400;color:var(--mkt-text-2);margin:0 0 20px}
.mkt-gap-col--ours h3{color:var(--mkt-accent)}
.mkt-gap-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mkt-gap-col li{font-size:clamp(1.1rem,2.1vw,1.7rem);font-family:"Syne",system-ui,sans-serif;font-weight:700;
  color:var(--mkt-text-2);opacity:.55;letter-spacing:-.01em}
.mkt-gap-col--ours li{color:var(--mkt-text);opacity:1}
.mkt-gap-rule{width:1px;background:linear-gradient(180deg,transparent,var(--mkt-line) 18%,var(--mkt-line) 82%,transparent)}
.mkt-gap-close{margin-top:52px;font-size:clamp(1.15rem,2.2vw,1.6rem);font-family:"Syne",system-ui,sans-serif;
  font-weight:700;max-width:30ch;line-height:1.25;letter-spacing:-.015em}
.mkt-gap-close em{font-style:normal;color:var(--mkt-accent)}

/* 6.3 the system + the hold */
.mkt-system-track{margin-top:60px;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px)}
.mkt-step{position:relative;padding:26px 22px 24px;border-radius:16px;border:1px solid var(--mkt-line);
  background:linear-gradient(180deg,rgba(27,31,41,.6),rgba(20,23,31,.35));
  transition:border-color .5s var(--mkt-ease),background .5s var(--mkt-ease),transform .5s var(--mkt-ease)}
.mkt-step[data-lit="1"]{border-color:var(--mkt-accent-muted);transform:translateY(-4px);
  background:linear-gradient(180deg,rgba(127,232,224,.09),rgba(20,23,31,.4))}
.mkt-step-n{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.68rem;color:var(--mkt-accent);letter-spacing:.14em}
.mkt-step h3{font-size:clamp(1.05rem,1.8vw,1.45rem);margin:12px 0 0}
.mkt-step p{margin:12px 0 0;font-size:.92rem;line-height:1.55;color:var(--mkt-text-2);
  opacity:0;transform:translateY(8px);transition:opacity .55s var(--mkt-ease),transform .55s var(--mkt-ease)}
.mkt-step[data-lit="1"] p{opacity:1;transform:none}
.mkt-step-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--mkt-accent);
  transform:scaleX(var(--fill,0));transform-origin:left;border-radius:2px;opacity:.9}

.mkt-hold{margin-top:44px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.mkt-hold-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:16px 34px;border-radius:999px;border:1px solid var(--mkt-accent-muted);background:rgba(127,232,224,.06);
  color:var(--mkt-text);font-family:"Manrope",system-ui,sans-serif;font-weight:600;font-size:.95rem;
  cursor:pointer;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}
.mkt-hold-btn::before{content:"";position:absolute;inset:0;background:var(--mkt-accent);opacity:.18;
  transform:scaleX(var(--hold,0));transform-origin:left;transition:transform .08s linear}
.mkt-hold-btn span{position:relative}
.mkt-hold-note{font-size:.85rem;color:var(--mkt-text-2)}

/* 6.4 channels */
.mkt-channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px;margin-top:56px}
.mkt-channel{padding:28px 24px 26px;border-radius:16px;border:1px solid var(--mkt-line);
  background:linear-gradient(180deg,rgba(27,31,41,.5),rgba(20,23,31,.3));
  transition:border-color .4s var(--mkt-ease),transform .4s var(--mkt-ease),background .4s var(--mkt-ease)}
.mkt-channel:hover{border-color:var(--mkt-accent-muted);transform:translateY(-4px);background:linear-gradient(180deg,rgba(127,232,224,.06),rgba(20,23,31,.35))}
.mkt-channel svg{width:34px;height:34px;stroke:var(--mkt-accent);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.mkt-channel h3{font-size:1.14rem;margin:18px 0 0}
.mkt-channel p{margin:10px 0 0;font-size:.93rem;line-height:1.55;color:var(--mkt-text-2)}

/* 6.5 proof */
.mkt-proof{position:relative}
.mkt-proof-panel{margin-top:46px;padding:clamp(30px,4vw,56px);border-radius:22px;
  border:1px solid var(--mkt-line);background:linear-gradient(150deg,rgba(127,232,224,.05),rgba(20,23,31,.55))}
.mkt-proof-panel p{margin:0;max-width:62ch;font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.66;color:var(--mkt-text)}
.mkt-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:36px}
.mkt-metric{padding:20px;border-radius:13px;background:rgba(10,12,16,.5);border:1px solid var(--mkt-line)}
.mkt-metric span{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mkt-accent)}
.mkt-metric strong{display:block;margin-top:10px;font-family:"Syne",system-ui,sans-serif;font-weight:700;
  font-size:1.08rem;color:var(--mkt-text);letter-spacing:-.01em}

/* 6.6 faq */
.mkt-faq{margin-top:48px;display:grid;gap:2px;border-top:1px solid var(--mkt-line)}
.mkt-faq details{border-bottom:1px solid var(--mkt-line)}
.mkt-faq summary{list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;
  font-family:"Syne",system-ui,sans-serif;font-weight:700;font-size:clamp(1.05rem,1.9vw,1.35rem);
  letter-spacing:-.01em;transition:color .3s var(--mkt-ease)}
.mkt-faq summary::-webkit-details-marker{display:none}
.mkt-faq summary:hover{color:var(--mkt-accent)}
.mkt-faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.4px solid var(--mkt-accent);border-bottom:1.4px solid var(--mkt-accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--mkt-ease)}
.mkt-faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.mkt-faq p{margin:0 0 28px;max-width:62ch;font-size:1rem;line-height:1.68;color:var(--mkt-text-2)}

/* 6.7 close */
.mkt-close{position:relative;text-align:center;overflow:hidden}
.mkt-close-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.34;z-index:-1}
.mkt-close-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 88% 82% at 50% 55%,rgba(10,12,16,.42) 0%,rgba(10,12,16,.95) 76%)}
.mkt-close .mkt-h2{margin-inline:auto;max-width:16ch;font-size:clamp(2.3rem,6vw,4.6rem)}
.mkt-close .mkt-lede{margin-inline:auto;text-align:center}
.mkt-close .band-cta{opacity:1;transform:none;justify-content:center;margin-top:40px}

/* ---------- entrances ---------- */
.reveal .r{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--mkt-ease),transform .85s var(--mkt-ease)}
.reveal.in .r{opacity:1;transform:none}
.reveal.in .r:nth-child(2){transition-delay:.09s}
.reveal.in .r:nth-child(3){transition-delay:.18s}
.reveal.in .r:nth-child(4){transition-delay:.27s}
.reveal.done .r,.reveal.done .r:nth-child(2),.reveal.done .r:nth-child(3),.reveal.done .r:nth-child(4){transition-delay:0s!important}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .mkt-gap-grid{grid-template-columns:1fr;gap:34px}
  .mkt-gap-rule{display:none}
  .mkt-system-track{grid-template-columns:repeat(2,1fr)}
  .mkt-current{display:none}
}
@media (max-width:560px){
  .mkt-system-track{grid-template-columns:1fr}
}
@media (max-height:560px){
  .hero-cue,.hero-ring{display:none}
}
@media (pointer:coarse){
  .mkt-btn,.mkt-hold-btn{min-height:44px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .mkt *,.mkt *::before,.mkt *::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
    animation-iteration-count:1!important;transition-delay:0s!important}
  .mkt-env::after{animation:none}
  .reveal .r{opacity:1;transform:none}
  .mkt-current path{stroke-dashoffset:0}
  .mkt-step p{opacity:1;transform:none}
  .hero-cue__arrow{animation:none}
}