#hero {
  height: 100vh;
  position: relative;
  overflow: hidden;
  padding-top: var(--nh);
  display: flex;
  align-items: center;
  /* GSAP will pin this section + extend scroll height */
}

#hero-canvas {
  position: absolute;
  top: 50%;
  right: -12%;
  transform: translateY(-50%);
  width: 62vw;
  max-width: 860px;
  height: auto;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 1;
}

/* FIX 5: Radial atmospheric glow behind the globe */
#hero::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -5%;
  transform: translateY(-50%);
  width: 80vw;
  max-width: 1100px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(0, 170, 255, 0.20) 0%,
    rgba(0, 170, 255, 0.08) 30%,
    rgba(0, 170, 255, 0.03) 50%,
    transparent 80%
  );
  filter: blur(40px);
  pointer-events: none;
  z-index: 1;
}

/* Add a secondary sharper glow for the core */
#hero::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  width: 40vw;
  max-width: 600px;
  aspect-ratio: 1;
  background: radial-gradient(
    circle at center,
    rgba(0, 255, 136, 0.12) 0%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 10;
  margin-left: 5%;
  max-width: 800px;
  /* will-change set by GSAP during pin */
}

/* ── Hero Headline ───────────────────────── */
.hero-headline-accent {
  color: var(--accent);
  text-shadow: 0 0 20px rgba(0, 170, 255, 0.3),
               0 0 40px rgba(0, 170, 255, 0.15);
}
.hero-headline {
  font-family: var(--fd);
  font-weight: 900;
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 16px 0;
  color: white;
}

/* Bracket corners around content block */
.hero-brackets {
  position: absolute;
  inset: -28px;
  pointer-events: none;
}
.bracket {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--accent-border);
  opacity: 0;               /* animates in via Phase 2 JS */
  transition: opacity 0.4s;
}
.bracket--tl { top: 0;    left: 0;  border-right: none; border-bottom: none; }
.bracket--tr { top: 0;    right: 0; border-left: none;  border-bottom: none; }
.bracket--bl { bottom: 0; left: 0;  border-right: none; border-top: none; }
.bracket--br { bottom: 0; right: 0; border-left: none;  border-top: none; }
.hero-content:hover .bracket { opacity: 0.6; }

/* Typer line */
#typer  { font-family: var(--fm); font-size: 13px; color: var(--accent); opacity: 0.8; height: 20px; margin-bottom: 24px; }
.cursor { display: inline-block; width: 8px; height: 2px; background: var(--accent); animation: blink 1s infinite; margin-left: 4px; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

@media (max-width: 1024px) {
  #hero-canvas {
    width: 85vw;
    right: -15%;
    top: 60%;
  }
  
  #hero::after { width: 100vw; right: -10%; top: 60%; }
  #hero::before { width: 50vw; right: 0; top: 60%; }

  .hero-content {
    margin-left: 8%;
    max-width: 700px;
  }
}

@media (max-width: 768px) {
  #hero {
    flex-direction: column;
    justify-content: flex-start;
    padding-top: calc(var(--nh) + 40px);
    height: auto;
    min-height: 100svh;
    position: relative;
    overflow-x: hidden;
    overflow-y: clip;
  }

  #hero-canvas {
    position: absolute;
    top: 50%;
    left: 18vw;
    transform: translateY(-50%);
    width: 130vw;
    height: 130vw;
    max-width: none;
    max-height: none;
    right: unset;
    bottom: unset;
    aspect-ratio: 1;
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    margin: 0;
    order: 0;
  }

  /* Outer glow — right-aligned, behind canvas */
  #hero::after {
    width: 150vw;
    height: 150vw;
    max-width: none;
    right: unset;
    bottom: unset;
    top: 50%;
    left: 10vw;
    transform: translateY(-50%);
    background: radial-gradient(
      circle at center,
      rgba(0, 170, 255, 0.09) 0%,
      transparent 65%
    );
    filter: blur(50px);
    z-index: 0;
  }

  /* Inner glow — right-aligned, tighter */
  #hero::before {
    width: 100vw;
    height: 100vw;
    max-width: none;
    right: unset;
    bottom: unset;
    top: 50%;
    left: 25vw;
    transform: translateY(-50%);
    background: radial-gradient(
      circle at center,
      rgba(0, 170, 255, 0.18) 0%,
      transparent 70%
    );
    z-index: 1;
  }

  .hero-content {
    margin: 0 5%;
    text-align: left;
    max-width: 600px;
    order: 1;
    position: relative;
    z-index: 2;            /* above canvas (z-index: 1) — text stays readable */
    padding-top: 2rem;
  }

  .hero-headline {
    font-size: clamp(40px, 12vw, 64px);
  }

  .hero-cta {
    flex-direction: column;
    gap: 12px;
  }

  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  #hero {
    padding-top: calc(var(--nh) + 20px);
  }

  #hero-canvas {
    opacity: 1;
    max-width: none;
    max-height: none;
    top: 50%;
    left: 18vw;
    transform: translateY(-50%);
    right: unset;
    bottom: unset;
    width: 130vw;
    height: 130vw;
  }

  .mobile-break {
    display: block;
  }

  #typer {
    display: none;
  }
}