/* ==========================================================================
   FF/13-TUZATISH.CSS — Otabekning 2026-08-07 revizyasi
   Eng OXIRGI qatlam: undan oldingi hamma narsani teng yoki kuchliroq
   zanjir bilan qaytaradi. Bitta <link> — olib tashlansa hammasi bekor.

   A. #jarvis  — "Chatbot vs Jarvis" bloki
   B. #tamoyillar — tekis ro'yxat → 2×2 karta to'ri
   C. #fikrlar — bo'lim boshi MARKAZDA
   D. #savollar — eyebrow ↔ H2 yopishib qolgan edi
   E. #boshlash — CTA kompozitsiyasi va forma kartasi
   F. .footer-up — "Yuqoriga" pillasi paddingsiz edi
   G. MOBIL — yon yo'naltiruvchi chiziqlar (linyalar) qaytariladi
   ========================================================================== */


/* ==========================================================================
   A. #jarvis — "Chatbot vs Jarvis" taqqoslash bloki

   Muammo: ikkala ustun bir xil "og'irlikda" o'qilardi — qaysi biri YAXSHI
   ekani faqat rangdan bilinardi, lead esa 26ch da uzilib panelning o'ng
   yarmini bo'sh qoldirardi.
   Yechim: lead kengayadi; "Chatbot" ustuni SO'NIQ (shaffof + punktir
   halqa + so'niq matn), "Jarvis" ustuni TO'LIQ (tint + aksent halqa);
   yorliqlarga ✕ / ✓ belgisi mask orqali qo'shiladi (skrin-riderga
   o'qilmaydi, chunki bu `content:""` + mask, matn emas).
   ========================================================================== */
#jarvis .jv-highlight{
  padding:clamp(26px, 3.4vw, 44px);
  box-shadow:inset 0 0 0 1px rgba(56,19,79,.06),
             0 24px 60px -46px rgba(56,19,79,.45);
}

#jarvis .jvh-lead{
  max-width:32ch;
  font-size:clamp(21px, 1.95vw, 28px);
  text-wrap:balance;                      /* ikki qator teng bo'linsin */
}

#jarvis .jvh-vs{
  margin-top:clamp(26px, 2.8vw, 38px);
  align-items:stretch;
}

/* Ustun — flex ustun: yorliq tepada, matn ostida, balandlik tenglashadi */
#jarvis .jvh-col{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  padding:clamp(22px, 2.2vw, 28px);
}

#jarvis .jvh-col p{ margin:0; }

/* Yorliq — belgi + matn */
#jarvis .jvh-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:0;
  padding:6px 14px 6px 11px;
}

#jarvis .jvh-tag::before{
  content:"";
  width:13px;
  height:13px;
  flex:none;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-position:center;
          mask-position:center;
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
}

/* ✕ — chatbot */
#jarvis .jvh-no .jvh-tag::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ✓ — Jarvis */
#jarvis .jvh-yes .jvh-tag::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.6l3.1 3.1L12.6 5.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.6l3.1 3.1L12.6 5.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* "Chatbot" ustuni — so'niq tomon. Punktir halqa "bu variant emas" deydi. */
#jarvis .jvh-no{
  background:transparent;
  background-image:none;
  box-shadow:none;
  border:1px dashed rgba(46,15,69,.16);
}

#jarvis .jvh-no .jvh-tag{
  background:transparent;
  box-shadow:inset 0 0 0 1px rgba(46,15,69,.14);
  color:rgba(46,15,69,.60);
}

#jarvis .jvh-no p{ color:rgba(46,15,69,.58); }

/* "Jarvis" ustuni — to'liq og'irlik (ff/12 dagi tint saqlanadi) */
#jarvis .jvh-yes{
  border:1px solid transparent;
}

#jarvis .jvh-yes p{ color:var(--ink); }


