/* =============================================
   Gods and Myths — Promo Website Styles
   Theme: Greek Mythology / Olympus / Dark Luxury
   ============================================= */

:root {
  /* Brand Colors */
  --color-gold-primary: #D4AF37;
  --color-gold-light: #FFF3A0;
  --color-gold-mid: #FFD700;
  --color-gold-dark: #7A5000;
  --color-text-ivory: #F0DFA8;

  /* Background / Surface */
  --color-bg-deep: #060618;
  --color-bg-elevated: #140D3C;
  --color-bg-card: rgba(20, 13, 60, 0.65);
  --color-bg-glass: rgba(20, 13, 60, 0.45);

  /* Semantic */
  --color-accent: #FFD700;
  --color-text-primary: #F0DFA8;
  --color-text-secondary: rgba(240, 223, 168, 0.7);
  --color-text-muted: rgba(240, 223, 168, 0.45);
  --color-border-gold: rgba(212, 175, 55, 0.5);
  --color-border-gold-strong: rgba(212, 175, 55, 0.85);

  /* Gradients */
  --gradient-gold: linear-gradient(135deg, #D4AF37 0%, #FFD700 50%, #FFF3A0 100%);
  --gradient-gold-text: linear-gradient(135deg, #FFF3A0 0%, #D4AF37 50%, #7A5000 100%);
  --gradient-bg-hero: linear-gradient(180deg, #140D3C 0%, #060618 100%);
  --gradient-glass: linear-gradient(135deg, rgba(20, 13, 60, 0.6) 0%, rgba(6, 6, 24, 0.8) 100%);

  /* Typography */
  --font-heading: 'Cinzel Decorative', serif;
  --font-body: 'Inter', sans-serif;

  /* Spacing */
  --radius-sm: 12px;
  --radius-md: 24px;
  --radius-lg: 30px;

  /* Effects */
  --shadow-gold-sm: 0 0 10px rgba(255, 215, 0, 0.15);
  --shadow-gold-md: 0 4px 24px rgba(255, 215, 0, 0.2);
  --shadow-gold-lg: 0 8px 40px rgba(255, 215, 0, 0.3);
  --shadow-gold-glow: 0 0 30px rgba(255, 215, 0, 0.4), 0 0 60px rgba(212, 175, 55, 0.2);
  --text-shadow-gold: 0 0 20px rgba(255, 215, 0, 0.5), 0 0 40px rgba(212, 175, 55, 0.3);

  /* Animation */
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ========== Base ========== */
body {
  font-family: var(--font-body);
  background-color: var(--color-bg-deep);
  color: var(--color-text-primary);
  overflow-x: hidden;
}

/* ========== Hero ========== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('images/hero_bg.webp') center/cover no-repeat, var(--gradient-bg-hero);
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(6,6,24,0.75) 0%, rgba(20,13,60,0.4) 50%, rgba(6,6,24,0.7) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-tagline {
  font-family: var(--font-body);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--color-gold-mid);
}

.hero-title-gradient {
  background: var(--gradient-gold-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.3));
}

.hero-title-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--color-gold-primary);
  filter: drop-shadow(0 0 40px rgba(212, 175, 55, 0.4));
}

/* ========== Buttons ========== */
.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-bg-deep);
  background: var(--gradient-gold);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-gold-md);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease;
}

.btn-gold:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: var(--shadow-gold-glow);
  color: var(--color-bg-deep);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-gold-primary);
  background: transparent;
  border: 2px solid var(--color-border-gold);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.4s var(--ease-spring);
}

.btn-ghost:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: var(--color-border-gold-strong);
  transform: translateY(-2px);
  color: var(--color-gold-light);
}

/* ========== Glass Panels ========== */
.glass-panel {
  background: var(--gradient-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-gold-sm);
}

/* ========== Accordion ========== */
.accordion-item {
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.accordion-item:hover,
.accordion-item.active {
  border-color: var(--color-border-gold-strong);
  box-shadow: var(--shadow-gold-sm);
}

.accordion-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: rgba(20, 13, 60, 0.4);
  border: none;
  color: var(--color-text-primary);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  text-align: left;
  transition: background 0.3s ease;
}

.accordion-btn:hover {
  background: rgba(20, 13, 60, 0.6);
}

.accordion-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  margin-right: 1rem;
}

.accordion-arrow {
  transition: transform 0.3s ease;
  color: var(--color-gold-mid);
}

.accordion-item.active .accordion-arrow {
  transform: rotate(180deg);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.accordion-body-inner {
  padding: 0 1.5rem 1.25rem;
}

/* ========== Device Mockup ========== */
.device-frame {
  position: relative;
  display: inline-block;
  padding: 12px;
  background: linear-gradient(145deg, rgba(212,175,55,0.3), rgba(212,175,55,0.1));
  border-radius: 28px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,215,0,0.2);
}

.device-frame img {
  display: block;
  border-radius: 18px;
  max-height: 380px;
  width: auto;
}

/* ========== Swiper Overrides ========== */
.swiper-pagination-bullet {
  background: var(--color-gold-primary) !important;
  opacity: 0.4;
}

.swiper-pagination-bullet-active {
  opacity: 1 !important;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--color-gold-mid) !important;
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.4));
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 1.5rem !important;
}

