@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Montserrat:wght@600;700;800;900&display=swap');

/* ── VARIABLES ── */
:root {
    --bg:       #090a14;
    --surface:  #10111f;
    --card:     #161728;
    --border:   rgba(255,255,255,0.07);
    --accent:   #ff6a00;
    --gold:     #ffb347;
    --glow:     rgba(255,106,0,0.25);
    --text:     #f2f2f2;
    --muted:    rgba(242,242,242,0.55);
    --r:        12px;
    --rsm:      8px;
    --maxw:     1280px;
    --hh:       72px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
    line-height: 1.6;
}
a { color: var(--accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gold); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 0; }

/* ── UTILITY ── */
.w { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ── BUTTONS ── */
.gb, .gbo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: var(--rsm);
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
    text-decoration: none;
}

.gb {
    background: linear-gradient(135deg, var(--accent) 0%, var(--gold) 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 16px var(--glow);
}
.gb:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(255,106,0,.45);
    color: #fff;
    text-decoration: none;
}

.gbo {
    background: transparent;
    color: var(--text);
    border: 1.5px solid var(--border);
}
.gbo:hover {
    border-color: rgba(255,106,0,.5);
    color: var(--accent);
    text-decoration: none;
}

/* ── HEADER ── */
.hd {
    position: fixed;
    inset: 0 0 auto;
    z-index: 900;
    height: var(--hh);
    background: rgba(9,10,20,.93);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}
.hd-in {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
}
.hd-logo {
    flex-shrink: 0;
    width: 200px;
    height: 36px;
    background: url('../img/logo.svg') no-repeat left center / contain;
    display: block;
}
.hd-nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.hd-nav a {
    font-size: 14px;
    font-weight: 600;
    color: rgba(242,242,242,.72);
    padding: 8px 14px;
    border-radius: var(--rsm);
    transition: color .2s, background .2s;
}
.hd-nav a:hover {
    color: #fff;
    background: rgba(255,255,255,.06);
    text-decoration: none;
}
.hd-btns {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.hd-mob-su { display: none; }

/* ── DRAWER ── */
.drw {
    position: fixed;
    top: 0;
    right: -300px;
    width: 280px;
    height: 100vh;
    background: var(--surface);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border);
    transition: right .3s ease;
}
.drw.open { right: 0; }
.drw-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
}
.drw-top strong {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #fff;
}
.drw-x {
    background: none;
    border: none;
    font-size: 26px;
    color: var(--text);
    cursor: pointer;
    line-height: 1;
}
.drw-nav {
    flex: 1;
    padding: 14px;
    overflow-y: auto;
}
.drw-nav a {
    display: block;
    padding: 11px 14px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(242,242,242,.78);
    border-radius: var(--rsm);
    transition: background .2s, color .2s;
}
.drw-nav a:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
    text-decoration: none;
}
.drw-foot {
    padding: 18px 22px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.drw-foot .gb { width: 100%; font-size: 15px; padding: 12px; border-radius: var(--r); }

/* ── VEIL ── */
.vl {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
.vl.on { opacity: 1; pointer-events: auto; }

/* ── HERO ── */
.hero {
    position: relative;
    min-height: 82vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('../img/welcome-offer.png');
    background-size: auto 100%;
    background-position: right center;
    background-repeat: no-repeat;
    z-index: 0;
    transform: scale(1.03);
    filter: blur(1.5px);
}
.hero-fog {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(9,10,20,1)    0%,
        rgba(9,10,20,.98)  35%,
        rgba(9,10,20,.78)  58%,
        rgba(9,10,20,.25)  100%
    );
    z-index: 1;
}
.hero-body {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: var(--hh);
}
.hero-in {
    max-width: 580px;
    padding: 90px 0 70px;
}
.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(255,106,0,.1);
    border: 1px solid rgba(255,106,0,.3);
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 22px;
}
.hero-h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(38px, 5.5vw, 72px);
    font-weight: 900;
    line-height: 1.06;
    color: #fff;
    margin-bottom: 6px;
}
.hero-h1 em {
    font-style: normal;
    background: linear-gradient(135deg, var(--accent), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-offer {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(22px, 3vw, 40px);
    font-weight: 800;
    color: #fff;
    margin-bottom: 18px;
    line-height: 1.2;
}
.hero-desc {
    font-size: 16px;
    color: rgba(242,242,242,.68);
    margin-bottom: 36px;
    max-width: 460px;
    line-height: 1.7;
}
.hero-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.hero-cta .gb { font-size: 16px; padding: 14px 34px; border-radius: 10px; }
.hero-cta .gbo { font-size: 16px; padding: 13px 28px; border-radius: 10px; }
.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.hb-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: rgba(242,242,242,.58);
}
.hb-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    flex-shrink: 0;
}

