/* ====================== */
/* hero (только index.html) */
/* ====================== */

.hero {

  position: relative;
  overflow-x: clip;   /* декоративная аура/спутники не дают горизонт. скролл */
  overflow-y: visible; /* свечение сингулярности может выходить вниз */

  min-height: max(680px, 82vh);
  min-height: max(680px, 82dvh);

  display: grid;
  grid-template-columns: 1.1fr .9fr;

  align-items: center;

  /* единый рейл: hero кэпится по 1280 и центрируется заодно с каталогом/PDP */
  max-width: var(--container-page);
  margin-inline: auto;
  padding: 100px var(--page-x) 0;

  gap: var(--sp-7);

}

.hero>div:not(.hero-sparks) {
  min-width: 0;
  position: relative;
  z-index: 1;
  /* контент над энергопылью */
}

/* ── глубокий космос: canvas-звёздное поле (за всем контентом героя) ──
   absolute выводит canvas из грид-потока; рисует JS (heroSpace в main.js) */
.hero .hero-space {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 1380px) {
  .hero .hero-space {
    display: none;
    /* сцена «живой космос» — фишка широких экранов (как и орбита) */
  }
}

/* ── энергопыль: дрейфующие частицы, заполняют «воздух» героя ── */
/* высокая специфичность, чтобы НЕ стать грид-элементом (перебить .hero > div) */
.hero .hero-sparks {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* под контентом */
  pointer-events: none;
  overflow: hidden;
}

.spark {
  position: absolute;
  border-radius: 50%;
  background: var(--sc, var(--cyan));
  box-shadow: 0 0 var(--sg, 8px) var(--sc, var(--cyan));
  opacity: var(--o1, .25);
  will-change: transform, opacity;
  animation: spark-drift var(--sd, 14s) ease-in-out infinite alternate;
  animation-delay: var(--sdl, 0s);
}

