/* Repora landing (bosh sahifa). Manba: ui-lab/landing/repora.html */
/* Layout: to'q ko'k fon, 1192px ustun. Hikoya: haqiqiy ilova namoyishi (kompyuter + telefon) → tartibsizlikdan tartibga → telefonda 4 qadam → haqiqiy ekran bo'laklari (bento) → himoya → yakun.
   Ilova ekranlari — labdagi haqiqiy Repora rasmlari (namunaviy ma'lumot). Joylashuvlar "ilova pikseli" (--u) bilan: kompyuter 1440, telefon 430 kenglikda. */
:root{
  color-scheme: dark;
  --tun:#010f29; --tun2:#04163a; --karta:#0a1d45; --karta2:#0e2656;
  --chiziq:rgba(150,185,255,.13); --chiziq2:rgba(150,185,255,.24); --chiziq3:rgba(150,185,255,.4);
  --matn:#edf3ff; --xira:#9db1d6; --xira2:#6c82ad;
  --kok:#1f7bff; --moviy:#19c3ff; --yashil:#2bd47f; --sariq:#ffb84d; --qizil:#ff6b78;
  --oq:#ffffff; --qogoz:#f7f2e4; --qogoz-matn:#2a2a35; --qalam:#c9433f; --stiker:#ffe27a; --excel:#1e7145;
  --ilova:#0b0f1a; --ilova-sar:#0d131f; --holat-matn:#ffffff;
  --shisha:rgba(255,255,255,.05); --shisha2:rgba(255,255,255,.09); --nav-fon:rgba(1,15,41,.8);
  --oyna-fon:#0c1220; --oyna-bar1:#151c2d; --oyna-bar2:#10172a; --oyna-chiziq:rgba(255,255,255,.06);
  --karta-yuqori:rgba(255,255,255,.055); --karta-past:rgba(255,255,255,.02);
  --toast-fon:#1B2231; --toast-matn:#F2F5F9; --toast-chiziq:rgba(255,255,255,.1);
  --qulf-fon:rgba(15,8,20,.88); --seyf-fon:rgba(10,29,69,.92); --sahna-nur:rgba(31,123,255,.35);
  --barmoq-fon:rgba(255,255,255,.3); --barmoq-chiziq:rgba(255,255,255,.7); --tolqin:rgba(255,255,255,.95); --bosish:rgba(255,255,255,.35);
  --chip-matn:#ffcf87; --qalqon-ich:rgba(31,123,255,.14);
  --soya:0 30px 70px -28px rgba(0,0,0,.75);
  --soya-qurilma:0 60px 120px -50px rgba(0,0,0,.95);
  --grad:linear-gradient(100deg,var(--moviy),var(--kok) 50%,var(--yashil));
  --f-sar:"Unbounded","Onest",system-ui,sans-serif;
  --f-matn:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-qol:"Caveat","Segoe Print","Comic Sans MS",cursive;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --egri:cubic-bezier(.2,.8,.2,1);
  --silliq:cubic-bezier(.45,0,.2,1);
}
/* Oq tema: brauzer (qurilma) sozlamasiga qarab o'zi yoqiladi */
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --tun:#f3f6fc; --tun2:#e7edf9; --karta:#ffffff; --karta2:#e5ecfb;
  --chiziq:rgba(16,40,90,.1); --chiziq2:rgba(16,40,90,.16); --chiziq3:rgba(16,40,90,.3);
  --matn:#0b1830; --xira:#4a5a77; --xira2:#6c7c99;
  --kok:#1f6fff; --moviy:#0a9be0; --yashil:#14985a; --sariq:#b86e00; --qizil:#e0464f;
  --ilova:#f2f4f8; --ilova-sar:#fafcff; --holat-matn:#0b1830;
  --shisha:rgba(16,40,90,.04); --shisha2:rgba(16,40,90,.08); --nav-fon:rgba(243,246,252,.86);
  --oyna-fon:#ffffff; --oyna-bar1:#f4f6fa; --oyna-bar2:#edf0f6; --oyna-chiziq:rgba(16,40,90,.08);
  --karta-yuqori:#ffffff; --karta-past:#fafbfe;
  --toast-fon:#ffffff; --toast-matn:#0A0F1C; --toast-chiziq:rgba(10,15,28,.12);
  --qulf-fon:rgba(255,255,255,.96); --seyf-fon:rgba(255,255,255,.96); --sahna-nur:rgba(31,123,255,.16);
  --barmoq-fon:rgba(12,32,70,.16); --barmoq-chiziq:rgba(12,32,70,.42); --tolqin:rgba(12,40,90,.55); --bosish:rgba(12,40,90,.14);
  --chip-matn:#8a5300; --qalqon-ich:rgba(31,123,255,.08);
  --soya:0 30px 70px -32px rgba(16,40,90,.3);
  --soya-qurilma:0 50px 100px -48px rgba(16,40,90,.5);
  color-scheme:light;}}
