/* ============================================================================
   Stomato — sotuv sayti
   nekohealth.com dan O'LCHAB olingan dizayn tizimi (docs/NEKO_TAHLIL.md)
   Maqsad: 1:1 kompozitsiya. Brendga moslash — keyingi qadam.
   ========================================================================= */

/* --- 1. XOM PALITRA (oklch L C H uchligi, funksiyasiz) ------------------ */
:root {
  --c-black:       .28807 .00922 219.81;
  --c-white:       1 0 0;
  --c-grey-50:     .96488 .0032  197.08;
  --c-grey-100:    .94184 .00657 208.75;
  --c-grey-300:    .86538 .02078 224.34;
  --c-grey-400:    .78824 .03067 219.27;
  --c-grey-500:    .68375 .04309 211.99;
  --c-grey-700:    .49878 .03862 212.75;
  --c-grey-900:    .4028  .02354 212.76;
  --c-blue-100:    .9479  .02216 214.41;
  --c-blue-300:    .82682 .08213 216.78;
  --c-blue-500:    .64883 .12469 226.65;
  --c-blue-600:    .59583 .11804 229.48;
  --c-blue-700:    .52727 .11059 234.52;
  --c-blue-900:    .37325 .07017 224.12;
  --c-blue-1000:   .22762 .04299 227.71;
  --c-soft-yellow: .95787 .11575 103.06;

  /* --- Stomato brendi (keyingi bosqichda almashtiriladi) ---
     --c-brand-deep: .2119 .0910 292.5;   #1b1442
     --c-brand:      .3448 .1215 291.4;   #3a2f7a
     --c-mint:       .8339 .1367 168.2;   #3fe0b0   */

  /* --- 2. SEMANTIK ROLLAR ---------------------------------------------- */
  --background:          oklch(var(--c-white));
  --background-raised:   oklch(var(--c-grey-50));
  --foreground:          oklch(var(--c-black));
  --muted-foreground:    oklch(var(--c-grey-700));
  --border:              oklch(var(--c-grey-100));
  --brand:               oklch(var(--c-blue-500));
  --brand-hover:         oklch(var(--c-blue-600));
  --brand-surface:       oklch(var(--c-blue-100));
  --brand-subtle:        oklch(var(--c-blue-300));
  --brand-foreground:    oklch(var(--c-white));
  --inverted:            oklch(var(--c-black));
  --inverted-hover:      oklch(var(--c-grey-900));
  --inverted-foreground: oklch(var(--c-white));
  --soft-yellow:         oklch(var(--c-soft-yellow));

  /* --- 3. TIPOGRAFIKA --------------------------------------------------- */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --fw-normal: 400;
  --fw-medium: 500;

  /* --- 4. RADIUS (1.4x qadam, Tailwind standarti emas) ------------------ */
  --radius-xs:  13px;
  --radius-s:   20px;
  --radius-m:   29px;
  --radius-l:   46px;
  --radius-xl:  64px;

  /* --- 5. TIZIM --------------------------------------------------------- */
  --header-h:      104px;
  --header-h-mob:   56px;
  --xpad:           40px;
  --xpad-mob:       20px;
  --gap-section:   200px;
  --gap-section-m: 100px;
  --control-h:      60px;      /* o'lchangan: birlamchi tugma 60px */
  --col-center:   1000px;      /* o'lchangan: markazlashgan ustun */
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --dur: .15s;
}

.theme-yellow { --background: var(--soft-yellow); }

/* ⭐ Sariq blokka YUMSHOQ o'tish — Neko'dan aynan ko'chirilgan.
   Fon rangi sariq, ustidan esa oq→shaffof gradient tortiladi:
   `to top` → oxirgi to'xtash NUQTASI YUQORIDA. Ya'ni blok yuqorida sof oq
   bo'lib boshlanadi va pastga tushgan sari sariq ko'rinadi.
   Shu sababli hero (oq) bilan sariq blok orasida chegara SEZILMAYDI —
   oradagi bo'sh oq seksiya ham kerak emas.

   Neko: linear-gradient(to top, oklch(from var(--background) l c h / 0), var(--background))
   Bizda `oklch(from ...)` (nisbiy rang sintaksisi) o'rniga to'g'ridan-to'g'ri
   qiymat — eski brauzerlarda ham ishlashi uchun.

   ⚠️ Bu blokka `.theme-yellow` QO'YILMAYDI: aks holda `--background` sariqqa
   aylanib, gradient sariqdan sariqqa bo'lardi va o'tish yo'qolardi. Ichidagi
   oq kartalar ham (`.panel`, `.rowcard`) `--background` dan rang oladi. */
/* Sariq hudud otasi — pastdagi ikki seksiya orasidagi kasr-piksel tirqishni
   yopadi (usiz 1px oq chiziq ko'rinardi). Sticky ishlashi uchun bu yerda
   `overflow` ham, `transform` ham QO'YILMAYDI. */
.yellow-zone { background-color: var(--soft-yellow); }

/* Sariq zonadan CHIQISH — `.yellow-fade` ning teskarisi.
   Sariq fon ustidan PASTGA qarab oq paydo bo'ladi, shuning uchun sahna
   tugagach oq bo'limga chegarasiz o'tiladi.
   Neko: `linear-gradient(oklch(1 0 0 / 0), oklch(1 0 0))`, balandligi 200px. */
.yellow-out {
  height: var(--gap-section-m);
  background-color: var(--soft-yellow);
  background-image: linear-gradient(
    to bottom,
    oklch(var(--c-white) / 0),
    oklch(var(--c-white))
  );
}

.yellow-fade {
  position: relative;
  overflow: hidden;
  background-color: var(--soft-yellow);
  background-image: linear-gradient(
    to top,
    oklch(var(--c-white) / 0),
    oklch(var(--c-white))
  );
  padding-block: var(--gap-section-m);
}
/* Kontent dekorativ nuqta-naqshdan USTIDA qolishi uchun — pastga qarang. */
.yellow-fade > .xpad { position: relative; z-index: 1; }

/* Dekorativ nuqta-naqsh (Neko: qatorlar ro'yxati bilan panel orasidagi
   bo'sh sariq maydonda ko'ringan "to'lqin" grafikasi) — faqat bezak,
   kontentga aloqasi yo'q. Haqiqiy fayl: `media/img/halftone-pattern.svg`
   (generatsiya qilingan — zichlik "bulut" formulasi bilan hisoblangan
   nuqtalar; ichida Stomato logotipi ham xuddi shu nuqta uslubida
   "yashiringan", atrofida yengil tarqoq nuqta halqasi bilan). Rangi
   qattiq qora (#111) — shaffoflik shu yerda, CSS `opacity` bilan
   yumshatiladi. Markazlangan ustun (`--col-center`) yon-atrofidagi
   bo'sh sariq joyga chapdan "sizib chiqadi" (`left` manfiy). */
/* ⚠️ Logotip SVG ichida chapdan ~150/700 nisbatda joylashgan — `left`
   juda manfiy bo'lsa, u ekran chetidan tashqariga chiqib ko'rinmay
   qolardi (o'lchab tekshirilgan). Shuning uchun endi kam bleed. */
