/* =====================================================
   AI-SOLUTIONS.CSS — AI Automation Services page
   Reuses global tokens/components (--primary, --accent, .eyebrow,
   .primary-cta, .secondary-cta, .section-title, .section-sub,
   .works-bullets, .gs-faq-*, .rb-audit-cta-*) — only page-unique
   layout lives here, in one place, under the svc- prefix.
   ===================================================== */

/* ── Hero — inspired by the homepage banner's premium quality (same
   color tokens: gradient wash, primary/accent, same card shadow
   language) but a deliberately different composition: asymmetric
   two-column layout instead of centered/stacked, a single tilted
   floating card instead of scattered decor squares, a stat row
   instead of a nav-pill strip. The banner's own .rbh-* CSS is
   untouched — this is a fresh design, not a reuse. ── */
.svc-hero3 {
  position: relative;
  overflow: hidden;
  padding: var(--section-py-lg) 0 var(--section-py-sm);
  background: linear-gradient(100deg, #f2f0fd 0%, #fafafd 55%, #eef8f4 100%);
}
/* Bottom-of-banner marquee — full-bleed (no left/right space), the
   pills themselves reuse .svc-strip-row's exact visual styling
   (shared with the homepage's own static version of this component),
   just continuously scrolling here instead of static/wrapped. Six
   duplicate tracks animated for a seamless infinite loop — inspired
   by justdigitalgurus.com's own "wdd-trust" section (which uses the
   same multi-copy technique, 4 copies there), extended to 6 copies
   here for extra safety margin, per (3) below.

   Three layers of fix, addressing three independent bugs found across
   multiple rounds of inspection:

   1) SPACING MATH — the tracks used to be spaced apart with CSS
      `gap`. With a gap-based seam, the true midpoint of the doubled
      content sits at "track-width + gap/2", not at "track-width +
      gap" (the actual start of the next track) — so a plain
      percentage transform always landed slightly short of a true
      repeat, every cycle. Fixed by using `margin-right` on every
      pill instead, including the last pill in each track, so each
      track is a self-contained unit whose own rendered width already
      includes its full trailing spacing — identical units placed
      back to back then have their seams exactly where the transform
      math expects them.

   2) TRANSFORM PRECISION — even with (1) fixed, a plain percentage
      transform is recomputed against the element's width on every
      animation frame. This site loads web fonts asynchronously
      (font-display: swap); if font metrics ever shift after the
      animation has already started, the percentage target shifts too
      and the loop visibly jumps — independent of the spacing math.
      Fixed in js/master.js: it measures the real rendered pixel width
      of one track (after layout has settled, re-measured again once
      web fonts finish loading and on resize) and writes it to
      --marquee-distance, which the keyframe below consumes via
      calc() instead of a bare percentage. The percentage remains only
      as the graceful no-JS fallback — still correct on its own thanks
      to fix (1), just without this extra layer of exactness.

   3) INSUFFICIENT CONTENT WIDTH — the actual root cause behind the
      persistent "gap/blank space" reports, found by estimating actual
      rendered sizes: with only 6 short pills, even TWO full tracks
      combined (~1400px) are narrower than a standard 1920px desktop
      viewport, let alone wider monitors. So even a mathematically
      perfect seamless loop (1 and 2 above) would still show a real
      gap for part of every cycle, simply because there wasn't enough
      scrolling content to cover the visible width at all times — no
      amount of transform-math precision can fix a genuine content
      shortage. Fixed by duplicating to 6 tracks (~4300px combined,
      comfortably exceeding even 3440px ultrawide monitors), going a
      step further than justdigitalgurus.com's own reference
      implementation (4 copies) for extra safety margin. The
      seamless-loop transform target changes accordingly: at 6 equal
      copies, the loop point is 1/6 of the total width, not 1/2 or
      1/4 — the CSS fallback below is -16.6667%, and the JS layer
      from fix (2) remains unchanged, since it always measures and
      targets exactly one track's width regardless of how many total
      copies exist. */
.svc-strip-marquee {
  position: relative;
  z-index: 1;
  margin-top: 48px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.svc-strip-marquee-scroll {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: svcStripMarqueeScroll 22s linear infinite;
}
.svc-strip-marquee:hover .svc-strip-marquee-scroll {
  animation-play-state: paused;
}
.svc-strip-marquee-track {
  display: flex !important;
  align-items: center;
  flex: none !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
}
.svc-strip-marquee-track a,
.svc-strip-marquee-track span {
  white-space: nowrap;
  margin-right: 15px;
}
@keyframes svcStripMarqueeScroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--marquee-distance, 16.6667%)), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-strip-marquee-scroll { animation: none; }
  .svc-strip-marquee-track:nth-child(n+2) { display: none; }
  .svc-strip-marquee-track { flex-wrap: wrap !important; }
}
.svc-hero3-glow {
  position: absolute;
  top: -180px;
  right: -160px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 71, 224, 0.14) 0%, transparent 70%);
  pointer-events: none;
}
.svc-hero3-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 56px;
  align-items: center;
}
@media (min-width: 960px) {
  .svc-hero3-grid { grid-template-columns: 1.08fr 0.92fr; }
}

