/* PDP School — sayt uslublari */
/* Onest shrifti index.html'da <link> orqali yuklanadi (@import render'ni bloklaydi) */

:root{
  --white:#fff;
  --blue:#2168F2;
  --navy:#0B1240;
  --navy2:#000C7A;
  --bg:#F5F7FC;
  --yellow:#FFC700;
  --pink:#FF0064;
  --indigo:#1F50D4;

  /* Chegara shkalasi — avval 5 xil alfa ishlatilgan edi, endi 3 ta token */
  --line:rgba(11,18,64,0.08);
  --line-strong:rgba(11,18,64,0.14);
  --line-light:rgba(255,255,255,0.26);
  --muted:rgba(11,18,64,0.66);
  --muted-soft:rgba(11,18,64,0.62);

  /* Radius shkalasi — avval 12/14/16/20/24/28 aralash edi */
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:12px;

  /* Soya shkalasi — avval 9 xil qiymat bor edi */
  --shadow-sm:0 16px 40px rgba(0,12,122,0.05);
  --shadow-md:0 22px 46px rgba(0,12,122,0.09);
  --shadow-lg:0 24px 56px rgba(0,12,122,0.22);
  --shadow-photo:0 28px 64px rgba(0,12,122,0.20);

  /* ---- Gorizontal o‘lcham tizimi ----
     Bitta gutter butun sayt bo‘ylab: sarlavha, bo‘limlar, sticky-bar.
     320px -> 18px | 375px -> 19.7px | 768px -> 40px | 1024px -> 54px
     1440px -> 76px | 1600px+ -> 80px (max). Kontent 1600px'da to‘xtaydi. */
  --gutter:clamp(18px,5.2vw,80px);
  /* Katta monitorlarda (1600px+) kontent cheksiz kengaymasin — qator matni
     va grid kartalari haddan tashqari yoyilib ketmasligi uchun umumiy tomon. */
  --content-max:1600px;

  /* ---- Vertikal masofa shkalasi ----
     Avval render funksiyalarida 12 xil bir martalik clamp() ishlatilgan edi
     (margin-top:clamp(22px,2.4vw,40px), clamp(20px,2.2vw,36px), ...) — bir xil
     ma’nodagi masofalar har joyda boshqacha edi. Endi 6 ta pog‘ona. */
  --space-3xs:6px;
  --space-2xs:clamp(8px,0.9vw,12px);
  --space-xs:clamp(10px,1.2vw,16px);
  --space-sm:clamp(14px,1.6vw,22px);
  --space-md:clamp(18px,2vw,30px);
  --space-lg:clamp(24px,2.8vw,44px);
  --space-xl:clamp(34px,4.2vw,68px);

  /* ---- Suyuq tipografika shkalasi ----
     Eski clamp'lar sof vw'ga tayangan edi: masalan clamp(28px,3.1vw,46px)
     da 3.1vw faqat 903px'dan keyin 28px'dan oshadi, ya’ni BARCHA telefon va
     planshetlar bir xil eng kichik o‘lchamni ko‘rar edi — shkala "o‘lik" edi.
     Endi har biri "asos + vw" ko‘rinishida: 320px'dan boshlab uzluksiz o‘sadi. */
  --fs-body:clamp(14.5px,14.02px + 0.14vw,16px);
  --fs-lead:clamp(15.5px,14.6px + 0.24vw,18px);
  --fs-h4:clamp(15.5px,14.6px + 0.24vw,18px);
  --fs-h3:clamp(18px,15.9px + 0.56vw,24px);
  --fs-h2:clamp(30px,24.4px + 1.5vw,46px);
  --fs-h2-lg:clamp(32px,24.25px + 2.07vw,54px);
  --fs-h1:clamp(32px,22.1px + 2.63vw,60px);
  --fs-hero:clamp(34px,20.5px + 4.22vw,88px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
h3{margin:0;font:inherit}
/* overflow-x faqat html'da: agar shu ikkalasida (yoki faqat body'da) qo‘yilsa,
   spetsifikatsiya bo‘yicha overflow-y avtomatik "auto"ga aylanadi va body o‘z
   holicha skroll konteyneriga aylanib qoladi — bu esa position:sticky elementlar
   uchun "eng yaqin skroll ota-onasi"ni html o‘rniga body qilib qo‘yadi. */
html{overflow-x:hidden}
body{
  font-family:'Onest',system-ui,sans-serif;
  color:var(--navy);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
/* height:auto majburiy: width/height HTML atributlari max-width:100% bilan birga
   ishlatilganda, height:auto bo‘lmasa rasm balandligi atributdagi piksel qiymatida
   qotib qoladi va rasm cho‘zilib ko‘rinadi (Platforma bo‘limidagi skrinshotlar shunday buzilgan edi) */
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--navy2)}
button{font-family:inherit;cursor:pointer}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(11,18,64,0.16);border-radius:9px}
::-webkit-scrollbar-track{background:transparent}

/* Klaviatura bilan yurish uchun ko‘rinadigan fokus — avval umuman yo‘q edi */
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.bg-hero :focus-visible,.site-footer :focus-visible{outline-color:var(--yellow)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 20px;border-radius:0 0 12px 0;background:var(--blue);color:var(--white);
  font-size:15px;font-weight:600;
}
.skip-link:focus{left:0;color:var(--white)}

/* Header, bo‘limlar va sticky-bar AYNAN bitta --gutter va --content-max
   qiymatidan foydalanadi, shuning uchun barchasi bir xil chiziqda tekislanadi.
   --content-max faqat 1600px'dan keng ekranlarda ishga tushadi (markazlashtirib
   cheklaydi) — undan tor barcha o‘lchamlarda width:100% bilan bir xil natija. */
.container{width:100%;max-width:var(--content-max);margin-inline:auto;padding:0 var(--gutter)}

/* ---------- Header ---------- */
header.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;align-items:center;gap:14px;
  max-width:var(--content-max);margin-inline:auto;
  padding:13px var(--gutter);
}
.logo{position:relative;width:104px;height:38px;flex:none;cursor:pointer;border:none;background:none;padding:0}
.logo span{position:absolute;display:block}
.logo .mark{left:0;top:0;width:38px;height:38px;background:var(--blue);-webkit-mask:url(assets/logo-mark.svg) center/contain no-repeat;mask:url(assets/logo-mark.svg) center/contain no-repeat}
.logo .pdp{left:47.7px;top:2.7px;width:44px;height:12.9px;background:var(--navy);-webkit-mask:url(assets/logo-pdp.svg) center/contain no-repeat;mask:url(assets/logo-pdp.svg) center/contain no-repeat}
.logo .school{left:46.8px;top:20.5px;width:59.8px;height:14.1px;background:var(--blue);-webkit-mask:url(assets/logo-school.svg) center/contain no-repeat;mask:url(assets/logo-school.svg) center/contain no-repeat}
.logo.white .mark,.logo.white .school{background:var(--white)}
.logo.white .pdp{background:var(--white)}

nav.main-nav{display:flex;align-items:center;gap:4px;margin-left:26px}
nav.main-nav .nav-link{
  padding:9px 14px;border-radius:999px;font-size:15px;font-weight:500;letter-spacing:-0.01em;
  color:rgba(11,18,64,0.72);cursor:pointer;background:none;border:none;transition:background .16s ease,color .16s ease;
}
nav.main-nav .nav-link:hover{background:rgba(33,104,242,0.08);color:var(--blue)}
nav.main-nav .nav-link.active{color:var(--blue);font-weight:700}

.header-right{display:flex;align-items:center;gap:10px;margin-left:auto}
/* Navbardagi telefon raqami — CTA tugmasi bilan yonma-yon, faqat keng
   ekranda (tor ekranda burger-menyu ichidagi mm-contact bilan takrorlanadi). */
/* Baton ko'rinishida, lekin fon to'ldirilmagan — CTA tugmasidan keyin,
   ikkinchi darajali harakat sifatida. */
/* Raqam ko'rinadigan pill — ikonka-doiradagi versiyada "1820" faqat
   title/aria-label'da yashiringan edi, ko'zga umuman ko'rinmasdi. Endi CTA
   bilan bir xil balandlik (44px), lekin ikkinchi darajali (outline, primary
   ko'k emas) — CTA'ga raqobat qilmaydi, shu bilan birga raqam doim ko'rinadi. */
