/* SOCETIFY V3 — ommaviy sayt (login oldidagi sahifalar).
   Ishchi panel bilan bir xil tokenlardan oziqlanadi: mijoz saytda
   ko'rgan narsasini ichkarida ham topadi. 3D sahna yo'q. */

/* ---------- qobiq ---------- */
.pub { display: flex; flex-direction: column; min-height: 100vh; }
.wrap { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }

.pub-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.pub-head .wrap { display: flex; align-items: center; gap: 14px; padding: 11px 0; }
.pub-brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--f-display); font-weight: 700;
  font-size: 17px; letter-spacing: -.015em; text-decoration: none;
}
.pub-nav { display: flex; gap: 2px; margin-left: 8px; }
.pub-nav a {
  padding: 6px 11px; border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 500; color: var(--ink-soft); text-decoration: none;
}
.pub-nav a:hover { background: var(--surface-hover); color: var(--ink); }
.pub-nav a.is-on { color: var(--ink); font-weight: 600; }
.pub-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; min-width: 0; }
/* Ruscha matn o'zbekchadan ~30% uzun: "Начать бесплатно" tugmasi
   375px da qutidan 6px chiqib ketardi (2026-09-06 da o'lchandi).
   Telefonda tugma matni qisqartiriladi, o'ralmaydi. */
@media (max-width: 480px) {
  .pub-actions { gap: 5px; }
  .pub-actions .btn { padding-left: 10px; padding-right: 10px; font-size: var(--t-sm); }
  .pub-actions .btn-primary { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pub-actions .keng-matn { display: none; }
  .pub-actions .tor-matn { display: inline; }
}
.tor-matn { display: none; }

.pub-main { flex: 1; }

.pub-foot { border-top: 1px solid var(--line); margin-top: 72px; padding: 34px 0 44px; background: var(--surface-sunk); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 26px; }
.foot-col { display: flex; flex-direction: column; gap: 7px; }
.foot-title {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 2px;
}
.foot-col a { font-size: 13.5px; color: var(--ink-soft); text-decoration: none; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; }
.foot-note { font-size: var(--t-sm); color: var(--ink-dim); max-width: 34ch; }
.foot-bottom {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: var(--t-sm); color: var(--ink-dim);
}
/* To'lov tizimlari logolari — footerning ENG tagida, bitta gorizontal
   qator (Click/Payme talabi). Logo rangi faylniki emas: fayl faqat SHAKL
   (mask), rang token — ikki mavzuda ham bir xil va o'qiladigan. */
.foot-tolov {
  margin-top: 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
}
.tolov-logo {
  display: block; height: 24px; background-color: var(--ink-dim);
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
.tolov-logo-click { aspect-ratio: 157 / 40; -webkit-mask-image: url("../../img/tolov/click.e1ccba416556.svg"); mask-image: url("../../img/tolov/click.e1ccba416556.svg"); }
.tolov-logo-payme { aspect-ratio: 58 / 20; height: 22px; -webkit-mask-image: url("../../img/tolov/payme.d24c631258ee.svg"); mask-image: url("../../img/tolov/payme.d24c631258ee.svg"); }
.tolov-logo-uzcard { aspect-ratio: 200 / 60; height: 26px; -webkit-mask-image: url("../../img/tolov/uzcard.78ba1c9c84fd.png"); mask-image: url("../../img/tolov/uzcard.78ba1c9c84fd.png"); }
.tolov-logo-humo { aspect-ratio: 190 / 48; height: 22px; -webkit-mask-image: url("../../img/tolov/humo.276c0371ac6a.png"); mask-image: url("../../img/tolov/humo.276c0371ac6a.png"); }
/* Telefonda to'rttasi BITTA qatorga sig'sin (375 da ~320px). */
@media (max-width: 480px) {
  .foot-tolov { gap: 12px 16px; }
  .tolov-logo { height: 19px; }
  .tolov-logo-payme, .tolov-logo-humo { height: 17px; }
  .tolov-logo-uzcard { height: 21px; }
}

/* ---------- bo'limlar ---------- */
.sec { padding: 66px 0; }
.sec-tight { padding: 42px 0; }
.sec-sunk { background: var(--surface-sunk); border-block: 1px solid var(--line); }
.sec-head { max-width: 62ch; display: flex; flex-direction: column; gap: 10px; }
/* Sahifa sarlavhasi `h1`, ichki bo'limlar `h2` — ikkalasi bir xil
   ko'rinadi, lekin tuzilma to'g'ri bo'ladi (har sahifada bitta h1). */
.sec h1, .sec h2 { font-size: 26px; letter-spacing: -.02em; }
.lead { font-size: 17px; line-height: 1.55; color: var(--ink-soft); max-width: 58ch; }

/* ---------- ochilish ---------- */
.hero { padding: 64px 0 40px; display: flex; flex-direction: column; gap: 18px; }
.hero h1 {
  font-size: clamp(32px, 5vw, 46px);
  line-height: 1.08;
  letter-spacing: -.03em;
  max-width: 18ch;
}
.hero-cta { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 4px; }
.btn-lg { padding: 11px 20px; font-size: 15px; }

/* ---------- mahsulot ramkasi ----------
   Ichida CHIZMA emas, ishchi panelning O'ZI turadi: bir xil
   `components.css`, bir xil tokenlar. Shuning uchun sayt interfeys
   o'zgarganda eskirmaydi. */
.frame {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.frame-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--line);
}
.frame-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); flex: none; }
.frame-url {
  margin-left: 6px; font-family: var(--f-mono); font-size: var(--t-xs);
  color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.frame-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.frame-sm .frame-body { padding: 11px; gap: 9px; }
/* Ramka ichidagi matn kichrayadi — u kichraytirilgan ekran taassurotini
   beradi, lekin haqiqiy element bo'lib qoladi (surat emas). */
.frame-sm { font-size: 12.5px; }
.frame-sm .row-title { font-size: 12.5px; }
.frame-sm .sum-value { font-size: 17px; }
.frame-caption { font-size: var(--t-sm); color: var(--ink-dim); margin-top: 8px; }

/* ---------- uch qadam ---------- */
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 26px; }
.step3 { display: flex; flex-direction: column; gap: 9px; }
.step3-num {
  font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500;
  color: var(--accent); border: 1px solid var(--accent-line);
  border-radius: var(--r-pill); padding: 1px 8px; align-self: flex-start;
}
.step3 h3 { font-size: 16px; }
.step3 p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }

/* ---------- kanallar ---------- */
.chans { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.chan-card {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding: 11px 15px;
  font-weight: 600; font-size: 14px; text-decoration: none; color: var(--ink);
}
.chan-card:hover { border-color: var(--line-strong); }
.chan-card .dot { width: 8px; height: 8px; }
.chan-card small { font-weight: 400; color: var(--ink-dim); font-size: var(--t-sm); }

/* ---------- kim uchun / ishonch ---------- */
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 26px; }
.card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 9px;
}
.card h3 { font-size: 17px; }
.card p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.fact { display: flex; flex-direction: column; gap: 3px; }
.fact-key {
  font-family: var(--f-display); font-weight: 600; font-size: 21px;
  letter-spacing: -.02em;
}
.fact-note { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }

@media (max-width: 900px) {
  .steps3, .two, .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec { padding: 44px 0; }
  .pub-nav { display: none; }
}

/* ---------- imkoniyatlar ro'yxati ---------- */
.feat { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; }
.feat-item {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.feat-item h3 { font-size: 19px; }
.feat-item > div > p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin-top: 6px; }
.feat-points { display: flex; flex-direction: column; gap: 9px; }
.feat-point { display: flex; flex-direction: column; gap: 1px; }
.feat-point b { font-size: 13.5px; }
.feat-point span { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
/* Bitta o'lchov — reklama emas, aniq raqam */
.feat-metric {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.feat-batafsil { display: inline-block; margin-top: 12px; }
.feat-metric b { font-family: var(--f-display); font-size: 20px; letter-spacing: -.02em; }
.feat-metric span { font-size: var(--t-sm); color: var(--ink-dim); }

/* ---------- kanal kartalari (batafsil) ---------- */
.ints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.int {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.int-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.int-head h3 { font-size: 17px; }
.int > p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.int-ab { display: flex; flex-wrap: wrap; gap: 5px; }
.int-note {
  font-size: var(--t-sm); color: var(--ink-dim);
  border-left: 2px solid var(--line); padding-left: 9px; line-height: 1.45;
}

/* ---------- tariflar ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 16px; margin-top: 26px; }
.plan {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: 20px;
  display: flex; flex-direction: column; gap: 11px;
}
/* Tavsiya etilgan tarif (dizayn auditi D6). Ilgari faqat 1px chegara —
   to'q fonda boshqa kartalardan deyarli farq qilmasdi. Endi: urg'u
   chegarasi, tepada urg'u chizig'i va yengil urg'u foni. Nur (neon)
   ATAYLAB yo'q — u faqat hero va yakuniy CTA da (D2). */
.plan-on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), inset 0 3px 0 var(--accent);
  background: linear-gradient(180deg, var(--accent-soft), var(--surface) 55%);
}
.plan-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-head h3 { font-size: 18px; }
.plan-price { display: flex; align-items: baseline; gap: 5px; }
.plan-price b { font-family: var(--f-display); font-size: 30px; letter-spacing: -.03em; }
.plan-price span { font-size: 13px; color: var(--ink-dim); }
.plan-year { font-size: var(--t-sm); color: var(--ink-dim); }
.plan-desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.plan-list li {
  font-size: 13px; color: var(--ink-soft);
  display: flex; justify-content: space-between; gap: 10px;
  padding-bottom: 6px; border-bottom: 1px dashed var(--line);
}
.plan-list li:last-child { border-bottom: 0; }
/* Mono emas (dizayn auditi B5): Plex Mono faqat 400/500 yuklanadi va
   qalin «cheksiz» soxta qalin bo'lib chiqardi; raqam ham emas, so'z. */
.plan-list b { color: var(--ink); font-family: var(--f-body); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
/* «Hamma tarifda» — kartadan TASHQARIDAGI ro'yxat: bitta ustun emas,
   ekran kengligiga qarab bir necha ustun. Kartadagi `space-between`
   bu yerda kerak emas (qiymati yo'q, faqat nom). */
.plan-list-wide {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 6px 22px;
  /* Sarlavhaga yopishib turardi (D6). */
  margin-top: var(--s-6);
}
.plan-list-wide li { justify-content: flex-start; }
.plan .btn { margin-top: auto; justify-content: center; }

/* ---------- oddiy band ro'yxati ----------
   V3 da umumiy `ul` uslubi yo'q (reset ham yo'q), shuning uchun
   o'qiladigan ro'yxat kerak bo'lgan joylar uchun bitta sinf. */
.pts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pts li {
  position: relative; padding-left: 17px;
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.55;
}
.pts li::before {
  content: ""; position: absolute; left: 3px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

/* ---------- xizmat holati jadvali ----------
   `data-table` oxirgi ustunni monoshrift qilib o'ngga tekislaydi (u
   raqamlar uchun mo'ljallangan). Bu yerda oxirgi ustunda nishon turadi,
   shuning uchun qaytariladi. */
.status-table th, .status-table td { padding: 10px 14px; }
.status-table td:last-child, .status-table th:last-child {
  text-align: left; font-family: var(--f-body);
}

/* ---------- xavfsizlik ---------- */
.secs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.sec-item {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 7px;
}
.sec-item h3 { font-size: 16px; }
.sec-item p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }

/* ---------- bog'lanish ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 26px; margin-top: 26px; align-items: start; }
.form-card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: 22px 24px;
  display: flex; flex-direction: column; gap: 13px;
}

@media (max-width: 900px) {
  .feat-item, .ints, .secs, .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- batafsil sahifalar ---------- */
.crumbs { display: flex; align-items: center; gap: 7px; font-size: var(--t-sm); color: var(--ink-dim); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 24px; align-items: start; margin-top: 26px; }
.detail-side {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 9px;
  position: sticky; top: 76px;
}
.detail-metric { display: flex; flex-direction: column; gap: 2px; }
.detail-metric b { font-family: var(--f-display); font-size: 26px; letter-spacing: -.02em; }
.detail-side .btn { justify-content: center; }
.more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.more a {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: 15px 17px;
  text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; gap: 5px;
}
.more a:hover { border-color: var(--line-strong); }
.more b { font-size: 14.5px; }
.more span { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }

@media (max-width: 900px) {
  .detail { grid-template-columns: minmax(0, 1fr); }
  .detail-side { position: static; }
  .more { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- kirish / ro'yxatdan o'tish ----------
   Chapda nima uchun kerakligi, o'ngda forma. Telefonda faqat forma
   qoladi — u yerda "sotish" emas, ishni tugatish kerak. */
.auth {
  /* Tepa chiziq (~57px) bilan birga bitta ekranga sig'sin. */
  min-height: calc(100svh - 57px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  padding-block: 40px;
}
.auth-aside { display: flex; flex-direction: column; gap: 14px; }
.auth-claim {
  font-family: var(--f-display);
  font-size: clamp(28px, 4vw, 38px); font-weight: 700;
  line-height: 1.12; letter-spacing: -.03em; max-width: 15ch; margin: 0;
}
.auth-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  padding: clamp(22px, 3vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-card h1 { font-size: 20px; }
.auth-card .field { gap: 5px; }
.auth-card .btn { justify-content: center; }
.auth-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.auth-note { font-size: var(--t-sm); color: var(--ink-dim); line-height: 1.5; }
.auth-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; max-width: 34rem; }
.auth-fact {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding: 11px 13px;
}
.auth-fact span { font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.auth-fact b { display: block; font-size: 14px; margin-top: 2px; }

@media (max-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 24px; }
  /* Telefonda asosiy taklif qoladi (dizayn auditi D7) — ilgari butun
     ustun yashirilib, mijoz formadan boshqa hech narsa ko'rmasdi.
     Faktlar va izoh yashiriladi (forma ekranning tepasida qolsin). */
  .auth-aside { gap: 0; }
  .auth-aside .lead, .auth-facts { display: none; }
  .auth-claim { font-size: 22px; max-width: none; }
}

/* ---------- blog ----------
   Maqola matni `connections/blog.py` dagi kichik Markdown chizg'ichidan
   keladi. U V2 sinflarini yozadi (`sx-link`, `sx-list`, `sx-panel`) —
   V3 da bu sinflar yo'q, shuning uchun bu yerda hamma narsa ELEMENT
   bo'yicha uslublanadi. Chizg'ichni o'zgartirmadik: u V2 blogini ham
   ishlatadi va u hali o'chirilmagan. */
.posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.post-card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 7px;
  text-decoration: none; color: inherit;
}
.post-card:hover { border-color: var(--line-strong); }
.post-card h2 { font-size: 17px; }
.post-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; }
.post-when { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-dim); }
.post-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }

.prose { max-width: 68ch; margin-top: 22px; }
.prose h2 { font-size: 20px; margin: 26px 0 8px; }
.prose h3 { font-size: 17px; margin: 20px 0 6px; }
.prose p { margin: 0 0 12px; color: var(--ink-soft); line-height: 1.65; }
.prose ul { margin: 0 0 14px; padding-left: 20px; }
.prose li { color: var(--ink-soft); line-height: 1.6; margin-bottom: 5px; }
.prose strong, .prose b { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-line); }
.prose a:hover { border-bottom-color: var(--accent); }
.prose code {
  font-family: var(--f-mono); font-size: 12.5px;
  background: var(--surface-sunk); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 1px 5px;
}
.prose pre {
  background: var(--surface-sunk); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px 16px;
  font-family: var(--f-mono); font-size: 12.5px; overflow-x: auto;
}
.prose pre code { background: none; border: 0; padding: 0; }

