/* ==========================================================================
   JOEL KIDS MINISTRY — DEEP OCEAN KIDS THEME 🌊✨
   Bright, playful, high-energy — deep ocean meets kids fun
   ========================================================================== */

/* ── 1. Design Tokens ───────────────────────────────────────────────────── */
:root {
  /* 🌊 Ocean Depth Palette — rich, saturated blues (not muddy/dark) */
  --ocean-top:       #0d4ca8;   /* Luminous Royal Sapphire — radiant, perfectly balanced (L=35%) */
  --ocean-mid:       #09388a;   /* Rich Ocean Cobalt (L=28%) */
  --ocean-deep:      #052466;   /* Regal Deep Marine Navy (L=21%) */
  --ocean-twilight:  #03184c;   /* Twilight Ocean Navy (L=15%) */
  --ocean-midnight:  #021038;   /* Velvet Deep Midnight (L=11%) */
  --ocean-abyss:     #010924;   /* Abyssal Ocean Floor (L=7%) */

  /* ✨ Playful Accent Palette — bright, bold, kids-energy */
  --accent-gold:        #ffd726;          /* Juicy sunshine yellow    */
  --accent-gold-hover:  #ffe855;          /* Bright lemon hover       */
  --accent-gold-dark:   #001f5c;          /* Navy text on gold bg     */
  --accent-gold-shadow: rgba(255,215,38,0.45);

  --accent-cyan:        #00eedd;          /* Electric aqua — vivid    */
  --accent-cyan-bright: #40d4ff;          /* Sky-electric blue        */
  --accent-cyan-glow:   rgba(0,238,221,0.4);

  --accent-purple:      #a855f7;          /* Playful violet           */
  --accent-green:       #22d65a;          /* Bright lime-green        */
  --accent-pink:        #ff4d9d;          /* Hot coral-pink           */
  --coral:              #ff6b3d;          /* Vivid marine coral       */
  --coral-pink:         #ff4d9d;

  /* 🪟 Glassmorphism — brighter, more visible on vivid backgrounds */
  --glass-bg:           rgba(255,255,255,0.11);
  --glass-bg-hover:     rgba(255,255,255,0.20);
  --glass-border:       rgba(255,255,255,0.22);
  --glass-border-hover: rgba(0,238,221,0.65);
  --card-shadow:        0 12px 36px rgba(0,8,40,0.50);
  --card-shadow-hover:  0 20px 52px rgba(0,238,221,0.25);

  /* ✍️ Typography */
  --font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --text-white:  #ffffff;
  --text-muted:  #e4efff;
  --text-subtle: #b6d2fc;

  /* 🧭 Layout */
  --navbar-height:     74px;
  --max-width:         1380px;
  --radius-xl:         28px;
  --radius-lg:         20px;
  --radius-md:         14px;
  --radius-pill:       9999px;
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navbar-height) + 20px);
}

@media (hover: none) and (pointer: coarse) {
  html {
    scroll-behavior: auto; /* Zero scroll hitching / snapping on mobile touch devices */
  }
}

/* 🌊 Bright deep-ocean kids gradient — vivid & energetic, not gloomy */
body {
  font-family: var(--font-family);
  background: linear-gradient(180deg, 
    var(--ocean-deep) 0%,
    var(--ocean-mid) 14%,
    var(--ocean-top) 28%,
    var(--ocean-mid) 48%,
    var(--ocean-twilight) 68%,
    var(--ocean-midnight) 85%,
    var(--ocean-abyss) 100%
  );
  color: var(--text-white);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  transition: background 0.5s ease, color 0.3s ease;
}

/* ── 3. Rainbow Letter Interactive Hover Effect ──────────────────────────── */
.joelkids-rainbow-hook {
  display: inline-flex;
  align-items: center;
  cursor: default;
  user-select: none;
}

.rainbow-letter {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), 
              color 0.2s ease, 
              text-shadow 0.25s ease;
  cursor: pointer;
  position: relative;
}

/* Tactile springy bounce, toy keypress physics on hover */
.rainbow-letter:hover {
  transform: translateY(-12px) scale(1.18);
  z-index: 10;
  filter: drop-shadow(0 14px 18px rgba(0, 10, 40, 0.6));
}

.rainbow-letter:active {
  transform: translateY(2px) scale(0.94);
  transition: transform 0.08s ease;
}

.rainbow-space {
  display: inline-block;
  width: 7px;
}

/* 🌈 Rainbow Color Mapping per Letter */
.rainbow-letter[data-color="#ff3355"]:hover, .rainbow-letter:nth-child(1):hover {
  color: #ff3355 !important;
  -webkit-text-fill-color: #ff3355 !important;
  text-shadow: 0 0 18px rgba(255, 51, 85, 0.9), 0 0 35px rgba(255, 51, 85, 0.5);
}

.rainbow-letter[data-color="#ff7a00"]:hover, .rainbow-letter:nth-child(2):hover {
  color: #ff7a00 !important;
  -webkit-text-fill-color: #ff7a00 !important;
  text-shadow: 0 0 18px rgba(255, 122, 0, 0.9), 0 0 35px rgba(255, 122, 0, 0.5);
}

.rainbow-letter[data-color="#ffd200"]:hover, .rainbow-letter:nth-child(3):hover {
  color: #ffd200 !important;
  -webkit-text-fill-color: #ffd200 !important;
  text-shadow: 0 0 18px rgba(255, 210, 0, 0.9), 0 0 35px rgba(255, 210, 0, 0.5);
}

.rainbow-letter[data-color="#00e676"]:hover, .rainbow-letter:nth-child(4):hover {
  color: #00e676 !important;
  -webkit-text-fill-color: #00e676 !important;
  text-shadow: 0 0 18px rgba(0, 230, 118, 0.9), 0 0 35px rgba(0, 230, 118, 0.5);
}

.rainbow-letter[data-color="#00eedd"]:hover, .rainbow-letter:nth-child(5):hover, .rainbow-letter:nth-child(6):hover {
  color: #00eedd !important;
  -webkit-text-fill-color: #00eedd !important;
  text-shadow: 0 0 18px rgba(0, 238, 221, 0.9), 0 0 35px rgba(0, 238, 221, 0.5);
}

.rainbow-letter[data-color="#00a2ff"]:hover, .rainbow-letter:nth-child(7):hover {
  color: #00a2ff !important;
  -webkit-text-fill-color: #00a2ff !important;
  text-shadow: 0 0 18px rgba(0, 162, 255, 0.9), 0 0 35px rgba(0, 162, 255, 0.5);
}

.rainbow-letter[data-color="#9d4edd"]:hover, .rainbow-letter:nth-child(8):hover {
  color: #9d4edd !important;
  -webkit-text-fill-color: #9d4edd !important;
  text-shadow: 0 0 18px rgba(157, 78, 221, 0.9), 0 0 35px rgba(157, 78, 221, 0.5);
}

.rainbow-letter[data-color="#ff3399"]:hover, .rainbow-letter:nth-child(9):hover {
  color: #ff3399 !important;
  -webkit-text-fill-color: #ff3399 !important;
  text-shadow: 0 0 18px rgba(255, 51, 153, 0.9), 0 0 35px rgba(255, 51, 153, 0.5);
}

/* ── 4. Ambient Underwater Visual Decor ──────────────────────────────────── */
.ocean-sunrays {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ray {
  position: absolute;
  top: -150px;
  width: 380px;
  height: 120vh;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(0, 238, 221, 0.04) 60%, transparent 100%);
  filter: blur(40px);
  transform-origin: top center;
  pointer-events: none;
}

.ray-1 { left: 8%; transform: rotate(18deg); animation: pulseRay 10s ease-in-out infinite alternate; }
.ray-2 { left: 45%; transform: rotate(-5deg); animation: pulseRay 14s ease-in-out infinite alternate 2s; }
.ray-3 { right: 12%; transform: rotate(-22deg); animation: pulseRay 12s ease-in-out infinite alternate 1s; }

@keyframes pulseRay {
  0% { opacity: 0.4; }
  100% { opacity: 0.85; }
}

.ocean-bubbles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* Place in background behind main content & footer */
  overflow: hidden;
}

.ambient-bubble {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, rgba(255, 255, 255, 0.45) 0%, rgba(0, 238, 221, 0.15) 55%, rgba(0, 70, 140, 0.22) 100%);
  border: 1px solid rgba(0, 238, 221, 0.35);
  animation: floatBubbleUp linear infinite;
  box-shadow: 0 0 10px rgba(0, 238, 221, 0.22), inset 0 0 5px rgba(255, 255, 255, 0.3);
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  opacity: 0.6;
  transition: transform 0.2s ease-out, filter 0.2s ease-out, opacity 0.2s ease-out;
}

.ambient-bubble:hover {
  opacity: 0.95;
  filter: brightness(1.3) drop-shadow(0 0 10px rgba(0, 238, 221, 0.7));
  transform: scale(1.15);
}

@keyframes floatBubbleUp {
  0% {
    transform: translateY(0) translateX(0) scale(0.8);
    opacity: 0;
  }
  15% {
    opacity: 0.7;
  }
  50% {
    transform: translateY(-50vh) translateX(25px) scale(1);
    opacity: 0.8;
  }
  85% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-105vh) translateX(-20px) scale(1.1);
    opacity: 0;
  }
}

/* Bubble pop interaction */
.ambient-bubble.is-popping {
  animation: bubblePop 0.28s cubic-bezier(0.1, 0.9, 0.2, 1) forwards !important;
  pointer-events: none !important;
}
@keyframes bubblePop {
  0%   { transform: scale(1);   opacity: 0.9; }
  50%  { transform: scale(1.9); opacity: 0.6; filter: brightness(1.8); }
  100% { transform: scale(2.7); opacity: 0;   }
}

/* Pop splat particles */
.bubble-pop-splat {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  background: radial-gradient(circle, #ffffff 0%, rgba(0, 238, 221, 0.9) 65%, transparent 100%);
  box-shadow: 0 0 10px rgba(0, 238, 221, 0.85);
  animation: splatFly 0.45s ease-out forwards;
}
@keyframes splatFly {
  0%   { transform: translate(0, 0) scale(1);   opacity: 1; }
  100% { transform: translate(var(--sx), var(--sy)) scale(0.2); opacity: 0; }
}

/* ── 5. Modern Frosted Glass Sticky Navbar (GMS Style) ───────────────────── */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--navbar-height);
  background: rgba(0, 26, 90, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 1000;
  transition: var(--transition-smooth);
}

.navbar.scrolled {
  background: rgba(0, 18, 65, 0.94);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  border-bottom-color: rgba(0, 238, 221, 0.3);
}

.nav-container {
  max-width: var(--max-width);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: relative;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-white);
  transition: transform 0.2s ease;
}

.nav-brand:hover {
  transform: translateY(-1px);
}

.logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 238, 221, 0.35));
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-title {
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 950;
  letter-spacing: -0.02em;
  color: var(--text-white);
}

.brand-sub {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--accent-gold);
  text-transform: uppercase;
  opacity: 0.9;
}

/* ── Desktop: Center nav-menu absolutely in the navbar ── */
.nav-menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

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

.nav-link {
  color: var(--text-white);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  transition: var(--transition-smooth);
  opacity: 0.88;
  white-space: nowrap;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.14);
  opacity: 1;
  color: var(--accent-cyan);
}

.nav-highlight {
  background: rgba(247, 209, 48, 0.16);
  border: 1px solid var(--accent-gold);
  color: var(--accent-gold) !important;
  opacity: 1;
}

.nav-highlight:hover {
  background: var(--accent-gold) !important;
  color: var(--accent-gold-dark) !important;
  box-shadow: 0 0 16px var(--accent-gold);
}

/* ── Dropdown Nav System ─────────────────────────────────────── */

/* Parent <li> becomes the positioning anchor */
.nav-item {
  position: relative;
  list-style: none;
}

/* Chevron arrow inside the trigger */
.nav-chevron {
  display: inline-block;
  font-size: 10px;
  margin-left: 3px;
  vertical-align: middle;
  transition: transform 0.22s ease;
  opacity: 0.75;
  line-height: 1;
}

/* The dropdown panel — hidden by default */
.nav-dropdown {
  position: absolute;
  top: 100%;           /* Flush against the trigger — no gap */
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 200px;
  list-style: none;
  /* Invisible padding-top bridges cursor travel from trigger → panel */
  padding: 12px 8px 8px;
  margin: 0;

  /* Frosted glass matching the navbar style */
  background: rgba(0, 22, 80, 0.95);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(0, 238, 221, 0.25);
  border-radius: 14px;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.06);

  /* Hidden state */
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.18s ease,
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.18s;
}

/* Transparent hover-bridge: covers the gap above the panel */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: -14px;          /* Reaches back up to overlap with the trigger */
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
}

/* Small caret triangle above the panel */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 6px;
  background: rgba(0, 22, 80, 0.95);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Visible state — JS adds .is-open to the parent li */
.nav-has-dropdown.is-open .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity 0.18s ease,
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}

/* Rotate chevron when open */
.nav-has-dropdown.is-open .nav-chevron {
  transform: rotate(-180deg);
  opacity: 1;
}

/* Individual dropdown items */
.nav-dropdown-item {
  display: block;
  padding: 9px 14px;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.nav-dropdown-item:hover {
  background: rgba(0, 238, 221, 0.15);
  color: var(--accent-cyan);
  transform: translateX(3px);
}

/* Divider between items (optional — after each except last) */
.nav-dropdown li:not(:last-child) .nav-dropdown-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px 9px 0 0;
}

/* ── Light Theme ── */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-toggle-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.hamburger-bar {
  width: 24px;
  height: 2.5px;
  background-color: var(--text-white);
  border-radius: 2px;
  transition: var(--transition-smooth);
}

.mobile-toggle-btn.active .hamburger-bar:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.mobile-toggle-btn.active .hamburger-bar:nth-child(2) {
  opacity: 0;
}
.mobile-toggle-btn.active .hamburger-bar:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ── 6. Cinematic Hero Section ───────────────────────────────────────────── */
.hero-section {
  position: relative;
  z-index: 10;
  padding-top: calc(var(--navbar-height) + 60px);
  padding-bottom: 120px;
  min-height: 100vh;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: visible;
}

.hero-container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-bottom: 0;
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 28px;
  text-align: center;
  width: 100%;
  position: relative;
  user-select: none;
}

/* ── Nothing Tech-Inspired Status Widget Kicker ── */
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 32px;
  background: rgba(1, 20, 60, 0.60);
  border: 1.5px solid rgba(0, 238, 221, 0.45);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  color: #ffffff;
  font-size: clamp(14px, 2.2vw, 18px);
  font-weight: 850;
  letter-spacing: clamp(4px, 0.6vw, 6px);
  text-transform: uppercase;
  margin-bottom: 20px;
  box-shadow: 0 6px 25px rgba(0, 10, 40, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.hero-kicker:hover {
  background: rgba(1, 30, 80, 0.80);
  border-color: var(--accent-cyan);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 36px rgba(0, 238, 221, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.kicker-pulse {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-cyan), 0 0 20px var(--accent-cyan);
  animation: kickerDotPulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes kickerDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.55; }
}

.kicker-text {
  letter-spacing: inherit;
  font-weight: 850;
}

/* ── Cyber-Arcade Flagship Title: 3D Toy-Cartridge Bevel & Periodic Light Sweep ── */
.hero-main-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(5.2rem, 19vw, 15rem);
  font-weight: 950;
  letter-spacing: clamp(-1px, 0.4vw, 4px);
  line-height: 0.95;
  color: #ffffff;
  text-transform: uppercase;
  position: relative;
  /* Clean layered 3D sticker depth — crisp edges, video-game arcade feel */
  text-shadow: 
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 0 rgba(0, 40, 130, 0.98),
    0 8px 0 rgba(0, 24, 85, 0.98),
    0 16px 32px rgba(0, 10, 45, 0.8),
    0 0 35px rgba(0, 238, 221, 0.35);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 🌟 Periodic Ambient Glass Sheen Reflection (Glides across every 5s) */
.hero-main-title::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 30%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(0, 238, 221, 0.3) 65%,
    transparent 100%
  );
  transform: skewX(-24deg);
  pointer-events: none;
  animation: heroGlyphSheen 5.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  mix-blend-mode: overlay;
}

@keyframes heroGlyphSheen {
  0% { left: -120%; }
  35% { left: 160%; }
  100% { left: 160%; }
}

.hero-main-title:hover {
  transform: scale(1.02);
}

.hero-subtitle {
  font-size: clamp(14px, 1.8vw, 16.5px);
  color: rgba(215, 230, 255, 0.82);
  max-width: 680px;
  line-height: 1.68;
  margin-bottom: 32px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: var(--transition-smooth);
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-gold) 0%, #ffbe1a 100%);
  color: var(--accent-gold-dark);
  box-shadow: 0 6px 20px var(--accent-gold-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 28px rgba(247, 209, 48, 0.55);
}

.btn-glass {
  background: var(--glass-bg);
  color: var(--text-white);
  border: 1.5px solid var(--glass-border);
  backdrop-filter: blur(12px);
}

.btn-glass:hover {
  background: var(--glass-bg-hover);
  border-color: var(--accent-cyan);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 238, 221, 0.25);
  color: var(--accent-cyan);
}

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

/* ══════════════════════════════════════════════════════════════════════════
   Living Mascots System (Sembuh-Inspired Dynamic Interactive Companions)
   ══════════════════════════════════════════════════════════════════════════ */
.mascot-companion-wrap {
  position: absolute;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  z-index: 12;
  pointer-events: auto;
}

/* Interactive Mascot Image */
.interactive-mascot {
  display: block;
  height: auto;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.35s ease;
  will-change: transform, filter;
}

.interactive-mascot:hover {
  filter: drop-shadow(0 16px 32px rgba(0, 238, 221, 0.55)) brightness(1.06) !important;
}

/* Gentle Squish on Click / Tap */
.interactive-mascot.is-squished,
.sea-critter.is-squished > img {
  animation: mascotGentleSquish 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes mascotGentleSquish {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.05, 0.95); }
  60%  { transform: scale(0.98, 1.02); }
  100% { transform: scale(1, 1); }
}

/* ── Interactive Speech Bubble ── */
.mascot-speech-bubble {
  position: absolute;
  background: #ffffff;
  color: #031535;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  padding: 10px 18px;
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(0, 8, 28, 0.65), 0 0 0 2px var(--accent-cyan);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px) scale(0.85);
  transform-origin: bottom center;
  transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 25;
}

.mascot-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 28px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid #ffffff;
}

.companion-octopus .mascot-speech-bubble::after {
  right: auto;
  left: 28px;
}

.mascot-companion-wrap:hover .mascot-speech-bubble,
.mascot-speech-bubble.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ── 1. Sembuh-Inspired Big Living Mascot Stage (Bottom of Hero) ── */
.hero-mascot-stage {
  width: 100%;
  max-width: 1420px;
  margin-top: clamp(18px, 2.5vh, 32px);
  margin-bottom: 0;
  position: relative;
  z-index: 6;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.3s ease;
}

