/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding-top:104px}
.hero-grid{position:absolute;inset:0;z-index:1;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;mask-image:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent);opacity:.3}

.hero-inner{position:relative;z-index:3;padding-bottom:clamp(32px,4vh,60px);width:100%;display:flex;flex-direction:column;flex:1 0 0}
.hero-tag{display:flex;align-items:center;gap:14px;color:var(--white);margin-bottom:22px}
.hero-tag .dot{width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(255,106,26,.7);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,106,26,.55)}70%{box-shadow:0 0 0 12px rgba(255,106,26,0)}100%{box-shadow:0 0 0 0 rgba(255,106,26,0)}}
.hero-tag span{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--fog)}

.hero h1{font-family:var(--font-display);text-transform:uppercase;margin:0;
  font-size:clamp(48px,10.5vw,168px);line-height:.86;letter-spacing:.002em;
  text-shadow:0 2px 40px rgba(0,0,0,.4)}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line i{display:block;font-style:normal;transform:translateY(110%);animation:riseIn 1s var(--ease-out) forwards}
.hero h1 .line:nth-child(2) i{animation-delay:.12s}
.hero h1 .line:nth-child(3) i{animation-delay:.24s}
.hero h1 .o{color:var(--orange)}
.hero h1 .stroke{color:transparent;-webkit-text-stroke:2px var(--white)}
@keyframes riseIn{to{transform:translateY(0)}}

.hero-row{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-top:auto}
.hero-row .lead{max-width:46ch;opacity:0;animation:fadeUp 1s var(--ease-out) .5s forwards}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:fadeUp 1s var(--ease-out) .65s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.scroll-cue{position:absolute;right:var(--gutter);bottom:clamp(150px,20vh,210px);z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--fog)}
.scroll-cue .mono-sm{writing-mode:vertical-rl}
.scroll-cue .ln{width:1px;height:46px;background:linear-gradient(var(--orange),transparent);position:relative;overflow:hidden}
.scroll-cue .ln::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--orange);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{top:-50%}100%{top:100%}}
@media(max-width:760px){.scroll-cue{display:none}}

/* Hero video brightness boost */
#vDone{filter:brightness(1.3)}