/* =========== HERO =========== */
#hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 100%, rgba(139,0,0,0.25) 0%, rgba(45,0,64,0.35) 40%, #000 70%);
}
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
}
.hero-orb{
  position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;
}
.hero-orb-1{
  width:600px;height:600px;
  background:radial-gradient(circle, rgba(139,0,0,0.3), transparent 70%);
  top:-100px;right:-150px;
  animation:orb-drift 12s ease-in-out infinite alternate;
}
.hero-orb-2{
  width:400px;height:400px;
  background:radial-gradient(circle, rgba(93,0,128,0.35), transparent 70%);
  bottom:0;left:-100px;
  animation:orb-drift 15s ease-in-out infinite alternate-reverse;
}
@keyframes orb-drift{from{transform:translate(0,0);}to{transform:translate(40px,30px);}}
#particles-canvas{position:absolute;inset:0;pointer-events:none;}
.hero-content{
  position:relative;z-index:10;
  max-width:1100px;padding:0 48px;
  text-align:center;
}
.hero-eyebrow{
  font-family:var(--font-tech);font-size:11px;letter-spacing:0.3em;
  color:var(--red-bright);text-transform:uppercase;margin-bottom:24px;
  display:inline-flex;align-items:center;gap:12px;
}
.hero-eyebrow::before,.hero-eyebrow::after{
  content:'';width:40px;height:1px;
  background:linear-gradient(90deg,transparent,var(--red-bright));
}
.hero-eyebrow::after{background:linear-gradient(90deg,var(--red-bright),transparent);}
.hero-title{
  font-family:var(--font-display);
  font-size:clamp(60px,12vw,160px);
  line-height:0.92;letter-spacing:0.02em;
  text-transform:uppercase;margin-bottom:32px;
}
.hero-title span.grad{
  background:linear-gradient(135deg,var(--red-neon) 0%,var(--red-bright) 30%,var(--purple-glow) 70%,var(--purple-bright) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-sub{
  font-size:clamp(14px,2vw,18px);color:var(--gray-light);
  max-width:560px;margin:0 auto 48px;
  font-weight:300;line-height:1.8;letter-spacing:0.02em;
}
.hero-sub em{font-style:normal;color:var(--white);}
.hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.btn-primary{
  font-family:var(--font-tech);font-size:11px;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--white);text-decoration:none;
  padding:16px 36px;border-radius:2px;
  background:linear-gradient(135deg,var(--red-bright),var(--purple-mid));
  position:relative;overflow:hidden;transition:all 0.3s;cursor:none;
  box-shadow:0 0 30px rgba(139,0,0,0.4);
}
.btn-primary::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--purple-mid),var(--red-bright));
  opacity:0;transition:opacity 0.3s;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(139,0,0,0.6);}
.btn-primary:hover::before{opacity:1;}
.btn-primary span{position:relative;z-index:1;}
.btn-secondary{
  font-family:var(--font-tech);font-size:11px;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--white);text-decoration:none;
  padding:16px 36px;border-radius:2px;
  border:1px solid rgba(255,255,255,0.15);
  background:var(--glass);backdrop-filter:blur(10px);
  transition:all 0.3s;cursor:none;
}
.btn-secondary:hover{
  border-color:var(--purple-glow);
  box-shadow:0 0 30px rgba(157,0,255,0.2);
  transform:translateY(-2px);
}
.hero-scroll{
  position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--font-tech);font-size:9px;letter-spacing:0.25em;
  color:var(--gray);text-transform:uppercase;
  animation:scroll-bounce 2s ease-in-out infinite;
}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--red-bright),transparent);}
@keyframes scroll-bounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(8px);}}