:root{
  --cm-accent:#ef7d00;
  --cm-blue:#2f6f9b;
  --cm-blue-dark:#245b80;
}

.topbar{ background: var(--cm-accent); }
.brand-mark{
  display:inline-grid; place-items:center;
  width:26px; height:26px;
  border:2px solid var(--cm-accent);
  border-radius:6px;
  color:var(--cm-accent);
  font-weight:800;
}

.btn-accent{
  --bs-btn-bg: var(--cm-accent);
  --bs-btn-border-color: var(--cm-accent);
  --bs-btn-hover-bg: #d87000;
  --bs-btn-hover-border-color: #d87000;
  --bs-btn-color: #fff;
}

.hero{
  background: linear-gradient(0deg, rgba(35,96,140,.92), rgba(35,96,140,.92));
  background-size: cover;
  background-position: center;
  border-top: 8px solid var(--cm-accent);
  position:relative;
}
.hero-overlay{ display:none; } /* background already includes overlay */
.hero-bottom-accent{
  height:10px;
  background: var(--cm-accent);
  opacity:.9;
}

.hero-sub{ max-width: 40rem; }
.hero-city{ color:#d7efff; }

.check{
  display:inline-grid; place-items:center;
  width:22px; height:22px;
  border-radius:999px;
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  font-weight:800;
}

.hero-device{ border-radius: 18px; overflow:hidden; }
.hero-device-placeholder{
  background:
    linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.05));
  min-height: 280px;
}

/* sections */
.py-6{ padding-top:4rem; padding-bottom:4rem; }

.icon-pill{
  width:42px; height:42px;
  display:grid; place-items:center;
  background:#f1f5f9;
  border-radius:999px;
  color:#0f172a;
  font-weight:800;
}

.why{
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.02));
  background-size: cover;
  background-position: center;
}

.feature-card{
  background:#fff;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 14px 40px rgba(15,23,42,.08);
  border:1px solid rgba(15,23,42,.06);
}
.feature-icon{
  width:54px; height:54px;
  border-radius: 14px;
  display:grid; place-items:center;
  background:#f8fafc;
  margin-bottom: 12px;
  font-size: 24px;
}

.courses{
  background: linear-gradient(0deg, rgba(35,96,140,.92), rgba(35,96,140,.92));
  background-size: cover;
  background-position:center;
  position:relative;
}
.courses-overlay{ display:none; }
.course-card{ border-radius:18px; overflow:hidden; }
.course-img{ background: rgba(0,0,0,.15); }

.renewal-graphic{ border-radius: 18px; overflow:hidden; }
.renewal-placeholder{
  background: linear-gradient(135deg, rgba(239,125,0,.15), rgba(35,96,140,.12));
}

.info-pill{
  display:flex;
  gap:14px;
  padding: 18px 18px;
  border-radius: 16px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}
.info-check{
  width:34px; height:34px;
  border-radius:999px;
  display:grid; place-items:center;
  background:#dcfce7;
  color:#166534;
  font-weight:900;
  flex: 0 0 auto;
}

.how{
  background: linear-gradient(0deg, rgba(35,96,140,.95), rgba(35,96,140,.95));
  background-size: cover;
  background-position:center;
}
.step-circle{
  width:72px; height:72px;
  border-radius:999px;
  display:grid; place-items:center;
  background:#fff;
  color: var(--cm-blue-dark);
  font-size: 30px;
  border:4px solid rgba(239,125,0,.9);
}
.step-badge{
  display:inline-block;
  padding: 4px 12px;
  border-radius:999px;
  background: rgba(239,125,0,.95);
  font-weight:800;
  font-size: .75rem;
}

.map-frame{ max-width: 1000px; }
.map-placeholder{
  background: linear-gradient(135deg, rgba(15,23,42,.05), rgba(15,23,42,.02));
  border-radius: 18px;
  border:1px solid rgba(15,23,42,.08);
}

.faq{ background:#f8fafc; }

.cta{ background: var(--cm-accent); }
.mini-check{
  width:18px; height:18px;
  display:inline-grid; place-items:center;
  border-radius:999px;
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  font-weight:900;
}

.footer{ background: var(--cm-blue-dark); }