:root[data-theme="light"]{
  --tun:#f3f6fc; --tun2:#e7edf9; --karta:#ffffff; --karta2:#e5ecfb;
  --chiziq:rgba(16,40,90,.1); --chiziq2:rgba(16,40,90,.16); --chiziq3:rgba(16,40,90,.3);
  --matn:#0b1830; --xira:#4a5a77; --xira2:#6c7c99;
  --kok:#1f6fff; --moviy:#0a9be0; --yashil:#14985a; --sariq:#b86e00; --qizil:#e0464f;
  --ilova:#f2f4f8; --ilova-sar:#fafcff; --holat-matn:#0b1830;
  --shisha:rgba(16,40,90,.04); --shisha2:rgba(16,40,90,.08); --nav-fon:rgba(243,246,252,.86);
  --oyna-fon:#ffffff; --oyna-bar1:#f4f6fa; --oyna-bar2:#edf0f6; --oyna-chiziq:rgba(16,40,90,.08);
  --karta-yuqori:#ffffff; --karta-past:#fafbfe;
  --toast-fon:#ffffff; --toast-matn:#0A0F1C; --toast-chiziq:rgba(10,15,28,.12);
  --qulf-fon:rgba(255,255,255,.96); --seyf-fon:rgba(255,255,255,.96); --sahna-nur:rgba(31,123,255,.16);
  --barmoq-fon:rgba(12,32,70,.16); --barmoq-chiziq:rgba(12,32,70,.42); --tolqin:rgba(12,40,90,.55); --bosish:rgba(12,40,90,.14);
  --chip-matn:#8a5300; --qalqon-ich:rgba(31,123,255,.08);
  --soya:0 30px 70px -32px rgba(16,40,90,.3);
  --soya-qurilma:0 50px 100px -48px rgba(16,40,90,.5);
  color-scheme:light;}
