@import "fonts.css";

/* ===================== ТОКЕНЫ ===================== */
:root{
  --green-50:#E6F8EF; --green-100:#C2EED8; --green-200:#8CDDB5; --green-300:#4DCA8C;
  --green-400:#17C163; --green-500:#00B353; --green-600:#009A47; --green-700:#00803B;
  --green-800:#00602C; --green-900:#00401D;

  --ink-900:#33383A; --ink-800:#40464A; --ink-600:#585F61; --ink-400:#8A928E;
  --ink-200:#D8DEDB; --ink-100:#EFF2F0; --paper:#F6F8F7; --white:#FFFFFF;

  --font-sans:"Inter",-apple-system,"Segoe UI",Arial,sans-serif;
  --font-mono:"Inter",-apple-system,"Segoe UI",Arial,sans-serif;

  --container:1320px; --container-text:760px; --gutter:24px;
  --radius:14px; --radius-sm:8px;

  --fs-slogan: clamp(1.5rem, 3.4vw, 2.5rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body: clamp(1rem, 1.1vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-label: 0.6875rem;
  --fs-stat: clamp(2.25rem, 6vw, 5rem);

  --header-h: 68px;
  --anchor-h: 48px;

  --ease-out: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink-100); color:var(--ink-900);
  font-family:var(--font-sans); font-size:var(--fs-body); line-height:1.55;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
ul{list-style:none}
button{font:inherit; cursor:pointer; background:none; border:0; color:inherit}
input,select,textarea{font:inherit}
h1,h2,h3{font-weight:700; letter-spacing:-.02em; line-height:1.15}
h1{font-size:var(--fs-h2)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3); font-weight:600; line-height:1.3}
p{max-width:70ch}
.container{max-width:var(--container); margin:0 auto; padding:0 var(--gutter)}
.container-text{max-width:var(--container-text)}
body{overflow-x:hidden}
.grid, .g2, .g3, .g4, .calc-grid, .model-switch, .model-detail, .foot-grid, .stat-grid{min-width:0}
.grid>*, .calc-grid>*, .model-switch>*, .model-detail>*, .foot-grid>*, .stat-grid>*{min-width:0}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius)}
.table-scroll table.tbl{border-radius:0}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
}

/* ===================== ТИПОГРАФИКА-УТИЛИТЫ ===================== */
.caps-slogan{font-size:var(--fs-slogan); font-weight:700; text-transform:uppercase; letter-spacing:.04em; line-height:1.08}
.sub{color:var(--ink-600); max-width:62ch; font-size:var(--fs-body); margin-top:12px}
.small{font-size:var(--fs-small); color:var(--ink-600)}
.mono{font-family:var(--font-mono)}
.stub{background:#fff2a8; color:var(--ink-900); padding:0 5px; border-radius:4px; font-weight:600}

/* ===================== КНОПКИ ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:var(--radius-sm); font-size:14px; font-weight:600;
  transition:transform .15s var(--ease-out), background-color .15s, border-color .15s, color .15s;
  white-space:nowrap; border:1px solid transparent;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--green-500); color:var(--white)}
.btn-primary:hover{background:var(--white); color:var(--green-600)}
.btn-ghost{background:transparent; color:var(--ink-900); border-color:var(--ink-200)}
.btn-ghost:hover{background:var(--ink-900); color:var(--white); border-color:var(--ink-900)}
.btn-ghost.on-dark{color:var(--white); border-color:rgba(255,255,255,.25)}
.btn-ghost.on-dark:hover{background:var(--white); color:var(--ink-900); border-color:var(--white)}
.btn-white{background:var(--white); color:var(--ink-900)}
.btn-white:hover{background:var(--ink-900); color:var(--white)}
.btn-dark{background:var(--ink-900); color:var(--white)}
.btn-dark:hover{background:transparent; color:var(--ink-900); border-color:var(--ink-200)}
.btns{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px}

/* ===================== ЧИПЫ ===================== */
.chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.chip{display:inline-flex; align-items:center; border:1px solid var(--ink-200); background:var(--white); border-radius:20px; padding:7px 14px; font-size:var(--fs-small); color:var(--ink-600)}
.chip--dark{border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:var(--white)}
.chip--accent{border-color:var(--green-500); color:var(--green-700)}

/* ===================== СЕКЦИИ ===================== */
section{padding:clamp(56px,7vw,104px) 0}
section.alt{background:var(--white); border-top:1px solid var(--ink-200); border-bottom:1px solid var(--ink-200)}
section.dark{background:var(--ink-900); color:var(--white)}
section.dark .sub{color:var(--ink-400)}
section.dark h2, section.dark h3{color:var(--white)}
.section-head{max-width:var(--container-text); margin-bottom:36px}
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)}
.reveal.in{opacity:1; transform:none}

