/* ── HERO ── */
#hero{position:relative;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}
#hero-canvas{position:absolute;inset:0;z-index:0}
.hero-vignette{position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse at center,transparent 30%,var(--bg) 80%);pointer-events:none}
.hero-glow{position:absolute;top:50%;left:50%;width:600px;height:600px;transform:translate(-50%,-50%);z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(66,133,244,0.08) 0%,transparent 60%);animation:heroGlowPulse 4s ease-in-out infinite}
@keyframes heroGlowPulse{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}}

.hero-content{position:relative;z-index:2;text-align:center;padding:0 2rem}
.hero-tag{font-size:0.85rem;letter-spacing:4px;text-transform:uppercase;color:var(--gblue);margin-bottom:2rem;
  opacity:0;animation:fadeSlideUp .8s .3s forwards}
.hero-title{font-family:var(--font-display);font-weight:700;font-size:clamp(3.5rem,10vw,9rem);line-height:0.95;letter-spacing:-2px;margin-bottom:1.5rem;
  opacity:0;animation:fadeSlideUp .8s .5s forwards;position:relative}
.hero-title .outline{-webkit-text-stroke:2px var(--gblue);color:transparent;display:block}
.hero-title .solid{color:var(--text);display:block;position:relative}

/* ── GLITCH EFFECT ── */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.glitch::before{color:var(--gblue);z-index:-1;animation:glitch1 3s infinite linear alternate-reverse}
.glitch::after{color:var(--gyellow);z-index:-2;animation:glitch2 2s infinite linear alternate-reverse}
@keyframes glitch1{
  0%,90%,100%{clip-path:inset(0 0 0 0);transform:translate(0)}
  92%{clip-path:inset(20% 0 60% 0);transform:translate(-3px,1px)}
  94%{clip-path:inset(50% 0 20% 0);transform:translate(3px,-1px)}
  96%{clip-path:inset(70% 0 5% 0);transform:translate(-2px,2px)}
  98%{clip-path:inset(10% 0 70% 0);transform:translate(2px,-2px)}
}
@keyframes glitch2{
  0%,88%,100%{clip-path:inset(0 0 0 0);transform:translate(0)}
  90%{clip-path:inset(30% 0 40% 0);transform:translate(4px,1px)}
  93%{clip-path:inset(60% 0 15% 0);transform:translate(-3px,-1px)}
  95%{clip-path:inset(5% 0 80% 0);transform:translate(2px,3px)}
  97%{clip-path:inset(40% 0 30% 0);transform:translate(-4px,-2px)}
}

.hero-sub{font-size:clamp(0.95rem,1.5vw,1.15rem);color:var(--text2);max-width:580px;margin:0 auto 3rem;min-height:3.5em;
  opacity:0;animation:fadeSlideUp .8s .8s forwards}
.hero-cta{display:inline-flex;align-items:center;gap:0.75rem;padding:1rem 2.5rem;border:1px solid var(--gblue);color:var(--gblue);
  font-family:var(--font-body);font-size:0.85rem;letter-spacing:2px;text-transform:uppercase;text-decoration:none;
  background:transparent;transition:all .4s;opacity:0;animation:fadeSlideUp .8s 1s forwards;position:relative;overflow:hidden}
.hero-cta::before{content:'';position:absolute;inset:0;background:var(--gblue);transform:translateX(-101%);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.hero-cta:hover::before{transform:translateX(0)}
.hero-cta:hover{color:var(--bg);box-shadow:0 0 40px var(--gblue-glow)}
.hero-cta span{position:relative;z-index:1}

.scroll-hint{position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:0.5rem;
  opacity:0;animation:fadeSlideUp .8s 1.2s forwards}
.scroll-hint span{font-size:0.85rem;letter-spacing:3px;text-transform:uppercase;color:var(--text3)}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--gblue),transparent);animation:scrollPulse 2s infinite}