@keyframes spark-drift {
  from {
    transform: translate(0, 0) scale(.9);
    opacity: var(--o1, .2);
  }

  to {
    transform: translate(var(--dx, 12px), var(--dy, -16px)) scale(1.1);
    opacity: var(--o2, .6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spark {
    animation: none;
  }
}

.hero h1 {

  font-family: var(--font-display), sans-serif;

  font-size: clamp(60px, 7vw, 105px);

  line-height: .9;

  letter-spacing: -.05em;
  /* единый дисплейный трекинг (как у section-title) */

  font-weight: 800;

  margin-bottom: 30px;

  white-space: nowrap;

  /* «ИНТЕРНЕТ»/«МАГАЗИН» — атомарные строки через <br> в разметке, у слова
     нет пробела для переноса. clamp() рассчитан впритык под узкие экраны
     (особенно ~375px, эталон PREMIUM_STANDARD) — это подстраховка на крайний
     случай (иная локаль/шрифт-фоллбэк): перенос внутри слова вместо
     горизонтального скролла страницы. При обычном подборе шрифта не влияет. */
  overflow-wrap: break-word;

}

.hero h1 span {

  background: var(--grad-title);

  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  /* живой перелив: градиент шире текста и медленно гуляет туда-обратно
     (alternate — у --grad-title края не совпадают, зацикливание дало бы шов) */
  background-size: 200% 100%;
  animation: hero-sheen 9s ease-in-out infinite alternate;

}

@keyframes hero-sheen {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 span { animation: none; }
}

.sub {

  max-width: 620px;

  font-size: 19px;
  line-height: 1.9;

  color: var(--text-soft);

  margin-bottom: 48px;

}

.actions {

  display: flex;
  gap: 18px;

  flex-wrap: wrap;

}

/* ── интро текстовой колонки: заголовок → подзаголовок → CTA (усиленный стаггер) ── */
.hero h1.anim-in       { animation-delay: .1s; }
.hero .sub.anim-in     { animation-delay: .3s; }
.hero .actions.anim-in { animation-delay: .5s; }

/* ── пульс-глоу CTA героя: мягкое дыхание свечения за кнопкой (только главная) ── */
.hero .actions .primary {
  position: relative;
}

.hero .actions .primary::before {
  content: '';
  position: absolute;
  inset: -12px -16px;
  border-radius: var(--r-lg);
  background: radial-gradient(ellipse at 50% 50%,
      color-mix(in srgb, var(--cyan) 30%, transparent), transparent 72%);
  filter: blur(12px);
  z-index: -1;
  pointer-events: none;
  animation: cta-breathe 4s ease-in-out infinite;
}

@keyframes cta-breathe {
  0%, 100% { opacity: .38; transform: scale(.96); }
  50%       { opacity: .8;  transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .hero .actions .primary::before { animation: none; opacity: .4; }
}

/* ── адаптив hero/навбар (главная) ──
   Горизонтальные поля hero держим В ТОЧНОСТИ как у .help-inner/.catalog-wrap/
   .product-wrap (единый рейл 90 → 22 на ≤980 → 20 на ≤768 → 16 на ≤480) — иначе
   заголовок «ИНТЕРНЕТ МАГАЗИН» и «Поможем собрать» съезжают относительно друг
   друга по левому краю. Дальше в блоках ниже правим ТОЛЬКО padding-top/-bottom
   (longhand), никогда общий `padding: ...` шортхендом — он молча перезаписывает
   и left/right, из-за чего появился этот разъезд. */
@media(max-width:1380px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 140px;
    min-height: auto;
  }

  .hero-visual {
    display: none !important;
  }
}

@media(max-width:980px) {
  .hero {
    padding: 140px 22px 120px;
  }

  .hero h1 {
    /* единый плавный размер для всего мобильного диапазона (≤1100) */
    font-size: clamp(44px, 13vw, 90px);
    white-space: normal;
  }
}

@media(min-width: 601px) and (max-width: 1100px) {
  .hero {
    padding-top: 110px;
    padding-bottom: 36px;
    gap: 18px;
  }

  /* высоту блока подгоняем под орб + плашки, без лишнего воздуха */
  .hero-visual {
    min-height: 360px;
    margin-top: 6px;
  }
}

@media(max-width: 768px) {
  .hero-visual {
    display: none;
  }

  .hero {
    padding: 110px 20px 72px;
  }
}

@media(max-width: 480px) {
  .hero-visual {
    display: none;
  }

  .hero {
    padding: 88px 16px 56px;
  }

  .hero h1 {
    white-space: normal;
    font-size: clamp(44px, 13vw, 90px);
  }

  .sub {
    font-size: 16px;
    margin-bottom: 32px;
  }

  .actions {
    flex-direction: column;
    gap: 10px;
  }

  .primary,
  .secondary {
    width: 100%;
    height: 56px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media(max-width: 360px) {
  .hero h1 {
    font-size: clamp(40px, 13vw, 60px);
  }
}

/* ============================================================
   HERO STATS BLOCK — орбита категорий вокруг ядра
   ============================================================ */

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
  --hub-shift: 0px;
  /* ядро по центру: категории кольцом вокруг него */
}

/* ── мягкая аура-свечение за кластером (заполняет внешний воздух) ── */
.core-aura {
  position: absolute;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  pointer-events: none;
  transform: translateX(var(--hub-shift));
  background:
    radial-gradient(circle at 42% 40%, var(--cyan-a10), transparent 56%),
    radial-gradient(circle at 64% 66%, var(--magenta-a10), transparent 58%),
    radial-gradient(circle at 50% 50%, var(--violet-a06), transparent 70%);
  filter: blur(22px);
  z-index: 0;
  /* за сеткой/ядром */
  animation: aura-pulse 9s ease-in-out infinite;
}

@keyframes aura-pulse {

  0%,
  100% {
    opacity: .7;
    transform: translateX(var(--hub-shift)) scale(1);
  }

  50% {
    opacity: 1;
    transform: translateX(var(--hub-shift)) scale(1.05);
  }
}

/* ── аккреционный диск + следы планет: canvas по центру ядра (рисует JS) ──
   DOM-порядок сразу после .core-aura → поверх ауры; z-index:0 → под ядром (1)
   и планетами (6). Размер задаёт JS от радиуса орбиты (следы не режутся). */
.disk-canvas {
  position: absolute;
  transform: translateX(var(--hub-shift));
  pointer-events: none;
  z-index: 0;
}

/* ── звёзды на 3D-орбитах: эллипс (наклон) + z-index по фазе (перед/за ядром) ──
   Локальные z-index (0/5) — только внутри .hero-visual, не общесайтовые. */
.sat {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  /* декор — НЕ перехватывает мышь у ядра */
  --ss: 6px;
  /* размер звезды */
  --so: 1;
  /* яркость звезды */
  /* две анимации синхронно: вращение по эллипсу + переключение слоя перед/за ядром */
  animation: sat-spin var(--sd, 24s) linear infinite,
    sat-depth var(--sd, 24s) step-end infinite;
  animation-delay: var(--sdl, 0s);
}

.sat::before {
  content: '';
  position: absolute;
  top: calc(var(--ss) / -2);
  left: 50%;
  width: var(--ss);
  height: var(--ss);
  margin-left: calc(var(--ss) / -2);
  border-radius: 50%;
  background: var(--sc, var(--cyan));
  box-shadow: 0 0 10px var(--sc, var(--cyan)), 0 0 20px var(--sc, var(--cyan));
  opacity: var(--so, 1);
}

/* эллиптическая орбита (scaleY сжимает круг в наклонённое кольцо) */
@keyframes sat-spin {
  from {
    transform: scaleY(.5) rotate(0deg);
  }

  to {
    transform: scaleY(.5) rotate(360deg);
  }
}

/* нижняя (ближняя) половина орбиты — перед ядром (z над ядром, под категориями);
   верхняя (дальняя) — за ядром (z под ядром) */
@keyframes sat-depth {

  0%,
  24.9% {
    z-index: 0;
  }

  /* за ядром (ядро z-index:1) */
  25%,
  74.9% {
    z-index: 5;
  }

  /* перед ядром, но под категориями (z-index:6) */
  75%,
  100% {
    z-index: 0;
  }
}

/* три звезды-спутника на гармониках мастер-бита (вторичное движение, а не 7 шумов):
   ближние — крупнее/ярче, дальние — мельче/тусклее (глубина по радиусу) */
.sat--1 { width: 300px; height: 300px; --sc: var(--cyan); --sd: 18s; --ss: 6px; --so: 1; --sdl: -2s; }
.sat--2 { width: 448px; height: 448px; --sc: var(--magenta); --sd: 27s; --ss: 5px; --so: .82; --sdl: -11s; }
.sat--3 { width: 600px; height: 600px; --sc: var(--violet); --sd: 36s; --ss: 4px; --so: .62; --sdl: -6s; }

@media (prefers-reduced-motion: reduce) {
  .core-aura { animation: none; }
  .sat { animation: none; }
}

/* ── ядро-сингулярность: тёмный нуль-пойнт + кольцо аккреции (палитра Electric Night) ── */
.singularity {
  position: absolute;
  width: 320px;
  height: 320px;
  /* базовый transform — фолбэк до старта JS и путь reduce-motion; в движении JS пишет
     inline-transform покадрово (барицентрия + сглаженный крен), поэтому transition убран,
     иначе он смазывал бы покадровые обновления. Сглаживание живёт в JS (инерция). */
  transform: translateX(var(--hub-shift, 0px)) perspective(820px);
  z-index: 1;
  /* ядро под нитями/категориями (как было у лавы) */
}

.singularity>span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

/* мягкий bloom за диском */
.sg-glow {
  inset: -30px;
  background: radial-gradient(circle at 50% 50%,
      var(--cyan-a32), var(--cyan-a12) 42%, transparent 70%);
  filter: blur(20px);
  animation: sg-breathe 7s ease-in-out infinite;
  z-index: 0;
}

/* чёрный «нуль-пойнт» в центре */
.sg-void {
  background: radial-gradient(circle at 50% 50%,
      var(--black) 0, var(--black) 58px, var(--bg-a96) 74px, transparent 96px);
  z-index: 2;
}

/* фотонное кольцо (горизонт событий) */
.sg-rim {
  width: 168px;
  height: 168px;
  margin: auto;
  /* центр: inset:0 (от .singularity > span) + margin:auto + фикс. размер */
  border: 2px solid var(--ice-a90);
  box-shadow:
    0 0 22px var(--cyan),
    0 0 46px var(--cyan-a30),
    inset 0 0 18px var(--cyan-a45);
  z-index: 3;
}

/* живой горизонт событий: линзирующий шимер — яркая дуга бежит по ободу (--rim-rot от JS).
   Кольцо перестаёт быть статичным; чисто композитный rotate конического хайлайта. */
.sg-rim::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from var(--rim-rot, 0deg),
      transparent 0deg,
      var(--ice-a55) 30deg,
      transparent 108deg,
      transparent 360deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 84%, var(--black) 89%, var(--black) 96%, transparent 100%);
  mask: radial-gradient(circle at 50% 50%, transparent 84%, var(--black) 89%, var(--black) 96%, transparent 100%);
  mix-blend-mode: screen;
  opacity: .85;
  pointer-events: none;
}

/* отклик: пятно в гамме категории смещается к её краю (позицию/цвет ставит JS) */
.sg-pull {
  background: radial-gradient(circle at 50% 50%, var(--cyan-a60), transparent 58%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  will-change: transform, opacity;
  z-index: 4;
}

@keyframes sg-breathe {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%       { opacity: 1;  transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .sg-glow { animation: none; }
}

/* ── кинематографическое интро ядра: класс .intro вешает JS на ~1.9с при загрузке ──
   ударная волна расходится от горизонта событий, bloom вспыхивает, кольцо
   раскрывается с overshoot. Все анимации одноразовые (forwards/both). */
.sg-shock {
  width: 168px;
  height: 168px;
  margin: auto;
  border: 2px solid var(--ice-a85);
  box-shadow: 0 0 30px var(--cyan), inset 0 0 20px var(--cyan-a50);
  opacity: 0;
  z-index: 5;
}

.singularity.intro .sg-shock {
  animation: sg-shockwave .8s cubic-bezier(.16, .8, .3, 1) .1s both;
}

@keyframes sg-shockwave {
  from { transform: scale(.2);  opacity: 1; }
  to   { transform: scale(3.4); opacity: 0; }
}

.singularity.intro .sg-glow {
  /* вспышка рождения, затем обычное дыхание */
  animation: sg-ignite .9s cubic-bezier(.2, .7, .3, 1) both,
             sg-breathe 7s ease-in-out .9s infinite;
}

@keyframes sg-ignite {
  from { transform: scale(.55); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: scale(1);   opacity: .7; }
}

.singularity.intro .sg-rim {
  animation: sg-open .7s cubic-bezier(.34, 1.4, .5, 1) both;
}

@keyframes sg-open {
  from { transform: scale(.1); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  /* страховка: JS и так не вешает .intro при reduce-motion */
  .singularity.intro .sg-shock,
  .singularity.intro .sg-glow,
  .singularity.intro .sg-rim { animation: none; }
}

/* ── контейнер категорий (параллакс индивидуальный, у каждой ячейки) ── */
.orbit-chips {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(var(--hub-shift));
  z-index: 6;
  /* орбита на переднем плане, поверх ядра */
  opacity: 0;
  /* скрыто до первой JS-раскладки — снимает скачок первого кадра (CSS-статик → JS-эллипс),
     JS вешает .ready после render(0) → мягкий вход-фейд */
  transition: opacity .5s ease;
}

.orbit-chips.ready {
  opacity: 1;
}

/* ── ячейка-категория: позиция (--cx,--cy) кольцом + слой глубины (--depth/op + тир blur) ── */
.orbit-chip {
  position: absolute;
  top: 50%;
  left: 50%;
  --cx: 0px;
  --cy: 0px;
  --depth: 1;
  --op: 1;
  --accent: var(--cyan);
  width: 64px;
  height: 64px;
  text-decoration: none;
  pointer-events: auto;
  /* ячейка кликабельна (контейнер — нет) */
  cursor: pointer;
  outline: none;
  opacity: var(--op);
  /* расширенный невидимый хитбокс — не нужно целиться в иконку */
  padding: 18px;
  /* позиция на орбите (--cx/--cy задаёт JS покадрово) + слой глубины */
  transform: translate(-50%, -50%) translate(var(--cx), var(--cy)) scale(var(--depth));
  transition: opacity .35s ease, filter .35s ease;
}

/* глубина размытием — три тира вместо покадрового filter:blur (класс ставит JS при смене тира):
   передние резкие, средние мягкие, дальние размытые. Композитно дёшево, не пересчитывается каждый кадр */
.orbit-chip.d-front { filter: none; }
.orbit-chip.d-mid   { filter: blur(.7px); }
.orbit-chip.d-back  { filter: blur(1.5px); }

/* при наведении — любая ячейка уверенно выходит на передний план, в фокус, крупнее (плоско) */
.orbit-chip:hover,
.orbit-chip:focus-visible {
  opacity: 1 !important;
  filter: none !important;
  z-index: 20;
  /* локально, выше остальных ячеек орбиты (0-6) */
  transform: translate(-50%, -50%) translate(var(--cx), var(--cy)) scale(1.18);
}

/* остальные ячейки заметно уходят в тень, когда одна активна (контраст) — и по hover, и по фокусу */
.orbit-chips:hover .orbit-chip:not(:hover):not(:focus-visible),
.orbit-chips:focus-within .orbit-chip:not(:hover):not(:focus-visible) {
  opacity: calc(var(--op) * .28);
  filter: blur(1.4px);
}

/* внутренняя обёртка (структурная): wobble убран — «дыхание» планеты ломало покадровый
   depth-пересчёт (front-планета всплывала поперёк плоскости диска). Вторичное движение
   теперь только causal — в rAF-дирижёре. */
.orbit-cell {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
}

/* стеклянный диск-плазмоид с иконкой (НЕ квадрат) */
.orbit-chip-orb {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--accent);
  background: radial-gradient(circle at 50% 38%, var(--pure-white-a10), var(--pure-white-a01));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow: 0 10px 26px var(--black-a40), 0 0 16px color-mix(in srgb, var(--accent) 16%, transparent);
  /* backdrop-filter НЕ на базовом состоянии: на движущихся орбах это GPU-readback ×11 каждый
     кадр (главный источник jank). На тёмном фоне статичный radial-gradient почти неотличим;
     реальное «стекло» включаем только на переднем тире и при наведении/фокусе (см. ниже). */
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  transform-style: preserve-3d;
}

/* стекло ТОЛЬКО на активной планете (hover/фокус) — на движущихся орбах backdrop-filter не держим
   (перф + чтобы орб не «загорался сам» стеклом, выходя на фронт под ядро) */
.orbit-chip:hover .orbit-chip-orb,
.orbit-chip:focus-visible .orbit-chip-orb {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.orbit-chip-orb .ic {
  width: var(--icon-lg);
  height: var(--icon-lg);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 45%, transparent));
  transition: filter .25s ease;
}

.orbit-chip:hover .orbit-chip-orb,
.orbit-chip:focus-visible .orbit-chip-orb {
  border-color: var(--accent);
  box-shadow:
    0 12px 32px var(--black-a50),
    0 0 26px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 52px color-mix(in srgb, var(--accent) 28%, transparent);
}

.orbit-chip:hover .orbit-chip-orb .ic,
.orbit-chip:focus-visible .orbit-chip-orb .ic {
  filter: drop-shadow(0 0 10px var(--accent)) brightness(1.25);
}

/* нажатие: короткая вспышка диска */
.orbit-chip:active .orbit-chip-orb {
  box-shadow: 0 0 0 2px var(--accent), 0 0 26px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* подпись категории — скрыта, появляется при наведении/фокусе на чип
   (вращение на hover паузится в JS, поэтому подпись возникает статично, без прыжков) */
.orbit-chip-label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--text);
  opacity: 0;
  text-shadow: 0 1px 6px var(--black-a70);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease, color .25s ease;
}

.orbit-chip:hover .orbit-chip-label,
.orbit-chip:focus-visible .orbit-chip-label {
  color: var(--accent);
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* у верхних ячеек подпись разворачивается НАД диском (наружу), чтобы не лечь на сферу */
.orbit-chip.label-up .orbit-chip-label {
  top: auto;
  bottom: calc(100% + 8px);
}

/* ── 11 категорий вокруг ядра на РАЗНОМ радиусе + глубина по радиусу + цвета гаммы ── */
/* FRONT depth 1.06 / op 1   / blur 0    · MID depth .9 / op .82 / blur .6 · BACK depth .66 / op .5 / blur 1.7 */
.orbit-chip:nth-child(1)  { --cx: -20px;  --cy: -205px; --depth: 1.06; --op: 1;   --blur: 0;    --accent: var(--cyan);    --dur: 7.4s; }
.orbit-chip:nth-child(2)  { --cx: 120px;  --cy: -180px; --depth: .9;   --op: .82; --blur: .6px; --accent: var(--violet);  --dur: 8.2s; }
.orbit-chip:nth-child(3)  { --cx: 210px;  --cy: -110px; --depth: .66;  --op: .5;  --blur: 1.7px;--accent: var(--magenta); --dur: 6.6s; }
.orbit-chip:nth-child(4)  { --cx: 240px;  --cy: 10px;   --depth: .66;  --op: .5;  --blur: 1.7px;--accent: var(--azure);   --dur: 7.9s; }
.orbit-chip:nth-child(5)  { --cx: 200px;  --cy: 130px;  --depth: .9;   --op: .82; --blur: .6px; --accent: var(--blue);    --dur: 6.9s; }
.orbit-chip:nth-child(6)  { --cx: 120px;  --cy: 200px;  --depth: 1.06; --op: 1;   --blur: 0;    --accent: var(--pink);    --dur: 7.1s; }
.orbit-chip:nth-child(7)  { --cx: 0px;    --cy: 235px;  --depth: .66;  --op: .5;  --blur: 1.7px;--accent: var(--ice);     --dur: 8.4s; }
.orbit-chip:nth-child(8)  { --cx: -130px; --cy: 195px;  --depth: .9;   --op: .82; --blur: .6px; --accent: var(--magenta); --dur: 6.4s; }
.orbit-chip:nth-child(9)  { --cx: -215px; --cy: 110px;  --depth: .66;  --op: .5;  --blur: 1.7px;--accent: var(--violet);  --dur: 7.7s; }
.orbit-chip:nth-child(10) { --cx: -233px; --cy: -25px;  --depth: 1.06; --op: 1;   --blur: 0;    --accent: var(--cyan);    --dur: 6.8s; }
.orbit-chip:nth-child(11) { --cx: -150px; --cy: -160px; --depth: .9;   --op: .82; --blur: .6px; --accent: var(--azure);   --dur: 8.0s; }

/* ── flux-разделитель: пульсирующая линия + бегущий узел (декор орбиты) ── */
.flux-divider {
  position: relative;
  height: 2px;
  margin: 18px 0 0;
  --flux: 0;
  container-type: inline-size;
}

.flux-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent,
      var(--cyan-a25),
      var(--violet-a40),
      var(--magenta-a25),
      transparent);
  opacity: calc(.4 + var(--flux) * .55);
  /* прозрачность считается от --flux (её ставит JS), поэтому готовой ступени
     ладдера тут быть не может — цвет берём токеном через color-mix */
  box-shadow: 0 0 18px color-mix(in srgb, var(--cyan) calc((.12 + var(--flux) * .35) * 100%), transparent);
  animation: flux-pulse 4.5s ease-in-out infinite;
}

