
/* =========================================================
   WAK GAMING HOMEPAGE
   Template: WG Homepage
========================================================= */

:root{

    --wg-orange:#FFA726;
    --wg-orange-dark:#F5900B;
    --wg-orange-light:#FFB84D;

    --wg-dark:#12121A;
    --wg-dark-soft:#1E1E2A;
    --wg-dark-light:#2A2A3A;

    --wg-text:#1B1B25;
    --wg-muted:#6B6B7B;
    --wg-muted-light:#9B9BAB;

    --wg-white:#FFFFFF;

    --wg-soft:#F7F7FA;
    --wg-soft-2:#FAFBFC;

    --wg-border:#ECECF2;

    --wg-radius:14px;

    --wg-shadow:
        0 8px 24px rgba(18,18,26,.08);

    --wg-shadow-hover:
        0 16px 36px rgba(18,18,26,.14);

    --wg-max:1180px;

    --wg-transition:
        all .3s cubic-bezier(.4,0,.2,1);
}


/* =========================================================
   BASE
========================================================= */

#wg-home{
    font-family:
        Poppins,
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    color:var(--wg-text);

    background:#fff;

    overflow:hidden;
}

#wg-home *,
#wg-home *::before,
#wg-home *::after{
    box-sizing:border-box;
}

#wg-home a{
    text-decoration:none;
}

#wg-home img{
    max-width:100%;
    display:block;
}

.wg-home-container{
    width:100%;
    max-width:var(--wg-max);

    margin:0 auto;

    padding-left:24px;
    padding-right:24px;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes wgHomeFadeUp{

    from{
        opacity:0;
        transform:translateY(25px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes wgHomeFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

}


/* =========================================================
   BUTTONS
========================================================= */

.wg-home-btn{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:46px;

    padding:0 22px;

    border-radius:10px;

    font-size:14px;

    font-weight:700;

    transition:var(--wg-transition);

    cursor:pointer;
}

.wg-home-btn-primary{

    background:
        linear-gradient(
            135deg,
            var(--wg-orange),
            var(--wg-orange-dark)
        );

    color:#12121A !important;

    box-shadow:
        0 5px 16px rgba(255,167,38,.28);
}

.wg-home-btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:
        0 10px 25px rgba(255,167,38,.4);
}

.wg-home-btn-secondary{

    background:#fff;

    color:var(--wg-text) !important;

    border:1px solid var(--wg-border);
}

.wg-home-btn-secondary:hover{

    border-color:var(--wg-orange);

    color:var(--wg-orange-dark) !important;

    transform:translateY(-3px);

    box-shadow:var(--wg-shadow);
}

.wg-home-btn-dark{

    background:#fff;

    color:var(--wg-text) !important;

    border:1px solid rgba(255,255,255,.2);
}


/* =========================================================
   HERO
========================================================= */

.wg-home-hero{

    position:relative;

    padding:64px 0 48px;

    background:

        radial-gradient(
            circle at 80% 40%,
            rgba(255,167,38,.13),
            transparent 32%
        ),

        linear-gradient(
            180deg,
            #FFF7EC 0%,
            #FFFFFF 100%
        );
}

.wg-home-hero-grid{

    display:grid;

    grid-template-columns:
        1.05fr
        .95fr;

    align-items:center;

    gap:45px;
}

.wg-home-hero-content{

    animation:
        wgHomeFadeUp .7s ease both;
}

.wg-home-badge{

    display:inline-flex;

    align-items:center;

    gap:7px;

    background:
        rgba(255,167,38,.12);

    border:
        1px solid rgba(255,167,38,.2);

    color:
        var(--wg-orange-dark);

    border-radius:999px;

    padding:8px 15px;

    font-size:12px;

    font-weight:700;

    margin-bottom:18px;
}

.wg-home-badge span{
    font-size:15px;
}

.wg-home-hero h1{

    margin:0 0 18px;

    font-size:48px;

    line-height:1.12;

    letter-spacing:-1px;

    font-weight:800;
}

.wg-home-hero h1 span{

    display:block;

    background:
        linear-gradient(
            135deg,
            var(--wg-orange),
            var(--wg-orange-dark)
        );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;
}

.wg-home-hero-content > p{

    max-width:525px;

    margin:0 0 26px;

    color:var(--wg-muted);

    font-size:16px;

    line-height:1.7;
}

.wg-home-hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:12px;
}

.wg-home-hero-points{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:24px;

    color:var(--wg-muted);

    font-size:11px;
}

.wg-home-hero-points span{

    display:flex;

    align-items:center;

    gap:5px;
}

.wg-home-hero-points b{

    color:var(--wg-orange-dark);

    font-size:14px;
}

.wg-home-hero-visual{

    position:relative;

    display:flex;

    justify-content:center;

    animation:
        wgHomeFadeUp .8s ease .15s both;
}

.wg-home-hero-visual img{

    width:100%;

    max-width:540px;

    position:relative;

    z-index:2;

    animation:
        wgHomeFloat 5s ease-in-out infinite;

    filter:
        drop-shadow(
            0 25px 40px rgba(18,18,26,.13)
        );
}

.wg-home-hero-glow{

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,167,38,.18),
            transparent 70%
        );

    z-index:1;
}


