/* tokk.sale — taqdimot sayti (sayt.html / sayt-ru.html). Manba: egа tasdiqlagan «Chaqmoq izi» prototipi (08.10.2026).
   ⚠️ CSP qat'iy (`SAYT_CSP`): bu fayl `'self'` dan; HTML'da `style="…"` yo'q — dinamik o'lcham JS'da `el.style` bilan.
   ⚠️ `.pg`, `.zb`, `.fin` ga transform/filter/contain/will-change/backdrop-filter QO'YMANG — fon belgisining `fixed` i buziladi
      (FON-SCROLL-SPEC §7.3). `.pg` — `overflow-x: clip` (hidden EMAS). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #ffffff; }
.pg [hidden] { display: none !important; }
.pg { --ink: #0b1020; --ink2: #2b3347; --mut: #556078; --line: #e3e8f3; --soft: #f5f8ff; --sky: #eaf0ff; --sky2: #d6e2ff; --br: #2a59ed; --brd: #1e44c8; --ok: #0b7a47; --okw: #e5f5ec; --bad: #b4232f; --badw: #fdecee; --amb: #8a4f06; --ambw: #fdf1df;
  --sh1: 0 1px 2px rgba(11, 16, 32, 0.05), 0 10px 26px -14px rgba(11, 16, 32, 0.16);
  --sh2: 0 2px 4px rgba(11, 16, 32, 0.04), 0 28px 56px -26px rgba(30, 68, 200, 0.34);
  position: relative; min-height: 100vh; background: #ffffff; color: var(--ink); font-family: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 16px; line-height: 1.5; overflow-x: clip; -webkit-font-smoothing: antialiased; }
.pg * { box-sizing: border-box; }
.pg :where(h1, h2, h3, p, blockquote) { margin: 0; }
.pg :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.pg a { color: inherit; }
.pg button, .pg input, .pg select { font-family: inherit; }
/* fokus halqasi IKKI RANGLI (WCAG C40): ichki 2px oq + tashqi 2px to'q — oq fonda to'q 19:1, ko'k tasmada (#2a59ed) to'q 3.4:1 va oq 5.6:1.
   (Eski och-ko'k 3px halqa oq fonda ~2.2:1 edi.) border-radius bu yerda YO'Q — fokusda tugma shakli o'zgarmasin. */