.header-phone{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;
  height:44px;padding:0 16px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(11,18,64,.16);color:var(--navy);font-size:14.5px;font-weight:700;letter-spacing:-.01em;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.header-phone:hover{color:var(--white);border-color:var(--blue);background:var(--blue)}
.lang-switch{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(11,18,64,0.06)}
.lang-switch button{
  min-height:44px;min-width:44px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:0.02em;
  color:var(--muted);background:none;border:none;transition:background .15s,color .15s;
}
.lang-switch button.active{background:var(--white);color:var(--navy);font-weight:800;box-shadow:0 1px 3px rgba(11,18,64,0.18)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:11px 22px;border-radius:999px;font-size:14.5px;font-weight:600;letter-spacing:-0.01em;
  cursor:pointer;border:none;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.btn-primary{background:var(--blue);color:var(--white);box-shadow:0 10px 24px rgba(33,104,242,0.28)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(33,104,242,0.36)}
.btn-white{background:var(--white);color:var(--navy)}
.btn-white:hover{transform:translateY(-2px)}
.btn-outline{background:transparent;border:1px solid rgba(11,18,64,0.16);color:var(--navy)}
.btn-outline:hover{border-color:var(--blue);color:var(--blue)}
.btn-outline-light{background:transparent;border:1px solid rgba(255,255,255,0.45);color:var(--white)}
.btn-outline-light:hover{background:rgba(255,255,255,0.12)}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none !important}

/* ---------- Bergur tugmasi ----------
   Ikki chiziq (uchta emas): yopiq holatda "=" , ochiqda "X". Uchinchi chiziq
   kerak emas — ikki chiziqli variant aniqroq aylanadi va X simmetrik chiqadi.
   Chiziqlar markazdan ±5px siljigan; ochilganda ikkalasi markazga qaytib
   qarama-qarshi tomonga buriladi. */
.menu-toggle{
  position:relative;display:none;width:46px;height:46px;flex:none;
  border:1px solid var(--line-strong);border-radius:14px;background:rgba(255,255,255,.7);
  align-items:center;justify-content:center;
  transition:background .2s ease,border-color .2s ease;
}
.menu-toggle:hover{background:var(--white);border-color:var(--blue)}
.menu-toggle span{
  position:absolute;left:50%;top:50%;width:19px;height:2px;margin:-1px 0 0 -9.5px;
  border-radius:2px;background:var(--navy);
  transition:transform .34s cubic-bezier(.22,.8,.28,1),background .2s ease;
}
.menu-toggle span:nth-child(1){transform:translateY(-5px)}
.menu-toggle span:nth-child(2){transform:translateY(5px)}
.menu-toggle.is-open{background:rgba(33,104,242,.1);border-color:transparent}
.menu-toggle.is-open span{background:var(--blue)}
.menu-toggle.is-open span:nth-child(1){transform:rotate(45deg)}
.menu-toggle.is-open span:nth-child(2){transform:rotate(-45deg)}

/* ---------- Mobil navigatsiya: o‘ngdan chiqadigan drawer ----------
   Kenglik min(440px,100%): telefonda (<=440px) to‘liq ekran, planshetda
   orqa fonni ochiq qoldiradigan panel — shuning uchun backdrop bosib yopish
   aynan o‘sha yerda ma’noga ega bo‘ladi.
   MUHIM: panel ham, backdrop ham index.html'da DOIMIY tugun sifatida turadi.
   Avval ular renderHeader() natijasi bilan birga har safar qayta yaratilardi:
   brauzer yangi qo‘shilgan elementning boshlang‘ich holatini darhol yakuniy
   holat deb hisoblaydi, shu sababli ochilish/yopilish o‘tishi UMUMAN
   ijro etilmasdi — menyu shunchaki "paydo bo‘lardi". */
.mm-backdrop{
  position:fixed;inset:0;z-index:88;
  background:rgba(6,9,32,.52);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  transition:opacity .32s ease,visibility 0s linear .32s;
}
.mm-backdrop.is-open{opacity:1;visibility:visible;transition:opacity .32s ease}

.mobile-menu{
  position:fixed;top:0;right:0;z-index:90;
  width:min(440px,100%);
  /* 100dvh — mobil brauzer manzil paneli ochilib-yopilganda balandlik
     sakramasligi uchun; 100vh eski brauzerlar uchun zaxira. */
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  background:var(--white);box-shadow:-30px 0 90px rgba(6,9,32,.26);
  padding:0;box-sizing:border-box;
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);visibility:hidden;
  transition:transform .34s cubic-bezier(.22,.8,.28,1),visibility 0s linear .34s;
}
.mobile-menu.is-open{
  transform:none;visibility:visible;
  transition:transform .38s cubic-bezier(.22,.8,.28,1);
}

/* Panel sarlavhasi — logotip + yopish tugmasi, header bilan bir balandlikda */
.mm-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex:none;
  padding:13px clamp(18px,5vw,30px);border-bottom:1px solid var(--line);
}
.mm-close{
  width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:14px;background:var(--white);color:var(--navy);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.mm-close:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}

.mm-body{
  flex:1;display:flex;flex-direction:column;
  gap:var(--space-lg);padding:clamp(22px,5vw,34px) clamp(18px,5vw,30px) clamp(26px,6vw,38px);
}
.mm-nav{display:flex;flex-direction:column}

/* Har bir havola: tartib raqami + nom + strelka. Stagger kechikishi --d
   o‘zgaruvchisida va faqat .is-open qoidasida qo‘llanadi — shu bois YOPILISHDA
   kechikish 0 ga qaytadi va barcha bandlar birdek tez g‘oyib bo‘ladi
   (aks holda yopilish sekin va noqulay ko‘rinardi). */
.mobile-menu .mm-link{
  --d:0ms;
  position:relative;display:flex;align-items:center;gap:14px;width:100%;
  padding:15px 2px;border:none;border-bottom:1px solid var(--line);background:none;
  font:inherit;font-size:clamp(23px,5.6vw,30px);font-weight:800;letter-spacing:-.032em;
  color:var(--navy);text-align:left;cursor:pointer;
  opacity:0;transform:translateX(26px);
  transition:opacity .3s ease,transform .34s cubic-bezier(.22,.8,.28,1),color .18s ease;
}
.mobile-menu.is-open .mm-link{opacity:1;transform:none;transition-delay:var(--d)}
.mobile-menu .mm-link:first-child{border-top:1px solid var(--line)}
.mobile-menu .mm-link:hover{color:var(--blue)}
.mm-link-n{flex:none;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--blue);opacity:.6}
.mm-link-t{flex:1}
.mm-link-go{flex:none;color:var(--blue);opacity:0;transform:translateX(-6px);transition:opacity .2s ease,transform .2s ease}
.mobile-menu .mm-link:hover .mm-link-go,.mobile-menu .mm-link.active .mm-link-go{opacity:1;transform:none}
.mobile-menu .mm-link.active{color:var(--blue)}

/* Pastki blok ham stagger bilan chiqadi — havolalardan keyin */
.mm-foot{
  --d:0ms;display:flex;flex-direction:column;gap:var(--space-sm);margin-top:auto;
  opacity:0;transform:translateY(14px);transition:opacity .3s ease,transform .34s ease;
}
.mobile-menu.is-open .mm-foot{opacity:1;transform:none;transition-delay:var(--d)}
.mm-lang{display:flex;gap:8px}
.mm-lang button{
  flex:1;min-height:48px;padding:12px;border-radius:12px;background:var(--bg);
  border:1px solid transparent;font:inherit;font-size:14px;font-weight:700;
  color:rgba(11,18,64,.6);cursor:pointer;transition:background .18s ease,color .18s ease;
}
.mm-lang button.active{background:var(--blue);color:var(--white)}
.mobile-menu .mm-cta{
  min-height:56px;padding:16px;border-radius:14px;border:none;
  background:var(--blue);color:var(--white);text-align:center;font:inherit;font-size:16px;font-weight:700;
  box-shadow:0 12px 28px rgba(33,104,242,.3);
}
.mm-contact{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:14px}
.mm-contact a{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-weight:600;color:var(--navy)}
.mm-contact a:hover{color:var(--blue)}
.mm-contact svg{flex:none;color:var(--blue)}

/* Skrollni bloklash. html{overflow-x:hidden} qo‘yilgani uchun skroll
   konteyneri BODY emas, HTML (documentElement) — shu bois faqat
   body{overflow:hidden} yozish skrollni to‘xtatmaydi. Ikkalasiga ham qo‘yamiz. */
html.menu-locked,body.menu-locked{overflow:hidden}

.topstripe{display:flex;height:3px}
.topstripe span{flex:1}
.topstripe span:nth-child(1){background:var(--yellow)}
.topstripe span:nth-child(2){background:var(--pink)}
.topstripe span:nth-child(3){background:var(--indigo)}

/* O'lchab ko'rilganda logo+nav+til+CTA+telefon pill (RU matni bilan, eng
   uzuni, "1820" ko'rinadigan bo'lgandan keyin) real holda ~1000px'da
   joylashadi; 1040px xavfsiz zahira bilan tanlandi. (Eslatma: bu qiymat
   boshqa bo'limlardagi 900px bilan ATAYLAB bog'lanmagan — ular butunlay
   boshqa komponentlar, tasodifan bir xil son bo'lishi shart emas.) */
@media (max-width:1040px){
  nav.main-nav{display:none}
  .menu-toggle{display:flex}
  /* Referens dizayndagidek: tor ekranda sarlavhadagi CTA olib tashlanadi.
     Ariza tugmasi burger menyusi ichida va pastdagi yopishqoq panelda qoladi —
     aks holda logo + tillar + CTA + burger 375px'ga sig‘maydi (441px kerak edi). */
  .header-right .btn-primary,.header-phone{display:none}
  .header-inner{gap:12px;padding:11px var(--gutter)}
}
@media (max-width:480px){
  .header-right{gap:7px}
  .lang-switch button{min-width:0;padding:8px 11px;font-size:12.5px}
}

/* ---------- Generic section styles ---------- */
main{display:block}
/* Faqat opacity — transform emas: ".page" har bir sahifaning barcha bo‘limlarini
   o‘rab turadi, va predokda (ancestor) TURGAN transform (hatto vaqtinchalik,
   o‘tish animatsiyasi paytida ham) ichkaridagi position:sticky elementlarning
   ishlashini butunlay buzadi (Dastur sahifasidagi "dir-sticky" karta shu tufayli
   yopishmay, oddiy skroll bilan chiqib ketardi). */