.hero-mascot-group {
  position: relative;
  width: 100%;
  height: clamp(280px, 34vw, 440px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
  overflow: visible;
}

/* Individual Squad Members — BIGGER & IMPOSING */
.hero-squad-member {
  position: absolute;
  bottom: 0;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 90%;
  will-change: transform, opacity;
  transition: filter 0.3s ease;
}

.hero-squad-member:hover {
  z-index: 10 !important;
}

/* ── 4 Distinct Non-Overlapping Columns Across The Page (Generous Spacing) ── */
/* Coral: Far Left (0% - 22%) */
.hero-squad-member.squad-coral {
  left: 1%;
  width: clamp(180px, 22vw, 300px);
  bottom: -18px;
  z-index: 2;
  transform: translate3d(
               calc(var(--squad-coral-x, 0px) + var(--mouse-tilt-x, 0px)),
               var(--squad-coral-y, 0px),
               0)
             rotate(calc(var(--squad-coral-rot, 0deg) + var(--mouse-rot, 0deg)))
             scale(var(--squad-coral-scale, 1));
  opacity: var(--squad-coral-opacity, 1);
}

/* Starfish: Left-Center (26% - 48%) */
.hero-squad-member.squad-starfish {
  left: 26%;
  width: clamp(185px, 22.5vw, 305px);
  bottom: -12px;
  z-index: 4;
  transform: translate3d(
               calc(var(--squad-starfish-x, 0px) + var(--mouse-tilt-x, 0px)),
               var(--squad-starfish-y, 0px),
               0)
             rotate(calc(var(--squad-starfish-rot, 0deg) + var(--mouse-rot, 0deg)))
             scale(var(--squad-starfish-scale, 1));
  opacity: var(--squad-starfish-opacity, 1);
}

/* Jellyfish: Right-Center (52% - 74%) */
.hero-squad-member.squad-jellyfish {
  left: 52%;
  transform-origin: 50% 95%;
  width: clamp(190px, 23vw, 315px);
  bottom: 24px;
  z-index: 5;
  transform: translate3d(
               calc(var(--squad-jelly-x, 0px) + var(--mouse-tilt-x, 0px)),
               var(--squad-jelly-y, 0px),
               0)
             rotate(calc(var(--squad-jelly-rot, 0deg) + var(--mouse-rot, 0deg)))
             scale(var(--squad-jelly-scale, 1));
  opacity: var(--squad-jelly-opacity, 1);
}

/* Octopus: Far Right (77% - 99%) */
.hero-squad-member.squad-octopus {
  left: 77%;
  right: auto;
  width: clamp(185px, 22.5vw, 310px);
  bottom: -12px;
  z-index: 3;
  transform: translate3d(
               calc(var(--squad-octo-x, 0px) + var(--mouse-tilt-x, 0px)),
               var(--squad-octo-y, 0px),
               0)
             rotate(calc(var(--squad-octo-rot, 0deg) + var(--mouse-rot, 0deg)))
             scale(var(--squad-octo-scale, 1));
  opacity: var(--squad-octo-opacity, 1);
}

/* Mascot Images & Sea Critters inside Hero Squad */
.sea-critter {
  position: relative;
  display: block;
  width: 100%;
  will-change: transform; /* promote to compositor layer */
}

.sea-critter > img {
  display: block;
  width: 100%;
  height: auto;
}

.squad-mascot-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── TRAVELLING MODE: fixed to viewport while swimming to their section ── */
/* JS adds this class when user starts scrolling past the hero             */
.hero-squad-member.squad-travelling {
  position: fixed !important;
  z-index: 9999 !important;
  pointer-events: none;    /* don't block page interaction while swimming */
  bottom: auto !important;
  will-change: transform, top, left;
}

/* Allow hovering and clicking the actual mascot image at any time */
.hero-squad-member.squad-travelling .interactive-mascot,
.hero-squad-member.squad-travelling .sea-critter,
.hero-squad-member.squad-travelling.is-landed {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.hero-squad-member.squad-travelling.is-landed {
  z-index: 10005 !important;
}

.hero-squad-member.squad-travelling:hover,
.hero-squad-member.squad-travelling.is-landed:hover {
  pointer-events: auto !important;
}

.hero-squad-member:hover .sea-critter {
  filter: drop-shadow(0 16px 32px rgba(0, 238, 221, 0.55)) brightness(1.06);
}

.squad-coral-img,
.squad-coral .sea-critter {
  filter: drop-shadow(0 16px 30px rgba(0, 238, 221, 0.45));
  animation: coralIdleBreathe 4.2s ease-in-out infinite;
}

.squad-starfish-img,
.squad-starfish .sea-critter {
  filter: drop-shadow(0 16px 30px rgba(255, 215, 38, 0.50));
  animation: starfishIdleWave 3.8s ease-in-out infinite;
}

.squad-jellyfish-img,
.squad-jellyfish .sea-critter {
  filter: drop-shadow(0 18px 34px rgba(255, 105, 180, 0.55)) drop-shadow(0 0 18px rgba(0, 238, 221, 0.40));
  animation: jellyfishIdleFloat 4s ease-in-out infinite;
}

.squad-octopus-img,
.squad-octopus .sea-critter {
  filter: drop-shadow(0 16px 30px rgba(255, 122, 0, 0.50));
  animation: octopusIdleHop 3.4s ease-in-out infinite;
}

/* ── Stop CSS keyframe animations during travel: JS bob handles all motion ── */
.hero-squad-member.squad-travelling:not(.is-landed) .sea-critter:not(.is-squished) {
  animation: none !important;
}


/* Idle Animations for Squad Images */
@keyframes jellyfishIdleFloat {
  0%   { transform: translateY(0) rotate(-3deg); }
  50%  { transform: translateY(-14px) rotate(4deg) scale(1.04); }
  100% { transform: translateY(0) rotate(-3deg); }
}

@keyframes octopusIdleHop {
  0%   { transform: translateY(0) scale(1, 1); }
  40%  { transform: translateY(-12px) scale(0.97, 1.05) rotate(3deg); }
  65%  { transform: translateY(0) scale(1.04, 0.96) rotate(-2deg); }
  100% { transform: translateY(0) scale(1, 1); }
}

@keyframes starfishIdleWave {
  0%   { transform: rotate(0deg) translateY(0); }
  35%  { transform: rotate(-5deg) translateY(-8px); }
  70%  { transform: rotate(4deg) translateY(-3px); }
  100% { transform: rotate(0deg) translateY(0); }
}

@keyframes coralIdleBreathe {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(1.04) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ── Speech bubbles: Dynamic counter-scale and edge-safe positioning ── */
.hero-squad-member .mascot-speech-bubble {
  bottom: 105% !important;
  left: 50%;
  right: auto;
  font-size: 12.5px !important;
  font-weight: 750 !important;
  letter-spacing: 0.1px;
  line-height: 1.3 !important;
  padding: 8px 16px !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 28px rgba(0, 8, 28, 0.60), 0 0 0 1.5px var(--accent-cyan) !important;
  white-space: nowrap !important;
  transform: translateX(-50%) translateY(10px) scale(calc(var(--bubble-scale, 1) * 0.85)) !important;
  transform-origin: bottom center !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-squad-member:hover .mascot-speech-bubble,
.hero-squad-member.squad-travelling:hover .mascot-speech-bubble,
.hero-squad-member.is-landed:hover .mascot-speech-bubble,
.hero-squad-member .mascot-speech-bubble.is-visible,
.hero-squad-member.is-landed .mascot-speech-bubble.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) scale(var(--bubble-scale, 1)) !important;
  pointer-events: auto !important;
}


/* Left-boundary safe: anchors to left of mascot, opens into screen to the right */
.hero-squad-member.bubble-align-left .mascot-speech-bubble {
  left: 0 !important;
  right: auto !important;
  transform: translateX(0) translateY(10px) scale(calc(var(--bubble-scale, 1) * 0.85)) !important;
  transform-origin: bottom left !important;
}
.hero-squad-member.bubble-align-left:hover .mascot-speech-bubble,
.hero-squad-member.bubble-align-left.is-landed:hover .mascot-speech-bubble,
.hero-squad-member.bubble-align-left.is-landed .mascot-speech-bubble.is-visible {
  transform: translateX(0) translateY(0) scale(var(--bubble-scale, 1)) !important;
}
.hero-squad-member.bubble-align-left .mascot-speech-bubble::after {
  left: 28px !important;
  right: auto !important;
  transform: none !important;
}

/* Right-boundary safe: anchors to right of mascot, opens into screen to the left */
.hero-squad-member.bubble-align-right .mascot-speech-bubble {
  left: auto !important;
  right: 0 !important;
  transform: translateX(0) translateY(10px) scale(calc(var(--bubble-scale, 1) * 0.85)) !important;
  transform-origin: bottom right !important;
}
.hero-squad-member.bubble-align-right:hover .mascot-speech-bubble,
.hero-squad-member.bubble-align-right.is-landed:hover .mascot-speech-bubble,
.hero-squad-member.bubble-align-right.is-landed .mascot-speech-bubble.is-visible {
  transform: translateX(0) translateY(0) scale(var(--bubble-scale, 1)) !important;
}
.hero-squad-member.bubble-align-right .mascot-speech-bubble::after {
  right: 28px !important;
  left: auto !important;
  transform: none !important;
}

.hero-squad-member .mascot-speech-bubble::after {
  bottom: -8px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid #ffffff;
  border-bottom: none;
}

.hero-metrics {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  padding: 16px 36px;
  border-radius: var(--radius-pill);
  box-shadow: var(--card-shadow);
}

.metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.metric-number {
  font-size: 26px;
  font-weight: 900;
  color: var(--accent-gold);
  line-height: 1.1;
}

.metric-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-divider {
  width: 1px;
  height: 32px;
  background-color: var(--glass-border);
}

/* ── Floating Bottom-Right Service Countdown Dock (Non-Intrusive) ───────── */
.floating-countdown-dock {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: max-content;
  max-width: calc(100vw - 28px);
  height: auto !important;
  max-height: max-content !important;
  box-sizing: border-box;
  z-index: 9999;
  background: rgba(1, 16, 50, 0.92);
  border: 1.5px solid rgba(0, 238, 221, 0.45);
  border-radius: var(--radius-lg);
  padding: 12px 18px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 30px rgba(0, 5, 25, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  user-select: none;
  touch-action: none;
}

.floating-countdown-dock:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 14px 40px rgba(0, 238, 221, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Active Dragging state */
.floating-countdown-dock.is-dragging {
  cursor: grabbing !important;
  transition: none !important;
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 18px 45px rgba(0, 238, 221, 0.45), 0 0 30px rgba(0, 238, 221, 0.3) !important;
  transform: scale(1.02) !important;
}

.floating-countdown-dock.is-dragging * {
  cursor: grabbing !important;
}

/* Closing / Remove animation */
.floating-countdown-dock.is-closing {
  opacity: 0 !important;
  transform: scale(0.75) translateY(12px) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

.dock-countdown-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dock-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--accent-cyan);
  cursor: grab;
}

.dock-drag-handle {
  display: inline-flex;
  align-items: center;
  color: rgba(0, 238, 221, 0.45);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -1.5px;
  cursor: grab;
  user-select: none;
  transition: color 0.2s ease;
}

.dock-drag-handle:hover {
  color: var(--accent-cyan);
}

.dock-pulse-beacon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan);
  animation: kickerDotPulse 1.8s infinite;
  flex-shrink: 0;
}

.dock-title {
  text-transform: uppercase;
}

.dock-session {
  font-size: 10px;
  color: var(--accent-gold);
  background: rgba(255, 215, 38, 0.12);
  border: 1px solid rgba(255, 215, 38, 0.3);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

.dock-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dock-minimize-btn,
.dock-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dock-minimize-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.dock-close-btn {
  font-size: 17px;
}

.dock-close-btn:hover {
  color: #ff4d6d;
  background: rgba(255, 77, 109, 0.18);
  transform: scale(1.1);
}

.dock-timer {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.dock-digits {
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.dock-unit {
  font-size: 10px;
  font-weight: 800;
  color: var(--accent-cyan);
  margin-right: 2px;
}

.dock-sep {
  font-size: 16px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.75);
}

.dock-link {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-gold);
  text-decoration: none;
  align-self: flex-end;
  transition: transform 0.2s ease;
}

.dock-link:hover {
  transform: translateX(2px);
  color: #ffffff;
}

/* Collapsed state */
.floating-countdown-dock.is-minimized {
  height: auto !important;
  max-height: 52px !important;
  padding: 8px 14px;
}

.floating-countdown-dock.is-minimized .dock-timer,
.floating-countdown-dock.is-minimized .dock-link {
  display: none !important;
}

@media (max-width: 600px) {
  .floating-countdown-dock {
    bottom: 16px;
    right: 16px;
    padding: 10px 14px;
  }
}

/* Floating Restore Countdown Button (Pill Trigger) */
.restore-countdown-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(1, 16, 50, 0.92);
  border: 1.5px solid rgba(0, 238, 221, 0.45);
  border-radius: var(--radius-pill, 999px);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 30px rgba(0, 5, 25, 0.65), 0 0 18px rgba(0, 238, 221, 0.2);
  color: #ffffff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease,
              box-shadow 0.2s ease;
  user-select: none;
}

.restore-countdown-btn.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.restore-countdown-btn:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 14px 36px rgba(0, 238, 221, 0.4), 0 0 25px rgba(0, 238, 221, 0.4);
  transform: translateY(-2px) scale(1.04);
}

.restore-countdown-btn .restore-beacon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan);
  animation: kickerDotPulse 1.8s infinite;
  flex-shrink: 0;
}

.restore-countdown-btn .restore-icon {
  font-size: 13px;
  line-height: 1;
}

.restore-countdown-btn .restore-label {
  text-transform: uppercase;
  color: var(--accent-cyan);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}

@media (max-width: 600px) {
  .restore-countdown-btn {
    bottom: 16px;
    right: 16px;
    padding: 7px 12px;
  }
}

