/* ==========================================================================
   NOTOUT — Glass 2026 Redesign
   Complete glassmorphism design system. Loaded last; high-specificity overrides
   the legacy chrome where needed. New HTML uses the .g- prefix; old chrome
   selectors (.px-, .pro-) are also targeted so any legacy scaffolding folds in.
   ========================================================================== */

/* -------- 1. Tokens -------- */
:root {
    --g-bg-0:      #04050d;
    --g-bg-1:      #0a0c1a;
    --g-bg-2:      #11142a;

    --g-ink-0:     #f5f7ff;
    --g-ink-1:     #d6dbf0;
    --g-ink-2:     #9aa2c4;
    --g-ink-3:     #6c7298;

    --g-violet:    #a855f7;
    --g-blue:      #3b82f6;
    --g-cyan:      #22d3ee;
    --g-emerald:   #34d399;
    --g-pink:      #f472b6;
    --g-amber:     #fbbf24;

    --g-glass-bg:        rgba(255,255,255,0.055);
    --g-glass-bg-strong: rgba(255,255,255,0.085);
    --g-glass-bg-soft:   rgba(255,255,255,0.030);
    --g-glass-border:    rgba(255,255,255,0.14);
    --g-glass-border-soft: rgba(255,255,255,0.08);

    --g-shadow-sm:  0 4px 18px rgba(2,4,18,0.40);
    --g-shadow-md:  0 14px 40px rgba(2,4,18,0.55);
    --g-shadow-lg:  0 28px 80px rgba(2,4,18,0.65);
    --g-glow-violet: 0 0 0 1px rgba(168,85,247,0.35), 0 12px 50px rgba(168,85,247,0.35);
    --g-glow-cyan:   0 0 0 1px rgba(34,211,238,0.40), 0 12px 50px rgba(34,211,238,0.30);

    --g-grad-aurora: linear-gradient(135deg,#a855f7 0%, #3b82f6 45%, #22d3ee 100%);
    --g-grad-fire:   linear-gradient(135deg,#f472b6 0%, #fbbf24 50%, #f59e0b 100%);
    --g-grad-mint:   linear-gradient(135deg,#22d3ee 0%, #34d399 100%);

    --g-radius-sm: 12px;
    --g-radius:    20px;
    --g-radius-lg: 28px;
    --g-radius-xl: 36px;

    --g-blur-sm: 10px;
    --g-blur:    18px;
    --g-blur-lg: 28px;

    --g-ease:     cubic-bezier(.2,.7,.2,1);
    --g-ease-out: cubic-bezier(.22,1,.36,1);
    --g-dur:      .5s;

    --g-content-w: 1240px;

    --g-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --g-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --g-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* -------- 2. Page baseline --------
   Legacy style.css applies !important font-family overrides on body and
   headings, so we re-assert here with !important to win the cascade. */
html, body {
    background: var(--g-bg-0) !important;
    color: var(--g-ink-1);
    font-family: var(--g-font-body) !important;
    font-size: 16px !important;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.005em;
    font-feature-settings: 'cv11', 'ss01', 'ss03', 'cv02';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Aurora animated background painted on body. */
body::before,
body::after {
    content: "";
    position: fixed;
    inset: -10vmax;
    pointer-events: none;
    z-index: 0;
}
body::before {
    background:
        radial-gradient(45vmax 35vmax at 12% 8%,  rgba(168,85,247,0.30), transparent 60%),
        radial-gradient(50vmax 40vmax at 92% 22%, rgba(34,211,238,0.22), transparent 60%),
        radial-gradient(55vmax 45vmax at 50% 90%, rgba(52,211,153,0.18), transparent 65%);
    animation: gAuroraDrift 28s ease-in-out infinite alternate;
    filter: blur(8px);
}
body::after {
    background-image:
        linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image:    radial-gradient(ellipse at center, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    opacity: .55;
}
@keyframes gAuroraDrift {
    0%   { transform: translate3d(0,0,0)         scale(1); }
    50%  { transform: translate3d(2vmax,-3vmax,0) scale(1.06); }
    100% { transform: translate3d(-2vmax,2vmax,0) scale(1.02); }
}

/* Page frame on top of aurora */
.notout-site,
#page,
#content {
    position: relative;
    z-index: 1;
    background: transparent !important;
}

/* Typography — Space Grotesk for display, Inter for body. Tighter sizes,
   careful tracking, modern OpenType. !important needed because the legacy
   style.css carries !important font-family declarations on h1-h6. */
h1,h2,h3,h4,h5,h6 {
    font-family: var(--g-font-display) !important;
    color: var(--g-ink-0);
    line-height: 1.1;
    margin: 0 0 .7rem;
    font-feature-settings: 'ss01', 'ss02', 'cv11';
}
h1 {
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.05;
}
h2 {
    font-size: clamp(1.5rem, 2.6vw, 2.15rem);
    font-weight: 600;
    letter-spacing: -0.028em;
    line-height: 1.12;
}
h3 {
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    font-weight: 600;
    letter-spacing: -0.018em;
}
h4 { font-size: 1rem;   font-weight: 600; letter-spacing: -0.012em; }
h5 { font-size: .92rem; font-weight: 600; letter-spacing: -0.008em; }
h6 { font-size: .82rem; font-weight: 600; letter-spacing: -0.005em; }

p {
    color: var(--g-ink-2);
    font-size: .95rem;
    line-height: 1.65;
}

a  { color: var(--g-cyan); text-decoration: none; transition: color .2s; }
a:hover { color: #fff; }

small { font-size: .82rem; }

/* Neutralize legacy "Arimo !important" font-family on prose / form elements
   so the new pairing (Inter for body, Space Grotesk for display) sticks. */
p,
blockquote,
pre,
table, th, td,
button,
input, select, textarea, optgroup,
li,
.entry-content p,
.entry-content blockquote { font-family: var(--g-font-body) !important; }

/* Override the legacy yellow dashed blockquote skin so quotes match the dark
   glass aesthetic. */
blockquote {
    background: transparent !important;
    border: 0 !important;
    border-left: 2px solid rgba(168,85,247,0.55) !important;
    border-radius: 0 !important;
    padding: .2rem 0 .2rem 1.1rem !important;
    margin: 1.3rem 0 !important;
    color: var(--g-ink-1) !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    font-style: normal !important;
}
blockquote p { color: var(--g-ink-1) !important; }

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

/* Layout helper — applied on .wrap to keep legacy markup centered */
.wrap, .g-wrap {
    width: min(100%, var(--g-content-w));
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
}

/* -------- 3. Reusable glass surface -------- */
.g-glass {
    position: relative;
    background: var(--g-glass-bg);
    border: 1px solid var(--g-glass-border);
    border-radius: var(--g-radius);
    backdrop-filter: blur(var(--g-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--g-blur)) saturate(140%);
    box-shadow: var(--g-shadow-md), inset 0 1px 0 rgba(255,255,255,0.08);
}
.g-glass--strong { background: var(--g-glass-bg-strong); }
.g-glass--soft   { background: var(--g-glass-bg-soft); }

.g-glass::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,0.30), rgba(255,255,255,0.04) 35%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.18));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: .9;
}

/* -------- 4. Buttons -------- */
.g-btn {
    --pad-x: 1.4rem;
    --pad-y: .7rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: var(--pad-y) var(--pad-x);
    border-radius: 999px;
    font-family: var(--g-font-body);
    font-weight: 600;
    font-size: .88rem;
    letter-spacing: -0.005em;
    line-height: 1;
    cursor: pointer;
    transition: transform var(--g-dur) var(--g-ease-out), box-shadow var(--g-dur), filter .25s, background var(--g-dur);
    border: 1px solid transparent;
    white-space: nowrap;
    text-decoration: none;
}
.g-btn:hover { transform: translateY(-2px); }
.g-btn i { transition: transform .3s var(--g-ease-out); }
.g-btn:hover i { transform: translateX(3px); }

.g-btn--primary {
    color: #fff;
    background: var(--g-grad-aurora);
    box-shadow: 0 10px 28px rgba(168,85,247,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
}
.g-btn--primary:hover { filter: brightness(1.10); box-shadow: 0 14px 36px rgba(168,85,247,0.55); color:#fff; }

.g-btn--ghost {
    color: var(--g-ink-0);
    background: var(--g-glass-bg);
    border-color: var(--g-glass-border);
    backdrop-filter: blur(var(--g-blur-sm));
}
.g-btn--ghost:hover { background: var(--g-glass-bg-strong); border-color: rgba(255,255,255,0.28); color:#fff; }

.g-btn--lg { --pad-x: 1.75rem; --pad-y: .9rem;  font-size: .95rem; }
.g-btn--sm { --pad-x: 1rem;    --pad-y: .5rem;  font-size: .8rem; }

/* Pills / chips */
.g-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    font-family: var(--g-font-body);
    font-weight: 500;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--g-glass-bg);
    border: 1px solid var(--g-glass-border);
    backdrop-filter: blur(var(--g-blur-sm));
    color: var(--g-ink-0);
}
.g-pill--accent {
    background: linear-gradient(135deg, rgba(168,85,247,0.20), rgba(34,211,238,0.18));
    border-color: rgba(168,85,247,0.45);
}
.g-pill__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--g-emerald);
    box-shadow: 0 0 0 4px rgba(52,211,153,0.20);
    animation: gPulse 1.6s ease-in-out infinite;
}
@keyframes gPulse {
    0%,100% { transform: scale(1);   box-shadow: 0 0 0 4px rgba(52,211,153,0.20); }
    50%     { transform: scale(1.18); box-shadow: 0 0 0 8px rgba(52,211,153,0.05); }
}

/* -------- 5. HEADER -------- */
.px-header,
.g-header {
    position: sticky;
    top: 0;
    z-index: 80;
    padding: .9rem 0;
    background: linear-gradient(180deg, rgba(4,5,13,0.65) 0%, rgba(4,5,13,0.25) 100%);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: padding var(--g-dur), background var(--g-dur), border-color var(--g-dur), box-shadow var(--g-dur);
}
.px-header.is-scrolled,
.g-header.is-scrolled {
    padding: .55rem 0;
    background: rgba(4,5,13,0.82);
    border-color: rgba(255,255,255,0.10);
    box-shadow: 0 14px 48px rgba(0,0,0,0.45);
}
.px-header__inner,
.g-header__inner {
    width: min(100%, calc(var(--g-content-w) + 60px));
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 1.25rem;
}
.px-brand,
.g-header .px-brand {
    display: inline-flex;
    align-items: center;
}
.px-brand img,
.custom-logo {
    height: 40px !important;
    width: auto !important;
    max-width: 180px;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(168,85,247,0.45));
}
.px-brand__text {
    font-family: var(--g-font-display);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    background: var(--g-grad-aurora);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Primary nav — pill hover + precision indicator dot for the active item */
.px-nav__menu,
.g-nav__menu {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    gap: .15rem;
    justify-content: center;
}
.px-nav__menu li,
.g-nav__menu li { position: relative; }
.px-nav__menu a,
.g-nav__menu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--g-ink-2);
    font-family: var(--g-font-body);
    font-weight: 500;
    font-size: .88rem;
    letter-spacing: -0.005em;
    padding: .55rem 1rem;
    border-radius: 999px;
    transition: color .25s var(--g-ease-out),
                background .25s var(--g-ease-out);
}

/* Hover indicator: a thin gradient bar that scales in from the centre.
   Sits at the bottom edge of the pill so it reads as a "tab" indicator
   rather than a vague underline. */
.px-nav__menu a::after,
.g-nav__menu a::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: var(--g-grad-aurora);
    box-shadow: 0 0 14px rgba(168,85,247,0.55);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    opacity: 0;
    transition: transform .35s var(--g-ease-out), opacity .25s, width .35s var(--g-ease-out);
    pointer-events: none;
}

