/* Раздел «Статьи». Токены те же, что на лендинге: меняются там — менять и здесь. */
@font-face{font-family:Inter;src:url(/fonts/inter-cyrillic.woff2) format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;src:url(/fonts/inter-latin.woff2) format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2212,U+2191,U+2192,U+2713,U+2726,U+2727,U+25CF}
@font-face{font-family:Inter;src:url(/fonts/inter-rub.woff2) format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+20BD}
@font-face{font-family:Unbounded;src:url(/fonts/unbounded-cyrillic.woff2) format('woff2');font-weight:700 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Unbounded;src:url(/fonts/unbounded-latin.woff2) format('woff2');font-weight:700 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2212,U+2191,U+2192,U+2713,U+2726,U+2727,U+25CF}
@font-face{font-family:Unbounded;src:url(/fonts/unbounded-rub.woff2) format('woff2');font-weight:700 900;font-display:swap;unicode-range:U+20BD}

:root{
  --bg:#070a14; --surface-1:#0c101d; --surface-2:#141a2b; --surface-3:#1d2437;
  --ink:#f7f9ff; --ink-muted:#b6c0d8; --ink-faint:#8d98b4;
  --signal:#c7ff58; --signal-ink:#0a1004; --violet:#8c70ff; --violet-soft:rgba(140,112,255,.16);
  --line:rgba(255,255,255,.11); --line-strong:rgba(255,255,255,.2);
  --font-body:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:Unbounded,var(--font-body);
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --t-sm:.875rem; --t-xs:.8125rem; --t-micro:.75rem;
  --t-read:clamp(1.04rem,1rem + .25vw,1.16rem);
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem;
  --r-2:10px; --r-3:16px; --r-4:24px; --r-5:34px; --r-full:999px;
  --sh-2:0 12px 32px rgba(0,0,0,.35); --sh-3:0 28px 70px rgba(0,0,0,.5);
  --d-1:150ms; --d-2:300ms; --e-out:cubic-bezier(0.16,1,0.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--s-6)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
.wrap{width:min(1180px,calc(100% - clamp(2rem,6vw,5rem)));margin-inline:auto}
.mono{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase}
.skip{position:absolute;left:-999px;top:0;z-index:50;padding:var(--s-3) var(--s-4);background:var(--signal);color:var(--signal-ink);font-weight:700}
.skip:focus{left:var(--s-4);top:var(--s-4)}

.backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.glow{position:absolute;border-radius:50%;filter:blur(90px)}
.glow-a{width:46vw;height:46vw;left:-16vw;top:-18vw;background:rgba(140,112,255,.26)}
.glow-b{width:38vw;height:38vw;right:-14vw;top:38vh;background:rgba(199,255,88,.07)}

/* ── Шапка ── */
.bh-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);height:78px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:var(--s-3);flex:none;font-family:var(--font-display);font-size:1.22rem;font-weight:800;letter-spacing:-.05em}
.brand svg{width:34px;height:34px;flex:none}
.brand i{font-style:normal;color:var(--signal)}
.bh-nav{display:flex;gap:var(--s-6);font-size:var(--t-sm);color:var(--ink-muted)}
.bh-nav a{padding:var(--s-3) 0;white-space:nowrap;transition:color var(--d-1) var(--e-out)}
.bh-nav a:hover{color:var(--ink)}
.bh-nav a[aria-current]{color:var(--signal);font-weight:600}
.bh-actions{display:flex;align-items:center;gap:var(--s-2);flex:none}
.bh-login{padding:var(--s-3);border-radius:var(--r-2);font-size:var(--t-sm);font-weight:600;color:var(--ink-muted);transition:color var(--d-1),background var(--d-1)}
.bh-login:hover{color:var(--signal);background:rgba(199,255,88,.07)}
.bh-cta{padding:var(--s-3) var(--s-4);border:1px solid var(--line-strong);border-radius:var(--r-2);font-size:var(--t-sm);font-weight:600;white-space:nowrap;
  transition:border-color var(--d-1),color var(--d-1),background var(--d-1)}
.bh-cta:hover{border-color:var(--signal);color:var(--signal);background:rgba(199,255,88,.07)}

/* ── Список статей ── */
.blog-head{padding-block:clamp(3rem,2rem + 5vw,6rem) var(--s-7);max-width:60rem}
.eyebrow{display:flex;align-items:center;gap:var(--s-3);color:var(--signal);margin-bottom:var(--s-4)}
.eyebrow::after{content:"";flex:1;max-width:14rem;height:1px;background:linear-gradient(90deg,rgba(199,255,88,.5),transparent)}
.blog-head h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.2rem,1.1rem + 4.6vw,4.6rem);line-height:1;letter-spacing:-.055em;text-wrap:balance}
.blog-head p:last-child{margin-top:var(--s-5);max-width:58ch;color:var(--ink-muted);font-size:clamp(1.02rem,.96rem + .3vw,1.19rem)}