.flux-node {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  animation: flux-run 7s linear infinite;
}

@keyframes flux-pulse {
  0%, 100% { opacity: .45; }
  50%       { opacity: .9; }
}

@keyframes flux-run {
  0%  { transform: translate(-50%, -50%) translateX(0); opacity: 0; }
  5%  { opacity: 1; }
  95% { opacity: 1; }
  100% { transform: translate(-50%, -50%) translateX(100cqi); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .flux-line, .flux-node { animation: none; }
}

/* ============================================================
   FEATURED SECTION
   ============================================================ */

.featured-section {
  /* единый рейл: кэпится по 1280 и центрируется заодно с hero/каталогом —
     заголовок по левой линии рейла, карточки заполняют ширину ровно */
  max-width: var(--container-page);
  margin-inline: auto;
  padding: 0 var(--page-x) var(--section-gap);
}

/* центрирующий ряд под CTA секции («Весь каталог») */
.section-cta-row {
  text-align: center;
}

.see-all-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--h-btn);
  margin-top: var(--sp-6);
  padding: 0 var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--pure-white-a04);
  border: 1px solid var(--line);
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: transform .35s, background-color .35s, border-color .35s;
}

.see-all-btn:hover {
  transform: translateY(-3px);
  background: var(--pure-white-a07);
  border-color: var(--cyan-a25);
}

