/* ==========================================================================
   Casino Tosset — main.css
   Дизайн ТЗ §5 · пресет B (доверие/комплаенс) · холодные тона + тёплый акцент
   Разделы: 1 Fonts · 2 Tokens · 3 Reset/Base · 4 Typografi · 5 Layout
            6 Buttons · 7 RG-bar · 8 Header/Nav · 9 Footer · 10 Cookie
            11 Components · 12 Pages · 13 Animations/Utilities · 14 Responsive
   ========================================================================== */

/* ---------- 1. Fonts (self-host, swap) ---------------------------------- */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: 'Sora';
    src: url('../fonts/sora-variable.woff2') format('woff2');
    font-weight: 400 800;
    font-display: swap;
    font-style: normal;
}

/* ---------- 2. Design tokens -------------------------------------------- */
:root {
    /* Палитра — холодная база, тёплый акцент, trust-зелёный */
    --bg:            #f7f8fc; /* мягкий холодный канвас (не стерильно-белый) */
    --bg-soft:       #eef1f8;
    --bg-sunken:     #e6eaf4;
    --surface:       #ffffff;
    --navy:          #0a1830; /* глубокий холодный — hero accents/футер */
    --navy-700:      #13294a;
    --navy-glass:    rgba(10,24,48,.04);
    --ink:           #111e34; /* основной текст, холодный navy */
    --ink-2:         #4c5c75; /* вторичный */
    --ink-3:         #5f6d83; /* приглушённый — затемнён до WCAG AA 4.5:1 на светлом */
    --line:          #e4e8f1;
    --line-strong:   #cdd6e4;
    --accent:        #ef5a24; /* оранжево-красный — CTA/акценты */
    --accent-600:    #d44b1a;
    --accent-700:    #b63f15;
    --accent-soft:   #fdece4;
    --accent-glow:   rgba(239,90,36,.32);
    --accent-ink:    #ffffff;
    --trust:         #157a47; /* лицензия/безопасность */
    --trust-soft:    #e4f2ea;
    --trust-strong:  #0f6238;
    --warn:          #a85d0a;
    --warn-soft:     #fbf1e2;
    --star:          #e7a338;
    --gold:          #d99a2b;

    /* Типографика */
    --font-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    --fs-50: 0.78rem;
    --fs-75: 0.875rem;
    --fs-100: 1rem;      /* base 16px */
    --fs-200: 1.125rem;
    --fs-300: 1.25rem;
    --fs-400: 1.5rem;
    --fs-500: 1.85rem;
    --fs-600: 2.25rem;
    --fs-700: 2.85rem;
    --fs-800: 3.5rem;
    --lh-tight: 1.12;
    --lh-snug: 1.3;
    --lh-body: 1.65;

    /* Сетка/радиусы/тени (8px-шкала) */
    --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
    --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4rem;
    --space-9: 6rem;
    --radius-sm: 9px; --radius: 16px; --radius-lg: 22px; --radius-xl: 28px; --radius-pill: 999px;
    --shadow-xs: 0 1px 2px rgba(17,30,52,.05), 0 1px 1px rgba(17,30,52,.03);
    --shadow-sm: 0 2px 6px rgba(17,30,52,.05), 0 6px 16px rgba(17,30,52,.05);
    --shadow:    0 4px 12px rgba(17,30,52,.06), 0 16px 38px rgba(17,30,52,.09);
    --shadow-lg: 0 8px 24px rgba(17,30,52,.10), 0 32px 64px rgba(17,30,52,.16);
    --shadow-accent: 0 8px 22px rgba(239,90,36,.30);
    --ring: 0 0 0 3px rgba(239,90,36,.28);

    --container: 1180px;
    --header-h: 70px;
    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 3. Reset / Base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}
