/* Jaquar sotuv sayti — uslublar.
 *
 * Yo'nalish: "Spetsifikatsiya". Sayt mahsulot spetsifikatsiya varag'i kabi
 * ishlaydi: aniq komplekt, aniq narx, aniq muddat — hech narsa yashirilmaydi.
 * Dizayn shu aniqlikni ko'rsatadi. Latun bezak emas — Jaquar mahsulotining
 * o'z pardozi.
 *
 * Fayl tartibi:
 *   1. @font-face
 *   2. tokenlar (:root)
 *   3. reset va base
 *   4. layout primitivlari
 *   5. komponentlar
 *   6. bo'limlar
 *   7. utilitalar
 *
 * Media so'rovlar har komponentdan keyin darhol yoziladi, fayl oxirida
 * bitta katta blokda emas. Faqat min-width: mobil asosiy holat.
 */

/* ============================================================
   1. SHRIFTLAR
   Lokal, CDN yo'q: O'zbekiston mobil tarmoqlarida Google Fonts
   ikkita qo'shimcha round-trip qo'shadi (300-800 ms).
   ============================================================ */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2018-201E, U+2122, U+2192;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-500-cyr.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+2116;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2018-201E, U+2122, U+2192;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-700-cyr.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+2116;
}

/* Monoshrift — narx, raqam va uppercase yorliqlar uchun. Bu yo'nalishning
   xarakter tashuvchisi: raqamlar ustunda tekislanadi, spetsifikatsiya hissi. */
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plexmono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plexmono-500-cyr.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ============================================================
   2. TOKENLAR
   Har bir token kamida 3 joyda ishlatiladi, aks holda u token emas.
   ============================================================ */

:root {
  /* --- Rang --- */
  --fon: #FBFAF8;                       /* chinni oq */
  --fon-2: #F1EEE9;                     /* ikkilamchi yuza */
  --fon-karta: #FFFFFF;
  --fon-tund: #14171A;                  /* grafit: yakun, futer */
  --sahna-devor: #A9B8A4;               /* qahramon sahnasining devor rangi */
  --tund-yashil: #153428;               /* sarlavha, CTA, faol til - referens maketdagi rang */
  --tund-yashil-2: #1E4634;
  --matn-yashil: #47584B;               /* sage fonda ikkilamchi matn */
  --matn-yashil-3: #6D7F72;

  --matn: #14171A;                      /* 15,8:1 */
  --matn-2: #5B6167;                    /* 6,0:1 */
  --matn-3: #8A9097;                    /* 3,3:1 — faqat >=13px ikkilamchi */
  --matn-tund-1: #F5F3EF;               /* to'q fonda asosiy */
  --matn-tund-2: rgb(245 243 239 / .68);

  --brend: #8A5A16;                     /* to'q latun, oq fonda 5,9:1 */
  --brend-yorqin: #D2A44F;              /* to'q fonda 7,4:1 */
  --brend-yuza: #F4EADA;                /* "hot" qator, badge */

  --chiziq: rgb(20 23 26 / .13);
  --chiziq-tund: rgb(245 243 239 / .22);
  --xato: #B4432D;

  /* --- Shrift --- */
  --shrift-matn: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shrift-mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --o-3xl: clamp(34px, 7.2vw, 60px);    /* h1 */
  --o-2xl: clamp(26px, 4.6vw, 40px);    /* h2 */
  --o-xl: clamp(19px, 2.6vw, 26px);     /* h3, karta sarlavhasi */
  --o-lg: 18px;                         /* lid matn */
  --o-md: 16px;                         /* asosiy matn va input (iOS zoom chegarasi) */
  --o-sm: 14px;
  --o-xs: 13px;
  --o-2xs: 11px;                        /* uppercase yorliq */

  --lh-1: 1.08;                         /* h1 */
  --lh-2: 1.18;                         /* h2, h3 */
  --lh-3: 1.6;                          /* matn */
  --lh-4: 1.35;                         /* zich matn */

  /* --- Bo'shliq --- */
  --b-1: 4px;
  --b-2: 8px;
  --b-3: 12px;
  --b-4: 16px;
  --b-5: 24px;
  --b-6: 32px;
  --b-7: 48px;
  --b-8: 64px;

  /* Bo'lim ritmi fluid: shu ikki qator "mobilda bo'shliq desktopdagidek
     qolib ketadi" muammosini butunlay yo'q qiladi. */
  --sek-y: clamp(40px, 7vw, 84px);
  --sek-x: clamp(16px, 4vw, 32px);
  --konteyner: 1160px;

  /* --- Shakl --- */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-full: 999px;

  --soya-1: 0 1px 2px rgb(20 23 26 / .04), 0 4px 16px rgb(20 23 26 / .06);
  --soya-2: 0 2px 8px rgb(20 23 26 / .08), 0 16px 40px rgb(20 23 26 / .10);

  /* --- Harakat --- */
  --tez: .18s;
  --orta: .32s;
  --egri: cubic-bezier(.2, .7, .2, 1);

  /* --- Qatlam --- */
  --z-shapka: 50;
  --z-panel: 60;
  --z-modal: 70;

  --shapka-h: 60px;
}

/* ============================================================
   3. RESET VA BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* data-if yolg'on bo'lganda element `hidden` atributini oladi. Brauzerning
   o'z qoidasi `[hidden] { display: none }` - lekin komponentga `display`
   bersak (masalan `.modal { display: grid }`), u brauzer qoidasidan
   ustun chiqadi va yashirilgan element ekranda qolib ketadi.
   Bu qoida shuni oldini oladi. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fon);
  color: var(--matn);
  font-family: var(--shrift-matn);
  font-size: var(--o-md);
  font-weight: 500;
  line-height: var(--lh-3);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: var(--lh-2);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--o-3xl); line-height: var(--lh-1); letter-spacing: -0.025em; }
h2 { font-size: var(--o-2xl); }
h3 { font-size: var(--o-xl); }

p { margin: 0; }

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

/* <picture> o'z qutisini yasamaydi: ichidagi <img> to'g'ridan-to'g'ri
   ota-elementning bolasi bo'lib qoladi. Usiz grid va flex ichidagi rasmlar
   o'lchamini yo'qotardi - picture inline element sifatida oraga tushib
   qolardi. Ya'ni AVIF qo'shish uchun HTML o'zgardi, ko'rinish esa
   o'zgarmasligi kerak. */
picture { display: contents; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Sticky shapka sarlavhani yopib qo'ymasin */
[id] { scroll-margin-top: calc(var(--shapka-h) + var(--b-3)); }

::selection { background: var(--brend-yuza); color: var(--matn); }

:focus-visible {
  outline: 2px solid var(--brend);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* Scroll animatsiyasi. js/app.js `.jq-in` qo'shadi.
   MUHIM: bu qoidalar index.html dagi <style> blokidan shu yerga
   ko'chirilgan. Ular yo'qolsa bloklar shaffof holida qotib qoladi. */
[data-anim] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--orta) var(--egri), transform var(--orta) var(--egri);
}
[data-anim].jq-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-anim] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   4. LAYOUT PRIMITIVLARI
   ============================================================ */

.konteyner {
  width: 100%;
  max-width: var(--konteyner);
  margin-inline: auto;
  padding-inline: var(--sek-x);
}
.konteyner--tor { max-width: 780px; }

.sek { padding-block: var(--sek-y); }

