@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════
   ПЯТЫЙ ВАРИАНТ: ПОСТЕР ТЕХНИКИ, ГЛАВНАЯ ПО МАКЕТУ 2022, СТРАНИЦА МОДЕЛИ
   Кинематографичный герой по эскизу дизайнера: почти чёрный кадр,
   цветная подсветка сзади, световые полосы, ч/б фото «вживлённое»
   в фон, точки-узлы с выносками и подписями внизу кадра.
   Чистый CSS: ни одной картинки, кроме самого снимка техники.
   Классы .po-/.v5-/.mo- в app.css не встречаются — пересечений нет.
   Разметка — в pages_v5.py, логика — в assets/js/v5.js.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 0. ТОКЕНЫ ────────────────────────────────────────────────────
   --accent + --accent-rgb задаются ВМЕСТЕ (rgb-тройка нужна для alpha).
   Переопределяются на теме, на секции или инлайном:
     <section class="po" style="--accent:#FFB020;--accent-rgb:255,176,32">
   Грейд фото (--po-b/--po-c/…) правится на конкретном кадре — снимки
   разнородные, единого рецепта на все 43 фото не существует.        */
.po{
  --accent:#FF2E4C;
  --accent-rgb:255,46,76;
  --po-void:#04060A;          /* базовый чёрный сцены */
  --po-void2:#0A0F17;         /* чуть светлее, для «воздуха» за техникой */

  --po-b:.62;                 /* яркость базового слоя фото */
  --po-c:1.46;                /* контраст базового слоя */
  --po-hi-b:.34;              /* яркость слоя-подсветки (screen) */
  --po-hi-c:2.6;              /* контраст слоя-подсветки */
  --po-pos:50% 50%;           /* центр: под него считаются точки */
  --po-zoom:1.06;             /* лёгкий зум, чтобы уехали рамки/люди по краям */
  --po-tone:.34;              /* сила тонирования в акцент */
  --po-glow:.85;              /* сила задней подсветки */
  --po-rays:.72;              /* сила световых полос */

  --po-pad:clamp(14px,3.4vw,44px);
  --po-cap:12%;               /* высота «подвала» кадра: докуда идут выноски */

  position:relative;
  isolation:isolate;                 /* обязательно: блендинг не течёт на страницу */
  overflow:hidden;
  min-height:clamp(540px,92svh,900px);
  background:var(--po-void);
  color:#fff;
  contain:paint;
}

/* ─── 1. ФОН: глубина сцены ────────────────────────────────────────
   Не плоская заливка: пятно света по центру + «пол» снизу.          */
.po-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 38%, var(--po-void2) 0%, var(--po-void) 62%),
    linear-gradient(0deg, #000 0%, transparent 34%),
    var(--po-void);
}

/* ─── 2. ПОДСВЕТКА СЗАДИ ───────────────────────────────────────────
   Три размытых пятна акцента: два «крыла» по краям + ореол за техникой.
   screen на чёрном = чистое свечение, без грязи.                     */
.po-glow{
  position:absolute;inset:-12% -6%;z-index:1;pointer-events:none;
  mix-blend-mode:screen;
  opacity:var(--po-glow);
  background:
    radial-gradient(38% 52% at 16% 52%, rgba(var(--accent-rgb),.85) 0%, rgba(var(--accent-rgb),0) 70%),
    radial-gradient(38% 52% at 84% 52%, rgba(var(--accent-rgb),.85) 0%, rgba(var(--accent-rgb),0) 70%),
    radial-gradient(56% 40% at 50% 62%, rgba(var(--accent-rgb),.42) 0%, rgba(var(--accent-rgb),0) 74%),
    radial-gradient(30% 26% at 50% 30%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 72%);
  filter:blur(42px) saturate(1.15);
  animation:po-breathe 9s ease-in-out infinite;
}
@keyframes po-breathe{
  0%,100%{opacity:calc(var(--po-glow) * .82); transform:scale(1)}
  50%    {opacity:var(--po-glow);              transform:scale(1.035)}
}

/* ─── 3. СВЕТОВЫЕ ПОЛОСЫ ───────────────────────────────────────────
   Диагональные лучи «из-за» техники. Один повёрнутый слой с полосами
   разной ширины + маска, чтобы лучи гасли к краям и не били в текст.  */
