/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* Colors — from reference.
     --canvas is the page ground, --white the raised card surface.
     They coincide in light mode and separate in dark. */
  --carbon:#181925;
  --canvas:#ffffff;
  --white:#ffffff;
  --linen:#fafafa;
  --mist:#f5f5f5;
  --fog:#e8e8e8;
  /* Ash из референса (#999999) даёт 2.84:1 на белом и не проходит WCAG AA.
     Затемнён до 5.2:1 с тем же холодным оттенком. */
  --ash:#6f707c;
  --graphite:#666666;
  --veil:255,255,255;
  --band-from:var(--primary-700);
  --band-to:var(--primary-500);
  /* Brand accent — lifted from the live landing's Tailwind primary scale */
  --primary-50:#F4F7FB;
  --primary-100:#EEF2F6;
  --primary-500:#2F679A;
  --primary-600:#0A4067;
  --primary-700:#083454;
  --accent:var(--primary-600);
  --accent-deep:var(--primary-700);
  --accent-wash:rgba(10,64,103,.09);
  /* Яркие цвета referen'а годятся для заливок, но как текст на своих же
     пастельных подложках дают 1.8–3.6:1. Для текста и иконок — версии -ink. */
  --mint:#33c758;      --mint-wash:#def6e4;              --mint-ink:#147a33;
  --amber:#ffa600;     --amber-wash:rgba(255,166,0,.14); --amber-ink:#8a5300;
  --sky:#2c78fc;       --sky-wash:rgba(44,120,252,.10);  --sky-ink:#1a56c4;
  --magenta:#d6409f;   --magenta-wash:rgba(214,64,159,.10); --magenta-ink:#a3216f;

  --font:'Onest',Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* ---- ONE type scale. Discrete steps only — no fluid resizing. ---- */
  --fs-caption:13px;
  --fs-small:15px;
  --fs-body:17px;
  --fs-lead:20px;
  --fs-h4:20px;
  --fs-h3:26px;
  --fs-h2:40px;
  --fs-display:60px;

  --lh-display:1.1;
  --lh-heading:1.25;
  --lh-body:1.6;

  --tr-display:-0.04em;
  --tr-h2:-0.03em;
  --tr-h3:-0.02em;
  --tr-body:-0.011em;

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;

  /* Spacing */
  --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s20:20px;
  --s24:24px; --s32:32px; --s40:40px; --s48:48px; --s64:64px;

  --page:1200px;
  --section-y:112px;
  --measure:66ch;

  /* Radius — buttons match the live landing (rounded-xl / rounded-2xl) */
  --r-img:8px; --r-btn:12px; --r-card:16px; --r-btn-lg:16px; --r-panel:24px; --r-pill:9999px;

  /* Brand-tinted button shadow, like shadow-primary-600/20 on the live site */
  --accent-shadow:rgba(10,64,103,.22);
  --accent-shadow-hi:rgba(10,64,103,.32);

  /* Shadows */
  --sh-btn:rgba(0,0,0,0.08) 0px 1px 1px 1px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px;
  --sh-flat:rgba(0,0,0,0.08) 0px 1px 1px 0px, rgba(0,0,0,0.05) 0px 0px 0px 1px;
  --sh-panel:rgba(0,0,0,0.06) 0px 1px 3px 0px, rgba(0,0,0,0.06) 0px 8px 16px 0px, rgba(0,0,0,0.02) 0px 0px 0px 1px;
}

/* ============================================================
   DARK THEME
   The reference is a light design; this is its counterpart, built by
   re-pointing the same tokens. Accent moves up to primary-500 because
   primary-600 has too little contrast against a dark ground.
   ============================================================ */
