/* ============================================================================
   КУЛЬМАН — оформление витрины.
   Кульман — чертёжная доска с пантографом. Отсюда весь язык: тонкие линии,
   миллиметровая сетка, засечки, размерные выноски. Никаких внешних ресурсов:
   шрифты системные, а единственные картинки — наши же чертежи из примера
   (assets/example/*.svg, их пишет scripts/site-example.py), с того же
   домена. Движение подчинено prefers-reduced-motion.
   ============================================================================ */

:root{
  color-scheme: light dark;
  --nav-h:66px;   /* высота шапки: к ней прилипает строка шагов формы */

  /* поверхности и чернила */
  --bg:#EFF1ED; --bg-2:#E6E9E3; --surface:#FFFFFF; --sunken:#E2E6DF;
  --ink:#121814; --ink-2:#39423B; --muted:#6B746C;
  --line:#D2D8CF; --line-2:#B7BFB4; --hair:#C7CFC3;

  /* акцент: графитовая бирюза кульмана и сигнальная охра */
  --accent:#125E5F; --accent-2:#1B8385; --accent-soft:#D9E7E4;
  --signal:#B4602A; --signal-soft:#F2E3D6;
  --ok:#3B7346; --warn:#8E6320; --bad:#B93B2C;

  /* шрифты только системные */
  --f-display:"Barlow Condensed","Roboto Condensed","Arial Narrow","Avenir Next Condensed",
              "Bahnschrift SemiCondensed",
              "Helvetica Neue",system-ui,sans-serif;
  --f-text:"Source Serif 4",ui-serif,Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,"PT Mono","DejaVu Sans Mono","Liberation Mono",monospace;

  --r:14px; --r-s:10px;
  --shadow:0 1px 2px rgba(18,24,20,.04), 0 12px 32px -18px rgba(18,24,20,.28);
  --shadow-lift:0 2px 4px rgba(18,24,20,.06), 0 26px 50px -22px rgba(18,24,20,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1200px;
}

@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1211; --bg-2:#141A18; --surface:#171E1B; --sunken:#0A0E0D;
  --ink:#E9EDE8; --ink-2:#B4BEB6; --muted:#818C84;
  --line:#242D28; --line-2:#3A453E; --hair:#232C27;
  --accent:#54B0AF; --accent-2:#79C9C6; --accent-soft:#12302F;
  --signal:#D6873F; --signal-soft:#2C1E12;
  --ok:#6BA772; --warn:#C1974C; --bad:#DD7566;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -18px rgba(0,0,0,.8);
  --shadow-lift:0 2px 6px rgba(0,0,0,.55), 0 28px 56px -22px rgba(0,0,0,.9);
}}
:root[data-theme="dark"]{
  --bg:#0E1211; --bg-2:#141A18; --surface:#171E1B; --sunken:#0A0E0D;
  --ink:#E9EDE8; --ink-2:#B4BEB6; --muted:#818C84;
  --line:#242D28; --line-2:#3A453E; --hair:#232C27;
  --accent:#54B0AF; --accent-2:#79C9C6; --accent-soft:#12302F;
  --signal:#D6873F; --signal-soft:#2C1E12;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-text); font-size:17.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* миллиметровка кульмана: почти незаметная сетка на всём полотне */
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--hair) 32%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--hair) 32%, transparent) 1px, transparent 1px);
  background-size:96px 96px;
  background-position:-1px -1px;
}

h1,h2,h3,h4,.cond,button,label,legend,th,.btn{font-family:var(--f-display)}
h1,h2,h3{margin:0;letter-spacing:-.015em;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit}
::selection{background:var(--accent-soft);color:var(--ink)}

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--accent-2); outline-offset:3px; border-radius:4px;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:820px}

