/* IMC Models — стили сайта.
   Раскладка: белая (или тёмная по системе) страница, фото — главный элемент,
   крупная антиква в заголовках, гротеск в тексте, один тёплый акцент.
   Mobile-first: базовые правила для телефона, затем 768px и 1200px. */

/* ---------- токены ---------- */
:root{
  --bg:#ffffff;
  --bg-alt:#f4f4f2;
  --fg:#111111;
  --fg-soft:#3a3a38;
  --mute:#6f6f6b;
  --line:#e4e4e0;
  --line-strong:#111111;
  --accent:#a8834f;          /* тёплый бежевый, затемнён для читаемости на белом */
  --header-bg:rgba(255,255,255,.72);
  --header-bg-solid:rgba(255,255,255,.94);
  --btn-bg:#111111;
  --btn-fg:#ffffff;
  --fill:#fff0c2;
  --error:#b3261e;
  --ok:#2f6b47;

  --f-display:'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --f-body:'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:.3s;
  --t-mid:.4s;
  --t-slow:.6s;
  --max:1360px;
  --gutter:20px;
  --sec:56px;
  --header-h:64px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0a0a0a; --bg-alt:#141413; --fg:#f5f5f5; --fg-soft:#d6d6d2; --mute:#9a9a95;
    --line:#262624; --line-strong:#f5f5f5; --accent:#c9a87c;
    --header-bg:rgba(10,10,10,.68); --header-bg-solid:rgba(10,10,10,.92);
    --btn-bg:#f5f5f5; --btn-fg:#0a0a0a; --fill:#4a3d1c; --error:#f08a80; --ok:#7cc79a;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0a0a0a; --bg-alt:#141413; --fg:#f5f5f5; --fg-soft:#d6d6d2; --mute:#9a9a95;
  --line:#262624; --line-strong:#f5f5f5; --accent:#c9a87c;
  --header-bg:rgba(10,10,10,.68); --header-bg-solid:rgba(10,10,10,.92);
  --btn-bg:#f5f5f5; --btn-fg:#0a0a0a; --fill:#4a3d1c; --error:#f08a80; --ok:#7cc79a;
  color-scheme:dark;
}

