/* ==========================================================================
   FF/10-RANG-SAAZI.CSS — FAQAT RANG QATLAMI
   Otabek, 2026-08-07.

   Sayt DIZAYNI FlexFolio bo'lib qoladi: pill shakllar, Geist'ning zich
   tracking'i, punktir yo'naltiruvchilar va tugunlar, 84/86 ritm, 1200px
   konteyner — hammasi tegilmaydi. Bu fayl faqat PALITRANI almashtiradi.

   Manba: https://saazai.framer.website/  (Framer marketplace: "Saaszai ·
   SaaS-Website, AI SaaS Startup", Framebite). Barcha qiymat brauzerda
   `getComputedStyle` bilan JONLI o'lchangan:

     sahifa foni      #FFFFFF                      (58×)
     siyoh            rgb(65,23,94)  = #41175E     (130× — hukmron matn rangi)
     ikkilamchi yuza  rgb(244,241,245) = #F4F1F5   (17×)
     aksent binafsha  rgb(129,75,238) = #814BEE
     aksent magenta   rgb(199,98,246) = #C762F6
     aksent koral     rgb(247,115,115) = #F77373
     IMZO GRADIENT    linear-gradient(281deg, #814BEE 0%, #C762F6 50%, #F77373 100%)
     to'q tugma       linear-gradient(293deg, #440660 0%, #33075F 50%, #390D91 100%)
     to'q blok        linear-gradient(122deg, #390D91 0%, #5A1858 54%, #5A1858 100%)

   Bekor qilish: index.html dan shu bitta <link> ni olib tashlash —
   sayt yana FlexFolio'ning apelsin palitrasiga qaytadi.
   ========================================================================== */


/* ==========================================================================
   1. TOKENLAR
   ========================================================================== */
:root{
  /* --- Yuzalar --- */
  --page:        #FFFFFF;
  --panel:       #FFFFFF;
  --panel-2:     #F4F1F5;

  /* --- Siyoh: to'q slivali binafsha (Saazi'ning butun matni shu rangda) --- */
  --ink:         #41175E;
  --ink-strong:  #41175E;
  --ink-mut:     rgba(65,23,94,.62);
  --ink-dim:     rgba(65,23,94,.62);
  --line:        rgba(65,23,94,.12);
  --line-soft:   rgba(65,23,94,.07);

  /* --- Aksent --- */
  --blue:        #814BEE;                 /* asosiy aksent */
  --blue-2:      #C762F6;                 /* gradient o'rtasi */
  --coral:       #F77373;                 /* gradient uchi */
  --blue-lo:     rgba(129,75,238,.10);
  --blue-ink:    #6A2BD2;                 /* MAYDA matn — oq fonda 6.0:1 (AA) */
  --blue-ring:   rgba(129,75,238,.35);
  --acc-deep:    #5A1FB8;
  --acc-head:    #6A2BD2;

  --dark-a:      #41175E;
  --dark-b:      #2C0F42;

  /* --- Imzo qatlami: yo'naltiruvchi chiziqlar --- */
  --rail:        rgba(65,23,94,.12);      /* Saazi siyohidan, alfa referensdagidek */
  --rail-dot:    #FFFFFF;

  /* --- Fon nuri: iliq shaftoli emas, binafsha-koral --- */
  --glow-warm:   199,98,246;              /* #C762F6 magenta */
  --glow-pink:   247,115,115;             /* #F77373 koral */
}

/* depth.css tokenlari */
:root{
  --sh-rgb: 65, 23, 94;                   /* soya slivali binafshaga qaytadi */

  --hair:      inset 0 0 0 1px rgba(65,23,94,.07);
  --hair-soft: inset 0 0 0 1px rgba(65,23,94,.05);
  --hair-acc:  inset 0 0 0 1px rgba(129,75,238,.22);

  /* Asosiy tugma nuri — apelsin halo o'rniga binafsha */
  --sh-blue:       inset 0 1px 0 rgba(255,255,255,.22),
                   0 8px 20px -6px rgba(129,75,238,.45),
                   0 16px 34px -16px rgba(65,23,94,.40);
  --sh-blue-hi:    inset 0 1px 0 rgba(255,255,255,.28),
                   0 12px 26px -6px rgba(129,75,238,.52),
                   0 22px 44px -18px rgba(65,23,94,.46);
  --sh-blue-press: inset 0 2px 6px rgba(52,16,86,.38);

  --blue-50:  #F7F1FE;
  --blue-100: #EDE2FD;
  --blue-200: #DCC7FB;
  --blue-300: #C762F6;
  --blue-400: #9B6BF2;
  --blue-500: #814BEE;
  --blue-600: #6F36E0;
  --blue-700: #5A1FB8;

  --acc-violet: #814BEE;
  --acc-cyan:   #C762F6;
  --acc-amber:  #F77373;

  --ink-head:  #41175E;
  --page-tint: #F4F1F5;
  --panel-hi:  #FFFFFF;
  --panel-lo:  #FFFFFF;
}

