/* ==========================================================================
   AXIOM.tech — версия 3: «пульт принтера» (HUD)
   Приёмы: HUD-панели со скошенными углами и служебными метками, огромные
   заголовки с маркером ▶, бегущие строки, досье кейсов, этапы по прокрутке,
   печатающаяся 3D-модель на первом экране, лучи лазера.
   Цвета и шрифты — фирменные; размеры текста и отступы — clamp.
   ========================================================================== */
:root {
  --bg: #0d0d0d;
  --panel: #151719;
  --panel-2: #1b1e21;
  --cream: #eee5d5;
  --cream-2: #eae2d2;
  --orange: #ff5e1a;
  --grey: #8a8f94;
  --steel: #b9bfc6;
  --line: rgba(238, 229, 213, 0.2);
  --line-2: rgba(238, 229, 213, 0.4);

  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, 'Segoe UI', Arial, sans-serif;

  --fs-mega:  clamp(2.75rem, 1.2rem + 7vw, 11rem);
  --fs-h1:    clamp(2.125rem, 1.553rem + 2.441vw, 5.3125rem);
  --fs-h2:    clamp(1.75rem, 1.2rem + 2.2vw, 4.5rem);
  --fs-sub:   clamp(1.25rem, 1.074rem + 0.7512vw, 2.25rem);
  --fs-text:  clamp(1rem, 0.956rem + 0.1878vw, 1.25rem);
  --fs-small: clamp(0.875rem, 0.853rem + 0.0939vw, 1rem);
  --fs-label: clamp(0.72rem, 0.68rem + 0.15vw, 0.875rem);

  --gutter: clamp(1.25rem, 0.6064rem + 2.746vw, 5rem);
  --section-gap: clamp(4.5rem, 3rem + 6vw, 12rem);
  --card-pad: clamp(1.1rem, 0.8rem + 1.2vw, 2.25rem);
  --gap: clamp(0.625rem, 0.3rem + 1vw, 1.5rem);
  /* Межстрочный интервал: основа — обычный текст 130%; мельче текст — больше интервал, заголовки — плотнее */
  --lh-text: 1.3;
  --lh-small: 1.4;
  --lh-label: 1.45;
  --lh-sub: 1.2;
  --wrap: 2400px;
  --measure: 65ch;
  --cut: clamp(14px, 10px + 1vw, 28px);
  --ease: cubic-bezier(.16, .84, .44, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; overflow-x: clip;
  background: var(--bg);
  color: var(--cream);
  font: 400 var(--fs-text)/var(--lh-text) var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
::selection { background: var(--orange); color: var(--bg); }

/* Звёздная пыль: редкие точки по всему фону */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(238, 229, 213, 0.2) 1px, transparent 1.2px);
  background-size: 46px 46px;
  opacity: .5;
}
.noise { display: none; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.label { font: 600 var(--fs-label)/1.4 var(--font-mono); letter-spacing: .02em; color: var(--grey); }
.label--o { color: var(--orange); }
.section { padding-top: var(--section-gap); position: relative; }

/* Заголовок с маркером ▶ */
.title {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: .35em;
  font: 700 var(--fs-h2)/1.02 var(--font-mono); text-transform: uppercase; letter-spacing: -.02em;
  text-wrap: balance;
}
.title::before {
  content: ''; flex: none; width: .42em; height: .52em; margin-top: .22em;
  background: var(--orange); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.title small { grid-column: 2; display: block; margin-top: .9rem; font: 400 var(--fs-label)/var(--lh-small) var(--font-mono); text-transform: none; letter-spacing: 0; color: var(--grey); }
.head-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 1rem; margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 4rem); align-items: end; }
.head-row .title { grid-column: 1 / 9; }
.head-row .lead { grid-column: 9 / 13; }
.lead { max-width: var(--measure); color: var(--cream-2); font-size: var(--fs-text); }
@media (max-width: 1000px) { .head-row .title, .head-row .lead { grid-column: 1 / -1; } }

/* --------------------------------------------------------------------------
   HUD-панель: рамка 1px со скошенными углами + служебная планка сверху
   -------------------------------------------------------------------------- */
.hud {
  --c: var(--cut);
  --frame: var(--line-2);
  position: relative;
  background: var(--frame);
  padding: 1px;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.hud__in {
  position: relative; height: 100%;
  background: var(--panel);
  clip-path: polygon(calc(var(--c) - .4px) 0, 100% 0, 100% calc(100% - var(--c) + .4px), calc(100% - var(--c) + .4px) 100%, 0 100%, 0 calc(var(--c) - .4px));
  padding: var(--card-pad);
}
/* «··· ▬» — планка в правом верхнем углу */
.hud__tab { position: absolute; top: 9px; right: calc(var(--c) + 10px); display: flex; align-items: center; gap: 6px; pointer-events: none; }
.hud__tab i { width: 3px; height: 3px; background: var(--line-2); }
.hud__tab b { width: clamp(28px, 2vw + 16px, 46px); height: 4px; background: var(--cream); }
/* Вертикальная подпись сбоку */
.hud__side { position: absolute; left: 8px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font: 500 10px/1 var(--font-mono); letter-spacing: .12em; color: var(--grey); text-transform: uppercase; pointer-events: none; }
/* Плашка-подпись снизу */
.hud__bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.4rem; padding: .45rem .8rem; border: 1px solid var(--line-2); font: 500 var(--fs-label)/1.3 var(--font-mono); color: var(--cream-2); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
/* Внешние угловые скобки */
.brk { position: relative; }
.brk::after {
  content: ''; position: absolute; inset: -7px; pointer-events: none;
  --b: var(--cream);
  background:
    linear-gradient(var(--b), var(--b)) left top / 22px 2px, linear-gradient(var(--b), var(--b)) left top / 2px 22px,
    linear-gradient(var(--b), var(--b)) right bottom / 22px 2px, linear-gradient(var(--b), var(--b)) right bottom / 2px 22px;
  background-repeat: no-repeat;
}

/* Кнопки — светлая плашка со скосом и «>>» */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;   /* стрелки — на расстоянии обычного пробела от текста */
  min-height: 3rem; padding: .75rem 1.2rem; border: 0;
  background: var(--cream); color: var(--bg);
  font: 600 var(--fs-label)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: background-color .2s, color .2s;
}
.btn::after { content: ''; flex: none; width: .6em; height: .68em; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); transform-origin: 40% 50%; }      /* треугольник, как у пунктов «когда да»; цвет текста кнопки */
.btn:hover::after { animation: btnTri .7s cubic-bezier(.3, .7, .2, 1); }
@keyframes btnTri { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn:hover::after { animation: none; } }
.btn:hover { background: var(--orange); color: var(--bg); }
.btn--o { background: var(--orange); color: var(--bg); }
.btn--o:hover { background: var(--cream); }
.btn--line { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1px var(--line-2); clip-path: none; }
.btn--line:hover { background: var(--cream); color: var(--bg); }

/* --------------------------------------------------------------------------
   Шапка
   -------------------------------------------------------------------------- */
.top { position: fixed; inset: 0 0 auto 0; z-index: 70; transition: background-color .3s, backdrop-filter .3s; }
.top.is-solid { background: rgba(13, 13, 13, 0.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4rem; }
.logo { display: block; width: clamp(7.5rem, 6.2rem + .9vw, 9.5rem); aspect-ratio: 150 / 31; position: relative; flex: none; }
.logo img:first-child { width: 100%; height: 100%; }
.logo img + img { position: absolute; left: 28.67%; top: 25.8%; width: 14%; height: 54.8%; }
.nav { display: flex; gap: clamp(.75rem, .2rem + 1.4vw, 2.25rem); font: 500 var(--fs-label)/1 var(--font-mono); }
.nav a { text-decoration: none; color: var(--cream-2); padding: .6rem 0; transition: color .2s; }
.nav a::before { content: '('; color: var(--grey); } .nav a::after { content: ')'; color: var(--grey); }
.nav a:hover, .nav a.is-on { color: var(--orange); }
.top__right { display: flex; align-items: center; gap: 1rem; }
.burger { display: none; width: 2.75rem; height: 2.75rem; border: 0; background: none; position: relative; }
.burger i, .burger i::before, .burger i::after { position: absolute; left: 50%; width: 24px; height: 2px; margin-left: -12px; background: var(--cream); transition: transform .3s var(--ease), opacity .2s; }
.burger i { top: 50%; } .burger i::before, .burger i::after { content: ''; left: 0; margin: 0; } .burger i::before { top: -7px; } .burger i::after { top: 7px; }
.menu-open .burger i { background: transparent; } .menu-open .burger i::before { transform: translateY(7px) rotate(45deg); } .menu-open .burger i::after { transform: translateY(-7px) rotate(-45deg); }
.mmenu { position: fixed; inset: 0; z-index: 65; background: rgba(13, 13, 13, 0.9); display: none; flex-direction: column; justify-content: center; gap: .4rem; padding: 6rem var(--gutter) 3rem; }
.menu-open .mmenu { display: flex; }
.mmenu a { font: 700 clamp(1.75rem, 8vw, 3rem)/1.2 var(--font-mono); text-transform: uppercase; text-decoration: none; }
.mmenu a span { color: var(--orange); font-size: .45em; vertical-align: super; margin-right: .5rem; }
@media (max-width: 1000px) { .nav, .top__right .btn { display: none; } .burger { display: block; } }

/* --------------------------------------------------------------------------
   Первый экран: печатающаяся модель на перспективной сетке
   -------------------------------------------------------------------------- */
.hero { position: relative; min-height: max(44rem, 100svh); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__ui { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 1.5rem; align-items: end; padding-block: 7rem clamp(2rem, 1rem + 3vw, 4rem); pointer-events: none; }
.hero__ui > * { pointer-events: auto; }
.hero__title { grid-column: 1 / 9; font: 700 var(--fs-h1)/1.02 var(--font-mono); text-transform: uppercase; letter-spacing: -.02em; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6); }
.hero__title em { font-style: normal; color: var(--grey); }
.hero__side { grid-column: 9 / 13; display: grid; gap: 1rem; }
.hero__side p { color: var(--cream-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .6rem; }
.hero__hudl, .hero__hudr { position: absolute; z-index: 2; top: 6rem; font: 500 var(--fs-label)/var(--lh-small) var(--font-mono); color: var(--grey); }
.hero__hudl { left: var(--gutter); } .hero__hudr { right: var(--gutter); text-align: right; }
.hero__hudl b, .hero__hudr b { color: var(--cream); font-weight: 600; }
.hero__hudl .live { color: var(--orange); }
.hero__scroll { position: absolute; z-index: 2; left: 50%; bottom: 1rem; transform: translateX(-50%); font: 500 10px/1 var(--font-mono); color: var(--grey); letter-spacing: .2em; }
@media (max-width: 1000px) { .hero__title, .hero__side { grid-column: 1 / -1; } .hero__hudr { display: none; } }

/* --------------------------------------------------------------------------
   Бегущая строка
   -------------------------------------------------------------------------- */
.hero + .ticker { margin-top: 0; }
.ticker { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: var(--panel); margin-top: var(--section-gap); }
.ticker__track { display: flex; width: max-content; animation: tick 40s linear infinite; }
.ticker span { white-space: nowrap; padding: .85rem 0; font: 500 var(--fs-label)/1 var(--font-mono); color: var(--cream-2); }
.ticker span::after { content: '✕'; color: var(--orange); margin: 0 1.5rem; }
.ticker--o { background: var(--orange); border-color: var(--orange); }
.ticker--o span { color: var(--bg); } .ticker--o span::after { color: var(--bg); }
.ticker--rev .ticker__track { animation-direction: reverse; }
@keyframes tick { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Услуги — сетка HUD-карточек
   -------------------------------------------------------------------------- */
.svc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
@media (min-width: 700px)  { .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .svc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc .hud { transition: transform .5s var(--ease), --frame .3s; }
.svc .hud__in { display: flex; flex-direction: column; gap: 1rem; min-height: clamp(26rem, 20rem + 10vw, 34rem); padding-left: calc(var(--card-pad) + 14px); overflow: hidden; }
.svc__vis { position: relative; height: clamp(9rem, 6rem + 6vw, 14rem); display: grid; place-items: center; }
.svc__vis svg { width: auto; height: 82%; color: var(--cream-2); transition: opacity .4s, transform .6s var(--ease); }
.svc__vis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(1) contrast(1.1); transform: scale(1.06); transition: opacity .5s, transform .8s var(--ease), filter .6s; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.svc .hud:hover .svc__vis img, .svc .hud:focus-within .svc__vis img { opacity: 1; transform: none; filter: grayscale(.2); }
.svc .hud:hover .svc__vis svg, .svc .hud:focus-within .svc__vis svg { opacity: 0; transform: scale(.9); }
.svc .hud:hover { --frame: var(--orange); }
.svc h3 { font: 700 var(--fs-sub)/var(--lh-sub) var(--font-mono); text-transform: uppercase; text-wrap: balance; }
.svc p { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--cream-2); max-width: var(--measure); }
.svc ul { margin-top: auto; display: grid; gap: .1rem; }
.svc li { display: flex; justify-content: space-between; gap: .75rem; padding: .4rem 0; font: 400 var(--fs-label)/1.4 var(--font-mono); color: var(--grey); }
.svc li b { color: var(--cream); font-weight: 500; text-align: right; }
.svc li .lead-dots { flex: 1; border-bottom: 1px dotted var(--line-2); transform: translateY(-.35em); min-width: 1rem; }
.svc .hud--accent { --frame: var(--orange); }
.svc .hud--accent .hud__in { background: var(--orange); color: var(--bg); }
.svc .hud--accent p, .svc .hud--accent li, .svc .hud--accent li b, .svc .hud--accent .hud__side { color: var(--bg); }
.svc .hud--accent .lead-dots { border-color: rgba(13, 13, 13, 0.5); }
.svc .hud--accent svg { color: var(--bg); }
.svc .hud--accent .hud__tab b { background: var(--bg); }
.svc .hud--accent .hud__tab i { background: rgba(13, 13, 13, 0.5); }

/* --------------------------------------------------------------------------
   Досье кейсов
   -------------------------------------------------------------------------- */
.dossier__tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.dossier__tabs button { min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--line-2); background: none; font: 500 var(--fs-label)/1 var(--font-mono); color: var(--grey); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); transition: .2s; }
.dossier__tabs button:hover { color: var(--cream); border-color: var(--cream); }
.dossier__tabs button[aria-selected="true"] { background: var(--cream); border-color: var(--cream); color: var(--bg); }
.dossier { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.dossier__sheet { grid-column: 1 / 6; }
.dossier__sheet .hud__in { display: flex; flex-direction: column; gap: 1rem; }
.dossier__head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .55rem .8rem; border: 1px solid var(--line-2); font: 600 var(--fs-label)/1.3 var(--font-mono); text-transform: uppercase; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.dossier__head span:last-child { color: var(--orange); }
.kv { display: grid; gap: .15rem; }
.kv div { display: flex; align-items: baseline; gap: .6rem; font: 400 var(--fs-label)/var(--lh-small) var(--font-mono); text-transform: uppercase; }
.kv dt { color: var(--grey); }
.kv i { flex: 1; border-bottom: 1px dotted var(--line-2); min-width: 1rem; }
.kv dd { color: var(--cream); text-align: right; }
.dossier__text { display: grid; gap: .9rem; }
.dossier__text b { display: block; font: 600 var(--fs-label)/1.3 var(--font-mono); color: var(--orange); margin-bottom: .2rem; }
.dossier__text p { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--cream-2); }
.dossier__stage { grid-column: 6 / 11; position: relative; min-height: clamp(24rem, 18rem + 14vw, 38rem); display: grid; place-items: center; background:
  linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 40px 40px; }
.dossier__stage::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(closest-side, transparent 55%, var(--bg)); pointer-events: none; }      /* сетка видна в центре и растворяется к краям; деталь лежит выше (z-index 1) */
.dossier__img { position: relative; z-index: 1; max-width: 70%; max-height: 62%; width: auto; filter: drop-shadow(0 0 30px rgba(255, 94, 26, 0.35)); }
.dossier__stats { position: absolute; z-index: 2; inset: auto 1rem 1rem 1rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.stat { padding: .55rem .8rem; background: rgba(13, 13, 13, 0.8); border: 1px solid var(--line-2); backdrop-filter: blur(8px); }
.stat b { display: block; font: 700 clamp(1.5rem, 1rem + 1.6vw, 2.75rem)/1 var(--font-mono); color: var(--orange); }
.stat span { font: 400 var(--fs-label)/1.3 var(--font-mono); color: var(--cream-2); }
.dossier__dim { position: absolute; z-index: 2; font: 500 10px/1 var(--font-mono); color: var(--grey); }
.dossier__dim--t { top: .9rem; left: 50%; transform: translateX(-50%); }
.dossier__dim--l { left: .8rem; top: 50%; transform: translateY(-50%) rotate(-90deg); }
.dossier__thumbs { grid-column: 11 / 13; display: flex; flex-direction: column; gap: var(--gap); }
.thumb { position: relative; flex: 1 1 0; min-height: 4.5rem; border: 1px solid var(--line-2); background: var(--panel); display: grid; place-items: center; padding: 12%; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); transition: border-color .2s, background-color .2s; }
.thumb img { position: absolute; left: 14%; top: 12%; width: 72%; height: 64%; object-fit: contain; object-position: center; width: auto; filter: none; opacity: 1; transition: .3s; }
.thumb span { position: absolute; left: 8px; bottom: 6px; font: 500 10px/1 var(--font-mono); color: var(--grey); }
.thumb:hover img, .thumb[aria-current="true"] img { filter: none; opacity: 1; }
.thumb[aria-current="true"] { border-color: var(--orange); background: var(--panel-2); }
.scan-in { animation: scan .9s var(--ease) both; }
@keyframes scan { from { opacity: 0; transform: translateY(14px); filter: brightness(2); } to { opacity: 1; transform: none; filter: none; } }
@media (max-width: 1000px) {
  .dossier__sheet, .dossier__stage { grid-column: 1 / -1; }
  .dossier__stage { order: -1; min-height: 22rem; }
  .dossier__thumbs { display: none; }
}

/* --------------------------------------------------------------------------
   Честно: гигантский текст и летающие детали
   -------------------------------------------------------------------------- */
.mega { position: relative; padding-block: var(--section-gap); overflow: hidden; }
.mega__text { position: relative; z-index: 1; font: 700 var(--fs-mega)/.95 var(--font-mono); text-transform: uppercase; letter-spacing: -.04em; text-align: center; text-wrap: balance; }
.mega__text .o { color: var(--orange); }
.mega__float { position: absolute; z-index: 2; width: clamp(7rem, 4rem + 10vw, 18rem); pointer-events: none; will-change: transform; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.6)); }
.mega__sub { position: relative; z-index: 3; max-width: 46ch; margin: clamp(1.5rem, 1rem + 2vw, 3rem) auto 0; text-align: center; color: var(--cream-2); font-size: var(--fs-text); }
.yesno { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(2rem, 1rem + 3vw, 4rem); position: relative; z-index: 3; }
.yesno li { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; border-top: 1px dotted var(--line-2); font-size: var(--fs-text); }
.yesno li::before { content: '✕'; font: 700 .9em/1 var(--font-mono); color: var(--grey); }
.yesno .hud--yes li::before { content: '▶'; color: var(--orange); font-size: .7em; }
.yesno .hud--no li { color: var(--grey); }
.yesno .label { display: block; margin-bottom: .6rem; }
.mega .btn { position: relative; z-index: 3; display: flex; width: max-content; max-width: 100%; margin: clamp(1.5rem, 1rem + 2vw, 3rem) auto 0; }
@media (max-width: 700px) { .yesno { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Процесс: этапы меняются при прокрутке, деталь печатается слой за слоем
   -------------------------------------------------------------------------- */
.proc { position: relative; height: 420vh; }
.proc__pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 4rem; }
.proc__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: center; }
.proc__rail { grid-column: 1 / 2; display: grid; gap: .5rem; justify-items: start; }
.proc__rail button { width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-2); background: none; font: 600 var(--fs-label)/1 var(--font-mono); color: var(--grey); transition: .25s; }
.proc__rail button.is-done { color: var(--cream); border-color: var(--cream); }
.proc__rail button.is-on { background: var(--orange); border-color: var(--orange); color: var(--bg); }
.proc__card { grid-column: 2 / 7; }
.proc__card .hud__in { min-height: clamp(20rem, 16rem + 8vw, 28rem); display: flex; flex-direction: column; gap: 1rem; }
.proc__no { font: 700 clamp(3.5rem, 2rem + 6vw, 9rem)/.9 var(--font-mono); color: var(--orange); letter-spacing: -.04em; }
.proc__card h3 { font: 700 var(--fs-sub)/var(--lh-sub) var(--font-mono); text-transform: uppercase; }
.proc__card p { font-size: var(--fs-text); color: var(--cream-2); max-width: var(--measure); }
.proc__card .hud__bar { margin-top: auto; }
.proc__bed { grid-column: 7 / 13; position: relative; height: clamp(18rem, 12rem + 18vw, 34rem); }
.bed { position: absolute; left: 6%; right: 6%; bottom: 8%; height: 10px; background: var(--cream); clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%); }
.bed::after { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 18px; background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 18px); }
.layers { position: absolute; left: 50%; bottom: calc(8% + 10px); width: 56%; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; }
.layer { height: clamp(26px, 16px + 2.2vw, 54px); background: var(--panel-2); border: 1px solid var(--line-2); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease), background-color .3s; }
.layer.is-on { transform: scaleX(1); background: var(--cream); border-color: var(--cream); }
.layer.is-now { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 28px rgba(255, 94, 26, 0.6); }
.layer:nth-child(1) { width: 100%; } .layer:nth-child(2) { width: 82%; } .layer:nth-child(3) { width: 82%; } .layer:nth-child(4) { width: 64%; } .layer:nth-child(5) { width: 40%; }
.nozzle { position: absolute; left: 50%; width: 46px; height: 64px; margin-left: -23px; transition: bottom .7s var(--ease), left .7s var(--ease); }
.nozzle::before { content: ''; position: absolute; inset: 0 6px 18px; background: var(--panel-2); border: 1px solid var(--line-2); }
.nozzle::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 16px; height: 20px; margin-left: -8px; background: var(--cream); clip-path: polygon(0 0, 100% 0, 60% 100%, 40% 100%); }
.nozzle i { position: absolute; left: 50%; bottom: -10px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 14px 4px rgba(255, 94, 26, 0.9); }
.proc__readout { position: absolute; right: 0; top: 0; text-align: right; font: 500 var(--fs-label)/1.7 var(--font-mono); color: var(--grey); }
.proc__readout b { color: var(--cream); font-weight: 600; }
@media (max-width: 1000px) {
  .proc { height: auto; }
  .proc__pin { position: static; height: auto; padding-top: 0; }
  .proc__rail, .proc__bed { display: none; }
  .proc__card { grid-column: 1 / -1; }
  .proc__list { display: grid; gap: var(--gap); }
}
.proc__list { display: none; }
@media (max-width: 1000px) { .proc__single { display: none; } .proc__list { display: grid; } }

/* --------------------------------------------------------------------------
   Калькулятор с лучами
   -------------------------------------------------------------------------- */
