/* ==========================================================================
   FF/03-HERO-TRUST.CSS — FlexFolio skin: HERO (#hero) + RAQAMLAR (#trust)
   Otabek, 2026-08-07.

   00/01/02 poydevorni qo'ydi (token, tugma, badge, karta, plita, input).
   Bu fayl faqat SHU IKKI BO'LIMGA XOS detallarni to'g'rilaydi.

   Nega ID zanjirlari ko'p: `css/parts/02-hero-trust.css` deyarli hamma
   narsani `#hero ...` / `#trust ...` bilan yozgan, `css/depth.css` esa
   ustiga yana bir qavat qo'ygan. Kech yuklanishning O'ZI yetmaydi —
   spetsifiklik ham tenglashtirilishi shart. Shuning uchun quyida o'sha
   zanjirlar AYNAN takrorlanadi.

   O'lchov manbasi: ref/FLEXFOLIO-SPEC.md (brauzerda jonli o'lchangan).
   ========================================================================== */


/* ==========================================================================
   1. HERO — sarlavha bloki
   ========================================================================== */

/* `#hero` paddingi 00-tokens.css da (200/80) — bu yerda takrorlanmaydi.
   Bu yerda faqat fon olib tashlanadi: 08-signature.css ning iliq shaftoli
   blur qatlami hero ORTIDA turadi, `background:var(--page)` esa uni to'sib
   qo'yardi (parts/02:16 shuni yozgan). */
#hero{
  background:transparent;
}

#hero .hero-copy .eyebrow{
  margin-bottom:24px;
}

/* --- 1.1 H1 -------------------------------------------------------------
   parts/02:39 `#hero-h1` ga O'Z o'lchamini yozadi (70px / ls -0.029em) va
   ID bo'lgani uchun 00-tokens dagi `h1` qoidasini yengadi. Shu ID aynan
   takrorlanib SPEC qiymatiga qaytariladi: 60px @1440 · 38px @390,
   ls -3.5px → -1.5px, lh 1.0, vazn 500.

   ls nega px'da va clamp bilan: FlexFolio'da tracking o'lcham bilan
   BIR XIL EM emas — 60px'da -3.5px (-0.058em), 38px'da -1.5px (-0.039em).
   Ya'ni zichlik katta o'lchamda kuchayadi; em bitta qiymat bilan buni
   bermaydi. 4.17vw / -0.243vw = 1440px'da aynan 60px / -3.5px. */
#hero-h1{
  font-family:var(--display);              /* Geist */
  font-weight:500;
  font-size:clamp(38px, 4.17vw, 60px);
  line-height:1.0;
  letter-spacing:clamp(-3.5px, -0.243vw, -1.5px);
  color:var(--ink);
  margin:0;
}

#hero-h1 .h1-line{
  display:block;
}

/* Aksent rangi 01-primitives.css da (gradient-clip zanjiri uzilgan joyda)
   hal qilingan — bu yerda faqat geometriya meros bo'lib qolishi ta'minlanadi. */
#hero-h1 .h1-accent{
  font-style:normal;
  font-weight:inherit;
  letter-spacing:inherit;
}

/* --- 1.2 Lead -----------------------------------------------------------
   SPEC ikkita "lead" qatorini beradi: "Lead / sub" (18/500/-0.36px/25.2px)
   va "Lead (keng)" (18/500/normal/30.6px). QAYSI BIRI hero'niki ekanini
   referens piksellari hal qildi:

     ref-00.jpg hero sub — matn qatorlari y=386 va y=410 → oraliq 24px
     ref-02.jpg bo'lim sub — y=146 va y=170 → yana 24px
     (o'sha rasmda H1 qatorlari 252/312 → 60px, ya'ni rasm 1:1 masshtabda,
      demak bu o'lchovlar ishonchli)

   Ya'ni FlexFolio'da HAMMA sub 24-25px yetakchilikda — 30.6px emas.
   1.7 qoldirilsa lead referensdan ~27% havoli chiqadi va hero'ning zich
   sarlavhasi bilan qarama-qarshiligi yo'qoladi. Shuning uchun SPEC ning
   "Lead / sub" qatoriga o'tkazildi: lh 1.4 (=25.2px), ls -0.36px. */
