/* ── Ставки Рейтинг: редакционная тёмная тема ─────────────────────────
   Полночь — холст, Пергамент — текст, Сигнал (глубокий красный) — единственный
   яркий акцент (не палитра), Верификация (зелёный) — только бейдж ЦУПИС.
   Типографика: Bricolage Grotesque — крупные заголовки (характер, не «нейросетевой»
   Manrope/Inter по умолчанию), Hanken Grotesk — текст, JetBrains Mono — лейблы/цифры. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600..900&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#F4EFEE; --body:#C8C0BF; --muted:#8F8583;
  --paper:#121011; --sunk:#1D1818; --line:rgba(244,239,238,.12);
  --accent:#E2392C; --accent-ink:#170E0D;
  --verify:#4C9A6A;
  --wrap:1120px; --pad:clamp(18px,4vw,40px);
  --radius:6px;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Consolas,monospace;
}
/* Сайт спроектирован тёмным по умолчанию — редакционный холст, а не
   рекламный щит. Светлого варианта намеренно нет (см. паспорт бренда). */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0; background:#050405; color:var(--body);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}

/* ── холст и рамка-плакат: страница как афиша с полями, не край-в-край ── */
.canvas{padding:clamp(10px,2.2vw,22px)}
.frame{
  max-width:1360px;margin-inline:auto;position:relative;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);
  border-radius:clamp(18px,3vw,32px);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.75);
}
/* световое пятно за героем — один яркий акцент, как в рефах, не палитра */
.glow{position:absolute;top:-120px;right:-160px;width:640px;height:640px;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 34%,transparent) 0%,color-mix(in srgb,var(--accent) 13%,transparent) 42%,transparent 70%);
  filter:blur(10px);pointer-events:none;z-index:0;animation:drift 9s ease-in-out infinite}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-18px,22px) scale(1.05)}
}
@media (prefers-reduced-motion:reduce){.glow{animation:none}}
main{position:relative}
main .wrap{position:relative;z-index:1}
img,video{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:var(--accent);text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent)}
a:hover{text-decoration-color:var(--accent)}
h1,h2,h3,h4{margin:0;color:var(--ink);line-height:1.12;text-wrap:balance;letter-spacing:-.01em;
  overflow-wrap:break-word;hyphens:auto;font-family:var(--display)}
h1{font-size:clamp(2.6rem,6.4vw,4.8rem);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.4rem,2.7vw,2rem);font-weight:700;margin-top:2em;padding-top:1.1em;border-top:1px solid var(--line)}
h3{font-size:1.2rem;font-weight:700;margin-top:1.6em}
p,ul,ol,blockquote{margin:0 0 1.1em}
ul,ol{padding-left:1.35em}
li{margin-bottom:.45em}
blockquote{border-left:2px solid var(--accent);padding:.1em 0 .1em 1.1em;color:var(--muted);font-style:italic}
code{background:var(--sunk);padding:.12em .4em;border-radius:3px;font-size:.88em;font-family:var(--mono)}
strong{color:var(--ink)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.prose{max-width:76ch;padding-block:clamp(28px,5vw,56px)}
.prose:has(.hero-split){max-width:var(--wrap)}
.prose-narrow{max-width:76ch}
.prose>h1:first-child{margin-bottom:.55em}
h1 b,h1 strong,h1 .hl{color:var(--accent);font-weight:800}

.hero-art{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:20px;
  margin:1.4em 0 1.8em;border:1px solid var(--line);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.65);transform-style:preserve-3d;will-change:transform;
  filter:hue-rotate(-34deg) saturate(1.06) contrast(1.03) brightness(.98)}

/* ── hero-сплит на главной: текст слева, крупный AI-рендер справа с
   выбегающим световым пятном за ним — сам рендер несёт всю визуальную силу */
.hero-split{display:grid;gap:2.2em;align-items:center;
  padding-block:clamp(8px,2vw,16px) clamp(32px,6vw,64px)}
@media (min-width:900px){.hero-split{grid-template-columns:.95fr 1.15fr;gap:3em}}
.hero-split__copy{max-width:50ch}
.hero-split__copy h1{margin-bottom:.5em}
.hero-split__copy p{font-size:1.06rem;color:var(--body)}
.hero-split__art{position:relative;isolation:isolate}
/* крупное световое пятно позади рендера — не размытое облако, а чёткий круг,
   выступающий за верхний край изображения (как в реф-дизайне) */
