/* ═══ DESIGN TOKENS — DARK (default) ═══ */
    :root {
      --bg: #08050f;
      --deep: #0e0b1a;
      --card: #13101e;
      --border: rgba(255, 255, 255, 0.07);
      --border-hover: rgba(155, 109, 224, 0.4);
      --purple: #573198;
      --purple-light: #7b4fc4;
      --purple-lighter: #9b6de0;
      --purple-dim: rgba(87, 49, 152, 0.16);
      --purple-glow: rgba(87, 49, 152, 0.42);
      --text: #f5f2fd;
      --text-sub: rgba(235, 228, 255, 0.75);
      --muted: rgba(235, 228, 255, 0.52);
      --muted2: rgba(235, 228, 255, 0.30);
      --red: #c0392b;
      --gold: #F5C518;
      --gold-light: #FFD94A;
      --gold-dim: rgba(245, 197, 24, 0.15);
      --gold-glow: rgba(245, 197, 24, 0.35);
      --navy: #07111f;
      --navy-card: #0c1a2e;
      --olympic-red: #D32F2F;
      --font-display: 'Playfair Display', Georgia, serif;
      --font-body: 'Barlow', sans-serif;
      --font-cond: 'Barlow Condensed', sans-serif;
      --font-impact: 'Bebas Neue', var(--font-cond);
      --nav-h: 72px;
      --radius: 12px;
      --radius-sm: 7px;
      --radius-pill: 999px;
      --transition: 0.3s ease;
      --logo-filter: brightness(0) invert(1);
      --sidebar-bg: #0c0918;
      --shadow: 0 4px 32px rgba(0, 0, 0, 0.35);
      --pad: 88px;
    }

    /* ═══ LIGHT MODE (auto) ═══ */
    @media (prefers-color-scheme: light) {
      :root {
        --bg: #f7f4ff;
        --deep: #ede8fb;
        --card: #ffffff;
        --border: rgba(72, 30, 140, 0.12);
        --border-hover: rgba(72, 30, 140, 0.35);
        --purple-lighter: #6b3ec4;
        --purple-dim: rgba(72, 30, 140, 0.1);
        --text: #130c2e;
        --text-sub: #2e1a58;
        --muted: rgba(30, 12, 72, 0.6);
        --muted2: rgba(30, 12, 72, 0.38);
        --navy: #e2eaf8;
        --navy-card: #d4dfef;
        --logo-filter: none;
        --sidebar-bg: #f7f4ff;
        --shadow: 0 4px 24px rgba(72, 30, 140, 0.1);
      }

      body {
        background: var(--bg);
        color: var(--text);
      }

      #mainNav.scrolled {
        background: rgba(247, 244, 255, 0.97) !important;
        box-shadow: 0 1px 0 var(--border), 0 4px 24px rgba(72, 30, 140, 0.08) !important;
      }

      #mainNav.scrolled .nav-link-item {
        color: var(--text-sub);
      }

      #mainNav.scrolled .nav-link-item:hover {
        color: var(--text);
        background: var(--purple-dim);
      }

      .expect {
        background: var(--deep);
      }

      .expect-header h2 {
        color: var(--text);
      }

      .expect-card {
        background: var(--card);
        box-shadow: var(--shadow);
      }

      .expect-card h3 {
        color: var(--text);
      }

      .expect-card p {
        color: var(--muted);
      }

      .vbs-video {
        background: var(--bg);
      }

      .vbs-video-text h2 {
        color: var(--text);
      }

      .vbs-video-text p {
        color: var(--muted);
      }

      .parents-trust {
        background: var(--deep);
      }

      .trust-list li {
        color: var(--text-sub);
      }

      .event-details {
        background: var(--navy);
        border-color: rgba(72, 30, 140, 0.15);
      }

      .detail-item {
        background: var(--navy-card);
      }

      .detail-value {
        color: var(--text);
      }

      .detail-label {
        color: var(--muted);
      }

      .event-details-label {
        color: var(--purple-lighter);
      }

      .detail-icon {
        color: var(--purple-lighter);
      }

      .details-grid {
        background: rgba(72, 30, 140, 0.1);
        border-color: rgba(72, 30, 140, 0.14);
      }

      .vbs-gallery {
        background: var(--deep);
      }

      .vbs-faq {
        background: var(--bg);
      }

      .faq-text h2 {
        color: var(--text);
      }

      .faq-text p {
        color: var(--muted);
      }

      .faq-item {
        background: var(--card);
        border-color: var(--border);
        box-shadow: var(--shadow);
      }

      .faq-q {
        color: var(--text);
      }

      .faq-a {
        color: var(--muted);
      }

      footer {
        background: var(--deep);
        border-top-color: var(--border);
      }

      .footer-brand p,
      .footer-col a {
        color: var(--muted);
      }

      .footer-col a:hover {
        color: var(--text);
      }

      .footer-bottom p,
      .footer-bottom a {
        color: var(--muted2);
      }

      .sidebar-mobile {
        background: var(--sidebar-bg);
        border-left-color: var(--border);
      }

      .sidebar-nav a {
        color: var(--text-sub);
      }

      .sidebar-nav a:hover {
        color: var(--text);
        background: var(--purple-dim);
      }

      .gallery-header-title {
        color: var(--text);
      }
    }

    /* ═══ RESET ═══ */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      transition: background 0.35s ease, color 0.35s ease;
    }

    body.no-scroll {
      overflow: hidden;
    }

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

    a {
      text-decoration: none;
      color: inherit;
    }

    ::-webkit-scrollbar {
      width: 6px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--purple-dim);
      border-radius: 999px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--purple-light);
    }

    ::selection {
      background: rgba(245, 197, 24, 0.3);
      color: inherit;
    }

    /* ═══ UTILITY ═══ */
    .container {
      max-width: 1220px;
      margin: 0 auto;
      padding: 0 32px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-family: var(--font-cond);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 13px 26px;
      border: none;
      cursor: pointer;
      transition: all var(--transition);
      text-decoration: none;
      border-radius: var(--radius-sm);
      white-space: nowrap;
    }

    .btn-gold {
      background: var(--gold);
      color: #0a0a0a;
    }

    .btn-gold:hover {
      background: var(--gold-light);
      transform: translateY(-3px);
      box-shadow: 0 12px 36px var(--gold-glow);
    }

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

    .btn-outline-gold:hover {
      background: var(--gold-dim);
      transform: translateY(-2px);
    }

    .btn-outline {
      background: transparent;
      color: var(--text);
      border: 1.5px solid var(--border-hover);
    }

    .btn-outline:hover {
      border-color: var(--purple-lighter);
      color: var(--purple-lighter);
      transform: translateY(-2px);
      background: var(--purple-dim);
    }

    .section-label {
      font-family: var(--font-cond);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--purple-lighter);
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    .section-label::before {
      content: '';
      display: block;
      width: 22px;
      height: 1.5px;
      background: currentColor;
    }

    .section-label.gold {
      color: var(--gold);
    }

    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .d1 {
      transition-delay: 0.10s;
    }

    .d2 {
      transition-delay: 0.20s;
    }

    .d3 {
      transition-delay: 0.30s;
    }

    .d4 {
      transition-delay: 0.40s;
    }

    /* ═══ OVERLAY / SIDEBAR ═══ */
    #overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      z-index: 199;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
      backdrop-filter: blur(6px);
    }

    #overlay.active {
      opacity: 1;
      pointer-events: all;
    }

    .sidebar-mobile {
      position: fixed;
      top: 0;
      right: 0;
      width: min(320px, 85vw);
      height: 100vh;
      background: var(--sidebar-bg);
      z-index: 300;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
      border-left: 1px solid var(--border);
      overflow-y: auto;
    }

    .sidebar-mobile.open {
      transform: translateX(0);
    }

    .sidebar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      border-bottom: 1px solid var(--border);
    }

    .sidebar-logo img {
      height: 38px;
      width: auto;
      filter: var(--logo-filter);
    }

    .sidebar-close {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--purple-dim);
      border: 1px solid var(--border-hover);
      border-radius: var(--radius-sm);
      color: var(--text);
      cursor: pointer;
      font-size: 16px;
      transition: all var(--transition);
    }

    .sidebar-close:hover {
      background: rgba(87, 49, 152, 0.28);
      border-color: var(--purple-lighter);
      color: var(--purple-lighter);
      transform: rotate(90deg);
    }

    .sidebar-body {
      padding: 24px;
      flex: 1;
    }

    .sidebar-nav {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 28px;
    }

    .sidebar-nav a {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      border-radius: var(--radius-sm);
      font-family: var(--font-cond);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--text-sub);
      transition: all 0.2s ease;
    }

    .sidebar-nav a i {
      width: 20px;
      text-align: center;
      color: var(--purple-lighter);
      font-size: 13px;
    }

    .sidebar-nav a:hover {
      color: var(--text);
      background: var(--purple-dim);
    }

    .sidebar-divider {
      height: 1px;
      background: var(--border);
      margin: 20px 0;
    }

    .sidebar-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .sidebar-actions .btn {
      width: 100%;
      justify-content: center;
    }

    .sidebar-footer {
      padding: 20px 24px;
      border-top: 1px solid var(--border);
      font-size: 12px;
      color: var(--muted);
      text-align: center;
    }

    /* ═══ NAV ═══ */
    #mainNav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      height: var(--nav-h);
      padding: 0 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: transparent;
      border-bottom: 1px solid transparent;
      transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    }

    #mainNav.scrolled {
      background: rgba(8, 5, 15, 0.96);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border-bottom-color: var(--border);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    }

    .nav-logo {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    .nav-logo img {
      height: 44px;
      width: auto;
      object-fit: contain;
      filter: var(--logo-filter);
      transition: opacity var(--transition);
    }

    .nav-logo:hover img {
      opacity: 0.82;
    }

    .nav-links-row {
      display: flex;
      align-items: center;
      gap: 2px;
      list-style: none;
      flex: 1;
      justify-content: center;
    }

    .nav-link-item {
      font-family: var(--font-cond);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: rgba(235, 228, 255, 0.8);
      padding: 8px 13px;
      border-radius: var(--radius-sm);
      transition: color 0.2s, background 0.2s;
      cursor: pointer;
      border: none;
      background: none;
      display: block;
      white-space: nowrap;
    }

    .nav-link-item:hover {
      color: #fff;
      background: var(--purple-dim);
    }

    .nav-link-item.active {
      color: #fff !important;
      background: var(--purple-dim);
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    .nav-live {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-family: var(--font-cond);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #fff;
      padding: 9px 16px;
      border: 1.5px solid var(--red);
      border-radius: var(--radius-sm);
      transition: all var(--transition);
    }

    .nav-live:hover {
      background: var(--red);
    }

    .live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--red);
      animation: pulse-dot 1.6s ease-in-out infinite;
    }

    @keyframes pulse-dot {

      0%,
      100% {
        opacity: 1;
        transform: scale(1)
      }

      50% {
        opacity: .35;
        transform: scale(.6)
      }
    }

    .nav-give {
      font-family: var(--font-cond);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      background: var(--gold);
      color: #0a0a0a;
      padding: 10px 18px;
      border-radius: var(--radius-sm);
      transition: background var(--transition), transform var(--transition);
    }

    .nav-give:hover {
      background: var(--gold-light);
      transform: translateY(-1px);
    }

    .nav-hamburger {
      display: none;
      align-items: center;
      gap: 8px;
      font-family: var(--font-cond);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--text);
      background: var(--purple-dim);
      border: 1px solid var(--border-hover);
      border-radius: var(--radius-sm);
      padding: 10px 14px;
      cursor: pointer;
      transition: all var(--transition);
    }

    .nav-hamburger:hover {
      background: rgba(87, 49, 152, 0.28);
      border-color: var(--purple-lighter);
    }

    .nav-hamburger .ham-lines {
      display: flex;
      flex-direction: column;
      gap: 4px;
      width: 18px;
    }

    .nav-hamburger .ham-lines span {
      display: block;
      height: 2px;
      background: currentColor;
      border-radius: 2px;
    }

    /* ═══ HERO — VIDEO ═══ */
    .vbs-hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      overflow: hidden;
      background: #040812;
    }

    .hero-video-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
    }

    .hero-video-bg video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      opacity: 0;
      transition: opacity 1.4s ease;
    }

    .hero-video-bg video.ready {
      opacity: 1;
    }

    .hero-poster-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
      transition: opacity 1s ease;
    }

    .hero-poster-img.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .vbs-hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: linear-gradient(105deg, rgba(4, 8, 18, .92) 42%, rgba(4, 8, 18, .28) 100%), linear-gradient(to top, rgba(4, 8, 18, .98) 0%, transparent 50%);
    }

    .vbs-hero-content {
      position: relative;
      z-index: 3;
      padding: calc(var(--nav-h) + 64px) 80px 100px;
      max-width: 800px;
      width: 100%;
    }

    .hero-eyebrow {
      font-family: var(--font-cond);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 5px;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      opacity: 0;
      animation: fadeUp .8s .2s forwards;
    }

    .hero-eyebrow::before {
      content: '';
      width: 24px;
      height: 1.5px;
      background: var(--gold);
      display: block;
    }

    .hero-main-title {
      font-family: var(--font-impact), var(--font-cond);
      font-size: clamp(62px, 10vw, 140px);
      font-weight: 400;
      line-height: .88;
      letter-spacing: 3px;
      color: #fff;
      text-shadow: 0 6px 50px rgba(0, 0, 0, .55);
      opacity: 0;
      animation: fadeUp .9s .3s forwards;
    }

    .hero-main-title .gl {
      color: var(--gold);
      display: block;
    }

    .hero-sub-title {
      font-family: var(--font-impact), var(--font-cond);
      font-size: clamp(26px, 4vw, 56px);
      font-weight: 400;
      letter-spacing: 4px;
      color: rgba(255, 255, 255, .88);
      line-height: 1;
      margin-bottom: 26px;
      opacity: 0;
      animation: fadeUp .9s .38s forwards;
    }

    .hero-date-pill {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      background: rgba(245, 197, 24, .12);
      border: 1.5px solid rgba(245, 197, 24, .45);
      border-radius: var(--radius-pill);
      padding: 10px 22px;
      margin-bottom: 24px;
      opacity: 0;
      animation: fadeUp .9s .46s forwards;
    }

    .hero-date-pill .dt {
      font-family: var(--font-cond);
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 2px;
      color: var(--gold);
    }

    .hero-date-pill .sep {
      opacity: .4;
      color: #fff;
    }

    .hero-date-pill .meta {
      font-family: var(--font-cond);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 1.5px;
      color: rgba(255, 255, 255, .7);
    }

    .olympic-rings {
      display: flex;
      gap: 6px;
      align-items: center;
      margin-bottom: 28px;
      opacity: 0;
      animation: fadeUp .9s .52s forwards;
    }

    .ring {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 4px solid;
      display: inline-block;
      flex-shrink: 0;
    }

    .rb {
      border-color: #0081C8;
    }

    .ry {
      border-color: #FCB131;
      margin-top: 13px;
    }

    .rk {
      border-color: rgba(255, 255, 255, .8);
    }

    .rg {
      border-color: #00A651;
      margin-top: 13px;
    }

    .rr {
      border-color: #DF0024;
    }

    .hero-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      opacity: 0;
      animation: fadeUp 1s .6s forwards;
    }

    .hero-actions .btn {
      font-size: 13px;
      padding: 15px 32px;
      letter-spacing: 2.5px;
    }

    .hero-trust {
      margin-top: 20px;
      font-family: var(--font-cond);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .4);
      opacity: 0;
      animation: fadeUp 1s .72s forwards;
    }

    .hero-trust span {
      color: rgba(255, 255, 255, .28);
      margin: 0 8px;
    }

    .mute-btn {
      position: absolute;
      bottom: 28px;
      right: 32px;
      z-index: 4;
      width: 42px;
      height: 42px;
      background: rgba(10, 5, 20, .55);
      border: 1.5px solid rgba(245, 197, 24, .35);
      border-radius: var(--radius-pill);
      color: rgba(255, 255, 255, .8);
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .25s;
      backdrop-filter: blur(8px);
    }

    .mute-btn:hover {
      background: var(--gold-dim);
      border-color: var(--gold);
      color: #fff;
      transform: scale(1.08);
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(22px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    /* ═══ TICKER ═══ */
    .ticker-bar {
      background: var(--gold);
      padding: 11px 0;
      overflow: hidden;
    }

    .ticker-inner {
      display: flex;
      align-items: center;
      gap: 52px;
      animation: tick 32s linear infinite;
      white-space: nowrap;
      width: max-content;
    }

    .ticker-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-cond);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #0a0a0a;
    }

    .ticker-item .sep {
      opacity: .3;
    }

    @keyframes tick {
      from {
        transform: translateX(0)
      }

      to {
        transform: translateX(-50%)
      }
    }

    /* ═══ WHAT TO EXPECT ═══ */
    .expect {
      padding: var(--pad) 0;
      background: var(--deep);
      position: relative;
      overflow: hidden;
    }

    .expect::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #DF0024, #0081C8, rgba(200, 200, 200, .6), #00A651, #FCB131);
    }

    .expect-header {
      text-align: center;
      margin-bottom: 52px;
    }

    .expect-header h2 {
      font-family: var(--font-impact), var(--font-cond);
      font-size: clamp(28px, 4vw, 52px);
      font-weight: 400;
      letter-spacing: 2px;
      color: var(--text);
      line-height: 1.1;
      text-transform: uppercase;
    }

    .expect-header h2 .gold {
      color: var(--gold);
    }

    .expect-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }

    .expect-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      transition: all var(--transition);
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow);
    }

    .expect-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
    }

    .expect-card {
      position: relative;
    }

    .ec1::before {
      background: #0081C8;
    }

    .ec2::before {
      background: #FCB131;
    }

    .ec3::before {
      background: #00A651;
    }

    .ec4::before {
      background: #DF0024;
    }

    .expect-card:hover {
      transform: translateY(-8px);
      border-color: rgba(245, 197, 24, .4);
      box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
    }

    .ec-img {
      width: 100%;
      aspect-ratio: 4/3;
      overflow: hidden;
      position: relative;
    }

    .ec-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .55s ease;
    }

    .expect-card:hover .ec-img img {
      transform: scale(1.07);
    }

    .ec-img-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 45%, rgba(0, 0, 0, .55) 100%);
    }

    .ec-body {
      padding: 20px 20px 26px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .ec-icon-row {
      display: flex;
      align-items: center;
      gap: 11px;
      margin-bottom: 10px;
    }

    .ec-icon {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      border: 2px solid;
    }

    .ec1 .ec-icon {
      background: rgba(0, 129, 200, .15);
      border-color: rgba(0, 129, 200, .5);
    }

    .ec2 .ec-icon {
      background: rgba(252, 177, 49, .15);
      border-color: rgba(252, 177, 49, .5);
    }

    .ec3 .ec-icon {
      background: rgba(0, 166, 81, .15);
      border-color: rgba(0, 166, 81, .5);
    }

    .ec4 .ec-icon {
      background: rgba(223, 0, 36, .15);
      border-color: rgba(223, 0, 36, .5);
    }

    .ec-body h3 {
      font-family: var(--font-cond);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text);
      margin-bottom: 8px;
    }

    .ec-body p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.75;
      flex: 1;
    }

    /* ═══ PHOTO STRIP ═══ */
    .photo-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      height: 240px;
      overflow: hidden;
    }

    .ps-item {
      overflow: hidden;
      position: relative;
    }

    .ps-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .6s ease;
    }

    .ps-item:hover img {
      transform: scale(1.07);
    }

    /* ═══ VIDEO SECTION ═══ */
    .vbs-video {
      padding: var(--pad) 0;
      background: var(--bg);
    }

    .vid-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: center;
    }

    .vid-text h2 {
      font-family: var(--font-impact), var(--font-cond);
      font-size: clamp(32px, 4vw, 56px);
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text);
      line-height: 1;
      margin-bottom: 16px;
    }

    .vid-text h2 .gold {
      color: var(--gold);
    }

    .vid-text p {
      font-size: 15px;
      line-height: 1.8;
      color: var(--muted);
      margin-bottom: 26px;
    }

    .vid-thumb {
      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      cursor: pointer;
      border: 1px solid rgba(245, 197, 24, .3);
      box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
    }

    

    .vid-play-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, .32);
      transition: background .3s;
    }

    .vid-play-circle {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: rgba(245, 197, 24, .92);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: #0a0a0a;
      transition: all .3s;
      box-shadow: 0 8px 32px rgba(245, 197, 24, .4);
    }

    .vid-play-circle i {
      margin-left: 4px;
    }

    .vid-thumb:hover .vid-play-overlay {
      background: rgba(0, 0, 0, .18);
    }

    .vid-thumb:hover .vid-play-circle {
      transform: scale(1.1);
      box-shadow: 0 12px 40px rgba(245, 197, 24, .55);
    }

    /* ═══ PARENTS TRUST ═══ */
    .parents-trust {
      padding: var(--pad) 0;
      background: var(--deep);
    }

    .pt-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: center;
    }

    .pt-img-stack {
      position: relative;
    }

    .pt-img-main {
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 24px 72px rgba(0, 0, 0, .45);
    }

    .pt-img-main img {
      width: 100%;
      aspect-ratio: 4/5;
      object-fit: cover;
      display: block;
    }

    .pt-img-float {
      position: absolute;
      bottom: -18px;
      right: -18px;
      width: 170px;
      border-radius: var(--radius);
      overflow: hidden;
      border: 3px solid var(--gold);
      box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
    }

    .pt-img-float img {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
      display: block;
    }

    .pt-quote {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(to top, rgba(10, 22, 40, .96) 60%, transparent);
      padding: 40px 24px 24px;
      border-radius: 0 0 var(--radius) var(--radius);
    }

    .pt-quote-text {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      line-height: 1.5;
      margin-bottom: 6px;
    }

    .pt-quote-attr {
      font-family: var(--font-cond);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--gold);
    }

    .pt-text h2 {
      font-family: var(--font-impact), var(--font-cond);
      font-size: clamp(28px, 3.5vw, 48px);
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      line-height: 1.05;
      margin-bottom: 22px;
      color: var(--text);
    }

    .pt-text h2 .red {
      color: var(--olympic-red);
    }

    .trust-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 13px;
    }

    .trust-list li {
      display: flex;
      align-items: flex-start;
      gap: 13px;
      font-size: 15px;
      color: var(--text-sub);
      line-height: 1.5;
    }

    .trust-list li i {
      color: var(--gold);
      font-size: 15px;
      margin-top: 2px;
      flex-shrink: 0;
    }

    .pt-ctas {
      margin-top: 30px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    /* ═══ EVENT DETAILS ═══ */
    .event-details {
      padding: 68px 0;
      background: var(--navy);
      border-top: 1px solid rgba(245, 197, 24, .18);
      border-bottom: 1px solid rgba(245, 197, 24, .18);
    }

    .ed-label {
      font-family: var(--font-impact), var(--font-cond);
      font-size: 12px;
      letter-spacing: 5px;
      text-transform: uppercase;
      color: var(--gold);
      text-align: center;
      margin-bottom: 32px;
    }

    .details-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 1px;
      background: rgba(245, 197, 24, .1);
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid rgba(245, 197, 24, .14);
    }

    .detail-item {
      background: var(--navy-card);
      padding: 28px 14px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      transition: background var(--transition);
    }

    .detail-item:hover {
      background: rgba(245, 197, 24, .06);
    }

    .detail-icon {
      font-size: 22px;
      color: var(--gold);
    }

    .detail-label {
      font-family: var(--font-cond);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--muted);
    }

    .detail-value {
      font-family: var(--font-cond);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 1px;
      color: var(--text);
      line-height: 1.35;
      text-align: center;
    }

    /* ═══ THEME SECTION ═══ */
    .theme-section {
      padding: 104px 0;
      position: relative;
      overflow: hidden;
      background: #040812;
    }

    .theme-bg {
      position: absolute;
      inset: 0;
    }

    .theme-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .2;
      filter: saturate(1.4);
    }

    .theme-overlay {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 50%, rgba(245, 197, 24, .05) 0%, rgba(4, 8, 18, .88) 65%);
    }

    .theme-content {
      position: relative;
      z-index: 2;
      text-align: center;
      max-width: 780px;
      margin: 0 auto;
    }

    .torch-row {
      display: flex;
      justify-content: center;
      gap: 52px;
      margin-bottom: 26px;
      font-size: 46px;
      line-height: 1;
    }

    .theme-mega {
      font-family: var(--font-impact), var(--font-cond);
      font-size: clamp(42px, 7vw, 100px);
      font-weight: 400;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: #fff;
      line-height: .94;
      margin-bottom: 10px;
    }

    .theme-mega .gold {
      color: var(--gold);
    }

    .theme-sub {
      font-family: var(--font-impact), var(--font-cond);
      font-size: clamp(24px, 3.5vw, 50px);
      font-weight: 400;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .48);
      margin-bottom: 26px;
    }

    .verse-pill {
      display: inline-block;
      background: rgba(245, 197, 24, .1);
      border: 1px solid rgba(245, 197, 24, .28);
      border-radius: var(--radius-pill);
      padding: 7px 20px;
      margin-bottom: 24px;
      font-family: var(--font-cond);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 2px;
      color: var(--gold);
      text-transform: uppercase;
    }

    .theme-body {
      font-size: 16px;
      line-height: 1.85;
      color: rgba(235, 228, 255, .7);
      max-width: 580px;
      margin: 0 auto 32px;
    }

    /* ═══ GALLERY ═══ */
    .vbs-gallery {
      padding: var(--pad) 0;
      background: var(--deep);
    }

    .gallery-header {
      text-align: center;
      margin-bottom: 40px;
    }

    .gallery-header-title {
      font-family: var(--font-impact), var(--font-cond);
      font-size: clamp(26px, 3.5vw, 48px);
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text);
    }

    .gallery-header-title .gold {
      color: var(--gold);
    }

    .gallery-mosaic {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-template-rows: 280px 280px;
      gap: 10px;
      border-radius: var(--radius);
      overflow: hidden;
    }

    .gm-item {
      overflow: hidden;
      position: relative;
      cursor: pointer;
    }

    .gm-item:first-child {
      grid-row: 1 / 3;
    }

    .gm-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .55s ease;
    }

    .gm-item:hover img {
      transform: scale(1.07);
    }

    .gm-item-overlay {
      position: absolute;
      inset: 0;
      background: rgba(245, 197, 24, 0);
      transition: background .3s;
    }

    .gm-item:hover .gm-item-overlay {
      background: rgba(245, 197, 24, .1);
    }

    /* ═══ FAQ ═══ */
    .vbs-faq {
      padding: var(--pad) 0;
      background: var(--bg);
    }

    .faq-inner {
      display: grid;
      grid-template-columns: 5fr 4fr;
      gap: 56px;
      align-items: start;
    }

    .faq-text h2 {
      font-family: var(--font-impact), var(--font-cond);
      font-size: clamp(32px, 4vw, 56px);
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text);
      line-height: 1;
      margin-bottom: 14px;
    }

    .faq-text h2 .gold {
      color: var(--gold);
    }

    .faq-text p {
      font-size: 15px;
      color: var(--muted);
      line-height: 1.8;
      margin-bottom: 26px;
    }

    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .faq-item {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      transition: border-color var(--transition);
    }

    .faq-item:hover {
      border-color: rgba(245, 197, 24, .28);
    }

    .faq-q {
      padding: 18px 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-family: var(--font-cond);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: .5px;
      color: var(--text);
      user-select: none;
    }

    .faq-q i {
      color: var(--gold);
      font-size: 12px;
      flex-shrink: 0;
      transition: transform .3s;
    }

    .faq-item.open .faq-q i {
      transform: rotate(45deg);
    }

    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s ease, padding .3s;
      font-size: 14px;
      color: var(--muted);
      line-height: 1.75;
      padding: 0 20px;
    }

    .faq-item.open .faq-a {
      max-height: 200px;
      padding: 0 20px 18px;
    }

    .faq-imgs {
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: sticky;
      top: calc(var(--nav-h) + 20px);
    }

    .faq-img {
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid rgba(245, 197, 24, .2);
      box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    }

    .faq-img img {
      width: 100%;
      object-fit: cover;
      display: block;
    }

    .faq-img:first-child img {
      aspect-ratio: 4/3;
    }

    .faq-img:last-child img {
      aspect-ratio: 16/9;
    }

    /* ═══ FINAL CTA ═══ */
    .final-cta {
      padding: 88px 0;
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #080d18 0%, var(--navy) 50%, #080d18 100%);
    }

    .final-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 20% 50%, rgba(245, 197, 24, .08) 0%, transparent 60%), radial-gradient(ellipse at 80% 50%, rgba(87, 49, 152, .12) 0%, transparent 60%);
    }

    .cta-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 56px;
    }

    .cta-text h2 {
      font-family: var(--font-impact), var(--font-cond);
      font-size: clamp(32px, 4.5vw, 62px);
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #fff;
      line-height: 1;
      margin-bottom: 12px;
    }

    .cta-text h2 .gold {
      color: var(--gold);
    }

    .cta-text p {
      font-size: 15px;
      color: rgba(235, 228, 255, .6);
      line-height: 1.7;
      max-width: 460px;
    }

    .cta-actions {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      min-width: 220px;
    }

    .cta-actions .btn {
      justify-content: center;
      font-size: 13px;
      padding: 15px 22px;
    }

    .cta-url {
      text-align: center;
      font-family: var(--font-cond);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--muted2);
      margin-top: 4px;
    }

    .cta-url a {
      color: var(--gold);
    }

    .trophy-bg {
      position: absolute;
      right: 4%;
      bottom: 0;
      font-size: 150px;
      opacity: .055;
      line-height: 1;
      pointer-events: none;
    }

    /* ═══ FOOTER ═══ */
    footer {
      background: var(--bg);
      border-top: 1px solid var(--border);
      padding: 64px 0 32px;
      transition: background .35s ease;
    }

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

    .footer-brand img {
      height: 42px;
      width: auto;
      margin-bottom: 14px;
      filter: var(--logo-filter);
    }

    .footer-brand p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.8;
      margin-bottom: 18px;
      max-width: 230px;
    }

    .footer-socials {
      display: flex;
      gap: 8px;
    }

    .social-btn {
      width: 33px;
      height: 33px;
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-size: 13px;
      border-radius: var(--radius-sm);
      transition: all var(--transition);
    }

    .social-btn:hover {
      border-color: var(--purple-lighter);
      color: var(--purple-lighter);
      background: var(--purple-dim);
    }

    .footer-col h5 {
      font-family: var(--font-cond);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--purple-lighter);
      margin-bottom: 16px;
    }

    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .footer-col a {
      font-size: 13px;
      color: var(--muted);
      transition: color .2s;
    }

    .footer-col a:hover {
      color: var(--text);
    }

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

    .footer-bottom p {
      font-size: 11px;
      color: var(--muted2);
    }

    .footer-bottom a {
      color: var(--muted2);
    }

    .footer-bottom a:hover {
      color: var(--purple-lighter);
    }

    #backToTop {
      position: fixed;
      bottom: 26px;
      right: 26px;
      z-index: 50;
      width: 42px;
      height: 42px;
      background: var(--gold);
      color: #0a0a0a;
      border: none;
      border-radius: var(--radius-pill);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      cursor: pointer;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity .35s ease, transform .35s ease, background .2s;
      pointer-events: none;
      box-shadow: 0 4px 20px var(--gold-glow);
    }

    #backToTop.visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: all;
    }

    #backToTop:hover {
      background: var(--gold-light);
      transform: translateY(-2px);
    }

    /* ═══ RESPONSIVE ═══ */
    @media (min-width: 1100px) {
      .nav-links-row {
        display: flex
      }

      .nav-hamburger {
        display: none
      }
    }

    @media (max-width: 1099px) {
      .nav-links-row {
        display: none
      }

      .nav-hamburger {
        display: inline-flex
      }
    }

    @media (max-width: 960px) {
      :root {
        --pad: 64px;
      }

      .expect-grid {
        grid-template-columns: 1fr 1fr;
      }

      .vid-inner,
      .pt-inner,
      .faq-inner {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .pt-img-float {
        width: 140px;
        bottom: -14px;
        right: -10px;
      }

      .gallery-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
      }

      .gm-item:first-child {
        grid-row: auto;
        grid-column: 1 / 3;
        height: 260px;
      }

      .gm-item {
        height: 200px;
      }

      .details-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .cta-inner {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .cta-actions {
        flex-direction: row;
        min-width: unset;
      }

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

      .photo-strip {
        grid-template-columns: repeat(2, 1fr);
        height: 180px;
      }

      .faq-imgs {
        position: static;
        flex-direction: row;
      }

      .faq-img:last-child {
        display: none;
      }
    }

    @media (max-width: 640px) {
      :root {
        --pad: 52px;
      }

      .container {
        padding: 0 18px;
      }

      .vbs-hero-content {
        padding: calc(var(--nav-h) + 28px) 20px 72px;
      }

      .hero-main-title {
        font-size: 58px;
      }

      .hero-sub-title {
        font-size: 26px;
      }

      .hero-actions .btn {
        padding: 13px 20px;
        font-size: 12px;
      }

      .hero-date-pill {
        padding: 9px 14px;
        gap: 8px;
      }

      .hero-date-pill .dt {
        font-size: 14px;
      }

      .olympic-rings {
        gap: 4px;
      }

      .ring {
        width: 28px;
        height: 28px;
        border-width: 3px;
      }

      .ry,
      .rg {
        margin-top: 10px;
      }

      .expect-grid {
        grid-template-columns: 1fr;
      }

      .details-grid {
        grid-template-columns: 1fr 1fr;
      }

      .detail-item:last-child {
        grid-column: 1 / 3;
      }

      .gallery-mosaic {
        grid-template-columns: 1fr;
      }

      .gm-item {
        height: 200px !important;
        grid-column: auto !important;
        grid-row: auto !important;
      }

      .photo-strip {
        grid-template-columns: repeat(2, 1fr);
        height: 150px;
      }

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

      .cta-actions {
        flex-direction: column;
      }

      #mainNav {
        padding: 0 16px;
      }

      .nav-live,
      .nav-give {
        display: none;
      }

      .torch-row {
        font-size: 32px;
        gap: 24px;
      }

      .faq-imgs {
        display: none;
      }

      .faq-inner {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .pt-img-float {
        display: none;
      }

      .mute-btn {
        bottom: 18px;
        right: 16px;
        width: 38px;
        height: 38px;
        font-size: 13px;
      }
    }

/* ═══ INLINE-STYLE UTILITIES ═══ */
.mt-xs { margin-top: 4px; }
.link-gold { color: var(--gold); }
.meta--free { color: var(--gold); font-weight: 700; }
.section-label--center { justify-content: center; }
.detail-sub { font-size: 12px; color: var(--muted); }
.detail-value--price { color: var(--gold); font-size: 22px; font-weight: 900; }
.emoji-xl { font-size: 58px; }
.btn--lg { font-size: 14px; padding: 15px 36px; }
.btn--cta { font-size: 13px; padding: 15px 22px; }
.btn-outline--light { color: #fff; border-color: rgba(255, 255, 255, 0.25); }