.calc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; position: relative; isolation: isolate; }
#calculator { overflow-x: clip; }
.calc__form { grid-column: 1 / 8; }
.calc__form .hud__in { display: grid; gap: 1.4rem; padding-left: calc(var(--card-pad) + 14px); }
.calc__dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.fld { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.fld > span { font: 500 var(--fs-label)/1.3 var(--font-mono); color: var(--grey); }
.inp { width: 100%; min-height: 3rem; padding: .6rem .8rem; border: 1px solid var(--line-2); background: rgba(13, 13, 13, 0.6); color: var(--cream); font: 400 var(--fs-small)/1.4 var(--font-sans); outline: none; transition: border-color .2s; appearance: none; border-radius: 0; }
.inp:focus { border-color: var(--orange); }
.inp::placeholder { color: rgba(238, 229, 213, 0.2); }
select.inp { cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--cream) 50%), linear-gradient(-45deg, transparent 50%, var(--cream) 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
select.inp option { background: var(--panel); }
.qty { display: flex; gap: .4rem; }
.qty .inp { max-width: 9rem; }
.qty button { width: 3rem; height: 3rem; border: 1px solid var(--line-2); background: none; font: 700 1.1rem var(--font-mono); transition: .2s; }
.qty button:hover { background: var(--cream); color: var(--bg); }
.calc__out { grid-column: 8 / 13; position: relative; overflow: hidden; }
.calc__out .hud__in { display: flex; flex-direction: column; gap: .9rem; background: var(--cream); color: var(--bg); }
.calc__out .kv div { color: var(--bg); } .calc__out .kv dt { color: rgba(13, 13, 13, 0.6); } .calc__out .kv dd { color: var(--bg); font-weight: 600; } .calc__out .kv i { border-color: rgba(13, 13, 13, 0.5); }
.calc__total { margin-top: auto; }
.calc__total span { display: block; font: 500 var(--fs-label)/1 var(--font-mono); color: rgba(13, 13, 13, 0.6); }
.calc__total strong { display: block; margin-top: .4rem; font: 700 clamp(2.25rem, 1.4rem + 3vw, 5rem)/1 var(--font-mono); color: var(--orange); letter-spacing: -.03em; }
.calc__note { grid-column: 1 / -1; font: 400 var(--fs-label)/var(--lh-small) var(--font-mono); color: var(--grey); }
/* Лучи лазера, скрещённые за калькулятором */
.beams { position: absolute; inset: -8% 0; pointer-events: none; z-index: -1; }
.beams i { position: absolute; left: 50%; top: 50%; width: 140%; height: 3px; margin-left: -70%; background: var(--cream); box-shadow: 0 0 6px 2px rgba(255, 94, 26, 0.9), 0 0 30px 10px rgba(255, 94, 26, 0.35), 0 0 90px 30px rgba(255, 94, 26, 0.15); }
.beams i:first-child { transform: rotate(16deg); } .beams i:last-child { transform: rotate(-16deg); box-shadow: 0 0 6px 2px rgba(238, 229, 213, 0.9), 0 0 30px 10px rgba(238, 229, 213, 0.2); }
@media (max-width: 1000px) { .calc__form, .calc__out { grid-column: 1 / -1; } .beams { display: none; } }
@media (max-width: 520px) { .calc__dims { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Вопросы
   -------------------------------------------------------------------------- */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.faq__list { grid-column: 1 / 9; display: grid; gap: .6rem; }
.faq details { border: 1px solid var(--line-2); background: var(--panel); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); transition: border-color .2s; }
.faq details[open] { border-color: var(--orange); }
.faq summary { list-style: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; min-height: 3.5rem; padding: .8rem 1rem; cursor: pointer; font: 500 var(--fs-small)/1.35 var(--font-mono); text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .label { color: var(--grey); }
.faq summary i { width: 18px; height: 18px; position: relative; color: var(--orange); transition: transform .4s var(--ease); }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; left: 8px; top: 0; width: 2px; height: 18px; background: currentColor; }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i { transform: rotate(45deg); }
.faq .ans { padding: 0 1rem 1.2rem calc(1rem + 3.2rem); max-width: calc(var(--measure) + 4rem); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--cream-2); }
.faq__aside { grid-column: 9 / 13; position: sticky; top: 6rem; }
.faq__aside .hud__in { display: grid; gap: 1rem; text-align: left; }
.faq__aside img { max-height: 11rem; width: auto; margin-inline: auto; filter: drop-shadow(0 0 24px rgba(255, 94, 26, 0.35)); }
.faq__aside p { font-size: var(--fs-small); color: var(--cream-2); }
@media (max-width: 1000px) { .faq__list, .faq__aside { grid-column: 1 / -1; } .faq__aside { position: static; } }

/* --------------------------------------------------------------------------
   Контакты и подвал
   -------------------------------------------------------------------------- */
.order { position: relative; text-align: center; }
.order__mega { font: 700 var(--fs-mega)/.92 var(--font-mono); text-transform: uppercase; letter-spacing: -.04em; text-wrap: balance; }
.order__mega span { color: var(--orange); }
.order__form { max-width: 72rem; margin: clamp(2rem, 1rem + 3vw, 4rem) auto 0; text-align: left; }
.order__form .hud__in { display: grid; gap: 1.1rem; }
.order__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; align-items: end; }
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.tabs button { min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--line-2); background: none; font: 500 var(--fs-label)/1 var(--font-mono); color: var(--grey); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); transition: .2s; }
.tabs button.is-on { background: var(--orange); border-color: var(--orange); color: var(--bg); }
.drop { display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: .5rem 1rem; border: 1px dashed var(--line-2); font-size: var(--fs-small); color: var(--grey); cursor: pointer; transition: .2s; }
.drop:hover { border-color: var(--orange); color: var(--cream); }
.consent { display: flex; gap: .6rem; align-items: flex-start; font: 400 var(--fs-label)/var(--lh-small) var(--font-mono); color: var(--grey); }
.consent input { width: 1.1rem; height: 1.1rem; margin-top: .1rem; accent-color: var(--orange); }
.consent a { color: var(--orange); }
@media (max-width: 900px) { .order__row { grid-template-columns: 1fr; } }

.foot { padding-block: var(--section-gap) 2rem; }
.foot .hud__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem var(--gap); }
.foot__brand { grid-column: 1 / 5; display: grid; gap: .8rem; align-content: start; }
.foot__brand p { font: 400 var(--fs-label)/var(--lh-small) var(--font-mono); color: var(--grey); }
.foot__col { grid-column: span 2; display: grid; gap: .35rem; align-content: start; font: 400 var(--fs-label)/var(--lh-small) var(--font-mono); }
.foot__col:nth-of-type(2) { grid-column: 6 / 8; }
.foot__col--wide { grid-column: 8 / 11 !important; }
.foot__col a { text-decoration: none; color: var(--cream-2); } .foot__col a:hover { color: var(--orange); }
.foot__col .label--o { margin-bottom: .4rem; }
.foot__big { margin-top: var(--gap); }
.foot__big img:first-child { width: 100%; height: auto; }
@media (max-width: 1000px) { .foot__brand, .foot__col, .foot__col:nth-of-type(2), .foot__col--wide { grid-column: 1 / -1 !important; } }

/* --------------------------------------------------------------------------
   Появление при прокрутке: карточки «прилетают» с разлётом, как в референсе
   -------------------------------------------------------------------------- */
.js [data-fly] { opacity: 0; transform: translate3d(var(--fx, 0), var(--fy, 60px), 0) rotate(var(--fr, 0deg)) scale(.94); transition: opacity .8s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js [data-fly].is-in { opacity: 1; transform: none; }
.js [data-boot] { opacity: 0; }
.js [data-boot].is-in { animation: boot .7s steps(1, end) forwards; animation-delay: var(--d, 0s); }
@keyframes boot { 0% { opacity: 0; } 10% { opacity: 1; } 20% { opacity: .2; } 32% { opacity: 1; } 44% { opacity: .5; } 56%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .js [data-fly], .js [data-boot] { opacity: 1 !important; transform: none !important; animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   Карточки в фирменном стиле AXIOM (переопределяет HUD из референса):
   сплошное полотно, все четыре угла скошены на 20px, на скосах — оранжевые
   уголки той же формы, что в основной версии (css/brackets.css).
   Цвет полотна меняется модификатором: тёмное (по умолчанию), светлое, оранжевое.
   ========================================================================== */
.hud {
  --c: 20px;
  --fill: var(--panel-2);
  --bk-set: var(--bk-orange);
  position: relative;
  padding: 0;
  background: var(--fill);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  transition: background-color .3s;
}
.hud::after {
  content: ''; position: absolute; inset: -1px; z-index: 3; pointer-events: none;
  background-image: var(--bk-set);
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: left top, right top, left bottom, right bottom;
}
.hud__in { background: none; clip-path: none; height: 100%; }
.hud__tab, .hud__side { display: none; }
.svc .hud__in { padding-left: var(--card-pad); }
.calc__form .hud__in { padding-left: var(--card-pad); }

/* Нижняя подпись карточки — пунктирная линия и текст, как в основной версии */
.hud__bar { border: 0; clip-path: none; padding: .8rem 0 0; min-height: 0; background: repeating-linear-gradient(90deg, var(--line-2) 0 4px, transparent 4px 8px) top / 100% 3px no-repeat; }
.dossier__head { border: 0; clip-path: none; padding: 0 0 .7rem; background: repeating-linear-gradient(90deg, var(--line-2) 0 4px, transparent 4px 8px) bottom / 100% 3px no-repeat; }

/* Светлое полотно */
.hud--light { --fill: var(--cream); --bk-set: var(--bk-orange); color: var(--bg); }
.hud--light p, .hud--light .kv dd { color: var(--bg); }
.hud--light .kv dt, .hud--light .label { color: rgba(13, 13, 13, 0.6); }
.hud--light .hud__bar, .hud--light .dossier__head { background-image: repeating-linear-gradient(90deg, rgba(13, 13, 13, 0.5) 0 4px, transparent 4px 8px); color: var(--bg); }
/* Оранжевое полотно — уголки кремовые */
.hud--accent { --fill: var(--orange); --bk-set: var(--bk-cream); }
.svc .hud--accent .hud__in { background: none; }
.hud--accent .hud__bar { background-image: repeating-linear-gradient(90deg, rgba(13, 13, 13, 0.5) 0 4px, transparent 4px 8px); color: var(--bg); }

/* Наведение на карточку услуг: полотно чуть светлее */
.svc .hud:hover { --fill: var(--panel-2); }
.svc .hud--accent:hover { --fill: var(--orange); }
.svc__vis img { clip-path: none; }

/* Калькулятор: итог на светлом полотне */
.calc__out { --fill: var(--cream); }
.calc__out .hud__in { background: none; }
.calc__out .dossier__head { background-image: repeating-linear-gradient(90deg, rgba(13, 13, 13, 0.5) 0 4px, transparent 4px 8px); }

/* Миниатюры кейсов и вопросы — та же форма, уголки поменьше */
.thumb {
  --c: 12px;
  border: 0; background: var(--panel-2);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.thumb::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--bk-orange); background-repeat: no-repeat; background-size: 24px 24px; background-position: left top, right top, left bottom, right bottom; opacity: .35; transition: opacity .2s; }
.thumb[aria-current="true"] { background: var(--cream); }
.thumb[aria-current="true"]::after, .thumb:hover::after { opacity: 1; }
.thumb[aria-current="true"] span { color: var(--bg); }

.faq details {
  --c: 14px; border: 0; background: var(--panel-2); position: relative;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.faq details::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--bk-orange); background-repeat: no-repeat; background-size: 28px 28px; background-position: left top, right top, left bottom, right bottom; opacity: .4; transition: opacity .2s; }
.faq details[open]::after, .faq details:hover::after { opacity: 1; }

/* Вкладки кейсов и формы — со скосами по двум углам, без рамки */
.dossier__tabs button, .tabs button { border: 0; background: var(--panel-2); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.dossier__tabs button[aria-selected="true"] { background: var(--cream); color: var(--bg); }

/* Поля ввода — пунктирное подчёркивание, как в основной версии */
.inp { border: 0; background-color: transparent; padding: .6rem .15rem; background-image: repeating-linear-gradient(90deg, var(--cream) 0 4px, transparent 4px 8px); background-size: 8px 3px; background-repeat: repeat-x; background-position: left bottom; }
.inp:focus { background-image: repeating-linear-gradient(90deg, var(--orange) 0 4px, transparent 4px 8px); }
select.inp { background-image: repeating-linear-gradient(90deg, var(--cream) 0 4px, transparent 4px 8px), linear-gradient(45deg, transparent 50%, var(--cream) 50%), linear-gradient(-45deg, transparent 50%, var(--cream) 50%); background-size: 8px 3px, 5px 5px, 5px 5px; background-position: left bottom, calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-repeat: repeat-x, no-repeat, no-repeat; }
.qty button { border: 0; background: var(--panel); }
.drop { border-color: rgba(238, 229, 213, 0.4); }
.hud--light li { color: var(--bg); border-color: rgba(13, 13, 13, 0.5); }
.hud--light .label--o { color: var(--orange); }
/* Плашки с цифрами в кейсах и кнопки этапов — та же форма со скосами */
.stat { border: 0; background: rgba(27, 30, 33, 0.94); clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); }
.proc__rail button { border: 0; background: var(--panel-2); clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); }
.proc__rail button.is-done { background: var(--cream); color: var(--bg); }
.proc__rail button.is-on { background: var(--orange); color: var(--bg); }
.thumb[aria-current="true"] { background: var(--cream); }
.dossier__stage.brk::after { display: none; }
.yesno li { border-top: 0; background: repeating-linear-gradient(90deg, var(--line-2) 0 4px, transparent 4px 8px) top / 100% 3px no-repeat; }
.yesno li:last-child { background: repeating-linear-gradient(90deg, var(--line-2) 0 4px, transparent 4px 8px) top / 100% 3px no-repeat, repeating-linear-gradient(90deg, var(--line-2) 0 4px, transparent 4px 8px) bottom / 100% 3px no-repeat; }
.yesno .hud--light li { background-image: repeating-linear-gradient(90deg, rgba(13, 13, 13, 0.6) 0 4px, transparent 4px 8px); }
.yesno .hud--light li:last-child { background-image: repeating-linear-gradient(90deg, rgba(13, 13, 13, 0.6) 0 4px, transparent 4px 8px), repeating-linear-gradient(90deg, rgba(13, 13, 13, 0.6) 0 4px, transparent 4px 8px); }
/* «Не всегда»: зачёркивание тонкое и приглушённое, текст читается */
.yesno .hud--no li { color: var(--cream-2); text-decoration: none; }

/* ==========================================================================
   Шапка и первый экран (правки)
   ========================================================================== */
.top, .top.is-solid { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
.top > * { pointer-events: none; }
.top .logo, .top .nav, .top .burger { pointer-events: auto; }
.top__in { align-items: flex-start; padding-top: .6rem; }
.logo { width: clamp(9.5rem, 7.6rem + 2vw, 13.5rem); }
/* Меню столбиком справа; при прокрутке прячется, логотип остаётся */
.nav { flex-direction: column; align-items: flex-end; gap: .2rem; font: 400 var(--fs-small)/var(--lh-small) var(--font-sans); transition: opacity .35s, transform .35s; }
.nav a { padding: 0; color: var(--cream-2); }
.nav a::before, .nav a::after { content: none; }
.top.is-solid .nav { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.burger { background: rgba(13, 13, 13, 0.6); }

.hero__hud { position: absolute; z-index: 2; left: var(--gutter); top: clamp(6rem, 5rem + 2vw, 8rem); display: grid; gap: 1.1rem; font: 500 var(--fs-label)/var(--lh-small) var(--font-mono); color: var(--grey); }
.hero__hud b { color: var(--cream); font-weight: 600; }
.hero__hud .live { color: var(--orange); }
.hero__copy { grid-column: 1 / 9; display: grid; gap: clamp(.75rem, .5rem + 1vw, 1.5rem); }
.hero__title { grid-column: auto; }
.hero__side p { font-size: var(--fs-text); line-height: var(--lh-text); }
@media (max-width: 1000px) { .hero__copy { grid-column: 1 / -1; } .hero__hud p + p { display: none; } }

/* ==========================================================================
   Сетка-подсказка: 12 колонок контейнера (клавиша G или кнопка внизу слева)
   ========================================================================== */
.gridview { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; display: none; }
.gridview.is-on { display: block; }
.gridview__wrap { height: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.gridview__cols { height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.gridview__cols i { background: rgba(255, 94, 26, .035); border-inline: 1px solid rgba(255, 94, 26, .3); }
.gridview__btn { position: fixed; left: 50%; transform: translateX(-50%); top: .6rem; white-space: nowrap; z-index: 2147483001; min-height: 2.75rem; padding: .5rem .8rem; border: 0; background: rgba(13, 13, 13, 0.9); color: var(--cream); font: 600 var(--fs-label)/1.3 var(--font-mono); box-shadow: inset 0 0 0 1px var(--line-2); }
.gridview__btn[aria-pressed="true"] { background: var(--orange); color: var(--bg); box-shadow: none; }

/* Подвал не прячется под полосой «печати» */
.foot { padding-bottom: 5rem; }
/* Первый экран: снизу место под полосу «печати» */
.hero__ui { padding-bottom: calc(3.5rem + clamp(1.5rem, 1rem + 2vw, 3rem)); }
.hero__scroll { bottom: 4.3rem; }

/* Блок «идёт печать» прижат к детали слева: правый край — у шестерни */
@media (min-width: 1001px) { .hero__hud { transform: translateX(-100%); text-align: right; } }
/* «Смотреть работы» — та же форма со скосами, что у основной кнопки */
.btn--line { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); box-shadow: none; background: var(--panel-2); color: var(--cream); }
.btn--line:hover { background: var(--cream); color: var(--bg); }
/* Типографика: аккуратные переносы строк в абзацах */
p, li, dd, .lead { text-wrap: pretty; hanging-punctuation: first; }

/* ==========================================================================
   Кейсы: объёмная деталь, плашки по центру, крупные превью; размеры текста
   ========================================================================== */
.dossier__stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: 3rem 1rem 1.5rem; }
.viewer { position: relative; z-index: 1; width: min(100%, 26rem); aspect-ratio: 1.35; perspective: 900px; cursor: grab; touch-action: pan-y; outline: none; }
.viewer.is-drag { cursor: grabbing; }
.viewer:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; }
.viewer__obj { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.viewer__obj img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; backface-visibility: visible; }
.viewer__obj img:last-child { filter: drop-shadow(0 0 26px rgba(255, 94, 26, 0.35)) !important; }
.viewer__shadow { position: absolute; left: 18%; right: 18%; bottom: -4%; height: 12%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent); pointer-events: none; }
.dossier__stats { position: static; z-index: 2; justify-content: center; inset: auto; }
.dossier__dim--t { font: 400 var(--fs-small)/1.3 var(--font-sans); color: var(--grey); }

/* Все плашки и карточки — одинаковые уголки: 40px, оранжевые, полная яркость */
.stat {
  --c: 14px; position: relative; padding: .9rem 1.2rem; background: var(--panel-2); backdrop-filter: none;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.stat::after, .thumb::after, .faq details::after {
  content: ''; position: absolute; inset: -1px; pointer-events: none; opacity: 1;
  background-image: var(--bk-orange); background-repeat: no-repeat; background-size: 40px 40px;
  background-position: left top, right top, left bottom, right bottom;
}
.thumb, .faq details { --c: 20px; }
.stat { --c: 20px; text-align: center; }

/* Превью справа: крупная картинка и подпись */
.dossier__thumbs { gap: .6rem; }
.thumb { min-height: 6rem; padding: 0; display: grid; grid-template-columns: 46% 1fr; align-items: center; gap: .5rem; text-align: left; }
.thumb img { position: static; width: 100%; height: 100%; max-height: 6.5rem; padding: .6rem 0 .6rem .9rem; object-fit: contain; }
.thumb span { position: static; font: 500 var(--fs-small)/1.3 var(--font-sans); color: var(--cream-2); padding-right: 1rem; }
.thumb[aria-current="true"] span { color: var(--bg); }
.thumb--more { grid-template-columns: 1fr; text-align: center; gap: .2rem; padding: 1rem; }
.thumb--more b { font: 700 var(--fs-text)/1.2 var(--font-mono); text-transform: uppercase; color: var(--cream); }
.thumb--more span { color: var(--orange); padding: 0; font-size: var(--fs-small); }
@media (max-width: 1300px) { .thumb { grid-template-columns: 1fr; } .thumb span { padding: 0 .8rem .7rem; } .thumb img { padding: .7rem .7rem 0; max-height: 5rem; } }

/* Текст везде — обычного размера */
.title small { font: 400 var(--fs-text)/var(--lh-small) var(--font-sans); color: var(--cream-2); text-transform: none; }
.svc p, .dossier__text p, .faq .ans, .faq__aside p, .mega__sub, .proc__card p, .yesno li, .consent, .drop { font-size: var(--fs-text); line-height: var(--lh-text); }
.dossier__text b { font: 600 var(--fs-small)/1.3 var(--font-sans); text-transform: none; }
.kv div, .svc li { font-size: var(--fs-small); }
.dossier__tabs button, .tabs button { font: 500 var(--fs-small)/1 var(--font-sans); }
.dossier__head { font: 600 var(--fs-small)/1.3 var(--font-sans); text-transform: none; }
.faq summary { font-size: var(--fs-text); }
.hero__hud, .proc__readout { font-size: var(--fs-small); }
.hero__scroll { font: 400 var(--fs-small)/1 var(--font-sans); letter-spacing: 0; }
.consent { font-family: var(--font-sans); }
.stat span { font: 400 var(--fs-small)/1.3 var(--font-sans); }
.thumb { grid-template-columns: 42% minmax(0, 1fr); }
.thumb span { overflow-wrap: anywhere; padding-right: 1.1rem; }
.kv div { font-family: var(--font-sans); text-transform: none; }

/* ==========================================================================
   Меню под логотипом; «идёт печать» слева от детали, характеристики — по диагонали справа сверху
   ========================================================================== */
.top__in { flex-direction: column; align-items: flex-start; gap: clamp(1rem, .6rem + 1vw, 1.75rem); }
.nav { align-items: flex-start; }
.burger { position: absolute; right: var(--gutter); top: .6rem; }
.hero__spec { position: absolute; z-index: 2; font: 500 var(--fs-small)/var(--lh-small) var(--font-mono); color: var(--grey); }
.hero__spec b { color: var(--cream); font-weight: 600; }
@media (max-width: 1000px) { .hero__spec { display: none; } .hero__hud { top: 5.5rem; } }
@media (max-width: 700px) { .gridview__btn { left: auto; right: calc(var(--gutter) + 3.25rem); transform: none; } }

/* 3D-просмотр детали */
.viewer3d { position: relative; z-index: 1; width: min(100%, 30rem); aspect-ratio: 1.3; cursor: grab; touch-action: pan-y; }
.viewer3d:active { cursor: grabbing; }
.viewer3d canvas { position: absolute; inset: 0; display: block; }
.viewer3d__poster { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; opacity: .5; transition: opacity .4s; }
.viewer3d.is-ready .viewer3d__poster { opacity: 0; }
.thumb span { overflow-wrap: normal; hyphens: auto; }
.thumb.thumb--more { grid-template-columns: 1fr; }
@media (min-width: 1001px) { .hero__hud { transform: none; text-align: left; } }
@media (min-width: 1001px) { .hero__spec { text-align: right; } }

/* Летающие детали в блоке «Честно» — объёмные (3D) */
.mega__float { aspect-ratio: 1.2; filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.6)); }
.mega__float canvas { position: absolute; inset: 0; }
.mega__float img { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; transition: opacity .4s; }
.mega__float.is-ready img { opacity: 0; }

