/* ==========================================================================
   styles.css — Компоненты «Тумблер». Опирается на assets/tokens.css.
   ========================================================================== */

/* ---------- Reset / базовое ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--font-text);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--calm);outline-offset:3px;border-radius:6px}

/* ---------- Раскладка ---------- */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.section{padding-block:clamp(56px,9vw,120px)}
.section--tight{padding-block:clamp(40px,6vw,72px)}
.stack>*+*{margin-top:var(--sp-4)}
.eyebrow{
  font-family:var(--font-display);font-weight:700;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--calm);
  display:inline-flex;align-items:center;gap:.55em;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--signal);border-radius:2px}
.section-head{max-width:64ch;margin-bottom:clamp(28px,4vw,52px)}
.section-head h2{font-size:var(--fs-h2);margin-top:.4em}
.section-head p{color:var(--muted);margin-top:.7em;font-size:1.05rem}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--muted);max-width:60ch}

/* ---------- Skip link ---------- */
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--signal);color:var(--signal-ink);padding:12px 18px;border-radius:0 0 var(--r-sm) 0;font-weight:700}
.skip:focus{left:0}

/* ==========================================================================
   ТУМБЛЕР — сигнатурный компонент
   ========================================================================== */
.tgl{
  --tw:56px;--th:32px;--pad:3px;
  position:relative;display:inline-flex;align-items:center;
  width:var(--tw);height:var(--th);flex:0 0 auto;
  padding:0;border:none;border-radius:var(--r-pill);cursor:pointer;
  background:var(--line);
  transition:background var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.tgl__knob{
  position:absolute;top:var(--pad);left:var(--pad);
  width:calc(var(--th) - var(--pad)*2);height:calc(var(--th) - var(--pad)*2);
  border-radius:50%;background:var(--surface);box-shadow:var(--shadow-1);
  transition:transform var(--t-mid) var(--ease);
}
.tgl[aria-checked="true"]{background:var(--signal)}
.tgl[aria-checked="true"] .tgl__knob{
  transform:translateX(calc(var(--tw) - var(--th)));
  background:var(--signal-ink);
}
.tgl.is-glow{box-shadow:0 0 0 6px var(--glow),0 0 26px 4px var(--glow)}

/* Крупный тумблер героя */
.tgl--hero{--tw:132px;--th:74px;--pad:6px}
.tgl--hero .tgl__knob{box-shadow:var(--shadow-2)}
@media (max-width:520px){.tgl--hero{--tw:108px;--th:60px}}

/* Мини-тумблер как буллет списка */
.tgl-mini{
  --s:26px;position:relative;display:inline-block;flex:0 0 auto !important;
  width:var(--s);min-width:var(--s);height:calc(var(--s)*.58);border-radius:var(--r-pill);
  background:var(--signal);margin-top:.28em;
}
.tgl-mini::after{
  content:"";position:absolute;top:2px;right:2px;
  width:calc(var(--s)*.58 - 4px);height:calc(var(--s)*.58 - 4px);
  border-radius:50%;background:var(--signal-ink);
}
.tgl-mini--off{background:var(--line)}
.tgl-mini--off::after{left:2px;right:auto;background:var(--muted)}

/* Список с мини-тумблерами */
.switch-list li{display:flex;gap:.7em;align-items:flex-start;padding-block:.35em}
.switch-list li>span:not(.tgl-mini){flex:1;min-width:0}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  padding:14px 26px;border-radius:var(--r-pill);border:1.5px solid transparent;
  cursor:pointer;min-height:48px;transition:transform var(--t-fast) var(--ease),
  background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),color var(--t-fast);
  will-change:transform;
}
.btn--primary{background:var(--signal);color:var(--signal-ink)}
.btn--primary:hover{background:var(--signal-dim);transform:translateY(-1px);box-shadow:0 8px 24px var(--glow)}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn--lg{font-size:1.1rem;padding:17px 34px;min-height:56px}
.btn--block{width:100%}
.btn__arrow{transition:transform var(--t-fast) var(--ease)}
.btn:hover .btn__arrow{transform:translateX(3px)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color var(--t-mid),background var(--t-mid);
}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;gap:var(--sp-5);height:68px}
.brand{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-display);font-weight:800;font-size:1.22rem;letter-spacing:-.02em}
.brand svg{width:30px;height:30px;flex:0 0 auto}
.nav__links{display:flex;align-items:center;gap:var(--sp-5);margin-left:auto}
.nav__links a{font-weight:600;font-size:.96rem;color:var(--muted);transition:color var(--t-fast)}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--ink)}
.nav__actions{display:flex;align-items:center;gap:var(--sp-3)}
.nav__cabinet{font-weight:600;font-size:.94rem;padding:9px 16px;border:1.5px solid var(--line);border-radius:var(--r-pill);transition:border-color var(--t-fast),color var(--t-fast)}
.nav__cabinet:hover{border-color:var(--ink)}