.px-nav__menu a:hover,
.g-nav__menu a:hover {
    color: #fff;
    background: rgba(255,255,255,0.04);
}
.px-nav__menu a:hover::after,
.g-nav__menu a:hover::after {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
}

/* Active / current page — slightly stronger pill background, wider indicator,
   stronger glow. Covers the various WP-generated active classes. */
.px-nav__menu .current-menu-item > a,
.g-nav__menu .current-menu-item > a,
.px-nav__menu .current_page_item > a,
.g-nav__menu .current_page_item > a,
.px-nav__menu .current-menu-ancestor > a,
.g-nav__menu .current-menu-ancestor > a,
.px-nav__menu .current_page_parent > a,
.g-nav__menu .current_page_parent > a,
.px-nav__menu .current_page_ancestor > a,
.g-nav__menu .current_page_ancestor > a {
    color: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.px-nav__menu .current-menu-item > a::after,
.g-nav__menu .current-menu-item > a::after,
.px-nav__menu .current_page_item > a::after,
.g-nav__menu .current_page_item > a::after,
.px-nav__menu .current-menu-ancestor > a::after,
.g-nav__menu .current-menu-ancestor > a::after,
.px-nav__menu .current_page_parent > a::after,
.g-nav__menu .current_page_parent > a::after,
.px-nav__menu .current_page_ancestor > a::after,
.g-nav__menu .current_page_ancestor > a::after {
    opacity: 1;
    width: 24px;
    transform: translateX(-50%) scaleX(1);
    box-shadow: 0 0 16px rgba(168,85,247,0.7), 0 0 4px rgba(34,211,238,0.5);
}

/* Header actions */
.px-actions,
.g-header__actions {
    display: flex;
    gap: .55rem;
    align-items: center;
}

/* Burger */
.px-burger,
.g-burger {
    display: none;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--g-glass-bg);
    border: 1px solid var(--g-glass-border);
    backdrop-filter: blur(var(--g-blur-sm));
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.px-burger span,
.g-burger span {
    /* Legacy theme rules force button-children to height:0 — !important needed. */
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background: #fff !important;
    border-radius: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    transition: transform .3s, opacity .3s;
}
.px-burger.is-open span:nth-child(1),
.g-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.px-burger.is-open span:nth-child(2),
.g-burger.is-open span:nth-child(2) { opacity: 0; }
.px-burger.is-open span:nth-child(3),
.g-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile panel */
.px-mobile,
.g-mobile {
    margin-top: .9rem;
    padding: 1rem;
    background: var(--g-glass-bg-strong);
    border: 1px solid var(--g-glass-border);
    border-radius: var(--g-radius);
    backdrop-filter: blur(var(--g-blur)) saturate(150%);
    box-shadow: var(--g-shadow-md);
}
.px-mobile__menu,
.g-mobile__menu {
    list-style: none;
    margin: 0 0 .8rem;
    padding: 0;
}
.px-mobile__menu a,
.g-mobile__menu a {
    display: block;
    padding: .8rem 1rem;
    border-radius: 12px;
    color: var(--g-ink-0);
    font-weight: 600;
}
.px-mobile__menu a:hover,
.g-mobile__menu a:hover { background: rgba(255,255,255,0.05); }
.px-mobile__cta,
.g-mobile__cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
    padding-top: .6rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.px-mobile__cta .px-btn,
.g-mobile__cta .g-btn { justify-content: center; }

@media (max-width: 980px) {
    .px-nav, .g-nav, .px-actions, .g-header__actions { display: none !important; }
    .px-burger, .g-burger { display: flex; }
    .px-header__inner, .g-header__inner {
        grid-template-columns: 1fr auto;
    }
}

/* Old .px-btn maps to new style for legacy templates */
.px-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.25rem;
    border-radius: 999px;
    font-family: var(--g-font-body);
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: -0.005em;
    line-height: 1;
    text-decoration: none;
    transition: transform .3s, box-shadow .35s, background .25s, filter .2s;
    border: 1px solid transparent;
    white-space: nowrap;
}
.px-btn--primary {
    color: #fff;
    background: var(--g-grad-aurora);
    box-shadow: 0 10px 28px rgba(168,85,247,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
}
.px-btn--primary:hover { transform: translateY(-2px); filter: brightness(1.1); color:#fff; }
.px-btn--ghost {
    color: var(--g-ink-0);
    background: var(--g-glass-bg);
    border-color: var(--g-glass-border);
    backdrop-filter: blur(var(--g-blur-sm));
}
.px-btn--ghost:hover { background: var(--g-glass-bg-strong); border-color: rgba(255,255,255,0.28); color:#fff; }
.px-btn--lg { padding: .9rem 1.75rem; font-size: .95rem; }

/* -------- 6. HERO -------- */
.g-hero {
    position: relative;
    padding: clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 8vw, 6rem);
    overflow: hidden;
}
.g-hero__inner {
    width: min(100%, var(--g-content-w));
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}
@media (max-width: 900px) {
    .g-hero__inner { grid-template-columns: 1fr; }
}

.g-hero__copy h1 {
    margin: 1rem 0 1.2rem;
}
.g-hero__copy h1 .g-typer {
    background: var(--g-grad-aurora);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    min-width: 7ch;
    transition: opacity .35s;
}
.g-hero__lead {
    font-size: 1.02rem;
    color: var(--g-ink-2);
    max-width: 520px;
    margin: 0 0 1.7rem;
    line-height: 1.6;
}

.g-hero__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-bottom: 2rem;
}

.g-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}
.g-hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    background: var(--g-glass-bg);
    border: 1px solid var(--g-glass-border);
    backdrop-filter: blur(var(--g-blur-sm));
    color: var(--g-ink-1);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: -0.005em;
}
.g-hero__trust-item i { color: var(--g-cyan); }
.g-hero__trust-item--green i { color: var(--g-emerald); }
.g-hero__trust-item--gold  i { color: var(--g-amber); }

/* Hero stage with photos */
.g-hero__stage {
    position: relative;
    aspect-ratio: 5/6;
    border-radius: var(--g-radius-xl);
}
.g-hero__photo {
    position: absolute;
    inset: 0;
    border-radius: var(--g-radius-xl);
    overflow: hidden;
    border: 1px solid var(--g-glass-border);
    box-shadow: var(--g-shadow-lg);
    transform: rotate(-2deg);
    transition: transform .8s var(--g-ease-out);
}
.g-hero__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.1) contrast(1.05);
    transition: transform 1.2s var(--g-ease-out);
}
.g-hero__stage:hover .g-hero__photo { transform: rotate(0); }
.g-hero__stage:hover .g-hero__photo img { transform: scale(1.05); }

.g-hero__photo--sm {
    position: absolute;
    width: 44%;
    aspect-ratio: 4/5;
    right: -3%;
    bottom: -6%;
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: var(--g-shadow-lg);
    background: var(--g-bg-1);
    transform: rotate(4deg);
    transition: transform .8s var(--g-ease-out);
    inset: auto;
}
.g-hero__photo--sm img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.g-hero__stage:hover .g-hero__photo--sm { transform: rotate(0) translate(-6px,-6px); }

/* Floating glass badges on hero */
.g-hero__badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem 1rem;
    border-radius: 16px;
    background: rgba(11,12,28,0.65);
    border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: var(--g-shadow-md);
    z-index: 3;
    animation: gFloat 5s ease-in-out infinite;
}
.g-hero__badge i {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: var(--g-grad-aurora);
    color: #fff;
    box-shadow: 0 6px 16px rgba(168,85,247,0.4);
}
.g-hero__badge strong {
    display: block;
    font-family: var(--g-font-display);
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: -0.018em;
    color: #fff;
}
.g-hero__badge small  { display: block; font-size: .72rem; color: var(--g-ink-2); margin-top: 1px; letter-spacing: -0.005em; }
.g-hero__badge--a { top: 6%;   left: -6%;  animation-delay: 0s; }
.g-hero__badge--b { top: 48%;  right: -8%; animation-delay: 1s; }
.g-hero__badge--c { bottom: 4%; left: 6%;  animation-delay: 2s; }
@keyframes gFloat {
    0%,100% { transform: translate3d(0,0,0); }
    50%     { transform: translate3d(0,-8px,0); }
}

/* -------- 6b. HERO v2 — editorial bento grid --------
   Six asymmetric glass tiles: headline, live match, bonus stat, hero image,
   counter, tennis accent, trust strip. Replaces .g-hero. */
.g-hero2 {
    position: relative;
    padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem);
}
.g-hero2__inner {
    width: min(100%, var(--g-content-w));
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* Explicit row heights stop image-driven tiles from blowing up the row.   */
    grid-template-rows: minmax(380px, auto) 260px auto;
    gap: 1rem;
}
.g-hero2 .g-tile {
    position: relative;
    border-radius: var(--g-radius-lg);
    background: var(--g-glass-bg);
    border: 1px solid var(--g-glass-border);
    backdrop-filter: blur(var(--g-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--g-blur)) saturate(140%);
    box-shadow: var(--g-shadow-md), inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
    isolation: isolate;
}

/* TILE A — headline (cols 1-7, row 1) */
.g-hero2__head {
    grid-column: 1 / span 7;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    min-height: 380px;
    background:
        radial-gradient(60% 80% at 0% 0%, rgba(168,85,247,0.18), transparent 60%),
        radial-gradient(60% 80% at 100% 100%, rgba(34,211,238,0.14), transparent 60%),
        var(--g-glass-bg);
}
.g-hero2__head h1 {
    font-size: clamp(2rem, 4.6vw, 3.6rem);
    font-weight: 600;
    letter-spacing: -0.038em;
    line-height: 1.02;
    margin: 0;
}
.g-hero2__head h1 em {
    font-style: normal;
    background: var(--g-grad-aurora);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.g-hero2__head .g-typer {
    background: var(--g-grad-aurora);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    min-width: 5ch;
    transition: opacity .35s;
    font-style: normal;
}
.g-hero2__lead {
    font-size: 1rem;
    color: var(--g-ink-2);
    max-width: 520px;
    line-height: 1.65;
    margin: 0;
}
.g-hero2__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: .4rem;
}

/* TILE B — live match card (cols 8-12, row 1) */
.g-hero2__match {
    grid-column: 8 / span 5;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    min-height: 380px;
    border-color: rgba(244,114,182,0.30);
    background:
        radial-gradient(80% 60% at 100% 0%, rgba(244,114,182,0.14), transparent 60%),
        var(--g-glass-bg-strong);
}
.g-hero2__match::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from 0deg, rgba(244,114,182,0.45), transparent 50%, rgba(168,85,247,0.40), transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    animation: gSpin 14s linear infinite;
    opacity: .55;
}
.g-match__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
}
.g-match__league {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(244,114,182,0.16);
    border: 1px solid rgba(244,114,182,0.4);
    color: var(--g-pink);
    font-family: var(--g-font-body);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.g-match__league::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--g-pink);
    animation: gPulse 1.4s ease-in-out infinite;
}
.g-match__overs {
    font-family: var(--g-font-mono);
    font-size: .76rem;
    color: var(--g-ink-2);
    letter-spacing: -0.005em;
    font-variant-numeric: tabular-nums;
}
.g-match__teams {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .5rem 0;
}
.g-match__team {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: .65rem;
    align-items: center;
    padding: .45rem 0;
}
.g-match__team:first-child { border-bottom: 1px dashed rgba(255,255,255,0.06); }
.g-match__crest {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--g-grad-aurora);
    display: inline-flex;
    align-items: center; justify-content: center;
    font-family: var(--g-font-display);
    font-weight: 600;
    font-size: .82rem;
    color: #fff;
    letter-spacing: -0.012em;
}
.g-match__team:nth-child(2) .g-match__crest {
    background: linear-gradient(135deg, var(--g-emerald), var(--g-cyan));
}
.g-match__name {
    color: #fff;
    font-family: var(--g-font-display);
    font-weight: 600;
    font-size: .98rem;
    letter-spacing: -0.018em;
}
.g-match__score {
    color: #fff;
    font-family: var(--g-font-mono);
    font-weight: 600;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
}
.g-match__score--soft { color: var(--g-ink-3); }

