/* ПоСтройка — общий файл стилей для всех страниц postroyka.shop
   Разделы: 1 токены · 2 база · 3 кнопки и формы · 4 шапка/подвал · 5 главная
   · 6 внутренние страницы (хлебные крошки, текст, товар, таблицы, FAQ) · 7 адаптив */

/* 1. Токены */
:root{--or:#ff5a00;--or-d:#e04e00;--gr:#23262b;--gr2:#2f3238;--bg:#f4f4f2;--w:#fff;--tx:#23262b;--mu:#6b7078;--ln:#e2e2de;--r:10px;--wrap:1200px}

/* 2. База */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:Onest,"Segoe UI",Arial,sans-serif;color:var(--tx);background:var(--bg);line-height:1.55;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--or);outline-offset:2px}
.c{width:min(var(--wrap),100% - 32px);margin-inline:auto}
section{padding:72px 0}
h2.t{font-size:clamp(26px,3.2vw,36px);line-height:1.15;font-weight:800;letter-spacing:-.015em}
.sub{color:var(--mu);margin:10px 0 36px;max-width:640px}
.dark{background:var(--gr);color:#fff}
.dark .sub{color:#b9bcc2}

/* 3. Кнопки и формы */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:var(--r);font:700 15px/1 Onest,sans-serif;border:2px solid var(--or);background:var(--or);color:#fff;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--or-d);border-color:var(--or-d)}
.btn.o{background:transparent;color:#fff;border-color:#ffffff66}
.btn.o:hover{border-color:#fff;background:#ffffff14}
.btn.l{background:transparent;color:var(--tx);border-color:var(--ln)}
.btn.l:hover{border-color:var(--or);color:var(--or)}
.card{background:var(--w);color:var(--tx);border-radius:14px;padding:28px}
.card h2{font-size:22px;margin-bottom:6px}
.card>p{color:var(--mu);font-size:14px;margin-bottom:16px}
form{display:grid;gap:12px}
label{font-size:13px;font-weight:500;color:var(--mu);display:grid;gap:5px}
input,select,textarea{font:16px Onest,sans-serif;padding:12px 14px;border:1.5px solid var(--ln);border-radius:8px;background:#fff;color:var(--tx);width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--or);outline:none}
.chk{display:flex;gap:8px;align-items:flex-start;font-size:12px;font-weight:400}
.chk input{width:18px;height:18px;margin-top:2px;accent-color:var(--or)}
.chk a{color:var(--or);text-decoration:underline}
.ok{display:none;color:#1a7f37;font-weight:500;font-size:14px}
.mod{position:fixed;inset:0;background:#000000a6;display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.mod.on{display:flex}
.mod .card{width:min(440px,100%);position:relative}
.x{position:absolute;right:14px;top:10px;background:none;border:0;font-size:28px;cursor:pointer;color:var(--mu)}

/* 3а. Заявка-опросник */
[hidden]{display:none!important}
.qbar{height:6px;background:var(--ln);border-radius:6px;margin-bottom:14px;overflow:hidden}
.qbar span{display:block;height:100%;background:var(--or);width:0;transition:width .3s}
.qcount{font-size:13px;color:var(--mu)}
.qs{display:grid;gap:10px}
label.qt,p.qt{font-size:18px;font-weight:700;color:var(--tx);line-height:1.3}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--ln);background:#fff;border-radius:999px;padding:7px 14px;font:500 14px Onest,sans-serif;cursor:pointer;color:var(--tx)}
.chip:hover,.chip.on{border-color:var(--or);color:var(--or)}
.qerr{color:#c62828;font-size:13px}
.qerr:empty{display:none}
.qnav{display:flex;gap:10px}
.qnav .btn{flex:1}
.qnav .btn:disabled{opacity:.6;cursor:wait}
.qdone{text-align:center;padding:16px 0}
.qdone h3{font-size:20px;margin-bottom:6px}
.qdone p{color:var(--mu)}

/* 4. Шапка и подвал */
.topbar{background:var(--gr2);color:#d6d8dc;font-size:14px}
.topbar .c{display:flex;justify-content:space-between;gap:16px;padding:8px 0;flex-wrap:wrap}
.topbar a:hover{color:#fff}
.topbar nav{display:flex;gap:20px;flex-wrap:wrap}
header{background:var(--gr);position:sticky;top:0;z-index:20;box-shadow:0 2px 0 var(--or)}
header .c{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;padding:10px 0}
.logo img{height:64px;width:auto}
.menu{display:flex;gap:26px;justify-content:center;color:#fff;font-weight:500}
.menu a:hover,.menu a.on{color:var(--or)}
.burger{display:none;margin-left:auto;background:none;border:2px solid #ffffff55;color:#fff;border-radius:8px;padding:8px 12px;font:700 15px Onest;cursor:pointer}
footer{background:var(--gr);color:#b9bcc2;padding:48px 0 28px;font-size:14px}
footer .g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px}
footer img{height:70px;width:auto;margin-bottom:12px}
footer h4{color:#fff;font-size:15px;margin-bottom:10px}
footer ul{list-style:none;padding:0;display:grid;gap:6px}
footer a:hover{color:var(--or)}
.copy{border-top:1px solid #ffffff22;margin-top:32px;padding-top:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* 5. Главная */
.hero{position:relative;overflow:hidden;background:var(--gr);color:#fff;padding:72px 0 64px}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg i{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation:heroSlide 30s infinite}
.hero-bg i:nth-child(1){background-image:url(/assets/img/hero-pesok-karierny.jpg)}
.hero-bg i:nth-child(2){background-image:url(/assets/img/hero-shcheben-granitnyi.jpg);animation-delay:6s}
.hero-bg i:nth-child(3){background-image:url(/assets/img/hero-gravii.jpg);animation-delay:12s}
.hero-bg i:nth-child(4){background-image:url(/assets/img/hero-shcheben-izvestnyakovyi.jpg);animation-delay:18s}
.hero-bg i:nth-child(5){background-image:url(/assets/img/hero-grunt-plodorodnyi.jpg);animation-delay:24s}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#23262bf2 0%,#23262bcc 55%,#23262b99 100%)}
@keyframes heroSlide{0%{opacity:0;transform:scale(1)}4%{opacity:1}20%{opacity:1}24%{opacity:0;transform:scale(1.12)}100%{opacity:0;transform:scale(1.12)}}
.hero .c{position:relative;z-index:1}
.hero .c{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(30px,4.4vw,52px);line-height:1.1;font-weight:800;letter-spacing:-.02em}
.hero p.lead{margin:20px 0 28px;font-size:18px;color:#e3e4e6;max-width:560px}
.acts{display:flex;gap:12px;flex-wrap:wrap}
.perks{display:grid;gap:14px;margin-top:36px;grid-template-columns:repeat(3,1fr)}
.perks div{border-left:3px solid var(--or);padding-left:12px;font-size:14px;color:#d6d8dc}
.perks b{display:block;color:#fff;font-size:16px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:36px 0;text-align:left}
.stats b{display:block;font-size:38px;font-weight:800;color:var(--or);line-height:1}
.stats span{color:var(--mu);font-size:14px}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cat{background:var(--w);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--ln);transition:border-color .2s}
.cat:hover{border-color:var(--or)}
.cat img{aspect-ratio:4/3;object-fit:cover;width:100%}
.cat div{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.cat small{color:var(--mu);font-size:13px}
.cat h3{font-size:18px;margin:2px 0 6px}
.cat p{color:var(--mu);font-size:14px;margin-bottom:12px;flex:1}
.cat .pr{font-weight:800;font-size:20px;color:var(--or)}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 32px}
.why h3{font-size:18px;margin-bottom:6px}
.why h3::before{content:"";display:block;width:36px;height:4px;background:var(--or);margin-bottom:12px}
.why p{color:#b9bcc2;font-size:15px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s;padding:0}
.steps li{list-style:none;background:var(--w);border-radius:14px;padding:20px;border-top:4px solid var(--or);counter-increment:s}
.steps li::before{content:counter(s);display:block;font-size:34px;font-weight:800;color:var(--or);line-height:1;margin-bottom:10px}
.steps b{display:block;margin-bottom:4px}
.steps span{font-size:14px;color:var(--mu)}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rev{background:var(--w);border-radius:14px;padding:24px;border:1px solid var(--ln);font-size:15px}
.rev b{display:block;margin-top:14px}
.rev small{color:var(--mu)}
.contact .c{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.ci{display:grid;gap:14px;margin-top:24px}
.ci a,.ci div{display:block;padding:14px 18px;background:var(--w);border-radius:12px;border:1px solid var(--ln)}
.ci a:hover{border-color:var(--or)}
.ci small{display:block;color:var(--mu);font-size:13px}
.ci b{font-size:18px}

/* 6. Внутренние страницы */
.pagehead{background:var(--gr);color:#fff;padding:36px 0 40px}
.pagehead h1{font-size:clamp(28px,4vw,42px);line-height:1.12;font-weight:800;letter-spacing:-.015em;max-width:860px}
.pagehead p{color:#c9ccd1;margin-top:12px;max-width:680px}
.crumbs{font-size:13px;color:#9da1a8;margin-bottom:14px}
.crumbs a:hover{color:var(--or)}
.crumbs span+span::before{content:"/";margin:0 8px}
.prose{max-width:820px}
.prose h2{font-size:26px;margin:32px 0 12px;line-height:1.2}
.prose h3{font-size:20px;margin:24px 0 8px}
.prose p,.prose ul,.prose ol{margin-bottom:14px;color:#3b4047}
.prose ul,.prose ol{padding-left:22px}
.prose a{color:var(--or);text-decoration:underline}
.prod{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.prod>img{border-radius:14px;width:100%;aspect-ratio:4/3;object-fit:cover}
.price{font-size:34px;font-weight:800;color:var(--or)}
.price small{font-size:16px;color:var(--mu);font-weight:500}
table.spec{width:100%;border-collapse:collapse;background:var(--w);border-radius:12px;overflow:hidden;margin:16px 0 24px;font-size:15px}
.spec th,.spec td{padding:12px 16px;border-bottom:1px solid var(--ln);text-align:left}
.spec th{width:45%;color:var(--mu);font-weight:500;background:#fafaf8}
.tblwrap{overflow-x:auto}
.spec.ptab th{width:auto;color:var(--tx);font-weight:700}
.spec.ptab td a{font-weight:500;border-bottom:1px dashed #b9b9b3}
.spec.ptab td a:hover{color:var(--or);border-color:var(--or)}
.spec.ptab td.pr{font-weight:800;color:var(--or);white-space:nowrap}
.faq details{background:var(--w);border:1px solid var(--ln);border-radius:12px;padding:16px 20px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:700}
.faq details[open] summary{color:var(--or);margin-bottom:8px}
.cta{background:var(--gr);color:#fff;border-radius:14px;padding:32px;display:flex;gap:20px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.cta h2{font-size:24px}
.cta p{color:#b9bcc2}
.list3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.art{background:var(--w);border:1px solid var(--ln);border-radius:14px;padding:20px}
.art:hover{border-color:var(--or)}
.art h3{font-size:18px;margin-bottom:6px}
.art p{color:var(--mu);font-size:14px}

/* 7. Адаптив */
@media(max-width:1000px){.hero .c,.contact .c,.prod{grid-template-columns:1fr}.cats{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr)}.why,.revs,.list3{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}footer .g{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.burger{display:block}.menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--gr);flex-direction:column;padding:8px 16px 18px;gap:14px}.menu.on{display:flex}header .btn.h{display:none}.perks{grid-template-columns:1fr}.topbar nav a.em{display:none}}
@media(max-width:560px){.cats,.steps,.why,.revs,.list3,footer .g{grid-template-columns:1fr}section{padding:52px 0}.hero{padding:44px 0}.logo img{height:52px}}
@media(prefers-reduced-motion:reduce){.hero-bg i{animation:none}.hero-bg i:first-child{opacity:1}*{transition:none!important;scroll-behavior:auto!important}}

/* 8. Справочник и калькулятор */
.meta{color:var(--mu);font-size:13px;margin-bottom:8px}
.calc{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.calc .res{grid-column:1/-1;background:var(--gr);color:#fff;border-radius:12px;padding:18px;font-size:16px}
.calc .res b{color:var(--or);font-size:22px}
@media(max-width:560px){.calc{grid-template-columns:1fr}}
.prose a.btn,.prose .card a.btn{color:#fff;text-decoration:none}
.prose a.btn.l{color:var(--tx)}

/* 9. Меню с подразделами */
.menu{gap:22px;align-items:center}
.menu .dd{position:relative;padding:10px 0;margin:-10px 0;min-width:190px}
.menu .dd>a::after{content:"";display:inline-block;margin-left:6px;width:6px;height:6px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-3px) rotate(45deg)}
.menu .sub{display:none;position:absolute;top:100%;left:0;min-width:190px;flex-direction:column;gap:12px;background:var(--gr);padding:16px 18px;border-radius:0 0 10px 10px;box-shadow:0 8px 20px #0006;border-top:2px solid var(--or)}
.menu .dd.open .sub,.menu .dd:hover .sub,.menu .dd:focus-within .sub,.menu .sub:hover{display:flex}
@media(max-width:1100px){.menu{gap:16px;font-size:15px}}
@media(max-width:900px){header .btn.h{display:none}}
@media(max-width:760px){.menu{align-items:flex-start}.menu .dd{margin:0;padding:0}.menu .dd>a::after{display:none}.menu .sub{display:flex;position:static;padding:8px 0 0 14px;box-shadow:none;border:0;min-width:0;gap:10px;background:none}.menu .sub a{color:#c9ccd1;font-weight:400}}
@media(max-width:760px){.menu .sub a.on{color:var(--or)}}