/* ══════════════════════════════════════════════════════════════════
   BASTA · публичная витрина
   Собрана только из компонентов design.css — своих кнопок и полей
   здесь нет, поэтому всё стоит в одну линейку.
   ══════════════════════════════════════════════════════════════════ */

/* ── Сцена с шаром ───────────────────────────────────────────── */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:var(--stage-o,1);transition:opacity .4s linear}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.stage__fb{position:absolute;inset:0;opacity:0;
  background:radial-gradient(46% 44% at 68% 38%,
    color-mix(in srgb,var(--acc) 38%,transparent),transparent 70%);
  filter:blur(70px)}
.stage.fb .stage__fb{opacity:1}
main,section,footer,header{position:relative;z-index:1}

/* ── Шапка: капсула, как на референсах ───────────────────────── */
.top{position:fixed;top:var(--s4);left:0;right:0;z-index:70;
  display:flex;justify-content:center;padding-inline:var(--gut);
  pointer-events:none}
.top__in{pointer-events:auto;display:flex;align-items:center;gap:var(--s2);
  width:100%;max-width:var(--max);
  padding:var(--s2);border-radius:var(--rp);
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-1);
  transition:box-shadow .4s var(--e),background .4s var(--e)}
.top.stuck .top__in{box-shadow:var(--shadow-2);
  background:color-mix(in srgb,var(--paper) 94%,transparent)}
.top__wm{padding:var(--s2) var(--s4);margin-right:auto;display:flex;align-items:center}
.top__wm svg{height:21px;width:auto}
.top__nav{display:flex;gap:var(--s1)}
.top__nav a{padding:10px var(--s4);border-radius:var(--rp);font-size:14.5px;
  color:var(--ink-2);transition:background .3s var(--e),color .3s var(--e)}
.top__nav a:hover{background:rgba(18,18,18,.06);color:var(--ink)}
@media(max-width:900px){.top__nav{display:none}}

/* ── Первый экран ────────────────────────────────────────────── */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  align-items:stretch;
  padding-top:clamp(120px,16vh,180px);padding-bottom:var(--s8)}
.hero__chip{margin-bottom:var(--s5);align-self:flex-start}
.hero__t{max-width:15ch;margin-bottom:var(--s6)}
.hero__b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:var(--s6);align-items:end}
@media(max-width:900px){.hero__b{grid-template-columns:1fr}}
.hero__cta{display:flex;gap:var(--s3);flex-wrap:wrap}

/* Бегущая строка «что в цеху» */
.ticker{margin-top:clamp(var(--s7),7vh,var(--s9));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:var(--s4);overflow:hidden;display:flex;gap:var(--s5);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker__r{display:flex;gap:var(--s5);flex:none;
  animation:slide 44s linear infinite;align-items:center}
.ticker:hover .ticker__r{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-100%)}}
.ticker__i{display:flex;align-items:center;gap:var(--s3);white-space:nowrap;
  font-size:14px;color:var(--ink-2)}
.ticker__i b{font-weight:600;color:var(--ink)}