/* ---------------------------------------------------------------- шапка */
nav.top{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.4) blur(14px);
  background:color-mix(in oklab, var(--bg) 94%, transparent);
  border-bottom:1px solid var(--line);
}
nav.top .wrap{display:flex;align-items:center;gap:26px;height:var(--nav-h)}
.mark{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--f-display);font-weight:700;font-size:21px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  margin-right:auto;
}
.mark .logo{width:27px;height:27px;flex:none;overflow:visible}
.mark .logo .lg-t{stroke:var(--accent);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.mark .logo .lg-p{fill:var(--accent)}
.mark .logo .lg-a{stroke:var(--signal);stroke-width:1.4;fill:none;stroke-linecap:round;
  transform-origin:12px 17px;transition:transform .5s var(--ease)}
.mark:hover .logo .lg-a{transform:rotate(-8deg)}
footer .fmark .logo{width:26px;height:26px}
footer .fmark .logo .lg-t{stroke:var(--accent);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
footer .fmark .logo .lg-p{fill:var(--accent)}
footer .fmark .logo .lg-a{stroke:var(--signal);stroke-width:1.4;fill:none;stroke-linecap:round}
nav.top a:not(.mark):not(.btn){
  font-family:var(--f-display);font-size:16px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  position:relative;padding:4px 0;transition:color .2s;white-space:nowrap;
}
nav.top a:not(.mark):not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
nav.top a:not(.mark):not(.btn):hover{color:var(--ink)}
nav.top a:not(.mark):not(.btn):hover::after{transform:scaleX(1)}
@media (max-width:1150px){nav.top a:not(.mark):not(.btn){display:none}}
@media (max-width:560px){
  :root{--nav-h:60px}
  nav.top .wrap{gap:12px}
  .mark{font-size:18px;letter-spacing:.04em}
  nav.top .btn.sp{padding:9px 15px;font-size:13.5px}
  .hero{padding:64px 0 56px}
  section{padding:62px 0}
}

/* ---------------------------------------------------------------- кнопки */
.btn{
  --b:var(--accent);
  display:inline-flex;align-items:center;gap:10px;
  font-size:17px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;
  padding:13px 26px;border-radius:999px;border:1px solid var(--b);
  background:var(--b);color:#fff;text-decoration:none;cursor:pointer;
  white-space:nowrap;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background .2s, color .2s;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.22) 50%,transparent 80%);
  transform:translateX(-120%);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn:hover::before{animation:sheen .8s var(--ease)}
.btn:active{transform:translateY(0)}
@keyframes sheen{to{transform:translateX(120%)}}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn.sp{padding:10px 20px;font-size:15px}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ---------------------------------------------------------------- герой */
.hero{position:relative;padding:96px 0 72px;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-40% -20% auto;height:120%;
  background:radial-gradient(60% 50% at 20% 20%, var(--accent-soft), transparent 70%),
             radial-gradient(45% 40% at 85% 10%, var(--signal-soft), transparent 70%);
  opacity:.75;z-index:-1;
  animation:drift 26s var(--ease) infinite alternate;
}
@keyframes drift{to{transform:translate3d(-3%,2%,0) scale(1.06)}}
.eyebrow{
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin:0 0 20px;
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:36px;height:1px;background:var(--accent)}
h1{
  font-size:clamp(44px,7vw,92px);line-height:.98;font-weight:700;
  letter-spacing:-.028em;margin:0 0 26px;text-transform:uppercase;
  /* «Й» и «Ё» выносят диакритику за строку — без запаса она лезет на надзаголовок */
  padding-top:.06em;
}
h1 em{font-style:normal;color:var(--accent);position:relative}
h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.08em;height:.06em;
  background:var(--signal);transform:scaleX(0);transform-origin:left;
  animation:underline 1.1s .5s var(--ease) forwards;
}
@keyframes underline{to{transform:scaleX(1)}}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);max-width:58ch;margin:0 0 30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* бегущая строка норм */
.ticker{
  margin-top:56px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:11px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker ul{display:flex;gap:44px;margin:0;padding:0;list-style:none;width:max-content;
  animation:slide 42s linear infinite}
.ticker li{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;
  color:var(--muted);white-space:nowrap}
.ticker li b{color:var(--accent);font-weight:500}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------------------------------------------------------------- секции */
section{padding:84px 0;border-top:1px solid var(--line);position:relative;
  scroll-margin-top:74px}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:16px}
.sec-no{font-family:var(--f-mono);font-size:13px;color:var(--signal);
  letter-spacing:.14em;padding-top:6px}
h2{font-size:clamp(30px,4.4vw,52px);line-height:1.02;text-transform:uppercase;
  font-weight:700;letter-spacing:-.02em}
.sec-sub{color:var(--ink-2);max-width:66ch;margin:0 0 40px;font-size:18px}
h3{font-size:21px;text-transform:uppercase;letter-spacing:.01em;margin-bottom:8px}

/* ---------------------------------------------------------------- сетки */
/* четыре шага — 4, 2 или 1 в ряд: при auto-fit четвёртый оставался один */
.steps{display:grid;gap:18px;grid-template-columns:1fr;counter-reset:s}
@media (min-width:600px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px 26px;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--line-2)}
.step b{counter-increment:s;font-family:var(--f-mono);font-size:30px;color:var(--accent-soft);
  display:block;line-height:1;margin-bottom:14px}
.step b::before{content:"0" counter(s)}
.step p{margin:0;color:var(--ink-2);font-size:16px}

.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;position:relative;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.card::after{
  content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  border:1px solid transparent;transition:border-color .3s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.card:hover::after{border-color:color-mix(in oklab,var(--accent) 45%,transparent)}
.card .meta{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;
  color:var(--signal);margin:0 0 14px;text-transform:uppercase}
.card ul{margin:0;padding-left:18px;color:var(--ink-2);font-size:16px}
.card li{margin:5px 0}
.card p{margin:0;color:var(--ink-2);font-size:16px}

/* цифры */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media (min-width:1000px){.stats{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:560px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* линии сетки — тенью вправо и вниз: у крайних ячеек уходят под рамку,
   а пустой хвост последнего ряда не превращается в серую заплатку */
.stat{background:var(--surface);padding:22px 20px;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}
.stat-k{font-family:var(--f-display);font-size:13.5px;line-height:1.3;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px;min-height:2.6em}
.stat-v{font-family:var(--f-mono);font-size:29px;color:var(--ink);margin:0;
  font-variant-numeric:tabular-nums}
.stat-v small{font-size:14px;color:var(--muted)}

/* таблица */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:620px}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:16px}
th{font-family:var(--f-display);font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);background:var(--bg-2)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .2s}
tbody tr:hover{background:var(--bg-2)}

/* подвал */
footer{border-top:1px solid var(--line);padding:56px 0 72px;color:var(--muted);font-size:15px}
footer a{color:var(--ink-2)}
footer .fmark{display:flex;align-items:center;gap:10px;margin-bottom:18px;
  font-family:var(--f-display);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);font-size:19px}


