/* ════════════════════════════════════════════════════════════════════════════
   Bazison Agency — дизайн-система
   Приборная панель: анодированный тёплый серый, машинные швы,
   оранжевый только как сигнал действия.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  /* поверхности */
  --ground:#E7E5E0;      /* фон страницы  */
  --plate:#F3F2EE;       /* плита, карточка */
  --recess:#DCDAD3;      /* утопленное, подложка под фото */
  /* текст и линии */
  --ink:#15181B;
  --hair:#C6C3BB;        /* волосяная линия, шов */
  /* акценты */
  --signal:#D8501B;      /* ТОЛЬКО действие. Два сигнала на экран = ни одного */
  --live:#1C7A5B;
  /* глубина */
  --shadow:rgba(20,22,25,.10);
  --plate-lip:rgba(255,255,255,.70);
  /* шрифты */
  --display:'IBM Plex Sans', ui-sans-serif, -apple-system, Segoe UI, Arial, sans-serif;
  --text:ui-sans-serif, -apple-system, Segoe UI, Helvetica Neue, Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;
  /* ритм */
  --gutter:clamp(20px,5vw,72px);
  --maxw:1240px;
}
@media (prefers-color-scheme:dark){
  :root{--ground:#121417;--plate:#1A1D21;--recess:#0C0E10;--ink:#EAE8E3;
        --hair:#2E3338;--signal:#FF6A2B;--live:#35A981;
        --shadow:rgba(0,0,0,.55);--plate-lip:rgba(255,255,255,.055)}
}
:root[data-theme=dark]{--ground:#121417;--plate:#1A1D21;--recess:#0C0E10;--ink:#EAE8E3;
  --hair:#2E3338;--signal:#FF6A2B;--live:#35A981;
  --shadow:rgba(0,0,0,.55);--plate-lip:rgba(255,255,255,.055)}
:root[data-theme=light]{--ground:#E7E5E0;--plate:#F3F2EE;--recess:#DCDAD3;--ink:#15181B;
  --hair:#C6C3BB;--signal:#D8501B;--live:#1C7A5B;
  --shadow:rgba(20,22,25,.10);--plate-lip:rgba(255,255,255,.70)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:74px}  /* липкая шапка не должна накрывать якорь */
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--text);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:inherit}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:10px;z-index:99;background:var(--plate);
  padding:10px 16px;border:1px solid var(--hair);border-radius:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
section{padding:clamp(52px,8vw,110px) 0}
section.alt{background:var(--plate);border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair)}

/* ── типографика ───────────────────────────────────────────────────────── */
h1{font-family:var(--display);font-weight:600;margin:0 0 18px;
  font-size:clamp(34px,6.4vw,92px);line-height:1.0;letter-spacing:-.035em;
  max-width:16ch;text-wrap:balance}
h1 .dim{opacity:.42}
h2{font-family:var(--display);font-weight:600;font-size:clamp(26px,3.8vw,48px);
  line-height:1.06;letter-spacing:-.028em;margin:0 0 14px;max-width:22ch;
  text-wrap:balance}
h3{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.02em;margin:0}
.lede{max-width:58ch;opacity:.75;margin:0 0 40px}
.plate-tag{display:inline-block;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-bottom:14px}