/* ── RIBBON ── */
.ribbon {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.ribbon-row {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.rn-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px 16px;
    text-align: center;
    border-right: 1px solid var(--border);
}
.rn-cell:last-child { border-right: none; }
.rn-val {
    font-family: 'Montserrat', sans-serif;
    font-size: 34px;
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 5px;
}
.rn-lbl {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ── SECTION GENERIC ── */
.sec { padding: 80px 0; }
.sec-bg { background: var(--surface); }
.sec-hd {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
}
.sec-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}
.sec-title b { color: var(--accent); font-weight: 800; }
.sec-more {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
}
.sec-more:hover { color: var(--gold); text-decoration: none; }

/* ── GAME TABS ── */
.gtabs {
    display: flex;
    gap: 6px;
    margin-bottom: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.gtabs::-webkit-scrollbar { display: none; }
.gtab {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 100px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--muted);
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}
.gtab:hover, .gtab.on {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 4px 14px var(--glow);
}

/* ── GAME GRID ── */
.gg {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
.gc {
    border-radius: var(--r);
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--border);
    position: relative;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.gc:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(0,0,0,.55), 0 0 0 1px rgba(255,106,0,.3);
    border-color: rgba(255,106,0,.3);
}
.gc-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.gc-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .4s ease, filter .3s;
}
.gc:hover .gc-img { transform: scale(1.1); filter: brightness(.5); }
.gci-1 { background-image: url('../img/slot2.jpg'); }
.gci-2 { background-image: url('../img/slot3.jpg'); }
.gci-3 { background-image: url('../img/slot4.jpg'); }
.gci-4 { background-image: url('../img/slot5.jpg'); }
.gci-5 { background-image: url('../img/slot6.jpg'); }
.gc-ov {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity .25s;
    z-index: 2;
}
.gc:hover .gc-ov { opacity: 1; }
.gc-ov .gb { font-size: 12px; padding: 7px 18px; border-radius: var(--rsm); }
.gc-demo {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.4);
    padding: 5px 14px;
    border-radius: var(--rsm);
    transition: background .2s;
}
.gc-demo:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
    text-decoration: none;
}
.gc-info { padding: 10px 12px 12px; }
.gc-name {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .3px;
    line-height: 1.3;
    margin-bottom: 3px;
}
.gc-prov {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: .5px;
}

/* ── LOBBY TILES ── */
.lt-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 36px;
}
.lt {
    position: relative;
    height: 185px;
    border-radius: var(--r);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 22px;
    text-decoration: none;
    transition: transform .3s;
}
.lt:hover { transform: scale(1.02); text-decoration: none; }
.lt-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .4s;
}
.lt:hover .lt-bg { transform: scale(1.06); }
.lt-casino .lt-bg { background-image: url('../img/Casino-v3.png'); }
.lt-sports .lt-bg { background-image: url('../img/Sport-v1.png'); }
.lt-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(255,106,0,.6) 0%, transparent 65%);
    z-index: 1;
}
.lt-lbl {
    position: relative;
    z-index: 2;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    gap: 10px;
}
.lt-ico {
    width: 26px;
    height: 26px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}
