:root{
  --navy:#000050;
  --ink:#0a0d1a;
  --cream:#f4efe6;
  --fire-a:#ff7a18;
  --fire-b:#ff3d2e;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  color:var(--cream);
  background:#000;
  -webkit-font-smoothing:antialiased;
}

/* ---- scroll-scrub hero ---- */
.scrollzone{height:320vh;position:relative}
.hero{
  position:sticky;top:0;height:100vh;width:100%;
  overflow:hidden;background:#000;
  display:flex;align-items:center;justify-content:center;
}
.hero video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
.hero::after{ /* subtle vignette so text reads */
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 45%,transparent 40%,rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.overlay{
  position:relative;z-index:2;text-align:center;padding:0 6vw;
  max-width:1100px;
}
.eyebrow{
  font-size:clamp(.7rem,1.4vw,.85rem);letter-spacing:.32em;
  text-transform:uppercase;color:#cdd2ff;opacity:.85;margin-bottom:1.1rem;
}
.overlay h1{
  font-size:clamp(2rem,5.4vw,4.4rem);line-height:1.02;font-weight:600;
  letter-spacing:-.02em;text-shadow:0 2px 40px rgba(0,0,0,.6);
}
.overlay .sub{
  margin-top:1.1rem;font-size:clamp(1rem,2vw,1.5rem);font-weight:400;
  color:#dfe3ff;opacity:.9;letter-spacing:.04em;
}
.cta{
  display:inline-block;margin-top:2.2rem;padding:.95rem 2.1rem;
  font-size:1rem;font-weight:600;color:#1a1300;text-decoration:none;
  border-radius:999px;
  background:linear-gradient(100deg,var(--fire-a),var(--fire-b));
  box-shadow:0 8px 30px rgba(255,80,30,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 12px 38px rgba(255,80,30,.5)}
.scrollcue{
  position:absolute;bottom:3vh;left:50%;transform:translateX(-50%);
  z-index:2;font-size:.75rem;letter-spacing:.25em;text-transform:uppercase;
  color:#cdd2ff;opacity:.6;animation:bob 2s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---- after-hero brand strip (light) ---- */
.after{
  background:var(--cream);color:var(--navy);
  padding:14vh 6vw;text-align:center;
}
.after h2{font-size:clamp(1.5rem,3.5vw,2.6rem);font-weight:600;letter-spacing:-.01em;max-width:900px;margin:0 auto}
.after p{margin-top:1.2rem;font-size:1.15rem;line-height:1.6;opacity:.8;max-width:680px;margin-left:auto;margin-right:auto}
.variant-tag{
  position:fixed;top:14px;left:14px;z-index:10;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  background:rgba(0,0,80,.6);color:#fff;padding:.4rem .7rem;border-radius:6px;
  backdrop-filter:blur(6px);
}
@media(prefers-reduced-motion:reduce){
  .scrollzone{height:100vh}
  .scrollcue{display:none}
}