/* ============ первый экран главной: Матрикс 3.0 в разрезе (вариант B, 05.11.2026) ============
   Подключается только на index.html — общий site.css не трогаем.
   Кадр — начало исходного клипа Higgsfield из ролика «Матрикс 3.0» (~/Desktop/Matrix 3.0),
   без надписей, подрезан по матрасу (1380×960 из 1928×1076, смещение 280,100).
   Все 8 слоёв пронумерованы: кружки стоят в процентах от кадра (координаты сняты по цвету
   пикселей), блок .hb-media держит пропорции кадра — номера не съезжают ни на какой ширине.
   Тонкие слои лежат близко, поэтому номера в две колонки: нечётные правее, чётные левее.
   Подписи легенды — по assets/js/layers.js (модель m3). */

.hb{position:relative;display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:28px;align-items:center;
  overflow:hidden;border-radius:30px;padding:46px 44px 40px 64px;color:#23264B;
  background:radial-gradient(ellipse 60% 80% at 74% 42%,#EEE9E6 0%,#E5DEDB 60%,#DDD5D4 100%);
  box-shadow:0 22px 48px rgba(90,70,40,.12)}

/* ---- текст ---- */
.hb-txt{position:relative;z-index:2}
.hb-txt .k{color:#4A50D4;margin:0}
.hb h1{font-size:clamp(34px,4vw,56px);margin:14px 0 18px}
.hb h1 em{font-style:normal;color:#4A50D4}
.hb-lead{font-size:17px;line-height:1.5;color:#4C4F72;margin:0 0 24px;max-width:470px}
.hb-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.hb-cta .btn.ghost,:root[data-theme=dark] .hb-cta .btn.ghost{box-shadow:inset 0 0 0 1.5px #23264B;color:#23264B}
.hb-facts{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0 0 22px;padding:0;font-size:14px;color:#4C4F72}
.hb-facts b{color:#23264B}
.hb-facts a{color:inherit;text-decoration:underline;text-decoration-color:rgba(76,79,114,.35);text-underline-offset:3px}

.hb-offer{display:inline-flex;align-items:center;gap:14px;max-width:100%;background:#181A44;color:#fff;border-radius:16px;
  padding:10px 18px 10px 10px;text-decoration:none;transition:transform .18s cubic-bezier(.22,.61,.24,1),box-shadow .18s}
.hb-offer:hover{color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px rgba(24,26,68,.35)}
.hb-pct{flex:none;background:#D9803F;border-radius:10px;padding:8px 10px;font:700 21px/1 'Unbounded','Unbounded Fallback',Arial,sans-serif}
.hb-offer>span{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:13.5px;line-height:1.35}
.hb-offer>span>i{flex-basis:100%;font-style:normal;color:#C9CCFF}
.hb-offer>span>i i{font-style:normal}
.hb-offer>span>b{font-size:16px}
.hb-offer s{opacity:.55}
.hb-offer small{font-size:12.5px;opacity:.8}

/* ---- кадр с номерами ---- */
.hb-fig{margin:0;position:relative;z-index:1}
.hb-media{position:relative;aspect-ratio:1380/960}
.hb-media img{display:block;width:100%;height:100%;
  /* края кадра растворяются в фон панели: пересечение горизонтального и вертикального градиентов */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 92%,transparent 100%);
          mask-composite:intersect}

.hb-m{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:#4A50D4;font:700 12px/1 'Unbounded','Unbounded Fallback',Arial,sans-serif;
  box-shadow:0 0 0 2px #4A50D4,0 6px 14px rgba(35,38,75,.28);
  opacity:0;transform:scale(.4);animation:hb-pop .45s cubic-bezier(.34,1.56,.64,1) forwards;
  transition:background .18s,color .18s,transform .18s}
.hb-m.m1{left:83.3%;top:14.6%;animation-delay:.30s}
.hb-m.m2{left:71.7%;top:31.7%;animation-delay:.38s}
.hb-m.m3{left:83.3%;top:37%;animation-delay:.46s}
.hb-m.m4{left:71.7%;top:46%;animation-delay:.54s}
.hb-m.m5{left:83.3%;top:49.5%;animation-delay:.62s}
.hb-m.m6{left:71.7%;top:65.4%;animation-delay:.70s}
.hb-m.m7{left:83.3%;top:64.4%;animation-delay:.78s}
.hb-m.m8{left:71.7%;top:77.3%;animation-delay:.86s}
@keyframes hb-pop{to{opacity:1;transform:none}}

/* ---- легенда: две колонки, читается сверху вниз как сам матрас ---- */
.hb-leg{margin:6px 0 0}
.hb-leg-h{margin:0 0 8px 2px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8A8AA6}
.hb-leg ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);
  grid-auto-flow:column;gap:2px 14px}
.hb-leg li{display:grid;grid-template-columns:22px 1fr;column-gap:9px;align-items:start;padding:5px 8px 5px 5px;border-radius:10px;
  cursor:default;outline:none;transition:background .18s}
.hb-leg li i{grid-row:1/3;width:22px;height:22px;margin-top:1px;border-radius:50%;display:grid;place-items:center;font:700 10.5px/1 'Unbounded','Unbounded Fallback',Arial,sans-serif;
  font-style:normal;color:#4A50D4;background:#fff;box-shadow:0 0 0 1.5px #4A50D4;transition:background .18s,color .18s}
.hb-leg b{font-size:13.5px;font-weight:700;line-height:1.25;color:#23264B}
.hb-leg span{font-size:12px;line-height:1.3;color:#6B6E90}

/* связка «строка легенды ↔ номер на кадре»: наведение или фокус подсвечивает обоих */
.hb-leg li:hover,.hb-leg li:focus-visible{background:rgba(255,255,255,.7)}
.hb-leg li:hover i,.hb-leg li:focus-visible i{background:#4A50D4;color:#fff}
.hb:has(.l1:is(:hover,:focus-visible)) .m1,.hb:has(.l2:is(:hover,:focus-visible)) .m2,
.hb:has(.l3:is(:hover,:focus-visible)) .m3,.hb:has(.l4:is(:hover,:focus-visible)) .m4,
.hb:has(.l5:is(:hover,:focus-visible)) .m5,.hb:has(.l6:is(:hover,:focus-visible)) .m6,
.hb:has(.l7:is(:hover,:focus-visible)) .m7,.hb:has(.l8:is(:hover,:focus-visible)) .m8{
  background:#4A50D4;color:#fff;transform:scale(1.25);z-index:2}

/* ---- планшет: легенда компактнее ---- */
@media (max-width:1180px){
  .hb{padding:40px 32px 34px 44px;gap:22px}
  .hb-leg span{display:none}
  .hb-leg li{grid-template-columns:20px 1fr;align-items:center;padding:4px 6px 4px 4px}
  .hb-leg li i{grid-row:auto;width:20px;height:20px;margin:0;font-size:10px}
  .hb-leg b{font-size:12.5px}
}

/* ---- телефон: кадр → легенда → заголовок → кнопка → акция ---- */
@media (max-width:900px){
  .hero-sec{padding-top:12px}
  .hb{grid-template-columns:1fr;gap:0;padding:14px 16px 18px;border-radius:24px}
  .hb-fig{order:-1}
  .hb-media{margin:0 -4px}
  .hb-m{width:21px;height:21px;margin:-10.5px 0 0 -10.5px;font-size:10px;box-shadow:0 0 0 1.5px #4A50D4,0 4px 10px rgba(35,38,75,.25)}
  .hb-leg{margin:4px 0 14px}
  .hb-leg-h{display:none}
  .hb-leg ol{gap:0 6px;grid-template-columns:max-content max-content;justify-content:space-between}
  .hb-leg li{grid-template-columns:18px 1fr;column-gap:6px;align-items:center;padding:3px 2px}
  .hb-leg li i{width:18px;height:18px;font-size:9px}
  .hb-leg b{font-size:11px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
  .hb-txt{padding:0 4px}
  .hb-txt .k,.hb-lead,.hb-facts,.hb-cta .btn.ghost{display:none}
  .hb h1{font-size:clamp(27px,8vw,38px);margin:0 0 14px}
  .hb-cta{margin-bottom:10px}
  .hb-cta .btn{flex:1 1 100%;justify-content:center}
  .hb-offer{display:flex;padding:8px 12px 8px 8px}
  .hb-pct{font-size:16px;padding:7px 8px}
  .hb-offer>span{font-size:11.5px}
  .hb-offer>span>b{font-size:14px}
  .hb-offer small,.hb-offer s{display:none}
}

/* без анимаций по просьбе системы — номера сразу на месте */
@media (prefers-reduced-motion:reduce){
  .hb-m{animation:none;opacity:1;transform:none}
}

/* тёмная тема сайта: панель остаётся светлой «витриной» под кадр, в тон страницы чуть темнее */
:root[data-theme=dark] .hb{background:radial-gradient(ellipse 60% 80% at 74% 42%,#E6E0DD 0%,#D8D0CF 60%,#CCC3C4 100%);
  box-shadow:0 22px 48px rgba(0,0,0,.5)}
:root[data-theme=dark] .hb-media img{filter:none}
:root[data-theme=dark] .hb-txt .k{color:#4A50D4}