.lt-ico-c { background-image: url('../img/casino_icon.png'); }
.lt-ico-s { background-image: url('../img/sports_icon.png'); }

/* ── BONUS SECTION ── */
.bn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 36px;
}
.bn-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 34px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: border-color .25s, transform .25s, box-shadow .25s;
}
.bn-card:hover {
    border-color: rgba(255,106,0,.45);
    transform: translateY(-5px);
    box-shadow: 0 18px 48px rgba(0,0,0,.4), 0 0 36px rgba(255,106,0,.12);
}
.bn-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
}
.bn-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--gold));
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 18px;
    box-shadow: 0 4px 16px var(--glow);
}
.bn-pct {
    font-family: 'Montserrat', sans-serif;
    font-size: 54px;
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 2px;
}
.bn-up {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 6px;
}
.bn-amt {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 14px;
}
.bn-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.bn-cta { text-align: center; }
.bn-cta .gb { font-size: 16px; padding: 14px 42px; border-radius: 10px; }

/* ── VIP CARDS ── */
.vp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.vp-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 28px 20px;
    position: relative;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
}
.vp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(0,0,0,.4);
}
.vp-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
}
.vp-bronze::before { background: linear-gradient(90deg, #cd7f32, #e8a87c); }
.vp-silver::before { background: linear-gradient(90deg, #9e9e9e, #e0e0e0); }
.vp-gold::before   { background: linear-gradient(90deg, var(--accent), var(--gold)); }
.vp-plat::before   { background: linear-gradient(90deg, #b0c4de, #dce8f8); }
.vp-badge {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 100px;
    margin-bottom: 14px;
}
.vp-bronze .vp-badge { background: rgba(205,127,50,.14); color: #e8a87c; }
.vp-silver .vp-badge { background: rgba(158,158,158,.14); color: #d0d0d0; }
.vp-gold   .vp-badge { background: rgba(255,106,0,.14);   color: var(--gold); }
.vp-plat   .vp-badge { background: rgba(176,196,222,.14); color: #b0c4de; }
.vp-req {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
    margin-bottom: 14px;
}
.vp-list {
    list-style: none;
    padding: 0;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}
.vp-list li {
    font-size: 13px;
    color: rgba(242,242,242,.75);
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
    display: flex;
    gap: 8px;
}
.vp-list li::before {
    content: '✓';
    color: var(--accent);
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 2px;
}
.vp-list li:last-child { border-bottom: none; }

/* ── CRYPTO STRIP ── */
.cp-strip {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 36px 0;
}
.cp-in {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
.cp-lbl {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    flex-shrink: 0;
    white-space: nowrap;
}
.cp-img {
    height: 56px;
    background-image: url('../img/payments.jpg');
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    flex: 1;
    min-width: 200px;
}

/* ── REVIEW ── */
.rv-sec {
    padding: 80px 0;
}
.rv-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 56px 60px;
}
.rv-art { max-width: 840px; margin: 0 auto; }

.rv-art h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 20px;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--border);
}
.rv-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 12.5px;
    color: var(--muted);
    margin-bottom: 34px;
    padding: 11px 16px;
    background: rgba(255,106,0,.05);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--rsm) var(--rsm) 0;
}
.rv-meta span { display: flex; align-items: center; gap: 6px; }
.rv-meta time { color: rgba(242,242,242,.9); }
.rv-meta-ico {
    width: 13px;
    height: 13px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .6;
    flex-shrink: 0;
}
.rv-ico-date {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ff6a00" viewBox="0 0 24 24"><path d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
}
.rv-ico-upd {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ff6a00" viewBox="0 0 24 24"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>');
}
.rv-ico-auth {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ff6a00" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
}
.rv-art img {
    display: none;
}
.rv-art h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 700;
    color: #fff;
    margin: 40px 0 14px;
    padding-left: 14px;
    border-left: 4px solid var(--accent);
    line-height: 1.3;
}
.rv-art h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(15px, 2vw, 19px);
    font-weight: 600;
    color: rgba(242,242,242,.9);
    margin: 28px 0 12px;
    line-height: 1.4;
}
.rv-art p {
    font-size: 15px;
    line-height: 1.78;
    color: rgba(242,242,242,.82);
    margin: 0 0 18px;
}
.rv-art ul, .rv-art ol { padding-left: 22px; margin: 0 0 18px; }
.rv-art li {
    font-size: 15px;
    line-height: 1.75;
    color: rgba(242,242,242,.82);
    margin-bottom: 8px;
}
.rv-art a { color: var(--text); }
.rv-art a:hover { color: var(--text); text-decoration: underline; }
.rv-art div[style*="overflow-x"] { margin: 16px 0 28px; border-radius: var(--r); }
.rv-tbl {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
    border-radius: var(--r);
    overflow: hidden;
    font-size: 14px;
}
.rv-tbl th {
    background: var(--accent);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    padding: 13px 18px;
    text-align: left;
    white-space: nowrap;
}
.rv-tbl td {
    padding: 12px 18px;
    color: rgba(242,242,242,.88);
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.rv-tbl tbody tr:nth-child(odd) td  { background: rgba(9,10,20,.5); }
.rv-tbl tbody tr:nth-child(even) td { background: rgba(22,23,40,.5); }
.rv-tbl tbody tr:hover td { background: rgba(255,106,0,.1); }
.rv-tbl tbody tr:last-child td { border-bottom: none; }

/* ── FAQ ── */
.fq-sec { background: var(--surface); padding: 80px 0; }
.fq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}
.fq-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    transition: border-color .2s;
}
.fq-item:hover, .fq-item.open { border-color: rgba(255,106,0,.35); }
.fq-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    transition: color .2s;
}
.fq-item.open .fq-btn { color: var(--accent); }
.fq-plus {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,106,0,.1);
    border: 1px solid rgba(255,106,0,.28);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 300;
    color: var(--accent);
    line-height: 1;
    transition: transform .25s, background .2s;
}
.fq-item.open .fq-plus { transform: rotate(45deg); background: rgba(255,106,0,.2); }
.fq-body { display: none; padding: 0 22px 20px; }
.fq-item.open .fq-body { display: block; }
.fq-body p {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(242,242,242,.78);
    margin: 0;
}