body {
    font-family: var(--font-body);
    font-size: var(--fs-100);
    line-height: var(--lh-body);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
table { border-collapse: collapse; width: 100%; }
strong, b { font-weight: 650; }

/* Базовый размер иконок (контекстные правила переопределяют по месту).
   Защита от «разъехавшихся» инлайн-иконок без явного размера. */
.icon { width: 1.2em; height: 1.2em; flex: none; display: inline-block; vertical-align: -0.18em; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 1000;
    background: var(--accent); color: #fff; padding: .6rem 1rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- 4. Typografi ------------------------------------------------ */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-tight); color: var(--ink); font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: clamp(2rem, 4.5vw, var(--fs-800)); }
h2 { font-size: clamp(1.6rem, 3vw, var(--fs-600)); }
h3 { font-size: var(--fs-400); }
h4 { font-size: var(--fs-200); }
p { text-wrap: pretty; }
a.link, .prose a { color: var(--accent-700); text-decoration: underline; text-underline-offset: 2px; }
a.link:hover, .prose a:hover { color: var(--accent); }

.eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .4rem .85rem .4rem .65rem; border-radius: var(--radius-pill);
    background: var(--surface); border: 1px solid var(--line);
    box-shadow: var(--shadow-xs);
    font-family: var(--font-body); font-weight: 650; font-size: var(--fs-50);
    letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2);
}
.eyebrow .icon { width: 15px; height: 15px; color: var(--accent); }
.eyebrow--light { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #d7e0ee; }
.eyebrow--light .icon { color: #ff9a73; }
.lead { font-size: var(--fs-200); color: var(--ink-2); line-height: 1.62; }

/* ---------- 5. Layout --------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
.section { padding-block: clamp(3.25rem, 7vw, var(--space-9)); }
.section--soft { background: var(--bg-soft); }
.section--sunken { background: var(--bg-sunken); }
.section--white { background: var(--surface); }
.section__head { max-width: 62ch; margin-bottom: var(--space-6); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title { margin-top: var(--space-3); position: relative; }
.section__title::after { content: ""; display: block; width: 52px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent), #ffa177); margin-top: var(--space-4); }
.section__head--center .section__title::after { margin-inline: auto; }
.section__sub { margin-top: var(--space-4); color: var(--ink-2); font-size: var(--fs-200); }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 6. Buttons -------------------------------------------------- */
.btn {
    --btn-bg: var(--ink); --btn-fg: #fff;
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .9rem 1.5rem; border-radius: var(--radius-pill);
    font-weight: 650; font-size: var(--fs-100); line-height: 1; white-space: nowrap; letter-spacing: -.01em;
    background: var(--btn-bg); color: var(--btn-fg);
    border: 1px solid transparent;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.btn .icon { width: 1.15em; height: 1.15em; position: relative; z-index: 1; }
.btn > * { position: relative; z-index: 1; }
/* блик при hover */
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s var(--ease); }
.btn:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn--primary { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); box-shadow: var(--shadow-accent); }
.btn--primary:hover { --btn-bg: var(--accent-600); box-shadow: 0 10px 28px var(--accent-glow); }
.btn--dark { --btn-bg: var(--navy); --btn-fg: #fff; }
.btn--ghost { --btn-bg: var(--surface); --btn-fg: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-xs); }
.btn--ghost:hover { --btn-bg: var(--surface); border-color: var(--ink-3); box-shadow: var(--shadow-sm); }
.btn--ghost::after { display: none; }
.btn--sm { padding: .62rem 1.05rem; font-size: var(--fs-75); }
.btn--lg { padding: 1.05rem 1.8rem; font-size: var(--fs-200); }
.btn--block { width: 100%; }

/* ---------- 7. RG-bar --------------------------------------------------- */
.rg-bar { background: var(--navy); color: #dce6f3; font-size: var(--fs-75); }
.rg-bar__inner { display: flex; align-items: center; gap: .75rem; justify-content: center; padding-block: .5rem; text-align: center; flex-wrap: wrap; }
.rg-bar__age {
    flex: none; font-weight: 800; font-size: var(--fs-50); letter-spacing: .03em;
    background: var(--accent); color: #fff; padding: .15rem .5rem; border-radius: 6px;
}
.rg-bar__text { margin: 0; }
.rg-bar__text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.rg-bar__text a:hover { color: var(--accent); }
.rg-bar__sep { opacity: .5; }

/* ---------- 8. Header / Nav --------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.86); backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .2s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.site-header__inner { display: flex; align-items: center; gap: var(--space-5); height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-300); color: var(--ink); }
.brand__logo { height: 38px; width: auto; display: block; }
.brand--footer .brand__logo { height: 40px; }
.brand__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--navy); color: #fff; }
.brand__mark .icon { width: 20px; height: 20px; }
.brand__accent { color: var(--accent); }

.main-nav { margin-left: auto; }
.main-nav__list { display: flex; align-items: center; gap: var(--space-2); }
.main-nav__link {
    display: inline-block; padding: .55rem .8rem; border-radius: var(--radius-sm);
    font-weight: 550; font-size: var(--fs-75); color: var(--ink-2);
    transition: color .15s var(--ease), background .15s var(--ease);
}
.main-nav__link:hover { color: var(--ink); background: var(--bg-soft); }
.main-nav__link.is-active { color: var(--accent-700); }
.header-cta { flex: none; }

.nav-toggle { display: none; width: 44px; height: 44px; place-items: center; color: var(--ink); border-radius: 10px; }
.nav-toggle .icon { width: 26px; height: 26px; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

.mobile-nav { display: none; border-top: 1px solid var(--line); background: var(--surface); }
.mobile-nav__list { padding: var(--space-3) var(--space-5); }
.mobile-nav__link {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem .4rem; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--ink);
}
.mobile-nav__link .icon { width: 18px; height: 18px; color: var(--ink-3); }
.mobile-nav__link.is-active { color: var(--accent-700); }
.mobile-nav .btn { margin: var(--space-4) var(--space-5) var(--space-5); width: calc(100% - var(--space-5) * 2); }

/* ---------- 9. Footer --------------------------------------------------- */
.site-footer { background: var(--navy); color: #c7d3e3; padding-block: var(--space-8) var(--space-5); margin-top: var(--space-8); font-size: var(--fs-75); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid rgba(255,255,255,.1); }
.site-footer .brand--footer { color: #fff; margin-bottom: var(--space-3); }
.site-footer .brand__mark { background: rgba(255,255,255,.1); }
.site-footer__about { color: #9fb0c6; margin-bottom: var(--space-4); }
.site-footer__org { color: #c7d3e3; margin-bottom: var(--space-3); line-height: 1.55; }
.site-footer__contact a { color: #c7d3e3; display: inline-flex; align-items: center; gap: .4rem; }
.site-footer__contact a:hover { color: #fff; }
.site-footer__contact .icon { width: 15px; height: 15px; color: var(--accent); }
.site-footer__heading { font-family: var(--font-body); font-size: var(--fs-75); text-transform: uppercase; letter-spacing: .08em; color: #fff; margin-bottom: var(--space-3); }
.site-footer__links li { margin-bottom: .5rem; }
.site-footer__links a { color: #a8b8cd; display: inline-flex; align-items: center; gap: .45rem; padding-block: 4px; }
.site-footer__links a:hover { color: #fff; }
.site-footer__links .icon { width: 14px; height: 14px; color: var(--accent); flex: none; }
.site-footer__rg-age { display: flex; align-items: center; gap: .5rem; margin-bottom: var(--space-2); color: #c7d3e3; }
.site-footer__rg-warn { font-size: var(--fs-50); color: #94a6c0; margin-bottom: var(--space-3); line-height: 1.5; }
.site-footer__disclosure { display: flex; gap: .7rem; align-items: flex-start; padding: var(--space-4) 0; color: #9fb0c6; border-bottom: 1px solid rgba(255,255,255,.1); }
.site-footer__disclosure .icon { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: 2px; }
.site-footer__disclosure a { color: #cdd9e8; text-decoration: underline; }
.site-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-top: var(--space-4); color: #8597af; }

/* ---------- 10. Cookie consent ------------------------------------------ */
.cookie-consent { position: fixed; inset: auto var(--space-4) var(--space-4); z-index: 300; max-width: 560px; margin-inline: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.cookie-consent__inner { padding: var(--space-5); }
.cookie-consent__title { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-300); }
.cookie-consent__title .icon { width: 20px; height: 20px; color: var(--trust); }
.cookie-consent__desc { color: var(--ink-2); font-size: var(--fs-75); margin-top: var(--space-2); }
.cookie-consent__desc a { color: var(--accent-700); text-decoration: underline; }
.cookie-consent__options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); margin-block: var(--space-4); }
.cookie-consent__option { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-75); }
.cookie-consent__option input { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.cookie-consent__option.is-locked { opacity: .8; }
.cookie-consent__option-text { display: flex; flex-direction: column; }
.cookie-consent__option-name { font-weight: 650; color: var(--ink); }
.cookie-consent__option-note { color: var(--ink-3); font-size: var(--fs-50); }
.cookie-consent__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.cookie-reopen { position: fixed; left: var(--space-4); bottom: var(--space-4); z-index: 250; width: 44px; height: 44px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 50%; box-shadow: var(--shadow); color: var(--ink-2); }
.cookie-reopen .icon { width: 20px; height: 20px; }
.cookie-reopen:hover { color: var(--accent); }

/* ---------- 11. Shared components --------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: var(--radius-pill); font-size: var(--fs-50); font-weight: 650; line-height: 1.4; }
.badge .icon { width: 14px; height: 14px; }
.badge--trust { background: var(--trust-soft); color: var(--trust); }
.badge--accent { background: var(--accent-soft); color: var(--accent-700); }
.badge--neutral { background: var(--bg-sunken); color: var(--ink-2); }

.stars { display: inline-flex; gap: 2px; }
.stars .star .icon { width: 16px; height: 16px; color: var(--line-strong); }
.stars .star.is-filled .icon { color: var(--star); fill: var(--star); }

.card { background: linear-gradient(165deg, #ffffff 0%, #f3f6fc 100%); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); }

.prose { max-width: 72ch; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-5); }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: .4rem; }
.prose li::marker { color: var(--accent); }

.breadcrumbs { font-size: var(--fs-75); color: var(--ink-3); padding-block: var(--space-4); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.breadcrumbs a:hover { color: var(--accent-700); }
.breadcrumbs .sep { color: var(--line-strong); }

/* ---------- 13. Animations / utilities ---------------------------------- */
/* Reveal только при активном JS (progressive enhancement: без JS контент виден) */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: .24s; }

.scroll-top { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 240; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.scroll-top.is-visible { opacity: 1; transform: none; }
.scroll-top .icon { width: 22px; height: 22px; }

.text-center { text-align: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- 14. Responsive (global) ------------------------------------- */
@media (max-width: 980px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .main-nav, .header-cta { display: none; }
    .nav-toggle { display: grid; }
    .mobile-nav { display: block; }
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
    .cookie-consent__options { grid-template-columns: 1fr; }
    .cookie-consent { inset: auto var(--space-3) var(--space-3); }
}
@media (max-width: 480px) {
    .site-footer__grid { grid-template-columns: 1fr; }
    .site-footer__bottom { flex-direction: column; }
}

/* ==========================================================================
   12. Casino components & review page
   ========================================================================== */

/* Плашка с логотипом оператора — фиксированный КВАДРАТ, единый размер.
   Логотип вписывается по contain (light = тёмное лого на белом, dark = белое на navy). */
.casino-logo {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 60px; height: 60px; padding: 10px; overflow: hidden;
    border-radius: 14px; box-shadow: var(--shadow-xs);
}
.casino-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.casino-logo--light { background: #fff; border: 1px solid var(--line); }
.casino-logo--dark { background: linear-gradient(150deg, #15294a, #0c1d39); border: 1px solid rgba(255,255,255,.10); }
.casino-logo--lg { width: 84px; height: 84px; padding: 14px; border-radius: 18px; }
.casino-logo--sm { width: 44px; height: 44px; padding: 6px; border-radius: 10px; box-shadow: none; }
.casino-logo__txt { font-family: var(--font-display); font-weight: 700; font-size: .64rem; line-height: 1.05; text-align: center; letter-spacing: -.01em; }
.casino-logo--dark .casino-logo__txt { color: #fff; }
.casino-logo--light .casino-logo__txt { color: var(--navy-700); }

/* --- Casino card --- */
.casino-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); overflow: hidden;
    background: linear-gradient(168deg, #ffffff 0%, #eef2fb 100%); }
.casino-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--line-strong), transparent 70%); opacity: 0; transition: opacity .2s var(--ease); }
.casino-card:hover::before { opacity: 1; }
.casino-card--featured { border-color: #f4c98a; box-shadow: 0 10px 34px rgba(217,154,43,.16); }
.casino-card--featured::before { background: linear-gradient(90deg, var(--gold), var(--accent)); opacity: 1; }
.casino-card__top { display: flex; align-items: center; gap: var(--space-3); }
.casino-card__rank { display: grid; place-items: center; min-width: 38px; height: 38px; border-radius: 11px; background: var(--bg-soft); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-200); color: var(--ink-3); }
.casino-card--featured .casino-card__rank { background: linear-gradient(180deg, #fff4e2, #ffe9c9); color: var(--gold); }
.casino-card__rating { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-75); }
.casino-card__rating strong { font-size: var(--fs-200); }
.casino-card__head { display: flex; gap: var(--space-3); align-items: center; }
.casino-card__name { font-size: var(--fs-300); }
.casino-card__name a:hover { color: var(--accent-700); }
.casino-card__tagline { color: var(--ink-2); font-size: var(--fs-75); }
.casino-card__license { align-self: flex-start; }
.casino-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.casino-card__stats > div { background: var(--surface); padding: var(--space-3); }
.casino-card__stats dt { font-size: var(--fs-50); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.casino-card__stats dd { font-weight: 700; color: var(--ink); font-size: var(--fs-100); }
.casino-card__bestfor { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--fs-75); color: var(--ink-2); background: var(--bg-soft); padding: var(--space-3); border-radius: var(--radius-sm); }
.casino-card__bestfor .icon { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 2px; }
.casino-card__pros { display: flex; flex-direction: column; gap: .45rem; font-size: var(--fs-75); }
.casino-card__pros li { display: flex; gap: .5rem; align-items: flex-start; }
.casino-card__pros .icon { width: 16px; height: 16px; color: var(--trust); flex: none; margin-top: 3px; }
.casino-card__actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.casino-card__disclosure { font-size: var(--fs-50); color: var(--ink-3); text-align: center; }

/* --- Compare table --- */
.compare-wrap { --sticky-w: 160px; }
.compare-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); -webkit-overflow-scrolling: touch; }
.compare-table { border-collapse: separate; border-spacing: 0; min-width: 760px; font-size: var(--fs-75); }
.compare-table th, .compare-table td { padding: .75rem .85rem; text-align: center; border-bottom: 1px solid var(--line); }
.compare-table thead th { background: var(--bg-soft); position: sticky; top: 0; z-index: 2; vertical-align: bottom; }
.compare-table__rowhead { text-align: left !important; font-weight: 650; color: var(--ink); background: var(--surface); position: sticky; left: 0; z-index: 1; min-width: var(--sticky-w); box-shadow: 1px 0 0 var(--line); }
.compare-table thead .compare-table__rowhead { z-index: 3; background: var(--bg-soft); }
.compare-table__brand { display: inline-flex; flex-direction: column; gap: .2rem; align-items: center; font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.compare-table__brand:hover .compare-table__brand-name { color: var(--accent-700); }
.compare-table__brand-rating { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-50); color: var(--ink-2); display: inline-flex; align-items: center; gap: .2rem; }
.compare-table__brand-rating .icon { width: 13px; height: 13px; color: var(--star); fill: var(--star); }
.compare-table tbody tr:hover td, .compare-table tbody tr:hover .compare-table__rowhead { background: var(--accent-soft); }
.cell-yes { color: var(--trust); display: inline-grid; place-items: center; }
.cell-no { color: var(--ink-3); display: inline-grid; place-items: center; }
.cell-yes .icon, .cell-no .icon { width: 20px; height: 20px; }
.compare-table__cta-row td { padding-block: 1rem; }
.compare-table tr[hidden] { display: none; }
.compare-note { display: flex; gap: .5rem; align-items: flex-start; margin-top: var(--space-3); font-size: var(--fs-75); color: var(--ink-2); }
.compare-note .icon { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 2px; }
.compare-note a { color: var(--accent-700); text-decoration: underline; }

/* --- Review hero --- */
.review-hero { position: relative; overflow: hidden; background: var(--navy); color: #eaf0fa; border-bottom: 1px solid rgba(255,255,255,.06); padding-block: var(--space-6) var(--space-7); }
.review-hero::before { content: ""; position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(45% 70% at 90% -10%, rgba(239,90,36,.18), transparent 60%),
        radial-gradient(40% 60% at 0% 110%, rgba(54,108,196,.20), transparent 60%); }
.review-hero > .container { position: relative; z-index: 1; }
.review-hero__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-6); align-items: start; }
.review-hero__badges { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: var(--space-4); }
.review-hero__title { display: flex; gap: var(--space-4); align-items: center; }
.review-hero__title h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: #fff; }
.review-hero__title .lead { color: #aebed5; }
.review-hero__rating { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: var(--space-4); color: #aebed5; font-size: var(--fs-75); }
.review-hero__rating > strong { font-size: var(--fs-300); color: #fff; }
.review-hero__updated { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; }
.review-hero__updated .icon { width: 15px; height: 15px; }
.review-hero__cta { padding: var(--space-5); background: #fff; color: var(--ink); }
.review-cta__h { font-size: var(--fs-300); margin-bottom: var(--space-3); }
.review-cta__facts { display: grid; gap: .5rem; margin-bottom: var(--space-4); }
.review-cta__facts > div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); font-size: var(--fs-75); }
.review-cta__facts dt { color: var(--ink-2); }
.review-cta__facts dd { font-weight: 650; text-align: right; }
.review-cta__note { font-size: var(--fs-50); color: var(--ink-3); margin-top: var(--space-3); text-align: center; }
.review-cta__note a { color: var(--accent-700); text-decoration: underline; }

/* --- Review body --- */
.review-body { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-7); padding-block: var(--space-7); align-items: start; }
.review-content section + section { margin-top: var(--space-7); }
.review-content h2 { display: flex; align-items: center; gap: .6rem; }
.review-content h2 .icon { width: 26px; height: 26px; color: var(--accent); flex: none; }
.feature-list { display: grid; gap: var(--space-3); }
.feature-list li { display: flex; gap: .7rem; align-items: flex-start; }
.feature-list__icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; background: var(--accent-soft); color: var(--accent-700); border-radius: 10px; }
.feature-list__icon .icon { width: 20px; height: 20px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.data-table { font-size: var(--fs-75); min-width: 420px; }
.data-table th, .data-table td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--line); }
.data-table thead th { background: var(--bg-soft); font-weight: 650; }
.data-table tbody tr:last-child td { border-bottom: none; }

.proscons__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.proscons__col { padding: var(--space-4); border-radius: var(--radius); border: 1px solid var(--line); }
.proscons__col h3 { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-200); margin-bottom: var(--space-3); }
.proscons__col h3 .icon { width: 22px; height: 22px; }
.proscons__col--pro { background: var(--trust-soft); border-color: #bfe0cc; }
.proscons__col--pro h3 { color: var(--trust); }
.proscons__col--con { background: var(--warn-soft); border-color: #ecd9b8; }
.proscons__col--con h3 { color: var(--warn); }
.proscons__col ul { display: grid; gap: .5rem; }
.proscons__col li { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--fs-75); }
.proscons__col li .icon { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.proscons__col--pro li .icon { color: var(--trust); }
.proscons__col--con li .icon { color: var(--warn); }
.review-rg { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); font-size: var(--fs-75); color: var(--ink-2); }
.review-rg .icon { width: 18px; height: 18px; color: var(--accent); vertical-align: -3px; }
.review-rg a { color: var(--accent-700); text-decoration: underline; }
.review-aside__sticky { position: sticky; top: calc(var(--header-h) + 1rem); }
.review-aside__card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.review-aside__card p { font-size: var(--fs-75); color: var(--ink-2); }

@media (max-width: 880px) {
    .review-hero__grid { grid-template-columns: 1fr; }
    .review-body { grid-template-columns: 1fr; }
    .review-aside__sticky { position: static; }
    .proscons__grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .review-hero__title { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .review-hero__updated { margin-left: 0; }
}

/* ==========================================================================
   12b. Home & content pages
   ========================================================================== */

/* --- Hero --- */
.hero { position: relative; overflow: hidden; background: var(--navy); color: #eaf0fa; border-bottom: 1px solid rgba(255,255,255,.06); }
.hero__bg { position: absolute; inset: 0; z-index: 0;
    background:
        linear-gradient(90deg, rgba(10,24,48,.96) 0%, rgba(10,24,48,.78) 42%, rgba(10,24,48,.42) 100%),
        url('../img/hero-bg.webp') center right / cover no-repeat,
        linear-gradient(180deg, #0a1830, #0c1d39);
}
.hero__grain { position: absolute; inset: 0; z-index: 0; opacity: .5; mix-blend-mode: soft-light;
    background-image: radial-gradient(rgba(255,255,255,.5) .5px, transparent .5px); background-size: 4px 4px; }
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-7); align-items: center; padding-block: clamp(3rem, 7vw, 5.5rem); }
.hero .eyebrow { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: #d7e0ee; backdrop-filter: blur(4px); }
.hero .eyebrow .icon { color: #ff9a73; }
.hero__title { font-size: clamp(2.3rem, 5vw, 3.75rem); line-height: 1.05; margin-block: var(--space-4); color: #fff; letter-spacing: -.02em; }
.hero__accent { position: relative; color: #ff8c5a;
    background: linear-gradient(180deg, #ffb08a, #ef5a24); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero__lead { font-size: var(--fs-200); color: #aebed5; max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__actions .btn--ghost { --btn-bg: rgba(255,255,255,.06); --btn-fg: #fff; border-color: rgba(255,255,255,.2); backdrop-filter: blur(4px); box-shadow: none; }
.hero__actions .btn--ghost:hover { border-color: rgba(255,255,255,.4); --btn-bg: rgba(255,255,255,.1); }
.hero__stats { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.1); }
.hero__stats li { display: flex; flex-direction: column; gap: .15rem; }
.hero__stats strong { font-family: var(--font-display); font-size: var(--fs-500); color: #fff; line-height: 1; }
.hero__stats span { font-size: var(--fs-75); color: #93a4bd; }

/* Hero leaderboard */
.hero__board { padding: var(--space-4); background: rgba(255,255,255,.97); }
.hero__board-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-2) var(--space-3); }
.hero__board-title { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-200); color: var(--ink); }
.hero__board-title .icon { width: 19px; height: 19px; color: var(--gold); }
.hero__board-link { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--fs-75); font-weight: 600; color: var(--accent-700); }
.hero__board-link .icon { width: 14px; height: 14px; }
.hero__board-list { display: grid; gap: .4rem; margin-bottom: var(--space-3); }
.hero__board-item { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.hero__board-item:hover { transform: translateX(2px); box-shadow: var(--shadow-sm); border-color: var(--line-strong); }
.hero__board-item.is-first { border-color: #f4c98a; background: linear-gradient(180deg, #fffaf3, #fff); }
.hero__board-rank { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-200); color: var(--ink-3); min-width: 28px; }
.is-first .hero__board-rank { color: var(--gold); }
.hero__board-item .casino-logo { width: 48px; height: 48px; padding: 7px; border-radius: 11px; }
.hero__board-info { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.hero__board-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-100); color: var(--ink); }
.hero__board-name:hover { color: var(--accent-700); }
.hero__board-meta { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-50); color: var(--ink-2); }
.hero__board-meta .stars .star .icon { width: 12px; height: 12px; }
.hero__board-flag { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: #fff; flex: none; }
.hero__board-flag .icon { width: 16px; height: 16px; }
.hero__board-note { text-align: center; font-size: var(--fs-50); color: var(--ink-3); margin-top: var(--space-2); }

/* --- Marquee --- */
.marquee { position: relative; z-index: 1; overflow: hidden; background: var(--navy); color: #cdd9e8; border-top: 1px solid rgba(255,255,255,.08); }
.marquee__track { display: flex; gap: var(--space-6); width: max-content; padding-block: .6rem; animation: marquee 34s linear infinite; }
.marquee__track span { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-75); white-space: nowrap; }
.marquee__track .icon { width: 16px; height: 16px; color: var(--accent); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }

/* --- Value props --- */
.valueprop { position: relative; padding: var(--space-5); text-align: left; }
.valueprop__icon { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(155deg, #15294a, #0c1d39); color: #fff; margin-bottom: var(--space-4); box-shadow: var(--shadow-sm); }
.valueprop__icon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(80% 100% at 100% 0%, rgba(239,90,36,.4), transparent 60%); }
.valueprop__icon .icon { width: 24px; height: 24px; position: relative; z-index: 1; }
.valueprop h3 { font-size: var(--fs-200); margin-bottom: var(--space-2); }
.valueprop p { font-size: var(--fs-75); color: var(--ink-2); }

/* --- Casino list grid --- */
.casino-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--space-5); align-items: stretch; }
.casino-list--full { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

/* --- Chooser --- */
.chooser__card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.chooser__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: var(--bg-sunken); color: var(--navy); }
.chooser__icon .icon { width: 22px; height: 22px; }
.chooser__card h3 { font-size: var(--fs-200); }
.chooser__card p { font-size: var(--fs-75); color: var(--ink-2); flex: 1; }
.chooser__links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .7rem; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-700); font-size: var(--fs-75); font-weight: 600; border: 1px solid transparent; transition: border-color .15s var(--ease), background .15s var(--ease); }
.chip:hover { border-color: var(--accent); }
.chip .icon { width: 14px; height: 14px; }

/* --- Learn grid --- */
.learn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.learn-card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.learn-card__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--navy); color: #fff; margin-bottom: var(--space-2); }
.learn-card__icon .icon { width: 23px; height: 23px; }
.learn-card h3 { font-size: var(--fs-300); }
.learn-card p { font-size: var(--fs-75); color: var(--ink-2); flex: 1; }
.learn-card .link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.learn-card .link .icon { width: 16px; height: 16px; }

/* --- RG block --- */
.rg-block { background: var(--navy); color: #c7d3e3; }
.rg-block__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-7); align-items: center; }
.eyebrow--light { color: #ff9a73; }
.rg-block h2 { color: #fff; margin-block: var(--space-2) var(--space-3); }
.rg-block__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.btn--light { --btn-bg: rgba(255,255,255,.08); --btn-fg: #fff; border-color: rgba(255,255,255,.35); box-shadow: none; }
.btn--light:hover { --btn-bg: rgba(255,255,255,.16); border-color: rgba(255,255,255,.55); }
.btn--light::after { display: none; }
.rg-block__cards { display: grid; gap: var(--space-3); }
.rg-block__cards li { display: flex; gap: var(--space-3); align-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: var(--space-4); }
.rg-block__cards .icon { width: 24px; height: 24px; color: var(--accent); flex: none; }
.rg-block__cards strong { display: block; color: #fff; }
.rg-block__cards span { font-size: var(--fs-75); color: #9fb0c6; }

/* --- Page hero (внутренние страницы) — премиальная navy-подача --- */
.page-hero { position: relative; overflow: hidden; padding-block: var(--space-5) var(--space-7); background: var(--navy); color: #eaf0fa; border-bottom: 1px solid rgba(255,255,255,.06); }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(45% 70% at 92% 0%, rgba(239,90,36,.18), transparent 60%),
        radial-gradient(40% 60% at 0% 100%, rgba(54,108,196,.20), transparent 60%); }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .4; mix-blend-mode: soft-light;
    background-image: radial-gradient(rgba(255,255,255,.5) .5px, transparent .5px); background-size: 4px 4px; }
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 { margin-block: var(--space-3) var(--space-3); color: #fff; }
.page-hero .lead { max-width: 64ch; color: #aebed5; }
.page-hero .lead a { color: #ffb293; text-decoration: underline; }
.page-hero .eyebrow { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: #d7e0ee; }
.page-hero .eyebrow .icon { color: #ff9a73; }
.page-hero .muted-note { color: #8ea0bb; }
.page-hero .breadcrumbs { color: #8095b0; padding-top: 0; }
.page-hero .breadcrumbs a { color: #aebed5; }
.page-hero .breadcrumbs a:hover { color: #fff; }
.page-hero .breadcrumbs [aria-current] { color: #d7e0ee; }
.page-hero .breadcrumbs .sep { color: rgba(255,255,255,.25); }
.page-hero--rg::before { background: radial-gradient(50% 80% at 90% 0%, rgba(239,90,36,.22), transparent 60%); }
.page-hero .field__label { color: #aebed5; }
.page-hero .glossary-search input { background: rgba(255,255,255,.95); border-color: rgba(255,255,255,.2); }
.narrow { max-width: 880px; margin-inline: auto; }

/* --- Info callout --- */
.info-callout { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin-top: var(--space-6); }
.info-callout__icon { display: grid; place-items: center; color: var(--accent); flex: none; }
.info-callout__icon .icon { width: 24px; height: 24px; }
.info-callout h2 { font-size: var(--fs-300); margin-bottom: var(--space-1); }
.info-callout p { font-size: var(--fs-75); color: var(--ink-2); }
.info-callout a { color: var(--accent-700); }

/* --- Criteria grid (methodology) --- */
.criteria-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-block: var(--space-6); }
.criteria-card { padding: var(--space-5); }
.criteria-card__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-700); margin-bottom: var(--space-3); }
.criteria-card__icon .icon { width: 23px; height: 23px; }
.criteria-card h3 { font-size: var(--fs-200); margin-bottom: var(--space-2); }
.criteria-card p { font-size: var(--fs-75); color: var(--ink-2); }
.muted-note { color: var(--ink-3); font-size: var(--fs-75); }
.muted-note .icon { width: 15px; height: 15px; vertical-align: -2px; }

/* --- CTA band --- */
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin-top: var(--space-7); }
.cta-band h2 { font-size: var(--fs-400); }
.cta-band p { color: var(--ink-2); font-size: var(--fs-75); }

/* --- Compare controls --- */
.compare-controls { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-5); }
.compare-controls__group { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field__label { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-50); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.field__label .icon { width: 15px; height: 15px; color: var(--accent); }
.field input, .field select { padding: .6rem .8rem; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); font-size: var(--fs-75); min-width: 200px; }
.field input:focus, .field select:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }
.compare-controls__toggles { display: flex; flex-wrap: wrap; gap: .5rem; border: none; padding: 0; }
.toggle-chip { position: relative; }
.toggle-chip input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-chip span { display: inline-flex; align-items: center; padding: .45rem .8rem; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); font-size: var(--fs-75); font-weight: 600; color: var(--ink-2); cursor: pointer; transition: all .15s var(--ease); }
.toggle-chip input:checked + span { background: var(--navy); color: #fff; border-color: var(--navy); }
.toggle-chip input:focus-visible + span { box-shadow: var(--ring); }
.compare-empty { display: flex; align-items: center; gap: .5rem; justify-content: center; padding: var(--space-6); color: var(--ink-2); }
.compare-empty .icon { width: 18px; height: 18px; color: var(--accent); }

@media (max-width: 900px) {
    .hero__inner { grid-template-columns: 1fr; gap: var(--space-5); }
    .hero__panel { max-width: 480px; }
    .rg-block__inner { grid-template-columns: 1fr; gap: var(--space-5); }
    .learn-grid { grid-template-columns: 1fr; }
    .criteria-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .compare-controls { flex-direction: column; align-items: stretch; }
    .field input, .field select { min-width: 0; width: 100%; }
    .cta-band { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   12c. RG page, FAQ, glossary, about, contact
   ========================================================================== */
.page-hero--rg { background: linear-gradient(180deg, #fff4ef, var(--bg)); }
.block-title { margin-block: var(--space-7) var(--space-4); }

/* --- Help cards (RG) --- */
.help-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-7); }
.help-card { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.help-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.help-card--phone { background: var(--navy); border-color: var(--navy); color: #fff; }
.help-card__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-700); flex: none; }
.help-card--phone .help-card__icon { background: rgba(255,255,255,.12); color: #fff; }
.help-card__icon .icon { width: 24px; height: 24px; }
.help-card__body { display: flex; flex-direction: column; }
.help-card__body > strong { font-size: var(--fs-75); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.help-card__brand { height: 22px; width: auto; display: block; margin-bottom: 2px; }
.help-card__brand--dark { height: 18px; }
.help-card--phone .help-card__body > strong { color: #9fb0c6; }
.help-card__big { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-300); color: var(--ink); }
.help-card--phone .help-card__big { color: #fff; }
.help-card__note { font-size: var(--fs-75); color: var(--ink-2); display: inline-flex; align-items: center; gap: .3rem; }
.help-card--phone .help-card__note { color: #9fb0c6; }
.help-card__note .icon { width: 13px; height: 13px; }

/* --- Signs --- */
.signs { padding: var(--space-5); margin-block: var(--space-5); border-left: 3px solid var(--warn); }
.signs h2 { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-400); margin-bottom: var(--space-3); }
.signs h2 .icon { width: 26px; height: 26px; color: var(--warn); }
.signs__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.signs__list li { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--fs-75); }
.signs__list .icon { width: 16px; height: 16px; color: var(--warn); flex: none; margin-top: 3px; }
.signs__note { font-size: var(--fs-75); color: var(--ink-2); }

/* --- Tips --- */
.tips-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.tip-card { padding: var(--space-5); }
.tip-card__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--trust-soft); color: var(--trust); margin-bottom: var(--space-3); }
.tip-card__icon .icon { width: 23px; height: 23px; }
.tip-card h3 { font-size: var(--fs-200); margin-bottom: var(--space-2); }
.tip-card p { font-size: var(--fs-75); color: var(--ink-2); }
.info-callout--rg { border-left-color: var(--trust); }

/* --- Accordion --- */
.accordion { display: grid; gap: var(--space-3); }
.accordion__item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.accordion__item.is-open { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.accordion__heading { margin: 0; }
.accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; text-align: left; padding: var(--space-4) var(--space-5); font-family: var(--font-display); font-weight: 650; font-size: var(--fs-200); color: var(--ink); }
.accordion__trigger:hover { color: var(--accent-700); }
.accordion__chevron { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-soft); color: var(--ink-2); flex: none; transition: transform .25s var(--ease), background .2s var(--ease); }
.accordion__chevron .icon { width: 18px; height: 18px; }
.accordion__trigger[aria-expanded="true"] .accordion__chevron { transform: rotate(180deg); background: var(--accent-soft); color: var(--accent-700); }
.accordion__panel { padding: 0 var(--space-5) var(--space-5); color: var(--ink-2); font-size: var(--fs-100); }

/* --- Glossary --- */
.glossary-search { position: relative; margin-top: var(--space-4); max-width: 420px; }
.glossary-search__icon { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.glossary-search__icon .icon { width: 18px; height: 18px; }
.glossary-search input { width: 100%; padding-left: 2.4rem; }
.glossary { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.glossary__item { padding: var(--space-4) var(--space-5); }
.glossary__item dt { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-200); color: var(--ink); margin-bottom: var(--space-2); }
.glossary__item dd { font-size: var(--fs-75); color: var(--ink-2); margin: 0; }
.glossary__item[hidden] { display: none; }
.glossary-empty { display: flex; align-items: center; gap: .5rem; justify-content: center; padding: var(--space-6); color: var(--ink-2); }
.glossary-empty .icon { width: 18px; height: 18px; color: var(--accent); }

/* --- Do / Don't (about) --- */
.dodont { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-block: var(--space-5); }
.dodont__col { padding: var(--space-5); border-radius: var(--radius); border: 1px solid var(--line); }
.dodont__col h3 { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-300); margin-bottom: var(--space-3); }
.dodont__col h3 .icon { width: 22px; height: 22px; }
.dodont__col--do { background: var(--trust-soft); border-color: #bfe0cc; }
.dodont__col--do h3 { color: var(--trust); }
.dodont__col--dont { background: var(--bg-sunken); }
.dodont__col--dont h3 { color: var(--ink-2); }
.dodont__col ul { display: grid; gap: .5rem; }
.dodont__col li { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--fs-75); }
.dodont__col li .icon { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.dodont__col--do li .icon { color: var(--trust); }
.dodont__col--dont li .icon { color: var(--ink-3); }

/* --- Contact --- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-5); }
.contact-card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.contact-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-700); margin-bottom: var(--space-2); }
.contact-card__icon .icon { width: 24px; height: 24px; }
.contact-card h2 { font-size: var(--fs-300); }
.contact-card p { font-size: var(--fs-75); color: var(--ink-2); flex: 1; }
.contact-card__value { display: inline-flex; align-items: center; gap: .35rem; font-weight: 650; color: var(--accent-700); }
.contact-card__value .icon { width: 16px; height: 16px; }
.contact-org { padding: var(--space-5); margin-bottom: var(--space-5); }
.contact-org h2 { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-300); margin-bottom: var(--space-4); }
.contact-org h2 .icon { width: 22px; height: 22px; color: var(--accent); }
.contact-org__list { display: grid; gap: .5rem; margin-bottom: var(--space-4); }
.contact-org__list > div { display: flex; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); font-size: var(--fs-75); }
.contact-org__list dt { color: var(--ink-3); min-width: 110px; }
.contact-org__list dd { font-weight: 600; }
.contact-org__note { font-size: var(--fs-75); color: var(--ink-2); }
.contact-org__note .icon { width: 16px; height: 16px; color: var(--accent); vertical-align: -3px; }

@media (max-width: 760px) {
    .help-cards { grid-template-columns: 1fr; }
    .signs__list { grid-template-columns: 1fr; }
    .tips-grid { grid-template-columns: 1fr; }
    .glossary { grid-template-columns: 1fr; }
    .dodont { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   12d. Legal pages
   ========================================================================== */
.legal { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-7); align-items: start; }
.legal__toc { position: sticky; top: calc(var(--header-h) + 1rem); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); background: var(--bg-soft); }
.legal__toc-title { font-size: var(--fs-50); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 650; margin-bottom: var(--space-3); }
.legal__toc ul { display: grid; gap: .15rem; }
.legal__toc a { display: block; padding: .45rem .6rem; border-radius: 8px; font-size: var(--fs-75); color: var(--ink-2); border-left: 2px solid transparent; }
.legal__toc a:hover { background: var(--surface); color: var(--accent-700); border-left-color: var(--accent); }
.legal__content { max-width: none; }
.legal__content section + section { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.legal__content h2 { scroll-margin-top: calc(var(--header-h) + 1rem); }
.cookie-table code { background: var(--bg-sunken); padding: .1rem .4rem; border-radius: 5px; font-size: .85em; }

@media (max-width: 820px) {
    .legal { grid-template-columns: 1fr; }
    .legal__toc { position: static; }
    .legal__toc ul { display: flex; flex-wrap: wrap; gap: .3rem; }
    .legal__toc a { border-left: none; border: 1px solid var(--line); }
}

/* ==========================================================================
   13. Unique identity — Tosset-Score, verdict, data-viz, signature pattern
   ========================================================================== */

/* --- Tosset-Score ring --- */
.score-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring__track { fill: none; stroke: var(--bg-sunken); stroke-width: 3; }
.score-ring__bar { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: var(--p) 100; }
.js .score-ring__bar { stroke-dasharray: 0 100; }
.js .score-ring.is-animated .score-ring__bar { stroke-dasharray: var(--p) 100; transition: stroke-dasharray 1.1s var(--ease); }
.score-ring__val { position: absolute; display: inline-flex; align-items: baseline; font-family: var(--font-display); font-weight: 800; color: var(--ink); line-height: 1; }
.score-ring__max { font-size: .5em; font-weight: 650; color: var(--ink-3); margin-left: 1px; }
.score-ring--sm { width: 50px; height: 50px; }
.score-ring--sm .score-ring__val { font-size: 15px; }
.score-ring--md { width: 66px; height: 66px; }
.score-ring--md .score-ring__val { font-size: 21px; }
.score-ring--lg { width: 104px; height: 104px; }
.score-ring--lg .score-ring__val { font-size: 33px; }
.score-ring--lg .score-ring__track, .score-ring--lg .score-ring__bar { stroke-width: 2.6; }
.score-block { display: inline-flex; flex-direction: column; align-items: center; gap: .5rem; }
.score-block__label { font-size: var(--fs-50); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-700); }

/* --- Score badge (компактный) --- */
.score-badge { display: inline-flex; align-items: baseline; gap: 1px; padding: .25rem .5rem; border-radius: 8px; background: var(--ink); color: #fff; font-family: var(--font-display); line-height: 1; }
.score-badge strong { font-size: var(--fs-100); font-weight: 800; }
.score-badge span { font-size: .68em; opacity: .65; }

/* --- Score breakdown bars --- */
.score-parts { display: grid; gap: .55rem; }
.score-parts__item { display: grid; grid-template-columns: 88px 1fr 20px; align-items: center; gap: .6rem; font-size: var(--fs-75); }
.score-parts__label { color: var(--ink-2); }
.score-parts__bar { height: 7px; border-radius: 4px; background: var(--bg-sunken); overflow: hidden; }
.score-parts__fill { display: block; height: 100%; width: var(--p); border-radius: 4px; background: linear-gradient(90deg, var(--accent), #ffa471); }
.js .score-parts__fill { width: 0; transition: width 1s var(--ease) .15s; }
.js [data-reveal].is-visible .score-parts__fill { width: var(--p); }
.score-parts__num { font-weight: 700; text-align: right; color: var(--ink); }

/* --- Casino card stars (под именем) --- */
.casino-card__stars { display: inline-block; margin-top: 3px; }
.casino-card__stars .star .icon { width: 13px; height: 13px; }
/* score-ring в углу карточки */
.casino-card__top .score-ring { margin-left: auto; }

/* --- Verdict block --- */
.verdict { padding-top: var(--space-6); }
.verdict__inner { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr 290px; gap: var(--space-6); align-items: center;
    background: linear-gradient(165deg, #ffffff, #eef2fb); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: var(--space-6); }
.verdict__score { display: grid; place-items: center; }
.verdict__body { min-width: 0; }
.verdict__text { font-size: var(--fs-300); line-height: 1.45; font-family: var(--font-display); font-weight: 600; color: var(--ink); margin-block: var(--space-3) var(--space-3); }
.verdict__tag { display: inline-flex; gap: .4rem; align-items: center; font-size: var(--fs-75); color: var(--ink-2); }
.verdict__tag .icon { width: 16px; height: 16px; color: var(--accent); }
.verdict__quick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
.verdict__quick-col { display: flex; flex-direction: column; gap: .25rem; padding: var(--space-3); border-radius: var(--radius); font-size: var(--fs-75); }
.verdict__quick-col--pro { background: var(--trust-soft); }
.verdict__quick-col--con { background: var(--warn-soft); }
.verdict__quick-h { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: var(--fs-50); text-transform: uppercase; letter-spacing: .04em; }
.verdict__quick-h .icon { width: 15px; height: 15px; }
.verdict__quick-col--pro .verdict__quick-h { color: var(--trust); }
.verdict__quick-col--con .verdict__quick-h { color: var(--warn); }
.verdict__parts { border-left: 1px solid var(--line); padding-left: var(--space-5); }
.verdict__parts-h { display: block; font-size: var(--fs-50); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: var(--space-3); }
/* signature watermark — щит в углу */
.verdict__inner::after { content: ""; position: absolute; right: -28px; top: -28px; width: 180px; height: 180px; z-index: 0; opacity: .05; pointer-events: none;
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a1830' stroke-width='1.4'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.verdict__inner > * { position: relative; z-index: 1; }

/* --- Data-viz cells (compare) --- */
.cell-bar { display: inline-flex; flex-direction: column; gap: 5px; align-items: center; min-width: 92px; }
.cell-bar__track { width: 92px; height: 6px; border-radius: 4px; background: var(--bg-sunken); overflow: hidden; }
.cell-bar__fill { display: block; height: 100%; width: var(--p); border-radius: 4px; background: var(--ink-3); }
.cell-bar.is-best .cell-bar__fill { background: linear-gradient(90deg, var(--accent), #ffa471); }
.cell-bar__val { font-weight: 650; font-size: var(--fs-75); display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.cell-bar__best { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--trust); background: var(--trust-soft); padding: .08rem .32rem; border-radius: 5px; }
.compare-table__score-row td { background: rgba(239,90,36,.035); }
.cell-score { display: inline-grid; place-items: center; }
.cell-score.is-best .score-badge { background: var(--accent); }

/* --- Signature chevron texture (light brand sections) --- */
.section--soft {
    background-color: var(--bg-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M4 30 L24 14 L44 30' fill='none' stroke='%230a1830' stroke-opacity='0.025' stroke-width='1.2'/%3E%3C/svg%3E");
    background-size: 48px 48px;
}

@media (max-width: 900px) {
    .verdict__inner { grid-template-columns: auto 1fr; }
    .verdict__parts { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: var(--space-4); }
}
@media (max-width: 560px) {
    .verdict__inner { grid-template-columns: 1fr; text-align: left; }
    .verdict__score { justify-self: start; }
    .verdict__quick { grid-template-columns: 1fr; }
}