/* ==========================================================================
   DevOps Experts India — Service page system (service-page.css)
   Shared by every service landing page; the template only carries markup.
   Palette: ink #14141E/#23232F, lime #DDF24A, lime-soft #F0F4D6, lines #E3E4DA.
   Type: Lexend Deca · H1 44/700 · H2 36/600 · H3 19/600 · body 16 · section pad 55px.
   Bootstrap 5.3 (loaded once by the header) supplies grid, tabs and accordion;
   everything else lives here. Class prefix: sp-.
   Contents: tokens · base · buttons · icons/media · section head · hero · proof (stats+clients)
   · intro+flow · services (index + blocks) · cta bands · outcomes · results · tools (tabs)
   · process (timeline) · environments (scroller) · scale (dark) · versus (table) · why · faq
   · scroll ui · motion · responsive
   ========================================================================== */
:root {
  --sp-ink: #14141E; --sp-ink-2: #23232F; --sp-ink-soft: #454758; --sp-ink-muted: #6b6d84; --sp-ink-faint: #8B8C98; --sp-body: #4A4B58;
  --sp-lime: #DDF24A; --sp-lime-soft: #F0F4D6;
  --sp-surface: #ffffff; --sp-surface-soft: #FAFBF3; --sp-surface-alt: #F8F8FB; --sp-surface-card: #F7F8FA; --sp-surface-sage: #F5F7E6;
  --sp-line: #E3E4DA; --sp-line-soft: #EEEFE6;
  --sp-on-dark: #ffffff; --sp-on-dark-soft: rgba(255,255,255,.82); --sp-on-dark-line: rgba(255,255,255,.12); --sp-on-dark-fill: rgba(255,255,255,.06);
  --sp-gradient: linear-gradient(93.06deg, #14141E 38.02%, #23232F 80.46%);
  --sp-shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.05);
  --sp-shadow-md: 0 2px 6px rgba(16,24,40,.05), 0 12px 28px rgba(16,24,40,.07);
  --sp-shadow-lg: 0 18px 44px -22px rgba(20,20,30,.32);
  --sp-radius-sm: 8px; --sp-radius: 12px; --sp-radius-lg: 16px; --sp-radius-panel: 20px; --sp-radius-pill: 999px;
  --sp-ease: cubic-bezier(.22,1,.36,1); --sp-dur: .28s;
  --sp-font: 'Lexend Deca', 'Lexend Deca Fallback', sans-serif;
  --sp-fs-h1: 44px; --sp-fs-h2: 30px; --sp-fs-h3: 17px; --sp-fs-text: 15px;
  --sp-fs-lead: clamp(16px, .9rem + .4vw, 18px);
  --sp-pad: 55px; --sp-head-gap: 36px; --sp-gap: 24px;
  --dx-header-h: 0px; /* the live theme's header script overrides this at runtime */
}
@font-face { font-family: 'Lexend Deca Fallback'; src: local('Arial'), local('Helvetica'); size-adjust: 113%; ascent-override: 100%; descent-override: 25%; line-gap-override: 0%; }

/* Base ------------------------------------------------------------------ */
html { scroll-padding-top: calc(var(--dx-header-h, 0px) + 72px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.sp-page { font-family: var(--sp-font); font-size: 15px; line-height: 1.65; color: var(--sp-body); background: var(--sp-surface); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.sp-page, .sp-page *, .sp-page *::before, .sp-page *::after { box-sizing: border-box; }
/* (0,1,0) resets: beat Bootstrap's reboot (p/ul margins, list padding) yet lose to the later component rules */
.sp-page :where(h1, h2, h3, h4) { margin: 0; font-family: var(--sp-font); font-weight: 600; line-height: 1.22; letter-spacing: -.01em; }
.sp-page :where(p) { margin: 0; line-height: 1.65; }
.sp-page :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
/* headings must stay black — the theme greys them, so this one carries real specificity */
.sp-page h1, .sp-page h2, .sp-page h3, .sp-page h4 { color: var(--sp-ink); }
:where(.sp-page) :where(img, svg) { max-width: 100%; height: auto; }
.sp-page button { font-family: inherit; }
.sp-page :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--sp-ink); outline-offset: 3px; border-radius: 6px; }
.sp-page .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.sp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sp-page a:not([class]) { color: var(--sp-ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(20,20,30,.35); text-underline-offset: 3px; transition: text-decoration-color var(--sp-dur) var(--sp-ease); }
.sp-page a:not([class]):hover { color: var(--sp-ink); text-decoration-color: var(--sp-ink); }
.sp-section--dark a:not([class]) { color: var(--sp-lime); text-decoration-color: rgba(221,242,74,.5); }

/* Layout ---------------------------------------------------------------- */
.sp-section { position: relative; padding-block: var(--sp-pad); }
.sp-section--soft { background: var(--sp-surface-soft); }
.sp-section--alt { background: var(--sp-surface-alt); }
.sp-section--sage { background: var(--sp-surface-sage); }
.sp-section--dark { background: var(--sp-ink) var(--sp-gradient); color: var(--sp-on-dark-soft); }
.sp-section--dark h2, .sp-section--dark h3, .sp-section--dark h4 { color: var(--sp-on-dark); }
.sp-section--line-top { border-top: 1px solid var(--sp-line-soft); }
.sp-cv { content-visibility: auto; contain-intrinsic-size: auto 700px; }
.sp-head { max-width: 760px; margin-bottom: var(--sp-head-gap); }
.sp-head--center { text-align: center; margin-inline: auto; }
.sp-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
.sp-head--row > div:first-child { max-width: 720px; }
.sp-head__title { position: relative; padding-top: 18px; font-size: var(--sp-fs-h2); font-weight: 600; line-height: 1.22; text-wrap: balance; color: var(--sp-ink); }
.sp-head__title::before { content: ''; position: absolute; top: 0; left: 0; width: 44px; height: 3px; border-radius: 3px; background: var(--sp-lime); transform-origin: left; transition: transform .7s var(--sp-ease); }
.sp-head--center .sp-head__title::before { left: 50%; transform: translateX(-50%); }
.sp-motion [data-reveal]:not(.is-in) .sp-head__title::before { transform: scaleX(0); }
.sp-motion [data-reveal]:not(.is-in) .sp-head--center .sp-head__title::before { transform: translateX(-50%) scaleX(0); }
.sp-head__text { margin-top: 12px; font-size: var(--sp-fs-text); color: var(--sp-body); text-wrap: pretty; }
.sp-section--dark .sp-head__title { color: var(--sp-on-dark); }
.sp-section--dark .sp-head__text { color: var(--sp-on-dark-soft); }
.sp-prose > p + p { margin-top: 14px; }
.sp-sticky { position: sticky; top: calc(var(--dx-header-h, 0px) + 84px); }

/* Buttons ---------------------------------------------------------------- */
.sp-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 0 8px 0 26px; border: 1px solid transparent; border-radius: var(--sp-radius-pill); font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; isolation: isolate; transition: transform var(--sp-dur) var(--sp-ease), box-shadow var(--sp-dur) var(--sp-ease), background-color var(--sp-dur) var(--sp-ease), color var(--sp-dur) var(--sp-ease), border-color var(--sp-dur) var(--sp-ease); }
.sp-btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-18deg) translateX(-120%); z-index: -1; transition: transform .75s var(--sp-ease); }
.sp-btn:hover::after, .sp-btn:focus-visible::after { transform: skewX(-18deg) translateX(420%); }
.sp-btn:hover, .sp-btn:focus-visible { transform: translateY(-2px); text-decoration: none; }
.sp-btn:active { transform: translateY(0) scale(.985); }
.sp-btn__arrow { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; transition: transform .45s var(--sp-ease), background-color var(--sp-dur) var(--sp-ease), color var(--sp-dur) var(--sp-ease); }
.sp-btn__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sp-btn:hover .sp-btn__arrow, .sp-btn:focus-visible .sp-btn__arrow { transform: rotate(-45deg); }
.sp-btn--lime { background: var(--sp-lime); color: var(--sp-ink); }
.sp-btn--lime .sp-btn__arrow { background: var(--sp-ink); color: var(--sp-lime); }
.sp-btn--lime:hover, .sp-btn--lime:focus-visible { color: var(--sp-ink); box-shadow: 0 16px 32px -14px rgba(20,20,30,.5); }
.sp-btn--ink { background: var(--sp-ink); color: var(--sp-on-dark); }
.sp-btn--ink::after { background: linear-gradient(100deg, transparent, rgba(221,242,74,.35), transparent); }
.sp-btn--ink .sp-btn__arrow { background: var(--sp-lime); color: var(--sp-ink); }
.sp-btn--ink:hover, .sp-btn--ink:focus-visible { background: var(--sp-ink-2); color: var(--sp-on-dark); box-shadow: 0 16px 32px -14px rgba(20,20,30,.55); }
.sp-btn--white { background: var(--sp-surface); color: var(--sp-ink); }
.sp-btn--white .sp-btn__arrow { background: var(--sp-ink); color: var(--sp-on-dark); }
.sp-btn--white:hover, .sp-btn--white:focus-visible { color: var(--sp-ink); box-shadow: 0 16px 32px -14px rgba(0,0,0,.45); }

/* Icons, checks, media ------------------------------------------------------ */
.sp-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; background: var(--sp-lime-soft); color: var(--sp-ink); transition: background-color var(--sp-dur) var(--sp-ease), color var(--sp-dur) var(--sp-ease), transform .45s var(--sp-ease); }
.sp-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sp-icon--ink { background: var(--sp-ink); color: var(--sp-lime); box-shadow: 0 8px 18px -8px rgba(20,20,30,.5); }
.sp-check { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%; background: var(--sp-lime); color: var(--sp-ink); transition: transform var(--sp-dur) var(--sp-ease); }
.sp-check svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sp-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.sp-checklist li { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; line-height: 1.5; color: var(--sp-ink); }
.sp-checklist li .sp-check { margin-top: 1px; }
.sp-checklist li:hover .sp-check { transform: scale(1.15) rotate(-8deg); }
.sp-checklist--tight { gap: 10px 20px; }
.sp-checklist--tight li { font-size: 14.5px; color: var(--sp-ink-soft); }
.sp-checklist--tight .sp-check { width: 20px; height: 20px; }
/* .sp-media: image frame that stays a tidy tile when the asset has not been uploaded yet */
.sp-media { position: relative; overflow: hidden; border-radius: var(--sp-radius-panel); background: var(--sp-surface-card); }
.sp-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--sp-ease); }
.sp-media:hover img { transform: scale(1.05); }
.sp-media.is-missing { background: linear-gradient(135deg, #F7F8FA 0%, #F0F4D6 100%); }
.sp-media.is-missing img { visibility: hidden; }
.sp-media.is-missing::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Ccircle cx='9' cy='9.5' r='1.6'/%3E%3Cpath d='M21 15.5l-4.6-4.4a1.5 1.5 0 0 0-2.1 0L7 18.3'/%3E%3C/svg%3E") center / 44px no-repeat; opacity: .3; }

/* ===== HERO (dark split, image right — banner background unchanged) ========= */
.sp-hero { position: relative; padding-block: 64px 72px; background: var(--sp-ink) var(--sp-gradient); color: var(--sp-on-dark-soft); overflow: hidden; }
.sp-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 60% 90% at 85% 50%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 60% 90% at 85% 50%, #000 0%, transparent 70%); pointer-events: none; }
.sp-hero::after { content: ''; position: absolute; left: -10%; bottom: -40%; width: 50%; height: 80%; background: radial-gradient(closest-side, rgba(221,242,74,.14), transparent); pointer-events: none; }
.sp-hero > .container { position: relative; }
.sp-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 2rem + 2.5vw, 72px); align-items: center; }
/* eyebrow carries the H1 */
.sp-page .sp-hero__eyebrow { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1.45; letter-spacing: .01em; color: var(--sp-lime); text-wrap: balance; }
.sp-hero__eyebrow::before { content: ''; flex: 0 0 15px; height: 2px; margin-top: 11px; border-radius: 2px; background: var(--sp-lime); }
/* heading area carries the intro paragraph */
.sp-hero__lead { margin-top: 18px; max-width: 64ch; font-size: var(--sp-fs-lead); font-weight: 400; line-height: 1.5; letter-spacing: -.005em; color: var(--sp-on-dark); text-wrap: pretty; }
.sp-hero__points { margin-top: 30px; }
.sp-hero__points li { color: var(--sp-on-dark); }
.sp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }
.sp-hero__media { position: relative; }
.sp-hero__media::before { content: ''; position: absolute; inset: 20px -20px -20px 20px; border-radius: var(--sp-radius-panel); border: 1.5px dashed rgba(221,242,74,.55); z-index: 0; transition: transform .5s var(--sp-ease); }
.sp-hero__media:hover::before { transform: translate(6px, 6px); }
.sp-hero__frame { position: relative; z-index: 1; margin: 0; aspect-ratio: 760 / 507; overflow: hidden; border-radius: var(--sp-radius-panel); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); background: var(--sp-ink-2); }
.sp-hero__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* slow ken-burns settle (plays once) + pointer parallax driven by --px/--py from JS */
.sp-motion .sp-hero__frame img { transform: scale(1.1); animation: sp-kenburns 14s var(--sp-ease) forwards; }
.sp-hero__media[data-parallax] .sp-hero__frame { transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 10px), 0); transition: transform .6s var(--sp-ease); }
.sp-hero__media[data-parallax] .sp-hero__chip { transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -14px), 0); transition: transform .6s var(--sp-ease); }
@keyframes sp-kenburns { to { transform: scale(1); } }
.sp-hero__chip { position: absolute; left: -18px; bottom: 26px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--sp-surface); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow-md); font-size: 12.5px; font-weight: 600; color: var(--sp-ink); white-space: nowrap; }
.sp-hero__chip .sp-check { width: 18px; height: 18px; background: var(--sp-line-soft); color: var(--sp-ink-faint); }
.sp-hero__chip .sp-check svg { width: 10px; height: 10px; }
.sp-hero__chip-sep { width: 14px; height: 1px; background: var(--sp-line); }
.sp-hero__chip-sep:last-of-type { display: none; }
.sp-motion .sp-hero__chip .sp-check { animation: sp-step-on 6s var(--sp-ease) infinite; }
.sp-motion .sp-hero__chip .sp-check:nth-of-type(2) { animation-delay: 1.2s; }
.sp-motion .sp-hero__chip .sp-check:nth-of-type(3) { animation-delay: 2.4s; }
.sp-motion .sp-hero__chip .sp-check:nth-of-type(4) { animation-delay: 3.6s; }
html:not(.sp-motion) .sp-hero__chip .sp-check { background: var(--sp-lime); color: var(--sp-ink); }
@keyframes sp-step-on { 0%, 12% { background: var(--sp-line-soft); color: var(--sp-ink-faint); transform: scale(1); } 20%, 75% { background: var(--sp-lime); color: var(--sp-ink); transform: scale(1.12); } 85%, 100% { background: var(--sp-lime); color: var(--sp-ink); transform: scale(1); } }
.sp-motion .sp-hero__eyebrow, .sp-motion .sp-hero__lead, .sp-motion .sp-hero__points, .sp-motion .sp-hero__actions { animation: sp-rise .6s var(--sp-ease) both; }
.sp-motion .sp-hero__lead { animation-delay: .1s; } .sp-motion .sp-hero__points { animation-delay: .18s; } .sp-motion .sp-hero__actions { animation-delay: .26s; }
.sp-motion .sp-hero__frame { animation: sp-clip .9s .15s var(--sp-ease) both; }
.sp-motion .sp-hero__media::before { animation: sp-rise .8s .4s var(--sp-ease) both; }
.sp-motion .sp-hero__chip { animation: sp-pop .5s .9s var(--sp-ease) both; }

