/* Проект: SALTECS — сайт saltecs.ru. Главная-лендинг (вариант А, выбран владельцем 17.10.2026).
   Гамма владельца: чёрный, жёлтый, белый — основные, плюс серые тона. Анимаций нет. */
:root{
  --black:#121212; --black-2:#1e1e1e; --yellow:#ffc400; --yellow-2:#ffd54a; --white:#fff;
  --g50:#f6f6f6; --g100:#eeeeee; --g200:#e2e2e2; --g400:#9a9a9a; --g600:#5e5e5e;
  --ink:#121212; --muted:#5e5e5e;
  --r-btn:999px; --r-card:24px; --r-in:12px; --m:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}
html{scroll-padding-top:90px}
body{background:var(--white);color:var(--ink);font:400 17px/1.55 'Manrope',system-ui,sans-serif}
img{display:block;max-width:100%;height:auto}a{color:inherit}
h1,h2,h3{letter-spacing:-.025em;line-height:1.05;font-weight:800}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 28px;border:0;border-radius:var(--r-btn);
  font:inherit;font-weight:700;text-decoration:none;cursor:pointer;background:var(--yellow);color:var(--black)}
.btn:hover{background:var(--yellow-2)}
.btn.dark{background:var(--black);color:var(--white)}.btn.dark:hover{background:#000}
.btn.ghost{background:var(--g100);color:var(--black)}.btn.ghost:hover{background:var(--g200)}
.btn.sm{min-height:44px;padding:0 18px;font-size:.9375rem}
.btn.done{background:#1f7a3a;color:#fff}

/* шапка */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:22px;padding:14px var(--m);background:rgba(255,255,255,.97);box-shadow:0 1px 0 var(--g200)}
.top .logo img{height:36px;width:auto}
.top nav{display:flex;gap:22px;margin-left:12px;font-size:.9375rem}
.top nav a{text-decoration:none;color:var(--g600)}.top nav a:hover{color:var(--black);text-decoration:underline}
.top .cat{margin-left:auto}
.top .tel{font-weight:800;text-decoration:none;white-space:nowrap}
.top .cart{display:inline-flex;gap:8px;align-items:center;text-decoration:none;font-weight:700;white-space:nowrap}
.top .cart b{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:999px;background:var(--black);color:var(--yellow);font-size:.875rem}

/* первый экран */
.sec{padding:clamp(72px,8vw,128px) var(--m) 0}
.sec>h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.25rem);max-width:20ch}
.sec .sub{color:var(--muted);margin-top:14px;max-width:60ch;font-size:1.0625rem}
.hero{background:var(--g50);padding:clamp(40px,6vw,88px) var(--m);display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.hero>*{min-width:0}
.hero h1{font-size:clamp(2.6rem,1.4rem + 4vw,4.75rem)}
.hero h1 span{background:linear-gradient(transparent 62%,var(--yellow) 62%,var(--yellow) 92%,transparent 92%)}
.hero .lead{font-size:clamp(1.0625rem,1rem + .4vw,1.3rem);color:var(--muted);margin-top:22px;max-width:36ch}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.hero .acts .btn.ghost{background:var(--white)}
.trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;list-style:none}
.trust li{background:var(--white);border-radius:999px;padding:10px 16px;font-size:.9375rem;font-weight:600;box-shadow:0 0 0 1px var(--g200)}
.trust li b{font-weight:800}
.stage{position:relative;background:var(--white);border-radius:32px;aspect-ratio:1/1;display:grid;place-items:center;box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
.stage img{width:78%}
.tag{position:absolute;background:var(--black);color:var(--white);border-radius:16px;padding:12px 16px;font-size:.875rem;line-height:1.3}
.tag b{display:block;font-size:1.125rem;color:var(--yellow)}.t1{left:-6%;top:12%}.t2{right:-4%;bottom:14%}

/* проблема → решение */
.picker{margin-top:40px;display:grid;gap:20px}.picker>*{min-width:0}
.pbtns{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.pbtns button{border:0;background:var(--g50);border-radius:18px;padding:18px 16px;text-align:left;font:inherit;cursor:pointer;min-height:88px;color:var(--ink);box-shadow:0 0 0 1px var(--g200)}
.pbtns button:hover{background:var(--g100)}
.pbtns button b{font-weight:700;font-size:1rem;line-height:1.25}
.pbtns button[aria-pressed=true]{background:var(--black);color:var(--white);box-shadow:none}
.pbtns button[aria-pressed=true] b{color:var(--yellow)}
.pp{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,64px);align-items:center;background:var(--g100);border-radius:var(--r-card);padding:clamp(20px,3vw,40px)}
.pp>*{min-width:0}
.pimg{background:var(--white);border-radius:20px;aspect-ratio:4/3;display:grid;place-items:center}.pimg img{max-height:88%;width:auto}
.pwhy{color:var(--muted);font-size:1.0625rem}.ptxt h3{font-size:clamp(1.75rem,1.2rem + 1.4vw,2.5rem);margin-top:14px}
.from{margin-top:8px;font-size:1.125rem}.from b{font-size:1.5rem}
.acts{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:24px}.lnk{font-weight:700}

/* комплекты */
.kits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.kit{background:var(--white);border-radius:var(--r-card);box-shadow:0 0 0 1px var(--g200);overflow:hidden;display:flex;flex-direction:column}
.kit:hover{box-shadow:0 0 0 2px var(--black)}
.kimg{background:var(--g50);aspect-ratio:4/3;display:grid;place-items:center}.kimg img{max-height:86%;width:auto;mix-blend-mode:multiply}
.kb{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}.kb h3{font-size:1.1875rem;line-height:1.25}.kb h3 a{text-decoration:none}
.kb p{color:var(--muted);font-size:.9375rem}
.kf{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:12px;flex-wrap:wrap}.kf b{font-size:1.375rem}
.kf .bt{display:flex;gap:8px}
.inkit{margin-top:24px;background:var(--black);color:var(--white);border-radius:var(--r-card);padding:clamp(24px,3vw,40px);display:grid;grid-template-columns:1fr 2fr;gap:24px;align-items:center}
.inkit h3{font-size:1.5rem}.inkit ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.inkit li{padding-left:28px;position:relative}.inkit li::before{content:"✓";position:absolute;left:0;color:var(--yellow);font-weight:800}
.allk{margin-top:18px;font-weight:700;display:inline-block}

/* шаги */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px;list-style:none}
.steps li{background:var(--g50);border-radius:var(--r-card);padding:28px 24px;box-shadow:0 0 0 1px var(--g200)}
.steps .d{display:inline-block;background:var(--yellow);color:var(--black);border-radius:999px;padding:4px 12px;font-size:.8125rem;font-weight:800}
.steps h3{font-size:1.375rem;margin-top:16px}.steps p{color:var(--muted);margin-top:8px;font-size:.9375rem}