.svc-hero3-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
.svc-hero3-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-light);
}

.svc-hero3-headline {
  font-size: clamp(32px, 4.4vw, 50px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.svc-hero3-sub {
    color: var(--ink-muted);
    font-size: 20px;
    font-weight: 500;
    margin-top: 25px;
}
.svc-hero3-sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90.92deg, #134eec 0.05%, #7c5ff9 100.03%);
  color: #fff;
  padding: 10px 20px 11px;
  border-radius: 16px;
  margin-left: 6px;
  transform: rotate(-2deg);
  box-shadow: 0 14px 30px rgba(91, 71, 224, 0.35);
}

.svc-hero3-subcopy {
  margin-top: 20px;
  max-width: 520px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-muted);
}

.svc-hero3-ctas {
  margin-top: 30px;
}

.svc-hero3-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.svc-hero3-stats strong {
  display: block;
  font-size: 24px;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 4px;
}
.svc-hero3-stats span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-muted);
}

/* ── Visual side: one tilted card, straightened on hover, plus two
   small floating proof chips — much more restrained than the
   homepage's scattered-decor approach. ── */
.svc-hero3-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}
.svc-hero3-tilt {
  position: relative;
  transform: rotate(-3deg);
  transition: transform 400ms var(--ease);
  max-width: 420px;
  width: 100%;
}
.svc-hero3-visual:hover .svc-hero3-tilt {
  transform: rotate(0deg);
}
.svc-hero3-chip {
  position: absolute;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  z-index: 2;
}
.svc-hero3-chip svg { flex: none; color: var(--primary); }
/* Positioned relative to .svc-hero3-tilt (the card itself, fixed
   max-width: 420px) rather than the wider .svc-hero3-visual
   container it sits inside. Percentages calculated against the wide
   container previously meant the chip's actual on-screen position
   depended on how much empty space surrounded the centered card —
   which varies by viewport width — so at some widths the chip landed
   on top of the card's own header text instead of floating beside
   it. Fixed, confirmed reproducible cause of the reported overlap. */
.svc-hero3-chip--1 { top: -14px; left: -18px; }
.svc-hero3-chip--2 { bottom: -14px; right: -18px; }
@media (min-width: 1100px) {
  .svc-hero3-chip { display: inline-flex; }
}

@media (max-width: 640px) {
  .svc-hero3-stats { gap: 20px; }
}