.card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-4);
  background:linear-gradient(158deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  transition:transform var(--d-2) var(--e-out),border-color var(--d-2)}
.card:hover{transform:translateY(-4px);border-color:rgba(199,255,88,.45)}
.card-cover{display:block;overflow:hidden;border-bottom:1px solid var(--line);background:var(--surface-1)}
.card-cover img{width:100%;transition:transform .6s var(--e-out)}
.card:hover .card-cover img{transform:scale(1.035)}
.card-body{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5)}
.card-body .mono{color:var(--signal)}
.card h2,.card h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;line-height:1.12;text-wrap:balance}
.card h3{font-size:clamp(1.1rem,1rem + .5vw,1.35rem)}
.card h2{font-size:clamp(1.5rem,1.1rem + 1.7vw,2.4rem)}
.card p:last-child{color:var(--ink-muted);font-size:var(--t-sm)}
/* Вся карточка кликабельна, а ссылка в разметке одна — в заголовке */
.card h2 a::after,.card h3 a::after{content:"";position:absolute;inset:0}
.card--feature{flex-direction:row;align-items:stretch;border-color:var(--line-strong)}
/* На обложке текст, поэтому картинку нельзя обрезать: она задаёт высоту сама и центрируется */
.card--feature .card-cover{flex:1.35;display:flex;align-items:center;border-bottom:0;border-right:1px solid var(--line);background:#090c18}
.card--feature .card-body{flex:1;justify-content:center;padding:clamp(1.5rem,3vw,3rem)}
.card--feature p:last-child{font-size:1rem}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.cards--index{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--s-3)}
.cards--index .card:nth-child(3n+1){grid-column:span 2;flex-direction:row}
.cards--index .card:nth-child(3n+1) .card-cover{flex:none;width:44%;display:flex;align-items:center;border-bottom:0;border-right:1px solid var(--line);background:#090c18}
.cards--index .card:nth-child(3n+1) .card-body{justify-content:center;padding:clamp(1.5rem,2.6vw,2.5rem)}

/* ── Статья ── */
.post{padding-top:clamp(2rem,1.5rem + 2.5vw,3.5rem)}
.crumbs{display:flex;flex-wrap:wrap;gap:var(--s-2);color:var(--ink-faint)}
.crumbs a:hover{color:var(--signal)}
.crumbs span:last-child{color:var(--signal)}
.post-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,5vw,5rem);align-items:end;margin-top:var(--s-5);
  padding-bottom:var(--s-7);border-bottom:1px solid var(--line)}
.post-head h1{max-width:20ch;font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,1.1rem + 3.4vw,3.7rem);line-height:1.04;letter-spacing:-.05em;text-wrap:balance}
.post-meta{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);margin-top:var(--s-5);color:var(--ink-faint)}
.post-lead{margin-top:var(--s-5);max-width:60ch;color:var(--ink-muted);font-size:clamp(1.1rem,1rem + .5vw,1.35rem);line-height:1.5}
/* Главное число статьи — вместо картинки-обложки: заголовок не дублируется, а суть видна сразу */
.post-stat{min-width:15rem;padding:var(--s-6) var(--s-7);text-align:center;border:1px solid var(--line-strong);border-radius:var(--r-5);
  background:linear-gradient(158deg,rgba(255,255,255,.085),rgba(255,255,255,.02));box-shadow:var(--sh-3);transform:rotate(-2.5deg)}
.post-stat b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(3.4rem,2rem + 5vw,6rem);line-height:1;
  letter-spacing:-.07em;word-spacing:.16em;color:var(--signal);white-space:nowrap}
.post-stat b.is-long{font-size:clamp(2.6rem,1.6rem + 3.6vw,4.4rem)}
.post-stat span{display:block;margin-top:var(--s-3);font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted)}
.post-grid{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,46rem);gap:clamp(2rem,5vw,5rem);justify-content:space-between;margin-top:var(--s-7)}
.toc{position:sticky;top:var(--s-6);align-self:start;padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface-1)}
.toc .mono{color:var(--signal);margin-bottom:var(--s-4)}
.toc ol{display:grid;gap:var(--s-3);counter-reset:toc}
.toc li{counter-increment:toc;display:grid;grid-template-columns:1.6rem 1fr;font-size:var(--t-sm);line-height:1.4;color:var(--ink-muted)}
.toc li::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-mono);font-size:var(--t-micro);color:var(--ink-faint);padding-top:.2em}
.toc a{transition:color var(--d-1)}
.toc a:hover{color:var(--signal)}

