/* ============================================
   M.O.L.I. NETWORK — Premium Gold/Black Design
   ============================================ */

:root {
  --gold: #C8922A;
  --gold-light: #ECC86E;
  --gold-bright: #F8E090;
  --gold-dark: #7B5510;
  --gold-mid: #D4A53A;
  --gold-muted: #A07820;
  --bg-dark: #0A0A0A;
  --bg-surface: #111111;
  --bg-card: #161616;
  --bg-card-hover: #1C1C1C;
  --border: #222222;
  --border-gold: rgba(200,146,42,0.28);
  --text-primary: #FFFFFF;
  --text-secondary: #AAAAAA;
  --text-muted: #666666;
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --max-width: 1200px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset & Base */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--bg-dark);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: var(--gold); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-light); }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; }

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 600; }

.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  padding: 6px 16px;
  border: 1px solid var(--border-gold);
  border-radius: 2px;
}

.gold-text { color: var(--gold); }
.gold-gradient {
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 25%, var(--gold-light) 50%, var(--gold-bright) 65%, var(--gold-light) 75%, var(--gold) 88%, var(--gold-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================
   Navigation
   ============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px 0;
  transition: all var(--transition);
  background: transparent;
}

.nav.scrolled {
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-logo-icon {
  flex-shrink: 0;
  width: 36px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  /* Gold-styled "M" monogram — replaces Crown M PNG per task #1151372 */
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 900;
  color: transparent;
  background: linear-gradient(135deg, #7B5510 0%, #C8922A 25%, #ECC86E 55%, #F8E090 70%, #ECC86E 80%, #C8922A 90%, #7B5510 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 6px rgba(200,146,42,0.4));
  transition: filter var(--transition), transform var(--transition);
  line-height: 1;
  padding-bottom: 2px;
}

.nav-logo:hover .nav-logo-icon {
  filter: drop-shadow(0 0 12px rgba(200,146,42,0.7));
  transform: scale(1.05);
}

.nav-logo-text-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.nav-logo-main {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--gold);
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 25%, var(--gold-light) 55%, var(--gold-bright) 70%, var(--gold-light) 80%, var(--gold) 90%, var(--gold-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.06em;
  line-height: 1;
}

.nav-logo-network {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  color: #B0B0B0;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}

.nav-logo-tagline {
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: none;
  margin-left: 8px;
}

@media (min-width: 1100px) {
  .nav-logo-tagline { display: inline; align-self: center; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color var(--transition);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--gold);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gold);
  transition: all var(--transition);
}

.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile Nav */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 10, 0.98);
  backdrop-filter: blur(20px);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.mobile-nav.active { display: flex; }

.mobile-nav a {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--text-secondary);
  transition: color var(--transition);
}

.mobile-nav a:hover,
.mobile-nav a.active { color: var(--gold); }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 35%, var(--gold-light) 65%, var(--gold-mid) 100%);
  color: #000;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 40%, var(--gold-bright) 65%, var(--gold-light) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(200, 146, 42, 0.4);
  color: #000;
}

.btn-outline {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}

.btn-outline:hover {
  background: rgba(200, 146, 42, 0.12);
  color: var(--gold-light);
  border-color: var(--gold-light);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 10px 24px;
  font-size: 0.8rem;
}

/* ============================================
   Page Sections
   ============================================ */
.page { display: none; }
.page.active { display: block; }

section.section {
  padding: 100px 0;
  position: relative;
}

section.section-alt {
  background: var(--bg-surface);
}

/* ============================================
   Hero Section
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 120px 24px 80px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(200,146,42,0.09) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(200,146,42,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(200,146,42,0.035) 0%, transparent 50%),
    linear-gradient(180deg, #0A0A0A 0%, #0D0D0D 50%, #0A0A0A 100%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(200,146,42,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,146,42,0.035) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.5;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(200,146,42,0.12);
  border: 1px solid var(--border-gold);
  padding: 8px 20px;
  border-radius: 2px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 32px;
}

.hero-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.hero-logo-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}

/* ── Premium gold glow system ──────────────────────────────────────────────── */
/*
 * Three layers working together:
 *   1.  Embossed base plate — dark metallic background behind the logo,
 *        mimics a premium badge or coin — makes the logo look *placed*, not pasted
 *   2.  Outer bloom — large diffuse gold aura that bleeds into the hero bg
 *   3.  Inner warm halo — tighter glow hugging the logo edges
 *   4.  Shimmer — subtle light roll across the base plate for a metallic feel
 */

.hero-logo-wrapper {
  position: relative;
  width: clamp(240px, 42vw, 420px);
  overflow: visible;          /* keep aura visible outside wrapper bounds */
  border-radius: 14px;
  flex-shrink: 0;
}

/* ── Layer 1: Embossed base plate ── */
.hero-logo-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  z-index: 1;

  /* Dark metallic plate — the key to "designed into the page" */
  background:
    radial-gradient(ellipse at 30% 30%, rgba(120,80,20,0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 70%, rgba(80,40,0,0.2) 0%, transparent 50%),
    linear-gradient(145deg, #141008 0%, #0C0A06 40%, #0E0C08 70%, #100A04 100%);

  box-shadow:
    /* top-edge highlight — catches the light like a beveled metal edge */
    inset 0 1px 0 rgba(255,220,120,0.30),
    inset 0 2px 0 rgba(200,160,60,0.12),
    /* bottom-edge shadow — depth under the plate */
    inset 0 -1px 0 rgba(0,0,0,0.50),
    inset 0 -2px 0 rgba(0,0,0,0.25),
    /* left/right bevels */
    inset 1px 0 0 rgba(255,220,120,0.15),
    inset -1px 0 0 rgba(0,0,0,0.40),
    /* outer gold glow — multiple passes for a warm bloom */
    0 0 12px rgba(200,146,42,0.45),
    0 0 30px rgba(180,120,30,0.35),
    0 0 60px rgba(160,100,20,0.25),
    0 0 100px rgba(120,70,10,0.18),
    0 0 160px rgba(100,50,5,0.10);

  animation: plate-shimmer 5s ease-in-out infinite;
}

/* ── Layer 2: Outer bloom — radiates into the hero background ── */
.hero-logo-wrapper::after {
  content: '';
  position: absolute;
  inset: -40px;              /* larger than wrapper = aura bleeds out */
  border-radius: 50%;
  z-index: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(200,146,42,0.30) 0%,
    rgba(180,120,30,0.18) 30%,
    rgba(140,80,10,0.08) 55%,
    rgba(100,50,5,0.03) 75%,
    transparent 100%
  );
  pointer-events: none;
  filter: blur(10px);
  animation: aura-pulse 5s ease-in-out infinite;
}

/* ── Layer 3: The logo image sits above both layers ── */
.hero-crown-logo {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  border-radius: 8px;
  /* Subtle warmth filter: darkens pure-white PNG, warms the edges, adds glow */
  filter:
    /* depth shadow so logo lifts off the base plate */
    drop-shadow(0 3px 6px rgba(0,0,0,0.8))
    /* tight gold rim */
    drop-shadow(0 0 6px rgba(200,146,42,0.55))
    /* wider warm bloom */
    drop-shadow(0 0 14px rgba(180,120,30,0.35))
    /* outer diffuse haze */
    drop-shadow(0 0 30px rgba(140,80,10,0.20));
}

/* ── Mobile: scale aura proportionally ── */
@media (max-width: 600px) {
  .hero-logo-wrapper { width: 220px; }
  .hero-logo-wrapper::after { inset: -24px; }
}

