/* =========================================================
   zamove — dizayn tizimi
   Shriftlar: Impact (sarlavhalar), Arial (matn)
   Asosiy rang: lavanda #A697EB, matn #222226
   ========================================================= */

:root {
  --background: #ffffff;
  --foreground: #222226;
  --primary: #a697eb;          /* lavanda tugma */
  --primary-hover: #b6a8f3;
  --primary-ink: #211a35;      /* lavanda tugmadagi matn */
  --accent: #7560b8;           /* <em> urg'u rangi */
  --accent-hero: #8170bd;
  --shell: #f0eef5;            /* hero va "kimga mos" fon */
  --shell-2: #f4f2f8;          /* tariflar fon */
  --lilac: #e9e2fa;            /* contact, featured plan */
  --dark: #28262e;             /* qora tugma */
  --dark-hover: #44404e;
  --ticket: #292331;           /* countdown fon */
  --muted: #6d6577;
  --border: #ded9e7;
  --ring: #7764c2;
  --display: Impact, "Arial Narrow", Arial, sans-serif;
  --body: Arial, Helvetica, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  color: var(--foreground);
  background: var(--background);
  font: 16px/1.6 var(--body);
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #6953b6; outline-offset: 5px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
em { color: var(--accent); font-style: normal; }

h2 {
  font-family: var(--display);
  font-size: clamp(35px, 3.8vw, 54px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1px;
  margin: 0 0 28px;
}
h3 { line-height: 1.2; }

.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.8px; margin: 0 0 24px; }
.section { max-width: 1332px; margin: auto; padding: 70px 30px; }

/* ---------- Ikonkali link + strelka ---------- */
.icon-link { display: inline-flex; align-items: center; gap: 9px; }
.arrow-icon {
  width: 1.35em; height: 1.35em; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7px;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Tugmalar ---------- */
.button {
  display: flex; justify-content: space-between; align-items: center; gap: 28px;
  width: fit-content; max-width: 100%;
  padding: 19px 27px;
  border-radius: 99px;
  background: var(--primary);
  color: var(--primary-ink);
  font-size: 16px; font-weight: 700;
  transition: background .18s;
}
.button:hover { background: var(--primary-hover); }
.button .arrow-icon { width: 24px; height: 24px; }
.button.dark { background: var(--dark); color: #fff; }
.button.dark:hover { background: var(--dark-hover); }

.small-button {
  border: 1px solid #cbc6d9;
  border-radius: 99px;
  padding: 11px 19px;
  font-size: 14px;
}

/* ---------- Hero ---------- */
.hero-shell {
  background: var(--shell);
  border-radius: 40px;
  max-width: 1392px;
  margin: 24px auto 0;
  overflow: hidden;
}
header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 25px 42px; }
.brand { font-size: 36px; font-weight: 800; letter-spacing: -2px; line-height: 1; }
nav { display: flex; gap: 28px; font-size: 14px; }

.hero {
  display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: 25px;
  padding: 30px 30px 30px 50px;
}
.hero h1 {
  font-family: var(--display);
  font-size: clamp(44px, 5.15vw, 74px);
  font-weight: 800; line-height: 1.1; letter-spacing: -1.8px;
  margin: 0 0 26px;
}
.hero h1 em { color: var(--accent-hero); }
.hero .intro { color: #5f5b67; max-width: 460px; margin: 0 0 28px; font-size: 18px; line-height: 1.65; }
.hero .button { width: 100%; max-width: 465px; }
.fine { color: #706a79; margin: 17px 0 0; font-size: 14px; }

.hero-image { position: relative; align-self: stretch; min-height: 540px; border-radius: 28px; overflow: hidden; }
.hero-image > img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 50% 43%; }
.hero-image::after {
  content: ""; position: absolute; inset: 60% 0 0;
  background: linear-gradient(rgba(0,0,0,0), rgba(23,21,27,.73));
}
.hero-image figcaption { position: absolute; z-index: 1; left: 27px; right: 27px; bottom: 28px; color: #fff; }
.hero-image figcaption span { display: block; margin-bottom: 10px; font-size: 12px; letter-spacing: 2px; }
.hero-image figcaption strong { font-size: 24px; line-height: 1.3; }

.ribbon {
  display: flex; justify-content: center; align-items: center; gap: 50px;
  padding: 36px 22px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.4px;
}
.ribbon i { color: #9986d8; font-size: 24px; font-style: normal; }

/* ---------- Shaxsiy natija ---------- */
.personal-result {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 62px;
  padding-top: 65px;
}
.result-story { display: grid; gap: 13px; max-width: 590px; }
.result-story p { color: #5d5664; margin: 0; font-size: 16px; line-height: 1.58; }
.result-story strong { color: #4e397f; }
.result-story .result-lead { color: #29262f; font-size: 20px; font-weight: 700; margin-bottom: 1px; }
.result-prose { display: grid; gap: 12px; padding-left: 18px; border-left: 3px solid var(--primary); }
.result-story .result-note { background: #eae3fa; border-radius: 17px; padding: 16px 18px; font-weight: 600; color: #403457; }
.result-signature { display: block; margin-top: 30px; color: #7865ac; font-size: 18px; font-style: italic; }

.result-photo { position: relative; align-self: center; border-radius: 32px; overflow: hidden; }
.result-photo img { width: 100%; height: auto; }
.result-photo figcaption {
  position: absolute; left: 20px; right: 20px; bottom: 20px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 15px; text-align: center;
}
.result-photo figcaption span {
  justify-self: center; min-width: 110px;
  padding: 9px 15px; border-radius: 99px;
  background: rgba(255,253,242,.91);
  font-size: 13px; font-weight: 700;
}

/* ---------- Community ---------- */
.community-section { padding: 55px 0 52px; overflow: hidden; }
.community-intro {
  display: grid; grid-template-columns: .88fr 1.12fr; align-items: start; gap: 70px;
  padding-top: 20px; padding-bottom: 45px;
}
.community-intro > .eyebrow { grid-column: 1 / -1; margin-bottom: -35px; }
.community-intro h2 { margin: 0; }
.strike { text-decoration: line-through; text-decoration-thickness: .065em; text-decoration-color: #292331; }
.community-copy { color: #5d5764; font-size: 18px; line-height: 1.78; }
.community-copy p { margin: 0 0 19px; }
.community-copy p:last-child { margin-bottom: 0; }
.community-copy h3 { color: var(--foreground); font-size: 22px; margin: 30px 0 14px; }

.community-gallery:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; }
.community-shot {
  flex: 0 0 auto;
  width: clamp(260px, 25vw, 360px);
  height: clamp(560px, 54vw, 740px);
  border-radius: 30px; overflow: hidden;
  background: #151319;
  box-shadow: 0 18px 45px rgba(47,36,64,.13);
}
.community-shot img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.community-caption { margin: 11px 0 0; text-align: center; color: #6d6377; font-size: 12px; font-weight: 700; letter-spacing: 1.8px; }

/* ---------- Kimga mos ---------- */
.audience-section { background: var(--shell); border-radius: 40px; max-width: 1392px; margin: 15px auto 45px; }
.audience-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 36px; }
.audience-heading .eyebrow { max-width: 180px; margin: 0; }
.audience-heading h2 { max-width: 850px; margin: 0; text-align: right; }
.audience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.audience-grid li {
  display: grid; grid-template-columns: 42px 1fr; align-items: start; gap: 13px;
  padding: 23px 24px;
  background: #fff; border: 1px solid var(--border); border-radius: 22px;
}
.audience-grid li > span { color: #7965b8; padding-top: 3px; font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.audience-grid p { color: #4f4a56; margin: 0; font-size: 16px; line-height: 1.55; }
.audience-conclusion {
  margin: 28px 0 0; padding: 23px 27px;
  background: #29262f; color: #fff; border-radius: 22px;
  text-align: center; font-size: 18px; font-weight: 700;
}

/* ---------- Tariflar ---------- */
.tariff-section { background: var(--shell-2); border-radius: 40px; max-width: 1392px; margin: 40px auto 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 40px; }
.section-head h2 { max-width: 610px; margin: 0; }
.section-head > p { color: #6a6373; max-width: 340px; margin: 0; font-size: 16px; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.plan {
  display: flex; flex-direction: column;
  padding: 28px;
  background: #fff; border: 1px solid var(--border); border-radius: 28px;
}
.plan.featured { background: #e9e2ff; border-color: #b4a4e7; }
.plan-top { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; min-height: 61px; }
.plan-top .eyebrow { margin: 0; font-size: 12px; letter-spacing: 1px; }
.badge { padding: 4px 10px; border-radius: 99px; background: #d6cafa; color: #4a3678; font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.plan h3 { margin: 15px 0; font-size: 28px; letter-spacing: -.7px; }
.plan-description { color: var(--muted); min-height: 98px; margin: 0; font-size: 15px; }
.price { margin: 17px 0 0; font-size: 34px; font-weight: 700; letter-spacing: -1px; }
.price small { font-size: 16px; font-weight: 400; letter-spacing: 0; }
.duration { color: #716978; margin: 0; font-size: 14px; }
.plan .button { width: 100%; margin-top: 25px; font-size: 15px; }
.plan:not(.featured) .button { background: var(--dark); color: #fff; }
.plan:not(.featured) .button:hover { background: var(--dark-hover); }
.telegram-note { color: #777080; text-align: center; margin: 10px 0 24px; font-size: 12px; }
.plan ul { margin: 0; padding: 23px 0 0; list-style: none; border-top: 1px solid #d8d2e2; }
.plan li { display: flex; gap: 10px; margin-bottom: 13px; font-size: 14px; line-height: 1.6; }
.plan li span { color: #7760b7; font-weight: 700; }
.plan li.excluded { color: #777080; }
.plan li.excluded span { color: #856bd0; font-size: 19px; line-height: 1.25; }

.mobile-features { display: none; }
.features-toggle {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; min-height: 44px;
  background: none; border: 0; border-top: 1px solid #cec4de;
  color: #493765; font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.features-toggle span { font-size: 23px; }
.features-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---------- Qabul (countdown) ---------- */
.enrollment-section { padding-bottom: 0 !important; }
.enrollment-ticket { position: relative; overflow: hidden; padding: 36px 44px; border-radius: 32px; background: var(--ticket); color: #fff; }
.enrollment-topline {
  display: flex; justify-content: space-between; gap: 16px;
  padding-bottom: 22px; border-bottom: 1px dashed #776587;
  color: #cfbff6; font-size: 12px; font-weight: 700; letter-spacing: 1.8px;
}
.enrollment-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin: 30px 0; }
.enrollment-heading h2 { margin: 0; font-size: clamp(30px, 3.6vw, 48px); }
.enrollment-heading h2 em { color: #bba5fa; }
.enrollment-heading p { color: #e1d8ec; max-width: 260px; margin: 0; font-size: 18px; }
.countdown-digits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.countdown-unit {
  position: relative; text-align: center;
  padding: 20px 10px 17px; border-radius: 18px;
  background: #bba5fa; color: #261b37;
  box-shadow: inset 0 -5px rgba(0,0,0,.07);
}
.countdown-unit:nth-child(2) { background: #c9b9f3; }
.countdown-unit:nth-child(3) { background: #dccff9; }
.countdown-unit:nth-child(4) { background: #eee6ff; }
.countdown-number { display: block; font-size: clamp(48px, 8vw, 108px); font-weight: 800; line-height: 1.1; letter-spacing: -4px; font-variant-numeric: tabular-nums; }
.countdown-label { display: block; margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: 2px; }
.enrollment-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 28px; }
.enrollment-line { width: 100%; height: 3px; margin-bottom: 4px; border-radius: 5px; background: #51425f; overflow: hidden; }
.enrollment-line span { display: block; height: 100%; background: #baa2fa; transition: width .6s; }
.enrollment-bottom p { color: #d0c5dc; margin: 0; font-size: 13px; }

/* ---------- Contact + footer ---------- */
.contact { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 46px; border-radius: 32px; background: var(--lilac); }
.contact h2 { margin-bottom: 18px; }
.contact p:not(.eyebrow) { color: #665d75; max-width: 560px; margin: 0; }
.contact .button { flex-shrink: 0; }

footer {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  max-width: 1272px; margin: auto; padding: 30px 0 45px;
  border-top: 1px solid #e5e1eb;
}
footer > span, footer > a:last-child { color: #736d7c; font-size: 14px; }

/* =========================================================
   Planshet ≤ 1100px
   ========================================================= */
@media (max-width: 1100px) {
  .hero-shell, .tariff-section, .audience-section { margin-left: 20px; margin-right: 20px; }
  header { padding: 24px 28px; }
  nav { gap: 18px; }
  .hero { gap: 25px; padding: 25px; }
  .hero h1 { font-size: 48px; }
  .hero-image { min-height: 510px; }
  .section { padding: 55px 25px; }
  .ribbon { gap: 25px; }
  .personal-result { gap: 38px; }
  .community-intro { gap: 38px; }
  .audience-heading { align-items: flex-start; }
  .plans { gap: 14px; }
  .plan { padding: 22px; }
  .price { font-size: 28px; }
  .plan-description { min-height: 140px; }
  footer { margin: 0 25px; }
}

/* =========================================================
   Mobil ≤ 760px
   ========================================================= */
@media (max-width: 760px) {
  .hero-shell { border-radius: 26px; margin: 12px 12px 0; }
  header { padding: 22px; }
  .brand { font-size: 31px; }
  nav { display: none; }
  .small-button { max-width: 170px; padding: 9px 13px; font-size: 12px; text-align: center; gap: 6px; }
  .small-button .arrow-icon { width: 18px; height: 18px; }
  .hero { grid-template-columns: 1fr; gap: 30px; padding: 20px; }
  .hero h1 { font-size: clamp(38px, 9.5vw, 60px); letter-spacing: -1px; }
  .hero .intro { font-size: 17px; }
  .hero-image { height: 470px; min-height: 0; border-radius: 20px; }
  .hero-image figcaption strong { font-size: 22px; }
  .eyebrow { margin-bottom: 20px; font-size: 11px; }
  .button { font-size: 15px; }

  .ribbon { flex-wrap: wrap; gap: 14px; padding: 25px 18px; font-size: 10px; letter-spacing: .7px; }
  .ribbon i { font-size: 17px; }
  .section { padding: 45px 20px; }
  h2 { font-size: 37px; }

  .personal-result { grid-template-columns: 1fr; gap: 26px; padding-top: 45px; }
  .result-story { gap: 10px; max-width: none; }
  .result-story p { font-size: 15px; }
  .result-story .result-lead { font-size: 19px; }
  .result-prose { gap: 10px; padding-left: 14px; }
  .result-story .result-note { padding: 15px; }
  .result-signature { margin-top: 20px; }
  .result-photo { border-radius: 24px; }
  .result-photo figcaption { bottom: 14px; }
  .result-photo figcaption span { min-width: 90px; padding: 6px 14px; font-size: 12px; }

  .community-section { padding: 35px 0 40px; }
  .community-intro { grid-template-columns: 1fr; gap: 10px; padding-top: 20px; padding-bottom: 30px; }
  .community-intro > .eyebrow { grid-column: auto; margin: 0 0 8px; }
  .community-intro h2 { margin-bottom: 18px; }
  .community-copy { font-size: 17px; }
  .community-caption { margin-top: 4px; }

  .audience-section { border-radius: 28px; margin: 10px 12px 30px; }
  .audience-heading { display: block; margin-bottom: 27px; }
  .audience-heading .eyebrow { max-width: none; margin-bottom: 19px; }
  .audience-heading h2 { text-align: left; }
  .audience-grid { grid-template-columns: 1fr; gap: 11px; }
  .audience-grid li { padding: 20px; border-radius: 18px; }
  .audience-conclusion { margin-top: 20px; padding: 21px; font-size: 17px; }

  .tariff-section { border-radius: 28px; margin: 25px 12px 0; }
  .tariff-section .section { padding: 40px 14px; }
  .section-head { display: block; }
  .tariff-section .section-head { margin-bottom: 24px; }
  .section-head > p { max-width: none; margin-top: 15px; font-size: 14px; }
  .plans { grid-template-columns: 1fr; gap: 14px; }
  .plan { padding: 18px 20px; border-radius: 22px; }
  .plan-top { flex-flow: row wrap; justify-content: space-between; align-items: center; gap: 6px; min-height: 0; }
  .plan-top .eyebrow { font-size: 11px; }
  .badge { padding: 3px 8px; font-size: 10px; }
  .plan h3 { margin: 13px 0 8px; font-size: 25px; }
  .plan-description { min-height: 0; margin: 0; font-size: 14px; line-height: 1.45; }
  .price { margin: 12px 0 0; font-size: 31px; line-height: 1.25; }
  .duration { margin-top: 5px; font-size: 13px; }
  .plan .button { min-height: 48px; margin-top: 15px; padding: 13px 20px; }
  .telegram-note { margin: 7px 0 10px; }
  .plan ul { border-top: 0; padding-top: 12px; }
  .plan li { margin-bottom: 9px; }
  .desktop-features { display: none; }
  .mobile-features { display: block; }

  .enrollment-ticket { border-radius: 24px; padding: 25px 20px; }
  .enrollment-topline { gap: 8px; font-size: 10px; letter-spacing: 1px; }
  .enrollment-heading { display: block; margin: 25px 0; }
  .enrollment-heading p { max-width: none; margin-top: 18px; font-size: 16px; }
  .countdown-digits { gap: 7px; }
  .countdown-unit { padding: 16px 3px 13px; border-radius: 12px; }
  .countdown-number { font-size: clamp(30px, 9vw, 56px); letter-spacing: -1px; }
  .countdown-label { margin-top: 9px; font-size: 10px; letter-spacing: 1px; }
  .enrollment-bottom { gap: 8px; margin-top: 22px; }
  .enrollment-bottom p { font-size: 12px; }

  .contact { display: block; padding: 30px 24px; }
  .contact .button { margin-top: 28px; }
  footer { flex-wrap: wrap; padding-bottom: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* =========================================================
   Treyding qo'shimchalari
   ========================================================= */
.chart-card { background: linear-gradient(160deg, #2b2438, #1a1622); }
.chart-card::after { inset: 55% 0 0; }
.hero-chart { position: absolute; inset: 0 0 90px; width: 100%; height: calc(100% - 90px); }
.hero-chart .trend { fill: none; stroke: #e9e2ff; stroke-width: 2; stroke-dasharray: 5 6; opacity: .55; }

.stats-card { background: var(--ticket); color: #fff; padding: 34px 30px 96px; min-height: 420px; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stats-grid div { padding: 24px 20px; border-radius: 20px; background: rgba(187,165,250,.14); border: 1px solid rgba(187,165,250,.25); }
.stats-grid strong { display: block; font-family: var(--display); font-size: clamp(30px, 3.4vw, 46px); color: #bba5fa; letter-spacing: -1px; line-height: 1.1; }
.stats-grid span { display: block; margin-top: 8px; color: #d0c5dc; font-size: 14px; line-height: 1.4; }

.lesson-card {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 26px; color: #fff;
  background: linear-gradient(170deg, #2f2740, #17131e);
}
.lesson-n { font-family: var(--display); font-size: 54px; color: #bba5fa; letter-spacing: -2px; }
.lesson-bars { flex: 1; display: flex; align-items: flex-end; gap: 6px; margin: 24px 0; }
.lesson-bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(#bba5fa, rgba(187,165,250,.25)); }
.lesson-card figcaption strong { display: block; font-size: 22px; margin-bottom: 6px; }
.lesson-card figcaption span { color: #cfc4e0; font-size: 15px; }

.risk-section { padding-top: 0; padding-bottom: 20px; }
.risk-note { margin: 0; padding: 18px 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--shell-2); color: #6d6577; font-size: 13px; line-height: 1.6; }

@media (max-width: 760px) {
  .stats-card { padding: 22px 16px 80px; min-height: 0; }
  .stats-grid { gap: 10px; }
  .stats-grid div { padding: 18px 14px; }
  .lesson-card { padding: 22px; }
}

/* Ariza formasi */
.lead-card { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; padding: 46px; border-radius: 32px; background: #fff; border: 1px solid var(--border); }
.lead-card h2 { margin-bottom: 18px; }
.lead-card p:not(.eyebrow):not(.lf-msg) { color: #665d75; max-width: 460px; margin: 0; }
#lead-form { display: grid; gap: 14px; }
.lf-field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.lf-field input, .lf-field select { width: 100%; min-height: 50px; padding: 0 18px; border: 1px solid var(--border); border-radius: 16px; background: #fff; color: var(--foreground); font: inherit; }
.lf-field input:focus, .lf-field select:focus { outline: 2px solid var(--ring); border-color: var(--ring); }
#lead-form .button { width: 100%; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lf-msg { margin: 0; min-height: 1.4em; font-size: 14px; font-weight: 700; }
.lf-msg.ok { color: #2f7d57; } .lf-msg.err { color: #b3372f; }
@media (max-width: 900px) { .lead-card { grid-template-columns: 1fr; gap: 26px; padding: 28px 22px; } }

.lf-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #665d75; cursor: pointer; }
.lf-consent input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: #7560b8; }

.gallery-ctl { margin: 10px 0 0; text-align: center; }
.gallery-ctl button { padding: 8px 16px; border: 1px solid var(--border); border-radius: 99px; background: #fff; color: #5d5764; font: 600 13px var(--body); cursor: pointer; }
.gallery-ctl button:hover { background: var(--shell); }

/* Karta rasmlari */
.plan-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; margin-bottom: 18px; }
.lesson-card { position: relative; }
.lesson-card.has-img { background: #151319; }
.lesson-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.lesson-card.has-img::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(rgba(23,19,30,.1) 30%, rgba(23,19,30,.88)); }
.lesson-card.has-img > *:not(img) { position: relative; z-index: 1; }
.lesson-card.has-img .lesson-bars { visibility: hidden; }
.aud-img { display: block; width: 100%; max-width: 300px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; margin-top: 12px; }

.lf-field .opt { color: #8b8494; font-weight: 400; }

/* =========================================================
   Animatsiyalar va slayder (fx.js)
   ========================================================= */
@keyframes lineUp { to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes imgIn { from { opacity: 0; clip-path: inset(7% 7% 7% 7% round 40px); scale: 1.05; } to { opacity: 1; clip-path: inset(0 round 28px); scale: 1; } }
@keyframes candleIn { from { opacity: 0; transform: scaleY(0); } 15% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes marquee { to { transform: translateX(calc(-100% / 6)); } }
@keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 50px) scale(1.12); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(88,224,160,.6); } 70% { box-shadow: 0 0 0 9px rgba(88,224,160,0); } 100% { box-shadow: 0 0 0 0 rgba(88,224,160,0); } }
@keyframes tick { from { opacity: .25; transform: translateY(-14%) scale(.96); } to { opacity: 1; transform: none; } }

/* Skroll chizig'i va yopishqoq menyu */
.scroll-progress { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #a697eb, #7560b8); }
.topbar {
  position: fixed; z-index: 50; top: 12px; left: 50%; max-width: calc(100% - 24px);
  display: flex; align-items: center; gap: 22px; padding: 8px 8px 8px 22px; border-radius: 99px;
  background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(222,217,231,.9); box-shadow: 0 10px 30px rgba(47,36,64,.1);
  transform: translate(-50%, -150%); opacity: 0; visibility: hidden;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .3s, visibility 0s .5s;
}
.topbar.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition-delay: 0s; }
.topbar .brand { font-size: 26px; }
.topbar nav { display: flex; gap: 2px; font-size: 14px; }
.topbar nav a { white-space: nowrap; padding: 8px 14px; border-radius: 99px; color: #4f4a56; transition: background .2s, color .2s; }
.topbar nav a:hover { background: var(--shell); }
.topbar nav a.on { background: var(--lilac); color: #3a2a6b; font-weight: 700; }
.topbar-cta { padding: 11px 20px; border-radius: 99px; background: var(--primary); color: var(--primary-ink); font-size: 14px; font-weight: 700; white-space: nowrap; transition: background .2s, transform .2s; }
.topbar-cta:hover { background: var(--primary-hover); transform: translateY(-1px); }

/* Hero */
.hero-shell { position: relative; }
.hero-shell::before, .hero-shell::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(8px); }
.hero-shell::before { width: 560px; height: 560px; right: -140px; top: -190px; background: radial-gradient(circle, rgba(166,151,235,.5), transparent 65%); animation: float 15s ease-in-out infinite; }
.hero-shell::after { width: 420px; height: 420px; left: -120px; bottom: -150px; background: radial-gradient(circle, rgba(117,96,184,.28), transparent 65%); animation: float 18s ease-in-out infinite reverse; }
.hero-shell > header, .hero-shell > .hero { position: relative; z-index: 1; }
header nav a { position: relative; white-space: nowrap; }
@media (max-width: 1000px) { .hero-shell header nav { display: none; } }
header nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
header nav a:hover::after { transform: scaleX(1); }
.ln { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.ln > span { display: block; }
.fx .ln > span { transform: translateY(108%); animation: lineUp 1s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(.12s + var(--i) * .14s); }
.fx .hero-copy > :not(h1) { opacity: 0; animation: fadeUp .9s cubic-bezier(.2,.8,.2,1) forwards; }
.fx .hero-copy > :nth-child(1) { animation-delay: .02s; }
.fx .hero-copy > :nth-child(3) { animation-delay: .6s; }
.fx .hero-copy > :nth-child(4) { animation-delay: .75s; }
.fx .hero-copy > :nth-child(5) { animation-delay: .9s; }
.fx .hero-image { animation: imgIn 1.2s cubic-bezier(.2,.8,.2,1) .1s both; }
.hero-image { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.hero-chart #candles { transition: transform .65s cubic-bezier(.4,0,.2,1); }
.cd { transform-box: fill-box; transform-origin: 50% 100%; animation: candleIn .7s cubic-bezier(.25,.8,.25,1) both; }
.demo-chip { position: absolute; z-index: 2; top: 18px; left: 20px; display: flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 99px; background: rgba(255,255,255,.13); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font: 700 11px/1 var(--body); letter-spacing: 1.6px; }
.demo-chip i { width: 8px; height: 8px; border-radius: 50%; background: #58e0a0; animation: pulse 1.8s infinite; }

/* Marquee */
.ribbon { overflow: hidden; display: block; padding: 30px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ribbon-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.ribbon:hover .ribbon-track { animation-play-state: paused; }
.ribbon-set { display: flex; align-items: center; gap: 50px; padding-right: 50px; white-space: nowrap; }

/* Skroll bilan paydo bo'lish */
.fx .rv { opacity: 0; translate: 0 36px; }
.fx .rv.in { opacity: 1; translate: 0 0; }
.fx .rv, .fx .rv.in { transition: opacity .85s cubic-bezier(.2,.8,.2,1) var(--d, 0ms), translate .95s cubic-bezier(.2,.8,.2,1) var(--d, 0ms), transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }

/* Tugmalar va kartalar */
.button { position: relative; overflow: hidden; transition: background .18s, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.button::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%); transform: translateX(-130%); }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(117,96,184,.3); }
.button:hover::before { transform: translateX(130%); transition: transform .8s; }
.button .arrow-icon { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.button:hover .arrow-icon { transform: translate(4px, -4px); }
.plan { position: relative; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.plan:hover { box-shadow: 0 26px 54px rgba(60,44,100,.15); }
.plan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.6), transparent 55%); }
.plan:hover::after { opacity: 1; }
.audience-grid li { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; }
.audience-grid li:hover { transform: translateY(-4px); border-color: #b4a4e7; box-shadow: 0 16px 34px rgba(60,44,100,.1); }
.stats-grid div { transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s; }
.stats-grid div:hover { transform: translateY(-4px); background: rgba(187,165,250,.24); }
.lead-card, .contact, .enrollment-ticket { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.lead-card { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.countdown-number.tick { animation: tick .4s cubic-bezier(.2,.8,.2,1); }

/* Coverflow slayder */
.community-gallery { position: relative; width: 100%; overflow: hidden; padding: 20px 0 6px; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.community-gallery.dragging { cursor: grabbing; }
.community-gallery #galleryTrack { position: relative; height: clamp(470px, 46vw, 540px); perspective: 1500px; perspective-origin: 50% 45%; }
.cf .community-shot { position: absolute; left: 50%; top: 10px; width: clamp(230px, 23vw, 310px); height: clamp(420px, 41vw, 500px); border-radius: 28px; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform, opacity; cursor: pointer; box-shadow: 0 30px 60px rgba(47,36,64,.28); }
.cf .community-shot.is-active { cursor: grab; }
.cf-ui { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 4px; }
.cf-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: #4f4a56; font-size: 24px; line-height: 1; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.cf-btn:hover { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); transform: scale(1.06); }
.cf-dots { display: flex; gap: 8px; }
.cf-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: #cbc6d9; cursor: pointer; transition: width .35s cubic-bezier(.2,.8,.2,1), background .3s; }
.cf-dots button.on { width: 28px; background: var(--accent); }

@media (max-width: 1000px) { .topbar nav { display: none; } .topbar { gap: 14px; } }
@media (max-width: 760px) {
  .ribbon { padding: 22px 0; font-size: 10px; }
  .ribbon-set { gap: 22px; padding-right: 22px; }
  .community-gallery #galleryTrack { height: 450px; }
  .cf .community-shot { width: 232px; height: 420px; border-radius: 24px; }
  .hero-shell::before { width: 360px; height: 360px; }
}
/* Rasmlardagi harakat (Ken Burns) */
@keyframes kb { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.13) translate(-2.5%, -2%); } }
.plan-media { overflow: hidden; border-radius: 18px; margin-bottom: 18px; aspect-ratio: 16 / 9; }
.plan-media .plan-img { margin: 0; border-radius: 0; height: 100%; animation: kb 11s ease-in-out infinite alternate; }
.lesson-img { animation: kb 10s ease-in-out infinite alternate; }
.cf .community-shot:nth-child(2n) .lesson-img { animation-duration: 12s; animation-direction: alternate-reverse; }
.aud-img { animation: none; }

@keyframes eq { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }
.lesson-bars i { transform-origin: 50% 100%; animation: eq .8s ease-in-out infinite; }
.lesson-bars i:nth-child(3n) { animation-duration: .6s; animation-delay: -.4s; }
.lesson-bars i:nth-child(3n+1) { animation-duration: 1s; animation-delay: -.9s; }
.lesson-bars i:nth-child(4n) { animation-duration: .7s; animation-delay: -.2s; }
/* "Kimga mos" kartalari rasm bilan */
.audience-grid li.has-img { grid-template-columns: 42px minmax(0, 1fr) 210px; align-items: center; }
.audience-grid li.has-img .aud-img { width: 210px; max-width: 100%; aspect-ratio: 3 / 2; margin: 0; border-radius: 14px; object-fit: cover; }
@media (max-width: 1100px) { .audience-grid li.has-img { grid-template-columns: 42px minmax(0, 1fr); align-items: start; } .audience-grid li.has-img .aud-img { grid-column: 2 / -1; width: 100%; max-width: 340px; } }
/* "Oldin / Keyin" yorliqlari: to'q kartada o'qiladigan rang */
.stats-card figcaption span { background: #efeaff; color: #211a35; }
.stats-card figcaption span:last-child { background: #bba5fa; }
/* =========================================================
   Qorong'i mavzu ([data-theme="dark"])
   ========================================================= */
body { transition: background-color .35s, color .35s; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.theme-toggle { flex: 0 0 auto; display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid #cbc6d9; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background .2s, transform .3s cubic-bezier(.2,.8,.2,1); }
.theme-toggle:hover { background: rgba(166,151,235,.18); transform: rotate(-18deg); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .ico-sun { display: none; }
.topbar .theme-toggle { width: 38px; height: 38px; }
:root[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
@media (max-width: 480px) { header .small-button { display: none; } }

:root[data-theme="dark"] {
  --background: #110e16; --foreground: #ece8f4;
  --accent: #b39ff5; --accent-hero: #b39ff5;
  --shell: #1a1622; --shell-2: #17131e; --lilac: #2a2340;
  --dark: #efeaff; --dark-hover: #ffffff; --ticket: #221c2c;
  --muted: #a59db3; --border: #2e2838; --ring: #b39ff5;
  color-scheme: dark;
}
[data-theme="dark"] .theme-toggle, [data-theme="dark"] .small-button { border-color: #3a3346; }
[data-theme="dark"] .hero .intro, [data-theme="dark"] .result-story p, [data-theme="dark"] .community-copy,
[data-theme="dark"] .contact p:not(.eyebrow), [data-theme="dark"] .lead-card p:not(.eyebrow):not(.lf-msg), [data-theme="dark"] .lf-consent { color: #b8b0c6; }
[data-theme="dark"] .fine, [data-theme="dark"] .community-caption, [data-theme="dark"] footer > span, [data-theme="dark"] footer > a:last-child,
[data-theme="dark"] .section-head > p, [data-theme="dark"] .duration, [data-theme="dark"] .risk-note { color: #a59db3; }
[data-theme="dark"] .result-story strong { color: #c9b8ff; }
[data-theme="dark"] .result-story .result-lead { color: var(--foreground); }
[data-theme="dark"] .result-story .result-note { background: #2a2340; color: #d9cff5; }
[data-theme="dark"] .result-signature { color: #b39ff5; }
[data-theme="dark"] .strike { text-decoration-color: var(--foreground); }
[data-theme="dark"] .audience-grid li, [data-theme="dark"] .plan, [data-theme="dark"] .lead-card { background: #1c1826; }
[data-theme="dark"] .audience-grid p { color: #cfc8dc; }
[data-theme="dark"] .audience-conclusion { background: #2a2340; }
[data-theme="dark"] .plan.featured { background: #2a2340; border-color: #4a3d6e; }
[data-theme="dark"] .badge { background: #3a2f58; color: #d9cff5; }
[data-theme="dark"] .plan ul { border-top-color: #2e2838; }
[data-theme="dark"] .plan li span { color: #b39ff5; }
[data-theme="dark"] .plan li.excluded { color: #8f879d; }
[data-theme="dark"] .plan::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.07), transparent 55%); }
[data-theme="dark"] .plan:not(.featured) .button, [data-theme="dark"] .button.dark { color: #211a35; }
[data-theme="dark"] .features-toggle { border-top-color: #2e2838; color: #d9cff5; }
[data-theme="dark"] footer { border-top-color: #2e2838; }
[data-theme="dark"] .lf-field input, [data-theme="dark"] .lf-field select { background: #15121c; color: var(--foreground); }
[data-theme="dark"] .gallery-ctl button, [data-theme="dark"] .cf-btn { background: #1c1826; color: #cfc8dc; }
[data-theme="dark"] .cf-dots button:not(.on) { background: #3a3346; }
[data-theme="dark"] .topbar { background: rgba(28,24,38,.8); border-color: rgba(58,51,70,.9); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
[data-theme="dark"] .topbar nav a { color: #cfc8dc; }
[data-theme="dark"] .topbar nav a.on { color: var(--foreground); }
[data-theme="dark"] .hero-shell::before { background: radial-gradient(circle, rgba(166,151,235,.28), transparent 65%); }
[data-theme="dark"] .stats-card, [data-theme="dark"] .enrollment-ticket { border: 1px solid #2e2838; }
/* O'qish formati: Online / Offlayn tanlovi */
.lf-format { border: 0; margin: 0; padding: 0; min-width: 0; }
.lf-format legend { display: block; margin-bottom: 6px; padding: 0; font-size: 13px; font-weight: 700; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 50px; border: 1px solid var(--border); border-radius: 16px; background: #fff; font-weight: 700; transition: background .2s, border-color .2s, color .2s; }
.seg label:hover span { border-color: var(--primary); }
.seg input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.seg input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
[data-theme="dark"] .seg span { background: #15121c; }
[data-theme="dark"] .seg input:checked + span { background: var(--primary); }
/* ---------- Shogirtlar natijalari ---------- */
.results-section { position: relative; isolation: isolate; overflow: hidden; max-width: 1392px; margin: 40px auto 0; border-radius: 40px; background: #15121c; color: #ece8f4; }
.results-section::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(620px 320px at 88% 0%, rgba(38,201,138,.15), transparent 70%),
  radial-gradient(520px 300px at 0% 100%, rgba(166,151,235,.22), transparent 70%),
  linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 100% 48px,
  linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 48px 100%; }
.results-section em { color: #b39ff5; }
.results-section .section-head > p { color: #a59db3; }
.res-wrap { margin: 0 calc(-30px - max(0px, (min(100vw, 1392px) - 1332px) / 2)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.res-track { --res-pad: calc(30px + max(0px, (min(100vw, 1392px) - 1332px) / 2)); overflow: hidden; padding: 8px 0 18px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.res-rail { display: flex; gap: 18px; width: max-content; padding-left: var(--res-pad); will-change: transform; }
.res-track.dragging { cursor: grabbing; }
.res-track.dragging .res-card { pointer-events: none; }
.res-track:focus-visible { outline: 2px solid #b39ff5; outline-offset: -2px; border-radius: 22px; }
.res-card { flex: 0 0 clamp(220px, 23vw, 286px); display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 22px; background: linear-gradient(180deg, #1f1a29, #18141f); color: inherit; font: inherit; text-align: left; cursor: zoom-in; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .35s; }
.res-card:hover { transform: translateY(-6px); border-color: rgba(38,201,138,.45); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.res-card:focus-visible { outline: 2px solid #b39ff5; outline-offset: 3px; }
.res-shot { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #0b0a10; }
.res-shot img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.res-card:hover .res-shot img { transform: scale(1.04); }
.res-shot::after { content: ""; position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; border-radius: 50%; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s;
  background: rgba(166,151,235,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211a35' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.2-4.2M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 20px no-repeat; }
.res-card:hover .res-shot::after, .res-card:focus-visible .res-shot::after { opacity: 1; transform: none; }
.res-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 58px; padding: 14px 16px 16px; border-top: 1px solid rgba(255,255,255,.07); }
.res-num { font-family: var(--display); font-size: 18px; color: #b39ff5; }
.res-cap b, .lb-fig figcaption b { font-size: 15px; letter-spacing: .3px; }
.res-cap small, .lb-fig figcaption small { margin-left: auto; font-size: 13px; color: #a59db3; }
.res-cap small.up, .lb-fig figcaption small.up { color: #2fd396; font-weight: 700; }
.res-ctl { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.res-btn, .lb-btn { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(255,255,255,.04); color: #ece8f4; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .2s; }
.res-btn:hover, .lb-btn:hover { background: #a697eb; border-color: #a697eb; color: #211a35; }
.res-btn:active, .lb-btn:active { transform: scale(.94); }
.res-btn:focus-visible, .lb-btn:focus-visible { outline: 2px solid #b39ff5; outline-offset: 3px; }
.res-btn svg, .lb-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.res-bar { flex: 1; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.1); }
.res-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a697eb, #2fd396); transition: width .35s; }
.res-count { min-width: 66px; font-family: var(--display); font-size: 18px; letter-spacing: 1px; color: #a59db3; text-align: right; }
.res-note { max-width: 760px; margin: 22px 0 0; font-size: 13px; line-height: 1.5; color: #8f879d; }
[data-theme="dark"] .results-section { border: 1px solid #2e2838; }
/* Kattalashtirish oynasi */
html.lb-on { overflow: hidden; }
.res-lb { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 24px; background: rgba(9,7,13,.93); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; }
.res-lb.on { opacity: 1; }
.lb-fig { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; margin: 0; transform: scale(.96); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.res-lb.on .lb-fig { transform: none; }
.lb-fig img { max-width: 100%; max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); object-fit: contain; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lb-fig figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; color: #ece8f4; }
.lb-fig figcaption span { font-family: var(--display); font-size: 17px; color: #b39ff5; }
.lb-fig figcaption small { margin-left: 0; }
.lb-btn { width: 52px; height: 52px; }
.lb-close { position: absolute; top: 18px; right: 18px; z-index: 1; }
@media (max-width: 1100px) { .results-section { margin-left: 20px; margin-right: 20px; } }
@media (max-width: 760px) {
  .results-section { border-radius: 28px; margin: 25px 12px 0; }
  .results-section .section { padding: 40px 14px; }
  .results-section .section-head { margin-bottom: 24px; }
  .res-wrap { margin: 0 -14px; }
  .res-track { --res-pad: 14px; padding: 6px 0 14px; }
  .res-rail { gap: 12px; }
  .res-card { flex-basis: 70vw; max-width: 300px; border-radius: 18px; }
  .res-btn { width: 44px; height: 44px; }
  .res-lb { grid-template-columns: minmax(0, 1fr); padding: 70px 12px 92px; }
  .lb-fig img { max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); }
  .lb-prev, .lb-next { position: absolute; bottom: 22px; }
  .lb-prev { left: calc(50% - 66px); }
  .lb-next { right: calc(50% - 66px); }
}
/* ---------- Suratlar ---------- */
.mentor-chip { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 6px 18px 6px 6px; border: 1px solid var(--border); border-radius: 99px; background: rgba(255,255,255,.55); transition: transform .25s, box-shadow .25s; }
.mentor-chip:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(60,40,110,.12); }
.mentor-chip img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); }
.mentor-chip b { display: block; font-size: 15px; line-height: 1.2; }
.mentor-chip small { display: block; color: var(--muted); font-size: 12px; }
.sig-avatar { display: inline-block; width: 46px; height: 46px; margin-right: 12px; vertical-align: middle; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); }
.result-media { display: grid; gap: 16px; align-self: center; }
.result-media .result-photo { align-self: stretch; }
.desk-photo { position: relative; margin: 0; overflow: hidden; border-radius: 32px; aspect-ratio: 4 / 3; }
.desk-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.desk-photo:hover img { transform: scale(1.04); }
.desk-photo figcaption, .m-big figcaption { position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 99px; background: rgba(17,14,22,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 13px; font-weight: 700; }
.meet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 14px; }
.meet-grid figure { position: relative; grid-row: span 2; margin: 0; overflow: hidden; border-radius: 24px; background: var(--shell); }
.meet-grid .m-big { grid-column: span 2; }
.meet-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.meet-grid figure:hover img { transform: scale(1.05); }
.lead-photo { width: 100%; max-width: 460px; height: 300px; margin-top: 26px; border-radius: 24px; object-fit: cover; object-position: 50% 25%; }
.contact > div { flex: 1; }
.contact-photo { flex: 0 0 auto; width: 200px; height: 240px; border-radius: 24px; object-fit: cover; object-position: 60% 50%; }
@media (max-width: 760px) {
  .desk-photo { border-radius: 24px; }
  .meet-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; gap: 10px; }
  .meet-grid figure { border-radius: 18px; }
  .meet-grid figure:last-child { grid-column: span 2; }
  .meet-grid figure:last-child img { object-position: 50% 30%; }
  .lead-photo { height: 240px; }
  .contact-photo { width: 100%; height: 240px; margin-bottom: 24px; }
  .mentor-chip { margin-top: 18px; }
}
[data-theme="dark"] .mentor-chip { background: rgba(28,24,38,.6); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .scroll-progress { display: none; }
}