#hero .hero-sub{
  max-width:620px;
  margin:24px auto 0;
  font-family:var(--body);
  font-size:18px;
  font-weight:500;
  line-height:1.4;                          /* 25.2px — referensda 24px */
  letter-spacing:-0.36px;
  color:var(--ink-mut);
}

/* --- 1.3 CTA qatori -----------------------------------------------------
   Tugmalarning o'zi 01-primitives.css da (ID zanjiri bilan) yozilgan;
   bu yerda faqat qator geometriyasi. gap 16px — o'lchangan ikkinchi
   darajali gap (31 dan keyin eng ko'p uchraydigani). */
#hero .hero-ctas{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin-top:36px;
}


/* ==========================================================================
   2. HERO SAHNASI — kartalar o'rami
   O'lchangan: o'ram `rgba(255,255,255,.24)` · radius 24 · padding 24;
   ichidagi kartalar radius 20 · padding 30 · gap 31.
   Chuqurlik soyadan emas, UCH POG'ONALI YUZADAN keladi:
   sahifa #F5F5F5 → o'ram ~#F7F7F7 → karta #FAFAFA.
   ========================================================================== */

#hero .hero-stage{
  margin-top:clamp(48px, 5.6vw, 80px);
  background:rgba(255,255,255,.24);
  background-image:none;
  border:0;
  border-radius:24px;
  padding:24px;
  box-shadow:none;
}

/* parts/02:96 bu yerga `clamp(12px,1.4vw,18px)` yozgan (ID → kuchli).
   O'lchangan hukmron gap 31px. */
#hero .hero-cards{
  gap:31px;
}

#hero .hero-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  background:var(--panel-2);               /* #FAFAFA */
  background-image:none;
  border:0;                                 /* parts/02:104 dagi 1px chegara — FlexFolio'da chegara YO'Q */
  border-radius:20px;
  padding:30px;
  box-shadow:none;
  /* scroll.js hero parallaksi uchun `transform` qulflangan (parts/02:112).
     HOVER'DA KO'TARILISH YO'Q: FlexFolio kartalari qimirlamaydi, o'zgarish
     faqat yuza rangida. Qolaversa `translate` ham band — `.hi` kirish
     animatsiyasi (`html.js.loaded #hero .hi`, spetsifiklik 1-3-1) uni
     boshqaradi va hover zanjiri undan kuchsizroq bo'lardi. */
  transform:none !important;
  transition:background-color .25s var(--ease);
}

/* Yagona hover signali — karta oqarib, o'ramdan ajralib chiqadi */
#hero .hero-card:hover{
  background:#FFFFFF;
  box-shadow:none;
}

/* Flagman karta ham bir xil (Otabek, 2026-08-06: "hammasi bir xil stilda") */
#hero .hero-card.is-flag,
#hero .hero-card.is-flag:hover{
  border:0;
}
#hero .hero-card.is-flag{ background:var(--panel-2); }
#hero .hero-card.is-flag:hover{ background:#FFFFFF; }


/* ==========================================================================
   3. KARTA ICHI
   ========================================================================== */

/* --- 3.1 Karta boshi ----------------------------------------------------
   FlexFolio naqshi (ref-01): ikonka plitasi O'Z QATORIDA tepada, sarlavha
   ostida. parts/02:127 uni yonma-yon (flex row) qilgan — 4 ustunli tor
   kartada 56px plita + 20px sarlavha bir qatorga sig'maydi va sarlavha
   ikkiga bo'linib ketadi. Shuning uchun ustunga o'giramiz.
   HTML tegilmaydi — faqat flex yo'nalishi. */
#hero .hc-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
}

