/* ============ tokenlar ============ */
:root{
  --ground:#F4F7F6; --surface:#FFFFFF; --surface2:#EEF3F1; --ink:#13201C; --ink2:#3C4B46; --muted:#5F6F6A;
  --line:rgba(19,32,28,.09); --line2:rgba(19,32,28,.06);
  --em:#0E9C7E; --em-ink:#0B7F67; --em-soft:rgba(14,156,126,.09); --em-line:rgba(14,156,126,.22); --rule:rgba(14,156,126,.10);
  --pine:#0A352D; --on-pine:#EAF6F2; --on-pine2:rgba(234,246,242,.72);
  --amber:#B86E0C; --amber-soft:rgba(217,138,31,.12); --red:#C9403A; --red-soft:rgba(201,64,58,.10);
  --paper:#FFFDF5; --paper-line:rgba(52,98,160,.20); --paper-margin:rgba(201,64,58,.45); --pen:#23408F;
  --sh1:0 1px 2px rgba(16,24,40,.04), 0 22px 48px -30px rgba(16,24,40,.22);
  --sh2:0 1px 2px rgba(16,24,40,.05), 0 34px 70px -38px rgba(10,53,45,.45);
  --disp:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Onest","Segoe UI",system-ui,-apple-system,sans-serif;
  --hand:"Caveat","Segoe Script","Comic Sans MS",cursive;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0C1412; --surface:#131D1A; --surface2:#1B2824; --ink:#E8EFEC; --ink2:#C3CFCB; --muted:#94A39E;
    --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.06);
    --em:#12A987; --em-ink:#3CCBA8; --em-soft:rgba(25,184,146,.12); --em-line:rgba(25,184,146,.28); --rule:rgba(60,203,168,.07);
    --pine:#0F2621; --amber:#E0A04A; --amber-soft:rgba(224,160,74,.14); --red:#EE7A74; --red-soft:rgba(238,122,116,.13);
    --paper:#1A2420; --paper-line:rgba(140,175,230,.16); --paper-margin:rgba(238,122,116,.4); --pen:#A9BEFF;
    --sh1:0 1px 2px rgba(0,0,0,.3), 0 22px 48px -30px rgba(0,0,0,.7); --sh2:0 1px 2px rgba(0,0,0,.3), 0 34px 70px -38px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#0C1412; --surface:#131D1A; --surface2:#1B2824; --ink:#E8EFEC; --ink2:#C3CFCB; --muted:#94A39E;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.06);
  --em:#12A987; --em-ink:#3CCBA8; --em-soft:rgba(25,184,146,.12); --em-line:rgba(25,184,146,.28); --rule:rgba(60,203,168,.07);
  --pine:#0F2621; --amber:#E0A04A; --amber-soft:rgba(224,160,74,.14); --red:#EE7A74; --red-soft:rgba(238,122,116,.13);
  --paper:#1A2420; --paper-line:rgba(140,175,230,.16); --paper-margin:rgba(238,122,116,.4); --pen:#A9BEFF;
  --sh1:0 1px 2px rgba(0,0,0,.3), 0 22px 48px -30px rgba(0,0,0,.7); --sh2:0 1px 2px rgba(0,0,0,.3), 0 34px 70px -38px rgba(0,0,0,.8);
}

/* ============ asos ============ */
*{box-sizing:border-box} html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--ground); color:var(--ink); font:400 16px/1.6 var(--body); overflow-x:clip; -webkit-font-smoothing:antialiased}
img,svg{max-width:100%} a{color:inherit; text-decoration:none} button,input,select{font:inherit; color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0} ul,ol{padding:0; list-style:none}
.wrap{width:100%; max-width:1180px; margin-inline:auto; padding-inline:22px}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--em); outline-offset:3px; border-radius:6px}
.ico{width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; height:48px; padding:0 22px; border-radius:13px; border:1px solid transparent; font-weight:600; font-size:15px; cursor:pointer; white-space:nowrap; transition:background .2s, border-color .2s, transform .12s, box-shadow .25s}
.btn:active{transform:scale(.985)} .btn .ico{transition:transform .3s var(--ease)} .btn:hover .ico{transform:translateX(3px)}
.btn-p{background:#0E9C7E; color:#fff; box-shadow:0 10px 22px -14px rgba(14,156,126,.8)} .btn-p:hover{background:#12A987; box-shadow:0 14px 28px -14px rgba(14,156,126,.95)}
.btn-g{background:var(--surface); border-color:var(--line); color:var(--ink)} .btn-g:hover{border-color:var(--em-line)}
.btn-s{height:40px; padding:0 16px; font-size:14px; border-radius:11px}
.btn-w{background:#fff; color:#0A352D} .btn-w:hover{background:#EAF6F2}
.btn-o{background:transparent; border-color:rgba(234,246,242,.3); color:var(--on-pine)} .btn-o:hover{border-color:rgba(234,246,242,.6)}

.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--em-ink)}
.eyebrow i{width:18px; height:2px; border-radius:2px; background:currentColor; opacity:.7}
.h2{font:600 clamp(27px,3.3vw,40px)/1.12 var(--disp); letter-spacing:-.02em; text-wrap:balance}
.lead{color:var(--muted); font-size:17px; max-width:60ch; text-wrap:pretty}
.sec{padding-block:clamp(64px,8vw,112px)} .sec.t0{padding-top:0}
.sec-head{display:grid; gap:14px; margin-bottom:clamp(30px,4vw,52px)}

/* sichqoncha ortidan yuradigan nur */
.glow{position:relative} .glow:before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3; opacity:0; transition:opacity .35s; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(14,156,126,.10), transparent 70%)} .glow:hover:before{opacity:1}

/* ============ yuqori panel ============ */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:color-mix(in srgb, var(--ground) 86%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s}
.top.scrolled{border-bottom-color:var(--line2); box-shadow:0 10px 30px -24px rgba(10,53,45,.5)}
.top .wrap{display:flex; align-items:center; gap:28px; height:68px}
.prog{position:absolute; left:0; bottom:-1px; height:2px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,#14B8A6,#0E9C7E)}
.brand{display:flex; align-items:center; gap:10px} .brand svg{width:34px; height:34px; border-radius:10px; box-shadow:0 6px 14px -8px rgba(14,156,126,.6)}
.brand span{display:flex; flex-direction:column; line-height:1.05} .brand b{font-size:16px; font-weight:600; letter-spacing:-.01em} .brand small{font-size:8.5px; font-weight:600; letter-spacing:.22em; color:var(--em-ink); margin-top:2px}
.brand .bar{transform-box:fill-box; transform-origin:50% 100%} .brand:hover .bar{animation:barUp .7s var(--ease)} .brand:hover .bar.b2{animation-delay:.08s} .brand:hover .bar.b3{animation-delay:.16s}
@keyframes barUp{0%{transform:scaleY(.3)} 100%{transform:scaleY(1)}}
.nav{display:flex; gap:26px; margin-left:12px; font-size:14.5px; font-weight:500; color:var(--ink2)}
.nav a{white-space:nowrap; position:relative; padding-block:6px} .nav a:after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:var(--em); transform:scaleX(0); transform-origin:0 50%; transition:transform .35s var(--ease)}
.nav a:hover, .nav a.on{color:var(--em-ink)} .nav a.on:after, .nav a:hover:after{transform:scaleX(1)}
.top-r{margin-left:auto; display:flex; align-items:center; gap:10px}
.icon-btn{width:40px; height:40px; display:grid; place-items:center; border-radius:11px; border:1px solid var(--line); background:var(--surface); cursor:pointer; transition:border-color .2s} .icon-btn:hover{border-color:var(--em-line)}
#themeBtn .ico{transition:transform .5s var(--ease)} #themeBtn:hover .ico{transform:rotate(40deg)}
.i-moon{display:none} [data-theme="dark"] .i-moon{display:block} [data-theme="dark"] .i-sun{display:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .i-moon{display:block} :root:not([data-theme="light"]) .i-sun{display:none} }
.burger{display:none}
.mnav{display:none} .burger .i-x{display:none}
@keyframes fadeDown{from{opacity:0; transform:translateY(-8px)}}