/* ── Keyframe animations ── */
@keyframes aura-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.70; }
}

@keyframes plate-shimmer {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,220,120,0.30),
      inset 0 2px 0 rgba(200,160,60,0.12),
      inset 0 -1px 0 rgba(0,0,0,0.50),
      inset 0 -2px 0 rgba(0,0,0,0.25),
      inset 1px 0 0 rgba(255,220,120,0.15),
      inset -1px 0 0 rgba(0,0,0,0.40),
      0 0 12px rgba(200,146,42,0.45),
      0 0 30px rgba(180,120,30,0.35),
      0 0 60px rgba(160,100,20,0.25),
      0 0 100px rgba(120,70,10,0.18),
      0 0 160px rgba(100,50,5,0.10);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,220,120,0.45),
      inset 0 2px 0 rgba(200,160,60,0.20),
      inset 0 -1px 0 rgba(0,0,0,0.50),
      inset 0 -2px 0 rgba(0,0,0,0.25),
      inset 1px 0 0 rgba(255,220,120,0.20),
      inset -1px 0 0 rgba(0,0,0,0.40),
      0 0 18px rgba(200,146,42,0.60),
      0 0 40px rgba(180,120,30,0.45),
      0 0 80px rgba(160,100,20,0.30),
      0 0 120px rgba(120,70,10,0.20),
      0 0 180px rgba(100,50,5,0.12);
  }
}

/* ── Gold Light Burst — cinematic ray beams behind the crown M ── */
/*
 * conic-gradient creates 16 ray beams at varied angles/opacities
 * radial mask: hides center (logo area) so rays appear to burst FROM BEHIND
 * slow rotation + pulse makes it feel alive — movie studio logo reveal energy
 */
.hero-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  border-radius: 50%;
  z-index: 0;          /* behind plate (z:1) + logo (z:2), in front of outer bloom (z:0, painted after) */
  pointer-events: none;

  /* 16 ray beams — thinner bright ones interspersed with wider mid-gold ones */
  background: conic-gradient(
    from 0deg at center,
    transparent 0deg,    rgba(248,224,144,0.22) 2.5deg,  transparent 7deg,
    transparent 14deg,   rgba(200,146,42,0.14)  17deg,   transparent 22deg,
    transparent 25deg,   rgba(248,224,144,0.18) 27.5deg, transparent 33deg,
    transparent 40deg,   rgba(200,146,42,0.11)  43deg,   transparent 48deg,
    transparent 51deg,   rgba(248,224,144,0.24) 53.5deg, transparent 59deg,
    transparent 65deg,   rgba(200,146,42,0.13)  68deg,   transparent 73deg,
    transparent 79deg,   rgba(248,224,144,0.17) 81.5deg, transparent 87deg,
    transparent 90deg,
    transparent 90deg,   rgba(248,224,144,0.22) 92.5deg,  transparent 97deg,
    transparent 104deg,  rgba(200,146,42,0.14)  107deg,   transparent 112deg,
    transparent 115deg,  rgba(248,224,144,0.18) 117.5deg, transparent 123deg,
    transparent 130deg,  rgba(200,146,42,0.11)  133deg,   transparent 138deg,
    transparent 141deg,  rgba(248,224,144,0.24) 143.5deg, transparent 149deg,
    transparent 155deg,  rgba(200,146,42,0.13)  158deg,   transparent 163deg,
    transparent 169deg,  rgba(248,224,144,0.17) 171.5deg, transparent 177deg,
    transparent 180deg,
    transparent 180deg,  rgba(248,224,144,0.22) 182.5deg,  transparent 187deg,
    transparent 194deg,  rgba(200,146,42,0.14)  197deg,    transparent 202deg,
    transparent 205deg,  rgba(248,224,144,0.18) 207.5deg,  transparent 213deg,
    transparent 220deg,  rgba(200,146,42,0.11)  223deg,    transparent 228deg,
    transparent 231deg,  rgba(248,224,144,0.24) 233.5deg,  transparent 239deg,
    transparent 245deg,  rgba(200,146,42,0.13)  248deg,    transparent 253deg,
    transparent 259deg,  rgba(248,224,144,0.17) 261.5deg,  transparent 267deg,
    transparent 270deg,
    transparent 270deg,  rgba(248,224,144,0.22) 272.5deg,  transparent 277deg,
    transparent 284deg,  rgba(200,146,42,0.14)  287deg,    transparent 292deg,
    transparent 295deg,  rgba(248,224,144,0.18) 297.5deg,  transparent 303deg,
    transparent 310deg,  rgba(200,146,42,0.11)  313deg,    transparent 318deg,
    transparent 321deg,  rgba(248,224,144,0.24) 323.5deg,  transparent 329deg,
    transparent 335deg,  rgba(200,146,42,0.13)  338deg,    transparent 343deg,
    transparent 349deg,  rgba(248,224,144,0.17) 351.5deg,  transparent 357deg,
    transparent 360deg
  );

  /* Mask: punch a hole in the center (rays emerge FROM behind logo, not over it)
     then taper rays to nothing at the outer edge */
  -webkit-mask-image: radial-gradient(circle,
    transparent 22%,
    rgba(0,0,0,0.45) 29%,
    black 39%,
    black 68%,
    rgba(0,0,0,0.35) 81%,
    transparent 94%
  );
  mask-image: radial-gradient(circle,
    transparent 22%,
    rgba(0,0,0,0.45) 29%,
    black 39%,
    black 68%,
    rgba(0,0,0,0.35) 81%,
    transparent 94%
  );

  /* Slow rotation + gentle pulse — the burst feels alive, not static */
  animation: burst-spin 40s linear infinite, burst-glow 5s ease-in-out infinite;
}

@keyframes burst-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes burst-glow {
  0%, 100% { opacity: 0.80; }
  50%       { opacity: 1.00; }
}

.hero h1 {
  margin-bottom: 24px;
  font-weight: 900;
  margin-top: 0;
}

.hero-tagline {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.8vw, 1.1rem);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 25%, var(--gold-light) 55%, var(--gold-bright) 70%, var(--gold-light) 80%, var(--gold) 90%, var(--gold-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

.hero-tagline-secondary {
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 1.5vw, 0.95rem);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.hero-description {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.8;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   Stats Bar
   ============================================ */
.stats-bar {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 48px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  text-align: center;
}

.stat-item h3 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--gold);
  font-weight: 900;
  line-height: 1;
}

.stat-item p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ============================================
   Host Cards
   ============================================ */
.hosts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  margin-top: 48px;
}

.host-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 48px 32px;
  text-align: center;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
}

.host-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
}

.host-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}

.host-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 35%, var(--gold-light) 60%, var(--gold-mid) 85%, var(--gold-dark) 100%);
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 900;
  color: #000;
  box-shadow: 0 4px 20px rgba(200,146,42,0.3), inset 0 1px 0 rgba(248,224,144,0.4);
}

.host-card h3 {
  margin-bottom: 8px;
}

.host-card .role {
  font-size: 0.85rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

/* ============================================
   Star-Host Card — Chuck's Gold Star Treatment
   ============================================ */
.host-card-star {
  border-color: var(--gold-mid);
  box-shadow: 0 0 40px rgba(200, 146, 42, 0.15);
}

.host-card-star::before {
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), var(--gold), var(--gold-bright), transparent);
  box-shadow: 0 0 12px rgba(248, 224, 144, 0.6);
}

