/* ============================================================
   REMART Original — премиальный B2B-лендинг
   Шрифты: Unbounded (display) + Manrope (body) — оба с кириллицей.
   Inter намеренно НЕ используется: он выдаёт AI-вёрстку.
   Палитра: 6 цветов. Белый + лёд, электрическая бирюза,
   глубокий циан, тёмная сине-бирюза (вместо чёрного), коньяк.
   ============================================================ */

/* ===== Локальные шрифты (вместо Google Fonts: без обращения к google) ===== */
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/manrope-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/manrope-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/manrope-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/manrope-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/manrope-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/manrope-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/manrope-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/manrope-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/manrope-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/manrope-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/manrope-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/manrope-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/manrope-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/manrope-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/manrope-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/manrope-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/manrope-800-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/manrope-800-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/manrope-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/manrope-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/unbounded-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/unbounded-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/unbounded-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/unbounded-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/unbounded-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/unbounded-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/unbounded-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/unbounded-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/unbounded-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/unbounded-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/unbounded-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/unbounded-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/unbounded-800-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/unbounded-800-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/unbounded-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/unbounded-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

:root{
  /* тёмный тон — сине-бирюзовый, НЕ чёрный */
  --ink:#04303F;
  --ink-2:#3C6376;
  --ink-3:#7BA3B2;

  --bg:#FFFFFF;
  --ice:#DCF1F9;
  --ice-2:#B9E4F2;

  --turq:#00D6BE;   /* электрическая бирюза — главный акцент */
  --cyan:#00B4D8;   /* глубокий циан */
  --deep:#046C88;   /* тёмный циан для текста по светлому */
  --amber:#EE8B2B;  /* коньяк — тёплый контр-акцент под кожу */
  --amber-l:#FDEEDC;
  --turq-l:#D6F8F3;

  --line:rgba(4,48,63,.12);
  --line-2:rgba(4,48,63,.07);

  --sh-s:0 1px 2px rgba(4,48,63,.06), 0 6px 18px rgba(4,108,136,.08);
  --sh-m:0 4px 12px rgba(4,48,63,.07), 0 20px 50px rgba(4,108,136,.16);
  --sh-l:0 40px 90px rgba(4,108,136,.34);

  --r:16px;
  --r-l:26px;

  --pad:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
/* overflow-x:clip, а не hidden: hidden делает корень скролл-контейнером и ломает
   position:sticky у вложенных блоков (пин заголовка каталога). clip так же
   срезает горизонталь, но контейнер прокрутки не создаёт. */
html{ scroll-behavior:smooth; overflow-x:clip; }

body{
  position:relative;
  font-family:'Manrope',system-ui,sans-serif;
  color:var(--ink);
  /* база — светлое небо; облака рисует слой .sky поверх неё */
  background:linear-gradient(180deg, #fff 0%, #F4FBFD 38%, var(--ice) 100%);
  line-height:1.62;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* ---------- ЕДИНОЕ НЕБО НА ВЕСЬ САЙТ ----------
   Раньше каждая секция красила себя сама, и фон рвался на полосы. Теперь одно
   полотно на всю высоту документа: голубые облака расставлены по всей странице
   с ровным шагом, секции поверх — прозрачные. */
.sky{
  position:absolute; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}
/* Полотно облаков — готовый растр, растянутый на всю высоту страницы. Мягкий
   шум при растяжении не выдаёт себя, а стоит браузеру почти ничего. Едва
   заметный дрейф — единственный трансформ картинки, идёт на GPU, не перерисовка. */
.sky__clouds{
  position:absolute; inset:-2% -4%;
  background:url('assets/clouds.webp') top center / 100% 100% no-repeat;
  animation:cloudDrift 60s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes cloudDrift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(1.5%,-1%,0) scale(1.04); }
}
@media (prefers-reduced-motion:reduce){ .sky__clouds{ animation:none; } }

/* то же зерно, что в герое — снимает «пластиковость» градиентов на всю страницу */
.sky__grain{
  position:absolute; inset:0; opacity:.13; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* контент — над небом */
.hdr, main, .foot{ position:relative; z-index:1; }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

/* Драматичная иерархия: display — тяжёлый и крупный, тело — спокойное */
h1,h2,h3{ font-family:'Unbounded',system-ui,sans-serif; font-weight:700; line-height:1.06; letter-spacing:-.03em; }

.wrap{ width:100%; max-width:1240px; margin:0 auto; padding-inline:var(--pad); }



/* ---------- Кнопки ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:100px; overflow:hidden;
  font-family:'Manrope',sans-serif; font-size:15px; font-weight:700; letter-spacing:-.01em;
  white-space:nowrap; border:1px solid transparent; cursor:pointer;
  transition:box-shadow .35s var(--ease);
  will-change:transform;
}
.btn--lg{ padding:17px 32px; font-size:16px; }
.btn svg{ flex:none; position:relative; z-index:2; transition:transform .35s var(--ease); }
.btn > *:not(svg){ position:relative; z-index:2; }
/* Заливка при наведении — СДВИГ ГРАДИЕНТА, а не слой поверх кнопки.
   Раньше ::after перекрывал надпись: голый текстовый узел нельзя поднять
   через z-index, поэтому при наведении оставалась одна иконка. */
.btn{ background-size:220% 100%; background-position:0% 0; }
.btn{ transition:background-position .55s var(--ease), box-shadow .35s var(--ease); }
.btn:hover{ background-position:100% 0; }

.btn--grad{
  color:#fff;
  background-image:linear-gradient(110deg,
    var(--deep) 0%, var(--cyan) 22%, var(--turq) 45%,
    var(--deep) 70%, var(--ink) 100%);
  box-shadow:0 8px 26px rgba(0,180,216,.36);
}
.btn--grad:hover{ box-shadow:0 16px 40px rgba(0,180,216,.5); }
.btn--grad:hover svg{ transform:translateX(4px); }

.btn--amber{
  color:#fff;
  background-image:linear-gradient(110deg,
    #D9741B 0%, var(--amber) 40%, #C4650F 75%, #A9520A 100%);
  box-shadow:0 8px 26px rgba(238,139,43,.4);
}
.btn--amber:hover{ box-shadow:0 16px 40px rgba(238,139,43,.5); }

.btn--ghost{
  color:var(--ink);
  background-image:linear-gradient(110deg,
    #fff 0%, #fff 45%, var(--turq-l) 70%, var(--turq-l) 100%);
  border-color:var(--line); box-shadow:var(--sh-s);
}
.btn--ghost:hover{ border-color:var(--turq); }

/* вращающаяся градиентная рамка */
.btn-wrap{ position:relative; display:inline-block; border-radius:100px; }
/* conic-рамка снята: типовой AI-эффект, плюс кнопка уезжала из рамки при магните */

/* ============ ШАПКА ============ */
.hdr{
  position:fixed; inset:0 0 auto; z-index:100;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.hdr.is-stuck{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--line-2);
  box-shadow:0 4px 30px rgba(4,108,136,.08);
}
.hdr__in{
  max-width:1240px; margin:0 auto; padding:15px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:28px;
}

.logo{ display:flex; align-items:center; gap:11px; flex:none; }
.logo__mark{
  width:40px; height:40px; flex:none; border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--ink) 0%, var(--deep) 100%);
  color:#fff; font-family:'Unbounded',sans-serif; font-size:18px; font-weight:800;
  box-shadow:0 6px 18px rgba(4,108,136,.3);
}
.logo__txt{ display:flex; flex-direction:column; line-height:1; }
.logo__txt b{ font-family:'Unbounded',sans-serif; font-size:14px; font-weight:700; letter-spacing:.1em; }
.logo__txt i{ font-style:normal; font-size:8.5px; letter-spacing:.3em; color:var(--ink-3); margin-top:4px; }

.nav{ display:flex; gap:28px; }
.nav a{
  position:relative; font-size:14.5px; font-weight:600; color:var(--ink-2);
  padding:4px 0; transition:color .25s ease;
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--turq),var(--cyan));
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); }

.hdr__act{ display:flex; align-items:center; gap:16px; flex:none; }
.hdr__tel{ font-size:14.5px; font-weight:700; transition:color .25s; }
.hdr__tel:hover{ color:var(--deep); }

.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; cursor:pointer; }
.burger span{ width:22px; height:2px; background:var(--ink); border-radius:2px; transition:.3s var(--ease); }

/* ============ ГЕРОЙ ============ */
/* Фон героя живёт в псевдоэлементе, а не на самой секции: элемент с фоном
   нельзя растушевать, и внизу получалась резкая линия обрыва. Псевдоэлементу
   же можно задать маску — герой мягко растворяется в общем небе страницы. */
