/* ==========================================================================
   ENZO GROUP — style.css
   Manba: DESIGN.md v1.0. Bu faylda YANGI qaror qabul qilinmaydi —
   faqat DESIGN.md tokenlari va qoidalari kodga o'tkaziladi.
   ========================================================================== */

/* 1 · SHRIFT ------------------------------------------------------------- */

@font-face { font-family:'SF Pro Display'; font-weight:400; font-style:normal;
  src:url('../assets/fonts/SFProDisplay-Regular.woff2')  format('woff2'); font-display:swap; }
@font-face { font-family:'SF Pro Display'; font-weight:500; font-style:normal;
  src:url('../assets/fonts/SFProDisplay-Medium.woff2')   format('woff2'); font-display:swap; }
@font-face { font-family:'SF Pro Display'; font-weight:600; font-style:normal;
  src:url('../assets/fonts/SFProDisplay-Semibold.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'SF Pro Display'; font-weight:700; font-style:normal;
  src:url('../assets/fonts/SFProDisplay-Bold.woff2')     format('woff2'); font-display:swap; }

/* 2 · TOKENLAR (DESIGN.md §2.1) ------------------------------------------ */

:root {
  --enzo-900:#0A2A73;
  --enzo-800:#0D3490;
  --enzo-700:#1246AE;
  --enzo-600:#1757C9;
  --enzo-500:#1963F7;
  --enzo-300:#669CF2;
  --enzo-100:#E8EFFD;

  --ink:#0A0F1C;
  --ink-60:#5B6478;
  --ink-40:#8D8D8E;
  --line:#E2E2E2;
  /* Video play tugmasi. Brend palitrasidan tashqaridagi yagona rang —
     ataylab: u brend emas, "bu yerda video bor" degan universal belgi. */
  --play-red:#E62117;
  --play-red-dark:#B81810;
  --line-2:#CCCCCC;
  --surface:#F6F7F9;
  --shot-bg:#F0F0F0;        /* mahsulot kadri foni — och kulrang */
  --white:#FFFFFF;

  --error:#D92D20;
  --success:#12854F;

  --font:'SF Pro Display', -apple-system, 'Segoe UI', system-ui, sans-serif;

  /* Bo'shliq shkalasi — 8px asos (DESIGN.md §5.2) */
  --s-4:4px;  --s-8:8px;   --s-12:12px; --s-16:16px; --s-24:24px; --s-32:32px;
  --s-40:40px; --s-56:56px; --s-72:72px; --s-96:96px; --s-128:128px; --s-160:160px;

  --gutter:24px;
  --pad:clamp(20px, 4vw, 64px);      /* chet bo'shlig'i */
  --content-max:1600px;              /* konteyner cheki (DESIGN.md §5.1) */
  --header-h:80px;

  /* Kontent chetigacha bo'lgan masofa — konteyner markazlashgani hisobga olinadi.
     Konteynerdan tashqarida turgan, lekin u bilan tekislanishi kerak bo'lgan
     absolut elementlar shu qiymatdan foydalanadi. */
  --edge:max(var(--pad), calc((100% - var(--content-max)) / 2 + var(--pad)));

  --ease:cubic-bezier(0.4, 0, 0.2, 1);
  /* Chiqish egri chizig'i — tez boshlanib, yumshoq to'xtaydi.
     Sarlavha so'zlarining ochilishi uchun (2026-08-19). */
  --ease-out:cubic-bezier(0.22, 1, 0.36, 1);
}

/* 3 · RESET -------------------------------------------------------------- */

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0;
  font-family:var(--font);
  font-size:17px; font-weight:400; line-height:1.6;
  color:var(--ink); background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;                  /* gorizontal scroll — hech qachon */
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,figure { margin:0; }
ul { margin:0; padding:0; list-style:none; }

/* Qator balansi: oxirgi qatorda yolg'iz so'z qolmasin, so'z bo'g'inga
   bo'linmasin — brauzer so'zlarni qatorlar bo'ylab tekis taqsimlaydi */
p, li, figcaption { text-wrap:pretty; }
h1,h2,h3,h4 { text-wrap:balance; }
* { hyphens:none; overflow-wrap:normal; word-break:normal; }

/* Radius — butun sayt bo'ylab 0 (DESIGN.md §6.1) */
*, *::before, *::after { border-radius:0 !important; }

:focus-visible { outline:2px solid var(--enzo-500); outline-offset:2px; }

/* 4 · SETKA (DESIGN.md §5.1) --------------------------------------------- */

/* Konteyner — barcha bo'limlarda bir xil. Keng ekranda markazga tortiladi,
   tor ekranda chetdan faqat --pad qoladi. Bo'lim foni (to'q bloklar, ranglar)
   chetdan chetgacha ketaveradi — cheklanadigan narsa faqat kontent. */
.container {
  width:100%;
  max-width:var(--content-max);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.grid {
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:var(--gutter);
}

/* 5 · TIPOGRAFIKA (DESIGN.md §4.2) --------------------------------------- */

.t-display { font-size:clamp(40px, 5.4vw, 72px); font-weight:700; letter-spacing:-0.03em; line-height:1.05; }
.t-h1      { font-size:clamp(34px, 4.2vw, 56px); font-weight:700; letter-spacing:-0.03em; line-height:1.1; }
.t-h2      { font-size:clamp(28px, 3.1vw, 40px); font-weight:600; letter-spacing:-0.02em; line-height:1.15; }
.t-h3      { font-size:clamp(22px, 2vw, 26px);   font-weight:600; letter-spacing:-0.02em; line-height:1.25; }
.t-h4      { font-size:clamp(18px, 1.5vw, 20px); font-weight:500; letter-spacing:-0.01em; line-height:1.35; }
.t-body-l  { font-size:clamp(17px, 1.5vw, 20px); font-weight:400; line-height:1.55; }
.t-body    { font-size:clamp(16px, 1.2vw, 17px); font-weight:400; line-height:1.6; }
.t-small   { font-size:clamp(14px, 1.1vw, 15px); font-weight:400; line-height:1.5; }
.t-caption { font-size:13px; font-weight:500; letter-spacing:0.02em; line-height:1.4; }

/* ✎ Katta sarlavhalar oq fonda brend ko'kida (mijoz qarori, 2026-08-19).
   Faqat uch daraja: display, h1, h2. `t-h3` va undan kichigi — kartochka
   sarlavhalari, ular `--ink` da qoladi, aks holda sahifada ierarxiya
   yo'qoladi va hamma narsa ko'k bo'lib ketadi.
   Tana matni, izohlar, ro'yxatlar — o'zgarmaydi. */
/* ✎ `.product__head .t-h3` roʻyxatga qoʻshildi (mijoz qarori, 2026-08-22):
   mahsulot nomlari («ENZO — Shifer», «ENZO — Tayyor beton» …) qora
   turardi va oddiy matndan ajralmasdi. Bu — boʻlimning nomi, sarlavha
   darajasi H2 dan past boʻlsa ham brend rangida boʻlishi kerak.
   Faqat mahsulot bloklarida: qolgan H3 lar (kartochka sarlavhalari)
   avvalgidek qora — ular roʻyxat ichidagi element, boʻlim nomi emas. */
.t-display, .t-h1, .t-h2,
.product__head .t-h3 { color:var(--enzo-800); }

/* To'q fonda sarlavha bo'limning o'z rangini oladi (oq) — ko'k ko'k ustida
   qolib ketmasligi uchun. Hero, to'q bo'limlar, footer. */
.hero .t-display, .hero .t-h1, .hero .t-h2,
.phero .t-display, .phero .t-h1,
.section--dark .t-display, .section--dark .t-h1, .section--dark .t-h2,
/* 🐛 `.faq__aside` — och bo'lim ICHIDAGI to'q quti; ro'yxatga kirmagani uchun
   telefon raqami (`t-h2`) ko'k fonda ko'k bo'lib, butunlay ko'rinmay qolgandi.
   Topildi 2026-08-20. */
.faq__aside .t-h2,
.footer .t-display, .footer .t-h1, .footer .t-h2 { color:inherit; }
.t-stat    { font-size:clamp(48px, 6.4vw, 88px); font-weight:700; letter-spacing:-0.04em; line-height:1; }

/* Bo'lim yorlig'i.
   ⛔ KATTA HARF + ochilgan trekking ISHLATILMAYDI — mijoz qarori (2026-08-15):
      bu AI-generatsiya saytlarning belgisi. DESIGN.md §4.2 "Overline" qatori
      va PROMPT.md P3 shu bilan bekor qilinadi.
   O'rniga: oddiy yozuv + oldida qisqa chiziq. */
.overline {
  display:flex; align-items:center; gap:var(--s-12);
  font-size:clamp(14px, 1.1vw, 15px);
  font-weight:500;
  letter-spacing:0;
  line-height:1.2;
  color:var(--enzo-500);
}
.overline::before {
  content:''; width:24px; height:1px; flex:none;
  background:currentColor;
}
.overline--on-dark { color:var(--enzo-300); }

/* Matn kengligi — hech qachon to'liq ekran (DESIGN.md §4.3) */
/* Bo'linmasligi kerak bo'lgan birikma (brend nomi, o'lcham, marka) */
.nowrap     { white-space:nowrap; }
.measure    { max-width:68ch; }
.measure-52 { max-width:52ch; }

/* 6 · TUGMA (DESIGN.md §6.1) --------------------------------------------- */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-12);
  height:56px; padding:0 var(--s-32);
  font-size:17px; font-weight:600; letter-spacing:-0.01em;
  border:1px solid transparent;
  transition:background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
  white-space:nowrap;
}
.btn svg { width:20px; height:20px; flex:none; }

.btn--primary       { background:var(--enzo-500); color:var(--white); }
.btn--primary:hover { background:var(--enzo-700); }

/* To'q ko'k fon ichida */
.btn--on-dark       { background:var(--white); color:var(--enzo-800); }
.btn--on-dark:hover { background:var(--enzo-100); }

.btn--secondary       { background:transparent; color:var(--enzo-800); border-color:var(--line-2); }
/* To'q kadr ustida ikkinchi darajali tugma. Fon shaffof — kadr ko'rinib
   turadi, kontur oq: ikkita to'ldirilgan tugma yonma-yon turganda ikkalasi
   ham birinchi darajaday o'qilardi. */
.btn--ghost-dark       { background:transparent; color:var(--white); border-color:rgba(255,255,255,.55); }
.btn--ghost-dark:hover { background:rgba(255,255,255,.12); border-color:var(--white); }
.btn--secondary:hover { border-color:var(--enzo-500); color:var(--enzo-500); }

.btn--sm { height:48px; padding:0 var(--s-24); font-size:16px; }

/* 7 · FIRMA SHAKLI — tom qiyaligi (DESIGN.md §3) ------------------------- */

/* Geometriya identity/enzo.svg dagi asl poligondan o'lchab olindi:
   points 5275.64 876.57 · 4706.54 941.72 · 5429.99 933.65  (karta eni 723.45)
     cho'qqi        = eni bo'yicha 78.66%
     chap pasayish  = eni ning 9.0%
     o'ng pasayish  = chap pasayishning 87.6%
   Balandlik px'da beriladi — aks holda baland bloklarda shakl yassilanib ketadi. */

:root {
  /* ✎ Cho'qqi o'ngga surildi: 78.66% → 86% (mijoz qarori, 2026-08-15).
     Sabab: 78.66% da qirra statistikadagi oxirgi raqam ("5 yil") ustiga
     to'g'ri kelib, u bilan to'qnashardi. Endi qirra undan o'tib ketadi. */
  --roof-peak:86%;
  --roof-h:clamp(28px, 6.4vw, 116px);
  --roof-r:0.876;                       /* o'ng chekka / chap chekka */
}

.roof-top {
  clip-path:polygon(
    0 var(--roof-h),
    var(--roof-peak) 0,
    100% calc(var(--roof-h) * var(--roof-r)),
    100% 100%,
    0 100%
  );
}

/* ✎ Cho'qqi yuqoriga qaratildi (mijoz qarori, 2026-08-16).
   Avval qirra 86% da pastga cho'zilib tushardi — brend belgisi teskari o'girilgan
   ko'rinardi. Endi chiziq `roof-top` bilan bir xil yo'nalishda: eng past nuqta
   chap chetda, cho'qqi 86% da yuqoriga ko'tariladi.
   Shakl butunlay hero'ning pastki chetida qoladi — kontentga tegmaydi. */
.roof-bottom {
  clip-path:polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--roof-h) * (1 - var(--roof-r))),
    var(--roof-peak) calc(100% - var(--roof-h)),
    0 100%
  );
}

/* Tom shakli blok ichidagi joyni yeydi — kontent uchun qo'shimcha bo'shliq */
.section.roof-top { padding-top:calc(var(--s-72) + var(--roof-h)); }

/* ✎ Hero'dan tom kesimi OLIB TASHLANDI (mijoz qarori, 2026-08-19).
   Sabab: kadr ustidagi katta oq xanjar rasmni ikkiga bo'lib, umumiy vizualni
   buzardi. Firma shakli qolgan `roof-top` bo'limlarida saqlanadi — u yerda
   kesim tekis fonni kesadi, fotoni emas. */

@media (min-width:1024px) {
  .section.roof-top { padding-top:calc(var(--s-128) + var(--roof-h)); }
}

/* 8 · BO'LIM RITMI ------------------------------------------------------- */

.section      { padding-block:var(--s-72); }
.section--lg  { padding-block:var(--s-96); }
.section--dark{ background:var(--enzo-800); color:var(--white); }
.section--surface { background:var(--surface); }

@media (min-width:1024px) {
  .section     { padding-block:var(--s-128); }
  .section--lg { padding-block:var(--s-160); }
}

/* P1 · to'liq kenglikdagi ajratuvchi */
.rule { height:1px; background:var(--line); border:0; margin:0; }

/* 9 · HEADER (DESIGN.md §6.6) -------------------------------------------- */