/* «Вертушка» для детали из видео: края плавно растворяются в фоне */
.turn { position: relative; z-index: 1; width: min(100%, 32rem); cursor: grab; touch-action: pan-y; outline: none; }
.turn.is-drag { cursor: grabbing; }
.turn:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; }
.turn__img { width: 100%; background-repeat: no-repeat;  }
.turn__credit { position: absolute; right: 0; bottom: -.4rem; font: 400 .7rem/1 var(--font-sans); color: var(--grey); opacity: .6; }

/* Эффекты появления блоков временно выключены: всё видно сразу */
.js [data-fly], .js [data-boot] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
.scan-in { animation: none !important; }


/* Курсор: только оранжевый крестик, без линий-прицела, координат и скобок */
#axc .axc__v, #axc .axc__h, #axc .axc__co, #axc .axc__ret { display: none !important; }

/* Плашка «Ваша задача»: серое полотно, тёмные уголки, всё по центру */
.thumb.thumb--more { background: var(--steel); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .35rem; padding: 1rem; }
.thumb.thumb--more::after { background-image: var(--bk-ink); opacity: 1; }
.thumb--more b { color: var(--bg); }
.thumb--more span { color: var(--bg); padding: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.thumb--more:hover { background: var(--cream); }

/* 3D-детали сразу в полном размере: фото-заглушки не показываем, модель плавно проявляется на своём месте */
.viewer3d__poster, .mega__float img { opacity: 0 !important; }
.viewer3d canvas, .mega__float canvas { opacity: 0; transition: opacity .35s ease; }
.viewer3d.is-ready canvas, .mega__float.is-ready canvas { opacity: 1; }

/* Этапы: рисунок справа выровнен по карточке слева — нижняя грань стола на уровне низа карточки,
   а сопло на последнем слое упирается в верх карточки */
.proc__grid { align-items: stretch; }
.proc__bed { height: auto; min-height: 20rem; }
.proc__bed .bed { bottom: 18px; }                       /* штриховка стола (18px) заканчивается ровно на нижней грани */
.proc__bed .layers { bottom: 28px; height: calc(100% - 106px); }   /* 28px стол + 78px сопло над верхним слоем */
.proc__bed .layer { flex: 1 1 0; height: auto; min-height: 0; }
.proc__readout { top: 0; }
/* Высота карточки этапа одинаковая на всех шагах — рисунок справа не «прыгает» */
.proc__card .hud__in { min-height: clamp(25rem, 20rem + 8vw, 31rem); }

/* Калькулятор: размеры шрифтов как везде (подписи — мелкий текст, значения — основной) */
.fld > span { font: 400 var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--grey); }
.inp { font: 400 var(--fs-text)/var(--lh-text) var(--font-sans); }
select.inp option { font-size: var(--fs-text); }
.qty button { font: 600 var(--fs-text)/1 var(--font-sans); }
.calc__out .kv div { font: 400 var(--fs-text)/var(--lh-text) var(--font-sans); }
.calc__out .dossier__head { font: 600 var(--fs-text)/var(--lh-text) var(--font-sans); }
.calc__total span { font: 400 var(--fs-small)/var(--lh-small) var(--font-sans); }

/* Вопросы: плоские плашки без обводки, скосов и уголков */
.faq details, .faq details[open] { clip-path: none; border: 0; box-shadow: none; background: var(--panel-2); transition: background-color .2s; }
.faq details::after { display: none; }
.faq details[open] { background: var(--panel-2); }
.faq summary:hover { color: var(--cream); }


/* Заголовки блоков (кроме главного экрана, «Честно» и калькулятора): правая половина ширины,
   красная строка — смещение на один столбец, в нём стоит короткая метка блока */
.head-row .title--r { grid-column: 7 / 13; display: block; }
.head-row .title--r::before {
  content: '//' attr(data-tag); display: inline-block; width: 16.66%; margin: 0; height: auto; clip-path: none; background: none;
  vertical-align: top; padding-top: .45em; font: 600 var(--fs-label)/1.2 var(--font-mono); letter-spacing: .02em; text-transform: uppercase; color: var(--orange); white-space: nowrap;
}
.head-row .title--r ~ .lead { grid-column: 7 / 13; grid-row: 2; }
@media (max-width: 1000px) {
  .head-row .title--r, .head-row .title--r ~ .lead { grid-column: 1 / -1; }
  .head-row .title--r::before { display: block; width: auto; padding: 0 0 .6rem; }
}

/* Меню на главном экране не следует за прокруткой — уходит вверх вместе со страницей */
.top { position: absolute; }
.hero__title .c-o { color: var(--orange); }
.hero__copy .label, #honest > .label { text-transform: uppercase; }

/* Форма заявки: заголовок крупный, внутри — как на старом сайте: подписи капсом, пунктирные линии, плашки-вкладки */
.order__form .hud__in { gap: 1.25rem; }
.order__h { margin: 0; font: 700 var(--fs-h2)/1.05 var(--font-mono); text-transform: uppercase; letter-spacing: -.02em; }
.order__sub { margin: -.6rem 0 0; font-size: var(--fs-text); line-height: var(--lh-text); color: var(--cream-2); }
.order__form .tabs { gap: .5rem; }
.order__form .tabs button { min-height: 2.75rem; padding: .5rem 1.1rem; background: transparent; border: 1px solid var(--line-2); clip-path: none; font: 600 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .02em; color: var(--cream); }
.order__form .tabs button.is-on { background: var(--orange); border-color: var(--orange); color: var(--bg); }
.order__form .fld > span { font: 600 var(--fs-label)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .02em; color: var(--orange); }
.order__form .drop { border: 1px dashed rgba(238, 229, 213, 0.4); min-height: 3.5rem; color: var(--grey); }
.order__send { width: 100%; justify-content: center; min-height: 3.25rem; }
/* Высоту карточки кейса задаёт самый длинный текст; правая колонка её не растягивает */
.dossier__stage { min-height: 0; }

/* Сеточка за деталью и мягкое оранжевое свечение — возвращены */
.viewer3d canvas { filter: drop-shadow(0 0 30px rgba(255, 94, 26, 0.35)); }
/* Превью кейсов — как кнопки: тот же скос (справа сверху и слева снизу), без угловых скобок */
.thumb { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); border: 0; background: var(--panel-2); }
.thumb::after { display: none; }
.thumb:hover { background: var(--orange); }
.thumb:hover span { color: var(--bg); }
.thumb[aria-current="true"] { background: var(--cream); }
.thumb.thumb--more:hover { background: var(--cream); }

/* Этапы: список крупных слов слева, активное сдвигается на центральную линию и подсвечивается;
   справа — карточка с описанием этапа */
.proc__single .proc__words { grid-column: 1 / 8; position: relative; height: clamp(22rem, 16rem + 18vw, 34rem); overflow: hidden; align-self: center; }
.proc__single .proc__card { grid-column: 8 / 13; align-self: center; }
.proc__single .proc__card .hud__in { min-height: 0; }
.proc__track { display: grid; transition: transform .6s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.proc__word { display: flex; align-items: baseline; gap: 1rem; padding: .1em 0; border: 0; background: none; text-align: left; cursor: pointer;
  font: 700 clamp(2rem, .8rem + 4.6vw, 6.5rem)/1.08 var(--font-mono); letter-spacing: -.03em; text-transform: uppercase; color: var(--cream); opacity: .2; transition: opacity .4s, color .4s; }
.proc__word small { font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .02em; color: var(--orange); min-width: 2.2rem; }
.proc__word.is-on { opacity: 1; color: var(--orange); }
.proc__word:hover { opacity: .6; }
.proc__word.is-on:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .proc__track { transition: none; } }
.viewer3d img, .mega__float img { pointer-events: none; -webkit-user-drag: none; user-select: none; }
.viewer3d { user-select: none; -webkit-user-select: none; }

/* Этапы: заголовок по центру закреплён, карточки плывут вокруг с разной скоростью (без обводки, разных размеров) */
.proc { height: 220vh; }
.proc__pin { pointer-events: none; z-index: 2; text-align: center; }
.proc__pin .wrap { display: flex; flex-direction: column; align-items: center; }
.proc__pin .head-row { display: block; margin: 0; max-width: 34rem; }
.proc__pin .title--r { display: block; text-align: center; }
.proc__pin .title--r::before { display: block; width: auto; padding: 0 0 .8rem; text-align: center; }
.proc__pin .title small { display: block; margin-top: 1rem; text-align: center; }
.proc__cards { position: sticky; top: 0; height: 100svh; margin-top: -100svh; z-index: 1; overflow: hidden; }
.pcard { position: absolute; left: 50%; top: 50%; width: clamp(18rem, 13rem + 10vw, 27rem); padding: 1.25rem; display: grid; gap: .5rem; will-change: transform; }
.pcard__no { font: 700 clamp(3rem, 2rem + 4vw, 6rem)/.9 var(--font-mono); letter-spacing: -.04em; color: var(--orange); }
.pcard h3 { font: 700 var(--fs-sub)/var(--lh-sub) var(--font-mono); text-transform: uppercase; }
.pcard p { font-size: var(--fs-text); line-height: var(--lh-text); }
.pcard__t { font: 600 var(--fs-label)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .02em; opacity: .7; }
.pcard--dark { background: var(--panel-2); color: var(--cream); }
.pcard--cream { background: var(--cream); color: var(--bg); }
.pcard--steel { background: var(--steel); color: var(--bg); }
.pcard--cream .pcard__no, .pcard--steel .pcard__no { color: var(--bg); }
@media (max-width: 1000px) { .proc { height: auto; } .proc__cards { display: none; } .proc__pin { pointer-events: auto; text-align: left; } .proc__pin .wrap { align-items: stretch; } .proc__pin .title--r { text-align: left; } .proc__pin .title--r::before, .proc__pin .title small { text-align: left; } }
.pcard p, .pcard h3 { overflow-wrap: break-word; hyphens: manual; min-width: 0; }

/* Точечные линии (габариты, характеристики): точки те же по размеру, но реже — через 6px */
.kv i, .svc li .lead-dots { border-bottom: 0; background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 6px) left bottom / 100% 1px no-repeat; height: 1px; align-self: flex-end; margin-bottom: .45em; }
.svc li .lead-dots { margin-bottom: 0; align-self: auto; }
.calc__out .kv i { background-image: repeating-linear-gradient(90deg, rgba(13, 13, 13, 0.5) 0 1px, transparent 1px 6px); }

.pcard p { font-size: var(--fs-text); line-height: var(--lh-text); }
.pcard__no { font-size: clamp(2.25rem, 1.5rem + 2.5vw, 4rem); }

/* Карточки этапов: скошенные углы как у кнопок; нижняя строка — пунктир и «//срок — номер/всего» */
.pcard { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.pcard__bar { display: flex; justify-content: space-between; gap: 1rem; margin-top: .5rem; padding-top: .8rem; font: 600 var(--fs-label)/1.3 var(--font-mono); background: repeating-linear-gradient(90deg, rgba(238, 229, 213, 0.4) 0 4px, transparent 4px 8px) top / 100% 3px no-repeat; }
.pcard--cream .pcard__bar, .pcard--steel .pcard__bar { background-image: repeating-linear-gradient(90deg, rgba(13, 13, 13, 0.5) 0 4px, transparent 4px 8px); }
.pcard__t { display: none; }

/* Нижняя полоса закреплена (≈56px): центр этапов считаем по свободной части экрана */
@media (min-width: 1001px) {
  .proc__pin { height: calc(100svh - 56px); padding-top: 0; }
  .proc__cards { height: calc(100svh - 56px); margin-top: calc(-100svh + 56px); }
}
.proc { height: 150svh; }
@media (max-width: 1000px) { .proc { height: auto; } }

/* ==========================================================================
   Услуги — плитки: значок сверху, заголовок снизу. При наведении плитка заливается,
   заголовок поднимается, выезжает описание, значок оживает.
   ========================================================================== */
.svc .svc__card { --fill: var(--panel-2); transition: background-color .45s var(--ease); }
.svc .svc__card .hud__in { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
  min-height: 0; aspect-ratio: 1.12; padding: var(--card-pad); overflow: hidden; }
@media (min-width: 1200px) { .svc .svc__card .hud__in { aspect-ratio: 1.2; } }
.svc__top { display: flex; justify-content: space-between; align-items: flex-start; }
.svc__no { font: 600 var(--fs-label)/1 var(--font-mono); color: var(--grey); transition: color .45s; }
.svc__ico { display: block; width: clamp(3rem, 2.4rem + 1.4vw, 4.25rem); aspect-ratio: 1; color: var(--cream); transition: color .45s;
  animation: svcIdle 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); transform-origin: 50% 60%; }
.svc__ico svg { width: 100%; height: 100%; overflow: visible; }
.svc__ico svg [stroke="#ff5e1a"] { stroke-dasharray: 6 5; animation: svcDash 2.4s linear infinite; }
.svc__body { display: grid; }
.svc .svc__card h3 { font: 700 var(--fs-sub)/var(--lh-sub) var(--font-mono); text-transform: uppercase; text-wrap: balance; transition: color .45s; }
.svc__more { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(12px);
  transition: grid-template-rows .55s var(--ease), opacity .45s, transform .55s var(--ease); }
.svc__more > div { overflow: hidden; min-height: 0; }
.svc__more p { margin-top: .8rem; font-size: var(--fs-text); line-height: var(--lh-text); color: inherit; max-width: none; }
.svc__more ul { margin-top: .8rem; }
.svc .svc__card li { font-size: var(--fs-small); }

/* наведение / фокус */
.svc .svc__card:hover, .svc .svc__card:focus-within { --fill: var(--orange); --bk-set: var(--bk-cream); color: var(--bg); }
.svc .svc__card:hover .svc__more, .svc .svc__card:focus-within .svc__more { grid-template-rows: 1fr; opacity: 1; transform: none; }
.svc .svc__card:hover .svc__ico, .svc .svc__card:focus-within .svc__ico { color: var(--bg); animation: svcWiggle .9s var(--ease) 1, svcIdle 2.2s ease-in-out .9s infinite; }
.svc .svc__card:hover .svc__ico svg [stroke="#ff5e1a"], .svc .svc__card:focus-within .svc__ico svg [stroke="#ff5e1a"] { stroke: var(--bg); animation-duration: .8s; }
.svc .svc__card:hover .svc__no, .svc .svc__card:hover li, .svc .svc__card:hover li b, .svc .svc__card:hover p,
.svc .svc__card:focus-within .svc__no, .svc .svc__card:focus-within li, .svc .svc__card:focus-within li b, .svc .svc__card:focus-within p { color: var(--bg); }
.svc .svc__card:hover .lead-dots, .svc .svc__card:focus-within .lead-dots { background-image: repeating-linear-gradient(90deg, rgba(13, 13, 13, 0.5) 0 1px, transparent 1px 6px); }

/* своя плитка — консультация: светлая, при наведении становится кремовой */
.svc .svc__card--accent { --fill: var(--orange); --bk-set: var(--bk-cream); color: var(--bg); }
.svc .svc__card--accent .svc__no, .svc .svc__card--accent .svc__ico { color: var(--bg); }
.svc .svc__card--accent .svc__ico svg [stroke="#ff5e1a"] { stroke: var(--bg); }
.svc .svc__card--accent:hover, .svc .svc__card--accent:focus-within { --fill: var(--cream); --bk-set: var(--bk-orange); }

@keyframes svcIdle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-3deg); } }
@keyframes svcWiggle { 0% { transform: rotate(0) scale(1); } 30% { transform: rotate(-10deg) scale(1.12); } 60% { transform: rotate(6deg) scale(1.05); } 100% { transform: rotate(0) scale(1); } }
@keyframes svcDash { to { stroke-dashoffset: -22; } }

/* на телефонах наведения нет — описание открыто сразу, плитка не квадратная */
@media (hover: none), (max-width: 699px) {
  .svc .svc__card .hud__in { aspect-ratio: auto; }
  .svc__more { grid-template-rows: 1fr; opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .svc__ico, .svc__ico svg [stroke="#ff5e1a"] { animation: none !important; } }
/* плитки пошире (две в ряд), высота прежняя — чтобы описание помещалось обычным шрифтом */
@media (min-width: 900px) {
  .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc .svc__card .hud__in { aspect-ratio: auto; height: clamp(21rem, 17rem + 5vw, 25rem); }
}
@media (min-width: 900px) {
  .svc .svc__card .hud__in { gap: 1rem; padding-block: calc(var(--card-pad) * .85); }
  .svc__more ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.75rem; }
  .svc .svc__card li { padding: .3rem 0; }
  .svc__more p { margin-top: .6rem; }
}
.svc__ico { width: clamp(2.5rem, 2rem + 1vw, 3.25rem); }
@media (min-width: 900px) and (max-width: 1199px) { .svc { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 900px) and (max-width: 1399px) { .svc { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 900px) { .svc .svc__card .hud__in { height: clamp(22rem, 18rem + 5vw, 26rem); } }
.svc .svc__card li { align-items: flex-end; }
.svc .svc__card li .lead-dots { transform: none; align-self: flex-end; margin-bottom: .45em; }

/* Услуги, правка: спокойная заливка при наведении (без яркого оранжевого), все плитки одного цвета,
   значки крупнее и оживают только при наведении, оставаясь видимыми */
.svc .svc__card, .svc .svc__card--accent { --fill: var(--panel-2); --bk-set: var(--bk-orange); color: var(--cream); }
.svc .svc__card:hover, .svc .svc__card:focus-within,
.svc .svc__card--accent:hover, .svc .svc__card--accent:focus-within { --fill: var(--panel-2); --bk-set: var(--bk-orange); color: var(--cream); }
.svc .svc__card:hover .svc__no, .svc .svc__card:focus-within .svc__no { color: var(--orange); }
.svc .svc__card:hover p, .svc .svc__card:focus-within p { color: var(--cream-2); }
.svc .svc__card:hover li, .svc .svc__card:focus-within li { color: var(--grey); }
.svc .svc__card:hover li b, .svc .svc__card:focus-within li b { color: var(--cream); }
.svc .svc__card:hover .lead-dots, .svc .svc__card:focus-within .lead-dots { background-image: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 6px); }
.svc .svc__card--accent .svc__no { color: var(--grey); }

/* Консультация — выделяется среди остальных плиток: кремовая заливка (цвет уже есть в проекте), тёмный текст; внизу кнопка записи на всю ширину */
.svc .svc__card--accent, .svc .svc__card--accent:hover, .svc .svc__card--accent:focus-within { --fill: var(--cream); --bk-set: var(--bk-orange); color: var(--bg); }
.svc .svc__card--accent .svc__no, .svc .svc__card--accent .svc__ico, .svc .svc__card--accent:hover .svc__no, .svc .svc__card--accent:hover .svc__ico { color: var(--bg); }
.svc .svc__card--accent h3, .svc .svc__card--accent p, .svc .svc__card--accent li, .svc .svc__card--accent li b,
.svc .svc__card--accent:hover p, .svc .svc__card--accent:hover li, .svc .svc__card--accent:hover li b,
.svc .svc__card--accent:focus-within p, .svc .svc__card--accent:focus-within li, .svc .svc__card--accent:focus-within li b { color: var(--bg); }
.svc .svc__card--accent .lead-dots, .svc .svc__card--accent:hover .lead-dots { background-image: repeating-linear-gradient(90deg, rgba(13, 13, 13, 0.5) 0 1px, transparent 1px 6px); }
.svc .svc__card--accent .svc__ico svg [stroke="#ff5e1a"] { stroke: var(--bg); }
.svc__cta { display: flex; width: 100%; margin-top: 1rem; }
.svc__cta:hover { background: var(--bg); color: var(--cream); }

.svc__ico { width: clamp(3.75rem, 2.8rem + 2.2vw, 5.5rem); color: var(--cream); animation: none; }
.svc .svc__card--accent .svc__ico { color: var(--cream); }
.svc__ico svg [stroke="#ff5e1a"], .svc .svc__card--accent .svc__ico svg [stroke="#ff5e1a"] { stroke: var(--orange); stroke-dasharray: none; animation: none; }
/* наведение: значок вздрагивает и дальше покачивается, оранжевые линии бегут пунктиром */
.svc .svc__card:hover .svc__ico, .svc .svc__card:focus-within .svc__ico { color: var(--cream); animation: svcWiggle .8s var(--ease) 1, svcIdle 2.4s ease-in-out .8s infinite; }
.svc .svc__card:hover .svc__ico svg [stroke="#ff5e1a"], .svc .svc__card:focus-within .svc__ico svg [stroke="#ff5e1a"] { stroke: var(--orange); stroke-dasharray: 6 5; animation: svcDash 1s linear infinite; }
.svc__ico { width: clamp(3.5rem, 2.6rem + 1.6vw, 5rem); }
@media (min-width: 900px) { .svc .svc__card .hud__in { gap: .75rem; } }
/* Значки: крупные и неподвижные; при наведении уменьшаются, чтобы дать место описанию, и оживают */
.svc__ico { width: clamp(5.5rem, 3.5rem + 4vw, 8.5rem); transition: width .55s var(--ease), color .45s; animation: none; }
.svc .svc__card:hover .svc__ico, .svc .svc__card:focus-within .svc__ico { width: clamp(3.5rem, 2.6rem + 1.6vw, 5rem); }
@media (hover: none), (max-width: 699px) { .svc__ico { width: clamp(3.5rem, 2.6rem + 1.6vw, 5rem); } }

/* «Не нашли ответ?»: как в блоке «Работы» — сетка в центре, свечение, шестерня крутится мышью */
.faq__stage { position: relative; display: grid; place-items: center; min-height: clamp(15rem, 11rem + 8vw, 21rem); margin: calc(var(--card-pad) * -.3) 0 .25rem;
  background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 40px 40px; }
.faq__stage::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, transparent 50%, var(--fill, var(--panel-2))); }
.faq__stage .viewer3d { width: 100%; aspect-ratio: 1.15; }
.faq__stage .dossier__dim { position: absolute; top: .25rem; left: 0; right: 0; text-align: center; z-index: 2; }

/* Заявка: форма слева, контакты и меню — колонкой справа */
.order__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; margin-top: clamp(2rem, 1rem + 3vw, 4rem); text-align: left; }
.order__grid .order__form { grid-column: 1 / 9; max-width: none; margin: 0; }
.order__info { grid-column: 10 / 13; display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2rem); align-content: start; padding-top: .5rem; }
.order__info .label { display: block; margin-bottom: .4rem; text-transform: uppercase; }
.order__info p { font-size: var(--fs-text); line-height: var(--lh-text); color: var(--cream-2); }
.order__big { display: inline-block; margin-bottom: .3rem; font: 700 var(--fs-sub)/1.1 var(--font-mono); color: var(--orange); text-decoration: none; overflow-wrap: anywhere; }
.order__big:hover { color: var(--cream); }
.order__menu { display: grid; gap: .55rem; }
.order__menu a { font-size: var(--fs-text); color: var(--cream-2); text-decoration: none; }
.order__menu a:hover { color: var(--orange); }
.foot__col { grid-column: 9 / 13 !important; }
@media (max-width: 1000px) { .order__grid .order__form, .order__info { grid-column: 1 / -1; } }