.hero{
  position:relative; overflow:hidden;
  padding:160px 0 100px;
  background:none;
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 560px at 84% 14%, rgba(0,214,190,.42) 0%, rgba(0,214,190,0) 58%),
    radial-gradient(820px 560px at 6% 92%, rgba(0,180,216,.34) 0%, rgba(0,180,216,0) 60%),
    radial-gradient(640px 440px at 58% 100%, rgba(238,139,43,.20) 0%, rgba(238,139,43,0) 64%),
    linear-gradient(175deg,#fff 0%, var(--ice) 100%);
  -webkit-mask:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
          mask:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
}
/* ---------- КИНЕМАТОГРАФИЧНЫЙ ФОН ----------
   Вместо выдуманного видео — настоящая кожа в движении: макрофактура
   с медленным наездом камеры и светом, скользящим по зерну.
   Материал реальный, движение живое, ничего не подделано. */
.cine{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  /* тот же мягкий низ, что и у фона героя, — иначе кожа обрывалась линейкой */
  -webkit-mask:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
          mask:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
}

.cine__img{
  position:absolute; inset:-8%;
  background:url('assets/hero-bg.jpg') center/cover no-repeat;
  filter:saturate(.85) contrast(1.05);
  animation:cineMove 34s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes cineMove{
  from{ transform:scale(1.06) translate3d(-1.5%,-1%,0); }
  to  { transform:scale(1.16) translate3d(1.5%,1.5%,0); }
}

/* свет, скользящий по зерну — кожа «дышит» */
.cine__light{
  position:absolute; inset:-20%;
  background:
    radial-gradient(closest-side, rgba(255,240,220,.55) 0%, rgba(255,240,220,0) 70%),
    radial-gradient(closest-side at 70% 60%, rgba(0,214,190,.35) 0%, rgba(0,214,190,0) 72%);
  mix-blend-mode:soft-light;
  animation:cineLight 18s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes cineLight{
  from{ transform:translate3d(-22%,-14%,0) scale(1); }
  to  { transform:translate3d(20%,16%,0) scale(1.25); }
}

/* заливка палитрой: кожа уходит в подложку, бирюза остаётся главной */
.cine__wash{
  position:absolute; inset:0;
  background:
    linear-gradient(175deg, rgba(255,255,255,.94) 0%, rgba(220,241,249,.9) 55%, rgba(255,255,255,.9) 100%),
    radial-gradient(900px 560px at 84% 14%, rgba(0,214,190,.5) 0%, rgba(0,214,190,0) 60%),
    radial-gradient(820px 560px at 6% 92%, rgba(0,180,216,.4) 0%, rgba(0,180,216,0) 62%);
}

/* киношное зерно — снимает «пластиковость» CSS-градиентов */
.cine__grain{
  position:absolute; inset:0; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---------- ЖИДКОЕ СТЕКЛО ----------
   Панели живут поверх «видео»: полупрозрачное стекло со светящейся
   кромкой сверху и снизу — как в референсе. */
.glass{
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  border:none;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7), 0 10px 30px rgba(4,108,136,.14);
}
.glass::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  padding:1.4px; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.95) 0%, rgba(255,255,255,.4) 22%,
    rgba(255,255,255,0) 45%, rgba(255,255,255,0) 58%,
    rgba(0,180,216,.35) 80%, rgba(0,214,190,.75) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}

/* тонкая сетка — «инженерный» слой, добавляет глубины */
.hero__grid{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(4,108,136,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4,108,136,.06) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask:radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
          mask:radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
}
.hero__glow{
  position:absolute; top:-180px; right:-120px; width:680px; height:680px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,214,190,.5) 0%, rgba(0,214,190,0) 66%);
  pointer-events:none; animation:drift 16s ease-in-out infinite alternate;
}
.hero__glow::after{
  content:''; position:absolute; left:-400px; top:380px;
  width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,180,216,.4) 0%, rgba(0,180,216,0) 68%);
  animation:drift 21s ease-in-out infinite alternate-reverse;
}
@keyframes drift{
  from{ transform:translate(0,0) scale(1); }
  to  { transform:translate(-50px,42px) scale(1.16); }
}

.hero__in{
  position:relative; z-index:2;
  max-width:1240px; margin:0 auto; padding-inline:var(--pad);
  /* Слева — логотип, оффер и CTA; справа — живое фото ассортимента. */
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(30px,4vw,64px); align-items:center;
}
.hero__l, .hero__r{ min-width:0; }

/* Крупный логотип на первом экране */
.hero__logo{
  display:block; width:auto; height:clamp(150px,20vw,250px);
  margin-bottom:16px; animation:fadeDown .8s var(--ease) both;
}
.hero__tag{
  margin-bottom:22px; font-size:13px; font-weight:700; color:var(--deep);
  letter-spacing:.01em; animation:fadeDown .8s var(--ease) .06s both;
}

/* Фото ассортимента — крупная вертикальная панель, а не «висящая» карточка */
.hero__photo{
  position:relative; margin:0; width:100%; max-width:520px; justify-self:center;
  aspect-ratio:4/5; border-radius:28px; overflow:hidden;
  box-shadow:0 44px 96px -38px rgba(4,48,63,.6);
  animation:fadeUp 1s var(--ease) .2s both;
}
.hero__photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.hero__photo-tag{
  position:absolute; left:14px; bottom:14px; margin:0;
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
  border-radius:13px; padding:10px 15px; line-height:1.15;
  box-shadow:0 10px 26px rgba(4,48,63,.2);
}
.hero__photo-tag b{ display:block; font-size:14.5px; font-weight:800; color:var(--ink); }
.hero__photo-tag span{ font-size:12px; color:var(--ink-2); }

.hero__badge{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 16px 8px 12px; border-radius:100px;
  background:rgba(255,255,255,.9); border:1px solid rgba(0,180,216,.3);
  backdrop-filter:blur(8px);
  font-size:12.5px; font-weight:700; color:var(--deep);
  letter-spacing:.02em;
  box-shadow:0 4px 16px rgba(0,180,216,.14);
  animation:fadeDown .8s var(--ease) both;
}
.hero__badge .dot{
  width:7px; height:7px; border-radius:50%; background:var(--turq);
  box-shadow:0 0 0 3px rgba(0,214,190,.28);
  
}


/* Signature: гигантский заголовок с градиентной второй строкой */
.hero__h1{
  margin:24px 0 22px;
  /* кегль подобран так, чтобы самая длинная строка («не возвращают»)
     ЦЕЛИКОМ влезала в колонку: маска обрезала всё, что вылезало */
  font-size:clamp(27px,3vw,43px);
  line-height:1.06;
  letter-spacing:-.035em;
}
/* маска обрезала буквы: строка была шире колонки, а нижние выносные
   срезались краем overflow. Даём воздух снизу и не даём строке переноситься. */
.hero__h1 .ln{
  padding-bottom:.14em; margin-bottom:-.1em;
  white-space:nowrap;
}
/* Строки заголовка выезжают из-под маски. Текст лежит в HTML — без JS
   первый экран остаётся читаемым (раньше он был пустой). */
.hero__h1 .ln{ display:block; overflow:hidden; }
.hero__h1 .ln > span{
  display:block;
  animation:lineUp 1s cubic-bezier(.16,1,.3,1) both;
}
.hero__h1 .ln:nth-child(1) > span{ animation-delay:.1s; }
.hero__h1 .ln:nth-child(2) > span{ animation-delay:.22s; }
.hero__h1 .ln:nth-child(3) > span{ animation-delay:.34s; }
.hero__h1 em{
  font-style:normal; font-weight:800;
  /* Сплошной фирменный акцент вместо градиент-клипа: -webkit-background-clip:text
     на iOS Safari не прокрашивает текст, лежащий в дочернем блоке с анимацией
     (глифы становятся прозрачными и строки исчезают). Сплошной цвет виден везде. */
  color:var(--deep);
}
@keyframes lineUp{ from{ transform:translateY(108%); } to{ transform:translateY(0); } }

.hero__sub{
  max-width:500px; font-size:17px; color:var(--ink-2); font-weight:500;
  animation:fadeUp .9s var(--ease) .15s both;
}
.hero__sub b{ color:var(--ink); font-weight:700; }