.header {
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:64px;
  display:flex; align-items:center;
  color:var(--white);
  border-bottom:1px solid transparent;
  transition:background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.header__inner { width:100%; display:flex; align-items:center; gap:var(--s-32); }

.header.is-scrolled {
  background:var(--white); color:var(--ink); border-bottom-color:var(--line);
}
/* ✎ Logotip oq sarhadda brend ko'kida, qora emas (mijoz qarori, 2026-08-20).
   Qolgan sarhad matni (menyu, telefon) --ink bo'lib qoladi: agar logotip
   ham ular bilan bir xil qora bo'lsa, u navigatsiya elementiga o'xshab
   qolardi. Rang farqi uni brend belgisi sifatida ajratib turadi. */
.header.is-scrolled .logo { color:var(--enzo-800); }

/* ✎ Gradient tasma (mijoz qarori, 2026-08-19).
   Sabab: hero kadrining tepasi quyosh botish osmoni — deyarli oq. Oq matn
   o'lchanganda telefon 1,78:1, nofaol til kodi 1,71:1 bergan (AA = 4,5:1).
   Tasma header ostidagi kontentsiz zonani to'qlashtiradi, kadrning o'ziga
   tegmaydi (DESIGN.md §10.7 kadr overlayiga tegishli, header foniga emas).
   Scroll'da header oqarganda tasma o'chadi. O'lchov: 6,32 / 5,46. */
.header::before {
  content:''; position:absolute; inset:0 0 auto 0; height:190px; z-index:-1;
  background:linear-gradient(180deg,
    rgba(8,18,32,.72) 0%,
    rgba(8,18,32,.40) 42%,
    rgba(8,18,32,0)  100%);
  pointer-events:none;
  transition:opacity 200ms var(--ease);
}
.header.is-scrolled::before { opacity:0; }
/* ✎ Menyu ochiqligida tasma ham oʻchadi (2026-08-22). Tasma hero kadrining
   yorugʻ osmoni uchun kerak, menyu esa toʻq koʻk panel — u yerda tasma
   faqat zarar: header menyudan yuqorida turgani uchun (z-index 100 va 99)
   uning soyasi birinchi oq havola qutisiga tushib, uni kulrang koʻrsatardi. */
body.is-locked .header::before,
html.is-menu-open .header::before { opacity:0; }

/* Tasma ustida shaffoflik bilan zaiflashtirishning hojati yo'q */
.header:not(.is-scrolled) .nav a          { opacity:1; }
.header:not(.is-scrolled) .lang__opt      { opacity:.82; }
.header:not(.is-scrolled) .lang__opt.is-active { opacity:1; }

.logo { display:flex; align-items:center; gap:var(--s-12); flex:none; }
.logo svg { height:24px; width:auto; }
/* ✎ Logotip endi haqiqiy vektor (mijoz qarori, 2026-08-20).
   Avvalgi CSS varianti belgini uchta tekis, kengligi turlicha chiziq qilib
   chizardi. Brendning o'z belgisi boshqacha: uchta QIYA plita, ustma-ust
   taxlangan shifer varaqlari — ya'ni kompaniya nima ishlab chiqarishini
   aytadigan shakl. Yozuv ham SF Pro emas, kontur qilingan o'z harflari.
   `currentColor` — sarhad hero ustida oq, scroll'dan keyin ko'k. */
/* `.logo svg` qoidasi kuchliroq (0,1,1) — shuning uchun bu yerda ham
   `.logo` bilan yoziladi, aks holda balandlik 24px da qolib ketardi.
   `aspect-ratio` majburiy: viewBox'li SVG'ga `width:auto` berilsa, brauzer
   uni 300px qilib oladi va logotip 300px kenglikdagi qutining o'rtasiga
   tushib, chap chetdan uzoqlashib ketadi (o'lchandi). */
.logo .logo__svg { height:26px; width:auto; aspect-ratio:384.2 / 118.06; }

.nav { display:none; gap:var(--s-32); margin-inline:auto; }
.nav a { font-size:17px; font-weight:500; opacity:.85; transition:opacity 150ms var(--ease); }
.nav a:hover { opacity:1; }

.header__actions { display:flex; align-items:center; gap:var(--s-16); margin-left:auto; flex:none; }
.header__phone { display:none; align-items:center; gap:var(--s-8); font-size:17px; font-weight:500; letter-spacing:-0.01em; }
.header__phone svg { width:18px; height:18px; }
.header__phone-icon { display:inline-flex; width:48px; height:48px; align-items:center; justify-content:center; }
.header__phone-icon svg { width:22px; height:22px; }
.header__cta { display:none; }

.burger {
  width:48px; height:48px; display:inline-flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
}
.burger span { display:block; width:24px; height:2px; background:currentColor; transition:transform 250ms var(--ease), opacity 250ms var(--ease); }

@media (min-width:1024px) {
  .header { height:var(--header-h); }
  .nav { display:flex; }
  .header__phone { display:flex; }
  .header__cta { display:inline-flex; }
  .header__phone-icon, .burger { display:none; }
}

/* Mobil menyu — to'liq ekran */
/* ✎ Joylashuv mijozning eskizi bo'yicha (2026-08-22): havolalar TEPADA,
   tugma, telefon va til esa pastda. Avval hammasi birga o'rtada turardi —
   ekranning tepasi ham, pasti ham bo'sh qolardi. */
.menu {
  position:fixed; inset:0; z-index:99;
  background:var(--enzo-800); color:var(--white);
  display:flex; flex-direction:column; justify-content:flex-start; gap:var(--s-12);
  /* ✎ Chetdan 32px (mijoz eskizi, 2026-08-22) — sahifaning odatdagi
     `--pad` (20px) emas. Menyu — alohida ekran, undagi oq qutilar chetdan
     nafas olishi kerak. Pastdagi 8vh — eskizdagi havo. */
  padding:calc(var(--s-96) + var(--s-40)) var(--s-32) 8vh;
  transform:translateY(-100%);
  transition:transform 250ms var(--ease);
  visibility:hidden;
}
.menu.is-open { transform:translateY(0); visibility:visible; }
/* ✎ Havolalar — oq quti, koʻk matn (mijoz eskizi, 2026-08-22).
   Avval koʻk fonda oq matn edi: bosiladigan joy koʻrinmasdi, telefonda
   qayerni bosish kerakligi faqat matnning oʻzidan bilinardi. Quti
   bosiladigan maydonni koʻrsatadi va balandligi 48px — barmoq oʻlchovi. */
.menu a.menu__link {
  background:var(--white); color:var(--enzo-800);
  font-size:20px; font-weight:600; letter-spacing:-0.02em;
  text-align:center; padding:8px var(--s-16); min-height:48px;
  display:flex; align-items:center; justify-content:center;
}
/* `margin-top:auto` — pastki guruh ekran pastiga qadaladi, havolalar esa
   tepada qoladi. Ular orasidagi bo'shliq ekran balandligiga qarab o'zi
   o'zgaradi. */
/* Pastki guruh ekran tubiga YOPISHMAYDI: eskizda uning ostida ham havo
   bor. `margin-top:auto` bilan o'sha havo yo'qolardi. */
/* ✎ Zichlik mijoz eskizidan oʻlchab olindi (2026-08-22): eskizda ikkala
   guruh — havolalar ham, tugma/telefon/til ham — yaxlit blok boʻlib
   oʻqiladi. Avvalgi oraliqlar (havolalar 24px, guruh 16px, til 24px)
   ikkalasini ham yoyib yuborgandi.

   `margin-top` 12vh dan 16vh ga koʻtarildi: guruhlar zichlashgani uchun
   umumiy balandlik ~36px qisqardi, kompensatsiyasiz butun pastki blok
   yuqoriga siljib ketardi. Endi u eskizdagi joyida (ekranning ~60%)
   qoladi, ostidagi havo ham oʻzgarmaydi. */
/* ✎ `margin-top:auto` (2026-08-22) — pastki guruh ekran tubiga qadaladi,
   ostidagi havoni esa `.menu` ning `padding-bottom:8vh` i beradi.
   Avval `margin-top:16vh` edi: balandligi turlicha telefonlarda guruh goh
   yuqorida, goh pastda qolardi. Endi joyi har qanday ekranda bir xil. */
.menu__foot { margin-top:auto; display:flex; flex-direction:column; gap:var(--s-16); }
.menu__foot .btn { width:100%; }
/* Tugma brend koʻkida: oq quti havolalar ham oq boʻlgani uchun, oq tugma
   ular orasida yoʻqolib ketardi — harakat emas, yana bitta havola kabi. */
.menu__foot .btn--on-dark { background:var(--enzo-500); color:var(--white); }
.menu__foot .btn--on-dark:hover { background:var(--enzo-600); }
.menu__phone {
  font-size:24px; font-weight:500;
  display:flex; align-items:center; justify-content:center; gap:var(--s-12);
}
.menu__phone svg { width:24px; height:24px; }
body.is-locked { overflow:hidden; }

/* 10 · HERO (PROMPT.md §5.1) --------------------------------------------- */

/* Optiloom usuli: to'liq ekranli rasm, matn rasmning O'Z to'q qismida.
   Gradient / overlay / qorayish YO'Q (DESIGN.md §7 va §10.7). */

/* ✎ Balandlik to'liq bitta ekran (mijoz qarori, 2026-08-19).
   Avval 88svh edi — pastda statistika raqamlarining tepasi ko'rinib turardi,
   bu "pastga siljit" degan ishora bo'lishi kutilgandi. Amalda raqamlar yarmi
   kesilib, kadr tugamagandek ko'rinardi. Endi hero to'liq ekranni egallaydi,
   raqamlar birinchi scroll'dan keyin butun holda chiqadi.

   svh (small viewport height) ishlatiladi, vh emas: mobil brauzerda manzil
   paneli ochiq turganda 100vh ekrandan baland bo'lib, matnni pastga surib
   yuboradi. */
.hero {
  position:relative; isolation:isolate;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding-top:calc(64px + var(--s-40));
  padding-bottom:var(--s-56);
  background:var(--enzo-800); color:var(--white);
  overflow:hidden;
}

/* Rasm butun blokni to'ldiradi */
/* Kadr qatlami. Balandligi 112% va tepasi -6% — parallaks uchun ataylab
   qoldirilgan zaxira. Busiz siljitilgan rasmning cheti ochilib qolardi. */
/* Mobilda kadr aynan avvalgidek — qatlam hero'ni to'liq to'ldiradi,
   harakat yo'q. Uch sabab: (1) mobilda kadr 2:1 bo'lgani uchun allaqachon
   kuchli qirqilgan, qo'shimcha vertikal siljish kompozitsiyani yana
   o'zgartiradi; (2) mobil hero alohida bosqichda qayta quriladi
   (WORKLOG 10-blok) — hozir unga qatlam qo'shish erta; (3) uzluksiz
   masshtab telefonda batareyani yeydi, foydasi esa kam. */
.hero__frame {
  position:absolute; z-index:-1; inset:0;
  overflow:hidden;
}

/* ── Hero pardalari (2026-08-22, mijoz koʻrsatdi) ──────────────────────────
   Ikki gradient: tepada — sarlavha uchun, pastda — izoh va tugmalar uchun.

   NEGA SARHADDA EMAS, HERO ICHIDA. Avval tepadagi parda `.header::before`
   edi. Sarhad `z-index:100` bilan alohida qatlam yaratadi, ya'ni uning
   pardasi hero matnining USTIGA tushardi: sarlavha pardaning ostida qolib,
   xiralashib koʻrinardi. Endi parda kadr qatlamining oʻzida — rasmdan
   yuqorida, matndan pastda. Sarhadning oq logotipi va tugmalari esa
   baribir hammasidan yuqorida qoladi.

   Pastki parda mijoz koʻrsatgan muammoni yopadi: izoh mikser kabinalari
   ustiga tushib, oq matn oq mashinada oʻqilmasdi. */
.hero__frame::before,
.hero__frame::after { content:''; position:absolute; left:0; right:0; pointer-events:none; }

.hero__frame::before {          /* tepa — sarlavha ostidagi qorayish */
  top:0; height:58%;
  background:linear-gradient(180deg,
    rgba(8,18,32,.78) 0%,
    rgba(8,18,32,.55) 34%,
    rgba(8,18,32,.22) 68%,
    rgba(8,18,32,0)  100%);
}
/* Pastki parda — izoh va tugmalar ostidagi qorayish.

   ⚠️ BALANDLIK FOIZDA EMAS. Avval `42%` edi va u faqat sinov oʻlchamida
   (360×800, nisbat 2,22) toʻgʻri ishlardi. Haqiqiy telefonda brauzerning
   manzil paneli ochiq turganda koʻrinadigan maydon 430×739 boʻladi —
   nisbat 1,72. Foiz bilan berilgan parda oʻshanda 310px ga qisqarib,
   izoh pardadan tashqarida, mikser kabinalari ustida qolardi.

   Endi balandlik matn blokidan hisoblanadi: `min()` ikkalasidan kichigini
   oladi, ya'ni parda hech qachon kadrning yarmidan oshmaydi, lekin past
   ekranda ham matnni qoplaydigan eng kam balandlikdan (360px) past
   tushmaydi. Tekshirildi: 360×800, 430×739 va 430×830 — uchalasida ham
   izoh toʻliq parda ichida. */
.hero__frame::after {
  bottom:0; height:max(360px, 46%);
  background:linear-gradient(0deg,
    rgba(8,18,32,.86) 0%,
    rgba(8,18,32,.72) 26%,
    rgba(8,18,32,.42) 58%,
    rgba(8,18,32,0)  100%);
}

/* Sarhadning oʻz tasmasi hero boʻlgan sahifada oʻchadi — aks holda ikki
   parda ustma-ust tushib, tepa haddan tashqari qorayardi. */
body:has(.hero) .header:not(.is-scrolled)::before { opacity:0; }

@media (min-width:1024px) {
  .hero__frame {
    /* Zaxira faqat TEPADA — pastki chet hero cheti bilan tekis turadi,
       ya'ni matn ostidagi to'q beton maydon joyida qoladi. Parallaks
       pastga siljitadi, aynan shu zaxirani yeydi.
       8% — vazmin chegara: kadr sezilarli siljiydi, lekin sarlavha
       ostidagi to'qlik buzilmaydi (o'lchandi, quyida). */
    top:-8%; height:108%; bottom:auto;
    /* `scale` va `translate` alohida xossalar — bittasi animatsiyada,
       ikkinchisi JS'da bo'lsa ham bir-birini bekor qilmaydi. Bitta
       `transform` da bo'lganda ikkinchisi birinchisini o'chirib yuborardi. */
    animation:hero-breath 26s ease-in-out infinite alternate;
    will-change:scale, translate;
  }
}

/* Sekin nafas: 26 soniyada 5,5%. Chegarani ataylab past oldik — tezroq
   yoki kattaroq bo'lsa "slayd-shou" ta'mi paydo bo'ladi. */
@keyframes hero-breath {
  from { scale:1; }
  to   { scale:1.055; }
}

.hero__img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  /* ✎ Vaqtinchalik `object-position:14%` olib tashlandi (2026-08-22):
     mobilga endi alohida vertikal kadr beriladi (`<picture>` ichidagi
     `<source>`), shuning uchun siljitishga hojat yo'q. 768–1023px oralig'i
     hamon desktop kadrini oladi — u yerda 2:1 hali ham torlik qiladi. */
  object-position:50% 50%;
}
@media (min-width:768px) and (max-width:1023px) { .hero__img { object-position:14% 50%; } }

.hero__grid { width:100%; }
.hero__copy { grid-column:1 / -1; }

.hero h1 span { display:block; }

/* Sarlavha butunlay OQ — aksent rangi olib tashlandi (mijoz qarori, 2026-08-19).
   `--enzo-300` fotoda hech qanday pardozda 4.5:1 bermasdi (o'lchandi: 1,65–3,51). */

/* ✎ Sarlavha kattalashtirildi 48px → 76px (mijoz qarori, 2026-08-19).
   Eski 48px cheklovi tom kesimi bor paytdagi kalta soya zonasidan kelib
   chiqqan edi. Kesim olingandan keyin matn ustuni qayta o'lchandi:
   y=380–780 oralig'ida oq matn kontrasti 4,5–9,6 — ya'ni ~400px erkin joy.
   Zaif tasma faqat y=280–380 (3,4–4,6), matn bloki u yerga yetib bormaydi. */
.hero h1 { font-size:clamp(40px, 5vw, 76px); line-height:1.02; letter-spacing:-0.035em; }

/* Mahsulot qatori — sarlavhaning birinchi darajasi, yorliq emas.
   31px / 600: sarlavhadan kichik, izohdan ancha katta. Katta harf va
   ochilgan trekking ISHLATILMAYDI (DESIGN.md §10, taqiq 15). */
.hero__kinds {
  margin:0 0 var(--s-16);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-16);
  font-size:clamp(22px, 2.1vw, 31px); font-weight:600;
  letter-spacing:-0.02em; color:var(--white);
}
/* Ajratgich — alohida element qo'shmasdan, nuqta */
.hero__kinds span + span { position:relative; padding-left:var(--s-16); }
.hero__kinds span + span::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  /* Kvadrat — saytdagi radius taqig'i (style.css:88) sababli */
  width:5px; height:5px; background:rgba(255,255,255,.55);
}

/* Sarlavha → izoh → tugmalar: bitta vertikal ustun (mijoz qarori 2026-08-19).
   Avval tugma va izoh yonma-yon turardi — ko'z sarlavhadan tugmaga sakrab,
   izohni chetlab o'tardi. */
/* ✎ Kattalashtirildi (mijoz qarori, 2026-08-20): .t-body 17px hero'ning
   76px sarlavhasi va 31px mahsulot qatori yonida juda mayda qolardi —
   ikki qatorli izoh tugmalarga qo'shilib ketardi. 23px uni sarlavha bilan
   tugma orasida mustaqil pog'ona qilib qo'yadi (kinds 31 > note 23 > btn 17).
   Ochligi ham oshirildi: .86 -> .92, katta keglda matn yengilroq ko'rinadi. */
.hero__note {
  margin:var(--s-24) 0 0; max-width:46ch;
  font-size:clamp(18px, 1.6vw, 23px); line-height:1.5;
  color:rgba(255,255,255,.92);
}
/* ✎ 2026-08-22: eski `@media (max-width:519px) { .hero__note br {display:none} }`
   olib tashlandi. U tor ekranda uzilishlarni bekor qilardi — endi aksincha,
   mobilda uzilish AYNAN kerak (mijoz koʻrsatdi, §23 ga qarang).
   `br.only-mobil` — faqat mobil uchun qoʻshimcha uzilish; desktopda izoh
   avvalgidek ikki qatorda qoladi. */
.hero__note br.only-mobil { display:none; }
.hero__cta  { margin-top:var(--s-32); display:grid; gap:var(--s-12); }
.hero__cta .btn { width:100%; }

@media (min-width:1024px) {
  .hero { padding-top:calc(var(--header-h) + var(--s-56)); padding-bottom:var(--s-72); }
  .hero__copy { grid-column:1 / span 7; }
  .hero__note { margin-top:var(--s-32); }
  .hero__cta {
    margin-top:var(--s-40);
    grid-auto-flow:column; justify-content:start;
    gap:var(--s-16);
  }
  .hero__cta .btn { width:auto; }
}

/* 11 · STATISTIKA (PROMPT.md §5.2) --------------------------------------- */

/* ✎ Ko'k fon bekor qilindi, oq fonga qaytarildi (mijoz qarori, 2026-08-20).
   Ko'k maydon hero bilan bitta blokka qo'shilib ketardi. */
.stats { background:var(--white); padding-block:var(--s-56); }
.stats__grid { row-gap:var(--s-32); }
.stat { grid-column:span 6; }
.stat + .stat { position:relative; }
.stat__num { color:var(--enzo-800); }
/* ✎ Birlik (`+`, `yil`) ham ko'k (mijoz qarori, 2026-08-20). Kulrang
   bo'lganda u raqamdan ajralib, "ilova qilingan izoh"day ko'rinardi;
   aslida u raqamning bir qismi. Faqat kegli va og'irligi bilan farq qiladi. */
.stat__num .unit { font-size:.34em; font-weight:500; letter-spacing:-0.01em; color:var(--enzo-500); margin-left:.15em; }
.stat__label { margin-top:var(--s-8); color:var(--ink-60); }

/* Sanash animatsiyasi paytida ustun kengligi sakramasin: raqamlar bir xil
   kenglikdagi (tabular) shaklga o'tadi — aks holda 7 dan 1 ga o'tganda
   butun qator chapga-o'ngga tebranardi. */
.stat__num { font-variant-numeric:tabular-nums; }

/* Tekis qator + vertikal ajratuvchi chiziq.
   ✎ 2026-08-16: qisqa vaqt diagonal pog'ona sinab ko'rildi, mijoz eski
   variantni tanladi — qaytarildi.
   Setkadan chiqiladi: 4 ta ko'rsatkich 12 ustunli setkada 3 ustundan olsa,
   oxirgisining o'ng tomonida bo'sh quyruq qoladi va qator chapga og'adi.
   space-between bilan birinchisi chap chetga, oxirgisi o'ng chetga tegadi. */
@media (min-width:768px) {
  .stats { padding-block:var(--s-72); }
  .stats__grid {
    display:flex; flex-wrap:wrap;
    justify-content:space-between; align-items:flex-start;
    column-gap:var(--s-32);
  }
  .stat { grid-column:auto; }
  .stat + .stat { padding-left:var(--s-32); }
  .stat + .stat::before {
    content:''; position:absolute; left:0; top:4px; bottom:4px;
    width:1px; background:var(--line);
  }
}

/* 12 · BIZ HAQIMIZDA (PROMPT.md §5.3) — P2 assimetrik ikki ustun --------- */

.about__head { grid-column:1 / -1; }
.about__body { grid-column:1 / -1; margin-top:var(--s-32); }
.about__body p + p { margin-top:var(--s-24); }
.about__closing { color:var(--enzo-800); }
.about__media { grid-column:1 / -1; margin-top:var(--s-40); }
.about__media img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.about__caption { margin-top:var(--s-12); color:var(--ink-40); }

.about__head h2 { margin-top:var(--s-16); }

@media (min-width:1024px) {
  .about__head { grid-column:1 / span 4; }
  .about__body { grid-column:6 / span 7; margin-top:0; }
  .about__media { grid-column:1 / -1; margin-top:var(--s-96); }
}

/* 13 · HARAKAT (DESIGN.md §8) -------------------------------------------- */

.reveal { opacity:0; transform:translateY(16px); }
.reveal.is-in {
  opacity:1; transform:none;
  transition:opacity 400ms var(--ease), transform 400ms var(--ease);
}

/* ✎ STATIK REJIM — `?static=1` (2026-08-22).
   Sayt boʻlimlari skroll paytida paydo boʻladi, yaʼni sahifaning
   BOSHLANGʻICH holatida ularning koʻpi `opacity:0`. Dizayn vositalari
   (Figma'ning `html.to.design` plagini, skrinshot skriptlari, arxivchilar)
   aynan shu boshlangʻich holatni oʻqiydi — natijada sahifa deyarli boʻsh
   koʻchadi.

   `?static=1` bilan ochilganda `<html>` ga `is-static` qoʻshiladi
   (index.html boshidagi kichik skript) va butun harakat oʻchadi. */
/* Uchala mexanizm ham majburan ochiladi. `.reveal` — bloklar, `.t-rise` —
   matn qatorlari, `.t-words .w` — sarlavhadagi har bir soʻz. Faqat
   `.reveal` ochilsa hero sarlavhasi va izohi koʻrinmay qolardi: ular
   boshqa mexanizmda. (`prefers-reduced-motion` blokida ham aynan shu uch
   qoida bor — sabab bir xil.) */
html.is-static .reveal,
html.is-static .t-rise,
html.is-static .t-words .w { opacity:1 !important; transform:none !important; }
/* `?menu=1` — mobil menyu ochiq holda. U JS bilan ochiladi (`.is-open`),
   shuning uchun import vositalari uni doim YOPIQ holda oladi. Bu yerda
   sinf `<html>` da: element hali yaratilmagan paytda ham ishlaydi. */
