/*
============================================================
 ALLYONOLOOT.COM — GLOBAL REDESIGN
 Premium Black + White
============================================================

 Pages:
 - index.php
 - privacy-policy.php
 - contact-us.php
 - disclaimer.php

 NOT intended to redesign:
 - Includes/header.php
 - Includes/footer.php
 - app.php

 IMPORTANT:
 Replace the OLD global.css completely with this file.
============================================================
*/


/* ==========================================================
   01. GLOBAL DESIGN SYSTEM
========================================================== */

:root {

    /* BRAND */
    --brand: #111111;
    --brand-hover: #000000;
    --brand-dark: #000000;
    --brand-soft: #f4f4f4;
    --brand-soft-2: #e9e9e9;

    /* BACKGROUND */
    --page-bg: #f5f6f8;
    --page-bg-soft: #fafafa;
    --white: #ffffff;

    /* DARK */
    --dark: #111318;
    --dark-2: #181b21;
    --dark-3: #22262e;
    --dark-soft: #2c313a;

    /* TEXT */
    --text: #17191d;
    --text-secondary: #505661;
    --text-muted: #777e89;
    --text-light: #a4aab4;

    /* BORDER */
    --border: #e5e7eb;
    --border-dark: rgba(255,255,255,.09);
    --border-red: rgba(0,0,0,.20);

    /* STATUS */
    --success: #079455;
    --success-soft: #ecfdf3;

    --warning: #dc6803;
    --warning-soft: #fffaeb;

    --danger: #d92d20;
    --danger-soft: #fff1f0;

    /* SHADOW */
    --shadow-xs:
        0 2px 6px rgba(16,24,40,.04);

    --shadow-sm:
        0 5px 16px rgba(16,24,40,.06);

    --shadow-md:
        0 12px 30px rgba(16,24,40,.09);

    --shadow-lg:
        0 24px 60px rgba(16,24,40,.14);

    --shadow-red:
        0 12px 30px rgba(0,0,0,.20);

    /* RADIUS */
    --radius-sm: 10px;
    --radius-md: 15px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    /* OLD VARIABLE COMPATIBILITY */
    --surface: #ffffff;
    --surface-soft: #f8f8f9;

    --premium-dark: var(--dark);
    --premium-dark-2: var(--dark-2);
    --premium-dark-3: var(--dark-3);

    --accent: var(--brand);
    --accent-light: #333333;
    --accent-dark: var(--brand-dark);

    --gold: var(--brand);
    --gold-dark: var(--brand-dark);

    --text-main: var(--text);
    --border-premium: var(--border);

    --app-primary: var(--brand);
    --app-primary-hover: #222222;
    --app-primary-dark: var(--brand-dark);

    --app-text-dark: var(--text);
    --app-text-muted: var(--text-muted);
    --app-border: var(--border);
}


/* ==========================================================
   02. GLOBAL PAGE
========================================================== */

html {
    scroll-behavior: smooth;
}

body {
    background:
        linear-gradient(
            180deg,
            #ffffff 0,
            var(--page-bg) 550px
        );

    color: var(--text);
}

.site-container {
    width: min(1180px, calc(100% - 36px));
    margin-inline: auto;
}

::selection {
    background: var(--brand);
    color: #fff;
}


/* SCROLLBAR */

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: #eeeeef;
}

::-webkit-scrollbar-thumb {
    background: #b9bdc5;
    border-radius: 50px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand);
}


/* ==========================================================
   03. HOME HERO
========================================================== */

.games-hero {
    position: relative;
    overflow: hidden;

    padding: 100px 0 94px;

    color: #fff;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(0,0,0,.25),
            transparent 31%
        ),

        radial-gradient(
            circle at 90% 80%,
            rgba(0,0,0,.14),
            transparent 30%
        ),

        linear-gradient(
            120deg,
            #0b0c0f 0%,
            #15171c 48%,
            #090a0d 100%
        );
}


/* HERO GRID */

.games-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 46px 46px;

    opacity: .45;

    mask-image:
        linear-gradient(
            to bottom,
            #000,
            transparent 90%
        );
}


/* RED DECORATION */