/* ===== PROOF: stats row + client logos (homepage band) ===================== */
.sp-proof { padding-block: 48px 55px; border-bottom: 1px solid var(--sp-line-soft); }
.sp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.sp-stat { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 18px 22px 16px; overflow: hidden; border-radius: 16px; transition: background-color var(--sp-dur) var(--sp-ease); }
.sp-stat::before { content: ''; position: absolute; top: 18px; right: 0; bottom: 18px; width: 1px; background: var(--sp-line); }
.sp-stat:last-child::before { display: none; }
.sp-stat__ico { position: absolute; right: 16px; top: 14px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sp-surface); border: 1px solid var(--sp-line); color: var(--sp-ink); overflow: visible; transition: background-color var(--sp-dur) var(--sp-ease), color var(--sp-dur) var(--sp-ease), border-color var(--sp-dur) var(--sp-ease); }
.sp-stat__ico::before { content: ''; position: absolute; inset: -5px; border: 1.5px dashed rgba(20,20,30,.35); border-radius: 50%; pointer-events: none; }
.sp-motion .sp-stat__ico::before { animation: sp-spin 14s linear infinite; }
.sp-stat:hover .sp-stat__ico { background: var(--sp-ink); color: var(--sp-lime); border-color: var(--sp-ink); }
.sp-motion .sp-stat:hover .sp-stat__ico::before { animation-duration: 4s; border-color: var(--sp-ink); }
.sp-stat__ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sp-stat__figure { position: relative; z-index: 1; margin: 0 0 6px; padding: 0 2px; font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--sp-ink); font-variant-numeric: tabular-nums; background: linear-gradient(transparent 62%, rgba(221,242,74,.85) 62%, rgba(221,242,74,.85) 92%, transparent 92%); background-size: 100% 100%; background-repeat: no-repeat; transition: letter-spacing .3s var(--sp-ease); }
.sp-motion .sp-stat__figure { background-size: 0 100%; }
.sp-motion .sp-stats.is-in .sp-stat__figure { animation: sp-hl .9s .3s var(--sp-ease) forwards; }
.sp-stat:hover .sp-stat__figure { letter-spacing: .01em; }
.sp-stat__label { position: relative; z-index: 1; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--sp-ink); }
.sp-stat__note { position: relative; z-index: 1; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--sp-body); }
.sp-stat__note::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--sp-lime); border: 1px solid var(--sp-ink); vertical-align: 1px; }
.sp-clients { margin-top: 44px; }
.sp-clients__head { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.sp-clients__rule { flex: 1; height: 0; border-top: 1.5px dashed var(--sp-line); }
.sp-page .sp-clients__title { position: relative; display: inline-flex; align-items: center; margin: 0; padding: 9px 20px 9px 38px; background: var(--sp-lime-soft); border: 1px solid var(--sp-line); border-radius: 999px; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--sp-ink); white-space: nowrap; }
.sp-clients__title::before { content: ''; position: absolute; left: 16px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--sp-ink); box-shadow: 0 0 0 4px rgba(221,242,74,.7); }
.sp-motion .sp-clients__title::before { animation: sp-pulse 2.4s ease-in-out infinite; }
.sp-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sp-marquee__track { display: flex; width: max-content; }
.sp-motion .sp-marquee__track { animation: sp-marquee 32s linear infinite; }
.sp-marquee:hover .sp-marquee__track, .sp-marquee:focus-within .sp-marquee__track { animation-play-state: paused; }
.sp-marquee__item { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 196px; min-height: 76px; margin-right: 14px; padding: 10px 18px; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 14px; transition: border-color var(--sp-dur) var(--sp-ease), transform var(--sp-dur) var(--sp-ease), background-color var(--sp-dur) var(--sp-ease); }
.sp-marquee__item img { width: auto; max-width: 100%; max-height: 46px; object-fit: contain; opacity: .9; transition: opacity var(--sp-dur) var(--sp-ease), transform var(--sp-dur) var(--sp-ease); }
.sp-marquee__item:hover { border-color: var(--sp-ink); background: var(--sp-lime-soft); transform: translateY(-3px); }
.sp-marquee__item:hover img { opacity: 1; transform: scale(1.04); }
@keyframes sp-marquee { to { transform: translate3d(-50%, 0, 0); } }
html:not(.sp-motion) .sp-marquee { mask-image: none; -webkit-mask-image: none; }
html:not(.sp-motion) .sp-marquee__track { width: auto; flex-wrap: wrap; justify-content: center; gap: 12px 0; }
html:not(.sp-motion) .sp-marquee__track > [aria-hidden="true"] { display: none; }

/* ===== INTRO: image left + delivery-flow card, copy right =================== */
.sp-intro__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 2rem + 2vw, 64px); align-items: center; }
.sp-intro__media { position: relative; padding: 0 28px 40px 0; }
.sp-intro__media::after { content: ''; position: absolute; right: 0; bottom: 12px; width: 72%; height: 72%; border-radius: var(--sp-radius-panel); background: var(--sp-lime-soft); z-index: -1; }
.sp-intro__media .sp-media { aspect-ratio: 760 / 494; box-shadow: var(--sp-shadow-lg); }
.sp-intro .sp-head { margin-bottom: 18px; }
/* delivery flow card: build → test → deploy → secure → monitor, lights up once when revealed */
.sp-flow { position: absolute; right: -24px; bottom: 0; z-index: 2; padding: 16px 14px 14px; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-lg); }
.sp-flow__list { position: relative; display: flex; }
.sp-flow__list::before, .sp-flow__list::after { content: ''; position: absolute; left: 36px; right: 36px; top: 17px; height: 2px; border-radius: 2px; background: var(--sp-line); }
.sp-flow__list::after { background: var(--sp-lime); transform: scaleX(0); transform-origin: left; }
.sp-motion .is-in .sp-flow__list::after { animation: sp-fill 2.2s .3s var(--sp-ease) forwards; }
html:not(.sp-motion) .sp-flow__list::after { transform: none; }
.sp-flow__node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 72px; font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--sp-ink); text-align: center; }
.sp-flow__dot { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sp-line-soft); color: var(--sp-ink-faint); outline: 4px solid var(--sp-surface); transition: transform var(--sp-dur) var(--sp-ease); }
.sp-flow__dot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html:not(.sp-motion) .sp-flow__dot, .sp-motion .is-in .sp-flow__dot { animation: sp-light .45s var(--sp-ease) forwards; }
.sp-motion .is-in .sp-flow__node:nth-child(1) .sp-flow__dot { animation-delay: .3s; } .sp-motion .is-in .sp-flow__node:nth-child(2) .sp-flow__dot { animation-delay: .8s; } .sp-motion .is-in .sp-flow__node:nth-child(3) .sp-flow__dot { animation-delay: 1.3s; } .sp-motion .is-in .sp-flow__node:nth-child(4) .sp-flow__dot { animation-delay: 1.8s; } .sp-motion .is-in .sp-flow__node:nth-child(5) .sp-flow__dot { animation-delay: 2.3s; }
.sp-flow__node:hover .sp-flow__dot { transform: scale(1.14); }
@keyframes sp-light { to { background: var(--sp-lime); color: var(--sp-ink); } }
@keyframes sp-fill { to { transform: scaleX(1); } }

/* ===== SERVICES: sticky scroll-spy index + stacked service blocks =========== */
.sp-envs { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: start; }
.sp-index { position: sticky; top: calc(var(--dx-header-h, 0px) + 96px); }
.sp-index__list { display: grid; gap: 2px; border-left: 2px solid var(--sp-line); }
.sp-index__link { position: relative; display: flex; align-items: center; gap: 14px; margin-left: -2px; padding: 12px 16px; border-left: 2px solid transparent; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--sp-ink-muted); text-decoration: none; transition: color var(--sp-dur) var(--sp-ease), border-color var(--sp-dur) var(--sp-ease), background-color var(--sp-dur) var(--sp-ease); }
.sp-index__num { flex: 0 0 auto; min-width: 24px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--sp-ink-faint); font-variant-numeric: tabular-nums; transition: color var(--sp-dur) var(--sp-ease); }
.sp-index__link:hover { color: var(--sp-ink); background: rgba(20,20,30,.03); }
.sp-index__link.is-active { color: var(--sp-ink); font-weight: 600; border-color: var(--sp-ink); }
.sp-index__link.is-active .sp-index__num { color: var(--sp-ink); }
.sp-index__link.is-active::after { content: ''; position: absolute; left: -6px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--sp-lime); border: 2px solid var(--sp-ink); }
/* service cards stack as you scroll: each one sticks slightly lower than the previous (--i set by JS) */
.sp-envs__list { display: grid; gap: 18px; }
.sp-env { position: sticky; top: calc(var(--dx-header-h, 0px) + 96px + var(--i, 0) * 14px); display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 36px; align-items: center; padding: 30px 32px; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-panel); box-shadow: 0 26px 50px -36px rgba(20,20,30,.6); overflow: hidden; isolation: isolate; scroll-margin-top: calc(var(--dx-header-h, 0px) + 90px); transition: border-color .35s var(--sp-ease), box-shadow .35s var(--sp-ease); }
.sp-env:hover { border-color: rgba(20,20,30,.3); box-shadow: 0 30px 56px -34px rgba(20,20,30,.5); }
/* cursor spotlight (--mx/--my set by JS on fine pointers) */
.sp-env::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(221,242,74,.22), transparent 62%); opacity: 0; transition: opacity .4s var(--sp-ease); pointer-events: none; }
.sp-env:hover::before { opacity: 1; }
.sp-env > * { position: relative; z-index: 1; }
.sp-env__top { display: flex; align-items: center; gap: 14px; }
.sp-env__num { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--sp-ink-muted); font-variant-numeric: tabular-nums; }
.sp-env__title { margin-top: 18px; font-size: 21px; font-weight: 600; line-height: 1.3; }
.sp-env__text { margin-top: 10px; font-size: 15.5px; line-height: 1.65; color: var(--sp-body); }
.sp-env .sp-checklist { margin-top: 18px; }
.sp-env__media { aspect-ratio: 4 / 3; border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-sm); transition: box-shadow var(--sp-dur) var(--sp-ease), transform var(--sp-dur) var(--sp-ease); }
.sp-env:hover .sp-env__media { box-shadow: var(--sp-shadow-lg); transform: translateY(-3px); }
.sp-env:hover .sp-icon { background: var(--sp-ink); color: var(--sp-lime); transform: rotate(-8deg) scale(1.08); }

/* ===== CTA bands ============================================================ */
.sp-cta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; margin-top: 52px; padding: 46px 52px; border-radius: 24px; background-color: var(--sp-ink); background-size: cover; background-position: center; color: var(--sp-on-dark-soft); overflow: hidden; isolation: isolate; }
.sp-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20,20,30,.95) 0%, rgba(20,20,30,.84) 55%, rgba(20,20,30,.62) 100%); z-index: -1; }
.sp-cta::after { content: ''; position: absolute; right: -10%; top: -60%; width: 46%; height: 180%; background: radial-gradient(closest-side, rgba(221,242,74,.16), transparent); z-index: -1; pointer-events: none; }
.sp-cta__kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-lime); }
.sp-cta__kicker::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--sp-lime); }
.sp-page .sp-cta__title { color: var(--sp-on-dark); font-size: 30px; font-weight: 600; line-height: 1.3; text-wrap: auto; }
.sp-cta__text { margin-top: 12px; max-width: 66ch; font-size: 16px; line-height: 1.65; color: var(--sp-on-dark-soft); }
.sp-cta--center { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; margin-top: 0; padding: 64px 48px; }
.sp-cta--center::before { background: linear-gradient(180deg, rgba(20,20,30,.86), rgba(20,20,30,.8)); }
.sp-cta--center::after { right: 50%; top: 30%; width: 60%; transform: translateX(50%); }
.sp-cta--center .sp-cta__title { font-size: 34px; max-width: 22ch; }
.sp-cta--center .sp-cta__text { margin-inline: auto; }
.sp-cta--center .sp-btn { margin-top: 12px; }
/* light panel CTA (process foot) */
.sp-panel-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 36px; margin-top: 48px; padding: 32px 36px; background: var(--sp-lime-soft); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-panel); }
.sp-panel-cta h3 { font-size: 22px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.sp-panel-cta p { margin-top: 8px; font-size: 15px; color: var(--sp-ink-soft); }

/* ===== OUTCOMES: sticky media left + numbered editorial list ================= */
.sp-outcomes__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 2rem + 2vw, 72px); align-items: start; }
.sp-outcomes .sp-head { margin-bottom: 28px; }
.sp-outcomes__media { aspect-ratio: 4 / 3; box-shadow: var(--sp-shadow-lg); }
.sp-outcome { position: relative; display: grid; grid-template-columns: 52px 48px minmax(0, 1fr); gap: 20px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--sp-line); }
.sp-outcome:first-child { padding-top: 6px; }
.sp-outcome::before { content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px; background: var(--sp-ink); transition: width .5s var(--sp-ease); }
.sp-outcome:hover::before { width: 100%; }
.sp-outcome__num { padding-top: 14px; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--sp-ink-faint); font-variant-numeric: tabular-nums; transition: color var(--sp-dur) var(--sp-ease); }
.sp-outcome:hover .sp-outcome__num { color: var(--sp-ink); }
.sp-outcome:hover .sp-icon { background: var(--sp-ink); color: var(--sp-lime); transform: rotate(-8deg) scale(1.08); }
.sp-outcome__title { padding-top: 10px; font-size: var(--sp-fs-h3); font-weight: 600; line-height: 1.34; }
.sp-outcome__text { margin-top: 6px; font-size: 15px; line-height: 1.65; color: var(--sp-body); }

/* ===== RESULTS: tall image tiles with overlay titles ======================== */
.sp-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-gap); }
.sp-case { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--sp-radius-panel); background: var(--sp-surface); border: 1px solid var(--sp-line); color: var(--sp-body); text-decoration: none; transition: transform var(--sp-dur) var(--sp-ease), box-shadow var(--sp-dur) var(--sp-ease), border-color var(--sp-dur) var(--sp-ease); }
.sp-case:hover, .sp-case:focus-visible { transform: translateY(-5px); box-shadow: var(--sp-shadow-lg); border-color: rgba(20,20,30,.22); color: var(--sp-body); text-decoration: none; }
.sp-case__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sp-ink-2); }
.sp-case__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--sp-ease); }
.sp-case:hover .sp-case__media img { transform: scale(1.06); }
.sp-case__num { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sp-lime); color: var(--sp-ink); font-size: 12px; font-weight: 700; }
.sp-case__body { position: relative; display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 10px 16px; padding: 22px 22px 24px; }
.sp-page .sp-case__title { grid-column: 1 / -1; font-size: var(--sp-fs-h3); font-weight: 600; line-height: 1.34; color: var(--sp-ink); }
.sp-case__text { font-size: 14.5px; line-height: 1.65; color: var(--sp-body); }
.sp-case__arrow { align-self: end; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid var(--sp-line); border-radius: 50%; color: var(--sp-ink); transition: background-color var(--sp-dur) var(--sp-ease), color var(--sp-dur) var(--sp-ease), transform .45s var(--sp-ease), border-color var(--sp-dur) var(--sp-ease); }
.sp-case__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-case:hover .sp-case__arrow { background: var(--sp-lime); border-color: var(--sp-ink); transform: rotate(-45deg); }
.sp-case__media.is-missing img, .sp-case.is-missing .sp-case__media img { visibility: hidden; }

/* ===== TOOLS: Bootstrap vertical tabs + tool chip grid ===================== */
.sp-tabs { display: flex; flex-direction: column; gap: 6px; padding: 0; margin: 0; list-style: none; }
.sp-tab { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; background: transparent; border: 1px solid transparent; border-radius: var(--sp-radius); text-align: left; font-family: inherit; color: var(--sp-body); cursor: pointer; transition: background-color var(--sp-dur) var(--sp-ease), border-color var(--sp-dur) var(--sp-ease), color var(--sp-dur) var(--sp-ease), transform var(--sp-dur) var(--sp-ease); }
.sp-tab__num { flex: 0 0 auto; min-width: 22px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--sp-ink-faint); font-variant-numeric: tabular-nums; transition: color var(--sp-dur) var(--sp-ease); }
.sp-tab__title { flex: 1; font-size: 15px; font-weight: 500; line-height: 1.35; }
.sp-tab__chev { flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateX(-6px); transition: opacity var(--sp-dur) var(--sp-ease), transform var(--sp-dur) var(--sp-ease); }
.sp-tab:hover { background: var(--sp-surface); border-color: var(--sp-line); color: var(--sp-ink); }
.sp-tab.active { background: var(--sp-ink); border-color: var(--sp-ink); color: var(--sp-on-dark); }
.sp-tab.active .sp-tab__num, .sp-tab.active .sp-tab__chev { color: var(--sp-lime); }
.sp-tab.active .sp-tab__title { font-weight: 600; }
.sp-tab.active .sp-tab__chev { opacity: 1; transform: none; }
.sp-tab:focus-visible { outline: 2px solid var(--sp-ink); outline-offset: 2px; }
.sp-tools__panels { height: 100%; }
.sp-tools__panel { padding: 30px; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-panel); }
.sp-tools__panel-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px dashed var(--sp-line); }
.sp-tools__panel-title { font-size: var(--sp-fs-h3); font-weight: 600; }
.sp-toolgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sp-tool { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--sp-surface-soft); border: 1px solid var(--sp-line-soft); border-radius: 14px; font-size: 14.5px; font-weight: 500; color: var(--sp-ink); transition: border-color var(--sp-dur) var(--sp-ease), transform var(--sp-dur) var(--sp-ease), background-color var(--sp-dur) var(--sp-ease), box-shadow var(--sp-dur) var(--sp-ease); }
.sp-tool:hover { border-color: var(--sp-ink); background: var(--sp-surface); transform: translateY(-3px); box-shadow: var(--sp-shadow-sm); }
.sp-tool__logo { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; background: var(--sp-surface); border: 1px solid var(--sp-line-soft); }
.sp-tool__logo img, .sp-tool__logo svg { width: 20px; height: 20px; object-fit: contain; }
.sp-tool__logo.is-missing img { visibility: hidden; }
.sp-tool__logo.is-missing::after { content: attr(data-letter); position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--sp-lime-soft); font-size: 13px; font-weight: 700; color: var(--sp-ink); }
.sp-motion .tab-pane.active .sp-tool { animation: sp-rise .45s var(--sp-ease) both; }
.sp-motion .tab-pane.active .sp-tool:nth-child(2) { animation-delay: .05s; } .sp-motion .tab-pane.active .sp-tool:nth-child(3) { animation-delay: .1s; } .sp-motion .tab-pane.active .sp-tool:nth-child(4) { animation-delay: .15s; } .sp-motion .tab-pane.active .sp-tool:nth-child(5) { animation-delay: .2s; } .sp-motion .tab-pane.active .sp-tool:nth-child(6) { animation-delay: .25s; }

