@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 900;font-display:swap;src:url("/fonts/golos-text-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 900;font-display:swap;src:url("/fonts/golos-text-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --paper:#f3efe8;
  --band:#ebe5dc;
  --sheet:#fffdfa;
  --ink:#1d1a17;
  --ink-2:#554d45;
  --ink-3:#857b70;
  --line:#e0d8cd;
  --line-2:#cdc2b4;
  --focus:#2f5bd3;
  --max:linear-gradient(100deg,#0a7cfe 0%,#6651ff 55%,#ad3ffa 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.5 "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{width:min(1180px,calc(100% - 48px));margin-inline:auto}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
p{margin:0}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
[hidden]{display:none!important}
.nw{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body[data-hero="a"] [data-hero-text="b"],body[data-hero="b"] [data-hero-text="a"]{display:none}
body:not([data-hero]) [data-hero-text="b"]{display:none}
body:not([data-hero]) [data-hero-text="a"]{visibility:hidden}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.dims{visibility:var(--dims,visible)}


.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0 6px}
.brand{display:grid;text-decoration:none;line-height:1.3}
.brand b{font-size:18px;font-weight:700;letter-spacing:-.01em}
.brand span{font-size:14px;color:var(--ink-2)}
.top-max{flex:0 0 auto;display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border:1px solid var(--line-2);border-radius:9px;background:var(--sheet);text-decoration:none;font-size:15px;font-weight:500}
.top-max:hover{border-color:var(--ink)}

/* Первый экран */
.hero{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);grid-template-areas:"head figure" "actions figure" ". details";column-gap:56px;padding:26px 0 80px}
.hero-head{grid-area:head;padding-top:34px}
.hero h1{font-size:46px;line-height:1.07;letter-spacing:-.03em}
.lead{margin-top:18px;font-size:19px;line-height:1.5;color:var(--ink-2);max-width:31em}
.hero-actions{grid-area:actions;align-self:start;display:grid;justify-items:start;gap:10px;margin-top:30px}
.btn-max{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:14px 30px;border-radius:10px;background:var(--max);color:#fff;text-decoration:none;font-weight:600;font-size:18px;line-height:1.2;text-align:center}
.btn-max:hover{filter:brightness(1.06)}
.hint{margin:-2px 0 8px;font-size:14px;color:var(--ink-3)}
.btn-plain{font-weight:500;text-underline-offset:4px}
.smeta-link{margin-top:4px;font-size:15px;color:var(--ink-2);text-underline-offset:4px}

.hero-figure{grid-area:figure;margin:0}
.sketch{position:relative;aspect-ratio:1200/730;border-radius:6px;overflow:hidden;background:#2b221c}
.sketch svg{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .3s ease}
.variants-hint{margin:14px 0 0;font-size:14px;line-height:1.35;color:var(--ink-2)}
.variants{border:0;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.variant{position:relative;display:grid;gap:8px;cursor:pointer}
.variant input{position:absolute;width:1px;height:1px;opacity:0}
.thumb{position:relative;display:block;aspect-ratio:16/10;border-radius:5px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.08);transition:box-shadow .15s}
.thumb svg,.mini svg{--dims:hidden;width:100%;height:100%;display:block}
.variant:hover .thumb{box-shadow:0 0 0 2px var(--line-2)}
.variant input:checked+.thumb{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.variant input:focus-visible+.thumb{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--focus)}
.v-name{font-size:14px;line-height:1.3;color:var(--ink-2)}
.v-name .short{display:none}
.variant input:checked~.v-name{color:var(--ink);font-weight:600}
/* Кружок выбора и волна по вариантам — видно, что на них можно нажать. Волна идёт, пока человек не выбрал вариант сам. */
.tick{position:absolute;top:7px;left:7px;width:18px;height:18px;border-radius:50%;background:rgba(255,253,248,.94);box-shadow:0 0 0 1.5px rgba(29,26,23,.45);pointer-events:none}
.variant input:checked~.tick{background:var(--ink);box-shadow:0 0 0 2px rgba(255,253,248,.95)}
.variant input:checked~.tick::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.thumb::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,248,235,.28);box-shadow:inset 0 0 0 3px rgba(255,250,242,.95);opacity:0;pointer-events:none}
.variants:not(.picked) .thumb{animation:nudge-lift 3.6s ease-in-out 1s 5 both}
.variants:not(.picked) .thumb::after{animation:nudge-glow 3.6s ease-in-out 1s 5 both}
.variants:not(.picked) .variant:nth-of-type(2) .thumb,.variants:not(.picked) .variant:nth-of-type(2) .thumb::after{animation-delay:1.45s}
.variants:not(.picked) .variant:nth-of-type(3) .thumb,.variants:not(.picked) .variant:nth-of-type(3) .thumb::after{animation-delay:1.9s}
.variants:not(.picked) .variant:nth-of-type(4) .thumb,.variants:not(.picked) .variant:nth-of-type(4) .thumb::after{animation-delay:2.35s}
@keyframes nudge-lift{0%,26%,100%{transform:none}11%{transform:translateY(-3px) scale(1.04)}}
@keyframes nudge-glow{0%,26%,100%{opacity:0}11%{opacity:1}}
.calc-max{display:none}

.hero-details{grid-area:details;margin-top:20px}
.details-caption{font-size:17px;line-height:1.45}
.details-caption b{font-weight:600}
.materials{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.materials li{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--ink-2)}
.materials b{color:var(--ink);font-weight:500}
.sw{width:24px;height:24px;flex:0 0 auto;border-radius:4px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.sw svg{display:block;width:100%;height:100%}
.details-note{margin-top:12px;font-size:14px;color:var(--ink-3)}

/* Расчёт */
.calc{padding:72px 0 80px;background:var(--band);border-top:1px solid var(--line)}
.calc h2{font-size:34px;letter-spacing:-.025em;max-width:24em}
.calc-lead{margin-top:10px;font-size:18px;color:var(--ink-2)}
.calc-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:start;margin-top:30px}
.quiz,.estimate{background:var(--sheet);border:1px solid var(--line);border-radius:12px}
.quiz{padding:24px 28px 28px;min-height:480px}
.quiz-variant{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.mini{display:block;width:72px;flex:0 0 auto;aspect-ratio:16/10;border-radius:4px;overflow:hidden}
.qv-text{font-size:14px;line-height:1.35;color:var(--ink-3)}
.qv-text b{display:block;color:var(--ink);font-size:17px;font-weight:600}
.link-btn{margin-left:auto;padding:6px 0;border:0;background:none;color:var(--ink-2);font-size:15px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.picker{flex-basis:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:6px}
.picker button{display:grid;gap:6px;padding:0;border:0;background:none;color:var(--ink-2);font-size:13px;line-height:1.25;text-align:left;cursor:pointer}
.picker .mini{width:100%}
.picker button[aria-pressed="true"]{color:var(--ink);font-weight:600}
.picker button[aria-pressed="true"] .mini{box-shadow:0 0 0 2px var(--sheet),0 0 0 4px var(--ink)}

.progress{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.progress i{height:4px;border-radius:2px;background:#e7e0d6}
.progress i.on{background:var(--ink)}
.q-count{margin:10px 0 8px;font-size:14px;color:var(--ink-3)}
.q-title{font-size:25px;line-height:1.2;letter-spacing:-.02em}
.q-title:focus{outline:none}
.q-help{margin-top:6px;font-size:15px;color:var(--ink-2)}
.options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 0;padding:0;border:0}
.opt{display:flex;align-items:center;gap:12px;min-height:58px;padding:12px 16px;border:1px solid var(--line-2);border-radius:9px;background:#fff;font-size:16px;line-height:1.3;cursor:pointer}
.opt:hover{border-color:#9f9385}
.opt.is-on{border-color:var(--ink);background:#f6f1e9}
.opt input{flex:0 0 auto;display:grid;place-content:center;width:20px;height:20px;margin:0;border:1.5px solid #968a7d;border-radius:5px;background:#fff;appearance:none;-webkit-appearance:none}
.opt input[type="radio"]{border-radius:50%}
.opt input:checked{border-color:var(--ink);background:var(--ink)}
.opt input[type="checkbox"]:checked::after{content:"";width:10px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.opt input[type="radio"]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.q-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.q-actions.only-next{justify-content:flex-end}
.btn-next{min-height:50px;padding:12px 26px;border:0;border-radius:9px;background:var(--ink);color:#fff;font-weight:600;cursor:pointer}
.btn-next:disabled{background:#d3cabe;cursor:not-allowed}
.btn-back{padding:10px 0;border:0;background:none;color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.quiz-msg{margin-top:10px;font-size:14px;color:#a3321f}
.quiz-msg:empty{display:none}

.contact-lead{margin-top:8px;font-size:16px;color:var(--ink-2);max-width:34em}
.contact-form{display:grid;gap:14px;max-width:440px;margin-top:18px}
.field{display:grid;gap:6px;font-size:15px;font-weight:500}
.field input{min-height:54px;padding:12px 14px;border:1px solid var(--line-2);border-radius:9px;background:#fff;font-size:18px}
.field input:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(47,91,211,.2)}
.check{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.4;cursor:pointer}
.check input,.simpler input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink)}
.check small,.simpler small{display:block;color:var(--ink-3);font-size:13.5px}
.err{color:#a3321f;font-size:14px;font-weight:400}
.err:empty{display:none}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.submit{min-height:56px;border:0;border-radius:10px;background:var(--ink);color:#fff;font-weight:600;font-size:17px;cursor:pointer}
.submit:disabled{opacity:.6;cursor:progress}
.contact-note{margin-top:14px;font-size:14px;color:var(--ink-3)}
.done pre{margin:16px 0 0;padding:16px 18px;border:1px solid var(--line);border-radius:9px;background:#f4efe7;color:var(--ink);font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap}
.done .btn-max{margin-top:18px}

.estimate{position:sticky;top:20px;padding:22px 24px 20px}
.est-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.est-head h3{font-size:19px;letter-spacing:-.01em}
.tag{padding:3px 10px;border:1px dashed var(--line-2);border-radius:999px;color:var(--ink-3);font-size:12.5px}
.est-variant{display:flex;align-items:center;gap:12px;margin-top:16px}
.est-rows{display:grid;grid-template-columns:max-content 1fr;margin:14px 0 0;font-size:15px}
.est-rows dt,.est-rows dd{padding:8px 0;border-bottom:1px solid #eee7dc}
.est-rows dt{padding-right:16px;color:var(--ink-3)}
.est-rows dd{margin:0;font-weight:500}
.est-rows dd.empty{color:#b7ab9d;font-weight:400}
.est-rows .cur{background:linear-gradient(90deg,#f5eee2,#f5eee2) no-repeat}
.est-rows dt.cur{color:var(--ink);box-shadow:-10px 0 0 #f5eee2}
.est-rows dd.cur{box-shadow:10px 0 0 #f5eee2}
.est-sum{display:grid;gap:6px;margin-top:16px;font-size:15px}
.sum-head,.sum-row{display:grid;grid-template-columns:1fr 84px;gap:8px;align-items:baseline}
.est-sum.two .sum-head,.est-sum.two .sum-row{grid-template-columns:1fr 84px 84px}
.sum-head{color:var(--ink-3);font-size:12.5px}
.sum-head span+span,.sum-row span+span{text-align:right}
.sum-row .v{color:#b7ab9d;font-variant-numeric:tabular-nums}
.simpler{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:15px;line-height:1.4;cursor:pointer}
.est-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);color:var(--ink-3);font-size:13.5px;line-height:1.5}

/* Второй вход: MAX и чужая смета */
.alt{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:80px 0}
.alt-col{display:grid;align-content:start;justify-items:start;padding-top:22px;border-top:2px solid var(--ink)}
.alt h2{font-size:28px;letter-spacing:-.02em}
.alt p{margin-top:10px;color:var(--ink-2);max-width:30em}
.alt p.small{font-size:14px;color:var(--ink-3)}
.alt .btn-max,.alt .btn-outline{margin-top:22px}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:14px 26px;border:1.5px solid var(--ink);border-radius:10px;text-decoration:none;font-weight:600;font-size:17px}
.btn-outline:hover{background:var(--ink);color:#fff}
.footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:26px 0 40px;border-top:1px solid var(--line);color:var(--ink-3);font-size:14px}
.toast{position:fixed;left:50%;bottom:20px;z-index:10;max-width:min(560px,calc(100% - 32px));padding:14px 18px;border-radius:10px;background:var(--ink);color:#f3ede4;font-size:15px;line-height:1.4;transform:translateX(-50%);box-shadow:0 8px 28px rgba(0,0,0,.25)}

@media (max-width:900px){
  /* На телефоне и планшете сначала квиз, кнопка MAX — под ним. */
  .hero{grid-template-columns:1fr;grid-template-areas:"head" "figure" "details";padding:8px 0 56px}
  .hero-actions{display:none}
  .calc-max{display:grid;justify-items:start;gap:6px;padding:20px 22px;background:var(--sheet);border:1px solid var(--line);border-radius:12px}
  .calc-max-title{font-size:19px;font-weight:700;letter-spacing:-.01em}
  .calc-max-text{color:var(--ink-2)}
  .calc-max .btn-max{margin-top:10px}
  .alt{grid-template-columns:1fr}
  .alt-col:first-child{display:none}
  .hero-head{padding-top:14px}
  .hero-figure{margin-top:22px}
  .calc-grid{grid-template-columns:1fr}
  .estimate{position:static}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{width:calc(100% - 32px)}
  .topbar{padding:14px 0 4px}
  .brand b{font-size:16px}
  .brand span{font-size:13px}
  .top-max{min-height:38px;padding:7px 12px;font-size:14px}
  .hero h1{font-size:31px;line-height:1.1}
  .lead{margin-top:12px;font-size:16.5px}
  .hero-figure{margin:20px -16px 0}
  .sketch{aspect-ratio:1200/800;border-radius:0}
  .variants{gap:8px;padding:0 16px}
  .variants-hint{padding:0 16px;font-size:13.5px}
  .v-name{font-size:12.5px}
  .v-name .full{display:none}
  .v-name .short{display:inline}
  .hero-actions{justify-items:stretch;margin-top:22px}
  .btn-max{width:100%}
  .hint{text-align:center}
  .btn-plain,.smeta-link{justify-self:center}
  .calc{padding:48px 0 56px}
  .calc h2{font-size:26px}
  .calc-lead{font-size:16px}
  .calc-grid{gap:16px;margin-top:22px}
  .quiz{min-height:0;padding:18px 16px 20px}
  .q-title{font-size:22px}
  .options{grid-template-columns:1fr}
  .picker{grid-template-columns:repeat(2,minmax(0,1fr))}
  .estimate{padding:18px 16px}
  .calc-max{padding:18px 16px;justify-items:stretch}
  .tick{top:5px;left:5px;width:16px;height:16px}
  .variant input:checked~.tick::after{inset:4px}
  .alt{grid-template-columns:1fr;gap:40px;padding:56px 0}
  .alt .btn-max,.alt .btn-outline{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sketch svg{transition:none}
  .variants .thumb,.variants .thumb::after{animation:none}
}