.host-card-star::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(248, 224, 144, 0.06) 0%, transparent 70%);
}

.host-card-star:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 60px rgba(200, 146, 42, 0.25);
}

/* Star avatar badge */
.host-avatar-star {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Star SVG container */
.host-avatar-star .star-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  height: 110px;
  animation: starPulse 3s ease-in-out infinite;
}

@keyframes starPulse {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(248, 224, 144, 0.5)) drop-shadow(0 0 12px rgba(200, 146, 42, 0.3));
    opacity: 1;
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(248, 224, 144, 0.8)) drop-shadow(0 0 20px rgba(200, 146, 42, 0.5));
    opacity: 0.92;
  }
}

/* Inner circle initials */
.host-avatar-star .avatar-inner {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 35%, var(--gold-light) 60%, var(--gold-mid) 85%, var(--gold-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 900;
  color: #000;
  box-shadow: 0 4px 20px rgba(200, 146, 42, 0.4), inset 0 1px 0 rgba(248, 224, 144, 0.5);
  position: relative;
  z-index: 1;
}

/* Lead Star badge */
.host-card-star .lead-star-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #000;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 2px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(200, 146, 42, 0.4);
  border: 1px solid var(--gold-bright);
}

.host-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ============================================
   Cards (Generic)
   ============================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 36px 28px;
  transition: all var(--transition);
}

.card:hover {
  border-color: var(--border-gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.card-icon {
  width: 56px;
  height: 56px;
  background: rgba(200,146,42,0.12);
  border: 1px solid var(--border-gold);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.card h3 {
  margin-bottom: 12px;
  font-size: 1.25rem;
}

.card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
}

.card .tag {
  display: inline-block;
  background: rgba(200,146,42,0.12);
  color: var(--gold);
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 2px;
  margin-top: 16px;
}

/* ============================================
   Testimonials
   ============================================ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.testimonial {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 32px;
  position: relative;
}

.testimonial::before {
  content: '\201C';
  font-family: var(--font-heading);
  font-size: 4rem;
  color: var(--gold);
  opacity: 0.3;
  position: absolute;
  top: 12px;
  left: 20px;
  line-height: 1;
}

.testimonial p {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 16px;
  padding-top: 16px;
}

.testimonial .author {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.85rem;
}

.testimonial .location {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ============================================
   Brand Values
   ============================================ */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.value-item {
  padding: 32px;
  border-left: 3px solid var(--gold);
  background: var(--bg-card);
}

.value-item h4 {
  color: var(--gold);
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: 1.25rem;
}

.value-item p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ============================================
   Section Header
   ============================================ */
.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 48px;
}

.section-header p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin-top: 16px;
  line-height: 1.7;
}

/* ============================================
   About Page
   ============================================ */
.about-story {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

.about-block {
  max-width: 800px;
  margin: 0 auto;
}

.about-block h3 {
  color: var(--gold);
  margin-bottom: 16px;
}

.about-block p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 16px;
}

.philosophy-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.philosophy-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 28px 20px;
  text-align: center;
  transition: all var(--transition);
}

.philosophy-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-2px);
}

.philosophy-card .icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

.philosophy-card h4 {
  font-size: 0.95rem;
  margin-bottom: 8px;
  color: var(--gold);
}

.philosophy-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ============================================
   Episodes Page
   ============================================ */
.featured-episode {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 4px;
  padding: 48px;
  margin-bottom: 48px;
  position: relative;
  overflow: hidden;
}

.featured-episode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
}

.featured-episode .label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.featured-episode h3 {
  font-size: 1.75rem;
  margin-bottom: 16px;
}

.featured-episode p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 700px;
}

.episode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.episode-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: all var(--transition);
}

.episode-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-2px);
}

.episode-thumb {
  height: 180px;
  background: linear-gradient(135deg, #1a1a1a, #111);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--gold);
  border-bottom: 1px solid var(--border);
}

.episode-info {
  padding: 24px;
}

.episode-info h4 {
  margin-bottom: 8px;
  font-size: 1rem;
}

.episode-info .meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.episode-info p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.platform-links {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
  justify-content: center;
}

.platform-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--transition);
}

.platform-link:hover {
  border-color: var(--border-gold);
  color: var(--gold);
}

/* ============================================
   Membership Page
   ============================================ */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 48px;
}

.tier-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 36px 24px;
  text-align: center;
  transition: all var(--transition);
  position: relative;
}

.tier-card.featured {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(200,146,42,0.09) 0%, var(--bg-card) 100%);
}

.tier-card.featured::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #000;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 16px;
  border-radius: 2px;
}

.tier-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}

.tier-card h3 {
  margin-bottom: 8px;
  font-size: 1.25rem;
}

.tier-card .price {
  font-size: 0.95rem;
  color: var(--gold);
  margin-bottom: 20px;
}

.tier-card ul {
  list-style: none;
  text-align: left;
  margin-bottom: 24px;
}

.tier-card ul li {
  padding: 8px 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.tier-card ul li::before {
  content: '\2713';
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
}

.benefits-list {
  max-width: 700px;
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.benefit-item .icon {
  color: var(--gold);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.benefit-item p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ============================================
   Events Page
   ============================================ */
.event-hero {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 4px;
  padding: 48px;
  margin-bottom: 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.event-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(200,146,42,0.09) 0%, transparent 70%);
}

.event-hero > * { position: relative; z-index: 1; }

.event-hero h3 {
  font-size: 2.5rem;
  margin-bottom: 16px;
}

.event-hero p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto 24px;
  line-height: 1.7;
}

.events-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.event-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: all var(--transition);
}

.event-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-2px);
}

.event-date-bar {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  padding: 16px 24px;
  color: #000;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.event-details {
  padding: 24px;
}

.event-details h4 { margin-bottom: 8px; }

.event-details p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 16px;
}

.event-tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--gold);
  border: 1px solid var(--border-gold);
  border-radius: 2px;
}

/* ============================================
   Investors Page
   ============================================ */
.investor-hero {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 64px;
}

.investor-hero h2 {
  margin-bottom: 16px;
}

.investor-hero p {
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1.8;
}

.ecosystem-levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 48px 0;
}

.level-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 28px 20px;
  text-align: center;
  transition: all var(--transition);
  position: relative;
}

.level-card:hover {
  border-color: var(--border-gold);
}

.level-number {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #000;
  font-weight: 800;
  font-size: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.level-card h4 {
  font-size: 1rem;
  margin-bottom: 8px;
  color: var(--gold);
}

.level-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.revenue-table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
}

.revenue-table th,
.revenue-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.revenue-table th {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--bg-card);
}

.revenue-table td {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.revenue-table tr:hover td {
  background: var(--bg-card);
}

.revenue-total {
  color: var(--gold) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
}

/* ============================================
   Contact Page
   ============================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 48px;
}

@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-form .form-group {
  margin-bottom: 20px;
}

.contact-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color var(--transition);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--gold);
}

.contact-form textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-form select option {
  background: var(--bg-card);
  color: var(--text-primary);
}

.contact-info-list {
  list-style: none;
}

.contact-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.contact-info-list .icon-box {
  width: 44px;
  height: 44px;
  background: rgba(200,146,42,0.12);
  border: 1px solid var(--border-gold);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.contact-info-list h4 {
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.contact-info-list p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.open-for {
  margin-top: 32px;
}

.open-for h4 {
  margin-bottom: 16px;
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 1.25rem;
}

.open-for ul {
  list-style: none;
}

.open-for ul li {
  padding: 8px 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.open-for ul li::before {
  content: '\2713';
  color: var(--gold);
  font-weight: 700;
}

/* ============================================
   Footer
   ============================================ */
.footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-brand .logo {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--gold);
  margin-bottom: 16px;
}

