/* ============================================================
   styles.css — Taskin sayti uchun barcha stillar
   Tarkib:
     1.  CSS o'zgaruvchilar (ranglar, radiuslar, soyalar)
     2.  Reset va asosiy stillar
     3.  Tugmalar
     4.  Header va navigatsiya
     5.  Hero bo'limi
     6.  Trust bar (ishonch paneli)
     7.  Bo'limlar uchun umumiy stillar
     8.  Xizmatlar kartasi
     9.  Nima uchun biz (Why) bo'limi
     10. Qadamlar (Steps) bo'limi
     11. Buyurtma bo'limi va forma
     12. Footer
     13. Floating Telegram tugmasi
     14. Toast xabari
     15. Scroll reveal animatsiyasi
     16. Responsive (mobil va planshet)
     17. Before/After slayder
     18. Gallery (video va rasmlar)
============================================================ */


/* ===== 1. CSS o'zgaruvchilar =====
   Barcha ranglar, radiuslar va soyalar shu yerda saqlanadi.
   O'zgartirish kerak bo'lsa faqat shu yerda o'zgartirish kifoya. */
:root {
  /* Asosiy ranglar */
  --navy:      #1d2f87; /* to'q ko'k — sarlavhalar, logo */
  --navy-dark: #16236a; /* hover holati uchun to'qroq ko'k */
  --teal:      #1799a6; /* moviy-yashil — aksent rang */
  --teal-dark: #127e8a; /* teal hover holati */
  --gold:      #f6b40f; /* sariq — telefon tugmasi */
  --ink:       #1b2540; /* asosiy matn rangi */
  --muted:     #5d6b85; /* ikkinchi darajali matn */
  --bg:        #ffffff; /* sahifa foni */
  --bg-soft:   #f4f6fb; /* yumshaq kulrang fon */
  --line:      #e4e8f3; /* chegara chiziqlari */

  /* Gradient — tugmalar va ikonalar uchun */
  --grad: linear-gradient(135deg, #1d2f87 0%, #1f6f9e 55%, #1799a6 100%);

  /* Soyalar */
  --shadow:    0 18px 50px -20px rgba(20, 35, 90, .35);
  --shadow-sm: 0 8px 24px -12px rgba(20, 35, 90, .25);

  /* Burchak radiuslari */
  --r:    18px; /* katta elementlar uchun */
  --r-sm: 12px; /* kichik elementlar uchun */
}


/* ===== 2. Reset va asosiy stillar ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; } /* href="#section" bosilganda silliq siljish */

body {
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased; /* macOS va iOS'da shrift silliqroq ko'rinadi */
}

/* Kontent kengligi: max 1180px, kichik ekranda 92% */
.container { width: min(1180px, 92%); margin: 0 auto; }

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }


/* ===== 3. Tugmalar =====
   .btn — asosiy klass
   .btn--primary — gradient rangli asosiy tugma
   .btn--ghost — shaffof chegara bilan ikkinchi darajali tugma
   .btn--lg — katta o'lcham
   .btn--block — to'liq kenglik */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-weight: 700; font-size: 14px; line-height: 1;
  padding: 11px 20px; border-radius: 999px; border: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  font-family: inherit;
}
.btn--primary { background: var(--grad); color: #fff; box-shadow: 0 10px 24px -8px rgba(10, 168, 156, .6); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -8px rgba(10, 168, 156, .7); }
.btn--ghost { background: rgba(255,255,255,.7); color: var(--teal-dark); border: 1.5px solid var(--line); }
.btn--ghost:hover { background: #fff; transform: translateY(-2px); }
.btn--lg { padding: 13px 24px; font-size: 15px; }
.btn--block { width: 100%; }


/* ===== 4. Header va navigatsiya =====
   sticky — scroll qilinganda tepada qoladi
   backdrop-filter — orqa fon xiralashadi (zamonaviy shisha effekti) */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 58px; gap: 16px; }

/* Logo */
.logo { display: flex; align-items: center; gap: 9px; font-weight: 800; }
.logo__mark { width: 36px; height: 36px; flex-shrink: 0; }
.logo__mark img { width: 100%; height: 100%; }
.logo__text { display: flex; flex-direction: column; line-height: 1.05; font-size: 17px; color: var(--navy); letter-spacing: .02em; }
.logo__text small { font-size: 8.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--teal); }
.logo--light .logo__text { color: #fff; }

/* Navigatsiya havolalari — hover'da pastda chiziq paydo bo'ladi */
.nav { display: flex; gap: 28px; }
.nav__link { font-weight: 600; font-size: 15px; color: var(--ink); position: relative; }
.nav__link::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--teal); transition: width .25s; }
.nav__link:hover { color: var(--teal); }
.nav__link:hover::after { width: 100%; }