/* To'q bo'lim: ichidagi matn va tugmalar avtomatik aylanadi */
.sek--tund {
  background: var(--fon-tund);
  color: var(--matn-tund-1);
}
.sek--tund h1, .sek--tund h2, .sek--tund h3 { color: var(--matn-tund-1); }
.sek--2 { background: var(--fon-2); }

/* Vertikal stack. Bo'shliq --yig-b bilan boshqariladi. */
.yig { display: flex; flex-direction: column; gap: var(--yig-b, var(--b-4)); }
.qator { display: flex; align-items: center; gap: var(--qator-b, var(--b-3)); }

/* ============================================================
   5. KOMPONENTLAR
   ============================================================ */

/* ---- Yorliq (eyebrow) ----
   Ilgari 8 ta joyda 6 xil kombinatsiya edi. Endi bitta. Monoshrift —
   bu spetsifikatsiya varag'i tili. */
.yorliq {
  font-family: var(--shrift-mono);
  font-size: var(--o-2xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brend);
}
.sek--tund .yorliq, .qahramon .yorliq { color: var(--brend-yorqin); }

/* ---- Tugma ----
   Ilgari 8 xil CTA uslubi bor edi, bittasi ham takrorlanmasdi. Endi 2 ta.
   To'q fonda ikkalasi avtomatik aylanadi. */
.tugma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--b-2);
  min-height: 48px;                 /* barmoq uchun */
  padding: 0 var(--b-5);
  border: 1.5px solid transparent;
  border-radius: var(--r-1);
  font-size: var(--o-md);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background var(--tez) var(--egri), border-color var(--tez) var(--egri), color var(--tez) var(--egri);
}
.tugma--asosiy { background: var(--matn); color: var(--fon); }
.tugma--sirtqi { background: transparent; color: var(--matn); border-color: var(--chiziq); }

.sek--tund .tugma--asosiy, .qahramon .tugma--asosiy { background: var(--matn-tund-1); color: var(--matn); }
.sek--tund .tugma--sirtqi, .qahramon .tugma--sirtqi { color: var(--matn-tund-1); border-color: var(--chiziq-tund); }

.tugma--keng { width: 100%; }

@media (hover: hover) {
  .tugma--asosiy:hover { background: #000; }
  .tugma--sirtqi:hover { border-color: var(--brend); color: var(--brend); }
  .sek--tund .tugma--asosiy:hover, .qahramon .tugma--asosiy:hover { background: #fff; }
  .sek--tund .tugma--sirtqi:hover, .qahramon .tugma--sirtqi:hover { border-color: var(--brend-yorqin); color: var(--brend-yorqin); }
}

.ikon-tel { width: 18px; height: 18px; flex: none; }

/* ---- Til almashtirgich ---- */
.til { display: flex; border: 1px solid rgb(21 52 40 / .20); border-radius: var(--r-full); padding: 3px; }
.til__t {
  /* Tugma emas, havola: har til alohida manzilda turadi. */
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; min-height: 34px;
  padding: 0 var(--b-2);
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  text-decoration: none;
  color: var(--matn-2);
  font-family: var(--shrift-mono);
  font-size: var(--o-2xs);
  font-weight: 500;
  letter-spacing: .08em;
  cursor: pointer;
}
.til__t[aria-current="page"], .til__t[aria-current="true"] { background: var(--tund-yashil); color: var(--fon); }

/* ---- Kiritish maydoni ---- */
.kirit {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--b-4);
  background: var(--fon-karta);
  border: 1.5px solid var(--chiziq);
  border-radius: var(--r-1);
  font-size: var(--o-md);            /* 16px — iOS avtomatik zoom qilmaydi */
  color: var(--matn);
}
.kirit::placeholder { color: var(--matn-3); }

/* Telefon maydoni: mamlakat kodi maydon ichida emas, uning ustida turgan
   turg'un yozuv. Shu tufayli odam nima yozsa ham kod bilan aralashmaydi
   va raqam har doim bitta ko'rinishga keladi (js/lid.js). */
.tel-quti { position: relative; display: block; }
.tel-quti__kod {
  position: absolute;
  left: var(--b-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--matn-2);
  font-size: var(--o-md);
  font-variant-numeric: tabular-nums;
  pointer-events: none;    /* bosilganda fokus maydonga tushsin */
}
/* Kod uchun joy. Kengligi kodning o'lchamidan kelib chiqadi - shrift
   o'zgarsa ham matn kod ustiga chiqib ketmaydi. */
.kirit--tel { padding-left: calc(var(--b-4) + 3.55em); }
.kirit:focus-visible { border-color: var(--brend); outline: none; box-shadow: 0 0 0 3px rgb(138 90 22 / .16); }

/* ============================================================
   6. BO'LIMLAR
   ============================================================ */

/* ---- Shapka ---- */
.shapka {
  position: sticky;
  top: 0;
  z-index: var(--z-shapka);
  background: rgb(251 250 248 / .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--chiziq);
}
.shapka__ichki {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b-3);
  min-height: var(--shapka-h);
}
.shapka__chap { display: flex; align-items: center; gap: var(--b-2); min-height: 44px; }
.shapka__ong { display: flex; align-items: center; gap: var(--b-3); }

.logo { width: 34px; height: 34px; border-radius: var(--r-full); }
.logo-matn {
  font-weight: 700;
  font-size: var(--o-sm);
  letter-spacing: .04em;
}
.logo-matn small {
  display: block;
  font-family: var(--shrift-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--matn-3);
}

/* Telefon: tor ekranda ikonka, kengroqda to'liq raqam.
   To'liq raqam 390px shapkaga sig'maydi - logo yozuvi ustiga chiqib ketardi,
   ruschada ("ОФИЦИАЛЬНО · ТАШКЕНТ" uzunroq) yanada yomon edi. */
.shapka__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--b-2);
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--b-3);
  border: 1.5px solid var(--chiziq);
  border-radius: var(--r-1);
  font-family: var(--shrift-mono);
  font-size: var(--o-sm);
  font-weight: 500;
  white-space: nowrap;
}
.shapka__tel-ikon { width: 20px; height: 20px; }
.shapka__tel-matn { display: none; }

/* Bosh sahifada shapka sahna rasmining ustida shaffof turadi - referens
   maketdagidek. Ichki sahifalarda fon oq qoladi, chunki u yerda rasm yo'q. */
.shapka--shaffof {
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
  color: var(--tund-yashil);
}
/* Sahifa pastga aylantirilganda shaffof shapka oq kontent ustida qolib
   o'qilmay qolardi. Shu sinf JS bilan qo'yiladi va fonni qaytaradi. */
.shapka--qattiq {
  background: rgb(251 250 248 / .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--chiziq);
  color: var(--matn);
}
.shapka--qattiq .logo-matn small { color: var(--matn-3); }
.shapka--qattiq .shapka__nav a,
.shapka--qattiq .shapka__tel { border-color: var(--chiziq); color: var(--matn); }
.shapka--qattiq .til { border-color: var(--chiziq); }
.shapka--qattiq .til__t { color: var(--matn-2); }
.shapka--shaffof .logo-matn small { color: var(--matn-yashil); }
.shapka--shaffof .til { border-color: rgb(21 52 40 / .22); }
.shapka--shaffof .til__t { color: var(--matn-yashil); }
.shapka--shaffof .shapka__tel { border-color: rgb(21 52 40 / .22); color: var(--tund-yashil); }

/* Logo ostidagi yozuv ham tor ekranda ortiqcha */
.logo-matn small { display: none; }