.footer-brand p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 16px;
}

.footer h4 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.footer ul {
  list-style: none;
}

.footer ul li { margin-bottom: 12px; }

.footer ul li a {
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: color var(--transition);
}

.footer ul li a:hover { color: var(--gold); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-bottom p {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ============================================
   Divider
   ============================================ */
.gold-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light), var(--gold-bright), var(--gold-light), var(--gold), var(--gold-dark));
  margin: 24px auto;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(200,146,42,0.35);
}

.gold-divider-left {
  margin: 24px 0;
}

/* ============================================
   Scroll Animations
   ============================================ */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Call-In System
   ============================================ */
.callin-box {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 4px;
  padding: 40px;
  margin-top: 48px;
}

.callin-box h3 {
  margin-bottom: 16px;
}

.callin-box p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 16px;
}

.filter-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(200,146,42,0.09);
  border: 1px solid var(--border-gold);
  border-radius: 2px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ============================================
   Form Success State
   ============================================ */
.form-success {
  text-align: center;
  padding: 48px;
}

.form-success .checkmark {
  width: 64px;
  height: 64px;
  background: rgba(200,146,42,0.12);
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 2rem;
  color: var(--gold);
}

.form-success h3 {
  margin-bottom: 8px;
}

.form-success p {
  color: var(--text-secondary);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
  section.section { padding: 64px 0; }
  .hero { padding: 100px 24px 60px; }
  .hero h1 { font-size: 2.25rem; }
  .hosts-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .tier-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .ecosystem-levels { grid-template-columns: 1fr 1fr; }
  .featured-episode { padding: 28px; }
  .event-hero { padding: 32px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .hero-ctas { flex-direction: column; align-items: center; }
  .ecosystem-levels { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; gap: 24px; }
  .revenue-table { font-size: 0.85rem; }
  .revenue-table th, .revenue-table td { padding: 12px; }
  .host-card { padding: 36px 16px; }
  .about-block { padding: 0 4px; }
  .container { padding: 0 16px; }
}

/* ============================================
   Stat Text Variant (non-numeric)
   ============================================ */
.stat-text .stat-text-value {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 30%, var(--gold-light) 60%, var(--gold) 85%, var(--gold-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

/* ============================================
   Footer Stacked Logo
   ============================================ */
.footer-logo-stacked {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.footer-logo-icon {
  flex-shrink: 0;
  opacity: 0.92;
}

.footer-logo-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.footer-logo-moli {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 25%, var(--gold-light) 55%, var(--gold) 85%, var(--gold-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.06em;
  line-height: 1;
}

.footer-logo-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
  margin: 3px 0;
}

.footer-logo-network {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  line-height: 1;
}

.footer-logo-subtitle {
  font-family: var(--font-body);
  font-size: 0.52rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* ============================================
   Inner Circle Hero (Membership Page)
   ============================================ */
.inner-circle-hero {
  background: linear-gradient(160deg, rgba(200,146,42,0.14) 0%, rgba(200,146,42,0.06) 40%, rgba(10,10,10,0) 80%);
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 56px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 64px;
}

.inner-circle-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light), var(--gold-bright), var(--gold-light), var(--gold), var(--gold-dark));
  box-shadow: 0 0 20px rgba(200,146,42,0.5);
}

.inner-circle-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(200,146,42,0.15);
  border: 1px solid var(--border-gold);
  padding: 6px 18px;
  border-radius: 2px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 20px;
}

.inner-circle-hero h3 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 25%, var(--gold-light) 50%, var(--gold-bright) 65%, var(--gold-light) 75%, var(--gold) 88%, var(--gold-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.inner-circle-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
}

.inner-circle-price .price-amount {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 30%, var(--gold-light) 60%, var(--gold) 85%, var(--gold-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.inner-circle-price .price-period {
  font-size: 1.3rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.inner-circle-desc {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto 28px;
  line-height: 1.7;
}

.inner-circle-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 36px;
}

.perk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(200,146,42,0.1);
  border: 1px solid rgba(200,146,42,0.3);
  padding: 7px 16px;
  border-radius: 24px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gold-light);
  letter-spacing: 0.02em;
}

.btn-join-circle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 48px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 35%, var(--gold-light) 65%, var(--gold-mid) 100%);
  color: #000;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 4px 24px rgba(200,146,42,0.35);
  text-decoration: none;
}

.btn-join-circle:hover {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 40%, var(--gold-bright) 65%, var(--gold-light) 100%);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(200,146,42,0.5);
  color: #000;
}

.inner-circle-fine {
  margin-top: 16px;
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

/* Featured Tier Card Variant */
.tier-card-featured {
  border-color: var(--gold) !important;
  background: linear-gradient(180deg, rgba(200,146,42,0.12) 0%, rgba(200,146,42,0.04) 40%, var(--bg-card) 100%) !important;
  position: relative;
}

.tier-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: #000;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 4px 16px;
  border-radius: 2px;
  white-space: nowrap;
}

.price-real {
  display: flex;
  align-items: baseline;
  gap: 4px;
  justify-content: center;
  margin-bottom: 20px;
}

.price-real-amount {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}

