@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Montserrat:wght@700;800;900&display=swap');

    :root {
      --accent: #dc2626;
      --bg: #0d0d11;
      --primary-nav-height: 64px;
      --secondary-nav-gap: 12px;
    }

    body {
      background: var(--bg);
      color: #e2e8f0;
      font-family: 'Inter', sans-serif !important;
      overflow-x: clip;
    }

    /* Lenis smooth scroll structural CSS helper rules */
    html.lenis, html.lenis body {
      height: auto;
    }
    .lenis.lenis-smooth {
      scroll-behavior: auto !important;
    }
    .lenis.lenis-smooth [data-lenis-prevent] {
      overscroll-behavior: contain;
    }
    .lenis.lenis-stopped {
      overflow: hidden;
    }
    .lenis.lenis-smooth iframe {
      pointer-events: none;
    }

    .steam-nav-bg {
      background: #070709;
    }

    .steam-gradient {
      background: linear-gradient(to bottom, #1a0f12 0%, #0d0d11 100%);
    }

    .sponsor-banner-bg {
      background: transparent !important;
    }



    .spotlight-card-live {
      background: linear-gradient(135deg, #241216 0%, #0f090a 100%);
    }

    .spotlight-card-live:hover {
      background: linear-gradient(135deg, #32161c 0%, #241216 50%, #0f090a 100%);
    }

    .spotlight-card-offline {
      background: #121216;
    }

    .spotlight-card-offline:hover {
      background: #181820;
    }

    /* Glass cards — applies to carousel, calendar, and rank 4 card */
    #calendarContent>div,
    #creatorsRealContent a.card-rank-4 {
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(12px);
      background: rgba(18, 18, 22, .75);
      border-color: rgba(255, 255, 255, .08) !important;
      box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
      transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease, border-color .45s ease;
    }

    /* Rank 1-3 cards setup */
    #creatorsRealContent a.card-rank-1,
    #creatorsRealContent a.card-rank-2,
    #creatorsRealContent a.card-rank-3 {
      backdrop-filter: blur(12px);
      box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    }

    /* ::before glow layers for calendar + rank4 */
    #calendarContent>div::before,
    #creatorsRealContent a.card-rank-4::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      background: linear-gradient(120deg, rgba(220, 38, 38, 0), rgba(220, 38, 38, .22), rgba(220, 38, 38, 0));
      background-size: 300% 300%;
      animation: borderFlow 8s linear infinite;
      opacity: 0;
      transition: opacity .35s ease;
      pointer-events: none;
    }

    #calendarPage1>div:hover::before,
    #calendarPage2>div:hover::before,
    #creatorsRealContent a.card-rank-4:hover::before {
      opacity: 1;
    }

    #calendarPage1>div:hover,
    #calendarPage2>div:hover {
      transform: translateY(-10px);
      border-color: rgba(220, 38, 38, .35) !important;
      box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 35px rgba(220, 38, 38, .10);
    }

    /* Rank 5+ standard transition rulesets */
    #creatorsRealContent a:not(.card-rank-1):not(.card-rank-2):not(.card-rank-3):not(.card-rank-4) {
      transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
    }

    #creatorsRealContent a:not(.card-rank-1):not(.card-rank-2):not(.card-rank-3):not(.card-rank-4):hover {
      transform: translateY(-2px);
      border-color: rgba(220, 38, 38, .2) !important;
      box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    }

    #creatorsRealContent a:not(.card-rank-1):not(.card-rank-2):not(.card-rank-3):not(.card-rank-4):hover .info-text-area {
      background: rgba(220, 38, 38, .08) !important;
    }

    #calendarContent {
      opacity: 0;
      transition: opacity .5s ease;
    }

    #calendarContent.loaded {
      opacity: 1;
    }

    /* Primary Nav Sticky Constraint Matrix */
    /* Opaque premium navigation styling for the homepage */
    #homepageNav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: #0d0d11 !important;
      border-bottom: 1px solid rgba(220, 38, 38, 0.18) !important;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
      box-shadow:
        0 1px 0 rgba(220, 38, 38, 0.08),
        0 4px 24px rgba(0, 0, 0, 0.55) !important;
    }

    #homepageNav::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 3px;
      height: 100%;
      background: linear-gradient(to bottom, #dc2626, transparent);
      opacity: 0.6;
      pointer-events: none;
    }

    #homepageNav a {
      position: relative;
    }

    #homepageNav a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 0;
      height: 1.5px;
      background: #dc2626;
      transition: width .25s ease;
    }

    #homepageNav a:hover::after {
      width: 100%;
    }

    /* Secondary Nav Sticky Constraint Matrix */
    .secondary-nav-sticky {
      position: sticky !important;
      top: calc(var(--primary-nav-height) + var(--secondary-nav-gap)) !important;
      z-index: 90 !important;
    }

    @keyframes borderFlow {
      0% {
        background-position: 0% 50%
      }

      100% {
        background-position: 300% 50%
      }
    }

    .steam-green-tag {
      background-color: #991b1b;
      color: #fca5a5;
    }

    .steam-dark-tag {
      background-color: #26262b;
      color: #f87171;
    }

    .steam-blue-btn {
      background: linear-gradient(90deg, #dc2626 0%, #7f1d1d 100%);
    }

    .clean-rank-badge {
      background: rgba(7, 7, 9, .85);
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255, 255, 255, .05);
      color: #e2e8f0;
    }

    /* ── Rank card shared base modifications ───────────────────── */
    .card-rank-1,
    .card-rank-2,
    .card-rank-3,
    .card-rank-4 {
      position: relative;
      overflow: visible !important;
      transition: transform 0.4s cubic-bezier(.25, .8, .25, 1), border-color 0.4s ease;
    }

    @keyframes rank1Shimmer {

      0%,
      100% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }
    }

    @keyframes rank2Shimmer {

      0%,
      100% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }
    }

    @keyframes rank3Shimmer {

      0%,
      100% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }
    }

    /* ── Rank-1 GOLD ───────────────────────────────────────────── */
    .card-rank-1::after {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      background: linear-gradient(120deg, #92400e, #fbbf24, #f59e0b, #d97706, #fbbf24, #92400e);
      background-size: 300% 300%;
      animation: rank1Shimmer 2.5s ease-in-out infinite;
      z-index: -1;
      opacity: 0.7;
      pointer-events: none;
    }

    .card-rank-1:hover {
      transform: translateY(-8px);
      border-color: #fbbf24 !important;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(251, 191, 36, 0.25);
    }

    .card-rank-1:hover img {
      transform: scale(1.08);
    }

    /* ── Rank-2 SILVER ─────────────────────────────────────────── */
    .card-rank-2::after {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      background: linear-gradient(120deg, #475569, #e2e8f0, #94a3b8, #cbd5e1, #e2e8f0, #475569);
      background-size: 300% 300%;
      animation: rank2Shimmer 3.5s ease-in-out infinite;
      z-index: -1;
      opacity: 0.55;
      pointer-events: none;
    }

    .card-rank-2:hover {
      transform: translateY(-5px);
      border-color: #cbd5e1 !important;
      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.55), 0 0 20px rgba(203, 213, 225, 0.2);
    }

    .card-rank-2:hover img {
      transform: scale(1.04);
    }

    /* ── Rank-3 BRONZE ─────────────────────────────────────────── */
    .card-rank-3::after {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      background: linear-gradient(120deg, #78350f, #f59e0b, #b45309, #d97706, #f59e0b, #78350f);
      background-size: 300% 300%;
      animation: rank3Shimmer 3.5s ease-in-out infinite;
      z-index: -1;
      opacity: 0.55;
      pointer-events: none;
    }

    .card-rank-3:hover {
      transform: translateY(-4px);
      border-color: #d97706 !important;
      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5), 0 0 18px rgba(217, 119, 6, 0.2);
    }

    .card-rank-3:hover img {
      transform: scale(1.03);
    }

    /* ── Rank-4 RED ────────────────────────────────────────────── */
    .card-rank-4:hover {
      transform: translateY(-2px);
      border-color: rgba(220, 38, 38, .7) !important;
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45), 0 0 15px rgba(220, 38, 38, 0.15);
    }

    .card-rank-4:hover img {
      transform: scale(1.02);
    }

    .carousel-sidebar {
      background: #070709;
    }

    .carousel-dot {
      background-color: rgba(255, 255, 255, .1);
      border-radius: 2px;
    }

    .carousel-dot.active {
      background-color: #dc2626;
    }

    .carousel-fade-in {
      animation: carouselFade .4s ease-in-out forwards;
    }

    @keyframes carouselFade {
      from {
        opacity: .4
      }

      to {
        opacity: 1
      }
    }

    .reveal {
      opacity: 0;
      transform: translateY(24px) scale(.98);
      transition: all .9s cubic-bezier(.22, 1, .36, 1);
    }

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

    .skeleton-pulse {
      background: linear-gradient(90deg, #181214 25%, #261a1d 50%, #181214 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite linear;
    }

    @keyframes shimmer {
      0% {
        background-position: 200% 0
      }

      100% {
        background-position: -200% 0
      }
    }

    .custom-scrollbar::-webkit-scrollbar {
      height: 4px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, .02);
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #26262b;
      border-radius: 2px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: #dc2626;
    }

    /* ═══════════════════════════════════════════════════════
       FULL-PAGE SCROLL-SCRUB INTRO  (Rockstar-style)
       ═══════════════════════════════════════════════════════ */

    /* 400 vh container — scroll travel range = 300 vh */
    #introSection {
      position: relative;
      height: 400vh;
      background: #000;
      z-index: 10;
      flex-shrink: 0;
    }

    /* Sticky viewport frame — stays fixed during scroll travel */
    #introSticky {
      position: sticky;
      top: 0;
      height: 100vh;
      width: 100%;
      overflow: hidden;
      background: #000;
    }

    /* Video: edge-to-edge, no black bars */
    #introVideo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    /* Bottom gradient — deepens as site rises */
    #introBottomFade {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 40vh;
      background: linear-gradient(to top, #0d0d11 0%, transparent 100%);
      pointer-events: none;
      z-index: 3;
      opacity: 0;
    }

    /* Scroll hint: vertical line, SCROLL text, double chevron */
    #introHint {
      position: absolute;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      opacity: 1;
      transition: opacity 0.7s ease;
      pointer-events: none;
    }
    #introHint.hidden-hint { opacity: 0; }

    #introHintLine {
      width: 1px;
      height: 40px;
      background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.45));
      animation: lineGrow 2s ease-in-out infinite;
    }
    @keyframes lineGrow {
      0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
      50%       { transform: scaleY(1);   opacity: 1;   }
    }

    #introHintText {
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
    }

    .intro-chevron {
      width: 14px;
      height: 14px;
      border-right: 1.5px solid rgba(255,255,255,0.45);
      border-bottom: 1.5px solid rgba(255,255,255,0.45);
      transform: rotate(45deg);
      animation: chevronDrop 1.6s ease-in-out infinite;
    }
    /* sibling selector — avoids wrong :nth-child when siblings are mixed types */
    .intro-chevron + .intro-chevron {
      margin-top: -8px;
      animation-delay: 0.22s;
      opacity: 0.35;
    }
    @keyframes chevronDrop {
      0%   { opacity: 0;   transform: rotate(45deg) translate(-2px,-2px); }
      40%  { opacity: 1;   transform: rotate(45deg) translate(0,0);       }
      80%  { opacity: 0.2; transform: rotate(45deg) translate(2px,2px);  }
      100% { opacity: 0;   transform: rotate(45deg) translate(2px,2px);  }
    }

    /* ────────────────────────────────────────────────────────────────
       CINEMATIC INTRO — bottom-left text layout
    ──────────────────────────────────────────────────────────────── */

    /* Directional vignette: strong left+bottom for text readability */
    #introVignette {
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      background:
        linear-gradient(to right,  rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.18) 50%, transparent 70%),
        linear-gradient(to top,    rgba(0,0,0,0.82) 0%, transparent 50%),
        radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.4) 100%);
    }

    /* HUD corner brackets — thin red L-shapes */
    .intro-corner {
      position: absolute;
      width: 22px;
      height: 22px;
      z-index: 8;
      pointer-events: none;
      opacity: 0;
      animation: cornerFadeIn 1s ease-out 0.3s forwards;
    }
    @keyframes cornerFadeIn { to { opacity: 1; } }
    .intro-corner-tl { top: 24px; left: 24px;
      border-top: 1px solid rgba(220,38,38,0.55);
      border-left: 1px solid rgba(220,38,38,0.55);
    }
    .intro-corner-tr { top: 24px; right: 24px;
      border-top: 1px solid rgba(220,38,38,0.55);
      border-right: 1px solid rgba(220,38,38,0.55);
    }
    .intro-corner-bl { bottom: 24px; left: 24px;
      border-bottom: 1px solid rgba(220,38,38,0.55);
      border-left: 1px solid rgba(220,38,38,0.55);
    }
    .intro-corner-br { bottom: 24px; right: 24px;
      border-bottom: 1px solid rgba(220,38,38,0.55);
      border-right: 1px solid rgba(220,38,38,0.55);
    }

    /* Vertical scroll progress track — right edge */
    #introScrollTrack {
      position: absolute;
      right: 32px;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 110px;
      background: rgba(255,255,255,0.08);
      z-index: 8;
      overflow: hidden;
    }
    #introScrollFill {
      width: 100%;
      height: 0%;
      background: #dc2626;
      box-shadow: 0 0 6px rgba(220,38,38,0.7);
    }

    /* Bottom-left text container */
    #introTextOverlay {
      position: absolute;
      bottom: 72px;
      left: 52px;
      z-index: 7;
      pointer-events: none;
      max-width: min(560px, 58vw);
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
    }

    /* Red eyebrow — brand label with leading line */
    .intro-eyebrow {
      font-family: 'Montserrat', 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.30em;
      text-transform: uppercase;
      color: #dc2626;
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
      opacity: 0;
      transform: translateX(-20px);
      will-change: opacity, transform;
    }
    .intro-eyebrow::before {
      content: '';
      display: inline-block;
      width: 30px;
      height: 2px;
      background: #dc2626;
      box-shadow: 0 0 6px rgba(220,38,38,0.8);
      flex-shrink: 0;
    }

    /* Main headline — large stacked words */
    .intro-headline {
      font-family: 'Montserrat', 'Inter', sans-serif;
      font-size: clamp(3rem, 7.5vw, 6.4rem);
      font-weight: 900;
      letter-spacing: -0.01em;
      text-transform: uppercase;
      color: #fff;
      line-height: 0.88;
      margin: 0 0 24px;
      display: flex;
      flex-direction: column;
      gap: 0px;
    }
    /* Individual words animate independently */
    .intro-word {
      display: block;
      opacity: 0;
      transform: translateY(34px);
      will-change: opacity, transform;
    }
    .intro-word.accent { color: #dc2626; }

    /* Red expanding rule */
    .intro-rule {
      height: 1px;
      width: 0;
      margin-bottom: 18px;
      background: linear-gradient(90deg, #dc2626 0%, rgba(220,38,38,0.2) 100%);
      box-shadow: 0 0 6px rgba(220,38,38,0.5);
      will-change: width;
    }

    /* Dot-separated sub-text */
    .intro-sub {
      font-family: 'Montserrat', 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.85);
      opacity: 0;
      transform: translateY(10px);
      will-change: opacity, transform;
    }

    /* Main site — slides up from below on scroll.
       background: solid so the sticky video NEVER bleeds
       through nav/content transparency.                  */
    #mainSite {
      position: relative;
      z-index: 50;
      flex-shrink: 0;
      margin-top: -100vh;           /* DOM top: 400vh - 100vh = 300vh       */
      transform: translateY(100vh); /* visually starts off-screen below      */
      opacity: 0;
      pointer-events: none;
      will-change: transform, opacity; /* GPU layer for smooth animation    */
      isolation: isolate;              /* new stacking context               */
      background: transparent;
      min-height: 100vh;              /* always covers full viewport         */
    }

    #mainSite main,
    #mainSite footer {
      background: #0d0d11;
      position: relative;
      z-index: 30;
    }

    /* ─── Sponsor Banner (image background) ─────────────── */
    #sponsorBanner {
      perspective: 1000px;
    }

    #sponsorBanner .hero-content {
      transform-style: preserve-3d;
      transition: transform .25s ease;
    }

    #sponsorBanner::after {
      display: none !important;
    }

    @keyframes heroPulse {
      from { opacity: .6 }
      to   { opacity: 1 }
    }

    .hero-particle {
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 9999px;
      background: rgba(248, 113, 113, .7);
      box-shadow: 0 0 12px rgba(248, 113, 113, .8);
      animation: floatUp linear infinite;
      pointer-events: none;
    }

    @keyframes floatUp {
      from {
        transform: translateY(30px) scale(.6);
        opacity: 0
      }

      15% {
        opacity: 1
      }

      to {
        transform: translateY(-220px) scale(1.2);
        opacity: 0
      }
    }


    button {
      transition: transform .25s ease, box-shadow .25s ease !important;
    }

    button:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(220, 38, 38, .28);
    }

    html {
      overflow-y: scroll;
      scrollbar-gutter: stable;
    }

    @media (max-width: 767px) {
      #creatorsRealContent {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        
        padding: 0 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
      }

      #creatorsRealContent a {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        aspect-ratio: auto !important;
      }

      #creatorsRealContent a>div:first-child {
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        min-height: 0 !important;
        width: 100% !important;
      }

      #creatorsRealContent a img {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        object-fit: contain !important;
        display: block !important;
        padding: 10px !important;
      }

      #creatorsRealContent .info-text-area {
        padding: 10px !important;
        min-width: 0 !important;
      }

      #creatorsRealContent .info-text-area h4 {
        font-size: 12px !important;
        line-height: 1.15 !important;
      }

      #creatorsRealContent .info-text-area p {
        font-size: 9px !important;
        line-height: 1.25 !important;
      }

      #creatorsRealContent .info-text-area .flex.text-xs.font-bold {
        align-self: flex-start !important;
        width: auto !important;
        max-width: max-content !important;
        font-size: 9px !important;
        line-height: 1 !important;
      }

      #creatorsRealContent .steam-green-tag,
      #creatorsRealContent .steam-dark-tag,
      #creatorsRealContent .info-text-area .bg-\[\#26262b\] {
        padding-left: 7px !important;
        padding-right: 7px !important;
        white-space: nowrap !important;
      }
    }

    @media (max-width: 300px) {
      #creatorsRealContent a img {
        padding: 8px !important;
      }

      #creatorsRealContent .info-text-area {
        padding: 8px !important;
      }

      #creatorsRealContent .info-text-area h4 {
        font-size: 11px !important;
      }

      #creatorsRealContent .info-text-area p {
        font-size: 8px !important;
      }

      #creatorsRealContent .info-text-area .flex.text-xs.font-bold {
        font-size: 8px !important;
      }

      #creatorsRealContent .steam-green-tag,
      #creatorsRealContent .steam-dark-tag,
      #creatorsRealContent .info-text-area .bg-\[\#26262b\] {
        padding-left: 5px !important;
        padding-right: 5px !important;
      }
    }
    /* ─── Why Choose Us Video Overlay Section ─── */
    #whyChooseUsOverlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 100px;
      z-index: 8;
      pointer-events: none;
      box-sizing: border-box;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
    }

    @media (max-width: 1023px) {
      #whyChooseUsOverlay {
        flex-direction: column;
        justify-content: center;
        gap: 30px;
        padding: 80px 24px;
        align-items: flex-start;
      }
    }

    .why-choose-us-left-overlay {
      max-width: 440px;
      text-align: left;
      will-change: opacity, transform;
      opacity: 0;
      transform: translateX(-30px);
    }

    .why-choose-us-left-overlay .kicker {
      font-family: 'Montserrat', 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.35em;
      color: #dc2626;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      text-transform: uppercase;
    }

    .why-choose-us-left-overlay .kicker::before {
      content: '';
      display: inline-block;
      width: 24px;
      height: 2px;
      background: #dc2626;
      box-shadow: 0 0 6px rgba(220,38,38,0.8);
    }

    .why-choose-us-left-overlay .headline {
      font-family: 'Montserrat', 'Inter', sans-serif;
      font-size: clamp(2.2rem, 4.5vw, 4rem);
      font-weight: 900;
      line-height: 0.95;
      color: #ffffff;
      text-transform: uppercase;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .why-choose-us-left-overlay .headline span.accent-red {
      color: #dc2626;
      text-shadow: 0 0 15px rgba(220, 38, 38, 0.25);
    }

    .why-choose-us-right-overlay {
      max-width: 520px;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 20px;
      pointer-events: auto; /* enable hover card actions */
    }

    @media (max-width: 1023px) {
      .why-choose-us-right-overlay {
        max-width: 100%;
      }
    }

    .benefit-card-overlay {
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 10px 0 !important;
      backdrop-filter: none !important;
      box-shadow: none !important;
      opacity: 0;
      transform: translateX(40px);
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
      position: relative;
    }

    .benefit-card-overlay::after {
      display: none !important;
    }

    .benefit-card-overlay:hover {
      transform: translateY(-2px) !important;
    }

    .benefit-card-overlay .card-icon {
      font-size: 26px;
      margin-bottom: 10px;
      display: inline-block;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
    }

    .benefit-card-overlay h3 {
      font-family: 'Montserrat', 'Inter', sans-serif;
      font-size: 21px;
      font-weight: 900;
      letter-spacing: 0.03em;
      color: #dc2626;
      margin-bottom: 8px;
      text-transform: uppercase;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95);
    }

    .benefit-card-overlay p {
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      line-height: 1.55;
      color: #f8fafc;
      font-weight: 500;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.95);
    }
    /* ─── Top Left Brand Header ─── */
    #introBrandHeader {
      position: absolute;
      top: 52px;
      left: 52px;
      z-index: 10;
      pointer-events: none;
      display: flex;
      flex-direction: column;
      gap: 0;
      opacity: 0;
      transform: translateY(-15px);
      will-change: opacity, transform;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
    }

    #introBrandHeader .brand-title {
      font-family: 'Montserrat', 'Inter', sans-serif;
      font-size: 42px;
      font-weight: 900;
      letter-spacing: -0.03em;
      text-transform: uppercase;
      color: #ffffff;
      line-height: 1;
      margin: 0;
      text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
    }

    #introBrandHeader .brand-title .red-span {
      color: #ff3333;
      text-shadow: 0 0 10px rgba(255, 51, 51, 0.4), 0 4px 12px rgba(0, 0, 0, 0.8);
    }

    #introBrandHeader .brand-tagline {
      font-family: 'Montserrat', 'Inter', sans-serif;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.46em;
      color: #e5e5e5;
      text-transform: uppercase;
      margin: 2px 0 0 0;
      padding: 0;
      line-height: 1.2;
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
    }