/* ==========================================================================
   B. #tamoyillar — tekis oq ro'yxat → 2×2 karta to'ri

   Muammo (Otabek: "shu block dizayni yoqmayapti"): sarlavha bilan ro'yxat
   orasida 84px bo'shliq, ro'yxatning o'zi esa bitta katta oq plita —
   saytdagi boshqa hech narsaga o'xshamaydi va o'ng yarmi bo'm-bo'sh.
   Yechim: bo'lim ritmi zichlashadi, ro'yxat saytning KARTA tiliga
   o'tkaziladi (2×2, aksent raqam pilli, hover ko'tarilish).
   ========================================================================== */
#tamoyillar .sec-head{
  margin-bottom:clamp(30px, 3.2vw, 46px);
}

#tamoyillar .pr-ledger{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(14px, 1.5vw, 22px);
  max-width:none;
  margin-inline:0;
  padding:0;
  background:none;
  border-radius:0;
  box-shadow:none;
}

/* GRID EMAS, FLEX: `parts/07` + `ff/06` bolalarga `grid-column`/`grid-row`
   ni qattiq yozgan — grid qolsa ular baribir ikki ustunga tarqalib ketadi.
   Flex ustunda bu deklaratsiyalar butunlay e'tiborsiz qoladi. */
#tamoyillar .pr-row,
#tamoyillar .pr-row:first-child,
#tamoyillar .pr-row:last-child{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  padding:clamp(24px, 2.4vw, 32px);
  margin-inline:0;
  border-bottom:0;
  border-radius:var(--r-lg);
  background:#FFFFFF;
  box-shadow:inset 0 0 0 1px rgba(56,19,79,.06),
             0 18px 40px -32px rgba(56,19,79,.34);
  transition:transform .38s cubic-bezier(.22,.61,.36,1),
             box-shadow .38s cubic-bezier(.22,.61,.36,1);
}

#tamoyillar .pr-row:hover{
  background:#FFFFFF;
  background-image:none;
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(124,58,237,.22),
             0 28px 50px -30px rgba(56,19,79,.40);
}

/* Raqam — to'la aksent pill (adv-dot bilan bir tilda) */
#tamoyillar .pr-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  width:auto;
  min-width:38px;
  height:30px;
  padding:0 11px;
  margin-top:0;
  margin-bottom:2px;
  background:var(--blue);
  background-image:var(--grad);
  color:#FFFFFF;
  font-size:13px;
  font-weight:600;
}

#tamoyillar .pr-row p{ max-width:44ch; }

@media (max-width:767px){
  #tamoyillar .pr-ledger{ grid-template-columns:minmax(0, 1fr); }
  #tamoyillar .pr-row,
  #tamoyillar .pr-row:first-child,
  #tamoyillar .pr-row:last-child{ padding:22px; }
  #tamoyillar .pr-row p{ max-width:none; }
}


/* ==========================================================================
   C. #fikrlar — bo'lim boshi MARKAZDA (Otabek so'radi)
   `ff/09-qa.css:319` uni chapga tekislagan edi — teng zanjir bilan
   qaytariladi.
   ========================================================================== */
#fikrlar .sec-head{
  align-items:center;
  text-align:center;
  margin-inline:auto;
}

#fikrlar .sec-head h2{ margin-inline:auto; }
#fikrlar .sec-head .sec-sub{ margin-inline:auto; }


/* ==========================================================================
   D. #savollar — eyebrow pill H2 ga YOPISHIB qolgan edi
   `.faq-aside .sec-head` `display:block` bo'lgani uchun (boshqa bo'limlarda
   u `flex` + `gap:16px`) pill va sarlavha orasida 0px bo'shliq bor edi.
   ========================================================================== */
.faq-aside .sec-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(14px, 1.2vw, 18px);
  margin-top:0;
}


/* ==========================================================================
   E. #boshlash — CTA kompozitsiyasi

   Muammo: chap ustun `align-items:center` bilan o'rtada suzib qolgan,
   tepasida ham pastida ham ~150px o'lik joy bor edi; "Tel:" qatori esa
   oddiy tagchizilgan matn — tugmaga o'xshamaydi.
   Yechim: chap ustun butun balandlikni egallaydi (matn tepada, kontakt
   pastda, orasida hairline), telefon esa shishasimon pill tugma.
   ========================================================================== */
