/* ===========================================================
   Соберизабор — Landing (Figma 1920 × 7507)
   Точная вёрстка по макету. Все координаты соответствуют Figma.
   =========================================================== */

:root{
  --dark:  #1F201D;
  --panel: #212221;
  --cyan:  #5FC4E5;
  --lime:  #C3D200;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{
  background:#0d0e0c;
  font-family:'Cygre', sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* масштабирующая сцена.
   overflow:clip (а не hidden) — чтобы контейнеры НЕ становились прокручиваемыми:
   иначе нативный переход по якорю (#calc) уводит их внутренний scrollTop и
   шапка уезжает за область клиппинга без возможности вернуть её скроллом. */
.stage{ position:relative; width:100%; overflow:hidden; overflow:clip; }

.canvas{
  position:relative;
  width:1920px;
  height:7507px;
  background:var(--dark);
  transform-origin:top left;
  overflow:hidden;
  overflow:clip;
}

/* любая позиционируемая мелочь по умолчанию absolute */
.canvas > *{ position:absolute; }

/* ====================== ФОНОВЫЕ СВЕЧЕНИЯ ====================== */
/* размытые «кружки» из макета (Ellipse 24/25/26), уже с блюром и поворотом */
.glow{ position:absolute; pointer-events:none; }
.paint{ position:absolute; pointer-events:none; object-fit:contain; }

/* ====================== ПЛЕЙСХОЛДЕРЫ ИЗОБРАЖЕНИЙ ====================== */
.ph{
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 14px, transparent 14px 28px),
    linear-gradient(135deg,#2b2d28,#191a16);
}
.ph-label{
  font-family:'Cygre'; font-weight:500; font-size:14px; letter-spacing:.4px;
  color:rgba(255,255,255,.4); text-align:center; padding:12px; pointer-events:none;
}
.ph--light{ background:#EFEFEF; }
.ph--light .ph-label{ color:rgba(0,0,0,.28); }
.ph--dark{ background:var(--panel); }

/* ====================== HERO фон ====================== */
.hero-photo{
  left:0; top:0; width:1920px; height:1080px;
  background-color:#1a1f2a; overflow:hidden;
  /* нижний край фото плавно уходит в прозрачность — фото растворяется
     в том, что под ним (слева тёмный фон, справа голубое свечение),
     без резкой границы и тёмной полосы */
  -webkit-mask-image:linear-gradient(to bottom,
    #000 70%, rgba(0,0,0,.97) 77%, rgba(0,0,0,.85) 83%,
    rgba(0,0,0,.6) 89%, rgba(0,0,0,.28) 95%, transparent 100%);
  mask-image:linear-gradient(to bottom,
    #000 70%, rgba(0,0,0,.97) 77%, rgba(0,0,0,.85) 83%,
    rgba(0,0,0,.6) 89%, rgba(0,0,0,.28) 95%, transparent 100%);
}
/* слои времён года: плавный кроссфейд + лёгкий зум */
.hero-season{
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:0; transform:scale(1.06);
  transition:opacity .8s ease, transform .8s ease;
  will-change:opacity, transform;
}
.hero-season.is-active{ opacity:1; transform:scale(1); }
.hero-shade{
  left:-260px; top:0; width:1523px; height:1080px;
  background:linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.8) 100%);
  /* затемнение тоже гасим к низу, иначе его жёсткий край даёт чёткую горизонтальную линию */
  -webkit-mask-image:linear-gradient(to bottom,
    #000 70%, rgba(0,0,0,.97) 77%, rgba(0,0,0,.85) 83%,
    rgba(0,0,0,.6) 89%, rgba(0,0,0,.28) 95%, transparent 100%);
  mask-image:linear-gradient(to bottom,
    #000 70%, rgba(0,0,0,.97) 77%, rgba(0,0,0,.85) 83%,
    rgba(0,0,0,.6) 89%, rgba(0,0,0,.28) 95%, transparent 100%);
}
/* ====================== HERO контент ====================== */
.hero-title{
  left:150px; top:336px; width:841px;
  font-family:'Cygre ExtraBold'; font-weight:800; font-size:64px; line-height:68px;
  text-transform:uppercase; color:#fff;
}
.hero-sub{
  left:151px; top:566px; width:708px;
  font-family:'Cygre Medium'; font-weight:500; font-size:24px; line-height:35px; color:#fff;
}

/* кнопка-картинка «Рассчитать базу» (2 состояния) */
.btn-img{ left:151px; top:731px; width:251px; height:56px; display:block; }
.btn-img img{ position:absolute; inset:0; width:251px; height:56px; }
.btn-img__h{ opacity:0; transition:opacity .2s ease; }
.btn-img:hover .btn-img__d{ opacity:0; }
.btn-img:hover .btn-img__h{ opacity:1; }

/* значки-бейджи в правом верхнем углу: переключатель времён года (4 одинаковых кружка) */
.hero-badges{ left:1496px; top:220px; width:269px; height:68px; }
.badge{
  position:absolute; top:9px; width:50px; height:50px; border-radius:50%;
  background:#fff; display:flex; align-items:center; justify-content:center;
  border:0; margin:0; padding:0; appearance:none; -webkit-appearance:none;
}
.badge:nth-child(1){ left:0; }
.badge:nth-child(2){ left:73px; }
.badge:nth-child(3){ left:146px; }
.badge:nth-child(4){ left:219px; }
.badge img{ position:relative; z-index:1; display:block; width:32px; height:32px; object-fit:contain; }
/* кнопки-переключатели времён года */
.season-badge{ cursor:pointer; opacity:.55; transition:opacity .4s ease; }
.season-badge:hover{ opacity:.85; }
.season-badge.is-active{ opacity:1; }
.season-badge:focus-visible{ outline:2px solid var(--cyan); outline-offset:4px; }
/* обводка-кольцо (округление иконок) — появляется вокруг активной иконки при переключении */
.season-badge::after{
  content:''; position:absolute; left:50%; top:50%;
  width:68px; height:68px; border-radius:50%;
  border:1px solid #fff; background:rgba(255,255,255,.10);
  transform:translate(-50%,-50%) scale(.72);
  opacity:0; transition:opacity .4s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.season-badge.is-active::after{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ====================== ШАПКА ====================== */
.header-bar{ left:0; top:0; width:1920px; height:135px; }
/* белая плашка с рваным нижним краем (header.svg), 1:1 */
.header-shape{ position:absolute; left:0; top:0; width:1920px; height:270px; pointer-events:none; }
.logo{ position:absolute; left:150px; top:42px; width:141px; height:50px; display:block; z-index:2; }
.logo img{ display:block; width:141px; height:50px; }

.header-dealer{
  position:absolute; left:904px; top:42px; width:267px; height:56px;
  display:block; z-index:2;
}
.header-dealer img{ display:block; width:267px; height:56px; object-fit:contain; }

.header-icons{ position:absolute; left:1410px; top:40px; display:flex; gap:40px; }
.ic{ position:relative; display:block; width:60px; height:60px; }
.ic img{ position:absolute; inset:0; width:60px; height:60px; object-fit:contain; }
.ic__h{ opacity:0; transition:opacity .2s ease; }
.ic:hover .ic__d{ opacity:0; }
.ic:hover .ic__h{ opacity:1; }

/* ====================== ПИЛЮЛИ-КНОПКИ ====================== */
.pill{
  position:absolute;
  height:56px; border-radius:100px; box-sizing:border-box; border:1px solid transparent;
  display:flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer;
  font-family:'Cygre'; font-weight:700; font-size:16px; line-height:27px; text-transform:uppercase;
  background:#fff; transition:background .2s ease, color .2s ease;
}
.pill--cyan{ border-color:var(--cyan); color:var(--cyan);
  background:linear-gradient(0deg, rgba(95,196,229,.05), rgba(95,196,229,.05)), #fff; }
.pill--cyan:hover{ background:var(--cyan); color:#fff; }
.pill--lime{ border-color:var(--lime); color:var(--lime);
  background:linear-gradient(0deg, rgba(195,210,0,.05), rgba(195,210,0,.05)), #fff; }
.pill--lime:hover{ background:var(--lime); color:#fff; }

/* ====================== БОЛЬШИЕ ЗАГОЛОВКИ СЕКЦИЙ ====================== */
.sec-title{
  font-family:'Cygre ExtraBold'; font-weight:800; font-size:64px; line-height:68px;
  text-transform:uppercase; color:#fff;
}
.sec-title--cyan{ color:var(--cyan); }

/* Заголовок 2-го блока — живой, выделяемый текст (как на макете) */
.block2-title{ left:415px; top:1230px; width:1091px; text-align:center; color:#fff; }
.block2-title .ttl-accent{ color:var(--cyan); } /* «20–30 метров,» — голубым */
/* построчное проявление заголовка: каждая строка — отдельный блок (анимация .foot-anim) */
.block2-title .b2-line{ display:block; }

/* мазок-граффити под текстом (Group 1000001566), 1:1, рисуется ПОЗАДИ текста */
.block2-stroke{ left:544px; top:1344px; width:314px; height:87px; }

/* доступное скрытие текста (остаётся для SEO и скринридеров) */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.utp-title{ left:980px; top:2191px; width:791px; }
.utp-title .ttl-line{ display:block; }
.calc-title{ left:150px; top:4998px; width:571px; }

/* ====================== БЛОК 2 — СХЕМА ====================== */
.schematic__diagram{
  position:absolute;
  left:150px; top:1447px; width:1621px; height:594px; border-radius:50px;
  background:var(--panel);
}
.schematic__fence{
  position:absolute; left:152px; top:1622px; width:1619px; height:334px;
  object-fit:contain;
}
.gr{
  font-family:'Sprite Graffiti'; font-weight:400; font-size:32px; line-height:52px;
  text-transform:uppercase; color:var(--cyan); white-space:nowrap;
}
/* подсветка деталей схемы: окрашиваем прутья детали в голубой
   (слой во весь размер схемы, маска по zabor.png, обрезка по детали через clip-path) */
.fence-hl{
  position:absolute; left:152px; top:1622px; width:1619px; height:334px;
  background:var(--cyan); pointer-events:none; opacity:0; transition:opacity .25s ease;
  -webkit-mask:url(../assets/img/zabor.png) no-repeat center / contain;
  mask:url(../assets/img/zabor.png) no-repeat center / contain;
}
.fence-hl.is-lit{ opacity:1; }
/* подпись, на которую наведён курсор, подчёркиваем «живым» состоянием */
.gr[data-fx]{ cursor:default; transition:color .2s ease, text-shadow .2s ease; }
.gr[data-fx].is-hot{ text-shadow:0 0 18px rgba(95,196,229,.55); }
@media (prefers-reduced-motion: reduce){ .fence-hl{ transition:none; } }
/* стрелки-указатели к схеме (граффити), 1:1 по макету */
.fence-arrow{ position:absolute; pointer-events:none; }

/* появление схемы при скролле: подписи-граффити «всплывают» снизу-вверх
   построчно (фейд + сдвиг), стрелки-указатели «дорисовываются» следом —
   каждая у своей подписи (задержки выставляет js/reveal.js) */
@keyframes grRise{
  from{ opacity:0; transform:translateY(30px); }
  to{   opacity:1; transform:translateY(0); }
}
@keyframes arrowDraw{
  0%{   opacity:0; }
  100%{ opacity:1; }
}
.gr-anim{ opacity:0; will-change:opacity, transform; }
.gr-anim.is-in{ animation:grRise .7s cubic-bezier(.22,.61,.36,1) both; }
.arrow-anim{ opacity:0; transform-origin:50% 50%; will-change:opacity; }
.arrow-anim.is-in{ animation:arrowDraw .55s cubic-bezier(.34,1.4,.5,1) both; }
@media (prefers-reduced-motion: reduce){
  .gr-anim, .arrow-anim{ opacity:1; }
  .gr-anim.is-in, .arrow-anim.is-in{ animation:none; }
}

/* ====================== УТП ====================== */
.utp-photo{ left:151px; top:2209px; width:789px; height:1097px; border-radius:50px;
  background-size:cover; background-position:center; background-repeat:no-repeat; }
/* мазок-кляуза у заголовка УТП (Group 1000001582), 1:1.
   Точный цвет #1F201D задаём заливкой + маской по форме мазка. */
.utp-blot{ left:1449px; top:2209px; width:131px; height:184px; pointer-events:none;
  background-color:#1F201D;
  -webkit-mask:url(../assets/img/utp-blot.png) no-repeat center / contain;
  mask:url(../assets/img/utp-blot.png) no-repeat center / contain; }

.feature{ width:375px; }
/* голубой граффити-росчерк (Vector ytp) точно за цифрой, в левом-верхнем углу карточки, 1:1 */
.feature__accent{
  position:absolute; left:0; top:-4px; width:68px; height:97px;
  z-index:0; pointer-events:none;
}
.feature__num{
  position:absolute; left:0; top:-4px; z-index:1;
  font-family:'Sprite Graffiti'; font-weight:400; font-size:128px; line-height:1; color:#fff;
}
.feature__title{
  position:absolute; left:0; top:112px;
  font-family:'Cygre'; font-weight:700; font-size:30px; line-height:36px;
  text-transform:uppercase; color:#fff; white-space:nowrap;
}
.feature__desc{
  position:absolute; left:0; top:168px;
  font-family:'Cygre Medium'; font-weight:500; font-size:18px; line-height:24px;
  color:rgba(255,255,255,.6);
}

/* ====================== ТВОЙ ПРЕМИУМ В КОРОБКЕ ====================== */
.box-img{ position:absolute; object-fit:contain; }
.box-label{
  font-family:'Cygre'; font-weight:700; font-size:32px; line-height:36px;
  text-transform:uppercase; color:#fff;
}

/* ====================== КАРТОЧКИ ТОВАРА ====================== */
.card{ width:790px; height:496px; background:#fff; border-radius:50px; }
.card__img{ position:absolute; border-radius:24px; overflow:hidden; }
.card__img img{ width:100%; height:100%; object-fit:contain; display:block; }
.card__title{ position:absolute; width:252px; font-family:'Cygre'; font-weight:700; font-size:24px; line-height:28px; color:#000; }
.card__sub{ position:absolute; font-family:'Cygre'; font-weight:700; font-size:18px; line-height:28px; color:var(--cyan); }
.card__note{ position:absolute; font-family:'Cygre'; font-weight:400; font-size:16px; line-height:24px; color:rgba(0,0,0,.5); }
.card__price{ position:absolute; font-family:'Cygre'; font-weight:700; font-size:42.26px; line-height:24px; color:#C3D216; }
/* карточка «скоро» — вместо цены крупная подпись лаймом */
.card__soon{ position:absolute; font-family:'Cygre'; font-weight:700; font-size:48px; line-height:52px; color:var(--lime); }

.card-label{ font-size:64px; line-height:52px; }
.card-desc{
  font-family:'Cygre Medium'; font-weight:500; font-size:16.28px; line-height:24px;
  color:rgba(255,255,255,.6);
  list-style:none; margin:0; padding:0;
}
.card-desc li{ position:relative; padding-left:20px; }
.card-desc li + li{ margin-top:6px; }
.card-desc li::before{
  content:''; position:absolute; left:2px; top:10px;
  width:4px; height:4px; border-radius:50%;
  background:rgba(255,255,255,.6);
}

/* слайдер карточек: окно с обрезкой + лента, которую двигают стрелки.
   z-index держит слайдер поверх коробок «ТВОЙ ПРЕМИУМ» (их нижний край
   заходит на верх слайдера), чтобы они не перекрывали/не размывали текст */
.cards-slider{ overflow:hidden; z-index:1; }
.cards-track{
  display:flex; gap:40px; height:100%;
  will-change:transform;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.slide{ position:relative; flex:0 0 790px; width:790px; height:100%; }
.slide .card{ position:absolute; left:0; top:0; }
.slide .card-label,
.slide .card-desc{ position:absolute; }

/* стрелки навигации — картинки с двумя состояниями */
.nav-arrow{ width:60px; height:60px; padding:0; border:none; background:none; cursor:pointer; z-index:5; }
.nav-arrow img{ position:absolute; inset:0; width:60px; height:60px; }
.nav-arrow .na-h{ opacity:0; transition:opacity .2s ease; }
.nav-arrow:hover .na-d{ opacity:0; }
.nav-arrow:hover .na-h{ opacity:1; }
.nav-arrow.is-disabled{ opacity:.3; pointer-events:none; cursor:default; }

/* ====================== ОНЛАЙН-РАСЧЁТ ====================== */
.calc-form{ width:624px; height:797px; background:#fff; border-radius:50px; }
.calc-h{
  position:absolute; font-family:'Cygre'; font-weight:700; font-size:32px; line-height:36px;
  color:var(--dark); white-space:nowrap;
}
.calc-unit{ color:rgba(31,32,29,.4); margin-left:6px; }
/* нумерация шагов в заголовках (1. 2. 3. 4.) */
.calc-num{ color:var(--dark); margin-right:2px; }

.calc-input{
  position:absolute; height:56px; box-sizing:border-box; border:1px solid var(--cyan);
  background:linear-gradient(0deg, rgba(95,196,229,.05), rgba(95,196,229,.05)), #fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Cygre'; font-weight:700; font-size:16px; color:rgba(95,196,229,.4);
}
.calc-input--rect{ border-radius:10px; }
/* поле ввода длины — аккуратный нативный input в стиле макета */
input.calc-input{
  outline:none; -moz-appearance:textfield; appearance:textfield;
  text-align:center; padding:0 16px; color:var(--cyan); letter-spacing:.2px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input.calc-input::-webkit-outer-spin-button,
input.calc-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input.calc-input::placeholder{ color:rgba(95,196,229,.45); font-weight:700; opacity:1; }
input.calc-input:hover{ border-color:rgba(95,196,229,.75); }
input.calc-input:focus{ border-color:var(--cyan); box-shadow:0 0 0 3px rgba(95,196,229,.18); }

.calc-pill{ position:absolute; text-transform:none; }
/* выбранное состояние тогглов (тип столбов / тип ворот) */
.calc-pill.is-selected{ background:var(--cyan); color:#fff; }
.calc-submit{ position:absolute; }
.calc-submit.is-loading{ opacity:.7; pointer-events:none; }

/* ---- выпадающий список «Тип ворот» ---- */
.calc-select{ position:absolute; height:56px; z-index:5; }
.calc-select__toggle{
  position:absolute; inset:0; width:100%; padding:0 56px 0 20px;
  justify-content:flex-start; text-transform:none;
}
.calc-select__toggle:hover{ background:linear-gradient(0deg, rgba(95,196,229,.05), rgba(95,196,229,.05)), #fff; color:var(--cyan); }
.calc-select__value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* кружок-стрелка справа */
.calc-select__chevron{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; background:var(--cyan); pointer-events:none;
}
.calc-select__chevron::after{
  content:''; position:absolute; left:50%; top:46%;
  width:9px; height:9px; transform:translate(-50%,-50%) rotate(45deg);
  border-right:2px solid #fff; border-bottom:2px solid #fff; border-radius:1px;
  transition:transform .2s ease;
}
.calc-select.is-open .calc-select__chevron::after{ top:54%; transform:translate(-50%,-50%) rotate(-135deg); }

.calc-select__menu{
  position:absolute; left:0; top:62px; width:100%; margin:0; padding:6px; list-style:none;
  background:#fff; border:1px solid var(--cyan); border-radius:18px; box-sizing:border-box;
  box-shadow:0 14px 30px rgba(31,32,29,.12);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.calc-select.is-open .calc-select__menu{ opacity:1; visibility:visible; transform:translateY(0); }
.calc-select__option{
  padding:12px 14px; border-radius:12px; cursor:pointer;
  font-family:'Cygre'; font-weight:700; font-size:16px; color:var(--cyan);
  transition:background .15s ease, color .15s ease;
}
.calc-select__option:hover,
.calc-select__option.is-active{ background:var(--cyan); color:#fff; }

.calc-mini-label{
  position:absolute; font-family:'Cygre Medium'; font-weight:500; font-size:16.28px; line-height:24px;
  color:rgba(31,32,29,.6);
}

.stepper{ position:absolute; width:167px; height:56px; }
.stepper__btn{ position:absolute; top:12px; width:31px; height:31px; border-radius:50%; box-sizing:border-box;
  padding:0; cursor:pointer; -webkit-appearance:none; appearance:none; transition:filter .15s ease, opacity .15s ease; }
.stepper__btn:hover{ filter:brightness(.92); }
.stepper__btn:disabled{ opacity:.4; cursor:default; filter:none; }
.stepper__btn--minus{ left:0; border:1px solid var(--cyan);
  background:linear-gradient(0deg, rgba(95,196,229,.05), rgba(95,196,229,.05)), #fff; }
.stepper__btn--minus::before{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:16.5px; height:1.5px; background:var(--cyan); border-radius:15px; }
.stepper__btn--plus{ left:136px; background:var(--cyan); border:none; }
.stepper__btn--plus::before,
.stepper__btn--plus::after{ content:''; position:absolute; top:50%; left:50%; background:#fff; }
.stepper__btn--plus::before{ transform:translate(-50%,-50%); width:13px; height:2px; }
.stepper__btn--plus::after{ transform:translate(-50%,-50%); width:2px; height:13px; }
.stepper__field{
  position:absolute; left:47px; top:0; width:73px; height:56px; box-sizing:border-box;
  border:1px solid var(--cyan); border-radius:10px;
  background:linear-gradient(0deg, rgba(95,196,229,.05), rgba(95,196,229,.05)), #fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Cygre'; font-weight:700; font-size:16px; color:rgba(95,196,229,.4);
}
.stepper__field.has-value{ color:var(--cyan); }

.calc-photo{ left:814px; top:5116px; width:957px; height:378px; border-radius:50px;
  background-size:cover; background-position:center; background-repeat:no-repeat; }

.calc-result{ width:663px; height:285px; background:#fff; border-radius:50px; }
.calc-result__h{ position:absolute; font-family:'Cygre'; font-weight:700; font-size:24px; line-height:36px; color:var(--dark); }
/* колонка результата: фиксированная ширина, всё содержимое по центру оси */
.res-col{ position:absolute; top:0; width:130px; height:285px; }
.res-icon{ position:absolute; left:50%; transform:translateX(-50%); bottom:111px; border-radius:8px; }
.res-icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.res-icon.ph--light{ background:#EFEFEF; border:1px solid #e2e2e2; }
.res-count{ position:absolute; left:0; top:170px; width:100%; text-align:center; white-space:nowrap; font-family:'Cygre'; font-weight:700; font-size:32px; line-height:36px; color:var(--dark); }
.res-name{ position:absolute; left:0; top:216px; width:100%; text-align:center; white-space:nowrap; font-family:'Cygre Medium'; font-weight:500; font-size:16.28px; line-height:24px; color:rgba(31,32,29,.6); }
/* разделители: начинаются ниже заголовка (на уровне иконок) и не залезают на текст */
.res-divider{ position:absolute; top:86px; width:1px; height:151px; background:#525252; }

.calc-total{ width:279px; height:285px; background:#fff; border-radius:50px; }
.calc-total__h{ position:absolute; left:32px; top:26px; width:215px; font-family:'Cygre'; font-weight:700; font-size:24px; line-height:28px; color:var(--dark); }
.calc-total__price{ position:absolute; left:32px; top:142px; font-family:'Cygre'; font-weight:700; font-size:42.26px; line-height:24px; color:var(--cyan); white-space:nowrap; }

/* значок «%» и стрелка-росчерк у предварительной стоимости (Group 1000001672) */
.calc-total__percent, .calc-total__arrow{ position:absolute; object-fit:contain; }
.calc-total__percent{ left:88px; top:188px; width:47px; height:47px; }
.calc-total__arrow{ left:136px; top:190px; width:45px; height:78px; }

/* ====================== CTA ДИЛЕР ====================== */
/* зелёная плашка-градиент под карточками расчёта (Rectangle 174) */
.dealer{ left:814px; top:5839px; width:957px; height:74px; }
.dealer-bg{
  position:absolute; inset:0; box-sizing:border-box;
  background:linear-gradient(89.47deg, #1F201D 8.69%, #C3D200 52.18%, #1F201D 82.19%);
  border:1px solid var(--lime); border-radius:50px;
}
.dealer-splash{ position:absolute; object-fit:contain; }
.dealer-splash--left{ left:-27px; top:-15px; width:71px; height:105px; }
.dealer-splash--right{ left:618px; top:11px; width:90px; height:53px; }
.dealer-title{
  position:absolute; left:44px; top:23px; width:560px; margin:0; text-align:center;
  font-family:'Cygre SemiBold'; font-weight:600; font-size:22px; line-height:23px;
  text-transform:uppercase; color:#fff;
}
.dealer-btn{ left:729px; top:8px; width:218px; }

/* ====================== ФУТЕР ====================== */
.footer-photo{ left:0; top:6427px; width:1920px; height:1080px;
  background-color:#161d2c; background-size:cover; background-position:center; background-repeat:no-repeat; }
.footer-shade{ left:0; top:7103px; width:1920px; height:543px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%); }
.footer-glow{ left:568px; top:6637px; width:783px; height:227px; background:var(--dark);
  opacity:.4; filter:blur(50px); border-radius:50%; }

.footer-title{
  left:680px; top:6675px; width:561px; text-align:center;
  font-family:'Cygre'; font-weight:700; font-size:48px; line-height:52px;
  text-transform:uppercase; color:#fff;
}
.footer-sub{
  left:674px; top:6742px; width:573px; text-align:center;
  font-family:'Cygre Medium'; font-weight:500; font-size:24px; line-height:24px; color:#fff;
}
.footer-btn-1{ left:691px; top:6864px; width:251px; }
.footer-btn-2{ left:962px; top:6864px; width:267px; }

.foot-head{
  font-family:'Cygre Medium'; font-weight:500; font-size:24px; line-height:24px;
  text-transform:uppercase; color:#fff;
}
.foot-text{ font-family:'Cygre'; font-weight:400; font-size:20px; line-height:24px; color:#fff; }
/* соц.сети: цвет бренда при наведении */
.foot-link{ cursor:pointer; transition:color .25s ease; text-decoration:none; color:#fff; }
.foot-link--tg:hover{ color:#00A1E5; }   /* Телеграмм */
.foot-link--max:hover{ color:#953CDB; }  /* Макс */

/* появление элементов футера при прокрутке: фото видно сразу, контент выезжает поверх */
@keyframes footIn{
  from{ opacity:0; transform:translateY(50px); }
  to{   opacity:1; transform:translateY(0); }
}
.foot-anim{ opacity:0; }
.foot-anim.is-in{ animation:footIn .8s cubic-bezier(.22,.61,.36,1) both; }
/* простое проявление (для краски-мазка под заголовком дилера) */
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.fade-anim{ opacity:0; }
.fade-anim.is-in{ animation:fadeIn .9s ease both; }
/* боковые подписи «ТВОЙ ПРЕМИУМ» (слева) и «В КОРОБКЕ» (справа): выезжают сбоку */
@keyframes slideInLeft{  from{ opacity:0; transform:translateX(-90px); } to{ opacity:1; transform:translateX(0); } }
@keyframes slideInRight{ from{ opacity:0; transform:translateX(90px);  } to{ opacity:1; transform:translateX(0); } }
.slide-l, .slide-r{ opacity:0; will-change:opacity, transform; }
.slide-l.is-in{ animation:slideInLeft 1.3s cubic-bezier(.22,.61,.36,1) both; }
.slide-r.is-in{ animation:slideInRight 1.3s cubic-bezier(.22,.61,.36,1) both; }
/* коробки заезжают в кадр сбоку (с большего расстояния, чуть медленнее подписей) */
@keyframes boxInLeft{  from{ opacity:0; transform:translateX(-340px); } to{ opacity:1; transform:translateX(0); } }
@keyframes boxInRight{ from{ opacity:0; transform:translateX(340px);  } to{ opacity:1; transform:translateX(0); } }
.box-slide-l, .box-slide-r{ opacity:0; }
.box-slide-l.is-in{ animation:boxInLeft 1.5s cubic-bezier(.22,.61,.36,1) both; }
.box-slide-r.is-in{ animation:boxInRight 1.5s cubic-bezier(.22,.61,.36,1) both; }
@media (prefers-reduced-motion: reduce){
  .slide-l, .slide-r, .box-slide-l, .box-slide-r{ opacity:1; }
  .slide-l.is-in, .slide-r.is-in, .box-slide-l.is-in, .box-slide-r.is-in{ animation:none; }
}
/* белая стрелка-росчерк к соц.сетям (Vector social-media), 1:1 */
.foot-arrow{ left:1420px; top:7286px; width:111px; height:70px; pointer-events:none; }

/* ====================== МОБИЛЬНАЯ ВЕРСИЯ ====================== */
.mobile-stage{ display:none; position:relative; width:100%; overflow:hidden; overflow:clip; background:var(--dark); }
.mobile-canvas{
  position:relative;
  width:375px;
  height:5386px;
  background:var(--dark);
  transform-origin:top left;
  overflow:hidden;
  overflow:clip;
}
.mobile-canvas > *{ position:absolute; }
.m-glow{ position:absolute; pointer-events:none; border-radius:50%; transform:rotate(56.17deg); }
.m-glow--top{ left:83px; top:-93px; width:334px; height:334px; background:#5FC4E5; filter:blur(46px); }
.m-glow--1{ left:-444px; top:201px; width:606px; height:606px; background:rgba(95,196,229,.7); filter:blur(52px); }
.m-glow--2{ left:0; top:751px; width:697px; height:697px; background:rgba(95,196,229,.4); filter:blur(84px); }
.m-glow--3{ left:-444px; top:2284px; width:606px; height:606px; background:rgba(95,196,229,.7); filter:blur(52px); }
.m-glow--4{ left:0; top:3132px; width:697px; height:697px; background:rgba(95,196,229,.4); filter:blur(84px); }
.m-glow--5{ left:-444px; top:4930px; width:606px; height:606px; background:rgba(95,196,229,.7); filter:blur(52px); }
/* голубой кружок на фоне за блоком «20–30 метров» / схемой */
.m-glow--6{ left:30px; top:840px; width:315px; height:315px; background:#5FC4E5; filter:blur(70px); opacity:.5; }

.m-pill{
  display:flex; align-items:center; justify-content:center;
  height:40px; border-radius:72px; border:1px solid transparent;
  font-family:'Cygre'; font-weight:700; font-size:11.5px; line-height:19px;
  text-transform:uppercase; text-decoration:none; background:#fff; cursor:pointer;
}
.m-pill--cyan{ border-color:var(--cyan); color:var(--cyan); background:linear-gradient(0deg, rgba(95,196,229,.05), rgba(95,196,229,.05)), #fff; }
.m-pill--cyan.is-selected,
.m-pill--cyan:hover{ background:var(--cyan); color:#fff; }
.m-pill--lime{ border-color:var(--lime); color:var(--lime); background:linear-gradient(0deg, rgba(195,210,0,.05), rgba(195,210,0,.05)), #fff; }
.m-pill--lime:hover{ background:var(--lime); color:#fff; }
.m-title{
  font-family:'Cygre ExtraBold'; font-weight:800; font-size:32px; line-height:36px;
  text-transform:uppercase; color:#fff;
}

.m-hero{ left:0; top:0; width:375px; height:795px; }
.m-hero-photo{
  position:absolute; left:0; top:1px; width:375px; height:274px; overflow:hidden;
  background-color:#1a1f2a;
  -webkit-mask-image:linear-gradient(to bottom, #000 73%, rgba(0,0,0,.72) 88%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 73%, rgba(0,0,0,.72) 88%, transparent 100%);
}
.m-hero-season{
  position:absolute; inset:0;
  background-size:cover; background-position:center top; background-repeat:no-repeat;
  opacity:0; transform:scale(1.06);
  transition:opacity .8s ease, transform .8s ease;
}
.m-hero-season.is-active{ opacity:1; transform:scale(1); }
/* белая плашка-кисть из макета (экспорт Figma 375×108), 1:1 поверх фото */
/* белая подложка под верхом кисти: перья верхнего края не просвечивают фото */
.m-header-fill{ position:absolute; left:0; top:0; width:375px; height:52px; background:#fff; pointer-events:none; }
.m-header-shape{ position:absolute; left:0; top:0; width:375px; height:108px; pointer-events:none; }
.m-logo{ position:absolute; left:18px; top:20px; width:112px; height:40px; display:block; }
.m-logo img{ width:100%; height:100%; display:block; }
.m-burger{
  position:absolute; left:318px; top:20px; width:40px; height:40px;
  border:0; background:transparent; padding:0; cursor:pointer;
}
.m-burger span{ position:absolute; left:6px; width:29px; height:4px; border-radius:8px; background:#1F201D; }
.m-burger span:nth-child(1){ top:10px; }
.m-burger span:nth-child(2){ top:18px; }
.m-burger span:nth-child(3){ top:28px; }

/* ===== Мобильное меню (оверлей по бургеру) ===== */
.m-menu{ position:absolute; left:0; top:0; width:375px; height:812px; z-index:60; display:none; }
.m-menu.is-open{ display:block; }
.m-menu-backdrop{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; padding:0; cursor:pointer;
  background:rgba(31,32,29,.55); backdrop-filter:blur(2px);
}
.m-menu-panel{
  position:absolute; left:0; top:0; width:375px; height:370px;
  background:#1F201D; border-radius:0 0 20px 20px; overflow:hidden;
}
/* шапка-кисть и лого внутри меню — те же координаты, что в герое */
.m-menu-panel .m-header-shape{ position:absolute; left:0; top:0; width:375px; height:108px; pointer-events:none; }
.m-menu-panel .m-logo{ position:absolute; left:18px; top:20px; width:112px; height:40px; }
.m-menu-panel .m-burger--close{ position:absolute; left:318px; top:20px; }
/* крестик из трёх линий */
.m-burger--close span:nth-child(1){ top:18px; transform:rotate(45deg); }
.m-burger--close span:nth-child(2){ opacity:0; }
.m-burger--close span:nth-child(3){ top:18px; transform:rotate(-45deg); }

.m-menu-icons{ position:absolute; left:67px; top:135px; width:240px; height:40px; display:flex; justify-content:space-between; }
.m-menu-icons a{
  width:40px; height:40px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.m-menu-icons a:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.35); }
.m-menu-icons img{ width:22px; height:22px; object-fit:contain; }

.m-menu-dealer{ position:absolute; left:92px; top:255px; width:191px; }
.m-seasons{ position:absolute; left:74px; top:294px; width:232px; height:51px; display:flex; align-items:center; gap:20px; }
.m-season{
  position:relative; width:38px; height:38px; border:0; border-radius:50%;
  background:#fff; padding:7px; cursor:pointer;
  transition:width .3s ease, height .3s ease, padding .3s ease;
}
.m-season--active{ width:51px; height:51px; padding:10px; }
.m-season--active::before{
  content:''; position:absolute; inset:-3px; border:1px solid #fff; border-radius:50%;
  background:rgba(255,255,255,.1); z-index:-1;
}
.m-season img{ width:100%; height:100%; object-fit:contain; display:block; }
.m-hero-title{
  position:absolute; left:18px; top:403px; width:337px;
  font-family:'Cygre ExtraBold'; font-weight:800; font-size:32px; line-height:34px;
  text-transform:uppercase; color:#fff;
}
.m-hero-sub{
  position:absolute; left:18px; top:589px; width:337px;
  font-family:'Cygre Medium'; font-weight:500; font-size:14px; line-height:18px; color:#fff;
}
.m-hero-btn{ position:absolute; left:19px; top:699px; width:179px; }
.m-hero-btn2{ position:absolute; left:18px; top:755px; width:156px; }

.m-block2{ left:0; top:849px; width:375px; height:272px; }
.m-block2-title{ position:absolute; left:19px; top:0; width:336px; text-align:center; }
.m-block2-title .ttl-accent{ color:var(--cyan); }  /* «20–30 метров,» — голубым */
.m-block2-title .b2-line{ display:block; }          /* построчное проявление (reveal.js) */
.m-block2-stroke{ position:absolute; left:190px; top:56px; width:157px; height:auto; opacity:.9; }
.m-schematic{
  position:absolute; left:18px; top:148px; width:337px; height:123px;
  border-radius:10px; background:#212221; overflow:hidden;
}
.m-schematic img{ position:absolute; left:0; top:36px; width:337px; height:auto; object-fit:contain; }
.m-gr{
  position:absolute; font-family:'Sprite Graffiti'; font-size:7px; line-height:11px;
  text-transform:uppercase; color:var(--cyan); white-space:nowrap;
}
.m-fence-arrow{ position:absolute; pointer-events:none; object-fit:contain; }

.m-utp{ left:0; top:1231px; width:375px; height:1133px; }
.m-utp-photo{
  position:absolute; left:20px; top:106px; width:335px; height:265px; border-radius:10px;
  background:url('../assets/img/m-utp-photo.webp?v=2') center / cover no-repeat;
}
.m-utp-title{ position:absolute; left:19px; top:0; width:337px; }
.m-features{
  position:absolute; left:20px; top:401px; width:335px;
  display:grid; grid-template-columns:160px 157px; gap:30px 18px;
}
.m-feature{ position:relative; min-height:214px; }
.m-feature:nth-child(3),
.m-feature:nth-child(4){ min-height:238px; }
.m-feature:nth-child(5),
.m-feature:nth-child(6){ min-height:166px; }
/* голубой мазок-кисть за цифрой (как на ПК) */
.m-feature-accent{ position:absolute; left:0; top:-4px; width:29px; height:41px; z-index:0; pointer-events:none; }
.m-feature span{
  position:relative; z-index:1; left:10px; top:16px;
  display:block; height:48px; font-family:'Sprite Graffiti'; font-size:54px; line-height:15px; color:#fff;
}
.m-feature h3{
  margin-top:10px; font-family:'Cygre'; font-weight:700; font-size:18px; line-height:22px;
  text-transform:uppercase; color:#fff;
}
.m-feature p{
  margin-top:14px; font-family:'Cygre Medium'; font-weight:500; font-size:14px; line-height:18px;
  color:rgba(255,255,255,.6);
}

/* блок «ТВОЙ ПРЕМИУМ / В КОРОБКЕ» — 1:1 с ПК-композицией (масштаб 375/1920),
   box1 — верхняя коробка справа, box2 — нижняя слева, подписи по бокам */
/* блок «ТВОЙ ПРЕМИУМ / В КОРОБКЕ» — 1:1 с фигмой: две коробки по диагонали,
   шириной 451px (сильный вылет за оба края), object-fit:cover с привязкой к верху —
   режется только нижняя мягкая тень, верх не обрезается */
.m-premium{ left:0; top:2374px; width:375px; height:240px; }
.m-paint{ position:absolute; pointer-events:none; object-fit:contain; opacity:.82; }
.m-paint--left{ left:8px; top:5px; width:254px; height:198px; }
.m-paint--right{ left:225px; top:55px; width:180px; }
.m-box-label{
  position:absolute; z-index:3; font-family:'Cygre'; font-weight:700; font-size:10px; line-height:9px;
  text-transform:uppercase; color:#fff;
}
.m-box-label--left{ left:24px; top:74px; }
.m-box-label--right{ left:auto; right:20px; top:123px; text-align:right; }
/* height:auto — показываем картинку целиком вместе с мягкой тенью (не режем низ) */
.m-box{ position:absolute; pointer-events:none; height:auto; }
/* верхняя коробка (box1) — смещена вправо */
.m-box--right{ left:80px; top:18px; width:324px; }
/* нижняя коробка (box2) — смещена влево */
.m-box--left{ left:-11px; top:23px; width:288px; }

.m-products{ left:0; top:2626px; width:375px; height:300px; }
.m-products > .m-title{ display:none; }
.m-products-track{
  position:absolute; left:20px; top:0; width:355px; height:300px;
  display:flex; gap:21px;
  /* карусель листается по горизонтали, но вертикальный свайп прокручивает страницу */
  overflow-x:auto; overflow-y:hidden; touch-action:pan-x pan-y; overscroll-behavior-x:contain;
  padding:0 20px 0 0; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.m-products-track::-webkit-scrollbar{ display:none; }
.m-product{
  position:relative; flex:0 0 245px; height:300px; scroll-snap-align:start;
  background:transparent; border-radius:0; padding:0; color:#1F201D;
}
.m-product::before{ content:''; position:absolute; left:0; top:0; width:245px; height:154px; background:#fff; border-radius:10px; }
/* картинка товара — размеры зависят от типа (object-fit:contain держит пропорции) */
.m-product img{ position:absolute; z-index:1; right:21px; top:14px; width:124px; height:124px; object-fit:contain; display:block; }
.m-product--post img{ right:61px; top:14px; width:32px; height:118px; }
.m-product--post-strong img{ right:64px; top:14px; width:25px; height:118px; }
.m-product--post-double img{ right:55px; top:14px; width:42px; height:118px; }
.m-product--gate img{ right:6px; top:5px; width:130px; height:130px; }
.m-product--gates img{ right:8px; top:20px; width:135px; height:116px; }
.m-product--arch img{ right:8px; top:48px; width:140px; height:54px; }
.m-product h3{
  position:absolute; z-index:1; left:19px; top:20px; width:78px;
  font-family:'Cygre'; font-weight:700; font-size:10px; line-height:10px; color:#000;
}
.m-product p{
  position:absolute; z-index:1; left:19px; top:112px; margin:0;
  font-family:'Cygre'; font-weight:700; font-size:14px; line-height:8px; color:var(--lime); white-space:nowrap;
}
.m-product p.m-product-soon{ top:108px; color:var(--cyan); }
.m-product p.m-product-soon::before{ content:none; }
.m-product p::before{
  content:'Стоимость ед., с НДС'; position:absolute; left:0; top:-13px; width:70px;
  font-family:'Cygre'; font-weight:400; font-size:5px; line-height:7px; color:rgba(0,0,0,.5);
}
.m-product ul{
  position:absolute; left:0; top:186px; width:245px; box-sizing:border-box; margin:0; padding:0 16px 0 16px;
  font-family:'Cygre Medium'; font-size:10px; line-height:12px; color:rgba(255,255,255,.6);
}
.m-product ul::before{
  content:attr(data-label); position:absolute; left:0; top:-21px; width:230px;
  font-family:'Sprite Graffiti'; font-size:20px; line-height:16px; color:var(--cyan);
  text-transform:uppercase; white-space:nowrap;
}
.m-product li{ list-style:disc; }
.m-product li + li{ margin-top:2px; }

.m-calc{ left:0; top:2996px; width:375px; height:731px; }
.m-calc > .m-title{ position:absolute; left:20px; top:0; width:288px; }
.m-calc-form{
  position:absolute; left:20px; top:66px; width:335px; height:661px;
  background:#fff; border-radius:20px; padding:0;
}
.m-calc-form h3{
  position:absolute; left:27px; margin:0; font-family:'Cygre'; font-weight:700; font-size:18px; line-height:18px;
  color:var(--dark); white-space:nowrap;
}
.m-calc-form h3:nth-of-type(1){ top:26px; }
.m-calc-form h3:nth-of-type(2){ top:127px; }
.m-calc-form h3:nth-of-type(3){ top:275px; }
.m-calc-form h3:nth-of-type(4){ top:375px; }
.m-calc-form h3 span{ color:var(--dark); }
.m-calc-form h3 em{ font-style:normal; color:rgba(31,32,29,.4); margin-left:4px; }
.m-calc-input{
  position:absolute; left:27px; top:62px; width:134px; height:40px; border:1px solid var(--cyan); border-radius:7px;
  background:linear-gradient(0deg, rgba(95,196,229,.05), rgba(95,196,229,.05)), #fff;
  outline:none; text-align:center; padding:0 12px;
  font-family:'Cygre'; font-weight:700; font-size:12px; color:var(--cyan);
}
.m-calc-input::placeholder{ color:rgba(95,196,229,.45); opacity:1; }
.m-calc-row{ position:absolute; left:27px; top:161px; width:163px; display:flex; flex-direction:column; gap:8px; }
.m-calc-row .m-pill{ width:auto; text-transform:none; }
.m-stepper{ position:absolute; left:27px; width:119px; height:40px; }
.m-calc-form .m-stepper[data-stepper="wickets"]{ top:310px; }
.m-calc-form .m-stepper[data-stepper="gates"]{ top:432px; }
.m-stepper .stepper__btn{
  top:9px; width:22px; height:22px;
}
.m-stepper .stepper__btn--plus{ left:97px; }
.m-stepper .stepper__btn--minus::before{ width:12px; height:1px; }
.m-stepper .stepper__btn--plus::before{ width:12px; height:1px; }
.m-stepper .stepper__btn--plus::after{ width:1px; height:12px; }
.m-stepper .stepper__field{
  left:34px; top:0; width:52px; height:40px; border-radius:7px;
  font-size:12px; line-height:19px;
}
.m-gate-type{ position:absolute; left:27px; top:516px; width:163px; z-index:6; }
.m-gate-type__toggle{ position:relative; width:100%; text-transform:none; justify-content:flex-start; padding:0 44px 0 20px; }
.m-gate-type__value{ pointer-events:none; }
.m-gate-type__chevron{ position:absolute; right:9px; top:8px; width:23px; height:23px; border-radius:50%; background:var(--cyan); pointer-events:none; }
.m-gate-type__chevron::after{
  content:''; position:absolute; left:50%; top:46%; width:7px; height:7px;
  border-right:2px solid #fff; border-bottom:2px solid #fff;
  transform:translate(-50%,-50%) rotate(45deg); transition:transform .2s ease;
}
.m-gate-type.is-open .m-gate-type__chevron::after{ transform:translate(-50%,-20%) rotate(-135deg); }
.m-gate-type__menu{
  position:absolute; left:0; top:46px; width:100%; margin:0; padding:6px; list-style:none;
  background:#fff; border:1px solid var(--cyan); border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.18); display:none; z-index:10;
}
.m-gate-type.is-open .m-gate-type__menu{ display:block; }
.m-gate-type__option{
  padding:8px 12px; border-radius:8px; cursor:pointer;
  font-family:'Cygre'; font-weight:700; font-size:11.4px; color:var(--cyan);
}
.m-gate-type__option:hover,
.m-gate-type__option.is-active{ background:rgba(95,196,229,.12); }
.m-calc-submit{ position:absolute; left:88px; top:586px; width:158px; margin:0; }
.m-calc-form::before,
.m-calc-form::after{
  position:absolute; left:27px; font-family:'Cygre Medium'; font-size:10px; line-height:24px; color:rgba(31,32,29,.6);
}
.m-calc-form::before{ content:'Количество'; top:398px; }
.m-calc-form::after{ content:'Тип'; top:482px; }
/* карточка предварительной стоимости — идёт сразу после формы, до блока дилера */
.m-calc-total{
  left:20px; top:3743px; width:335px; height:197px;
  background:#fff; border-radius:20px;
}
/* карточка «Ваш комплект» — под блоком дилера */
.m-calc-kit{
  left:20px; top:4131px; width:335px; height:444px;
  background:#fff; border-radius:20px;
}
.m-calc-kit h3{
  position:absolute; z-index:1; left:26px; top:26px; margin:0;
  font-family:'Cygre'; font-weight:700; font-size:18px; line-height:22px; color:var(--dark);
}
/* сетка результата 1:1 по макету: картинка сверху, число «0 шт.» и подпись,
   между колонками — вертикальные разделители (Line 26 / Line 28) */
.m-result-grid{
  position:absolute; z-index:1; left:0; top:0; width:335px; height:444px; margin:0;
}
.m-result-grid::before,
.m-result-grid::after{ content:''; position:absolute; left:167px; width:1px; background:#1F201D; }
.m-result-grid::before{ top:64px; height:152px; }   /* секции | столбы */
.m-result-grid::after{ top:236px; height:165px; }    /* калитка | ворота */
.m-result-grid div{ position:absolute; width:130px; }
.m-result-grid div:nth-child(1){ left:26px; top:157px; }   /* Секций */
.m-result-grid div:nth-child(2){ left:208px; top:157px; }  /* Столбов */
.m-result-grid div:nth-child(3){ left:26px; top:340px; }   /* Калитка */
.m-result-grid div:nth-child(4){ left:207px; top:336px; }  /* Ворота */
.m-result-grid strong{
  position:absolute; left:0; top:0; display:block;
  font-family:'Cygre'; font-weight:700; font-size:32px; line-height:36px;
  color:var(--dark); white-space:nowrap;
}
.m-result-grid span{
  position:absolute; left:0; top:40px; display:block;
  font-family:'Cygre Medium'; font-size:16px; line-height:24px; color:rgba(31,32,29,.6); white-space:nowrap;
}
.m-result-grid img{ position:absolute; object-fit:contain; }
.m-result-grid div:nth-child(1) img{ left:11px;  top:-90px;  width:70px;  height:73px; }   /* секция */
.m-result-grid div:nth-child(2) img{ left:35px;  top:-93px;  width:19px;  height:81px; }   /* столб */
.m-result-grid div:nth-child(3) img{ left:-28px; top:-119px; width:129px; height:129px; }  /* калитка */
.m-result-grid div:nth-child(4) img{ left:-17px; top:-95px;  width:115px; height:87px; }   /* ворота */
.m-total-label{
  position:absolute; z-index:1; left:26px; top:26px; width:279px; margin:0;
  font-family:'Cygre'; font-weight:700; font-size:18px; line-height:22px; color:var(--dark);
}
.m-total-price{
  position:absolute; z-index:1; left:26px; top:90px; margin:0;
  font-family:'Cygre'; font-weight:700; font-size:42px; line-height:24px; color:var(--cyan); white-space:nowrap;
}
/* лаймовая клякса-процент и росчерк-галочка под ценой (экспорт из Figma) */
.m-total-percent,
.m-total-arrow{ position:absolute; z-index:1; object-fit:contain; }
.m-total-percent{ left:137px; top:137px; width:28.5px; height:28.5px; }
.m-total-arrow{ left:166px; top:140px; width:23px; height:40px; }

/* ---- CTA дилера: лаймовый градиентный баннер с кляксами ---- */
.m-dealer{ left:0; top:3946px; width:375px; height:165px; }
.m-dealer-bg{
  position:absolute; left:20px; top:14px; width:335px; height:151px; box-sizing:border-box;
  background:linear-gradient(89.47deg, #1F201D 8.69%, #C3D200 52.18%, #1F201D 82.19%);
  border:1px solid var(--lime); border-radius:20px;
}
.m-dealer-splash{ position:absolute; object-fit:contain; }
.m-dealer-splash--left{ left:20px; top:0; width:71px; height:105px; }
.m-dealer-splash--right{ left:252px; top:99px; width:90px; height:53px; }
.m-dealer h2{
  position:absolute; left:34px; top:51px; width:308px; margin:0; text-align:center;
  font-family:'Cygre SemiBold'; font-weight:600; font-size:20px; line-height:22px;
  text-transform:uppercase; color:#fff;
}
.m-dealer .m-pill{ position:absolute; left:110px; top:112px; width:156px; }

.m-footer{ left:0; top:4685px; width:375px; height:701px; color:#fff; }
.m-footer-photo{
  position:absolute; left:0; top:0; width:375px; height:211px;
  background:
    linear-gradient(180deg, rgba(31,32,29,.08) 0%, rgba(31,32,29,.15) 100%),
    url('../assets/img/footer-city.webp') center / cover no-repeat;
}
.m-footer-photo::after{
  content:''; position:absolute; left:47px; top:58px; width:281px; height:93px;
  background:rgba(31,32,29,.4); filter:blur(30px); border-radius:50%;
}
.m-footer h2{
  position:absolute; left:20px; top:71px; width:335px; text-align:center;
  font-family:'Cygre'; font-weight:700; font-size:30px; line-height:34px; text-transform:uppercase;
}
.m-footer p{
  position:absolute; left:21px; top:231px; width:333px; text-align:center;
  font-family:'Cygre Medium'; font-size:14px; line-height:18px;
}
.m-footer .m-pill{ position:absolute; width:160px; }
.m-footer .m-pill--cyan{ left:98px; top:315px; width:179px; }
.m-footer .m-pill--lime{ left:92px; top:385px; width:191px; }
.m-foot-col{ position:absolute; width:158px; color:#fff; }
.m-foot-col h3{
  margin:0 0 10px; font-family:'Cygre Medium'; font-weight:500; font-size:14px; line-height:12px;
  text-transform:uppercase;
}
.m-foot-col p,
.m-foot-col address,
.m-foot-col nav a{
  position:static; display:block; margin:0; width:158px; text-align:left; font-style:normal;
  font-family:'Cygre'; font-weight:400; font-size:10px; line-height:12px; color:#fff; text-decoration:none;
}
.m-foot-col nav a + a{ margin-top:7px; }
/* контактные ссылки: телефон — голубым, почта — белой (как обычный текст) */
.m-foot-col address .m-foot-link{ display:inline; text-decoration:none; }
.m-foot-col address .m-foot-link[href^="tel:"]{ color:var(--cyan); }
.m-foot-col address .m-foot-link[href^="mailto:"]{ color:#fff; }
.m-foot-col--contacts{ left:20px; top:475px; }
.m-foot-col--author{ left:198px; top:475px; }
.m-foot-col--connect{ left:20px; top:591px; }
.m-foot-col--social{ left:198px; top:591px; }

@media (max-width: 767px){
  html, body{ background:var(--dark); }
  .stage{ display:none; }
  .mobile-stage{ display:block; }
}

@media (min-width: 768px){
  .mobile-stage{ display:none !important; }
}