.post-body{font-size:var(--t-read);line-height:1.72;color:#dfe5f3}
.post-body > * + *{margin-top:1.15em}
.post-body h2{margin-top:2.2em;font-family:var(--font-display);font-weight:800;font-size:clamp(1.3rem,1.1rem + .9vw,1.8rem);line-height:1.15;
  letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.post-body > h2:first-child{margin-top:0}
.post-body strong{color:var(--ink);font-weight:700}
.post-body ul{display:grid;gap:.6em}
.post-body ul li{position:relative;padding-left:1.6em}
.post-body ul li::before{content:"";position:absolute;left:.15em;top:.62em;width:.5em;height:.5em;background:var(--signal);clip-path:polygon(0 0,100% 50%,0 100%)}
.post-body blockquote{margin-block:1.8em;padding:var(--s-5) var(--s-5) var(--s-5) var(--s-6);border-radius:var(--r-3);
  border:1px solid rgba(199,255,88,.3);border-left:4px solid var(--signal);background:rgba(199,255,88,.07);
  font-size:1.06em;line-height:1.55;color:var(--ink)}
.sources{margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--line)}
.post-body .sources h2{margin-top:0;font-size:1.15rem}
.sources ol{display:grid;gap:var(--s-2);margin-top:var(--s-4);counter-reset:src;font-size:var(--t-sm);line-height:1.5}
.sources li{counter-increment:src;display:grid;grid-template-columns:2rem 1fr;color:var(--ink-muted)}
.sources li::before{content:counter(src) ".";font-family:var(--font-mono);color:var(--ink-faint)}
.sources a{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;overflow-wrap:anywhere;transition:color var(--d-1)}
.sources a:hover{color:var(--signal)}

/* ── Призыв и «Читайте также» ── */
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-5) var(--s-7);
  margin-top:var(--s-9);padding:clamp(1.75rem,4vw,3.5rem);border-radius:var(--r-5);background:var(--signal);color:var(--signal-ink)}
.cta > div{flex:1 1 24rem}
.cta .mono{opacity:.7}
.cta h2{margin-top:var(--s-3);font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,1.1rem + 2.2vw,2.9rem);line-height:1.04;letter-spacing:-.05em}
.cta p:last-child{margin-top:var(--s-4);max-width:46ch;font-weight:500}
.cta-btn{flex:none;display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-4) var(--s-6);border-radius:var(--r-3);
  background:var(--signal-ink);color:var(--signal);font-weight:700;white-space:nowrap;box-shadow:var(--sh-2);
  transition:transform var(--d-2) var(--e-out),box-shadow var(--d-2)}
.cta-btn:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.more{margin-top:var(--s-9)}
.more > h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,1.1rem + 1.6vw,2.3rem);letter-spacing:-.045em;margin-bottom:var(--s-5)}

/* ── Подвал ── */
.bf{margin-top:var(--s-9);border-top:1px solid var(--line)}
.bf-in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-6);padding-block:var(--s-6);font-size:var(--t-sm);color:var(--ink-muted)}
.bf ul{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);flex:1}
.bf a:hover{color:var(--signal)}
.bf-legal{color:var(--ink-faint);font-size:var(--t-xs)}

@media (max-width:1040px){
  .post-grid{grid-template-columns:minmax(0,46rem);justify-content:start}
  .toc{position:static}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .bh-nav a:not([aria-current]){display:none}
  .card--feature,.cards--index .card:nth-child(3n+1){flex-direction:column}
  .card--feature .card-cover,.cards--index .card:nth-child(3n+1) .card-cover{width:auto;border-right:0;border-bottom:1px solid var(--line)}
  .cards,.cards--index{grid-template-columns:minmax(0,1fr)}
  .cards--index .card:nth-child(3n+1){grid-column:auto}
  .post-head{grid-template-columns:minmax(0,1fr)}
  .post-stat{justify-self:start;min-width:0;padding:var(--s-5) var(--s-6);transform:rotate(-1.5deg)}
  .cta-btn{width:100%;justify-content:center}
}
@media (max-width:520px){
  .bh-in{height:68px}
  .bh-login{display:none}
  .bh-cta{padding:var(--s-2) var(--s-3);font-size:var(--t-xs)}
}
@media (hover:hover) and (pointer:fine){
  body{cursor:url(/cursor/default-28.png) 2 2, auto;
    cursor:image-set(url(/cursor/default-28.png) 1x, url(/cursor/default-56.png) 2x) 2 2, auto}
  a,button{cursor:url(/cursor/pointer-28.png) 2 2, pointer;
    cursor:image-set(url(/cursor/pointer-28.png) 1x, url(/cursor/pointer-56.png) 2x) 2 2, pointer}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto !important}
  .card:hover,.cta-btn:hover,.card:hover .card-cover img{transform:none}
}
@media (forced-colors:active){.cta{border:1px solid CanvasText}}