/* =========================================================================
   Topag'on — landing
   =========================================================================
   ASOSIY QOIDA: har bir animatsiyaning YAKUNIY holati — CSS standarti.
   Ya'ni JS yuklanmasa ham, `prefers-reduced-motion` yoqilgan bo'lsa ham
   sahifa to'liq ko'rinadi va o'qiladi. Boshlang'ich ("from") holatlar faqat
   `html.js-motion` selektorida qo'shiladi, uni esa `main.js` shartlar
   bajarilgandagina o'rnatadi.

   Animatsiya faqat `transform` va `opacity` ga tegadi — layout xususiyatlari
   (width/height/top/left/margin) hech qayerda animatsiya qilinmaydi.
   ========================================================================= */

:root {
  /* --- 6 ta token --------------------------------------------------- */
  --ink:   #0E1116;  /* qorong'i yer — hero, zina sahnasi, futer      */
  --paper: #FBFAF6;  /* yorug' yer — asosiy fon                       */
  --grid:  #CBD8E6;  /* katak chiziqlari, hairline, ajratgichlar      */
  --pen:   #16357F;  /* sharikli ruchka ko'ki — chiplar, marker       */
  --mark:  #C1362F;  /* o'qituvchi qizili — FAQAT belgi va to'g'ri javob */
  --brand: #F8721C;  /* ilova brendi — FAQAT CTA                     */

  /* Yuqoridagilardan olingan yordamchi qiymatlar (yangi rang emas). */
  --chalk:      #E8EDE9;
  --ink-soft:   #9AA6B2;
  --paper-soft: #5F6B78;

  --unit: 24px;      /* katak qadami — butun tartib shunga tayanadi  */
  --wrap: 1140px;

  --f-display: 'Onest', system-ui, sans-serif;
  --f-body:    'Manrope', system-ui, sans-serif;
  --f-num:     'JetBrains Mono', ui-monospace, monospace;

  /* Kirish uchun: tez boshlanadi, yumshoq to'xtaydi. `ease` EMAS. */
  --e-out: cubic-bezier(.16, .84, .34, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* `scroll-behavior: smooth` ATAYLAB yo'q: Lenis bilan ikkovi urishadi,
     reduced-motion'da esa u ham keraksiz harakat. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  /* Gorizontal toshib ketishga qarshi qalqon.
     `clip`, `hidden` EMAS: `overflow-x: hidden` body'ni scroll konteyneriga
     aylantiradi va ichkaridagi `position: sticky` ni buzadi (zina ustuni
     720–899 px oralig'ida aynan sticky). `clip` esa scroll konteyneri
     yaratmaydi. Eski brauzerlar uchun `hidden` zaxira sifatida oldinda. */
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg, canvas { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3 { margin: 0; }
a { color: inherit; }

/* Fokus halqasi — HAR BIR interaktiv elementda ko'rinadi. */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  background: var(--brand); color: #2A1000;
  padding: 10px 16px; border-radius: 6px;
  font-weight: 600; text-decoration: none;
  transition: transform .2s var(--e-out);
}
.skip:focus { top: 8px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--unit);
}

/* --- Tipografiya shkalasi ------------------------------------------ */
.h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(28px, 5.2vw, 52px);
  line-height: 1.06;
  letter-spacing: -.02em;
}
.h2--light { color: var(--chalk); }

.eyebrow {
  font-family: var(--f-num);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pen);
  margin-bottom: 12px;
}

.lead {
  max-width: 46ch;
  margin-top: 16px;
  color: var(--paper-soft);
  font-size: clamp(15px, 1.5vw, 18px);
}
.lead--light { color: var(--ink-soft); }

.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }

/* --- Tugmalar ------------------------------------------------------- */
.btn {
  display: inline-block;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 8px;
  transition: transform .16s var(--e-out);
}
.btn--brand { background: var(--brand); color: #2A1000; }
@media (hover: hover) { .btn--brand:hover { transform: translateY(-2px); } }
.btn--brand:active { transform: translateY(1px); }

/* Qizil belgi — sahifaning imzosi. Boshqa joyda qizil YO'Q. */
.mark-tick {
  display: inline-block;
  width: 18px; height: 14px;
  margin-right: 10px;
  background: var(--mark);
  clip-path: polygon(8% 52%, 0 63%, 36% 100%, 100% 14%, 90% 4%, 35% 76%);
}

/* =========================================================================
   1. HERO
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ink);
  /* Doskadagi katak — bir xil qadam, siyoh ko'kida 8%. */
  background-image:
    linear-gradient(rgba(22, 53, 127, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 53, 127, .18) 1px, transparent 1px);
  background-size: var(--unit) var(--unit);
  overflow: hidden;
  padding-block: 96px 72px;
}

.hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: .5;
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 1; }

.hero__brand {
  display: flex; align-items: center;
  font-family: var(--f-num);
  font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--chalk);
  margin-bottom: 32px;
}

.hero__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(38px, 11vw, 132px);
  line-height: .94;
  letter-spacing: -.035em;
  color: var(--chalk);
  margin: 0;
}
/* Har qator o'z konteyneri bilan kesiladi — niqob shu yerdan keladi. */
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line__in { display: block; }

.hero__sub {
  margin-top: 28px;
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.7vw, 20px);
}

.hero__actions { margin-top: 40px; }
.hero__proof {
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 38ch;
}

.hero__hint {
  position: relative; z-index: 1;
  align-self: center;
  margin-top: 48px;
  font-family: var(--f-num);
  font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* =========================================================================
   2. SINF ZINASI
   ========================================================================= */
.ladder {
  position: relative;
  background: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--unit) var(--unit);
  padding-block: 96px;
}

.ladder > .wrap { margin-bottom: 56px; }

.ladder__grid { display: grid; gap: 32px; }

/* Chap ustundagi zina telefonda ko'rinmaydi: u yerda bosqichlar oddiy
   ro'yxat bo'lib turadi va zina qo'shimcha shovqin bo'lardi. */
.ladder__rail { display: none; }

.rail { width: 100%; height: auto; }
.rail__pole,
.rail__rungs line {
  stroke: var(--pen);
  stroke-width: 3;
  stroke-linecap: round;
}
.rail__rungs line { stroke-width: 5; }
.rail__marker circle { fill: var(--mark); }
.rail__marker path {
  stroke: var(--mark); stroke-width: 4;
  stroke-linecap: round; fill: none;
}

.rungs { display: grid; gap: 20px; }

.rung {
  background: var(--paper);
  border: 1px solid var(--grid);
  border-left: 4px solid var(--pen);
  border-radius: 0;              /* bir tomonlama chegara — burchak yumaloq emas */
  padding: 24px;
}

.rung__grade {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--pen);
}
.rung__count {
  font-family: var(--f-num);
  font-weight: 700;
  font-size: clamp(32px, 7vw, 52px);
  line-height: 1;
  letter-spacing: -.03em;
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
}
.rung__label { font-size: 13px; color: var(--paper-soft); margin-top: 4px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips li {
  font-size: 13px;
  padding: 5px 12px;
  border: 1px solid var(--pen);
  border-radius: 999px;
  color: var(--pen);
  background: var(--paper);
}

.rung__line { margin-top: 18px; font-size: 15px; }

/* =========================================================================
   3. FANLAR TOKCHASI
   ========================================================================= */
.shelf { padding-block: 96px; background: var(--paper); }
.shelf > .wrap { margin-bottom: 40px; }

/* Standart: barmoq bilan suriladigan tokcha. Bu holat JS'siz, mobil va
   reduced-motion uchun. Desktopda JS uni scroll'ga bog'laydi. */
.shelf__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-block: 8px 24px;
}
.shelf__track {
  display: flex;
  gap: 16px;
  padding-inline: var(--unit);
  width: max-content;
}

.scard {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 232px;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--grid);
  border-radius: 12px;
  /* skew paytida matn chetlari tozaroq chiqsin */
  transform-origin: 50% 100%;
  will-change: auto;
}
.scard__name {
  font-family: var(--f-display);
  font-weight: 800; font-size: 19px;
  line-height: 1.15;
  min-height: 2.3em;
}
.scard__grades {
  font-family: var(--f-num);
  font-size: 12px; color: var(--pen);
  margin-top: 6px;
}
.scard__num {
  font-family: var(--f-num); font-weight: 700;
  font-size: 34px; letter-spacing: -.03em;
  margin-top: 20px;
  font-variant-numeric: tabular-nums;
}
.scard__unit { font-size: 13px; color: var(--paper-soft); }