[data-theme="dark"]{
  --carbon:#f2f2f6;
  --canvas:#0d0e15;
  --white:#171822;
  --linen:#12131b;
  --mist:#1e1f2b;
  --fog:#2b2d3b;
  --ash:#7b7c8a;
  --graphite:#a6a7b4;
  --veil:13,14,21;

  --accent:var(--primary-500);
  --accent-deep:#4a83b8;
  --accent-wash:rgba(47,103,154,.22);
  --accent-shadow:rgba(0,0,0,.45);
  --accent-shadow-hi:rgba(0,0,0,.6);
  --band-from:#041826;
  --band-to:var(--primary-600);

  /* На тёмном фоне контраст даёт осветление, поэтому -ink здесь светлее подложек */
  --mint:#4ade80;   --mint-wash:rgba(74,222,128,.15);    --mint-ink:#5ee694;
  --amber:#fbbf24;  --amber-wash:rgba(251,191,36,.15);   --amber-ink:#fcc93f;
  --sky:#60a5fa;    --sky-wash:rgba(96,165,250,.15);     --sky-ink:#7ab6ff;
  --magenta:#f472b6;--magenta-wash:rgba(244,114,182,.15);--magenta-ink:#f889c2;

  --sh-btn:rgba(0,0,0,.4) 0px 1px 2px 0px;
  --sh-flat:rgba(0,0,0,.35) 0px 1px 2px 0px, rgba(255,255,255,.07) 0px 0px 0px 1px;
  --sh-panel:rgba(0,0,0,.45) 0px 1px 3px 0px, rgba(0,0,0,.35) 0px 8px 16px 0px, rgba(255,255,255,.06) 0px 0px 0px 1px;
}
/* Brand marks ship as black artwork — flip them so they read on dark */
[data-theme="dark"] .proof-logos img{filter:grayscale(1) invert(1);opacity:.5}
[data-theme="dark"] .model-tag img{filter:grayscale(1) invert(1);opacity:.85}
/* Product screenshots stay light; a hairline keeps them from glaring */
[data-theme="dark"] .kf-shot,[data-theme="dark"] .mockup img{opacity:.92}
/* Cards floating on the coloured band stay light islands — a dark card on a
   dark gradient loses the contrast the numbers rely on. */
[data-theme="dark"] .metric,[data-theme="dark"] .mockup{
  --white:#ffffff; --carbon:#181925; --ash:#999999; --graphite:#666666; --fog:#e8e8e8;
  --mint:#33c758; --mint-wash:#def6e4;
  color:var(--carbon);
}

/* Tablet step */
@media (max-width:1023px){
  :root{ --fs-display:44px; --fs-h2:32px; --fs-h3:23px; --fs-lead:18px; --section-y:88px; }
}
/* Mobile step */
@media (max-width:639px){
  :root{
    --fs-display:34px; --fs-h2:27px; --fs-h3:21px; --fs-h4:18px;
    --fs-lead:17px; --fs-body:16px; --fs-small:15px;
    --section-y:64px;
  }
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--canvas);
  color:var(--carbon);
  transition:background-color .2s ease,color .2s ease;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--tr-body);
  font-weight:var(--fw-regular);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
section[id]{scroll-margin-top:88px}

.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--s24)}
.section{padding:var(--section-y) 0}
.section--linen{background:var(--linen)}

/* ============================================================
   TYPE
   ============================================================ */
.display{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--tr-display);font-weight:var(--fw-semibold)}
.h2{font-size:var(--fs-h2);line-height:var(--lh-heading);letter-spacing:var(--tr-h2);font-weight:var(--fw-medium)}
.h3{font-size:var(--fs-h3);line-height:var(--lh-heading);letter-spacing:var(--tr-h3);font-weight:var(--fw-medium)}
.h4{font-size:var(--fs-h4);line-height:1.35;letter-spacing:var(--tr-h3);font-weight:var(--fw-medium)}
.lead{font-size:var(--fs-lead);line-height:1.5;letter-spacing:-0.015em;color:var(--graphite);font-weight:var(--fw-regular)}
.body{font-size:var(--fs-body);line-height:var(--lh-body)}
.small{font-size:var(--fs-small);line-height:1.55;color:var(--graphite)}
.caption{font-size:var(--fs-caption);line-height:1.45;color:var(--ash)}
.measure{max-width:var(--measure)}
.muted{color:var(--graphite)}

/* ============================================================
   NAV
   ============================================================ */
.nav-wrap{position:sticky;top:0;z-index:60;padding:var(--s16) var(--s24);
  background:linear-gradient(to bottom,rgba(var(--veil),.94),rgba(var(--veil),0));backdrop-filter:blur(10px)}
