/* ═══════════════════════════════════════════════
   РФСеть — styles.css
   CSS-переменные, базовые стили, секции, анимации
═══════════════════════════════════════════════ */

/* ── Переменные ── */
:root {
  --green:       #00C853;
  --green-dark:  #00a844;
  --green-glow:  rgba(0,200,83,.4);
  --purple:      #7B1FA2;
  --purple-light:#9C27B0;
  --dark:        #0d001a;
  --dark2:       #110022;
  --card-bg:     #ffffff;
  --text-main:   #111111;
  --text-muted:  #555555;
  --radius-lg:   20px;
  --radius-md:   12px;
  --radius-pill: 40px;
  --shadow-card: 0 4px 24px rgba(0,0,0,.12);
  --shadow-green:0 4px 20px rgba(0,200,83,.4);
  --transition:  .22s cubic-bezier(.4,0,.2,1);
  --font:        'Inter', 'Segoe UI', Arial, sans-serif;
  --font-head:   'Montserrat', 'Inter', sans-serif;
  --nav-h:       72px;    /* высота фиксированного навбара */
  --sec-pad:     80px;    /* единый вертикальный отступ секций */
}

/* ── Сброс ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { background:var(--dark); font-family:var(--font); overflow-x:hidden; color:var(--text-main); line-height:1.6; }
main { display:block; }
img  {
  max-width:100%; display:block;
  /* Защита от скачивания: запрет перетаскивания, выделения, долгого тапа */
  -webkit-user-drag:none; -khtml-user-drag:none; -moz-user-drag:none; user-drag:none;
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
a    { text-decoration:none; }
button { font:inherit; }
.skip-link {
  position:fixed; top:10px; left:10px; z-index:2000;
  padding:10px 16px; border-radius:8px;
  background:#fff; color:#1a1030; font-weight:800;
  transform:translateY(-160%); transition:transform var(--transition);
}
.skip-link:focus { transform:translateY(0); }
a:focus-visible, button:focus-visible {
  outline:3px solid var(--green); outline-offset:3px;
}
/* Заголовки — Montserrat */
h1,h2,h3,h4,.section-title,.footer-col-title,.prod-name,.prod-price,.feat-card h4 { font-family:var(--font-head); }
/* Якоря не прячутся под фиксированным навбаром */
[id]{ scroll-margin-top:calc(var(--nav-h) + 12px); }

/* ════════════════════════════════════════
   NAVBAR
════════════════════════════════════════ */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,0,0,.07);
  padding:0 40px;
  height:72px;
  display:flex; align-items:center; justify-content:space-between;
  transition:box-shadow var(--transition);
}
.navbar.scrolled { box-shadow:0 2px 20px rgba(0,0,0,.12); }

.nav-logo-wrap {
  display:flex; align-items:center; text-decoration:none;
  transition:transform .25s ease;
}
.nav-logo-wrap:hover { transform:translateY(-1px); }
.nav-logo-img { height:62px; width:auto; display:block; position:relative; top:-9px; }

.nav-links { display:flex; gap:28px; }
.nav-links a {
  font-size:14px; font-weight:600; color:#333;
  transition:color var(--transition);
  position:relative; padding-bottom:2px;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:2px; background:var(--green);
  transform:scaleX(0); transition:transform var(--transition);
}
.nav-links a:hover { color:var(--green); }
.nav-links a:hover::after { transform:scaleX(1); }