html.is-menu-open .menu { transform:none !important; visibility:visible !important; }
html.is-static *,
html.is-static *::before,
html.is-static *::after {
  animation:none !important;
  transition:none !important;
}
/* 🐛 Kirish pardasi (`.intro`) sof CSS animatsiyasi bilan yoʻqoladi.
   Yuqoridagi `animation:none` uni ham toʻxtatib qoʻyardi — parda ekranda
   abadiy osilib qolar va butun sahifani bekitardi. Aynan shu sababdan
   Figma importida «hech narsa koʻrinmadi». Statik rejimda parda umuman
   koʻrsatilmaydi. */
/* Tarjima kelguncha sahifa yashiriladi (js/i18n.js). Busiz koʻz bir zumga
   oʻzbekcha matnni ilgʻab qoladi va sahifa «sakrab» oʻzgargandek koʻrinadi.
   Faqat oʻzbek lotindan BOSHQA til tanlanganda qoʻyiladi — asosiy tilda
   hech narsa kutilmaydi. */
html.is-tarjima body { visibility:hidden; }

html.is-static.has-intro { overflow:visible; }
html.is-static .intro { display:none !important; }

/* Sarlavha — so'zma-so'z ochilish (2026-08-19).
   Har bir so'z pastdan ko'tarilib, o'zining pastki qirrasi atrofida
   ag'dariladi. `perspective` ota-elementda: busiz `rotateX` yassi
   ko'rinadi va harakat shunchaki "siljish" bo'lib qoladi.

   So'zlarni JS bo'ladi (`js/main.js` §8). JS ishlamasa `.w` umuman
   yaratilmaydi va sarlavha oddiy holicha chiqadi — matn hech qachon
   yo'qolmaydi. */
/* ✎ Sekinlashtirildi va yumshatildi (mijoz qarori, 2026-08-19).
   Avval: 500ms · 50ms qadam · rotateX(90°) — hamma sarlavhada bir xil.
   Uch muammo bor edi:
     1. 90° to'liq ag'darish — so'z yassi holatdan chiqadi, keskin uriladi;
     2. 500ms qisqa — harakat "chertilgandek" tugaydi;
     3. bir xil tezlik — 76px sarlavha 40px sarlavha bilan bir vaqtda
        harakatlansa, kattasi shoshayotgandek ko'rinadi. Katta jism
        sekinroq harakatlanishi kerak — bu fizika, ko'z shuni kutadi.
   Endi: 72°, davomiylik sarlavha darajasiga qarab, qadam 60ms. */
.t-words {
  perspective:1000px;
  --dur:640ms;      /* asosiy davomiylik — daraja bo'yicha bekor qilinadi */
  --step:60ms;      /* so'zlar orasidagi qadam */
  --lag:0ms;        /* butun sarlavhaning kechikishi (hero ketma-ketligi) */
}
.t-display.t-words { --dur:860ms; --step:72ms; }
.t-h1.t-words      { --dur:780ms; --step:66ms; }
.t-h2.t-words      { --dur:680ms; --step:60ms; }

.t-words .w {
  display:inline-block;
  opacity:0;
  transform:translateY(18px) rotateX(72deg);
  transform-origin:50% 100%;
  will-change:transform, opacity;
}
.t-words.is-in .w {
  opacity:1;
  transform:none;
  /* Shaffoflik harakatdan qisqaroq: so'z avval ko'rinadi, keyin joyiga
     o'tirib boradi. Teng bo'lsa oxirida "miltillash" seziladi. */
  transition:opacity calc(var(--dur) * 0.6) var(--ease-out),
             transform var(--dur) var(--ease-out);
  transition-delay:calc(var(--lag) + var(--i, 0) * var(--step));
}
/* Animatsiya tugagach `will-change` ni ushlab turishning hojati yo'q */
.t-words.is-done .w { will-change:auto; }

/* Sarlavha bo'lmagan matnlar — bir butun holda ko'tariladi.
   `--d` kechikishni HTML yoki JS beradi. */
.t-rise { opacity:0; transform:translateY(18px); }
.t-rise.is-in {
  opacity:1; transform:none;
  transition:opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay:var(--d, 0ms);
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
  .t-rise { opacity:1; transform:none; }
  /* Muhim: `.w` boshlang'ich holati opacity:0. Yuqoridagi qoida barcha
     o'tishlarni o'chirgani uchun, buni qaytarmasak sarlavha butunlay
     ko'rinmay qoladi. */
  .t-words .w { opacity:1; transform:none; }
}

/* 14 · YORDAMCHI ---------------------------------------------------------- */

.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Prototip belgisi — yakuniy saytda o'chiriladi */
.proto-note {
  background:var(--enzo-100); color:var(--enzo-800);
  padding:var(--s-16) 0; font-size:14px;
}
.proto-toggle {
  margin-left:var(--s-16);
  padding:var(--s-8) var(--s-16);
  border:1px solid var(--enzo-500); color:var(--enzo-500);
  font-size:13px; font-weight:600;
}
.proto-toggle:hover { background:var(--enzo-500); color:var(--white); }

/* ==========================================================================
   15 · BO'LIM KOMPONENTLARI  (PROMPT.md §5.4 – §5.18)
   ========================================================================== */

/* Umumiy: bo'lim boshi — P2 assimetrik ikki ustun ------------------------- */

.head       { grid-column:1 / -1; }

/* ⛔ Sarlavhalarda ikonka ISHLATILMAYDI (mijoz qarori, 2026-08-15).
   Sabab: sarlavha yonidagi ikonka ma'no qo'shmaydi — bu dekoratsiya,
   DESIGN.md §6.7 qoidasi 4 buni allaqachon taqiqlagan.
   Ikonka faqat: (a) ma'lumot qatorlarida, (b) mahsulot bloklarida,
   (c) harakat kanalini bildiruvchi tugmalarda. */

/* Matn qatoriga qo'shiladigan kichik ikonka (manzil, aloqa) */
.inline-icon {
  display:inline-block; vertical-align:-0.15em;
  width:1em; height:1em; margin-right:0.5em;
  color:var(--enzo-500);
}
.section--dark .inline-icon, .footer .inline-icon { color:var(--enzo-300); }
.head h2    { margin-top:var(--s-16); }
.head p.sub { margin-top:var(--s-16); color:var(--ink-60); }
.section--dark .head p.sub { color:var(--enzo-300); }

/* Yetakchi qator — sarlavha bilan xatboshi orasidagi ko'prik.
   Sarlavhadan uzoqroq turadi, xatboshiga esa yopishadi: shunda ikkalasi
   bitta blok bo'lib o'qiladi, uch xil alohida matn emas. Qalinlik va
   brend rangi uni ierarxiyada H2 dan keyingi o'ringa qo'yadi. */
.sub--lead {
  margin-top:var(--s-32); font-weight:600; color:var(--enzo-800);
}
.sub--lead + p { margin-top:var(--s-8) !important; }
.section--dark .sub--lead { color:var(--white); }

.body-col { grid-column:1 / -1; margin-top:var(--s-32); }
/* ✎ Mobilda matn sarlavhaga yaqinroq (mijoz qarori, 2026-08-22).
   Telefonda sarlavha va matn bir ekranda ko'rinishi kerak — 32px bo'shliq
   o'sha ekranning bir qismini bekorga yeb qo'yardi. */
@media (max-width:1023px) { .body-col { margin-top:var(--s-16); } }

@media (min-width:1024px) {
  .head     { grid-column:1 / span 4; }
  .body-col { grid-column:6 / span 7; margin-top:0; }
}

.ph { display:block; width:100%; margin:0; }
.ph img { width:100%; height:100%; object-fit:cover; display:block; }
/* Rasm hali biriktirilmagan bo'lsa — buzilgan ikonka ko'rsatilmaydi */
.ph img[src=""] { display:none; }

/* --- §5.4 · Tarix (timeline) -------------------------------------------- */

.timeline { grid-column:1 / -1; margin-top:var(--s-56); }
.timeline__track { display:grid; gap:var(--s-32); }
.tl__year  { font-size:clamp(28px,3vw,40px); font-weight:700; letter-spacing:-0.03em; line-height:1; }
.tl__title { margin-top:var(--s-8); }
/* text-wrap:balance — qatorlar teng uzunlikda bo'linadi. Bo'limlardagi matn
   uzunligi har xil bo'lgani uchun ustunlar orasidagi bo'shliq ko'zga notekis
   ko'rinardi (masalan "…ENZO GROUP brendi" bitta qatorga sig'ib, keyingisi
   kalta qolardi). Balans buni optik tekislaydi (mijoz qarori, 2026-08-16). */
.tl__text  { margin-top:var(--s-8); color:var(--ink-60); text-wrap:balance; }
.tl__title { text-wrap:balance; }

/* Mobil — vertikal */
.tl { position:relative; padding-left:var(--s-32); }
.tl::before { content:''; position:absolute; left:3px; top:0; bottom:-32px; width:1px; background:var(--line); }
.tl:last-child::before { bottom:auto; height:8px; }
.tl::after { content:''; position:absolute; left:0; top:6px; width:7px; height:7px; background:var(--enzo-500); }

@media (min-width:1024px) {
  .timeline__track { grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--s-40); }
  .tl { padding-left:0; padding-top:var(--s-32); }

  /* Chiziq qisqa — ustun kengligini to'liq egallamaydi.
     Shunda ustunlar orasida havo qoladi va chiziqlar bir-biriga yopishmaydi. */
  .tl::before { left:0; right:auto; width:140px; top:3px; bottom:auto; height:1px; }
  .tl:last-child::before { height:1px; }
  .tl::after { top:0; left:0; }
}

/* Matn kengligi cheklanadi — barcha kartochkada kamida ikki qator bo'ladi,
   qator uzunligi bir xil ritmda ketadi */
.tl__text { max-width:32ch; }

/* --- §5.5 · Mahsulotlar ------------------------------------------------- */

.product { padding-block:var(--s-56); }
/* ✎ Mobilda mahsulot bloklari bir-biriga va sarlavhaga yaqinlashdi
   (mijoz qarori, 2026-08-22): to'rtta blok orasidagi 56px bo'shliq
   telefonda bo'limni keraksiz cho'zib yuborardi. */
@media (max-width:767px) { .product { padding-block:var(--s-24); } }
/* Mahsulot kadri — brend qolipi: to'q ko'k maydon, pastida oq brend shakli,
   mahsulot esa oq yuzada turadi (mijoz qarori, 2026-08-18).
   Kesilgan PNG (shaffof fon) shuni talab qiladi: oq fonli kadrni ko'k ustiga
   qo'yib bo'lmaydi, oq to'rtburchak bo'lib ko'rinardi. */
.pshot {
  position:relative; overflow:hidden;
  /* To'rtburchak — to'q ko'k, brend shakli esa och kulrang (mijoz qarori
     2026-08-18). Avval teskari edi. Kulrang oqdan sal ajralib turadi,
     shuning uchun kadr oq bo'lim ustida ham chegarasi bilan o'qiladi. */
  background:var(--enzo-800);
  display:flex; align-items:flex-end; justify-content:center;
}
/* Och kulrang brend shakli PASTDA — mahsulot shu yuzada turadi.
   Tom qirrasi yuqoriga qaragan, cho'qqi 86% da, o'ng chekka 0,876
   nisbatda pastroq (DESIGN.md §3.1). */
/* ✎ clip-path o'rniga SVG (mijoz ko'rsatdi, 2026-08-20).
   Sabab: clip-path qirrasi kulrangni SHAFFOFLIK bilan aralashtiradi;
   yarim-shaffof kulrang to'q ko'k ustiga tushganda qirra bo'ylab ochroq
   ko'k soch chizig'i paydo bo'lardi — «ko'k shtrix» shundan. SVG ichida esa
   qirra kulrang bilan KO'K orasida aralashadi, ya'ni to'g'ri rangda. */
.pshot::before {
  content:''; position:absolute; left:0; right:0; bottom:0; height:45%;
  background-color:var(--enzo-800);
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 preserveAspectRatio=%22none%22%3E%3Cpolygon points=%220,18 86,0 100,15.5 100,100 0,100%22 fill=%22%23F0F0F0%22/%3E%3C/svg%3E");
  background-size:100% 100%; background-repeat:no-repeat;
}
/* Soya kadrning o'zida — mijoz kadrlarni soyasi bilan toza qilib berdi
   (2026-08-18), shuning uchun CSS soyasi olib tashlandi. */
.pshot img { position:relative; z-index:1; width:88%; height:auto; display:block; margin-bottom:5%; }
/* Sement va beton kadrda kichikroq koʻrinardi — mahsulotning oʻzi
   ramkada kamroq joy egallaydi (mijoz qarori 2026-08-19). */
.pshot img[src$="mahsulot-sement.webp"] { width:96%; }
.pshot img[src$="mahsulot-beton.webp"]  { width:96%; }

.product__media { grid-column:1 / -1; aspect-ratio:4/3; }
@media (min-width:1024px) {
  /* Kadr matn ustuni bilan bir balandlikda — pastki qirrasi
     'Narxni bilib oling' tugmasining pastki chizig'iga tushadi
     (mijoz qarori 2026-08-18). Nisbat o'rniga cho'zilish. */
  .product__media { aspect-ratio:auto; align-self:stretch; }
  /* Rasm qator balandligini belgilamasin — aks holda matni kaltaroq
     kartochkalarda (ЖБИ) kadr matn ustunidan uzunroq bo'lib qolardi va
     pastki qirralar bir chiziqda turmasdi (mijoz qarori 2026-08-18). */
  .product__media img { position:absolute; bottom:5%; left:50%; transform:translateX(-50%); margin-bottom:0; }
}
.product__copy  { grid-column:1 / -1; margin-top:var(--s-32); align-self:center; }

/* ✎ Mobil tartib (mijoz qarori, 2026-08-22): belgi → sarlavha → matn →
   RASM → jadval → tugmalar. Avval rasm eng tepada turardi va odam nima
   haqida gap ketayotganini bilmasdan turib kadrni ko'rardi.

   `display:contents` — `.product__copy` o'zi quti bo'lmaydi, bolalari
   to'g'ridan-to'g'ri setkaga chiqadi. Shundagina rasmni ular ORASIGA
   qo'yish mumkin (aks holda u faqat blokdan oldin yoki keyin turardi). */
@media (max-width:1023px) {
  .product__copy { display:contents; }
  .product__head { grid-column:1 / -1; order:1; margin-top:var(--s-32); }
  .product__media { order:2; margin-top:var(--s-24); }
  .product__rest { grid-column:1 / -1; order:3; }
  /* Quti yo'qolgani uchun `.reveal` ham ishlamaydi (opacity quyiladigan
     element qolmadi) — bolalar shundayligicha ko'rinadi. Mobilda bu
     sezilmaydi: blok baribir bitta ustunda. */
}

/* Mahsulot rasmi ustidagi plashka OLIB TASHLANDI (mijoz qarori, 2026-08-15).
   Sabab: mahsulot nomi yonidagi H3 da allaqachon bor — takror.
   Rasm toza qoladi. PROMPT.md P8 va DESIGN.md §3.2 shu bilan yangilanadi. */
.product__text { margin-top:var(--s-16); color:var(--ink-60); }

/* Texnik xarakteristika — katalogdan (CATALOG.md §5).
   Faqat qaror qabul qilishga kerak bo'lgani; to'liq jadval /shifer, /sement,
   /beton, /jbi sahifalarida va PDF'da (CATALOG.md §7). */
.specs { margin-top:var(--s-24); border-top:1px solid var(--line); }
.specs > div {
  display:flex; justify-content:space-between; gap:var(--s-24);
  padding-block:var(--s-12); border-bottom:1px solid var(--line);
}
.specs dt { color:var(--ink-60); }
.specs dd { margin:0; text-align:right; font-weight:600; }

.product__actions { margin-top:var(--s-32); display:flex; flex-direction:column; gap:var(--s-12); }
.product__actions .btn { width:100%; }

@media (min-width:1024px) {
  .product { padding-block:var(--s-96); }
  .product__media { grid-column:1 / span 6; }
  .product__copy  { grid-column:8 / span 5; margin-top:0; }
  .product--flip .product__media { grid-column:7 / span 6; grid-row:1; }
  .product--flip .product__copy  { grid-column:1 / span 5; grid-row:1; }
  .product__actions { flex-direction:row; }
  .product__actions .btn { width:auto; }
}

/* --- §5.6 · Ishlab chiqarish quvvati ------------------------------------ */

.capacity__head { grid-column:1 / -1; }
/* Izoh sarlavhaga yaqinroq — mijoz qarori 2026-08-19 */
.capacity__head p.sub { margin-top:var(--s-8); }
.capacity__nums { grid-column:1 / -1; margin-top:var(--s-40); display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-32) var(--gutter); }
.cap__num { font-size:clamp(40px,5vw,72px); font-weight:700; letter-spacing:-0.04em; line-height:1; }
.cap__unit { margin-top:var(--s-8); color:var(--enzo-300); }

/* Guruhlash: chiziq o'rniga BO'SHLIQ ajratadi.
   1-guruh — yorliq + sarlavha + izoh (zich)
   2-guruh — chaqiruv matni + tugma (zich)
   Guruhlar orasi katta, guruh ichi kichik. */
.capacity__cta { margin-top:var(--s-56); }
.capacity__cta-lead { color:var(--enzo-300); max-width:40ch; margin-bottom:var(--s-16); }
.capacity__cta .btn { width:100%; }

@media (min-width:640px) {
  .capacity__cta .btn { width:auto; }
}

@media (min-width:1024px) {
  .capacity__head { grid-column:1 / span 5; }
  /* ✎ align-self:end — o'ng ustundagi raqamlar bloki pastdan chap ustun bilan
     tekislanadi, ya'ni oxirgi izoh qatori "Hajmni hisoblatish" tugmasining
     pastki chizig'ida turadi (mijoz qarori, 2026-08-16). */
  .capacity__nums { grid-column:7 / span 6; margin-top:0; gap:var(--s-56) var(--gutter); align-self:end; }
  /* Izoh va tugma yonma-yon — mijoz bergan andoza (2026-08-19). Avval
     ustma-ust turardi va blok keraksiz cho'zilardi. */
  /* Tugma chapda, izoh o'ngda (mijoz andozasi 2026-08-19) */
  .capacity__cta  { margin-top:var(--s-96); display:flex; flex-direction:row-reverse;
    justify-content:flex-end; align-items:center; gap:var(--s-32); }
  .capacity__cta-lead { margin:0; flex:1 1 auto; max-width:34ch; }
  .capacity__cta .btn { flex:0 0 auto; }
}

/* --- §5.7 · Laboratoriya · P4 raqamlangan ro'yxat ----------------------- */

.steps { margin-top:var(--s-40); border-top:1px solid var(--line); }
.section--dark .steps { border-color:rgba(255,255,255,.2); }
/* align-items:baseline — raqam va sarlavha bitta bazaviy chiziqda turadi.
   Avval ikkalasi tepasidan tekislanardi va shrift o'lchami har xil bo'lgani
   uchun matn raqamdan yuqoriroq chiqib qolardi. */