.g-match__commentary {
    font-size: .82rem;
    color: var(--g-ink-2);
    padding: .4rem 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    line-height: 1.5;
}
.g-match__commentary i { color: var(--g-amber); margin-right: .35rem; }

.g-match__odds {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .45rem;
    margin-top: auto;
}
.g-match__odd {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .65rem .4rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    transition: transform .35s, background .25s, border-color .25s, color .2s;
    cursor: pointer;
    color: var(--g-ink-1);
    text-decoration: none;
}
.g-match__odd:hover {
    background: rgba(168,85,247,0.18);
    border-color: rgba(168,85,247,0.50);
    transform: translateY(-2px);
    color: #fff;
}
.g-match__odd small {
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--g-ink-3);
    font-weight: 600;
}
.g-match__odd b {
    margin-top: .25rem;
    font-family: var(--g-font-display);
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.g-match__odd:hover b { color: var(--g-cyan); }

/* TILE C — bonus offer (cols 1-3, row 2) */
.g-hero2__bonus {
    grid-column: 1 / span 3;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    background:
        linear-gradient(135deg, rgba(168,85,247,0.22), rgba(34,211,238,0.16)),
        var(--g-glass-bg);
    border-color: rgba(168,85,247,0.40);
}
.g-hero2__bonus small {
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--g-cyan);
    font-weight: 600;
}
.g-hero2__bonus strong {
    display: block;
    margin: .35rem 0 .2rem;
    font-family: var(--g-font-display);
    font-size: clamp(2.2rem, 3.6vw, 2.8rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
    background: var(--g-grad-aurora);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.g-hero2__bonus span {
    color: var(--g-ink-1);
    font-size: .9rem;
    line-height: 1.4;
    margin-bottom: .9rem;
}
.g-hero2__bonus a {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.20);
    color: #fff;
    font-family: var(--g-font-body);
    font-size: .82rem;
    font-weight: 600;
    transition: background .25s, transform .35s;
}
.g-hero2__bonus a:hover { background: rgba(255,255,255,0.20); transform: translateY(-2px); }

/* TILE D — primary photo (cols 4-9, row 2) */
.g-hero2__photo {
    grid-column: 4 / span 6;
    height: 100%;
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    border: 1px solid var(--g-glass-border);
    box-shadow: var(--g-shadow-md);
    position: relative;
}
.g-hero2__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--g-ease-out);
    display: block;
}
.g-hero2__photo:hover img { transform: scale(1.05); }
.g-hero2__photo::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, rgba(4,5,13,0.5) 0%, rgba(4,5,13,0) 50%);
    pointer-events: none;
}
.g-hero2__photo-tag {
    position: absolute;
    top: 1rem; left: 1rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: rgba(11,12,28,0.7);
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(12px);
    color: #fff;
    font-family: var(--g-font-body);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    z-index: 2;
}

/* TILE E — secondary photo (cols 10-12, row 2) */
.g-hero2__photo--accent {
    grid-column: 10 / span 3;
    height: 100%;
}

/* TILE F — bottom strip with stats + trust (full width row 3) */
.g-hero2__strip {
    grid-column: 1 / -1;
    padding: 1rem 1.4rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 1rem;
    align-items: center;
    background: var(--g-glass-bg-soft);
}
.g-hero2__strip-stat {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.g-hero2__strip-stat b {
    font-family: var(--g-font-display);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.g-hero2__strip-stat small {
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--g-ink-3);
    font-weight: 500;
}
.g-hero2__strip-trust {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.g-hero2__strip-trust span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--g-ink-1);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: -0.005em;
}
.g-hero2__strip-trust i { color: var(--g-cyan); font-size: .8rem; }

/* RESPONSIVE: collapse to single column under 1100px */
@media (max-width: 1100px) {
    .g-hero2__inner {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
    }
    .g-hero2__head    { grid-column: 1 / -1; min-height: 320px; }
    .g-hero2__match   { grid-column: 1 / -1; min-height: auto; }
    .g-hero2__bonus   { grid-column: 1 / span 6; height: auto; min-height: 200px; }
    .g-hero2__photo   { grid-column: 1 / span 6; height: 280px; }
    .g-hero2__photo--accent { grid-column: 1 / span 6; height: 200px; }
    .g-hero2__strip   { grid-template-columns: repeat(4, 1fr); }
    .g-hero2__strip-trust { display: none; }
}
@media (max-width: 720px) {
    .g-hero2 .g-tile { border-radius: var(--g-radius); }
    .g-hero2__strip { grid-template-columns: 1fr 1fr; gap: .8rem .6rem; padding: .85rem 1rem; }
    .g-match__odds { gap: .35rem; }
}
@media (max-width: 480px) {
    .g-hero2__head h1 { font-size: 2rem; }
    .g-hero2__bonus strong { font-size: 2rem; }
}

/* -------- 6c. HERO v3 — kinetic editorial with stacked photo deck --------
   Centered typographic statement framed by two marquees (brand top, live
   odds bottom), with three rotated glass-framed photos stacked in the
   middle and floating data chips at the corners. */
.g-hero3 {
    position: relative;
    padding: 0 0 clamp(.5rem, 1vw, 1rem);
    overflow: hidden;
}

/* Brand marquee — runs along the top, very large text, low opacity */
.g-hero3__brand-marquee {
    position: relative;
    overflow: hidden;
    padding: .55rem 0 .45rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.g-hero3__brand-marquee-track {
    display: inline-flex;
    white-space: nowrap;
    animation: gMarqueeX 36s linear infinite;
    will-change: transform;
}
.g-hero3__brand-marquee-track span {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    font-family: var(--g-font-display);
    font-weight: 600;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    letter-spacing: -0.035em;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.18);
    text-transform: uppercase;
}
.g-hero3__brand-marquee-track span em {
    font-style: normal;
    color: transparent;
    -webkit-text-stroke: 0;
    background: var(--g-grad-aurora);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.g-hero3__brand-marquee-track i {
    color: rgba(255,255,255,0.28);
    font-size: .8rem;
    -webkit-text-stroke: 0;
}

/* Stage — the editorial center of the hero */
.g-hero3__stage {
    position: relative;
    width: min(100%, var(--g-content-w));
    margin: 0 auto;
    padding: clamp(1.1rem, 2.2vw, 1.8rem) clamp(1rem, 3vw, 2rem) clamp(1rem, 2vw, 1.5rem);
    text-align: center;
}
.g-hero3__pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(var(--g-blur-sm));
    color: var(--g-ink-1);
    font-family: var(--g-font-body);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: .9rem;
}
.g-hero3__pill::before {
    content: "";
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--g-pink);
    box-shadow: 0 0 0 4px rgba(244,114,182,0.18);
    animation: gPulse 1.4s ease-in-out infinite;
}

.g-hero3__title {
    font-family: var(--g-font-display);
    font-weight: 600;
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    letter-spacing: -0.04em;
    line-height: 1;
    color: #fff;
    margin: 0 auto;
    max-width: 22ch;
    /* Legacy homepage-pro.css has !important text-fill-color: transparent on
       some h1 spans; force white fill back here. */
    -webkit-text-fill-color: #fff !important;
}
.g-hero3__title .g-line { -webkit-text-fill-color: #fff !important; color: #fff !important; }
.g-hero3__title .g-grad-text { display: inline; }
.g-hero3__title em {
    font-style: italic;
    font-weight: 500;
    background: var(--g-grad-aurora) !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
            color: transparent !important;
}
.g-hero3__sub {
    margin: .75rem auto 0;
    max-width: 540px;
    color: var(--g-ink-2);
    font-size: .95rem;
    line-height: 1.55;
}

/* Photo deck — 3 rotated glass-framed photos stacked behind the headline */
.g-hero3__deck {
    position: relative;
    margin: clamp(.9rem, 2vw, 1.4rem) auto 0;
    width: min(100%, 720px);
    height: clamp(170px, 15vw, 210px);
}
.g-hero3__deck-card {
    position: absolute;
    top: 0;
    left: 50%;
    width: 58%;
    height: 100%;
    border-radius: var(--g-radius-xl);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 30px 80px rgba(2,4,18,0.6), inset 0 1px 0 rgba(255,255,255,0.10);
    background: var(--g-bg-1);
    transform-origin: bottom center;
    transition: transform .9s var(--g-ease-out), box-shadow .9s;
    will-change: transform;
}
.g-hero3__deck-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.4s var(--g-ease-out);
}
.g-hero3__deck-card::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(2,4,18,0.55) 100%);
    pointer-events: none;
}
.g-hero3__deck-card--left {
    transform: translateX(-100%) rotate(-9deg) translateY(8px);
    z-index: 1;
}
.g-hero3__deck-card--center {
    transform: translateX(-50%) rotate(0deg);
    z-index: 3;
    box-shadow: 0 40px 100px rgba(168,85,247,0.35), 0 30px 80px rgba(2,4,18,0.7), inset 0 1px 0 rgba(255,255,255,0.14);
}
.g-hero3__deck-card--right {
    transform: translateX(0%) rotate(9deg) translateY(8px);
    z-index: 2;
}
.g-hero3__deck:hover .g-hero3__deck-card--left   { transform: translateX(-110%) rotate(-13deg) translateY(0px); }
.g-hero3__deck:hover .g-hero3__deck-card--center { transform: translateX(-50%) rotate(0deg) translateY(-8px); }
.g-hero3__deck:hover .g-hero3__deck-card--right  { transform: translateX(10%) rotate(13deg) translateY(0px); }
.g-hero3__deck:hover .g-hero3__deck-card img     { transform: scale(1.04); }

.g-hero3__deck-tag {
    position: absolute;
    top: 1rem; left: 1rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(11,12,28,0.7);
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(12px);
    color: #fff;
    font-family: var(--g-font-body);
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    z-index: 2;
}

/* Floating data chips — corner overlays on the deck */
.g-hero3__chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .8rem 1rem;
    border-radius: 16px;
    background: rgba(11,12,28,0.75);
    border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: var(--g-shadow-md);
    z-index: 5;
    animation: gFloat 5s ease-in-out infinite;
    text-align: left;
}
.g-hero3__chip i {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: var(--g-grad-aurora);
    color: #fff;
    font-size: .9rem;
    box-shadow: 0 8px 20px rgba(168,85,247,0.4);
}
.g-hero3__chip strong {
    display: block;
    font-family: var(--g-font-display);
    font-size: .98rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
}
.g-hero3__chip small {
    display: block;
    font-size: .72rem;
    color: var(--g-ink-2);
    letter-spacing: -0.005em;
}
.g-hero3__chip--tl { top: -10%; left: 2%;  animation-delay: 0s; }
.g-hero3__chip--br { bottom: -8%; right: 2%; animation-delay: 1.4s; }

/* CTA row */
.g-hero3__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
    margin: 1.1rem auto 0;
}

/* Trust micro-strip just under the CTAs */
.g-hero3__trust {
    margin: .75rem auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .3rem .85rem;
    color: var(--g-ink-2);
    font-size: .78rem;
    font-weight: 500;
}
.g-hero3__trust span { display: inline-flex; align-items: center; gap: .35rem; }
.g-hero3__trust i { color: var(--g-emerald); font-size: .85rem; }