/* ── 7. Infinite Vision Marquee Banner (GMS Style) ───────────────────────── */
.vision-marquee-section {
  position: relative;
  z-index: 2;
  width: 100%;
  background: linear-gradient(90deg, #f7d130 0%, #ffbe1a 50%, #f7d130 100%);
  color: #002b66;
  padding: 14px 0;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  border-top: 2px solid rgba(255, 255, 255, 0.4);
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: scrollMarquee 34s linear infinite;
  pointer-events: none;
}

.marquee-content {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.marquee-badge {
  background-color: #002b66;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 6px;
  margin: 0 12px;
  letter-spacing: 0.5px;
}

.marquee-text {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── Pelayanan Photo Gallery Frame (KKR Anak) ── */
/* ── Pelayanan Photo Gallery Frame (KKR Anak) ── */
.pelayanan-gallery-frame {
  flex: 1;
  width: 100%;
  aspect-ratio: 16 / 9;   /* 16:9 cinematic landscape ratio */
  min-height: 380px;
  align-self: center;
  border: 2px dashed rgba(0, 238, 221, 0.45);
  border-radius: 24px;
  background: rgba(4, 12, 28, 0.65);
  position: relative;
  overflow: hidden;
  display: flex;
  box-sizing: border-box;
  box-shadow: 0 20px 50px -10px rgba(0, 8, 30, 0.75);

  /* 🎯 CORE REQUIREMENT: Reduced opacity when mouse is NOT hovering over the image */
  opacity: 0.65;
  filter: saturate(0.92) brightness(0.96);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.4s ease,
              border-color 0.4s ease,
              box-shadow 0.4s ease,
              transform 0.4s ease;
  user-select: none;
}

/* Full opacity & vibrant glow when hovering over the image! */
.pelayanan-gallery-frame:hover {
  opacity: 1;
  filter: saturate(1.05) brightness(1);
  border-color: rgba(0, 238, 221, 0.85);
  box-shadow: 0 28px 65px -12px rgba(0, 238, 221, 0.28), 0 0 35px rgba(0, 238, 221, 0.15);
  transform: translateY(-3px);
}

/* Slides track & images */
.gallery-slides-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 22px;
}

.gallery-slide {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.65s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
}

.gallery-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.gallery-slide img {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transform: scale(1.08);
  transform-origin: center center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.pelayanan-gallery-frame:hover .gallery-slide.is-active img {
  transform: scale(1.12);
}

/* Slide Counter (top-right) */
.gallery-top-bar {
  position: absolute;
  top: 18px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 10;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.35s ease;
}

.pelayanan-gallery-frame:hover .gallery-top-bar {
  opacity: 1;
}

.gallery-pill-tag {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: var(--accent-cyan);
  background: rgba(4, 12, 28, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 238, 221, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.gallery-counter {
  font-family: monospace, var(--font-primary);
  font-size: 11.5px;
  font-weight: 800;
  color: #ffffff;
  background: rgba(4, 12, 28, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.gallery-counter strong {
  color: var(--accent-gold);
}

/* Navigation Buttons */
.gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(4, 14, 32, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(0, 238, 221, 0.4);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.gallery-nav-btn svg {
  width: 20px;
  height: 20px;
}

.gallery-nav-btn.prev {
  left: 18px;
}

.gallery-nav-btn.next {
  right: 18px;
}

.pelayanan-gallery-frame:hover .gallery-nav-btn {
  opacity: 0.9;
}

.gallery-nav-btn:hover {
  opacity: 1 !important;
  background: rgba(0, 238, 221, 0.25);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 0 20px rgba(0, 238, 221, 0.4);
}

/* Pagination Dots */
.gallery-pagination-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 90%;
  overflow-x: auto;
  scrollbar-width: none;
  z-index: 10;
  background: rgba(4, 12, 28, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.gallery-pagination-dots::-webkit-scrollbar {
  display: none;
}

.pelayanan-gallery-frame:hover .gallery-pagination-dots {
  opacity: 1;
}

.gallery-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
  padding: 0;
}

.gallery-dot:hover {
  background: rgba(0, 238, 221, 0.7);
  transform: scale(1.2);
}

.gallery-dot.is-active {
  width: 22px;
  border-radius: 999px;
  background: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-cyan);
}


.marquee-star {
  font-size: 16px;
  margin: 0 18px;
  color: rgba(0, 43, 102, 0.6);
}

@keyframes scrollMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── 8. Gods Heroes 3D Niche Alcove Banner Section ───────────────────────── */
.gods-heroes-fullwidth {
  width: 100%;
  margin: 70px 0 100px;
  position: relative;
  z-index: 2;
  overflow: visible;
}

.banner-section-header {
  text-align: center;
  max-width: 1040px;
  margin: 0 auto 34px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 3D Recessed Niche / Alcove Chamber */
.gods-heroes-container {
  position: relative;
  width: 100%;
  min-height: 620px;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  background: radial-gradient(ellipse 70% 50% at 50% 12%, rgba(0, 238, 221, 0.28) 0%, rgba(0, 14, 32, 0.96) 65%), 
              linear-gradient(180deg, #001f3f 0%, #000c1a 100%);
  border-bottom: 4px solid var(--accent-gold);
  box-shadow: inset 0 35px 70px rgba(0, 0, 0, 0.9), 
              inset 0 -35px 70px rgba(0, 0, 0, 0.95), 
              inset 0 0 120px rgba(0, 238, 221, 0.16),
              0 24px 60px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* 🚀 Crucial: Allows selected banner to break the border and pass above the line */
  padding: 55px 0 65px;
}

/* 🚀 Top Cyan Neon Rail Line (Layered at z-index: 2 so selected banner at z-index: 200 passes OVER it) */
.gods-heroes-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--accent-cyan);
  box-shadow: 0 0 16px var(--accent-cyan), 0 0 32px var(--accent-cyan-glow);
  z-index: 2;
  pointer-events: none;
}

/* 3D Niche Floor Pedestal Reflection */
.gods-heroes-container::after {
  content: '';
  position: absolute;
  bottom: 28px;
  left: 6%;
  width: 88%;
  height: 28px;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 238, 221, 0.35) 0%, rgba(247, 209, 48, 0.15) 50%, transparent 80%);
  filter: blur(10px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.main-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.12;
  filter: blur(5px) saturate(1.6);
  transition: transform 0.6s ease;
  pointer-events: none;
  clip-path: inset(0 0 0 0); /* Keeps backdrop strictly inside the container */
}

.gods-heroes-container:hover .main-banner {
  transform: scale(1.03);
}

.small-banners-overlay {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 24px;
  padding: 20px 24px;
  flex-wrap: wrap;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.small-banner-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  perspective: 1000px;
  transform-style: preserve-3d;
  position: relative;
  z-index: 10;
  transition: opacity 0.35s ease, filter 0.35s ease;
  outline: none;
}

.small-banner-item:focus-visible .banner-3d-card {
  outline: 3px solid var(--accent-cyan, #00eedd);
  outline-offset: 4px;
}

/* 3D Rotating Card Container */
.banner-3d-card {
  position: relative;
  border-radius: 18px;
  transform-style: preserve-3d;
  transition: box-shadow 0.3s ease, filter 0.3s ease;
  will-change: transform;
}

/* Default Natural Niche Curved Arc (Resting Amphitheater Stance) */
.small-banner-item:nth-child(1) .banner-3d-card { transform: rotateY(12deg); }
.small-banner-item:nth-child(2) .banner-3d-card { transform: rotateY(6deg); }
.small-banner-item:nth-child(3) .banner-3d-card { transform: rotateY(2deg); }
.small-banner-item:nth-child(4) .banner-3d-card { transform: rotateY(-2deg); }
.small-banner-item:nth-child(5) .banner-3d-card { transform: rotateY(-6deg); }
.small-banner-item:nth-child(6) .banner-3d-card { transform: rotateY(-12deg); }

/* Glare & Specular Light Reflection */
.banner-glare-effect {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.25s ease;
  mix-blend-mode: overlay;
}

.small-banner-img {
  width: auto;
  height: 440px;
  max-height: 470px;
  object-fit: contain;
  border-radius: 18px;
  border: 4px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7), 
              0 0 30px rgba(0, 238, 221, 0.3);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  background: transparent;
  display: block;
}

.small-banner-caption {
  font-size: 13px;
  font-weight: 900;
  color: #ffffff;
  background: rgba(0, 15, 35, 0.92);
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(0, 238, 221, 0.7);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  white-space: nowrap;
  transform: translateZ(25px);
}

/* 🚀 Selected / Hovered Banner Gets Big & Breaks Border Above the Line */
.small-banner-item:hover,
.small-banner-item.banner-selected {
  z-index: 200 !important; /* Layers above the cyan border line (z-index: 2) and all sibling items */
}

.small-banner-item:hover .banner-3d-card,
.small-banner-item.banner-selected .banner-3d-card {
  z-index: 200 !important;
}

.small-banner-item:hover .small-banner-img,
.small-banner-item.banner-selected .small-banner-img {
  border-color: var(--accent-gold);
  border-width: 3.5px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 
              0 0 24px var(--accent-gold), 
              0 0 40px rgba(0, 238, 221, 0.5);
}

.small-banner-item:hover .small-banner-caption,
.small-banner-item.banner-selected .small-banner-caption {
  background: linear-gradient(135deg, var(--accent-gold) 0%, #ffbe1a 100%);
  color: #002b66;
  border-color: var(--accent-gold);
  box-shadow: 0 0 20px var(--accent-gold);
  transform: translateZ(35px) scale(1.04);
}

/* Dim non-hovered siblings for spotlight prominence */
.small-banners-overlay:hover .small-banner-item:not(:hover) {
  opacity: 0.68;
  filter: brightness(0.78);
}

.small-banners-overlay:hover .small-banner-item:hover {
  opacity: 1 !important;
  filter: none !important;
}

/* ── 9. Page Content Wrapper & Section Headers ───────────────────────────── */
.content-wrapper {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.page-section {
  margin-bottom: 90px;
}

.section-header {
  text-align: center;
  margin-bottom: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent-cyan);
  background: rgba(247, 209, 48, 0.08);
  border: 1px solid rgba(247, 209, 48, 0.28);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.section-title {
  font-size: clamp(2.6rem, 5.5vw, 3.8rem);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text-white);
  margin-bottom: 12px;
}

/* Sembuh-Inspired Gradient Title Highlights */
.title-highlight {
  display: inline-block;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.title-highlight.highlight-cyan {
  background-image: linear-gradient(135deg, #00eedd 0%, #00a2ff 100%);
  filter: drop-shadow(0 2px 14px rgba(0, 238, 221, 0.45));
}

.title-highlight.highlight-gold {
  background-image: linear-gradient(135deg, #ffd200 0%, #ff9f43 100%);
  filter: drop-shadow(0 2px 14px rgba(255, 210, 0, 0.45));
}

.title-highlight.highlight-pink {
  background-image: linear-gradient(135deg, #ff3399 0%, #ff6b81 100%);
  filter: drop-shadow(0 2px 14px rgba(255, 51, 153, 0.45));
}

.section-subtitle {
  font-size: clamp(14px, 1.8vw, 16px);
  color: rgba(215, 230, 255, 0.80);
  max-width: 620px;
  line-height: 1.65;
  margin: 0 auto 34px;
  font-weight: 480;
  text-shadow: 0 1px 8px rgba(0, 10, 35, 0.6);
}

.section-line {
  width: 84px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-gold) 0%, var(--accent-cyan) 60%, var(--accent-purple) 100%);
  margin: 14px auto 24px;
  box-shadow:
    0 0 16px rgba(255,215,38,0.5),
    0 0 30px rgba(0,238,221,0.35);
}

/* ── 10. Tentang Kami (About Us Card) ────────────────────────────────────── */
.about-grid {
  display: flex;
  justify-content: center;
}

.main-about-card {
  position: relative;
  background: var(--glass-bg);
  border: 1.5px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-xl);
  padding: 44px;
  max-width: 860px;
  text-align: center;
  box-shadow: var(--card-shadow);
  overflow: visible;
  transition: var(--transition-smooth);
}

.main-about-card:hover {
  border-color: var(--glass-border-hover);
  box-shadow: var(--card-shadow-hover);
}

/* ── 2. About Living Companion: Karang Ungu Ramah ── */
.about-companion {
  top: -82px;
  right: 32px;
}

.about-companion .interactive-mascot.mascot-coral {
  width: 125px;
  filter: drop-shadow(0 14px 26px rgba(0, 6, 28, 0.65));
  animation: coralLivelyBreathe 4.5s ease-in-out infinite;
}

.about-companion .mascot-speech-bubble {
  bottom: 100%;
  right: -16px;
  margin-bottom: 10px;
}

@keyframes coralLivelyBreathe {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-12px) rotate(4deg) scale(1.05);
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

.about-badge {
  display: inline-block;
  background: rgba(247, 209, 48, 0.15);
  border: 1px solid var(--accent-gold);
  color: var(--accent-gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}

.about-headline {
  font-size: clamp(1.65rem, 3.2vw, 2.2rem);
  font-weight: 950;
  margin-bottom: 16px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-white);
}

/* ── 153 Vision Spotlight Stage & Pillars ── */
.vision-stage-card {
  position: relative;
  overflow: hidden;
  padding: 52px 52px 48px;
}

.about-header-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(1, 28, 75, 0.75);
  border: 1px solid rgba(0, 212, 200, 0.5);
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 20px rgba(0, 212, 200, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  margin-bottom: 18px;
  user-select: none;
}

.vision-pill-icon {
  font-size: 14px;
}

.vision-pill-text {
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #f7c948;
  text-transform: uppercase;
}

.vision-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00d4c8;
  box-shadow: 0 0 8px #00d4c8;
  animation: kickerDotPulse 1.8s infinite;
}

.about-vision-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 36px;
}

/* Warm gold ambient halo — no cyan conflict */
.vision-halo-aura {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 160px;
  background: radial-gradient(ellipse, rgba(247, 201, 72, 0.32) 0%, rgba(247, 201, 72, 0.10) 55%, transparent 80%);
  filter: blur(32px);
  pointer-events: none;
  z-index: 1;
}

.vision-number-cluster {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vision-tag-top {
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: 4px;
  color: rgba(200, 220, 255, 0.55);
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* 153 — warm monochromatic gold→white, no cyan clash */
.about-headline-153 {
  font-size: clamp(5.2rem, 12vw, 9rem);
  font-weight: 950;
  line-height: 0.9;
  letter-spacing: -0.04em;
  background: linear-gradient(170deg, #ffffff 0%, #fff8d6 25%, #f7c948 65%, #e8a020 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 28px rgba(247, 201, 72, 0.65));
  margin: 6px 0 6px;
  user-select: none;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease;
  position: relative;
}

.about-headline-153:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 8px 44px rgba(247, 201, 72, 0.9)) drop-shadow(0 0 80px rgba(247, 201, 72, 0.45));
}

.vision-tag-bottom {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2.2px;
  color: rgba(0, 212, 200, 0.95);
  background: rgba(0, 212, 200, 0.14);
  border: 1px solid rgba(0, 212, 200, 0.55);
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  margin-top: 4px;
  box-shadow: 0 0 14px rgba(0, 212, 200, 0.22);
}

.about-tagline {
  font-size: clamp(14px, 1.8vw, 16.5px);
  color: rgba(225, 240, 255, 0.92);
  font-weight: 700;
  letter-spacing: 0.4px;
  max-width: 620px;
  margin: 12px auto 0;
  line-height: 1.5;
  position: relative;
  z-index: 2;
}

/* ── 3 Modern Interactive Pillars ── */
.about-features-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.feature-card-pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 22px 28px;
  min-height: 190px;
  border-radius: 22px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 30px rgba(0, 8, 30, 0.45);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

/* Glass shine reflection on hover */
.feature-card-pillar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
  z-index: 2;
}

.feature-card-pillar:hover::before {
  left: 140%;
}

/* Atmospheric radial background glow */
.pillar-bg-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  transition: opacity 0.35s ease;
}

.pillar-love .pillar-bg-glow {
  background: radial-gradient(circle at 50% 25%, rgba(255, 80, 110, 0.22) 0%, transparent 68%);
}

.pillar-shepherd .pillar-bg-glow {
  background: radial-gradient(circle at 50% 25%, rgba(0, 212, 200, 0.22) 0%, transparent 68%);
}

.pillar-reach .pillar-bg-glow {
  background: radial-gradient(circle at 50% 25%, rgba(247, 201, 72, 0.22) 0%, transparent 68%);
}

.feature-card-pillar:hover .pillar-bg-glow {
  opacity: 1;
}

/* Giant subtle background watermark (01, 02, 03) */
.pillar-watermark {
  position: absolute;
  right: 12px;
  bottom: 4px;
  font-size: 64px;
  font-weight: 950;
  line-height: 1;
  color: rgba(255, 255, 255, 0.045);
  letter-spacing: -2px;
  user-select: none;
  pointer-events: none;
  z-index: 0;
  transition: transform 0.35s ease, color 0.35s ease;
}

.feature-card-pillar:hover .pillar-watermark {
  transform: scale(1.08) translateY(-4px);
  color: rgba(255, 255, 255, 0.08);
}

.pillar-number {
  position: absolute;
  top: 12px;
  left: 16px;
  font-size: 11px;
  font-weight: 950;
  color: rgba(255, 255, 255, 0.32);
  letter-spacing: 1.5px;
  z-index: 1;
}

/* 3D Elevated Glassmorphic Icon Box */
.pillar-icon-box {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.pillar-icon {
  font-size: 28px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
  transition: transform 0.3s ease;
}

.feature-card-pillar:hover .pillar-icon {
  transform: scale(1.1);
}

/* Vibrant Holographic Typography */
.pillar-title {
  font-size: clamp(15.5px, 1.7vw, 17.5px);
  font-weight: 950;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.pillar-love .pillar-title {
  background: linear-gradient(180deg, #ffffff 15%, #ffd2dc 60%, #ff6b8b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(255, 75, 110, 0.35));
}

.pillar-shepherd .pillar-title {
  background: linear-gradient(180deg, #ffffff 15%, #c5faf5 60%, #00d4c8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 212, 200, 0.35));
}

.pillar-reach .pillar-title {
  background: linear-gradient(180deg, #ffffff 15%, #fff1b8 60%, #f7c948 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(247, 201, 72, 0.35));
}

.feature-card-pillar:hover .pillar-title {
  transform: translateY(-2px);
  filter: drop-shadow(0 4px 16px rgba(255, 255, 255, 0.45));
}

.pillar-glow-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* ── 1. Love Pillar — Rose/Coral ── */
.pillar-love {
  background: linear-gradient(160deg, rgba(255, 80, 110, 0.10) 0%, rgba(4, 16, 55, 0.88) 100%);
  border: 1.5px solid rgba(255, 80, 110, 0.30);
}
.pillar-love .pillar-icon-box {
  background: rgba(255, 80, 110, 0.13);
  border: 1px solid rgba(255, 80, 110, 0.32);
  box-shadow: 0 0 14px rgba(255, 80, 110, 0.18);
}
.pillar-love:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(255, 75, 110, 0.80);
  box-shadow: 0 16px 40px rgba(255, 75, 110, 0.35), 0 0 28px rgba(255, 75, 110, 0.22);
  background: linear-gradient(160deg, rgba(255, 80, 110, 0.18) 0%, rgba(4, 16, 55, 0.92) 100%);
}
.pillar-love:hover .pillar-icon-box {
  transform: scale(1.15) rotate(-6deg);
  background: rgba(255, 75, 110, 0.22);
  border-color: rgba(255, 75, 110, 0.65);
  box-shadow: 0 0 22px rgba(255, 75, 110, 0.55);
}
.pillar-love:hover .pillar-glow-line {
  background: linear-gradient(90deg, transparent, #ff4b6e, transparent);
  box-shadow: 0 0 12px #ff4b6e;
}

/* ── 2. Shepherd Pillar — Cyan/Teal ── */
.pillar-shepherd {
  background: linear-gradient(160deg, rgba(0, 212, 200, 0.10) 0%, rgba(4, 16, 55, 0.88) 100%);
  border: 1.5px solid rgba(0, 212, 200, 0.30);
}
.pillar-shepherd .pillar-icon-box {
  background: rgba(0, 212, 200, 0.13);
  border: 1px solid rgba(0, 212, 200, 0.32);
  box-shadow: 0 0 14px rgba(0, 212, 200, 0.18);
}
.pillar-shepherd:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(0, 212, 200, 0.80);
  box-shadow: 0 16px 40px rgba(0, 212, 200, 0.35), 0 0 28px rgba(0, 212, 200, 0.22);
  background: linear-gradient(160deg, rgba(0, 212, 200, 0.18) 0%, rgba(4, 16, 55, 0.92) 100%);
}
.pillar-shepherd:hover .pillar-icon-box {
  transform: scale(1.15) rotate(6deg);
  background: rgba(0, 212, 200, 0.22);
  border-color: rgba(0, 212, 200, 0.65);
  box-shadow: 0 0 22px rgba(0, 212, 200, 0.55);
}
.pillar-shepherd:hover .pillar-glow-line {
  background: linear-gradient(90deg, transparent, #00d4c8, transparent);
  box-shadow: 0 0 12px #00d4c8;
}

/* ── 3. Reach Pillar — Warm Gold/Amber ── */
.pillar-reach {
  background: linear-gradient(160deg, rgba(247, 201, 72, 0.10) 0%, rgba(4, 16, 55, 0.88) 100%);
  border: 1.5px solid rgba(247, 201, 72, 0.30);
}
.pillar-reach .pillar-icon-box {
  background: rgba(247, 201, 72, 0.13);
  border: 1px solid rgba(247, 201, 72, 0.32);
  box-shadow: 0 0 14px rgba(247, 201, 72, 0.18);
}
.pillar-reach:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(247, 201, 72, 0.80);
  box-shadow: 0 16px 40px rgba(247, 201, 72, 0.35), 0 0 28px rgba(247, 201, 72, 0.22);
  background: linear-gradient(160deg, rgba(247, 201, 72, 0.18) 0%, rgba(4, 16, 55, 0.92) 100%);
}
.pillar-reach:hover .pillar-icon-box {
  transform: scale(1.15) rotate(-6deg);
  background: rgba(247, 201, 72, 0.22);
  border-color: rgba(247, 201, 72, 0.65);
  box-shadow: 0 0 22px rgba(247, 201, 72, 0.55);
}
.pillar-reach:hover .pillar-glow-line {
  background: linear-gradient(90deg, transparent, #f7c948, transparent);
  box-shadow: 0 0 12px #f7c948;
}

@media (max-width: 720px) {
  .about-features-container {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .feature-card-pillar {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 18px 20px;
    min-height: auto;
    gap: 18px;
  }
  .pillar-number,
  .pillar-watermark {
    display: none;
  }
  .pillar-icon-box {
    margin-bottom: 0;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
  }
}


.feature-icon {
  font-size: 20px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.feature-text {
  font-size: 14.5px;
  font-weight: 850;
  letter-spacing: 0.3px;
  color: var(--text-white);
  white-space: nowrap;
}


/* ── 11. Jadwal Ibadah (3 Ticket Cards Layout with Big Time & Playful Tilt) ── */
.schedule-ticket-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 1040px;
  margin: 0 auto 32px;
  position: relative;
  overflow: visible;
}

.ticket-card {
  position: relative;
  background: var(--glass-bg);
  border: 1.5px solid var(--glass-border);
  border-top: 3.5px solid var(--ticket-accent, var(--accent-cyan));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: var(--radius-lg);
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: var(--card-shadow);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
  overflow: visible;
  min-height: 260px;
}

/* ── 3. Schedule Living Companions: Starfish (Kids Impact) & Octopus (Kids Fire) ── */
.ticket-companion {
  z-index: 15;
}

/* Ticket 1: Starfish (Kids Impact) */
.companion-starfish {
  top: -62px;
  right: 12px;
}

.companion-starfish .interactive-mascot.mascot-starfish {
  width: 112px;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.55));
  animation: starfishLivelyWave 4.6s ease-in-out infinite;
}

.companion-starfish .mascot-speech-bubble {
  bottom: 100%;
  right: -10px;
  margin-bottom: 8px;
}

@keyframes starfishLivelyWave {
  0%, 100% {
    transform: translateY(0) rotate(-1.5deg);
  }
  50% {
    transform: translateY(-6px) rotate(2deg);
  }
}

/* Ticket 2: Jellyfish (Kids Revival) */
.companion-jellyfish {
  top: -66px;
  right: 14px;
}

.companion-jellyfish .interactive-mascot.mascot-jellyfish {
  width: 110px;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(255, 105, 180, 0.45));
  animation: jellyfishLivelyFloat 5s ease-in-out infinite;
}

.companion-jellyfish .mascot-speech-bubble {
  bottom: 100%;
  right: -10px;
  margin-bottom: 8px;
}

@keyframes jellyfishLivelyFloat {
  0%, 100% {
    transform: translateY(0) rotate(-1.5deg);
  }
  50% {
    transform: translateY(-7px) rotate(1.5deg);
  }
}

.companion-octopus {
  top: -64px;
  left: 12px;
}

.companion-octopus .interactive-mascot.mascot-octopus {
  width: 110px;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.55));
  animation: octopusLivelyHop 4.2s ease-in-out infinite;
}

.companion-octopus .mascot-speech-bubble {
  bottom: 100%;
  left: -10px;
  margin-bottom: 8px;
}

@keyframes octopusLivelyHop {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.02, 0.98);
  }
}




/* Playful alternating tilt on desktop */
@media (min-width: 992px) {
  .ticket-card.ticket-impact {
    transform: rotate(-1.2deg);
  }
  .ticket-card.ticket-revival {
    transform: rotate(0deg);
  }
  .ticket-card.ticket-fire {
    transform: rotate(1.2deg);
  }

  .ticket-card:hover {
    transform: translateY(-8px) rotate(0deg) scale(1.02) !important;
    border-color: var(--ticket-accent, var(--accent-cyan));
    box-shadow: var(--card-shadow-hover), 0 0 24px rgba(0, 238, 221, 0.25);
  }
}

.ticket-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 22px;
  position: relative;
  width: 100%;
}

.ticket-session-pill {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--ticket-accent, var(--accent-cyan));
  color: var(--ticket-accent, var(--accent-cyan));
  margin-bottom: 12px;
}

.ticket-big-time {
  font-size: clamp(3rem, 4.2vw, 3.8rem);
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
  letter-spacing: -1.5px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

.ticket-time-zone {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Card Watermark Glow */
.ticket-watermark-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, var(--ticket-accent, var(--accent-cyan)) 0%, transparent 70%);
  opacity: 0.12;
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.ticket-card:hover .ticket-watermark-glow {
  opacity: 0.24;
  transform: translate(-50%, -50%) scale(1.15);
}

/* Sparkle Corner Accents */
.ticket-sparkle {
  position: absolute;
  font-size: 13px;
  color: var(--ticket-accent, var(--accent-cyan));
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 0 10px var(--ticket-accent, var(--accent-cyan));
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.sparkle-tl {
  top: 14px;
  left: 16px;
}

.sparkle-br {
  bottom: 14px;
  right: 16px;
}

.ticket-card:hover .ticket-sparkle {
  opacity: 0.85;
  transform: scale(1.2) rotate(15deg);
}

.ticket-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  z-index: 2;
  margin: 0;
}

.ticket-service-name {
  font-size: clamp(19px, 2.3vw, 25px);
  font-weight: 900;
  letter-spacing: 1.8px;
  text-indent: 1.8px;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 auto;
  line-height: 1.15;
  padding: 10px 24px;
  border-radius: var(--radius-pill, 999px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1.5px solid var(--ticket-accent, var(--accent-cyan));
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.35),
    0 0 20px rgba(var(--ticket-accent-rgb, 0, 238, 221), 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-shadow: 
    0 0 14px var(--ticket-accent, var(--accent-cyan)),
    0 0 24px rgba(var(--ticket-accent-rgb, 0, 238, 221), 0.65),
    0 2px 6px rgba(0, 0, 0, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease,
              text-shadow 0.35s ease;
}

.ticket-card:hover .ticket-service-name {
  transform: translateY(-2px) scale(1.05);
  border-color: #ffffff;
  box-shadow: 
    0 6px 22px rgba(0, 0, 0, 0.45),
    0 0 32px var(--ticket-accent, var(--accent-cyan)),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  text-shadow: 
    0 0 18px var(--ticket-accent, var(--accent-cyan)),
    0 0 36px var(--ticket-accent, var(--accent-cyan)),
    0 2px 8px rgba(0, 0, 0, 0.95);
}

/* Online YouTube Worship Card */
.schedule-online-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(1, 18, 48, 0.72);
  border: 1.5px solid rgba(255, 0, 0, 0.35);
  border-radius: var(--radius-lg);
  padding: 22px 28px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--card-shadow);
  max-width: 1040px;
  margin: 10px auto 0;
}

.online-banner-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.online-live-badge {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #ff4d4d;
  animation: pulseLive 1.6s infinite;
}

.online-banner-title {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 950;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #ffffff;
}

.online-banner-desc {
  font-size: clamp(13px, 1.4vw, 14px);
  color: rgba(205, 222, 255, 0.78);
  font-weight: 480;
  line-height: 1.55;
}

.btn-yt-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ff0000;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 16px rgba(255, 0, 0, 0.4);
  transition: var(--transition-smooth);
  flex-shrink: 0;
  white-space: nowrap;
}

.btn-yt-card:hover {
  background: #cc0000;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(255, 0, 0, 0.6);
}

@media (max-width: 900px) {
  .schedule-ticket-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .schedule-online-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── 12. Kelas Gods Heroes (Merged Vertical Timeline Journey) ────────────── */
.class-journey-path {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: 30px 0 60px;
}

/* Vertical Center Dashed Line */
.class-journey-path::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  background-image: linear-gradient(180deg, 
    var(--accent-cyan) 0%, 
    var(--accent-gold) 50%, 
    var(--accent-purple) 100%);
  border-left: 3px dashed rgba(0, 238, 221, 0.45);
  z-index: 1;
}

.timeline-stop {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: center;
  margin-bottom: 64px;
  position: relative;
  z-index: 2;
}

/* Alternating placement: odd on left, even on right */
.timeline-stop .timeline-card {
  grid-column: 1;
  grid-row: 1;
  transform: rotate(-0.8deg);
}

.timeline-stop:nth-child(even) .timeline-card {
  grid-column: 3;
  grid-row: 1;
  transform: rotate(0.8deg);
}

/* Numbered Circle Markers in the middle */
.timeline-marker {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0, 18, 48, 0.95);
  border: 2.5px solid var(--stop-accent, var(--accent-cyan));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 0 20px rgba(0, 238, 221, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  z-index: 3;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-stop:hover .timeline-marker {
  transform: scale(1.18);
  box-shadow: 0 0 28px var(--stop-accent, var(--accent-gold));
  border-color: var(--stop-accent, var(--accent-gold));
}

/* Timeline Card */
.timeline-card {
  background: var(--glass-bg);
  border: 1.5px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  padding: 20px 22px 24px;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
}

.timeline-card:hover {
  border-color: var(--stop-accent, var(--accent-gold));
  box-shadow: var(--card-shadow-hover), 0 0 24px rgba(0, 238, 221, 0.2);
  transform: translateY(-5px) scale(1.01);
}

.timeline-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 8px;
}

.class-age {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #ffffff;
  background: rgba(0, 15, 40, 0.6);
  border: 1px solid var(--stop-accent, var(--accent-cyan));
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

.class-stage-pill {
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #ffffff;
  background: rgba(0, 238, 221, 0.15);
  border: 1px solid var(--stop-accent, var(--accent-cyan));
  padding: 3px 12px;
  border-radius: var(--radius-pill);
}

.timeline-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Class Banner Frame in Section 4 Timeline */
.timeline-class-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(0, 15, 30, 0.45);
  border: 1.5px solid var(--glass-border);
  /* Permanent subtle accent ring — banner is the hero */
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.45),
    0 0 0 2px rgba(var(--stop-accent-rgb, 0, 220, 180), 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-bottom: 16px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.hero-class-card:hover .timeline-class-banner {
  border-color: var(--stop-accent, var(--accent-gold));
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.55),
    0 0 0 2px var(--stop-accent, var(--accent-cyan)),
    0 0 28px rgba(var(--stop-accent-rgb, 0, 220, 180), 0.35);
}

.class-banner-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s ease;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

.hero-class-card:hover .class-banner-thumb {
  transform: scale(1.04);
}

.class-text-wrap {
  width: 100%;
}

.class-title {
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: #ffffff;
  line-height: 1.1;
}

.class-desc {
  font-size: clamp(12.5px, 1.5vw, 14px);
  color: rgba(205, 222, 255, 0.78);
  line-height: 1.6;
  font-weight: 480;
}

.card-featured-heroes {
  border-color: rgba(168, 85, 247, 0.5);
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.12) 0%, var(--glass-bg) 100%);
}