/* ── карточки «Популярные товары» И каталога: усиленное стекло + увеличение ──
   Эффект работает и здесь (.featured-section), и в 04-pages/catalog.css
   (.catalog-grid) — общий .pcard живёт в 02-components/cards.css, это лишь
   акцентные варианты подсветки для двух конкретных контекстов. */
:is(.featured-section, .catalog-grid) .pcard {
  background: linear-gradient(180deg, var(--glass-line), var(--pure-white-a02));
  border-color: var(--cyan-a10);
}

/* наведение: карточка увеличивается (без сдвига вверх) */
:is(.featured-section, .catalog-grid) .pcard-wrapper {
  transition: transform .4s cubic-bezier(.22, .68, 0, 1.1);
  transform-origin: center;
}

:is(.featured-section, .catalog-grid) .pcard-wrapper:hover {
  transform: scale(1.045);
  z-index: 5;
}

/* убираем подъём — увеличение делает обёртка (цвет подсветки — ниже, раздельно) */
:is(.featured-section, .catalog-grid) .pcard:hover {
  transform: none;
}

/* КАТАЛОГ: подсветка циан */
.catalog-grid .pcard:hover {
  border-color: var(--cyan-a40);
  box-shadow:
    0 30px 60px var(--black-a55),
    0 0 44px var(--cyan-a28),
    0 0 72px var(--cyan-a16);
}

/* ПОПУЛЯРНЫЕ: фирменная cyan → violet → magenta (идёт ПОСЛЕ — перебивает для карточек featured) */
.featured-section .pcard:hover {
  border-color: var(--cyan-a32);
  box-shadow:
    0 30px 60px var(--black-a55),
    0 0 44px var(--cyan-a20),
    0 0 66px var(--violet-a16),
    0 0 82px var(--magenta-a12);
}

/* неоновая обводка при наведении — геометрия общая, цвет раздельно ниже */
:is(.featured-section, .catalog-grid) .pcard-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  padding: 2px;
  -webkit-mask: linear-gradient(var(--black) 0 0) content-box, linear-gradient(var(--black) 0 0);
  mask: linear-gradient(var(--black) 0 0) content-box, linear-gradient(var(--black) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity .35s ease;
}

/* КАТАЛОГ: обводка циан (ровная по контуру) */
.catalog-grid .pcard-wrapper::after {
  background: linear-gradient(135deg, var(--ice), var(--cyan) 45%, var(--azure));
}

/* ПОПУЛЯРНЫЕ: conic мультиколор (после каталога — перебивает для featured) */
.featured-section .pcard-wrapper::after {
  background: conic-gradient(from 135deg,
      var(--cyan), var(--violet), var(--magenta), var(--violet), var(--cyan));
}

:is(.featured-section, .catalog-grid) .pcard-wrapper:hover::after {
  opacity: 1;
}

/* ============================================================
   HELP / SUPPORT SECTION (служба заботы на главной)
   ============================================================ */

@keyframes helpGridPulse {
  0%, 100% { opacity: .45; }
  50%       { opacity: .7; }
}

.help-section {
  position: relative;
  padding: var(--section-gap) 0;
  isolation: isolate;
}

/* wave canvas — fills section, sits behind content */
.help-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 1380px) {
  .help-bg-canvas { display: none; }
}

/* all text content sits above canvas */
.help-inner {
  position: relative;
  z-index: 1;
  /* единый рейл: контент кэпится по 1280 и центрируется (bg-canvas — на всю ширину) */
  max-width: var(--container-page);
  margin-inline: auto;
  padding: 0 var(--page-x);
}

.help-section .section-title {
  line-height: 1.1;            /* как у «Популярных товаров» — единый ритм заголовков */
  margin-bottom: var(--sp-3);
}

.help-sub {
  text-align: left;
  max-width: 620px;
  margin: 14px 0 0;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.6;
}

.help-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(var(--sp-3), 3vw, var(--sp-6));
  margin: 44px 0 0;
  perspective: 1200px;
}

/* ════════════ Карточки помощи: контракт компонента ════════════
   Назначение: три входа в сервисы подбора на главной.
   Варианты: --laptop / --builder / --upgrade меняют только локальный акцент.
   Состояния: default, hover, focus-visible, pressed, staged и reduced-motion.
   Breakpoints: 3 колонки с компактным режимом 681–1180px → 1 колонка до 680px.
   Фон секции, canvas и его сюжетный контроллер в этот контракт не входят. */