.nav{max-width:var(--page);margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s16);background:var(--white);border-radius:var(--r-pill);
  padding:var(--s8) var(--s8) var(--s8) var(--s20);box-shadow:var(--sh-flat)}
.brand{display:flex;align-items:center;gap:var(--s8);font-weight:var(--fw-semibold);
  letter-spacing:-0.02em;font-size:var(--fs-small);white-space:nowrap;min-width:0}
.brand-mark{width:26px;height:26px;border-radius:8px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:var(--fs-caption);font-weight:var(--fw-semibold)}
.nav-links{display:flex;align-items:center;gap:var(--s4)}
.nav-link{padding:8px var(--s12);font-size:var(--fs-small);font-weight:var(--fw-medium);border-radius:var(--r-pill)}
.nav-link:hover{color:var(--graphite)}
.nav-actions{display:flex;align-items:center;gap:var(--s8)}
.theme-toggle{width:40px;height:40px;border-radius:var(--r-pill);display:flex;
  align-items:center;justify-content:center;color:var(--graphite);flex-shrink:0}
.theme-toggle:hover{background:var(--mist);color:var(--carbon)}
.theme-toggle svg{width:19px;height:19px}
.burger{display:none;width:40px;height:40px;border-radius:var(--r-pill);align-items:center;justify-content:center}
.burger svg{width:20px;height:20px}
.mobile-menu{display:none;max-width:var(--page);margin:var(--s8) auto 0;background:var(--white);
  border:1px solid var(--fog);border-radius:var(--r-card);padding:var(--s8);box-shadow:var(--sh-panel)}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:12px var(--s16);font-size:var(--fs-body);font-weight:var(--fw-medium);border-radius:var(--r-img)}
.mobile-menu a:hover{background:var(--mist)}
/* Russian nav labels are long: switch to the burger well before the pill
   runs out of room, otherwise the CTA spills outside it. */
@media (max-width:1180px){
  .nav-links{display:none}
  .nav-actions .btn--link{display:none}
  .burger{display:flex}
}
/* On phones the nav keeps only brand + burger; the CTA moves into the menu */
@media (max-width:639px){
  .nav-actions .btn--register{display:none}
  .nav{padding:var(--s8) var(--s8) var(--s8) var(--s16)}
  .mobile-menu .btn{margin-top:var(--s8);width:100%}
}

/* ============================================================
   BUTTONS
   ============================================================ */
/* Button shape follows the live landing: rounded rectangle (xl/2xl),
   brand-tinted shadow and a small lift on hover — not the reference's pills. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r-btn);font-size:var(--fs-small);font-weight:var(--fw-semibold);
  letter-spacing:-0.015em;white-space:nowrap;transition:all .2s ease}
.btn--primary{background:var(--accent);color:#fff;padding:12px 22px;
  box-shadow:0 10px 15px -3px var(--accent-shadow),0 4px 6px -4px var(--accent-shadow)}
.btn--primary:hover{background:var(--accent-deep);transform:translateY(-2px);
  box-shadow:0 12px 20px -3px var(--accent-shadow-hi),0 4px 6px -4px var(--accent-shadow-hi)}
.btn--register{background:var(--accent);color:#fff;padding:10px 16px;
  box-shadow:0 10px 15px -3px var(--accent-shadow)}
.btn--register:hover{background:var(--accent-deep);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--graphite);padding:12px 22px}
.btn--ghost:hover{background:var(--mist);color:var(--carbon)}
.btn--outline{background:var(--white);color:var(--carbon);padding:12px 22px;box-shadow:var(--sh-flat)}
.btn--outline:hover{background:var(--mist);transform:translateY(-2px)}
.btn--link{padding:8px var(--s12);font-weight:var(--fw-medium);border-radius:var(--r-img)}
.btn--link:hover{text-decoration:underline;text-underline-offset:3px}
.btn--lg{font-size:var(--fs-body);padding:16px 30px;border-radius:var(--r-btn-lg)}
.btn--block{width:100%}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:var(--s48) 0 var(--s64);text-align:center}
.chip{display:inline-flex;align-items:center;gap:var(--s8);background:var(--white);border:1px solid var(--fog);
  border-radius:var(--r-pill);padding:6px 16px 6px 6px;font-size:var(--fs-small);
  font-weight:var(--fw-medium);margin-bottom:var(--s32)}
.chip-tag{color:var(--accent);font-size:var(--fs-caption);font-weight:var(--fw-medium);
  background:var(--accent-wash);border-radius:var(--r-pill);padding:3px 10px}
.hero .display{max-width:1080px;margin:0 auto;text-wrap:balance}
.hero-line2{display:block;color:var(--graphite)}
.hero .lead{max-width:60ch;margin:var(--s24) auto 0}
.hero-cta{display:flex;align-items:center;justify-content:center;gap:var(--s12);margin-top:var(--s32);flex-wrap:wrap}
.hero-note{margin-top:var(--s16)}
/* Scannable value props — beat a dense paragraph for comprehension */
.hero-bullets{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s12);margin-top:var(--s40);min-height:96px}
.hero-bullet{display:inline-flex;align-items:center;gap:var(--s8);background:var(--white);
  box-shadow:var(--sh-flat);border-radius:var(--r-pill);padding:9px 18px 9px 14px;
  font-size:var(--fs-small);color:var(--graphite);text-align:left}