/* Bottom live-odds marquee */
.g-hero3__odds-marquee {
    position: relative;
    overflow: hidden;
    padding: .55rem 0;
    margin-top: clamp(.7rem, 1.4vw, 1rem);
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(4,5,13,0.45);
    backdrop-filter: blur(var(--g-blur-sm));
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.g-hero3__odds-track {
    display: inline-flex;
    white-space: nowrap;
    animation: gMarqueeX 32s linear infinite;
    gap: 1rem;
    padding-inline: 1rem;
}
.g-hero3__odds-track:hover { animation-play-state: paused; }
.g-hero3__odd {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: var(--g-glass-bg);
    border: 1px solid var(--g-glass-border);
    color: var(--g-ink-1);
    font-family: var(--g-font-body);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: -0.005em;
}
.g-hero3__odd b {
    color: #fff;
    font-family: var(--g-font-mono);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    font-variant-numeric: tabular-nums;
}
.g-hero3__odd--live {
    background: rgba(244,114,182,0.16);
    border-color: rgba(244,114,182,0.4);
    color: #fff;
}
.g-hero3__odd--live::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--g-pink);
    animation: gPulse 1.4s ease-in-out infinite;
}

/* Reveal entrance — words fade up */
.g-hero3__title .g-line {
    display: block;
    opacity: 0;
    transform: translateY(20px);
    animation: gFadeUp .9s var(--g-ease-out) forwards;
}
.g-hero3__title .g-line--1 { animation-delay: .1s; }
.g-hero3__title .g-line--2 { animation-delay: .25s; }
.g-hero3__title .g-line--3 { animation-delay: .4s; }
@keyframes gFadeUp { to { opacity: 1; transform: translateY(0); } }

/* Responsive */
@media (max-width: 880px) {
    .g-hero3__deck { width: 92%; height: 240px; }
    .g-hero3__deck-card { width: 64%; }
    .g-hero3__chip--tl { top: -16%; left: -4%; }
    .g-hero3__chip--br { bottom: -14%; right: -4%; }
}
@media (max-width: 540px) {
    .g-hero3__chip { padding: .6rem .75rem; }
    .g-hero3__chip strong { font-size: .85rem; }
    .g-hero3__chip small  { font-size: .65rem; }
    .g-hero3__chip i { width: 28px; height: 28px; font-size: .75rem; }
    .g-hero3__deck { height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
    .g-hero3__brand-marquee-track,
    .g-hero3__odds-track { animation: none; }
    .g-hero3__chip { animation: none; }
    .g-hero3__title .g-line { opacity: 1; transform: none; animation: none; }
}

/* -------- 7. Section primitive -------- */
.g-section {
    padding: clamp(.9rem, 1.8vw, 1.5rem) 0;
    position: relative;
}
.g-section--alt::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(168,85,247,0.05), rgba(34,211,238,0.04));
    pointer-events: none;
    z-index: -1;
}
.g-section__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto .9rem;
}
.g-section__eyebrow {
    display: inline-block;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--g-glass-bg);
    border: 1px solid var(--g-glass-border);
    color: var(--g-cyan);
    font-family: var(--g-font-body);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: .9rem;
    backdrop-filter: blur(var(--g-blur-sm));
}
.g-section__sub {
    font-size: .98rem;
    color: var(--g-ink-2);
    margin-top: .7rem;
    line-height: 1.6;
}

/* -------- 8. Sport showcase grid -------- */
.g-sports {
    width: min(100%, var(--g-content-w));
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 880px) { .g-sports { grid-template-columns: 1fr 1fr; gap: .75rem; } }
@media (max-width: 360px) { .g-sports { grid-template-columns: 1fr; } }
.g-sport-card {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    border: 1px solid var(--g-glass-border);
    box-shadow: var(--g-shadow-md);
    isolation: isolate;
    cursor: pointer;
    transition: transform .55s var(--g-ease-out), box-shadow .55s;
}
.g-sport-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--g-shadow-lg), 0 0 0 1px rgba(255,255,255,0.18);
}
.g-sport-card__img {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    transition: transform 1.2s var(--g-ease-out);
    z-index: -2;
}
.g-sport-card:hover .g-sport-card__img { transform: scale(1.10); }
.g-sport-card__overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(2,4,18,0.82) 100%),
        radial-gradient(at 90% 0%, rgba(168,85,247,0.20), transparent 50%);
    z-index: -1;
}
.g-sport-card__body {
    position: absolute;
    inset: auto 0 0 0;
    padding: .9rem 1.15rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.g-sport-card__chip {
    align-self: flex-start;
    padding: .22rem .6rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
    color: #fff;
    font-family: var(--g-font-body);
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    backdrop-filter: blur(var(--g-blur-sm));
    margin-bottom: .3rem;
}
.g-sport-card__title {
    color: #fff;
    font-family: var(--g-font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin: 0;
}
.g-sport-card__meta  { color: rgba(255,255,255,0.78); font-size: .8rem; margin-top: .25rem; letter-spacing: -0.005em; }
.g-sport-card__cta {
    display: inline-flex; align-items: center; gap: .4rem;
    margin-top: .85rem;
    padding: .5rem .9rem;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    color: #fff;
    font-family: var(--g-font-body);
    font-size: .78rem; font-weight: 600;
    letter-spacing: -0.005em;
    backdrop-filter: blur(var(--g-blur-sm));
    transition: background .25s, transform .35s;
    align-self: flex-start;
}
.g-sport-card:hover .g-sport-card__cta { background: var(--g-grad-aurora); border-color: transparent; transform: translateY(-2px); }

/* -------- 9. Stats strip -------- */
.g-stats {
    width: min(100%, var(--g-content-w));
    margin: 0 auto;
    padding: 2rem clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
.g-stat {
    text-align: center;
    padding: 1.15rem 1rem;
    border-radius: var(--g-radius);
    background: var(--g-glass-bg);
    border: 1px solid var(--g-glass-border);
    backdrop-filter: blur(var(--g-blur)) saturate(140%);
    box-shadow: var(--g-shadow-sm);
}
.g-stat__num {
    display: block;
    font-family: var(--g-font-display);
    font-weight: 600;
    font-size: clamp(1.55rem, 2.4vw, 2.1rem);
    letter-spacing: -0.035em;
    background: var(--g-grad-aurora);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.g-stat__lbl {
    display: block;
    margin-top: .4rem;
    color: var(--g-ink-2);
    font-family: var(--g-font-body);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 500;
}

/* -------- 10. Feature grid (icon + title + body) -------- */
.g-features {
    width: min(100%, var(--g-content-w));
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .9rem;
}
@media (max-width: 880px) { .g-features { grid-template-columns: 1fr 1fr; gap: .7rem; } }
@media (max-width: 380px) { .g-features { grid-template-columns: 1fr; } }
.g-feature {
    padding: 1.2rem 1.25rem;
    border-radius: var(--g-radius-lg);
    background: var(--g-glass-bg);
    border: 1px solid var(--g-glass-border);
    backdrop-filter: blur(var(--g-blur)) saturate(140%);
    box-shadow: var(--g-shadow-sm);
    transition: transform .45s var(--g-ease-out), box-shadow .45s, border-color .45s;
}
.g-feature:hover {
    transform: translateY(-4px);
    border-color: rgba(168,85,247,0.4);
    box-shadow: var(--g-shadow-md), 0 12px 36px rgba(168,85,247,0.20);
}
.g-feature__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(168,85,247,0.22), rgba(34,211,238,0.20));
    border: 1px solid rgba(168,85,247,0.35);
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: .8rem;
}
.g-feature h3 {
    font-family: var(--g-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 .4rem;
}
.g-feature p { color: var(--g-ink-2); font-size: .88rem; line-height: 1.6; margin: 0; }

/* -------- 11. Showcase split (image + copy) -------- */
.g-split {
    width: min(100%, var(--g-content-w));
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}
.g-split--reverse { direction: rtl; }
.g-split--reverse > * { direction: ltr; }
@media (max-width: 880px) { .g-split { grid-template-columns: 1fr; } }

.g-split__photo {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: var(--g-radius-xl);
    overflow: hidden;
    border: 1px solid var(--g-glass-border);
    box-shadow: var(--g-shadow-lg);
}
.g-split__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--g-ease-out);
}
.g-split__photo:hover img { transform: scale(1.04); }
.g-split__tag {
    position: absolute;
    top: 1rem; left: 1rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    background: rgba(11,12,28,0.7);
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(var(--g-blur));
    color: #fff;
    font-family: var(--g-font-body);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.g-split__bullets {
    list-style: none;
    margin: 1rem 0 1.5rem;
    padding: 0;
}
.g-split__bullets li {
    display: flex;
    gap: .7rem;
    padding: .55rem 0;
    color: var(--g-ink-1);
}
.g-split__bullets li i {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: rgba(52,211,153,0.16);
    color: var(--g-emerald);
    font-size: .7rem;
    margin-top: .15rem;
}

/* -------- 12. Live winners feed -------- */
.g-winners {
    border-radius: var(--g-radius-lg);
    background: var(--g-glass-bg);
    border: 1px solid var(--g-glass-border);
    backdrop-filter: blur(var(--g-blur)) saturate(150%);
    box-shadow: var(--g-shadow-md);
    overflow: hidden;
}
.g-winners__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.g-winners__head h4 { margin: 0; font-size: .95rem; font-weight: 600; letter-spacing: -0.015em; }
.g-winners__live {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: rgba(244,114,182,0.16);
    border: 1px solid rgba(244,114,182,0.4);
    color: var(--g-pink);
    font-family: var(--g-font-body);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
}
.g-winners__live::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--g-pink);
    animation: gPulse 1.4s ease-in-out infinite;
}
.g-winners__list {
    padding: .35rem 0;
    max-height: 380px;
    overflow: hidden;
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.g-winners__track { animation: gMarqueeY 26s linear infinite; }
.g-winners:hover .g-winners__track { animation-play-state: paused; }
.g-win {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1.4rem;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.g-win:first-child { border-top: 0; }
.g-win__avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--g-grad-aurora);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    font-family: var(--g-font-display);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: -0.01em;
}
.g-win__name { color: #fff; font-weight: 600; font-size: .85rem; letter-spacing: -0.012em; }
.g-win__game { color: var(--g-ink-2); font-size: .75rem; letter-spacing: -0.005em; }
.g-win__amt {
    color: var(--g-emerald);
    font-family: var(--g-font-display);
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: -0.018em;
    font-variant-numeric: tabular-nums;
}
@keyframes gMarqueeY {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

/* -------- 13. Marquee category strip -------- */
.g-quickbar {
    position: relative;
    background: rgba(4,5,13,0.55);
    border-block: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(var(--g-blur-sm));
    overflow: hidden;
}
.g-quickbar__track {
    display: inline-flex;
    gap: .5rem;
    padding: .85rem 1rem;
    white-space: nowrap;
    animation: gMarqueeX 38s linear infinite;
}
.g-quickbar:hover .g-quickbar__track { animation-play-state: paused; }
.g-quickbar a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .85rem;
    border-radius: 999px;
    background: var(--g-glass-bg);
    border: 1px solid var(--g-glass-border);
    color: var(--g-ink-1);
    font-family: var(--g-font-body);
    font-weight: 500;
    font-size: .8rem;
    letter-spacing: -0.005em;
    transition: background .25s, color .2s, border-color .25s;
}
.g-quickbar a:hover { background: var(--g-glass-bg-strong); color:#fff; }
.g-quickbar a.is-active {
    background: var(--g-grad-aurora);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px rgba(168,85,247,0.5);
}
.g-quickbar a .badge {
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(0,0,0,.25);
    font-family: var(--g-font-body);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .1em;
}
@keyframes gMarqueeX {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* -------- 14. Final CTA -------- */
.g-cta {
    text-align: center;
    padding: clamp(1rem, 2vw, 1.75rem) clamp(1rem, 3vw, 2rem);
    width: min(100%, var(--g-content-w));
    margin: 0 auto;
}
.g-cta__panel {
    position: relative;
    padding: clamp(2.2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--g-radius-xl);
    background: linear-gradient(135deg, rgba(168,85,247,0.14), rgba(34,211,238,0.10));
    border: 1px solid rgba(168,85,247,0.30);
    backdrop-filter: blur(var(--g-blur)) saturate(160%);
    box-shadow: 0 30px 80px rgba(168,85,247,0.25);
    overflow: hidden;
}
.g-cta__panel::before {
    content: "";
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(168,85,247,0.18) 90deg, transparent 180deg, rgba(34,211,238,0.18) 270deg, transparent 360deg);
    animation: gSpin 22s linear infinite;
    z-index: -1;
}
@keyframes gSpin { to { transform: rotate(360deg); } }

/* -------- 15. FOOTER -------- */
.px-foot-cta,
.g-footer-cta {
    margin-top: clamp(.75rem, 1.5vw, 1.25rem);
    padding: clamp(1rem, 2.5vw, 1.5rem);
    width: min(100%, calc(var(--g-content-w) - 40px));
    margin-inline: auto;
}
.px-foot-cta__inner,
.g-footer-cta__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: var(--g-radius-lg);
    background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(34,211,238,0.12));
    border: 1px solid rgba(168,85,247,0.35);
    backdrop-filter: blur(var(--g-blur)) saturate(160%);
    box-shadow: var(--g-shadow-md);
}
.px-foot-cta__copy small,
.g-footer-cta small {
    display: block;
    color: var(--g-cyan);
    font-family: var(--g-font-body);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: .4rem;
}
.px-foot-cta__copy h3,
.g-footer-cta h3 {
    margin: 0;
    font-family: var(--g-font-display);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.2;
}
@media (max-width: 760px) {
    .px-foot-cta__inner, .g-footer-cta__inner { grid-template-columns: 1fr; }
}