/* =========================================================
   TRUST
========================================================= */

.wg-home-trust{

    background:#fff;

    border-top:1px solid var(--wg-border);

    border-bottom:1px solid var(--wg-border);

    padding:24px 0;
}

.wg-home-trust-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:20px;
}

.wg-home-trust-item{

    display:flex;

    align-items:center;

    gap:11px;
}

.wg-home-trust-icon{

    width:43px;
    height:43px;

    flex-shrink:0;

    display:flex;

    align-items:center;
    justify-content:center;

    background:
        rgba(255,167,38,.12);

    border-radius:11px;

    font-size:19px;
}

.wg-home-trust-item strong{

    display:block;

    font-size:13px;

    font-weight:700;
}

.wg-home-trust-item small{

    display:block;

    color:var(--wg-muted);

    font-size:10px;

    margin-top:2px;
}


/* =========================================================
   STATS
========================================================= */

.wg-home-stats{

    background:
        linear-gradient(
            135deg,
            var(--wg-dark),
            var(--wg-dark-light)
        );

    padding:18px 0;
}

.wg-home-stats-grid{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:35px;
}

.wg-home-stat{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;
}

.wg-home-stat > span{

    color:var(--wg-orange);

    font-size:20px;
}

.wg-home-stat strong{

    display:block;

    font-size:15px;
}

.wg-home-stat small{

    display:block;

    color:rgba(255,255,255,.6);

    font-size:10px;
}

.wg-home-stat-divider{

    width:1px;

    height:30px;

    background:
        rgba(255,255,255,.15);
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.wg-home-section-head{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:25px;

    margin-bottom:35px;
}

.wg-home-section-label{

    display:block;

    color:var(--wg-orange-dark);

    font-size:10px;

    font-weight:800;

    letter-spacing:1.5px;

    margin-bottom:7px;
}

.wg-home-section-head h2{

    margin:0 0 7px;

    font-size:30px;

    line-height:1.2;

    font-weight:800;
}

.wg-home-section-head h2 span{

    color:var(--wg-orange-dark);
}

.wg-home-section-head p{

    margin:0;

    color:var(--wg-muted);

    font-size:13px;
}

.wg-home-centered{

    justify-content:center;

    text-align:center;
}

.wg-home-view-all{

    color:var(--wg-orange-dark);

    font-size:13px;

    font-weight:700;

    white-space:nowrap;
}

.wg-home-view-all:hover{
    text-decoration:underline;
}


/* =========================================================
   GAMES
========================================================= */

.wg-home-games{

    padding:65px 0;

    background:var(--wg-soft);
}

.wg-home-game-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:22px;
}