.games-hero::after {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -270px;
    top: -270px;

    border-radius: 50%;

    border:
        1px solid rgba(0,0,0,.25);

    box-shadow:
        0 0 0 60px rgba(0,0,0,.035),
        0 0 0 120px rgba(0,0,0,.02);
}


/* ==========================================================
   04. HERO CONTENT
========================================================== */

.hero-inner {
    position: relative;
    z-index: 2;

    max-width: 930px;

    margin-inline: auto;

    text-align: center;
}


.hero-badge {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-bottom: 23px;

    padding: 9px 16px;

    color: #ffb4b7;

    background:
        rgba(0,0,0,.12);

    border:
        1px solid rgba(255,90,96,.28);

    border-radius: 100px;

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .14em;

    backdrop-filter: blur(10px);
}


.hero-badge::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ff4249;

    box-shadow:
        0 0 12px rgba(255,66,73,.8);
}


.games-hero h1 {
    margin: 0;

    color: #fff;

    font-size:
        clamp(43px, 6vw, 76px);

    font-weight: 900;

    line-height: .98;

    letter-spacing: -.05em;

    text-wrap: balance;
}


.games-hero h1 span {
    color: #222222;

    background:
        linear-gradient(
            90deg,
            #222222,
            #ff777c
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.games-hero .hero-copy,
.hero-copy {
    max-width: 760px;

    margin: 25px auto 0;

    color: #b9bdc5;

    font-size: 16px;

    line-height: 1.8;

    text-wrap: balance;
}


/* ==========================================================
   05. HERO BUTTONS
========================================================== */

.hero-actions {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 11px;

    margin-top: 32px;
}


.hero-primary-btn,
.hero-secondary-btn {
    min-height: 51px;

    padding: 0 24px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    border-radius: 12px;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

    transition: .25s ease;
}


.hero-primary-btn {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #ef2b33,
            #c90f17
        );

    border:
        1px solid rgba(255,255,255,.12);

    box-shadow:
        0 14px 35px rgba(0,0,0,.28);
}


.hero-primary-btn:hover {
    color: #fff;

    transform: translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #ff3d45,
            #df171f
        );

    box-shadow:
        0 18px 42px rgba(0,0,0,.38);
}


.hero-secondary-btn {
    color: #fff;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid rgba(255,255,255,.12);

    backdrop-filter: blur(10px);
}


.hero-secondary-btn:hover {
    color: #fff;

    transform: translateY(-3px);

    background:
        rgba(255,255,255,.10);

    border-color:
        rgba(255,255,255,.25);
}


/* ==========================================================
   06. PREMIUM STATS
========================================================== */

.premium-stats-wrapper {
    position: relative;

    z-index: 10;

    max-width: 1080px;

    margin:
        55px auto -128px;
}


.premium-stats-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 15px;

    padding: 0 18px;
}


.stat-glass-card {
    position: relative;

    overflow: hidden;

    padding: 27px 18px;

    text-align: center;

    background: #fff;

    border:
        1px solid #e5e7eb;

    border-radius: 18px;

    box-shadow:
        0 14px 35px rgba(16,24,40,.10);

    transition: .28s ease;
}


.stat-glass-card::before {
    content: "";

    position: absolute;

    width: 100%;

    height: 3px;

    left: 0;
    top: 0;

    background:
        linear-gradient(
            90deg,
            #ff4c53,
            #111111,
            #000000
        );

    transform: scaleX(0);

    transition: .28s ease;
}


.stat-glass-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(0,0,0,.25);

    box-shadow:
        0 22px 45px rgba(16,24,40,.15);
}


.stat-glass-card:hover::before {
    transform: scaleX(1);
}


.stat-icon-wrapper {
    width: 56px;
    height: 56px;

    margin:
        0 auto 16px;

    display: grid;
    place-items: center;

    color: var(--brand);

    background: var(--brand-soft);

    border:
        1px solid var(--brand-soft-2);

    border-radius: 15px;

    font-size: 22px;
}


.stat-glass-card .stat-title,
.stat-title {
    display: block;

    margin-bottom: 4px;

    color: var(--text);

    font-size: 15px;
    font-weight: 850;
}


.stat-glass-card .stat-subtitle,
.stat-subtitle {
    display: block;

    color: var(--text-muted);

    font-size: 11.5px;
}