/* Plita yuzasi/radiusi 01-primitives.css da (`!important` bilan, chunki
   depth.css:281 ham `!important` yozgan). Bu yerda faqat O'LCHAM —
   o'lchangan 56×56, ichidagi ikonka 24×24. */
#hero .hc-ico{
  width:56px;
  height:56px;
  flex:none;
  display:grid;
  place-items:center;
}

#hero .hc-ico svg{
  width:24px;
  height:24px;
}

/* --- 3.2 Karta sarlavhasi ----------------------------------------------
   O'lchangan: karta sarlavhalari Geist EMAS, Inter 20 / 500 / -0.3px.
   Faqat bo'lim sarlavhalari (H1/H2/H3) Geist bo'ladi — shu qarama-qarshilik
   FlexFolio tipografikasining asosi. */
#hero .hc-title{
  font-family:var(--body);
  font-size:20px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:-0.3px;
  color:var(--ink);
  margin:0;
}

/* --- 3.3 Karta matni ---------------------------------------------------- */
#hero .hc-desc{
  font-family:var(--body);
  font-size:16px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:normal;
  color:var(--ink-mut);
  margin:0;
}

#hero .hc-list{
  display:grid;
  gap:10px;
  margin:4px 0 0;
  padding:0;
  list-style:none;
}

/* 15px (16px emas): karta 264px keng, ichki matn maydoni 204px. 16px'da
   har band uch qatorga bo'linib, karta bo'yi ikki barobar oshadi.
   FlexFolio'ning mayda/meta shkalasi 14–16px — 15px o'sha oraliqda. */
#hero .hc-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-family:var(--body);
  font-size:15px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:normal;
  color:var(--ink-mut);
}

/* --- 3.4 Belgi ----------------------------------------------------------
   parts/02:202 da belgi rangi `stroke='%232f69ff'` bo'lib data: URI ICHIGA
   qotib qolgan — uni faqat rang xossasi bilan o'zgartirib bo'lmaydi.
   Shuning uchun BUTUN `background` deklaratsiyasi (rang + URI + o'lcham +
   pozitsiya) qaytadan yoziladi, apelsin `%23F97518` bilan.

   Shakl ham referensga (ref-03) yaqinlashtirildi: FlexFolio ro'yxatlarida
   belgi OCHIQ turadi — dumaloq chip foni yo'q, faqat toza "✓". */
#hero .hc-tick{
  width:16px;
  height:16px;
  flex:none;
  margin-top:3px;
  border-radius:0;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.3 6.4 4.7 8.8 9.7 3.4' fill='none' stroke='%23F97518' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}


/* ==========================================================================
   4. TRUST — statistika qatori
   ========================================================================== */

/* parts/02:250 uni oq to'liq kenglikdagi tasma qilgan (fon + tepa/past
   chegara). FlexFolio'da bunday band YO'Q: hamma narsa sahifa fonida
   turadi, ajratish esa punktir chiziq bilan beriladi (08-signature'dagi
   `.section::after` bilan bir xil retsept — lekin `#trust` da `.section`
   klassi yo'q, shuning uchun chiziq shu yerda qo'lda beriladi).

   `padding-block` 00-tokens.css da `!important` bilan berilgan — main.js:383
   `#trust` ga inline `paddingTop` yozadi, uni faqat `!important` yengadi. */
#trust{
  position:relative;
  background:transparent;
  border:0;
}

#trust::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(1190px, calc(100% - var(--pad) * 2));
  height:1px;
  pointer-events:none;
  background-image:linear-gradient(90deg, var(--rail) 0 6px, transparent 6px 12px);
  background-size:12px 1px;
  z-index:0;                                /* 08-signature `.section::after` bilan bir xil qatlam */
}

#trust .stat{
  text-align:center;
  padding:0 20px;
  border:0;
  min-width:0;
}

/* depth.css:988 har ustun tagiga 34px apelsin chiziqcha o'stiradi.
   FlexFolio'da bunday bezak yo'q — raqamning o'zi yetarli urg'u. */