/* Одна главная кнопка. Вторая была равной по весу и конкурировала с ней —
   по исследованиям это заметно роняет конверсию. Теперь это текстовая ссылка. */
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:32px; animation:fadeUp .9s var(--ease) .3s both; }
.hero__lnk{
  position:relative; font-size:15px; font-weight:700; color:var(--ink-2);
  padding-bottom:3px; transition:color .25s ease;
}
.hero__lnk::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--turq),var(--cyan));
  transform:scaleX(.35); transform-origin:left;
  transition:transform .4s var(--ease);
}
.hero__lnk:hover{ color:var(--ink); }
.hero__lnk:hover::after{ transform:scaleX(1); }

/* второй путь: розница. Опт — главный, но одиночного покупателя не теряем */
.retail{
  margin-top:16px; font-size:14px; color:var(--ink-3);
  animation:fadeUp .9s var(--ease) .38s both;
}
.retail a{
  margin-left:6px; font-weight:700; color:var(--deep);
  border-bottom:1px solid rgba(0,180,216,.4);
  transition:color .25s ease, border-color .25s ease;
}
.retail a:hover{ color:var(--amber); border-color:var(--amber); }
.retail--c{ margin-top:26px; }

/* CTA под прайсом — там, где закупщик как раз считает */
.tbl__cta{
  display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
  margin-top:26px; padding:26px 30px; border-radius:var(--r-l);
  background:linear-gradient(120deg, rgba(0,214,190,.16) 0%, rgba(238,139,43,.14) 100%);
  border:1px solid rgba(0,180,216,.28);
}
.tbl__cta b{
  display:block; font-family:'Unbounded',sans-serif;
  font-size:17px; letter-spacing:-.02em; margin-bottom:6px;
}
.tbl__cta span{ font-size:14.5px; color:var(--ink-2); max-width:52ch; display:block; }

.hero__stats{
  display:flex; gap:40px; margin-top:46px; padding-top:28px;
  border-top:1px solid var(--line);
  animation:fadeUp .9s var(--ease) .42s both;
}
.stat b{
  display:block; font-family:'Unbounded',sans-serif;
  font-size:26px; font-weight:800; line-height:1.05; white-space:nowrap;
  background:linear-gradient(120deg, var(--ink) 0%, var(--deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat span{ font-size:12.5px; font-weight:600; color:var(--ink-3); }

/* ---------- SIGNATURE: чертёжная аннотация по фото ----------
   Один смелый элемент на весь сайт. Живое фото товара + выноски
   со спецификацией на тонких линиях, как в техническом чертеже. */
.hero__r{ position:relative; display:grid; place-items:center; min-height:560px; }

.spec{
  position:relative; width:min(100%, 700px);
  animation:specFade 1.1s var(--ease) .25s both;
}
@keyframes specFade{ from{ opacity:0; } to{ opacity:1; } }

/* Ремень вырезан из фона: серый пол телефонного снимка убивал премиальность.
   Теперь он парит на свету — как товар в витрине, а не как фото на полу. */
/* «Змея»: полотно ползёт волной и сворачивается в клубок.
   Пока она работает — фото и метки скрыты, потом клубок уступает им место. */
.snake{
  position:absolute; inset:0; z-index:3;
  width:100%; height:100%; overflow:visible;
  opacity:1; transition:opacity .7s var(--ease);
  pointer-events:none;
}
.spec.is-done .snake{ opacity:0; }

.spec__belt{
  position:relative; z-index:2; width:100%; height:auto;
  transform:rotate(-2deg) scale(.98);
  transition:transform 1s var(--ease);
  filter:
    drop-shadow(0 30px 40px rgba(4,48,63,.28))
    drop-shadow(0 6px 12px rgba(4,48,63,.22));
}
.spec:hover .spec__belt{ transform:rotate(0deg) scale(1.02); }

/* холодное свечение позади кожи — тёплый товар на ледяном свете */
.spec__halo{
  position:absolute; inset:-12% -8% -6%; z-index:1;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 46%, rgba(255,255,255,0) 72%),
    radial-gradient(closest-side at 72% 28%, rgba(0,214,190,.45) 0%, rgba(0,214,190,0) 74%);
  filter:blur(6px);
  animation:haloPulse 6s ease-in-out infinite;
}
@keyframes haloPulse{
  0%,100%{ opacity:.85; transform:scale(1); }
  50%    { opacity:1;   transform:scale(1.05); }
}

/* контактная тень под ремнём — без неё предмет «висит в воздухе» */
.spec__floor{
  position:absolute; left:8%; right:8%; bottom:-4%; height:42px; z-index:0;
  background:radial-gradient(closest-side, rgba(4,48,63,.42) 0%, rgba(4,48,63,0) 78%);
  filter:blur(8px);
}

/* уголки-метки, как на чертеже */
.spec__cross{ position:absolute; width:16px; height:16px; opacity:.7; }
.spec__cross::before,.spec__cross::after{
  content:''; position:absolute; background:var(--cyan);
}
.spec__cross::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.spec__cross::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-50%); }
.spec__cross--tl{ top:-26px; left:-26px; }
.spec__cross--br{ bottom:-26px; right:-26px; }

/* ---------- РАЗБОР НА ДЕТАЛИ ----------
   Ремень остаётся целым, а из него разъезжаются увеличенные фрагменты ЭТОГО ЖЕ
   снимка. Каждая карточка стартует ровно в своей точке на ремне (transform
   считаем от неё) и уезжает наружу — читается как разбор изделия, а не как
   всплывашка. Ничего не дорисовано: это макро-кроп фотографии. */

/* «Сцена» — сам ремень. Она уже кадра, поэтому по бокам остаются поля,
   в которые и разъезжается разбор. */
.spec__stage{ position:relative; width:63.5%; margin:0 auto; }

/* нити от карточек к точкам */
.leash{
  position:absolute; inset:0; z-index:3;
  width:100%; height:100%; overflow:visible; pointer-events:none;
}
/* нить прочерчивается на загрузке, следом за своей карточкой */
.leash__l{
  stroke:var(--turq); stroke-width:1; vector-effect:non-scaling-stroke;
  stroke-dasharray:1; stroke-dashoffset:1; pathLength:1; opacity:.85;
}
.spec.is-done .leash__l{ animation:leash .55s var(--ease) both; }
.leash__l--1{ animation-delay:.62s; }
.leash__l--2{ animation-delay:.8s; }
.leash__l--3{ animation-delay:.98s; }
.leash__l--4{ animation-delay:1.16s; }
@keyframes leash{ to{ stroke-dashoffset:0; } }

/* якорь — точка на самой детали. Появляется на загрузке: даёт «читаемый»
   первый экран (ремень уже размечен), приглашая скроллить за разбором. */
.spec__pin{
  position:absolute; z-index:5; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%; background:var(--turq);
  box-shadow:0 0 0 4px rgba(0,214,190,.26), 0 0 14px rgba(0,214,190,.9);
  opacity:0; transform:scale(0);
}
.spec.is-done .spec__pin{ animation:pinIn .5s var(--ease) both; }
@keyframes pinIn{ to{ opacity:1; transform:scale(1); } }
.spec__pin--1{ left:25%; top:15%; animation-delay:.15s; }
.spec__pin--2{ left:16%; top:43%; animation-delay:.3s; }
.spec__pin--3{ left:92%; top:48%; animation-delay:.45s; }
.spec__pin--4{ left:48%; top:72%; animation-delay:.6s; }

/* Разбор ведётся СКРОЛЛОМ, а не таймером. --p (0→1) приходит из JS по мере
   прокрутки первого экрана: карточка едет из своей точки на ремне (fx,fy,
   масштаб .4) на место (0,0, масштаб 1) и одновременно проявляется. Поэтому
   Карточки собираются на ЗАГРУЗКЕ (не по скроллу): у героя нет запаса
   прокрутки сверху, и привязка к скроллу прятала весь разбор, пока экран
   уезжал. Появившись, карточки стоят на месте — их можно прочитать и кликнуть,
   не трогая страницу. Заезд неспешный, чтобы не «промелькнуло». */
.det{
  position:absolute; z-index:4; width:16%; margin:0;
  border-radius:14px; overflow:hidden;
  background:rgba(255,255,255,.96);
  box-shadow:0 14px 34px rgba(4,108,136,.24), 0 0 0 1px rgba(0,214,190,.34);
  opacity:0;
  transition:box-shadow .4s var(--ease);
}
.det img{ display:block; width:100%; height:52px; object-fit:cover; }
.det figcaption{
  display:flex; flex-direction:column; line-height:1.2; white-space:nowrap;
  padding:6px 8px 7px; font-size:10px; font-weight:600; color:var(--ink-2);
}
.det figcaption b{
  font-size:9px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--deep); margin-bottom:2px;
}
.spec.is-lit .det:hover{
  transform:translateY(-5px) scale(1.03);
  box-shadow:0 22px 46px rgba(4,108,136,.32), 0 0 0 1px rgba(0,214,190,.6);
}

