/* ==========================================================================
   02 — HERO (#hero) + RAQAMLAR (#trust)
   AIwork naqshi: markazlashgan sarlavha bloki (eyebrow → h1 → lead → 2 tugma),
   pastida bitta OQ PANEL ichida 4 ustunli xizmat kartalari;
   so'ng oq "trust" tasmasi — 4 statistika, orasida 1px ajratgich.
   Faqat css/aiwork.css tokenlari ishlatilgan.
   ========================================================================== */


/* ==========================================================================
   1. HERO — bo'lim karkasi
   ========================================================================== */

#hero{
  background:var(--page);
  /* Suzuvchi nav (top:20px + 64px balandlik) ostidan boshlanadi */
  padding-top:clamp(128px, 13vw, 186px);
  padding-bottom:clamp(56px, 6vw, 96px);
  overflow-x:clip;
}

#hero .hero-inner{
  display:block;
}


/* --- 1.1 Markazlashgan sarlavha bloki ----------------------------------- */

#hero .hero-copy{
  max-width:var(--head-w);
  margin-inline:auto;
  text-align:center;
}

#hero .hero-copy .eyebrow{
  margin-bottom:clamp(18px, 2vw, 26px);
}

#hero-h1{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(38px, 5.4vw, 70px);
  line-height:1.02;
  letter-spacing:-0.029em;
  color:var(--ink);
  margin:0;
}

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

/* Yagona aksent — ko'k */
#hero-h1 .h1-accent{
  font-style:normal;
  color:var(--blue);
}

#hero .hero-sub{
  max-width:620px;
  margin:clamp(18px, 2vw, 24px) auto 0;
  font-family:var(--body);
  font-size:18px;
  line-height:1.7;
  font-weight:400;
  color:var(--ink-mut);
}

#hero .hero-ctas{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:clamp(26px, 3vw, 36px);
}

/* Ikkilamchi tugma referensdagidek OQ (ghost o'rniga oq yuza) */
#hero .hero-ctas .btn-ghost{
  background:var(--panel);
  border-color:var(--line);
  box-shadow:var(--sh-1);
}
#hero .hero-ctas .btn-ghost:hover{
  background:var(--panel-2);
}


/* ==========================================================================
   2. XIZMAT KARTALARI — bitta oq panel ichida 4 ustun
   ========================================================================== */

#hero .hero-stage{
  margin-top:clamp(44px, 5.6vw, 76px);
  padding:clamp(14px, 2vw, 24px);
}

#hero .hero-cards{
  gap:clamp(12px, 1.4vw, 18px);
}

#hero .hero-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  background:var(--panel-2);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:22px 20px 24px;
  box-shadow:none;
  /* scroll.js hero parallaksi (y ±46px) — referensda bunday harakat yo'q */
  transform:none !important;
  transition:background .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

#hero .hero-card:hover{
  background:var(--panel);
  box-shadow:0 8px 24px rgba(0,0,0,.07);
}

/* Flagman karta (Jarvis) — ilgari ko'k chegara + och ko'k fon bilan
   ajralib turardi. Otabek so'raganicha (2026-08-06) to'rttala karta bir xil:
   .is-flag klassi JS ilmog'i sifatida qoladi, lekin vizual farq bermaydi. */
#hero .hero-card.is-flag{
  border:1px solid var(--line-soft);
  background:var(--panel-2);
}
#hero .hero-card.is-flag:hover{
  background:var(--panel);
}

/* --- 2.1 Karta boshi: ikon + sarlavha ----------------------------------- */

#hero .hc-head{
  display:flex;
  align-items:center;
  gap:12px;
}

#hero .hc-ico{
  width:40px;
  height:40px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:var(--r-sm);
  background:var(--blue-lo);
}

#hero .hc-ico svg{
  width:20px;
  height:20px;
  fill:var(--blue);
}

#hero .hc-title{
  font-family:var(--display);
  font-weight:500;
  font-size:18px;
  line-height:1.3;
  letter-spacing:-0.015em;
  color:var(--ink);
  margin:0;
}

/* --- 2.2 Karta matni ---------------------------------------------------- */

#hero .hc-desc{
  font-family:var(--body);
  font-size:15px;
  line-height:1.6;
  font-weight:400;
  color:var(--ink-mut);
  margin:0;
}

#hero .hc-list{
  display:grid;
  gap:8px;
  margin:2px 0 0;
  padding:0;
}

#hero .hc-list li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-family:var(--body);
  font-size:14px;
  line-height:1.5;
  font-weight:400;
  color:var(--ink-mut);
}

/* Ko'k belgi (checkmark) — inline data-URI, tashqi fayl yo'q */
#hero .hc-tick{
  width:16px;
  height:16px;
  flex:none;
  margin-top:3px;
  border-radius:var(--r-pill);
  background:var(--blue-lo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 4.8 8.4 9.4 3.8' fill='none' stroke='%232f69ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}