/* ------------------------------------------------------------- появление */
.rise{opacity:0;transform:translateY(22px)}
.rise.seen{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
@supports (animation-timeline: view()){
  .rise{opacity:1;transform:none;animation:rise linear both;
        animation-timeline:view();animation-range:entry 5% cover 26%}
  @keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion: reduce){
  .rise,.rise.seen{opacity:1!important;transform:none!important;animation:none!important}
  .hero::before,.ticker ul,h1 em::after{animation:none!important}
  .btn:hover{transform:none}
  .step:hover,.card:hover{transform:none}
}

/* ============================================================ КОНФИГУРАТОР */
.formwrap{max-width:900px;margin:0 auto;padding:0 24px}

/* каркас: форма слева, ориентир справа */
.cfg-page{max-width:1180px;margin:0 auto;padding:38px 24px 70px}
.cfg-head{max-width:760px;margin-bottom:26px}
.cfg-head h1{font-size:clamp(34px,5.4vw,60px);margin-bottom:16px}
.cfg{display:grid;gap:40px;align-items:start}
@media (min-width:1100px){.cfg{grid-template-columns:minmax(0,1fr) 320px;gap:48px}}
.cfg-main{min-width:0;max-width:850px}

/* шаги: на компьютере — кнопки с номерами, на телефоне — одна строка */
.stepbar{position:sticky;top:var(--nav-h);z-index:40;background:color-mix(in oklab,var(--bg) 94%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding:12px 0 10px;margin-bottom:30px}
.stepbar ol{display:flex;gap:4px;list-style:none;margin:0 0 10px;padding:0;flex-wrap:wrap}
.stepbar li button{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;
  border:1px solid transparent;border-radius:999px;background:none;cursor:pointer;
  font-family:var(--f-display);font-size:14.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);transition:background .2s,color .2s,border-color .2s}
.stepbar li button i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  font-style:normal;font-family:var(--f-mono);font-size:12px;letter-spacing:0;
  border:1px solid var(--line-2);color:var(--muted);transition:all .2s}
.stepbar li button:hover{color:var(--ink);background:color-mix(in oklab,var(--surface) 70%,transparent)}
.stepbar li.passed button{color:var(--ink-2)}
.stepbar li.passed button i{background:var(--accent-soft);border-color:var(--accent-soft);color:transparent;position:relative}
.stepbar li.passed button i::after{content:"";position:absolute;width:9px;height:5px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg) translate(1px,-1px)}
.stepbar li button[aria-current="step"]{color:var(--accent);border-color:var(--line);background:var(--surface)}
.stepbar li button[aria-current="step"] i{background:var(--accent);border-color:var(--accent);color:#fff}
.stepbar-row{display:none;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;
  font-family:var(--f-display);font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.est-mini{font-family:var(--f-mono);font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--ink-2);
  white-space:nowrap}
#stepnow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:440px){.est-mini .n{display:none}}
@media (max-width:760px){
  .stepbar ol{display:none}
  .stepbar-row{display:flex}
  .stepbar{padding:10px 0 8px;margin-bottom:22px}
}
.progress{height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .5s var(--ease)}

fieldset{border:none;padding:0;margin:0 0 30px}
fieldset[hidden]{display:none}
legend{font-size:clamp(26px,3.4vw,38px);text-transform:uppercase;font-weight:700;
  letter-spacing:-.015em;padding:0;margin-bottom:6px;color:var(--ink)}
.legend-sub{color:var(--muted);margin:0 0 26px;font-size:16.5px}
fieldset .subhead{font-size:17px;margin:40px 0 6px;padding-top:28px;border-top:1px solid var(--line)}

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.field{display:flex;flex-direction:column;gap:7px}
.field.wide{grid-column:1/-1}
.field label{font-size:14.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.field label .req{color:var(--signal)}
.field .hint{font-size:14px;color:var(--muted);font-family:var(--f-text);
  text-transform:none;letter-spacing:0;line-height:1.45}
input[type=text],input[type=number],input[type=email],select,textarea{
  font-family:var(--f-text);font-size:16.5px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-s);
  padding:12px 14px;width:100%;transition:border-color .2s,box-shadow .2s,background .2s;
}
input:hover,select:hover,textarea:hover{border-color:var(--line-2)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 16%,transparent);
}
input[aria-invalid="true"],textarea[aria-invalid="true"]{
  border-color:var(--bad);box-shadow:0 0 0 4px color-mix(in oklab,var(--bad) 14%,transparent)}
textarea{min-height:190px;resize:vertical;line-height:1.55}
textarea.short{min-height:96px}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 51%, calc(100% - 13px) 51%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}

/* фишки вместо галочек */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chips label{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--f-text);font-size:15.5px;text-transform:none;letter-spacing:0;
  padding:9px 15px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--surface);color:var(--ink-2);user-select:none;
  transition:all .2s var(--ease);
}
.chips label::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--line-2);
  transition:all .2s var(--ease);
}
.chips label:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-1px)}
.chips input:checked+label{
  border-color:var(--accent);background:var(--accent-soft);color:var(--ink);font-weight:600}
.chips input:checked+label::before{background:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 22%,transparent)}
.chips input:focus-visible+label{outline:2px solid var(--accent-2);outline-offset:3px}