.hero-bullet svg{width:17px;height:17px;flex-shrink:0;color:var(--mint-ink)}
.hero-bullet b{font-weight:var(--fw-medium);color:var(--carbon)}
@media (max-width:639px){
  .hero-bullets{gap:var(--s8);margin-top:var(--s32)}
  .hero-bullet{width:100%;justify-content:flex-start}
}

.proof{margin-top:var(--s48)}
.proof-label{font-size:var(--fs-caption);color:var(--ash);margin-bottom:var(--s20)}
.proof-logos{display:flex;align-items:center;justify-content:center;gap:var(--s32);flex-wrap:wrap}
.proof-logos img{height:24px;width:110px;object-fit:contain;filter:grayscale(1);opacity:.45}
@media (max-width:639px){
  .hero .display{max-width:100%}
  /* long RU labels must wrap rather than push the page sideways */
  .btn--lg{white-space:normal;text-align:center}
  .hero-cta .btn,.models-cta .btn,.tpl-foot .btn{width:100%}
  .proof-logos{gap:var(--s20)}
  .proof-logos img{height:20px;width:88px}
}

/* ---- Gradient band + mockup ---- */
.band{background:linear-gradient(to right in oklab,var(--band-from) 0%,var(--band-to) 100%);
  padding:var(--s64) 0 0;overflow:hidden}
.band-inner{max-width:960px;margin:0 auto;padding:0 var(--s24);position:relative}
.mockup{background:var(--white);border-radius:var(--r-panel) var(--r-panel) 0 0;
  padding:var(--s12) var(--s12) 0;box-shadow:var(--sh-panel);position:relative;z-index:1}
.mockup img{border-radius:var(--r-img) var(--r-img) 0 0;width:100%;aspect-ratio:3/2;object-fit:cover}
.metric{position:absolute;z-index:2;background:var(--white);border:1px solid var(--fog);
  border-radius:var(--r-card);padding:var(--s16) var(--s20);box-shadow:var(--sh-panel);min-width:150px}
.metric-label{font-size:var(--fs-caption);color:var(--ash)}
.metric-value{font-size:var(--fs-h3);font-weight:var(--fw-medium);letter-spacing:var(--tr-h3);margin-top:2px;line-height:1.2}
.metric-delta{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-medium);
  color:var(--mint-ink);background:var(--mint-wash);border-radius:var(--r-pill);padding:3px 10px;margin-top:8px}
.metric--a{left:-12px;top:64px}
.metric--b{right:-12px;top:176px}
@media (max-width:1023px){.metric{display:none}}

/* ============================================================
   SECTION HEAD
   ============================================================ */
.sec-head{max-width:760px;margin-bottom:var(--s48)}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-medium);color:var(--graphite);
  background:var(--mist);border-radius:var(--r-pill);padding:5px 14px;margin-bottom:var(--s16)}
.sec-head .lead{margin-top:var(--s16)}
.sec-head--center .lead{margin-left:auto;margin-right:auto}

/* ============================================================
   TABS (shared: features + templates)
   ============================================================ */
