/*
 * 5baho sayt to'plami (v3 "Jonli bozor"). Hamma sahifa shundan yig'iladi.
 * Ranglar tokens.css dan. Asos och qog'oz fon; to'q "kino" bo'limlari (.cine) faqat video, AI va tun lahzalari uchun.
 * Juft fayl: kit.js (harakat, til, scroll). Navigatsiya va pastki qism: _nav.html, _foot.html.
 */
:root{
  --night0:#07090D;--night1:#0D1117;--night2:#151A22;--nline:rgba(255,255,255,.1);--ntext:#EEF1F6;--ndim:#9AA3B2;
  --glow:#4FD1C5;--glow2:#7FE3D9;--violet:#6E5BFF;--sun:#FFB067;
  --wrap:1200px;--gut:clamp(18px,4vw,40px);
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --shadow-1:0 1px 2px rgba(20,23,28,.04),0 8px 24px -12px rgba(20,23,28,.14);
  --shadow-2:0 2px 6px rgba(20,23,28,.04),0 30px 60px -30px rgba(20,23,28,.32);
  --shadow-3:0 60px 120px -50px rgba(20,23,28,.5);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:500 16px/1.6 var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img,video,canvas,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
::selection{background:#BDEDE8;color:#07302D}
:focus-visible{outline:2.5px solid var(--teal);outline-offset:3px;border-radius:8px}
.cine :focus-visible{outline-color:var(--glow)}
.mono{font-family:var(--font-mono)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(var(--wrap),100%);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:fixed;left:12px;top:-60px;z-index:200;padding:10px 16px;border-radius:12px;background:var(--ink);color:#fff;font-weight:800;transition:top .2s}
.skip:focus{top:12px}

/* ---------- sahifalar orasida silliq o'tish (View Transitions, yangi brauzerlarda) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.32s var(--ease-io) both vtOut}
::view-transition-new(root){animation:.5s var(--ease-out) both vtIn}
@keyframes vtOut{to{opacity:0;transform:translateY(-12px) scale(.985);filter:blur(4px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(18px)}}
.nav{view-transition-name:nav}

/* ---------- scroll ko'rsatkichi (CSS scroll-driven animation) ---------- */
.progress{position:fixed;z-index:120;left:0;right:0;top:0;height:2.5px;transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,var(--teal),var(--glow) 50%,var(--sun))}
@supports (animation-timeline:scroll()){.progress{animation:grow linear both;animation-timeline:scroll(root)}}
@keyframes grow{to{transform:scaleX(1)}}

/* ---------- donador (film grain) ---------- */
.grain{position:fixed;inset:0;z-index:110;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  contain:strict}
@media (hover:none),(max-width:980px){.grain{display:none}.nav{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}}

/* ================= NAVIGATSIYA ================= */
.nav{position:fixed;z-index:100;top:calc(12px + env(safe-area-inset-top,0px));left:50%;translate:-50% 0;width:min(1180px,calc(100% - 20px));
  display:flex;align-items:center;gap:6px;padding:8px 8px 8px 20px;border-radius:999px;
  background:rgba(255,255,255,.66);color:var(--ink);border:1px solid rgba(20,23,28,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 40px -24px rgba(20,23,28,.3);
  backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
  transition:background-color .5s,color .5s,border-color .5s,box-shadow .5s,translate .5s var(--ease-out)}
.nav.dark{background:rgba(10,13,18,.58);color:var(--ntext);border-color:rgba(255,255,255,.1);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 40px -20px rgba(0,0,0,.6)}
.nav.hide{translate:-50% calc(-100% - 30px)}
.nav .logo{flex:none;width:84px;height:25px;margin-right:10px}
.nav .logo svg{width:100%;height:100%}
.nav .logo rect[fill="#FFFFFF"]{fill:currentColor}
.nav .links{display:flex;gap:2px}
.nav .links a{position:relative;padding:9px 14px;border-radius:999px;font:700 14px/1 var(--font-sans);opacity:.72;transition:opacity .2s,background-color .2s}
.nav .links a:hover,.nav .links a[aria-current=page]{opacity:1;background:rgba(20,23,28,.06)}
.nav.dark .links a:hover,.nav.dark .links a[aria-current=page]{background:rgba(255,255,255,.08)}
.nav .links a[aria-current=page]::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--teal)}
.nav.dark .links a[aria-current=page]::after{background:var(--glow)}
.nav .sp{flex:1}
.langs{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(20,23,28,.05)}
.nav.dark .langs,.cine .langs{background:rgba(255,255,255,.07)}
.langs button{all:unset;cursor:pointer;padding:6px 9px;border-radius:999px;font:700 11.5px/1 var(--font-mono);letter-spacing:.04em;opacity:.6;transition:.2s}
.langs button[hidden]{display:none}
.langs .sep{width:1px;margin:5px 3px;background:currentColor;opacity:.18}
.langs [data-alifbo]{font-family:var(--font-sans);font-weight:800;font-size:12.5px;letter-spacing:0}
.langs button[aria-pressed=true]{opacity:1;background:#fff;color:var(--ink);box-shadow:0 2px 8px -2px rgba(20,23,28,.2)}
.nav.dark .langs button[aria-pressed=true],.cine .langs button[aria-pressed=true]{background:rgba(255,255,255,.16);color:#fff;box-shadow:none}
.burger{all:unset;display:none;cursor:pointer;width:42px;height:42px;border-radius:50%;place-items:center;background:rgba(20,23,28,.06)}
.nav.dark .burger{background:rgba(255,255,255,.1)}
.burger i{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;position:relative;transition:transform .35s var(--ease-out),background-color .2s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease-out),top .35s var(--ease-out)}
.burger i::before{top:-6px}.burger i::after{top:6px}
.menu-open .nav{background:rgba(10,13,18,.58);color:var(--ntext);border-color:rgba(255,255,255,.1);box-shadow:none}
.menu-open .burger i{background:transparent}
.menu-open .burger i::before{top:0;transform:rotate(45deg)}
.menu-open .burger i::after{top:0;transform:rotate(-45deg)}
.sheetmenu{position:fixed;inset:0;z-index:99;background:var(--night0);color:var(--ntext);display:flex;flex-direction:column;justify-content:flex-end;
  padding:110px var(--gut) calc(30px + env(safe-area-inset-bottom,0px));clip-path:circle(0% at calc(100% - 44px) 40px);visibility:hidden;
  transition:clip-path .7s var(--ease-io),visibility 0s .7s}
.menu-open .sheetmenu{clip-path:circle(150% at calc(100% - 44px) 40px);visibility:visible;transition:clip-path .8s var(--ease-io)}
.sheetmenu a.big{display:flex;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid var(--nline);font:800 clamp(36px,10vw,56px)/1.05 var(--font-sans);letter-spacing:-.04em;
  opacity:0;translate:0 30px;transition:opacity .5s,translate .7s var(--ease-out)}
.sheetmenu a.big small{font:700 12px var(--font-mono);color:var(--glow);letter-spacing:.1em}
.menu-open .sheetmenu a.big{opacity:1;translate:0 0}
.sheetmenu .row{display:flex;gap:10px;align-items:center;margin-top:26px;flex-wrap:wrap}
@media (max-width:900px){
  .nav .links,.nav .langs{display:none}
  .burger{display:grid}
  .nav{padding:7px 7px 7px 18px}
}
@media (min-width:901px){.sheetmenu{display:none}}

/* ================= TUGMALAR ================= */
.btn{--bg:var(--ink);--fg:#fff;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border-radius:999px;
  background:var(--bg);color:var(--fg);font:800 15.5px/1 var(--font-sans);letter-spacing:-.01em;white-space:nowrap;border:0;cursor:pointer;isolation:isolate;overflow:hidden;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background-color .25s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex:none;transition:transform .35s var(--ease-out)}
.btn:hover svg.arr{transform:translateX(4px)}
/* yorug'lik chizig'i o'tadi */
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 66%);translate:-120% 0;transition:translate .9s var(--ease-out)}
.btn:hover::after{translate:120% 0}
.btn.sm{height:42px;padding:0 18px;font-size:14px}
.btn.lg{height:62px;padding:0 32px;font-size:17px}
.btn-ink{--bg:var(--ink);--fg:#fff;box-shadow:0 14px 30px -14px rgba(20,23,28,.6)}
.btn-ink:hover{--bg:#000;box-shadow:0 20px 40px -16px rgba(20,23,28,.7)}
.btn-teal{--bg:linear-gradient(135deg,#14B8AD,#07807B);--fg:#fff;background:var(--bg);box-shadow:0 16px 40px -14px rgba(7,128,123,.75),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-buy{--bg:linear-gradient(135deg,#FF9A52,#E2582B);--fg:#fff;background:var(--bg);box-shadow:0 16px 40px -14px rgba(232,116,43,.75),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-line{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(20,23,28,.16)}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
/* to'q bo'limda --ink och rangga aylanadi: tugma matni yo'qolib qolmasin */
.cine .btn-ink,.cine .btn:not([class*="btn-"]){--bg:#fff;--fg:#14171C}
.cine .btn-line{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.24)}.cine .btn-line:hover{box-shadow:inset 0 0 0 1.5px #fff}
.btn-glass{--bg:rgba(255,255,255,.08);--fg:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn-glass:hover{--bg:rgba(255,255,255,.14)}
.btn-white{--bg:#fff;--fg:#14171C;box-shadow:0 16px 40px -16px rgba(0,0,0,.5)}
/* aylanuvchi chegara: asosiy harakat */
.btn-ring{overflow:visible}
.btn-ring::before{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-2;padding:2px;
  background:conic-gradient(from var(--ang),var(--glow),var(--sun),var(--violet),var(--glow));animation:ang 4s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes ang{to{--ang:360deg}}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:800;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.link svg{width:16px;height:16px;transition:transform .3s var(--ease-out)}
.link:hover svg{transform:translateX(3px)}
.mag{display:inline-block}

/* ================= MATN ================= */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 12px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--teal-ink)}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none;animation:breathe 2.4s infinite}
.eyebrow.buy{color:var(--apricot-ink)}.eyebrow.buy i{background:var(--apricot);animation-name:breatheB}
.cine .eyebrow{color:var(--glow2)}.cine .eyebrow i{background:var(--glow)}
@keyframes breathe{0%{box-shadow:0 0 0 0 rgba(79,209,197,.6)}70%{box-shadow:0 0 0 9px rgba(79,209,197,0)}100%{box-shadow:0 0 0 0 rgba(79,209,197,0)}}
@keyframes breatheB{0%{box-shadow:0 0 0 0 rgba(232,116,43,.5)}70%{box-shadow:0 0 0 9px rgba(232,116,43,0)}100%{box-shadow:0 0 0 0 rgba(232,116,43,0)}}
.d0{font-weight:800;font-size:clamp(50px,7.6vw,120px);line-height:.92;letter-spacing:-.06em;margin:0;text-wrap:balance}
.d1{font-weight:800;font-size:clamp(44px,6.6vw,100px);line-height:.94;letter-spacing:-.055em;margin:0;text-wrap:balance}
.d2{font-weight:800;font-size:clamp(36px,4.8vw,72px);line-height:.98;letter-spacing:-.05em;margin:0;text-wrap:balance}
.d3{font-weight:800;font-size:clamp(24px,2.4vw,34px);line-height:1.1;letter-spacing:-.035em;margin:0}
.lede{font-size:clamp(17px,1.45vw,20px);line-height:1.55;color:var(--muted);max-width:44ch;margin:0;text-wrap:pretty}
.cine .lede{color:var(--ndim)}
.muted{color:var(--muted)}.cine .muted{color:var(--ndim)}
.grad{background:linear-gradient(100deg,#0EA79D 0%,#4FD1C5 38%,#0E8F87 62%,#E8742B 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;background-position:30% 50%}
.cine .grad{background-image:linear-gradient(100deg,#2FB8AD 0%,#A8FFF4 30%,#4FD1C5 46%,#12B5AA 62%,#FFB067 100%)}
.hl{background:linear-gradient(transparent 62%,rgba(255,176,103,.5) 62%,rgba(255,176,103,.5) 88%,transparent 88%);padding:0 .04em}
.caret::after{content:"";display:inline-block;width:.5em;height:.09em;margin-left:.06em;background:currentColor;vertical-align:baseline;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.line-mask{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
/* SplitText niqobi: pastki (g, q, y) va ustki (Ö, Ğ) qismlar kesilmasin */
.ln-mask{padding:.12em 0 .18em;margin:-.12em 0 -.18em}

/* ================= BO'LIMLAR ================= */
.sec{position:relative;padding-block:clamp(90px,12vw,170px)}
.sec.tight{padding-block:clamp(60px,8vw,110px)}
.head{display:flex;flex-direction:column;gap:20px;max-width:900px}
.head.center{align-items:center;text-align:center;margin-inline:auto}
.head.split{max-width:none;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
/* to'q kino bo'limi: qog'oz ustida katta yumaloq "ekran" */
.cine{position:relative;background:var(--night0);color:var(--ntext);border-radius:clamp(28px,3.4vw,48px);margin-inline:clamp(6px,1vw,14px);overflow:clip;isolation:isolate;
  --paper:var(--night0);--surface:var(--night2);--ink:var(--ntext);--muted:var(--ndim);--line:var(--nline);--teal-ink:var(--glow2)}
.cine.flush{border-radius:0;margin-inline:0}
.cine+.cine{margin-top:clamp(6px,1vw,14px)}
.aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:.7;contain:strict}
.aurora i{position:absolute;border-radius:50%;animation:drift 20s ease-in-out infinite alternate;will-change:transform}
.aurora i:nth-child(1){width:55vmax;height:55vmax;left:-15vmax;top:-10vmax;background:radial-gradient(circle,rgba(15,185,174,.85),rgba(15,185,174,.25) 35%,transparent 68%)}
.aurora i:nth-child(2){width:45vmax;height:45vmax;right:-12vmax;top:-12vmax;background:radial-gradient(circle,rgba(240,122,46,.75),rgba(240,122,46,.2) 35%,transparent 66%);animation-duration:24s;animation-delay:-7s;opacity:.8}
.aurora i:nth-child(3){width:40vmax;height:40vmax;left:30%;bottom:-20vmax;background:radial-gradient(circle,rgba(110,91,255,.8),rgba(110,91,255,.2) 35%,transparent 66%);opacity:.6;animation-duration:28s;animation-delay:-12s}
.aurora.soft{opacity:.45}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,4vh) scale(1.12)}100%{transform:translate(-4vw,7vh) scale(.94)}}
.gridlines{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent)}

/* ================= KARTALAR ================= */
.card{position:relative;background:var(--surface);border-radius:28px;padding:28px;box-shadow:var(--shadow-1);isolation:isolate;overflow:hidden;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.cine .card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.card.lift:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
/* sichqoncha yorug'ligi */
.spot::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(79,209,197,.14),transparent 60%)}
.spot:hover::before{opacity:1}
.card .ic{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--teal-soft);color:var(--teal-ink);margin-bottom:22px}
.card .ic.buy{background:var(--apricot-soft);color:var(--apricot-ink)}
.cine .card .ic{background:rgba(79,209,197,.12);color:var(--glow)}
.card .ic svg{width:24px;height:24px}
.card h3{margin:0 0 8px;font:800 21px/1.2 var(--font-sans);letter-spacing:-.025em}
.card p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.bento>*{grid-column:span 4;min-width:0}
.bento .w6{grid-column:span 6}.bento .w8{grid-column:span 8}.bento .w12{grid-column:span 12}.bento .w3{grid-column:span 3}
@media (max-width:980px){.bento>*,.bento .w3,.bento .w6,.bento .w8{grid-column:span 6}}
@media (max-width:640px){.bento{gap:10px}.bento>*,.bento .w6,.bento .w8,.bento .w12{grid-column:span 12}.bento .w3{grid-column:span 6}.card{padding:22px;border-radius:24px}
  .bento .w3{padding:18px}.bento .w3 .ic{width:40px;height:40px;border-radius:13px;margin-bottom:14px}.bento .w3 h3{font-size:16.5px}.bento .w3 p{font-size:13.5px}}

/* ================= CHIP VA BELGILAR ================= */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:0;background:var(--surface);color:var(--ink);
  font:700 14px/1 var(--font-sans);cursor:pointer;box-shadow:inset 0 0 0 1.5px rgba(20,23,28,.08);transition:background-color .25s,color .25s,box-shadow .25s,transform .2s;white-space:nowrap}
.chip img{width:24px;height:24px;margin-left:-6px;transition:transform .35s var(--ease-out)}
.chip:hover img{transform:translateY(-2px) rotate(-8deg) scale(1.12)}
.chip:hover{box-shadow:inset 0 0 0 1.5px rgba(20,23,28,.25)}
.chip.on,.chip[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.chip:active{transform:scale(.95)}
.cine .chip{background:rgba(255,255,255,.06);color:var(--ntext);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.cine .chip.on{background:#fff;color:var(--night0)}
.tag{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;font:800 12px/1 var(--font-sans);background:var(--cat-bg,var(--teal-soft));color:var(--cat-ink,var(--teal-ink))}
.live{display:inline-flex;align-items:center;gap:7px;font:700 11px/1 var(--font-mono);letter-spacing:.12em;color:var(--teal-ink)}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live);animation:breathe 2s infinite}

/* ================= MARQUEE ================= */
.marquee{position:relative;overflow:hidden;padding-block:20px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:12px;width:max-content;will-change:transform}
.marquee .chip{height:52px;padding:0 22px;font-size:16px;box-shadow:var(--shadow-1)}
.marquee .chip img{width:34px;height:34px}

/* ================= REELS KARTASI (haqiqiy video) ================= */
.reel{position:relative;flex:none;aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:#111 center/cover no-repeat;color:#fff;isolation:isolate;
  box-shadow:0 40px 80px -40px rgba(20,23,28,.7);transform-style:preserve-3d}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel .shade{position:absolute;inset:auto 0 0;height:58%;background:linear-gradient(transparent,rgba(5,7,10,.88));pointer-events:none}
.reel .bars{position:absolute;left:14px;right:14px;top:12px;height:3px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}
.reel .bars b{display:block;height:100%;width:0;background:#fff}
.reel .tag{position:absolute;left:14px;top:26px;z-index:2}
.reel .ask{position:absolute;z-index:2;right:12px;top:22px;height:34px;padding:0 13px;border-radius:999px;border:0;background:var(--apricot);color:#fff;
  font:800 12.5px/1 var(--font-sans);display:flex;align-items:center;gap:6px;box-shadow:0 10px 22px -8px rgba(232,116,43,.9);cursor:pointer;transition:transform .3s var(--ease-out)}
.reel .ask:hover{transform:scale(1.06)}
.reel .ask svg{width:14px;height:14px}
.reel .meta{position:absolute;left:16px;right:16px;bottom:16px;display:flex;flex-direction:column;gap:3px;z-index:2}
.reel .meta b{font:800 clamp(18px,1.7vw,23px)/1.1 var(--font-sans);letter-spacing:-.03em}
.reel .meta span{font-size:13px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reel .glare{position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.22),transparent 45%);mix-blend-mode:overlay;opacity:0;transition:opacity .3s}
.reel:hover .glare{opacity:1}

/* ekrandan tashqaridagi bo'limlar animatsiyasi to'xtaydi (kit.js .off qo'yadi) */
.off *,.off *::before,.off *::after{animation-play-state:paused!important}

/* ================= AI ORB (stiker o'rniga: jonli "ovoz" sferasi) ================= */
.orb{--s:96px;--o1:#7FE3D9;--o2:#0FA89E;--o3:#06322F;position:relative;width:var(--s);aspect-ratio:1;border-radius:50%;flex:none;isolation:isolate;overflow:hidden;
  background:radial-gradient(circle at 50% 120%,var(--o1),var(--o2) 45%,var(--o3) 80%);
  box-shadow:inset 0 -6px 18px rgba(255,255,255,.18),inset 0 10px 24px rgba(0,0,0,.35),0 calc(var(--s)*.2) calc(var(--s)*.5) calc(var(--s)*-.2) var(--o2)}
.orb .b{position:absolute;border-radius:50%;opacity:.9;will-change:transform}
.orb .b:nth-child(1){width:80%;height:80%;left:-10%;top:-5%;background:radial-gradient(circle at 40% 40%,var(--o1),color-mix(in srgb,var(--o1) 35%,transparent) 38%,transparent 70%);animation:blobA 7s ease-in-out infinite}
.orb .b:nth-child(2){width:75%;height:75%;right:-12%;bottom:-12%;background:radial-gradient(circle at 60% 60%,rgba(255,255,255,.9),rgba(255,255,255,.25) 30%,transparent 62%);opacity:.4;animation:blobB 9s ease-in-out infinite}
.orb .b:nth-child(3){width:70%;height:70%;left:15%;top:20%;background:radial-gradient(circle at 30% 70%,var(--o1),transparent 60%);animation:blobB 11s ease-in-out infinite reverse;opacity:.5}
.orb::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.75),rgba(255,255,255,0) 22%),radial-gradient(circle at 70% 85%,rgba(255,255,255,.18),transparent 30%);pointer-events:none}
.orb svg{position:absolute;left:50%;top:50%;width:34%;height:34%;translate:-50% -50%;z-index:2;color:#fff;opacity:.95}
.orb.talk{animation:talk 1.4s ease-in-out infinite}
@keyframes blobA{0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}50%{transform:translate(18%,12%) rotate(120deg) scale(1.15)}}
@keyframes blobB{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-20%,-14%) rotate(-140deg)}}
@keyframes talk{0%,100%{transform:scale(1)}30%{transform:scale(1.06)}55%{transform:scale(.98)}75%{transform:scale(1.04)}}
.orb-wrap{position:relative;display:grid;place-items:center}
.orb-wrap .ring{position:absolute;inset:-14%;border-radius:50%;border:1.5px solid var(--o1,#4FD1C5);opacity:0;animation:ring 2.4s ease-out infinite}
.orb-wrap .ring:nth-child(2){animation-delay:1.2s}
@keyframes ring{0%{transform:scale(.8);opacity:.55}100%{transform:scale(1.35);opacity:0}}
/* xodim ranglari */
.o-sales{--o1:#8CF0E6;--o2:#12A89D;--o3:#05302C}
.o-operator{--o1:#FFC48A;--o2:#E8742B;--o3:#3A1606}
.o-hunter{--o1:#B3A6FF;--o2:#6E5BFF;--o3:#1A1347}
.o-smm{--o1:#FF9FC1;--o2:#E0437A;--o3:#3D0A1E}
.o-reels{--o1:#FFE28A;--o2:#E0A100;--o3:#3A2900}
.o-secretary{--o1:#9FD8FF;--o2:#1F7FD1;--o3:#06233D}
.o-price{--o1:#B8F5A0;--o2:#3FA34D;--o3:#0D2E12}
.o-cashier{--o1:#7FF0C0;--o2:#14A970;--o3:#04301F}
.o-editor{--o1:#E1C6FF;--o2:#9A55E8;--o3:#2A0D47}

/* ================= AI XODIMLAR JAMOASI (orblar to'ri va jonli lenta) ================= */
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:64px}
.staff{display:flex;align-items:center;gap:18px;padding:20px;border-radius:26px;cursor:default;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:box-shadow .5s,background-color .5s,transform .5s var(--ease-out)}
.staff .orb{--s:72px}
.staff b{display:block;font:800 18px/1.2 var(--font-sans);letter-spacing:-.02em}
.staff span{display:block;color:var(--ndim);font-size:14px;line-height:1.4;margin-top:3px}
.staff .wv{display:flex;gap:3px;align-items:center;height:16px;margin-top:9px;opacity:.35;transition:opacity .4s}
.staff .wv i{width:3px;height:16px;border-radius:2px;background:var(--o1,#4FD1C5);transform:scaleY(.25)}
.staff.on{box-shadow:inset 0 0 0 1px rgba(79,209,197,.45),0 30px 60px -30px rgba(79,209,197,.35);transform:translateY(-4px)}
.staff.on .wv{opacity:1}
.staff.on .wv i{animation:wv .8s ease-in-out infinite}
.staff.on .wv i:nth-child(2n){animation-delay:-.2s}.staff.on .wv i:nth-child(3n){animation-delay:-.45s}
@keyframes wv{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.staff.on .orb{animation:talk 1.4s ease-in-out infinite}
.livefeed{margin:22px auto 0;width:100%;padding:20px 22px;border-radius:24px;background:rgba(10,13,18,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;flex-direction:column;gap:8px}
.livefeed .hd{display:flex;align-items:center;gap:10px;font:700 11.5px var(--font-mono);letter-spacing:.14em;color:var(--glow2)}
.livefeed .hd i{width:7px;height:7px;border-radius:50%;background:#FF5F57;animation:breathe 1.6s infinite}
.livefeed .ln{font:500 13.5px/1.5 var(--font-mono);color:#C8CFDA;min-height:1.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.livefeed .ln em{font-style:normal;color:var(--glow2)}
@media (max-width:980px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.team{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .staff{flex-direction:column;align-items:flex-start;gap:12px;padding:16px;border-radius:22px}.staff .orb{--s:50px}
  .staff b{font-size:16px}.staff span{font-size:12.5px}.staff .wv{display:none}}

/* ================= TELEFON MAKETI ================= */
.device{position:relative;width:300px;aspect-ratio:300/620;border-radius:52px;padding:11px;flex:none;
  background:linear-gradient(160deg,#2A3140,#0B0E13 40%,#1A1F28);box-shadow:0 60px 120px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08),inset 0 0 0 2px #2E3644}
.device .scr{position:relative;width:100%;height:100%;border-radius:42px;overflow:hidden;background:#000;color:#fff}
.device .scr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.device .notch{position:absolute;left:50%;top:10px;width:84px;height:24px;margin-left:-42px;border-radius:999px;background:#000;z-index:5}

/* ================= BILDIRISHNOMA (toast) ================= */
.toast{position:absolute;z-index:4;display:flex;align-items:center;gap:12px;padding:11px 16px 11px 11px;border-radius:20px;min-width:230px;color:var(--ntext);
  background:rgba(16,20,27,.74);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8);opacity:0;transform:translateY(16px) scale(.96)}
.toast .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;font:800 15px var(--font-sans)}
.toast b{display:block;font-size:14px;line-height:1.3}
.toast small{display:block;font:500 12px/1.3 var(--font-mono);color:var(--ndim)}

/* ================= FORMA ================= */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font:700 12px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.input,.field input,.field textarea{width:100%;min-height:54px;padding:15px 18px;border-radius:16px;border:0;background:var(--surface);color:var(--ink);font:600 16px/1.4 var(--font-sans);
  box-shadow:inset 0 0 0 1.5px rgba(20,23,28,.1);transition:box-shadow .25s;outline:0;-webkit-appearance:none;appearance:none}
.field textarea{min-height:120px;resize:vertical}
.input:hover,.field input:hover,.field textarea:hover{box-shadow:inset 0 0 0 1.5px rgba(20,23,28,.22)}
.input:focus,.field input:focus,.field textarea:focus{box-shadow:inset 0 0 0 2px var(--teal),0 0 0 5px rgba(7,128,123,.12)}
.input::placeholder,.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font:600 14px/1.45 var(--font-sans);color:var(--muted)}
.check input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;border-radius:7px;box-shadow:inset 0 0 0 1.5px rgba(20,23,28,.25);background:var(--surface);cursor:pointer;
  display:grid;place-items:center;transition:background-color .2s,box-shadow .2s}
.check input::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;rotate:45deg;translate:0 -1px;scale:0;transition:scale .25s var(--ease-out)}
.check input:checked{background:var(--teal);box-shadow:none}
.check input:checked::after{scale:1}
.err{min-height:20px;color:var(--danger);font:700 14px/1.4 var(--font-sans)}

/* ================= FAQ ================= */
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--surface);border-radius:22px;box-shadow:var(--shadow-1);overflow:hidden;transition:box-shadow .3s}
.faq details[open]{box-shadow:var(--shadow-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;font:800 18px/1.35 var(--font-sans);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:34px;height:34px;border-radius:50%;background:var(--sunken);position:relative;transition:background-color .3s,rotate .4s var(--ease-out)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--ink)}
.faq summary i::after{rotate:90deg;transition:rotate .4s var(--ease-out)}
.faq details[open] summary i{background:var(--ink);rotate:180deg}
.faq details[open] summary i::before,.faq details[open] summary i::after{background:#fff}
.faq details[open] summary i::after{rotate:0deg}
.faq details p{margin:0;padding:0 24px 24px;color:var(--muted);max-width:70ch}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease-out),content-visibility .45s allow-discrete}
.faq details[open]::details-content{block-size:auto}
@supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}}

/* ================= PASTKI QISM ================= */
.foot{position:relative;margin:clamp(6px,1vw,14px);margin-top:clamp(60px,8vw,120px);border-radius:clamp(28px,3.4vw,48px);background:var(--night0);color:var(--ntext);overflow:hidden;isolation:isolate;
  padding:clamp(48px,6vw,80px) clamp(22px,4vw,56px) 30px}
.foot .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px}
.foot h4{margin:0 0 14px;font:700 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ndim)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot ul a{font-weight:700;opacity:.82;transition:opacity .2s}
.foot ul a:hover{opacity:1}
.foot .pitch{font:800 clamp(24px,2.4vw,32px)/1.15 var(--font-sans);letter-spacing:-.03em;margin:0 0 20px;max-width:18ch}
.foot .word{display:block;margin-top:clamp(40px,6vw,80px);color:var(--ntext)}
.foot .word svg{width:100%;height:auto}
.foot .word rect[fill="#FFFFFF"]{fill:currentColor}
.foot .base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px;padding-top:22px;border-top:1px solid var(--nline);font:500 12.5px/1.4 var(--font-mono);color:var(--ndim)}
@media (max-width:860px){.foot .cols{grid-template-columns:1fr 1fr}.foot .cols>:first-child{grid-column:1/-1}}

/* ================= TELEFONDA PASTKI TUGMA ================= */
.mbar{position:fixed;z-index:90;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:none;gap:8px;padding:8px;border-radius:999px;
  background:rgba(255,255,255,.78);box-shadow:0 20px 50px -20px rgba(20,23,28,.5),inset 0 0 0 1px rgba(20,23,28,.06);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  translate:0 140%;transition:translate .6s var(--ease-out)}
.mbar .btn{flex:1;height:48px}
.mbar.show{translate:0 0}
@media (max-width:760px){.mbar{display:flex}}

/* ================= KURSOR (sichqonchali qurilmada) ================= */
.cur,.cur-ring{position:fixed;left:0;top:0;z-index:130;pointer-events:none;border-radius:50%;will-change:transform}
.cur{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--teal);mix-blend-mode:multiply}
.cur-ring{width:40px;height:40px;margin:-20px 0 0 -20px;border:1.5px solid rgba(7,128,123,.45);transition:width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),background-color .3s,border-color .3s}
.cur-ring.big{width:76px;height:76px;margin:-38px 0 0 -38px;background:rgba(79,209,197,.12);border-color:rgba(7,128,123,.6)}
.on-cine .cur{background:var(--glow);mix-blend-mode:screen}
.on-cine .cur-ring{border-color:rgba(79,209,197,.6)}
@media (pointer:coarse),(hover:none){.cur,.cur-ring{display:none}}

/* ================= PAYDO BO'LISH (JS yo'q bo'lsa hammasi ko'rinadi) ================= */
.js [data-split]{visibility:hidden}
.no-motion [data-split]{visibility:visible!important}
.js [data-reveal]{opacity:0;transform:translateY(40px)}
.js [data-reveal=fade]{transform:none}
.js [data-reveal=scale]{transform:scale(.94)}
.js [data-reveal=left]{transform:translateX(-40px)}
.js [data-reveal=right]{transform:translateX(40px)}
.no-motion [data-reveal]{opacity:1!important;transform:none!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .grain{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}