/* Mobile responsive layout for timeline */
@media (max-width: 768px) {
  .class-journey-path::before {
    left: 26px;
  }

  .timeline-stop {
    grid-template-columns: 52px 1fr;
    gap: 16px;
    margin-bottom: 32px;
  }

  .timeline-marker {
    grid-column: 1;
    width: 46px;
    height: 46px;
    font-size: 17px;
  }

  .timeline-stop .timeline-card,
  .timeline-stop:nth-child(even) .timeline-card {
    grid-column: 2;
    transform: none !important;
  }

  .timeline-class-banner {
    height: auto;
    width: 100%;
  }
}

/* ── 13. Media Sosial Hub ────────────────────────────────────────────────── */
.social-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
}

.social-hub-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--glass-bg);
  border: 1.5px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 18px 22px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text-white);
  box-shadow: var(--card-shadow);
  transition: var(--transition-smooth);
}

.social-hub-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-shadow-hover);
}

.social-hub-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.social-hub-card:hover .social-hub-icon-wrap {
  transform: scale(1.12);
}

.social-svg-icon {
  width: 24px;
  height: 24px;
}

.social-hub-meta {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.social-platform {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(200, 218, 255, 0.62);
}

.social-handle {
  font-size: 15px;
  font-weight: 850;
  color: var(--text-white);
  letter-spacing: -0.01em;
}

.social-arrow {
  font-size: 18px;
  font-weight: 900;
  opacity: 0.6;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-hub-card:hover .social-arrow {
  transform: translate(3px, -3px);
  opacity: 1;
}

.card-yt:hover { border-color: #ff0000; box-shadow: 0 10px 30px rgba(255, 0, 0, 0.3); }
.card-yt .social-svg-icon { color: #ff0000; }

.card-ig:hover { border-color: #e4405f; box-shadow: 0 10px 30px rgba(228, 64, 95, 0.3); }
.card-ig .social-svg-icon { color: #e4405f; }

.card-spotify:hover { border-color: #1db954; box-shadow: 0 10px 30px rgba(29, 185, 84, 0.3); }
.card-spotify .social-svg-icon { color: #1db954; }

.card-tiktok:hover { border-color: var(--accent-cyan); box-shadow: 0 10px 30px rgba(0, 238, 221, 0.3); }
.card-tiktok .social-svg-icon { color: #ffffff; }

/* ══════════════════════════════════════════════════════════════════
   ── 13b. LOKASI KAMI — Futuristic Station & Map Console ──
   ══════════════════════════════════════════════════════════════════ */

.location-section {
  max-width: 1140px;
  margin: 0 auto;
}

.location-station-grid {
  display: grid;
  grid-template-columns: 390px 1fr;
  gap: 26px;
  align-items: stretch;
  margin-top: 36px;
}

/* ── Left Deck: Navigation Terminal Card ── */
.location-terminal-card {
  background:
    radial-gradient(circle at 12% 15%, rgba(0, 238, 221, 0.08), transparent 70%),
    radial-gradient(circle at 90% 85%, rgba(255, 210, 0, 0.06), transparent 60%),
    linear-gradient(155deg, rgba(8, 22, 46, 0.95) 0%, rgba(4, 12, 26, 0.98) 100%);
  border: 1.5px solid rgba(0, 238, 221, 0.32);
  border-top-color: rgba(255, 255, 255, 0.35);
  border-radius: 26px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow:
    0 24px 60px rgba(0, 6, 22, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 40px rgba(0, 238, 221, 0.06);
  position: relative;
  overflow: hidden;
}

.location-terminal-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(0, 238, 221, 0.12), transparent 70%);
  pointer-events: none;
}

/* Top Strip: Live beacon + Station code */
.terminal-header-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.terminal-beacon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.beacon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00ee64;
  box-shadow: 0 0 8px #00ee64, 0 0 18px rgba(0, 238, 100, 0.7);
  flex-shrink: 0;
}

.beacon-pulse {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00ee64;
  animation: beaconPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes beaconPing {
  0% { transform: translateY(-50%) scale(1); opacity: 0.8; }
  100% { transform: translateY(-50%) scale(3.2); opacity: 0; }
}

.beacon-text {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.3px;
  color: #00ee64;
  text-transform: uppercase;
}

.terminal-code {
  font-family: monospace, var(--font-primary);
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  letter-spacing: 1px;
}

/* Church Hero Row */
.terminal-church-hero {
  display: flex;
  align-items: center;
  gap: 14px;
}

.church-icon-orb {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: radial-gradient(circle at 35% 35%, rgba(255, 210, 0, 0.25) 0%, rgba(255, 170, 0, 0.08) 100%);
  border: 1.5px solid rgba(255, 210, 0, 0.5);
  box-shadow: 0 0 16px rgba(255, 210, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.church-cross {
  font-size: 24px;
  color: var(--accent-gold);
  filter: drop-shadow(0 0 8px rgba(255, 210, 0, 0.8));
  line-height: 1;
}

.church-title-group {
  min-width: 0;
}

.terminal-church-name {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 950;
  color: #ffffff;
  margin: 0 0 3px;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.terminal-church-tag {
  font-size: 11px;
  font-weight: 500;
  color: rgba(205, 222, 255, 0.7);
  letter-spacing: 0.2px;
}

/* Address Box with 1-Click Copy */
.terminal-address-box {
  background: rgba(4, 14, 30, 0.7);
  border: 1px solid rgba(0, 238, 221, 0.2);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.address-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.address-label {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: rgba(0, 238, 221, 0.8);
  text-transform: uppercase;
}

.copy-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 4px 11px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.copy-action-btn:hover {
  background: rgba(0, 238, 221, 0.16);
  border-color: rgba(0, 238, 221, 0.5);
  color: var(--accent-cyan);
}

.copy-action-btn.is-copied {
  background: rgba(0, 238, 100, 0.2);
  border-color: #00ee64;
  color: #00ee64;
}

.copy-icon {
  width: 12px;
  height: 12px;
}

.address-content {
  font-size: 13px;
  color: #f1f5f9;
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
}

.address-plus-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  padding-top: 4px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.plus-val {
  font-family: monospace, var(--font-primary);
  color: var(--accent-cyan);
  font-weight: 750;
  letter-spacing: 0.5px;
}

/* Telemetry Strip */
.terminal-telemetry-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 14px;
}

.telemetry-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.telemetry-lbl {
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.4);
}

.telemetry-val {
  font-family: monospace, var(--font-primary);
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-cyan);
  letter-spacing: 0.3px;
}

.telemetry-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.12);
}

/* Action Buttons Cluster */
.terminal-actions-cluster {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.station-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.3px;
  transition: all 0.22s ease;
  position: relative;
}

.station-btn .btn-svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.station-btn .btn-arrow {
  margin-left: 2px;
  font-size: 14px;
  transition: transform 0.2s ease;
}

.station-btn:hover .btn-arrow {
  transform: translate(2px, -2px);
}

.btn-maps-primary {
  background: linear-gradient(135deg, var(--accent-gold) 0%, #ff9e00 100%);
  color: #0b0900;
  box-shadow: 0 6px 22px rgba(255, 210, 0, 0.35);
  border: 1px solid rgba(255, 240, 160, 0.5);
}

.btn-maps-primary:hover {
  box-shadow: 0 10px 30px rgba(255, 210, 0, 0.55);
  transform: translateY(-2px);
  color: #000000;
}

.btn-maps-secondary {
  background: rgba(0, 238, 221, 0.09);
  color: var(--accent-cyan);
  border: 1.5px solid rgba(0, 238, 221, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.btn-maps-secondary:hover {
  background: rgba(0, 238, 221, 0.18);
  border-color: rgba(0, 238, 221, 0.7);
  box-shadow: 0 0 20px rgba(0, 238, 221, 0.3);
  transform: translateY(-2px);
}

/* ── Right Deck: Interactive Map Screen Frame ── */
.location-screen-frame {
  display: flex;
  flex-direction: column;
  background: #061122;
  border-radius: 26px;
  border: 1.5px solid rgba(0, 238, 221, 0.28);
  overflow: hidden;
  box-shadow:
    0 24px 60px rgba(0, 6, 22, 0.8),
    0 0 40px rgba(0, 238, 221, 0.08);
}

/* Chrome / Screen Control Bar */
.map-screen-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(6, 17, 34, 0.98);
  padding: 12px 18px;
  border-bottom: 1px solid rgba(0, 238, 221, 0.18);
  gap: 12px;
}

.screen-indicator-group {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.screen-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-red    { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green  { background: #28c840; }

.screen-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.75);
  margin-left: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screen-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.screen-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 5px 12px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.screen-action-btn:hover {
  background: rgba(0, 238, 221, 0.16);
  border-color: rgba(0, 238, 221, 0.5);
  color: var(--accent-cyan);
}

/* Map Viewport Area */
.map-viewport-wrapper {
  position: relative;
  height: 440px;
  width: 100%;
  background: #020713;
  overflow: hidden;
}

.map-viewport-wrapper iframe {
  width: 100%;
  height: 100%;
  display: block;
  transition: filter 0.4s ease;
}

/* Futuristic Cyber Dark Map Filter */
.map-viewport-wrapper.is-dark-mode iframe {
  filter: invert(90%) hue-rotate(180deg) brightness(88%) contrast(105%) saturate(80%);
}

/* Cyber HUD Corner Brackets Overlay */
.map-cyber-hud-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hud-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 238, 221, 0.6);
}

.hud-corner.top-left     { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.hud-corner.top-right    { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.hud-corner.bottom-left  { bottom: 12px; left: 12px; border-right: none; border-top: none; }
.hud-corner.bottom-right { bottom: 12px; right: 12px; border-left: none; border-top: none; }

.hud-compass-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(4, 12, 26, 0.85);
  border: 1px solid rgba(0, 238, 221, 0.35);
  border-radius: 8px;
  padding: 4px 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.compass-needle {
  color: #ff3355;
  font-size: 10px;
  line-height: 1;
}

.compass-n {
  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

/* Screen Footer Bar */
.map-screen-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(4, 12, 26, 0.96);
  padding: 8px 16px;
  border-top: 1px solid rgba(0, 238, 221, 0.12);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
  gap: 12px;
}

.footer-gps-ping {
  color: var(--accent-cyan);
  font-weight: 850;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

.footer-note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Responsive Behavior ── */
@media (max-width: 900px) {
  .location-station-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .map-viewport-wrapper {
    height: 340px;
  }
}



/* ── 14. Modern Multi-Column Church Footer (GMS Style) ───────────────────── */

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

.site-footer {
  position: relative;
  z-index: 5;
  background-color: #000814;
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: auto;
}

.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 60px 24px 40px;
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: 48px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.footer-brand-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.footer-brand-name {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 950;
  letter-spacing: -0.015em;
  color: var(--accent-cyan);
}

.footer-tagline {
  font-size: 13px;
  color: rgba(200, 218, 255, 0.68);
  line-height: 1.68;
  max-width: 400px;
  font-weight: 440;
}

.footer-heading {
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--accent-gold);
  margin-bottom: 20px;
}

.footer-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-nav-list a {
  color: rgba(205, 222, 255, 0.72);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.footer-nav-list a:hover {
  color: var(--accent-cyan);
  transform: translateX(4px);
}

.affiliation-text {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.church-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 215, 38, 0.35);
  padding: 10px 22px;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}

.church-badge:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--accent-gold);
  box-shadow: 0 8px 25px rgba(255, 215, 38, 0.25);
  transform: translateY(-2px);
}

.church-logo {
  height: 52px;
  width: 52px;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}

.church-name {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #ffffff;
}

.footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 24px;
  background-color: #00040a;
}

.bottom-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.copyright-text {
  font-size: 13px;
  color: var(--text-subtle);
  font-weight: 600;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
}

.footer-legal-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 700;
  transition: color 0.2s ease;
}

.footer-legal-links a:hover {
  color: var(--accent-gold);
  text-decoration: underline;
}

.legal-sep {
  color: rgba(255, 255, 255, 0.25);
  font-size: 11px;
}

/* ── Privacy & Child Protection Consent Dock (UU PDP Compliance) ── */
.privacy-consent-dock {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9998;
  max-width: 440px;
  background: rgba(2, 14, 38, 0.96);
  border: 1.5px solid rgba(0, 238, 221, 0.45);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 16px 40px rgba(0, 5, 20, 0.8), 0 0 20px rgba(0, 238, 221, 0.15);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.privacy-consent-dock.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.privacy-consent-dock-text {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(240, 248, 255, 0.92);
}

.privacy-consent-dock-text a {
  color: var(--accent-gold);
  text-decoration: underline;
  font-weight: 800;
}

.privacy-consent-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.privacy-accept-btn {
  background: var(--accent-cyan);
  color: #001a33;
  border: none;
  font-size: 11.5px;
  font-weight: 900;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.privacy-accept-btn:hover {
  filter: brightness(1.15);
  transform: scale(1.04);
}

@media (max-width: 768px) {
  .privacy-consent-dock {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: calc(100vw - 24px);
    padding: 12px 14px;
    gap: 8px;
    border-radius: 12px;
  }

  .privacy-consent-dock-text {
    font-size: 11.5px;
    line-height: 1.45;
  }

  .privacy-accept-btn {
    padding: 7px 16px;
    font-size: 11px;
  }
}

.back-to-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-white);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.back-to-top-btn:hover {
  background: var(--accent-gold);
  color: var(--accent-gold-dark);
  transform: translateY(-2px);
}

/* ── 15. Interactive Banner Modal Lightbox ───────────────────────────────── */
.banner-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.banner-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.banner-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 4, 15, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.banner-modal-dialog {
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, rgba(1, 22, 56, 0.96) 0%, rgba(0, 8, 20, 0.98) 100%);
  border: 2px solid var(--accent-cyan);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 30px var(--accent-cyan-glow);
  border-radius: var(--radius-xl);
  padding: 24px 28px;
  max-width: 440px;
  max-height: 92vh;
  overflow-y: auto;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.banner-modal.open .banner-modal-dialog {
  transform: scale(1);
}

.banner-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: none;
  font-size: 32px;
  color: var(--text-white);
  cursor: pointer;
  line-height: 1;
  transition: transform 0.2s ease, color 0.2s ease;
  z-index: 10;
}

.banner-modal-close:hover {
  color: var(--accent-gold);
  transform: scale(1.2);
}

.modal-header-info {
  margin-bottom: 12px;
}

.modal-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--accent-gold);
  text-transform: uppercase;
}

.modal-banner-title {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 900;
  color: var(--text-white);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
}

.modal-banner-img-wrap {
  width: 100%;
  max-height: 65vh;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  margin-bottom: 18px;
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.modal-banner-img {
  max-height: 58vh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45));
}

/* ── 16. Responsive Media Queries ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .footer-affiliation-col {
    grid-column: span 2;
  }
}

@media (max-width: 820px) {
  /* Prevent horizontal blowout */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
    width: 100%;
  }

  .main-content {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }

  /* ── Remove 3D Banner on Mobile ── */
  .gods-heroes-fullwidth,
  #banner-heroes,
  .gods-heroes-container,
  .small-banners-overlay,
  .small-banner-item,
  .banner-3d-card,
  .alcove-god-rays,
  .alcove-hero-spotlight,
  .alcove-pedestal-halo {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  /* Hide Banner links in Mobile Menu & Footer */
  .nav-menu a[href*="banner-heroes"],
  .footer-links a[href*="banner-heroes"] {
    display: none !important;
  }

  /* ── Remove Bubbles on Mobile ── */
  .ocean-bubbles,
  .ambient-bubble,
  .floating-bubble,
  .bubble-pop-particle,
  .bubble-pop-splat,
  .mascot-speech-bubble {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    pointer-events: none !important;
  }

  /* Compact Navbar & Always Visible Controls */
  .nav-container {
    padding: 0 16px;
  }

  .nav-brand {
    gap: 8px;
  }

  .logo-img {
    width: 34px;
    height: 34px;
  }

  .brand-title {
    font-size: 16px;
  }

  .brand-sub {
    font-size: 9px;
    letter-spacing: 1.8px;
  }

  .nav-actions {
    gap: 8px;
  }

  .sound-toggle-btn {
    padding: 6px 10px;
  }

  #sound-text {
    display: none;
  }

  .mobile-toggle-btn {
    display: flex !important;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  .nav-menu {
    position: fixed;
    top: var(--navbar-height);
    right: -100%;
    left: auto;           /* reset desktop centering */
    transform: none;      /* reset desktop centering */
    width: 280px;
    height: calc(100vh - var(--navbar-height));
    background: rgba(1, 22, 56, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid var(--glass-border);
    padding: 32px 24px;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    z-index: 999;
  }

  .nav-menu.open {
    right: 0;
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .nav-backdrop.active {
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .nav-link {
    width: 100%;
    padding: 12px 18px;
    font-size: 16px;
  }

  /* Mobile dropdown: inline below trigger, no absolute position */
  .nav-dropdown {
    position: static;
    transform: none;
    min-width: 100%;
    border-radius: 10px;
    margin-top: 6px;
    border: 1px solid rgba(0, 238, 221, 0.18);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 20, 75, 0.85);
    box-shadow: none;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    padding: 0;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }

  .nav-has-dropdown.is-open .nav-dropdown {
    max-height: 500px;
    padding: 8px;
    pointer-events: auto;
    transform: none;
  }

  .nav-dropdown::before { display: none; }

  .nav-dropdown-item {
    font-size: 14px;
    padding: 10px 16px;
  }

  /* Hero Mobile Typography & Sizing (Fixes 500px blowout!) */
  .hero-section {
    min-height: auto;
    padding-top: calc(var(--navbar-height) + 24px);
    padding-bottom: 48px;
    overflow: hidden;
    background: radial-gradient(ellipse 120% 80% at 50% 10%, rgba(0, 30, 90, 0.45) 0%, transparent 80%);
  }

  .hero-container {
    padding: 0 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .hero-kicker {
    padding: 5px 16px;
    font-size: 11px;
    letter-spacing: 2px;
    margin-bottom: 12px;
  }

  .hero-main-title {
    font-size: clamp(3.2rem, 14.5vw, 5rem) !important;
    line-height: 0.95;
    letter-spacing: clamp(-0.5px, 0.2vw, 2px);
    max-width: 100%;
    word-break: break-word;
    text-align: center;
  }

  .hero-title {
    margin-bottom: 18px;
    max-width: 100%;
  }

  /* Video credits subtle dampening so it doesn't clash with mascots */
  .hero-bg-video {
    opacity: 0.08 !important;
  }

  .hero-metrics {
    flex-direction: row;
    gap: 8px;
    border-radius: var(--radius-pill);
    padding: 8px 14px;
    max-width: 95%;
    width: auto;
  }

  .hero-metrics .metric-number {
    font-size: 17px;
  }

  .hero-metrics .metric-label {
    font-size: 10px;
  }

  .metric-divider {
    width: 1px;
    height: 20px;
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-affiliation-col {
    grid-column: span 1;
  }
}

@media (max-width: 600px) {
  .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    gap: 10px;
    margin-bottom: 20px;
  }

  .btn {
    width: 100%;
  }

  .main-about-card {
    padding: 28px 20px;
  }

  .about-features {
    flex-direction: column;
    width: 100%;
  }

  .feature-item {
    width: 100%;
    justify-content: center;
  }

  .schedule-grid, .heroes-grid, .social-cards-grid {
    grid-template-columns: 1fr;
  }

  .bottom-container {
    flex-direction: column;
    text-align: center;
  }

  /* ── 1. Remove All Mascots on Mobile Mode ── */
  .hero-mascot-stage,
  .hero-mascot-group,
  .hero-squad-member,
  .sea-critter,
  .interactive-mascot,
  .about-companion,
  .companion-starfish,
  .companion-jellyfish,
  .companion-octopus,
  .mascot-speech-bubble,
  [data-mascot],
  [data-critter] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  .mascot-speech-bubble {
    font-size: 11.5px;
    padding: 7px 12px;
    white-space: normal;
    max-width: 200px;
    border-radius: 14px;
  }

  /* ── Professional Modular Typography Scale (Mobile Hierarchy) ── */
  .section-title {
    font-size: clamp(2.25rem, 8.2vw, 3.2rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    font-weight: 950 !important;
    margin-bottom: 10px !important;
  }

  .section-subtitle {
    font-size: clamp(13.5px, 3.5vw, 15px) !important;
    line-height: 1.62 !important;
    color: rgba(215, 230, 255, 0.78) !important;
    font-weight: 480 !important;
    margin-bottom: 24px !important;
  }

  .album-hero-header .hero-title {
    font-size: clamp(2.85rem, 11.5vw, 4.2rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 14px !important;
    font-weight: 950 !important;
  }

  .album-hero-header .hero-subtitle {
    font-size: clamp(13.2px, 3.5vw, 14.8px) !important;
    line-height: 1.62 !important;
    color: rgba(215, 230, 255, 0.78) !important;
    font-weight: 480 !important;
    max-width: 90% !important;
    margin: 8px auto 20px !important;
  }
}

/* ── 15. Album Showcase Card Layout (Exact Mockup Design) ────────────────── */
.album-hero-header {
  padding-top: calc(var(--navbar-height) + 40px);
  padding-bottom: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.album-hero-header .hero-title {
  font-size: clamp(3.2rem, 6.8vw, 5.8rem);
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-top: 6px;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.album-hero-header .hero-subtitle {
  font-size: clamp(13.5px, 1.8vw, 15.5px);
  font-weight: 480;
  color: rgba(215, 230, 255, 0.78);
  line-height: 1.65;
  max-width: 580px;
  margin: 0 auto 28px;
}

.album-showcase-container {
  max-width: 980px;
  margin: 48px auto 96px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* ── 15a. Latar Belakang Album (Interactive Studio Archive & Workbench) ── */
.album-story-section {
  max-width: 1100px;
  margin: 28px auto 16px;
  padding: 0 20px;
}

.studio-archive-console {
  position: relative;
  background: 
    radial-gradient(ellipse 700px 400px at 15% 20%, rgba(255, 210, 0, 0.08), transparent 70%),
    radial-gradient(ellipse 600px 350px at 85% 85%, rgba(0, 238, 221, 0.09), transparent 65%),
    linear-gradient(160deg, rgba(8, 22, 44, 0.96) 0%, rgba(4, 13, 26, 0.98) 50%, rgba(7, 18, 36, 0.96) 100%);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-radius: 32px;
  padding: 20px 28px 18px;
  box-shadow: 
    0 30px 80px rgba(0, 5, 18, 0.8), 
    0 0 50px rgba(255, 210, 0, 0.06), 
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  border: 1.5px solid rgba(255, 210, 0, 0.25);
  border-top-color: rgba(255, 255, 255, 0.45);
  overflow: visible;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.studio-archive-console:hover {
  box-shadow: 
    0 36px 90px rgba(0, 5, 18, 0.9), 
    0 0 60px rgba(255, 210, 0, 0.12), 
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 210, 0, 0.4);
}

/* ── Top Console Control Panel (Master Tape Label + REC Dot + Scrubber Tabs) ── */
.console-header-rack {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  gap: 16px;
  flex-wrap: wrap;
}

.console-badge-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.console-tape-stamp {
  display: inline-block;
  background: #ecd460;
  color: #121008;
  font-family: monospace, var(--font-primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  transform: rotate(-1.5deg);
  border-left: 3px solid #ffaa00;
}

.console-rec-beacon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 45, 85, 0.14);
  border: 1px solid rgba(255, 45, 85, 0.4);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.rec-led-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff2d55;
  box-shadow: 0 0 8px #ff2d55;
  animation: recDotBlink 1.2s infinite;
}

@keyframes recDotBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.85); }
}

.rec-text {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #ff5070;
}

/* Interactive Milestone Scrubber Tabs */
.console-phase-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 8, 20, 0.65);
  padding: 4px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
}

.phase-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 750;
  padding: 7px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: inherit;
  user-select: none;
}

.phase-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.phase-tab-btn.is-active {
  color: #031020 !important;
  background: linear-gradient(135deg, var(--accent-gold) 0%, #ffc000 100%) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 4px 14px rgba(255, 210, 0, 0.4);
  font-weight: 850;
}

.phase-num {
  font-size: 9.5px;
  font-weight: 900;
  opacity: 0.85;
  letter-spacing: 0.5px;
}

.phase-name {
  white-space: nowrap;
}

/* ── Main Console Workbench Grid (Turntable on Left, Chronicle on Right) ── */
.console-workbench-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 22px;
  align-items: start;
  margin-bottom: 18px;
}

/* ── Left Deck: Interactive 3D Turntable Bay ── */
.console-turntable-bay {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.turntable-chassis {
  position: relative;
  background: radial-gradient(circle at 50% 40%, #0d2038 0%, #040d1a 100%);
  border: 1.5px solid rgba(0, 238, 221, 0.28);
  border-radius: 24px;
  padding: 14px 12px 12px;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.85), 0 16px 36px rgba(0, 0, 0, 0.65);
  overflow: hidden;
}

/* Mechanical Tonearm */
.turntable-tonearm {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 50px;
  height: 85px;
  pointer-events: none;
  z-index: 6;
}

.tonearm-base {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4d4d4, #666666);
  border: 1.5px solid #222;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  margin-left: auto;
}

.tonearm-rod {
  width: 3px;
  height: 62px;
  background: linear-gradient(to right, #ffffff, #888888);
  transform-origin: top right;
  transform: rotate(-26deg);
  margin-left: auto;
  margin-right: 6px;
  margin-top: -2px;
  border-radius: 2px;
}

.tonearm-head {
  width: 9px;
  height: 14px;
  background: #ecd460;
  border-radius: 2px;
  transform: rotate(-26deg);
  margin-left: auto;
  margin-right: 28px;
  margin-top: -8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

/* Platter & Vinyl Disc */
.turntable-platter {
  position: relative;
  width: 148px;
  height: 148px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #0e141e 0px, #0e141e 2px, #1c2636 2.5px, #0e141e 3.5px);
  border: 4px solid #1c2638;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.8), 0 0 24px rgba(0, 238, 221, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.platter-vinyl-disc {
  position: relative;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.95);
  transition: transform 0.4s ease;
}

.platter-vinyl-disc.is-spinning {
  animation: turntableVinylSpin 14s linear infinite;
}

@keyframes turntableVinylSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.platter-vinyl-disc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ── Mystery ? Disc for 5th Album (Turntable Platter) ── */
.mystery-question-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center, #26123c 0%, #130826 48%, #05020a 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.95);
  border: 2px dashed rgba(255, 210, 0, 0.65);
}

.mystery-disc-grooves {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0px, transparent 3px, rgba(255, 210, 0, 0.07) 3.5px, transparent 4px);
  pointer-events: none;
}

.mystery-disc-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
}

.mystery-question-mark {
  font-size: 40px;
  font-weight: 950;
  color: var(--accent-gold);
  line-height: 0.9;
  text-shadow: 
    0 0 16px rgba(255, 210, 0, 0.95),
    0 0 35px rgba(255, 210, 0, 0.6),
    0 4px 10px rgba(0, 0, 0, 0.9);
  animation: mysteryQuestionPulse 2s ease-in-out infinite alternate;
}

@keyframes mysteryQuestionPulse {
  0%   { transform: scale(0.94); filter: drop-shadow(0 0 8px rgba(255, 210, 0, 0.7)); }
  100% { transform: scale(1.06); filter: drop-shadow(0 0 22px rgba(255, 210, 0, 1)); }
}

.mystery-badge-txt {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #ffffff;
  background: rgba(255, 210, 0, 0.18);
  border: 1px solid rgba(255, 210, 0, 0.45);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-top: 6px;
  text-transform: uppercase;
}

.mystery-date-txt {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--accent-gold);
  opacity: 0.95;
  margin-top: 3px;
}

.vinyl-center-spindle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 15%, #999 50%, #222 100%);
  border: 2px solid #000;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.85);
  z-index: 4;
}

/* Turntable HUD Readout */
.turntable-hud-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 8, 20, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 8px 12px;
  gap: 8px;
}

