@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/manrope-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Вариант 2 «Мастерская с цветными главами» — по референсу 2 (Airtable): тёплая мастерская.
   Из референса: канвас Parchment Cream, белые карточки 16px и фичер-карточки 24px, кнопки 12px —
   ЧЁРНЫЕ (Onyx) + призрачная белая с обводкой, многослойная тень CTA с синим тоном, белая шапка
   с синеватой тенью 20px, полоса-анонс со ссылкой Cobalt, центрированный hero над тёмной «витриной»
   (Product Screenshot Frame, Onyx), которая выходит за край колонки и наезжает на следующую секцию,
   нумерованные табы 01–06 слева + большой насыщенный блок справа с белой внутренней карточкой,
   сетка цветокодированных карточек «use case» по 2 в ряд, пилюли-теги 32px, prompt-строка с круглой
   кнопкой-стрелкой. Шрифты: Haas Groot Disp 900 → Roboto Slab 900 (рекомендация JSON, есть кириллица),
   Haas → 'Manrope'. Шаг 8px, секции по 64px+.
   Замены: насыщенные цвета глав референса (терракота, лес, персик, розовый, мариголд) → только оттенки
   синего и navy: Cobalt, Sapphire, тёмный navy, Midnight Indigo, Pale Sky; лого-бар клиентов → полоса фактов.
   Анимации: главы переключаются табами с плавной сменой (блок проявляется, внутренняя карточка въезжает
   справа, полоска прогресса на активном табе, автопрокрутка глав с паузой при наведении/фокусе);
   карточки рейтингов и материалов въезжают со сдвигом; счётчики фактов (движок); в виджете подбора
   подсветка пробегает по вариантам и останавливается на ответе; липкая шапка с тенью.
   Только при html.mo и prefers-reduced-motion:no-preference. */
:root{
  --cream:#ffffff;--white:white;--frost:#f8fafc;--onyx:#181d26;--char:#333840;--graph:#525965;--steel:#9297a0;--silver:#e0e2e6;--mid:#040e20;
  --cobalt:#1b61c9;--cobalt-d:#154ea3;--sapph:#254fad;--navy:#0f2f6b;--deep:#16408f;--pale:#c7e5f2;--pale2:#e6f1fa;
  --shcta:rgba(0,0,0,.32) 0 0 1px 0,rgba(0,0,0,.08) 0 0 2px 0,rgba(45,127,249,.28) 0 1px 3px 0,rgba(0,0,0,.06) 0 0 0 .5px inset;
  --shnav:rgba(15,48,106,.05) 0 0 20px 0;
  --shcard:0 1px 2px rgba(15,48,106,.06),0 4px 16px rgba(15,48,106,.05);
  --disp:'Manrope',Georgia,serif;--f:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--cream);color:var(--char);font:400 18px/1.45 var(--f);letter-spacing:.007em;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;color:var(--mid)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--white);padding:10px 16px;border-radius:12px}