/* Карточка выезжает ИЗ своей точки на ремне на место — ощущение, что деталь
   вынули из изделия. Заезд плавный, финал — на месте и навсегда. */
.spec.is-done .det{ animation:detOut 1s var(--ease) both; }
@keyframes detOut{
  from{ opacity:0; transform:translate(var(--fx), var(--fy)) scale(.4); }
  55% { opacity:1; }
  to  { opacity:1; transform:none; }
}

/* 1 — пряжка: точка (36%,15%), карточка уходит влево-вверх */
.det--1{ left:0;  top:5.8%;             --fx:104px;  --fy:6px;   animation-delay:.5s; }
/* 2 — клеймо: точка (31%,43%) */
.det--2{ left:0;  top:33.8%;            --fx:88px;   --fy:0px;   animation-delay:.68s; }
/* 3 — срез: точка (71%,52%) */
.det--3{ right:0; left:auto; top:42.8%; --fx:-88px;  --fy:0px;   animation-delay:.86s; }
/* 4 — бирка: точка (49%,72%) */
.det--4{ right:0; left:auto; bottom:0;  --fx:-168px; --fy:-72px; animation-delay:1.04s; }

.spec__badge{ opacity:0; }
.spec.is-done .spec__badge{ animation:capIn .7s var(--ease) 1.05s both; }
@keyframes capIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* крупная плашка с шириной — как размер на чертеже */
.spec__badge{
  position:absolute; left:23%; right:auto; bottom:-24px; z-index:6;
  display:flex; align-items:baseline; gap:4px;
  padding:16px 20px; border-radius:18px;
  background:linear-gradient(135deg, var(--ink) 0%, var(--deep) 100%);
  color:#fff; box-shadow:0 18px 44px rgba(4,108,136,.42);
}
.spec__badge b{ font-family:'Unbounded',sans-serif; font-size:30px; font-weight:800; line-height:1; }
.spec__badge span{ font-size:12px; font-weight:700; color:var(--turq); }

/* ---------- Нижняя полоса фактов ---------- */
.hero__facts{
  position:relative; z-index:2; margin-top:74px;
  /* без жёсткой линейки сверху: полоса проявляется из фона, а не приклеена к нему */
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 34%, rgba(255,255,255,.55) 100%);
  backdrop-filter:blur(8px);
}
.hero__facts-in{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  padding-block:26px;
}
.fct{ padding-inline:26px; border-left:1px solid rgba(4,108,136,.14); }
.fct:first-child{ border-left:0; padding-left:0; }
.fct b{
  display:block; font-family:'Unbounded',sans-serif;
  font-size:15px; font-weight:700; letter-spacing:-.02em; margin-bottom:4px;
}
.fct span{ font-size:13px; color:var(--ink-2); }

/* ============ БЕГУЩАЯ СТРОКА ============ */
.ticker{
  position:relative; overflow:hidden; padding:22px 0;
  background:linear-gradient(100deg, var(--ink) 0%, #045A72 38%, var(--deep) 62%, #045A72 100%);
  background-size:200% 100%;
  animation:hueSlide 16s linear infinite;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
@keyframes hueSlide{ to{ background-position:200% 0; } }
/* зерно кожи и по бегущей строке — единая тактильная система тёмных поверхностей */
.ticker::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:url('assets/grain.webp') 0 0 / 300px repeat;
  mix-blend-mode:soft-light; opacity:.6;
}
.ticker__row{ position:relative; z-index:2; display:flex; width:max-content; animation:marquee 36s linear infinite; }
.ticker__row:hover{ animation-play-state:paused; }
.tk{
  display:flex; align-items:center; gap:12px; padding:0 34px; flex:none;
  font-size:14px; font-weight:700; color:rgba(255,255,255,.95); white-space:nowrap;
  letter-spacing:-.01em;
}
.tk::before{
  content:''; width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--turq); box-shadow:0 0 12px rgba(0,214,190,.9);
}
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============ СЕКЦИИ ============ */
.sec{ position:relative; padding:clamp(76px,9vw,122px) 0; }
/* Крупный «призрачный» номер секции — редакторская драматургия: ломает ровный
   ритм «заголовок + сетка» и читается как журнальная вёрстка, а не конструктор.
   Контуром, очень бледно, за контентом (wrap выше по z). */
.sec > .wrap{ position:relative; z-index:1; }
.secno{
  position:absolute; z-index:0; top:clamp(24px,3.5vw,56px); right:clamp(12px,5vw,72px);
  font-family:'Unbounded',sans-serif; font-weight:800; line-height:.8;
  font-size:clamp(120px,18vw,280px); letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:2px rgba(4,108,136,.16);
  pointer-events:none; user-select:none;
}
@media (max-width:760px){ .secno{ font-size:clamp(84px,26vw,150px); top:16px; right:8px; -webkit-text-stroke-width:1px; } }
/* Секции больше не красят себя сами — фон один на весь сайт. «Мягкая» секция
   только чуть притапливает небо, и делает это с растушёванными краями:
   сплошная заливка давала на стыке чёткую горизонтальную линию. */
.sec--soft{
  background:linear-gradient(180deg,
    rgba(220,241,249,0)   0%,
    rgba(220,241,249,.42) 16%,
    rgba(220,241,249,.42) 84%,
    rgba(220,241,249,0)   100%);
}

.sec__head{ max-width:700px; margin-bottom:56px; }
.sec__head--c{ max-width:760px; margin-inline:auto; text-align:center; }
.eyebrow{
  display:inline-block; margin-bottom:18px;
  font-size:11.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--deep);
}
.eyebrow--light{ color:var(--turq); }
.sec__head h2{ font-size:clamp(28px,3.6vw,50px); }
.sec__lead{ margin-top:20px; font-size:17px; color:var(--ink-2); max-width:600px; }
.sec__lead--c{ margin-inline:auto; }

/* Заголовок раскрывается по словам при входе в кадр: каждое слово поднимается
   из-под своей маски. JS оборачивает слова в .w>i и раздаёт задержки. */
.sec__head h2 .w{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.12em; margin-bottom:-.12em;
}
.sec__head h2 .w > i{
  display:inline-block; font-style:normal;
  transform:translateY(112%);
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.sec__head.is-in h2 .w > i{ transform:none; }

/* Пин заголовка каталога: пока карточки кож проходят мимо, «Семь видов кожи»
   держится у верха. Своя мягкая подложка — иначе карточки просвечивают сквозь
   текст. Низ подложки растушёван, чтобы не было бара. */
.sec__head--pin{ position:sticky; top:74px; z-index:6; margin-bottom:40px;
  padding:14px 0 26px;
  background:linear-gradient(180deg,
    var(--ice) 0%, var(--ice) 46%, rgba(220,241,249,.86) 72%, rgba(220,241,249,0) 100%);
}
.sec__head--pin::before{
  content:''; position:absolute; inset:0 -50vw; z-index:-1;
  background:inherit;
}

/* ---------- Боль ---------- */
.pain{ position:relative; }
.pain__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pn{
  position:relative; padding:34px 30px 32px;
  border-radius:var(--r-l);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--sh-s);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pn::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(160deg, rgba(238,139,43,.10), rgba(238,139,43,0) 55%);
  opacity:0; transition:opacity .4s ease;
}
.pn:hover{ transform:translateY(-5px); box-shadow:var(--sh-m); }
.pn:hover::before{ opacity:1; }
.pn__n{
  position:relative; z-index:1;
  display:block; margin-bottom:16px;
  font-family:'Unbounded',sans-serif; font-size:13px; font-weight:800; letter-spacing:.08em;
  color:var(--amber);
}
.pn h3{ position:relative; z-index:1; font-size:20px; margin-bottom:10px; }
.pn p{ position:relative; z-index:1; font-size:15px; color:var(--ink-2); }

.pain__turn{
  margin-top:44px; text-align:center;
  font-family:'Unbounded',sans-serif; font-weight:600;
  font-size:clamp(18px,2vw,25px); letter-spacing:-.02em;
  color:var(--ink);
}

/* Полоса гарантий под «тремя причинами»: то уникальное, что осталось от бывшей
   секции «Как сделан ремень». Тихая тройная колонка с тонкими разделителями —
   не спорит с карточками причин выше. */
