/* Gulnoza — ochiq sahifa (domen ildizi va /yuklab/). «Davlat ongi» dizayn tili — vaziyat markazi bilan bir xil:
   tun ko'k, oltin — asosiy urg'u, firuza — faqat jonli holat. Shrift — faqat Ong Sans (Geologica, 100–800):
   serif rad etildi («jiddiy emas, innovatsiyani bildirmaydi») — sarlavha 500, matn 300–400, raqam 300. Bosh ekranda vaziyat markazining O'Z yadrosi (ong.js, WebGL).
   Harakat: faqat transform/opacity (xarita chizilishi va paket oqimidan tashqari); kirish animatsiyalari
   «backwards» — tugagach hover/bosim effektlarini qulflamaydi; ko'rinmagan bo'lim to'xtaydi;
   prefers-reduced-motion — hammasi o'chadi. Tashqi manba yo'q: shrift, skript, rasm — shu serverdan. */
:root {
  --tun: #060A17; --tun2: #0A1128; --tun3: #111B3C; --tun4: #172350;
  --oq: #F2F3F8; --kul: #9AA3C4; --kul2: #7480A8;
  --oltin: #E5B866; --shula: #FFE8BE; --firuza: #4CD6C8; --qizil: #FF6B5B;
  --chiziq: rgba(154,163,196,.14); --chiziq2: rgba(229,184,102,.28);
  --sans: "Ong Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --serif: "Ong Serif", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", Menlo, monospace;
  --e: cubic-bezier(.16,1,.3,1); --e2: cubic-bezier(.2,.7,.2,1);
  --kenglik: 1240px; --ust: 76px;
  --naqsh: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'><g fill='none' stroke='%23E5B866' stroke-width='.6'><path d='M50 20 L80 50 L50 80 L20 50Z'/><rect x='28.8' y='28.8' width='42.4' height='42.4'/><path d='M50 0V20M100 50H80M50 100V80M0 50H20M0 0L28.8 28.8M100 0L71.2 28.8M100 100L71.2 71.2M0 100L28.8 71.2'/><circle cx='50' cy='50' r='5'/></g></svg>");
  --don: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ust) + 8px); background: var(--tun); }
body { margin: 0; background: var(--tun); color: var(--oq); font: 400 16px/1.65 var(--sans); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal; font-variant-numeric: lining-nums; }
::selection { background: rgba(229,184,102,.32); color: #fff; }
a { color: var(--oltin); }
:focus-visible { outline: 2px solid var(--oltin); outline-offset: 3px; border-radius: 6px; }
img, svg { display: block; }
.kenglik { position: relative; max-width: var(--kenglik); margin: 0 auto; padding: 0 28px; }
.yashirin-matn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── ochilish: bo'lim ko'rinishga kelganda «yig'iladi» (kiosk tamoyili). JS yo'q bo'lsa — hammasi ko'rinadi ── */
@keyframes ochil { from { opacity: 0; transform: translate3d(0, 30px, 0); } }
@keyframes ochil-chap { from { opacity: 0; transform: translate3d(-40px, 0, 0); } }
@keyframes ochil-ong { from { opacity: 0; transform: translate3d(40px, 0, 0); } }
@keyframes ochil-kichik { from { opacity: 0; transform: scale(.94); } }
@keyframes ochil-oddiy { from { opacity: 0; } }
html.js [data-o]:not(.ochildi) { opacity: 0; }
[data-o].ochildi { animation: ochil 1.1s var(--e) backwards; animation-delay: calc(var(--i, 0) * 95ms); }
[data-o="chap"].ochildi { animation-name: ochil-chap; }
[data-o="ong"].ochildi { animation-name: ochil-ong; }
[data-o="kichik"].ochildi { animation-name: ochil-kichik; }
/* ko'rinmagan bo'limda cheksiz animatsiyalar to'xtaydi */
.korinmas, .korinmas * { animation-play-state: paused !important; }

/* ── tugmalar ── */
.tugma { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 24px;
  border: 0; border-radius: 12px; cursor: pointer; text-decoration: none; white-space: nowrap; overflow: hidden; isolation: isolate;
  font: 500 15px/1.1 var(--sans); letter-spacing: .01em; transition: transform .45s var(--e), box-shadow .45s var(--e), background .45s; }
.tugma svg { width: 18px; height: 18px; flex: none; }
.tugma.oltin { color: #1B1305; background: linear-gradient(180deg, #F4D89C 0%, #E5B866 50%, #CB9C4D 100%);
  box-shadow: inset 0 0 0 1px rgba(255,236,200,.45), inset 0 1px 0 rgba(255,255,255,.5), 0 14px 34px -14px rgba(229,184,102,.75); }
.tugma.oltin::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.62) 50%, transparent 70%); transition: transform 1s var(--e); }
.tugma.oltin:hover::before { transform: translateX(130%); }
.tugma.oltin:hover { box-shadow: inset 0 0 0 1px rgba(255,236,200,.6), inset 0 1px 0 rgba(255,255,255,.5), 0 20px 46px -14px rgba(229,184,102,.9); }
.tugma.shisha { color: var(--oq); background: rgba(21,31,66,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(229,184,102,.34), inset 0 1px 0 rgba(255,240,214,.06); }
.tugma.shisha svg { color: var(--oltin); }
.tugma.shisha:hover { background: rgba(229,184,102,.08); box-shadow: inset 0 0 0 1px rgba(229,184,102,.75), 0 0 36px -8px rgba(229,184,102,.4); }
.tugma:hover { transform: translateY(-2px); }
.tugma:active { transform: translateY(0) scale(.97); transition-duration: .12s; }
.tugma.katta { padding: 17px 28px; border-radius: 14px; gap: 14px; }
.tugma.katta > span { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.tugma.katta .t { font: 500 16px/1.1 var(--sans); }
.tugma.katta small { font: 400 12px/1 var(--sans); letter-spacing: .02em; opacity: .74; }
.tugma.kichik { padding: 10px 16px; border-radius: 10px; font-size: 14px; gap: 9px; }
.tugma.kichik svg { width: 16px; height: 16px; }

/* ── gerb (vaziyat markazi belgisi) ── */
.gerb { overflow: visible; }

/* ── skroll chizig'i va yuqori qator ── */
.progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 90; pointer-events: none; }
.progress i { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(229,184,102,0), var(--oltin) 35%, var(--shula)); }
.ust { position: fixed; top: 0; left: 0; right: 0; z-index: 80; transition: background .5s, -webkit-backdrop-filter .5s, backdrop-filter .5s; }
.ust::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; transform: scaleX(0); transition: transform 1.2s var(--e);
  background: linear-gradient(90deg, rgba(229,184,102,0), rgba(229,184,102,.5) 20%, rgba(229,184,102,.5) 80%, rgba(229,184,102,0)); }