.hud-phase-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hud-era-pill {
  font-size: 9.5px;
  font-weight: 900;
  color: var(--accent-gold);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.hud-title-text {
  font-size: 11.5px;
  font-weight: 750;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.hud-soundwave-bars {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 14px;
  flex-shrink: 0;
}

.hud-soundwave-bars span {
  width: 2.5px;
  background: linear-gradient(180deg, var(--accent-cyan) 0%, var(--accent-gold) 100%);
  border-radius: 2px;
  animation: hudBarBounce 1s ease-in-out infinite alternate;
}

.hud-soundwave-bars span:nth-child(1) { height: 5px; animation-delay: 0.1s; }
.hud-soundwave-bars span:nth-child(2) { height: 12px; animation-delay: 0.35s; }
.hud-soundwave-bars span:nth-child(3) { height: 8px; animation-delay: 0.2s; }
.hud-soundwave-bars span:nth-child(4) { height: 14px; animation-delay: 0.5s; }
.hud-soundwave-bars span:nth-child(5) { height: 7px; animation-delay: 0.15s; }
.hud-soundwave-bars span:nth-child(6) { height: 11px; animation-delay: 0.4s; }

@keyframes hudBarBounce {
  0%   { height: 4px; opacity: 0.4; }
  100% { height: 14px; opacity: 1; }
}

/* 5-Disc Selector Rack */
.console-disc-rack {
  text-align: left;
}

.disc-rack-label {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.disc-rack-buttons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.rack-disc-btn {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  background: #000c1e;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rack-disc-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.rack-disc-btn:hover {
  transform: translateY(-4px) scale(1.08);
  border-color: var(--accent-cyan);
  box-shadow: 0 6px 18px rgba(0, 238, 221, 0.35);
}

.rack-disc-btn:hover img {
  transform: scale(1.08);
}

.rack-disc-btn.is-active {
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 16px rgba(255, 210, 0, 0.6) !important;
  transform: translateY(-4px) scale(1.1);
}

.disc-thumb-num {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 9px;
  font-weight: 900;
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  padding: 1px 4px;
  border-radius: 4px;
  line-height: 1;
  pointer-events: none;
}

/* Teaser Mystery ? Disc Button #5 */
.teaser-disc-btn {
  background: radial-gradient(circle at center, #2e174c 0%, #15092a 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px dashed rgba(255, 210, 0, 0.75) !important;
}

.rack-mystery-thumb {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.teaser-question-icon {
  font-size: 26px;
  font-weight: 950;
  color: var(--accent-gold);
  text-shadow: 0 0 10px rgba(255, 210, 0, 0.9), 0 0 20px rgba(255, 210, 0, 0.5);
  line-height: 1;
  animation: mysteryQuestionPulse 2s ease-in-out infinite alternate;
}

/* ── Right Logbook: Authentic Editorial Narrative Cards ── */
.console-narrative-logbook {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.chronicle-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 18px 22px;
  transition: all 0.28s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.chronicle-card:hover {
  background: rgba(0, 238, 221, 0.04);
  border-color: rgba(0, 238, 221, 0.3);
  transform: translateX(4px);
}

.chronicle-card.is-active {
  background: linear-gradient(135deg, rgba(0, 238, 221, 0.08) 0%, rgba(255, 210, 0, 0.06) 100%), rgba(2, 16, 36, 0.92);
  border-color: rgba(255, 210, 0, 0.55);
  border-left: 4px solid var(--accent-gold);
  box-shadow: 0 10px 28px rgba(0, 5, 20, 0.5), 0 0 20px rgba(255, 210, 0, 0.1);
  transform: translateX(5px);
}

.chronicle-card-ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  gap: 10px;
}

.chronicle-step-badge {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--accent-gold);
  background: rgba(255, 210, 0, 0.12);
  border: 1px solid rgba(255, 210, 0, 0.3);
  padding: 2.5px 8px;
  border-radius: var(--radius-pill);
}

.chronicle-time-stamp {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.8px;
  color: var(--accent-cyan);
  text-transform: uppercase;
}

.chronicle-time-stamp.highlight-gold-text {
  color: var(--accent-gold);
}

.chronicle-heading {
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 8px;
  line-height: 1.25;
}

.chronicle-paragraph {
  font-size: 14.5px;
  line-height: 1.68;
  color: rgba(220, 235, 255, 0.84);
  margin: 0 0 10px;
  font-weight: 480;
}

.chronicle-paragraph strong {
  color: #ffffff;
  font-weight: 800;
}

.chronicle-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 750;
  color: rgba(0, 238, 221, 0.9);
  background: rgba(0, 238, 221, 0.08);
  padding: 4px 10px;
  border-radius: 8px;
}

.chronicle-meta-tag.gold-glow-tag {
  color: var(--accent-gold);
  background: rgba(255, 210, 0, 0.1);
  border: 1px solid rgba(255, 210, 0, 0.25);
}

.meta-spark {
  color: var(--accent-gold);
}

.chronicle-album-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
}

.album-name-tag {
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 3px 10px;
  border-radius: 7px;
}

/* ── Chronicle: Only 1 card visible at a time ── */
.chronicle-card:not(.is-active) {
  display: none;
}

/* Card actions row (meta-tag + nav dock) */
.chronicle-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Nav dock: Prev / counter / Next */
.chronicle-nav-dock {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.chronicle-step-fraction {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.story-nav-btn {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 11.5px;
  font-weight: 750;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  font-family: inherit;
}
.story-nav-btn:hover {
  background: rgba(0, 238, 221, 0.12);
  border-color: rgba(0, 238, 221, 0.4);
}
.next-btn { color: var(--accent-cyan); }
.prev-btn { color: var(--text-muted); }

/* ── Bottom: Handcrafted Engraved Golden Benediction Plaque ── */
.studio-benediction-plaque {
  position: relative;
  background: 
    radial-gradient(ellipse 500px 100px at 50% 50%, rgba(255, 210, 0, 0.12), transparent 70%),
    linear-gradient(135deg, rgba(32, 24, 8, 0.92) 0%, rgba(18, 13, 4, 0.98) 100%);
  border: 1.5px solid rgba(255, 210, 0, 0.45);
  border-radius: 18px;
  padding: 18px 28px;
  margin-top: 12px;
  box-shadow: 
    0 10px 28px rgba(0, 0, 0, 0.55), 
    inset 0 1px 0 rgba(255, 240, 150, 0.35), 
    0 0 24px rgba(255, 210, 0, 0.14);
}

/* Brass Rivet Screws */
.plaque-corner-screw {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 15%, #ffd200 60%, #8c7000 100%);
  position: absolute;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 4px rgba(255, 210, 0, 0.6);
}

.plaque-corner-screw.tl { top: 8px; left: 8px; }
.plaque-corner-screw.tr { top: 8px; right: 8px; }
.plaque-corner-screw.bl { bottom: 8px; left: 8px; }
.plaque-corner-screw.br { bottom: 8px; right: 8px; }

.plaque-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.plaque-cross-symbol {
  font-size: 24px;
  color: var(--accent-gold);
  filter: drop-shadow(0 0 8px rgba(255, 210, 0, 0.65));
  flex-shrink: 0;
}

.plaque-scripture-line {
  margin: 0 !important;
  font-size: 14.5px;
  font-weight: 750;
  color: #fff4d1;
  line-height: 1.55;
}

.plaque-gold-blessing {
  color: var(--accent-gold);
  font-weight: 900;
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════
   ── 15b. TRANSITION DIVIDER: Sleek Cyber Neon Line ──
   ══════════════════════════════════════════════════════════════════ */
.catalog-neon-divider {
  max-width: 1040px;
  height: 2px;
  margin: 24px auto 18px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(0, 238, 221, 0.25) 15%, 
    #00eedd 50%, 
    rgba(0, 238, 221, 0.25) 85%, 
    transparent 100%
  );
  box-shadow: 
    0 0 10px rgba(0, 238, 221, 0.95), 
    0 0 24px rgba(0, 238, 221, 0.6), 
    0 0 42px rgba(0, 238, 221, 0.3);
  border-radius: 999px;
  position: relative;
}

.catalog-neon-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 4px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 
    0 0 14px #00eedd, 
    0 0 28px #00eedd, 
    0 0 42px #ffffff;
}

/* Dedicated Song Catalog Header Block */
.catalog-intro-header {
  max-width: 1040px;
  margin: 48px auto 36px;
  padding: 0 20px;
  text-align: center;
}

.catalog-intro-header .section-header {
  margin-bottom: 0;
}

/* Responsive Media Queries for Studio Archive & Workbench (Mobile Redesign) */
@media (max-width: 960px) {
  .console-workbench-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 820px) {
  .album-story-section {
    padding: 0 12px;
    margin: 16px auto 10px;
  }

  .studio-archive-console {
    padding: 16px 14px;
    border-radius: 18px;
    background: linear-gradient(165deg, rgba(8, 22, 44, 0.98) 0%, rgba(2, 12, 28, 0.99) 100%);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 210, 0, 0.28);
  }

  .console-header-rack {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  .console-badge-group {
    justify-content: space-between;
    width: 100%;
  }

  .console-tape-stamp {
    font-size: 9.5px;
    padding: 4px 9px;
    letter-spacing: 0.8px;
  }

  .console-rec-beacon {
    padding: 3px 8px;
  }

  /* Scrubber tabs: Sleek 4-pill horizontal row with no awkward wrapping */
  .console-phase-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    gap: 5px !important;
    padding: 3px !important;
    border-radius: 12px !important;
    scrollbar-width: none;
  }

  .console-phase-tabs::-webkit-scrollbar {
    display: none;
  }

  .phase-tab-btn {
    flex: 1 0 auto !important;
    padding: 7px 10px !important;
    font-size: 11px !important;
    border-radius: 9px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .console-workbench-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Turntable: Compact, elegant vinyl player badge on mobile */
  .console-turntable-bay {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .turntable-chassis {
    max-width: 190px !important;
    height: 190px !important;
    padding: 8px !important;
    border-radius: 16px !important;
    margin: 0 auto 10px !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6) !important;
  }

  .turntable-tonearm {
    display: none !important;
  }

  .turntable-hud-readout {
    padding: 5px 8px !important;
    border-radius: 8px !important;
  }

  .hud-era-pill {
    font-size: 8.5px !important;
  }

  .hud-title-text {
    font-size: 10px !important;
    max-width: 105px !important;
  }

  /* 5-Disc Selector Rack */
  .console-disc-rack {
    width: 100% !important;
    max-width: 270px !important;
    margin: 4px auto 0 !important;
    text-align: center !important;
  }

  .disc-rack-label {
    font-size: 8.5px !important;
    letter-spacing: 0.8px !important;
    text-align: center !important;
    margin-bottom: 5px !important;
  }

  .disc-rack-buttons {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 5px !important;
  }

  .rack-disc-btn {
    border-radius: 8px !important;
  }

  /* Chronicle Narrative Cards */
  .chronicle-card {
    padding: 15px 14px !important;
    border-radius: 14px !important;
    transform: none !important;
  }

  .chronicle-card.is-active {
    transform: none !important;
    border-left: 3.5px solid var(--accent-gold) !important;
  }

  .chronicle-card-ribbon {
    margin-bottom: 6px !important;
  }

  .chronicle-step-badge {
    font-size: 9px !important;
    padding: 2px 7px !important;
  }

  .chronicle-time-stamp {
    font-size: 10px !important;
  }

  .chronicle-heading {
    font-size: 17.5px !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
    font-weight: 900 !important;
  }

  .chronicle-paragraph {
    font-size: 13.5px !important;
    line-height: 1.62 !important;
    color: rgba(220, 235, 255, 0.82) !important;
    font-weight: 480 !important;
    margin-bottom: 10px !important;
  }

  .chronicle-meta-tag {
    font-size: 10.5px !important;
    padding: 4px 9px !important;
    line-height: 1.4 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .chronicle-card-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }

  .chronicle-nav-dock {
    justify-content: space-between !important;
    width: 100% !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .story-nav-btn {
    padding: 7px 16px !important;
    font-size: 12px !important;
    min-height: 38px !important;
  }

  /* Benediction Plaque */
  .studio-benediction-plaque {
    padding: 14px 16px !important;
    margin-top: 12px !important;
    border-radius: 14px !important;
  }

  .plaque-content {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: left !important;
  }

  .plaque-cross-symbol {
    font-size: 20px !important;
  }

  .plaque-scripture-line {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }

  .catalog-neon-divider {
    margin: 28px auto 18px;
  }
}

/* ── Spotify Verified Artist Badge (Header) ── */
.spotify-artist-badge-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.spotify-verified-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(29, 185, 84, 0.12);
  border: 1px solid rgba(29, 185, 84, 0.45);
  color: #1ed760;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(29, 185, 84, 0.2);
}

.spotify-chip-icon {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.spotify-follow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1db954;
  color: #000000;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 18px rgba(29, 185, 84, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.spotify-follow-pill:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 24px rgba(29, 185, 84, 0.65);
}

.spotify-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #000000;
  animation: pulseLive 1.4s infinite;
}

/* ── Album Showcase Card (Color Theory & Deep Ocean Glassmorphism) ── */
.album-showcase-card {
  position: relative;
  background: linear-gradient(145deg, rgba(8, 28, 54, 0.84) 0%, rgba(3, 16, 32, 0.94) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 28px;
  padding: 34px 38px 28px 34px;
  box-shadow: 0 20px 50px rgba(0, 8, 24, 0.6), 0 0 35px var(--album-glow, rgba(0, 238, 221, 0.14)), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(0, 238, 221, 0.28);
  border-top-color: rgba(255, 255, 255, 0.45);
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 40px;
  align-items: start;
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  overflow: visible !important; /* Allow vinyl to peek out gracefully */
}

/* Chromatic Resonance per Album (Color Theory) */
#album-1 {
  --album-accent: #00eedd;
  --album-glow: rgba(0, 238, 221, 0.22);
  background-image: radial-gradient(ellipse 550px 320px at 12% 25%, rgba(0, 238, 221, 0.14), transparent 70%), linear-gradient(145deg, rgba(8, 28, 54, 0.85) 0%, rgba(3, 16, 32, 0.95) 100%);
}

#album-2 {
  --album-accent: #f7d130;
  --album-glow: rgba(247, 209, 48, 0.2);
  background-image: radial-gradient(ellipse 550px 320px at 12% 25%, rgba(247, 209, 48, 0.12), transparent 70%), linear-gradient(145deg, rgba(8, 28, 54, 0.85) 0%, rgba(3, 16, 32, 0.95) 100%);
}

#album-3 {
  --album-accent: #ff9e00;
  --album-glow: rgba(255, 158, 0, 0.2);
  background-image: radial-gradient(ellipse 550px 320px at 12% 25%, rgba(255, 158, 0, 0.12), transparent 70%), linear-gradient(145deg, rgba(8, 28, 54, 0.85) 0%, rgba(3, 16, 32, 0.95) 100%);
}