.tabs{display:flex;gap:var(--s4);border-bottom:1px solid var(--fog);margin-bottom:var(--s32);
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:14px var(--s16);font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--ash);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tab:hover{color:var(--graphite)}
.tab[aria-selected="true"]{color:var(--carbon);border-bottom-color:var(--accent)}

.panel{display:none;background:var(--white);border:1px solid var(--fog);
  border-radius:var(--r-card);padding:var(--s20);box-shadow:var(--sh-panel)}
.panel[data-active="true"]{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);
  gap:var(--s40);align-items:center}
.panel-text .h3{margin-bottom:var(--s12)}
.panel-cta{margin-top:var(--s24)}
.panel video{width:100%;border-radius:var(--r-img);background:var(--mist);
  aspect-ratio:16/10;object-fit:cover;object-position:top center;border:1px solid var(--fog)}
@media (max-width:900px){.panel[data-active="true"]{grid-template-columns:1fr;gap:var(--s24)}}

/* ============================================================
   MODELS
   ============================================================ */
.model-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s24)}
.model-card{background:var(--white);border:1px solid var(--fog);border-radius:var(--r-card);padding:var(--s24)}
.model-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s12);margin-bottom:var(--s20)}
.cat-tag{font-size:var(--fs-caption);font-weight:var(--fw-medium);border-radius:var(--r-pill);padding:5px 14px}
.model-count{font-size:var(--fs-caption);color:var(--ash);white-space:nowrap}
.model-tags{display:flex;flex-wrap:wrap;gap:var(--s8)}
.model-tag{display:inline-flex;align-items:center;gap:8px;background:var(--mist);border-radius:var(--r-pill);
  padding:7px 16px 7px 10px;font-size:var(--fs-small);font-weight:var(--fw-medium)}
.model-tag img{height:15px;width:15px;object-fit:contain;opacity:.75}
.models-cta{text-align:center;margin-top:var(--s48)}
@media (max-width:860px){.model-grid{grid-template-columns:1fr}}

/* ============================================================
   KEY FEATURES
   ============================================================ */
.kf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s24)}
.kf-card{background:var(--white);border:1px solid var(--fog);border-radius:var(--r-card);
  padding:var(--s20);display:flex;flex-direction:column;gap:var(--s20)}
.kf-shot{border-radius:var(--r-img);border:1px solid var(--fog);width:100%;
  aspect-ratio:16/10;object-fit:cover;background:var(--mist)}
.kf-card .h4{margin-bottom:var(--s8)}
@media (max-width:980px){.kf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.kf-grid{grid-template-columns:1fr}}

/* ============================================================
   USE CASES
   ============================================================ */
.uc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s24)}
.uc-card{background:var(--white);border:1px solid var(--fog);border-radius:var(--r-card);
  padding:var(--s24);display:flex;flex-direction:column}
.uc-role{align-self:flex-start;font-size:var(--fs-caption);font-weight:var(--fw-medium);color:var(--graphite);
  background:var(--mist);border-radius:var(--r-pill);padding:5px 14px;margin-bottom:var(--s16)}
.uc-card .h4{margin-bottom:var(--s8)}
.uc-old{font-size:var(--fs-small);color:var(--ash);margin-bottom:var(--s20)}
.uc-steps{display:flex;flex-direction:column;gap:var(--s12);padding-top:var(--s20);
  border-top:1px solid var(--fog);margin-bottom:var(--s20)}
.uc-step{display:flex;align-items:flex-start;gap:var(--s12)}
.uc-tool{flex-shrink:0;font-size:var(--fs-caption);font-weight:var(--fw-medium);color:var(--carbon);
  background:var(--mist);border:1px solid var(--fog);border-radius:var(--r-pill);padding:4px 11px;white-space:nowrap}
.uc-action{font-size:var(--fs-small);color:var(--graphite)}
.uc-result{margin-top:auto;align-self:flex-start;font-size:var(--fs-caption);font-weight:var(--fw-medium);
  color:var(--mint-ink);background:var(--mint-wash);border-radius:var(--r-pill);padding:7px 16px}
.uc-note{text-align:center;margin-top:var(--s32)}
@media (max-width:980px){.uc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.uc-grid{grid-template-columns:1fr}}

/* ============================================================
   TEMPLATES
   ============================================================ */