.shelf__note {
  margin-top: 16px;
  font-size: 14px;
  color: var(--paper-soft);
}

/* =========================================================================
   4. BITTA SAVOLDAN BUTUN BANKGACHA
   ========================================================================= */
.zoom { background: var(--ink); }

.zoom__stage {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding-block: 96px;
  overflow: hidden;
}

.zoom__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: .45;
  pointer-events: none;
}

.zoom__card {
  position: relative; z-index: 1;
  width: min(440px, calc(100% - 2 * var(--unit)));
  transform-origin: 50% 50%;
}

.qcard {
  background: var(--paper);
  border-radius: 14px;
  padding: 24px;
  border: 1px solid var(--grid);
}
.qcard__meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-family: var(--f-num); font-size: 12px;
  color: var(--pen);
  margin-bottom: 16px;
}
.qcard__timer { margin-left: auto; color: var(--paper-soft); }
.qcard__stem { font-size: 18px; font-weight: 600; line-height: 1.4; }
.qcard__opts { display: grid; gap: 8px; margin-top: 20px; }
.qcard__opts li {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--grid);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 15px;
}
.qcard__opts .is-correct { border-color: var(--mark); }
.qcard__key {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: rgba(22, 53, 127, .10);
  color: var(--pen);
  font-family: var(--f-num); font-size: 12px; font-weight: 700;
}
.qcard__opts .is-correct .qcard__key { background: var(--mark); color: #fff; }
.qcard__tick {
  margin-left: auto;
  width: 16px; height: 13px;
  background: var(--mark);
  clip-path: polygon(8% 52%, 0 63%, 36% 100%, 100% 14%, 90% 4%, 35% 76%);
}
.qcard__note {
  margin-top: 18px;
  font-family: var(--f-num); font-size: 12px;
  color: var(--paper-soft);
}

.zoom__caption { position: relative; z-index: 1; text-align: center; }
.zoom__caption .lead { margin-inline: auto; }

/* =========================================================================
   5. REYTING
   ========================================================================= */
.board {
  padding-block: 96px;
  background: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--unit) var(--unit);
}

.board__panel {
  margin-top: 40px;
  background: var(--paper);
  border: 1px solid var(--grid);
  border-radius: 12px;
  padding: 20px;
  max-width: 620px;
}
.board__disclaimer {
  font-family: var(--f-num); font-size: 12px;
  color: var(--paper-soft);
  margin-bottom: 14px;
}

.board__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.board__table th {
  text-align: left;
  font-size: 12px; font-weight: 600;
  color: var(--paper-soft);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--grid);
}
.board__table th:last-child, .board__xp { text-align: right; }
.board__table td { padding: 14px 0; font-size: 16px; }
.board__table tbody tr + tr td { border-top: 1px solid var(--grid); }
.board__rank {
  width: 56px;
  font-family: var(--f-num); font-weight: 700;
  color: var(--pen);
}
.board__xp {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
}
.board__table .is-me td { color: var(--pen); font-weight: 600; }

/* =========================================================================
   6. FUTER
   ========================================================================= */