.ust.toldi { background: rgba(6,10,23,.74); -webkit-backdrop-filter: saturate(1.3) blur(18px); backdrop-filter: saturate(1.3) blur(18px); }
.ust.toldi::after { transform: none; }
.ust .kenglik { height: var(--ust); display: flex; align-items: center; gap: 18px; }
.brend { display: flex; align-items: center; gap: 14px; color: var(--oq); text-decoration: none; }
.brend .gerb { width: 40px; height: 40px; flex: none; }
.brend b { display: block; font: 600 20px/1.05 var(--sans); letter-spacing: -.02em; }
.brend small { display: block; margin-top: 5px; font: 500 10.5px/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--kul); }
.ust nav { margin-left: auto; display: flex; gap: 2px; }
.ust nav a { position: relative; padding: 10px 13px; font: 400 14px/1 var(--sans); color: var(--kul); text-decoration: none; transition: color .3s; }
.ust nav a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 1px; background: var(--oltin);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--e); }
.ust nav a:hover { color: var(--oq); }
.ust nav a:hover::after { transform: none; }
.ust .tugma { margin-left: 10px; }
.menyu { display: none; position: relative; width: 44px; height: 44px; margin-left: 6px; border: 0; border-radius: 12px; cursor: pointer;
  background: rgba(21,31,66,.5); color: var(--oq); box-shadow: inset 0 0 0 1px var(--chiziq2); }
.menyu i, .menyu i::before, .menyu i::after { position: absolute; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .45s var(--e), background .3s; }
.menyu i { left: 13px; right: 13px; top: 21px; }
.menyu i::before, .menyu i::after { content: ""; left: 0; right: 0; }
.menyu i::before { top: -6px; }
.menyu i::after { top: 6px; }
.ust.ochiq .menyu i { background: transparent; }
.ust.ochiq .menyu i::before { transform: translateY(6px) rotate(45deg); }
.ust.ochiq .menyu i::after { transform: translateY(-6px) rotate(-45deg); }

/* ── kirish: gerb yig'iladi (sessiyada bir marta; JS ishlamasa ham 2,1 s da o'zi ketadi) ── */
#kirish { display: none; }
html.kirish-bor #kirish { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(900px 640px at 50% 46%, #0F1938 0%, #070B1A 62%, #05080F 100%);
  animation: kirish-ket .8s var(--e2) 2.1s forwards; }
html.kirish-ketdi #kirish { animation: kirish-ket .8s var(--e2) forwards; }
@keyframes kirish-ket { to { opacity: 0; visibility: hidden; } }
#kirish::before { content: ""; position: absolute; inset: 0; opacity: .06; background-image: var(--naqsh); background-size: 120px;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, transparent 18%, #000 70%); mask-image: radial-gradient(circle at 50% 46%, transparent 18%, #000 70%); }
#kirish .k-ich { position: relative; display: grid; justify-items: center; gap: 26px; transition: transform 1s var(--e); }
html.kirish-ketdi #kirish .k-ich { transform: scale(1.12); }
#kirish .gerb { width: 136px; height: 136px; }
#kirish .g-n { transform-box: fill-box; transform-origin: center; animation: g-nuqta .55s var(--e) both; animation-delay: calc(.08s + var(--i) * 30ms); }
@keyframes g-nuqta { from { opacity: 0; transform: scale(0); } }
#kirish .g-y { stroke-dasharray: 1; stroke-dashoffset: 1; animation: chiz 1.05s var(--e2) .42s forwards; }
#kirish .g-m { transform-box: fill-box; transform-origin: center; animation: g-nuqta .7s var(--e) 1.05s both; }
#kirish .k-shula { position: absolute; left: 50%; top: 68px; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(229,184,102,.22), rgba(229,184,102,0) 70%); animation: ochil-oddiy 1.4s var(--e) .6s backwards; }
#kirish .k-nom { font: 300 13px/1 var(--sans); letter-spacing: .62em; text-indent: .62em; text-transform: uppercase; color: var(--shula);
  animation: ochil 1s var(--e) .75s backwards; }
@keyframes chiz { to { stroke-dashoffset: 0; } }

/* ── qahramon: vaziyat markazining o'z yadrosi ── */
/* --joy (yadro o'lchami) va --jx/--jy (markazi) qahramonda e'lon qilinadi — sahna ham, matn ustuni ham ularga tayanadi */
.qahramon { --joy: min(46vw, 640px, 84svh); --jx: 71.5%; --jy: 50%;
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate;
  background: radial-gradient(1200px 820px at 70% 46%, #111C42 0%, #0A1128 44%, #060A17 100%); }
.qahramon::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .045; background-image: var(--don); }
.qahramon::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: 4; pointer-events: none;
  background: linear-gradient(to top, var(--tun), rgba(6,10,23,0)); }
#sahna { position: absolute; inset: 0; z-index: 1; }
#sahna .naqsh { position: absolute; inset: 0; pointer-events: none; opacity: .065; background-image: var(--naqsh); background-size: 120px 120px;
  -webkit-mask-image: radial-gradient(ellipse 58% 70% at var(--jx) var(--jy), transparent 44%, #000 100%);
  mask-image: radial-gradient(ellipse 58% 70% at var(--jx) var(--jy), transparent 44%, #000 100%); }
#ekran-joy, #ekran-joy .ekran { position: absolute; inset: 0; }
canvas.ong { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.ong-joy { position: absolute; pointer-events: none; width: var(--joy); height: var(--joy);
  left: calc(var(--jx) - var(--joy) / 2); top: calc(var(--jy) - var(--joy) / 2); }
.ong-shula { position: absolute; border-radius: 50%; pointer-events: none; opacity: .8; transition: opacity 1.2s, background 1.2s;
  background: radial-gradient(closest-side, rgba(229,184,102,.22), rgba(229,184,102,.07) 42%, rgba(229,184,102,0) 70%); }
.ong-shula[data-h="gapirmoqda"], .ong-shula[data-h="oylash"] { opacity: 1; }
.ong-shula[data-h="eshitish"] { opacity: .95; background: radial-gradient(closest-side, rgba(76,214,200,.18), rgba(76,214,200,.05) 42%, rgba(76,214,200,0) 70%); }
.usturlob { position: absolute; pointer-events: none; opacity: 0; animation: usturlob-kirish 2.4s ease-out .5s forwards; }
.usturlob svg { width: 100%; height: 100%; display: block; animation: aylan 240s linear infinite; }
@keyframes aylan { to { transform: rotate(360deg); } }
@keyframes usturlob-kirish { to { opacity: 1; } }
.ong-raqam { display: none; }

/* muloqot: yadro ostida, kiosk «ayt» uslubida */
.suhbat { position: absolute; z-index: 3; width: 560px; left: calc(var(--jx) - 280px); top: calc(var(--jy) + var(--joy) * .36);
  display: grid; justify-items: center; gap: 14px; text-align: center; animation: ochil 1.2s var(--e) 1s backwards; }
html.kirish-bor .suhbat { animation-delay: 2.2s; }
.holat { display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 14px 0 12px; border-radius: 15px; white-space: nowrap;
  font: 500 12.5px/1 var(--sans); color: var(--kul); background: rgba(6,10,23,.45); box-shadow: inset 0 0 0 1px var(--chiziq);
  transition: color .4s, box-shadow .4s; }
.holat i { width: 7px; height: 7px; border-radius: 50%; background: #59648C; transition: background .4s, box-shadow .4s; }
.holat[data-h="gapirmoqda"], .holat[data-h="oylash"] { color: var(--shula); box-shadow: inset 0 0 0 1px var(--chiziq2); }
.holat[data-h="gapirmoqda"] i { background: var(--oltin); box-shadow: 0 0 10px rgba(229,184,102,.8); animation: nafas 1.6s ease-in-out infinite; }
.holat[data-h="oylash"] i { background: var(--oltin); animation: nafas .5s ease-in-out infinite; }
.holat[data-h="eshitish"] { color: var(--firuza); box-shadow: inset 0 0 0 1px rgba(76,214,200,.4); }
.holat[data-h="eshitish"] i { background: var(--firuza); box-shadow: 0 0 10px rgba(76,214,200,.8); animation: nafas .9s ease-in-out infinite; }
@keyframes nafas { 50% { opacity: .35; } }
.ayt .kim { display: block; font: 500 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--oltin); transition: color .4s; }
.ayt .kim.hokim { color: var(--firuza); }
.ayt p { margin: 12px 0 0; min-height: 2.72em; font: 300 clamp(18px, 1.7vw, 25px)/1.36 var(--sans); letter-spacing: -.012em; color: var(--oq);
  text-shadow: 0 0 24px rgba(6,10,23,.95), 0 0 3px rgba(6,10,23,.7); text-wrap: balance; }
.ayt p.tinch { color: var(--kul); }
.ayt p.terilmoqda::after { content: ""; display: inline-block; width: 2px; height: .92em; margin-left: 4px; vertical-align: -.12em;
  background: var(--oltin); animation: kursor 1s steps(1) infinite; }
@keyframes kursor { 50% { opacity: 0; } }

/* matn ustuni */
.q-ichki { position: relative; z-index: 5; min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  padding-top: calc(var(--ust) + 30px); padding-bottom: 120px; pointer-events: none; }
.q-matn { max-width: min(610px, 46vw); pointer-events: auto; }
.q-matn > * { animation: ochil 1.15s var(--e) backwards; animation-delay: calc(.25s + var(--i, 0) * 100ms); }
html.kirish-bor .q-matn > * { animation-delay: calc(1.55s + var(--i, 0) * 100ms); }
.q-matn > h1 { animation: none; }
.yorliq { display: inline-flex; align-items: center; gap: 12px; margin: 0; font: 500 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--shula); }
.yorliq i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--firuza); box-shadow: 0 0 0 4px rgba(76,214,200,.14), 0 0 14px rgba(76,214,200,.7); animation: nafas 2.4s ease-in-out infinite; }
h1.nom { display: flex; margin: 26px -.05em 20px; padding: .02em .05em .1em; overflow: hidden;
  font: 500 clamp(62px, 10vw, 164px)/.92 var(--sans); letter-spacing: -.055em; color: var(--oq); }
