/* ==========================================================================
   05-LANES-PROOF.CSS — "10 yo'nalish" karuseli + "Jarvis allaqachon
   ishlayapti" isbot bloki + ko'k CTA
   --------------------------------------------------------------------------
   Poydevor: css/aiwork.css (tokenlar, .aw-card, .aw-panel, .aw-cta, .eyebrow).
   Bu yerda faqat shu bo'limga xos qoidalar. Yangi rang o'ylab topilmagan.
   ========================================================================== */


/* ==========================================================================
   1. #lanes — OQ TASMA (kulrang sahifa ustida)
   ========================================================================== */

.lanes{
  position:relative;
  background:var(--panel);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow-x:clip;

  /* DIQQAT — js/main.js pin matematikasi bu blokka MANFIY inline margin
     yozadi (eski, foni bo'lmagan dizayn uchun mo'ljallangan edi). Endi blok
     ko'rinadigan OQ TASMA: manfiy margin tasmani va uning yuqori chegarasini
     oldingi bo'lim kontenti ustiga surib yuborardi. Shuning uchun marginni
     CSS qat'iy belgilaydi.
     Karusel matematikasi faqat offsetHeight va getBoundingClientRect'ga
     tayanadi — ularga margin ta'sir qilmaydi, ya'ni pin buzilmaydi
     (buni main.js dagi izohning o'zi ham tasdiqlaydi). */
  margin-top:var(--band) !important;
  margin-bottom:0 !important;
}

/* Pinlangan qatlam — JS wrap balandligini o'lchaydi, bu yerda faqat sticky.
   DIQQAT: JS .lanes-stick bolalarining offsetHeight'ini va rowGap'ini o'qiydi,
   shuning uchun uch bola (head / view / progress) va gap saqlanadi. */
.lanes-stick{
  position:sticky;
  top:0;
  z-index:1;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(28px, 4vh, 44px);
  /* vh asosida — past ekranli noutbukda ham kontent 100vh ga sig'adi */
  padding-block:clamp(32px, 5vh, 80px);
}


/* --- 1.1 Sarlavha bloki: chapda eyebrow pill + h3 ----------------------- */
.lanes-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  text-align:left;
}

.lanes-head .jv-sub{
  margin:0;
  max-width:24ch;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(26px, 3.2vw, 32px);
  line-height:1.2;
  letter-spacing:-0.025em;
  color:var(--ink);
}


/* --- 1.2 Ko'rish oynasi + lenta ----------------------------------------- */
/* overflow:hidden ikkala o'q uchun — JS faqat overflow-x ni almashtiradi,
   shuning uchun vertikal o'q hech qachon "auto" ga aylanmaydi.
   padding/margin juftligi karta hover soyasiga nafas beradi. */
.lanes-view:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }

.lanes-view{
  width:100%;
  overflow:hidden;
  padding-block:16px;
  margin-block:-16px;
  overscroll-behavior-x:contain;
  touch-action:pan-x pan-y;
}

.lanes-track{
  display:flex;
  align-items:stretch;
  gap:var(--gap);
  /* birinchi karta .container chap chegarasiga tekislanadi */
  padding-inline:max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad)));
  will-change:transform;
}


/* --- 1.3 Karta (asosi .aw-card) ---------------------------------------- */
.ls-card{
  flex:none;
  width:320px;
  display:flex;
  flex-direction:column;
  border-radius:var(--r-lg);
}

.ls-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

/* Ikon plitasi — faqat shu bo'limda (boshqa bo'limlar .ib sini bosmaydi) */
.ls-card .ib,
.pf-card .ib{
  display:inline-grid;
  place-items:center;
  flex:none;
  width:40px;
  height:40px;
  border-radius:var(--r-md);
  background:var(--panel-2);
  border:1px solid var(--line-soft);
  color:var(--blue);
}

.ls-card .ib svg,
.pf-card .ib svg{
  width:19px;
  height:19px;
  fill:currentColor;
  stroke:none;
}

.ls-num{
  font-family:var(--display);
  font-weight:500;
  font-size:13px;
  line-height:1;
  letter-spacing:0.02em;
  color:var(--ink-dim);
}

.ls-title{
  font-family:var(--display);
  font-weight:500;
  font-size:19px;
  line-height:1.3;
  letter-spacing:-0.015em;
  color:var(--ink);
}

.ls-body{
  font-family:var(--body);
  font-weight:400;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-mut);
  margin-top:8px;
  /* ikki qatorga teng minimal balandlik — 10 kartada ham ajratgich chizig'i
     bir xil balandlikda turadi (referensdagidek tinch ritm) */
  min-height:48px;
}

.ls-rule{
  display:block;
  height:1px;
  background:var(--line-soft);
  margin:18px 0 16px;
}

.ls-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ls-list li{
  position:relative;
  padding-left:16px;
  font-family:var(--body);
  font-weight:400;
  font-size:14px;
  line-height:1.5;
  color:var(--ink-mut);
}

.ls-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:5px;
  height:5px;
  border-radius:var(--r-pill);
  background:var(--blue);
}


/* --- 1.4 Progress chizig'i --------------------------------------------- */
/* JS `bar.style.transform = scaleX(...)` yozadi — CSS transform-origin va
   width:100% beradi, transform qiymatiga tegmaydi. */
.lanes-progress{
  position:relative;
  height:3px;
  border-radius:var(--r-pill);
  background:var(--line);
  overflow:hidden;
}

.lanes-bar{
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:var(--blue);
  transform:scaleX(0);
  transform-origin:left center;
  will-change:transform;
}


/* ==========================================================================
   2. "Jarvis allaqachon ishlayapti" — kulrang to'rli fon + oq panel
   ========================================================================== */