.price-real-mo {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* ============================================
   Home Membership CTA Section
   ============================================ */
.home-membership-cta {
  background: linear-gradient(160deg, rgba(200,146,42,0.06) 0%, transparent 60%);
  border-top: 1px solid var(--border-gold);
  border-bottom: 1px solid var(--border-gold);
}

.home-membership-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

@media (max-width: 768px) {
  .home-membership-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.home-membership-text .section-label {
  margin-bottom: 12px;
}

.home-membership-text h2 {
  margin-bottom: 16px;
  line-height: 1.1;
}

.home-membership-text > p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 28px;
}

.home-membership-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.hmp-amount {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 30%, var(--gold-light) 60%, var(--gold) 85%, var(--gold-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.hmp-period {
  font-size: 1.1rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.hmp-cancel {
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.home-membership-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.home-membership-perks {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hmp-perk {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: border-color var(--transition);
}

.hmp-perk:hover {
  border-color: var(--border-gold);
}

.hmp-icon {
  font-size: 1.4rem;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}

.hmp-perk strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.hmp-perk p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* ============================================
   Gold Stanchion Rope Rails — VIP Red Carpet
   ============================================
 * Two fixed vertical gold rope borders framing the full page.
 * Braided look: two sets of diagonal gradient strands (going -50deg and +50deg)
 * layered over a cylindrical shading gradient (dark at edges → bright at center).
 * Shimmer animation adds the subtle "alive" premium feel.
 * Mobile simplifies to a slim gold edge accent so it doesn't eat screen real-estate.
 */
.rope-rail {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 20px;
  z-index: 500;
  pointer-events: none;

  background:
    /* Highlight strands — bright gold going upper-right to lower-left */
    repeating-linear-gradient(
      -50deg,
      transparent           0px,
      transparent           3px,
      rgba(248,224,144,0.52) 3px,
      rgba(248,224,144,0.52) 5.5px,
      transparent           5.5px,
      transparent           11px,
      rgba(200,160,60,0.32)  11px,
      rgba(200,160,60,0.32)  13px,
      transparent           13px,
      transparent           20px
    ),
    /* Shadow strands — dark gold going upper-left to lower-right */
    repeating-linear-gradient(
      50deg,
      transparent           0px,
      transparent           2px,
      rgba(55,28,3,0.55)    2px,
      rgba(55,28,3,0.55)    5px,
      transparent           5px,
      transparent           13px,
      rgba(95,50,7,0.32)    13px,
      rgba(95,50,7,0.32)    15px,
      transparent           15px,
      transparent           20px
    ),
    /* Cylindrical shading — dark edges, bright center = 3D rope illusion */
    linear-gradient(
      90deg,
      rgba(40,22,2,0.98)    0%,
      rgba(95,55,7,0.97)   12%,
      rgba(158,98,16,0.96) 28%,
      rgba(205,150,38,0.97) 50%,
      rgba(158,98,16,0.96) 72%,
      rgba(95,55,7,0.97)   88%,
      rgba(40,22,2,0.98)  100%
    );

  animation: rope-shimmer 7s ease-in-out infinite;
}

.rope-rail-left {
  left: 0;
  box-shadow:
    inset -3px 0 7px rgba(0,0,0,0.65),
    3px 0 12px rgba(200,146,42,0.22),
    1px 0 5px  rgba(248,224,144,0.12);
}

.rope-rail-right {
  right: 0;
  box-shadow:
    inset 3px 0 7px rgba(0,0,0,0.65),
    -3px 0 12px rgba(200,146,42,0.22),
    -1px 0 5px  rgba(248,224,144,0.12);
}

/* Add a subtle gold knob ornament at top and bottom of each rail */
.rope-rail::before,
.rope-rail::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%,
    rgba(248,224,144,0.95) 0%,
    rgba(212,165,50,0.90)  30%,
    rgba(158,98,16,0.88)   60%,
    rgba(80,45,5,0.95)     100%
  );
  box-shadow:
    0 0 6px rgba(200,146,42,0.60),
    0 0 14px rgba(180,120,30,0.35),
    inset 0 1px 0 rgba(255,230,130,0.50),
    inset 0 -1px 0 rgba(0,0,0,0.40);
  animation: rope-shimmer 7s ease-in-out infinite;
}

.rope-rail::before { top: 6px; }
.rope-rail::after  { bottom: 6px; }

@keyframes rope-shimmer {
  0%, 100% { opacity: 0.88; }
  50%       { opacity: 1.00; }
}

/* Mobile: slim gold edge lines — rope detail would be invisible at small widths */
@media (max-width: 768px) {
  .rope-rail {
    width: 4px;
    background: linear-gradient(
      180deg,
      rgba(123,85,16,0.35)  0%,
      rgba(200,146,42,0.65) 20%,
      rgba(248,224,144,0.75) 50%,
      rgba(200,146,42,0.65) 80%,
      rgba(123,85,16,0.35) 100%
    );
  }
  .rope-rail-left  { box-shadow: 2px 0 6px rgba(200,146,42,0.28); }
  .rope-rail-right { box-shadow: -2px 0 6px rgba(200,146,42,0.28); }
  .rope-rail::before,
  .rope-rail::after {
    width: 10px;
    height: 10px;
  }
}

/* ============================================
   FUNNEL HOMEPAGE — New 7-Step Conversion Layout
   ============================================ */

/* --- STEP 1: HERO FUNNEL --- */
.hero-funnel {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
}

.hero-funnel-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 100vh;
}

/* Photo column — left half */
.hero-photo-col {
  flex: 0 0 42%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 100px 0 0 40px;
}

.hero-photo-frame {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 2/3;
}

.hero-photo-real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border: 2px solid var(--gold);
  box-shadow: 0 0 60px rgba(200,146,42,0.25), 0 0 120px rgba(200,146,42,0.10);
}

/* Photo placeholder — always visible, premium treatment.
 * When a real photo is uploaded, JS hides it via .hidden class.
 * No onerror JS needed — placeholder shows until a real image appears. */
.photo-placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(200,146,42,0.08) 0%, transparent 55%),
    linear-gradient(160deg, #0D0D0D 0%, #161616 50%, #0F0F0F 100%);
  border: 2px solid #D4AF37;
  box-shadow:
    inset 0 1px 0 rgba(248,224,144,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 0 30px rgba(212,175,55,0.22),
    0 0 60px rgba(212,175,55,0.10),
    0 0 100px rgba(212,175,55,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
  z-index: 2;
}

/* When real photo loads and is visible, hide the placeholder */
.photo-placeholder.hidden {
  display: none;
}

.photo-placeholder-crown {
  font-size: 3.5rem;
  line-height: 1;
  animation: crown-pulse 4s ease-in-out infinite;
}

@keyframes crown-pulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.photo-placeholder-text {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #D4AF37;
  text-align: center;
  line-height: 1.7;
  opacity: 0.90;
}

/* Gold glow on the placeholder plate itself */
.photo-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(248,224,144,0.08) 30deg,
    transparent 60deg,
    rgba(212,175,55,0.06) 120deg,
    transparent 180deg,
    rgba(248,224,144,0.08) 210deg,
    transparent 240deg,
    rgba(212,175,55,0.06) 300deg,
    transparent 360deg
  );
  pointer-events: none;
  animation: placeholder-sheen 6s linear infinite;
}

@keyframes placeholder-sheen {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero-photo-placeholder { border-color: #D4AF37; }

/* Text column — right half */
.hero-text-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 60px 80px 60px;
  gap: 28px;
}

.hero-funnel-headline {
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.headline-line {
  display: block;
}

.hero-funnel-sub {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--text-secondary);
  line-height: 1.5;
  font-style: italic;
  border-left: 3px solid var(--gold);
  padding-left: 20px;
  max-width: 440px;
}

.hero-identity-line {
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.5;
  opacity: 0.85;
  max-width: 440px;
}

.hero-funnel-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.btn-hero-cta {
  font-size: 1rem;
  padding: 16px 36px;
  letter-spacing: 0.06em;
}

@media (max-width: 900px) {
  .hero-funnel-inner {
    flex-direction: column;
  }
  .hero-photo-col {
    flex: none;
    padding: 120px 24px 0;
    align-items: center;
  }
  .hero-photo-frame {
    max-width: 280px;
    aspect-ratio: 2/3;
  }
  .hero-text-col {
    padding: 32px 24px 64px;
    align-items: center;
    text-align: center;
  }
  .hero-funnel-headline { font-size: clamp(3rem, 14vw, 5rem); align-items: center; }
  .hero-funnel-sub { text-align: left; }
  .hero-funnel-ctas { justify-content: center; }
}

/* --- STEP 2: IDENTITY SECTION --- */
.identity-section {
  background: linear-gradient(135deg, rgba(200,146,42,0.10) 0%, rgba(200,146,42,0.04) 50%, rgba(200,146,42,0.08) 100%);
  border-top: 1px solid var(--border-gold);
  border-bottom: 1px solid var(--border-gold);
  padding: 56px 0;
}

.identity-inner {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

.identity-moli-name {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}

.identity-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* --- STEP 3: AUTHORITY SECTION --- */
.authority-section { padding: 100px 0; }

.authority-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 48px;
}

@media (max-width: 768px) {
  .authority-grid { grid-template-columns: 1fr; }
}

.authority-card {
  display: flex;
  gap: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 32px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.authority-card:hover {
  border-color: var(--border-gold);
  box-shadow: 0 8px 40px rgba(200,146,42,0.10);
}

.authority-card-star {
  border-color: var(--border-gold);
  box-shadow: 0 4px 24px rgba(200,146,42,0.08);
}

.authority-photo-wrap {
  flex-shrink: 0;
  position: relative;
  width: 110px;
  height: 130px;
}

.authority-photo-real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border: 2px solid #D4AF37;
}

.authority-photo-placeholder {
  border-color: #D4AF37;
}

.authority-photo-placeholder .photo-placeholder-crown {
  font-size: 2rem;
}

.authority-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.authority-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.authority-name {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.authority-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 500px) {
  .authority-card {
    flex-direction: column;
    gap: 20px;
  }
  .authority-photo-wrap {
    width: 90px;
    height: 110px;
  }
}

/* --- STEP 4: PILLARS SECTION --- */
.pillars-section { padding: 100px 0; }

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

@media (max-width: 768px) {
  .pillars-grid { grid-template-columns: 1fr; }
}

.pillar-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  padding: 36px 28px;
  border-radius: 4px;
  transition: transform var(--transition), box-shadow var(--transition);
}

.pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(200,146,42,0.12);
}

