.services { position: relative; }
.services-head { max-width: 40ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.services-title { font-size: clamp(2rem, 5vw, 3.6rem); margin-top: 1rem; }
.services-grad {
  background: var(--grad-gojo); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.services-lead { margin-top: 1.4rem; color: var(--text-dim); font-size: 1.1rem; }

.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
}
.services-card {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(1.6rem, 2.4vw, 2.2rem);
  background: rgba(17,25,40,.45); border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius);
  
  overflow: hidden; isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s;
}
/* свечение-градиент по краю на ховере */
.services-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  padding: 1px; background: var(--grad-gojo);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s;
}
.services-card:hover { transform: translateY(-6px); box-shadow: var(--glow-purple); }
.services-card:hover::before { opacity: 1; }
.services-card--feat { background:
  radial-gradient(120% 140% at 0% 0%, rgba(154,91,255,.16), transparent 55%), rgba(17,25,40,.45); }

.services-num {
  font-family: var(--font-display); font-size: .9rem; color: var(--text-dim);
  letter-spacing: .1em;
}
.services-glyph {
  width: 54px; height: 54px; margin: 1.2rem 0 1.4rem; border-radius: 14px;
  background: var(--bg-soft); border: 1px solid var(--line); position: relative;
}
.services-glyph::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--grad-soft); -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 26px; mask-size: 26px;
}
.services-glyph--film::after  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm3 2v2h2V5H7Zm8 0v2h2V5h-2ZM7 11v2h2v-2H7Zm8 0v2h2v-2h-2ZM7 17v2h2v-2H7Zm8 0v2h2v-2h-2Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm3 2v2h2V5H7Zm8 0v2h2V5h-2ZM7 11v2h2v-2H7Zm8 0v2h2v-2h-2ZM7 17v2h2v-2H7Zm8 0v2h2v-2h-2Z'/%3E%3C/svg%3E"); }
.services-glyph--web::after   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm2 3v11h14V8H5Zm1-3v1h2V5H6Zm4 0v1h2V5h-2Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm2 3v11h14V8H5Zm1-3v1h2V5H6Zm4 0v1h2V5h-2Z'/%3E%3C/svg%3E"); }
.services-glyph--agent::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a2 2 0 0 1 2 2v1h3a2 2 0 0 1 2 2v3h1a1 1 0 0 1 0 2h-1v3a2 2 0 0 1-2 2h-3v1a2 2 0 0 1-4 0v-1H7a2 2 0 0 1-2-2v-3H4a1 1 0 0 1 0-2h1V7a2 2 0 0 1 2-2h3V4a2 2 0 0 1 2-2ZM9 10v2h2v-2H9Zm4 0v2h2v-2h-2Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a2 2 0 0 1 2 2v1h3a2 2 0 0 1 2 2v3h1a1 1 0 0 1 0 2h-1v3a2 2 0 0 1-2 2h-3v1a2 2 0 0 1-4 0v-1H7a2 2 0 0 1-2-2v-3H4a1 1 0 0 1 0-2h1V7a2 2 0 0 1 2-2h3V4a2 2 0 0 1 2-2ZM9 10v2h2v-2H9Zm4 0v2h2v-2h-2Z'/%3E%3C/svg%3E"); }

.services-name { font-size: 1.5rem; }
.services-desc { margin-top: .8rem; color: var(--text-dim); }
.services-list { list-style: none; margin: 1.4rem 0; display: grid; gap: .6rem; }
.services-list li { position: relative; padding-left: 1.4rem; font-size: .95rem; }
.services-list li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--grad-soft); box-shadow: var(--glow-blue);
}
.services-link {
  margin-top: auto; padding-top: 1rem; color: var(--cyan); font-weight: 600;
  border-top: 1px solid var(--line); transition: gap .2s, color .2s;
}
.services-link:hover { color: var(--text); }

@media (max-width: 920px) { .services-grid { grid-template-columns: 1fr; } }