/* ── Hero workspace visual ── */
.svc-workspace-card {
  background: #fff;
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(20,16,45,0.1);
  padding: 28px;
}
.svc-workspace-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 22px;
}
.svc-workspace-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-light);
  flex: none;
}
.svc-workspace-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-muted);
  margin-bottom: 16px;
}
.svc-workspace-flow svg { color: var(--primary); flex: none; }
.svc-workspace-note {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.svc-workspace-status p {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
.svc-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.svc-status-row:first-of-type { border-top: none; }
.svc-status-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  flex: none;
}

/* ── Generic split layout (image/visual + copy), reused across
   several sections ── */
.svc-split {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}
@media (min-width: 960px) {
  .svc-split { grid-template-columns: 0.85fr 1.15fr; }
  .svc-split--reverse { grid-template-columns: 0.85fr 1.15fr; }
  .svc-split--reverse .svc-split-visual { order: 1; }
  .svc-split--reverse .svc-split-copy { order: 2; }
  /* This "why" section leads with copy (not a compact visual), so it
     gets the wider column — matching the homepage's own equivalent
     section ratio (1.05fr/0.95fr) rather than the narrower-first
     ratio the other .svc-split sections on this page use. */
  /* This "why" section now runs reversed (visual left, copy right) —
     the wider track needs to follow the copy, which moved to the
     second position, so this is 0.95fr/1.05fr instead of the
     1.05fr/0.95fr it'd be in normal (non-reversed) order. */
  #why .svc-split { grid-template-columns: 0.95fr 1.05fr; }
}

/* ── Approach list (used in "not a template" + "why rankboost") ── */
/* ── Automation pipeline visual — a connected node/flow diagram,
   distinct from the homepage's ring-and-orbit illustration (inspired
   by its card language — same shadows, radii, colors — but a
   different visual metaphor: a sequential pipeline rather than a
   radial "tools around AI" composition). ── */
.svc-flow-visual {
  position: relative;
}
.svc-flow-card {
  background: #fff;
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(20, 16, 45, 0.1);
  padding: 36px 32px;
  max-width: 380px;
  margin: 0 auto;
}
.svc-flow-node {
  display: flex;
  align-items: center;
  gap: 16px;
}
.svc-flow-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--ink-muted);
  border: 1px solid var(--line);
  transition: background 260ms, color 260ms, border-color 260ms;
}
.svc-flow-node--active .svc-flow-icon {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 10px 24px rgba(91, 71, 224, 0.3);
}
.svc-flow-text { display: flex; flex-direction: column; }
.svc-flow-text strong { font-size: 14.5px; color: var(--ink); }
.svc-flow-text span { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.svc-flow-connector {
  position: relative;
  width: 1.5px;
  height: 32px;
  margin-left: 23px;
  background: var(--line-strong);
}
.svc-flow-pulse {
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: svcFlowPulse 2.4s ease-in-out infinite;
}
@keyframes svcFlowPulse {
  0% { top: 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: calc(100% - 6px); opacity: 0; }
}
.svc-flow-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 20px auto 0;
  max-width: 380px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .svc-flow-pulse { animation: none; opacity: 0.6; top: 50%; }
}
@media (max-width: 900px) {
  .svc-flow-card { max-width: 420px; }
}

/* ── Services grid — a clean, uniform 3-column grid (inspired by,
   not a copy of, the homepage's card language), with one dark card
   for contrast. Sits on a distinct tinted panel background instead
   of the generic light-gray .soft-section utility. ── */
#services {
  background: linear-gradient(160deg, var(--primary-light) 0%, #eef8f4 100%);
}
.soft-section {
    background: var(--surface-2) !important;
}
.svc-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .svc-bento { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .svc-bento { grid-template-columns: repeat(3, 1fr); }
}
.svc-bento-card {
  position: relative;
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms;
  display: flex;
  flex-direction: column;
}
.svc-bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(20, 16, 45, 0.08);
  border-color: rgba(91, 71, 224, 0.16);
}
.svc-bento-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--primary-light);
  color: var(--primary);
  margin-bottom: 16px;
  flex-shrink: 0;
}
.svc-bento-card:hover .svc-bento-icon {
    transform: scale(1.08) rotate(-4deg);
}
.svc-bento-card h3 {
  font-size: 20px;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.svc-bento-card p {
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.6;
  margin-bottom: 16px;
  flex-grow: 1;
}
.svc-bento-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.svc-bento-tags span {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 5px 10px;
  border-radius: 999px;
}
.svc-bento-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  transition: gap 180ms;
  margin-top: auto;
}
.svc-bento-link:hover { gap: 11px; }
.svc-bento-link .arrow-icon svg { width: 14px; height: 14px; }


/* ── Icon list (Section 4: "Not a Template") — icon-badge rows,
   distinct from the icon-card grid used in Section 9 so the two
   "why us" style lists on this page don't repeat the same layout. ── */