.wg-home-game-card{

    background:#fff;

    border-radius:var(--wg-radius);

    overflow:hidden;

    box-shadow:var(--wg-shadow);

    transition:var(--wg-transition);

    display:flex;

    flex-direction:column;

    position:relative;
}

.wg-home-game-card:hover{

    transform:translateY(-7px);

    box-shadow:var(--wg-shadow-hover);
}

.wg-home-game-image{

    position:relative;

    aspect-ratio:1/1;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #F5F5F5,
            #E9E9E9
        );
}

.wg-home-game-image img{

    width:100%;
    height:100%;

    object-fit:contain;

    padding:12px;

    transition:.35s ease;
}

.wg-home-game-card:hover
.wg-home-game-image img{

    transform:scale(1.07);
}

.wg-home-game-tag{

    position:absolute;

    top:11px;
    left:11px;

    z-index:3;

    background:var(--wg-orange);

    color:#12121A;

    padding:5px 9px;

    border-radius:999px;

    font-size:9px;

    font-weight:800;
}

.wg-home-game-content{

    padding:15px;

    display:flex;

    flex-direction:column;

    flex:1;
}

.wg-home-game-content h3{

    margin:0 0 4px;

    font-size:15px;

    font-weight:700;

    line-height:1.4;
}

.wg-home-game-content p{

    margin:0 0 14px;

    color:var(--wg-muted);

    font-size:11px;
}

.wg-home-game-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:40px;

    width:100%;

    border-radius:9px;

    background:
        linear-gradient(
            135deg,
            var(--wg-orange),
            var(--wg-orange-dark)
        );

    color:#12121A !important;

    font-size:12px;

    font-weight:700;

    transition:.3s ease;

    margin-top:auto;
}

.wg-home-game-btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 6px 16px rgba(255,167,38,.3);
}

.wg-home-games-bottom{

    text-align:center;

    margin-top:30px;
}


/* =========================================================
   WHY
========================================================= */

.wg-home-why{

    padding:65px 0;

    background:#fff;
}

.wg-home-why-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:22px;
}

.wg-home-why-card{

    border:1px solid var(--wg-border);

    border-radius:var(--wg-radius);

    padding:25px 22px;

    box-shadow:var(--wg-shadow);

    transition:var(--wg-transition);

    background:#fff;
}

.wg-home-why-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--wg-shadow-hover);
}

.wg-home-why-icon{

    width:48px;
    height:48px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:
        rgba(255,167,38,.12);

    font-size:21px;

    margin-bottom:15px;
}

.wg-home-why-card h3{

    margin:0 0 7px;

    font-size:16px;

    font-weight:700;
}

.wg-home-why-card p{

    margin:0;

    color:var(--wg-muted);

    font-size:12px;

    line-height:1.65;
}


/* =========================================================
   PAYMENT
========================================================= */

.wg-home-payment{

    padding:50px 0;

    background:var(--wg-soft);

    border-top:1px solid var(--wg-border);

    border-bottom:1px solid var(--wg-border);
}

.wg-home-payment-head{

    text-align:center;

    margin-bottom:25px;
}

.wg-home-payment-head h2{

    margin:0 0 7px;

    font-size:25px;

    font-weight:800;
}

.wg-home-payment-head h2 span{

    color:var(--wg-orange-dark);
}

.wg-home-payment-head p{

    margin:0;

    color:var(--wg-muted);

    font-size:13px;
}

.wg-home-payment-card{

    max-width:950px;

    margin:auto;

    background:#fff;

    border:1px solid var(--wg-border);

    border-radius:var(--wg-radius);

    padding:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    box-shadow:var(--wg-shadow);
}

.wg-home-payment-method{

    display:flex;

    align-items:center;

    gap:8px;

    padding:11px 17px;

    border:1px solid var(--wg-border);

    border-radius:10px;

    font-size:12px;

    font-weight:700;

    transition:.3s ease;
}

.wg-home-payment-method span{
    font-size:16px;
}