@media (max-width: 900px) {
  .posts { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- huquqiy hujjatlar ----------
   Matn `templates/privacy_policy.html` va qardoshlarida turadi va u
   ATAYLAB tegilmadi — huquqiy matnni ko'chirishda bitta band tushib
   qolishi mumkin. Ular `.section`, `.hero-text`, `.hero-note`
   sinflarini ishlatadi, shuning uchun ular shu yerda uslublanadi.
   Qolgan hammasi `.prose` dan keladi (element bo'yicha). */
.legal { max-width: 74ch; }
.legal .section { display: block; margin-top: 26px; }
.legal .hero-text { font-size: 16px; color: var(--ink-soft); line-height: 1.7; margin: 0; }
.legal .hero-note {
  margin-top: 12px; padding: 13px 15px; border-radius: var(--r-md);
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  font-size: 14px; color: var(--ink-soft); line-height: 1.6;
}
.legal li { margin-bottom: 7px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.legal th, .legal td {
  padding: 8px 10px; border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top;
}
.legal th { color: var(--ink-dim); font-weight: 600; width: 13rem; }

/* Telefonda 13rem + qiymat ustuni 375px ga sig'maydi (ruscha matnda
   392px o'lchandi). Shu kenglikda jadval qator-qator ko'rinadi:
   sarlavha ustida, qiymat ostida. */
@media (max-width: 560px) {
  .legal table, .legal tbody, .legal tr, .legal th, .legal td { display: block; width: auto; }
  .legal tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .legal th, .legal td { border-bottom: 0; padding: 2px 0; }
  .legal th { width: auto; font-size: var(--t-xs); letter-spacing: .04em; }
}
.legal-nav { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }

/* =====================================================================
   TO'Q OMMAVIY USLUB (2026-10-03) — referens: latana.com.
   Ranglar O'ZIMIZNIKI (tokens.css `data-sayt="ommaviy"` bloki), shrift
   Mulish. Bu fayl faqat ommaviy sahifalarda yuklanadi, shuning uchun
   umumiy sinflar (`.btn`, `h1`) shu yerda qayta yozilsa ilova ichiga
   tegmaydi. Nur — faqat `color-mix` + tokenlar (3.15, hex yo'q).
   ===================================================================== */
body { background: var(--paper); }
h1, h2, h3 { font-weight: 800; letter-spacing: -.025em; }
.btn { border-radius: var(--r-pill); }
.btn-lg { padding: 13px 24px; font-size: 15px; }
.btn-primary { box-shadow: none; }
/* Nur (dizayn auditi D2) faqat hero va yakuniy chaqiriqdagi asosiy
   tugmada — besh joyda bo'lganda u urg'u kuchini yo'qotgan edi. */
.hero-cta .btn-primary { box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--nur-1) 70%, transparent); }
.hero-cta .btn-primary:active { box-shadow: none; }
.btn-shaffof { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-shaffof:hover { background: var(--surface-hover); border-color: var(--accent-line); }

/* Belgi — `app.css` ommaviy sahifada yuklanmaydi, shuning uchun shu yerda */
.brand-mark {
  width: 26px; height: 26px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--nur-1), var(--nur-2));
  color: var(--on-accent);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800;
}
.pub-brand { font-weight: 800; font-size: 18px; color: var(--ink); }
.pub-head { background: color-mix(in srgb, var(--paper) 78%, transparent); backdrop-filter: blur(12px); }
.pub-head .wrap { padding: 14px 0; }
.pub-nav a { border-radius: var(--r-pill); font-weight: 600; }
.pub-nav a.is-on { color: var(--accent); }

.sec h1, .sec h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.12; }
/* Kartochka va maqola ichidagi `h2` bo'lim sarlavhasi emas — yuqoridagi
   kattalik ularga tushib, blog kartasida sarlavha 38px bo'lardi. */
