/* ==========================================================================
   04-JARVIS-BOSH — #jarvis bo'limining birinchi qismi
   .jv-head (sarlavha + .jv-orbit) · .jv-highlight (Chatbot vs Jarvis) · .jf-grid
   Faqat css/aiwork.css tokenlaridan foydalanadi. Yangi rang yo'q.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Bo'lim yuzasi — och kulrang + dashed to'r
   -------------------------------------------------------------------------- */

#jarvis{
  background:var(--page);
}

/* .sec-light endi vizual farq bermaydi — u faqat to'r fonining idishi */
#jarvis > .sec-light{
  background:transparent;
}

/* Kontent to'r fonining ustida tursin (core'dagi .section > .container
   qoidasi bu yerda .sec-light tufayli ishlamaydi) */
#jarvis > .sec-light > .container{
  position:relative;
  z-index:1;
}


/* --------------------------------------------------------------------------
   2. .jv-head — markazlashgan sarlavha + orbit paneli
   -------------------------------------------------------------------------- */

#jarvis .jv-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(36px, 4.6vw, 60px);
}

#jarvis .jv-head .sec-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  max-width:var(--head-w);
  margin-inline:auto;
  text-align:center;
  /* core'dagi h2 shkalasi bu yerda konteynerga tegishli emas */
  font-size:inherit;
  line-height:inherit;
  letter-spacing:normal;
}

#jarvis .jv-head h2{
  color:var(--ink);
}

/* Ta'kid — ko'k, kursiv EMAS */
#jarvis .jv-head .h2-accent{
  font-style:normal;
  font-weight:500;
  color:var(--blue);
}

/* Sub-sarlavha ATAYLAB 3 QATOR. 60ch (=681px) da matn 4 qatorga tushib,
   oxirgi qatorda ikkita so'z yolg'iz qolardi. 780px da qatorlar
   730 / 768 / 637 px — uchtasi ham to'la. */
#jarvis .jv-head .sec-sub{
  max-width:780px;
}

/* data-split JS h2 ni .sl-line/.sl-inner ga bo'ladi — bu yerda harakat sokin:
   matn darrov ko'rinadi, butun blok .sec-head[data-reveal] bilan kiradi */
#jarvis .jv-head .sl-line{
  overflow:visible;
}

#jarvis .jv-head .sl-inner{
  transform:none;
  opacity:1;
}


/* --------------------------------------------------------------------------
   3. .jv-orbit — aylanuvchi orbit EMAS: oq panel + statik radial sxema
   -------------------------------------------------------------------------- */

#jarvis .jv-orbit{
  position:relative;
  width:100%;
  max-width:520px;
  aspect-ratio:1 / 1;
  margin-inline:auto;
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-2);
  overflow:hidden;
}

/* Markazdan chiquvchi nozik dashed chiziqlar (SVG emas — ::before) */
#jarvis .jo-line{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--len, 29%);
  height:0;
  transform-origin:0 50%;
  transform:rotate(var(--r, 0deg));
  pointer-events:none;
  z-index:1;
}

#jarvis .jo-line::before{
  content:"";
  position:absolute;
  left:64px;          /* markazdagi plitadan keyin boshlanadi */
  right:0;
  top:0;
  border-top:1px solid var(--line);
}

/* Har bir chiziq o'z chipiga yetib to'xtaydi */
#jarvis .jo-line:nth-of-type(1){ --len:37%; }   /* -90deg  → Marketolog */
#jarvis .jo-line:nth-of-type(2){ --len:29%; }   /* -18deg  → Moliyachi  */
#jarvis .jo-line:nth-of-type(3){ --len:34%; }   /*  54deg  → Analitik   */
#jarvis .jo-line:nth-of-type(4){ --len:34%; }   /* 126deg  → Dizayner   */
#jarvis .jo-line:nth-of-type(5){ --len:29%; }   /* 198deg  → Assistent  */

/* Tik chiziq markazga yaqinroq boshlanadi (plita past bo'yli) */
#jarvis .jo-line:nth-of-type(1)::before{ left:38px; }

/* Markaz — ko'k gradient plita */
#jarvis .jo-core{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 22px;
  border-radius:var(--r-md);
  background:linear-gradient(180deg, var(--blue), var(--blue-ink));
  color:#fff;
  box-shadow:var(--sh-2);
}

#jarvis .jo-core b{
  font-family:var(--display);
  font-size:15px;
  line-height:1;
  font-weight:600;
  letter-spacing:.02em;
  color:#fff;
}

/* 5 rol — oq pill kartalar */
#jarvis .jo-chip{
  position:absolute;
  transform:translate(-50%, -50%);
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border-radius:var(--r-pill);
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--sh-1);
  font-family:var(--body);
  font-size:14px;
  line-height:1;
  font-weight:500;
  color:var(--ink);
  white-space:nowrap;
}