@property --burchak{syntax:"<angle>";inherits:false;initial-value:0deg}
*{box-sizing:border-box}
body{margin:0;background:var(--tun);color:var(--matn);font-family:var(--f-matn);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:90;background:var(--tun)}
a{color:inherit}
img{max-width:100%}
p{margin:0}
h1,h2,h3{font-family:var(--f-sar);font-weight:600;letter-spacing:-.025em;line-height:1.12;text-wrap:balance;margin:0}
.qobiq{max-width:1192px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.soz{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.soz>span{display:inline-block}

/* ---------- Butun sahifa foni ---------- */
.sayt-fon{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aura{position:absolute;border-radius:50%}
.aura.a1{width:1200px;height:1200px;right:-460px;top:-600px;background:radial-gradient(circle,rgba(31,123,255,.25),transparent 62%)}
.aura.a2{width:1000px;height:1000px;left:-480px;bottom:-560px;background:radial-gradient(circle,rgba(43,212,127,.12),transparent 62%)}
.aura.a3{width:780px;height:780px;left:32%;top:22%;background:radial-gradient(circle,rgba(25,195,255,.07),transparent 62%)}
.harakat .aura.a1{animation:aura1 20s ease-in-out infinite alternate}
.harakat .aura.a2{animation:aura2 24s ease-in-out infinite alternate}
.harakat .aura.a3{animation:aura3 28s ease-in-out infinite alternate}
@keyframes aura1{to{transform:translate(-160px,120px) scale(1.1)}}
@keyframes aura2{to{transform:translate(180px,-120px) scale(1.15)}}
@keyframes aura3{to{transform:translate(-200px,160px)}}
.progress{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:2px;z-index:85;background:var(--grad);transform-origin:0 50%;transform:scaleX(var(--p,0));box-shadow:0 0 10px rgba(25,195,255,.6)}

/* ---------- Tugmalar ---------- */
.btn{--bx:0px;--by:0px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:13px;font:600 15px/1 var(--f-matn);text-decoration:none;border:1px solid transparent;cursor:pointer;transform:translate(var(--bx),var(--by));transition:transform .3s var(--egri),box-shadow .25s,background .25s;white-space:nowrap}
.btn:focus-visible,.til button:focus-visible,.qadam:focus-visible,.anim-chip button:focus-visible,.tomosha:focus-visible{outline:2px solid var(--moviy);outline-offset:3px}
.btn-asosiy{background:linear-gradient(135deg,var(--moviy),var(--kok) 60%);color:var(--oq);box-shadow:0 10px 30px -12px rgba(31,123,255,.9)}
.btn-asosiy:hover{box-shadow:0 16px 40px -12px rgba(31,123,255,1)}
.btn-shisha{background:var(--shisha);border-color:var(--chiziq2);color:var(--matn)}
.btn-shisha:hover{background:var(--shisha2)}
.btn-katta{padding:16px 24px;font-size:16px;border-radius:15px}
.btn svg{transition:transform .3s var(--egri)}
.btn:hover svg{transform:translateX(3px)}
.bolim{padding-block:104px}
.bolim-sar{font-size:clamp(28px,4vw,48px);max-width:17ch}
.bolim-bosh{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.bolim-bosh p{color:var(--xira);max-width:38ch}

/* ---------- Navigatsiya ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.nav.qotgan{background:var(--nav-fon);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--chiziq)}
.nav .qobiq{display:flex;align-items:center;gap:22px;padding-block:14px}
.brend{display:flex;align-items:center;gap:11px;text-decoration:none;font:600 16px/1 var(--f-sar);letter-spacing:.16em}
.brend img{width:34px;height:34px;border-radius:10px}
.nav nav{display:flex;gap:26px;margin-left:auto;font-size:15px}
.nav nav a{position:relative;color:var(--xira);text-decoration:none;transition:color .2s}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--egri)}
.nav nav a:hover{color:var(--matn)}
.nav nav a:hover::after{transform:scaleX(1)}
.til{display:flex;padding:3px;border:1px solid var(--chiziq2);border-radius:999px}
.til button{border:0;background:transparent;color:var(--xira);font:600 12.5px/1 var(--f-matn);padding:7px 10px;border-radius:999px;cursor:pointer;letter-spacing:.04em;transition:background .25s,color .25s}
.til button[aria-pressed="true"]{background:var(--karta2);color:var(--matn)}
.nav-tugma{display:flex;gap:10px}
@media (max-width:900px){.nav nav{display:none}.til{margin-left:auto}.nav-tugma .btn-asosiy{display:none}}

/* ---------- Hero ---------- */
.hero{position:relative;padding-block:44px 64px;isolation:isolate}
.hero-fon{position:absolute;inset:-80px 0 0;z-index:-1;pointer-events:none;overflow:hidden}
.panjara-fon{position:absolute;inset:0;background-image:linear-gradient(var(--chiziq) 1px,transparent 1px),linear-gradient(90deg,var(--chiziq) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 18%,#000 10%,transparent 66%);mask-image:radial-gradient(ellipse 70% 55% at 50% 18%,#000 10%,transparent 66%);opacity:.42}
.kursor-nur{position:absolute;left:0;top:0;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(25,195,255,.11),transparent 60%);transform:translate(var(--kx,-2000px),var(--ky,-2000px)) translate(-50%,-50%)}
.hero-matn{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;max-width:880px;margin-inline:auto}
.hero h1{font-size:clamp(38px,6vw,74px);line-height:1.04}
.aylanma-qobiq{display:block;height:1.24em;overflow:hidden}
.aylanma{display:inline-block;will-change:transform,opacity}
.hero-tavsif{font-size:clamp(17px,1.5vw,19px);color:var(--xira);max-width:50ch}
.cta-qator{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.ishonch{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:14px;color:var(--xira)}
.ishonch li{display:flex;align-items:center;gap:8px}
.ishonch svg{width:16px;height:16px;flex:none;color:var(--yashil)}

/* ---------- Mahsulot sahnasi: brauzer oynasi + telefon ---------- */
.sahna-q{position:relative;max-width:1120px;margin:60px auto 0;perspective:1800px}
.sahna-ich{position:relative;transform-origin:50% 0;padding-bottom:56px}
.sahna-ich::before{content:"";position:absolute;left:8%;right:8%;top:12%;bottom:6%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,var(--sahna-nur),transparent 65%);filter:blur(30px)}
.oyna{position:relative;margin-right:116px;border-radius:16px;overflow:hidden;background:var(--oyna-fon);border:1px solid var(--chiziq2);box-shadow:var(--soya-qurilma)}
.oyna-bar{display:flex;align-items:center;gap:14px;height:40px;padding:0 14px;background:linear-gradient(var(--oyna-bar1),var(--oyna-bar2));border-bottom:1px solid var(--oyna-chiziq)}
.chiroq{display:flex;gap:7px;flex:none}
.chiroq i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.chiroq i:nth-child(2){background:#febc2e}.chiroq i:nth-child(3){background:#28c840}
.oyna-bar .url{display:flex;align-items:center;justify-content:center;gap:7px;width:min(340px,60%);height:26px;margin-inline:auto;transform:translateX(-30px);border-radius:8px;background:var(--shisha);font:500 12.5px/1 var(--f-matn);color:var(--xira)}
.oyna-bar .url svg{width:11px;height:11px;fill:none;stroke:var(--yashil);stroke-width:2.6;stroke-linecap:round}
.ekran-k{--u:calc(100cqw / 1440);position:relative;aspect-ratio:1440/900;overflow:hidden;container-type:inline-size;background:var(--ilova)}
.varaq{position:absolute;left:0;top:0;width:100%;transition:transform 1s var(--silliq);will-change:transform}
.varaq>img{display:block;width:100%;height:auto;max-width:none}
.qopqoq{position:absolute;left:0;right:0;top:0;z-index:2;background-repeat:no-repeat;background-position:0 0;background-size:100% auto;pointer-events:none}
.ekran-k .qopqoq{height:calc(var(--u) * 62)}
.ustki{position:absolute;inset:0;z-index:3;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:scale(1.012);transition:opacity .35s ease,transform .5s var(--egri);pointer-events:none}
.ustki.kor{opacity:1;transform:none}
.belgi-q{position:absolute;z-index:2;border-radius:calc(var(--u) * 16);box-shadow:0 0 0 calc(var(--u) * 2.5) rgba(25,195,255,.75),0 0 calc(var(--u) * 40) rgba(25,195,255,.4);background:rgba(25,195,255,.05);opacity:0;transition:opacity .3s;pointer-events:none}
.belgi-q.kor{opacity:1}
.kursor{position:absolute;left:0;top:0;z-index:8;width:max(13px,calc(var(--u) * 22));opacity:0;transition:transform .9s var(--silliq),opacity .35s,scale .12s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.kursor.kor{opacity:1}
.kursor.bos{scale:.86}
.kursor svg{display:block;width:100%;height:auto}
.tolqin{position:absolute;z-index:7;width:calc(var(--u) * 54);height:calc(var(--u) * 54);margin:calc(var(--u) * -27) 0 0 calc(var(--u) * -27);border-radius:50%;border:max(1.5px,calc(var(--u) * 3)) solid var(--tolqin);opacity:0;pointer-events:none}
.tolqin.bos{animation:tolqin .6s ease-out}
@keyframes tolqin{from{transform:scale(.25);opacity:.95}to{transform:scale(1.35);opacity:0}}

/* Telefon (umumiy: hero, qadamlar, bento) */
.tel{--tw:290px;position:relative;width:var(--tw);flex:none;padding:calc(var(--tw) * .034);border-radius:calc(var(--tw) * .175);background:linear-gradient(150deg,#46577a,#151d30 26%,#0a101e 70%,#2b3653);box-shadow:var(--soya-qurilma),0 0 0 1px rgba(255,255,255,.06),inset 0 0 0 1.5px rgba(255,255,255,.08)}
.tel::before{content:"";position:absolute;right:calc(var(--tw) * -.012);top:24%;width:calc(var(--tw) * .012);height:13%;border-radius:0 3px 3px 0;background:#2b3653}
.tel::after{content:"";position:absolute;left:calc(var(--tw) * -.012);top:20%;width:calc(var(--tw) * .012);height:8%;border-radius:3px 0 0 3px;background:#2b3653;box-shadow:0 calc(var(--tw) * .14) 0 #2b3653}
.tel-ekran{--u:calc(100cqw / 430);position:relative;overflow:hidden;border-radius:calc(var(--tw) * .142);background:var(--ilova-sar);container-type:inline-size}
.holat{position:relative;z-index:9;display:flex;align-items:center;justify-content:space-between;height:calc(var(--u) * 54);padding:calc(var(--u) * 6) calc(var(--u) * 30) 0 calc(var(--u) * 44);background:var(--ilova-sar);font:600 calc(var(--u) * 17)/1 var(--f-matn);color:var(--holat-matn);letter-spacing:.01em}
.holat::after{content:"";position:absolute;left:50%;top:calc(var(--u) * 11);width:calc(var(--u) * 122);height:calc(var(--u) * 36);margin-left:calc(var(--u) * -61);border-radius:999px;background:#000}
.holat span{display:flex;gap:calc(var(--u) * 6);align-items:center}
.holat svg{height:calc(var(--u) * 13);width:auto;fill:currentColor}
.ilova{position:relative;aspect-ratio:430/932;overflow:hidden;background:var(--ilova)}
.sahifa{position:absolute;inset:0;z-index:1;overflow:hidden;background:var(--ilova);transition:transform .48s cubic-bezier(.32,.72,0,1),filter .48s,opacity .45s ease}
.sahifa.ong{transform:translateX(100%)}
.sahifa.chap{transform:translateX(-26%);filter:brightness(.55)}
.sahifa.xira{opacity:0}
.sahifa.yashir{visibility:hidden}
.tel .qopqoq{height:calc(var(--u) * 67)}
.barmoq{position:absolute;left:0;top:0;z-index:8;width:calc(var(--u) * 50);height:calc(var(--u) * 50);margin:calc(var(--u) * -25) 0 0 calc(var(--u) * -25);border-radius:50%;background:var(--barmoq-fon);border:calc(var(--u) * 2) solid var(--barmoq-chiziq);box-shadow:0 0 calc(var(--u) * 24) var(--barmoq-fon);opacity:0;scale:.6;transition:transform .7s var(--silliq),opacity .22s,scale .16s;pointer-events:none}
.barmoq.kor{opacity:1;scale:1}
.barmoq.bos{scale:.78}
.maydon-q{position:absolute;opacity:0;pointer-events:none;border-radius:calc(var(--u) * 11)}
.maydon-q img{position:absolute;inset:0;width:100%;height:100%;display:block}
.maydon-q .toldi{clip-path:inset(0 calc(100% - var(--x,0) / 348 * 100%) 0 0)}
.maydon-q.yoz{opacity:1}
.maydon-q.fokus{box-shadow:0 0 0 calc(var(--u) * 2) rgba(10,132,255,.85),0 0 calc(var(--u) * 14) rgba(10,132,255,.35)}
.maydon-q i{position:absolute;top:calc(var(--u) * 13);left:calc(var(--u) * var(--x,17));width:calc(var(--u) * 2);height:calc(var(--u) * 20);background:#0A84FF;opacity:0}
.maydon-q.fokus i{opacity:1;animation:miltira 1s steps(1) infinite}
@keyframes miltira{50%{opacity:0}}
.bosish-q{position:absolute;border-radius:calc(var(--u) * 22);background:var(--bosish);opacity:0;pointer-events:none}
.bosish-q.bos{animation:bosish .5s ease-out}
@keyframes bosish{20%{opacity:1}100%{opacity:0}}
.ilova-toast{position:absolute;z-index:7;top:calc(var(--u) * 80);left:calc(var(--u) * 16);right:calc(var(--u) * 16);display:flex;align-items:flex-start;gap:calc(var(--u) * 12);padding:calc(var(--u) * 13) calc(var(--u) * 14) calc(var(--u) * 13) calc(var(--u) * 16);border-radius:calc(var(--u) * 14);background:var(--toast-fon);border:1px solid var(--toast-chiziq);border-left:calc(var(--u) * 4) solid #32D583;box-shadow:0 calc(var(--u) * 20) calc(var(--u) * 44) rgba(0,0,0,.35);color:var(--toast-matn);font:600 calc(var(--u) * 15)/1.45 var(--f-matn);opacity:0;transform:translateX(calc(var(--u) * 18));transition:opacity .26s ease,transform .32s cubic-bezier(.2,1.25,.35,1);pointer-events:none}
.ilova-toast span{flex:1;white-space:pre-line}
.ilova-toast b{color:#8b95a8;font-weight:400;font-size:calc(var(--u) * 20);line-height:1}
.ilova-toast.kor{opacity:1;transform:none}
.halqa-q{position:absolute;z-index:6;border-radius:calc(var(--u) * 10);opacity:0;pointer-events:none;transition:opacity .3s}
.halqa-q.kor{opacity:1;animation:halqaPuls 1.5s ease-in-out infinite}
@keyframes halqaPuls{0%,100%{box-shadow:0 0 0 calc(var(--u) * 2) rgba(255,184,77,.85),0 0 calc(var(--u) * 10) rgba(255,184,77,.25)}50%{box-shadow:0 0 0 calc(var(--u) * 3) rgba(255,184,77,.95),0 0 calc(var(--u) * 30) rgba(255,184,77,.5)}}
.ilova-chip{position:absolute;z-index:6;padding:calc(var(--u) * 6) calc(var(--u) * 12);border-radius:999px;background:rgba(255,184,77,.16);border:1px solid rgba(255,184,77,.5);color:var(--chip-matn);font:700 calc(var(--u) * 15)/1 var(--f-matn);white-space:nowrap;opacity:0;transform:translateY(calc(var(--u) * 10));transition:opacity .3s,transform .45s var(--egri)}
.ilova-chip.kor{opacity:1;transform:none}
.sahna-q .tel{--tw:clamp(200px,23vw,262px);position:absolute;right:0;bottom:0;z-index:4}
.sahna-izoh{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:22px;font-size:13.5px;color:var(--xira2)}
.tomosha{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;border-radius:999px;border:1px solid var(--chiziq2);background:var(--shisha);color:var(--xira);font:600 13px/1 var(--f-matn);cursor:pointer;transition:background .2s,color .2s}
.tomosha:hover{background:var(--shisha2);color:var(--matn)}
.tomosha svg{width:14px;height:14px;fill:currentColor}
.tomosha .davom-b{display:none}
.tomosha[aria-pressed="true"] .davom-b{display:block}
.tomosha[aria-pressed="true"] .toxtat-b{display:none}
.sahna-izoh .nuqta-b{width:6px;height:6px;border-radius:50%;background:var(--yashil);box-shadow:0 0 10px var(--yashil)}
@media (max-width:760px){
  .hero{padding-bottom:40px}
  .oyna{display:none}
  .sahna-q{margin-top:44px}
  .sahna-q .tel{--tw:min(276px,74vw);position:relative;margin-inline:auto}
  .sahna-ich{padding-bottom:0}
}

/* ---------- Tartibsizlikdan tartibga ---------- */
.xaos{position:relative;padding-block:56px;overflow:hidden}
.xaos-ichki{display:flex;flex-direction:column;gap:30px}
.xaos-sar{display:grid;text-align:center}
.xaos-sar h2{grid-area:1/1;font-size:clamp(26px,3.8vw,48px);transition:opacity .7s}
.xs-b{opacity:0}
.xaos.tartib .xs-a{opacity:0}
.xaos.tartib .xs-b{opacity:1}
.sahna{position:relative;height:min(580px,68vh);min-height:460px;max-width:1080px;width:100%;margin-inline:auto}
.parcha{position:absolute;left:var(--x);top:var(--y);transform:rotate(var(--r));z-index:2;transition:opacity .9s ease,filter .9s ease}
.harakat .parcha-ichi{animation:suz 6s ease-in-out infinite;animation-delay:var(--d,0s)}
.parcha-ichi{position:relative}
@keyframes suz{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(1.2deg)}}
.daftar .parcha-ichi{width:244px;padding:34px 18px 16px 36px;border-radius:7px;background:repeating-linear-gradient(transparent 0 27px,rgba(80,110,170,.28) 27px 28px) 0 26px/100% calc(100% - 26px) no-repeat,var(--qogoz);color:var(--qogoz-matn);font:600 21px/28px var(--f-qol);box-shadow:var(--soya)}
.daftar .parcha-ichi::before{content:"";position:absolute;left:24px;top:0;bottom:0;width:2px;background:rgba(201,67,63,.55)}
.spiral{position:absolute;top:8px;left:16px;right:16px;height:12px;background:radial-gradient(circle at 6px 6px,#071331 3.4px,rgba(7,19,49,.25) 4px,transparent 4.6px) 0 0/19px 12px repeat-x}
.qahva{position:absolute;right:12px;bottom:12px;width:62px;height:62px;border-radius:50%;border:5px solid rgba(124,78,34,.16);box-shadow:inset 0 0 0 2px rgba(124,78,34,.08)}
.daftar s{color:var(--qalam);text-decoration-thickness:2px}
.kalk .parcha-ichi{width:156px;padding:12px;border-radius:18px;background:linear-gradient(180deg,#3b4458,#262c3b);box-shadow:var(--soya),inset 0 1px 0 rgba(255,255,255,.12)}
.kalk-ekran{padding:10px;border-radius:9px;background:linear-gradient(180deg,#c3d3ac,#aebf96);color:#23301c;font:700 18px/1 var(--f-mono);text-align:right;margin-bottom:10px;letter-spacing:.04em;box-shadow:inset 0 2px 4px rgba(0,0,0,.25)}
.kalk-tugmalar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.kalk-tugmalar span{height:22px;border-radius:6px;background:#4d576d;color:#dfe5f0;font:600 11px/22px var(--f-matn);text-align:center;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.kalk-tugmalar span.op{background:#e0893a;color:#fff}
.excel .parcha-ichi{width:268px;border-radius:9px;overflow:hidden;background:var(--oq);color:#222;font:12.5px/1 var(--f-mono);box-shadow:var(--soya)}
.excel-bosh{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--excel);color:var(--oq);font:600 12px/1 var(--f-matn)}
.excel-bosh b{display:grid;place-items:center;width:16px;height:16px;border-radius:3px;background:var(--oq);color:var(--excel);font-size:11px}
.excel-formula{display:flex;gap:8px;padding:6px 10px;border-bottom:1px solid #d6d9de;color:#444}
.excel-formula b{color:#888;font-style:italic}
.excel table{border-collapse:collapse;width:100%}
.excel td,.excel th{border:1px solid #d6d9de;padding:7px 8px;text-align:left;white-space:nowrap;color:#222}
.excel th{background:#eef0f3;color:#666;font-weight:600}
.excel .xato{background:#fde2e1;color:#c0322d;font-weight:700}
.excel .faol-k{outline:2px solid var(--excel);outline-offset:-2px}
.tg .parcha-ichi{width:256px;padding:12px;border-radius:18px;background:#17212b;box-shadow:var(--soya);display:flex;flex-direction:column;gap:7px;font-size:13.5px;line-height:1.35}
.tg-bosh{display:flex;align-items:center;gap:9px;color:#e9eef5;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.08)}
.tg-bosh i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#f6a04d,#e2624b);font:700 13px/1 var(--f-matn);font-style:normal;color:#fff}
.tg-bosh b{display:block;font-size:13px}
.tg-bosh small{display:block;color:#5ba0e0;font-size:11.5px}
.tg-k,.tg-c{max-width:86%;padding:8px 11px 6px;border-radius:13px}
.tg-k{align-self:flex-start;border-bottom-left-radius:4px;background:#182533;color:#e9eef5;border:1px solid rgba(255,255,255,.06)}
.tg-c{align-self:flex-end;border-bottom-right-radius:4px;background:#2b5278;color:#eaf2fb}
.tg-k time,.tg-c time{display:block;text-align:right;font-size:10.5px;opacity:.6;margin-top:2px}
.chek .parcha-ichi{width:190px;padding:14px 14px 24px;background:var(--qogoz);color:var(--qogoz-matn);font:12px/1.55 var(--f-mono);box-shadow:var(--soya);-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%}
.chek b{display:block;text-align:center;margin-bottom:6px;letter-spacing:.1em}
.chek p{display:flex;justify-content:space-between;gap:8px}
.chek hr{border:0;border-top:1px dashed rgba(42,42,53,.45);margin:6px 0}
.shtrix{height:26px;margin-top:8px;background:repeating-linear-gradient(90deg,#2a2a35 0 2px,transparent 2px 4px,#2a2a35 4px 5px,transparent 5px 8px,#2a2a35 8px 11px,transparent 11px 13px)}
.stiker .parcha-ichi{width:172px;padding:22px 16px 18px;background:linear-gradient(180deg,#ffe98f,var(--stiker));color:#3d3204;font:600 22px/1.15 var(--f-qol);box-shadow:var(--soya)}
.stiker .parcha-ichi::before{content:"";position:absolute;top:-11px;left:50%;width:76px;height:22px;margin-left:-38px;background:rgba(255,255,255,.42);transform:rotate(-4deg);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.zarra{position:absolute;left:var(--x);top:var(--y);width:6px;height:6px;border-radius:50%;background:var(--moviy);box-shadow:0 0 12px var(--moviy);opacity:0;z-index:1}
.zarra:nth-child(3n){background:var(--yashil);box-shadow:0 0 12px var(--yashil)}
.markaz{position:absolute;left:50%;top:50%;width:min(580px,90%);translate:-50% -50%;z-index:3;padding:0 0 14px;border-radius:18px;background:var(--oyna-fon);border:1px solid var(--chiziq2);box-shadow:0 0 0 1px rgba(31,123,255,.15),0 40px 90px -30px rgba(31,123,255,.55);transition:opacity .9s ease,scale .9s var(--egri)}
.markaz::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--burchak),transparent 0 62%,var(--moviy) 78%,var(--yashil) 88%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .6s;pointer-events:none}
.markaz.porla::before{opacity:1;animation:burchak 3s linear infinite}
@keyframes burchak{to{--burchak:360deg}}
.markaz .oyna-bar{height:32px;border-radius:18px 18px 0 0}
.markaz .chiroq i{width:9px;height:9px}
.markaz-ekran{aspect-ratio:1440/900;overflow:hidden;background:var(--ilova)}
.markaz-ekran img{display:block;width:100%;height:auto}
.markaz-izoh{margin:14px 14px 0;padding:10px 12px;border-radius:12px;background:rgba(43,212,127,.08);color:var(--yashil);font-size:13.5px;font-weight:600;text-align:center}
.sahna.tartib .parcha{opacity:0;filter:blur(4px)}
.kam .sahna:not(.tartib) .markaz{opacity:.35;scale:.94}
.kam .sahna.tartib .markaz{opacity:1;scale:1}
@media (max-width:760px){
  .sahna{height:600px}.parcha-ichi{zoom:.7}.markaz{width:min(420px,92%)}
  .parcha.daftar{--x:0%!important;--y:2%!important}.parcha.stiker{--x:44%!important;--y:0%!important}.parcha.kalk{--x:65%!important;--y:5%!important}
  .parcha.excel{--x:0%!important;--y:60%!important}.parcha.tg{--x:44%!important;--y:62%!important}.parcha.chek{--x:20%!important;--y:80%!important}
}

/* ---------- Telefon va qadamlar ---------- */
.q-panjara{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px}
.telefon-ustun{position:sticky;top:calc(env(safe-area-inset-top,0px) + 88px);align-self:start;display:flex;justify-content:center}
.telefon-ustun .tel{--tw:300px}
.telefon-ustun::before{content:"";position:absolute;inset:10% -10%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,rgba(31,123,255,.3),transparent 65%);filter:blur(24px)}
.q-yonbosh{position:relative}
.q-royxat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.q-yonbosh::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--chiziq)}
.q-tolish{position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(var(--moviy),var(--kok),var(--yashil));transform-origin:top;transform:scaleY(var(--q,0));box-shadow:0 0 12px rgba(25,195,255,.6)}
.qadam{min-height:64vh;display:flex;flex-direction:column;justify-content:center;gap:12px;padding-left:32px;transition:opacity .45s;opacity:.38;cursor:pointer}
.qadam.faol{opacity:1}
.q-raqam{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--chiziq2);font:600 14px/1 var(--f-sar);color:var(--moviy);letter-spacing:.04em;transition:background .4s,color .4s,box-shadow .4s}
.qadam.faol .q-raqam{background:linear-gradient(135deg,var(--moviy),var(--kok));color:var(--oq);border-color:transparent;box-shadow:0 10px 30px -10px rgba(31,123,255,.9)}
.qadam h3{font-size:clamp(24px,2.8vw,36px)}
.qadam p{color:var(--xira);font-size:18px;max-width:34ch}
@media (max-width:900px){
  .q-panjara{grid-template-columns:minmax(0,1fr);gap:28px}
  .telefon-ustun{position:relative;top:auto}
  .telefon-ustun .tel{--tw:min(282px,76vw)}
  .qadam{min-height:0;padding:14px 0 14px 22px}
}

/* ---------- Bento: haqiqiy ekran bo'laklari ---------- */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.b-karta{position:relative;isolation:isolate;grid-column:span 2;display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:24px;background:linear-gradient(180deg,var(--karta-yuqori),var(--karta-past));border:1px solid var(--chiziq);min-width:0;overflow:hidden}
.b-karta.k4{grid-column:span 4}
.b-karta.k6{grid-column:span 6}
.b-karta.uzun{grid-row:span 2}
.b-karta h3{font-size:19px;letter-spacing:-.015em;margin-top:8px}
.b-karta p{color:var(--xira);font-size:15px}
.spot::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),rgba(31,123,255,.14),transparent 45%);opacity:0;transition:opacity .35s;pointer-events:none}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(25,195,255,.75),transparent 55%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;pointer-events:none}
.spot:hover::before,.spot:hover::after{opacity:1}
.b-oyna{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--chiziq2);background:var(--ilova);container-type:inline-size;box-shadow:0 22px 44px -26px rgba(0,0,0,.85)}
.b-oyna>img{position:absolute;left:0;top:var(--top,0);width:calc(var(--en,100) * 1cqw);max-width:none;height:auto;animation:kenburns var(--dav,18s) ease-in-out infinite alternate}
@keyframes kenburns{0%,6%{transform:translate(0,0)}94%,100%{transform:translate(var(--tx,0),var(--ty,0))}}
.b-oyna::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.07) 48%,transparent 60%) no-repeat;background-size:250% 100%;background-position:150% 0;animation:yaltir 7s ease-in-out infinite}
@keyframes yaltir{0%,55%{background-position:150% 0}85%,100%{background-position:-60% 0}}
.b-tel{display:flex;justify-content:center;align-items:flex-start;flex:1;padding-top:6px;position:relative;min-height:0}
.b-tel .tel{--tw:230px}
.qulf-chip{position:absolute;left:50%;bottom:16%;translate:-50% 0;z-index:5;display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--qulf-fon);border:1px solid rgba(255,107,120,.5);color:var(--qizil);font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 14px 30px -12px rgba(0,0,0,.8);animation:chipPuls 2.6s ease-in-out infinite}
.qulf-chip svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
@keyframes chipPuls{50%{box-shadow:0 14px 30px -12px rgba(0,0,0,.8),0 0 0 6px rgba(255,107,120,.12)}}
.hisobot{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:28px;align-items:center}
.hisobot-viz{display:flex;flex-direction:column;gap:12px}
.hisobot-viz .b-oyna>img{position:static;width:100%;animation:none}
.chizish{clip-path:inset(0 100% 0 0);transition:clip-path 2s cubic-bezier(.6,.05,.25,1) .15s}
.korinadi .chizish{clip-path:inset(0 0 0 0)}
@media (max-width:900px){.b-karta,.b-karta.k4,.b-karta.k6{grid-column:span 6}.b-karta.uzun{grid-row:auto}.hisobot{grid-template-columns:minmax(0,1fr)}.b-tel{padding-block:8px 4px}}

/* ---------- Himoya ---------- */
.himoya-panjara{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.qalqon-qobiq{position:relative;display:grid;place-items:center;min-height:400px}
.qalqon-qobiq .halqa{position:absolute;width:230px;height:230px;border-radius:50%;border:1px solid rgba(25,195,255,.35);opacity:.5}
.harakat .qalqon-qobiq .halqa{animation:katta 3.6s ease-out infinite;animation-delay:var(--d)}
@keyframes katta{from{transform:scale(.7);opacity:.9}to{transform:scale(1.75);opacity:0}}
.qalqon{position:relative;z-index:2;width:176px;height:auto;filter:drop-shadow(0 20px 50px rgba(31,123,255,.45))}
.qalqon .q-yol{stroke-dasharray:380;animation:chizQ 2.2s cubic-bezier(.4,0,.2,1) both}
@keyframes chizQ{from{stroke-dashoffset:380}to{stroke-dashoffset:0}}
.qalqon .ilmoq{animation:qulfla .5s cubic-bezier(.3,1.6,.5,1) 1.6s both}
@keyframes qulfla{from{transform:translateY(-9px)}to{transform:none}}
.seyf{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--seyf-fon);border:1px solid var(--chiziq2);box-shadow:var(--soya);font-size:13px}
.harakat .seyf{animation:seyfSuz 6s ease-in-out infinite;animation-delay:var(--d)}
.seyf b{display:block;font-size:13px}
.seyf small{display:flex;gap:3px;margin-top:4px}
.seyf small i{display:block;width:6px;border-radius:2px;background:var(--grad)}
.seyf .s-qulf{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(43,212,127,.14);color:var(--yashil)}
.seyf .s-qulf svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.s1{left:2%;top:12%} .s2{right:0;top:30%;--d:-2s} .s3{left:10%;bottom:8%;--d:-4s}
@keyframes seyfSuz{50%{transform:translateY(-8px)}}
.himoya-royxat{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.himoya-royxat li{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:var(--shisha);border:1px solid var(--chiziq);font-size:16.5px}
.belgi-ok{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:rgba(43,212,127,.16);color:var(--yashil)}
.belgi-ok svg{width:15px;height:15px}
@media (max-width:900px){.himoya-panjara{grid-template-columns:minmax(0,1fr)}.qalqon-qobiq{min-height:330px}.s2{right:2%}}

/* ---------- Yakun ---------- */
.yakun{position:relative;text-align:center;overflow:hidden;isolation:isolate}
.yakun::before{content:"";position:absolute;left:0;right:0;bottom:-40%;height:120%;z-index:-1;background:radial-gradient(ellipse at 50% 100%,rgba(31,123,255,.32),transparent 60%)}
.yakun-ichki{display:flex;flex-direction:column;align-items:center;gap:24px}
.orbita{position:relative;width:200px;height:200px;display:grid;place-items:center;margin-bottom:6px}
.orbita img{position:relative;z-index:2;width:120px;filter:drop-shadow(0 0 40px rgba(31,123,255,.6))}
.orbita .yol{position:absolute;border-radius:50%;border:1px dashed var(--chiziq2)}
.harakat .orbita .yol{animation:aylan 22s linear infinite}
@keyframes aylan{to{transform:rotate(360deg)}}
.orbita .yol.y1{inset:0}
.orbita .yol.y2{inset:-30px;animation-duration:34s;animation-direction:reverse;border-style:solid;border-color:var(--chiziq)}
.orbita .yol.y3{inset:-62px;animation-duration:48s;border-color:rgba(150,185,255,.08)}
.orbita .yol b{position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--yashil);box-shadow:0 0 16px var(--yashil)}
.orbita .yol.y2 b{background:var(--moviy);box-shadow:0 0 16px var(--moviy);top:auto;bottom:-5px}
.yakun h2{font-size:clamp(30px,4.6vw,58px);max-width:18ch}
.yakun p{color:var(--xira);font-size:18px}
footer{border-top:1px solid var(--chiziq);padding-block:36px;color:var(--xira);font-size:14.5px}
.footer-ichki{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:flex-start}
.footer-ichki .brend{margin-bottom:10px}
.aloqa{display:flex;flex-direction:column;gap:6px}
.aloqa b{color:var(--matn)}
.aloqa a{text-decoration:none;color:inherit}
.aloqa a:hover{color:var(--matn)}

/* Ko'rinmayotgan bo'limdagi animatsiyalar to'xtab turadi; "To'xtatish" bosilsa — hammasi to'xtaydi */
[data-jonli]:not(.korinadi) *,[data-jonli]:not(.korinadi) *::before,[data-jonli]:not(.korinadi) *::after,
.toxtatildi *,.toxtatildi *::before,.toxtatildi *::after{animation-play-state:paused!important}
/* Tizim "harakatni kamaytirish"ni so'rasa: faqat katta harakatlar o'chadi (suzish, aylanish, sahna surilishi).
   Ilova namoyishi, yumshoq o'tishlar va sekin surilishlar ishlayveradi; ularni "To'xtatish" tugmasi bilan to'xtatish mumkin. */
.anim-chip{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);padding:10px 10px 10px 16px;border-radius:16px;background:var(--karta);border:1px solid var(--chiziq2);box-shadow:var(--soya);font-size:14px;line-height:1.35;color:var(--xira)}
.anim-chip .btn{padding:9px 14px;font-size:14px}
.anim-chip[hidden]{display:none}