/* Category pills — deliberately NOT the underline tabs used by "Возможности",
   so the two controls don't read as the same thing. */
.cat-pills{display:flex;gap:var(--s12);flex-wrap:wrap;justify-content:center;margin-bottom:var(--s40)}
.cat-pill{display:inline-flex;align-items:center;gap:var(--s8);border-radius:var(--r-pill);
  background:var(--white);color:var(--graphite);box-shadow:var(--sh-flat);
  padding:10px 18px;font-size:var(--fs-small);font-weight:var(--fw-medium);transition:.15s ease}
.cat-pill svg{width:18px;height:18px;flex-shrink:0}
.cat-pill:hover{background:var(--mist);color:var(--carbon)}
.cat-pill[aria-selected="true"]{background:var(--carbon);color:var(--canvas);box-shadow:none}
.cat-pill-n{font-size:var(--fs-caption);color:var(--ash)}
.cat-pill[aria-selected="true"] .cat-pill-n{color:rgba(255,255,255,.6)}
@media (max-width:639px){
  .cat-pills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    justify-content:flex-start;margin:0 calc(-1 * var(--s24)) var(--s32);padding:0 var(--s24)}
  .cat-pills::-webkit-scrollbar{display:none}
  .cat-pill{flex-shrink:0}
}

.tpl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s16)}
.tpl-card{background:var(--white);border:1px solid var(--fog);border-radius:var(--r-card);
  padding:var(--s20);display:flex;flex-direction:column;gap:var(--s12);transition:.15s ease}
.tpl-card:hover{box-shadow:var(--sh-panel)}
.tpl-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s12)}
.tpl-icon{width:40px;height:40px;border-radius:var(--r-pill);flex-shrink:0;
  background:var(--accent-wash);color:var(--accent);display:grid;place-items:center}
.tpl-icon svg{width:20px;height:20px}
.tpl-pro{flex-shrink:0;font-size:var(--fs-caption);font-weight:var(--fw-medium);
  color:var(--amber-ink);background:var(--amber-wash);border-radius:var(--r-pill);padding:3px 10px}
.tpl-try{margin-top:auto;padding-top:var(--s4);font-size:var(--fs-small);
  font-weight:var(--fw-medium);color:var(--graphite)}
.tpl-card:hover .tpl-try{color:var(--carbon)}
.tpl-foot{display:flex;align-items:center;justify-content:center;gap:var(--s16);margin-top:var(--s32);flex-wrap:wrap}
@media (max-width:980px){.tpl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.tpl-grid{grid-template-columns:1fr}}

/* ============================================================
   PRICING
   ============================================================ */
/* Планы приходят из админки, и сколько их — заранее неизвестно. Шаблон
   передаёт число в --plans: в ряд встаёт не больше пяти карточек,
   неполный последний ряд центрируется. */
.price-grid{--cols:min(var(--plans,4),5);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s20)}
.price-card{background:var(--white);border:1px solid var(--fog);border-radius:var(--r-panel);
  padding:var(--s32);display:flex;flex-direction:column;
  flex:0 0 calc((100% - (var(--cols) - 1) * var(--s20)) / var(--cols));max-width:380px}
/* Пять карточек в ряд уже узкие — ужимаем поля и цену */
@media (min-width:1101px){
  .price-grid--dense .price-card{padding:var(--s24)}
  .price-grid--dense .price-value{font-size:34px}
}
.price-card--hl{border-color:var(--carbon)}
.price-head{display:flex;align-items:center;gap:var(--s8);margin-bottom:var(--s12);flex-wrap:wrap}
.price-name{font-size:var(--fs-h4);font-weight:var(--fw-medium);letter-spacing:var(--tr-h3)}
.price-badge{font-size:var(--fs-caption);font-weight:var(--fw-medium);border-radius:var(--r-pill);padding:3px 10px;
  background:var(--mist);color:var(--graphite);white-space:nowrap}
