/* ========== HERO SECTION ========== */

.hero{padding:clamp(104px,14vw,148px) 0 clamp(44px,6vw,70px);position:relative;z-index:1;overflow:hidden}
.hero::before{content:"";position:absolute;top:0;left:-50%;width:200%;height:100%;background:radial-gradient(ellipse at 30% 0%,rgba(30,123,255,.08),transparent 70%);pointer-events:none;z-index:-1;display:none!important}

.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3vw,34px);align-items:center;min-height:500px}
.hero-grid > :last-child{display:flex;align-items:center;justify-content:center}

/* вырезанное фото на прозрачном фоне: без рамки и плашки, только свечение по контуру */
.hero-img{
  aspect-ratio:auto!important;
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  border-radius:0!important;
  filter:drop-shadow(0 24px 48px rgba(30,123,255,.35))!important;
}

.hero h1{font-weight:700;font-size:clamp(30px,3.4vw,46px);text-transform:uppercase;margin-top:16px;letter-spacing:-1px;line-height:1.05;animation:fadeInDown .8s ease-out}
.hero h1 .g,.hero h1 .w{display:block}
.hero h1 .g{background:linear-gradient(170deg,#f0f7ff 2%,#8fc5ff 44%,#1461ff 98%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 4px rgba(30,123,255,.2))}
.hero h1 .w{color:#fff;text-shadow:0 6px 30px rgba(40,130,255,.5),0 2px 8px rgba(0,0,0,.3)}

.hero .lead{font-size:clamp(16px,1.7vw,19px);max-width:540px;margin-top:24px;animation:slideInRight .8s ease-out .1s both}

.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.cta .btn{animation:fadeInUp .8s ease-out .2s both}
.btn-wa svg{width:20px;height:20px;flex:none;fill:#25D366}
.btn-wa:hover{border-color:rgba(37,211,102,.55);background:rgba(37,211,102,.1)}

.pills{display:flex;gap:14px;flex-wrap:wrap;margin-top:42px}
/* backwards-заполнение: до/во время задержки скрыта, после анимации — обычное видимое состояние.
   hover — через transition, НЕ через animation (иначе замена анимации сбрасывает появление и плитка исчезает) */
.pill{display:flex;align-items:center;gap:13px;background:linear-gradient(180deg,rgba(20,50,120,.5),rgba(8,20,60,.6));border:1px solid rgba(111,196,255,.35);border-radius:14px;padding:12px 18px 12px 12px;transition:all .3s;animation:scaleIn .6s cubic-bezier(.34,1.56,.64,1) backwards}
.pill:nth-child(1){animation-delay:.2s}
.pill:nth-child(2){animation-delay:.35s}
.pill:nth-child(3){animation-delay:.5s}

.pill:hover{background:linear-gradient(180deg,rgba(30,70,150,.6),rgba(12,30,80,.7));border-color:rgba(111,196,255,.6);transform:translateY(-4px)}

.pill .ic,.ben .ic,.adv .ic,.app .ic{display:grid;place-items:center;border-radius:12px;background:linear-gradient(160deg,rgba(58,147,255,.35),rgba(30,90,220,.18));border:1px solid rgba(111,196,255,.4);transition:all .3s}
.pill .ic{width:42px;height:42px;flex:none}
.ic svg{stroke:var(--cyan)}
.pill .ic svg{width:22px;height:22px;transition:transform .3s}
.pill b{font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;color:#fff;text-transform:uppercase;line-height:1.2;letter-spacing:.5px}

.hero .ph{aspect-ratio:1/1;width:100%;animation:heroImageFloat 6s ease-in-out infinite}

@keyframes heroImageFloat{0%,100%{transform:translateY(0px)}50%{transform:translateY(-15px)}}
.hero .ph:hover{animation:heroImageHover .6s ease-out forwards}

@keyframes heroImageHover{from{transform:scale(1)}to{transform:scale(1.03)}}

/* EYEBROW ANIMATION */
.eyebrow::before{animation:eyebrowSlide .8s ease-out .1s both}

@keyframes eyebrowSlide{from{width:0;opacity:0}to{width:26px;opacity:1}}

@media(max-width:1200px){
  .hero-grid{gap:28px}
}

@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:24px;min-height:auto}
  .hero-grid > :last-child{margin-top:24px}
  .hero .ph{max-width:100%;width:100%;height:auto;aspect-ratio:auto;display:block}
}

@media(max-width:620px){
  .hero-grid > :last-child{margin-top:20px}
}