/* ============================================================
   ПЕРВЫЙ ЭКРАН ВИТРИНЫ — ЗАДАЁТСЯ ТОЛЬКО ЗДЕСЬ.

   Синий блок в самом верху главной страницы. Сюда входит всё его
   оформление: фон и геометрия, внутренняя рамка .hero .wrap и её колонки,
   заголовок, текст и кнопка, три показателя внизу, правая часть #heroSide
   с мини-карточками товаров (обычными и настроенными в админке), их фото,
   названия, цены и положения, светящиеся пятна и кольца, вид на телефоне и
   на промежуточных ширинах, наведение мышью и появление при загрузке.

   Сведено 2026-08-11 из шести файлов: storefront.v3.css, design-lab.v1.css,
   design-lab-refinements.v1.css (состоял из первого экрана целиком, опустел
   и удалён), design-lab-flagship.v2.css, design-lab-final.v3.css,
   mobile-layout.v2.css.

   Сюда НЕ входит и входить не должно:
     • общий контейнер .wrap — он держит ещё шапку, каталог и подвал;
     • общая кнопка .cta без приставки .hero;
     • карточки товаров .card в сетке — они в card.css;
     • фон и отступы остальных секций главной;
     • JavaScript: он наполняет #heroSide и двигает кольца за мышью
       (storefront.v3.js, функция renderHeroCards).

   ── Что нельзя переставлять местами ──
   1) В .hero сначала background-size, потом background. background —
      сокращённое и сбрасывает размер; в каскаде оно и стояло последним,
      поэтому background-size:180% 180% у покупателя не работал. Поменяете
      местами — фон начнёт растягиваться, чего никогда не было.
   2) В .hero h1 сначала margin-bottom:16px, потом margin:0 0 22px. Здесь то
      же самое: отступ снизу у заголовка равен 22px, а не 16px.
   Расчёт css-who-wins этого не видит: сокращённые и полные свойства он
   считает разными. Проверено вручную, закреплено тестом.

   ── Про анимации ──
   Сами @keyframes остались в storefront.v3.css. Имя анимации глобально,
   на порядок подключения не влияет, а heroBg делят первый экран и полоса
   призыва .cta-strip — забрать её сюда нельзя.

   Правишь первый экран — правь здесь. Что где выигрывает: npm run who-wins .hero
   ============================================================ */