.consent{display:flex;gap:12px;align-items:flex-start;background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-top:12px}
.consent input{margin-top:4px;accent-color:var(--accent);width:18px;height:18px;flex:none}
.consent label{font-family:var(--f-text);font-size:15px;text-transform:none;
  letter-spacing:0;color:var(--ink-2);line-height:1.5}

.navrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding-top:8px;border-top:1px solid var(--line);margin-top:8px}
.navrow .spacer{margin-left:auto}
#status{min-height:22px;font-size:15px;font-family:var(--f-text)}
#status.err{color:var(--bad)} #status.ok{color:var(--ok)}

/* сводка перед отправкой */
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:6px 24px;margin-bottom:22px}
.rv-group{padding:16px 0;border-bottom:1px solid var(--line)}
.rv-group:last-child{border-bottom:none}
.rv-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.rv-head b{font-family:var(--f-display);font-size:17px;letter-spacing:.04em;text-transform:uppercase}
.rv-head button,.draft-note button{border:none;background:none;padding:0;cursor:pointer;color:var(--accent);
  font-family:var(--f-text);font-size:15px;text-decoration:underline;text-underline-offset:3px}
.review dd.wide{grid-column:1/-1;white-space:pre-wrap}
.review dl{display:grid;grid-template-columns:minmax(130px,auto) 1fr;gap:7px 20px;margin:0}
@media (max-width:560px){.review dl{grid-template-columns:1fr;gap:2px}.review dd{margin-bottom:8px}}
.review dt{font-family:var(--f-display);font-size:13.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.review dd{margin:0;color:var(--ink)}
.review .empty{color:var(--muted)}

/* готово */
.done{text-align:center;padding:40px 0 20px}
.done .lede{margin:12px auto 0;max-width:52ch}
.next-steps{counter-reset:n;list-style:none;margin:34px auto 0;padding:0;max-width:640px;text-align:left;
  display:grid;gap:12px}
.next-steps li{counter-increment:n;position:relative;padding:16px 18px 16px 58px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);color:var(--ink-2);font-size:16px}
.next-steps li::before{content:counter(n);position:absolute;left:16px;top:15px;width:28px;height:28px;
  border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);
  font-family:var(--f-mono);font-size:13px}
.next-steps b{color:var(--ink)}
.done-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.cfg.sent{grid-template-columns:1fr}
.done .tick{width:74px;height:74px;margin:0 auto 22px;border-radius:50%;
  border:2px solid var(--accent);display:grid;place-items:center}
.done .tick svg{width:34px;height:34px;stroke:var(--accent);stroke-width:2.4;fill:none;
  stroke-dasharray:40;stroke-dashoffset:40;animation:draw .6s .15s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.done .num{font-family:var(--f-mono);font-size:32px;color:var(--accent);margin:10px 0 0}
@media (prefers-reduced-motion: reduce){.done .tick svg{animation:none;stroke-dashoffset:0}}


/* ============================================================ ЧЕРТЕЖИ НА ВИТРИНЕ
   Лендинг продаёт чертежи — значит, показывает их. Картинки — листы
   из альбома-примера, как есть, без обработки. */
.hero-grid{display:grid;gap:40px;align-items:center}
@media (min-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:48px}
  .hero .lede{max-width:52ch}
  /* в две колонки заголовок уже: «Дом, который» должен встать одной строкой */
  .hero h1{font-size:clamp(44px,5.5vw,80px)}
}
.hero-fig,.sheet-card{display:block;position:relative;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.hero-fig:hover,.sheet-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);
  border-color:var(--line-2)}
.hero-fig img,.sheet-card img{display:block;width:100%;height:auto;max-width:100%}
.hero-fig img{padding:6px 6px 0}
.fig-cap{display:flex;gap:10px;align-items:baseline;padding:11px 16px 12px;
  border-top:1px solid var(--line);font-family:var(--f-display);font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fig-cap b{font-family:var(--f-mono);font-weight:500;color:var(--accent);letter-spacing:.04em}

.stats{margin-bottom:28px}
.sheets{display:grid;gap:18px;margin:0 0 30px;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.sheet-card{display:flex;flex-direction:column}
.sheet-card img{aspect-ratio:4/3;object-fit:contain;padding:10px;background:var(--surface)}
.sheet-card .fig-cap{margin-top:auto}

/* вопросы — раскрывающимся списком */
.faq{max-width:860px;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:18px;padding:20px 2px;font-family:var(--f-display);font-weight:700;
  font-size:clamp(18px,2vw,21px);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:0 0 12px;height:12px;margin-right:6px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s var(--ease)}
.qa[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.qa summary:hover{color:var(--accent)}
.qa summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.qa p{margin:0 0 22px;color:var(--ink-2);max-width:70ch}
@media (prefers-reduced-motion: reduce){.hero-fig:hover,.sheet-card:hover{transform:none}}


/* ============================================================ ДВИЖЕНИЕ И СВЕТ
   Витрина должна производить впечатление, но не кричать: всё движение —
   про чертёж (линии тянутся, слои переключаются, лист наклоняется под рукой),
   а не ради движения. Под prefers-reduced-motion всё стоит на месте.
   Слой лежит поверх базовых правил выше и переопределяет их. */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{
  --l-el:#C0561E; --l-lt:#9A7A12; --l-vk:#1D6FA8; --l-ov:#C2410C; --l-ve:#2C7A5B;
  --glow:color-mix(in oklab,var(--accent) 38%,transparent);
  --shadow-deep:0 2px 6px rgba(18,24,20,.06),0 40px 90px -40px rgba(18,24,20,.45),
                0 30px 70px -45px var(--glow);
  interpolate-size:allow-keywords;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --l-el:#E68A54; --l-lt:#D6B44A; --l-vk:#61AEDD; --l-ov:#E8834E; --l-ve:#63BE97;
  --shadow-deep:0 2px 8px rgba(0,0,0,.5),0 40px 90px -40px rgba(0,0,0,.9),
                0 30px 80px -40px var(--glow);
}}
:root[data-theme="dark"]{
  --l-el:#E68A54; --l-lt:#D6B44A; --l-vk:#61AEDD; --l-ov:#E8834E; --l-ve:#63BE97;
  --shadow-deep:0 2px 8px rgba(0,0,0,.5),0 40px 90px -40px rgba(0,0,0,.9),
                0 30px 80px -40px var(--glow);
}

/* ---- шапка: стекло, тень после первого экрана, полоса прочитанного */
nav.top{transition:box-shadow .3s var(--ease),background .3s}
nav.top.scrolled{background:color-mix(in oklab,var(--bg) 78%,transparent);
  box-shadow:0 14px 34px -24px rgba(18,24,20,.45)}
.readbar{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--accent),var(--accent-2) 60%,var(--signal));
  transform-origin:left;transform:scaleX(0)}