h1.nom .harf { display: inline-block; animation: harf 1.3s var(--e) backwards; animation-delay: calc(.3s + var(--i) * 65ms);
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F3F8 46%, #CDBF9E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.kirish-bor h1.nom .harf { animation-delay: calc(1.6s + var(--i) * 65ms); }
@keyframes harf { from { opacity: 0; transform: translate3d(0, 108%, 0) rotate(5deg); } }
.nom-chiziq { display: block; width: 140px; height: 1px; margin: 0 0 26px; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--oltin), rgba(229,184,102,0)); }
.q-matn > .nom-chiziq { animation-name: chiziq-osh; animation-duration: 1.6s; }
@keyframes chiziq-osh { from { transform: scaleX(0); } }
.lid { margin: 0 0 36px; max-width: 560px; font: 300 clamp(17px, 1.45vw, 20px)/1.65 var(--sans); color: #C6CCE0; }
.lid b { font-weight: 400; color: var(--oq); }
.harakatlar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 30px 0 0; padding: 0; list-style: none; font: 400 13px/1.4 var(--sans); color: var(--kul); }
.meta li { display: inline-flex; align-items: center; gap: 9px; }
.meta li::before { content: ""; width: 5px; height: 5px; transform: rotate(45deg); background: rgba(229,184,102,.55); }
.pastga { position: absolute; left: 50%; bottom: 26px; z-index: 6; display: grid; justify-items: center; gap: 12px; margin-left: -30px; width: 60px;
  color: var(--kul); text-decoration: none; font: 500 10.5px/1 var(--sans); letter-spacing: .26em; text-indent: .26em; text-transform: uppercase;
  animation: ochil-oddiy 1s ease 2s backwards; }
.pastga i { width: 1px; height: 46px; background: linear-gradient(var(--oltin), rgba(229,184,102,0)); transform-origin: top; animation: tomchi 2.4s var(--e2) infinite; }
@keyframes tomchi { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ── raqamlar va kafolatlar ── */
.raqamlar { position: relative; z-index: 2; padding: 30px 0 40px; }
.raqam-qator { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--chiziq); border-bottom: 1px solid var(--chiziq); }
.raqam { position: relative; padding: 38px 30px 36px; }
.raqam:first-child { padding-left: 0; }
.raqam + .raqam::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 1px; transform-origin: top;
  background: linear-gradient(rgba(229,184,102,0), rgba(229,184,102,.45), rgba(229,184,102,0)); }
.raqam.ochildi + .raqam::before, .raqam + .raqam.ochildi::before { animation: tik 1.4s var(--e) backwards; animation-delay: calc(var(--i, 0) * 95ms + .2s); }
@keyframes tik { from { transform: scaleY(0); } }
.raqam b { display: flex; align-items: baseline; gap: 12px; font: 300 clamp(56px, 6.2vw, 92px)/1 var(--sans); letter-spacing: -.05em; color: var(--oq); font-variant-numeric: lining-nums tabular-nums; }
.raqam b small { font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--oltin); }
.raqam p { margin: 16px 0 0; max-width: 250px; font-size: 14.5px; line-height: 1.6; color: var(--kul); }
.ishonch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; }
.ishonch .b { display: flex; gap: 16px; align-items: flex-start; }
.ik-d { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--oltin);
  background: radial-gradient(circle at 50% 30%, rgba(229,184,102,.16), rgba(229,184,102,0) 70%); box-shadow: inset 0 0 0 1px var(--chiziq2); }
.ik-d svg { width: 20px; height: 20px; }
.ishonch b { display: block; font: 500 15px/1.35 var(--sans); color: var(--oq); }
.ishonch span { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.55; color: var(--kul); }

/* ── bo'limlar ── */
section.bolim { position: relative; padding: 130px 0 30px; overflow-x: clip; }   /* clip — yopishgan (sticky) sahnani buzmaydi */
.bosh-qism { max-width: 780px; margin-bottom: 60px; }
.yorliq-sarl { display: inline-flex; align-items: center; gap: 14px; font: 500 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--oltin); }
.yorliq-sarl::before { content: ""; width: 40px; height: 1px; background: linear-gradient(90deg, rgba(229,184,102,0), var(--oltin)); }
.bosh-qism h2 { margin: 22px 0 20px; font: 500 clamp(36px, 4.6vw, 64px)/1.04 var(--sans); letter-spacing: -.042em; color: var(--oq); text-wrap: balance; }
.bosh-qism h2 em { font-style: normal; color: var(--oltin); }
.bosh-qism p { margin: 0; max-width: 640px; font: 300 18px/1.7 var(--sans); color: var(--kul); }
.bolim-nur { position: absolute; pointer-events: none; z-index: -1; width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(33,52,120,.35), rgba(33,52,120,0) 70%); }