.yellow-fade::before {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
  /* O'lchab qo'yilgan: tepasi "Ombor" qatori balandligida boshlanadi,
     pasti "Tariflarni ko'rish" tugmasi atrofida siyraklashib tugaydi
     (`top` shu qadar piksel — `.yellow-fade` boshidan hisoblanadi). */
  left: -90px; top: 908px;
  width: 950px; height: 1357px;        /* asl SVG nisbati: 700 / 1000 */
  background-image: url('media/img/halftone-pattern.svg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: .42;
}
@media (max-width: 979.98px) {
  /* Torroq ekranda markazlangan ustun atrofida bo'sh joy qolmaydi —
     naqsh kontent ustiga chiqib qolmasligi uchun o'chiriladi. */
  .yellow-fade::before { display: none; }
}

/* --- RESET -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 18px; line-height: 24px; letter-spacing: -.1px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100;
        background: var(--inverted); color: var(--inverted-foreground);
        padding: 12px 24px; border-radius: var(--radius-m); }
.skip:focus { left: 16px; top: 16px; }

/* Vizual jihatdan yashirilgan, lekin skrin-riderga o'qiladigan matn —
   SEO/a11y uchun sahifada bitta <h1> saqlanadi (hero video ustida
   ko'rinadigan sarlavha bo'lmasa ham). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --- TIPOGRAFIKA (mobil qiymatlar; desktop pastda) ---------------------- */
.h1, .h2, .h3-lg, .h3 {
  font-family: var(--font-display); font-weight: var(--fw-normal);
  letter-spacing: 0; margin: 0; text-wrap: balance;
}
.h1    { font-size: 54px; line-height: 54px; }
.h2    { font-size: 40px; line-height: 44px; }
.h3-lg { font-size: 32px; line-height: 36px; }
.h3    { font-size: 28px; line-height: 32px; }

.body-lg { font-size: 18px; line-height: 24px; letter-spacing: -.1px; }
.quote   { font-size: 20px; line-height: 28px; letter-spacing: -.1px; }

/* Eyebrow — CAPS, musbat letter-spacing, TO'Q rang (muted emas) */
.eyebrow {
  font-size: 16px; line-height: 20px; letter-spacing: .6px;
  font-weight: var(--fw-medium); text-transform: uppercase; margin: 0;
}
.muted { color: var(--muted-foreground); }

/* --- LAYOUT ------------------------------------------------------------- */
.xpad { margin-inline: var(--xpad-mob); max-width: none; }

/* Markazlashgan ustun — o'lchangan: 1000px, matn markazda */
.center {
  max-width: var(--col-center);
  margin-inline: auto;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.center .measure { max-width: 620px; }

.gap    { height: var(--gap-section-m); }
section { position: relative; }

/* Seksiya ICHIDAGI bo'shliqlar (Neko'da jonli o'lchangan, 2026-09-07 —
   avval hammasi bitta qiymat bilan, DESKTOP/mobil farqisiz yozilgan edi,
   bu NOTO'G'RI ekan). `.gap`/`--gap-section-m`dan ALOHIDA — bular
   seksiyalar ORASIDAGI 100/200px emas, bitta `.center` blok ICHIDA
   eyebrow→sarlavha→matn→kontent orasidagi bo'shliqlar. */
.gap-eyebrow { height: 40px; }   /* eyebrow → h2 */
.gap-heading { height: 24px; }   /* h2 → paragraph */
.gap-block   { height: 40px; }   /* paragraph → kontent (rowcards/cards),
                                     xuddi shu qiymat rowcards → panel
                                     orasida ham ishlatiladi */

/* --- TUGMALAR (o'lchangan: h 60, radius 29, padding 8/16/8/24) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: var(--control-h);
  padding: 8px 16px 8px 24px;
  border-radius: var(--radius-m);
  font-size: 18px; font-weight: var(--fw-medium); letter-spacing: -.1px;
  transition: background-color var(--dur) var(--ease-out);
}
.btn-brand   { background: var(--brand);    color: var(--brand-foreground); }
.btn-brand:hover { background: var(--brand-hover); }
.btn-dark    { background: var(--inverted); color: var(--inverted-foreground); }
.btn-dark:hover  { background: var(--inverted-hover); }
.btn .arw { transition: transform .3s var(--ease-out); }
.btn:hover .arw { transform: translateX(4px); }

/* Ikkilamchi CTA: 60px dumaloq tugma + yonida yozuv (Neko: "Learn more") */
.circle-cta { display: inline-flex; align-items: center; gap: 16px; font-size: 16px; }
.circle-cta i {
  width: 60px; height: 60px; flex: none;
  border-radius: var(--radius-m);
  background: var(--inverted); color: var(--inverted-foreground);
  display: grid; place-items: center;
  transition: background-color var(--dur) var(--ease-out);
}
.circle-cta:hover i { background: var(--inverted-hover); }

/* --- NAVBAR ------------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 50; height: var(--header-h-mob);
       background: transparent; backdrop-filter: none; }
.nav-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

/* Logo — to'q yumaloq kvadrat + oq belgi (Neko'dagidek) */
.logo { display: flex; align-items: center; gap: 12px; }
/* ⚠️ `background` YO'Q — logotip SVG'sining O'ZIDA fon bor (squircle shakl +
   binafsha radial gradient). Fon qo'yilsa ikki qavat bo'lib, SVG'ning yumaloq
   burchaklari ostidan to'q kvadrat chiqib turardi. */
.logo-mark {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
}
.logo-mark img { width: 100%; height: 100%; display: block; }
.logo-name { font-size: 18px; font-weight: var(--fw-medium); }

/* O'LCHANGAN: 16px/24px, letter-spacing normal, weight 400, CAPS EMAS */
.nav-links { display: none; gap: 40px; }
.nav-links a {
  font-size: 16px; line-height: 24px; letter-spacing: normal;
  font-weight: var(--fw-normal); color: var(--foreground);
  transition: opacity var(--dur) var(--ease-out);
}
.nav-links a:hover { opacity: .6; }
/* `display` ni 980px breakpoint yoqadi (pastda `.nav-links, .nav-cta`).
   `gap` shu yerda: "Kirish" havolasi va tugma orasidagi masofa breakpointga
   bog'liq emas. */
.nav-cta { display: none; align-items: center; gap: 24px; }

/* "Kirish" — menyu havolalari bilan BIR XIL uslubda (16/24, weight 400):
   u navigatsiya, CTA emas. Ikkita to'q tugma yonma-yon tursa, ikkalasi ham
   e'tiborni tortmaydi — asosiy harakat "14 kun bepul" bo'lib qolishi kerak. */
.nav-signin {
  font-size: 16px; line-height: 24px; letter-spacing: normal;
  font-weight: var(--fw-normal); color: var(--foreground);
  white-space: nowrap;
  transition: opacity var(--dur) var(--ease-out);
}
.nav-signin:hover { opacity: .6; }

/* --- MOBIL HAMBURGER + TO'LIQ EKRANLI MENYU (Neko: "Open menu") --------- */
.nav-burger {
  width: 44px; height: 44px; flex: none; margin-left: auto;
  display: grid; place-items: center;
  border-radius: var(--radius-xs);
  transition: background-color var(--dur) var(--ease-out);
}
.nav-burger:hover { background: var(--background-raised); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--background-raised);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s;
}
.mobile-menu.open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s;
}
.mm-in { flex: 1; overflow-y: auto; padding-top: 24px; padding-bottom: 40px; }
.mm-head { display: flex; align-items: center; justify-content: space-between; }
.mm-close {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--radius-xs);
  transition: background-color var(--dur) var(--ease-out);
}
.mm-close:hover { background: oklch(var(--c-black) / .06); }
.mm-title {
  font-family: var(--font-display); font-weight: var(--fw-normal);
  font-size: 32px; line-height: 36px; margin: 32px 0 28px;
}
.mm-list { display: flex; flex-direction: column; gap: 8px; }
.mm-item {
  display: flex; align-items: center; gap: 16px;
  background: var(--background); border-radius: var(--radius-m);
  padding: 8px 20px 8px 8px;
  transition: background-color var(--dur) var(--ease-out);
}
.mm-item:hover { background: var(--background); filter: brightness(.98); }
.mm-thumb { width: 56px; height: 56px; flex: none; border-radius: var(--radius-xs); overflow: hidden; }
.mm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mm-label { flex: 1; font-size: 18px; font-weight: var(--fw-medium); }
.mm-bar {
  padding: 16px var(--xpad-mob) calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--background); border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.mm-bar .bb-t { font-size: 14px; }