/* ── Направления ─────────────────────────────────────────────── */
.dirs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
@media(max-width:1100px){.dirs{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.dirs{grid-template-columns:1fr}}
.dir{position:relative;display:flex;flex-direction:column;
  padding:var(--s5);border-radius:var(--r3);overflow:hidden;isolation:isolate;
  background:var(--card);border:1px solid var(--line-2);text-align:left;cursor:pointer;
  min-height:290px;
  transition:border-color .45s var(--e),transform .45s var(--e),box-shadow .45s var(--e)}
.dir::before{content:'';position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(90% 70% at 20% 0%,var(--dc),transparent 72%);
  transition:opacity .55s var(--e)}
.dir:hover{border-color:color-mix(in srgb,var(--dc) 45%,transparent);
  transform:translateY(-3px);box-shadow:var(--shadow-2)}
.dir:hover::before{opacity:.1}
.dir{display:grid;grid-template-rows:auto 1fr auto auto auto;align-content:start}
.dir__h{display:flex;align-items:center;gap:var(--s3)}
.dir__h .orb{width:14px;height:14px}
.dir__n{font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:var(--ink-3)}
.dir__t{font-size:clamp(21px,1.9vw,27px);font-weight:600;letter-spacing:-.04em;
  line-height:1;grid-row:3;transition:color .35s var(--e)}
.dir:hover .dir__t{color:var(--dc)}
.dir__l{grid-row:4;margin-top:var(--s3);font-size:14.5px;color:var(--ink-2);line-height:1.45;
  /* три строки у всех — иначе подвалы карточек разъезжаются */
  min-height:calc(3 * 1.45em);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dir__f{grid-row:5;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3)}
.dir__f b{color:var(--ink);font-weight:500}

/* ── Как это работает ────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.step{padding:var(--s6) var(--s5);border-radius:var(--r3);background:var(--card);
  border:1px solid var(--line-2);display:flex;flex-direction:column;min-height:260px}
.step__n{width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-family:var(--mono);font-size:13px;flex:none}
.step__t{margin-top:auto;padding-top:var(--s6);font-size:21px;font-weight:600;
  letter-spacing:-.033em;line-height:1.14}
.step__x{margin-top:var(--s3);font-size:14.5px;line-height:1.55;color:var(--ink-2)}

/* Снимок кабинета */
.shot{margin-top:var(--s7);border-radius:var(--r4);overflow:hidden;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-3)}
.shot__bar{display:flex;align-items:center;gap:var(--s2);padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--line-2);background:var(--paper-2)}
.shot__bar i{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none}
.shot__bar span{margin-left:var(--s3);font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.shot__g{display:grid;grid-template-columns:210px minmax(0,1fr);min-height:400px}
.shot__s{border-right:1px solid var(--line-2);padding:var(--s4);display:grid;
  gap:2px;align-content:start}
.shot__s b{font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);padding:var(--s2) var(--s3) var(--s3)}
.shot__s a{padding:9px var(--s3);border-radius:var(--r1);font-size:14px;color:var(--ink-2)}
.shot__s a.on{background:rgba(18,18,18,.06);color:var(--ink)}
.shot__m{padding:var(--s5);display:grid;gap:var(--s3);align-content:start}
.shot__w{display:flex;align-items:center;gap:var(--s4);padding:var(--s4);
  border-radius:var(--r2);background:var(--paper);border:1px solid var(--line-2);
  border-left:3px solid var(--warn)}
.shot__w s{text-decoration:none;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--warn);width:92px;flex:none}
.shot__p{padding:var(--s5);border-radius:var(--r2);background:var(--paper);
  border:1px solid var(--line-2)}
@media(max-width:820px){.shot__g{grid-template-columns:1fr}.shot__s{display:none}}

/* Линия этапов */
.line{display:flex;gap:3px;width:100%}
.line i{flex:1;height:5px;border-radius:3px;background:var(--line-2)}
.line i[data-s="done"]{background:var(--sc,var(--acc))}
.line i[data-s="active"]{background:var(--sc,var(--acc));opacity:.45}
.line i[data-s="client"]{background:var(--warn)}

/* ── Работы ──────────────────────────────────────────────────── */
.works{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5) var(--s4)}
@media(max-width:900px){.works{grid-template-columns:1fr}
  .wk{grid-column:1/-1!important;margin-top:0!important}}
.wk{display:block;text-align:left}
.wk__m{position:relative;overflow:hidden;border-radius:var(--r3);background:var(--paper-2);
  border:1px solid var(--line-2)}
.wk__m img{width:100%;aspect-ratio:var(--ar,4/3);object-fit:cover;
  transition:transform .8s var(--e),filter .6s var(--e);filter:saturate(.92)}