.pledge{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin-top:48px; padding-top:2px;
  border-top:1px solid rgba(4,108,136,.14);
}
.pledge__i{ padding:26px 30px 0; border-left:1px solid rgba(4,108,136,.12); }
.pledge__i:first-child{ border-left:0; padding-left:0; }
.pledge__i b{
  display:block; font-family:'Unbounded',sans-serif;
  font-size:15px; font-weight:700; letter-spacing:-.02em; margin-bottom:9px; color:var(--ink);
}
.pledge__i span{ font-size:14.5px; color:var(--ink-2); }
@media (max-width:760px){
  .pledge{ grid-template-columns:1fr; }
  .pledge__i{ border-left:0; padding:22px 0 0; }
  .pledge__i:first-child{ padding-top:0; }
}

/* ---------- КАТАЛОГ: все семь кож рядом ----------
   Гармошка показывала одну кожу из семи — сравнивать было невозможно,
   а закупщику нужно именно сравнить. Ремни вырезаны из фона, поэтому
   все карточки на едином фоне: это каталог, а не разнобой телефонных снимков. */
.pgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.pc{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-l); background:#fff;
  border:1px solid var(--line); box-shadow:var(--sh-s);
  transition:box-shadow .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.pc:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 60px rgba(4,108,136,.24);
  border-color:rgba(0,214,190,.5);
}
/* золотая линия-акцент по верху карточки при наведении — тонкая «дорогая» деталь */
.pc:not(.pc--cta)::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:3;
  background:linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity:0; transition:opacity .4s var(--ease);
}
.pc:not(.pc--cta):hover::before{ opacity:1; }
/* восьмая ячейка сетки 4×2 была пустой — закрываем её призывом,
   а не дырой: человек как раз досмотрел ассортимент */
.pc--cta{
  border:0;
  background:linear-gradient(150deg, var(--ink) 0%, #045A72 48%, var(--deep) 100%);
  color:#fff;
  box-shadow:0 24px 60px rgba(4,108,136,.32);
}
.pc--cta::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(340px 240px at 20% 100%, rgba(238,139,43,.35) 0%, rgba(238,139,43,0) 70%);
}
.pc__cta{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:flex-start;
  height:100%; padding:28px 26px 26px;
}
.pc__cta-n{
  font-family:'Unbounded',sans-serif; font-size:44px; font-weight:800; line-height:1;
  color:var(--turq); margin-bottom:14px;
}
.pc__cta h3{ font-size:20px; color:#fff; margin-bottom:10px; }
.pc__cta p{ font-size:13.5px; color:rgba(255,255,255,.78); flex:1; margin-bottom:18px; }
.pc__cta .btn{ width:100%; }

.pc__ph{
  position:relative; aspect-ratio:1/1; display:grid; place-items:center;
  padding:14px;
  background:radial-gradient(circle at 50% 42%, #fff 0%, var(--ice) 100%);
}
.pc__ph img{
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 12px 18px rgba(4,48,63,.22));
  transition:transform .7s var(--ease);
}
.pc:hover .pc__ph img{ transform:scale(1.07) rotate(-2deg); }

.pc__b{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.pc__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pc__top h3{ font-size:19px; letter-spacing:-.035em; }
.pc__d{ margin:9px 0 15px; font-size:13.5px; color:var(--ink-2); flex:1; }

.pc__sw{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:13px; }
.pc__sw i{
  width:18px; height:18px; border-radius:50%; flex:none; background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(4,48,63,.18), 0 2px 5px rgba(4,48,63,.16);
  transition:transform .3s var(--ease);
}
.pc:hover .pc__sw i{ transform:scale(1.14); }

.pc__tags{ display:flex; flex-wrap:wrap; gap:5px; }
.pc__tags span{
  padding:5px 9px; border-radius:7px;
  background:var(--ice); border:1px solid var(--line-2);
  font-size:11.5px; font-weight:700; color:var(--ink-2);
}
.pc__tags span.x{
  background:#fff; color:var(--deep);
  border-color:rgba(0,214,190,.45);
}

/* ---------- ГАРМОШКА КОЖ (снята — неудобно сравнивать) ----------
   Семь полос. Наведение разворачивает полосу: кожа выходит из тени,
   по ней проходит блик, выезжают характеристики. Один signature-приём
   заменяет статичную картинку. */
.acc{
  display:flex; gap:10px; height:600px;
  border-radius:var(--r-l); overflow:hidden;
  box-shadow:0 40px 90px rgba(4,108,136,.28);
}
.ac{
  position:relative; flex:1 1 0; min-width:0; cursor:pointer;
  overflow:hidden; border-radius:18px;
  background-image:var(--img);
  background-size:cover; background-position:center;
  transition:flex .85s var(--ease), filter .7s var(--ease);
  /* в покое кожа притушена и обесцвечена — «в тени» */
  filter:brightness(.5) saturate(.55) contrast(1.05);
}
.ac.is-on{
  flex:4.6 1 0;
  filter:brightness(1.02) saturate(1.12) contrast(1.04);
}
/* холодный подтон только на закрытых — чтобы раскрытая кожа была тёплой и живой */
.ac::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,48,63,.25) 0%, rgba(4,48,63,.85) 100%);
  transition:opacity .7s var(--ease);
}
.ac.is-on::before{
  background:linear-gradient(180deg, rgba(4,48,63,0) 30%, rgba(4,48,63,.86) 100%);
}
/* блик, проходящий по коже в момент раскрытия */
.ac::after{
  content:''; position:absolute; top:0; bottom:0; width:60%;
  left:-70%; opacity:0;
  background:linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,247,235,.5) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-14deg);
}
.ac.is-on::after{ animation:sheen 1.15s var(--ease) .1s 1; }
@keyframes sheen{
  0%  { left:-70%; opacity:0; }
  22% { opacity:1; }
  100%{ left:130%; opacity:0; }
}

/* вертикальное имя на свёрнутой полосе */
.ac__v{
  position:absolute; left:50%; bottom:22px; z-index:2;
  transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font-family:'Unbounded',sans-serif; font-size:15px; font-weight:700;
  letter-spacing:.02em; color:#fff; white-space:nowrap;
  text-shadow:0 2px 12px rgba(4,48,63,.7);
  transition:opacity .4s ease;
}
.ac.is-on .ac__v{ opacity:0; }

/* раскрытая карточка */
.ac__in{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:28px 30px;
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease) .18s, transform .6s var(--ease) .18s;
  pointer-events:none;
}
.ac.is-on .ac__in{ opacity:1; transform:none; }
.ac__n{
  display:block; margin-bottom:8px;
  font-family:'Unbounded',sans-serif; font-size:11px; font-weight:800;
  letter-spacing:.18em; color:var(--turq);
}
.ac__in h3{ font-size:26px; color:#fff; margin-bottom:8px; letter-spacing:-.035em; }
.ac__in p{ font-size:14px; color:rgba(255,255,255,.82); max-width:34ch; }
/* цвета и ширины теперь живут в раскрытой полосе — отдельная сетка карточек
   дублировала эту же информацию и была удалена */
.ac__sw{ display:flex; gap:7px; margin-top:14px; }
.ac__sw i{
  width:19px; height:19px; border-radius:50%; flex:none; background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.35);
}
.ac__tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:12px; }
.ac__tags span{
  padding:4px 9px; border-radius:7px;
  background:rgba(255,255,255,.14); backdrop-filter:blur(6px);
  font-size:11.5px; font-weight:700; color:rgba(255,255,255,.92);
}
.ac__tags span.x{
  background:rgba(0,214,190,.2); color:var(--turq);
  box-shadow:inset 0 0 0 1px rgba(0,214,190,.45);
}

.ac__meta{
  display:flex; align-items:center; gap:14px; margin-top:16px;
}
.ac__meta span{
  padding:5px 11px; border-radius:8px;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
  font-size:12.5px; font-weight:700; color:#fff;
}
.ac__meta b{
  padding:6px 13px; border-radius:9px;
  background:linear-gradient(120deg,#D9741B 0%, var(--amber) 100%);
  font-size:14px; font-weight:800; color:#fff;
  box-shadow:0 6px 18px rgba(238,139,43,.45);
}

/* ---------- МАТЕРИАЛ: свет по коже за курсором (не используется) ----------
   Настоящее макро-фото кожи + подвижный блик. Курсор работает как лампа:
   свет идёт по зерну, рельеф проявляется. Материал ощущается, а не описывается. */
.mat__box{
  position:relative; overflow:hidden;
  aspect-ratio:16/7; border-radius:var(--r-l);
  box-shadow:0 40px 90px rgba(4,108,136,.3), 0 0 0 1px rgba(0,214,190,.3);
  cursor:crosshair;
  --mx:50%; --my:50%;
}
.mat__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06);
  transition:opacity .8s var(--ease), transform 1.2s var(--ease);
  /* кожа чуть притушена — свет курсора её «поднимает» */
  filter:brightness(.86) saturate(1.06) contrast(1.05);
}
.mat__img.is-on{ opacity:1; transform:scale(1); }