.svc-icon-list {
  display: grid;
  gap: 14px;
}
.svc-icon-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 240ms, box-shadow 240ms, transform 240ms;
}
.svc-icon-list-item:hover {
  transform: translateX(4px);
  border-color: rgba(91, 71, 224, 0.18);
  box-shadow: var(--shadow-sm);
}
.svc-icon-list-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: var(--primary-light);
  color: var(--primary);
  position: relative;
  transition: background 260ms, color 260ms, transform 260ms var(--ease);
}
/* Same signal-ping hover effect used on every other icon badge on
   this page — kept identical everywhere per instruction. */
.svc-icon-list-icon::before,
.svc-icon-list-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  border: 1.5px solid var(--primary);
  opacity: 0;
}
.svc-icon-list-item:hover .svc-icon-list-icon {
  background: var(--primary);
  color: #fff;
  transform: scale(1.08) rotate(-4deg);
}
.svc-icon-list-item:hover .svc-icon-list-icon::before {
  animation: svcIconPing 1.2s ease-out infinite;
}
.svc-icon-list-item:hover .svc-icon-list-icon::after {
  animation: svcIconPing 1.2s ease-out infinite 0.4s;
}
@media (prefers-reduced-motion: reduce) {
  .svc-icon-list-item:hover .svc-icon-list-icon::before,
  .svc-icon-list-item:hover .svc-icon-list-icon::after {
    animation: none;
  }
}
.svc-icon-list-item h4 { font-size: 15.5px; margin-bottom: 4px; }
.svc-icon-list-item p { font-size: 13.5px; color: var(--ink-muted); line-height: 1.6; }

/* ── Statement panel — a strong, intentional "feature statement"
   background treatment (matching the weight of the homepage's own
   tinted closing-statement box on its Problem section), not just a
   border accent. Gradient wash panel, centered icon mark, the key
   phrase in accent purple. ── */
.svc-statement {
  position: relative;
  margin: var(--space-2xl) auto 0;
  max-width: 760px;
  text-align: center;
    padding: 30px 32px;
    border-radius: var(--r-xl);
    background: var(--primary-light);
    border: 1px solid rgba(91, 71, 224, 0.14);
  overflow: hidden;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.svc-statement-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  box-shadow: 0 14px 30px rgba(91, 71, 224, 0.18);
  margin-bottom: 20px;
}
.svc-statement-quote {
  font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
  font-style: normal;
  margin: 0;
}
.svc-statement-quote em {
  font-style: normal;
  color: var(--primary);
}

.svc-tagline-strip {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-muted);
}

/* ── Slider (Section 5: "Practical Automation") — a horizontal
   scroll-snap slider instead of another static grid, since this page
   already has several card grids elsewhere; gives this one section
   real visual variety. No external library — CSS scroll-snap does
   the heavy lifting (also gives free native touch-swipe on mobile),
   JS only drives the prev/next buttons and the dot indicators. ── */
.svc-slider {
  position: relative;
}
.svc-slider-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  padding: 4px 4px 8px;
  margin: 0 -4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.svc-slider-track::-webkit-scrollbar {
  display: none;
}
.svc-slide {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: calc(85% - 16px);
  padding: 24px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform 240ms var(--ease), box-shadow 240ms;
}
@media (min-width: 560px) { .svc-slide { width: calc(50% - 12px); } }
@media (min-width: 900px) { .svc-slide { width: calc(33.333% - 11px); } }
@media (min-width: 1200px) { .svc-slide { width: calc(25% - 12px); } }
.svc-slide:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}
.svc-slide .svc-icon-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--primary-light);
  color: var(--primary);
  margin-bottom: 14px;
  position: relative;
  transition: background 260ms, color 260ms, transform 260ms var(--ease);
}
/* Same signal-ping hover effect used elsewhere on this page's icon
   badges — kept identical. */
