/* Bosh sahifa "Vitrina 2" (2026-11-11): birinchi ekran = jonli mahsulot (aylanuvchi reels sahnasi), keyin 3D sahna,
   video kartalar, Obrazlar, guruh. Harakat: bitta orkestrlangan kirish, prujina, View Transitions, scroll-driven.
   Hammasi transform/opacity. Muhim: hech qaysi matn animatsiyaga bog'liq holda yashirin qolmaydi:
   kirish animatsiyasi .intro sinfida, u 1.8 s dan keyin olib tashlanadi (animatsiya to'xtab qolsa ham matn ko'rinadi). */
:root{--spring:cubic-bezier(.34,1.56,.64,1);
  --spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1)}
[hidden]{display:none!important}

/* ---------- 1. Birinchi ekran ---------- */
.hero{position:relative;padding-top:64px;background:var(--v-cream)}
.hl{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:clamp(20px,3vw,36px) 0 clamp(18px,2.4vw,28px)}
.hl h1{font:800 clamp(30px,4.4vw,62px)/1 var(--v-sans);letter-spacing:-.055em;white-space:nowrap}
.hl h1 em{font-style:normal;color:#6E685C}
.hl .l{display:inline-block}
.hero{--i0:0s}.hero.late{--i0:.8s}
.intro .hl .l{animation:hrise .9s var(--v-ease) backwards;animation-delay:var(--i0)}
.intro .hl .l:nth-child(2){animation-delay:calc(var(--i0) + .07s)}.intro .hl .l:nth-child(3){animation-delay:calc(var(--i0) + .14s)}
.intro .q{animation:hrise .9s var(--v-ease) backwards;animation-delay:calc(var(--i0) + .2s)}
.intro .trust{animation:hrise .9s var(--v-ease) backwards;animation-delay:calc(var(--i0) + .45s)}
@keyframes hrise{from{transform:translateY(.45em);opacity:.001}}
.q{flex:0 1 460px;display:flex;align-items:center;gap:8px;height:60px;padding:6px 6px 6px 20px;border-radius:999px;background:var(--v-card);box-shadow:inset 0 0 0 1.5px var(--v-line);transition:box-shadow .2s;box-sizing:border-box}
.q:focus-within{box-shadow:inset 0 0 0 1.5px var(--v-ink)}
.q>svg{width:19px;height:19px;flex:none}
.q input{all:unset;flex:1;min-width:0;font:500 16px var(--v-sans);color:var(--v-ink);caret-color:var(--v-ink)}
.q input::placeholder{color:var(--v-mute)}
.cam{all:unset;cursor:pointer;flex:none;width:48px;height:48px;border-radius:50%;background:var(--v-ink);color:var(--v-cream);display:grid;place-items:center;transition:transform .5s var(--spring)}
.cam:active{transform:scale(.88);transition-duration:.1s}
.cam:focus-visible{outline:2px solid var(--v-ink);outline-offset:3px}
.cam svg{width:21px;height:21px}

/* reels sahnasi: kartalar absolute, joyi transform bilan (coverflow); faqat markazdagi video o'ynaydi */
.stage{--w:min(360px,34vw);--gap:calc(var(--w) * .78);position:relative;height:clamp(560px,70vh,720px);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.rl{position:absolute;left:50%;top:0;width:var(--w);height:100%;margin-left:calc(var(--w) / -2);border-radius:26px;overflow:hidden;background:#1B1A17;color:var(--v-ntext);
  transform:translateX(calc(var(--k,0) * var(--gap))) scale(var(--s,1));opacity:var(--o,1);z-index:var(--z,1);
  transition:transform .8s var(--spring),opacity .5s var(--v-ease);will-change:transform;cursor:pointer;-webkit-tap-highlight-color:transparent}
.stage.drag .rl{transition:none}
.rl>img,.rl>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* faol reels: sekin kattalashuv (Ken Burns), faqat transform */
.rl>img,.rl>video{transform:scale(1);transition:transform 6.5s linear,opacity .5s}
.rl.on>img,.rl.on>video{transform:scale(1.07)}
@media (prefers-reduced-motion:reduce){.rl>img,.rl>video{transition:none;transform:none!important}}
.rl>video{opacity:0;transition:opacity .5s}
.rl>video.v-play{opacity:1}
.rl::after{content:"";position:absolute;inset:auto 0 0;height:46%;background:linear-gradient(180deg,rgba(8,9,11,0),rgba(8,9,11,.78));pointer-events:none}
.rl:not(.on)::before{content:"";position:absolute;inset:0;z-index:2;background:rgba(243,238,227,.08)}
.rl .rc{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:17px;background:rgba(8,9,11,.52);font:600 13px var(--v-sans);color:var(--v-ntext);
  opacity:0;transform:translateY(10px) scale(.85);transition:opacity .4s var(--v-ease),transform .7s var(--spring)}
.rl.on .rc{opacity:1;transform:none}
.rl.on .rc:nth-of-type(2){transition-delay:.08s}.rl.on .rc:nth-of-type(3){transition-delay:.16s}.rl.on .rc:nth-of-type(4){transition-delay:.24s}
.rl .rc svg{width:14px;height:14px}
.rl .c-where{left:16px;top:76px}
.rl .c-off{right:16px;top:76px;background:var(--v-lemon);color:var(--v-ink);border-radius:9px;font:700 14px var(--v-mono);padding:0 10px}
.rl .c-smp{right:16px;top:76px;font:600 11.5px var(--v-mono);letter-spacing:.08em;text-transform:uppercase}
.rl .c-time{left:16px;top:56%;font:700 13px var(--v-mono)}
.rl .c-try{right:16px;top:40%;height:44px;padding:0 16px 0 6px;border-radius:22px;background:var(--v-cream);color:var(--v-ink);font:700 14px var(--v-sans);text-decoration:none;box-shadow:0 0 0 6px rgba(243,238,227,.18)}
.rl .c-try span{width:32px;height:32px;border-radius:50%;background:var(--v-ink);color:var(--v-cream);display:grid;place-items:center}
.rl .cap2{position:absolute;z-index:3;left:18px;right:18px;bottom:18px;display:grid;gap:6px}
.rl .who{font:600 13px var(--v-sans);color:rgba(243,238,227,.78)}
.rl .ttl{font:700 18px/1.25 var(--v-sans);letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rl .buy{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.rl .buy .v-btn{height:48px;padding:0 20px;font-size:15px;flex:none}
.rl:not(.on) .buy .v-btn,.rl:not(.on) .who{display:none}
.rl .pr{display:grid;gap:4px;min-width:0}
.rl .prog{position:absolute;z-index:4;left:16px;right:16px;top:60px;height:3px;border-radius:2px;background:rgba(243,238,227,.25);overflow:hidden;opacity:0;transition:opacity .3s}
.rl.on .prog{opacity:1}
.rl .prog i{display:block;height:100%;background:var(--v-ntext);transform-origin:0 50%;transform:scaleX(0)}
.rl.on .prog i{animation:pfill var(--dur,6s) linear forwards}
.stage.hold .rl.on .prog i{animation-play-state:paused}
@keyframes pfill{to{transform:scaleX(1)}}
.intro .rl{animation:fly 1.1s var(--spring) backwards;animation-delay:calc(var(--i0) + .12s + var(--a,0) * .07s)}
/* ochilish pardasi: sessiyada bir marta, 1.4 s; animatsiya to'xtasa ham JS uni 2.4 s da olib tashlaydi */
.curtain{position:fixed;inset:0;z-index:400;background:var(--v-ink);display:grid;place-items:center;pointer-events:none;will-change:transform;animation:curup 1s cubic-bezier(.76,0,.24,1) .55s forwards}
.curtain b{display:block;width:min(420px,70vw);color:var(--v-cream);animation:curin .55s var(--v-ease) both}
.curtain svg{display:block;width:100%;height:auto}
.curtain rect[fill="#F3EEE3"]{fill:currentColor}
@keyframes curup{to{transform:translateY(-101%)}}
@keyframes curin{from{opacity:.001;transform:translateY(24px) scale(.96)}}
@keyframes fly{from{opacity:.001;transform:translateX(calc(var(--k,0) * var(--gap))) translateY(90px) scale(.84)}}
.navb{position:absolute;z-index:20;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:0;background:var(--v-card);color:var(--v-ink);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 10px 30px -14px rgba(11,14,19,.4),inset 0 0 0 1px var(--v-hair);transition:transform .5s var(--spring)}
.navb:active{transform:scale(.88);transition-duration:.1s}
.navb svg{width:19px;height:19px}
.navb.p{left:calc(50% - var(--w) / 2 - 76px)}.navb.n{right:calc(50% - var(--w) / 2 - 76px)}
.trust{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;padding:22px 0 0;font:600 14px var(--v-sans);color:var(--v-ink2)}
.trust span{display:inline-flex;align-items:center;gap:8px}.trust svg{width:17px;height:17px}

/* odometr: har raqam 0-9 ustuni, prujina bilan aylanadi */
.odo{display:inline-flex;align-items:flex-end;font:700 26px/1 var(--v-mono);letter-spacing:-.04em;height:1em;overflow:hidden;white-space:nowrap}
.odo .d{display:inline-block;height:1em;overflow:hidden}
.odo .d i{display:block;font-style:normal;transition:transform 1.1s var(--spring);will-change:transform}
.odo .d i b{display:block;height:1em;line-height:1em;font-weight:700}
.odo .s{display:inline-block;width:.32em}
.odo .c{display:inline-block;margin-left:.22em;font-size:.55em;line-height:1.3;letter-spacing:0}
.old{position:relative;font:600 13px var(--v-mono);color:rgba(243,238,227,.62);justify-self:start;white-space:nowrap}
.old::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1.5px;background:currentColor;transform-origin:0 50%;transform:scaleX(1);transition:transform .55s var(--v-ease) .35s}
.rl:not(.on) .old::after,.restrike .old::after{transform:scaleX(0);transition:none}

/* ---------- 2. 3D sahna ---------- */
.d3{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center}
.d3 .v-lede{margin:16px 0 24px}
.pick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.pick button{appearance:none;border:0;cursor:pointer;height:42px;padding:0 17px;border-radius:21px;background:transparent;color:var(--v-ink);font:700 14.5px var(--v-sans);box-shadow:inset 0 0 0 1.5px var(--v-line);
  transition:transform .5s var(--spring),background-color .25s,color .25s,box-shadow .25s}
.pick button[aria-pressed=true]{background:var(--v-ink);color:var(--v-cream);box-shadow:none}
.pick button:active{transform:scale(.9);transition-duration:.1s}
.d3 .row{display:flex;gap:12px;flex-wrap:wrap}
.sc3{position:relative;aspect-ratio:1/1;max-height:640px;width:100%;border-radius:32px;overflow:hidden;background:radial-gradient(90% 80% at 50% 60%,#FBF8F2 0%,#EFE9DC 60%,#E4DCCB 100%);touch-action:pan-y}
.sc3 canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.sc3 .fb{position:absolute;inset:0;display:grid;place-items:center}
.sc3 .fb .ld{font:600 13px var(--v-mono);letter-spacing:.06em;color:var(--v-mute);animation:ldp 1.2s ease-in-out infinite alternate}
@keyframes ldp{to{opacity:.35}}
.sc3 .fb img{width:52%;filter:drop-shadow(0 30px 30px rgba(11,14,19,.2))}
.sc3 .tag{position:absolute;z-index:2;left:18px;top:18px;font:600 11.5px var(--v-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--v-mute)}
.sc3 .hint{position:absolute;z-index:2;left:0;right:0;bottom:18px;text-align:center;font:600 13px var(--v-sans);color:var(--v-mute);padding:0 16px}
.sc3 .hint button{all:unset;cursor:pointer;font-weight:700;color:var(--v-ink);text-decoration:underline;text-underline-offset:3px}
.sc3 .price{position:absolute;z-index:2;right:18px;top:18px;display:grid;justify-items:end;gap:4px;padding:12px 14px;border-radius:18px;background:var(--v-ink);color:var(--v-ntext)}
.sc3 .price .odo{font-size:22px}
.sc3 .price .old{color:var(--v-nmute)}

/* ---------- 3. Video kartalar ---------- */
.vcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.vc{appearance:none;border:0;padding:0;cursor:pointer;position:relative;aspect-ratio:4/5.6;border-radius:20px;overflow:hidden;background:#1B1A17;color:var(--v-ntext);text-align:left;
  transition:transform .55s var(--spring);-webkit-tap-highlight-color:transparent;font:inherit}
.vc:active{transform:scale(.96);transition-duration:.12s}
.vc>img,.vc>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--v-ease),opacity .5s}
.vc>video{opacity:0}.vc>video.v-play{opacity:1}
@media (hover:hover){.vc:hover>img,.vc:hover>video{transform:scale(1.05)}}
.vc::after{content:"";position:absolute;inset:auto 0 0;height:52%;background:linear-gradient(transparent,rgba(8,9,11,.8));pointer-events:none}
.vc .tg{position:absolute;z-index:2;left:10px;top:10px;height:26px;padding:0 9px;border-radius:8px;display:inline-flex;align-items:center;font:700 12.5px var(--v-mono);background:var(--v-lemon);color:var(--v-ink)}
.vc .tg.c{background:var(--v-cream);font-family:var(--v-sans)}
.vc .hr{position:absolute;z-index:2;right:10px;top:10px;height:26px;padding:0 9px;border-radius:13px;display:inline-flex;align-items:center;gap:5px;font:700 12px var(--v-sans);background:rgba(8,9,11,.5)}
.vc .hr svg{width:13px;height:13px}
.vc .vcb{position:absolute;z-index:2;left:12px;right:12px;bottom:12px;display:grid;gap:3px}
.vc .vcb b{font:700 18px var(--v-mono);letter-spacing:-.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc .vcb span{font:600 13px var(--v-sans);color:rgba(243,238,227,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc .vcb s{font:600 12px var(--v-mono);color:rgba(243,238,227,.62)}
.full{position:fixed;inset:0;z-index:200;background:#0B0E13;color:var(--v-ntext);display:grid;grid-template-rows:minmax(0,1fr) auto}
.full .m{position:relative;min-height:0}
.full .m img,.full .m video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0B0E13}
.full .sh{padding:18px max(var(--v-gut),env(safe-area-inset-left)) calc(18px + env(safe-area-inset-bottom));display:grid;gap:10px;max-width:720px;width:100%;margin:0 auto;box-sizing:border-box}
.full .r{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.full .fw{font:600 13px var(--v-sans);color:var(--v-nmute)}
.full .ft{font:700 20px var(--v-sans);letter-spacing:-.02em}
.full .fp{font-size:30px;font-weight:700}
.full .xb{position:absolute;z-index:3;top:calc(14px + env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:46px;height:46px;border-radius:50%;border:0;background:rgba(8,9,11,.6);color:var(--v-ntext);cursor:pointer;display:grid;place-items:center}
.full .xb svg{width:20px;height:20px}
::view-transition-group(media){animation-duration:.6s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}

/* ---------- 4. Obrazlar: voqea bo'yicha to'plamlar (tovar + xizmat), bo'lakni almashtirish, bitta bron ---------- */
.occ{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px var(--v-gut) 18px;margin-inline:calc(var(--v-gut) * -1)}
.occ::-webkit-scrollbar{display:none}
.occ button{appearance:none;border:0;cursor:pointer;flex:none;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 18px 0 8px;border-radius:26px;
  background:var(--v-card);color:var(--v-ink);font:700 15px var(--v-sans);box-shadow:inset 0 0 0 1.5px var(--v-line);transition:transform .5s var(--spring),background-color .3s,color .3s,box-shadow .3s}
.occ button img{width:36px;height:36px;object-fit:contain;transition:transform .6s var(--spring)}
.occ button[aria-selected=true]{background:var(--v-ink);color:var(--v-cream);box-shadow:none}
.occ button[aria-selected=true] img{transform:scale(1.12) rotate(-6deg)}
.occ button:active{transform:scale(.94);transition-duration:.1s}
.kit{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;align-items:stretch}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{position:relative;aspect-ratio:1/1.05;border-radius:22px;overflow:hidden;background:var(--v-sunk);color:var(--v-ntext);isolation:isolate;
  animation:tin .7s var(--spring) backwards;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes tin{from{opacity:.001;transform:translateY(22px) scale(.94)}}
.tile:first-child{grid-row:span 2;aspect-ratio:auto}
.tile a.m{position:absolute;inset:0;display:block}
.tile img.p{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--v-ease)}
@media (hover:hover){.tile:hover img.p{transform:scale(1.05)}}
.tile::after{content:"";position:absolute;inset:auto 0 0;height:60%;background:linear-gradient(transparent,rgba(8,9,11,.82));pointer-events:none;z-index:1}
.tile.smp{background:radial-gradient(90% 80% at 50% 40%,#FBF8F2,#E9E2D3);color:var(--v-ink)}
.tile.smp::after{display:none}
.tile.smp img.p{inset:16% 18% 30%;width:64%;height:54%;object-fit:contain;filter:drop-shadow(0 18px 18px rgba(11,14,19,.18))}
.tile .lb{position:absolute;z-index:2;left:12px;top:12px;height:28px;padding:0 11px;border-radius:14px;background:var(--v-cream);color:var(--v-ink);font:700 12.5px var(--v-sans);display:inline-flex;align-items:center}
.tile .sw{all:unset;cursor:pointer;position:absolute;z-index:3;right:10px;top:10px;width:40px;height:40px;border-radius:50%;background:rgba(8,9,11,.55);color:var(--v-ntext);display:grid;place-items:center;transition:transform .5s var(--spring),background-color .2s}
.tile.smp .sw{background:var(--v-ink)}
.tile .sw:hover{transform:rotate(180deg)}
.tile .sw:active{transform:scale(.88)}
.tile .sw:focus-visible{outline:2px solid var(--v-cream);outline-offset:2px}
.tile .sw svg{width:18px;height:18px}
.tile .tb{position:absolute;z-index:2;left:14px;right:14px;bottom:12px;display:grid;gap:2px;pointer-events:none}
.tile .tb b{font:700 18px var(--v-mono);letter-spacing:-.04em;white-space:nowrap}
.tile .tb span{font:600 13px var(--v-sans);opacity:.86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.smp .tb span{opacity:.7}
.tile.swapping{animation:tsw .6s var(--spring)}
@keyframes tsw{0%{transform:scale(1)}40%{transform:scale(.92) rotate(-1.5deg);opacity:.4}100%{transform:none;opacity:1}}
.rcp{position:relative;border-radius:26px;background:var(--v-ink);color:var(--v-ntext);padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:14px}
.rcp h3{font:800 clamp(22px,2.2vw,30px)/1.1 var(--v-sans);letter-spacing:-.035em}
.rcp .by{font:600 12.5px var(--v-sans);color:var(--v-nmute);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rcp .by i{font-style:normal;font:600 11px var(--v-mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:6px;background:rgba(243,238,227,.1);color:var(--v-ntext)}
.rcp ul{list-style:none;margin:0;padding:0;display:grid}
.rcp li{display:flex;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px dashed var(--v-nline);font:600 14.5px var(--v-sans)}
.rcp li span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcp li small{color:var(--v-nmute);font:600 12px var(--v-sans);flex:none}
.rcp li b{font:700 15px var(--v-mono);letter-spacing:-.03em;white-space:nowrap}
.rcp .tot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:6px}
.rcp .tot small{font:600 13px var(--v-sans);color:var(--v-nmute)}
.rcp .tot .odo{font:700 clamp(26px,2.6vw,34px)/1 var(--v-mono);letter-spacing:-.05em}
.rcp .v-btn{width:100%}
.rcp .nt{font:500 12.5px/1.45 var(--v-sans);color:var(--v-nmute)}
.swap{margin-top:14px;border-radius:22px;background:var(--v-card);box-shadow:inset 0 0 0 1px var(--v-hair);padding:14px;animation:tin .5s var(--spring)}
.swap .sh2{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font:700 15px var(--v-sans)}
.swap .sh2 button{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--v-line);display:grid;place-items:center}
.swap .sh2 button svg{width:16px;height:16px}
.swap .row2{display:grid;grid-auto-flow:column;grid-auto-columns:150px;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.swap .row2::-webkit-scrollbar{display:none}
.swap .alt{appearance:none;border:0;padding:0;cursor:pointer;text-align:left;position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#1B1A17;color:var(--v-ntext);
  animation:tin .5s var(--spring) backwards;animation-delay:calc(var(--i,0) * 50ms);transition:transform .45s var(--spring);font:inherit}
.swap .alt:active{transform:scale(.94)}
.swap .alt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.swap .alt::after{content:"";position:absolute;inset:auto 0 0;height:60%;background:linear-gradient(transparent,rgba(8,9,11,.82))}
.swap .alt span{position:absolute;z-index:2;left:10px;right:10px;bottom:9px;display:grid;font:600 12px var(--v-sans)}
.swap .alt span b{font:700 15px var(--v-mono);letter-spacing:-.03em}
.swap .em{padding:18px 6px;color:var(--v-mute);font:600 14px var(--v-sans)}
.done{display:grid;gap:8px}
.done a{color:var(--v-ntext)}
.done .cd{font:700 22px var(--v-mono);letter-spacing:.12em;color:var(--v-lemon)}
@media (max-width:860px){.kit{grid-template-columns:1fr}.tile:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:16/10}}
@media (prefers-reduced-motion:reduce){.tile,.swap,.swap .alt{animation:none}.tile.swapping{animation:none}}

/* ---------- 5. Guruh ---------- */
.grp{background:var(--v-night);color:var(--v-ntext);border-radius:clamp(24px,3vw,40px);margin-inline:clamp(8px,1.2vw,16px);padding:clamp(48px,7vw,104px) 0}
.grp .v-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.grp .v-lede{color:var(--v-nmute);margin-top:18px}
.grp .v-btn{margin-top:30px}
.lad{background:var(--v-night2);border:1px solid var(--v-nline);border-radius:var(--v-r);padding:clamp(20px,2.4vw,32px)}
.tier{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--v-nline)}
.tier:nth-of-type(3){border-bottom:0}
.tier .n{font:600 14px var(--v-sans)}
.tier .bar{height:5px;border-radius:3px;background:var(--v-nline);overflow:hidden}
.tier .bar i{display:block;height:100%;background:var(--v-ntext);transform-origin:0 50%;transform:scaleX(var(--f,1))}
.tier .p{font:700 19px var(--v-mono);letter-spacing:-.03em}
.lad-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;font:600 13.5px var(--v-sans);color:var(--v-nmute)}
.lad-foot b{color:var(--v-ntext)}

/* ---------- 6-8 ---------- */
.sell{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--v-ink)}
.step{padding:28px 28px 8px 0}
.step+.step{padding-left:28px;border-left:1px solid var(--v-line)}
.step .v-num{font-size:13px;color:var(--v-mute)}
.step h3{font:700 clamp(21px,1.8vw,26px)/1.15 var(--v-sans);letter-spacing:-.03em;margin:14px 0 10px}
.step p{color:var(--v-mute);max-width:34ch}
.biz{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3vw,40px);align-items:center;padding:clamp(24px,3vw,40px);border-radius:clamp(24px,3vw,36px);background:var(--v-sunk)}
.zorb{width:clamp(80px,8vw,112px);aspect-ratio:1;border-radius:50%;background:var(--v-ink);display:grid;place-items:center}
.wave{display:flex;align-items:center;gap:5px;height:40%}
.wave i{width:5px;height:100%;border-radius:3px;background:var(--v-cream);transform:scaleY(.35)}
.wave i:nth-child(2),.wave i:nth-child(4){transform:scaleY(.6)}.wave i:nth-child(3){transform:scaleY(.85)}
.biz.talk .wave i{animation:wv .9s var(--v-ease) infinite alternate}
.biz.talk .wave i:nth-child(2){animation-delay:-.2s}.biz.talk .wave i:nth-child(3){animation-delay:-.45s}.biz.talk .wave i:nth-child(4){animation-delay:-.1s}.biz.talk .wave i:nth-child(5){animation-delay:-.6s}
@keyframes wv{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.biz h2{font:700 clamp(24px,2.4vw,34px)/1.1 var(--v-sans);letter-spacing:-.04em}
.biz p{color:var(--v-mute);margin-top:10px;max-width:60ch}
.biz .acts{display:flex;gap:10px;flex-wrap:wrap}
.biz [data-voice] .pa{display:none}.biz [data-voice][aria-pressed=true] .pl{display:none}.biz [data-voice][aria-pressed=true] .pa{display:block}
.end{padding:clamp(80px,11vw,160px) 0;text-align:center}
/* yakun: katta pixel logo (kod shrifti), piksellar navbat bilan yonadi, kursor miltillaydi */
.end h2.endlogo{margin:0 auto;width:min(720px,88%);color:var(--v-ink)}
.endlogo svg{display:block;width:100%;height:auto}
.endlogo rect[fill="#F3EEE3"]{fill:currentColor}
.endlogo rect[fill="#FFD60A"]{animation:blink 1.05s steps(1) infinite}
@supports (animation-timeline:view()){
  .endlogo rect[fill="#F3EEE3"]{animation:px linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
  @keyframes px{from{opacity:.08}}
}
.v-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes blink{50%{opacity:0}}
.end .v-lede{margin:22px auto 34px}
.end .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* surat bilan qidiruv natijasi: pastdan chiqadigan oyna */
.vs{position:fixed;inset:0;z-index:210;background:rgba(11,14,19,.55);display:grid;align-items:end}
.vs .p{background:var(--v-cream);border-radius:28px 28px 0 0;max-height:86vh;overflow:auto;padding:20px max(var(--v-gut),env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom));animation:up .6s var(--spring) backwards}
@keyframes up{from{transform:translateY(100%)}}
.vs .h{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.vs .h img{width:56px;height:56px;border-radius:14px;object-fit:cover;flex:none;background:var(--v-sunk)}
.vs .h b{display:block;font:700 18px var(--v-sans);letter-spacing:-.02em}
.vs .h small{font:500 13.5px var(--v-sans);color:var(--v-mute)}
.vs .xb{all:unset;cursor:pointer;margin-left:auto;flex:none;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--v-line);display:grid;place-items:center}
.vs .xb svg{width:18px;height:18px}
.vs .vcards{margin-top:14px}
.vs .scan{height:4px;border-radius:2px;background:var(--v-sunk);overflow:hidden}
.vs .scan i{display:block;height:100%;background:var(--v-ink);border-radius:2px;transform-origin:0 50%;animation:scan 8s cubic-bezier(.1,.7,.2,1) forwards}
@keyframes scan{from{transform:scaleX(.04)}to{transform:scaleX(.92)}}

/* scroll-driven: qo'llab-quvvatlanmasa hammasi joyida turadi */
@supports (animation-timeline:view()){
  .tier .bar i{animation:fillb linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
  .tier:nth-of-type(3) .bar i{animation-range:entry 50% cover 55%}
  @keyframes fillb{from{transform:scaleX(0)}}
}

@media (max-width:980px){
  .d3,.grp .v-wrap{grid-template-columns:1fr}
  .vcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .biz{grid-template-columns:auto 1fr}.biz .acts{grid-column:1/-1}
}
@media (max-width:760px){
  /* telefonda: reels birinchi, to'liq ekran; sarlavha va qidiruv uning ostida */
  .hero{display:flex;flex-direction:column}
  .hero .stage{--w:100vw;--gap:100vw;order:-1;height:min(74svh,640px);border-radius:0 0 28px 28px}
  .rl{border-radius:0}
  .navb{display:none}
  .hl{flex-direction:column;align-items:stretch;gap:14px;padding:18px 0 4px}
  .hl h1{font-size:clamp(24px,7.2vw,32px)}
  .q{flex:none;height:56px}
  .trust{justify-content:flex-start;padding-top:16px}
  .sell{grid-template-columns:1fr}.step,.step+.step{padding:24px 0;border-left:0;border-bottom:1px solid var(--v-line)}
  .tier{grid-template-columns:76px minmax(0,1fr) auto;gap:12px}
  .biz{grid-template-columns:1fr}.zorb{width:72px}
}
@media (prefers-reduced-motion:reduce){
  .rl,.rl .rc{transition:none!important}
  .rl .rc{opacity:1;transform:none}
  .rl .old::after{transform:scaleX(1)!important}
}

/* ---- Liquid Glass qatlami (2026-11-11) + tuzatishlar ---- */
.hero{padding-top:84px}
/* qidiruv: shisha kapsula */
.q{background:var(--g-fill);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:var(--g-shadow),inset 0 1px 0 var(--g-edge),inset 0 0 0 1px var(--g-rim)}
.q:focus-within{box-shadow:0 14px 40px -14px rgba(11,14,19,.36),inset 0 1px 0 var(--g-edge),inset 0 0 0 1.5px var(--v-ink)}
/* video ustidagi belgilar: qorong'i shisha (limon −% tegi o'z rangida qoladi) */
.rl .rc:not(.c-off){background:var(--g-dfill);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:inset 0 1px 0 var(--g-dedge),inset 0 0 0 1px var(--g-drim)}
.rl .c-try{background:rgba(251,248,242,.62);color:var(--v-ink);box-shadow:0 10px 26px -12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(255,255,255,.4)}
.navb{background:var(--g-fill);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:var(--g-shadow),inset 0 1px 0 var(--g-edge),inset 0 0 0 1px var(--g-rim)}
.navb:hover{transform:scale(1.08)}
/* to'liq ekran: yopish tugmasi va pastki panel video ustida suzadi */
.full{grid-template-rows:minmax(0,1fr)}
.full .m img,.full .m video{object-fit:cover}
@media (min-aspect-ratio:1/1){.full .m img,.full .m video{object-fit:contain}}
.full .xb{background:var(--g-dfill);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:inset 0 1px 0 var(--g-dedge),inset 0 0 0 1px var(--g-drim)}
.full .sh{position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;max-width:720px;margin:0 auto;border-radius:28px;
  padding:18px 18px 18px 22px;background:var(--g-dfill);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6),inset 0 1px 0 var(--g-dedge),inset 0 0 0 1px var(--g-drim);animation:shup .6s var(--v-spring) backwards .1s}
@keyframes shup{from{opacity:0;transform:translateY(24px) scale(.96)}}
.full .fw{color:rgba(243,238,227,.72)}
/* to'plam plitkalari: yorliq va almashtirish tugmasi shisha */
.tile .lb{background:rgba(251,248,242,.6);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:inset 0 1px 0 var(--g-edge),inset 0 0 0 1px var(--g-rim)}
.tile .sw{background:var(--g-dfill);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:inset 0 1px 0 var(--g-dedge),inset 0 0 0 1px var(--g-drim)}
/* namunali to'plam: "bu yerda e'lon chiqadi" o'rniga — toifaga o'tish */
.tile.smp a.m{z-index:2}
.tile.smp .tb{pointer-events:none}
.tile.smp .go{display:inline-flex;align-items:center;gap:6px;font:700 13.5px var(--v-sans);opacity:1!important}
.tile.smp .go svg{width:15px;height:15px;transition:transform .4s var(--v-ease)}
@media (hover:hover){.tile.smp:hover .go svg{transform:translateX(4px)}}
.rcp .hint{font:600 13px/1.4 var(--v-sans);color:var(--v-nmute)}
/* surat qidiruvi oynasi: shisha varaq */
.vs{background:rgba(11,14,19,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vs .p{background:rgba(243,238,227,.78);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  box-shadow:0 -20px 60px -30px rgba(11,14,19,.4),inset 0 1px 0 rgba(255,255,255,.8)}
@media (max-width:760px){
  .hero{padding-top:0}
  .hl h1{white-space:normal;font-size:clamp(26px,8vw,34px);line-height:1.04}
  .full .sh{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));border-radius:24px}
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .q,.navb,.tile .lb{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--v-card)}
  .rl .rc:not(.c-off),.full .xb,.full .sh,.tile .sw{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(11,14,19,.92)}
  .vs .p{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--v-cream)}
}
/* kit.css dagi .hl (marker) sarlavha blokiga ham tushib qolgan edi */
.hero .hl{background:none;padding-inline:0}