.mm-bar .bb-p { font-weight: var(--fw-medium); }

@media (min-width: 980px) {
  .nav-burger, .mobile-menu { display: none; }
}

/* ============================================================================
   HERO — Neko'dan O'LCHAB olingan scroll kinosi
   ---------------------------------------------------------------------------
   Yo'lak      : 175lvh  (pin masofasi = 75lvh)
   Pin         : sticky top:0, balandligi 100lvh
   Oyna        : inset va radius `--hero-p` (0→1) bo'yicha CHIZIQLI o'sadi
                   top/bottom : 24px × p
                   left/right : 40px × p      (= xpad)
                   radius     : 106px × p     (= --radius-3xl)
   Nav havola  : p = 0 → 0.124 oralig'ida so'nadi
   Sarlavha    : hero'da YO'Q (Neko'da ham yashirin) — H1 keyingi blokda
   ========================================================================= */
.hero-runway {
  position: relative;
  /* nav ustidan o'tsin: hero y=0 dan boshlanadi, menyu suzib turadi */
  margin-top: calc(-1 * var(--header-h-mob));
}
.hero-pin {
  position: relative;
  height: 100lvh;
  overflow: hidden;
}

/* Kichrayadigan oyna — video/sahna shu oynadan ko'rinadi.
   Kichrayish `scale` bilan EMAS, inset bilan: kontent cho'zilmaydi, kesiladi. */
.hero-window {
  position: absolute;
  top:    calc(24px  * var(--hero-p, 0));
  bottom: calc(24px  * var(--hero-p, 0));
  left:   calc(var(--xpad-mob) * var(--hero-p, 0));
  right:  calc(var(--xpad-mob) * var(--hero-p, 0));
  border-radius: calc(106px * var(--hero-p, 0));
  overflow: hidden;
  background: var(--background);
  will-change: top, right, bottom, left, border-radius;
}

/* Ustki qatlam: H1 + CTA.
   Neko tuzilishi: `flex-col` ota; H1 bloki `flex: 1` bilan qolgan bo'shliqni
   egallab o'zini markazlashtiradi, CTA esa pastda qoladi.
   ⚠️ Balandlik `.hero-pin` bilan BIR XIL birlikda bo'lishi shart —
   aralashtirilsa mobil brauzerda manzil paneli yig'ilganda CTA suzib yuradi. */
.hero-ui {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  pointer-events: none;
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--foreground);
}

/* H1 bloki — hero ichida vertikal markazda.
   Neko: `flex min-h-0 flex-1 items-center justify-center md:pt-[100px]` */
.hero-title-wrap {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  /* Kirish animatsiyasi — o'lchangan: scale(.96) + opacity 0 dan */
  opacity: 0; transform: scale(.96);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.hero-ui.ready .hero-title-wrap { opacity: 1; transform: none; }

/* Neko: H1 to'liq konteyner kengligida (o'lchangan w=1296), matn markazda,
   2 qator. `balance` qatorlarni teng uzunlikda taqsimlaydi. */
.hero-h1 { text-align: center; max-width: 22ch; text-wrap: balance; }

.hero-cta-wrap {
  display: flex; justify-content: center;
  padding-bottom: 48px;
}
.hero-cta-wrap > * { pointer-events: auto; }

/* Hero video — haqiqiy admin panel ekran yozuvi to'ldiradi. */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- KARTA QATORLARI (Neko: IMAGING / BLOOD ASSESSMENT …) -------------- */
/* O'lchangan (Neko, 390px): qator balandligi 86px = thumb 78 + padding 4/4,
   qatorlar orasi 12px, thumb↔matn 16px. Desktopda (1440px): thumb 100px,
   qator balandligi 108px, thumb↔matn 24px, qatorlar orasi hamon 12px
   (o'zgarmaydi) — pastdagi `@media(min-width:980px)` shunga mos. */
.rowcards { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 700px; }
.rowcard {
  display: flex; align-items: center; gap: 16px;
  background: var(--background); border-radius: var(--radius-s);
  padding: 4px 24px 4px 4px; text-align: left;
}
/* Haqiqiy admin panel skrinshoti — mavhum ikonka emas ("sayt mahsulotni
   ko'rsatishi kerak" qoidasi, docs/SOTUV_SAYT_REJA.md §1). Nozik chegara +
   soya — kichik ekranda ham "haqiqiy dastur oynasi" his qilinsin. */
.rowcard-thumb {
  width: 78px; height: 78px; flex: none;
  border-radius: var(--radius-xs); overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px oklch(var(--c-black) / 0.06);
  background: var(--background);
}
.rowcard-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.rowcard > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rowcard-k { display: block; font-size: 16px; line-height: 20px; letter-spacing: .6px;
             text-transform: uppercase; font-weight: var(--fw-medium); }
.rowcard-v { display: block; font-size: 16px; line-height: 24px; color: var(--muted-foreground); }

/* --- OQ KARTA sariq ustida (Neko: "Everything covered…") --------------- */
/* O'lchangan (Neko): max-width 600, radius 29 (= --radius-m), padding 0,
   overflow hidden — rasm panel chetigacha boradi. */
.panel {
  background: var(--background);
  border-radius: var(--radius-m);
  padding: 0;
  overflow: hidden;
  max-width: 700px; width: 100%;   /* .rowcards bilan bir xil kenglik */
  text-align: left;
  display: flex; flex-direction: column;
}

/* Panel tepasidagi rasm — 16:9 (o'lchangan 600×338), to'liq to'ldiradi.
   ⚠️ `.panel` faqat TEPA burchaklarni yumaloqlaydi (u yerda kartaning o'zi
   ham yumaloq) — pastki chekka esa `.panel-body`ga tekis ulanadi. Rasmning
   PASTKI burchaklari ham yumaloq bo'lishi uchun shu klassning o'ziga
   alohida `border-radius` beriladi (parent clipiga bog'liq emas). */
.panel-media {
  position: relative;
  aspect-ratio: 600 / 338;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--brand-surface);
}
.panel-media > svg,
.panel-media > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.panel-body {
  padding: 40px;
  display: flex; flex-direction: column; gap: 24px;
}
.checks { display: flex; flex-direction: column; gap: 20px; }
.check { display: flex; gap: 20px; align-items: flex-start; font-size: 16px; line-height: 24px; }
.check::before {
  content: ""; width: 14px; height: 14px; flex: none; margin-top: 5px;
  border-radius: 4px; background: var(--inverted);
}

/* ============================================================================
   ⭐ STICKY SAHNA — Neko mexanikasi (o'lchangan, §5c)
   Media chapda 4 qatlam USTMA-UST; har biri pastdan yuqoriga SIRG'ALADI
   (translateY 100% → 0) va oldingisini yopadi.
   Matn o'ngda; boblar `display` bilan almashadi.
   ========================================================================= */
.scene-runway { position: relative; }
/* Sahna KIRISHI — hero'ning TESKARISI (o'lchangan: neko-entry kadrlari).
   Sahna ekranga chetdan 32px ichkarida va yumaloq burchak bilan kiradi,
   so'ng kengayib chetga yetadi va burchaklar to'g'rilanadi.
     --scene-enter = 0 → margin 32px, radius 46px  (kirish boshi)
     --scene-enter = 1 → margin 0,    radius 0     (to'liq ochilgan) */