.svc-slide .svc-icon-tile-icon::before,
.svc-slide .svc-icon-tile-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  border: 1.5px solid var(--primary);
  opacity: 0;
}
.svc-slide:hover .svc-icon-tile-icon {
  background: var(--primary);
  color: #fff;
  transform: scale(1.08) rotate(-4deg);
}
.svc-slide:hover .svc-icon-tile-icon::before {
  animation: svcIconPing 1.2s ease-out infinite;
}
.svc-slide:hover .svc-icon-tile-icon::after {
  animation: svcIconPing 1.2s ease-out infinite 0.4s;
}
@keyframes svcIconPing {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-slide:hover .svc-icon-tile-icon::before,
  .svc-slide:hover .svc-icon-tile-icon::after {
    animation: none;
  }
  .svc-slider-track { scroll-behavior: auto; }
}
.svc-slide h4 { font-size: 15px; margin-bottom: 6px; }
.svc-slide p { font-size: 13px; color: var(--ink-muted); line-height: 1.6; }

.svc-slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}
.svc-slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  cursor: pointer;
  transition: background 180ms, border-color 180ms, transform 180ms;
  flex-shrink: 0;
}
.svc-slider-arrow:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}
.svc-slider-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ── Dark business-outcomes section — ghost numeral + icon cards ── */
.svc-dark-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0A0A0F 0%, #131126 55%, #0A0A0F 100%) !important;
}
/* Decorative floating glow + subtle grid — makes this dark section
   read as a deliberate visual break rather than a plain color swap,
   using the same glow-orb language already established elsewhere on
   the site (footer, homepage dark sections). */