.pillar-icon {
  font-size: 2rem;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 8px rgba(200,146,42,0.4));
}

.pillar-card h3 {
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.3;
}

.pillar-card p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* --- STEP 5: BILLBOARD STATS --- */
.stats-billboard { padding: 100px 0; }

.billboard-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 56px;
}

.billboard-stat {
  flex: 1;
  min-width: 180px;
  text-align: center;
  padding: 40px 20px;
}

.billboard-number {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 25%, var(--gold-light) 55%, var(--gold-bright) 70%, var(--gold-light) 80%, var(--gold) 90%, var(--gold-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
}

.billboard-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.billboard-divider {
  width: 1px;
  height: 80px;
  background: linear-gradient(180deg, transparent, var(--border-gold), transparent);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .billboard-divider { display: none; }
  .billboard-stats { gap: 0; }
  .billboard-stat {
    flex: 1 0 45%;
    padding: 28px 12px;
  }
}

/* --- STEP 6: INNER CIRCLE OFFER --- */
.inner-circle-offer { padding: 100px 0; }

.inner-circle-offer-inner {
  max-width: 740px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 2px solid var(--gold);
  border-radius: 4px;
  padding: 56px 60px;
  text-align: center;
  box-shadow:
    0 0 80px rgba(200,146,42,0.12),
    0 0 160px rgba(200,146,42,0.05);
  position: relative;
  overflow: hidden;
}

.inner-circle-offer-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-bright), var(--gold-light), var(--gold-dark));
}

.ico-header { margin-bottom: 40px; }

.ico-header h2 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin: 8px 0 12px;
}

.ico-sub {
  font-size: 1.1rem;
  color: var(--text-secondary);
  font-style: italic;
}

.ico-body { display: flex; flex-direction: column; align-items: center; gap: 28px; }

.ico-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.ico-perk {
  background: rgba(200,146,42,0.10);
  border: 1px solid var(--border-gold);
  color: var(--gold-light);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 8px 18px;
  border-radius: 2px;
}

.ico-secondary {
  color: var(--text-secondary);
  font-size: 1rem;
}

.ico-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  justify-content: center;
}

.ico-amount {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 900;
  color: var(--gold);
}

.ico-period {
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.btn-inner-circle {
  font-size: 0.95rem;
  padding: 18px 40px;
  letter-spacing: 0.08em;
  text-align: center;
  width: 100%;
  max-width: 480px;
}

@media (max-width: 600px) {
  .inner-circle-offer-inner {
    padding: 40px 24px;
  }
  .btn-inner-circle {
    font-size: 0.82rem;
    padding: 16px 20px;
  }
}

/* --- STEP 7: EMAIL CAPTURE --- */
.email-capture-section { padding: 80px 0; }

.email-capture-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  padding: 0 24px;
}

.email-capture-text { margin-bottom: 32px; }

.email-capture-text h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin: 12px 0 12px;
}

.email-capture-text p {
  color: var(--text-secondary);
  font-size: 1rem;
}

.email-capture-form { width: 100%; }

.email-capture-field {
  display: flex;
  gap: 0;
  border: 1px solid var(--border-gold);
  border-radius: 2px;
  overflow: hidden;
  background: var(--bg-card);
}

.email-capture-field input[type="email"] {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 16px 20px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-primary);
}

.email-capture-field input[type="email"]::placeholder {
  color: var(--text-muted);
}

.email-capture-field .btn {
  border-radius: 0;
  border-left: 1px solid rgba(200,146,42,0.2);
  padding: 16px 28px;
  flex-shrink: 0;
}

.email-capture-msg {
  margin-top: 12px;
  font-size: 0.88rem;
  text-align: center;
  padding: 10px 16px;
  border-radius: 2px;
}

.email-capture-msg.success {
  color: #6BE087;
  background: rgba(107,224,135,0.08);
  border: 1px solid rgba(107,224,135,0.2);
}

.email-capture-msg.error {
  color: #E06B6B;
  background: rgba(224,107,107,0.08);
  border: 1px solid rgba(224,107,107,0.2);
}

@media (max-width: 500px) {
  .email-capture-field {
    flex-direction: column;
    overflow: visible;
  }
  .email-capture-field input[type="email"] {
    border-bottom: 1px solid var(--border-gold);
  }
  .email-capture-field .btn {
    border-left: none;
    border-radius: 0 0 2px 2px;
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   PREMIUM EMAIL CAPTURE — Inner Circle Sections
   ============================================ */

/* Gold gradient background — premium feel */
.email-capture-premium {
  background: linear-gradient(
    135deg,
    #1A1500 0%,
    #0A0A0A 35%,
    #100D00 65%,
    #0A0A0A 100%
  );
  border-top: 1px solid rgba(200,146,42,0.2);
  border-bottom: 1px solid rgba(200,146,42,0.2);
  position: relative;
}

/* Stanchion rope dividers inside the premium section */
.capture-rope {
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200,146,42,0.1) 10%,
    rgba(200,146,42,0.6) 30%,
    rgba(248,224,144,0.9) 50%,
    rgba(200,146,42,0.6) 70%,
    rgba(200,146,42,0.1) 90%,
    transparent 100%
  );
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}
.capture-rope::before,
.capture-rope::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #ECC86E, #7B5510);
  box-shadow: 0 0 8px rgba(200,146,42,0.6);
}
.capture-rope::before { left: 0; }
.capture-rope::after  { right: 0; }
.capture-rope-top { margin-bottom: 48px; }
.capture-rope-bottom { margin-top: 48px; }

/* Premium badge */
.email-capture-premium-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  padding: 6px 20px;
  border: 1px solid rgba(200,146,42,0.35);
  border-radius: 2px;
  background: rgba(200,146,42,0.06);
}

/* Premium headline */
.email-capture-headline {
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.15;
  margin: 0 0 16px;
}

/* Premium subheadline */
.email-capture-sub {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 36px;
  font-family: var(--font-body);
}

/* Fine print */
.email-capture-fine {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: var(--font-body);
  letter-spacing: 0.02em;
}

/* Contact page email capture — slightly different container treatment */
.email-capture-contact {
  margin-top: 64px;
}

/* ============================================
   MEMBERSHIP PAGE — REDESIGN
   ============================================ */