/* ---------- база ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px);-webkit-text-size-adjust:100%}
body{margin:0;padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px));background:var(--bg);color:var(--fg);font:400 16px/1.65 var(--f-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.2em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--bg)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--btn-bg);color:var(--btn-fg);padding:10px 16px}
.skip:focus{left:8px}

/* ---------- типографика ---------- */
h1,h2,h3{font-family:var(--f-display);font-weight:500;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(2.5rem,9vw,5rem);letter-spacing:-.02em}
h2{font-size:clamp(2rem,6vw,3.6rem);letter-spacing:-.02em}
h3{font-size:clamp(1.4rem,3.5vw,1.75rem);line-height:1.2}
h1 i,h2 i{font-style:italic;font-weight:400;color:var(--accent)}
p{margin:0}
.lede{font-size:1.0625rem;line-height:1.65;color:var(--mute);max-width:58ch}
.label{font:600 .75rem/1.4 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.label.brass{color:var(--accent)}
.mono{font-family:var(--f-mono);font-size:.875rem}
.fine{font-size:.875rem;color:var(--mute)}
.prose{max-width:66ch;display:grid;gap:1em;color:var(--fg-soft)}
.prose a{color:var(--fg)}
.fill{background:var(--fill);padding:0 .25em}

/* ---------- раскладка ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec)}
.sec.tight{padding-block:calc(var(--sec) * .6)}
.sec.mist{background:var(--bg-alt)}
.sec.ink{background:var(--bg-alt)}
.head{display:grid;gap:20px;margin-bottom:32px}
.head > div:first-child{display:grid;gap:14px;min-width:0}
.head > .btns,.head > .more{justify-self:start}
.split{display:grid;gap:40px}
.split > *{min-width:0}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border:1px solid var(--btn-bg);border-radius:2px;background:var(--btn-bg);color:var(--btn-fg);font:600 .8125rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.btn:hover{background:transparent;color:var(--fg)}
.btn.line{background:transparent;color:var(--fg);border-color:var(--line-strong)}
.btn.line:hover{background:var(--btn-bg);color:var(--btn-fg)}
.btn.wide{width:100%}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btns .btn{flex:1 1 auto}
.more{display:inline-block;font:600 .8125rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding-bottom:6px;border-bottom:1px solid currentColor;white-space:nowrap;transition:color var(--t-fast) var(--ease)}
.more::after{content:" →"}
.more:hover{color:var(--accent)}

/* ---------- шапка ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:40;padding-top:env(safe-area-inset-top,0px);background:var(--header-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:background-color var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease)}
.top.scrolled{background:var(--header-bg-solid);border-bottom-color:var(--line)}
.bar{display:flex;align-items:center;gap:24px;height:var(--header-h)}
.logo{display:flex;align-items:baseline;gap:8px;text-decoration:none;flex:none}
.logo b{font:600 1.75rem/1 var(--f-display);letter-spacing:.04em}
.logo span{font:600 .625rem/1 var(--f-body);letter-spacing:.34em}
.nav{display:none}
.bar > .btn{display:none}
.burger{order:-1;display:flex;align-items:center;gap:10px;height:44px;margin:0 4px 0 -4px;padding:0 10px 0 4px;background:none;border:0;cursor:pointer;color:var(--fg)}
.burger .bi{display:grid;gap:5px;width:22px}
.burger .bi span{display:block;height:1.5px;background:currentColor}
.burger .bt{font:600 .75rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase}
.scrim{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.42)}
.scrim[hidden]{display:none}
.drawer{position:fixed;top:0;bottom:0;left:0;z-index:60;width:min(86vw,400px);display:flex;flex-direction:column;gap:24px;overflow-y:auto;padding:calc(10px + env(safe-area-inset-top,0px)) var(--gutter) calc(24px + env(safe-area-inset-bottom,0px));background:var(--bg);border-right:1px solid var(--line);animation:slidein var(--t-mid) var(--ease)}
@keyframes slidein{from{transform:translateX(-100%)}to{transform:none}}
.drawer[hidden]{display:none}
.dhead{display:flex;justify-content:space-between;align-items:center;min-height:54px;border-bottom:1px solid var(--line)}
.drawer .x{width:44px;height:44px;margin-right:-10px;background:none;border:0;font:300 2rem/1 var(--f-body);color:var(--fg);cursor:pointer}

/* вертикальный список разделов: меню на телефоне и быстрый переход на главной */
.vnav{display:grid}
.vnav a{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;position:relative;padding-right:28px}
.vnav a::after{content:"→";position:absolute;right:2px;top:50%;transform:translateY(-50%);color:var(--mute);transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.vnav a:hover::after{color:var(--accent);transform:translate(3px,-50%)}
.vnav .vn-t{font:500 1.45rem/1.2 var(--f-display)}
.vnav .vn-t .newtag{margin:0 0 0 8px;font-family:var(--f-body)}
.vnav .vn-d{font-size:.875rem;color:var(--mute)}
.vnav a[aria-current="page"] .vn-t{color:var(--accent)}
.quick{padding-block:8px 32px}
.quick .label{margin-bottom:6px}

/* ---------- иконки связи ---------- */
.hicons{display:flex;gap:4px;margin-left:auto}
.icon{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);transition:color var(--t-fast) var(--ease)}
.icon:hover{color:var(--accent)}
.hicons .icon{width:44px;height:44px;justify-content:center}
.icon svg{width:20px;height:20px;fill:currentColor;flex:none}
.dcontacts{display:grid;gap:14px}
.dcontacts .icon{font-size:1.0625rem}
.ficons{display:flex;gap:10px;margin-bottom:16px}
.ficons .icon{width:44px;height:44px;justify-content:center;border:1px solid var(--line);border-radius:50%}
.ficons .icon:hover{border-color:var(--accent)}
.burger{margin-left:0}

/* ---------- программы школы ---------- */
.plans{display:grid;gap:20px}
.plan{display:grid;gap:14px;align-content:start;padding:28px 24px;background:var(--bg);border-top:2px solid var(--line-strong)}
.plan h3{font-size:clamp(2rem,6vw,2.6rem)}
.plan-price{font:500 1.9rem/1 var(--f-display);color:var(--accent)}
.plan-lede{color:var(--mute)}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;border-top:1px solid var(--line);padding-top:16px}
.plan li{display:flex;gap:10px}
.plan li::before{content:"—";color:var(--accent);flex:none}
.plan .btn{margin-top:8px;align-self:end}
.cmp td{font-size:1rem}
.cmp tbody tr:last-child td{font:500 1.35rem/1.2 var(--f-display);color:var(--accent)}

