:root{--text:#fff;--bg:#000;--overlay:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.55) 100%)}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}

.hero{position:relative;height:100svh;width:100%;overflow:hidden;display:grid;place-items:center;background:#000}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:0;background:#000;display:block}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--overlay)}

.hero__center-logo{position:absolute;inset:0;z-index:4;display:grid;place-items:center;pointer-events:none}
.hero__center-logo img{width:clamp(96px,28vmin,360px);height:auto;filter:drop-shadow(0 4px 16px rgba(0,0,0,.35))}

.hero__bgclick{position:absolute;inset:0;z-index:2}

/* Info pill (top-left) */
.hero__info-pill{position:absolute;z-index:3;left:max(16px,3vw);top:max(16px,3vh);width:clamp(220px,42vmin,620px);height:clamp(40px,10vmin,96px);pointer-events:none;opacity:.98}
.hero__info-pill svg{width:100%;height:100%;display:block}

/* --- CTA pill: 'Заказать' + OZON badge --- */
.hero__cta-pill{
  position:absolute; z-index:3;
  left:max(16px,3vw); bottom: var(--bottom-gap);
  width:clamp(220px,42vmin,620px);
  height:clamp(40px,10vmin,96px);
  pointer-events:none; opacity:.98;
}
.hero__cta-pill svg{width:100%;height:100%;display:block}
.hero__cta-text{
  flex:1 1 auto;
  font-weight: 700;
  font-size: clamp(16px, 4.4vmin, 36px);
  line-height: 1;
  color: #141414;
  padding-inline-start: clamp(6px, 1.2vmin, 12px);
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: .2px;
}
.hero__cta-badge{
  border: 1px solid rgba(0,0,0,0.06);
  flex: 0 0 auto;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(6px, 1.2vmin, 10px) clamp(14px, 2.6vmin, 18px);
  border-radius: 9999px;
  background: #ffffff; /* white badge for blue OZON logo */
  max-width: 40%;
}
.hero__cta-badge img{
  height: clamp(16px, 4.2vmin, 36px);
  width: auto; display:block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
  max-height: 100%;
}

@media (max-width: 380px){
  .hero__cta-text{ font-size: clamp(14px, 4vmin, 18px); }
}
.compat-gesture{position:absolute;inset:0;z-index:3;pointer-events:auto;background:transparent}


/* Social button — VK (bottom-right) */
.social{
  position: absolute;
  right: max(16px, 3vw);
  bottom: var(--bottom-gap);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(42px, 10vmin, 64px);
  height: clamp(42px, 10vmin, 64px);
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  text-decoration: none;
  pointer-events: auto; /* clickable */
}
.social img{
  width: 70%;
  height: 70%;
  object-fit: contain;
  display: block;
}
/* Avoid overlapping with CTA pill on small screens */
@media (max-width: 560px){ .social{ right: max(12px, 4vw); bottom: var(--bottom-gap); } }


/* --- Unified bottom baseline for CTA & VK, with safe-area --- */
:root{ --bottom-gap: max(16px, 3vh); }
@supports (padding: max(0px)){
  :root{ --bottom-gap: calc(env(safe-area-inset-bottom, 0px) + max(16px, 3vh)); }
}

@media (max-width: 420px){
  .social{
    width: clamp(36px, 9vmin, 48px);
    height: clamp(36px, 9vmin, 48px);
  }
}


/* Guard against stray OZON <img> centered by .hero grid */
.hero > img[src*="ozon"]{ display:none !important; }
/* Variant A: Keep SVG pill, hide HTML badge entirely */
.hero__cta-badge{ display:none !important; }

/* overlay off */
.hero::before{background:none!important;}