/* --- Success Modal --- */
.success-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(8px);
}
.success-modal-box {
  background: linear-gradient(145deg, #111 0%, #1A1700 100%);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 56px 48px;
  max-width: 520px;
  width: 100%;
  text-align: center;
  position: relative;
}
.success-modal-icon {
  font-size: 2.5rem;
  color: var(--gold);
  margin-bottom: 20px;
  display: block;
  animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { text-shadow: 0 0 8px rgba(197,161,86,0.4); }
  50% { text-shadow: 0 0 24px rgba(197,161,86,0.8); }
}
.success-modal-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 12px;
}
.success-modal-sub {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 32px;
}
.success-modal-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 36px;
  text-align: left;
}
.success-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.success-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold);
}
.success-modal-close {
  width: 100%;
  letter-spacing: 0.1em;
  font-size: 0.9rem;
  padding: 16px 24px;
}
.success-modal-fine {
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.success-modal-fine a {
  color: var(--gold);
}

/* --- Membership Hero --- */
.membership-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #050505;
  padding: 140px 24px 80px;
}
.membership-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.membership-hero-tag {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--border-gold);
  border-radius: 2px;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 28px;
}
.membership-hero-headline {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #E8C97A 0%, #C5A156 40%, #F5E0A0 60%, #C5A156 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.membership-hero-sub {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 32px;
}
.membership-hero-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--gold);
  letter-spacing: 0.12em;
  margin-bottom: 40px;
  opacity: 0.8;
}
.btn-membership-hero {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  padding: 18px 40px;
  margin-bottom: 16px;
}
.membership-hero-fine {
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.membership-hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(197,161,86,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* --- Tier Cards --- */
.membership-tiers-section {
  background: var(--bg-primary);
}
.membership-tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 700px) {
  .membership-tiers { grid-template-columns: 1fr; }
}
.membership-tier-card {
  border: 1px solid var(--border-gold);
  border-radius: 4px;
  padding: 40px 36px;
  background: rgba(197,161,86,0.02);
  display: flex;
  flex-direction: column;
  position: relative;
}
.membership-tier-featured {
  background: linear-gradient(145deg, #C5A156 0%, #E8C97A 40%, #C5A156 80%);
  border-color: transparent;
  transform: scale(1.02);
}
@media (max-width: 700px) {
  .membership-tier-featured { transform: scale(1); }
}
.tier-featured-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #0A0A0A;
  color: var(--gold);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  padding: 6px 16px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  white-space: nowrap;
}
.tier-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 20px;
}
.tier-price-block {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 16px;
}
.tier-price-amount {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}
.tier-price-mo {
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.tier-tagline {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 28px;
  line-height: 1.5;
}
.tier-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.tier-features li {
  display: flex;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.feat-check {
  color: var(--gold);
  flex-shrink: 0;
  font-size: 0.85rem;
}
.tier-btn {
  width: 100%;
  text-align: center;
  justify-content: center;
  letter-spacing: 0.1em;
  font-size: 0.82rem;
  padding: 14px 24px;
  margin-top: auto;
}
.tier-fine {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 10px;
}

/* --- Benefits Grid --- */
.membership-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}
@media (max-width: 900px) {
  .membership-benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .membership-benefits-grid { grid-template-columns: 1fr; }
}
.membership-benefit {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(255,255,255,0.01);
  transition: border-color 0.2s;
}
.membership-benefit:hover {
  border-color: var(--border-gold);
}
.membership-benefit-icon {
  font-size: 1.3rem;
  color: var(--gold);
  margin-bottom: 14px;
}
.membership-benefit h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.membership-benefit p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* --- Testimonials --- */
.membership-testimonials-section {
  background: var(--bg-primary);
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 900px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}
.testimonial-card {
  border: 1px solid var(--border-gold);
  border-radius: 4px;
  padding: 32px;
  background: rgba(197,161,86,0.02);
  position: relative;
}
.testimonial-quote {
  font-size: 3rem;
  color: var(--gold);
  line-height: 0.5;
  margin-bottom: 16px;
  opacity: 0.5;
}
.testimonial-card p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 24px;
  font-style: italic;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C5A156, #8B6914);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #0A0A0A;
  flex-shrink: 0;
}
.testimonial-author strong {
  display: block;
  font-size: 0.85rem;
  color: var(--text-primary);
}
.testimonial-author span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* --- FAQ --- */
.membership-faq-section {
  background: var(--bg-secondary);
}
.faq-list {
  max-width: 720px;
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item:first-child {
  border-top: 1px solid var(--border);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.95rem;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 500;
}
.faq-question:hover {
  color: var(--gold);
}
.faq-icon {
  font-size: 1.2rem;
  color: var(--gold);
  flex-shrink: 0;
  line-height: 1;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0;
}
.faq-answer.open {
  max-height: 400px;
  padding-bottom: 20px;
}
.faq-answer p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* --- Membership Email Capture --- */
.membership-email-section {
  background: var(--bg-primary);
}
.membership-email-box {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: 56px 40px;
  border: 1px solid var(--border-gold);
  border-radius: 4px;
  background: rgba(197,161,86,0.02);
}
.membership-email-box h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--text-primary);
  margin: 12px 0 16px;
}
.membership-email-box p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 28px;
}
.membership-subscribe-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.membership-subscribe-field {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--border-gold);
  border-radius: 2px;
}
.membership-subscribe-field input[type="email"] {
  flex: 1;
  padding: 14px 18px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: var(--font-body);
}
.membership-subscribe-field input[type="email"]::placeholder {
  color: var(--text-muted);
}
.membership-subscribe-field .btn {
  border-radius: 0;
  padding: 14px 24px;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  border: none;
  border-left: 1px solid var(--border-gold);
  flex-shrink: 0;
}
.membership-email-fine {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 8px \!important;
  margin-bottom: 0 \!important;
}
@media (max-width: 500px) {
  .membership-subscribe-field { flex-direction: column; }
  .membership-subscribe-field input[type="email"] { border-bottom: 1px solid var(--border-gold); }
  .membership-subscribe-field .btn { border-left: none; width: 100%; justify-content: center; }
  .membership-email-box { padding: 40px 24px; }
}

/* --- Final CTA --- */
.membership-final-cta {
  background: var(--bg-secondary);
}
.membership-cta-box {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 64px 0;
}
.membership-cta-badge {
  display: inline-block;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  color: var(--gold);
  border: 1px solid var(--border-gold);
  padding: 6px 16px;
  border-radius: 2px;
  margin-bottom: 28px;
}
.membership-cta-box h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.15;
  margin-bottom: 16px;
}
.membership-cta-box > p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 36px;
}
.membership-cta-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.membership-cta-btn {
  letter-spacing: 0.1em;
  font-size: 0.82rem;
  padding: 16px 32px;
}
.membership-cta-fine {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ============================================
   HERO CAROUSEL — M.O.L.I. NETWORK
   ============================================ */

/* Outer section replaces .hero.hero-funnel */
.hero-carousel-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg-dark);
}

/* Carousel container */
.hero-carousel {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Base slide ── */
.carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* ── SLIDE 1: LOGO ── */
.carousel-slide-logo {
  background: var(--bg-dark);
  flex-direction: column;
  text-align: center;
  gap: 0;
}

.carousel-logo-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(200,146,42,0.08) 0%, rgba(10,10,10,0) 65%);
  pointer-events: none;
}

/* Solar burst container */
.carousel-logo-burst {
  position: relative;
  width: min(420px, 85vw);
  height: min(420px, 85vw);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: burst-pulse 4s ease-in-out infinite;
}