#trust .stat::after{
  display:none;
}

/* --- 4.1 Raqamlar -------------------------------------------------------
   depth.css:963 `@supports` ichida IKKI selektorga gradient-clip yozadi:
   `#trust .stat-num` VA `#trust .stat-num > .count`. 01-primitives.css
   faqat birinchisini qaytargan edi, shuning uchun raqamlar hamon
   binafsha gradientda chiqayotgandi. Bola `.count` ham shu yerda uzildi —
   uch xossa BIRGA bo'lishi shart, aks holda matn shaffof qolib ketadi. */
#trust .stat-num,
#trust .stat-num > .count{
  background-image:none !important;
  -webkit-background-clip:border-box !important;
          background-clip:border-box !important;
  -webkit-text-fill-color:var(--ink) !important;
  color:var(--ink);
}

#trust .stat-num{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:2px;
  font-family:var(--display);              /* Geist */
  font-weight:500;
  font-size:clamp(34px, 3.6vw, 52px);
  line-height:1.05;
  letter-spacing:-0.05em;                   /* zich tracking — sarlavha imzosi */
}

/* Qo'shimcha ("+" / "+ yil") — yagona apelsin urg'u; depth.css:976 uni
   600 vaznda yozgan, FlexFolio'da qalin shrift ishlatilmaydi. */
#trust .stat-num small{
  font-family:var(--display);
  font-size:.42em;
  font-weight:500;
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--blue) !important;
  -webkit-text-fill-color:var(--blue) !important;
}

#trust .stat-cap{
  margin:10px 0 0;
  font-family:var(--body);
  font-size:15px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:normal;
  color:var(--ink-mut);
}


/* ==========================================================================
   5. RESPONSIV
   O'lchangan mobil shkalasi: H1 38px / ls -1.5px · o'ram va karta paddingi
   kichrayadi · gap 31 → 16.
   ========================================================================== */

/* Oraliq zona 1080–1279: kartalar hamon 4 ustun (2 ustunga o'tish parts
   CSS'ida 1079px'da bo'ladi), lekin konteyner 1200px'gacha yetmagani uchun
   karta 1080px'da 220px'gacha siqiladi — 30px padding bilan ichki matn
   maydoni atigi 160px qoladi. Gap va paddingni biroz kichraytirib matnga
   ~13% joy qaytariladi; 1280px'dan yuqorida SPEC qiymatlari (31/30) ishlaydi. */
@media (min-width:1080px) and (max-width:1279px){
  #hero .hero-cards{ gap:24px; }
  #hero .hero-card{ padding:26px; }
  #hero .hc-head{ gap:16px; }
}

@media (max-width:1079px){
  #hero .hero-cards{ gap:20px; }
  #hero .hero-card{ padding:24px; }
  #hero .hc-head{ gap:14px; }
}

@media (max-width:767px){
  #hero .hero-sub{ font-size:16px; line-height:1.5; }
  #hero .hero-ctas{ gap:10px; margin-top:28px; }

  #hero .hero-stage{
    margin-top:36px;
    padding:16px;
    border-radius:20px;
  }
  #hero .hero-cards{ gap:16px; }
  #hero .hero-card{ padding:22px; border-radius:16px; }

  /* Bitta ustunda plita bilan sarlavha yonma-yon sig'adi — joy tejaladi */
  #hero .hc-head{
    flex-direction:row;
    align-items:center;
    gap:14px;
  }
  #hero .hc-ico{ width:48px; height:48px; }
  #hero .hc-ico svg{ width:22px; height:22px; }

  #trust .stats{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    row-gap:28px;
  }
  #trust .stat{ padding-inline:8px; }
  #trust .stat-cap{ font-size:14px; }
}

@media (max-width:400px){
  #trust .stat-cap{ font-size:13px; }
}


/* ==========================================================================
   6. HARAKATNI KAMAYTIRISH
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  #hero .hero-card{ transition:none; }
}