/* =====================================================================
   Six service modules -- full rebuild (explicit direction: the previous
   one-oversized-main-card + six-flat-secondary-cards hierarchy read as
   a heavy "box in a box", forced repeated information, and left the
   secondary cards as plain rectangles). Now exactly 6 strictly
   identical cards -- same width, height, padding, icon position, title
   height and phrase height -- meant to read as six modules of one
   premium AI platform, not six independent text boxes.

   Responsive via CSS container queries, not viewport breakpoints
   (explicit direction): .services-cards is the query container, so the
   grid reflows against the right column's own rendered width -- e.g.
   still 2 columns on a wide viewport if the left column is claiming a
   lot of it, never coupled to the raw window width. ===================================================================== */
.services-cards {
  container-type: inline-size;
}

.services-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: clamp(18px, 2vw, 22px);
}

@container (min-width: 560px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 740px, not a rounder 800-960px: the right column itself is already
   narrowed by the left column's own width (page-split.css), so a higher
   threshold strands common desktop widths on the 2-column layout.
   Container widths measured directly in the browser, not guessed:
   865px at a 1440px viewport, 763px at 1280px, 599px at 1024px.

   The threshold moved down from 820px to 740px precisely because 1280px
   -- a plainly large screen, and one the brief enumerates as such --
   was landing on 2 columns. 740px keeps 1280px on 3 columns while
   leaving 1024px (599px of container) on the 2-column layout, which is
   the requested "3 / 2 / 1" progression. */
@container (min-width: 740px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Card shell -- dark glass (same --li-* recipe as every other card
   family on this site), a 1px gradient ring drawn by two stacked masked
   pseudo-elements (not the `border` property -- the mask-composite
   technique below draws only the ring itself, so a resting dim ring and
   a brighter hover ring can cross-fade via a plain opacity transition,
   with zero gradient-interpolation artifacts and zero risk of the
   interior fill bleeding through). Not a link: no cursor: pointer, no
   focus ring on the card itself ("les cartes ne sont pas des liens",
   carried over from the previous build).

   Every transition on this card and its children is transform/opacity/
   color/border-color/background-color only -- no box-shadow animation,
   no filter/blur animation, and nothing driven by JS (no mousemove, no
   rAF, no cursor-follow, no canvas/particles) -- explicit performance
   direction for this rebuild. */
.service-module {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 14px;
  padding: clamp(22px, 2vw, 26px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 45%), var(--li-card-bg);
  backdrop-filter: var(--li-card-blur);
  -webkit-backdrop-filter: var(--li-card-blur);
  border-radius: var(--li-radius);
  box-shadow: var(--li-shadow);
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.service-module:hover,
.service-module:focus-within {
  transform: translateY(-3px);
}

/* Resting gradient ring -- always faintly visible. */
.service-module::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(63, 123, 248, 0.4), rgba(184, 107, 248, 0.3), rgba(63, 123, 248, 0.12));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Brighter ring, hover-only -- a pure opacity cross-fade over the ring
   above, never a background/gradient transition. */
.service-module::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(63, 123, 248, 0.85), rgba(184, 107, 248, 0.65), rgba(63, 123, 248, 0.3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.service-module:hover::after,
.service-module:focus-within::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .service-module,
  .service-module::after {
    transition: none;
  }

  .service-module:hover,
  .service-module:focus-within {
    transform: none;
  }
}

/* ---- Header row: icon + verb. ---- */
.service-module__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.service-module__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.14);
  border: 1px solid rgba(139, 92, 246, 0.34);
  color: #b7c2ff;
}

.service-module__icon svg {
  width: 20px;
  height: 20px;
}

/* Fixed icon halo -- always faintly present, not pointer-following;
   intensifies (opacity + a slight scale-up) on hover. */
.service-module__icon::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.32), transparent 70%);
  opacity: 0.55;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.service-module:hover .service-module__icon::before,
.service-module:focus-within .service-module__icon::before {
  opacity: 0.9;
  transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .service-module__icon::before {
    transition: none;
  }

  .service-module:hover .service-module__icon::before,
  .service-module:focus-within .service-module__icon::before {
    transform: none;
  }
}

.service-module__verb {
  font-family: var(--font-satoshi);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b7c2ff;
}

.service-module__title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-satoshi);
  font-weight: 700;
  font-size: 18.5px;
  line-height: 1.3;
  color: #fff;
}

.service-module__summary {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-satoshi);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--li-text, rgba(255, 255, 255, 0.85));
}