/* ==========================================================
   07. DIRECTORY
========================================================== */

.games-directory {
    padding:
        150px 0 78px;

    background:
        linear-gradient(
            180deg,
            #f5f6f8,
            #ffffff
        );
}


.section-head {
    max-width: 720px;

    margin:
        0 auto 37px;

    text-align: center;
}


.section-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 10px;

    color: var(--brand);

    font-size: 11px;
    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .15em;
}


.section-eyebrow::before {
    content: "";

    width: 22px;
    height: 2px;

    border-radius: 5px;

    background: var(--brand);
}


.section-head h2 {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(30px,4vw,43px);

    font-weight: 900;

    line-height: 1.1;

    letter-spacing: -.04em;
}


.section-head p {
    max-width: 650px;

    margin:
        14px auto 0;

    color: var(--text-secondary);

    font-size: 14px;

    line-height: 1.75;
}


/* ==========================================================
   08. TABS
========================================================== */

.premium-tabs {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 30px;
}


.premium-tab {
    padding:
        10px 18px;

    color: var(--text-secondary);

    background: #fff;

    border:
        1px solid var(--border);

    border-radius: 9px;

    box-shadow: var(--shadow-xs);

    font-size: 12px;
    font-weight: 750;

    text-decoration: none;

    transition: .2s ease;
}


.premium-tab:hover {
    color: var(--brand);

    background: var(--brand-soft);

    border-color:
        rgba(0,0,0,.22);
}


.premium-tab.active {
    color: #fff;

    background: var(--brand);

    border-color: var(--brand);

    box-shadow:
        0 8px 20px rgba(0,0,0,.20);
}


/* ==========================================================
   09. APP DIRECTORY
========================================================== */

.app-list-container {
    max-width: 960px;

    margin-inline: auto;

    display: flex;

    flex-direction: column;

    gap: 11px;
}


.app-list-card {
    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 17px;

    padding: 14px 15px;

    background: #fff;

    border:
        1px solid #e5e7eb;

    border-radius: 15px;

    box-shadow:
        0 4px 15px rgba(16,24,40,.05);

    transition: .24s ease;
}


.app-list-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 20%;

    width: 3px;
    height: 60%;

    border-radius:
        0 10px 10px 0;

    background: var(--brand);

    opacity: .4;

    transition: .24s ease;
}


.app-list-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(0,0,0,.25);

    box-shadow:
        0 14px 30px rgba(16,24,40,.10);
}


.app-list-card:hover::before {
    top: 10%;

    height: 80%;

    opacity: 1;
}


.app-list-left {
    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 0;
}


.app-list-left img {
    width: 65px;
    height: 65px;

    flex:
        0 0 65px;

    object-fit: cover;

    background: #f4f4f5;

    border:
        1px solid #e4e4e7;

    border-radius: 14px;

    box-shadow:
        0 5px 14px rgba(16,24,40,.10);
}


.app-list-info {
    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;
}


.app-list-info h4 {
    margin: 0 0 2px;

    color: var(--text);

    font-size: 16px;

    font-weight: 850;

    line-height: 1.3;
}


.app-players,
.app-bonus,
.app-withdraw {
    display: inline-block;

    font-size: 11.5px;

    font-weight: 700;
}


.app-players {
    color: #475467;
}

.app-bonus {
    color: var(--success);
}

.app-withdraw {
    color: var(--warning);
}


/* ==========================================================
   10. DOWNLOAD BUTTON
========================================================== */

.app-download-btn {
    flex-shrink: 0;

    min-width: 112px;
    min-height: 42px;

    padding: 0 16px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #ed252d,
            #000000
        );

    border:
        1px solid var(--brand);

    border-radius: 10px;

    box-shadow:
        0 7px 18px rgba(0,0,0,.16);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    transition: .22s ease;
}


.app-download-btn:hover {
    color: #fff;

    transform:
        translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #ff343c,
            #df151d
        );

    box-shadow:
        var(--shadow-red);
}


/* ==========================================================
   11. PREMIUM CONTENT AREA
========================================================== */

.premium-content {
    padding:
        80px 0;

    background: #fff;
}


/* ==========================================================
   12. FEATURE CARDS
========================================================== */