/* ========== Particles ========== */
.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  width: var(--size, 4px);
  height: var(--size, 4px);
  background: radial-gradient(circle, #FFD700 0%, rgba(212, 175, 55, 0) 70%);
  border-radius: 50%;
  bottom: -10%;
  left: var(--x, 50%);
  opacity: 0;
  animation: particleFloat var(--duration, 6s) var(--delay, 0s) ease-out infinite;
}

.particle--sparkle {
  width: var(--size, 6px);
  height: var(--size, 6px);
  background: none;
  box-shadow:
    0 0 var(--size, 6px) rgba(255, 215, 0, 0.8),
    0 0 calc(var(--size, 6px) * 2) rgba(255, 215, 0, 0.4),
    0 0 calc(var(--size, 6px) * 4) rgba(212, 175, 55, 0.2);
  animation:
    particleFloat var(--duration, 8s) var(--delay, 0s) ease-out infinite,
    particleTwinkle 2s ease-in-out infinite;
}

@keyframes particleFloat {
  0% { opacity: 0; transform: translateY(0) translateX(0) scale(0); }
  10% { opacity: 1; transform: translateY(-10vh) translateX(var(--drift, 10px)) scale(1); }
  90% { opacity: 0.6; transform: translateY(-90vh) translateX(calc(var(--drift, 10px) * -1)) scale(0.8); }
  100% { opacity: 0; transform: translateY(-110vh) translateX(var(--drift, 10px)) scale(0.3); }
}

@keyframes particleTwinkle {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.3); }
}

.particle:nth-child(1)  { --x: 5%;  --size: 3px; --duration: 7s;  --delay: 0s;    --drift: 15px; }
.particle:nth-child(2)  { --x: 12%; --size: 5px; --duration: 9s;  --delay: 1.2s;  --drift: -20px; }
.particle:nth-child(3)  { --x: 22%; --size: 2px; --duration: 6s;  --delay: 0.5s;  --drift: 8px; }
.particle:nth-child(4)  { --x: 35%; --size: 4px; --duration: 8s;  --delay: 2.8s;  --drift: -12px; }
.particle:nth-child(5)  { --x: 42%; --size: 6px; --duration: 10s; --delay: 0.8s;  --drift: 25px; }
.particle:nth-child(6)  { --x: 55%; --size: 3px; --duration: 7s;  --delay: 3.5s;  --drift: -18px; }
.particle:nth-child(7)  { --x: 63%; --size: 5px; --duration: 8s;  --delay: 1.8s;  --drift: 14px; }
.particle:nth-child(8)  { --x: 72%; --size: 2px; --duration: 6s;  --delay: 4.2s;  --drift: -10px; }
.particle:nth-child(9)  { --x: 80%; --size: 4px; --duration: 9s;  --delay: 0.3s;  --drift: 20px; }
.particle:nth-child(10) { --x: 87%; --size: 6px; --duration: 7s;  --delay: 2.1s;  --drift: -22px; }
.particle:nth-child(11) { --x: 93%; --size: 3px; --duration: 8s;  --delay: 3.0s;  --drift: 12px; }
.particle:nth-child(12) { --x: 97%; --size: 2px; --duration: 6s;  --delay: 1.5s;  --drift: -8px; }

/* ========== Divider ========== */
.divider svg {
  width: min(90%, 1200px);
  height: auto;
}

/* ========== CTA Section ========== */
.cta-section {
  position: relative;
  background: url('images/cta_bg.webp') center/cover no-repeat, var(--gradient-bg-hero);
}

.cta-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,6,24,0.8) 0%, rgba(20,13,60,0.5) 50%, rgba(6,6,24,0.8) 100%);
}

/* ========== Form Inputs ========== */
.form-input {
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: rgba(20, 13, 60, 0.5);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-gold-mid);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gold-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ========== Lightbox ========== */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.lightbox.active {
  display: flex;
}

.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 0 60px rgba(255, 215, 0, 0.15);
}

/* ========== Privacy Accept Button ========== */
.privacy-accept-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem 1.5rem;
  background: linear-gradient(to top, var(--color-bg-deep) 60%, transparent);
}

.privacy-accept-btn.hidden {
  display: none;
}

.accept-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 3rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-bg-deep);
  background: var(--gradient-gold);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-gold-md);
  cursor: pointer;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
}

.accept-btn:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-gold-glow);
}

/* ========== Section backgrounds ========== */
.bg-deep { background-color: var(--color-bg-deep); }
.bg-elevated { background-color: var(--color-bg-elevated); }

/* ========== Scrollbar ========== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg-deep); }
::-webkit-scrollbar-thumb { background: var(--color-gold-dark); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-gold-primary); }

/* ========== Legal Pages ========== */
.legal-content h1 { font-family: var(--font-heading); color: var(--color-gold-mid); margin-bottom: 1rem; }
.legal-content h2 { font-family: var(--font-heading); color: var(--color-gold-primary); margin-top: 2rem; margin-bottom: 0.75rem; font-size: 1.35rem; }
.legal-content h3 { color: var(--color-gold-primary); margin-top: 1.5rem; margin-bottom: 0.5rem; }
.legal-content p { color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 1rem; }
.legal-content ul { color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 1rem; padding-left: 1.5rem; }
.legal-content li { margin-bottom: 0.5rem; }
.legal-content a { color: var(--color-gold-mid); text-decoration: underline; text-underline-offset: 3px; }
.legal-content a:hover { color: var(--color-gold-light); }
.legal-content strong { color: var(--color-text-primary); }

/* ========== Nav Scroll ========== */
.nav-scrolled {
  background: rgba(6, 6, 24, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
}