/* ===================== БЛОКИ УВЕЛИЧИВАЮТСЯ НА ПОЛНЫЙ ЭКРАН ПРИ СКРОЛЛЕ (привязано к скроллу, без transition) ===================== */
main > section{background:var(--paper); transform-origin:center center; will-change:transform}

/* ===================== СЕТКА / КАРТОЧКИ ===================== */
.grid{display:grid; gap:20px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--white); border:1px solid var(--ink-200); border-radius:var(--radius); padding:22px; transition:transform .15s var(--ease-out), box-shadow .15s}
.card.dark{background:var(--ink-800); border-color:rgba(255,255,255,.1)}
a.card.clickable, .card.clickable{cursor:pointer; text-decoration:none; display:block; color:inherit}
a.card.clickable:hover, .card.clickable:hover{transform:translateY(-3px); box-shadow:0 4px 0 0 var(--green-500)}
.card .small{margin-top:8px}
.card h3{margin-bottom:6px}

/* ===================== БЛОК «СОЖ ТУХНЕТ» — ИКОНКИ ПО ШАГАМ ===================== */
.why-icon{width:28px; height:28px; display:block; margin-bottom:12px}
.why-card:nth-child(1) .why-icon{color:var(--green-700)}
.why-card:nth-child(2) .why-icon{color:#E0B400}
.why-card:nth-child(3) .why-icon{color:#E8720C}
.why-card:nth-child(4) .why-icon{color:#FD3900}

/* ===================== ЗАГЛУШКИ (фото/видео) ===================== */
.ph{
  position:relative; background:var(--ink-100); border:1px dashed var(--ink-200); border-radius:var(--radius);
  min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:10px; color:var(--ink-400); font-size:12.5px; padding:20px; overflow:hidden;
}
.ph::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background:repeating-linear-gradient(135deg, var(--ink-200) 0 1px, transparent 1px 14px);
}
.ph .ph-icon{position:relative; width:38px; height:38px; color:var(--ink-400); flex:none}
.ph .ph-label{position:relative; max-width:34ch; line-height:1.5}
.ph.tall{min-height:300px}
.ph-photo{border-radius:var(--radius); overflow:hidden; background:var(--white); min-height:180px}
.ph-photo.tall{min-height:300px}
.ph-photo img{width:100%; height:100%; object-fit:cover; display:block}
.ph.short{min-height:120px}
.ph.video .ph-icon{width:52px;height:52px}
.dark .ph{background:var(--ink-800); border-color:rgba(255,255,255,.15); color:var(--ink-400)}
.dark .ph::before{background:repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 1px, transparent 1px 14px)}

/* ===================== ПОЛЯ ФОРМЫ ===================== */
.field-wrap{margin-bottom:14px}
.legal > *{max-width:860px}
.legal h2{font-size:clamp(1.15rem,2vw,1.4rem); margin:34px 0 12px}
.legal p{margin-bottom:10px; line-height:1.65}
.legal ul{list-style:disc; padding-left:24px; margin-bottom:10px}
.legal li{margin-bottom:6px; line-height:1.6}
.legal a{text-decoration:underline}
.form-cols{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
@media(max-width:700px){.form-cols{grid-template-columns:1fr}}
.field-label{display:block; font-size:var(--fs-small); color:var(--ink-600); margin-bottom:6px}
.field{
  width:100%; border:1px solid var(--ink-200); background:var(--white); border-radius:var(--radius-sm);
  padding:12px 14px; font-size:15px; color:var(--ink-900); transition:border-color .15s, box-shadow .15s;
}
select.field{min-height:49px}
select.field:required:invalid{color:var(--ink-400)}
.field:focus{outline:none; border-color:var(--green-600); box-shadow:0 0 0 3px rgba(0,179,83,.2)}
.field-hint{display:block; font-family:var(--font-mono); font-size:11px; font-style:italic; color:var(--ink-400); margin-top:4px}
.radio-field{display:flex; align-items:center; gap:10px; border:1px solid var(--ink-200); background:var(--white); border-radius:var(--radius-sm); padding:12px 14px; cursor:pointer; margin-bottom:10px; transition:border-color .15s, background .15s}
.radio-field:hover{border-color:var(--ink-400)}
.radio-field input{accent-color:var(--green-600); width:16px; height:16px}
.radio-field.checked{border-color:var(--green-600); background:var(--green-50)}
.checkbox-field{display:flex; align-items:flex-start; gap:10px; font-size:var(--fs-small); color:var(--ink-600)}
.checkbox-field input{accent-color:var(--green-600); width:16px; height:16px; margin-top:2px; flex:none}

/* ===================== СТРОКА ТТХ / ТАБЛИЦА ===================== */
.spec-list{margin-top:4px}
.spec-row{display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px dotted var(--ink-200); font-size:var(--fs-small)}
.spec-row dt{color:var(--ink-600)}
.spec-row dd{font-family:var(--font-mono); text-align:right}

table.tbl{width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--ink-200); border-radius:var(--radius); overflow:hidden; font-size:var(--fs-small)}
table.tbl th, table.tbl td{border:1px solid var(--ink-200); padding:12px 14px; text-align:left; vertical-align:top}
table.tbl th{background:var(--ink-100); font-family:var(--font-mono); font-weight:600; color:var(--ink-600); width:34%}
table.tbl td{font-family:var(--font-mono)}

/* ===================== ШАГИ ===================== */
.steps{counter-reset:s; list-style:none; margin-left:0}
.steps li{counter-increment:s; position:relative; padding-left:46px; margin-bottom:18px}
.steps li:last-child{margin-bottom:0}
.steps li::before{
  content:counter(s); position:absolute; left:0; top:-2px; width:30px; height:30px; border-radius:50%;
  background:var(--green-500); color:var(--ink-900); font-family:var(--font-mono); font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}

/* ===================== ХЕДЕР ===================== */
.site-header{position:sticky; top:0; z-index:100; background:var(--white); border-bottom:1px solid var(--ink-200); transition:background .25s, border-color .25s, backdrop-filter .25s}
.site-header.on-hero{background:transparent; border-bottom-color:transparent}
.site-header.on-hero .logo-sub{color:rgba(255,255,255,.6)}
.site-header.on-hero .header-row{color:var(--white)}
.site-header.on-hero .header-contacts a:last-child{color:rgba(255,255,255,.65)}
.site-header.on-hero.scrolled{background:rgba(20,22,23,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom-color:rgba(255,255,255,.08)}
.site-header:not(.on-hero){background:var(--ink-100); border-bottom-color:transparent}
.site-header:not(.on-hero).scrolled{background:rgba(239,242,240,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom-color:var(--ink-200)}
.header-row{display:flex; align-items:center; gap:28px; height:var(--header-h)}
.logo{display:flex; align-items:center; gap:9px; font-weight:700; font-size:19px; letter-spacing:.2px}
.logo-mark{height:34px; width:auto; flex:none; object-fit:contain}
.logo-sub{display:block; font-size:11px; font-weight:400; color:var(--ink-400); letter-spacing:0}
.nav-main{display:flex; gap:24px; flex:1; font-size:14px; flex-wrap:wrap; justify-content:center}
.nav-main a{border-bottom:1px solid transparent; padding:4px 0; transition:border-color .15s}
.nav-main a:hover{border-bottom-color:currentColor}
.header-contacts{display:flex; flex-direction:column; align-items:flex-end; line-height:1.35; white-space:nowrap}
.header-contacts a:first-child{font-size:15px; font-weight:700}
.header-contacts a:last-child{font-size:12.5px; color:var(--ink-600)}
.burger{display:none; width:26px; height:26px}
.burger svg{width:100%; height:100%}

@media(max-width:960px){
  .nav-main{display:none}
  .nav-main.open{
    display:flex; flex-direction:column; position:absolute; top:var(--header-h); left:0; right:0;
    background:var(--white); border-bottom:1px solid var(--ink-200); padding:16px var(--gutter); gap:14px; color:var(--ink-900);
  }
  .burger{display:block}
  .header-contacts{display:none}
}

/* ===================== HERO ===================== */
.hero{position:relative; color:var(--white); text-align:center; padding-top:calc(var(--header-h) + clamp(40px,6vw,80px)); padding-bottom:clamp(56px,7vw,96px); min-height:min(900px,98vh); display:flex; align-items:center}
.hero-bg{position:fixed; top:0; left:0; right:0; height:min(900px,98vh); z-index:-1; overflow:hidden; background:#141617}
.hero-bg video{width:100%; height:100%; object-fit:cover; display:block}
.hero-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,22,23,.8) 0%, rgba(20,22,23,.62) 15%, rgba(20,22,23,.5) 100%)}
.hero-inner{position:relative; z-index:1; width:100%; display:flex; flex-direction:column; align-items:center}
main{position:relative; z-index:1; background:var(--ink-100)}
.hero-title-block{display:flex; flex-direction:column; align-items:flex-start}
.hero h1.caps-slogan{display:flex; flex-direction:column; align-items:flex-start}
.hero-brand{font-size:clamp(1.75rem,6.5vw,4.8rem); font-weight:700; text-transform:uppercase; letter-spacing:.04em; line-height:1.05; white-space:nowrap; text-shadow:0 1px 10px rgba(0,0,0,.35)}
.hero-tagline{margin-top:14px; font-weight:500; text-transform:uppercase; letter-spacing:normal; line-height:1.3; white-space:nowrap; font-size:clamp(.6rem,2.28vw,1.7rem); text-shadow:0 1px 10px rgba(0,0,0,.35)}
.hero-logo-inline{height:1.15em; width:auto; vertical-align:-0.13em; display:inline-block}
.hero-meta{display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:32px}

/* ===================== ХОТСПОТЫ ===================== */
.hotspot-wrap{position:relative}
.hotspot-dot{
  position:absolute; transform:translate(-50%,-50%); width:32px; height:32px; border-radius:50%;
  background:rgba(14,17,16,.85); border:2px solid var(--green-500); color:var(--green-500);
  font-family:var(--font-mono); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 5px rgba(0,179,83,.16); transition:transform .15s var(--ease-out), background .15s, color .15s; z-index:2;
}
.hotspot-dot:hover, .hotspot-dot.active{transform:translate(-50%,-50%) scale(1.14); background:var(--green-500); color:var(--ink-900)}
.hotspot-card{
  position:absolute; z-index:3; width:min(280px, calc(100% - 24px)); background:var(--white); color:var(--ink-900); border-radius:var(--radius-sm);
  border:1px solid var(--ink-200); padding:14px 16px; box-shadow:0 12px 32px rgba(0,0,0,.18);
  opacity:0; visibility:hidden; transition:opacity .18s, transform .18s, visibility .18s;
  left:50% !important; transform:translate(-50%,6px);
}
.hotspot-card.show{opacity:1; visibility:visible; transform:translate(-50%,0)}
.hotspot-card b{display:block; margin-bottom:5px; font-size:14px}
.hotspot-card p{font-size:13px; color:var(--ink-600); max-width:none}

/* ===================== ПОДБОР МОДЕЛИ ===================== */
.result-card{margin-top:18px; overflow:hidden; max-height:0; opacity:0; transition:max-height .35s var(--ease-out), opacity .3s}
.result-card.show{max-height:340px; opacity:1}
.result-card .inner{padding-top:2px}

/* ===================== ПЕРЕКЛЮЧАТЕЛЬ МОДЕЛЕЙ ===================== */
.model-switch{display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:start}
.model-list{display:flex; flex-direction:column; gap:8px}
.model-list button{
  text-align:left; padding:14px 16px; border-radius:var(--radius-sm); border:1px solid var(--ink-200); background:var(--white);
  transition:border-color .15s, background .15s;
}
.model-list button .mname{font-weight:700; display:block}
.model-list button .mprice{font-family:var(--font-mono); font-size:13px; color:var(--ink-600); display:block; margin-top:3px}
.model-list button:hover{border-color:var(--ink-400)}
.model-list button.active{border-color:var(--green-600); background:var(--green-50)}
.model-detail{display:grid; grid-template-columns:1fr 1fr; gap:24px; background:var(--white); border:1px solid var(--ink-200); border-radius:var(--radius); padding:24px}
.model-detail .price{font-family:var(--font-mono); font-size:28px; font-weight:700; margin:6px 0 14px}
@media(max-width:860px){
  .model-switch{grid-template-columns:1fr}
  .model-list{flex-direction:row; overflow-x:auto}
  .model-detail{grid-template-columns:1fr}
}

/* ===================== КАЛЬКУЛЯТОР ===================== */
.calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.calc-result{margin-top:20px; background:var(--ink-900); color:var(--white); border-radius:var(--radius); padding:26px}
.calc-result .num{font-family:var(--font-mono); font-size:clamp(1.6rem,3vw,2.4rem); font-weight:700; color:var(--green-500)}
.calc-result .line{display:flex; justify-content:space-between; align-items:baseline; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.12); flex-wrap:wrap; gap:6px}
.calc-result .line:last-of-type{border-bottom:0}
.calc-result .label{color:rgba(255,255,255,.65); font-size:14px}
@media(max-width:860px){.calc-grid{grid-template-columns:1fr}}