.feature-grid {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 16px;
}


.feature-card {
    position: relative;

    overflow: hidden;

    padding: 26px 22px;

    background: #fff;

    border:
        1px solid var(--border);

    border-radius: 18px;

    box-shadow:
        0 7px 22px rgba(16,24,40,.055);

    transition: .28s ease;
}


.feature-card::before {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    right: -55px;
    top: -55px;

    border-radius: 50%;

    background: var(--brand-soft);
}


.feature-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(0,0,0,.22);

    box-shadow:
        0 18px 38px rgba(16,24,40,.10);
}


.feature-number {
    position: absolute;

    right: 12px;
    bottom: -8px;

    color: rgba(17,19,24,.035);

    font-size: 65px;
    font-weight: 900;

    line-height: 1;
}


.feature-mini-icon {
    position: relative;

    width: 43px;
    height: 43px;

    margin-bottom: 17px;

    display: grid;
    place-items: center;

    color: var(--brand);

    background: var(--brand-soft);

    border:
        1px solid var(--brand-soft-2);

    border-radius: 12px;

    font-size: 18px;
}


.feature-card h3 {
    position: relative;

    margin:
        0 0 8px;

    color: var(--text);

    font-size: 16px;

    font-weight: 850;
}


.feature-card p {
    position: relative;

    margin: 0;

    color: var(--text-muted);

    font-size: 13px;

    line-height: 1.65;
}


/* ==========================================================
   13. FEATURED APPS
========================================================== */

.featured-area {
    margin-top: 75px;
}


.featured-apps {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 18px;

    margin-top: 29px;
}


.f-app {
    position: relative;

    overflow: hidden;

    min-height: 335px;

    padding: 26px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

    background: #fff;

    border:
        1px solid var(--border);

    border-radius: 20px;

    box-shadow:
        0 8px 25px rgba(16,24,40,.06);

    transition: .28s ease;
}


.f-app::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -110px;
    top: -110px;

    border-radius: 50%;

    background:
        rgba(0,0,0,.06);
}


.f-app:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(0,0,0,.24);

    box-shadow:
        0 20px 45px rgba(16,24,40,.11);
}


.f-app-icon {
    position: relative;

    width: 70px;
    height: 70px;

    object-fit: cover;

    border-radius: 16px;

    border:
        1px solid #e4e4e7;

    box-shadow:
        0 8px 20px rgba(16,24,40,.12);
}


.app-label {
    display: inline-flex;

    padding:
        5px 9px;

    color: var(--brand);

    background: var(--brand-soft);

    border:
        1px solid var(--brand-soft-2);

    border-radius: 100px;

    font-size: 9px;
    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .07em;
}


.f-app h3 {
    margin:
        3px 0 0;

    color: var(--text);

    font-size: 21px;

    font-weight: 850;
}


.f-app strong {
    color: var(--brand);

    font-size: 12px;
}


.f-app p {
    margin: 0;

    color: var(--text-muted);

    font-size: 13px;

    line-height: 1.68;
}


.f-app a {
    width: 100%;
    min-height: 43px;

    margin-top: auto;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    color: #fff;

    background: var(--dark);

    border:
        1px solid var(--dark);

    border-radius: 10px;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    transition: .22s ease;
}


.f-app a:hover {
    color: #fff;

    background: var(--brand);

    border-color: var(--brand);

    transform:
        translateY(-2px);

    box-shadow:
        0 9px 22px rgba(0,0,0,.20);
}


/* ==========================================================
   14. CATEGORY SECTION
========================================================== */

.category-box {
    position: relative;

    overflow: hidden;

    margin-top: 65px;

    padding: 48px 34px;

    text-align: center;

    color: #fff;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0,0,0,.20),
            transparent 45%
        ),

        linear-gradient(
            135deg,
            #111318,
            #1b1e24
        );

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 23px;

    box-shadow:
        0 25px 60px rgba(16,24,40,.20);
}


.category-box h2 {
    position: relative;

    margin: 0;

    color: #fff;

    font-size:
        clamp(27px,4vw,33px);

    font-weight: 900;

    letter-spacing: -.03em;
}