.skip:focus{top:12px}
.wrap{max-width:1248px;margin:0 auto;padding:0 24px}
svg{flex:none}
.disp{font-family:var(--disp);font-weight:800;letter-spacing:normal;color:var(--mid)}
.h2{font:900 clamp(30px,3.6vw,44px)/1.12 var(--disp);color:var(--mid)}
.lead{font-size:18px;line-height:1.5;color:var(--char);max-width:60ch}
.link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--cobalt);font:500 16px/1.3 var(--f)}
.link:hover{color:var(--cobalt-d);text-decoration:underline;text-underline-offset:4px}
.arr{display:inline-block;transition:transform .25s}
a:hover .arr,button:hover .arr{transform:translateX(3px)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:14px 24px;border-radius:12px;font:600 16px/1.2 var(--f);letter-spacing:.006em;border:1px solid var(--onyx);transition:background .2s,color .2s,transform .2s}
.btn-p{background:var(--onyx);color:var(--white);box-shadow:var(--shcta)}
.btn-p:hover{background:#2b3240}
.btn-g{background:var(--white);color:var(--onyx)}
.btn-g:hover{background:var(--frost)}
.btn-w{background:var(--white);color:var(--onyx);border-color:var(--white)}
.btn-w:hover{background:var(--pale2)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:32px;font:500 14px/1.2 var(--f);background:var(--pale);color:var(--navy)}
.chip.dk{background:var(--cobalt);color:var(--white)}
.chip.ln{background:transparent;border:1px solid rgba(255,255,255,.5);color:var(--white)}
.meta{font-size:14px;line-height:1.35;color:var(--graph)}

/* ---------- анонс + шапка ---------- */
.ann{background:var(--frost);border-bottom:1px solid var(--silver);font-size:15px;color:var(--char)}
.ann .wrap{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;position:relative;padding-right:56px}
.ann a{color:var(--cobalt);font-weight:500}
.ann a:hover{text-decoration:underline;text-underline-offset:3px}
.ann .x{position:absolute;right:12px;top:0;width:44px;height:44px;border:0;background:none;color:var(--graph);cursor:pointer;display:grid;place-items:center;border-radius:10px}
.ann .x:hover{color:var(--onyx)}
.ann[hidden]{display:none}
.hdr{position:sticky;top:0;z-index:50;background:var(--white);box-shadow:var(--shnav);transition:box-shadow .3s}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;font:900 20px/1 var(--disp);color:var(--mid);white-space:nowrap;min-height:44px}
.brand b{color:var(--cobalt);font-weight:800}
.brand img{width:32px;height:32px}
.nav{display:flex;align-items:center;gap:4px}
.nav>a,.more>button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 12px;border-radius:10px;font:400 16px/1 var(--f);color:var(--char);background:none;border:0;cursor:pointer}
.nav>a:hover,.more>button:hover,.more>button[aria-expanded=true]{color:var(--mid);background:var(--frost)}
.more{position:relative}
.more svg{transition:transform .2s}
.more>button[aria-expanded=true] svg{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);width:400px;display:none;grid-template-columns:repeat(2,1fr);gap:8px;padding:20px;background:var(--white);border-radius:16px;box-shadow:0 12px 40px rgba(15,48,106,.14),0 0 0 1px var(--silver)}
.more>button[aria-expanded=true]+.drop{display:grid}
.drop p{font:600 14px/1.2 var(--f);color:var(--graph);margin:0 0 6px 10px}
.drop a{display:flex;align-items:center;min-height:44px;padding:8px 10px;border-radius:10px;font-size:16px;color:var(--char)}
.drop a:hover{background:var(--pale2);color:var(--mid)}
.tools{display:flex;align-items:center;gap:8px}
.ico{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;border:0;background:none;color:var(--char);cursor:pointer}
.ico:hover{background:var(--frost);color:var(--cobalt)}
.lang{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font:500 15px/1 var(--f);color:var(--graph)}
.lang:hover{color:var(--mid)}
.tools .btn{min-height:44px;padding:10px 18px;font-size:15px}
.burger{display:none}
.mnav{display:none}

