/* Азбука Фундамента Дома — слой оформления 12.10.2026.
   Типографика, чертёжные паттерны, motion, кнопки. Ложится поверх существующих стилей. */
:root{
  --e-forest:#173d32;--e-forest-2:#1f5240;--e-olive:#939c59;--e-olive-d:#788453;--e-lime:#e6eca8;
  --e-paper:#f4f4ef;--e-sage:#a7b89a;--e-line:#cbd2c5;--e-muted:#53665b;--e-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Типографика ---------- */
body{font-feature-settings:"kern","liga","calt";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{text-wrap:balance;letter-spacing:-.018em}
h1{line-height:1.02}
h2{line-height:1.06}
h3{line-height:1.18}
p,li,figcaption,dd{text-wrap:pretty;hyphens:manual}
h2 em,h1 em{font-style:normal}
.eyebrow{letter-spacing:.14em;font-size:max(12px,.74rem);font-weight:600}
.eyebrow::before{content:"";display:inline-block;width:22px;height:1px;background:currentColor;vertical-align:middle;margin-right:10px;opacity:.6;transform-origin:left;transition:transform .7s var(--e-ease)}
small,.note,.d-note{line-height:1.5}
table,dl,.d-price,.result-total{font-variant-numeric:tabular-nums lining-nums}
:focus-visible{outline:3px solid var(--e-olive);outline-offset:3px;border-radius:4px}

/* ---------- Прогресс прокрутки ---------- */
.e-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:9999;pointer-events:none;background:transparent}
.e-progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--e-olive),var(--e-lime));transform:scaleX(0);transform-origin:left}

/* ---------- Кнопки: заливка, стрелка, магнит ---------- */
.button,.d-button{position:relative;isolation:isolate;overflow:hidden;transition:transform .35s var(--e-ease),box-shadow .35s var(--e-ease),color .3s,border-color .3s}
.button::before,.d-button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--e-forest-2);transform:translateX(-102%);transition:transform .5s var(--e-ease)}
.button.outline::before,.button.r-action:not(.r-strong)::before{background:var(--e-lime)}
.button.lime::before{background:#fff}
.button:hover::before,.button:focus-visible::before,.d-button:hover::before{transform:translateX(0)}
.button.outline:hover,.button.r-action:not(.r-strong):hover{color:var(--e-forest);border-color:var(--e-forest)}
.button b,.button>span:last-child{transition:transform .35s var(--e-ease)}
.button:hover b{transform:translate(4px,-4px)}
.button:active{transform:scale(.985)}
.button[data-magnet]{will-change:transform}

/* ---------- Чертёжный язык: метки, размерные линии ---------- */
.e-dim{display:block;height:14px;margin:18px 0 0;max-width:min(520px,70%);position:relative;color:var(--e-olive-d)}
.e-dim::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;opacity:.55}
.e-dim::after{content:"";position:absolute;left:0;top:0;bottom:0;width:100%;background:
  linear-gradient(currentColor,currentColor) left/1px 100% no-repeat,
  linear-gradient(currentColor,currentColor) right/1px 100% no-repeat;opacity:.7}
.e-corners{position:relative}
.e-corners::before,.e-corners::after{content:"";position:absolute;width:16px;height:16px;border:0 solid var(--e-olive);opacity:.85;transition:transform .5s var(--e-ease),opacity .4s;pointer-events:none}
.e-corners::before{top:10px;left:10px;border-width:1px 0 0 1px}
.e-corners::after{right:10px;bottom:10px;border-width:0 1px 1px 0}
.e-corners:hover::before{transform:translate(-3px,-3px)}
.e-corners:hover::after{transform:translate(3px,3px)}

/* ---------- Блок «Два способа» ---------- */
.m-methods{position:relative;width:min(1296px,calc(100% - 32px));max-width:none;padding-inline:0}
.m-methods::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:
  url(assets/doma-pattern-plan-grid.svg) right top/min(720px,70vw) auto no-repeat,
  linear-gradient(180deg,rgba(231,236,213,.0),rgba(231,236,213,.55) 30%,rgba(231,236,213,.0));opacity:.9}