/* ==========================================================================
   Значки услуг — свой набор. В покое неподвижны и одного размера всегда;
   при наведении на плитку оживает только сам рисунок.
   ========================================================================== */
.svc__ico, .svc .svc__card:hover .svc__ico, .svc .svc__card:focus-within .svc__ico {
  width: var(--ico, clamp(4rem, 3rem + 2vw, 5.75rem)); animation: none !important; transform: none !important; transition: none; color: var(--cream); }
.ai { display: block; width: 100%; height: 100%; overflow: visible; }
.ai .o { stroke: var(--orange); }
.ai * { transform-box: view-box; }

/* 1. Печать: каретка ходит по направляющей, слои по очереди нарастают */
.ai-head { transform-origin: 48px 25px; }
.svc__card:hover .ai-head, .svc__card:focus-within .ai-head { animation: aiHead 1.6s ease-in-out infinite alternate; }
.svc__card:hover .ai-layers path, .svc__card:focus-within .ai-layers path { animation: aiLayer 2.4s steps(1) infinite; }
.ai-layers path:nth-child(2) { animation-delay: .3s !important; } .ai-layers path:nth-child(3) { animation-delay: .6s !important; } .ai-layers path:nth-child(4) { animation-delay: .9s !important; }
@keyframes aiHead { from { transform: translateX(-16px); } to { transform: translateX(16px); } }
@keyframes aiLayer { 0% { opacity: .15; } 15%, 100% { opacity: 1; } }

/* 2. Сканирование: веер лучей качается, точки на детали вспыхивают */
.ai-beam { transform-origin: 30px 18px; }
.svc__card:hover .ai-beam, .svc__card:focus-within .ai-beam { animation: aiBeam 1.8s ease-in-out infinite alternate; }
.svc__card:hover .ai-beam path, .svc__card:focus-within .ai-beam path { animation: aiDash .7s linear infinite; }
.svc__card:hover .ai-pts circle, .svc__card:focus-within .ai-pts circle { animation: aiBlink 1.2s ease-in-out infinite; }
.ai-pts circle:nth-child(2) { animation-delay: .25s !important; } .ai-pts circle:nth-child(3) { animation-delay: .5s !important; }
@keyframes aiBeam { from { transform: rotate(-9deg); } to { transform: rotate(7deg); } }
@keyframes aiDash { to { stroke-dashoffset: -16; } }
@keyframes aiBlink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }

/* 3. Моделирование: рёбра куба прорисовываются заново, узлы пульсируют */
.svc__card:hover .ai-edges path, .svc__card:focus-within .ai-edges path { stroke-dasharray: 100; animation: aiDraw 2.2s ease-in-out infinite; }
.ai-nodes circle { transform-origin: center; transform-box: fill-box; }
.svc__card:hover .ai-nodes circle, .svc__card:focus-within .ai-nodes circle { animation: aiPulse 1.1s ease-in-out infinite; }
.ai-nodes circle:nth-child(2) { animation-delay: .2s !important; } .ai-nodes circle:nth-child(3) { animation-delay: .4s !important; } .ai-nodes circle:nth-child(4) { animation-delay: .6s !important; }
@keyframes aiDraw { 0% { stroke-dashoffset: 100; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes aiPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.7); } }

/* 4. Литьё: ковш наклоняется, капли падают, форма наполняется */
.ai-ladle { transform-origin: 50px 14px; }
.ai-fill { transform-origin: 48px 83px; }
.svc__card:hover .ai-ladle, .svc__card:focus-within .ai-ladle { animation: aiTilt 2.4s ease-in-out infinite; }
.svc__card:hover .ai-drops circle, .svc__card:focus-within .ai-drops circle { animation: aiDrop 1.2s ease-in infinite; }
.ai-drops circle:nth-child(2) { animation-delay: .6s !important; }
.svc__card:hover .ai-fill, .svc__card:focus-within .ai-fill { animation: aiFill 2.4s ease-in-out infinite; }
@keyframes aiTilt { 0%, 100% { transform: rotate(0); } 40%, 70% { transform: rotate(16deg); } }
@keyframes aiDrop { 0% { transform: translateY(-6px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes aiFill { 0% { transform: scaleY(.15); } 80%, 100% { transform: scaleY(1.25); } }

/* 5. Постобработка: круг вращается, искры летят */
.ai-disc { transform-origin: 38px 40px; }
.svc__card:hover .ai-disc, .svc__card:focus-within .ai-disc { animation: aiSpin 1.1s linear infinite; }
.svc__card:hover .ai-sparks path, .svc__card:focus-within .ai-sparks path { animation: aiSpark .5s ease-out infinite; }
.ai-sparks path:nth-child(2) { animation-delay: .15s !important; } .ai-sparks path:nth-child(3) { animation-delay: .3s !important; }
@keyframes aiSpin { to { transform: rotate(360deg); } }
@keyframes aiSpark { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(8px, 4px); } }

/* 6. Консультация: точки «печатают ответ» */
.svc__card:hover .ai-dots circle, .svc__card:focus-within .ai-dots circle { animation: aiType 1s ease-in-out infinite; }
.ai-dots circle:nth-child(2) { animation-delay: .15s !important; } .ai-dots circle:nth-child(3) { animation-delay: .3s !important; }
@keyframes aiType { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-7px); } }

@media (prefers-reduced-motion: reduce) { .svc__card .ai * { animation: none !important; } }
/* чтобы крупный значок и раскрытое описание помещались в плитку той же высоты */
.svc__ico { --ico: clamp(3.75rem, 2.75rem + 2vw, 5.5rem); }
@media (min-width: 900px) {
  .svc .svc__card .hud__in { gap: .5rem; }
  .svc__more p { margin-top: .45rem; }
  .svc__more ul { margin-top: .5rem; }
  .svc .svc__card li { padding: .2rem 0; }
}
@media (min-width: 900px) { .svc .svc__card .hud__in { height: clamp(22.5rem, 18.4rem + 5vw, 26.5rem); } }
/* нижней полосы «печати» пока нет — этапы центрируем по всему экрану, подвал без запаса под неё */
@media (min-width: 1001px) {
  .proc__pin { height: 100svh; }
  .proc__cards { height: 100svh; margin-top: -100svh; }
}
.foot { padding-bottom: 2rem; }

/* Переключатель вида блока этапов (временный, для сравнения) */
.proc__mode { position: absolute; z-index: 5; top: 1.5rem; right: var(--gutter); display: flex; align-items: center; gap: .4rem; font: 600 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; color: var(--grey); }
.proc__mode span { margin-right: .3rem; }
.proc__mode button { min-height: 2.75rem; padding: .5rem .9rem; border: 1px solid var(--line-2); background: transparent; color: var(--cream); font: inherit; cursor: pointer; }
.proc__mode button[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--bg); }
@media (max-width: 1000px) { .proc__mode { display: none; } }

/* «Веер»: блок длиннее — карточки по очереди вылетают снизу и ложатся веером поверх заголовка */
@media (min-width: 1001px) {
  .proc[data-mode="fan"] { height: 380svh; }
  .proc[data-mode="fan"] .pcard { width: clamp(17rem, 12rem + 9vw, 23rem); min-height: clamp(22rem, 17rem + 9vw, 29rem); grid-template-rows: auto 1fr auto auto; align-content: stretch;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6); transition: none; }
  .proc[data-mode="fan"] .pcard h3 { align-self: end; }
  .proc[data-mode="fan"] .pcard { opacity: 0; }
}
.proc__pin .proc__mode { pointer-events: auto; top: 1.5rem; }
@media (min-width: 1001px) { .proc[data-mode="fan"] .proc__cards { z-index: 3; } }

/* «идёт печать»: точка мигает, как индикатор записи */
.live__dot { display: inline-block; font-style: normal; animation: liveBlink 1.2s ease-in-out infinite; text-shadow: 0 0 8px rgba(255, 94, 26, 0.9); }
@keyframes liveBlink { 0%, 100% { opacity: 1; } 50% { opacity: .15; text-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .live__dot { animation: none; } }
/* логотип одним файлом: Ω ровно по высоте прописных букв, «.tech» мельче */
.logo { aspect-ratio: 135.5 / 31; }
.logo img { width: 100%; height: 100%; }

/* Превью кейсов — колесо без фона: текущий по центру, соседние темнее и размытее */
.dossier__thumbs { position: relative; overflow: hidden; display: block; align-self: stretch; }
.wheel__track { display: grid; gap: .25rem; transition: transform .55s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.dossier__thumbs .thumb, .dossier__thumbs .thumb[aria-current="true"], .dossier__thumbs .thumb:hover {
  background: none; clip-path: none; border: 0; min-height: 0; padding: .5rem 0;
  display: grid; grid-template-columns: 46% 1fr; align-items: center; gap: .75rem; text-align: left;
  opacity: calc(1 - min(var(--d, 0), 3) * .28); filter: blur(calc(min(var(--d, 0), 3) * 1.2px)) brightness(calc(1 - min(var(--d, 0), 3) * .15));
  transform: scale(calc(1 - min(var(--d, 0), 3) * .06)); transform-origin: left center;
  transition: opacity .45s, filter .45s, transform .45s; }
.dossier__thumbs .thumb::after { display: none; }
.dossier__thumbs .thumb img { position: static; width: 100%; height: auto; max-height: 6rem; padding: 0; object-fit: contain; }
.dossier__thumbs .thumb span, .dossier__thumbs .thumb[aria-current="true"] span, .dossier__thumbs .thumb:hover span { color: var(--cream); font-size: var(--fs-text); padding: 0; }
.dossier__thumbs .thumb[aria-current="true"] span { color: var(--orange); }
.dossier__thumbs .thumb:hover { opacity: calc(1 - min(var(--d, 0), 3) * .2); filter: none; }
@media (prefers-reduced-motion: reduce) { .wheel__track, .dossier__thumbs .thumb { transition: none; } }
/* первый экран: заголовок и кнопки прижаты к низу, отступ снизу — как боковые поля (--gutter) */
.hero__ui { padding-bottom: var(--gutter); }
/* колесо превью: подпись помещается целиком */
.dossier__thumbs .thumb, .dossier__thumbs .thumb[aria-current="true"], .dossier__thumbs .thumb:hover { grid-template-columns: 34% minmax(0, 1fr); gap: .6rem; }
.dossier__thumbs .thumb span { white-space: nowrap; }

/* Значки услуг «Блоки»: одна сетка 8×8, клетки 6×6. Неподвижны; при наведении — анимация рывками по клеткам */
.bk { display: block; width: 100%; height: 100%; }
.bk .cf { fill: var(--cream); } .bk .of { fill: var(--orange); } .bk .bgf { fill: var(--panel-2); } .bk .gf { fill: var(--grey); }
.bk * { transform-box: view-box; }
.svc__card:hover .bk .bgf, .svc__card:focus-within .bk .bgf { fill: var(--panel-2); }
.svc__card:hover .a-slide, .svc__card:focus-within .a-slide { animation: bkSlide 1.6s steps(1) infinite; }
.svc__card:hover .a-step,  .svc__card:focus-within .a-step  { animation: bkStep 2.4s steps(1) infinite; }
.svc__card:hover .a-scan,  .svc__card:focus-within .a-scan  { animation: bkScan 2s steps(1) infinite; }
.svc__card:hover .a-blink, .svc__card:focus-within .a-blink { animation: bkBlink 1s steps(1) infinite; }
.svc__card:hover .a-drop,  .svc__card:focus-within .a-drop  { animation: bkDrop 1.2s steps(1) infinite; }
.svc__card:hover .a-spin,  .svc__card:focus-within .a-spin  { animation: bkSpin 1.6s steps(1) infinite; transform-origin: 24px 24px; }
.svc__card:hover .a-hop,   .svc__card:focus-within .a-hop   { animation: bkHop 1.2s steps(1) infinite; }
.bk .a-d1 { animation-delay: .3s !important; } .bk .a-d2 { animation-delay: .6s !important; } .bk .a-d3 { animation-delay: .9s !important; }
@keyframes bkSlide { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(8px); } 50% { transform: translateX(0); } 75% { transform: translateX(-8px); } }
@keyframes bkStep  { 0% { opacity: 0; } 20%, 100% { opacity: 1; } }
@keyframes bkScan  { 0% { transform: translateY(0); } 20% { transform: translateY(8px); } 40% { transform: translateY(16px); } 60% { transform: translateY(24px); } 80% { transform: translateY(32px); } }
@keyframes bkBlink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes bkDrop  { 0% { transform: translateY(0); opacity: 1; } 25% { transform: translateY(8px); } 50% { transform: translateY(16px); } 75% { transform: translateY(24px); opacity: 1; } 99% { opacity: 0; } }
@keyframes bkSpin  { 0% { transform: rotate(0); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } }
@keyframes bkHop   { 0%, 50%, 100% { transform: translateY(0); } 25% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .svc__card .bk * { animation: none !important; } }

/* Плашки с цифрами в кейсах: прямые углы, ровный фон, без оранжевых скобок */
.stat { clip-path: none !important; border: 0 !important; background: var(--panel-2) !important; }
.stat::after { display: none !important; }
/* вкладки кейсов — «Кейс //01» моноширинным капсом */
.dossier__tabs button { font: 600 var(--fs-label)/1 var(--font-mono) !important; text-transform: uppercase; letter-spacing: .03em; }
/* колесо превью: активная деталь крупнее, неактивные заметно меньше — и картинка, и подпись.
   Это базовое правило — на части брейкпоинтов (1001–1599px, телефон) оно переопределяется своими значениями ниже. */
.dossier__thumbs .thumb, .dossier__thumbs .thumb[aria-current="true"], .dossier__thumbs .thumb:hover { transform: scale(calc(1.2 - min(var(--d, 0), 2) * .26)); transform-origin: center; }
/* колесо высотой с карточку кейса: пять строк одинаковой высоты */
.dossier__thumbs { align-self: start; }
.wheel__track { gap: 0; }
.dossier__thumbs .thumb, .dossier__thumbs .thumb[aria-current="true"], .dossier__thumbs .thumb:hover { height: var(--row, 7rem); padding: 0; }
.dossier__thumbs .thumb img { max-height: calc(var(--row, 7rem) - 1.25rem); }

/* Цифры кейса без плашек: текст прямо на сетке, под буквами мягкое затемнение для читаемости */
.stat { background: none !important; backdrop-filter: none !important; padding: .25rem 1.25rem !important; }
.stat b, .stat span { text-shadow: 0 0 10px var(--bg), 0 0 22px var(--bg), 0 0 36px var(--bg); }
.stat + .stat { border-left: 0 !important; }
/* карточка кейса не тянется по высоте ряда — колесо берёт высоту у неё */
.dossier__sheet { align-self: start; }
/* шестерня в «Не нашли ответ?» — по размеру как детали в блоке «Работы» */
.faq__stage .viewer3d { width: 72%; aspect-ratio: 1.3; }

/* Вопросы: открытый вопрос подсвечивается оранжевым (номер и заголовок) */
.faq summary .label, .faq summary > span:nth-child(2) { transition: color .25s; }
.faq details[open] summary .label, .faq details[open] summary > span:nth-child(2) { color: var(--orange); }
/* текст в строке вопроса ровно по центру: от верха заглавных до верха рамки = от низа до низа */
.faq summary { padding-block: .8rem; }
.faq summary > span { text-box: trim-both cap alphabetic; }

/* «Блоки» — эталон: две величины клеток (крупная 10, мелкая 4) во всех значках; анимация мягкая, как в наборе */
.svc__card:hover .a-slide, .svc__card:focus-within .a-slide { animation: aiSlide 1.6s ease-in-out infinite alternate; }
.svc__card:hover .a-step,  .svc__card:focus-within .a-step  { animation: aiStep 2.4s steps(1) infinite; }
.svc__card:hover .a-scan,  .svc__card:focus-within .a-scan  { animation: aiScanY 1.8s ease-in-out infinite alternate; }
.svc__card:hover .a-drop,  .svc__card:focus-within .a-drop  { animation: aiDropB 1.2s ease-in infinite; }
.svc__card:hover .a-grow,  .svc__card:focus-within .a-grow  { animation: aiGrowB 2.4s ease-in-out infinite; transform-origin: 32px 52px; }
.svc__card:hover .a-spin,  .svc__card:focus-within .a-spin  { animation: aiSpinB 6s linear infinite; }
.svc__card:hover .a-hop,   .svc__card:focus-within .a-hop   { animation: aiHopB 1s ease-in-out infinite; }
.svc__card:hover .a-blink, .svc__card:focus-within .a-blink { animation: aiBlinkB 1.2s ease-in-out infinite; }
.svc__card:hover .a-spin[style*="45deg"], .svc__card:focus-within .a-spin[style*="45deg"] { animation: aiRomb 6s linear infinite; }
@keyframes aiSlide { from { transform: translateX(-9px); } to { transform: translateX(9px); } }
@keyframes aiStep { 0% { opacity: .12; } 20%, 100% { opacity: 1; } }
@keyframes aiScanY { from { transform: translateY(-9px); } to { transform: translateY(21px); } }
@keyframes aiDropB { 0% { transform: translateY(-2px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } }
@keyframes aiGrowB { 0% { transform: scaleY(.1); } 75%, 100% { transform: scaleY(1); } }
@keyframes aiSpinB { to { transform: rotate(360deg); } }
@keyframes aiRomb { from { transform: rotate(45deg); } to { transform: rotate(405deg); } }
@keyframes aiHopB { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
@keyframes aiBlinkB { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
/* слой с карточками этапов не перехватывает клики: кнопки «Круг / Веер» нажимаются */
.proc__cards { pointer-events: none; }
.pcard { pointer-events: auto; }
.proc__mode { z-index: 6; pointer-events: auto; }
@media (min-width: 1001px) { .proc[data-mode="fan"] .proc__cards { z-index: 3; } .proc__mode { z-index: 6; } }

/* ==========================================================================
   Матовое стекло вместо тёмных плашек (все приглушённые карточки): полупрозрачная тёмная подложка,
   сильное размытие того, что под ней (точки фона просвечивают мягкими пятнами), светлая кромка сверху-слева,
   тёмная снизу-справа и еле заметное отражение студийного света из карты окружения.
   Светлые (кремовые, серые, оранжевые) плашки остаются плотными.
   ========================================================================== */
:root {
  --glass: rgba(27, 30, 33, 0.34);
  --glass-hi: rgba(27, 30, 33, 0.5);
  --glass-blur: blur(2px) saturate(135%);
  --glass-rim: inset 1px 1px 0 rgba(238, 229, 213, 0.2), inset -1px -1px 0 rgba(0, 0, 0, 0.6), inset 0 18px 24px -18px rgba(238, 229, 213, 0.1);
  --glass-env: url('assets/img/glass-env.jpg');
}
.hud:not(.hud--light):not(.hud--accent):not(.calc__out),
.faq details, .pcard--dark, .dossier__tabs button, .tabs button, .btn--line, .qty button, .svc .svc__card {
  background: var(--glass) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-rim);
}
.hud:not(.hud--light):not(.hud--accent):not(.calc__out) { --fill: var(--glass); }
/* отражение окружения: широкая карта, еле видна, как блик студии в стекле */
.hud:not(.hud--light):not(.hud--accent):not(.calc__out)::before, .faq details::before, .pcard--dark::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--glass-env) 30% 50% / 420% 100% repeat-x; mix-blend-mode: screen; opacity: .07;
}
.hud:not(.hud--light):not(.hud--accent):not(.calc__out) > .hud__in, .faq details > *, .pcard--dark > * { position: relative; z-index: 1; }
/* наведение / открытие — стекло чуть плотнее */
.svc .svc__card:hover, .svc .svc__card:focus-within, .svc .svc__card--accent:hover, .svc .svc__card--accent:focus-within { background: var(--glass-hi) !important; }
.faq details[open], .faq details:hover { background: var(--glass-hi) !important; }
.dossier__tabs button[aria-selected="true"], .tabs button.is-on { background: var(--cream) !important; backdrop-filter: none; }
.tabs button.is-on { background: var(--orange) !important; }
.btn--line:hover { background: var(--cream) !important; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(27, 30, 33, 0.94); --glass-hi: rgba(27, 30, 33, 0.94); }
}
@media (prefers-reduced-transparency: reduce) { :root { --glass: rgba(27, 30, 33, 0.94); --glass-hi: rgba(27, 30, 33, 0.94); } }
/* переключатель вида этапов спрятан: пока оставлен «веер» */
.proc__mode { display: none !important; }
/* карточки веера — тот же скос, что у кнопок (справа сверху и слева снизу), на всех пяти */
.proc[data-mode="fan"] .pcard { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
/* карточки этапов — без стекла: плотные, ничего не просвечивает сквозь соседние */
.pcard--dark { background: var(--panel-2) !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.pcard--dark::before { display: none; }
/* блок «Честно», левая карточка («Массовые партии…»): стекло плотнее, фон всё ещё виден */
.hud--no { --glass: rgba(27, 30, 33, 0.6); --fill: rgba(27, 30, 33, 0.6); }
.hud--no, .hud--no.hud:not(.hud--light):not(.hud--accent):not(.calc__out) { background: rgba(27, 30, 33, 0.6) !important; }
/* открытый вопрос: то же стекло, но с оранжевым подтоном */
.faq details[open], .faq details[open]:hover { background: rgba(255, 94, 26, 0.15) !important; box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(255, 94, 26, 0.35); }

/* «Не нашли ответ?»: сцена как в блоке «Работы» — сетка только в центре и растворяется к краям, без квадратного поля;
   подпись того же размера, что «Покрутите деталь мышью» в работы */
.faq__stage::before { background: radial-gradient(closest-side, transparent 45%, var(--faq-bg, var(--panel)) 100%); }
.faq__stage { background: none; }
.faq__stage::before { display: none; }
.faq__stage .viewer3d::before { content: ''; position: absolute; inset: -12%; z-index: 0; pointer-events: none;
  background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 40px 40px;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); }
.faq__stage .dossier__dim { font: 400 var(--fs-small)/1.3 var(--font-sans); color: var(--grey); top: .9rem; }

/* Фоновые точки на сайте — как были (тусклые); под стеклом они ярче: свой слой точек, привязанный к экрану,
   чтобы совпадал с точками фона */
:root { --dots-glass: radial-gradient(rgba(238, 229, 213, 0.2) 0, rgba(238, 229, 213, 0.1) 1.8px, transparent 3.8px) 0 0 / 46px 46px fixed; }
.hud:not(.hud--light):not(.hud--accent):not(.calc__out),
.faq details, .dossier__tabs button, .tabs button, .btn--line, .qty button, .svc .svc__card { background: var(--dots-glass), var(--glass) !important; }
.svc .svc__card:hover, .svc .svc__card:focus-within, .svc .svc__card--accent:hover, .svc .svc__card--accent:focus-within,
.faq details:hover { background: var(--dots-glass), var(--glass-hi) !important; }
.hud--no, .hud--no.hud:not(.hud--light):not(.hud--accent):not(.calc__out) { background: var(--dots-glass), rgba(27, 30, 33, 0.6) !important; }
.faq details[open], .faq details[open]:hover { background: var(--dots-glass), rgba(255, 94, 26, 0.15) !important; }
.dossier__tabs button[aria-selected="true"], .tabs button.is-on { background: var(--cream) !important; }
.tabs button.is-on { background: var(--orange) !important; }
.btn--line:hover { background: var(--cream) !important; }

/* «Не нашли ответ?»: без карточки — без фона, скосов и оранжевых уголков; просто сцена, текст и кнопка */
.faq__aside, .faq__aside.hud:not(.hud--light):not(.hud--accent) { background: none !important; clip-path: none !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.faq__aside::before, .faq__aside::after { display: none !important; }
.faq__aside .hud__tab { display: none; }
.faq__aside .hud__in { padding: 0; }
/* шестерня ниже и чуть меньше — подпись «Покрутите деталь мышью» не прилипает к детали */
.faq__stage { padding-top: 2.75rem; margin: 0 0 .25rem; }
.faq__stage .viewer3d { width: 64%; }

/* ==========================================================================
   Калькулятор «деталь на сетке»: слева заготовка по центру сетки, справа материал, ползунки и поля ввода
   ========================================================================== */
.cc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.cc__stage-box { grid-column: 1 / 6; }
.cc__ctrl { grid-column: 6 / 13; }
.cc .hud__in { height: 100%; }
.cc__stage-box .hud__in { padding: 0; display: grid; }
.cc__stage { position: relative; display: grid; place-items: center; min-height: clamp(20rem, 16rem + 12vw, 34rem);
  background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 40px 40px; }
.cc__stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(closest-side, transparent 50%, rgba(13, 13, 13, 0.6)); }
.cc__stage svg { position: relative; width: 86%; max-height: 82%; overflow: visible; filter: drop-shadow(0 0 28px rgba(255, 94, 26, 0.35)); }
.cc__cap { position: absolute; left: 0; right: 0; bottom: 1rem; text-align: center; font: 400 var(--fs-small)/1.3 var(--font-sans); color: var(--grey); }
.cc__ctrl .hud__in { display: grid; gap: 1.1rem; align-content: start; }
.cc__lab { font: 600 var(--fs-label)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .02em; color: var(--orange); }
.cc__field { display: grid; gap: .6rem; }
.cc__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.cc__chip { min-height: 2.75rem; padding: .45rem .85rem; border: 1px solid var(--line-2); background: transparent; color: var(--cream); cursor: pointer; text-align: left; transition: background-color .2s, border-color .2s; }
.cc__chip b { display: block; font: 600 var(--fs-label)/1.1 var(--font-mono); text-transform: uppercase; letter-spacing: .02em; }
.cc__chip small { display: block; margin-top: .2rem; font: 400 var(--fs-label)/1 var(--font-sans); opacity: .65; }
.cc__chip:hover { border-color: var(--orange); }
.cc__chip[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--bg); }
.cc__sl { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 7.5rem; gap: .9rem; align-items: center; }
.cc input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 2.75rem; background: transparent; cursor: pointer; }
.cc input[type=range]::-webkit-slider-runnable-track { height: 4px; background: repeating-linear-gradient(90deg, var(--cream) 0 4px, transparent 4px 8px); }
.cc input[type=range]::-moz-range-track { height: 4px; background: repeating-linear-gradient(90deg, var(--cream) 0 4px, transparent 4px 8px); }
.cc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 24px; margin-top: -10px; background: var(--orange); border: 0; }
.cc input[type=range]::-moz-range-thumb { width: 14px; height: 24px; background: var(--orange); border: 0; border-radius: 0; }
.cc__num { display: flex; align-items: baseline; gap: .4rem; }
.cc__num .inp { text-align: right; padding-right: .2rem; -moz-appearance: textfield; }
.cc__num .inp::-webkit-outer-spin-button, .cc__num .inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cc__num em { font: 400 var(--fs-small)/1 var(--font-sans); font-style: normal; color: var(--grey); min-width: 1.6rem; }
.cc__tot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.cc .calc__total { margin: 0; }
.cc .calc__total span { color: var(--orange); }
.cc .calc__total strong { color: var(--orange); }
@media (max-width: 1000px) { .cc__stage-box, .cc__ctrl { grid-column: 1 / -1; } .cc__sl { grid-template-columns: 4.5rem minmax(0, 1fr) 6.5rem; } }
@media (max-width: 520px) { .cc__sl { grid-template-columns: 1fr 6.5rem; } .cc__sl .cc__lab { grid-column: 1 / -1; } }

