/* ==========================================================================
   08 — SAVOLLAR (FAQ) + BOSHLASH (ko'k CTA + forma) + FOOTER
   Poydevor: css/aiwork.css (tokenlar, primitivlar). Bu fayl undan KEYIN ulanadi.
   Referens naqshi: aiwork.framer.website — FAQ (chap sarlavha / o'ng akkordeon),
   ko'k gradient CTA bloki ichida oq forma kartasi, oq footer.
   ========================================================================== */


/* ==========================================================================
   1. SAVOLLAR — OQ TASMA
   ========================================================================== */

#savollar{
  background:var(--panel);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}

/* Chap ustun torroq, o'ng (akkordeon) kengroq */
.faq-split{
  grid-template-columns:minmax(0, .88fr) minmax(0, 1.12fr);
  align-items:start;
}

/* Chap ustun scroll paytida yopishib turadi */
.faq-aside-in{
  position:sticky;
  top:112px;
}

.faq-aside .sec-head{
  margin-top:18px;
  max-width:16ch;
}

@media (max-width:1079px){
  .faq-split{ grid-template-columns:1fr; }
  .faq-aside-in{ position:static; }
  .faq-aside .sec-head{ max-width:none; }
}


/* --- 1.1 Akkordeon ------------------------------------------------------ */

.faq{ display:block; }

.faq-item{
  /* overflow:hidden OLIB TASHLANDI — fokus halqasini kesardi */
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  box-shadow:var(--sh-2);
  margin-bottom:12px;
  transition:box-shadow .25s var(--ease), border-color .25s var(--ease);
}

.faq-item:last-child{ margin-bottom:0; }

.faq-item:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.07);
  border-color:var(--line);
}

.faq-q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  padding:20px 24px;
  text-align:left;
  background:transparent;
  border:0;
  cursor:pointer;
  font-family:var(--display);
  font-weight:500;
  font-size:16px;
  line-height:1.4;
  letter-spacing:-0.012em;
  color:var(--ink);
  transition:color .2s var(--ease);
}

.faq-q > span{
  flex:1 1 auto;
  min-width:0;
}

.faq-q:hover{ color:var(--blue); }

/* + / − belgisi: ikkita 1.5px chiziq */
.faq-ic{
  position:relative;
  display:block;
  flex:none;
  width:16px;
  height:16px;
}

.faq-ic::before,
.faq-ic::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:var(--ink-dim);
  border-radius:1px;
  transition:transform .3s var(--ease),
             opacity .3s var(--ease),
             background .2s var(--ease);
}

.faq-ic::before{                 /* gorizontal chiziq — doim turadi */
  width:14px;
  height:1.5px;
  transform:translate(-50%, -50%);
}

.faq-ic::after{                  /* vertikal chiziq — ochilganda yo'qoladi */
  width:1.5px;
  height:14px;
  transform:translate(-50%, -50%);
}

.faq-q[aria-expanded="true"] .faq-ic::after{
  transform:translate(-50%, -50%) scaleY(0);
  opacity:0;
}

.faq-q[aria-expanded="true"] .faq-ic::before{ background:var(--blue); }

/* JS max-height ni inline yozadi (js/main.js) */
.faq-body{
  overflow:hidden;
  max-height:0;
  transition:max-height .35s var(--ease);
}

.faq-inner{
  padding:0 24px 20px;
}

.faq-inner p{
  font-family:var(--body);
  font-size:15px;
  line-height:1.7;
  color:var(--ink-mut);
  margin:0;
}

@media (max-width:767px){
  .faq-q{ padding:17px 18px; font-size:15px; gap:12px; }
  .faq-inner{ padding:0 18px 18px; }
}


/* ==========================================================================
   2. BOSHLASH — ko'k gradient CTA bloki + oq forma kartasi
   ========================================================================== */

/* Eski neon nurlar — butunlay yo'q */
.cp-glow{ display:none !important; }

/* Ko'k gradient + oq to'r .aw-cta primitividan keladi (aiwork.css) */
.cta-panel{
  padding:clamp(28px, 3.6vw, 56px);
  text-align:left;
}

.lead-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(28px, 4vw, 56px);
  align-items:center;
}

@media (max-width:1023px){
  .lead-grid{
    grid-template-columns:1fr;
    gap:28px;
    align-items:stretch;
  }
}

/* --- 2.1 Chap ustun (matn) --------------------------------------------- */

.lead-left{ min-width:0; }

.cta-panel .eyebrow{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.30);
  box-shadow:none;
  color:#fff;
}