/* ── BOTTOM MOBILE NAV ── */
.mnav {
    position: fixed;
    inset: auto 0 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: none;
    justify-content: space-around;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    z-index: 800;
}
.mn-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 4px 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 500;
    min-width: 52px;
    border-radius: var(--rsm);
    transition: color .2s;
}
.mn-btn:hover { color: var(--accent); }
.mn-ico {
    width: 22px;
    height: 22px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.mn-menu   { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ff6a00" viewBox="0 0 24 24"><path d="M3 18v-2h18v2H3zm0-5v-2h18v2H3zm0-5V6h18v2H3z"/></svg>'); }
.mn-search { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23ff6a00" stroke-width="2.2" stroke-linecap="round" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>'); }
.mn-dice   { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ff6a00" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="3" ry="3"/><circle cx="7" cy="7" r="1.2" fill="white"/><circle cx="17" cy="7" r="1.2" fill="white"/><circle cx="12" cy="12" r="1.2" fill="white"/><circle cx="7" cy="17" r="1.2" fill="white"/><circle cx="17" cy="17" r="1.2" fill="white"/></svg>'); }
.mn-help   { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ff6a00" viewBox="0 0 24 24"><path d="M12 1C5.93 1 1 5.93 1 12v4c0 1.66 1.34 3 3 3h1V12H4c0-4.42 3.58-8 8-8s8 3.58 8 8h-1v7h1c1.66 0 3-1.34 3-3v-4c0-6.07-4.93-11-11-11z"/></svg>'); }

/* ── FOOTER ── */
.ft {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 60px 0 28px;
}
.ft-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--border);
}
.ft-brand {}
.ft-logo {
    display: block;
    width: 190px;
    height: 34px;
    background: url('../img/logo.svg') no-repeat left center / contain;
    margin-bottom: 16px;
}
.ft-brand p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.65;
    margin-bottom: 20px;
    max-width: 280px;
}
.ft-socials { display: flex; gap: 8px; }
.ft-soc {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.07);
    border-radius: var(--rsm);
    color: rgba(242,242,242,.7);
    transition: background .2s, color .2s, transform .2s;
}
.ft-soc:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}
.ft-col h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,106,0,.28);
}
.ft-col ul { list-style: none; padding: 0; margin: 0; }
.ft-col li { margin-bottom: 10px; }
.ft-col a {
    font-size: 13px;
    color: rgba(242,242,242,.58);
    transition: color .2s;
}
.ft-col a:hover { color: #fff; text-decoration: none; }
.ft-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.ft-lic {
    width: 80px;
    height: 40px;
    background: url('../img/razed-licence.png') no-repeat center / contain;
    flex-shrink: 0;
    display: block;
}
.ft-copy { flex: 1; text-align: center; }
.ft-copy p {
    font-size: 11.5px;
    color: rgba(242,242,242,.42);
    line-height: 1.6;
    margin: 0;
}
.ft-copy p + p { margin-top: 4px; }
.ft-copy a { color: rgba(242,242,242,.42); }
.ft-copy a:hover { color: rgba(242,242,242,.75); text-decoration: none; }
.ft-age {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    color: #111;
    flex-shrink: 0;
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
    .gg { grid-template-columns: repeat(4, 1fr); }
    .ft-top { grid-template-columns: 1fr 1fr 1fr; }
    .ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .vp-grid { grid-template-columns: repeat(2, 1fr); }
    .ribbon-row { grid-template-columns: repeat(2, 1fr); }
    .rn-cell:nth-child(2) { border-right: none; }
    .rn-cell:nth-child(3) { border-top: 1px solid var(--border); }
    .gg { grid-template-columns: repeat(3, 1fr); }
    .bn-grid { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto 36px; }
}
@media (max-width: 768px) {
    .hd-nav    { display: none; }
    .hd-btns   { display: none; }
    .hd-mob-su { display: inline-flex; margin-left: auto; }
    .mnav { display: flex; }
    body { padding-bottom: 64px; }
    .hero-in { padding: 60px 0; }
    .lt-row { grid-template-columns: 1fr; gap: 12px; }
    .lt { height: 148px; }
    .vp-grid { grid-template-columns: 1fr 1fr; }
    .gg { grid-template-columns: repeat(2, 1fr); }
    .rv-wrap { padding: 30px 20px; }
    .rv-art h1 { font-size: 24px; }
    .rv-art h2 { font-size: 19px; }
    .rv-art img { float: none; width: 100%; max-width: 100%; margin: 0 0 20px; }
    .ft-top { grid-template-columns: 1fr 1fr; gap: 24px; }
    .ft-brand { grid-column: 1 / -1; }
    .ft-bottom { flex-direction: column; text-align: center; }
    .sec { padding: 56px 0; }
    .sec-hd { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 480px) {
    .hero-cta { flex-direction: column; align-items: flex-start; }
    .gg { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .vp-grid { grid-template-columns: 1fr; }
    .ribbon-row { grid-template-columns: repeat(2, 1fr); }
    .ft-top { grid-template-columns: 1fr; }
    .rv-wrap { padding: 22px 14px; }
    .rv-tbl th, .rv-tbl td { padding: 10px 12px; font-size: 13px; }
    .fq-btn { font-size: 13px; padding: 15px 16px; }
}