/* ==========================================================================
   3. ESKI SHAR QOLDIQLARI — HTML'da qoladi (JS ilmog'i), vizual YO'Q
   ========================================================================== */

#hero .orb-hit,
#hero .orb-ring,
#hero .orb-cue,
#hero .orb-fallback{
  display:none !important;
}


/* ==========================================================================
   4. HERO KIRISH ANIMATSIYASI (.hi)
   Yadro CSS .hi ni .in bilan ochadi, lekin JS hero'ga .in qo'shmaydi —
   eski tizimdagi ilmoq html.loaded edi. Shuning uchun shu bo'limda
   .hi ni html.js / html.loaded orqali boshqaramiz (transform o'rniga
   `translate` — chunki .hero-card transform'i GSAP uchun qulflangan).
   ========================================================================== */

#hero .hi{
  opacity:1;
  transform:none;
  translate:0 0;
  transition:opacity var(--dur) var(--ease),
             translate var(--dur) var(--ease);
}

html.js #hero .hi{
  opacity:0;
  translate:0 16px;
}

html.js.loaded #hero .hi,
html.qa-show #hero .hi,
html.qa-flat #hero .hi,
html.no-anim #hero .hi{
  opacity:1;
  translate:0 0;
}

/* Sokin ketma-ketlik */
#hero .eyebrow.hi{            transition-delay:.04s; }
#hero .h1-line.hi:first-child{transition-delay:.12s; }
#hero .h1-line.hi:last-child{ transition-delay:.20s; }
#hero .hero-sub.hi{           transition-delay:.28s; }
#hero .hero-ctas.hi{          transition-delay:.36s; }
#hero .hero-card.hi:nth-child(1){ transition-delay:.44s; }
#hero .hero-card.hi:nth-child(2){ transition-delay:.50s; }
#hero .hero-card.hi:nth-child(3){ transition-delay:.56s; }
#hero .hero-card.hi:nth-child(4){ transition-delay:.62s; }


/* ==========================================================================
   5. TRUST — oq statistika tasmasi
   ========================================================================== */

#trust{
  background:var(--panel);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  /* main.js #trust ga inline padding-top yozadi — tasma simmetrik qolsin */
  padding-block:clamp(36px, 4.4vw, 56px) !important;
  overflow-x:clip;
  position:relative;
}

#trust .stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  align-items:start;
  /* scroll.js parallaksi (#trust .stats, y ±18px) — tasma qimirlamasin */
  transform:none !important;
}

#trust .stat{
  text-align:center;
  padding:4px clamp(10px, 2vw, 28px);
  border-left:1px solid var(--line);
  min-width:0;
}

#trust .stat:first-child{
  border-left:0;
}

#trust .stat-num{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:2px;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(34px, 4vw, 52px);
  line-height:1.05;
  letter-spacing:-0.03em;
  color:var(--ink);
}

#trust .stat-num small{
  font-family:var(--display);
  font-weight:500;
  font-size:.42em;
  line-height:1;
  letter-spacing:-0.01em;
  color:var(--ink-dim);
}

#trust .stat-cap{
  margin-top:8px;
  font-family:var(--body);
  font-size:14px;
  line-height:1.5;
  font-weight:400;
  color:var(--ink-dim);
}


/* ==========================================================================
   6. RESPONSIV
   ========================================================================== */

/* 768–1079px — kartalar 2 ustun (yadro CSS), panel paddingi kichrayadi */
@media (max-width:1079px){
  #hero .hero-stage{ padding:16px; }
}

@media (max-width:767px){
  #hero{
    padding-top:clamp(112px, 26vw, 140px);
  }

  #hero .hero-sub{ font-size:17px; }

  #hero .hero-ctas .btn{ flex:1 1 auto; }

  #hero .hero-stage{
    margin-top:36px;
    padding:14px;
  }

  #hero .hero-card{ padding:20px 18px 22px; }

  #trust .stats{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    row-gap:26px;
  }

  #trust .stat{
    padding-inline:10px;
    border-left:1px solid var(--line);
  }

  #trust .stat:nth-child(2n+1){ border-left:0; }
}

/* Juda tor ekran (375px) — gorizontal scroll bo'lmasligi kafolati */
@media (max-width:400px){
  #trust .stat-cap{ font-size:13px; }
}


/* ==========================================================================
   7. PREFERS-REDUCED-MOTION
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  #hero .hi,
  html.js #hero .hi{
    opacity:1 !important;
    translate:none !important;
    transform:none !important;
    transition:none !important;
  }

  #hero .hero-card:hover{ box-shadow:none; }
}