.category-box > p {
    position: relative;

    max-width: 700px;

    margin:
        12px auto 0;

    color: #b8bdc6;

    font-size: 14px;

    line-height: 1.75;
}


.tags {
    position: relative;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 8px;

    margin-top: 27px;
}


.tags span {
    padding:
        8px 13px;

    color: #e7e8eb;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid rgba(255,255,255,.09);

    border-radius: 100px;

    font-size: 11px;

    transition: .2s ease;
}


.tags span:hover {
    color: #fff;

    transform:
        translateY(-2px);

    background:
        rgba(0,0,0,.18);

    border-color:
        rgba(255,70,77,.30);
}


.payment-row {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 23px;

    padding-top: 22px;

    color: #b8bdc6;

    border-top:
        1px solid rgba(255,255,255,.07);

    font-size: 12px;
}


.payment-row strong {
    color: #ff7479;
}


/* ==========================================================
   15. INFORMATION GRID
========================================================== */

.info-grid {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 20px;

    margin-top: 55px;
}


.content-panel {
    position: relative;

    overflow: hidden;

    padding: 34px;

    margin-bottom: 30px;

    background: #fff;

    border:
        1px solid var(--border);

    border-radius: 19px;

    box-shadow:
        0 8px 25px rgba(16,24,40,.06);
}


.content-panel::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--brand),
            #ff6268
        );
}


.content-panel.full {
    grid-column:
        1 / -1;
}


.content-panel h2 {
    position: relative;

    margin:
        0 0 12px;

    color: var(--text);

    font-size: 25px;

    font-weight: 850;

    letter-spacing: -.025em;
}


.content-panel h3 {
    position: relative;

    margin:
        27px 0 9px;

    color: var(--text);

    font-size: 18px;
}


.content-panel p,
.content-panel li {
    position: relative;

    color: var(--text-secondary);

    font-size: 14px;

    line-height: 1.75;
}


.content-panel ul {
    padding-left: 19px;
}


.content-panel li + li {
    margin-top: 7px;
}


/* ==========================================================
   16. ABOUT SECTION
========================================================== */

.about-games-panel {
    position: relative;

    overflow: hidden;

    margin-top: 22px;

    padding: 40px;

    background: #fff;

    border:
        1px solid var(--border);

    border-radius: 20px;

    box-shadow:
        0 8px 25px rgba(16,24,40,.06);
}


.about-games-panel::before {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: -170px;
    top: -170px;

    border-radius: 50%;

    background: var(--brand-soft);
}


.about-games-panel h2 {
    position: relative;

    margin: 0;

    color: var(--text);

    font-size: 29px;

    font-weight: 900;
}


.about-games-panel h3 {
    position: relative;

    margin-top: 27px;

    color: var(--text);
}


.about-games-panel p,
.about-games-panel li {
    position: relative;

    color: var(--text-secondary);

    font-size: 14px;

    line-height: 1.75;
}


/* ==========================================================
   17. INTERNAL PAGE HERO
========================================================== */

.app-hero-wrap {
    position: relative;

    overflow: hidden;

    padding:
        88px 0 62px;

    text-align: center;

    color: #fff;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(0,0,0,.22),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 80%,
            rgba(0,0,0,.12),
            transparent 30%
        ),

        linear-gradient(
            120deg,
            #0b0c0f,
            #191b21
        );
}


.app-hero-wrap::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.03) 1px,
            transparent 1px
        );

    background-size:
        46px 46px;

    pointer-events: none;
}


.app-hero-wrap .hero-inner {
    position: relative;
    z-index: 2;
}


.app-hero-wrap .hero-badge {
    color: #ffb6b9;

    background:
        rgba(0,0,0,.12);

    border-color:
        rgba(255,80,87,.28);
}


.app-hero-wrap h1 {
    margin:
        0 0 18px;

    color: #fff;

    font-size:
        clamp(37px,5vw,57px);

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -.045em;
}