.wg-home-payment-method:hover{

    border-color:var(--wg-orange);

    transform:translateY(-2px);
}


/* =========================================================
   HOW IT WORKS
========================================================= */

.wg-home-how{

    padding:65px 0;

    background:
        linear-gradient(
            135deg,
            var(--wg-soft),
            var(--wg-soft-2)
        );
}

.wg-home-how-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:20px;
}

.wg-home-step{

    position:relative;

    background:#fff;

    border-radius:var(--wg-radius);

    padding:25px 20px;

    box-shadow:var(--wg-shadow);

    transition:var(--wg-transition);
}

.wg-home-step:hover{

    transform:translateY(-6px);

    box-shadow:var(--wg-shadow-hover);
}

.wg-home-step-number{

    position:absolute;

    right:17px;
    top:15px;

    color:#D7D7DF;

    font-size:11px;

    font-weight:800;
}

.wg-home-step-icon{

    width:46px;
    height:46px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:
        rgba(255,167,38,.12);

    font-size:20px;

    margin-bottom:15px;
}

.wg-home-step h3{

    margin:0 0 7px;

    font-size:15px;

    font-weight:700;
}

.wg-home-step p{

    margin:0;

    color:var(--wg-muted);

    font-size:12px;

    line-height:1.6;
}


/* =========================================================
   REVIEWS
========================================================= */

.wg-home-reviews{

    padding:65px 0;

    background:#fff;
}

.wg-home-review-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:22px;
}

.wg-home-review{

    background:var(--wg-soft);

    border-radius:var(--wg-radius);

    padding:23px;

    box-shadow:
        0 2px 8px rgba(18,18,26,.04);

    transition:.3s ease;
}

.wg-home-review:hover{

    transform:translateY(-5px);

    box-shadow:var(--wg-shadow);
}

.wg-home-review-user{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:13px;
}

.wg-home-avatar{

    width:41px;
    height:41px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            var(--wg-orange),
            var(--wg-orange-dark)
        );

    color:#12121A;

    font-size:12px;

    font-weight:800;
}

.wg-home-review-user strong{

    display:block;

    font-size:13px;
}

.wg-home-review-user small{

    display:block;

    color:var(--wg-muted);

    font-size:10px;
}

.wg-home-stars{

    color:#FFC107;

    font-size:12px;

    letter-spacing:1px;

    margin-bottom:8px;
}

.wg-home-review p{

    margin:0;

    color:var(--wg-muted);

    font-size:12px;

    line-height:1.65;

    font-style:italic;
}


/* =========================================================
   FINAL CTA
========================================================= */

.wg-home-final{

    position:relative;

    padding:65px 0;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(255,167,38,.12),
            transparent 25%
        ),

        linear-gradient(
            135deg,
            var(--wg-dark),
            var(--wg-dark-light)
        );
}

.wg-home-final-content{

    position:relative;

    z-index:2;

    text-align:center;
}

.wg-home-final h2{

    color:#fff;

    margin:0 0 10px;

    font-size:31px;

    font-weight:800;
}

.wg-home-final h2 span{

    color:var(--wg-orange);
}

.wg-home-final p{

    max-width:580px;

    margin:0 auto 25px;

    color:
        rgba(255,255,255,.68);

    font-size:13px;

    line-height:1.6;
}

.wg-home-final-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1050px){

    .wg-home-game-grid{
        grid-template-columns:
            repeat(3,1fr);
    }

    .wg-home-trust-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    .wg-home-hero h1{
        font-size:42px;
    }

    .wg-home-how-grid{
        grid-template-columns:
            repeat(2,1fr);
    }
}


