/* Hero */
.about-hero{padding:150px 0}
.about-hero h1{font-size:52px;line-height:1.1;margin-bottom:26px}
.about-hero h1 span{color:#00bcd4}
.about-hero p{color:rgba(26,26,26,0.8);font-size:18px;max-width:760px;}

/* Mission */
.mission{background:#fff;padding:100px 0}
.mission h2{font-size:48px;margin-bottom:16px}
.mission-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:center}
.mission .media{width:100%;height:100%;padding:42px;background:linear-gradient(rgba(26,26,26,0.2),rgba(0,188,212,0.2));border-radius:16px;}
.mission .media img{width:100%;height:100%;object-fit:cover;border-radius:16px;box-shadow:0 8px 22px rgba(0,0,0,.12)}
.mission .copy p{color:rgba(26,26,26,0.8);margin-bottom:26px;font-size:16px;}

/* What we do */
.what{padding:120px 0}
.what .container{text-align:center}
.what h2{font-size:48px;margin-bottom:8px}
.what p{color:rgba(26,26,26,0.8);font-size:18px;margin-bottom:50px}
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;text-align: left;}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:30px;box-shadow:0 6px 16px rgba(0,0,0,.06)}
.card .icon{width:42px;height:42px;margin-bottom:16px}
.card h3{margin-bottom:10px;font-size:22px;}
.card p{color:rgba(26,26,26,0.7);font-size:14px;margin-bottom:0;}

/* Values */
.values{background:#0e0e0e;color:#cfff00;padding:120px 0;text-align:center}
.values-grid h2{font-size:48px;margin-bottom:4px}
.value-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:50px;text-align: left;}
.values .card{background:rgba(207,255,0,0.1);border:1px solid rgba(207,255,0,0.2);padding:28px;}
.values .card h3{margin-bottom:10px;font-size:20px;}
.values .card p{font-size:14px;color:#cfff00}

/* Impact */
.impact{background:var(--neon);padding:120px 0;text-align:center}
.impact h2{font-size:48px;margin-bottom:4px}
.impact p{color:rgba(26,26,26,0.8)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:40px auto 0;}
.stat{background:#fff;border-radius:12px;padding:24px;border:1px solid var(--border);box-shadow:0 6px 16px rgba(0,0,0,.06)}
.stat strong{display:block;font-size:44px}
.stat:nth-child(2) strong{color:#00bcd4;}
.stat:nth-child(3) strong{color:#2d7a6b;}

.stat span{color:rgba(26,26,26,0.7);font-size:16px;display:block}
.note{color:rgba(26,26,26,0.8);margin-top:50px;font-size:18px;border:1px solid rgba(26,26,26,0.2);background:linear-gradient(to right,rgba(26,26,26,0.05),rgba(0,188,212,0.05));padding:40px 120px;border-radius:12px;margin-left:auto;margin-right:auto;}

/* CTA & Footer */
.cta{padding:40px 0 120px;}
.cta h2{font-size:44px;}
.cta p{color:rgba(26,26,26,0.7);font-size:16px;}
.cta-box{background:#fff;border-radius:18px;padding:70px;text-align:center;border:1px solid var(--border);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.cta-actions{margin-top:40px;display:flex;gap:26px;justify-content:center;}
.cta .btn-dark{padding:12px 22px}
.cta-actions .btn-light{padding:12px 22px;background:#00bcd4;color:#FFF;border-color:var(--border);}

/* Responsive */
@media (max-width: 960px){
  .mission-grid{grid-template-columns:1fr}
  .about-hero h1{font-size:36px}
}
@media (max-width: 780px){
  .card-grid,.value-cards,.stats{grid-template-columns:1fr}
  .nav-links{display:none}

  .mission h2,.what h2,.values-grid h2,.impact h2,.cta h2{font-size:30px;margin-bottom:12px;}
  .mission,.what,.values,.impact,.cta{padding:50px 0;}

  .impact .stats{grid-template-columns:1fr;margin:18px;gap:16px;}
  .impact .stat strong{font-size:32px;}
  .impact .note{padding:30px 20px;font-size:16px;}

  .btn-dark,.btn-light{padding:7px 16px!important;}
  .cta-box{padding:40px 20px;}
}