/* ============ hero ============ */
.hero{position:relative; overflow:hidden; padding-block:clamp(40px,6vw,84px) clamp(64px,7vw,100px)}
.hero-bg{position:absolute; inset:0; pointer-events:none}
.hero-bg .lines{position:absolute; inset:0; background:repeating-linear-gradient(180deg, transparent 0 39px, var(--rule) 39px 40px); -webkit-mask-image:radial-gradient(75% 85% at 22% 35%, #000, transparent 78%); mask-image:radial-gradient(75% 85% at 22% 35%, #000, transparent 78%)}
.blob{position:absolute; border-radius:50%; filter:blur(70px); will-change:transform}
.blob.b1{width:520px; height:520px; right:-120px; top:-180px; background:rgba(20,184,166,.30); animation:drift1 18s ease-in-out infinite alternate}
.blob.b2{width:380px; height:380px; left:-140px; top:120px; background:rgba(14,156,126,.14); animation:drift2 22s ease-in-out infinite alternate}
.blob.b3{width:300px; height:300px; right:22%; bottom:-160px; background:rgba(70,198,168,.20); animation:drift1 26s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(-70px,60px) scale(1.12)}} @keyframes drift2{to{transform:translate(90px,-40px) scale(.9)}}
.hero .wrap{position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(32px,5vw,72px); align-items:center}
.hero h1{font:600 clamp(36px,5vw,62px)/1.06 var(--disp); letter-spacing:-.028em; margin:20px 0 24px}
.hero h1 em{font-style:normal; color:var(--em-ink); position:relative; display:inline-block; white-space:nowrap}
.hero h1 em svg{position:absolute; left:-1%; bottom:-.16em; width:102%; height:.3em; overflow:visible} .hero h1 em path{fill:none; stroke:var(--em); stroke-width:4; stroke-linecap:round; opacity:.55}
.w{display:inline-block; overflow:hidden; vertical-align:top; padding:.12em 0 .16em; margin:-.12em 0 -.16em} .w > span{display:inline-block}
.hero .lead{font-size:18px}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.trust{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:30px; font-size:13.5px; font-weight:500; color:var(--muted)} .trust li{display:flex; align-items:center; gap:8px} .trust .ico{width:16px; height:16px; color:var(--em-ink)}

/* sahifa ochilishidagi ketma-ketlik (faqat JS va animatsiya ruxsat etilganda) */
.js-anim .a{animation:rise .9s var(--ease) both; animation-delay:calc(var(--i,0) * 110ms + 150ms)}
.js-anim .w > span{animation:wordUp .95s var(--ease) both; animation-delay:calc(var(--wi,0) * 70ms + 200ms)}
.js-anim .hero h1 em path{stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1s ease-out 1.15s forwards}
.js-anim .dash{animation:cardIn 1.1s var(--ease) .35s both}
@keyframes rise{from{opacity:0; transform:translateY(22px)}} @keyframes wordUp{from{transform:translateY(115%) rotate(4deg)}}
@keyframes draw{to{stroke-dashoffset:0}} @keyframes cardIn{from{opacity:0; transform:translateY(40px) scale(.96)}}

/* hero sahnasi: panel + telefon */
.scene{position:relative; padding:6px 0 46px}
.dash{position:relative; background:var(--surface); border-radius:20px; box-shadow:var(--sh2), 0 0 0 1px var(--line2); overflow:hidden; transform:perspective(1500px) rotateY(calc(-9deg + var(--ry,0deg))) rotateX(calc(4deg + var(--rx,0deg))); transform-origin:65% 50%; transition:transform .6s var(--ease)}
.dash-top{display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid var(--line2)} .dash-top > span{width:9px; height:9px; border-radius:50%; background:var(--surface2); box-shadow:inset 0 0 0 1px var(--line)}
.dash-top i{margin-left:10px; font-style:normal; font-size:11px; color:var(--muted); padding:3px 14px; border-radius:99px; background:var(--surface2)} .dash-top .live{margin-left:auto}
.live{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--em-ink)} .live i{width:7px; height:7px; padding:0; margin:0; border-radius:50%; background:var(--em); animation:pulse 1.8s ease-out infinite}
.dash-bd{display:grid; grid-template-columns:46px minmax(0,1fr)}
.dash-sb{display:grid; gap:10px; align-content:start; justify-items:center; padding:14px 0; border-right:1px solid var(--line2)} .dash-sb u{width:22px; height:22px; border-radius:8px; background:var(--surface2)} .dash-sb u.on{background:#0E9C7E; box-shadow:0 6px 12px -6px rgba(14,156,126,.9)}
.dash-mn{padding:14px; display:grid; gap:12px}
.dk{display:grid; grid-template-columns:1.9fr 1fr 1fr 1fr; gap:8px} .dk > div{position:relative; border:1px solid var(--line2); border-radius:13px; padding:10px 11px; min-width:0} .dk small{display:block; font-size:10.5px; color:var(--muted); font-weight:500; white-space:nowrap} .dk b{display:inline-block; font-size:16px; font-weight:600; white-space:nowrap}
.dk .h{border:0; color:#fff; background:linear-gradient(120deg,#0F8A70,#17A687); overflow:hidden} .dk .h small{color:rgba(255,255,255,.82)} .dk .h b{font-size:18px; letter-spacing:-.01em} .dk .h em{position:absolute; right:9px; top:9px; font-style:normal; font-size:10px; font-weight:600; padding:1px 7px; border-radius:99px; background:rgba(255,255,255,.2)}
.dk .h:after{content:""; position:absolute; width:110px; height:110px; right:-40px; bottom:-70px; border-radius:50%; background:rgba(255,255,255,.12); animation:drift2 9s ease-in-out infinite alternate}
.dk .r{background:var(--red-soft); border-color:transparent} .dk .r b{color:var(--red)} .dk .a{background:var(--amber-soft); border-color:transparent} .dk .a b{color:var(--amber)}
.dash-2{display:grid; grid-template-columns:minmax(0,1fr) 132px; gap:12px} .dash-l{display:grid; gap:12px; min-width:0}
.dch{position:relative; border:1px solid var(--line2); border-radius:14px; padding:11px 12px 4px} .dch-h{display:flex; justify-content:space-between; align-items:baseline; gap:8px} .dch-h b{font-size:13px; font-weight:600} .dch-h span{font-size:11px; color:var(--muted)}
.dch svg{display:block; width:100%; height:auto; overflow:visible} .dch .gl{stroke:var(--line); stroke-width:1} .dch text{fill:var(--muted); font:500 13.5px var(--body)} .dch .ln{fill:none; stroke:var(--em); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round} .dch .ar{fill:url(#g-area)} .dch .pt{fill:var(--surface); stroke:var(--em); stroke-width:2.4} .dch .ptp{fill:var(--em); opacity:.25; transform-box:fill-box; transform-origin:50% 50%; animation:ptp 2s ease-out infinite}
@keyframes ptp{from{transform:scale(.6); opacity:.45} to{transform:scale(2.4); opacity:0}}
.dch .hl{stroke:var(--em); stroke-width:1; stroke-dasharray:3 3; opacity:0; transition:opacity .2s} .dch .hp2{fill:var(--em); opacity:0; transition:opacity .2s} .dch.hov .hl, .dch.hov .hp2{opacity:1}
.tip{position:absolute; z-index:3; top:34px; padding:4px 9px; border-radius:8px; background:var(--ink); color:var(--ground); font-size:11px; font-weight:600; white-space:nowrap; transform:translateX(-50%); opacity:0; pointer-events:none; transition:opacity .2s} .dch.hov .tip{opacity:1}
.js-anim .dch .ln{stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.9s cubic-bezier(.5,.1,.2,1) 1.1s forwards} .js-anim .dch .ar{animation:rise 1.2s ease-out 2s both} .js-anim .dch .pt, .js-anim .dch .ptp{opacity:0; animation:popIn .5s var(--ease) 2.9s forwards} .js-anim .dch .ptp{animation:popIn .5s var(--ease) 2.9s forwards, ptp 2s ease-out 3.4s infinite}
@keyframes popIn{to{opacity:1}}
.feed-h{display:flex; justify-content:space-between; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:2px}
.feed{height:141px; overflow:hidden} .feed li{display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:9px; align-items:center; height:47px; padding:0 4px; border-top:1px solid var(--line2); font-size:12.5px; border-radius:10px} .feed li:first-child{border-top-color:transparent}
.feed .ava{width:30px; height:30px; border-radius:10px; font-size:11px} .feed p{font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .feed p small{display:block; font-weight:400; font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis} .feed .am{text-align:right; font-weight:600; color:var(--em-ink); line-height:1.25; white-space:nowrap} .feed .am small{display:block; font-weight:500; font-size:10.5px; color:var(--muted)}
.feed li.new{animation:feedIn .7s var(--ease)} @keyframes feedIn{0%{opacity:0; transform:translateY(-20px); background:var(--em-soft)} 60%{opacity:1; transform:none; background:var(--em-soft)}}
/* ustidagi telefon */
.hp{position:absolute; z-index:3; right:-26px; bottom:0; width:172px; transform:translate3d(calc(var(--px,0) * 1px), calc(var(--py,0) * 1px), 0); transition:transform .6s var(--ease)}
.hp-f{border-radius:28px; padding:7px; background:#0B1C18; box-shadow:0 34px 60px -30px rgba(6,40,33,.75), 0 0 0 1px rgba(255,255,255,.08); animation:bob 6s ease-in-out infinite}
.hp-s{border-radius:22px; overflow:hidden; background:var(--ground); font-size:10px}
.hp-h{display:flex; justify-content:space-between; align-items:center; padding:12px 11px 8px} .hp-h b{font-size:13px; font-weight:600} .hp-h .live{font-size:9.5px; gap:4px} .hp-h .live i{width:5px; height:5px}
.hp-c{position:relative; overflow:hidden; margin:0 9px; padding:11px 12px; border-radius:14px; color:#fff; background:linear-gradient(125deg,#0B6F5B,#17A687)} .hp-c small{display:block; font-size:9.5px; opacity:.85} .hp-c b{display:block; font-size:17px; font-weight:600; letter-spacing:-.01em} .hp-c em{font-style:normal; font-size:9px; opacity:.8}
.hp-c:after{content:""; position:absolute; width:80px; height:80px; right:-26px; top:-36px; border-radius:50%; background:rgba(255,255,255,.14)}
.hp-k{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:7px 9px 0} .hp-k div{border-radius:11px; padding:7px 9px; background:var(--surface)} .hp-k small{display:block; font-size:9px; color:var(--muted)} .hp-k b{font-size:14px; font-weight:600} .hp-k .r{background:var(--red-soft)} .hp-k .r b{color:var(--red)}
.hp-l{margin:7px 9px 0; padding:2px 8px; border-radius:12px; background:var(--surface)} .hp-l li{display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:7px; align-items:center; padding:7px 0; border-top:1px solid var(--line2)} .hp-l li:first-child{border-top:0}
.hp-l .ava{width:22px; height:22px; border-radius:8px; font-size:8.5px} .hp-l p{font-weight:600; font-size:10px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .hp-l p small{display:block; font-weight:400; font-size:9px; color:var(--muted)} .hp-l .pill{margin:0; font-size:8.5px; padding:1px 6px}
.hp-t{display:grid; grid-template-columns:repeat(4,1fr); margin-top:8px; padding:7px 4px 9px; background:var(--surface); border-top:1px solid var(--line2)} .hp-t span{display:grid; justify-items:center; gap:2px; font-size:6.8px; letter-spacing:-.01em; white-space:nowrap; color:var(--muted); font-weight:500} .hp-t span:first-child{color:var(--em-ink)} .hp-t span:not(:first-child){font-size:0} .hp-t .ico{width:14px; height:14px}
.js-anim .hp{animation:phoneIn 1.1s var(--ease) .9s both} @keyframes phoneIn{from{opacity:0; transform:translate3d(0,70px,0) rotate(6deg)}}
.float{position:absolute; z-index:4; display:flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; border-radius:14px; background:var(--surface); box-shadow:0 14px 30px -16px rgba(6,60,48,.5), 0 0 0 1px var(--line2); font-size:12.5px; white-space:nowrap}
.float u{width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:var(--em-soft); color:var(--em-ink); text-decoration:none} .float b{display:block; font-weight:600; font-size:13px; line-height:1.3} .float small{color:var(--muted)}
.float.f1,.float.f3{left:-26px; bottom:-12px} .float.f2{right:60px; top:-16px} .float.f2,.float.f3{display:none}
.js-anim .float{display:flex; opacity:0; animation:floatCycle 10.5s var(--ease) infinite} .js-anim .float.f1{animation-delay:1.6s} .js-anim .float.f2{animation-delay:5.1s} .js-anim .float.f3{animation-delay:8.6s}
@keyframes floatCycle{0%{opacity:0; transform:translateY(14px) scale(.94)} 4%,28%{opacity:1; transform:none} 33%,100%{opacity:0; transform:translateY(-10px) scale(.97)}}

/* ============ oqib turadigan imkoniyatlar ============ */
.band{padding-block:22px; border-block:1px solid var(--line2); background:var(--surface); display:grid; gap:10px}
.mq{overflow:hidden} .mq-t{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding-inline:22px}
.mq-t span{padding:8px 15px; border-radius:99px; font-size:14px; font-weight:500; white-space:nowrap; border:1px solid var(--line); color:var(--ink2); background:var(--ground); transition:color .2s, border-color .2s, background .2s} .mq-t span:hover{color:var(--em-ink); border-color:var(--em-line); background:var(--em-soft)}
.js-anim .mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.js-anim .mq-t{flex-wrap:nowrap; justify-content:flex-start; width:max-content; padding:0; animation:mq 70s linear infinite} .js-anim .mq.rev .mq-t{animation-direction:reverse; animation-duration:85s} .js-anim .mq:hover .mq-t{animation-play-state:paused}
@keyframes mq{to{transform:translateX(calc(-50% - 5px))}}

/* ============ daftar -> dastur ============ */
.vs{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(32px,6vw,88px); align-items:center}
.daftar-w{display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; padding:10px 0}
.daftar{position:relative; overflow:hidden; width:min(430px,100%); padding:30px 22px 84px 64px; border-radius:6px 16px 16px 6px; background-color:var(--paper); background-image:repeating-linear-gradient(180deg, transparent 0 37px, var(--paper-line) 37px 38px); background-position:0 22px; box-shadow:var(--sh1), inset 10px 0 18px -12px rgba(19,32,28,.18); transform:rotate(-2deg); transition:transform .6s var(--ease)}
.daftar:hover{transform:rotate(-.6deg) translateY(-4px)}
.daftar:before{content:""; position:absolute; left:50px; top:0; bottom:0; width:1.5px; background:var(--paper-margin)}
.daftar .holes{position:absolute; left:16px; top:0; bottom:0; display:grid; align-content:space-around; padding-block:26px} .daftar .holes i{width:15px; height:15px; border-radius:50%; background:var(--ground); box-shadow:inset 0 2px 3px rgba(19,32,28,.25)}
.daftar h3{font:600 27px/38px var(--hand); color:var(--pen); margin-bottom:0}
.dl{position:relative; display:block; font:500 22px/38px var(--hand); color:var(--pen); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity .5s} .dl s{text-decoration:none; color:var(--red)}
.dl:after{content:""; position:absolute; left:-4px; right:0; top:54%; height:2px; border-radius:2px; background:var(--red); opacity:.7; transform:scaleX(0) rotate(-.6deg); transform-origin:0 50%; transition:transform .55s cubic-bezier(.6,.1,.3,1); transition-delay:calc(var(--li,0) * 330ms + 500ms)}
.daftar-w.in .dl:after{transform:scaleX(1) rotate(-.6deg)} .daftar-w.in .dl{opacity:.82; transition-delay:calc(var(--li,0) * 330ms + 800ms)}
.stamp{position:absolute; right:18px; bottom:20px; padding:7px 14px; border:2.5px solid var(--em); border-radius:10px; color:var(--em-ink); font:600 14px/1.2 var(--body); letter-spacing:.1em; text-transform:uppercase; display:flex; gap:7px; align-items:center; transform:rotate(-9deg); background:color-mix(in srgb, var(--paper) 80%, transparent)}
.stamp .ico{width:16px; height:16px; stroke-width:2.6}
.js-anim .stamp{opacity:0; transform:rotate(-9deg) scale(1.9)} .js-anim .daftar-w.in .stamp{opacity:1; transform:rotate(-9deg) scale(1); transition:transform .45s cubic-bezier(.3,1.6,.5,1) 2.6s, opacity .2s linear 2.6s}
.pains{display:grid; gap:0; margin-top:10px; border-top:1px solid var(--line)}
.pains li{display:grid; grid-template-columns:minmax(0,1fr) 30px minmax(0,1.25fr); gap:14px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line)}
.pains .was{font:500 22px/1.2 var(--hand); color:var(--ink2); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--red) 65%, transparent); text-decoration-thickness:1.5px} .pains .ico{color:var(--em-ink); width:22px; height:22px} .pains b{font-weight:600; font-size:15.5px; line-height:1.45}

/* ============ bo'limlar (matn + maket) ============ */
.feat{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,88px); align-items:center}
.feat.rev .feat-t{order:2}
.feat-t{display:grid; gap:18px} .feat-t .h2{margin-top:-4px}
.ticks{display:grid; gap:12px; margin-top:6px} .ticks li{display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start; color:var(--ink2); font-size:15.5px}
.ticks li u{width:24px; height:24px; border-radius:8px; display:grid; place-items:center; background:var(--em-soft); color:var(--em-ink); text-decoration:none; margin-top:1px; transition:transform .4s var(--ease), background .3s} .ticks li:hover u{transform:scale(1.15) rotate(-8deg); background:var(--em); color:#fff}
.ticks li u .ico{width:14px; height:14px; stroke-width:2.4} .ticks b{font-weight:600; color:var(--ink)}
.chips{display:flex; flex-wrap:wrap; gap:8px} .chips li{padding:7px 13px; border-radius:99px; font-size:13.5px; font-weight:500; background:var(--surface); border:1px solid var(--line); color:var(--ink2); transition:transform .3s var(--ease), border-color .2s, color .2s} .chips li:hover{transform:translateY(-3px); border-color:var(--em-line); color:var(--em-ink)}

.mock{background:var(--surface); border-radius:22px; box-shadow:var(--sh1); padding:20px; display:grid; gap:14px}
.mock-h{display:flex; align-items:center; justify-content:space-between; gap:10px} .mock-h b{font-weight:600; font-size:15px} .mock-h small{color:var(--muted); font-size:12.5px}
.live{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--em-ink)} .live i{width:7px; height:7px; border-radius:50%; background:var(--em); animation:pulse 1.8s ease-out infinite}
.kp{display:grid; grid-template-columns:repeat(3,1fr); gap:10px} .kp div{border:1px solid var(--line2); border-radius:14px; padding:12px 14px} .kp small{display:block; font-size:12px; color:var(--muted); font-weight:500} .kp b{display:inline-block; font-size:20px; font-weight:600}
.kp .r{background:var(--red-soft); border-color:transparent} .kp .r b{color:var(--red)} .kp .a{background:var(--amber-soft); border-color:transparent} .kp .a b{color:var(--amber)}
.bump{animation:bump .5s var(--ease)} @keyframes bump{40%{transform:scale(1.25)}}
.rows{position:relative} .rows li{display:grid; grid-template-columns:36px 1fr auto; gap:12px; align-items:center; padding:11px 8px; margin-inline:-8px; border-top:1px solid var(--line2); border-radius:12px; transition:background .4s} .rows li:first-child{border-top:0} .rows li.hit{background:var(--em-soft)}
.ava{width:36px; height:36px; border-radius:12px; display:grid; place-items:center; font-weight:600; font-size:13px; background:var(--surface2); color:var(--ink2)}
.rows p{font-weight:600; font-size:14.5px; line-height:1.3} .rows p small{display:block; font-weight:400; color:var(--muted); font-size:12.5px}
.rows .amt{text-align:right; font-weight:600; font-size:14.5px} .pill{display:inline-block; margin-top:3px; padding:2px 8px; border-radius:99px; font-size:11px; font-weight:600} .pill.g{background:var(--em-soft); color:var(--em-ink)} .pill.r{background:var(--red-soft); color:var(--red)} .pill.a{background:var(--amber-soft); color:var(--amber)} .pill.pop{animation:bump .5s var(--ease)}
.rows li.ntf{position:absolute; left:50%; top:-6px; z-index:2; margin:0; border:0; display:flex; align-items:center; gap:9px; padding:9px 14px 9px 9px; border-radius:13px; background:var(--ink); color:var(--ground); font-size:12.5px; font-weight:500; white-space:nowrap; box-shadow:0 16px 30px -16px rgba(0,0,0,.6); opacity:0; transform:translate(-50%,-14px) scale(.95); transition:opacity .4s, transform .5s var(--ease); pointer-events:none}
.rows li.ntf u{width:24px; height:24px; border-radius:8px; display:grid; place-items:center; background:#0E9C7E; color:#fff; text-decoration:none} .rows li.ntf u .ico{width:14px; height:14px; stroke-width:2.4} .rows li.ntf.show{opacity:1; transform:translate(-50%,0)}

/* Z-hisobot cheki — printerdan chiqadi */
.zwrap{display:grid; place-items:center; padding:10px 0}
.zprint{position:relative; overflow:hidden; padding:10px 34px 40px; transform:rotate(-1.2deg)}
.zslot{position:absolute; left:8px; right:8px; top:0; height:20px; z-index:2; border-radius:10px; background:linear-gradient(180deg,#23302C,#0D1714); box-shadow:0 6px 14px -6px rgba(0,0,0,.5), inset 0 -6px 0 -3px rgba(255,255,255,.08)}
.zslot:after{content:""; position:absolute; right:16px; top:7px; width:6px; height:6px; border-radius:50%; background:#2CE0B0; box-shadow:0 0 8px #2CE0B0; animation:blink 1.4s steps(2) infinite} @keyframes blink{50%{opacity:.25}}
.z{width:min(340px,100%); background:var(--surface); box-shadow:var(--sh1); padding:26px 22px 30px; font-size:14px; position:relative; border-radius:0}
.z:after{content:""; position:absolute; left:0; right:0; bottom:-10px; height:10px; background:linear-gradient(-45deg, transparent 7px, var(--surface) 0) 0 0/14px 10px repeat-x, linear-gradient(45deg, transparent 7px, var(--surface) 0) 0 0/14px 10px repeat-x; transform:scaleY(-1)}
.js-anim .zwrap:not(.in) .z{transform:translateY(-104%)} .js-anim .zwrap.in .z{animation:print 2.6s steps(22) .25s both} @keyframes print{from{transform:translateY(-104%)}}
.z h3{text-align:center; font:600 17px/1.2 var(--disp); letter-spacing:.02em} .z .zc{text-align:center; color:var(--muted); font-size:12.5px; margin:4px 0 14px}
.z dl{display:grid; gap:7px; padding:12px 0; border-top:1px dashed var(--line)} .z dl div{display:flex; justify-content:space-between; gap:10px} .z dt{color:var(--muted)} .z dd{font-weight:600}
.z .tot{border-top:1px solid var(--ink); padding-top:12px} .z .tot dd{font-size:18px} .z .neg{color:var(--red)}
.z .tg{margin-top:10px; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--em-ink); font-weight:600}
.js-anim .zwrap:not(.in) .tg{opacity:0} .js-anim .zwrap.in .tg{animation:rise .6s var(--ease) 2.9s both} .js-anim .zwrap.in .tg .ico{animation:fly .9s var(--ease) 3s both} @keyframes fly{from{transform:translate(-16px,14px) scale(.4); opacity:0}}

/* kirim kartasi */
.kir{display:grid; gap:12px} .kir-f{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.inp{border:1px solid var(--line); border-radius:12px; padding:9px 13px; background:var(--surface)} .inp small{display:block; font-size:11.5px; color:var(--muted); font-weight:500} .inp b{font-weight:600; font-size:14.5px}
.inp.w{grid-column:1/-1} .inp.flash{animation:flash .7s ease-out} @keyframes flash{0%{border-color:var(--em); box-shadow:0 0 0 4px var(--em-soft)}}
.cur{position:relative; display:inline-grid; grid-template-columns:1fr 1fr; padding:3px; border-radius:9px; background:var(--surface2); font-size:12px; font-weight:600}
.cur:before{content:""; position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px); border-radius:7px; background:var(--surface); box-shadow:0 1px 2px rgba(16,24,40,.12); transition:transform .4s var(--ease)} .cur.usd:before{transform:translateX(100%)}
.cur button{position:relative; border:0; background:transparent; padding:3px 12px; border-radius:7px; color:var(--muted); cursor:pointer; font-weight:600; font-size:12px; transition:color .25s} .cur button[aria-pressed=true]{color:var(--ink)}
.sum{border-radius:16px; background:var(--surface2); padding:14px 16px; display:grid; gap:8px; font-size:14px} .sum p{display:flex; justify-content:space-between; gap:10px; color:var(--muted); transition:opacity .3s} .sum p b{color:var(--ink); font-weight:600} .sum p.f b{color:var(--em-ink)} .sum p.off{opacity:.35}
.pbar{height:8px; border-radius:8px; background:var(--surface); overflow:hidden; display:flex} .pbar i{display:block; height:100%; background:var(--muted); opacity:.35; width:89.3%; transform-origin:0 50%} .pbar em{display:block; height:100%; width:10.7%; background:linear-gradient(90deg,#0E9C7E,#2CC9A4); border-radius:0 8px 8px 0; transform-origin:0 50%}
.js-anim .kir:not(.in) .pbar i, .js-anim .kir:not(.in) .pbar em{transform:scaleX(0)} .js-anim .kir.in .pbar i{transition:transform 1s var(--ease) .4s} .js-anim .kir.in .pbar em{transition:transform .7s var(--ease) 1.3s}

/* ============ onlayn do'kon (to'q yashil) ============ */
.pine{background:var(--pine); color:var(--on-pine); position:relative; overflow:hidden}
.pine:before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(50% 60% at 90% 10%, rgba(70,198,168,.22), transparent 70%), radial-gradient(40% 50% at 5% 100%, rgba(70,198,168,.12), transparent 70%)}
.pine .wrap{position:relative} .pine .eyebrow{color:#7FE0C6} .pine .lead{color:var(--on-pine2)} .pine .ticks li{color:var(--on-pine2)} .pine .ticks b{color:var(--on-pine)} .pine .ticks li u{background:rgba(127,224,198,.14); color:#7FE0C6} .pine .ticks li:hover u{background:#7FE0C6; color:#0A352D}
.phone-w{position:relative; width:min(300px,100%); margin-inline:auto}
.orb{position:absolute; border-radius:50%; pointer-events:none} .orb.o1{width:420px; height:420px; left:50%; top:50%; margin:-210px 0 0 -210px; border:1px dashed rgba(127,224,198,.22); animation:spin 60s linear infinite} .orb.o2{width:560px; height:560px; left:50%; top:50%; margin:-280px 0 0 -280px; border:1px solid rgba(127,224,198,.10); animation:spin 90s linear infinite reverse}
.orb i{position:absolute; width:10px; height:10px; border-radius:50%; background:#7FE0C6; box-shadow:0 0 16px #7FE0C6; top:-5px; left:50%} .orb.o2 i{top:auto; bottom:60px; left:40px; width:7px; height:7px; opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}
.phone{position:relative; border-radius:40px; padding:28px 10px 10px; background:#06231E; box-shadow:0 40px 80px -40px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); animation:bob 7s ease-in-out infinite; transition:transform .4s var(--ease)}
.phone .isl{position:absolute; z-index:2; top:11px; left:50%; width:70px; height:20px; margin-left:-35px; border-radius:11px; background:#000}
@keyframes bob{50%{translate:0 -10px}}
.scr{position:relative; height:684px; border-radius:31px; overflow:hidden; background:#F3F6F5; color:#13201C; font-size:12px}
.scr-h{display:flex; align-items:center; gap:9px; padding:16px 14px 10px; background:#fff} .scr-h u{width:32px; height:32px; border-radius:11px; background:linear-gradient(135deg,#14B8A6,#0E9C7E); text-decoration:none; display:grid; place-items:center; color:#fff; font-weight:600; box-shadow:0 6px 12px -7px rgba(14,156,126,.9)}
.scr-h b{font-weight:600; font-size:13.5px; display:block; line-height:1.2} .scr-h small{color:#0B7F67; font-weight:600; font-size:10.5px}
.scr-h .hb{margin-left:auto; position:relative; width:32px; height:32px; border-radius:11px; background:#F3F6F5; display:grid; place-items:center; color:#3C4B46} .scr-h .hb .ico{width:15px; height:15px} .scr-h .hb i{position:absolute; right:7px; top:7px; width:7px; height:7px; border-radius:50%; background:#E5484D; box-shadow:0 0 0 2px #F3F6F5}
.scr-s{display:flex; gap:8px; padding:0 14px 12px; background:#fff; border-radius:0 0 18px 18px} .scr-s span{flex:1; height:36px; border-radius:12px; background:#F3F6F5; display:flex; align-items:center; gap:8px; padding:0 12px; color:#5F6F6A; font-size:11.5px} .scr-s span .ico{width:14px; height:14px}
.scr-s u{width:36px; height:36px; border-radius:12px; background:#13201C; color:#fff; display:grid; place-items:center; text-decoration:none} .scr-s u .ico{width:15px; height:15px}
.scr-c{display:flex; gap:5px; padding:10px 14px 0} .scr-c span{padding:5px 8px; border-radius:99px; font-size:10px; font-weight:600; background:#fff; color:#3C4B46; white-space:nowrap; box-shadow:0 1px 2px rgba(16,24,40,.05)} .scr-c .on{background:#0E9C7E; color:#fff}
.scr-b{position:relative; overflow:hidden; margin:10px 14px 0; border-radius:18px; padding:13px 14px 12px; min-height:94px; color:#fff; background:linear-gradient(120deg,#0B6F5B,#17A687 58%,#3BCBA9)}
.scr-b:before{content:""; position:absolute; width:150px; height:150px; border-radius:50%; right:-36px; top:-60px; background:rgba(255,255,255,.13); animation:drift2 8s ease-in-out infinite alternate}
.scr-b .lb{position:relative; display:inline-block; font-size:8.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:2px 8px; border-radius:99px; background:rgba(255,255,255,.2)}
.scr-b b{position:relative; display:block; font:600 15.5px/1.15 var(--disp); margin:7px 0 8px; max-width:136px}
.cd{position:relative; display:flex; gap:4px; align-items:center; font-size:10.5px; font-weight:600} .cd i{font-style:normal; min-width:23px; padding:3px 0; text-align:center; border-radius:7px; background:rgba(6,35,30,.38)}
.scr-b .art{position:absolute; right:-8px; bottom:-16px; width:132px; height:110px; max-width:none; transform:rotate(8deg); filter:drop-shadow(0 10px 14px rgba(0,0,0,.28)); animation:bob 5s ease-in-out infinite}
.dots{display:flex; gap:4px; justify-content:center; padding:8px 0 0} .dots i{width:5px; height:5px; border-radius:5px; background:#C9D3CF} .dots .on{width:14px; background:#0E9C7E}
.scr-hd{display:flex; justify-content:space-between; align-items:baseline; padding:8px 14px 0} .scr-hd b{font-weight:600; font-size:13px} .scr-hd span{font-size:10.5px; font-weight:600; color:#0B7F67}
.scr-g{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:8px 14px 0}
.pc{background:#fff; border-radius:16px; padding:6px 6px 10px; box-shadow:0 1px 2px rgba(16,24,40,.05)}
.pi{position:relative; aspect-ratio:1.2; border-radius:12px; display:grid; place-items:center; overflow:hidden} .pi .art{width:94%; height:94%; transition:transform .6s var(--ease)} .pc:hover .pi .art{transform:scale(1.1) rotate(-4deg)}
.pi.c1{background:radial-gradient(circle at 30% 18%,#EDF7F3,#CDE5DB)} .pi.c2{background:radial-gradient(circle at 30% 18%,#FEF3EF,#F5D6D0)} .pi.c3{background:radial-gradient(circle at 30% 18%,#F1F4FA,#D3DDEC)} .pi.c4{background:radial-gradient(circle at 30% 18%,#F3F0FA,#DBD3EF)}
.bd{position:absolute; left:6px; top:6px; padding:2px 6px; border-radius:7px; font-size:9px; font-weight:600; background:#E5484D; color:#fff} .bd.n{background:#13201C}
.hr{position:absolute; right:6px; top:6px; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.88); display:grid; place-items:center; color:#5F6F6A} .hr .ico{width:12px; height:12px} .hr.on{color:#E5484D} .hr.on .ico{fill:#E5484D}
.add{position:absolute; right:6px; bottom:6px; width:26px; height:26px; border-radius:9px; background:#0E9C7E; color:#fff; display:grid; place-items:center; box-shadow:0 6px 12px -6px rgba(14,156,126,.9)} .add .ico{grid-area:1/1; width:14px; height:14px; stroke-width:2.4} .add .ck{opacity:0}
.pc p{font-weight:600; font-size:11.5px; margin:8px 4px 2px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rt{margin:0 4px; font-size:9.5px; color:#5F6F6A; display:flex; gap:3px; align-items:center} .rt .ico{width:10px; height:10px; fill:#F5B400; stroke:#F5B400} .rt b{color:#13201C; font-weight:600}
.pr{margin:4px 4px 0; display:flex; gap:5px; align-items:baseline; flex-wrap:wrap} .pr b{font-size:12.5px; font-weight:600} .pr s{font-size:9.5px; color:#94A39E}
.pc em{display:inline-block; margin:5px 4px 0; font-style:normal; white-space:nowrap; font-size:9.5px; font-weight:600; color:#0B7F67; background:rgba(14,156,126,.1); border-radius:99px; padding:2px 7px}
.js-anim .phone-w:not(.in) .pc{opacity:0; transform:translateY(16px) scale(.94)} .js-anim .phone-w.in .pc{transition:opacity .6s, transform .7s var(--ease); transition-delay:calc(var(--pi,0) * 120ms + 500ms)}
.scr-f{position:absolute; left:0; right:0; bottom:50px; height:54px; background:linear-gradient(180deg,rgba(243,246,245,0),#F3F6F5 85%); pointer-events:none}
.scr-t{position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(5,1fr); background:#fff; padding:9px 6px 12px; border-top:1px solid rgba(19,32,28,.06)} .scr-t span{position:relative; display:grid; justify-items:center; gap:3px; font-size:9.5px; color:#5F6F6A; font-weight:500} .scr-t span:first-child{color:#0B7F67} .scr-t .ico{width:17px; height:17px}
.scr-t span:first-child:before{content:""; position:absolute; top:-9px; width:20px; height:3px; border-radius:0 0 3px 3px; background:#0E9C7E}
.scr-t .bdg{position:absolute; top:-5px; left:50%; margin-left:4px; min-width:14px; height:14px; padding:0 3px; border-radius:7px; background:#E5484D; color:#fff; font-size:9px; font-weight:600; font-style:normal; display:grid; place-items:center}
.ptoast{position:absolute; z-index:2; left:14px; right:14px; bottom:62px; display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:12px; background:#13201C; color:#fff; font-size:11.5px; font-weight:500; opacity:0; box-shadow:0 14px 24px -14px rgba(0,0,0,.6)}
.ptoast u{width:20px; height:20px; border-radius:7px; background:#0E9C7E; display:grid; place-items:center; text-decoration:none} .ptoast .ico{width:12px; height:12px; stroke-width:2.6}
.js-anim .ptoast{animation:ptoast 8s var(--ease) 2s infinite} .js-anim .scr-t .bdg{animation:bdg 8s var(--ease) 2s infinite}
.js-anim .add.go{animation:addBg 8s var(--ease) 2s infinite} .js-anim .add.go .pl{animation:addPl 8s linear 2s infinite} .js-anim .add.go .ck{animation:addCk 8s linear 2s infinite}
@keyframes ptoast{0%,100%{opacity:0; transform:translateY(16px)} 6%,40%{opacity:1; transform:none} 47%{opacity:0; transform:translateY(16px)}} @keyframes bdg{0%,5%{transform:scale(0)} 9%{transform:scale(1.4)} 13%,100%{transform:scale(1)}}
@keyframes addBg{0%{transform:scale(1); background:#0E9C7E} 2%{transform:scale(.78)} 5%,42%{transform:scale(1); background:#13201C} 48%,100%{background:#0E9C7E}} @keyframes addPl{0%,3%{opacity:1} 5%,42%{opacity:0} 48%,100%{opacity:1}} @keyframes addCk{0%,3%{opacity:0} 5%,42%{opacity:1} 48%,100%{opacity:0}}
.bot{position:absolute; right:-178px; bottom:56px; z-index:3; width:230px; padding:12px 14px; border-radius:16px 16px 16px 4px; background:#fff; color:#13201C; font-size:12.5px; line-height:1.45; box-shadow:0 24px 50px -24px rgba(0,0,0,.7)}
.bot small{display:flex; align-items:center; gap:6px; font-weight:600; color:#0B7F67; margin-bottom:3px; font-size:11.5px} .bot small .ico{width:13px; height:13px} .bot b{font-weight:600}
.js-anim .phone-w:not(.in) .bot{opacity:0; transform:translateY(20px) scale(.9)} .js-anim .phone-w.in .bot{transition:opacity .5s 1.5s, transform .7s cubic-bezier(.3,1.5,.5,1) 1.5s}

/* ============ jamoa + hisobotlar ============ */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch}
.panel{background:var(--surface); border-radius:22px; padding:clamp(24px,3vw,36px); box-shadow:var(--sh1); display:grid; gap:16px; align-content:start}
.panel h3{font:600 23px/1.2 var(--disp); letter-spacing:-.015em} .panel p{color:var(--muted)}
.panel.p-team{grid-template-rows:auto auto 1fr auto} .panel.p-rep{grid-template-rows:auto auto 1fr auto}
.tb{border-radius:16px; background:var(--surface2); padding:14px 16px; display:grid; gap:12px; align-content:space-between}
.tb-h{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 12px; font-size:12.5px; color:var(--muted)} .tb-h b{color:var(--ink); font-weight:600; font-size:13px}
.tb-lg{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:11.5px} .tb-lg span{display:inline-flex; align-items:center; gap:5px} .tb-lg i{width:9px; height:9px; border-radius:3px}
.tb-g{display:grid; grid-template-columns:minmax(0,2.5fr) repeat(6,minmax(0,1fr)); gap:7px 6px; align-items:center; font-size:12.5px} .tb-g .d{text-align:center; color:var(--muted); font-size:11px; font-weight:500} .tb-g .n{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .tb-g .n small{font-weight:400; color:var(--muted); font-size:11px}
.tb-g i{display:block; height:24px; border-radius:8px} .tb .g{background:var(--em)} .tb .a{background:#E0A04A} .tb .r{background:var(--red); opacity:.75} .tb .o{background:var(--surface); box-shadow:inset 0 0 0 1px var(--line)}
.js-anim .panel:not(.in) .tb-g i{transform:scale(0)} .js-anim .panel.in .tb-g i{transition:transform .5s cubic-bezier(.3,1.5,.5,1); transition-delay:calc(var(--ti,0) * 28ms + 350ms)}
.chart{align-content:space-between} .bars{min-height:74px; height:100%}
.chart{border-radius:16px; background:var(--surface2); padding:14px 16px 12px; display:grid; gap:10px} .chart-h{display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--muted)} .chart-h b{font-size:19px; font-weight:600; color:var(--ink)} .chart-h em{font-style:normal; font-weight:600; color:var(--em-ink)}
.bars{display:flex; align-items:flex-end; gap:6px; height:74px} .bars em{flex:1; height:var(--h); border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,#2CC9A4,#0E9C7E); opacity:.55; transform-origin:50% 100%} .bars em:last-child, .bars em:hover{opacity:1}
.js-anim .panel:not(.in) .bars em{transform:scaleY(0)} .js-anim .panel.in .bars em{transition:transform .8s var(--ease); transition-delay:calc(var(--bi,0) * 55ms + 300ms)}
.rep{display:flex; flex-wrap:wrap; gap:8px; counter-reset:r} .rep li{counter-increment:r; padding:7px 13px 7px 9px; border-radius:10px; font-size:13.5px; font-weight:500; background:var(--surface2); color:var(--ink2); display:flex; gap:8px; align-items:center}
.rep li:hover{background:var(--em-soft); color:var(--em-ink)}
.rep li:before{content:counter(r); min-width:20px; height:20px; border-radius:6px; display:grid; place-items:center; font-size:11px; font-weight:600; background:var(--surface); color:var(--em-ink); font-variant-numeric:tabular-nums}
.js-anim .panel:not(.in) .rep li{opacity:0; transform:scale(.8)} .js-anim .panel.in .rep li{transition:opacity .4s, transform .5s cubic-bezier(.3,1.5,.5,1); transition-delay:calc(var(--ci,0) * 50ms + 500ms)}

/* ============ raqamlar + hamma imkoniyatlar ============ */
.nums{display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:clamp(30px,4vw,48px); border-radius:22px; background:var(--surface); box-shadow:var(--sh1); overflow:hidden}
.nums > div{position:relative; padding:28px 16px 28px 28px; border-left:1px solid var(--line2)} .nums > div:first-child{border-left:0}
.nums b{display:block; font:600 clamp(32px,3.8vw,48px)/1 var(--disp); letter-spacing:-.02em; color:var(--em-ink)} .nums small{display:block; margin-top:8px; font-size:14px; color:var(--muted); font-weight:500}
.all{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line)}
.all > div{padding:26px 22px 8px 0; border-bottom:1px solid var(--line)} .all h3 i{display:none} .all h3{font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--em-ink); margin-bottom:14px}
.all ul:not(.chips) li{padding:7px 0; font-size:15.5px; font-weight:500; color:var(--ink2); display:flex; gap:10px; align-items:baseline; transition:transform .3s var(--ease), color .2s; cursor:default} .all ul:not(.chips) li:hover{transform:translateX(6px); color:var(--em-ink)}
.all ul:not(.chips) li:before{content:""; width:5px; height:5px; border-radius:50%; background:var(--em); flex:none; transform:translateY(-3px); transition:transform .3s var(--ease)} .all ul:not(.chips) li:hover:before{transform:translateY(-3px) scale(1.8)}

/* ============ qadamlar ============ */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:s; position:relative}
.steps:before, .steps:after{content:""; position:absolute; left:20px; right:20px; top:20px; height:1px; background:var(--line)} .steps:after{height:2px; top:19.5px; background:linear-gradient(90deg,#14B8A6,#0E9C7E); transform-origin:0 50%; transform:scaleX(0)}
.js-anim .steps.in:after{transform:scaleX(1); transition:transform 2.2s cubic-bezier(.5,.1,.3,1) .3s}
.steps li{counter-increment:s; position:relative; z-index:1; padding:0 24px 0 0; display:grid; gap:10px; align-content:start}
.steps li:before{content:counter(s); width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font:600 16px var(--disp); background:var(--surface); border:1px solid var(--em-line); color:var(--em-ink); position:relative; margin-bottom:8px; transition:background .4s, color .4s, border-color .4s, transform .5s cubic-bezier(.3,1.6,.5,1); transition-delay:calc(var(--st,0) * 600ms + 300ms)}
.js-anim .steps.in li:before{background:#0E9C7E; border-color:#0E9C7E; color:#fff; transform:scale(1.08)}
.steps b{font-weight:600; font-size:17px; line-height:1.3} .steps p{color:var(--muted); font-size:15px}

/* ============ savollar ============ */
.faq{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,72px); align-items:start}
.qa{border-top:1px solid var(--line)} .qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 2px; font-weight:600; font-size:17px; transition:color .2s, padding-left .35s var(--ease)} .qa summary::-webkit-details-marker{display:none} .qa summary:hover{color:var(--em-ink); padding-left:8px}
.qa summary:after{content:""; width:10px; height:10px; flex:none; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg) translate(-3px,-3px); transition:transform .35s var(--ease)} .qa details[open] summary:after{transform:rotate(-135deg) translate(-3px,-3px)}
.qa details p{padding:0 40px 22px 2px; color:var(--muted); max-width:64ch} .qa details[open] p{animation:fadeDown .45s var(--ease)}

/* ============ ariza ============ */
.ask{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(28px,5vw,72px); align-items:center}
.ask .h2{color:var(--on-pine)} .tel{display:inline-flex; align-items:center; gap:12px; font:600 clamp(24px,3vw,34px)/1.1 var(--disp); letter-spacing:-.01em; margin-top:8px} .tel .ico{width:26px; height:26px; color:#7FE0C6; transform-origin:50% 50%} .tel:hover .ico{animation:ring .7s ease-in-out}
@keyframes ring{20%{transform:rotate(-16deg)} 40%{transform:rotate(14deg)} 60%{transform:rotate(-10deg)} 80%{transform:rotate(6deg)}}
.form{position:relative; background:var(--surface); color:var(--ink); border-radius:24px; padding:clamp(22px,3vw,32px); display:grid; gap:14px; box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.form h3{font:600 21px/1.2 var(--disp); letter-spacing:-.01em} .form label{display:grid; gap:6px; font-size:13px; font-weight:600; color:var(--ink2)}
.form input,.form select{height:46px; border-radius:12px; border:1px solid var(--line); background:var(--surface); padding:0 14px; font-size:15px; font-weight:500; width:100%; transition:border-color .18s, box-shadow .18s}
.form input:focus,.form select:focus{outline:0; border-color:#10A37F; box-shadow:0 0 0 3px rgba(16,163,127,.10)} .form input.bad{border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft); animation:shake .4s}
@keyframes shake{25%{transform:translateX(-5px)} 50%{transform:translateX(4px)} 75%{transform:translateX(-2px)}}
.form .btn{width:100%} .form .note{font-size:12.5px; color:var(--muted); text-align:center}
.done{display:grid; gap:10px; justify-items:center; text-align:center; padding:26px 6px; animation:rise .6s var(--ease)} .done u{width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:var(--em-soft); color:var(--em-ink); text-decoration:none; animation:bump .7s var(--ease) .1s} .done u .ico{width:28px; height:28px; stroke-width:2.4}
.done b{font:600 20px var(--disp)} .done p{color:var(--muted)}
.waves{position:absolute; left:0; bottom:0; width:100%; height:120px; pointer-events:none; overflow:hidden} .waves svg{position:absolute; left:0; bottom:0; width:200%; max-width:none; height:100%} .waves path{fill:#7FE0C6}
.waves .w1{opacity:.05; animation:wave 22s linear infinite} .waves .w2{opacity:.07; animation:wave 16s linear infinite reverse} .waves .w3{opacity:.06; animation:wave 30s linear infinite} @keyframes wave{to{transform:translateX(-25%)}}

/* ============ pastki qism ============ */
.foot{padding-block:40px 46px; font-size:14px; color:var(--muted)} .foot .wrap{display:flex; flex-wrap:wrap; gap:18px 34px; align-items:center} .foot nav{display:flex; flex-wrap:wrap; gap:8px 22px; font-weight:500} .foot nav a{transition:color .2s} .foot nav a:hover{color:var(--em-ink)} .foot .cp{margin-left:auto}
.mbar{display:none}

/* ============ skrollda chiqib kelish ============ */
.js-anim .rv{opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .9s var(--ease); transition-delay:calc(var(--d,0) * 90ms)}
.js-anim .rv.rv-l{transform:translateX(-40px)} .js-anim .rv.rv-r{transform:translateX(40px)} .js-anim .rv.rv-s{transform:scale(.92)}
.js-anim .rv.in{opacity:1; transform:none}

/* ============ moslashuv ============ */
@media (max-width:1140px){ .nav{display:none} .burger{display:grid} .bot{right:-120px} .dk{grid-template-columns:1fr 1fr 1fr} .dk .h{grid-column:1/-1} .hp{bottom:-24px} }
@media (max-width:1140px){
  .top{--th:68px} .top.open{background:var(--ground)}
  .mnav{display:flex; flex-direction:column; position:absolute; left:0; right:0; top:100%; height:calc(100dvh - var(--th)); padding:6px 22px calc(24px + env(safe-area-inset-bottom,0px)); background:var(--ground); overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity .3s, transform .4s var(--ease), visibility 0s .3s}
  .top.open .mnav{opacity:1; visibility:visible; transform:none; transition:opacity .3s, transform .4s var(--ease)}
  .mnav > a{display:flex; justify-content:space-between; align-items:center; padding:17px 2px; font:600 21px/1.2 var(--disp); letter-spacing:-.01em; border-bottom:1px solid var(--line)}
  .mnav > a:after{content:""; width:8px; height:8px; border-right:2px solid var(--muted); border-top:2px solid var(--muted); transform:rotate(45deg); margin-right:4px}
  .js-anim .top.open .mnav > a{animation:rise .5s var(--ease) both} .js-anim .top.open .mnav > a:nth-child(2){animation-delay:50ms} .js-anim .top.open .mnav > a:nth-child(3){animation-delay:100ms} .js-anim .top.open .mnav > a:nth-child(4){animation-delay:150ms} .js-anim .top.open .mnav > a:nth-child(5){animation-delay:200ms} .js-anim .top.open .mnav > a:nth-child(6){animation-delay:250ms}
  .mnav-b{margin-top:auto; padding-top:22px; display:grid; gap:10px} .mnav-b .btn{width:100%} .mnav-b small{text-align:center; color:var(--muted); font-size:12.5px}
  .top.open .burger .i-x{display:block} .top.open .burger .i-m{display:none}
}
@media (max-width:1020px){
  .hero .wrap,.feat,.faq,.ask,.vs{grid-template-columns:minmax(0,1fr)} .feat.rev .feat-t{order:0}
  .float.f1,.float.f2,.float.f3{left:10px; right:auto; top:auto; bottom:6px} .dash{transform:none} .hp{right:-6px} .vs{gap:44px} .all{grid-template-columns:repeat(2,1fr)} .duo{grid-template-columns:1fr} .bars{height:74px} .tb-g{grid-template-columns:minmax(0,1.6fr) repeat(6,minmax(0,1fr))}
  .steps{grid-template-columns:1fr 1fr; gap:34px 0} .steps:before,.steps:after{display:none} .bot{right:-110px}
  .js-anim .rv.rv-l, .js-anim .rv.rv-r{transform:translateY(30px)}
}
@media (max-width:640px){
  body{font-size:15.5px} .wrap{padding-inline:18px} .top .wrap{height:60px; gap:10px} .top-r .btn-p{display:none}
  .hero .lead{font-size:16.5px} .cta .btn{flex:1 1 100%} .blob{filter:blur(50px)}
  .float, .js-anim .float, .hp, .js-anim .hp{display:none} .scene{padding-bottom:0} .dash-bd{grid-template-columns:minmax(0,1fr)} .dash-sb{display:none} .dash-2{grid-template-columns:minmax(0,1fr)} .dk{grid-template-columns:1fr 1fr 1fr} .dk .h{grid-column:1/-1} .dk > div{padding:9px 10px}
  .nums{grid-template-columns:1fr 1fr} .nums > div{padding:20px 12px 20px 18px} .nums > div:nth-child(3){border-left:0} .nums > div:nth-child(n+3){border-top:1px solid var(--line2)}
  .kp{grid-template-columns:1fr 1fr 1fr; gap:8px} .kp div{padding:10px} .kp small{font-size:11px; white-space:nowrap} .kp b{font-size:17px}
  .daftar{padding:26px 14px 74px 54px} .daftar:before{left:42px} .daftar .holes{left:12px} .dl{font-size:19px} .stamp{font-size:12px; right:10px; bottom:14px}
  .pains li{grid-template-columns:1fr; gap:4px} .pains .ico{display:none}
  .zprint{padding-inline:16px} .orb.o2{display:none} .orb.o1{width:340px; height:340px; margin:-170px 0 0 -170px}
  .bot{position:relative; right:auto; bottom:auto; width:auto; margin:16px 6px 0; font-size:12.5px; border-radius:16px}
  .all{grid-template-columns:1fr} .all > div{padding-right:0}
  .qa summary{font-size:16px} .qa details p{padding-right:8px}
  .foot .cp{margin-left:0} .foot{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .mbar{position:fixed; left:0; right:0; bottom:0; z-index:60; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px 18px calc(10px + env(safe-area-inset-bottom,0px)); background:color-mix(in srgb, var(--ground) 90%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--line2); transition:transform .5s var(--ease)}
  .js-anim .mbar:not(.show){transform:translateY(110%)} .mbar .btn{height:46px; padding:0 10px; font-size:14.5px}
  /* --- telefon uchun alohida dizayn --- */
  .tb-g .n small{display:none} .tb{padding:12px}
  .top{--th:60px} .sec{padding-block:56px} .sec.t0{padding-top:0} .feat,.vs,.faq,.ask{gap:30px} .sec-head{margin-bottom:26px}
  .h2{font-size:26px} .lead{font-size:16px} .hero{padding-block:28px 56px} .hero h1{font-size:37px; margin:16px 0 18px} .cta{margin-top:24px} .blob.b1{width:340px; height:340px; opacity:.75}
  .trust{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:22px} .trust li{flex-direction:column; justify-content:flex-start; text-align:center; gap:6px; padding:11px 6px; border-radius:14px; background:var(--surface); border:1px solid var(--line2); font-size:11.5px; line-height:1.3}
  .ticks{gap:10px} .ticks li{font-size:14.5px; gap:10px} .chips li{font-size:13px; padding:6px 12px}
  .mock{padding:16px; border-radius:20px} .panel{border-radius:20px} .nums{border-radius:20px}
  /* imkoniyatlar — ochilib-yopiladigan guruhlar */
  .js .all{border-top:0; gap:10px} .js .all > div{padding:0; border:1px solid var(--line2); border-radius:16px; background:var(--surface)}
  .js .all h3{display:flex; align-items:center; gap:10px; margin:0; padding:16px; cursor:pointer; -webkit-tap-highlight-color:transparent}
  .js .all h3 i{display:grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:7px; background:var(--em-soft); font-style:normal; font-size:11.5px; letter-spacing:0}
  .js .all > div:not(.keep) h3:after{content:""; margin-left:auto; width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg) translate(-2px,-2px); transition:transform .35s var(--ease)} .js .all > div.open h3:after{transform:rotate(-135deg) translate(-2px,-2px)}
  .js .all > div:not(.open):not(.keep) ul{display:none} .js .all ul:not(.chips){padding:0 16px 12px} .js .all ul.chips{padding:0 16px 16px !important} .js .all .keep h3{cursor:default}
  .js-anim .all > div.open ul{animation:fadeDown .4s var(--ease)}
  /* qadamlar — vertikal chiziq */
  .steps{grid-template-columns:1fr; gap:0} .steps li{grid-template-columns:40px minmax(0,1fr); gap:4px 14px; padding:0 0 26px} .steps li:last-child{padding-bottom:0}
  .steps li:before{grid-row:1 / 3; margin:0} .steps li b{align-self:center; min-height:40px; display:flex; align-items:center} .steps li p{grid-column:2; margin-top:-6px}
  .steps li:not(:last-child):after{content:""; position:absolute; left:19.5px; top:46px; bottom:6px; width:1.5px; border-radius:2px; background:var(--em-line); transform-origin:50% 0}
  .js-anim .steps li:not(:last-child):after{background:var(--em); transform:scaleY(0)} .js-anim .steps.in li:not(:last-child):after{transform:scaleY(1); transition:transform .6s var(--ease); transition-delay:calc(var(--st,0) * 600ms + 700ms)}
}
@media (prefers-reduced-motion: reduce){ *,*:before,*:after{animation:none !important; transition:none !important} html{scroll-behavior:auto} }

/* ============ inline uslublardan ko‘chirilgan (CSP: style-src 'self') ============ */
[data-d="0"]{--d:0} [data-d="1"]{--d:1} [data-d="2"]{--d:2} [data-d="3"]{--d:3}
[data-i="0"]{--i:0} [data-i="5"]{--i:5} [data-i="7"]{--i:7} [data-i="9"]{--i:9}
[data-li="0"]{--li:0} [data-li="1"]{--li:1} [data-li="2"]{--li:2} [data-li="3"]{--li:3} [data-li="4"]{--li:4} [data-li="5"]{--li:5}
[data-pi="0"]{--pi:0} [data-pi="1"]{--pi:1} [data-pi="2"]{--pi:2} [data-pi="3"]{--pi:3}
[data-st="0"]{--st:0} [data-st="1"]{--st:1} [data-st="2"]{--st:2} [data-st="3"]{--st:3}
.u-emk{color:var(--em-ink) !important;font-weight:600 !important}
.u-fsn{font-style:normal !important}
.u-gc{grid-column:1/-1 !important}
.u-mt8{margin-top:8px !important}
.u-m0{margin:0 !important}
.u-pb18{padding-bottom:18px !important}
.u-abs{position:absolute !important}
.form .lead-hp{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; opacity:0; pointer-events:none}
.form .note.err{color:var(--red)}
.lang{display:inline-flex; align-items:stretch; height:42px; border-radius:11px; border:1px solid var(--line); background:var(--surface); font:600 13px/1 var(--body); letter-spacing:.02em; overflow:hidden}
.lang a,.lang span{display:grid; place-items:center; min-width:40px; padding-inline:4px; color:var(--muted); transition:color .2s, background .2s}
.lang span{background:var(--em-soft); color:var(--em-ink)}
.lang a:hover{color:var(--em-ink)}
@media (max-width:640px){.top-r .lang{display:none}}
.mlang{align-self:flex-start; margin-top:22px}
html[lang="ru"]{--disp:"Onest","Segoe UI",system-ui,sans-serif}
@media (min-width:641px){html[lang="ru"] .tb-g{grid-template-columns:minmax(0,3.4fr) repeat(6,minmax(0,1fr))}}
a[href^="tel:"].num{white-space:nowrap}
.brand svg{flex:none}
@media (min-width:1141px) and (max-width:1279px){html[lang="ru"] .nav{gap:16px; margin-left:0}}