.page{animation:pageIn .3s ease both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
@keyframes softIn{from{opacity:0}to{opacity:1}}

/* Vertikal padding faqat — gorizontali .container'dan keladi.
   Qiymatlar referens dizayndagi clamp(46px,5.6cqw,96px) bilan bir xil. */
.section{padding-block:clamp(46px,5.6vw,96px)}
/* Ketma-ket kelgan bir xil fonli ikki bo‘lim orasidagi ikkilangan padding —
   ular bitta bo‘limdek ko‘rinishi uchun oradagi bo‘sh joy yarimlatiladi. */
.bg-white + .bg-white,.bg-tint + .bg-tint{padding-top:0}
.section-tight{padding-block:clamp(34px,4.4vw,76px)}
.bg-tint{background:var(--bg)}
.bg-white{background:var(--white)}
.bg-hero{position:relative;overflow:hidden;background:linear-gradient(124deg,var(--blue) -10%,var(--navy2) 131%);color:var(--white)}
.bg-mark{position:absolute;opacity:0.1;background:var(--white);-webkit-mask:url(assets/bg-mark.svg) center/contain no-repeat;mask:url(assets/bg-mark.svg) center/contain no-repeat;pointer-events:none}

/* Referens dizaynning tipografik shkalasi — bizdagidan sezilarli kattaroq */
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:0.17em;text-transform:uppercase;color:var(--blue)}
.eyebrow-light{color:var(--yellow)}
h2.h-title{margin:12px 0 0;font-size:var(--fs-h2);font-weight:800;line-height:1.04;letter-spacing:-0.04em;text-wrap:pretty}
h2.h-title-lg{font-size:var(--fs-h2-lg)}
h1.h-hero{margin:14px 0 0;font-size:var(--fs-h1);font-weight:800;line-height:1.02;letter-spacing:-0.04em;text-wrap:pretty}
p.lead{margin:14px 0 0;font-size:var(--fs-lead);line-height:1.5;text-wrap:pretty}

/* ---- Bo‘lim sarlavhasi va masofa yordamchilari ----
   Har bir bo‘lim bir xil ritmga bo‘ysunadi: eyebrow -> sarlavha -> lead -> kontent.
   Avval bu masofalar render funksiyalarida inline clamp() bilan yozilgan edi. */
.section-head{max-width:60ch}
.section-head .lead{color:var(--muted)}
.section-head-wide{max-width:none}
.mt-sm{margin-top:var(--space-sm)}
.mt-md{margin-top:var(--space-md)}
.mt-lg{margin-top:var(--space-lg)}
.mt-xl{margin-top:var(--space-xl)}
.stack-sm{display:flex;flex-direction:column;gap:var(--space-sm)}
.stack-md{display:flex;flex-direction:column;gap:var(--space-md)}

/* ---------- Grids ----------
   Avval repeat(auto-fit,minmax(...)) ishlatilgan edi: ustunlar soni klass nomiga
   mos kelmasdi va oxirgi qatorda "yetim" kartalar qolardi (6 ta -> 4+2, 5 ta -> 4+1).
   Endi ustunlar soni aniq belgilangan. */
.grid{display:grid;gap:clamp(14px,1.6vw,26px)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* 5 ta element uchun: 3 ta yuqorida + 2 tasi pastki qatorni to‘liq to‘ldiradi */
.grid-3-2{grid-template-columns:repeat(6,minmax(0,1fr))}
.grid-3-2>*{grid-column:span 2}
.grid-3-2>*:nth-child(4),.grid-3-2>*:nth-child(5){grid-column:span 3}

@media (max-width:1080px){
  .grid-4,.grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-5>*:nth-child(4),.grid-5>*:nth-child(5){grid-column:auto}
}
@media (max-width:900px){
  .grid-3,.grid-4,.grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3-2>*,.grid-3-2>*:nth-child(4),.grid-3-2>*:nth-child(5){grid-column:auto}
  /* Toq sonli to‘plamda oxirgi karta ikkala ustunni egallaydi —
     aks holda pastda yolg‘iz "yetim" karta qolib ketadi (3 ta -> 2+1, 5 ta -> 2+2+1) */
  .grid-3>*:last-child:nth-child(odd),
  .grid-4>*:last-child:nth-child(odd),
  .grid-5>*:last-child:nth-child(odd),
  .grid-3-2>*:last-child:nth-child(odd){grid-column:span 2}
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4,.grid-5,.grid-3-2{grid-template-columns:minmax(0,1fr)}
  /* Yuqoridagi "oxirgi toq karta 2 ustunni egallaydi" qoidasi bir ustunli
     panjarada ham kuchda qolar edi. Bitta aniq trek + span 2 = brauzer IMPLICIT
     ikkinchi ustun yaratadi, implicit ustunlar esa kontent bo‘yicha o‘lchanadi —
     natijada 430px'da kartalar 131px va 240px bo‘lib, birinchisida matn har
     qatorga bittadan so‘z bo‘lib siqilib qolardi. Shuning uchun span'ni bekor
     qilamiz. */
  .grid-3>*:last-child:nth-child(odd),
  .grid-4>*:last-child:nth-child(odd),
  .grid-5>*:last-child:nth-child(odd),
  .grid-3-2>*:last-child:nth-child(odd){grid-column:auto}
}

.card{padding:clamp(20px,2.1vw,32px);border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--line)}
.card-soft{background:var(--bg);border:1px solid var(--line)}

/* Hover faqat bosiladigan elementlarda — statik kartalarda emas.
   Avval value/change kartalari ko‘tarilardi, result/exam/team/step kartalari esa yo‘q,
   garchi ular bir xil ko‘rinsa ham. */
.is-clickable{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.is-clickable:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}

.pill{display:inline-flex;align-items:center;gap:9px;padding:8px 16px 8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,0.34);background:rgba(255,255,255,0.1);font-size:clamp(12.5px,0.92vw,14px);font-weight:600}
.pill-dot{width:7px;height:7px;border-radius:50%;background:var(--yellow)}

.stat-row{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,40px);margin-top:clamp(24px,2.8vw,44px);padding-top:clamp(18px,2vw,30px);border-top:1px solid rgba(255,255,255,0.24)}
.stat-num{font-size:clamp(22px,2.1vw,32px);font-weight:800;letter-spacing:-0.035em}
.stat-label{margin-top:3px;font-size:clamp(13px,0.92vw,14px);opacity:0.85}

.value-card{padding:clamp(17px,1.8vw,26px);border-radius:var(--radius-md);background:var(--white);border:1px solid var(--line)}
.value-badge{width:clamp(30px,2.6vw,38px);height:clamp(30px,2.6vw,38px);border-radius:10px;background:rgba(33,104,242,0.1);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:clamp(12px,1vw,14px);font-weight:700}
.value-title{margin-top:var(--space-xs);font-size:var(--fs-h4);font-weight:700;letter-spacing:-0.03em}
.value-desc{margin-top:6px;font-size:var(--fs-body);line-height:1.45;color:var(--muted)}

