/* Page-specific styles for about.html - overrides and enhancements */
:root{
  --primary1:#0a66c2;
  --primary2:#2aa7ff;
  --muted:#333;
  --bg:#f8fbff;
}
.wrap{  margin:0 auto;  }
/* Header tweaks (override) */
.logo{ width:220rem; height:44rem; background-size:contain }
.nav a{ color:var(--muted); font-weight:600; padding:8rem 12rem }
.nav a.active{ color:var(--primary1) }
.nav a{ position:relative }
.nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-6rem; height:3rem; background:transparent; transform:scaleX(0); transform-origin:left center; transition:transform .18s ease, background .18s ease }
.nav a:hover::after{ transform:scaleX(1); background:linear-gradient(90deg,var(--primary1),var(--primary2)) }

/* Hero */
.hero{ background:linear-gradient(90deg,var(--primary1),var(--primary2)); color:#fff; padding:56rem 0; border-bottom-left-radius:24rem; border-bottom-right-radius:24rem }
.hero-inner{ display:flex; gap:32rem; align-items:center }
.hero-text h1{ font-size:48rem; margin:0 0 12rem; line-height:1.02 }
.hero-text p{ font-size:20rem; color:rgba(255,255,255,.92); margin-bottom:16rem }
.hero-media img{ width:520rem; height:340rem; object-fit:cover; border-radius:12rem; box-shadow:0 18rem 44rem rgba(3,24,66,.28) }
.btn{ background:#fff; color:var(--primary1); padding:12rem 26rem; border-radius:10rem; font-weight:700; display:inline-block }

/* Features */
.features{ margin-top:-40rem; display:block }
.feature-grid{ display:flex; gap:20rem }
.feature{ flex:1; background:#fff; padding:26rem; border-radius:12rem; box-shadow:0 8rem 30rem rgba(16,40,80,.04); transition:transform .16s ease }
.feature:hover{ transform:translateY(-6rem) }
.feature h3{ color:#0b2b4a; margin-bottom:8rem }
.feature p{ color:var(--muted) }

/* Two column */
.two-col{ display:flex; gap:28rem; align-items:stretch }
.two-col .text{ padding-right:12rem }
.two-col .stats{ background:var(--primary1); color:#fff; padding:28rem; border-radius:12rem; display:flex; flex-direction:column; justify-content:center; gap:14rem }
.stat strong{ font-size:44rem; display:block }
.stat span{ opacity:.9 }

/* Team */
.team-grid{ display:flex; gap:20rem }
.member{ background:linear-gradient(180deg,#fff,#fbfdff); padding:20rem; border-radius:12rem; text-align:center; transition:transform .14s ease }
.member img{ width:120rem; height:120rem; border-radius:50%; object-fit:cover; margin-bottom:12rem }
.member:hover{ transform:translateY(-8rem) }

/* Responsive */
@media (max-width:900px){
  .hero-inner{ flex-direction:column }
  .hero-media img{ width:100%; height:220rem }
  .feature-grid,.team-grid,.two-col{ flex-direction:column }
}