/* Точки под стеклом — обычные, как в нашей сетке фона; просто видны сквозь стекло, слегка размытые (отдельного слоя точек нет) */
:root { --dots-glass: linear-gradient(transparent, transparent); }
:root { --glass-blur: blur(.8px) saturate(135%); --glass: rgba(27, 30, 33, 0.34); }
/* Вопросы: плавное раскрытие — плюс поворачивается, номер и заголовок плавно краснеют, подтон проявляется */
.faq details { transition: background-color .5s ease, box-shadow .5s ease; }
.faq summary i { transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.faq details[open] summary i { transform: rotate(135deg); }
.faq summary .label, .faq summary > span:nth-child(2) { transition: color .45s ease; }
.faq details[open] summary > span:nth-child(2) { letter-spacing: normal; }
.faq .ans { will-change: transform, opacity; }

/* вкладки формы заявки — те же, что вкладки кейсов: скос слева сверху и справа снизу, без рамки, активная кремовая */
.order__form .tabs { gap: .4rem; }
.order__form .tabs button { border: 0 !important; min-height: 2.75rem; padding: .5rem 1rem; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  font: 600 var(--fs-label)/1 var(--font-mono) !important; text-transform: uppercase; letter-spacing: .03em; color: var(--grey); transition: color .2s; }
.order__form .tabs button:hover { color: var(--cream); }
.order__form .tabs button.is-on { background: var(--cream) !important; color: var(--bg); }

/* Калькулятор, левая часть — как сцена в работы: без карточки, сетка только в центре, мягкое оранжевое свечение, вращается мышью */
.cc__stage-box { align-self: stretch; display: grid; }
.cc__stage { cursor: grab; touch-action: none; background: none; min-height: clamp(20rem, 16rem + 12vw, 34rem); }
.cc__stage:active { cursor: grabbing; }
.cc__stage::before { display: none; }
.cc__stage::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 40px 40px;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); }
.cc__stage svg { z-index: 1; filter: drop-shadow(0 0 30px rgba(255, 94, 26, 0.35)); user-select: none; -webkit-user-select: none; }
.cc__stage .dossier__dim { z-index: 2; font: 400 var(--fs-small)/1.3 var(--font-sans); color: var(--grey); }
.cc__cap { z-index: 2; }

/* высота калькулятора не меняется от цифр: итог в одной строке в своей ячейке, кнопка не переносится */
.cc__tot { display: grid; grid-template-columns: minmax(0, 1fr) auto; flex-wrap: nowrap; }
.cc .calc__total { min-width: 0; overflow: hidden; }
.cc .calc__total strong { overflow: visible; }
.cc__stage-box { min-height: 0; }
.cc__stage { height: 100%; min-height: 0; }
.cc__stage svg { max-height: 78%; }
/* на невысоких экранах — плотнее, чтобы калькулятор помещался целиком */
@media (min-width: 1001px) and (max-height: 860px) {
  .cc__ctrl .hud__in { gap: .65rem; padding-block: 1.2rem; }
  .cc__chip { min-height: 2.5rem; padding-block: .3rem; }
  .cc__sl input[type=range] { height: 2.25rem; }
  .cc .inp { min-height: 2.5rem; padding-block: .35rem; }
  .cc .calc__total strong { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.5rem); }
  .cc__drop { min-height: 2.75rem; }
}

/* Крупные цифры сайта — одного размера: цифры под деталью в кейсах, номера в карточках этапов, итог в калькуляторе */
:root { --fs-num: clamp(2.25rem, 1.5rem + 2.5vw, 4rem); }
.stat b, .pcard__no, .cc .calc__total strong { font-size: var(--fs-num) !important; line-height: 1; }
/* «от» и «до» в цене — мелкие и светлые, цифры крупные */
.cc .calc__total strong small { font: 400 var(--fs-small)/1 var(--font-sans); color: var(--cream); letter-spacing: 0; margin-inline: .15em; }
/* итог: одна строка фиксированной высоты, кнопка на всю ширину правой части — калькулятор не меняет высоту */
.cc__tot { display: grid; grid-template-columns: 1fr; gap: .9rem; }
.cc .calc__total { height: calc(var(--fs-num) + 1.6rem); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.cc .calc__total strong { white-space: nowrap; }
.cc__tot .btn { width: 100%; }
@media (min-width: 1001px) and (max-height: 860px) { .cc .calc__total strong { font-size: var(--fs-num) !important; } }

/* Калькулятор: значения вписаны в одну строку с единицей и общей пунктирной линией; ползунок и поле на одном уровне */
.cc__sl { grid-template-columns: 5.5rem minmax(0, 1fr) 8.5rem; gap: .9rem; align-items: center; row-gap: 0; }
.cc__sl input[type=range] { margin: 0; }
.cc__num { position: relative; display: flex; align-items: baseline; justify-content: flex-end; gap: .35rem; height: 2.75rem; padding-bottom: .2rem; align-items: flex-end;
  background: repeating-linear-gradient(90deg, var(--cream) 0 4px, transparent 4px 8px) left bottom / 100% 3px no-repeat; }
.cc__num:focus-within { background-image: repeating-linear-gradient(90deg, var(--orange) 0 4px, transparent 4px 8px); }
.cc__num .inp { width: 100%; min-height: 0; height: auto; padding: 0; background: none !important; text-align: right; line-height: 1.3; }
.cc__num em { padding-bottom: 0; line-height: 1.3; min-width: 1.8rem; text-align: left; }
.cc__sl { margin-block: .15rem; }
/* вкладки-выбор: скос как у кнопок (справа сверху и слева снизу), без рамки, активная кремовая */
.cc__chip { border: 0 !important; background: rgba(238, 229, 213, 0.1) !important; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); padding-inline: 1rem; }
.cc__chip:hover { background: rgba(238, 229, 213, 0.2) !important; }
.cc__chip[aria-pressed="true"] { background: var(--cream) !important; color: var(--bg); }
.cc__chip[aria-pressed="true"], .cc__chip[aria-pressed="true"]:hover { background: var(--cream) !important; color: var(--bg); }
.cc__chip[aria-pressed="false"] { color: var(--cream); }
/* согласие: квадратик ровно по центру строки текста (у многострочного — по центру блока) */
.consent { align-items: center; gap: .8rem; }
.consent input { margin: 0; flex: none; width: 1.25rem; height: 1.25rem; }

/* Подвал: без плашки, текст прямо над огромным логотипом; логотип «утоплен» — нижняя часть уходит за край страницы */
.foot { padding: var(--section-gap) 0 0; overflow: hidden; position: relative; }
.foot__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem var(--gap); align-items: start; }
.foot__top .foot__col { grid-column: span 3 !important; display: grid; gap: .5rem; align-content: start; font: 400 var(--fs-small)/var(--lh-small) var(--font-sans); }
.foot__top .foot__col--about { grid-column: 1 / 6 !important; }
.foot__top .foot__col:nth-child(2) { grid-column: 7 / 10 !important; }
.foot__top .foot__col:nth-child(3) { grid-column: 10 / 13 !important; }
.foot__col p { color: var(--cream-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.foot__col p b { color: var(--cream); }
.foot__col a { font-size: var(--fs-small); }
.foot__legal { margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); font: 400 var(--fs-label)/var(--lh-small) var(--font-mono); color: var(--grey); }
.foot__big { margin-top: clamp(1.5rem, 1rem + 3vw, 4rem); padding-inline: var(--gutter); line-height: 0; transform: translateY(33%); margin-bottom: 0; }
.foot__big img { display: block; width: 100%; height: auto; }
@media (max-width: 1000px) { .foot__top .foot__col, .foot__top .foot__col--about, .foot__top .foot__col:nth-child(2), .foot__top .foot__col:nth-child(3) { grid-column: 1 / -1 !important; } }
.foot { padding-top: clamp(2rem, 1rem + 4vw, 6rem); }
/* подписи у заготовки — ближе к фигуре: от центра сцены, а не от краёв */
.cc__stage .dossier__dim--t { top: auto; bottom: calc(50% + clamp(7rem, 5rem + 5vw, 10.5rem)); }
.cc__cap { bottom: auto; top: calc(50% + clamp(7rem, 5rem + 5vw, 10.5rem)); }

/* Бегущие строки: отступ сверху и снизу одинаковый — стандартный отступ между блоками (--section-gap) */
.ticker { margin-block: var(--section-gap); }
.ticker + .section, .ticker + .mega, .ticker + .proc { padding-top: 0; }
/* плавная прокрутка по якорям включается только после загрузки — иначе браузер при перезагрузке «доезжает» до прежнего места сверху вниз */
html.is-smooth { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.is-smooth { scroll-behavior: auto; } }
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
/* согласие: квадратик по центру первой строки текста */
.consent { align-items: flex-start; }
.consent input { margin-top: calc((var(--fs-text) * var(--lh-text) - 1.25rem) / 2); }

/* Калькулятор: ползунок и значение на одном уровне; поле значения узкое — под 4 цифры, цифра по центру, единица на той же линии */
.cc__sl { grid-template-columns: 5.5rem minmax(0, 1fr) max-content; align-items: center; }
.cc__num { position: relative; display: inline-flex; align-items: flex-end; justify-content: center; gap: .4rem; width: auto; height: 2.75rem; padding: 0 .1rem calc(1.375rem + 3px);
  background: repeating-linear-gradient(90deg, var(--cream) 0 4px, transparent 4px 8px) left 50% / 100% 3px no-repeat; }
.cc__num:focus-within { background-image: repeating-linear-gradient(90deg, var(--orange) 0 4px, transparent 4px 8px); }
.cc__num .inp { width: 4.2ch; min-width: 0; padding: 0; text-align: center; background: none !important; line-height: 1.3; font-variant-numeric: tabular-nums; }
.cc__num em { min-width: 0; padding: 0; line-height: 1.3; text-align: left; }
.cc input[type=range] { height: 2.75rem; }
.cc input[type=range]::-webkit-slider-runnable-track { margin-block: 0; }
.cc__stage .dossier__dim--t { bottom: calc(50% + clamp(9rem, 6.5rem + 6vw, 12.75rem)); }
.cc__cap { top: calc(50% + clamp(9rem, 6.5rem + 6vw, 12.75rem)); }

/* Обычный шрифт текста сайта (IBM Plex Sans, размер --fs-text) в строках с данными: габариты, цена, скидка, «от / до», характеристики, подписи под цифрами */
.kv div, .kv dt, .kv dd, .svc li, .svc li span, .svc li b, .stat span, .calc__total span, .cc .calc__total strong small, .cc__sl em {
  font-family: var(--font-sans) !important; font-size: var(--fs-text) !important; line-height: var(--lh-text) !important; letter-spacing: 0 !important; text-transform: none !important; }
.cc .calc__total strong small { font-weight: 400; margin-inline: .25em; }
.cc__num em { font-family: var(--font-sans); font-size: var(--fs-text); }
/* заготовка в калькуляторе — то же оранжевое свечение, что у деталей в блоке «Работы» */
.cc__stage canvas { filter: drop-shadow(0 0 30px rgba(255, 94, 26, 0.35)); z-index: 1; position: relative; }
/* колонка контактов и меню справа от формы — сдвинута на одну колонку влево */
.order__info { grid-column: 9 / 12; }
@media (max-width: 1000px) { .order__info { grid-column: 1 / -1; } }
/* подписи у заготовки — у верхнего и нижнего края сцены, чтобы деталь была крупнее */
.cc__stage .dossier__dim--t { top: 1.25rem; bottom: auto; }
.cc__cap { top: auto; bottom: 1.25rem; }
/* «Не нашли ответ?»: сетка на всю сцену, как в кейсах — клеток видно столько же, плавно гаснут к краям */
.faq__stage .viewer3d::before { display: none; }
.faq__stage::before { display: block; content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 40px 40px;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
/* колонка «Не нашли ответ?» липкая (sticky), а не смещённая на 96px — иначе она вылезала за блок и съедала отступ до бегущей строки */
.faq__aside { position: sticky !important; top: 6rem; align-self: start; }
/* до бегущей строки и после неё — одинаково: от видимого края кнопки и от верха букв заголовка */
.ticker + .order { margin-top: -.6rem; }
/* цифры-условия (количество, год, режим) — серые; оранжевые только результаты */
.stat--g b { color: var(--grey); }
/* «Не нашли ответ?»: сцена квадратная, сетка гаснет по кругу, а не по эллипсу */
.faq__stage { aspect-ratio: 1 / 1; min-height: 0; padding-top: 0; }
.faq__stage::before { -webkit-mask-image: radial-gradient(circle closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 55%, transparent 100%); }
.faq__stage .viewer3d { width: 64%; aspect-ratio: 1.15; }

/* ==========================================================================
   Подвал: пол-сетка как на главном экране уходит вдаль, логотип занимает 8 колонок слева и «утоплен»,
   текст прижат к нему справа внизу (небольшой зазор)
   ========================================================================== */
.foot { position: relative; overflow: hidden; padding: clamp(7rem, 4rem + 9vw, 16rem) 0 0; }
.foot__floor { position: absolute; inset: 0; z-index: 0; pointer-events: none; perspective: 520px; perspective-origin: 50% 0%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 38%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 38%, #000 100%); }
.foot__floor::before { content: ''; position: absolute; left: -60%; right: -60%; top: 0; bottom: -40%; transform-origin: 50% 0%; transform: rotateX(68deg);
  background: linear-gradient(90deg, rgba(238, 229, 213, 0.2) 1px, transparent 1px) 0 0 / 80px 80px, linear-gradient(rgba(238, 229, 213, 0.2) 1px, transparent 1px) 0 0 / 80px 80px; }
.foot__stage { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: end; }
.foot__logo { grid-column: 1 / 9; line-height: 0; transform: translateY(33%); }
.foot__logo img { display: block; width: 100%; height: auto; }
.foot__info { grid-column: 9 / 13; display: grid; gap: .9rem; padding-bottom: clamp(1rem, .6rem + 1.4vw, 2rem); }
.foot__info p, .foot__info a, .foot__copy { font: 400 var(--fs-small)/var(--lh-small) var(--font-sans); }
.foot__info p { color: var(--cream-2); } .foot__about b { color: var(--cream); }
.foot__docs { display: grid; gap: .35rem; }
.foot__docs .label { margin-bottom: .2rem; }
.foot__info a { color: var(--cream-2); text-decoration: none; } .foot__info a:hover { color: var(--orange); }
.foot__copy { color: var(--grey); }
@media (max-width: 1000px) { .foot__logo, .foot__info { grid-column: 1 / -1; } .foot__logo { transform: translateY(20%); margin-top: 1rem; } .foot__stage { align-items: start; } .foot__info { order: -1; } }

/* Этапы — «сетка»: карточки по колонкам вразнобой, без поворотов и без наложения; появляются по очереди */
@media (min-width: 1001px) {
  .proc[data-mode="grid"] { height: 260svh; }
  .proc[data-mode="grid"] .proc__cards { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
    padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); z-index: 3; }
  .proc[data-mode="grid"] .pcard { position: absolute; left: auto; right: auto; width: auto; min-height: 0; grid-column: var(--c); top: var(--top);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); box-shadow: none; opacity: 0; transition: none; }
}
@media (min-width: 1001px) { .proc[data-mode="grid"] .proc__pin { justify-content: flex-start; padding-top: 16svh; } }
.proc[data-mode="grid"] .proc__pin .title small { max-width: 22rem; margin-inline: auto; }

/* ==========================================================================
   Этапы — «ряды»: заголовок как во всех блоках (метка в красной строке, справа), ниже высокие карточки
   в два ряда вразнобой по колонкам сетки. Блок не закреплён: листается обычно, карточки проявляются по очереди.
   ========================================================================== */
@media (min-width: 1001px) {
  .proc[data-mode="rows"] { height: auto; padding-top: var(--section-gap); }
  .proc[data-mode="rows"] .proc__pin { position: static; height: auto; padding-top: 0; display: block; text-align: left; pointer-events: auto; z-index: auto; }
  .proc[data-mode="rows"] .proc__pin .wrap { display: block; }
  .proc[data-mode="rows"] .proc__pin .head-row { display: grid; max-width: none; margin: 0 0 clamp(1.75rem, 1rem + 2.5vw, 4rem); text-align: left; }
  .proc[data-mode="rows"] .proc__pin .title--r { display: block; grid-column: 7 / 13; text-align: left; }
  .proc[data-mode="rows"] .proc__pin .title--r::before { display: inline-block; width: 16.66%; padding: .45em 0 0; text-align: left; }
  .proc[data-mode="rows"] .proc__pin .title small { max-width: none; margin: .9rem 0 0; text-align: left; }
  .proc[data-mode="rows"] .proc__cards { position: relative; inset: auto; height: auto; margin: 0; overflow: visible; z-index: auto; display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(2rem, 1rem + 3vw, 4.5rem);
    padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); padding-bottom: 1rem; pointer-events: auto; }
  .proc[data-mode="rows"] .pcard { position: relative; left: auto; top: auto; width: auto; grid-column: var(--c); grid-row: var(--r); margin-top: var(--m, 0);
    min-height: clamp(24rem, 18rem + 12vw, 32rem); grid-template-rows: auto 1fr auto auto; padding: 1.5rem;
    opacity: 0; transform: translateY(46px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); will-change: transform, opacity; }
  .proc[data-mode="rows"] .pcard.is-in { opacity: 1; transform: none; }
  .proc[data-mode="rows"] .pcard h3 { align-self: end; }
  .proc[data-mode="rows"] .pcard { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .proc[data-mode="rows"] .pcard { opacity: 1; transform: none; transition: none; } }
.proc[data-mode="rows"] .pcard p, .proc[data-mode="rows"] .pcard h3 { overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 8 3 3; }
.proc[data-mode="rows"] .pcard { padding: 1.25rem; }

/* «Ряды» в один экран: блок закреплён на высоту экрана, заголовок компактнее, карточки ниже ростом; всё помещается */
@media (min-width: 1001px) {
  .proc[data-mode="rows"] { height: 210svh; padding-top: 0; }
  .proc[data-mode="rows"] .proc__pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 4.5rem; padding-bottom: 1.25rem; }
  .proc[data-mode="rows"] .proc__pin .head-row { margin-bottom: clamp(.75rem, .4rem + 1vw, 1.5rem); }
  .proc[data-mode="rows"] .proc__pin .title { font-size: var(--fs-h2); }
  .proc[data-mode="rows"] .proc__pin .title small { display: none; }
  .proc[data-mode="rows"] .proc__cards { position: absolute; left: 0; right: 0; bottom: 1.25rem; top: auto; padding-bottom: 0; row-gap: clamp(.6rem, .3rem + 1vw, 1.25rem); z-index: 3; }
  .proc[data-mode="rows"] .pcard { min-height: 0; padding: 1rem 1.15rem; gap: .4rem; }
  .proc[data-mode="rows"] .pcard__no { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.75rem); }
  .proc[data-mode="rows"] .pcard h3 { align-self: start; }
  .proc[data-mode="rows"] .pcard { grid-template-rows: auto auto 1fr auto; }
}
/* «Ряды»: одинаковые карточки — высота делится поровну между двумя рядами, всё в один экран */
@media (min-width: 1001px) {
  .proc[data-mode="rows"] .proc__pin { justify-content: flex-start; padding-top: 4.5rem; }
  .proc[data-mode="rows"] .proc__cards { height: calc(100svh - 12rem); grid-template-rows: 1fr 1fr; align-items: stretch; }
  .proc[data-mode="rows"] .pcard { margin-top: 0; top: var(--m, 0); height: 100%; min-height: 0; }
  .proc[data-mode="rows"] .pcard h3 { align-self: end; }
}

