/* ============ TOKENS ============ */
      :root {
        --bg: #06090a;
        --bg-2: #0a1110;
        --panel: #0d1614;
        --panel-2: #11201d;
        --line: rgba(201, 165, 94, 0.18);
        --line-soft: rgba(255, 255, 255, 0.07);

        --ink: #ece6d6;
        --ink-soft: #aab4ad;
        --ink-dim: #6f7d76;

        --gold-1: #f7ead0;
        --gold-2: #d9b878;
        --gold-3: #b9913f;
        --gold-deep: #8a6a26;

        --jade-1: #2fe0bf;
        --jade-2: #169b87;
        --jade-deep: #0c5b50;

        --grad-gold: linear-gradient(135deg,
            #f7ecd4 0%,
            #d9b878 38%,
            #b9913f 72%,
            #8a6a26 100%);
        --grad-jade: linear-gradient(135deg,
            #36e8c6 0%,
            #16a692 55%,
            #0c5b50 100%);

        --r-sm: 10px;
        --r-md: 16px;
        --r-lg: 24px;
        --r-btn: 12px;
        --shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85);
        --maxw: 1240px;
        --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

        /* fluid spacing */
        --gutter: clamp(18px, 4vw, 28px);
        --sec-pad: clamp(56px, 8vw, 96px);
      }

      /* prevent any horizontal overflow on every element */
      * {
        min-width: 0;
      }

      img,
      svg,
      video {
        max-width: 100%;
        height: auto;
        display: block;
      }

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

      html {
        scroll-behavior: smooth;
      }

      body {
        font-family: "Jost", sans-serif;
        background: var(--bg);
        color: var(--ink);
        line-height: 1.6;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        letter-spacing: 0.2px;
      }

      /* grain + atmosphere overlay */
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
        opacity: 0.045;
        mix-blend-mode: overlay;
      }

      body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
          radial-gradient(60% 50% at 78% 8%,
            rgba(47, 224, 191, 0.1),
            transparent 60%),
          radial-gradient(50% 45% at 12% 30%,
            rgba(185, 145, 63, 0.1),
            transparent 60%),
          radial-gradient(70% 60% at 50% 110%,
            rgba(22, 155, 135, 0.08),
            transparent 60%);
      }

      h1,
      h2,
      h3,
      .serif {
        font-family: "Cinzel", serif;
      }

      .deco {
        font-family: "Cinzel Decorative", serif;
      }

      .script {
        font-family: "Cormorant Garamond", serif;
      }

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

      .wrap {
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 0 var(--gutter);
        position: relative;
        z-index: 2;
      }

      .gold-text {
        background: var(--grad-gold);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      .jade-text {
        background: var(--grad-jade);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      /* eyebrow */
      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: "Cinzel", serif;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--gold-2);
      }

      .eyebrow::before {
        content: "";
        width: 34px;
        height: 1px;
        background: var(--grad-gold);
        display: inline-block;
      }

      .eyebrow.center::after {
        content: "";
        width: 34px;
        height: 1px;
        background: var(--grad-gold);
        display: inline-block;
      }

      /* ============ BUTTONS ============ */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-family: "Cinzel", serif;
        font-weight: 600;
        font-size: clamp(13px, 1.4vw, 15px);
        letter-spacing: 0.6px;
        padding: 14px clamp(20px, 3vw, 30px);
        border-radius: var(--r-btn);
        /* border: 1px solid transparent; */
        background-origin: border-box;
        background-clip: border-box;
        cursor: pointer;
        position: relative;
        transition:
          transform 0.3s var(--ease),
          box-shadow 0.3s var(--ease),
          background 0.3s,
          filter 0.3s;
        text-transform: none;
        line-height: 1;
        white-space: nowrap;
      }

      .btn-gold {
        background: var(--grad-gold);
        color: #1c1404;
        box-shadow: 0 12px 30px -12px rgba(217, 184, 120, 0.65);
      }

      .btn-gold:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 44px -14px rgba(217, 184, 120, 0.75);
        filter: brightness(1.04);
      }

      .btn-jade {
        background: var(--grad-jade);
        color: #04140f;
        box-shadow: 0 12px 30px -12px rgba(22, 166, 146, 0.6);
      }

      .btn-jade:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 44px -14px rgba(22, 166, 146, 0.75);
        filter: brightness(1.05);
      }

      .btn-ghost {
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid var(--line);
        color: var(--ink);
      }

      .btn-ghost:hover {
        border-color: var(--gold-2);
        color: var(--gold-1);
        transform: translateY(-3px);
      }

      .btn-lg {
        padding: 16px clamp(24px, 3.4vw, 36px);
        font-size: clamp(14px, 1.5vw, 16px);
      }

      .btn .bi {
        width: 18px;
        height: 18px;
        flex: none;
        transition: transform 0.3s var(--ease);
      }

      .btn:hover .bi {
        transform: scale(1.12);
      }

      /* ============ NAV ============ */
      header.nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 50;
        background: transparent;
        transition:
          background 0.4s,
          backdrop-filter 0.4s,
          border-color 0.4s;
        border-bottom: 1px solid transparent;
      }

      header.nav.scrolled {
        background: rgba(6, 9, 10, 0.82);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--line-soft);
      }

      .nav-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 16px 0;
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: none;
      }

      .brand .mark {
        width: 40px;
        height: 40px;
        flex: none;
      }

      .brand-logo {
        height: 50px;
        width: auto;
        display: block;
      }

      .brand b {
        font-family: "Cinzel", serif;
        font-weight: 800;
        font-size: 19px;
        letter-spacing: 2px;
        line-height: 1;
      }

      .brand small {
        display: block;
        font-size: 9px;
        letter-spacing: 6px;
        color: var(--gold-2);
        font-family: "Cinzel", serif;
        margin-top: 2px;
      }

      nav.primary {
        flex: 1;
        display: flex;
        justify-content: center;
      }

      nav.primary ul {
        display: flex;
        gap: clamp(18px, 2.4vw, 34px);
        list-style: none;
      }

      nav.primary a {
        font-size: 15px;
        letter-spacing: 0.5px;
        color: var(--ink-soft);
        position: relative;
        padding: 6px 0;
        transition: color 0.3s;
        white-space: nowrap;
      }

      nav.primary a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 0;
        background: var(--grad-gold);
        transition: width 0.35s var(--ease);
      }

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

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

      .nav-cta {
        display: flex;
        align-items: center;
        gap: 14px;
        flex: none;
      }

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

      .burger span {
        width: 24px;
        height: 2px;
        background: var(--gold-2);
        display: block;
        transition: 0.3s;
        border-radius: 2px;
      }

      /* ============ HERO ============ */
      .hero {
        position: relative;
        display: flex;
        align-items: center;
        min-height: clamp(540px, 82vh, 800px);
        padding: clamp(92px, 12vh, 140px) 0 clamp(56px, 8vw, 100px);
        overflow: hidden;
      }

      /* full-width banner background image */
      .hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 30%;
        z-index: 0;
      }

      .hero-scrim {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background:
          linear-gradient(90deg,
            rgba(6, 9, 10, 0.72) 0%,
            rgba(6, 9, 10, 0.34) 42%,
            rgba(6, 9, 10, 0.08) 70%,
            transparent 100%),
          linear-gradient(180deg,
            rgba(6, 9, 10, 0.35) 0%,
            transparent 24%,
            transparent 62%,
            var(--bg) 100%);
      }

      .hero>.wrap {
        position: relative;
        z-index: 2;
        width: 100%;
      }

      .hero-copy {
        max-width: 560px;
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
      }

      .hero-grid {
        display: grid;
        grid-template-columns: 1.02fr 0.98fr;
        gap: clamp(28px, 5vw, 56px);
        align-items: center;
      }

      .hero-lockup {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 22px;
      }

      .hero-lockup .hero-logo {
        width: clamp(78px, 9vw, 104px);
        height: auto;
      }

      .hero-lockup .lock-name {
        font-family: "Cinzel Decorative", serif;
        font-weight: 900;
        font-size: clamp(22px, 3vw, 30px);
        letter-spacing: 1px;
        line-height: 1;
      }

      .hero-lockup .lock-sub {
        font-family: "Cinzel", serif;
        font-size: 11px;
        letter-spacing: 8px;
        color: var(--gold-2);
      }

      .hero h1 {
        font-size: clamp(38px, 8vw, 92px);
        line-height: 0.92;
        font-weight: 800;
        letter-spacing: 1px;
        margin: clamp(64px, 11vw, 140px) 0 4px;
        overflow-wrap: break-word;
        word-break: break-word;
      }

      .hero .tag {
        font-size: clamp(22px, 3.4vw, 36px);
        font-weight: 600;
        color: var(--ink);
        letter-spacing: 0.5px;
        margin: 14px 0 18px;
        font-family: "Cinzel", serif;
      }

      .hero .tag span {
        color: var(--gold-2);
      }

      .hero p.lead {
        color: var(--ink-soft);
        max-width: 460px;
        margin-bottom: clamp(26px, 4vw, 36px);
        font-family: "Cormorant Garamond", serif;
        font-style: italic;
        font-size: clamp(18px, 2.2vw, 22px);
      }

      .hero-cta {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
      }

      .hero-stats {
        display: flex;
        gap: clamp(22px, 4vw, 40px);
        margin-top: clamp(30px, 5vw, 44px);
        padding-top: 30px;
        border-top: 1px solid var(--line-soft);
        flex-wrap: wrap;
      }

      .hero-stats .n {
        font-family: "Cinzel", serif;
        font-size: clamp(26px, 3.4vw, 32px);
        font-weight: 700;
      }

      .hero-stats .l {
        font-size: 12px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--ink-dim);
      }

      /* hero portrait */
      .portrait-stage {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: clamp(420px, 52vw, 560px);
        width: 100%;
      }

      .portrait-stage .halo {
        position: absolute;
        width: 108%;
        height: 108%;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 40%,
            rgba(47, 224, 191, 0.32),
            rgba(185, 145, 63, 0.16) 45%,
            transparent 70%);
        filter: blur(20px);
        animation: breathe 7s var(--ease) infinite;
      }

      @keyframes breathe {

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

        50% {
          transform: scale(1.06);
          opacity: 1;
        }
      }

      .portrait {
        position: relative;
        width: min(460px, 92%);
        aspect-ratio: 4/5;
        border-radius: var(--r-lg);
        overflow: hidden;
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
        background:
          radial-gradient(120% 80% at 50% 18%,
            rgba(47, 224, 191, 0.45),
            transparent 55%),
          radial-gradient(100% 70% at 50% 100%,
            rgba(185, 145, 63, 0.5),
            transparent 60%),
          linear-gradient(180deg, #0e201d, #0a1412 60%, #161109);
      }

      .portrait .photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 28%;
        z-index: 2;
      }

      .portrait .figure {
        position: absolute;
        inset: 0;
        background:
          radial-gradient(40% 26% at 50% 30%,
            rgba(247, 236, 212, 0.5),
            transparent 60%),
          radial-gradient(58% 50% at 50% 78%,
            rgba(20, 40, 36, 0.9),
            rgba(10, 18, 16, 0) 70%);
      }

      .portrait .figure::before {
        /* silhouette suggestion */
        content: "";
        position: absolute;
        left: 50%;
        top: 24%;
        transform: translateX(-50%);
        width: 46%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(circle at 42% 38%,
            #f3e6cf,
            #d8b988 45%,
            #6d5a36 78%,
            transparent 82%);
        box-shadow: 0 0 60px rgba(247, 236, 212, 0.3);
      }

      .portrait .figure::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 78%;
        height: 52%;
        border-radius: 50% 50% 0 0 / 80% 80% 0 0;
        background: linear-gradient(180deg, #15534a, #0b2d28 60%, #081b18);
        box-shadow: inset 0 30px 60px rgba(47, 224, 191, 0.18);
      }

      .portrait .crown {
        position: absolute;
        left: 50%;
        top: 11%;
        transform: translateX(-50%);
        width: 74px;
        z-index: 3;
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
      }

      .portrait .glint {
        position: absolute;
        inset: 0;
        z-index: 4;
        background: linear-gradient(115deg,
            transparent 40%,
            rgba(255, 255, 255, 0.12) 50%,
            transparent 60%);
        pointer-events: none;
      }

      .live-badge {
        position: absolute;
        top: 26px;
        right: -10px;
        z-index: 5;
        background: rgba(8, 14, 12, 0.85);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 9px 16px;
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 12px;
        letter-spacing: 2px;
        font-family: "Cinzel", serif;
        backdrop-filter: blur(6px);
        box-shadow: var(--shadow);
      }

      .dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--jade-1);
        box-shadow: 0 0 0 0 rgba(47, 224, 191, 0.6);
        animation: pulse 1.8s infinite;
      }

      @keyframes pulse {
        0% {
          box-shadow: 0 0 0 0 rgba(47, 224, 191, 0.6);
        }

        70% {
          box-shadow: 0 0 0 10px rgba(47, 224, 191, 0);
        }

        100% {
          box-shadow: 0 0 0 0 rgba(47, 224, 191, 0);
        }
      }

      .float-card {
        position: absolute;
        z-index: 5;
        background: rgba(10, 16, 14, 0.78);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        padding: 14px 18px;
        backdrop-filter: blur(8px);
        box-shadow: var(--shadow);
      }

      .float-card.fc1 {
        bottom: 60px;
        left: -14px;
        animation: floaty 6s ease-in-out infinite;
      }

      .float-card.fc2 {
        top: 120px;
        left: -30px;
        animation: floaty 7s ease-in-out infinite 0.8s;
      }

      @keyframes floaty {

        0%,
        100% {
          transform: translateY(0);
        }

        50% {
          transform: translateY(-12px);
        }
      }

      .float-card .t {
        font-family: "Cinzel", serif;
        font-size: 13px;
        letter-spacing: 1px;
      }

      .float-card .s {
        font-size: 11px;
        color: var(--ink-dim);
        letter-spacing: 1px;
      }

      /* decorative column lines */
      .col-line {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1px;
        background: linear-gradient(180deg,
            transparent,
            var(--line),
            transparent);
        z-index: 1;
      }

      .col-line.l {
        left: 6%;
      }

      .col-line.r {
        right: 6%;
      }

      /* ============ SECTION GENERIC ============ */
      section {
        position: relative;
        padding: var(--sec-pad) 0;
        scroll-margin-top: 84px;
      }

      .sec-head {
        text-align: center;
        max-width: 640px;
        margin: 0 auto 56px;
      }

      .sec-head h2 {
        font-size: clamp(32px, 5vw, 52px);
        font-weight: 700;
        line-height: 1.05;
        margin: 16px 0 14px;
      }

      .sec-head p {
        color: var(--ink-soft);
        font-family: "Cormorant Garamond", serif;
        font-size: 20px;
        font-style: italic;
      }

      /* ============ GODDESSES ============ */
      .goddess-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 22px;
      }

      .gcard {
        position: relative;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--line-soft);
        border-radius: var(--r-md);
        overflow: hidden;
        background: linear-gradient(180deg, var(--panel), var(--bg-2));
        transition:
          transform 0.45s var(--ease),
          border-color 0.45s,
          box-shadow 0.45s;
      }

      .gcard:hover {
        transform: translateY(-10px);
        border-color: var(--line);
        box-shadow: var(--shadow);
      }

      .gcard .pic {
        position: relative;
        aspect-ratio: 1 / 1;
        overflow: hidden;
      }

      .gcard .pic .bg {
        position: absolute;
        inset: 0;
        transition: transform 0.7s var(--ease);
      }

      .gcard:hover .pic .bg {
        transform: scale(1.07);
      }

      .gcard .pic .pic-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 20%;
        z-index: 1;
        transition: transform 0.7s var(--ease);
      }

      .gcard:hover .pic .pic-img {
        transform: scale(1.07);
      }

      .gcard .pic .veil {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,
            transparent 40%,
            rgba(6, 9, 10, 0.2) 60%,
            rgba(6, 9, 10, 0.95));
        z-index: 2;
      }

      .gcard .status {
        position: absolute;
        top: 14px;
        left: 14px;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 11px;
        letter-spacing: 2px;
        text-transform: uppercase;
        font-family: "Cinzel", serif;
        background: rgba(6, 9, 10, 0.6);
        border: 1px solid var(--line-soft);
        border-radius: 999px;
        padding: 5px 11px;
        backdrop-filter: blur(6px);
      }

      .gcard .status .dot {
        width: 7px;
        height: 7px;
      }

      .gcard .body {
        padding: 18px 18px 22px;
        position: relative;
        z-index: 3;
        margin-top: -46px;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }

      .gcard .body h3 {
        font-size: 21px;
        font-weight: 600;
        letter-spacing: 1px;
      }

      .gcard .body .role {
        font-size: 13px;
        color: var(--gold-2);
        letter-spacing: 1px;
        font-family: "Cormorant Garamond", serif;
        font-style: italic;
        font-size: 16px;
        margin-top: 0.5rem;
        margin-bottom: 1rem;
      }

      .gcard .play {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-top: auto;
        align-self: flex-end;
        border: 1px solid var(--line);
        background-clip: padding-box;
        font-family: "Cinzel", serif;
        font-size: 13px;
        letter-spacing: 1.5px;
        color: var(--ink);
        border-radius: 999px;
        padding: 9px 18px;
      }

      .gcard .play:hover {
        background: var(--grad-gold);
        color: #1c1404;
        border-color: var(--grad-gold);
      }

      .gcard .play .play-ico {
        width: 13px;
        height: 13px;
      }

      /* baked cream icon -> turn dark on the gold hover pill */
      .gcard .play:hover .play-ico {
        filter: brightness(0);
      }

      /* ============ GAMES ============ */
      .games-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
      }

      .game {
        position: relative;
        border-radius: var(--r-md);
        overflow: hidden;
        height: 230px;
        border: 1px solid var(--line-soft);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 20px;
        cursor: pointer;
        transition:
          transform 0.4s var(--ease),
          box-shadow 0.4s,
          border-color 0.4s;
      }

      .game:hover {
        transform: translateY(-8px) scale(1.01);
        box-shadow: var(--shadow);
        border-color: var(--line);
      }

      .game .bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        transition: transform 0.7s var(--ease);
      }

      .game:hover .bg {
        transform: scale(1.08);
      }

      .game .game-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
        transition: transform 0.7s var(--ease);
      }

      .game:hover .game-img {
        transform: scale(1.08);
      }

      .game .scrim {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(180deg,
            rgba(6, 9, 10, 0.15),
            rgba(6, 9, 10, 0.55) 55%,
            rgba(6, 9, 10, 0.95));
      }

      .game .icon {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 3;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: rgba(6, 9, 10, 0.6);
        border: 1px solid var(--line-soft);
        backdrop-filter: blur(6px);
        color: var(--gold-1);
      }

      .game .icon .game-ico {
        width: 18px;
        height: 18px;
      }

      .game h3 {
        position: relative;
        z-index: 2;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 0.5px;
      }

      .game p {
        position: relative;
        z-index: 2;
        font-size: 13px;
        color: var(--ink-soft);
        margin-top: 4px;
      }

      .game .tag-pill {
        position: relative;
        z-index: 2;
        align-self: flex-start;
        margin-bottom: 10px;
        font-size: 10px;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(47, 224, 191, 0.12);
        color: var(--jade-1);
        border: 1px solid rgba(47, 224, 191, 0.25);
        font-family: "Cinzel", serif;
      }

      /* stretched link makes the whole game card clickable */
      .game .stretch {
        position: absolute;
        inset: 0;
        z-index: 5;
      }

      .g1 .bg {
        background: radial-gradient(120% 90% at 30% 20%, #7a2f5a, #2a1024 70%);
      }

      .g2 .bg {
        background: radial-gradient(120% 90% at 70% 20%, #2f5a7a, #10222a 70%);
      }

      .g3 .bg {
        background: radial-gradient(120% 90% at 40% 30%, #5a4a2f, #241c10 70%);
      }

      .g4 .bg {
        background: radial-gradient(120% 90% at 60% 25%, #2f7a63, #102420 70%);
      }

      .g5 .bg {
        background: radial-gradient(120% 90% at 30% 20%, #6a2f7a, #241028 70%);
      }

      .g6 .bg {
        background: radial-gradient(120% 90% at 70% 30%, #7a5a2f, #2a2010 70%);
      }

      .g7 .bg {
        background: radial-gradient(120% 90% at 40% 25%, #2f7a7a, #102a2a 70%);
      }

      .g8 .bg {
        background: radial-gradient(120% 90% at 60% 20%, #7a2f3a, #2a1014 70%);
      }

      /* ============ HOW IT WORKS ============ */
      .steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 26px;
        counter-reset: step;
      }

      .step {
        position: relative;
        padding: 38px 28px;
        border: 1px solid var(--line-soft);
        border-radius: var(--r-md);
        background: linear-gradient(180deg, var(--panel), transparent);
        transition: 0.4s;
      }

      .step:hover {
        border-color: var(--line);
        transform: translateY(-6px);
      }

      .step .num {
        counter-increment: step;
        font-family: "Cinzel Decorative", serif;
        font-size: 54px;
        line-height: 1;
        background: var(--grad-gold);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        opacity: 0.85;
      }

      .step .num::before {
        content: "0" counter(step);
      }

      .step h3 {
        font-size: 22px;
        margin: 14px 0 10px;
        font-weight: 600;
      }

      .step p {
        color: var(--ink-soft);
        font-size: 15px;
      }

      .step .ic {
        position: absolute;
        top: 30px;
        right: 28px;
        width: 26px;
        height: 26px;
        opacity: 0.6;
      }

      /* ============ FEATURES SPLIT ============ */
      .features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
      }

      .feat-list {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      .feat {
        display: flex;
        gap: 18px;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--line-soft);
      }

      .feat:last-child {
        border-bottom: 0;
      }

      .feat .fic {
        flex: none;
        width: 52px;
        height: 52px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg,
            rgba(47, 224, 191, 0.14),
            rgba(185, 145, 63, 0.14));
        border: 1px solid var(--line-soft);
        color: var(--gold-1);
      }

      .feat .fic .fic-ico {
        width: 22px;
        height: 22px;
      }

      .feat h3 {
        font-size: 19px;
        font-weight: 600;
        letter-spacing: 0.5px;
      }

      .feat p {
        color: var(--ink-soft);
        font-size: 14.5px;
      }

      .feat-visual {
        position: relative;
        border-radius: var(--r-lg);
        overflow: hidden;
        min-height: clamp(360px, 42vw, 480px);
        border: 1px solid var(--line);
        background:
          radial-gradient(90% 70% at 30% 20%,
            rgba(47, 224, 191, 0.3),
            transparent 55%),
          radial-gradient(80% 70% at 80% 90%,
            rgba(185, 145, 63, 0.32),
            transparent 55%),
          linear-gradient(160deg, #0d1e1b, #0a1310);
        box-shadow: var(--shadow);
      }

      .feat-visual .feat-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      /* ============ TESTIMONIALS ============ */
      .tgrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
      }

      .quote {
        padding: 32px 28px;
        border: 1px solid var(--line-soft);
        border-radius: var(--r-md);
        background: linear-gradient(180deg, var(--panel), transparent);
        transition: 0.4s;
      }

      .quote:hover {
        border-color: var(--line);
        transform: translateY(-6px);
      }

      .quote .stars {
        color: var(--gold-2);
        letter-spacing: 3px;
        margin-bottom: 14px;
      }

      .stars {
        display: inline-flex;
        align-items: center;
        gap: 3px;
      }

      .stars .star-ico {
        width: 16px;
        height: 16px;
        display: block;
      }

      .rate-star {
        width: 0.9em;
        height: 0.9em;
        display: inline-block;
        vertical-align: -0.08em;
        margin-left: 2px;
      }

      .quote p {
        font-family: "Cormorant Garamond", serif;
        font-size: 21px;
        font-style: italic;
        color: var(--ink);
        line-height: 1.5;
      }

      .quote .who {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 22px;
      }

      .quote .av {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--grad-jade);
        display: grid;
        place-items: center;
        font-family: "Cinzel", serif;
        color: #04140f;
        font-weight: 700;
      }

      .quote .who b {
        font-family: "Cinzel", serif;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 1px;
      }

      .quote .who span {
        display: block;
        font-size: 12px;
        color: var(--ink-dim);
        letter-spacing: 1px;
      }

      /* ============ TESTIMONIAL CAROUSEL ============ */
      .carousel {
        --pv: 3;
        --cgap: 22px;
        position: relative;
        padding: 0 clamp(0px, 4vw, 64px);
      }

      .car-viewport {
        overflow: hidden;
        padding: 16px 0;
      }

      .car-track {
        display: flex;
        gap: var(--cgap);
        transition: transform 0.6s var(--ease);
        will-change: transform;
      }

      .car-track .quote {
        flex: 0 0 calc((100% - (var(--pv) - 1) * var(--cgap)) / var(--pv));
        margin: 0;
        display: flex;
        flex-direction: column;
      }

      .car-track .quote p {
        flex: 1;
      }

      .car-btn {
        position: absolute;
        top: calc(50% - 22px);
        transform: translateY(-50%);
        z-index: 4;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: rgba(10, 16, 14, 0.7);
        border: 1px solid var(--line);
        background-clip: padding-box;
        color: var(--gold-1);
        cursor: pointer;
        backdrop-filter: blur(8px);
        transition:
          background 0.3s,
          border-color 0.3s,
          transform 0.3s var(--ease),
          opacity 0.3s;
      }

      .car-btn .car-ico {
        width: 22px;
        height: 22px;
      }

      .car-btn:hover {
        background: var(--grad-gold);
        color: #1c1404;
        border-color: transparent;
        transform: translateY(-50%) scale(1.08);
      }

      /* baked gold arrow -> turn dark on the gold hover button */
      .car-btn:hover .car-ico {
        filter: brightness(0);
      }

      .car-btn.prev {
        left: 0;
      }

      .car-btn.next {
        right: 0;
      }

      .car-dots {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 34px;
      }

      .car-dots button {
        width: 9px;
        height: 9px;
        padding: 0;
        border-radius: 50%;
        border: 0;
        background: var(--line);
        cursor: pointer;
        transition:
          width 0.35s var(--ease),
          background 0.35s;
      }

      .car-dots button.active {
        width: 26px;
        border-radius: 5px;
        background: var(--grad-gold);
      }

      /* ============ PRICING ============ */
      .tiers {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        align-items: stretch;
      }

      .tier {
        position: relative;
        padding: 38px 32px;
        border: 1px solid var(--line-soft);
        border-radius: var(--r-lg);
        background: linear-gradient(180deg, var(--panel), var(--bg-2));
        display: flex;
        flex-direction: column;
        transition: 0.4s;
      }

      .tier:hover {
        transform: translateY(-8px);
        border-color: var(--line);
      }

      .tier.featured {
        border-color: transparent;
        background: linear-gradient(180deg, var(--panel-2), var(--bg-2));
        box-shadow: var(--shadow);
      }

      .tier.featured::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: var(--r-lg);
        padding: 1px;
        background: var(--grad-gold);
        -webkit-mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
      }

      .tier .ribbon {
        position: absolute;
        top: -13px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--grad-gold);
        color: #1c1404;
        font-family: "Cinzel", serif;
        font-size: 11px;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 6px 16px;
        border-radius: 999px;
        font-weight: 600;
      }

      .tier .tname {
        font-family: "Cinzel", serif;
        font-size: 16px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--gold-2);
      }

      .tier .price {
        font-family: "Cinzel", serif;
        font-size: 48px;
        font-weight: 700;
        margin: 14px 0 4px;
      }

      .tier .price span {
        font-size: 15px;
        color: var(--ink-dim);
        font-weight: 400;
      }

      .tier .pdesc {
        color: var(--ink-soft);
        font-size: 14px;
        margin-bottom: 24px;
        font-family: "Cormorant Garamond", serif;
        font-style: italic;
        font-size: 17px;
      }

      .tier ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 13px;
        margin-bottom: 30px;
        flex: 1;
      }

      .tier li {
        display: flex;
        gap: 11px;
        font-size: 14.5px;
        color: var(--ink-soft);
      }

      .tier li .check-ico {
        flex: none;
        width: 16px;
        height: 16px;
        margin-top: 3px;
      }

      .tier .btn {
        width: 100%;
      }

      /* ============ CTA ============ */
      .cta-band {
        position: relative;
        text-align: center;
        border-radius: 28px;
        padding: 80px 30px;
        overflow: hidden;
        border: 1px solid var(--line);
        background:
          radial-gradient(80% 120% at 50% 0%,
            rgba(47, 224, 191, 0.16),
            transparent 55%),
          radial-gradient(80% 120% at 50% 100%,
            rgba(185, 145, 63, 0.18),
            transparent 55%),
          linear-gradient(180deg, var(--panel-2), var(--bg-2));
        box-shadow: var(--shadow);
      }

      .cta-band h2 {
        font-size: clamp(34px, 6vw, 64px);
        font-weight: 800;
        line-height: 1;
        margin-bottom: 18px;
      }

      .cta-band p {
        color: var(--ink-soft);
        font-size: 19px;
        font-family: "Cormorant Garamond", serif;
        font-style: italic;
        max-width: 520px;
        margin: 0 auto 34px;
      }

      .cta-band .hero-cta {
        justify-content: center;
      }

      /* ============ FOOTER ============ */
      footer {
        border-top: 1px solid var(--line-soft);
        padding: 80px 0 34px;
        position: relative;
        z-index: 2;
        margin-top: 30px;
        background: radial-gradient(
          90% 130% at 50% 0%,
          rgba(217, 184, 120, 0.06),
          transparent 58%
        );
      }

      /* gilded hairline crowning the footer */
      footer::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          var(--gold-3),
          transparent
        );
        opacity: 0.55;
      }

      .foot-grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1.1fr 1.35fr;
        gap: 48px;
        margin-bottom: 46px;
      }

      /* --- brand column --- */
      .foot-tagline {
        color: var(--ink-soft);
        margin: 20px 0 22px;
        font-size: 14.5px;
        line-height: 1.6;
        max-width: 340px;
      }

      .age-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 4px;
        border: 1px solid var(--line);
        border-radius: 30px;
        padding: 7px 16px;
        color: var(--gold-2);
        font-family: "Cinzel", serif;
        font-size: 11px;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        transition: 0.3s;
      }

      .age-pill:hover {
        border-color: var(--gold-2);
        color: var(--gold-1);
      }

      .age-pill img {
        width: 15px;
        height: 15px;
      }

      /* --- contact column --- */
      .foot-contact .contact-lead {
        color: var(--ink-soft);
        font-size: 14.5px;
        line-height: 1.6;
        margin: 0 0 20px;
        max-width: 300px;
      }

      .contact-row {
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--ink);
        font-size: 14.5px;
        padding: 8px 0;
        transition: color 0.3s;
      }

      .contact-row:hover {
        color: var(--gold-1);
      }

      .contact-row img {
        width: 17px;
        height: 17px;
        flex: none;
      }

      .socials {
        display: flex;
        gap: 12px;
      }

      .socials a {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid var(--line-soft);
        display: grid;
        place-items: center;
        color: var(--ink-soft);
        transition: 0.3s;
      }

      .socials a:hover {
        border-color: var(--gold-2);
        color: var(--gold-1);
        transform: translateY(-3px);
      }

      .socials a .social-ico {
        width: 17px;
        height: 17px;
        transition: filter 0.3s;
      }

      .socials a:hover .social-ico {
        filter: brightness(1.4);
      }

      .foot-col h4 {
        font-family: "Cinzel", serif;
        font-size: 13px;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: var(--gold-2);
        margin: 0;
      }

      /* short gold rule under each heading */
      .foot-col h4::after {
        content: "";
        display: block;
        width: 30px;
        height: 2px;
        background: var(--gold-3);
        opacity: 0.8;
        margin: 12px 0 16px;
      }

      .foot-col a {
        display: flex;
        align-items: center;
        width: fit-content;
        color: var(--ink-soft);
        font-size: 14.5px;
        padding: 8px 0;
        transition:
          color 0.3s,
          transform 0.3s,
          border-color 0.3s,
          background 0.3s;
      }

      .foot-col a:hover {
        color: var(--gold-1);
        transform: translateX(4px);
      }

      /* Explore & Information links rendered as boxed items */
      .foot-col:not(.foot-contact) a {
        width: auto;
        padding: 11px 15px;
        margin-bottom: 10px;
        border: 1px solid var(--line-soft);
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.02);
        font-size: 14px;
      }

      .foot-col:not(.foot-contact) a:last-child {
        margin-bottom: 0;
      }

      .foot-col:not(.foot-contact) a:hover {
        border-color: var(--gold-2);
        background: rgba(217, 184, 120, 0.07);
        color: var(--gold-1);
        transform: none;
      }

      .foot-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 26px;
        border-top: 1px solid var(--line-soft);
        flex-wrap: wrap;
        gap: 12px;
        font-size: 13px;
        color: var(--ink-dim);
        letter-spacing: 1px;
      }

      /* ============ REVEAL ============ */
      .reveal {
        opacity: 0;
        transform: translateY(34px);
        transition:
          opacity 0.9s var(--ease),
          transform 0.9s var(--ease);
      }

      .reveal.in {
        opacity: 1;
        transform: none;
      }

      [data-delay="1"] {
        transition-delay: 0.08s;
      }

      [data-delay="2"] {
        transition-delay: 0.16s;
      }

      [data-delay="3"] {
        transition-delay: 0.24s;
      }

      [data-delay="4"] {
        transition-delay: 0.32s;
      }

      /* ============ RESPONSIVE ============ */

      /* large desktop down to laptop — keep 4-up grids, just relax columns */
      @media (max-width: 1180px) {
        .goddess-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      /* tablet landscape: collapse hero, halve product grids */
      @media (max-width: 1024px) {
        nav.primary {
          display: none;
        }

        .burger {
          display: flex;
        }

        .goddess-grid,
        .games-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .hero {
          min-height: clamp(520px, 76vh, 720px);
        }

        .hero-bg {
          object-position: 62% 12%;
        }

        .features {
          grid-template-columns: 1fr;
          gap: 40px;
        }

        /* steps & tiers stay multi-column on tablet (collapse lower down) */
        .steps,
        .tiers {
          grid-template-columns: repeat(3, 1fr);
          gap: 18px;
        }

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

        .carousel {
          --pv: 2;
        }

        .foot-grid {
          grid-template-columns: 1fr 1fr;
          gap: 40px;
        }

        .col-line {
          display: none;
        }
      }

      /* small tablet / large phone */
      @media (max-width: 768px) {

        .steps,
        .tiers {
          grid-template-columns: 1fr;
          max-width: 460px;
          margin-inline: auto;
          gap: 24px;
        }

        .tgrid {
          grid-template-columns: 1fr;
          max-width: 460px;
          margin-inline: auto;
        }

        .sec-head {
          margin-bottom: 40px;
        }

        .hero-bg {
          object-position: 64% 10%;
        }

        /* stronger overlay so copy stays legible over the photo */
        .hero-scrim {
          background:
            linear-gradient(90deg,
              rgba(6, 9, 10, 0.82) 0%,
              rgba(6, 9, 10, 0.62) 55%,
              rgba(6, 9, 10, 0.42) 100%),
            linear-gradient(180deg,
              rgba(6, 9, 10, 0.55) 0%,
              transparent 30%,
              transparent 50%,
              var(--bg) 100%);
        }
      }

      /* phones */
      @media (max-width: 600px) {
        .nav-cta .btn-gold {
          display: none;
        }

        /* Join Now lives in the mobile menu */
        .hero {
          min-height: clamp(500px, 86vh, 680px);
        }

        .hero-bg {
          object-position: 66% 8%;
        }

        .hero-scrim {
          background: linear-gradient(180deg,
              rgba(6, 9, 10, 0.5) 0%,
              rgba(6, 9, 10, 0.35) 30%,
              rgba(6, 9, 10, 0.55) 62%,
              var(--bg) 100%);
        }

        .carousel {
          --pv: 1;
          padding: 0;
        }

        .car-btn {
          display: none;
        }

        .goddess-grid,
        .games-grid {
          grid-template-columns: 1fr;
          max-width: 420px;
          margin-inline: auto;
        }

        .hero h1 {
          font-size: clamp(32px, 8.5vw, 42px);
        }

        .hero-stats {
          gap: 20px;
        }

        .foot-grid {
          grid-template-columns: 1fr;
          gap: 34px;
        }

        .foot-bottom {
          flex-direction: column;
          text-align: center;
          gap: 8px;
        }

        .cta-band {
          padding: clamp(44px, 9vw, 64px) 22px;
        }

        .quote p {
          font-size: 19px;
        }

        /* keep wide-tracked eyebrows from overflowing narrow screens */
        .eyebrow {
          letter-spacing: 2.5px;
          flex-wrap: wrap;
          justify-content: center;
        }

        .sec-head p,
        .page-hero .lead {
          font-size: 17px;
        }
      }

      /* small phones */
      @media (max-width: 380px) {
        .hero-cta .btn {
          width: 100%;
        }

        .eyebrow {
          letter-spacing: 1.5px;
          font-size: 11px;
        }

        .eyebrow::before,
        .eyebrow.center::after {
          width: 20px;
        }

        .tier .price {
          font-size: 40px;
        }

        .hero-stats {
          gap: 14px;
        }

        .hero-stats .l {
          font-size: 11px;
          letter-spacing: 1px;
        }

        .brand small {
          letter-spacing: 4px;
        }
      }

      /* respect reduced motion */
      @media (prefers-reduced-motion: reduce) {
        * {
          animation-duration: 0.001ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.001ms !important;
          scroll-behavior: auto;
        }

        .reveal {
          opacity: 1 !important;
          transform: none !important;
        }
      }

      /* mobile menu */
      .mobile-menu {
        position: fixed;
        inset: 0;
        z-index: 60;
        background: rgba(6, 9, 10, 0.97);
        backdrop-filter: blur(10px);
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: safe center;
        gap: 26px;
        padding: 88px 24px 40px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }

      .mobile-menu.open {
        display: flex;
      }

      .mobile-menu a {
        font-family: "Cinzel", serif;
        font-size: 22px;
        letter-spacing: 2px;
        color: var(--ink);
      }

      .mobile-menu .close {
        position: absolute;
        top: 24px;
        right: 24px;
        font-size: 32px;
        color: var(--gold-2);
        background: none;
        border: 0;
        cursor: pointer;
      }

      /* ============ SCROLL TO TOP ============ */
      .to-top {
        position: fixed;
        right: clamp(16px, 3vw, 28px);
        bottom: clamp(16px, 3vw, 28px);
        z-index: 55;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--grad-gold);
        color: #1c1404;
        border: 0;
        cursor: pointer;
        box-shadow: 0 14px 34px -10px rgba(217, 184, 120, 0.6);
        opacity: 0;
        visibility: hidden;
        transform: translateY(16px) scale(0.9);
        transition:
          opacity 0.35s var(--ease),
          transform 0.35s var(--ease),
          visibility 0.35s,
          box-shadow 0.3s,
          filter 0.3s;
      }

      .to-top.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
      }

      .to-top:hover {
        filter: brightness(1.05);
        box-shadow: 0 20px 44px -12px rgba(217, 184, 120, 0.75);
        transform: translateY(-3px) scale(1.05);
      }

      .to-top svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: #1c1404;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      @media (max-width: 600px) {
        .to-top {
          width: 44px;
          height: 44px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .to-top {
          transition: opacity 0.2s, visibility 0.2s;
          transform: none;
        }

        .to-top.show {
          transform: none;
        }

        .to-top:hover {
          transform: none;
        }
      }