/* ===================== FAQ / АККОРДЕОН ===================== */
.accordion-item{background:var(--white); border:1px solid var(--ink-200); border-radius:var(--radius-sm); margin-bottom:10px; overflow:hidden}
.accordion-q{display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; padding:16px 18px; text-align:left; font-weight:600}
.accordion-q .plus{flex:none; width:20px; height:20px; position:relative}
.accordion-q .plus::before, .accordion-q .plus::after{content:""; position:absolute; background:var(--ink-900); transition:transform .2s}
.accordion-q .plus::before{left:0; top:50%; width:100%; height:2px; margin-top:-1px}
.accordion-q .plus::after{top:0; left:50%; width:2px; height:100%; margin-left:-1px}
.accordion-item.open .plus::after{transform:rotate(90deg)}
.accordion-a{max-height:0; overflow:hidden; transition:max-height .3s var(--ease-out)}
.accordion-a .inner{padding:0 18px 16px; color:var(--ink-600); font-size:var(--fs-small)}

/* ===================== ТАБЫ ===================== */
.tabs-head{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap}
.tabs-head button{padding:10px 18px; border-radius:20px; border:1px solid var(--ink-200); font-size:14px; font-weight:600; color:var(--ink-600); transition:all .15s}
.tabs-head button.active{background:var(--ink-900); color:var(--white); border-color:var(--ink-900)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ===================== СТАТЫ ===================== */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center}
.stat{padding:20px}
.stat .n{font-family:var(--font-mono); font-size:var(--fs-stat); font-weight:700; color:var(--green-500)}
.stat .l{margin-top:6px; font-size:13px; color:rgba(255,255,255,.6)}
@media(max-width:760px){.stat-grid{grid-template-columns:1fr 1fr}}