.scene {
  position: relative; width: auto; overflow: hidden;
  /* ⚠️ OQ, `--background` EMAS: sahna `.theme-yellow` ichida turadi va
     `--background` o'sha yerda sariqqa aylangan. Neko'da ham sahna sariq
     fonda OQ KARTA bo'lib kirib keladi. */
  background: oklch(var(--c-white));
  margin-inline:  calc(32px * (1 - var(--scene-enter, 1)));
  border-radius:  calc(46px * (1 - var(--scene-enter, 1)));
  will-change: margin, border-radius;
}
.scene-grid { position: relative; }

/* --- MEDIA qatlamlari --------------------------------------------------- */
.scene-media {
  position: relative; overflow: hidden;
  aspect-ratio: 4/3;
  border-radius: var(--radius-s);
  background: oklch(var(--c-grey-100));
}

.media-layer {
  position: absolute; inset: 0;
  overflow: hidden;
  background: linear-gradient(155deg, var(--brand-surface), oklch(var(--c-grey-50)));
  /* JS `--slide` beradi: 0 = butunlay pastda, 1 = joyida */
  transform: translateY(calc((1 - var(--slide, 1)) * 100%));
  will-change: transform;
}
.media-layer[data-layer="0"] { transform: none; }   /* birinchisi doim joyida */

.media-shift {
  position: absolute; inset: 0;
  display: grid; place-items: center; padding: 32px;
  will-change: transform;
}

/* --- Sahna fotosi ------------------------------------------------------
   «Bir kun» sahnasining 4 qatlami endi CSS-skelet emas, HAQIQIY mockup
   fotosi. Foto panelni CHETDAN CHETGA to'ldiradi (Neko'da ham shunday),
   shuning uchun `.media-shift` ning 32px padding'i foto qatlamida
   bekor qilinadi — aks holda atrofida oq hoshiya qolardi. */
.media-layer.is-photo .media-shift { padding: 0; }

/* ⚠️ `inset: -12px` — PARALLAKS ZAXIRASI, bezak emas.
   `app.js` faol qatlamning `.media-shift`iga `translateY(8px -> -8px)`
   beradi. Avval bu ko'rinmasdi, chunki `.media-shift`da 32px padding bor
   edi va mock ichkarida turardi. Foto esa qatlamni AYNAN to'ldiradi —
   8px siljiganda chetda ostidagi och gradient ochilib, ikki rasm
   almashayotganda OQ CHIZIQ bo'lib ko'rinardi. 12px zaxira (8px siljishdan
   ko'proq) buni yopadi; ortiqchasini `.media-layer{overflow:hidden}` kesadi. */
.scene-photo { position: absolute; inset: -12px; display: block; }
.scene-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* --- MATN ustuni -------------------------------------------------------- */
.scene-body { padding: 0; color: var(--foreground); }

/* Tablar — ODDIY MATN. Nofaol: rang alpha .5 (Neko'da aynan shunday).
   Har bob o'zining tab qatorini ko'taradi (HTML'da `.chapter` ICHIDA
   takrorlanadi) — bob almashganda tab qatori joyidan SILJIMAYDI, chunki
   4 nusxa ham xuddi shu joyga chizilgan (faqat rang/faollik farq qiladi). */
.scene-tabs { display: none; gap: 32px; margin-bottom: 32px; }
.scene-tab {
  font-size: 16px; line-height: 20px; letter-spacing: .6px;
  text-transform: uppercase; font-weight: var(--fw-medium);
  color: oklch(var(--c-black) / .5);
  padding: 0;
  transition: color .35s var(--ease-out);
}
.scene-tab[aria-selected="true"] { color: oklch(var(--c-black)); }

/* Scroll progress chizig'i — faqat mobil sikky sahnada ko'rinadi
   (pastdagi `@media(max-width:979.98px)` bloki yoqadi). */
.scene-progress { display: none; }

.chapter { display: flex; flex-direction: column; gap: 24px; }
.chapter + .chapter { margin-top: 64px; }

/* Bob almashganda kontent ikki xil ko'tarilish bilan kiradi: sarlavha —
   «Ascend» (har so'z alohida, `--wi` bilan kechikadi), matn+tugma — «Rise»
   (bitta blok). Mobil VA desktop sikky sahna ikkalasi ham shu ikkisini
   ishlatadi — shuning uchun global qamrovda, breakpoint ichida emas. */