.app-hero-wrap h1 span {
    color: #ff4249;

    background:
        linear-gradient(
            90deg,
            #ff4047,
            #ff7a7f
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.app-hero-wrap .hero-copy {
    color: #b9bdc5;
}


/* ==========================================================
   18. POLICY / SUPPORT SECTION
========================================================== */

.policy-section,
.support-section {
    padding:
        55px 0 85px;

    background:
        linear-gradient(
            180deg,
            #f7f8fa,
            #ffffff
        );
}


/* ==========================================================
   19. POLICY GRID
========================================================== */

.policy-grid {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 20px;
}


.app-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 20px;
}


/* ==========================================================
   20. POLICY CARD
========================================================== */

.policy-card {
    position: relative;

    overflow: hidden;

    padding:
        30px 27px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    background: #fff;

    border:
        1px solid var(--border);

    border-radius: 19px;

    box-shadow:
        0 7px 22px rgba(16,24,40,.055);

    transition: .27s ease;
}


.policy-card::before {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    top: -85px;
    right: -75px;

    border-radius: 50%;

    background: var(--brand-soft);
}


.policy-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(0,0,0,.22);

    box-shadow:
        0 17px 38px rgba(16,24,40,.10);
}


.policy-card h3 {
    position: relative;

    margin:
        0 0 14px;

    color: var(--text);

    font-size: 19px;

    font-weight: 850;
}


.policy-card > p {
    position: relative;

    margin: 0;

    color: var(--text-secondary);

    font-size: 13.5px;

    line-height: 1.72;
}


/* ==========================================================
   21. CARD ICON
========================================================== */

.card-icon {
    position: relative;

    width: 52px;
    height: 52px;

    margin-bottom: 18px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: var(--brand);

    background: var(--brand-soft);

    border:
        1px solid var(--brand-soft-2);

    border-radius: 14px;

    font-size: 21px;
}


.card-icon.gold {
    color: var(--brand);
}


/* ==========================================================
   22. POLICY LIST
========================================================== */

.policy-list {
    position: relative;

    list-style: none;

    padding: 0;
    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 13px;
}


.policy-list li {
    position: relative;

    padding-left: 21px;

    color: var(--text-secondary);

    font-size: 13.5px;

    line-height: 1.7;
}


.policy-list li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 8px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--brand);
}


.policy-list strong {
    color: var(--text);

    font-weight: 750;
}


/* ==========================================================
   23. SECTION TITLE
========================================================== */

.section-title {
    margin:
        58px 0 25px;

    color: var(--text);

    font-size:
        clamp(25px,4vw,30px);

    font-weight: 900;

    text-align: center;

    letter-spacing: -.035em;
}


/* ==========================================================
   24. APP NOTICE
========================================================== */

.app-notice {
    display: inline-flex;

    padding:
        5px 10px;

    margin-bottom: 12px;

    color: var(--brand);

    background: var(--brand-soft);

    border:
        1px solid var(--brand-soft-2);

    border-radius: 6px;

    font-size: 9px;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .08em;
}


.full-width {
    grid-column:
        1 / -1;
}


/* ==========================================================
   25. ALERT CARDS
========================================================== */

.policy-card.alert-card {
    background:
        linear-gradient(
            145deg,
            #fff,
            #fafafa
        );

    border-color:
        #ffd5d2;
}


.policy-card.alert-card::before {
    background:
        rgba(217,45,32,.07);
}


.policy-card.alert-card:hover {
    border-color:
        rgba(217,45,32,.30);
}


.policy-card.alert-card .card-icon {
    color: var(--danger);

    background: var(--danger-soft);

    border-color: #ffd5d2;
}


/* GOLD CARD IS NOW RED/WHITE */

.policy-card.gold-card {
    border-color:
        #e5e7eb;
}


.policy-card.gold-card:hover {
    border-color:
        rgba(0,0,0,.25);
}


.policy-card.gold-card .card-icon {
    color: var(--brand);

    background: var(--brand-soft);

    border-color:
        var(--brand-soft-2);
}


/* ==========================================================
   26. LEGAL PANEL
========================================================== */

.legal-panel {
    background:
        linear-gradient(
            145deg,
            #fff7f7,
            #ffffff
        );

    border:
        1px solid #ffd7d5;
}


.legal-panel h2,
.legal-panel h3 {
    color: var(--danger);
}


/* ==========================================================
   27. FINAL DISCLAIMER
========================================================== */

