/* Cognita — bosh sahifa: premium futuristik EdTech (dark space UI + glassmorphism).
   Interfeys tokenlari tokens.css dan; sahna ataylab qorong'i — golograf faqat qorong'ida "yonadi".
   Joylashuv: robot markazda (o'lchami home.js da hisoblanadi), chapda 3 va o'ngda 3 ta glass karta
   (CSS grid — 3 ustun, ko'zgu simmetriya), telefonda 3×2 ikonka to'ri. Faqat dizayn: JS mantiqi, ID va matnlar o'zgarmagan. */
html,body{height:100%;margin:0}
body{background:var(--bg-app);color:var(--text-primary);font-family:var(--font-sans);overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.stage{
  --h-bg:#020817; --h-bg2:#03101f; --h-bg3:#06182c; --h-bg4:#071426;
  --h-s1:rgba(9,22,42,.72); --h-s2:rgba(13,28,52,.82); --h-line:rgba(130,190,255,.14); --h-line2:rgba(130,190,255,.26);
  --h-t1:#F7FAFF; --h-t2:#9EAEC2; --h-t3:#6C7B92;
  --h-acc:#32E6D3; --h-acc2:#42C9FF; --h-acct:#5FF0DE; --h-accs:rgba(33,230,190,.12); --h-accss:rgba(45,255,210,.35);
  --h-ok:#32E89A; --h-warn:#F4BD63; --h-purple:#9D78FF; --h-gold:#F4BD63;
  --h-disp:'Plus Jakarta Sans',var(--font-sans);
  position:relative;height:100%;overflow:hidden;color:var(--h-t1);color-scheme:dark;
  /* chuqur kosmik fon: to'liq qora emas — ko'k-teal tuslar, yuqori chapda uzoq tumanlik, robot ortida orbital halo,
     pastda Yer atmosferasiga o'xshash gorizont nuri. Hammasi bitta fon qatlamida (alohida blur qatlamlari yo'q — kadr tezligi uchun). */
  background:
    radial-gradient(ellipse 70% 55% at 18% -10%, rgba(24,80,140,.28), transparent 60%),
    radial-gradient(circle min(36vw,460px) at 50% 44%, rgba(37,255,205,.09), rgba(0,160,255,.04) 55%, transparent 100%),
    radial-gradient(ellipse 80% 40% at 50% 112%, rgba(46,230,207,.20), rgba(30,140,210,.09) 45%, transparent 72%),
    linear-gradient(180deg,var(--h-bg) 0%,var(--h-bg2) 42%,var(--h-bg3) 78%,var(--h-bg4) 100%);
}
.stage a{color:inherit;text-decoration:none}
.stage button{font:inherit;color:inherit;cursor:pointer}
.stage svg.ci{flex:none}
canvas.bg{position:absolute;inset:0;width:100%;height:100%}

/* ── robot: 3D bosh konteyneri — o'lchami va joyi JS da (layout) hisoblanadi ── */
.robot-wrap{position:absolute;z-index:2;display:grid;place-items:center}
.robot-wrap > *{grid-area:1/1;position:relative;z-index:1}
.robot-wrap canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none;outline:none}
.robot-wrap canvas.dragging{cursor:grabbing}
.robot-wrap canvas:focus-visible{outline:2px solid var(--h-accss);outline-offset:-2px;border-radius:24px}
.robot-wrap img{width:88%;height:88%;object-fit:contain;transition:transform .12s linear}
/* HUD: radial nur + ikki konsentrik doira (ustki yoy yorqinroq) — statik: robotning o'zi nafas oladi va qaraydi */
.robot-wrap::before{content:"";position:absolute;left:50%;top:50%;height:132%;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:0;transform:translate(-50%,-50%) rotate(-28deg);
  border:1px solid rgba(50,230,220,.14);border-top-color:rgba(50,230,220,.5);outline:1px solid rgba(66,201,255,.08);outline-offset:-16px;
  background:radial-gradient(circle closest-side,rgba(37,255,205,.16),rgba(0,160,255,.07) 46%,transparent 74%)}