.px-footer,
.g-footer {
    margin-top: clamp(.75rem, 1.5vw, 1.25rem);
    background: linear-gradient(180deg, rgba(4,5,13,0) 0%, rgba(4,5,13,0.6) 30%, rgba(4,5,13,0.85) 100%);
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: clamp(1rem, 2vw, 1.5rem);
}
.px-footer__inner,
.g-footer__inner {
    width: min(100%, var(--g-content-w));
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
    gap: 2rem;
}
@media (max-width: 1100px) {
    .px-footer__inner, .g-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .px-footer__inner, .g-footer__inner { grid-template-columns: 1fr; }
}

.px-footer__brand-col,
.g-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.px-footer__tagline,
.g-footer__tagline {
    color: var(--g-ink-2);
    line-height: 1.65;
    font-size: .87rem;
    max-width: 340px;
    letter-spacing: -0.005em;
}
.px-social,
.g-social {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.px-social a,
.g-social a {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: var(--g-glass-bg);
    border: 1px solid var(--g-glass-border);
    backdrop-filter: blur(var(--g-blur-sm));
    color: var(--g-ink-1);
    transition: transform .35s, color .25s, border-color .25s, background .25s, box-shadow .35s;
}
.px-social a:hover,
.g-social a:hover {
    transform: translateY(-3px) rotate(-4deg);
    color: #fff;
    border-color: rgba(168,85,247,0.6);
    background: rgba(168,85,247,0.18);
    box-shadow: 0 10px 28px rgba(168,85,247,0.4);
}

.px-footer__col,
.g-footer__col { border: 0; padding: 0; margin: 0; color: var(--g-ink-1); }
.px-footer__col summary,
.g-footer__col summary {
    list-style: none;
    cursor: pointer;
    margin-bottom: .8rem;
}
.px-footer__col summary::-webkit-details-marker,
.g-footer__col summary::-webkit-details-marker { display: none; }
.px-footer__col h4,
.g-footer__col h4 {
    font-family: var(--g-font-body);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--g-ink-0);
    margin: 0;
}
.px-footer__col ul,
.g-footer__col ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: .55rem;
}
.px-footer__col a,
.g-footer__col a {
    color: var(--g-ink-2);
    font-size: .85rem;
    letter-spacing: -0.005em;
    transition: color .2s, padding-left .25s;
}
.px-footer__col a:hover,
.g-footer__col a:hover { color: #fff; padding-left: 4px; }
.px-footer__caret { display: none; }

.px-footer__band,
.g-footer__band {
    margin-top: clamp(1.25rem, 3vw, 2rem);
    padding: 1.1rem 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(4,5,13,0.30);
}
.px-footer__band-inner,
.g-footer__band-inner {
    width: min(100%, var(--g-content-w));
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
    align-items: center;
}
@media (max-width: 780px) { .px-footer__band-inner, .g-footer__band-inner { grid-template-columns: 1fr; } }

.px-footer__band-label,
.g-footer__band-label {
    display: block;
    color: var(--g-ink-3);
    font-family: var(--g-font-body);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: .8rem;
}
.px-pays,
.g-pays {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}
.px-pay-logo,
.g-pay-logo {
    height: 36px;
    padding: .35rem .7rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.92);
    display: inline-flex;
    align-items: center; justify-content: center;
    transition: transform .3s;
}
.px-pay-logo:hover,
.g-pay-logo:hover { transform: translateY(-2px); }
.px-pay-logo img,
.g-pay-logo img { height: 22px; width: auto; }

.px-trust,
.g-trust {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.px-trust span,
.g-trust span {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: var(--g-glass-bg);
    border: 1px solid var(--g-glass-border);
    color: var(--g-ink-1);
    font-family: var(--g-font-body);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: -0.005em;
}
.px-trust i,
.g-trust i { color: var(--g-cyan); }

.px-footer__sig,
.g-footer__sig {
    padding: 1.2rem 0 1.6rem;
    color: var(--g-ink-3);
}
.px-footer__sig-inner,
.g-footer__sig-inner {
    width: min(100%, var(--g-content-w));
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .76rem;
    letter-spacing: -0.005em;
}

.px-totop,
.g-totop {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 48px; height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: var(--g-glass-bg-strong);
    border: 1px solid var(--g-glass-border);
    backdrop-filter: blur(var(--g-blur));
    color: #fff;
    box-shadow: var(--g-shadow-md);
    z-index: 70;
    transition: transform .3s, background .25s, color .2s;
}
.px-totop:hover,
.g-totop:hover { transform: translateY(-3px); background: var(--g-grad-aurora); border-color: transparent; color:#fff; }

/* -------- 16. Reveal animations -------- */
.g-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s var(--g-ease-out), transform .8s var(--g-ease-out);
    will-change: opacity, transform;
}
.g-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}
.g-reveal--right { transform: translateX(28px); }
.g-reveal--right.is-in { transform: translateX(0); }
.g-reveal--left { transform: translateX(-28px); }
.g-reveal--left.is-in { transform: translateX(0); }
.g-reveal--zoom { transform: scale(.94); }
.g-reveal--zoom.is-in { transform: scale(1); }

/* Stagger delays */
.g-reveal[data-delay="1"] { transition-delay: .08s; }
.g-reveal[data-delay="2"] { transition-delay: .16s; }
.g-reveal[data-delay="3"] { transition-delay: .24s; }
.g-reveal[data-delay="4"] { transition-delay: .32s; }
.g-reveal[data-delay="5"] { transition-delay: .40s; }
.g-reveal[data-delay="6"] { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
    .g-hero__badge { animation: none; }
    .g-quickbar__track, .g-winners__track { animation: none; }
    .g-cta__panel::before { animation: none; }
    .g-reveal { opacity: 1; transform: none; transition: none; }
}

/* -------- 17. Long-form content block (SEO) --------
   Editorial layout: split image + prose with subheadings, keyword-friendly. */
