/* =====================================================================
   Главная страница — 1 в 1 по макету «Главная — вариант 2, в манере webasto.com» (HomeCom).
   Стили макета перенесены без изменений, всё внутри .c (обёртка главной), шапка и подвал — свои (site.css).
   Единственная правка макета: заголовок слайда — класс .ht вместо тега h1
   (на странице один H1 — у первого слайда, у остальных тот же вид, но тег div).
   В конце — дополнения для данных сайта: логотипы марок, капча Яндекса, сообщения формы, SEO-текст.
   ===================================================================== */

/* =====================================================================
   Главная — второй вариант, в манере официального сайта webasto.com:
   острые углы, крупные фото во всю ширину, фото + тёмно-синяя панель с жёлтой подписью
   и жёлтой кнопкой с рамкой; жёлтый — только акцент (кнопки, полоса слайда, подписи на синем).
   ===================================================================== */
.c{--navy:#1c3c74;--navy-d:#132b56;--deep:#0e2142;--yel:#e8e346;--ink:#1d2734;--muted:#5d6978;--line:#e2e6ec;--soft:#f3f5f8;
  font-family:"Noto Sans",Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;font-size:16px;line-height:1.55;overflow-x:clip}
.c *,.c *::before,.c *::after{box-sizing:border-box}
.c img{display:block;max-width:100%}
.c a{color:inherit;text-decoration:none}
.c .w{max-width:1352px;margin:0 auto;padding:0 24px}
.c h1,.c h2,.c h3,.c p{margin:0}
.c :focus-visible{outline:2px solid var(--yel);outline-offset:2px}

/* заголовки разделов: крупно, плотно, без подписей сверху и без черт */
.c .h{font-size:40px;line-height:1.12;font-weight:700;letter-spacing:-.01em;color:var(--navy)}
.c .h b{display:block;font-weight:700}
.c .h span{display:block;font-weight:300}
.c .lead-t{margin-top:12px;font-size:18px;color:var(--muted);max-width:60ch}
.c .sec{padding:96px 0}
.c .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:40px}