.cta-panel .eyebrow::before{ background:#fff; }

.lead-left .sec-head{ margin-top:18px; }

.lead-left .sec-head h2{ color:#fff; }

.lead-left .h2-accent{
  color:rgba(255,255,255,.75);
  font-style:normal;
}

.lead-left .sec-sub{
  color:rgba(255,255,255,.85);
  margin-top:16px;
  max-width:var(--measure-narrow);
}

.cta-extra{
  margin-top:24px;
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  color:rgba(255,255,255,.85);
}

.cta-extra a{
  display:inline-block;
  padding-block:8px;   /* bosish maydoni */
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}

.cta-extra a:hover{ color:#fff; opacity:.82; }


/* --- 2.2 O'ng ustun: oq forma kartasi ---------------------------------- */

.lead-right{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.lead-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  background:#fff;
  border:1px solid rgba(255,255,255,.55);
  border-radius:var(--r-lg);
  padding:24px;
  box-shadow:var(--sh-3);
  color:var(--ink);
}

/* Tarif eslatmasi — och ko'k pill */
#tarif-note{
  display:inline-flex;
  align-self:flex-start;
  max-width:100%;
  align-items:center;
  gap:8px;
  padding:8px 10px 8px 14px;
  border-radius:var(--r-pill);
  background:var(--blue-lo);
  border:1px solid rgba(129, 75, 238,.18);
  font:500 13px/1.4 var(--body);
  color:var(--blue);
}

#tarif-note[hidden]{ display:none; }

#tarif-note b{ font-weight:600; color:var(--blue); }

#tarif-clear{
  width:22px;
  height:22px;
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-pill);
  background:rgba(129, 75, 238,.10);
  color:var(--blue);
  font-size:15px;
  line-height:1;
  transition:background .2s var(--ease);
}

#tarif-clear:hover{ background:rgba(129, 75, 238,.20); }

/* Maydonlar */
.lead-card .field{ gap:7px; }

.lead-card .field label,
.lead-card .field-label{
  font-family:var(--display);
  font-size:14px;
  line-height:1.4;
  font-weight:500;
  color:var(--ink);
}

.lead-card .field input,
.lead-card .field textarea{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:12px 14px;
  font-family:var(--body);
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
}

.lead-card .field input:focus,
.lead-card .field textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-ring);
}

.lead-card .field textarea{
  min-height:92px;
  resize:vertical;
}

/* Chiplar — pill tugmalar */
.lead-card .chips{ gap:8px; }

.lead-card .chip{
  padding:12px 16px;
  border-radius:var(--r-pill);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:none;
  font-family:var(--body);
  font-size:14px;
  line-height:1.2;
  font-weight:500;
  color:var(--ink);
}

.lead-card .chip:hover{
  background:var(--panel-2);
  border-color:var(--line);
}

.lead-card .chip.active,
.lead-card .chip[aria-pressed="true"]{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}

/* Xatolar */
.field-err{
  display:none;
  font-family:var(--body);
  font-size:13px;
  line-height:1.4;
  font-weight:500;
  color:var(--danger);
}

.field.invalid .field-err{ display:block; }

.field.invalid input,
.field.invalid textarea{ border-color:var(--danger); }

.field.invalid input:focus,
.field.invalid textarea:focus{
  border-color:var(--danger);
  box-shadow:0 0 0 3px var(--danger-lo);
}

/* Yuborish + izohlar */
#lead-submit{ margin-top:4px; }

.lead-card .form-note{
  margin:0;
  font-family:var(--body);
  font-size:13px;
  line-height:1.6;
  color:var(--ink-dim);
  text-align:center;
}

.form-fail{
  margin:0;
  font-family:var(--body);
  font-size:13px;
  line-height:1.5;
  font-weight:500;
  color:#d92d20;
  text-align:center;
}

.form-fail[hidden]{ display:none; }


/* --- 2.3 Muvaffaqiyat kartasi ------------------------------------------ */

#lead-success{
  align-items:center;
  text-align:center;
  gap:14px;
  padding:32px 24px;
}

#lead-success[hidden]{ display:none; }

.success-ic{
  position:relative;
  display:block;
  flex:none;
  width:44px;
  height:44px;
  border-radius:var(--r-pill);
  background:var(--blue);
}