/* ---- кнопки: мягкое свечение и стрелка */
.btn{box-shadow:0 14px 34px -16px var(--glow)}
.btn.ghost{box-shadow:none}
.btn .arr{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.magnet{transition:transform .35s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s}

/* ---- первый экран: сияние, чертёжная сетка, заголовок строками */
.hero{isolation:isolate;padding:104px 0 64px}
.hero::before{display:none}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,color-mix(in oklab,var(--accent) 16%,transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in oklab,var(--accent) 16%,transparent) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(60% 70% at 72% 40%,#000,transparent 75%);
          mask-image:radial-gradient(60% 70% at 72% 40%,#000,transparent 75%);
  opacity:.55}
.aurora{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;
  animation:aurora 22s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:46vw;height:46vw;left:-12vw;top:-18vw;background:var(--accent-soft)}
.aurora i:nth-child(2){width:36vw;height:36vw;right:-6vw;top:-4vw;
  background:color-mix(in oklab,var(--accent-2) 42%,transparent);animation-duration:26s;animation-delay:-8s}
.aurora i:nth-child(3){width:30vw;height:30vw;left:38vw;bottom:-16vw;background:var(--signal-soft);
  animation-duration:30s;animation-delay:-14s}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4vw,3vw,0) scale(1.12)}
  100%{transform:translate3d(-3vw,5vw,0) scale(.94)}}

.split .ln{display:block;overflow:hidden;padding-top:.14em;margin-top:-.14em;padding-bottom:.05em}
.split .ln>span{display:inline-block}
/* Текст первого экрана виден сразу: на медленном телефоне анимация
   с прозрачности 0 выглядела как недогруженная страница — полторы секунды
   пустой сетки. Движется только заголовок (коротко) и чертёж справа. */
@media (prefers-reduced-motion: no-preference){
  .js .split .ln>span{transform:translateY(108%);animation:lineUp .6s var(--ease) forwards}
  .js .split .ln:nth-child(2)>span{animation-delay:.06s}
  .js .split .ln:nth-child(3)>span{animation-delay:.12s}
  .js .hero .lede,.js .hero-cta{animation:nudgeUp .6s var(--ease) both}
  .js .hero-stage{opacity:0;animation:stageIn 1.2s .2s var(--ease) forwards}
}
@keyframes nudgeUp{from{transform:translateY(10px)}to{transform:none}}
@keyframes lineUp{to{transform:none}}
@keyframes stageIn{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
h1 em::after{animation-delay:1.1s}

/* ---- сцена с чертежом: лист, блик, плашки вокруг */
.hero-stage{position:relative;perspective:1200px}
.hero-fig,.layer-sheet,.sheet-card,.wd-sheet{border-radius:18px;box-shadow:var(--shadow-deep)}
.tilt{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;will-change:transform;
  transition:transform .6s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.tilt:hover{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);
  transition:transform .15s linear,box-shadow .4s var(--ease),border-color .3s}
.glare{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;
  background:radial-gradient(520px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),transparent 45%);
  mix-blend-mode:soft-light;transition:opacity .35s}
.tilt:hover .glare{opacity:1}
.ex-axon,.ex-eng{padding:10px 10px 0}
.ex-axon svg,.ex-eng svg{display:block;width:100%;height:auto}
.js .ex-axon svg{opacity:0;animation:axFallback 0s 3.5s forwards}
.ax-ready .ex-axon svg{opacity:1;animation:none}
@keyframes axFallback{to{opacity:1}}

.chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;font-family:var(--f-mono);font-size:12px;
  letter-spacing:.06em;color:var(--ink-2);white-space:nowrap;
  background:color-mix(in oklab,var(--surface) 78%,transparent);
  border:1px solid color-mix(in oklab,var(--line-2) 70%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 12px 30px -16px rgba(18,24,20,.35);animation:bob 7s ease-in-out infinite}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--accent);position:relative}