.price-badge--hl{background:var(--carbon);color:var(--canvas)}
.price-value{font-size:var(--fs-h2);font-weight:var(--fw-semibold);letter-spacing:var(--tr-h2);line-height:1.1;margin-bottom:var(--s12)}
.price-desc{font-size:var(--fs-small);color:var(--graphite);margin-bottom:var(--s24)}
.price-features{list-style:none;display:flex;flex-direction:column;gap:var(--s12);margin-bottom:var(--s32)}
.swipe-hint{display:none;text-align:center;margin-top:var(--s16)}
/* Risk reducers directly under the plans — the last objections before paying */
.price-reassure{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s12) var(--s24);margin-top:var(--s32)}
.price-reassure span{display:inline-flex;align-items:center;gap:var(--s8);font-size:var(--fs-small);color:var(--graphite)}
.price-reassure svg{width:17px;height:17px;color:var(--mint-ink);flex-shrink:0}
.price-features li{display:flex;gap:var(--s12);font-size:var(--fs-small);color:var(--graphite)}
.price-features svg{flex-shrink:0;width:17px;height:17px;margin-top:3px;color:var(--carbon)}
/* Пункт, который в плане отмечен как недоступный («-» в начале строки в админке) */
.price-features li.is-off,.price-features li.is-off svg{color:var(--ash)}
.price-per{display:block;margin-top:var(--s4);font-size:var(--fs-caption);font-weight:var(--fw-regular);
  letter-spacing:normal;line-height:1.45;color:var(--ash)}
.price-card .btn{margin-top:auto}
@media (max-width:1100px){.price-grid{--cols:min(var(--plans,4),3)}}
@media (max-width:860px){.price-grid{--cols:min(var(--plans,4),2)}}
/* Phones: swipe the plans sideways instead of stacking 4 tall cards.
   Prices and CTAs stay visible — nothing about the offer is hidden. */
@media (max-width:639px){
  .price-grid{display:flex;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;gap:var(--s16);
    scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 calc(-1 * var(--s24));padding:0 var(--s24) var(--s4)}
  .price-grid::-webkit-scrollbar{display:none}
  .price-card{flex:0 0 84%;scroll-snap-align:center;padding:var(--s24)}
  .swipe-hint{display:block}
}

/* ---- Comparison ---- */
.compare{margin-top:var(--s64)}
.compare-title{text-align:center;margin-bottom:var(--s32)}
.compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s24);align-items:stretch}
.compare-col{border:1px solid var(--fog);border-radius:var(--r-panel);padding:var(--s32);background:var(--white)}
.compare-col--win{background:var(--mint-wash);border-color:transparent}
.compare-col h4{margin-bottom:var(--s20)}
.compare-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s16);
  padding:var(--s12) 0;border-bottom:1px solid var(--fog);font-size:var(--fs-small)}
.compare-row:last-of-type{border-bottom:none}
.compare-row span:last-child{color:var(--graphite);white-space:nowrap}
.compare-total{margin-top:var(--s20);padding-top:var(--s20);border-top:1px solid var(--fog);
  font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--graphite)}
.compare-price{font-size:var(--fs-h2);font-weight:var(--fw-semibold);letter-spacing:var(--tr-h2);line-height:1.1;margin-bottom:var(--s20)}
.compare-list{list-style:none;display:flex;flex-direction:column;gap:var(--s12)}
.compare-list li{display:flex;gap:var(--s12);font-size:var(--fs-small)}
.compare-list svg{flex-shrink:0;width:17px;height:17px;margin-top:3px;color:var(--mint-ink)}
@media (max-width:860px){.compare-grid{grid-template-columns:1fr}}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{max-width:860px;margin:0 auto;border:1px solid var(--fog);border-radius:var(--r-panel);
  background:var(--white);overflow:hidden}
.faq-item{border-bottom:1px solid var(--fog)}
.faq-item:last-child{border-bottom:none}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s24);padding:var(--s24) var(--s32);font-size:var(--fs-h4);font-weight:var(--fw-medium);
  letter-spacing:var(--tr-h3);line-height:1.35}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:var(--linen)}
.faq-sign{flex-shrink:0;width:24px;height:24px;position:relative;margin-top:3px}
.faq-sign::before,.faq-sign::after{content:'';position:absolute;left:50%;top:50%;background:var(--ash);
  transform:translate(-50%,-50%);transition:.2s ease}