@media(max-width:850px){

    .wg-home-hero-grid{

        grid-template-columns:1fr;

        text-align:center;
    }

    .wg-home-hero-content > p{

        margin-left:auto;
        margin-right:auto;
    }

    .wg-home-hero-buttons{

        justify-content:center;
    }

    .wg-home-hero-points{

        justify-content:center;
    }

    .wg-home-hero-visual{

        order:-1;
    }

    .wg-home-hero-visual img{

        max-width:420px;
    }

    .wg-home-why-grid{

        grid-template-columns:
            repeat(2,1fr);
    }

    .wg-home-review-grid{

        grid-template-columns:
            repeat(2,1fr);
    }

    .wg-home-section-head{

        align-items:center;

        text-align:center;

        flex-direction:column;
    }
}


@media(max-width:600px){

    .wg-home-container{

        padding-left:16px;
        padding-right:16px;
    }

    .wg-home-hero{

        padding:42px 0 35px;
    }

    .wg-home-hero h1{

        font-size:30px;
    }

    .wg-home-hero-content > p{

        font-size:13px;
    }

    .wg-home-hero-buttons{

        display:grid;

        grid-template-columns:
            1fr 1fr;

        width:100%;
    }

    .wg-home-hero-buttons .wg-home-btn{

        width:100%;

        padding:0 8px;

        font-size:11px;
    }

    .wg-home-hero-points{

        gap:10px;

        font-size:9px;
    }

    .wg-home-hero-visual img{

        max-width:310px;
    }

    .wg-home-trust-grid{

        grid-template-columns:
            1fr 1fr;

        gap:15px;
    }

    .wg-home-trust-icon{

        width:38px;
        height:38px;

        font-size:16px;
    }

    .wg-home-trust-item strong{

        font-size:11px;
    }

    .wg-home-trust-item small{

        font-size:9px;
    }

    .wg-home-stats-grid{

        flex-direction:column;

        gap:10px;
    }

    .wg-home-stat-divider{

        display:none;
    }

    .wg-home-stat{

        font-size:12px;
    }

    .wg-home-games,
    .wg-home-why,
    .wg-home-how,
    .wg-home-reviews{

        padding:45px 0;
    }

    .wg-home-section-head h2{

        font-size:24px;
    }

    .wg-home-game-grid{

        grid-template-columns:
            1fr 1fr;

        gap:14px;
    }

    .wg-home-game-content{

        padding:11px 10px;
    }

    .wg-home-game-content h3{

        font-size:12px;
    }

    .wg-home-game-content p{

        font-size:9px;
    }

    .wg-home-game-btn{

        min-height:37px;

        font-size:10px;
    }

    .wg-home-why-grid,
    .wg-home-how-grid,
    .wg-home-review-grid{

        grid-template-columns:1fr;
    }

    .wg-home-payment{

        padding:42px 0;
    }

    .wg-home-payment-method{

        padding:9px 12px;

        font-size:10px;
    }

    .wg-home-final{

        padding:48px 0;
    }

    .wg-home-final h2{

        font-size:24px;
    }

    .wg-home-final-buttons{

        display:grid;

        grid-template-columns:
            1fr 1fr;
    }

    .wg-home-final-buttons .wg-home-btn{

        padding:0 8px;

        font-size:11px;
    }

}


@media(max-width:380px){

    .wg-home-game-grid{

        gap:10px;
    }

    .wg-home-hero h1{

        font-size:27px;
    }

}



/* =========================================================
   ENTITY / ABOUT SECTION
========================================================= */

.wg-home-entity{

    padding:65px 0;

    background:#fff;

    border-top:1px solid var(--wg-border);

    border-bottom:1px solid var(--wg-border);
}

.wg-home-entity-content{

    max-width:850px;

    margin:0 auto;

    padding:30px;

    background:var(--wg-soft);

    border:1px solid var(--wg-border);

    border-radius:var(--wg-radius);

    box-shadow:var(--wg-shadow);
}

.wg-home-entity-content p{

    margin:0 0 17px;

    color:var(--wg-muted);

    font-size:13px;

    line-height:1.8;
}

.wg-home-entity-content p:last-child{

    margin-bottom:0;
}

.wg-home-entity-content strong{

    color:var(--wg-text);

    font-weight:800;
}

.wg-home-entity-content a{

    color:var(--wg-orange-dark);

    font-weight:700;
}