@keyframes ascend {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes chapterRise {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   ⭐ MOBIL SIKKY SAHNA — Neko mobilda ham scroll-pin qiladi (o'lchangan,
   2026-09-07): alohida `pin-spacer-scanProductExplainer-mobile-steps`,
   balandligi 4810px, pin 844px → nisbat **5.7** — bizning `--sticky-runway`
   standart qiymatimiz bilan AYNAN mos, o'zgartirish shart emas.
   Desktopdan farqi faqat GEOMETRIYA: media YUQORIDA to'liq kenglikda
   (~4:3, 380px kenglikda ≈ 285px = aynan 75vw — Neko'da o'lchangan `top-
   [75vw]` shu bilan mos), tablar+matn PASTDA bitta panelda, bob almashuvi
   xuddi desktopdagidek crossfade (mexanizm bir xil, faqat joylashuv boshqa).
   ⚠️ Avval bu yerda mobilda sikky BUTUNLAY O'CHIRILGAN edi (`order` bilan
   media+matn juftlab oqizilardi) — bu eski taxmin (`docs/NEKO_TAHLIL.md`
   §5.5/§10) FAQAT desktopga mo'ljallangan sahna nusxasiga tegishli ekan;
   Neko mobil uchun BUTUNLAY ALOHIDA, o'z pin-spacer'iga ega nusxa
   ishlatadi. Reduced-motion fallback (order bilan oqish) pastda,
   kenglikdan qat'i nazar, harakat rad etilganda ishlaydi. */
@media (max-width: 979.98px) {
  @media (prefers-reduced-motion: no-preference) {
    .scene-runway { min-height: calc(var(--sticky-runway, 5.7) * 100svh); }
    .scene { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; }

    .scene-grid { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    /* Media to'liq kenglikda, YUQORISI radiussiz (ekran chetiga tutash),
       PASTKI ikki burchagi yumaloq — matn paneliga "karta" bo'lib tushadi
       (Neko'da jonli o'lchangan, 2026-09-07: desktopdan farqli — u yerda
       rasm yon tomonda, burchak muammosi umuman yo'q). */
    .scene-media { flex: none; width: 100%; border-radius: 0 0 var(--radius-s) var(--radius-s); }
    .scene-body  { flex: 1; min-height: 0; position: relative; }

    /* Tab qatori — Neko: teng bo'laklarga bo'lingan to'liq kenglik qator
       (desktopda chapga tekislangan, o'z eniga qarab, gap 32px — bu YERDA
       boshqacha, shuning uchun alohida qiymat). */
    .scene-tabs { display: flex; width: 100%; gap: 0; margin-bottom: 0; }
    .scene-tab  { flex: 1; text-align: center; }

    /* Scroll progressi — Neko: tablar ostida to'liq kenglikdagi 1px
       chiziq, to'ldirilgan qismi butun yo'lakning `p` (0→1) qiymatiga
       chiziqli mos (`role="progressbar"`, jonli o'lchangan: 10 nuqtada
       aria-valuenow aynan p×100 chiqdi — bosqichma-bosqich EMAS). `--
       scene-p`ni `app.js` `updateScene()` to'g'ridan-to'g'ri (damping'siz)
       yozadi. */
    .scene-progress {
      display: block; position: relative;
      height: 1px; width: 100%; margin: 12px 0 24px;
      border-radius: 999px; background: oklch(var(--c-black) / .2);
    }
    .scene-progress i {
      position: absolute; inset-block: 0; left: 0;
      width: calc(var(--scene-p, 0) * 100%);
      background: oklch(var(--c-black)); border-radius: 999px;
    }

    /* ⚠️ `.chapter`ning containing block'i — `.scene-body`ning PADDING
       BOX'i (`.scene-body` padding'i shart emas, chunki bu yerda 0).
       Chekka to'g'ridan-to'g'ri `.chapter`ning o'zida. */
    .chapter {
      position: absolute; inset-inline: var(--xpad-mob); top: 24px;
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity .5s var(--ease-out), visibility 0s linear .5s;
    }
    .chapter + .chapter { margin-top: 0; }
    .chapter[data-active="true"] {
      opacity: 1; visibility: visible; pointer-events: auto;
      transition: opacity .5s var(--ease-out), visibility 0s;
    }
    .chapter[data-active="true"] h2 .word {
      animation: ascend .7s var(--ease-out) both;
      animation-delay: calc(var(--wi, 0) * .1s);
    }
    .chapter[data-active="true"] p,
    .chapter[data-active="true"] .circle-cta {
      animation: chapterRise .75s var(--ease-out) both;
      animation-delay: .25s;
    }
  }
}

/* --- SO'ZMA-SO'Z SARLAVHA ---------------------------------------------- */
.word-mask { display: inline-block; overflow: hidden; vertical-align: bottom;
             padding-bottom: .1em; margin-bottom: -.1em; }
.word { display: inline-block; transform: translateY(110%);
        transition: transform .8s var(--ease-out); }
.reveal.in .word { transform: translateY(0); }

.rise { opacity: 0; transform: translateY(20px);
        transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.rise.in { opacity: 1; transform: none; }

/* --- 12 USTUNLI GRID (Neko: `grid-default`) -----------------------------
   O'lchangan: 12 ustun, gap 12px (= --spacing-grid-gutter), kengligi xpad.
   Kontent o'ng yarmida: `col-[7/-1]` → 7-ustundan oxirigacha (50.4%). */
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.grid12-right {
  grid-column: 1 / -1;                 /* mobil: to'liq kenglik */
  display: flex; flex-direction: column;
  gap: 40px;                            /* o'lchangan: sarlavha↔CTA */
  align-items: flex-start;
  text-align: left;
}

/* Sarlavha sticky navbar ostidan chiqmasin.
   Neko'da bu kerak emas — u yerda sarlavha 4 qator (320px) va navbar
   ostida ham ko'p qismi ko'rinadi. Bizniki 2 qator, shuning uchun
   navbar balandligicha (104px) + nafas bo'shlig'i qo'yamiz. */
.grid12 { padding-top: calc(var(--header-h-mob) + 24px); }

/* --- MOZAIKA (Neko: "Cutting-edge technology meets human care") ---------
   O'lchangan: 12 ustun, gap 12px, qatorlar 535px / 384px, align-items: end.
     katta   col 1/7   · 669×535 (nisbat 1.25)
     tik     col 7/10  · 328×535 (nisbat 0.61)
     kvadrat col 4/7   · 328×328 (kvadrat), 2-qator
     matn    col 10/13 · 2-qator
   Radius 46px (--radius-l), yorliq oq 16px CAPS, karta ichida yuqori-chapda. */
.mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Karta OCHILISHI (Neko: `.masked-image-reveal`) — o'lchangan:
   o'ng chekka `25%` dan `0` ga kamayadi, ya'ni rasm CHAPDAN O'NGGA ochiladi.
   `clip-path: inset()` ishlatiladi — u kontentni SIQMAYDI, faqat kesadi
   (kenglikni o'zgartirsak rasm cho'zilardi). `round` radiusni saqlaydi. */
.mo-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--background-raised);
  clip-path: inset(0 calc(25% * (1 - var(--reveal, 1))) 0 0 round var(--radius-l));
  will-change: clip-path;
}
.mo-card figcaption {
  position: absolute; top: 20px; left: 24px; z-index: 2;
  font-size: 16px; line-height: 20px; letter-spacing: .6px;
  font-weight: var(--fw-medium); text-transform: uppercase;
  color: oklch(var(--c-white));
  text-shadow: 0 1px 12px oklch(var(--c-black) / .45);
}
.mo-img { position: absolute; inset: 0; }
/* <img class="mo-img"> — haqiqiy foto. `.mo-card`da parallaks YO'Q
   (ochilish `clip-path` bilan, transform emas), shuning uchun sahna
   fotolaridagidek chetga zaxira kerak emas — inset:0 yetarli. */
img.mo-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mo-text {
  display: flex; flex-direction: column;
  gap: 24px;                            /* o'lchangan */
  align-items: flex-start;
  text-align: left;
}

/* Mobilda (Neko'dan o'lchangan, 390px'da tekshirilgan): kartalar 3 QATORGA
   bo'linadi — 1) mo-b + mo-c YONMA-YON (tik + qisqaroq, pastdan tekislangan),
   2) mo-a KATTA KVADRAT to'liq kenglikda, 3) matn. Bizning avvalgi variantimiz
   hammasini bitta ustunda DOM tartibida (katta→tik→kvadrat→matn) chizardi —
   Neko'da bunday emas, shu sabab `order` bilan qayta tartiblanadi. */
@media (max-width: 979.98px) {
  .mo-a { order: 2; grid-column: 1 / -1; aspect-ratio: 1; margin-bottom: 40px; }
  .mo-b { order: 1; aspect-ratio: 3 / 5; align-self: end; }
  .mo-c { order: 1; aspect-ratio: 3 / 4; align-self: end; }
  .mo-text { order: 3; grid-column: 1 / -1; padding-top: 16px; }
}

/* --- NARXLAR KARUSELI ---------------------------------------------------
   Geometriya Neko'ning "Where to find us" galereyasidan (docs/NEKO_TAHLIL.md
   §11a): shadcn/Embla Carousel — bizda kutubxonasiz, tabiiy `overflow-x:auto`
   + scroll-snap track. `loc-*` prefiksi shu sababdan saqlandi.
   Kontent esa endi hudud emas, TARIF: karta "rasmi" o'rnida narxning o'zi. */
.loc-heading { max-width: 16ch; }
.loc-sub     { max-width: 620px; }

.loc-carousel { position: relative; }
.loc-track {
  display: flex; gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px;
}
.loc-track::-webkit-scrollbar { display: none; }

/* Karta — o'lchangan nisbat 397:584 (≈0.68, tik). Mobilda 1 to'liq +
   keyingisi ozgina ko'rinadi — Neko: `basis-[85%]`, aynan shu qiymat. */
/* Kirish animatsiyasi — o'lchangan: `clip-path` 25%→0% (mo-card bilan bir
   xil formula), LEKIN scroll-pozitsiyaga EMAS, VAQTGA bog'liq (~1400ms,
   bir martalik) — JS `--loc-reveal`ni intersection payti tween qiladi.
   ⚠️ `clip-path` KARTANING O'ZIDA (mo-card'dagidek) — ichidagi rasmda
   (`.loc-mask`) bo'lsa, faqat rasm ochilib, ustidagi belgi/matn
   (`.loc-badge`/`.plan-body`) darhol ko'rinib qolardi. */
.loc-card {
  position: relative;
  flex: 0 0 85%;
  aspect-ratio: 397 / 584;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--background-raised);
  scroll-snap-align: start;
  clip-path: inset(0 calc(25% * (1 - var(--loc-reveal, 1))) 0 0 round var(--radius-m));
  will-change: clip-path;
}
.loc-mask { position: absolute; inset: 0; }
.loc-img { position: absolute; inset: 0; }
/* Gradient mock o'rniga haqiqiy rasm qo'yilganda: nisbat 397:584 (0.68),
   generatsiya o'lchami 1024x1536 (2:3) — farqi ~2%, `cover` o'zi kesadi. */