/* golografik platforma: robot iyagi ostidagi elliptik neon halqalar */
.robot-wrap::after{content:"";position:absolute;left:50%;top:79%;width:74%;height:13%;transform:translateX(-50%);border-radius:50%;pointer-events:none;z-index:0;
  border:2px solid rgba(40,240,220,.5);box-shadow:0 0 26px rgba(40,240,220,.28),inset 0 0 22px rgba(40,240,220,.14);
  background:radial-gradient(ellipse closest-side,rgba(40,240,220,.10) 0%,transparent 60%,rgba(40,240,220,.32) 70%,transparent 75%,transparent 84%,rgba(40,240,220,.16) 88%,transparent 93%);
  filter:drop-shadow(0 0 8px rgba(40,240,220,.35));animation:h-pulse 5s ease-in-out infinite}
@keyframes h-pulse{50%{opacity:.7}}

.glass{background:var(--h-s1);border:1px solid var(--h-line);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}

/* ── header: suzuvchi glass panel ── */
.top{position:absolute;left:16px;right:16px;top:calc(12px + env(safe-area-inset-top,0px));z-index:5;height:72px;display:flex;align-items:center;gap:10px;
  padding:0 20px;border-radius:22px;background:rgba(5,15,30,.45);border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 10px 40px rgba(0,0,0,.25)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--h-disp);font-weight:800;font-size:17px;letter-spacing:-.02em;color:#fff}
.logo i{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--h-acc),var(--h-acc2));display:grid;place-items:center;color:#021414;font-style:normal;font-weight:800;font-size:17px;box-shadow:0 0 22px rgba(50,230,211,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.logo span{color:var(--h-acc);font-weight:800}
/* asosiy menyu: Bosh sahifa · Biz haqimizda · Tariflar · Aloqa — dumaloq glass panel */
.nav{display:flex;align-items:center;gap:3px;height:44px;padding:0 5px;border-radius:999px;margin-left:clamp(10px,2vw,28px);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.nav a,.nav button{display:inline-flex;align-items:center;height:34px;padding:0 15px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--h-t2);border:1px solid transparent;background:transparent;white-space:nowrap;transition:color .2s,background .2s}
.nav a:hover,.nav button:hover{color:var(--h-t1);background:rgba(255,255,255,.06)}
.nav .on{color:var(--h-t1);background:rgba(33,230,190,.12);border-color:rgba(45,255,210,.35);box-shadow:0 0 20px rgba(30,255,200,.12)}
.right{display:flex;align-items:center;gap:10px;margin-left:auto}
.pill{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:999px;font-size:12.5px;font-weight:500;color:var(--h-t2);white-space:nowrap}
.pill b{color:var(--h-t1)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--h-ok);box-shadow:0 0 0 3px rgba(50,232,154,.16),0 0 10px rgba(50,232,154,.7);flex:none}
.off .dot,.dot.off{background:var(--h-t3);box-shadow:none}
.btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border-radius:14px;font-size:13.5px;font-weight:600;white-space:nowrap;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);transition:transform .2s,box-shadow .25s,border-color .2s,background .2s}
.btn:hover{border-color:var(--h-accss);background:rgba(255,255,255,.09)}
.btn.pri{background:linear-gradient(135deg,#2ee6cf,#58e3df);border-color:transparent;color:#021414;box-shadow:0 8px 30px rgba(52,230,210,.25)}
.btn.pri:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(52,230,210,.42)}
.ib{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;color:var(--h-t2);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);transition:color .2s,border-color .2s,background .2s}
.ib:hover,.ib.on{color:var(--h-acct);border-color:var(--h-accss);background:var(--h-accs)}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--h-acc2),var(--h-acc));color:#021414;display:grid;place-items:center;font-weight:700;font-size:14px;box-shadow:0 0 16px rgba(50,230,211,.35)}
.g-only,.u-only,.a-only{display:none}
[data-state="guest"] .g-only{display:inline-flex}
[data-state="user"] .u-only,[data-state="admin"] .u-only{display:inline-flex}
[data-state="admin"] .a-only{display:inline-flex}
.stage :focus-visible{outline:2px solid var(--h-acc);outline-offset:2px}

