/* ═══════════════════════════════════════════════════════════════════════
   hb-site.css — to'rtta marketing sahifasiga XOS bloklar:
   Ishlarimiz (3D portfolio), Xizmatlar, Biz haqimizda, Aloqa.

   Umumiy primitivlar (wrap, masthead, eyebrow, prose, tugma, footer)
   hb-public.css da (`hbp-`) — bu yerda faqat shu sahifalarning o'z
   tuzilmalari.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Ishlarimiz: 3D loyihalar to'ri ─────────────────────────────────── */
.hbs-works{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(24px,3.4vw,48px); padding:clamp(30px,4vw,52px) 0;
}
/* `a.hbs-work` — element+klass: hb-components.css dagi umumiy havola rangi
   `color:inherit` dan kuchliroq va sarlavhalarni yashil qilib qo'yardi. */
.hbs-work, a.hbs-work, a.hbs-work:hover{
  display:block; text-decoration:none; color:var(--hbp-ink); min-width:0;
}
a.hbs-work h2{ color:var(--hbp-ink) }
a.hbs-work p, a.hbs-work .hbp-meta{ color:var(--hbp-mut) }
.hbs-work-media{
  position:relative; border-radius:var(--hb-radius,22px); overflow:hidden;
  background:var(--hbp-paper-2); aspect-ratio:16/10;
}
.hbs-work-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
a.hbs-work:hover .hbs-work-media img{ transform:scale(1.04) }
/* Muqovasiz sahna — bo'sh to'rtburchak o'rniga tipografik zaxira */
.hbs-work-ph{
  position:absolute; inset:0; display:grid; place-items:center;
  color:var(--hbp-line); font-family:var(--hbp-serif);
  font-size:clamp(48px,7vw,90px); line-height:1; user-select:none;
}
/* "3D sayr" belgisi — tashrifchi bu oddiy rasm EMASligini darhol bilsin */
.hbs-work-tag{
  position:absolute; left:14px; top:14px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:999px;
  background:color-mix(in srgb, var(--hbp-paper) 82%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-family:var(--hbp-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--hbp-ink);
}
.hbs-work h2{
  font-family:var(--hbp-serif); font-weight:500; font-size:clamp(21px,2.4vw,28px);
  line-height:1.2; letter-spacing:-.015em; margin:16px 0 0;
  background-image:linear-gradient(var(--hbp-acc),var(--hbp-acc));
  background-size:0 1.5px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .45s cubic-bezier(.16,1,.3,1); display:inline;
}
a.hbs-work:hover h2{ background-size:100% 1.5px }
.hbs-work .hbp-meta{ margin-top:12px }

/* ── Xizmatlar / jarayon: raqamlangan bosqichlar ────────────────────── */
.hbs-steps{ display:flex; flex-direction:column; margin-top:clamp(26px,4vw,44px) }
.hbs-step{
  display:grid; grid-template-columns:88px 1fr; gap:clamp(18px,3vw,44px);
  padding:clamp(26px,3.4vw,40px) 0; border-top:1px solid var(--hbp-line);
}
.hbs-step:last-child{ border-bottom:1px solid var(--hbp-line) }
.hbs-step-n{
  font-family:var(--hbp-serif); font-size:clamp(34px,4.6vw,56px); line-height:.9;
  font-weight:500; color:var(--hbp-line); letter-spacing:-.03em;
}
.hbs-step h3{
  font-family:var(--hbp-serif); font-weight:500; font-size:clamp(20px,2.4vw,28px);
  letter-spacing:-.015em; margin:0 0 10px;
}
.hbs-step p{ margin:0; font-size:15.5px; line-height:1.68; color:var(--hbp-mut); max-width:60ch }
.hbs-step ul{ margin:12px 0 0; padding-left:1.2em; color:var(--hbp-mut);
  font-size:14.5px; line-height:1.7; max-width:60ch }

/* ── Uch ustunli xususiyatlar ───────────────────────────────────────── */
.hbs-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,44px);
  margin-top:clamp(26px,4vw,44px) }
.hbs-col h3{ font-family:var(--hbp-serif); font-weight:500; font-size:21px;
  margin:12px 0 8px; letter-spacing:-.01em }
.hbs-col p{ margin:0; font-size:14.5px; line-height:1.65; color:var(--hbp-mut) }
.hbs-col-n{ font-family:var(--hbp-mono); font-size:11px; letter-spacing:.16em;
  color:var(--hbp-acc) }