.final-disclaimer {
    position: relative;

    overflow: hidden;

    margin-top: 58px;

    padding: 39px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #fff,
            #fff5f5
        );

    border:
        1px solid #ffd4d2;

    border-radius: 20px;

    box-shadow:
        0 10px 28px rgba(16,24,40,.07);
}


.final-disclaimer::before {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    left: 50%;
    top: -190px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        rgba(217,45,32,.08);
}


.final-disclaimer .card-icon {
    margin:
        0 auto 19px;

    color: var(--danger);

    background: var(--danger-soft);

    border-color: #ffd4d2;
}


.final-disclaimer h2 {
    position: relative;

    margin:
        0 0 14px;

    color: var(--danger);

    font-size: 24px;

    font-weight: 850;
}


.final-disclaimer p {
    position: relative;

    max-width: 800px;

    margin-inline: auto;

    color: var(--text-secondary);

    font-size: 14px;

    line-height: 1.75;
}


/* ==========================================================
   28. CONTACT CARDS
========================================================== */

.contact-cards {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 20px;

    margin-bottom: 35px;
}


.contact-card {
    position: relative;

    overflow: hidden;

    padding:
        31px 28px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    background: #fff;

    border:
        1px solid var(--border);

    border-radius: 19px;

    box-shadow:
        0 7px 22px rgba(16,24,40,.055);

    transition: .27s ease;
}


.contact-card::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    top: -100px;
    right: -90px;

    border-radius: 50%;

    background: var(--brand-soft);
}


.contact-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(0,0,0,.22);

    box-shadow:
        0 17px 38px rgba(16,24,40,.10);
}


.contact-card h3 {
    position: relative;

    margin:
        0 0 10px;

    color: var(--text);

    font-size: 19px;

    font-weight: 850;
}


.contact-card p {
    position: relative;

    flex-grow: 1;

    margin:
        0 0 22px;

    color: var(--text-secondary);

    font-size: 13.5px;

    line-height: 1.72;
}


/* ==========================================================
   29. ACTION BUTTON
========================================================== */

.btn-action {
    position: relative;

    min-height: 43px;

    padding:
        0 19px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    color: #fff;

    background: var(--dark);

    border:
        1px solid var(--dark);

    border-radius: 10px;

    font-size: 12px;

    font-weight: 800;

    text-decoration: none;

    cursor: pointer;

    transition: .22s ease;
}


.btn-action:hover {
    color: #fff;

    transform:
        translateY(-2px);

    background: var(--brand);

    border-color: var(--brand);

    box-shadow:
        0 9px 22px rgba(0,0,0,.20);
}


/* ==========================================================
   30. CONTACT BOTTOM GRID
========================================================== */

.info-split-grid {
    display: grid;

    grid-template-columns:
        1.5fr 1fr;

    gap: 20px;
}


.guideline-panel,
.security-panel {
    position: relative;

    overflow: hidden;

    padding: 34px;

    border-radius: 19px;

    box-shadow:
        0 8px 24px rgba(16,24,40,.06);
}


.guideline-panel {
    background: #fff;

    border:
        1px solid var(--border);
}


.guideline-panel h2 {
    margin:
        0 0 22px;

    color: var(--text);

    font-size: 21px;

    font-weight: 850;
}


.guidelines-list {
    list-style: none;

    padding: 0;
    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 14px;
}


.guidelines-list li {
    position: relative;

    padding-left: 27px;

    color: var(--text-secondary);

    font-size: 13.5px;

    line-height: 1.7;
}


.guidelines-list li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 1px;

    width: 18px;
    height: 18px;

    display: grid;
    place-items: center;

    color: #fff;

    background: var(--brand);

    border-radius: 50%;

    font-size: 9px;

    font-weight: 900;
}


.guidelines-list strong {
    color: var(--text);
}


/* ==========================================================
   31. SECURITY PANEL
========================================================== */

.security-panel {
    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #f1fff7,
            #ffffff
        );

    border:
        1px solid #b7ebcd;
}


.security-icon {
    margin-bottom: 17px;

    color: var(--success);

    font-size: 44px;
}


.security-panel h3 {
    margin:
        0 0 10px;

    color: var(--success);

    font-size: 19px;

    font-weight: 850;
}