@media (min-width: 600px) {
  .shapka__tel-ikon { display: none; }
  .shapka__tel-matn { display: inline; }
  .logo-matn small { display: block; }
}

@media (hover: hover) { .shapka__tel:hover { color: var(--brend); } }

/* ---- Qahramon (hero) ----
   Referens maketdan 1:1: sahna rasmi butun ekran bo'ylab, uning ustida
   chapda matn, o'ngda ikkita teg, pastida va'dalar qatori va turkumlar
   paneli. Rasmning chap qismi aynan matn uchun bo'sh generatsiya qilingan,
   shuning uchun qora parda kerak emas - faqat yengil oqartirish.
   Telefonda rasm oqimda turadi (tepada), qolgani uning ostiga tushadi. */
.qahramon {
  position: relative;
  overflow: hidden;
  background: var(--sahna-devor);
  color: var(--tund-yashil);
  /* shapka shaffof bo'lgani uchun uning balandligi qahramonga qo'shiladi */
  margin-top: calc(-1 * var(--shapka-h));
  padding-top: var(--shapka-h);
}
.qahramon__rasm { display: block; width: 100%; height: auto; }

.qahramon__parda { display: none; }

.qahramon__ichki { position: relative; padding-block: var(--b-6); }
.qahramon__matn { max-width: 34rem; }

/* Telefonda ham kompyuterdagi tartib: matn rasm ustida turadi.
   Kadr shu maqsadda ikki qavatli qilib yig'iladi - tepada ravoq,
   o'yma yozuv va uchta smesitel, pastda esa cho'zilgan pol maydoni
   (compose_hero.py dagi pastga_kengaytir). Matn aynan shu maydondan
   boshlanadi va hech qachon mahsulot ustiga tushmaydi.

   Rasm o'z nisbatida (216vw) qoladi, cho'zilmaydi: object-fit: cover
   bo'lganda kesim ekran balandligiga qarab siljib, mahsulotlar matn
   ostiga kirib ketardi. Rasm tugagan joydan pastda qahramonning fon
   rangi davom etadi - u kadr tagidagi rang bilan bir xil, shuning
   uchun ulanish joyi ko'rinmaydi. */
