:root{--navy:#1e2a38;--navy2:#2b3d52;--acc:#a9603f;--acc2:#8e4e31;--bg:#f5f4f1;--txt:#2c343d;--mut:#66707c;--bd:#e6e4df;--r:14px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PT Sans",Arial,sans-serif;color:var(--txt);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy2)}
a[href^="tel:"],a[href^="mailto:"]{white-space:nowrap}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.ic{display:inline-flex;width:1.25em;height:1.25em;vertical-align:-.25em}
.ic svg{width:100%;height:100%}
/* header */
.topbar{background:var(--navy);color:#cfd9e5;font-size:14px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:14px;flex-wrap:nowrap}
.topbar a{color:#fff;text-decoration:none}
.tb-mail{margin-left:auto}
.tb-phone{font-weight:700;white-space:nowrap;font-size:15px}
header.main{border-bottom:1px solid var(--bd);background:#fff;position:sticky;top:0;z-index:50}
header.main .wrap{display:flex;align-items:center;gap:18px;min-height:52px;flex-wrap:nowrap}
.logo{text-decoration:none;line-height:1.15;white-space:nowrap}
.logo b{font-size:20px;color:var(--navy);letter-spacing:.3px}
.logo span{display:block;font-size:11.5px;color:var(--mut)}
nav.menu{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
nav.menu a{text-decoration:none;color:var(--txt);padding:7px 10px;border-radius:8px;font-size:15px;font-weight:500}
nav.menu a:hover,nav.menu a.on{background:var(--bg);color:var(--navy)}
.burger{display:none;margin-left:auto;cursor:pointer;padding:10px 2px;flex-direction:column;gap:5px}
.burger span{display:block;width:26px;height:3px;border-radius:2px;background:var(--navy);transition:.2s}
.nav-t:checked ~ .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-t:checked ~ .burger span:nth-child(2){opacity:0}
.nav-t:checked ~ .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* buttons */
.btn{display:inline-block;background:var(--acc);color:#fff!important;text-decoration:none;padding:13px 26px;border-radius:10px;font-weight:700;border:0;cursor:pointer;font-size:16px;transition:.15s}
.btn:hover{background:var(--acc2)}
.btn.ghost{background:transparent;color:var(--navy)!important;border:2px solid var(--navy);padding:11px 24px}
.btn.ghost:hover{background:var(--navy);color:#fff!important}
.btn.wa{background:#4a7d5f}.btn.wa:hover{background:#3d684f}
.btn.tg{background:#48708f}.btn.tg:hover{background:#3a5c77}
.btn.mx{background:#6d5f93}.btn.mx:hover{background:#594d7a}
/* hero */
.hero{background:linear-gradient(150deg,var(--navy) 0%,var(--navy2) 75%,#37506b 100%);color:#fff;padding:64px 0 56px}
.hero.photo{background:
 linear-gradient(90deg,rgba(245,244,241,.97) 0%,rgba(245,244,241,.88) 42%,rgba(245,244,241,.35) 72%,rgba(245,244,241,.05) 100%),
 url('/img/hero-manzhety.jpg') right center/cover no-repeat;color:var(--navy)}
.hero.photo p.sub{color:var(--txt)}
.hero.photo .facts div b{color:var(--navy)}
.hero.photo .facts div span{color:var(--mut)}
.hero.photo .btn.ghost{border-color:var(--navy);color:var(--navy)!important}
.hero.photo .btn.ghost:hover{background:var(--navy);color:#fff!important}
@media(max-width:760px){.hero.photo{background:
 linear-gradient(180deg,rgba(245,244,241,.96) 0%,rgba(245,244,241,.82) 55%,rgba(245,244,241,.45) 100%),
 url('/img/hero-manzhety.jpg') center bottom/cover no-repeat}}
.hero h1{font-size:clamp(28px,4vw,44px);line-height:1.2;margin-bottom:18px}
.hero p.sub{font-size:19px;color:#cdd9e6;max-width:640px;margin-bottom:28px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.hero .facts{display:flex;gap:34px;margin-top:40px;flex-wrap:wrap}
.hero .facts div b{font-size:26px;display:block;color:#fff}
.hero .facts div span{color:#a9bbcd;font-size:14px}
/* sections */
section{padding:52px 0}
section.alt{background:var(--bg)}
h2.sec{font-size:clamp(23px,3vw,32px);color:var(--navy);margin-bottom:10px}
p.sec-sub{color:var(--mut);margin-bottom:32px;max-width:720px}
/* cards */
.grid{display:grid;gap:22px}
.grid.c3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{background:#fff;border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.15s}
.card:hover{box-shadow:0 8px 24px rgba(22,40,63,.1);transform:translateY(-2px)}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card .in{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-size:17px;color:var(--navy);line-height:1.35}
.card h3 a{text-decoration:none;color:inherit}
.card h3 a:hover{color:var(--acc)}
.card p{font-size:14px;color:var(--mut);flex:1}
.price{font-weight:700;color:var(--navy);font-size:15px}
/* benefit tiles */
.tile{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:24px}
.tile .ic{width:38px;height:38px;color:var(--acc);margin-bottom:12px}
.tile b{color:var(--navy);display:block;margin-bottom:6px;font-size:17px}
.tile p{font-size:14.5px;color:var(--mut)}
/* article/prose */
.prose{max-width:780px}
.prose h2{font-size:26px;color:var(--navy);margin:36px 0 14px}
.prose h3{font-size:20px;color:var(--navy);margin:28px 0 10px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px 22px}
.prose li{margin-bottom:8px}
.prose table{border-collapse:collapse;width:100%;margin:20px 0;font-size:15px}
.prose th,.prose td{border:1px solid var(--bd);padding:10px 14px;text-align:left}
.prose th{background:var(--bg);color:var(--navy)}
.prose .note{background:#fff7ef;border-left:4px solid var(--acc);padding:14px 18px;border-radius:0 10px 10px 0;margin:20px 0}
/* product page */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.pimg{border:1px solid var(--bd);border-radius:var(--r);overflow:hidden}
.pinfo .price{font-size:26px;display:block;margin:14px 0 6px}
.pinfo .min{color:var(--mut);font-size:14px;margin-bottom:20px}
.pinfo .cta{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 8px}
table.specs{border-collapse:collapse;width:100%;margin:18px 0;font-size:15px}
table.specs td{border-bottom:1px solid var(--bd);padding:9px 4px}
table.specs td:first-child{color:var(--mut);width:46%}
/* breadcrumbs */
.crumbs{font-size:13.5px;color:var(--mut);padding:16px 0 0}
.crumbs a{color:var(--mut);text-decoration:none}
.crumbs a:hover{color:var(--acc)}
/* faq */
details.faq{border:1px solid var(--bd);border-radius:12px;margin-bottom:12px;background:#fff}
details.faq summary{cursor:pointer;padding:16px 20px;font-weight:600;color:var(--navy);list-style:none;position:relative;padding-right:44px}
details.faq summary::after{content:"+";position:absolute;right:20px;top:12px;font-size:24px;color:var(--acc)}
details.faq[open] summary::after{content:"–"}
details.faq .a{padding:0 20px 18px;color:var(--mut)}
/* cta band */
.band{background:linear-gradient(135deg,var(--navy),var(--navy2));border-radius:var(--r);color:#fff;padding:38px 40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.band b{font-size:22px;display:block;margin-bottom:6px}
.band p{color:#c4d2df;max-width:520px}
/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;counter-reset:st}
.step{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:22px;counter-increment:st}
.step::before{content:counter(st);display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--acc);color:#fff;align-items:center;justify-content:center;font-weight:700;margin-bottom:10px}
.step b{display:block;color:var(--navy);margin-bottom:4px}
.step p{font-size:14px;color:var(--mut)}
/* footer */
footer{background:var(--navy);color:#b9c7d6;margin-top:60px;font-size:14.5px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:34px;padding:46px 0 30px}
footer b.t{color:#fff;display:block;margin-bottom:12px;font-size:15px}
footer a{color:#dbe5ef;text-decoration:none;display:block;margin-bottom:8px}
footer a:hover{color:#fff}
footer .req{border-top:1px solid rgba(255,255,255,.12);padding:18px 0 26px;font-size:13px;color:#8fa2b5}
/* карта цветов: превью + лайтбокс */
.cmap-prev{display:block;position:relative;max-width:760px;margin:0 auto}
.cmap-prev img{width:100%;display:block;transition:.2s}
.cmap-prev:hover img{transform:scale(1.02)}
.cmap-lupa{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(30,42,56,.3);transition:.2s}
.cmap-lupa svg{width:36px;height:36px}
.cmap-prev:hover .cmap-lupa{background:var(--acc2);transform:translate(-50%,-50%) scale(1.08)}
.lightbox{display:none;position:fixed;inset:0;z-index:300;background:rgba(20,26,34,.94)}
.lightbox:target{display:block}
.lb-scroll{position:absolute;inset:0;overflow:auto;padding:52px 12px 16px;-webkit-overflow-scrolling:touch}
.lb-scroll img{width:1680px;max-width:none;display:block;margin:0 auto;border-radius:8px}
.lb-close{position:fixed;top:6px;right:16px;z-index:310;color:#fff;font-size:42px;line-height:1;text-decoration:none;font-weight:300}
.lb-hint{position:fixed;top:18px;left:16px;color:#c8d2dc;font-size:13.5px;z-index:310}
/* misc */
.tag{display:inline-block;background:#eef3f8;color:var(--navy2);border-radius:20px;padding:3px 12px;font-size:13px;margin:0 6px 8px 0;text-decoration:none}
.tag:hover{background:var(--acc);color:#fff}
@media(max-width:900px){.pgrid{grid-template-columns:1fr}footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
 .tb-info,.tb-mail{display:none}
 .topbar .wrap{justify-content:flex-start}
 header.main{position:static}
 header.main .wrap{min-height:54px}
 .burger{display:flex;position:fixed;top:10px;right:12px;z-index:120;background:var(--navy);padding:13px 11px;border-radius:12px;box-shadow:0 4px 16px rgba(20,30,45,.35)}
 .burger span{background:#fff;width:24px}
 nav.menu{display:none;position:fixed;inset:0;z-index:110;background:#fff;flex-direction:column;gap:0;margin:0;padding:76px 20px 24px;overflow-y:auto}
 nav.menu a{padding:14px 12px;border-bottom:1px solid var(--bd);border-radius:0;font-size:17px}
 .nav-t:checked ~ nav.menu{display:flex}
}
@media(max-width:640px){.band{padding:28px 24px}footer .cols{grid-template-columns:1fr}}