/* ── varaq — shisha panel (kiosk dalil kartasi): qirra nuri kursorga ergashadi, ochilganda skan ── */
.varaq { position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; padding: 30px;
  background: linear-gradient(180deg, rgba(22,32,70,.74) 0%, rgba(12,19,44,.7) 100%);
  box-shadow: inset 0 1px 0 rgba(255,240,214,.05), inset 0 0 0 1px rgba(154,163,196,.12), 0 40px 80px -44px rgba(0,0,0,.8);
  transition: transform .6s var(--e), box-shadow .6s var(--e); }
.varaq::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(255,226,170,.85), rgba(229,184,102,.2) 40%, rgba(229,184,102,0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.varaq::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(640px circle at var(--mx, 50%) var(--my, 0%), rgba(229,184,102,.09), rgba(229,184,102,0) 45%); }
.varaq:hover::before, .varaq:hover::after { opacity: 1; }
.varaq:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,240,214,.07), inset 0 0 0 1px rgba(229,184,102,.22), 0 50px 90px -40px rgba(0,0,0,.85); }
.skan { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(255,232,190,0) 0, rgba(255,232,190,0) calc(100% - 70px), rgba(255,232,190,.07) calc(100% - 1px), rgba(255,232,190,.95) 100%); }
.ochildi .skan { animation: skan 1.5s var(--e2) .35s; }
@keyframes skan { 0% { transform: translateY(-100%); opacity: 0; } 14% { opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
.ik-q { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 26px; color: var(--oltin);
  background: radial-gradient(circle at 50% 30%, rgba(229,184,102,.18), rgba(229,184,102,0) 70%); box-shadow: inset 0 0 0 1px var(--chiziq2); }
.ik-q svg { width: 25px; height: 25px; }
.ik-q svg [pathLength] { stroke-dasharray: 1; }
.ochildi .ik-q svg [pathLength] { animation: ik-chiz 1.6s var(--e2) .35s backwards; }
@keyframes ik-chiz { from { stroke-dashoffset: 1; } }
.varaq h3 { margin: 0 0 12px; font: 500 21px/1.25 var(--sans); letter-spacing: -.022em; color: var(--oq); }
.varaq p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--kul); }

/* ── imkoniyatlar ── */
.bento { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.bento .katta { grid-column: span 2; grid-row: span 2; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 24px 34px;
  background: radial-gradient(700px 500px at 75% 60%, rgba(40,58,130,.35), rgba(40,58,130,0) 70%), linear-gradient(180deg, rgba(22,32,70,.8) 0%, rgba(10,16,38,.78) 100%); }
.bento .katta h3 { font-size: clamp(28px, 2.6vw, 36px); }
.kt-matn { display: flex; flex-direction: column; }
.chiplar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 26px; }
.chiplar span { padding: 7px 13px; border-radius: 99px; font: 500 12px/1 var(--sans); letter-spacing: .02em; color: var(--shula);
  background: rgba(229,184,102,.07); box-shadow: inset 0 0 0 1px var(--chiziq2); }
.bento .katta .xarita { position: relative; min-height: 320px; }
.bento .katta .xarita svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* xarita: chegaralar chizilib chiqadi, viloyat markazidan tumanlarga axborot oqimi */
.xarita svg { overflow: visible; }
.xarita.qayta, .xarita.qayta * { transition: none !important; animation: none !important; }
.xarita .vil { fill: rgba(154,163,196,.05); stroke: rgba(229,184,102,.6); stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.xarita .tum { fill: none; stroke: rgba(154,163,196,.42); stroke-width: 1.3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.xarita .ajr { fill: rgba(229,184,102,.16); fill-opacity: 0; stroke: var(--oltin); stroke-width: 2.6; }
.xarita.chizildi .vil, .xarita.chizildi .tum { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s var(--e2); transition-delay: calc(var(--i, 0) * 85ms); }
.xarita.chizildi .ajr { fill-opacity: 1; transition: stroke-dashoffset 2.4s var(--e2), fill-opacity 1.2s ease 1.5s; }
.xarita .yol { fill: none; stroke: rgba(229,184,102,.14); stroke-width: 1.2; stroke-dasharray: 3 6; opacity: 0; }
.xarita .paket { fill: none; stroke: var(--shula); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 4 96; stroke-dashoffset: 100; opacity: 0; }
.xarita.chizildi .yol { opacity: 1; transition: opacity 1s ease 1.4s; }
.xarita.chizildi .paket { opacity: .95; transition: opacity 1s ease 1.8s; animation: paket 3s linear infinite; animation-delay: calc(var(--i, 0) * -.43s); }
@keyframes paket { to { stroke-dashoffset: 0; } }
.xarita .tn { fill: var(--firuza); opacity: 0; }
.xarita.chizildi .tn { opacity: 1; transition: opacity .8s ease; transition-delay: calc(1.2s + var(--i, 0) * 80ms); }
.xarita .hub { fill: var(--shula); opacity: 0; }
.xarita .hub-h, .xarita .halqa { fill: none; stroke: var(--oltin); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.xarita.chizildi .hub { opacity: 1; transition: opacity .6s ease 1s; }
.xarita.chizildi .hub-h, .xarita.chizildi .halqa { animation: halqa 2.8s var(--e2) 1.2s infinite; }
@keyframes halqa { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.8); opacity: 0; } }
.xarita .nuqta { fill: var(--oltin); opacity: 0; }
.xarita.chizildi .nuqta { opacity: 1; transition: opacity .6s ease 1.6s; }

/* ── lenta: vaziyat markazi ekranlari ── */
.lenta { position: relative; margin-top: 110px; padding: 44px 0; overflow: hidden; border-top: 1px solid var(--chiziq); border-bottom: 1px solid var(--chiziq);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.lenta-sarl { text-align: center; margin-bottom: 26px; }
.lenta-qator { display: flex; width: max-content; animation: lenta 70s linear infinite; }
.lenta-qator + .lenta-qator { margin-top: 14px; animation-direction: reverse; animation-duration: 84s; }
.lenta-qator span { display: inline-flex; align-items: center; gap: 30px; padding-right: 30px; white-space: nowrap;
  font: 300 clamp(26px, 3.2vw, 44px)/1.15 var(--sans); letter-spacing: -.035em; color: var(--oq); }
.lenta-qator + .lenta-qator span { color: rgba(154,163,196,.55); }
.lenta-qator span::after { content: ""; width: 9px; height: 9px; transform: rotate(45deg); background: var(--oltin); box-shadow: 0 0 12px rgba(229,184,102,.7); }
.lenta:hover .lenta-qator { animation-play-state: paused; }
@keyframes lenta { to { transform: translate3d(-50%, 0, 0); } }

/* ── qanday ishlaydi: yopishgan sahna, qadamlar skroll bilan almashadi ── */
.hikoya { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); column-gap: 72px; }
.hikoya-vizual { grid-column: 2; grid-row: 1 / span 4; }
.hikoya-qadam { grid-column: 1; position: relative; min-height: 76vh; display: flex; flex-direction: column; justify-content: center;
  padding: 40px 0 40px 36px; opacity: .3; transition: opacity .7s var(--e); }
.hikoya-qadam::before, .hikoya-qadam::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; }
.hikoya-qadam::before { background: var(--chiziq); }
.hikoya-qadam::after { background: linear-gradient(var(--oltin), var(--shula)); transform: scaleY(0); transform-origin: top; transition: transform 1.1s var(--e); }
.hikoya-qadam.faol, .hikoya-qadam.otdi { opacity: 1; }
.hikoya-qadam.otdi { opacity: .55; }
.hikoya-qadam.faol::after, .hikoya-qadam.otdi::after { transform: none; }
.hikoya-qadam .rb { font: 500 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--oltin); }
.hikoya-qadam h3 { margin: 18px 0 16px; font: 500 clamp(28px, 3vw, 42px)/1.12 var(--sans); letter-spacing: -.038em; }
.hikoya-qadam p { margin: 0; max-width: 470px; font: 300 17.5px/1.7 var(--sans); color: var(--kul); }
.panel { position: sticky; top: calc(50vh - 270px); height: 540px; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: radial-gradient(600px 420px at 50% 40%, rgba(40,58,130,.45), rgba(40,58,130,0) 70%), linear-gradient(180deg, #111A3C 0%, #0A1130 100%);
  box-shadow: inset 0 1px 0 rgba(255,240,214,.06), inset 0 0 0 1px rgba(229,184,102,.22), 0 60px 120px -50px rgba(0,0,0,.9); }
.panel::before { content: ""; position: absolute; inset: 0; opacity: .05; background-image: var(--naqsh); background-size: 90px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 55%, transparent 35%, #000 100%); mask-image: radial-gradient(ellipse at 50% 55%, transparent 35%, #000 100%); }
.panel-bosh { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 18px 22px;
  border-bottom: 1px solid var(--chiziq); font: 500 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--kul); }
.panel-bosh .gerb { width: 22px; height: 22px; }
.panel-bosh .holat { margin-left: auto; letter-spacing: 0; text-transform: none; }
.v { position: absolute; left: 0; right: 0; top: 58px; bottom: 0; display: grid; place-items: center; padding: 24px 30px 30px;
  opacity: 0; visibility: hidden; transform: translate3d(0, 26px, 0) scale(.985); transition: opacity .7s var(--e), transform .9s var(--e), visibility 0s .9s; }
.panel[data-b="1"] .v1, .panel[data-b="2"] .v2, .panel[data-b="3"] .v3, .panel[data-b="4"] .v4 { opacity: 1; visibility: visible; transform: none; transition-delay: .12s, .12s, 0s; }
/* 1 — ovoz to'lqini */
.tolqin { display: flex; align-items: center; justify-content: center; gap: 5px; height: 150px; }
.tolqin i { width: 4px; height: 100%; border-radius: 4px; background: linear-gradient(var(--firuza), rgba(76,214,200,.2)); transform: scaleY(.12); }
.panel[data-b="1"] .tolqin i { animation: tolqin var(--d) ease-in-out infinite alternate; animation-delay: var(--t); }
@keyframes tolqin { from { transform: scaleY(.1); } to { transform: scaleY(var(--k)); } }
.v1-ich, .v2-ich { width: 100%; display: grid; justify-items: center; gap: 30px; text-align: center; }
.buyruq-matn { min-height: 2.8em; max-width: 440px; font: 300 23px/1.4 var(--sans); letter-spacing: -.012em; color: var(--oq); }
.buyruq-matn.terilmoqda::after { content: ""; display: inline-block; width: 2px; height: .9em; margin-left: 4px; vertical-align: -.12em; background: var(--firuza); animation: kursor 1s steps(1) infinite; }
.mayda { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--kul); }
/* 2 — matnga aylanish */
.sozlar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 460px; }
.sozlar span { padding: 10px 16px; border-radius: 10px; font: 400 18px/1.2 var(--sans); letter-spacing: -.01em; color: var(--oq); background: rgba(6,10,23,.5);
  box-shadow: inset 0 0 0 1px var(--chiziq2); opacity: 0; transform: translate3d(0, 14px, 0); }