.svc-dark-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}
.svc-dark-glow--1 {
  width: 420px;
  height: 420px;
  top: -160px;
  left: -120px;
  background: radial-gradient(circle, rgba(91, 71, 224, 0.5) 0%, transparent 70%);
}
.svc-dark-glow--2 {
  width: 380px;
  height: 380px;
  bottom: -160px;
  right: -100px;
  background: radial-gradient(circle, rgba(200, 255, 0, 0.14) 0%, transparent 70%);
}
.svc-dark-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 85%);
}
.svc-dark-section .container {
  position: relative;
  z-index: 1;
}
.svc-dark-section .eyebrow { justify-content: center; color: var(--accent); }
.svc-dark-section .eyebrow::before { background: var(--accent); }
.svc-dark-section .section-title { color: #fff; }
.svc-dark-section .section-title em { color: var(--accent); }
.svc-dark-section .section-sub { color: rgba(255,255,255,0.6); }
/* ── Business Outcomes — ghost-numeral icon cards, restored. ── */
.svc-outcome-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) { .svc-outcome-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .svc-outcome-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-outcome-card {
  position: relative;
  padding: 26px 24px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  transition: background 240ms, border-color 240ms;
}
.svc-outcome-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.16);
}
.svc-outcome-card::after {
  content: attr(data-num);
  position: absolute;
  top: -0.25em;
  right: 14px;
  font-size: 74px;
  font-weight: 900;
  line-height: 1;
  color: rgba(255,255,255,0.04);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.svc-outcome-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--accent);
  margin-bottom: 14px;
}
.svc-outcome-card h4 { position: relative; z-index: 1; font-size: 16px; color: #fff; margin-bottom: 8px; }
.svc-outcome-card p { position: relative; z-index: 1; font-size: 13.5px; color: rgba(255,255,255,0.58); line-height: 1.65; }

/* ── Technology & Integrations — dark stage with a large gradient
   heading and scattered colored tool-name pills, inspired by the
   provided reference composition (bold center heading + scattered
   tag pills around it) — not copied, and using RankBoost's own real
   tool list rather than the reference's example tags. ── */
.svc-tools-section {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 12vw, 140px) 24px;
  /* Light background, using the homepage banner's exact gradient
     (.rbh-hero in css/home.css) per explicit request, rather than a
     similar-but-different tint — same 4-stop violet-to-mint gradient,
     same colors, same stops. Still visually distinct from both plain
     white and .soft-section gray, so it doesn't clash with whichever
     section ends up adjacent to it on either page (the reason the
     previous tinted version was chosen over plain gray in the first
     place — see git history / earlier changelog entries for the
     specific adjacency issue that ruled out plain gray here). Text
     uses the page's normal default colors (dark heading/body text),
     so no color overrides are needed below beyond centering the
     eyebrow. */
  background: linear-gradient(120deg, #e3ddfb 0%, #ece9fc 35%, #e3f4f1 75%, #dff3ef 100%);
}
.svc-tools-stage {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.svc-tools-center {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 620px;
}
.svc-tools-section .eyebrow {
  justify-content: center;
  margin-bottom: 18px;
}

/* Scattered pills — absolutely positioned around the stage (desktop
   only), each with its own tilt and a per-pill custom color via
   --pc. Positions are percentage-based so the composition scales
   with the stage rather than using fixed pixel coordinates. */
.svc-tools-pill {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  /* No background color and no overflow:hidden here anymore — the
     image itself is the full circle (border-radius on the <img>
     directly, below), per request. overflow:hidden on this parent
     was also the actual cause of the missing tooltip: the tooltip is
     an absolutely-positioned ::after floating above the pill, and
     overflow:hidden on the parent clips anything extending past its
     own box, tooltip included. Removing it fixes both at once. */
  color: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
  cursor: default;
}
.svc-tools-pill img {
  flex: none;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
/* Tooltip — pure CSS, shows the tool name above the icon on hover
   (also reachable via keyboard focus). */
.svc-tools-pill::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 4;
  box-shadow: var(--shadow-md);
}
.svc-tools-pill:hover::after,
.svc-tools-pill:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.svc-tools-pill:hover {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
  z-index: 3;
}
@media (min-width: 901px) {
  .svc-tools-pill:hover { transform: scale(1.08) rotate(0deg) !important; }
}
.svc-tools-pill--1  { top: 4%;   left: 6%;   transform: rotate(-6deg); }
.svc-tools-pill--2  { top: 2%;   right: 8%;  transform: rotate(4deg); }
.svc-tools-pill--3  { top: 20%;  left: -2%;  transform: rotate(-3deg); }
.svc-tools-pill--4  { top: 22%;  right: -2%; transform: rotate(5deg); }
.svc-tools-pill--5  { top: 44%;  left: 2%;   transform: rotate(4deg); }
.svc-tools-pill--6  { top: 46%;  right: 4%;  transform: rotate(-5deg); }
.svc-tools-pill--7  { bottom: 22%; left: -4%; transform: rotate(6deg); }
.svc-tools-pill--8  { bottom: 20%; right: -4%; transform: rotate(-4deg); }
.svc-tools-pill--9  { bottom: 2%; left: 14%;  transform: rotate(-5deg); }
.svc-tools-pill--10 { bottom: 4%; left: 42%;  transform: rotate(3deg); }
.svc-tools-pill--11 { bottom: 0%; right: 14%; transform: rotate(5deg); }

/* Below 900px the scattered absolute layout has nowhere near enough
   room to stay legible without overlapping the heading — reflow the
   exact same pills into a simple centered wrapped row underneath it
   instead of hiding/duplicating them. */
@media (max-width: 900px) {
  .svc-tools-stage {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 0;
    gap: 12px;
    row-gap: 24px;
  }
  .svc-tools-center {
    max-width: 100%;
    width: 100%;
    order: 1;
  }
  .svc-tools-pill {
    position: static;
    transform: none !important;
    order: 2;
    width: 46px;
    height: 46px;
  }
  .svc-tools-pill svg {
    width: 20px;
    height: 20px;
  }
  /* .svc-tools-pill img intentionally NOT overridden here — it's
     width:100%/height:100% at the base rule, so it already scales
     correctly to whatever size the pill itself is at this
     breakpoint (46px), no explicit px value needed. */
}

/* ── "Why RankBoost" — split layout: copy on the left (heading,
   paragraphs, tagline strip), a 6-tile grid on the right. Plain
   bordered tiles (no icons, no numbers) matching the provided
   reference exactly. ── */
.svc-why-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
@media (min-width: 960px) {
  .svc-why-split { grid-template-columns: 0.95fr 1.05fr; }
}
.svc-why-copy p {
  font-size: 16px;
  color: var(--ink-muted);
  line-height: 1.7;
  margin-bottom: 16px;
}
.svc-why-copy .svc-tagline-strip {
  margin-top: 24px;
}

.svc-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 560px) { .svc-why-grid { grid-template-columns: repeat(2, 1fr); } }
.svc-why-tile {
  padding: 26px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform 240ms var(--ease), box-shadow 240ms, border-color 240ms;
}
.svc-why-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  border-color: rgba(91, 71, 224, 0.18);
}
.svc-why-tile h4 { font-size: 16px; margin-bottom: 8px; }
.svc-why-tile p { font-size: 13.5px; color: var(--ink-muted); line-height: 1.6; }