.step {
  display:grid; grid-template-columns:56px 1fr; gap:var(--s-24);
  align-items:baseline;
  padding:var(--s-24) 0; border-bottom:1px solid var(--line);
}
.section--dark .step { border-color:rgba(255,255,255,.2); }
.step__n { font-size:clamp(20px,2vw,24px); font-weight:600; color:var(--line-2); letter-spacing:-0.02em; }
.step__text { color:var(--ink-60); margin-top:var(--s-8); }

.with-icon { display:flex; gap:var(--s-12); align-items:flex-start; margin-top:var(--s-24); }
.with-icon svg { width:20px; height:20px; flex:none; margin-top:3px; color:var(--enzo-500); }

.media-pair { grid-column:1 / -1; margin-top:var(--s-40); display:grid; gap:var(--gutter); }
.media-pair .ph { aspect-ratio:16/9; }
@media (min-width:768px) { .media-pair { grid-template-columns:1fr 1fr; } }

/* --- §5.8 · Sertifikatlar / kartochkalar -------------------------------- */

.cards { display:grid; gap:var(--gutter); margin-top:var(--s-32); }
/* Mobilda kartochkalar sarlavha bloki bilan yaqinroq turadi */
@media (max-width:767px) { .cards { margin-top:var(--s-16); } }
/* minmax(0,1fr) — oddiy `1fr` da ustunning eng kichik kengligi kontentga
   bog'lanadi va kartochka o'z ustunidan kengroq bo'lib, konteynerdan chiqib
   ketadi (otzivlar blokida 18px chiqib ketgan edi). */
@media (min-width:768px)  { .cards--3 { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:768px)  { .cards--2 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* ✎ Mobilda to'rtta kartochka yonma-yon suriladi (mijoz qarori,
   2026-08-22, referens: jahonschool.uz). Ustma-ust turganda ular ekranning
   to'rt bo'yini egallardi va odam to'rtinchisiga yetguncha birinchisini
   unutardi.

   `scroll-snap` — kartochka har safar chetга tekis to'xtaydi. Manfiy
   margin konteyner chetidan chiqaradi: lenta ekranning bir chetidan
   ikkinchisiga o'tadi, kartochkalar esa matn bilan bir chiziqda boshlanadi. */
@media (max-width:767px) {
  .cards--4 {
    grid-auto-flow:column;
    grid-auto-columns:78%;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--pad);
    margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
    padding-bottom:var(--s-8);
    scrollbar-width:none;
  }
  .cards--4::-webkit-scrollbar { display:none; }
  .cards--4 > .card { scroll-snap-align:start; }
  /* Ekrandan tashqaridagi kartochka «paydo bo'lish» kutib turmaydi:
     lenta yonga surilganda u allaqachon ko'rinishi kerak. */
  .cards--4 > .card.reveal { opacity:1; transform:none; }
}
@media (min-width:768px)  { .cards--4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px) { .cards--4 { grid-template-columns:repeat(4,minmax(0,1fr)); } }
/* Sertifikatlar yon ustunga sig`maydi: 4 ta skan bir qatorda turishi kerak,
   aks holda 2×2 bo`lib bo`lim ikki baravar cho`ziladi va chap ustun bo`sh qoladi. */
@media (min-width:768px) { .body-col--full { grid-column:1 / -1; margin-top:var(--s-40); } }

.card {
  background:var(--white); border:1px solid var(--line);
  padding:var(--s-32);
  color:var(--ink);            /* to'q bo'lim ichida ham matn oq bo'lib qolmasin */
  transition:border-color 150ms var(--ease);
}
/* To'q fonda kartochka chegarasi ko'rinmaydi — u yerda fon o'zi ajratadi */
.section--dark .card { border-color:transparent; }
.section--dark .card:hover { border-color:var(--enzo-300); }
.card:hover { border-color:var(--enzo-500); }
.card__icon {
  width:56px; height:56px; background:var(--enzo-500); color:var(--white);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--s-24);
}
.card__icon svg { width:24px; height:24px; }
.card__title { color:var(--enzo-800); }
.card__text  { margin-top:var(--s-12); color:var(--ink-60); }
.card .ph { aspect-ratio:3/4; margin-bottom:var(--s-24); }

/* --- Sertifikat kartochkasi ------------------------------------------- */
/* Kartochkaning o'zi havola: bosilganda hujjat to'liq holda ochiladi.
   Eskiz WebP (~55 KB), to'liq hujjat SVG (~115 KB) faqat bosilganda yuklanadi. */
.cert { display:block; text-decoration:none; }
/* Mobil: 4 ta to`liq skan ustma-ust ~3400px beradi — juda uzun.
   Kesib ko`rsatiladi: hujjatning yuqori qismi (organ nomi, hujjat turi,
   sana) baribir ko`rinadi, to`liq matn bosilganda ochiladi. */
/* Hujjat TO'LIQ ko'rinadi (mijoz qarori 2026-08-18): oldin `cover` bilan
   pastki qismi — imzo, muhr, QR — kesilib qolardi. Endi `contain`:
   qog'oz butunligicha, o'z nisbatini saqlab, ramka ichiga sig'adi.
   Nisbatlar har xil (0,58–0,70), shuning uchun yon tomonda ozgina bo'shliq
   qoladi — u kulrang yuza bo'lib ko'rinadi, qog'oz esa oq: hujjat
   yuzada yotgandek o'qiladi, kesilgandek emas. */
/* ✎ Skan ortidagi ko'k maydon bekor qilindi, kulrang yuzaga qaytarildi
   (mijoz qarori, 2026-08-20). Bo'limning O'ZI ko'k bo'lgani uchun skan ortidagi
   ko'k ikkinchi ko'k qatlam bo'lib qolgandi — qog'oz ko'kdan ko'kka o'tayotgan
   oyna ichida turgandek ko'rinardi. Kulrang yuza qog'ozni ko'k fondan ajratadi
   va uni «yuzada yotgan hujjat» qilib qoldiradi. */
.card .cert__scan {
  aspect-ratio:3/4; margin-bottom:var(--s-24);
  background:var(--surface); border:1px solid var(--line);
  padding:var(--s-8);
}
.cert__scan img { object-fit:contain; }

/* Mobilda qat`iy nisbat kerak emas — bitta ustunda kartochkalar bir-biri
   bilan tekislanmaydi. Ramka hujjatning o`z nisbatini oladi: qog`oz butun
   kenglikni egallaydi, yon tomonda bo`sh kulrang maydon qolmaydi.
   Desktopda esa nisbat qat`iy — aks holda to`rt sarlavha turli balandlikda
   turib qolardi (hujjat nisbatlari 0,58 dan 0,70 gacha). */
@media (max-width:767px) {
  .card .cert__scan { aspect-ratio:auto; padding:0; border:0; background:none; }
  .card .cert__scan img { height:auto; }
}
.cert__meta { margin-top:var(--s-8); color:var(--ink-40); }
.cert__note { grid-column:1 / -1; margin-top:var(--s-24); color:var(--enzo-300); }

/* Dark variant */
.card--dark { background:var(--enzo-800); border-color:var(--enzo-800); color:var(--white); }
.card--dark .card__title { color:var(--white); }
.card--dark .card__text  { color:var(--enzo-300); }

/* --- §6 · Mahsulot sahifasi --------------------------------------------- */

/* Nonda yo'l. Bosh sahifada yo'q — u yerda qaytadigan joy ham yo'q. */
.crumbs { display:flex; flex-wrap:wrap; gap:var(--s-8); color:var(--enzo-300); margin-bottom:var(--s-24); }
.crumbs a { color:var(--enzo-300); }
.crumbs a:hover { color:var(--white); }
.crumbs [aria-current] { color:var(--white); }

/* Mahsulot hero'si bosh sahifanikidan boshqacha: u yerda rasm butun ekranni
   egallaydi va matn rasm ustida turadi, bu yerda esa ikkisi yonma-yon —
   mahsulotning o'zi ko'rinishi kerak, kayfiyat emas. */
.phero { padding-block:var(--s-72) var(--s-96); }
.phero__copy  { grid-column:1 / -1; }
/* Kenglik cheklandi: 1920px da yetakchi matn bitta uzun qatorga cho'zilib
   ketardi, boshqa sahifalarda esa ikki qator edi — bir xil bo'lishi kerak. */
.phero__lead  { margin-top:var(--s-24); color:var(--enzo-300); max-width:34ch; }
.phero__cta   { margin-top:var(--s-40); }
/* Hero — brend shakli butun bo'lim foni bo'lib yotadi (mijoz qarori,
   2026-08-18). Avval mahsulot to'rtburchak quti ichida edi; endi ko'k fon,
   pastida oq shakl, mahsulot esa oqning ustida turadi va qirradan oshadi.
   Shakl alohida qatlam: bo'limning o'zi qirqilsa mahsulot ham kesilardi. */
/* Fon — to'q ko'k, o'ng-pastda och kulrang uchburchak. Qirra to'g'ri
   diagonal: chap-past burchakdan o'ng chetning 51,5% igacha (referens
   skrinshotdan o'lchandi). Mahsulot shu kulrang yuzada turadi.

   Diagonal butun balandlik bo'ylab o'tgani uchun matn zonasi hisoblab
   chiqiladi: matn ustuni x=45% gacha yetadi, u yerda kulrang 78% dan
   boshlanadi — demak matn 78% dan yuqorida tugashi shart. Pastki
   bo'shliq shuni ta'minlaydi va piksel testi bilan tekshiriladi. */
.phero { position:relative; overflow:hidden; background:var(--enzo-800);
  padding-block:var(--s-56) var(--s-40); }
.phero__shape {
  position:absolute; inset:0; background:var(--shot-bg);
  clip-path:polygon(0 100%, 100% 51.5%, 100% 100%);
}
.phero > .container { position:relative; z-index:1; }
.phero__media { grid-column:1 / -1; margin-top:var(--s-32); }
.phero__media img { display:block; width:100%; height:auto; position:relative; z-index:1; }

/* Jadval keng — o'z ichida gorizontal siljiydi, sahifa esa qimirlamaydi */
/* Muammo va Yechim — ikki TENG ustun. Avval muammo `head` (sarlavhali),
   yechim esa `body-col` (oddiy matn) edi: ikkisi bir xil vaznda
   ko'rinmasdi va yechim ikkinchi darajali bo'lib qolgan edi. */
/* Mahsulot almashtirgichi hero ICHIDA, nonda yo'l qatorida (mijoz qarori
   2026-08-18). Avval hero bilan keyingi bo'lim orasida alohida oq qator
   bo'lib turardi — ikki bo'lim orasiga tiqilgandek ko'rinardi va
   sahifaga qo'shimcha balandlik qo'shardi. Endi u bo'sh joyni
   egallamaydi: nonda yo'lning o'ng tomonida turadi. */
/* Nav matn ustunidan tashqarida — 6 ustunga sig'masdi va ikki qatorga
   bo'linib, matnni pastga surib yuborardi. Endi to'liq kenglikda. */
.phero__nav { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-16) var(--s-24); margin-bottom:var(--s-40); }
.pswitch__list {
  display:flex; flex-wrap:wrap; gap:var(--s-24); list-style:none; margin:0; padding:0;
}
.pswitch__list a {
  color:var(--enzo-300); text-decoration:none; white-space:nowrap;
  transition:color 150ms var(--ease);
}
.pswitch__list a:hover { color:var(--white); }
/* Joriy mahsulot — havola emas, joyni bildiruvchi belgi */
.pswitch__list a[aria-current] { color:var(--white); font-weight:600; }
@media (min-width:768px) { .phero__nav { justify-content:space-between; } }

.duo__col { grid-column:1 / -1; }
.duo__col + .duo__col { margin-top:var(--s-40); }
.duo__col h2 { margin-top:var(--s-16); }
.duo__text { margin-top:var(--s-24); color:var(--ink-60); }
@media (min-width:768px) {
  .duo__col { grid-column:span 6; }
  .duo__col + .duo__col { margin-top:0; }
}

/* Xarakteristika va jadval endi YONMA-YON emas, KETMA-KET va ikkalasi
   ham to'liq kenglikda. Avval jadval 7 ustunga siqilgan edi: uzun
   qiymatlar ikki qatorga bo'linib, qatorlar bir-biriga yopishardi.
   Bo'lim balandroq bo'ldi, lekin o'qilishi ancha oson. */
.tech__specs { grid-column:1 / -1; margin-top:var(--s-32); }
.tech__table { grid-column:1 / -1; margin-top:var(--s-56); }
@media (min-width:1024px) {
  .tech__specs { margin-top:var(--s-40); }
  /* Ro'yxat ikki ustunda — 5-7 qator bitta ustunda cho'zilib ketardi */
  .tech__specs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s-72); border-top:0; }
  .tech__specs > div { border-top:1px solid var(--line); border-bottom:0; }
}
.spec-table__cap  { margin-top:var(--s-40); margin-bottom:var(--s-16); color:var(--enzo-800); }
.spec-table__wrap { overflow-x:auto; }
.spec-table { width:100%; border-collapse:collapse; text-align:left; }
/* Qator balandligi oshirildi: 12px da uzun qiymatlar ikki qatorga
   bo'linganda qo'shni qatorlar bilan qo'shilib ketardi */
.spec-table th, .spec-table td { padding:var(--s-16) var(--s-24); border-bottom:1px solid var(--line); vertical-align:top; line-height:1.5; }
.spec-table th:first-child, .spec-table td:first-child { padding-left:0; }
.spec-table th:last-child,  .spec-table td:last-child  { padding-right:0; }
.spec-table th { color:var(--ink-60); font-weight:600; white-space:nowrap; }
.spec-table td:first-child { font-weight:600; white-space:nowrap; }
.spec-table tbody tr:last-child td { border-bottom:0; }

@media (min-width:1024px) {
  /* Hero balandligi: mahsulot va matn ikkalasiga ham joy kerak, aks holda
     mikser avtomobili header'ga tegib qoladi. */
  /* Referens nisbati: balandlik ≈ kenglikning 0,31 i */
  /* Matn pastroqqa tushirildi (mijoz qarori): yuqorida header bilan
     orasidagi bo'shliq kattaroq, matn esa kadr o'rtasiga yaqinroq. */
  .phero { min-height:clamp(490px, 34vw, 580px); padding-block:var(--s-128) var(--s-40);
    display:flex; align-items:center; }
  .phero > .container { width:100%; }
  /* Matn tepaga tekislanadi — markazda bo`lsa u pastga tushib, oq shakl
     qirrasi ostiga o`tib qolardi va och-ko`k matn oqda o`qilmasdi. */
  /* Pastki bo'shliq matn blokini yuqoriroq ko'taradi. Kulrang uchburchak
     qirrasi butun balandlik bo'ylab o'tadi, matn esa uzunligiga qarab
     o'sadi — bu bo'shliq qirra bilan matn orasidagi zaxirani kafolatlaydi. */
  /* Matn ustuni kengaydi va sarlavha kattalashdi — oʻrtada boʻsh havo
     qolib ketgan edi (mijoz qarori 2026-08-19). */
  .phero__copy  { grid-column:1 / span 6; align-self:center; padding-bottom:var(--s-160); }
  .phero__copy h1 { font-size:clamp(48px, 5.4vw, 86px); }
  .phero__lead { max-width:40ch; font-size:20px; }
  /* Mahsulot o'ng ustunda, pastga tekislanadi — kulrang yuzada turadi */
  /* Mahsulot o'z ustunida qoladi (7–12), lekin o'ng tomonda konteyner
     chetidan tashqariga chiqadi — kadr kattaroq bo'ladi va o'rtadagi
     bo'sh maydon yo'qoladi. Ustunlar kesishmasligi shart: kesishsa
     setka ularni ikki qatorga tushiradi va hero ikki baravar cho'ziladi. */
  .phero__media { grid-column:7 / span 6; margin-top:0; align-self:end;
    margin-right:calc(-1 * var(--edge)); }
  /* Mahsulot sahifasida uchta raqam — bosh sahifadagi to'rttasi 2×2 bo'lib
     turadi, bu yerda esa gorizontal qator (PROMPT.md §6.1). */
  /* Mahsulot sahifasida quvvat blokida tugma yo'q (u hero'dagi bilan bir
     joyga olib borardi), shuning uchun raqamlar pastga emas, markazga
     tekislanadi — aks holda blok ostida katta bo`sh maydon qolardi. */
  .capacity__nums--3 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-32) var(--gutter); align-self:center; }
}

/* Raqam emas, diapazon (M100–M500) — u yerda 72px juda katta */
/* Mahsulot sahifasida uchta raqam bir qatorda turadi va HAMMASI bir xil
   o'lchamda bo'lishi kerak. Umumiy 72px da "M100–M500" ustunga sig'masdi,
   shuning uchun bu yerda biroz kichikroq — lekin uchalasi ham teng. */
.capacity__nums--3 .cap__num { font-size:clamp(34px,4.2vw,58px); }

/* Qiymatlar o'lchami har xil (raqam katta, diapazon kichik) — izoh qatorlari
   bir chiziqda turishi uchun katak ichida pastga tekislanadi. */
.capacity__nums--3 > div { display:flex; flex-direction:column; justify-content:flex-end; }


/* Qirrali bo'lim ortidagi fon. `clip-path` bilan qirqilgan joyda sahifa
   foni (oq) ko'rinardi, yuqoridagi bo'lim esa --surface edi — qirra
   ustida rang sakrardi. O'rovchi shu bo'shliqni to'ldiradi. */
.roof-bg { background:var(--surface); }

/* Turkum kartochkasi — jadval o'rniga (ЖБИ). Kod yirik va rangli:
   foydalanuvchi loyihada aynan shu belgini qidiradi. */
.tcard { display:flex; flex-direction:column; gap:var(--s-8); }
.tcard__kod { font-size:28px; font-weight:700; letter-spacing:-0.02em; color:var(--enzo-500); line-height:1; }
.tcard__nom { color:var(--enzo-800); }
.tcard__marka { font-weight:600; color:var(--ink); }
.tcard__olcham { color:var(--ink-60); }

/* --- §5.8b · Bosh direktor murojaati ------------------------------------ */

.boss__photo { grid-column:1 / -1; aspect-ratio:3/4; background:var(--surface); }
.boss__copy  { grid-column:1 / -1; margin-top:var(--s-32); }

.boss__quote { margin:var(--s-24) 0 0; }
.boss__quote p + p { margin-top:var(--s-16); }
.boss__quote .t-body { color:var(--ink-60); }

/* Imzo — chiziq bilan ajratiladi, iqtibos qayerda tugaganini ko'rsatadi */
.boss__sign { margin-top:var(--s-32); padding-top:var(--s-16); border-top:1px solid var(--line); }
.boss__role { margin-top:var(--s-4); color:var(--ink-60); }

@media (min-width:1024px) {
  .boss__photo { grid-column:1 / span 4; }
  .boss__copy  { grid-column:6 / span 7; margin-top:0; align-self:center; }
}