/* кнопки — прямоугольные, как на webasto.com */
.c .b{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:52px;padding:0 28px;font-size:16px;font-weight:700;border:2px solid transparent;cursor:pointer;font-family:inherit;transition:background-color .15s,color .15s,border-color .15s;border-radius:4px}
.c .b-yel{background:var(--yel);color:var(--deep)}
.c .b-yel:hover{background:#f2ee6e}
.c .b-wline{border-color:#fff;color:#fff;background:transparent}
.c .b-wline:hover{background:#fff;color:var(--deep)}
.c .b-yline{border-color:var(--yel);color:var(--yel);background:transparent}
.c .b-yline:hover{background:var(--yel);color:var(--deep)}
.c .b-navy{background:var(--navy);color:#fff}
.c .b-navy:hover{background:var(--navy-d)}
.c .b-nline{border-color:var(--navy);color:var(--navy);background:#fff}
.c .b-nline:hover{background:var(--navy);color:#fff}

/* ---------- баннер во весь экран ---------- */
.c .hero{position:relative;height:480px;background:var(--deep);color:#fff;overflow:hidden}
.c .hsl{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.c .hsl.on{opacity:1}
.c .hsl img{width:100%;height:100%;object-fit:cover}
/* видео фоном: без звука, по кругу; пока грузится — фото слайда; на телефоне и при «меньше анимации» — только фото */
.c .hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:767px){.c .hv{display:none}}
@media (prefers-reduced-motion:reduce){.c .hv{display:none}}
.c .hsl::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,33,66,.88) 0%,rgba(14,33,66,.55) 42%,rgba(14,33,66,0) 72%)}
.c .hero-in{position:absolute;left:0;right:0;bottom:96px;z-index:2}
.c .hero-o{font-size:14px;color:rgba(255,255,255,.75);margin-bottom:10px}
.c .hero .ht{font-size:42px;line-height:1.08;font-weight:800;letter-spacing:-.02em;max-width:22ch}
.c .hero .ht .t1{display:block;font-weight:800}
.c .hero .ht .t2{display:block;font-weight:300}
.c .hero p{margin-top:14px;font-size:17px;line-height:1.55;color:rgba(255,255,255,.85);max-width:48ch}
.c .hero-cta{display:flex;gap:16px;margin-top:24px;flex-wrap:wrap}
.c .hbar{position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:1px solid rgba(255,255,255,.18);background:linear-gradient(to top,rgba(10,20,36,.6),rgba(10,20,36,.25))}
.c .hbar-in{display:grid;grid-template-columns:repeat(4,1fr)}
.c .hb{all:unset;cursor:pointer;position:relative;padding:18px 24px 20px 0;color:rgba(255,255,255,.72);font-size:14px;font-weight:600;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;transition:color .2s}
.c .hb:hover{color:#fff}
.c .hb small{display:block;font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;margin-top:4px}
.c .hb::before{content:"";position:absolute;left:0;right:24px;top:-1px;height:3px;background:transparent}
.c .hb.on{color:#fff}
.c .hb.on::before{background:var(--yel);animation:prog 5s linear}
.c .hb:focus-visible{outline:2px solid var(--yel)}
@keyframes prog{from{right:100%}to{right:24px}}
.c .hero:hover .hb.on::before{animation-play-state:paused}

/* ---------- решения по технике: фото без рамок, подпись поверх ---------- */
.c .seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.c .st{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--navy);color:#fff}
.c .st img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.c .st:hover img{transform:scale(1.04)}
.c .st::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,33,66,0) 45%,rgba(14,33,66,.85) 100%)}
.c .st-t{position:absolute;left:24px;right:24px;bottom:22px;z-index:2}
.c .st-t b{display:block;font-size:20px;line-height:1.25}
.c .st-t small{display:block;margin-top:4px;font-size:14px;color:rgba(255,255,255,.78)}
.c .st-ico{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:rgba(255,255,255,.9)}
.c .st--ico{background:var(--navy)}
.c .st--ico:hover{background:var(--navy-d)}

/* ---------- популярные решения: серая подложка, товары без рамок ---------- */
.c .sec-soft{background:var(--soft)}






.c .pt{background:#fff;display:flex;flex-direction:column}
.c .pt-im{position:relative;display:block;aspect-ratio:4/3;overflow:hidden}
.c .pt-im img{position:absolute;top:20px;left:28px;width:calc(100% - 56px);height:calc(100% - 40px);object-fit:contain}
.c .pt-tag{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:4px;font-size:13px;font-weight:500;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;background:#1c3c74;color:#fff}
.c .pt-b{padding:0 24px 24px;display:flex;flex-direction:column;gap:6px;flex:1}
.c .pt-c{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c .pt-n{font-size:18px;font-weight:700;color:var(--navy);line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:calc(1.3em * 2)}
.c .pt-s{font-size:14px;color:var(--muted)}

/* ---------- фирменный блок webasto.com: фото + тёмно-синяя панель ---------- */
.c .tz{display:grid;grid-template-columns:7fr 5fr;min-height:560px}
.c .tz-im{position:relative;overflow:hidden}
.c .tz-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c .tz-p{background:var(--deep);color:#fff;padding:72px 64px;display:flex;flex-direction:column;justify-content:center;gap:20px}
.c .tz-e{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--yel)}
.c .tz-p h2{font-size:38px;line-height:1.15;font-weight:700}
.c .tz-p p{font-size:17px;color:rgba(255,255,255,.85);max-width:44ch}
.c .tz-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.c .tz-l li{display:flex;gap:12px;font-size:16px}
.c .tz-l b{min-width:150px}
.c .tz-l span{color:rgba(255,255,255,.75)}
.c .tz-p .b{align-self:flex-start;margin-top:8px}

/* ---------- о компании: фото слева, текст справа на белом ---------- */
.c .ab{display:grid;grid-template-columns:6fr 5fr;gap:72px;align-items:center}
.c .ab-im{aspect-ratio:4/3;overflow:hidden}
.c .ab-im img{width:100%;height:100%;object-fit:cover}
.c .ab p{margin-top:20px;font-size:17px;color:var(--muted);max-width:52ch}
.c .facts{list-style:none;margin:28px 0 32px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.c .facts li{display:flex;gap:10px;font-weight:600;color:var(--ink)}
.c .facts svg{flex:none;color:var(--navy);margin-top:3px}

/* ---------- подбор решения: тёмно-синий во всю ширину ---------- */
.c .ld{background:var(--deep);color:#fff;padding:96px 0}
.c .ld-in{display:grid;grid-template-columns:7fr 5fr;gap:72px;align-items:start}
.c .ld h2{font-size:40px;line-height:1.12;font-weight:700}
.c .ld h2 span{display:block;font-weight:300}
.c .ld-sub{margin-top:16px;font-size:17px;color:rgba(255,255,255,.8);max-width:52ch}
.c .grp{margin-top:32px}
.c .grp-l{font-size:15px;font-weight:700;color:rgba(255,255,255,.7);margin-bottom:12px}
.c .chips{display:flex;flex-wrap:wrap;gap:8px}
.c .ch{all:unset;cursor:pointer;height:44px;padding:0 18px;display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.35);font-size:15px;font-weight:600;color:#fff;border-radius:4px}
.c .ch:hover{border-color:#fff}
.c .ch.on{background:#fff;color:var(--deep);border-color:#fff}
.c .ch:focus-visible{outline:2px solid var(--yel)}
.c .lf{background:#fff;color:var(--ink);padding:36px}
.c .lf-t{font-size:20px;font-weight:700;color:var(--navy);margin-bottom:20px}
.c .fl{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;border-radius:4px}
.c .fl span{font-size:13px;font-weight:600}
.c .fl input,.c .fl select{height:50px;border:1px solid #c8d0da;padding:0 14px;font:inherit;font-size:15px;color:var(--ink);background:#fff;border-radius:4px}
.c .fl input:focus,.c .fl select:focus{outline:2px solid var(--navy);outline-offset:-1px;border-color:var(--navy)}
.c .r3{display:grid;grid-template-columns:1fr 1fr 96px;gap:10px}
.c .r2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.c .agree{display:flex;gap:10px;font-size:13px;color:var(--muted);margin:6px 0 20px}

.c .agree a{color:var(--navy);text-decoration:underline}
.c .lf .b{width:100%}

/* ---------- наши работы: логотипы марок строкой ---------- */

.c .brands{border:1px solid var(--line)}
.c .br+.br{border-left:1px solid var(--line)}
.c .br{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:140px;padding:0 14px;text-align:center;line-height:1.3;font-weight:700;color:var(--navy)}
.c .br:hover{background:var(--soft)}
.c .br i,.c .br .br-i{width:72px;height:40px;background:var(--soft)}

/* ---------- полезно знать: три материала, без рамок ---------- */

.c .nc{display:flex;flex-direction:column;height:100%;background:var(--deep);color:#fff}
.c .nc-im{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--navy-d)}
.c .nc-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.c .nc:hover .nc-im img{transform:scale(1.03)}
.c .nc-b{display:flex;flex-direction:column;flex:1;padding:28px 32px 32px}
.c .nc small{font-size:13px;color:rgba(255,255,255,.6)}
.c .nc b{margin-top:8px;font-size:20px;font-weight:700;line-height:1.35;color:#fff;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.c .nc p{margin:14px 0 0;font-size:15px;line-height:1.75;color:rgba(255,255,255,.85);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;overflow:hidden}
.c .nc-go{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:28px;font-size:16px;font-weight:700;color:var(--yel)}
.c .nc-go svg{transition:transform .2s ease}
.c .nc:hover .nc-go svg{transform:translateX(4px)}
.c .nc:focus-visible{outline:3px solid var(--yel);outline-offset:2px}
@media (max-width:767px){.c .nc-b{padding:22px 20px 24px}.c .nc b{font-size:18px}.c .nc p{font-size:14px;-webkit-line-clamp:4;line-clamp:4}.c .nc-go{padding-top:22px}}
.c .nc,.c .nc:hover,.c .nc:hover b{text-decoration:none}

/* ---------- адаптив ---------- */
@media (max-width:1199px){.c .sec{padding:80px 0}.c .hero .ht{font-size:38px}.c .tz-p{padding:56px 44px}.c .ab,.c .ld-in{gap:48px}}
@media (max-width:991px){.c .seg{grid-template-columns:repeat(2,1fr)}.c .tz,.c .ab,.c .ld-in{grid-template-columns:1fr}.c .tz-im{min-height:380px}.c .h,.c .ld h2{font-size:34px}}
@media (max-width:767px){.c .w{padding:0 16px}.c .sec,.c .ld{padding:56px 0}.c .sec-head{flex-direction:column;align-items:flex-start;gap:16px}.c .h,.c .ld h2,.c .tz-p h2{font-size:28px}.c .tz-p{padding:40px 20px}.c .tz-l li{flex-direction:column;gap:2px}.c .facts{grid-template-columns:1fr}.c .lf{padding:24px 18px}}
@media (max-width:479px){.c .seg,.c .r2{grid-template-columns:1fr}.c .seg{gap:4px}.c .st{aspect-ratio:16/10}.c .br{height:110px}}
@media (prefers-reduced-motion:reduce){.c .st img,.c .nc-im img{transition:none}}

/* ---------- ленты (карусели): общее поведение — компонент CarouselKit ---------- */
.c .crsl{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.c .crsl::-webkit-scrollbar{display:none}
.c .crsl > *{scroll-snap-align:start;min-width:0}
.c .pg.crsl{--per:4;--gap:24px}
.c .ns.crsl{--per:4;--gap:24px}
.c .brands.crsl{--per:8;--gap:0px}
.c .sec-r{display:flex;align-items:center;gap:24px}
.c .arr{display:flex;gap:8px}
.c .arb{all:unset;box-sizing:border-box;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid #e2e6ec;background:#fff;color:#1c3c74;border-radius:4px;box-shadow:none}
.c .arb:hover{border-color:#1c3c74;background:#1c3c74;color:#fff;transform:none}
.c .arb:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* ---------- баннер: пауза при наведении — полоса хода стоит ---------- */
.c .hero.is-paused .hb.on::before{animation-play-state:paused}

/* ---------- подбор решения: шаги по очереди ---------- */
.c .ld-l{display:flex;flex-direction:column;gap:14px}
.c .ld-l .ld-sub{margin:4px 0 6px}
.c .grp{display:flex;flex-direction:column;gap:10px;margin:0}
.c .grp-l{font-size:14px;font-weight:700;color:rgba(255,255,255,.7)}
.c .grp.is-done .grp-l{color:rgba(255,255,255,.45)}
.c .subp{padding:14px 16px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05)}
.c .ch{gap:8px}
.c .ch .chk{display:none}
.c .ch.on .chk{display:block}
.c .subp .ch{height:38px;padding:0 14px;font-size:14px}
.c .ch-next{all:unset;cursor:pointer;height:44px;padding:0 18px;display:inline-flex;align-items:center;gap:8px;background:var(--yel);color:var(--deep);font-size:15px;font-weight:700;border-radius:4px}
.c .ch-next:hover{background:#f2ee6e}
.c .ch-next:focus-visible{outline:2px solid #fff;outline-offset:2px}
.c .car-sw{all:unset;cursor:pointer;align-self:flex-start;margin:-6px 0 14px;color:var(--navy);font-size:13px;font-weight:600;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;border-radius:4px}
.c .car-sw:hover{text-decoration-style:solid}
.c .car-sw:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.c .fl.is-off select{background:var(--soft);color:var(--muted)}
.c .fl.err input{border-color:#b42318;background:#fff7f6}
.c .agree.err{color:#b42318}
.c .cap{display:grid;grid-template-columns:44px 1fr;align-items:center;column-gap:12px;padding:10px;margin-bottom:16px;border:1px solid var(--line);background:var(--soft);font-size:14px;border-radius:4px}
.c .cap-k{width:44px;height:36px;background:#5282ff;color:#fff;display:flex;align-items:center;justify-content:center;border-radius:4px}
.c .cap small{grid-column:1/-1;margin-top:4px;font-size:11px;color:var(--muted)}
.c .lf-msg{margin:0 0 14px;padding:10px 14px;background:#fff1f0;color:#8f1d14;font-size:14px}
.c .lf-ok h3{font-size:26px;line-height:1.18;color:var(--navy)}
.c .lf-ok h3 b{display:block;font-weight:700}
.c .lf-ok h3 span{display:block;font-weight:300}
.c .lf-ok p{margin-top:16px;font-size:16px}
.c .lf-ok small{display:block;margin-top:12px;font-size:14px;color:var(--muted)}
.c .lf-ok small a{color:var(--navy);font-weight:700}











@media (max-width:1199px){.c .pg.crsl{--per:3}.c .ns.crsl{--per:3}.c .brands.crsl{--per:6}}
@media (max-width:991px){.c .pg.crsl{--per:2.2}.c .ns.crsl{--per:2.2}.c .brands.crsl{--per:4.5}}
@media (max-width:767px){.c .sec-r{width:100%;justify-content:space-between}.c .arb{width:44px;height:44px}}
@media (max-width:479px){.c .pg.crsl{--per:1.25;--gap:12px}.c .ns.crsl{--per:1.25;--gap:12px}.c .brands.crsl{--per:2.5}}

/* ---------- полоса разделов главной — как в первом варианте (в манере webasto.com), чуть меньше ---------- */
.c .jb{position:relative;z-index:2;margin-top:0;background:linear-gradient(var(--jb-top,#fff) 0 50%,transparent 50% 100%),var(--deep) linear-gradient(100deg,var(--deep) 0%,#0d2f5c 30%,#0a3a74 55%,#05428a 80%,#024696 100%)}
.c .sec-soft + .jb,.c .hp-seo + .jb{--jb-top:var(--soft)}
.c .jb-in{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.c .jb-a{background:#fff}
.c .jb-a:first-child{clip-path:polygon(0 0,100% 0,100% 100%,16px 100%)}
.c .jb>.w{filter:drop-shadow(0 10px 22px rgba(14,33,66,.16))}
.c .jb-a:first-child{padding-left:22px}
.c .jb-a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:70px;padding:10px 10px;text-align:center; font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);line-height:1.3;border-left:1px solid var(--line);transition:color .15s}
.c .jb-a:first-child{border-left:0}
.c .jb-a svg{color:var(--navy);opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.c .jb-a:hover,.c .jb-a:focus-visible{color:var(--navy)}
.c .jb-a:hover svg,.c .jb-a:focus-visible svg{opacity:1;transform:none}
.c .jb-a:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
@media (hover:none){.c .jb-a svg{opacity:.55;transform:none}}
@media (max-width:1199px){.c .jb-a{min-height:60px;font-size:11.5px}}
@media (max-width:991px){.c .jb-in{grid-template-columns:repeat(3,minmax(0,1fr))}.c .jb-a{min-height:54px;font-size:11px}.c .jb-a:nth-child(3n+1){border-left:0;clip-path:polygon(0 0,100% 0,100% 100%,12px 100%);padding-left:18px}.c .jb-a:nth-child(n+4){border-top:1px solid var(--line)}}
@media (max-width:359px){.c .jb-a{font-size:10px;letter-spacing:.02em;padding:6px 4px}.c .jb-a:nth-child(3n+1){padding-left:12px}}
@media (max-width:479px){.c .jb-a{min-height:50px;font-size:10.5px;letter-spacing:.03em;padding:6px 6px}.c .jb-a:nth-child(3n+1){padding-left:14px}}
.c .jb-a span{max-width:100%;overflow-wrap:anywhere}


/* ---------- поведение блока подбора и переходов к разделам — как в первом варианте ---------- */
/* форма на компьютере прилипает к экрану и стоит посередине видимой части, пока слева раскрываются шаги */
@media (min-width:992px){.c .ld-in .lf{align-self:center;position:sticky;top:max(72px, calc(28px + 50vh - var(--fh, 560px) / 2))}}
/* каждый новый шаг появляется плавно */
@keyframes subIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.c .grp{animation:subIn .25s ease}
.c .subp{animation:subIn .2s ease}
@media (prefers-reduced-motion:reduce){.c .grp,.c .subp{animation:none}}
/* переход к разделу («Подобрать решение», полоса разделов): заголовок не прячется под закреплённой шапкой */
.c #sec-tech,.c #sec-products,.c #sec-about,.c #cfg,.c #sec-works,.c #sec-news{scroll-margin-top:72px}

/* «В корзину» и «С установкой» — главные действия: цвета как в первом варианте (красная и синяя заливка), шрифт обычной толщины */
.c .b-buy{background:#cf4141;color:#fff;border-color:#cf4141}
.c .b-buy:hover{background:#b83737;border-color:#b83737;color:#fff}
.c .b-inst{background:#fff;color:var(--navy);border:1px solid var(--line)}
.c .b-inst:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.c .b-buy:focus-visible,.c .b-inst:focus-visible{outline:2px solid var(--navy);outline-offset:2px}



/* карточка товара: цены над своими кнопками (как в первом варианте), наличие и каталожный номер */
.c .pt-m{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:13px;color:var(--muted)}
.c .av{font-weight:600;color:var(--navy);white-space:nowrap}
.c .av.ord{color:var(--muted);font-weight:500}
.c .pt-buy{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;align-items:end;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.c .pb{display:flex;flex-direction:column;gap:10px;min-width:0}
.c .pb b{font-size:20px;font-weight:700;color:var(--ink);white-space:nowrap}
.c .pt-buy .b{width:100%;height:48px;padding:0 10px;font-size:14px;font-weight:500;letter-spacing:0}

/* ---------- «Тепло для любой техники»: список слева, большое фото выбранного вида справа ---------- */
.c .vt{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:stretch}
.c .vt-l{display:flex;flex-direction:column;align-items:flex-start}
.c .vt-list{list-style:none;margin:32px 0 28px;padding:0;width:100%;border-top:1px solid var(--line)}
.c .vt-i{position:relative;display:flex;align-items:center;gap:16px;padding:15px 4px 15px 20px;border-bottom:1px solid var(--line);color:var(--ink)}
.c .vt-i::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;background:transparent;transition:background-color .15s}
.c .vt-i.on::before{background:var(--yel)}
.c .vt-i.on .vt-cn,.c .vt-i:hover .vt-cn{color:var(--navy)}
.c .vt-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.c .vt-cn{font-size:18px;font-weight:700;line-height:1.3}
.c .vt-cs{font-size:14px;color:var(--muted)}
.c .vt-go{flex:none;color:var(--navy);opacity:0;transform:translateX(-6px);transition:opacity .15s,transform .15s}
.c .vt-i.on .vt-go,.c .vt-i:hover .vt-go,.c .vt-i:focus-visible .vt-go{opacity:1;transform:none}
.c .vt-i:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.c .vt-th{display:none;flex:none;width:72px;height:54px;overflow:hidden;background:var(--navy);color:#fff;align-items:center;justify-content:center}
.c .vt-th img{width:100%;height:100%;object-fit:cover}
.c .vt-r{position:relative;margin:0;min-height:540px;overflow:hidden;background:var(--navy)}
.c .vt-r img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c .vt-r::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,33,66,0) 55%,rgba(14,33,66,.85) 100%)}
.c .vt-ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.88)}
.c .vt-r figcaption{position:absolute;left:32px;right:32px;bottom:28px;z-index:2;color:#fff;display:flex;flex-direction:column;gap:4px}
.c .vt-r figcaption .vt-cn{font-size:26px}
.c .vt-r figcaption .vt-cs{font-size:15px;color:rgba(255,255,255,.82)}
@media (max-width:1199px){.c .vt{gap:40px}.c .vt-r{min-height:480px}}
@media (max-width:991px){.c .vt{grid-template-columns:1fr}.c .vt-r{display:none}.c .vt-th{display:flex}.c .vt-list{margin:24px 0 20px}.c .vt-i{padding:12px 4px 12px 16px}}
@media (max-width:479px){.c .vt-th{width:60px;height:45px}.c .vt-cn{font-size:16px}.c .vt-cs{font-size:13px}}

/* ярлыки «Хит» / «Новинка»: синий фон, белый текст, обычное начертание */

/* ---------- «Подберём решение» — размеры как в первом варианте (компактно), оформление второго ---------- */
.c .ld{padding:36px 0}
.c .ld-in{grid-template-columns:minmax(0,1fr) 440px;gap:36px}
.c .ld-l{gap:14px}
.c .ld h2{font-size:34px;line-height:1.12}
.c .ld-l .ld-sub{margin:0;font-size:16px}
.c .grp-l{font-size:13px}
.c .ch,.c .chip{height:auto;min-height:36px;padding:0 14px;font-size:14px;border-radius:999px}
.c .subp .ch,.c .subp .chip{min-height:32px;font-size:13px;padding:0 12px}
.c .ch-next,.c .chip-next{height:auto;min-height:36px;padding:0 16px;font-size:14px;border-radius:999px}
.c .subp{padding:12px 14px}
.c .lf{padding:20px}
.c .lf form{display:flex;flex-direction:column;gap:10px;margin:0}
.c .lf-t{font-size:16px;margin:0}
.c .r3{grid-template-columns:1fr 1fr 84px;gap:8px}
.c .r2{gap:8px}
.c .fl{margin:0;display:flex;flex-direction:column;justify-content:center;gap:0;min-height:52px;padding:6px 12px;border:1px solid var(--line);min-width:0;background:#fff}
.c .fl:focus-within{border-color:var(--navy)}
.c .fl span{font-size:11.5px;font-weight:400;color:var(--muted)}
.c .fl input,.c .fl select{height:auto;border:0;padding:0;outline:0;font:15px "Noto Sans",Arial,sans-serif;color:var(--ink);background:transparent;min-width:0;width:100%}
.c .fl input:focus,.c .fl select:focus{outline:0}
.c .fl.is-off{background:var(--soft)}
.c .fl.is-off select{background:transparent}
.c .fl.err{border-color:#b42318;background:#fff7f6}
.c .fl.err input{background:transparent}
.c .car-sw{margin:-2px 0 0}
.c .agree{margin:0;font-size:12.5px;line-height:1.4;gap:8px}

.c .cap{margin:0;padding:10px}
.c .lf-msg{margin:0}
.c .lf .b{height:48px}
.c .lf-ok h3{font-size:24px}
.c .lf-ok p{margin-top:12px;font-size:15px}
@media (max-width:991px){.c .ld{padding:24px 0}.c .ld-in{grid-template-columns:1fr;gap:24px}}
@media (max-width:767px){.c .ld{padding:16px 0}.c .ld-in{gap:16px}.c .ld-l{gap:10px}.c .ld h2{font-size:26px}.c .lf{padding:14px}.c .lf form{gap:8px}.c .lf-t{font-size:15px}.c .fl{min-height:46px;padding:4px 10px}.c .fl span{font-size:11px}.c .fl input,.c .fl select{font-size:14.5px}.c .r2{grid-template-columns:1fr 1fr}.c .car-sw{font-size:12.5px;margin:-2px 0 2px}.c .agree{font-size:12px;line-height:1.35}.c .cap{grid-template-columns:40px minmax(0,1fr) auto;column-gap:10px;padding:6px 8px}.c .cap-k{width:40px;height:32px}.c .cap small{grid-column:auto;margin:0;font-size:10.5px;text-align:right}.c .lf .b{height:46px}}
@media (max-width:479px){.c .r3{grid-template-columns:minmax(0,1fr) 96px}.c .r3 > .fl:first-child{grid-column:1 / -1}}
@media (max-width:399px){.c .cap{grid-template-columns:40px minmax(0,1fr)}.c .cap small{grid-column:1/-1;text-align:left;margin-top:4px}}
@media (max-width:359px){.c .r2{grid-template-columns:1fr}.c .cap small{display:none}.c .h,.c .ld h2,.c .tz-p h2{font-size:24px}}
@media (orientation:landscape) and (max-height:500px){.c .ld-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* списки в форме — своя стрелка, как в первом варианте */
.c .fl select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6978' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right center/12px no-repeat}
.c .fl select:disabled{color:#a3adb9;cursor:default}

/* «Тепло для любой техники» — компактно: заголовок над блоком, строки ниже, фото по высоте списка */
.c .vt{align-items:stretch}
.c .vt-list{margin:0;border-top:1px solid var(--line)}
.c .vt-i{padding:10px 4px 10px 18px;gap:14px}
.c .vt-i::before{top:9px;bottom:9px}
.c .vt-cn{font-size:16px;line-height:1.3}
.c .vt-cs{font-size:13px}
.c .vt-t{gap:1px}
.c .vt-r{min-height:0;height:auto}
@media (max-width:1199px){.c .vt-r{min-height:0}}
@media (max-width:991px){.c .vt-i{padding:9px 4px 9px 14px}}
@media (max-width:479px){.c .vt-th{width:56px;height:42px}.c .vt-cn{font-size:15px}.c .vt-cs{font-size:12.5px}}
.c .vt-i{padding:8px 4px 8px 18px}
@media (max-width:991px){.c .vt-i{padding:8px 4px 8px 14px}.c .vt-th{width:56px;height:42px}}

/* «Тепло для любой техники»: заголовок и описание — на фото справа; на телефоне — над списком */
.c .vt-l{order:1}
.c .vt-r{order:2}
.c .vt-r::after{background:linear-gradient(180deg,rgba(14,33,66,.88) 0%,rgba(14,33,66,.25) 42%,rgba(14,33,66,.2) 58%,rgba(14,33,66,.88) 100%)}
.c .vt-hd{position:absolute;top:32px;left:32px;right:32px;z-index:2}
.c .vt-hd .h,.c .vt-hd .h b,.c .vt-hd .h span{color:#fff}
.c .vt-hd .h{font-size:34px}
.c .vt-hd .lead-t{margin-top:10px;font-size:16px;color:rgba(255,255,255,.86);max-width:44ch}
.c .vt-r figcaption{right:200px}
.c .vt-more{position:absolute;right:32px;bottom:30px;z-index:2}
.c .vt-r .vt-more,.c .vt-r .vt-more:hover{color:#fff}
@media (max-width:1199px){.c .vt-hd .h{font-size:30px}.c .vt-hd{top:24px;left:24px;right:24px}.c .vt-r figcaption{left:24px;bottom:22px}.c .vt-more{right:24px;bottom:24px}}
@media (max-width:991px){
  .c .vt-r{display:block;order:0;background:none;min-height:0;overflow:visible}
  .c .vt-r img,.c .vt-r .vt-ico,.c .vt-r figcaption,.c .vt-r::after{display:none}
  .c .vt-hd{position:static}
  .c .vt-hd .h b,.c .vt-hd .h span,.c .vt-hd .h{color:var(--navy)}
  .c .vt-hd .h{font-size:34px}
  .c .vt-hd .lead-t{color:var(--muted)}
  .c .vt-more{position:static;display:inline-flex;margin-top:14px}
  .c .vt-r .vt-more,.c .vt-r .vt-more:hover{color:var(--navy)}
}
@media (max-width:767px){.c .vt-hd .h{font-size:28px}}

/* ярлыки товаров — общий стиль сайта: «Хит продаж» жёлтый, «Новинка» синяя */
.c .pt-tag.is-hit{background:#e8e346;color:#1d2734}


/* ---------- переключатели разделов — как в первом варианте: компьютер и планшет — таблетки с полными названиями;
   телефон — одна таблетка на всю ширину, внутри три коротких переключения ---------- */
.c .tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.c .tb{all:unset;box-sizing:border-box;cursor:pointer;height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:14px;font-weight:600;display:inline-flex;align-items:center;white-space:nowrap}
.c .tb:hover{border-color:var(--navy)}
.c .tb.on{background:var(--navy);border-color:var(--navy);color:#fff}
.c .tb:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.c .tb .s{display:none}
@media (max-width:767px){.c .tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;margin:0 0 14px;padding:4px;border:1px solid var(--line);border-radius:999px;background:#fff}.c .tb{justify-content:center;height:36px;padding:0 6px;border:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis}.c .tb .l{display:none}.c .tb .s{display:inline}}
@media (max-width:389px){.c .tb{font-size:12px;padding:0 4px}.c .tabs{gap:2px;padding:3px}}
/* ---------- телефон: ленты листаются пальцем, стрелок нет; сколько карточек видно — как в первом варианте ---------- */
@media (max-width:767px){.c .sec-r .arr{display:none}}
@media (max-width:1199px){.c .pg.crsl{--per:3}}
@media (max-width:991px){.c .pg.crsl{--per:3}.c .ns.crsl{--per:2.2}}
@media (orientation:portrait) and (min-width:768px) and (max-width:1100px){.c .pg.crsl{--per:2.4}.c .ns.crsl{--per:2.2}}
@media (max-width:767px){.c .pg.crsl{--per:1.75;--gap:12px}.c .ns.crsl{--per:1.25;--gap:12px}}
@media (max-width:479px){.c .pg.crsl{--per:1.25}}
@media (orientation:landscape) and (max-height:500px){.c .pg.crsl{--per:3}.c .ns.crsl{--per:3}}
/* ---------- согласие на обработку данных — переключатель «вкл/выкл», как в окне cookie ---------- */
.c .agree{align-items:center}
.c .agree.err input{box-shadow:0 0 0 2px #b42318}

/* ---------- баннер: компьютер — слайды друг над другом с плавной сменой; планшет и телефон (≤991) — лента слайдов,
   листается пальцем и системными жестами (как в первом варианте), точки внизу, полоса брендов скрыта ---------- */
.c .hs{position:absolute;inset:0}
.c .hsl{pointer-events:none}
.c .hsl.on{pointer-events:auto}
.c .hs-dots{display:none}
@media (max-width:991px){
  .c .hero{height:auto}
  .c .hbar{display:none}
  .c .hs{position:relative;inset:auto;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .c .hs::-webkit-scrollbar{display:none}
  .c .hsl{position:relative;inset:auto;flex:0 0 100%;display:flex;min-height:460px;opacity:1;pointer-events:auto;scroll-snap-align:start;scroll-snap-stop:always}
  .c .hsl > img,.c .hsl .hv{position:absolute;inset:0}
  .c .hero-in{position:relative;bottom:auto;align-self:flex-end;width:100%;padding:40px 0 60px}
  .c .hs-dots{display:flex;position:absolute;left:0;right:0;bottom:12px;z-index:3;justify-content:center;gap:4px}
  .c .hs-dots button{all:unset;box-sizing:border-box;cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
  .c .hs-dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5)}
  .c .hs-dots button.on::before{background:#fff}
  .c .hs-dots button:focus-visible{outline:2px solid var(--yel);outline-offset:-2px}
}
@media (max-width:767px){
  .c .hsl{min-height:0}
  .c .hero-in{padding:22px 0 56px}
  .c .hero-o{margin-bottom:8px}
  .c .hero .ht{font-size:28px}
  .c .hero p{margin-top:10px;font-size:15px;line-height:1.5}
  .c .hero-cta{flex-direction:column;align-items:stretch;gap:12px;margin-top:18px}
  .c .hero-cta .b{width:100%;height:48px;padding:0 16px}
}
@media (max-width:389px){.c .hero-in{padding:20px 0 52px}}
@media (orientation:landscape) and (max-height:500px){
  .c .hsl{min-height:0}
  .c .hero-in{padding:20px 0 48px}
  .c .hero .ht{font-size:26px}
  .c .hero p{font-size:14px}
  .c .hero-cta{flex-direction:row;align-items:center;margin-top:14px}
  .c .hero-cta .b{width:auto;height:40px}
}
@media (prefers-reduced-motion:reduce){.c .hsl{transition:none}.c .hs{scroll-behavior:auto}}

/* ---------- телефон вертикально: «Тепло для любой техники» — невидимый контейнер ровно на один экран
   (высота экрана минус синяя полоса шапки 56px и отступы 16px сверху и снизу), заполнен фото-плитками разного размера.
   Скругление плиток 4px. Планшет и компьютер — без изменений ---------- */
@media (max-width:767px) and (orientation:portrait){
  .c .vt-list{display:grid;grid-template-columns:1.3fr .7fr .9fr 1.1fr;grid-template-rows:1.3fr .9fr .7fr 1.8fr .6fr;
    grid-template-areas:"car car car car" "trk trk lcv lcv" "trk trk bus bus" "mch spc spc spc" "bot bot bot rl";
    gap:6px;height:clamp(520px,calc(100svh - 88px),760px);margin:20px 0 0;border-top:0}
  .c .vt-list > li{display:flex;min-width:0;min-height:0}
  .c .vt-list > li:nth-child(1){grid-area:car}
  .c .vt-list > li:nth-child(2){grid-area:trk}
  .c .vt-list > li:nth-child(3){grid-area:lcv}
  .c .vt-list > li:nth-child(4){grid-area:bus}
  .c .vt-list > li:nth-child(5){grid-area:mch}
  .c .vt-list > li:nth-child(6){grid-area:spc}
  .c .vt-list > li:nth-child(7){grid-area:bot}
  .c .vt-list > li:nth-child(8){grid-area:rl}
  .c .vt-i{position:relative;flex:1;display:block;padding:0;border:0;border-radius:4px;overflow:hidden;background:var(--navy);color:#fff}
  .c .vt-i::before{display:none}
  .c .vt-i::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,33,66,0) 40%,rgba(14,33,66,.85) 100%);pointer-events:none}
  .c .vt-th{position:absolute;inset:0;width:auto;height:auto;display:block;background:var(--navy)}
  .c .vt-th img{width:100%;height:100%;object-fit:cover}
  .c .vt-th svg{position:absolute;top:10px;right:10px;color:rgba(255,255,255,.9)}
  .c .vt-t{position:absolute;left:12px;right:12px;bottom:10px;z-index:2}
  .c .vt-cn,.c .vt-i.on .vt-cn,.c .vt-i:hover .vt-cn{font-size:14px;line-height:1.25;color:#fff}
  .c .vt-list > li:nth-child(1) .vt-cn{font-size:18px}
  .c .vt-cs,.c .vt-go{display:none}
  .c .vt-i:focus-visible{outline:2px solid var(--yel);outline-offset:2px}
}

/* разделы с вкладками («Популярные решения», «Полезно знать»): ссылка «Все …» и стрелки — справа, на уровне вкладок, прямо над карточками */
.c .tabs-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;margin-bottom:24px}
.c .tabs-row .tabs{margin:0}
@media (max-width:767px){.c .tabs-row{flex-direction:column-reverse;align-items:stretch;gap:16px;margin-bottom:14px}}

/* =====================================================================
   Дополнения для сайта (данные из админки; в макете — заглушки)
   ===================================================================== */
/* логотип марки в «Наших работах» — в том же месте и размере, что серая заглушка в макете */
/* на сайте место логотипа — span.br-i (тег i с картинкой внутри портится обработкой страницы на сайте) */
.c .br .br-i{display:flex;align-items:center;justify-content:center;overflow:hidden}
.c .br .br-i.has-logo{background:none}
.c .br .br-i img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
/* товар без фото */
.c .pt-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--soft);color:var(--muted);font-size:13px;text-align:center}
/* описание слайда из админки приходит абзацами — те же отступы, что у абзаца в макете */
.c .hero .hero-d p + p{margin-top:8px}
/* Яндекс SmartCaptcha (на месте заглушки .cap макета); пока капча не нужна — места не занимает */
.c .lf-cap:empty{display:none}
.c .lf-cap{min-height:100px}
/* SEO-текст главной (поле «Контент») — оформление текста как на всех страницах (.wx-o .atext в site.css), отступы — как у разделов макета */
/* скрытые вкладки и поля формы: правила макета (display:flex/grid) не должны показывать элементы с hidden */
.c [hidden]{display:none}
/* обёртки, которых нет в макете (шаги подбора и группы полей формы выводит скрипт) — не влияют на раскладку */
.c .ld-steps,.c .lf-grp{display:contents}
.c .ld-steps[hidden],.c .lf-grp[hidden]{display:none}
/* общее поведение лент — как в компоненте макета CarouselKit: палец, мышь (перетаскивание), тачпад, клавиатура */
.c .crsl{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;cursor:grab}
.c .crsl:focus-visible,.c [data-swipe]:focus-visible{outline:2px solid #1c3c74;outline-offset:4px}
.c .crsl.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.c .crsl.is-drag *{pointer-events:none}
.c .crsl a,.c .crsl img,.c [data-swipe] img{-webkit-user-drag:none}
.c [data-swipe]{touch-action:pan-y}
.c .crsl{touch-action:pan-x pan-y}
@media (hover:none){.c .crsl{cursor:auto}}
/* как проходит обращение: компактная полоса под формой подбора */
.c .flow{display:grid;grid-template-columns:180px minmax(0,1fr);gap:32px;margin-top:56px;padding-top:32px;border-top:1px solid rgba(255,255,255,.14)}
.c .flow-h{font-size:14px;font-weight:700;letter-spacing:.06em;line-height:1.45;text-transform:uppercase;color:var(--yel);padding-top:7px}
.c .flow-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 32px}
.c .flow-l li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 14px;align-items:start}
.c .flow-n{grid-row:span 2;width:36px;height:36px;border-radius:50%;background:var(--yel);color:var(--deep);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.c .flow-l b{font-size:16px;line-height:1.3;padding-top:7px;color:#fff}
.c .flow-l small{font-size:14px;line-height:1.5;color:rgba(255,255,255,.72)}
@media (max-width:1199px){.c .flow{grid-template-columns:1fr;gap:20px}.c .flow-h{padding-top:0}}
@media (max-width:991px){.c .flow-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.c .flow{margin-top:40px;padding-top:28px}}
@media (max-width:479px){.c .flow-l{grid-template-columns:1fr;gap:16px}}
/* нам доверяют: сертификаты + отзывы с Яндекс Карт */
.c #sec-trust{padding-top:0;scroll-margin-top:72px}
.c .tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.c .tr-c{display:flex;flex-direction:column;gap:16px;padding:40px;min-width:0}
.c .tr-cert{background:var(--soft)}
.c .tr-rev{background:var(--deep);color:#fff}
.c .tr-e{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.c .tr-rev .tr-e{color:var(--yel)}
.c .tr-c h3{font-size:26px;line-height:1.2;font-weight:700;color:var(--navy)}
.c .tr-rev h3{color:#fff}
.c .tr-t{font-size:16px;line-height:1.6;color:var(--muted);max-width:52ch}
.c .tr-rev .tr-t{color:rgba(255,255,255,.8)}
.c .tr-docs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:4px 0 8px}
.c .tr-doc{all:unset;box-sizing:border-box;cursor:zoom-in;display:block;aspect-ratio:3/4;background:#fff;border:1px solid var(--line);padding:6px;transition:box-shadow .2s ease,transform .2s ease}
.c .tr-doc img{display:block;width:100%;height:100%;object-fit:contain}
.c .tr-doc:hover{box-shadow:0 8px 20px rgba(14,33,66,.14);transform:translateY(-2px)}
.c .tr-doc:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.c .tr-cert .more{align-self:flex-start;margin-top:auto}
.c .tr-rate{display:flex;align-items:center;gap:20px;margin:4px 0}
.c .tr-num{font-size:64px;line-height:1;font-weight:700;color:#fff;letter-spacing:-.02em}
.c .tr-side{display:flex;flex-direction:column;gap:8px}
.c .tr-stars{display:flex;gap:4px;color:var(--yel)}
.c .tr-stars svg{display:block}
.c .tr-cnt{font-size:15px;color:rgba(255,255,255,.75)}
.c .tr-cnt span{white-space:nowrap}
@media (max-width:767px){.c .tr-num{font-size:52px}.c .tr-stars svg{width:24px;height:24px}}
@media (max-width:359px){.c .tr-rate{gap:14px}.c .tr-num{font-size:44px}.c .tr-stars svg{width:20px;height:20px}}
.c .tr-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:8px}
.c .cert-lb{position:fixed;inset:0;z-index:1000;background:rgba(14,33,66,.88);display:flex;align-items:center;justify-content:center;padding:56px 16px 24px}
.c .cert-lb img{max-width:min(100%,900px);max-height:100%;object-fit:contain;background:#fff}
.c .cert-x{all:unset;cursor:pointer;position:absolute;top:12px;right:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:#fff;border-radius:4px}
.c .cert-x:hover{background:rgba(255,255,255,.12)}
.c .cert-x:focus-visible{outline:2px solid var(--yel)}
@media (hover:none){.c .tr-doc:hover{transform:none;box-shadow:none}}
@media (max-width:991px){.c .tr{grid-template-columns:1fr}}
@media (max-width:767px){.c .tr-c{padding:28px 20px}.c .tr-c h3{font-size:22px}.c .tr-t{font-size:15px}}
@media (max-width:479px){.c .tr-docs{gap:8px}.c .tr-doc{padding:3px}.c .tr-btns .b{width:100%}}
/* частые вопросы */
.c #sec-faq{scroll-margin-top:72px}
.c .fqs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"h l" "a l";grid-template-rows:auto 1fr;gap:28px 72px;align-items:start}
.c .fqs-h{grid-area:h;display:flex;flex-direction:column;gap:20px}
.c .fqs-h .lead-t{margin:0}
.c .fqs-h .more{align-self:flex-start}
.c .fqa{grid-area:l;border-top:1px solid var(--line)}
.c .fq-ask{grid-area:a;padding:28px;background:var(--soft);display:flex;flex-direction:column;gap:12px}
.c .fq-ask > b{font-size:20px;line-height:1.3;color:var(--navy)}
.c .fq-ask > span{font-size:15px;color:var(--muted)}
.c .fq-ask .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.c .fq-i{border-bottom:1px solid var(--line)}
.c .fq-h{margin:0;font:inherit}
.c .fq-b{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:20px;align-items:center;min-height:72px;padding:18px 0;font-size:18px;font-weight:600;line-height:1.4;color:var(--navy)}
.c .fq-b:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.c .fq-ic{width:36px;height:36px;border-radius:50%;background:var(--soft);color:var(--navy);display:flex;align-items:center;justify-content:center;transition:transform .2s ease,background-color .15s,color .15s}
.c .fq-i.on .fq-ic{transform:rotate(180deg);background:var(--navy);color:#fff}
.c .fq-a{padding:0 56px 24px 0;font-size:16px;line-height:1.7;color:var(--ink);overflow-wrap:break-word}
.c .fq-a>*{margin:0}
.c .fq-a>*+*{margin-top:12px}
.c .fq-a a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.c .fq-a ul,.c .fq-a ol{padding-left:20px}
.c .fq-a img{max-width:100%;height:auto}
@media (hover:hover){.c .fq-b:hover .fq-ic{background:var(--navy);color:#fff}}
@media (prefers-reduced-motion:reduce){.c .fq-ic{transition:none}}
@media (max-width:991px){.c .fqs{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "l" "a";grid-template-rows:auto;gap:28px}}
@media (max-width:767px){.c .fq-b{min-height:64px;padding:16px 0;font-size:16px;gap:14px;grid-template-columns:minmax(0,1fr) 32px}.c .fq-ic{width:32px;height:32px}.c .fq-a{padding-right:0;font-size:15px}.c .fq-ask{padding:24px 20px}.c .fq-ask .b{width:100%}}

/* SEO-текст главной: слева заголовок, справа текст — свёрнут, «Читать полностью» раскрывает */
.c .hp-seo{background:var(--soft)}
.c .seo-in{background:transparent;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:start}
.c .seo-h{display:flex;flex-direction:column;gap:12px;position:sticky;top:96px}
.c .seo-in.no-h{grid-template-columns:minmax(0,1fr)}.c .seo-in.no-h .seo-h{display:none}
.c .seo-b{min-width:0}
.c .seo-t{max-width:none;font-size:15.5px;line-height:1.7;color:var(--ink)}
.c .seo-t h1,.c .seo-t h2{font-size:21px;margin-top:30px;line-height:1.3}
.c .seo-t h3{font-size:18px}
.c .seo-t.cut{max-height:340px;overflow:hidden;position:relative}
.c .seo-t.cut::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(rgba(243,245,248,0),var(--soft));pointer-events:none}
.c .seo-more{margin-top:18px}
.c .seo-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.c .seo-more[hidden]{display:none}
@media (max-width:991px){.c .seo-in{grid-template-columns:minmax(0,1fr);gap:20px}.c .seo-h{position:static}}
@media (max-width:767px){.c .seo-t.cut{max-height:300px}.c .seo-more{width:100%}}
.c .seo-e{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.c .seo-h .h{font-size:30px;line-height:1.18}
.c .seo-h .wx-bar{display:block;width:44px;height:4px;background:var(--yel)}
@media (max-width:767px){.c .seo-h .h{font-size:24px}}

/* преимущества внутри SEO-текста: 4 карточки — линейный значок в тёмно-синем круге, заголовок, текст */
.c .seo-t .seo-adv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.c .seo-adv-i{display:flex;flex-direction:column;gap:10px;padding:22px 24px;background:#fff;border:1px solid var(--line);transition:border-color .15s,box-shadow .15s}
.c .seo-adv-i:hover{border-color:#cfd8e4;box-shadow:0 8px 24px rgba(14,33,66,.08)}
.c .seo-adv-ic{width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background-color .15s,color .15s}
.c .seo-adv-i:hover .seo-adv-ic{background:var(--yel);color:var(--navy)}
.c .seo-adv-ic img{width:56px;height:56px;object-fit:contain}
.c .seo-t .seo-adv-i h3{margin:4px 0 0;font-size:17px;line-height:1.3;color:var(--navy)}
.c .seo-t .seo-adv-i p{margin:0;font-size:15px;line-height:1.6}
@media (max-width:767px){.c .seo-t .seo-adv{grid-template-columns:1fr}}