/* ==========================================================================
   HERO — birinchi ekran (sarlavha + CTA + telefon maketi) va afzallik pill'lari
   ========================================================================== */

.hero{padding-top:clamp(120px,16vh,170px);padding-bottom:clamp(56px,8vw,90px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,64px);align-items:center}
.hero h1{font-size:clamp(2.1rem,1.2rem + 3.9vw,3.55rem);font-weight:850;letter-spacing:-.035em;line-height:1.08;margin:14px 0 20px}
.hero-brand{display:inline-flex;align-items:center;gap:10px;font-size:.92rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--glass);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero-brand .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.hero-sub{color:var(--muted);font-size:clamp(1rem,.95rem + .4vw,1.16rem);max-width:540px;margin-bottom:30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.hero-trust{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:.88rem;font-weight:500}
.hero-trust span{display:inline-flex;align-items:center;gap:7px}
.hero-trust .icon{width:15px;height:15px;color:var(--ok);stroke-width:2.4}

.mockwrap{position:relative;display:flex;justify-content:center}

/* ---------- Afzallik pill chizig'i ---------- */
.strip{padding:0 0 clamp(30px,4vw,44px)}
.strip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.strip-pill{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:650;padding:10px 18px;border-radius:999px;
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.strip-pill .icon{width:16px;height:16px;color:var(--violet)}

@media (max-width: 880px){
  .hero-grid{grid-template-columns:1fr}
  .hero .hero-txt{text-align:center}
  .hero-sub{margin-inline:auto}
  .hero-cta,.hero-trust{justify-content:center}
}
@media (max-width: 640px){
  .btn-lg{width:100%;max-width:340px}
}