/* Калькулятор: панель с настройками начинается в той же колонке, что текст под заголовком (7-я); заготовка — слева */
.cc__stage-box { grid-column: 1 / 7; }
.cc__ctrl { grid-column: 7 / 13; }
/* Вопросы заканчиваются до колонки, с которой начинается заголовок (до 7-й) */
.faq__list { grid-column: 1 / 7; }
@media (max-width: 1000px) { .cc__stage-box, .cc__ctrl, .faq__list { grid-column: 1 / -1; } }
/* первый экран: заголовок и кнопки опущены к краю — отступ снизу такой же, как от логотипа до верхнего края экрана */
.hero__ui { padding-bottom: 19px; }
/* «Ряды», раскладка как на образце: пять колонок, карточки встык, цвета и скосы — как у веера (тёмная, кремовая, серая, тёмная, кремовая) */
@media (min-width: 1001px) {
  .proc[data-mode="rows"] .proc__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; row-gap: 0; }
  .proc[data-mode="rows"] .pcard { padding: 1.1rem 1.25rem; }
}
/* слой карточек «рядов» закреплён вместе с заголовком: ровно экран, под заголовком два равных ряда до нижнего края */
@media (min-width: 1001px) {
  .proc[data-mode="rows"] .proc__cards { position: sticky; top: 0; left: auto; right: auto; bottom: auto; margin-top: -100svh; height: 100svh; box-sizing: border-box;
    padding-top: 12.5rem; padding-bottom: 1.25rem; grid-template-rows: 1fr 1fr; pointer-events: none; }
  .proc[data-mode="rows"] .pcard { pointer-events: auto; }
}
@media (min-width: 1001px) and (max-height: 820px) {
  .proc[data-mode="rows"] .proc__cards { padding-top: 10.25rem; padding-bottom: .75rem; }
  .proc[data-mode="rows"] .proc__pin { padding-top: 3.75rem; }
  .proc[data-mode="rows"] .proc__pin .title { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.5rem); }
  .proc[data-mode="rows"] .pcard { padding: .8rem 1rem; gap: .2rem; }
  .proc[data-mode="rows"] .pcard__no { font-size: 1.5rem; }
  .proc[data-mode="rows"] .pcard__bar { margin-top: .2rem; padding-top: .5rem; }
}
@media (min-width: 1001px) and (max-height: 820px) {
  .proc[data-mode="rows"] .pcard { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: .6rem; align-content: start; }
  .proc[data-mode="rows"] .pcard__no { grid-column: 1; grid-row: 1; align-self: center; }
  .proc[data-mode="rows"] .pcard h3 { grid-column: 2; grid-row: 1; align-self: center; }
  .proc[data-mode="rows"] .pcard p { grid-column: 1 / -1; grid-row: 2; }
  .proc[data-mode="rows"] .pcard__bar { grid-column: 1 / -1; grid-row: 3; }
}
/* логотип в подвале целиком, без ухода за край: низ логотипа на одной линии с низом копирайта */
.foot__logo { transform: none; }
.foot__info { padding-bottom: 0; }
.foot { padding-bottom: var(--gutter); }
@media (max-width: 1000px) { .foot__logo { transform: none; } }
/* вопросы — снова на 8 колонок (1–8), как были */
.faq__list { grid-column: 1 / 9; }
@media (max-width: 1000px) { .faq__list { grid-column: 1 / -1; } }
/* вопросы — снова на 8 колонок (1–8), как были */
.faq__list { grid-column: 1 / 9; }
/* заголовок вопросов — в левой части, с первой колонки, вид тот же (ширина 6 колонок, красная строка с меткой) */
#faq .head-row .title--r { grid-column: 1 / 7; }
@media (max-width: 1000px) { .faq__list { grid-column: 1 / -1; } #faq .head-row .title--r { grid-column: 1 / -1; } }
/* колонка контактов и меню — снова на одну колонку правее (колонки 10–12), как была */
.order__info { grid-column: 10 / 13; }
@media (max-width: 1000px) { .order__info { grid-column: 1 / -1; } }
/* колонка контактов и меню — колонки 9–11 (на одну левее) */
.order__info { grid-column: 9 / 12; }
@media (max-width: 1000px) { .order__info { grid-column: 1 / -1; } }
/* «//не всегда» и «//когда да» — как метки блоков: моноширинный капс, оранжевые */
.yesno .label, .hud--no .label, .hud--yes .label { font: 600 var(--fs-label)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .02em; color: var(--orange); }
.hud--light .label, .hud--light .label--o { color: var(--orange); }
/* маркеры в списках «не всегда / когда да» — нарисованы фигурами, а не символами шрифта: стоят ровно по центру строки */
.yesno li { align-items: center; }
.yesno li::before { content: ''; flex: none; width: .7em; height: .7em; font: inherit; background: var(--grey); align-self: center;
  clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%); }
.yesno .hud--yes li::before { background: var(--orange); width: .6em; height: .7em; clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* строка кейса: «КЕЙС//01» слева и «//ЭЛЕКТРОНИКА» справа, моноширинный капс, оранжевая */
.dossier__sheet .dossier__head { display: flex; justify-content: space-between; gap: 1rem; font: 600 var(--fs-label)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .02em; }
.dossier__sheet .dossier__head span, .dossier__sheet .dossier__head span:last-child { color: var(--orange); }
/* «Задача / Решение / Результат» — как метки блоков: моноширинный капс с «//» */
.dossier__text b { font: 600 var(--fs-label)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .02em; color: var(--orange); }
.dossier__text b::before { content: '//'; }
/* все метки с «//» — капсом, одним шрифтом (в том числе «//НЕ НАШЛИ ОТВЕТ?») */
.label, .label--o { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .02em; }
/* низ букв логотипа (а не его контейнера) — на одной линии с низом копирайта: пустое поле под буквами внутри файла логотипа (6/31 высоты) убираем */
.foot__logo { margin-bottom: calc(-4.43% + 5px); }

/* «Этапы»: заголовок — обычный для сайта, с подписью под ним (метка в красной строке, текст на правой половине);
   между карточками — стандартный отступ сайта (--gap) */
@media (min-width: 1001px) {
  .proc[data-mode="rows"] .proc__pin .title small { display: block; margin-top: .6rem; font: 400 var(--fs-text)/var(--lh-text) var(--font-sans); text-transform: none; color: var(--cream-2); }
  .proc[data-mode="rows"] .proc__cards { column-gap: var(--gap); row-gap: var(--gap); padding-top: 15rem; }
}
@media (min-width: 1001px) and (max-height: 820px) {
  .proc[data-mode="rows"] .proc__cards { padding-top: 12.75rem; }
  .proc[data-mode="rows"] .proc__pin .title small { margin-top: .35rem; }
}
/* «Этапы»: номер и название в одной строке на любой высоте экрана — тексту хватает места */
@media (min-width: 1001px) {
  .proc[data-mode="rows"] .pcard { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: .6rem; align-content: start; }
  .proc[data-mode="rows"] .pcard__no { grid-column: 1; grid-row: 1; align-self: center; font-size: clamp(2rem, 1.4rem + 1.4vw, 3rem); }
  .proc[data-mode="rows"] .pcard h3 { grid-column: 2; grid-row: 1; align-self: center; }
  .proc[data-mode="rows"] .pcard p { grid-column: 1 / -1; grid-row: 2; }
  .proc[data-mode="rows"] .pcard__bar { grid-column: 1 / -1; grid-row: 3; }
}
/* «//НЕ ВСЕГДА» — серым, тем же серым, что и крестики в списке */
.hud--no .label { color: var(--grey); }
/* треугольник «когда да» чуть крупнее, под размер крестика */
.yesno .hud--yes li::before { width: .78em; height: .9em; }
/* этапы: нижняя грань названия — на одной линии с нижней гранью номера (по базовой линии) */
.proc[data-mode="rows"] .pcard__no, .proc[data-mode="rows"] .pcard h3 { align-self: baseline; }
/* нижние строки карточек («//срок», «01/05») — капсом, как метки */
.pcard__bar, .hud__bar { text-transform: uppercase; letter-spacing: .02em; }
/* «//ИТОГО» — метка капсом, пояснение в скобках — обычным шрифтом сайта, не оранжевым */
#ccTotLab i { font: 400 var(--fs-small)/1.3 var(--font-sans) !important; font-style: normal; text-transform: none !important; letter-spacing: 0; color: var(--grey) !important; margin-left: .35em; }
.cc .calc__total #ccTotLab { font: 600 var(--fs-label)/1.2 var(--font-mono) !important; text-transform: uppercase !important; letter-spacing: .02em !important; color: var(--orange) !important; }
.cc .calc__total #ccTotLab i { font: 400 var(--fs-small)/1.3 var(--font-sans) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--grey) !important; }
/* серая карточка этапов (03) — тот же серый, что слово «сдаётся» в заголовке главного экрана */
.pcard--steel { background: var(--grey) !important; }
/* калькулятор: под заголовком два текста подряд, обычным шрифтом сайта, на правой половине */
.head-row .title--r ~ .lead { grid-column: 7 / 13; grid-row: auto; }
.head-row .lead--2 { margin-top: -.5rem; }
@media (max-width: 1000px) { .head-row .title--r ~ .lead { grid-column: 1 / -1; } }
/* подпись «габариты заготовки» — размер основного текста сайта */
.cc__cap { font-size: var(--fs-text) !important; line-height: var(--lh-text) !important; }
/* подпись снизу сцены «Не нашли ответ?» — того же вида и размера, что «Покрутите деталь мышью» сверху */
.faq__stage .faq__cap { position: absolute; left: 0; right: 0; bottom: .9rem; top: auto; text-align: center; font: 400 var(--fs-small)/1.3 var(--font-sans); color: var(--grey); z-index: 2; }
/* подвал: абзац «Это концепт…» — слева над большим логотипом; справа остаются документы, автор и копирайт */
.foot__main { grid-column: 1 / 9; display: grid; gap: clamp(1rem, .6rem + 1.4vw, 2rem); align-content: end; }
.foot__main .foot__about { max-width: 46rem; font: 400 var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--cream-2); }
.foot__main .foot__about b { color: var(--cream); }
.foot__main .foot__logo { grid-column: auto; }
@media (max-width: 1000px) { .foot__main { grid-column: 1 / -1; } }
.foot__about b { font-weight: 400; color: inherit; }
/* бегущая строка: слова и крестик ровно по центру строки по вертикали; крестик нарисован фигурой, а не символом шрифта */
.ticker span { display: inline-flex; align-items: center; text-box: trim-both cap alphabetic; }
.ticker span::after { content: ''; flex: none; width: .8em; height: .8em; margin: 0 1.5rem; font-size: var(--fs-label); background: var(--orange); text-box: none;
  clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%); }
.ticker--o span::after { background: var(--bg); }
/* абзац «Это концепт» — ближе к логотипу: от низа абзаца до верха самих букв (а не их контейнера) — обычный отступ сайта (--gap) */
.foot__main { gap: 0; }
.foot__main .foot__logo { margin-top: calc(var(--gap) - 5.34%); }
.cc__cap { color: var(--cream) !important; }
/* «Здесь могла бы быть ваша деталь» — обычный текст сайта: размер основного текста, светлый */
.faq__stage .faq__cap { font-size: var(--fs-text); line-height: var(--lh-text); color: var(--cream); }
/* подписи в строках с данными калькулятора («объём габаритов», «цена за штуку», «скидка за тираж») — светлым цветом текста */
.cc .kv dt { color: var(--cream); }
/* подписи в строках калькулятора — снова серые, как были */
.cc .kv dt { color: var(--grey); }
.hero__tech { color: var(--cream); }

/* Полоса прокрутки: строгая, с прямыми углами. Дорожка — цвет фона с тонкой линией слева, ползунок — серый, при наведении оранжевый */
/* свойство scrollbar-color отключает прямые углы в Chrome, поэтому оно только для Firefox (там нет ::-webkit-scrollbar) */
@supports not selector(::-webkit-scrollbar) { html { scrollbar-color: var(--grey) var(--bg); } }
::-webkit-scrollbar { width: 12px; height: 12px; background: var(--bg); }
::-webkit-scrollbar-track { background: var(--bg); border-radius: 0; }
::-webkit-scrollbar-thumb { background: var(--grey); border: 0; border-left: 1px solid var(--bg); border-radius: 0; min-height: 48px; }
::-webkit-scrollbar-thumb:hover { background: var(--cream); }
::-webkit-scrollbar-thumb:active { background: var(--orange); }
::-webkit-scrollbar-corner { background: var(--bg); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* Первый экран всегда в один экран: без жёсткого минимума по высоте */
.hero { min-height: 100svh; }
@media (max-height: 640px) { .hero__ui { padding-top: 4.5rem; row-gap: .75rem; } }

/* Боковая рейка разделов (точки справа) */
.dots { position: fixed; z-index: 60; top: 50%; right: calc(var(--gutter) / 2 - 4px); transform: translateY(-50%); display: grid; gap: 4px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.dots.is-on { opacity: 1; pointer-events: auto; }
.dots a { position: relative; display: block; width: 16px; height: 16px; }
.dots a i { position: absolute; inset: 4px; background: var(--grey); opacity: .55; transition: background-color .2s, opacity .2s, transform .2s; }
.dots a.is-cur i { background: var(--orange); opacity: 1; transform: scale(1.25); }
.dots a:hover i { background: var(--cream); opacity: 1; }
.dots a span { position: absolute; right: 22px; top: 50%; transform: translate(6px, -50%); white-space: nowrap; font: 500 var(--fs-label)/1 var(--font-mono); color: var(--orange); background: var(--bg); padding: 6px 8px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.dots a:hover span, .dots a:focus-visible span { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 1000px), (hover: none) { .dots { display: none; } }

/* Рейка: подпись текущего раздела горит всегда */
.dots a.is-cur span { opacity: 1; transform: translate(0, -50%); }
.dots a:hover { z-index: 2; }

/* Логотип всегда на экране: остаётся сверху слева при прокрутке (меню уходит вместе со страницей) */
.top .logo { position: fixed; z-index: 71; }

/* Телефон: услуги листаются — активная плитка яркая и раскрыта, остальные бледные и свёрнуты до значка */
@media (max-width: 699px) {
  .svc .svc__card.is-act .svc__ico { color: var(--cream); animation: svcWiggle .8s var(--ease) 1, svcIdle 2.4s ease-in-out .8s infinite; }
  .svc .svc__card.is-act .svc__ico svg [stroke="#ff5e1a"] { stroke: var(--orange); stroke-dasharray: 6 5; animation: svcDash 1s linear infinite; }
  .svc__card.is-act .bk .bgf { fill: var(--panel-2); }
  .svc__card.is-act .a-slide { animation: aiSlide 1.6s ease-in-out infinite alternate; }
  .svc__card.is-act .a-step { animation: aiStep 2.4s steps(1) infinite; }
  .svc__card.is-act .a-scan { animation: aiScanY 1.8s ease-in-out infinite alternate; }
  .svc__card.is-act .a-drop { animation: aiDropB 1.2s ease-in infinite; }
  .svc__card.is-act .a-grow { animation: aiGrowB 2.4s ease-in-out infinite; transform-origin: 32px 52px; }
  .svc__card.is-act .a-spin { animation: aiSpinB 6s linear infinite; }
  .svc__card.is-act .a-hop { animation: aiHopB 1s ease-in-out infinite; }
  .svc__card.is-act .a-blink { animation: aiBlinkB 1.2s ease-in-out infinite; }
  .svc__card.is-act .a-spin[style*="45deg"] { animation: aiRomb 6s linear infinite; }
  .svc { gap: .75rem; }
  .svc .svc__card { opacity: .38; transition: opacity .5s var(--ease), background-color .45s var(--ease); }
  .svc .svc__card.is-act { opacity: 1; }
  .svc .svc__card .hud__in { min-height: 0; height: auto; gap: 0; transition: gap .5s var(--ease); }
  .svc .svc__card.is-act .hud__in { gap: 1rem; }
  .svc .svc__card .svc__no { opacity: 0; transition: opacity .3s; }
  .svc .svc__card.is-act .svc__no { opacity: 1; }
  .svc .svc__card .svc__body { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease), opacity .4s; }
  .svc .svc__card.is-act .svc__body { max-height: 40rem; opacity: 1; }
}

/* Телефон: кнопки первого экрана — в одну строку, каждая на половину ширины */
@media (max-width: 699px) {
  .hero__ctas { flex-wrap: nowrap; width: 100%; gap: .5rem; }
  .hero__ctas .btn { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; padding-inline: .5rem; }
}

/* Телефон, кейсы: колесо превью — столбиком справа от детали, деталь сдвинута влево */
@media (max-width: 699px) {
  .dossier { grid-template-columns: minmax(0, 1fr) 4.75rem; column-gap: .5rem; }
  .dossier__stage { order: -1; grid-column: 1; }
  .dossier__thumbs { display: block; order: -1; grid-column: 2; align-self: stretch; contain: size; }
  .dossier__sheet { grid-column: 1 / -1; }
  .dossier__thumbs .thumb, .dossier__thumbs .thumb[aria-current="true"], .dossier__thumbs .thumb:hover { grid-template-columns: 1fr; justify-items: center; gap: 0; }
  .dossier__thumbs .thumb span { display: none; }
  .dossier__thumbs .thumb img { max-width: 100%; }
}

/* Телефон: кнопка «Разобрать мою задачу с инженером» — на всю ширину */
@media (max-width: 699px) { #honest > .btn, #honest > .mega__cta .btn, #honest .btn--o[href="#order"] { display: flex; justify-content: center; width: 100%; text-align: center; } }

/* Телефон и планшет: этапы — те же карточки, что на компьютере (скошенные, номер рядом с названием), столбиком */
@media (max-width: 1000px) {
  .proc[data-mode="rows"] .proc__list { display: none; }
  .proc[data-mode="rows"] .proc__cards { display: grid; position: relative; height: auto; margin: 0; padding: 1.5rem var(--gutter) 0; grid-template-columns: minmax(0, 1fr); row-gap: var(--gap); overflow: visible; z-index: auto; pointer-events: auto; }
  .proc[data-mode="rows"] .pcard { position: relative; left: auto; top: auto; width: auto; grid-column: 1; grid-row: auto; margin-top: 0; min-height: 0; opacity: 1; transform: none; padding: 1.1rem 1.25rem; }
}
/* Калькулятор на телефоне: без ползунков — подпись и поле ввода в одной строке */
@media (max-width: 699px) {
  .cc__sl input[type=range] { display: none; }
  .cc__sl, .cc__sl { grid-template-columns: minmax(0, 1fr) max-content; }
  .cc__sl .cc__lab { grid-column: auto; }
  .cc__num { justify-self: end; }
}
@media (max-width: 1000px) {
  .proc[data-mode="rows"] .pcard { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: .6rem; align-content: start; }
  .proc[data-mode="rows"] .pcard__no { grid-column: 1; grid-row: 1; align-self: center; font-size: 2rem; }
  .proc[data-mode="rows"] .pcard h3 { grid-column: 2; grid-row: 1; align-self: center; }
  .proc[data-mode="rows"] .pcard p { grid-column: 1 / -1; grid-row: 2; }
  .proc[data-mode="rows"] .pcard__bar { grid-column: 1 / -1; grid-row: 3; }
}

/* Меню-бургер: без цифр, простой список с пунктирными линиями */
.mmenu { gap: 0; justify-content: flex-start; padding-top: 7rem; background: var(--bg); }
.mmenu::before { content: "//меню"; text-transform: uppercase; font: 600 var(--fs-label)/1 var(--font-mono); color: var(--orange); padding-bottom: 1rem; }
.mmenu a span { display: none; }
.mmenu a { display: block; padding: 1rem 0; font: 700 clamp(1.4rem, 6.5vw, 2rem)/1.2 var(--font-mono); color: var(--cream); background: repeating-linear-gradient(90deg, var(--line-2) 0 4px, transparent 4px 8px) bottom / 100% 1px no-repeat; transition: color .2s, padding-left .25s var(--ease); }
.mmenu a:hover, .mmenu a:active { color: var(--orange); padding-left: .6rem; }

/* Услуги на телефоне, плавнее: настоящая высота раскрывается через grid (0fr → 1fr), закрытие и открытие
   идут одновременно и с одинаковой скоростью, поэтому страница почти не «дёргается» */
@media (max-width: 699px) {
  .svc .svc__card .svc__body { display: grid; grid-template-rows: 0fr; max-height: none; overflow: visible; opacity: 0;
    transition: grid-template-rows .9s var(--ease), opacity .7s ease; }
  .svc .svc__card.is-act .svc__body { grid-template-rows: 1fr; max-height: none; opacity: 1; transition-delay: 0s, .15s; }
  .svc .svc__card .svc__inner { min-height: 0; overflow: hidden; }
  .svc .svc__card { transition: opacity .9s var(--ease), background-color .45s var(--ease); }
  .svc .svc__card .hud__in { transition: gap .9s var(--ease); }
}

/* Данные печати: «идёт печать», «слой», «высота» — по одной строке, без переносов */
.hero__hud, .hero__hud p, .hero__hud p > * { white-space: nowrap; }
.hero__hud { width: max-content; max-width: none; }
@media (max-width: 699px) { .hero__hud { font-size: min(var(--fs-small), 3.6vw); } }

/* Услуги на телефоне: все карточки раскрыты, активная ярче остальных */
@media (max-width: 699px) {
  .svc .svc__card .svc__body, .svc .svc__card.is-act .svc__body { grid-template-rows: 1fr; opacity: 1; transition: none; }
  .svc .svc__card .svc__no { opacity: 1; }
  .svc .svc__card .hud__in { gap: 1rem; }
  .svc .svc__card { opacity: .5; transition: opacity .6s var(--ease), background-color .45s var(--ease); }
  .svc .svc__card.is-act { opacity: 1; }
}

/* Телефон, кейсы: превью в колесе мельче и занимают меньше места */
@media (max-width: 699px) {
  .dossier { grid-template-columns: minmax(0, 1fr) 3.5rem; column-gap: .25rem; }
  .dossier__thumbs .thumb img { max-width: 70%; }
  /* активная деталь в колесе заметно крупнее соседних, а не почти такого же размера */
  .dossier__thumbs .thumb, .dossier__thumbs .thumb[aria-current="true"], .dossier__thumbs .thumb:hover { transform: scale(calc(1.3 - min(var(--d, 0), 2) * .34)); }
}
.dossier__thumbs { touch-action: none; }
@media (max-width: 699px) { .svc .svc__card { opacity: .28; } .svc .svc__card.is-act { opacity: 1; } }

/* Телефон: при переходе к услуге карточка мягко подъезжает и проявляется, без линий */
@media (max-width: 699px) and (prefers-reduced-motion: no-preference) {
  .svc .svc__card.is-act { animation: svcLift .7s var(--ease) 1; }
}
@keyframes svcLift { from { transform: translateY(14px) scale(.985); } to { transform: none; } }
.dossier__dim--t { white-space: nowrap; }
@media (max-width: 699px) { .dossier__sheet { align-self: start; } }

/* Калькулятор на телефоне и планшете: модель-заготовка стоит перед ползунками и полями, у неё своя высота */
@media (max-width: 1000px) {
  .cc__stage-box { align-self: auto; min-height: clamp(19rem, 16rem + 25vw, 28rem); }
  .cc__stage-box .hud__in, .cc__stage-box > * { min-height: inherit; }
  .cc__stage { height: auto; min-height: clamp(19rem, 16rem + 25vw, 28rem); }
}
@media (max-width: 699px) { .dossier__thumbs .thumb.thumb--far, .dossier__thumbs .thumb.thumb--far:hover { opacity: 0; pointer-events: none; } }

/* Калькулятор: размеры в общей обёртке; на компьютере она «прозрачна», на телефоне — две строки по два поля */
.cc__dims { display: contents; }
@media (max-width: 699px) {
  .cc__dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; row-gap: .25rem; }
  .cc__dims .cc__sl { grid-template-columns: minmax(0, 1fr) max-content; gap: .5rem; }
}

/* Совсем узкие экраны (≈320 px): подписи прежнего размера, уже поле ввода и мельче единица измерения */
@media (max-width: 340px) {
  .cc__dims { column-gap: .6rem; }
  .cc__dims .cc__sl { gap: .25rem; }
  .cc__dims .cc__lab { white-space: nowrap; }
  .cc__dims .cc__num { gap: .15rem; }
  .cc__dims .cc__num .inp { width: 3ch; }
  .cc__dims .cc__num em { font-size: .65rem; }
}
}

/* Вопросы: номер //01 стоит по первой строке заголовка, а не по центру всего заголовка */
.faq summary { align-items: start; }
.faq summary > span { align-self: first baseline; }
.faq summary > i { align-self: start; margin-top: .1em; }
.faq summary { align-content: center; }

/* Форма заявки на узких экранах: колонка карточки не шире самой карточки */
.order__form .hud__in { grid-template-columns: minmax(0, 1fr); }
.order__form .hud__in > * { min-width: 0; }
/* Итого «от … до …»: предлоги ближе к цифрам */
.cc .calc__total strong small { margin-inline: .1em; }
@media (max-width: 340px) { .cc .calc__total strong small { margin-inline: .05em; } }

/* 320 px: номер и крестик в первой строке, заголовок и ответ — на всю ширину */
@media (max-width: 340px) {
  .faq summary { grid-template-columns: minmax(0, 1fr) auto; row-gap: .5rem; }
  .faq summary > .label { grid-column: 1; grid-row: 1; }
  .faq summary > i { grid-column: 2; grid-row: 1; align-self: center; margin-top: 0; }
  .faq summary > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .faq .ans { padding-left: 1rem; padding-right: 1rem; margin-left: 0; }
}

/* Телефон: подпись под моделью в две строки — «габариты заготовки», ниже сам размер */
@media (max-width: 699px) {
  .cc__cap { text-align: center; line-height: 1.4; }
  .cc__cap .cc__sep { display: none; }
  .cc__cap .cc__size { display: block; color: var(--cream); }
}

/* Телефон: заголовок первого экрана подстраивается под ширину, чтобы «ГДЕ ТРАДИЦИОННОЕ» помещалось целиком */
@media (max-width: 699px) { :root { --fs-h1: min(clamp(2.125rem, 1.553rem + 2.441vw, 5.3125rem), calc((100vw - 2 * var(--gutter)) / 9.6)); } }

/* 320 px, кейсы: показатели под деталью — по два в строке (20 корпусов и 0 деформаций), цифры мельче у всех кейсов */
@media (max-width: 340px) {
  .dossier__stats { gap: .5rem .25rem; }
  .dossier__stage { padding-inline: .25rem; }
  .stat { padding: .25rem .4rem !important; }
  :root { --fs-num: 1.6rem; }   /* крупные цифры уменьшаются сразу везде: показатели, этапы, итог калькулятора */
  .stat span { font-size: .75rem; line-height: 1.2; white-space: nowrap; }
}
@media (max-width: 340px) {
  .dossier__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: .5rem .25rem; justify-items: center; }
  .dossier__stats .stat:nth-child(3) { grid-column: 1 / -1; }
  .stat span { white-space: normal; text-align: center; }
  .stat { padding: .25rem 0 !important; }
  /* этапы: название стоит на нижней линии цифры */
  .proc[data-mode="rows"] .pcard__no, .proc[data-mode="rows"] .pcard h3 { align-self: last baseline; }
}