/* ── Aloqa ──────────────────────────────────────────────────────────── */
.hbs-contact{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(30px,5vw,72px); padding:clamp(20px,3vw,36px) 0 clamp(50px,7vw,90px);
  align-items:start;
}
.hbs-contact-info{ display:flex; flex-direction:column; gap:clamp(20px,2.6vw,30px) }
.hbs-cline{ padding-bottom:18px; border-bottom:1px solid var(--hbp-line) }
.hbs-cline-l{ font-family:var(--hbp-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--hbp-mut); margin-bottom:8px }
.hbs-cline-v{ font-family:var(--hbp-serif); font-size:clamp(19px,2.2vw,25px);
  letter-spacing:-.015em; line-height:1.3 }
.hbs-cline-v a{ color:var(--hbp-ink); text-decoration:none }
.hbs-cline-v a:hover{ color:var(--hbp-acc) }

.hbs-form{
  border:1px solid var(--hbp-line); border-radius:var(--hb-radius,22px);
  padding:clamp(22px,3vw,34px); background:var(--hb-sfc);
}
.hbs-field{ margin-bottom:16px }
.hbs-field label{ display:block; font-size:12.5px; font-weight:700;
  color:var(--hbp-ink); margin-bottom:7px }
.hbs-field input, .hbs-field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--hbp-line);
  border-radius:12px; background:var(--hbp-paper); color:var(--hbp-ink);
  font:inherit; font-size:14.5px; outline:none; transition:border-color .18s ease;
}
.hbs-field textarea{ min-height:118px; resize:vertical }
.hbs-field input:focus, .hbs-field textarea:focus{ border-color:var(--hbp-acc) }
.hbs-msg{ display:none; padding:12px 15px; border-radius:12px; font-size:13.5px;
  font-weight:600; margin-bottom:16px; border:1px solid transparent }
.hbs-msg.ok{ display:block; border-color:var(--hb-ok); color:var(--hb-acc-text) }
.hbs-msg.err{ display:block; border-color:var(--hb-danger); color:var(--hb-danger) }
.hbs-done{ text-align:center; padding:26px 0 }
.hbs-done-t{ font-family:var(--hbp-serif); font-size:clamp(23px,2.8vw,30px); margin:14px 0 8px }
.hbs-done-s{ color:var(--hbp-mut); font-size:14.5px }

/* ── Yo'nalishlar (Biz haqimizda) ───────────────────────────────────── */
.hbs-units{ display:flex; flex-direction:column; margin-top:clamp(24px,3vw,40px) }
.hbs-unit{
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:baseline;
  padding:clamp(22px,3vw,32px) 0; border-top:1px solid var(--hbp-line);
}
.hbs-unit:last-child{ border-bottom:1px solid var(--hbp-line) }
.hbs-unit h3{ font-family:var(--hbp-serif); font-weight:500;
  font-size:clamp(22px,2.8vw,32px); letter-spacing:-.02em; margin:0 }
.hbs-unit p{ margin:10px 0 0; font-size:15px; line-height:1.65;
  color:var(--hbp-mut); max-width:62ch }
.hbs-unit-n{ font-family:var(--hbp-mono); font-size:12px; letter-spacing:.1em;
  color:var(--hbp-mut); white-space:nowrap }

/* ── CTA tasmasi ────────────────────────────────────────────────────── */
.hbs-cta{
  display:flex; align-items:center; justify-content:space-between; gap:26px;
  flex-wrap:wrap; padding:clamp(34px,4.5vw,56px) clamp(24px,3.4vw,48px);
  margin:clamp(40px,6vw,80px) 0 clamp(50px,7vw,90px);
  border-radius:var(--hb-radius,22px); background:var(--hbp-paper-2);
}
.hbs-cta h2{ font-family:var(--hbp-serif); font-weight:500;
  font-size:clamp(24px,3vw,36px); letter-spacing:-.02em; margin:0; max-width:22ch }
.hbs-cta p{ margin:10px 0 0; color:var(--hbp-mut); font-size:15px; max-width:44ch }

@media (max-width:900px){
  .hbs-works{ grid-template-columns:1fr }
  .hbs-cols{ grid-template-columns:1fr; gap:26px }
  .hbs-contact{ grid-template-columns:1fr }
}
@media (max-width:600px){
  .hbs-step{ grid-template-columns:1fr; gap:10px }
  .hbs-step-n{ font-size:30px }
  .hbs-unit{ grid-template-columns:1fr }
}