.sec .post-card h2 { font-size: 19px; line-height: 1.25; }
.sec .prose h2 { font-size: 22px; line-height: 1.25; }
.lead { color: var(--ink-soft); }
.frame { box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--nur-1) 45%, transparent); }

/* ---------- ochilish: chapda matn, o'ngda mahsulot ---------- */
.hero-nur {
  position: relative;
  padding: 76px 0 70px;
  background:
    radial-gradient(48% 62% at 82% 38%, color-mix(in srgb, var(--nur-2) 50%, transparent), transparent 72%),
    radial-gradient(36% 50% at 0% 100%, color-mix(in srgb, var(--nur-1) 12%, transparent), transparent 70%);
}
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.hero-matn { display: flex; flex-direction: column; gap: 20px; }
.hero-matn h1 {
  /* D1: 15ch da sarlavha 4 qator (ruscha 375 da 5) edi. */
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.06;
  letter-spacing: -.035em;
  max-width: 21ch;
}
.hero-matn .lead { font-size: 18px; }
.eyebrow-pill {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  color: var(--accent); font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
}
.eyebrow-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.hero-sahna { position: relative; isolation: isolate; min-width: 0; }
.hero-sahna::before {
  content: ""; position: absolute; inset: 8% -4% -6% 6%; z-index: -1;
  border-radius: var(--r-xl);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--nur-1) 34%, transparent), transparent);
  filter: blur(36px);
}
/* Sahna ustuni ilovadagi ish stolidan tor: to'rt ustunda «REJALASHTIRILGAN»
   so'z ichidan bo'linardi (1280 da o'lchandi) — bu yerda 2×2. */
