.servicesPage { max-width: 960px; }
.serviceList { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.4rem; }
.serviceCard { display: flex; align-items: center; gap: 1.1rem; padding: 1.5rem; background: var(--colorBg); border: 2px solid var(--colorSoft); border-radius: 24px; transition: transform var(--durFast) var(--ease), border-color var(--durFast) var(--ease); }
a.serviceCard:hover { transform: translateY(-4px); border-color: var(--colorInk); }
.serviceCard.isDisabled { opacity: .7; }
.serviceIcon { display: grid; flex: none; place-items: center; width: 3.4rem; height: 3.4rem; background: var(--colorSoft); border-radius: 50%; }
.serviceIcon svg { width: 1.6rem; height: 1.6rem; }
.serviceBody { flex: 1; min-width: 0; }
.serviceTitle { margin: 0; font-size: 1.2rem; line-height: 1.35; }
.serviceText { margin: .2rem 0 0; font-size: .92rem; opacity: .85; }
.serviceAction { display: inline-flex; align-items: center; gap: .4rem; margin-top: .7rem; font-size: .85rem; font-weight: 700; }
.isDisabled .serviceAction { padding: .2rem .8rem; background: var(--colorSoft); border-radius: 999px; }
.serviceAction svg { width: 1rem; height: 1rem; }
@media (hover: none) { a.serviceCard:hover { transform: none; } }
.serviceIcon { transition: transform var(--dur) var(--ease); }
a.serviceCard:hover .serviceIcon { transform: rotate(-8deg) scale(1.1); }
.isDisabled .serviceAction::before { content: ""; width: .5rem; height: .5rem; background: currentColor; border-radius: 50%; animation: blink var(--loop) ease-in-out infinite; }