/* ── Nizom va qoidalar ──────────────────────────────────────────────── */
/* Import qilingan hujjat matni (SiteDocument.body) */
.hbs-doc h3{ font-family:var(--hbp-serif); font-weight:600; font-size:1.2em;
  margin:1.6em 0 .5em; letter-spacing:-.015em }
.hbs-doc .lead{ font-size:1.15em; line-height:1.5 }
.hbs-doc ul{ margin:0 0 1.2em; padding-left:1.25em }
.hbs-doc li{ margin:.45em 0 }

/* Qoida qatorlari — raqam | matn | jazо/ball */
.hbs-rules{ display:flex; flex-direction:column; margin-top:clamp(26px,4vw,42px) }
.hbs-rule{
  display:grid; grid-template-columns:64px minmax(0,1fr) 190px; gap:clamp(14px,2.4vw,32px);
  padding:clamp(20px,2.6vw,28px) 0; border-top:1px solid var(--hbp-line);
  align-items:start;
}
.hbs-rule:last-child{ border-bottom:1px solid var(--hbp-line) }
.hbs-rule-n{
  font-family:var(--hbp-serif); font-size:clamp(26px,3.2vw,38px); line-height:1;
  font-weight:500; color:var(--hbp-line); letter-spacing:-.03em;
}
.hbs-rule-pos .hbs-rule-n{ color:color-mix(in srgb, var(--hbp-acc) 45%, transparent) }
.hbs-rule h3{
  font-family:var(--hbp-serif); font-weight:500; font-size:clamp(18px,2.1vw,24px);
  letter-spacing:-.015em; margin:0 0 8px; line-height:1.25;
}
.hbs-rule p{ margin:0; font-size:15px; line-height:1.68; color:var(--hbp-mut) }
.hbs-rule-side{ text-align:right; display:flex; flex-direction:column; gap:8px; align-items:flex-end }
.hbs-rule-amt{
  font-family:var(--hbp-serif); font-size:clamp(18px,2vw,23px); line-height:1.1;
  font-weight:500; letter-spacing:-.02em; white-space:nowrap;
}
.hbs-rule-amt span{ font-family:var(--hbp-mono); font-size:11px; letter-spacing:.08em;
  color:var(--hbp-mut); text-transform:uppercase }