.hero-sahna .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-sahna .sum-cell:nth-child(2n) { border-right: 0; }
.hero-sahna .sum-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

/* ---------- kanallar qatori ---------- */
.kanal-qator {
  border-block: 1px solid var(--line);
  padding: 36px 0 32px;
  text-align: center;
  background: color-mix(in srgb, var(--surface-sunk) 70%, transparent);
}
.kanal-qator .wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.kanal-sarlavha {
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-dim);
}
.kanal-royxat { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; }
.kanal-royxat a {
  display: inline-flex; align-items: baseline; gap: 9px;
  font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none;
}
.kanal-royxat a:hover { color: var(--accent); }
.kanal-royxat .dot { width: 10px; height: 10px; align-self: center; }
.kanal-royxat small { font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--ink-dim); }
.kanal-izoh { font-size: 13.5px; color: var(--ink-dim); max-width: 62ch; }

/* ---------- orbita + uch qadam ----------
   Orbita — bezak (`aria-hidden`), ma'nosi o'ngdagi ro'yxatda takrorlanadi. */
.orbita-blok {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.orbita {
  position: relative;
  width: 100%; max-width: 480px; aspect-ratio: 1;
  margin-inline: auto;
  display: grid; place-items: center;
}
.orbita-halqa { position: absolute; border-radius: 50%; pointer-events: none; }
.orbita-halqa-1 { inset: 0; border: 1px dashed var(--line-strong); }
.orbita-halqa-2 {
  inset: 15%;
  border: 1px solid var(--accent-line);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--nur-2) 45%, transparent), transparent);
}
.orbita-markaz { position: relative; z-index: 1; width: 64%; }
.orbita-belgi {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line-strong);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  box-shadow: var(--shadow-md);
}
.orbita-belgi-1 { top: 4%; left: 2%; }
.orbita-belgi-2 { top: 13%; right: 0; }
.orbita-belgi-3 { bottom: 9%; left: 0; }
.orbita-belgi-4 { bottom: 2%; right: 14%; }
.orbita-belgi-5 { top: 47%; right: -2%; }
.orbita-belgi-1, .orbita-belgi-2, .orbita-belgi-3 { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .orbita-halqa-1 { animation: orbita-aylan 90s linear infinite; }
}
@keyframes orbita-aylan { to { transform: rotate(360deg); } }