img.loc-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Karta foni — palitra mavjud tokenlardan (yangi rang qo'shilmagan).
   Tartib ataylab: yorug'dan qorong'iga (bepul sinov → Enterprise), Pro'da
   sariq radial "porlash" bor — u ommabop tarif sifatida ajralib tursin. */
.loc-img-1 { background: radial-gradient(120% 90% at 25% 20%, oklch(var(--c-blue-300) / .85), transparent 60%), linear-gradient(150deg, oklch(var(--c-blue-1000)), oklch(var(--c-blue-700))); }
.loc-img-2 { background: radial-gradient(110% 85% at 70% 15%, oklch(var(--c-soft-yellow) / .7), transparent 62%), linear-gradient(160deg, oklch(var(--c-grey-700)), oklch(var(--c-grey-900))); }
.loc-img-3 { background: radial-gradient(120% 90% at 30% 25%, oklch(var(--c-blue-100) / .9), transparent 58%), linear-gradient(145deg, oklch(var(--c-blue-500)), oklch(var(--c-blue-900))); }
.loc-img-4 { background: radial-gradient(115% 85% at 65% 20%, oklch(var(--c-blue-300) / .6), transparent 60%), linear-gradient(155deg, oklch(var(--c-grey-900)), oklch(var(--c-black))); }
.loc-img-5 { background: radial-gradient(120% 90% at 20% 30%, oklch(var(--c-soft-yellow) / .55), transparent 58%), linear-gradient(150deg, oklch(var(--c-blue-700)), oklch(var(--c-blue-1000))); }
.loc-img-6 { background: radial-gradient(115% 85% at 75% 25%, oklch(var(--c-blue-100) / .7), transparent 60%), linear-gradient(160deg, oklch(var(--c-blue-900)), oklch(var(--c-grey-900))); }

/* Scrim — matn o'qilishi uchun. Neko'da faqat PASTKI gradient bor edi
   (black/55% → 60%da shaffof), chunki u yerda kartaning pastida shahar nomi
   turardi. Bizda kartaning TEPASIDA ham matn bor (tarif nomi + katta summa),
   shuning uchun yuqoridan ham yengilroq scrim qo'shildi — aks holda
   `.loc-img-2`/`-3`dagi och radial dog' ustida oq matn o'qilmay qolardi. */
.loc-gradient {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top,    oklch(var(--c-black) / .62), oklch(var(--c-black) / .14) 46%, transparent 74%),
    linear-gradient(to bottom, oklch(var(--c-black) / .40), transparent 36%);
}
.loc-badge {
  position: absolute; left: 20px; top: 20px; z-index: 2;
  font-size: 14px; font-weight: var(--fw-medium);
  padding: 8px 14px; border-radius: 999px;
  background: oklch(var(--c-white) / .82); backdrop-filter: blur(8px);
  color: var(--foreground);
}
/* "Ommabop" yorlig'i — o'ng yuqorida, `.loc-badge` bilan bir balandlikda.
   Tipografikasi eski narx gridining `.plan-badge`sidan aynan ko'chirilgan
   (12px, ls .96px, CAPS, brend foni) — brend tili o'zgarmasin. */
.loc-tag {
  position: absolute; right: 20px; top: 20px; z-index: 2;
  font-size: 12px; letter-spacing: .96px; text-transform: uppercase;
  font-weight: var(--fw-medium);
  background: var(--brand); color: var(--brand-foreground);
  padding: 9px 14px; border-radius: 999px;
}

/* Karta tanasi — sehrli piksellarsiz: `justify-content` emas, oddiy flex
   ustun. Summa `flex: 1` olgani uchun tarkib ro'yxati bilan yorliq orasidagi
   BO'SH maydonda o'zi markazlashadi; ro'yxatdagi band soni o'zgarsa ham
   qayta hisoblash shart emas. Yuqoridagi 76px — `.loc-badge` egallagan joy. */
.plan-body {
  position: absolute; inset: 0; z-index: 2;
  padding: 20px; padding-top: 76px;
  display: flex; flex-direction: column; gap: 20px;
}
.plan-figure {
  flex: 1; margin: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
/* Summa — sahifaning display shrifti (h1/h2 bilan bir xil), ya'ni narx
   kartaning "rasmi" o'rnida turadigan yagona yirik element.
   ⚠️ Raqamlardagi bo'shliqlar HTML'da UZILMAS bo'shliq (U+00A0) — oddiy
   bo'shliq bo'lsa "1 500 000" tor kartada qatorga bo'linib ketardi. */
.plan-amount {
  font-family: var(--font-display);
  font-size: 44px; line-height: 1; letter-spacing: -.5px;
  color: oklch(var(--c-white));
}
.plan-unit { font-size: 14px; color: oklch(var(--c-white) / .72); }

/* Tarif tarkibi — marker `.check::before` bilan bir xil naql (yumaloq
   kvadrat), faqat qorong'i fon uchun oq va kichikroq. */
.plan-feats { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.plan-feats li {
  position: relative; padding-left: 20px;
  font-size: 15px; line-height: 20px; color: oklch(var(--c-white) / .88);
}
.plan-feats li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 8px; height: 8px; border-radius: 3px;
  background: oklch(var(--c-white) / .6);
}

/* Prev/Next + progress bar — o'lchangan: kartalar OSTIDA, markazda,
   max-width 300px, nuqta-indikator EMAS, nozik chiziq. */
.loc-nav { display: flex; align-items: center; gap: 10px; max-width: 280px; margin: 32px auto 0; }
.loc-arrow {
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--border); border-radius: var(--radius-s);
  display: grid; place-items: center;
  transition: background-color var(--dur) var(--ease-out);
}
.loc-arrow:hover { background: var(--background-raised); }
.loc-progress { position: relative; flex: 1; height: 2px; border-radius: 999px; background: var(--border); overflow: hidden; }
.loc-progress i { position: absolute; inset-block: 0; left: 0; width: 0%; background: var(--foreground); border-radius: 999px; }

/* --- BO'LIM YORLIG'I (Neko: "▪ PREVENTIVE CARE ————") --------------------
   16px kvadrat marker (radius 6px) + CAPS matn + to'ldiruvchi chiziq. */
.rule-label {
  display: flex; align-items: center; gap: 8px;
}
.rule-label i {
  width: 16px; height: 16px; flex: none;
  border-radius: 6px;
  background: var(--foreground);
}
.rule-label span {
  font-size: 16px; line-height: 20px; letter-spacing: .6px;
  font-weight: var(--fw-medium); text-transform: uppercase;
  white-space: nowrap;
}
.rule-label hr {
  flex: 1; border: 0; height: 1px;
  background: var(--foreground);
  margin: 0 0 0 8px;
}

/* --- KARTALAR ----------------------------------------------------------- */
/* ⚠️ Eski `.cards > .card.plan` narx gridi OLIB TASHLANDI (2026-09-08):
   narxlar endi karusel kartalarida (`.plan-body`, yuqoriga qarang), ikkita
   narx bo'limi ketma-ket turmasin. Bu klasslar boshqa hech qayerda
   ishlatilmagani tekshirildi. */

/* --- FOOTER — markazda -------------------------------------------------- */
.foot { padding-block: 0 40px;
        background: linear-gradient(180deg, var(--background), oklch(var(--c-blue-100) / .55)); }
.foot-cta { display: flex; flex-direction: column; align-items: center; gap: 32px;
            text-align: center; padding-block: 100px 120px; }
.foot-mark { display: flex; align-items: center; gap: 14px; padding-top: 40px; }
.foot-mark span { font-size: 16px; letter-spacing: .96px; text-transform: uppercase;
                  font-weight: var(--fw-medium); white-space: nowrap; }
