:root{
  --ink:#0a0d07; --ink2:#0f140a;
  --green:#57c93f; --green-d:#3a9a2b;
  --fire:#ff7a1a; --purple:#8a4bff;
  --cream:#f4f0e3; --muted:rgba(244,240,227,.66);
  --edge:rgba(244,240,227,.14);
  --font:'Helvetica Neue',Arial,system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--ink);color:var(--cream);font-family:var(--font);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ---------- fixed cinematic stage ---------- */
#stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--ink)}
#stage .layer{position:absolute;inset:-4% ;background-size:cover;background-position:center;
  opacity:0;will-change:opacity,transform;transform:scale(1.06);
  transition:opacity .12s linear}
#stage .layer[data-i="7"]{background:radial-gradient(120% 90% at 50% 40%,#14200f 0%,#080b05 70%)}
#stage .layer.vid{background:#0a0d07}
#stage .layer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#stage .scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,9,4,.55) 0%,rgba(6,9,4,.18) 28%,rgba(6,9,4,.30) 62%,rgba(6,9,4,.82) 100%)}
#stage .grain{position:absolute;inset:0;pointer-events:none;opacity:.05;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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- progress bar ---------- */
#progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:50;background:rgba(255,255,255,.06)}
#progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--green),var(--fire));transition:transform .1s linear}

/* ---------- scroll panels ---------- */
main{position:relative;z-index:2}
/* each scene spans ~1.9 screens of scroll → slower, more cinematic pacing (matches SPAN in app.js) */
.panel{min-height:190svh;display:flex;align-items:center;
  padding:clamp(1.5rem,6vw,7rem);position:relative}
/* keep the copy in view while the scene scrubs beneath it, on a frosted glass card */
.panel .copy{max-width:560px;position:sticky;top:50%;transform:translateY(-50%);
  opacity:0;transition:opacity .6s cubic-bezier(.2,.7,.2,1);
  background:linear-gradient(150deg,rgba(9,13,6,.62),rgba(9,13,6,.4));
  -webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);
  border:1px solid rgba(255,255,255,.14);border-radius:26px;padding:1.9rem 2rem;
  box-shadow:0 24px 60px rgba(0,0,0,.4)}
.panel.is-active .copy{opacity:1}
/* hero keeps its open, uncarded look */
.panel.hero .copy{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:none;box-shadow:none;padding:0;max-width:640px}
.panel.outro{min-height:100svh}
.panel.outro .copy{position:static;transform:none}

.eyebrow{font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--green);font-weight:700;margin-bottom:1rem}
.panel h2{font-size:clamp(2.3rem,7vw,5rem);line-height:.98;font-weight:800;
  letter-spacing:-.02em;text-transform:uppercase;text-shadow:0 6px 40px rgba(0,0,0,.55)}
.panel p{margin-top:1.2rem;font-size:clamp(1.05rem,2.2vw,1.4rem);line-height:1.5;
  color:var(--cream);max-width:34ch;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.panel p strong{color:var(--fire)}
.pills{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.4rem}
.pills span{font-size:.78rem;letter-spacing:.04em;padding:.42rem .8rem;border:1px solid var(--edge);
  border-radius:999px;color:var(--muted);background:rgba(255,255,255,.03)}

/* ---------- hero ---------- */
.logo{width:min(620px,78vw);height:auto;margin-bottom:1.4rem;
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.55))}
.hero h1{font-size:clamp(2.8rem,9vw,6.5rem);line-height:.94;font-weight:800;letter-spacing:-.03em;
  text-transform:uppercase;text-shadow:0 8px 50px rgba(0,0,0,.6)}
.hero p{max-width:40ch}
.scroll-cue{display:flex;align-items:center;gap:.7rem;margin-top:2.4rem;color:var(--muted);
  font-size:.78rem;letter-spacing:.24em;text-transform:uppercase}
.scroll-cue i{width:22px;height:34px;border:2px solid var(--muted);border-radius:12px;position:relative}
.scroll-cue i::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;border-radius:2px;
  background:var(--green);transform:translateX(-50%);animation:cue 1.5s infinite}
@keyframes cue{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* ---------- outro ---------- */
.outro{justify-content:center;text-align:center}
.outro .copy{max-width:760px;display:flex;flex-direction:column;align-items:center}
.outro p{max-width:52ch}
.cta{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:2rem}
.btn{display:inline-block;padding:.95rem 1.6rem;border-radius:999px;font-weight:700;font-size:.98rem;
  text-decoration:none;color:var(--cream);border:1px solid var(--edge);background:rgba(255,255,255,.04);
  transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.09)}
.btn.primary{background:linear-gradient(90deg,var(--green),var(--green-d));color:#05230a;border:none;
  box-shadow:0 10px 30px rgba(87,201,63,.35)}
.btn.big{font-size:1.15rem;padding:1.15rem 2.2rem}

/* minimal intro header (scroll world) */
.intro-header{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;
  justify-content:space-between;padding:1rem clamp(1rem,4vw,2.4rem);pointer-events:none}
.intro-header a{pointer-events:auto;text-decoration:none}
.intro-header .ih-logo{height:34px;width:auto;filter:drop-shadow(0 3px 12px rgba(0,0,0,.6))}
.intro-header .ih-enter{color:var(--cream);font-weight:700;font-size:.9rem;letter-spacing:.02em;
  padding:.55rem 1.1rem;border:1px solid var(--edge);border-radius:999px;background:rgba(10,13,7,.4);
  backdrop-filter:blur(6px);transition:background .15s ease}
.intro-header .ih-enter:hover{background:rgba(87,201,63,.2)}
.foot{margin-top:2.2rem;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- crawlable SEO mirror (visually hidden, in DOM) ---------- */
[data-sw-seo]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  #stage .layer{transition:opacity .2s linear;transform:none!important}
  .scroll-cue i::after{animation:none}
}