/* === About Page (scoped) === */
.about-hero{ position:relative; overflow:hidden; border-radius:1.25rem; }
.about-hero .about-mesh{
  background:
    radial-gradient(1000px 500px at -10% -20%, rgba(76,99,210,.35), transparent 60%),
    radial-gradient(900px 600px at 110% 0%, rgba(236,72,153,.28), transparent 55%),
    radial-gradient(900px 700px at 80% 110%, rgba(20,184,166,.25), transparent 55%);
}

.about-card{ background:var(--bg-alt); border:1px solid var(--border); border-radius:1rem; box-shadow:var(--shadow); }
.about-kpi h4{ font-size:.8rem; color:rgba(255,255,255,.65); }
[data-theme="light"] .about-kpi h4{ color:var(--muted); }
.about-kpi .num{ font-variant-numeric: tabular-nums; font-weight:800; }

.about-badge{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border:1px solid var(--border); border-radius:.6rem; font-size:.95rem; background:var(--bg); }
.about-badge svg{ width:14px; height:14px; opacity:.8; }

.about-logo{
  display:grid; place-items:center; height:64px; border:1px solid var(--border); border-radius:.75rem;
  background:var(--bg); color:var(--text); font-weight:700; font-size:.95rem;
  filter:grayscale(100%); opacity:.9; transition:all .2s ease;
}
.about-logo:hover{ filter:none; opacity:1; }

.about-input,.about-select,.about-textarea{
  width:100%; background:transparent; color:var(--text); border:1px solid var(--border);
  border-radius:.9rem; padding:.7rem .9rem; outline:none;
}
.about-textarea{ min-height:140px; border-radius:1rem; resize:vertical; }
.about-btn{ padding:.7rem 1rem; border-radius:9999px; font-weight:700; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text); }
.about-btn--primary{ border-color:transparent; background:linear-gradient(90deg,var(--indigo),var(--pink),var(--teal)); color:#fff; }
.about-note{ color:rgba(255,255,255,.75); font-size:.9rem; }
[data-theme="light"] .about-note{ color:var(--muted-80); }

.about-grid-2{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:768px){ .about-grid-2{ grid-template-columns:1fr 1fr; } }
.about-grid-3{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:1024px){ .about-grid-3{ grid-template-columns:repeat(3,1fr); } }

.about-list{ display:grid; gap:.6rem; }
.about-list li{ display:flex; gap:.6rem; align-items:flex-start; }
.about-list svg{ width:18px; height:18px; margin-top:.2rem; flex:0 0 auto; color:var(--indigo); }