/* Header o'ng tomoni: telefon + buyurtma tugmasi */
.header__actions { display: flex; align-items: center; gap: 16px; }
.header__phone { display: flex; align-items: center; gap: 7px; font-weight: 700; color: var(--navy); font-size: 15px; white-space: nowrap; }
.header__phone:hover { color: var(--teal); }

/* Til almashtirish tugmasi */
.lang-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #dde1e8;
  border-radius: 999px;
  padding: 3px;
  cursor: pointer;
  user-select: none;
  border: none;
  font-family: inherit;
}
.lang-toggle__thumb {
  position: absolute;
  top: 3px; left: 3px; bottom: 3px;
  width: calc(50% - 3px);
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 5px rgba(0,0,0,.18);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.lang-toggle[data-active="ru"] .lang-toggle__thumb {
  transform: translateX(100%);
}
.lang-toggle__opt {
  position: relative;
  z-index: 1;
  padding: 5px 13px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  transition: color .22s;
  min-width: 34px;
  text-align: center;
  cursor: pointer;
  border-radius: 999px;
}
.lang-toggle__opt.active { color: var(--navy); }

/* Burger (hamburger) — faqat mobilda ko'rinadi */
.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.burger span { width: 24px; height: 2.5px; background: var(--navy); border-radius: 2px; transition: .3s; }


/* ===== 5. Hero bo'limi =====
   Sahifaning birinchi ko'rinadigan qismi.
   Ikkita radial gradient yashil nur effektini beradi. */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(56, 214, 160, .18), transparent 60%),
    radial-gradient(700px 500px at 5% 110%, rgba(10, 168, 156, .14), transparent 55%),
    var(--bg-soft);
  padding: 32px 0 40px;
}
.hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__content { max-width: 720px; }

/* Yashil nuqtali "Toshkent · Samarqand" badge */
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font-size: 13.5px; font-weight: 600; color: var(--teal-dark);
  box-shadow: var(--shadow-sm);
}
.hero__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #2bd49a; box-shadow: 0 0 0 4px rgba(43,212,154,.25); }

/* clamp() — kichik ekranda kichikroq, katta ekranda kattaroq bo'ladi */
.hero__title { font-size: clamp(24px, 3.5vw, 38px); line-height: 1.1; font-weight: 800; color: var(--navy); margin: 12px 0 10px; letter-spacing: -.02em; }
/* Gradient rangli matn — "yangidek" so'zi uchun */
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__text { font-size: 15px; color: var(--muted); max-width: 520px; margin: 0 auto; }

.hero__actions { display: flex; gap: 10px; margin: 18px 0 20px; flex-wrap: wrap; justify-content: center; }

/* Statistika: 30 000 m², 1 soat, 14 000 so'm */
.hero__stats { display: flex; gap: 28px; justify-content: center; }
.stat { display: flex; flex-direction: column; }
.stat b { font-size: 20px; font-weight: 800; color: var(--navy); }
.stat span { font-size: 12.5px; color: var(--muted); }

