/* =========================================================
   EDUDROP.UZ — «HOMEWORK» MCHJ
   Dizayn: oq-kulrang toza fon + to'q sariq / tilla aksentlar
   ========================================================= */

:root{
  --bg:#f6f7f9;
  --surface:#ffffff;
  --surface-2:#f1f2f5;
  --ink:#11131a;
  --ink-2:#39404e;
  --muted:#767d8c;
  --line:#e6e8ec;

  --orange:#ff6b00;
  --orange-dark:#e05c00;
  --orange-soft:#fff2e8;
  --gold:#f6b93b;
  --gold-dark:#d99e1f;
  --gold-soft:#fff8e6;
  --grad:linear-gradient(135deg,#ff6b00 0%,#f6b93b 100%);
  --grad-soft:linear-gradient(135deg,#fff2e8 0%,#fff8e6 100%);

  --green:#16a34a;

  --r-sm:10px;
  --r:16px;
  --r-lg:24px;

  --sh-sm:0 1px 2px rgba(17,19,26,.05), 0 4px 14px rgba(17,19,26,.04);
  --sh-md:0 8px 28px rgba(17,19,26,.08);
  --sh-lg:0 24px 60px rgba(17,19,26,.14);
  --sh-orange:0 10px 26px rgba(255,107,0,.28);

  --maxw:1180px;
  --header-h:76px;

  --f:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;
  font-family:var(--f);
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;line-height:1.18;letter-spacing:-.02em;font-weight:800}
p{margin:0}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:12px;font-weight:700;font-size:15px;
  border:1px solid transparent;transition:.18s ease;white-space:nowrap;
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--sh-orange)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(255,107,0,.36)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--sh-sm)}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange-dark);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-2px)}
.btn-lg{padding:16px 28px;font-size:16px;border-radius:14px}
.btn-block{width:100%}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:80;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease;
}
.header.is-stuck{box-shadow:0 6px 24px rgba(17,19,26,.07)}
.header .wrap{max-width:1320px}
.header__in{min-height:var(--header-h);display:flex;align-items:center;gap:18px}

.brand{display:flex;flex-direction:column;line-height:1.1;flex:0 0 auto}
.brand__logo{display:flex;align-items:center;gap:8px;font-size:23px;font-weight:900;letter-spacing:-.045em}
.brand__mark{
  width:30px;height:30px;border-radius:9px;background:var(--grad);
  display:grid;place-items:center;color:#fff;font-size:15px;font-weight:900;
  box-shadow:var(--sh-orange);
}
.brand__slogan{font-size:10.5px;color:var(--muted);font-weight:600;margin-top:3px}

.nav{display:flex;gap:2px;margin:0 auto;flex-wrap:nowrap}
.nav a{padding:9px 10px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--ink-2);transition:.15s;white-space:nowrap}
.nav a:hover{background:var(--surface-2);color:var(--ink)}

.hactions{display:flex;align-items:center;gap:10px;flex:0 0 auto}

/* SVG to'plami sahifada ko'rinmaydi */
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Chizma bayroqlar — emoji o'rniga (Windows/Android'da emoji "GB" bo'lib chiqadi) */
svg.flag{
  width:22px;height:15px;border-radius:3px;flex:0 0 auto;display:block;
  box-shadow:0 0 0 1px rgba(17,19,26,.14);
}
svg.flag--xl{width:46px;height:31px;border-radius:6px}

/* Til selektori — uch joyda ishlatiladi: header, til paneli, kurslar bo'limi */
.langsw{display:flex;padding:4px;gap:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:13px}
.langsw button{
  display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 13px;border-radius:10px;
  font-size:13.5px;font-weight:700;color:var(--muted);transition:.16s;white-space:nowrap;
}
.langsw button .flag{opacity:.55;transition:.16s}
.langsw button.is-active{
  background:var(--surface);color:var(--orange-dark);
  box-shadow:0 2px 6px rgba(17,19,26,.10), inset 0 0 0 1.5px rgba(255,107,0,.45);
}
.langsw button.is-active .flag{opacity:1}
.langsw button:not(.is-active):hover{color:var(--ink-2)}
.langsw button:not(.is-active):hover .flag{opacity:.85}

