:root {
            --primary-color: #f4b942;
            --secondary-color: #17211b;
            --text-color: #ffffff;
            --bg-gradient: linear-gradient(135deg, #111814 0%, #26352b 48%, #101512 100%);
            --panel-color: rgba(18, 29, 23, 0.88);
            --border-color: rgba(244, 185, 66, 0.35);
        }

        body {
            font-family: 'Changa', sans-serif;
            background: var(--bg-gradient);
            color: var(--text-color);
            margin: 0; padding: 0;
            line-height: 1.8;
            overflow-x: hidden;
            -webkit-user-select: text; user-select: text;
            background-attachment: fixed;
        }
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: 0.13;
            background-image: linear-gradient(135deg, transparent 25%, rgba(255,255,255,.08) 25%, transparent 26%), linear-gradient(45deg, transparent 45%, rgba(0,0,0,.2) 45%, transparent 46%);
            background-size: 42px 42px, 58px 58px;
            z-index: -1;
        }

        img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
        .container { max-width: 1000px; margin: auto; padding: 20px; }
        header { background: rgba(8, 14, 10, 0.94); padding: 15px 20px; text-align: center; border-bottom: 3px solid var(--primary-color); position: sticky; top: 0; z-index: 1000; box-shadow: 0 8px 25px rgba(0,0,0,.25); }
        .external-links a { color: #f8d477; margin: 0 12px; text-decoration: none; font-size: 0.95rem; font-weight: 700; transition: 0.3s; }
        .external-links a:hover { color: #fff; text-shadow: 0 0 12px rgba(244,185,66,.65); }
        .section-img { max-width: 150px; height: auto; display: block; margin: 0 auto 20px; filter: drop-shadow(0 0 10px var(--primary-color)); }

        .btn-main {
            background: linear-gradient(135deg, #f4b942, #c88920);
            color: #000 !important;
            min-width: 280px; height: 70px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 800; font-size: 1.3rem;
            display: inline-flex; align-items: center; justify-content: center;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(244, 185, 66, 0.28);
            border: 1px solid #f8d477; cursor: pointer;
        }
        .btn-main:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 25px rgba(244, 185, 66, 0.5); }

        .hero { text-align: center; padding: 55px 25px; background: linear-gradient(180deg, rgba(9,17,12,.8), rgba(20,35,25,.45)); border: 1px solid var(--border-color); border-radius: 18px; box-shadow: inset 0 0 60px rgba(0,0,0,.2), 0 20px 45px rgba(0,0,0,.16); }
        .demo-disclaimer { display: inline-block; padding: 8px 16px; border: 1px solid rgba(244,185,66,.45); border-radius: 999px; color: #f8d477; background: rgba(244,185,66,.08); }
        .feature-card { background: var(--panel-color); padding: 25px; border-radius: 10px; border-right: 5px solid var(--primary-color); transition: 0.3s; text-align: right; margin-bottom: 30px; box-shadow: 0 12px 30px rgba(0,0,0,.18); }

        .uc-timeline {
            position: relative;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 18px;
            margin: 35px 0;
        }
        .uc-timeline::before {
            content: '';
            position: absolute;
            top: 25px;
            right: 8%;
            left: 8%;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
            opacity: 0.7;
        }
        .uc-package {
            position: relative;
            z-index: 1;
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 24px 18px;
            background: rgba(18, 29, 23, 0.9);
            text-align: center;
            cursor: pointer;
            color: inherit;
            transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .uc-package::before {
            content: '';
            display: block;
            width: 16px;
            height: 16px;
            margin: -8px auto 18px;
            border: 3px solid var(--primary-color);
            border-radius: 50%;
            background: #101812;
        }
        .uc-package:hover,
        .uc-package.selected {
            border-color: var(--primary-color);
            box-shadow: 0 10px 28px rgba(244, 185, 66, 0.2);
            transform: translateY(-5px);
        }
        .uc-package.selected::before {
            background: var(--primary-color);
            box-shadow: 0 0 0 5px rgba(244, 185, 66, 0.18);
        }
        .uc-package h3 {
            color: var(--primary-color);
            margin: 0 0 10px;
            font-size: 1.35rem;
        }
        .uc-package ul {
            min-height: 78px;
            padding: 0;
            margin: 15px 0 0;
            list-style: none;
            color: #ddd;
            line-height: 1.9;
        }
        .uc-package li::before {
            content: '✓';
            color: var(--primary-color);
            font-weight: 800;
            margin-left: 6px;
        }
        .uc-preview {
            max-width: 650px;
            margin: 25px auto 0;
            padding: 22px;
            border: 1px dashed var(--primary-color);
            border-radius: 14px;
            background: rgba(255, 152, 0, 0.07);
            text-align: center;
        }
        .uc-preview strong { color: var(--primary-color); }

        .home-page { max-width: 1120px; padding-top: 34px; padding-bottom: 55px; }
        .home-page .hero {
            position: relative;
            overflow: hidden;
            padding: 58px 48px 46px;
            background:
                linear-gradient(135deg, rgba(255,152,0,.16), transparent 38%),
                linear-gradient(180deg, rgba(8,14,23,.92), rgba(15,28,24,.76));
            border-color: rgba(255,152,0,.42);
            border-right: 5px solid var(--primary-color);
        }
        .home-page .hero::before {
            content: 'BATTLEGROUND // ARABPUBGM';
            position: absolute;
            left: 28px;
            bottom: -20px;
            color: rgba(255,255,255,.035);
            font-size: clamp(2rem, 6vw, 5rem);
            font-weight: 800;
            letter-spacing: .06em;
            pointer-events: none;
        }
        .home-page .hero .section-img {
            width: 190px;
            max-width: 55%;
            margin: 22px auto 18px;
            border: 2px solid var(--primary-color);
            border-radius: 18px;
            box-shadow: 0 0 34px var(--primary-glow);
        }
        .home-page .hero h1 { position: relative; margin: 8px 0 14px; font-size: clamp(2rem, 4vw, 3rem) !important; }
        .home-page .hero > p:not(.demo-disclaimer) { position: relative; max-width: 820px; margin: 0 auto 26px; color: #d8dee6; font-size: 1.08rem; }
        .home-intro {
            position: relative;
            max-width: 850px;
            margin: 32px auto 0 !important;
            padding: 22px 26px !important;
            background: rgba(255,152,0,.06) !important;
            border: 1px solid rgba(255,152,0,.24) !important;
            border-right: 3px solid var(--primary-color);
            border-radius: 10px !important;
            text-align: right;
        }
        .home-page > section:not(.hero) { margin-top: 28px; }
        .home-page > section > h2 { margin-bottom: 24px; }
        .home-page .feature-card,
        .home-page .seo-rich-content,
        .home-page #steps-anchor,
        .home-page .faq-section { border-radius: 12px !important; }
        .home-page .seo-rich-content {
            padding: 38px 34px !important;
            background: rgba(15,23,35,.72) !important;
            border-right: 4px solid var(--primary-color) !important;
        }
        .home-page .seo-rich-content > div {
            background: rgba(255,255,255,.025) !important;
            border: 1px solid rgba(255,152,0,.18) !important;
            border-radius: 10px !important;
        }
        .home-page #about-game { padding: 44px 34px !important; background: rgba(15,23,35,.5); border-radius: 12px; }
        .home-page #about-game .feature-card { background: rgba(15,23,35,.84); }
        .home-page #about-game ul { text-align: right; line-height: 2; }
        .home-page #steps-anchor { padding: 42px 34px !important; border: 1px solid rgba(255,152,0,.22); border-right: 4px solid var(--primary-color); }
        .home-page .uc-package { min-height: 230px; }
        .home-page .trust-grid { margin-top: 25px; }
        .home-page .stats-section { border-radius: 12px !important; }
        .home-page .stat-item { padding: 8px; }
        .home-page .faq-section { padding: 34px !important; background: rgba(15,23,35,.7); border-right: 4px solid var(--primary-color); }
        .home-page .faq-item { border: 1px solid rgba(255,152,0,.16) !important; border-right: 3px solid var(--primary-color) !important; }
        .seo-topics-section { padding: 38px 28px; background: rgba(15,23,35,.72); border: 1px solid rgba(255,152,0,.2); border-radius: 12px; }
        .seo-topics-section > p { max-width: 720px; margin: 0 auto 24px; color: #d6dbe2; }
        .topics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; text-align: right; }
        .topic-card { padding: 22px 18px; background: rgba(255,152,0,.06); border: 1px solid rgba(255,152,0,.2); border-right: 3px solid var(--primary-color); border-radius: 8px; }
        .topic-card h3 { margin-top: 0; color: var(--accent-gold); }
        .topic-card p { color: #cbd2dc; min-height: 82px; }
        .topic-card a { color: var(--primary-color); font-weight: 800; text-decoration: none; }
        .topic-card a:hover, .topic-card a:focus-visible { color: var(--accent-gold); text-decoration: underline; }
        @media (max-width: 700px) {
            .home-page { padding-top: 20px; }
            .home-page .hero { padding: 36px 20px 30px; }
            .home-page .hero .section-img { width: 150px; }
            .home-page .seo-rich-content,
            .home-page #about-game,
            .home-page #steps-anchor,
            .home-page .faq-section { padding: 26px 18px !important; }
            .home-page #about-game ul { padding-right: 18px; text-align: right !important; }
            .home-page .uc-package { min-height: 0; padding: 18px 10px; }
            .home-page .uc-package h3 { font-size: 1.1rem; }
            .seo-topics-section { padding: 26px 18px; }
            .topics-grid { grid-template-columns: 1fr; }
            .topic-card p { min-height: 0; }
        }

        h1 { font-size: 2.2rem; color: #f8d477; font-weight: 800; text-shadow: 0 3px 0 rgba(0,0,0,.25); }
        h2 { font-size: 1.8rem; margin-bottom: 20px; }

        .trust-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            margin-top: 35px;
        }
        .trust-card {
            background: rgba(18, 29, 23, 0.8);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 30px 25px;
            text-align: center;
            transition: all 0.35s ease;
            position: relative;
            overflow: hidden;
        }
        .trust-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(244,185,66,0.1) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.35s;
        }
        .trust-card:hover { transform: translateY(-6px); border-color: var(--primary-color); box-shadow: 0 12px 35px rgba(244,185,66,0.2); }
        .trust-card:hover::before { opacity: 1; }
        .trust-card-img {
            width: 80px; height: 80px;
            border-radius: 10px;
            border: 3px solid var(--primary-color);
            margin: 0 auto 20px;
            display: block;
            filter: drop-shadow(0 0 12px rgba(255,152,0,0.5));
            object-fit: cover;
        }
        .trust-card h3 {
            color: var(--primary-color);
            font-size: 1.2rem;
            font-weight: 800;
            margin: 0 0 15px;
        }
        .trust-card p {
            color: #ccc;
            font-size: 0.97rem;
            line-height: 1.9;
            margin: 0;
            text-align: right;
        }

        @media (max-width: 600px) {
            h1 { font-size: 1.6rem !important; }
            .btn-main { width: 95% !important; min-width: auto; }
            body, .container, section, .hero, .feature-card { text-align: center !important; }
            .trust-card p { text-align: center !important; }
            .uc-timeline { grid-template-columns: 1fr 1fr; }
            .uc-timeline::before { display: none; }
        }