.lead-grid{ align-items:stretch; }

/* Matn bloki + kontakt qatori BITTA optik ustun bo'lib markazda turadi —
   `space-between` ularni ajratganda o'rtada ~290px o'lik joy qolardi. */
.lead-left{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(22px, 2.4vw, 32px);
  padding-block:clamp(6px, 1.2vw, 18px);
}

.lead-left .sec-head{ margin-top:0; }
.aw-cta .lead-left .sec-head{ margin-top:0; }
/* `aiwork.css:406` `.aw-cta .sec-sub` ga ham `margin-inline:auto` bergan —
   tor ekranda (bir ustunli maket) sarlavha chapda, matn esa markazda
   turib qolardi. */
.lead-left .sec-sub,
.aw-cta .lead-left .sec-sub{
  margin-top:16px;
  margin-inline:0 !important;
}

/* Kontakt qatori — pastga tayanadi, ustida nozik ajratgich.
   `aiwork.css:404` `.aw-cta .cta-extra` ga `margin-inline:auto` bergan
   (0-2-0) — yolg'iz `.cta-extra` (0-1-0) uni yenga olmaydi. */
.aw-cta .cta-extra,
.cta-extra{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:0;
  margin-inline:0 !important;            /* aiwork.css:406 `margin-inline:auto`
                                            berib uni markazga surib qo'ygan */
  padding-top:clamp(18px, 2vw, 26px);
  border-top:1px solid rgba(255,255,255,.16);
  font-size:15px;
  color:rgba(255,255,255,.72);
}

.aw-cta .cta-extra a,
.cta-extra a{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:46px;
  padding:0 18px;
  border-radius:100px;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  color:#FFFFFF;
  font:500 17px/1 var(--body);
  letter-spacing:-.2px;
  text-decoration:none;
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  transition:background .25s ease, box-shadow .25s ease, transform .25s ease;
}

/* Telefon ikonkasi */
.aw-cta .cta-extra a::before,
.cta-extra a::before{
  content:"";
  width:15px;
  height:15px;
  flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 3.6h3.1l1.6 3.9-2 1.4a12 12 0 0 0 5.8 5.8l1.4-2 3.9 1.6v3.1a1.6 1.6 0 0 1-1.7 1.6A16.5 16.5 0 0 1 5 5.3a1.6 1.6 0 0 1 1.6-1.7z' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 3.6h3.1l1.6 3.9-2 1.4a12 12 0 0 0 5.8 5.8l1.4-2 3.9 1.6v3.1a1.6 1.6 0 0 1-1.7 1.6A16.5 16.5 0 0 1 5 5.3a1.6 1.6 0 0 1 1.6-1.7z' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.aw-cta .cta-extra a:hover,
.cta-extra a:hover{
  background:rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.44);
  transform:translateY(-1px);
  opacity:1;
}

/* Forma kartasi — to'q plita ustida ko'proq "suzadi" */
.aw-cta .lead-card,
.lead-right .lead-card{
  border-radius:24px;
  box-shadow:inset 0 0 0 1px rgba(56,19,79,.06),
             0 44px 80px -54px rgba(12,2,26,.92),
             0 10px 28px -22px rgba(12,2,26,.60);
}

/* Chiplar — bosiladigan ko'rinsin */
.lead-card .chip{
  box-shadow:inset 0 0 0 1px rgba(56,19,79,.10);
  transition:box-shadow .22s ease, background .22s ease, color .22s ease;
}

.lead-card .chip:hover{
  box-shadow:inset 0 0 0 1px rgba(124,58,237,.36);
}

.lead-card .chip.active,
.lead-card .chip[aria-pressed="true"]{
  box-shadow:inset 0 0 0 1px transparent;
}