.result-card{padding:clamp(20px,2.1vw,32px);border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.result-num{font-size:clamp(32px,27px + 1.31vw,46px);font-weight:800;line-height:1;letter-spacing:-0.04em;color:var(--blue)}
.result-title{margin-top:var(--space-2xs);font-size:var(--fs-h4);font-weight:700;letter-spacing:-0.03em}
.result-desc{margin-top:6px;font-size:var(--fs-body);line-height:1.45;color:var(--muted)}

.mission-card{position:relative;overflow:hidden;padding:clamp(22px,2.3vw,38px);border-radius:var(--radius-lg);background:linear-gradient(140deg,var(--blue),var(--navy2));color:var(--white);box-shadow:var(--shadow-lg)}
.vision-card{padding:clamp(22px,2.3vw,38px);border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.mv-tag{font-size:clamp(12px,0.85vw,13px);font-weight:700;letter-spacing:0.16em;text-transform:uppercase}
.mv-title{margin-top:var(--space-xs);font-size:var(--fs-h3);font-weight:700;line-height:1.24;letter-spacing:-0.032em;text-wrap:pretty}
.mv-body{margin-top:var(--space-xs);font-size:var(--fs-body);line-height:1.5;text-wrap:pretty}
/* Uch ustun (pillars) endi mustaqil, to‘liq enli qator — surat kartasi
   ichida emas (u yerda cho‘zilishga sabab bo‘lardi). */
.mv-pillars-row{margin-top:clamp(16px,1.8vw,26px);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(12px,1.4vw,20px)}
.mv-pillar-card{padding:clamp(16px,1.7vw,22px);border-radius:var(--radius-md);background:var(--bg);border:1px solid var(--line)}
.mv-pillar-card b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.02em;margin-bottom:5px;color:var(--navy)}
.mv-pillar-card span{font-size:13.5px;line-height:1.42;color:var(--muted)}

.change-card{padding:clamp(20px,2.1vw,32px);border-radius:var(--radius-lg);background:var(--bg);border:1px solid var(--line)}
.change-n{font-size:clamp(13px,0.95vw,14px);font-weight:600;letter-spacing:0.06em;color:var(--blue)}
.change-t{margin-top:var(--space-xs);font-size:var(--fs-h3);font-weight:700;letter-spacing:-0.03em}
.change-d{margin-top:8px;font-size:var(--fs-body);line-height:1.48;color:var(--muted)}

/* Bosh sahifadagi "Dastur" bo‘limi — skroll paytida karta ustiga karta
   "yig‘iladigan" sticky-stek effekti (Claude Canvas dizaynidan) */
.bg-navy{background:var(--navy);color:var(--white)}
.dastur-preview-layout{display:grid;grid-template-columns:minmax(240px,34%) minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:start}
.dastur-preview-head{position:sticky;top:100px}
.dastur-preview-stack{display:flex;flex-direction:column;gap:20px}
.dastur-stack-card{
  position:sticky;display:block;width:100%;text-align:left;font:inherit;color:var(--white);
  padding:clamp(22px,2.4vw,36px);border:0;border-radius:22px;
  background:linear-gradient(140deg,var(--blue),var(--navy2));box-shadow:0 26px 60px rgba(0,0,0,.36);
}
.dastur-stack-head{display:flex;align-items:baseline;gap:16px}
.dastur-stack-n{flex:none;font-size:14px;font-weight:700;color:var(--yellow)}
.dastur-stack-t{margin:0;font-size:clamp(23px,19.8px + 0.85vw,32px);font-weight:800;letter-spacing:-.035em}
.dastur-stack-s{margin:6px 0 0;font-size:var(--fs-lead);font-weight:600;opacity:.9}
.dastur-stack-body{margin:12px 0 0;font-size:var(--fs-body);line-height:1.5;opacity:.8}
@media (max-width:900px){
  .dastur-preview-layout{grid-template-columns:1fr}
  .dastur-preview-head{position:static}
  /* !important kerak emas: markupdagi inline style faqat `top` beradi,
     `position` emas — bu qoida esa asosiy .dastur-stack-card'dan keyin
     turgani uchun bir xil o‘ziga xoslikda kaskadda yutadi. */
  .dastur-stack-card{position:static}
}

/* ---------- Bitiruvchi portreti — yorug' variant, "5 → 1" halqa + qatorlar ----------
   Chapda 340px 5 segmentli halqa, o'ngda ixcham qatorlar ro'yxati. Qatorga
   (yoki segmentga) kursor kelganda o'sha segment yo'g'onlashadi, qolganlari
   xiralashadi, halqa markazida esa "5 → 1" o'rniga o'sha xislatning raqami
   va nomi chiqadi — "beshtasi bittaga birlashadi" g'oyasi harakatda ko'rinadi.
   Shrift alohida belgilanmaydi — sayt shriftini (Onest) meros qilib oladi. */
/* Bordersiz — sayt bo'ylab boshqa bo'limlar ham kontentni ramkaga solmaydi,
   shunchaki sahifa foniga "nafas oladi". Doiraviy markaz (pr-center) va
   dumaloq teglar butun blokni boshqa joylardagi pill/badge uslubi bilan
   bir tilda ushlab turadi — burchakli ramka shu bilan ziddiyatga kirardi. */
.pr-wrap{
  width:100%;
  display:grid;grid-template-columns:340px 1fr;gap:52px;
  padding:44px var(--gutter);
  background:#fff;
}
.pr-ring{position:relative;width:340px;height:340px;flex:none}
/* Butun SVG −90° buriladi: dashoffset hisob-kitobi soat 3 dan boshlanadi,
   burilishdan keyin birinchi segment tepadan boshlanadi. Markazdagi matn
   SVG'dan TASHQARIDA (alohida div), shu bois u burilmaydi — tik turadi. */
.pr-svg{width:100%;height:100%;transform:rotate(-90deg)}
/* stroke-width faqat CSS'dan (markup'da atribut yo'q) — atribut/CSS
   ustunligi masalasi tug'ilmasligi uchun. */
.pr-seg{stroke-width:14;opacity:.9;cursor:pointer;transition:stroke-width .25s ease,opacity .25s ease}
.pr-seg.is-active{opacity:1;stroke-width:22}
.pr-seg.is-dim{opacity:.22}
.pr-center{
  position:absolute;inset:52px;border-radius:50%;padding:0 26px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:#fff;border:1px solid #dfe3e9;box-shadow:0 18px 40px rgba(20,30,60,.08);
}
.pr-center-big{font-weight:800;font-size:clamp(34px,3.4vw,46px);line-height:1;letter-spacing:-.03em;color:#10309a}
.pr-center-sub{
  margin-top:8px;font-weight:600;font-size:11px;
  letter-spacing:.34em;text-transform:uppercase;color:#6b7280;line-height:1.35;
}
/* Xislat nomi ko'rsatilganda — keng harf oralig'i uzun matnni chiqarib
   yuboradi, shuning uchun torroq va bir oz kattaroq qilinadi. */
.pr-center.is-named .pr-center-sub{letter-spacing:.01em;font-size:13px;text-transform:none;color:#101827;font-weight:700}

.pr-kicker{font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#d81b52}
.pr-h2{margin:10px 0 0;font-weight:800;font-size:clamp(28px,3.2vw,44px);line-height:1.06;letter-spacing:-.035em;color:#101827}
.pr-lead{margin:10px 0 0;max-width:560px;font-size:15px;line-height:1.5;color:#5b6472}
/* Ajratgichlar alohida element emas — konteyner foni gap orqali ko'rinadi */
.pr-list{display:flex;flex-direction:column;gap:1px;margin-top:22px;background:#dfe3e9;border-radius:var(--radius-md);overflow:hidden}
.pr-row{
  display:grid;grid-template-columns:34px 176px 1fr max-content;gap:14px;align-items:center;
  padding:11px 14px;background:#fff;cursor:pointer;
  transition:background .2s ease;
}
.pr-row:hover,.pr-row.is-active{background:#eef2fb}
.pr-row:focus-visible{outline:2px solid #1740c4;outline-offset:-2px}
.pr-row-n{font-weight:800;font-size:13px;letter-spacing:-.01em}
.pr-row-t{font-weight:700;font-size:16px;letter-spacing:-.02em;color:#101827}
.pr-row-d{font-size:13px;line-height:1.35;color:#5b6472}
.pr-row-tag{
  font-weight:700;font-size:10px;text-transform:uppercase;
  letter-spacing:.1em;padding:4px 9px;white-space:nowrap;justify-self:end;
  border-radius:999px;
}
@media (max-width:900px){
  .pr-wrap{grid-template-columns:1fr;gap:28px;padding:28px var(--gutter)}
  .pr-ring{width:260px;height:260px;margin:0 auto}
  .pr-center{inset:40px;padding:0 16px}
  .pr-center.is-named .pr-center-sub{font-size:12px}
  /* Raqam+nom bitta qatorda, tavsif pastida */
  .pr-row{grid-template-columns:28px 1fr max-content;gap:6px 12px;padding:12px}
  .pr-row-n{grid-column:1;grid-row:1}
  .pr-row-t{grid-column:2;grid-row:1}
  .pr-row-tag{grid-column:3;grid-row:1}
  .pr-row-d{grid-column:2/-1;grid-row:2}
}
@media (prefers-reduced-motion:reduce){
  .pr-seg{transition:none}
}

.platform-card{padding:clamp(18px,2vw,30px);border-radius:var(--radius-lg);background:var(--bg);border:1px solid var(--line)}
.platform-title{font-size:var(--fs-h3);font-weight:700;letter-spacing:-0.03em}
.platform-desc{margin-top:7px;font-size:var(--fs-body);line-height:1.48;color:var(--muted)}
.platform-shot{margin-top:clamp(14px,1.4vw,22px);border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line-strong);box-shadow:var(--shadow-sm)}
/* Bullet ro‘yxati — avval bu uchlik ikki joyda (bu yerda va "Platforma bo‘limi"
   izohi ostida) takrorlanib, qiymatlari ajralib ketgan edi: margin-top:14px vs
   margin:14px 0 0;padding:0 va ::before margin-top 6px vs 7px. Keyingi nusxa
   kaskadda yutar edi, ya’ni bu yerdagi qiymatlar o‘lik edi. Yagona joyga
   birlashtirildi — yutgan (ikkinchi) nusxa qiymatlari saqlandi. */
.platform-list{margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.platform-list li{list-style:none;display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.45}
.platform-list li::before{
  content:'✓';flex:none;width:18px;height:18px;margin-top:1px;border-radius:6px;
  background:var(--blue);color:var(--white);font-size:10.5px;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;
}

/* Eski dumaloq-avatar uslubidagi .team-card/.team-photo/.team-name/.team-role
   qoidalari o‘chirildi: markup yangi (.team-photo-wrap va h.k.) ga o‘tgan, lekin
   eski .team-card{display:flex;align-items:center} saqlanib qolgani uchun yagona
   bola .team-photo-wrap ning kesishma o‘lchami 0 bo‘lib, butun karta bo‘sh
   305x53 chiziqqa aylanib qolgan edi — jamoa suratlari umuman ko‘rinmasdi. */

.criteria-row{display:flex;align-items:center;gap:14px;padding:15px 20px;border-radius:var(--radius-sm);background:var(--white);border:1px solid var(--line);font-size:var(--fs-body);font-weight:600}
.criteria-row span{color:var(--blue);flex:none}


/* Karta emas — bo‘lingan ro‘yxat qatori (Claude Canvas'dagi FAQ uslubi) */
.faq-item{
  display:block;width:100%;text-align:left;font:inherit;color:inherit;
  padding:clamp(18px,2vw,26px) 0;background:none;border:0;border-bottom:1px solid var(--line-strong);
  cursor:pointer;
}
.faq-split .faq-item:first-child{border-top:1px solid var(--line-strong)}
.faq-head{display:flex;align-items:center;gap:16px}
.faq-q{flex:1;font-size:clamp(16.5px,15.3px + 0.33vw,20px);font-weight:600;letter-spacing:-0.025em;text-wrap:pretty}
.faq-sign{flex:none;width:28px;height:28px;border-radius:50%;background:rgba(33,104,242,0.1);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600}
.faq-a{display:block;margin-top:12px;font-size:var(--fs-body);line-height:1.55;color:var(--muted);animation:softIn .22s ease both}

.tab{
  min-height:44px;padding:12px 22px;border-radius:999px;border:1px solid var(--line-strong);
  font-size:clamp(14px,1.05vw,15.5px);font-weight:600;letter-spacing:-0.02em;
  color:rgba(11,18,64,0.7);cursor:pointer;transition:all .18s ease;background:var(--white);
}
.tab:hover{border-color:var(--blue)}
.tab.active{background:var(--blue);color:var(--white);border-color:var(--blue);font-weight:700}

.bullet-row{display:flex;align-items:flex-start;gap:14px;padding:clamp(14px,1.4vw,20px) clamp(16px,1.6vw,24px);border-radius:var(--radius-sm);border:1px solid var(--line-strong)}
.bullet-dot{width:7px;height:7px;margin-top:7px;flex:none;border-radius:50%;background:var(--blue)}
/* Oddiy nuqta o‘rniga "✓" nishonchasi — shartlar/qoidalar ro‘yxati kabi
   "bajarilishi kerak" ma’nosidagi qatorlar uchun (oddiy sanab o‘tish emas). */
.bullet-row.is-check{border-color:var(--line)}
.bullet-row.is-check .bullet-dot{
  width:20px;height:20px;margin-top:0;border-radius:50%;
  background:rgba(33,104,242,.12);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;
}
.bullet-row.is-check .bullet-dot::before{content:'✓'}

/* Raqamli "hujjat/karta" bloki — value-card/doc-row o‘rnini bosuvchi,
   badge + sarlavha + tavsif tuzilishi bilan (Qabul hujjatlar ro‘yxati). */
.doc-card{
  display:flex;gap:14px;align-items:flex-start;padding:clamp(18px,2vw,26px);
  border-radius:var(--radius-md);background:var(--white);border:1px solid var(--line);
  transition:transform .2s ease,box-shadow .2s ease;
}
.doc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.doc-card-badge{
  flex:none;width:34px;height:34px;border-radius:10px;
  background:rgba(33,104,242,.1);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;
}
.doc-card-body{flex:1;min-width:0}
.doc-card-t{font-size:var(--fs-h4);font-weight:700;letter-spacing:-.02em;color:var(--navy)}
.doc-card-d{margin-top:5px;font-size:var(--fs-body);line-height:1.5;color:var(--muted)}
.doc-card-d:first-child{margin-top:0}

.exam-card{padding:clamp(20px,2.1vw,32px);border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.exam-t{font-size:clamp(21px,18.5px + 0.66vw,28px);font-weight:800;letter-spacing:-0.035em;color:var(--blue)}
.exam-s{margin-top:7px;font-size:var(--fs-body);font-weight:600;letter-spacing:-0.02em}
.exam-d{margin-top:8px;font-size:var(--fs-body);line-height:1.48;color:var(--muted)}

.day-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(10px,1.4vw,26px);padding:clamp(12px,1.2vw,18px) 0;border-top:1px solid var(--line-strong)}
.day-time{width:clamp(96px,9vw,132px);flex:none;font-size:clamp(14px,1.05vw,16px);font-weight:600;color:var(--blue)}
.day-t{width:clamp(110px,11vw,170px);flex:none;font-size:var(--fs-h4);font-weight:700;letter-spacing:-0.03em}
.day-d{flex:1;min-width:min(100%,170px);font-size:var(--fs-body);line-height:1.45;color:var(--muted)}


.doc-row{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;border-radius:var(--radius-sm);background:var(--white);border:1px solid var(--line);font-size:var(--fs-body);font-weight:500;line-height:1.45}
.doc-dot{width:6px;height:6px;margin-top:7px;flex:none;border-radius:50%;background:var(--blue)}

.form-panel{padding:clamp(22px,2.4vw,38px);border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.form-field{display:flex;flex-direction:column;gap:7px}
.form-field label{font-size:13.5px;font-weight:600;color:rgba(11,18,64,0.75)}
.form-field input{padding:14px 16px;border-radius:var(--radius-sm);border:1px solid rgba(11,18,64,0.16);font-family:inherit;font-size:16px;color:var(--navy);outline:none;background:var(--white)}
.form-field input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(33,104,242,0.14)}
.form-field.error input{border-color:var(--pink)}
.form-error-msg{font-size:13px;color:var(--pink);font-weight:600}

.contact-card{padding:clamp(18px,1.9vw,28px);border-radius:var(--radius-lg);background:var(--bg);border:1px solid var(--line)}
.contact-k{font-size:clamp(12px,0.85vw,13px);font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--blue)}
.contact-v{margin-top:9px;font-size:var(--fs-h3);font-weight:700;letter-spacing:-0.03em;text-wrap:pretty}
.contact-note{margin-top:5px;font-size:var(--fs-body);line-height:1.45;color:var(--muted-soft)}

.tag-chip{display:inline-flex;align-items:center;min-height:38px;padding:9px 16px;border-radius:999px;background:rgba(33,104,242,0.08);font-size:13.5px;font-weight:600;color:var(--blue)}

footer.site-footer{padding-block:clamp(32px,3.8vw,64px) clamp(20px,2.2vw,34px);background:var(--navy);color:var(--white)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:clamp(20px,2.2vw,40px)}
.footer-about{margin-top:16px;max-width:34ch;font-size:14px;line-height:1.55;opacity:0.66}
.footer-h{font-size:12.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;opacity:0.55}
.footer-links{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.footer-links span{display:inline-block;padding:7px 0;font-size:14.5px;opacity:0.85;color:var(--white)}
/* a/button — bosiladigan qatorlar, shuning uchun 44px min-height touch-target
   (span'lar oddiy matn, ularga kerak emas — bekorga bo‘sh joy qo‘shib yubormaslik uchun) */
.footer-links a,.footer-links button{
  display:flex;align-items:center;min-height:44px;padding:7px 0;font-size:14.5px;opacity:0.85;
  background:none;border:none;color:var(--white);text-align:left;
}
.footer-links a:hover,.footer-links button:hover{opacity:1;color:var(--white)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:clamp(24px,2.6vw,44px);padding-top:18px;border-top:1px solid rgba(255,255,255,0.14);font-size:13px;opacity:0.58}

.gallery-photo{aspect-ratio:1.25;border-radius:var(--radius-md);overflow:hidden;background:var(--bg);border:none;padding:0;display:block;text-align:left;width:100%;position:relative}
.gallery-photo img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.gallery-photo:hover img{transform:scale(1.06)}
.gallery-photo::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle,rgba(11,18,64,.28) 0%,rgba(11,18,64,0) 60%);
  opacity:0;transition:opacity .25s ease;
}
.gallery-photo:hover::after,.gallery-photo:focus-visible::after{opacity:1}
.gallery-soon{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:rgba(11,18,64,0.45);font-size:13.5px;font-weight:600;text-align:center;padding:16px}
.gallery-soon svg{opacity:0.5}

/* Kartali slayder — 4 karta bir qatorda, tugmalar bilan bitta ekrandan surish */
.gallery-slider{position:relative}
.gallery-track{
  display:flex;gap:clamp(14px,1.6vw,26px);overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:2px;
}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-track>.gallery-photo{
  flex:0 0 calc((100% - 3*clamp(14px,1.6vw,26px))/4);scroll-snap-align:start;
}
.slider-btn{
  position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-md);color:var(--navy);
  display:flex;align-items:center;justify-content:center;z-index:2;transition:background .15s,color .15s;
}
.slider-btn:hover{background:var(--blue);color:var(--white)}
.slider-prev{left:-18px}
.slider-next{right:-18px}
@media (max-width:1080px){
  .gallery-track>.gallery-photo{flex:0 0 calc((100% - 2*clamp(14px,1.6vw,26px))/3)}
}
@media (max-width:900px){
  .gallery-track>.gallery-photo{flex:0 0 calc((100% - clamp(14px,1.6vw,26px))/2)}
  .slider-prev{left:-10px}
  .slider-next{right:-10px}
}
@media (max-width:640px){
  .gallery-track>.gallery-photo{flex:0 0 86%}
  .slider-btn{width:38px;height:38px}
  .slider-prev{left:-6px}
  .slider-next{right:-6px}
}

.round-photo{border-radius:50%;overflow:hidden;border:7px solid transparent;background:linear-gradient(var(--blue),var(--blue)) padding-box, linear-gradient(to bottom, var(--yellow) 0 22.6%, var(--pink) 22.6% 54.9%, var(--indigo) 54.9% 100%) border-box;box-shadow:0 30px 70px rgba(0,12,122,0.4)}
.round-photo img{width:100%;height:100%;object-fit:cover}
/* Asoschi surati — avval markupda inline `width:clamp(180px,20vw,290px)` edi.
   20vw telefon uchun juda kichik: 430px'da 86px chiqib, 180px minimumga
   urilardi, holbuki ustunda 385px joy bor edi — surat kartaga nisbatan
   yo‘qolib ketardi. Endi pol 260px va vw koeffitsienti kattaroq; min() esa
   320px'dan tor ekranlarda ham chegaradan chiqmasligini kafolatlaydi. */
.founder-photo{justify-self:center;width:min(100%,clamp(260px,27vw,360px));aspect-ratio:.86}

.framed-photo{border-radius:clamp(16px,1.8vw,30px);overflow:hidden;border:6px solid transparent;background:linear-gradient(var(--white),var(--white)) padding-box, linear-gradient(to bottom, var(--yellow) 0 22.6%, var(--pink) 22.6% 54.9%, var(--indigo) 54.9% 100%) border-box;box-shadow:var(--shadow-photo)}

.success-box{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(20px,2.4vw,40px) 0;animation:softIn .3s ease both}
.success-check{width:64px;height:64px;border-radius:50%;background:rgba(33,104,242,0.1);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700}

.notice-box{margin-top:var(--space-md);padding:16px 20px;border-radius:var(--radius-md);background:rgba(33,104,242,0.07);border:1px solid rgba(33,104,242,0.2);font-size:var(--fs-body);line-height:1.5;color:var(--muted)}

.font-em{color:var(--blue)}
.opacity-70{opacity:0.7}

@media (max-width:640px){
  .day-t{width:auto}
}

/* ---------- Motion: scroll-reveal + count-up ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.reveal.is-visible{opacity:1;transform:none}
.reveal-1{transition-delay:.06s}
.reveal-2{transition-delay:.12s}
.reveal-3{transition-delay:.18s}
.reveal-4{transition-delay:.24s}

.fade-img{opacity:0;transition:opacity .4s ease}
.fade-img.is-loaded{opacity:1}

/* Bosh sahifa — ishonch qatori CTA tugmalari ostida */
.hero-trust{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;font-weight:600;opacity:.82}
.hero-trust-dot{width:6px;height:6px;border-radius:50%;background:var(--yellow);flex:none}

/* Fon bezagining sekin "muallaqlashi" — juda sezilmas, faqat katta bo‘lim fonlarida */
@keyframes markDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,10px)}}
.bg-mark-drift{animation:markDrift 22s ease-in-out infinite}


/* Platforma bo‘limi — brauzer-oynasi ramkasi va bullet ro‘yxati */
.shot-chrome{display:flex;gap:6px;padding:10px 14px;background:var(--bg);border-bottom:1px solid var(--line-strong)}
.shot-chrome span{width:9px;height:9px;border-radius:50%}
.shot-chrome span:nth-child(1){background:var(--yellow)}
.shot-chrome span:nth-child(2){background:var(--pink)}
.shot-chrome span:nth-child(3){background:var(--indigo)}

/* Hamkorlik yopilish jumlasi */
.partnership-closing{margin-top:var(--space-md);font-size:clamp(19px,16.9px + 0.56vw,25px);font-weight:800;letter-spacing:-.03em;color:var(--blue)}

/* FAQ — savol h3 ichida (WAI-ARIA accordion naqshi), tugma o‘zgarmaydi */
h3.faq-h3{margin:0}
.faq-a-wrap{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s ease}
.faq-a-wrap.is-open{grid-template-rows:1fr}
.faq-a-wrap>.faq-a{overflow:hidden;min-height:0;margin-top:12px}

/* Rasm izohi — galereya slayderida */
.gallery-cap{position:absolute;left:0;right:0;bottom:0;padding:10px 12px 9px;font-size:12.5px;font-weight:600;color:var(--white);background:linear-gradient(to top,rgba(11,18,64,.72),rgba(11,18,64,0));text-shadow:0 1px 3px rgba(0,0,0,.3)}

/* Tugma holatlari: bosilgan / yuklanayotgan / o‘chirilgan */
.btn:active{transform:translateY(0) scale(.97)}
.btn.is-loading{position:relative;color:transparent !important;pointer-events:none}
.btn.is-loading .btn-label{opacity:0}
.btn.is-loading::after{
  content:'';position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
  border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:var(--white);
  animation:btnSpin .7s linear infinite;
}
.btn-outline.is-loading::after,.btn-white.is-loading::after{border-color:rgba(11,18,64,.25);border-top-color:var(--navy)}
@keyframes btnSpin{to{transform:rotate(360deg)}}
.btn[disabled]{cursor:not-allowed}

/* Skrollni kuzatish chizig‘i — referensda u sarlavhaning uch rangli chizig‘i
   ustidan to‘q ko‘k bo‘lib yuguradi. z-index sarlavhanikidan (60) yuqori
   bo‘lishi shart, aks holda uning ostida ko‘rinmay qoladi. */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--navy);opacity:.85;z-index:96;transition:width .12s linear}

/* Doim ko‘rinadigan Telegram tugmasi */
.tg-float{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:70;
  width:54px;height:54px;border-radius:50%;background:var(--blue);color:var(--white);
  display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px rgba(33,104,242,0.4);
  transition:transform .18s ease,box-shadow .18s ease;
}
.tg-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 18px 40px rgba(33,104,242,0.48)}

/* "Yuqoriga" tugmasi — 560px skroll qilingandan keyin ko‘rinadi */
.back-to-top{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(78px,10vw,92px);z-index:70;
  width:44px;height:44px;border-radius:50%;background:var(--white);color:var(--navy);border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s ease,transform .2s ease,background .15s ease,color .15s ease;
}
.back-to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.back-to-top:hover{background:var(--blue);color:var(--white);border-color:var(--blue)}
@media (max-width:640px){
  .tg-float{width:48px;height:48px;right:14px;bottom:14px}
  .back-to-top{width:40px;height:40px;right:16px;bottom:70px}
}

/* ---------- Lightbox — galereya suratini katta ko‘rish ---------- */
.lightbox{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(6,8,26,0.88);opacity:0;visibility:hidden;transition:opacity .22s ease;padding:clamp(16px,4vw,40px);
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox-figure{position:relative;max-width:min(92vw,960px);max-height:88vh;display:flex;flex-direction:column;align-items:center}
.lightbox-figure img{max-width:100%;max-height:78vh;width:auto;height:auto;border-radius:var(--radius-md);box-shadow:0 30px 80px rgba(0,0,0,.5);opacity:0;transform:scale(.97);transition:opacity .25s ease,transform .25s ease}
.lightbox.is-open .lightbox-figure img{opacity:1;transform:none}
.lightbox-figure figcaption{margin-top:14px;color:var(--white);font-size:14px;font-weight:600;opacity:.85;text-align:center}
.lightbox-close,.lightbox-nav{
  position:absolute;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.1);color:var(--white);border:1px solid rgba(255,255,255,.22);
  transition:background .15s ease;
}
.lightbox-close:hover,.lightbox-nav:hover{background:rgba(255,255,255,.22)}
.lightbox-close{top:clamp(10px,3vw,26px);right:clamp(10px,3vw,26px)}
.lightbox-prev{left:clamp(4px,2vw,18px);top:50%;transform:translateY(-50%)}
.lightbox-next{right:clamp(4px,2vw,18px);top:50%;transform:translateY(-50%)}
@media (max-width:640px){
  .lightbox-close,.lightbox-nav{width:40px;height:40px}
  .lightbox-prev{left:2px}
  .lightbox-next{right:2px}
}

/* Dastur sahifasi — tanlangan yo‘nalish kartasi skroll paytida joyida qoladi,
   o‘ng tarafdagi bullet ro‘yxati esa erkin skroll qilinadi. Mobil/planshetda
   (ekran balandligi tor bo‘lgani uchun) o‘chirilgan — oddiy oqimda qoladi. */
@media (min-width:901px){
  .dir-sticky{position:sticky;top:86px;align-self:start}
}

/* Natijalar bo‘limidagi raqamlar — skroll paytida sekin siljib, "parallax"
   effekti beradi (initNumberParallax, app.js). JS transform:translateY qo‘yadi. */
.result-num,.stat-num{will-change:transform}

/* ---------- Bosh sahifa — hero surat karuseli + orqaga sanoq ----------
   Statik "hero-photo" kartasi o‘rniga to‘liq ekranli 4 ta surat, sekin
   almashinadi (Ken Burns effekti: sekin zoom + krossfeyd). initHeroCarousel
   va initHeroCountdown (app.js) DOM'ni qayta so‘rab, faqat matnni yangilaydi —
   butun sahifa qayta chizilmaydi. */
.hero-carousel-imgs{position:absolute;inset:0;overflow:hidden}
.hero-slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1);transition:opacity 1.2s ease,transform 7s linear;
}
.hero-slide.is-active{opacity:1;transform:scale(1.08)}

