.wg-home {
        --wg-border: rgba(148, 163, 184, .16);
        --wg-border-strong: rgba(96, 165, 250, .28);
        --wg-muted: #94a3b8;
        --wg-blue: #60a5fa;
        --wg-blue-strong: #3b82f6;
        --wg-green: #34d399;
        --wg-yellow: #fbbf24;
    }

    .wg-home * {
        box-sizing: border-box;
    }

    /* ============================================================
       Hero
    ============================================================ */

    .wg-home-hero {
        position: relative;
        isolation: isolate;
        min-height: 700px;
        display: flex;
        align-items: center;
        overflow: hidden;
        background: #071122;
        color: #f8fbff;
    }

    .wg-home-hero-picture {
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    .wg-home-hero-picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        opacity: .72;
        transform: scale(1.025);
    }

    .wg-home-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
            radial-gradient(
                circle at center,
                rgba(14, 165, 233, .16),
                transparent 42%
            ),
            linear-gradient(
                180deg,
                rgba(5, 10, 30, .76) 0%,
                rgba(5, 10, 30, .56) 43%,
                rgba(5, 10, 30, .9) 100%
            );
    }

    .wg-home-hero-inner {
        position: relative;
        z-index: 2;
        width: 100%;
        padding: 5rem 0;
        text-align: center;
    }

    .wg-home-hero-copy {
        max-width: 900px;
        margin: 0 auto;
    }

    .wg-home-eyebrow {
        display: inline-flex;
        align-items: center;
        padding: .42rem .78rem;
        border: 1px solid rgba(129, 140, 248, .24);
        border-radius: 999px;
        background: rgba(45, 62, 160, .38);
        color: #b9c6ff;
        font-size: .76rem;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .wg-home-hero h1 {
        max-width: 850px;
        margin: 1rem auto 1.3rem;
        font-size: clamp(2.7rem, 6vw, 5rem);
        line-height: 1.03;
        letter-spacing: -.05em;
        background: linear-gradient(
            135deg,
            #f8fbff,
            #9ae7ff 50%,
            #38bdf8
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .wg-home-hero-copy > p {
        max-width: 720px;
        margin: 0 auto;
        color: rgba(226, 238, 255, .92);
        font-size: 1.08rem;
        line-height: 1.7;
    }

    .wg-home-actions {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: .7rem;
        margin-top: 1.8rem;
    }

    .wg-home-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: .7rem 1.1rem;
        border: 1px solid transparent;
        border-radius: 11px;
        font-weight: 800;
        text-decoration: none;
        cursor: pointer;
    }

    .wg-home-btn-primary {
        background: linear-gradient(
            135deg,
            var(--primary),
            var(--accent)
        );
        color: #fff;
        box-shadow: 0 14px 35px rgba(14, 165, 233, .25);
    }

    .wg-home-btn-secondary {
        border-color: rgba(255, 255, 255, .17);
        background: rgba(15, 23, 42, .75);
        color: #fff;
    }

    .wg-home-btn-secondary:hover {
        background: rgba(30, 41, 59, .95);
    }

    .wg-home-game-pills {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: .45rem;
        max-width: 850px;
        margin: 1.4rem auto 0;
    }

    .wg-home-game-pills span {
        padding: .42rem .68rem;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 999px;
        background: rgba(15, 23, 42, .52);
        color: #dcecff;
        backdrop-filter: blur(10px);
        font-size: .76rem;
        font-weight: 700;
    }

    /* ============================================================
       Shared section
    ============================================================ */

    .wg-home-section {
        padding: 4.3rem 0;
    }

    .wg-home-section-soft {
        background:
            linear-gradient(
                180deg,
                transparent,
                rgba(59, 130, 246, .025),
                transparent
            );
    }

    .wg-home-section-head {
        max-width: 760px;
        margin-bottom: 1.8rem;
    }

    .wg-home-section-head--center {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .wg-home-section-head h2 {
        margin: .4rem 0 .6rem;
        font-size: clamp(1.9rem, 4vw, 2.8rem);
        letter-spacing: -.035em;
    }

    .wg-home-section-head p {
        margin: 0;
        color: var(--wg-muted);
        line-height: 1.65;
    }

    /* ============================================================
       Setup cards
    ============================================================ */

    .wg-home-setup-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .wg-home-setup-card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 390px;
        padding: 1.8rem;
        overflow: hidden;
        border: 1px solid var(--wg-border);
        border-radius: 24px;
        background:
            radial-gradient(
                circle at top right,
                rgba(59, 130, 246, .12),
                transparent 38%
            ),
            rgba(15, 23, 42, .32);
    }

    .wg-home-setup-card--cloud {
        border-color: rgba(96, 165, 250, .25);
        background:
            radial-gradient(
                circle at top right,
                rgba(59, 130, 246, .16),
                transparent 40%
            ),
            rgba(15, 23, 42, .36);
    }

    .wg-home-setup-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.2rem;
    }

    .wg-home-setup-icon {
        width: 58px;
        height: 58px;
        display: grid;
        place-items: center;
        border: 1px solid var(--wg-border);
        border-radius: 18px;
        background: rgba(59, 130, 246, .1);
        font-size: 1.65rem;
    }

    .wg-home-setup-badge {
        padding: .35rem .65rem;
        border: 1px solid var(--wg-border);
        border-radius: 999px;
        color: var(--wg-muted);
        font-size: .72rem;
        font-weight: 800;
    }

    .wg-home-setup-card h3 {
        margin: 0 0 .5rem;
        font-size: 1.55rem;
    }

    .wg-home-setup-card > p {
        margin: 0;
        color: var(--wg-muted);
        line-height: 1.6;
    }

    .wg-home-best-for {
        margin-top: 1.3rem;
        padding: .95rem 1rem;
        border: 1px solid var(--wg-border);
        border-radius: 14px;
        background: rgba(15, 23, 42, .22);
    }

    .wg-home-best-for span {
        display: block;
        margin-bottom: .25rem;
        color: var(--wg-blue);
        font-size: .7rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    .wg-home-best-for strong {
        line-height: 1.4;
    }

    .wg-home-check-list {
        display: grid;
        gap: .55rem;
        margin: 1.25rem 0;
        padding: 0;
        list-style: none;
    }

    .wg-home-check-list li {
        position: relative;
        padding-left: 1.45rem;
        color: var(--wg-muted);
        font-size: .88rem;
    }

    .wg-home-check-list li::before {
        content: "✓";
        position: absolute;
        left: 0;
        color: var(--wg-green);
        font-weight: 900;
    }

    .wg-home-setup-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .65rem;
        margin-top: auto;
        padding-top: .7rem;
    }

    /* ============================================================
       Game carousel
    ============================================================ */

    .wg-games-carousel-wrap {
        position: relative;
        margin-top: 1.8rem;
    }

    .wg-games-carousel {
        display: flex;
        gap: 1.2rem;
        overflow-x: auto;
        padding: .2rem .2rem .8rem;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }

    .wg-games-carousel::-webkit-scrollbar {
        display: none;
    }

    .wg-games-slide {
        flex: 0 0 calc(33.333% - .8rem);
        display: flex;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .wg-game-card {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 390px;
        padding: 1.45rem;
        overflow: hidden;
        border: 1px solid var(--wg-border);
        border-radius: 20px;
        background: rgba(15, 23, 42, .32);
    }

    .wg-game-card::after {
        content: "";
        position: absolute;
        width: 230px;
        height: 230px;
        right: -90px;
        bottom: -120px;
        border-radius: 999px;
        filter: blur(20px);
        opacity: .7;
        pointer-events: none;
    }

    .home-game-mafia::after {
        background: rgba(239, 68, 68, .16);
    }

    .home-game-grand::after {
        background: rgba(124, 58, 237, .18);
    }

    .home-game-chief::after {
        background: rgba(16, 185, 129, .16);
    }

    .home-game-dino::after {
        background: rgba(14, 165, 233, .16);
    }

    .home-game-savage::after {
        background: rgba(245, 158, 11, .16);
    }

    .home-game-last-rise::after {
        background: rgba(168, 85, 247, .17);
    }

    .wg-game-card-inner {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .wg-game-title {
        display: flex;
        align-items: center;
        gap: .85rem;
        margin-bottom: 1rem;
    }

    .wg-game-icon {
        width: 56px;
        height: 56px;
        flex: 0 0 56px;
        overflow: hidden;
        border-radius: 14px;
    }

    .wg-game-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .wg-game-title h3 {
        margin: 0;
        font-size: 1.15rem;
    }

    .wg-game-title small {
        display: inline-block;
        margin-top: .25rem;
        color: var(--wg-muted);
    }

    .wg-game-card p {
        margin: 0;
        color: var(--wg-muted);
        line-height: 1.55;
        font-size: .88rem;
    }

    .wg-game-tags {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        margin-top: auto;
        padding-top: 1.1rem;
    }

    .wg-game-tags span {
        padding: .35rem .55rem;
        border: 1px solid var(--wg-border);
        border-radius: 999px;
        font-size: .7rem;
    }

    .wg-game-availability {
        display: flex;
        align-items: center;
        gap: .45rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--wg-border);
        color: var(--wg-muted);
        font-size: .78rem;
    }

    .wg-game-availability strong {
        color: var(--wg-green);
    }

    .wg-game-link {
        margin-top: .8rem;
        color: #38bdf8;
        font-size: .8rem;
        font-weight: 800;
        text-decoration: none;
    }

    .wg-games-nav {
        position: absolute;
        top: 50%;
        z-index: 3;
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        transform: translateY(-50%);
        border: 1px solid var(--wg-border);
        border-radius: 999px;
        background: rgba(15, 23, 42, .9);
        color: #fff;
        cursor: pointer;
        font-size: 1.65rem;
    }

    .wg-games-nav-prev {
        left: -1.15rem;
    }

    .wg-games-nav-next {
        right: -1.15rem;
    }

    .wg-games-dots {
        display: flex;
        justify-content: center;
        gap: .45rem;
        margin-top: .8rem;
    }

    .wg-games-dots button {
        width: 9px;
        height: 9px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: rgba(148, 163, 184, .3);
        cursor: pointer;
    }

    .wg-games-dots button.active {
        width: 25px;
        background: linear-gradient(
            135deg,
            var(--primary),
            var(--accent)
        );
    }

    .wg-more-games {
        margin-top: 1.3rem;
        text-align: center;
        color: var(--wg-muted);
        font-size: .85rem;
    }

    .wg-more-games a {
        color: #38bdf8;
    }

    /* ============================================================
       Benefits
    ============================================================ */

    .wg-benefit-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }

    .wg-benefit-card {
        padding: 1.35rem;
        border: 1px solid var(--wg-border);
        border-radius: 18px;
        background: rgba(15, 23, 42, .26);
    }

    .wg-benefit-icon {
        width: 45px;
        height: 45px;
        display: grid;
        place-items: center;
        margin-bottom: .9rem;
        border: 1px solid var(--wg-border);
        border-radius: 13px;
        background: rgba(59, 130, 246, .08);
        font-size: 1.25rem;
    }

    .wg-benefit-card h3 {
        margin: 0 0 .35rem;
        font-size: 1rem;
    }

    .wg-benefit-card p {
        margin: 0;
        color: var(--wg-muted);
        line-height: 1.55;
        font-size: .84rem;
    }

    /* ============================================================
       Ecosystem
    ============================================================ */

    .wg-ecosystem-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .wg-ecosystem-card {
        position: relative;
        min-height: 360px;
        padding: 1.65rem;
        overflow: hidden;
        border: 1px solid var(--wg-border);
        border-radius: 22px;
        background:
            radial-gradient(
                circle at top right,
                rgba(59, 130, 246, .1),
                transparent 40%
            ),
            rgba(15, 23, 42, .3);
    }

    .wg-ecosystem-card--android {
        background:
            radial-gradient(
                circle at top right,
                rgba(52, 211, 153, .1),
                transparent 40%
            ),
            rgba(15, 23, 42, .3);
    }

    .wg-ecosystem-icon {
        width: 52px;
        height: 52px;
        display: grid;
        place-items: center;
        margin-bottom: 1rem;
        border: 1px solid var(--wg-border);
        border-radius: 16px;
        font-size: 1.45rem;
    }

    .wg-ecosystem-card h3 {
        margin: 0 0 .45rem;
        font-size: 1.35rem;
    }

    .wg-ecosystem-card > p {
        margin: 0;
        color: var(--wg-muted);
        line-height: 1.6;
    }

    .wg-ecosystem-list {
        display: grid;
        gap: .55rem;
        margin: 1.2rem 0;
    }

    .wg-ecosystem-list span {
        color: var(--wg-muted);
        font-size: .86rem;
    }

    .wg-ecosystem-list span::before {
        content: "✓ ";
        color: var(--wg-green);
        font-weight: 900;
    }

    .wg-ecosystem-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .65rem;
        margin-top: 1rem;
    }

    /* ============================================================
       Final CTA
    ============================================================ */

    .wg-final-cta {
        padding-bottom: 4.8rem;
    }

    .wg-final-cta-card {
        padding: 2.2rem;
        border: 1px solid var(--wg-border-strong);
        border-radius: 24px;
        text-align: center;
        background:
            radial-gradient(
                circle at top center,
                rgba(59, 130, 246, .13),
                transparent 42%
            ),
            rgba(15, 23, 42, .3);
    }

    .wg-final-cta-card h2 {
        margin: .45rem 0 .55rem;
        font-size: clamp(1.8rem, 4vw, 2.7rem);
    }

    .wg-final-cta-card p {
        max-width: 620px;
        margin: 0 auto;
        color: var(--wg-muted);
        line-height: 1.6;
    }

    /* ============================================================
       Responsive
    ============================================================ */

    @media (max-width: 900px) {
        .wg-home-setup-grid,
        .wg-ecosystem-grid {
            grid-template-columns: 1fr;
        }

        .wg-benefit-grid {
            grid-template-columns: 1fr;
        }

        .wg-games-slide {
            flex-basis: calc(50% - .6rem);
        }

        .wg-games-nav {
            display: none;
        }
    }

    @media (max-width: 640px) {
        .wg-home-hero {
            min-height: auto;
        }

        .wg-home-hero-inner {
            padding: 3.5rem 0 4rem;
        }

        .wg-home-hero-picture img {
            opacity: .65;
            transform: none;
            object-position: center top;
        }

        .wg-home-hero h1 {
            font-size: clamp(2.15rem, 10vw, 3rem);
        }

        .wg-home-hero-copy > p {
            font-size: .96rem;
            line-height: 1.6;
        }

        .wg-home-actions {
            flex-direction: column;
        }

        .wg-home-actions > * {
            width: 100%;
        }

        .wg-home-actions .wg-home-btn,
        .wg-home-actions form button {
            width: 100%;
        }

        .wg-home-section {
            padding: 3rem 0;
        }

        .wg-home-setup-card {
            min-height: 0;
            padding: 1.3rem;
            border-radius: 18px;
        }

        .wg-home-setup-actions {
            flex-direction: column;
        }

        .wg-home-setup-actions > * {
            width: 100%;
        }

        .wg-home-setup-actions .wg-home-btn {
            width: 100%;
        }

        .wg-games-slide {
            flex-basis: 100%;
        }

        .wg-game-card {
            min-height: 370px;
            padding: 1.2rem;
        }

        .wg-ecosystem-card {
            min-height: 0;
            padding: 1.3rem;
            border-radius: 18px;
        }

        .wg-ecosystem-actions {
            flex-direction: column;
        }

        .wg-ecosystem-actions .wg-home-btn {
            width: 100%;
        }

        .wg-final-cta-card {
            padding: 1.5rem 1.2rem;
            border-radius: 18px;
        }
    }