:root {
      --gold: #f5c518;
      --deep-blue: #0a1628;
      --mid-blue: #1a2e52;
      --light-gold: #ffe97a;
      --white: #ffffff;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    
    .page-title {
       
      font-size: clamp(1.2rem, 3vw, 2rem);
      color: var(--gold);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-bottom: 2.5rem;
      text-align: center;
      opacity: 0;
      animation: fadeDown 1s ease forwards 0.3s;
    }

    /* Marquee wrapper */
    .marquee-wrapper {
      width: 100%;
      position: relative;
      opacity: 0;
      animation: fadeIn 1s ease forwards 0.7s;
    }

    /* Top & bottom border lines */
    .marquee-wrapper::before,
    .marquee-wrapper::after {
      content: '';
      display: block;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      margin: 0 auto;
      width: 90%;
    }

    .marquee-track {
           background: linear-gradient(135deg, #781b13 0%, #952323 100%);
      padding: 5px;
      overflow: hidden;
      white-space: nowrap;
      box-shadow:
        0 0 40px rgba(245,197,24,0.15),
        inset 0 1px 0 rgba(245,197,24,0.2),
        inset 0 -1px 0 rgba(245,197,24,0.2);
    }

    .marquee-content {
      display: inline-block;
      animation: scroll 18s linear infinite;
    }

    .marquee-content:hover {
      animation-play-state: paused;
    }

    .marquee-text {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    .marquee-text span.main {
       
      font-size: clamp(1.4rem, 3.5vw, 2.2rem);
      font-weight: 700;
      color: var(--white);
      letter-spacing: 0.05em;
    }

    .marquee-text span.highlight {
      
      font-size: clamp(1.4rem, 3.5vw, 2.2rem);
      font-weight: 900;
      color: var(--gold);
      text-shadow: 0 0 20px rgba(245,197,24,0.5);
      letter-spacing: 0.05em;
    }

    .marquee-text span.classes {
      font-family: 'Raleway', sans-serif;
      font-size: clamp(1rem, 2.5vw, 1.5rem);
      font-weight: 600;
      color: var(--light-gold);
      letter-spacing: 0.1em;
    }

    /* Diamond separator */
    .sep {
      display: inline-block;
      width: 10px;
      height: 10px;
      background: var(--gold);
      transform: rotate(45deg);
      margin: 0 2.5rem;
      flex-shrink: 0;
      box-shadow: 0 0 10px rgba(245,197,24,0.6);
    }

    /* Badge */
    .badge {
      display: inline-block;
      background: var(--gold);
      color: var(--deep-blue);
      font-family: 'Raleway', sans-serif;
      font-size: clamp(0.6rem, 1.5vw, 0.85rem);
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      padding: 0.25em 0.75em;
      border-radius: 2px;
      margin-right: 1.2rem;
      vertical-align: middle;
      animation: pulse 2s ease-in-out infinite;
    }

    .tagline {
      font-family: 'Raleway', sans-serif;
      font-size: clamp(0.75rem, 1.5vw, 1rem);
      color: rgba(255,255,255,0.45);
      letter-spacing: 0.25em;
      text-transform: uppercase;
      margin-top: 2rem;
      text-align: center;
      opacity: 0;
      animation: fadeUp 1s ease forwards 1.2s;
    }

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

    @keyframes fadeDown {
      from { opacity: 0; transform: translateY(-20px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(15px); }
      to   { opacity: 0.7; transform: translateY(0); }
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(245,197,24,0.5); }
      50%       { box-shadow: 0 0 0 6px rgba(245,197,24,0); }
    }