#album-4 {
  --album-accent: #38bdf8;
  --album-glow: rgba(56, 189, 248, 0.22);
  background-image: radial-gradient(ellipse 550px 320px at 12% 25%, rgba(56, 189, 248, 0.14), transparent 70%), linear-gradient(145deg, rgba(8, 28, 54, 0.85) 0%, rgba(3, 16, 32, 0.95) 100%);
}

.album-showcase-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 65px rgba(0, 8, 24, 0.75), 0 0 45px var(--album-glow, rgba(0, 238, 221, 0.28)), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  border-color: var(--album-accent, rgba(0, 238, 221, 0.5));
}

/* ── Interactive Vinyl Record & Album Cover Sleeve ── */
.album-cover-box {
  position: relative;
  width: 270px;
  height: 270px;
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
  perspective: 1000px;
}

.album-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  border: 2.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 16px 36px rgba(0, 20, 40, 0.55);
  position: relative;
  z-index: 2;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  image-rendering: -webkit-optimize-contrast;
}

/* Vinyl Disc (High-End Realistic Micro-Grooves & Anisotropic Sheen) */
.vinyl-disc {
  position: absolute;
  top: 10px;
  right: 0;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: 
    /* Anisotropic Dual Conical Light Sheen (Simulates real studio vinyl reflection) */
    conic-gradient(
      from 45deg,
      rgba(255, 255, 255, 0.15) 0deg,
      transparent 55deg,
      rgba(255, 255, 255, 0.12) 110deg,
      transparent 180deg,
      rgba(255, 255, 255, 0.15) 225deg,
      transparent 290deg,
      rgba(255, 255, 255, 0.12) 340deg,
      transparent 360deg
    ),
    /* Micro-Grooves Texture */
    repeating-radial-gradient(
      circle,
      #111111 0px,
      #111111 2px,
      #1e1e1e 2.5px,
      #0d0d0d 3.5px,
      #161616 4.5px
    );
  border: 2px solid #222222;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), 0 0 1px rgba(255, 255, 255, 0.3);
  z-index: 1;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

.vinyl-grooves {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.09);
  box-shadow: 
    inset 0 0 0 16px rgba(0, 0, 0, 0.45), 
    inset 0 0 0 32px rgba(255, 255, 255, 0.03),
    inset 0 0 0 54px rgba(0, 0, 0, 0.4);
}

.vinyl-center-label {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2.5px solid var(--accent-gold);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.9), 0 0 12px rgba(247, 209, 48, 0.35);
  position: relative;
  z-index: 2;
  transition: box-shadow 0.35s ease;
}

.vinyl-center-label::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #000000;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.9);
}

/* On Cover Hover: Sleeve tilts & Vinyl glides out smoothly */
.album-cover-box:hover .album-cover-img {
  transform: translateX(-16px) rotateY(-8deg) translateZ(0);
  box-shadow: -14px 28px 48px rgba(0, 10, 25, 0.7);
}

.album-cover-box:hover .vinyl-disc {
  transform: translateX(105px) rotate(140deg) translateZ(0);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.9), 0 0 25px rgba(0, 238, 221, 0.25);
}

/* 🚀 Active Turntable Playback: Vinyl Slides Out & Spins Continuously! */
.album-showcase-card.is-playing .vinyl-disc,
.album-cover-box.is-playing .vinyl-disc {
  transform: translateX(65px) rotate(0deg) translateZ(0);
  animation: vinylPlayingSpin 3.2s linear infinite;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.85), 0 0 30px var(--accent-cyan-glow);
}

.album-showcase-card.is-playing .vinyl-center-label,
.album-cover-box.is-playing .vinyl-center-label {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 20px rgba(0, 238, 221, 0.6);
}

.album-showcase-card.is-playing .album-cover-box:hover .vinyl-disc,
.album-cover-box.is-playing:hover .vinyl-disc {
  animation: vinylPlayingSpinHover 3.2s linear infinite;
}

@keyframes vinylPlayingSpin {
  from { transform: translateX(65px) rotate(0deg) translateZ(0); }
  to { transform: translateX(65px) rotate(360deg) translateZ(0); }
}

@keyframes vinylPlayingSpinHover {
  from { transform: translateX(110px) rotate(0deg) translateZ(0); }
  to { transform: translateX(110px) rotate(360deg) translateZ(0); }
}


/* ── Album Tracklist Header & Metadata ── */
.album-tracklist-section {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.album-header-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.12);
  flex-wrap: wrap;
  gap: 12px;
}

.album-title-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.album-pill-badge {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--album-accent, var(--accent-cyan));
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  display: inline-block;
  width: fit-content;
}

.album-card-title {
  font-size: clamp(2rem, 3.8vw, 2.8rem);
  font-weight: 950;
  color: #ffffff;
  letter-spacing: -0.025em;
  margin: 0;
  text-transform: uppercase;
  line-height: 1.05;
}

.album-spotify-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.album-spotify-link-btn:hover {
  background: #1db954;
  color: #000000;
  border-color: #1db954;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(29, 185, 84, 0.45);
}

.btn-spotify-svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* ── Track Rows with Audio Preview ── */
.album-tracks-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

.track-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 12px;
  border-radius: 10px;
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
  border: 1px solid transparent;
}

.track-row-item.highlight-row {
  background: rgba(255, 255, 255, 0.04);
}

.track-row-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateX(5px);
}

.track-row-item.is-playing {
  background: linear-gradient(90deg, rgba(29, 185, 84, 0.24) 0%, rgba(0, 238, 221, 0.16) 100%) !important;
  border-color: rgba(29, 185, 84, 0.5) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transform: translateX(8px);
}

.track-play-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--album-accent, var(--accent-cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.track-row-item:hover .track-play-btn {
  background: #1db954;
  color: #ffffff;
  transform: scale(1.15);
}

.track-play-btn svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.track-play-btn .pause-icon {
  display: none;
}

.track-play-btn .equalizer-bars {
  display: none;
}

/* Playing State on Row */
.track-row-item.is-playing .track-play-btn {
  background: #1db954;
  color: #ffffff;
}

.track-row-item.is-playing .track-play-btn .play-icon {
  display: none;
}

.track-row-item.is-playing .track-play-btn .equalizer-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.equalizer-bars .bar {
  width: 2.5px;
  background: currentColor;
  border-radius: 1px;
  animation: eqBounce 0.8s ease-in-out infinite alternate;
}

.equalizer-bars .bar:nth-child(1) { height: 6px; animation-delay: 0.1s; }
.equalizer-bars .bar:nth-child(2) { height: 12px; animation-delay: 0.3s; }
.equalizer-bars .bar:nth-child(3) { height: 8px; animation-delay: 0.2s; }

@keyframes eqBounce {
  0% { height: 3px; }
  100% { height: 12px; }
}

.track-number-digit {
  font-size: 15px;
  font-weight: 900;
  color: var(--album-accent, var(--accent-cyan));
  width: 26px;
  flex-shrink: 0;
}

.track-song-title {
  font-size: 15px;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  flex-shrink: 0;
}

.track-row-item.is-playing .track-song-title {
  color: #ffffff;
  font-weight: 900;
  text-shadow: 0 0 12px rgba(29, 185, 84, 0.4);
}

.track-dots-leader {
  flex: 1;
  height: 1px;
  margin: 0 12px;
  border-bottom: 2px dotted rgba(255, 255, 255, 0.2);
  align-self: center;
}

.track-duration-time {
  font-size: 14.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

.track-row-item.is-playing .track-duration-time {
  color: #1ed760;
  font-weight: 800;
}

.album-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 18px;
}

.circle-media-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background-color 0.2s ease;
  text-decoration: none;
}

.circle-media-btn:hover {
  transform: scale(1.18) translateY(-2px);
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.circle-media-btn svg {
  width: 24px;
  height: 24px;
  display: block;
}

.spotify-icon-circle svg {
  fill: #1db954;
}

.youtube-icon-circle svg {
  fill: #ff0000;
}

/* Light Theme Support for Album Showcase */
/* ── Floating Mini Audio Player (Spotify Style) ── */
.mini-audio-player {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(140px);
  width: min(880px, calc(100vw - 36px));
  background: rgba(0, 16, 36, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(0, 238, 221, 0.45);
  border-radius: var(--radius-pill);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75), 0 0 35px rgba(0, 238, 221, 0.25);
  z-index: 99990;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  opacity: 0;
  pointer-events: none;
}

.mini-audio-player.active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.mini-player-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  gap: 18px;
}

.mini-player-track-info {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 200px;
  max-width: 260px;
}

.mini-player-thumb {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.mini-player-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mini-player-title {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-player-album {
  font-size: 12px;
  color: var(--accent-cyan);
  white-space: nowrap;
}

.mini-player-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  max-width: 380px;
}

.mini-player-btn-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1db954;
  color: #000000;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(29, 185, 84, 0.4);
  flex-shrink: 0;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.mini-player-btn-circle:hover {
  transform: scale(1.1);
  background: #1ed760;
}

.mini-player-btn-circle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.mini-player-btn-circle .mini-pause-svg {
  display: none;
}

.mini-audio-player.is-playing .mini-player-btn-circle .mini-play-svg {
  display: none;
}

.mini-audio-player.is-playing .mini-player-btn-circle .mini-pause-svg {
  display: block;
}

.mini-player-timeline {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.mini-player-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1db954 0%, var(--accent-cyan) 100%);
  border-radius: 3px;
  transition: width 0.15s linear;
}

.mini-player-tag {
  font-size: 10px;
  font-weight: 900;
  color: var(--accent-gold);
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.mini-player-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mini-player-spotify-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.mini-player-spotify-btn:hover {
  background: #1db954;
  color: #000000;
  border-color: #1db954;
}

.mini-spotify-svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.mini-player-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  transition: color 0.2s ease;
}

.mini-player-close:hover {
  color: #ffffff;
}

@media (max-width: 860px) {
  .album-showcase-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 20px 24px 20px;
    border-radius: 22px;
  }

  .album-cover-box {
    margin: 0 auto 16px;
    width: 220px;
    height: 220px;
  }

  .vinyl-disc {
    width: 200px;
    height: 200px;
  }

  .vinyl-center-label {
    width: 72px;
    height: 72px;
  }

  .track-song-title, .track-duration-time, .track-number-digit {
    font-size: 13.5px;
  }

  .album-card-title {
    font-size: clamp(1.65rem, 5.5vw, 2.3rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }

  .track-dots-leader {
    margin: 0 8px;
  }

  .album-footer-actions {
    justify-content: center;
    margin-top: 20px;
  }

  /* ── Mobile Song Player Bar: Sleek Spotify/Apple Music Style ── */
  .mini-audio-player {
    bottom: 12px;
    left: 10px;
    right: 10px;
    transform: translateY(140px);
    width: auto;
    max-width: calc(100vw - 20px);
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    background: rgba(2, 14, 38, 0.96);
    border: 1.5px solid rgba(0, 238, 221, 0.45);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 238, 221, 0.2);
    z-index: 99995;
  }

  .mini-audio-player.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .mini-player-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 10px 10px;
    gap: 8px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
  }

  .mini-player-track-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    max-width: none;
    overflow: hidden;
  }

  .mini-player-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .mini-player-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }

  .mini-player-title {
    font-size: 13px;
    font-weight: 850;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
  }

  .mini-player-album {
    font-size: 11px;
    color: var(--accent-cyan);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    margin-top: 2px;
  }

  .mini-player-controls {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
    max-width: none;
  }

  .mini-player-btn-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #1db954;
    box-shadow: 0 2px 10px rgba(29, 185, 84, 0.5);
  }

  .mini-player-btn-circle svg {
    width: 16px;
    height: 16px;
  }

  .mini-player-tag {
    display: none;
  }

  .mini-player-timeline {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 0;
    overflow: hidden;
  }

  .mini-player-progress-bar {
    height: 100%;
    border-radius: 0;
    background: linear-gradient(90deg, #1db954 0%, var(--accent-cyan) 100%);
  }

  .mini-player-actions {
    display: flex !important;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }

  .mini-player-spotify-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .mini-player-spotify-btn span {
    display: none;
  }

  .mini-player-spotify-btn .mini-spotify-svg {
    width: 16px;
    height: 16px;
    fill: #1db954;
  }

  .mini-player-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 19px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
  }

  /* Prevent overlapping with countdown dock on mobile */
  body.audio-player-active .floating-countdown-dock:not(.is-user-positioned),
  .mini-audio-player.active ~ .floating-countdown-dock:not(.is-user-positioned) {
    bottom: 78px;
  }

  /* Prevent overlapping with privacy consent dock on mobile */
  body.audio-player-active .privacy-consent-dock,
  .mini-audio-player.active ~ .privacy-consent-dock {
    bottom: 78px !important;
  }
}

@media (max-width: 480px) {
  .album-showcase-card {
    padding: 20px 12px 18px 12px;
  }

  .track-row-item {
    padding: 3px 6px;
  }

  .track-song-title {
    font-size: 12.5px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .track-duration-time, .track-number-digit {
    font-size: 12.5px;
  }
}

/* ── 16. Scroll-Triggered Reveal & Dynamic Undo-on-Scroll-Up ────────────── */
.scroll-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s !important; /* Resets immediately when scrolling back up */
  will-change: opacity, transform;
}

.scroll-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--reveal-delay, 0s) !important;
}

/* Pop / Scale Variant */
.scroll-reveal.reveal-pop {
  transform: scale(0.93) translateY(22px);
}
.scroll-reveal.reveal-pop.is-revealed {
  transform: scale(1) translateY(0);
}

/* Section Line Laser Drawing Animation */
.section-line.scroll-reveal {
  transform: scaleX(0);
  transform-origin: center center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s ease;
  transition-delay: 0s !important;
}
.section-line.scroll-reveal.is-revealed {
  transform: scaleX(1);
  opacity: 1;
  transition-delay: 0.18s !important;
}

/* Section Headers Sequence */
.section-header .section-tag.scroll-reveal { --reveal-delay: 0s; }
.section-header .section-title.scroll-reveal { --reveal-delay: 0.08s; }
.section-header .section-subtitle.scroll-reveal { --reveal-delay: 0.22s; }

/* Gods Heroes Container 3D Niche Reveal */
.gods-heroes-container.scroll-reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s !important;
}
.gods-heroes-container.scroll-reveal.is-revealed {
  opacity: 1;
  transform: none; /* Keeps 3D perspective and mouse tracking intact */
  transition-delay: 0.1s !important;
}

/* Hero Section Elements Stagger Delays */
.hero-badge.scroll-reveal { --reveal-delay: 0.1s; }
.hero-title.scroll-reveal { --reveal-delay: 0.22s; }
.hero-subtitle.scroll-reveal { --reveal-delay: 0.35s; }
.hero-actions.scroll-reveal { --reveal-delay: 0.48s; }
.hero-metrics.scroll-reveal { --reveal-delay: 0.6s; }

/* Album Hero Header Stagger */
.album-hero-header .hero-badge.scroll-reveal { --reveal-delay: 0.1s; }
.album-hero-header .hero-title.scroll-reveal { --reveal-delay: 0.22s; }
.album-hero-header .hero-subtitle.scroll-reveal { --reveal-delay: 0.35s; }

/* Grid Child Staggers */
.schedule-grid > .scroll-reveal:nth-child(1) { --reveal-delay: 0.05s; }
.schedule-grid > .scroll-reveal:nth-child(2) { --reveal-delay: 0.14s; }
.schedule-grid > .scroll-reveal:nth-child(3) { --reveal-delay: 0.23s; }
.schedule-grid > .scroll-reveal:nth-child(4) { --reveal-delay: 0.32s; }

.heroes-grid > .scroll-reveal:nth-child(1) { --reveal-delay: 0.04s; }
.heroes-grid > .scroll-reveal:nth-child(2) { --reveal-delay: 0.11s; }
.heroes-grid > .scroll-reveal:nth-child(3) { --reveal-delay: 0.18s; }
.heroes-grid > .scroll-reveal:nth-child(4) { --reveal-delay: 0.25s; }
.heroes-grid > .scroll-reveal:nth-child(5) { --reveal-delay: 0.32s; }
.heroes-grid > .scroll-reveal:nth-child(6) { --reveal-delay: 0.39s; }

.social-cards-grid > .scroll-reveal:nth-child(1) { --reveal-delay: 0.05s; }
.social-cards-grid > .scroll-reveal:nth-child(2) { --reveal-delay: 0.14s; }
.social-cards-grid > .scroll-reveal:nth-child(3) { --reveal-delay: 0.23s; }
.social-cards-grid > .scroll-reveal:nth-child(4) { --reveal-delay: 0.32s; }

.about-features > .scroll-reveal:nth-child(1) { --reveal-delay: 0.12s; }
.about-features > .scroll-reveal:nth-child(2) { --reveal-delay: 0.22s; }
.about-features > .scroll-reveal:nth-child(3) { --reveal-delay: 0.32s; }

.album-showcase-container > .scroll-reveal:nth-child(1) { --reveal-delay: 0.06s; }
.album-showcase-container > .scroll-reveal:nth-child(2) { --reveal-delay: 0.18s; }
.album-showcase-container > .scroll-reveal:nth-child(3) { --reveal-delay: 0.30s; }

.footer-container > .scroll-reveal:nth-child(1) { --reveal-delay: 0.05s; }
.footer-container > .scroll-reveal:nth-child(2) { --reveal-delay: 0.16s; }
.footer-container > .scroll-reveal:nth-child(3) { --reveal-delay: 0.27s; }

/* Accessibility support: respect user reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .section-line.scroll-reveal,
  .gods-heroes-container.scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── 17. Lando Norris-Inspired High-Energy Polish & Coolness ──────────────── */

/* ── A. Fluid Interactive Custom Cursor ── */
.jk-cursor-dot,
.jk-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  border-radius: 50%;
  z-index: 999999;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform, width, height;
}