/* Tez hisoblash kartasi (hero ichidagi kichik forma) */
.hero__card { display: flex; justify-content: center; }
.quick {
  width: 100%; max-width: 370px; background: #fff; border-radius: 20px;
  padding: 24px; box-shadow: var(--shadow); border: 1px solid var(--line);
}
.quick__title { font-size: 19px; color: var(--navy); }
.quick__sub { font-size: 13.5px; color: var(--muted); margin: 4px 0 16px; }
.quick__field { margin-bottom: 13px; }
.quick__field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.quick__field input, .quick__field select {
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font-family: inherit; font-size: 15px; color: var(--ink); background: var(--bg-soft); transition: border .2s;
}
.quick__field input:focus, .quick__field select:focus { outline: none; border-color: var(--teal); background: #fff; }
.quick__result {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-soft); border-radius: var(--r-sm); padding: 14px 16px; margin: 4px 0 6px;
}
.quick__result span { font-size: 14px; color: var(--muted); font-weight: 600; }
.quick__result b { font-size: 22px; color: var(--teal-dark); font-weight: 800; }
.quick__note { font-size: 12.5px; color: var(--muted); text-align: center; margin: 10px 0 16px; }
.quick__note b { color: var(--teal); }


/* ===== 6. Trust bar =====
   To'q ko'k fonda 4 ta ishonch belgisi:
   Turk texnologiyasi | Bepul olib ketish | Bolalar uchun xavfsiz | Kafolat */
