@charset "UTF-8";

/* ===== About Hero ===== */
.about-hero{position:relative;height:380px;overflow:hidden;display:flex;align-items:center}
.about-hero-bg{position:absolute;inset:0;z-index:1}
.about-hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.6)}
.about-hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(46,33,27,.9) 0%,rgba(161,136,127,.4) 100%);z-index:2}
.about-hero-inner{position:relative;z-index:3;max-width:var(--max-w);margin:0 auto;padding:0 20px;text-align:center}
.about-hero-title{font-size:42px;font-weight:900;color:#fff;margin-bottom:12px}
.about-hero-desc{font-size:17px;color:rgba(255,255,255,.8);max-width:560px;margin:0 auto}

/* ===== Data Section (A2 Data First) ===== */
.data-section{padding:80px 0;background:var(--c-dark)}
.data-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.data-card{padding:30px}
.data-card-number{font-family:var(--font-bold);font-size:48px;font-weight:900;color:#fff;line-height:1}
.data-card-number span{color:var(--c-primary)}
.data-card-label{font-size:14px;color:rgba(255,255,255,.55);margin-top:8px;text-transform:uppercase;letter-spacing:1px}

/* ===== Company Story ===== */
.story-section{padding:100px 0;background:#fff}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.story-images{position:relative}
.story-img-main{border-radius:8px;overflow:hidden}
.story-img-main img{width:100%;height:400px;object-fit:cover}
.story-img-sub{position:absolute;bottom:-30px;right:-20px;width:280px;height:200px;border-radius:8px;overflow:hidden;border:4px solid #fff;box-shadow:0 12px 30px rgba(46,33,27,.15)}
.story-img-sub img{width:100%;height:100%;object-fit:cover}
.story-content h2{font-size:32px;font-weight:900;color:var(--c-dark);margin-bottom:20px}
.story-content p{font-size:16px;color:var(--c-text);line-height:1.9;margin-bottom:16px}
.story-mission{padding:25px;background:var(--c-bg);border-radius:8px;border-left:4px solid var(--c-primary);margin-top:30px}
.story-mission h4{font-size:16px;font-weight:700;color:var(--c-dark);margin-bottom:8px}
.story-mission p{font-size:15px;color:var(--c-accent);margin:0;line-height:1.7}

/* ===== Values ===== */
.values-section{padding:100px 0;background:var(--c-bg)}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
.value-card{background:#fff;padding:40px 30px;border-radius:8px;border:1px solid var(--c-border);text-align:center;transition:all .3s}
.value-card:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(46,33,27,.1)}
.value-icon{width:64px;height:64px;border-radius:50%;background:var(--c-bg);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;transition:all .3s}
.value-card:hover .value-icon{background:var(--c-dark)}
.value-icon svg{width:28px;height:28px;fill:var(--c-primary);transition:fill .3s}
.value-card:hover .value-icon svg{fill:#fff}
.value-card h3{font-size:18px;font-weight:700;color:var(--c-dark);margin-bottom:12px}
.value-card p{font-size:14px;color:var(--c-accent);line-height:1.7}

/* ===== Timeline ===== */
.timeline-section{padding:100px 0;background:#fff}
.timeline{position:relative;max-width:800px;margin:50px auto 0;padding-left:40px}
.timeline::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c-border)}
.timeline-item{position:relative;padding-bottom:40px}
.timeline-item::before{content:"";position:absolute;left:-47px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--c-primary);border:3px solid #fff;box-shadow:0 0 0 2px var(--c-primary)}
.timeline-year{font-family:var(--font-bold);font-size:20px;font-weight:900;color:var(--c-dark);margin-bottom:8px}
.timeline-text{font-size:15px;color:var(--c-text);line-height:1.8}

/* ===== Team ===== */
.team-section{padding:100px 0;background:var(--c-bg)}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:50px}
.team-card{background:#fff;border-radius:8px;overflow:hidden;border:1px solid var(--c-border);text-align:center;transition:all .3s}
.team-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(46,33,27,.1)}
.team-photo{width:100%;height:260px;object-fit:cover}
.team-info{padding:22px}
.team-name{font-size:17px;font-weight:700;color:var(--c-dark)}
.team-role{font-size:14px;color:var(--c-accent);margin-top:4px}

/* ===== Certifications ===== */
.cert-section{padding:80px 0;background:#fff;text-align:center}
.cert-grid{display:flex;justify-content:center;gap:40px;margin-top:40px;flex-wrap:wrap}
.cert-item{width:100px;height:100px;border-radius:8px;background:var(--c-bg);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--c-dark);border:1px solid var(--c-border)}

@media(max-width:900px){
  .about-hero{height:300px}
  .about-hero-title{font-size:32px}
  .data-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .story-grid{grid-template-columns:1fr;gap:40px}
  .story-img-sub{display:none}
  .values-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .cert-grid{gap:20px}
}
@media(max-width:600px){
  .data-grid{grid-template-columns:1fr}
  .data-card-number{font-size:36px}
  .team-grid{grid-template-columns:1fr}
  .story-content h2{font-size:24px}
}