.about-hero {
  padding:clamp(52px, 8vw, 88px) 0;
}
.about-panel {
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(28px, 5vw, 52px);
  display:grid;
  gap:16px;
  max-width:900px;
}
.about-panel h1 {
  margin:0;
  font-size:clamp(2.3rem, 6vw, 4.4rem);
  line-height:1;
  letter-spacing:0;
}
.about-panel p {
  max-width:760px;
  margin:0;
  color:var(--muted);
  font-size:1.08rem;
}
.about-purpose {
  padding-top:56px;
}
.about-grid {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:20px;
  align-items:start;
}
.about-card {
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  min-width:0;
}
.about-card h2 {
  margin:0 0 12px;
  font-size:1.45rem;
  line-height:1.2;
}
.about-card p {
  margin:0 0 16px;
  color:var(--muted);
}
.about-card ul {
  margin:0;
  padding-left:1.2rem;
  color:var(--muted);
}
.about-card li + li {
  margin-top:.35rem;
}
.about-links {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.about-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--bg-alt);
  color:var(--text);
  text-decoration:none;
  font-weight:750;
}
.about-link:hover { opacity:.9; text-decoration:none; }

@media (max-width: 780px) {
  .about-grid { grid-template-columns:1fr; }
}

@media (max-width: 640px) {
  .about-panel,
  .about-card { padding:20px; }
  .about-panel .cta .btn,
  .about-links,
  .about-link { width:100%; }
}