.chip i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--accent);
  animation:ping 2.4s ease-out infinite}
.chip.c1{top:-18px;left:-26px}
.chip.c2{right:-26px;top:34%;animation-delay:-2.3s}
.chip.c2 i{background:var(--signal)} .chip.c2 i::after{border-color:var(--signal)}
.chip.c3{bottom:-44px;right:9%;animation-delay:-4.6s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.2);opacity:0}}
@media (max-width:1100px){.chip.c2{right:-8px}.chip.c1{left:-8px}}
@media (max-width:700px){.chip{display:none}}

/* ---- карточки: свет под курсором и светящаяся кромка */
.card,.step,.plan-card{
  background:radial-gradient(420px circle at var(--mx,-600px) var(--my,-600px),
             color-mix(in oklab,var(--accent) 8%,transparent),transparent 62%),var(--surface)}
.card::before,.step::before,.plan-card::before{content:"";position:absolute;inset:0;
  border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx,-600px) var(--my,-600px),
             var(--accent-2),transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.card:hover::before,.step:hover::before,.plan-card:hover::before{opacity:1}
.step b{background:linear-gradient(135deg,var(--accent),var(--signal));
  -webkit-background-clip:text;background-clip:text;color:transparent;opacity:.55;
  transition:opacity .3s}
.step:hover b{opacity:1}

/* ---- цифры примера */
.stat-v{background:linear-gradient(180deg,var(--ink) 30%,var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat-v small{-webkit-text-fill-color:var(--muted)}

/* ---- слои инженерии */
.layers{background:linear-gradient(180deg,transparent,color-mix(in oklab,var(--accent-soft) 45%,transparent) 30%,transparent)}
.layers-grid{display:grid;gap:34px;align-items:center}
@media (min-width:1000px){
  .layers-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
  /* лист высокий: список слоёв едет рядом, пока лист на экране */
  .laylist{position:sticky;top:110px}
}
.laylist{display:flex;flex-direction:column;gap:8px}
.laylist [data-l=all]{--c:var(--accent)} .laylist [data-l=el]{--c:var(--l-el)}
.laylist [data-l=lt]{--c:var(--l-lt)} .laylist [data-l=vk]{--c:var(--l-vk)}
.laylist [data-l=ov]{--c:var(--l-ov)} .laylist [data-l=ve]{--c:var(--l-ve)}
.laylist button{position:relative;overflow:hidden;text-align:left;cursor:pointer;
  display:grid;gap:2px;padding:14px 18px 14px 22px;border-radius:14px;
  background:transparent;border:1px solid transparent;color:var(--ink-2);
  transition:background .3s,border-color .3s,transform .3s var(--ease),box-shadow .3s}
.laylist button::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:3px;background:var(--c);opacity:.35;transition:opacity .3s,top .3s,bottom .3s}
.laylist button b{font-family:var(--f-display);font-size:19px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink)}
.laylist button span{font-family:var(--f-text);font-size:15px;color:var(--muted)}
.laylist button:hover{background:color-mix(in oklab,var(--surface) 70%,transparent)}
.laylist button[aria-pressed=true]{background:var(--surface);border-color:var(--line);
  box-shadow:0 18px 40px -26px rgba(18,24,20,.45);transform:translateX(6px)}
.laylist button[aria-pressed=true]::before{opacity:1;top:10px;bottom:10px}
.laylist button[aria-pressed=true] b{color:var(--c)}
.laylist .tick{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--c);
  transform-origin:left;transform:scaleX(0)}
.laylist button.run .tick{animation:tickRun 2.8s linear forwards}
@keyframes tickRun{to{transform:scaleX(1)}}
.layer-sheet{display:block;position:relative;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);overflow:hidden}
.layer-sheet .laynow{font-style:normal;color:var(--ink-2)}
@media (max-width:999px){
  .laylist{flex-direction:row;overflow-x:auto;scrollbar-width:none;margin:0 -24px;padding:4px 24px 10px}
  .laylist::-webkit-scrollbar{display:none}
  .laylist button{flex:none;padding:10px 16px 12px 18px}
  .laylist button span{display:none}
  .laylist button b{font-size:16px}
  .laylist button[aria-pressed=true]{transform:none}
}

/* ---- листы примера */
.sheet-card img{transition:transform .8s var(--ease)}
.sheet-card:hover img{transform:scale(1.045)}

/* ---- цены карточками */
.plans{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));margin-bottom:8px}
.plan-card{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px 26px;
  overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.plan-card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--signal));
  transform:scaleX(.18);transform-origin:left;transition:transform .6s var(--ease)}
.plan-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-deep)}
.plan-card:hover::after{transform:scaleX(1)}
.plan-card h3{font-size:22px;margin:0 0 18px}
.pc-price{margin:0 0 10px;font-family:var(--f-display);font-size:clamp(44px,4.6vw,60px);line-height:1;
  letter-spacing:-.02em;color:var(--ink)}