.hbs-rule-amt-txt{ font-size:16px; color:var(--hb-danger,#DC5B5B); white-space:normal }
.hbs-rule-score{
  display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:999px;
  font-family:var(--hbp-mono); font-size:11px; letter-spacing:.06em; white-space:nowrap;
}
.hbs-rule-score span{ text-transform:uppercase; opacity:.75 }
.hbs-neg{ background:color-mix(in srgb, var(--hb-danger,#DC5B5B) 14%, transparent);
  color:var(--hb-danger,#DC5B5B) }
.hbs-pos{ background:color-mix(in srgb, var(--hbp-acc) 16%, transparent);
  color:var(--hb-acc-text, var(--hbp-acc)) }

/* Ball zinapoyasi */
.hbs-tiers{ display:flex; flex-direction:column; margin-top:clamp(22px,3vw,36px) }
.hbs-tier{
  display:grid; grid-template-columns:16px minmax(0,1fr) auto; gap:16px; align-items:center;
  padding:16px 0; border-top:1px solid var(--hbp-line);
}
.hbs-tier:last-child{ border-bottom:1px solid var(--hbp-line) }
.hbs-tier-dot{ width:10px; height:10px; border-radius:50%; background:var(--hbp-acc) }
.hbs-tier-name{ font-family:var(--hbp-serif); font-size:clamp(18px,2vw,23px);
  font-weight:500; letter-spacing:-.015em }
.hbs-tier-range{ font-family:var(--hbp-mono); font-size:12px; letter-spacing:.06em;
  color:var(--hbp-mut); white-space:nowrap }

@media (max-width:760px){
  .hbs-rule{ grid-template-columns:44px minmax(0,1fr); gap:14px }
  .hbs-rule-side{ grid-column:2; flex-direction:row; align-items:center;
    justify-content:flex-start; text-align:left; margin-top:12px; flex-wrap:wrap }
}

/* ═══════════════════════════════════════════════════════════════════════
   [2026-08-10, dizayn kuchaytirish] Buyurtmachi: "sodda bo'lib qolibdi".
   Qo'shilgan komponentlar: sarlavha ustidagi katta iqtibos, video kartalar,
   qadriyat plitkalari, rasm tasmasi, bosqich kartalari, vakansiya kartasi.
   Hammasi bir xil tilda: serif sarlavha, mono yorliq, tinch to'r.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Katta iqtibos (missiya) ── */
.hbs-quote{
  position:relative; margin:clamp(28px,4vw,44px) 0 0; padding:clamp(26px,4vw,44px) 0;
  border-top:1px solid var(--hbp-line); border-bottom:1px solid var(--hbp-line);
}
.hbs-quote p{
  margin:0; max-width:22ch; font-family:var(--hbp-serif); font-weight:500;
  font-size:clamp(26px,4.6vw,54px); line-height:1.12; letter-spacing:-.03em;
}
.hbs-quote-mark{
  position:absolute; right:0; top:clamp(10px,2vw,18px);
  font-family:var(--hbp-serif); font-size:clamp(90px,14vw,190px); line-height:.7;
  color:var(--hbp-line); user-select:none; pointer-events:none;
}

/* ── Video kartalar ── */
.hbs-videos{ display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,3vw,36px); margin-top:clamp(26px,4vw,44px) }
.hbs-video{ min-width:0 }
.hbs-video-frame{
  position:relative; border-radius:var(--hb-radius,22px); overflow:hidden;
  background:var(--hbp-paper-2); aspect-ratio:16/9;
}
.hbs-video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.hbs-video h3{
  font-family:var(--hbp-serif); font-weight:500; font-size:clamp(18px,2vw,22px);
  margin:14px 0 6px; letter-spacing:-.015em;
}
.hbs-video p{ margin:0; font-size:14px; line-height:1.6; color:var(--hbp-mut) }

/* ── Qadriyat plitkalari ── */
.hbs-values{ display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,20px); margin-top:clamp(22px,3vw,34px) }
.hbs-value{
  display:flex; align-items:center; gap:14px;
  padding:clamp(16px,2vw,22px); border:1px solid var(--hbp-line);
  border-radius:var(--hb-radius-md,18px); background:var(--hbp-paper);
  transition:border-color .25s ease, transform .25s ease;
}
.hbs-value:hover{ border-color:var(--hbp-acc); transform:translateY(-2px) }
.hbs-value-n{
  flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--hbp-acc) 16%, transparent);
  color:var(--hb-acc-text, var(--hbp-acc));
  font-family:var(--hbp-mono); font-size:12px;
}
.hbs-value-t{ font-family:var(--hbp-serif); font-size:clamp(16px,1.8vw,19px);
  font-weight:500; letter-spacing:-.01em; line-height:1.25 }

/* ── Maqsad kartalari (strategik) ── */
.hbs-goals{ display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,28px); margin-top:clamp(22px,3vw,34px) }
.hbs-goal{
  padding:clamp(20px,2.6vw,28px); border-radius:var(--hb-radius-md,18px);
  background:var(--hbp-paper-2); display:flex; flex-direction:column; gap:12px;
}
.hbs-goal-n{ font-family:var(--hbp-mono); font-size:11px; letter-spacing:.16em;
  color:var(--hbp-acc) }
.hbs-goal p{ margin:0; font-size:15px; line-height:1.62 }

/* ── Rasm tasmasi ── */
.hbs-strip{ display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,18px); margin-top:clamp(26px,4vw,44px) }
.hbs-strip figure{ margin:0; border-radius:var(--hb-radius-md,18px); overflow:hidden;
  background:var(--hbp-paper-2); aspect-ratio:4/3 }
.hbs-strip img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1) }
.hbs-strip figure:hover img{ transform:scale(1.05) }
.hbs-strip-wide{ grid-column:span 2; aspect-ratio:16/9 }