@media (max-width: 599px) {
  /* Fon rangi kadrning eng pastki qatoridagi rang bilan bir xil
     (compose_hero.py dagi ORTACHA_POL) - matn rasmdan uzunroq bo'lsa,
     rasm tugagan joy ko'rinmaydi. */
  .qahramon { background: #CEBFA8; }
  .qahramon picture { position: absolute; inset: 0 0 auto; display: block; }
  .qahramon__parda {
    display: block; position: absolute; inset: 0;
    background: linear-gradient(180deg,
      rgb(206 191 168 / 0) 44%,
      rgb(206 191 168 / .45) 53%,
      rgb(206 191 168 / .82) 61%,
      rgb(206 191 168 / .95) 71%);
  }
  /* 138vw - postamentlar va zaytun shoxi rasmning shu balandligida
     tugaydi, matn esa undan pastda, cho'zilgan pol maydonidan
     boshlanadi. vw da berilgani muhim: kadr ham ekran kengligiga
     nisbatan masshtablanadi, shuning uchun nisbat har qanday telefonda
     saqlanadi. */
  .qahramon__ichki { padding-block: 138vw var(--b-6); }
  .qahramon__matn { max-width: none; }
}

@media (min-width: 900px) {
  /* Tuzilma: chap ustunda matn, o'ng ustunda sahna rasmi. Ilgari rasm
     butun kenglikda edi va uning kesimi ekran o'lchamiga qarab siljib,
     mahsulotlar matn ustiga tushib qolardi. Endi ikkalasi hech qachon
     kesishmaydi: rasm 42% dan boshlanadi, chap tomon esa tekis fon.

     Fon gradienti aynan rasmning devor va pol ranglaridan olingan, rasm
     cheti esa niqob bilan fonga singiydi - ulanish joyi ko'rinmaydi. */
  .qahramon {
    min-height: clamp(560px, 42vw, 760px);
    /* max-height ataylab yo'q. Ilgari 90vh turardi va past ekranda
       (masalan 1352x670) kontent unga sigmasdi: `overflow: hidden`
       tufayli qidiruv ostidagi izoh va ikkinchi CTA butunlay kesilib
       ketardi - yani harakatga chaqiruvning yarmi ko'rinmasdi. Endi
       hero kontent qancha bo'lsa shuncha baland bo'ladi; rasm esa o'z
       nisbati va max-height: 100% bilan cheklangan, shuning uchun u
       cho'zilib ketmaydi. */
    background: linear-gradient(180deg,
      #9DA08F 0%, #A8AB9A 15%, #A5A799 35%, #A1A594 55%,
      #9DA190 68%, #949B8B 73%, #909988 76.5%,
      #B8B0A5 79%, #E1D4C1 86%, #E1D6C4 93%, #BDB5A8 100%);
  }
  .qahramon picture {
    position: absolute;
    /* Tor ekranda matn ustuni nisbatan kengroq bo'ladi, shuning uchun
       rasm kechroq boshlanadi - ular hech qachon kesishmaydi. */
    left: 54%; right: 0; bottom: 0; top: auto;
    /* Maydon balandligi kadr nisbatidan kelib chiqadi (aspect-ratio =
       compose_hero.py dagi KENG_NISBAT). Ilgari maydon butun hero
       balandligini egallardi va tik bo'lib qolardi: `object-fit: cover`
       ortiqcha kenglikni kesib tashlardi, kesim esa chapdagi xrom
       smesitel ustiga tushib, mahsulot yarim ko'rinardi. Endi tor
       ekranda rasm kesilmaydi - shunchaki pastroq bo'ladi va hero
       tepasida fon qoladi; keng ekranda esa max-height ishlaydi va
       kesim faqat kadr tepasidagi bo'sh devordan olinadi. */
    aspect-ratio: 1.35;
    max-height: 100%;
    display: block;
    /* Niqob rasm chetini fonga singdiradi: chapdan - matn ustuni
       tomonga, tepadan - fon gradientiga. Niqob faqat tekis maydonni
       singdira oladi: ilgari kadr chetida old plandagi zaytun daraxti
       turardi va niqob uni tik chiziq bo'lib kesardi. Endi kadr toza
       devordan boshlanadi (compose_hero.py dagi CHAP_KESIM), shu bilan
       birga smesitellar qatori kadrning 23% idan boshlanadi - 10%
       niqob ikkalasiga ham yetadi. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%),
                        linear-gradient(180deg, transparent 0, #000 17%);
            mask-image: linear-gradient(90deg, transparent 0, #000 10%),
                        linear-gradient(180deg, transparent 0, #000 17%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
  /* Maydon kadrdan yassiroq bo'lib qolganda (juda keng monitor) ortiqcha
     kenglik kesiladi. Kesim o'ngdan emas, 75% dan olinadi: chapda
     smesitellar qatori boshlanadi, o'ngda esa faqat zaytun shoxlari va
     tosh ustunlar - ularni yo'qotish hech narsani buzmaydi. */
  .qahramon__rasm { height: 100%; object-fit: cover; object-position: 75% bottom; }
  /* Parda endi deyarli kerak emas: matn tekis fonda turadi. */
  .qahramon__parda {
    display: block;
    position: absolute; inset: 0;
    background:
      /* Shapka ostidagi yengil oqartirish: telefon raqami va til tugmasi
         rasmning band qismi ustida ham o'qiladi. */
      linear-gradient(180deg, rgb(242 245 237 / .74) 0, rgb(242 245 237 / .34) 58px, rgb(242 245 237 / 0) 110px),
      linear-gradient(94deg,
        rgb(240 244 235 / .30) 0%,
        rgb(240 244 235 / .22) 30%,
        rgb(240 244 235 / .08) 44%,
        rgb(240 244 235 / 0) 54%);
  }
  .qahramon__ichki { padding-block: clamp(24px, 3vw, 48px) clamp(28px, 3.4vw, 56px); }
  .qahramon__matn { max-width: 33rem; }
}

/* Ekran kengaygan sari matn ustuni nisbatan torayadi, shuning uchun rasm
   oldinroq boshlanadi va sahna kattaroq ko'rinadi. */
@media (min-width: 1200px) {
  .qahramon picture { left: 46%; }
}
@media (min-width: 1400px) {
  .qahramon picture { left: 42%; }
}

.qahramon .yorliq { color: var(--matn-yashil-3); letter-spacing: .18em; }
.qahramon h1 {
  margin-block: var(--b-2) var(--b-3);
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--tund-yashil);
  text-wrap: balance;
}
.qahramon h1 span { display: block; }
/* Ikkinchi qator kichikroq - referensdagidek ikki pog'onali sarlavha */
.qahramon h1 .h1--kichik { font-size: .74em; margin-top: .08em; }
.qahramon__lid {
  font-size: var(--o-lg);
  line-height: var(--lh-4);
  color: var(--matn-yashil);
  max-width: 31rem;
}

/* Uchta dalil: to'q yashil doira ichida oq belgi */
.afzal { list-style: none; margin: clamp(14px, 1.7vw, 22px) 0 0; padding: 0; display: grid; gap: clamp(9px, 1.1vw, 14px); }
.afzal__q { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--b-4); }
.afzal__ikon {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgb(21 52 40 / .62);
  color: #fff;
}
.afzal__ikon svg { width: 22px; height: 22px; }
.afzal__matn { display: grid; line-height: 1.25; }
.afzal__matn b { font-size: clamp(19px, 1.6vw, 24px); font-weight: 700; letter-spacing: -0.01em; color: var(--tund-yashil); }
.afzal__matn span { margin-top: 2px; font-size: var(--o-sm); color: var(--matn-yashil); }

/* Hero'ning yagona harakati: pastdagi formaga o'tish.
   Ilgari bu yerda uy qidiruvi, taklif ro'yxati va ularning
   kartichkasi turardi - ariza endi faqat sahifa oxiridagi
   formadan keladi. */
.qahramon__amal { margin-top: clamp(16px, 1.8vw, 23px); }
.qahramon__cta { text-decoration: none; }

.qahramon .tugma--asosiy {
  border-radius: var(--r-full);
  padding-inline: var(--b-6);
  background: var(--tund-yashil);
  color: #F6F8F3;
}
@media (hover: hover) { .qahramon .tugma--asosiy:hover { background: var(--tund-yashil-2); } }
.tugma__ok { width: 18px; height: 18px; flex: none; }
.qahramon__izoh { margin-top: var(--b-2); max-width: 30rem; font-size: var(--o-sm); color: var(--matn-yashil-3); }

/* Telefonda bu qator CTA ostida yolg'iz turadi va o'qilishi kerak -
   shuning uchun asosiy matn o'lchamida. Kengroq ekranda hero ustuni zichroq,
   u yerda kichrayadi. */
.qahramon__izoh { margin-top: var(--b-3); font-size: var(--o-sm); color: var(--matn-2); }

/* ---- Qahramon ostidagi qavat ----
   Va'dalar qatori va turkumlar paneli shu yerda turadi. Ilgari ular
   sahna rasmining ustida edi va rasmning pastini yopib qo'yardi. */
.qavat {
  background: linear-gradient(180deg, #C9D5C4 0%, #E4EADE 46%, var(--fon) 100%);
  padding-block: clamp(16px, 2vw, 26px) clamp(20px, 2.6vw, 34px);
}

/* ---- Va'dalar qatori ----
   Referens maketdagidek: chapda Artize Wellness bloki, keyin uchta karta.
   Kartalar havola emas - ular nima taklif qilishimizni aytadi, xolos.
   Shuning uchun na strelka, na hover holati bor: bosiladigan ko'rinish
   bosilmaydigan elementda foydalanuvchini aldaydi. */
.vada {
  position: relative;
  display: grid;
  border-radius: 14px;
  background: #FBFCF9;
  box-shadow: 0 1px 0 rgb(21 52 40 / .06), 0 12px 30px -24px rgb(21 52 40 / .55);
  overflow: hidden;
}
@media (min-width: 900px) { .vada { grid-template-columns: minmax(180px, .75fr) repeat(3, 1fr); } }

.vada__brend { display: none; }
@media (min-width: 900px) {
  .vada__brend { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--b-3); padding: 0 0 0 var(--b-5); }
}
.vada__logo {
  display: grid; justify-items: center; gap: 4px;
  font-family: var(--shrift-mono);
  font-size: var(--o-md); letter-spacing: .30em; text-transform: uppercase;
  color: var(--tund-yashil);
}
.vada__logo small { font-size: var(--o-2xs); letter-spacing: .34em; color: var(--matn-yashil); }

.vada__k {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--b-3);
  padding: 10px var(--b-4);
}
@media (min-width: 900px) {
  .vada__k { border-left: 1px solid rgb(21 52 40 / .12); }
  /* Birinchi kartaning rasmi chapdagi Artize blokida allaqachon turibdi -
     kartada takrorlanmaydi. Telefonda esa o'sha blok yashiriladi, rasm
     kartaning o'ziga kerak bo'ladi: aks holda uchta qatordan bittasi
     rasmsiz qolib, matnlar bir vertikal chiziqqa tushmaydi. */
  .vada__k--rasmsiz { grid-template-columns: 1fr; }
  .vada__k--rasmsiz .vada__rasm { display: none; }
}
@media (max-width: 899px) { .vada__k + .vada__k { border-top: 1px solid rgb(21 52 40 / .10); } }
.vada__rasm { width: 62px; height: 52px; object-fit: cover; border-radius: 8px; }
.vada__rasm--tik { width: 74px; height: 74px; border-radius: 0 14px 14px 0; }
.vada__matn { display: grid; line-height: 1.3; }
.vada__matn b { font-size: var(--o-sm); font-weight: 700; color: var(--tund-yashil); }
.vada__matn span { font-size: var(--o-xs); color: var(--matn-yashil); }
/* ---- Turkumlar paneli ----
   Yumaloq burchakli oq panel, chapda sarlavha, o'ngda dumaloq eskizlar. */
.turkum {
  position: relative; z-index: 2;
  display: grid; align-items: center; gap: var(--b-3);
  grid-template-columns: 1fr;
  margin-top: var(--b-4);
  padding: var(--b-5);
  border-radius: 20px;
  background: rgb(240 244 235 / .86);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55), 0 20px 50px -30px rgb(21 52 40 / .5);
}
@media (min-width: 900px) {
  .turkum { grid-template-columns: minmax(200px, 240px) auto 1fr auto; margin-top: var(--b-3); padding: var(--b-3) var(--b-5) var(--b-4); }
}
.turkum__bosh h2 { font-size: clamp(20px, 1.9vw, 26px); color: var(--tund-yashil); letter-spacing: -0.02em; }
.turkum__bosh p { margin-top: var(--b-2); font-size: var(--o-sm); line-height: 1.35; color: var(--matn-yashil); }
.turkum__chiziq { display: block; width: 44px; height: 2px; margin-top: var(--b-3); background: rgb(21 52 40 / .35); }