/* ── шапка ─────────────────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:40;position:sticky;background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--hair)}
.topbar-in{display:flex;align-items:center;gap:26px;height:60px}
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.logo svg{width:22px;height:22px;display:block;flex:0 0 22px}
.logo b{font-family:var(--display);font-weight:600;font-size:15px;
  letter-spacing:.01em;text-transform:uppercase}
.nav{display:flex;gap:22px;margin-left:auto;font-size:14.5px}
.nav a{text-decoration:none;opacity:.72}
.nav a:hover{opacity:1;color:var(--signal)}
@media(max-width:780px){.nav{display:none}.topbar-in{gap:14px}}

/* ── кнопки ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);
  font-weight:600;font-size:15px;letter-spacing:-.01em;text-decoration:none;
  padding:14px 22px;border-radius:3px;white-space:nowrap;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.btn-sm{padding:9px 15px;font-size:13.5px;margin-left:auto}
.nav + .btn-sm{margin-left:0}
.btn-signal{background:var(--signal);color:#fff;
  box-shadow:0 1px 0 var(--plate-lip) inset,0 6px 18px var(--shadow)}
.btn-signal:hover{transform:translateY(-1px)}
.btn-signal:active{transform:translateY(1px);box-shadow:0 1px 3px var(--shadow)}
.btn-ghost{color:var(--ink);border:1px solid var(--hair);background:transparent}
.btn-ghost:hover{background:var(--plate)}
.row-btn{display:flex;gap:14px;flex-wrap:wrap}

/* ── машинный шов: подпись вёрстки, стоит 0 байт ───────────────────────── */
.seam{height:1px;position:relative;
  background:linear-gradient(90deg,transparent,var(--hair) 12%,var(--hair) 88%,transparent)}
.seam::after{content:"";position:absolute;top:-2px;left:50%;width:5px;height:5px;
  transform:translateX(-50%) rotate(45deg);background:var(--ground);
  border:1px solid var(--hair);border-left:0;border-top:0}

/* ── герой ─────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:min(84vh,720px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--recess)}
.hero-sm{min-height:min(58vh,480px)}
.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.88)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(78deg,
  var(--ground) 0%,color-mix(in srgb,var(--ground) 84%,transparent) 36%,transparent 68%)}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);
  margin:0 auto;padding:var(--gutter);padding-bottom:clamp(32px,6vw,76px)}
.hero-sub{max-width:48ch;font-size:clamp(16px,1.4vw,20px);opacity:.78;margin:0 0 28px}
.crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  opacity:.6;margin-bottom:18px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--signal)}

/* ── строка фактов ─────────────────────────────────────────────────────── */
.facts{display:flex;flex-wrap:wrap;gap:clamp(22px,6vw,76px);
  padding:clamp(26px,4vw,42px) 0;border-bottom:1px solid var(--hair)}
.fact b{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(28px,3.4vw,44px);letter-spacing:-.03em;line-height:1}
.fact span{font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;opacity:.55;display:block;margin-top:8px}

/* ── плиты ─────────────────────────────────────────────────────────────── */
.plates{display:grid;grid-template-columns:repeat(auto-fit,minmax(286px,1fr));gap:22px}
.plate{background:var(--plate);border:1px solid var(--hair);border-radius:4px;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 1px 0 var(--plate-lip) inset,0 10px 26px -18px var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease}
.plate:hover{transform:translateY(-3px);
  box-shadow:0 1px 0 var(--plate-lip) inset,0 20px 40px -20px var(--shadow)}
.plate figure{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--recess)}
.plate figure img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.88)}
.plate-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.plate p{margin:0;font-size:15px;opacity:.72;flex:1}
.price{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;opacity:.85;
  padding-top:13px;margin-top:4px;border-top:1px solid var(--hair)}
.price.big{font-size:17px;border:0;padding:0;margin:0 0 12px;opacity:1}

/* ── две колонки ───────────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.split figure{margin:0;border-radius:4px;overflow:hidden;border:1px solid var(--hair);
  box-shadow:0 18px 42px -26px var(--shadow)}
.split figure img{width:100%;height:auto;display:block;filter:saturate(.88)}
@media(max-width:840px){.split{grid-template-columns:1fr}}

/* ── списки и шаги ─────────────────────────────────────────────────────── */
.list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.list li{display:flex;gap:12px;align-items:baseline;font-size:15.5px}
.list li::before{content:"";width:5px;height:5px;flex:0 0 5px;border-radius:50%;
  background:var(--hair);transform:translateY(-2px)}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:20px;counter-reset:s}
