/* ============================
   Hero
============================ */
header {
  padding: 1rem 2rem;
  text-align: center;
}
    
.hero {
  padding: 4rem 2rem 6rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      600px 300px at 50% 20%,
      var(--accent-soft),
      transparent 60%
    ),
    radial-gradient(
      500px 250px at 70% 60%,
      color-mix(
        in srgb,
        var(--accent-warm) 25%,
        transparent
      ),
      transparent 65%
    );
  pointer-events: none;
}

.hero-inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}

.hero-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 1.2rem;
}
.hero-logo svg {
  width: 200px;
  height: 200px;
  }

/* Hero Logo Animation */
.hero-logo .site-logo path {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 1;
}

/* Soft ambient glow in hero only */
.hero .logo-wrap {
  filter: drop-shadow(0 0 16px var(--logo-glow));
}

.hero h1 {
  font-size: clamp(1.9rem, 5vw, 3rem);
  letter-spacing: clamp(0.02em, 0.06vw, 0.06em);
  margin: 0 0 1rem;
}

.hero-tagline {
  max-width: 560px;
  margin: 0 auto 2.2rem;
  font-size: 1.05rem;
  opacity: 0.9;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-btn {
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--text);
  border: 2px solid var(--accent-dark);
  transition: transform 0.25s ease, box-shadow 0.25s ease;

  background: var(--panel-soft);
  backdrop-filter: blur(4px);
}

.hero-btn:hover {
transform: translateY(-2px);
  box-shadow:
    0 0 0 2px var(--accent-border),
    0 0 18px var(--accent-glow);
}

.hero-btn.primary {
  border-color: var(--accent-warm);
}
.hero-btn.hero-btn.primary:hover {
  box-shadow:
    0 0 0 2px var(--accent-border-warm),
    0 0 18px var(--accent-glow-warm);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-logo .site-logo path {
    opacity: 0;
    transform: translateY(12px);
    animation: logo-assemble 1.2s var(--motion-ease) forwards;
  }

    .hero-logo .site-logo path:nth-child(odd) {
    transform: translateZ(0) translateY(-20px);
  }

  .hero-logo .site-logo path:nth-child(even) {
    transform: translateZ(0) translateY(20px);
  }

  .hero-logo .site-logo path:nth-child(2) { animation-delay: 80ms; }
  .hero-logo .site-logo path:nth-child(3) { animation-delay: 160ms; }
  .hero-logo .site-logo path:nth-child(4) { animation-delay: 240ms; }

}  

@keyframes logo-assemble {
  to {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}