/* ─── Services ─────────────────────────────────── */

/* Strip horizontal padding so cards bleed full-width */
.services {
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  position: relative;
}

/* Ambient colour glow behind the section */
.services::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 80% 0%,   rgba(124,58,237,0.16) 0%, transparent 65%),
    radial-gradient(ellipse 35% 50% at 15% 100%, rgba(236,72,153,0.09) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.services__header {
  position: relative;
  z-index: 1;
  margin-bottom: 2.5rem;
  padding-inline: max(var(--content-pad), calc((100vw - var(--content-max)) / 2));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.services__heading {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--c-text);
  max-width: 18ch;
  text-wrap: balance;
}

/* ── Scrolling row ── */
.services__list {
  position: relative;
  z-index: 1;
  display: flex;
  padding-inline: max(var(--content-pad), calc((100vw - var(--content-max)) / 2 + var(--content-pad)));
  will-change: transform;
}

/* ── Individual card ── */
.svc {
  flex: 0 0 300px;
  padding: 1.75rem;
  border: 1px solid var(--c-line);
  border-right: none;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: background var(--dur-base) var(--ease-out-expo);
  cursor: default;
  user-select: none;
  overflow: hidden;
}
.svc:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.svc:last-child  {
  border-right: 1px solid var(--c-line);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* Per-card accent colours — sweep purple → violet → pink → orange → cyan → teal */
.svc:nth-child(1) { --svc-accent: #7c3aed; --svc-rgb: 124,58,237; }
.svc:nth-child(2) { --svc-accent: #9333ea; --svc-rgb: 147,51,234; }
.svc:nth-child(3) { --svc-accent: #ec4899; --svc-rgb: 236,72,153; }
.svc:nth-child(4) { --svc-accent: #f97316; --svc-rgb: 249,115,22; }
.svc:nth-child(5) { --svc-accent: #22d3ee; --svc-rgb: 34,211,238; }
.svc:nth-child(6) { --svc-accent: #06b6d4; --svc-rgb: 6,182,212; }

/* Top accent border — always visible, brightens on hover */
.svc::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--svc-accent, #7c3aed) 0%, transparent 80%);
  opacity: 0.45;
  transition: opacity var(--dur-base) var(--ease-out-expo);
}
@media (hover: hover) {
  .svc:hover::before { opacity: 1; }
}

/* Bottom gradient line on hover */
.svc::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #7c3aed, #ec4899, #22d3ee);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out-expo);
}

@media (hover: hover) {
  .svc:hover {
    background: radial-gradient(
      ellipse 140% 110% at 0% 0%,
      rgba(var(--svc-rgb, 124,58,237), 0.07) 0%,
      var(--c-surface) 60%
    );
  }
  .svc:hover::after { transform: scaleX(1); }
}

/* ── Card content ── */
.svc__n {
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--svc-accent, var(--c-text-3));
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.svc__name {
  font-family: var(--ff-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.18;
  color: var(--c-text);
}

.svc__body {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--c-text-2);
  margin-top: 0.25rem;
}

@media (max-width: 640px) {
  /* On mobile, ditch the horizontal carousel — use a 2-col grid instead */
  .services {
    overflow: visible;
    padding-inline: var(--content-pad);
  }

  .services__header {
    padding-inline: 0;
  }

  .services__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-inline: 0;
    gap: 1px;
    background: var(--c-line);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    overflow: hidden;
    will-change: auto;
    transform: none !important;
  }

  .svc {
    flex: none;
    border: none;
    border-radius: 0 !important;
    background: var(--c-bg-1);
    padding: 1.25rem 1rem;
  }

  .svc:first-child,
  .svc:last-child {
    border-radius: 0 !important;
  }

  .svc__name {
    font-size: 1.05rem;
  }
}