/* ---------- hero ---------- */
.hero{position:relative;text-align:center;padding:72px 0 0}
.hero h1{font:900 clamp(38px,5.6vw,76px)/1.04 var(--disp);color:var(--mid);max-width:15ch;margin:0 auto}
.hero .sub{margin:24px auto 0;max-width:58ch;font-size:19px;line-height:1.5;color:var(--char)}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.hero-note{margin-top:18px;font-size:15px;color:var(--graph)}
.hero-note span{color:var(--cobalt);font-weight:600}
.hero-vis{position:relative;z-index:2;width:min(1320px,calc(100% - 32px));margin:56px auto -140px;background:var(--onyx);border-radius:24px;padding:16px;text-align:left;box-shadow:0 30px 60px -20px rgba(4,14,32,.45)}
.vbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 8px 14px;color:#c9d2e0;font-size:14px}
.vbar .tabs{display:flex;gap:4px}
.vbar .tabs span{padding:6px 12px;border-radius:8px}
.vbar .tabs span.on{background:#2a3140;color:var(--white)}
.vbar .lv{display:inline-flex;align-items:center;gap:8px}
.vbar .lv i{width:8px;height:8px;border-radius:50%;background:#5b9cff}
.vgrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px}
.vmain{position:relative;display:block;border-radius:16px;overflow:hidden;background:#0d1320;color:var(--white)}
.vmain img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.vmain:hover img{transform:scale(1.03)}
.vmain .cap{position:absolute;left:0;right:0;bottom:0;padding:28px;background:linear-gradient(to top,rgba(4,14,32,.94),rgba(4,14,32,.6) 65%,rgba(4,14,32,0))}
.vmain h2{margin-top:12px;font:900 clamp(24px,2.6vw,36px)/1.12 var(--disp);color:var(--white);max-width:20ch}
.vmain .m{margin-top:10px;font-size:15px;color:#d5dceb}
.vmain .go{margin-top:18px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:12px;background:var(--white);color:var(--onyx);font:600 15px/1 var(--f)}
.vside{display:flex;flex-direction:column;gap:12px}
.vside h3{font:600 15px/1.2 var(--f);color:#c9d2e0;padding:6px 6px 0}
.vrow{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:center;padding:10px;border-radius:14px;background:#222936;color:var(--white);transition:background .2s}
.vrow:hover{background:#2c3443}
.vrow img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px}
.vrow b{display:block;font:600 16px/1.3 var(--f)}
.vrow small{display:block;margin-top:4px;font-size:14px;color:#b9c3d4}
.prompt{margin-top:auto;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 20px;border-radius:40px;background:var(--white);color:var(--char);font-size:16px;min-height:60px}
.prompt span{flex:1}
.prompt i{width:44px;height:44px;border-radius:50%;background:var(--onyx);color:var(--white);display:grid;place-items:center;font-style:normal}
.prompt:hover i{background:var(--cobalt)}

/* ---------- полоса фактов ---------- */
.factsband{background:var(--white);padding:200px 0 56px;border-bottom:1px solid var(--silver)}
.factsband .cap{text-align:center;font-size:16px;color:var(--graph)}
.facts{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.facts li{text-align:center;padding:8px}
.facts .big{display:block;font:900 56px/1 var(--disp);color:var(--mid)}
.facts span{display:block;margin-top:8px;font-size:16px;color:var(--char)}

/* ---------- секции ---------- */
main>section{padding:96px 0}
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.sh .lead{margin-top:14px}

/* главы (разделы) */
.chap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:stretch}
.tablist{display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--silver)}
.tab{position:relative;display:grid;grid-template-columns:44px 1fr;gap:4px 8px;align-items:baseline;text-align:left;width:100%;min-height:64px;padding:14px 16px 14px 20px;margin-left:-2px;border:0;border-left:2px solid transparent;background:none;cursor:pointer;font:500 18px/1.3 var(--f);color:var(--graph);border-radius:0 12px 12px 0;transition:background .25s,color .25s}
.tab .n{font:500 15px/1 var(--f);color:var(--graph);font-variant-numeric:tabular-nums}
.tab .d{grid-column:2;font:400 15px/1.4 var(--f);color:var(--graph);display:none}
.tab:hover{color:var(--onyx);background:rgba(255,255,255,.6)}
.tab[aria-selected=true]{color:var(--onyx);font-weight:600;background:var(--white);border-left-color:var(--onyx)}
.tab[aria-selected=true] .n{color:var(--cobalt);font-weight:600}
.tab[aria-selected=true] .d{display:block}
.tab .prog{position:absolute;left:-2px;top:0;width:2px;height:100%;background:var(--cobalt);transform-origin:top;transform:scaleY(0)}
.panels{display:grid}
.chap>*,.uc-grid>*,.vgrid>*,.pick>*,.mail>*{min-width:0}
.panel{grid-area:1/1;border-radius:24px;padding:40px;background:var(--c);color:var(--white);display:grid;grid-template-rows:auto 1fr;gap:24px;min-height:520px}
.panel[hidden]{display:none}
.panel .pl{display:flex;justify-content:space-between;align-items:center;gap:12px;font:600 15px/1 var(--f)}
.panel .pl b{font:900 64px/0.8 var(--disp);opacity:.9}
.panel.lt{color:var(--mid)}
.pcard{align-self:end;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:center;background:var(--white);border-radius:16px;padding:16px;color:var(--char)}
.pcard img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px}
.pcard h3{font:900 32px/1.1 var(--disp);color:var(--mid)}
.pcard p{margin-top:10px;font-size:17px;line-height:1.45}
.pcard .btn{margin-top:22px;min-height:48px;padding:12px 20px;font-size:15px}
.chap:not(.js) .tablist{display:none}
.chap:not(.js){grid-template-columns:1fr}
.chap:not(.js) .panels{gap:24px}
.chap:not(.js) .panel{grid-area:auto;min-height:0}

/* подбор */
.pick{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.pick .btn{margin-top:28px}
.pick .link{margin-top:8px}
.pick .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.fc{background:var(--pale);border-radius:24px;padding:40px}
.wid{background:var(--white);border-radius:16px;padding:28px;box-shadow:var(--shcard);max-width:520px;margin:0 auto}
.wid .top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:15px;color:var(--graph)}
.wid .top b{color:var(--mid);font-weight:600}
.bar{height:6px;border-radius:6px;background:var(--pale2);margin:14px 0 22px;overflow:hidden}
.bar i{display:block;width:20%;height:100%;background:var(--cobalt);border-radius:6px}
.wid .q{font:900 26px/1.15 var(--disp);color:var(--mid)}
.opts{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opts li{display:flex;align-items:center;gap:10px;min-height:56px;padding:12px 14px;border-radius:12px;border:1px solid var(--silver);font-size:16px;color:var(--char);background:var(--white)}
.opts li i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--steel);flex:none;display:grid;place-items:center}
.opts li.sel{border-color:var(--onyx);box-shadow:0 0 0 1px var(--onyx);color:var(--mid);font-weight:500}
.opts li.sel i{border-color:var(--cobalt);background:var(--cobalt);box-shadow:inset 0 0 0 3px var(--white)}
.wid .nx{display:flex;justify-content:space-between;align-items:center;margin-top:22px;font-size:15px;color:var(--graph)}
.wid .nx span:last-child{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;background:var(--onyx);color:var(--white);font-weight:600}
.cats{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.cats span{padding:6px 12px;border-radius:32px;font-size:14px;border:1px solid var(--silver);color:var(--char)}
.cats span.on{background:var(--mid);border-color:var(--mid);color:var(--white)}

/* свежие */
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{display:flex;flex-direction:column;background:var(--white);border-radius:16px;padding:12px 12px 24px;box-shadow:var(--shcard);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.card:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(15,48,106,.06),0 14px 30px rgba(15,48,106,.1)}
.card .im{border-radius:12px;overflow:hidden}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.card:hover img{transform:scale(1.04)}
.card .chip{margin:18px 12px 0;align-self:flex-start}
.card h3{margin:12px 12px 0;font:700 20px/1.25 var(--disp);color:var(--mid)}
.card:hover h3{color:var(--cobalt)}
.card .meta{margin:auto 12px 0;padding-top:14px}

/* рейтинги — цветокодированные карточки */
.uc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.uc{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:end;min-height:340px;padding:32px;border-radius:24px;background:var(--c);color:var(--white);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.uc:hover{transform:translateY(-4px)}
.uc .t{align-self:stretch;display:flex;flex-direction:column}
.uc h3{margin-top:16px;font:900 30px/1.1 var(--disp);color:inherit}
.uc .k{margin-top:auto;padding-top:20px;font:500 15px/1.3 var(--f);opacity:.92}
.uc .ph{background:var(--white);border-radius:16px;padding:10px;transform:rotate(2deg);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.uc:hover .ph{transform:rotate(0) translateY(-6px)}
.uc .ph img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.uc.lt{color:var(--mid)}
.uc.lt .chip{background:var(--white);color:var(--navy)}
.uc .chip{background:rgba(255,255,255,.16);color:var(--white)}

/* инструменты */
.tg{display:grid;grid-template-columns:repeat(6,1fr);gap:24px}
.tl{grid-column:span 2;background:var(--white);border-radius:16px;padding:28px;box-shadow:var(--shcard);display:flex;flex-direction:column}
.tl.w3{grid-column:span 3}
.tl .ic{width:48px;height:48px;border-radius:12px;background:var(--pale2);color:var(--cobalt);display:grid;place-items:center;margin-bottom:18px}
.tl h3{font:700 22px/1.2 var(--disp);color:var(--mid)}
.tl h3 a:hover{color:var(--cobalt)}
.tl>p{margin-top:8px;font-size:16px;line-height:1.45}
.tl .ls{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tl .ls a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:12px;border:1px solid var(--silver);font-size:15px;color:var(--char);transition:border-color .2s,color .2s}
.tl .ls a:hover{border-color:var(--cobalt);color:var(--cobalt)}
.scr{margin-top:20px;background:var(--onyx);border-radius:14px;padding:18px;color:#c9d2e0}
.scr .h{display:flex;justify-content:space-between;font-size:14px}
.scr .h b{color:var(--white);font-weight:600}
.lvl{display:flex;align-items:center;gap:3px;height:60px;margin-top:12px}
.lvl i{flex:1;min-width:3px;height:var(--h);border-radius:2px;background:#5b9cff}
.lvl i:nth-child(n+19){background:#3a4252}
.tests{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tests span{padding:5px 10px;border-radius:32px;background:#2a3140;font-size:14px;color:#dbe2ee}
.tests span.on{background:var(--cobalt);color:var(--white)}
.tbl{width:100%;margin-top:18px;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:9px 6px;text-align:left;border-bottom:1px solid var(--silver)}
.tbl th{font-weight:600;color:var(--mid)}
.tbl td{color:var(--graph)}
.tbl .sk{display:block;height:8px;border-radius:8px;background:var(--silver)}
.tbl .sk.b{background:var(--cobalt)}
.soonrow{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:20px 28px;border-radius:16px;border:1px dashed #c9cdd4}
.soonrow b{font:700 18px/1.2 var(--disp);color:var(--mid);margin-right:8px}
.soonrow span{display:inline-flex;align-items:center;gap:8px;font-size:16px;color:var(--char)}
.soonrow em{font-style:normal;font-size:14px;font-weight:600;padding:4px 10px;border-radius:32px;background:var(--pale);color:var(--navy)}

/* новости */
.nlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--onyx)}
.nlist li{border-bottom:1px solid var(--silver)}
.nlist a{display:grid;grid-template-columns:180px minmax(0,1fr) 240px;gap:32px;align-items:center;padding:28px 0}
.nlist .dt{font-size:15px;color:var(--graph)}
.nlist .dt b{display:block;font:900 30px/1 var(--disp);color:var(--mid);margin-bottom:6px}
.nlist h3{font:700 clamp(20px,2vw,26px)/1.25 var(--disp);color:var(--mid);max-width:30ch;transition:color .2s}
.nlist a:hover h3{color:var(--cobalt)}
.nlist img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.nlist a:hover img{transform:scale(1.03)}

/* о журнале */
.about{text-align:center}
.about .lbl{font:600 15px/1 var(--f);color:var(--cobalt)}
.about h2{margin-top:16px}
.about p{margin:24px auto 0;max-width:64ch;font-size:20px;line-height:1.55;color:var(--char)}

/* рассылка */
.mail{background:var(--mid);color:var(--white);border-radius:24px;padding:64px;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px;align-items:center}
.mail h2{font:900 clamp(30px,3.4vw,44px)/1.1 var(--disp);color:var(--white)}
.mail .lead{margin-top:16px;color:#d5dceb}
.perks{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.form label{display:block;font-size:15px;font-weight:500;color:#d5dceb;margin-bottom:8px}
.form .row{display:flex;gap:10px}
.form input{flex:1;min-width:0;min-height:52px;padding:0 16px;border-radius:12px;border:1px solid transparent;background:var(--white);font:400 16px/1 var(--f);color:var(--mid)}
.form input::placeholder{color:var(--graph)}
.form input:focus-visible{outline:2px solid #8fb8ff;outline-offset:2px}
.form button{white-space:nowrap;cursor:pointer}
.fine{margin-top:14px;font-size:14px;line-height:1.5;color:#b9c3d4}
.fine a{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.mail :focus-visible{outline-color:#8fb8ff}

/* подвал */
footer{border-top:1px solid var(--silver);padding:64px 0 40px}
.ft{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,3fr) minmax(0,2fr);gap:40px}
.ft>div>p{margin-top:16px;font-size:16px;max-width:30ch}
.ft h2{font:600 15px/1.2 var(--f);color:var(--mid);margin-bottom:12px}
.ft ul{list-style:none;margin:0;padding:0}
.ft .two{columns:2;column-gap:16px}
.ft li a{display:inline-flex;align-items:center;min-height:40px;font-size:16px;color:var(--char)}
.ft li a:hover{color:var(--cobalt)}
.vk{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--onyx);color:var(--white)}
.vk:hover{background:var(--cobalt)}
.legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--silver);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:14px;color:var(--graph)}

/* ---------- адаптив ---------- */
@media (max-width:1200px){
  .nav>a,.more>button{padding:8px 9px;font-size:15px}
  .lang{display:none}
  .g4{grid-template-columns:repeat(2,1fr)}
  .nlist a{grid-template-columns:150px minmax(0,1fr) 200px;gap:24px}
}
/* #2355: в шапке 7 пунктов — бургер включается раньше */
@media (max-width:1270px){
  .nav,.tools .btn{display:none}
  .burger{display:inline-grid}
  .mnav{position:absolute;top:100%;left:0;right:0;z-index:60;background:var(--white);box-shadow:0 20px 40px rgba(15,48,106,.12);padding:12px 16px 20px;max-height:calc(100dvh - 80px);overflow:auto;border-top:1px solid var(--silver)}
  .mnav.open{display:block}
  .mnav a{display:flex;align-items:center;min-height:48px;padding:8px 12px;border-radius:10px;font-size:17px;color:var(--char)}
  .mnav a:hover{background:var(--frost)}
  .mnav p{padding:14px 12px 4px;font-size:14px;font-weight:600;color:var(--graph)}
  .mnav .more2{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:8px 12px;border:0;background:none;border-radius:10px;font:400 17px/1.2 var(--f);color:var(--char);cursor:pointer}
  .mnav .more2[aria-expanded=true] svg{transform:rotate(180deg)}
  .mnav .more2+div{display:none}
  .mnav .more2[aria-expanded=true]+div{display:block}
  .mnav .btn{width:100%;margin-top:12px}
  .mnav .mrow{display:flex;gap:8px}
  .mnav .mrow a{flex:1;justify-content:center;border:1px solid var(--silver)}
}
@media (max-width:1060px){
  .chap{grid-template-columns:1fr;gap:20px}
  .tablist{flex-direction:row;overflow-x:auto;gap:8px;border-left:0;padding-bottom:6px;scrollbar-width:thin}
  .tab{flex:none;width:auto;min-height:48px;margin:0;grid-template-columns:auto auto;padding:10px 16px;border:1px solid var(--silver);border-radius:32px;font-size:16px;background:var(--white)}
  .tab[aria-selected=true]{background:var(--onyx);color:var(--white);border-color:var(--onyx)}
  .tab[aria-selected=true] .n{color:#9cc4ff}
  .tab .d,.tab[aria-selected=true] .d{display:none}
  .tab .prog{display:none}
  .pick{grid-template-columns:1fr;gap:32px}
  .uc{grid-template-columns:1fr;min-height:0}
  .uc .ph{order:-1;transform:none}
  .tl,.tl.w3{grid-column:span 3}
  .mail{grid-template-columns:1fr;padding:48px 40px;gap:32px}
  .ft{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .vgrid{grid-template-columns:1fr}
  .hero-vis{margin-bottom:-100px}
  .factsband{padding-top:150px}
  .facts{grid-template-columns:1fr 1fr;gap:24px 16px}
  .panel{padding:24px;min-height:0}
  .pcard{grid-template-columns:1fr}
  .nlist a{grid-template-columns:1fr 160px;gap:16px 20px}
  .nlist .dt{grid-column:1/-1;display:flex;gap:10px;align-items:baseline}
  .nlist .dt b{font-size:20px;margin:0}
  .uc-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .wrap{padding:0 16px}
  body{font-size:16px}
  main>section{padding:64px 0}
  .hero{padding-top:48px}
  .hero .sub{font-size:17px}
  .hero-cta .btn{flex:1 1 220px}
  .hero-vis{width:calc(100% - 24px);padding:10px;border-radius:20px;margin-top:40px}
  .vbar .tabs{display:none}
  .vmain .cap{position:static;background:#0d1320;padding:20px}
  .vrow{grid-template-columns:88px 1fr;gap:12px}
  .g4{grid-template-columns:1fr;gap:16px}
  .tg{grid-template-columns:1fr;gap:16px}
  .tl,.tl.w3{grid-column:auto;padding:22px}
  .soonrow{padding:18px}
  .fc{padding:16px;border-radius:20px}
  .wid{padding:20px}
  .opts{grid-template-columns:1fr}
  .uc{padding:20px;border-radius:20px}
  .uc h3{font-size:26px}
  .mail{padding:32px 20px;border-radius:20px}
  .form .row{flex-direction:column}
  .ft{grid-template-columns:1fr;gap:28px}
  .panel .pl b{font-size:48px}
  .pcard h3{font-size:26px}
}
@media (max-width:420px){
  .nlist a{grid-template-columns:1fr}
  .nlist img{order:-1}
  .facts .big{font-size:44px}
  .ann .wrap{justify-content:flex-start;font-size:14px;padding-left:16px}
}
@media (max-width:360px){
  .wrap{padding:0 12px}
  .brand{font-size:17px;gap:8px}
  .hero h1{font-size:34px}
  .vrow{grid-template-columns:1fr}
  .vrow img{aspect-ratio:16/9}
  .prompt{font-size:15px;padding-left:14px}
  .tools{gap:2px}
}

/* ---------- живой слой варианта ---------- */
@media (prefers-reduced-motion:no-preference){
  .mo.mo-sc .hdr{box-shadow:rgba(15,48,106,.1) 0 4px 24px 0}
  /* смена глав */
  @keyframes chIn{from{opacity:0}}
  @keyframes cardIn{from{opacity:0;transform:translateX(48px)}}
  @keyframes numIn{from{opacity:0;transform:translateY(-14px)}}
  .mo .chap.js .panel.act{animation:chIn .55s ease both}
  .mo .chap.js .panel.act .pcard{animation:cardIn .7s cubic-bezier(.16,1,.3,1) .08s both}
  .mo .chap.js .panel.act .pl b{animation:numIn .6s cubic-bezier(.16,1,.3,1) .05s both}
  @keyframes prog{to{transform:scaleY(1)}}
  .mo .chap.run .tab[aria-selected=true] .prog{animation:prog 6.5s linear forwards}
  .mo .chap.run:hover .tab .prog,.mo .chap.run:focus-within .tab .prog{animation-play-state:paused}
  /* карточки въезжают со сдвигом */
  @keyframes slideIn{from{opacity:0;transform:translateX(56px)}}
  .mo .slide>*{opacity:0}
  .mo .slide.go>*{opacity:1;animation:slideIn .9s cubic-bezier(.16,1,.3,1) calc(var(--k,0) * 110ms) backwards}
  .mo .uc .ph{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
  /* подбор: подсветка пробегает по вариантам и останавливается на ответе */
  @keyframes scan{0%,100%{border-color:var(--silver);box-shadow:none}35%,60%{border-color:var(--cobalt);box-shadow:0 0 0 1px var(--cobalt)}}
  @keyframes land{0%,70%{border-color:var(--silver);box-shadow:none;font-weight:400}}
  @keyframes bar{from{width:0}}
  .mo .wid.play .opts li:nth-child(1){animation:scan .5s ease .4s}
  .mo .wid.play .opts li:nth-child(3){animation:scan .5s ease .8s}
  .mo .wid.play .opts li:nth-child(4){animation:scan .5s ease 1.2s}
  .mo .wid.play .opts li.sel{animation:land 2.1s ease .2s backwards}
  .mo .wid.play .bar i{animation:bar 1s cubic-bezier(.2,.8,.2,1) 2.1s backwards}
  /* уровень микрофона в «скриншоте» */
  @keyframes lv{0%,100%{transform:scaleY(1)}40%{transform:scaleY(.6)}70%{transform:scaleY(1.1)}}
  .mo .lvl i{animation:lv 1.3s ease-in-out infinite;animation-delay:calc(var(--k,0) * -89ms)}
  .mo .lvl i:nth-child(n+19){animation:none}
  /* витрина: живой индикатор */
  @keyframes blink{50%{opacity:.35}}
  .mo .vbar .lv i{animation:blink 1.8s ease-in-out infinite}
}
/* #2304 fix 320px */
.tg>*{min-width:0}

/* #2311: H1 ровно в 2 строки на ≥640px */
#h1{max-width:none!important;text-wrap:balance}
@media (max-width:639px){#h1 .h1br{display:none}}
@media (min-width:640px){#h1{white-space:nowrap}}
.h2w{text-wrap:balance}
@media (min-width:1024px){.h2w{max-width:none!important}}
@media (min-width:1280px){.h2w[style*="--h2fit:"]{font-size:var(--h2fit)!important}}
@media (min-width:1024px) and (max-width:1279px){.h2w[style*="--h2fitm"]{font-size:var(--h2fitm)!important}}
/*H1FIT*/
/* #2355 */
@media (min-width:1271px){header nav.nav{margin-left:30px}}

header .lang{white-space:nowrap}

/* ===== #2359: стыковка с общей обвязкой сайта (site.css / widget.css / headsearch.css) ===== */
/* site.css: правила для старой инлайн-шапки (body>header{padding:20px!important…}) — гасим */
body>header.hdr{padding-left:0!important;padding-right:0!important;gap:0!important;flex-wrap:nowrap!important}
/* site.css: .nav a — подчёркивание-градиент, 14px; .tbl th — тёмная заливка; .form input — свои рамки */
.hdr .nav>a{background-image:none;padding-bottom:8px;font-weight:400}
.hdr .nav>a:hover{background-image:none}
.tl .tablewrap{margin:18px 0 0;overflow:visible}
.tl .tablewrap>.tbl{margin:0;min-width:0}
.tl .tbl th{background:none;color:var(--mid);padding:9px 6px;font-weight:600}
.tl .tbl td{padding:9px 6px}
.tl .tbl tr:nth-child(even) td{background:none}
.mail .form input{width:auto;padding:0 16px;font-size:16px;border:1px solid transparent}
.mail .form input:hover{border-color:transparent}
.mail .form input:focus-visible{border-color:transparent;box-shadow:none}
.nl-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.mail .nl-msg{margin-top:12px;font-size:15px}
/* site.css ставит заголовкам hyphens:auto — в макете переносов по слогам нет */
h1,h2,h3{hyphens:manual}
/* правки макета: метка в карточке рейтинга по ширине текста; стрелка — сразу за текстом ссылки */
.uc .chip{align-self:flex-start}
.pick .link{display:inline-block;padding:12px 0;line-height:1.35}
/* логотип: монограмма .td-mark из site.css + словесный знак варианта */
.brand .td-mark{width:32px;height:32px}
.brand .bw b{color:var(--cobalt);font-weight:800}
/* поиск ⌘K (headsearch.js вставляет .hs-btn перед «Войти») — в виде иконки варианта */
.hdr .tools .hs-btn{order:0;width:44px;height:44px;padding:0;justify-content:center;border:0;border-radius:12px;background:none;color:var(--char);box-shadow:none;transform:none}
.hdr .tools .hs-btn:hover{background:var(--frost);color:var(--cobalt);transform:none;box-shadow:none}
.hdr .tools .hs-btn svg{width:20px;height:20px}
.hdr .tools .hs-btn .hs-lbl,.hdr .tools .hs-btn .hs-kbd{display:none}
.hdr .tools .lang{order:1}
.hdr .tools>a[href="/profile/"]{order:2}
.hdr .tools .burger{order:3}
/* «Войти» — виджет переименовывает в «Войти в аккаунт», у вошедшего — круглая иконка */
.hdr .tools a.sg-authlink:not(.sg-authlink--icon){min-height:44px;padding:10px 18px;border-radius:12px;border:1px solid var(--onyx);background:var(--onyx);color:var(--white)!important;font:600 15px/1.2 var(--f);white-space:nowrap}
.hdr .tools a.sg-authlink:not(.sg-authlink--icon):hover{background:#2b3240}
/* в шапке место только под «Войти» (как в макете); полное «Войти в аккаунт» остаётся в aria-label */
.hdr .tools a.sg-authlink:not(.sg-authlink--icon){font-size:0;gap:0}
.hdr .tools a.sg-authlink:not(.sg-authlink--icon)::after{content:"Войти";font-size:15px}
.hdr .tools a.sg-authlink--icon{display:inline-grid!important;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:12px;background:none;box-shadow:none;color:var(--char)}
.mnav a.sg-authlink--icon{width:100%;border-radius:12px}
.mnav a.sg-authlink .sg-authlink__t{position:static;width:auto;height:auto;margin:0;clip:auto;overflow:visible}
/* 1271–1400: у сайта постоянная полоса прокрутки (scrollbar-gutter в site.css) — уплотняем меню */
@media (min-width:1271px) and (max-width:1400px){.hdr .nav>a,.hdr .more>button{padding-left:9px;padding-right:9px}header nav.nav{margin-left:16px}}
/* до 1270 вход — в бургер-меню; иконка кабинета в шапке не помещается на 320 */
@media (max-width:1270px){.hdr .tools>a[href="/profile/"]{display:none!important}}
/* лайки/комментарии/закладка, которые widget.js добавляет в карточки */
.card .sg-card-stat{margin:10px 12px 0}
/* ADS: пустые слоты не оставляют дыру между шапкой и hero */
.uz-top{margin:0 auto}
.uz-top>[data-uz]:not(:empty){margin-top:20px}
.uz-feed{margin:0 auto 24px}
.uz-feed:empty{display:none}