/* --- §5.9 · Nima uchun ENZO · bento ------------------------------------- */
/* ✎ 2026-08-16: raqamlangan ro'yxat (01–04) bento'ga o'tkazildi.
   Ro'yxat qadamlar ketma-ketligini anglatardi — bu yerda esa ketma-ketlik
   yo'q, to'rttala ustunlik teng va mustaqil. Bento buni to'g'ri ko'rsatadi
   va eng kuchli va'dani kattaroq blokka chiqaradi.
   Referensdagi yumaloq burchak va ko'k gradient OLINMADI (DESIGN.md §6.1
   radius 0, §10 gradient taqiqlangan) — ierarxiya o'lchov va fon bilan. */

.bento {
  grid-column:1 / -1; margin-top:var(--s-40);
  display:grid; grid-template-columns:1fr; gap:var(--gutter);
}

.bento__cell {
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line);
  padding:var(--s-32);
}
/* Ikonka sarlavha YONIDA emas, USTIDA — bu bezak emas, kartochkaning
   belgisi: bir qarashda qaysi kartochka nima haqida ekani ko'rinadi.
   §10 qoida 16 ga istisno, mijoz qarori 2026-08-16. */
.bento__icon { width:32px; height:32px; margin-bottom:var(--s-16); color:var(--enzo-500); }
.bento__icon svg { width:100%; height:100%; }
.bento__cell--lead .bento__icon { color:var(--enzo-300); }

.bento__title { margin-bottom:var(--s-12); }
.bento__text  { color:var(--ink-60); }

/* Yetakchi blok — matn pastga bosiladi, sarlavha tepada qoladi.
   Baland blok ichida bo'sh o'rta hosil bo'ladi: bu ataylab, u og'irlik beradi. */
.bento__cell--lead { background:var(--enzo-800); border-color:var(--enzo-800); color:var(--white); }
.bento__cell--lead .bento__title { color:var(--white); }
.bento__cell--lead .bento__text  { color:var(--enzo-300); margin-top:auto; padding-top:var(--s-40); }

.bento__cell--stat { justify-content:center; }
.bento__num  { font-size:clamp(36px,4vw,56px); color:var(--enzo-800); }
.bento__unit { margin-top:var(--s-8); color:var(--ink-60); }

@media (min-width:640px)  { .bento { grid-template-columns:repeat(2, minmax(0,1fr)); } }

@media (min-width:1024px) {
  /* 12 ustunli setka. Yetakchi blok — chapda 5 ustun, 3 qator balandlikda;
     qolgan to'rttasi o'ngda 7 ustunni ikkitadan bo'lib oladi. */
  .bento { grid-template-columns:repeat(12, minmax(0,1fr)); }
  .bento__cell--lead { grid-column:1 / span 5; grid-row:1 / span 2; }
  .bento__cell--w6   { grid-column:span 4; }
  .bento__cell--w6:nth-of-type(2) { grid-column:6 / span 4; }
  .bento__cell--w6:nth-of-type(3) { grid-column:10 / span 3; }
  .bento__cell--w6:nth-of-type(4) { grid-column:6 / span 3; }
  .bento__cell--w6:nth-of-type(5) { grid-column:9 / span 4; }
}

/* --- §5.11 · Hamkorlar -------------------------------------------------- */

/* Hamkorlar — cheksiz yuruvchi bitta qator (mijoz qarori 2026-08-19).
   Avval 2×4 setka bo'lib bir joyda turardi va ko'p joy egallardi.
   Ro'yxat ikki marta takrorlanadi: birinchi nusxa chapga chiqib
   ketguncha ikkinchisi o'rniga keladi — uzilish ko'rinmaydi. */
/* ✎ To'liq ekran kengligi, so'nish maskasisiz (mijoz qarori, 2026-08-21).
   Lenta `.container` dan chiqib ekranning ikki chetiga tegadi va uzluksiz
   yuradi: chetda to'xtagandek ko'rinadigan joy qolmaydi.

   Chetlardagi gradient maskalar OLIB TASHLANDI. Ular lenta konteyner ichida
   turganda kerak edi — logo chegarada birdan kesilib qolmasin uchun. Endi
   kesilish joyi ekranning o'z cheti, ya'ni yashiradigan narsaning o'zi yo'q.

   `--vw` — scrollbar chiqarib tashlangan kenglik (main.js §15). `100vw`
   scrollbar'ni ham qo'shib hisoblaydi va lenta o'ngga surilib qolardi. */
.logos {
  grid-column:1 / -1; margin-top:var(--s-40);
  width:var(--vw, 100vw);
  margin-left:calc(50% - var(--vw, 100vw) / 2);
  overflow:hidden; position:relative;
}
/* Ro'yxat UCH marta takrorlanadi, ikki emas. Sabab o'lchov: bitta to'plam
   ~1600px, keng ekran esa 1920px. Ikki nusxada lenta -50% ga yetganda
   o'ngdan bo'sh joy ochilib qolardi — uch nusxada bunday holat yo'q. */
.logos__track { display:flex; width:max-content; animation:logo-yur 38s linear infinite; }
@keyframes logo-yur { from { transform:translateX(0); } to { transform:translateX(-33.3333%); } }
/* ✎ Kursor ostida to'xtash bekor qilindi (mijoz qarori, 2026-08-21):
   lenta hech to'xtamasligi kerak. */
@media (prefers-reduced-motion: reduce) { .logos__track { animation:none; } }

/* ✎ Mobilda lenta ikki qatorga bo'linadi (mijoz qarori, 2026-08-22).
   Bitta qatorda logolar telefon ekranida juda kichrayib ketardi.

   Harakat ham to'xtaydi: barmoq bilan surib ko'riladi. Telefonda o'z-o'zidan
   yuradigan lenta sahifa scroll'i bilan raqobatlashadi, ikkinchidan
   takrorlangan nusxalar (lenta uch marta yozilgan) ikki qatorda ko'zga
   tashlanardi — shuning uchun mobilda faqat ASLI ko'rsatiladi. */
/* Plitka o'rniga ixcham katak: balandligi qat'iy, kengligi kontentga
   qarab — qator bir tekis yuradi. */
.logo-tile { flex:0 0 auto; height:84px; display:flex; align-items:center; justify-content:center; padding-inline:var(--s-40); }
/* Logolar bitta neytral rangda (#5B6478 = --ink-60, fayl ichiga yozilgan).
   Sakkiztasi sakkiz xil brend rangida bo'lsa qator alacha bo'lib ketadi.
   Rang CSS dan emas, fayldan keladi: <img> ichidagi SVG ota-elementning
   currentColor ini ko'rmaydi — u alohida hujjat. */
/* Logo plitkaning butun kengligini egallamaydi — atrofida havo qoladi
   (mijoz qarori 2026-08-18). Ikkala o'lcham ham cheklanadi: keng yozuvli
   logolar (JBA GROUP) kenglikka, belgili logolar (Central Beton) esa
   balandlikka tayanadi — bittasini cheklash yetmaydi. */
/* Optik balans. Bir xil balandlik yetmaydi: keng yozuvli logo (JBA GROUP
   nisbati 6,4:1) bir xil balandlikda ancha kattaroq koʻrinadi, chunki
   koʻproq maydon egallaydi. Har logoning boʻyoq maydoni oʻlchandi va
   maydonlar tenglashadigan balandlik hisoblandi (qisman tuzatish — 0,75
   daraja, aks holda keng yozuvlar haddan tashqari kichrayadi). */
/* ✎ O'lcham endi `--logo-h` o'zgaruvchisida (2026-08-22). Sabab: mobil
   qoida `height:32px !important` bilan HAMMA logoni tenglashtirib
   qo'yardi va yuqoridagi optik balans yo'qolardi — keng yozuvli logolar
   kattaroq, belgili logolar kichikroq ko'rinardi. Endi mobil ham,
   hamkorlar bo'limi ham shu bitta ro'yxatni koeffitsiyent bilan
   ko'paytiradi, ya'ni balans hamma joyda bir xil qoladi. */
.logo-tile img { width:auto; max-width:none; height:var(--logo-h, 44px); object-fit:contain; }
.logo-tile img[src$="beton-max.svg"]           { --logo-h:35px; }
.logo-tile img[src$="jba-group.svg"]           { --logo-h:38px; }
.logo-tile img[src$="rivoj.svg"]               { --logo-h:40px; }
.logo-tile img[src$="central-beton.svg"]       { --logo-h:47px; }
.logo-tile img[src$="dilbar-tt-house.svg"]     { --logo-h:53px; }
.logo-tile img[src$="ecoizolit.svg"]           { --logo-h:53px; }
.logo-tile img[src$="dream-residence.svg"]     { --logo-h:54px; }
.logo-tile img[src$="megamix.svg"]             { --logo-h:54px; }
.logo-tile img[src$="quvasoy-chek-shifer.svg"] { --logo-h:55px; }
@media (max-width:767px) { .logo-tile img { height:calc(var(--logo-h, 44px) * 0.68); } }
@media (min-width:768px)  { .logo-tile { height:96px; padding-inline:var(--s-56); } }

/* --- §5.12 · Mijozlar fikri · vertikal video tasmasi -------------------- */
/* ✎ Qayta ishlangan (mijoz qarori, 2026-08-16). Avval to'q kvadrat
   kartochkalar ichida kichkina 96px poster bor edi — matn siqilib, 6-7 ta
   kalta qatorga bo'linib ketardi. Endi manba formatining o'zi ishlatiladi:
   Telegram intervyulari vertikal (9:16), demak poster ham vertikal.
   Gorizontal tasma — video sonidan qat'i nazar bo'lim balandligi o'zgarmaydi. */

/* ✎ 2026-08-16: vertikal 9:16 tasma sinab ko'rildi, mijoz uni tanlamadi.
   Endi kartochkalar setkaning ikki yon chizig'igacha cho'ziladi —
   bo'lim boshqa bo'limlar bilan bir kenglikda tugaydi. Poster 16:9:
   zavod video kadrlari ham shu nisbatda (1280×720). */
.reels {
  grid-column:1 / -1; margin-top:var(--s-40);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gutter);
}
@media (max-width:767px) { .reels { grid-template-columns:1fr; } }

/* ✎ Ikkita vertikal video (2026-08-21). Uchta 16:9 to'ldirgich o'rniga
   mijozning haqiqiy 9:16 kadrlari. Ikki ustun setkaning yarmini egallaydi:
   vertikal kadr uch ustunda juda ingichka bo'lib qolardi. */
/* ✎ 2026-08-21 (kechqurun): kartochkalar setkaning butun kengligiga
   yoyildi. Avval ular 680px bilan cheklangan edi va bo'limning o'ng
   yarmi bo'sh qolardi. */
.reels--2 { grid-template-columns:repeat(2, minmax(0,1fr)); max-width:none; }
@media (max-width:767px) { .reels--2 { grid-template-columns:1fr; } }

/* Kadr endi GORIZONTAL. Vertikal video o'rtada, to'liq ko'rinadi (hech
   narsa kesilmaydi), yonlardagi bo'sh joyni esa o'sha videoning o'z
   kadri to'ldiradi — kattalashtirilgan va blur qilingan holda.

   Nima uchun rasm, video emas: fon uchun ikkinchi video qo'yilsa har
   bir kartochka ikki marta yuklanardi (~22 MB → ~44 MB). Poster rasmi
   bir xil kadrni beradi va deyarli hech narsa turmaydi. */
.reel__poster {
  position:relative; display:block;
  aspect-ratio:16/10; background:var(--enzo-800);
  overflow:hidden;
}
.reel__bg {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  /* Blur chekkalarda so'nib qolmasin uchun kadr biroz kattalashtiriladi */
  transform:scale(1.15);
  filter:blur(28px) saturate(1.15) brightness(.62);
}
.reel__frame {
  position:relative; height:100%; aspect-ratio:9/16;
  margin-inline:auto; overflow:hidden;
}
.reel__poster video { width:100%; height:100%; object-fit:cover; display:block; }
/* Telefonda gorizontal kadr mantiqsiz: ustun bitta, kenglik ~360px,
   ya'ni 16:10 kadrda vertikal video atigi ~200px kenglikda qolardi.
   Mobilda kadrning O'ZI vertikal bo'ladi — video butun ustunni egallaydi,
   blur fon esa keraksiz (yon tomonda to'ldiriladigan joy yo'q). */
@media (max-width:767px) {
  .reel__poster { aspect-ratio:9/16; }
  .reel__frame { width:100%; aspect-ratio:auto; }
  .reel__bg { display:none; }
}
.reel__poster.is-on .reel__play { display:none; }

/* Play tugmasi — kvadrat, radius yo'q (DESIGN.md §6.1).
   ✎ Rang oqdan QIZILGA o'zgardi (mijoz qarori, 2026-08-21): odamda
   "qizil uchburchak = video" assotsiatsiyasi allaqachon o'rnashgan,
   oq kvadrat esa bir zum o'ylatib qo'yadi. Shakl baribir kvadrat
   qoladi — saytda hech qayerda radius yo'q. */
.reel__play {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  background:var(--play-red); color:var(--white);
  transition:background 150ms var(--ease), transform 150ms var(--ease);
}
.reel__play svg { width:20px; height:20px; margin-left:2px; }
.reel__poster:hover .reel__play {
  background:var(--play-red-dark);
  transform:translate(-50%,-50%) scale(1.06);
}

.reel__quote { margin-top:var(--s-16); color:var(--ink); text-wrap:pretty; }
/* Iqtibos matni olib tashlangach ism to'g'ridan-to'g'ri kadr ostida
   turadi — oraliq biroz kattaroq. */
.reel__name  { margin-top:var(--s-16); }
.reel__role  { margin-top:var(--s-4); color:var(--ink-60); }

/* --- §5.13 · Kalkulyator ------------------------------------------------ */

.calc__controls { grid-column:1 / -1; margin-top:var(--s-32); }
.calc__result   { grid-column:1 / -1; margin-top:var(--s-32); background:var(--white); border:1px solid var(--line); padding:var(--s-32); }

/* Anchor havola bosilganda yopishqoq header boʻlim boshini bosib qolmasin.
   768px da sarlavha header ostidan atigi 8px pastda qolardi. */
section[id] { scroll-margin-top:var(--s-24); }

.field { margin-bottom:var(--s-24); }
.field > label { display:block; margin-bottom:var(--s-8); }
.field select,
.field input[type=text],
.field input[type=tel],
.field input[type=email],
.field input[type=number] {
  width:100%; height:56px; padding:0 var(--s-16);
  border:1px solid var(--line-2); background:var(--white); color:var(--ink);
  font:inherit; font-size:17px;
}
/* Brauzerning o'z o'qi ramka chetiga yopishib turardi. O'z belgimiz
   qo'yiladi va u o'ng chetdan 20px ichkarida turadi. */
.field select {
  appearance:none; -webkit-appearance:none;
  padding-right:var(--s-56);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%230D3490' d='M1.4 0 7 5.6 12.6 0 14 1.4 7 8.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--s-24) center;
}
.field input[type=tel] { font-variant-numeric:tabular-nums; }
.field select:focus, .field input:focus { outline:none; border-color:var(--enzo-500); border-width:2px; }

/* margin:0 — brauzerning o'z uslubida range'da 2px margin bor, u slayderni
   konteyner chetidan 2px chiqarib yuboradi */
.field input[type=range] { width:100%; height:32px; margin:0; accent-color:var(--enzo-500); }
.field__val { float:right; font-weight:600; color:var(--enzo-800); }

/* Viloyat + tuman yonma-yon: bitta savolning ikki qadami, shuning uchun
   ular alohida qatorlarga tarqalmaydi */
.field2 > .field { margin-bottom:var(--s-24); }
@media (min-width:768px){
  .field2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-24); margin-bottom:var(--s-24); }
  .field2 > .field { margin-bottom:0; }
}
.calc__hint { margin-top:var(--s-8); color:var(--ink-60); }
/* Tanlov yoʻq, faqat maʼlumot: quti chizilmaydi, matn oʻz holicha turadi */
.field--info p { margin-top:var(--s-8); font-weight:600; color:var(--enzo-800); }

.calc__price { color:var(--enzo-800); margin:var(--s-16) 0; }
.calc__list { margin:var(--s-24) 0; border-top:1px solid var(--line); }
.calc__list li { display:flex; justify-content:space-between; gap:var(--s-16); padding:var(--s-12) 0; border-bottom:1px solid var(--line); }
.calc__list span:first-child { color:var(--ink-60); }
/* Tor ekranda qiymat uzun bo'lsa («Hududga qarab alohida kelishiladi»,
   manzil, 2ПК o'lchami) ikki ustun bir-birini siqib, matn harflarga
   bo'linib ketardi. Kichik ekranda qiymat pastki qatorga tushadi. */
@media (max-width:519px) {
  .calc__list li { flex-direction:column; gap:var(--s-4); }
  .calc__list span:last-child { font-weight:600; color:var(--enzo-800); }
}
.calc__note { color:var(--ink-40); margin-top:var(--s-8); }
.calc__result .btn { width:100%; margin-top:var(--s-24); }

@media (min-width:1024px) {
  .calc__controls { grid-column:1 / span 5; margin-top:var(--s-40); }
  .calc__result   { grid-column:7 / span 6; margin-top:var(--s-40); position:sticky; top:calc(var(--header-h) + var(--s-24)); align-self:start; }
}

/* --- §5.14 · Ish jarayoni ---------------------------------------------- */
/* To'lib boruvchi chiziq: qadamlar bo'ylab o'tgan chiziq o'quvchi bilan
   birga oldinga siljiydi, yetib borgan qadam yonadi.

   Katta ekranda bo'lim ekranga qadaladi (sticky) va shu turgan payt
   chiziq to'ladi; to'lib bo'lgach sahna joyidan qo'zg'aladi. Yo'l
   uzunligi — 160svh (pastdagi izohga qarang).

   ⚠️ Scroll hech qachon to'sib qo'yilmaydi. JS faqat `--p` sonini
   yangilaydi, scroll'ga umuman tegmaydi. */

/* Bo'lim tashqi paddingi nolga tenglangan — ichki oraliqni .pin__stage
   beradi (bo'lim bir vaqtlar qadalgan sahna edi, o'sha tuzilma qoldi). */
.process-sec { padding-block:0; }

.pin { position:relative; }
.pin__stage { padding-block:var(--s-72); }

.process {
  grid-column:1 / -1; margin-top:var(--s-56);
  display:grid; gap:var(--s-32);
  position:relative;
  --p:1;                       /* JS yo'q bo'lsa — to'liq to'lgan holat */
}

/* Mobil: chiziq vertikal, chap chetda */
.process::before, .process::after {
  content:''; position:absolute; left:3px; top:0; bottom:0; width:2px;
}
.process::before { background:var(--line); }
.process::after {
  background:var(--enzo-500);
  transform:scaleY(var(--p)); transform-origin:50% 0;
}
.pstep { position:relative; padding-left:var(--s-32); }
/* Qadam belgisi — chiziq ustidagi kvadrat (DESIGN.md §6.1: radius yo'q) */
.pstep::before {
  content:''; position:absolute; left:0; top:10px; width:8px; height:8px;
  background:var(--line-2); z-index:1;
  transition:background 240ms var(--ease);
}
.pstep.is-lit::before { background:var(--enzo-500); }