.panel[data-b="2"] .sozlar span { opacity: 1; transform: none; transition: opacity .6s var(--e), transform .8s var(--e); transition-delay: calc(.25s + var(--i) * 240ms); }
.server-qator { width: min(420px, 100%); display: grid; gap: 12px; }
.server-qator .yozuv { display: flex; align-items: center; gap: 10px; justify-content: center; font-size: 14px; color: var(--kul); }
.server-qator .yozuv svg { width: 18px; height: 18px; color: var(--oltin); }
.jarayon { height: 2px; border-radius: 2px; background: var(--chiziq); overflow: hidden; }
.jarayon i { display: block; height: 100%; background: linear-gradient(90deg, var(--oltin), var(--shula)); transform: scaleX(0); transform-origin: 0 50%; }
.panel[data-b="2"] .jarayon i { transform: none; transition: transform 1.8s var(--e2) .3s; }
/* 3 — javob xaritada */
.v3 .xarita { width: 100%; height: 100%; position: relative; }
.v3 .xarita svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.v3-yorliq { position: absolute; left: 30px; bottom: 26px; z-index: 2; display: grid; gap: 6px; }
.v3-yorliq b { font: 500 22px/1.1 var(--sans); letter-spacing: -.025em; color: var(--oq); }
/* 4 — topshiriq ijroda */
.tel { position: relative; width: 250px; height: 430px; padding: 10px; border-radius: 36px;
  background: linear-gradient(145deg, #2A3142, #0B0E16 60%); box-shadow: 0 50px 90px -40px rgba(0,0,0,.9), inset 0 0 0 1.5px rgba(255,255,255,.08); }
.tel::before { content: ""; position: absolute; top: 18px; left: 50%; width: 76px; height: 6px; margin-left: -38px; border-radius: 99px; background: #05070C; z-index: 2; }
.tel-ekran { position: relative; height: 100%; overflow: hidden; border-radius: 28px; padding: 40px 14px 14px; display: flex; flex-direction: column; gap: 10px;
  background: radial-gradient(300px 260px at 50% 0%, #17224D, #0B1230 70%); }
.bildirish { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 14px; background: rgba(242,243,248,.1);
  box-shadow: inset 0 0 0 1px rgba(242,243,248,.12); opacity: 0; transform: translate3d(0, -130%, 0); }
.bildirish .gerb { width: 26px; height: 26px; flex: none; }
.bildirish b { display: block; font: 500 12.5px/1.25 var(--sans); }
.bildirish span { display: block; font-size: 11px; color: var(--kul); }
.panel[data-b="4"] .bildirish { opacity: 1; transform: none; transition: opacity .6s var(--e) .35s, transform .9s var(--e) .35s; }
.vazifa { padding: 14px; border-radius: 16px; background: rgba(6,10,23,.55); box-shadow: inset 0 0 0 1px var(--chiziq2); opacity: 0; transform: translate3d(0, 20px, 0); }
.panel[data-b="4"] .vazifa { opacity: 1; transform: none; transition: opacity .7s var(--e) .75s, transform .9s var(--e) .75s; }
.vazifa > b { display: block; font: 500 14px/1.3 var(--sans); margin-bottom: 12px; }
.bosqich { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 12.5px; color: var(--kul); }
.bosqich i { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--chiziq2); }
.bosqich.tayyor { color: var(--oq); }
.bosqich.tayyor i { background: var(--oltin); box-shadow: none; }
.bosqich.tayyor i::after { content: ""; position: absolute; left: 6px; top: 3.5px; width: 4px; height: 8px; border: solid #1B1305; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.bosqich.jarayonda { color: var(--oq); }
.bosqich.jarayonda i { box-shadow: inset 0 0 0 1.5px var(--oltin); }
.bosqich.jarayonda i::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--oltin); animation: nafas 1.2s ease-in-out infinite; }
.ijro { margin-top: 10px; height: 4px; border-radius: 4px; background: var(--chiziq); overflow: hidden; }
.ijro i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--oltin), var(--shula)); transform: scaleX(0); transform-origin: 0 50%; }
.panel[data-b="4"] .ijro i { transform: scaleX(.62); transition: transform 1.8s var(--e2) 1.2s; }