.g-content {
    width: min(100%, var(--g-content-w));
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}
.g-content--reverse > :first-child { order: 2; }
@media (max-width: 880px) {
    .g-content { grid-template-columns: 1fr; }
    .g-content--reverse > :first-child { order: 0; }
}
.g-content__photo {
    position: sticky;
    top: 90px;
    aspect-ratio: 5/6;
    border-radius: var(--g-radius-xl);
    overflow: hidden;
    border: 1px solid var(--g-glass-border);
    box-shadow: var(--g-shadow-lg);
}
.g-content__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.g-content__prose h3 {
    font-family: var(--g-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 1.1rem 0 .4rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.g-content__prose h3:first-child { margin-top: 0; }
.g-content__prose h3 i {
    width: 24px; height: 24px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(168,85,247,0.25), rgba(34,211,238,0.22));
    border: 1px solid rgba(168,85,247,0.40);
    color: var(--g-cyan);
    font-size: .72rem;
}
.g-content__prose p {
    color: var(--g-ink-2);
    font-size: .9rem;
    line-height: 1.6;
    margin: 0 0 .6rem;
}
.g-content__prose p strong { color: var(--g-ink-0); font-weight: 600; }
.g-content__prose p a { color: var(--g-cyan); border-bottom: 1px dashed rgba(34,211,238,0.4); }
.g-content__prose p a:hover { color: #fff; border-bottom-color: #fff; }
.g-content__prose ul {
    list-style: none;
    margin: .25rem 0 .75rem;
    padding: 0;
}
.g-content__prose ul li {
    position: relative;
    padding: .15rem 0 .15rem 1.25rem;
    color: var(--g-ink-1);
    font-size: .85rem;
    line-height: 1.55;
}
.g-content__prose ul li::before {
    content: "";
    position: absolute;
    left: 0; top: .6rem;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--g-grad-aurora);
    box-shadow: 0 0 12px rgba(168,85,247,0.6);
}

/* -------- 18. Stepper (horizontal numbered cards) -------- */
.g-stepper {
    width: min(100%, var(--g-content-w));
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    counter-reset: g-step;
}
.g-step {
    counter-increment: g-step;
    position: relative;
    padding: 1.2rem 1.15rem 1.15rem;
    border-radius: var(--g-radius-lg);
    background: var(--g-glass-bg);
    border: 1px solid var(--g-glass-border);
    backdrop-filter: blur(var(--g-blur)) saturate(140%);
    box-shadow: var(--g-shadow-sm);
    transition: transform .45s var(--g-ease-out), border-color .35s, box-shadow .45s;
}
.g-step:hover {
    transform: translateY(-4px);
    border-color: rgba(168,85,247,0.4);
    box-shadow: var(--g-shadow-md), 0 12px 36px rgba(168,85,247,0.18);
}
.g-step__num {
    position: absolute;
    top: -18px; left: 1.4rem;
    width: 38px; height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: var(--g-grad-aurora);
    color: #fff;
    font-family: var(--g-font-display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    box-shadow: 0 8px 20px rgba(168,85,247,0.45);
}
.g-step__num::before { content: counter(g-step); }
.g-step__icon {
    margin: .35rem 0 .75rem;
    width: 38px; height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--g-glass-border);
    color: var(--g-cyan);
    font-size: 1rem;
}
.g-step h4 {
    font-family: var(--g-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 .4rem;
    color: #fff;
}
.g-step p { font-size: .88rem; line-height: 1.6; color: var(--g-ink-2); margin: 0; }

/* -------- 19. Markets grid (keyword-rich sport/league chips) -------- */
.g-markets {
    width: min(100%, var(--g-content-w));
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .85rem;
}
@media (max-width: 880px) { .g-markets { grid-template-columns: 1fr 1fr; gap: .65rem; } }
@media (max-width: 360px) { .g-markets { grid-template-columns: 1fr; } }
.g-market {
    padding: 1.05rem 1.1rem 1rem;
    border-radius: var(--g-radius-lg);
    background: var(--g-glass-bg);
    border: 1px solid var(--g-glass-border);
    backdrop-filter: blur(var(--g-blur)) saturate(140%);
    transition: transform .35s, border-color .35s;
}
.g-market:hover { transform: translateY(-3px); border-color: rgba(34,211,238,0.4); }
.g-market__head {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .65rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.g-market__icon {
    width: 32px; height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(168,85,247,0.22), rgba(34,211,238,0.18));
    border: 1px solid rgba(168,85,247,0.30);
    color: #fff;
    font-size: .85rem;
}
.g-market__title {
    font-family: var(--g-font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
}
.g-market__count {
    margin-left: auto;
    font-family: var(--g-font-body);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--g-ink-3);
}
.g-market ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.g-market ul li {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--g-ink-1);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: background .25s, color .2s;
}
.g-market ul li:hover { background: rgba(168,85,247,0.18); color: #fff; }

/* -------- 20. FAQ accordion -------- */
.g-faq {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.g-faq__item {
    border-radius: var(--g-radius);
    background: var(--g-glass-bg);
    border: 1px solid var(--g-glass-border);
    backdrop-filter: blur(var(--g-blur-sm));
    transition: border-color .25s, background .25s;
    overflow: hidden;
}
.g-faq__item[open] {
    background: var(--g-glass-bg-strong);
    border-color: rgba(168,85,247,0.35);
}
.g-faq__item summary {
    list-style: none;
    cursor: pointer;
    padding: .8rem 1.05rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    color: #fff;
    font-family: var(--g-font-display);
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: -0.018em;
}
.g-faq__item summary::-webkit-details-marker { display: none; }
.g-faq__item summary::after {
    content: "+";
    margin-left: auto;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--g-glass-border);
    color: var(--g-ink-1);
    font-family: var(--g-font-display);
    font-size: 1rem;
    font-weight: 500;
    transition: transform .35s var(--g-ease-out), background .25s, color .2s;
}
.g-faq__item[open] summary::after {
    content: "−";
    background: var(--g-grad-aurora);
    border-color: transparent;
    color: #fff;
    transform: rotate(180deg);
}
.g-faq__item div {
    padding: 0 1.05rem .9rem;
    color: var(--g-ink-2);
    font-size: .87rem;
    line-height: 1.6;
}
.g-faq__item div p { margin: 0 0 .45rem; }
.g-faq__item div p:last-child { margin: 0; }

/* -------- 21. Cities / divisions strip -------- */
.g-cities {
    width: min(100%, var(--g-content-w));
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .85rem;
}
.g-city {
    padding: .85rem .85rem;
    text-align: center;
    border-radius: var(--g-radius);
    background: var(--g-glass-bg);
    border: 1px solid var(--g-glass-border);
    backdrop-filter: blur(var(--g-blur-sm));
    transition: transform .35s, border-color .25s;
}
.g-city:hover { transform: translateY(-3px); border-color: rgba(168,85,247,0.4); }
.g-city__name {
    font-family: var(--g-font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.018em;
    color: #fff;
    margin-bottom: .15rem;
}
.g-city__num {
    font-family: var(--g-font-display);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    background: var(--g-grad-aurora);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.g-city__lbl {
    display: block;
    margin-top: .2rem;
    font-size: .68rem;
    color: var(--g-ink-3);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 500;
}

/* -------- 21b. Social community cards — premium two-zone treatment --------
   Top zone: bold brand-colour gradient with big icon + follower count.
   Bottom zone: dark glass with platform name, handle, full-width branded CTA.
   Brand identity comes through the saturated top, not just an accent. */
.g-socials {
    width: min(100%, var(--g-content-w));
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
}
@media (max-width: 880px) { .g-socials { grid-template-columns: 1fr 1fr; gap: .75rem; } }
@media (max-width: 360px) { .g-socials { grid-template-columns: 1fr; } }

.g-social,
.g-social:hover,
.g-social:focus,
.g-social:active,
.g-social *,
.g-social *:hover { text-decoration: none !important; }

.g-social {
    --g-social-bg: linear-gradient(135deg, #a855f7, #3b82f6);
    --g-social-glow: rgba(168,85,247, .45);
    --g-social-border: rgba(168,85,247, .55);
    --g-social-cta-bg: rgba(168,85,247, .22);
    --g-social-cta-border: rgba(168,85,247, .50);
    --g-social-icon-fg: #fff;

    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: var(--g-bg-1);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 14px 36px rgba(2,4,18,0.45);
    isolation: isolate;
    transition: transform .55s var(--g-ease-out),
                box-shadow .55s var(--g-ease-out),
                border-color .35s;
}
.g-social:hover {
    transform: translateY(-6px);
    border-color: var(--g-social-border);
    box-shadow: 0 26px 64px var(--g-social-glow), 0 0 0 1px var(--g-social-border);
    color: inherit;
}

/* TOP ZONE — saturated brand gradient with big icon + count */
.g-social__top {
    position: relative;
    padding: 1.1rem 1.2rem 1rem;
    background: var(--g-social-bg);
    display: flex;
    align-items: center;
    gap: .85rem;
    overflow: hidden;
}
/* Decorative radial sheen on top zone */
.g-social__top::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 70% at 85% 15%, rgba(255,255,255,0.30), transparent 60%),
        radial-gradient(50% 60% at 10% 95%, rgba(0,0,0,0.20), transparent 60%);
    pointer-events: none;
}
/* Subtle dotted pattern */
.g-social__top::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: .35;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.g-social__icon-big {
    position: relative;
    z-index: 2;
    width: 52px; height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.32);
    backdrop-filter: blur(10px);
    color: var(--g-social-icon-fg);
    font-size: 1.4rem;
    box-shadow: 0 10px 24px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.30);
    transition: transform .55s var(--g-ease-out);
    flex-shrink: 0;
}
.g-social:hover .g-social__icon-big { transform: scale(1.06) rotate(-4deg); }

.g-social__top-stats {
    position: relative;
    z-index: 2;
    margin-left: auto;
    text-align: right;
    color: #fff;
}
.g-social__top-num {
    display: block;
    font-family: var(--g-font-display);
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: -0.03em;
    line-height: .95;
    text-shadow: 0 2px 12px rgba(0,0,0,0.35);
    font-variant-numeric: tabular-nums;
}
.g-social__top-lbl {
    display: block;
    font-family: var(--g-font-body);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-top: .35rem;
    opacity: .92;
}

/* BOTTOM ZONE — dark glass with copy and CTA */
.g-social__body {
    padding: .9rem 1.15rem 1rem;
    background:
        linear-gradient(180deg, rgba(11,12,28,0.55), rgba(4,5,13,0.85)),
        var(--g-glass-bg-strong);
    backdrop-filter: blur(var(--g-blur));
    flex: 1;
    display: flex;
    flex-direction: column;
}
.g-social__name {
    display: block;
    font-family: var(--g-font-display);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.022em;
    color: #fff;
    margin: 0;
}
.g-social__handle {
    display: block;
    color: var(--g-ink-2);
    font-size: .82rem;
    letter-spacing: -0.005em;
    margin: .15rem 0 .9rem;
}
.g-social__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .95rem;
    border-radius: 12px;
    background: var(--g-social-cta-bg);
    border: 1px solid var(--g-social-cta-border);
    color: #fff;
    font-family: var(--g-font-body);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: background .35s, border-color .35s, transform .35s;
}
.g-social__cta i {
    transition: transform .35s var(--g-ease-out);
    font-size: .8rem;
}
.g-social:hover .g-social__cta {
    background: var(--g-social-bg);
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px var(--g-social-glow);
}
.g-social:hover .g-social__cta i { transform: translateX(3px); }

/* Featured pulse ring (WhatsApp + Telegram support) */
.g-social--featured .g-social__icon-big::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 18px;
    border: 2px solid rgba(255,255,255,0.45);
    opacity: 0;
    animation: gPing 2.6s ease-out infinite;
}
@keyframes gPing {
    0%   { transform: scale(.92); opacity: .85; }
    80%  { transform: scale(1.20); opacity: 0; }
    100% { transform: scale(1.20); opacity: 0; }
}