.success-ic::after{
  content:"";
  position:absolute;
  left:17px;
  top:12px;
  width:9px;
  height:16px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.success-line{
  margin:0;
  font-family:var(--display);
  font-size:18px;
  line-height:1.35;
  font-weight:500;
  letter-spacing:-0.012em;
  color:var(--ink);
}

.success-sub{
  margin:0;
  font-family:var(--body);
  font-size:15px;
  line-height:1.7;
  color:var(--ink-mut);
}

#success-tg{ align-self:center; }

#success-tg[hidden]{ display:none; }

@media (max-width:767px){
  .cta-panel{ padding:22px; }
  .lead-card{ padding:20px; border-radius:var(--r-md); }
  #lead-success{ padding:28px 20px; }
  .lead-left .sec-head{ margin-top:14px; }
}


/* ==========================================================================
   3. FOOTER — oq, tepasida hairline
   ========================================================================== */

.site-footer{
  position:relative;
  z-index:1;
  background:var(--panel);
  border-top:1px solid var(--line);
}

/* 4 ustun: brend + 2 nav + kontakt.
   Nav ustunlari 3 tadan — oldin bitta ustun 6 ta havoladan cho'zilib,
   o'ngda va pastda katta bo'sh joy qolar edi. */
.footer-top{
  display:grid;
  grid-template-columns:1.5fr .85fr .85fr 1.05fr;
  gap:clamp(28px, 3.4vw, 56px);
  padding-block:clamp(48px, 5.4vw, 76px);
}

@media (max-width:1023px){
  .footer-top{ grid-template-columns:repeat(3, 1fr); gap:40px 32px; }
  .footer-brand{ grid-column:1 / -1; }
}

@media (max-width:767px){
  .footer-top{ grid-template-columns:1fr 1fr; gap:34px 24px; }
  .footer-brand{ grid-column:1 / -1; }
  .footer-contact{ grid-column:1 / -1; }
}

/* --- 3.1 Brend --------------------------------------------------------- */

.footer-brand{ max-width:340px; }

.footer-brand .logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
}

.footer-brand .logo:hover{ color:inherit; }

.logo-plate{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:40px;
  height:40px;
  border-radius:var(--r-md);
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--sh-1);
  color:var(--ink);
}

.logo-plate svg{
  width:22px;
  height:22px;
}

.footer-brand .logo-txt{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.footer-brand .logo-name{
  font-family:var(--display);
  font-size:17px;
  font-weight:600;
  line-height:1;
  letter-spacing:-0.03em;
  color:var(--ink);
}

.footer-brand .logo-tag{
  font-family:var(--body);
  font-size:11px;
  font-weight:500;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-dim);
}

.footer-brand p{
  margin-top:16px;
  font-family:var(--body);
  font-size:15px;
  line-height:1.7;
  color:var(--ink-mut);
}

/* Brend ustunini "og'irlashtiradigan" ko'k tugmacha */
.footer-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:22px;
  height:44px;
  padding-inline:20px;
  border-radius:var(--r-sm);
  background:var(--blue);
  color:#fff;
  font-family:var(--body);
  font-size:15px;
  font-weight:500;
  line-height:1;
  transition:background-color .2s var(--ease);
}

.footer-cta:hover{ background:#6f36e0; color:#fff; }
.footer-cta svg{ width:14px; height:14px; opacity:.8; flex:none; }

/* --- 3.2 Nav ustunlar -------------------------------------------------- */

.footer-col{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}

.footer-col h4{
  margin-bottom:12px;
  font-family:var(--body);
  font-size:12px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-dim);
}

.footer-col a{
  display:inline-block;
  padding-block:7px;          /* bosish maydoni ~32px */
  font-family:var(--body);
  font-size:15px;
  line-height:1.6;
  color:var(--ink-mut);
  transition:color .2s var(--ease);
}

.footer-col a:hover{ color:var(--blue); }

.footer-plain{
  padding-block:7px;
  font-family:var(--body);
  font-size:15px;
  line-height:1.6;
  color:var(--ink-dim);
  background:none;
  border:0;
}

/* Kontakt ustuni — telefon ajralib tursin */
.footer-contact .fc-tel{
  font-family:var(--display);
  font-size:19px;
  font-weight:500;
  letter-spacing:-0.02em;
  color:var(--ink);
  padding-block:0;
  margin-bottom:8px;
}

.footer-contact .fc-tel:hover{ color:var(--blue); }

/* --- 3.3 Pastki qator -------------------------------------------------- */

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-block:24px;
  border-top:1px solid var(--line);
}

.footer-bottom p{
  margin:0;
  font-family:var(--body);
  font-size:14px;
  line-height:1.6;
  color:var(--ink-dim);
}

.footer-up{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--body);
  font-size:14px;
  font-weight:500;
  color:var(--ink-mut);
  transition:color .2s var(--ease);
}

.footer-up:hover{ color:var(--blue); }
.footer-up svg{ width:14px; height:14px; flex:none; }


/* ==========================================================================
   4. HARAKATNI KAMAYTIRISH
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .faq-body{ transition:none; }
  .faq-ic::before,
  .faq-ic::after{ transition:none; }
  .faq-item:hover{ box-shadow:var(--sh-2); }
}