.wg-home-entity-content a:hover{

    text-decoration:underline;
}


/* =========================================================
   FAQ
========================================================= */

.wg-home-faq{

    padding:65px 0;

    background:var(--wg-soft);
}

.wg-home-faq-list{

    max-width:850px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:12px;
}

.wg-home-faq-item{

    background:#fff;

    border:1px solid var(--wg-border);

    border-radius:12px;

    box-shadow:
        0 3px 12px rgba(18,18,26,.04);

    overflow:hidden;

    transition:.25s ease;
}

.wg-home-faq-item:hover{

    border-color:
        rgba(255,167,38,.4);
}

.wg-home-faq-item summary{

    position:relative;

    cursor:pointer;

    list-style:none;

    padding:19px 48px 19px 20px;

    color:var(--wg-text);

    font-size:14px;

    font-weight:700;
}

.wg-home-faq-item summary::-webkit-details-marker{

    display:none;
}

.wg-home-faq-item summary::after{

    content:"+";

    position:absolute;

    right:20px;

    top:50%;

    transform:translateY(-50%);

    color:var(--wg-orange-dark);

    font-size:22px;

    font-weight:400;
}

.wg-home-faq-item[open] summary::after{

    content:"−";
}

.wg-home-faq-item > div{

    padding:0 20px 20px;
}

.wg-home-faq-item p{

    margin:0;

    color:var(--wg-muted);

    font-size:12px;

    line-height:1.75;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .wg-home-entity,
    .wg-home-faq{

        padding:45px 0;
    }

    .wg-home-entity-content{

        padding:20px 16px;
    }

    .wg-home-entity-content p{

        font-size:12px;

        line-height:1.7;
    }

    .wg-home-faq-item summary{

        padding:16px 43px 16px 16px;

        font-size:12px;
    }

    .wg-home-faq-item > div{

        padding:0 16px 17px;
    }

    .wg-home-faq-item p{

        font-size:11px;
    }

}




/* =========================================================
   WAK GAMING — ECOSYSTEM HOMEPAGE
========================================================= */


/* =========================================================
   PLATFORM OVERVIEW
========================================================= */

.wg-home-overview{

    padding:70px 0;

    background:#fff;

}


.wg-home-overview-grid{

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:18px;

}


.wg-home-overview-card{

    position:relative;

    padding:28px 24px;

    background:#fff;

    border:1px solid var(--wg-border);

    border-radius:var(--wg-radius);

    box-shadow:var(--wg-shadow);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}


.wg-home-overview-card:hover{

    transform:translateY(-5px);

    border-color:
        rgba(251,144,2,.35);

    box-shadow:
        0 16px 38px rgba(20,25,40,.09);

}


.wg-home-overview-primary{

    border-color:
        rgba(251,144,2,.45);

    background:
        linear-gradient(
            145deg,
            #fff,
            #fff8ef
        );

}


.wg-home-overview-icon{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

    border-radius:14px;

    background:
        rgba(251,144,2,.1);

    font-size:24px;

}


.wg-home-card-label{

    display:block;

    margin-bottom:7px;

    color:var(--wg-orange-dark);

    font-size:9px;

    font-weight:900;

    letter-spacing:.12em;

}


.wg-home-overview-card h3{

    margin:0 0 11px;

    color:var(--wg-text);

    font-size:19px;

    font-weight:850;

}


.wg-home-overview-card p{

    margin:0 0 20px;

    color:var(--wg-muted);

    font-size:12px;

    line-height:1.7;

}


.wg-home-card-link{

    color:var(--wg-orange-dark);

    font-size:11px;

    font-weight:800;

    text-decoration:none;

}


.wg-home-card-link:hover{

    text-decoration:underline;

}



/* =========================================================
   APK
========================================================= */

.wg-home-apk{

    padding:75px 0;

    background:
        linear-gradient(
            135deg,
            #101116 0%,
            #191b22 100%
        );

}