/* ===================== КАРТА КЛИЕНТОВ ===================== */
.russia-map{position:relative; width:100%; background:var(--ink-800); border-radius:var(--radius); padding:16px}
.map-viewport{position:relative; width:100%; aspect-ratio:1000/488.371023388062; overflow:hidden; border-radius:var(--radius-sm); touch-action:none; cursor:grab}
.russia-map .map-viewport{margin-top:-9.77%; clip-path:inset(20% 0 0 0)}
.map-viewport.grabbing{cursor:grabbing}
.map-zoom{position:absolute; left:0; top:0; width:100%; height:100%; transform-origin:0 0; will-change:transform}
.map-zoom svg{width:100%; height:100%; display:block}
.map-zoom path{fill:rgba(255,255,255,.08); stroke:rgba(255,255,255,.14); stroke-width:1.2}
.map-pins{position:absolute; inset:0}
.map-pin{position:absolute; width:12px; height:12px; transform:translate(-50%,-100%) scale(var(--inv-scale,1)); transform-origin:center bottom; cursor:pointer; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); transition:filter .15s; border:0; background:none; padding:0; z-index:1; will-change:transform; backface-visibility:hidden}
.map-pin--major{width:19px; height:19px; z-index:3}
.map-pin img{width:100%; height:100%; display:block}
.map-pin:hover, .map-pin.active{transform:translate(-50%,-100%) scale(calc(var(--inv-scale,1) * 1.5))}
.map-pin.active{z-index:20}
.map-pin-label{position:absolute; left:50%; bottom:calc(100% + 7px); transform:translateX(-50%); background:var(--white); color:var(--ink-900); font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:5px; white-space:nowrap; box-shadow:0 6px 16px rgba(0,0,0,.3); opacity:0; visibility:hidden; transition:opacity .15s, visibility .15s; pointer-events:none; z-index:2; backface-visibility:hidden}
.map-pin-label::after{content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:4px solid transparent; border-top-color:var(--white)}
.map-pin.active .map-pin-label{opacity:1; visibility:visible}

