/*
Theme Name: Wonaco Deutschland
Theme URI: https://wonaco-deutschland.com
Author: Fabian Kerner
Description: Individuelles Theme für den deutschsprachigen Wonaco-Ratgeber (Casino ohne OASIS, Spielautomaten, Live-Casino, Sportwetten, Bonusbedingungen, Zahlungen in Euro, Registrierung, Login und Mobilnutzung — de-DE). Inhalte fest im Theme, eigene Bilder, zweispaltiges Layout mit klebriger Seitenleiste, Farbwelt Marineblau/Gold mit deutschem Rotakzent. Die Seiten werden bei der Aktivierung automatisch angelegt.
Version: 1.0
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: wonaco
*/

/* =========================================================================
   Wonaco Deutschland — wonaco-deutschland.com
   Палитра verified 20.08.2026 с wonaco.com/de (computed styles + скрин 1440):
   #010A40 фон · Sofia Sans · CTA-золото #FFD35F→#EEB646→#C78530 · синий #30A2F8→#0242B9
   немецкий акцент из hero-арта: красный #C8102E, чёрный #0B0B10, жёлтый лого #FCE400
   ========================================================================= */
:root{
  --navy:#010A40; --navy-2:#050f52; --ink:#0B0B10; --card:#0b1470; --card-2:#0a1054;
  --line:rgba(140,160,235,.22); --line-2:rgba(140,160,235,.12);
  --tx:#eef1ff; --tx-2:#b9c3e8; --tx-3:#8e9ac8;
  --gold-1:#FFD35F; --gold-2:#EEB646; --gold-3:#C78530;
  --blue-1:#30A2F8; --blue-2:#0242B9; --blue-3:#0D1DAF;
  --yellow:#FCE400; --red:#C8102E; --green:#2fd07a;
  --wrap:1200px; --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--navy); color:var(--tx);
  font-family:"Sofia Sans",-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:17px; line-height:1.72; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--gold-1)}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}