/* ---------- кабинет модели: тёмная полоса ---------- */
.cab-sec{--bg:#121211;--bg-alt:#1c1c1a;--fg:#f5f5f3;--fg-soft:#d6d6d2;--mute:#a3a29d;--line:#2e2e2b;--line-strong:#f5f5f3;--accent:#c9a87c;--btn-bg:#f5f5f3;--btn-fg:#121211;--ok:#7cc79a;background:var(--bg);color:var(--fg);color-scheme:dark}
.cab-grid{display:grid;gap:36px;grid-template-areas:"head" "mock" "copy";align-items:start}
.cab-head{grid-area:head;display:grid;gap:20px;min-width:0}
.cab-grid > .pm-wrap{grid-area:mock}
.cab-copy{grid-area:copy;display:grid;gap:22px;min-width:0}
.newtag{display:inline-block;margin-right:10px;padding:4px 8px;border:1px solid var(--accent);color:var(--accent);font:600 .625rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;vertical-align:middle}
.cab-feat{margin:0;display:grid;border-top:1px solid var(--line-strong)}
.cab-feat div{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
.cab-feat dt{font-weight:600}
.cab-feat dd{margin:0;color:var(--mute)}
.micro{font-size:.75rem;color:var(--mute)}
.cablink{display:none;align-items:center;gap:0;margin-left:auto;font:600 .75rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:color var(--t-fast) var(--ease)}
.cablink .newtag{margin:0 0 0 8px}
.cablink:hover{color:var(--accent)}


/* макет телефона с лентой заказов */
.pmock{display:block;justify-self:center;width:min(100%,340px);padding:10px;border-radius:40px;background:#050505;border:1px solid #2e2e2b;text-decoration:none;color:#111111;transition:transform var(--t-slow) var(--ease)}
.pmock:hover{transform:translateY(-6px)}
.pm-screen{display:grid;gap:10px;padding:18px 14px 0;border-radius:31px;background:#ffffff;overflow:hidden;font-size:.8125rem;line-height:1.35}
.pm-head{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 10px;border-bottom:1px solid #e4e4e0}
.pm-head small{display:block;color:#6f6f6b;font-size:.6875rem}
.pm-head b{font:500 1.3rem/1.1 var(--f-display)}
.pm-bell{width:30px;height:30px;border:1px solid #e4e4e0;border-radius:50%;position:relative}
.pm-bell::after{content:"";position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;background:#a8834f}
.pm-sum{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #e4e4e0}
.pm-sum > span{display:grid;padding:7px 8px}
.pm-sum > span + span{border-left:1px solid #e4e4e0}
.pm-sum b{font:500 1.15rem/1.1 var(--f-display)}
.pm-sum small{font-size:.625rem;color:#6f6f6b}
.pm-chips{display:flex;gap:5px;overflow:hidden}
.pm-chips i{flex:none;font:600 .5625rem/1 var(--f-body);font-style:normal;letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;border:1px solid #e4e4e0;color:#6f6f6b}
.pm-chips i.on{background:#111111;color:#ffffff;border-color:#111111}
.pm-job{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:9px;align-items:start;padding:10px;border:1px solid #e4e4e0}
.pm-tile{width:32px;height:32px;display:grid;place-items:center;color:#ffffff;font:500 .875rem/1 var(--f-display)}
.pm-t{display:grid;gap:2px;min-width:0}
.pm-t b{font-size:.75rem;font-weight:600}
.pm-t small{font-size:.6875rem;color:#6f6f6b}
.pm-fee{font:500 .9375rem/1.1 var(--f-display);text-align:right;white-space:nowrap}
.pm-fee small{display:block;font:400 .5625rem/1.3 var(--f-body);color:#6f6f6b}
.pmock .pill{justify-self:start;margin-top:4px;font:600 .5625rem/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;padding:4px 6px;border:1px solid #e4e4e0;color:#6f6f6b}
.pmock .pill.fit{border-color:#2f6b47;color:#2f6b47}
.pmock .pill.hot{background:#111111;border-color:#111111;color:#ffffff}
.pmock .pill.ok{background:#2f6b47;border-color:#2f6b47;color:#ffffff}
.pm-tabs{display:grid;grid-template-columns:repeat(4,1fr);margin:2px -14px 0;border-top:1px solid #e4e4e0}
.pm-tabs i{padding:12px 0 16px;text-align:center;font:600 .5625rem/1 var(--f-body);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:#9a9a95}
.pm-tabs i.on{color:#111111}

/* подсказка «нажмите» у макета телефона */
.pm-wrap{margin:0;display:grid;gap:14px;justify-items:center;min-width:0}
.pmock{position:relative}
.pm-hint{display:flex;align-items:center;gap:10px;font-size:.875rem;color:var(--fg-soft);text-align:center}
.pm-hint::before{content:"↑";color:var(--accent);font-size:1.1rem}
.tap{position:absolute;left:62%;top:52%;width:34px;height:34px;border-radius:50%;background:rgba(168,131,79,.28);border:2px solid #a8834f;pointer-events:none}
.tap::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid #a8834f;opacity:0;animation:tap 2.4s var(--ease) infinite}
@keyframes tap{0%{transform:scale(.6);opacity:.9}70%{transform:scale(1.3);opacity:0}100%{opacity:0}}
.trybox{display:grid;gap:12px;padding:18px 20px;background:var(--bg-alt);border-left:2px solid var(--accent)}
.trysteps{margin:0;padding:0;list-style:none;counter-reset:t;display:grid;gap:10px}
.trysteps li{counter-increment:t;display:flex;gap:10px;font-size:.9375rem}
.trysteps li::before{content:counter(t);flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--btn-bg);color:var(--btn-fg);font:600 .75rem/1 var(--f-body)}

/* ---------- первый экран ---------- */
.hero{min-height:80vh;display:flex;align-items:center;padding-block:40px 56px}
.hero > .wrap{width:100%}
.hero-grid{display:grid;gap:40px;align-items:end}
.hero-copy{display:grid;gap:24px;min-width:0}
.hero-copy h1{font-size:clamp(2.75rem,10vw,5rem)}
.hero-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hero-stack .ph{aspect-ratio:3/4}
.facts{display:grid;margin-top:40px;border-top:1px solid var(--line-strong)}
.facts div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.facts b{font:500 clamp(2.2rem,7vw,3.2rem)/1 var(--f-display)}
.facts span{font-size:.875rem;color:var(--mute)}

/* ---------- фото ---------- */
.ph{position:relative;overflow:hidden;aspect-ratio:3/4;max-width:100%;background:var(--bg-alt)}
.ph img,.ph video{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) ease}

/* ---------- заказчики ---------- */
.brands{display:flex;flex-wrap:wrap;align-items:center;gap:12px 36px;padding-block:24px;border-block:1px solid var(--line)}
.brands b{font:600 1.125rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-soft)}
.brands span{width:100%;font-size:.875rem;color:var(--mute)}

/* ---------- карточки моделей ---------- */
.grid{display:grid;grid-template-columns:1fr;gap:40px 24px}
.mcard{display:grid;gap:10px;align-content:start;min-width:0;padding-bottom:16px;border-bottom:1px solid var(--line);text-decoration:none}
.mcard:hover .ph img{transform:scale(1.05)}
.mcard .ph{margin-bottom:6px}
.mcard .nm{font:500 1.6rem/1.15 var(--f-display);letter-spacing:-.01em}
.mcard .params{font:500 .75rem/1.4 var(--f-body);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.mcard[hidden]{display:none}

/* ---------- фильтры каталога ---------- */
.filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;margin-bottom:40px;padding-block:20px;border-block:1px solid var(--line)}
.filters > .fgroup:first-child,.filters > .fgroup:nth-child(4),.filters > .count{grid-column:1/-1}
.fgroup{display:grid;gap:8px;min-width:0}
.fgroup select,.fgroup input{width:100%;min-height:46px;padding:0 12px;border:1px solid var(--line);border-radius:2px;background:var(--bg);font-size:1rem}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{min-height:42px;padding:0 16px;border:1px solid var(--line);border-radius:2px;background:none;color:var(--mute);font:600 .75rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.seg button[aria-pressed="true"]{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}
.count{color:var(--mute)}
.empty{padding:64px 0;text-align:center;color:var(--mute)}

/* ---------- два направления ---------- */
.paths{display:grid;border-top:1px solid var(--line-strong)}
.path{display:grid;gap:20px;align-content:start;padding-block:32px}
.path + .path{border-top:1px solid var(--line)}
.path ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.path li{display:flex;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.path li::before{content:"—";color:var(--accent)}

/* ---------- шаги (только для настоящих последовательностей) ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line-strong);counter-reset:s}
.steps li{counter-increment:s;display:grid;gap:10px;align-content:start;padding:24px 0;border-bottom:1px solid var(--line);min-width:0}
.steps li::before{content:counter(s,decimal-leading-zero);font:500 .875rem/1 var(--f-mono);color:var(--accent)}
.steps p{color:var(--mute)}
.vsteps{list-style:none;margin:0;padding:0;display:grid;counter-reset:s}
.vsteps li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding-block:28px;border-top:1px solid var(--line)}
.vsteps li::before{content:counter(s,decimal-leading-zero);font:500 2rem/1 var(--f-display);color:var(--accent)}
.vsteps h3{margin-bottom:8px}
.vsteps p{color:var(--mute);max-width:62ch}
.vsteps a{color:var(--fg)}

/* ---------- таблицы ---------- */
.spec{width:100%;border-collapse:collapse}
.spec th,.spec td{text-align:left;vertical-align:top;padding:12px 0;border-bottom:1px solid var(--line)}
.spec th{width:44%;padding-right:12px;font:600 .75rem/1.6 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.spec td{font:400 1rem/1.5 var(--f-mono);font-variant-numeric:tabular-nums}
.tablebox{overflow-x:auto}
.req{width:100%;min-width:560px;border-collapse:collapse}
.req th,.req td{text-align:left;padding:16px 16px 16px 0;border-bottom:1px solid var(--line)}
.req thead th{font:600 .75rem/1.4 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);border-bottom-color:var(--line-strong)}
.req td.mono{font-variant-numeric:tabular-nums}
.req.stack{min-width:0}
.req.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.req.stack tr{display:block;padding:18px 0;border-bottom:1px solid var(--line)}
.req.stack td{display:flex;gap:16px;padding:4px 0;border:0}
.req.stack td::before{content:attr(data-label);flex:0 0 112px;font:600 .6875rem/2 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.req.stack td:first-child{display:block;padding-bottom:8px;font:500 1.4rem/1.2 var(--f-display)}
.req.stack td:first-child::before{display:none}
.cmp{min-width:0}
.cmp th,.cmp td{padding:12px 8px 12px 0;font-size:.875rem}
.cmp thead th{font-size:.625rem;letter-spacing:.08em}

/* ---------- состав / преимущества ---------- */
.incl{display:grid;border-top:1px solid var(--line-strong)}
.incl div{display:grid;gap:8px;align-content:start;padding:24px 0;border-bottom:1px solid var(--line);min-width:0}
.incl p{color:var(--mute)}
.price{display:grid;gap:24px;padding:28px;border:1px solid var(--line-strong)}
.price b{font:500 clamp(2.2rem,6vw,3.4rem)/1 var(--f-display)}

/* ---------- видео ---------- */
.videos{display:grid;gap:28px}
.vid{display:grid;gap:12px;min-width:0;margin:0}
.vid .ph{aspect-ratio:9/16;display:grid;place-items:center;background:#1a1a19}
.vid .ph .play{width:64px;height:64px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.6);border-radius:50%;color:#ffffff}
.vid .ph .play svg{width:20px;height:20px;margin-left:4px;fill:currentColor}
.vid .ph .cap{position:absolute;left:14px;right:14px;bottom:14px;color:#d9d6cf;font:500 .75rem/1.4 var(--f-mono)}
.vid p{color:var(--mute)}

/* ---------- отзывы ---------- */
.quotes{display:grid;gap:36px}
.quotes figure{margin:0;display:grid;gap:16px;align-content:start;padding-top:22px;border-top:1px solid var(--line-strong)}
.quotes blockquote{margin:0;font:italic 400 1.45rem/1.4 var(--f-display)}
.quotes figcaption{font-size:.875rem;color:var(--mute)}

/* ---------- вопросы ---------- */
.faq{border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:20px;padding:20px 0;list-style:none;cursor:pointer;font:500 1.0625rem/1.4 var(--f-body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:300 1.6rem/1 var(--f-body);color:var(--accent);transition:transform var(--t-fast) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{display:grid;gap:.8em;max-width:70ch;padding-bottom:22px;color:var(--fg-soft)}
.faq-cats{display:grid;gap:32px}
.faq-toc{display:flex;flex-wrap:wrap;gap:10px 20px}
.faq-toc a{color:var(--mute);text-decoration:none;transition:color var(--t-fast) var(--ease)}
.faq-toc a:hover{color:var(--fg)}
.faq-block + .faq-block{margin-top:48px}
.faq-block h2{font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:16px}

/* ---------- формы ---------- */
.form{display:grid;gap:20px}
.form[hidden]{display:none}
.row2{display:grid;gap:20px}
.field{display:grid;gap:8px;min-width:0}
.field label{font:600 .75rem/1.4 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.field input,.field select,.field textarea{width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--mute);border-radius:0;background:transparent;font-size:1.0625rem;transition:border-color var(--t-fast) var(--ease)}
.field textarea{min-height:96px;resize:vertical}
.field select option{background:var(--bg);color:var(--fg)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--fg)}
.field.bad input,.field.bad select,.field.bad textarea{border-bottom-color:var(--error)}
.err{font-size:.8125rem;color:var(--error)}
.field .err{min-height:1em}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.9375rem;color:var(--fg-soft);cursor:pointer}
.check input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--fg)}
.sent{display:grid;gap:16px;padding:24px;border:1px solid var(--line-strong)}
.sent[hidden]{display:none}
.sent pre{margin:0;padding:16px;white-space:pre-wrap;background:var(--bg-alt);font:400 .875rem/1.6 var(--f-mono)}
.formcard{padding:28px 20px;background:var(--bg);border:1px solid var(--line)}
.sec.mist .formcard{border-color:transparent}

/* ---------- шапка внутренних страниц ---------- */
.phead{padding-block:48px 32px;border-bottom:1px solid var(--line)}
.phead .wrap{display:grid;gap:20px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.875rem;color:var(--mute)}
.crumbs a{text-decoration:none;transition:color var(--t-fast) var(--ease)}
.crumbs a:hover{color:var(--fg)}
.crumbs span::before{content:"/";margin-right:8px}

/* ---------- страница модели ---------- */
.mpage{display:grid;gap:40px;align-items:start}
.gwrap{min-width:0}
.gallery{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
.gallery::-webkit-scrollbar{display:none}
.gallery .ph{flex:0 0 84%;scroll-snap-align:start}
.gallery.one{margin-inline:0;padding-inline:0}
.gallery.one .ph{flex:1 1 100%}
.ghint{margin-top:10px;font-size:.8125rem;color:var(--mute)}
.mside{display:grid;gap:24px;min-width:0}
.mside h1{font-size:clamp(2.75rem,10vw,4.5rem)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{padding:6px 10px;border:1px solid var(--line);font:600 .6875rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:48px;padding-block:24px;border-top:1px solid var(--line)}
.pager a{font:600 .75rem/1.4 var(--f-body);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:color var(--t-fast) var(--ease)}
.pager a:hover{color:var(--accent)}

.works{display:grid;gap:10px}
.works ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-strong)}
.works li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.9375rem}
.works li span{color:var(--mute)}
.works li b{font-weight:600;text-align:right}
.fgroup[hidden]{display:none}

.founder{margin:0;display:grid;gap:18px;padding-top:22px;border-top:1px solid var(--line-strong)}
.founder blockquote{margin:0;font:italic 400 clamp(1.4rem,2.6vw,1.9rem)/1.45 var(--f-display)}
.founder figcaption{font-size:.875rem;color:var(--mute)}
.team{display:grid;grid-template-columns:1fr;column-gap:32px;border-top:1px solid var(--line-strong)}
.tm{display:flex;gap:14px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.tm-av{width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--bg-alt);font:500 1.3rem/1 var(--f-display);color:var(--accent)}
.tm b{display:block;font-weight:600}

/* ---------- всплывающая форма заказчика ---------- */
.modal{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.5);padding:calc(16px + env(safe-area-inset-top,0px)) 0 0}
.modal[hidden]{display:none}
.mbox{width:100%;max-width:560px;max-height:100%;overflow-y:auto;background:var(--bg);padding:22px var(--gutter) calc(28px + env(safe-area-inset-bottom,0px));animation:mup var(--t-mid) var(--ease)}
@keyframes mup{from{transform:translateY(30px);opacity:.5}to{transform:none;opacity:1}}
.mhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px}
.mhead h2{font-size:clamp(1.6rem,4vw,2.2rem)}
.mhead .x{width:44px;height:44px;margin:-8px -10px 0 0;background:none;border:0;font:300 2rem/1 var(--f-body);color:var(--fg);cursor:pointer;flex:none}
.row2[hidden]{display:none}

/* ---------- призыв ---------- */
.band{display:grid;gap:28px}
.band h2{max-width:16ch}

/* ---------- подвал ---------- */
.foot{padding-block:56px calc(32px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line-strong)}
.foot-grid{display:grid;gap:32px}
.foot h4{margin:0 0 14px;font:600 .75rem/1.4 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.foot ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.foot a{text-decoration:none;transition:color var(--t-fast) var(--ease)}
.foot a:hover{color:var(--accent)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--mute)}

/* ---------- кнопка записи внизу экрана (телефон) ---------- */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:30;transform:translateY(110%);transition:transform var(--t-mid) var(--ease);padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:var(--header-bg-solid);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.mcta.show{transform:none}

/* ---------- появление при скролле (только если работает JS) ---------- */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ================= планшет ================= */
@media (min-width:768px){
  :root{--gutter:40px;--sec:96px;--header-h:76px}
  .lede{font-size:1.1875rem}
  .head{grid-template-columns:minmax(0,1fr) auto;align-items:end;margin-bottom:48px}
  .split{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
  .btns .btn{flex:0 0 auto}
  .modal{align-items:center;padding:24px}
  .mbox{padding:32px 36px}
  .team{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow:visible;margin-inline:0;padding-inline:0}
  .gallery .ph:first-child{grid-column:1/-1}
  .ghint{display:none}
  .req.stack thead{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .req.stack tr{display:table-row;padding:0}
  .req.stack td{display:table-cell;padding:16px 16px 16px 0;border-bottom:1px solid var(--line)}
  .req.stack td:first-child{display:table-cell;padding-bottom:16px}
  .req.stack td::before{display:none}
  .req.stack td:first-child{font:inherit}
  .cmp th,.cmp td{padding:16px 16px 16px 0;font-size:1rem}
  .cmp thead th{font-size:.75rem;letter-spacing:.14em}
  .head > .btns,.head > .more{justify-self:end}
  .hero-stack{grid-template-columns:1fr 1fr;gap:12px}
  .hero-stack .ph:nth-child(1){grid-row:span 2;aspect-ratio:auto;height:100%}
  .hero-stack .ph:nth-child(2),.hero-stack .ph:nth-child(3){aspect-ratio:1/1}
  .plans{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cab-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"head mock" "copy mock";column-gap:64px;row-gap:28px}
  .cab-grid > .pm-wrap{align-self:center}
  .cab-feat{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
  .cablink{display:inline-flex}
  .hicons{margin-left:12px}
  .plan{padding:36px 28px}
  .facts{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:48px}
  .facts div{grid-template-columns:none;align-items:start;gap:4px;padding:18px 16px 18px 0;border-bottom:0}
  .quick{display:none}
  .brands span{width:auto;margin-left:auto}
  .filters{grid-template-columns:auto repeat(3,minmax(0,200px)) 1fr;align-items:end;gap:20px 28px}
  .filters > .fgroup:first-child,.filters > .fgroup:nth-child(4),.filters > .count{grid-column:auto}
  .count{justify-self:end;align-self:center}
  .paths{grid-template-columns:repeat(2,minmax(0,1fr))}
  .path{padding:40px 40px 40px 0}
  .path + .path{padding:40px 0 40px 40px;border-top:0;border-left:1px solid var(--line)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
  .vsteps li{grid-template-columns:72px minmax(0,1fr);gap:24px}
  .vsteps li::before{font-size:2.5rem}
  .incl{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
  .price{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:36px}
  .videos{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .quotes{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
  .row2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .formcard{padding:44px}
  .phead{padding-block:72px 44px}
  .band{grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mcta{display:none}
  .faq summary{font-size:1.25rem}
}

/* ================= десктоп ================= */
@media (min-width:1200px){
  :root{--gutter:48px;--sec:120px}
  .nav a{padding-block:8px;border-bottom:1px solid transparent;color:var(--mute);font:600 .75rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
  .nav a:hover,.nav a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--fg)}
  .bar > .btn{display:inline-flex;min-height:44px;padding:0 18px}
  .hero{padding-block:48px 80px}
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:72px}
  .hero-stack{gap:12px}
  .mpage{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:72px}
  .mside{position:sticky;top:calc(var(--header-h) + 32px)}
  .filters{position:sticky;top:var(--header-h);z-index:20;background:var(--bg)}
  .steps{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
  .steps li{padding-right:24px;border-bottom:0}
  .incl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .faq-cats{grid-template-columns:240px minmax(0,1fr);gap:80px;align-items:start}
  .faq-toc{position:sticky;top:calc(var(--header-h) + 32px);display:grid;gap:10px}
  .foot-grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
}

@media (min-width:1600px){
  .top .wrap{max-width:1680px}
  .nav{display:flex;gap:20px;margin-left:auto}
  .cablink{margin-left:0;padding-left:22px;border-left:1px solid var(--line)}
  .burger{display:none}
}
@media (min-width:768px) and (max-width:1023px){
  .plans{grid-template-columns:1fr}
}

/* ---------- без анимаций, если они отключены в системе ---------- */
@media (prefers-reduced-motion:reduce){
  :root{--t-fast:0s;--t-mid:0s;--t-slow:0s}
  .tap::after{animation:none;opacity:.6}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
  .mcard:hover .ph img{transform:none}
}

/* юридические страницы */
.legaltext h3{margin-top:1em;color:var(--fg)}
.legaltext ol{display:grid;gap:.6em;padding-left:1.4em;margin:0}
.legaltext .small{font-size:.8125rem;color:var(--mute)}
.legaltext .note{padding:16px 18px;border:1px solid var(--fg);color:var(--fg)}
.ldocs{display:flex;flex-wrap:wrap;gap:12px 20px}