/* ── yuklab olish ── */
.yuklab-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.yon { display: grid; gap: 20px; }
.m-bosh { display: flex; gap: 20px; align-items: flex-start; }
.quti { flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: var(--oltin);
  background: radial-gradient(circle at 50% 30%, rgba(229,184,102,.2), rgba(229,184,102,0) 70%); box-shadow: inset 0 0 0 1px rgba(229,184,102,.4); }
.quti svg { width: 26px; height: 26px; }
.mahsulot h3 { margin: 4px 0 10px; font-size: 26px; }
.tavsif { margin: 0; color: var(--kul); font-size: 15px; line-height: 1.7; }
.tavsif b { color: var(--oq); font-weight: 500; }
.belgilar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.belgilar span { padding: 6px 12px; border-radius: 99px; font: 500 12px/1.25 var(--sans); color: var(--shula); background: rgba(229,184,102,.07); box-shadow: inset 0 0 0 1px var(--chiziq2); }
/* uch dastur: raqamli yorliq, «login so'raydi» belgisi, tugmalar qatori, o'rnatish izohi */
.raqam-teg { display: block; margin: 2px 0 2px; font: 500 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--oltin); }
.belgilar span.qulf { display: inline-flex; align-items: center; gap: 7px; color: #1B1305; background: linear-gradient(180deg, #F4D89C, #E5B866);
  box-shadow: inset 0 0 0 1px rgba(255,236,200,.5); }
.belgilar span.qulf svg { width: 13px; height: 13px; }
.tugmalar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.tugmalar .tugma { flex: 1 1 200px; }
.ornat-izoh { margin: 14px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--kul); }
.ornat-izoh b { color: var(--oq); font-weight: 500; }
.apklar { margin-top: 26px; display: grid; gap: 12px; }
.apk { display: grid; grid-template-columns: 1fr auto auto; gap: 10px 18px; align-items: center; padding: 16px 18px; border-radius: 14px;
  background: rgba(6,10,23,.42); box-shadow: inset 0 0 0 1px var(--chiziq); transition: box-shadow .5s, background .5s; }
.apk.mos { background: linear-gradient(180deg, rgba(229,184,102,.1), rgba(229,184,102,.02)); box-shadow: inset 0 0 0 1px rgba(229,184,102,.7), 0 0 46px -12px rgba(229,184,102,.45); }
.apk-nom b { font: 500 16px/1.3 var(--sans); color: var(--oq); }
.mos-teg { display: none; margin-left: 10px; padding: 4px 9px; border-radius: 99px; vertical-align: 2px; font: 600 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #1B1305; background: var(--oltin); }
.apk.mos .mos-teg { display: inline-block; }
.apk-nom .iz { display: block; margin-top: 4px; font-size: 13.5px; color: var(--kul); }
.apk-olcham { font: 400 14px/1 var(--sans); color: var(--kul); white-space: nowrap; font-variant-numeric: tabular-nums; }
.xesh { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-width: 0; font: 400 11.5px/1.4 var(--mono); color: var(--kul2); }
.xesh > span { white-space: nowrap; }
.xesh code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--kul); }
.nusxa { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--oltin); font: 500 12px/1 var(--sans); box-shadow: inset 0 0 0 1px var(--chiziq2); transition: background .3s, color .3s, box-shadow .3s; }
.nusxa:hover { background: rgba(229,184,102,.1); }
.nusxa svg { width: 13px; height: 13px; }
.nusxa.olindi { color: var(--firuza); box-shadow: inset 0 0 0 1px rgba(76,214,200,.5); }
.eslatma { display: flex; gap: 14px; margin-top: 22px; padding: 16px 18px; border-radius: 14px; font-size: 14.5px; line-height: 1.65; color: var(--kul);
  background: rgba(229,184,102,.06); box-shadow: inset 0 0 0 1px rgba(229,184,102,.26); }
.eslatma svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--oltin); }
.eslatma b { color: var(--oq); font-weight: 500; }
.havolalar { margin-top: 22px; display: grid; gap: 10px; }
.havola { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border-radius: 12px; color: var(--oq); text-decoration: none;
  background: rgba(6,10,23,.38); box-shadow: inset 0 0 0 1px var(--chiziq); transition: box-shadow .4s, background .4s, transform .45s var(--e); }
.havola:hover { background: rgba(229,184,102,.05); box-shadow: inset 0 0 0 1px rgba(229,184,102,.55); transform: translateX(4px); }
.havola > svg { flex: none; width: 20px; height: 20px; color: var(--oltin); }
.havola > svg:last-child { width: 16px; height: 16px; margin-left: auto; color: var(--kul2); transition: color .3s, transform .45s var(--e); }
.havola:hover > svg:last-child { color: var(--oltin); transform: translate(2px, -2px); }
.havola > span { flex: 1 1 auto; min-width: 0; }
.havola b { display: block; font: 500 15px/1.3 var(--sans); }
.havola > span > span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--kul); }
.qr-karta { display: flex; gap: 22px; align-items: center; }
.qr-oyna { position: relative; flex: none; width: 140px; height: 140px; padding: 12px; border-radius: 14px; background: #fff; }
.qr-oyna svg { width: 100%; height: 100%; color: #060A17; }
.qr-oyna::before { content: ""; position: absolute; inset: -9px; pointer-events: none;
  background: linear-gradient(var(--oltin), var(--oltin)) 0 0 / 22px 2px no-repeat, linear-gradient(var(--oltin), var(--oltin)) 0 0 / 2px 22px no-repeat,
    linear-gradient(var(--oltin), var(--oltin)) 100% 0 / 22px 2px no-repeat, linear-gradient(var(--oltin), var(--oltin)) 100% 0 / 2px 22px no-repeat,
    linear-gradient(var(--oltin), var(--oltin)) 0 100% / 22px 2px no-repeat, linear-gradient(var(--oltin), var(--oltin)) 0 100% / 2px 22px no-repeat,
    linear-gradient(var(--oltin), var(--oltin)) 100% 100% / 22px 2px no-repeat, linear-gradient(var(--oltin), var(--oltin)) 100% 100% / 2px 22px no-repeat; }
.qr-oyna::after { content: ""; position: absolute; left: 6px; right: 6px; top: 8px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(229,184,102,0), var(--oltin), rgba(229,184,102,0)); box-shadow: 0 0 14px 2px rgba(229,184,102,.55);
  animation: qr-skan 2.8s var(--e2) infinite; }
@keyframes qr-skan { 0% { transform: translateY(0); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(120px); opacity: 0; } }
.qr-karta b { display: block; font: 500 20px/1.2 var(--sans); letter-spacing: -.02em; }
.qr-karta p { margin: 8px 0 0; }
html[data-qurilma="android"] .qr-varaq, html[data-qurilma="ios"] .qr-varaq { display: none; }

/* ── o'rnatish: oltin chiziq bo'ylab besh qadam ── */
.qadamlar { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; counter-reset: q; }
.qadamlar::before, .qadamlar::after { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 1px; }
.qadamlar::before { background: var(--chiziq); }
.qadamlar::after { background: linear-gradient(90deg, var(--oltin), var(--shula)); transform: scaleX(0); transform-origin: 0 50%; }
.qadamlar.ochildi::after { transform: none; transition: transform 2.6s var(--e2) .3s; }
.qadam { position: relative; padding-top: 74px; }
.qadam::before { counter-increment: q; content: "0" counter(q); position: absolute; left: 0; top: 0; width: 45px; height: 45px; border-radius: 50%;
  display: grid; place-items: center; font: 500 13px/1 var(--sans); letter-spacing: .06em; color: var(--oltin); background: var(--tun);
  box-shadow: inset 0 0 0 1px var(--chiziq2); transition: box-shadow .7s, color .7s; }
.qadamlar.ochildi .qadam::before { color: var(--shula); box-shadow: inset 0 0 0 1px var(--oltin), 0 0 26px -4px rgba(229,184,102,.65); transition-delay: calc(.4s + var(--i, 0) * .45s); }
.qadam > b { display: block; margin-bottom: 10px; font: 500 19px/1.3 var(--sans); letter-spacing: -.018em; }
.qadam p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--kul); }
.qadam p b { font-weight: 500; color: var(--oq); }