/* ── Bosqich kartalari (Xizmatlar) ── */
.hbs-flow{ display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2.2vw,26px); margin-top:clamp(26px,4vw,44px) }
.hbs-flow-card{
  position:relative; padding:clamp(24px,3vw,34px);
  border:1px solid var(--hbp-line); border-radius:var(--hb-radius,22px);
  background:var(--hbp-paper); overflow:hidden;
  transition:border-color .3s ease, transform .3s ease;
}
.hbs-flow-card:hover{ border-color:var(--hbp-acc); transform:translateY(-3px) }
.hbs-flow-card::after{
  content:attr(data-n); position:absolute; right:clamp(12px,2vw,22px); top:clamp(2px,1vw,8px);
  font-family:var(--hbp-serif); font-size:clamp(56px,8vw,104px); line-height:1;
  color:var(--hbp-line); user-select:none; pointer-events:none;
}
.hbs-flow-card h3{
  font-family:var(--hbp-serif); font-weight:500; font-size:clamp(20px,2.4vw,27px);
  letter-spacing:-.02em; margin:0 0 12px; position:relative;
}
.hbs-flow-card p{ margin:0; font-size:15px; line-height:1.68; color:var(--hbp-mut);
  position:relative; max-width:46ch }
.hbs-flow-card ul{ margin:14px 0 0; padding-left:1.2em; position:relative;
  color:var(--hbp-mut); font-size:14px; line-height:1.7 }
.hbs-flow-first{ grid-column:1 / -1 }

/* ── Vakansiya kartalari (Ish e'lonlar) ── */
.hbs-jobs{ display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2.2vw,26px); margin-top:clamp(20px,3vw,34px) }
.hbs-job{
  position:relative; display:flex; flex-direction:column; gap:12px;
  padding:clamp(22px,2.8vw,30px); text-decoration:none;
  border:1px solid var(--hbp-line); border-radius:var(--hb-radius,22px);
  background:var(--hbp-paper); overflow:hidden;
  transition:border-color .3s ease, transform .3s ease, background .3s ease;
}
a.hbs-job, a.hbs-job:hover{ color:var(--hbp-ink); text-decoration:none }
a.hbs-job:hover{ border-color:var(--hbp-acc); transform:translateY(-3px);
  background:var(--hbp-paper-2) }
.hbs-job h3{
  font-family:var(--hbp-serif); font-weight:500; font-size:clamp(20px,2.3vw,26px);
  letter-spacing:-.02em; margin:0; line-height:1.2;
}
.hbs-job p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--hbp-mut) }
.hbs-job-foot{ display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:auto; padding-top:6px }
.hbs-job-go{
  flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--hbp-line); color:var(--hbp-mut);
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
a.hbs-job:hover .hbs-job-go{ background:var(--hbp-acc); border-color:transparent;
  color:var(--hb-acc-ink,#0B1F19); transform:translateX(3px) }

/* ═══ MOBIL (buyurtmachi: "mobilga ham moslashtir") ═══════════════════ */
@media (max-width:900px){
  .hbs-videos, .hbs-values, .hbs-goals, .hbs-flow, .hbs-jobs{ grid-template-columns:1fr }
  .hbs-strip{ grid-template-columns:1fr 1fr }
  .hbs-strip-wide{ grid-column:span 2 }
}
@media (max-width:600px){
  .hbs-quote-mark{ display:none }          /* tor ekranda matn ustiga tushardi */
  .hbs-quote p{ max-width:none }
  .hbs-strip{ grid-template-columns:1fr }
  .hbs-strip-wide{ grid-column:span 1 }
  .hbs-flow-card::after{ font-size:44px; right:14px; top:8px }
  .hbs-flow-card h3{ padding-right:52px }  /* katta raqam sarlavhani bosmasin */
  .hbs-value{ padding:14px 16px; gap:12px }
}

/* ── Video "facade" tugmasi (bosilgunicha YouTube yuklanmaydi) ── */
button.hbs-video-frame{
  display:block; width:100%; padding:0; border:0; cursor:pointer;
  background:var(--hbp-paper-2);
}
.hbs-video-frame img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.16,1,.3,1) }
button.hbs-video-frame:hover img{ transform:scale(1.04) }
.hbs-video-btn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background:var(--hbp-acc); color:var(--hb-acc-ink,#0B1F19);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
button.hbs-video-frame:hover .hbs-video-btn{ transform:translate(-50%,-50%) scale(1.08) }
button.hbs-video-frame:focus-visible{ outline:2px solid var(--hbp-acc); outline-offset:3px }
.hbs-video p a{ color:var(--hbp-mut); text-decoration:underline; text-underline-offset:2px }
.hbs-video p a:hover{ color:var(--hbp-acc) }