/* ---- Capability modules -- three compact chips, not a bullet list:
   each one its own small bordered block with a short label, identical
   treatment across every card. Brighten together on hover -- background/
   border/text color only, no per-item stagger. ---- */
.service-module__capabilities {
  position: relative;
  z-index: 2;
  align-self: end;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.service-module__capability {
  position: relative;
  padding: 8px 12px 8px 26px;
  font-family: var(--font-satoshi);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--li-text-secondary);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 9px;
  transition: color 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
}

.service-module__capability::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: linear-gradient(135deg, #3f7bf8, #b86bf8);
}

.service-module:hover .service-module__capability,
.service-module:focus-within .service-module__capability {
  color: var(--li-text);
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .service-module__capability {
    transition: none;
  }
}

/* ---- Watermark -- a large, low-opacity, slightly rotated version of
   the card's own icon, tucked in the bottom-right corner and clipped
   by the card's own edge (.service-module's overflow: hidden). Sits
   above the card's own background but below the text content -- a
   negative z-index still paints after the box's own background,
   before its z-index:auto/positive descendants (confirmed painting
   order, not a hover-revealed layer). Shifts a few px on hover. ---- */
.service-module__watermark {
  position: absolute;
  right: -14px;
  bottom: -18px;
  z-index: -1;
  width: clamp(100px, 11vw, 136px);
  height: clamp(100px, 11vw, 136px);
  color: rgba(255, 255, 255, 0.05);
  transform: rotate(-8deg);
  pointer-events: none;
  transition: transform 0.22s ease, color 0.22s ease;
}

.service-module__watermark svg {
  width: 100%;
  height: 100%;
}

.service-module:hover .service-module__watermark,
.service-module:focus-within .service-module__watermark {
  transform: rotate(-8deg) translate(-4px, -4px);
  color: rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .service-module__watermark {
    transition: none;
  }

  .service-module:hover .service-module__watermark,
  .service-module:focus-within .service-module__watermark {
    transform: rotate(-8deg);
  }
}

/* ---- Beam -- a thin highlight line that sweeps once across the top of
   the card on hover. transform + opacity only (both composited, no
   layout/paint work per frame); the sweep itself is a single CSS
   transition triggered by :hover, never a keyframe loop or JS-driven
   animation. ---- */
.service-module__beam {
  position: absolute;
  top: 0;
  left: -45%;
  z-index: 2;
  width: 45%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(196, 181, 253, 0.85), transparent);
  opacity: 0;
  transform: translateX(0);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.service-module:hover .service-module__beam,
.service-module:focus-within .service-module__beam {
  opacity: 1;
  transform: translateX(310%);
}

@media (prefers-reduced-motion: reduce) {
  .service-module__beam {
    transition: none;
    opacity: 0 !important;
    transform: none !important;
  }
}

/* =====================================================================
   Results strip -- unchanged structure, surface/border/radius now
   harmonized to the new modules' dark-glass recipe instead of its own
   bespoke pale gradient tint (explicit direction). Width matches the
   grid above it: both are plain children of the same .services-feed
   column, so no extra alignment rule is needed. ===================================================================== */
.services-results {
  margin-top: clamp(36px, 4.5vh, 44px);
  padding: 26px clamp(22px, 2vw, 30px);
  background: var(--li-card-bg);
  backdrop-filter: var(--li-card-blur);
  -webkit-backdrop-filter: var(--li-card-blur);
  border: 1px solid var(--li-border);
  border-radius: var(--li-radius);
  box-shadow: var(--li-shadow);
}

.services-results__heading {
  margin: 0 0 18px;
  font-family: var(--font-satoshi);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--li-text-secondary);
}

.services-results__list {
  display: flex;
  flex-direction: column;
}

.services-results__item {
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.services-results__item:first-child {
  border-top: none;
  padding-top: 0;
}

.services-results__item:last-child {
  padding-bottom: 0;
}

.services-results__value {
  display: block;
  font-family: var(--font-satoshi);
  font-weight: 800;
  font-size: 24px;
  background-image: linear-gradient(270.04deg, #ffffff 0.04%, #cdd8ff 99.96%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.services-results__desc {
  display: block;
  margin-top: 6px;
  font-family: var(--font-satoshi);
  font-size: 13px;
  line-height: 1.45;
  color: var(--li-text-secondary);
}

@media (min-width: 768px) {
  .services-results__list {
    flex-direction: row;
  }

  .services-results__item {
    flex: 1;
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0 28px;
  }

  .services-results__item:first-child {
    border-left: none;
    padding-left: 0;
  }

  .services-results__item:last-child {
    padding-right: 0;
  }
}