/* почему мы */
.whyus{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:40px;list-style:none}
.whyus li{border-radius:var(--r-card);padding:26px 22px;background:var(--black);color:var(--white)}
.whyus b{display:block;font-size:clamp(1.75rem,1.2rem + 1.4vw,2.5rem);font-weight:800;color:var(--yellow);letter-spacing:-.03em}
.whyus span{color:var(--g200);font-size:.9375rem}

/* сервис и бизнес */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}.duo>*{min-width:0}
.duo article{border-radius:var(--r-card);padding:clamp(24px,3vw,40px);background:var(--g50);box-shadow:0 0 0 1px var(--g200);display:grid;grid-template-columns:1fr 160px;gap:16px;align-items:center}
.duo article>*{min-width:0}
.duo h3{font-size:1.625rem}.duo p{color:var(--muted);margin-top:10px}.duo ul{list-style:none;margin-top:14px;display:grid;gap:6px}
.duo li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--g400);padding-bottom:6px;font-size:.9375rem}
.duo .im{background:var(--white);border-radius:20px;aspect-ratio:1;display:grid;place-items:center}.duo .im img{width:86%}
.duo .acts{margin-top:18px}

/* каталог */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:40px}
.cats a{background:var(--g50);border-radius:20px;padding:16px;text-decoration:none;display:grid;gap:10px;box-shadow:0 0 0 1px var(--g200)}
.cats .ci{background:var(--white);border-radius:14px;aspect-ratio:1;display:grid;place-items:center}.cats .ci img{width:80%;height:80%;object-fit:contain}
.cats b{font-size:.9375rem;line-height:1.25}.cats span.n{font-size:.8125rem;color:var(--muted)}
.cats a:hover{background:var(--yellow);box-shadow:none}
.cats-all{margin-top:20px}