.pg :focus-visible { outline: 2px solid #0b1020; outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff; }
.num { font-family: 'Space Grotesk', 'Manrope', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.nw { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.ic { flex: none; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #ffffff; font-weight: 800; font-size: 14px; text-decoration: none; }
.skip:focus { top: 12px; }
.pg a.skip { color: #ffffff; }
/* prototipdagi inline uslublar → klasslar (CSP: style-src faqat 'self') */
.mt4 { margin-top: 4px; }
.pill-lg { font-size: 13px; padding: 5px 12px; }
.tv-u { font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 700; color: var(--mut); }
.tg-sm { font-size: 12.5px; }
.vi-c .vi-n { font-size: 15px; font-weight: inherit; color: var(--ink); }
.ton-br { background: #eaf0ff; color: #2a59ed; }
.ton-ok { background: #e5f5ec; color: #0b7a47; }
.ton-amb { background: #fdf1df; color: #8a4f06; }
.ton-sky { background: #e0f2fe; color: #0369a1; }
.ton-ind { background: #eef0ff; color: #4338ca; }

/* ---------- tugmalar, umumiy ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 13px; border: 0; font-size: 15px; font-weight: 800; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.pg .btn-p { background: var(--br); color: #ffffff; box-shadow: 0 12px 24px -14px rgba(42, 89, 237, 0.95); }
.pg .btn-p:hover { background: var(--brd); transform: translateY(-1px); box-shadow: 0 16px 28px -14px rgba(42, 89, 237, 0.95); }
.pg .btn-o { background: #ffffff; color: var(--ink); border: 1.5px solid #d5dcea; }
.pg .btn-o:hover { border-color: var(--br); color: var(--brd); }
.pg .btn-w { background: #ffffff; color: var(--brd); box-shadow: 0 14px 30px -16px rgba(5, 15, 60, 0.6); }
.pg .btn-w:hover { transform: translateY(-1px); background: #f2f6ff; }
.pg .btn-ow { background: transparent; color: #ffffff; border: 1.5px solid rgba(255, 255, 255, 0.55); }
.pg .btn-ow:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.08); }
.btn-lg { height: 54px; padding: 0 26px; border-radius: 15px; font-size: 16.5px; }
.btn-blk { width: 100%; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--sky); color: var(--brd); font-size: 13.5px; font-weight: 800; letter-spacing: 0.01em; }
.ed { width: 7px; height: 7px; border-radius: 4px; background: var(--br); }
.h2 { font-size: 44px; line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }
.sub { font-size: 18.5px; line-height: 1.55; color: var(--ink2); }
.sec { padding: 72px 0; }
.sec-soft { background: var(--soft); }
.sec-h { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 900px; margin-bottom: 40px; }
.nam { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: rgba(11, 16, 32, 0.06); color: #465068; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; }
.nam-abs { position: absolute; top: 10px; right: 10px; z-index: 6; }
.vl { transition: opacity 0.45s ease, transform 0.45s ease; }
.v0 { opacity: 0; transform: translateY(6px); }
.v1 { opacity: 1; transform: none; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; transition: background 0.3s ease, color 0.3s ease; }
.pill.ok { background: var(--okw); color: var(--ok); }
.pill.bad { background: var(--badw); color: var(--bad); }
.pill.amb { background: var(--ambw); color: var(--amb); }
.pill.br { background: var(--sky); color: var(--brd); }
.pill.sky { background: #e0f2fe; color: #0369a1; }
.mb { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 9px; background: var(--br); color: #ffffff; font-size: 12.5px; font-weight: 800; white-space: nowrap; transition: transform 0.2s ease, opacity 0.3s ease, box-shadow 0.2s ease, background 0.3s ease, color 0.3s ease; }
.mb-o { background: #ffffff; color: var(--brd); border: 1.5px solid var(--sky2); }
.mb-w { opacity: 0.5; }
.mb-pr { transform: scale(0.93); box-shadow: 0 0 0 4px rgba(42, 89, 237, 0.22); }
.mb-dn { opacity: 1; }
.mb-ok { background: var(--okw); color: var(--ok); }
.mcard { background: #ffffff; border: 1px solid #e4e9f5; border-radius: 13px; padding: 9px 11px; }
.mut { color: var(--mut); }

/* ---------- harakat ---------- */
@keyframes up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes tA { from { opacity: 0; transform: translateX(-18px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes tB { from { opacity: 0; transform: translateX(-18px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes flA { 0% { background: #ffffff; box-shadow: 0 0 0 0 rgba(42, 89, 237, 0); } 22% { background: #eef3ff; box-shadow: 0 0 0 3px rgba(42, 89, 237, 0.32); } 100% { background: #ffffff; box-shadow: 0 0 0 0 rgba(42, 89, 237, 0); } }
@keyframes flB { 0% { background: #ffffff; box-shadow: 0 0 0 0 rgba(42, 89, 237, 0); } 22% { background: #eef3ff; box-shadow: 0 0 0 3px rgba(42, 89, 237, 0.32); } 100% { background: #ffffff; box-shadow: 0 0 0 0 rgba(42, 89, 237, 0); } }
@keyframes draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes ping { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(18px); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes drive { 0% { left: 0%; } 100% { left: calc(100% - 26px); } }
@keyframes pop { 0% { opacity: 0; transform: translateY(8px) scale(0.92); } 60% { opacity: 1; transform: translateY(-2px) scale(1.03); } 100% { opacity: 1; transform: none; } }
@keyframes rise { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes mstickIn { from { opacity: 0; transform: translateY(22px); visibility: hidden; } to { opacity: 1; transform: none; visibility: visible; } }
.in1, .in2, .in3, .in4, .in5 { animation: up 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.in2 { animation-delay: 0.08s; }
.in3 { animation-delay: 0.16s; }
.in4 { animation-delay: 0.24s; }
.in5 { animation-delay: 0.32s; }
.tA { animation: tA 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.tB { animation: tB 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.flA { animation: flA 1.2s ease; }
.flB { animation: flB 1.2s ease; }
.mo-in { animation: up 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@supports (animation-timeline: view()) {
  .rv { animation: up linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
  .rv2 { animation: up linear both; animation-timeline: view(); animation-range: entry 12% entry 90%; }
  .rv3 { animation: up linear both; animation-timeline: view(); animation-range: entry 24% entry 100%; }
}
.rm *, .rm *::before, .rm *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .pg *, .pg *::before, .pg *::after { animation: none !important; transition: none !important; }
}

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; gap: 22px; height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; flex: none; font-weight: 800; font-size: 19px; letter-spacing: -0.015em; color: var(--ink); }
.pg .logo { color: var(--ink); }
.logo-m { width: 34px; height: 34px; border-radius: 10px; background: var(--br); display: grid; place-items: center; box-shadow: 0 8px 16px -8px rgba(42, 89, 237, 0.7); }
.nav-l { display: flex; gap: 2px; margin-left: 8px; }
.nav-l a { padding: 8px 12px; border-radius: 10px; color: var(--ink2); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease; }
.nav-l a:hover { background: var(--soft); color: var(--brd); }
.nav-r { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pg .lnk { color: var(--ink2); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; padding: 8px 10px; border-radius: 10px; }
.pg .lnk:hover { color: var(--brd); background: var(--soft); }
.lang { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; border: 1px solid var(--line); }
.lang span, .lang a { display: grid; place-items: center; height: 30px; padding: 0 9px; border-radius: 8px; font-size: 12.5px; font-weight: 800; text-decoration: none; color: var(--mut); }
.lang .cur { background: var(--sky); color: var(--brd); }
.menu-b { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: #ffffff; place-items: center; cursor: pointer; color: var(--ink); }
.menu-b .mi-x, .nav.menu-open .menu-b .mi-o { display: none; }
.nav.menu-open .menu-b .mi-x { display: block; }
.mnav { border-top: 1px solid var(--line); background: #ffffff; }
.mnav-in { display: flex; flex-direction: column; padding-top: 8px; padding-bottom: 14px; }
.mnav-in a { padding: 12px 4px; font-weight: 700; font-size: 16px; text-decoration: none; border-bottom: 1px solid #eef1f8; }
.mnav-lang { display: flex; gap: 6px; padding-top: 10px; font-weight: 800; font-size: 14px; }
.mnav-in .mnav-lang a, .mnav-lang span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; font-size: 14px; color: var(--mut); }
.mnav-lang .cur { background: var(--sky); color: var(--brd); }

/* ---------- hero ---------- */
.hero { padding: 44px 0 64px; }
.hero-in { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.hero-t { flex: 1 1 560px; min-width: 0; }
.hero-v { flex: 1 1 460px; min-width: 0; display: flex; justify-content: center; }
.h1 { margin-top: 22px; font-size: 60px; line-height: 1.03; letter-spacing: -0.037em; font-weight: 800; }
.h1b { color: var(--br); }
.lead { margin-top: 26px; max-width: 540px; font-size: 19.5px; line-height: 1.55; color: var(--ink2); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.note { margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--mut); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 11px; background: var(--soft); border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; color: var(--ink2); }
.chip svg { color: var(--br); }
.stage { position: relative; width: 100%; max-width: 540px; height: 556px; }
.stage-bg { position: absolute; top: 44px; bottom: 34px; left: 40px; right: 30px; border-radius: 40px; background: var(--soft); border: 1px solid var(--line); }
.stage-ring { position: absolute; right: -60px; top: -10px; width: 300px; height: 300px; border-radius: 50%; border: 1px solid #e3eafb; }
.stage-ring2 { position: absolute; right: -10px; top: 40px; width: 200px; height: 200px; border-radius: 50%; border: 1px solid #e3eafb; }
.stage-ft { position: absolute; left: 60px; bottom: 50px; z-index: 4; display: flex; align-items: center; gap: 8px; }
.rep { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line); background: #ffffff; display: grid; place-items: center; color: var(--brd); cursor: pointer; }
.phone { position: absolute; right: 6px; top: 10px; z-index: 2; width: 298px; height: 532px; border-radius: 48px; background: #0b1020; padding: 10px; box-shadow: 0 50px 90px -46px rgba(11, 16, 32, 0.6), 0 20px 44px -26px rgba(42, 89, 237, 0.5); }
.screen { width: 100%; height: 100%; border-radius: 38px; background: #f4f7fd; overflow: hidden; display: flex; flex-direction: column; }
.sbar { height: 34px; flex: none; display: flex; align-items: center; justify-content: center; }
.notch { width: 92px; height: 22px; border-radius: 12px; background: #0b1020; }
.sc-h { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 10px; }
.sc-h b { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--sky); color: var(--brd); font-size: 11.5px; font-weight: 800; }
.ldot { position: relative; width: 7px; height: 7px; border-radius: 4px; background: var(--br); }
.ldot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--br); animation: ping 1.6s ease-out infinite; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px; }
.tile { position: relative; background: #ffffff; border: 1px solid #e6ebf6; border-radius: 16px; padding: 10px 11px; min-width: 0; }
.t-wide { grid-column: span 2; }
.tl { font-size: 10.5px; font-weight: 800; color: var(--mut); letter-spacing: 0.01em; }
.tv { margin-top: 3px; font-size: 16px; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.tv small { display: block; font-family: 'Manrope', sans-serif; font-size: 10.5px; font-weight: 700; color: var(--mut); letter-spacing: 0; }
.tv-xl { font-size: 23px; letter-spacing: -0.02em; }
.tv-xl small { display: inline; font-size: 12px; margin-left: 3px; }
.tsub { margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--mut); }
.t-flex { display: flex; align-items: center; gap: 8px; }
.t-grow { flex: 1; min-width: 0; }
.spark { position: relative; width: 84px; height: 46px; flex: none; margin-left: 4px; }
.spark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.spark-a { fill: rgba(42, 89, 237, 0.1); stroke: none; }
.spark-l { fill: none; stroke: var(--br); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; animation: draw 1.6s 0.5s ease both; }
.spark-d { position: absolute; left: 100%; top: 12.5%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--br); box-shadow: 0 0 0 3px #ffffff; }
.t-row { display: flex; align-items: center; gap: 9px; padding: 8px 11px; }
.t-row .tl { flex: 1; font-size: 11.5px; color: var(--ink2); }
.t-row .tv { margin: 0; font-size: 15px; }
.warn-ic { width: 24px; height: 24px; border-radius: 8px; background: var(--ambw); color: var(--amb); display: grid; place-items: center; }
.stores { margin: 8px 12px 0; background: #ffffff; border: 1px solid #e6ebf6; border-radius: 16px; padding: 10px 12px 6px; }
.sto-h { font-size: 10.5px; font-weight: 800; color: var(--mut); margin-bottom: 4px; }
.sto-r { display: flex; align-items: center; gap: 8px; height: 26px; border-radius: 8px; margin: 0 -6px; padding: 0 6px; }
.sto-n { width: 62px; flex: none; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.sto-bar { flex: 1; height: 6px; border-radius: 3px; background: #edf1f9; overflow: hidden; }
.sto-bar span { display: block; height: 100%; border-radius: 3px; background: var(--br); transition: width 0.5s ease; }
.stb-m { width: 96.2%; }
.stb-f2 { width: 62.4%; }
.stb-f3 { width: 32.9%; }
.sto-v { width: 70px; text-align: right; font-size: 12px; font-weight: 700; }
.tabbar { margin-top: auto; height: 54px; flex: none; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid #e6ebf6; background: #ffffff; color: #98a1b6; }
.tabbar .cur { color: var(--br); }
.toast { position: absolute; left: -44px; top: 150px; z-index: 5; width: 256px; display: flex; animation: tA 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; align-items: flex-start; gap: 11px; padding: 12px 14px; border-radius: 18px; background: #ffffff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(11, 16, 32, 0.06), 0 24px 46px -20px rgba(11, 16, 32, 0.38); }
.t-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.t-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.t-tx b { font-size: 14px; font-weight: 800; }
.t-tx span { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--mut); }
.tlist { position: absolute; left: -44px; top: 70px; z-index: 5; width: 256px; padding: 8px; border-radius: 18px; background: #ffffff; border: 1px solid var(--line); box-shadow: var(--sh1); }
.tlist li { display: flex; gap: 9px; align-items: flex-start; padding: 7px 6px; border-bottom: 1px solid #eef1f8; }
.tlist li:last-child { border-bottom: 0; }
.tlist .t-ic { width: 28px; height: 28px; border-radius: 9px; }
.tlist .t-tx b { font-size: 12.5px; }
.tlist .t-tx span { font-size: 11.5px; }

/* ---------- #kun ---------- */
.kun-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.kun-top .sec-h { margin-bottom: 0; }
.kseg { display: none; padding: 4px; gap: 4px; border-radius: 14px; background: #ffffff; border: 1px solid var(--line); }
.kseg button { height: 40px; padding: 0 16px; border-radius: 10px; border: 0; background: transparent; font-size: 14px; font-weight: 800; color: var(--mut); cursor: pointer; }
.kseg button[aria-pressed="true"] { background: var(--br); color: #ffffff; }
.kun-g { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.kun-head { display: grid; grid-template-columns: 74px 1fr 1fr; gap: 14px; padding: 0 18px 12px; font-size: 13.5px; font-weight: 800; }
.kh-d { display: inline-flex; align-items: center; gap: 7px; color: var(--mut); }
.kh-t { display: inline-flex; align-items: center; gap: 7px; color: var(--brd); }
.kun-r { display: grid; grid-template-columns: 74px 1fr 1fr; gap: 14px; align-items: start; width: 100%; margin-bottom: 6px; padding: 15px 18px; border-radius: 20px; border: 1px solid transparent; background: transparent; text-align: left; color: inherit; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.kun-r:hover { background: rgba(255, 255, 255, 0.7); }
.kun-r.cur { background: #ffffff; border-color: var(--sky2); box-shadow: var(--sh1); }
.k-time { font-size: 15.5px; font-weight: 700; color: var(--brd); padding-top: 1px; }
.k-cell { display: flex; gap: 9px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; }
.k-d { color: var(--mut); font-weight: 600; }
.k-t { color: var(--ink); font-weight: 800; }
.k-ic { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; flex: none; }
.k-d .k-ic { background: #eceff5; color: #6b7488; }
.k-t .k-ic { background: var(--br); color: #ffffff; }
.kun-res { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding: 0 18px; }
.kr-d { padding: 9px 14px; border-radius: 12px; background: #ffffff; border: 1.5px dashed #c6cedf; color: var(--mut); font-weight: 700; font-size: 14.5px; }
.kr-x { color: var(--mut); font-weight: 800; }
.kr-t { padding: 9px 14px; border-radius: 12px; background: var(--br); color: #ffffff; font-weight: 800; font-size: 14.5px; }
.dev { position: relative; border-radius: 30px; background: #ffffff; border: 1px solid var(--line); box-shadow: var(--sh2); overflow: hidden; }
.dev-h { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.dev-av { width: 34px; height: 34px; border-radius: 11px; background: var(--br); display: grid; place-items: center; flex: none; }
.dev-av.alt { background: var(--sky); color: var(--brd); }
.dev-tt { flex: 1; min-width: 0; line-height: 1.25; }
.dev-tt b { display: block; font-size: 14px; font-weight: 800; }
.dev-tt span { display: block; font-size: 12px; font-weight: 600; color: var(--mut); }
.dev-time { padding: 4px 9px; border-radius: 8px; background: var(--sky); color: var(--brd); font-size: 12.5px; font-weight: 700; }
.dev-b .pill.br { background: #ffffff; }
.dev-b { position: relative; height: 312px; padding: 18px; background: #eaf0f9; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.dev-dots { display: flex; justify-content: center; gap: 6px; padding: 12px 0 14px; }
.dev-dots span { width: 7px; height: 7px; border-radius: 4px; background: #d3dbec; transition: width 0.3s ease, background 0.3s ease; }
.dev-dots span.cur { width: 22px; background: var(--br); }
.tg-b { position: relative; max-width: 100%; padding: 12px 14px 10px; border-radius: 16px 16px 16px 4px; background: #ffffff; box-shadow: 0 1px 1px rgba(11, 16, 32, 0.06); font-size: 13.5px; line-height: 1.45; }
.tg-l { display: flex; align-items: flex-start; gap: 8px; padding: 2px 0; }
.tg-l svg { margin-top: 2px; color: var(--br); }
.tg-sub { padding-left: 22px; color: var(--mut); font-size: 12.5px; }
.tg-note { margin-top: 4px; padding-top: 7px; border-top: 1px dashed #dfe5f1; color: var(--ink2); font-size: 12.5px; }
.tg-time { display: block; margin-top: 4px; text-align: right; font-size: 11px; color: #8a93a8; }
.tg-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.tgk { display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, 0.86); color: var(--brd); font-size: 13px; font-weight: 800; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.tgk.pr { transform: scale(0.95); background: #ffffff; box-shadow: 0 0 0 3px rgba(42, 89, 237, 0.25); }
.tg-done { display: flex; align-items: center; justify-content: center; height: 38px; margin-top: 6px; border-radius: 12px; background: var(--okw); color: var(--ok); font-size: 13.5px; font-weight: 800; animation: pop 0.45s ease both; }
.srch { display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 14px; border-radius: 14px; background: #ffffff; border: 1.5px solid var(--sky2); color: var(--mut); }
.srch-q { font-size: 16px; font-weight: 700; color: var(--ink); }
.caret { width: 2px; height: 18px; background: var(--br); animation: blink 1s steps(1) infinite; }
.e-st { display: flex; align-items: center; gap: 8px; margin: 12px 2px; font-size: 13px; font-weight: 800; color: var(--brd); }
.cust { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; background: #ffffff; border: 1px solid #e3e9f5; }
.av { width: 42px; height: 42px; border-radius: 13px; background: var(--sky); color: var(--brd); display: grid; place-items: center; flex: none; }
.cust-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.cust-tx b { font-size: 14px; font-weight: 800; }
.cust-tx span { font-size: 12.5px; color: var(--mut); font-weight: 600; }
.e-debt { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 14px; border-radius: 16px; background: #ffffff; border: 1.5px solid #f3c6cb; }
.e-debt b { font-family: 'Space Grotesk', 'Manrope', sans-serif; font-size: 20px; font-weight: 700; }
.h-lbl { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 800; color: var(--amb); }
.chk-r { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 7px; border-radius: 13px; background: #ffffff; border: 1px solid #e3e9f5; font-size: 13.5px; font-weight: 600; }
.chk-r b { font-weight: 800; }
.cb { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #c3cde3; display: grid; place-items: center; color: transparent; flex: none; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease; }
.cb.cb-on { background: var(--br); border-color: var(--br); color: #ffffff; }
.h-act { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

/* ---------- #imkoniyatlar ---------- */
.cap-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cap { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 18px; border-radius: 26px; background: #ffffff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(11, 16, 32, 0.04); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease; }
.cap:hover { transform: translateY(-4px); box-shadow: var(--sh2); border-color: var(--sky2); }
.cap-t { padding: 8px 8px 0; font-size: 19.5px; line-height: 1.25; font-weight: 800; letter-spacing: -0.015em; }
.cap-p { padding: 0 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink2); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding: 6px 8px 0; }
.tags li { padding: 4px 9px; border-radius: 8px; background: var(--sky); color: var(--brd); font-size: 12px; font-weight: 800; }
.vg { position: relative; height: 228px; padding: 34px 14px 12px; border-radius: 18px; background: var(--soft); border: 1px solid #e6ebf7; overflow: hidden; font-size: 12.5px; }
.vk-row { display: flex; align-items: center; gap: 10px; }
.bc { position: relative; width: 40px; height: 30px; border-radius: 8px; background: #ffffff; border: 1px solid #e3e9f5; display: grid; place-items: center; overflow: hidden; flex: none; }
/* cheksiz animatsiya FAQAT ekranda (`.bc.ekranda` — sayt.js IntersectionObserver; reduced motion / .rm da sinf qo'yilmaydi
   va `animation: none` qoidasi ham bor) — ekrandan tashqarida/JS'siz to'xtagan (paused). */
.scan { position: absolute; left: 3px; right: 3px; top: 4px; height: 2px; border-radius: 2px; background: #e5484d; box-shadow: 0 0 8px #e5484d; animation: scan 1.1s ease-in-out infinite alternate; animation-play-state: paused; }
.bc.ekranda .scan { animation-play-state: running; }
.vk-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.vk-tx span { font-size: 11px; font-weight: 700; color: var(--mut); }
.vk-tx b { font-size: 13px; font-weight: 800; }
.vk-pr { font-size: 14px; font-weight: 700; }
.vk-pay { margin-top: 10px; }
.vk-pl { font-size: 11.5px; font-weight: 700; color: var(--ink2); margin-bottom: 5px; }
.split { display: flex; gap: 3px; height: 8px; }
.split span { border-radius: 4px; }
.sp-a { width: 53%; background: var(--br); }
.sp-b { width: 47%; background: #7aa0ff; }
.vk-act { display: flex; align-items: center; gap: 10px; margin-top: 10px; min-height: 30px; }
.okt { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--ink2); }
.okt.g { color: var(--ok); }
.debt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 11px; }
.debt .av { width: 36px; height: 36px; border-radius: 11px; }
.debt-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.debt-tx b { font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.debt-tx span { font-size: 15px; font-weight: 700; }
.bub { display: inline-flex; align-items: center; gap: 7px; margin: 10px 0 0 22px; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--br); color: #ffffff; font-size: 12.5px; font-weight: 800; box-shadow: 0 10px 20px -12px rgba(42, 89, 237, 0.9); }
.vf-sum { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vf-sum div { padding: 8px 10px; border-radius: 12px; background: #ffffff; border: 1px solid #e3e9f5; display: flex; flex-direction: column; line-height: 1.3; }
.vf-sum span { font-size: 10.5px; font-weight: 800; color: var(--mut); }
.vf-sum b { font-size: 14px; font-weight: 700; transition: color 0.3s ease; }
.vf-sum b .chg { color: var(--ok); }
.gl { position: relative; height: 122px; }
/* ⚠️ Qatorlar o'rin almashganda bir-birining ustidan o'tadi (prototipda shaffof qatorlar `top` bilan siljib, matnlari
   ustma-ust tushardi). Endi: siljish `transform` bilan, har qator NOSHAFFOF, ko'tarilayotgan qator yuqori qatlamda (JS). */
.gr { position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 24px; display: flex; align-items: center; gap: 7px; background: var(--soft); transition: transform 0.7s cubic-bezier(0.3, 0.8, 0.2, 1); }
.gr[data-k="1"] { transform: translateY(24.5px); }
.gr[data-k="2"] { transform: translateY(49px); }
.gr[data-k="3"] { transform: translateY(73.5px); }
.gr[data-k="4"] { transform: translateY(98px); }
.gb { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; transition: background 0.3s ease, color 0.3s ease; }
.gb-h { background: #e7ecf6; color: transparent; }
.gb-a { background: var(--br); color: #ffffff; }
.gb-b { background: #a9c0ff; color: #0f2a7a; }
.gb-c { background: #dfe5f1; color: #3b4459; }
.gb-z { background: transparent; color: transparent; }
.gn { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.gw.amb { background: var(--ambw); color: var(--amb); }
.gw.bad { background: var(--badw); color: var(--bad); }
.gs { width: 30px; text-align: right; font-size: 12px; font-weight: 700; }
.gbar { position: absolute; left: 27px; right: 37px; bottom: 1px; height: 3px; border-radius: 2px; background: transparent; }
.gbar span { display: block; height: 100%; border-radius: 2px; transition: background 0.4s ease; }
.gbw-100 { width: 100%; }
.gbw-62 { width: 62%; }
.gbw-35 { width: 35%; }
.gbw-12 { width: 12%; }
.gbw-7 { width: 7%; }
.gbar-h { background: #cfd8ea; }
.gbar-a { background: #2a59ed; }
.gbar-b { background: #7aa0ff; }
.gbar-c { background: #b7c3dc; }
.gbar-z { background: #d9505a; }
.g-sum { margin-top: 4px; font-size: 12.5px; font-weight: 800; color: var(--brd); }
.g-ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
/* Kesim chiplari sig'magani KEYINGI qatorga o'tadi va yashirinadi (prototipda «Excel tayyor ✓» tor kartada vinyetkadan chiqib ketardi; ru matn uzunroq) */
.g-cuts { display: flex; flex-wrap: wrap; flex: 1 1 0; min-width: 0; height: 22px; overflow: hidden; gap: 4px; }
.g-ft .mb { flex: none; }
.g-cuts span { padding: 3px 7px; line-height: 14px; white-space: nowrap; border-radius: 7px; background: #ffffff; border: 1px solid #e0e6f3; font-size: 11px; font-weight: 700; color: var(--ink2); }
.vh .chk-r { padding: 7px 10px; margin-bottom: 6px; font-size: 12.5px; border-radius: 11px; }
.vh .cb { width: 18px; height: 18px; }
.hs { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.seg4 { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.seg4 span { height: 6px; border-radius: 3px; background: #dfe5f1; transition: background 0.35s ease; }
.seg4 span.f { background: var(--br); }
.seg4 span.g { background: var(--ok); }
.vi-c { display: flex; flex-direction: column; padding: 10px 12px; line-height: 1.3; }
.vi-c span { font-size: 11px; font-weight: 800; color: var(--mut); }
.vi-c b { font-size: 15px; font-weight: 800; }
.vi-r { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.rate { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: #ffffff; border: 1px solid #e3e9f5; font-size: 12.5px; font-weight: 800; }
.rate-l { flex: 1; height: 30px; }
.rate-l path { fill: none; stroke: #7aa0ff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; animation: rise 1.4s ease both; }
.vi-ok { margin-top: 10px; padding: 10px 12px; border-radius: 13px; background: var(--okw); color: var(--ok); font-size: 12.5px; font-weight: 800; line-height: 1.4; }
.vi-ft { position: absolute; left: 14px; bottom: 12px; font-size: 11.5px; font-weight: 700; color: var(--mut); }
.role { padding: 9px 11px 8px; }
.role-h { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font-size: 12.5px; font-weight: 800; }
.role-h svg { color: var(--br); }
.role-n { flex: 1; }
.perms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.perm { display: flex; flex-direction: column; gap: 3px; padding: 6px 7px; border-radius: 9px; background: var(--soft); }
.perm-t { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 11.5px; font-weight: 800; }
.perm-s { min-height: 15px; font-size: 10.5px; font-weight: 800; color: var(--mut); }
.perm-s.ok { color: var(--ok); }
.sw { position: relative; width: 28px; height: 16px; border-radius: 8px; background: #cdd5e6; flex: none; transition: background 0.3s ease; }
.sw i { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #ffffff; transition: left 0.3s ease; }
.sw.on { background: var(--br); }
.sw.on i { left: 14px; }
.saved { font-size: 11px; font-weight: 800; color: var(--ok); white-space: nowrap; }
.tgm { margin-top: 8px; }
.tgm .tg-b { padding: 9px 11px 8px; font-size: 11.5px; line-height: 1.4; box-shadow: 0 14px 30px -16px rgba(11, 16, 32, 0.4); border: 1px solid #e3e9f5; }
.tgm .tg-l { gap: 6px; padding: 1px 0; }
.tgm .tg-l svg { margin-top: 1px; }
.more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
.more-ul { display: flex; flex-wrap: wrap; gap: 6px; }
.more-l { margin-right: 4px; font-size: 14px; font-weight: 800; color: var(--ink2); }
.more li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 11px; background: #ffffff; border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--ink2); }

/* ---------- #turlar ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.tab { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 13px; border-radius: 13px; border: 1px solid var(--line); background: #ffffff; color: var(--ink2); font-size: 14px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.tab:hover { border-color: var(--sky2); color: var(--brd); }
.tab svg { color: var(--br); }
.tab.cur { background: var(--br); border-color: var(--br); color: #ffffff; box-shadow: 0 12px 22px -14px rgba(42, 89, 237, 0.95); }
.tab.cur svg { color: #ffffff; }
/* panellar BITTA katakda ustma-ust: bo'lim balandligi = eng baland panel — tab almashganda pastdagi kontent sakramaydi (CLS).
   Yashirin panel — `visibility: hidden` (fokus, a11y, bosish yo'q); semantika manbai baribir `hidden` atributi (sayt.js, spec).
   `.mo-in` yashirinda `animation: none` — ko'ringanda kirish animatsiyasi qayta boshlanadi (display:none dagidek). */
.tur-st { display: grid; }
.tur-st > .tur-p { grid-area: 1 / 1; }
.pg .tur-st > .tur-p[hidden] { display: grid !important; visibility: hidden; }
.pg .tur-st > .tur-p[hidden] .mo-in { animation: none; }
.tur-p { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; padding: 28px 28px 28px 36px; border-radius: 30px; background: var(--soft); border: 1px solid var(--line); }
.tur-l { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mut); }
.tur-l2 { margin-top: 22px; color: var(--brd); }
.tur-pain { margin-top: 8px; font-size: 18px; line-height: 1.5; color: var(--ink2); font-weight: 600; }
.tur-sol { margin-top: 8px; font-size: 23px; line-height: 1.35; font-weight: 800; letter-spacing: -0.02em; }
.tur-m { position: relative; min-height: 244px; padding: 46px 22px 22px; border-radius: 24px; background: #ffffff; border: 1px solid var(--line); box-shadow: var(--sh2); display: flex; flex-direction: column; justify-content: center; }
.tm-h { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 800; }
.tm-h svg { color: var(--br); }
.tm-sub { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--mut); }
.ex { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.ex-i { padding: 12px 16px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); font-size: 15px; font-weight: 800; }
.ex-n { background: var(--sky); border-color: var(--sky2); color: var(--brd); }
.ex-a { color: var(--br); }
.tm-res { margin-top: 16px; font-size: 15px; font-weight: 700; color: var(--ink2); }
.tm-res b { font-family: 'Space Grotesk', 'Manrope', sans-serif; font-size: 20px; color: var(--ink); }
.route { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 13.5px; font-weight: 800; }
.road { position: relative; flex: 1; height: 26px; }
.road::before { content: ''; position: absolute; left: 0; right: 0; top: 12px; border-top: 2px dashed #c3cfea; }
.trk { position: absolute; top: 0; width: 26px; height: 26px; border-radius: 8px; background: var(--br); color: #ffffff; display: grid; place-items: center; }
.trk-go { animation: drive 2.2s ease-in-out infinite alternate; }
.trk-end { left: calc(100% - 26px); background: var(--ok); }
.calc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 16px; }
.big { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.calc-x { font-family: 'Space Grotesk', 'Manrope', sans-serif; font-size: 22px; font-weight: 600; color: var(--mut); }
.scale { position: relative; height: 12px; margin-top: 14px; border-radius: 6px; background: #edf1f9; overflow: hidden; }
.scale span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--br); transition: width 1.1s cubic-bezier(0.3, 0.8, 0.2, 1); }
.ruler { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--mut); }
.tk { position: relative; padding: 20px; border-radius: 20px; background: var(--br); color: #ffffff; overflow: hidden; }
.tk::after { content: ''; position: absolute; right: -40px; top: -50px; width: 170px; height: 170px; border-radius: 50%; border: 22px solid rgba(255, 255, 255, 0.09); }
.tk-top { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; }
.tk-lg { width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, 0.16); display: grid; place-items: center; }
.tk-bal { margin-top: 26px; font-size: 12.5px; font-weight: 700; color: #dce6ff; }
.tk-bal b { display: block; margin-top: 2px; font-size: 28px; font-weight: 700; color: #ffffff; }
.tk-cb { display: inline-flex; margin-top: 14px; padding: 6px 12px; border-radius: 999px; background: #ffffff; color: var(--ok); font-size: 13px; font-weight: 800; }
.ptags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.ptag { padding: 8px 9px; border-radius: 10px; background: #ffffff; border: 1px solid #dfe5f1; box-shadow: 0 1px 2px rgba(11, 16, 32, 0.05); transition: border-color 0.3s ease; }
.ptag svg { display: block; width: 100%; height: 16px; color: #0b1020; }
.ptag b { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; }
.ptag.done { border-color: #9fd3b6; }
.imei { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--soft); border: 1px solid var(--line); }
.imei-tx { display: flex; flex-direction: column; line-height: 1.35; }
.imei-tx b { font-size: 15px; font-weight: 800; }
.imei-tx span { font-size: 13px; font-weight: 700; color: var(--mut); }
.tur-f { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 20px; font-size: 16px; font-weight: 700; color: var(--ink2); }

/* ---------- #keyslar ---------- */
.ks-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 36px; }
.ks-top .sec-h { margin-bottom: 0; }
.ks-g { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.ks-g.one { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.ks-side { display: flex; flex-direction: column; gap: 20px; }
.ks { display: flex; flex-direction: column; border-radius: 28px; background: #ffffff; border: 1px solid var(--line); overflow: hidden; box-shadow: 0 1px 2px rgba(11, 16, 32, 0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; }
/* hover: `translate` (`.rv` «both» to'ldirishi `transform` ni egallaydi — FON-SCROLL-SPEC §4) */
.ks { transition: translate 0.3s ease, box-shadow 0.3s ease; }
.ks:hover { transform: none; translate: 0 -3px; box-shadow: var(--sh2); }
.ks-b { display: flex; flex-direction: column; gap: 12px; padding: 22px 26px 24px; }
.ks-t { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
.ks-m { font-size: 13.5px; font-weight: 700; color: var(--mut); line-height: 1.6; }
.ks-r { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--soft); }
.ks-n { font-size: 28px; font-weight: 700; line-height: 1.1; }
.ks-r.ks-matn { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 18px; }
.ks-nf { display: grid; gap: 7px; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--ink2); }
.ks-nf li { position: relative; padding-left: 18px; }
.ks-nf li::before { content: ""; position: absolute; left: 3px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--br); }
.ks-q { font-size: 15.5px; line-height: 1.55; font-weight: 600; color: var(--ink); }
.ks-a { font-size: 13.5px; font-weight: 700; color: var(--mut); }
.ks-next { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; height: 100%; padding: 30px; border-radius: 28px; border: 2px dashed var(--sky2); background: #ffffff; }
.ks-next p { font-size: 24px; line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; }
.ks-tag { align-self: flex-start; }
.ks-fig { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* ---------- #biz ---------- */
.biz-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
.biz-g .sec-h { margin-bottom: 0; }
.biz-f { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.biz-f li { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 16px; background: #ffffff; border: 1px solid var(--line); font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink2); }
.biz-ic { width: 34px; height: 34px; border-radius: 11px; background: var(--sky); color: var(--br); display: grid; place-items: center; flex: none; }

/* ---------- #narx ---------- */
.narx-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
.narx-g .sec-h { margin-bottom: 18px; }
.steps { position: relative; }
.steps::before { content: ''; position: absolute; left: 25px; top: 30px; bottom: 30px; border-left: 2px dashed var(--sky2); }
.step { position: relative; display: flex; gap: 18px; padding: 11px 0; }
.st-n { position: relative; width: 52px; height: 52px; border-radius: 16px; background: #ffffff; border: 1.5px solid var(--sky2); color: var(--brd); display: grid; place-items: center; font-size: 17px; font-weight: 700; flex: none; }
.step h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; padding-top: 4px; }
.step p { margin-top: 3px; font-size: 16px; line-height: 1.5; color: var(--ink2); }
.price { position: relative; padding: 30px 32px; border-radius: 30px; background: #ffffff; border: 2px solid var(--br); box-shadow: var(--sh2); }
.pr-lbl { position: absolute; right: 28px; top: 30px; display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--br); color: #ffffff; font-size: 13px; font-weight: 800; letter-spacing: 0.03em; }
.pr-amt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding-right: 96px; }
.pr-amt b { font-size: 60px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.pr-amt span { font-size: 19px; font-weight: 800; }
.pr-per { color: var(--mut); font-weight: 700 !important; font-size: 17px !important; }
.pr-line { margin-top: 10px; font-size: 16.5px; font-weight: 700; color: var(--ink2); }
.pr-list { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pr-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; font-weight: 600; }
.pr-ck { width: 20px; height: 20px; border-radius: 50%; background: var(--sky); color: var(--br); display: grid; place-items: center; flex: none; margin-top: 1px; }
.pr-note { margin-top: 12px; text-align: center; font-size: 14px; font-weight: 700; color: var(--mut); }

/* ---------- #savollar ---------- */
.faq-h { text-align: center; margin-bottom: 40px; }
.faq-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; align-items: start; }
.qa { border-bottom: 1px solid #dfe5f1; }
.qa-b { display: flex; align-items: center; gap: 16px; width: 100%; padding: 22px 2px; border: 0; background: transparent; text-align: left; color: var(--ink); font-size: 17.5px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.35; cursor: pointer; }
.qa-b span:first-child { flex: 1; }
.qa-i { width: 32px; height: 32px; border-radius: 10px; background: #ffffff; border: 1px solid var(--line); display: grid; place-items: center; color: var(--brd); flex: none; transition: background 0.2s ease, color 0.2s ease, transform 0.25s ease; }
.qa.cur .qa-i { background: var(--br); border-color: var(--br); color: #ffffff; }
.qa .qa-m, .qa.cur .qa-p { display: none; }
.qa.cur .qa-m { display: block; }
.qa-a { padding: 0 52px 22px 2px; font-size: 16px; line-height: 1.6; color: var(--ink2); animation: up 0.35s ease both; }

/* ---------- #yakun ---------- */
.fin { position: relative; padding: 72px 0; background: var(--br); color: #ffffff; overflow: hidden; }
.fin-deco { position: absolute; right: -120px; top: -140px; width: 520px; height: 520px; border-radius: 50%; border: 70px solid rgba(255, 255, 255, 0.05); }
.fin-g { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; }
.fin-h { font-size: 52px; line-height: 1.05; letter-spacing: -0.035em; font-weight: 800; }
.fin-sub { margin-top: 18px; font-size: 19.5px; line-height: 1.5; color: #f5f8ff; }
.form { padding: 30px; border-radius: 28px; background: #ffffff; color: var(--ink); box-shadow: 0 40px 80px -40px rgba(5, 15, 60, 0.7); }
.form h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; }
.fl { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.fl-c { min-width: 0; }
.f-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; }
.fl-l { font-size: 13.5px; font-weight: 800; color: var(--ink2); }
.fin-in { width: 100%; height: 48px; padding: 0 14px; border-radius: 13px; border: 1.5px solid #d5dcea; background: #ffffff; font-size: 16px; font-weight: 600; color: var(--ink); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.fin-in:focus { border-color: var(--br); box-shadow: 0 0 0 4px rgba(42, 89, 237, 0.14); }
.fin-in.bad { border-color: var(--bad); }
.fin-in::placeholder { color: #8a93a8; }
.f-fe { margin-top: -8px; margin-bottom: 12px; font-size: 13px; font-weight: 700; color: var(--bad); }
.f-err { margin-bottom: 14px; padding: 11px 13px; border-radius: 12px; background: var(--badw); color: var(--bad); font-size: 13.5px; font-weight: 700; }
.fseg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fset { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.fset legend { padding: 0; margin-bottom: 6px; }
.fseg label { position: relative; display: block; }
.fseg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fseg span { display: grid; place-items: center; height: 44px; padding: 0 6px; border-radius: 12px; border: 1.5px solid #d5dcea; background: #ffffff; color: var(--ink2); font-size: 14px; font-weight: 800; text-align: center; line-height: 1.2; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; }
.fseg input:checked + span { border-color: var(--br); background: var(--sky); color: var(--brd); }
.fseg input:focus-visible + span { outline: 2px solid #0b1020; outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff; }
.pot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.f-sub { margin-top: 6px; }
.f-sub[disabled] { opacity: 0.7; cursor: default; }
.f-priv { margin-top: 10px; text-align: center; font-size: 13px; font-weight: 600; color: var(--mut); }
.f-ok { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 6px 10px; text-align: center; animation: pop 0.45s ease both; }
.f-ok-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--okw); color: var(--ok); display: grid; place-items: center; }
.f-ok p { font-size: 18px; line-height: 1.5; font-weight: 700; }
.f-ok .f-ok-p { margin-top: -8px; font-size: 15.5px; font-weight: 600; color: var(--ink2); }
.f-ok:focus { outline: none; }

/* ---------- footer ---------- */
.foot { padding: 24px 0 26px; border-top: 1px solid var(--line); background: #ffffff; }
.foot-in { display: flex; flex-direction: column; gap: 14px; }
.f-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.f-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.f-tag { font-size: 14px; font-weight: 600; color: var(--mut); }
.f-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.f-links a { font-size: 14.5px; font-weight: 700; color: var(--ink2); text-decoration: none; }
.f-links a:hover { color: var(--brd); }
.f-bot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-top: 14px; border-top: 1px solid #eef1f8; font-size: 13.5px; font-weight: 600; color: var(--mut); }
.f-bot a { color: var(--brd); font-weight: 700; text-decoration: none; }
.f-bot a:hover { text-decoration: underline; }
.f-lang { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.f-lang a, .f-lang span { display: inline-grid; place-items: center; min-width: 32px; height: 28px; padding: 0 6px; border-radius: 8px; font-size: 12.5px; font-weight: 800; text-decoration: none; color: var(--mut); }
.f-lang .cur { background: var(--sky); color: var(--brd); }
.pg .f-lang a { color: var(--mut); }
.mstick { display: none; }

/* ---------- moslashuv ---------- */
@media (max-width: 1080px) {
  .cap-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .narx-g { grid-template-columns: minmax(0, 1fr); }
  .fin-g { grid-template-columns: minmax(0, 1fr); }
  .ks-g, .ks-g.one { grid-template-columns: minmax(0, 1fr); }
  .biz-g { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .nav-l a { padding: 8px 9px; }
}
/* ⚠️ Sarlavha bir qatorga sig'ishi O'LCHANGAN: uz ≥ 1061, ru ≥ 1181 (ruscha so'zlar uzunroq — eski saytdagi saboq). Undan torda — menyu tugmasi. */
@media (max-width: 1180px) {
  html[lang="ru"] .nav-l { display: none; }
  html[lang="ru"] .menu-b { display: grid; }
}
@media (max-width: 1060px) {
  .nav-l { display: none; }
  .menu-b { display: grid; }
}
@media (max-width: 820px) {
  .sec { padding: 72px 0; }
  .h2 { font-size: 34px; }
  .fin-h { font-size: 38px; }
  .kseg { display: inline-flex; }
  .kun-g { grid-template-columns: minmax(0, 1fr); }
  .kun-head { display: none; }
  .kun-r { grid-template-columns: 58px minmax(0, 1fr); padding: 14px; }
  /* bitta ustun: «Daftar» va «Tokk» matni BITTA katakda ustma-ust (yashirini `visibility: hidden` — a11y/bosishdan ham chiqadi):
     qator balandligi = ikkalasining kattasi, rejim almashganda (birinchi ko'rishdan 1.5 s keyin AVTOMATIK ham) sahifa siljimaydi (CLS). */
  .kun-r .k-time { grid-column: 1; grid-row: 1; }
  .kun-r .k-cell { grid-column: 2; grid-row: 1; }
  .m-hide { visibility: hidden; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .tur-p { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 22px; }
  .tur-sol { font-size: 20px; }
  .faq-g { grid-template-columns: minmax(0, 1fr); }
  .mstick { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; gap: 8px; padding: 8px; border-radius: 18px; background: rgba(255, 255, 255, 0.97); border: 1px solid var(--line); box-shadow: 0 18px 40px -18px rgba(11, 16, 32, 0.45); }
  .mstick .btn { flex: 1; }
  .mstick { transition: opacity 0.25s ease, visibility 0.25s ease; }
  /* !important — scroll-animatsiya (opacity/visibility) ustidan: yakuniy forma ko'ringanda panel uni to'smasin */
  .mstick.away { opacity: 0 !important; visibility: hidden !important; }
  .foot { padding-bottom: 100px; }
  /* klaviatura fokusi pastki panel (.mstick, ~74px) ostida qolmasin: fokuslangan element scroll bilan undan YUQORIGA chiqadi */
  html { scroll-padding-bottom: 90px; }
}
/* scroll-timeline yo'q brauzer: panel JS bilan (`.on` — hero tugmalari ko'rinmay qolganda) */
@supports not (animation-timeline: scroll()) {
  @media (max-width: 820px) {
    .mstick { opacity: 0; visibility: hidden; translate: 0 22px; transition: opacity 0.25s ease, visibility 0.25s ease, translate 0.25s ease; }
    .mstick.on { opacity: 1; visibility: visible; translate: none; }
    .mstick.on.away { opacity: 0; visibility: hidden; }
  }
}
@supports (animation-timeline: scroll()) {
  @media (max-width: 820px) {
    /* visibility ham: opacity 0 dagi panel pastdagi kontent ustida «ko'rinmas tugma» bo'lib bosishlarni yutardi (prototipda shunday edi) */
    .mstick { animation: mstickIn linear both; animation-timeline: scroll(root); animation-range: 520px 640px; }
  }
}
/* reduced motion (media yoki «Kamaytirilgan» .rm): scroll-animatsiya `animation: none !important` bilan o'chadi va panel scroll 0 da
   ham ko'rinib qolardi. Bu holatda panel — JS `.on` (hero tugmalari ko'rinmay qolganda), scroll-timeline yo'q brauzerdagidek. */
@media (max-width: 820px) and (prefers-reduced-motion: reduce) { .mstick:not(.on) { opacity: 0; visibility: hidden; } }
@media (max-width: 820px) { .pg.rm .mstick:not(.on) { opacity: 0; visibility: hidden; } }
.cta-s { display: none; }
@media (max-width: 720px) { html[lang="ru"] .nav-r .lnk { display: none; } }
@media (max-width: 400px) { html[lang="ru"] .nav-r .cta-l { display: none; } html[lang="ru"] .nav-r .cta-s { display: inline; } }
@media (max-width: 359px) { .nav-r .cta-l { display: none; } .nav-r .cta-s { display: inline; } }
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .hero { padding: 36px 0 56px; }
  .h1 { font-size: 40px; }
  .lead { font-size: 17px; }
  .btn-lg { height: 52px; padding: 0 20px; font-size: 16px; }
  .cta-row .btn { flex: 1 1 auto; }
  .nav-r .lnk, .nav-r .lang { display: none; }
  .nav-in { gap: 10px; }
  .nav-r .btn { height: 42px; padding: 0 14px; font-size: 14px; }
  .stage { height: auto; padding-top: 6px; display: flex; flex-direction: column; align-items: center; }
  .stage-bg { left: 0; top: 50px; bottom: 60px; }
  .stage-ring, .stage-ring2 { display: none; }
  .phone { position: relative; right: auto; top: auto; width: 290px; height: 524px; }
  .toast { left: 50%; top: 24px; width: 290px; margin-left: -145px; }
  .tlist { position: relative; left: auto; top: auto; width: 100%; margin-top: 16px; }
  .stage-ft { position: relative; left: auto; bottom: auto; min-height: 32px; margin-top: 14px; }   /* «Qayta» (.rep, 32px) chiqqanda siljimasin */
  .cap-g { grid-template-columns: minmax(0, 1fr); }
  .dev-b { height: 420px; padding: 14px; }
  .k-cell { font-size: 15px; }
  .price { padding: 24px; }
  .pr-amt b { font-size: 48px; }
  .form { padding: 22px; }
  .f-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ks-b { padding: 20px; }
  .ks-g.one { grid-template-columns: minmax(0, 1fr); }
  .biz-f { grid-template-columns: minmax(0, 1fr); }
  .tur-m { padding: 44px 16px 18px; }
  .big { font-size: 26px; }
}
/* ================= FON BELGISI + SCROLL («Chaqmoq izi») — FON-SCROLL-SPEC.md ================= */
/* Asos (base) = YAKUNIY holat: canvas (to'liq balandlik), reduced motion, eski brauzer — hammasi shuni ko'radi.
   Harakat FAQAT «jonli darvoza» ichida: @media screen and (max-height: 1799.98px) and (prefers-reduced-motion: no-preference) + .pg.fx
   (screen: chop/PDF eksportida fixed belgi har sahifada takrorlanmasin) */

html { scroll-padding-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html:has(.pg.rm) { scroll-behavior: auto; }

.pg { --brx: #16359f; timeline-scope: --t-kun, --t-cap, --t-tur, --t-biz, --t-narx; }
.pg main .wrap, .pg .foot .wrap { position: relative; z-index: 2; }
.fin { z-index: 2; }
.foot { position: relative; z-index: 2; }

/* --- 1. belgi: sahifa qatlami #zb + tasma qatlami #zb-fin (geometriyasi AYNI) --- */
.zb { position: absolute; inset: 0; z-index: 1; pointer-events: none; clip-path: inset(0); }
.zb-fin { display: none; }
/* JS rejimni (fx · still · rm) hal qilgunicha belgi ko'rinmaydi — `fx` ga o'tishda bir kadrlik «sakrash» bo'lmasin.
   JS'siz ko'rinishda belgi yo'q (bezak). */
.pg:not(.fx):not(.still):not(.rm) .zb { visibility: hidden; }
.zb-mark { --S: min(66vh, 44vw, 640px); position: absolute; left: calc(var(--S) * -0.28); top: calc(min(54vh, 560px) - var(--S) / 2); width: var(--S); height: var(--S);
  transform: translateY(calc((1 - var(--zp, 1)) * 48px)) rotate(calc((1 - var(--zp, 1)) * -10deg)) scale(calc(1 + (1 - var(--zp, 1)) * 0.08)); }
.zb-in { position: absolute; inset: 0; }
.zb-glow { position: absolute; left: 12%; top: 12%; width: 76%; height: 76%; border-radius: 50%; background: radial-gradient(closest-side, rgba(42, 89, 237, 0.1), rgba(42, 89, 237, 0) 72%); opacity: var(--zg, 1); }
.zb-tile { position: absolute; inset: 0; border-radius: 29.3%; background: linear-gradient(135deg, rgba(42, 89, 237, 0.085) 0%, rgba(42, 89, 237, 0.03) 55%, rgba(42, 89, 237, 0.008) 100%); }
.zb-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.zb-svg path { fill: none; stroke-width: 1.95; stroke-linecap: round; stroke-linejoin: round; }
.zb-gh { stroke: #ffffff; }
.zb-ch { opacity: 0.15; }
.zb-s { stroke: var(--br); stroke-dasharray: 100; stroke-dashoffset: 0; }
.zb-s3 { stroke-dashoffset: calc((1 - var(--z3, 1)) * 100); opacity: calc(var(--z3, 1) * 40); }
.zb-s4 { stroke-dashoffset: calc((1 - var(--z4, 1)) * 100); opacity: calc(var(--z4, 1) * 40); }
.zb-s5 { stroke-dashoffset: calc((1 - var(--z5, 1)) * 100); opacity: calc(var(--z5, 1) * 40); }
.zb-s6 { stroke-dashoffset: calc((1 - var(--z6, 1)) * 100); opacity: calc(var(--z6, 1) * 40); }
.zb-fin .zb-tile { background: linear-gradient(135deg, rgba(22, 53, 159, 0.26) 0%, rgba(22, 53, 159, 0.1) 55%, rgba(22, 53, 159, 0.03) 100%); box-shadow: inset 0 0 0 1.5px rgba(22, 53, 159, 0.3); }
.zbw-b { stroke: var(--brx); stroke-opacity: 0.55; }
.fin-deco { border-radius: 29.3%; transform: rotate(-8deg); }
@media (max-width: 820px) { .zb-mark { --S: min(112vw, 500px); } }
@media (max-width: 640px) { .zb-pg { opacity: 0.7; } }

/* --- 2. nav: zaryad chizig'i --- */
.np { position: absolute; z-index: 3; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none; opacity: var(--zo, 0); }
.np-run { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(42, 89, 237, 0.22) calc(100% - 200px), var(--br) 100%); transform: translateX(calc((var(--zp, 0) - 1) * 100%)); }
.nav.menu-open .np { visibility: hidden; }

/* --- 3. #narx relsi (asos yashirin = bugungi dizayn) --- */
.step { z-index: 1; }
.steps::after { content: ''; position: absolute; left: 25px; top: 30px; bottom: 30px; width: 2px; border-radius: 1px; background: var(--br); transform: scaleY(0); transform-origin: 50% 0; }
.st-n::before, .st-n::after { content: ''; position: absolute; inset: -1.5px; border-radius: inherit; pointer-events: none; opacity: 0; }
.st-n::before { box-shadow: 0 10px 20px -12px rgba(42, 89, 237, 0.9); }
.st-n::after { box-shadow: 0 0 0 7px rgba(42, 89, 237, 0.18); }

/* --- 4. .cap hover tuzatish (.rv «both» to'ldirishi transform'ni yeb qo'yardi) --- */
.cap { transition: translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease; }
.cap:hover { transform: none; translate: 0 -4px; }

@keyframes zbIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes zbDraw { 0% { stroke-dashoffset: 100; opacity: 0; } 2% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes zbTurn { from { transform: translateY(48px) rotate(-10deg) scale(1.08); } to { transform: none; } }
@keyframes zbGlow { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes zNpShow { from { opacity: 0; } to { opacity: 1; } }
@keyframes zNpRun { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes zLag { from { transform: none; } to { transform: translateY(40px); } }
@keyframes zRail { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes zStep { 0%, 49.9% { background-color: #ffffff; color: var(--brd); border-color: var(--sky2); } 50%, 100% { background-color: var(--br); color: #ffffff; border-color: var(--br); } }
/* halqa → soya: box-shadow animatsiya qilinmaydi (har kadrda paint), ikki psevdo-qatlam faqat opacity bilan almashadi */
@keyframes zRing { from { opacity: 1; } to { opacity: 0; } }
@keyframes zShade { from { opacity: 0; } to { opacity: 1; } }
@keyframes zDeco { from { transform: rotate(-22deg) scale(0.9); } to { transform: rotate(-8deg); } }

/* ===== JONLI DARVOZA: oyna < 1800px VA harakat ruxsat VA .pg.fx (JS: not reduced, not still) ===== */
@media screen and (max-height: 1799.98px) and (prefers-reduced-motion: no-preference) {
  .pg.fx .zb-mark { position: fixed; top: calc(min(54svh, 560px) - var(--S) / 2); will-change: transform; }
  .pg.fx .zb-fin { display: block; }
  .pg.fx .zb-in { animation: zbIn 1.4s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .pg.fx .zb-s1 { animation: zbDraw 0.6s 0.9s cubic-bezier(0.5, 0, 0.9, 0.5) both; }
  .pg.fx .zb-s2 { animation: zbDraw 0.6s 1.5s cubic-bezier(0.1, 0.5, 0.3, 1) both; }

  @supports (animation-timeline: scroll()) {
    .pg.fx .zb-mark { animation: zbTurn linear both; animation-timeline: scroll(root block); }
    .pg.fx .np { animation: zNpShow linear both; animation-timeline: scroll(root block); animation-range: 0px 120px; }
    .pg.fx .np-run { animation: zNpRun linear both; animation-timeline: scroll(root block); }
  }

  /* qirralar: har bob «zaryad chizig'i» (oyna balandligining 55%) dan o'tayotganda bitta qirra chiziladi */
  @supports (animation-timeline: view()) and (timeline-scope: none) and (view-timeline-inset: 0px) {
    #kun { view-timeline: --t-kun block; view-timeline-inset: 55% 45%; }
    #imkoniyatlar { view-timeline: --t-cap block; view-timeline-inset: 55% 45%; }
    #turlar { view-timeline: --t-tur block; view-timeline-inset: 55% 45%; }
    #biz { view-timeline: --t-biz block; view-timeline-inset: 55% 45%; }
    #narx { view-timeline: --t-narx block; view-timeline-inset: 55% 45%; }
    .pg.fx .zb-s3 { animation: zbDraw linear both; animation-timeline: --t-kun; animation-range: cover 0% cover 100%; }
    .pg.fx .zb-s4 { animation: zbDraw linear both; animation-timeline: --t-cap; animation-range: cover 0% cover 100%; }
    .pg.fx .zb-s5 { animation: zbDraw linear both; animation-timeline: --t-tur; animation-range: cover 0% cover 100%; }
    .pg.fx .zb-s6 { animation: zbDraw linear both; animation-timeline: --t-biz; animation-range: cover 0% cover 100%; }
    .pg.fx .zb-glow { animation: zbGlow linear both; animation-timeline: --t-narx; animation-range: cover 0% cover 60%; }
  }

  @supports (animation-timeline: view()) and (view-timeline-inset: 0px) {
    #hero { view-timeline: --t-hero block; }
    .pg.fx .stage { animation: zLag linear both; animation-timeline: --t-hero; animation-range: exit 0% exit 100%; }
    .steps { view-timeline: --t-steps block; view-timeline-inset: 55% 45%; }
    .pg.fx .steps::after { animation: zRail linear both; animation-timeline: --t-steps; animation-range: cover 30px cover calc(100% - 30px); }
    .pg.fx .step .st-n { view-timeline: --t-stn block; view-timeline-inset: 55% 45%; animation: zStep linear both; animation-timeline: --t-stn; animation-range: cover 0% cover 100%; }
    .pg.fx .step .st-n::before { animation: zShade linear both; animation-timeline: --t-stn; animation-range: cover 50% cover calc(50% + 160px); }
    .pg.fx .step .st-n::after { animation: zRing linear forwards; animation-timeline: --t-stn; animation-range: cover 50% cover calc(50% + 160px); }
    .fin { view-timeline: --t-fin block; }
    .pg.fx .fin-deco { animation: zDeco linear both; animation-timeline: --t-fin; animation-range: entry 0% entry 100%; }
  }
}
/* reduced motion / «Kamaytirilgan» (.rm) / canvas: yuqoridagi darvoza ochilmaydi → asos = yakuniy holat.
   (Mavjud `.rm *` va `@media (prefers-reduced-motion: reduce) .pg *` qoidalari ham animation:none !important beradi.) */
/* ================= /FON BELGISI ================= */