.map-zoom-controls{position:absolute; top:24px; right:24px; z-index:6; display:flex; flex-direction:column; gap:6px}
.map-zoom-controls button{width:32px; height:32px; border-radius:7px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:16px; font-weight:600; cursor:pointer; transition:background .15s}
.map-zoom-controls button:hover{background:rgba(255,255,255,.22)}
#mapZoomReset{font-size:10px; font-family:var(--font-mono)}
@media(max-width:600px){.russia-map{padding:12px} .map-zoom-controls{top:18px; right:18px}}

/* ===================== MARQUEE ===================== */
.marquee{overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex; gap:16px; width:max-content; animation:marquee 65s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track.rev{animation-direction:reverse}
.marquee .ph{width:220px; height:140px; flex:none; min-height:0}
.marquee .ph-photo{width:220px; height:140px; flex:none; border-radius:var(--radius); overflow:hidden; cursor:pointer}
.marquee .ph-photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s var(--ease-out)}
.marquee .ph-photo:hover img{transform:scale(1.25)}

/* ===================== ЛАЙТБОКС ===================== */
.lightbox{position:fixed; inset:0; z-index:300; background:rgba(14,17,16,.88); display:flex; align-items:center; justify-content:center; padding:32px; opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s}
.lightbox.show{opacity:1; visibility:visible}
.lightbox img{max-width:min(900px,92vw); max-height:88vh; border-radius:var(--radius-sm); box-shadow:0 20px 60px rgba(0,0,0,.45); display:block}
.lightbox-close{position:absolute; top:20px; right:20px; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1; cursor:pointer; border:1px solid rgba(255,255,255,.2); transition:background .15s}
.lightbox-close:hover{background:rgba(255,255,255,.2)}
@media(max-width:600px){.lightbox{padding:16px}.lightbox-close{top:10px; right:10px}}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ===================== МОДАЛКА EMAIL ===================== */
.email-modal{position:fixed; inset:0; z-index:310; background:rgba(14,17,16,.6); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s}
.email-modal.show{opacity:1; visibility:visible}
.email-modal-card{position:relative; width:100%; max-width:400px; background:var(--white); border-radius:var(--radius); padding:28px}
.email-modal-close{position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%; background:var(--ink-100); color:var(--ink-900); font-size:18px; line-height:1; cursor:pointer; transition:background .15s}
.email-modal-close:hover{background:var(--ink-200)}
#emailModalTitle{margin-bottom:8px}
#emailModalText{margin-bottom:16px}
#emailModalForm{margin-top:16px}