/* ── salomlashuv (hero sarlavha: robot va qo'ng'iroq tugmasidan keyin) ── */
/* kengligi — markaziy ustun (kartalar ustiga chiqmaydi); telefonda to'liq kenglik */
.greet{position:absolute;left:50%;transform:translateX(-50%);z-index:4;text-align:center;pointer-events:none;
  width:min(760px,max(var(--mid-min),calc(100vw - 2 * var(--side-max) - 2 * var(--col-gap) - 32px)))}
.greet h1{margin:0;font-family:var(--h-disp);font-size:clamp(22px,min(4.4vh,4vw),50px);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:#fff}
/* «Nimadan» oq, «boshlaymiz?» — oq→cyan→moviy gradient (matn JS bilan harf-harf yoziladi, shuning uchun gradient span bo'ylab) */
.greet h1 #say{background:linear-gradient(90deg,#ffffff 0%,#ffffff 42%,#2ef5d0 72%,#4bd8ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.greet h1 i{display:inline-block;width:3px;height:.9em;background:var(--h-acct);vertical-align:-.08em;margin-left:4px;border-radius:2px;box-shadow:0 0 10px var(--h-acct);animation:h-blink 1s steps(2) infinite}
.greet p{margin:10px 0 0;font-size:clamp(13px,1.9vh,18px);font-weight:400;color:rgba(215,225,240,.68);letter-spacing:.01em}
@keyframes h-blink{50%{opacity:0}}

/* ── ilovalar: chapda 4, o'ngda 4 ta glass karta (3 ustunli grid, robot markazda, ko'zgu simmetriya) ── */
.stage{--side-min:240px;--side-max:330px;--mid-min:calc(30vw + 48px);--col-gap:40px}
@media (orientation:portrait){ .stage{--mid-min:calc(40vw + 40px)} }
.mods{--row-gap:16px;
  --card-h:clamp(54px,calc((100vh - 280px) / 4),104px);
  position:absolute;left:0;right:0;top:calc(92px + env(safe-area-inset-top,0px));bottom:56px;z-index:3;pointer-events:none;
  display:grid;grid-template-columns:minmax(var(--side-min),var(--side-max)) minmax(var(--mid-min),1fr) minmax(var(--side-min),var(--side-max));
  grid-template-rows:repeat(4,var(--card-h));column-gap:var(--col-gap);row-gap:var(--row-gap);align-content:center;
  max-width:1560px;margin:0 auto;padding:0 16px 3vh;box-sizing:border-box}
.chip:nth-child(-n+4){grid-column:1}
.chip:nth-child(n+5){grid-column:3}
.chip:nth-child(1),.chip:nth-child(5){grid-row:1}
.chip:nth-child(2),.chip:nth-child(6){grid-row:2}
.chip:nth-child(3),.chip:nth-child(7){grid-row:3}
.chip:nth-child(4),.chip:nth-child(8){grid-row:4}
/* karta: to'q shisha + o'z rangidagi gradient hoshiya (padding-box / border-box qatlamlari) va ikonka
   tomondan yumshoq nur (::before — faqat hover'da opacity o'zgaradi; doimiy animatsiya/blur yo'q) */
.chip{position:relative;left:auto!important;top:auto!important;transform:none;display:flex;align-items:center;gap:16px;min-width:0;height:100%;padding:0 16px 0 14px;box-sizing:border-box;
  border-radius:22px;pointer-events:auto;text-align:left;isolation:isolate;--c1:var(--h-acc);--c2:var(--h-acc2);--ink:#041018;--glow-x:0%;
  border:1px solid transparent;
  background:linear-gradient(135deg,rgba(14,30,56,.92),rgba(6,16,32,.86)) padding-box,
    linear-gradient(135deg,color-mix(in srgb,var(--c1) 55%,transparent),rgba(120,190,255,.10) 42%,rgba(120,190,255,.06) 70%,color-mix(in srgb,var(--c2) 30%,transparent)) border-box;
  box-shadow:0 14px 38px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease}
.chip::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:.6;transition:opacity .3s ease;
  background:radial-gradient(90% 130% at var(--glow-x) 50%,color-mix(in srgb,var(--c1) 20%,transparent),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 45%)}