/* Saazi'ning imzo gradienti */
:root{
  --grad:    linear-gradient(281deg, #814BEE 0%, #C762F6 50%, #F77373 100%);
  --grad-sm: linear-gradient(281deg, #6A2BD2 0%, #814BEE 50%, #A93BD4 100%);
  --grad-dark: linear-gradient(293deg, #440660 0%, #33075F 50%, #390D91 100%);
}


/* ==========================================================================
   2. SAHIFA VA FON NURI
   Saazi foni OQ. FlexFolio'ning iliq shaftoli nuri binafsha-koralga
   almashadi — geometriya (o'lcham, joylashuv, blur) o'zgarmaydi.
   ========================================================================== */
body{
  background-color:var(--page);
  background-image:linear-gradient(180deg, #FBF8FD 0%, var(--page) 520px);
}

.bg-layer::before{ background:#C762F6; opacity:.16; }
.bg-layer::after { background:#fff; opacity:.55; }

.aw-grid-bg::before{
  background:
    radial-gradient(760px 520px at 34% 14%, rgba(129,75,238,.07), transparent 70%),
    radial-gradient(680px 500px at 68% 74%, rgba(247,115,115,.06), transparent 72%) !important;
}


/* ==========================================================================
   3. TUGMALAR — shakli FlexFolio (pill), rangi Saazi (to'q sliva gradient)
   ========================================================================== */
.btn-primary,
.btn-blue,
#hero .hero-ctas .btn-primary,
#mobile-menu nav a.btn,
.wk-tab.active,
.wk-tab[aria-pressed="true"]{
  background-color:#3B0A6B;
  background-image:var(--grad-dark);
  color:#fff;
  box-shadow:var(--sh-blue);
}

.btn-primary:hover,
.btn-blue:hover{
  background-color:#4A0F82;
  background-image:linear-gradient(293deg, #52107A 0%, #3F0A77 50%, #4715AE 100%);
  color:#fff;
  box-shadow:var(--sh-blue-hi);
}

/* Chat va forma tugmalari */
.chat-send,
#chat-fab{
  background-color:#3B0A6B;
  box-shadow:var(--sh-blue);
}
#chat-fab:hover{ background-color:#4A0F82; }


/* ==========================================================================
   4. SARLAVHA TA'KIDI — Saazi'ning eng tanilarli belgisi: GRADIENT so'z.
   FlexFolio sarlavhalari monoxrom edi; palitra Saazi'ga o'tgani uchun
   ta'kid ham uning imzo gradientini oladi.
   ========================================================================== */
#hero-h1 .h1-accent,
#jarvis .jv-head .h2-accent,
#jarayon .sec-head .h2-accent,
#ishlar .sec-head .h2-accent,
#ustunliklar .sec-head .h2-accent,
.h1-accent,
.h2-accent{
  background-image:var(--grad) !important;
  -webkit-background-clip:text !important;
          background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent;
}

/* To'q/gradient panel ichida esa ta'kid OQ bo'lib qoladi */
.aw-cta .h1-accent,
.aw-cta .h2-accent,
.jv-cta .h1-accent,
.jv-cta .h2-accent{
  background-image:none !important;
  -webkit-background-clip:border-box !important;
          background-clip:border-box !important;
  -webkit-text-fill-color:#FFFFFF !important;
  color:#FFFFFF !important;
}

/* Statistika raqamlari — siyoh rangida (gradientsiz) */
#trust .stat-num,
.stat-num{
  -webkit-text-fill-color:var(--ink) !important;
  color:var(--ink);
}


/* ==========================================================================
   5. CTA BANNERI — Saazi'ning imzo gradienti (binafsha → magenta → koral)
   ========================================================================== */
.aw-cta,
.jv-cta.aw-cta,
.cta-panel.aw-cta{
  --cta-scrim:radial-gradient(78% 46% at 50% 30%,
                rgba(65,23,94,.34)  0%,
                rgba(65,23,94,.20) 58%,
                rgba(65,23,94,0)  100%);
  background-color:#9B58F0;
  background-image:
    var(--cta-scrim),
    linear-gradient(281deg, #814BEE 0%, #C762F6 50%, #F77373 100%);
}


/* ==========================================================================
   6. MAYDA AKSENTLAR
   ========================================================================== */
#scroll-progress #sp-fill,
#sp-fill{
  background:var(--grad) !important;
}

#pl-fill{ background:var(--grad); }

.eyebrow::before,
.aw-eyebrow::before,
.status-dot,
.chk,
.kb-pay,
.mb-cta,
.ai-orb,
.vm-play{
  background-color:var(--blue);
  background-image:none;
}

.ib svg,
.svc-ico svg,
#hero .hc-ico svg{
  fill:var(--blue) !important;
  color:var(--blue) !important;
}

#fikrlar .fk-stars i{ background:var(--coral); color:var(--coral); }
#fikrlar .fk-ava{ background:var(--blue-lo); color:var(--blue-ink); }

.mb-graph i:last-child,
.mb-graph i:nth-child(4){ background:var(--blue) !important; }
.mb-graph i{ background:rgba(65,23,94,.14) !important; }

.ai-badge{ color:var(--blue-ink) !important; }

::selection{ background:rgba(129,75,238,.20); color:var(--ink); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{ outline-color:var(--blue); }


/* ==========================================================================
   7. YUZALAR — oq sahifada karta ham oq bo'lsa ajralmaydi.
   Saazi'da ikkilamchi yuza #F4F1F5; kartalar shu rangda, o'ramlar oq.
   ========================================================================== */
.aw-card{ background:var(--panel-2); }
.aw-card:hover{ background:#FFFFFF; box-shadow:var(--sh-1); }
.aw-panel{ background:rgba(65,23,94,.03); }

.ib,
.svc-ico,
#hero .hc-ico{ background:#FFFFFF !important; }

input[type="text"],
input[type="tel"],
input[type="email"],
select,
textarea,
.lead-card .field input,
.lead-card textarea{
  background:var(--panel-2);
  box-shadow:inset 0 0 0 1px var(--line);
}


/* ==========================================================================
   8. QATTIQ YOZILGAN APELSIN QOLDIQLARI
   Bo'lim fayllarida (ff/03…07) apelsin ba'zi joyda tokendan emas, TO'G'RIDAN
   yozilgan: radial gradient retsepti, `inset` yorug'lik, hatto `data:` URI
   ichidagi `stroke='%23F97518'`. Ular tokendan ta'sirlanmaydi — shu yerda
   birma-bir qaytariladi.
   ========================================================================== */

/* Belgi (tick) — SVG URI ichidagi rang: %23814BEE */
#hero .hc-tick,
.hc-tick{
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.3 6.4 4.7 8.8 9.7 3.4' fill='none' stroke='%23814BEE' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat !important;
}

/* Mini-demolardagi va bo'limlardagi "kichik asosiy tugma" naqshi */
.mb-cta,
.kb-pay,
.adv-dot,
.footer-cta,
#lead-submit,
.jv-cta .btn-primary{
  background-color:#3B0A6B !important;
  background-image:var(--grad-dark) !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),
             0 6px 16px -5px rgba(129,75,238,.45) !important;
}

/* Raqam/teg pillari — och binafsha fon, o'qiladigan binafsha matn */
.step-num,
.work-tag,
.ai-badge,
.tp-badge,
.mini-chip,
.step-day{
  background:var(--blue-lo) !important;
  color:var(--blue-ink) !important;
  box-shadow:inset 0 0 0 1px rgba(129,75,238,.22) !important;
}

/* Ta'kidlangan holatlar */
.step.lit .step-num{
  background-color:#3B0A6B !important;
  background-image:var(--grad-dark) !important;
  color:#fff !important;
}

/* "Jarvis" ustuni va boshqa ta'kid panellari */
.jvh-col.jvh-yes,
.jvh-col{
  border-color:rgba(129,75,238,.22);
}
.jvh-col.jvh-yes{
  background:rgba(129,75,238,.06);
  box-shadow:inset 0 0 0 1px rgba(129,75,238,.22);
}

/* Ishlar bo'limidagi vizual plombalar — binafsha-koral oilada */
.wv-1{ background:linear-gradient(150deg, rgba(129,75,238,.16), rgba(199,98,246,.10)) !important; }
.wv-2{ background:linear-gradient(150deg, rgba(199,98,246,.16), rgba(247,115,115,.10)) !important; }
.wv-3{ background:linear-gradient(150deg, rgba(247,115,115,.16), rgba(129,75,238,.10)) !important; }
.wv-4{ background:linear-gradient(150deg, rgba(129,75,238,.14), rgba(247,115,115,.12)) !important; }

/* Qolgan uchta joy: CTA panelining apelsin haloosi va `.adv-dot` ning
   o'z gradienti (u `!important` bilan yozilgan). */
.aw-cta,
.jv-cta,
.cta-panel{
  box-shadow:0 20px 48px -30px rgba(129,75,238,.55);
}

.adv-dot{
  background-image:var(--grad-dark) !important;
  background-color:#3B0A6B !important;
}

/* `#ustunliklar .adv-dot` va `#jarvis .jvh-*` ID zanjiri bilan yozilgan —
   teng spetsifiklik bilan qaytariladi. */
#ustunliklar .adv-dot,
#ustunliklar .aw-card:hover .adv-dot{
  background-color:#3B0A6B !important;
  background-image:var(--grad-dark) !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),
             0 6px 16px -5px rgba(129,75,238,.45) !important;
}

#jarvis .jvh-yes{
  background:rgba(129,75,238,.07) !important;
  box-shadow:inset 0 0 0 1px rgba(129,75,238,.24) !important;
}
#jarvis .jvh-yes .jvh-tag{
  background:var(--blue-lo) !important;
  color:var(--blue-ink) !important;
}

/* Lenta va jarayon indikatorlari — Saazi gradientida */
.lanes-bar,
#proc-fill,
.proc-rail > i{
  background-image:var(--grad) !important;
  background-color:transparent !important;
}
.lanes-progress,
.proc-rail{ background-color:rgba(65,23,94,.08) !important; }