.step{display:flex;gap:16px;align-items:flex-start}
.step-n{font-family:var(--mono);font-size:12px;width:26px;height:26px;flex:0 0 26px;
  display:grid;place-items:center;border:1px solid var(--hair);border-radius:3px;
  background:var(--plate)}
.step b{font-family:var(--display);font-weight:600;font-size:16px;display:block;margin-bottom:3px}
.step p{margin:0;font-size:15px;opacity:.72}

/* ── направления ───────────────────────────────────────────────────────── */
.nishe-group{margin-bottom:34px}
.nishe-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:12px}
.nishe{display:block;padding:17px 19px;background:var(--plate);border:1px solid var(--hair);
  border-radius:4px;text-decoration:none;transition:border-color .15s ease,transform .15s ease}
.nishe:hover{border-color:var(--signal);transform:translateY(-2px)}
.nishe b{font-family:var(--display);font-weight:600;font-size:16px;display:block}
.nishe span{font-size:13.5px;opacity:.62;display:block;margin-top:3px}

/* ── тарифы ────────────────────────────────────────────────────────────── */
.tariffs{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:20px}
.tariff{background:var(--plate);border:1px solid var(--hair);border-radius:4px;padding:24px;
  box-shadow:0 1px 0 var(--plate-lip) inset}
.tariff .price{border:0;padding:0;margin:9px 0 12px;font-size:14px;color:var(--signal)}
.tariff p{margin:0;font-size:15px;opacity:.72}

/* ── цена и вопросы ────────────────────────────────────────────────────── */
.pricebox{background:var(--ground);border:1px solid var(--hair);border-radius:4px;
  padding:28px;max-width:560px}
.pricebox p{margin:0 0 18px;opacity:.72;font-size:15.5px}
.faq{display:grid;gap:14px;max-width:820px}
.qa{background:var(--plate);border:1px solid var(--hair);border-radius:4px;padding:20px 22px}
.qa b{font-family:var(--display);font-weight:600;font-size:16.5px;display:block;margin-bottom:6px}
.qa p{margin:0;opacity:.74;font-size:15.5px}

/* ── подвал ────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--hair);padding:clamp(40px,6vw,72px) 0 40px;
  background:var(--plate)}
.foot{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px)}
.foot-note{max-width:42ch;opacity:.72;font-size:15.5px;margin:16px 0 22px}
.foot-links{display:grid;gap:7px;align-content:start;font-size:14.5px}
.foot-links a{text-decoration:none;opacity:.72}
.foot-links a:hover{opacity:1;color:var(--signal)}
.foot-copy{margin:36px 0 0;opacity:.45}
@media(max-width:840px){.foot{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ── карточка живого демо: кликается целиком ───────────────────────────── */
.plate-live{text-decoration:none;color:inherit}
.plate-live:hover{border-color:var(--signal)}
.live-cta{color:var(--signal);font-family:var(--display);font-weight:600;
  font-size:14px;letter-spacing:-.01em;border-top:0;padding-top:2px;margin-top:0}


/* ── переключатель темы ────────────────────────────────────────────────── */
.icon-btn{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;
  border:1px solid var(--hair);border-radius:3px;background:transparent;
  color:var(--ink);opacity:.7;transition:opacity .12s,border-color .12s}
.icon-btn:hover{opacity:1;border-color:var(--signal);color:var(--signal)}
.icon-btn svg{width:16px;height:16px}

/* ════════════════════════════════════════════════════════════════════════════
   Каталог демо — /demo/
   ════════════════════════════════════════════════════════════════════════════ */
.nav a.on{opacity:1;color:var(--signal)}

.dhead{padding-top:clamp(38px,6vw,72px)}
.dhead h1{margin:0 0 18px}
.dnote{max-width:74ch;margin:0 0 32px;padding:18px 21px;border-radius:5px;font-size:14.5px;
  line-height:1.6;border:1px solid color-mix(in srgb,var(--signal) 26%,var(--hair));
  background:color-mix(in srgb,var(--signal) 6%,transparent)}