/* Телефон: пунктирная линия поля ввода лежит на нижней грани подписи («длина»), всё на одной линии */
@media (max-width: 699px) {
  .cc__dims .cc__sl { align-items: end; }
  .cc__dims .cc__lab { line-height: 1; padding-bottom: 0; margin-bottom: 0; }
}
@media (max-width: 699px) { .cc__dims .cc__lab { margin-bottom: calc(1.375rem - 3px); } }

/* Пунктирные «точки» между названием и значением — на нижней линии строки (по низу букв), везде */
.kv div, .svc .svc__card li { align-items: baseline; }
.kv i, .svc li .lead-dots, .svc .svc__card li .lead-dots { align-self: baseline; margin-bottom: 0; transform: none; }

/* ~375 px, только первый кейс: показатели «20 корпусов» и «0 деформаций» в одной строке, «+130°» — во второй */
@media (min-width: 341px) and (max-width: 420px) {
  #caseStage[data-case="0"] .dossier__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: .5rem .25rem; justify-items: center; }
  #caseStage[data-case="0"] .dossier__stats .stat:nth-child(3) { grid-column: 1 / -1; }
  #caseStage[data-case="0"] .stat { padding: .25rem 0 !important; }
}

/* Заголовок формы: на телефоне «Выберите то,» — первая строка, «что у вас есть» — вторая */
.m-br { display: inline; }
@media (max-width: 699px) { .m-br { display: block; height: 0; font-size: 0; line-height: 0; } }

/* Вопросы: цифра на верхней грани заголовка (по верху заглавных), ответ начинается там же, где заголовок, и занимает всю свободную ширину */
.faq { --faq-num: 3.25rem; }
.faq summary { grid-template-columns: var(--faq-num) minmax(0, 1fr) auto; align-items: start; }
.faq summary > span { align-self: start; }
.faq summary > i { align-self: center; margin-top: 0; }
.faq .ans { padding-left: calc(1rem + var(--faq-num) + 1rem); padding-right: calc(1rem + 18px + 1rem); max-width: none; }
@media (max-width: 340px) {
  .faq summary { grid-template-columns: minmax(0, 1fr) auto; }
  .faq .ans { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 699px) { .faq .ans { padding-right: 1rem; } }

/* Этапы: название стоит на нижней линии цифры на любой ширине; лишнее пространство строк убрано (text-box), чтобы линии совпадали точно */
.proc[data-mode="rows"] .pcard__no, .proc[data-mode="rows"] .pcard h3 { text-box: trim-both cap alphabetic; align-self: end; }

/* Вопросы: компактнее — заголовок ближе к цифре, ответ начинается там же, где заголовок */
.faq { --faq-num: 2.4rem; --faq-gap: .6rem; }
.faq summary { column-gap: var(--faq-gap); }
.faq .ans { padding-left: calc(1rem + var(--faq-num) + var(--faq-gap)); }
@media (max-width: 340px) { .faq .ans { padding-left: 1rem; } }
/* Вопросы: при открытии заголовок не меняет ширину (никаких скачков переноса слов) */
.faq summary > span:nth-child(2), .faq details[open] summary > span:nth-child(2) { letter-spacing: 0; transition: color .45s ease; }

/* От 430 px и до компьютерной раскладки: показатели кейсов — два в строке, третий отдельной строкой ниже (во всех кейсах) */
@media (min-width: 430px) and (max-width: 1000px) {
  .dossier__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: .75rem .5rem; justify-items: center; }
  .dossier__stats .stat:nth-child(3) { grid-column: 1 / -1; }
  .dossier__stats .stat { padding: .25rem 0 !important; }
}

/* Калькулятор (телефон): подпись и её поле — ближе друг к другу, чем одна пара к другой (внутреннее < внешнего) */
@media (max-width: 699px) {
  .cc__dims { column-gap: 1.75rem; }
  .cc__dims .cc__sl { grid-template-columns: max-content minmax(0, 1fr); gap: .6rem; }
  .cc__dims .cc__num { justify-self: stretch; width: auto; justify-content: flex-end; }
}
@media (max-width: 340px) { .cc__dims { column-gap: 1rem; } .cc__dims .cc__sl { gap: .35rem; } }

/* Значение показателя — одной строкой; если не помещается, JS уменьшает только его */
.dossier__stats .stat { max-width: 100%; min-width: 0; }
.dossier__stats .stat b { white-space: nowrap; }

/* Значения показателей стоят на одной нижней линии, даже если одно из них (RAL) чуть мельче */
.dossier__stats { align-items: baseline; }
.dossier__stats .stat b { line-height: 1; }

/* Калькулятор (телефон): поле только под значение, рядом с подписью на обычном расстоянии; пары разнесены по ширине.
   Четыре колонки: подпись | поле | подпись | поле — в обеих строках всё стоит ровно */
@media (max-width: 699px) {
  .cc__dims { grid-template-columns: repeat(4, max-content); justify-content: space-between; column-gap: 0; row-gap: .25rem; align-items: end; }
  .cc__dims .cc__sl { display: contents; }
  .cc__dims .cc__num { justify-self: start; width: auto; margin-left: .6rem; justify-content: flex-start; }
  .cc__dims .cc__sl:nth-child(even) .cc__lab { margin-left: 1.25rem; }
  .cc__dims .cc__lab { align-self: end; }
}
@media (max-width: 340px) {
  .cc__dims .cc__num { margin-left: .35rem; }
  .cc__dims .cc__sl:nth-child(even) .cc__lab { margin-left: .5rem; }
}
/* Калькулятор (телефон): без растягивания — стандартные промежутки, как между табами */
@media (max-width: 699px) {
  .cc__dims { justify-content: start; }
  .cc__dims .cc__num { margin-left: .5rem; }
  .cc__dims .cc__sl:nth-child(even) .cc__lab { margin-left: 1.5rem; }
}
@media (max-width: 340px) {
  .cc__dims .cc__num { margin-left: .35rem; }
  .cc__dims .cc__sl:nth-child(even) .cc__lab { margin-left: .75rem; }
}
@media (max-width: 699px) { .cc__dims .cc__lab { justify-self: end; } }

/* От 600 px и до компьютерной раскладки: этапы по две карточки в строке, пятая (нечётная) — на всю ширину */
@media (min-width: 600px) and (max-width: 1000px) {
  .proc[data-mode="rows"] .proc__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proc[data-mode="rows"] .pcard { grid-column: auto; }
  .proc[data-mode="rows"] .pcard:nth-child(5) { grid-column: 1 / -1; }
}

/* Где хватает ширины: длина, ширина, высота — в первой строке, тираж — второй строкой в начале */
@media (min-width: 560px) and (max-width: 699px) {
  .cc__dims { grid-template-columns: repeat(6, max-content); }
  .cc__dims .cc__sl:nth-child(even) .cc__lab { margin-left: 0; }
  .cc__dims .cc__sl:nth-child(2) .cc__lab, .cc__dims .cc__sl:nth-child(3) .cc__lab { margin-left: 1.5rem; }
}
/* этапы в две колонки: между карточками обычный промежуток */
@media (min-width: 600px) and (max-width: 1000px) { .proc[data-mode="rows"] .proc__cards { column-gap: var(--gap); } }