.pc-price b{font-weight:700;background:linear-gradient(180deg,var(--ink) 35%,var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.pc-days{display:inline-block;margin:0 0 16px;padding:4px 12px;border-radius:999px;
  font-family:var(--f-display);font-size:14px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent);background:color-mix(in oklab,var(--accent-soft) 70%,transparent)}
.pc-what{margin:0;color:var(--ink-2);font-size:16px}

/* ---- вопросы раскрываются плавно там, где браузер это умеет */
.qa::details-content{height:0;overflow:clip;
  transition:height .4s var(--ease),content-visibility .4s allow-discrete}
.qa[open]::details-content{height:auto}
.qa{transition:background .3s}
.qa[open]{background:linear-gradient(90deg,color-mix(in oklab,var(--accent-soft) 55%,transparent),transparent 70%)}

/* ---- финальный призыв: тёмная полоса с бегущей кромкой */
.cta{border-top:none}
.cta-band{position:relative;isolation:isolate;overflow:hidden;border-radius:30px;text-align:center;
  padding:clamp(56px,8vw,96px) clamp(22px,5vw,64px);color:#E9EDE8;
  background:radial-gradient(70% 90% at 15% 0%,rgba(84,176,175,.35),transparent 60%),
             radial-gradient(60% 80% at 100% 100%,rgba(214,135,63,.28),transparent 60%),#0E1614;
  box-shadow:0 50px 120px -50px rgba(18,94,95,.65)}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--a),transparent 0 62%,#79C9C6 75%,#D6873F 85%,transparent 95%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:spin 7s linear infinite}