.dnote b{font-weight:600;font-family:var(--display)}

.dchips{display:flex;flex-wrap:wrap;gap:8px}
.dchip{font-family:var(--mono);font-size:12.5px;padding:8px 14px;border-radius:19px;
  border:1px solid var(--hair);background:var(--plate);color:inherit;cursor:pointer;
  transition:border-color .14s ease,color .14s ease}
.dchip:hover{border-color:var(--signal);color:var(--signal)}
.dchip.on{background:var(--ink);border-color:var(--ink);color:var(--ground)}

.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.dcard{background:var(--plate);border:1px solid var(--hair);border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  box-shadow:0 1px 0 var(--plate-lip) inset,0 10px 26px -18px var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
a.dcard:hover{transform:translateY(-3px);border-color:var(--signal);
  box-shadow:0 1px 0 var(--plate-lip) inset,0 20px 40px -20px var(--shadow)}
.dcard.flat{opacity:.72}
.dcard figure{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--recess)}
.dcard figure img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.88)}
.dcard-b{padding:20px 22px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.dtag{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  opacity:.5}
.dcard h3{margin:0;font-family:var(--display);font-weight:600;font-size:20px;
  letter-spacing:-.02em;line-height:1.18}
.dcard p{margin:0;font-size:14.5px;opacity:.7;line-height:1.5}
.dtry{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:7px;flex:1}
.dtry li{display:flex;gap:9px;font-size:13.5px;opacity:.62;line-height:1.42}
.dtry li::before{content:"";width:4px;height:4px;flex:0 0 4px;border-radius:50%;
  background:var(--signal);transform:translateY(7px)}
.dgo{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--signal);
  padding-top:13px;margin-top:4px;border-top:1px solid var(--hair)}
.dgo.off{color:inherit;opacity:.45}
.dcta{text-align:center}
.dcta .lede{margin-left:auto;margin-right:auto}
.dcta .row-btn{justify-content:center}

/* ════════════════════════════════════════════════════════════════════════════
   Бриф — /brief/
   ════════════════════════════════════════════════════════════════════════════ */
.bhead{padding-top:clamp(38px,6vw,72px)}
.bhead h1{margin:0 0 18px}
.bwrap{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:clamp(26px,4vw,52px);
  align-items:start;padding-bottom:clamp(40px,6vw,80px)}
@media(max-width:960px){.bwrap{grid-template-columns:1fr}}

.bblock{padding:0 0 30px;margin:0 0 30px;border-bottom:1px solid var(--hair)}
.bblock:last-child{border-bottom:0;margin-bottom:0}
.bhd{margin-bottom:15px}
.bhd h2{margin:0;font-family:var(--display);font-weight:600;font-size:21px;
  letter-spacing:-.022em}
.bhint{display:block;font-size:13.5px;opacity:.55;margin-top:4px}
.bchips{display:flex;flex-wrap:wrap;gap:8px}
.bchip{font-size:14px;padding:10px 15px;border-radius:5px;border:1px solid var(--hair);
  background:var(--plate);color:inherit;cursor:pointer;text-align:left;
  transition:border-color .14s ease,background .14s ease}
.bchip:hover{border-color:var(--signal)}
.bchip.on{border-color:var(--signal);background:color-mix(in srgb,var(--signal) 10%,var(--plate));
  color:var(--signal)}
.bown{margin-top:10px}
.bown input,.bgrid2 input,#b-text{width:100%;padding:13px 15px;border-radius:5px;
  border:1px solid var(--hair);background:var(--plate);color:inherit;font:inherit;
  font-size:15px;resize:vertical}
.bown input:focus,.bgrid2 input:focus,#b-text:focus{outline:none;border-color:var(--signal)}
.bgrid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.bgrid2{grid-template-columns:1fr}}

.bside{position:sticky;top:82px;display:grid;gap:16px}
@media(max-width:960px){.bside{position:static}}
.bcard{background:var(--plate);border:1px solid var(--hair);border-radius:5px;padding:22px;
  box-shadow:0 1px 0 var(--plate-lip) inset,0 12px 30px -22px var(--shadow)}
