:root{
 --bg:#050505;--panel:#11100d;--panel2:#1a1710;--gold:#ffd21a;--gold2:#ff9f00;
 --orange:#ff5a00;--cream:#fff7dc;--text:#fffdf7;--muted:#cfc7b5;
 --border:rgba(255,190,40,.24);--shadow:0 24px 70px rgba(0,0,0,.55)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:
radial-gradient(circle at 8% 0%,rgba(255,159,0,.18),transparent 28%),
radial-gradient(circle at 92% 8%,rgba(255,90,0,.12),transparent 26%),
linear-gradient(180deg,#080807 0%,#050505 48%,#0d0a05 100%);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.65}
a{color:inherit;text-decoration:none}.wrap{width:min(1160px,calc(100% - 32px));margin:auto}
header{position:sticky;top:0;z-index:20;background:rgba(5,5,5,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,190,40,.18)}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{display:flex;align-items:center;gap:14px;font-weight:950;font-size:20px;letter-spacing:.01em}
.brand img{width:185px;height:54px;object-fit:contain;object-position:left center}
.brand span{display:none}
.navlinks{display:flex;gap:22px;color:#e7dfce;font-weight:800;font-size:14px}.navlinks a:hover{color:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;padding:12px 18px;font-weight:900;cursor:pointer}
.btn-main{background:linear-gradient(135deg,#ffe66b 0%,var(--gold) 42%,var(--orange) 100%);color:#160c00;box-shadow:0 12px 32px rgba(255,159,0,.24)}
.btn-gold{background:linear-gradient(135deg,#fff9e8 0%,#ffd76a 45%,#ff9f00 100%);color:#170d00;box-shadow:0 10px 28px rgba(255,190,40,.16)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.hero{padding:74px 0 48px}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:48px}
.badge{display:inline-flex;padding:8px 13px;border:1px solid rgba(255,190,40,.38);background:linear-gradient(90deg,rgba(255,190,40,.12),rgba(255,90,0,.08));border-radius:999px;color:#ffe28a;font-size:13px;font-weight:900;letter-spacing:.04em}
h1{font-size:clamp(42px,6vw,74px);line-height:1.03;margin:18px 0;background:linear-gradient(90deg,#fff9df,#ffd21a,#fff,#ff8b00);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 30px rgba(255,170,0,.08)}
.hero p{font-size:18px;color:var(--muted);max-width:720px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-logo{display:flex;justify-content:center;align-items:center;min-height:280px;padding:26px;border-radius:30px;background:
radial-gradient(circle at 50% 50%,rgba(255,184,0,.12),transparent 55%),
linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,159,0,.05));border:1px solid rgba(255,190,40,.22);box-shadow:inset 0 1px rgba(255,255,255,.06),var(--shadow)}
.hero-logo img{width:min(560px,100%);height:auto;object-fit:contain;filter:drop-shadow(0 24px 32px rgba(0,0,0,.65))}
section{padding:62px 0}.section-head{max-width:760px;margin-bottom:28px}.eyebrow{color:var(--gold);font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:12px}
h2{font-size:clamp(30px,4vw,46px);line-height:1.12;margin:8px 0 12px}.lead{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:linear-gradient(180deg,rgba(28,24,16,.96),rgba(13,12,10,.96));border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px;font-size:20px}.card p{margin:0;color:var(--muted)}
.game{background:linear-gradient(135deg,#1a150c,#090909);border:1px solid rgba(255,190,40,.28);border-radius:26px;padding:28px;box-shadow:var(--shadow)}
.game-top{display:flex;justify-content:space-between;gap:15px;align-items:center}.live{color:#8cff55;font-weight:900}.period{color:var(--muted);font-size:14px}.timer{font-size:52px;font-weight:1000;text-align:center;color:#ffd21a;text-shadow:0 0 25px rgba(255,210,28,.3);margin:22px 0 4px}.game-sub{text-align:center;color:var(--muted)}
.colors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:25px}.color-btn{border:0;border-radius:14px;padding:20px 10px;font-weight:1000;font-size:17px;cursor:pointer}.green{background:linear-gradient(135deg,#83f500,#22ad00);color:#0d1700}.violet{background:linear-gradient(135deg,#b33bff,#6511e8);color:#fff}.red{background:linear-gradient(135deg,#ff3b74,#e5003d);color:#fff}.result{margin-top:18px;padding:15px;border-radius:13px;background:#0c0615;color:#d8d0e5;text-align:center;min-height:52px}
.prose{background:linear-gradient(180deg,rgba(24,21,15,.92),rgba(10,10,9,.9));border:1px solid rgba(255,190,40,.14);border-radius:24px;padding:30px}.prose h3{color:#fff}.prose p{color:#d0c7dc}.prose strong{color:#fff}
.steps{counter-reset:step;display:grid;gap:14px}.step{display:flex;gap:16px;align-items:flex-start;background:#14120e;border:1px solid rgba(255,190,40,.12);padding:18px;border-radius:16px}.step:before{counter-increment:step;content:counter(step);width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:50%;background:linear-gradient(135deg,var(--yellow),var(--orange));color:#19051d;font-weight:1000}
.faq{display:grid;gap:12px}.faq details{background:#14120e;border:1px solid rgba(255,190,40,.12);border-radius:14px;padding:17px 19px}.faq summary{cursor:pointer;font-weight:900}.faq p{color:var(--muted);margin-bottom:0}
.warning{border-left:4px solid var(--yellow);background:rgba(255,210,28,.07);padding:18px 20px;border-radius:0 14px 14px 0;color:#ddd2bc}
footer{border-top:1px solid rgba(255,255,255,.08);padding:35px 0 80px;color:#aaa0b9}.footer-row{display:flex;justify-content:space-between;gap:20px}
.mobile-cta{display:none}
@media(max-width:850px){.hero-grid{grid-template-columns:1fr}.hero{padding-top:45px}.hero-logo{order:-1}.hero-logo img{width:280px}.cards{grid-template-columns:1fr 1fr}.navlinks{display:none}.nav .btn{display:none}}
@media(max-width:560px){.wrap{width:min(100% - 22px,1160px)}.nav{height:68px}.brand img{width:150px;height:46px}.brand span{font-size:17px}.hero{padding:34px 0}.hero p{font-size:16px}.actions .btn{width:100%}.cards{grid-template-columns:1fr}.colors{grid-template-columns:1fr}.timer{font-size:42px}.game{padding:18px}.prose{padding:20px}section{padding:44px 0}.footer-row{flex-direction:column}.mobile-cta{display:block;position:fixed;bottom:0;left:0;right:0;padding:10px;background:rgba(5,5,5,.97);backdrop-filter:blur(10px);z-index:30;border-top:1px solid rgba(255,210,28,.2)}.mobile-cta .btn{width:100%}}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    margin-top: 72px;
    padding: 64px 0 0;
    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(111, 38, 196, 0.12),
            transparent 34%
        ),
        #09060d;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.15fr;
    gap: 48px;
    padding-bottom: 48px;
}

.footer-brand {
    max-width: 420px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
}

.footer-logo img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.footer-brand p {
    margin: 0;
    max-width: 360px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.94rem;
    line-height: 1.7;
}

.footer-column h2 {
    margin: 4px 0 18px;
    color: #ffffff;
    font-size: 0.82rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.footer-column nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.footer-column a {
    color: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    font-size: 0.93rem;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.footer-column a:hover,
.footer-column a:focus-visible {
    color: var(--gold);
    transform: translateX(2px);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding: 22px 0 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.82rem;
    line-height: 1.5;
}

.footer-disclosure {
    max-width: 540px;
    text-align: right;
}

@media (max-width: 980px) {

    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
        max-width: 600px;
    }

}

@media (max-width: 720px) {

    .site-footer {
        margin-top: 52px;
        padding-top: 44px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px 28px;
        padding-bottom: 38px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .footer-disclosure {
        text-align: left;
    }

}

@media (max-width: 480px) {

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

    .footer-brand {
        grid-column: auto;
    }

}

/* =========================================================
   EDITORIAL IMAGE SYSTEM
   ========================================================= */

.content-media-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
    align-items: center;
    gap: clamp(42px, 6vw, 90px);
}

.content-media-grid.media-left {
    grid-template-columns: minmax(360px, 520px) minmax(0, 1fr);
}

.section-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
}

.section-media img {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    object-fit: contain;
}

.section-media.media-large img {
    max-width: 600px;
}

.section-media.media-transparent img {
    filter:
        drop-shadow(0 24px 40px rgba(0, 0, 0, 0.28))
        drop-shadow(0 0 32px rgba(151, 53, 255, 0.10));
}

.section-media.media-card {
    overflow: hidden;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.015)
        );
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.section-media.media-card img {
    max-width: 100%;
    border-radius: 20px;
}

.section-media.media-light {
    padding: 10px;
    border-radius: 28px;
    background: #f7f1e8;
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.24),
        0 0 40px rgba(213, 165, 59, 0.06);
}

.section-media.media-light img {
    max-width: 100%;
    border-radius: 20px;
}

.hero .hero-grid {
    align-items: center;
}

.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-visual::before {
    content: "";
    position: absolute;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(133, 41, 210, 0.22) 0%,
            rgba(212, 167, 44, 0.08) 38%,
            transparent 70%
        );
    filter: blur(14px);
    pointer-events: none;
}

.hero-visual img {
    position: relative;
    z-index: 1;
    display: block;
    width: min(100%, 590px);
    height: auto;
}

.editorial-image-caption {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.44);
    font-size: 0.75rem;
    line-height: 1.45;
    text-align: center;
}

@media (max-width: 980px) {

    .content-media-grid,
    .content-media-grid.media-left {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .content-media-grid.media-left .section-media {
        order: 2;
    }

    .content-media-grid.media-left .section-copy {
        order: 1;
    }

    .section-media img,
    .section-media.media-large img {
        max-width: 520px;
    }

    .hero-visual {
        margin-top: 24px;
    }

}

@media (max-width: 640px) {

    .content-media-grid,
    .content-media-grid.media-left {
        gap: 26px;
    }

    .section-media img,
    .section-media.media-large img {
        max-width: 390px;
    }

    .section-media.media-card,
    .section-media.media-light {
        padding: 7px;
        border-radius: 20px;
    }

    .section-media.media-card img,
    .section-media.media-light img {
        border-radius: 15px;
    }

    .hero-visual img {
        width: min(100%, 430px);
    }

}