/* ===================== БЕЙДЖ / GO ===================== */
.badge{display:inline-block; background:var(--ink-900); color:var(--white); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; border-radius:4px; padding:4px 8px; font-weight:700; font-family:var(--font-mono)}
.go{font-weight:700; margin-top:12px; display:flex; align-items:center; gap:6px; color:var(--green-700)}
.card.clickable:hover .go{text-decoration:underline}
#consumables .grid.g3 > .card{display:flex; flex-direction:column; height:100%}
#consumables .grid.g3 .go{margin-top:auto; padding-top:12px}

/* ===================== ГАРАНТИЯ ===================== */
.warn-list{margin-top:6px}
.warn-list li{position:relative; padding-left:26px; margin-bottom:8px; color:var(--ink-600); font-size:var(--fs-small)}
.warn-list li::before{content:""; position:absolute; left:0; top:2px; width:16px; height:16px; background:url("../img/favicon.png") no-repeat center/contain}

.icon-list{margin-left:0}
.icon-list li{position:relative; list-style:none; padding-left:26px; margin-bottom:10px}
.icon-list li::before{content:""; position:absolute; left:0; top:2px; width:16px; height:16px; background:url("../img/favicon.png") no-repeat center/contain}

/* ===================== КАРУСЕЛЬ ДЛЯ ДИЛЕРОВ ===================== */
.dealer-carousel{position:relative; aspect-ratio:1/1; border-radius:var(--radius); overflow:hidden}
.dc-slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .5s ease; display:flex; align-items:center; justify-content:center; padding:24px; box-sizing:border-box}
.dc-slide.is-active{opacity:1; visibility:visible}
.dc-slide img{width:100%; height:100%; object-fit:contain; display:block}
.dc-dots{position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:8px; z-index:2}
.dc-dot{width:8px; height:8px; border-radius:50%; background:var(--ink-200); border:0; padding:0; cursor:pointer; transition:background .15s, transform .15s}
.dc-dot:hover{background:var(--ink-400)}
.dc-dot.is-active{background:var(--green-500); transform:scale(1.3)}