@keyframes burst-pulse {
  0%, 100% { filter: drop-shadow(0 0 30px rgba(200,146,42,0.45)) drop-shadow(0 0 60px rgba(248,224,144,0.2)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 50px rgba(200,146,42,0.65)) drop-shadow(0 0 90px rgba(248,224,144,0.35)); transform: scale(1.025); }
}

.burst-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.burst-rays-primary polygon { fill: #ECC86E; }
.burst-rays-secondary polygon { fill: #C8922A; }

/* Slow rotation on rays */
.burst-rays-primary { transform-origin: 250px 250px; animation: ray-spin 24s linear infinite; }
.burst-rays-secondary { transform-origin: 250px 250px; animation: ray-spin 36s linear infinite reverse; }

@keyframes ray-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Crown logo in burst center */
.burst-crown-center {
  position: relative;
  z-index: 2;
  width: 38%;
  height: 38%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 12px rgba(248,224,144,0.5));
}

.burst-crown-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Logo slide text */
.carousel-logo-content {
  position: relative;
  z-index: 3;
  margin-top: 24px;
  text-align: center;
  padding: 0 24px;
}

.carousel-logo-name {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 7vw, 4.5rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  margin-bottom: 10px;
}

.carousel-logo-sub {
  font-family: var(--font-body);
  font-size: clamp(0.65rem, 2vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.25em;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.carousel-logo-tagline-line {
  font-family: var(--font-heading);
  font-size: clamp(0.9rem, 2.5vw, 1.3rem);
  font-style: italic;
  color: var(--gold-light);
  letter-spacing: 0.1em;
  opacity: 0.85;
}

/* ── SLIDES 2 + 3: HOST ── */
.carousel-slide-host {
  flex-direction: row;
  align-items: stretch;
  background: var(--bg-dark);
  gap: 0;
}

/* Host photo column — left side ~55% */
.carousel-host-photo-col {
  flex: 0 0 55%;
  position: relative;
  overflow: hidden;
  background: #0d0d0d;
}

.carousel-host-photo-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.carousel-photo-real {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Host overlay — right side ~45% */
.carousel-host-overlay {
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 60px 48px 120px 48px;
  position: relative;
  z-index: 3;
}

/* Gold star badge */
.carousel-host-star-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--gold);
  border: 1px solid var(--border-gold);
  padding: 7px 18px;
  border-radius: 2px;
  margin-bottom: 22px;
  background: rgba(200,146,42,0.07);
}

.carousel-host-name {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.carousel-host-title {
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 1.5vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.carousel-host-desc {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.5vw, 1.05rem);
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 360px;
}

/* Host photo placeholder inside carousel */
.carousel-photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #161616, #111);
  border-right: 1px solid var(--border-gold);
  gap: 16px;
  text-align: center;
  padding: 24px;
}

.carousel-photo-placeholder .photo-placeholder-crown {
  font-size: 3.5rem;
  color: var(--gold);
  opacity: 0.5;
  filter: drop-shadow(0 0 8px rgba(200,146,42,0.4));
}

.carousel-photo-placeholder .photo-placeholder-text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  line-height: 1.6;
}

/* Hide placeholder when real photo loads */
.carousel-photo-placeholder.hidden { display: none; }

/* ── Navigation Dots ── */
.carousel-dots-nav {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 10;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
  opacity: 0.6;
}

.carousel-dot.active,
.carousel-dot:hover {
  background: var(--gold);
  opacity: 1;
  transform: scale(1.2);
}

/* ── CTA Zone ── */
.carousel-cta-zone {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px 20px;
  background: linear-gradient(to top, rgba(10,10,10,0.92) 60%, rgba(10,10,10,0));
  flex-wrap: wrap;
}

.carousel-cta-zone .btn { min-width: 0; }

/* ── Mobile ── */
@media (max-width: 768px) {
  .carousel-slide-host {
    flex-direction: column;
  }
  .carousel-host-photo-col {
    flex: 0 0 58vh;
    min-height: 58vh;
    max-height: 58vh;
  }
  .carousel-host-photo-frame {
    min-height: 58vh;
  }
  .carousel-host-overlay {
    flex: 1;
    padding: 24px 24px 90px 24px;
    align-items: center;
    text-align: center;
  }
  .carousel-host-desc { max-width: 100%; }
  .carousel-logo-burst {
    width: min(300px, 80vw);
    height: min(300px, 80vw);
  }
  .carousel-logo-name { font-size: clamp(1.6rem, 8vw, 2.5rem); }
  .carousel-dots-nav { bottom: 72px; }
}

/* ── Play / Pause Button ── */
.carousel-playpause {
  position: absolute;
  bottom: 72px;
  right: 24px;
  z-index: 20;
  width: 40px;
  height: 40px;
  background: rgba(10,10,10,0.7);
  border: 1px solid rgba(200,146,42,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gold);
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.carousel-playpause:hover {
  background: rgba(30,20,5,0.85);
  border-color: var(--gold);
  transform: scale(1.08);
}

.carousel-playpause:focus {
  outline: 1px solid var(--gold);
  outline-offset: 2px;
}

.playpause-icon {
  width: 18px;
  height: 18px;
}

/* Default: hide play triangle (show pause bars when playing) */
.carousel-playpause .play-triangle { display: none; }

/* When paused, show play triangle, hide pause bars */
.carousel-playpause.paused .pause-bar { display: none; }
.carousel-playpause.paused .play-triangle { display: block; }

@media (max-width: 768px) {
  .carousel-playpause { right: 16px; bottom: 72px; }
}

/* ============================================
   PHOTO UPLOAD BUTTONS
   ============================================ */

/* Authority section upload button */
.authority-photo-wrap {
  position: relative;
}

.photo-upload-btn {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,10,10,0.85);
  border: 1px solid var(--border-gold);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
  z-index: 5;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.photo-upload-btn:hover {
  background: var(--gold);
  color: #0A0A0A;
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(200,146,42,0.4);
}

.photo-upload-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Small camera icon version for about page */
.host-upload-btn {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* Host avatar uploadable state */
.host-avatar-uploadable {
  position: relative;
}

.host-avatar-star.host-avatar-uploadable { display: inline-flex; }

/* Photo inside star avatar */
.host-avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 1;
  display: none; /* hidden by default, shown via JS when loaded */
}

.host-avatar-photo.loaded {
  display: block;
}

/* When photo loaded, hide initials inside star */
.host-avatar-uploadable.photo-loaded .avatar-inner,
.host-avatar-uploadable.photo-loaded .star-ring {
  display: none;
}

/* Upload status toast */
.upload-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,10,10,0.95);
  border: 1px solid var(--border-gold);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 4px;
  z-index: 9999;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.upload-toast.toast-success { border-color: var(--gold); color: var(--gold-light); }
.upload-toast.toast-error { border-color: #e55; color: #f88; }
.upload-toast.fade-out { opacity: 0; }

/* ============================================
   FOOTER LOGO (plain text — no Crown M PNG)
   Replaced per task #1151372
   ============================================ */
.footer-logo-icon {
  flex-shrink: 0;
  width: 42px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(200,146,42,0.06);
  border: 1px solid rgba(200,146,42,0.2);
  border-radius: 4px;
}

.footer-moli-letter {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: transparent;
  background: linear-gradient(135deg, #7B5510 0%, #C8922A 25%, #ECC86E 55%, #F8E090 70%, #ECC86E 80%, #C8922A 90%, #7B5510 100%);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 1;
  filter: drop-shadow(0 0 5px rgba(200,146,42,0.3));
}