.foot-mark i { width: 16px; height: 16px; border-radius: 4px; background: var(--inverted); flex: none; }
.foot-mark hr { flex: 1; border: 0; border-top: 1px solid var(--foreground); margin: 0; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; padding-top: 48px; }
.foot h3 { font-size: 16px; line-height: 20px; letter-spacing: .6px; text-transform: uppercase;
           font-weight: var(--fw-medium); margin: 0 0 16px; }
.foot li { margin-bottom: 10px; }
.foot li a { font-size: 16px; color: var(--muted-foreground); }
.foot li a:hover { color: var(--foreground); }
.foot-legal { padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--border);
              font-size: 14px; color: var(--muted-foreground);
              display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* --- MOBIL PASTKI PANEL ------------------------------------------------- */
.bottombar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 70;
  padding: 12px var(--xpad-mob) calc(12px + env(safe-area-inset-bottom, 0px));
  background: oklch(var(--c-white) / .9); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transform: translateY(110%); transition: transform .4s var(--ease-out);
}
.bottombar.show { transform: none; }
.bottombar .bb-t { font-size: 14px; }
.bottombar .bb-p { font-weight: var(--fw-medium); }
.bottombar .btn { min-height: 44px; padding: 6px 14px 6px 18px; font-size: 15px; }
body { padding-bottom: 80px; }