.qadamlar { display: flex; flex-direction: column; gap: 12px; }
.qadamlar .lead { margin-bottom: 8px; }
.qadam {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--dur-pop) var(--ease), background-color var(--dur-pop) var(--ease);
}
.qadam[open] {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
}
.qadam summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 13px;
  padding: 16px 18px; font-size: 16px; font-weight: 700;
}
.qadam summary::-webkit-details-marker { display: none; }
.qadam summary::after {
  content: "+"; margin-left: auto; font-size: 20px; font-weight: 500;
  color: var(--ink-dim); line-height: 1;
}
.qadam[open] summary::after { content: "\2212"; color: var(--accent); }
.qadam summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-lg); }
.qadam p { padding: 0 18px 18px 59px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.qadam-raqam {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--accent-line); color: var(--accent);
  font-family: var(--f-mono); font-size: 13px;
}

/* ---------- ikonali kartochkalar ---------- */
.ikon-kartalar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.ikon-karta {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: 26px 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color var(--dur) var(--ease);
}
/* Karta HAVOLA emas — ko'tarilish «bosish mumkin» degan yolg'on ishora
   edi (dizayn auditi B9). Faqat chegara rangi, faqat sichqonchada. */
@media (hover: hover) and (pointer: fine) {
  .ikon-karta:hover { border-color: var(--accent-line); }
}
.ikon-karta h3 { font-size: 18px; }
.ikon-karta p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.ikon {
  width: 46px; height: 46px; border-radius: var(--r-lg);
  display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
}
.ikon svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- bento (dizayn auditi D3) ----------
   Uchta teng karta o'rniga: katta karta (taqvimning O'ZI) va ikki
   kichik. Kartalar havola emas — ko'tarilish yo'q (B9). */