/* переключатель темы */
.theme-btn{
  width:42px;height:42px;border-radius:var(--r-pill);border:1.5px solid var(--line);
  background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;
  transition:border-color var(--t-fast),transform var(--t-fast);
}
.theme-btn:hover{border-color:var(--ink);transform:translateY(-1px)}
.theme-btn svg{width:19px;height:19px}
.theme-btn .icon-moon{display:none}
:root[data-theme="dark"] .theme-btn .icon-sun,
:root:not([data-theme="light"]) .theme-btn .icon-sun{display:block}
:root[data-theme="dark"] .theme-btn .icon-moon{display:block}
:root[data-theme="dark"] .theme-btn .icon-sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .icon-sun{display:none}
  :root:not([data-theme="light"]) .theme-btn .icon-moon{display:block}
}

/* бургер */
.burger{display:none;width:42px;height:42px;border:1.5px solid var(--line);border-radius:var(--r-pill);background:transparent;color:var(--ink);cursor:pointer;place-items:center}
.burger svg{width:20px;height:20px}

/* мобильное меню */
.mobile-menu{display:none;flex-direction:column;gap:var(--sp-2);padding:0 var(--pad-x) var(--sp-5)}
.mobile-menu a{padding:13px 4px;font-weight:600;border-bottom:1px solid var(--line);color:var(--ink)}
.mobile-menu .btn{margin-top:var(--sp-3)}
.mobile-menu.is-open{display:flex}

@media (max-width:900px){
  .nav__links{display:none}
  .nav__cabinet{display:none}
  .burger{display:grid}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;overflow:hidden;padding-block:clamp(48px,7vw,90px) clamp(56px,8vw,110px)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 55% at 78% 8%, var(--glow), transparent 60%),
    radial-gradient(48% 40% at 12% 92%, color-mix(in srgb,var(--calm) 22%,transparent), transparent 62%);
  opacity:.9;
}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero__eyebrow{margin-bottom:var(--sp-4)}
.hero h1{font-size:var(--fs-display);max-width:14ch}
.hero h1 .hl{color:var(--calm)}
.hero__sub{margin-top:var(--sp-5);max-width:46ch;color:var(--muted);font-size:clamp(1.05rem,1.5vw,1.28rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
.hero__meta{display:flex;flex-wrap:wrap;gap:var(--sp-5);margin-top:var(--sp-6);color:var(--muted);font-size:.92rem}
.hero__meta span{display:inline-flex;align-items:center;gap:.5em}
.hero__meta b{color:var(--ink);font-family:var(--font-display)}

/* Панель тумблера героя */
.hero__panel{
  position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow-2);
  padding:clamp(26px,4vw,40px);overflow:hidden;
}
.hero__panel::after{
  content:"";position:absolute;inset:auto -30% -50% -30%;height:70%;
  background:radial-gradient(50% 100% at 50% 0%,var(--glow),transparent 70%);
  opacity:0;transition:opacity var(--t-slow) var(--ease);pointer-events:none;
}
.hero__panel.is-on::after{opacity:1}
.hero__panel-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-6)}
.hero__panel-label{font-family:var(--font-mono);font-size:.82rem;color:var(--muted);letter-spacing:.02em}
.hero__panel-state{font-family:var(--font-display);font-weight:800;font-size:1.05rem}
.hero__panel.is-on .hero__panel-state{color:var(--calm)}
.hero__toggle-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--sp-5);padding-block:var(--sp-4)}
.hero__status{text-align:center}
.hero__status .off-txt,.hero__status .on-txt{transition:opacity var(--t-mid)}
.hero__status .on-txt{display:none}
.hero__panel.is-on .hero__status .off-txt{display:none}
.hero__panel.is-on .hero__status .on-txt{display:block}
.hero__status b{font-family:var(--font-display);font-size:1.35rem;display:block}
.hero__status small{color:var(--muted);font-size:.9rem}
.hero__servicerow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.svc-chip{font-size:.8rem;font-weight:600;color:var(--muted);padding:5px 11px;border:1px solid var(--line);border-radius:var(--r-pill);transition:all var(--t-mid)}
.hero__panel.is-on .svc-chip{border-color:color-mix(in srgb,var(--signal) 55%,var(--line));color:var(--ink)}