/* o'ng ustun — ko'zgu: ikonka tashqi chetda, tugma robot tomonda */
.chip:nth-child(n+5){flex-direction:row-reverse;text-align:right;padding:0 14px 0 16px;--glow-x:100%}
.chip:nth-child(n+5) .go::before{transform:rotate(-135deg);margin:0 0 0 3px}
.chip .ic{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;color:var(--ink);flex:none;position:static;
  background:radial-gradient(120% 90% at 30% 15%,rgba(255,255,255,.38),transparent 55%),linear-gradient(145deg,var(--c1),var(--c2));
  box-shadow:0 0 0 5px color-mix(in srgb,var(--c1) 10%,transparent),0 10px 24px color-mix(in srgb,var(--c1) 34%,transparent),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 6px rgba(0,0,0,.12);
  transition:box-shadow .28s ease}
.chip .ic svg{width:26px;height:26px;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.chip .tx{min-width:0;flex:1}
.chip b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:16px;font-weight:650;line-height:1.25;color:#fff;letter-spacing:-.015em}
.chip p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:4px 0 0;font-size:12.5px;line-height:1.35;color:#93a4bb;overflow:hidden}
/* «ochish» tugmasi — dumaloq, ilova rangida */
.chip.soon b{color:var(--h-t2)}
.chip.soon .go{opacity:.45}
.chip .go{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;color:color-mix(in srgb,var(--c1) 80%,#fff);
  background:color-mix(in srgb,var(--c1) 10%,transparent);border:1px solid color-mix(in srgb,var(--c1) 26%,transparent);
  transition:background .28s ease,color .28s ease,border-color .28s ease,transform .28s cubic-bezier(.2,.8,.2,1)}
.chip .go::before{content:"";width:7px;height:7px;border-right:1.8px solid;border-top:1.8px solid;transform:rotate(45deg);margin-right:3px}
.chip:hover,.chip:focus-visible{outline:none;transform:translateY(-3px);
  box-shadow:0 18px 46px rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,var(--c1) 38%,transparent),0 0 34px color-mix(in srgb,var(--c1) 18%,transparent)}
.chip:hover::before,.chip:focus-visible::before{opacity:1}
.chip:hover .ic,.chip:focus-visible .ic{box-shadow:0 0 0 6px color-mix(in srgb,var(--c1) 16%,transparent),0 12px 30px color-mix(in srgb,var(--c1) 48%,transparent),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 6px rgba(0,0,0,.12)}
.chip:hover .ic svg,.chip:focus-visible .ic svg{transform:scale(1.1)}
.chip:hover .go,.chip:focus-visible .go{background:linear-gradient(145deg,var(--c1),var(--c2));color:var(--ink);border-color:transparent;transform:translateX(2px)}
.chip:nth-child(n+5):hover .go,.chip:nth-child(n+5):focus-visible .go{transform:translateX(-2px)}
.chip.soon:hover .go,.chip.soon:focus-visible .go{background:color-mix(in srgb,var(--c1) 10%,transparent);color:color-mix(in srgb,var(--c1) 80%,#fff);border-color:color-mix(in srgb,var(--c1) 26%,transparent)}
.chip:focus-visible{box-shadow:0 0 0 2px var(--h-acc),0 18px 46px rgba(0,0,0,.4)}
.chip:active{transform:translateY(-1px) scale(.99)}
/* «PIN bilan» / «Yangi» yorliqlari — sarlavha ustida kichik yorliq */
.chip .badge{display:inline-flex;align-items:center;height:18px;margin:0 0 5px;font-size:10.5px;font-weight:600;line-height:1;padding:0 8px;box-sizing:border-box;white-space:nowrap;border-radius:999px;letter-spacing:.02em;
  background:rgba(50,232,154,.14);color:#7CF2BC;border:1px solid rgba(50,232,154,.35)}
.chip .badge.new{background:rgba(244,189,99,.16);color:var(--h-gold);border-color:rgba(244,189,99,.4)}
.chip .badge.soon{background:rgba(120,140,170,.18);color:var(--h-t2);border-color:rgba(255,255,255,.14)}
/* o'chiq / «tez kunda» ilova: ikonka xira (filter emas — gradient aralashmasi), tugma sokin */
.chip.off .ic,.chip.soon .ic{background:linear-gradient(145deg,color-mix(in srgb,var(--c1) 42%,#26364d),color-mix(in srgb,var(--c2) 42%,#1b2a40));box-shadow:0 6px 16px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.14);color:rgba(255,255,255,.7)}
/* ranglar — har ilovaning o'z gradienti */
.chip[data-app="board"]{--c1:#32E6D3;--c2:#42C9FF}
.chip[data-app="tests"]{--c1:#F4BD63;--c2:#F08A24}
.chip[data-app="grafika"]{--c1:#A78BFA;--c2:#7C5CFF;--ink:#fff}
.chip[data-app="lesson"]{--c1:#32E89A;--c2:#1FA971}
.chip[data-app="chat"]{--c1:#FBBF24;--c2:#EA580C}
.chip[data-app="world"]{--c1:#42C9FF;--c2:#2563EB;--ink:#fff}
.chip[data-app="lab"]{--c1:#F472B6;--c2:#DB2777;--ink:#fff}
.chip[data-app="library"]{--c1:#FB923C;--c2:#C2410C;--ink:#fff}

/* o'rta ekranlar: kartalar ixcham — faqat ikonka va nom */
@media (max-width:1180px){
  .stage{--side-min:200px;--side-max:300px;--col-gap:28px}
  .chip{gap:12px;padding:0 12px;border-radius:18px}
  .chip:nth-child(n+5){padding:0 12px}
  .chip .ic{width:48px;height:48px;border-radius:15px}
  .chip .ic svg{width:23px;height:23px}
  .chip b{font-size:14px}
  .chip p{display:none}
  .chip .badge{font-size:9.5px;height:16px;padding:0 7px;margin-bottom:4px}
}
@media (max-width:900px){
  .stage{--side-min:150px;--side-max:220px;--col-gap:20px}
  .mods{padding:0 12px 3vh}
  .chip{gap:10px;padding:0 10px;border-radius:16px}
  .chip .ic{width:42px;height:42px;border-radius:13px}
  .chip .ic svg{width:20px;height:20px}
  .chip b{font-size:12.5px}
  .chip .go{display:none}
  .chip .badge{display:none}
}

/* telefon: to'r (4 ustun × 2 qator, robot ostida); yotiq qisqa ekran: robot chapda, to'r o'ngda */
.mods.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(0,auto);gap:8px;padding:0 12px;
  inset:auto 0 calc(60px + env(safe-area-inset-bottom,0px)) 0;height:auto;align-content:end;max-width:none;margin:0}
.mods.grid .chip{grid-column:auto;grid-row:auto;flex-direction:column;justify-content:flex-start;gap:7px;height:auto;width:auto;min-width:0;padding:10px 2px 8px;text-align:center;
  border-radius:16px;box-shadow:0 8px 20px rgba(0,0,0,.25);--glow-x:50%}
.mods.grid .chip::before{background:radial-gradient(90% 70% at 50% 0%,color-mix(in srgb,var(--c1) 24%,transparent),transparent 70%)}
.mods.grid .chip .ic{width:46px;height:46px;border-radius:14px;box-shadow:0 0 0 4px color-mix(in srgb,var(--c1) 10%,transparent),0 8px 18px color-mix(in srgb,var(--c1) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
.mods.grid .chip .ic svg{width:22px;height:22px}
.mods.grid .chip .tx{flex:none;max-width:100%}
.mods.grid .chip b{font-size:10.5px;line-height:1.2;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.mods.grid .chip p{display:none}
.mods.grid .chip .go{display:none}
.mods.grid .chip .badge{display:none}
.mods.grid .chip .badge.soon{display:inline-flex;position:absolute;top:5px;right:5px;margin:0;height:15px;padding:0 6px;font-size:8.5px}
.mods.grid .chip:hover,.mods.grid .chip:focus-visible{transform:none}
.mods.grid.wide{padding:0;gap:6px 4px;align-content:center}
.mods.grid.wide .chip{padding:6px 2px}
.mods.grid.wide .chip .ic{width:42px;height:42px}

/* ── pastki panel: minimal ── */
.bottom{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;gap:8px;
  padding:0 clamp(16px,2.2vw,32px) calc(12px + env(safe-area-inset-bottom,0px));font-size:12px;color:var(--h-t3)}
.bottom .sp{flex:1}
.bottom .links{display:flex;align-items:center;gap:2px}
.bottom .links button,.bottom .links a{display:inline-flex;align-items:center;height:28px;padding:0 9px;border:0;background:transparent;border-radius:8px;font-size:12px;color:var(--h-t2);white-space:nowrap;transition:color .2s,background .2s}
.bottom .links button:hover,.bottom .links a:hover{color:var(--h-t1);background:rgba(255,255,255,.06)}
.bottom .m-only{display:none}
.join{display:flex;gap:8px;align-items:center;margin:0}
.join input{width:104px;height:38px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(5,15,30,.55);color:var(--h-t1);padding:0 12px;font:600 13px var(--font-mono);letter-spacing:.16em;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .2s,box-shadow .2s}
.join input::placeholder{font-weight:500;letter-spacing:.06em;color:var(--h-t3)}
.join input:focus{outline:none;border-color:var(--h-accss);box-shadow:0 0 0 3px rgba(50,230,211,.12)}
.join button{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:12px;border:1px solid rgba(45,255,210,.3);background:rgba(33,230,190,.10);color:var(--h-t1);font-size:12.5px;font-weight:600;transition:background .2s,border-color .2s,box-shadow .2s}
.join button::after{content:"→";font-weight:500;color:var(--h-acct)}
.join button:hover{background:rgba(33,230,190,.18);border-color:var(--h-accss);box-shadow:0 0 18px rgba(40,230,210,.15)}
.copy{white-space:nowrap}

/* ── foydalanish siyosati oynasi ── */
.info{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:21;width:min(92vw,540px);max-height:min(84%,640px);overflow:auto;border-radius:24px;padding:26px 28px 24px;
  background:linear-gradient(135deg,rgba(13,28,52,.92),rgba(7,18,35,.9));border-color:rgba(120,190,255,.18);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 40px rgba(40,230,210,.06)}
.info[hidden]{display:none}
.info h2{margin:0 0 12px;font-family:var(--h-disp);font-size:20px;font-weight:700;letter-spacing:-.02em;padding-right:44px}
.info p,.info li{font-size:14px;line-height:1.6;color:var(--h-t2);margin:0 0 10px}
.info p b,.info li b{color:var(--h-t1);font-weight:600}
.info ul{margin:0 0 10px;padding-left:18px}
.info li{margin:0 0 6px}
.info a{color:var(--h-acct);text-decoration:underline;text-underline-offset:3px}
.info .dim{color:var(--h-t3);font-size:12.5px;margin-bottom:0}
.info .x{position:absolute;top:16px;right:16px}

.scrim{position:absolute;inset:0;z-index:19;background:rgba(2,8,23,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:none}
.scrim.open{display:block}

/* ── kamera oynachasi ── */
.cam{position:absolute;right:clamp(16px,2.2vw,32px);top:calc(96px + env(safe-area-inset-top,0px));z-index:6;width:100px;height:74px;border-radius:12px;overflow:hidden;display:none;opacity:.8;border-color:var(--h-accss)}
.cam.on{display:block}
.cam video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cam i{position:absolute;left:7px;bottom:5px;font:600 9px var(--font-mono);color:var(--h-acct);font-style:normal;letter-spacing:.06em}

/* ── qurilmalar ── */
@media (max-width:600px){
  .top{left:10px;right:10px;top:calc(8px + env(safe-area-inset-top,0px));height:58px;padding:0 12px;border-radius:18px;gap:6px}
  .logo{font-size:15px}.logo i{width:28px;height:28px;font-size:15px;border-radius:9px}
  .copy,.pill.ai,.nav{display:none}
  .bottom .m-only{display:inline-flex}
  .bottom .links{gap:0;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
  .bottom .links::-webkit-scrollbar{display:none}
  .bottom .sp{display:none}
  .bottom .join{flex:none}
  .bottom .links button,.bottom .links a{padding:0 6px;font-size:11px}
  .bottom{gap:4px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .join{gap:5px}
  .join input{width:72px;height:34px;padding:0 9px}
  .join button{height:34px;padding:0 10px;font-size:12px}
  .btn{height:34px;padding:0 12px;font-size:12.5px;border-radius:11px}
  .ib{width:34px;height:34px;border-radius:11px}
  .info{padding:20px 18px 18px;border-radius:18px}
  .greet{width:94vw}
  .greet h1{font-size:clamp(20px,6.2vw,28px)}
  .greet p{font-size:12.5px;margin-top:6px}
  .cam{top:calc(74px + env(safe-area-inset-top,0px));right:10px;width:84px;height:62px}
  /* og'ir effektlar soddalashtiriladi */
  .robot-wrap::after{animation:none}
  .robot-wrap::before{background:radial-gradient(circle closest-side,rgba(37,255,205,.14),rgba(0,160,255,.06) 46%,transparent 74%)}
}
@media (max-width:980px){ .nav a,.nav button{padding:0 11px;font-size:13px} .nav{margin-left:8px} }
@media (max-width:820px){ .nav{display:none} .bottom .m-only{display:inline-flex} .top{height:64px;padding:0 16px} .mods{top:calc(84px + env(safe-area-inset-top,0px))} }
@media (max-width:900px){ .copy{display:none} }   /* tor ekranda footer sig'sin: mualliflik matni telefon kabi yashirinadi */
@media (max-height:520px){ .greet p{display:none} }
@media (prefers-reduced-motion:reduce){
  .greet h1 i{animation:none} .chip,.chip .ic,.chip::before,.chip .go,.btn{transition:none}
  .robot-wrap::after{animation:none}
}

/* ── jonli qo'ng'iroq (robot ostida) ── */
.call{position:absolute;z-index:6;transform:translateX(-50%);display:flex;justify-content:center;--lvl:0}
.call-btn{position:relative;display:inline-flex;align-items:center;gap:12px;height:60px;padding:0 30px 0 10px;border-radius:999px;
  border:1px solid rgba(48,255,210,.65);background:linear-gradient(135deg,rgba(13,70,65,.95),rgba(9,42,43,.95));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-size:15px;font-weight:600;color:#fff;letter-spacing:-.01em;box-shadow:0 0 25px rgba(40,255,205,.20),0 12px 30px rgba(0,0,0,.3);transition:transform .2s,box-shadow .25s,border-color .2s}
.call-btn .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#3DF0A6,#1FC77D);color:#06140d;position:relative;box-shadow:0 0 18px rgba(50,232,154,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.call-btn .ic::before,.call-btn .ic::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--h-ok);opacity:0;animation:call-wave 3s ease-out infinite}
.call-btn .ic::after{animation-delay:1.5s}
.call-btn:hover{transform:translateY(-2px);border-color:rgba(48,255,210,.9);box-shadow:0 0 40px rgba(40,255,205,.34),0 16px 34px rgba(0,0,0,.35)}
.call-btn:active{transform:scale(.97)}
@keyframes call-wave{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.9);opacity:0}}
.call.active .call-btn{display:none}

.call-panel{display:flex;align-items:center;gap:8px;height:56px;padding:0 8px 0 18px;border-radius:999px;
  background:linear-gradient(135deg,rgba(13,28,52,.9),rgba(7,18,35,.86));border-color:rgba(120,190,255,.2);box-shadow:0 10px 40px rgba(0,0,0,.35),0 0 24px rgba(40,230,210,.08)}
.call-panel[hidden]{display:none}
.call-st{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--h-t2);min-width:150px;white-space:nowrap}
.call-st b{font:600 12px var(--font-mono);color:var(--h-t3);font-variant-numeric:tabular-nums}
.call-st .lvl{width:10px;height:10px;border-radius:50%;background:var(--h-acc);flex:none;
  box-shadow:0 0 0 calc(3px + var(--lvl) * 9px) rgba(50,230,211,calc(.12 + var(--lvl) * .25));transition:box-shadow .08s linear}
.call[data-phase="ringing"] .call-st .lvl{background:var(--h-ok);animation:call-blink 1.2s ease-in-out infinite}
.call[data-phase="think"] .call-st .lvl,.call[data-phase="hear"] .call-st .lvl{background:var(--h-purple);animation:call-blink .8s ease-in-out infinite}
.call[data-phase="speak"] .call-st .lvl{background:var(--h-ok)}
.call.muted .call-st .lvl{background:var(--h-t3);box-shadow:none}
@keyframes call-blink{50%{opacity:.35}}
.call.pulse .call-panel{animation:call-shake .5s ease-in-out}
@keyframes call-shake{0%,100%{transform:none}20%{transform:rotate(-1.5deg)}40%{transform:rotate(1.5deg)}60%{transform:rotate(-1deg)}80%{transform:rotate(1deg)}}
.cb{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--h-t1);transition:border-color .2s,background .2s}
.cb[hidden]{display:none}
.cb:hover{border-color:var(--h-accss);background:rgba(255,255,255,.09)}
.cb[aria-pressed="true"]{background:rgba(244,189,99,.16);border-color:rgba(244,189,99,.5);color:var(--h-warn)}
.cb[aria-pressed="true"]::after{content:"";position:absolute;width:22px;height:2px;background:currentColor;transform:rotate(-45deg);border-radius:2px}
.cb{position:relative}
/* suhbat tili: Avto | UZ | RU | EN */
.call-lang{height:32px;padding:0 22px 0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--h-t1);
  font:600 12px var(--font-mono);letter-spacing:.02em;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:right 11px top 13px,right 7px top 13px;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.call-lang:hover{border-color:var(--h-accss);background-color:rgba(255,255,255,.09)}
.call-lang:focus-visible{outline:2px solid var(--h-acc);outline-offset:1px}
.call-lang option{color:#111;background:#fff}
.cb.end{background:#E5484D;border-color:transparent;color:#fff;box-shadow:0 0 16px rgba(229,72,77,.4)}
.cb.end:hover{background:#F2555A}
.cb.end svg{transform:rotate(135deg)}

@media (max-width:600px){
  .call-btn{height:48px;font-size:13.5px;padding:0 20px 0 6px;gap:9px}
  .call-btn .ic{width:36px;height:36px}
  .call-panel{height:48px;gap:6px;padding-left:12px}
  .call-st{min-width:0;font-size:12.5px}
  .cb{width:36px;height:36px}
  .call-lang{height:30px;padding:0 18px 0 7px;font-size:11px;background-position:right 9px top 12px,right 5px top 12px}
}
@media (prefers-reduced-motion:reduce){ .call-btn .ic::before,.call-btn .ic::after,.call .call-st .lvl,.call.pulse .call-panel{animation:none} }
/* qo'ng'iroq paytida salomlashuv qatori — subtitr: kursorsiz, ixcham, 3 qatorgacha */
.in-call .greet h1{font-family:var(--font-sans);font-size:clamp(15px,1.45vw,19px);font-weight:600;letter-spacing:-.01em;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.in-call .greet h1 #say{background:none;-webkit-background-clip:initial;background-clip:initial;color:#fff}
.in-call .greet h1 i{display:none}
.in-call .greet p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:600px){
  .in-call .greet h1{-webkit-line-clamp:2;font-size:15px}
  .in-call .greet p{display:none}
}