/* =========================================================
   SkillLab — Solutions page (solution.html)
   ---------------------------------------------------------
   Loaded AFTER style.css. Everything here is namespaced `s2-`, from
   when this shipped as a parallel "v2" proposal, so it cannot collide
   with index.html or with style.css's older `.sol-*` rules — those are
   now dead for this page but are kept because solution-legacy.html
   (the previous design, local-only) still depends on them.

   Reused from style.css on purpose: the header/footer/contact modal,
   .btn*, the hero mesh/spark/tint layers, the [data-reveal] system,
   .illus-fill/.illus-outline, and the per-solution hero shade tokens
   (--hero-to / --hero-strip-rgb / --hero-spark) that live on :root.
   ========================================================= */

:root{
  /* Softer than --ease-premium (.16,1,.3,1), which lunges out of the gate
     and is too emphatic for a bar that restyles itself under the reader. */
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --s2-radius-xl:28px;
  --s2-radius-lg:20px;
  --s2-radius-md:14px;
  --s2-glass:rgba(255,255,255,.05);
  --s2-glass-border:rgba(255,255,255,.12);
  --s2-glass-hover:rgba(255,255,255,.09);
  --s2-lede:var(--text-heading);
  --s2-card-border:#e1e7f2;
  --s2-card-hover-border:#b9ccf5;
  --s2-divider:#e6eaf1;
  --s2-num-wm:rgba(35,97,255,.08);
  --s2-band:linear-gradient(135deg, #f4f8ff 0%, #e9f0ff 100%);
  --s2-overview-glow:rgba(35,97,255,.10);
  /* Pinned bar: frosted white over the page rather than a dark slab, so it
     reads as the content it floats over. */
  /* .84 rather than .78: the bar is translucent, so dark sections scrolling
     under it darken its effective colour and drag the selected chip's blue
     down with it. At .78 that worst case measured 4.35:1 on 14px text —
     under the 4.5 threshold. This holds ~5:1 and still reads as glass. */
  --s2-stuck-bg:rgba(255,255,255,.84);
  --s2-stuck-border:rgba(3,25,78,.12);
  --s2-stuck-shadow:rgba(3,25,78,.16);
  --s2-stuck-hover:rgba(3,25,78,.06);
  /* The selected chip's blue while pinned: outline + label, no fill.
     Deliberately deeper than the brand --blue-600 (#2361ff). The bar is
     translucent, so its effective colour darkens wherever dark content
     scrolls under it — over the components section the brand blue falls to
     ~3.1:1 on 14px text, which fails. This value holds ~4.8:1 against the
     worst backdrop on the page and ~7:1 over plain white. */
  --s2-stuck-on:#1c4ccc;
}

/* =========================================================
   HERO — two-column: copy left, orbit visual right
   ========================================================= */
.hero.s2-hero{
  background-color:var(--hero-to, #142a5e);
  background-image:linear-gradient(116deg, rgba(3,8,20,.92) 0%, rgba(3,8,20,.18) 100%);
  transition:background-color .55s var(--ease-premium);
}
.s2-hero .hero-tint{
  background:
    radial-gradient(70% 62% at 30% 50%, rgba(3,9,24,.10) 0%, rgba(3,9,24,.30) 62%, rgba(3,9,24,.46) 100%),
    linear-gradient(116deg, rgba(3,9,24,.22) 0%, rgba(var(--hero-wash-rgb, 20,42,94),.10) 100%);
}
.s2-hero .spark-h{
  background:linear-gradient(90deg, transparent, var(--hero-spark, #9fc0ff) 50%, transparent);
  box-shadow:0 0 6px 1px rgba(var(--hero-spark-rgb, 159,192,255),.7);
}
.s2-hero .spark-v{
  background:linear-gradient(180deg, transparent, var(--hero-spark, #9fc0ff) 50%, transparent);
  box-shadow:0 0 6px 1px rgba(var(--hero-spark-rgb, 159,192,255),.7);
}
/* Fewer spark lines than the home page hero (four rather than eight, see
   the markup) and dimmer as a group: over a two-column hero they read as
   ambient depth behind the orbit, not as the subject. Set on the container
   so the shared @keyframes' own opacity ramp still does the fading. */
.s2-hero .hero-sparks{opacity:.42;}

/* A large soft light source behind the orbit, in the solution's spark hue. */
.s2-hero-glow{
  position:absolute;z-index:2;pointer-events:none;
  right:-6%;top:-20%;width:62vw;max-width:900px;aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,
    rgba(var(--hero-spark-rgb, 159,192,255),.22) 0%,
    rgba(var(--hero-spark-rgb, 159,192,255),.06) 35%,
    transparent 62%);
  filter:blur(10px);
  transition:background .55s ease;
}

.s2-hero .hero-inner{
  display:grid;grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  align-items:center;gap:clamp(32px, 4vw, 64px);
  min-height:min(78vh, 700px);
  /* Own padding-top, so it has to re-add the header overlap itself. */
  padding-top:calc(clamp(48px, 6vw, 88px) + var(--header-overlap));padding-bottom:clamp(64px, 7vw, 110px);
}
.s2-hero-copy{
  display:flex;flex-direction:column;align-items:flex-start;gap:22px;
  text-align:left;max-width:640px;
}
.s2-kicker{
  display:inline-flex;align-items:center;gap:12px;
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-tint);
}
.s2-kicker-idx{
  font-variant-numeric:tabular-nums;letter-spacing:.06em;
  padding:4px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#fff;
}
.s2-kicker-sep{width:28px;height:1px;background:rgba(255,255,255,.28);}
.s2-hero-copy h1{
  display:block;text-align:left;
  font-size:clamp(38px, 5.2vw, 68px);font-weight:700;line-height:1.04;
  letter-spacing:-.025em;color:#fff;
  text-shadow:0 4px 28px rgba(0,0,0,.4);
  text-wrap:balance;
}
.s2-hero-copy .hero-sub{
  font-size:clamp(18px, 1.7vw, 22px);line-height:1.45;max-width:36ch;
  color:var(--blue-tint);
}
.s2-hero-facts{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;
}
.s2-fact{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:14px;font-weight:500;color:#fff;
}
.s2-fact b{font-weight:700;color:var(--hero-spark, #9fc0ff);font-variant-numeric:tabular-nums;}
.s2-fact-dot{width:6px;height:6px;border-radius:50%;background:var(--hero-spark, #9fc0ff);box-shadow:0 0 10px var(--hero-spark, #9fc0ff);}
/* Copy swap: replays on each tab switch (class re-added after a reflow). */
.s2-hero-copy.is-swap > *{animation:s2FadeUp .55s var(--ease-premium) both;}
.s2-hero-copy.is-swap > *:nth-child(2){animation-delay:60ms;}
.s2-hero-copy.is-swap > *:nth-child(3){animation-delay:120ms;}
.s2-hero-copy.is-swap > *:nth-child(4){animation-delay:180ms;}
.s2-hero-copy.is-swap > *:nth-child(5){animation-delay:240ms;}
@keyframes s2FadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* --- Orbit visual ----------------------------------------- */
.s2-orbit-wrap{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:center;
  min-height:420px;
}
.s2-orbit{
  position:relative;width:min(100%, 520px);
}
.s2-orbit-disc{
  position:relative;width:100%;aspect-ratio:1;
  display:grid;place-items:center;
}
/* Concentric rings */
.s2-ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(var(--hero-spark-rgb, 159,192,255),.22);
  inset:0;
}
.s2-ring--2{inset:15%;border-color:rgba(var(--hero-spark-rgb, 159,192,255),.16);border-style:dashed;}
.s2-ring--3{inset:31%;border-color:rgba(var(--hero-spark-rgb, 159,192,255),.28);}
.s2-ring--3::before{
  content:'';position:absolute;inset:-1px;border-radius:50%;
  background:radial-gradient(circle, rgba(var(--hero-spark-rgb, 159,192,255),.22) 0%, transparent 70%);
  animation:s2Breathe 5s ease-in-out infinite;
}
@keyframes s2Breathe{0%,100%{opacity:.6;transform:scale(.96);}50%{opacity:1;transform:scale(1.04);}}

/* Core: the solution's icon on a glass disc */
.s2-core{
  position:relative;z-index:2;
  width:33%;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 60%),
    rgba(6,16,42,.55);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 0 0 10px rgba(var(--hero-spark-rgb, 159,192,255),.06),
    0 0 60px rgba(var(--hero-spark-rgb, 159,192,255),.35),
    inset 0 0 30px rgba(var(--hero-spark-rgb, 159,192,255),.15);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:box-shadow .55s ease;
}
.s2-core-icon{position:relative;width:56%;height:56%;filter:brightness(1.35) drop-shadow(0 0 14px rgba(var(--hero-spark-rgb, 159,192,255),.55));}
.s2-core.is-swap .s2-core-icon{animation:s2Pop .6s var(--ease-premium) both;}
@keyframes s2Pop{from{opacity:0;transform:scale(.6) rotate(-8deg);}to{opacity:1;transform:none;}}

/* Orbiting component chips. Each chip is a zero-size point placed on the
   ring at (--x, --y) — percentages of the orbit box, so they scale with it.
   The whole ring rotates slowly; each label counter-rotates so it stays
   upright. */
.s2-orbit-ring{
  position:absolute;inset:0;
  animation:s2Spin 80s linear infinite;
}
.s2-orbit-chip{
  position:absolute;width:0;height:0;
  --r:var(--s2-ring-out, 50%);
  left:calc(50% + var(--ux, 0) * var(--r));
  top:calc(50% + var(--uy, 0) * var(--r));
}
/* Every other chip rides the dashed middle ring so long labels don't
   collide with their neighbours. Both radii are tokens so a breakpoint can
   collapse them onto one ring by setting the pair. */
.s2-orbit-chip.is-inner{--r:var(--s2-ring-in, 35%);}
.s2-orbit-chip-hold{
  position:absolute;left:0;top:0;
  transform:translate(-50%,-50%);
}
.s2-orbit-chip-inner{
  animation:s2Spin 80s linear infinite reverse;
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;white-space:nowrap;
  background:rgba(6,16,42,.72);
  border:1px solid rgba(var(--hero-spark-rgb, 159,192,255),.32);
  box-shadow:0 8px 24px -10px rgba(0,0,0,.6), 0 0 18px -8px rgba(var(--hero-spark-rgb, 159,192,255),.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:12.5px;font-weight:600;color:#fff;letter-spacing:.01em;
  opacity:0;
  transition:opacity .5s ease, border-color .3s ease;
  transition-delay:calc(var(--i, 0) * 90ms + 200ms);
}
.s2-orbit.is-live .s2-orbit-chip-inner{opacity:1;}
.s2-orbit-chip-inner::before{
  content:'';width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--hero-spark, #9fc0ff);
  box-shadow:0 0 10px var(--hero-spark, #9fc0ff);
}
@keyframes s2Spin{to{transform:rotate(360deg);}}


/* =========================================================
   SWITCHER — the boxed-chip strip from the current live page
   ---------------------------------------------------------
   Ported from .sol-switch/.sol-tab in style.css rather than reinvented:
   the solid band, the two-line labels and the lit-border active chip are
   the navigation the team already reads, so v2 keeps them verbatim and
   changes only what sits above and below.
   ========================================================= */
.s2-switch{
  position:sticky;top:var(--header-h, 58px);z-index:40;
  background-color:rgb(var(--hero-strip-rgb, 6,16,42));
  border-bottom:1px solid var(--border-dark-subtle);
  /* Much narrower than --pad-section on purpose: six single-line chips need
     ~1210px, which the page gutter (115px a side at 1440) doesn't leave.
     The 1.4vw middle stop is what keeps them all visible at 1280 with room
     to spare; below that the strip scrolls, which it is built to do. */
  padding:clamp(4px, 0.8vw, 10px) clamp(16px, 1.4vw, 40px);
  transition:background-color .55s var(--ease-premium),
             padding-top .3s var(--ease-soft), padding-bottom .3s var(--ease-soft),
             -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease,
             box-shadow .3s ease;
}
.s2-switch-inner{max-width:var(--max-width);margin:0 auto;position:relative;}
.s2-switch-inner::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:44px;pointer-events:none;
  background:linear-gradient(90deg, rgba(var(--hero-strip-rgb, 6,16,42),0), rgb(var(--hero-strip-rgb, 6,16,42)));
  opacity:0;transition:opacity .3s ease;
}
.s2-switch-inner.is-overflowing::after{opacity:1;}
.s2-tabs{
  position:relative;
  list-style:none;margin:0;
  /* Block only — the inline padding snaps with the rest of the horizontal
     re-layout. */
  /* Not cosmetic: the strip scrolls horizontally, which forces a clipping
     overflow-y, so this is the room the chips' hover lift, active glow and
     focus ring need in order not to be sliced off. */
  padding:14px 16px;
  display:flex;
  transition:padding-top .3s var(--ease-soft), padding-bottom .3s var(--ease-soft);
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.s2-tabs::-webkit-scrollbar{display:none;}
/* Centred when the chips fit, still scrollable from the true start when
   they don't — two zero-width auto-margin flex items split the free space.
   justify-content:center would make the leftmost chips unreachable once the
   strip overflows. */
.s2-tabs::before,.s2-tabs::after{content:'';flex:0 0 auto;margin:auto;}
/* Spacing via margin, not gap: gap would also apply around those two
   pseudo-elements and silently add ~16px of dead width to a strip that
   only just fits six chips. */
.s2-tabs li{flex:0 0 auto;scroll-snap-align:start;}
.s2-tabs li + li{margin-left:8px;}
.s2-tab{
  display:flex;align-items:center;justify-content:center;
  /* Horizontal padding is now the chip's own — it used to come for free
     from the icon sitting inside the box. min-height suits ONE line of
     text: the old 64px was sized around a 38px icon plus a wrapped label,
     and left a single line floating in a mostly empty box. */
  padding:12px 16px;min-height:48px;
  background:var(--navy-900);border:1px solid var(--border-dark-subtle);
  /* Centred, not left-aligned: with the icon gone the label is the only
     content, and two lines of unequal length hang badly off a left edge. */
  border-radius:var(--radius-md);cursor:pointer;text-align:center;
  /* Colour lives here, not on the label, so the pinned state can invert the
     whole chip in one declaration and have the text crossfade with it. */
  color:#fff;
  font-family:inherit;
  /* Only the VERTICAL metrics animate, and on --ease-soft rather than
     --ease-premium. Everything horizontal (the label's line form, the
     icon's width, the inline padding) is deliberately left to snap in a
     single frame — see the stuck-state notes below for why. */
  transition:border-color .3s var(--ease-premium), background-color .3s var(--ease-premium),
             color .3s var(--ease-premium),
             transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium),
             min-height .3s var(--ease-soft),
             padding-top .3s var(--ease-soft), padding-bottom .3s var(--ease-soft);
}
.s2-tab:hover{border-color:var(--blue-500);background:var(--navy-810);transform:translateY(-2px);}
.s2-tab:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px;}
.s2-tab--on{
  border-color:var(--blue-500);background:var(--navy-810);
  box-shadow:0 0 18px rgba(35,97,255,.35);
}
/* Deliberately a SQUARE box: these SVGs have a 100x100 viewBox, so under
   object-fit:contain a non-square box letterboxes the glyph. */
.s2-tab-label{font-size:15px;line-height:1.3;color:inherit;font-weight:400;white-space:nowrap;}
/* Medium (500), in both the resting and the pinned bar. */
.s2-tab--on .s2-tab-label{font-weight:500;}

/* --- Stuck state: slimmer, inverted chips ----------------
   While the strip is pinned under the header it tightens up and takes the
   colour of the content it floats over, so a bar that is now permanently in
   view costs as little vertical space as possible. It restores itself once
   the reader scrolls back to the strip's own place in the page.

   `is-stuck` is set from the page script, which measures the strip against
   the live header height (the header shrinks as you scroll, so the offset
   isn't a constant). */
/* Smoked glass, only while pinned. Deliberately NOT applied in the resting
   state: unpinned, the strip sits flush under the hero with nothing behind
   it but the page background, so translucency there would wash the band out
   to a pale blue-grey and break the seam with the hero. Pinned, there is
   real content scrolling underneath for the blur to act on. */
.s2-switch.is-stuck{
  padding-top:3px;padding-bottom:3px;
  /* Inverted: the bar drops the hero's navy (and its per-solution tint) and
     takes the surface it is floating over, so pinned it reads as a toolbar
     belonging to the content rather than a dark slab laid across it. */
  background-color:var(--s2-stuck-bg);
  -webkit-backdrop-filter:saturate(1.4) blur(18px);
  backdrop-filter:saturate(1.4) blur(18px);
  border-bottom-color:var(--s2-stuck-border);
  box-shadow:0 12px 32px -20px var(--s2-stuck-shadow);
}
/* Chips go quiet: no fill, no border, muted label — the strip is a row of
   text links while pinned, and only the selected one carries weight. */
.s2-switch.is-stuck .s2-tab{
  background:transparent;border-color:transparent;
  color:var(--text-muted);
}
.s2-switch.is-stuck .s2-tab:hover{
  background:var(--s2-stuck-hover);border-color:transparent;
  color:var(--text-heading);
}
/* Outlined rather than a solid blue fill: a hairline blue border and a blue
   label at the same medium weight as its siblings, so the selected chip is
   marked without shouting over the content the bar is floating on. */
.s2-switch.is-stuck .s2-tab--on{
  background:transparent;
  border-color:var(--s2-stuck-on);
  color:var(--s2-stuck-on);
  box-shadow:none;
}
.s2-switch.is-stuck .s2-tab--on:hover{
  background:transparent;border-color:var(--s2-stuck-on);color:var(--s2-stuck-on);
}
/* The scroll fade has to match whatever the bar currently is. */
.s2-switch.is-stuck .s2-switch-inner::after{
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--s2-stuck-bg) 60%, var(--s2-stuck-bg) 100%);
}
.s2-switch.is-stuck .s2-tabs{padding:13px 16px;}
.s2-switch.is-stuck .s2-tab{min-height:0;padding:11px 16px;}
/* One notch down, which together with the tighter padding is what keeps all
   six chips visible at 1280 once the labels unwrap to a single line. */
.s2-switch.is-stuck .s2-tab-label{font-size:14px;}

/* =========================================================
   OVERVIEW — tagline + facts left, lede + description right
   ========================================================= */
.s2-overview{
  position:relative;overflow:hidden;
  background:var(--surface-page);
  padding:clamp(56px, 7vw, 112px) var(--pad-section);
  transition:background-color .56s ease;
}
.s2-overview::before{
  content:'';position:absolute;left:-10%;top:-30%;width:50vw;max-width:720px;aspect-ratio:1;
  background:radial-gradient(circle, var(--s2-overview-glow) 0%, transparent 65%);
  pointer-events:none;
}
.s2-overview-inner{
  position:relative;max-width:var(--max-width);margin:0 auto;
  display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
  gap:clamp(32px, 5vw, 96px);align-items:start;
}
.s2-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-600);
}
.s2-eyebrow::before{content:'';width:22px;height:2px;border-radius:2px;background:var(--blue-600);}
/* Not sticky: the left column used to carry a facts list tall enough to
   travel with the body copy. It is now just the eyebrow + title, so the
   sticky offset only pushed it out of alignment with the lede. */
.s2-overview-left{display:flex;flex-direction:column;gap:18px;}
.s2-overview-left h2{
  font-size:clamp(28px, 3.2vw, 44px);font-weight:700;line-height:1.1;letter-spacing:-.02em;
  color:var(--text-heading);text-wrap:balance;
}
.s2-overview-right{display:flex;flex-direction:column;gap:22px;padding-top:6px;}
.s2-lede{
  font-size:clamp(20px, 2vw, 27px);font-weight:600;line-height:1.35;letter-spacing:-.012em;
  color:var(--s2-lede);
}
.s2-body{font-size:clamp(16px, 1.35vw, 18.5px);line-height:1.7;color:var(--text-body);}
.s2-overview-right.is-swap > *{animation:s2FadeUp .55s var(--ease-premium) both;}
.s2-overview-right.is-swap > *:nth-child(2){animation-delay:90ms;}

/* =========================================================
   STACK — dark section: component cards → bus → SkillOS slab
   ========================================================= */
.s2-stack{
  position:relative;overflow:hidden;
  scroll-margin-top:calc(var(--header-h, 58px) + 72px);
  background:var(--navy-950);
  padding:clamp(64px, 7vw, 112px) var(--pad-section);
}
.s2-stack::before{
  content:'';position:absolute;inset:0;
  background-image:url('assets/bg-pattern-panel.png');background-size:220px 220px;
  opacity:.10;
  -webkit-mask-image:radial-gradient(90% 80% at 50% 30%, black 30%, transparent 100%);
  mask-image:radial-gradient(90% 80% at 50% 30%, black 30%, transparent 100%);
  pointer-events:none;
}
.s2-stack::after{
  content:'';position:absolute;left:50%;bottom:-20%;transform:translateX(-50%);
  width:80vw;max-width:1100px;aspect-ratio:2/1;
  background:radial-gradient(ellipse at 50% 100%, rgba(35,97,255,.28) 0%, transparent 65%);
  pointer-events:none;
}
.s2-stack-inner{position:relative;z-index:1;max-width:var(--max-width);margin:0 auto;display:flex;flex-direction:column;gap:clamp(36px, 4vw, 56px);}
.s2-stack-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.s2-stack-head .s2-eyebrow{color:var(--blue-tint);}
.s2-stack-head .s2-eyebrow::before{background:var(--blue-tint);}
.s2-stack-title{display:flex;flex-direction:column;gap:14px;}
.s2-stack-title h2{
  font-size:clamp(28px, 3.2vw, 44px);font-weight:700;line-height:1.1;letter-spacing:-.02em;color:#fff;
}
.s2-stack-title h2 b{color:var(--hero-spark, #9fc0ff);font-weight:700;}
.s2-stack-note{max-width:44ch;font-size:15.5px;line-height:1.6;color:var(--blue-tint);opacity:.85;}

.s2-stage{position:relative;display:flex;flex-direction:column;gap:clamp(96px, 10vw, 140px);}

.s2-chips{
  list-style:none;margin:0;padding:0;
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;gap:16px;justify-content:center;
}
.s2-chip{
  flex:1 1 200px;min-width:0;max-width:340px;
  position:relative;
  display:flex;flex-direction:column;gap:12px;
  padding:22px 22px 24px;border-radius:var(--s2-radius-lg);
  background:var(--s2-glass);
  border:1px solid var(--s2-glass-border);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 20px 40px -30px rgba(0,0,0,.8);
  opacity:0;transform:translateY(-18px) scale(.97);
  transition:opacity .55s var(--ease-premium), transform .55s var(--ease-premium),
             background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
  transition-delay:calc(var(--i, 0) * 90ms);
  cursor:default;
}
/* Gradient sheen on the top edge */
.s2-chip::before{
  content:'';position:absolute;left:14%;right:14%;top:-1px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--hero-spark-rgb, 159,192,255),.8), transparent);
  opacity:.6;transition:opacity .3s ease;
}
.s2-stage.is-assembled .s2-chip{opacity:1;transform:none;transition-delay:calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s, 0s;}
.s2-chip:hover,.s2-chip.is-hot{
  background:var(--s2-glass-hover);border-color:rgba(var(--hero-spark-rgb, 159,192,255),.55);
  box-shadow:0 24px 48px -28px rgba(0,0,0,.9), 0 0 32px -12px rgba(var(--hero-spark-rgb, 159,192,255),.6);
}
.s2-chip:hover::before{opacity:1;}
.s2-chip-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.s2-chip-idx{
  font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--hero-spark, #9fc0ff);
  font-variant-numeric:tabular-nums;
}
.s2-chip-port{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
}
.s2-chip-port::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--hero-spark, #9fc0ff);box-shadow:0 0 10px var(--hero-spark, #9fc0ff);}
.s2-chip-name{font-size:17px;font-weight:600;line-height:1.3;color:#fff;letter-spacing:-.005em;}
.s2-chip-desc{font-size:14px;line-height:1.55;color:var(--blue-tint);opacity:.85;}

/* Wires SVG spans the whole stage */
.s2-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible;}
.s2-wires .wire{
  fill:none;stroke:rgba(var(--hero-spark-rgb, 159,192,255),.42);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:1600;stroke-dashoffset:1600;
  transition:stroke-dashoffset .9s var(--ease-premium), stroke .3s ease, stroke-width .3s ease;
  transition-delay:calc(280ms + var(--i, 0) * 90ms);
}
.s2-stage.is-assembled .s2-wires .wire{stroke-dashoffset:0;}
.s2-wires .wire.is-hot{stroke:var(--hero-spark, #9fc0ff);stroke-width:2.4;transition-delay:0s;}
/* Travelling pulse on top of each wire */
.s2-wires .pulse{
  fill:none;stroke:var(--hero-spark, #9fc0ff);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:14 260;stroke-dashoffset:274;
  opacity:0;transition:opacity .4s ease;transition-delay:calc(1s + var(--i, 0) * 90ms);
  animation:s2Flow 3.2s linear infinite;animation-delay:calc(var(--i, 0) * .45s);
  filter:drop-shadow(0 0 4px var(--hero-spark, #9fc0ff));
}
.s2-stage.is-assembled .s2-wires .pulse{opacity:.9;}
@keyframes s2Flow{to{stroke-dashoffset:0;}}
.s2-wires .bus{
  fill:none;stroke:rgba(var(--hero-spark-rgb, 159,192,255),.5);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:2000;stroke-dashoffset:2000;
  transition:stroke-dashoffset 1s var(--ease-premium);transition-delay:.5s;
}
.s2-stage.is-assembled .s2-wires .bus{stroke-dashoffset:0;}
.s2-wires .node{fill:var(--hero-spark, #9fc0ff);opacity:0;transition:opacity .4s ease;transition-delay:calc(300ms + var(--i, 0) * 90ms);}
.s2-stage.is-assembled .s2-wires .node{opacity:1;}
.s2-wires .hub{fill:none;stroke:var(--hero-spark, #9fc0ff);stroke-width:2;opacity:0;transition:opacity .4s ease .9s;}
.s2-stage.is-assembled .s2-wires .hub{opacity:1;}
.s2-wires .hub-core{fill:var(--hero-spark, #9fc0ff);opacity:0;transition:opacity .4s ease .9s;}
.s2-stage.is-assembled .s2-wires .hub-core{opacity:1;}

/* Foundation slab */
.s2-foundation{
  position:relative;z-index:2;
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px, 3vw, 40px);align-items:center;
  padding:clamp(24px, 3vw, 40px) clamp(24px, 3.4vw, 48px);
  border-radius:var(--s2-radius-xl);
  border:1px solid rgba(var(--hero-spark-rgb, 159,192,255),.35);
  background:
    linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(135deg, var(--navy-900) 0%, var(--navy-950) 100%);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9), 0 0 60px -20px rgba(var(--hero-spark-rgb, 159,192,255),.5);
  overflow:hidden;
  opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease-premium) .4s, transform .7s var(--ease-premium) .4s, border-color .55s ease, box-shadow .55s ease;
}
.s2-foundation::before{
  content:'';position:absolute;inset:0;
  background-image:url('assets/bg-pattern-panel.png');background-size:160px 160px;opacity:.14;
  -webkit-mask-image:linear-gradient(90deg, black 20%, transparent 90%);
  mask-image:linear-gradient(90deg, black 20%, transparent 90%);
  pointer-events:none;
}
.s2-foundation::after{
  content:'';position:absolute;top:-40%;right:-10%;width:50%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, rgba(var(--hero-spark-rgb, 159,192,255),.28), transparent 65%);
  pointer-events:none;
}
.s2-stage.is-assembled .s2-foundation{opacity:1;transform:none;}
.s2-foundation-mark{
  position:relative;
  width:clamp(84px, 8vw, 112px);aspect-ratio:1;border-radius:24px;display:grid;place-items:center;
  background:linear-gradient(145deg, rgba(42,100,246,.95), rgba(13,28,64,.9));
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 20px 40px -20px rgba(35,97,255,.9), inset 0 1px 0 rgba(255,255,255,.25);
}
.s2-foundation-mark span{
  font-size:clamp(22px, 2.2vw, 30px);font-weight:800;letter-spacing:-.04em;color:#fff;
}
.s2-foundation-mark small{
  position:absolute;bottom:8px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7);
}
.s2-foundation-copy{position:relative;display:flex;flex-direction:column;gap:8px;}
.s2-foundation-label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--hero-spark, #9fc0ff);}
.s2-foundation-name{font-size:clamp(26px, 2.8vw, 36px);font-weight:700;color:#fff;line-height:1.1;letter-spacing:-.02em;}
.s2-foundation-desc{max-width:70ch;font-size:15.5px;line-height:1.6;color:var(--blue-tint);}

/* =========================================================
   USE CASES — count-aware editorial grid
   ========================================================= */
.s2-cases{
  background:var(--surface-muted);
  padding:clamp(64px, 7vw, 112px) var(--pad-section);
  transition:background-color .56s ease;
}
.s2-cases-inner{max-width:var(--max-width);margin:0 auto;display:flex;flex-direction:column;gap:clamp(32px, 4vw, 48px);}
.s2-cases-head{display:flex;flex-direction:column;gap:14px;max-width:760px;}
.s2-cases-head h2{
  font-size:clamp(28px, 3.2vw, 44px);font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--text-heading);
}
.s2-cases-head p{font-size:clamp(16px, 1.4vw, 18px);line-height:1.5;color:var(--text-muted);}

.s2-grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:20px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.s2-grid[data-count="3"]{grid-template-columns:repeat(3, minmax(0, 1fr));}

.s2-case{
  --pad:clamp(22px, 2.2vw, 30px);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  border-radius:var(--s2-radius-lg);
  background:var(--surface-card);
  border:1px solid var(--s2-card-border);
  opacity:0;transform:translateY(26px);
  transition:opacity var(--dur-item) var(--ease-premium) calc(var(--i, 0) * 110ms),
             transform var(--dur-item) var(--ease-premium) calc(var(--i, 0) * 110ms),
             box-shadow .35s ease 0s, border-color .35s ease 0s;
}
.s2-case.is-in{opacity:1;transform:none;}
.s2-case.is-in:hover{
  border-color:var(--s2-card-hover-border);
  box-shadow:0 30px 60px -30px var(--card-shadow);
  transform:translateY(-4px);
  transition-delay:0s;
}
/* Wide (horizontal) variant for 2 and 4 use cases */
.s2-grid:not([data-count="3"]) .s2-case{flex-direction:row;align-items:stretch;}
.s2-grid:not([data-count="3"]) .s2-case-figure{flex:0 0 36%;min-height:100%;border-right:1px solid var(--uc-band-border);border-bottom:0;}
.s2-case-figure{
  position:relative;overflow:hidden;
  flex:0 0 auto;height:170px;
  background:var(--s2-band);
  border-bottom:1px solid var(--uc-band-border);
  transition:background .56s ease;
}
.s2-case-figure::before{
  content:'';position:absolute;inset:0;
  background-image:url('assets/bg-pattern-panel.png');background-size:150px 150px;
  opacity:var(--uc-mesh-opacity);pointer-events:none;
}
.s2-case-figure::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(60% 70% at 50% 50%, rgba(255,255,255,.55), transparent 70%);
  opacity:.7;pointer-events:none;
}
.s2-case-figure .s2-case-wm{color:rgba(35,97,255,.14);}
.s2-case-figure img{
  position:relative;z-index:1;display:block;width:100%;height:100%;
  object-fit:contain;padding:14px 18px;box-sizing:border-box;
  transition:transform .6s var(--ease-premium);
}
.s2-case.is-in:hover .s2-case-figure img{transform:scale(1.045);}
.s2-case-body{
  position:relative;flex:1 1 auto;
  display:flex;flex-direction:column;gap:12px;
  padding:var(--pad);
}
.s2-case-num{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--blue-600);
}
.s2-case-num::before{content:'';width:18px;height:2px;border-radius:2px;background:var(--blue-600);}
.s2-case-wm{
  position:absolute;right:14px;top:8px;z-index:1;
  font-size:clamp(44px, 4.5vw, 60px);font-weight:800;line-height:1;letter-spacing:-.05em;
  color:var(--s2-num-wm);pointer-events:none;user-select:none;
}
.s2-case h3{
  font-size:clamp(18px, 1.6vw, 22px);font-weight:600;line-height:1.3;letter-spacing:-.01em;
  color:var(--text-heading);
}
.s2-case p{font-size:15.5px;line-height:1.62;color:var(--text-body);}

/* =========================================================
   CTA — floating panel with a "next solution" card
   ========================================================= */
.s2-cta{
  background:var(--surface-page);
  padding:0 var(--pad-section) clamp(72px, 8vw, 128px);
  transition:background-color .56s ease;
}
.s2-cta-panel{
  position:relative;overflow:hidden;
  max-width:var(--max-width);margin:0 auto;
  border-radius:var(--s2-radius-xl);
  background:linear-gradient(120deg, var(--navy-900) 0%, var(--navy-950) 60%, #0b1a3f 100%);
  border:1px solid var(--border-dark-subtle);
  box-shadow:0 60px 120px -60px rgba(3,25,78,.6);
  display:grid;grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);
  gap:clamp(24px, 4vw, 64px);align-items:center;
  padding:clamp(32px, 4.5vw, 64px);
}
.s2-cta-panel::before{
  content:'';position:absolute;inset:0;
  background-image:url('assets/bg-pattern-panel.png');background-size:200px 200px;opacity:.12;
  -webkit-mask-image:radial-gradient(80% 100% at 20% 50%, black 20%, transparent 100%);
  mask-image:radial-gradient(80% 100% at 20% 50%, black 20%, transparent 100%);
  pointer-events:none;
}
.s2-cta-panel::after{
  content:'';position:absolute;right:-10%;top:-60%;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, rgba(35,97,255,.35), transparent 65%);pointer-events:none;
}
.s2-cta-copy{position:relative;display:flex;flex-direction:column;gap:18px;}
.s2-cta-copy h2{font-size:clamp(28px, 3vw, 42px);font-weight:700;color:#fff;line-height:1.1;letter-spacing:-.02em;text-wrap:balance;}
.s2-cta-copy p{font-size:17px;line-height:1.55;color:var(--blue-tint);max-width:48ch;}
.s2-cta-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;}

.s2-next{
  position:relative;z-index:1;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding:22px 24px;border-radius:var(--s2-radius-lg);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;text-align:left;font-family:inherit;cursor:pointer;width:100%;
  transition:background-color .3s ease, border-color .3s ease, transform .4s var(--ease-premium), box-shadow .4s ease;
}
.s2-next:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);transform:translateY(-3px);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);}
.s2-next:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px;}
.s2-next-icon{
  position:relative;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  background:rgba(42,100,246,.25);border:1px solid rgba(255,255,255,.14);
}
.s2-next-icon > span{position:relative;width:34px;height:34px;filter:brightness(1.35);}
.s2-next-copy{display:flex;flex-direction:column;gap:4px;min-width:0;}
.s2-next-label{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-tint);opacity:.85;}
.s2-next-name{font-size:18px;font-weight:700;line-height:1.25;}
.s2-next-tag{font-size:14px;color:var(--blue-tint);line-height:1.4;}
.s2-next-arrow{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue-500);color:#fff;box-shadow:0 0 18px rgba(35,97,255,.6);
  transition:transform .4s var(--ease-premium);
}
.s2-next-arrow svg{width:20px;height:20px;}
.s2-next:hover .s2-next-arrow{transform:translateX(4px);}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .s2-grid:not([data-count="3"]) .s2-case-figure{flex-basis:34%;}
}
@media (max-width:1080px){
  .s2-hero .hero-inner{grid-template-columns:1fr;gap:40px;}
  .s2-hero-copy{max-width:720px;}
  .s2-orbit-wrap{min-height:0;order:-1;}
  .s2-orbit{width:min(100%, 420px);}
  .s2-hero-glow{right:auto;left:50%;transform:translateX(-50%);top:-10%;width:90vw;}
  .s2-overview-inner{grid-template-columns:1fr;gap:36px;}
  .s2-wires{display:none;}
  .s2-stage{gap:32px;}
  .s2-chip{flex:1 1 calc(50% - 8px);max-width:none;}
  .s2-grid[data-count="3"]{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .s2-cta-panel{grid-template-columns:1fr;}

  /* Mobile rail for the use cases (mirrors style.css's card rails). */
  .s2-grid[data-rail]{
    display:flex;flex-wrap:nowrap;align-items:stretch;
    max-width:none;
    margin-inline:calc(var(--pad-section) * -1);
    padding-inline:var(--pad-section);
    scroll-padding-inline:var(--pad-section);
    padding-block:10px 20px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .s2-grid[data-rail]::-webkit-scrollbar{display:none;}
  .s2-grid[data-rail] > *{flex:0 0 min(85%, 420px);scroll-snap-align:start;}
  .s2-grid:not([data-count="3"]) .s2-case{flex-direction:column;}
  /* min-height:0 is load-bearing. The wide desktop variant above sets
     min-height:100% so the figure fills the card's full height beside the
     body. Here the card is a COLUMN, and the rail's align-items:stretch
     gives it a definite height — so a leftover min-height:100% resolves
     against that and the 160px figure grows to swallow the whole card,
     pushing .s2-case-body out through overflow:hidden. That is the
     "illustration only, no text" bug on phones. */
  .s2-grid:not([data-count="3"]) .s2-case-figure{flex:0 0 auto;height:160px;min-height:0;border-right:0;border-bottom:1px solid var(--uc-band-border);}
}
@media (max-width:860px){
  .s2-switch{padding-left:16px;padding-right:16px;}
  .s2-tabs{padding:12px;}
  .s2-tab{min-height:44px;padding:10px 14px;}
  .s2-tab-label{font-size:14px;}
  .s2-orbit-chip-inner{font-size:11px;padding:6px 10px;}
  .s2-stack-head{flex-direction:column;align-items:flex-start;}
  .s2-foundation{grid-template-columns:1fr;}
  .s2-hero .hero-inner{min-height:0;padding-bottom:56px;}
}
@media (max-width:620px){
  .s2-chip{flex-basis:100%;}
  /* Phones: the orbit keeps spinning, but it has to be re-proportioned to
     do it. A single-line label is ~190px wide, and a chip passing 3
     o'clock reaches (ring radius + half its own width) from the centre —
     at any radius worth having that put labels off a 375px screen, which
     is why this used to collapse into a static wrapped row. Two changes
     make the real orbit fit: the labels wrap inside a narrow fixed-width
     box, and all chips move to ONE ring at 60% instead of the desktop's
     alternating 50%/35% pair, with the emblem shrinking to clear it.

     Unlike desktop, this block is driven by the RING RADIUS, with the
     emblem sized from it — because the radius is what both constraints
     act on and what the composition reads off.

     1. CHIP WIDTH 120px. 112px is the narrowest that keeps the two worst
        names ("Gap & Pathway Analyzer", "Smart Matching Engine") to two
        lines; 120 leaves headroom for a longer one.
     2. RADIUS. The sweep peaks at `radius + chip/2` and must stay inside
        `50vw - 8px`, so the ceiling is `50vw - 68px`. It deliberately
        sits BELOW that ceiling (44vw - 60px), because a ring pushed to
        the limit clears the emblem so widely that the labels stop reading
        as part of the illustration and just float beside it.
     3. EMBLEM = radius / 0.55, i.e. the chips are centred just outside
        the outer ring and overlap it — the same relationship the desktop
        orbit has, and what makes them look attached rather than adrift.
     4. CORE 28%, down from desktop's 33%. A chip is an upright RECTANGLE
        riding a circle, so its nearest corner comes ~3px closer to the
        centre than its inner edge does; at this radius the core has to
        give up 5 points for that corner to clear its halo. */
  .s2-orbit-wrap{
    --s2-ring-r:clamp(89px, 44vw - 60px, 205px);
    --s2-orbit-w:calc(var(--s2-ring-r) / 0.55);
    --s2-ring-out:55%;--s2-ring-in:55%;
    overflow:visible;
    /* Chips sweep above and below the emblem box and into the page
       gutter; reserve exactly that overhang (radius + half a 37px chip
       - W/2). Sized for the 2-line pill every current component name fits
       in — a longer name added later would draw a third line into the
       hero's own padding rather than being clipped, since nothing here
       hides overflow. */
    padding-block:calc(var(--s2-ring-r) + 18.5px - var(--s2-orbit-w) / 2);
  }
  .s2-orbit{width:var(--s2-orbit-w);}
  .s2-orbit-disc{width:100%;}
  .s2-core{
    width:28%;
    /* The core's 10px halo ring is the outermost thing a chip can hit,
       and at 320px there is barely any clearance to spend. It carries 6%
       alpha, so halving it costs nothing visible and buys 5px. */
    box-shadow:
      0 0 0 5px rgba(var(--hero-spark-rgb, 159,192,255),.06),
      0 0 48px rgba(var(--hero-spark-rgb, 159,192,255),.35),
      inset 0 0 24px rgba(var(--hero-spark-rgb, 159,192,255),.15);
  }
  .s2-orbit-chip-inner{
    font-size:10px;padding:5px 9px;gap:5px;
    white-space:normal;text-align:left;
    width:120px;
    /* Two lines' worth of height on every chip, short names included, so
       the ring reads as one set of pills rather than a ragged mix. */
    min-height:37px;
    box-sizing:border-box;line-height:1.25;
  }
  .s2-orbit-chip-inner::before{width:6px;height:6px;}
  .s2-cta-actions{width:100%;flex-direction:column;}
  .s2-cta-actions .btn{width:100%;}
  .s2-next{grid-template-columns:auto 1fr;}
  .s2-next-arrow{display:none;}
}

@media (prefers-reduced-motion: reduce){
  .s2-orbit-ring,.s2-orbit-chip-inner,.s2-ring--3::before{animation:none;}
  .s2-orbit-chip-inner{opacity:1;transition:none;}
  .s2-chip,.s2-foundation,.s2-case{opacity:1;transform:none;transition:none;}
  .s2-wires .wire,.s2-wires .bus{stroke-dashoffset:0;transition:none;}
  .s2-wires .pulse{animation:none;opacity:0;}
  .s2-wires .node,.s2-wires .hub,.s2-wires .hub-core{opacity:1;transition:none;}
  .s2-hero-copy.is-swap > *,.s2-overview-right.is-swap > *,.s2-core.is-swap .s2-core-icon{animation:none;}
  .s2-switch,.s2-tabs,.s2-tab,.s2-tab-label{transition:none;}
}