/* Блик появляется ТОЛЬКО под курсором. В покое — чистая тёплая кожа,
   иначе статичное пятно посреди кадра вымывает материал в серо-зелёный. */
.mat__light,
.mat__grain{
  position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity .5s ease;
}
.mat__box:hover .mat__light,
.mat__box:hover .mat__grain,
.mat__box.is-auto .mat__light,
.mat__box.is-auto .mat__grain{ opacity:1; }

/* тёплый блик — как лампа над витриной */
.mat__light{
  background:radial-gradient(280px circle at var(--mx) var(--my),
    rgba(255,246,232,.55) 0%,
    rgba(255,255,255,.18) 40%,
    rgba(255,255,255,0) 68%);
  mix-blend-mode:soft-light;
}
/* второй слой реально поднимает зерно под курсором */
.mat__grain{
  background:radial-gradient(240px circle at var(--mx) var(--my),
    rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 64%);
  mix-blend-mode:overlay;
}
/* только виньетка. Никакого цветного слоя поверх — кожа должна остаться кожей. */
.mat__box::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 45%, rgba(4,48,63,0) 42%, rgba(4,48,63,.5) 100%);
}

.mat__meta{
  position:absolute; left:26px; bottom:24px; z-index:3;
  display:flex; flex-direction:column;
  padding:14px 20px; border-radius:14px;
  background:rgba(255,255,255,.93); backdrop-filter:blur(10px);
  box-shadow:0 12px 34px rgba(4,48,63,.28);
}
.mat__meta b{ font-family:'Unbounded',sans-serif; font-size:17px; letter-spacing:-.02em; }
.mat__meta span{ font-size:12.5px; color:var(--ink-2); margin-top:2px; }

.mat__tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.mt{
  padding:11px 20px; border-radius:100px; cursor:pointer;
  font-family:'Manrope',sans-serif; font-size:14px; font-weight:700;
  color:var(--ink-2); background:#fff;
  border:1px solid var(--line);
  transition:transform .3s var(--ease), color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.mt:hover{ transform:translateY(-2px); border-color:var(--turq); color:var(--ink); }
.mt.is-on{
  color:#fff; border-color:transparent;
  background:linear-gradient(110deg, var(--deep) 0%, var(--turq) 100%);
  box-shadow:0 8px 24px rgba(0,180,216,.4);
}

/* ---------- Бенто ---------- */
.bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card{
  position:relative; grid-column:span 1;
  padding:32px 30px; border-radius:var(--r-l);
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--sh-s);
  transition:box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card--wide{ grid-column:span 2; }
.card--full{ grid-column:span 3; display:flex; align-items:center; gap:26px; padding:28px 32px; }
.card--full .card__ico{ margin-bottom:0; flex:none; }
.card--full .card__t{ min-width:0; }
.card--full p{ max-width:74ch; }
.card::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(140deg, rgba(0,214,190,.14), rgba(0,180,216,.07) 50%, rgba(238,139,43,.10));
  opacity:0; transition:opacity .45s ease; pointer-events:none;
}
.card:hover::before{ opacity:1; }
.card:hover{ box-shadow:var(--sh-m); border-color:rgba(0,214,190,.5); }
.card > *{ position:relative; z-index:1; }

.card__ico{
  width:52px; height:52px; border-radius:15px; margin-bottom:20px;
  display:grid; place-items:center;
  background:var(--turq-l); color:var(--deep);
  transition:transform .45s var(--ease);
}
.card:hover .card__ico{ transform:scale(1.1) rotate(-7deg); }
.bento .card:nth-child(2) .card__ico{ background:var(--amber-l); color:#C9711B; }
.bento .card:nth-child(4) .card__ico{ background:var(--amber-l); color:#C9711B; }
.bento .card:nth-child(6) .card__ico{ background:var(--amber-l); color:#C9711B; }
.card h3{ font-size:20px; margin-bottom:10px; }
.card p{ font-size:15px; color:var(--ink-2); }

/* ---------- Карточки кож ---------- */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.lcard{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-l); background:#fff; border:1px solid var(--line);
  box-shadow:var(--sh-s);
  transition:box-shadow .45s var(--ease);
}
.lcard:hover{ box-shadow:0 24px 60px rgba(4,108,136,.26); }
.lcard__ph{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--ice); }
.lcard__ph img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.lcard:hover .lcard__ph img{ transform:scale(1.07); }
.lcard__ph::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(4,48,63,.18) 100%);
  opacity:0; transition:opacity .45s ease;
}
.lcard:hover .lcard__ph::after{ opacity:1; }