.hero-gradient{
  position:absolute;inset:0;
  background:linear-gradient(96deg,var(--navy2) 0%,rgba(0,12,122,.86) 18%,rgba(0,12,122,.5) 34%,rgba(33,104,242,.16) 52%,rgba(11,18,64,.14) 100%);
}
.hero-gradient::after{content:'';position:absolute;inset:0;background:rgba(0,12,122,.24)}
.hero-fade-bottom{position:absolute;left:0;right:0;bottom:0;height:200px;background:linear-gradient(to top,rgba(11,18,64,.82),rgba(11,18,64,0))}

.hero-dots{position:absolute;right:var(--gutter);top:clamp(20px,2.4vw,34px);z-index:4;display:flex;gap:8px}
/* Tugma o‘zi 24px balandlikda (touch-target) — ko‘rinadigan yupqa "pill" esa
   ::after orqali markazda joylashadi, shuning uchun bosish qulay, ko‘rinishi eskicha. */
.hero-dot{position:relative;width:14px;height:24px;padding:0;border:0;background:none;cursor:pointer;transition:width .4s ease}
.hero-dot::after{content:'';position:absolute;left:0;right:0;top:50%;margin-top:-3px;height:6px;border-radius:999px;background:rgba(255,255,255,.45);transition:background .4s ease}
.hero-dot.is-active{width:34px}
.hero-dot.is-active::after{background:var(--yellow)}