@keyframes spin{to{--a:360deg}}
.cta-lines{position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(to right,rgba(121,201,198,.12) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(121,201,198,.12) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(70% 80% at 50% 50%,#000,transparent);
          mask-image:radial-gradient(70% 80% at 50% 50%,#000,transparent);
  animation:gridDrift 30s linear infinite}
@keyframes gridDrift{to{background-position:32px 32px,32px 32px}}
.cta-band h2{color:#F2F5F1;font-size:clamp(34px,5.2vw,64px)}
.cta-band .lede{color:#B4BEB6;margin:16px auto 30px}
.cta-band .btn{--b:#54B0AF;color:#0B1413;box-shadow:0 18px 50px -14px rgba(84,176,175,.7)}

@media (prefers-reduced-motion: reduce){
  .aurora i,.chip,.chip i::after,.cta-band::before,.cta-lines{animation:none!important}
  h1 em::after{transform:none}
  .tilt,.tilt:hover,.plan-card:hover,.laylist button[aria-pressed=true]{transform:none!important}
  .sheet-card:hover img{transform:none}
  .qa::details-content{transition:none}
}


/* ============================================================ КОНФИГУРАТОР: ПОМОЩНИКИ */
/* ориентир по составу — справа на компьютере, на шаге «Проверка» на телефоне */
.estimate{position:sticky;top:96px;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:24px 24px 20px;box-shadow:var(--shadow-deep)}
.est-k{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal);margin:0 0 8px}
.estimate h3{font-size:24px;margin:0 0 10px}
.est-price{display:flex;align-items:baseline;gap:12px;margin:0 0 16px}
.est-price b{font-family:var(--f-display);font-size:44px;line-height:1;font-weight:700;
  background:linear-gradient(180deg,var(--ink) 35%,var(--accent));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.est-price span{font-family:var(--f-display);font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);padding:4px 10px;border-radius:999px;background:color-mix(in oklab,var(--accent-soft) 70%,transparent)}
.est-list{list-style:none;margin:0 0 14px;padding:12px 0 0;border-top:1px solid var(--line);display:grid;gap:7px}
.est-list li{display:grid;grid-template-columns:92px 1fr;gap:8px;font-size:14.5px;color:var(--ink-2)}
.est-list b{font-family:var(--f-display);font-weight:500;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.est-why{font-size:14.5px;color:var(--ink-2);margin:0 0 12px}
.est-note{font-size:13.5px;color:var(--muted);margin:0;line-height:1.5}
.est-inline{display:none}
@media (max-width:1099px){
  .estimate{display:none}
  .est-inline{display:block;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
    border-radius:var(--r);padding:16px 18px;margin-bottom:18px}
  .est-inline p{margin:0 0 4px}
}

/* черновик */
.draft-note{font-size:15px;color:var(--ink-2);background:var(--bg-2);border:1px dashed var(--line-2);
  border-radius:var(--r-s);padding:10px 14px;margin:0 0 22px}

/* выбор из двух — сегментами */
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg label{cursor:pointer;padding:11px 16px;border:1px solid var(--line-2);border-radius:var(--r-s);
  background:var(--surface);font-family:var(--f-text);font-size:15.5px;text-transform:none;letter-spacing:0;
  color:var(--ink-2);transition:all .2s var(--ease)}
.seg input:checked+label{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--accent)}
.seg input:focus-visible+label{outline:2px solid var(--accent-2);outline-offset:3px}

/* числа кнопками */
.stepper{display:flex;align-items:stretch;border:1px solid var(--line-2);border-radius:var(--r-s);
  background:var(--surface);overflow:hidden}
.stepper input{border:none;border-radius:0;text-align:center;-moz-appearance:textfield;min-width:0}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper input:focus{box-shadow:none}
.stepper:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 16%,transparent)}
.stepper button{flex:none;width:48px;border:none;background:var(--bg-2);color:var(--ink);font-size:20px;
  cursor:pointer;transition:background .2s}
.stepper button:hover{background:var(--accent-soft);color:var(--accent)}

/* пожелания: подробность и вопросы */
.meter{height:4px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:2px}
.meter i{display:block;height:100%;width:0;border-radius:4px;transition:width .4s var(--ease),background .4s}
.meter i.lo{background:var(--signal)} .meter i.mid{background:var(--accent-2)} .meter i.hi{background:var(--ok)}
.prompts{margin-top:10px;display:grid;gap:8px}
.prompt-list{display:flex;flex-wrap:wrap;gap:8px}
.prompt-list button{cursor:pointer;padding:8px 14px;border-radius:999px;border:1px dashed var(--line-2);
  background:transparent;color:var(--ink-2);font-family:var(--f-text);font-size:14.5px;
  transition:all .2s var(--ease)}
.prompt-list button:hover{border-style:solid;border-color:var(--accent);color:var(--accent)}
.prompt-list button.used{opacity:.5}

/* ошибки и предупреждения у самого поля */
.err-msg{font-size:14px;color:var(--bad);font-family:var(--f-text)}
.hint.warn{color:var(--warn)}


/* ============================================================ ВЫ ПИШЕТЕ — МЫ ЧЕРТИМ */
.wish-demo{border-top:none}
.wd-grid{display:grid;gap:34px;align-items:center}
@media (min-width:1000px){.wd-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px}}
.wd-list{display:grid;gap:12px}
.wd-item{position:relative;overflow:hidden;display:grid;gap:8px;text-align:left;cursor:pointer;
  padding:20px 22px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.wd-item q{font-family:var(--f-text);font-size:clamp(18px,1.7vw,21px);line-height:1.35;color:var(--ink);
  quotes:"«" "»"}
.wd-item span{font-family:var(--f-text);font-size:15px;line-height:1.5;color:var(--muted);padding-left:22px;position:relative}
.wd-item span::before{content:"→";position:absolute;left:0;color:var(--accent)}
.wd-item[aria-pressed=true]{border-color:var(--accent);box-shadow:var(--shadow-deep);transform:translateX(6px)}
.wd-item[aria-pressed=true] span{color:var(--ink-2)}
.wd-item .tick{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--accent);
  transform-origin:left;transform:scaleX(0)}
.wd-item.run .tick{animation:tickRun 4.2s linear forwards}
.wd-sheet{display:block;position:relative;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--line);overflow:hidden}
.wd-sheet .wd-now{font-style:normal;color:var(--ink-2)}
.wish-axon .ax-bld{transition:opacity .6s var(--ease),filter .6s var(--ease)}
.wish-axon[data-on] .ax-bld{opacity:.28;filter:saturate(.4)}
.wish-axon[data-on=garage] .ax-b-garage,.wish-axon[data-on=banya] .ax-b-banya,
.wish-axon[data-on=house] .ax-b-house{opacity:1;filter:drop-shadow(0 0 .6px var(--accent))}
.wish-axon[data-on=garage] .ax-b-garage .ax-roof,.wish-axon[data-on=banya] .ax-b-banya .ax-roof,
.wish-axon[data-on=house] .ax-b-house .ax-roof{fill:var(--accent-soft);stroke:var(--accent)}
@media (max-width:999px){.wd-item[aria-pressed=true]{transform:none}}

/* цены: что входит */
.pc-list{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:8px}
.pc-list li{position:relative;padding-left:26px;font-size:15px;color:var(--ink-2);line-height:1.45}
.pc-list li::before{content:"";position:absolute;left:2px;top:.42em;width:10px;height:5px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.pc-list li.inc{color:var(--ink);font-weight:600}

/* кнопка на телефоне */
.mcta{display:none}
@media (max-width:760px){
  .mcta{display:flex;justify-content:space-between;align-items:center;gap:12px;position:fixed;z-index:60;
    left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));padding:14px 20px;border-radius:999px;
    background:var(--accent);color:#fff;text-decoration:none;font-family:var(--f-display);font-weight:600;
    font-size:17px;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 18px 40px -14px var(--glow);
    transform:translateY(160%);transition:transform .45s var(--ease)}
  .mcta span{font-family:var(--f-mono);font-weight:500;font-size:14px;text-transform:none;letter-spacing:0;opacity:.9}
  .mcta.on{transform:none}
  footer{padding-bottom:110px}
}
@media (prefers-reduced-motion: reduce){.mcta{transition:none}.wd-item[aria-pressed=true]{transform:none}}

/* приём заявок: очередь или пауза */
.intake-note{display:block;margin:0 0 22px;padding:12px 16px 12px 44px;position:relative;border-radius:var(--r-s);
  font-family:var(--f-text);font-size:15.5px;line-height:1.5;color:var(--ink);
  background:var(--signal-soft);border:1px solid color-mix(in oklab,var(--signal) 40%,transparent)}
.intake-note::before{content:"";position:absolute;left:16px;top:16px;width:12px;height:12px;border-radius:50%;
  background:var(--signal);box-shadow:0 0 0 4px color-mix(in oklab,var(--signal) 22%,transparent)}
.intake-note.queue{background:color-mix(in oklab,var(--accent-soft) 80%,transparent);
  border-color:color-mix(in oklab,var(--accent) 35%,transparent)}
.intake-note.queue::before{background:var(--accent);box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 22%,transparent)}