:root {
  /* --- MOUNT OLYMPUS AUTHORITY PALETTE --- */
  --divine-bg-deep: #161824;
  --divine-bg-surface: #202436;
  --divine-bg-card: #272C42;

  /* Sovereign Gold Accents & Borders */
  --divine-gold-primary: #F9E7B9;
  --divine-gold-accent: #E5C158;
  --divine-gold-glow: rgba(249, 231, 185, 0.4);

  /* Text & Pure Light */
  --divine-text-main: #FAF8F5;
  --divine-text-muted: #B8BCCF;
  --divine-light-beam: #FFFFFF;

  --divine-border: rgba(229, 193, 88, 0.5);
  --divine-border-hover: rgba(249, 231, 185, 1);
}

/* --- BASE APPLICATION --- */
body {
  background-color: var(--divine-bg-deep);
  color: var(--divine-text-main);
  font-family: 'Cinzel', 'Times New Roman', serif;
  position: relative;
  overflow-x: hidden;
  transition: background-color 0.5s ease;
}

/* --- FALLING GOLDEN LIGHT BITS LAYER --- */
.divine-sparkle-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}

.divine-sparkle {
  position: absolute;
  top: -20px;
  width: 6px;
  height: 6px;
  background-color: var(--divine-gold-primary);
  border-radius: 50%;
  box-shadow: 0 0 10px 2px var(--divine-gold-accent), 0 0 15px var(--divine-light-beam);
  opacity: 0;
  animation: lightFall linear infinite;
}

.divine-sparkle:nth-child(1) { left: 10%; animation-duration: 9s; animation-delay: 0s; width: 5px; height: 5px; }
.divine-sparkle:nth-child(2) { left: 25%; animation-duration: 6s; animation-delay: 2s; width: 8px; height: 8px; }
.divine-sparkle:nth-child(3) { left: 40%; animation-duration: 11s; animation-delay: 1s; width: 4px; height: 4px; }
.divine-sparkle:nth-child(4) { left: 55%; animation-duration: 7s; animation-delay: 4s; width: 6px; height: 6px; }
.divine-sparkle:nth-child(5) { left: 70%; animation-duration: 8s; animation-delay: 1.5s; width: 7px; height: 7px; }
.divine-sparkle:nth-child(6) { left: 85%; animation-duration: 10s; animation-delay: 3s; width: 5px; height: 5px; }
.divine-sparkle:nth-child(7) { left: 95%; animation-duration: 6.5s; animation-delay: 0.5s; width: 6px; height: 6px; }

@keyframes lightFall {
  0% { transform: translateY(-20px) scale(0.8); opacity: 0; }
  15% { opacity: 0.9; }
  85% { opacity: 0.9; }
  100% { transform: translateY(105vh) scale(1.2); opacity: 0; }
}

/* --- OLYMPIAN HERO BANNER --- */
header, .hero-banner {
  background: radial-gradient(circle at center, var(--divine-bg-surface) 0%, var(--divine-bg-deep) 100%);
  border-bottom: 2px solid var(--divine-gold-accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 25px var(--divine-gold-glow);
  padding: 50px 20px;
  text-align: center;
  position: relative;
  transition: all 0.5s ease;
}

header h1, .hero-banner h1 {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--divine-gold-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px var(--divine-gold-glow);
  font-size: 3.5rem;
  letter-spacing: 0.15em;
  margin: 10px 0;
}

/* --- WIDER MAIN CONTAINER FRAME --- */
main, .main-container {
  max-width: 1160px;
  margin: 40px auto;
  padding: 40px;
  background-color: var(--divine-bg-surface);
  border: 2px solid var(--divine-gold-accent);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.6), inset 0 0 30px var(--divine-gold-glow);
  border-radius: 6px;
  position: relative;
  z-index: 2;
  transition: all 0.5s ease;
}

/* --- HALLOWED CARDS --- */
.hallowed-card, 
.card, 
section {
  background-color: var(--divine-bg-card);
  border: 1px solid var(--divine-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 0 15px var(--divine-gold-glow);
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  border-radius: 4px;
  padding: 24px;
  margin-bottom: 24px;
}

.hallowed-card:hover {
  border-color: var(--divine-border-hover);
  box-shadow: 0 12px 30px var(--divine-gold-glow), inset 0 0 20px var(--divine-gold-glow);
  transform: translateY(-4px);
}

/* --- 3D GOD CARD PERSPECTIVE --- */
.divine-3d-wrapper {
  perspective: 1000px;
}

.god-card-3d {
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

/* --- TYPOGRAPHY & HEADERS --- */
h2, h3, .divine-title {
  color: var(--divine-gold-primary);
  text-shadow: 0 0 10px var(--divine-gold-glow);
  letter-spacing: 0.1em;
  font-weight: 600;
}

p, .description {
  color: var(--divine-text-muted);
  line-height: 1.7;
}

/* --- FOOTER STYLING --- */
footer, .hallowed-footer {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--divine-border);
  font-size: 0.85rem;
  color: var(--divine-text-muted);
}

/* --- INTERACTIVE ELEMENTS --- */
a, .explore-btn {
  color: var(--divine-gold-primary);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

a:hover {
  color: var(--divine-light-beam);
  text-shadow: 0 0 10px var(--divine-gold-primary);
}