/* ═══════════════════════════════════════════════════════════════════════
   hb-public.css — BARCHA ommaviy (tashqi tashrifchi ko'radigan) sahifalar
   uchun UMUMIY tahririy primitivlar.

   Nega alohida: 2026-08-10 da yangiliklar (`hbn-`) va vakansiyalar (`hbj-`)
   uchun bir xil "wrap / masthead / eyebrow / meta / footer" qoidalari IKKI
   marta yozilgan edi. Yana to'rt sahifa qo'shilayotgani uchun ular shu yerga
   `hbp-` prefiksi bilan bir marta ko'chirildi. Sahifaga XOS bloklar
   (blogning karta to'ri, vakansiyaning qatorlari) o'z fayllarida qoladi.

   Tokenlar hb-tokens.css dan — yorug'/qorong'i tema avtomatik.
   ═══════════════════════════════════════════════════════════════════════ */

.hbp-root{
  --hbp-ink: var(--hb-txt);
  --hbp-mut: var(--hb-mut);
  /* [2026-08-16, ommaviy sayt qayta dizayni — TZ frontend-design]
     Mebel City mebel ISHLAB CHIQARUVCHI kompaniya — oldingi palitra
     (--hb-bg/--hb-brd'ning aynan o'zi) ilova qobig'idagi sovuq-neytral
     kulrang edi, ya'ni marketing sayti ichki HR-vositasi bilan bir xil
     "texnik" ko'rinishda edi. Endi qog'oz/chiziq tokenlari `color-mix`
     orqali yengil "yog'och" (issiq jigarrang, #8A5A2E) tomon siljitilgan —
     light/dark ikkalasi ham --hb-bg/--hb-brd'dan meros oladi, shu sabab
     tema almashinuvi AVTOMATIK ishlayveradi, alohida dark-mode qoidasi
     kerak emas. Urg'u rangi (--hbp-acc) ATAYLAB teal'ligicha qoladi: bu
     "Tizimga kirish" tugmasi orqali kirilgan HAQIQIY mahsulotning brendi,
     marketing sayti undan uzilib qolsa ikkisi ikki xil kompaniyaga
     o'xshab qolardi. */
  --hbp-line: color-mix(in srgb, var(--hb-brd) 92%, #8A5A2E 8%);
  --hbp-acc: var(--hb-acc, #24C29A);
  --hbp-paper: color-mix(in srgb, var(--hb-bg) 95%, #8A5A2E 5%);
  --hbp-paper-2: color-mix(in srgb, var(--hb-bg2) 90%, #8A5A2E 10%);
  --hbp-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --hbp-mono: 'JetBrains Mono', ui-monospace, monospace;
  --hbp-wrap: 1240px;

  /* `.hb-content` ning paddingi (16px 24px 32px) bekor qilinadi — ommaviy
     sahifa chetdan chetgacha bo'ladi, ichki bloklar o'z `.hbp-wrap`i bilan
     markazlashadi. */
  display:block; margin:-16px -24px -32px;
  background:var(--hbp-paper); color:var(--hbp-ink);
  font-family:'Inter', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.hbp-wrap{ max-width:var(--hbp-wrap); margin:0 auto; padding:0 clamp(16px,4vw,40px) }
.hbp-narrow{ max-width:860px }

/* Navigatsiya topbar MARKAZIDA (barcha ommaviy sahifalarda bir xil).
   [2026-08-10] Chegara 760px dan 980px ga ko'tarildi: 7-punkt
   ("Biz haqimizda") qo'shilgach, ~860px da markazlashtirilgan navbar
   o'ngdagi tema/til/qo'ng'iroq tugmalariga TEGIB qolardi (mutlaq
   joylashuv oqimdan chiqadi va joy talab qilmaydi). 980px dan pastda
   nav oddiy oqimda chapda turadi — spacer tugmalarni o'ngga suradi va
   ustma-ust tushish bo'lmaydi. */
body.hbp-public .hb-topbar{ position:relative }
@media (min-width:980px){
  body.hbp-public .hb-topbar .hbpn-links{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  }
}

/* ── Mayda qismlar ── */
/* Kichik "+" registratsiya belgisi — texnik chizma/kesish varag'idagi
   burchak belgisiga ishora (naqsh: .hbp-section pastda). `::before` matn
   ichida emas, shuning uchun i18n skripti (data-hb-i18n, textContent'ni
   almashtiradi) unga tegmaydi. */
.hbp-eyebrow{
  font-family:var(--hbp-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--hbp-acc); font-weight:500;
}
.hbp-eyebrow::before{ content:'+'; margin-right:.6em; opacity:.55 }
.hbp-meta{
  font-family:var(--hbp-mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--hbp-mut); display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.hbp-meta .dot{ opacity:.5 }

/* ── Masthead ── */
.hbp-masthead{ padding:clamp(44px,7vw,86px) 0 clamp(20px,3vw,32px) }
.hbp-masthead h1{
  font-family:var(--hbp-serif); font-weight:500;
  font-size:clamp(40px,8vw,92px); line-height:.95; letter-spacing:-.035em;
  margin:14px 0 0; color:var(--hbp-ink);
}
.hbp-sub{ margin-top:18px; max-width:54ch; font-size:clamp(15px,1.6vw,17.5px);
  line-height:1.62; color:var(--hbp-mut) }

/* Statistika qatori — uchlarida "o'lchov chizig'i" belgisi (pastdagi
   .hbp-section izohiga qarang: bitta imzo, bir necha joyda takrorlanadi). */
.hbp-stats{
  position:relative;
  display:flex; gap:clamp(24px,5vw,64px); flex-wrap:wrap;
  margin-top:clamp(28px,4vw,44px); padding:22px 0;
  border-top:1px solid var(--hbp-line); border-bottom:1px solid var(--hbp-line);
}
.hbp-stats::before, .hbp-stats::after{
  content:''; position:absolute; top:-1px; width:1px; height:7px; background:var(--hbp-line);
}
.hbp-stats::before{ left:0 }
.hbp-stats::after{ right:0 }
.hbp-stat-n{ font-family:var(--hbp-serif); font-size:clamp(30px,4vw,44px); line-height:1;
  font-weight:500; letter-spacing:-.02em }
.hbp-stat-l{ font-family:var(--hbp-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--hbp-mut); margin-top:8px }

/* ── Bo'lim sarlavhasi ──
   [2026-08-16] "O'lchov chizig'i" imzosi: har bir katta bo'lim chegara
   chizig'ining ikki uchida kichik tik chiziqcha — Mebel City'ning haqiqiy
   ish jarayonidagi o'lchov/chizma tiliga ishora (services.html: "o'lchov",
   "detallar va furnitura ro'yxati"). Sof bezak emas — sahifa bo'ylab bitta,
   izchil takrorlanadigan strukturaviy belgi (bo'lim boshi, statistik
   qator, footer), boshqa hech qayerda ko'chirilmagan. */
.hbp-section{ position:relative; padding:clamp(50px,7vw,92px) 0; border-top:1px solid var(--hbp-line) }
.hbp-section:first-of-type{ border-top:none }
.hbp-section:not(:first-of-type)::before, .hbp-section:not(:first-of-type)::after{
  content:''; position:absolute; top:-1px; width:1px; height:7px; background:var(--hbp-line);
}
.hbp-section:not(:first-of-type)::before{ left:0 }
.hbp-section:not(:first-of-type)::after{ right:0 }
.hbp-section h2{
  font-family:var(--hbp-serif); font-weight:500; font-size:clamp(26px,3.6vw,46px);
  letter-spacing:-.025em; line-height:1.08; margin:14px 0 0;
}
.hbp-section-lead{ margin:16px 0 0; max-width:56ch; font-size:16px;
  line-height:1.65; color:var(--hbp-mut) }

/* ── Matn (prose) ── */
.hbp-prose{
  max-width:68ch; font-family:var(--hbp-serif); font-size:18.5px; line-height:1.72;
  color:var(--hbp-ink);
}
.hbp-prose > *:first-child{ margin-top:0 }
.hbp-prose p{ margin:0 0 1.2em }
.hbp-prose h2{ font-size:1.5em; line-height:1.2; font-weight:600;
  letter-spacing:-.02em; margin:1.8em 0 .5em }
.hbp-prose h3{ font-size:1.22em; font-weight:600; margin:1.6em 0 .45em }
.hbp-prose ul, .hbp-prose ol{ margin:0 0 1.2em; padding-left:1.3em }
.hbp-prose li{ margin:.35em 0 }
.hbp-prose a{ color:var(--hbp-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--hbp-acc) }
.hbp-prose blockquote{
  margin:1.8em 0; padding:2px 0 2px 24px; border-left:3px solid var(--hbp-acc);
  font-size:1.12em; font-style:italic;
}

/* ── Tugmalar ── */
.hbp-btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; cursor:pointer;
  height:48px; padding:0 26px; border-radius:999px; border:1px solid transparent;
  background:var(--hbp-acc); color:var(--hb-acc-ink,#0B1F19);
  font:inherit; font-size:14.5px; font-weight:700; letter-spacing:-.1px;
  transition:background .2s ease, transform .2s ease;
}
.hbp-btn:hover{ background:var(--hb-acc-d,#1FA884); color:var(--hb-acc-ink,#0B1F19);
  text-decoration:none; transform:translateY(-1px) }
.hbp-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none }
.hbp-btn-ghost{ background:transparent; border-color:var(--hbp-line); color:var(--hbp-ink) }
.hbp-btn-ghost:hover{ background:var(--hbp-paper-2); color:var(--hbp-ink) }

/* ── Bo'sh holat ── */
.hbp-empty{ padding:clamp(60px,10vw,120px) 0; text-align:center }
.hbp-empty-t{ font-family:var(--hbp-serif); font-size:clamp(24px,3vw,34px); margin:14px 0 8px }
.hbp-empty-s{ color:var(--hbp-mut); font-size:14.5px; max-width:48ch; margin:0 auto }

/* ── Footer ──
   [2026-08-16] Avval bitta qator edi (mono brend yorlig'i + 7 havola).
   Endi: chap tomonda haqiqiy wordmark + about.html'dagi HAQIQIY tavsifdan
   qisqartirilgan bitta jumla (o'ylab topilmagan — bor matnning qisqa
   shakli), o'ngda guruhlangan navigatsiya, pastda mualliflik huquqi qatori. */
.hbp-foot{ position:relative; border-top:1px solid var(--hbp-line); background:var(--hbp-paper-2) }
.hbp-foot::before, .hbp-foot::after{
  content:''; position:absolute; top:-1px; width:1px; height:7px; background:var(--hbp-line);
}
.hbp-foot::before{ left:0 }
.hbp-foot::after{ right:0 }
.hbp-foot-in{
  max-width:var(--hbp-wrap); margin:0 auto; padding:clamp(34px,4.5vw,48px) clamp(16px,4vw,40px) 22px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:clamp(24px,4vw,60px); flex-wrap:wrap;
}
.hbp-foot-brand{ max-width:38ch; min-width:0 }
.hbp-foot-name{ font-family:var(--hbp-serif); font-weight:500; font-size:20px; letter-spacing:-.01em; color:var(--hbp-ink) }
.hbp-foot-label{
  font-family:var(--hbp-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--hbp-acc); margin-top:4px;
}
.hbp-foot-tag{ margin:12px 0 0; font-size:13.5px; line-height:1.6; color:var(--hbp-mut) }
.hbp-foot-links{ display:flex; gap:8px 22px; flex-wrap:wrap; max-width:420px }
.hbp-foot-links a{ color:var(--hbp-mut); text-decoration:none; font-size:13px; font-weight:600; transition:color .15s ease }
.hbp-foot-links a:hover{ color:var(--hbp-ink) }
.hbp-foot-bottom{
  max-width:var(--hbp-wrap); margin:0 auto; padding:14px clamp(16px,4vw,40px) 26px;
  font-family:var(--hbp-mono); font-size:10.5px; letter-spacing:.08em; color:var(--hbp-mut); opacity:.75;
}

@media (max-width:600px){
  .hbp-prose{ font-size:17px }
  .hbp-stats{ gap:24px }
  .hbp-foot-in{ flex-direction:column; gap:22px }
}