.turkum__ok {
  display: none;
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgb(21 52 40 / .20); background: transparent; color: var(--tund-yashil);
  place-items: center; cursor: pointer;
  transition: background var(--tez) var(--egri);
}
.turkum__ok svg { width: 15px; height: 15px; }
@media (min-width: 900px) { .turkum__ok { display: grid; } }
@media (hover: hover) { .turkum__ok:hover { background: rgb(255 255 255 / .7); } }

.turkum__yol {
  /* O'ng chetda yumshoq so'nish: lenta davom etishini ko'rsatadi va
     yarim kartochka keskin kesilmaydi. Chap chet ataylab so'nmaydi -
     aks holda birinchi turkumning nomi hech qachon aylantirilmagan
     holatda ham yarim shaffof bo'lib turadi. */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  /* min-width: 0 shart: flex/grid bolasining ichki kengligi konteynerdan
     kattaroq bo'lsa, u qutini kengaytirib yuboradi va sahifa gorizontal
     siljiydi. Telefonda bir marta shunday bo'lgan. */
  display: flex; gap: var(--b-3); min-width: 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding: 2px;
  scroll-behavior: smooth;
}
.turkum__yol::-webkit-scrollbar { display: none; }
.turkum__t {
  flex: none; scroll-snap-align: start;
  display: grid; justify-items: center; gap: var(--b-2);
  width: 98px; color: inherit;
}
.turkum__doira {
  width: 80px; height: 80px; border-radius: 50%;
  background: #fff;
  display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 8px 20px -12px rgb(21 52 40 / .5);
  transition: transform var(--orta) var(--egri), box-shadow var(--orta) var(--egri);
}
.turkum__doira img { width: 58px; height: 58px; object-fit: contain; }
.turkum__nom { font-size: var(--o-xs); font-weight: 700; line-height: 1.2; text-align: center; color: var(--tund-yashil); }
@media (hover: hover) {
  .turkum__t:hover .turkum__doira { transform: translateY(-4px); box-shadow: 0 14px 26px -12px rgb(21 52 40 / .55); }
}

/* Bot tuzog'i. Odam ko'rmaydi va fokusga ham tushmaydi, avtomatik
   to'ldiruvchi skript esa ko'radi va to'ldiradi - server shunda lidni
   sassiz tashlab yuboradi. display:none EMAS: ba'zi botlar yashirin
   maydonni o'tkazib yuboradi, shuning uchun ekrandan chiqarib qo'yiladi. */
.tuzoq {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* data-list konteyneri: o'zi grid/flex oqimiga aralashmaydi, ichidagi
   elementlar to'g'ridan-to'g'ri ota-onaga tushadi. Busiz narx kartochkalari
   uch ustunga bo'linmay, ustma-ust qolib ketadi. */
.royxat { display: contents; }

/* ---- Bo'lim sarlavhasi (umumiy) ---- */
.sek__bosh { max-width: 46rem; margin-bottom: var(--b-6); }
.sek__bosh h2 { margin-block: var(--b-2) var(--b-3); }
.sek__lid { color: var(--matn-2); }
.sek--tund .sek__lid { color: var(--matn-tund-2); }

/* ---- Uch daraja ----
   Telefonda 240px rasmli vertikal kartalar juda ko'p joy egallardi.
   Endi gorizontal qator: kichik thumbnail + matn. 600px dan kengda
   kartalarga aylanadi. */
.darajalar { display: grid; gap: var(--b-3); }
@media (min-width: 600px) { .darajalar { grid-template-columns: repeat(3, 1fr); gap: var(--b-4); } }

.darajalar__ort { margin-top: var(--b-5); font-size: var(--o-sm); }
.darajalar__ort a { color: var(--brend); text-decoration: underline; text-underline-offset: 3px; }

.daraja {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--b-4);
  align-items: center;
  padding: var(--b-3);
  background: var(--fon-karta);
  border: 1px solid var(--chiziq);
  border-radius: var(--r-2);
}
.daraja[data-hot] { border-color: var(--brend); }
.daraja__rasm {
  width: 88px; height: 88px;
  object-fit: cover;
  border-radius: var(--r-1);
}
/* Brend nomi shu yorliq ichida turadi ("Premium · Jaquar"), shuning uchun
   uppercase YO'Q: Jaquar, Artize va Essco har doim faqat bosh harfi katta
   holda yozilishi kerak - JAQUAR emas. Monoshrift va letter-spacing yorliq
   ko'rinishini saqlab qoladi. */