/* --- MOCK EKRAN --------------------------------------------------------- */
.mock { position: absolute; inset: 0; background: #fff; display: flex; flex-direction: column; }

/* Sahna ichida mock — Neko'da bu joyni RASM to'liq to'ldiradi
   (`object-fit: cover`), shuning uchun ramka ham chetdan chetga cho'ziladi. */
.media-shift .mock {
  position: relative; inset: auto;
  width: 100%; height: 100%;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -22px oklch(var(--c-black) / .24),
              0 8px 20px -12px oklch(var(--c-black) / .14);
}
.mock-main { justify-content: flex-start; }
.mock-grid, .mock-tile { flex: 0 0 auto; }
.mock-bar { height: 30px; flex: none; display: flex; align-items: center; gap: 6px;
            padding-inline: 12px; background: oklch(var(--c-grey-50)); border-bottom: 1px solid var(--border); }
.mock-dot { width: 7px; height: 7px; border-radius: 50%; background: oklch(var(--c-grey-300)); }
.mock-body { flex: 1; display: flex; min-height: 0; }
.mock-side { width: 20%; border-right: 1px solid var(--border); padding: 12px;
             display: flex; flex-direction: column; gap: 8px; background: oklch(var(--c-grey-50) / .6); }
.mock-main { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sk { border-radius: 5px; background: oklch(var(--c-grey-100)); height: 9px; }
.sk.t { background: oklch(var(--c-grey-300)); }
.sk.b { background: var(--brand-surface); }
.mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mock-tile { border: 1px solid var(--border); border-radius: 10px; padding: 10px;
             display: flex; flex-direction: column; gap: 8px; }
.mock-chart { flex: 1; max-height: 190px; border: 1px solid var(--border); border-radius: 10px;
              padding: 12px; display: flex; align-items: flex-end; gap: 6px; }
.mock-chart i { flex: 1; border-radius: 4px 4px 0 0; background: var(--brand-subtle); display: block; }
.mock-label { position: absolute; left: 20px; bottom: 20px; z-index: 2;
              font-size: 12px; letter-spacing: .96px; text-transform: uppercase;
              font-weight: var(--fw-medium);
              background: oklch(var(--c-black) / .74); color: #fff;
              padding: 7px 14px; border-radius: var(--radius-m); }

/* ============================================================================
   DESKTOP — yagona chegara 980px
   ========================================================================= */
@media (min-width: 980px) {
  :root { --xpad-mob: var(--xpad); }

  .h1    { font-size: 100px; line-height: 100px; }
  .h2    { font-size:  68px; line-height:  80px; }
  .h3-lg { font-size:  44px; line-height:  52px; }
  .h3    { font-size:  32px; line-height:  40px; }

  .gap    { height: var(--gap-section); }

  .nav { height: var(--header-h); }
  .nav-links, .nav-cta { display: flex; }

  .hero-runway { margin-top: calc(-1 * var(--header-h)); }
  .hero-cta-wrap { padding-bottom: 48px; }
  /* Neko: md:pt-[100px] — sarlavha navbar balandligicha pastga suriladi */
  .hero-title-wrap { padding-top: 100px; }

  .foot-cols { grid-template-columns: repeat(4, 1fr); }
  .panel-body { padding: 48px; }
  /* O'lchangan (Neko, 1440px): thumb 100px, thumb↔matn 24px — qatorlar
     orasi (12px) va padding (4/24/4/4) o'zgarmaydi. */
  .rowcard-thumb { width: 100px; height: 100px; }
  .rowcard { gap: 24px; }
  .gap-eyebrow { height: 32px; }
  .gap-heading { height: 32px; }
  .gap-block   { height: 60px; }
  /* Neko: `md:col-[7/-1]` — kontent 7-ustundan oxirigacha */
  .grid12-right { grid-column: 7 / -1; }
  .grid12 { padding-top: calc(var(--header-h) + 24px); }

  /* Mozaika — o'lchangan joylashuv */
  .mosaic {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 535px 384px;
    align-items: end;
  }
  .mo-a    { grid-column: 1 / 7;   grid-row: 1; height: 100%; }
  .mo-b    { grid-column: 7 / 10;  grid-row: 1; height: 100%; }
  /* `align-items:end` butun mozaikaga qo'llanadi (mo-text bilan tekis
     bo'lishi uchun), lekin bu kvadrat karta (328px) 2-qator balandligidan
     (384px) kichik bo'lgani uchun pastga surilib, tepasida qatorlar orasi
     (12px)dan ancha katta bo'sh joy qolardi. `align-self:start` shu
     kartani qatorga TEPADAN yopishtiradi — tepadagi ikkita karta orasidagi
     bilan bir xil 12px oraliq qoladi. */
  .mo-c    { grid-column: 4 / 7;   grid-row: 2; aspect-ratio: 1; align-self: start; }
  .mo-text { grid-column: 10 / 13; grid-row: 2; }
  .yellow-fade { padding-block: var(--gap-section); }
  .yellow-out  { height: var(--gap-section); }

  /* Yo'laklar — faqat desktop VA harakat ruxsat etilganda (Neko: md:motion-safe:) */
  @media (prefers-reduced-motion: no-preference) {
    .scene-runway { min-height: calc(var(--sticky-runway, 5.7) * 100svh); }
    .scene { position: sticky; top: 0; height: 100svh; }

    /* Hero: 175lvh yo'lak → 75lvh pin masofasi */
    .hero-runway { min-height: 175lvh; }
    .hero-pin { position: sticky; top: 0; }
  }

  /* Menyu havolalari: scroll ~2.5vh dan oshsa so'nadi va 16px yuqoriga siljiydi.
     O'lchangan: scrub EMAS — 300ms `cubic-bezier(.4,0,.2,1)` sinf almashuvi. */
  .nav-links {
    visibility: visible;
    transition: opacity .3s cubic-bezier(.4, 0, .2, 1),
                transform .3s cubic-bezier(.4, 0, .2, 1),
                visibility 0s;
  }
  /* ⚠️ `pointer-events: none` sichqonchani to'sadi, KLAVIATURANI EMAS —
     Tab bosgan odam ko'rinmas havolalarga tushib qolardi.
     `visibility: hidden` esa elementni tab tartibidan ham chiqaradi;
     kechiktirilgan transition so'nish animatsiyasini saqlab qoladi. */
  .nav-links[data-hidden="true"] {
    opacity: 0;
    transform: translateY(-16px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s cubic-bezier(.4, 0, .2, 1),
                transform .3s cubic-bezier(.4, 0, .2, 1),
                visibility 0s linear .3s;
  }

  /* --- Desktop sahna: boblar ustma-ust, faqat faoli ko'rinadi ---------
     Faol bo'lmagani `visibility: hidden` — shunda ekran o'quvchisi ham
     takroriy tablarni o'qimaydi. */
  .scene-tabs { display: flex; }

  /* Boblar ustma-ust; faqat faoli ko'rinadi.
     `.scene-body` markazlashtirgani uchun bob to'liq balandlikni egallamaydi —
     `inset: 0` o'rniga o'zini vertikal markazlaydi. */
  /* ⚠️ `position: absolute` ning containing block'i — ota elementning
     PADDING BOX'i, ya'ni `.scene-body` padding'i bobga QO'LLANMAYDI.
     Shuning uchun chekka bob'ning o'zida beriladi (Neko: media chetidan 126px). */
  /* ⚠️ Sarlavha uzunligiga qarab bob balandligi farq qiladi (masalan
     «To'lov» sarlavhasi 2 qatorga tushadi) — markazlash shu farqni
     tepaga chiqarib yuborardi. `--top-fix`ni JS o'lchab beradi
     (eng qisqa bobga nisbatan qancha ortiq bo'lsa, shuncha pastga
     suradi), shunda hamma bobning TEPASI bir xil qoladi. */
  .chapter {
    position: absolute;
    left: 126px; right: 80px; top: 50%;
    transform: translateY(calc(-50% + var(--top-fix, 0px)));
    flex-direction: column; align-items: flex-start;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .5s var(--ease-out), visibility 0s linear .5s;
  }
  .chapter + .chapter { margin-top: 0; }
  .chapter[data-active="true"] {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .5s var(--ease-out), visibility 0s;
  }

  /* Bob almashganda kontent ikki xil ko'tarilish bilan kiradi (Canva
     nomlari bilan solishtirilgan): sarlavha — «Ascend», HAR SO'Z
     alohida-alohida (app.js sarlavhani `.word-mask > .word` ga bo'lib
     qo'yadi, `--wi` — so'z tartib raqami); matn+tugma — «Rise» (bitta
     blok, kattaroq masofa), sarlavhadan BIROZ KEYIN.
     Tab qatori (`.scene-tabs`) ATAYLAB shu ro'yxatda YO'Q — bob
     almashganda joyidan siljimasligi kerak (faqat rang o'zgaradi,
     harakat yo'q). `data-active` "false"→"true" bo'lganda animatsiya
     har safar qaytadan ishga tushadi (attribut qiymati o'zgargani
     uchun brauzer uni "yangi" deb hisoblaydi). Keyframes'ning o'zi umumiy
     (mobil sikky sahna ham xuddi shu ikkisini ishlatadi) — global qamrovda
     yuqorida e'lon qilingan. */
  .chapter[data-active="true"] h2 .word {
    animation: ascend .7s var(--ease-out) both;
    animation-delay: calc(var(--wi, 0) * .1s);
  }
  .chapter[data-active="true"] p,
  .chapter[data-active="true"] .circle-cta {
    animation: chapterRise .75s var(--ease-out) both;
    animation-delay: .25s;
  }

  /* Media CHAPDA 41.6% (o'lchangan: 595.73 / 1430), matn O'NGDA.
     ⚠️ Avval `border-radius:0` (butunlay to'g'ri burchak) edi — bu NOTO'G'RI
     ekan. Neko'da `clip-path: path(...)` bilan chizilgan (jonli o'lchandi,
     2026-09-07): chap tomon (ekran chetiga tutash) TO'G'RI burchak, O'NG
     tomon (matn paneliga tutashgan joy) ~48px radius bilan YUMALOQ — bizning
     `--radius-l` (46px) token bilan deyarli aynan mos. Mobilda xuddi shu
     mantiq PASTKI burchakka qo'llangan edi (rasm YUQORIDA, matn PASTDA);
     desktopda rasm CHAPDA, matn O'NGDA bo'lgani uchun O'NG burchaklar. */
  .scene-grid { display: flex; align-items: stretch; height: 100%; }
  .scene-media { flex: 0 0 41.6%; aspect-ratio: auto; height: auto; border-radius: 0 var(--radius-l) var(--radius-l) 0; }
  .media-shift { padding: 0; }
  .scene-body  { flex: 1; padding: 0;
                 position: relative; }
  .chapter > * { max-width: 620px; }
  .chapter { max-width: 620px; }

  /* Mobil pastki panel faqat mobilda */
  .bottombar { display: none; }
  body { padding-bottom: 0; }

  /* Hududlar — desktopda 4 karta bir vaqtda (Neko: `lg:basis-1/4`),
     radius --radius-xl (64px), navigatsiya biroz pastroq (40px). */
  .loc-card  {
    flex-basis: calc((100% - 3 * 12px) / 4); border-radius: var(--radius-xl);
    clip-path: inset(0 calc(25% * (1 - var(--loc-reveal, 1))) 0 0 round var(--radius-xl));
  }
  .loc-arrow { width: 48px; height: 48px; }
  .loc-nav   { margin-top: 40px; }
  /* Karta desktopda kengroq (≈328px) — summa ham kattaroq bo'la oladi.
     `.loc-badge` 14px matn bilan ~33px, shuning uchun tepa joy 80px. */
  .plan-body   { padding-top: 80px; }
  .plan-amount { font-size: 52px; }
}

/* ============================================================================
   HARAKATNI KAMAYTIRISH
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  /* `iteration-count: 1` SHART: usiz cheksiz animatsiya .001ms davomiylik
     bilan aqldan ozgan tezlikda takrorlanadi (strobing) — bu reduced-motion
     talab qilgan odam uchun eng yomon natija. */
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .word { transform: none; }
  .rise { opacity: 1; transform: none; }

  /* ⭐ Sahna: boblar oddiy ustma-ust oqadi.
     Desktop media query `.chapter` ni `position: absolute` qiladi va u
     harakat sozlamasiga BOG'LIQ EMAS — shuning uchun bu yerda qaytarish SHART,
     aks holda `.scene-grid` bo'sh qoladi va sahna 0px ga qulaydi. */
  .scene-grid { height: auto; }
  .chapter {
    position: relative; inset: auto;
    flex-direction: column;
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  /* Media va matn JUFTLANIB oqsin — mobil bilan bir xil qoida.
     Busiz desktop kengligida tartib aralashardi: T0 M0 M1 M2 M3 T1 T2 T3 */
  .scene-grid { display: flex; flex-direction: column; gap: 24px; }
  .scene-media, .scene-body { display: contents; }

  .media-layer {
    position: relative; inset: auto;
    order: calc(var(--i) * 2);
    aspect-ratio: 4 / 3; height: auto;
    border-radius: var(--radius-s);
    transform: none !important;          /* slayd yo'q */
  }
  .chapter {
    order: calc(var(--i) * 2 + 1);
    margin: 0;
    padding-inline: var(--xpad-mob);
    max-width: none;
  }
  .chapter + .chapter { margin-top: 0; }
  .media-shift { transform: none !important; padding: 32px; }

  /* Tablar statik ro'yxatda ma'nosiz — har bob o'z sarlavhasi bilan ko'rinadi */
  .scene-tabs { display: none !important; }

  /* Mozaika kartalari darhol to'liq ochiq */
  .mo-card { clip-path: none !important; }

  /* Hududlar kartalari ham darhol to'liq ochiq (JS animatsiyani o'tkazib
     yuboradi — pastga qarang, `reduced` tekshiruvi) */
  .loc-card { clip-path: none !important; }
}