.security-panel p {
    margin: 0;

    color: var(--text-secondary);

    font-size: 13.5px;

    line-height: 1.7;
}


/* ==========================================================
   32. RESPONSIVE — TABLET
========================================================== */

@media (max-width: 960px) {

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

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

    .featured-apps {
        grid-template-columns:
            1fr;
    }

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

    .info-split-grid {
        grid-template-columns:
            1fr;
    }
}


/* ==========================================================
   33. RESPONSIVE — MOBILE
========================================================== */

@media (max-width: 768px) {

    .site-container {
        width:
            calc(100% - 28px);
    }


    .games-hero {
        padding:
            72px 0 72px;
    }


    .games-hero h1 {
        font-size:
            clamp(38px,11vw,50px);
    }


    .app-hero-wrap {
        padding:
            62px 0 43px;
    }


    .app-hero-wrap h1 {
        font-size:
            clamp(32px,9vw,43px);
    }


    .games-hero .hero-copy,
    .hero-copy {
        font-size: 14px;
    }


    .premium-stats-wrapper {
        margin-bottom:
            -90px;
    }


    .games-directory {
        padding-top:
            115px;
    }


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


    .content-panel.full {
        grid-column: auto;
    }


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


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


    .contact-cards {
        grid-template-columns:
            1fr;
    }


    .about-games-panel {
        padding: 29px;
    }


    .content-panel,
    .policy-card,
    .contact-card,
    .guideline-panel,
    .security-panel,
    .final-disclaimer {
        padding: 26px;
    }
}


/* ==========================================================
   34. SMALL MOBILE
========================================================== */

@media (max-width: 560px) {

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


    .hero-actions {
        display: grid;

        grid-template-columns:
            1fr;

        max-width: 340px;

        margin:
            28px auto 0;
    }


    .hero-primary-btn,
    .hero-secondary-btn {
        width: 100%;
    }


    .section-head h2 {
        font-size: 29px;
    }


    .category-box {
        padding:
            36px 20px;
    }
}


/* ==========================================================
   35. COMPACT MOBILE
========================================================== */

@media (max-width: 480px) {

    .premium-stats-wrapper {
        margin:
            32px auto 25px;
    }


    .games-directory {
        padding-top: 38px;
    }


    .premium-stats-grid {
        grid-template-columns:
            1fr;

        gap: 10px;

        padding: 0;
    }


    .stat-glass-card {
        display: flex;

        align-items: center;

        gap: 14px;

        padding:
            14px 16px;

        text-align: left;

        border-radius: 14px;
    }


    .stat-icon-wrapper {
        width: 46px;
        height: 46px;

        flex-shrink: 0;

        margin: 0;

        border-radius: 12px;

        font-size: 18px;
    }


    .stat-glass-card .stat-title {
        font-size: 14px;
    }


    .stat-glass-card .stat-subtitle {
        font-size: 11px;
    }


    /* APP LIST */

    .app-list-card {
        gap: 10px;

        padding: 11px;

        border-radius: 13px;
    }


    .app-list-left {
        gap: 10px;
    }


    .app-list-left img {
        width: 54px;
        height: 54px;

        flex:
            0 0 54px;

        border-radius: 11px;
    }


    .app-list-info h4 {
        font-size: 14px;
    }


    .app-players,
    .app-bonus,
    .app-withdraw {
        font-size: 10px;
    }


    .app-download-btn {
        min-width: 82px;
        min-height: 38px;

        padding:
            0 10px;

        font-size: 10px;

        border-radius: 8px;
    }


    .content-panel,
    .policy-card,
    .contact-card,
    .guideline-panel,
    .security-panel,
    .final-disclaimer {
        padding: 21px;
    }


    .about-games-panel {
        padding:
            24px 21px;
    }
}


/* ==========================================================
   36. VERY SMALL MOBILE
========================================================== */

@media (max-width: 370px) {

    .site-container {
        width:
            calc(100% - 20px);
    }


    .app-list-left img {
        width: 48px;
        height: 48px;

        flex:
            0 0 48px;
    }


    .app-download-btn {
        min-width: 70px;

        padding:
            0 7px;

        font-size: 9px;
    }


    .app-list-info h4 {
        font-size: 13px;
    }
}


/* ==========================================================
   37. ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}