.m-card{position:relative;overflow:hidden;background:#fbfbf7;border:1px solid var(--e-line);box-shadow:0 1px 0 rgba(23,61,50,.04),0 24px 48px -32px rgba(23,61,50,.35);transition:transform .5s var(--e-ease),box-shadow .5s var(--e-ease),border-color .4s}
.m-card:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgba(23,61,50,.04),0 34px 60px -30px rgba(23,61,50,.45);border-color:var(--e-olive)}
.m-card.m-module{background:radial-gradient(120% 90% at 100% 0,#245c49 0,var(--e-forest) 55%);}
.m-card.m-module:hover{border-color:var(--e-lime)}
.m-art{display:block;width:100%;height:auto;max-height:150px;margin:-4px 0 6px;color:var(--e-olive-d)}
.m-module .m-art{color:var(--e-lime)}
.m-art *{vector-effect:non-scaling-stroke}
.m-art .ln{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.m-art .th{stroke-width:2.2}
.m-art .dsh{stroke-dasharray:4 5;opacity:.7}
.m-art .fl{fill:currentColor;opacity:.12;stroke:none}
.m-note{border-radius:0 12px 12px 0;box-shadow:inset 0 0 0 1px rgba(147,156,89,.25)}
.m-actions .button{min-width:min(100%,300px)}

/* ---------- Блок «Как мы вас ведём» ---------- */
.m-path{position:relative;width:min(1296px,calc(100% - 32px));margin:0 auto;padding:clamp(40px,6vw,80px) 0}
.m-path .m-head{max-width:720px;margin-bottom:34px}
.m-path h2{font-size:clamp(28px,4vw,48px);margin:8px 0 12px;color:var(--e-forest)}
.m-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative;counter-reset:s}
.m-steps::before{content:"";position:absolute;left:28px;right:28px;top:27px;height:2px;background:linear-gradient(90deg,var(--e-olive) 0 var(--p,0%),var(--e-line) var(--p,0%) 100%);z-index:0;border-radius:2px}
.m-step{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;padding-top:0}
.m-step .n{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--e-paper);border:2px solid var(--e-olive);color:var(--e-forest);font-weight:600;font-size:18px;transition:background .4s,color .4s,transform .5s var(--e-ease)}
.m-step:hover .n{background:var(--e-forest);color:var(--e-lime);transform:scale(1.06)}
.m-step h3{font-size:clamp(19px,1.7vw,23px);margin:6px 0 0;color:var(--e-forest)}
.m-step p{margin:0;color:var(--e-muted);line-height:1.5;font-size:15.5px}
.m-path .m-actions{margin-top:30px}
@media (max-width:900px){
  .m-steps{grid-template-columns:1fr;gap:6px}
  .m-steps::before{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto;background:linear-gradient(180deg,var(--e-olive) 0 var(--p,0%),var(--e-line) var(--p,0%) 100%)}
  .m-step{display:grid;grid-template-columns:56px 1fr;column-gap:16px;padding-bottom:18px}
  .m-step .n{grid-row:1/3}
  .m-step h3{margin-top:4px}
}

/* ---------- Липкая кнопка на телефоне ---------- */
.e-sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:900;display:none;transform:translateY(140%);transition:transform .45s var(--e-ease)}
.e-sticky.on{transform:none}
.e-sticky a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-radius:12px;background:var(--e-forest);color:#fff;text-decoration:none;font-weight:600;box-shadow:0 14px 34px -10px rgba(23,61,50,.65)}
.e-sticky a b{color:var(--e-lime)}
@media (max-width:760px){.e-sticky{display:block}.motion-toggle{bottom:76px!important}}

/* ---------- Появление: только когда JS жив ---------- */
@media (prefers-reduced-motion:no-preference){
  html.e-js:not(.motion-paused) [data-e]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--e-ease),transform .8s var(--e-ease);transition-delay:calc(var(--i,0)*70ms)}
  html.e-js:not(.motion-paused) [data-e].e-in{opacity:1;transform:none}
  html.e-js:not(.motion-paused) .e-img{clip-path:inset(0 0 12% 0 round 6px);transform:scale(1.05);transition:clip-path 1s var(--e-ease),transform 1.2s var(--e-ease)}
  html.e-js:not(.motion-paused) .e-img.e-in{clip-path:inset(0 0 0 0 round 0);transform:none}
  /* заголовок героя по словам */
  .e-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
  .e-w>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--e-ease);transition-delay:calc(var(--i,0)*80ms + 120ms)}
  html.e-ready .e-w>span{transform:none}
  /* чертёж рисуется */
  .m-art .ln{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset 1.6s var(--e-ease)}
  .m-art .dsh{stroke-dasharray:4 5;stroke-dashoffset:0;opacity:0;transition:opacity .9s .9s}
  .m-card.e-in .m-art .ln{stroke-dashoffset:0}
  .m-card.e-in .m-art .dsh{opacity:.7}
  .e-dim{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e-ease)}
  .e-dim.e-in{transform:none}
  .eyebrow:not(.e-in)::before{transform:scaleX(0)}
  .m-art .mv{transition:transform 1.4s .5s var(--e-ease)}
  .m-card:not(.e-in) .m-art .mv-l{transform:translateX(-18px)}
  .m-card:not(.e-in) .m-art .mv-r{transform:translateX(18px)}
}
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after{animation:none!important;transition-duration:.001ms!important;transition-delay:0s!important}
@media (prefers-reduced-motion:reduce){.e-progress{display:none}.e-sticky{transition:none}}

