/* ==========================================================================
   DEPTH.CSS — CHUQURLIK, RANG VA TUGMA QATLAMI   (2026-08-05)
   --------------------------------------------------------------------------
   Nima uchun: sayt AIwork referensiga sodiq qilinganda hamma narsa TEKIS
   bo'lib qoldi — soya yo'q, chegara yo'q, bitta ko'kdan boshqa rang yo'q.
   Otabek: "shadowlar bilan ranglarni yaxshilash kerak, dizayn sodda bo'lib
   qolgan", "buttonlar oddiy button bo'lib qolgan — buttonga o'xshatish kerak".

   Bu fayl BARCHA boshqa CSS'lardan KEYIN yuklanadi va uch narsani beradi:
     1. Qatlamli, ko'kka moyil soya shkalasi (elevation) — kartalar "turadi".
     2. Kengaytirilgan palitra: bitta ko'k → boshqariladigan 4 ta aksent.
     3. Haqiqiy, bosiladigan tugmalar: gradient + ichki yorug'lik + press.
   Yana: bo'lim atmosferasi (yumshoq nur), kursor spotlight, reveal
   yo'nalishlari va bosqichma-bosqich (stagger) kirish.

   Bekor qilish oson: 00-head.html dan shu bitta <link> ni olib tashlang.
   ========================================================================== */


/* ==========================================================================
   1. TOKENLAR — soya shkalasi va kengaytirilgan palitra
   ========================================================================== */

:root{

  /* --- 1.1 Soya rangi ---------------------------------------------------
     Toza qora soya kulrang fonda "kir" ko'rinadi. Brend ko'kiga moyil sovuq
     slate (56, 24, 74) ishlatamiz — u #fbf9f9 fonida toza va chuqur chiqadi. */
  --sh-rgb: 56, 24, 74;

  /* --- 1.2 Elevation shkalasi (har biri KO'P QATLAMLI) -------------------
     Har bir daraja: (a) yaqin kontakt soyasi, (b) o'rta yoyilish,
     (c) uzoq atmosfera soyasi. Bitta qatlamli soya "stiker" effektini
     beradi — qatlamli soya haqiqiy yorug'likka o'xshaydi. */
  --sh-1:
    0 1px 1px  rgba(var(--sh-rgb), .05),
    0 2px 4px -1px rgba(var(--sh-rgb), .05);

  --sh-2:
    0 1px 2px  rgba(var(--sh-rgb), .05),
    0 4px 8px -2px rgba(var(--sh-rgb), .05),
    0 12px 22px -8px rgba(var(--sh-rgb), .07);

  --sh-3:
    0 1px 2px  rgba(var(--sh-rgb), .05),
    0 8px 16px -4px rgba(var(--sh-rgb), .07),
    0 22px 40px -12px rgba(var(--sh-rgb), .12);

  --sh-4:
    0 2px 4px  rgba(var(--sh-rgb), .05),
    0 16px 32px -8px rgba(var(--sh-rgb), .10),
    0 40px 72px -20px rgba(var(--sh-rgb), .18);

  /* Ichki soch-chiziq: border o'rniga inset soya — layout'ni surmaydi,
     shuning uchun hover'da qalinlashtirsa ham element "sakramaydi". */
  --hair:      inset 0 0 0 1px rgba(var(--sh-rgb), .07);
  --hair-soft: inset 0 0 0 1px rgba(var(--sh-rgb), .045);
  --hair-acc:  inset 0 0 0 1px rgba(129, 75, 238, .22);

  /* Yuqori qirradagi oq yaltirash — yuza "ko'tarilgan"dek ko'rinadi */
  --gloss: inset 0 1px 0 rgba(255, 255, 255, .9);

  /* Ko'k tugma uchun rangli nur (neytral soya ko'k tugmani o'lik qiladi) */
  --sh-blue:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -1px 0 rgba(60, 22, 96, .30),
    0 1px 2px rgba(68, 26, 110, .28),
    0 6px 14px -4px rgba(129, 75, 238, .42),
    0 14px 30px -14px rgba(129, 75, 238, .55);

  --sh-blue-hi:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 0 -1px 0 rgba(60, 22, 96, .28),
    0 1px 2px rgba(68, 26, 110, .26),
    0 10px 20px -5px rgba(129, 75, 238, .48),
    0 22px 44px -16px rgba(129, 75, 238, .60);

  --sh-blue-press:
    inset 0 2px 5px rgba(52, 16, 86, .38),
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 1px 1px rgba(68, 26, 110, .22);

  /* --- 1.3 Ko'k shkalasi ------------------------------------------------ */
  --blue-50:  #f7f1fe;
  --blue-100: #ede2fd;
  --blue-200: #dcc7fb;
  --blue-300: #c762f6;
  --blue-400: #9b6bf2;
  --blue-500: #814bee;
  --blue-600: #6f36e0;
  --blue-700: #5a1fb8;

  /* --- 1.4 Yordamchi aksentlar ------------------------------------------
     DIQQAT: brend rangi baribir KO'K. Bu uchtasi faqat ikonka plitalari va
     kichik belgilarda ishlatiladi — sarlavha, tugma yoki katta yuzada EMAS.
     Maqsad: bir xil ko'k takrorlanaverib zerikarli bo'lgan joyni jonlantirish.
     Qiymatlar KONTRASTGA qarab tanlangan: har aksent o'zining och plitasi
     ustida kamida 3:1 chiqishi kerak (ikonka = UI elementi, WCAG 1.4.11).
     Ochroq amber (#c23b37) 2.4:1 berardi — ikonka plitada yo'qolib ketardi. */
  --acc-violet: #814bee;   /* plitasida 3.85:1 */
  --acc-cyan:   #b03cd9;   /* plitasida 3.43:1 */
  --acc-amber:  #d9433f;   /* plitasida 3.24:1 */

  /* --- 1.5 Chuqurroq sarlavha siyohi ------------------------------------
     #41175e iliq-kulrang: matn uchun yaxshi, sarlavha uchun "yuvilgan".
     Sarlavhalarni sovuq, chuqurroq siyohga o'tkazamiz — ko'k bilan bir
     oilada bo'ladi va sahifaga kontrast qaytaradi. */
  --ink-head: #41175e;

  /* --- 1.6 Sahifa yuzalari ---------------------------------------------- */
  --page-tint: #f4f1f5;    /* kulrang bo'lim — endi biroz sovuq */
  --panel-hi:  #ffffff;
  --panel-lo:  #fdfaff;    /* oq kartaning pastki qirrasi (nozik gradient) */
}