.foot {
  background: var(--ink);
  color: var(--chalk);
  padding-block: 88px 40px;
}
.foot__grid { display: grid; gap: 40px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.badge {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 20px 10px 16px;
  border: 1px solid rgba(232, 237, 233, .35);
  border-radius: 10px;
  text-decoration: none;
  transition: transform .16s var(--e-out);
}
@media (hover: hover) { .badge:not(.is-soon):hover { transform: translateY(-2px); } }

/* Play listing hali yo'q — badge bor, lekin bosilmaydi va shunday deb
   aytiladi. Yashirish yomonroq: odam Android versiyasi bor-yo'qligini
   bilmay qoladi. */
.badge.is-soon { opacity: .5; cursor: default; }
.badge__icon { width: 26px; height: 26px; fill: var(--chalk); }
.badge__text { display: grid; line-height: 1.15; }
.badge__small { font-size: 11px; color: var(--ink-soft); }
.badge__big { font-family: var(--f-display); font-weight: 800; font-size: 17px; }

.flink {
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(154, 166, 178, .4);
  padding-bottom: 2px;
}
@media (hover: hover) { .flink:hover { color: var(--chalk); } }

.foot__rights {
  margin-top: 56px;
  font-family: var(--f-num); font-size: 12px;
  color: var(--ink-soft);
}

/* =========================================================================
   KENGROQ EKRANLAR
   ========================================================================= */
@media (min-width: 720px) {
  .ladder__grid { grid-template-columns: 120px 1fr; gap: 48px; align-items: start; }
  .ladder__rail { display: block; position: sticky; top: 96px; }
  .foot__grid { grid-template-columns: 1fr auto; align-items: end; }
  .zoom__stage { gap: 56px; }
}

@media (min-width: 1024px) {
  .ladder { padding-block: 128px; }
  .shelf, .board { padding-block: 128px; }
  .rung { padding: 32px; }
}

/* =========================================================================
   HARAKAT — faqat `html.js-motion` bo'lganda
   =========================================================================
   `main.js` bu klassni QO'YMAYDI, agar:
     * `prefers-reduced-motion: reduce` bo'lsa,
     * yoki GSAP yuklanmasa.
   Demak quyidagi "from" holatlari hech qachon yopishib qolmaydi.
   ========================================================================= */

/* Hero sarlavhasi — niqob ostidan ko'tarilib chiqadi. */
.js-motion .hero__title .line__in { transform: translateY(102%); }
.js-motion .hero__sub,
.js-motion .hero__actions,
.js-motion .hero__brand,
.js-motion .hero__hint { opacity: 0; }

/* Bosqichlar, kartalar, jadval — pastdan chiqadi. */
.js-motion .rung,
.js-motion .scard,
.js-motion .zoom__caption { opacity: 0; }

/* Zina markeri — JS uni scroll bo'yicha suradi. */
.js-motion .rail__marker { will-change: transform; }

/* `will-change` faqat kerak bo'lganda: JS pin paytida qo'yadi va oladi. */
.is-animating { will-change: transform, opacity; }

/* Desktopda pinlangan tokcha — gorizontal scroll o'chadi, JS suradi. */
.js-pinned-shelf .shelf__viewport {
  overflow: hidden;
  scroll-snap-type: none;
}
.js-pinned-shelf .shelf__track { will-change: transform; }

/* Pinlangan zina: yetti bosqich bir-birining USTIDA turadi va scroll
   bo'yicha almashadi. JS'siz esa ular oddiy vertikal ro'yxat bo'lib
   qolaveradi — shuning uchun bu qoidalar faqat `.js-ladder` da. */
.js-ladder .rungs {
  position: relative;
  /* Yetti bosqich bir-birining ustida turadi, shuning uchun balandlik
     ENG BALAND bosqichga yetishi kerak — aks holda almashganda sahifa
     sakraydi. 4 ta chip ikki qatorga tushgan holat hisobga olingan. */
  min-height: 380px;
}
.js-ladder .rung {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: transform, opacity;
}
.js-ladder .rung:first-child { opacity: 1; }

/* Pinlangan bo'limda sarlavha yopishib qolmasin. */
.js-ladder .ladder__rail { position: static; }

/* =========================================================================
   HARAKATNI KAMAYTIRISH
   =========================================================================
   Bu blok `.js-motion` dan KEYIN turadi va uni bekor qiladi — hatto JS
   klassni qo'yib yuborsa ham sahifa statik va o'qiladigan bo'lib qoladi.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .js-motion .hero__title .line__in { transform: none; }
  .js-motion .hero__sub,
  .js-motion .hero__actions,
  .js-motion .hero__brand,
  .js-motion .hero__hint,
  .js-motion .rung,
  .js-motion .scard,
  .js-motion .zoom__caption { opacity: 1; }

  .hero__canvas, .zoom__canvas { display: none; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}