/* ════════════════════════════════════════════════════════════
   PAGE HERO (inner pages)
═════════════════════════════════════════════════════════════ */
.page-hero {
  padding: calc(var(--nav-h) + 100px) 48px 80px;
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}

.page-hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 28px 0 32px;
  max-width: 900px;
  text-transform: uppercase;
}

.page-hero-h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  text-transform: none;
}

.page-hero-body {
  font-size: 17px;
  color: var(--text-2);
  max-width: 600px;
  line-height: 1.85;
  margin-bottom: 32px;
}

@media (max-width: 768px) { .page-hero { padding: calc(var(--nav-h) + 60px) 24px 60px; } }

/* ════════════════════════════════════════════════════════════
   HERO BACKGROUND ATMOSPHERE (cloudy sky)
═════════════════════════════════════════════════════════════ */
.atmosphere {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.atmosphere::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 30%, var(--hero-grad-1) 0%, transparent 70%),
    radial-gradient(ellipse 70% 50% at 70% 50%, var(--hero-grad-2) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 30% 60%, var(--hero-grad-3) 0%, transparent 50%);
  filter: blur(20px);
}
.atmosphere::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 60% 35%, var(--gold-glow) 0%, transparent 30%);
  opacity: 0.35;
  filter: blur(40px);
}

[data-theme="dark"] .atmosphere::after { opacity: 0.5; }

/* Floating particles */
.particles {
  position: absolute; inset: 0;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.4;
  animation: float 12s infinite ease-in-out;
}

@keyframes float {
  0%, 100%   { transform: translateY(0) translateX(0); opacity: 0.4; }
  25%        { transform: translateY(-30px) translateX(10px); opacity: 0.7; }
  50%        { transform: translateY(-15px) translateX(-15px); opacity: 0.3; }
  75%        { transform: translateY(20px) translateX(8px); opacity: 0.5; }
}