.jk-cursor-dot {
  width: 5px;
  height: 5px;
  background: var(--accent-cyan);
  box-shadow: 0 0 6px var(--accent-cyan), 0 0 12px var(--accent-cyan-glow);
  transition: width 0.22s ease, height 0.22s ease, background-color 0.22s ease, opacity 0.25s ease;
}

.jk-cursor-ring {
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(0, 238, 221, 0.55);
  box-shadow: 0 0 8px rgba(0, 238, 221, 0.20);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              height 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.3s ease, 
              background-color 0.3s ease, 
              opacity 0.25s ease;
}

/* Cursor active on screen */
body.cursor-active .jk-cursor-dot,
body.cursor-active .jk-cursor-ring {
  opacity: 1;
}

/* Hovering interactive elements (buttons, links, banners, cards) */
body.cursor-hover .jk-cursor-dot {
  width: 4px;
  height: 4px;
  background: var(--accent-gold);
  box-shadow: 0 0 8px var(--accent-gold);
}

body.cursor-hover .jk-cursor-ring {
  width: 34px;
  height: 34px;
  border-color: var(--accent-gold);
  background: rgba(255, 215, 38, 0.08);
  box-shadow: 0 0 14px rgba(255, 215, 38, 0.30);
}

/* Click feedback pulse */
body.cursor-down .jk-cursor-ring {
  transform: translate(-50%, -50%) scale(0.75);
  border-color: #ff3355;
}

/* Hide custom cursor on mobile touch or reduced motion */
@media (hover: none) and (pointer: coarse), (prefers-reduced-motion: reduce) {
  .jk-cursor-dot,
  .jk-cursor-ring {
    display: none !important;
  }
}

/* ── B. Kinetic Rolling Button Text (OFF+BRAND Style) ── */
.btn-roll {
  display: inline-block;
  overflow: hidden;
  height: 1.28em;
  line-height: 1.28em;
  vertical-align: middle;
}

.btn-roll-inner {
  display: flex;
  flex-direction: column;
  transition: transform 0.38s cubic-bezier(0.76, 0, 0.24, 1);
}

.btn-roll-text {
  display: block;
  height: 1.28em;
  line-height: 1.28em;
  white-space: nowrap;
}

.btn:hover .btn-roll-inner,
.btn-yt-card:hover .btn-roll-inner,
.circle-media-btn:hover .btn-roll-inner,
.banner-expand-btn:hover .btn-roll-inner {
  transform: translateY(-50%);
}

/* ── C. Dynamic Card Mouse Spotlight Sheen ── */
.schedule-card,
.hero-class-card,
.main-about-card,
.social-hub-card,
.album-showcase-card {
  position: relative;
  overflow: hidden;
}

.card-spotlight-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    380px circle at var(--card-mouse-x, 50%) var(--card-mouse-y, 50%),
    rgba(0, 238, 221, 0.16) 0%,
    rgba(247, 209, 48, 0.05) 40%,
    transparent 70%
  );
  z-index: 1;
}

.schedule-card:hover .card-spotlight-layer,
.hero-class-card:hover .card-spotlight-layer,
.main-about-card:hover .card-spotlight-layer,
.social-hub-card:hover .card-spotlight-layer,
.album-showcase-card:hover .card-spotlight-layer {
  opacity: 1;
}

/* ── D. Technical Corner Crosshairs (+) ── */
.card-corner {
  position: absolute;
  font-family: monospace, ui-monospace, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(0, 238, 221, 0.35);
  pointer-events: none;
  line-height: 1;
  user-select: none;
  z-index: 2;
  transition: color 0.3s ease, transform 0.3s ease;
}

.corner-tl { top: 12px; left: 14px; }
.corner-tr { top: 12px; right: 14px; }
.corner-bl { bottom: 12px; left: 14px; }
.corner-br { bottom: 12px; right: 14px; }

.schedule-card:hover .card-corner,
.hero-class-card:hover .card-corner,
.main-about-card:hover .card-corner,
.album-showcase-card:hover .card-corner {
  color: var(--accent-gold);
  transform: scale(1.2);
}

/* ── E. Masked Split-Line Text Reveal ── */
.masked-text-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.masked-text-inner {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.is-revealed .masked-text-inner,
.is-revealed.masked-text-inner {
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════════════════════
   18. OHZI Interactive Creative Inspiration (WebGL Cosmos, 3D Tilt, Magnetic)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A. Living Ambient Stardust Canvas ── */
.ambient-stars-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1; /* Floating peacefully above ocean rays, below cards */
  opacity: 0.9;
  transition: opacity 0.5s ease;
}

/* ── B. OHZI Dynamic 3D Card Tilt with Prismatic Reflection ── */
.schedule-card,
.hero-class-card,
.main-about-card,
.album-showcase-card,
.social-hub-card {
  perspective: 1000px;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  transition: transform 0.28s cubic-bezier(0.2, 0, 0.2, 1), 
              box-shadow 0.35s ease, 
              border-color 0.35s ease;
}

.schedule-card.is-tilting,
.hero-class-card.is-tilting,
.main-about-card.is-tilting,
.album-showcase-card.is-tilting,
.social-hub-card.is-tilting {
  transition: transform 0.08s ease-out, 
              box-shadow 0.35s ease, 
              border-color 0.35s ease;
  transform: perspective(1000px) 
             rotateX(var(--card-tilt-x, 0deg)) 
             rotateY(var(--card-tilt-y, 0deg)) 
             translateY(-8px) 
             scale3d(1.02, 1.02, 1.02);
}

/* Prismatic edge reflection (hugs card contour following cursor) */
.card-prismatic-border {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    460px circle at var(--card-mouse-x, 50%) var(--card-mouse-y, 50%),
    rgba(0, 238, 221, 0.5) 0%,
    rgba(255, 215, 0, 0.35) 25%,
    rgba(0, 162, 255, 0.2) 45%,
    transparent 65%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1.5px;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 2;
}

.schedule-card:hover .card-prismatic-border,
.hero-class-card:hover .card-prismatic-border,
.main-about-card:hover .card-prismatic-border,
.album-showcase-card:hover .card-prismatic-border,
.social-hub-card:hover .card-prismatic-border {
  opacity: 1;
}

/* ── C. OHZI-Inspired Magnetic Interactive Physics ── */
[data-magnetic] {
  display: inline-flex;
  transition: transform 0.18s cubic-bezier(0.2, 0, 0.2, 1);
  will-change: transform;
}

[data-magnetic] > * {
  pointer-events: none;
  transition: transform 0.22s cubic-bezier(0.2, 0, 0.2, 1);
}

/* ── D. Upgraded OHZI Liquid Glass Cursor Ring ── */
body.cursor-hover .jk-cursor-ring {
  width: 34px;
  height: 34px;
  border-color: rgba(0, 238, 221, 0.80);
  background: radial-gradient(circle, rgba(0, 238, 221, 0.10) 0%, transparent 70%);
  box-shadow: 0 0 14px rgba(0, 238, 221, 0.30);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* ── E. Audiovisual Dancing Soundwave Equalizer ── */
.track-equalizer-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 14px;
  width: 14px;
  margin-left: 10px;
  vertical-align: middle;
}

.track-equalizer-bars .eq-bar {
  width: 2px;
  background: var(--accent-cyan);
  border-radius: 1px;
  animation: eqPulse 0.75s ease-in-out infinite alternate;
  box-shadow: 0 0 6px var(--accent-cyan-glow);
}

.track-equalizer-bars .eq-bar:nth-child(1) { height: 40%; animation-delay: 0.1s; }
.track-equalizer-bars .eq-bar:nth-child(2) { height: 95%; animation-delay: 0.3s; }
.track-equalizer-bars .eq-bar:nth-child(3) { height: 65%; animation-delay: 0.18s; }
.track-equalizer-bars .eq-bar:nth-child(4) { height: 85%; animation-delay: 0.4s; }

@keyframes eqPulse {
  0% { transform: scaleY(0.25); }
  100% { transform: scaleY(1); }
}

.album-track-item:not(.playing) .track-equalizer-bars {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   19. Active Theory Creative Digital Inspiration (Fluid Ripples, Sound, Foil)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A. Navbar Sound Atmosphere Toggle ── */
/* ── Navbar Language Switcher Bar (IDN / ENG) ── */
.lang-switch-bar {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill, 9999px);
  padding: 3px 4px;
  gap: 2px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: var(--transition-smooth, all 0.3s ease);
  user-select: none;
  box-sizing: border-box;
}

.lang-switch-bar:hover {
  border-color: rgba(0, 238, 221, 0.45);
  box-shadow: 0 0 16px rgba(0, 238, 221, 0.22);
}

.lang-btn {
  background: transparent;
  border: none;
  outline: none;
  color: rgba(255, 255, 255, 0.70);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill, 9999px);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lang-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

/* ── IDN active: Indonesia red ── */
.lang-btn.is-active[data-lang="id"] {
  background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
  color: #ffffff;
  border: 1px solid rgba(231, 76, 60, 0.9);
  box-shadow: 0 0 14px rgba(231, 76, 60, 0.65), 0 2px 8px rgba(0,0,0,0.35);
  font-weight: 900;
  animation: langFlashRed 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* ── ENG active: deep blue ── */
.lang-btn.is-active[data-lang="en"] {
  background: linear-gradient(135deg, #1565c0 0%, #1e88e5 100%);
  color: #ffffff;
  border: 1px solid rgba(30, 136, 229, 0.9);
  box-shadow: 0 0 14px rgba(30, 136, 229, 0.65), 0 2px 8px rgba(0,0,0,0.35);
  font-weight: 900;
  animation: langFlashBlue 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes langFlashRed {
  0%   { box-shadow: 0 0 0px rgba(231, 76, 60, 0); transform: scale(0.92); }
  50%  { box-shadow: 0 0 28px rgba(231, 76, 60, 0.9); transform: scale(1.08); }
  100% { box-shadow: 0 0 14px rgba(231, 76, 60, 0.65); transform: scale(1); }
}

@keyframes langFlashBlue {
  0%   { box-shadow: 0 0 0px rgba(30, 136, 229, 0); transform: scale(0.92); }
  50%  { box-shadow: 0 0 28px rgba(30, 136, 229, 0.9); transform: scale(1.08); }
  100% { box-shadow: 0 0 14px rgba(30, 136, 229, 0.65); transform: scale(1); }
}

.lang-divider {
  color: rgba(255, 255, 255, 0.28);
  font-size: 11px;
  font-weight: 700;
  padding: 0 1px;
  pointer-events: none;
}

@media (max-width: 540px) {
  .lang-switch-bar {
    padding: 2px 3px;
  }
  .lang-btn {
    font-size: 10px;
    padding: 3px 6px;
    letter-spacing: 0.3px;
  }
}

.sound-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--text-white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition-smooth);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sound-toggle-btn:hover {
  background: rgba(0, 238, 221, 0.18);
  transform: translateY(-2px);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 16px var(--accent-cyan-glow);
}

.sound-toggle-btn.is-active {
  background: rgba(0, 238, 221, 0.22);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  box-shadow: 0 0 18px rgba(0, 238, 221, 0.35);
}

.sound-eq-icon {
  display: inline-flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 12px;
  width: 12px;
}

.sound-eq-icon .s-bar {
  width: 2.5px;
  height: 35%;
  background-color: currentColor;
  border-radius: 1px;
  transition: height 0.2s ease;
}

.sound-toggle-btn.is-active .sound-eq-icon .s-bar:nth-child(1) {
  animation: eqPulse 0.55s ease-in-out infinite alternate;
}
.sound-toggle-btn.is-active .sound-eq-icon .s-bar:nth-child(2) {
  animation: eqPulse 0.85s ease-in-out infinite alternate 0.15s;
}
.sound-toggle-btn.is-active .sound-eq-icon .s-bar:nth-child(3) {
  animation: eqPulse 0.7s ease-in-out infinite alternate 0.3s;
}

/* ── B. Responsive Navbar Controls on Small Devices ── */
@media (max-width: 540px) {
  #theme-text,
  #sound-text {
    display: none;
  }
  .sound-toggle-btn {
    padding: 7px 11px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   20. Immersive Garden Editorial Inspiration (Vitrine Depth & Micro-Interactions)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A. Vitrine Image Counter-Parallax on Hover ── */
.class-banner-thumb,
.album-cover-img {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
  will-change: transform;
}

.hero-class-card:hover .class-banner-thumb,
.album-showcase-card:hover .album-cover-img {
  transform: scale(1.035) translate3d(
    calc(var(--card-tilt-y, 0deg) * -0.6px),
    calc(var(--card-tilt-x, 0deg) * 0.6px),
    0
  );
}

/* ── C. Editorial Hairline Micro-Index Badge ── */
.editorial-index-chip {
  font-family: monospace, ui-monospace, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--accent-cyan);
  opacity: 0.75;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0, 238, 221, 0.25);
  background: rgba(0, 238, 221, 0.06);
  transition: opacity 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.schedule-card:hover .editorial-index-chip,
.album-showcase-card:hover .editorial-index-chip {
  opacity: 1;
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

/* ══════════════════════════════════════════════════════════════════════════
   21. Niche Insanely Cool Visual Innovations (Active Theory & Lusion Style)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A. Volumetric Celestial God Rays & Targeted Hero Spotlight ── */
.gods-heroes-container {
  position: relative;
  overflow: visible;
}

/* Ambient swaying celestial god rays (Smooth diffused mist) */
.alcove-god-rays {
  position: absolute;
  top: -120px;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 0.28;
  background: 
    repeating-linear-gradient(
      -65deg,
      transparent 0%,
      transparent 7%,
      rgba(0, 238, 221, 0.05) 11%,
      rgba(247, 209, 48, 0.06) 16%,
      transparent 22%,
      transparent 30%
    );
  filter: blur(16px);
  -webkit-filter: blur(16px);
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 15%,
    black 35%,
    black 70%,
    transparent 96%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 15%,
    black 35%,
    black 70%,
    transparent 96%
  );
  animation: godRaysSway 16s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes godRaysSway {
  0% { transform: skewX(-3deg) scaleY(0.98); opacity: 0.25; }
  50% { transform: skewX(2deg) scaleY(1.02); opacity: 0.4; }
  100% { transform: skewX(-4deg) scaleY(1); opacity: 0.28; }
}

/* Targeted Top-Down Hero Spotlight (Silky Soft Volumetric Heavenly Glow, Zero Sharp Edges) */
.alcove-hero-spotlight {
  position: absolute;
  top: -160px;
  left: 0;
  width: 360px;
  height: calc(100% + 220px);
  pointer-events: none;
  z-index: 12;
  opacity: 0;
  background: radial-gradient(
    ellipse 65% 45% at 50% 40%,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(247, 209, 48, 0.32) 20%,
    rgba(0, 238, 221, 0.16) 42%,
    rgba(0, 238, 221, 0.04) 64%,
    transparent 80%
  );
  filter: blur(20px);
  -webkit-filter: blur(20px);
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 14%,
    black 32%,
    black 70%,
    transparent 96%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 14%,
    black 32%,
    black 70%,
    transparent 96%
  );
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.alcove-hero-spotlight.is-active {
  opacity: 1;
}

/* Floor Pedestal Halo (Luminous smooth floor reflection directly under the hovered standing hero) */
.alcove-pedestal-halo {
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 180px;
  height: 52px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 11;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(247, 209, 48, 0.55) 0%, rgba(0, 238, 221, 0.35) 45%, transparent 75%);
  filter: blur(8px);
  -webkit-filter: blur(8px);
  box-shadow: 0 0 45px rgba(247, 209, 48, 0.45), 0 0 65px var(--accent-cyan-glow);
  transform: scaleY(0.4) translateZ(0);
  transition: opacity 0.45s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.alcove-pedestal-halo.is-active {
  opacity: 1;
}


/* ── D. Audio-Reactive Ambient Canvas Breathing Glow ── */
#ohzi-ambient-canvas {
  transition: filter 0.25s ease;
}

body.audio-is-playing #ohzi-ambient-canvas {
  filter: drop-shadow(0 0 25px rgba(0, 238, 221, 0.25));
}

/* ══════════════════════════════════════════════════════════════════════════
   22. Landon Norris-Inspired Hero Ambient Video & Live Ambient Dock
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero Ambient Video Layer (Visibly appears at subtle opacity) ── */
.hero-ambient-video-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  will-change: opacity, transform;
}

.hero-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%) scale(1.04);
  object-fit: cover;
  opacity: 0.24; /* Subtle small percent amount of opacity */
  mix-blend-mode: screen;
  filter: saturate(1.3) contrast(1.15) brightness(0.92);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              filter 0.8s ease, 
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

/* User interaction boost: Hovering or toggling "More Show" */
.hero-section.mode-boost .hero-bg-video,
.hero-section:hover .hero-bg-video {
  opacity: 0.40;
  filter: saturate(1.4) contrast(1.2) brightness(1.0);
  transform: translate(-50%, -50%) scale(1.02);
}

.hero-section.mode-ultra .hero-bg-video {
  opacity: 0.62;
  filter: saturate(1.45) contrast(1.25) brightness(1.05);
}

/* Light Theme adjustment */
/* Ambient Vignette & Scrim for Crystal Clear Typography */
.hero-video-scrim {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(6, 18, 38, 0.4) 0%, rgba(6, 18, 38, 0.78) 70%, var(--bg-dark) 100%),
    linear-gradient(180deg, rgba(6, 18, 38, 0.85) 0%, transparent 25%, transparent 70%, var(--bg-dark) 100%);
  z-index: 1;
  pointer-events: none;
}

/* High-tech fine scanlines overlay (Lando Norris Aesthetic) */
.hero-video-grid-lines {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 100% 4px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
}

/* Ensure Hero Container contents float gracefully above the video layer */
.hero-container {
  position: relative;
  z-index: 2;
}

/* ── Cinematic Video Theater Modal ── */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 999998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 10, 24, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.video-modal-dialog {
  position: relative;
  z-index: 10;
  width: min(960px, 94vw);
  background: #020c1b;
  border: 1.5px solid rgba(0, 238, 221, 0.45);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), 0 0 50px rgba(0, 238, 221, 0.25);
  overflow: hidden;
  transform: scale(0.92) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-modal.active .video-modal-dialog {
  transform: scale(1) translateY(0);
}

.video-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(4, 20, 40, 0.95);
  border-bottom: 1px solid rgba(0, 238, 221, 0.2);
}

.video-modal-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.video-modal-category {
  font-family: monospace, sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-cyan);
  letter-spacing: 1.2px;
}

.video-modal-title {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 850;
  color: #ffffff;
  margin: 0;
}

.video-modal-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.video-modal-close:hover {
  background: #ff3355;
  border-color: #ff3355;
  transform: scale(1.1);
}

.video-modal-body {
  position: relative;
  background: #000000;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

#theater-video-player {
  width: 100%;
  height: 100%;
  max-height: 76vh;
  object-fit: contain;
  outline: none;
}

/* Light Theme Support for Video Showcase */
/* ══════════════════════════════════════════════════════════════════════════
   23. Landon Norris Topographic Contours & Occasional Ambient Photo Stream
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Topographic Elevation Lines (Exact match to landonorris.com screenshot) ── */
.landon-topographic-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.7;
  transition: opacity 0.5s ease;
}

.topo-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.topo-path {
  fill: none;
  stroke: rgba(0, 238, 221, 0.08);
  stroke-width: 1.1;
  stroke-dasharray: 4 2;
  transition: stroke 0.4s ease;
}

.topo-path.p2,
.topo-path.p4 {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-dasharray: none;
  stroke-width: 0.9;
}

.topo-path.p1,
.topo-path.p5 {
  animation: topoShift 20s ease-in-out infinite alternate;
}

@keyframes topoShift {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-10px) scale(1.02); }
}

/* ══════════════════════════════════════════════════════════════════════════
   24. Mind-Blowing Creative Enhancements (Bioluminescence, Blessing Orb, 
       2.5D Parallax Depth, Cinematic Scroll Horizon, Audio Ocean Beat)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Liquid Bioluminescence Canvas ────────────────────────── */
.biolum-fluid-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}

/* ── 3. True Multi-Layer 3D Depth (Stacked Image Diorama) ─────── */

/* Wrapper — preserves 3D so child Z values separate visually */
.small-banner-item {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.banner-3d-card {
  transform-style: preserve-3d;
  position: relative;
  overflow: visible;
  will-change: transform, box-shadow;
  /* no CSS transition — JS lerp handles all motion */
}

/* ── Shared style for all stacked image copies ── */
.px-img-back,
.px-img-mid,
.px-img-fore {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 18px;
  pointer-events: none;
  will-change: transform;
  transform-style: preserve-3d;
  /* No CSS transition — JS lerp is the animation */
}

/* ── Back layer: full image, pushed far back ─
   Represents the distant background (sunburst, gradient fill).
   Slightly dimmed and scaled-up so bleed is invisible. */
.px-img-back {
  z-index: 1;
  opacity: 0.55;
  filter: blur(1.5px) brightness(0.7);
}

/* ── Mid layer: the title text band (GOD'S, HEROES, KELAS 6) ──
   Clipped to the central ~55% vertical strip of the card.
   When the card tilts, this slice floats at Z=18px — visibly
   in front of the blurred background. */
.px-img-mid {
  z-index: 3;
  opacity: 0;
  clip-path: inset(28% 0% 20% 0% round 18px);
  transition: opacity 0.3s ease;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.55));
}

