/* ══════════════════════════════
   HERO SECTION
══════════════════════════════ */

#hero {
  align-items: center;
  text-align: center;
  padding-top: var(--nav-h);
}

/* Background gradient animation */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(
    125deg,
    #0A0E17, #0D2B55, #1A4A7A,
    #2a6494, #1A4A7A, #0D2B55, #0A0E17
  );
  background-size: 300% 300%;
  animation: flow 14s ease infinite;
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 110% 80% at 50% 10%, rgba(126,200,227,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 90%  70% at 50% 90%, rgba(10,14,23,0.6)    0%, transparent 60%);
}

/* Floating emoji decorations */
.hero-decor {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden; z-index: 1;
}
.decor-item {
  position: absolute;
  font-size: clamp(28px, 6vw, 80px);
  opacity: 0.06;
  animation: floatDecor 25s ease-in-out infinite;
  user-select: none;
}

/* Content */
.hero-content {
  position: relative; z-index: 2;
  padding: 0 20px;
  max-width: 900px; width: 100%;
}

.hero-content h1 {
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(52px, 12vw, 130px);
  font-weight: 900; line-height: 0.92; letter-spacing: -3px;
  animation: fadeUp 0.9s 0.15s ease both;
}
.hero-content h1 .blue { color: var(--sky-mid); }

.hero-desc {
  font-size: clamp(15px, 2.2vw, 18px);
  max-width: 680px; margin: 20px auto 0;
  color: rgba(255,255,255,0.75);
  min-height: 56px; line-height: 1.6;
  opacity: 0;
  animation: fadeInDesc 0.6s 0.4s forwards;
}

/* Typing cursor */
#heroCursor {
  display: inline-block;
  width: 3px; height: 1.1em;
  background: var(--sky-mid);
  margin-left: 4px;
  vertical-align: middle;
  animation: blink 0.75s step-end infinite;
  border-radius: 1px;
}

.hero-cta {
  margin-top: 44px;
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  animation: fadeUp 0.9s 0.45s ease both;
}

/* ── ANIMATIONS ── */
@keyframes flow {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
@keyframes floatDecor {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%       { transform: translateY(-28px) rotate(6deg); }
}
@keyframes fadeInDesc { to { opacity: 1; } }
@keyframes blink      { 50% { opacity: 0; } }

/* ── RESPONSIVE ── */
@media (max-width: 700px) {
  .hero-content h1 { letter-spacing: -2px; }
  .hero-cta        { gap: 12px; }
}