.pstep__n {
  font-size:clamp(40px,4vw,56px); font-weight:700; color:var(--line-2);
  letter-spacing:-0.03em; line-height:1;
  transition:color 240ms var(--ease);
}
.pstep.is-lit .pstep__n { color:var(--enzo-800); }
/* Matn ham qadam bilan birga «yonadi»: yonguncha bir oz orqada turadi */
.pstep__title, .pstep__text { transition:opacity 240ms var(--ease); }
.pstep:not(.is-lit) .pstep__title, .pstep:not(.is-lit) .pstep__text { opacity:.45; }
.pstep__title { margin-top:var(--s-16); }
.pstep__text { margin-top:var(--s-12); color:var(--ink-60); }

@media (min-width:1024px) {
  /* Yo'l uzunligi 260svh: sahna 100svh, demak to'lishga 160svh siljish
     qoladi — 900px ekranda ~1440px. Aynan shu masofa animatsiya tezligini
     belgilaydi.

     ✎ Tarix (2026-08-22): yo'l avval 160svh ga qisqartirilgan, keyin
     qadash butunlay olib tashlangan, so'ng yana qaytarilgan edi. Mijoz
     dastlabki tezlikni tanladi — 260svh o'z holida qoldi. Muammo yo'l
     uzunligida emas edi: u chiziq to'lgandan KEYIN ham joyida qolardi.
     Yechim pastda — «is-done» klassi. */
  .pin { height:260svh; }
  .pin__stage {
    position:sticky; top:var(--header-h);
    height:calc(100svh - var(--header-h));
    display:flex; align-items:center;
    padding-block:0;
  }

  /* ✎ Yo'l BIR MARTA ishlatiladi (2026-08-22). Chiziq to'lgach JS shu
     klassni qo'yadi: qadash tugaydi va bo'lim oddiy blokka aylanadi.
     Sababi — ikkinchi marta o'sha yerdan o'tganda (ayniqsa yuqoriga
     qaytganda) ekranda hech narsa o'zgarmaydigan yarim ekranlik masofa
     paydo bo'lardi: sahifa siljiydi, ko'rinish qotib turadi.

     Sahifa balandligi shu payt qisqaradi, JS esa scroll'ni aynan shuncha
     suradi — ko'z uchun hech narsa qimirlamaydi (js/main.js §16). */
  .pin.is-done { height:auto; }
  /* Sahna o'lchamiga TEGILMAYDI — faqat qadash bekor qilinadi. Balandlik
     yoki padding o'zgarsa, yig'ishtirish paytidagi scroll hisobi ham
     buzilar edi: JS aynan yo'l uzunligicha suradi, boshqa hech narsa
     o'zgarmasligi kerak. */
  .pin.is-done .pin__stage { position:static; }

  /* ✎ Ustunlar orasidagi vertikal ajratuvchilar olib tashlandi (2026-08-21):
     ularning o'rnini gorizontal chiziq egalladi — ikkalasi birga bo'lsa
     setka to'r bo'lib ko'rinardi. */
  .process { grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-72);
    padding-top:var(--s-40); margin-top:var(--s-72); }

  .process::before, .process::after {
    left:0; right:0; top:0; bottom:auto; width:auto; height:2px;
  }
  .process::after { transform:scaleX(var(--p)); transform-origin:0 50%; }

  .pstep { padding-left:0; }
  .pstep::before { left:0; top:calc(var(--s-40) * -1 - 3px); }
}

@media (prefers-reduced-motion:reduce) {
  /* Harakat kamaytirilgan bo'lsa qadash ham, to'lish ham yo'q:
     chiziq to'la, qadamlar yongan, bo'lim oddiy oqimda turadi. */
  .pin { height:auto; }
  .pin__stage { position:static; height:auto; display:block; padding-block:var(--s-72); }
  .process { --p:1; }
  .pstep::before { background:var(--enzo-500); }
  .pstep__n { color:var(--enzo-800); }
  .pstep__title, .pstep__text { opacity:1; }
}

/* --- §5.15 · FAQ akkordeon --------------------------------------------- */

.faq { border-top:1px solid var(--line); }
.faq__item { border-bottom:1px solid var(--line); }
.faq__q {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s-24);
  padding:var(--s-24) 0; text-align:left;
  font-size:clamp(18px,1.5vw,20px); font-weight:500; color:var(--enzo-800);
  transition:color 150ms var(--ease);
}
.faq__item.is-open .faq__q { color:var(--enzo-500); }
.faq__sign { font-size:24px; line-height:1; color:var(--enzo-500); flex:none; }
.faq__a { display:grid; grid-template-rows:0fr; transition:grid-template-rows 250ms var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows:1fr; }
.faq__a > div { overflow:hidden; }
.faq__a p { color:var(--ink-60); padding-bottom:var(--s-24); }

/* To'q fon — kulrang bo'lim ichida kontrast beradi.
   Ierarxiya: raqam (H2) > izoh > tugma. */
/* `grid-column:1 / -1` SHART: blok endi `.grid` ning bevosita bolasi
   (savollardan keyin), 12 ustunli setkada esa joylashtirilmagan element
   BITTA ustunni egallab, ip kabi ingichka boʻlib qolardi. */
.faq__aside { grid-column:1 / -1; background:var(--enzo-800); color:var(--white); padding:var(--s-32); margin-top:var(--s-40); }
.faq__aside-lead { color:var(--enzo-300); }
.faq__aside-tel {
  display:flex; align-items:center; gap:var(--s-12);
  margin-top:var(--s-12);
  transition:color 150ms var(--ease);
}
.faq__aside-tel svg { width:22px; height:22px; flex:none; color:var(--enzo-300); }
.faq__aside-tel:hover { color:var(--enzo-300); }
.faq__aside-note { color:var(--enzo-300); margin-top:var(--s-8); }
.faq__aside .btn { width:100%; margin-top:var(--s-24); }

@media (min-width:1024px) {
  /* ✎ Chap ustun o'ng ustun bilan pastdan tekislanadi (mijoz qarori,
     2026-08-16): aloqa bloki ustunning pastiga bosiladi va uning pastki
     chegarasi oxirgi savolning chizig'i bilan bitta liniyada turadi.
     `position:sticky` olib tashlandi — u pastdan tekislashga to'sqinlik
     qilardi va bu yerda foydasi ham yo'q edi (ustun uzun emas). */
  /* ✎ 2026-08-22: `.faq__aside` DOM'da savollar ROʻYXATIDAN KEYIN turadi
     (mijoz eskizi — telefonda avval savollar, keyin aloqa bloki). Desktopda
     esa u yana chap ustunning pastiga qaytariladi: uchala element ham
     birinchi qatorda, blok `align-self:end` bilan pastga bosiladi.
     Qatorning balandligini savollar roʻyxati beradi — u uzun, shuning uchun
     sarlavha (tepada) va blok (pastda) hech qachon ustma-ust tushmaydi. */
  .faq-sec .faq__head  { grid-row:1; grid-column:1 / span 4; align-self:start; }
  .faq-sec .faq__aside { grid-row:2; grid-column:1 / span 4; align-self:end; margin-top:var(--s-32); }
  /* Roʻyxat ikkala qatorni ham egallaydi — u qatorlar balandligini
     belgilaydi va blok uning pastki chizigʻiga tekislanadi.
     Sarlavha 1-qatorda, blok 2-qatorda: ular hech qachon ustma-ust
     tushmaydi (bitta qatorda ikkovini turgʻizib koʻrildi — sarlavha uzun
     boʻlgan kunda blok uning ustiga chiqib qolardi). */
  .faq-sec .body-col   { grid-row:1 / span 2; grid-column:6 / span 7; }
}

/* --- §5.16 · Galereya mozaikasi ---------------------------------------- */

/* ✎ Qayta o'lchandi (2026-08-16). Avval mozaika edi: eng katta plitka
   ~724px kenglikda, unga retina uchun 1448px kerak — video kadrlari esa
   1280×720. Ya'ni eng ko'zga tashlanadigan plitka eng sifatsizi bo'lardi.
   Endi plitkalar teng, har biri ~475px (2× uchun 950px kerak) — 1280px
   kadr bemalol yetadi. Plitka kichraydi, soni 6 → 9 ga oshdi.
   Nisbat 16:9 — video kadrining o'z nisbati, kesish yo'q. */
.mosaic {
  grid-column:1 / -1; margin-top:var(--s-40);
  display:grid; grid-template-columns:1fr; gap:var(--s-32) var(--gutter);
}
@media (min-width:640px)  { .mosaic { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1024px) { .mosaic { grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* --- Galereya · kartochkalar to'plami (deck) ---------------------------- */
/* Markazdagi kadr to'liq ko'rinadi, yonidagilar kichrayib va so'nib boradi.
   Chuqurlik `scale` va `opacity` bilan beriladi — soya ham, burilish ham
   ishlatilmaydi (DESIGN.md §10 qoida 2, §8). */

.deck { grid-column:1 / -1; margin-top:var(--s-40); display:none; }
.deck.is-on { display:block; }

/* Sarlavha va o'tkazish tugmalari bitta qatorda */
.deck__head { display:flex; flex-direction:column; gap:var(--s-24); }
@media (min-width:640px) {
  .deck__head { flex-direction:row; align-items:center; justify-content:space-between; }
}

.deck__stage {
  position:relative; height:clamp(220px, 34vw, 420px);
  overflow:hidden;
  /* Barmoq bilan yonga surish — bizniki; tikka scroll — brauzerniki */
  touch-action:pan-y;
  cursor:grab;
}
.deck__stage.is-dragging { cursor:grabbing; }
/* Surish paytida animatsiya o'chadi — kartochka barmoq ortidan kechikmasin */
.deck__stage.is-dragging .deck__card { transition:none; }

.deck__card {
  position:absolute; left:50%; top:0;
  width:clamp(280px, 46vw, 640px); aspect-ratio:16/9;
  background:var(--surface); border:1px solid var(--line);
  cursor:pointer; will-change:transform, opacity;
  transition:transform 500ms var(--ease), opacity 500ms var(--ease);
}
.deck__ph { display:block; width:100%; height:100%; }
.deck__card img { width:100%; height:100%; object-fit:cover; }
.deck__card.is-center { cursor:default; border-color:var(--enzo-500); }

/* Uzoqlashtiruvchi oq parda. `--veil` ni JS beradi (0 · 0,34 · 0,68).
   Nega element `opacity` si emas: shaffof kadr orqali ortidagi kadr
   ko'rinib, ikkitasi ustma-ust tushardi. */
.deck__card::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:var(--white); opacity:var(--veil, 0);
  transition:opacity 500ms var(--ease);
}

.deck__cap {
  margin-top:var(--s-24); color:var(--ink-60);
  min-height:1.4em;                       /* almashganda sakramasin */
}

.deck__nav { display:flex; gap:var(--s-8); flex:none; }
.deck__btn {
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); border:1px solid var(--line-2); color:var(--enzo-800);
  transition:background 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}
.deck__btn:hover { background:var(--enzo-800); border-color:var(--enzo-800); color:var(--white); }
.deck__btn svg { width:16px; height:16px; }

/* JS deck'ni yoqsa, oddiy setka yashiriladi */
.mosaic.is-off { display:none; }

.shot { margin:0; }
.shot .ph { display:block; aspect-ratio:16/9; background:var(--surface); }
/* Izoh kadrni dalilga aylantiradi: nima ko'rsatilayotgani aytilsa,
   tomoshabin uni bezak sifatida emas, hujjat sifatida o'qiydi. */
.shot__cap { margin-top:var(--s-12); color:var(--ink-60); }

/* --- §5.17 · Forma ------------------------------------------------------ */

.form__copy { grid-column:1 / -1; }
.form__box  { grid-column:1 / -1; margin-top:var(--s-40); }

.contacts { margin-top:var(--s-40); display:grid; gap:var(--s-16); }
.contacts li { display:flex; gap:var(--s-12); align-items:center; }
.contacts svg { width:20px; height:20px; flex:none; }

.form__box .field > label { color:var(--enzo-300); }
.form__box .btn { width:100%; }
.form__legal { margin-top:var(--s-16); color:var(--enzo-300); }

@media (min-width:1024px) {
  .form__copy { grid-column:1 / span 6; }
  .form__box  { grid-column:8 / span 5; margin-top:0; }
}

/* --- §5.18 · Footer ----------------------------------------------------- */

.footer { background:var(--enzo-900); color:var(--white); padding-top:var(--s-72); }
.footer a { color:rgba(255,255,255,.75); transition:color 150ms var(--ease); }
.footer a:hover { color:var(--white); }

.f-col { grid-column:1 / -1; margin-bottom:var(--s-40); }
/* ✎ Mobilda ustunlar ikkitadan (mijoz qarori, 2026-08-22): to'rtta ro'yxat
   ustma-ust turganda footer telefonda ikki ekranga cho'zilib ketardi.
   Brend bloki (logotip va shior) to'liq kenglikda qoladi — u sarlavha
   emas, boshlanish. */
@media (max-width:767px) {
  .f-col { grid-column:span 6; margin-bottom:var(--s-32); }
  .f-col--brand { grid-column:1 / -1; }
  /* Aloqa ustunida uzun qatorlar bor (pochta manzili) — u to'liq kenglikda
     qoladi, tarmoqlar esa yonidagi ustunga tushadi. */
  .f-col--cont { grid-column:1 / -1; }
  .f-col--soc  { grid-column:1 / -1; }
}
.f-col h3 { color:var(--white); margin-bottom:var(--s-16); }
.f-col li + li { margin-top:var(--s-12); }
.f-slogan { color:var(--enzo-300); margin-top:var(--s-16); max-width:36ch; }

/* ✎ Xarita kartochkasi — butun kartochka havola (2026-08-21).
   Avval bu yerda bo'sh to'ldirgich kadr turardi. Iframe qo'yilmadi: boshqa
   manbadagi iframe g'ildirakni yutib qo'yadi va silliq scroll o'sha joyda
   uziladi (DESIGN.md §8 dagi qoida). */
.maps { grid-column:1 / -1; display:grid; gap:var(--gutter); margin-top:var(--s-40); }
.map {
  display:block; text-decoration:none;
  border:1px solid rgba(255,255,255,.2);
  transition:background 160ms var(--ease), border-color 160ms var(--ease);
}
.map:hover { background:rgba(255,255,255,.06); border-color:var(--enzo-300); }

/* ✎ Xarita skrinshoti (2026-08-21). Manzil matni yakka o'zi joyni
   tushuntirmasdi — mijoz "aynan o'sha joy ko'rinsin" dedi. Skrinshot
   statik rasm: iframe emas, ya'ni g'ildirakni yutmaydi va so'rov
   qo'shmaydi. Rasm hali qo'yilmagan bo'lsa kartochka baribir butun
   qoladi (.ph fon rangi ko'rinadi). */
.map__shot {
  /* 16:10 — skrinshotning o'z nisbati (1497×943) shunga eng yaqin,
     ya'ni rasm deyarli kesilmaydi. */
  position:relative; display:block; aspect-ratio:16 / 10; overflow:hidden;
  background:rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.2);
}
.map__shot img { width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.9) contrast(1.02); transition:transform 400ms var(--ease); }
.map:hover .map__shot img { transform:scale(1.03); }
/* ✎ Matn qismi oq fonda (mijoz qarori, 2026-08-21). To'q ko'k footer
   ichida kartochka endi ikki qavat: tepada xarita, pastida oq maydon —
   xuddi qog'oz kartochka kabi ajralib turadi. */
.map__body {
  background:var(--white); color:var(--enzo-800);
  padding:var(--s-24) var(--s-32) var(--s-32);
}
/* Pin CSS bilan chizilmaydi: skrinshotning o'zida Yandex belgisi bor,
   ustiga ikkinchisini qo'ysak joy ikki marta belgilangandek ko'rinardi. */
.map__title { margin-top:0; color:var(--enzo-800); }
.map__addr  { display:block; margin-top:var(--s-8); color:var(--enzo-500); }
.map__go {
  display:inline-block; margin-top:var(--s-16); color:var(--enzo-500); font-weight:600;
}
.map__go::after { content:' →'; }
.map:hover .map__go { color:var(--enzo-800); }
@media (min-width:768px) { .maps { grid-template-columns:1fr 1fr; } }

.f-bottom {
  margin-top:var(--s-56); padding:var(--s-24) 0;
  border-top:1px solid rgba(255,255,255,.2);
  display:flex; flex-wrap:wrap; gap:var(--s-16); justify-content:space-between;
  color:var(--enzo-300);
}

@media (min-width:1024px) {
  .footer { padding-top:var(--s-96); }
  .f-col--brand { grid-column:1 / span 3; }
  /* ✎ Endi TO'RT ustun (mijoz qarori, 2026-08-22): «Ijtimoiy tarmoqlar»
     ikkinchi qatordan chiqib, «Aloqa» dan keyin shu qatorga qo'shildi.
     Butun guruh chapga surildi — 6, 8, 10 o'rniga 5, 7, 9, 11.

     Brend ustuni 4 → 3 ustunga qisqardi: shiori 36ch bilan cheklangan,
     shuning uchun uch ustun yetadi. Qadam hamma joyda bir xil (2 ustun),
     ya'ni to'rttasi teng kenglikda turadi. */
  .f-col--map   { grid-column:4 / span 2; }
  .f-col--prod  { grid-column:6 / span 2; }
  .f-col--cont  { grid-column:8 / span 2; }
  /* Tarmoqlar ustuni KENGROQ (3 ustun): «Telegram @enzogroup_uz» ikki
     ustunga sigʻmay, hisob nomi oʻrtasidan sinib ketardi. Ish vaqti esa
     ikki qatorga boʻlinsa gʻalati koʻrinmaydi — shuning uchun qoʻshimcha
     kenglik aynan tarmoqlarga berildi. */
  .f-col--soc   { grid-column:10 / span 3; }

  /* Ish vaqti qatori ikki qatorga boʻlinsa, uzilish MAʼNO boʻyicha
     boʻlsin: «Dushanba – Shanba,» / «08:00 – 18:00». `text-wrap:balance`
     busiz brauzer uni «08:00» va «– 18:00» deb ajratib qoʻyardi.
     Qoʻllab-quvvatlamaydigan brauzerda oddiy uzilish qoladi — zarari yoʻq. */
  .f-col--cont li { text-wrap:balance; }
}

/* 15 · TIL ALMASHTIRGICH (2026-08-19) ------------------------------------ */
/* Uch til: o'zbek lotin, o'zbek kirill, rus. Headerning o'ng chetida.
   Ikki harfli kod — trekking 0, ya'ni DESIGN.md §4.2 taqig'iga tegmaydi
   (taqiq katta harf + OCHILGAN trekking birikmasiga tegishli). */
.lang { display:none; align-items:center; flex:none; }
.lang__opt {
  appearance:none; background:none; border:0; cursor:pointer;
  padding:6px 10px;
  font-family:inherit; font-size:15px; font-weight:500; letter-spacing:0;
  color:currentColor; opacity:.6;
  transition:opacity 150ms var(--ease);
}
.lang__opt:hover { opacity:1; }
.lang__opt.is-active { opacity:1; font-weight:600; }
/* Ajratuvchi — chegara bilan, alohida element qo'shmasdan */
.lang__opt + .lang__opt { border-left:1px solid currentColor; border-color:color-mix(in srgb, currentColor 28%, transparent); }
.lang__opt:focus-visible { outline:2px solid var(--enzo-500); outline-offset:2px; }

