/* 30-about.css — extracted from main.css */

/* ========== ABOUT ========== */
.section.about{ padding:64px 0 64px; background:#fff; }
.about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:28px; align-items:center; }

.about-card{
  display:grid; grid-template-columns: 1.15fr 1fr; gap:32px;
  background:#fff; border:1px solid rgba(12,36,97,.06);
  border-radius:24px; padding:36px;
  box-shadow:0 18px 40px rgba(10,30,60,.10);
}
.about-copy h2{
  margin:.25rem 0 .75rem; color:#0b214a;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing:.2px; line-height:1.25;
}
.about-eyebrow{
  display:inline-block; font-weight:800; letter-spacing:.12em;
  font-size:.78rem; color:#1e73be; text-transform:uppercase;
  padding:4px 10px; border-radius:999px;
  background: rgba(30,115,190,.10);
}
.about-copy p{ color:#25324a; line-height:1.7; max-width:60ch; }

.about-points{ display:grid; gap:8px; margin:14px 0 18px; padding:0; list-style:none; }
.about-points li{
  position:relative; padding-left:28px; color:#0f1a2b; font-weight:600;
}
.about-points li::before{
  content:""; position:absolute; left:0; top:.25em;
  width:18px; height:18px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff 25%, #1e73be 26%);
  box-shadow:0 0 0 2px rgba(30,115,190,.25);
}

.about-art{ display:flex; align-items:center; justify-content:center; }
.about-art__panel{
  width:100%; max-width:520px;
  background: linear-gradient(180deg,#f2f7ff,#ffffff);
  border-radius:22px; padding:24px;
  box-shadow: 0 20px 36px rgba(10,30,60,.12), inset 0 0 0 1px rgba(12,36,97,.06);
}
.about-art__panel svg{ width:100%; height:auto; display:block; }
.section.about .btn{ box-shadow:0 8px 18px rgba(30,115,190,.25); }



/* About responsive */
@media (max-width:980px){
  .about-card{ grid-template-columns:1fr; padding:24px; gap:22px; }
  .about-art__panel{ max-width:560px; margin-inline:auto; }
}