/* ===== PROCESS: alternating timeline with scroll-filled spine =============== */
.sp-timeline { position: relative; --tl: 0; }
.sp-timeline__list { display: grid; gap: 28px; padding: 12px 0 8px; }
.sp-timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: repeating-linear-gradient(180deg, var(--sp-line) 0 6px, transparent 6px 12px); }
.sp-timeline__fill { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--sp-ink); transform: scaleY(var(--tl)); transform-origin: top; transition: transform .25s linear; }
html:not(.sp-motion) .sp-timeline__fill { transform: scaleY(1); }
.sp-tl { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr); align-items: center; }
.sp-tl__marker { grid-column: 2; grid-row: 1; justify-self: center; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sp-surface); border: 2px solid var(--sp-line); outline: 6px solid var(--sp-surface); font-size: 13px; font-weight: 700; color: var(--sp-ink); font-variant-numeric: tabular-nums; transition: background-color .4s var(--sp-ease), border-color .4s var(--sp-ease), transform .45s var(--sp-ease); }
.sp-tl.is-done .sp-tl__marker, html:not(.sp-motion) .sp-tl__marker { background: var(--sp-lime); border-color: var(--sp-ink); }
.sp-tl:hover .sp-tl__marker { transform: scale(1.1) rotate(-8deg); }
.sp-tl__card { position: relative; grid-row: 1; padding: 26px 28px; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-sm); transition: transform var(--sp-dur) var(--sp-ease), box-shadow var(--sp-dur) var(--sp-ease), border-color var(--sp-dur) var(--sp-ease); }
.sp-tl:hover .sp-tl__card { transform: translateY(-3px); box-shadow: var(--sp-shadow-lg); border-color: rgba(20,20,30,.22); }
.sp-tl__card::before { content: ''; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: var(--sp-surface); border: 1px solid var(--sp-line); transition: border-color var(--sp-dur) var(--sp-ease); }
.sp-tl:hover .sp-tl__card::before { border-color: rgba(20,20,30,.22); }
.sp-tl:nth-of-type(odd) .sp-tl__card { grid-column: 1; }
.sp-tl:nth-of-type(odd) .sp-tl__card::before { right: -8px; border-left-color: transparent; border-bottom-color: transparent; transform: rotate(45deg); }
.sp-tl:nth-of-type(even) .sp-tl__card { grid-column: 3; }
.sp-tl:nth-of-type(even) .sp-tl__card::before { left: -8px; border-right-color: transparent; border-top-color: transparent; transform: rotate(45deg); }
.sp-tl__step { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-ink-muted); }
.sp-tl__step::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sp-lime); border: 1px solid var(--sp-ink); }
.sp-tl__title { font-size: var(--sp-fs-h3); font-weight: 600; line-height: 1.34; }
.sp-tl__text { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: var(--sp-body); }

/* ===== ENVIRONMENTS: snap scroller with nav + progress ====================== */
.sp-nav { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.sp-nav__btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: transparent; border: 1px solid var(--sp-ink); border-radius: 50%; color: var(--sp-ink); cursor: pointer; transition: background-color var(--sp-dur) var(--sp-ease), color var(--sp-dur) var(--sp-ease), opacity var(--sp-dur) var(--sp-ease), transform var(--sp-dur) var(--sp-ease); }
.sp-nav__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-nav__btn:hover:not(:disabled) { background: var(--sp-ink); color: var(--sp-lime); transform: translateY(-2px); }
.sp-nav__btn:disabled { opacity: .3; cursor: default; }
.sp-scroller { position: relative; }
.sp-scroller__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 0 10px; cursor: grab; }
.sp-scroller__track::-webkit-scrollbar { display: none; }
.sp-scroller__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.sp-scroller__track.is-dragging * { pointer-events: none; }
.sp-scroller__track:focus-visible { outline: 2px solid var(--sp-ink); outline-offset: 4px; }
.sp-scroller__bar { margin-top: 20px; height: 4px; border-radius: 999px; background: var(--sp-line); overflow: hidden; }
.sp-scroller__bar span { display: block; width: var(--w, 25%); height: 100%; border-radius: 999px; background: var(--sp-ink); transition: width .3s var(--sp-ease); }
.sp-envcard { position: relative; flex: 0 0 300px; display: flex; flex-direction: column; min-height: 280px; padding: 26px 24px 24px; scroll-snap-align: start; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 18px; overflow: hidden; transition: transform var(--sp-dur) var(--sp-ease), box-shadow var(--sp-dur) var(--sp-ease), border-color var(--sp-dur) var(--sp-ease); }
.sp-envcard::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--sp-lime); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--sp-ease); }
.sp-envcard:hover { transform: translateY(-5px); box-shadow: var(--sp-shadow-lg); border-color: rgba(20,20,30,.22); }
.sp-envcard:hover::after { transform: scaleX(1); }
.sp-envcard__num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sp-lime-soft); font-size: 12px; font-weight: 700; color: var(--sp-ink); transition: background-color var(--sp-dur) var(--sp-ease), transform .45s var(--sp-ease); }
.sp-envcard:hover .sp-envcard__num { background: var(--sp-lime); transform: rotate(-12deg) scale(1.08); }
.sp-envcard__title { margin-top: auto; padding-top: 30px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.sp-envcard__text { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--sp-body); }
.sp-envcard--media { padding: 0; background: var(--sp-ink); border-color: var(--sp-ink); }
.sp-envcard--media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--sp-ease); }
.sp-envcard--media:hover img { transform: scale(1.05); }
.sp-envcard--media::after { display: none; }
.sp-envcard--media.is-missing { background: var(--sp-ink) var(--sp-gradient); }
.sp-envcard--media.is-missing img { visibility: hidden; }

/* ===== SCALE (dark): heading + image left, pillar grid right =============== */
.sp-scale__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 2rem + 2vw, 64px); align-items: start; }
.sp-scale__media { margin-top: 28px; aspect-ratio: 3 / 2; border: 1px solid var(--sp-on-dark-line); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); background: var(--sp-ink-2); }
.sp-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
.sp-pillar { position: relative; padding: 22px 0 22px 24px; border-left: 1px solid var(--sp-on-dark-line); transition: border-color var(--sp-dur) var(--sp-ease), transform var(--sp-dur) var(--sp-ease); }
.sp-pillar::before { content: ''; position: absolute; left: -5px; top: 28px; width: 9px; height: 9px; border-radius: 2px; background: var(--sp-lime); transform: rotate(45deg); transition: transform .45s var(--sp-ease), box-shadow var(--sp-dur) var(--sp-ease); }
.sp-pillar:hover { border-color: rgba(221,242,74,.6); transform: translateX(4px); }
.sp-pillar:hover::before { transform: rotate(45deg) scale(1.3); box-shadow: 0 0 0 5px rgba(221,242,74,.18); }
.sp-pillar__title { font-size: 16.5px; font-weight: 600; line-height: 1.35; color: var(--sp-on-dark); }
.sp-pillar__text { margin-top: 6px; font-size: 14px; line-height: 1.65; color: var(--sp-on-dark-soft); }

/* ===== VERSUS: semantic comparison table + mobile column toggle ============ */
.sp-versus__toggle { display: none; }
.sp-versus.is-switching tbody td { animation: sp-rise .45s var(--sp-ease) both; }
.sp-versus__wrap { border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); overflow: hidden; background: var(--sp-surface); }
.sp-versus__table { width: 100%; border-collapse: separate; border-spacing: 0; counter-reset: sp-row; }
.sp-versus__table th, .sp-versus__table td { padding: 16px 22px; vertical-align: middle; font-size: 15px; line-height: 1.5; text-align: left; border-bottom: 1px solid var(--sp-line); transition: background-color var(--sp-dur) var(--sp-ease); }
.sp-versus__table thead th { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-ink-muted); background: var(--sp-surface-soft); }
.sp-versus__table thead th.is-auto { background: var(--sp-ink); color: var(--sp-on-dark); border-bottom-color: var(--sp-ink); }
.sp-versus__table thead th.is-auto::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--sp-lime); vertical-align: 1px; }
.sp-versus__table tbody th { width: 22%; font-weight: 600; color: var(--sp-ink); counter-increment: sp-row; }
.sp-versus__table tbody th::before { content: counter(sp-row, decimal-leading-zero); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 12px; border-radius: 50%; background: var(--sp-lime-soft); font-size: 11px; font-weight: 700; color: var(--sp-ink); transition: background-color var(--sp-dur) var(--sp-ease); }
.sp-versus__table td.is-trad { color: var(--sp-body); }
.sp-versus__table td.is-trad::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 12px; border: 1.5px solid var(--sp-ink-faint); border-radius: 50%; vertical-align: -1px; }
.sp-versus__table td.is-auto { font-weight: 500; color: var(--sp-ink); background: rgba(240,244,214,.45); border-left: 1px solid var(--sp-line); }
.sp-versus__table td.is-auto::before { content: ''; display: inline-block; width: 18px; height: 18px; margin-right: 10px; border-radius: 50%; background: var(--sp-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; vertical-align: -4px; }
.sp-versus__table tbody tr:last-child th, .sp-versus__table tbody tr:last-child td { border-bottom: 0; }
.sp-versus__table tbody tr:hover th, .sp-versus__table tbody tr:hover td { background: var(--sp-surface-soft); }
.sp-versus__table tbody tr:hover td.is-auto { background: var(--sp-lime-soft); }
.sp-versus__table tbody tr:hover th::before { background: var(--sp-lime); }

/* ===== WHY: icon feature grid ============================================== */
.sp-reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sp-reason { position: relative; padding: 28px 26px 26px; border-radius: 18px; transition: background-color var(--sp-dur) var(--sp-ease), box-shadow var(--sp-dur) var(--sp-ease), transform var(--sp-dur) var(--sp-ease); }
.sp-reason:hover { background: var(--sp-surface); box-shadow: var(--sp-shadow-md); transform: translateY(-4px); }
.sp-reason:hover .sp-icon { background: var(--sp-lime); color: var(--sp-ink); transform: rotate(-8deg) scale(1.08); }
.sp-reason__title { margin-top: 22px; font-size: var(--sp-fs-h3); font-weight: 600; line-height: 1.34; }
.sp-reason__title::after { content: ''; display: block; width: 28px; height: 2px; margin-top: 12px; border-radius: 2px; background: var(--sp-line); transition: width .5s var(--sp-ease), background-color var(--sp-dur) var(--sp-ease); }
.sp-reason:hover .sp-reason__title::after { width: 56px; background: var(--sp-lime); }
.sp-reason__text { margin-top: 12px; font-size: 14.5px; line-height: 1.65; color: var(--sp-body); }

/* ===== FAQ: Bootstrap accordion, two columns ================================ */
.sp-faq .sp-head { margin-bottom: 24px; }
.sp-faq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.sp-faq .accordion-item { background: transparent; border: 0; border-bottom: 1px solid var(--sp-line); border-radius: 0; color: inherit; }
.sp-faq .accordion-header { margin: 0; }
.sp-faq .accordion-button { gap: 16px; padding: 22px 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--sp-ink); transition: color var(--sp-dur) var(--sp-ease), font-weight 0s; }
.sp-faq .accordion-button:not(.collapsed) { background: transparent; box-shadow: none; color: var(--sp-ink); font-weight: 600; }
.sp-faq .accordion-button:focus { box-shadow: none; border-color: transparent; }
.sp-faq .accordion-button:focus-visible { outline: 2px solid var(--sp-ink); outline-offset: 2px; }
.sp-faq .accordion-button::after { flex: 0 0 30px; width: 30px; height: 30px; margin-left: auto; border: 1px solid var(--sp-line); border-radius: 50%; background-color: var(--sp-surface); background-size: 12px; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); transition: transform .4s var(--sp-ease), background-color var(--sp-dur) var(--sp-ease), border-color var(--sp-dur) var(--sp-ease); }
.sp-faq .accordion-button:hover::after { border-color: var(--sp-ink); }
.sp-faq .accordion-button { transition: color var(--sp-dur) var(--sp-ease), padding-left .35s var(--sp-ease); }
.sp-faq .accordion-button:hover, .sp-faq .accordion-button:not(.collapsed) { padding-left: 10px; }
.sp-faq .accordion-item { transition: border-color var(--sp-dur) var(--sp-ease); }
.sp-faq .accordion-item:hover { border-color: var(--sp-ink); }
.sp-faq .accordion-button:not(.collapsed)::after { background-color: var(--sp-lime); border-color: var(--sp-lime); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); transform: rotate(180deg); }
.sp-faq .accordion-body { padding: 0 46px 22px 0; font-size: 15px; line-height: 1.7; color: var(--sp-body); }