.hero{animation:none !important;background-size:180% 180%;background:linear-gradient(122deg,#071a31 0%,#102e55 62%,#1769e0 150%);border-radius:32px;box-shadow:0 22px 50px rgba(8,26,47,.18);color:#fff;isolation:isolate;margin:28px auto 0;max-width:1224px;overflow:hidden;position:relative;width:calc(100% - 56px)}
.hero .wrap{align-items:center;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(390px,.96fr);max-width:100%;min-height:560px;padding:62px 64px;position:relative;width:1209px;z-index:1}
.hero h1{animation:none !important;font-family:'Unbounded',sans-serif;font-size:clamp(38px, 4.8vw, 64px);font-weight:700;letter-spacing:-.065em;line-height:1.02;margin-bottom:16px;margin:0 0 22px;max-width:630px;opacity:1 !important;text-shadow:none;transform:none !important}
.hero p{animation:none !important;color:rgba(255,255,255,.72);font-size:17px;line-height:1.65;margin-bottom:32px;max-width:560px;opacity:1 !important;transform:none !important}
.hero .cta{align-items:center;animation:none !important;background:#fff;border-radius:14px;box-shadow:none;color:#071a31;display:inline-flex;font-size:16px;font-weight:800;gap:10px;min-height:54px;opacity:1 !important;overflow:hidden;padding:0 24px;position:relative;transform:none !important;transition:transform .2s}
.hero .cta:hover{color:var(--dl-blue);transform:translateY(-2px) !important}
.hero .blob,
.hero .ring{animation:none !important}
.hero .ring{border:2px solid rgba(255,255,255,.15);border-radius:50%;opacity:.22;pointer-events:none;position:absolute;transition:transform .35s ease-out}
.hero .blob{border-radius:50%;filter:blur(110px);opacity:.2;pointer-events:none;position:absolute;will-change:transform}
.hero::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");content:"";inset:0;opacity:.026;pointer-events:none;position:absolute}
.hero .r2{animation-delay:.4s;animation-duration:9s}
.hero .r3{animation-delay:.8s;animation-duration:5.5s}
.hero #heroSide .hcard.is-custom{animation:none !important;padding:10px;transform:none !important;width:124px}
.hero #heroSide .hcard.is-custom .him{height:82px;margin-bottom:6px}
.hero #heroSide .hcard.is-custom .ht{font-size:10.5px;height:30px}
.hero #heroSide .hcard.is-custom .hp{font-size:12px}
.hero #heroSide .hcard.is-custom .hold{display:none}
.hero #heroSide .hcard.is-custom:nth-child(1),
.hero #heroSide .hcard.is-custom:nth-child(5){left:0 !important}
.hero #heroSide .hcard.is-custom:nth-child(2),
.hero #heroSide .hcard.is-custom:nth-child(6){left:25% !important}
.hero #heroSide .hcard.is-custom:nth-child(3),
.hero #heroSide .hcard.is-custom:nth-child(7){left:50% !important}
.hero #heroSide .hcard.is-custom:nth-child(4),
.hero #heroSide .hcard.is-custom:nth-child(8){left:75% !important}
.hero #heroSide .hcard.is-custom:nth-child(-n+4){top:4px !important}
.hero::before{background:repeating-linear-gradient(90deg,transparent 0 70px,rgba(255,255,255,.08) 71px 72px);content:"";inset:0;mask-image:linear-gradient(90deg,#000,transparent 88%);opacity:.28;pointer-events:none;position:absolute;z-index:0}
.hero .wrap > *{position:relative;z-index:1}
.hero .cta::after{background:var(--fl-signal);bottom:0;content:"";height:3px;left:0;position:absolute;right:0;transform:scaleX(0);transform-origin:left;transition:transform var(--fl-base) var(--fl-ease)}
.hero .cta:hover::after{transform:scaleX(1)}
.hero #heroSide .hcard{border-color:rgba(255,255,255,.28);box-shadow:0 18px 42px rgba(0,0,0,.2)}
.hero #heroSide .hcard:hover{transform:translateY(-3px) !important}
#heroSide .hcard.is-custom{animation-name:hFloatC;border:1.5px solid rgba(18,40,61,.10);bottom:auto;left:var(--hc-x,2%);right:auto;top:var(--hc-y,24px);z-index:1}
#heroSide .hcard.is-custom:hover{z-index:5}
.hcard{animation:hFloat1 5.5s ease-in-out infinite;animation-duration:9s;background:#fff;border:1px solid rgba(8,26,47,.08);border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.26);cursor:pointer;padding:13px;position:absolute;transition:box-shadow .25s;width:174px;z-index:1}
.hcard:hover{box-shadow:0 30px 60px rgba(0,0,0,.4);z-index:3}
.hcard .him{align-items:center;display:flex;font-size:52px;height:112px;justify-content:center;margin-bottom:8px}
.hcard .him img{max-height:100%;max-width:100%;object-fit:contain}
.hcard .ht{color:#12283D;font-size:12.5px;font-weight:700;height:31px;line-height:1.3;margin-bottom:5px;overflow:hidden}
.hcard .hp{color:#0e59be;font-family:'Manrope',sans-serif;font-size:14px;font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.2px;overflow:hidden;white-space:nowrap}
.hcard .hold{color:#5B7288;font-family:'Manrope',sans-serif;font-size:11.5px;margin-left:5px;text-decoration:line-through}
.hcard:nth-child(1){animation-delay:0s;animation-name:hFloat1;left:2%;top:24px}
.hcard:nth-child(2){animation-delay:1.4s;animation-name:hFloat2;right:4%;top:-6px}
.hcard:nth-child(3){animation-delay:2.6s;animation-name:hFloat3;bottom:-8px;left:33%;z-index:2}
.hero-side{min-height:350px;min-width:0;position:relative;transition:transform .35s ease-out}
.hero-stats{border-color:rgba(255,255,255,.16) !important;display:flex;flex-wrap:wrap;gap:30px;margin-top:28px}
.hero-stat b{display:block;font-family:'Unbounded',sans-serif;font-size:21px;letter-spacing:-.3px}
.hero-stat span{color:#CFE9FF;font-size:12.5px}
.plus7{color:rgba(255,255,255,.16);font-family:'Unbounded',sans-serif;font-size:clamp(120px,20vw,240px);font-weight:900;line-height:.9;text-align:center;user-select:none}
.blob1{animation:blobDrift 19s ease-in-out infinite alternate;background:rgba(240,53,60,.5);height:440px;left:-130px;top:-150px;width:440px}
.blob2{animation:blobDrift 24s ease-in-out infinite alternate-reverse;background:rgba(63,180,255,.55);bottom:-170px;height:380px;right:16%;width:380px}
.blob3{animation:blobDrift 28s ease-in-out infinite alternate;background:rgba(255,255,255,.18);height:260px;left:38%;top:-90px;width:260px}
.r1{height:520px;right:-120px;top:-180px;width:520px}
.r2{height:340px;right:-30px;top:-90px;width:340px}
.r3{height:180px;right:50px;top:-10px;width:180px}
@media(min-width:681px){
  .hero #heroSide .hcard.is-custom:nth-child(n+5){top:178px !important}
}
@media(min-width:841px) and (max-width:1040px){
  .hero .wrap{grid-template-columns:minmax(0,1fr) 380px}
}
@media(min-width:681px) and (max-width:1040px){
  .hero{width:calc(100% - 36px)}
  .hero h1{font-size:clamp(34px, 5vw, 52px)}
}
@media(max-width:1040px){
  .hero .wrap{padding-inline:38px}
}
@media(min-width:681px) and (max-width:840px){
  .hero{border-radius:26px;margin-top:18px}
  .hero .wrap{padding:46px 30px}
  .hero-side{min-height:330px;transform:scale(.87);transform-origin:center}
}
@media(max-width:840px){
  .hero .wrap{grid-template-columns:1fr 310px}
}
@media(max-width:680px){
  .hero{border-radius:22px;margin:10px auto 0;margin-top:12px;width:calc(100% - 20px)}
  .hero .wrap{display:block;min-height:0;padding:36px 19px 34px}
  .hero h1{font-size:clamp(28px, 8.6vw, 38px);line-height:1.08;max-width:none}
  .hero p{font-size:15px;margin-bottom:24px;max-width:none}
  .hero .cta{display:flex;justify-content:center;min-height:50px;width:100%}
  .hero .ring{display:none}
  .hero #heroSide .hcard.is-custom{width:118px}
  .hero #heroSide .hcard.is-custom:nth-child(n+5){top:170px !important}
  .hcard:nth-child(1){left:-2%}
  .hcard:nth-child(2){right:-3%}
  .hcard:nth-child(3){left:31%}
  .hero-side,
  .plus7{display:none !important}
  .hero-side{bottom:-24px;left:12px;min-height:260px;position:absolute;right:12px;transform:scale(.72);transform-origin:center bottom}
  .hero-stats{display:grid;gap:16px 12px;grid-template-columns:repeat(2, minmax(0, 1fr));margin-top:26px;row-gap:18px}
  .hero-stat:last-child{grid-column:1 / -1}
}
@media(min-width:681px) and (max-width:960px){
  .hero-side{display:none}
  .plus7{display:none}
}