.faq-sign::before{width:13px;height:1.5px}
.faq-sign::after{width:1.5px;height:13px}
.faq-item[open] .faq-sign::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-answer{padding:0 var(--s32) var(--s24);color:var(--graphite);max-width:72ch}
@media (max-width:639px){
  .faq-item summary{padding:var(--s20)}
  .faq-answer{padding:0 var(--s20) var(--s20)}
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{text-align:center;border-top:1px solid var(--fog)}
.final .display{max-width:900px;margin:0 auto;text-wrap:balance}
.final .lead{max-width:56ch;margin:var(--s24) auto var(--s32)}
.final-note{margin-top:var(--s16)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--linen);border-top:1px solid var(--fog);padding:var(--s64) 0 var(--s32)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,2.6fr);gap:var(--s64)}
.footer-brand .brand{margin-bottom:var(--s16)}
.footer-desc{font-size:var(--fs-small);color:var(--graphite);max-width:42ch}
.footer-socials{display:flex;flex-wrap:wrap;gap:var(--s8);margin-top:var(--s20)}
.footer-socials a{font-size:var(--fs-caption);font-weight:var(--fw-medium);color:var(--graphite);
  background:var(--white);box-shadow:var(--sh-flat);border-radius:var(--r-pill);padding:7px 14px}
.footer-socials a:hover{color:var(--carbon);background:var(--mist)}
.footer-mail{display:inline-block;margin-top:var(--s20);font-size:var(--fs-small);
  font-weight:var(--fw-medium);color:var(--accent)}
.footer-mail:hover{text-decoration:underline;text-underline-offset:3px}
.footer-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s32)}
.footer-col h3{font-size:var(--fs-small);font-weight:var(--fw-semibold);margin-bottom:var(--s16)}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:var(--s12)}
.footer-col a{font-size:var(--fs-small);color:var(--graphite)}
.footer-col a:hover{color:var(--carbon);text-decoration:underline;text-underline-offset:3px}
.footer-bottom{margin-top:var(--s48);padding-top:var(--s24);border-top:1px solid var(--fog);
  display:flex;justify-content:space-between;gap:var(--s12);flex-wrap:wrap}
@media (max-width:980px){
  .footer-grid{grid-template-columns:1fr;gap:var(--s48)}
}
@media (max-width:639px){
  .footer-cols{grid-template-columns:1fr;gap:var(--s32)}
}

/* ============================================================
   COLLAPSIBLE LISTS (mobile only)
   Long lists are clamped on phones and opened with "показать все".
   On desktop .clamp-hidden is inert and the toggle row is hidden.
   ============================================================ */
/* Two clamp tiers: .clamp-lg hides everywhere, .clamp-sm only on phones,
   so a list can show 9 on desktop but just 3 on mobile. */
.clamp-lg{display:none}
.more-row{display:none;justify-content:center;margin-top:var(--s24)}
.more-row--left{justify-content:flex-start;margin-top:var(--s16)}
.more-row.has-lg{display:flex}
.show-more{display:inline-flex;align-items:center;gap:var(--s8);border-radius:var(--r-pill);
  background:var(--white);color:var(--carbon);box-shadow:var(--sh-flat);
  padding:12px 22px;font-size:var(--fs-small);font-weight:var(--fw-medium)}
.show-more::after{content:'↓';color:var(--ash)}
.show-more.is-open::after{content:'↑'}
.show-more:hover{background:var(--mist)}
.show-more--sm{padding:7px 16px;font-size:var(--fs-caption);background:var(--mist);box-shadow:none}
@media (max-width:639px){
  .clamp-sm{display:none}
  .more-row.has-sm{display:flex}
}

/* ============================================================
   STICKY MOBILE CTA — appears once the hero CTA is scrolled away
   ============================================================ */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:rgba(var(--veil),.92);backdrop-filter:blur(12px);
  border-top:1px solid var(--fog);padding:var(--s12) var(--s16);
  padding-bottom:calc(var(--s12) + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .25s ease}
.sticky-cta.is-visible{transform:translateY(0)}
.sticky-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s16)}
.sticky-cta-price{font-size:var(--fs-h4);font-weight:var(--fw-medium);letter-spacing:var(--tr-h3);line-height:1.2}
.sticky-cta .btn{flex-shrink:0}
@media (max-width:639px){.sticky-cta{display:block}}