/* ===== Scroll progress + back to top ======================================= */
.sp-progress { position: fixed; top: var(--dx-header-h, 0px); left: 0; z-index: 1200; width: 100%; height: 3px; background: var(--sp-lime); transform-origin: left; transform: scaleX(0); pointer-events: none; }
.sp-totop { position: fixed; right: 22px; bottom: 22px; z-index: 1200; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--sp-ink); color: var(--sp-lime); box-shadow: 0 12px 26px -10px rgba(20,20,30,.6); cursor: pointer; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity var(--sp-dur) var(--sp-ease), transform var(--sp-dur) var(--sp-ease), background-color var(--sp-dur) var(--sp-ease); }
.sp-totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.sp-totop:hover { background: var(--sp-ink-2); transform: translateY(-3px); }
.sp-totop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Motion ============================================================== */
/* data-reveal = "" | left | right | scale | stagger ; --i (set by JS) staggers delay */
.sp-motion [data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .75s var(--sp-ease), transform .75s var(--sp-ease); transition-delay: calc(var(--i, 0) * 70ms); animation: sp-safety 0s 2.5s forwards; }
.sp-motion [data-reveal="left"] { transform: translate3d(-28px, 0, 0); }
.sp-motion [data-reveal="right"] { transform: translate3d(28px, 0, 0); }
.sp-motion [data-reveal="scale"] { transform: scale(.94); }
.sp-motion [data-reveal].is-in { opacity: 1; transform: none; }
.sp-motion [data-reveal="stagger"] { opacity: 1; transform: none; transition: none; animation: none; }
.sp-motion [data-reveal="stagger"] > * { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .7s var(--sp-ease), transform .7s var(--sp-ease); transition-delay: calc(var(--i, 0) * 70ms); animation: sp-safety 0s 2.5s forwards; }
.sp-motion [data-reveal="stagger"].is-in > * { opacity: 1; transform: none; }
/* per-component entrance flavours (initial state only) */
.sp-motion .sp-timeline__list[data-reveal="stagger"]:not(.is-in) > .sp-tl:nth-of-type(odd) { transform: translate3d(-30px, 0, 0); }
.sp-motion .sp-timeline__list[data-reveal="stagger"]:not(.is-in) > .sp-tl:nth-of-type(even) { transform: translate3d(30px, 0, 0); }
.sp-motion .sp-pillars[data-reveal="stagger"]:not(.is-in) > * { transform: translate3d(-24px, 0, 0); }
.sp-motion .sp-cases[data-reveal="stagger"]:not(.is-in) > *, .sp-motion .sp-reasons[data-reveal="stagger"]:not(.is-in) > *, .sp-motion .sp-scroller__track[data-reveal="stagger"]:not(.is-in) > * { transform: scale(.94); }
.sp-motion .sp-versus:not(.is-in) tbody tr { opacity: 0; transform: translate3d(-16px, 0, 0); }
.sp-versus tbody tr { transition: opacity .6s var(--sp-ease), transform .6s var(--sp-ease); }
.sp-versus tbody tr:nth-child(2) { transition-delay: .06s; } .sp-versus tbody tr:nth-child(3) { transition-delay: .12s; } .sp-versus tbody tr:nth-child(4) { transition-delay: .18s; } .sp-versus tbody tr:nth-child(5) { transition-delay: .24s; } .sp-versus tbody tr:nth-child(6) { transition-delay: .3s; } .sp-versus tbody tr:nth-child(7) { transition-delay: .36s; } .sp-versus tbody tr:nth-child(8) { transition-delay: .42s; } .sp-versus tbody tr:nth-child(9) { transition-delay: .48s; }
/* section titles wipe up out of a clip once their block reveals */
.sp-motion [data-reveal] .sp-head__title { clip-path: inset(0 0 0 0); transition: clip-path .9s var(--sp-ease) .1s; }
.sp-motion [data-reveal]:not(.is-in) .sp-head__title { clip-path: inset(0 0 100% 0); }
@keyframes sp-hl { to { background-size: 100% 100%; } }
@keyframes sp-safety { to { opacity: 1; transform: none; } }
@keyframes sp-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes sp-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes sp-clip { from { clip-path: inset(0 0 100% 0 round 20px); } to { clip-path: inset(0 0 0 0 round 20px); } }
@keyframes sp-spin { to { transform: rotate(360deg); } }
@keyframes sp-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(221,242,74,.7); } 50% { box-shadow: 0 0 0 8px rgba(221,242,74,.25); } }
@media (prefers-reduced-motion: reduce) {
  .sp-page *, .sp-page *::before, .sp-page *::after, .sp-progress, .sp-totop { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .sp-motion [data-reveal], .sp-motion [data-reveal="stagger"] > *, .sp-motion .sp-versus tbody tr { opacity: 1 !important; transform: none !important; }
  .sp-motion [data-reveal] .sp-head__title { clip-path: none !important; }
  .sp-hero__frame img, .sp-hero__frame, .sp-hero__chip { animation: none !important; transform: none !important; }
  .sp-scroller__track { scroll-behavior: auto; }
}

/* ===== Responsive (homepage breakpoints) =================================== */
@media (max-width: 1199.98px) {
  :root { --sp-fs-h1: 40px; --sp-fs-h2: 28px; }
  .sp-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .sp-envs { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; }
  .sp-env { grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; }
  .sp-toolgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-cta--center .sp-cta__title { font-size: 30px; }
}
@media (max-width: 991.98px) {
  :root { --sp-fs-h1: 32px; --sp-fs-h2: 26px; --sp-pad: 40px; --sp-head-gap: 28px; }
  .sp-hero { padding-block: 40px; }
  .sp-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sp-hero__media { max-width: 640px; margin-right: 20px; }
  .sp-proof { padding-block: 40px; }
  .sp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-stat:nth-child(2)::before { display: none; }
  .sp-clients { margin-top: 36px; }
  .sp-intro__grid, .sp-outcomes__grid, .sp-scale__grid { grid-template-columns: minmax(0, 1fr); }
  .sp-intro__media { max-width: 560px; margin-bottom: 8px; }
  .sp-flow { right: 0; }
  .sp-sticky { position: static; }
  .sp-outcomes__media { max-width: 560px; }
  .sp-envs { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sp-index { position: static; }
  .sp-index__list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; border-left: 0; scrollbar-width: none; }
  .sp-index__list::-webkit-scrollbar { display: none; }
  .sp-index__link { flex: 0 0 auto; margin: 0; padding: 10px 16px; border: 1px solid var(--sp-line); border-radius: 999px; background: var(--sp-surface); font-size: 14px; white-space: nowrap; }
  .sp-index__link.is-active { background: var(--sp-ink); border-color: var(--sp-ink); color: var(--sp-on-dark); }
  .sp-index__link.is-active .sp-index__num { color: var(--sp-lime); }
  .sp-index__link.is-active::after { display: none; }
  .sp-env { grid-template-columns: minmax(0, 1fr) 200px; padding: 24px 22px; top: calc(var(--dx-header-h, 0px) + 20px + var(--i, 0) * 10px); }
  .sp-cta, .sp-panel-cta { grid-template-columns: minmax(0, 1fr); }
  .sp-cta { padding: 36px 32px; margin-top: 40px; }
  .sp-cta--center { padding: 48px 28px; }
  .sp-cta__title, .sp-cta--center .sp-cta__title { font-size: 26px; }
  .sp-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-cases > :last-child { grid-column: span 2; }
  .sp-tabs { flex-direction: row; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; scrollbar-width: none; }
  .sp-tabs::-webkit-scrollbar { display: none; }
  .sp-tab { width: auto; flex: 0 0 auto; padding: 10px 16px; border-color: var(--sp-line); background: var(--sp-surface); border-radius: 999px; white-space: nowrap; }
  .sp-tab__chev { display: none; }
  .sp-tools__panel { padding: 24px; }
  .sp-timeline::before, .sp-timeline__fill { left: 27px; }
  .sp-tl { grid-template-columns: 56px minmax(0, 1fr); align-items: start; }
  .sp-tl__marker { grid-column: 1; justify-self: start; margin-top: 10px; }
  .sp-tl:nth-of-type(odd) .sp-tl__card, .sp-tl:nth-of-type(even) .sp-tl__card { grid-column: 2; }
  .sp-tl:nth-of-type(odd) .sp-tl__card::before, .sp-tl:nth-of-type(even) .sp-tl__card::before { left: -8px; right: auto; top: 30px; margin-top: 0; border-color: var(--sp-line); border-right-color: transparent; border-top-color: transparent; transform: rotate(45deg); }
  .sp-timeline__list { gap: 20px; }
  .sp-pillars { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sp-scale__media { max-width: 560px; }
  .sp-faq__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sp-head--row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767.98px) {
  :root { --sp-fs-h1: 26px; --sp-fs-h2: 22px; --sp-fs-text: 14.5px; --sp-gap: 16px; }
  .sp-hero { padding-block: 32px 40px; }
  .sp-hero__eyebrow { font-size: 15px; }
  .sp-hero__eyebrow::before { flex-basis: 18px; margin-top: 10px; }
  .sp-hero__media { margin-right: 14px; }
  .sp-hero__media::before { inset: 14px -14px -14px 14px; }
  .sp-hero__chip { left: 10px; bottom: 12px; padding: 8px 10px; font-size: 11.5px; gap: 6px; }
  .sp-hero__chip-sep { width: 8px; }
  .sp-checklist { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sp-checklist li { font-size: 15px; }
  .sp-btn { width: 100%; justify-content: space-between; white-space: normal; text-align: left; padding: 8px 8px 8px 22px; }
  .sp-stats { gap: 0 8px; }
  .sp-stat { padding: 14px 14px 12px; }
  .sp-stat::before { top: 12px; bottom: 12px; }
  .sp-stat__ico { right: 10px; top: 10px; }
  .sp-stat__figure { font-size: 26px; }
  .sp-clients__head { gap: 12px; margin-bottom: 20px; }
  .sp-page .sp-clients__title { font-size: 13.5px; padding: 8px 16px 8px 34px; }
  .sp-marquee__item { width: 160px; min-height: 64px; }
  .sp-marquee__item img { max-height: 38px; }
  .sp-intro__media { padding: 0; }
  .sp-intro__media::after { display: none; }
  .sp-flow { position: static; margin-top: 16px; width: 100%; padding: 14px 10px 12px; }
  .sp-flow__node { flex: 1; width: auto; font-size: 11.5px; }
  .sp-flow__list::before, .sp-flow__list::after { left: 10%; right: 10%; }
  .sp-env { position: relative; top: auto; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 22px 18px; }
  .sp-envs__list { gap: 14px; }
  .sp-env__media { max-width: 420px; aspect-ratio: 16 / 9; }
  .sp-env__title { font-size: 19px; }
  .sp-cta { padding: 28px 20px; margin-top: 32px; border-radius: 18px; }
  .sp-cta--center { padding: 40px 20px; }
  .sp-cta__title, .sp-cta--center .sp-cta__title { font-size: 22px; }
  .sp-panel-cta { padding: 24px 20px; margin-top: 36px; }
  .sp-panel-cta h3 { font-size: 19px; }
  .sp-outcome { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 20px 0; }
  .sp-outcome__num { display: none; }
  .sp-outcome .sp-icon { width: 44px; height: 44px; }
  .sp-outcome__title { padding-top: 8px; }
  .sp-cases { grid-template-columns: minmax(0, 1fr); }
  .sp-cases > *, .sp-cases > :last-child { grid-column: auto; }
  .sp-toolgrid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sp-tools__panel { padding: 18px; }
  .sp-timeline::before, .sp-timeline__fill { left: 21px; }
  .sp-tl { grid-template-columns: 44px minmax(0, 1fr); }
  .sp-tl__marker { width: 42px; height: 42px; outline-width: 4px; font-size: 12px; }
  .sp-tl__card { padding: 20px 18px; }
  .sp-tl:nth-of-type(odd) .sp-tl__card::before, .sp-tl:nth-of-type(even) .sp-tl__card::before { top: 24px; }
  .sp-envcard { flex-basis: min(280px, 82vw); min-height: 250px; padding: 22px 20px 20px; }
  .sp-nav__btn { width: 44px; height: 44px; }
  .sp-reasons { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sp-reason { padding: 22px 18px; }
  .sp-pillar { padding: 18px 0 18px 20px; }
  /* versus: one column at a time */
  .sp-versus__table th, .sp-versus__table td { padding: 12px 14px; font-size: 14px; }
  .sp-versus__table tbody th { width: 40%; }
  .sp-versus__table tbody th::before { width: 22px; height: 22px; margin-right: 8px; font-size: 10px; }
  .sp-versus__table td.is-auto { border-left: 0; }
  .sp-faq .accordion-button { padding: 18px 0; font-size: 15px; }
  .sp-faq .accordion-body { padding: 0 40px 18px 0; font-size: 14px; }
  .sp-totop { right: 14px; bottom: 14px; width: 44px; height: 44px; }
}
@media (max-width: 575.98px) {
  .sp-stat__figure { font-size: 24px; }
  .sp-stat__label { font-size: 13px; }
  .sp-stat__note { font-size: 12px; }
  .sp-flow__node { font-size: 10.5px; gap: 6px; }
  .sp-flow__dot { width: 30px; height: 30px; }
  .sp-flow__list::before, .sp-flow__list::after { top: 15px; }
}
@media (max-width: 420px) { .sp-hero__chip { display: none; } }

/* ===== CTA pipeline illustration (decorative, hover/focus-free) ============== */
.sp-pipe { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 6px 0 0; padding: 0; list-style: none; }
.sp-pipe::before, .sp-pipe::after { content: ''; position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 25px; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 8px, transparent 8px 16px); }
.sp-pipe::after { background: var(--sp-lime); transform: scaleX(0); transform-origin: left; }
.sp-motion .sp-cta.is-in .sp-pipe::after { animation: sp-fill 2.6s .4s var(--sp-ease) forwards; }
html:not(.sp-motion) .sp-pipe::after { transform: none; }
.sp-pipe__node { position: relative; z-index: 1; display: flex; justify-content: center; }
.sp-pipe__dot { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sp-ink-2); border: 1.5px solid rgba(255,255,255,.28); color: var(--sp-on-dark); transition: background-color .4s var(--sp-ease), color .4s var(--sp-ease), border-color .4s var(--sp-ease), transform .45s var(--sp-ease); }
.sp-pipe__dot svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sp-motion .sp-cta.is-in .sp-pipe__dot { animation: sp-pipe-on .5s calc(.4s + var(--k) * .38s) var(--sp-ease) forwards; }
html:not(.sp-motion) .sp-pipe__dot { background: var(--sp-lime); color: var(--sp-ink); border-color: var(--sp-lime); }
.sp-pipe__node:hover .sp-pipe__dot { transform: translateY(-4px) scale(1.08); }
@keyframes sp-pipe-on { to { background: var(--sp-lime); color: var(--sp-ink); border-color: var(--sp-lime); } }
.sp-cta--center .sp-pipe { display: none; }
@media (max-width: 575.98px) { .sp-pipe__dot { width: 40px; height: 40px; } .sp-pipe__dot svg { width: 18px; height: 18px; } .sp-pipe::before, .sp-pipe::after { top: 19px; } }

/* ===== PROCESS: desktop horizontal stepper (JS adds .is-stepper) ============== */
@media (min-width: 992px) {
  .sp-timeline.is-stepper { --tlp: 0; }
  .sp-timeline.is-stepper::before { top: 24px; bottom: auto; left: calc(100% / 12); right: calc(100% / 12); width: auto; height: 2px; margin: 0; background: repeating-linear-gradient(90deg, var(--sp-line) 0 8px, transparent 8px 16px); }
  .sp-timeline.is-stepper .sp-timeline__fill { top: 24px; bottom: auto; left: calc(100% / 12); right: calc(100% / 12); width: auto; height: 2px; margin: 0; background: var(--sp-ink); transform: scaleX(var(--tlp)); transform-origin: left; transition: transform .6s var(--sp-ease); }
  .sp-timeline.is-stepper .sp-timeline__list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: 0; }
  .sp-timeline.is-stepper .sp-tl { display: contents; }
  .sp-timeline.is-stepper .sp-tl__marker { grid-row: 1; justify-self: center; cursor: pointer; font-family: inherit; }
  .sp-timeline.is-stepper .sp-tl__marker:focus-visible { outline: 2px solid var(--sp-ink); outline-offset: 3px; }
  .sp-timeline.is-stepper .sp-tl:hover .sp-tl__marker { transform: none; }
  .sp-timeline.is-stepper .sp-tl__marker:hover { transform: scale(1.1); }
  .sp-timeline.is-stepper .sp-tl.is-active .sp-tl__marker { background: var(--sp-ink); color: var(--sp-lime); border-color: var(--sp-ink); transform: scale(1.12); box-shadow: 0 0 0 6px rgba(221,242,74,.55); }
  .sp-timeline.is-stepper .sp-tl .sp-tl__card { display: none; grid-column: 1 / -1; grid-row: 2; width: min(100%, 760px); margin: 30px auto 0; padding: 30px 34px; text-align: center; }
  .sp-timeline.is-stepper .sp-tl.is-active .sp-tl__card { display: block; animation: sp-rise .5s var(--sp-ease) both; }
  .sp-timeline.is-stepper .sp-tl .sp-tl__card::before { display: none; }
  .sp-timeline.is-stepper .sp-tl:hover .sp-tl__card { transform: none; box-shadow: var(--sp-shadow-sm); }
  .sp-timeline.is-stepper .sp-tl__step { justify-content: center; }
  .sp-timeline.is-stepper .sp-tl__title { font-size: 22px; }
  .sp-timeline.is-stepper .sp-tl__text { font-size: 15.5px; }
}

/* ===== v3 refinements ======================================================== */
/* gradient headings */
.sp-page .sp-grad { background-image: linear-gradient(90deg, #fff 0%, #fff 38%, #DDF24A 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* client logos: room for the hover lift so the tile is never clipped */
.sp-marquee { padding-block: 10px; margin-block: -10px; }

/* hero: H1 = eyebrow + headline */
.sp-hero__h1 { margin: 0; }
.sp-page .sp-hero__headline { display: block; margin-top: 14px; font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--sp-on-dark); text-wrap: balance; }
.sp-motion .sp-hero__headline { animation: sp-rise .6s .06s var(--sp-ease) both; }
.sp-hero__lead { margin-top: 16px; }

/* ===== ENVIRONMENTS: sticky heading + index left, stacked cards right ========= */
.sp-envs { grid-template-columns: 340px minmax(0, 1fr); gap: 56px; }
.sp-envs__side { position: sticky; top: calc(var(--dx-header-h, 0px) + 90px); }
.sp-envs__side .sp-head { margin-bottom: 22px; }
.sp-envs__side .sp-index { position: static; }
.sp-envs__side .sp-index__link { padding-block: 9px; font-size: 14px; }
.sp-env { grid-template-columns: minmax(0, 1fr) 240px; padding: 26px 28px; }
.sp-env__title { margin-top: 14px; font-size: 20px; }
.sp-env__text { font-size: 15px; }
.sp-env__num { padding: 5px 12px; border-radius: 999px; background: var(--sp-lime-soft); font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--sp-ink); }
.sp-env__media { aspect-ratio: 4 / 3; }

/* ===== TOOLS (dark): scrolling category rail + white panel =================== */
.sp-tools .sp-tabs { position: sticky; top: calc(var(--dx-header-h, 0px) + 90px); max-height: 540px; padding: 10px; overflow-y: auto; background: var(--sp-on-dark-fill); border: 1px solid var(--sp-on-dark-line); border-radius: 18px; scrollbar-width: thin; scrollbar-color: rgba(221,242,74,.55) transparent; }
.sp-tools .sp-tab { color: var(--sp-on-dark-soft) !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent; }
.sp-tools .sp-tab:hover { color: #fff !important; background: rgba(255,255,255,.08) !important; }
.sp-tools .sp-tab.active { color: var(--sp-ink) !important; background: var(--sp-lime) !important; border-color: var(--sp-lime) !important; }
.sp-tools .sp-tab .sp-tab__num { color: rgba(255,255,255,.55); }
.sp-tools .sp-tab.active .sp-tab__num, .sp-tools .sp-tab.active .sp-tab__chev { color: var(--sp-ink) !important; }
.sp-tools .sp-tab:focus-visible { outline: 2px solid var(--sp-lime) !important; outline-offset: 2px; }
.sp-tool__logo img { transition: transform var(--sp-dur) var(--sp-ease); }
.sp-tool:hover .sp-tool__logo img { transform: scale(1.12); }
.sp-tools__panel { border-color: transparent; }

/* ===== CTAs: wider copy, background image visible ============================= */
.sp-cta { padding: 52px 56px; }
.sp-cta__title { text-wrap: pretty; }
.sp-cta__text { max-width: none; }
.sp-cta::before { background: linear-gradient(100deg, rgba(20,20,30,.9) 0%, rgba(20,20,30,.66) 55%, rgba(20,20,30,.4) 100%); }
.sp-cta--center { padding: 72px 56px; }
.sp-cta--center::before { background: linear-gradient(180deg, rgba(20,20,30,.78), rgba(20,20,30,.62)); }
.sp-cta--center .sp-cta__text { max-width: 80ch; }
.sp-page .sp-cta__title { font-size: 26px; max-width: none; }
.sp-page .sp-cta--center .sp-cta__title { font-size: 30px; max-width: 32ch; }

@media (max-width: 1199.98px) { .sp-svc { column-gap: 64px; } .sp-envs { grid-template-columns: 290px minmax(0, 1fr); gap: 36px; } .sp-env { grid-template-columns: minmax(0, 1fr) 200px; } }
@media (max-width: 991.98px) {
  .sp-page .sp-hero__headline { font-size: 34px; }
  .sp-envs { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sp-envs__side { position: static; }
  .sp-tools .sp-tabs { position: static; max-height: none; padding: 0 0 6px; background: none; border: 0; border-radius: 0; }
  .sp-tools .sp-tab { border: 1px solid rgba(255,255,255,.22) !important; border-radius: 999px; }
  .sp-tools .sp-tab.active { border-color: var(--sp-lime) !important; }
  .sp-cta, .sp-cta--center { padding: 40px 32px; }
}
@media (max-width: 767.98px) {
  .sp-page .sp-hero__headline { font-size: 28px; }
  .sp-env { grid-template-columns: minmax(0, 1fr); }
  .sp-env__media { max-width: 420px; aspect-ratio: 16 / 9; }
  .sp-cta, .sp-cta--center { padding: 32px 20px; }
  .sp-page .sp-cta__title, .sp-page .sp-cta--center .sp-cta__title { font-size: 22px; }
}

.sp-page .sp-tools__panel-title { color: var(--sp-ink); }
@media (min-width: 992px) { .sp-timeline.is-stepper .sp-tl__marker { position: relative; z-index: 2; } }

/* ===== v4 refinements ======================================================== */
/* headline highlight on light sections (same lime marker as the stat figures) */
.sp-mark { padding: 0 3px; background: linear-gradient(transparent 60%, rgba(221,242,74,.9) 60%, rgba(221,242,74,.9) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* hero: H1 is the main heading, the line under it is span text */
.sp-page .sp-hero__h1 { margin: 0; font-size: var(--sp-fs-h1); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; color: var(--sp-on-dark); }
.sp-hero__sub { display: block; margin-top: 12px; font-size: 22px; font-weight: 500; line-height: 1.35; letter-spacing: 0; color: var(--sp-lime); text-wrap: balance; }
.sp-motion .sp-hero__h1 { animation: sp-rise .6s var(--sp-ease) both; }

/* hero CTA: looping pulse ring + shine sweep + arrow nudge (paused on hover) */
.sp-motion .sp-hero__actions .sp-btn { animation: sp-cta-ring 2.8s 1.4s infinite; }
.sp-motion .sp-hero__actions .sp-btn::after { animation: sp-cta-shine 4.2s 2s infinite; }
.sp-motion .sp-hero__actions .sp-btn .sp-btn__arrow svg { animation: sp-cta-nudge 2.8s 1.4s infinite; }
.sp-motion .sp-hero__actions .sp-btn:hover, .sp-motion .sp-hero__actions .sp-btn:focus-visible, .sp-motion .sp-hero__actions .sp-btn:hover::after, .sp-motion .sp-hero__actions .sp-btn:hover .sp-btn__arrow svg { animation: none; }
@keyframes sp-cta-ring { 0% { box-shadow: 0 0 0 0 rgba(221,242,74,.55); } 70%, 100% { box-shadow: 0 0 0 20px rgba(221,242,74,0); } }
@keyframes sp-cta-shine { 0% { transform: skewX(-18deg) translateX(-120%); } 32%, 100% { transform: skewX(-18deg) translateX(420%); } }
@keyframes sp-cta-nudge { 0%, 55%, 100% { transform: translateX(0); } 25% { transform: translateX(4px); } }

/* ===== TOOLS: left category scroller ========================================= */
.sp-tools .sp-tabs { max-height: 392px; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--sp-lime) rgba(255,255,255,.08); overscroll-behavior: contain; }
.sp-tools .sp-tabs::-webkit-scrollbar { width: 6px; }
.sp-tools .sp-tabs::-webkit-scrollbar-track { background: rgba(255,255,255,.08); border-radius: 6px; }
.sp-tools .sp-tabs::-webkit-scrollbar-thumb { background: var(--sp-lime); border-radius: 6px; }

/* ===== COMPARE: classic comparison table ===================================== */
.sp-versus__wrap { border: 1px solid var(--sp-ink); border-radius: var(--sp-radius-lg); overflow: hidden; background: var(--sp-surface); }
.sp-versus__table thead th { padding-block: 18px; background: var(--sp-ink); color: var(--sp-on-dark); border-bottom: 0; border-right: 1px solid rgba(255,255,255,.12); }
.sp-versus__table thead th:last-child { border-right: 0; }
.sp-versus__table thead th.is-auto { background: var(--sp-lime); color: var(--sp-ink); }
.sp-versus__table thead th.is-auto::before { background: var(--sp-ink); }
.sp-versus__table tbody th, .sp-versus__table tbody td { border-right: 1px solid var(--sp-line); }
.sp-versus__table tbody td:last-child { border-right: 0; }
.sp-versus__table tbody tr:nth-child(even) th, .sp-versus__table tbody tr:nth-child(even) td.is-trad { background: var(--sp-surface-soft); }
.sp-versus__table tbody tr:nth-child(even) td.is-auto { background: rgba(240,244,214,.8); }
@media (max-width: 767.98px) {
  .sp-versus__toggle { display: inline-flex; gap: 4px; margin-bottom: 16px; padding: 4px; background: var(--sp-surface-soft); border: 1px solid var(--sp-line); border-radius: 999px; }
  .sp-versus__toggle button { padding: 9px 16px; border: 0; border-radius: 999px; background: transparent; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--sp-ink-muted); cursor: pointer; transition: background-color var(--sp-dur) var(--sp-ease), color var(--sp-dur) var(--sp-ease); }
  .sp-versus__toggle button.is-active { background: var(--sp-ink); color: var(--sp-on-dark); }
  .sp-versus__toggle button:focus-visible { outline: 2px solid var(--sp-ink); outline-offset: 2px; }
  .sp-versus[data-show="trad"] .is-auto, .sp-versus[data-show="auto"] .is-trad { display: none !important; }
  .sp-versus__table th, .sp-versus__table td { padding: 12px 14px; font-size: 14px; }
  .sp-versus__table tbody th { width: 42%; }
  .sp-versus__table tbody th::before { width: 22px; height: 22px; margin-right: 8px; font-size: 10px; }
  .sp-versus__table td.is-auto { border-left: 0; }
}

/* ===== WHY US: bento ========================================================= */
.sp-reasons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; counter-reset: sp-why; }
.sp-reasons .sp-reason { position: relative; display: flex; flex-direction: column; grid-column: span 2; min-height: 270px; padding: 28px 28px 26px; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 22px; overflow: hidden; counter-increment: sp-why; transition: transform .45s var(--sp-ease), box-shadow .45s var(--sp-ease), border-color .3s var(--sp-ease); }
.sp-reasons .sp-reason:nth-child(1) { grid-column: span 4; background: var(--sp-ink); border-color: var(--sp-ink); }
.sp-reasons .sp-reason:nth-child(2) { background: var(--sp-lime); border-color: var(--sp-lime); }
.sp-reasons .sp-reason:nth-child(6) { grid-column: span 6; min-height: 0; background: var(--sp-lime-soft); }
.sp-reasons .sp-reason:hover { transform: translateY(-5px); background: var(--sp-surface); box-shadow: var(--sp-shadow-lg); }
.sp-reasons .sp-reason:nth-child(1):hover { background: var(--sp-ink); }
.sp-reasons .sp-reason:nth-child(2):hover { background: var(--sp-lime); }
.sp-reasons .sp-reason:nth-child(6):hover { background: var(--sp-lime-soft); }
.sp-reasons .sp-reason::after { content: counter(sp-why, decimal-leading-zero); position: absolute; right: 22px; top: 14px; font-size: 84px; font-weight: 700; line-height: 1; letter-spacing: -.05em; color: rgba(20,20,30,.06); transition: color .4s var(--sp-ease), transform .6s var(--sp-ease); pointer-events: none; }
.sp-reasons .sp-reason:hover::after { color: rgba(20,20,30,.12); transform: translateY(-4px); }
.sp-reasons .sp-reason:nth-child(1)::after { color: rgba(255,255,255,.08); }
.sp-reasons .sp-reason:nth-child(1):hover::after { color: rgba(255,255,255,.16); }
.sp-reasons .sp-reason .sp-icon { margin-bottom: 40px; }
.sp-reasons .sp-reason:nth-child(1) .sp-icon { background: var(--sp-lime); color: var(--sp-ink); box-shadow: none; }
.sp-reasons .sp-reason:hover .sp-icon { transform: rotate(-8deg) scale(1.08); }
.sp-reasons .sp-reason__title { margin-top: auto; font-size: 20px; line-height: 1.28; }
.sp-reasons .sp-reason__title::after { display: none; }
.sp-reasons .sp-reason__text { margin-top: 10px; max-width: 62ch; font-size: 14.5px; }
.sp-page .sp-reasons .sp-reason:nth-child(1) .sp-reason__title { color: var(--sp-on-dark); font-size: 26px; }
.sp-reasons .sp-reason:nth-child(1) .sp-reason__text { color: var(--sp-on-dark-soft); }
.sp-reasons .sp-reason:nth-child(1) a:not([class]) { color: var(--sp-lime); text-decoration-color: rgba(221,242,74,.5); }
.sp-reasons .sp-reason:nth-child(2) .sp-reason__text { color: var(--sp-ink-soft); }
.sp-reasons .sp-reason:nth-child(2) .sp-reason__title::before { display: none; }
.sp-reasons .sp-reason:nth-child(6) .sp-icon { margin-bottom: 24px; }
.sp-reasons .sp-reason:nth-child(6) .sp-reason__text { max-width: 90ch; }

@media (max-width: 991.98px) {
  .sp-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-reasons .sp-reason, .sp-reasons .sp-reason:nth-child(1), .sp-reasons .sp-reason:nth-child(6) { grid-column: span 1; }
  .sp-reasons .sp-reason:nth-child(1) { grid-column: span 2; }
  .sp-reasons .sp-reason:nth-child(6) { grid-column: span 2; }
}
@media (max-width: 767.98px) {
  .sp-reasons { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sp-reasons .sp-reason, .sp-reasons .sp-reason:nth-child(1), .sp-reasons .sp-reason:nth-child(6) { grid-column: auto; min-height: 0; padding: 24px 20px; }
  .sp-reasons .sp-reason .sp-icon { margin-bottom: 24px; }
  .sp-page .sp-reasons .sp-reason:nth-child(1) .sp-reason__title { font-size: 22px; }
}

/* ===== v5 refinements ======================================================== */
/* hero H1: word-by-word entrance, lime marker on "Automation", terminal cursor */
.sp-hero__w { display: inline-block; }
.sp-hero__w--mark { position: relative; z-index: 0; }
.sp-hero__w--mark::before { content: ''; position: absolute; left: -4px; right: -4px; bottom: -2px; height: 8px; z-index: -1; background: var(--sp-lime); opacity: .9; transform-origin: left; transform: skewX(-8deg); }
.sp-hero__w--grad { background: linear-gradient(90deg, #fff 0%, var(--sp-lime) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.sp-hero__h1::after { content: ''; display: inline-block; width: .42em; height: .78em; margin-left: .18em; vertical-align: -.02em; background: var(--sp-lime); border-radius: 2px; }
.sp-motion .sp-hero__h1 { animation: none; }
.sp-motion .sp-hero__w { animation: sp-word .7s calc(var(--w) * .12s) var(--sp-ease) both; }
.sp-motion .sp-hero__w--mark::before { animation: sp-mark .7s .55s var(--sp-ease) both; }
.sp-motion .sp-hero__h1::after { animation: sp-blink 1.1s steps(1) infinite; }
html:not(.sp-motion) .sp-hero__h1::after { display: none; }
@keyframes sp-word { from { opacity: 0; transform: translate3d(0, .5em, 0) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes sp-mark { from { transform: skewX(-8deg) scaleX(0); } to { transform: skewX(-8deg) scaleX(1); } }
@keyframes sp-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.sp-hero__sub { display: block; margin-top: 14px; font-size: 22px; font-weight: 500; line-height: 1.35; color: var(--sp-lime); text-wrap: balance; }
.sp-motion .sp-hero__sub { animation: sp-rise .6s .5s var(--sp-ease) both; }

/* ===== SERVICES: lifecycle card tabs ========================================= */
.sp-sv__tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 30px; }
.sp-sv__tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 148px; padding: 18px 16px 20px; overflow: hidden; background: var(--sp-surface) !important; border: 1px solid var(--sp-line) !important; border-radius: 16px; box-shadow: none !important; font-family: inherit; text-align: left; color: var(--sp-ink-muted) !important; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .4s var(--sp-ease), background-color .4s var(--sp-ease), border-color .4s var(--sp-ease), box-shadow .4s var(--sp-ease); }
.sp-sv__tab::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--sp-line); }
.sp-sv__tab::after { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--sp-lime); transform: scaleX(0); transform-origin: left; }
.sp-sv__row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.sp-sv__ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--sp-lime-soft); color: var(--sp-ink); transition: background-color .4s var(--sp-ease), color .4s var(--sp-ease), transform .5s var(--sp-ease); }
.sp-sv__ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sp-sv__node { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--sp-ink-faint); font-variant-numeric: tabular-nums; transition: color .4s var(--sp-ease); }
.sp-sv__tab-title { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--sp-ink-soft); transition: color .4s var(--sp-ease); }
.sp-sv__tab:hover { transform: translateY(-4px); border-color: rgba(20,20,30,.3) !important; box-shadow: var(--sp-shadow-md) !important; }
.sp-sv__tab:hover .sp-sv__ico { transform: rotate(-8deg) scale(1.06); }
.sp-sv__tab.active { background: var(--sp-ink) !important; border-color: var(--sp-ink) !important; box-shadow: 0 20px 36px -22px rgba(20,20,30,.7) !important; transform: translateY(-6px); }
.sp-sv__tab.active::before { background: rgba(255,255,255,.14); }
.sp-sv__tab.active::after { transform: scaleX(1); }
.sp-sv__tab.active .sp-sv__ico { background: var(--sp-lime); color: var(--sp-ink); }
.sp-sv__tab.active .sp-sv__node { color: var(--sp-lime); }
.sp-sv__tab.active .sp-sv__tab-title { color: var(--sp-on-dark); }
.sp-motion .sp-sv.is-playing .sp-sv__tab.active::after { transform: scaleX(0); animation: sp-tabprog 7s linear forwards; }
.sp-motion .sp-sv:hover .sp-sv__tab.active::after, .sp-motion .sp-sv:focus-within .sp-sv__tab.active::after { animation-play-state: paused; }
@keyframes sp-tabprog { to { transform: scaleX(1); } }
.sp-sv__tab:focus-visible { outline: 2px solid var(--sp-ink); outline-offset: 3px; }