.hero-row{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:clamp(20px,2.6vw,44px);min-height:min(88svh,860px);padding-top:clamp(72px,8vw,140px);padding-bottom:clamp(48px,6vw,90px)}
.hero-text{flex:1 1 420px;min-width:min(100%,300px)}
/* Referens dizayndagi "poster" o‘lchamli sarlavha. Faqat hero ichida —
   .h-hero boshqa sahifalarning sarlavhalarida ham ishlatiladi. */
/* Hero soddalashtirilgandan keyin (subtitle/statistika olib tashlandi) sarlavha
   referensdagi to‘liq poster o‘lchamiga chiqdi. --fs-hero uzluksiz shkala:
   320px -> 34px | 375px -> 36.3px | 414px -> 38px | 768px -> 53px
   1024px -> 63.7px | 1440px -> 81.3px | 1600px+ -> 88px.
   Shu sababli avvalgi "@media(max-width:480px){font-size:34px}" tuzatmasi
   endi keraksiz — shkalaning o‘zi kichik ekranlarni to‘g‘ri qamraydi. */
.hero-row .h-hero{font-size:var(--fs-hero);line-height:.96;letter-spacing:-.045em;margin:var(--space-sm) 0 0;max-width:15ch}
/* Nuqtaning "urib turishi" — referensda bor edi, bizda yo‘q edi */
@keyframes pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
.pill-dot{animation:pulse 2.2s ease-in-out infinite}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,2vw,30px)}
.hero-btns .btn{padding:15px 30px;font-size:clamp(13.5px,1.05vw,16px)}
.hero-btns .btn-white{font-weight:700;box-shadow:0 14px 34px rgba(0,12,122,.3)}
.hero-btns .btn-white:hover{box-shadow:0 20px 44px rgba(0,12,122,.42);transform:translateY(-2px)}
@media (max-width:900px){
  .hero-row{min-height:0;padding-top:52px;padding-bottom:52px;gap:var(--space-lg);align-items:flex-start}
  /* Ikkala tugma bir qatorda teng ulushda — matn uzunligi har xil bo‘lsa ham.
     min-width:0 shart: aks holda flex element o‘z matnining eng qisqa
     bo‘linmas so‘zidan tor bo‘la olmaydi va 320px'da qatordan chiqib ketadi. */
  .hero-btns{flex-wrap:nowrap;gap:10px}
  .hero-btns>*{flex:1 1 0;min-width:0;text-align:center;padding-left:12px;padding-right:12px}
  /* Telefonda fon suratlari poster o‘lchamli sarlavha ostida bezovta qilardi:
     har surat boshqa joyda yorug‘, shu sababli matn kontrasti sakrab turardi va
     ustiga uch qatlam qoplama (gradient + ::after + pastdagi fade) qo‘yilgan edi.
     Bir ustunli maketda toza yechim — suratlarni butunlay olib tashlash: ostida
     .bg-hero'ning brend gradienti qoladi (Jamoa sahifasi heroysi bilan bir xil
     ko‘rinish). Nuqtalar ham yashiriladi — boshqariladigan surat qolmadi. */
  .hero-carousel-imgs,
  .hero-gradient,
  .hero-fade-bottom,
  .hero-dots{display:none}
}
@media (max-width:480px){
  /* 320–400px: yonma-yon ikki tugma matni ikki qatorga bo‘linib ketadi —
     ustma-ust joylashtirilgani toza va bosish maydoni kattaroq. */
  .hero-btns{flex-wrap:wrap}
  .hero-btns>*{flex:1 1 100%}
}