.help-card {
  --card-accent: var(--cyan);
  --card-accent-soft: var(--cyan-a10);
  --card-accent-line: var(--cyan-a25);
  --help-tilt-x: 0deg;
  --help-tilt-y: 0deg;
  --help-lift: 0px;
  --help-counter-tilt-x: 0deg;
  --help-counter-tilt-y: 0deg;
  --help-counter-lift: 0px;
  --help-depth-x: 0px;
  --help-depth-y: 0px;
  --help-visual-x: 0px;
  --help-visual-y: 0px;

  position: relative;
  display: block;
  min-width: 0;
  padding: var(--sp-1);
  border-radius: var(--r-card);
  background: var(--glass-2);
  color: var(--text-hi);
  text-decoration: none;
  isolation: isolate;
  overflow: hidden;
  transform: none;
  box-shadow:
    0 0 0 1px var(--glass-line),
    var(--shadow-sm);
}

.help-card::before,
.help-card::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.help-card::before {
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--card-accent) 20%, var(--card-accent) 80%, transparent);
  filter: drop-shadow(0 0 4px var(--card-accent));
  opacity: .85;
  transform:
    perspective(1100px)
    rotateX(var(--help-tilt-x))
    rotateY(var(--help-tilt-y))
    translate3d(0, var(--help-lift), 0);
  transform-origin: center;
}

.help-card::after {
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--card-accent-line);
  opacity: .16;
  transition-property: opacity;
  transition-duration: var(--dur-base);
  transition-timing-function: var(--ease-standard);
}

.help-card:hover::after,
.help-card:focus-visible::after {
  opacity: .68;
}

.help-card:active::after {
  opacity: .34;
}

.help-card:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: var(--sp-0);
}

.help-card__surface {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: var(--sp-3);
  border-radius: calc(var(--r-card) - var(--sp-1));
  background: color-mix(in srgb, var(--surface-1) 96%, transparent);
  box-shadow: inset 0 1px 0 var(--line);
  overflow: hidden;
}

.help-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.help-card__index {
  color: var(--card-accent);
  font-variant-numeric: tabular-nums;
}

.help-card__copy {
  min-height: 6.75rem;
  margin-top: 0;
}

.help-card__title {
  max-width: 100%;
  margin: 0;
  color: var(--text-hi);
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.2vw, 1.375rem);
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.help-card__text {
  max-width: 43ch;
  margin: var(--sp-2) 0 0;
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: .9375rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.help-card__instrument {
  position: relative;
  margin-top: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow:
    inset 0 0 0 1px var(--line),
    inset 0 1px 0 var(--card-accent-soft);
  overflow: hidden;
  transform: none;
}

.help-card__instrument::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  background: var(--card-accent-soft);
  opacity: 0;
  pointer-events: none;
}

.help-card__visual {
  position: relative;
  height: clamp(9.75rem, 11vw, 11.875rem);
  overflow: hidden;
}

.help-card-doodle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--card-accent);
  opacity: .56;
  pointer-events: none;
  transform: none;
  transition-property: opacity;
  transition-duration: var(--dur-base);
  transition-timing-function: var(--ease-standard);
}

.help-card:hover .help-card-doodle,
.help-card:focus-visible .help-card-doodle,
.help-card.is-staged .help-card-doodle {
  opacity: .82;
}

.help-card__flow {
  display: grid;
  min-height: var(--h-row);
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr);
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: .65625rem;
  line-height: 1.35;
  letter-spacing: .015em;
}

.help-card__flow span:last-child {
  color: var(--text);
  text-align: right;
}

.help-card__flow svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--card-accent);
}

.help-card__action {
  position: relative;
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: var(--sp-0) var(--sp-0) var(--sp-0) var(--sp-2);
  overflow: hidden;
  border-radius: var(--r-lg);
  color: var(--text-hi);
  background: color-mix(in srgb, var(--surface-2) 94%, var(--card-accent-soft));
  box-shadow:
    inset 0 0 0 1px var(--line),
    inset 0 1px 0 var(--card-accent-soft);
  font-family: var(--font-display);
  font-size: clamp(.75rem, .8vw, .875rem);
  font-weight: 620;
  line-height: 1.2;
  letter-spacing: -.025em;
  transition-property: background-color, box-shadow;
  transition-duration: var(--dur-base);
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}

.help-card:hover .help-card__action,
.help-card:focus-visible .help-card__action {
  background: color-mix(in srgb, var(--surface-2) 86%, var(--card-accent-soft));
  box-shadow:
    inset 0 0 0 1px var(--card-accent-line),
    inset 0 1px 0 var(--card-accent-soft);
}

.help-card__action > span {
  position: relative;
  z-index: 1;
}

.help-card__action > span:first-child {
  padding-left: var(--sp-0);
  text-wrap: balance;
}

.help-card__action-icon {
  position: relative;
  display: grid;
  width: var(--tap-min);
  height: var(--tap-min);
  flex: 0 0 var(--tap-min);
  place-items: center;
  overflow: hidden;
  border-radius: var(--r-md);
  color: var(--card-accent);
  background: var(--card-accent-soft);
  box-shadow: inset 0 1px 0 var(--card-accent-line);
  transition-property: transform, background-color, box-shadow;
  transition-duration: var(--dur-fast);
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}

.help-card__action-arrow {
  width: var(--icon-sm);
  height: var(--icon-sm);
  transition-property: transform, opacity;
  transition-duration: var(--dur-base);
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}

.help-card__action-arrow--hover {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transform: translateX(-10px);
}

.help-card:hover .help-card__action-icon,
.help-card:focus-visible .help-card__action-icon {
  background: color-mix(in srgb, var(--surface-2) 76%, var(--card-accent-soft));
  box-shadow:
    inset 0 0 0 1px var(--card-accent-line),
    inset 0 1px 0 var(--card-accent-soft);
}

.help-card:hover .help-card__action-arrow--rest,
.help-card:focus-visible .help-card__action-arrow--rest {
  opacity: 0;
  transform: translateX(10px);
}

.help-card:hover .help-card__action-arrow--hover,
.help-card:focus-visible .help-card__action-arrow--hover {
  opacity: 1;
  transform: translateX(0);
}

.help-card:active .help-card__action-icon {
  transform: scale(.96);
}

.help-card--laptop {
  --card-accent: var(--cyan);
  --card-accent-soft: var(--cyan-a10);
  --card-accent-line: var(--cyan-a25);
}

.help-card--builder {
  --card-accent: var(--violet);
  --card-accent-soft: var(--violet-a10);
  --card-accent-line: var(--violet-a25);
}

.help-card--upgrade {
  --card-accent: var(--blue);
  --card-accent-soft: var(--blue-a10);
  --card-accent-line: var(--blue-a25);
}

/* ── NULLPOINT Instruments ───────────────────────────────────────────────
   Общий motion-язык трёх инструментов: точка Ø, калиброванные модули и
   однократное сведение данных к результату. Только transform + opacity. */
.help-card {
  --np-ease: cubic-bezier(.22, 1, .36, 1);
  --np-snap: cubic-bezier(.16, 1, .3, 1);
}

.np-frame {
  opacity: .2;
  transition: opacity 520ms var(--np-ease);
}

.np-meta,
.np-select-labels,
.np-select-result-copy,
.np-module text,
.np-build-status,
.np-delta-labels,
.np-delta-copy {
  font-family: var(--font-mono);
  font-size: 6.5px;
  font-weight: 600;
  letter-spacing: .14em;
}

.np-meta,
.np-select-labels,
.np-delta-labels {
  opacity: .64;
}

.np-select-guide,
.np-select-branch,
.np-build-bus,
.np-delta-grid {
  opacity: .18;
}