/* ---------- Квиз: мягкая смена шагов ---------- */
@keyframes e-panel{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  #d-quiz .d-panel.e-step,.quiz-panel.e-step{animation:e-panel .55s var(--e-ease) both}
  .d-progress span,.progress span{transition:width .6s var(--e-ease)}
}
.d-progress span{background:linear-gradient(90deg,var(--e-olive),var(--e-lime))}
.d-eyebrow{letter-spacing:.14em}

/* ---------- Печать ---------- */
@media print{.e-progress,.e-sticky,.e-dim{display:none!important}[data-e]{opacity:1!important;transform:none!important}}

/* ---------- Правки после просмотра ---------- */
.m-methods .m-head,.m-path .m-head{max-width:980px}
.m-methods .m-lead,.m-path .m-lead{max-width:62ch}
.m-note{max-width:none}

/* ---------- Правки по критике Замеса (12.10.2026) ---------- */
/* кнопки в карточке гида: не растягивать по высоте */
.r-actions{align-items:start}
.r-actions .button{display:flex;align-items:center;justify-content:space-between;min-height:54px;height:auto;align-self:start}
/* футер: тёмный, чтобы белый логотип читался */
footer:not(.d-footer){background:var(--e-forest);color:#f4f4ef;max-width:none;margin:0;padding-inline:max(5vw,calc((100% - 1296px)/2))}
footer:not(.d-footer) a,footer:not(.d-footer) p,footer:not(.d-footer) span{color:#f4f4ef}
footer:not(.d-footer) small{color:#bac9bc;border-top-color:rgba(255,255,255,.18)}
footer:not(.d-footer) .logo{mix-blend-mode:normal}
/* мелкий текст читаемее */
figcaption,.r-material-copy>small,footer small,.d-footer small{font-size:12.5px;line-height:1.5}
.r-material-copy>small{color:#3f5247}
/* скошенные превью моделей читались как ошибка кропа */
.model-card img{clip-path:none!important;border-radius:6px}
/* мобильный первый экран: три кнопки не одинаковые и ближе друг к другу */
@media (max-width:760px){
  .r-hero-actions{gap:10px}
  .r-hero-actions .r-action{min-height:52px;padding:14px 16px}
  .hero .r-hero-actions .r-action:not(:first-child){background:transparent;color:var(--e-forest);border:1px solid rgba(23,61,50,.45);box-shadow:none}
  .hero .r-hero-actions .r-action:not(:first-child)::before{background:var(--e-lime)}
}
/* квиз: тот же вес шрифта, что на сайте; легенда шагов */
.e-quiz h1,.e-quiz h2,.e-quiz h3{font-weight:400}
.e-quiz .d-eyebrow{font-weight:600}
.e-legend{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:4px;max-width:340px;position:relative}
.e-legend::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:1px;background:var(--e-line)}
.e-legend li{position:relative;display:flex;align-items:center;gap:14px;padding:8px 0;color:var(--e-muted);font-size:16px;transition:color .3s}
.e-legend li span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--e-paper);border:1.5px solid var(--e-line);font-size:14px;font-weight:600;color:var(--e-muted);transition:all .35s var(--e-ease);z-index:1}
.e-legend li.done span{border-color:var(--e-olive);color:var(--e-forest)}
.e-legend li.on{color:var(--e-forest);font-weight:600}
.e-legend li.on span{background:var(--e-forest);border-color:var(--e-forest);color:var(--e-lime)}

/* ---------- Второй проход ---------- */
.r-actions .button.r-action{flex-direction:row!important;align-items:center!important;justify-content:space-between}
body.e-quiz h1,body.e-quiz h2,body.e-quiz h3{font-weight:400!important}
@media (max-width:760px){
  .r-route-buttons{display:grid;gap:10px}
  .r-route-buttons .button{margin-top:0;min-height:52px;padding:14px 18px}
  .r-route-buttons .button:not(:first-child){background:transparent;color:var(--e-forest);border:1px solid rgba(23,61,50,.45);box-shadow:none}
  .r-route-buttons .button:not(:first-child)::before{background:var(--e-lime)}
}

/* меню: пункт «Модульные дома» не должен ломать шапку на средних экранах */
@media (min-width:761px){
  #nav a,.header-cta{white-space:nowrap}
  #nav{gap:clamp(10px,1.3vw,24px)}
}
@media (min-width:761px) and (max-width:1240px){
  #nav a{font-size:14px}
  .header-cta{font-size:14px}
}
@media (min-width:761px) and (max-width:900px){
  #nav{gap:8px}
  #nav a,.header-cta{font-size:12.5px}
  header .logo{width:140px}
}