/* DIQQAT: `.sec-light` boshqa partlarda ham uchraydi — shuning uchun
   qoidalar faqat shu blokka qo'shilgan `.jv-proof-band` sinfiga bog'landi. */
.jv-proof-band{
  position:relative;
  padding-top:var(--band);
  /* pastki bo'shliqni <section> ning o'z padding-bottom'i beradi */
}

.jv-proof-band > .container{
  position:relative;
  z-index:1;
}

.jv-proof{
  text-align:center;
}

.jv-proof .jv-sub{
  margin:0;
  max-width:none;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(24px, 2.8vw, 32px);
  line-height:1.2;
  letter-spacing:-0.025em;
  color:var(--ink);
}

.jv-proof-intro{
  font-family:var(--body);
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  color:var(--ink-mut);
  max-width:var(--measure);
  margin:14px auto 0;
}

.jv-proof-list{
  margin-top:clamp(28px, 3.5vw, 44px);
  text-align:left;
}

.pf-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  border-radius:var(--r-lg);
}

.pf-card p{
  margin:0;
  font-family:var(--body);
  font-weight:400;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-mut);
}

.pf-card b{
  display:block;
  font-family:var(--display);
  font-weight:500;
  font-size:16px;
  line-height:1.35;
  letter-spacing:-0.012em;
  color:var(--ink);
  margin-bottom:4px;
}


/* ==========================================================================
   3. Ko'k CTA bloki (asosi .aw-cta — gradient + oq dashed to'r)
   ========================================================================== */

.jv-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(24px, 3vw, 32px);
  margin-top:clamp(32px, 4vw, 56px);
}

/* eski neon/nuqta qatlamlari — butunlay yo'q */
.jv-cta .cp-glow,
.jv-cta .svc-dots{ display:none !important; }

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

/* .aw-cta p (0,2,0) rangni .85 ga tushiradi — sarlavha uchun bir xil
   spetsifiklikda, lekin KEYIN kelgan qoida bilan oq rangga qaytaramiz */
.jv-cta .jv-cta-title{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(26px, 3vw, 40px);
  line-height:1.15;
  letter-spacing:-0.025em;
  color:#fff;
}

.jv-cta .jv-cta-sub{
  font-family:var(--body);
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  color:rgba(255,255,255,.85);
  margin-top:14px;
}

/* Oq shaffof tugma — qora matn */
.jv-cta .btn,
.jv-cta .btn-primary{
  flex:none;
  background:rgba(255,255,255,.92);
  color:var(--ink);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--r-sm);
  box-shadow:var(--sh-1);
}

.jv-cta .btn:hover,
.jv-cta .btn-primary:hover{
  background:#fff;
  color:var(--ink);
  filter:none;
}

.jv-cta .btn > svg{ opacity:.55; }


/* ==========================================================================
   4. RESPONSIV
   ========================================================================== */

/* Planshet — panel ichidagi kartalar 2 ustunga (aw-grid-3 hal qiladi),
   karusel esa hamon pinlangan */
@media (max-width:1079px){
  .lanes-head .jv-sub{ max-width:none; }
}

/* Mobil / swipe rejimi — JS `lanes-swipe` sinfini qo'yadi, pin yo'q */
@media (max-width:760px){
  .lanes-stick{
    min-height:auto;
    padding-block:clamp(48px, 9vw, 72px);
    gap:24px;
  }

  .lanes-track{
    gap:16px;
    padding-inline:var(--pad);
  }

  .ls-card{
    width:min(320px, 82vw);
  }

  /* kartalar joyiga tirab to'xtaydi */
  .lanes-view{
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .lanes-view::-webkit-scrollbar{ display:none; }
  .ls-card{ scroll-snap-align:center; }

  /* surish mumkinligini bildiruvchi ishora — oxiriga yetganda yo'qoladi */
  .lanes-swipe .lanes-progress::after{
    content:"suring →";
    position:absolute;
    right:0;
    top:12px;
    font-family:var(--body);
    font-size:12px;
    font-weight:500;
    line-height:1;
    color:var(--ink-dim);
    pointer-events:none;
    transition:opacity .3s var(--ease);
  }

  .lanes-swipe.at-end .lanes-progress::after{ opacity:0; }

  /* o'ng chetda "davomi bor" belgisi */
  .lanes-swipe .lanes-view{
    -webkit-mask-image:linear-gradient(90deg, #000 88%, rgba(0,0,0,.35));
            mask-image:linear-gradient(90deg, #000 88%, rgba(0,0,0,.35));
  }

  .lanes-swipe.at-end .lanes-view{
    -webkit-mask-image:none;
            mask-image:none;
  }

  .lanes-progress{ overflow:visible; }
  .lanes-bar{ border-radius:var(--r-pill); }
}

@media (max-width:767px){
  .jv-proof-intro{ font-size:16px; }
  .jv-cta .jv-cta-sub{ font-size:16px; }
  .jv-cta .btn{ width:100%; }
}


/* ==========================================================================
   5. PREFERS-REDUCED-MOTION — JS pinni o'chiradi, CSS ham sticky'ni tashlaydi
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .lanes-stick{
    position:static;
    min-height:auto;
    padding-block:clamp(48px, 6vw, 80px);
  }

  .lanes-view{ overflow-x:auto; }
}

/* ==========================================================================
   QA REJIMI (?flat=1) — headless to'liq-sahifa skrinshoti
   Oyna balandligi bir necha ming px bo'lgani uchun 100vh ulkan bo'sh maydon
   yasaydi. QA'da sticky qatlamni kontent balandligiga qaytaramiz.
   ========================================================================== */
.qa-flat .lanes-stick{
  position:static;
  min-height:0;
  padding-block:var(--band);
}