.about-hero{text-align:center;padding:8px 0 6px}
.about-hero h1{font-size:24px;margin:8px 0 6px}
.about-hero p{color:var(--muted);font-size:14px;line-height:1.6;margin:0}

.about h2{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:32px 0 14px}

.features{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px}
.feature .ic{font-size:22px;line-height:1}
.feature .ft{font-size:13.5px;font-weight:800;margin-top:8px}
.feature .fd{font-size:12px;color:var(--muted);line-height:1.5;margin-top:4px}

.compare{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.compare .col{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.compare .col h3{font-size:15px;font-weight:800;margin:0 0 10px}
.compare .col ul{margin:0;padding-left:18px;font-size:12.5px;color:var(--muted);line-height:1.7}
.compare-note{font-size:12px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.5}

.contacts{display:flex;flex-direction:column;gap:8px}
.contact-btn{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:13px 15px;text-decoration:none;
  color:var(--ink);font-size:14px;font-weight:700;min-height:44px}
.contact-btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.contact-btn .ic{font-size:18px;width:22px;text-align:center;flex:none}

@media(max-width:420px){
  .features{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr}
}