.btn-promo{
  background:var(--gold-soft);color:#8a5a00;border:1px solid #f6d79b;
  padding:11px 16px;border-radius:12px;font-weight:800;font-size:14px;
  display:inline-flex;align-items:center;gap:7px;transition:.16s;
}
.btn-promo:hover{background:#fff2d1;transform:translateY(-2px)}

/* Kabinetga kirish — Yorvor tugmasiga uslubdosh chip */
.btn-cabinet{
  background:var(--orange-soft);color:var(--orange-dark);border:1px solid #fbd7b8;
  padding:10px 16px;border-radius:12px;font-weight:800;font-size:14px;
  display:inline-flex;align-items:center;gap:8px;transition:.16s;cursor:pointer;
}
.btn-cabinet:hover{background:#ffe6d2;transform:translateY(-2px)}
.btn-cabinet .ic{
  width:24px;height:24px;border-radius:8px;background:var(--grad);color:#fff;
  display:grid;place-items:center;flex:0 0 auto;
  box-shadow:0 3px 8px rgba(255,107,0,.32);
}
.btn-cabinet .ic svg{width:14px;height:14px;display:block}
.btn-promo .flame{animation:flicker 1.6s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.16)}}

.burger{display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:var(--surface)}
.burger i{display:block;width:18px;height:2px;background:var(--ink);margin:3px auto;border-radius:2px}

.mmenu{display:none;border-top:1px solid var(--line);background:var(--surface);padding:12px 0 18px}
.mmenu.is-open{display:block}
.mmenu a{display:block;padding:12px 4px;font-size:15.5px;font-weight:650;border-bottom:1px solid var(--line)}
.mmenu a:last-child{border-bottom:0}
/* Asosiy til filtri — header ostida, sahifa ochilishi bilan ko'rinadi.
   Faqat mobil ko'rinishda; kattaroq ekranlarda selektor headerning o'zida turadi. */
.langbar{display:none;border-bottom:1px solid var(--line);background:var(--surface)}
.langbar__in{padding:14px 20px 16px}
.langbar__lbl{
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:12.5px;font-weight:800;color:var(--ink-2);margin-bottom:10px;
}
.langbar__lbl .ic{width:16px;height:16px;color:var(--orange);flex:0 0 auto}
.langsw--bar{width:100%;padding:5px}
.langsw--bar button{flex:1;padding:12px 8px;font-size:15px;gap:9px}
.langsw--bar .flag{width:24px;height:17px}

/* Headerdagi ixcham selektor */
.hactions .langsw button{padding:8px 11px}

/* Kurslar bo'limidagi kattalashtirilgan selektor */
.langsw--lg{display:inline-flex;margin-top:22px;padding:5px}
.langsw--lg button{padding:11px 20px;font-size:15px;min-width:158px}

/* Tugmalar ichidagi ikonka */
.btn-ic{width:19px;height:19px;color:var(--orange-dark);flex:0 0 auto}

/* ---------- Sections ---------- */
section{padding:88px 0}
.sec-head{max-width:720px;margin:0 auto 44px;text-align:center}
.sec-tag{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  background:var(--orange-soft);color:var(--orange-dark);font-size:12.5px;font-weight:800;
  letter-spacing:.03em;text-transform:uppercase;margin-bottom:16px;
}
.sec-head h2{font-size:clamp(27px,3.6vw,40px)}
.sec-head p{margin-top:14px;color:var(--muted);font-size:16.5px}

/* ---------- Hero ---------- */
.hero{padding:70px 0 84px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-320px;right:-220px;width:760px;height:760px;
  background:radial-gradient(circle,rgba(255,107,0,.13) 0%,rgba(246,185,59,.07) 42%,transparent 68%);
  pointer-events:none;
}
.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center;position:relative}
.badge{
  display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);
  font-size:13.5px;font-weight:700;color:var(--ink-2);
}
.hero h1{font-size:clamp(32px,4.5vw,53px);margin:22px 0 20px;letter-spacing:-.032em}
.hero__lead{font-size:17px;color:var(--ink-2);max-width:560px}
.hero__cta{display:flex;gap:12px;margin:32px 0 30px;flex-wrap:wrap}
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pill{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:11px;
  background:var(--surface);border:1px solid var(--line);font-size:13.5px;font-weight:650;
  color:var(--ink-2);box-shadow:var(--sh-sm);
}