/* ---------------------------------------------------------------- шапка */
.topline{
  background:linear-gradient(90deg,var(--ink) 0%,#12143a 45%,var(--ink) 100%);
  border-bottom:1px solid var(--line-2); font-size:13.5px; color:var(--tx-3);
}
.topline .wrap{display:flex; gap:16px; align-items:center; justify-content:space-between; min-height:34px; flex-wrap:wrap}
.topline b{color:var(--tx-2); font-weight:700}
.topline .tl-flag{display:inline-flex; flex-direction:column; height:12px; width:18px; border-radius:2px; overflow:hidden; vertical-align:-2px; margin-right:6px}
.topline .tl-flag i{flex:1}
.topline .tl-flag i:nth-child(1){background:#171717}
.topline .tl-flag i:nth-child(2){background:var(--red)}
.topline .tl-flag i:nth-child(3){background:#FFCE00}

.site-header{position:sticky; top:0; z-index:60; background:rgba(1,10,64,.94); backdrop-filter:blur(9px); border-bottom:1px solid var(--line)}
.hdr-row{display:flex; align-items:center; gap:18px; min-height:66px}
.brand img{height:34px; width:auto}
.nav{display:flex; gap:2px; margin-left:auto; flex-wrap:wrap}
.nav a{
  color:var(--tx-2); text-decoration:none; font-weight:700; font-size:15px;
  padding:9px 11px; border-radius:9px; letter-spacing:.2px;
}
.nav a:hover{color:#fff; background:rgba(48,162,248,.14)}
.nav a[aria-current="page"]{color:var(--navy); background:linear-gradient(180deg,var(--gold-1),var(--gold-3))}
.hdr-cta{display:flex; gap:8px; align-items:center}
.burger{display:none; background:transparent; border:1px solid var(--line); color:var(--tx); font-size:20px; border-radius:9px; padding:5px 11px; cursor:pointer}

/* ---------------------------------------------------------------- кнопки */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:900; text-decoration:none; border:0; cursor:pointer;
  padding:14px 26px; border-radius:11px; font-size:17px; letter-spacing:.3px;
  font-family:inherit; text-transform:uppercase; transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn-primary{background:linear-gradient(180deg,var(--gold-1) 0%,var(--gold-2) 52%,var(--gold-3) 100%); color:#2a1a00; box-shadow:0 8px 20px rgba(199,133,48,.34)}
.btn.btn-primary{color:#2a1a00}                     /* перебивает .prose a{color} */
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(199,133,48,.46)}
.btn-blue{background:linear-gradient(180deg,var(--blue-1),var(--blue-2)); color:#fff; box-shadow:0 8px 18px rgba(2,66,185,.36)}
.btn.btn-blue{color:#fff}
.btn-blue:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent; border:2px solid rgba(48,162,248,.55); color:#dce6ff; padding:12px 22px}
.btn.btn-ghost{color:#dce6ff}
.btn-ghost:hover{border-color:var(--blue-1); background:rgba(48,162,248,.12)}
.btn-sm{padding:9px 16px; font-size:14px; border-radius:9px}

/* ---------------------------------------------------------------- hero
   ФИКС старого бага: ТОЛЬКО width:100% + aspect-ratio, БЕЗ max-height —
   иначе браузер переносит ограничение высоты в ширину и режет секцию справа. */
.hero{position:relative; overflow:hidden; background:var(--ink); border-bottom:1px solid var(--line)}
.hero.has-bg{
  width:100%; aspect-ratio:2007/783;
  background-image:url("assets/images/wonaco-casino-deutschland-formel-1-roulette-hero.webp");
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.hero.has-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(3,4,14,.93) 0%,rgba(4,8,32,.82) 34%,rgba(6,10,40,.32) 60%,rgba(6,10,40,0) 82%);
}
.hero-inner{position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; padding:34px 20px 30px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; height:100%}
.hero-inner>*{max-width:640px}
.eyebrow{
  align-self:flex-start; display:inline-flex; align-items:center; gap:9px;
  background:rgba(200,16,46,.9); color:#fff; font-weight:900; font-size:13px; letter-spacing:1.3px;
  text-transform:uppercase; padding:7px 14px; border-radius:7px; margin:0 0 14px;
}
.hero h1{font-size:clamp(28px,3.5vw,48px); line-height:1.08; margin:0 0 14px; font-weight:900; letter-spacing:-.5px}
.hero h1 em{font-style:normal; color:var(--gold-1)}
.hero-sub{color:#cfd8ff; font-size:clamp(15px,1.35vw,19px); margin:0 0 20px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.hero-note{font-size:13px; color:#93a0d0; margin:0}
.hero-art-mob{display:none}

/* лента фактов под hero */
.factband{background:linear-gradient(90deg,var(--ink),#101438 50%,var(--ink)); border-bottom:1px solid var(--line)}
.factband .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:0}
.fb{padding:16px 18px; border-right:1px solid var(--line-2)}
.fb:last-child{border-right:0}
.fb b{display:block; font-size:22px; font-weight:900; color:var(--gold-1); line-height:1.2}
.fb span{font-size:13px; color:var(--tx-3); text-transform:uppercase; letter-spacing:.7px}

/* ---------------------------------------------------------------- макет */
.section{padding:46px 0}
.section.tight{padding:30px 0}
.section.alt{background:var(--ink)}
.section.deep{background:linear-gradient(180deg,var(--navy) 0%,#04093a 100%)}
h2{font-size:clamp(23px,2.5vw,32px); line-height:1.2; margin:0 0 14px; font-weight:900; letter-spacing:-.3px}
h3{font-size:clamp(19px,1.8vw,23px); margin:26px 0 10px; font-weight:800}
h4{font-size:17px; margin:18px 0 8px; font-weight:800; color:#dbe3ff}
p{margin:0 0 15px}
.lead{font-size:19px; color:#d6ddff}

/* двухколоночный макет с липкой боковой панелью — новинка этого проекта */
.layout{display:grid; grid-template-columns:minmax(0,1fr) 306px; gap:34px; align-items:start}
.layout>article,.layout>aside{min-width:0}
.rail{position:sticky; top:84px; display:flex; flex-direction:column; gap:14px}
.rail-card{background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px}
.rail-card h4{margin:0 0 10px; font-size:14px; text-transform:uppercase; letter-spacing:1px; color:var(--gold-1)}
.toc{list-style:none; margin:0; padding:0; counter-reset:toc}
.toc li{counter-increment:toc; margin:0 0 7px; font-size:14.5px; line-height:1.4}
.toc a{color:var(--tx-2); text-decoration:none; display:flex; gap:8px}
.toc a::before{content:counter(toc,decimal-leading-zero); color:var(--blue-1); font-weight:800; font-size:12px; padding-top:2px}
.toc a:hover{color:#fff}
.rail-facts{list-style:none; margin:0; padding:0; font-size:14px}
.rail-facts li{display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px dashed var(--line-2); color:var(--tx-2)}
.rail-facts li:last-child{border-bottom:0}
.rail-facts b{color:#fff; text-align:right}
.rail-cta{background:linear-gradient(160deg,#1a1030,#2a0b16 55%,#0b0b10); border:1px solid rgba(255,211,95,.35); text-align:center}
.rail-cta .rc-big{font-size:31px; font-weight:900; color:var(--gold-1); line-height:1.1}
.rail-cta .rc-sub{font-size:13.5px; color:var(--tx-2); margin:4px 0 12px}

/* контент */
.prose{min-width:0}
.prose>h2:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 16px; padding-left:22px}
.prose li{margin:0 0 7px}
.prose a{color:var(--gold-1)}
.prose a:hover{color:#fff}
.note{border-left:3px solid var(--blue-1); background:rgba(48,162,248,.08); padding:13px 16px; border-radius:0 10px 10px 0; margin:0 0 18px; font-size:16px}
.note.warn{border-left-color:var(--red); background:rgba(200,16,46,.1)}
.note.good{border-left-color:var(--green); background:rgba(47,208,122,.08)}

/* карточки */
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}
.card{background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px}
.card h3,.card h4{margin-top:0}
.card p:last-child{margin-bottom:0}
.card-red{background:linear-gradient(165deg,#2a0b16,#12071f); border-color:rgba(200,16,46,.4)}
.card-gold{background:linear-gradient(165deg,#2a2005,#100c02); border-color:rgba(255,211,95,.35)}

/* таблицы */
.tbl-wrap{overflow-x:auto; margin:0 0 18px; border-radius:var(--r); border:1px solid var(--line)}
table{width:100%; border-collapse:collapse; font-size:15.5px; min-width:440px; background:rgba(4,10,52,.6)}
caption{text-align:left; padding:12px 14px; font-size:13.5px; color:var(--tx-3); background:var(--ink)}
th,td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line-2)}
th{background:linear-gradient(180deg,#0d1470,#080f4a); font-weight:800; color:#dfe6ff; font-size:13.5px; text-transform:uppercase; letter-spacing:.6px}
tbody tr:hover{background:rgba(48,162,248,.07)}
td b{color:#fff}
.t-ok{color:var(--green); font-weight:800}
.t-no{color:#ff7a8f; font-weight:800}

/* ---------------------------------------------------------------- слоты
   размер плитки как в лобби офсайта (157×236 CSS при 1440), кнопка по hover */
.slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; margin:0 0 18px}
.slot{position:relative; border-radius:11px; overflow:hidden; border:1px solid var(--line); background:#00003c; aspect-ratio:192/293}
.slot img{width:100%; height:100%; object-fit:cover}
.slot::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(1,10,64,0) 40%,rgba(1,10,64,.86) 100%); opacity:0; transition:opacity .25s ease}
.slot .sbtn{
  position:absolute; left:50%; bottom:14px; transform:translate(-50%,14px) scale(.94);
  opacity:0; transition:opacity .25s ease, transform .25s cubic-bezier(.2,.9,.3,1.2);
  z-index:3; padding:8px 15px; font-size:13px; white-space:nowrap;
}
.slot:hover::after,.slot:focus-within::after{opacity:1}
.slot:hover .sbtn,.slot:focus-within .sbtn{opacity:1; transform:translate(-50%,0) scale(1)}
@media(max-width:820px){ .slot::after{opacity:.85} .slot .sbtn{opacity:1; transform:translate(-50%,0)} }

/* ---------------------------------------------------------------- баннеры-промо */
.promo{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); margin:0 0 20px}
.promo img{width:100%; display:block}
.promo::after{content:""; position:absolute; inset:0; background:var(--ov,none); pointer-events:none}
.promo-ov{position:absolute; z-index:2; max-width:52%; padding:18px 20px}
.promo-ov .po-k{font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:var(--gold-1); font-weight:900; margin:0 0 6px}
.promo-ov .po-t{font-size:clamp(17px,2vw,27px); font-weight:900; line-height:1.15; margin:0 0 8px; color:#fff; text-shadow:0 3px 14px rgba(0,0,0,.6)}
.promo-ov .po-s{font-size:14px; color:#e2e8ff; margin:0 0 12px; text-shadow:0 2px 10px rgba(0,0,0,.6)}
.ov-l{--ov:linear-gradient(90deg,rgba(2,5,20,.86) 0%,rgba(2,5,20,.55) 42%,rgba(2,5,20,0) 70%)}
.ov-r{--ov:linear-gradient(270deg,rgba(2,5,20,.86) 0%,rgba(2,5,20,.5) 42%,rgba(2,5,20,0) 72%)}
.ov-bl{--ov:linear-gradient(15deg,rgba(2,5,20,.9) 0%,rgba(2,5,20,.42) 46%,rgba(2,5,20,0) 78%)}
.ov-br{--ov:linear-gradient(325deg,rgba(2,5,20,.9) 0%,rgba(2,5,20,.42) 46%,rgba(2,5,20,0) 78%)}
.at-l{left:0; top:50%; transform:translateY(-50%)}
.at-r{right:0; top:50%; transform:translateY(-50%)}
.at-bl{left:0; bottom:0}
.at-br{right:0; bottom:0; text-align:right}
@media(max-width:640px){
  .promo::after{display:none}
  .promo-ov{position:static; max-width:100%; background:var(--ink); transform:none; text-align:left}
}

/* ---------------------------------------------------------------- ДИАГРАММЫ
   (набор специально не повторяет прошлые проекты бренда) */

/* 1. waffle — 100 квадратов, доля категорий */
.waffle{display:grid; grid-template-columns:repeat(20,1fr); gap:3px; margin:0 0 12px; max-width:520px}
.waffle i{aspect-ratio:1; border-radius:2px; background:#16205e}
.waffle i.a{background:var(--gold-1)} .waffle i.b{background:var(--blue-1)}
.waffle i.c{background:var(--red)} .waffle i.d{background:var(--green)}
.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:13.5px; color:var(--tx-2); margin:0 0 6px}
.legend span{display:inline-flex; align-items:center; gap:7px}
.legend i{width:12px; height:12px; border-radius:3px; display:inline-block}
.legend+p{margin-top:16px}

/* 2. matrix — сравнительная матрица «есть/нет» */
.matrix{display:grid; grid-template-columns:1.5fr 1fr 1fr; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; font-size:15px; margin:0 0 18px}
.matrix>div{padding:11px 14px; border-bottom:1px solid var(--line-2)}
.matrix .mh{background:linear-gradient(180deg,#0d1470,#080f4a); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.6px}
.matrix .yes{color:var(--green); font-weight:800}
.matrix .no{color:#ff7a8f; font-weight:800}
.matrix .mid{color:var(--gold-1); font-weight:800}

/* 3. bubble — пузырьковая карта провайдеров */
.bubbles{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin:0 0 14px}
.bub{border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(circle at 34% 28%,rgba(48,162,248,.95),rgba(2,66,185,.75)); color:#fff; font-weight:800; line-height:1.05;
  border:1px solid rgba(140,190,255,.4)}
.bub.g{background:radial-gradient(circle at 34% 28%,rgba(255,211,95,.95),rgba(199,133,48,.8)); color:#2a1a00}
.bub b{font-size:15px} .bub span{font-size:10.5px; font-weight:700; opacity:.86}

/* 4. stack — накопительная полоса */
.stack{display:flex; height:34px; border-radius:9px; overflow:hidden; border:1px solid var(--line); margin:0 0 10px}
.stack>span{display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800; color:#05122f}
.st-1{background:var(--gold-1)} .st-2{background:var(--blue-1)} .st-3{background:var(--green)} .st-4{background:#7b86c9}

/* 5. slope — «до/после» две точки, линия между */
.slope{position:relative; height:210px; border:1px solid var(--line); border-radius:var(--r); background:linear-gradient(180deg,#070d3e,#04081f); margin:0 0 12px; padding:14px 18px}
.slope .sl-ax{position:absolute; left:0; right:0; border-top:1px dashed var(--line-2)}
.slope svg{width:100%; height:100%; overflow:visible}
.slope .sl-lbl{font-size:12px; fill:var(--tx-3)}
.slope .sl-val{font-size:14px; font-weight:800; fill:#fff}

/* 6. stair — лестница уровней (VIP-кэшбэк) */
.stair{display:flex; align-items:flex-end; gap:10px; height:190px; margin:0 0 12px; padding:0 2px}
.stair .sp{flex:1 1 0; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; text-align:center}
.stair .sp i{display:block; border-radius:8px 8px 0 0; background:linear-gradient(180deg,var(--gold-1),var(--gold-3)); position:relative}
.stair .sp b{font-size:15px; color:#fff; margin-bottom:5px}
.stair .sp span{font-size:12px; color:var(--tx-3); padding-top:6px; border-top:1px solid var(--line-2); margin-top:0}

/* 7. dumbbell — диапазоны мин–макс */
.dumb{margin:0 0 14px}
.dumb .row{display:grid; grid-template-columns:150px 1fr 108px; gap:12px; align-items:center; padding:8px 0; border-bottom:1px dashed var(--line-2); font-size:14.5px}
.dumb .row:last-child{border-bottom:0}
.dumb .track{position:relative; height:10px; background:#131c55; border-radius:6px}
.dumb .bar{position:absolute; top:0; bottom:0; border-radius:6px; background:linear-gradient(90deg,var(--blue-1),var(--gold-1))}
.dumb .dot{position:absolute; top:-4px; width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--blue-2)}
.dumb .dot.hi{border-color:var(--gold-3)}
.dumb .val{text-align:right; color:var(--tx-2); font-size:13.5px}

/* 8. funnel — воронка шагов */
.funnel{display:flex; flex-direction:column; gap:8px; margin:0 0 14px; align-items:center}
.funnel .fs{width:100%; padding:12px 16px; border-radius:10px; text-align:center; font-weight:800; color:#05122f;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2)); font-size:15px}
.funnel .fs:nth-child(2){width:88%; background:linear-gradient(180deg,#8fc6ff,var(--blue-1))}
.funnel .fs:nth-child(3){width:76%; background:linear-gradient(180deg,var(--blue-1),var(--blue-2)); color:#fff}
.funnel .fs:nth-child(4){width:64%; background:linear-gradient(180deg,var(--blue-2),#021e5c); color:#fff}
.funnel .fs:nth-child(5){width:52%; background:linear-gradient(180deg,#0b1470,#050b33); color:#dfe6ff; border:1px solid var(--line)}
.funnel .fs small{display:block; font-weight:600; font-size:12.5px; opacity:.85}

/* 9. lanes — дорожки решений (диагностика логина) */
.lanes{display:grid; gap:10px; margin:0 0 14px}
.lane{display:grid; grid-template-columns:34px 1fr 1fr; gap:12px; align-items:center; background:rgba(9,16,72,.62); border:1px solid var(--line); border-radius:11px; padding:11px 14px; font-size:14.5px}
.lane .ln{width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; background:var(--red); color:#fff; font-size:13px}
.lane .lr{color:var(--tx-2)}
.lane .lr b{color:var(--green)}

/* 10. meterrow — горизонтальные шкалы-«батарейки» */
.meters{display:grid; gap:11px; margin:0 0 14px}
.meter{display:grid; grid-template-columns:170px 1fr 54px; gap:12px; align-items:center; font-size:14.5px}
.meter .mt{height:14px; border-radius:7px; background:#131c55; overflow:hidden; border:1px solid var(--line-2)}
.meter .mf{display:block; height:100%; border-radius:7px; background:linear-gradient(90deg,var(--blue-2),var(--blue-1) 62%,var(--gold-1))}
.meter .mv{text-align:right; font-weight:800; color:#fff}

/* 11. ranks — точечная шкала «скорость выплаты» */
.ranks{display:grid; gap:9px; margin:0 0 14px}
.rank{display:grid; grid-template-columns:190px auto 1fr; gap:14px; align-items:center; font-size:15px;
  background:rgba(9,16,72,.55); border:1px solid var(--line-2); border-radius:11px; padding:10px 14px}
.rank .dots{display:flex; gap:5px}
.rank .dots i{width:13px; height:13px; border-radius:50%; background:#1b2564; border:1px solid var(--line-2)}
.rank .dots i.on{background:linear-gradient(180deg,var(--gold-1),var(--gold-3)); border-color:transparent}
.rank .rv{color:var(--tx-3); font-size:13.5px}
@media(max-width:560px){ .rank{grid-template-columns:1fr auto; gap:8px} .rank .rv{grid-column:1/-1} }

/* 12. steps-h — горизонтальная линия шагов установки */
.steps-h{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:0 0 16px; position:relative}
.steps-h::before{content:""; position:absolute; left:8%; right:8%; top:19px; height:3px; background:linear-gradient(90deg,var(--blue-2),var(--blue-1),var(--gold-1))}
.steps-h .sh{position:relative; text-align:center; padding:0 8px}
.steps-h .sh b{position:relative; z-index:2; display:inline-flex; width:40px; height:40px; border-radius:50%; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-3)); color:#2a1a00; font-size:17px; font-weight:900; margin-bottom:9px; border:3px solid var(--navy)}
.steps-h .sh strong{display:block; font-size:15px; color:#fff; margin-bottom:3px}
.steps-h .sh span{display:block; font-size:13px; color:var(--tx-3); line-height:1.45}
@media(max-width:700px){
  .steps-h{grid-template-columns:1fr; gap:14px}
  .steps-h::before{left:19px; right:auto; top:8%; bottom:8%; width:3px; height:auto; background:linear-gradient(180deg,var(--blue-2),var(--gold-1))}
  .steps-h .sh{display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto auto; column-gap:12px; text-align:left; padding:0}
  .steps-h .sh b{grid-column:1; grid-row:1 / span 2; margin-bottom:0}
  .steps-h .sh strong{grid-column:2; grid-row:1}
  .steps-h .sh span{grid-column:2; grid-row:2}
}

/* FAQ */
.faq{display:grid; gap:10px}
.faq details{background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%); border:1px solid var(--line); border-radius:12px; padding:13px 17px}
.faq summary{cursor:pointer; font-weight:800; font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--gold-1); font-size:22px; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:11px 0 0; color:var(--tx-2); font-size:16px}

/* CTA-полоса */
.ctabar{background:linear-gradient(100deg,#2a0b16,#0b0b10 42%,#03093a); border-top:1px solid rgba(200,16,46,.4); border-bottom:1px solid var(--line)}
.ctabar .wrap{display:flex; gap:20px; align-items:center; justify-content:space-between; padding-top:26px; padding-bottom:26px; flex-wrap:wrap}
.ctabar h3{margin:0 0 4px; font-size:23px}
.ctabar p{margin:0; color:var(--tx-2); font-size:15px}

/* блок автора */
.author-box{display:flex; gap:18px; background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%); border:1px solid var(--line); border-left:4px solid var(--gold-2); border-radius:var(--r); padding:20px 22px}
.author-box img{width:84px; height:84px; border-radius:50%; object-fit:cover; flex:0 0 84px}
.ab-name{font-weight:900; font-size:18px}
.ab-name a{color:var(--gold-1)}
.ab-role{color:var(--tx-3); font-size:14px; margin-bottom:8px}
.author-box p{margin:0; color:var(--tx-2); font-size:15.5px}

/* ---------------------------------------------------------------- футер */
.site-footer{background:var(--ink); border-top:1px solid var(--line); padding:36px 0 26px; font-size:15px; color:var(--tx-2)}
.foot-strip{display:flex; flex-direction:column; height:9px; width:44px; margin-bottom:26px; border-radius:3px; overflow:hidden}
.foot-strip i{flex:1}
.foot-strip i:nth-child(1){background:#171717} .foot-strip i:nth-child(2){background:var(--red)} .foot-strip i:nth-child(3){background:#FFCE00}
.foot-top{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:26px}
.foot-brand img{height:32px; width:auto; margin-bottom:12px}
.foot-about{font-size:14.5px; color:var(--tx-3)}
.site-footer h4{color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:1px; margin:0 0 10px}
.foot-links{list-style:none; margin:0; padding:0}
.foot-links li{margin:0 0 8px}
.foot-links a{color:var(--tx-2); text-decoration:none; font-size:14.5px}
.foot-links a:hover{color:var(--gold-1)}
.pay-chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px}
.pay-chips span{font-size:12px; padding:4px 10px; border:1px solid var(--line); border-radius:6px; color:var(--tx-3); background:rgba(9,16,72,.5)}
.foot-bottom{margin-top:24px; padding-top:18px; border-top:1px solid var(--line-2); font-size:13px; color:var(--tx-3); line-height:1.65}
.resp{display:inline-flex; align-items:center; gap:8px; color:var(--tx-2); font-weight:700; margin-bottom:6px}
.age{background:var(--red); color:#fff; border-radius:6px; padding:2px 8px; font-weight:900; font-size:12px}

/* ---------------------------------------------------------------- sticky-бонус */
.sticky-bonus{position:fixed; right:18px; bottom:18px; z-index:80; width:206px; border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,211,95,.45); box-shadow:0 18px 44px rgba(0,0,0,.55); background:var(--ink)}
.sticky-bonus.hidden{display:none}
.sb-img{width:100%; display:block}
.sb-btn{position:absolute; left:12px; right:12px; bottom:12px; width:calc(100% - 24px)}
.sb-close{position:absolute; top:6px; right:6px; z-index:3; width:26px; height:26px; border-radius:50%; border:0; background:rgba(2,6,26,.72); color:#fff; font-size:17px; line-height:1; cursor:pointer}
.reopen-bonus{position:fixed; right:18px; bottom:18px; z-index:80; display:none; padding:11px 18px; font-size:14px}

/* ---------------------------------------------------------------- адаптив */
@media(max-width:1040px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .rail{position:static; flex-direction:row; flex-wrap:wrap}
  .rail-card{flex:1 1 260px; min-width:0}
}
@media(max-width:900px){
  .foot-top{grid-template-columns:1fr 1fr}
  .matrix{grid-template-columns:1.3fr .85fr .85fr; font-size:14px}
  .dumb .row{grid-template-columns:110px 1fr 92px; font-size:13.5px}
  .meter{grid-template-columns:120px 1fr 48px; font-size:13.5px}
}
@media(max-width:820px){
  .brand img{height:25px}
  .nav{position:absolute; left:0; right:0; top:100%; background:#050d46; border-bottom:1px solid var(--line); flex-direction:column; padding:8px 14px; display:none}
  .nav.open{display:flex}
  .burger{display:block; order:3}
  .hdr-row{gap:10px}
  .hdr-cta .btn-ghost{display:none}
  .site-header{position:relative}
  .hero.has-bg{aspect-ratio:auto; background-image:none}
  .hero.has-bg::after{display:none}
  .hero-art-mob{display:block; width:100%}
  .hero-inner{padding:22px 20px 26px; height:auto}
  .hero-inner>*{max-width:100%}
  .sticky-bonus{width:164px; right:10px; bottom:10px}
  .fb b{font-size:19px}
  .stair{height:150px}
}
@media(max-width:560px){
  body{font-size:16px}
  .dumb .row{grid-template-columns:1fr; gap:5px; padding:10px 0}
  .dumb .val{text-align:left}
  .matrix{grid-template-columns:1.2fr .9fr .9fr; font-size:13px}
  .matrix>div{padding:9px 10px}
  .meter{grid-template-columns:1fr; gap:5px}
  .meter .mv{text-align:left}
  .steps-h .sh span{font-size:12.5px}
  .foot-top{grid-template-columns:1fr}
  .waffle{grid-template-columns:repeat(10,1fr)}
  .lane{grid-template-columns:28px 1fr; }
  .lane .lr{grid-column:2}
  .slots{grid-template-columns:repeat(2,1fr)}
}