/* =========================================
   MAIN.CSS (CLEAN)
   QUWMA – Layout + Page sections (Bootstrap ustiga)
   ========================================= */

/* =========================================
   TYPOGRAPHY – Modern fonts + scale
   (Load fonts in base.html head: Inter + Plus Jakarta Sans)
   ========================================= */
:root{
  /* Global type scale */
  --text-base: 17px;
}

html{ font-size: var(--text-base, 17px); }


/* =========================================
   GLOBAL
   ========================================= */
   body{
      font-family: var(--font-main);
      font-size: 1rem;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      color: var(--color-text);
      background-color: var(--color-bg);
      padding-top: var(--navbar-h, 88px);
      margin: 0;
   }

  /* =========================================
     HERO BASICS
     ========================================= */
  .hero-section{
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      margin-top: calc(-1 * var(--navbar-h, 88px));
      padding: 3.5rem 0 5rem;
      color: #ffffff; /* hero fonida yaxshi o‘qiladi */
  }

  .hero-subtitle{
    margin-top: 1rem;
    color: rgba(241, 245, 249, 0.88);
    font-size: 1.08rem; /* hero fon uchun mos */
  }
  
  /* Hero image placeholder (agar kerak bo‘lsa) */
  .hero-image-placeholder{
    width: 100%;
    min-height: 260px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1E88E5 0%, #43A047 100%);
    opacity: 0.9;
  }
  
  /* =========================================
     FOOTER
     ========================================= */
  .site-footer{
    padding: 40px 0 20px;
    background: #0B1727;
    color: #ffffff;
  }
  
  .site-footer a{
    color: #d0e4ff;
    text-decoration: none;
  }
  
  .site-footer a:hover{
    text-decoration: underline;
  }
  
  /* =========================================
     HOME – “Biz kimmiz” (layout + dekor)
     Eslatma: ro‘yxat stilini lists.css boshqaradi
     ========================================= */
  .section-about-preview{
    background-color: #ffffff;
  }
  
  .section-about-preview .row{
    justify-content: center;
  }
  
  .section-about-preview .col-lg-7{
    max-width: 760px;
  }
  
  .section-about-preview .section-title{
    position: relative;
    padding-left: 0.9rem;
    margin-bottom: 1.25rem;
  }
  
  .section-about-preview .section-title::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0.2rem;
    bottom: 0.2rem;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
  }
  
  /* =========================================
     ABOUT – HERO spacing (umumiy)
     ========================================= */
  .section.about-hero{
    padding-top: 6rem;
    padding-bottom: 4rem;
  }
  
  .about-hero .section-title{
    margin-bottom: 1.25rem;
  }
  
  .about-hero .section-text{
    max-width: 640px;
  }
  
  /* =========================================
     ABOUT – TEAM
     Eslatma: team-points ro‘yxati lists.css’da
     ========================================= */
  .about-team{
    background: #f8fafc;
  }
  
  .about-team-grid{
    max-width: 1120px;
    margin: 0 auto;
  }
  
  .about-team .team-card{
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 22px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  
  .about-team .team-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
  }
  
  /* =========================================
     ABOUT – TEAM: PHOTO
     - JS wrap'ga --bg beradi
     - ixtiyoriy: --pos, --zoom, --imgFilter
     ========================================= */
  .about-team .team-photo-wrap{
    position: relative;
    width: 100%;
    height: 240px;
    border-radius: 16px;
    overflow: hidden;
    background: #f1f5f9;
    margin-bottom: 14px;
    isolation: isolate;
    border: 1px solid rgba(15, 23, 42, 0.06);
  }
  
  .about-team .team-photo-wrap::before{
    content: "";
    position: absolute;
    inset: -12%;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    filter: blur(18px) saturate(1.05);
    transform: scale(1.12);
    opacity: 0.40;
    z-index: 0;
  }
  
  .about-team .team-photo-wrap::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 18%, rgba(255,255,255,0.10), rgba(0,0,0,0.10));
    z-index: 1;
  }
  
  .about-team .team-photo{
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: var(--pos, 50% 18%);
    transform: scale(var(--zoom, 1));
    filter: var(--imgFilter, none);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  
  .about-team .team-name{
    font-family: var(--font-heading, "Poppins", system-ui);
    font-weight: 700;
    font-size: 1.15rem;
    margin: 6px 0 8px;
    color: #0f172a;
  }
  
  .about-team .team-role{
    font-weight: 600;
    color: var(--color-primary, #1E88E5);
    margin-bottom: 12px;
    line-height: 1.35;
  }
  
  /* =========================================
     ABOUT – AUDIENCE (cards + collapsible lists)
     ========================================= */
  .about-audience{
    background: #ffffff;
  }
  
  .about-audience .aud-card{
    height: 100%;
    padding: 22px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.06);
    box-shadow: 0 14px 35px rgba(15,23,42,0.08);
  }
  
  .about-audience .aud-title{
    font-family: var(--font-heading, "Poppins", system-ui);
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0;
    color: #0f172a;
  }
  
  .about-audience .aud-sub{
    margin: 0 0 10px;
    color: var(--color-muted, #64748b);
    font-size: 0.95rem;
  }
  
  .about-audience .aud-list{
    margin: 0;
    padding: 0;
  }
  
  .about-audience .aud-list + .aud-list{
    margin-top: 8px;
  }
  
  /* =========================================
     ABOUT – AUDIENCE: Toggle button ("Ko‘proq")
     ========================================= */
  .about-audience .aud-head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
  }
  
  .about-audience .aud-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 12px;
    min-height: 34px;
    width: auto;
    height: auto;
  
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(30, 136, 229, 0.06);
    color: var(--color-primary, #1E88E5);
  
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1;
  
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    flex: 0 0 auto;
  
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
  }
  
  .about-audience .aud-toggle:hover{
    background: rgba(30, 136, 229, 0.10);
    border-color: rgba(30, 136, 229, 0.28);
  }
  
  .about-audience .aud-toggle:active{
    transform: translateY(1px);
  }
  
  .about-audience .aud-toggle:focus-visible{
    outline: 3px solid rgba(30, 136, 229, 0.25);
    outline-offset: 2px;
  }
  
  .about-audience .aud-toggle i{
    font-size: 0.95rem;
    transition: transform .2s ease;
  }
  
  .about-audience .aud-toggle:not(.collapsed) i{
    transform: rotate(180deg);
  }