/* ===================== ПОЛОСА ДЛЯ ДИЛЕРОВ ===================== */
.dealer-strip{background:var(--paper); border-top:1px solid var(--ink-200); padding:36px 0}
.dealer-strip-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.dealer-strip-text{max-width:640px}
.dealer-strip h2{font-size:1.3rem}
.dealer-strip p{color:var(--ink-600); font-size:14px; margin-top:6px}
.dealer-strip .btn{flex:none}
@media(max-width:600px){.dealer-strip .btn{width:100%}}

/* ===================== ФУТЕР ===================== */
footer{background:var(--paper); color:var(--ink-600); padding:56px 0 26px; font-size:13.5px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px}
.foot-grid b{display:block; color:var(--ink-900); font-size:14px; margin-bottom:12px}
.foot-grid a{display:block; color:var(--ink-600); margin-bottom:8px; transition:color .15s}
.foot-grid a:hover{color:var(--ink-900)}
.foot-legal{margin-top:14px}
.foot-legal a{font-size:12px; text-decoration:underline}
.foot-bottom{border-top:1px solid var(--ink-200); margin-top:30px; padding-top:16px; font-size:12px; color:var(--ink-400); line-height:1.6}
.foot-logo{color:var(--ink-900); font-weight:700; font-size:19px; margin-bottom:10px; display:flex; align-items:center; gap:8px}
.foot-logo img{height:30px; width:auto; object-fit:contain}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}