/* Hero mockup */
.mock{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:16px;position:relative;
}
.mock__bar{display:flex;align-items:center;gap:6px;padding:2px 4px 12px}
.mock__bar i{width:10px;height:10px;border-radius:50%;background:#e2e5ea;display:block}
.mock__bar i:first-child{background:#ff5f57}
.mock__bar i:nth-child(2){background:#febc2e}
.mock__bar i:nth-child(3){background:#28c840}
.mock__bar span{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);font-weight:700}
.mock__bar svg.flag{width:17px;height:12px;border-radius:2px}
.player{
  border-radius:var(--r);background:linear-gradient(140deg,#1b1e26,#2c313d);
  aspect-ratio:16/9;display:grid;place-items:center;position:relative;overflow:hidden;
}
.player::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(255,107,0,.28),transparent 62%)}
.player__play{
  width:60px;height:60px;border-radius:50%;background:var(--grad);display:grid;place-items:center;
  color:#fff;font-size:21px;z-index:1;box-shadow:0 8px 26px rgba(255,107,0,.5);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.player__meta{position:absolute;left:14px;bottom:14px;z-index:1;color:#fff}
.player__meta b{font-size:13.5px;display:block}
.player__meta span{font-size:11.5px;opacity:.72}
.player__time{
  position:absolute;right:14px;bottom:16px;z-index:1;color:#fff;font-size:11.5px;font-weight:700;
  background:rgba(255,255,255,.16);padding:4px 9px;border-radius:7px;
}
.progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.2);z-index:1}
.progress i{display:block;height:100%;width:62%;background:var(--grad)}

.mock__list{margin-top:14px;display:grid;gap:8px}
.mrow{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;
  background:var(--surface-2);font-size:13.5px;font-weight:650;color:var(--ink-2);
}
.mrow.is-done{background:#effaf3;color:#14713d}
.mrow.is-lock{opacity:.62}
.mrow .ic{width:26px;height:26px;border-radius:8px;background:#fff;display:grid;place-items:center;font-size:12.5px;box-shadow:var(--sh-sm)}
.mrow .tail{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--muted)}
.mock__games{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
.gchip{
  padding:7px 11px;border-radius:9px;background:var(--grad-soft);border:1px solid #f7dfc4;
  font-size:11.5px;font-weight:750;color:#96521a;
}
.float-card{
  position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:11px 14px;box-shadow:var(--sh-md);font-size:12.5px;font-weight:750;display:flex;align-items:center;gap:9px;
}
.float-card--tl{top:-18px;left:-26px;animation:float 5s ease-in-out infinite}
.float-card--br{bottom:-20px;right:-22px;animation:float 5s ease-in-out infinite 1.6s}
.float-card b{font-size:15px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------- Yorvor banner ---------- */
.yorvor{padding:0}
.yorvor__box{
  position:relative;overflow:hidden;border-radius:28px;padding:52px 56px;
  background:linear-gradient(120deg,#191c24 0%,#2a1b0e 52%,#3d2408 100%);
  color:#fff;display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:center;
}
.yorvor__box::before{
  content:"";position:absolute;top:-160px;right:-90px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(255,107,0,.42),transparent 62%);
}
.yorvor__box::after{
  content:"";position:absolute;bottom:-220px;left:-120px;width:460px;height:460px;
  background:radial-gradient(circle,rgba(246,185,59,.22),transparent 64%);
}
/* Grid elementlari min-content kengligidan kelib chiqib ustunni cho'zib
   yubormasligi uchun — aks holda uzun tugma butun bannerni surib yuboradi. */
.yorvor__box > *{min-width:0}
.yorvor__c{position:relative;z-index:1;min-width:0}
.yorvor .tag{
  display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;
  background:rgba(255,107,0,.18);border:1px solid rgba(255,163,74,.42);color:#ffcf99;
  font-size:12px;font-weight:850;letter-spacing:.05em;text-transform:uppercase;
}
.yorvor h2{font-size:clamp(26px,3.4vw,39px);margin:18px 0 15px}
.yorvor p{color:rgba(255,255,255,.78);font-size:16px;max-width:610px}
.yorvor .note{margin-top:18px;font-size:12.5px;color:rgba(255,255,255,.5)}
.yorvor .btn-primary{margin-top:26px}
.prize{position:relative;z-index:1;display:flex;justify-content:center}
.prize__box{
  position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:18px;
}
/* Telefon ortidagi issiq nur */
.prize__box::before{
  content:"";position:absolute;top:6%;left:50%;transform:translateX(-50%);
  width:290px;height:290px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,140,40,.42) 0%,rgba(246,185,59,.18) 45%,transparent 70%);
  filter:blur(6px);
}
.prize__img{
  position:relative;z-index:1;height:352px;width:auto;
  transform:rotate(-6deg);
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.55)) drop-shadow(0 4px 10px rgba(0,0,0,.35));
  animation:prizeFloat 6s ease-in-out infinite;
}
@keyframes prizeFloat{
  0%,100%{transform:rotate(-6deg) translateY(0)}
  50%{transform:rotate(-6deg) translateY(-12px)}
}
.prize__cap{position:relative;z-index:1;text-align:center}
.prize__cap b{display:block;font-size:16px;letter-spacing:-.01em}
.prize__cap span{font-size:12px;color:rgba(255,255,255,.55)}
.price-tag{
  position:absolute;top:-14px;right:-14px;z-index:2;background:var(--grad);color:#fff;
  padding:11px 15px;border-radius:14px;font-weight:900;font-size:14px;transform:rotate(9deg);
  box-shadow:0 12px 30px rgba(255,107,0,.5);white-space:nowrap;
}