.sp-sv__panel { position: relative; padding: 30px 30px 26px; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 24px; box-shadow: 0 30px 60px -40px rgba(20,20,30,.5); overflow: hidden; }
.sp-sv__panel::before { content: ''; position: absolute; right: -90px; top: -90px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(221,242,74,.3), transparent); pointer-events: none; }
.tab-content > .sp-sv__pane.active { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.sp-motion .sp-sv__pane.active .sp-sv__media { animation: sp-clip .8s var(--sp-ease) both; }
.sp-motion .sp-sv__pane.active .sp-sv__body > * { animation: sp-rise .55s var(--sp-ease) both; }
.sp-motion .sp-sv__pane.active .sp-sv__body > :nth-child(2) { animation-delay: .06s; } .sp-motion .sp-sv__pane.active .sp-sv__body > :nth-child(3) { animation-delay: .12s; } .sp-motion .sp-sv__pane.active .sp-sv__body > :nth-child(4) { animation-delay: .18s; }
.sp-sv__media { aspect-ratio: 4 / 3; width: 100%; border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); box-shadow: 12px 12px 0 var(--sp-lime-soft); transition: box-shadow .5s var(--sp-ease), transform .5s var(--sp-ease); }
.sp-sv__pane:hover .sp-sv__media { transform: translateY(-4px); box-shadow: 16px 16px 0 var(--sp-lime); }
.sp-sv__pane:hover .sp-sv__media img { transform: scale(1.05); }
.sp-sv__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sp-sv__num { font-size: 60px; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(20,20,30,.28); font-variant-numeric: tabular-nums; }
.sp-sv__title { margin-top: 16px; font-size: 24px; font-weight: 600; line-height: 1.3; }
.sp-sv__text { margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--sp-body); }
.sp-sv__body .sp-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin-top: 18px; }
.sp-sv__pane:hover .sp-icon { background: var(--sp-ink); color: var(--sp-lime); transform: rotate(-8deg) scale(1.08); }
.sp-sv__nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--sp-line); }
.sp-sv__arrow { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: transparent; border: 1px solid var(--sp-ink); border-radius: 50%; color: var(--sp-ink); cursor: pointer; transition: background-color var(--sp-dur) var(--sp-ease), color var(--sp-dur) var(--sp-ease), transform var(--sp-dur) var(--sp-ease); }
.sp-sv__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-sv__arrow:hover { background: var(--sp-ink); color: var(--sp-lime); transform: translateY(-2px); }
.sp-sv__arrow:focus-visible { outline: 2px solid var(--sp-ink); outline-offset: 3px; }

