/* =============================================================================
   BONUSNO — STYLES
   Не редактируй для смены казино — всё в js/config.js
============================================================================= */

/* Локальный шрифт заголовка (заменяет PNG-текст; woff2, не блокирует рендер) */
@font-face{
  font-family:'Montserrat';
  font-style:normal; font-weight:800; font-display:swap;
  src:url("../assets/fonts/montserrat-800-cyrillic.woff2") format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal; font-weight:800; font-display:swap;
  src:url("../assets/fonts/montserrat-800-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

/* Unbounded — вариативный (один файл на веса 400–900), локально. Для нового дизайна. */
@font-face{
  font-family:'Unbounded';
  font-style:normal; font-weight:400 900; font-display:swap;
  src:url("../assets/fonts/unbounded-cyrillic.woff2") format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Unbounded';
  font-style:normal; font-weight:400 900; font-display:swap;
  src:url("../assets/fonts/unbounded-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

:root{
  --gold:        #f2c14e;
  --gold-bright: #ffd86b;
  --gold-deep:   #b8862b;
  --purple:      #8b5cf6;
  --purple-deep: #5b21b6;
  --violet-glow: #7c4dff;
  --ink:         #04060f;
  --ink-2:       #070a18;
  --card-bg:     rgba(14, 18, 38, 0.55);
  --card-border: rgba(150, 130, 220, 0.34);
  --txt:         #eef0fb;
  --txt-dim:     #9aa0c4;
  --font-display:'Orbitron', 'Exo 2', sans-serif;   /* латиница: лого, цифры */
  --font-body:   'Exo 2', system-ui, sans-serif;    /* кириллица и текст */
}

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

html,body{ height:100%; }

body{
  font-family:var(--font-body);
  background:#04060f;
  color:var(--txt);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------------- ФОН ---- */
/* ОСНОВНОЙ ФОН — nebula2.webp (с собственной золотой орбитой). Размер/позицию слоя
   задаёт JS (placeBg) так, чтобы центр орбиты картинки лёг ровно на главную карточку,
   а кольца оказались под каруселью карточек. Кольца спирали сайта скрыты (см. ниже). */
.bg{ position:fixed; inset:0; z-index:0; overflow:hidden;
  background-color:#04030c;
  --bgl:0px; --bgt:0px; --bgw:100%; --bgh:100%; }
.bg::before{ content:""; position:absolute;
  left:var(--bgl); top:var(--bgt); width:var(--bgw); height:var(--bgh);
  background-image:url("../assets/backgrounds/nebula2-grade.webp");
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover; }
.bg::after{ content:none; display:none; }
.bg-neb{ display:none; }
.bg-stars{ display:none; position:absolute; inset:-50%;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 70% 60%, #cdbaff, transparent),
    radial-gradient(1px 1px at 40% 80%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 85% 20%, #fff, transparent),
    radial-gradient(1px 1px at 55% 15%, #b9a8ff, transparent),
    radial-gradient(1.2px 1.2px at 10% 55%, #fff, transparent),
    radial-gradient(1px 1px at 90% 75%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 30% 50%, #d9ccff, transparent);
  background-size:280px 280px, 320px 320px, 200px 200px, 360px 360px, 240px 240px, 300px 300px, 260px 260px, 220px 220px;
  opacity:.55;
  animation:drift 160s linear infinite;
}
@keyframes drift{ to{ transform:translate3d(-60px,-40px,0); } }

/* звёздное поле с индивидуальным мерцанием (создаётся в app.js) */
.bg-starfield{ position:absolute; inset:0;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.bg-starfield span{ position:absolute; border-radius:50%;
  animation-name:starTwinkle; animation-timing-function:ease-in-out;
  animation-iteration-count:infinite; will-change:opacity, transform; }
@keyframes starTwinkle{
  0%,100%{ opacity:.18; transform:scale(.7); }
  50%    { opacity:1;   transform:scale(1.12); }
}

/* CSS-туманности отключены (фон берётся из nebula.png) */
.bg-nebula{ display:none; position:absolute; border-radius:50%; filter:blur(80px); opacity:.72;
  will-change:transform, opacity; mix-blend-mode:screen; }
.bg-nebula--1{ width:660px; height:660px; top:6%; right:1%;             /* фиолетовая, за спиралью */
  background:radial-gradient(circle, rgba(170,110,255,.72) 0%, rgba(115,70,225,.34) 40%, rgba(70,45,180,.12) 62%, transparent 74%);
  animation:nebulaA 28s ease-in-out infinite; }
.bg-nebula--2{ width:720px; height:720px; bottom:-2%; right:8%;          /* сине-фиолетовая */
  background:radial-gradient(circle, rgba(85,115,245,.52) 0%, rgba(60,75,210,.2) 48%, transparent 72%);
  animation:nebulaB 36s ease-in-out infinite; }
.bg-nebula--3{ width:500px; height:500px; top:34%; right:-3%;            /* розово-магента акцент */
  background:radial-gradient(circle, rgba(245,110,185,.42) 0%, rgba(175,80,205,.16) 50%, transparent 72%);
  animation:nebulaA 32s ease-in-out infinite reverse; }
@keyframes nebulaA{
  0%,100%{ transform:translate(0,0) scale(1);      opacity:.62; }
  50%    { transform:translate(44px,-32px) scale(1.22); opacity:.9; }
}
@keyframes nebulaB{
  0%,100%{ transform:translate(0,0) scale(1.05);   opacity:.5; }
  50%    { transform:translate(-54px,22px) scale(1.3); opacity:.78; }
}

/* ОБЪЁМНЫЕ ОБЛАКА ТУМАННОСТИ / ГЛУБИНА (создаются в app.js, слой за всем) */
.bg-clouds{ position:absolute; inset:0; overflow:hidden; }
.bg-clouds span{ position:absolute; border-radius:50%; filter:blur(60px);
  mix-blend-mode:screen; will-change:transform, opacity;
  animation-name:cloudFloat; animation-timing-function:ease-in-out;
  animation-iteration-count:infinite; }
@keyframes cloudFloat{
  0%,100%{ transform:translate(0,0) scale(1); opacity:.35; }
  50%    { transform:translate(var(--dx,22px), var(--dy,-18px)) scale(1.16); opacity:.6; }
}

/* FLOATING PARTICLES: золотая энергетическая пыль (создаётся в app.js) */
.bg-pollen{ position:absolute; inset:0; overflow:hidden;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.bg-pollen span{ position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(185,145,255,1), rgba(124,77,255,0) 70%);
  box-shadow:0 0 5px rgba(160,110,255,.5);
  filter:blur(.4px);
  animation-name:pollen; animation-timing-function:linear;
  animation-iteration-count:infinite; }
.bg-pollen span.is-gold{
  background:radial-gradient(circle, rgba(255,226,140,1), rgba(255,200,90,0) 70%);
  box-shadow:0 0 7px rgba(255,205,110,.75), 0 0 14px rgba(255,190,80,.4); }
@keyframes pollen{
  0%   { transform:translate(0,0); }
  25%  { transform:translate(18px,-40px); }
  50%  { transform:translate(-12px,-90px); }
  75%  { transform:translate(14px,-140px); }
  100% { transform:translate(0,-190px); }
}

/* ------------------------------------------------------------- ПОСТЕР ---- */
.poster{
  position:relative; z-index:1;
  width:90%; max-width:1760px; margin:0 auto;   /* контент ~90% ширины монитора */
  padding:16px clamp(16px,2vw,48px) 16px;
  display:flex; flex-direction:column;
  height:100vh; max-height:100vh;
  /* по вертикали без скролла (первый экран), по горизонтали НЕ режем —
     иначе крайние правые карточки орбиты обрезаются краем постера (≈95% ширины).
     Горизонтальный вылет всё равно скрывает body{overflow-x:hidden}. */
  overflow:visible;
}

/* -------------------------------------------------------------- ШАПКА ---- */
/* шапка: распорка | ЛОГО ПО ЦЕНТРУ | соц.иконки справа (выравнивание по верху) */
.topbar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:flex-start;
  gap:16px; padding:10px 8px;
}
.brand{ position:relative; grid-column:2; justify-self:center; display:flex; align-items:flex-start; }
/* ЛОГОТИП BONUSNO — живой текст (бывший bonusno.png), бокс прежних размеров */
.brand__logo{ position:relative; width:440px; max-width:90vw;
  display:flex; align-items:center; justify-content:center; }
.brand__logo img{ width:100%; height:auto; display:block;
  -webkit-user-drag:none; user-select:none;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
/* группа соц.иконок прижата к верху-правому углу, не зависит от размера логотипа */
.topbar__right{ grid-column:3; justify-self:end; align-self:flex-start; }
/* ЭКСКЛЮЗИВНЫЕ БОНУСЫ: Montserrat Medium, крупнее, шире трекинг, золото, без лишнего свечения */
.brand__tag{ font-family:'Montserrat',sans-serif; margin-top:9px; font-size:13px; letter-spacing:13px;
  color:#e9cf94; font-weight:500; text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.5); opacity:1; }

/* правая часть шапки: группа соц.иконок + отдельный бейдж 18+ */
.topbar__right{ display:inline-flex; align-items:center; gap:12px; }

/* ============ ЕДИНЫЙ КОМПОНЕНТ СОЦ.ИКОНКИ (шапка + футер) ============ */
.social{ display:inline-flex; align-items:center; gap:10px; }
.social-icon{ width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center;
  border-radius:14px; text-decoration:none; color:#fff;
  background:linear-gradient(180deg, rgba(40,30,74,.72), rgba(14,10,30,.72));
  border:1px solid rgba(160,130,255,.28);
  backdrop-filter:blur(10px) saturate(130%); -webkit-backdrop-filter:blur(10px) saturate(130%);
  box-shadow:0 8px 22px rgba(0,0,0,.45),
             inset 0 1px 0 rgba(255,255,255,.10),
             0 0 16px rgba(124,77,255,.28);                 /* мягкое свечение */
  transition:transform .2s, box-shadow .2s; }
.social-icon:hover{ transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.5),
             inset 0 1px 0 rgba(255,255,255,.14),
             0 0 26px rgba(124,77,255,.55); }
.social-icon svg{ display:block; filter:drop-shadow(0 0 6px currentColor); }
/* бокс одинаковый, цвет несёт только глиф (бренд) */
.social-icon[data-net="telegram"]{ color:#3ec1f3; }
.social-icon[data-net="instagram"]{ color:#ff5fa6; }
.social-icon[data-net="kick"]{ color:#53fc18; }

/* бейдж 18+ — отдельный элемент, НЕ соц.иконка (круг, другой стиль) */
.age-badge{ width:46px; height:46px; display:grid; place-items:center; border-radius:50%;
  font-family:var(--font-display); font-weight:800; font-size:14px; letter-spacing:.5px;
  color:#ffe49a; text-decoration:none;
  background:radial-gradient(circle at 30% 30%, #2a1f55, #120c2c);
  border:2px solid rgba(139,92,246,.5); box-shadow:0 0 18px rgba(124,77,255,.4); }

/* --------------------------------------------------------- КОНТЕНТ ------- */
.content{
  flex:1; min-height:0;
  /* левый текст ~38%, карточки ~60% (главный элемент, смещены вправо) */
  display:grid; grid-template-columns:minmax(320px,0.66fr) 1fr;
  align-items:center; gap:clamp(20px,2.5vw,56px);
  padding:6px 0;
}

/* левый текст */
.hero{ max-width:528px; }

/* ============ ГОТОВЫЕ PNG-АССЕТЫ (авто-обрезка прозрачных полей) ============
   Обёртка клипает картинку строго по её контенту (значения вычислены из PNG):
   --ar = пропорции контента, --iw/--il/--it = масштаб и сдвиг картинки. */
.ui-asset{ position:relative; overflow:hidden; max-width:100%;
  width:var(--w,100%); aspect-ratio:var(--ar); }
.ui-asset img{ position:absolute; display:block; height:auto;
  width:var(--iw); left:var(--il); top:var(--it);
  -webkit-user-drag:none; user-select:none; }

/* левый блок (hero шире -> описание ~+10%, иконки преимуществ ~+18%; заголовок ~прежний) */
.ui-asset--title   { --w:91%;  --ar:3.563; --iw:151.98%; --il:-17.02%; --it:-105.42%; }
.ui-asset--desc    { --w:100%; --ar:3.268; --iw:126.42%; --il:-6.70%;  --it:-69.97%;  margin-top:18px; }
.ui-asset--benefits{ --w:97%;  --ar:2.722; --iw:123.00%; --il:-13.04%; --it:-52.00%;  margin-top:24px; }
/* нижняя строка: плашка 1 слева (край как у hero), плашка соцсетей справа */
.poster-bottom{ display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px,3vw,48px); width:100%; margin-top:1.4vh; }

/* ======================= НОВЫЙ ДИЗАЙН (Unbounded, фиолетовый) ======================= */
/* ---- HERO ---- */
.nx-title{ margin:0; font-family:'Unbounded',sans-serif; font-weight:900;
  font-size:42px; line-height:1.05; text-transform:uppercase; }
.nx-title__white{ display:block; color:#fff; }
.nx-title__grad{ display:block;
  background:linear-gradient(90deg,#2060ff,#5030ff,#9020ff,#cc00ff);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; }
.nx-divider{ display:block; width:56px; height:2px; margin:18px 0; border-radius:2px;
  background:linear-gradient(90deg,#2060ff,#5030ff,#9020ff,#cc00ff); }
.nx-desc{ font-family:'Unbounded',sans-serif; font-weight:400; font-size:11px;
  color:#fff; line-height:2; max-width:380px; margin:0; }
.nx-feats{ list-style:none; margin:34px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px; max-width:340px; }
.nx-feats li{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.nx-feat-ring{ width:72px; height:72px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid rgba(180,80,220,.55);
  box-shadow:0 0 18px rgba(140,60,200,.25);
  background:radial-gradient(circle at 50% 45%, rgba(160,60,220,.18), transparent 70%); }
.nx-feat-ring svg{ width:32px; height:32px; filter:drop-shadow(0 0 6px rgba(200,80,255,.7)); }
.nx-feat-cap{ font-family:'Unbounded',sans-serif; font-weight:400; font-size:10px;
  color:#fff; line-height:1.4; }

/* ---- НИЖНИЕ ПЛАШКИ ---- */
.nx-panel{ height:66px; border-radius:12px; flex:0 1 auto; min-width:0;
  display:flex; align-items:center; gap:12px; padding:0 14px;
  font-family:'Unbounded',sans-serif; position:relative; overflow:hidden; }
.nx-panel--1{ background:linear-gradient(105deg,#0a0520,#130a2e,#1a0835,#120520);
  box-shadow:0 0 0 1.5px rgba(160,60,220,.5); }
.nx-panel--1::before{ content:""; position:absolute; left:10%; right:10%; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,100,255,.5),transparent); }
.nx-panel--2{ background:linear-gradient(105deg,#080418,#120830,#1a0830,#0e0520);
  box-shadow:0 0 0 1.5px rgba(180,60,200,.45); gap:11px; }
.nx-pcell{ display:flex; align-items:center; gap:9px; }
.nx-pi{ width:26px; height:26px; flex:0 0 26px; color:#c79cff;
  filter:drop-shadow(0 0 5px rgba(170,80,230,.45)); }
.nx-ptxt{ display:flex; flex-direction:column; line-height:1.15; }
.nx-ptxt b{ font-weight:600; font-size:12.5px; color:#fff; letter-spacing:.02em; white-space:nowrap; }
.nx-ptxt i{ font-style:normal; font-weight:400; font-size:9px; color:rgba(255,255,255,.7);
  margin-top:3px; white-space:nowrap; }
.nx-ptxt-v{ color:rgba(255,255,255,.7) !important; }
.nx-pdiv{ width:1px; align-self:stretch; margin:14px 0; flex:0 0 1px;
  background:linear-gradient(180deg,transparent,rgba(180,90,230,.6),transparent); }
.nx-age{ font-weight:600; font-size:12px; color:#fff; padding:6px 9px; border-radius:8px;
  border:1px solid rgba(180,80,220,.4); flex:0 0 auto; }
.nx-resp{ font-weight:400; font-size:9.5px; color:#fff;
  letter-spacing:.04em; white-space:nowrap; }
.nx-socials{ display:flex; align-items:center; gap:11px; }
.nx-soc{ display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none; }
.nx-soc-ic{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  transition:transform .18s ease; }
.nx-soc:hover .nx-soc-ic{ transform:translateY(-2px); }
.nx-soc-ic svg{ width:19px; height:19px; }
.nx-soc-ic--tg{ background:#229ED9; }
.nx-soc-ic--ig{ background:radial-gradient(circle at 30% 107%, #fdf497 5%, #fd5949 45%, #d6249f 62%, #285AEB 92%); }
.nx-soc-ic--kick{ background:#53FC18; color:#000; font-weight:900; font-size:17px; }
.nx-soc-cap{ font-family:'Unbounded',sans-serif; font-weight:400; font-size:8.5px;
  color:#fff; }

/* кликабельные зоны поверх иконок footer-ui.png (масштабируются вместе с PNG, % от враппера) */
.footer-ui-wrap{ position:relative; }
.footer-hotspot{ position:absolute; display:block; z-index:5; background:transparent; cursor:pointer; }
.footer-telegram { left:52%; top:18%; width:11%; height:60%; }
.footer-instagram{ left:66%; top:18%; width:11%; height:60%; }
.footer-kick     { left:80%; top:18%; width:11%; height:60%; }
/* строго заданные параметры заголовка (спокойнее и дороже, без glow/stroke) */
.hero__title{ font-family:'Montserrat','Inter',sans-serif;
  font-weight:800; font-size:clamp(48px,5.2vw,84px);
  line-height:0.92; letter-spacing:-0.04em; text-transform:uppercase; }
/* белые строки */
.hero__title .ln{ display:block; white-space:nowrap;
  color:#f4f1e8;
  text-shadow:0 2px 0 rgba(0,0,0,0.35),
              0 8px 24px rgba(0,0,0,0.45); }
/* золотые строки */
.hero__title .ln--gold{
  background:linear-gradient(180deg, #ffe28a 0%, #d89b22 55%, #9f6511 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:0 2px 0 rgba(0,0,0,0.45),
              0 10px 26px rgba(0,0,0,0.55); }
/* больше воздуха: расстояние заголовок -> описание увеличено */
.hero__divider{ color:var(--gold); margin:34px 0; letter-spacing:6px; font-size:12px;
  position:relative; }
.hero__divider::before,.hero__divider::after{ content:""; position:absolute; top:50%;
  width:60px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.hero__divider::before{ left:0; transform:translateX(-70px); }
.hero__divider::after{ left:24px; background:linear-gradient(90deg,var(--gold),transparent); }
.hero__text{ font-family:'Inter',sans-serif; font-weight:400; color:#c6cae1;
  font-size:15.4px; line-height:1.9; max-width:380px; }
.hero__features{ list-style:none; display:flex; gap:26px; margin-top:40px; }
.hero__features li{ width:90px; text-align:center; font-size:11px; color:var(--txt-dim);
  line-height:1.3; }
.feat-ic{ width:54px; height:54px; margin:0 auto 10px; display:grid; place-items:center;
  border-radius:50%; color:var(--gold);
  background:radial-gradient(circle at 30% 25%, #221646, #0d0922);
  border:1px solid rgba(242,193,78,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 0 12px rgba(242,193,78,.12); }

/* ---------------------------------------------------------- СПИРАЛЬ ------ */
.spiral{ position:relative; width:100%; max-width:1000px;
  height:clamp(400px, 58vh, 620px);   /* орбита ниже -> помещается в 100vh */
  margin:0 auto; justify-self:center; }
/* кольца/свечение/ядро спирали сайта скрыты — орбиту даёт фон nebula2 */
.spiral__rings{ display:none !important; }
.spiral__rings--off{ position:absolute; inset:0; display:grid; place-items:center;
  pointer-events:none; transform:perspective(900px) rotateX(8deg); }
/* насыщенное золотое свечение вокруг орбиты (за карточками) */
.spiral__rings::before{ content:""; position:absolute; left:50%; top:50%;
  width:82%; height:58%; transform:translate(-50%,-50%);
  background:
    radial-gradient(closest-side, rgba(245,188,60,.32), transparent 72%),
    radial-gradient(closest-side, rgba(255,210,95,.20), transparent 58%);
  filter:blur(24px); border-radius:50%; }
/* золотое энергетическое ядро в центре орбиты (пульсирует, за центральной картой) */
.spiral__rings::after{ content:""; position:absolute; left:50%; top:50%;
  width:42%; height:42%; transform:translate(-50%,-50%); border-radius:50%;
  background:
    radial-gradient(closest-side, rgba(255,222,130,.50), rgba(245,185,55,.28) 44%, transparent 72%);
  filter:blur(15px); animation:corePulse 4.5s ease-in-out infinite; }
@keyframes corePulse{
  0%,100%{ opacity:.7; transform:translate(-50%,-50%) scale(1); }
  50%    { opacity:1;  transform:translate(-50%,-50%) scale(1.14); }
}
/* ЗОЛОТЫЕ светящиеся орбитальные кольца — насыщенные */
.spiral__rings span{ position:absolute; border-radius:50%;
  border:1.6px solid rgba(245,188,60,.6);
  box-shadow:0 0 20px rgba(245,185,55,.38), inset 0 0 30px rgba(245,190,70,.16); }
.spiral__rings span:nth-child(1){ width:54%; height:40%; transform:rotate(-7deg);
  border:1.8px solid rgba(255,208,90,.9);
  box-shadow:0 0 26px rgba(255,195,60,.7), 0 0 50px rgba(255,185,50,.3), inset 0 0 26px rgba(255,205,85,.28); }
.spiral__rings span:nth-child(2){ width:78%; height:58%; transform:rotate(-7deg);
  border-color:rgba(245,190,60,.7);
  box-shadow:0 0 22px rgba(245,185,55,.5), inset 0 0 30px rgba(245,190,70,.2); }
.spiral__rings span:nth-child(3){ width:100%; height:76%; transform:rotate(-7deg);
  border-color:rgba(242,186,62,.55);
  box-shadow:0 0 22px rgba(245,185,55,.38); }

/* золотые СВЕТЯЩИЕСЯ звёзды вдоль орбиты (создаются в app.js) */
.orbit-dust{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.orbit-dust span{ position:absolute; border-radius:50%;
  background:#fff4c8;
  box-shadow:0 0 8px 1.5px rgba(255,214,100,1), 0 0 18px rgba(255,196,70,.8), 0 0 30px rgba(255,185,55,.45);
  animation-name:starTwinkle; animation-timing-function:ease-in-out;
  animation-iteration-count:infinite; }

/* цветные звёзды внутри кольца орбиты (синие/фиолетовые/розовые, статичные) */
.ring-stars{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.ring-stars span{ position:absolute; border-radius:50%; transform:translate(-50%,-50%); }

.spiral__stage{ position:absolute; inset:0; touch-action:none; cursor:grab; }
.spiral__stage.is-grabbing{ cursor:grabbing; }

/* карточка — премиальное стекло */
.card{
  position:absolute; left:0; top:0;
  width:120px; min-height:144px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:16px 12px;
  border-radius:22px; text-decoration:none; color:var(--txt);
  /* индивидуальные параметры стекла (переопределяются по :nth-child) */
  --goldb:.46;       /* золотой контур */
  --purpc:.30;       /* фиолетовый контур (снаружи) */
  --glow:.22;        /* золотое свечение */
  --pglow:.16;       /* фиолетовое свечение */
  --top:.24;         /* верхняя стеклянная кромка */
  --inner:.07;       /* фиол. преломление у краёв */
  --depth:.26;       /* глубина стекла снизу */
  --blur:18px;       /* толщина стекла (размытие) */
  --cosmic:.10;      /* отражения/преломления внутри */
  /* ПРОЗРАЧНОЕ стекло: фон ~6-8%, без фиолетовых заливок (фон виден сквозь) */
  background:
    linear-gradient(155deg, rgba(255,255,255,.085), rgba(255,255,255,.02) 46%, rgba(255,255,255,.05));
  /* внутренняя кромка стекла (золото) */
  border:1px solid rgba(242,193,78,var(--goldb));
  backdrop-filter:blur(var(--blur)) saturate(125%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(125%);
  /* ДВОЙНОЙ СВЕТЯЩИЙСЯ КОНТУР (золото у края + фиолетовый снаружи) + толщина стекла */
  box-shadow:
    0 0 0 1px rgba(242,193,78,var(--goldb)),          /* золотой контур */
    0 0 0 2.5px rgba(150,95,240,var(--purpc)),        /* фиолетовый контур снаружи */
    0 0 14px rgba(242,193,78,var(--glow)),            /* золотое свечение */
    0 0 24px rgba(140,80,235,var(--pglow)),           /* фиолетовое свечение */
    0 22px 46px rgba(0,0,0,.5),                       /* глубокая тень (объём) */
    0 6px 14px rgba(0,0,0,.32),
    inset 0 1.5px 1px rgba(255,255,255,var(--top)),   /* верхняя стеклянная кромка (толщина) */
    inset 0 0 18px rgba(150,110,235,var(--inner)),    /* фиол. преломление у краёв */
    inset 0 -16px 28px rgba(0,0,0,var(--depth));      /* нижняя глубина стекла */
  will-change:transform, opacity, filter;
  user-select:none; -webkit-user-drag:none;
  isolation:isolate;
}
/* СЛОЙ ОТРАЖЕНИЙ: диагональный глянцевый блик в верхней части + лёгкий космический отблеск */
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:
    /* крупный диагональный верхний блик (как в референсе) */
    linear-gradient(125deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.12) 13%, transparent 33%),
    /* световой ореол в верхнем углу */
    radial-gradient(46% 28% at 22% 2%, rgba(255,255,255,.24), transparent 72%),
    /* преломление/отражение по правому краю */
    linear-gradient(255deg, rgba(170,110,255,var(--cosmic)) 0%, transparent 20%),
    /* мягкий световой перелив */
    radial-gradient(22% 16% at 78% 22%, rgba(150,180,255,var(--cosmic)), transparent 74%);
  mix-blend-mode:screen;
}
/* очень тонкий стеклянный рим (не неон, вдвое слабее) */
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3;
  padding:1px;
  background:linear-gradient(140deg,
    rgba(255,255,255,.32) 0%, rgba(242,193,78,.16) 50%, rgba(255,255,255,.26) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.5;
}
.card__logo{ height:36px; display:grid; place-items:center; position:relative; z-index:4; }
.card__bonus, .card__sub, .card__cta{ position:relative; z-index:4; }
/* логотипы — крупнее, резкие и яркие */
.card__logo img{ max-height:36px; max-width:106px; object-fit:contain;
  -webkit-user-drag:none; filter:drop-shadow(0 2px 5px rgba(0,0,0,.7)) brightness(1.1) contrast(1.05); }
.card__logo-txt{ font-family:var(--font-display); font-weight:700; font-size:16px;
  letter-spacing:.5px; color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.6), 0 0 10px rgba(160,150,255,.35); white-space:nowrap; }
/* БОНУС — главный визуальный элемент: золотой металлик с объёмом */
.card__bonus{ font-family:var(--font-display); font-size:26px; font-weight:800;
  line-height:1; letter-spacing:-.5px;
  background:linear-gradient(180deg,#fff4c2 0%,#ffd86b 30%,#f3bd3d 58%,#a9751f 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(120,80,10,.5))
         drop-shadow(0 2px 5px rgba(0,0,0,.45))
         drop-shadow(0 0 12px rgba(242,193,78,.4)); }
.card__sub{ font-family:var(--font-body); font-size:10px; font-weight:500;
  color:#dde0f2; text-align:center; line-height:1.25; letter-spacing:.3px;
  text-shadow:0 1px 4px rgba(0,0,0,.7); }

/* --- УНИКАЛЬНОСТЬ КАРТОЧЕК ---
   каждая карта получает свой набор: толщина стекла, свечение, фаска, отражения.
   (специфичность совпадает с .card.is-active, но эти правила ВЫШЕ -> флагман выигрывает) */
.card:nth-child(6n+1){ --goldb:.50; --purpc:.34; --glow:.24; --pglow:.18; --top:.26; --inner:.08; --depth:.27; --blur:20px; --cosmic:.11; }
.card:nth-child(6n+2){ --goldb:.42; --purpc:.26; --glow:.18; --pglow:.13; --top:.20; --inner:.05; --depth:.23; --blur:16px; --cosmic:.08; }
.card:nth-child(6n+3){ --goldb:.46; --purpc:.30; --glow:.22; --pglow:.16; --top:.24; --inner:.07; --depth:.26; --blur:18px; --cosmic:.10; }
.card:nth-child(6n+4){ --goldb:.44; --purpc:.28; --glow:.20; --pglow:.14; --top:.22; --inner:.06; --depth:.24; --blur:17px; --cosmic:.09; }
.card:nth-child(6n+5){ --goldb:.52; --purpc:.36; --glow:.26; --pglow:.19; --top:.28; --inner:.09; --depth:.28; --blur:21px; --cosmic:.12; }
.card:nth-child(6n+6){ --goldb:.41; --purpc:.25; --glow:.17; --pglow:.12; --top:.19; --inner:.05; --depth:.22; --blur:16px; --cosmic:.07; }
/* у части карт — чуть сильнее диагональный глянец */
.card:nth-child(3n+1)::before{ background-image:
    linear-gradient(130deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.09) 17%, transparent 38%),
    radial-gradient(60% 32% at 26% 2%, rgba(255,255,255,.20), transparent 72%),
    radial-gradient(24% 16% at 74% 18%, rgba(150,180,255,var(--cosmic)), transparent 74%); }

/* =====================================================================
   ЦЕНТРАЛЬНАЯ КАРТА VAVADA — по эталонному референсу
   - тёмное стекло с видимым космосом
   - ВНЕШНЯЯ светящаяся рамка ЗОЛОТО→ФИОЛЕТ с зазором (::before)
   - тонкая золотая внутренняя кромка
   - диагональный блик сверху-слева
   - красный логотип VAVADA, золотой 3D-бонус, золотая капсула-кнопка
   (базовый .card и остальные карты НЕ затрагиваются — ждём подтверждения)
===================================================================== */
.card.is-active{
  width:160px; min-height:226px; border-radius:26px;     /* портретная пропорция референса */
  padding:18px 15px 16px; gap:7px;
  overflow:visible;
  /* ОСНОВА: тёмное прозрачное стекло + видимый космос + слабый шум-точки */
  background-image:
    radial-gradient(circle at 24% 14%, rgba(255,255,255,.16), transparent 20%),
    radial-gradient(circle at 80% 30%, rgba(150,90,235,.20), transparent 26%),
    radial-gradient(circle at 60% 88%, rgba(120,55,235,.22), transparent 40%),
    radial-gradient(rgba(255,255,255,.09) .6px, transparent .8px),               /* шум-точки */
    linear-gradient(150deg, rgba(20,16,40,.30) 0%, rgba(10,8,24,.5) 46%, rgba(4,3,12,.7) 100%);
  background-size:auto,auto,auto,7px 7px,auto;
  border:1px solid rgba(255,214,122,.55);                /* тонкая внутренняя золотая кромка */
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  /* объём + внутреннее золото/фиолет. свечение + глубина */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 1px 0 0 rgba(255,255,255,.10),
    inset 0 0 42px rgba(120,55,230,.14),
    0 30px 80px rgba(0,0,0,.7);
  cursor:pointer;
}
/* ВНЕШНЯЯ СВЕТЯЩАЯСЯ РАМКА (золото слева/сверху -> фиолет справа), с зазором */
.card.is-active::before{
  content:""; position:absolute; inset:-10px; border-radius:36px; padding:3px;
  background:linear-gradient(115deg,
    #ffd784 0%, #f6ad3e 26%, #cf8a36 46%, #7a3ff0 80%, #b06bff 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  filter:drop-shadow(0 0 9px rgba(255,184,74,.55)) drop-shadow(0 0 16px rgba(150,70,240,.5));
  pointer-events:none; z-index:5; mix-blend-mode:normal;
}
/* ВЕРХНИЙ СТЕКЛЯННЫЙ БЛИК — диагональ сверху-слева */
.card.is-active::after{
  inset:0; padding:0; border-radius:inherit; z-index:3;
  -webkit-mask:none; mask:none;
  background:linear-gradient(118deg,
    rgba(255,255,255,.26) 0%, rgba(255,255,255,.09) 13%, transparent 34%);
  opacity:.6; mix-blend-mode:screen;
}
/* ЛОГОТИП — крупный VAVADA, фирменный красный */
.card.is-active .card__logo{ height:34px; margin-bottom:2px; }
.card.is-active .card__logo img{ max-height:34px; max-width:128px;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.18)) drop-shadow(0 0 18px rgba(255,60,90,.22)); }
.card.is-active .card__logo-txt{ font-size:27px; font-weight:900; letter-spacing:1px;
  background:linear-gradient(180deg,#ff5a73 0%,#ec1f43 55%,#c00f30 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:none; filter:drop-shadow(0 0 14px rgba(255,40,80,.45)); }
/* БОНУС — главный элемент: золотой 3D с фаской и обводкой */
.card.is-active .card__bonus{
  font-size:42px; font-weight:800; line-height:.95;
  background:linear-gradient(180deg,#fff7d2 0%,#ffe388 24%,#f4ba3c 52%,#c9871f 76%,#7c4a12 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  -webkit-text-stroke:.8px rgba(70,38,6,.45);
  filter:drop-shadow(0 1px 0 rgba(60,30,4,.6))
         drop-shadow(0 2px 3px rgba(0,0,0,.5))
         drop-shadow(0 0 16px rgba(255,200,90,.5)); }
/* SUBTITLE — с золотыми ромбиками по бокам */
.card.is-active .card__sub{ font-size:11px; color:rgba(255,255,255,.78);
  letter-spacing:.12em; text-transform:uppercase; text-shadow:0 1px 4px rgba(0,0,0,.7);
  display:flex; align-items:center; gap:8px; }
.card.is-active .card__sub::before,
.card.is-active .card__sub::after{ content:"◆"; font-size:6px; color:rgba(255,200,110,.8); }
/* КНОПКА — золотая капсула, светлый текст, шеврон */
.card.is-active .card__cta{
  margin-top:4px; padding:9px 16px; border-radius:999px;
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,#ffe796 0%,#ffc452 50%,#f0a02e 100%);
  border:1px solid rgba(255,255,255,.5);
  color:#fff;
  font-weight:800; letter-spacing:.3px;
  text-shadow:0 1px 1px rgba(120,70,10,.6);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:0 0 18px rgba(255,193,74,.45),
             inset 0 1px 0 rgba(255,255,255,.6),
             inset 0 -2px 4px rgba(150,90,10,.4); }
.card.is-active .card__cta::after{ content:"›"; font-size:15px; font-weight:900;
  color:#fff; line-height:1; }

/* кнопка "Забрать бонус" — тёмное стекло с золотой светящейся рамкой (как в референсе) */
.card__cta{
  display:none; margin-top:10px; max-width:100%;
  padding:8px 16px; border-radius:11px;
  font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  text-align:center; line-height:1.2;
  text-decoration:none; color:#ffe49a;
  background:linear-gradient(180deg, rgba(50,38,16,.42), rgba(20,16,8,.5));
  border:1px solid rgba(255,215,120,.6);
  backdrop-filter:blur(6px) saturate(140%);
  -webkit-backdrop-filter:blur(6px) saturate(140%);
  box-shadow:0 0 14px rgba(242,193,78,.32), 0 6px 16px rgba(0,0,0,.45),
             inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 12px rgba(242,193,78,.12);
  text-shadow:0 0 8px rgba(242,193,78,.45), 0 1px 1px rgba(0,0,0,.55);
  transition:transform .18s, box-shadow .18s, filter .18s;
}
.card.is-active .card__cta{ display:inline-block; animation:ctaIn .35s ease both; }
.card__cta:hover{ transform:translateY(-1px); filter:brightness(1.1);
  box-shadow:0 0 20px rgba(242,193,78,.6), 0 9px 22px rgba(0,0,0,.45),
             inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 14px rgba(242,193,78,.2); }
.card__cta:active{ transform:translateY(0); }
@keyframes ctaIn{ from{ opacity:0; transform:translateY(6px) scale(.9); }
  to{ opacity:1; transform:none; } }

/* =====================================================================
   PNG-КАРТА (напр. VAVADA) — визуал берётся из готового изображения.
   Снимаем всё CSS-стекло; спираль/масштаб/hover/активная позиция остаются.
===================================================================== */
.card.card--image,
.card.is-active.card--image{
  width:auto; min-height:0; padding:0; gap:0; border:0; border-radius:0;
  background:none; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none; overflow:visible;
}
.card.card--image::before, .card.card--image::after,
.card.is-active.card--image::before, .card.is-active.card--image::after{
  content:none; display:none;
}
/* изображение карты — оригинальный PNG, размер по ВЫСОТЕ (не растягиваем) */
.card--image .card__img{
  display:block; height:174px; width:auto; max-height:174px; object-fit:contain;
  image-rendering:auto; pointer-events:none; user-select:none;
  filter:none;   /* без blur/тени на самой картинке -> чётко */
}
/* hover — лёгкий подъём, как у остальных интерактивных элементов */
.card--image:hover{ filter:brightness(1.05); }

/* ---- HTML-ТЕКСТ ПОВЕРХ PNG-КАРТЫ (значения задаются в config.js -> text) ----
   Слой свёрстан в координатах исходной карты 512x768 и масштабируется
   transform'ом под фактический размер карточки (174px высоты -> scale .22656) */
.card__txt{ position:absolute; left:0; top:0; width:512px; height:768px;
  transform:scale(.22656); transform-origin:0 0;
  pointer-events:none; z-index:3; }
/* плоскость текста наклонена под перспективу карты (правый край уходит назад) */
.card__plane{ position:absolute; inset:0;
  transform:perspective(1300px) rotateY(14deg) rotate(-1.4deg);
  transform-origin:320px 330px;
  transform-style:preserve-3d; }
.card__txt .ct{ position:absolute; left:320px; transform:translate(-50%,-50%);
  font-family:'Montserrat',sans-serif; font-weight:800; line-height:1;
  text-transform:uppercase; white-space:nowrap;
  /* золото как в исходном PNG карты */
  background-image:linear-gradient(180deg,
    #fff3c0 0%, #ffe27a 30%, #ffc83e 52%, #f0a52a 72%, #b9760f 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  /* glow + тёмная подложка через text-shadow — НЕ растеризует текст, остаётся чётким */
  text-shadow:0 0 7px rgba(255,184,64,.5), 0 0 15px rgba(255,150,30,.32),
              0 1px 1px rgba(0,0,0,.7); }
/* мелкие подписи — мягче glow */
.ct-label, .ct-sub{ text-shadow:0 0 5px rgba(255,184,64,.4), 0 1px 1px rgba(0,0,0,.7); }
.ct-label  { top:222px; font-size:32px; letter-spacing:.26em; margin-left:.13em; }
.ct-percent{ top:264px; font-size:80px; }
.ct-sub    { top:316px; font-size:34px; letter-spacing:.08em; }
.ct-extra  { top:408px; font-size:62px; letter-spacing:-.005em; }
/* прозрачная кликабельная зона поверх кнопки «ЗАБРАТЬ» (только на активной карте) */
.card--image .card__cta{ display:none; }
.card.is-active.card--image .card__cta{
  display:block; position:absolute; inset:auto; margin:0; padding:0;
  /* кликабельная зона = КОНТУР видимой передней карты (без glow-ореола и заднего
     телефона, запечённых в PNG). Внутри кадра 512×768 передняя карта ≈ эти доли */
  left:30%; top:9%; width:56%; height:75%;
  background:transparent; border:0; box-shadow:none; cursor:pointer;
  backdrop-filter:none; -webkit-backdrop-filter:none; animation:none;
  font-size:0; border-radius:0;
}
.card.is-active.card--image .card__cta::after{ content:none; }
.card.is-active.card--image .card__cta:hover{ transform:none; filter:none; box-shadow:none; }

/* ------------------------------------------------------ НИЖНЯЯ ПАНЕЛЬ ---- */
.statbar{
  display:flex; flex-wrap:wrap; justify-content:space-around; gap:14px;
  padding:18px 24px; margin-top:6px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(24,16,52,.7), rgba(10,7,26,.7));
  border:1px solid rgba(242,193,78,.22);
  box-shadow:0 12px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}
.stat{ display:inline-flex; align-items:center; gap:12px; font-size:13px;
  font-family:'Inter',sans-serif; font-weight:400; }
.stat__ic{ width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  color:var(--gold);
  background:radial-gradient(circle at 30% 25%, #211543, #0c0820);
  border:1px solid rgba(242,193,78,.3); }

/* ---------------------------------------------------------- ФУТЕР -------- */
.footer{ display:grid; grid-template-columns:auto auto 1fr; align-items:center;
  gap:26px; padding:22px 6px 6px; margin-top:14px; }
.footer__left{ display:inline-flex; align-items:center; gap:10px; }
.footer__age{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  font-weight:800; font-size:13px; color:#fff;
  background:radial-gradient(circle at 30% 30%, #2a1f55, #120c2c);
  border:2px solid rgba(139,92,246,.5); }
.footer__agetxt{ font-size:11px; letter-spacing:2px; color:var(--txt-dim); font-weight:700;
  max-width:90px; line-height:1.3; }
/* иконки в футере используют тот же компонент .social / .social-icon, что и шапка */
.footer__disclaimer{ justify-self:end; text-align:right; font-size:10px; color:#6a6390;
  line-height:1.5; white-space:pre-line; max-width:300px; }

/* ------------------------------------------------------ АДАПТИВ ---------- */
@media (max-width:880px){
  .content{ grid-template-columns:1fr; gap:24px; }
  .hero{ max-width:none; text-align:center; margin:0 auto; }
  .hero__text{ margin:0 auto; }
  .hero__features{ justify-content:center; }
  .hero__divider::before{ display:none; } .hero__divider::after{ display:none; }
  .spiral{ max-width:440px; }
  .footer{ grid-template-columns:1fr 1fr; gap:18px; text-align:center; }
  .footer__disclaimer{ grid-column:1/-1; justify-self:center; text-align:center; }
}
/* ============== МОБАЙЛ + ПЛАНШЕТ (≤900px) ==============
   СИСТЕМНЫЙ адаптив: каркас на flexbox делит экран на 3 зоны (верх/центр/низ),
   орбита-«центр» забирает всё свободное место, размеры карт даёт JS (--mimg) от
   ширины И высоты сцены. Стабильно на 320..900px — без подгонки под один экран.
   Desktop (≥901px) использует двухколоночный hero и НЕ затрагивается. */
@media (max-width:900px){
  /* ---- КАРКАС: постер на весь экран, без скролла, низ с safe-area ---- */
  .poster{ width:100%; max-width:100%; margin:0;
    height:100vh; height:100svh; max-height:100svh;
    padding:6px 8px calc(8px + env(safe-area-inset-bottom,0px));
    display:flex; flex-direction:column; gap:4px; overflow:hidden; }

  /* ---- ВЕРХ: логотип целиком + компактный заголовок + короткое описание ---- */
  .topbar{ flex:0 0 auto; grid-template-columns:1fr; justify-items:center; gap:0; padding:2px 0 0; }
  .brand{ grid-column:1; justify-self:center; margin:0; }
  .topbar__right{ display:none; }                 /* соц-иконки шапки скрыты (есть в футере) */
  .brand__logo{ width:min(64vw,300px); max-width:90vw; }

  .content{ flex:1 1 auto; min-height:0;
    display:flex; flex-direction:column; grid-template-columns:none;
    align-items:stretch; gap:0; padding:0; }
  /* hero-текст ВРЕМЕННО скрыт на мобайле (по запросу). H1 остаётся в DOM для SEO
     через sr-only-приём; место освобождается под орбиту (.spiral flex:1). */
  .hero{ flex:0 0 auto; display:block; width:100%; margin:0; padding:0; }
  .nx-title{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .nx-divider, .nx-desc, .nx-feats{ display:none; }

  /* ---- ЦЕНТР: орбита забирает всё свободное место ---- */
  .spiral{ flex:1 1 auto; min-height:0; width:100%; max-width:100%; height:auto; }
  /* размеры PNG-карт задаёт JS через --mimg (адаптивно от ширины/высоты сцены) */
  .card--image .card__img{ height:calc(var(--mimg,120) * 1px); max-height:calc(var(--mimg,120) * 1px); }
  .card__txt{ transform:scale(calc(var(--mimg,120) / 768)); }

  /* ---- НИЗ: панели всегда внизу, не перекрываются картами ---- */
  .poster-bottom{ flex:0 0 auto; flex-direction:column; gap:7px; margin-top:4px; }
  .nx-panel{ width:100%; height:clamp(46px,7.2vh,58px); padding:0 10px; gap:8px; justify-content:center; }
  .nx-pi{ width:20px; height:20px; flex-basis:20px; }
  .nx-pcell{ gap:7px; }
  .nx-ptxt b{ font-size:clamp(9px,2.7vw,11px); }
  .nx-ptxt i{ display:none; }              /* подписи скрыты на узком экране */
  .nx-panel--2{ gap:9px; }
  .nx-age{ font-size:11px; padding:5px 7px; }
  .nx-resp{ font-size:clamp(7px,2.2vw,9px); }
  .nx-socials{ gap:9px; }
  .nx-soc-ic{ width:28px; height:28px; }
  .nx-soc-ic svg{ width:16px; height:16px; }
  .nx-soc-ic--kick{ font-size:15px; }
  .nx-soc-cap{ font-size:7px; }
}

/* ================================================== HERO: HTML-ТЕКСТ ====== */
/* Этап 1 замены текстовых PNG на живой текст (SEO/скорость/доступность).
   Боксы .ui-asset--title/--desc/--benefits сохраняют прежние --w и --ar,
   поэтому размеры, расположение и адаптив страницы НЕ меняются.
   Размеры шрифтов в cqw — масштабируются вместе с блоком, как PNG. */
.hero{ container-type:inline-size; }

/* --- Заголовок (бывший hero-title.webp) --- */
.hero-h1{ display:flex; flex-direction:column; justify-content:center; align-items:center;
  position:relative; margin:0; text-transform:uppercase;
  font-family:'Montserrat', sans-serif; font-weight:800; line-height:1; }
.hero-h1__ln{ display:block; white-space:nowrap;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; }
.hero-h1__silver{ font-size:12.75cqw; letter-spacing:.005em;
  background-image:linear-gradient(180deg,
    #fffefb 0%, #f1eee4 34%, #cfcaba 50%, #97917f 56%, #f6f3e9 74%, #d9d5c6 100%);
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.5)) drop-shadow(0 9px 16px rgba(0,0,0,.45)); }
.hero-h1__gold{ font-size:9.2cqw; letter-spacing:.05em; margin-top:1.2cqw;
  background-image:linear-gradient(180deg,
    #ffefa8 0%, #ffd34e 36%, #eaa92c 54%, #a06d15 70%, #ffdf7e 100%);
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 8px 14px rgba(0,0,0,.5)); }

/* --- Описание (бывший hero-description.webp) --- */
.hero-p{ display:flex; align-items:center; justify-content:center;
  position:relative; text-align:center;
  font-family:var(--font-body); font-weight:400;
  font-size:3.6cqw; line-height:1.72; color:#f4f1e8;
  padding:0 6.3cqw; text-shadow:0 1px 3px rgba(0,0,0,.6); }
/* тёмное дымчатое «облако» за текстом — как в исходном PNG */
.hero-p::before{ content:""; position:absolute; inset:-12% -2%;
  background:radial-gradient(ellipse 52% 52% at 50% 50%,
    rgba(34,25,11,.92) 0%, rgba(34,25,11,.55) 52%, transparent 76%);
  filter:blur(9px); z-index:-1; border-radius:50%; }

/* --- Преимущества (бывший hero-benefits.webp): иконки-медальоны берём
       спрайтом из того же webp, подписи — живой текст --- */
.hero-feats{ list-style:none; margin:24px 0 0; padding:0 3cqw;
  display:flex; justify-content:space-between; align-items:flex-start; }
.hero-feats li{ flex:1; display:flex; flex-direction:column; align-items:center;
  gap:1cqw; text-align:center;
  font-family:'Montserrat',sans-serif; font-weight:800;
  font-size:2.4cqw; line-height:1.35; }
.feat{ display:block; width:20.1cqw; height:20.1cqw;
  background-image:url("../assets/ui/hero-benefits.webp");
  background-repeat:no-repeat; background-size:128.6cqw auto; }
.feat--1{ background-position:-20.1cqw -25.6cqw; }
.feat--2{ background-position:-57.1cqw -25.2cqw; }
.feat--3{ background-position:-96.1cqw -24.3cqw; }
/* подписи медальонов: две строки в фирменном стиле (серебро + золото) */
.hero-feats .cap{ display:flex; flex-direction:column; align-items:center; }

/* ============================================ ПАНЕЛИ: HTML-ТЕКСТ ========== */
/* Этап 2: текст затёрт с PNG-панелей (stats-bar-clean / footer-ui-clean),
   живой текст позиционируется поверх в % от бокса — масштабируется с панелью. */
.ui-asset--stats, .ui-asset--footer{ container-type:inline-size; }

.stats-txt{ position:absolute; z-index:3; margin:0;
  display:flex; flex-direction:column; justify-content:center;
  font-family:'Montserrat',sans-serif; font-weight:800;
  text-transform:uppercase; }
/* строки панелей в стиле главного заголовка: серебро + золото */
.pl-silver, .pl-gold{ display:block; white-space:nowrap;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.5)) drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
.pl-silver{ background-image:linear-gradient(180deg,
  #fffefb 0%, #f1eee4 34%, #cfcaba 50%, #97917f 56%, #f6f3e9 74%, #d9d5c6 100%); }
.pl-gold{ background-image:linear-gradient(180deg,
  #ffefa8 0%, #ffd34e 36%, #eaa92c 54%, #a06d15 70%, #ffdf7e 100%); }
.stats-txt--bonuses{ left:21.1%; top:30.5%; width:28.5%; height:36.3%;
  align-items:center; text-align:center; }
.stats-txt--bonuses strong{ font-size:2.7cqw; letter-spacing:.01em; line-height:1.05;
  transform:scaleX(.85); transform-origin:center; }
.stats-txt--bonuses span{ font-size:1.6cqw; letter-spacing:.1em; margin-top:.55cqw;
  transform:scaleX(.85); transform-origin:center; }
.stats-txt--verified{ left:63%; top:30.5%; width:34%; height:36.3%;
  font-size:2.7cqw; line-height:1.18; letter-spacing:.02em;
  transform:scaleX(.85); transform-origin:left center; }

.footer-resp{ position:absolute; z-index:3; margin:0;
  left:23%; top:36.5%; width:26.3%; height:35.5%;
  display:flex; flex-direction:column; justify-content:center;
  font-family:'Montserrat',sans-serif; font-weight:800;
  text-transform:uppercase; font-size:2.7cqw; line-height:1.28; letter-spacing:.05em;
  transform:scaleX(.85); transform-origin:left center; }
/* оригинальная цветная иконка Instagram поверх затёртого золотого глифа */
.footer-instagram .ig-ic{ position:absolute; left:45.8%; top:51.8%;
  transform:translate(-50%,-50%); width:40%; aspect-ratio:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CradialGradient id='g' cx='30%25' cy='107%25' r='150%25'%3E%3Cstop offset='5%25' stop-color='%23fdf497'/%3E%3Cstop offset='45%25' stop-color='%23fd5949'/%3E%3Cstop offset='60%25' stop-color='%23d6249f'/%3E%3Cstop offset='90%25' stop-color='%23285AEB'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='24' height='24' rx='5.4' fill='url(%23g)'/%3E%3Crect x='5.4' y='5.4' width='13.2' height='13.2' rx='3.8' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='3.2' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='16.4' cy='7.6' r='1.05' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat; }

/* подписи Telegram/Instagram/Kick — оригинальные, запечены в footer-ui-clean.webp */