/* ── Industries marquee (Section 10) — continuous scroll, pauses
   on hover; content itself is always in the DOM (pure CSS motion,
   no JS required), so nothing is hidden from crawlers. ── */
.svc-industry-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.svc-industry-scroll {
  display: flex;
  width: max-content;
  animation: svcIndustryScroll 28s linear infinite;
}
.svc-industry-marquee:hover .svc-industry-scroll {
  animation-play-state: paused;
}
.svc-industry-track {
  display: flex;
  flex: none;
  gap: 14px;
  padding-right: 14px;
}
.svc-industry-track span {
  flex: none;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
@keyframes svcIndustryScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-industry-scroll { animation: none; flex-wrap: wrap; width: 100%; }
  .svc-industry-track:last-child { display: none; }
}

/* ── Automation platform cards — icon added ── */
.svc-platform-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 720px) { .svc-platform-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .svc-platform-grid { grid-template-columns: repeat(4, 1fr); } }
.svc-platform-card {
  padding: 26px 22px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 240ms var(--ease), box-shadow 240ms;
}
.svc-platform-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.svc-platform-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--primary-light);
  color: var(--primary);
  margin-bottom: 14px;
  position: relative;
  transition: background 260ms, color 260ms, transform 260ms var(--ease);
}
.svc-platform-icon::before,
.svc-platform-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  border: 1.5px solid var(--primary);
  opacity: 0;
}
.svc-platform-card:hover .svc-platform-icon {
  background: var(--primary);
  color: #fff;
  transform: scale(1.08) rotate(-4deg);
}
.svc-platform-card:hover .svc-platform-icon::before {
  animation: svcIconPing 1.2s ease-out infinite;
}
.svc-platform-card:hover .svc-platform-icon::after {
  animation: svcIconPing 1.2s ease-out infinite 0.4s;
}
@media (prefers-reduced-motion: reduce) {
  .svc-platform-card:hover .svc-platform-icon::before,
  .svc-platform-card:hover .svc-platform-icon::after {
    animation: none;
  }
}
.svc-platform-card h4 { font-size: 15.5px; margin-bottom: 8px; }
.svc-platform-card p { font-size: 13.5px; color: var(--ink-muted); line-height: 1.6; }

/* ── Testimonials — split layout: copy left, one-at-a-time slider
   right, reusing the sitewide .testimonial-card component and the
   same .svc-slider scroll-snap pattern as Practical Automation
   (just overridden to one full-width slide instead of several
   partial ones). ── */
.svc-testimonial-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .svc-testimonial-split { grid-template-columns: 0.75fr 1.25fr; gap: 56px; }
}
.svc-testimonial-copy .section-sub {
  margin-top: 12px;
}
.svc-testimonial-slider .svc-slider-track {
  padding: 4px 4px 4px;
  margin: 0 -4px;
}
.svc-testimonial-slide {
  width: 100%;
  flex: 0 0 100%;
  /* Strip the outer box styling .svc-slide normally has (padding,
     background, border, radius) — that treatment is meant for slides
     that ARE the card directly, like Practical Automation. Here a
     full .testimonial-card is nested inside, so the outer box was
     creating a visible "box behind the box" double-border effect. */
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}
.svc-testimonial-slide:hover {
  transform: none;
  box-shadow: none;
}
.svc-testimonial-slide .testimonial-card {
  height: 100%;
}
.svc-testimonial-slider .svc-slider-controls {
  justify-content: flex-start;
  margin-top: 20px;
}

/* ── Resources — tinted section background, clean 3-per-row grid.
   Overrides the shared .articles-grid's default 3-col breakpoint
   (1200px) down to 960px, so this reliably shows 3 in one row on
   typical desktop/laptop widths rather than only very wide screens. ── */
.svc-resources-section {
  position: relative;
  background: linear-gradient(150deg, var(--primary-light) 0%, #eef8f4 100%);
}
.svc-resources-grid {
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 960px) {
  .svc-resources-grid { grid-template-columns: repeat(3, 1fr); }
}