.daraja__tag {
  font-family: var(--shrift-mono);
  font-size: var(--o-2xs);
  letter-spacing: .08em;
  color: var(--brend);
}
.daraja__nom { margin-block: 2px var(--b-1); font-size: var(--o-lg); font-weight: 700; }
.daraja__izoh { display: none; }
.daraja__narx {
  font-family: var(--shrift-mono);
  font-size: var(--o-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Ikkinchi qator: bitta mahsulotdan boshlanadigan narx. Asosiy narx
   (to'liq komplekt) ustun bo'lib qolishi uchun sustroq va kichikroq. */
.daraja__narx2 {
  font-family: var(--shrift-mono);
  font-size: var(--o-xs);
  font-variant-numeric: tabular-nums;
  color: var(--matn-2);
  margin-top: calc(var(--b-1) * -1);
}
.daraja__tugma { display: none; }

@media (min-width: 600px) {
  .daraja {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 0;
    padding: 0;
    overflow: hidden;
    align-items: stretch;
  }
  .daraja[data-hot] { box-shadow: var(--soya-2); }
  .daraja__rasm { width: 100%; height: 180px; border-radius: 0; }
  .daraja__matn {
    display: flex;
    flex-direction: column;
    gap: var(--b-2);
    padding: var(--b-4) var(--b-4) var(--b-5);
  }
  .daraja__izoh { display: block; font-size: var(--o-sm); line-height: var(--lh-4); color: var(--matn-2); }
  /* margin-top: auto - tugma qolgan bo'sh joyni yeb, kartochka pastiga
     tushadi. Shunda matni turli uzunlikdagi uchala kartochkada ham
     tugmalar bitta chiziqda turadi. */
  .daraja__tugma { display: inline-flex; margin-top: auto; padding-top: var(--b-2); }
}

/* ---- Ishonch (Murod Nazarov) ---- */
.ishonch__ichki { display: grid; gap: var(--b-5); align-items: center; }
@media (min-width: 900px) { .ishonch__ichki { grid-template-columns: 1fr 20rem; gap: var(--b-7); } }

.ishonch h2 { margin-block: var(--b-2) var(--b-4); }
.ishonch__matn { color: var(--matn-tund-2); }
.ishonch__matn + .ishonch__matn { margin-top: var(--b-3); }

.ishonch__figura { margin: 0; }
.ishonch__portret {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 320px;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--r-2);
}
.ishonch__izoh {
  margin-top: var(--b-2);
  font-family: var(--shrift-mono);
  font-size: var(--o-2xs);
  letter-spacing: .06em;
  color: var(--matn-tund-2);
}

/* ---- 3D xizmat ----
   Maketda uchta 240px rasmli karta bor edi (~1750px telefonda). Endi bitta
   render namunasi + raqamlangan uchta qator. Raqamlar bu yerda haqiqiy
   ketma-ketlikni bildiradi (plan -> dizayn -> showroom), shuning uchun
   o'rinli. */
.xizmat__ichki { display: grid; gap: var(--b-6); align-items: start; }
@media (min-width: 900px) { .xizmat__ichki { grid-template-columns: 1fr 1fr; gap: var(--b-7); } }

.xizmat__rasm-o { position: relative; }
.xizmat__rasm {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r-2);
}
.xizmat__belgi {
  position: absolute;
  left: var(--b-3);
  bottom: var(--b-3);
  padding: 6px var(--b-3);
  background: rgb(20 23 26 / .82);
  border-radius: var(--r-full);
  font-family: var(--shrift-mono);
  font-size: var(--o-2xs);
  letter-spacing: .08em;
  color: var(--matn-tund-1);
}

.qadamlar { display: grid; gap: var(--b-4); }
.qadam { display: grid; grid-template-columns: auto 1fr; gap: var(--b-3) var(--b-4); }
.qadam__raqam {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 1.5px solid var(--brend);
  border-radius: var(--r-full);
  font-family: var(--shrift-mono);
  font-size: var(--o-xs);
  color: var(--brend);
}
.qadam__nom { align-self: center; font-weight: 700; }
.qadam__izoh { grid-column: 2; font-size: var(--o-sm); line-height: var(--lh-4); color: var(--matn-2); }

/* ---- VIP ---- */
.vip { position: relative; overflow: hidden; }
.vip__rasm { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vip__parda { position: absolute; inset: 0; background: linear-gradient(100deg, rgb(20 23 26 / .94) 0%, rgb(20 23 26 / .82) 52%, rgb(20 23 26 / .55) 100%); }
.vip__ichki { position: relative; max-width: 40rem; }
.vip h2 { margin-block: var(--b-2) var(--b-3); }
.vip__ro { display: grid; gap: var(--b-3); margin-top: var(--b-5); }
.vip__q { display: grid; grid-template-columns: auto 1fr; gap: var(--b-3); font-size: var(--o-sm); color: var(--matn-tund-2); }
.vip__nuqta { width: 7px; height: 7px; margin-top: 9px; background: var(--brend-yorqin); border-radius: var(--r-full); }
.vip__tugmalar { display: flex; flex-wrap: wrap; gap: var(--b-2); margin-top: var(--b-5); }

/* ---- FAQ ---- */
.faq { display: grid; gap: var(--b-2); max-width: 46rem; }
.faq__b { background: var(--fon-karta); border: 1px solid var(--chiziq); border-radius: var(--r-2); overflow: hidden; }
.faq__s {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--b-4);
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: var(--b-3) var(--b-4);
  border: 0;
  background: none;
  font-weight: 700;
  font-size: var(--o-md);
  text-align: left;
  cursor: pointer;
}
.faq__belgi { font-family: var(--shrift-mono); font-size: var(--o-lg); color: var(--brend); }
.faq__j { padding: 0 var(--b-4) var(--b-4); font-size: var(--o-sm); line-height: var(--lh-4); color: var(--matn-2); }

/* ---- Aloqa ----
   Forma to'ldirishni istamagan odam uchun ikkinchi yo'l. Raqam sahifadagi
   eng katta monoshrift element - uni qidirib topish kerak bo'lmasin.

   Bitta karta, ikki ustun: matn va foto. Ikkita alohida karta qilinganda
   ularning balandligi mos kelmasdi (fotoli karta ikki barobar baland edi) -
   birlashtirilganda foto ustunni to'ldiradi va muammo tug'ilmaydi. */
.aloqa__karta {
  display: grid;
  background: var(--fon-karta);
  border: 1px solid var(--chiziq);
  border-radius: var(--r-3);
  overflow: hidden;
}
@media (min-width: 900px) { .aloqa__karta { grid-template-columns: 1fr 34rem; } }

.aloqa__matn {
  display: grid;
  gap: var(--b-5);
  align-content: center;
  padding: var(--b-5);
}
@media (min-width: 700px) { .aloqa__matn { gap: var(--b-6); padding: var(--b-6); } }

/* Ikkinchi blok (showroom) yuqorisida ingichka ajratgich */
.aloqa__blok { display: grid; gap: var(--b-2); }
.aloqa__blok + .aloqa__blok { padding-top: var(--b-5); border-top: 1px solid var(--chiziq); }

.aloqa__nom {
  font-family: var(--shrift-mono);
  font-size: var(--o-2xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--matn-3);
}

.aloqa__raqam {
  font-family: var(--shrift-mono);
  font-size: clamp(26px, 4.4vw, 38px);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}
@media (hover: hover) { .aloqa__raqam:hover { color: var(--brend); } }

.aloqa__vaqt { font-size: var(--o-sm); color: var(--matn-2); }
.aloqa__manzil { font-size: var(--o-lg); font-weight: 700; line-height: var(--lh-4); }
.aloqa__tugma { justify-self: start; margin-top: var(--b-2); }
@media (max-width: 599px) { .aloqa__tugma { justify-self: stretch; } }

/* Jonli xarita ustunni to'liq egallaydi. Telefonda matndan keyin turadi.
   Ramka ichida sichqoncha bilan surish va masshtab ishlaydi. */
.aloqa__xarita { aspect-ratio: 3 / 2; background: var(--fon-2); }
@media (min-width: 900px) { .aloqa__xarita { aspect-ratio: auto; height: 100%; min-height: 26rem; } }
.aloqa__xarita iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---- Yakuniy forma ---- */
.final__ichki { display: grid; gap: var(--b-6); align-items: start; }
@media (min-width: 900px) { .final__ichki { grid-template-columns: 1fr 24rem; gap: var(--b-7); } }
.final h2 { margin-block: var(--b-2) var(--b-3); }

.final__forma { display: grid; gap: var(--b-2); }
.final__forma .kirit { background: rgb(245 243 239 / .10); border-color: var(--chiziq-tund); color: var(--matn-tund-1); }
.final__forma .kirit::placeholder { color: rgb(245 243 239 / .45); }
/* Mamlakat kodi - maydonning yozuvi bilan bir xil ravshanlikda:
   u raqamning bir qismi bo'lib ko'rinishi kerak, placeholder emas. */
.final__forma .tel-quti__kod { color: var(--matn-tund-1); }

/* Segmentli tanlov - dropdown o'rniga bitta tegish */
.segment { display: flex; flex-wrap: wrap; gap: var(--b-2); }
.segment__t {
  min-height: 44px;
  padding: 0 var(--b-3);
  background: transparent;
  border: 1.5px solid var(--chiziq-tund);
  border-radius: var(--r-1);
  color: var(--matn-tund-2);
  font-size: var(--o-sm);
  cursor: pointer;
}
.segment__t[aria-pressed="true"] { background: var(--matn-tund-1); border-color: var(--matn-tund-1); color: var(--matn); font-weight: 700; }
.segment__nom { margin-block: var(--b-3) var(--b-2); font-family: var(--shrift-mono); font-size: var(--o-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--matn-tund-2); }

.final__yubor { margin-top: var(--b-4); }
.final__izoh { margin-top: var(--b-3); font-size: var(--o-xs); color: var(--matn-tund-2); }
.final__izoh a { color: var(--brend-yorqin); text-decoration: underline; text-underline-offset: 3px; }
.final__xato { margin-top: var(--b-2); font-size: var(--o-xs); color: #FFB4A2; }
.final__rahmat { padding: var(--b-5); background: rgb(245 243 239 / .12); border-radius: var(--r-2); font-weight: 700; text-align: center; }

/* ---- Futer ---- */
.futer { background: var(--fon-tund); color: var(--matn-tund-2); border-top: 1px solid var(--chiziq-tund); }
.futer__ichki { display: grid; gap: var(--b-3); padding-block: var(--b-5); font-size: var(--o-xs); }
.futer a { color: var(--matn-tund-1); }
@media (min-width: 600px) { .futer__ichki { grid-template-columns: 1fr auto; align-items: center; } }

/* ---- Futer navigatsiyasi ----
   Ichki sahifalar har sahifadan bir bosishda: odam uchun ham, kraulerlar
   uchun ham. Mobil - bitta ustun, keyin uchta. */
.futer__nav {
  display: grid;
  gap: var(--b-6);
  padding-block: var(--b-7) var(--b-6);
  border-bottom: 1px solid var(--chiziq-tund);
}
@media (min-width: 700px) { .futer__nav { grid-template-columns: repeat(3, 1fr); gap: var(--b-5); } }
.futer__ustun { display: grid; gap: var(--b-2); align-content: start; }
.futer__nom {
  margin-bottom: var(--b-1);
  font-family: var(--shrift-mono);
  font-size: var(--o-2xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brend-yorqin);
}
.futer__ustun a { font-size: var(--o-sm); color: var(--matn-tund-2); }
@media (hover: hover) { .futer__ustun a:hover { color: var(--matn-tund-1); } }
.futer__narx { font-family: var(--shrift-mono); color: var(--matn-3); }

/* ---- Mobil doimiy panel ----
   Sahifa uzun, CTA'lar tarqoq. Telefonda pastda doimiy bitta konversiya
   nuqtasi turadi. */
.panel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-panel);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--b-2);
  padding: var(--b-2) var(--b-3);
  padding-bottom: calc(var(--b-2) + env(safe-area-inset-bottom));
  background: rgb(251 250 248 / .94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--chiziq);
}
.panel__tel { padding-inline: var(--b-3); background: var(--fon-karta); }
@media (min-width: 900px) { .panel { display: none; } }
@media (max-width: 899px) { body { padding-bottom: 72px; } }

