/* Service page — the four icon cards follow the homepage glass language (see home-glass.css tokens). */
:root{--glass-light:rgba(255,255,255,.66);--glass-border-light:rgba(15,23,42,.08);--glass-blur:blur(16px) saturate(130%);--glass-shadow:0 24px 64px -36px rgba(16,24,40,.28);--radius-card:24px;--g-motion:200ms}
@media (max-width:700px){:root{--glass-blur:blur(12px) saturate(130%)}}
.service-list{position:relative;isolation:isolate;background:#f7f8fa}
.service-list::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40rem 26rem at 12% 20%,rgba(27,98,237,.12),transparent 64%),radial-gradient(36rem 24rem at 88% 85%,rgba(167,139,250,.10),transparent 64%)}
.service-card{border:1px solid var(--glass-border-light);border-radius:20px;background:var(--glass-light);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);transition:border-color var(--g-motion) ease,background-color var(--g-motion) ease}
.service-card:hover,.service-card:focus-within{transform:none;border-color:rgba(27,98,237,.35);background:rgba(255,255,255,.78);box-shadow:var(--glass-shadow)}
.service-card__visual{border-radius:14px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7)}
@media (prefers-reduced-motion:reduce){.service-card{transition:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.service-card{background:#fff}}