:root{
  --primary:#25CDB1;
  --accent:#7E6ED5;
  --ink:#1f2430;
  --muted:#5b6270;
  --line:#e9ecf1;
  --card:#ffffff;
  --bg:#f7f9fc;
  --radius:14px;
  --shadow:0 10px 24px rgba(20,26,40,.08);
}

/* Layout helpers */
.container{max-width:1200px;margin:0 auto;padding:0 24px;}
.kicker{display:inline-block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:rgba(126,110,213,.08);padding:.3rem .6rem;border-radius:999px}

/* ====== HERO ====== */
.about-hero{
  background:linear-gradient(180deg, rgba(126,110,213,.08), transparent 70%);
  padding:56px 0 24px;
}
.about-hero h1{
  margin:.6rem 0 0; font-size:2.2rem; color:var(--ink); letter-spacing:.2px;
}
.about-hero .sublead{
  color:var(--muted); max-width:820px; margin:.8rem 0 1.4rem; line-height:1.7;
}
.hero-cta{display:flex; gap:.8rem; flex-wrap:wrap}
.btn-primary{
  background:var(--primary); color:#fff; border:none; padding:.9rem 1.2rem; border-radius:10px;
  font-weight:600; text-decoration:none; box-shadow:var(--shadow); transition:.2s ease;
}
.btn-primary:hover{transform:translateY(-1px); filter:brightness(1.03)}
.btn-ghost{
  color:var(--accent); border:1px solid rgba(126,110,213,.35); padding:.86rem 1.1rem; border-radius:10px;
  text-decoration:none; font-weight:600; background:#fff;
}
.btn-ghost:hover{background:rgba(126,110,213,.06)}

/* ====== SPLIT ====== */
.about-split{padding:28px 0 40px}
.about-split .grid{
  display:grid; grid-template-columns:5fr 7fr; gap:36px; align-items:start;
}
.media img{
  width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow); display:block;
}
.media figcaption{
  font-size:.85rem; color:var(--muted); margin-top:.6rem;
}
.content p{color:var(--muted); line-height:1.75; margin:0 0 1rem}
.pill-list{display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 1.25rem}
.pill{
  font-size:.85rem; color:#39414f; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:.35rem .7rem;
}
.checklist{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:1rem 0 1.2rem}
.checklist .item{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; box-shadow:0 4px 12px rgba(17,27,39,.04)
}
.checklist .item h3{font-size:1rem; margin:0 0 .35rem; color:var(--ink)}
.checklist .item p{margin:0; color:var(--muted)}

.stats{display:flex; gap:18px; flex-wrap:wrap; margin-top:10px}
.stats div{
  background:#fff; border:1px dashed rgba(37,205,177,.45); border-radius:12px; padding:.75rem 1rem;
}
.stats strong{display:block; font-size:1.2rem; color:var(--ink)}
.stats span{font-size:.85rem; color:var(--muted)}

/* ====== LOGOS ====== */
.logos{padding:10px 0 28px}
.logos .hint{display:block; text-align:center; color:var(--muted); font-size:.9rem; margin-bottom:10px}
.logo-row{display:flex; gap:28px; justify-content:center; align-items:center; flex-wrap:wrap}
.logo-row img{height:60px; }

/* ====== CONTACT BAND ====== */
.contact-band{
  background:var(--bg); padding:42px 0; border-top:1px solid var(--line)
}
.contact-band .grid{
  display:grid; grid-template-columns:5fr 7fr; gap:32px; align-items:start
}
.benefits h2{margin:.2rem 0 1rem; color:var(--ink)}
.benefit-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; list-style:none; padding:0; margin:0}
.benefit-cards li{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; box-shadow:0 6px 16px rgba(17,27,39,.05)
}
.benefit-cards h4{margin:0 0 .25rem; color:var(--ink); font-size:1rem}
.benefit-cards p{margin:0; color:var(--muted)}

.contact-form{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow)
}
.contact-form .row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:12px}
.contact-form label{display:flex; flex-direction:column; gap:6px; color:var(--ink); font-weight:600; font-size:.95rem}
.contact-form input, .contact-form textarea{
  border:1px solid var(--line); border-radius:10px; padding:.8rem .9rem; font:inherit; color:var(--ink);
  background:#fff; outline:none; transition:border-color .15s ease, box-shadow .15s ease
}
.contact-form input:focus, .contact-form textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(126,110,213,.18)
}
.contact-form button{margin-top:.6rem}

@media (max-width: 1024px){
  .about-split .grid, .contact-band .grid{grid-template-columns:1fr}
  .checklist{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .checklist{grid-template-columns:1fr}
  .contact-form .row{grid-template-columns:1fr}
  .about-hero h1{font-size:1.8rem}
}