/* ===== OUTCOMES: vertical scroller, one pointer per line ===================== */
.sp-outcomes__list { position: relative; height: 480px; padding: 90px 6px 260px 0; overflow-y: auto; overscroll-behavior: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent 0, #000 14%, #000 80%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 14%, #000 80%, transparent 100%); }
.sp-outcomes__list::-webkit-scrollbar { display: none; }
.sp-outcomes__list:focus-visible { outline: 2px solid var(--sp-ink); outline-offset: 4px; }
.sp-outcomes__list .sp-outcome { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 22px; align-items: start; padding: 0 0 34px; border: 0; cursor: pointer; opacity: .32; transform: translateX(0); transition: opacity .5s var(--sp-ease), transform .5s var(--sp-ease); }
.sp-outcomes__list .sp-outcome::before { content: ''; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; height: auto; background: var(--sp-line); transition: background-color .5s var(--sp-ease); }
.sp-outcomes__list .sp-outcome:last-child::before { display: none; }
.sp-outcomes__list .sp-outcome:last-child { padding-bottom: 0; }
.sp-outcomes__list .sp-outcome .sp-icon { grid-column: 1; grid-row: 1 / 3; width: 44px; height: 44px; margin: 0; border-radius: 50%; background: var(--sp-surface); border: 2px solid var(--sp-line); transition: background-color .5s var(--sp-ease), border-color .5s var(--sp-ease), color .5s var(--sp-ease), transform .5s var(--sp-ease); }
.sp-outcomes__list .sp-outcome .sp-icon svg { width: 20px; height: 20px; }
.sp-outcomes__list .sp-outcome > div { grid-column: 2; padding-top: 6px; }
.sp-outcomes__list .sp-outcome__num { position: absolute; right: 0; top: 4px; padding: 0; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.2px rgba(20,20,30,.22); transition: -webkit-text-stroke-color .5s var(--sp-ease); }
.sp-outcomes__list .sp-outcome__title { padding: 0 60px 0 0; font-size: 19px; line-height: 1.3; }
.sp-outcomes__list .sp-outcome__text { max-width: 54ch; margin-top: 6px; font-size: 14.5px; }
.sp-outcomes__list .sp-outcome.is-active { opacity: 1; transform: translateX(10px); }
.sp-outcomes__list .sp-outcome.is-active .sp-icon { background: var(--sp-ink); border-color: var(--sp-ink); color: var(--sp-lime); transform: scale(1.12); box-shadow: 0 0 0 6px rgba(221,242,74,.6); }
.sp-outcomes__list .sp-outcome.is-active::before { background: var(--sp-ink); }
.sp-outcomes__list .sp-outcome.is-active .sp-outcome__num { -webkit-text-stroke-color: var(--sp-ink); }
.sp-outcomes__list .sp-outcome:hover { opacity: .75; }
.sp-outcomes__list .sp-outcome.is-active:hover { opacity: 1; }
html:not(.sp-motion) .sp-outcomes__list .sp-outcome { opacity: 1; }

/* ===== TOOLS: left rail = vertical scroller with edge fades ================== */
.sp-tools .sp-tabs { max-height: 330px; padding: 12px 6px 12px 10px; -webkit-mask-image: linear-gradient(transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); scroll-padding-block: 22px; }
.sp-tools .sp-tabs.at-top { -webkit-mask-image: linear-gradient(#000 0, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(#000 0, #000 calc(100% - 22px), transparent 100%); }
.sp-tools .sp-tabs.at-bottom { -webkit-mask-image: linear-gradient(transparent 0, #000 22px, #000 100%); mask-image: linear-gradient(transparent 0, #000 22px, #000 100%); }
.sp-tools .sp-tabs.at-top.at-bottom { -webkit-mask-image: none; mask-image: none; }

@media (max-width: 991.98px) {
  .sp-sv__tabs { display: flex; gap: 10px; overflow-x: auto; padding: 8px 2px 14px; margin-bottom: 18px; scrollbar-width: none; }
  .sp-sv__tabs::-webkit-scrollbar { display: none; }
  .sp-sv__tab { flex: 0 0 200px; min-height: 124px; }
  .sp-sv__panel { padding: 20px 18px 18px; }
  .tab-content > .sp-sv__pane.active { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .sp-sv__media { max-width: 560px; }
  .sp-outcomes__list { height: 420px; padding-top: 70px; padding-bottom: 220px; }
  .sp-tools .sp-tabs, .sp-tools .sp-tabs.at-top, .sp-tools .sp-tabs.at-bottom { max-height: none; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 767.98px) {
  .sp-hero__sub { font-size: 18px; }
  .sp-sv__body .sp-checklist { grid-template-columns: minmax(0, 1fr); }
  .sp-sv__num { font-size: 42px; }
  .sp-sv__title { font-size: 21px; }
  .sp-sv__tab { flex-basis: 170px; }
  .sp-outcomes__list .sp-outcome__num { font-size: 30px; }
  .sp-outcomes__list .sp-outcome__title { padding-right: 40px; font-size: 17px; }
}

/* ===== v6 fixes ============================================================== */
/* hero: no cursor, no underline; calmer p / span sizes */
.sp-hero__h1::after, .sp-hero__w--mark::before { content: none; display: none; animation: none; }
.sp-hero__lead { font-size: 16px; line-height: 1.6; }
.sp-hero__sub { font-size: 18px; margin-top: 10px; }

/* outcomes: no dead space at either end of the scroller */
.sp-outcomes__list { padding: 28px 6px 40px 0; -webkit-mask-image: linear-gradient(transparent 0, #000 28px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(transparent 0, #000 28px, #000 calc(100% - 40px), transparent 100%); }

/* tools: category list always scrolls top-to-bottom */
@media (max-width: 991.98px) {
  .sp-tools .sp-tabs { flex-direction: column; flex-wrap: nowrap; gap: 6px; max-height: 300px; margin-bottom: 18px; padding: 12px 6px 12px 10px; overflow-x: hidden; overflow-y: auto; background: var(--sp-on-dark-fill); border: 1px solid var(--sp-on-dark-line); border-radius: 18px; scrollbar-width: thin; -webkit-mask-image: linear-gradient(transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); }
  .sp-tools .sp-tabs.at-top { -webkit-mask-image: linear-gradient(#000 0, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(#000 0, #000 calc(100% - 22px), transparent 100%); }
  .sp-tools .sp-tabs.at-bottom { -webkit-mask-image: linear-gradient(transparent 0, #000 22px, #000 100%); mask-image: linear-gradient(transparent 0, #000 22px, #000 100%); }
  .sp-tools .sp-tabs.at-top.at-bottom { -webkit-mask-image: none; mask-image: none; }
  .sp-tools .sp-tab { width: 100%; flex: 0 0 auto; padding: 12px 14px; border: 1px solid transparent !important; border-radius: var(--sp-radius); white-space: normal; }
  .sp-tools .sp-tab.active { border-color: var(--sp-lime) !important; }
  .sp-tools .sp-tab .sp-tab__chev { display: block; }
}
@media (max-width: 767.98px) { .sp-hero__sub { font-size: 16px; } .sp-hero__lead { font-size: 15px; } .sp-outcomes__list { padding-top: 24px; } }

/* why-us: softer palette — dark / soft / white, closing tile dark */
.sp-reasons .sp-reason:nth-child(2) { background: var(--sp-lime-soft); border-color: var(--sp-line); }
.sp-reasons .sp-reason:nth-child(2):hover { background: var(--sp-lime-soft); }
.sp-reasons .sp-reason:nth-child(2) .sp-icon { background: var(--sp-ink); color: var(--sp-lime); }
.sp-reasons .sp-reason:nth-child(2)::after { color: rgba(20,20,30,.08); }
.sp-reasons .sp-reason:nth-child(6), .sp-reasons .sp-reason:nth-child(6):hover { background: var(--sp-ink) var(--sp-gradient); border-color: var(--sp-ink); }
.sp-reasons .sp-reason:nth-child(6) .sp-icon { background: var(--sp-lime); color: var(--sp-ink); box-shadow: none; }
.sp-page .sp-reasons .sp-reason:nth-child(6) .sp-reason__title { color: var(--sp-on-dark); }
.sp-reasons .sp-reason:nth-child(6) .sp-reason__text { color: var(--sp-on-dark-soft); }
.sp-reasons .sp-reason:nth-child(6)::after { color: rgba(255,255,255,.08); }
.sp-reasons .sp-reason:nth-child(1) { background: var(--sp-ink) var(--sp-gradient); }
.sp-reasons .sp-reason::after { color: rgba(20,20,30,.07); }
@media (max-width: 991.98px) { .sp-tools .sp-tabs, .sp-tools .sp-tabs.at-top, .sp-tools .sp-tabs.at-bottom, .sp-tools .sp-tabs.at-top.at-bottom { max-height: 300px; } }

/* ===== CLIENTS: one premium bar — dark title block + borderless logo ribbon ==== */
.sp-clients { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: stretch; margin-top: 44px; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 20px; box-shadow: var(--sp-shadow-md); overflow: hidden; }
.sp-clients__head { display: flex; align-items: center; gap: 0; margin: 0; padding: 22px 26px; background: var(--sp-ink) var(--sp-gradient); }
.sp-clients__rule { display: none; }
.sp-page .sp-clients__title { display: block; margin: 0; padding: 0 0 0 24px; background: none; border: 0; border-radius: 0; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--sp-on-dark); white-space: normal; }
.sp-clients__title::before { left: 0; background: var(--sp-lime); box-shadow: 0 0 0 4px rgba(221,242,74,.28); }
.sp-marquee { align-self: center; padding: 0; margin: 0; }
.sp-marquee__item { width: 200px; min-height: 100px; margin: 0; padding: 0 30px; background: none; border: 0; border-right: 1px solid var(--sp-line-soft); border-radius: 0; }
.sp-marquee__item:hover { background: none; border-color: var(--sp-line-soft); transform: none; }
.sp-marquee__item img { max-height: 44px; opacity: .6; filter: grayscale(1); transition: opacity var(--sp-dur) var(--sp-ease), filter var(--sp-dur) var(--sp-ease), transform .5s var(--sp-ease); }
.sp-marquee__item:hover img { opacity: 1; filter: none; transform: scale(1.06); }
html:not(.sp-motion) .sp-marquee__track { gap: 0; }
@media (max-width: 767.98px) {
  .sp-clients { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .sp-clients__head { padding: 14px 20px; }
  .sp-page .sp-clients__title { font-size: 15px; }
  .sp-marquee__item { width: 160px; min-height: 78px; padding: 0 20px; }
  .sp-marquee__item img { max-height: 36px; }
}

/* tools rail: vertical scroll only; clients: full colour */
.sp-tools .sp-tabs { overflow-x: hidden !important; overflow-y: auto; box-sizing: border-box; }
.sp-tools .sp-tab { box-sizing: border-box; max-width: 100%; min-width: 0; }
.sp-tools .sp-tab__chev { transform: none; }
.sp-marquee__item img, .sp-marquee__item:hover img { opacity: 1; filter: none; }

/* tools rail: all eight categories visible (scrolls only if the viewport is very short) */
.sp-tools .sp-tabs, .sp-tools .sp-tabs.at-top, .sp-tools .sp-tabs.at-bottom, .sp-tools .sp-tabs.at-top.at-bottom { max-height: min(560px, calc(100vh - 160px)); min-height: 0; }
@media (max-width: 991.98px) { .sp-tools .sp-tabs, .sp-tools .sp-tabs.at-top, .sp-tools .sp-tabs.at-bottom, .sp-tools .sp-tabs.at-top.at-bottom { max-height: none; } }

/* tools rail: never cut — all categories visible */
.sp-tools .sp-tabs, .sp-tools .sp-tabs.at-top, .sp-tools .sp-tabs.at-bottom, .sp-tools .sp-tabs.at-top.at-bottom { max-height: none; overflow: visible !important; -webkit-mask-image: none; mask-image: none; }

/* hero: eyebrow + H1 */
.sp-page .sp-hero__h1 { margin-top: 14px; font-size: 33px; line-height: 1.4; }
@media (max-width: 991.98px) { .sp-page .sp-hero__h1 { font-size: 34px; } }
@media (max-width: 767.98px) { .sp-page .sp-hero__h1 { font-size: 28px; } }
.sp-hero__h1 + .sp-hero__lead, .sp-hero__lead { margin-top: 18px; }

/* ===== WHY US: orbit — six nodes around a hub, detail on the right ============ */
@media (min-width: 992px) {
  .sp-reasons.is-orbit { position: relative; display: grid; grid-template-columns: 460px minmax(0, 1fr); column-gap: 64px; align-content: center; min-height: 500px; counter-reset: sp-why; }
  .sp-reasons.is-orbit::before { content: ''; position: absolute; left: 70px; top: 50%; width: 320px; height: 320px; margin-top: -160px; border: 1.5px dashed rgba(20,20,30,.3); border-radius: 50%; }
  .sp-reasons.is-orbit::after { content: '</>'; position: absolute; left: 160px; top: 50%; display: flex; align-items: center; justify-content: center; width: 140px; height: 140px; margin-top: -70px; border-radius: 50%; background: var(--sp-ink) var(--sp-gradient); color: var(--sp-lime); font-size: 30px; font-weight: 700; letter-spacing: -.02em; box-shadow: 0 0 0 14px var(--sp-lime-soft), 0 0 0 15px var(--sp-line), 0 24px 40px -18px rgba(20,20,30,.6); }
  .sp-motion .sp-reasons.is-orbit::before { animation: sp-orbit-spin 60s linear infinite; }
  .sp-reasons.is-orbit .sp-reason, .sp-reasons.is-orbit .sp-reason:nth-child(n) { display: contents; }
  .sp-reasons.is-orbit .sp-reason::after { display: none; }
  .sp-reasons.is-orbit .sp-reason .sp-icon { position: absolute; z-index: 2; width: 58px; height: 58px; margin: 0; border-radius: 50%; background: var(--sp-ink); color: var(--sp-lime); border: 3px solid var(--sp-surface-alt); box-shadow: 0 10px 20px -10px rgba(20,20,30,.6); cursor: pointer; counter-increment: sp-why; transition: transform .45s var(--sp-ease), background-color .35s var(--sp-ease), color .35s var(--sp-ease), box-shadow .35s var(--sp-ease); }
  .sp-reasons.is-orbit .sp-reason .sp-icon svg { width: 24px; height: 24px; }
  .sp-reasons.is-orbit .sp-reason .sp-icon::after { content: counter(sp-why, decimal-leading-zero); position: absolute; top: -9px; right: -12px; min-width: 26px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--sp-surface); border: 1px solid var(--sp-line); font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--sp-ink); }
  .sp-reasons.is-orbit .sp-reason:nth-child(1) .sp-icon { left: calc(230px - 29px); top: calc(50% - 160px - 29px); }
  .sp-reasons.is-orbit .sp-reason:nth-child(2) .sp-icon { left: calc(230px + 139px - 29px); top: calc(50% - 80px - 29px); }
  .sp-reasons.is-orbit .sp-reason:nth-child(3) .sp-icon { left: calc(230px + 139px - 29px); top: calc(50% + 80px - 29px); }
  .sp-reasons.is-orbit .sp-reason:nth-child(4) .sp-icon { left: calc(230px - 29px); top: calc(50% + 160px - 29px); }
  .sp-reasons.is-orbit .sp-reason:nth-child(5) .sp-icon { left: calc(230px - 139px - 29px); top: calc(50% + 80px - 29px); }
  .sp-reasons.is-orbit .sp-reason:nth-child(6) .sp-icon { left: calc(230px - 139px - 29px); top: calc(50% - 80px - 29px); }
  .sp-reasons.is-orbit .sp-reason .sp-icon:hover { transform: scale(1.1); }
  .sp-reasons.is-orbit .sp-reason .sp-icon:focus-visible { outline: 2px solid var(--sp-ink); outline-offset: 4px; }
  .sp-reasons.is-orbit .sp-reason.is-active .sp-icon { background: var(--sp-lime); color: var(--sp-ink); transform: scale(1.22); box-shadow: 0 0 0 8px rgba(221,242,74,.5), 0 14px 24px -12px rgba(20,20,30,.6); }
  .sp-reasons.is-orbit .sp-reason .sp-reason__title, .sp-reasons.is-orbit .sp-reason .sp-reason__text { display: none; grid-column: 2; margin: 0; }
  .sp-reasons.is-orbit .sp-reason.is-active .sp-reason__title { display: block; grid-row: 1; align-self: end; padding-left: 28px; border-left: 3px solid var(--sp-lime); font-size: 30px; line-height: 1.2; }
  .sp-page .sp-reasons.is-orbit .sp-reason.is-active .sp-reason__title { color: var(--sp-ink); }
  .sp-reasons.is-orbit .sp-reason.is-active .sp-reason__title::before { content: attr(data-n); display: block; margin-bottom: 8px; font-size: 76px; font-weight: 700; line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(20,20,30,.3); }
  .sp-reasons.is-orbit .sp-reason.is-active .sp-reason__text { display: block; grid-row: 2; align-self: start; max-width: 54ch; margin-top: 16px; padding-left: 31px; font-size: 16px; line-height: 1.7; color: var(--sp-body); }
  .sp-reasons.is-orbit .sp-reason a:not([class]) { color: var(--sp-ink); text-decoration-color: rgba(20,20,30,.4); }
  .sp-motion .sp-reasons.is-orbit .sp-reason.is-active .sp-reason__title, .sp-motion .sp-reasons.is-orbit .sp-reason.is-active .sp-reason__text { animation: sp-rise .5s var(--sp-ease) both; }
  .sp-motion .sp-reasons.is-orbit .sp-reason.is-active .sp-reason__text { animation-delay: .08s; }
}
@keyframes sp-orbit-spin { to { transform: rotate(360deg); } }
.sp-hero__w--grad { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: var(--sp-lime); color: var(--sp-lime); }

/* ===== v7: outcomes list sits lower, so every row can reach the focus line while scrolling ===== */
.sp-outcomes__list { padding: 96px 6px 210px 0; -webkit-mask-image: linear-gradient(transparent 0, #000 64px, #000 calc(100% - 80px), transparent 100%); mask-image: linear-gradient(transparent 0, #000 64px, #000 calc(100% - 80px), transparent 100%); }
@media (max-width: 991.98px) { .sp-outcomes__list { padding-top: 72px; padding-bottom: 190px; } }
@media (max-width: 767.98px) { .sp-outcomes__list { padding-top: 56px; } }

/* ===== v7: hero CTA, word-by-word roll on hover (same behaviour as androiddeveloper.co.in hero button) ===== */
.sp-btn--roll { flex-wrap: wrap; text-align: center; }
.sp-btn__txt { display: inline-flex; flex-wrap: wrap; justify-content: center; column-gap: .28em; }
.sp-btn__w { display: inline-block; overflow: hidden; line-height: 1.45; vertical-align: top; }
.sp-btn__w > span { position: relative; display: inline-block; transition: transform .45s cubic-bezier(.7, 0, .2, 1) calc(var(--i, 0) * 45ms); }
.sp-btn__w > span::after { content: attr(data-w); position: absolute; left: 0; top: 100%; }
.sp-btn--roll:hover .sp-btn__w > span, .sp-btn--roll:focus-visible .sp-btn__w > span { transform: translateY(-100%); }
.sp-btn--roll:hover .sp-btn__arrow, .sp-btn--roll:focus-visible .sp-btn__arrow { transform: translateX(4px); }
.sp-motion .sp-hero__actions .sp-btn--roll, .sp-motion .sp-hero__actions .sp-btn--roll::after, .sp-motion .sp-hero__actions .sp-btn--roll .sp-btn__arrow svg { animation: none; }
@media (prefers-reduced-motion: reduce) { .sp-btn__w > span { transition: none; } }

/* ===== v7: services, vertical lifecycle rail + detail panel (desktop). Works for any number of tabs. ===== */
@media (min-width: 992px) {
  .sp-sv { display: grid; grid-template-columns: minmax(290px, 340px) minmax(0, 1fr); gap: 26px; align-items: stretch; }
  .sp-sv__tabs { display: flex; flex-direction: column; justify-content: center; gap: 6px; margin: 0; padding: 14px; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 24px; box-shadow: 0 30px 60px -44px rgba(20,20,30,.45); position: relative; }
  .sp-sv__tabs::before { content: ''; position: absolute; left: 36px; top: 40px; bottom: 40px; width: 2px; background: repeating-linear-gradient(to bottom, var(--sp-line) 0 6px, transparent 6px 12px); pointer-events: none; }
  .sp-sv__tab { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; min-height: 0; padding: 9px 16px 9px 9px; background: transparent !important; border-color: transparent !important; border-radius: 16px; z-index: 1; }
  .sp-sv__tab::before { display: none; }
  .sp-sv__tab::after { top: auto; bottom: 0; height: 3px; }
  .sp-sv__row { display: contents; }
  .sp-sv__ico { grid-column: 1; grid-row: 1; background: var(--sp-surface); border: 1.5px solid var(--sp-line); }
  .sp-sv__tab-title { grid-column: 2; grid-row: 1; font-size: 14.5px; }
  .sp-sv__node { grid-column: 3; grid-row: 1; font-size: 12px; opacity: .8; }
  .sp-sv__tab:hover { transform: translateX(5px); background: var(--sp-lime-soft) !important; border-color: transparent !important; box-shadow: none !important; }
  .sp-sv__tab:hover .sp-sv__tab-title { color: var(--sp-ink); }
  .sp-sv__tab.active { transform: translateX(10px); background: var(--sp-ink) !important; border-color: var(--sp-ink) !important; box-shadow: 0 18px 30px -18px rgba(20,20,30,.75) !important; }
  .sp-sv__tab.active .sp-sv__ico { background: var(--sp-lime); border-color: var(--sp-lime); box-shadow: 0 0 0 5px rgba(221,242,74,.28); }
  .sp-sv__panel { display: flex; align-items: center; padding: 36px 36px 32px; }
  .sp-sv__panel .tab-content { width: 100%; }
  .tab-content > .sp-sv__pane.active { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 40px; }
  .sp-sv__body .sp-checklist { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 992px) and (max-width: 1199.98px) { .sp-sv { grid-template-columns: 270px minmax(0, 1fr); gap: 18px; } .tab-content > .sp-sv__pane.active { gap: 28px; } }

/* ===== v8: testimonials (3-up cards, scroll-snap row on small screens) ===== */
.sp-testis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-gap); margin: 0; padding: 0; list-style: none; }
.sp-testi { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 30px 28px 26px; overflow: hidden; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-panel); box-shadow: var(--sp-shadow-sm); transition: transform var(--sp-dur) var(--sp-ease), box-shadow var(--sp-dur) var(--sp-ease), border-color var(--sp-dur) var(--sp-ease); }
.sp-testi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--sp-lime); transform: scaleX(.18); transform-origin: left; transition: transform .6s var(--sp-ease); }
.sp-testi:hover { transform: translateY(-6px); border-color: rgba(20,20,30,.18); box-shadow: var(--sp-shadow-lg); }
.sp-testi:hover::before { transform: scaleX(1); }
.sp-testi__tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 5px 12px; border-radius: var(--sp-radius-pill); background: var(--sp-lime-soft); font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--sp-ink); }
.sp-testi__tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sp-ink); }
.sp-testi__quote { position: relative; flex: 1; margin: 0; padding: 44px 0 0; font-size: 15px; line-height: 1.75; color: var(--sp-ink-soft); }
.sp-testi__quote::before { content: '\201C'; position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding-top: 12px; border-radius: 50%; background: var(--sp-ink); color: var(--sp-lime); font-family: Georgia, serif; font-size: 34px; line-height: 1; font-weight: 700; }
.sp-testi__quote p { margin: 0; }
.sp-testi__who { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px dashed var(--sp-line); }
.sp-testi__avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; background: var(--sp-ink); color: var(--sp-lime); font-size: 14px; font-weight: 700; box-shadow: 0 0 0 3px var(--sp-surface), 0 0 0 5px var(--sp-lime); }
.sp-testi__name { display: block; font-size: 15px; font-weight: 600; color: var(--sp-ink); }
.sp-testi__role { display: block; margin-top: 2px; font-size: 13px; color: var(--sp-ink-muted); }
@media (max-width: 991.98px) {
  .sp-testis { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82%, 380px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: none; }
  .sp-testis::-webkit-scrollbar { display: none; }
  .sp-testi { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .sp-testi, .sp-testi::before { transition: none; } .sp-testi:hover { transform: none; } }


/* ===== v9: services rail without dotted line · tools rail scrolls up/down · outcomes scroller tightened ===== */
.sp-sv__tabs::before { display: none !important; }

@media (min-width: 992px) {
  .sp-tools .sp-tabs, .sp-tools .sp-tabs.at-top, .sp-tools .sp-tabs.at-bottom, .sp-tools .sp-tabs.at-top.at-bottom { max-height: 360px; overflow-x: hidden !important; overflow-y: auto !important; scroll-behavior: smooth; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--sp-lime) rgba(255,255,255,.08); }
  .sp-tools .sp-tabs { -webkit-mask-image: linear-gradient(transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); }
  .sp-tools .sp-tabs.at-top { -webkit-mask-image: linear-gradient(#000 0, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(#000 0, #000 calc(100% - 22px), transparent 100%); }
  .sp-tools .sp-tabs.at-bottom { -webkit-mask-image: linear-gradient(transparent 0, #000 22px, #000 100%); mask-image: linear-gradient(transparent 0, #000 22px, #000 100%); }
  .sp-tools .sp-tabs.at-top.at-bottom { -webkit-mask-image: none; mask-image: none; }
}

.sp-outcomes__list { scroll-behavior: smooth; padding: 96px 16px 24px 0; -webkit-mask-image: linear-gradient(transparent 0, #000 64px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(transparent 0, #000 64px, #000 calc(100% - 28px), transparent 100%); }
.sp-outcomes__list .sp-outcome, .sp-outcomes__list .sp-outcome.is-active { transform: none; }
@media (max-width: 991.98px) { .sp-outcomes__list { padding-top: 72px; padding-bottom: 24px; } }
@media (max-width: 767.98px) { .sp-outcomes__list { padding-top: 56px; padding-bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .sp-outcomes__list, .sp-tools .sp-tabs { scroll-behavior: auto; } }


/* ===== v10: new section designs — lanes, tiles, bento, case-study slider ===== */
/* Lanes: editorial rows that fill lime on hover */
.sp-lanes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sp-lane { position: relative; display: grid; grid-template-columns: 56px 52px minmax(0, 5fr) minmax(0, 7fr) 44px; align-items: center; gap: 22px; padding: 22px 26px; overflow: hidden; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); transition: transform var(--sp-dur) var(--sp-ease), box-shadow var(--sp-dur) var(--sp-ease), border-color var(--sp-dur) var(--sp-ease); }
.sp-lane::before { content: ''; position: absolute; inset: 0; background: var(--sp-lime); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--sp-ease); z-index: 0; }
.sp-lane > * { position: relative; z-index: 1; }
.sp-lane:hover { transform: translateX(6px); border-color: var(--sp-ink); box-shadow: var(--sp-shadow-md); }
.sp-lane:hover::before { transform: scaleX(1); }
.sp-lane__num { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.2px rgba(20,20,30,.3); font-variant-numeric: tabular-nums; }
.sp-lane:hover .sp-lane__num { -webkit-text-stroke-color: var(--sp-ink); }
.sp-lane .sp-icon { background: var(--sp-lime-soft); }
.sp-lane:hover .sp-icon { background: var(--sp-ink); color: var(--sp-lime); }
.sp-lane__title { font-size: 18px; font-weight: 600; line-height: 1.3; }
.sp-lane__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--sp-body); }
.sp-lane:hover .sp-lane__text { color: var(--sp-ink); }
.sp-lane__go { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sp-ink); color: var(--sp-lime); opacity: 0; transform: translateX(-10px); transition: opacity var(--sp-dur) var(--sp-ease), transform .45s var(--sp-ease); }
.sp-lane__go svg, .sp-lane .sp-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-lane:hover .sp-lane__go { opacity: 1; transform: none; }
@media (max-width: 991.98px) { .sp-lane { grid-template-columns: 48px minmax(0, 1fr) 40px; gap: 6px 16px; padding: 20px; } .sp-lane__num { display: none; } .sp-lane .sp-icon { grid-row: 1 / 3; } .sp-lane__title { grid-column: 2; } .sp-lane__text { grid-column: 2 / 4; } .sp-lane__go { grid-column: 3; grid-row: 1; opacity: 1; transform: none; width: 34px; height: 34px; } }

/* Tiles: dark cards with outlined counters */
.sp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-gap); margin: 0; padding: 0; list-style: none; counter-reset: tile; }
.sp-tilec { position: relative; counter-increment: tile; padding: 64px 26px 28px; overflow: hidden; background: var(--sp-on-dark-fill); border: 1px solid var(--sp-on-dark-line); border-radius: var(--sp-radius-panel); transition: transform var(--sp-dur) var(--sp-ease), background-color var(--sp-dur) var(--sp-ease), border-color var(--sp-dur) var(--sp-ease); }
.sp-tilec::before { content: counter(tile, decimal-leading-zero); position: absolute; top: 14px; right: 20px; font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.2px rgba(255,255,255,.28); transition: -webkit-text-stroke-color var(--sp-dur) var(--sp-ease); }
.sp-tilec::after { content: ''; position: absolute; left: 26px; top: 28px; width: 34px; height: 4px; border-radius: 4px; background: var(--sp-lime); transition: width .5s var(--sp-ease); }
.sp-tilec:hover { transform: translateY(-6px); background: rgba(255,255,255,.1); border-color: rgba(221,242,74,.5); }
.sp-tilec:hover::before { -webkit-text-stroke-color: var(--sp-lime); }
.sp-tilec:hover::after { width: 72px; }
.sp-tilec__title { font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--sp-on-dark); }
.sp-tilec__text { margin: 10px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--sp-on-dark-soft); }
@media (max-width: 991.98px) { .sp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .sp-tiles { grid-template-columns: minmax(0, 1fr); } }

/* Bento: mixed-size tiles */
.sp-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-gap); }
.sp-bn { position: relative; grid-column: span 2; display: flex; flex-direction: column; gap: 12px; padding: 28px 26px; overflow: hidden; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-panel); box-shadow: var(--sp-shadow-sm); transition: transform var(--sp-dur) var(--sp-ease), box-shadow var(--sp-dur) var(--sp-ease); }
.sp-bn:nth-child(1), .sp-bn:nth-child(2) { grid-column: span 3; }
.sp-bn:nth-child(1) { background: var(--sp-ink) var(--sp-gradient); border-color: var(--sp-ink); }
.sp-bn:nth-child(6) { grid-column: span 6; flex-direction: row; align-items: center; gap: 24px; background: var(--sp-lime); border-color: var(--sp-lime); }
.sp-bn:hover { transform: translateY(-5px); box-shadow: var(--sp-shadow-lg); }
.sp-bn .sp-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-bn__num { position: absolute; top: 18px; right: 22px; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.2px rgba(20,20,30,.16); }
.sp-bn__title { font-size: 18px; font-weight: 600; line-height: 1.3; }
.sp-bn__text { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--sp-body); }
.sp-bn:nth-child(1) .sp-bn__title { color: var(--sp-on-dark); font-size: 22px; }
.sp-bn:nth-child(1) .sp-bn__text { color: var(--sp-on-dark-soft); }
.sp-bn:nth-child(1) .sp-icon { background: var(--sp-lime); color: var(--sp-ink); }
.sp-bn:nth-child(1) .sp-bn__num { -webkit-text-stroke-color: rgba(255,255,255,.25); }
.sp-bn:nth-child(6) .sp-bn__text { color: var(--sp-ink); max-width: 70ch; }
.sp-bn:nth-child(6) .sp-bn__num { -webkit-text-stroke-color: rgba(20,20,30,.3); }
.sp-bn:nth-child(6) .sp-icon { background: var(--sp-ink); color: var(--sp-lime); }
.sp-bn:nth-child(6) .sp-bn__title { flex: 0 1 300px; }
@media (max-width: 991.98px) { .sp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-bn, .sp-bn:nth-child(1), .sp-bn:nth-child(2) { grid-column: span 1; } .sp-bn:nth-child(6) { grid-column: span 2; } }
@media (max-width: 639.98px) { .sp-bento { grid-template-columns: minmax(0, 1fr); } .sp-bn, .sp-bn:nth-child(n) { grid-column: span 1; } .sp-bn:nth-child(6) { flex-direction: column; align-items: flex-start; gap: 12px; } }

