/* ============ heroaboutAbout ============ */
#mainSection{
	margin-top: -102px;
}
.btn-primary{
    background:linear-gradient(90deg,#6d28d9,#9333ea);
    padding:15px 30px;
    border-radius:10px;
    color:#fff;
}

  .abtmain{
    width: 50%;
  }
  .heroabout {
    min-height: 80vh; /* full screen height */
    padding: 100px 0 0 0;
    text-align: center;
    align-content: center;
    text-align: center;
    background:
    radial-gradient(circle at top, rgba(111,0,255,.25), transparent 40%);
}


  .heroabout p{
    color:var(--text-muted);
    font-size:16px;
    margin-bottom:32px;
  }

  .stat-card{
    position:absolute;
    background:rgba(22,19,37,.9);
    border:1px solid var(--border);
    backdrop-filter:blur(6px);
    border-radius:12px;
    padding:14px 18px;
    display:flex;
    align-items:center;
    gap:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
  }

  .stat-card .icon{
    width:38px;height:38px;
    border-radius:8px;
    background:rgba(124,58,237,.18);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;
    color:var(--purple-light);
    flex-shrink:0;
  }

  .stat-card .num{
    font-size:18px;
    font-weight:700;
    line-height:1.2;
  }
  .stat-card .label{
    font-size:12px;
    color:var(--text-muted);
  }

  .stat-card.exp{ top:10%; left:-6%; }
  .stat-card.projects{ top:38%; right:-12%; }
  .stat-card.happy{ bottom:8%; left:18%; }

  /* ============ STORY / TIMELINE ============ */
  .section{
    padding:90px 24px;
  }

  .section-head{
    text-align:center;
    max-width:980px;
    margin:0 auto 56px;
  }

  .section-head .eyebrow{ text-align:center; }



  .section-head p{
    color:var(--text-muted);
  }

  .timeline{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
  }

  .timeline::before{
    content:"";
    position:absolute;
    top:-26px;
    left:12.5%;
    right:12.5%;
    height:1px;
    border-top:1px dashed var(--border);
  }

  .timeline-item{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:14px;
    padding:28px 24px;
    position:relative;
  }

  .timeline-dot{
    position:absolute;
    top:-32px;
    left: 168px;
    width:10px;height:10px;
    border-radius:50%;
    background:var(--purple-light);
    box-shadow:0 0 0 4px rgba(167,139,250,.15);
  }

  .timeline-icon{
    width:44px;height:44px;
    border-radius:10px;
    background:rgba(124,58,237,.18);
    display:flex;align-items:center;justify-content:center;
    font-size:20px;
    color:var(--purple-light);
    margin-bottom:18px;
  }

  .timeline-item .year{
    font-size:13px;
    color:var(--text-muted);
    margin-bottom:4px;
  }

  .timeline-item h3{
    color:var(--purple-light);
    margin-bottom:10px;
  }

  .timeline-item p{
    color:var(--text-muted);
  }

  /* ============ TEAM SECTION ============ */
  .team-section{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:50px;
    align-items:center;
  }


  .team-section > div > p{
    color:var(--text-muted);
    margin-bottom:24px;
  }

  .check-list li{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
    font-size:15px;
  }

  .check-list .check{
    width:24px;height:24px;
    border-radius:50%;
    background:var(--purple);
    display:flex;align-items:center;justify-content:center;
    font-size:13px;
    flex-shrink:0;
  }

  .check-list{margin-bottom:32px;}

  .team-photo img{
    border-radius:16px;
  }


  /* ============ VALUES ============ */
  .values-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
  }

  .value-card{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:14px;
    padding:28px 22px;
  }

  .value-icon{
    width:48px;height:48px;
    border-radius:12px;
    background:rgba(124,58,237,.18);
    display:flex;align-items:center;justify-content:center;
    font-size:22px;
    color:var(--purple-light);
    margin-bottom:20px;
  }

  .value-card h3{
    margin-bottom:10px;
  }

  .value-card p{
    color:var(--text-muted);
  }

  



  /* ============ RESPONSIVE ============ */
  @media (max-width: 1024px){
    .heroabout, .team-section{
      grid-template-columns:1fr;
    }
    .heroabout-visual{ order:-1; min-height:340px; }
    .timeline, .values-grid{
      grid-template-columns:repeat(2,1fr);
    }
    .timeline::before{ display:none; }
    .footer-grid{
      grid-template-columns:repeat(2,1fr);
    }
    nav ul{ display:none; }
  }

  @media (max-width: 640px){
    .heroabout h1{ font-size:36px; }
    .timeline, .values-grid, .footer-grid{
      grid-template-columns:1fr;
    }
    .cta-banner{
      flex-direction:column;
      align-items:flex-start;
    }
    .stat-card{ position:relative; margin:8px; }
    .heroabout-visual{ flex-direction:column; min-height:auto; padding:24px 0; }
  }