.bento {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 20px; margin-top: 32px;
}
.bento-katta { grid-row: span 2; }
/* Taqvim kartaning bo'sh qolgan balandligini to'ldiradi (karta ikki
   qator baland). Vaqt alohida qatorda — tor ustunda sarlavha so'z
   o'rtasidan bo'linardi («H aftalik»). */
.bento-taqvim { margin-top: 8px; font-size: var(--t-xs); flex: 1; display: flex; flex-direction: column; }
.bento-taqvim .cal-week { flex: 1; }
/* Ilovadagi `.cal` yetti ustunli; bu yerda ish haftasi — besh. */
.bento-taqvim .cal-head, .bento-taqvim .cal-week { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bento-taqvim .cal-day { min-height: 128px; padding: 6px; }
.bento-taqvim .cal-date { align-self: flex-start; }
.bento-taqvim .cal-ev { font-size: 11.5px; }
.bento-taqvim .cal-ev time { display: block; }
/* Uzun so'z (ruscha «коллекция») tor ustunga sig'masa bo'linadi —
   kesilib qolmaydi. */
.bento-taqvim .cal-ev-ichi { -webkit-line-clamp: 4; line-clamp: 4; overflow-wrap: break-word; }
.bento-takror { color: var(--accent); font-weight: 700; }
.bento-izoh { font-size: 13px; color: var(--ink-dim); }
.bento-izoh span { color: var(--accent); font-weight: 700; }
.bento-jurnal {
  list-style: none; margin: auto 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 7px;
  font-size: 13px; color: var(--ink-soft);
}
.bento-jurnal li { display: flex; gap: 8px; align-items: baseline; }
.bento-jurnal time { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-dim); }
.bento-jurnal b { color: var(--ink); }
/* Ustunlar — bezak (`aria-hidden`), raqam ATAYLAB yo'q: marketing
   raqami koddan sanaladigan fakt bo'lishi kerak (3.123). */
.bento-ustun {
  margin-top: auto; padding-top: 12px; height: 92px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; align-items: end;
}
.bento-ustun span {
  position: relative; border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nur-1) 70%, transparent), color-mix(in srgb, var(--nur-2) 40%, transparent));
}
.bento-ustun .dot { position: absolute; top: -12px; left: 50%; translate: -50% 0; }
.bento-ustun-1 { height: 78%; }
.bento-ustun-2 { height: 100%; }
.bento-ustun-3 { height: 44%; }
.bento-ustun-4 { height: 62%; }

/* ---------- ichki sahifa boshi (dizayn auditi D5) ----------
   Ichki sahifalar (imkoniyatlar, tariflar, …) bosh sahifadan keyin
   «eski uslubda» ko'rinardi: nur yo'q, oddiy eyebrow. Har ichki
   sahifaning BIRINCHI bo'limi ortida o'sha nur — shablonlarga
   tegilmaydi, bitta qoida. `100vw` aylantirish chizig'i bilan
   kengroq — `overflow-x: clip` gorizontal aylantirishni to'sadi. */
.pub-main { overflow-x: clip; }
.pub-main > section.sec:first-of-type { position: relative; isolation: isolate; }
.pub-main > section.sec:first-of-type::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; left: 50%; width: 100vw; translate: -50% 0;
  height: min(460px, 100%);
  background:
    radial-gradient(42% 75% at 80% 0%, color-mix(in srgb, var(--nur-2) 46%, transparent), transparent 72%),
    radial-gradient(30% 55% at 6% 0%, color-mix(in srgb, var(--nur-1) 10%, transparent), transparent 70%);
}
.sec-head .eyebrow {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  color: var(--accent); font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  text-transform: none;
}
.sec-head .eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* ---------- kim uchun / ishonch ---------- */
.karta-nur {
  padding: 28px;
  background:
    radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, var(--nur-2) 32%, transparent), transparent 62%),
    var(--surface);
}
.karta-nur h3 { font-size: 20px; }
.karta-nur .link { margin-top: auto; align-self: flex-start; }
.fact { border-top: 1px solid var(--accent-line); padding-top: 14px; }
.fact-key { font-weight: 800; color: var(--accent); }