/* ---- Blog ----
 *
 * Bosh sahifa "spetsifikatsiya varag'i" bo'lsa, maqola - hujjat. Shuning
 * uchun bu yerda kartochka ham, parda ham yo'q: bitta tor o'qish ustuni,
 * yorug' fon va latun faqat ajratuvchi sifatida.
 *
 * O'qish ustuni 34rem dan keng qilinmadi: bir qatorda 65-75 belgi
 * qolishi kerak, undan uzun qator ko'zni charchatadi. */

.maqola__ustun, .blog__ustun { max-width: 40rem; margin-inline: auto; }
/* Tijorat sahifalari kengroq: ularda jadval bor, 40rem da uch ustunli
   jadval siqilib qoladi. */
.sahifa__ustun { max-width: 46rem; margin-inline: auto; }
.sahifa__bosh { padding-bottom: var(--b-5); border-bottom: 1px solid var(--chiziq); }
.sahifa__bosh h1 { font-size: clamp(30px, 5.6vw, 46px); }
.sahifa__bosh .yorliq { display: block; margin-bottom: var(--b-3); }
.sahifa__lid { margin-top: var(--b-4); font-size: var(--o-lg); color: var(--matn-2); }
.sahifa__faq { margin-top: var(--b-8); padding-bottom: var(--b-8); }

/* Nafas (breadcrumbs). Schema'da ham shu zanjir turadi - ular bir xil
   bo'lishi shart, aks holda Google ikkitasini ham e'tiborsiz qoldiradi. */
.nafas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-2);
  padding-block: var(--b-5) var(--b-4);
  font-family: var(--shrift-mono);
  font-size: var(--o-xs);
  color: var(--matn-3);
}
.nafas a { color: var(--matn-2); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .nafas a:hover { color: var(--brend); } }

.maqola__bosh { padding-bottom: var(--b-5); border-bottom: 1px solid var(--chiziq); }
.maqola__bosh h1 { font-size: clamp(28px, 5.4vw, 44px); }
.maqola__bosh .yorliq { display: block; margin-bottom: var(--b-3); }
.maqola__lid { margin-top: var(--b-4); font-size: var(--o-lg); color: var(--matn-2); }

/* Muallif va sana - E-E-A-T signali, shuning uchun ko'rinadigan joyda. */
.maqola__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-2);
  margin-top: var(--b-4);
  font-family: var(--shrift-mono);
  font-size: var(--o-xs);
  color: var(--matn-3);
}

/* Qisqacha javob. Sahifadagi eng muhim blok: generativ javoblar aynan
   shu qismdan iqtibos oladi, o'quvchi esa javobni izlab pastga tushmaydi. */
.qisqa {
  margin-top: var(--b-6);
  padding: var(--b-5);
  background: var(--brend-yuza);
  border-radius: var(--r-2);
}
.qisqa__nom {
  font-family: var(--shrift-mono);
  font-size: var(--o-2xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brend);
}
.qisqa__matn { margin-top: var(--b-3); font-size: var(--o-lg); line-height: var(--lh-3); }

/* Raqamlar matndan alohida: ular sahifaning tekshiriladigan qismi. */
.raqamlar {
  display: grid;
  gap: var(--b-3);
  margin-top: var(--b-5);
  padding-block: var(--b-5);
  border-block: 1px solid var(--chiziq);
}
@media (min-width: 600px) { .raqamlar { grid-template-columns: repeat(3, 1fr); gap: var(--b-4); } }
.raqam { display: flex; flex-direction: column; gap: var(--b-1); }
.raqam__q { font-family: var(--shrift-mono); font-size: var(--o-xl); color: var(--brend); }
.raqam__i { font-size: var(--o-sm); line-height: var(--lh-4); color: var(--matn-2); }

/* ---- Uzun matn tipografiyasi ----
   Blog maqolasi ham, tijorat sahifasi ham shu qoidalardan foydalanadi:
   ikkalasi ham o'qish uchun matn, farqi faqat atrofidagi bloklarda. */
.matn { margin-top: var(--b-6); }
.matn h2 {
  margin-top: var(--b-8);
  margin-bottom: var(--b-4);
  padding-top: var(--b-4);
  border-top: 2px solid var(--brend);
  font-size: clamp(22px, 3.4vw, 30px);
}
.matn h3 { margin-top: var(--b-6); margin-bottom: var(--b-3); font-size: var(--o-lg); }
.matn p { margin-top: var(--b-4); }
.matn ul, .matn ol { margin: var(--b-4) 0 0; padding-left: var(--b-5); }
.matn li { margin-top: var(--b-2); }
.matn strong { font-weight: 700; }
.matn a { color: var(--brend); text-decoration: underline; text-underline-offset: 3px; }
.jadval { margin-top: var(--b-5); overflow-x: auto; }
.matn table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: var(--o-sm); }
/* Narx qatori ikkiga bo'linmasin: "$2 600 — 3 400" ikki qatorga tushganda
   jadval raqamlar ro'yxati bo'lishdan to'xtaydi. */
.matn td:nth-child(3) { white-space: nowrap; }
.matn th, .matn td { padding: var(--b-3); border-bottom: 1px solid var(--chiziq); text-align: left; }
.matn th { font-family: var(--shrift-mono); font-size: var(--o-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--matn-2); }