.bcard.ai{background:transparent;border-style:dashed}
.bcard.ai p{margin:0 0 11px;font-size:14px;line-height:1.6;opacity:.78}
.bcard.ai p:last-child{margin:0}
.bcard.ai b{font-weight:600}
.bsum{margin:12px 0 18px;max-height:44vh;overflow-y:auto}
.bsum p{margin:0 0 13px;font-size:14px;line-height:1.55}
.bsum p:last-child{margin:0}
.bsum b{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  opacity:.5;font-weight:400}
.bempty{opacity:.5}
.bacts{display:grid;gap:9px}
.bacts .btn{width:100%;text-align:center}
.bacts .btn.off{opacity:.4;pointer-events:none}
.bfoot{margin:14px 0 0;font-size:12.5px;opacity:.5;line-height:1.5}

/* состав системы — две колонки, чтобы длинный список не тянулся полосой */
.stack-list{grid-template-columns:1fr 1fr;column-gap:34px}
@media(max-width:720px){.stack-list{grid-template-columns:1fr}}

/* ── что умеем: каталог узлов ──────────────────────────────────────────── */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:20px}
.cap{background:var(--plate);border:1px solid var(--hair);border-radius:4px;padding:22px 24px 24px;
  box-shadow:0 1px 0 var(--plate-lip) inset,0 10px 26px -20px var(--shadow)}
.cap h3{margin:0 0 6px;font-family:var(--display);font-weight:600;font-size:18.5px;
  letter-spacing:-.018em}
.cap > p{margin:0 0 14px;font-size:14px;opacity:.62;line-height:1.5}
.cap ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.cap li{display:flex;gap:10px;font-size:14.5px;line-height:1.4}
.cap li::before{content:"";width:4px;height:4px;flex:0 0 4px;border-radius:50%;
  background:var(--signal);transform:translateY(8px)}
.notus{margin-top:44px;padding-top:34px;border-top:1px solid var(--hair);max-width:74ch}
.notus h3{margin:0 0 16px;font-family:var(--display);font-weight:600;
  font-size:clamp(21px,2.4vw,26px);letter-spacing:-.024em}
.notus .list li{opacity:.72}

/* ── мобильное меню ────────────────────────────────────────────────────── */
.burger{display:none}
.mnav{display:none}
@media(max-width:780px){
  .burger{display:grid;align-content:center;justify-items:stretch;gap:5px;
    width:40px;height:40px;padding:0 8px;flex:0 0 40px;margin-left:auto;
    border:1px solid var(--hair);border-radius:3px;background:transparent;cursor:pointer}
  .burger span{display:block;height:1.5px;background:var(--ink);opacity:.75;
    transition:transform .2s ease,opacity .18s ease}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .topbar{position:sticky}
  .topbar .wrap{position:relative}
  .mnav{display:grid;position:absolute;left:0;right:0;top:100%;z-index:41;
    padding:10px var(--gutter) 18px;
    background:color-mix(in srgb,var(--ground) 96%,transparent);
    backdrop-filter:saturate(1.4) blur(14px);
    border-bottom:1px solid var(--hair);
    box-shadow:0 22px 40px -28px var(--shadow)}
  .mnav[hidden]{display:none}
  .mnav a{padding:14px 2px;text-decoration:none;font-family:var(--display);font-weight:600;
    font-size:17px;border-bottom:1px solid color-mix(in srgb,var(--hair) 55%,transparent)}
  .mnav a:last-child{border-bottom:0}
  .mnav a.acc{color:var(--signal);margin-top:4px}
  /* кнопка брифа уже есть в меню — в тесной шапке она только мешает */
  .nav-cta{display:none}
}