@media (prefers-reduced-motion:reduce){
  .prize__img{animation:none}
}

/* ---------- Feature cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 22px;box-shadow:var(--sh-sm);transition:.2s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:#f0d8bf}
.card__ic{
  width:50px;height:50px;border-radius:15px;background:var(--grad-soft);border:1px solid #f7e2c9;
  display:grid;place-items:center;font-size:23px;margin-bottom:16px;
}
.card h3{font-size:17.5px;margin-bottom:9px}
.card p{font-size:14.5px;color:var(--muted);line-height:1.62}

/* ---------- Games / trainer ---------- */
.games{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.game{
  border-radius:var(--r-lg);padding:28px 24px;color:#fff;position:relative;overflow:hidden;
  min-height:212px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--sh-md);
}
.game--1{background:linear-gradient(145deg,#ff6b00,#ff9d3d)}
.game--2{background:linear-gradient(145deg,#1f2430,#3c4457)}
.game--3{background:linear-gradient(145deg,#d99e1f,#f6b93b)}
.game .em{position:absolute;top:20px;right:20px;font-size:44px;opacity:.9}
.game h3{font-size:19px;margin-bottom:8px}
.game p{font-size:13.8px;color:rgba(255,255,255,.85)}
.trainer-note{
  margin-top:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 24px;display:flex;gap:16px;align-items:center;box-shadow:var(--sh-sm);
}
.trainer-note .em{font-size:30px}
.trainer-note b{display:block;font-size:15.5px}
.trainer-note span{font-size:14px;color:var(--muted)}

/* ---------- Courses ---------- */
.course-head{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 28px;display:flex;align-items:center;gap:18px;margin-bottom:22px;box-shadow:var(--sh-sm);
}
.course-head svg.flag{flex:0 0 auto}
.course-head h3{font-size:19.5px}
.course-head p{font-size:13.8px;color:var(--muted);margin-top:3px}
.course-head .meta{margin-left:auto;text-align:right}
.course-head .meta b{display:block;font-size:19px;color:var(--orange-dark)}
.course-head .meta span{font-size:12px;color:var(--muted);font-weight:650}

.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.module{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 22px;display:flex;flex-direction:column;box-shadow:var(--sh-sm);
  transition:.2s ease;position:relative;overflow:hidden;
}
.module::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--grad);opacity:0;transition:.2s}
.module:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:#f0d8bf}
.module:hover::before{opacity:1}
.module__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.module__n{font-size:12.5px;font-weight:850;color:var(--orange-dark);background:var(--orange-soft);padding:6px 12px;border-radius:8px}
.module__lessons{font-size:12.5px;font-weight:750;color:var(--muted)}
.module h4{font-size:16.5px;line-height:1.45;margin-bottom:16px;min-height:72px;font-weight:700;letter-spacing:-.01em}
.module__price{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
.module__price b{font-size:26px;letter-spacing:-.03em}
.module__price span{font-size:14px;color:var(--muted);font-weight:700}
.module__bonus{font-size:12.5px;color:var(--gold-dark);font-weight:750;margin-bottom:16px}
.module .btn{margin-top:auto}

/* ---------- Authors ---------- */
.authors-title{
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:18px;margin-bottom:18px;color:var(--ink-2);
}
.authors{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.author{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;display:flex;gap:18px;box-shadow:var(--sh-sm);transition:.2s;
}
.author:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.author__ava{
  width:64px;height:64px;border-radius:20px;background:var(--grad);flex:0 0 auto;
  display:grid;place-items:center;color:#fff;font-size:22px;font-weight:900;box-shadow:var(--sh-orange);
}
.author h4{font-size:17px}
.author .role{font-size:13px;font-weight:750;color:var(--orange-dark);margin:5px 0 8px}
.author p{font-size:14px;color:var(--muted);line-height:1.6}

/* ---------- Reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.review{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;
}
.review .stars{color:var(--gold);font-size:14px;letter-spacing:2px;margin-bottom:14px}
.review p{font-size:14.8px;color:var(--ink-2);line-height:1.68;flex:1}
.review__who{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.review__ava{width:42px;height:42px;border-radius:13px;background:var(--surface-2);display:grid;place-items:center;font-weight:900;color:var(--ink-2)}
.review__who b{display:block;font-size:14.5px}
.review__who span{font-size:12.5px;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq{max-width:840px;margin:0 auto;display:grid;gap:12px}
.qa{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.2s}
.qa.is-open{border-color:#f2cfa8;box-shadow:var(--sh-sm)}
.qa__q{width:100%;display:flex;align-items:center;gap:14px;padding:20px 22px;text-align:left;font-size:16px;font-weight:700;color:var(--ink)}
.qa__q .num{width:28px;height:28px;flex:0 0 auto;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;font-size:12.5px;font-weight:850;color:var(--muted)}
.qa.is-open .num{background:var(--grad);color:#fff}
.qa__q .chev{margin-left:auto;transition:.24s;color:var(--muted);font-size:13px}
.qa.is-open .chev{transform:rotate(180deg);color:var(--orange)}
.qa__a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.qa__a p{padding:0 22px 22px 64px;font-size:14.8px;color:var(--muted);line-height:1.68}

/* ---------- Footer ---------- */
.footer{background:#12141a;color:rgba(255,255,255,.68);padding:60px 0 26px;font-size:14px}
/* Logo chapda, havolalar ustunlari o'ngda — o'rtada bo'sh joy qolmaydi */
.footer__grid{display:grid;grid-template-columns:1fr max-content max-content;gap:36px 72px}
.footer h5{color:#fff;font-size:14px;font-weight:800;margin-bottom:16px}
.footer li{margin-bottom:9px}
.footer a:hover{color:var(--gold)}
.footer .brand__logo{color:#fff}
.footer .brand__slogan{color:rgba(255,255,255,.45);display:block}
/* ---------- Ijtimoiy tarmoqlar ---------- */
.social{
  margin-top:40px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.social__lbl{font-size:14px;font-weight:750;color:rgba(255,255,255,.75)}
.social__links{display:flex;gap:12px;flex-wrap:wrap}

/* Brend ranglari asosiy holatda — telefonda hover bo'lmaydi,
   shuning uchun tugmalar rangsiz qolib ketmasligi kerak. */
.social__ic{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 20px 12px 16px;border-radius:14px;border:0;
  color:#fff;font-size:14.5px;font-weight:750;transition:.18s ease;
}
.social__ic svg{width:22px;height:22px;fill:currentColor;flex:0 0 auto}
.social__ic--tg{
  background:linear-gradient(135deg,#2AABEE,#1E96C8);
  box-shadow:0 8px 20px rgba(34,158,217,.30);
}
.social__ic--ig{
  background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  box-shadow:0 8px 20px rgba(220,39,67,.30);
}
.social__ic:hover{transform:translateY(-3px);filter:brightness(1.08);color:#fff}
.social__ic:active{transform:translateY(-1px)}
.footer__bottom{
  margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.45);
}

/* ---------- Checkout modal ---------- */
.modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px}
.modal.is-open{display:flex}
.modal__bd{position:absolute;inset:0;background:rgba(12,14,20,.55);backdrop-filter:blur(5px)}
.modal__box{
  position:relative;width:100%;max-width:470px;background:var(--surface);border-radius:24px;
  box-shadow:var(--sh-lg);max-height:92vh;overflow-y:auto;animation:pop .22s ease;
}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.modal__x{
  position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:11px;
  background:var(--surface-2);display:grid;place-items:center;color:var(--muted);font-size:15px;z-index:2;
}
.modal__x:hover{background:#e8eaee;color:var(--ink)}
.modal__body{padding:30px}
.modal h3{font-size:21px;margin-bottom:6px}
.modal__sub{font-size:13.5px;color:var(--muted);margin-bottom:20px}

.order{background:var(--surface-2);border-radius:var(--r);padding:18px;margin-bottom:16px}
.order__row{display:flex;justify-content:space-between;gap:14px;font-size:14px;margin-bottom:9px}
.order__row span{color:var(--muted)}
.order__row b{font-weight:750;text-align:right}
.order__total{display:flex;justify-content:space-between;align-items:baseline;padding-top:13px;margin-top:4px;border-top:1px dashed #d8dce2}
.order__total span{font-size:14px;font-weight:700}
.order__total b{font-size:24px;letter-spacing:-.03em;color:var(--orange-dark)}
.bonus{
  display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:13px;
  background:var(--gold-soft);border:1px solid #f6e0a8;color:#8a5a00;
  font-size:13.5px;font-weight:700;margin-bottom:20px;
}
.field{margin-bottom:18px}
.field label{display:block;font-size:13.5px;font-weight:750;margin-bottom:8px}
.field input{
  width:100%;padding:14px 16px;border-radius:13px;border:1px solid var(--line);
  background:var(--surface-2);font-size:16px;font-weight:650;font-family:inherit;color:var(--ink);
  transition:.16s;outline:none;letter-spacing:.02em;
}
.field input:focus{border-color:var(--orange);background:#fff;box-shadow:0 0 0 4px rgba(255,107,0,.1)}
.field .hint{font-size:12px;color:var(--muted);margin-top:7px}
.field.has-err input{border-color:#ef4444;background:#fef2f2}

.paylabel{font-size:13.5px;font-weight:750;margin-bottom:10px}
.pays-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.payopt{
  display:flex;align-items:center;gap:9px;padding:14px;border-radius:13px;
  border:1.5px solid var(--line);background:var(--surface);font-weight:750;font-size:14.5px;
  transition:.15s;color:var(--ink);
}
.payopt .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.payopt:hover{border-color:#cfd4dc;transform:translateY(-2px)}
.payopt.is-sel{border-color:var(--orange);background:var(--orange-soft);box-shadow:0 0 0 3px rgba(255,107,0,.09)}

.agree{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--ink-2);margin-bottom:20px;cursor:pointer}
.agree input{width:19px;height:19px;margin:1px 0 0;accent-color:var(--orange);flex:0 0 auto;cursor:pointer}
.agree a{color:var(--orange-dark);font-weight:750;text-decoration:underline}
.err-msg{display:none;font-size:13px;color:#dc2626;font-weight:650;margin-bottom:14px}
.err-msg.is-on{display:block}
.secure{text-align:center;font-size:12px;color:var(--muted);margin-top:14px}

.done{text-align:center;padding:14px 0}
.done__ic{width:70px;height:70px;border-radius:24px;background:#effaf3;color:var(--green);display:grid;place-items:center;font-size:32px;margin:0 auto 18px}
.done h3{margin-bottom:10px}
.done > p{font-size:14.5px;color:var(--muted);margin-bottom:20px}
.done__list{text-align:left;background:var(--surface-2);border-radius:var(--r);padding:16px 18px;margin-bottom:20px}
.done__list li{display:flex;gap:10px;font-size:13.8px;margin-bottom:10px;color:var(--ink-2)}
.done__list li:last-child{margin-bottom:0}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease}
.rv.is-in{opacity:1;transform:none}

/* ---------- Auth page ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--surface)}
.auth__side{
  background:linear-gradient(150deg,#191c24,#2a1b0e 60%,#3d2408);color:#fff;
  padding:56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
}
.auth__side::before{content:"";position:absolute;top:-160px;right:-140px;width:520px;height:520px;background:radial-gradient(circle,rgba(255,107,0,.38),transparent 62%)}
.auth__side > *{position:relative;z-index:1}
.auth__side h2{font-size:32px;margin:26px 0 14px}
.auth__side p{color:rgba(255,255,255,.72);font-size:15.5px;max-width:420px}
.auth__feats{margin-top:34px;display:grid;gap:13px}
.auth__feats li{display:flex;gap:12px;align-items:center;font-size:14.5px;color:rgba(255,255,255,.85)}
.auth__feats .ic{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:17px}
.auth__form{display:grid;place-items:center;padding:56px 40px}
.auth__card{width:100%;max-width:390px}
.auth__card h1{font-size:28px;margin-bottom:8px}
.auth__card > p{color:var(--muted);font-size:14.5px;margin-bottom:28px}
.auth__alt{margin-top:22px;font-size:13.5px;color:var(--muted);text-align:center}
.auth__alt a{color:var(--orange-dark);font-weight:750}
.backlink{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--muted);margin-bottom:26px}
.backlink:hover{color:var(--orange-dark)}

/* ---------- Responsive ---------- */
@media (max-width:1240px){
  .nav{display:none}
  .burger{display:block}
  .hactions{margin-left:auto}
}
@media (max-width:1080px){
  .brand__slogan{display:none}
  /* Menyu burgerga o'tgach header tor qoladi — tugmalar faqat ikonka bo'ladi */
  .btn-promo .txt,.btn-cabinet .txt{display:none}
  .btn-promo{padding:11px 13px}
  .btn-cabinet{padding:10px 12px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .modules{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  section{padding:64px 0}
  .hero__grid{grid-template-columns:1fr;gap:44px}
  .mock{max-width:520px;margin:0 auto}
  .yorvor__box{grid-template-columns:minmax(0,1fr);padding:38px 24px;text-align:center}
  .yorvor p{margin:0 auto}
  /* Uzun CTA tor ekranda ikki qatorga bo'linadi */
  .yorvor .btn-primary{white-space:normal;width:100%;padding:15px 18px;line-height:1.35}
  .prize__img{height:300px}
  .prize__box::before{width:250px;height:250px}
  .games{grid-template-columns:1fr}
  .authors{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr}
  .auth__side{display:none}
}
@media (max-width:680px){
  :root{--header-h:66px}
  .header__in{gap:12px}
  .hactions{gap:8px}
  .hactions .langsw{display:none}
  .langbar{display:block}
  .btn-promo .txt,.btn-cabinet .txt{display:none}
  .btn-promo{padding:12px 14px}
  .btn-cabinet{padding:11px 13px}
  .brand__logo{font-size:20px}
  .langsw--lg{display:flex;width:100%}
  .langsw--lg button{flex:1;padding:12px 10px;font-size:14.5px}
  .cards{grid-template-columns:1fr}
  .modules{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:28px}
  .social{flex-direction:column;align-items:stretch;text-align:center;gap:14px}
  .social__links{justify-content:center}
  .social__ic{flex:1;justify-content:center;min-width:130px}
  .course-head{flex-wrap:wrap}
  .course-head .meta{margin-left:0;text-align:left;width:100%}
  .hero__cta .btn{width:100%}
  .modal__body{padding:24px 20px}
  .float-card--tl{left:-8px;top:-12px}
  .float-card--br{right:-6px;bottom:-12px}
  .prize__img{height:262px}
  .prize__box::before{width:215px;height:215px}
  .price-tag{font-size:12.5px;padding:9px 12px;top:-10px;right:-6px}
  .module h4{min-height:auto}
  .qa__a p{padding-left:22px}
}