@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr}
  .hero__panel{order:-1;max-width:440px;margin-inline:auto;width:100%}
  .hero h1{max-width:none}
}

/* ==========================================================================
   Проблема → решение
   ========================================================================== */
.pr-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);align-items:stretch}
.pr-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);background:var(--surface)}
.pr-card--off{background:var(--surface-2)}
.pr-card h3{font-size:var(--fs-h3);margin-bottom:var(--sp-4);display:flex;align-items:center;gap:.6em}
.pr-card p{color:var(--muted)}
.pr-card ul{margin-top:var(--sp-4)}
.pr-card--off .tag{color:var(--off)}
.pr-card--on{border-color:color-mix(in srgb,var(--signal) 50%,var(--line))}
.pr-card--on .tag{color:var(--calm)}
.tag{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:720px){.pr-grid{grid-template-columns:1fr}}

/* ==========================================================================
   «Где работает» — чипы
   ========================================================================== */
.works-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-3)}
.work-item{
  display:flex;align-items:center;gap:.7em;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  font-weight:600;transition:transform var(--t-fast) var(--ease),border-color var(--t-fast);
}
.work-item:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--signal) 55%,var(--line))}
.work-item .ic{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;background:var(--surface-2);color:var(--calm)}
.work-item .ic svg{width:20px;height:20px}
.works-note{margin-top:var(--sp-5);color:var(--muted);font-size:.95rem}

/* ==========================================================================
   BENTO — почему у нас работает
   ========================================================================== */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-4);grid-auto-rows:minmax(0,auto)}
.bento-card{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);
  background:var(--surface);display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;
}
.bento-card h3{font-size:var(--fs-h3)}
.bento-card p{color:var(--muted)}
.bento-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);color:var(--calm)}
.bento-ic svg{width:24px;height:24px}
.bento-a{grid-column:span 3}
.bento-b{grid-column:span 3}
.bento-c{grid-column:span 2}
.bento-d{grid-column:span 2}
.bento-e{grid-column:span 2}
/* тёмная акцентная ячейка */
.bento--dark{
  background:var(--inv-paper);color:var(--inv-ink);border-color:var(--inv-line);
  position:relative;overflow:hidden;
}
.bento--dark p{color:var(--inv-muted)}
.bento--dark .bento-ic{background:color-mix(in srgb,var(--signal) 16%,transparent);color:var(--signal)}
.bento--dark::after{content:"";position:absolute;right:-40px;bottom:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 70%)}
.bento-badge{align-self:flex-start;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--signal-ink);background:var(--signal);padding:4px 10px;border-radius:var(--r-pill);font-weight:700}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento-a,.bento-b,.bento-c,.bento-d,.bento-e{grid-column:span 1}
  .bento-a,.bento-b{grid-column:span 2}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .bento-a,.bento-b{grid-column:span 1}
}

/* ==========================================================================
   Тарифы
   ========================================================================== */
.tariffs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--sp-4);align-items:stretch}
.tariff{
  position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;
  transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease);
}
.tariff:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.tariff--featured{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal)}
.tariff__badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--signal);color:var(--signal-ink);font-family:var(--font-display);
  font-weight:700;font-size:.76rem;padding:5px 14px;border-radius:var(--r-pill);white-space:nowrap}