.hero-split__art::before{content:"";position:absolute;z-index:-1;
  top:-8%;right:-12%;width:76%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,color-mix(in srgb,var(--accent) 95%,transparent) 0%,color-mix(in srgb,var(--accent) 62%,transparent) 48%,color-mix(in srgb,var(--accent) 16%,transparent) 74%,transparent 100%);
  animation:drift 10s ease-in-out infinite}
/* маленький акцентный круг, выбегающий за нижний край рендера */
.hero-split__art::after{content:"";position:absolute;z-index:2;
  left:-5%;bottom:-5%;width:15%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--accent) 0%,color-mix(in srgb,var(--accent) 72%,transparent) 60%,color-mix(in srgb,var(--accent) 30%,transparent) 100%);
  box-shadow:0 16px 36px -10px color-mix(in srgb,var(--accent) 55%,transparent)}
.hero-split .hero-art{position:relative;z-index:1;aspect-ratio:4/5;margin:0;border-radius:26px}
@media (min-width:900px){.hero-split .hero-art{aspect-ratio:1/1}}

/* ── карточки-критерии выбора БК: цветной функциональный блок (по образцу
   агрегаторов вроде vbr.ru), но только на реальных фактах из наших обзоров —
   никаких выдуманных коэффициентов/live-данных ── */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:1.6em 0 2.2em}
.cat-card{display:flex;flex-direction:column;gap:.6em;padding:1.3em 1.3em 1.5em;border-radius:18px;
  text-decoration:none!important;border:1px solid var(--line);position:relative;overflow:hidden;
  transition:transform .2s,border-color .2s}
.cat-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--tile) 55%,var(--line))}
.cat-card__icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;background:color-mix(in srgb,var(--tile) 30%,transparent);flex:none}
.cat-card__title{font-family:var(--display);font-weight:700;font-size:1.06rem;color:var(--ink);letter-spacing:-.01em}
.cat-card__desc{font-size:.88rem;color:var(--body);line-height:1.5;margin:0}
.cat-card__bk{margin-top:auto;padding-top:.7em;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:color-mix(in srgb,var(--tile) 75%,white 15%)}
.cat-card::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(circle at 85% -10%,color-mix(in srgb,var(--tile) 22%,transparent) 0%,transparent 60%),var(--sunk)}
.cat-card--cyber{--tile:#8B5CF6}
.cat-card--wide{--tile:#3FB6C9}
.cat-card--fast{--tile:#E2A13A}
.cat-card--app{--tile:#3FBE8C}
.cat-card--cash{--tile:#E24D8A}

/* ── круглая CTA-кнопка со стрелкой, как акцент вместо сплошной pill-заливки ── */
.btn-round{display:inline-flex;align-items:center;gap:.9em;text-decoration:none!important;
  margin-top:.4em;font-family:var(--sans);font-weight:700;color:var(--ink)!important}
.btn-round__circle{display:flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:999px;border:1px solid var(--line);color:var(--accent);font-size:1.2rem;
  transition:.25s;flex:none}
.btn-round:hover .btn-round__circle{background:var(--accent);color:var(--accent-ink);transform:translateX(4px)}

/* декоративный индекс-бар под геро-CTA, как в референсе */
.hero-split__meta{display:flex;align-items:center;gap:14px;margin-top:2.6em;
  font-family:var(--mono);font-size:.78rem;color:var(--muted);letter-spacing:.04em}
.hero-split__meta .bar{flex:1;max-width:130px;height:1px;background:var(--line);position:relative;overflow:hidden}
.hero-split__meta .bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:38%;background:var(--accent)}

.eyebrow{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:.9em}
/* eyebrow-лейбл: первый h1 на странице получает моно-приставку через ::before
   плейсхолдер, но проще и надёжнее — явный элемент в разметке контента.
   Здесь задаём стиль на случай текстового маркера "· РЕЙТИНГ БК ·" в тексте. */
.prose>p:first-of-type{color:var(--body)}

.skip{position:fixed;left:0;top:-64px;z-index:200;background:var(--accent);color:var(--accent-ink);
  padding:12px 18px;text-decoration:none;transition:top .2s;font-weight:650}
.skip:focus{top:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── плашка 18+ ── */
.agewarn{background:var(--sunk);color:var(--muted);font-family:var(--mono);font-size:.72rem;
  letter-spacing:.03em;text-align:center;padding:9px var(--pad);line-height:1.5;
  border-bottom:1px solid var(--line)}

/* ── шапка ── */
.hdr{position:sticky;top:0;z-index:100;background:rgba(18,16,17,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:20px;min-height:66px}
.hdr__brand{display:flex;align-items:center;gap:.5em;min-height:44px;font-weight:800;color:var(--ink);
  text-decoration:none;font-size:1.05rem;letter-spacing:-.02em;font-family:var(--display)}
.hdr__brand::before{content:"◆";color:var(--accent);font-size:.8em}
.hdr__nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;background:var(--sunk);
  border:1px solid var(--line);border-radius:999px;padding:5px}
.hdr__nav a{color:var(--muted);text-decoration:none;font-size:.85rem;font-weight:500;
  padding:9px 16px;border-radius:999px;font-family:var(--mono);letter-spacing:.01em;transition:.2s}
.hdr__nav a:hover{color:var(--ink)}
.hdr__nav a.active{color:var(--accent-ink);background:var(--accent)}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0}
.burger span{display:block;width:22px;height:2px;margin:5px auto;background:var(--ink);transition:.25s}
.hdr.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr.open .burger span:nth-child(2){opacity:0}
.hdr.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── таблицы: досье-стиль, моно-цифры ── */
.tw{overflow-x:auto;margin:0 0 1.5em;border:1px solid var(--line);border-radius:var(--radius);background:var(--sunk)}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
thead th{background:color-mix(in srgb,var(--accent) 7%,transparent);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);font-weight:600}
td{font-family:var(--mono);font-size:.88rem;color:var(--body)}
td:first-child,td strong{color:var(--ink);font-family:var(--sans);font-weight:700;font-size:1rem}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .2s,transform .2s}
tbody tr:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}

/* ── pill-кнопка перехода на БК ── */
.btn-pill{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-weight:700;
  font-size:1rem;color:var(--accent-ink)!important;background:var(--accent);text-decoration:none!important;
  padding:.85em 1.6em;border-radius:999px;margin:.4em 0 1.2em;box-shadow:0 12px 30px -10px color-mix(in srgb,var(--accent) 55%,transparent);
  transition:.2s}
.btn-pill:hover{filter:brightness(1.08)}

/* ── бейдж верификации (единственный зелёный элемент сайта) ── */
.verify{display:inline-flex;align-items:center;gap:.4em;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--verify);background:rgba(76,154,106,.12);
  border:1px solid rgba(76,154,106,.35);border-radius:999px;padding:.35em .8em .35em .6em}