.wg-home-apk-grid{

    display:grid;

    grid-template-columns:
        1.2fr .8fr;

    gap:45px;

    align-items:center;

}


.wg-home-apk-content{

    max-width:680px;

}


.wg-home-apk-content h2{

    margin:8px 0 18px;

    color:#fff;

    font-size:42px;

    line-height:1.1;

    letter-spacing:-.04em;

}


.wg-home-apk-content h2 span{

    color:var(--wg-orange);

}


.wg-home-apk-content p{

    max-width:680px;

    margin:0 0 15px;

    color:#aeb4c0;

    font-size:13px;

    line-height:1.8;

}


.wg-home-apk-card{

    padding:30px;

    background:
        rgba(255,255,255,.05);

    border:1px solid
        rgba(255,255,255,.1);

    border-radius:22px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.25);

}


.wg-home-apk-card-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-bottom:20px;

    margin-bottom:20px;

    border-bottom:1px solid
        rgba(255,255,255,.1);

}


.wg-home-apk-card-top span{

    color:#aeb4c0;

    font-size:10px;

    font-weight:800;

    letter-spacing:.12em;

}


.wg-home-apk-card-top strong{

    color:var(--wg-orange);

    font-size:32px;

}


.wg-home-apk-features{

    display:grid;

    gap:13px;

    color:#fff;

    font-size:12px;

}


.wg-home-apk-card > a{

    display:block;

    margin-top:24px;

    color:var(--wg-orange);

    font-size:12px;

    font-weight:800;

}



/* =========================================================
   SHOP
========================================================= */

.wg-home-shop{

    padding:70px 0;

    background:#fff;

}


.wg-home-shop-grid{

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:18px;

}


.wg-home-shop-card{

    padding:28px;

    background:var(--wg-soft);

    border:1px solid var(--wg-border);

    border-radius:var(--wg-radius);

    transition:.25s ease;

}


.wg-home-shop-card:hover{

    transform:translateY(-4px);

    box-shadow:var(--wg-shadow);

}


.wg-home-shop-icon{

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:18px;

    border-radius:15px;

    background:#fff;

    font-size:25px;

    box-shadow:
        0 6px 18px rgba(20,25,40,.06);

}


.wg-home-shop-card > span{

    color:var(--wg-orange-dark);

    font-size:9px;

    font-weight:900;

    letter-spacing:.12em;

}


.wg-home-shop-card h3{

    margin:8px 0 10px;

    color:var(--wg-text);

    font-size:18px;

}


.wg-home-shop-card p{

    margin:0 0 18px;

    color:var(--wg-muted);

    font-size:12px;

    line-height:1.7;

}


.wg-home-shop-card a{

    color:var(--wg-orange-dark);

    font-size:11px;

    font-weight:800;

}



/* =========================================================
   ACCESSORIES
========================================================= */

.wg-home-accessories{

    padding:70px 0;

    background:var(--wg-soft);

}


.wg-home-accessories-grid{

    display:grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap:45px;

    align-items:center;

}


.wg-home-accessories-intro h2{

    margin:8px 0 17px;

    color:var(--wg-text);

    font-size:40px;

    line-height:1.1;

    letter-spacing:-.04em;

}


.wg-home-accessories-intro h2 span{

    color:var(--wg-orange-dark);

}


.wg-home-accessories-intro p{

    max-width:520px;

    margin:0 0 23px;

    color:var(--wg-muted);

    font-size:13px;

    line-height:1.8;

}


.wg-home-accessory-items{

    display:grid;

    gap:13px;

}


.wg-home-accessory-item{

    display:flex;

    gap:18px;

    align-items:center;

    padding:20px;

    background:#fff;

    border:1px solid var(--wg-border);

    border-radius:15px;

    box-shadow:
        0 5px 18px rgba(20,25,40,.035);

}


.wg-home-accessory-icon{

    flex:0 0 48px;

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:13px;

    background:
        rgba(251,144,2,.09);

    font-size:22px;

}