.hero-countdown{
  justify-self:end;display:inline-flex;align-items:center;gap:clamp(14px,1.6vw,26px);
  padding:14px 22px;border-radius:16px;background:rgba(11,18,64,.42);
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px);
}
.hero-cd-label{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);line-height:1.3}
.hero-cd-row{display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.hero-cd-num{font-size:clamp(24px,2.2vw,32px);font-weight:800;letter-spacing:-.04em}
.hero-cd-unit{font-size:12px;opacity:.7}
@media (max-width:640px){
  .hero-countdown{padding:12px 16px;gap:12px}
  .hero-dots{top:14px;right:16px}
}

/* ---------- Missiya bo‘limi — asoschi surati fon qilingan iqtibos kartasi
   + qadriyatlar akkordeoni (Claude Canvas'dagi dizayndan ko‘chirildi) ---------- */
/* Chap ustun — asoschi surati, iqtibos surat USTIDA; o‘ng ustun — vizyon +
   qadriyatlar. Karta balandligi o‘ng ustunga tenglashadi (align-items:stretch),
   shuning uchun KENGLIK aniq bog‘lanishi shart. Aks holda brauzer aspect-ratio
   orqali kenglikni cho‘zilgan balandlikdan hisoblaydi va karta 387px o‘rniga
   559px bo‘lib qo‘shni ustun matnini bosib qoladi — shu xato bir marta sodir
   bo‘lgan, shu sababli bu yerda aspect-ratio umuman ishlatilmaydi. */
.mission-grid{grid-template-columns:minmax(280px,34%) minmax(0,1fr)}
.mission-photo-card{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  width:100%;min-height:clamp(400px,42vw,600px);box-shadow:var(--shadow-lg);
}
.mission-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 14%}
.mission-photo-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,12,122,.95) 20%,rgba(0,12,122,.55) 54%,rgba(0,12,122,.14) 100%)}
.mission-photo-content{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;box-sizing:border-box;padding:clamp(20px,2.2vw,34px);color:var(--white)}
.mission-quote{margin:10px 0 0;padding-left:clamp(13px,1.4vw,18px);border-left:3px solid var(--yellow)}
.mission-quote .mv-title{margin:0;max-width:20ch}
@media (max-width:900px){
  /* Bir ustunda tenglashadigan qo‘shni yo‘q — balandlikni matn belgilaydi.
     min-height faqat pastki chegara: suratga havo qoldiradi, matn undan uzun
     bo‘lsa karta o‘sadi, ya’ni hech qachon kesilmaydi. */
  .mission-grid{grid-template-columns:1fr}
  .mission-photo-card{min-height:clamp(440px,60vw,560px)}
  .mission-photo-img{object-position:52% 20%}
  .mission-quote .mv-title{max-width:34ch}
}

.values-panel{border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--line);overflow:hidden;flex:1;display:flex;flex-direction:column}
.values-accordion{padding:6px clamp(18px,1.9vw,26px) clamp(10px,1.1vw,16px)}
.value-row{border-top:1px solid var(--line)}
.value-row:first-child{border-top:0}
.value-row-btn{
  display:flex;align-items:center;gap:14px;width:100%;padding:14px 0;
  border:0;background:transparent;font:inherit;text-align:left;cursor:pointer;
}
.value-row-n{flex:none;width:26px;font-size:13px;font-weight:600;color:var(--blue)}
.value-row-t{flex:1;font-size:var(--fs-h4);font-weight:700;letter-spacing:-.026em}
.value-row-sign{flex:none;width:24px;height:24px;border-radius:50%;background:rgba(33,104,242,.1);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;line-height:1}
.value-row-desc-wrap{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s ease}
.value-row-desc-wrap.is-open{grid-template-rows:1fr}
.value-row-desc-wrap>.value-row-desc{overflow:hidden;min-height:0;margin:0 40px 14px;font-size:14.5px;line-height:1.45;color:var(--muted)}

/* "To‘rtta aniq o‘zgarish" — vertikal ro‘yxat, katta xira raqam, hoverda o‘ngga siljish */
.changes-list{display:flex;flex-direction:column;border-top:1px solid var(--line-strong)}
.change-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,1.4vw,24px) clamp(16px,2vw,36px);
  padding:clamp(20px,2.2vw,32px) 0;border-bottom:1px solid var(--line-strong);
  transition:background .2s ease,transform .2s ease;border-radius:10px;
}
.change-row:hover{background:rgba(33,104,242,.035);transform:translateX(12px)}
.change-row-n{flex:none;width:56px;font-size:clamp(30px,25.8px + 1.13vw,42px);font-weight:800;line-height:1;letter-spacing:-.05em;color:rgba(33,104,242,.26)}
.change-row-t{flex:none;width:clamp(140px,17vw,240px);margin:0;font-size:clamp(19px,16.9px + 0.56vw,25px);font-weight:800;letter-spacing:-.035em}
.change-row-d{flex:1;min-width:min(100%,220px);margin:0;font-size:var(--fs-body);line-height:1.48;color:var(--muted)}

/* Jamoa kartalari — surat fon, pastda gradient ustiga ism, rangli chiziqcha */
.team-card{position:relative;display:block;width:100%;border-radius:20px;overflow:hidden;transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease}
.team-card:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(0,12,122,.2)}
.team-photo-wrap{position:relative;aspect-ratio:.86;overflow:hidden;border-radius:inherit;background:var(--bg)}
.team-photo-img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.team-photo-overlay{position:absolute;left:0;right:0;bottom:0;padding:56px 16px 16px;background:linear-gradient(to top,rgba(0,12,122,.94),rgba(0,12,122,0));color:var(--white)}
.team-photo-name{margin:0;font-size:clamp(14.5px,1.2vw,17.5px);font-weight:700;letter-spacing:-.03em;line-height:1.18}
.team-photo-role{margin:4px 0 0;font-size:12.5px;line-height:1.3;opacity:.85}
.team-photo-stripe{position:absolute;left:0;right:0;bottom:0;height:5px;display:flex}
.team-photo-stripe span{flex:1}
.team-photo-stripe span:nth-child(1){background:var(--yellow)}
.team-photo-stripe span:nth-child(2){background:var(--pink)}
.team-photo-stripe span:nth-child(3){background:var(--indigo)}

/* Platforma skrinshotlari — brauzer ramkasi o‘rniga to‘q fonli surat +
   pastda shishasimon (glass) izoh kartasi */
.platform-shot-v2{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--navy);box-shadow:var(--shadow-photo)}
.platform-shot-v2 img{display:block;width:100%;opacity:.92}
.platform-shot-caption{
  position:absolute;left:clamp(14px,1.6vw,24px);bottom:clamp(14px,1.6vw,24px);
  width:min(calc(100% - 28px),380px);box-sizing:border-box;padding:16px 20px;
  border-radius:16px;background:rgba(11,18,64,.62);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(16px);color:var(--white);
}
.platform-shot-title{margin:0;font-size:clamp(17px,15.9px + 0.28vw,20px);font-weight:800;letter-spacing:-.03em}
.platform-shot-desc{margin:7px 0 0;font-size:13.5px;line-height:1.42;opacity:.86}

/* FAQ — chapda "yopishqoq" sarlavha, o‘ngda savollar ro‘yxati */
.faq-split{display:grid;grid-template-columns:clamp(240px,26vw,340px) minmax(0,1fr);gap:var(--space-lg) clamp(28px,4vw,64px)}
.faq-split-head{position:sticky;top:110px;align-self:start}
@media (max-width:900px){
  .faq-split{grid-template-columns:1fr}
  .faq-split-head{position:static}
}