#jarvis .jo-chip::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:var(--r-pill);
  background:var(--blue);
  flex:none;
}


/* --------------------------------------------------------------------------
   4. .jv-highlight — Chatbot vs Jarvis (oq panel)
   -------------------------------------------------------------------------- */

#jarvis .jv-highlight{
  margin-top:clamp(40px, 5vw, 64px);
}

#jarvis .jvh-lead{
  font-family:var(--display);
  font-size:22px;
  line-height:1.45;
  font-weight:500;
  letter-spacing:-0.02em;
  color:var(--ink);
  max-width:var(--measure);
}

#jarvis .jvh-lead b{
  font-weight:500;
  color:var(--blue);
}

#jarvis .jvh-vs{
  margin-top:clamp(24px, 3vw, 32px);
}

#jarvis .jvh-col{
  padding:24px;
  border-radius:var(--r-lg);
  border:1px solid var(--line-soft);
}

#jarvis .jvh-no{
  background:var(--panel-2);
}

#jarvis .jvh-yes{
  background:var(--panel);
  border-color:var(--blue);
}

#jarvis .jvh-tag{
  display:inline-flex;
  align-items:center;
  padding:5px 12px;
  margin-bottom:14px;
  border-radius:var(--r-xs);
  background:var(--panel);
  border:1px solid var(--line-soft);
  box-shadow:var(--sh-1);
  font-family:var(--body);
  font-size:13px;
  line-height:1;
  font-weight:500;
  color:var(--ink-dim);
}

#jarvis .jvh-yes .jvh-tag{
  background:var(--blue-lo);
  color:var(--blue);
}

#jarvis .jvh-col p{
  font-size:16px;
  line-height:1.7;
  color:var(--ink-mut);
}


/* --------------------------------------------------------------------------
   5. .jf-grid — 4 ta xususiyat kartasi
   -------------------------------------------------------------------------- */

#jarvis .jf-grid{
  margin-top:var(--gap);
}

#jarvis .jf-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  /* guruh ichida bosqichma-bosqich kirish (--ri ni main.js beradi) */
  transition:opacity var(--dur) var(--ease),
             transform var(--dur) var(--ease),
             box-shadow .25s var(--ease);
  transition-delay:calc(var(--ri, 0) * 70ms),
                   calc(var(--ri, 0) * 70ms),
                   0s;
}

#jarvis .jf-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}

#jarvis .ib{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  flex:none;
  border-radius:var(--r-sm);
  background:var(--blue-lo);
  color:var(--blue);
}

#jarvis .ib svg{
  width:20px;
  height:20px;
  fill:currentColor;
}

#jarvis .jf-n{
  font-family:var(--display);
  font-size:13px;
  line-height:1;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--ink-dim);
}

#jarvis .jf-card h3{
  font-family:var(--display);
  font-size:18px;
  line-height:1.35;
  font-weight:500;
  letter-spacing:-0.015em;
  color:var(--ink);
}

#jarvis .jf-card p{
  font-family:var(--body);
  font-size:15px;
  line-height:1.65;
  color:var(--ink-mut);
}


/* --------------------------------------------------------------------------
   6. Responsiv
   -------------------------------------------------------------------------- */

/* Planshet — orbit biroz kichrayadi */
@media (max-width:1079px){
  #jarvis .jv-orbit{ max-width:480px; }
}

/* Mobil — orbit tarqalib oddiy 2 ustunli tarmoqqa aylanadi.
   Inline left/top qiymatlari position:static da e'tiborga olinmaydi. */
@media (max-width:767px){
  #jarvis .jv-orbit{
    aspect-ratio:auto;
    max-width:none;
    padding:20px;
    border-radius:var(--r-xl-m);
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    align-items:center;
  }

  #jarvis .jo-line{ display:none; }

  #jarvis .jo-core{
    position:static;
    transform:none;
    grid-column:1 / -1;
    justify-self:center;
    margin-bottom:6px;
  }

  #jarvis .jo-chip{
    position:static;
    transform:none;
    width:100%;
    justify-content:center;
    padding:11px 12px;
  }

  /* Toq qolgan oxirgi chip ikkala ustunni egallaydi */
  #jarvis .jo-chip:last-of-type{
    grid-column:1 / -1;
  }

  #jarvis .jvh-lead{ font-size:19px; }
  #jarvis .jvh-col{ padding:20px; }
}

@media (max-width:400px){
  #jarvis .jo-chip{ font-size:13px; padding:10px 8px; }
}


/* --------------------------------------------------------------------------
   7. Harakatni kamaytirish
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  #jarvis .jf-card{ transition-delay:0s; }
}