/* PER-PLATFORM brand identities */
.g-social--facebook {
    --g-social-bg: linear-gradient(135deg, #1877F2 0%, #0a4fd0 100%);
    --g-social-glow: rgba(24,119,242,0.50);
    --g-social-border: rgba(24,119,242,0.55);
    --g-social-cta-bg: rgba(24,119,242,0.22);
    --g-social-cta-border: rgba(24,119,242,0.50);
}
.g-social--instagram {
    --g-social-bg: linear-gradient(135deg, #f7941e 0%, #dc2743 50%, #bc1888 100%);
    --g-social-glow: rgba(220,39,67,0.50);
    --g-social-border: rgba(220,39,67,0.55);
    --g-social-cta-bg: rgba(220,39,67,0.22);
    --g-social-cta-border: rgba(220,39,67,0.50);
}
.g-social--x {
    --g-social-bg: linear-gradient(135deg, #2a2a2a 0%, #050505 100%);
    --g-social-glow: rgba(255,255,255,0.18);
    --g-social-border: rgba(255,255,255,0.30);
    --g-social-cta-bg: rgba(255,255,255,0.12);
    --g-social-cta-border: rgba(255,255,255,0.30);
}
.g-social--telegram {
    --g-social-bg: linear-gradient(135deg, #229ed9 0%, #0a76aa 100%);
    --g-social-glow: rgba(34,158,217,0.50);
    --g-social-border: rgba(34,158,217,0.55);
    --g-social-cta-bg: rgba(34,158,217,0.22);
    --g-social-cta-border: rgba(34,158,217,0.50);
}
.g-social--youtube {
    --g-social-bg: linear-gradient(135deg, #ff1f1f 0%, #b40000 100%);
    --g-social-glow: rgba(255,31,31,0.45);
    --g-social-border: rgba(255,31,31,0.55);
    --g-social-cta-bg: rgba(255,31,31,0.22);
    --g-social-cta-border: rgba(255,31,31,0.50);
}
.g-social--whatsapp {
    --g-social-bg: linear-gradient(135deg, #25D366 0%, #128c7e 100%);
    --g-social-glow: rgba(37,211,102,0.50);
    --g-social-border: rgba(37,211,102,0.55);
    --g-social-cta-bg: rgba(37,211,102,0.22);
    --g-social-cta-border: rgba(37,211,102,0.50);
}

@media (max-width: 480px) {
    .g-social__top { padding: 1.2rem 1.2rem 1.1rem; gap: .8rem; }
    .g-social__icon-big { width: 54px; height: 54px; font-size: 1.45rem; border-radius: 14px; }
    .g-social__top-num { font-size: 1.4rem; }
    .g-social__body { padding: 1rem 1.1rem 1.05rem; }
}

/* -------- 21bc. Live match cards (used on /live-betting-odds/) -------- */
.g-live-grid {
    width: min(100%, var(--g-content-w));
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 980px) { .g-live-grid { grid-template-columns: 1fr 1fr; gap: .75rem; } }
@media (max-width: 600px) { .g-live-grid { grid-template-columns: 1fr; } }

.g-live-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding: 1.05rem 1.1rem 1rem;
    border-radius: var(--g-radius-lg);
    background: var(--g-glass-bg);
    border: 1px solid var(--g-glass-border);
    backdrop-filter: blur(var(--g-blur)) saturate(150%);
    box-shadow: var(--g-shadow-sm);
    overflow: hidden;
    isolation: isolate;
    transition: transform .45s var(--g-ease-out), border-color .35s, box-shadow .45s;
}
.g-live-card:hover {
    transform: translateY(-3px);
    border-color: rgba(244,114,182,0.45);
    box-shadow: var(--g-shadow-md), 0 14px 32px rgba(244,114,182,0.20);
}
/* Subtle accent stripe on hover */
.g-live-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--g-pink), var(--g-violet), var(--g-cyan));
    opacity: 0;
    transition: opacity .35s;
}
.g-live-card:hover::before { opacity: .9; }

/* Top: league pill + meta */
.g-live-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}
.g-live-card__league {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .55rem;
    border-radius: 999px;
    background: rgba(244,114,182,0.16);
    border: 1px solid rgba(244,114,182,0.4);
    color: var(--g-pink);
    font-family: var(--g-font-body);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.g-live-card__league::before {
    content: "";
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--g-pink);
    animation: gPulse 1.4s ease-in-out infinite;
}
.g-live-card__meta {
    font-family: var(--g-font-mono);
    font-size: .7rem;
    color: var(--g-ink-2);
    letter-spacing: -0.005em;
    font-variant-numeric: tabular-nums;
}

/* Teams */
.g-live-card__teams {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .25rem 0;
}
.g-live-card__team {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: .55rem;
    align-items: center;
}
.g-live-card__team:first-child { padding-bottom: .35rem; border-bottom: 1px dashed rgba(255,255,255,0.06); }
.g-live-card__crest {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--g-grad-aurora);
    display: inline-flex;
    align-items: center; justify-content: center;
    font-family: var(--g-font-display);
    font-weight: 600;
    font-size: .72rem;
    color: #fff;
    letter-spacing: -0.012em;
}
.g-live-card__team:nth-child(2) .g-live-card__crest {
    background: linear-gradient(135deg, var(--g-emerald), var(--g-cyan));
}
.g-live-card__name {
    color: #fff;
    font-family: var(--g-font-display);
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: -0.018em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.g-live-card__score {
    color: #fff;
    font-family: var(--g-font-mono);
    font-weight: 600;
    font-size: .98rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
}

/* Commentary */
.g-live-card__commentary {
    font-size: .76rem;
    color: var(--g-ink-2);
    padding: .5rem 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.g-live-card__commentary i { color: var(--g-amber); margin-right: .35rem; }

/* Odds row */
.g-live-card__odds {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .35rem;
    margin-top: auto;
}
.g-live-card__odd {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .55rem .35rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    transition: transform .35s, background .25s, border-color .25s, color .2s;
    text-decoration: none !important;
    color: var(--g-ink-1);
    cursor: pointer;
}
.g-live-card__odd:hover {
    background: rgba(168,85,247,0.18);
    border-color: rgba(168,85,247,0.50);
    transform: translateY(-2px);
    color: #fff;
}
.g-live-card__odd small {
    font-size: .58rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--g-ink-3);
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
}
.g-live-card__odd b {
    margin-top: .2rem;
    font-family: var(--g-font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.g-live-card__odd:hover b { color: var(--g-cyan); }

/* No-link variants for non-clickable rows */
.g-live-card__odd[href] { cursor: pointer; }

@media (max-width: 720px) {
    .g-live-card { padding: .9rem 1rem .9rem; gap: .5rem; }
    .g-live-card__name { font-size: .88rem; }
    .g-live-card__score { font-size: .92rem; }
    .g-live-card__commentary { font-size: .72rem; }
    .g-live-card__odd b { font-size: .9rem; }
}

/* -------- 21c. Blog cards — premium editorial preview -------- */
.g-blog-grid {
    width: min(100%, var(--g-content-w));
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
}
@media (max-width: 980px) { .g-blog-grid { grid-template-columns: 1fr 1fr; gap: .85rem; } }
@media (max-width: 600px) { .g-blog-grid { grid-template-columns: 1fr; } }

.g-blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    background: var(--g-glass-bg);
    border: 1px solid var(--g-glass-border);
    backdrop-filter: blur(var(--g-blur)) saturate(140%);
    box-shadow: var(--g-shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: transform .45s var(--g-ease-out),
                border-color .35s,
                box-shadow .45s;
    isolation: isolate;
}
.g-blog-card,
.g-blog-card:hover,
.g-blog-card:focus,
.g-blog-card:active,
.g-blog-card *,
.g-blog-card *:hover { text-decoration: none !important; }

.g-blog-card:hover {
    transform: translateY(-4px);
    border-color: rgba(168,85,247,0.45);
    box-shadow: var(--g-shadow-md), 0 14px 36px rgba(168,85,247,0.20);
    color: inherit;
}

/* COVER */
.g-blog-card__cover {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background:
        radial-gradient(60% 70% at 80% 15%, rgba(168,85,247,0.30), transparent 60%),
        radial-gradient(60% 70% at 20% 85%, rgba(34,211,238,0.18), transparent 60%),
        var(--g-bg-1);
}
.g-blog-card__cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s var(--g-ease-out);
}
.g-blog-card:hover .g-blog-card__cover img { transform: scale(1.05); }
.g-blog-card__cover-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255,255,255,0.5);
    font-size: 2.4rem;
}
.g-blog-card__cover::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(2,4,18,0.55) 100%);
    pointer-events: none;
}

/* Category chip — overlaid on cover */
.g-blog-card__cat {
    position: absolute;
    top: .75rem;
    left: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: rgba(11,12,28,0.75);
    border: 1px solid rgba(255,255,255,0.20);
    backdrop-filter: blur(12px);
    color: #fff;
    font-family: var(--g-font-body);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    z-index: 2;
}
.g-blog-card__cat i {
    color: var(--g-cyan);
    font-size: .65rem;
}