/* ---------- yakuniy nurli chaqiriq ---------- */
.cta-nur {
  margin-top: 40px;
  padding: 92px 0 96px;
  border-top: 1px solid var(--line);
  text-align: center;
  background:
    radial-gradient(55% 90% at 50% 100%, color-mix(in srgb, var(--nur-1) 38%, transparent), transparent 72%),
    linear-gradient(180deg, var(--paper), color-mix(in srgb, var(--nur-2) 30%, var(--paper)));
}
.cta-nur-ichi { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cta-nur h2 { font-size: clamp(30px, 4.6vw, 54px); line-height: 1.06; letter-spacing: -.035em; }
.cta-nur p { font-size: 17px; line-height: 1.55; color: var(--ink-soft); max-width: 52ch; }
.cta-nur .hero-cta { justify-content: center; }
/* Bosh sahifa nurli blok bilan tugaydi — poydevor oralig'i qo'shilmaydi */
.pub-main:has(> .cta-nur:last-child) + .pub-foot { margin-top: 0; }

/* ---------- poydevor ---------- */
.pub-foot { background: var(--paper); }
.foot-title { color: var(--ink); letter-spacing: .1em; }

/* ---------- kirish sahifalari ---------- */
.auth-claim { font-weight: 800; }
.auth-card { box-shadow: var(--shadow-pop); }

@media (max-width: 900px) {
  .hero-split, .orbita-blok, .ikon-kartalar, .bento { grid-template-columns: minmax(0, 1fr); }
  .bento-katta { grid-row: auto; }
  .hero-nur { padding: 44px 0 48px; }
  .hero-matn h1 { max-width: none; }
  .orbita { max-width: 400px; }
  .kanal-royxat { gap: 12px 26px; }
  .kanal-royxat a { font-size: 19px; }
  .cta-nur { padding: 64px 0 68px; }
}
@media (max-width: 560px) {
  /* Namuna qatordagi tugma bosilmaydi (`span`); telefonda u alohida
     qatorga tushib, chap chetga yopishib qolardi (375 ru da o'lchandi). */
  .hero-sahna .row-act { display: none; }
}
@media (max-width: 480px) {
  .orbita-belgi { font-size: 11px; padding: 5px 10px; }
  .orbita-belgi-4, .orbita-belgi-5 { display: none; }
  .orbita-markaz { width: 72%; }
  .qadam p { padding-left: 18px; }
  /* Telefonda besh ustun o'qilmaydi — uch kun (bugun o'rtada). */
  .bento-taqvim .cal-head, .bento-taqvim .cal-week { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bento-taqvim .cal-head span:nth-child(n+4), .bento-taqvim .cal-day:nth-child(n+4) { display: none; }
  .bento-taqvim .cal-head span:nth-child(3), .bento-taqvim .cal-day:nth-child(3) { border-right: 0; }
  .hero-matn .lead, .cta-nur p { font-size: 16px; }
}

/* ---------- harakat (dizayn auditi D8) ----------
   Sof CSS, JS siz (3.5). Qo'llamaydigan brauzerda hammasi statik va
   ko'rinib turadi — hech narsa yashirin boshlanmaydi. Ish asbobida
   (ilova ichida) bunday harakat YO'Q — kuniga o'nlab marta takrorlanadi
   (DIZAYN-TAKLIF «G»). */
@keyframes kotarilish {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sec-head, .bento > *, .two > *, .facts, .orbita-blok, .feat-item,
    .plans > .plan, .ints > *, .secs > *, .cta-nur-ichi, .kanal-qator .wrap {
      animation: kotarilish linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
  /* Ochiluvchi qadam silliq ochiladi (qo'llamasa — bir zumda). */
  .qadamlar { interpolate-size: allow-keywords; }
  .qadam::details-content {
    height: 0; overflow: clip;
    transition: height var(--dur-pop) var(--ease-out), content-visibility var(--dur-pop) allow-discrete;
  }
  .qadam[open]::details-content { height: auto; }
}
/* Ochiq qadam orbitadagi o'z belgisini yoritadi (`:has()`). */
.orbita-belgi { transition: background-color var(--dur-pop) var(--ease), color var(--dur-pop) var(--ease), border-color var(--dur-pop) var(--ease); }
.orbita-blok:has(.qadam:nth-of-type(1)[open]) .orbita-belgi-1,
.orbita-blok:has(.qadam:nth-of-type(2)[open]) .orbita-belgi-2,
.orbita-blok:has(.qadam:nth-of-type(3)[open]) .orbita-belgi-3 {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}