.tariff__term{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--muted)}
.tariff__price{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,3.4vw,2.6rem);line-height:1;margin-top:var(--sp-3)}
.tariff__price span{font-size:1rem;font-weight:600;color:var(--muted)}
.tariff__per{color:var(--muted);font-size:.9rem;margin-top:6px}
.tariff__save{display:inline-block;margin-top:var(--sp-3);font-size:.82rem;font-weight:700;color:var(--calm);background:var(--surface-2);padding:4px 10px;border-radius:var(--r-pill)}
.tariff__cta{margin-top:auto;padding-top:var(--sp-5)}
.tariffs-note{margin-top:var(--sp-5);display:flex;flex-wrap:wrap;gap:var(--sp-5);color:var(--muted);font-size:.92rem}
.tariffs-note span{display:inline-flex;gap:.5em;align-items:center}

/* Таблица сравнения */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);-webkit-overflow-scrolling:touch}
.cmp{width:100%;border-collapse:collapse;min-width:640px}
.cmp th,.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:.95rem}
.cmp thead th{font-family:var(--font-display);font-weight:700;background:var(--surface-2)}
.cmp tbody th{font-weight:600;color:var(--muted)}
.cmp td{text-align:center}
.cmp tr:last-child td,.cmp tr:last-child th{border-bottom:none}
.cmp .col-hl{background:color-mix(in srgb,var(--signal) 9%,transparent)}

/* ==========================================================================
   Шаги «как работает»
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);counter-reset:step}
.step{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:clamp(24px,3vw,34px)}
.step__num{counter-increment:step;font-family:var(--font-display);font-weight:800;font-size:2.4rem;color:var(--signal-dim);line-height:1}
.step__num::before{content:"0" counter(step)}
.step h3{font-size:var(--fs-h3);margin-top:var(--sp-3)}
.step p{color:var(--muted);margin-top:var(--sp-2)}
.step__line{position:absolute;top:44px;right:-30px;width:36px;height:2px;background:var(--line)}
.step:last-child .step__line{display:none}
@media (max-width:820px){.steps{grid-template-columns:1fr}.step__line{display:none}}

/* Гайд по клиентам */
.clients{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-4)}
.client-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:clamp(22px,2.6vw,30px)}
.client-card h3{font-size:var(--fs-h3);display:flex;align-items:center;gap:.5em}
.client-card .pill{font-size:.72rem;font-weight:700;color:var(--signal-ink);background:var(--signal);padding:3px 9px;border-radius:var(--r-pill)}
.client-card p{color:var(--muted);margin-top:var(--sp-3)}
.client-card ul{margin-top:var(--sp-3)}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{max-width:820px;margin-inline:auto}
.faq details{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);margin-bottom:var(--sp-3);overflow:hidden}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 22px;font-family:var(--font-display);
  font-weight:700;font-size:1.05rem;display:flex;align-items:center;justify-content:space-between;gap:1em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{width:22px;height:22px;flex:0 0 auto;color:var(--muted);transition:transform var(--t-mid) var(--ease)}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq details[open] summary{color:var(--calm)}
.faq__body{padding:0 22px 20px;color:var(--muted)}
.faq__body a{color:var(--calm);font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--calm) 40%,transparent)}

/* ==========================================================================
   Финальный CTA
   ========================================================================== */
.cta-final{position:relative;overflow:hidden;background:var(--inv-paper);color:var(--inv-ink);border-radius:var(--r-lg);padding:clamp(40px,6vw,72px);text-align:center}
.cta-final::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 50% 0%,var(--glow),transparent 60%);opacity:.6;pointer-events:none}
.cta-final>*{position:relative}
.cta-final h2{font-size:var(--fs-h2);max-width:20ch;margin-inline:auto}
.cta-final p{color:var(--inv-muted);margin-top:var(--sp-4);max-width:48ch;margin-inline:auto}
.cta-final .btn{margin-top:var(--sp-6)}
.cta-final .promo{margin-top:var(--sp-5);font-size:.9rem;color:var(--inv-muted)}
.cta-final .promo code{font-family:var(--font-mono);color:var(--signal);background:color-mix(in srgb,var(--signal) 12%,transparent);padding:3px 9px;border-radius:6px;font-weight:700}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{border-top:1px solid var(--line);padding-block:clamp(40px,6vw,64px) var(--sp-6);margin-top:var(--sp-8)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-6)}
.footer-brand p{color:var(--muted);margin-top:var(--sp-3);max-width:34ch;font-size:.95rem}
.footer-col h4{font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-3)}
.footer-col a{display:block;padding:6px 0;color:var(--ink);font-size:.95rem;transition:color var(--t-fast)}
.footer-col a:hover{color:var(--calm)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;align-items:center;margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
.footer-legal{max-width:70ch;color:var(--muted);font-size:.8rem;margin-top:var(--sp-4);line-height:1.5}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:span 2}}
@media (max-width:460px){.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:span 1}}

