.hero{padding:clamp(20px,3vw,40px) 0 clamp(56px,7vw,100px)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.duo__i{position:relative;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;background:var(--surface-tex),var(--surface);border:1px solid var(--line);text-decoration:none;transition:border-color .2s}
.duo__i:hover{border-color:var(--acc)}
.duo__i .plate{border-radius:0;aspect-ratio:5/4}
.duo__i .plate img{transition:transform .5s}
.duo__i:hover .plate img{transform:scale(1.03)}
.duo__cap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px}
.duo__cap--mir{flex-direction:row-reverse;text-align:right}
.duo__cap b{display:block;font-family:var(--head);font-weight:500;font-size:clamp(16px,1.5vw,20px)}
.duo__cap span{font-family:var(--mono);font-size:13px;color:var(--mute)}
.duo__cap i{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-style:normal;transition:all .2s}
.duo__i:hover .duo__cap i{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
@media (max-width:699px){.duo{grid-template-columns:1fr}}
.hero__txt{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-top:clamp(28px,4vw,56px)}
.hero__l{display:flex;flex-direction:column;gap:18px}
.hero__sub{font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--mute);max-width:560px;text-wrap:pretty}
.hero__r{display:flex;flex-direction:column;gap:20px}
.hero__btns{display:flex;flex-wrap:wrap;gap:10px}
.hero__btns .btn{flex:1 1 200px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.stats div{padding:14px 0 0 14px;display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--line)}
.stats div:first-child{padding-left:0;border-left:0}
.stats b{font-family:var(--mono);font-size:clamp(18px,1.8vw,22px);font-weight:500}
.stats span{font-size:13px;color:var(--mute)}
@media (max-width:899px){.hero__txt{grid-template-columns:1fr}}
.how{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.how__img{position:relative;aspect-ratio:5/4;border-radius:10px;overflow:hidden;background:#1A1B1D}
.how__img img{width:100%;height:100%;object-fit:cover}
.how__img>img{transition:filter .35s ease}
.how__img.is-on>img{filter:brightness(.32) saturate(.4)}
.hp{position:absolute;pointer-events:none;opacity:0;transition:opacity .35s ease}
.hp.on{opacity:1}
.hp img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:brightness(1.12) drop-shadow(0 0 2px rgba(190,240,140,.9)) drop-shadow(0 0 10px rgba(125,194,67,.75))}
.hp i{position:absolute;inset:0;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%) no-repeat;background-size:260% 100%;background-position:130% 0;mix-blend-mode:screen}
.hp--fill img{opacity:0}
.hp--fill{filter:drop-shadow(0 0 8px rgba(125,194,67,.8))}
.hp--fill i{background-color:rgba(125,194,67,.5);mix-blend-mode:normal}
.hp.on i{animation:sheen 1.9s cubic-bezier(.4,0,.2,1) .2s infinite}
/* 23.10.2026 (Игорь): для щели - чистая ровная светящаяся линия вместо рваного крапа; край фланца подсвечиваем так же (на белом ореол не виден) */
.hp[data-n="4"]{display:none}
.how__edge{position:absolute;height:4px;border-radius:3px;transform-origin:0 50%;opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:4;
  background:linear-gradient(90deg,transparent,#9bf15e,#e8ffd0,#9bf15e,transparent);box-shadow:0 0 10px 3px rgba(125,194,67,.85)}
.how__edge--fl{left:8%;top:80%;width:36.5%;transform:rotate(-28.8deg) translateY(-2px)}
.how__edge--slit{left:13.5%;top:86.5%;width:68.6%;transform:rotate(-17.3deg) translateY(-2px)}
.how__img.on-1 .how__edge--fl,.how__img.on-4 .how__edge--slit{opacity:1}
@media (prefers-reduced-motion:reduce){.how__edge{transition:none}}
@keyframes sheen{0%{background-position:130% 0}70%,100%{background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){.hp.on i{animation:none}}
.how__list{list-style:none;margin:0;padding:0}
.how__list li{padding:16px 0 16px 18px;position:relative;border-top:1px solid var(--line);cursor:default;transition:opacity .2s}
.how__list.dim li:not(.on){opacity:.45}
.how__list li::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:2px;background:var(--line);transition:background .2s,box-shadow .2s}
.how__list li.on::before{background:var(--acc);box-shadow:0 0 12px var(--acc)}
.how__list b{display:block;font-size:17px;font-weight:600;margin-bottom:4px}
.how__list p{font-size:15px;line-height:1.5;color:var(--mute)}
@media (max-width:899px){.how{grid-template-columns:1fr}.how__img{position:sticky;top:calc(var(--hdr-h) + 8px);z-index:2;box-shadow:0 12px 24px rgba(0,0,0,.45)}}
.adv{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.adv__i{background:var(--surface-tex),var(--surface);border:1px solid var(--line);border-radius:10px;padding:24px;display:flex;flex-direction:column;gap:20px;min-height:220px}
.adv__sign{display:block;height:44px;font-family:var(--head);font-weight:500;font-size:40px;line-height:44px;color:var(--acc-t);letter-spacing:-.02em;white-space:nowrap}
.adv__sign--sm{font-size:38px}
.adv__ico{display:inline-block;height:.75em;width:auto;vertical-align:baseline;overflow:visible}
.adv__i h3{font-size:18px;font-weight:600;margin-top:auto;margin-bottom:6px}
.adv__i p{font-size:15px;line-height:1.55;color:var(--mute);text-wrap:pretty}
.cat-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-width:520px;margin-bottom:20px}
.cat-tabs button{min-height:56px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:600}
.cat-tabs button small{font-size:12px;font-weight:500;color:var(--mute)}
.cat-tabs button.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.cat-tabs button.on small{color:inherit;opacity:.75}
.cat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:1099px) and (min-width:900px){.cat{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;background:var(--surface-tex),var(--surface)}
.card .plate{aspect-ratio:5/4;border-radius:0;background:var(--plate-card)}
.card .plate img{transition:opacity .28s ease}
.card .plate img.fade{opacity:0}
.card__body{padding:18px;display:flex;flex-direction:column;gap:12px;flex:1}
.card__code{font-family:var(--mono);font-size:12px;color:var(--mute)}
.card h3{font-size:18px;font-weight:600;margin:4px 0}
.card p{font-size:14px;line-height:1.45;color:var(--mute)}
.card__opts{display:flex;flex-wrap:wrap;gap:4px}
.card__opts span{font-family:var(--mono);font-size:12px;padding:3px 7px;border-radius:4px;border:1px solid var(--line);color:var(--mute)}
.card__set{margin-top:auto;display:flex;flex-direction:column}
.card__row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;font-size:14px;color:var(--mute)}
.mods{display:flex;gap:4px}
.card__row--stack{flex-direction:column;align-items:stretch;gap:8px;padding:6px 0}
.card__row--stack .mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.card__row--c3 .mods{grid-template-columns:repeat(3,minmax(0,1fr))}
.card__row--stack .mod{justify-content:flex-start;overflow:hidden;text-overflow:ellipsis}
.mod{height:34px;padding:0 8px;white-space:nowrap;border:1px solid var(--line);border-radius:6px;display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:var(--mute);transition:border-color .15s,color .15s}
.mod:hover{border-color:var(--mute)}
.mod.on{border-color:var(--acc);color:var(--ink)}
.mod i{flex:none;border:1.5px solid currentColor}
.mod__r{width:16px;height:7px;border-radius:1px}
.mod__c{width:11px;height:11px;border-radius:50%}
.mod__o{width:12px;height:12px;border-radius:50%;position:relative}
.mod.on i{border-color:var(--acc)}
.mod.on .mod__o{background:radial-gradient(circle,var(--acc) 0 3px,transparent 3.5px)}
.sw{display:flex;gap:2px}
.sw button{width:44px;height:44px;display:grid;place-items:center}
.sw i{width:24px;height:24px;border-radius:50%;box-shadow:0 0 0 2px var(--surface),0 0 0 2px transparent;transition:box-shadow .15s}
.sw .b i{background:#0B0B0C;border:1px solid #555}
.sw .w i{background:#F4F4F4;border:1px solid #999}
.sw button.on i{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--acc)}
.card__add{height:46px;border-radius:6px;border:1px solid var(--line);display:grid;place-items:center;font-size:15px;font-weight:500;transition:all .15s}
.card__add:hover{border-color:var(--acc)}
.card__add.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
@media (max-width:899px){
  .cat{grid-auto-flow:column;grid-auto-columns:80%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut)*-1);padding:0 var(--gut) 8px;scroll-padding:0 var(--gut);scrollbar-width:none}
  .cat::-webkit-scrollbar{display:none}
  .card{scroll-snap-align:start}
}
.tech{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:start}
.tech__main,.tech__side{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (max-width:899px){.tech{grid-template-columns:1fr}}
.tbl__t{font-size:17px;font-weight:600;display:flex;flex-direction:column;gap:2px;margin:4px 0 0}
.tbl__t small{font-size:13px;font-weight:400;color:var(--mute)}
.tbl{border:1px solid var(--line);border-radius:10px;overflow-x:auto;background:var(--surface)}
.tbl table{width:100%;border-collapse:collapse}
.tbl th{background:var(--surface-2);font-size:13px;color:var(--mute);font-weight:500;text-align:left;padding:13px 16px}
.tbl td{border-top:1px solid var(--line);font-family:var(--mono);font-size:15px;padding:11px 16px}
.tbl td.f{color:var(--acc-t)}
.tbl tr.on td{background:rgba(125,194,67,.12)}
.tbl tr.on td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
@media (max-width:480px){.tbl th,.tbl td{padding-left:12px;padding-right:8px}}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.calc__w{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mute)}
.calc__w .chips{grid-template-columns:repeat(3,1fr)}
.calc__w .chips button{min-height:42px;font-family:var(--mono);font-size:14px}
.calc label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mute)}
.calc .field{font-family:var(--mono);font-size:20px;height:52px}
.calc__out{display:flex;flex-direction:column;gap:2px}
.calc__out span{font-size:13px;color:var(--mute)}
.calc__out b{font-family:var(--mono);font-size:24px;font-weight:500;color:var(--acc-t)}
.note{font-size:13px;line-height:1.5;color:var(--mute)}
.acc{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.acc>button{width:100%;min-height:60px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;text-align:left}
.acc>button b{display:block;font-size:16px;font-weight:600}
.acc>button small{font-size:13px;color:var(--mute)}
.acc>button i{font-style:normal;font-family:var(--mono);font-size:20px}
.acc table{width:100%;border-collapse:collapse}
.acc th{background:var(--surface-2);font-size:12px;color:var(--mute);font-weight:500;text-align:left;padding:10px 18px;border-top:1px solid var(--line)}
.acc td{border-top:1px solid var(--line);font-family:var(--mono);font-size:15px;padding:11px 18px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,250px),1fr));grid-auto-flow:dense;gap:8px}
.gal button{position:relative;isolation:isolate;outline:0;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--surface);text-align:left}
.gal button:first-child{grid-column:span 2;aspect-ratio:16/10}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gal button:hover img{transform:scale(1.03)}
.gal span{position:absolute;left:10px;right:10px;bottom:10px;width:fit-content;padding:5px 9px;background:rgba(12,13,14,.86);color:#fff;border-radius:4px;font-size:13px;font-weight:500;border:0;box-shadow:none}
.stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0 20px}
.stages li{display:flex;flex-direction:column;gap:10px;padding:20px 0;border-top:1px solid var(--line)}
.stages__n{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;color:var(--acc-t)}
.stages__n::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--acc),transparent)}
.stages b{font-size:19px;font-weight:600}
.stages p{font-size:15px;line-height:1.5;color:var(--mute);text-wrap:pretty}
.dl-list{margin-bottom:clamp(48px,6vw,80px)}
.dealers{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:12px}
.dealer{border:1px solid var(--line);border-radius:10px;padding:22px;display:flex;flex-direction:column;gap:6px;background:var(--surface-tex),var(--surface)}
.dealer small{font-family:var(--mono);font-size:12px;color:var(--acc-t)}
.dealer b{font-size:18px;font-weight:600}
.dealer a{font-size:15px;color:var(--mute);text-decoration:none}
.dealer a:hover{color:var(--ink)}
.dl{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.dl .head{margin-bottom:28px}
.perks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.perks li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;padding:18px 0;border-top:1px solid var(--line)}
.perks__n{font-family:var(--head);font-weight:500;font-size:20px;color:var(--acc-t)}
.perks b{display:block;font-size:17px;font-weight:600;margin-bottom:4px}
.perks p{font-size:15px;line-height:1.5;color:var(--mute)}
.dl__form{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2.5vw,32px);border-radius:12px;border:1px solid var(--line);background:var(--surface-tex),var(--surface)}
.dl__title{font-family:var(--head);font-weight:500;font-size:20px;margin-bottom:4px}
.dl__two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:899px){.dl{grid-template-columns:1fr}}
@media (max-width:480px){.dl__two{grid-template-columns:1fr}}
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(28px,5vw,80px);align-items:start}
.faq__side{position:sticky;top:calc(var(--hdr-h) + 24px);display:flex;flex-direction:column;align-items:flex-start}
.faq__side .head{margin-bottom:24px}
.faq__list{display:flex;flex-direction:column;gap:8px}
.faq details{border:1px solid var(--line);border-radius:10px;background:var(--surface-tex),var(--surface);transition:border-color .2s}
.faq details[open]{border-color:var(--acc)}
.faq summary{list-style:none;cursor:pointer;min-height:64px;padding:16px 20px;display:grid;grid-template-columns:36px minmax(0,1fr) 32px;align-items:center;gap:12px;font-size:17px;font-weight:600;line-height:1.35}
.faq summary span{font-family:var(--mono);font-size:13px;font-weight:400;color:var(--mute)}
.faq details[open] summary span{color:var(--acc-t)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-size:16px;font-weight:400;transition:all .2s}
.faq details[open] summary::after{content:'−';background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.faq details p{padding:0 64px 20px 68px;font-size:16px;line-height:1.6;color:var(--mute);text-wrap:pretty}
@media (max-width:899px){.faq{grid-template-columns:1fr}.faq__side{position:static}}
@media (max-width:560px){.faq summary{grid-template-columns:28px minmax(0,1fr) 32px;padding:14px 16px;font-size:16px}.faq details p{padding:0 16px 18px 56px}}
.price{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}
.price .head{margin:0}
.price form{display:flex;flex-direction:column;gap:12px}
@media (max-width:899px){.price{grid-template-columns:1fr}}
.gal button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* 21.10.2026: картинки с увеличением - курсор-лупа и значок в углу (js/gallery.js, data-zoom) */
:where([data-zoom]){position:relative}
[data-zoom]{cursor:zoom-in}
[data-zoom]::after{content:'';position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;background:rgba(12,13,14,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center/20px no-repeat;border:1px solid rgba(255,255,255,.25);opacity:.85;transition:opacity .2s,transform .2s;pointer-events:none}
[data-zoom]:hover::after{opacity:1;transform:scale(1.08)}