.wg-home-accessory-item h3{

    margin:0 0 5px;

    color:var(--wg-text);

    font-size:14px;

}


.wg-home-accessory-item p{

    margin:0;

    color:var(--wg-muted);

    font-size:11px;

    line-height:1.55;

}



/* =========================================================
   BRANDS
========================================================= */

.wg-home-brands{

    padding:75px 0;

    background:#fff;

}


.wg-home-brands-grid{

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:18px;

}


.wg-home-brand-card{

    position:relative;

    padding:30px;

    min-height:290px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #fafbfc
        );

    border:1px solid var(--wg-border);

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--wg-shadow);

    transition:.25s ease;

}


.wg-home-brand-card:hover{

    transform:translateY(-5px);

    border-color:
        rgba(251,144,2,.35);

}


.wg-home-brand-number{

    position:absolute;

    top:22px;

    right:25px;

    color:#dfe3e9;

    font-size:36px;

    font-weight:900;

}


.wg-home-brand-type{

    display:block;

    margin-bottom:12px;

    color:var(--wg-orange-dark);

    font-size:9px;

    font-weight:900;

    letter-spacing:.12em;

}


.wg-home-brand-card h3{

    position:relative;

    margin:0 0 13px;

    color:var(--wg-text);

    font-size:23px;

}


.wg-home-brand-card p{

    position:relative;

    margin:0 0 25px;

    color:var(--wg-muted);

    font-size:12px;

    line-height:1.75;

}


.wg-home-brand-card a{

    position:relative;

    color:var(--wg-orange-dark);

    font-size:11px;

    font-weight:850;

}


.wg-home-brands-cta{

    display:flex;

    justify-content:center;

    margin-top:30px;

}



/* =========================================================
   FAQ
========================================================= */

.wg-home-faq{

    padding:70px 0;

    background:var(--wg-soft);

}


.wg-home-faq-list{

    max-width:850px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:11px;

}


.wg-home-faq-item{

    background:#fff;

    border:1px solid var(--wg-border);

    border-radius:13px;

    overflow:hidden;

    box-shadow:
        0 4px 15px rgba(20,25,40,.035);

}


.wg-home-faq-item summary{

    position:relative;

    cursor:pointer;

    list-style:none;

    padding:19px 50px 19px 20px;

    color:var(--wg-text);

    font-size:13px;

    font-weight:800;

}


.wg-home-faq-item summary::-webkit-details-marker{

    display:none;

}


.wg-home-faq-item summary::after{

    content:"+";

    position:absolute;

    right:20px;

    top:50%;

    transform:translateY(-50%);

    color:var(--wg-orange-dark);

    font-size:21px;

    font-weight:400;

}


.wg-home-faq-item[open] summary::after{

    content:"−";

}


.wg-home-faq-item > div{

    padding:0 20px 20px;

}


.wg-home-faq-item p{

    margin:0;

    color:var(--wg-muted);

    font-size:12px;

    line-height:1.75;

}



/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

    .wg-home-overview-grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }


    .wg-home-apk-grid,
    .wg-home-accessories-grid{

        grid-template-columns:1fr;

    }


    .wg-home-brands-grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }

}


@media(max-width:700px){

    .wg-home-overview-grid,
    .wg-home-shop-grid,
    .wg-home-brands-grid{

        grid-template-columns:1fr;

    }


    .wg-home-apk-content h2,
    .wg-home-accessories-intro h2{

        font-size:31px;

    }


    .wg-home-apk,
    .wg-home-shop,
    .wg-home-accessories,
    .wg-home-brands,
    .wg-home-faq{

        padding:50px 0;

    }


    .wg-home-overview{

        padding:50px 0;

    }


    .wg-home-overview-card{

        padding:23px 20px;

    }


    .wg-home-apk-card{

        padding:22px;

    }


    .wg-home-brand-card{

        min-height:auto;

        padding:25px;

    }


    .wg-home-accessory-item{

        align-items:flex-start;

    }

}