.verify::before{content:"✓";font-weight:700}

/* ── форма ── */
.form{display:grid;gap:12px;max-width:460px;margin:1.6em 0}
.form input,.form textarea,.form select{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--sunk);color:var(--ink);font:inherit;font-size:16px;
}
.form button{
  padding:14px 22px;border:0;border-radius:var(--radius);cursor:pointer;
  background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:700;font-size:1rem;
}
.form button:hover{filter:brightness(1.1)}
.form .ok,.form .err{font-size:.95rem}
.form .ok{color:var(--verify)}
.form .err{color:#d97070}

/* ── подвал ── */
.foot{background:var(--sunk);border-top:1px solid var(--line);margin-top:clamp(40px,7vw,80px)}
.foot__in{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;padding-block:36px}
.foot__name{font-weight:800;color:var(--ink);margin-bottom:6px;font-family:var(--display)}
.foot__addr{color:var(--muted);margin:0;max-width:44ch;font-size:.92rem}
.foot__contacts{display:grid;gap:8px}
.foot__contacts a{color:var(--ink);text-decoration:none;font-weight:650;padding:6px 0;font-family:var(--mono);font-size:.9rem}
.foot__bottom{padding-bottom:28px;color:var(--muted);font-size:.8rem;font-family:var(--mono)}

.callbar{display:none}

@media (max-width:860px){
  .hdr__nav{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--paper);border:0;border-radius:0;border-bottom:1px solid var(--line);padding:8px var(--pad) 18px;
  }
  .hdr.open .hdr__nav{display:flex}
  .hdr__nav a{padding:13px 4px;font-size:1rem;border-radius:0;border-bottom:1px solid var(--line)}
  .hdr__nav a.active{background:none;color:var(--accent)}
  .hdr__nav a:last-child{border-bottom:0}
  .burger{display:block;margin-left:auto}
  .foot__bottom{padding-bottom:28px}
}

@media (max-width:560px){
  body{font-size:16px}
  .foot__in{flex-direction:column;gap:20px}
}

@media (max-width:860px){
  small,.small,figcaption,.foot__bottom,thead th{font-size:max(.78rem,12px)}
}