.trustbar { background: var(--navy); }
.trustbar__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; padding: 12px 0; }
.trust { color: #cfe8e6; font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 7px; }
.trust span { font-size: 16px; } /* emoji */


/* ===== 7. Bo'limlar uchun umumiy stillar =====
   Har bir <section class="section"> uchun vertikal bo'shliq.
   .section__head — bo'lim sarlavhasi (kicker + title + lead matn) */
.section { padding: 40px 0; }
.section--alt { background: var(--bg-soft); } /* alternativ fon rangi */
.section__head { text-align: center; max-width: 580px; margin: 0 auto 24px; }

/* Kichik yuqori yozuv: "XIZMATLAR", "ISHLARIMIZ" */
.kicker { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin-bottom: 7px; }
.kicker--light { color: #7fe9d6; } /* to'q fonda ochibroq kicker */

.section__title { font-size: clamp(22px, 2.8vw, 28px); font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.section__lead { font-size: 14px; color: var(--muted); margin-top: 8px; }


/* ===== 8. Xizmatlar kartasi =====
   3 ustunli grid. Har bir .svc kartasi:
     - ikona (svc__icon)
     - matn qismi (svc__body): sarlavha + tavsif
     - pastki qism (svc__footer): narx + buyurtma tugmasi
   Hover'da karta ko'tariladi va soya paydo bo'ladi. */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.svc {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 16px 16px; transition: transform .22s, box-shadow .22s, border-color .22s;
  display: flex; flex-direction: column; gap: 10px;
}
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.svc__body { flex: 1; } /* matn qismi bo'sh joyni to'ldiradi, footer pastda qoladi */
.svc__list {
  margin-top: 6px; padding-left: 14px; display: flex; flex-direction: column; gap: 3px;
}
.svc__list li { font-size: 12px; color: var(--muted); }

/* Narx va tugma bir qatorda */
.svc__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding-top: 8px; border-top: 1px solid var(--line);
}
.svc__price { display: flex; flex-direction: column; gap: 1px; }
.svc__price-val { font-size: 13px; font-weight: 700; color: var(--navy); }
.svc__price-val small { font-size: 10px; font-weight: 500; color: var(--muted); }
.svc__price-note { font-size: 10px; color: var(--muted); }
.svc__btn { font-size: 12px; padding: 6px 12px; white-space: nowrap; }

/* Ikona — gradient fon, hover'da to'liq gradient bo'ladi */
.svc__icon {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(29,47,135,.08), rgba(23,153,166,.12));
  color: var(--teal); margin-bottom: 8px;
}
.svc__icon svg { width: 20px; height: 20px; }
.svc:hover .svc__icon { background: var(--grad); color: #fff; }
.svc h3 { font-size: 15px; color: var(--navy); margin-bottom: 4px; }
.svc p { font-size: 13px; color: var(--muted); }
.svc:hover .svc__footer { border-top-color: var(--line); }


/* ===== 9. Otzivlar (Reviews) bo'limi ===== */
.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.review {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review__top { display: flex; align-items: center; gap: 10px; }
.review__meta { flex: 1; min-width: 0; }
.review__stars { color: #f6b40f; font-size: 16px; letter-spacing: 2px; }
.review__text { font-size: 14px; color: var(--muted); line-height: 1.6; flex: 1; }
.review__name { font-size: 13px; font-weight: 700; color: var(--navy); }
.review__date { font-size: 11px; color: var(--muted); margin-top: 1px; }
.review__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 14px;
}
.review__badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 20px; letter-spacing: .3px; flex-shrink: 0;
}
.review__badge--tg { background: #e3f2fd; color: #1565c0; }
.review__badge--ig { background: #fce4ec; color: #ad1457; }

@media (max-width: 980px) { .reviews { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .reviews { grid-template-columns: 1fr; } }

/* ===== 11. Nima uchun biz (Why) bo'limi =====
   4 ustunli kartalar: har birida raqam + sarlavha + tavsif */
.why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.why__item { background: #fff; border-radius: var(--r-sm); padding: 16px 14px; border: 1px solid var(--line); }
.why__num { font-size: 22px; font-weight: 800; color: var(--teal); opacity: .35; margin-bottom: 6px; }
.why__item h3 { font-size: 15px; color: var(--navy); margin-bottom: 4px; }
.why__item p { font-size: 13px; color: var(--muted); }


/* ===== 10. Qadamlar (Steps) bo'limi =====
   Gorizontal tartibda: 1 → 2 → 3 → 4
   step__arrow o'qlar orqada yashirinadi mobilda */
.steps { display: flex; align-items: stretch; justify-content: center; gap: 8px; flex-wrap: wrap; }
.step {
  flex: 1; min-width: 120px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 14px 12px; text-align: center;
}
/* Raqamli doira */
.step__n {
  width: 36px; height: 36px; border-radius: 50%; background: var(--grad); color: #fff;
  font-weight: 800; font-size: 15px; display: grid; place-items: center; margin: 0 auto 10px;
  box-shadow: 0 8px 16px -8px rgba(10,168,156,.7);
}
.step h4 { font-size: 14px; color: var(--navy); margin-bottom: 4px; }
.step p { font-size: 12.5px; color: var(--muted); }
.step__arrow { display: flex; align-items: center; color: var(--teal); font-size: 22px; font-weight: 700; }


/* ===== 11. Buyurtma bo'limi va forma =====
   To'q ko'k fonda chap tomonda aloqa ma'lumotlari,
   o'ng tomonda oq rangdagi buyurtma formasi. */
.section--order { background: var(--navy); position: relative; overflow: hidden; }
/* Yuqori o'ng burchakda yashil yorug'lik effekti */
.section--order::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(700px 400px at 90% 0%, rgba(56,214,160,.18), transparent 60%);
}
.order { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; position: relative; align-items: start; }
.order__title { font-size: clamp(22px, 2.8vw, 28px); color: #fff; font-weight: 800; margin-bottom: 12px; letter-spacing: -.02em; }
.order__text { color: #b9cdd2; font-size: 14px; max-width: 380px; margin-bottom: 20px; }
.order__links { display: flex; flex-direction: column; gap: 8px; }

/* Aloqa kanallari: Telegram, Instagram, Telefon */
.ochan {
  display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-sm); padding: 11px 14px;
  color: #fff; font-weight: 600; font-size: 14px; transition: .2s;
}
.ochan span { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.ochan--wa span   { background: #25d366; }                                                  /* WhatsApp yashili */
.ochan--tg span   { background: #2aabee; }                                                  /* Telegram ko'ki */
.ochan--ig span   { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#bc1888); }  /* Instagram gradient */
.ochan--call span { background: var(--gold); color: #5a3d00; }                              /* Telefon sariq */
.ochan:hover { background: rgba(255,255,255,.12); transform: translateX(4px); }

/* Buyurtma formasi — oq karta */
.orderform { background: #fff; border-radius: 16px; padding: 22px; box-shadow: var(--shadow); }
.orderform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.orderform label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.orderform input, .orderform select, .orderform textarea {
  width: 100%; margin-top: 5px; padding: 10px 12px; border: 1.5px solid var(--line);
  border-radius: var(--r-sm); font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--bg-soft); transition: border .2s; resize: vertical;
}
.orderform input:focus, .orderform select:focus, .orderform textarea:focus { outline: none; border-color: var(--teal); background: #fff; }
.orderform__hint { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 12px; }


/* ===== 12. Footer ===== */
.footer { background: #0a1c28; color: #c3d4d8; padding: 44px 0 0; }
.footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 36px; padding-bottom: 32px; }
.footer__brand p { font-size: 14.5px; color: #91a8ae; max-width: 320px; margin: 16px 0 18px; }
.footer__col h4 { color: #fff; font-size: 16px; margin-bottom: 16px; }
.footer__link { display: block; font-size: 14.5px; color: #a9bdc2; margin-bottom: 12px; }
.footer__link:hover { color: #fff; }
a.footer__link:hover { color: var(--teal); }
.socials { display: flex; gap: 10px; }
.socials a {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: #fff; font-weight: 700; font-size: 13px; transition: .2s;
}
.socials a:hover { background: var(--teal); transform: translateY(-3px); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; font-size: 13.5px; color: #7c9298; text-align: center; }


/* ===== 13. Floating Telegram tugmasi =====
   Pastki o'ng burchakda doim ko'rinadigan Telegram tugmasi.
   pulse animatsiyasi e'tiborni tortadi. */
.fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 60px; height: 60px; border-radius: 50%; background: #2aabee; color: #fff;
  display: grid; place-items: center; box-shadow: 0 12px 28px -8px rgba(42,171,238,.7);
  animation: pulse 2.4s infinite;
}
.fab:hover { transform: scale(1.08); }
@keyframes pulse {
  0%   { box-shadow: 0 12px 28px -8px rgba(42,171,238,.7), 0 0 0 0    rgba(42,171,238,.5); }
  70%  { box-shadow: 0 12px 28px -8px rgba(42,171,238,.7), 0 0 0 16px rgba(42,171,238,0); }
  100% { box-shadow: 0 12px 28px -8px rgba(42,171,238,.7), 0 0 0 0    rgba(42,171,238,0); }
}


/* ===== 14. Toast xabari =====
   Ekran pastida paydo bo'ladigan xabar oynasi.
   .show klassi qo'shilganda translateY(0)'ga siljib chiqadi. */
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(120%);
  background: var(--navy); color: #fff; padding: 14px 22px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; box-shadow: var(--shadow); z-index: 100;
  transition: transform .35s cubic-bezier(.2,.8,.2,1); max-width: 90%; text-align: center;
}
.toast.show { transform: translateX(-50%) translateY(0); }


/* ===== 15. Scroll reveal animatsiyasi =====
   Elementlarga .reveal klassi qo'shiladi — ko'rinmas va pastda turadi.
   IntersectionObserver .in klassini qo'shganda chiqib keladi. */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }


/* ===== 16. Responsive — planshet va mobil =====
   980px: 2 ustun (xizmatlar, why), buyurtma bo'limi bir ustun
   900px: mobil menyu (burger) yoqiladi, navigatsiya panel yashirinadi
   680px: hamma narsa bir ustun, kichik ekran uchun to'liq moslashgan */

/* Planshet (≤980px) */
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero__card { justify-content: flex-start; }
  .quick { max-width: 100%; }
  .services { grid-template-columns: repeat(2, 1fr); } /* 3 → 2 ustun */
  .why { grid-template-columns: repeat(2, 1fr); }
  .order { grid-template-columns: 1fr; gap: 32px; }   /* chapma-o'ng → tepa-pastga */
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .step__arrow { display: none; } /* o'qlar kichik ekranda sig'maydi */
  .step { min-width: calc(50% - 8px); }
}

/* Mobil menyu (≤900px) */
@media (max-width: 900px) {
  /* Nav paneli ekranning tepasidan tushadi */
  .nav {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 8px 0;
    transform: translateY(-130%); transition: transform .3s; box-shadow: var(--shadow);
  }
  .nav.open { transform: translateY(0); } /* burger bosilganda ochiladi */
  .nav__link { padding: 14px 24px; }
  .nav__link::after { display: none; }
  .burger { display: flex; }    /* burger ko'rinadi */
  .header__cta { display: none; } /* "Buyurtma berish" tugmasi yashirinadi */
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

/* Kichik mobil (≤680px) */
@media (max-width: 680px) {
  .header__phone span { display: none; } /* telefon raqami matni yashirinadi, faqat ikona qoladi */
  .services { grid-template-columns: 1fr; } /* 2 → 1 ustun */
  .why { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; gap: 28px; }
  .hero__stats { gap: 22px; }
  .stat b { font-size: 22px; }
  .section { padding: 60px 0; }
  .orderform__row { grid-template-columns: 1fr; } /* forma ikki ustundan bir ustunga */
  .gallery { grid-template-columns: 1fr; }
}


/* ===== 17. Before/After slayder =====
   .compare — umumiy wrapper, clip-path bilan ishlaydi
   .compare__img--before — clip-path: inset() orqali kesiladi
   .compare__handle — vertikal chiziq + aylana tugma
   Harakatni JS boshqaradi (script.js dagi setPos funksiyasi) */

/* Gallery ichidagi compare elementi */
.gallery__item--compare { aspect-ratio: 1/1; }
.gallery__item--compare .compare { width: 100%; height: 100%; border-radius: var(--r-sm); }

.compare {
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: col-resize; /* chapdan o'ngga tortish kursorini ko'rsatadi */
  user-select: none;
  -webkit-user-select: none;
  width: 100%;
  height: 100%;
}

/* Ikkala rasm ham bir-birining ustiga yotadi */
.compare__img { position: absolute; inset: 0; }
.compare__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; /* rasm drag'ini bloklaydi */
}

/* "Oldin" rasmining o'ng tomoni JS tomonidan dinamik kesiladi */
.compare__img--before { clip-path: inset(0 50% 0 0); }

/* "Oldin" / "Keyin" yorliqlari */
.compare__lbl {
  position: absolute; bottom: 14px; padding: 4px 12px;
  border-radius: 20px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  pointer-events: none;
}
.compare__lbl--b { left: 14px; background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(4px); }
.compare__lbl--a { right: 14px; background: var(--teal); color: #fff; }

/* Vertikal chiziq + aylana tugma */
.compare__handle {
  position: absolute; inset: 0 auto 0 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none; /* JS pointer eventlari elementning o'zida ishlaydi */
}
.compare__line { width: 2px; flex: 1; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.4); }
.compare__knob {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 16px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
}
.compare__knob svg { width: 16px; height: 16px; color: var(--navy); flex-shrink: 0; }

@media (max-width: 680px) {
  .compares { grid-template-columns: 1fr; }
}


/* ===== 18. Gallery (video va rasmlar) =====
   3 ustunli grid: 8 ta video + 1 ta before/after slayder.
   .gallery__item--vid — qora fon video karta
   .vid-sound — ovoz tugmasi (CSS SVG icon orqali ishlaydi)
     - default (muted): X belgili speaker ikona
     - data-on atributi bor bo'lsa: to'lqinli speaker ikona */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.gallery__item {
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--bg-soft); aspect-ratio: 1/1;
}

/* Rasm elementlari (agar ishlatilsa) */
.gallery__item--img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.gallery__item--img:hover img { transform: scale(1.05); }
.gallery__item--video iframe { width: 100%; height: 100%; display: block; border: none; }

/* Video karta */
.gallery__item--vid {
  background: #000; border-radius: var(--r-sm);
  overflow: hidden; aspect-ratio: 1/1; position: relative;
}
.gallery__item--vid video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Xizmat nomi yorlig'i — video pastki chap burchagida */
.vid-label {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  pointer-events: none;
  letter-spacing: .02em;
}

/* Ovoz tugmasi — pastki o'ng burchakda */
.vid-sound {
  position: absolute; bottom: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.55);
  border: none; cursor: pointer; display: grid; place-items: center;
  color: #fff; backdrop-filter: blur(4px);
  touch-action: manipulation;           /* mobilda 300ms kechikishni yo'q qiladi */
  -webkit-tap-highlight-color: transparent; /* iOS'da tap oynachasini yashiradi */
  z-index: 2;
  /* Sukut holati: muted — speaker + X ikona (SVG inline URL sifatida) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 18px;
}
/* Ovoz yoqilgan holat: data-on atributi qo'shilganda to'lqinli speaker ikona */
.vid-sound[data-on] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3C/svg%3E");
}