/* ==========================================================================
   2. SAHIFA ATMOSFERASI
   Katak/to'r naqsh YO'Q (Otabek yoqtirmagan). Buning o'rniga juda yumshoq,
   deyarli sezilmaydigan rangli nur — fon "tekis bo'yoq" bo'lib qolmaydi.
   ========================================================================== */

body{
  background:
    radial-gradient(1200px 700px at 50% -180px, rgba(129, 75, 238,.07), transparent 60%),
    linear-gradient(180deg, #faf6fb 0%, var(--page) 420px);
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-color: var(--page);
}

/* Bo'limlar ustidagi yumshoq nur.
   .aw-grid-bg::before eski to'r naqsh uchun band edi — u olib tashlangach
   bo'sh qolgan. Endi shu joyni atmosfera nuri egallaydi. */
.aw-grid-bg::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(820px 420px at 16% 8%,  rgba(129, 75, 238,.05),  transparent 64%),
    radial-gradient(680px 380px at 88% 30%, rgba(129, 75, 238,.04), transparent 66%);
  /* MUHIM: bo'lim qirrasida nur keskin uzilmasin — yuqori/pastki 14% da
     asta so'nadi. Aks holda bo'limlar orasida ko'rinadigan chok paydo bo'ladi. */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* Sarlavhalar — chuqurroq, sovuqroq siyoh */
h1, h2, h3, h4, h5, h6,
.sec-head,
.sec-head h2{ color:var(--ink-head); }

/* Ba'zi sarlavhalar #id bilan yozilgan qoidada rang oladi (#hero-h1,
   #jarvis .jv-head h2) — teg selektori ularni yenga olmaydi. Shu ikkitasi
   uchun aniq istisno; aks holda sahifadagi eng katta ikki sarlavha eski
   och kulrangda qolib ketardi. */
#hero-h1,
#jarvis .jv-head h2{ color:var(--ink-head); }

/* Ko'k blok ichida sarlavha baribir oq qoladi */
.aw-cta h1, .aw-cta h2, .aw-cta h3,
.aw-cta .sec-head, .aw-cta .sec-head h2{ color:#fff; }


/* ==========================================================================
   3. KARTALAR VA PANELLAR — chuqurlik
   ========================================================================== */

/* --- 3.1 Umumiy karta --------------------------------------------------- */
.aw-card{
  background:linear-gradient(180deg, var(--panel-hi) 0%, var(--panel-lo) 100%);
  border:0;
  box-shadow:var(--hair), var(--sh-2);
  transition:
    box-shadow .28s var(--ease),
    transform  .28s var(--ease),
    background .28s var(--ease);
}

.aw-card:hover{
  box-shadow:var(--hair), var(--sh-3);
  transform:translateY(-3px);
}

/* Karta ichidagi media/demo maydoni — botiq (inset) his beradi */
.aw-card__media,
.svc-stage{
  background:linear-gradient(180deg, #faf6fb 0%, #fffdff 100%);
  border:0;
  box-shadow:
    var(--hair-soft),
    inset 0 1px 3px rgba(var(--sh-rgb), .05);
}

/* --- 3.2 Katta oq panel ------------------------------------------------- */
.aw-panel{
  background:linear-gradient(180deg, #ffffff 0%, #fdfbff 100%);
  box-shadow:var(--hair-soft), var(--sh-3);
}

/* --- 3.3 Bo'lim-ichi kartalari (parts CSS ularga chegara bergan) -------- */
.svc-card,
.step,
.ls-card,
.jf-card,
.pf-card,
.fk-card,
.adv-card,
.work-card,
.faq-item,
.stat{
  border-color:transparent;
}

.svc-card{
  border:0;
  box-shadow:var(--hair), var(--sh-2);
}

.svc-card:hover{
  box-shadow:var(--hair-acc), var(--sh-3);
}

/* Xizmat kartalari 3D tilt uchun "transform:none !important" bilan qotirilgan
   edi (aiwork.css 9-bo'lim). Tilt endi JS'dan olib tashlandi — o'rniga toza
   ko'tarilish. :hover selektori ancha aniqroq, shuning uchun ustun keladi. */
[data-tilt][data-reveal].in:hover,
[data-tilt]:not([data-reveal]):hover{
  transform:translateY(-4px) !important;
}

/* --- 3.4 Kursor spotlight — kartada kursor ortidan yuradigan yumshoq nur -
   scroll.js allaqachon --mx/--my yozadi; ilgari uni hech kim ishlatmasdi. */
[data-spot]{
  position:relative;
  isolation:isolate;
}

[data-spot]::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  opacity:0;
  transition:opacity .35s var(--ease);
  background:radial-gradient(
    340px 340px at var(--mx, 50%) var(--my, 50%),
    rgba(129, 75, 238,.10),
    transparent 68%
  );
}

@media (hover:hover) and (pointer:fine){
  [data-spot]:hover::before{ opacity:1; }
}

/* Spotlight kontent ostida qolsin */
[data-spot] > *{ position:relative; z-index:1; }


/* ==========================================================================
   4. IKONKA PLITALARI — aksent bilan ranglash
   Mexanizm: har karta o'z --acc / --acc-lo qiymatini oladi, plita esa
   faqat shu o'zgaruvchilarni o'qiydi. HTML o'zgartirilmaydi (nth-child).
   ========================================================================== */

/* Standart (ko'k) */
.ib,
.svc-ico,
#hero .hc-ico{
  --acc: var(--blue-500);

  border:0;   /* eski qoidalarda 1px kulrang border bor edi — u rangli
                 inset halqa bilan ustma-ust tushib, QO'SH qirra berardi */
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--acc) 14%, #fff) 0%,
    color-mix(in srgb, var(--acc) 8%,  #fff) 100%) !important;
  /* Halqa ham AKSENTDAN olinadi. Ilgari bu yerda qotib qolgan ko'k rgba
     turardi — natijada binafsha/moviy/sariq ikonkalar KO'K halqa bilan
     chiqib, rang mos kelmasdi. */
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--acc) 26%, transparent),
    inset 0 1px 0 rgba(255,255,255,.75),
    0 2px 6px -1px color-mix(in srgb, var(--acc) 28%, transparent);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}

.ib svg,
.svc-ico svg,
#hero .hc-ico svg{ fill:var(--acc); }