.po-rays{
  position:absolute;left:-30%;right:-30%;top:-40%;bottom:-40%;
  z-index:2;pointer-events:none;
  mix-blend-mode:screen;
  opacity:var(--po-rays);
  transform:rotate(-19deg);
  background:
    linear-gradient(90deg, transparent 0 8%,  rgba(255,255,255,.55) 9.4%, transparent 10.8% 100%),
    linear-gradient(90deg, transparent 0 21%, rgba(255,255,255,.22) 23%,  transparent 25.4% 100%),
    linear-gradient(90deg, transparent 0 34%, rgba(255,255,255,.13) 35.2%,transparent 36.6% 100%),
    linear-gradient(90deg, transparent 0 63%, rgba(255,255,255,.16) 64.6%,transparent 66.4% 100%),
    linear-gradient(90deg, transparent 0 78%, rgba(255,255,255,.42) 79.2%,transparent 80.4% 100%),
    linear-gradient(90deg, transparent 0 90%, rgba(255,255,255,.20) 91.4%,transparent 93% 100%);
  filter:blur(4px);
  -webkit-mask-image:radial-gradient(72% 66% at 50% 42%, #000 6%, rgba(0,0,0,.55) 48%, transparent 86%);
          mask-image:radial-gradient(72% 66% at 50% 42%, #000 6%, rgba(0,0,0,.55) 48%, transparent 86%);
}

/* ─── 4. КРУПНОЕ СЛОВО-ВОДЯНОЙ ЗНАК ────────────────────────────────
   «Бренд» на фоне, как на постерах Honda: контур + едва заметная заливка. */
.po-brand{
  position:absolute;left:50%;top:44%;z-index:3;
  transform:translate(-50%,-50%);
  margin:0;white-space:nowrap;pointer-events:none;user-select:none;
  font-size:clamp(96px,23vw,360px);font-weight:900;line-height:.8;
  letter-spacing:-.05em;text-transform:uppercase;
  color:rgba(255,255,255,.028);
  -webkit-text-stroke:1px rgba(255,255,255,.06);
}

/* ─── 5. ФОТО ──────────────────────────────────────────────────────
   Два слоя одного и того же снимка:
     .po-im-b  — база: приглушённая, растушёванная маской (normal);
     .po-im-s  — «пересвет»: задран контраст, всё кроме бликов уходит
                 в чёрный, поверх — screen. Даёт хром и объём, будто
                 технику подсветили сзади нашим же светом.
   Плюс .po-tone (blend:color) — тонирование ч/б в --accent.          */
.po-figure{
  position:absolute;left:0;right:0;top:var(--po-top,16%);bottom:var(--po-bot,30%);
  z-index:4;pointer-events:none;display:grid;place-items:center;
}
.po-im{
  /* min-height:auto у элемента грида не даёт картинке сжаться ниже
     натуральной высоты — без явного нуля max-height не работает */
  min-width:0;min-height:0;
  max-width:min(96%,1280px);max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.75));
}
/* отражение в «полу» сцены */
.po-ref{
  position:absolute;left:50%;top:100%;transform:translate(-50%,0) scaleY(-1);
  max-width:min(94%,1180px);max-height:44%;opacity:.16;filter:blur(1.5px);
  -webkit-mask-image:linear-gradient(#000,transparent 42%);
          mask-image:linear-gradient(#000,transparent 42%);
}
/* пятно света под техникой — «сцена» */
.po-figure::after{
  content:"";position:absolute;left:50%;top:100%;width:min(80%,900px);height:90px;
  transform:translate(-50%,-42%);pointer-events:none;
  background:radial-gradient(60% 50% at 50% 50%,
    rgba(var(--accent-rgb),.5) 0%, rgba(var(--accent-rgb),.12) 45%, transparent 72%);
  filter:blur(14px);
}
/* ─── 5г. ФОТО НЕТ ─────────────────────────────────────────────────
   11 моделей из 54 без снимка. Кадр не должен «проваливаться»:
   вместо фото — чертёжная заглушка, постер остаётся постером.        */
.po-ghost{
  position:absolute;inset:0;z-index:4;display:grid;place-items:center;
  pointer-events:none;
  background:
    linear-gradient(rgba(var(--accent-rgb),.10) 1px, transparent 1px) 0 0/100% 44px,
    linear-gradient(90deg, rgba(var(--accent-rgb),.10) 1px, transparent 1px) 0 0/44px 100%;
  -webkit-mask-image:radial-gradient(60% 56% at 50% 50%, #000 10%, transparent 78%);
          mask-image:radial-gradient(60% 56% at 50% 50%, #000 10%, transparent 78%);
}
.po-ghost b{
  position:absolute;left:50%;top:70%;transform:translate(-50%,-50%);
  font-size:clamp(10.5px,1.4vw,13px);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(var(--accent-rgb),.7);
  border:1px solid rgba(var(--accent-rgb),.35);padding:9px 16px;
}
.po--noimg .po-note,
.po--noimg .po-brand{display:none}
.po--noimg{--po-glow:.55;--po-rays:.3}

/* ─── 6. ВИНЬЕТКА И ЗАТЕМНЕНИЯ ПОД ТЕКСТ ───────────────────────────*/
.po-vig{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  background:
    radial-gradient(130% 105% at 50% 52%, transparent 42%, rgba(0,0,0,.5) 82%, rgba(0,0,0,.9) 100%),
    linear-gradient(180deg, rgba(0,0,0,.6) 0%, transparent 24%),
    linear-gradient(0deg,   rgba(0,0,0,.7) 0%, transparent 26%);
}

/* ─── 7. ЗЕРНО ─────────────────────────────────────────────────────
   Без картинок и без SVG: точечный муар из двух conic-градиентов.
   Съедает «цифровую» чистоту градиентов и полосатость (banding).     */
.po-grain{
  position:absolute;inset:0;z-index:7;pointer-events:none;
  opacity:.07;mix-blend-mode:soft-light;
  background-image:
    repeating-conic-gradient(#fff 0 25%, #000 0 50%),
    repeating-conic-gradient(#000 0 25%, #fff 0 50%);
  background-size:3px 3px, 5px 5px;
  background-position:0 0, 1px 2px;
}

/* ─── 8. ТИПОГРАФИКА И UI ──────────────────────────────────────────
   Сетка поверх кадра: верхняя строка / название / подвал.            */
.po-ui{
  position:absolute;inset:0;z-index:8;
  display:grid;grid-template-rows:auto auto 1fr auto;
  padding:var(--po-pad);
  gap:12px;
  pointer-events:none;               /* кликабельны только кнопки внутри */
}
.po-ui button,.po-ui a{pointer-events:auto}

.po-kick{
  margin:0;font-size:clamp(10px,1.1vw,12.5px);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
}
.po-kick i{width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px rgba(var(--accent-rgb),.9);font-style:normal}

.po-mid{align-self:start;text-align:center;pointer-events:none;margin-top:2px}
.po-title{
  margin:0;font-weight:900;text-transform:uppercase;
  font-size:clamp(30px,6.6vw,96px);line-height:.88;letter-spacing:-.045em;
  color:var(--accent);
  text-shadow:
    0 0 2px rgba(0,0,0,.5),
    0 0 46px rgba(var(--accent-rgb),.45),
    0 10px 60px rgba(0,0,0,.7);
  text-wrap:balance;
}
.po-sub{
  margin:10px 0 0;font-size:clamp(11px,1.3vw,14px);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

/* подвал кадра: подписи выносок живут здесь же */
.po-foot{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  font-size:clamp(10.5px,1.2vw,13px);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

/* ─── 9. СТРЕЛКИ ЛИСТАНИЯ ──────────────────────────────────────────*/
.po-nav{
  position:absolute;top:50%;z-index:10;
  width:clamp(44px,4.4vw,58px);aspect-ratio:1;
  transform:translateY(-50%);
  display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;cursor:pointer;
  transition:background .18s, border-color .18s, transform .18s;
}
.po-nav:hover{background:rgba(255,255,255,.16);border-color:#fff}
.po-nav:active{transform:translateY(-50%) scale(.94)}
.po-nav.prev{left:var(--po-pad)}
.po-nav.next{right:var(--po-pad)}
.po-nav svg{width:38%;height:38%;fill:none;stroke:currentColor;stroke-width:2.2}

/* ─── 10. ХОТСПОТ + ВЫНОСКА ────────────────────────────────────────
   Разметка:
     <button class="po-note" style="--x:46%;--y:58%">
       <i></i><b>какая то деталь</b>
     </button>
   Блок тянется от точки (--x,--y) вниз до линии подписи (--po-cap).
   Вертикальная линия — ::before, «локоть» под подпись — ::after.     */
.po-note{
  position:absolute;left:var(--x);top:var(--y);bottom:var(--po-cap);
  z-index:11;width:0;padding:0;border:0;background:0;
  color:#fff;font:inherit;cursor:pointer;
}
/* точка */
.po-note i{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  width:12px;height:12px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 0 16px 2px rgba(var(--accent-rgb),.85);
  transition:width .2s, height .2s, box-shadow .2s;
}
/* пульсирующее кольцо */
.po-note i::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),.85);
  animation:po-pulse 2.4s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes po-pulse{
  0%  {transform:scale(.7); opacity:.9}
  70% {transform:scale(2.6);opacity:0}
  100%{transform:scale(2.6);opacity:0}
}
/* выносная линия вниз */
.po-note::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,
    rgba(var(--accent-rgb),.95) 0%, rgba(var(--accent-rgb),.5) 62%, rgba(var(--accent-rgb),.95) 100%);
  transform-origin:top;transform:scaleY(0);
  animation:po-draw .55s .15s cubic-bezier(.3,.9,.3,1) forwards;
}
/* «локоть» вбок под подпись */
.po-note::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;
  width:var(--po-elbow,26px);
  background:rgba(var(--accent-rgb),.95);
  transform-origin:left;transform:scaleX(0);
  animation:po-draw-x .3s .6s ease forwards;
}
@keyframes po-draw  {to{transform:scaleY(1)}}
@keyframes po-draw-x{to{transform:scaleX(1)}}
/* подпись */
.po-note b{
  position:absolute;left:var(--po-elbow,26px);bottom:0;
  transform:translate(6px,50%);
  white-space:nowrap;
  font-weight:800;font-size:clamp(11px,1.2vw,13.5px);
  letter-spacing:.1em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 10px #000;
  opacity:0;animation:po-fade .3s .8s ease forwards;
}
@keyframes po-fade{to{opacity:1}}
/* подпись «влево» — для точек у правого края */
.po-note.left::after{left:auto;right:0;transform-origin:right;transform:scaleX(0)}
.po-note.left b{left:auto;right:var(--po-elbow,26px);transform:translate(-6px,50%)}
/* наведение / фокус / активная */
.po-note:hover i,
.po-note:focus-visible i,
.po-note.on i{
  width:18px;height:18px;
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 0 0 7px rgba(var(--accent-rgb),.22), 0 0 26px 6px rgba(var(--accent-rgb),.9);
}
.po-note:focus-visible{outline:0}
.po-note:focus-visible b{outline:2px solid var(--accent);outline-offset:3px}
/* при наведении на одну — остальные притухают (только там, где есть мышь:
   на тач-экранах :hover залипает) */
@media (hover:hover){
  .po:hover .po-note{opacity:.4;transition:opacity .2s}
  .po .po-note:hover,
  .po .po-note:focus-visible,
  .po .po-note.on{opacity:1}
}

/* ─── 11. МОБИЛЬНЫЕ (≤620, проверено на 375) ───────────────────────
   Крупные размытия дороги на телефоне — режем радиусы.
   Стрелки уходят вниз, чтобы не лезли на технику и не мешали свайпу. */
@media (max-width:620px){
  .po{
    min-height:0;aspect-ratio:4/5;
    /* портрет + горизонтальный кадр = contain: техника видна целиком,
       «письма» по краям всё равно съедает маска и виньетка */
    --po-fit:contain;--po-zoom:1.16;--po-pos:50% 50%;
    --po-cap:26%;                    /* подписи выше подвала, чтобы не наезжали */
    --po-tone:.3;
  }
  .po-glow{filter:blur(28px) saturate(1.15)}
  .po-rays{filter:blur(3px);opacity:calc(var(--po-rays) * .8)}
  .po-brand{font-size:34vw}
  .po-ui{gap:8px}
  .po-title{font-size:clamp(30px,12.5vw,64px)}
  .po-nav{top:auto;bottom:var(--po-pad);transform:none;width:44px}
  .po-nav:active{transform:scale(.94)}
  .po-nav.prev{left:var(--po-pad)}
  .po-nav.next{right:var(--po-pad)}
  .po-foot{justify-content:center;text-align:center;padding-bottom:56px}
  .po-note b{font-size:10px;letter-spacing:.08em}
  /* на телефоне оставляем только помеченные точки — иначе каша */
  .po-note:not(.key){display:none}
}
@media (max-width:380px){
  .po-note b{max-width:46vw;white-space:normal;line-height:1.2}
}

/* ─── 12. ДОСТУПНОСТЬ И ДЕГРАДАЦИЯ ─────────────────────────────────*/
@media (prefers-reduced-motion:reduce){
  .po-glow{animation:none}
  .po-note i::after{animation:none;opacity:.35}
  .po-note::before{animation:none;transform:scaleY(1)}
  .po-note::after{animation:none;transform:scaleX(1)}
  .po-note b{animation:none;opacity:1}
}
/* нет масок — держим кадр на виньетке, а не на прозрачном прямоугольнике */
@supports not (mask-image:radial-gradient(#000,transparent)){
  .po-figure::after{background:radial-gradient(70% 66% at 50% 50%, transparent 24%, var(--po-void) 74%)}
  .po-rays{opacity:calc(var(--po-rays) * .5)}
}
@media (prefers-contrast:more){
  .po-grain{display:none}
  .po-title{text-shadow:0 2px 12px #000}
  .po-vig{background:radial-gradient(120% 100% at 50% 46%, transparent 20%, rgba(0,0,0,.8) 80%)}
}
/* печать — постер бесполезен, оставляем только название */
@media print{
  .po-bg,.po-glow,.po-rays,.po-grain,.po-vig,.po-nav,.po-note,.po-brand{display:none}
  .po{min-height:0;color:#000}
  .po-title{color:#000;text-shadow:none}
}

/* ─── 13. ПОСТЕР: НАШИ ДОПОЛНЕНИЯ ──────────────────────────────────
   Контейнер точек, подписи с числом позиций, пустые узлы, полоса
   под кадром с выбором техники и кнопками. */
.po{--accent:#E8232A;--accent-rgb:232,35,42;--po-top:23%;--po-bot:19%}
.po-notes{position:absolute;inset:0;z-index:11;pointer-events:none}
.po-notes .po-note{pointer-events:auto}
.po-figure.po-fade{animation:po-shot .5s ease}
@keyframes po-shot{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}
.po-title.po-anim{animation:po-title .55s cubic-bezier(.2,.8,.3,1)}
/* длинное имя модели («Скутер 4Т 50–100 (139QMB)») занимало полкадра */
.po-title.po-t-long{font-size:clamp(26px,5.6vw,82px)}
@keyframes po-title{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.po-note::before,.po-note::after,.po-note b{animation-delay:var(--po-delay,.15s)}
.po-note b{max-width:min(30vw,240px);white-space:normal;line-height:1.25}
.po-note b u{display:block;text-decoration:none;font-weight:400;opacity:.7;
  font-size:.82em;letter-spacing:.1em;margin-top:2px}
/* Подпись видна у ключевых узлов и у активного; у остальных — только
   точка. Анимации рисования у неключевых снимаем: animation с forwards
   перебивает opacity и подписи налезали бы друг на друга. */
.po-note:not(.key) b,.po-note:not(.key)::before,.po-note:not(.key)::after{
  animation:none;opacity:0;transform:none;transition:opacity .2s}
.po-note:not(.key).on b,.po-note:not(.key):hover b,.po-note:not(.key):focus-visible b,
.po-note:not(.key).on::before,.po-note:not(.key):hover::before,.po-note:not(.key):focus-visible::before,
.po-note:not(.key).on::after,.po-note:not(.key):hover::after,.po-note:not(.key):focus-visible::after{opacity:1}

/* Акцент постера — красный во всех оформлениях: техника на кадрах красная,
   и подсветка сцены должна с ней совпадать. */
/* узел, по которому на эту технику ничего нет */
.po-note-0 i{background:rgba(255,255,255,.5);box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.po-note-0 i::after{display:none}
.po-note-0 b{color:rgba(255,255,255,.6)}
/* точка у самого низа кадра: подпись поднимаем, иначе выноска схлопнется */
.po-note-lo{bottom:5%}
/* Подпись — только текст: клики должна ловить сама точка. Иначе невидимая
   подпись соседнего узла перехватывает нажатие и открывается не тот узел. */
.po-note b{pointer-events:none}
.po-note.on b{pointer-events:auto}
/* зона нажатия точки: 12 px в диаметре мало для пальца */
.po-note i::before{content:"";position:absolute;inset:-14px;border-radius:50%}
/* подпись, конфликтующая по горизонтали с активной, гасится */
.po-note-mute b,.po-note-mute::before,.po-note-mute::after{opacity:0;transition:opacity .18s}
/* жёлтая точка на жёлтых буквах названия — обводим тёмным гало */
.po-note i{box-shadow:0 0 0 2px rgba(0,0,0,.65),0 0 16px 2px rgba(var(--accent-rgb),.85)}
.po-title,.po-sub{text-shadow:0 2px 14px rgba(0,0,0,.85),0 0 30px rgba(0,0,0,.65)}

.po-bar{background:var(--po-void,#04060A);color:#fff;padding:14px 0 18px}
/* ярлык выбора версии живёт в левом нижнем углу и садился на чипы техники */
.po-bar-in{padding-left:0}
@media (min-width:901px){ body[data-page="home"] .po-bar{padding-bottom:26px} }
.po-bar-in{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.po-dots{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.po-dot{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#C9CFD8;
  border-radius:999px;padding:7px 14px;cursor:pointer;font-size:12.5px;font-weight:600;
  white-space:nowrap;transition:background .16s,color .16s,border-color .16s}
.po-dot:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.po-dot.on{background:var(--accent);border-color:var(--accent);color:#fff}
.po-act{display:flex;gap:10px;flex-wrap:wrap}
.po-act .btn-g{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.po-act .btn-g:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.1)}

/* ─── 14. ГЛАВНАЯ, ВАРИАНТ 5 ───────────────────────────────────────*/
.v5s{padding-block:clamp(34px,4.6vw,64px)}
.v5h{text-align:center;text-transform:none;letter-spacing:-.03em;line-height:1.12;
  font-size:clamp(22px,3vw,40px);margin-bottom:clamp(18px,2.4vw,30px);position:relative;
  padding-bottom:14px}
.v5h::after{content:"";position:absolute;left:50%;bottom:0;width:46px;height:3px;
  transform:translateX(-50%);background:var(--amber)}
.v5h-l{text-align:left}
.v5h-l::after{left:0;transform:none}

/* полоса подписки */
.v5sub{background:#1A1A1A;color:#fff;padding:clamp(24px,3.4vw,44px) 0;margin-block:clamp(24px,3vw,44px)}
.v5sub-in{display:grid;gap:clamp(16px,2vw,32px);align-items:center}
.v5sub-h{text-transform:none;letter-spacing:-.02em;font-size:clamp(20px,2.4vw,30px);color:#fff}
.v5sub-in p{margin:8px 0 0;color:#B9BDC2;font-size:14.5px;line-height:1.5;max-width:52ch}
.v5sub-f{display:flex;gap:10px;flex-wrap:wrap}
.v5sub-f .inp{flex:1 1 220px;background:#fff;border-color:transparent;color:#1A1A1A}
.v5sub-f .inp.bad{border-color:var(--red)}
.v5sub-f .btn{flex:0 0 auto}

/* товар недели */
.v5week{display:grid;gap:clamp(18px,2.6vw,40px);align-items:center;
  border:1px solid var(--rule);background:var(--sheet2);padding:clamp(16px,2.4vw,32px)}
.v5week-im{position:relative;display:block;background:var(--well);aspect-ratio:1;overflow:hidden}
.v5week-im img{width:100%;height:100%;object-fit:contain}
.v5week-save{position:absolute;left:0;top:0;background:var(--red);color:#fff;font-weight:700;
  font-size:12.5px;padding:5px 11px}
.v5week-c h3{margin:8px 0 0;text-transform:none;letter-spacing:-.02em;line-height:1.2;
  font-size:clamp(18px,2.2vw,26px)}
.v5week-c h3 a:hover{color:var(--amber)}
.v5week-l{margin:16px 0 0;padding:0;border-top:1px solid var(--rule)}
.v5week-l li{list-style:none;display:flex;gap:12px;justify-content:space-between;
  padding:9px 0;border-bottom:1px solid var(--rule);font-size:13.5px;color:var(--chalk2)}
.v5week-l b{color:var(--chalk);text-align:right}
.v5week-p{display:flex;align-items:baseline;gap:12px;margin:16px 0}
.v5week-p .pr-b{font-size:30px}
.v5week .act{max-width:420px}

/* бегущая строка */
.v5mq{overflow:hidden;border-block:1px solid var(--rule);padding:14px 0;
  margin-block:clamp(22px,3vw,40px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.v5mq-in{display:flex;width:max-content;animation:v5mq 42s linear infinite}
.v5mq:hover .v5mq-in{animation-play-state:paused}
.v5mq-r{display:flex;align-items:center;gap:22px;padding-right:22px}
.v5mq-r span{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--chalk2);
  white-space:nowrap;text-transform:uppercase}
.v5mq-r i{color:var(--amber);font-style:normal;font-size:10px}
@keyframes v5mq{to{transform:translateX(-50%)}}
.v5mq-calm .v5mq-in{animation:none}

/* популярные категории */
.v5cats{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.v5cat{background:var(--sheet2);padding:16px 18px}
.v5cat-h{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em}
.v5cat-h:hover{color:var(--amber)}
.v5cat-c{display:block;font-size:12px;color:var(--chalk3);margin-top:4px}
.v5cat-c i{font-style:normal;color:var(--green)}
.v5cat ul{margin:12px 0 0;padding:0}
.v5cat li{list-style:none;margin-bottom:7px;font-size:13.5px}
.v5cat li a{color:var(--chalk2)}
.v5cat li a:hover{color:var(--amber)}

/* цифры */
.v5nums{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.v5nums div{background:var(--sheet2);padding:20px 16px;text-align:center}
.v5nums b{display:block;font-size:clamp(26px,3.6vw,42px);font-weight:900;letter-spacing:-.04em;
  color:var(--amber);line-height:1}
.v5nums span{display:block;margin-top:7px;font-size:12.5px;color:var(--chalk2);line-height:1.4}
.v5nums-p{margin:20px auto 0;max-width:70ch;text-align:center;font-size:15px;color:var(--chalk2);
  line-height:1.6}

/* магазины */
.v5shop{display:grid;gap:clamp(16px,2.4vw,34px);align-items:center}
.v5shop-c b{display:block;font-size:clamp(18px,2.2vw,26px);font-weight:800;letter-spacing:-.02em}
.v5shop-c p{margin:10px 0 0;color:var(--chalk2);font-size:14.5px;line-height:1.55;max-width:44ch}
.v5tel{display:block;margin-top:16px;font-size:clamp(22px,2.6vw,30px);font-weight:800;
  letter-spacing:-.03em;color:var(--amber)}
.v5tel-s{display:block;font-size:12.5px;color:var(--chalk3);margin-top:2px}

/* отзывы */
.v5rev{display:grid;grid-template-columns:1fr;gap:clamp(10px,1.4vw,18px)}
.v5rev-i{margin:0;background:var(--sheet2);border:1px solid var(--rule);padding:18px 20px}
.v5rev-s{color:var(--amber);letter-spacing:2px;font-size:14px}
.v5rev-i blockquote{margin:10px 0 0;font-size:14.5px;color:var(--chalk2);line-height:1.55}
.v5rev-i figcaption{margin-top:12px;font-size:13px;font-weight:700}

/* ─── 15. СТРАНИЦА МОДЕЛИ ──────────────────────────────────────────*/
.mo-grid{display:grid;gap:clamp(18px,2.6vw,40px);align-items:start}
.mo-hint{margin:0 0 16px;color:var(--chalk2);font-size:14.5px;line-height:1.55;max-width:58ch}
.mo-units{margin:0;padding:0;border-top:1px solid var(--rule)}
.mo-units li{list-style:none}
.mo-u{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:0;
  border:0;border-bottom:1px solid var(--rule);padding:13px 4px;cursor:pointer;color:inherit;
  transition:background .15s}
.mo-u:hover{background:var(--amber-soft)}
.mo-u.on{background:var(--amber-soft);box-shadow:inset 3px 0 0 var(--amber)}
.mo-u>i{font-size:12px;font-weight:700;color:var(--chalk3);font-style:normal;flex:none;width:20px}
.mo-u.on>i{color:var(--amber)}
.mo-u-t{flex:1;min-width:0}
.mo-u-t b{display:block;font-size:15px;font-weight:700}
.mo-u-t em{display:block;font-style:normal;font-size:12.5px;color:var(--chalk3);margin-top:2px}
.mo-u-c{flex:none;text-align:right;font-size:16px;font-weight:800;letter-spacing:-.01em}
.mo-u-c i{display:block;font-style:normal;font-size:11px;color:var(--green);font-weight:400}
.mo-card{border:1px solid var(--rule2);background:var(--sheet2);padding:clamp(16px,2vw,22px);
  position:sticky;top:120px}
.mo-card-h b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em}
.mo-card-h span{display:block;font-size:12.5px;color:var(--chalk3);margin-top:3px}
.mo-note{margin:12px 0 0;font-size:13.5px;color:var(--chalk2);line-height:1.5}
.mo-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);margin:16px 0;
  padding:0;border:1px solid var(--rule)}
.mo-facts li{list-style:none;background:var(--sheet2);padding:12px 14px;text-align:center}
.mo-facts b{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em}
.mo-facts span{display:block;font-size:11.5px;color:var(--chalk3);margin-top:3px;line-height:1.3}

/* ─── 16. ДВИЖЕНИЕ ─────────────────────────────────────────────────*/
[data-reveal].rv{opacity:0;transform:translateY(18px);
  transition:opacity .5s cubic-bezier(.2,.8,.3,1),transform .5s cubic-bezier(.2,.8,.3,1)}
[data-reveal].rv.is-in{opacity:1;transform:none}
.v5prog{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--amber);
  transform:scaleX(0);transform-origin:left;z-index:60;pointer-events:none}
.po-nav,.v5week .btn,.v5sub-f .btn{transition:transform .18s cubic-bezier(.2,.8,.3,1),
  background .18s,border-color .18s}

@media (min-width:700px){
  .v5nums{grid-template-columns:repeat(4,minmax(0,1fr))}
  .v5rev{grid-template-columns:1fr 1fr}
  .v5cats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:900px){
  .v5sub-in{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
  .v5week{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .v5shop{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .mo-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
}
@media (min-width:1100px){
  .v5cats{grid-template-columns:repeat(5,minmax(0,1fr))}
  .v5rev{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:620px){
  .po-bar-in{gap:10px}
  .po-dots{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .po-dots::-webkit-scrollbar{display:none}
  .po-act{width:100%}
  .po-act .btn{flex:1 1 100%}
  .v5week-p .pr-b{font-size:24px}
  .mo-card{position:static}
}
@media (prefers-reduced-motion:reduce){
  .v5mq-in{animation:none}
  .po-figure.po-fade,.po-title.po-anim{animation:none}
  [data-reveal].rv{opacity:1;transform:none;transition:none}
}

/* заголовок внутри строки инструментов: без центровки и без черты */
.tools-m .v5h{margin:0;padding-bottom:0;text-align:left;font-size:clamp(19px,2.2vw,28px)}
.tools-m .v5h::after{display:none}
.tools-m{align-items:center}

/* На телефоне подписи не помещаются рядом: показываем только точки,
   а подпись с выноской — у той, по которой тапнули. */
/* Планшетные ширины: секция была выше кадра, и кроп по бокам съедал
   крайние точки вместе с подписями. */
@media (min-width:621px) and (max-width:1000px){
  .po{min-height:0;aspect-ratio:3/2;--po-cap:20%}
}
@media (max-width:620px){
  /* на телефоне кадру нужна высота, иначе техника съёживается
     и точки на ней сливаются */
  .po{--po-cap:16%;--po-top:22%;--po-bot:22%;aspect-ratio:auto;min-height:68svh}
  .po-note i{width:10px;height:10px}
  /* точки показываем все, подписи — только у нажатой */
  .po-note,.po-note:not(.key){display:block}
  .po-title{font-size:clamp(26px,8.6vw,46px)}
  .po-nav{top:auto;bottom:10px;transform:none;width:38px}
  .po-nav:active{transform:scale(.94)}
  .po-note b,.po-note::before,.po-note::after{animation:none;opacity:0;transform:none;
    transition:opacity .2s}
  .po-note.on b,.po-note.on::before,.po-note.on::after{opacity:1}
  .po-note b{max-width:54vw;white-space:normal;line-height:1.25}
  .po-sub{font-size:10px;letter-spacing:.1em;margin-top:8px}
  .po-foot{padding-bottom:0;font-size:10px}
  /* на телефоне название сверху, техника с точками — под ним */
  .po-ui{grid-template-rows:auto auto 1fr}
  .po-mid{transform:none;align-self:start;margin-top:2px}
  .po-note i::before{inset:-16px}
  .po-nav{bottom:auto;top:46%;transform:translateY(-50%);width:40px}
}