body { background: #202231; }
.service-page { color: #fff; }
.service-hero { min-height: 420px; padding: 100px 20px 80px; background: linear-gradient(135deg, #22294a, #1b1d2e); text-align: center; }
.service-hero .eyebrow { color: #7eb7ff; font-size: 18px; margin-bottom: 18px; }
.service-hero h1 { margin: 0 auto 24px; max-width: 900px; font-size: 52px; line-height: 1.2; }
.service-hero p { max-width: 850px; margin: 0 auto; color: #c6c9d5; font-size: 18px; line-height: 1.8; }
.service-section { width: var(--w); margin: 0 auto; padding: 80px 0; }
.service-section h2 { margin: 0 0 12px; font-size: 34px; text-align: center; }
.service-section .lead { margin: 0 auto 36px; max-width: 760px; color: #b6b7bd; text-align: center; line-height: 1.8; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service-card { min-height: 180px; padding: 26px; background: #313341; border-radius: 8px; box-shadow: 0 0 20px rgba(38,40,74,.3); }
.service-card h3 { margin: 0 0 12px; color: #fff; font-size: 20px; }
.service-card p { margin: 0; color: #b6b7bd; line-height: 1.7; }
.service-cta { padding: 70px 20px; background: #262939; text-align: center; }
.service-cta h2 { margin: 0 0 20px; }
.service-cta p { color: #b6b7bd; }
@media (max-width: 600px) {
  .service-hero { min-height: 0; padding: 70px 20px 55px; }
  .service-hero h1 { font-size: 30px; }
  .service-hero p { font-size: 14px; }
  .service-section { width: auto; margin: 0 15px; padding: 45px 0; }
  .service-section h2 { font-size: 25px; }
  .service-grid { grid-template-columns: 1fr; gap: 12px; }
  .service-card { min-height: 0; padding: 20px; }
}