/* MUHIM: bir qancha eski qoida `fill:currentColor` + `color:var(--blue)`
   zanjiridan foydalanadi va ular SPETSIFIKLIK bo'yicha kuchliroq
   (#jarvis .ib svg = 1-1-1, .ls-card .ib svg = 0-2-1). depth.css oxirida
   yuklansa ham yengiladi — natijada plita rangli, ikonka esa KO'K qolardi
   (14 ta plitada). Yechim: currentColor zanjirining o'zini aksentga burish. */
#jarvis .ib,
.ls-card .ib,
.pf-card .ib,
.jf-card .ib{ color:var(--acc); border:0; }

#jarvis .ib svg,
.ls-card .ib svg,
.pf-card .ib svg,
.jf-card .ib svg{ fill:var(--acc); }

/* Karta hover'da ikonka biroz ko'tariladi */
.aw-card:hover .ib,
.aw-card:hover .svc-ico,
#hero .hero-card:hover .hc-ico{
  transform:translateY(-2px) scale(1.04);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--acc) 40%, transparent),
    inset 0 1px 0 rgba(255,255,255,.8),
    0 6px 14px -3px color-mix(in srgb, var(--acc) 38%, transparent);
}

/* --- 4.1 Aksent taqsimoti — BEKOR QILINDI (Otabek, 2026-08-06) ----------
   Ilgari ikonka plitalari navbat bilan binafsha / moviy (#b03cd9) /
   qizil (#d9433f) ohangga bo'linardi: hero'da Chatbotlar qizil, Jarvis
   esa ko'k ramkali "flagman" karta edi. Otabek: "hammasi bir xil stilda
   bo'ladi, Saytlar va Telegram botlarga o'xshab".

   Endi HECH BIR karta `--acc` ni qayta yozmaydi — hammasi yuqoridagi
   standart qiymatni (--blue-500 = #814bee, brend binafshasi) meros oladi.
   Rang xilma-xilligini qaytarish kerak bo'lsa, shu blokni tiklash kifoya. */
#hero .hero-card .hc-ico,
.svc-grid > .svc-card .svc-ico,
.ls-card .ib,
.pf-card .ib,
.jf-card .ib{ --acc:var(--blue-500); }


/* --- 4.2 Kartaning yuqori qirrasidagi aksent chizig'i --------------------
   Hover'da kartaning tepasida o'z rangida ingichka chiziq chapdan o'ngga
   ochiladi. Karta "tirik" bo'ladi, lekin dam olayotganda toza qoladi. */
.svc-card,
.work-card,
.ls-card{
  overflow:hidden;
}

.svc-card::after,
.work-card::after,
.ls-card::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg,
    var(--card-acc, var(--blue-500)),
    color-mix(in srgb, var(--card-acc, var(--blue-500)) 30%, transparent));
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s var(--ease);
}

@media (hover:hover) and (pointer:fine){
  .svc-card:hover::after,
  .work-card:hover::after,
  .ls-card:hover::after{ transform:scaleX(1); }
}

.svc-grid > .svc-card:nth-child(2){ --card-acc:var(--acc-violet); }
.svc-grid > .svc-card:nth-child(3){ --card-acc:var(--acc-cyan);   }
.svc-grid > .svc-card:nth-child(4){ --card-acc:var(--acc-amber);  }

.ls-card:nth-child(4n+2){ --card-acc:var(--acc-violet); }
.ls-card:nth-child(4n+3){ --card-acc:var(--acc-cyan);   }
.ls-card:nth-child(4n+4){ --card-acc:var(--acc-amber);  }

.works-grid .work-card:nth-child(2){ --card-acc:var(--acc-cyan);   }
.works-grid .work-card:nth-child(3){ --card-acc:var(--acc-amber);  }
.works-grid .work-card:nth-child(4){ --card-acc:var(--acc-violet); }


/* ==========================================================================
   5. RAQAM BELGILARI — tekis doiralar → chuqurlikli jeton
   ========================================================================== */

.adv-dot,
.step-num{
  background:linear-gradient(180deg, var(--blue-50) 0%, var(--blue-100) 100%) !important;
  color:var(--blue-700) !important;
  box-shadow:
    inset 0 0 0 1px rgba(129, 75, 238,.20),
    inset 0 1px 0 rgba(255,255,255,.8),
    0 2px 5px -1px rgba(129, 75, 238,.24);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}

.aw-card:hover .adv-dot,
.aw-card:hover .step-num{
  transform:translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(129, 75, 238,.34),
    inset 0 1px 0 rgba(255,255,255,.85),
    0 6px 13px -3px rgba(129, 75, 238,.34);
}


/* ==========================================================================
   6. TUGMALAR — "haqiqiy tugma"
   Retsept: (a) vertikal gradient = yorug'lik tepadan, (b) tepa qirrada ichki
   oq chiziq = qirra yaltirashi, (c) pastda ichki to'q chiziq = qalinlik,
   (d) tashqarida RANGLI nur = tugma yuzadan uzilgan, (e) hover ko'tariladi,
   (f) bosilganda 1px pastga tushib soyasi ichkariga kiradi.
   ========================================================================== */

.btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  font-weight:600;
  letter-spacing:-0.005em;
  transition:
    transform .18s var(--ease),
    box-shadow .26s var(--ease),
    background-color .2s var(--ease),
    filter .2s var(--ease);
  will-change:transform;
}

/* Yaltirash — hover'da tugma yuzasidan chapdan o'ngga o'tadi.
   z-index:-1 va past alfa: o'lchov ko'rsatdiki, kuchli oq tasma MATN
   USTIDAN o'tganda oq matnning kontrasti 2.3:1 gacha tushib ketardi.
   Endi u matn ORTIDA va ancha yumshoq — ko'zga chiroyli, o'qishga zarar
   bermaydi (ko'k tugmada alfa yana ham pasaytiriladi, pastga qarang). */
.btn::after{
  content:"";
  position:absolute;
  top:0;
  left:-140%;
  width:60%;
  height:100%;
  pointer-events:none;
  z-index:-1;
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,.34) 50%,
    transparent 100%);
  transform:skewX(-18deg);
  transition:left .62s var(--ease);
}

@media (hover:hover) and (pointer:fine){
  .btn:hover::after{ left:140%; }
}

/* Chevron — hover'da oldinga siljiydi */
.btn > svg{
  position:relative;
  z-index:1;
  opacity:.85;
  transition:transform .28s var(--ease), opacity .2s var(--ease);
}
.btn:hover > svg{ transform:translateX(3px); opacity:1; }