/* Dastur sahifasi — tanlangan yo‘nalish kartasi bosh sahifadagi
   "dastur-stack-card" bilan bir xil gradient uslubda */
.dastur-detail-card{padding:clamp(24px,2.4vw,38px);border-radius:28px;color:var(--white);background:linear-gradient(140deg,var(--blue),var(--navy2));box-shadow:var(--shadow-lg)}

/* ---------- Pastdagi yopishqoq CTA paneli (referens: data-r="stickybar") ----------
   900px skrolldan keyin chiqadi. Mobil sarlavhadan CTA olib tashlangani uchun,
   asosiy konversiya tugmasi aynan shu panelda qoladi. */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  width:100%;max-width:var(--content-max);margin-inline:auto;
  display:flex;align-items:center;gap:20px;
  padding:14px var(--gutter);
  background:rgba(11,18,64,.94);backdrop-filter:blur(18px);color:var(--white);
  animation:revUp .3s cubic-bezier(.2,.7,.2,1) both;
}
.sticky-bar[hidden]{display:none}
@keyframes revUp{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:none}}
.sticky-bar-text{font-size:15px;font-weight:600}
.sticky-bar-count{font-size:14px;opacity:.7;font-variant-numeric:tabular-nums}
.sticky-bar-btn{
  margin-left:auto;padding:12px 28px;border:0;border-radius:999px;
  background:var(--white);color:var(--navy);font:inherit;font-size:14.5px;font-weight:700;
  cursor:pointer;transition:transform .16s ease;
}
.sticky-bar-btn:hover{transform:translateY(-2px)}
/* Panel chiqqanda suzuvchi tugmalar tepaga suriladi */
body.has-sticky-bar .tg-float{bottom:calc(clamp(16px,3vw,28px) + 68px)}
body.has-sticky-bar .back-to-top{bottom:calc(clamp(78px,10vw,92px) + 68px)}
@media (max-width:640px){
  .sticky-bar{flex-wrap:wrap;gap:8px 14px;padding:12px var(--gutter)}
  .sticky-bar-count{display:none}
  .sticky-bar-btn{margin-left:0;width:100%;padding:14px}
  body.has-sticky-bar .tg-float{bottom:calc(14px + 116px)}
  body.has-sticky-bar .back-to-top{bottom:calc(70px + 116px)}
}

/* Platforma — sarlavha qatori (chapda matn, o‘ngda tab almashtirgich, xuddi
   Jamoa bo‘limidagi sarlavha+"Barchasi" qatoriga o‘xshab) + pastda bitta
   katta ekran (screenshot) kartasi. Avval tugmalar sarlavhadan mustaqil,
   flex-end bilan "osilib" turardi — endi bitta space-between qatorda,
   sarlavha bilan bir chiziqda tekislangan. */
.platform-head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--space-sm);
}
.platform-wrap{margin-top:var(--space-lg)}
.platform-tabs{
  display:flex;flex:none;gap:6px;padding:4px;border-radius:999px;background:var(--bg);
}
.platform-tab{
  min-height:44px;padding:11px 22px;border:0;border-radius:999px;background:transparent;
  white-space:nowrap;
  color:rgba(11,18,64,.7);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.platform-tab.active{background:var(--blue);color:var(--white);font-weight:700}
.platform-stage{position:relative;border-radius:26px;overflow:hidden;background:var(--navy);box-shadow:0 34px 80px rgba(0,12,122,.22)}
.platform-pane{display:none}
.platform-pane.is-active{display:block}
.platform-pane img{display:block;width:100%;opacity:.92}
.platform-list-wide{margin-top:var(--space-md);display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px clamp(16px,2vw,32px)}
@media (max-width:640px){
  /* Tor ekranda tugmalar sarlavha ostiga tushib, to‘liq enni egallaydi —
     space-between'da ikkalasi torayib, matn siqilib ketmasligi uchun. */
  .platform-tabs{width:100%}
  .platform-tab{flex:1;padding:11px 10px;font-size:13.5px}
}

/* ---------- Mobil adaptiv: jamoa kartalari gorizontal slayderga aylanadi ----------
   Referensdagi [data-r="teamgrid"] xatti-harakati: tor ekranda panjara o‘rniga
   snap-scroll qatori, kartalar ekran kengligining bir qismini egallaydi va
   yonidagisi "ko‘rinib turadi" — bu surish mumkinligini bildiradi.
   Salbiy margin + padding: kartalar ekran chetigacha suriladi, lekin birinchisi
   matn bilan bir chiziqda boshlanadi. */
@media (max-width:900px){
  .team-grid{
    /* !important kerak emas: .grid va .grid-4 qoidalari fayl boshida turadi,
       bu blok esa keyin — bir xil o‘ziga xoslikda kaskad keyingisini oladi. */
    display:flex;
    grid-template-columns:none;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scroll-padding-left:var(--gutter);
    margin-left:calc(var(--gutter) * -1);
    margin-right:calc(var(--gutter) * -1);
    padding-left:var(--gutter);
    padding-right:var(--gutter);
    padding-bottom:8px;
    scrollbar-width:none;
  }
  .team-grid::-webkit-scrollbar{display:none}
  .team-grid>.team-card{flex:0 0 68%;scroll-snap-align:start}
}
@media (max-width:480px){
  .team-grid>.team-card{flex:0 0 80%}
}

/* ---------- "Nega aynan PDP School" — ixcham bitta qatorli solishtiruv ----------
   Har bir taqqoslash bitta ingichka qator: ✕ xira matn → ✓ ko‘k qalin matn.
   Karta qutisi, soya, katta padding yo‘q — faqat nozik ajratuvchi chiziq. */
.xrow-list{display:flex;flex-direction:column;border-top:1px solid var(--line-strong)}
.xrow{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(14px,1.6vw,22px);
  padding:clamp(13px,1.4vw,18px) 0;border-bottom:1px solid var(--line-strong);
}
.xrow-old,.xrow-new{display:inline-flex;align-items:center;gap:9px;flex:1;min-width:220px;font-size:clamp(13.5px,1.02vw,15.5px);line-height:1.4}
.xrow-old{color:rgba(11,18,64,.45);text-decoration:line-through;text-decoration-color:rgba(11,18,64,.28)}
.xrow-new{color:var(--navy);font-weight:600}
.xrow-ico{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.xrow-ico-no{background:rgba(255,0,100,.1);color:var(--pink)}
.xrow-ico-yes{background:rgba(33,104,242,.12);color:var(--blue)}
.xrow-sep{flex:none;color:rgba(11,18,64,.25)}
@media (max-width:640px){
  .xrow-sep{display:none}
  .xrow{padding:12px 0}
}

/* ---------- Yopishqoq sarlavhali ikki ustunli bo‘lim ---------- */
.split-layout{display:grid;grid-template-columns:clamp(240px,26vw,340px) minmax(0,1fr);gap:var(--space-lg) clamp(28px,4vw,64px)}
.split-head{position:sticky;top:110px;align-self:start}
@media (max-width:900px){
  .split-layout{grid-template-columns:1fr}
  .split-head{position:static}
}
.prt-row{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px;
  padding:22px 0;border-bottom:1px solid var(--line-strong);
  transition:padding-left .2s ease;
}
.prt-row:first-child{border-top:1px solid var(--line-strong)}
.prt-row:hover{padding-left:10px}
.prt-n{flex:none;width:34px;font-size:14px;font-weight:600;color:var(--blue)}
.prt-t{flex:none;width:clamp(150px,18vw,250px);margin:0;font-size:clamp(18px,16.2px + 0.47vw,23px);font-weight:700;letter-spacing:-.03em}
.prt-d{flex:1;min-width:min(100%,220px);margin:0;font-size:var(--fs-body);line-height:1.45;color:var(--muted)}

/* ---------- Qabul: interaktiv stepper ---------- */
.stepper{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,3vw,52px);align-items:start}
.stepper-track{position:relative;height:4px;border-radius:4px;background:rgba(11,18,64,.12);margin-bottom:26px;overflow:hidden}
.stepper-fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--blue);transition:width .4s cubic-bezier(.2,.7,.2,1)}
.stepper-list{display:flex;flex-direction:column;gap:8px}
.step-pick{
  display:flex;align-items:center;gap:16px;padding:16px 20px;
  border:1px solid var(--line-strong);border-radius:16px;background:transparent;
  font:inherit;text-align:left;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.step-pick:hover{transform:translateX(4px)}
.step-pick.is-active{background:var(--white);border-color:var(--blue)}
.step-pick-n{
  width:32px;height:32px;flex:none;border-radius:50%;
  background:rgba(33,104,242,.12);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
}
.step-pick.is-active .step-pick-n{background:var(--blue);color:var(--white)}
.step-pick-t{flex:1;font-size:var(--fs-h4);font-weight:700;letter-spacing:-.028em;color:var(--navy)}
.stepper-detail{position:sticky;top:110px;padding:clamp(24px,2.6vw,40px);border-radius:24px;background:var(--white);box-shadow:0 24px 60px rgba(0,12,122,.1)}
.stepper-count{margin:0;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.stepper-title{margin:12px 0 0;font-size:clamp(22px,18.5px + 0.94vw,32px);font-weight:800;letter-spacing:-.035em}
.stepper-text{margin:12px 0 0;font-size:var(--fs-lead);line-height:1.5;color:var(--muted);text-wrap:pretty}
.stepper-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.stepper-note{margin:16px 0 0;font-size:13px;line-height:1.45;color:rgba(11,18,64,.5)}
@media (max-width:900px){
  .stepper-detail{position:static}
}

/* Harakatni kamaytirish sozlamasini hurmat qilamiz */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .page{animation:none}
}