/* ===================== COOKIE-БАННЕР ===================== */
.cookie-banner{position:fixed; left:16px; right:16px; bottom:16px; z-index:200; max-width:640px; margin:0 auto; background:var(--ink-900); color:var(--white); border-radius:var(--radius); padding:18px 20px; box-shadow:0 12px 32px rgba(0,0,0,.25); display:flex; gap:16px; align-items:center; flex-wrap:wrap; transform:translateY(120%); transition:transform .35s var(--ease-out)}
.cookie-banner.show{transform:translateY(0)}
.cookie-banner p{font-size:13px; color:rgba(255,255,255,.75); flex:1; min-width:200px}
.cookie-banner a{text-decoration:underline; color:var(--white)}

/* ===================== СТРАНИЦЫ-ЗАГЛУШКИ ===================== */
.page-hero{background:var(--ink-100); border-bottom:1px solid var(--ink-200); padding:calc(var(--header-h) + 44px) 0 44px}
.page-hero--tall{min-height:100vh; display:flex; align-items:center; padding:60px 0}

/* ===================== ОБЩАЯ АДАПТИВНОСТЬ ===================== */
@media(max-width:960px){
  .g2,.g3,.g4{grid-template-columns:1fr}
}
@media(max-width:760px){
  section{padding:44px 0}
  .foot-bottom{line-height:1.6}
}

/* ===================== АДАПТИВНОСТЬ: ПЛАНШЕТЫ, ТЕЛЕФОНЫ, БОЛЬШИЕ ЭКРАНЫ ===================== */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
section[id], footer[id]{scroll-margin-top:calc(var(--header-h) + 8px)}
.hero{min-height:min(900px,98vh); min-height:min(900px,98svh)}
.hero-bg{height:min(900px,98vh); height:min(900px,98svh)}
.page-hero--tall{min-height:100vh; min-height:100svh}
.header-call, .nav-contact{display:none}
.map-viewport{touch-action:pan-y}
.map-viewport.zoomed{touch-action:none}
.cookie-banner{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.email-modal{overflow-y:auto; -webkit-overflow-scrolling:touch; align-items:flex-start; padding:16px}
.email-modal-card{margin:auto}
.email-modal-close{width:36px; height:36px; font-size:22px}

@media(max-width:960px){
  .g4{grid-template-columns:1fr 1fr}
  .burger{width:44px; height:44px; padding:9px; margin-right:-9px}
  .header-row{gap:12px}
  .header-row .logo{margin-right:auto}
  .header-call{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; color:inherit}
  .header-call svg{width:22px; height:22px}
  .nav-main.open{max-height:calc(100vh - var(--header-h)); max-height:calc(100svh - var(--header-h)); overflow-y:auto; gap:0; padding-top:8px; padding-bottom:12px}
  .nav-main.open a{padding:13px 0; font-size:16px; border-bottom:1px solid var(--ink-100)}
  .nav-main.open .nav-contact{display:block; color:var(--ink-600)}
  .nav-main.open .nav-contact:first-of-type{margin-top:6px}
}
@media(max-width:760px){
  .field, select.field, input, textarea, select{font-size:16px}
  .field-hint{font-size:12px}
  .foot-grid a{padding:7px 0; margin-bottom:0}
  .foot-legal a{display:block; padding:6px 0; font-size:13px}
  .page-hero{padding-top:36px; padding-bottom:36px}
  .btn{min-height:46px}
  .map-zoom-controls button{width:38px; height:38px}
  .map-pin-label{font-size:12px}
  .email-modal-card{padding:22px 18px}
}
@media(max-width:600px){
  .g4{grid-template-columns:1fr}
  .hero-tagline{white-space:normal; text-align:left; font-size:.8125rem; line-height:1.35}
  .hero-meta{gap:12px}
  .hero-meta .btn{width:100%}
  .cookie-banner{left:10px; right:10px; padding:14px 16px}
  .cookie-banner .btn{width:100%}
}
@media(max-height:480px) and (orientation:landscape){
  .hero{min-height:0; padding-bottom:40px}
  .page-hero--tall{min-height:0; padding:32px 0}
}
@media(min-width:1700px){
  :root{--container:1440px}
}