/* ==========================================================================
   Блог
   ========================================================================== */
.blog-hero{padding-block:clamp(40px,6vw,72px) var(--sp-6)}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-5)}
.post-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease)}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.post-card__cover{aspect-ratio:16/9;background:
  linear-gradient(135deg,color-mix(in srgb,var(--calm) 22%,var(--surface)),var(--surface)),
  radial-gradient(70% 90% at 85% 15%,var(--glow),transparent 60%);
  position:relative;border-bottom:1px solid var(--line);display:grid;place-items:center}
.post-card__cover .tgl-badge{width:64px;height:36px;border-radius:var(--r-pill);background:var(--signal);position:relative}
.post-card__cover .tgl-badge::after{content:"";position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;background:var(--signal-ink)}
.post-card__body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);flex:1}
.post-card__cat{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--calm)}
.post-card__body h3{font-size:1.2rem}
.post-card__body p{color:var(--muted);font-size:.94rem;flex:1}
.post-card__meta{color:var(--muted);font-size:.82rem;margin-top:var(--sp-2)}

/* Статья */
.article{max-width:760px;margin-inline:auto}
.article__head{margin-bottom:var(--sp-6)}
.article__cat{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--calm)}
.article h1{font-size:clamp(2rem,4.4vw,3rem);margin-top:var(--sp-3)}
.article__meta{display:flex;flex-wrap:wrap;gap:var(--sp-4);color:var(--muted);font-size:.9rem;margin-top:var(--sp-4)}
.article__lead{font-size:1.2rem;color:var(--muted);margin-top:var(--sp-5);line-height:1.55}
.article__body{margin-top:var(--sp-6)}
.article__body>*{max-width:68ch}
.article__body h2{font-size:var(--fs-h3);margin-top:var(--sp-7);margin-bottom:var(--sp-3)}
.article__body h3{font-size:1.2rem;margin-top:var(--sp-6);margin-bottom:var(--sp-2)}
.article__body p{margin-top:var(--sp-3);color:var(--ink)}
.article__body ul.switch-list{margin-top:var(--sp-3)}
.article__body a{color:var(--calm);font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--calm) 40%,transparent)}
.callout{border:1px solid var(--line);border-left:3px solid var(--signal);background:var(--surface-2);border-radius:var(--r-md);padding:18px 22px;margin-top:var(--sp-5)}
.callout strong{font-family:var(--font-display)}
.toc{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:20px 24px;margin-top:var(--sp-5)}
.toc h4{font-family:var(--font-display);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-3)}
.toc a{display:block;padding:5px 0;color:var(--ink);border-bottom:none}
.toc a:hover{color:var(--calm)}
.article__cover{aspect-ratio:2/1;border-radius:var(--r-lg);border:1px solid var(--line);margin-top:var(--sp-5);background:
  linear-gradient(135deg,color-mix(in srgb,var(--calm) 20%,var(--surface)),var(--surface)),
  radial-gradient(60% 80% at 80% 20%,var(--glow),transparent 60%);
  display:grid;place-items:center}

/* Breadcrumbs */
.crumbs{display:flex;flex-wrap:wrap;gap:.5em;color:var(--muted);font-size:.85rem;margin-bottom:var(--sp-4)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs span{color:var(--line)}

/* ==========================================================================
   Reveal (прогрессивное улучшение — гейт .reveal-js на <html>)
   ========================================================================== */
.reveal-js .reveal{opacity:0;transform:translateY(16px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.reveal-js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal-js .reveal{opacity:1;transform:none;transition:none}
}

/* Divider */
.rule{height:1px;background:var(--line);border:none;margin-block:var(--sp-6)}

/* Утилиты */
.center{text-align:center}
.mx-auto{margin-inline:auto}
.mt-6{margin-top:var(--sp-6)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
@media (max-width:680px){.grid-2{grid-template-columns:1fr}}