/* ════════════════════════════════════════════════════════════════════════════
   Карусели на телефоне.
   Ряд одинаковых карточек, схлопнутый в колонку, растягивает страницу
   на десять экранов. Вместо этого — горизонтальная лента с прилипанием:
   соседняя карточка выглядывает из-за края и сама объясняет, что листается.
   Лента выходит за поля секции, чтобы карточка начиналась ровно по сетке.
   ════════════════════════════════════════════════════════════════════════════ */
@media(max-width:720px){
  .caps,.plates,.nishe-grid,.tariffs,.dgrid{
    display:flex;
    grid-template-columns:none;
    gap:12px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--gutter);
    margin-inline:calc(var(--gutter) * -1);
    padding:2px var(--gutter) 16px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .caps::-webkit-scrollbar,.plates::-webkit-scrollbar,.nishe-grid::-webkit-scrollbar,
  .tariffs::-webkit-scrollbar,.dgrid::-webkit-scrollbar{display:none}

  .caps > *,.plates > *,.nishe-grid > *,.tariffs > *,.dgrid > *{
    flex:0 0 min(84%, 320px);
    scroll-snap-align:start}
  /* последняя карточка должна доезжать до левого края, а не упираться в поле */
  .caps::after,.plates::after,.nishe-grid::after,.tariffs::after,.dgrid::after{
    content:"";flex:0 0 1px}

  /* факты крошечные — им хватит сетки два на два, карусель тут перебор */
  .facts{grid-template-columns:1fr 1fr;gap:18px 14px}
}

/* ── «умеем больше» под списком направлений ────────────────────────────── */
.more{display:flex;align-items:center;gap:clamp(20px,4vw,44px);
  margin-top:8px;padding-top:30px;border-top:1px solid var(--hair)}
.more p{margin:0;font-size:15.5px;line-height:1.6;opacity:.78;max-width:62ch}
.more .btn{flex:0 0 auto}
@media(max-width:720px){
  .more{flex-direction:column;align-items:flex-start;gap:18px}
  .more .btn{width:100%;justify-content:center}
}

/* ── крючок на первом экране ───────────────────────────────────────────── */
.hero-hook{max-width:52ch;font-size:clamp(15px,1.25vw,17px);line-height:1.6;
  margin:0 0 30px;padding-left:16px;border-left:2px solid var(--signal)}
.hero h1{max-width:26ch}

/* ── лента «что автоматизируем» ────────────────────────────────────────── */
.whatline{padding:6px 0 4px}
.whatline .plate-tag{display:block;margin-bottom:14px}
.whats{display:flex;flex-wrap:wrap;gap:9px}
.whats span{font-size:14.5px;padding:9px 15px;border-radius:20px;
  border:1px solid var(--hair);background:var(--plate);white-space:nowrap;
  box-shadow:0 1px 0 var(--plate-lip) inset}
@media(max-width:720px){
  /* здесь именно лента, а не перенос: так видно, что список длинный */
  .whats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter) 6px}
  .whats::-webkit-scrollbar{display:none}
  .whats span{flex:0 0 auto;font-size:14px}
  .hero-hook{font-size:14.5px;padding-left:13px}
}

/* ── полоска «есть версия на вашем языке» ──────────────────────────────────
   Показывается поверх шапки и только тем, чей браузер просит другой язык.
   Сигнальным цветом красится кнопка, а не сама полоска: два сигнала
   на экран — это ни одного. */
.altbar{background:var(--plate);border-bottom:1px solid var(--hair)}
.altbar-in{display:flex;align-items:center;gap:14px;
  padding:9px var(--gutter);font-size:14.5px}
.altbar-in span{flex:1;min-width:0}
.altbar-x{margin-left:4px;background:none;border:0;color:var(--ink);
  opacity:.55;font-size:20px;line-height:1;cursor:pointer;padding:0 4px}
.altbar-x:hover{opacity:1}
@media (max-width:640px){
  .altbar-in{flex-wrap:wrap;gap:10px;font-size:13.5px}
  .altbar-in span{flex:1 0 100%}
}