@media (min-width:1024px) { .lang { display:flex; } }

/* Mobil menyu ichida — pastda, to'liq kenglikda */
/* ✎ 2026-08-22: til almashtirgich mobil menyudan SARHADGA koʻchdi (mijoz
   qarori) — desktopdagidek, telefon belgisining yonida. Til tanlash endi
   menyuni ochishni ham, sahifani aylantirishni ham talab qilmaydi.

   Avval u hero matnining tepasiga qoʻyilgandi; mijoz uni sarlavha
   qatoriga emas, sahifaning eng tepasiga soʻradi.

   Tor ekranda oraliqlar qisqartiriladi: 360px da sarhadda logotip,
   uch til tugmasi, telefon belgisi va menyu tugmasi bir qatorga
   sigʻishi kerak. */
@media (max-width:1023px) {
  .lang { display:flex; }
  .lang__opt { font-size:14px; padding:6px 7px; }
  .header__actions { gap:var(--s-8); }
}

/* 16 · TAQQOSLASH — zavod ↔ vositachi (§5.10, 2026-08-19) ---------------- */
/* Ikki ustun. Chap ustun to'q — u yerda javob turadi, ko'z birinchi shunga
   tushishi kerak. O'ng ustun tekis oq: raqib ustuni bo'yalsa, sahifa
   "kimnidir ayblayotgan"dek ko'rinadi. Bu yerda maqsad — farqni ko'rsatish. */
.vs {
  grid-column:1 / -1; margin-top:var(--s-40);
  display:grid; grid-template-columns:1fr; gap:var(--gutter);
}
@media (min-width:768px) { .vs { grid-template-columns:1fr 1fr; } }

.vs__col { padding:var(--s-32); border:1px solid var(--line); }
.vs__col--own {
  background:var(--enzo-800); color:var(--white); border-color:transparent;
}
.vs__col--other { background:var(--white); }

/* Sarlavha rangi: to'q ustunda oq, oqida ko'k — §5 dagi umumiy qoidaga mos */
.vs__title { margin-bottom:var(--s-24); }
.vs__col--own   .vs__title { color:var(--white); }
.vs__col--other .vs__title { color:var(--ink); }

.vs__list { list-style:none; margin:0; padding:0; display:grid; gap:var(--s-16); }
.vs__list li {
  display:grid; grid-template-columns:20px 1fr; gap:var(--s-12);
  align-items:start;
  font-size:clamp(16px, 1.2vw, 17px); line-height:1.5;
}
.vs__list svg { width:20px; height:20px; margin-top:2px; }

/* Belgi rangi: to'q fonda och ko'k — oq matn bilan bir xil og'irlikda
   bo'lib qolmasligi uchun. Oq fonda kulrang: krest qizil bo'lsa, bo'lim
   ogohlantirishga o'xshab qoladi. */
.vs__col--own   .vs__list li { color:rgba(255,255,255,.92); }
.vs__col--own   .vs__list svg { color:var(--enzo-300); }
.vs__col--other .vs__list li { color:var(--ink-60); }
.vs__col--other .vs__list svg { color:var(--ink-40); }

/* «Bilmayman» holati (§5.13). Raqam o'rniga jumla turadi — 64px da u
   sarlavhaga o'xshab, kalkulyator natija bergandek ko'rinardi. */
.calc__result.is-noaniq .calc__price {
  font-size:clamp(22px, 2vw, 26px) !important;
  font-weight:600; letter-spacing:-0.02em; line-height:1.25;
  color:var(--ink-60);
}

/* 17 · SCROLL INDIKATORI (✎ qayta qurildi 2026-08-19) ------------------- */
/* O'ng chetga yopishgan yupqa yo'l, ustidan brend rangidagi to'ldirgich.
   Avval o'rtada suzib turgan qisqa chiziq va ikkita raqam bor edi — mijoz
   rad etdi: raqamlar sahifa chetida mustaqil ma'no talab qiladigan yangi
   element bo'lib qolgandi.

   Tor ekranda ko'rsatilmaydi: barmoq bilan scroll qilinganda brauzerning
   o'z indikatori bor. */
.snav { display:none; }

@media (min-width:1024px) {
  .snav {
    display:block; position:fixed; z-index:90;
    right:0; top:0; width:4px; height:100vh;
    background:rgba(10,42,115,.10);
    pointer-events:none;
  }
  /* Yuguruvchi — sahifa balandligiga nisbatan uzunligi (`--h`) va
     joyi (`--y`) JS'dan keladi (main.js §10). Ya'ni bu brauzer
     scrollbar'ining brend registridagi ko'rinishi: uzunligi qancha
     kontent qolganini aytadi. Tepadan to'ldiruvchi chiziq sinab ko'rildi —
     sahifa uzun bo'lgani uchun u deyarli doim bo'sh ko'rinardi. */
  .snav i {
    position:absolute; left:0; width:100%;
    height:var(--h, 12%); top:var(--y, 0%);
    background:linear-gradient(180deg, var(--enzo-300), var(--enzo-500));
  }
}

/* 18 · IJTIMOIY TARMOQLAR — o'ng pastda suzuvchi tugma (§ 2026-08-19) ---- */
/* Kvadrat, doira emas: radius butun sayt bo'ylab nolga tenglangan
   (DESIGN.md §6.1). Referensdagi doiralar ko'chirilsa, ular saytdagi
   yagona yumaloq shakl bo'lib ajralib turardi.

   Yig'ilgan holat: bitta tugma. Ochilganda uchtasi tepaga chiqadi — doimiy
   uchta rangli dog' kalkulyator va forma ustida turmasin uchun. */
.soc {
  position:fixed; z-index:95;
  right:var(--s-24); bottom:var(--s-24);
  display:flex; flex-direction:column; align-items:center; gap:var(--s-8);
}
@media (min-width:1024px) { .soc { right:calc(var(--s-24) + 3px); } }

.soc__list {
  display:flex; flex-direction:column; gap:var(--s-8);
  opacity:0; visibility:hidden;
  translate:0 var(--s-12);
  transition:opacity 220ms var(--ease), translate 260ms var(--ease-out), visibility 0s 260ms;
}
.soc.is-open .soc__list {
  opacity:1; visibility:visible; translate:0 0;
  transition-delay:0s, 0s, 0s;
}

.soc__link, .soc__toggle {
  width:48px; height:48px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:0; cursor:pointer; color:var(--white);
  transition:background 180ms var(--ease), translate 180ms var(--ease);
}
.soc__link svg, .soc__toggle svg { width:24px; height:24px; }
.soc__link:hover { translate:0 -2px; }

/* Har bir tarmoqning o'z rangi emas — hammasi brend ko'kida, faqat
   to'qligi bilan farq qiladi. Sabab: YouTube qizili va Instagram gradienti
   saytdagi yagona begona ranglar bo'lib qolardi (DESIGN.md §6.1). */
.soc__link--yt { background:var(--enzo-900); }
.soc__link--ig { background:var(--enzo-700); }
.soc__link--tg { background:var(--enzo-600); }
.soc__link:hover { background:var(--enzo-500); }

.soc__toggle { background:var(--enzo-500); }
.soc__toggle:hover { background:var(--enzo-700); }
.soc__ico-close { display:none; }
.soc.is-open .soc__ico-open  { display:none; }
.soc.is-open .soc__ico-close { display:block; }

@media (prefers-reduced-motion: reduce) {
  .soc__list, .soc__link { transition:none; }
}

/* 19 · HAMKORLAR LENTASI — alohida past bo'lim (§5.11b) ------------------ */
/* Bo'lim ataylab past: logolar isbot, kontent emas. Yuqoridagi video
   bo'limi bilan bitta bloknni ulashmaydi — u yerda ikkita harakat
   bir-biri bilan raqobatlashardi. */
/* ✎ Ingichkalashtirildi (mijoz qarori, 2026-08-20): plitka balandligi katta
   bo'lgani uchun logolar keng bo'sh maydon ichida kichkina bo'lib turardi.
   Endi lenta logoning o'z balandligiga yaqin. */
.partners { padding-block:var(--s-32); }
/* ✎ Mobilda bo'lim ixchamlashdi (mijoz qarori, 2026-08-22): tepasida ham,
   pastida ham havo ko'p edi va logolar ikki lenta bo'lgach bo'lim yana
   cho'zilardi. Endi sarlavha, lentalar va chegara bitta yaxlit blok. */
@media (max-width:767px) {
  .partners { padding-block:var(--s-16); }
  .partners .logos { margin-top:var(--s-12); }
  .partners .head--sm { margin-bottom:0; }
}
.partners .head--sm h2 { color:var(--ink-60); font-weight:500; }
.partners .logos { margin-top:var(--s-16); }
/* ✎ Kattalashtirildi (2026-08-21): lenta endi butun ekran kengligida —
   avvalgi o'lchamda logolar keng maydonda mayda bo'lib qolardi. */
.partners .logo-tile { height:64px; padding-inline:var(--s-56); }
.partners .logo-tile img { height:calc(var(--logo-h, 44px) * 0.86); }
@media (max-width:767px) {
  .partners .logo-tile img { height:calc(var(--logo-h, 44px) * 0.62); }
}
@media (min-width:768px) { .partners .logo-tile { height:76px; padding-inline:var(--s-72); } }

/* 20 · YANGI BO'LIMLAR (§5.5c, §5.9b, §5.16 — 2026-08-20) ---------------- */

/* --- §5.5c · Arzon tanlovning haqiqiy narxi ----------------------------- */
/* Yakuniy jumla — bo'limning javobi. Kartochkalardan uzoqroq turadi va
   chapdan brend chizig'i bilan belgilanadi: bu ro'yxatning beshinchi bandi
   emas, undan chiqadigan xulosa. */