/* ── Fore layer: clouds + logo band (top ~42% of card) ──
   This is the "closest" layer — floats at Z=40px.
   On hover it visibly pops out in front of the text. */
.px-img-fore {
  z-index: 5;
  opacity: 0;
  clip-path: inset(0% 0% 58% 0% round 18px);
  transition: opacity 0.3s ease;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.65));
}

/* Activate the clipped layers only on hover — they fade in */
.small-banner-item:hover .px-img-mid,
.small-banner-item:hover .px-img-fore {
  opacity: 1;
}

/* Base image: sits at Z=0 as the reference plane */
.small-banner-img {
  position: relative;
  z-index: 2;
  will-change: transform;
}

/* Dim siblings during hover */
.small-banners-overlay:has(.small-banner-item:hover) .small-banner-item:not(:hover) {
  opacity: 0.6;
  filter: brightness(0.70) saturate(0.75);
  transition: opacity 0.35s ease, filter 0.35s ease;
}

.small-banners-overlay .small-banner-item:hover {
  opacity: 1 !important;
  filter: none !important;
}

/* Caption pops out in front */
.small-banner-item:hover .small-banner-caption {
  transform: translateZ(52px) scale(1.06);
  background: linear-gradient(135deg, var(--accent-gold) 0%, #ffbe1a 100%);
  color: #002b66;
  border-color: var(--accent-gold);
  box-shadow: 0 0 24px var(--accent-gold), 0 0 40px rgba(0, 238, 221, 0.4);
}

/* ── 4. Cinematic Scroll Horizon Transition ──────────────────── */
.hero-title,
.hero-subtitle,
.hero-badge,
.hero-actions,
.hero-metrics {
  will-change: transform, opacity;
  transition: transform 0.1s linear, opacity 0.1s linear;
}

/* ── 5. Audio-Visualizer Ocean Beat Reactions ────────────────── */
body.sound-atmosphere-active .landon-topographic-layer {
  opacity: 0.95;
  filter: drop-shadow(0 0 15px rgba(0, 238, 221, 0.2));
  animation: oceanSoundPulse 2.8s ease-in-out infinite alternate;
}

body.sound-atmosphere-active .topo-path {
  animation: topoFrequencyDance 3.4s ease-in-out infinite alternate;
}

@keyframes oceanSoundPulse {
  0% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 10px rgba(0, 238, 221, 0.15)); }
  50% { transform: scale(1.015); filter: brightness(1.25) drop-shadow(0 0 25px rgba(0, 238, 221, 0.45)); }
  100% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 10px rgba(0, 238, 221, 0.15)); }
}

@keyframes topoFrequencyDance {
  0% { stroke-width: 1.1; stroke: rgba(0, 238, 221, 0.1); }
  50% { stroke-width: 1.7; stroke: rgba(247, 209, 48, 0.22); }
  100% { stroke-width: 1.1; stroke: rgba(0, 238, 221, 0.1); }
}












/* ── Pelayanan Page (pelayanan.html) ─────────────────────────────────────── */
/* Active/current page state for nav tabs (matches .nav-link:hover look) */
.nav-link.nav-current {
  background: rgba(255, 255, 255, 0.14);
  color: var(--accent-cyan);
  opacity: 1;
  box-shadow: inset 0 0 0 1px var(--glass-border-hover);
}

/* ============================================================
   PROPORTIONAL DESIGN SYSTEM: PELAYANAN EDITORIAL GRID
   Uses Golden Ratio (~1 : 1.55) & 8pt Spatial Rhythm System
   ============================================================ */

/* 1. Generous, well-balanced content wrapper */
.pelayanan-content-wrapper {
  max-width: 1540px;
  width: 92%;
  margin: 0 auto;
  padding: 30px 24px 120px;
}

/* 2. Pelayanan Section Grid (Golden Ratio Split 1fr : 1.55fr) */
.pelayanan-section {
  display: grid;
  grid-template-columns: 1fr 1.55fr;   /* Golden Ratio: 39% Text : 61% Media */
  grid-template-areas: "text media";
  align-items: center;
  gap: clamp(48px, 4.5vw, 76px);
  min-height: auto;
  padding: 96px 0;                    /* 12 x 8px vertical rhythm */
  position: relative;
  scroll-margin-top: calc(var(--navbar-height) + 20px);
}

.pelayanan-section:first-of-type {
  padding-top: calc(var(--navbar-height) + 48px);
}

/* Subtle glowing horizon separator between sections */
.pelayanan-section:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 238, 221, 0.22) 30%, rgba(255, 215, 38, 0.18) 70%, transparent 100%);
  pointer-events: none;
}

/* Reverse section (KKR Anak): Media on Left, Text on Right */
.pelayanan-section.pelayanan-reverse {
  grid-template-columns: 1.55fr 1fr;  /* Golden Ratio: 61% Media : 39% Text */
  grid-template-areas: "media text";
}

/* 3. Text Column Typography & Visual Balance */
.pelayanan-text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 2;
}

/* Tag Pill */
.pelayanan-text .section-tag {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: var(--accent-cyan);
  background: rgba(0, 238, 221, 0.08);
  border: 1px solid rgba(0, 238, 221, 0.25);
  padding: 6px 14px;
  border-radius: 999px;
  text-shadow: 0 0 14px rgba(0, 238, 221, 0.4);
  margin-bottom: 16px;
}

/* Section Title */
.pelayanan-text .section-title {
  font-size: clamp(2.8rem, 4.8vw, 4.2rem);
  font-weight: 950;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: #ffffff;
  margin-bottom: 14px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

/* Accent Underline Bar */
.pelayanan-text .section-line {
  width: 72px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-gold));
  box-shadow: 0 0 14px rgba(0, 238, 221, 0.45);
  margin-top: 2px;
  margin-bottom: 20px;
}

/* Description Text - Optimal Reading Measure (60-70 CPL) */
.pelayanan-desc {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(218, 232, 255, 0.85);
  font-weight: 480;
  max-width: 580px;
}

/* Synchronized Multi-Paragraph Description Slider (KKR Anak) */
.pelayanan-desc-slider {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  max-width: 580px;
  min-height: 170px;
}

.pelayanan-desc-item {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.45s;
  pointer-events: none;
  margin: 0;
}

.pelayanan-desc-item.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* 4. Media Column & Layout */
.pelayanan-media {
  grid-area: media;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* 5. Sleek High-End Placeholder Cards (Panti Asuhan & SSTC) */
.pelayanan-img-placeholder {
  flex: 1;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(0, 238, 221, 0.32);
  border-radius: 24px;
  background: radial-gradient(ellipse at 50% 45%, rgba(0, 119, 230, 0.16) 0%, rgba(3, 10, 28, 0.75) 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px -10px rgba(0, 8, 30, 0.7);
  transition: all 0.35s ease;
}

.pelayanan-img-placeholder:hover {
  border-color: rgba(0, 238, 221, 0.65);
  box-shadow: 0 24px 60px -10px rgba(0, 238, 221, 0.22);
  transform: translateY(-3px);
}

.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  text-align: center;
}

.placeholder-icon-ring {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(0, 238, 221, 0.1);
  border: 1.5px solid rgba(0, 238, 221, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-cyan);
  box-shadow: 0 0 25px rgba(0, 238, 221, 0.2);
  margin-bottom: 4px;
}

.placeholder-svg {
  width: 30px;
  height: 30px;
}

.placeholder-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--accent-cyan);
  background: rgba(4, 14, 34, 0.85);
  border: 1px solid rgba(0, 238, 221, 0.25);
  padding: 4px 12px;
  border-radius: 999px;
}

.placeholder-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* 6. Professional Mobile & Responsive System */

/* ── Tablets & Small Laptops (max-width: 1199px) ── */
@media (max-width: 1199px) {
  .pelayanan-content-wrapper {
    max-width: 100%;
    width: 94%;
    padding: 24px 20px 100px;
  }

  .pelayanan-section {
    grid-template-columns: 1fr 1.35fr;
    gap: 36px;
    padding: 72px 0;
  }

  .pelayanan-section.pelayanan-reverse {
    grid-template-columns: 1.35fr 1fr;
  }
}

/* ── Tablets & Horizontal Phablets (max-width: 991px) ── */
@media (max-width: 991px) {
  .pelayanan-content-wrapper {
    width: 100%;
    padding: 20px 20px 80px;
    box-sizing: border-box;
  }

  .pelayanan-section,
  .pelayanan-section.pelayanan-reverse {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "media";
    gap: 28px;
    padding: 48px 0;
  }

  .pelayanan-desc {
    max-width: 100%;
  }

  .pelayanan-desc-slider {
    max-width: 100%;
    min-height: auto;
  }

  .pelayanan-gallery-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: unset !important;
    border-radius: 20px;
  }
}

/* ── Mobile Devices & Touch Screens (max-width: 768px) and touch pointer ── */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  /* On touch/mobile devices, gallery is bright and accessible without needing mouse hover */
  .pelayanan-gallery-frame {
    opacity: 1 !important;
    filter: saturate(1.02) brightness(1) !important;
    border-color: rgba(0, 238, 221, 0.6) !important;
    box-shadow: 0 16px 40px -10px rgba(0, 8, 30, 0.8) !important;
    min-height: unset !important;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
  }

  .pelayanan-gallery-frame .gallery-nav-btn {
    opacity: 0.94 !important;
    width: 38px;
    height: 38px;
    background: rgba(2, 14, 38, 0.85);
    border-color: rgba(0, 238, 221, 0.65);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  }

  .pelayanan-gallery-frame .gallery-nav-btn svg {
    width: 18px;
    height: 18px;
  }

  .pelayanan-gallery-frame .gallery-nav-btn.prev {
    left: 10px;
  }

  .pelayanan-gallery-frame .gallery-nav-btn.next {
    right: 10px;
  }

  .pelayanan-gallery-frame .gallery-top-bar {
    opacity: 1 !important;
    top: 10px;
    right: 12px;
  }

  .gallery-counter {
    font-size: 11px;
    padding: 4px 10px;
    letter-spacing: 0.5px;
    background: rgba(2, 14, 38, 0.85);
    border: 1px solid rgba(0, 238, 221, 0.35);
  }

  .pelayanan-gallery-frame .gallery-pagination-dots {
    opacity: 0.95 !important;
    bottom: 8px;
    padding: 4px 10px;
    gap: 5px;
    max-width: 82%;
  }

  .gallery-dot {
    width: 6px;
    height: 6px;
  }
}

/* ── Smartphone Handheld (max-width: 600px) ── */
@media (max-width: 600px) {
  .pelayanan-content-wrapper {
    padding: 16px 14px 70px;
  }

  .pelayanan-section {
    padding: 38px 0;
    gap: 20px;
  }

  .pelayanan-section:first-of-type {
    padding-top: calc(var(--navbar-height) + 18px);
  }

  /* Section tag */
  .pelayanan-text .section-tag {
    font-size: 11px;
    padding: 4px 12px;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    font-weight: 800;
  }

  /* Section title */
  .pelayanan-text .section-title {
    font-size: clamp(2.35rem, 8.8vw, 3.2rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    font-weight: 950 !important;
    margin-bottom: 12px !important;
  }

  /* Accent underline bar */
  .pelayanan-text .section-line {
    width: 48px;
    height: 3px;
    margin-bottom: 16px;
  }

  /* Descriptions */
  .pelayanan-desc {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: rgba(215, 230, 255, 0.82) !important;
    font-weight: 480 !important;
  }

  .pelayanan-desc-slider {
    min-height: auto;
  }

  /* Compact Gallery frame for small mobile screens */
  .pelayanan-gallery-frame {
    border-radius: 16px;
    border-width: 1.5px;
  }

  .pelayanan-gallery-frame .gallery-nav-btn {
    width: 34px;
    height: 34px;
  }

  .pelayanan-gallery-frame .gallery-nav-btn.prev {
    left: 8px;
  }

  .pelayanan-gallery-frame .gallery-nav-btn.next {
    right: 8px;
  }

  /* Floating countdown dock on small screens */
  .floating-countdown-dock {
    max-width: calc(100vw - 28px);
  }
}

/* ── Ultra-Compact Phones (max-width: 380px) ── */
@media (max-width: 380px) {
  .pelayanan-content-wrapper {
    padding: 12px 10px 60px;
  }

  .pelayanan-section {
    padding: 32px 0;
    gap: 16px;
  }

  .pelayanan-text .section-title {
    font-size: clamp(2.05rem, 8.2vw, 2.45rem) !important;
    line-height: 1.08 !important;
    font-weight: 950 !important;
  }

  .pelayanan-desc {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    font-weight: 480 !important;
  }

  .brand-title {
    font-size: 14px;
  }

  .brand-sub {
    font-size: 8.5px;
    letter-spacing: 1.5px;
  }
}

/* ============================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================ */

/* GPU acceleration hints for animated elements */
.hero-squad-member,
.interactive-mascot,
.ocean-sunrays,
.floating-bubble,
.hero-wave-svg {
  will-change: transform;
  transform: translateZ(0); /* promote to own compositor layer */
}

/* Banner 3D cards - contain layout/paint */
.small-banner-item,
.banner-3d-card {
  contain: layout style;
}

/* Ticket cards */
.ticket-card {
  contain: layout style;
}

/* ============================================================
   PREFERS-REDUCED-MOTION
   For users with motion sensitivity / low-power mode
   Disables heavy animations without breaking layout
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Kill all CSS keyframe animations */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep mascots visible */
  .hero-squad-member {
    animation: none !important;
  }

  /* Keep floating bubbles hidden (they add no info) */
  .floating-bubble { display: none !important; }

  /* Keep sunray static */
  .ocean-sunrays { animation: none !important; opacity: 0.08 !important; }

  /* Stop wave motion */
  .hero-wave-svg { animation: none !important; }
}

/* ============================================================
   LOW-END DEVICE & MOBILE GPU ACCELERATION SUITE
   Ensures 60 FPS smooth scrolling on budget phones (1-2GB RAM)
   ============================================================ */

/* 1. Eliminate expensive Gaussian blur passes on Mobile & Touch devices */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* High-contrast solid/semi-opaque backups so glassmorphism remains beautiful */
  .nav-header {
    background: rgba(1, 16, 42, 0.98) !important;
  }
  .nav-menu {
    background: rgba(1, 22, 56, 0.98) !important;
  }
  .main-about-card,
  .ticket-card,
  .schedule-card,
  .studio-archive-console,
  .album-showcase-card,
  .floating-countdown-dock,
  .timeline-card,
  .class-media-card {
    background: rgba(0, 36, 110, 0.55) !important;
    border: 1.5px solid rgba(0, 238, 221, 0.35) !important;
    box-shadow: 0 10px 32px rgba(0, 4, 20, 0.45) !important;
  }

  /* Turn off heavy continuous sunrays & background video on mobile/touch screens */
  .ocean-sunrays {
    display: none !important;
  }
  .hero-bg-video {
    display: none !important;
  }
}

/* 2. Modern CPU/GPU Memory Optimization: Skip rendering below-the-fold content until scrolled near */
#kelas,
#jadwal,
#faq,
#lokasi,
.site-footer,
.album-showcase-container {
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
}

/* 3. Explicit Low-End Device Mode (Activated automatically via script.js for budget chipsets) */
.low-end-mode *,
.low-end-mode *::before,
.low-end-mode *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
}

.low-end-mode .hero-bg-video,
.low-end-mode .ocean-sunrays {
  display: none !important;
}

.low-end-mode .main-about-card,
.low-end-mode .ticket-card,
.low-end-mode .schedule-card,
.low-end-mode .studio-archive-console,
.low-end-mode .album-showcase-card,
.low-end-mode .timeline-card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
  background: rgba(0, 36, 110, 0.65) !important;
  border-color: rgba(0, 238, 221, 0.35) !important;
}

/* ============================================================
   LEGAL & COMPLIANCE SYSTEM (UU PDP, UU Perlindungan Anak, UU Hak Cipta)
   ============================================================ */
.legal-main-wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: calc(var(--navbar-height) + 36px) 20px 80px;
  position: relative;
  z-index: 2;
}

.legal-header-card {
  text-align: center;
  margin-bottom: 32px;
}

.legal-section-tag {
  display: inline-block;
  background: rgba(255, 210, 0, 0.12);
  border: 1px solid rgba(255, 210, 0, 0.4);
  color: var(--accent-gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}

.legal-page-title {
  font-size: clamp(2.4rem, 6.5vw, 3.6rem);
  font-weight: 950;
  color: #ffffff;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}

.legal-page-subtitle {
  font-size: 14px;
  color: rgba(215, 230, 255, 0.82);
  line-height: 1.65;
  max-width: 760px;
  margin: 0 auto 20px;
  font-weight: 480;
}

.legal-quick-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px auto 32px;
  padding: 10px;
  background: rgba(1, 16, 44, 0.7);
  border: 1px solid rgba(0, 238, 221, 0.22);
  border-radius: 16px;
}

.legal-nav-pill {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.legal-nav-pill:hover {
  color: #ffffff;
  background: rgba(0, 238, 221, 0.15);
  border-color: rgba(0, 238, 221, 0.4);
}

.legal-doc-card {
  background: linear-gradient(160deg, rgba(6, 20, 44, 0.95) 0%, rgba(2, 10, 26, 0.98) 100%);
  border: 1.5px solid rgba(0, 238, 221, 0.25);
  border-radius: 24px;
  padding: 36px 32px;
  box-shadow: 0 20px 60px rgba(0, 4, 18, 0.7);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.legal-article-block {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 28px;
}

.legal-article-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.legal-article-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 850;
  color: var(--accent-cyan);
  margin-bottom: 14px;
}

.legal-law-badge {
  font-size: 10px;
  font-weight: 900;
  color: var(--accent-gold);
  background: rgba(255, 210, 0, 0.12);
  border: 1px solid rgba(255, 210, 0, 0.35);
  padding: 2.5px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.legal-prose {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(230, 242, 255, 0.92);
}

.legal-prose p {
  margin-bottom: 12px;
}

.legal-prose ul {
  margin: 10px 0 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-prose li {
  color: rgba(225, 238, 255, 0.9);
}

.legal-highlight-box {
  background: rgba(255, 210, 0, 0.07);
  border: 1px solid rgba(255, 210, 0, 0.35);
  border-left: 4px solid var(--accent-gold);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 14px 0;
  color: #ffffff;
}

.legal-takedown-action-box {
  background: rgba(0, 238, 221, 0.08);
  border: 1.5px solid rgba(0, 238, 221, 0.38);
  border-radius: 16px;
  padding: 18px 22px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.legal-takedown-text {
  max-width: 580px;
}

.legal-takedown-text h4 {
  font-size: 15px;
  font-weight: 850;
  color: #ffffff;
  margin-bottom: 4px;
}

.legal-takedown-text p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.legal-takedown-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25d366;
  color: #000000;
  font-size: 13px;
  font-weight: 900;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.legal-takedown-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .legal-doc-card {
    padding: 22px 16px;
    border-radius: 18px;
  }
  .legal-quick-nav {
    display: none;
  }
}






/* ════════════════════════════════════════════════════════════════════════════
   🎉 Confetti & 🖍️ Kid Drawing Mode Styles
   ════════════════════════════════════════════════════════════════════════════ */

/* Confetti particles */
.jk-confetti-particle {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
}


/* ── 6. Kid Drawing Mode Overlay ── */
#jk-drawing-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

#jk-drawing-overlay.is-active {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  background: rgba(1, 12, 34, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: crosshair;
}

#jk-drawing-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

#jk-drawing-toolbar {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(1, 20, 56, 0.92);
  border: 1.5px solid rgba(0, 238, 221, 0.6);
  padding: 10px 20px;
  border-radius: var(--radius-pill, 9999px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(0, 238, 221, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 1000002;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 95vw;
}

.jk-draw-hint {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.jk-draw-palette {
  display: flex;
  align-items: center;
  gap: 6px;
}

.jk-draw-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s;
  padding: 0;
}

.jk-draw-swatch:hover {
  transform: scale(1.25);
  border-color: #ffffff;
}

.jk-draw-swatch.active {
  transform: scale(1.3);
  border-color: #ffffff;
  box-shadow: 0 0 12px currentColor;
}

#jk-draw-size {
  width: 80px;
  accent-color: var(--accent-cyan, #00eedd);
  cursor: pointer;
}

.jk-draw-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 9999px);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
}

.jk-draw-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.jk-draw-close {
  background: linear-gradient(135deg, #ff3355, #ff7a00);
  border: none;
  box-shadow: 0 4px 14px rgba(255, 51, 85, 0.4);
}

.jk-draw-close:hover {
  background: linear-gradient(135deg, #ff1a40, #ff6500);
  transform: translateY(-2px) scale(1.04);
}

body.jk-drawing-mode {
  user-select: none;
  -webkit-user-select: none;
}