@media (max-width:1023px){
  .lead-left{
    justify-content:flex-start;
    padding-block:0;
    gap:24px;
  }
}


/* ==========================================================================
   F. .footer-up — "Yuqoriga" tugmasi
   Oq pill foni va 100px radiusi bor edi, LEKIN `padding:0` — matn pillaga
   yopishib turardi (o'lchangan: 83×21px).
   ========================================================================== */
.footer-up{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:0 16px;
  border-radius:100px;
}

@media (max-width:767px){
  .footer-up{ min-height:44px; }
}


/* ==========================================================================
   G. MOBIL — yon yo'naltiruvchi chiziqlar (linyalar)

   `ff/08-signature.css:252` va `ff/09-qa.css:110` ularni 1279px dan pastda
   BUTUNLAY o'chirgan edi (chiziqlar `--wrap`=1200px dan hisoblanadi, tor
   ekranda ular ekrandan tashqarida qolardi).
   Yechim: tor ekranda chiziqlar `--wrap` dan emas, EKRAN CHETIDAN
   hisoblanadi — chap 10px, o'ng 10px. Konteyner paddingi 20px+ bo'lgani
   uchun kontent bilan chiziq orasida nafas qoladi.
   ========================================================================== */
@media (max-width:1279px){
  .section:not(#jarvis),
  .trust-band,
  #trust,
  #jarvis > .sec-light,
  .site-footer{
    background-image:
      repeating-linear-gradient(180deg, var(--rail) 0 3px, transparent 3px 5px),
      repeating-linear-gradient(180deg, var(--rail) 0 3px, transparent 3px 5px);
    background-size:1px 5px, 1px 5px;
    background-position:left 10px top, right 10px top;
    background-repeat:repeat-y, repeat-y;
  }

  /* Gorizontal lenta chiziqlar bilan "qafasga" tushmasin */
  #jarvis > .lanes{ background-image:none !important; }

  /* Bo'limlar orasidagi gorizontal ajratgichning TUGUNLARI vertikal
     chiziqlar bilan bir vertikalda tursin. Tugun markazi = pseudo'ning
     chap qirrasi + 5px, demak kenglik = 100% − 2·(chiziq) − ... */
  .section::after,
  .trust-band::after,
  #trust::after,
  #jarvis > .sec-light:not(.jv-proof-band)::after,
  #jarvis > .lanes::after{
    width:calc(100% - 10px);
  }
}

/* Juda tor ekran — chiziq ekran qirrasiga yaqinlashadi */
@media (max-width:479px){
  .section:not(#jarvis),
  .trust-band,
  #trust,
  #jarvis > .sec-light,
  .site-footer{
    background-position:left 7px top, right 7px top;
  }

  .section::after,
  .trust-band::after,
  #trust::after,
  #jarvis > .sec-light:not(.jv-proof-band)::after,
  #jarvis > .lanes::after{
    width:calc(100% - 4px);
  }
}


/* ==========================================================================
   H. SARLAVHA O'NG TOMONI — telefon pillasi va gamburger BIR O'LCHAMDA

   Muammo: `.nav-phone` ff/02-chrome:104 da referensga qarab 51px balandlikka
   ko'tarilgan edi, gamburger esa parts/01-chrome:299 dagi eski 44×44 da
   qolib ketdi — yonma-yon turgan ikki oq pill 7px farq bilan ko'rinardi.
   Bu yerda gamburger telefon pillasining balandligiga tenglashtiriladi.
   ========================================================================== */
#hamburger{
  width:51px;
  height:51px;
  min-width:51px;
  min-height:51px;
}

/* Tor ekranda telefon raqami yashirinib faqat ikonka qoladi (parts/01-chrome:761)
   — o'shanda ham u gamburger bilan bir xil KVADRAT pill bo'lsin. */
@media (max-width:520px){
  .nav-phone{
    width:51px;
    min-width:51px;
    height:51px;
    min-height:51px;
    padding:0;
    justify-content:center;
  }
}