/* ── xavfsizlik ── */
.xavf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.xavf h3 { display: flex; align-items: center; gap: 14px; font-size: 24px; }
.xavf h3 .ik-q { margin: 0; width: 46px; height: 46px; }
.xavf h3 .ik-q svg { width: 22px; height: 22px; }
.xavf > p { margin: 0 0 20px; }
.xavf p b { color: var(--oq); font-weight: 500; }
.barmoq { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 12px; background: rgba(6,10,23,.55); box-shadow: inset 0 0 0 1px var(--chiziq2); }
.barmoq code { flex: 1 1 auto; min-width: 0; font: 400 14px/1.75 var(--mono); letter-spacing: .03em; color: var(--shula); word-break: break-all; }
.buyruq { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #04060F; box-shadow: inset 0 0 0 1px var(--chiziq); font: 400 13px/1.5 var(--mono); }
.buyruq .t { min-width: 80px; font: 500 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--kul2); }
.buyruq code { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--oq); }
.buyruq code::before { content: "$ "; color: var(--oltin); }
.texnik { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 20px; }
.texnik div { min-width: 0; padding: 16px 18px; border-radius: 12px; background: rgba(21,31,66,.5); box-shadow: inset 0 0 0 1px var(--chiziq); }
.texnik span { display: block; font: 500 10.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--kul2); }
.texnik b { display: block; margin-top: 6px; font: 400 15px/1.35 var(--sans); color: var(--oq); overflow-wrap: anywhere; }
.jadval-q { margin-top: 20px; border-radius: 14px; overflow: hidden; background: rgba(12,19,44,.6); box-shadow: inset 0 0 0 1px var(--chiziq); }
.jadval { width: 100%; border-collapse: collapse; }
.jadval th, .jadval td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--chiziq); font-size: 14px; vertical-align: middle; }
.jadval th { font: 500 10.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--kul2); background: rgba(21,31,66,.5); }
.jadval tbody tr { transition: background .3s; }
.jadval tbody tr:hover { background: rgba(229,184,102,.04); }
.jadval tbody tr:last-child td { border-bottom: 0; }
.jadval td.mono { font: 400 12px/1.5 var(--mono); color: var(--kul); word-break: break-all; }
.jadval td.nowrap { white-space: nowrap; }

/* ── savollar ── */
.savollar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
details.savol { border-radius: 14px; background: rgba(21,31,66,.45); box-shadow: inset 0 0 0 1px var(--chiziq); transition: box-shadow .4s, background .4s; }
details.savol:hover { box-shadow: inset 0 0 0 1px rgba(229,184,102,.3); }
details.savol[open] { background: rgba(21,31,66,.62); box-shadow: inset 0 0 0 1px var(--chiziq2); }
details.savol summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 21px 22px; font: 400 17px/1.4 var(--sans); color: var(--oq); }
details.savol summary::-webkit-details-marker { display: none; }
details.savol summary i { position: relative; flex: none; width: 14px; height: 14px; margin-left: auto; }
details.savol summary i::before, details.savol summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--oltin); transition: transform .5s var(--e); }
details.savol summary i::after { transform: rotate(90deg); }
details.savol[open] summary i::after { transform: rotate(180deg); }
details.savol[open] summary i::before { transform: rotate(180deg); }
.javob { margin: 0; padding: 0 22px 22px; font-size: 15px; line-height: 1.7; color: var(--kul); }
details.savol[open] .javob { animation: ochil .6s var(--e) backwards; }

/* ── oyoq ── */
.oyoq { position: relative; margin-top: 130px; padding: 70px 0 54px; border-top: 1px solid var(--chiziq); overflow: hidden; }
.oyoq::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; opacity: .07; pointer-events: none; background-image: var(--naqsh); background-size: 64px;
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.oyoq .gerb-suv { position: absolute; right: -90px; bottom: -150px; width: 460px; height: 460px; opacity: .06; pointer-events: none; }
.oyoq .kenglik { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 36px; align-items: start; }
.oyoq .brend .gerb { width: 46px; height: 46px; }
.oyoq .shior { margin: 18px 0 0; max-width: 360px; font-size: 14px; line-height: 1.65; color: var(--kul); }
.oyoq nav { display: grid; gap: 12px; }
.oyoq nav a { color: var(--kul); text-decoration: none; font-size: 14.5px; transition: color .3s; }
.oyoq nav a:hover { color: var(--shula); }
.oyoq .o-ng { font-size: 13px; line-height: 1.7; color: var(--kul2); text-align: right; }