.wk:hover .wk__m img{transform:scale(1.035);filter:none}
.wk__tag{position:absolute;left:var(--s4);top:var(--s4);z-index:2}
.wk__b{display:flex;align-items:baseline;gap:var(--s3);margin-top:var(--s4)}
.wk__t{font-size:clamp(18px,1.6vw,23px);font-weight:600;letter-spacing:-.035em}
.wk__k{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--ink-3);text-align:right;flex:none}
.wk__r{margin-top:var(--s2);font-size:14.5px;color:var(--ink-2);line-height:1.5}

/* ── Цены ────────────────────────────────────────────────────── */
.price{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media(max-width:900px){.price{grid-template-columns:1fr}}
.pcol{padding:var(--s6);border-radius:var(--r3);background:var(--card);
  border:1px solid var(--line-2)}
.pcol__h{display:flex;align-items:center;gap:var(--s3);padding-bottom:var(--s4);
  border-bottom:1px solid var(--line-2);margin-bottom:var(--s4)}
.pcol__h .orb{width:16px;height:16px}
.pcol__h b{font-size:19px;font-weight:600;letter-spacing:-.03em}
.pcol__h s{margin-left:auto;text-decoration:none;font-family:var(--mono);font-size:11px;
  color:var(--ink-3)}
.prow{display:flex;align-items:baseline;gap:var(--s4);padding:13px 0;
  border-bottom:1px solid var(--line-2)}
.prow:last-child{border-bottom:0}
.prow__t{font-size:15px;font-weight:500}
.prow__d{font-size:13px;color:var(--ink-3);margin-top:3px;line-height:1.4}
.prow__p{margin-left:auto;font-family:var(--mono);font-size:13.5px;white-space:nowrap;
  color:var(--ink)}
.pnote{margin-top:var(--s5);padding:var(--s5);border-radius:var(--r2);
  background:var(--paper-2);font-size:14px;color:var(--ink-2);line-height:1.55}

/* ── Манифест ────────────────────────────────────────────────── */
.mani{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media(max-width:900px){.mani{grid-template-columns:1fr}}
.mani__i{padding:var(--s6);border-radius:var(--r3);background:var(--card);
  border:1px solid var(--line-2)}
.mani__t{font-size:20px;font-weight:600;letter-spacing:-.03em;margin-bottom:var(--s3);
  display:flex;align-items:center;gap:var(--s3)}
.mani__t i{width:8px;height:8px;border-radius:50%;background:var(--acc);flex:none}

/* ── Команда ─────────────────────────────────────────────────── */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
@media(max-width:1000px){.team{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.team{grid-template-columns:1fr 1fr}}
.mb__p{border-radius:var(--r3);overflow:hidden;aspect-ratio:4/5;background:var(--paper-2);
  border:1px solid var(--line-2)}
.mb__p img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);
  transition:filter .6s var(--e),transform .7s var(--e)}
.mb:hover .mb__p img{filter:none;transform:scale(1.03)}
.mb__n{margin-top:var(--s3);font-size:16px;font-weight:600;letter-spacing:-.025em}
.mb__r{margin-top:2px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--ink-3)}

/* ── Конфигуратор ────────────────────────────────────────────── */
.cfg{border-radius:var(--r4);overflow:hidden;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow-2)}
.cfg__s{display:flex;gap:var(--s1);padding:var(--s3);border-bottom:1px solid var(--line-2);
  background:var(--paper-2);overflow-x:auto}
.cfg__s button{flex:1;min-width:130px;padding:12px var(--s4);border-radius:var(--rp);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);cursor:pointer;white-space:nowrap;
  transition:background .3s var(--e),color .3s var(--e)}
.cfg__s button.on{background:var(--ink);color:var(--paper)}
.cfg__s button[disabled]{opacity:.4;cursor:default}
.cfg__b{padding:clamp(var(--s5),3vw,var(--s7))}
.cfg__g{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s3)}
.srv{display:flex;gap:var(--s4);padding:var(--s4) var(--s5);border-radius:var(--r2);
  background:var(--paper);border:1px solid var(--line-2);cursor:pointer;text-align:left;
  transition:border-color .3s var(--e),background .3s var(--e)}