/* Case-study slider: image left, content right */
.sp-cs { position: relative; }
.sp-cs__viewport { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--sp-radius-panel); }
.sp-cs__viewport::-webkit-scrollbar { display: none; }
.sp-cs__viewport:focus-visible { outline: 2px solid var(--sp-ink); outline-offset: 4px; }
.sp-cs__slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-width: 0; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-panel); overflow: hidden; box-shadow: var(--sp-shadow-md); }
.sp-cs__media { position: relative; border-radius: 0; min-height: 100%; }
.sp-cs__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-cs__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,30,0) 45%, rgba(20,20,30,.7)); }
.sp-cs__num { position: absolute; left: 24px; bottom: 16px; z-index: 1; font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--sp-lime); }
.sp-cs__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 36px 40px; }
.sp-cs__title { font-size: 24px; line-height: 1.25; }
.sp-cs__facts { display: grid; gap: 10px; }
.sp-cs__facts p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--sp-body); }
.sp-cs__facts strong, .sp-cs__rlabel { color: var(--sp-ink); font-weight: 600; }
.sp-cs__rlabel { margin: 4px 0 -2px; font-size: 15px; }
.sp-cs__body .sp-btn { margin-top: 8px; }
.sp-cs__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.sp-cs__dots { display: flex; align-items: center; gap: 8px; }
.sp-cs__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 10px; background: var(--sp-line); cursor: pointer; transition: width .4s var(--sp-ease), background-color var(--sp-dur) var(--sp-ease); }
.sp-cs__dot[aria-current="true"] { width: 34px; background: var(--sp-ink); }
.sp-cs__dot:focus-visible { outline: 2px solid var(--sp-ink); outline-offset: 3px; }
.sp-cs__nav { display: flex; gap: 10px; }
.sp-cs__arrow { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--sp-ink); border-radius: 50%; background: var(--sp-surface); color: var(--sp-ink); cursor: pointer; transition: background-color var(--sp-dur) var(--sp-ease), color var(--sp-dur) var(--sp-ease), opacity var(--sp-dur) var(--sp-ease); }
.sp-cs__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-cs__arrow:hover:not(:disabled) { background: var(--sp-ink); color: var(--sp-lime); }
.sp-cs__arrow:disabled { opacity: .35; cursor: default; }
.sp-cs__arrow:focus-visible { outline: 2px solid var(--sp-ink); outline-offset: 3px; }
@media (max-width: 991.98px) { .sp-cs__slide { grid-template-columns: minmax(0, 1fr); } .sp-cs__media { min-height: 240px; } .sp-cs__body { padding: 26px 24px 30px; } .sp-cs__title { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .sp-cs__viewport { scroll-behavior: auto; } .sp-lane, .sp-lane::before, .sp-tilec, .sp-bn { transition: none; } }


/* ===== v11: calmer lanes, AIOps panel, industries card slider, slider controls at the sides ===== */
/* Lanes: quiet hover, no arrow */
.sp-lane { grid-template-columns: 56px 52px minmax(0, 5fr) minmax(0, 7fr); }
.sp-lane::before { display: none; }
.sp-lane:hover { transform: none; background: var(--sp-surface-soft); border-color: rgba(20,20,30,.28); box-shadow: var(--sp-shadow-sm); }
.sp-lane:hover .sp-icon { background: var(--sp-lime-soft); color: var(--sp-ink); }
.sp-lane:hover .sp-lane__text { color: var(--sp-body); }
.sp-lane__go { display: none; }
@media (max-width: 991.98px) { .sp-lane { grid-template-columns: 48px minmax(0, 1fr); } .sp-lane__text { grid-column: 2; } }

/* AIOps: dark intro panel + capability list */
.sp-aio { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 2rem + 1.5vw, 56px); align-items: start; }
.sp-aio__intro { position: sticky; top: calc(var(--dx-header-h, 0px) + 90px); padding: 36px 32px 34px; border-radius: var(--sp-radius-panel); background: var(--sp-ink) var(--sp-gradient); color: var(--sp-on-dark-soft); overflow: hidden; box-shadow: var(--sp-shadow-lg); }
.sp-aio__intro::after { content: ''; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(221,242,74,.25); box-shadow: 0 0 0 28px rgba(221,242,74,.05), 0 0 0 58px rgba(221,242,74,.03); pointer-events: none; }
.sp-aio__pulse { display: block; width: 100%; max-width: 240px; height: 56px; margin-bottom: 22px; fill: none; stroke: var(--sp-lime); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sp-aio__title { position: relative; font-size: var(--sp-fs-h2); line-height: 1.22; color: var(--sp-on-dark); text-wrap: balance; }
.sp-aio__title span { color: var(--sp-lime); }
.sp-aio__text { position: relative; margin: 14px 0 0; font-size: 15px; line-height: 1.7; color: var(--sp-on-dark-soft); }
.sp-aio__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.sp-aio__item { display: flex; align-items: flex-start; gap: 16px; padding: 22px 22px 24px; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); transition: border-color var(--sp-dur) var(--sp-ease), box-shadow var(--sp-dur) var(--sp-ease); }
.sp-aio__item:hover { border-color: rgba(20,20,30,.28); box-shadow: var(--sp-shadow-sm); }
.sp-aio__item .sp-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--sp-lime-soft); }
.sp-aio__item .sp-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-aio__ititle { font-size: 17px; font-weight: 600; line-height: 1.3; }
.sp-aio__itext { margin: 6px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--sp-body); }
.sp-aio__item--wide { grid-column: 1 / -1; background: var(--sp-lime-soft); border-color: transparent; }
.sp-aio__item--wide .sp-icon { background: var(--sp-ink); color: var(--sp-lime); }
.sp-aio__item--wide .sp-aio__itext { max-width: 72ch; color: var(--sp-ink-soft); }
@media (max-width: 991.98px) { .sp-aio { grid-template-columns: minmax(0, 1fr); } .sp-aio__intro { position: static; } }
@media (max-width: 639.98px) { .sp-aio__list { grid-template-columns: minmax(0, 1fr); } }

/* Slider controls: arrows on both sides, dots below */
.sp-cs__bar { display: none; }
.sp-cs__arrow { position: absolute; top: calc(50% - 20px); z-index: 3; width: 44px; height: 44px; margin-top: -22px; background: var(--sp-surface); box-shadow: var(--sp-shadow-md); }
.sp-cs__arrow--prev { left: 12px; }
.sp-cs__arrow--next { right: 12px; }
@media (min-width: 1240px) { .sp-cs__arrow--prev { left: -22px; } .sp-cs__arrow--next { right: -22px; } }
.sp-cs__dots { justify-content: center; margin-top: 22px; }
.sp-section--dark .sp-cs__arrow { background: var(--sp-lime); border-color: var(--sp-lime); color: var(--sp-ink); }
.sp-section--dark .sp-cs__arrow:hover:not(:disabled) { background: var(--sp-surface); color: var(--sp-ink); }
.sp-section--dark .sp-cs__dot { background: rgba(255,255,255,.28); }
.sp-section--dark .sp-cs__dot[aria-current="true"] { background: var(--sp-lime); }