/* вопросы */
.faq{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(24px,4vw,64px)}
.faq h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.25rem)}
.faq details{border-radius:18px;background:var(--g50);margin-bottom:10px;box-shadow:0 0 0 1px var(--g200)}
.faq summary{padding:20px 56px 20px 22px;font-weight:700;position:relative;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:400}
.faq details[open]{background:var(--white)}.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 22px 20px;color:var(--muted)}

/* финальная форма */
.final{margin:clamp(72px,8vw,128px) var(--m) 0;background:var(--black);color:var(--white);border-radius:32px;padding:clamp(28px,5vw,72px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px)}
.final>*{min-width:0}
.final h2{font-size:clamp(2rem,1.2rem + 2.4vw,3.25rem)}.final p.s{color:var(--g200);margin-top:16px;max-width:34ch}
.lform{display:grid;gap:12px}.lform .r2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lform label{display:grid;gap:6px;font-size:.875rem;font-weight:600}
.lform label.consent{display:flex;font-weight:400}
.lform input:not([type=checkbox]),.lform select{height:52px;border:0;border-radius:var(--r-in);padding:0 14px;font:inherit;font-weight:400;background:var(--white);color:var(--ink)}
.lform input[type=file]{padding-top:14px;font-size:.875rem;background:var(--black-2);color:var(--g200)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.875rem;line-height:1.4}
.consent input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--yellow)}
.msg{font-size:.9375rem;min-height:1.3em}.msg.err{color:#c2410c}.msg.ok{color:#15803d;font-weight:700}
.final .msg.err{color:#ffb38a}.final .msg.ok{color:var(--yellow)}

/* окно «Перезвоните мне» (разметка общая с сайтом) */
dialog.modal{border:0;border-radius:var(--r-card);padding:0;width:min(480px,calc(100vw - 32px));margin:auto;background:var(--white);color:var(--ink)}
dialog.modal::backdrop{background:rgba(0,0,0,.6)}
.modal .in{padding:32px;position:relative}
.modal h2{font-size:1.75rem}.modal p.sub{color:var(--muted);margin-top:8px}
.modal form{display:grid;gap:10px;margin-top:18px}
.modal input:not([type=checkbox]){height:52px;border:0;border-radius:var(--r-in);padding:0 14px;font:inherit;background:var(--g100)}
.modal input:focus{outline:2px solid var(--black);background:var(--white)}
.modal .x{position:absolute;right:12px;top:10px;width:44px;height:44px;border:0;background:none;font-size:1.75rem;cursor:pointer}
.modal .btn.dark{background:var(--black);color:var(--white)}

/* подвал */
footer{padding:64px var(--m) 32px}
.flogo{height:56px;width:auto}
.fg{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:32px}
.fg b{display:block;font-size:.8125rem;color:var(--g600);font-weight:700;margin-bottom:4px}.fg a{text-decoration:none}
.req{margin-top:28px;font-size:.8125rem;color:var(--g600)}

/* телефон: нижняя панель звонка */
.mbar{display:none}
@media (max-width:1100px){.pbtns{grid-template-columns:repeat(3,1fr)}.whyus{grid-template-columns:repeat(3,1fr)}.cats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:980px){.top nav,.top .tel{display:none}}
@media (max-width:860px){.hero,.pp,.inkit,.duo,.faq,.final{grid-template-columns:1fr}.kits{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}
  .inkit ul{grid-template-columns:1fr}.duo article{grid-template-columns:1fr 110px}.t1{left:2%}.t2{right:2%}}
@media (max-width:700px){
  .top .callbtn,.top .cat,.top .cart .cl{display:none}.top{gap:12px}.top .logo img{height:28px}.top .cart{margin-left:auto}
  .mbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:30}
  .mbar a,.mbar button{min-height:56px;display:grid;place-items:center;border:0;font:inherit;font-weight:800;text-decoration:none;cursor:pointer}
  .mbar a{background:var(--black);color:var(--white)}.mbar button{background:var(--yellow);color:var(--black)}
  body{padding-bottom:56px}.lform .r2{grid-template-columns:1fr}.fg{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){.kits,.steps{grid-template-columns:1fr}.pbtns{grid-template-columns:1fr 1fr}.whyus{grid-template-columns:1fr 1fr}.cats{grid-template-columns:1fr 1fr}}