.np-select-guide,
.np-delta-result {
  transform-box: fill-box;
  transform-origin: left center;
}

/* 01 / SELECT — три критерия сходятся в одну рекомендацию. */
.help-card--laptop {
  --np-guide-scale: .16;
  --np-branch-opacity: .08;
  --np-a-x: 0px;
  --np-a-y: 0px;
  --np-b-x: 0px;
  --np-b-y: 0px;
  --np-c-x: 0px;
  --np-c-y: 0px;
  --np-side-node-opacity: .58;
  --np-origin-scale: .78;
  --np-origin-opacity: .28;
  --np-result-x: 8px;
  --np-result-opacity: .12;
  --np-result-copy-y: 0px;
  --np-result-copy-opacity: 0;
}

.np-select-guide {
  transform: scaleX(var(--np-guide-scale));
  transition: transform 680ms var(--np-ease);
}

.np-select-guide--b { transition-delay: 60ms; }
.np-select-guide--c { transition-delay: 120ms; }

.np-select-branch {
  opacity: var(--np-branch-opacity);
  transition: opacity 360ms var(--np-ease) 360ms;
}

.np-select-node {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 760ms var(--np-snap),
    opacity 360ms var(--np-ease);
}

.np-select-node--a {
  opacity: var(--np-side-node-opacity);
  transform: translate3d(var(--np-a-x), var(--np-a-y), 0);
}

.np-select-node--b {
  opacity: .92;
  transform: translate3d(var(--np-b-x), var(--np-b-y), 0);
  transition-delay: 70ms;
}

.np-select-node--c {
  opacity: var(--np-side-node-opacity);
  transform: translate3d(var(--np-c-x), var(--np-c-y), 0);
  transition-delay: 130ms;
}

.np-select-origin {
  opacity: var(--np-origin-opacity);
  transform: translate(142px, 65px) scale(var(--np-origin-scale));
  transition:
    transform 620ms var(--np-snap) 420ms,
    opacity 420ms var(--np-ease) 420ms;
}

.np-select-result {
  opacity: var(--np-result-opacity);
  transform: translate3d(var(--np-result-x), 0, 0);
  transition:
    transform 620ms var(--np-snap) 520ms,
    opacity 420ms var(--np-ease) 520ms;
}

.np-select-result-copy {
  opacity: var(--np-result-copy-opacity);
  transform: translate3d(0, var(--np-result-copy-y), 0);
  transition:
    transform 480ms var(--np-snap) 680ms,
    opacity 360ms var(--np-ease) 680ms;
}

.help-card--laptop:focus-visible,
.help-card--laptop.is-staged {
  --np-guide-scale: 1;
  --np-branch-opacity: .62;
  --np-a-x: 99px;
  --np-a-y: 23px;
  --np-b-x: 90px;
  --np-b-y: 0px;
  --np-c-x: 106px;
  --np-c-y: -23px;
  --np-side-node-opacity: .12;
  --np-origin-scale: 1;
  --np-origin-opacity: .92;
  --np-result-x: 0px;
  --np-result-opacity: .9;
  --np-result-copy-y: 0px;
  --np-result-copy-opacity: .84;
}

/* 02 / CORE — четыре модуля физически стыкуются с общей шиной. */
.help-card--builder {
  --np-cpu-y: 0px;
  --np-gpu-y: 0px;
  --np-ram-x: 0px;
  --np-psu-x: 0px;
  --np-module-opacity: .5;
  --np-core-scale: .95;
  --np-core-opacity: .42;
  --np-bus-opacity: .06;
  --np-status-y: 0px;
  --np-status-opacity: 0;
}

.np-build-core {
  opacity: var(--np-core-opacity);
  transform: scale(var(--np-core-scale));
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 720ms var(--np-snap) 40ms,
    opacity 420ms var(--np-ease) 40ms;
}

.np-build-bus {
  opacity: var(--np-bus-opacity);
  transition: opacity 420ms var(--np-ease) 260ms;
}

.np-module {
  opacity: var(--np-module-opacity);
  transition: opacity 420ms var(--np-ease);
}

.np-module text {
  stroke: none;
  letter-spacing: .12em;
}

.np-module--cpu { transform: translate3d(0, var(--np-cpu-y), 0); }

.np-module--gpu {
  transform: translate3d(0, var(--np-gpu-y), 0);
  transition-delay: 80ms;
}

.np-module--ram {
  transform: translate3d(var(--np-ram-x), 0, 0);
  transition-delay: 140ms;
}

.np-module--psu {
  transform: translate3d(var(--np-psu-x), 0, 0);
  transition-delay: 200ms;
}

.np-build-status {
  opacity: var(--np-status-opacity);
  transform: translate3d(0, var(--np-status-y), 0);
  transition:
    transform 480ms var(--np-snap) 480ms,
    opacity 360ms var(--np-ease) 480ms;
}

.help-card--builder:focus-visible,
.help-card--builder.is-staged {
  --np-cpu-y: 0px;
  --np-gpu-y: 0px;
  --np-ram-x: 0px;
  --np-psu-x: 0px;
  --np-module-opacity: .94;
  --np-core-scale: 1;
  --np-core-opacity: .78;
  --np-bus-opacity: .68;
  --np-status-y: 0px;
  --np-status-opacity: .88;
}

/* 03 / DELTA — дисбаланс превращается в ровный профиль после замены. */
.help-card--upgrade {
  --np-cpu-scale: .74;
  --np-gpu-scale: .34;
  --np-ram-scale: .8;
  --np-ssd-scale: .64;
  --np-current-opacity: .72;
  --np-vector-y: 6px;
  --np-vector-opacity: 0;
  --np-result-scale: .16;
  --np-result-opacity: 0;
  --np-limit-y: 0px;
  --np-limit-opacity: .72;
  --np-balanced-y: 0px;
  --np-balanced-opacity: 0;
}

.np-delta-grid {
  opacity: .16;
  transition: opacity 420ms var(--np-ease);
}

.np-delta-bar {
  opacity: .42;
  transform-box: fill-box;
  transform-origin: center bottom;
  transition:
    transform 780ms var(--np-snap),
    opacity 420ms var(--np-ease);
}

.np-delta-bar--cpu { transform: scaleY(var(--np-cpu-scale)); }

.np-delta-bar--gpu {
  transform: scaleY(var(--np-gpu-scale));
  transition-delay: 100ms;
}

.np-delta-bar--ram {
  transform: scaleY(var(--np-ram-scale));
  transition-delay: 160ms;
}

.np-delta-bar--ssd {
  transform: scaleY(var(--np-ssd-scale));
  transition-delay: 220ms;
}

.np-delta-current {
  opacity: var(--np-current-opacity);
  transition: opacity 360ms var(--np-ease) 260ms;
}

.np-delta-vector {
  opacity: var(--np-vector-opacity);
  transform: translate3d(0, var(--np-vector-y), 0);
  transition:
    transform 540ms var(--np-snap) 360ms,
    opacity 360ms var(--np-ease) 360ms;
}

.np-delta-result {
  opacity: var(--np-result-opacity);
  transform: scaleX(var(--np-result-scale));
  transition:
    transform 680ms var(--np-snap) 520ms,
    opacity 380ms var(--np-ease) 520ms;
}

.np-delta-limit,
.np-delta-balanced {
  transition:
    transform 420ms var(--np-snap),
    opacity 320ms var(--np-ease);
}