.nav-contacts { display:flex; align-items:center; gap:14px; }
.nav-phone {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  font-size:0; color:#fff; background:#7B1FA2;
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.nav-phone svg { width:22px; height:22px; stroke:#fff; fill:none; stroke-width:2; }

/* Соцсети в навбаре */
.nav-socials { display:flex; align-items:center; gap:10px; }
.nav-soc {
  width:44px; height:44px; border-radius:50%;     /* как в футере */
  display:flex; align-items:center; justify-content:center;
  color:#fff; transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.nav-soc svg { width:22px; height:22px; }
.social-link {
  position:relative; overflow:hidden; isolation:isolate;
}
.social-link::after {
  content:""; position:absolute; top:-20%; bottom:-20%; left:0; width:20px;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.68),transparent);
  transform:translateX(-240%) skewX(-22deg); pointer-events:none;
}
.social-link:hover,
.social-link:focus-visible {
  transform:translateY(-3px) scale(1.08); filter:brightness(1.08);
}
.social-link:hover::after,
.social-link:focus-visible::after { animation:socialShine .8s ease 1; }
.social-link:focus-visible { outline:3px solid rgba(255,255,255,.9); outline-offset:3px; }
@keyframes socialShine {
  to { transform:translateX(360%) skewX(-22deg); }
}
.soc-phone { background:#7B1FA2; box-shadow:0 3px 10px rgba(123,31,162,.4); }
.soc-wa { background:#25D366; box-shadow:0 3px 10px rgba(37,211,102,.4); }
.soc-tg { background:#229ED9; box-shadow:0 3px 10px rgba(34,158,217,.4); }
.soc-fp { background:#FF6600; font-weight:900; font-size:19px; font-family:'Montserrat','Inter',sans-serif; box-shadow:0 3px 10px rgba(255,102,0,.45); }
.soc-av { background:#0AA5FF; font-weight:900; font-size:19px; font-family:'Montserrat','Inter',sans-serif; box-shadow:0 3px 10px rgba(10,165,255,.45); }
.soc-phone:hover,.soc-phone:focus-visible { box-shadow:0 0 22px 4px rgba(123,31,162,.78),0 0 46px 12px rgba(123,31,162,.34); }
.soc-wa:hover,.soc-wa:focus-visible { box-shadow:0 0 22px 4px rgba(37,211,102,.78),0 0 46px 12px rgba(37,211,102,.34); }
.soc-tg:hover,.soc-tg:focus-visible { box-shadow:0 0 22px 4px rgba(34,158,217,.78),0 0 46px 12px rgba(34,158,217,.34); }
.soc-fp:hover,.soc-fp:focus-visible { box-shadow:0 0 22px 4px rgba(255,102,0,.78),0 0 46px 12px rgba(255,102,0,.34); }
.soc-av:hover,.soc-av:focus-visible { box-shadow:0 0 22px 4px rgba(10,165,255,.78),0 0 46px 12px rgba(10,165,255,.34); }

.burger {
  display:none; background:none; border:none; cursor:pointer;
  width:40px; height:40px; flex-direction:column;
  justify-content:center; align-items:center; gap:5px;
}
.burger span {
  display:block; width:24px; height:2px;
  background:var(--text-main); transition:all var(--transition);
  border-radius:2px;
}
.burger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

.mobile-menu {
  display:none; position:fixed; top:64px; left:0; right:0;
  background:#fff; z-index:999;
  flex-direction:column; padding:20px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.mobile-menu.open { display:flex; }
.mobile-menu a {
  font-size:16px; font-weight:600; color:#333;
  padding:14px 0; border-bottom:1px solid #f0f0f0;
  transition:color var(--transition);
}
.mobile-menu a:hover { color:var(--green); }
.mobile-menu .mob-phone {
  margin-top:16px; font-size:18px; font-weight:800;
  color:var(--green); text-align:center;
}

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
/* ── Послойный hero (layered) ── */
.hero {
  padding-top:var(--nav-h);          /* высота navbar */
  background:#fff;
  position:relative; overflow:hidden;
}
/* Сцена с фиксированным соотношением сторон как у фона/референса (3:2) */
.hero-stage {
  position:relative;
  width:100%; max-width:1536px; margin:0 auto;
  aspect-ratio:1536 / 1024;
  background:#fff;                  /* подложка под прозрачные зоны слоёв */
}
.hero-layer { position:absolute; }

/* Контейнер арт-композиции (десктоп: на всю сцену).
   Не создаём отдельный stacking context: прозрачные вырезанные объекты
   должны свободно выходить на передний план поверх контента. */
.hero-art { position:absolute; inset:0; z-index:auto; pointer-events:none; }

/* Слой 1 — фон */
.hero-bg {
  inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:1; user-select:none;
}

/* Слой 5 — джин (поверх ноутбука) */
.hero-genie {
  z-index:8;
  left:41%; top:4%; width:52%;
  filter:drop-shadow(0 24px 50px rgba(80,20,140,.22));
  will-change:transform;
}

/* Слой 4 — гаджеты (парят) */
.hero-drone {
  z-index:8;
  left:33%; top:71%; width:22%;
  filter:drop-shadow(0 16px 34px rgba(80,20,140,.3));
  animation-delay:-2.2s;
}
.hero-camera {
  z-index:8;
  left:36%; top:43%; width:16%;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.28));
}
.hero-headphones {
  z-index:8;
  left:80%; top:42%; width:21%;
  filter:drop-shadow(0 16px 32px rgba(80,20,140,.3));
  animation-delay:-1.5s;
}
.hero-watch {
  z-index:8;
  left:82%; top:69%; width:17.5%;
  filter:drop-shadow(0 14px 28px rgba(0,150,90,.3));
  animation-delay:-3s;
}

/* Слой 3 — левый контент */
.hero-content {
  z-index:7;
  left:3.2%; top:7%;
  width:46%;
  display:flex; flex-direction:column;
  align-items:flex-start; gap:2.2%;
}

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:#ede0f5; color:var(--purple);
  font-size:clamp(9px,.85vw,13px); font-weight:800;
  letter-spacing:.5px; padding:.7em 1.3em; border-radius:30px;
  box-shadow:0 2px 10px rgba(123,31,162,.12);
}

.hero-headline {
  width:100%; max-width:640px; height:auto; display:block;
  margin:.3% 0 .2%;
}

.hero-sub {
  font-size:clamp(11px,1.25vw,19px); font-weight:700;
  color:var(--text-dark, #121824); letter-spacing:.5px;
  text-transform:uppercase; line-height:1.35;
}

/* Готовый фирменный слой карточек из исходной hero-композиции.
   Прозрачные поля WebP обрезаются контейнером, сам ассет не изменяется. */
.hero-features-rendered {
  position:relative;
  width:100%; max-width:560px;
  aspect-ratio:1533 / 347;
  overflow:hidden;
}
.hero-features-rendered img {
  position:absolute;
  width:101.24%; max-width:none; height:auto;
  left:-1.24%; top:-44.67%;
  display:block;
}

.hero-features {
  width:100%; max-width:430px;
  display:none; grid-template-columns:repeat(3,1fr); gap:10px;
  align-items:stretch;            /* равная высота всех карточек */
}
.feat-card {
  background:#fff; border-radius:16px;
  padding:16px 8px 14px;
  box-shadow:0 6px 20px rgba(40,20,80,.1);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.feat-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(40,20,80,.18); }
/* Одинаковые значки: фиксированный квадрат, иконка по центру */
.feat-ico {
  width:clamp(38px,3.1vw,46px); height:clamp(38px,3.1vw,46px);
  object-fit:contain; display:block; flex-shrink:0;
  filter:drop-shadow(0 3px 8px rgba(80,20,140,.25));
}
/* Заголовок — фиксированная высота (2 строки), тексты не «пляшут» */
.feat-card h4 {
  font-size:clamp(10.5px,.86vw,13px); font-weight:800; color:#1a1030;
  text-transform:uppercase; letter-spacing:.2px; line-height:1.15;
  min-height:2.3em; display:flex; align-items:center; justify-content:center;
}
.feat-card p {
  font-size:clamp(9px,.74vw,11px); color:#7d838c; line-height:1.25; margin:0;
}

.hero-cta { display:flex; gap:8px; flex-wrap:nowrap; margin:2.4% 0 .4%; }

.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gradient-purple, linear-gradient(90deg,#7A2BF7,#5F19D3));
  color:#fff; font-size:clamp(11px,1.05vw,16px); font-weight:800;
  padding:.9em 1.25em; border-radius:16px;
  box-shadow:0 8px 24px rgba(122,43,247,.4);
  transition:transform .3s ease, box-shadow .3s ease;
  cursor:pointer; white-space:nowrap;
}
.btn-primary:hover { transform:translateY(-2px) scale(1.03); box-shadow:0 12px 32px rgba(122,43,247,.6); }

.btn-secondary {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.85); color:var(--text-dark,#121824);
  font-size:clamp(11px,1.05vw,16px); font-weight:700;
  padding:.9em 1.2em; border-radius:16px;
  border:1.5px solid rgba(0,0,0,.12);
  transition:transform .3s ease, background .3s ease; cursor:pointer; white-space:nowrap;
}
.btn-secondary:hover { background:#fff; transform:translateY(-2px) scale(1.03); border-color:var(--purple); }

.hero-stats {
  width:100%; max-width:600px; height:auto; display:block;
  /* ниже + флаш по левому краю (компенсируем 5.8% прозрачного поля слева в картинке) */
  margin:3% 0 0 -5.8%;
  transition:transform .3s ease;
}

/* Лёгкое «всплытие» интерактивных слоёв-картинок */
.hover-lift:hover { transform:translateY(-4px); }
.floaty { animation:floaty 5s ease-in-out infinite; }
@keyframes floaty {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-12px); }
}

/* ════════════════════════════════════════
   CATEGORIES GRID
════════════════════════════════════════ */
.categories-section {
  background:#fff; padding:var(--sec-pad) 40px;
}
.section-header {
  text-align:center; margin-bottom:48px;
}
.section-title {
  font-size:clamp(28px,4vw,48px); font-weight:900;
  color:#111; margin-bottom:10px;
}
.section-sub {
  font-size:15px; color:#666;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.section-sub::before,.section-sub::after {
  content:'●'; color:var(--green); font-size:8px;
}

.categories-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px; max-width:1320px; margin:0 auto;
}

.cat-card {
  background:#fff; border-radius:var(--radius-lg);
  border:1.5px solid #eee; overflow:hidden;
  display:flex; flex-direction:column; align-items:center;
  padding:0 0 20px;
  transition:transform var(--transition), box-shadow var(--transition);
  cursor:pointer;
}
.cat-card:hover {
  transform:translateY(-5px);
  box-shadow:0 12px 40px rgba(0,0,0,.12);
  border-color:var(--green);
}
.cat-img-wrap {
  width:100%; aspect-ratio:179/124;   /* совпадает с нарезкой 358×248 — без подреза */
  overflow:hidden;
  background:linear-gradient(135deg,#f8f8ff,#eef8ff);
  display:flex; align-items:center; justify-content:center;
}
.cat-img-wrap img {
  width:100%; height:100%;
  object-fit:contain; padding:6%;
  transition:transform .4s ease;
}
.cat-card:hover .cat-img-wrap img { transform:scale(1.07); }

.cat-name {
  font-size:15px; font-weight:700; color:#111;
  margin:14px 0 12px; text-align:center; padding:0 12px;
}
.cat-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--green); color:#fff;
  font-size:13px; font-weight:700;
  padding:9px 22px; border-radius:var(--radius-pill);
  transition:all var(--transition);
}
.cat-btn:hover {
  background:var(--green-dark); transform:scale(1.05);
  box-shadow:var(--shadow-green);
}
.cat-btn svg { width:14px; height:14px; stroke:#fff; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }

/* ════════════════════════════════════════
   PRODUCTS CAROUSEL
════════════════════════════════════════ */
.products-section {
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(123,31,162,.22), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(0,200,83,.12), transparent 70%),
    var(--dark);
  /* верхний паддинг меньше: картинка-заголовок имеет ~24px своего свечения сверху,
     так чёрное сверху и снизу выходит одинаковым */
  padding:56px 0 var(--sec-pad);
}
/* Заголовок-картинка «Актуальные предложения»: геометрия закреплена по
   реальному размеру ассета 1500×309. Двигаются только отдельные слои дымки. */
.products-title-shell {
  position:relative;
  width:min(94%,1080px);
  height:auto;
  aspect-ratio:1500 / 309;
  margin:0 auto 44px;
  isolation:isolate;
}
.products-title-shell:focus-visible {
  outline:2px solid rgba(0,255,105,.82);
  outline-offset:6px;
  border-radius:14px;
}
.products-title-img {
  position:absolute; inset:0; z-index:2;
  display:block;
  width:100%; height:100%;
  object-fit:contain;
}

@property --title-mist-angle {
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}
.products-title-mist {
  --title-mist-angle:0deg;
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  opacity:.12;
  background:conic-gradient(
    from var(--title-mist-angle) at 50% 50%,
    transparent 0deg 18deg,
    rgba(0,255,105,.98) 30deg 64deg,
    transparent 78deg 136deg,
    rgba(137,54,255,.92) 150deg 184deg,
    transparent 198deg 262deg,
    rgba(0,224,190,.8) 274deg 302deg,
    transparent 316deg 360deg
  );
  -webkit-mask-image:url("img/layers/products-title.webp");
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:100% 100%;
  mask-image:url("img/layers/products-title.webp");
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:100% 100%;
}
.products-title-mist--wide {
  filter:blur(18px);
  opacity:.1;
}
.products-title-mist--core {
  filter:blur(9px);
  opacity:.14;
}
.products-title-mist--spark {
  filter:blur(4px);
  opacity:.08;
  background:conic-gradient(
    from calc(var(--title-mist-angle) + 42deg) at 50% 50%,
    transparent 0deg 28deg,
    rgba(176,255,218,.96) 40deg 54deg,
    transparent 66deg 168deg,
    rgba(185,92,255,.88) 180deg 198deg,
    transparent 212deg 304deg,
    rgba(40,255,130,.9) 318deg 336deg,
    transparent 348deg 360deg
  );
}
.products-title-shell:is(:hover,:focus-visible,:focus-within) .products-title-mist--wide {
  animation:products-title-mist-orbit 4.8s linear infinite,
            products-title-mist-renew 2.4s ease-in-out infinite;
}
.products-title-shell:is(:hover,:focus-visible,:focus-within) .products-title-mist--core {
  animation:products-title-mist-orbit 4.5s linear infinite,
            products-title-mist-renew 2.1s ease-in-out -1.05s infinite;
}
.products-title-shell:is(:hover,:focus-visible,:focus-within) .products-title-mist--spark {
  animation:products-title-mist-orbit 4.2s linear -.7s infinite,
            products-title-mist-renew 1.9s ease-in-out -.45s infinite;
}
@keyframes products-title-mist-orbit {
  from { --title-mist-angle:0deg; }
  to   { --title-mist-angle:360deg; }
}
@keyframes products-title-mist-renew {
  0%,100% { opacity:.34; }
  38%     { opacity:.9; }
  68%     { opacity:.52; }
}
@media (prefers-reduced-motion:reduce) {
  .products-title-shell:is(:hover,:focus-visible,:focus-within) .products-title-mist {
    --title-mist-angle:32deg;
    animation:none;
    opacity:.28;
  }
}
@media(max-width:600px){
  .products-title-shell { width:96%; margin-bottom:28px; }
  .products-title-mist--wide { filter:blur(12px); }
  .products-title-mist--core { filter:blur(7px); }
}
.prod-carousel-wrap { position:relative; overflow:hidden; width:100%; }
.prod-track { display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.prod-card {
  flex:0 0 25%; min-width:25%;
  background:linear-gradient(165deg,#ffffff 0%,#f4f0fb 100%);
  border-radius:26px; margin:0 14px;
  display:flex; flex-direction:column; align-items:center;
  padding:22px 20px 26px; box-sizing:border-box;
  border:1px solid rgba(123,31,162,.1);
  box-shadow:0 14px 36px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.9);
  text-decoration:none; color:inherit;
  transition:transform .35s ease, box-shadow .35s ease;
  cursor:pointer;
}
.prod-card:hover {
  transform:translateY(-8px);
  box-shadow:0 24px 50px rgba(123,31,162,.4), inset 0 1px 0 rgba(255,255,255,.9);
}
/* Объёмное поле-пьедестал под фото из ТГ */
.prod-card img {
  width:100%; height:340px; object-fit:contain;
  margin-bottom:18px; padding:22px; box-sizing:border-box;
  border-radius:22px;
  background:linear-gradient(150deg,#eef0f8 0%,#ffffff 55%,#f3eefb 100%);
  box-shadow:
    inset 0 2px 8px rgba(80,40,140,.14),
    inset 0 -4px 12px rgba(255,255,255,.95),
    0 10px 24px rgba(80,40,140,.12);
}
.prod-img-placeholder {
  width:100%; height:340px;
  display:flex; align-items:center; justify-content:center;
  font-size:96px; margin-bottom:18px;
  background:linear-gradient(150deg,#eef0f8,#f3eefb); border-radius:22px;
  box-shadow:inset 0 2px 8px rgba(80,40,140,.14);
}
.prod-name  {
  font-family:'Montserrat','Inter',sans-serif;
  font-size:16px; font-weight:800; color:#1a1030;
  text-align:center; margin-bottom:10px; line-height:1.3;
}
.prod-price {
  font-size:29px; font-weight:900; margin-bottom:14px;
  background:linear-gradient(90deg,#00C853,#00a844);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.prod-status {
  background:linear-gradient(90deg,#7B1FA2,#9c27b0); color:#fff;
  font-size:13px; font-weight:700; letter-spacing:.3px;
  padding:7px 22px; border-radius:24px;
  box-shadow:0 5px 16px rgba(123,31,162,.45);
}

.prod-arrows {
  display:flex; justify-content:space-between;
  position:absolute; top:50%; transform:translateY(-50%);
  width:100%; pointer-events:none; z-index:5;
}
.prod-arr {
  pointer-events:all; width:48px; height:48px;
  border-radius:50%; border:none; cursor:pointer;
  background:var(--green);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px var(--green-glow);
  transition:all var(--transition);
}
.prod-arr:hover { background:var(--purple); transform:scale(1.1); }
.prod-arr svg { width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
.prod-arr-prev { margin-left:16px; }
.prod-arr-next { margin-right:16px; }
.prod-dots { display:flex; justify-content:center; gap:8px; padding:24px 0 0; }
.prod-dot {
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.25); border:none;
  cursor:pointer; transition:all .3s;
}
.prod-dot.on { background:var(--green); transform:scale(1.3); }

/* ════════════════════════════════════════
   PROMO CAROUSEL
════════════════════════════════════════ */
.promo-carousel { position:relative; overflow:hidden; background:var(--dark); }
.promo-track {
  display:flex; align-items:stretch;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
}
/* Все слайды одной высоты, вписанной в один экран */
.promo-slide {
  flex-shrink:0; width:100vw;
  height:min(64vw, 86vh);
  display:flex; align-items:center; justify-content:center;
}
.promo-slide img {
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block;
}

.promo-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  background:var(--green);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px var(--green-glow);
  transition:all var(--transition); z-index:10;
}
.promo-arrow:hover { background:var(--purple); transform:translateY(-50%) scale(1.1); }
.promo-arrow svg { width:22px; height:22px; stroke:#fff; fill:none; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
.promo-arrow-prev { left:20px; }
.promo-arrow-next { right:20px; }

.promo-dots {
  display:flex; justify-content:center; gap:10px;
  padding:18px 0; background:var(--dark);
}
.promo-dot {
  width:12px; height:12px; border-radius:50%;
  background:rgba(255,255,255,.25); cursor:pointer;
  transition:all .3s; border:none;
}
.promo-dot.on { background:var(--green); transform:scale(1.3); }

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.site-footer {
  background:#0a0015;
  border-top:1px solid rgba(255,255,255,.06);
  padding:var(--sec-pad) 60px 30px;
}
.footer-inner {
  max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr;
  align-items:start;            /* колонки выровнены по верху сетки */
  gap:40px; margin-bottom:40px;
}

/* Бренд — лого ровно в левом верхнем углу, по линии сетки */
.footer-brand { text-align:left; }
.footer-logo-link { display:inline-block; margin:0 0 18px; transition:transform .2s ease, filter .2s ease; }
.footer-logo-link:hover { transform:translateY(-2px); filter:brightness(1.12); }
.footer-logo-img { width:100%; max-width:248px; height:auto; display:block; }
.footer-desc { font-size:13px; color:#9a9aa5; line-height:1.6; margin-bottom:20px; max-width:300px; }

/* Круглые иконки соцсетей + Farpost */
.footer-socials { display:flex; gap:12px; flex-wrap:wrap; }
.footer-social {
  width:44px; height:44px; border-radius:50%;   /* тач-зона ≥44px */
  color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.footer-social svg { width:22px; height:22px; }
.footer-social.soc-phone { background:#7B1FA2; }
.footer-social.soc-wa { background:#25D366; }
.footer-social.soc-tg { background:#229ED9; }
.footer-social.soc-fp { background:#FF6600; font-weight:900; font-size:20px; font-family:'Montserrat','Inter',sans-serif; }
.footer-social.soc-av { background:#0AA5FF; font-weight:900; font-size:20px; font-family:'Montserrat','Inter',sans-serif; }

.footer-col-title {
  font-size:14px; font-weight:800; color:#fff;
  text-transform:uppercase; letter-spacing:1px;
  margin-bottom:20px;
}
.footer-links { display:flex; flex-direction:column; gap:14px; }
.footer-links a {
  font-size:13px; color:#9a9aa5;
  transition:color var(--transition);
}
.footer-links a:hover { color:var(--green); }

.footer-contact-item {
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; color:#9a9aa5; margin-bottom:14px;
}
.footer-contact-item a { color:#9a9aa5; transition:color var(--transition); }
.footer-contact-item a:hover { color:var(--green); }
.footer-contact-icon {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:rgba(0,200,83,.12); color:var(--green);
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
}

/* Квадратное окно карты — вписано в ячейку сетки */
.footer-map {
  display:block; position:relative;
  width:100%; aspect-ratio:1 / 1;
  border-radius:var(--radius-md); overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.footer-map iframe {
  position:absolute; inset:0;
  width:100%; height:100%; border:0; display:block;
  pointer-events:none;          /* клик открывает Яндекс.Карты по ссылке */
  filter:grayscale(80%) invert(90%) hue-rotate(180deg);
}

.footer-bottom {
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:24px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
}
.footer-copy { font-size:12px; color:#888; }
.footer-policy { font-size:12px; color:#888; transition:color var(--transition); }
.footer-policy:hover { color:var(--green); }

/* ════════════════════════════════════════
   FADE-IN анимация при скролле
════════════════════════════════════════ */
/* Лёгкая анимация появления: анимируем ТОЛЬКО transform (не opacity).
   Контент всегда видим (opacity:1) — даже если анимация собьётся,
   элемент в худшем случае просто слегка смещён, но не скрыт. */
@keyframes slideUp {
  from { transform: translateY(22px); }
  to   { transform: none; }
}
.fade-up {
  opacity:1;
  animation: slideUp .6s ease backwards;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .fade-up { animation:none; }
}

/* ════════════════════════════════════════
   АДАПТИВНОСТЬ
════════════════════════════════════════ */
@media(max-width:1100px) {
  .categories-grid { grid-template-columns:repeat(2,1fr); }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .footer-map { max-width:300px; }
}

@media(max-width:900px) {
  .navbar { padding:0 14px; }
  .nav-links { display:none; }
  .burger { display:flex; }
  .nav-logo-img { height:36px; }
  /* Компактные значки в закрепе: телефон + WhatsApp + Telegram */
  .nav-contacts { gap:7px; }
  .nav-socials { display:flex; gap:7px; }
  .nav-soc { width:37px; height:37px; }
  .nav-soc svg { width:19px; height:19px; }
  /* Телефон → кружок-иконка (без номера) */
  .nav-phone {
    font-size:0; gap:0; width:37px; height:37px; border-radius:50%;
    background:#7B1FA2; color:#fff; justify-content:center; flex-shrink:0;
  }
  .nav-phone svg { stroke:#fff; width:18px; height:18px; }
  .prod-card { flex:0 0 50%; min-width:50%; }
  .footer-inner { grid-template-columns:1fr; gap:32px; }
  .site-footer { padding:40px 24px 20px; }
}

/* ── Мобильный hero: арт-баннер сверху + контент под ним ── */
@media(max-width:760px) {
  .hero { padding-top:56px; }
  .hero-stage {
    aspect-ratio:auto; min-height:0;
    display:flex; flex-direction:column; align-items:center;
    background:linear-gradient(150deg,#faf8ff 0%,#efe9fb 60%,#eaf5f1 100%);
    padding:0 0 28px;
  }
  /* Вся композиция (ноутбук+джин+гаджеты) баннером сверху */
  .hero-art {
    position:relative; inset:auto;
    width:100%; aspect-ratio:1536/1024;
    order:-1;
  }
  .hero-content {
    position:static; width:100%; padding:14px 18px 0;
    align-items:center; text-align:center; gap:14px;
  }
  .hero-headline { max-width:340px; }
  .hero-sub { text-align:center; font-size:13px; }
  .hero-features-rendered { display:none; }
  .hero-features {
    display:grid;
    grid-template-columns:repeat(3,1fr); gap:8px;
    max-width:440px; width:100%;
  }
  .feat-card { padding:12px 8px; align-items:center; text-align:center; gap:5px; }
  .feat-ico { width:34px; }
  .feat-card h4 { font-size:11px; }
  .feat-card p  { font-size:9px; }
  .hero-cta { justify-content:center; gap:10px; }
  .btn-primary, .btn-secondary { font-size:14px; padding:13px 22px; }
  .hero-stats { max-width:460px; margin:4px auto 0; }
}

@media(max-width:600px) {
  .navbar { height:56px; padding:0 8px; }
  .mobile-menu { top:56px; }
  /* Уплотняем значки в закрепе на узких телефонах */
  .nav-logo-img { height:28px; }
  .nav-contacts { gap:4px; }
  .nav-socials { gap:4px; }
  .nav-soc, .nav-phone { width:32px; height:32px; }
  .nav-soc svg { width:17px; height:17px; }
  .nav-phone svg { width:15px; height:15px; }
  .burger { width:36px; margin-left:0; }
  .categories-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .categories-section { padding:40px 16px; }
  .prod-card { flex:0 0 100%; min-width:100%; }
  .promo-arrow { width:36px; height:36px; }
  .promo-arrow svg { width:16px; height:16px; }
  .footer-bottom { flex-direction:column; text-align:center; }
}

@media(max-width:480px) {
  /* Компактные отступы секций на маленьких экранах */
  .categories-section { padding:32px 16px; }
  .products-section   { padding:48px 0 40px; }
  .site-footer        { padding:32px 16px 16px; }
  .hero-cta { width:100%; flex-direction:column; align-items:center; }
  .btn-primary, .btn-secondary { width:min(100%,320px); justify-content:center; }
}

@media(max-width:400px) {
  .navbar { padding:0 6px; }
  .nav-logo-img { height:27px; }
  .nav-contacts,.nav-socials { gap:3px; }
  .nav-soc,.nav-phone { width:30px; height:30px; }
  .burger { width:32px; }
  .burger span { width:21px; }
  .categories-grid { grid-template-columns:1fr 1fr; }
  .cat-name { font-size:13px; }
  .cat-btn { font-size:12px; padding:8px 14px; }
  .feat-card h4 { font-size:10px; }
  .feat-card p  { font-size:8px; }
}