/* BODY */
.g-blog-card__body {
    padding: 1.05rem 1.15rem 1.1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .55rem;
}
.g-blog-card__title {
    font-family: var(--g-font-display);
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.25;
    color: #fff;
    margin: 0;
    /* Clamp to 3 lines so cards align */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.g-blog-card__excerpt {
    color: var(--g-ink-2);
    font-size: .85rem;
    line-height: 1.55;
    margin: 0;
    flex: 1;
    /* Clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.g-blog-card__meta {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .35rem;
    padding-top: .65rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    color: var(--g-ink-3);
    font-size: .72rem;
    font-weight: 500;
}
.g-blog-card__meta i { color: var(--g-cyan); margin-right: .25rem; }
.g-blog-card__more {
    margin-left: auto;
    color: var(--g-cyan);
    font-weight: 600;
    font-size: .76rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: color .2s, gap .25s;
}
.g-blog-card:hover .g-blog-card__more {
    color: #fff;
    gap: .5rem;
}

/* Mobile-special tweaks */
@media (max-width: 720px) {
    .g-blog-card { border-radius: 18px; }
    .g-blog-card__cover { aspect-ratio: 16/9; }
    .g-blog-card__title { font-size: 1rem; }
    .g-blog-card__excerpt { font-size: .82rem; }
    .g-blog-card__body { padding: .95rem 1rem 1rem; gap: .5rem; }
    .g-blog-card__cat { font-size: .58rem; padding: .22rem .55rem; }
}

/* -------- 22. Compatibility — neutralise large vertical padding on legacy
   shortcodes / blocks so they don't double-pad inside .g-section. -------- */
.g-section .pro-recent { padding: 0 !important; }
.g-section .pro-recent::before { display: none; }

/* -------- 22b. MOBILE-SPECIAL polish for ≤ 720px viewports --------
   Most of our players are on mobile, so this block tunes every section
   for thumb-reach, readability, and minimal scroll. */
@media (max-width: 720px) {
    /* Tighter horizontal page padding so glass cards fill the screen */
    .wrap, .g-wrap, .g-stats, .g-features, .g-sports, .g-markets, .g-socials,
    .g-stepper, .g-cities, .g-content, .g-split,
    .px-header__inner, .g-hero3__stage, .px-footer__inner,
    .px-footer__band-inner, .px-footer__sig-inner,
    .px-foot-cta__inner, .g-footer-cta__inner {
        padding-inline: .85rem !important;
    }

    /* Section heads: smaller, less margin, tighter sub-copy */
    .g-section { padding-block: .65rem 0; }
    .g-section__head { margin-bottom: .8rem; }
    .g-section__head h2,
    .g-section__head h1 {
        font-size: clamp(1.4rem, 7vw, 1.95rem) !important;
        letter-spacing: -0.028em;
        line-height: 1.1;
    }
    .g-section__sub { font-size: .88rem; line-height: 1.55; }
    .g-section__eyebrow { font-size: .62rem; letter-spacing: .14em; }

    /* HERO — collapse the 3-card photo deck into a single hero image
       so the eye stays on copy and CTAs */
    .g-hero3__title { font-size: clamp(1.85rem, 9vw, 2.4rem) !important; }
    .g-hero3__sub { font-size: .9rem; }
    .g-hero3__pill { font-size: .62rem; padding: .25rem .65rem; }

    .g-hero3__deck { height: 200px; width: 92%; margin-top: 1.75rem; }
    .g-hero3__deck-card--left,
    .g-hero3__deck-card--right { display: none; }
    .g-hero3__deck-card--center {
        width: 100%;
        transform: translateX(-50%) rotate(0deg) translateY(0);
    }
    .g-hero3__deck:hover .g-hero3__deck-card--center {
        transform: translateX(-50%) rotate(0deg) translateY(0);
    }
    .g-hero3__chip { padding: .55rem .75rem; }
    .g-hero3__chip strong { font-size: .82rem; }
    .g-hero3__chip small { font-size: .62rem; }
    .g-hero3__chip i { width: 28px; height: 28px; font-size: .75rem; }
    .g-hero3__chip--tl { top: -10%; left: 4%; }
    .g-hero3__chip--br { bottom: -10%; right: 4%; }

    .g-hero3__cta-row { flex-direction: column; gap: .5rem; align-items: stretch; }
    .g-hero3__cta-row .g-btn { justify-content: center; padding: .85rem 1rem; font-size: .92rem; }
    .g-hero3__trust { font-size: .72rem; gap: .25rem .55rem; }
    .g-hero3__trust span { padding: 0; }

    .g-hero3__brand-marquee-track span { font-size: 1.4rem; gap: .65rem; padding: 0 .65rem; }
    .g-hero3__brand-marquee-track i { font-size: .55rem; }

    /* Sport cards: 2 cols, slightly shorter aspect */
    .g-sports { grid-template-columns: 1fr 1fr; gap: .65rem; }
    .g-sport-card { aspect-ratio: 5/6; border-radius: 18px; }
    .g-sport-card__title { font-size: 1rem; }
    .g-sport-card__chip { font-size: .56rem; padding: .18rem .5rem; }
    .g-sport-card__meta { font-size: .68rem; }
    .g-sport-card__cta { font-size: .68rem; padding: .35rem .65rem; margin-top: .55rem; }
    .g-sport-card__body { padding: .7rem .8rem .85rem; }

    /* Stat strip: 2x2 on mobile */
    .g-stats { grid-template-columns: 1fr 1fr; gap: .55rem; }
    .g-stat { padding: .9rem .75rem; }
    .g-stat__num { font-size: 1.4rem; }
    .g-stat__lbl { font-size: .64rem; }

    /* Feature cards: 1 col, denser */
    .g-features { grid-template-columns: 1fr; gap: .55rem; }
    .g-feature { padding: 1rem 1.05rem; }
    .g-feature__icon { width: 38px; height: 38px; font-size: .95rem; margin-bottom: .55rem; }
    .g-feature h3 { font-size: .98rem; }
    .g-feature p { font-size: .85rem; line-height: 1.55; }

    /* Stepper: 1 col, no orphans */
    .g-stepper { grid-template-columns: 1fr; gap: .9rem; }
    .g-step { padding: 1rem 1.05rem .95rem; }
    .g-step__icon { width: 34px; height: 34px; font-size: .9rem; margin: .25rem 0 .55rem; }
    .g-step h4 { font-size: .98rem; }
    .g-step p { font-size: .82rem; }

    /* Cities: 4 cols on mobile (compact pills) */
    .g-cities { grid-template-columns: repeat(4, 1fr); gap: .45rem; }
    .g-city { padding: .55rem .35rem; }
    .g-city__name { font-size: .78rem; }
    .g-city__num  { font-size: .98rem; }
    .g-city__lbl  { display: none; }

    /* Live winners feed: split → stack, smaller table */
    .g-section--alt .g-wrap[style*="grid-template-columns:1fr 1fr"],
    .g-section--alt .g-wrap[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .g-winners__head h4 { font-size: .85rem; }
    .g-win { padding: .65rem 1rem; gap: .65rem; }
    .g-win__avatar { width: 30px; height: 30px; font-size: .7rem; }
    .g-win__name { font-size: .8rem; }
    .g-win__game { font-size: .68rem; }
    .g-win__amt { font-size: .82rem; }

    /* Long-form content blocks: stacked, image gets natural height (not sticky)
       and centred horizontally so it never sits flush-left when the row is
       wider than the photo's intrinsic max width. */
    .g-content {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        justify-items: center;
        text-align: center;
    }
    .g-content--reverse > :first-child { order: 0; }
    .g-content__photo {
        position: static !important;
        aspect-ratio: 16/10;
        max-height: 240px;
        width: min(100%, 520px);
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: center !important;
        justify-self: center !important;
    }
    .g-content__prose {
        width: 100%;
        max-width: 620px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .g-content__prose h3 { font-size: 1rem; margin: .9rem 0 .35rem; }
    .g-content__prose h3 i { width: 22px; height: 22px; font-size: .65rem; border-radius: 6px; }
    .g-content__prose p  { font-size: .87rem; line-height: 1.55; margin-bottom: .5rem; }
    .g-content__prose ul li { font-size: .82rem; padding-left: 1rem; }

    /* Split layouts — centre the column contents on mobile */
    .g-split { gap: 1rem; justify-items: center; text-align: center; }
    .g-split > * {
        width: 100%;
        max-width: 620px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .g-split__photo {
        aspect-ratio: 16/10;
        max-height: 240px;
        width: min(100%, 520px);
        align-self: center !important;
        justify-self: center !important;
    }
    .g-split__bullets li { font-size: .85rem; padding: .4rem 0; }
    .g-split__tag { font-size: .58rem; padding: .3rem .65rem; }

    /* Markets: 1 col on mobile (chips wrap nicely below 360 too) */
    .g-markets { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .g-market { padding: .85rem .9rem .85rem; }
    .g-market__title { font-size: .88rem; }
    .g-market__icon { width: 28px; height: 28px; font-size: .72rem; }
    .g-market__count { font-size: .58rem; }
    .g-market ul li { font-size: .65rem; padding: .15rem .45rem; }

    /* FAQ accordion: hide image, full-width accordion */
    .g-section .g-content:has(.g-faq) > .g-content__photo { display: none; }
    .g-faq__item summary { font-size: .88rem; padding: .7rem .9rem; gap: .55rem; }
    .g-faq__item summary::after { width: 22px; height: 22px; font-size: .9rem; }
    .g-faq__item div { font-size: .83rem; padding: 0 .9rem .8rem; }

    /* Social cards: 2 cols, slimmer */
    .g-socials { grid-template-columns: 1fr 1fr; gap: .65rem; }
    .g-social { border-radius: 18px; }
    .g-social__top { padding: .85rem .9rem .8rem; gap: .65rem; }
    .g-social__icon-big { width: 42px; height: 42px; font-size: 1.1rem; border-radius: 11px; }
    .g-social__top-num { font-size: 1.05rem; }
    .g-social__top-lbl { display: none; }
    .g-social__body { padding: .7rem .85rem .8rem; }
    .g-social__name { font-size: .88rem; }
    .g-social__handle { font-size: .68rem; margin-bottom: .55rem; }
    .g-social__cta { padding: .5rem .7rem; font-size: .72rem; border-radius: 9px; }

    /* Stadium banner: compact overlay padding */
    .g-section .g-wrap > div[style*="aspect-ratio:21/9"],
    .g-section .g-wrap > div[style*="aspect-ratio: 21/9"] {
        aspect-ratio: 4/3 !important;
    }

    /* Final CTA: pad less, smaller heading */
    .g-cta__panel h2 { font-size: clamp(1.5rem, 7.5vw, 2rem) !important; }
    .g-cta__panel { padding: 1.5rem 1.1rem; }
    .g-cta__panel > div[style*="display:flex"] { flex-direction: column; }
    .g-cta__panel .g-btn { justify-content: center; }

    /* Footer-CTA: stack columns, full-width button */
    .px-foot-cta__inner, .g-footer-cta__inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: .9rem;
        padding: 1.05rem 1rem;
    }
    .px-foot-cta__copy h3, .g-footer-cta h3 { font-size: 1.15rem; }
    .px-foot-cta .px-btn, .g-footer-cta .g-btn { justify-content: center; padding: .8rem 1.1rem; }

    /* Footer columns more compact */
    .px-footer__inner { gap: 1.25rem; }
    .px-footer__brand-col { gap: .8rem; }
    .px-footer__tagline { font-size: .82rem; max-width: 100%; }
    .px-footer__col h4 { font-size: .68rem; }
    .px-footer__col a { font-size: .82rem; }
    .px-footer__band { padding: 1rem 0; }
    .px-pay-logo { height: 32px; }
    .px-pay-logo img { height: 18px; }
    .px-trust span { font-size: .68rem; padding: .3rem .6rem; }

    /* Quickbar marquee — smaller pills */
    .g-quickbar a { font-size: .72rem; padding: .35rem .7rem; }

    /* Hero odds marquee — smaller pills */
    .g-hero3__odd { font-size: .7rem; padding: .3rem .65rem; }
    .g-hero3__odd b { font-size: .7rem; }

    /* Tap-target safety: ensure all primary CTAs are at least 44px tall */
    .g-btn, .px-btn { min-height: 44px; }

    /* ----- Center alignment for ALL split / content text columns on mobile.
       Buttons, eyebrows and titles centre; lists keep left text inside a
       centered container so the bullets remain readable. ----- */
    .g-split > div,
    .g-split > .g-reveal,
    .g-content__prose,
    .g-section__head { text-align: center !important; }

    .g-split h2,
    .g-split h3,
    .g-content__prose h2,
    .g-content__prose h3 { text-align: center !important; }

    .g-content__prose h3 { justify-content: center; }
    .g-content__prose p  { text-align: center; }

    .g-split .g-section__eyebrow,
    .g-content__prose .g-section__eyebrow {
        display: inline-block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Bullet & ordered lists — fully centred on mobile: icon on top, text
       centred below, list centered in container. */
    .g-split__bullets,
    .g-content__prose ul,
    .g-content__prose ol {
        display: block !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 360px;
        padding-left: 0 !important;
    }
    .g-split__bullets li {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .35rem;
        padding: .55rem 0 !important;
    }
    .g-split__bullets li i {
        margin-top: 0;
        flex-shrink: 0;
    }
    .g-split__bullets li > div {
        text-align: center;
    }
    .g-content__prose ul li {
        text-align: center;
        padding-left: 0 !important;
    }
    .g-content__prose ul li::before {
        position: relative;
        display: inline-block;
        margin-right: .45rem;
        top: -2px;
        left: auto !important;
    }

    /* Buttons: centre via auto margins (works even when inside a text-align:left container). */
    .g-split > div .g-btn,
    .g-split > div .px-btn,
    .g-content__prose .g-btn,
    .g-content__prose .px-btn,
    .g-section .g-btn,
    .g-section .px-btn {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Quote blocks: centre on mobile */
    blockquote { text-align: center !important; border-left: 0 !important; border-top: 2px solid rgba(168,85,247,0.55) !important; padding: .8rem 0 0 !important; }
}

/* Ultra-narrow phones (≤ 380px) */
@media (max-width: 380px) {
    .g-hero3__chip { padding: .45rem .6rem; }
    .g-hero3__chip strong { font-size: .75rem; }
    .g-cities { grid-template-columns: repeat(2, 1fr); }
    .g-markets { grid-template-columns: 1fr; }
    .g-socials { grid-template-columns: 1fr; }
}

/* -------- 22b. Floating left-bottom WhatsApp call button -------- */
.floating-whatsapp-call {
    position: fixed;
    left: 15px;
    bottom: 15px;
    z-index: 999999;
    display: block;
    line-height: 0; /* avoid extra space below the inline image */
}
.floating-whatsapp-call img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    transition: transform .3s ease, box-shadow .3s ease;
    display: block;
}
.floating-whatsapp-call:hover img {
    transform: scale(1.1);
    box-shadow: 0 8px 22px rgba(37,211,102,0.45);
}

@media (max-width: 768px) {
    .floating-whatsapp-call {
        left: 10px;
        bottom: 10px;
    }
    .floating-whatsapp-call img {
        width: 55px;
        height: 55px;
    }
}

/* When the sticky mobile bottom bar is visible (≤720px), lift the FAB
   above the bar so they don't stack on the same row of pixels. */
@media (max-width: 720px) {
    .floating-whatsapp-call { bottom: 80px; }
}

/* -------- 22c. Sticky mobile bottom CTA bar — only on phones --------
   A persistent "Claim ৳20K" tap target so the conversion is one thumb away
   no matter where the user is in the page. Hidden on tablets+. */
.g-mobile-cta {
    position: fixed;
    inset: auto 12px 12px 12px;
    z-index: 75;
    display: none;
    gap: .5rem;
    padding: .55rem;
    border-radius: 16px;
    background: rgba(8,9,22,0.88);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 14px 36px rgba(0,0,0,0.55), 0 0 0 1px rgba(168,85,247,0.20);
    transform: translateY(120%);
    transition: transform .45s var(--g-ease-out);
}
.g-mobile-cta.is-show { transform: translateY(0); }
.g-mobile-cta a {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .75rem .9rem;
    border-radius: 11px;
    font-family: var(--g-font-body);
    font-weight: 600;
    font-size: .88rem;
    letter-spacing: -0.005em;
    text-decoration: none !important;
    min-height: 44px;
    line-height: 1;
    transition: filter .25s, transform .25s;
}
.g-mobile-cta a.g-mobile-cta__primary {
    background: var(--g-grad-aurora);
    color: #fff;
    box-shadow: 0 8px 18px rgba(168,85,247,0.45);
}
.g-mobile-cta a.g-mobile-cta__primary:hover { filter: brightness(1.08); color: #fff; }
.g-mobile-cta a.g-mobile-cta__chat {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.16);
    color: #fff;
    flex: 0 0 auto;
    width: 44px;
    padding: 0;
}
.g-mobile-cta a.g-mobile-cta__chat:hover { background: rgba(37,211,102,0.18); border-color: rgba(37,211,102,0.50); color: #4ee398; }

@media (max-width: 720px) {
    .g-mobile-cta { display: flex; }
    /* Add bottom padding on the page so the sticky bar doesn't cover the
       footer signature at the very bottom of the page. */
    body { padding-bottom: 70px; }
}

/* -------- 23. Selection / scrollbar polish -------- */
::selection { background: rgba(168,85,247,.45); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--g-bg-0); }
::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.45); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(168,85,247,0.75); }

/* -------- 18. Hide the noisy legacy decorative scenes that don't belong in
   the new design. We keep the markup so admins don't lose data. -------- */
.cs-slot, .cs-crown, .cs-chip, .cs-coins, .cs-dice, .cs-spark { display: none !important; }
.has-css-scene .css-scene { display: none !important; }