/* --- 6.1 Asosiy (ko'k) --------------------------------------------------- */
/* KONTRAST QOIDASI (WCAG AA, oq matn 16px/600 = ODDIY matn → 4.5:1):
   gradientning ENG OCH nuqtasi ham 4.5:1 dan o'tishi SHART. Shuning uchun
   eng och to'xtam = #814bee (4.58:1), pastga tomon esa quyuqlashadi
   (5.05 → 6.18). "Yorug'lik tepadan" hissi rangni ochirish bilan emas,
   tepa qirradagi ichki OQ chiziq bilan beriladi — shunda ham chiroyli,
   ham o'qiladi. (Ilgari tepa #9b6bf2 = 3.51:1 edi — matn yuvilib ketardi.) */
.btn-primary,
.btn-blue{
  background-image:linear-gradient(180deg,
    var(--blue-500) 0%,
    #7a44e8 52%,
    #6b34dd 100%);
  background-color:var(--blue-500);
  color:#fff;
  border:0;
  box-shadow:var(--sh-blue);
  text-shadow:0 1px 1px rgba(60, 22, 94,.28);
}

/* Hover: rang ochilmaydi (kontrast buzilmasin) — tugma TEKISLASHADI va
   yorqinlashadi, nuri kattalashadi, o'zi 2px ko'tariladi. */
.btn-primary:hover,
.btn-blue:hover{
  color:#fff;
  background-color:var(--blue-500);
  background-image:linear-gradient(180deg,
    var(--blue-500) 0%,
    var(--blue-500) 46%,
    #7540e5 100%);
  box-shadow:var(--sh-blue-hi);
  transform:translateY(-2px);
}

.btn-primary:active,
.btn-blue:active{
  transform:translateY(1px);
  box-shadow:var(--sh-blue-press);
  background-image:linear-gradient(180deg, var(--blue-600) 0%, #6630d6 100%);
}

/* --- 6.2 Ikkilamchi / oq --------------------------------------------------
   Oq tugma ham TUGMA bo'lishi kerak: qirra + qatlamli soya + press. */
.btn-secondary,
.btn-light{
  background-image:linear-gradient(180deg, #ffffff 0%, #f8f4fa 100%);
  background-color:#fff;
  color:var(--ink-head);
  border:0;
  box-shadow:
    var(--gloss),
    inset 0 0 0 1px rgba(var(--sh-rgb), .12),
    var(--sh-1);
}

.btn-secondary:hover,
.btn-light:hover{
  color:var(--ink-head);
  background-image:linear-gradient(180deg, #ffffff 0%, #f1ebf2 100%);
  box-shadow:
    var(--gloss),
    inset 0 0 0 1px rgba(129, 75, 238,.30),
    0 2px 4px rgba(var(--sh-rgb), .06),
    0 10px 20px -6px rgba(var(--sh-rgb), .14);
  transform:translateY(-2px);
}

.btn-secondary:active,
.btn-light:active{
  transform:translateY(1px);
  background-image:linear-gradient(180deg, #f1ebf2 0%, #ebe3ee 100%);
  box-shadow:
    inset 0 2px 4px rgba(var(--sh-rgb), .12),
    inset 0 0 0 1px rgba(var(--sh-rgb), .14);
}

/* --- 6.3 Ghost (hero'dagi "Ishlarni ko'rish") ---------------------------
   Ilgari deyarli ko'rinmas edi. Endi u ham yuzaga ega. */
.btn-ghost{
  background-image:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(250, 246, 252,.92) 100%);
  color:var(--ink-head);
  border:0;
  box-shadow:
    var(--gloss),
    inset 0 0 0 1px rgba(var(--sh-rgb), .13),
    var(--sh-1);
}

.btn-ghost:hover{
  color:var(--ink-head);
  background-image:linear-gradient(180deg, #ffffff 0%, #f2ecf3 100%);
  box-shadow:
    var(--gloss),
    inset 0 0 0 1px rgba(129, 75, 238,.30),
    0 10px 20px -6px rgba(var(--sh-rgb), .14);
  transform:translateY(-2px);
}

.btn-ghost:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(var(--sh-rgb), .12),
    inset 0 0 0 1px rgba(var(--sh-rgb), .14);
}

/* --- 6.4 Ko'k CTA bloki ichidagi tugmalar ------------------------------- */
.aw-cta .btn-primary,
.aw-cta .btn-secondary,
.aw-cta .btn-blue{
  background-image:linear-gradient(180deg, #ffffff 0%, #f2ecf4 100%);
  background-color:#fff;
  color:var(--blue-700);
  border:0;
  text-shadow:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,.65),
    0 2px 4px rgba(58, 20, 92,.16),
    0 12px 26px -10px rgba(52, 16, 84,.45);
}

.aw-cta .btn-primary:hover,
.aw-cta .btn-secondary:hover,
.aw-cta .btn-blue:hover{
  color:var(--blue-700);
  background-image:linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,.8),
    0 4px 8px rgba(58, 20, 92,.18),
    0 20px 38px -12px rgba(52, 16, 84,.5);
  transform:translateY(-2px);
}

.aw-cta .btn-primary:active,
.aw-cta .btn-secondary:active,
.aw-cta .btn-blue:active{
  transform:translateY(1px);
  box-shadow:inset 0 2px 5px rgba(58, 20, 92,.2);
}

/* Ko'k blok ichidagi OQ karta (lead formasi) — tugma yana ko'k bo'ladi */
.aw-cta .lead-card .btn-primary{
  background-image:linear-gradient(180deg, var(--blue-500) 0%, #7a44e8 52%, #6b34dd 100%);
  background-color:var(--blue-500);
  color:#fff;
  text-shadow:0 1px 1px rgba(60, 22, 94,.28);
  box-shadow:var(--sh-blue);
}
.aw-cta .lead-card .btn-primary:hover{
  color:#fff;
  background-image:linear-gradient(180deg, var(--blue-500) 0%, var(--blue-500) 46%, #7540e5 100%);
  box-shadow:var(--sh-blue-hi);
  transform:translateY(-2px);
}
.aw-cta .lead-card .btn-primary:active{
  transform:translateY(1px);
  box-shadow:var(--sh-blue-press);
  /* Fon gradienti ham to'qlashsin — boshqa barcha primary tugmalarda
     shunday, bu yerda tushib qolgan edi (press "sezilmasdi"). */
  background-image:linear-gradient(180deg, var(--blue-600) 0%, #6630d6 100%);
}

/* Nav'dagi telefon tugmasi.
   position/overflow/isolation SHART: motion.js bosish to'lqinini shu
   elementga qo'yadi — ularsiz to'lqin tugmadan qochib, yonidagi JARVIS
   logotipi ustiga chiqib ketardi. */
.nav-phone{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border:0;
  background-image:linear-gradient(180deg, #ffffff 0%, #f8f4fa 100%);
  box-shadow:
    var(--gloss),
    inset 0 0 0 1px rgba(var(--sh-rgb), .12),
    var(--sh-1);
  transition:transform .18s var(--ease), box-shadow .26s var(--ease);
}
.nav-phone:hover{
  transform:translateY(-1px);
  box-shadow:
    var(--gloss),
    inset 0 0 0 1px rgba(129, 75, 238,.28),
    0 8px 16px -5px rgba(var(--sh-rgb), .14);
}
.nav-phone:active{ transform:translateY(1px); }


/* --- 6.5 Hero tugmalari --------------------------------------------------
   02-hero-trust.css da "#hero .hero-ctas .btn-ghost" qoidasi bor — u ID
   tufayli kuchliroq, shuning uchun bu yerda ham #hero bilan yozamiz. */
#hero .hero-ctas .btn-ghost{
  background:linear-gradient(180deg, #ffffff 0%, #f8f4fa 100%);
  border:0;
  box-shadow:
    var(--gloss),
    inset 0 0 0 1px rgba(var(--sh-rgb), .13),
    var(--sh-1);
}

#hero .hero-ctas .btn-ghost:hover{
  background:linear-gradient(180deg, #ffffff 0%, #f2ecf3 100%);
  box-shadow:
    var(--gloss),
    inset 0 0 0 1px rgba(129, 75, 238,.30),
    0 10px 20px -6px rgba(var(--sh-rgb), .14);
}

#hero .hero-ctas .btn-ghost:active{
  box-shadow:
    inset 0 2px 4px rgba(var(--sh-rgb), .12),
    inset 0 0 0 1px rgba(var(--sh-rgb), .14);
}


/* ==========================================================================
   7. KICHIK BOSHQARUVLAR — chip, tab, eyebrow, forma
   ========================================================================== */

.chip,
.wk-tab,
.jo-chip{
  background-image:linear-gradient(180deg, #ffffff 0%, #f9f5fb 100%);
  border:0;
  box-shadow:
    var(--gloss),
    inset 0 0 0 1px rgba(var(--sh-rgb), .11),
    var(--sh-1);
  transition:transform .18s var(--ease), box-shadow .24s var(--ease), color .2s var(--ease);
}

.chip:hover,
.wk-tab:hover,
.jo-chip:hover{
  transform:translateY(-1px);
  box-shadow:
    var(--gloss),
    inset 0 0 0 1px rgba(129, 75, 238,.28),
    0 6px 12px -4px rgba(var(--sh-rgb), .14);
}

.chip:active,
.wk-tab:active,
.jo-chip:active{ transform:translateY(1px); }

.chip.active,
.chip[aria-pressed="true"],
.jo-chip.active{
  background-image:linear-gradient(180deg, var(--blue-50) 0%, var(--blue-100) 100%);
  color:var(--blue-700);
  box-shadow:
    inset 0 0 0 1px rgba(129, 75, 238,.42),
    inset 0 1px 0 rgba(255,255,255,.8),
    0 3px 8px -2px rgba(129, 75, 238,.28);
}

/* Portfolio tab — faol holat to'q */
.wk-tab.active,
.wk-tab[aria-selected="true"]{
  background-image:linear-gradient(180deg, #4a2065 0%, #2f1147 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 2px 4px rgba(var(--sh-rgb), .22),
    0 10px 20px -8px rgba(var(--sh-rgb), .38);
}

/* Eyebrow pill — tekis oq edi, endi qirrasi bor */
.eyebrow,
.aw-eyebrow{
  background-image:linear-gradient(180deg, #ffffff 0%, #f8f4fb 100%);
  box-shadow:
    var(--gloss),
    inset 0 0 0 1px rgba(129, 75, 238,.16),
    0 1px 2px rgba(var(--sh-rgb), .05),
    0 4px 10px -4px rgba(129, 75, 238,.22);
}

.eyebrow::before,
.aw-eyebrow::before{
  box-shadow:0 0 0 3px rgba(129, 75, 238,.16);
}

/* (Ko'k blok ichidagi eyebrow varianti 9-bo'limda — kontrast uchun to'q.) */

/* Forma maydonlari — botiq */
.field input,
.field textarea,
.field select,
input[type="text"],
input[type="tel"],
input[type="email"],
textarea,
select{
  border:0;
  background:#fffdff;
  box-shadow:
    inset 0 0 0 1px rgba(var(--sh-rgb), .13),
    inset 0 2px 4px rgba(var(--sh-rgb), .05);
  transition:box-shadow .22s var(--ease), background .22s var(--ease);
}

.field input:focus,
.field textarea:focus,
.field select:focus,
input:focus,
textarea:focus,
select:focus{
  background:#fff;
  box-shadow:
    inset 0 0 0 1px var(--blue-500),
    inset 0 2px 4px rgba(var(--sh-rgb), .04),
    0 0 0 4px rgba(129, 75, 238,.16);
}

.field.invalid input,
.field.invalid textarea,
input.invalid,
textarea.invalid{
  box-shadow:
    inset 0 0 0 1px var(--danger),
    inset 0 2px 4px rgba(var(--sh-rgb), .05);
}

/* CTA formasi: `.lead-card .field input` (0-3-1) yuqoridagi qoidadan
   kuchliroq bo'lgani uchun eski 1px border joyida qolib, yangi inset
   halqa ustiga tushardi — natijada 2px QO'SH qirra. */
.lead-card .field input,
.lead-card .field textarea,
.lead-card .field select{
  border:0;
  background:#fffdff;
  box-shadow:
    inset 0 0 0 1px rgba(var(--sh-rgb), .13),
    inset 0 2px 4px rgba(var(--sh-rgb), .05);
}

.lead-card .field input:focus,
.lead-card .field textarea:focus,
.lead-card .field select:focus{
  background:#fff;
  box-shadow:
    inset 0 0 0 1px var(--blue-500),
    inset 0 2px 4px rgba(var(--sh-rgb), .04),
    0 0 0 4px rgba(129, 75, 238,.16);
}


/* ==========================================================================
   8. HEADER — suzuvchi panel
   ========================================================================== */

#site-header .nav-shell,
#site-header .nav-inner,
#site-header{
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}

#site-header.scrolled .nav-shell,
#site-header.scrolled .nav-inner{
  box-shadow:
    var(--hair-soft),
    0 1px 2px rgba(var(--sh-rgb), .05),
    0 10px 26px -10px rgba(var(--sh-rgb), .20);
}

/* Scroll progress chizig'i — ko'k gradient */
#sp-fill{
  background:linear-gradient(90deg, var(--blue-600), var(--blue-400), var(--acc-violet)) !important;
  box-shadow:0 0 12px rgba(129, 75, 238,.55);
}


/* ==========================================================================
   9. CTA BLOKI — boyroq gradient
   Tekis ikki-to'xtamli gradient o'rniga qatlamli, chuqurlikka ega ko'k.
   ========================================================================== */

/* KONTRAST QOIDASI: bu blok ustida OQ matn turadi. Demak fonning ENG OCH
   nuqtasi ham oq bilan 4.5:1 berishi shart — ya'ni #814bee (4.58:1) dan
   ochroq joy BO'LMASLIGI kerak.
   Shu sababli chuqurlik endi OCHARTIRISH bilan emas, QORAYTIRISH bilan
   beriladi: ikkita to'q radial nur (pastki-chap ko'k-siyoh, pastki-o'ng
   binafsha) + gradient. Ilgari yuqori-chapda oq radial bor edi — u aynan
   sarlavha ortidagi fonni 3.66:1 gacha yuvib yuborardi. */
.aw-cta{
  background-image:
    radial-gradient(760px 420px at 4% 104%, rgba(56, 18, 90,.30), transparent 62%),
    radial-gradient(720px 520px at 98% 106%, rgba(120, 70, 220,.42), transparent 62%),
    linear-gradient(158deg, #6a2bd2 0%, #7b45e8 48%, var(--blue-500) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 10px 24px -8px rgba(86, 40, 168,.32),
    0 34px 64px -24px rgba(86, 40, 168,.45);
}

/* Ko'k blokdagi matnlar — shaffoflik olib tashlanadi (alfa kontrastni
   4.5:1 dan pastga tushirardi, ayniqsa mobilda). */
.aw-cta > p,
.aw-cta .sec-sub,
.aw-cta .jv-sub,
.aw-cta .lead,
.aw-cta .cta-extra,
.aw-cta .lead-left p{ color:#fff; }

/* Ko'k blok ichidagi OQ karta (lead formasi) o'z ranglarini saqlaydi */
.aw-cta .lead-card p{ color:var(--ink); }
.aw-cta .lead-card .form-note{ color:var(--ink-dim); }

/* Eyebrow: shaffof-oq tabletkada oq matn 2.9–3.6:1 edi. To'q tabletka
   qilamiz — oq matn bilan 6:1 dan yuqori, ko'k fonda ham chiroyli. */
.aw-cta .eyebrow,
.aw-cta .aw-eyebrow{
  background-image:none;
  background-color:rgba(60, 22, 96,.34);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.30);
}

.aw-cta .eyebrow::before,
.aw-cta .aw-eyebrow::before{
  background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.22);
}

/* FOKUS HALQASI ko'k yuzada: ko'k halqa ko'k fonda 1.0:1 — klaviatura
   bilan yurgan odam qayerdaligini umuman ko'rmaydi. Oq halqa + tashqi
   to'q kontur har ikkala fonda ham ishlaydi. */
.aw-cta :focus-visible,
.wk-tab.active:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(60, 22, 96,.45);
}

/* CTA ichidagi oq forma kartasi — ko'k ustida "suzadi" */
.aw-cta .lead-card{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 2px 6px rgba(58, 20, 92,.14),
    0 26px 54px -18px rgba(52, 16, 84,.42);
}


/* ==========================================================================
   10. PORTFOLIO MUQOVALARI
   Bo'sh kulrang to'rtburchak + och raqam juda bo'sh ko'rinardi. Endi har
   loyiha o'z rangli muqovasiga ega (rasm kelguncha ham hurmatli ko'rinadi).
   ========================================================================== */

.work-visual{
  position:relative;
  overflow:hidden;
  box-shadow:var(--hair-soft), inset 0 1px 3px rgba(var(--sh-rgb), .06);
}

.work-visual::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(255,255,255,.55), transparent 55%);
}

.wv-1{ background-image:linear-gradient(150deg, #f0e6fd 0%, #f7f2fe 55%, #f3ecfe 100%); }
.wv-2{ background-image:linear-gradient(150deg, #f6e4f4 0%, #fbf1fb 55%, #f8eaf6 100%); }
.wv-3{ background-image:linear-gradient(150deg, #fde5e5 0%, #fdf1f1 55%, #fce9e9 100%); }
.wv-4{ background-image:linear-gradient(150deg, #efe6fe 0%, #f8f3fe 55%, #f2eafe 100%); }

.wv-num{
  position:relative;
  z-index:1;
  font-weight:600;
  background:linear-gradient(180deg, rgba(var(--sh-rgb),.22), rgba(var(--sh-rgb),.08));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.work-card:hover .work-visual::after{
  background:radial-gradient(120% 120% at 12% 0%, rgba(255,255,255,.7), transparent 58%);
}


/* ==========================================================================
   10b. STATISTIKA TASMASI — raqamlar boyroq
   4 ta kulrang raqam juda quruq turardi. Endi ular chuqur gradient siyoh,
   qo'shimchasi (+ / yil) esa ko'k — ko'z avval raqamga tushadi.
   ========================================================================== */

#trust .stats{
  position:relative;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  #trust .stat-num > .count,
  #trust .stat-num{
    /* 180deg — TIK gradient. Burchakli gradient tor raqamda ("3") tez tugab,
       raqam ochroq/ko'kroq chiqib qolardi; tik gradient kenglikka bog'liq emas. */
    background-image:linear-gradient(180deg, #24093a 0%, #3a1256 68%, #4b1e6b 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

#trust .stat-num small{
  color:var(--blue-500);
  -webkit-text-fill-color:var(--blue-500);
  font-weight:600;
}

/* Har ustun tagida nozik aksent chizig'i — ko'rinishga kirganda cho'ziladi */
#trust .stat{
  position:relative;
  padding-bottom:6px;
}

#trust .stat::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-2px;
  width:0;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--blue-500), var(--acc-violet));
  transform:translateX(-50%);
  transition:width .8s var(--ease) calc(var(--ri, 0) * 90ms + .25s);
  opacity:.7;
}

#trust .stat.in::after,
.qa-flat #trust .stat::after,
.qa-show #trust .stat::after{ width:34px; }


/* ==========================================================================
   10c. NAVIGATSIYA — havolalar ostida chiziq o'sadi
   ========================================================================== */

.nav-links a{
  position:relative;
}

.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:4px;
  height:2px;
  border-radius:2px;
  background:var(--blue-500);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .32s var(--ease);
}

.nav-links a:hover::after,
.nav-links a.active::after{ transform:scaleX(1); }


/* ==========================================================================
   11. YULDUZLAR / MIJOZ FIKRLARI
   ========================================================================== */

.fk-card{
  box-shadow:var(--hair), var(--sh-2);
}

.fk-card:hover{
  box-shadow:var(--hair), var(--sh-3);
}

/* Avatar doirasi — jeton */
.fk-av,
.fk-avatar{
  box-shadow:
    inset 0 0 0 1px rgba(129, 75, 238,.22),
    inset 0 1px 0 rgba(255,255,255,.7),
    0 3px 8px -2px rgba(129, 75, 238,.26);
}


/* ==========================================================================
   12. FAQ
   ========================================================================== */

.faq-item{
  border:0;
  background:linear-gradient(180deg, #fff 0%, #fdfaff 100%);
  box-shadow:var(--hair), var(--sh-1);
  transition:box-shadow .26s var(--ease), transform .26s var(--ease);
}

.faq-item:hover{
  box-shadow:var(--hair-acc), var(--sh-2);
}

.faq-item.open,
.faq-item[aria-expanded="true"],
.faq-item.is-open{
  box-shadow:var(--hair-acc), var(--sh-2);
}


/* ==========================================================================
   13. FOOTER
   ========================================================================== */

#site-footer,
.site-footer{
  box-shadow:inset 0 1px 0 rgba(var(--sh-rgb), .08);
}


/* ==========================================================================
   14. HARAKAT — reveal yo'nalishlari va bosqichma-bosqich kirish
   main.js allaqachon data-reveal="rise|scale|left|right" va --ri indeksini
   yozadi, lekin redizayndan keyin bu variantlar uchun CSS qolmagan edi —
   shuning uchun hamma element BIR VAQTDA, bir xil paydo bo'lardi.
   ========================================================================== */

/* MUAMMO (audit o'lchovi): reveal `transform` ustida ishlardi, lekin
   kartalarning hover uchun qo'yilgan `transition:box-shadow,transform,
   background` qisqartmasi undan KEYIN yuklanib, transition-property'ni
   butunlay almashtirardi — natijada 44 ta element opacity'siz, ya'ni
   "sakrab" paydo bo'lardi.

   YECHIM: reveal endi mustaqil `translate` va `scale` xossalarida ishlaydi
   (ular `transform` bilan aralashmaydi va bir-birining ustiga qo'shiladi).
   Shunda bitta elementda IKKI xil harakat tinch yashaydi:
     · reveal  — sekin (.72s), navbat bilan (--ri kechikishi), translate/scale
     · hover   — tez (.28s), kechikishsiz, transform/box-shadow
   Ilgari ikkalasi bitta `transform` uchun kurashardi. */
[data-reveal]{
  --rd:calc(var(--ri, 0) * 70ms);
  opacity:0;
  transform:none;              /* aiwork.css'dagi translateY(16px) o'rniga */
  translate:0 22px;
  transition-property:opacity, translate, scale;
  transition-duration:.72s;
  transition-timing-function:var(--ease);
  transition-delay:var(--rd);
}

[data-reveal="rise"]  { translate:0 26px; }
[data-reveal="scale"] { translate:0 14px; scale:.972; }
[data-reveal="left"]  { translate:-28px 0; }
[data-reveal="right"] { translate:28px 0; }

[data-reveal].in{
  opacity:1;
  translate:none;
  scale:1;
}

/* Hover'i bor elementlarda ikkala harakatni BIR ro'yxatda beramiz.
   Spetsifiklik (0,2,0) — yuqoridagi umumiy qoidadan kuchliroq. */
.aw-card[data-reveal],
.svc-card[data-reveal],
.work-card[data-reveal],
.ls-card[data-reveal],
.faq-item[data-reveal],
#tamoyillar .pr-row[data-reveal]{
  transition-property:opacity, translate, scale, box-shadow, transform, background-color;
  transition-duration:.72s, .72s, .72s, .28s, .28s, .28s;
  transition-timing-function:var(--ease);
  transition-delay:var(--rd), var(--rd), var(--rd), 0s, 0s, 0s;
}

/* Stat raqamlari sanab tugagach nozik "qo'nish" */
.stat.is-done .stat-num{
  animation:dp-land .5s var(--ease);
}

@keyframes dp-land{
  0%   { transform:translateY(0) scale(1); }
  38%  { transform:translateY(-3px) scale(1.03); }
  100% { transform:translateY(0) scale(1); }
}

/* Eyebrow nuqtasi — sekin "nafas" */
.eyebrow::before,
.aw-eyebrow::before{
  animation:dp-pulse 2.8s ease-in-out infinite;
}

@keyframes dp-pulse{
  0%, 100%{ box-shadow:0 0 0 3px rgba(129, 75, 238,.16); }
  50%     { box-shadow:0 0 0 6px rgba(129, 75, 238,.05); }
}


/* ==========================================================================
   14b. MOTION.JS BILAN JUFT ISHLAYDIGAN STILLAR
   ========================================================================== */

/* --- Tugmada kursor ortidan yuradigan yumshoq yorug'lik ------------------ */
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  /* z-index:-1 — MUHIM. Musbat/nol z-index bilan bu yorug'lik tugma MATNI
     USTIGA chiqib, matnni oqartirib yuborardi (matn tugmada oddiy matn
     tuguni, ya'ni pozitsiyalanmagan qatlamda). Manfiy qiymat uni tugma
     fonidan yuqoriga, matndan pastga qo'yadi. */
  z-index:-1;
  pointer-events:none;
  opacity:0;
  transition:opacity .28s var(--ease);
  background:radial-gradient(
    120px 120px at var(--bx, 50%) var(--by, 50%),
    rgba(255,255,255,.30),
    transparent 70%
  );
}

/* KO'K TUGMA: oq nur va yaltirash matn ortidagi fonni oqartirib, oq matnni
   AA chegarasidan tushirib yuborardi (o'lchangan 2.4:1). Ko'k tugmada
   nurni butunlay o'chiramiz, yaltirashni esa juda yumshoq qoldiramiz —
   chuqurlikni gradient, ichki qirra va rangli soya baribir beryapti. */
.btn-primary::before,
.btn-blue::before,
.aw-cta .lead-card .btn-primary::before{ display:none; }

.btn-primary::after,
.btn-blue::after,
.aw-cta .lead-card .btn-primary::after{
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,.16) 50%,
    transparent 100%);
}

/* Oq tugmalarda oq nur ko'rinmaydi — ko'k nur beramiz */
.btn-secondary::before,
.btn-light::before,
.btn-ghost::before,
#hero .hero-ctas .btn-ghost::before,
.aw-cta .btn-primary::before,
.aw-cta .btn-secondary::before{
  background:radial-gradient(
    120px 120px at var(--bx, 50%) var(--by, 50%),
    rgba(129, 75, 238,.14),
    transparent 70%
  );
}

@media (hover:hover) and (pointer:fine){
  .btn:hover::before{ opacity:1; }
}

/* Tugma matni nurdan yuqorida tursin */
.btn{ z-index:0; }
.btn > *{ position:relative; z-index:1; }

/* --- Bosish to'lqini (motion.js qo'shadi) -------------------------------- */
.btn-ripple{
  position:absolute;
  z-index:-1;              /* matn ostida, fon ustida — yuqoridagi izohga qarang */
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 62%);
  transform:scale(0);
  opacity:.9;
  animation:dp-ripple .6s var(--ease) forwards;
}

.btn-secondary .btn-ripple,
.btn-light .btn-ripple,
.btn-ghost .btn-ripple,
.aw-cta .btn-primary .btn-ripple,
.nav-phone .btn-ripple{
  background:radial-gradient(circle, rgba(129, 75, 238,.26) 0%, rgba(129, 75, 238,0) 62%);
}

@keyframes dp-ripple{
  to{ transform:scale(1); opacity:0; }
}

/* --- Sarlavha aksenti bir marta yonib o'tadi -----------------------------
   @supports shart: background-clip:text ishlamaydigan brauzerda matn
   ko'rinmay qolmasin — u yerda oddiy ko'k matn bo'lib qolaveradi. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .h1-accent,
  .h2-accent{
    position:relative;
    background-image:linear-gradient(
      100deg,
      var(--blue-500) 0%,
      var(--blue-500) 38%,
      #bb96f7 50%,
      var(--blue-500) 62%,
      var(--blue-500) 100%);
    background-size:280% 100%;
    background-position:100% 0;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }

  .h1-accent.acc-lit,
  .h2-accent.acc-lit{
    transition:background-position 1.15s var(--ease);
    background-position:0 0;
  }

  /* ISTISNO: ko'k CTA bloki ichida aksent OQ bo'ladi. U yerda ko'k gradientli
     matn ko'k fonda ko'rinmay qolardi — sarlavhaning yarmi yo'qolgandek. */
  .aw-cta .h1-accent,
  .aw-cta .h2-accent,
  .lead-left .h2-accent{
    background-image:none;
    -webkit-text-fill-color:rgba(255,255,255,.75);
    color:rgba(255,255,255,.75);
    transition:none;
  }
}

/* --- Bo'lim ekranga kirganda atmosfera nuri yumshoq ochiladi ------------- */
.aw-grid-bg::before{
  opacity:0;
  transition:opacity 1.1s var(--ease);
}

.aw-grid-bg.in-view::before,
.qa-flat .aw-grid-bg::before,
.qa-show .aw-grid-bg::before,
.no-anim .aw-grid-bg::before{ opacity:1; }


/* ==========================================================================
   15. QA VA REDUCED-MOTION QO'RIQLARI
   ========================================================================== */

/* Headless skrinshot rejimlari — hamma narsa darrov ko'rinadi */
.no-anim [data-reveal],
.qa-flat [data-reveal],
.qa-show [data-reveal],
.works-static [data-reveal]{
  transform:none !important;
  translate:none !important;
  scale:1 !important;
  transition-delay:0ms !important;
}

@media (prefers-reduced-motion:reduce){
  .btn::after,
  .btn::before,
  .btn-ripple{ display:none; }

  .aw-grid-bg::before{ opacity:1; transition:none; }
  .h1-accent, .h2-accent{ transition:none; }
  .btn:hover,
  .btn:active,
  .aw-card:hover,
  .chip:hover,
  .wk-tab:hover,
  .nav-phone:hover{ transform:none !important; }

  [data-reveal]{
    transform:none !important;
    translate:none !important;
    scale:1 !important;
    transition-delay:0ms !important;
  }
  [data-spot]::before{ display:none; }

  .eyebrow::before,
  .aw-eyebrow::before,
  .stat.is-done .stat-num{ animation:none !important; }
}


/* ==========================================================================
   16. RESPONSIV — mobilda soyalar biroz yengillashadi
   ========================================================================== */

@media (max-width:767px){
  :root{
    --sh-2:
      0 1px 2px rgba(var(--sh-rgb), .05),
      0 4px 10px -4px rgba(var(--sh-rgb), .07);
    --sh-3:
      0 1px 2px rgba(var(--sh-rgb), .05),
      0 8px 18px -6px rgba(var(--sh-rgb), .10);
  }

  .aw-card:hover{ transform:none; }
  .btn:hover{ transform:none; }

  /* MOBILDA HAR TUGMA — O'Z QATORIDA (Otabek so'rovi).
     Ilgari ikkalasi flex:1 bilan bitta qatorni bo'lishardi: matn siqilib,
     tugmalar tor va qiyshiq ko'rinardi. Endi to'liq kenglik, ustma-ust. */
  #hero .hero-ctas{
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:10px;
    width:100%;
    max-width:400px;
    margin-inline:auto;
  }

  #hero .hero-ctas .btn{
    flex:0 0 auto;
    width:100%;
    justify-content:center;
  }

  /* Boshqa joylardagi yonma-yon tugma juftliklari ham shunday */
  .cta-actions,
  .jv-cta-row,
  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .cta-actions .btn,
  .jv-cta-row .btn,
  .hero-actions .btn{ width:100%; }
}


/* ==========================================================================
   17. CHOP ETISH
   ========================================================================== */

@media print{
  body{ background:#fff !important; }
  .aw-grid-bg::before,
  .btn::after,
  [data-spot]::before{ display:none !important; }
  .aw-card,
  .aw-panel,
  .btn{ box-shadow:none !important; }
}