/* ---- Savol-javob (blogda statik) ---- */
.maqola__faq { margin-top: var(--b-8); }
.fq { margin: var(--b-4) 0 0; }
.fq__s { margin-top: var(--b-5); font-weight: 700; }
.fq__j { margin: var(--b-2) 0 0; color: var(--matn-2); }

/* ---- Iqtibos ---- */
.iqtibos {
  margin: var(--b-8) 0 0;
  padding-left: var(--b-5);
  border-left: 2px solid var(--brend);
}
.iqtibos blockquote { margin: 0; font-size: var(--o-lg); line-height: var(--lh-3); }
.iqtibos figcaption {
  margin-top: var(--b-3);
  font-family: var(--shrift-mono);
  font-size: var(--o-xs);
  color: var(--matn-3);
}

/* ---- Manbalar ----
   Tashqi havola nufuz signali: maqola qayerdan olinganini ko'rsatadi. */
.manbalar { margin-top: var(--b-8); }
.manbalar__nom, .bogliq__nom { font-size: var(--o-xl); }
.manbalar__ro { margin: var(--b-4) 0 0; padding-left: var(--b-5); font-size: var(--o-sm); color: var(--matn-2); }
.manbalar__ro li { margin-top: var(--b-2); }
.manbalar__ro a { color: var(--brend); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Klaster havolalari ---- */
.bogliq { margin-top: var(--b-8); }
.bogliq__ro { display: grid; gap: var(--b-3); margin-top: var(--b-4); }
.bogliq__k {
  display: grid;
  gap: var(--b-1);
  padding: var(--b-4);
  background: var(--fon-karta);
  border: 1px solid var(--chiziq);
  border-radius: var(--r-2);
  transition: border-color var(--tez) var(--egri);
}
.bogliq__k[data-pillar] { border-color: var(--brend); }
@media (hover: hover) { .bogliq__k:hover { border-color: var(--brend); } }
.bogliq__yorliq {
  font-family: var(--shrift-mono);
  font-size: var(--o-2xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brend);
}
.bogliq__s { font-weight: 700; }
.bogliq__t { font-size: var(--o-sm); line-height: var(--lh-4); color: var(--matn-2); }

.maqola__ort {
  margin-top: var(--b-7);
  padding-bottom: var(--b-8);
  font-size: var(--o-sm);
}
.maqola__ort a { color: var(--brend); text-decoration: underline; text-underline-offset: 3px; }

/* Maqola oxiridagi CTA. Bosh sahifadagi forma bilan bir xil qadam:
   maqola o'qigan odam uchun keyingi harakat aniq bo'lishi kerak. */
.maqola__cta-ichki { display: grid; gap: var(--b-5); }
@media (min-width: 800px) {
  .maqola__cta-ichki { grid-template-columns: 1fr auto; align-items: center; gap: var(--b-7); }
}
.maqola__cta-ichki h2 { margin-block: var(--b-2) var(--b-3); }
.maqola__cta-tugmalar { display: flex; flex-wrap: wrap; gap: var(--b-3); }

/* ---- Komplekt sahifasi ---- */
.komplekt__narx {
  margin-top: var(--b-4);
  font-family: var(--shrift-mono);
  font-size: var(--o-2xl);
  color: var(--brend);
}
.komplekt__narx-izoh { margin-top: var(--b-1); font-size: var(--o-xs); color: var(--matn-3); }

/* Ikkinchi qisqa blok - birinchisidan ajralib turishi kerak, aks holda
   ikkita bir xil sariq quti ketma-ket kelib, ko'z ularni bitta deb o'qiydi. */
.qisqa--oq {
  margin-top: var(--b-3);
  background: var(--fon-karta);
  border: 1px solid var(--chiziq);
}
.qisqa--oq .qisqa__nom { color: var(--matn-3); }

/* ---- Xarita ----
   Yandex vidjeti o'z o'lchamini bermaydi, shuning uchun nisbat shu yerda
   qat'iylashtiriladi - aks holda u yig'ilgunga qadar sahifa sakraydi. */
.xarita {
  margin-top: var(--b-5);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--chiziq);
  border-radius: var(--r-2);
}
.xarita iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- Topilmadi sahifasi ---- */
.xato .yorliq { display:block; font-size: var(--o-xl); margin-bottom: var(--b-3); }
.xato h1 { font-size: clamp(28px, 5vw, 42px); }
.xato .sahifa__lid { margin-top: var(--b-4); }
.xato__ro { margin-top: var(--b-7); }
@media (min-width: 640px) { .xato__ro { grid-template-columns: 1fr 1fr; } }

/* ---- Blog ro'yxati ---- */
.blog__bosh { margin-bottom: var(--b-7); }
.blog__bosh h1 { margin-block: var(--b-3); font-size: clamp(30px, 5.6vw, 46px); }
.blog__ro { display: grid; gap: var(--b-4); }
.blog__k {
  padding-bottom: var(--b-5);
  border-bottom: 1px solid var(--chiziq);
}
.blog__k:last-child { border-bottom: 0; }
.blog__yorliq {
  margin-bottom: var(--b-2);
  font-family: var(--shrift-mono);
  font-size: var(--o-2xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brend);
}
.blog__s { font-size: var(--o-xl); }
@media (hover: hover) { .blog__s a:hover { color: var(--brend); } }
.blog__t { margin-top: var(--b-3); color: var(--matn-2); }
.blog__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-2);
  margin-top: var(--b-3);
  font-family: var(--shrift-mono);
  font-size: var(--o-xs);
  color: var(--matn-3);
}

.sahifalash {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--b-3);
  margin-top: var(--b-7);
}
.sahifalash__holat { font-family: var(--shrift-mono); font-size: var(--o-xs); color: var(--matn-3); }


/* ============================================================
   7. UTILITALAR (max 8 ta — undan ortiq bo'lsa u komponent bo'lishi kerak)
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.faqat-desktop { display: none; }
@media (min-width: 900px) {
  .faqat-desktop { display: revert; }
  .faqat-mobil { display: none; }
}

/* ---- Katalog (bosh sahifa) va kichik katalog (ichki sahifalar) ---- */
.haqida__matn { margin-top: 0; }
.haqida__matn p { color: var(--matn-2); }
.katalog-mini { margin-top: var(--b-8); }
.katalog-mini__ro { display: flex; flex-wrap: wrap; gap: var(--b-2); margin-top: var(--b-4); }
.katalog-mini__ro a {
  padding: var(--b-2) var(--b-3); border: 1px solid var(--chiziq); border-radius: var(--r-1);
  font-size: var(--o-sm); color: var(--matn); text-decoration: none;
}
.katalog-mini__ro a[aria-current="page"] { border-color: var(--brend); color: var(--brend); }
@media (hover: hover) { .katalog-mini__ro a:hover { border-color: var(--brend); } }
/* Navigatsiya - yumaloq tugmalar (referens maket). Telefonda joy yo'q,
   u yerda futer va pastki panel yetadi. */
.shapka__nav { display: none; }
@media (min-width: 980px) {
  .shapka__nav { display: flex; gap: var(--b-2); }
  .shapka__nav a {
    padding: 9px 18px;
    border: 1px solid rgb(21 52 40 / .20);
    border-radius: var(--r-full);
    font-size: var(--o-sm);
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--tez) var(--egri), border-color var(--tez) var(--egri);
  }
  .shapka__nav a[aria-current="page"] { border-color: var(--tund-yashil); }
}
@media (hover: hover) { .shapka__nav a:hover { background: rgb(255 255 255 / .45); border-color: rgb(21 52 40 / .38); } }