.hero{--bars:6.5vh}
.hero { position:relative; width:100%; height:100vh; min-height:560px; overflow:hidden; background:var(--bg); }
  .hero #scene { position:absolute; inset:0; width:100%; height:100%; display:block; }
  .hero .fade { position:absolute; inset:0; background:#04101e; pointer-events:none; }
  .hero .blue { position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(rgba(160,210,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(160,210,255,.10) 1px,transparent 1px),
      linear-gradient(rgba(160,210,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(160,210,255,.05) 1px,transparent 1px);
    background-size:96px 96px,96px 96px,16px 16px,16px 16px; mix-blend-mode:screen; }
  .hero .vignette { position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse at 62% 52%, transparent 40%, rgba(3,14,28,.7) 100%); }
  .hero .grain { position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
    mix-blend-mode:overlay; opacity:.06; image-rendering:auto; }
  .hero .bar { position:absolute; left:0; right:0; height:var(--bars); background:#04101e; z-index:3;
    transition:transform 1.6s cubic-bezier(.7,0,.2,1); }
  .hero .bar.top { top:0; transform:translateY(-100%); border-bottom:1px solid var(--line); }
  .hero .bar.bottom { bottom:0; transform:translateY(100%); border-top:1px solid var(--line); }
  .hero.go .bar { transform:none; }
  .hero .corner { position:absolute; width:26px; height:26px; border:2px solid var(--accent); z-index:2; pointer-events:none; }
  .hero .corner.tl { top:calc(var(--bars) + 18px); left:18px; border-right:0; border-bottom:0; }
  .hero .corner.tr { top:calc(var(--bars) + 18px); right:18px; border-left:0; border-bottom:0; }
  .hero .corner.bl { bottom:calc(var(--bars) + 18px); left:18px; border-right:0; border-top:0; }
  .hero .corner.br { bottom:calc(var(--bars) + 18px); right:18px; border-left:0; border-top:0; }

  .hero .copy { position:absolute; z-index:2; left:6vw; top:50%; transform:translateY(-50%); max-width:min(560px,88vw); }
  .hero .tag { font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:12px; }
  .hero .tag::after { content:""; width:64px; height:1px; background:var(--accent); }
  .hero h1 { font-family:var(--cond); font-size:clamp(2.4rem,5.6vw,4.8rem); line-height:1; font-weight:700; letter-spacing:.01em; text-transform:uppercase; margin:.45em 0 .4em; }
  .hero h1 span { color:var(--accent); }
  .hero p { font-size:clamp(.9rem,1.3vw,1.05rem); line-height:1.65; color:rgba(200,225,250,.72); max-width:36em; border-left:2px solid var(--accent); padding-left:14px; }
  .hero .btn { display:inline-block; margin-top:1.9em; padding:1em 1.9em; background:var(--accent); color:#0a2540; font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
    clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); transition:filter .15s, transform .15s; }
  .hero .btn:hover { filter:brightness(1.12); transform:translateY(-2px); }
  .hero .copy > * { opacity:0; transform:translateY(24px); transition:opacity 1.1s ease, transform 1.1s ease; }
  .hero.go .copy > * { opacity:1; transform:none; }
  .hero.go .copy > :nth-child(1){ transition-delay:.9s }
  .hero.go .copy > :nth-child(2){ transition-delay:1.2s }
  .hero.go .copy > :nth-child(3){ transition-delay:1.6s }
  .hero.go .copy > :nth-child(4){ transition-delay:2s }

  .hud { position:absolute; z-index:2; right:calc(4vw + 10px); top:calc(var(--bars) + 40px); width:240px; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
    border:1px solid var(--line); background:rgba(6,26,48,.72); padding:12px 14px; opacity:0; transition:opacity 1s ease 2.4s; }
  .hero.go .hud { opacity:1; }
  .hud .hl { display:flex; justify-content:space-between; gap:12px; padding:3px 0; border-bottom:1px dashed rgba(160,210,255,.18); color:rgba(200,225,250,.62); }
  .hud .hl b { color:var(--text); font-weight:600; }
  .hud .hbar { height:6px; margin-top:10px; border:1px solid var(--line); }
  .hud .hbar i { display:block; height:100%; width:0; background:var(--accent); }
  @media (max-width:800px){ .hero .copy { top:calc(var(--bars) + 5vh); transform:none; } .hud { display:none; } }
  .hero .cta{margin-top:1.9em;display:flex;gap:12px;flex-wrap:wrap}
  .hero .cta .btn{margin-top:0}
  .hero .btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line);clip-path:none}
  .hero .btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent);filter:none}