/* От 600 px блоки «не всегда» и «когда да» стоят рядом, а не друг под другом */
@media (min-width: 600px) { .yesno { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Где позволяет ширина (от 640 px до компьютерной раскладки) показатели кейса — в одну строку, сколько бы их ни было */
@media (min-width: 640px) and (max-width: 1000px) {
  .dossier__stats { display: flex; flex-wrap: nowrap; justify-content: center; align-items: baseline; gap: .5rem 1rem; width: 100%; }
  .dossier__stats .stat { flex: 1 1 0; min-width: 0; }
  .dossier__stats .stat:nth-child(3) { grid-column: auto; }
}

/* Планшет (700–1000 px): заголовки разделов — в одну строку, общий размер для всех */

/* Планшет (700–1100 px): колесо превью кейсов рядом с деталью, как на телефоне */
@media (min-width: 700px) and (max-width: 1000px) {
  .dossier { grid-template-columns: minmax(0, 1fr) 4.5rem; column-gap: .5rem; }
  .dossier__stage { order: -1; grid-column: 1; }
  .dossier__thumbs { display: block; order: -1; grid-column: 2; align-self: stretch; contain: size; }
  .dossier__sheet { grid-column: 1 / -1; align-self: start; }
  .dossier__thumbs .thumb, .dossier__thumbs .thumb[aria-current="true"], .dossier__thumbs .thumb:hover { grid-template-columns: 1fr; justify-items: center; gap: 0; }
  .dossier__thumbs .thumb span { display: none; }
  .dossier__thumbs .thumb img { max-width: 70%; }
  .dossier__thumbs .thumb.thumb--far, .dossier__thumbs .thumb.thumb--far:hover { opacity: 0; pointer-events: none; }
  .dossier__thumbs { touch-action: none; }
}
/* Показатели кейса: обычный отступ сетки между ними, без растягивания на всю ширину */
@media (min-width: 640px) and (max-width: 1000px) {
  .dossier__stats { gap: .5rem 1rem; }
  .dossier__stats .stat { flex: 0 1 auto; }
}

/* Планшеты (700–1000 px): сетка в шесть колонок (в подсказке-сетке тоже) */
@media (min-width: 700px) and (max-width: 1000px) {
  .gridview__cols { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gridview__cols i:nth-child(n+7) { display: none; }
}
/* Контакты: от 600 px меню стоит рядом с блоками «на связи, почта, телефон, часы работы» */
@media (min-width: 600px) and (max-width: 1000px) {
  .order__info { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); grid-auto-flow: row; }
  .order__info > div { grid-column: 1; }
  .order__info > .order__menu { grid-column: 2; grid-row: 1 / span 4; align-content: start; }
}

/* Услуги на планшете: высота плитки по содержимому (без обрезки списка), плитки в строке одной высоты */
@media (min-width: 700px) and (max-width: 1399px) {
  .svc .svc__card .hud__in { height: auto; min-height: 0; }
  .svc .svc__card, .svc .svc__card .hud__in { align-self: stretch; }
}

/* «дней вместо недель» — в две строки на телефоне, чтобы не налезало на соседний показатель */
.stat-br { display: none; }
@media (max-width: 699px) { .stat-br { display: inline; } }

/* Услуги на планшете: описание и список видны всегда (наведения нет) */
@media (min-width: 700px) and (max-width: 1000px) {
  .svc .svc__card .hud__in { gap: 1rem; }
  .svc .svc__card { cursor: pointer; }
}
@media (min-width: 700px) and (max-width: 1399px) { .svc .svc__card .hud__in { aspect-ratio: auto; overflow: visible; } }
@media (min-width: 640px) and (max-width: 1000px) { .dossier__stats { column-gap: calc(var(--gap) + 1.25rem); } }

/* Планшет: описание открывается по тапу (одна карточка за раз), на карточке подсказка «подробнее +» */
@media (min-width: 700px) and (max-width: 1000px) {
  .svc .svc__card:not(.is-open) .svc__more { grid-template-rows: 0fr !important; opacity: 0 !important; transform: translateY(12px) !important; }
  .svc .svc__card.is-open .svc__more { grid-template-rows: 1fr !important; opacity: 1 !important; transform: none !important; }
  .svc .svc__body::after { content: "//подробнее +"; display: block; margin-top: .9rem; font: 600 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .02em; color: var(--orange); }
  .svc .svc__card.is-open .svc__body::after { content: "//свернуть \2212"; }
}

/* Планшет (700–1000 px): вопросы — слева три колонки из шести, блок с деталью — справа три колонки, помельче */
@media (min-width: 600px) and (max-width: 1000px) {
  .faq { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .faq__list { grid-column: 1 / 4; }
  .faq__aside { grid-column: 4 / 7; position: sticky !important; top: 5rem; align-self: start; }
  .faq__stage .viewer3d { width: 78%; }
  .faq__stage { aspect-ratio: auto; min-height: 15rem; }
}
@media (min-width: 700px) and (max-width: 1000px) { .faq__stage { min-height: 19rem; padding-top: 2.5rem; padding-bottom: 3rem; } .faq__stage .viewer3d { width: 70%; margin-inline: auto; } }

/* Планшет, услуги: раскрывается только нажатая карточка, соседняя в ряду остаётся свёрнутой; вместо «подробнее» — маленький плюс по центру у нижней границы */
@media (min-width: 700px) and (max-width: 1000px) {
  .svc { align-items: start; }
  .svc .svc__card { align-self: start; }
  .svc .svc__card .hud__in { position: relative; padding-bottom: calc(var(--card-pad) + 1.25rem); }
  .svc .svc__body::after, .svc .svc__card.is-open .svc__body::after {
    content: "+"; position: absolute; left: 50%; bottom: .4rem; transform: translateX(-50%); margin: 0;
    width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
    font: 500 1.5rem/1 var(--font-mono); letter-spacing: 0; text-transform: none; color: var(--orange); }
  .svc .svc__card.is-open .svc__body::after { content: "\2212"; }
}

/* Планшет: вопросы — на всю ширину, блок с деталью — под ними, справа на три колонки из шести */
@media (min-width: 600px) and (max-width: 1000px) {
  .faq__list { grid-column: 1 / -1; }
  .faq__aside { grid-column: 4 / 7; grid-row: 2; position: relative !important; top: auto; }
}
@media (min-width: 700px) and (max-width: 1000px) {
  .svc__col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; align-self: start; }
  .svc__col .svc__card { align-self: stretch; }
}

/* Планшет (700–1000 px): калькулятор — справа три колонки с полями, слева три колонки с деталью; поля как на телефоне */
@media (min-width: 700px) and (max-width: 1000px) {
  .cc { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; }
  .cc__stage-box { grid-column: 1 / 4; position: sticky; top: 5rem; align-self: start; }
  .cc__ctrl { grid-column: 4 / 7; }
  .cc__sl input[type=range] { display: none; }
  .cc__dims { display: grid; grid-template-columns: repeat(4, max-content); justify-content: start; column-gap: 0; row-gap: .25rem; align-items: end; }
  .cc__dims .cc__sl { display: contents; }
  .cc__dims .cc__lab { align-self: end; justify-self: end; line-height: 1; margin-bottom: calc(1.375rem - 3px); }
  .cc__dims .cc__num { justify-self: start; width: auto; margin-left: .5rem; justify-content: flex-start; }
  .cc__dims .cc__sl:nth-child(even) .cc__lab { margin-left: 1.5rem; }
}
@media (min-width: 700px) and (max-width: 1000px) {
  .cc__cap { text-align: center; line-height: 1.4; }
  .cc__cap .cc__sep { display: none; }
  .cc__cap .cc__size { display: block; color: var(--cream); }
}

/* Планшет, услуги: при раскрытии заголовок и значок остаются на месте — никакого «съезжания» вниз */
@media (min-width: 700px) and (max-width: 1000px) {
  .svc .svc__card .hud__in { justify-content: flex-start; }
  .svc__ico, .svc .svc__card:hover .svc__ico, .svc .svc__card:focus-within .svc__ico, .svc .svc__card.is-open .svc__ico {
    width: clamp(3.5rem, 2.6rem + 1.6vw, 5rem); transition: none; }
  .svc .svc__card .svc__body { transition: none; }
}

/* От 900 px карточки услуг — в два столбца, от 1200 px — в три */
@media (min-width: 900px) and (max-width: 1199px) { .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) and (max-width: 1399px) { .svc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* выше планшета: высота плиток — запас под раскрытое по наведению описание */
@media (min-width: 1001px) and (max-width: 1399px) { .svc .svc__card .hud__in { height: auto; min-height: clamp(22rem, 18rem + 8vw, 30rem); overflow: hidden; } }

/* Планшет (700–1100 px): колесо превью шире и картинки крупнее — места хватает */
@media (min-width: 700px) and (max-width: 1000px) {
  .dossier { grid-template-columns: minmax(0, 1fr) clamp(4.5rem, 10vw, 9rem); }
  .dossier__thumbs .thumb img { max-width: 92%; }
}

/* Компьютер, услуги: маленький плюс внизу по центру карточки — подсказка, что её можно раскрыть наведением; при наведении превращается в минус */
@media (min-width: 1001px) {
  .svc .svc__card .hud__in { position: relative; padding-bottom: calc(var(--card-pad) + 1.25rem); }
  .svc .svc__card .hud__in::after { content: "+"; position: absolute; left: 50%; bottom: .4rem; transform: translateX(-50%);
    width: 1.75rem; height: 1.75rem; display: grid; place-items: center; font: 500 1.5rem/1 var(--font-mono); color: var(--orange); pointer-events: none; }
  .svc .svc__card:hover .hud__in::after, .svc .svc__card:focus-within .hud__in::after { content: "\2212"; }
}
@media (min-width: 1400px) { .svc .svc__card .hud__in { height: calc(clamp(22.5rem, 18.4rem + 5vw, 26.5rem) + 6rem); } }

/* Список в карточке услуги — одним столбцом, строка под строкой, на любой ширине */
.svc__more ul { grid-template-columns: minmax(0, 1fr) !important; column-gap: 0 !important; }

/* От 900 до 1000 px подвал: текст над логотипом — слева на три колонки, документы, автор и копирайт — справа на три; логотип ниже на всю ширину */
@media (min-width: 900px) and (max-width: 1000px) {
  .foot__main { display: contents; }
  .foot__main .foot__about { grid-column: 1 / 7; grid-row: 1; max-width: none; align-self: end; }
  .foot__info { grid-column: 7 / 13; grid-row: 1; order: 0; align-self: end; }
  .foot__main .foot__logo { grid-column: 1 / -1; grid-row: 2; }
}

/* 1001–1200 px, первый экран: заголовок на всю ширину; под ним текст слева, а кнопки — справа в одну строку */
@media (min-width: 1001px) and (max-width: 1599px) {
  .hero__copy { grid-column: 1 / -1; }
  .hero__side { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .hero__side p { grid-column: 1 / 8; }
  .hero__ctas { grid-column: 8 / 13; justify-self: end; flex-wrap: nowrap; }
}

/* Логотип закреплён (вне потока), поэтому меню-столбик начинается ниже него — как раньше */
@media (min-width: 1001px) { .top .nav { margin-top: calc(2.25rem + clamp(1rem, .6rem + 1vw, 1.75rem)); } }

/* 1001–1200 px, этапы: без закрепления на экране; три карточки в первой строке, две — во второй (каждая на четыре колонки).
   В строке все карточки одной высоты по самому длинному тексту, пунктирная линия с подписью — на одном уровне */
@media (min-width: 1001px) and (max-width: 1200px) {
  .proc[data-mode="rows"] { height: auto !important; }
  .proc[data-mode="rows"] .proc__pin { position: relative !important; height: auto !important; padding-top: 0 !important; }
  .proc[data-mode="rows"] .proc__cards { position: relative !important; margin-top: 0 !important; height: auto !important; padding-top: 3.5rem !important; padding-bottom: 0 !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important; grid-template-rows: none !important; column-gap: var(--gap) !important; row-gap: var(--gap) !important; }
  .proc[data-mode="rows"] .pcard { grid-column: span 4 !important; grid-row: auto !important; margin-top: 0 !important; top: auto !important; height: auto !important; min-height: 0 !important;
    grid-template-rows: auto 1fr auto !important; }
  .proc[data-mode="rows"] .pcard:nth-child(4) { grid-column: 5 / 9 !important; }
  .proc[data-mode="rows"] .pcard:nth-child(5) { grid-column: 9 / 13 !important; }
}

/* 1001–1200 px: деталь-заготовка слева у калькулятора поменьше, чтобы целиком помещалась в свою область */


/* 1001–1200 px: подпись раздела («//калькулятор») занимает три колонки, поэтому заголовок сдвинут правее и она не обрезается;
   вводный текст занимает всю ширину своих колонок */
@media (min-width: 1001px) and (max-width: 1200px) {
  .head-row .title--r::before, .proc[data-mode="rows"] .proc__pin .title--r::before { width: 25%; }
  .head-row .lead, .head-row .title--r ~ .lead { max-width: none; }
}

/* Калькулятор: подписи «покрутите деталь…» и «габариты заготовки» ближе к детали — на 40 px */
.cc__stage .dossier__dim--t { top: calc(1.25rem + 40px); }
.cc__cap { bottom: calc(1.25rem + 40px); }

/* Заголовок вопросов — в две строки: заголовок шире */
@media (min-width: 1001px) { #faq .head-row .title--r { grid-column: 1 / 10; } }

/* Адрес почты, телефон и заголовок формы не переносятся по частям: одной строкой, размер подстраивается под ширину блока */
.order__info { container-type: inline-size; }
.order__big { white-space: nowrap; overflow-wrap: normal; font-size: var(--fs-sub); }


/* Компьютер (от 1001 px): карточки услуг фиксированной высоты; при наведении описание выезжает снизу поверх карточки — ничего вокруг не сдвигается, заголовок стоит на месте */
@media (min-width: 1001px) {
  .svc .svc__card .hud__in { justify-content: flex-start; gap: 1rem; height: clamp(22rem, 18rem + 8vw, 30rem); min-height: 0; overflow: hidden; }
  .svc .svc__card .svc__body { display: block; }
  .svc .svc__more, .svc .svc__card:hover .svc__more, .svc .svc__card:focus-within .svc__more { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: block;
    grid-template-rows: none; opacity: 1; padding: 1rem var(--card-pad) 2.75rem calc(var(--card-pad) + 0px); background: var(--panel-2);
    transform: translateY(102%); transition: transform .45s var(--ease); }
  .svc .svc__card:hover .svc__more, .svc .svc__card:focus-within .svc__more { transform: none; }
  .svc .svc__more > div { overflow: visible; }
  .svc .svc__card .hud__in::after { z-index: 3; }
}
@media (min-width: 1400px) { .svc .svc__card .hud__in { height: calc(clamp(22.5rem, 18.4rem + 5vw, 26.5rem) + 6rem); } }

/* Заголовки блоков («От заявки до готовой детали», «Узнайте примерную стоимость», заголовок формы) — одного размера на всех ширинах; не помещаются — переносятся на вторую строку */
h2.title, .proc[data-mode="rows"] .proc__pin .title, .order__h { font-size: var(--fs-h2) !important; }

/* Этапы: больше воздуха между заголовком и текстом */
.proc[data-mode="rows"] .pcard { row-gap: .85rem !important; }
.proc[data-mode="rows"] .pcard p { margin-top: .35rem; }

/* Подписи у заготовки (1001–1200 px): ближе к детали, но с запасом */
@media (min-width: 1001px) and (max-width: 1200px) {
  .cc__stage .dossier__dim--t { top: calc(50% - 15rem); }
  .cc__cap { bottom: calc(50% - 15rem); }
}

/* Услуги, 1001–1399 px: карточки выше, чтобы выезжающее описание не закрывало заголовок */
@media (min-width: 1001px) and (max-width: 1399px) { .svc .svc__card .hud__in { height: 35rem; } }

/* 1001–1200 px: колонка с контактами шире (четыре колонки), чтобы почта и телефон помещались в одну строку тем же размером */
@media (min-width: 1001px) and (max-width: 1200px) {
  .order__grid .order__form { grid-column: 1 / 9; }
  .order__info { grid-column: 9 / 13; }
}

/* Услуги, компьютер: выезжающее описание без отдельного фона; на 1001–1399 px высота карточки подбирается скриптом впритык */
@media (min-width: 1001px) { .svc .svc__more, .svc .svc__card:hover .svc__more, .svc .svc__card:focus-within .svc__more { background: none; } }
@media (min-width: 1001px) and (max-width: 1399px) { .svc .svc__card .hud__in { height: var(--svc-h, 35rem); } }

/* Работы: заголовок на 1001+ px шире — «Реальные задачи, реальные цифры» помещается в две строки без уменьшения шрифта */
@media (min-width: 1001px) { #cases .head-row .title--r { grid-column: 7 / 13; } }
@media (min-width: 1001px) and (max-width: 1200px) { .dossier__thumbs .thumb { grid-template-columns: 1fr; justify-items: center; } .dossier__thumbs .thumb span { display: none; } .dossier__thumbs .thumb img { max-width: 88%; } }

/* 1001–1200 px, кейсы: колесо превью поменьше (картинки мельче, видно по две детали вверх и вниз); показатели — два в строке, третий ниже */
@media (min-width: 1001px) and (max-width: 1200px) {
  .dossier__thumbs .thumb img { max-width: 74%; }
  .dossier__thumbs .thumb.thumb--far, .dossier__thumbs .thumb.thumb--far:hover { opacity: 0; pointer-events: none; }
  .dossier__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: .75rem .5rem; justify-items: center; }
  .dossier__stats .stat:nth-child(3) { grid-column: 1 / -1; }
  .dossier__stats .stat { padding: .25rem 0 !important; }
}

/* 1001–1200 px: активная деталь в колесе крупнее, соседние уменьшаются по мере удаления */
@media (min-width: 1001px) and (max-width: 1200px) {
  .dossier__thumbs .thumb img { max-width: 90%; }
  .dossier__thumbs .thumb, .dossier__thumbs .thumb[aria-current="true"], .dossier__thumbs .thumb:hover { transform: scale(calc(1.35 - min(var(--d, 0), 2) * .3)); transform-origin: center; }
}
@media (min-width: 1001px) and (max-width: 1200px) {
  .dossier__thumbs .thumb, .dossier__thumbs .thumb[aria-current="true"], .dossier__thumbs .thumb:hover { grid-template-columns: 1fr !important; justify-items: center; gap: 0 !important; }
}

/* Кейсы на компьютере: карточка с описанием — на половину экрана (шесть колонок), деталь — четыре, колесо — две */
@media (min-width: 1001px) {
  .dossier__sheet { grid-column: 1 / 7; }
  .dossier__stage { grid-column: 7 / 11; }
}
@media (min-width: 1001px) and (max-width: 1200px) { .dossier__thumbs .thumb img { max-width: 72%; } }

/* Работы: метка «//работы» над заголовком отдельной строкой — «Реальные задачи,» целиком в первой строке заголовка */
@media (min-width: 1001px) { #cases .head-row .title--r::before { display: block; width: auto; padding: 0 0 .6rem; } }

/* 1001–1200 px, кейсы: колесо превью — одна узкая колонка сетки, детальки мельче; деталь в центре занимает освободившееся место */
@media (min-width: 1001px) and (max-width: 1200px) {
  .dossier__stage { grid-column: 7 / 12; }
  .dossier__thumbs { grid-column: 12 / 13; }
  .dossier__thumbs .thumb img { max-width: 92%; }
  .dossier__thumbs .thumb, .dossier__thumbs .thumb[aria-current="true"], .dossier__thumbs .thumb:hover { transform: scale(calc(1.15 - min(var(--d, 0), 2) * .26)); }
}

/* Проявление карточек этапов: «включение» — карточка выезжает снизу, чуть увеличиваясь, из размытия и пересвета; ряды и карточки идут по очереди. На всех ширинах */
.proc[data-mode="rows"] .pcard { opacity: 0 !important; transform: translateY(56px) scale(.94) !important; filter: blur(7px) brightness(1.7);
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1), filter .9s cubic-bezier(.2, .8, .2, 1) !important; }
.proc[data-mode="rows"] .pcard.is-rev { opacity: 1 !important; transform: none !important; filter: none; }
.proc[data-mode="rows"] .pcard:nth-child(2) { transition-delay: .09s !important; }
.proc[data-mode="rows"] .pcard:nth-child(3) { transition-delay: .18s !important; }
.proc[data-mode="rows"] .pcard:nth-child(4) { transition-delay: .27s !important; }
.proc[data-mode="rows"] .pcard:nth-child(5) { transition-delay: .36s !important; }
@media (prefers-reduced-motion: reduce) { .proc[data-mode="rows"] .pcard { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } }

/* 1141–1200 px, кейсы: все значения в одну строку, размер цифр прежний */
@media (min-width: 1141px) and (max-width: 1200px) {
  .dossier__stats { display: flex; flex-wrap: nowrap; justify-content: center; align-items: baseline; gap: .5rem 1rem; width: 100%; }
  .dossier__stats .stat { flex: 0 1 auto; padding: .25rem 0 !important; }
}

/* 1201–1599 px, кейсы: как на 1001–1200 — деталь шире (пять колонок), колесо — узкая колонка, все показатели в одну строку без уменьшения */
@media (min-width: 1201px) and (max-width: 1599px) {
  .dossier__stage { grid-column: 7 / 12; }
  .dossier__thumbs { grid-column: 12 / 13; }
  .dossier__thumbs .thumb, .dossier__thumbs .thumb[aria-current="true"], .dossier__thumbs .thumb:hover { grid-template-columns: 1fr !important; justify-items: center; gap: 0 !important;
    transform: scale(calc(1.15 - min(var(--d, 0), 2) * .26)); }
  .dossier__thumbs .thumb span { display: none; }
  .dossier__thumbs .thumb img { max-width: 92%; }
  .dossier__thumbs .thumb.thumb--far, .dossier__thumbs .thumb.thumb--far:hover { opacity: 0; pointer-events: none; }
  .dossier__stats { display: flex; flex-wrap: nowrap; justify-content: center; align-items: baseline; gap: .5rem 1rem; width: 100%; }
  .dossier__stats .stat { flex: 0 1 auto; padding: .25rem 0 !important; }
}

/* Превью кейсов — только картинки, без подписей, на любой ширине */
.dossier__thumbs .thumb span { display: none !important; }
.dossier__thumbs .thumb, .dossier__thumbs .thumb[aria-current="true"], .dossier__thumbs .thumb:hover { grid-template-columns: 1fr !important; justify-items: center; gap: 0 !important; }

/* От 1201 px: подпись раздела («//калькулятор») не меньше 9,5 rem, чтобы между ней и заголовком был нормальный зазор */
@media (min-width: 1201px) { .head-row .title--r::before, .proc[data-mode="rows"] .proc__pin .title--r::before { width: max(16.66%, 9.5rem); } }


/* Услуги, от 700 px: название — внизу над плюсом; при наведении (ПК) или тапе (планшет) название и описание вместе выезжают снизу */
@media (min-width: 700px) {
  .svc .svc__card .hud__in { position: relative; overflow: hidden; justify-content: flex-start; height: var(--svc-h, 30rem) !important; min-height: 0 !important; }
  .svc .svc__card .svc__body { position: absolute; left: var(--card-pad); right: var(--card-pad); bottom: 2.75rem; display: block;
    transform: translateY(calc(100% - var(--h3h, 3rem))); transition: transform .5s var(--ease); }
  .svc .svc__card .svc__more, .svc .svc__card:hover .svc__more, .svc .svc__card:focus-within .svc__more, .svc .svc__card.is-open .svc__more, .svc .svc__card:not(.is-open) .svc__more {
    position: static !important; display: grid !important; grid-template-rows: 1fr !important; opacity: 1 !important; transform: none !important; padding: 0 !important; transition: none !important; background: none !important; }
  .svc .svc__body::after, .svc .svc__card.is-open .svc__body::after { content: none !important; }
  .svc .svc__card .hud__in::after { content: "+"; position: absolute; left: 50%; bottom: .4rem; transform: translateX(-50%); z-index: 3; width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
    font: 500 1.5rem/1 var(--font-mono); color: var(--orange); pointer-events: none; }
  .svc .svc__card.is-open .hud__in::after { content: "\2212"; }
}
@media (min-width: 1001px) {
  .svc .svc__card:hover .svc__body, .svc .svc__card:focus-within .svc__body { transform: none; }
  .svc .svc__card:hover .hud__in::after, .svc .svc__card:focus-within .hud__in::after { content: "\2212"; }
}
@media (min-width: 700px) and (max-width: 1000px) {
  .svc .svc__card.is-open .svc__body { transform: none; }
}
@media (min-width: 700px) {
  .svc .svc__card .svc__body { clip-path: inset(0 0 calc(100% - var(--h3h, 3rem)) 0); transition: transform .5s var(--ease), clip-path .5s var(--ease); }
}
@media (min-width: 1001px) { .svc .svc__card:hover .svc__body, .svc .svc__card:focus-within .svc__body { clip-path: inset(0 0 0 0); } }
@media (min-width: 700px) and (max-width: 1000px) { .svc .svc__card.is-open .svc__body { clip-path: inset(0 0 0 0); } }

/* Сетка-подсказка отключена */
.gridview, .gridview__btn { display: none !important; }

/* Подвал: блок «компания» и «связь»; весь служебный текст и цифры — одним приглушённым цветом */
.foot__co { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.foot__co .label { display: block; margin-bottom: .35rem; }
.foot__co p, .foot__co a { font: 400 var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--grey); text-decoration: none; }
.foot__co a:hover { color: var(--orange); }
.foot__copy, .foot__copy * { color: var(--grey); }
@media (max-width: 699px) { .foot__co { grid-template-columns: 1fr; } }

/* Показатели кейса в две строки: плашки первой строки ближе друг к другу (колонки по содержимому, обычный промежуток).
   Только там, где они реально в сетке 2+1 (до 1140px) — на более широких экранах плашки в один ряд (flex),
   и этот увеличенный column-gap туда проникать не должен, иначе расстояние между ними становится слишком большим. */
@media (max-width: 1140px) {
  .dossier__stats, #caseStage[data-case="0"] .dossier__stats { grid-template-columns: repeat(2, max-content) !important; justify-content: center; column-gap: calc(var(--gap) + 1rem) !important; }
  .dossier__stats .stat:nth-child(3) { justify-self: center; }
}

/* Калькулятор: подписи вокруг детали — на 20 px от неё; сама деталь не меняется */
.cc__stage .dossier__dim--t { top: auto !important; bottom: calc(50% + var(--part-r, 9rem) + 20px) !important; }
.cc__stage .cc__cap { top: calc(50% + var(--part-r, 9rem) + 20px) !important; bottom: auto !important; }

/* «//честно» — на таком же расстоянии от заголовка, как оранжевые метки над остальными заголовками */
#honest > .label { margin-bottom: clamp(1rem, .6rem + 1.2vw, 1.75rem); }

/* Широкоформатные экраны (от 1921 px, например 2560): весь интерфейс пропорционально крупнее — масштаб идёт от размера rem */
@media (min-width: 1921px) {
  html { font-size: calc(100vw / 120); }
  :root { --wrap: 112.5rem; }
}

/* Кейс с «RAL 7035»: на телефонах показатели друг под другом (две строки), значение не уменьшается */
@media (max-width: 639px) {
  #caseStage[data-case="3"] .dossier__stats { grid-template-columns: max-content !important; row-gap: .75rem; }
  #caseStage[data-case="3"] .dossier__stats .stat { justify-self: center; }
}

/* Меню-бургер: внизу кнопки для связи (без текста о компании) */
.mmenu__cta { margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding-bottom: 1.5rem; }
.mmenu a.btn { display: inline-flex; justify-content: center; padding: .85rem .5rem; font: 700 var(--fs-label)/1.2 var(--font-mono); text-transform: uppercase; background-image: none; }
.mmenu a.btn:hover, .mmenu a.btn:active { padding-left: .5rem; }
@media (max-width: 380px) { .mmenu__cta { grid-template-columns: 1fr; } }

.mmenu a.btn { background: var(--panel-2); color: var(--cream); }
.mmenu a.btn.btn--o { background: var(--orange); color: var(--bg); }

/* До 360 px: если показателей два — они друг под другом (две строки), чтобы подписи не обрезались */
@media (max-width: 360px) {
  .dossier__stats:has(.stat:nth-child(2):last-child) { grid-template-columns: max-content !important; row-gap: .75rem; }
  .dossier__stats:has(.stat:nth-child(2):last-child) .stat { justify-self: center; }
}

/* Калькулятор: отступ от текста до блока с деталью и от блока с деталью до панели с полями — одинаковый, общий отступ сайта (как от заголовка до элементов) */
@media (max-width: 1000px) {
  .cc { row-gap: clamp(1.75rem, 1rem + 2.5vw, 4rem); }
  .cc__stage-box { margin: 0; }
}

/* «Не нашли ответ?» на 600–1000 px: у детали больше воздуха — подписи не прижимаются к ней */
@media (min-width: 600px) and (max-width: 1000px) {
  .faq__stage { min-height: 22rem; padding-top: 3.5rem; padding-bottom: 4rem; }
  .faq__stage .viewer3d { width: 72%; }
  .faq__aside .label { margin-top: .5rem; }
}

/* От 600 px плашка с характеристиками тоже показывается: справа снизу от детали, по диагонали от «идёт печать» */
@media (min-width: 600px) and (max-width: 1000px) { .hero__spec { display: block; text-align: right; } }

/* Показатели кейса: где по ширине умещаются все плашки в одну строку без переноса шрифта — показываем их в одну строку (а не 2+1) */
@media (min-width: 1600px) {
  .dossier__stats { flex-wrap: nowrap; justify-content: center; }
}

/* Консультация: кремовая плитка — фон задаём с повышенной специфичностью, иначе его перебивают «стеклянные» правила .hud:not(…) выше */
.svc article.hud.svc__card.svc__card--accent, .svc article.hud.svc__card.svc__card--accent:hover, .svc article.hud.svc__card.svc__card--accent:focus-within { background: var(--cream) !important; -webkit-backdrop-filter: none; backdrop-filter: none; --fill: var(--cream); }
.svc article.hud.svc__card--accent::before { background: none !important; }
.svc .svc__card--accent .bk .cf { fill: var(--bg); }
.svc .svc__card--accent .bk .bgf { fill: var(--cream); }

/* Этапы от 1201 px: без закрепления на экране — все карточки появились, и страница едет дальше. Раскладка в 4 колонки «вразнобой» сохраняется;
   под подзаголовком — заметный отступ до карточек */
@media (min-width: 1201px) {
  .proc[data-mode="rows"] { height: auto !important; padding-bottom: 0; }
  .proc[data-mode="rows"] .proc__pin { position: relative !important; height: auto !important; padding-top: 0 !important; }
  .proc[data-mode="rows"] .proc__cards { position: relative !important; margin-top: 0 !important; height: auto !important; padding-top: 4rem !important; padding-bottom: 0 !important;
    grid-template-rows: auto auto !important; pointer-events: auto !important; }
  .proc[data-mode="rows"] .pcard { height: auto !important; min-height: 19rem; top: auto !important; }
}

/* Колесо превью на телефоне/планшете: соседние детали мелкие и размытые (размытие из базовых правил), плавность — за счёт короткого перехода */
.dossier__thumbs .thumb { will-change: transform, opacity; backface-visibility: hidden; }
@media (hover: none), (max-width: 1000px) {
  .dossier__thumbs .thumb, .dossier__thumbs .thumb[aria-current="true"], .dossier__thumbs .thumb:hover {
    transition: opacity .35s ease, filter .35s ease, transform .4s cubic-bezier(.2, .7, .2, 1); }
  .wheel__track { transition-duration: .42s; }
}

/* Индикатор раскрытия в плитках услуг: тот же оранжевый плюс, который плавно превращается в минус (вертикальная чёрточка схлопывается).
   На телефоне карточки открыты сразу — значка нет */
@property --pm-v { syntax: '<length>'; inherits: false; initial-value: 14px; }
.svc .svc__card .hud__in::after, .svc .svc__card:hover .hud__in::after, .svc .svc__card:focus-within .hud__in::after, .svc .svc__card.is-open .hud__in::after {
  content: "" !important; display: block; width: 1.75rem; height: 1.75rem; font-size: 0; border: 0; box-shadow: none; animation: none;
  --pm-v: 14px;
  background-image: linear-gradient(var(--orange), var(--orange)), linear-gradient(var(--orange), var(--orange));
  background-size: 14px 2px, 2px var(--pm-v); background-position: center; background-repeat: no-repeat; background-color: transparent;
  transition: --pm-v .35s var(--ease);
}
.svc .svc__card:hover .hud__in::after, .svc .svc__card:focus-within .hud__in::after, .svc .svc__card.is-open .hud__in::after { --pm-v: 0px; }
@media (prefers-reduced-motion: reduce) { .svc .svc__card .hud__in::after { transition: none !important; } }
@media (max-width: 699px) { .svc .svc__card .hud__in::after { display: none !important; } }

/* Калькулятор: пока 3D-заготовка ещё грузится (на телефоне это долго), подписи стоят у краёв блока, а не «от размера детали» — иначе уезжают за границы и габаритов не видно */
.cc__stage:not(.is-3d) .cc__cap { top: auto !important; bottom: 1rem !important; }
.cc__stage:not(.is-3d) .dossier__dim--t { bottom: auto !important; top: 1rem !important; }

/* Этапы: в тёмных карточках (01 и 04), где номер оранжевый, заголовок тоже оранжевый */
.proc .pcard--dark h3 { color: var(--orange); }

/* Футер на телефоне: сетка как на главном экране — полоса внизу, линии расходятся от центра симметрично (одна линия точно по центру),
   вдали поперечные линии густеют и растворяются, как у пола в первом экране */
@media (max-width: 1000px) {
  .foot__floor { top: auto; bottom: 0; height: 24rem; perspective: 360px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 45%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 45%, #000 100%); }
  .foot__floor::before { left: -80%; right: -80%; bottom: -30%; transform: rotateX(72deg);
    background: linear-gradient(90deg, rgba(238, 229, 213, 0.24) 1px, transparent 1px) calc(50% + 24px) 0 / 48px 48px, linear-gradient(rgba(238, 229, 213, 0.24) 1px, transparent 1px) 0 0 / 48px 48px; }
}

/* Safari на iPhone сам превращает цифровые строки (ИНН и т. п.) в «телефонные ссылки» и перекрашивает их — оставляем цвет текста */
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit !important; }