/* Case-study button: compact */
.sp-cs__body .sp-btn { min-height: 44px; gap: 10px; padding: 0 6px 0 20px; font-size: 14px; }
.sp-cs__body .sp-btn__arrow { width: 32px; height: 32px; }
.sp-cs__body .sp-btn__arrow svg { width: 16px; height: 16px; }

/* Industries: card slider (three in view) */
.sp-cs--cards .sp-cs__viewport { gap: var(--sp-gap); }
.sp-ind { flex: 0 0 calc((100% - 2 * var(--sp-gap)) / 3); scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--sp-on-dark-fill); border: 1px solid var(--sp-on-dark-line); border-radius: var(--sp-radius-panel); }
.sp-ind__media { aspect-ratio: 4 / 3; border-radius: 0; background: var(--sp-ink-2); }
.sp-ind__body { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 28px; }
.sp-ind__title { position: relative; padding-top: 14px; font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--sp-on-dark); }
.sp-ind__title::before { content: ''; position: absolute; top: 0; left: 0; width: 34px; height: 3px; border-radius: 3px; background: var(--sp-lime); }
.sp-ind__text { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--sp-on-dark-soft); }
@media (max-width: 991.98px) { .sp-ind { flex-basis: calc((100% - var(--sp-gap)) / 2); } }
@media (max-width: 575.98px) { .sp-ind { flex-basis: 100%; } }


/* ===== v12: challenges (stacked cards + framed image), AIOps signal line, industries image tiles ===== */
/* Challenges */
.sp-chal { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 2rem + 2vw, 72px); align-items: center; }
.sp-chal__title { font-size: var(--sp-fs-h2); font-weight: 600; line-height: 1.22; text-wrap: balance; }
.sp-chal__title span { color: var(--sp-ink); background: linear-gradient(transparent 62%, var(--sp-lime) 62%); }
.sp-chal__lead { margin: 12px 0 0; font-size: var(--sp-fs-text); color: var(--sp-body); }
.sp-chal__list { position: relative; display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.sp-chal__list::before { content: ''; position: absolute; left: 33px; top: 30px; bottom: 30px; width: 2px; background: var(--sp-line); }
.sp-chal__item { position: relative; display: flex; align-items: flex-start; gap: 18px; padding: 18px 22px 18px 16px; background: var(--sp-surface-soft); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); transition: border-color var(--sp-dur) var(--sp-ease), box-shadow var(--sp-dur) var(--sp-ease), transform var(--sp-dur) var(--sp-ease); }
.sp-chal__item:hover { border-color: rgba(20,20,30,.28); box-shadow: var(--sp-shadow-sm); transform: translateX(4px); }
.sp-chal__num { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: var(--sp-surface); border: 1px solid var(--sp-line); font-size: 13px; font-weight: 700; color: var(--sp-ink); font-variant-numeric: tabular-nums; }
.sp-chal__item:hover .sp-chal__num { background: var(--sp-ink); border-color: var(--sp-ink); color: var(--sp-lime); }
.sp-chal__ititle { font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.sp-chal__itext { margin: 4px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--sp-body); }
.sp-chal__frame { position: relative; margin: 0; padding: 14px; border: 1px solid var(--sp-line); border-radius: 28px; background: var(--sp-surface-sage); box-shadow: var(--sp-shadow-md); }
.sp-chal__frame::after { content: ''; position: absolute; right: -22px; bottom: -22px; width: 92px; height: 92px; z-index: -1; background-image: radial-gradient(var(--sp-ink-faint) 1.4px, transparent 1.6px); background-size: 14px 14px; opacity: .5; }
.sp-chal__frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 18px; }
@media (min-width: 992px) { .sp-chal__frame { position: sticky; top: calc(var(--dx-header-h, 0px) + 90px); } }
@media (max-width: 991.98px) { .sp-chal { grid-template-columns: minmax(0, 1fr); } .sp-chal__frame { max-width: 560px; } }

/* AIOps: signal line */
.sp-sig { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.sp-sig::before { content: ''; position: absolute; left: 10%; right: 10%; top: 27px; height: 2px; background: linear-gradient(90deg, var(--sp-line), var(--sp-ink) 50%, var(--sp-line)); }
.sp-sig__step { position: relative; text-align: center; }
.sp-sig__node { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--sp-surface); border: 2px solid var(--sp-ink); color: var(--sp-ink); box-shadow: 0 0 0 6px var(--sp-surface-alt); transition: background-color var(--sp-dur) var(--sp-ease), color var(--sp-dur) var(--sp-ease), transform .45s var(--sp-ease); }
.sp-sig__node svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-sig__step:hover .sp-sig__node { background: var(--sp-ink); color: var(--sp-lime); transform: translateY(-3px); }
.sp-sig__title { margin-top: 18px; font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.sp-sig__text { margin: 8px 0 0; font-size: 14px; line-height: 1.65; color: var(--sp-body); text-wrap: pretty; }
.sp-sig__wide { display: flex; align-items: center; gap: 22px; margin-top: 40px; padding: 24px 30px; border-radius: var(--sp-radius-panel); background: var(--sp-ink) var(--sp-gradient); }
.sp-sig__wide .sp-sig__node { flex: 0 0 56px; border-color: var(--sp-lime); background: var(--sp-lime); color: var(--sp-ink); box-shadow: none; }
.sp-sig__wide .sp-sig__title { flex: 0 1 320px; margin: 0; font-size: 19px; color: var(--sp-on-dark); }
.sp-sig__wide .sp-sig__text { margin: 0; font-size: 15px; color: var(--sp-on-dark-soft); }
@media (max-width: 1199.98px) { .sp-sig { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; } .sp-sig::before { display: none; } }
@media (max-width: 767.98px) {
  .sp-sig { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .sp-sig::before { display: block; left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; background: var(--sp-line); }
  .sp-sig__step { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; text-align: left; }
  .sp-sig__node { grid-row: 1 / 3; }
  .sp-sig__title { margin-top: 4px; }
  .sp-sig__wide { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; }
}

/* Industries: tall image tiles, content on hover / focus / tap */
.sp-cs--cards .sp-cs__viewport { padding: 4px 2px; }
.sp-ind { position: relative; flex: 0 0 calc((100% - 3 * var(--sp-gap)) / 4); display: block; aspect-ratio: 3 / 4.3; padding: 0; overflow: hidden; background: var(--sp-ink-2); border: 0; border-radius: 22px; cursor: pointer; isolation: isolate; transition: transform .5s var(--sp-ease), box-shadow .5s var(--sp-ease); }
.sp-ind__media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.sp-ind__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--sp-ease); }
.sp-ind::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,20,30,0) 55%, rgba(20,20,30,.78)); transition: opacity .4s var(--sp-ease); }
.sp-ind__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 20px 20px 22px; transition: opacity .3s var(--sp-ease); }
.sp-ind__name { font-size: 18px; font-weight: 600; line-height: 1.25; color: #fff; }
.sp-ind__chev { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.22); color: #fff; backdrop-filter: blur(4px); transition: transform .4s var(--sp-ease), background-color var(--sp-dur) var(--sp-ease); }
.sp-ind__chev svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-ind__over { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 24px 22px; background: linear-gradient(180deg, rgba(20,20,30,.55), rgba(20,20,30,.94) 55%); opacity: 0; transform: translateY(14px); transition: opacity .45s var(--sp-ease), transform .45s var(--sp-ease); pointer-events: none; }
.sp-ind__title { position: relative; padding-top: 14px; font-size: 19px; font-weight: 600; line-height: 1.3; color: #fff; }
.sp-ind__title::before { content: ''; position: absolute; top: 0; left: 0; width: 34px; height: 3px; border-radius: 3px; background: var(--sp-lime); }
.sp-ind__text { margin: 0; font-size: 14px; line-height: 1.65; color: var(--sp-on-dark-soft); }
.sp-ind:hover, .sp-ind:focus-visible, .sp-ind.is-open { transform: translateY(-6px); box-shadow: 0 24px 40px -22px rgba(0,0,0,.7); }
.sp-ind:hover .sp-ind__over, .sp-ind:focus-visible .sp-ind__over, .sp-ind.is-open .sp-ind__over { opacity: 1; transform: none; }
.sp-ind:hover .sp-ind__cap, .sp-ind:focus-visible .sp-ind__cap, .sp-ind.is-open .sp-ind__cap { opacity: 0; }
.sp-ind:hover .sp-ind__media img, .sp-ind.is-open .sp-ind__media img { transform: scale(1.06); }
.sp-ind:focus-visible { outline: 2px solid var(--sp-lime); outline-offset: 3px; }
@media (max-width: 1199.98px) { .sp-ind { flex-basis: calc((100% - 2 * var(--sp-gap)) / 3); } }
@media (max-width: 991.98px) { .sp-ind { flex-basis: calc((100% - var(--sp-gap)) / 2); } }
@media (max-width: 575.98px) { .sp-ind { flex-basis: 78%; } }
@media (prefers-reduced-motion: reduce) { .sp-ind, .sp-ind__over, .sp-ind__media img { transition: none; } }

/* ---- Orbit: subtler index number + dot pattern; case-study numbering removed ---- */
.sp-cs__num { display: none; }
.sp-reasons.is-orbit { background-image: radial-gradient(rgba(20,20,30,.09) 1px, transparent 1.2px); background-size: 22px 22px; background-position: 0 0; border-radius: 28px; }
.sp-reasons.is-orbit::before { background: transparent; }
@media (min-width: 992px) {
  .sp-reasons.is-orbit .sp-reason.is-active .sp-reason__title::before {         margin-bottom: 6px;
        letter-spacing: -.03em;
        -webkit-text-stroke: 0;
        color: rgb(236 246 162);
        position: absolute;
        right: 60px;
        top: 100px;
        opacity: .5;
        font-size: 90px;}
}

/* ---- Fintech and BFSI: card grid ---- */
#fintech .sp-lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: none; }
#fintech .sp-lane { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 28px 26px 26px; border-radius: 20px; background: var(--sp-surface); border: 1px solid var(--sp-line); box-shadow: 0 1px 0 rgba(20,20,30,.03); }
#fintech .sp-lane::before { display: block; content: ''; position: absolute; inset: 0; z-index: 0; transform: none; background-image: radial-gradient(rgba(20,20,30,.08) 1px, transparent 1.2px); background-size: 16px 16px; -webkit-mask-image: linear-gradient(135deg, transparent 45%, #000); mask-image: linear-gradient(135deg, transparent 45%, #000); transition: opacity var(--sp-dur) var(--sp-ease); }
#fintech .sp-lane::after { content: ''; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--sp-lime); transform: scaleX(.18); transform-origin: left; transition: transform .5s var(--sp-ease); }
#fintech .sp-lane:hover { transform: translateY(-4px); background: var(--sp-surface); border-color: rgba(20,20,30,.22); box-shadow: var(--sp-shadow-md); }
#fintech .sp-lane:hover::after { transform: scaleX(1); }
#fintech .sp-lane .sp-icon { order: 0; width: 48px; height: 48px; margin-bottom: 22px; background: var(--sp-lime-soft); color: var(--sp-ink); }
#fintech .sp-lane:hover .sp-icon { background: var(--sp-lime); color: var(--sp-ink); }
#fintech .sp-lane__num { position: absolute; top: 24px; right: 24px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 8px; border: 1px solid var(--sp-line); border-radius: 999px; background: var(--sp-surface-soft); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--sp-ink-faint); -webkit-text-stroke: 0; }
#fintech .sp-lane__title { order: 1; margin-bottom: 10px; font-size: 18px; }
#fintech .sp-lane__text { order: 2; }
@media (max-width: 991.98px) { #fintech .sp-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } #fintech .sp-lane { display: flex; } #fintech .sp-lane__num { display: inline-flex; } }
@media (max-width: 575.98px) { #fintech .sp-lanes { grid-template-columns: minmax(0, 1fr); } }

/* Fintech: sticky intro + ledger rows */
.sp-fin { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 2rem + 2vw, 72px); align-items: start; }
.sp-fin__intro { position: sticky; top: calc(var(--dx-header-h, 0px) + 96px); }
.sp-fin__intro .sp-head { margin-bottom: 26px; }
.sp-fin__seals { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sp-fin__seals li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 14.5px; font-weight: 600; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); }
.sp-fin__seals svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: var(--sp-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-ledger { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sp-lg { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 22px; align-items: center; padding: 24px 28px 24px 32px; overflow: hidden; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-panel); box-shadow: var(--sp-shadow-sm); transition: transform var(--sp-dur) var(--sp-ease), box-shadow var(--sp-dur) var(--sp-ease), border-color var(--sp-dur) var(--sp-ease); }
.sp-lg::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--sp-ink); transform: scaleY(.28); transform-origin: top; transition: transform .5s var(--sp-ease); }
.sp-lg::after { content: ''; position: absolute; right: -40px; bottom: -48px; width: 150px; height: 150px; border-radius: 50%; border: 1px dashed rgba(20,20,30,.14); box-shadow: 0 0 0 22px rgba(20,20,30,.025), 0 0 0 44px rgba(20,20,30,.02); pointer-events: none; }
.sp-lg:hover { transform: translateX(6px); border-color: rgba(20,20,30,.3); box-shadow: var(--sp-shadow-md); }
.sp-lg:hover::before { transform: scaleY(1); }
.sp-lg .sp-icon { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 12px; background: var(--sp-ink); color: var(--sp-on-dark); }
.sp-lg .sp-icon svg { width: 20px; height: 20px; }
.sp-lg__title { margin: 4px 0 0; font-size: 19px; font-weight: 600; line-height: 1.3; }
.sp-lg__text { position: relative; z-index: 1; margin: 2px 0 0; max-width: 62ch; font-size: 15px; line-height: 1.65; color: var(--sp-body); }
@media (max-width: 991.98px) { .sp-fin { grid-template-columns: minmax(0, 1fr); } .sp-fin__intro { position: static; } .sp-fin__seals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .sp-fin__seals { grid-template-columns: minmax(0, 1fr); } .sp-lg { grid-template-columns: 40px minmax(0, 1fr); padding: 20px 20px 20px 24px; gap: 4px 16px; } .sp-lg .sp-icon { width: 40px; height: 40px; border-radius: 12px; } }

/* AIOps: live incident console flanked by capability nodes */
.sp-hub { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) minmax(0, 1fr); gap: 28px; align-items: center; }
.sp-hub__col { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.sp-node { position: relative; padding: 22px 22px 22px 24px; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-panel); box-shadow: var(--sp-shadow-sm); transition: transform var(--sp-dur) var(--sp-ease), box-shadow var(--sp-dur) var(--sp-ease); }
.sp-node:hover { transform: translateY(-4px); box-shadow: var(--sp-shadow-md); }
.sp-node::after { content: ''; position: absolute; top: 50%; width: 28px; height: 0; border-top: 2px dotted rgba(20,20,30,.35); }
.sp-hub__col--l .sp-node::after { right: -29px; }
.sp-hub__col--r .sp-node::after { left: -29px; }
.sp-node__head { display: flex; align-items: center; gap: 14px; }
.sp-node .sp-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--sp-ink); color: var(--sp-on-dark); }
.sp-node__title { margin: 0; font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.sp-node__text { margin: 12px 0 0; font-size: 14px; line-height: 1.65; color: var(--sp-body); }
.sp-console { position: relative; overflow: hidden; padding: 0; color: var(--sp-on-dark); background: var(--sp-ink) var(--sp-gradient); border-radius: 24px; box-shadow: 0 30px 60px -28px rgba(20,20,30,.7); }
.sp-console__bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--sp-on-dark-line); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-on-dark-soft); }
.sp-console__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.3); }
.sp-console__bar span { margin-left: auto; }
.sp-console__feed { position: relative; display: grid; gap: 8px; margin: 0; padding: 18px; list-style: none; }
.sp-console__feed li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13px; background: var(--sp-on-dark-fill); border: 1px solid var(--sp-on-dark-line); border-radius: 10px; }
.sp-console__feed li::before { content: ''; flex: 0 0 8px; height: 8px; border-radius: 50%; background: #fff; opacity: .7; }
.sp-console__merge { display: flex; align-items: center; gap: 12px; padding: 0 18px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-on-dark-soft); }
.sp-console__merge::before, .sp-console__merge::after { content: ''; flex: 1; height: 1px; background: var(--sp-on-dark-line); }
.sp-console__incident { margin: 14px 18px 18px; padding: 16px 18px; color: var(--sp-ink); background: var(--sp-surface); border-radius: 14px; }
.sp-console__incident strong { display: block; font-size: 15.5px; line-height: 1.3; }
.sp-console__incident span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--sp-body); }
@keyframes sp-feed-in { 0% { opacity: 0; transform: translateX(-14px); } 8%, 62% { opacity: 1; transform: none; } 78%, 100% { opacity: .25; transform: scale(.97); } }
@keyframes sp-incident-in { 0%, 60% { opacity: .25; transform: translateY(6px); } 74%, 94% { opacity: 1; transform: none; } 100% { opacity: .25; transform: translateY(6px); } }
.sp-motion .sp-console__feed li { animation: sp-feed-in 9s var(--sp-ease) infinite; animation-delay: calc(var(--k, 0) * .45s); }
.sp-motion .sp-console__incident { animation: sp-incident-in 9s var(--sp-ease) infinite; }
@media (max-width: 1199.98px) { .sp-hub { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sp-console { grid-column: 1 / -1; grid-row: 1; max-width: 460px; width: 100%; margin: 0 auto; } .sp-node::after { display: none; } }
@media (max-width: 639.98px) { .sp-hub { grid-template-columns: minmax(0, 1fr); } .sp-hub__col { display: contents; } }
@media (prefers-reduced-motion: reduce) { .sp-console__feed li, .sp-console__incident { animation: none; } }