/* ==== Services page only ==== */

/* Hero variations for services */
.hero { background: linear-gradient(135deg, var(--hero-from), var(--hero-to)); border-bottom: 1px solid var(--line); }
.hero-inner { display:grid; gap:20px; grid-template-columns:1.2fr .8fr; align-items:center; }
@media (max-width:900px){ .hero-inner{ grid-template-columns:1fr; } }

.badge{
  display:inline-flex; align-items:center; gap:8px;
  background:#eef2ff; color:#1e40af; border-radius:999px;
  padding:6px 12px; font-weight:700; font-size:12px; border:1px solid #dbeafe;
}

/* Decorative hero visual */
.hero-visual{
  aspect-ratio:4/3; border-radius:20px; border:1px solid var(--line); position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(96,165,250,.2), transparent 60%),
    radial-gradient(800px 400px at 120% 120%, rgba(37,99,235,.15), transparent 55%),
    linear-gradient(135deg,#ffffff,#f8fcff);
}
.hero-visual::after{
  content:""; position:absolute; inset:0;
  background-image: repeating-linear-gradient(45deg, transparent 0 10px, rgba(37,99,235,.04) 10px 20px);
}

/* Service cards */
.svc-grid{ display:grid; gap:22px; grid-template-columns:repeat(1,minmax(0,1fr)); }
@media (min-width:950px){ .svc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.svc{ display:flex; flex-direction:column; overflow:hidden; }
.svc-media{ aspect-ratio:16/9; background:linear-gradient(135deg,#eef6ff,#eaf2ff); border-bottom:1px solid var(--line); display:grid; place-items:center; color:#334155; font-weight:800; }
.svc-body{ padding:16px; }
.svc-title{ font-weight:900; font-size:20px; margin:2px 0; }
.svc-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }

/* Reuse pill but ensure look on this page */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#eef2ff; color:#1e40af; border:1px solid #dbeafe; font-weight:700; font-size:12px; }

.svc-list{ margin:12px 0 0; padding-left:18px; color:var(--muted); }
.svc-cta{ display:flex; gap:10px; padding:12px 16px; border-top:1px solid var(--line); }

/* Definition-like rows */
.dl{ display:grid; grid-template-columns:140px 1fr; gap:6px; margin-top:10px; }
.dl div{ padding:4px 0; border-bottom:1px dashed var(--line); }
.dl .k{ color:var(--muted); }

/* Steps */
.steps{ display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.step{ padding:14px; border-radius:14px; border:1px solid var(--line); background:#fff; }

/* Compare blocks */
.compare{ display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:900px){ .compare{ grid-template-columns:1fr; } }
.comp{ padding:16px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.comp h3{ display:flex; align-items:center; gap:8px; }

/* FAQ accordion */
.faq-acc{ display:grid; gap:12px; margin-top:12px; }
.faq-acc details{ border:1px solid var(--line); border-radius:16px; padding:12px 14px; background:#fff; }
.faq-acc summary{ cursor:pointer; font-weight:700; }
.faq-acc p{ color:var(--muted); margin:8px 0 0; }