.np-delta-limit {
  opacity: var(--np-limit-opacity);
  transform: translate3d(0, var(--np-limit-y), 0);
}

.np-delta-balanced {
  opacity: var(--np-balanced-opacity);
  transform: translate3d(0, var(--np-balanced-y), 0);
  transition-delay: 660ms;
}

.help-card--upgrade:focus-visible,
.help-card--upgrade.is-staged {
  --np-cpu-scale: .78;
  --np-gpu-scale: .78;
  --np-ram-scale: .78;
  --np-ssd-scale: .78;
  --np-current-opacity: .08;
  --np-vector-y: 0px;
  --np-vector-opacity: .86;
  --np-result-scale: 1;
  --np-result-opacity: .86;
  --np-limit-y: 0px;
  --np-limit-opacity: 0;
  --np-balanced-y: 0px;
  --np-balanced-opacity: .86;
}

@media (hover: hover) and (pointer: fine) {
  .help-card--laptop:hover {
    --np-guide-scale: 1;
    --np-branch-opacity: .62;
    --np-a-x: 99px;
    --np-a-y: 23px;
    --np-b-x: 90px;
    --np-b-y: 0px;
    --np-c-x: 106px;
    --np-c-y: -23px;
    --np-side-node-opacity: .12;
    --np-origin-scale: 1;
    --np-origin-opacity: .92;
    --np-result-x: 0px;
    --np-result-opacity: .9;
    --np-result-copy-y: 0px;
    --np-result-copy-opacity: .84;
  }

  .help-card--builder:hover {
    --np-cpu-y: 0px;
    --np-gpu-y: 0px;
    --np-ram-x: 0px;
    --np-psu-x: 0px;
    --np-module-opacity: .94;
    --np-core-scale: 1;
    --np-core-opacity: .78;
    --np-bus-opacity: .68;
    --np-status-y: 0px;
    --np-status-opacity: .88;
  }

  .help-card--upgrade:hover {
    --np-cpu-scale: .78;
    --np-gpu-scale: .78;
    --np-ram-scale: .78;
    --np-ssd-scale: .78;
    --np-current-opacity: .08;
    --np-vector-y: 0px;
    --np-vector-opacity: .86;
    --np-result-scale: 1;
    --np-result-opacity: .86;
    --np-limit-y: 0px;
    --np-limit-opacity: 0;
    --np-balanced-y: 0px;
    --np-balanced-opacity: .86;
  }

  .help-card:hover .np-frame { opacity: .38; }
}

.help-card:focus-visible .np-frame,
.help-card.is-staged .np-frame {
  opacity: .38;
}

@media (prefers-reduced-motion: reduce) {
  .np-frame,
  .np-select-guide,
  .np-select-branch,
  .np-select-node,
  .np-select-origin,
  .np-select-result,
  .np-select-result-copy,
  .np-build-core,
  .np-build-bus,
  .np-module,
  .np-build-status,
  .np-delta-grid,
  .np-delta-bar,
  .np-delta-current,
  .np-delta-vector,
  .np-delta-result,
  .np-delta-limit,
  .np-delta-balanced {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .help-card {
    transform: none !important;
  }

  .help-card::after,
  .help-card-doodle,
  .help-card__action-arrow,
  .hcard-build .build-slot,
  .hcard-radar .radar-sweep-locked,
  .hcard-radar .radar-lock,
  .hcard-scan .scan-idle,
  .hcard-scan .scan-locked {
    transition: none;
  }

  .help-card-doodle,
  .help-card__action-icon,
  .help-card__action-arrow {
    transform: none !important;
  }

  .help-card.is-live .hcard-radar .radar-ring-pulse,
  .help-card.is-live .hcard-radar .radar-sweep-idle,
  .help-card.is-live .hcard-radar .radar-blip,
  .help-card.is-live .hcard-build .build-float,
  .help-card.is-live .hcard-build .build-link,
  .help-card.is-live .hcard-build .build-fan,
  .help-card.is-live .hcard-scan .scan-bar,
  .help-card.is-live .hcard-scan .scan-check,
  .help-section[data-act="build"] .help-card--builder .help-card__instrument::after,
  .help-section[data-act="finale"] .help-card:not(:hover)::after,
  .help-card .hcard-radar .radar-lock-line,
  .help-card .hcard-radar .radar-lock-halo,
  .help-card .hcard-radar .radar-target-tick,
  .help-card .hcard-build .build-link,
  .help-card .hcard-build .build-node,
  .help-card .hcard-build .build-ready,
  .help-card .hcard-build .build-board-frame,
  .help-card .hcard-scan .scan-idle,
  .help-card .hcard-scan .scan-locked,
  .help-card .hcard-scan .scan-result-check,
  .help-card .hcard-scan .scan-result,
  .help-card .hcard-scan .scan-upgrade-path {
    animation: none !important;
  }

  .help-card:hover .hcard-radar .radar-lock-line,
  .help-card:focus-visible .hcard-radar .radar-lock-line,
  .help-card.is-staged .hcard-radar .radar-lock-line,
  .help-card:hover .hcard-radar .radar-target-tick,
  .help-card:focus-visible .hcard-radar .radar-target-tick,
  .help-card.is-staged .hcard-radar .radar-target-tick,
  .help-card:hover .hcard-scan .scan-result-check,
  .help-card:focus-visible .hcard-scan .scan-result-check,
  .help-card.is-staged .hcard-scan .scan-result-check,
  .help-card:hover .hcard-scan .scan-upgrade-path,
  .help-card:focus-visible .hcard-scan .scan-upgrade-path,
  .help-card.is-staged .hcard-scan .scan-upgrade-path {
    stroke-dashoffset: 0;
  }

  .help-card:hover .hcard-radar .radar-target-tick,
  .help-card:focus-visible .hcard-radar .radar-target-tick,
  .help-card.is-staged .hcard-radar .radar-target-tick,
  .help-card:hover .hcard-build .build-ready,
  .help-card:focus-visible .hcard-build .build-ready,
  .help-card.is-staged .hcard-build .build-ready,
  .help-card:hover .hcard-scan .scan-result,
  .help-card:focus-visible .hcard-scan .scan-result,
  .help-card.is-staged .hcard-scan .scan-result {
    opacity: .9;
    transform: none;
  }
}

@media (hover: none) {
  .help-card {
    transform: none !important;
  }

  .help-card:hover::after {
    opacity: .16;
  }

  .help-card:hover .help-card-doodle {
    opacity: .56;
  }

  .help-card:hover .help-card__action-arrow--rest {
    opacity: 1;
    transform: translateX(0);
  }

  .help-card:hover .help-card__action-arrow--hover {
    opacity: 0;
    transform: translateX(-10px);
  }

  .help-card:hover .hcard-radar .radar-sweep-idle,
  .help-card:hover .hcard-scan .scan-idle {
    opacity: 1;
  }

  .help-card:hover .hcard-radar .radar-sweep-locked,
  .help-card:hover .hcard-radar .radar-lock,
  .help-card:hover .hcard-scan .scan-locked {
    opacity: 0;
  }

  .help-card:hover .hcard-radar .radar-lock {
    transform: scale(.7);
  }

  .help-card:hover .hcard-radar .radar-lock-line,
  .help-card:hover .hcard-radar .radar-lock-halo,
  .help-card:hover .hcard-radar .radar-target-tick,
  .help-card:hover .hcard-build .build-link,
  .help-card:hover .hcard-build .build-node,
  .help-card:hover .hcard-build .build-ready,
  .help-card:hover .hcard-build .build-board-frame,
  .help-card:hover .hcard-scan .scan-idle,
  .help-card:hover .hcard-scan .scan-locked,
  .help-card:hover .hcard-scan .scan-result-check,
  .help-card:hover .hcard-scan .scan-result,
  .help-card:hover .hcard-scan .scan-upgrade-path {
    animation: none !important;
  }

  .help-card:hover .hcard-build .build-slot--cpu { transform: translate(0, -24px); }
  .help-card:hover .hcard-build .build-slot--ram1 { transform: translate(-24px, 3px); }
  .help-card:hover .hcard-build .build-slot--ram2 { transform: translate(24px, 3px); }
  .help-card:hover .hcard-build .build-slot--gpu { transform: translate(0, 18px); }
}

/* ── Help section — responsive ── */
@media (min-width: 681px) and (max-width: 1180px) {
  .help-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr) minmax(0, 1fr);
    gap: clamp(var(--sp-1), 1.4vw, var(--sp-3));
  }

  .help-card--upgrade {
    width: auto;
    grid-column: auto;
    justify-self: stretch;
  }

  .help-card {
    padding: 3px;
  }

  .help-card__surface {
    padding: clamp(10px, 1.5vw, var(--sp-3));
  }

  .help-card__copy {
    min-height: clamp(6.25rem, 12vw, 7rem);
  }

  .help-card__title {
    font-size: clamp(.8125rem, 1.55vw, 1.125rem);
  }

  .help-card__text {
    margin-top: clamp(6px, .8vw, var(--sp-2));
    font-size: clamp(.6875rem, 1.2vw, .875rem);
    line-height: 1.45;
  }

  .help-card__instrument {
    margin-top: clamp(8px, 1.2vw, var(--sp-3));
  }

  .help-card__visual {
    height: clamp(7.25rem, 16vw, 11rem);
  }

  .help-card__flow {
    min-height: 40px;
    gap: 4px;
    padding: 0 clamp(7px, 1vw, var(--sp-2));
    font-size: clamp(.5rem, .82vw, .625rem);
  }

  .help-card__action {
    min-height: 44px;
    margin-top: clamp(8px, 1.2vw, var(--sp-3));
    padding: 2px 2px 2px clamp(10px, 1.2vw, 16px);
    font-size: clamp(.625rem, 1.05vw, .8125rem);
  }

  .help-card__action-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
}