.cost__close {
  margin-top:var(--s-40);
  padding-left:var(--s-24);
  border-left:2px solid var(--enzo-500);
  color:var(--ink);
}
.cost__close a {
  color:var(--enzo-700);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.cost__close a:hover { color:var(--enzo-500); }

/* Ikkita kadr yonma-yon — bo'lim ikki mahsulot haqida (shifer va beton),
   bitta kadr faqat bittasini ko'rsatardi. Nisbat 3:2: yonma-yon turganda
   21:9 tasma juda past bo'lib, ikkalasi ham o'qilmay qolardi. */
.cost__shots {
  grid-column:1 / -1; margin-top:var(--s-40);
  display:grid; gap:var(--gutter);
}
/* ✎ Mobilda kadrlar sarlavhaga yaqinroq (mijoz qarori, 2026-08-22):
   telefonda ular orasidagi bo'shliq bir ekranning uchdan birini yeb
   qo'yardi. Izoh ham kadrga yopishadi — u kadrning davomi, alohida
   matn emas. */
@media (max-width:767px) {
  .cost__shots { margin-top:var(--s-24); gap:var(--s-24); }
  .cost__cap { margin-top:var(--s-8); }
}
@media (min-width:768px) { .cost__shots { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.cost__shot { margin:0; }
.cost__shot img {
  display:block; width:100%; height:auto;
  aspect-ratio:3/2; object-fit:cover; object-position:50% 58%;
}
/* Izoh majburiy: kadrda ENZO mahsuloti emas, begona eskirgan tom.
   Izohsiz u "ENZO shiferi shunday bo'ladi" deb o'qilishi mumkin edi. */
.cost__cap { margin-top:var(--s-12); color:var(--ink-60); max-width:60ch; }

/* --- §5.9b · Kim uchun -------------------------------------------------- */
/* Kartochka ichidagi havola pastga yopishadi (`margin-top:auto`), shunda
   uch kartochkadagi matn uzunligi har xil bo'lsa ham havolalar bitta
   chiziqda turadi. Buning uchun kartochka flex ustunga aylantiriladi. */
.cards--3 .card:has(.card__link),
.cards--4 .card:has(.card__link) { display:flex; flex-direction:column; }
.card__link {
  margin-top:auto; padding-top:var(--s-24);
  display:inline-flex; align-items:center; gap:var(--s-8);
  font-weight:500; color:var(--enzo-700);
}
/* Strelka — alohida element emas, shrift belgisi: ikonka qo'yilsa u
   kartochka ikonkasi bilan bir qatorda ikkinchi grafik bo'lib qolardi. */
.card__link::after { content:'→'; transition:translate 160ms var(--ease); }
.card:hover .card__link::after { translate:3px 0; }
.card__link:hover { color:var(--enzo-500); }

/* 21 · ZAVOD VIDEOSI — §5.3 (✎ setkaga qaytarildi 2026-08-21) ----------- */
/* Avval kadr `.container` dan chiqib ekranning ikki chetiga tegib turardi.
   Ikki muammo bor edi:
     1. Sahifadagi hamma narsa — sarlavha, matn, kartochkalar — bitta chap
        chiziqdan boshlanadi, video esa undan ~100px chapdan boshlanardi.
        Bitta blok butun ritmdan chiqib turardi.
     2. Ekran bo'yi kadr scroll paytida eng katta kompozitsiya yuki beradi.
   Endi kadr setka ichida, qolgan bo'limlar bilan bir chiziqda.

   Balandligi `88svh` bilan cheklanadi: 16:9 kadr past oynada baribir
   ekrandan chiqib ketmasin. Kenglik shunda `aspect-ratio` orqali o'zi
   kichrayadi va kadr markazda qoladi. */
.about__video { margin:0; }

.vwrap {
  position:relative;
  width:100%;
  max-width:calc(88svh * 16 / 9);
  margin-inline:auto;
  aspect-ratio:16/9;
  background:var(--enzo-800);
  overflow:hidden;
  /* Kadr o'z qatlamida — ijro paytida ustidagi matn qayta chizilmaydi */
  contain:paint;
}
.vwrap__v { width:100%; height:100%; object-fit:cover; display:block; background:var(--enzo-800); }

/* ✎ O'z pleyer paneli (2026-08-22). Avval bu yerda faqat «Ovozni yoqish»
   tugmasi turardi — mijoz to'liq boshqaruv so'radi: ijro/pauza, ovoz
   darajasi, vaqt, o'tish chizig'i va to'liq ekran.

   Joylashuv YouTube'nikiga o'xshash (chapda ijro va ovoz, o'ngda to'liq
   ekran) — bu odat bo'lib ketgan va o'rgatish talab qilmaydi. Ko'rinish
   esa saytniki: kvadrat, radius yo'q (DESIGN.md §6.1), rang brenddan. */
.vctl {
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:var(--s-24) var(--s-16) var(--s-12);
  color:var(--white);
  /* Pastdan yuqoriga so'nuvchi qorayish — panel har qanday kadr ustida
     o'qiladi, kadrni esa deyarli yopmaydi. */
  background:linear-gradient(to top, rgba(6,10,20,.85) 0%, rgba(6,10,20,.55) 45%, transparent 100%);
  opacity:0; transform:translateY(8px);
  transition:opacity 200ms var(--ease), transform 200ms var(--ease);
}
/* Panel kursor kadr ustida bo'lganda, video to'xtaganda yoki biror tugma
   fokusda bo'lganda ko'rinadi — klaviatura bilan ham yetib bo'ladi. */
.vwrap:hover .vctl, .vwrap.is-paused .vctl, .vctl:focus-within { opacity:1; transform:none; }
.vwrap.is-paused .vctl { opacity:1; }
/* 🐛 Sensorli ekranda «hover» degan holat YO'Q — telefonda panel video
   ijro etilayotgan payt umuman ko'rinmasdi va uni to'xtatib ham,
   ovozini o'zgartirib ham bo'lmasdi. Barmoq bilan boshqariladigan
   qurilmada panel doim ko'rinadi. Topildi 2026-08-22 mobil auditda. */
@media (hover:none) {
  .vctl { opacity:1; transform:none; }
}

.vctl__bar { padding-inline:var(--s-8); }
.vctl__row {
  display:flex; align-items:center; gap:var(--s-8);
  margin-top:var(--s-4);
}
.vctl__btn {
  flex:0 0 auto; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border:0; cursor:pointer;
  background:transparent; color:var(--white);
  transition:background 140ms var(--ease);
}
.vctl__btn:hover { background:rgba(255,255,255,.16); }
.vctl__btn svg { width:20px; height:20px; }
.vctl__btn--end { margin-left:auto; }
/* Barmoq uchun eng kichik qulay o'lcham — 44px. Panelda esa joy kam,
   shuning uchun tor ekranda oraliq qisqaradi, tugma emas. */
@media (max-width:480px) {
  .vctl { padding:var(--s-24) var(--s-8) var(--s-8); }
  .vctl__row { gap:var(--s-4); }
  .vctl__btn { width:44px; height:44px; }
}

.vctl__vol { display:flex; align-items:center; gap:var(--s-8); }
/* Ovoz slayderi tor ekranda joy egallamasin — u yerda tugmaning o'zi
   (ovozni yoqish/o'chirish) yetarli. */
.vctl__range { width:0; opacity:0; transition:width 180ms var(--ease), opacity 180ms var(--ease); }
.vctl__vol:hover .vctl__range, .vctl__range:focus { width:84px; opacity:1; }
/* 🐛 Sensorli ekranda slayder ochilmasdi (yuqoridagi sabab). Telefonda u
   doim ochiq turadi, lekin qisqaroq — panelda joy kam. */
@media (hover:none) {
  .vctl__range { width:72px; opacity:1; }
}

/* Slayderlar — brauzer ko'rinishisiz, ikkalasi bir xil uslubda */
.vctl input[type="range"] {
  -webkit-appearance:none; appearance:none;
  height:4px; background:rgba(255,255,255,.3); cursor:pointer;
}
.vctl__seek { width:100%; display:block; }
.vctl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:12px; height:12px; background:var(--play-red); border:0;
}
.vctl input[type="range"]::-moz-range-thumb {
  width:12px; height:12px; background:var(--play-red); border:0; border-radius:0;
}
/* O'tilgan qism qizil: fon gradient bilan chiziladi (JS foizni yozadi) */
.vctl__seek {
  background:linear-gradient(to right,
    var(--play-red) 0 var(--seek, 0%), rgba(255,255,255,.3) var(--seek, 0%) 100%);
}

.vctl__time { font-size:14px; font-variant-numeric:tabular-nums; opacity:.9; }

/* To'liq ekranda kadr butun oynani egallaydi: 16:9 cheklovi olib
   tashlanadi, aks holda video kichik quti bo'lib qolardi. */
.vwrap:fullscreen { max-width:none; width:100vw; height:100vh; aspect-ratio:auto; }
.vwrap:fullscreen .vwrap__v { object-fit:contain; }
@media (max-width:480px) { .vctl__time { display:none; } }

.about__vcap { margin-top:var(--s-12); color:var(--ink-60); }

/* --- Forma: holat matni va «yuborildi» ko'rinishi (2026-08-22) ---------- */

/* Bot tuzog'i. `display:none` ATAYLAB ishlatilmagan: ba'zi botlar yashirin
   maydonni aniqlab, uni chetlab o'tadi. Maydon ekrandan tashqariga
   chiqariladi — odam uni ko'rmaydi, avtomat esa to'ldiradi va shu bilan
   o'zini bildiradi. */
/* Bot tuzogʻi. `display:none` — ataylab: avval maydon ekrandan tashqariga
   surilgan edi (`left:-9999px`), lekin brauzerning avtomatik toʻldirishi
   bunday maydonni KO'RADI va toʻldiradi. Natijada haqiqiy mijoz bot deb
   hisoblanib, arizasi jimgina yoʻqolardi. `display:none` maydonni
   avtomatik toʻldirishdan ham yashiradi. */
.form__trap { display:none; }

/* ✎ Tugma oq emas, brend ko'kida (mijoz qarori, 2026-08-22): oq to'rtburchak
   formaning eng katta dog'i bo'lib, ko'z uni harakat emas, maydon deb
   o'qirdi. `--enzo-500` to'q ko'k fonda ham yorqin ajralib turadi. */
.form__send { background:var(--enzo-500); color:var(--white); }
.form__send:hover { background:var(--enzo-300); color:var(--enzo-800); }

/* Kalkulyator xulosasi — arizaga ilova bo'lib ketadigan qator.
   Bo'sh bo'lsa umuman ko'rinmaydi: kalkulyatorga tegmagan odam formada
   tushunarsiz bo'sh maydon ko'rmasligi kerak. */
.form__calc {
  margin-bottom:var(--s-16); color:var(--enzo-300);
  border-left:3px solid var(--enzo-300); padding-left:var(--s-12);
}
.form__calc:empty { display:none; }
.form__box.is-sent .form__calc { display:none; }

.form__status { margin-top:var(--s-16); color:var(--enzo-300); }
.form__status:empty { margin-top:0; }
.form__status a { color:var(--white); text-decoration:underline; }
/* To'q ko'k fonda qizil o'qilmaydi — xato uchun oq matn va qizil chiziq */
.form__status.is-error { color:var(--white); border-left:3px solid var(--play-red); padding-left:var(--s-12); }
.form__status.is-warn  { color:var(--white); border-left:3px solid var(--enzo-300); padding-left:var(--s-12); }

/* Ariza qabul qilinganda maydonlar o'rniga tasdiq turadi. Forma DOM'da
   qoladi (yo'q qilinmaydi) — orqaga qaytish yoki qayta yuborish kerak
   bo'lsa hammasi joyida. */
.form__box.is-sent .field,
.form__box.is-sent button,
.form__box.is-sent .form__legal { display:none; }
.form__box.is-sent::after {
  content:'Arizangiz qabul qilindi. Menejer ish vaqtida qoʻngʻiroq qiladi.';
  display:block; color:var(--white); font-size:19px; line-height:1.5;
  border-left:3px solid var(--enzo-300); padding-left:var(--s-16);
}

/* 22 · KIRISH ANIMATSIYASI (2026-08-20) ---------------------------------- */
/* Parda faqat `html.has-intro` da ko'rinadi — qarorni `<head>` dagi kichik
   skript qabul qiladi (sessiyada bir marta, harakat kamaytirilmagan bo'lsa).

   YO'QOLISHI sof CSS animatsiyasi bilan: JS ishlamay qolsa ham parda
   ekranda osilib qolmaydi. Bu shu blokdagi eng muhim qaror — kirish
   animatsiyasining klassik falokati aynan shu. */
.intro { display:none; }

html.has-intro { overflow:hidden; }
html.has-intro .intro {
  display:block; position:fixed; inset:0; z-index:200;
  /* Videoning O'Z foni (o'lchandi: #354a92) — `contain` da yon tomonlarda
     chegara ko'rinmaydi. */
  background:#354a92;
  /* ✎ 1,5× tezlashtirildi (mijoz qarori, 2026-08-20).
     Logotip odatdagi tezlikda ~2,4 s da shakllanardi, 1,5× da esa ~1,6 s da.
     Shunga qarab kechikish 2700 → 1900 ms: logotip to'liq ko'rinadi, keyin
     qisqa nafas va so'nish. Jami parda ~2,35 s turadi. */
  animation:intro-out 450ms var(--ease) 1900ms forwards;
}
.intro__v {
  width:100%; height:100%;
  /* `contain`, `cover` emas: tor ekranda `cover` logotipni qirqib
     tashlardi. Fon bir xil bo'lgani uchun harflar ko'rinmaydi. */
  object-fit:contain;
}
/* ✎ Telefonda logotip kattalashtiriladi (mijoz koʻrsatdi, 2026-08-22).
   Kadr 1920×1080, ekran esa 360×800 — `contain` bilan video atigi
   360×203 boʻlib chiziladi va logotip juda mayda qolardi.

   `cover` emas, aniq masshtab: `cover` tik ekranda videoni balandlik
   boʻyicha choʻzib, logotipni chetlaridan qirqib tashlaydi. 2,1 esa
   kadrning oʻrtadagi ~48% ini koʻrsatadi — logotip butun sigʻadi,
   qirqiladigan joyda faqat bir xil rangli fon qoladi.

   Animatsiyaning oʻzi oʻzgarmaydi: bu faqat oʻlcham. */
@media (max-width:767px) {
  .intro__v { scale:2.1; }
}
@keyframes intro-out {
  to { opacity:0; visibility:hidden; }
}
/* Animatsiya tugagach parda hech narsani ushlab turmasin */
html.has-intro .intro { pointer-events:none; }


/* ═══════════════════════════════════════════════════════════════════════
   23 · MOBIL QATLAM (2026-08-22)
   ═══════════════════════════════════════════════════════════════════════
   Bu bo'lim ATAYLAB faylning eng oxirida turadi.

   Sabab qimmatga tushdi: mobil qoidalar avval o'zlari o'zgartirmoqchi
   bo'lgan asosiy qoidalarning YONIGA yozilgandi — ba'zilari esa
   asosiy qoidadan oldinga tushib qolgandi. CSS'da `@media` kuch
   qo'shmaydi: bir xil kuchdagi ikki qoidadan faylda KEYIN turgani
   qo'llanadi. Natijada bir necha tuzatish hech qachon ishlamagan —
   brauzerda hech narsa o'zgarmagandek ko'rinardi.

   Qoida: mobil uchun yangi tuzatish shu yerga yoziladi, boshqa joyga
   emas. Shunda u albatta kuchga kiradi.
   ═════════════════════════════════════════════════════════════════════ */

@media (max-width:767px) {

  /* --- Galereya: kadr kengroq, sahna aynan kadr balandligida -----------
     Sahna balandligi 220px qilib qotirilgan, kadr esa 280×157 edi:
     ostida ~60px o'lik joy qolar va izoh undan ham pastga tushib,
     qaysi kadrga tegishli ekani bilinmasdi. */
  .deck__head { gap:var(--s-16); }
  .deck { margin-top:var(--s-16); }
  .deck__card { width:86vw; }
  .deck__stage { height:calc(86vw * 9 / 16); }
  .deck__cap { margin-top:var(--s-12); }

  /* --- Logo lentasi: BITTA qator, logolar zich ------------------------
     ✎ Mijoz qarori 2026-08-22 (ikki qatorli variant bekor qilindi).

     Muammo oraliqda edi: `.partners .logo-tile` ga `padding-inline:56px`
     berilgan — bu qoida media so'rovidan tashqarida turgani va tanlagichi
     kuchliroq bo'lgani uchun mobilda ham ishlardi. Ya'ni ikki logo orasi
     112px: 360px ekranda bir vaqtning o'zida bittadan ortiq logo
     ko'rinmasdi. Odam bitta logoni ko'rib, keyingisini KUTIB turardi.

     Endi oraliq 16px (ikki chetdan 32px) — ekranda uch-to'rt logo birga
     turadi va lenta uzluksiz o'qiladi. Ikkinchi qator olib tashlandi:
     bitta zich qator ikki siyrak qatordan ko'ra ko'proq logo ko'rsatadi.

     Ikkinchi lenta (`--rev`) endi hech qayerda ko'rinmaydi: bu yerda
     mobilda, pastdagi `@media (min-width:768px)` da esa desktopda. */
  .logos__track--rev { display:none; }
  .logo-tile          { height:44px; padding-inline:var(--s-16); }
  .partners .logo-tile { height:40px; padding-inline:var(--s-16); }


  /* --- Footer pastki qatori -------------------------------------------
     ✎ Mijoz qarori (2026-08-22): ikki yozuv BIR QATORDA, ikki yonda —
     lekin chetga taqalmasdan. Chap va o'ng qirralari yuqoridagi xarita
     kartochkasining qirralari bilan bitta chiziqda turadi (ikkalasi ham
     `--pad` dan boshlanadi), ya'ni sahifadagi hamma element bir xil
     vertikal chiziqqa tekislanadi.

     Avvalgi yechim (ustun + `padding-right:76px`) bekor qilindi: u
     suzuvchi Telegram tugmasidan qochish uchun edi, natijada esa o'ng
     yozuv o'z chizig'idan chiqib ketardi. Endi tugmadan qochish
     `padding-bottom` bilan hal qilinadi — qator tugmadan yuqorida
     tugaydi, gorizontal tekislash buzilmaydi. */
  .f-bottom {
    flex-direction:row; flex-wrap:nowrap; gap:var(--s-16);
    justify-content:space-between; align-items:baseline;
    margin-top:var(--s-40); padding-bottom:var(--s-72);
  }
  .f-bottom span:last-child { text-align:right; }

  /* --- Hero: sarlavha TEPADA, izoh va tugmalar PASTDA -----------------
     ✎ Mijoz eskizi (2026-08-22). Avval butun matn pastga bosilgandi
     (`.hero` — `align-items:flex-end`): sarlavha aynan mikser kabinalari
     ustiga tushar va kadr oʻqilmasdi. Endi ikki guruh ekranning ikki
     uchiga ajratiladi, oʻrtada kadrning oʻzi ochiq qoladi.

     Ishlash tartibi: `.hero` cho'ziladi → `.container` va `.grid` butun
     balandlikni oladi → `.hero__copy` ustun bo'ladi va `.hero__note` ga
     qo'yilgan `margin-top:auto` uni tugmalar bilan birga pastga suradi. */
  .hero { align-items:stretch; }
  .hero > .container { display:flex; }
  .hero__grid { align-content:stretch; }
  .hero__copy { display:flex; flex-direction:column; }
  .hero__note { margin-top:auto; }

  /* Sarlavha qatorlari qatʼiy: «Zavoddan» / «toʻgʻri qurilish» /
     «maydonigacha» (mijoz koʻrsatdi). Tabiiy oʻralishga tashlab qoʻyilsa,
     ekran kengligiga qarab «Zavoddan toʻgʻri» birinchi qatorda qolib
     ketardi va sarlavhaning ritmi buzilardi. */
  .hero__title > span { display:block; }

  /* ✎ Matn bloki bir pogʻona yuqoriga (mijoz koʻrsatdi, 2026-08-22):
     104 → 88px. */
  /* ✎ Matn bloki tepasidagi boʻshliq (mijoz koʻrsatdi, 2026-08-22).
     Uch qadam: 104 → 88 (bir pogʻona yuqoriga) → 68 (til almashtirgich
     sarhadga koʻchgach) → 96 (mijoz «ikki oraliq pastga» dedi).
     64px — sarhad balandligi, qolgani boʻshliq. */
  .hero { padding-top:calc(64px + var(--s-32)); }

  /* ✎ Kadr kattalashtirildi (mijoz koʻrsatdi): mikserlar mayda edi va
     oʻng pastki burchakka siqilgandi. Masshtab 1,14 va koʻrish nuqtasi
     bir oz yuqoriga — mashinalar kadr oʻrtasiga chiqadi.
     Masshtab `.hero__img` da, `.hero__frame` da emas: qatlamga «nafas»
     animatsiyasi qoʻyilgan, ustiga yana masshtab qoʻshilsa ikkalasi
     bir-birini bekor qilardi. */
  .hero__img { object-position:50% 42%; scale:1.14; }

  /* ✎ Izoh uch qatorda (mijoz koʻrsatdi): «Har partiyada hujjat,» dan
     keyin uziladi. Ikki qatorda uchinchi qator mikser kabinalari ustiga
     tushib, matn ham, kadr ham oʻqilmasdi. */
  .hero__note br { display:inline !important; }

  /* --- FAQ aloqa bloki: telefon raqami bir qatorda --------------------
     `t-h2` bu yerda 28px — raqam 320px joyga sigʻmay, «77» keyingi qatorga
     tushardi. Raqam bitta butun maʼlumot, oʻrtasidan boʻlinmaydi. */
  .faq__aside { padding:var(--s-24); }
  .faq__aside-tel .t-h2 { font-size:24px; white-space:nowrap; }

  /* Suzuvchi tugmaning o'ng qirrasi ham o'sha chiziqda. Avval 24px edi,
     kontent chekkasi esa `--pad` (tor ekranda 20px) — tugma 4px ichkarida
     turib, tekislikni buzardi. */
  .soc { right:var(--pad); bottom:var(--pad); }

  /* --- Menyudagi telefon raqami ---------------------------------------
     360px kenglikda «+998 55 810 77 77» ikki qatorga tushib ketardi:
     20px shrift + belgi + oraliq chetlarga sig'masdi. Raqam — bitta
     butun ma'lumot, o'rtasidan bo'linmaydi. */
  .menu__phone { white-space:nowrap; }
}

/* Eng tor telefonlar (iPhone SE va shunga o'xshash 360px va past).
   `nowrap` o'zi yetmaydi — raqam chetdan chiqib ketmasligi uchun
   shrift bir pog'ona pasayadi. */
@media (max-width:359px) {
  .menu__phone { font-size:20px; gap:var(--s-8); }
}

/* Ikkinchi lenta faqat mobilda kerak — desktopda bitta qator qoladi.
   (Media so'rovidan TASHQARIDA va oxirida: asosiy «.logos__track»
   qoidasidan keyin turishi shart.) */
@media (min-width:768px) { .logos__track--rev { display:none; } }

/* ── FOOTER: keng ekranda ustunlar mazmuniga qarab yoyiladi ────────────────
   ✎ Mijoz qarori 2026-08-22: boʻlimlar orasi kengroq boʻlsin va
   «Ijtimoiy tarmoqlar» ning matni oʻng chetdagi xarita kartochkasining
   chizigʻiga tegib tursin.

   12 ustunli setka buni bera olmasdi: unda har blok qatʼiy kenglikka ega
   va oxirgisining matni chetdan ~85px berida tugardi. Bu yerda setka
   qayta belgilanadi — toʻrt ustun `max-content`, yaʼni har biri aynan oʻz
   matni kengligida. Brend ustuni esa `1fr` bilan qolgan joyni yutadi va
   toʻrtalasini oʻngga suradi. Natijada:
     · oraliqlar teng va keng (`clamp` bilan ekranga moslashadi);
     · oxirgi ustunning oʻng qirrasi kontent chizigʻida tugaydi;
     · «Aloqa» dagi ish vaqti endi bir qatorga sigʻadi.

   Faqat 1280px dan boshlab: undan tor ekranda toʻrt ustunning oʻz
   kengligi (~710px) brend ustuniga joy qoldirmaydi va setka toshib
   ketardi — u yerda avvalgi 12 ustunli joylashuv qoladi. */
@media (min-width:1280px) {
  .footer .grid {
    grid-template-columns:minmax(0, 1fr) repeat(4, max-content);
    /* ✎ Oraliq kengaytirildi (mijoz: «Sayt xaritasi» ikki oraliq
       chapga). Oʻng qirra xarita chizigʻiga qadalgan, ustun kengliklari
       esa matnga bogʻliq — shuning uchun guruhni chapga suradigan yagona
       narsa shu oraliq. 4vw → 5,1vw: 1440px da 58 → 73px, guruh chapi
       46px chapga suriladi. */
    column-gap:clamp(40px, 5.1vw, 88px);
  }
  .f-col--brand { grid-column:1; }
  .f-col--map   { grid-column:2; }
  .f-col--prod  { grid-column:3; }
  .f-col--cont  { grid-column:4; }
  .f-col--soc   { grid-column:5; }
  .maps         { grid-column:1 / -1; }
  /* Ish vaqti endi sigʻadi — muvozanatlashning hojati yoʻq */
  .f-col--cont li { text-wrap:auto; }
}

/* 23 · ARIZA TASDIGʻI (2026-08-26) ---------------------------------------
   Mijoz qarori: qabul qilinganlik kichik yozuv emas, sahifaning asosiy
   voqeasi boʻlsin — orqa fon xiralashadi, ustida tasdiq turadi.

   Uch qoida shu blokda saqlanadi:
   · Burchaklar toʻgʻri — sayt boʻylab `border-radius:0`, namunadagi
     dumaloq kartochka ataylab koʻchirilmadi.
   · Belgi SVG bilan chiziladi (`stroke-dasharray`), GIF yoki rasm emas —
     har qanday oʻlchamda tiniq va vaznsiz.
   · Harakat kamaytirilgan boʻlsa hammasi darrov, sakrashsiz chiqadi. */
.done {
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:var(--s-24);
}
.done[hidden] { display:none; }

/* Xiralashuv — mijoz aynan shuni soʻradi. `backdrop-filter` qoʻllab-
   quvvatlanmagan brauzerda quyidagi qatlam oʻzi yetarli darajada toʻq. */
.done__veil {
  position:absolute; inset:0;
  background:rgba(10,42,115,.72);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  animation:doneVeil 260ms var(--ease) both;
}

.done__card {
  position:relative;
  width:min(440px, 100%);
  background:var(--white);
  padding:var(--s-56) var(--s-40) var(--s-40);
  text-align:center;
  box-shadow:0 24px 80px rgba(10,15,28,.28);
  animation:doneCard 320ms var(--ease) both;
}

/* `margin-inline:auto` shart: SVG blok element, `text-align:center` uni
   markazga qoʻymaydi. */
.done__mark { width:72px; height:72px; color:var(--enzo-500); margin:0 auto var(--s-24); }
.done__ring { stroke-dasharray:208; stroke-dashoffset:208; animation:doneDraw 460ms var(--ease) 120ms both; }
.done__tick { stroke-dasharray:44;  stroke-dashoffset:44;  animation:doneDraw 300ms var(--ease) 460ms both; }

.done__title {
  font-size:clamp(24px, 3vw, 30px); font-weight:600;
  letter-spacing:-0.02em; line-height:1.15; color:var(--ink);
  margin-bottom:var(--s-12);
}
.done__text { font-size:17px; line-height:1.5; color:var(--ink-60); margin-bottom:var(--s-32); }
.done__btn  { width:100%; }

@keyframes doneVeil { from { opacity:0; } to { opacity:1; } }
@keyframes doneCard { from { opacity:0; transform:translateY(16px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes doneDraw { to { stroke-dashoffset:0; } }

/* Sahifa orqada siljib ketmasin. */
html.has-done { overflow:hidden; }

@media (prefers-reduced-motion: reduce) {
  .done__veil, .done__card, .done__ring, .done__tick { animation:none; }
  .done__ring, .done__tick { stroke-dashoffset:0; }
}