/* ── moslashuv ── */
@media (max-width: 1080px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento .katta { grid-row: auto; }
  .raqam { padding-left: 22px; padding-right: 18px; }
  .hikoya { column-gap: 44px; }
}
@media (max-width: 860px) {
  :root { --ust: 64px; }
  .kenglik { padding-left: 20px; padding-right: 20px; }   /* faqat yon: qahramonning yuqori chekinishini bosib ketmasin */
  .menyu { display: block; }
  .ust nav { position: fixed; left: 12px; right: 12px; top: calc(var(--ust) + 6px); flex-direction: column; gap: 2px; margin: 0; padding: 10px; border-radius: 16px;
    background: rgba(10,17,40,.97); box-shadow: inset 0 0 0 1px var(--chiziq2), 0 30px 60px -20px rgba(0,0,0,.85);
    opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .35s var(--e), transform .5s var(--e), visibility 0s .5s; }
  .ust.ochiq nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .ust nav a { padding: 15px 14px; font-size: 16px; color: var(--oq); }
  .ust nav a::after { display: none; }
  .ust .tugma { margin-left: auto; }
  .brend .gerb { width: 36px; height: 36px; }
  .brend b { font-size: 20px; }
  /* qahramon: yadro tepada markazda (kiosk kabi), ostida muloqot, keyin matn */
  .qahramon { --joy: min(80vw, 380px, 37svh); --jx: 50%; --jy: calc(var(--ust) + 4px + var(--joy) / 2); }
  #sahna .naqsh { -webkit-mask-image: radial-gradient(ellipse 80% 38% at 50% var(--jy), transparent 40%, #000 100%); mask-image: radial-gradient(ellipse 80% 38% at 50% var(--jy), transparent 40%, #000 100%); }
  .suhbat { left: 20px; right: 20px; width: auto; top: calc(var(--jy) + var(--joy) * .34); gap: 10px; }
  .ayt p { font-size: 18px; }
  .q-ichki { align-items: flex-start; padding-top: calc(var(--ust) + 4px + var(--joy) * .84 + 112px); padding-bottom: 90px; }
  .q-matn { max-width: none; width: 100%; text-align: center; }
  h1.nom { justify-content: center; margin: 14px 0 16px; }
  .nom-chiziq { margin: 0 auto 22px; background: linear-gradient(90deg, rgba(229,184,102,0), var(--oltin), rgba(229,184,102,0)); transform-origin: 50% 50%; }
  .lid { margin: 0 auto 28px; }
  .harakatlar { justify-content: center; }
  .meta { justify-content: center; }
  .pastga { display: none; }
  .raqam-qator { grid-template-columns: 1fr 1fr; }
  .raqam { padding: 28px 16px 26px; }
  .raqam:nth-child(odd) { padding-left: 0; }
  .raqam:nth-child(3)::before { display: none; }
  .raqam:nth-child(n+3) { border-top: 1px solid var(--chiziq); }
  .ishonch { grid-template-columns: 1fr 1fr; }
  section.bolim { padding-top: 96px; }
  .bosh-qism { margin-bottom: 40px; }
  /* hikoya: sahna tepada yopishadi, qadamlar ostidan o'tadi */
  .hikoya { display: block; }
  .hikoya-vizual { position: sticky; top: calc(var(--ust) + 8px); z-index: 3; }
  .panel { position: relative; top: auto; height: 330px; background: radial-gradient(500px 300px at 50% 40%, #1B2656, #0C1432 70%); }
  .v { top: 52px; padding: 16px 18px 20px; }
  .panel-bosh { padding: 15px 18px; }
  .tolqin { height: 90px; gap: 4px; }
  .tolqin i { width: 3px; }
  .v1-ich, .v2-ich { gap: 18px; }
  .buyruq-matn { font-size: 18px; }
  .sozlar span { font-size: 16px; padding: 8px 12px; }
  .tel { width: 170px; height: 262px; padding: 7px; border-radius: 26px; }
  .tel::before { top: 12px; width: 50px; height: 4px; margin-left: -25px; }
  .tel-ekran { border-radius: 20px; padding: 26px 9px 9px; gap: 7px; }
  .bildirish { padding: 7px 8px; gap: 7px; border-radius: 10px; }
  .bildirish .gerb { width: 18px; height: 18px; }
  .bildirish b { font-size: 10px; }
  .bildirish span { font-size: 9px; }
  .vazifa { padding: 9px; border-radius: 12px; }
  .vazifa > b { font-size: 12px; margin-bottom: 6px; }
  .bosqich { font-size: 10px; padding: 3px 0; gap: 7px; }
  .bosqich i { width: 13px; height: 13px; }
  .bosqich.tayyor i::after { left: 4.5px; top: 2.5px; width: 3px; height: 6px; }
  .bosqich.jarayonda i::after { inset: 3.5px; }
  .v3-yorliq { left: 18px; bottom: 16px; }
  .v3-yorliq b { font-size: 19px; }
  .hikoya-qadam { min-height: 58vh; min-height: 58svh; padding: 28px 0 28px 24px; }
  .hikoya-qadam h3 { font-size: 27px; }
  .hikoya-qadam p { font-size: 16px; }
  .yuklab-grid, .xavf-grid, .savollar { grid-template-columns: 1fr; }
  .qadamlar { grid-template-columns: 1fr; gap: 0; }
  .qadamlar::before, .qadamlar::after { left: 22px; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto; }
  .qadamlar::after { transform: scaleY(0); transform-origin: 50% 0; background: linear-gradient(var(--oltin), var(--shula)); }
  .qadam { padding: 0 0 34px 72px; }
  .qadam:last-child { padding-bottom: 0; }
  .oyoq .kenglik { grid-template-columns: 1fr; }
  .oyoq .o-ng { text-align: left; }
  .lenta { margin-top: 80px; }
}
@media (max-width: 560px) {
  .kenglik { padding-left: 16px; padding-right: 16px; }
  .ust .tugma { display: none; }
  .menyu { margin-left: auto; }
  .harakatlar .tugma { width: 100%; }
  .meta { gap: 6px 16px; font-size: 12.5px; }
  .bento { grid-template-columns: 1fr; }
  .bento .katta { grid-column: auto; grid-template-columns: 1fr; }
  .bento .katta .xarita { min-height: 250px; }
  .varaq { padding: 24px 20px; border-radius: 16px; }
  .ishonch { grid-template-columns: 1fr; gap: 18px; }
  .raqam b { font-size: 52px; }
  .raqam p { font-size: 13.5px; }
  .m-bosh { flex-direction: column; gap: 14px; }
  .quti { width: 50px; height: 50px; }
  .mahsulot h3 { font-size: 23px; }
  .yorliq-uzun, .lid-qosh { display: none; }
  .apk { grid-template-columns: 1fr auto; }
  .apk .tugma { grid-column: 1 / -1; width: 100%; }
  .buyruq .t { display: none; }
  .buyruq code { white-space: pre-wrap; overflow-wrap: anywhere; }
  .texnik div:last-child { grid-column: 1 / -1; }
  .qr-karta { flex-direction: column; text-align: center; }
  /* nazorat summalari: tor ekranda jadval o'rniga kartalar — xesh ustuni siqilib har harf alohida qatorga tushmasin */
  .jadval thead { display: none; }
  .jadval, .jadval tbody { display: block; }
  .jadval tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--chiziq); }
  .jadval tr:last-child { border-bottom: 0; }
  .jadval td { display: block; padding: 0; border: 0; }
  .jadval td:first-child { font-weight: 500; color: var(--oq); }
  .jadval td.nowrap + td.nowrap { font-size: 13px; color: var(--kul); }
  .lenta-qator span { font-size: 26px; }
}
@media (max-width: 380px) {
  .brend small { display: none; }
}

/* ── kam harakat: hamma animatsiya va o'tish o'chadi, mazmun darhol ko'rinadi ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0s !important; }
  html.js [data-o]:not(.ochildi) { opacity: 1; }
  .lenta-qator { animation: none !important; }
  .xarita .vil, .xarita .tum { stroke-dashoffset: 0; }
}