@media(max-width: 980px) {
  .help-section { padding: var(--section-gap) 0; }
  .help-inner { padding: 0 22px; }
  .help-sub { font-size: 14px; }
}

@media(max-width: 768px) {
  .help-inner { padding: 0 20px; }
}

@media (max-width: 680px) {
  .help-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
  }

  .help-card--upgrade {
    width: 100%;
    grid-column: auto;
  }

  .help-card__surface {
    padding: clamp(var(--sp-2), 5vw, var(--sp-3));
  }

  .help-card__copy {
    min-height: 0;
  }

  .help-card__visual {
    height: clamp(9rem, 44vw, 11.5rem);
  }
}

@media(max-width: 480px) {
  .help-section { padding: 40px 0; }
  .help-inner { padding: 0 16px; }
  .help-sub { margin-top: 10px; }

  .help-card__flow {
    font-size: .625rem;
  }
}

/* ============================================================
   BENEFITS SECTION
   ============================================================ */

.benefits-section {
  /* единый рейл: боковые поля = --page-x (как у секций); на узких экранах
     поля и число колонок переопределяются медиа-запросами ниже */
  margin: 0 var(--page-x) var(--section-gap);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--pure-white-a04), var(--pure-white-a02));
  border: 1px solid var(--pure-white-a07);
  backdrop-filter: blur(20px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}

.benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-1);
}

.benefit-icon {
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan);
}

/* крупная акцентная иконка ряда «Преимущества» — material large */
.benefit-icon .ic {
  width: var(--icon-xl);
  height: var(--icon-xl);
}

.benefit-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.01em;
}

.benefit-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
}

/* «Популярные товары»: фиксируем число колонок, чтобы 12 карточек всегда
   давали полные ряды (12 делится на 2/3/4) — без «хвоста». Специфичность
   (.featured-section .catalog-grid) перебивает общий auto-fill .catalog-grid
   на всех ширинах, включая 2K/4K. */
.featured-section .catalog-grid {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 620px) {
  .featured-section .catalog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1100px) {
  .featured-section .catalog-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* На узких телефонах (тот же порог, что у .help-grid выше) фиксированные
   2 колонки сплющивают карточку до ~150-170px — переиспользуемый .pcard
   на этом рассчитан не был. Ниже 560px отдаём карточке всю ширину контента. */
@media (max-width: 560px) {
  .featured-section .catalog-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   RESPONSIVE - секции главной
   ============================================================ */

@media(max-width:980px) {
  .featured-section {
    padding: 60px 22px;
    padding-top: 0;
  }

  .benefits-section {
    margin: 0 22px 60px;
    grid-template-columns: 1fr 1fr;
    padding: 28px 24px;
    gap: 20px;
  }
}

@media(max-width: 768px) {
  .featured-section {
    padding: 48px 20px;
    padding-top: 0;
  }

  .benefits-section {
    margin: 0 20px 48px;
  }
}

@media(max-width: 480px) {
  .featured-section {
    padding: 0 16px 40px;
  }

  .benefits-section {
    margin: 0 16px 40px;
    padding: 24px 18px;
    gap: 16px;
  }
}

/* ============================================================
   LARGE SCREENS — масштабирование вверх (FHD → 2K → 4K/8K)
   ============================================================ */

@media (min-width: 1920px) {
  .featured-section,
  .help-inner {
    padding-left: 110px;
    padding-right: 110px;
  }

  .featured-section {
    padding-top: 0;
  }

  .benefits-section {
    margin-left: 110px;
    margin-right: 110px;
  }

  /* hero: не растягивать на всю высоту монитора — убираем пустые полосы
     сверху/снизу; визуал сужаем, чтобы плашки держались у орба, а не уезжали
     в углы широкой колонки */
  .hero {
    min-height: 100vh;
    padding-left: 110px;
    padding-right: 110px;
  }

  .hero-visual {
    margin: 0 auto;
  }
}

@media (min-width: 2560px) {
  .featured-section {
    max-width: 2200px;
    padding-left: 140px;
    padding-right: 140px;
  }

  .benefits-section {
    margin-left: 140px;
    margin-right: 140px;
  }

  .hero {
    min-height: 100vh;
    padding-left: 140px;
    padding-right: 140px;
  }

  .hero h1 {
    font-size: 128px;
  }

  .hero .sub {
    font-size: 24px;
  }

  .hero-visual {
    margin: 0 auto;
  }
}

@media (min-width: 3840px) {
  .featured-section {
    max-width: 3100px;
    padding-left: 200px;
    padding-right: 200px;
  }

  .benefits-section {
    margin-left: 200px;
    margin-right: 200px;
  }

  .sub {
    font-size: 24px;
  }

  .hero {
    min-height: 100vh;
    padding-left: 200px;
    padding-right: 200px;
  }

  .hero h1 {
    font-size: 200px;
  }

  .hero .sub {
    font-size: 34px;
    max-width: 1000px;
  }

  .hero-visual {
    margin: 0 auto;
  }
}

/* низкая высота (мобильный landscape) */
@media (max-height: 520px) and (orientation: landscape) {
  .hero {
    min-height: 0;
  }
}