body { font-family: 'DM Sans', sans-serif; }

/* ── HERO GRADIENT GLASS ── */
.hero-section {
  position: relative;
  overflow: hidden;
}

/* Soft ambient mesh gradient */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(99,102,241,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 80%, rgba(59,130,246,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(168,85,247,0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.dark .hero-section::before {
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(99,102,241,0.13) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 80%, rgba(59,130,246,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(168,85,247,0.08) 0%, transparent 60%);
}

/* Floating color orbs */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
  z-index: 0;
  animation: orbFloat 8s ease-in-out infinite;
}

.hero-orb-1 {
  width: 520px;
  height: 420px;
  top: -80px;
  left: -120px;
  background: radial-gradient(circle, rgba(99,102,241,0.16) 0%, rgba(139,92,246,0.09) 50%, transparent 70%);
  animation-duration: 9s;
}
.hero-orb-2 {
  width: 460px;
  height: 380px;
  top: 60px;
  right: -100px;
  background: radial-gradient(circle, rgba(59,130,246,0.14) 0%, rgba(14,165,233,0.08) 50%, transparent 70%);
  animation-duration: 11s;
  animation-delay: -3s;
}
.hero-orb-3 {
  width: 320px;
  height: 280px;
  bottom: -40px;
  left: 38%;
  background: radial-gradient(circle, rgba(168,85,247,0.12) 0%, rgba(236,72,153,0.07) 50%, transparent 70%);
  animation-duration: 13s;
  animation-delay: -6s;
}

.dark .hero-orb-1 { background: radial-gradient(circle, rgba(99,102,241,0.22) 0%, rgba(139,92,246,0.13) 50%, transparent 70%); }
.dark .hero-orb-2 { background: radial-gradient(circle, rgba(59,130,246,0.20) 0%, rgba(14,165,233,0.11) 50%, transparent 70%); }
.dark .hero-orb-3 { background: radial-gradient(circle, rgba(168,85,247,0.16) 0%, rgba(236,72,153,0.09) 50%, transparent 70%); }

/* Glass panel layer */
.hero-glass-panel {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.26);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  pointer-events: none;
  z-index: 1;
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 60%, rgba(255,255,255,0.6) 100%);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 60%, rgba(255,255,255,0.6) 100%);
}
.dark .hero-glass-panel {
  background: rgba(10,10,20,0.20);
}

@keyframes orbFloat {
  0%, 100% { transform: translateY(0px) scale(1); }
  33%       { transform: translateY(-18px) scale(1.04); }
  66%       { transform: translateY(10px) scale(0.97); }
}
.font-serif { font-family: 'DM Serif Display', serif; }
.nav-blur { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.65s ease forwards; opacity: 0; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.32s; }
.delay-4 { animation-delay: 0.46s; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }