/* Services page — extends ../home/style.css */

.page-hero{
  padding:96px 0 60px;
  background:radial-gradient(600px 320px at 20% 0%, rgba(139,92,246,.16), transparent 70%);
}
.page-hero h1{ font-size:clamp(2rem, 4.6vw, 3rem); max-width:760px; }
.page-hero .lead{ max-width:560px; font-size:1.05rem; margin-top:16px; }

.services-list{ padding-top:24px; }

.service-block{
  display:grid; grid-template-columns:90px 1fr 220px; gap:32px; align-items:center;
  padding:48px 0; border-bottom:1px solid var(--border);
  scroll-margin-top:90px;
  position:relative;
}
.service-block:first-child{ padding-top:0; }
.service-block:last-child{ border-bottom:0; }

.service-visual{
  aspect-ratio:5/4; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.service-visual svg{ width:100%; height:100%; }

.service-num{
  font-family:var(--font-mono); font-size:1.4rem; font-weight:600;
  color:var(--sv-accent, var(--text-faint));
}

.service-body .tag{
  display:inline-block; margin-bottom:14px;
  color:var(--sv-accent, var(--text-muted));
  border-color:color-mix(in srgb, var(--sv-accent, var(--border-strong)) 55%, transparent);
}
.service-body h2{ font-size:1.6rem; margin-bottom:10px; border-left:3px solid var(--sv-accent, var(--accent-b)); padding-left:16px; }
.service-body > p{ max-width:640px; }
.service-body ul{ margin:20px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; max-width:640px; }
.service-body li{
  padding-left:22px; position:relative; color:var(--text-muted); font-size:.95rem;
}
.service-body li::before{
  content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%;
  background:var(--sv-accent, var(--accent-b));
}

@media (max-width:900px){
  .service-block{ grid-template-columns:1fr; gap:20px; }
  .service-num{ order:-1; }
  .service-visual{ order:2; aspect-ratio:16/9; max-width:320px; }
}
@media (max-width:640px){
  .service-body h2{ padding-left:12px; }
}