.lcard__b{ padding:24px 26px 26px; display:flex; flex-direction:column; flex:1; }
.lcard__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lcard__top h3{ font-size:22px; letter-spacing:-.035em; }
.flag{
  display:inline-block; margin-left:8px; padding:4px 9px; border-radius:7px;
  background:var(--turq-l); color:var(--deep);
  font-family:'Manrope',sans-serif; font-size:10px; font-weight:800; letter-spacing:.02em;
  vertical-align:middle; text-transform:uppercase;
}
.price{
  flex:none; padding:7px 13px; border-radius:9px;
  font-size:15px; font-weight:800; color:#fff; white-space:nowrap;
  background:linear-gradient(120deg,#D9741B 0%, var(--amber) 100%);
  box-shadow:0 5px 16px rgba(238,139,43,.4);
}
.lcard__d{ margin:12px 0 20px; font-size:14.5px; color:var(--ink-2); flex:1; }

.sw{ display:flex; gap:7px; margin-bottom:17px; }
.sw i{
  width:20px; height:20px; border-radius:50%; flex:none; background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(4,48,63,.18), 0 2px 5px rgba(4,48,63,.16);
  transition:transform .3s var(--ease);
}
.sw--duo{ background:linear-gradient(160deg,#1c1c1c 48%, var(--c) 48%) !important; }
.lcard:hover .sw i{ transform:scale(1.2); }
.lcard:hover .sw i:nth-child(2){ transition-delay:.04s; }
.lcard:hover .sw i:nth-child(3){ transition-delay:.08s; }
.lcard:hover .sw i:nth-child(4){ transition-delay:.12s; }
.lcard:hover .sw i:nth-child(5){ transition-delay:.16s; }
.lcard:hover .sw i:nth-child(6){ transition-delay:.2s; }
.lcard:hover .sw i:nth-child(7){ transition-delay:.24s; }

.tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tags span{
  padding:6px 11px; border-radius:8px;
  background:var(--ice); border:1px solid var(--line-2);
  font-size:12px; font-weight:700; color:var(--ink-2);
  transition:transform .25s var(--ease), background .25s ease, color .25s ease;
}
.tags span:hover{ transform:translateY(-2px); background:var(--turq-l); color:var(--deep); }
.tags__x{ background:#fff !important; color:var(--deep) !important; border-color:rgba(0,214,190,.45) !important; }

.lcard--feat{ grid-column:span 3; flex-direction:row; }
.lcard--feat .lcard__ph{ flex:0 0 44%; aspect-ratio:auto; }
.lcard--feat .lcard__b{ justify-content:center; padding:36px 40px; }
.lcard--feat .lcard__top h3{ font-size:27px; }
.lcard--feat .lcard__d{ flex:0; max-width:56ch; }

/* ---------- Размеры ---------- */
.sizes{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.szcol{
  padding:34px; border-radius:var(--r-l);
  background:#fff; border:1px solid var(--line); box-shadow:var(--sh-s);
}
.szcol__h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:28px; padding-bottom:18px; border-bottom:1px solid var(--line-2); }
.szcol__h h3{ font-size:21px; }
.szcol__h span{ font-size:12.5px; font-weight:700; color:var(--ink-3); }

.bars{ display:flex; flex-direction:column; gap:16px; }
.bars li{ display:flex; align-items:center; gap:16px; }
/* полоса = ремень: длина одна, меняется только толщина (= ширина ремня) */
.bars i{
  display:block; flex:1; min-width:0;
  height:calc(var(--w) * 1px); border-radius:6px;
  background:linear-gradient(100deg, var(--ink) 0%, #0A5A73 100%);
  box-shadow:var(--sh-s);
}
.bars--alt i{ background:linear-gradient(100deg, var(--cyan) 0%, var(--turq) 100%); }
.bars b{ flex:none; width:54px; text-align:right; font-size:14px; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums; }

.notes{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px; }
.note{
  padding:22px 24px; border-radius:var(--r);
  background:rgba(255,255,255,.75); border:1px solid rgba(0,214,190,.35);
  backdrop-filter:blur(8px);
}
.note b{ display:block; font-family:'Unbounded',sans-serif; font-size:14px; margin-bottom:5px; }
.note span{ font-size:13.5px; color:var(--ink-2); }

/* ---------- Прайс ---------- */
.tbl-wrap{
  overflow-x:auto; border-radius:var(--r-l);
  background:#fff; border:1px solid var(--line); box-shadow:var(--sh-m);
}
.tbl{ width:100%; border-collapse:collapse; min-width:840px; }
.tbl th,.tbl td{ padding:16px 14px; text-align:center; font-size:14.5px; white-space:nowrap; }
.tbl thead th{
  background:linear-gradient(100deg, var(--ink) 0%, var(--deep) 100%);
  color:#fff; font-family:'Manrope',sans-serif; font-size:12px; font-weight:700; letter-spacing:.02em;
}
.tbl thead th:first-child{ text-align:left; }
.tbl tbody tr{ border-top:1px solid var(--line-2); transition:background .25s ease; }
.tbl tbody tr:hover{ background:linear-gradient(90deg, var(--turq-l), var(--amber-l)); }
.tbl__lead{
  text-align:left !important; font-family:'Unbounded',sans-serif;
  font-size:15px !important; font-weight:700; letter-spacing:-.02em; color:var(--ink);
}
.tbl tbody td{ font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); }
.tbl td.none{ color:var(--ink-3); font-weight:400; }
.tbl__note{ margin-top:18px; font-size:14px; color:var(--ink-2); }
.tbl__note b{ color:var(--amber); font-weight:800; }

/* ---------- Опт ---------- */
.opt{
  position:relative; display:grid; grid-template-columns:1.05fr .95fr;
  border-radius:var(--r-l); overflow:hidden; color:#fff;
  background:
    radial-gradient(560px 360px at 8% 108%, rgba(238,139,43,.32) 0%, rgba(238,139,43,0) 66%),
    linear-gradient(135deg, var(--ink) 0%, #045A72 44%, var(--deep) 72%, #00A9A0 100%);
  box-shadow:var(--sh-l);
}
/* Зерно кожи по всей панели: soft-light даёт тактильность, не трогая гамму.
   Тёмный опт-блок из «просто цветного» становится «тёмной кожей» — премиум-якорь. */
.opt::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:url('assets/grain.webp') 0 0 / 300px repeat;
  mix-blend-mode:soft-light; opacity:.72;
}
/* Курсорный свет: мягкое пятно скользит за курсором по коже. Живое поведение. */
.opt::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(460px 460px at var(--mx,26%) var(--my,30%),
    rgba(190,240,232,.16) 0%, rgba(190,240,232,0) 60%);
  mix-blend-mode:screen; opacity:0; transition:opacity .45s ease;
}
.opt.is-lit::after{ opacity:1; }
.opt__l{ position:relative; z-index:2; padding:clamp(34px,4vw,62px); }
.opt__r{ position:relative; z-index:1; }
.opt__l h2{ font-size:clamp(25px,2.8vw,40px); color:#fff; margin-bottom:20px; }
.opt__l > p{ font-size:16px; color:rgba(255,255,255,.76); max-width:440px; }

.ticks{ margin:30px 0 34px; display:flex; flex-direction:column; gap:13px; }
.ticks li{ position:relative; padding-left:32px; font-size:15px; color:rgba(255,255,255,.94); }
.ticks li::before{
  content:''; position:absolute; left:0; top:4px; width:19px; height:19px; border-radius:50%;
  background:rgba(0,214,190,.24); box-shadow:inset 0 0 0 1px rgba(0,214,190,.7);
}
.ticks li::after{
  content:''; position:absolute; left:6px; top:9px;
  width:5px; height:9px; border:solid var(--turq); border-width:0 2px 2px 0; transform:rotate(45deg);
}

.opt__r{ position:relative; min-height:400px; }
.opt__r img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.opt__tag{
  position:absolute; left:24px; bottom:24px; padding:15px 22px; border-radius:15px;
  background:rgba(255,255,255,.95); backdrop-filter:blur(8px); box-shadow:var(--sh-m);
}
.opt__tag b{ display:block; font-family:'Unbounded',sans-serif; font-size:13.5px; color:var(--ink); }
.opt__tag span{ font-size:12.5px; color:var(--ink-2); }

/* ---------- Финал ---------- */
.final{
  padding:clamp(78px,9vw,116px) 0; text-align:center;
  background:radial-gradient(800px 440px at 50% 0%, rgba(0,214,190,.18) 0%, rgba(0,214,190,0) 64%);
}
.final__in{ display:flex; flex-direction:column; align-items:center; }
.final h2{ font-size:clamp(28px,3.6vw,50px); }
.final p{ margin-top:18px; font-size:17px; color:var(--ink-2); max-width:520px; }
.final__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:34px; }

/* ---------- Футер ---------- */
.ftr{ position:relative; padding:58px 0 24px; background:var(--ink); color:#fff; overflow:hidden; }
.ftr::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('assets/grain.webp') 0 0 / 300px repeat;
  mix-blend-mode:soft-light; opacity:.5;
}
.ftr__in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:auto 1fr auto; gap:36px; align-items:center;
  padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.12);
}
.ftr__bot{ position:relative; z-index:1; }
.logo--ftr .logo__txt i{ color:rgba(255,255,255,.5); }
/* Эмблема REMART вместо буквы «R»: снимаем со знака квадратную подложку/тень,
   показываем прозрачный PNG. Селекторы в 2 класса перебивают .logo__mark и
   .logo--ftr .logo__mark. */
.logo .logo__mark--img,
.logo--ftr .logo__mark--img{
  width:auto; height:44px; border-radius:0;
  background:none; box-shadow:none; object-fit:contain;
}
.ftr__d{ font-size:14px; color:rgba(255,255,255,.62); }
.ftr__c{ display:flex; gap:22px; }
.ftr__c a{ font-size:14.5px; font-weight:700; transition:color .25s; }
.ftr__c a:hover{ color:var(--turq); }
.ftr__bot{ padding-top:22px; display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; justify-content:space-between; }
.ftr__bot span{ font-size:13px; color:rgba(255,255,255,.42); }
.ftr__legal{ font-size:13px; color:rgba(255,255,255,.62); border-bottom:1px solid rgba(255,255,255,.22); transition:color .25s, border-color .25s; }
.ftr__legal:hover{ color:var(--turq); border-color:var(--turq); }

/* ---------- Оговорка про оферту под прайсом ---------- */
.tbl__oferta{ display:inline-block; margin-top:8px; font-size:12.5px; color:var(--ink-3); line-height:1.5; }

/* ---------- Правовая страница ---------- */
.legal{ padding-top:132px; }
.legal__in{ max-width:760px; }
.legal h3{ margin:34px 0 10px; font-size:18px; font-weight:800; color:var(--ink); }
.legal p{ margin-bottom:14px; font-size:16px; line-height:1.65; color:var(--ink-2); }
.legal p b{ color:var(--ink); font-weight:700; }
.legal__back{ margin-top:40px; padding-top:24px; border-top:1px solid var(--line); }
.legal__back a{ font-weight:700; color:var(--deep); }
.legal__back a:hover{ color:var(--turq); }

/* ---------- Витрина: живое фото ассортимента ---------- */
.showcase__in{
  display:grid; grid-template-columns:1fr 1.02fr;
  gap:clamp(28px,5vw,72px); align-items:center;
}
.showcase__cap{ margin-bottom:0; }
.showcase__ph{
  margin:0; border-radius:24px; overflow:hidden;
  box-shadow:0 34px 80px -34px rgba(4,48,63,.55);
  transform:rotate(-1.2deg);
}
.showcase__ph img{ display:block; width:100%; height:auto; }
@media (max-width:860px){
  .showcase__in{ grid-template-columns:1fr; gap:34px; }
  .showcase__cap{ text-align:center; max-width:none; }
  .showcase__cap .sec__lead{ margin-inline:auto; }
  .showcase__ph{ max-width:440px; margin-inline:auto; transform:none; }
}

/* ---------- Появление ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

.w{ display:inline-block; opacity:0; transform:translateY(24px); }
.is-in .w{ animation:wordUp .65s var(--ease) both; }
@keyframes wordUp{ to{ opacity:1; transform:none; } }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@keyframes fadeDown{ from{ opacity:0; transform:translateY(-16px); } to{ opacity:1; transform:none; } }

/* ============================================================
   АДАПТИВ — спроектированный, а не сжатый
   ============================================================ */
/* Разбору нужна ширина: карточкам надо куда разъехаться. Ниже 1240px их поля
   схлопываются, карточки наезжают друг на друга и на сам ремень — поэтому там
   разбор перестраивается в сетку под ремнём. Те же реальные макро-кропы, просто
   без разлёта: лучше честная сетка, чем каша. */
@media (max-width:1240px){
  .hero__in{ gap:28px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .spec{
    width:min(100%,420px);
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
  }
  .spec__stage{ grid-column:1 / -1; width:100%; }
  .spec__pin, .leash{ display:none; }
  .det{
    position:static; left:auto; right:auto; top:auto; bottom:auto;
    width:auto; transform:none;
  }
  .spec.is-done .det{ animation:capIn .6s var(--ease) both; }
  .det img{ height:78px; }
  .det figcaption{ font-size:11px; padding:7px 9px 8px; }
  .spec__badge{ left:auto; right:8px; top:8px; bottom:auto; padding:12px 16px; }
  .spec__badge b{ font-size:24px; }
  .nav{ gap:20px; }
}

@media (max-width:980px){
  /* на мобильном пин не нужен: экран короткий, залипший заголовок съедал бы
     половину высоты. Возвращаем в обычный поток. */
  .sec__head--pin{ position:static; background:none; padding:0; margin-bottom:34px; }
  .sec__head--pin::before{ display:none; }

  .hero{ padding:136px 0 76px; }
  .hero__in{ grid-template-columns:1fr; gap:52px; }
  .hero__l{ text-align:center; }
  .hero__logo{ margin-inline:auto; }
  /* На узком экране самая длинная строка («выгодно продавать») не влезала в
     колонку, и маска .ln (overflow:hidden) срезала последнюю букву. Кегль
     теперь течёт по ширине экрана, а white-space:normal — страховка: если
     текст всё же не поместится, он перенесётся, а не обрежется. */
  .hero__h1{ font-size:clamp(22px, calc(7.1vw - 1px), 43px); }
  .hero__h1 .ln{ white-space:normal; }
  .hero__sub{ margin-inline:auto; }
  .hero__cta{ justify-content:center; }
  .hero__stats{ justify-content:center; gap:32px; }
  .hero__r{ min-height:auto; padding-block:10px; }
  .hero__photo{ margin-inline:auto; max-width:400px; }
  .spec{ width:min(100%,380px); }
  .hero__facts{ margin-top:56px; }
  .hero__facts-in{ grid-template-columns:repeat(2,1fr); gap:22px 0; }
  .fct:nth-child(odd){ border-left:0; padding-left:0; }

  .nav{
    position:fixed; inset:68px 0 auto; z-index:99;
    flex-direction:column; gap:0; padding:8px var(--pad) 18px;
    background:rgba(255,255,255,.97); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 46px rgba(4,108,136,.14);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ padding:15px 0; font-size:16px; border-bottom:1px solid var(--line-2); }
  .nav a:last-child{ border-bottom:0; }
  .nav a::after{ display:none; }
  .hdr__tel{ display:none; }
  .burger{ display:flex; }
  .burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .burger.is-open span:nth-child(2){ opacity:0; }
  .burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .pain__row{ grid-template-columns:1fr; }
  .pgrid{ grid-template-columns:repeat(2,1fr); }
  /* гармошка на планшете — ниже и с меньшим разворотом */
  .acc{ height:420px; }
  .ac.is-on{ flex:3.4 1 0; }
  .ac__in{ padding:22px 22px; }
  .ac__in h3{ font-size:21px; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .card--wide, .card--full{ grid-column:span 2; }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .lcard--feat{ grid-column:span 2; }
  .lcard--feat .lcard__ph{ flex:0 0 42%; }
  .opt{ grid-template-columns:1fr; }
  .opt__r{ min-height:300px; order:-1; }
  .notes{ grid-template-columns:1fr; }
}

@media (max-width:720px){
  .hero{ padding:120px 0 0; }
  .pgrid{ grid-template-columns:1fr; }
  /* на телефоне гармошка разворачивается ВНИЗ, а не вбок — иначе полосы схлопнутся в нитки */
  .acc{ flex-direction:column; height:auto; gap:8px; }
  .ac{ flex:none; height:74px; border-radius:14px; transition:height .8s var(--ease), filter .7s var(--ease); }
  .ac.is-on{ flex:none; height:340px; }
  .ac__v{
    writing-mode:horizontal-tb; transform:none;
    left:20px; bottom:auto; top:50%; margin-top:-10px;
  }
  .ac__in{ padding:20px; }
  .ac__in p{ max-width:none; }
  /* на телефоне сетка разбора остаётся, только плотнее */
  .spec{ width:min(100%,380px); gap:8px; }
  .det img{ height:72px; }
  .spec__badge{ right:6px; top:6px; padding:11px 14px; }
  .spec__cross{ display:none; }
  .hero__stats{ gap:22px; flex-wrap:wrap; }
  .stat b{ font-size:26px; }

  .bento{ grid-template-columns:1fr; }
  .card--wide{ grid-column:span 1; }
  .card--full{ grid-column:span 1; flex-direction:column; align-items:flex-start; gap:0; padding:32px 28px; }
  .card--full .card__ico{ margin-bottom:20px; }
  .grid{ grid-template-columns:1fr; }
  .lcard--feat{ grid-column:span 1; flex-direction:column; }
  .lcard--feat .lcard__ph{ flex:none; aspect-ratio:4/3; }
  .lcard--feat .lcard__b{ padding:24px 26px 26px; }
  .lcard--feat .lcard__top h3{ font-size:22px; }
  .sizes{ grid-template-columns:1fr; }

  .btn--lg{ padding:15px 26px; font-size:15px; }
  .hero__cta .btn-wrap, .hero__cta .btn,
  .final__cta .btn-wrap, .final__cta .btn{ width:100%; }

  .ftr__in{ grid-template-columns:1fr; gap:22px; text-align:center; justify-items:center; }
  .ftr__c{ justify-content:center; }
  .tk{ padding:0 22px; font-size:13px; }
}

@media (max-width:420px){
  .hero__facts-in{ grid-template-columns:1fr; }
  .fct{ border-left:0; padding-left:0; }
  .szcol{ padding:26px 22px; }
}

/* ============================================================
   ПРАВКИ ПО АУДИТУ
   ============================================================ */

/* Якоря не должны прятаться под фиксированной шапкой */
section[id]{ scroll-margin-top:88px; }

/* Прайс: липкая первая колонка. Без неё на телефоне при прокрутке вбок
   теряется название кожи — таблица становится нечитаемой. */
.tbl th.tbl__lead,
.tbl td.tbl__lead{
  position:sticky; left:0; z-index:2;
  background:#fff;
  box-shadow:6px 0 12px -6px rgba(4,48,63,.18);
}
.tbl thead th.tbl__lead{ background:var(--ink); z-index:3; }
.tbl tbody tr:hover th.tbl__lead{ background:var(--turq-l); }

/* Подсветка колонки целиком: в таблице 10 колонок,
   вести глазом по вертикали без этого невозможно */
.tbl td.is-col, .tbl th.is-col{ background:rgba(0,214,190,.16); }
.tbl thead th.is-col{ background:var(--deep); }

/* Липкая кнопка на телефоне */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:98;
  display:none; align-items:center; gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%);
  transition:transform .45s var(--ease);
}
.mbar.is-on{ transform:none; }
.mbar__btn{ flex:1; }
.mbar__tel{
  flex:none; width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center;
  color:var(--deep); background:var(--turq-l);
}
@media (max-width:720px){
  .mbar{ display:flex; }
  body{ padding-bottom:76px; }
  /* кнопка в шапке выдавливала бургер за экран. Внизу теперь липкая CTA — в шапке она не нужна */
  .hdr__act .btn-wrap{ display:none; }
  .retail{ font-size:13px; line-height:1.5; }
  .retail a{ display:inline-block; margin-left:0; }
}

/* Клавиатурная навигация была невидима */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--turq);
  outline-offset:3px; border-radius:6px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal, .w{ opacity:1; transform:none; }
}