.srv:hover{border-color:var(--line)}
.srv[aria-pressed="true"]{border-color:var(--ink);background:#fff}
.srv i{width:20px;height:20px;border-radius:7px;border:1.5px solid var(--line);flex:none;
  margin-top:2px;display:grid;place-items:center;font-size:12px;color:transparent;
  transition:background .3s var(--e),border-color .3s var(--e),color .3s var(--e)}
.srv[aria-pressed="true"] i{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.srv b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.022em}
.srv s{display:block;text-decoration:none;font-size:13.5px;color:var(--ink-3);
  margin-top:4px;line-height:1.45}
.srv u{display:block;text-decoration:none;font-family:var(--mono);font-size:12px;
  color:var(--ink-2);margin-top:var(--s3)}
.cfg__sum{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  padding:var(--s5) clamp(var(--s5),3vw,var(--s7));border-top:1px solid var(--line-2);
  background:var(--paper-2)}
.cfg__sum b{font-size:clamp(22px,2.2vw,30px);font-weight:600;letter-spacing:-.035em;
  line-height:1;display:block;margin-top:var(--s2)}
.cfg__sum .btn{margin-left:auto}
.cfg__f{display:grid;gap:var(--s4);max-width:620px}
.cfg__f2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:640px){.cfg__f2{grid-template-columns:1fr}}
.cfg__e{color:var(--bad);font-size:14px;min-height:20px}

/* ── Подвал ──────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding-block:var(--s8) var(--s5);margin-top:var(--s9)}
.foot__g{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s6) var(--s5)}
@media(max-width:900px){.foot__g{grid-template-columns:1fr 1fr}}
.foot__say{font-size:clamp(24px,2.6vw,38px);font-weight:600;letter-spacing:-.04em;
  line-height:1.1;max-width:13ch}
.foot h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s4);font-weight:500}
.foot li,.foot p{font-size:15px;color:var(--ink-2);line-height:1.8}
.foot a:hover{color:var(--ink)}
.foot__b{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  border-top:1px solid var(--line-2);margin-top:var(--s7);padding-top:var(--s4)}
.foot__b span{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}

/* ── Вход и приглашение ──────────────────────────────────────── */
.gate{min-height:100svh;display:grid;place-items:center;padding:var(--s6) var(--gut)}
.gate__in{width:min(460px,100%);display:grid;gap:var(--s5);justify-items:center}
.gate__wm svg{height:26px;width:auto}
.gate__b{width:100%;background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r4);padding:clamp(var(--s5),3vw,var(--s7));box-shadow:var(--shadow-2)}
.gate__tabs{display:flex;gap:var(--s1);padding:var(--s1);margin-bottom:var(--s5);
  border-radius:var(--rp);background:var(--paper-2)}
.gate__tabs button{flex:1;padding:11px;border-radius:var(--rp);font-size:14.5px;
  cursor:pointer;color:var(--ink-3);
  transition:background .3s var(--e),color .3s var(--e)}
.gate__tabs button.on{background:var(--paper);color:var(--ink);box-shadow:var(--shadow-1)}
.gate__f{display:grid;gap:var(--s3)}
.gate__e{margin-top:var(--s4);color:var(--bad);font-size:14px;
  opacity:0;transition:opacity .3s}
.gate__e.on{opacity:1}
.gate__demo{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line-2);
  display:grid;gap:var(--s2)}
.gate__demo button{padding:11px var(--s4);border-radius:var(--r2);font-size:14px;
  color:var(--ink-2);cursor:pointer;text-align:left;border:1px solid var(--line-2);
  transition:border-color .3s var(--e),color .3s var(--e)}
.gate__demo button:hover{border-color:var(--ink);color:var(--ink)}
.gate__n{font-size:14px;color:var(--ink-3);text-align:center;line-height:1.55;max-width:42ch}