/* ============================================================
   Trumatics — dark premium theme
   Reference design language: vectrfl.com (industrial minimalism)
   ============================================================ */

:root {
  --bg: #16181c;            /* page background — dark grey, not black */
  --bg-raised: #1c1f24;     /* raised surfaces / alt sections */
  --bg-card: #1e2127;       /* cards */
  --border: #2b2f36;
  --border-strong: #3a3f48;
  --text: #f2f4f6;
  --text-dim: #9aa1ab;
  --accent: #00aeef;        /* brand blue sampled from logo */
  --accent-soft: rgba(0, 174, 239, 0.12);
  --font-display: "Outfit", sans-serif;
  --font-body: "Outfit", sans-serif;
  --font-serif: "Fraunces", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --container: 1180px;
  --nav-h: 72px;
  --radius: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);     /* entrances, hovers */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* loops, pulses */
  --dur-1: 0.2s;    /* hover / colour */
  --dur-2: 0.55s;   /* reveal */
  --dur-3: 0.9s;    /* draw / fill */
  --dur-loop: 2.4s; /* ambient pulse */

  /* syntax / status token colours */
  --c-com: #6b7585;
  --c-ok: #5fd6a0;
  --c-key: #38bdf8;
  --c-str: #f5c451;
  --c-fn: #a78bfa;
  --c-arg: #9aa1ab;
  --c-num: #fb9a5b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: #fff; }

.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 200;
  background: var(--accent);
  color: #08131a;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 10px 18px;
  border-radius: 8px;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 12px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

h1 { font-size: clamp(3rem, 7vw, 5.6rem); }
h2 { font-size: clamp(2.3rem, 5vw, 3.9rem); margin-bottom: 1.1rem; }
h3 { font-size: 1.4rem; letter-spacing: -0.02em; line-height: 1.15; }

p { color: var(--text-dim); }

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

.container-narrow { max-width: 820px; }

.section { padding: 144px 0; }

.section-sub {
  max-width: 560px;
  margin-top: 0.5rem;
  font-size: 1.05rem;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}

.accent { color: var(--accent); }

/* all italic text uses Fraunces */
em, i, cite, var, address { font-family: var(--font-serif); font-style: italic; }

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s, color 0.25s;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--accent); color: #08222e; }
.btn-primary:hover { background: #2cc0ff; }

.btn-ghost { border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------- page hero (sub-pages) ---------------- */
.page-hero {
  position: relative;
  padding: calc(var(--nav-h) + 88px) 0 64px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
}
.page-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-top: 8px;
}
.page-hero .page-hero-sub {
  max-width: 660px;
  margin-top: 1.2rem;
  font-size: 1.12rem;
  color: var(--text-dim);
}

.cases-cta { margin-top: 44px; text-align: center; }

/* ---------------- section accents (site-wide rhythm + glows) ---------------- */
/* gentle alternating background so sections don't read as one dark slab */
main > .section:nth-of-type(even):not(.process):not(.cta) { background: var(--bg-raised); }

/* soft rotating corner glow — different hue/side per section */
/* sticky-backdrop sections (.has-circuit/.has-flow) are excluded: they must
   not clip (overflow:hidden breaks their sticky bg) and supply their own
   ambient interest, so they skip the section glow ::before too */
main > .section:not(.process):not(.has-circuit):not(.has-flow),
.page-hero { position: relative; overflow: hidden; }
main > .section:not(.process):not(.has-circuit):not(.has-flow) > .container,
.page-hero > .container { position: relative; z-index: 1; }

main > .section:not(.process):not(.has-circuit):not(.has-flow)::before,
.page-hero::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  top: -200px;
  right: -150px;
  background: radial-gradient(circle, var(--sec-glow, rgba(0, 174, 239, 0.12)) 0%, transparent 68%);
}
main > .section:nth-of-type(4n+1)::before { --sec-glow: rgba(0, 174, 239, 0.07); }
main > .section:nth-of-type(4n+2)::before { --sec-glow: rgba(0, 174, 239, 0.05); right: auto; left: -150px; }
main > .section:nth-of-type(4n+3)::before { --sec-glow: rgba(0, 174, 239, 0.06); }
main > .section:nth-of-type(4n)::before   { --sec-glow: rgba(0, 174, 239, 0.05); right: auto; left: -150px; }
.page-hero::before { --sec-glow: rgba(0, 174, 239, 0.08); }

/* aurora glow backdrop behind cards / CTA (blurred gradient shapes) */

   /* replace the single corner glow */

/* soft aurora glow behind each individual card */

/* distinct glow per card family (so it doesn't read as repetition) */
/* case studies — teal + amber (outcomes) */
.case-card {
  box-shadow:
    -14px -6px 48px -22px rgba(33, 200, 183, 0.32),
    16px 18px 48px -22px rgba(245, 165, 36, 0.24);
}
.case-card:hover {
  box-shadow:
    -16px -8px 62px -18px rgba(33, 200, 183, 0.46),
    20px 22px 62px -18px rgba(245, 165, 36, 0.34);
}
/* team — single cool cyan, top-lit */
.team-card { box-shadow: 0 -10px 46px -24px rgba(58, 214, 255, 0.30), 0 16px 40px -26px rgba(58, 214, 255, 0.18); }
.team-card:hover { box-shadow: 0 -12px 58px -20px rgba(58, 214, 255, 0.46), 0 18px 50px -22px rgba(58, 214, 255, 0.26); }
/* testimonials — warm amber + pink */
.quote-card {
  box-shadow:
    -12px 14px 48px -22px rgba(245, 165, 36, 0.24),
    14px 12px 48px -22px rgba(255, 111, 174, 0.20);
}
/* salesforce "proven" — monochrome brand blue */

.btn-sm { padding: 9px 20px; font-size: 0.85rem; }

/* ---------------- nav ---------------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  background: rgba(22, 24, 28, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}

.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { display: inline-flex; align-items: center; gap: 12px; }

.brand-mark { width: 34px; height: auto; }

.brand-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.30em;
  color: var(--text);
  transform: translateY(1px);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 500;
}

.nav-links a:not(.btn) {
  color: var(--text-dim);
  transition: color 0.2s;
}

.nav-links a:not(.btn):hover { color: var(--text); }

/* services dropdown */
.nav-dropdown { position: relative; }
.nav-dd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.2s;
}
.nav-dd-toggle:hover { color: var(--text); }
.nav-dd-toggle svg { transition: transform 0.25s; }
.nav-dropdown:hover .nav-dd-toggle svg { transform: rotate(180deg); }
.nav-dd-menu {
  position: absolute;
  top: 100%;
  left: -12px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  z-index: 60;
}
.nav-dropdown:hover .nav-dd-menu,
.nav-dropdown:focus-within .nav-dd-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dd-menu a {
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.nav-dd-menu a:hover { background: var(--accent-soft); color: var(--accent); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 40px; height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.3s;
}

.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* ---------------- hero ---------------- */

/* Kudos-style calm hero: oversized type + whitespace + one soft glow */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: calc(var(--nav-h) + 56px) 0 96px;
  background: var(--bg);
}

.hero h1 { font-size: clamp(2rem, 8vw, 5.8rem); }

/* typewriter: each line reserves its full width up front and types into it via
   a single growing text node (no reflow of prior characters = no flicker). The
   caret is inline right after the typed text and blinks only on the active line
   (and the final line once finished). */
.typeline { display: inline-block; white-space: nowrap; vertical-align: bottom; }
.tw-caret {
  display: none;
  width: 0.055em;
  height: 0.82em;
  margin-left: 0.04em;
  background: currentColor;
  vertical-align: -0.06em;
}
.typeline.tw-typing .tw-caret {
  display: inline-block;
  animation: mBlink 1s step-end infinite;
}
@media (prefers-reduced-motion: reduce) {
  .typeline.tw-typing .tw-caret { animation: none; }
}

/* moving "ruler" scales down both edges of the hero */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(to bottom, var(--border-strong) 0, var(--border-strong) 1.5px, transparent 1.5px),
    linear-gradient(to bottom, var(--text-dim) 0, var(--text-dim) 2px, transparent 2px);
  background-size: 10px 14px, 18px 70px;   /* minor ticks / major ticks */
  background-repeat: repeat-y, repeat-y;
}
.hero::before {
  left: max(0px, calc((100% - var(--container)) / 2));
  border-right: 1px solid var(--border);
  background-position-x: right;
  animation: rulerDown 14s linear infinite;   /* slow drift — the hero content leads */
}
.hero::after {
  right: max(0px, calc((100% - var(--container)) / 2));
  border-left: 1px solid var(--border);
  background-position-x: left;
  animation: rulerUp 14s linear infinite;
}
@keyframes rulerDown { to { background-position-y: 70px; } }
@keyframes rulerUp { to { background-position-y: -70px; } }

/* circuit-board section background: routed traces draw in, colored terminals, drifting */
/* section backdrops: a small family of decorative SVG scenes (circuit,
   data-flow, contour). All share the same z-index plumbing + readability
   scrim; only the motif differs. Use sparingly — 1-2 per page. */
.has-circuit, .has-flow, .has-contour { position: relative; }
/* .has-circuit, .has-flow and .has-contour all omit overflow:hidden so their
   backdrop can be position:sticky (stays viewport-scale while the tall
   section scrolls, instead of being forced to stretch — and zoom, per
   preserveAspectRatio="slice" — to the section's full, much-taller-than-
   viewport aspect ratio); each *-bg layer clips its own SVG. */
.has-circuit > .container, .has-flow > .container, .has-contour > .container { position: relative; z-index: 1; }
/* keep the intro line from dwarfing the cards that are the real content
   (decoupled from the backdrop classes — #what keeps this even with no bg) */
.has-circuit h2, .has-flow h2, #what h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.flow-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.flow-bg .fl { position: absolute; top: -4%; left: -2%; width: 104%; height: 108%; display: block; }
/* the Delivery Engine is a tall pinned section (4 stacked steps). Make the
   backdrop sticky so one viewport-sized flow graph stays behind the content
   through the whole scroll, instead of stretching over the full height. The
   negative margin cancels the layout space the sticky box would occupy. */
.process .flow-bg {
  position: sticky;
  top: 0;
  bottom: auto;
  height: 100vh;
  margin-bottom: -100vh;
}
/* the sticky backdrop's box can overhang into the next section on release;
   the following section is lifted above it so it paints over the overhang.
   The transparent section after .process also needs an explicit opaque fill;
   the section after .has-circuit already has a raised (opaque) background. */
.process + .section, .has-circuit + .section, .has-contour + .section { position: relative; z-index: 1; }
.process + .section { background: var(--bg); }
.fl-scene { transform-box: view-box; transform-origin: center; animation: ctDrift 52s ease-in-out infinite alternate; }

/* directed links */
.fl-link {
  stroke: rgba(226,235,245,0.14);
  stroke-width: 1;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: mDrawIn 1.6s var(--ease, ease) forwards;
  animation-delay: var(--d, 0s);
}
/* traveling packet on select links */
.fl-pulse {
  stroke: #4fd0ff;
  stroke-width: 1.6;
  stroke-linecap: round;
  fill: none;
  filter: drop-shadow(0 0 2px rgba(79,208,255,0.7));
  stroke-dasharray: 0.14 0.86;
  stroke-dashoffset: 1;
  animation: mDrawIn 3.6s linear infinite;
  animation-delay: var(--d, 2s);
}
/* nodes */
.fl-node { fill: rgba(22,24,28,0.85); stroke: rgba(79,208,255,0.35); stroke-width: 1; transform-box: fill-box; transform-origin: center; opacity: 0; --pop-from: 0.4; animation: mPop 0.6s var(--ease, ease) forwards; animation-delay: var(--d, 1.4s); }
.fl-hub { stroke: #4fd0ff; filter: drop-shadow(0 0 3px rgba(79,208,255,0.45)); }
.fl-core { fill: #4fd0ff; transform-box: fill-box; transform-origin: center; opacity: 0; filter: drop-shadow(0 0 2px rgba(79,208,255,0.6)); --pop-from: 0.4; animation: mPop 0.6s var(--ease, ease) forwards; animation-delay: var(--d, 1.5s); }

/* topographic contour backdrop */
.contour-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* sticky, viewport-scale backdrop (same technique as the circuit/flow
   backdrops) so the contour stays in view — at a normal viewport aspect
   ratio — while the tall capabilities section scrolls, instead of being
   stretched (and zoomed, via preserveAspectRatio="slice") to the section's
   full, much-taller-than-wide height */
.has-contour .contour-bg {
  position: sticky;
  top: 0;
  bottom: auto;
  height: 100vh;
  margin-bottom: -100vh;
}
.contour-bg .cn { position: absolute; top: -6%; left: -3%; width: 106%; height: 112%; display: block; }
.cn-scene { transform-box: view-box; transform-origin: center; animation: cnBreathe 60s ease-in-out infinite alternate; }
@keyframes cnBreathe {
  from { transform: translate(-10px, -6px) scale(1.04); }
  to   { transform: translate(10px, 8px) scale(1.08); }
}
.cn-line {
  stroke: rgba(79,208,255,0.18);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: mDrawIn 2s var(--ease, ease) forwards;
  animation-delay: var(--d, 0s);
}
.cn-line.cn-dim { stroke: rgba(226,235,245,0.07); }
.circuit-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* sticky, viewport-scale backdrop (same technique as the Delivery Engine flow)
   so the circuit stays in view while the tall capabilities section scrolls,
   instead of stretching — and zooming — over the whole section height */
.has-circuit .circuit-bg {
  position: sticky;
  top: 0;
  bottom: auto;
  height: 100vh;
  margin-bottom: -100vh;
}
.circuit-bg .ct { position: absolute; top: -4%; left: -2%; width: 104%; height: 108%; display: block; }
.ct-scene { transform-box: view-box; transform-origin: center; animation: ctDrift 46s ease-in-out infinite alternate; }
@keyframes ctDrift {
  from { transform: translate(-14px, -8px) scale(1.05); }
  to   { transform: translate(14px, 10px) scale(1.05); }
}

/* traces */
.ct-trace {
  stroke: rgba(226,235,245,0.16);
  stroke-width: 1;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: mDrawIn 1.7s var(--ease, ease) forwards;
  animation-delay: var(--d, 0s);
}
.ct-trace.ct-dim { stroke: rgba(226,235,245,0.08); }
/* traveling data pulse on select traces */
.ct-pulse {
  stroke: #4fd0ff;
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
  filter: drop-shadow(0 0 2px rgba(79,208,255,0.7));
  stroke-dasharray: 0.06 0.94;
  stroke-dashoffset: 1;
  animation: mDrawIn 4.4s linear infinite;
  animation-delay: var(--d, 2s);
}
/* terminals */
.ct-dot, .ct-ring, .ct-seed { transform-box: fill-box; transform-origin: center; opacity: 0; --pop-from: 0.4; animation: mPop 0.6s var(--ease, ease) forwards; animation-delay: var(--d, 1.4s); }
.ct-ring { fill: none; stroke-width: 1; }
.ct-c-cyan.ct-dot,  .ct-c-cyan.ct-seed  { fill: #00aeef; filter: drop-shadow(0 0 2px rgba(0,174,239,0.7)); }
.ct-c-cyan.ct-ring  { stroke: #00aeef; filter: drop-shadow(0 0 2px rgba(0,174,239,0.55)); }
.ct-c-cyanl.ct-dot, .ct-c-cyanl.ct-seed { fill: #4fd0ff; filter: drop-shadow(0 0 2px rgba(79,208,255,0.7)); }
.ct-c-cyanl.ct-ring { stroke: #4fd0ff; filter: drop-shadow(0 0 2px rgba(79,208,255,0.55)); }
.ct-c-green.ct-dot, .ct-c-green.ct-seed  { fill: #2ec07a; filter: drop-shadow(0 0 2px rgba(46,192,122,0.6)); }
.ct-c-green.ct-ring { stroke: #2ec07a; filter: drop-shadow(0 0 2px rgba(46,192,122,0.5)); }
.ct-c-orange.ct-dot,.ct-c-orange.ct-seed { fill: #e8552e; filter: drop-shadow(0 0 2px rgba(232,85,46,0.6)); }
.ct-c-orange.ct-ring{ stroke: #e8552e; filter: drop-shadow(0 0 2px rgba(232,85,46,0.5)); }
.ct-c-white.ct-dot, .ct-c-white.ct-seed  { fill: #e6edf4; }
.ct-c-white.ct-ring { stroke: #e6edf4; }

/* via / junction markers + labels */
.ct-via { fill: none; stroke: #4fd0ff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(79,208,255,0.5)); opacity: 0; animation: mFadeIn 0.8s ease forwards; animation-delay: 2.5s; }
.ct-label { fill: rgba(226,235,245,0.22); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; opacity: 0; animation: mFadeIn 1s ease forwards; animation-delay: 2.6s; }
/* readability scrim: uniform dim + vignette + top/bottom fade so cards & heading stay legible */
.circuit-scrim {
  position: absolute;
  inset: 0;
  /* dim + vignette + fine dot texture. The frosty softening is done by
     blurring the SVG backdrops directly (see below) rather than with
     backdrop-filter, which breaks inside position:sticky layers. */
  background:
    linear-gradient(0deg, var(--bg) 0%, rgba(22,24,28,0.6) 14%, rgba(22,24,28,0.6) 86%, var(--bg) 100%),
    radial-gradient(130% 96% at 50% 46%, transparent 38%, rgba(22,24,28,0.62) 100%),
    radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1.5px);
  background-size: auto, auto, 4px 4px;
}
/* soften the decorative backdrops so their moving lines/nodes stop competing
   with the text scrolling over them (frosty look, applied to the SVG itself
   so it survives position:sticky) */
/* crisp vector lines, kept quiet by low stroke opacity (a CSS blur here made
   them read as low-resolution bitmaps on large screens) */
.ct, .fl, .cn { shape-rendering: geometricPrecision; }
@media (max-width: 760px) {
  .circuit-scrim { background:
    linear-gradient(0deg, var(--bg) 0%, rgba(22,24,28,0.7) 16%, rgba(22,24,28,0.7) 84%, var(--bg) 100%),
    radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1.5px); background-size: auto, 4px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-scene, .fl-scene, .cn-scene { animation: none; transform: scale(1.05); }
  .ct-trace, .fl-link, .cn-line { stroke-dashoffset: 0; animation: none; }
  .ct-pulse, .fl-pulse { display: none; }
  .ct-dot, .ct-ring, .ct-seed, .ct-via, .ct-label { opacity: 1; animation: none; }
  .fl-node, .fl-core { opacity: 1; animation: none; }
}

@media (max-width: 760px) {
  .hero::before, .hero::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
}

.hero-watermark { display: none; }

.hero-inner { position: relative; z-index: 2; max-width: 1000px; }

.hero-sub {
  max-width: 600px;
  margin-top: 1.8rem;
  font-size: 1.15rem;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  margin-top: 2.8rem;
  flex-wrap: wrap;
}

/* ---- generated topographic hero backdrop (js/main.js → buildContour) ----
   Replaces the old photo textures: the same contour motif as the AI page,
   drawn per page type, with a left-weighted scrim so copy stays legible. */
.hero-cn, .page-cn { --scrim: 22, 24, 28; }
.page-cn { --scrim: 28, 31, 36; }            /* page-hero sits on --bg-raised */
/* cap to the heading area: some page-heroes (About) also hold tall content,
   and a full-height slice would zoom the lines in behind it */
.page-hero .page-cn { bottom: auto; height: min(100%, 640px); }
.cn-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent 70%, rgb(var(--scrim)) 100%),
    linear-gradient(to right, rgba(var(--scrim), 0.94) 0%, rgba(var(--scrim), 0.72) 38%, rgba(var(--scrim), 0.18) 72%, rgba(var(--scrim), 0.05) 100%),
    radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1.5px);
  background-size: auto, auto, 4px 4px;
}
.cn-line.cn-hot { stroke: rgba(79,208,255,0.42); }
@media (max-width: 760px) {
  .cn-scrim { background:
    linear-gradient(to bottom, rgba(var(--scrim), 0.55) 0%, rgba(var(--scrim), 0.8) 60%, rgb(var(--scrim)) 100%),
    radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1.5px); background-size: auto, 4px 4px; }
}

/* ---- hero split: copy left, live Delivery Engine card right ---- */
.hero-inner.hero-split { max-width: none; }
.hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
  gap: 40px 64px;
  align-items: start;
  margin-top: 1.8rem;
}
.hero-row .hero-sub { margin-top: 0; }
.hero-row .hero-ctas { margin-top: 2.2rem; }

.engine-card {
  display: block;
  position: relative;
  padding: 16px 20px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: rgba(22, 24, 28, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--text);
  transition: border-color 0.3s var(--ease), opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.engine-card:hover { border-color: rgba(0, 174, 239, 0.55); }
.ec-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.ec-live { display: inline-flex; align-items: center; gap: 8px; }
.ec-live i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-ok);
  box-shadow: 0 0 0 0 rgba(95, 214, 160, 0.5);
  animation: mPing 2s ease-out infinite;
}
.ec-count { transition: color 0.3s; }
.engine-card.is-complete .ec-count { color: var(--c-ok); }

.ec-steps { list-style: none; position: relative; margin: 6px 0 4px; }
.ec-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
}
.ec-dot {
  width: 11px; height: 11px;
  margin-left: 3px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-card);
  transition: border-color 0.4s, background 0.4s, box-shadow 0.4s;
}
.ec-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ec-name { font-size: 0.8rem; color: var(--text-dim); transition: color 0.4s; }
.ec-desc { font-size: 0.84rem; line-height: 1.35; color: var(--text-dim); opacity: 0.75; transition: opacity 0.4s, color 0.4s; }
.ec-state {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s;
}
.ec-step.is-done .ec-dot { border-color: var(--c-ok); background: var(--c-ok); }
.ec-step.is-done .ec-name { color: var(--text); }
.ec-step.is-done .ec-state { opacity: 1; color: var(--c-ok); }
.ec-step.is-active .ec-dot {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 12px rgba(0, 174, 239, 0.7);
}
.ec-step.is-active .ec-name { color: var(--accent); }
.ec-step.is-active .ec-desc { color: var(--text); opacity: 1; }
.ec-step.is-active .ec-state { opacity: 1; color: var(--accent); background: var(--accent-soft); }

/* vertical rail behind the dots; the fill grows to the active step and its
   glowing head is the travelling "packet" */
.ec-rail {
  position: absolute;
  z-index: 0;
  left: 8px;
  top: var(--rail-top, 0px);
  height: var(--rail-h, 0px);
  width: 1.5px;
  background: var(--border-strong);
}
.ec-fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: var(--fill, 0px);
  background: linear-gradient(to bottom, var(--c-ok), var(--accent));
  transition: height 0.9s var(--ease);
}
.ec-fill::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -3px;
  width: 7px; height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: #4fd0ff;
  box-shadow: 0 0 10px 2px rgba(79, 208, 255, 0.8);
  opacity: var(--packet, 0);
  transition: opacity 0.3s;
}
.ec-foot {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.74rem;
  color: var(--accent);
}
.ec-foot span { transition: transform 0.3s var(--ease); }
.engine-card:hover .ec-foot span { transform: translateX(4px); }

@media (max-width: 980px) {
  .hero-row { grid-template-columns: minmax(0, 1fr); }
  .engine-card { max-width: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .ec-live i { animation: none; }
  .ec-fill, .ec-dot, .ec-name, .ec-desc, .ec-state { transition: none; }
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.2s;
}

.scroll-hint:hover { color: var(--text); }

.scroll-hint svg { animation: bob 2s infinite var(--ease); }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ---------------- proof strip (post-hero) ---------------- */

.proof {
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
  padding: 40px 0;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}

/* thin divider between columns */
.kpi:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 44px;
  background: var(--border-strong);
}

.kpi-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.7rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--accent);
}

/* the offices value is words, not a numeral — size it down to balance */
.kpi-num-text { font-size: 1.7rem; }

/* the animated counter inherits the kpi-num look (overrides .stats .stat-num) */
.kpi-num .stat-num {
  display: inline;
  font: inherit;
  color: inherit;
}

.kpi-label {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
}

@media (max-width: 760px) {
  .proof { padding: 32px 0; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .kpi::after { display: none; }
  .kpi-num { font-size: 2.2rem; }
  .kpi-num-text { font-size: 1.45rem; }
}

/* client logo strip under the KPIs: light single-colour silhouettes
   (assets/clients/mono, generated from the colour logos) so 19 brands read
   as one calm line of proof; each brightens on hover */
.proof-logos {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.proof-logos-label {
  flex: 0 0 auto;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.logo-strip {
  flex: 1 1 auto;
  min-width: 0;
  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);
}
.logo-strip-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  padding-right: 56px;   /* matches gap so the -50% loop seam is invisible */
  animation: marquee 60s linear infinite;
}
.logo-strip:hover .logo-strip-track { animation-play-state: paused; }
.logo-strip-track img {
  display: block;
  height: 30px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  opacity: 0.5;
  transition: opacity 0.3s;
}
.logo-strip-track img:hover { opacity: 1; }
/* square / emblem marks need extra height to match the wordmarks visually */
.logo-strip-track img[src*="botvfx"],
.logo-strip-track img[src*="nikaa"],
.logo-strip-track img[src*="hotel-particulier"],
.logo-strip-track img[src*="tyche"],
.logo-strip-track img[src*="cricclubs"] { height: 40px; }
@media (max-width: 760px) {
  .proof-logos { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 28px; padding-top: 24px; }
  .proof-logos-label { text-align: center; }
  .logo-strip-track { gap: 40px; padding-right: 40px; }
  .logo-strip-track img { height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-strip-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; row-gap: 20px; }
  .logo-strip-track img[aria-hidden="true"] { display: none; }
  .logo-strip { -webkit-mask-image: none; mask-image: none; }
}

/* ---------------- stats ---------------- */

.stats {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
  padding: 56px 0;
}

.stat { text-align: center; }

.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

/* ---------------- service cards ---------------- */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s var(--ease);
}

.card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

/* illustration banner */

.card h3 { margin-bottom: 10px; }

.card p { font-size: 0.98rem; }

/* ---------------- salesforce ---------------- */

.sf-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border: 1px solid rgba(0, 161, 224, 0.55);
  background: rgba(0, 161, 224, 0.10);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
}
.sf-badge img { width: 20px; height: 20px; filter: invert(1); }
a.sf-badge { text-decoration: none; transition: border-color 0.2s, background 0.2s; }
a.sf-badge:hover { border-color: rgba(0, 161, 224, 0.9); background: rgba(0, 161, 224, 0.18); }

.hero .sf-badge { margin-top: 22px; }

.footer .sf-badge { margin-top: 18px; }

/* ---- home service cards: name + capability list + link ---- */
/* signature lead-in quote under the "What we do" heading */
.section-quote { margin: 30px 0 4px; padding-left: 26px; border-left: 2px solid var(--accent); max-width: 62ch; }
.section-quote blockquote {
  position: relative;
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--text);
}
.section-quote blockquote::before {
  content: "\201C";
  position: absolute;
  top: -0.15em;
  left: -0.5em;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.28;
  pointer-events: none;
}
.section-quote blockquote::after {
  content: "\201D";
  font-size: 2.2rem;
  line-height: 0;
  vertical-align: -0.35em;
  margin-left: 0.06em;
  color: var(--accent);
  opacity: 0.28;
  pointer-events: none;
}
.section-quote figcaption { margin-top: 12px; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); }
@media (max-width: 560px) { .section-quote blockquote { font-size: 1.18rem; } }

/* icon + title share the top row */
.hs-head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.hs-titles { display: flex; flex-direction: column; gap: 5px; }
/* 3D glass icon badge: translucent body + specular sheen + edge highlights */
.hs-icon {
  position: relative;
  width: 58px; height: 58px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 16px;
  overflow: hidden;
  color: var(--accent);
  background:
    linear-gradient(155deg, rgba(0,174,239,0.18), rgba(255,255,255,0.03) 46%, rgba(0,0,0,0.16));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 -7px 14px rgba(0,0,0,0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
/* diagonal glossy highlight across the top-left */
.hs-icon::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(138deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.08) 22%, transparent 48%);
  pointer-events: none;
}
.hs-icon svg {
  position: relative; z-index: 1;
  width: 28px; height: 28px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55)) drop-shadow(0 0 6px rgba(0,174,239,0.4));
}

.hs-tag { display: inline-block; margin: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }

.hs-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.hs-list li { position: relative; padding-left: 20px; font-size: 0.96rem; color: var(--text); }
.hs-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hs-go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent); transition: gap 0.25s var(--ease); }

/* ---- scroll-stacking service panels ----
   each panel pins under the nav (position: sticky) and the next panel
   scrolls up over it; staggered top offsets reveal a sliver of each
   card beneath. Falls back to a normal stack on mobile / reduced-motion. */
/* the #what section otherwise inherits overflow:hidden (to clip its glow
   blob), which breaks position:sticky — opt it out and drop that blob. */
#what { overflow: visible; padding-bottom: 64px; }
#what::before { display: none; }
/* Delivery Engine: comfortable heading room, but shrink the circuit-scrim's
   top fade so the flow-bg reaches up near the top instead of leaving an
   empty band (the real cause of the "blank section" at the seam). */
#delivery { padding-top: 96px; }
#delivery .circuit-scrim {
  background:
    linear-gradient(0deg, var(--bg) 0%, rgba(22,24,28,0.6) 12%, rgba(22,24,28,0.6) 95%, transparent 100%),
    radial-gradient(130% 96% at 50% 46%, transparent 38%, rgba(22,24,28,0.62) 100%),
    radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1.5px);
  background-size: auto, auto, 4px 4px;
}

.svc-stack { margin-top: 56px; display: flex; flex-direction: column; gap: 34px; }
.svc-panel {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 58vh;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg-card);
  overflow: hidden;
  box-shadow: 0 28px 60px rgba(0,0,0,0.5);
}
.svc-panel:nth-child(2) { top: calc(var(--nav-h) + 58px); }
.svc-panel:nth-child(3) { top: calc(var(--nav-h) + 76px); }
/* last panel scrolls normally so the stack leaves no empty space beneath it */
.svc-panel:last-child { position: relative; top: auto; }

.svc-panel-text { padding: clamp(36px, 4.5vw, 60px); display: flex; flex-direction: column; }
.svc-panel-text .hs-tag { margin-bottom: 20px; }
.svc-panel-text h3 { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.06; margin: 0 0 28px; }
.svc-panel .hs-list { gap: 14px; margin-bottom: 34px; }
.svc-panel .hs-list li { font-size: 1.02rem; }
.svc-panel .hs-go { margin-top: auto; font-size: 0.9rem; }

/* icon + title header row inside the text side */
.svc-panel .hs-head { align-items: center; margin-bottom: 30px; }
.svc-panel .hs-head h3 { margin: 0; }
.svc-panel .hs-head .hs-tag { margin: 0 0 2px; }
/* header icon takes on the panel's hue */
.svc-panel .hs-icon {
  color: rgb(var(--glow));
  background: linear-gradient(155deg, rgba(var(--glow),0.20), rgba(255,255,255,0.03) 46%, rgba(0,0,0,0.16));
}
.svc-panel .hs-icon svg {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55)) drop-shadow(0 0 6px rgba(var(--glow),0.45));
}

.svc-panel-visual {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  color: rgb(var(--glow));      /* currentColor drives the mockup accents */
  background:
    radial-gradient(90% 90% at 68% 22%, rgba(var(--glow), 0.28), transparent 60%),
    linear-gradient(158deg, #1a212e 0%, #0d1117 100%);
  overflow: hidden;
}

/* ---- homepage service scenes: layered 3D compositions of floating cards ----
   Sizes are in em off a font-size that tracks the visual's width (container
   query), so text stays crisp and proportional from desktop to phone.
   --z sets each card's depth; the scene tilts toward the pointer (js/main.js
   sets --mx / --my) and every card drifts on its own slow float. */
@property --fy { syntax: "<length>"; inherits: false; initial-value: 0px; }
.svc-panel-visual { container-type: inline-size; }
.sx {
  --mx: 0; --my: 0;
  position: relative; z-index: 2;
  width: min(88%, 520px);
  aspect-ratio: 6 / 5;
  font-size: clamp(8.5px, 2.25cqi, 12.5px);
  color: rgb(var(--glow));
  transform-style: preserve-3d;
  transform: perspective(1500px) rotateX(calc(7deg - var(--my) * 6deg)) rotateY(calc(-15deg + var(--mx) * 8deg));
  transition: transform 0.6s var(--ease), opacity 0.8s var(--ease);
}
.sx.reveal { opacity: 0; }
.sx.reveal.visible { opacity: 1; }

.sx-l {
  position: absolute;
  transform: translate3d(0, var(--fy), var(--z, 0px));
  opacity: 0;
}
.sx.visible .sx-l {
  animation:
    sxIn 0.9s var(--ease) both,
    sxFloat 7s var(--ease-inout) infinite;
  animation-delay: calc(var(--d) * 150ms + 150ms), calc(var(--d) * -1.7s);
}
@keyframes sxIn { from { opacity: 0; translate: 0 1.6em; } to { opacity: 1; translate: 0 0; } }
@keyframes sxFloat { 0%, 100% { --fy: 0px; } 50% { --fy: -7px; } }

.sx-card {
  padding: 1.1em 1.2em;
  border-radius: 1.1em;
  color: var(--text);
  background: linear-gradient(180deg, rgba(31, 37, 47, 0.97), rgba(16, 20, 27, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 2.6em 4.4em -1.8em rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.sx-card em { display: block; font-family: var(--font-mono); font-style: normal; font-size: 0.78em; color: var(--text-dim); }
.sx-card b { font-weight: 600; }
.sx-big { display: block; font-family: var(--font-display); font-size: 1.35em; letter-spacing: -0.01em; margin: 0.15em 0 0.7em; }
.sx-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1em; }
.sx-brand { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; font-size: 0.95em; }
.sx-brand i { width: 0.65em; height: 0.65em; border-radius: 0.2em; background: currentColor; color: rgb(var(--glow)); box-shadow: 0 0 0.8em rgba(var(--glow), 0.7); }
.sx-tabs { display: flex; gap: 1em; font-size: 0.8em; color: var(--text-dim); }
.sx-tabs b { color: var(--text); box-shadow: 0 0.55em 0 -0.4em rgb(var(--glow)); }
.sx-ok { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: rgba(95, 214, 160, 0.16); }
.sx-ico { width: 1.15em; height: 1.15em; fill: none; stroke: #5fd6a0; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sx-toast { display: flex; align-items: center; gap: 0.8em; padding: 0.85em 1em; }
.sx-toast b { display: block; font-size: 0.95em; }
.sx-pill { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.6em 1em; border-radius: 999px; font-family: var(--font-mono); font-size: 0.82em; white-space: nowrap; }
.sx-live { width: 0.6em; height: 0.6em; border-radius: 50%; background: #5fd6a0; animation: mPing 2s ease-out infinite; }

/* 01 · software — dashboard, phone, deploy toast, performance score */
.sx-dash { left: 0; top: 7%; width: 76%; }
.sx-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6em; margin-bottom: 0.9em; }
.sx-kpis > div { padding: 0.65em 0.75em; border-radius: 0.7em; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.05); }
.sx-kpis b { display: block; font-family: var(--font-display); font-size: 1.25em; margin: 0.2em 0 0.1em; }
.sx-kpis .up { font-family: var(--font-mono); font-size: 0.72em; color: #5fd6a0; }
.sx-chart { color: rgb(var(--glow)); }
.sx-chart svg { display: block; width: 100%; height: 6.4em; }
.sx-line { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.sx-chart svg { clip-path: inset(0 100% 0 0); }
.sx.visible .sx-chart svg { animation: sxWipe 1.4s var(--ease) 0.6s forwards; }
@keyframes sxWipe { to { clip-path: inset(0 0 0 0); } }
.sx-axis { display: flex; justify-content: space-between; margin-top: 0.5em; font-family: var(--font-mono); font-size: 0.68em; color: var(--c-com); }
.sx-phone { right: 0; top: 17%; width: 31%; padding: 1.4em 1em 1.1em; border-radius: 1.7em; }
.sx-notch { display: block; width: 34%; height: 0.45em; margin: -0.6em auto 1em; border-radius: 1em; background: rgba(255, 255, 255, 0.12); }
.sx-phone .sx-big { font-size: 1.15em; }
.sx-track { list-style: none; display: flex; flex-direction: column; gap: 0.55em; margin-bottom: 0.9em; font-size: 0.8em; color: var(--text-dim); }
.sx-track li { position: relative; padding-left: 1.4em; }
.sx-track li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 0.65em; height: 0.65em; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.2); }
.sx-track li.done { color: var(--text); }
.sx-track li.done::before { background: currentColor; border-color: currentColor; color: #5fd6a0; }
.sx-track li.now { color: rgb(var(--glow)); }
.sx-track li.now::before { border-color: currentColor; background: currentColor; box-shadow: 0 0 0 0.25em rgba(var(--glow), 0.25); animation: mPulse var(--dur-loop) var(--ease-inout) infinite; }
.sx-eta { padding: 0.6em 0.7em; border-radius: 0.6em; background: rgba(255, 255, 255, 0.04); margin-bottom: 0.8em; }
.sx-eta b { font-size: 0.9em; }
.sx-btn { display: block; text-align: center; padding: 0.6em; border-radius: 0.7em; font-size: 0.82em; font-weight: 600; color: #071016; background: rgb(var(--glow)); }
.sx-dev .sx-toast { left: 6%; bottom: 3%; width: 58%; }
.sx-score { right: 1%; bottom: 3%; display: flex; align-items: center; gap: 0.7em; padding: 0.6em 0.9em 0.6em 0.6em; border-radius: 0.9em; }
.sx-score svg { width: 2.6em; height: 2.6em; transform: rotate(-90deg); }
.sx-score circle { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 3.2; }
.sx-score .sx-arc { stroke: #5fd6a0; stroke-linecap: round; stroke-dasharray: 0 100; }
.sx.visible .sx-arc { animation: sxArc 1.4s var(--ease) 0.9s forwards; }
@keyframes sxArc { to { stroke-dasharray: var(--v) 100; } }
.sx-score b { display: block; font-family: var(--font-display); font-size: 1.2em; color: #5fd6a0; }

/* 02 · salesforce — pipeline board, opportunity, approval, ERP sync */
.sx-board { left: 0; top: 6%; width: 80%; }
.sx-total { font-size: 0.8em; color: var(--text-dim); }
.sx-total b { color: var(--text); }
.sx-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6em; }
.sx-col { display: flex; flex-direction: column; gap: 0.5em; padding: 0.6em; border-radius: 0.7em; background: rgba(255, 255, 255, 0.03); }
.sx-col > em { display: flex; justify-content: space-between; margin-bottom: 0.15em; }
.sx-col > em i { font-style: normal; color: var(--text); }
.sx-deal { display: grid; grid-template-columns: 1fr auto; row-gap: 0.15em; padding: 0.55em 0.6em; border-radius: 0.55em; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05); font-size: 0.85em; }
.sx-deal span { grid-column: 1; font-family: var(--font-mono); font-size: 0.85em; color: var(--text-dim); }
.sx-deal i { grid-row: 1 / 3; grid-column: 2; align-self: center; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; font-style: normal; font-size: 0.72em; font-weight: 600; color: var(--text-dim); background: rgba(255, 255, 255, 0.07); }
.sx-deal.hot { border-color: rgba(var(--glow), 0.55); box-shadow: 0 0 0 1px rgba(var(--glow), 0.25), 0 0 1.4em rgba(var(--glow), 0.18); }
.sx-deal.won span { color: #5fd6a0; }
.sx-opp { right: 0; top: 34%; width: 44%; }
.sx-opp .sx-big { margin-bottom: 0.2em; }
.sx-amt { display: block; font-family: var(--font-display); font-size: 1.6em; color: rgb(var(--glow)); margin-bottom: 0.7em; }
.sx-stage { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.3em; margin-bottom: 0.8em; }
.sx-stage i { height: 0.35em; border-radius: 1em; background: rgba(255, 255, 255, 0.1); }
.sx-stage i.on { background: rgba(var(--glow), 0.55); }
.sx-stage i.now { background: rgb(var(--glow)); box-shadow: 0 0 0.8em rgba(var(--glow), 0.6); }
.sx-meta { display: flex; gap: 1.6em; font-size: 0.88em; }
.sx-sf .sx-toast { left: 5%; bottom: 3%; width: 54%; }
.sx-sf .sx-pill { right: 5%; top: 0; }

/* 03 · ai — copilot answer, agent at work, guardrail chip */
.sx-chat { left: 0; top: 2%; width: 78%; }
.sx-tag { font-family: var(--font-mono); font-size: 0.72em; padding: 0.25em 0.7em; border-radius: 999px; color: rgb(var(--glow)); background: rgba(var(--glow), 0.14); }
.sx-q { margin: 0 0 0.8em auto; width: fit-content; max-width: 80%; padding: 0.6em 0.9em; border-radius: 0.9em 0.9em 0.2em 0.9em; background: rgba(255, 255, 255, 0.07); font-size: 0.9em; }
.sx-a { padding: 0.8em 0.9em; border-radius: 0.2em 0.9em 0.9em 0.9em; background: rgba(var(--glow), 0.1); border: 1px solid rgba(var(--glow), 0.25); }
.sx-a p { font-size: 0.9em; line-height: 1.45; color: var(--text); margin-bottom: 0.8em; }
.sx-a p b { color: rgb(var(--glow)); }
.sx-bars { position: relative; display: flex; align-items: flex-end; gap: 0.45em; height: 5em; padding-bottom: 1px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.sx-bars span { flex: 1; height: var(--h); border-radius: 0.25em 0.25em 0 0; background: rgba(var(--glow), 0.75); transform-origin: bottom; transform: scaleY(0); }
.sx-bars span.fc { background: repeating-linear-gradient(135deg, rgba(var(--glow), 0.55) 0 3px, rgba(var(--glow), 0.2) 3px 6px); }
.sx.visible .sx-bars span { animation: mGrowY 0.8s var(--ease) 0.5s both; }
.sx-target { position: absolute; left: 0; right: 0; bottom: 92%; border-top: 1.5px dashed rgba(255, 255, 255, 0.45); }
.sx-target::after { content: "target"; position: absolute; right: 0; top: -1.5em; font-family: var(--font-mono); font-size: 0.66em; color: var(--text-dim); }
.sx-cites { display: flex; gap: 0.4em; margin-top: 0.7em; }
.sx-cites span { font-family: var(--font-mono); font-size: 0.68em; padding: 0.2em 0.6em; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); color: var(--text-dim); }
.sx-agent { right: 0; top: 57%; width: 46%; }
.sx-agent ol { list-style: none; display: flex; flex-direction: column; gap: 0.65em; margin-top: 0.7em; font-size: 0.86em; }
.sx-agent li { display: flex; align-items: center; gap: 0.6em; color: var(--text-dim); }
.sx-agent li.done { color: var(--text); }
.sx-agent li.run { color: rgb(var(--glow)); }
.sx-agent .sx-ok { width: 1.5em; height: 1.5em; }
.sx-spin { flex: 0 0 auto; width: 1.5em; height: 1.5em; border-radius: 50%; border: 2px solid rgba(var(--glow), 0.25); border-top-color: rgb(var(--glow)); animation: sxSpin 0.9s linear infinite; }
@keyframes sxSpin { to { transform: rotate(360deg); } }
.sx-gate { flex: 0 0 auto; width: 1.5em; height: 1.5em; border-radius: 50%; border: 1.5px dashed rgba(245, 196, 81, 0.7); }
.sx-agent li.gate { color: #f5c451; }
.sx-ai .sx-pill { left: 5%; bottom: 3%; }
.sx-shield { width: 1.2em; height: 1.2em; fill: rgba(95, 214, 160, 0.18); stroke: #5fd6a0; stroke-width: 1.4; }

@media (max-width: 1100px) {
  .svc-panel-visual { min-height: 340px; }
  .sx { width: 92%; font-size: clamp(8.5px, 2.5cqi, 12.5px); }
}
@media (max-width: 560px) {
  .sx { width: 92%; transform: perspective(1500px) rotateX(5deg) rotateY(-8deg); }
  .sx-score { display: none; }   /* the smallest layer — keeps the phone mock clear */
}
@media (prefers-reduced-motion: reduce) {
  .sx-l { opacity: 1; }
  .sx-chart svg { clip-path: none; }
  .sx-arc { stroke-dasharray: var(--v) 100; }
  .sx-bars span { transform: none; }
}

.svc-panel-visual::after {           /* faint grid for depth, masked to a soft vignette */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(80% 80% at 62% 42%, #000, transparent 76%);
  mask-image: radial-gradient(80% 80% at 62% 42%, #000, transparent 76%);
}

/* large glass icon inside the panel visual — hue driven by the panel's --glow */

@media (max-width: 860px) {
  .svc-panel { position: static; grid-template-columns: 1fr; min-height: 0; }
  .svc-panel-visual { order: -1; min-height: 300px; padding: 28px 0; }
  
  
}
@media (prefers-reduced-motion: reduce) { .svc-panel { position: static; } }

/* ---- portal cards (Services overview): ghost number + sliding arrow ---- */

/* ---- spec list (Software Development): mono-numbered rows, no boxes ---- */
.spec-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }
.spec-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
}
.spec-item:nth-last-child(-n+2) { border-bottom: none; }

.spec-icon { display: inline-flex; color: var(--accent); padding-top: 2px; }
.spec-icon svg { width: 26px; height: 26px; }
.spec-item h3 { font-size: 1.06rem; margin-bottom: 6px; }
.spec-item p { color: var(--text-dim); font-size: 0.92rem; line-height: 1.55; }
@media (max-width: 760px) {
  .spec-grid { grid-template-columns: 1fr; }
  .spec-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .spec-item:last-child { border-bottom: none; }
}

/* ---- salesforce tiles: brand-blue numbered badge + glow ---- */

/* unified parallel-tracks diagram — Salesforce lane + Agentforce lane, merged */

/* salesforce + agentforce lifecycle — connected flow */
.lifecycle-flow {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0 18px;
  position: relative;
}
/* gradient track connecting the stage nodes */
.lifecycle-flow::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--border-strong);
  opacity: 1;
  z-index: 1;
}
.lc-stage { position: relative; display: flex; flex-direction: column; }
.lc-node {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--accent);
  background: var(--bg);
  border: 1px solid rgba(0, 174, 239, 0.5);
  box-shadow: 0 0 0 4px var(--bg);
  margin: 0 auto 22px;
  position: relative;
  z-index: 2;
}
.lc-stage::after {
  content: "›";
  position: absolute;
  top: 12px;
  right: -13px;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  color: var(--text-dim);
  z-index: 2;
}
.lc-stage:last-child::after { display: none; }
.lc-card {
  flex: 1;
  padding: 22px 18px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--c, var(--accent));
  border-radius: var(--radius);
  background: var(--bg-card);
}
.lc-card h3 { font-size: 1rem; margin-bottom: 14px; }
.lc-card ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.lc-card li { position: relative; padding-left: 16px; font-size: 0.85rem; color: var(--text-dim); line-height: 1.5; }
.lc-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c, var(--accent));
}

@media (max-width: 1040px) {
  .lifecycle-flow { grid-template-columns: 1fr; gap: 18px; }
  .lifecycle-flow::before { display: none; }
  .lc-stage { flex-direction: row; gap: 18px; align-items: flex-start; }
  .lc-node { margin: 0; }
  .lc-stage::after { display: none; }
}

/* ---------------- process (SDLC) ---------------- */

.process {
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.process-layout {
  display: grid;
  grid-template-columns: 1fr minmax(470px, 560px);   /* steps · sticky surface */
  gap: 56px;
  margin-top: 70px;
}

.process-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16vh;
  padding: 6vh 0 10vh;
}

.process-step {
  max-width: 520px;
  opacity: 0.22;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.process-step.active {
  opacity: 1;
  transform: translateY(0);
}

.process-step .step-index {
  display: none; /* shown on mobile where the sticky rail is hidden */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
  margin-bottom: 8px;
}

.process-step h3 {
  font-size: 1.9rem;
  margin-bottom: 12px;
  color: var(--accent);
}

.process-step p { font-size: 1.05rem; }
.process-step p strong { color: var(--accent); font-weight: 600; }   /* "You get" deliverable cue */

/* ---- Delivery Engine: large sticky HUD "surface" that transforms per step ---- */
.process-surface-sticky { position: sticky; top: calc(var(--nav-h) + 80px); }
.surface-stack { position: relative; height: 460px; }
.process-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(0, 174, 239, 0.08), transparent 55%),
    radial-gradient(130% 90% at 100% 100%, rgba(150, 110, 250, 0.07), transparent 55%),
    #0a0d12;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 34px 80px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  pointer-events: none;
}
.process-panel.is-active { opacity: 1; transform: none; }

/* panel chrome — status tag + step counter */
.surface-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; }
.s-tag { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.s-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: mPulse var(--dur-loop) var(--ease-inout) infinite; }
.s-count { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em; color: var(--text-dim); }
.s-count b { color: var(--text); font-weight: 600; }
.surface-body { position: relative; flex: 1; min-height: 0; padding: 16px 24px 30px; display: flex; }
.pp-note { position: absolute; right: 18px; bottom: 10px; font-size: 0.66rem; color: rgba(154, 161, 171, 0.6); }

/* ---- Delivery Engine panels: small, realistic product screens ----
   Every element with --i reveals in sequence each time its panel becomes
   active (the class swap restarts the animation). */
.pp { width: 100%; font-size: 0.84rem; color: var(--text); }
.pp em { font-family: var(--font-mono); font-style: normal; }   /* site-wide em is serif italic */
.pp [style*="--i"] { opacity: 0; }
.process-panel.is-active .pp [style*="--i"] {
  animation: mRise var(--dur-2) var(--ease) both;
  animation-delay: calc(var(--i) * 110ms + 160ms);
}
.pp-kicker { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.pp-dim { font-size: 0.7rem; color: var(--text-dim); }
.pp-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.66rem; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-dim); }
.pp-badge.ok { color: var(--c-ok); border-color: rgba(95, 214, 160, 0.4); background: rgba(95, 214, 160, 0.08); }
.pp-badge.live { color: var(--accent); border-color: rgba(0, 174, 239, 0.4); background: var(--accent-soft); }
.pp-badge.live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: mPulse var(--dur-loop) var(--ease-inout) infinite; }
.pp-term, .pp-git, .pp-demo, .pp-ready, .pp-uptime, .pp-map, .pp-stat, .pp-incr {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.018);
}

/* 01 · truSCOUT — systems map + findings */
.pp-scout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 16px; }
.pp-map {
  position: relative;
  min-height: 300px;
  background:
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.2px) 0 0 / 14px 14px,
    rgba(255, 255, 255, 0.012);
}
.pp-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pp-links path { fill: none; stroke: rgba(226, 235, 245, 0.22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pp-links path.gap { stroke: rgba(245, 196, 81, 0.6); stroke-dasharray: 3 4; }
.pp-node {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: 0.68rem; white-space: nowrap;
  padding: 4px 9px; border-radius: 6px;
  border: 1px solid var(--border-strong); background: #10141a; color: var(--text-dim);
}
.process-panel.is-active .pp .pp-node[style] { animation-name: mPopCentered; }   /* keeps the centring transform */
.pp-node.hub { color: var(--text); border-color: rgba(0, 174, 239, 0.6); background: #0d1a22; box-shadow: 0 0 0 4px var(--accent-soft); }
.pp-node.warn { color: #f5c451; border-color: rgba(245, 196, 81, 0.5); border-style: dashed; }
.pp-side { display: flex; flex-direction: column; gap: 8px; }
.pp-side > .pp-kicker { margin-bottom: 2px; }
.pp-stat { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; color: var(--text-dim); }
.pp-stat b { font-family: var(--font-display); font-size: 1.05rem; color: var(--text); }
.pp-stat.warn b { color: #f5c451; }
.pp-stat.ok b { color: var(--c-ok); }
.pp-incr { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding: 12px; border-color: rgba(0, 174, 239, 0.45); background: var(--accent-soft); }
.pp-incr b { font-size: 0.92rem; }
.pp-meter { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.pp-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #4fd0ff); transform-origin: left; transform: scaleX(0); }
.process-panel.is-active .pp-meter i { animation: mFill var(--dur-3) var(--ease) 1s both; }
.pp-incr-foot { font-size: 0.66rem; color: var(--c-ok); }

/* 02 · truFORGE — infra apply log + the client's repo */
.pp-forge { display: flex; flex-direction: column; gap: 12px; }
.pp-term { background: #07090d; overflow: hidden; }
.pp-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 0.66rem; color: var(--text-dim); }
.pp-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.pp-bar span { margin-left: 8px; }
.pp-bar em { margin-left: auto; font-style: normal; color: var(--accent); }
.pp-lines { list-style: none; padding: 10px 14px 12px; font-size: 0.72rem; line-height: 1.95; }
.pp-lines li { display: flex; gap: 8px; white-space: nowrap; }
.pp-lines .c-dim { color: var(--c-com); }
.pp-lines .c-ok { color: var(--c-ok); }
.pp-done { margin-left: auto; color: var(--c-ok); }
.pp-lines-ok { color: var(--c-ok); }
.pp-caret { width: 7px; height: 1.1em; margin-left: 2px; align-self: center; background: var(--c-ok); animation: mBlink 1.1s steps(1) infinite; }
.pp-git { padding: 11px 14px 6px; }
.pp-git-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 0.72rem; color: var(--text-dim); }
.pp-commit { position: relative; display: flex; align-items: center; gap: 10px; padding: 5px 0 5px 2px; font-size: 0.78rem; color: var(--text-dim); }
.pp-commit i { position: relative; z-index: 1; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--accent); background: #0a0d12; }
.pp-commit:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 50%; height: 100%; width: 1px; background: var(--border-strong); }
.pp-commit:nth-child(2) { color: var(--text); }
.pp-commit em { margin-left: auto; font-style: normal; font-size: 0.64rem; padding: 2px 7px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); }

/* 03 · truMIND — weekly cadence + this week's demo */
.pp-mind { display: flex; flex-direction: column; gap: 14px; }
.pp-weeks-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.pp-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pp-track span { display: flex; flex-direction: column; gap: 7px; font-family: var(--font-mono); font-size: 0.64rem; color: var(--text-dim); }
.pp-track i { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }
.pp-track .done i { background: rgba(0, 174, 239, 0.55); }
.pp-track .now { color: var(--accent); }
.pp-track .now i { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: mPulse var(--dur-loop) var(--ease-inout) infinite; }
.pp-demo { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
.pp-demo-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pp-demo-head b { font-size: 0.95rem; }
.pp-demo ul { list-style: none; }
.pp-demo li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pp-demo li em { margin-left: auto; font-style: normal; font-size: 0.64rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-dim); }
.pp-feedback { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: 9px; }
.pp-feedback .pp-kicker { color: var(--accent); }
.pp-feedback p { margin-top: 3px; color: var(--text); font-size: 0.84rem; }

/* 04 · truGUARD — readiness checklist, uptime, ownership */
.pp-guard { display: flex; flex-direction: column; gap: 12px; }
.pp-ready { padding: 12px 16px 4px; }
.pp-ready-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.pp-ready-head b { font-size: 0.74rem; color: var(--c-ok); }
.pp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pp-row:last-child { border-bottom: 0; }
.pp-row em { font-style: normal; font-size: 0.68rem; color: var(--text-dim); }
.pp-guard-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.pp-uptime { padding: 10px 14px; }
.pp-uptime-head { display: flex; justify-content: space-between; font-size: 0.66rem; color: var(--text-dim); }
.pp-uptime-head b { color: var(--c-ok); }
.pp-uptime svg { display: block; width: 100%; height: 34px; margin-top: 6px; }
.pp-uptime polyline { fill: none; stroke: var(--c-ok); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pp-own { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border: 1px solid rgba(0, 174, 239, 0.45); border-radius: 10px; background: var(--accent-soft); }
.pp-own svg { width: 26px; height: 26px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }
.pp-own span { display: flex; flex-direction: column; gap: 2px; }
.pp-own b { font-size: 0.86rem; }
.pp-own em { font-style: normal; font-size: 0.66rem; color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .pp [style*="--i"] { opacity: 1; }
  .pp-meter i { transform: none; }
}

/* ---------------- industries ---------------- */

/* ---------------- testimonials ---------------- */

.testimonials {
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.quote {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
}

.quote blockquote {
  font-size: 0.99rem;
  color: var(--text-dim);
  line-height: 1.7;
}

.quote figcaption strong {
  display: block;
  font-family: var(--font-display);
  color: var(--text);
}

.quote figcaption span {
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* ---------------- faq ---------------- */

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.25s;
}

.faq-item[open] { border-color: var(--border-strong); }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}

.faq-item summary::-webkit-details-marker { display: none; }

/* ---------------- cta ---------------- */

.cta { padding: 150px 0; position: relative; overflow: hidden; }
/* aurora glow: two soft blurred colour blooms behind every CTA — a quiet,
   decorative site-wide signature (no legibility risk, purely additive) */
.cta::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  background:
    radial-gradient(40% 62% at 24% 40%, rgba(0,174,239,0.16), transparent 70%),
    radial-gradient(44% 66% at 80% 58%, rgba(79,208,255,0.15), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  opacity: 0;
  animation: mFadeIn 1.2s ease 0.2s forwards, ctaDrift 24s ease-in-out 1.4s infinite alternate;
}
.cta > .container { position: relative; z-index: 1; }
@keyframes ctaDrift {
  from { transform: translate(-2%, -1%) scale(1); }
  to   { transform: translate(2%, 1%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .cta::before { animation: none; opacity: 1; }
}

.cta-inner { text-align: center; }

.cta-inner .section-sub { margin: 1rem auto 0; }

.cta-inner .hero-ctas { justify-content: center; margin-top: 2.4rem; }

/* ---------------- footer ---------------- */

.footer {
  border-top: 1px solid var(--border);
  background: var(--bg-raised);
  padding: 70px 0 36px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 48px;
}

.footer-brand p {
  margin-top: 20px;
  font-size: 0.92rem;
  max-width: 340px;
}

.footer-brand .brand-mark { width: 28px; }
.footer-brand .brand-word { font-size: 0.95rem; }

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col h4 {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 6px;
}

.footer-col a {
  font-size: 0.92rem;
  color: var(--text-dim);
  transition: color 0.2s;
}

.footer-col a:hover { color: var(--accent); }

.footer-addr {
  font-size: 0.88rem;
  line-height: 1.6;
}

/* grouped office: address + its email/phone together */
.foffice { display: flex; flex-direction: column; gap: 4px; }
.foffice .footer-addr { margin-bottom: 4px; }

.footer-bottom {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.footer-legal { display: flex; gap: 22px; }
.footer-legal a:hover { color: var(--accent); }

/* ---------------- legal pages (privacy / terms) ---------------- */
.legal h2 { font-size: 1.15rem; margin: 34px 0 10px; }
.legal p { color: var(--text-dim); line-height: 1.7; margin-bottom: 12px; }
.legal a { color: var(--accent); }
.legal-meta { color: var(--text-dim); opacity: 0.7; font-size: 0.8rem; margin-bottom: 30px; }
.legal-note {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--bg-card);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.legal-note strong { color: var(--text); }

/* ---------------- shared motion keyframes ----------------
   One small vocabulary used site-wide. Variants are tuned per element with
   custom properties (--pulse-lo, --flow-to, --pop-from) instead of near-
   duplicate keyframes. */
@keyframes mRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mPop { from { opacity: 0; transform: scale(var(--pop-from, 0.85)); } to { opacity: 1; transform: none; } }
@keyframes mPopCentered { from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes mFadeIn { to { opacity: 1; } }
@keyframes mDrawIn { to { stroke-dashoffset: 0; } }                       /* from the element's own offset */
@keyframes mFlow { to { stroke-dashoffset: var(--flow-to, -24); } }      /* marching dashes */
@keyframes mFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mPulse { 0%, 100% { opacity: 1; } 50% { opacity: var(--pulse-lo, 0.45); } }
@keyframes mPing { 0% { box-shadow: 0 0 0 0 rgba(95, 214, 160, 0.5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(95, 214, 160, 0); } }
@keyframes mBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ---------------- reveal on scroll ---------------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* deferred reveal: hidden until the hero typewriter finishes, then JS adds
   .visible. Space is reserved (opacity/transform only) so nothing shifts. */
.reveal-after {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal-after.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .process-step { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reveal-after { transition: none !important; }   /* still JS-revealed, but snap instantly */
  .scroll-hint svg { animation: none; }
}

/* ---------------- responsive ---------------- */

@media (max-width: 980px) {
  .section { padding: 104px 0; }

  

  

  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* process: hide the sticky rail, show inline step numbers */
  .process-layout { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  .process-rail, .process-surface { display: none; }
  .process-steps { gap: 56px; padding: 0; }
  .process-step .step-index { display: block; }
  .process-step { opacity: 1; transform: none; }

  
  
}

/* collapse to the hamburger before the inline links crowd the wordmark */
@media (max-width: 900px) {
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: rgba(22, 24, 28, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    padding: 10px 28px 24px;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  }

  .nav-links.open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  .nav-links a:not(.btn) { padding: 14px 0; width: 100%; }
  .nav-links .btn { margin-top: 14px; }

  /* dropdown becomes an expanded, indented group on mobile */
  .nav-dropdown { width: 100%; }
  .nav-dd-toggle { width: 100%; padding: 14px 0; color: var(--text); justify-content: space-between; }
  .nav-dropdown:hover .nav-dd-toggle svg { transform: none; }
  .nav-dd-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 6px 14px;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .nav-dd-menu a { padding: 10px 0; font-size: 0.95rem; }

  .nav-toggle { display: flex; }
}

@media (max-width: 720px) {
  

  .hero-watermark { right: -160px; opacity: 0.04; }

  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; }
}

/* ============================================================
   Deep-tech content modules
   ============================================================ */

.mono { font-family: var(--font-mono); }

/* monospace eyebrows read as technical labels */
.eyebrow.mono { letter-spacing: 0.04em; text-transform: none; }

.t-ok { color: var(--c-ok); }

/* ---------------- core thesis ---------------- */

/* glow hugs the pane's diagonal corners: the glass frosts the part behind it,
   the rest spills into the area just around the card. Anchored to the card's
   box (the container) so it tracks the pane's edges at any width. */

/* frosted glass pane */

/* diagonal sheen across the glass */

/* ---------------- capabilities ---------------- */

.cap-list { margin-top: 56px; }

.cap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 60px 0;
  border-top: 1px solid var(--border);
}
.cap:first-child { border-top: none; padding-top: 8px; }

.cap:nth-child(even) .cap-body { order: 2; }
.cap:nth-child(even) .cap-visual { order: 1; }

.cap-num {
  display: block;
  font-size: 1rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.cap-body h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: 16px;
}

.cap-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cap-points li {
  position: relative;
  padding-left: 24px;
  color: var(--text-dim);
  font-size: 0.96rem;
  line-height: 1.55;
}

.cap-points li::before {
  content: "›";
  position: absolute;
  left: 4px;
  top: -1px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 600;
}

.cap-points li strong { color: var(--text); font-weight: 600; }

/* one-line benefit hook under each capability heading */
.cap-hook {
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 20px;
}

/* proof chip — surfaces the visual's headline metric into the reading path */
.cap-result {
  display: inline-block;
  margin-top: 22px;
  padding: 7px 14px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.cap-visual { position: relative; min-height: 200px; display: flex; align-items: center; justify-content: center; }
.viz-note { position: absolute; bottom: -4px; right: 2px; font-size: 0.66rem; letter-spacing: 0.04em; color: var(--text-dim); opacity: 0.7; }
.viz-note::before { content: "↳ "; }

/* block diagram */

/* coloured, softly pulsing agent nodes */

/* edges with current flowing through them */

/* data packets travelling between agents */

/* terminal window */

/* telemetry dashboard */
.telemetry {
  width: 100%;
  background: #0b0e13;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tm-row { display: grid; grid-template-columns: 130px 1fr 54px; align-items: center; gap: 14px; }
.tm-label { font-size: 0.76rem; color: var(--text-dim); }
.tm-bar { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.06); overflow: hidden; }
.tm-bar i { position: relative; display: block; height: 100%; width: var(--w); background: var(--accent); border-radius: 3px; animation: tmGrow 1.5s var(--ease) both; }
@keyframes tmGrow { from { width: 0; } to { width: var(--w); } }
.tm-blue   i { background: #00aeef; }
.tm-green  i { background: #5fd6a0; }
.tm-violet i { background: #a78bfa; }
.tm-teal   i { background: #2fe0c4; }
.tm-amber  i { background: #f5c451; }
.tm-val { font-size: 0.8rem; color: var(--text); text-align: right; }

/* ============================================================
   software-development · purpose-built capability visuals
   (unique to this page — not shared with other service pages)
   ============================================================ */

/* 1 · event-stream throughput monitor */
.stream-viz {
  width: 100%;
  background: #0b0e13;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 22px 24px;
}
.sv-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.sv-title { font-size: 0.74rem; color: var(--text-dim); letter-spacing: 0.03em; }
.sv-live { display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; color: var(--accent); }
.sv-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px var(--accent); --pulse-lo: 0.25; animation: mPulse 1.4s ease-in-out infinite; }
.sv-bars { display: flex; align-items: flex-end; gap: 3px; height: 88px; }
.sv-bars span {
  flex: 1;
  height: 30%;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #3ad6ff, #00aeef);
  animation: svPulse 1.2s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes svPulse { 0%,100% { height: 16%; opacity: 0.55; } 50% { height: 92%; opacity: 1; } }
.sv-stats { display: flex; gap: 34px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.sv-stats > div { display: flex; flex-direction: column; gap: 2px; }
.sv-num { font-size: 1.24rem; font-weight: 600; color: var(--text); }
.sv-unit { font-size: 0.64rem; color: var(--text-dim); letter-spacing: 0.03em; }

/* 2 · monolith → containers migration */

/* 3 · distributed-trace waterfall */
.trace-viz {
  width: 100%;
  background: #0b0e13;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 20px 24px;
}
.tv-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; color: var(--text-dim); padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.tv-total { color: var(--text); }
.tv-rows { display: flex; flex-direction: column; gap: 11px; }
.tv-span { display: grid; grid-template-columns: 68px 1fr 30px; align-items: center; gap: 12px; }
.tv-label { font-size: 0.7rem; color: var(--text-dim); }
.tv-track { position: relative; height: 12px; border-radius: 3px; background: rgba(255,255,255,0.04); }
.tv-track i {
  position: absolute; top: 0; height: 100%;
  left: var(--o); width: var(--w);
  border-radius: 3px;
  background: var(--c, var(--accent));
  box-shadow: 0 0 8px -1px var(--c, var(--accent));
  transform: scaleX(0); transform-origin: left;
  animation: mFill 0.8s var(--ease) forwards;
  animation-delay: var(--delay, 0s);
}
.tv-ms { font-size: 0.66rem; color: var(--text-dim); text-align: right; }
.tv-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.66rem; color: #5fd6a0; }

/* app / product preview */

/* ============================================================
   Salesforce-native capability visuals (salesforce.html only)
   ============================================================ */

/* 01 · record page */

/* 01 · flow / automation canvas */
.fl-link { stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 5 6; --flow-to: -24; animation: mFlow 1.2s linear infinite; }

.fl-node { fill: rgba(0, 174, 239, 0.06); stroke: rgba(0, 174, 239, 0.4); stroke-width: 1; }
.fl-node.hot { fill: rgba(0, 174, 239, 0.14); stroke: var(--accent); stroke-width: 1.5; }

@media (prefers-reduced-motion: reduce) { .fl-link { animation: none; }  }

/* 01 · premium app builder / live app */

/* 02 · connectors */

/* 03 · object schema */

/* 04 · agent panel */

/* 05 · dashboard */

/* agentic loop — self-correcting cycle */

/* grounding pipeline — messy sources to cited answer */

  

@media (prefers-reduced-motion: reduce) {
  .sv-bars span, .sv-live i, .mv-dash, .mv-grid span, .mv-progress > i::after, .tv-track i { animation: none; }
  .sv-bars span { height: 55%; }
  
  
  .tv-track i { transform: scaleX(1); }
  
  
  
}

/* live terminal accents */

.caret { display: inline-block; width: 7px; height: 0.95em; margin-left: 3px; background: var(--accent); vertical-align: -2px; animation: mBlink 1.1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) {
  .dg-orch, .dg-c1, .dg-c2, .dg-c3, .dg-c4, .dg-flow,
  .tm-bar i, .tm-bar i::after, .term-live, .caret { animation: none !important; }
  
  
}

/* ---------------- delivery: day labels on steps ---------------- */

.step-days {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text);
  margin-bottom: 8px;
}

/* ---------------- comparison table ---------------- */

/* highlighted winning column */

/* ---------------- intake portal ---------------- */

.intake-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: start;
}

.intake-intro h3 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 18px; }

.intake-meta {
  list-style: none;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.intake-meta li {
  font-size: 0.86rem;
  color: var(--text-dim);
}
.intake-meta li span { color: var(--accent); margin-right: 8px; }

.intake-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.field { display: flex; flex-direction: column; gap: 9px; border: none; padding: 0; margin: 0; min-width: 0; }

.field > label,
.field legend {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0;
}

.intake-form input,
.intake-form select,
.intake-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 13px 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}
.intake-form textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.intake-form input::placeholder,
.intake-form textarea::placeholder { color: #5d6671; }

.intake-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.intake-form input:focus,
.intake-form select:focus,
.intake-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---------------- testimonials ---------------- */

.quote-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 34px 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}

/* ---- testimonials carousel (index) — one quote in the spotlight at a time ---- */
.quotes-carousel { margin-top: 52px; }
/* the stage holds the viewport + side arrows; arrows anchor to its center so
   they stay put no matter how long/short the current quote is */
.carousel-stage {
  position: relative;
  padding: 0 68px;   /* gutters that house the side arrows */
}
.quotes-viewport {
  overflow: hidden;
  /* height is fixed to the tallest quote via JS — nothing shifts between slides */
}
.quotes-track {
  display: flex;
  align-items: flex-start;   /* each slide keeps its natural height */
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.quote-slide {
  flex: 0 0 100%;
  min-width: 100%;
  box-sizing: border-box;
  padding: 8px;   /* breathing room for the card's soft shadow */
}
/* centered spotlight card, sized for comfortable reading of long quotes */
.quotes-carousel .quote-card {
  max-width: 940px;
  margin: 0 auto;
  padding: 46px 52px;
  gap: 22px;
}
.quotes-carousel .quote-card blockquote { max-width: none; }

/* controls */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s;
}
.carousel-arrow--prev { left: 0; }
.carousel-arrow--next { right: 0; }
.carousel-arrow:hover { border-color: var(--accent); color: var(--accent); }
.carousel-arrow:active { transform: translateY(-50%) scale(0.93); }
.carousel-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 28px;
}
.carousel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: background 0.2s, width 0.25s, border-radius 0.25s;
}
.carousel-dot:hover { background: var(--text-dim); }
.carousel-dot.active { background: var(--accent); width: 24px; border-radius: 5px; }
.carousel-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* company logo chip (logos sit on a white tile to read on the dark card) */
.q-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 9px 16px;
  background: #fff;
  border-radius: 10px;
}
.q-logo img { height: 40px; width: auto; max-width: 180px; object-fit: contain; display: block; }
/* the square Binatone logo has blue padding around its wordmark, so enlarge it here to stay legible */
.q-logo img[src*="binatone"] { height: 84px; }
.q-logo span { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.04em; color: #0a1020; }
.quote-card blockquote {
  position: relative;
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.62;   /* airier leading keeps long passages readable */
  color: var(--text);
  max-width: 60ch;     /* cap the measure so long quotes don't run into wide lines */
}
/* decorative opening quote mark */
.quote-card blockquote::before {
  content: "\201C";
  position: absolute;
  top: -0.35em;
  left: -0.12em;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.28;
  pointer-events: none;
}
.quote-card blockquote { padding-top: 0.4em; }
.quote-card figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
.quote-card .q-name { font-weight: 600; color: var(--text); }
.quote-card .q-role { font-size: 0.78rem; color: var(--text-dim); }

/* ---------------- about / team ---------------- */

.team-grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.team-card {
  padding: 32px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.team-card h3 { font-size: 1.12rem; margin-bottom: 4px; }
.team-card .team-role { display: block; font-size: 0.76rem; color: var(--accent); margin-bottom: 12px; }
.team-card p { font-size: 0.92rem; color: var(--text-dim); }
.team-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--accent);
  transition: opacity 0.2s;
}
.team-link img { width: 14px; height: 14px; filter: invert(1); opacity: 0.85; }
.team-link:hover { opacity: 0.7; }

/* avatar: monogram now, drop-in <img class="team-avatar"> later */
.team-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.team-avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(0, 174, 239, 0.4);
  object-fit: cover;
  overflow: hidden;
}
.team-head h3 { margin: 0; font-size: 1.08rem; }
.team-head .team-role { margin: 3px 0 0; }

@media (max-width: 900px) {
  
  .team-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  /* arrows overlay the card's side padding on narrow screens */
  .carousel-stage { padding: 0; }
  .carousel-arrow { width: 40px; height: 40px; }
  .carousel-arrow--prev { left: 4px; }
  .carousel-arrow--next { right: 4px; }
  .quotes-carousel .quote-card { padding: 34px 50px; }
}
@media (max-width: 520px) {
  .team-grid { grid-template-columns: 1fr; }
}

.intake-submit { margin-top: 4px; width: 100%; }

.intake-success {
  margin: 0;
  font-size: 0.85rem;
  color: var(--c-ok);
  text-align: center;
}

.intake-error {
  margin: 0;
  font-size: 0.85rem;
  color: #e8552e;
  text-align: center;
}
.intake-error a { color: inherit; text-decoration: underline; }

/* honeypot: hidden from sighted users and keyboard/tab order, but left in
   the DOM (not display:none) so simple bots that fill every field still
   trip it */
.field-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------- responsive: deep-tech modules ---------------- */

@media (max-width: 900px) {
  .cap {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 48px 0;
  }
  .cap:nth-child(even) .cap-body { order: 1; }
  .cap:nth-child(even) .cap-visual { order: 2; }
  .cap-visual { min-height: 0; }

  .intake-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================
   Case studies
   ============================================================ */

.cases-grid {
  --metric-num: 2.4rem;   /* single source of truth for every headline metric */
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr;   /* every case card spans the full row */
  gap: 22px;
}

.case-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.case-card:hover { border-color: var(--accent); transform: translateY(-4px); }

/* featured card: same layout as the rest, just a tinted surface + larger title */
.case-card.featured {
  background:
    radial-gradient(130% 130% at 100% 0%, var(--accent-soft) 0%, transparent 55%),
    var(--bg-card);
}

.case-tag {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.case-card h3 {
  font-size: 1.35rem;
  margin-bottom: 18px;
  line-height: 1.25;
}
.case-card.featured h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }

.case-flow { display: flex; flex-direction: column; gap: 14px; }

.case-flow > div { display: flex; flex-direction: column; gap: 4px; }

.case-flow .lbl {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.case-flow p { font-size: 0.94rem; color: var(--text-dim); line-height: 1.55; }
.case-flow .res p { color: var(--text); }

/* one layout for every case card (home + Work): tag header across the top,
   the story on the left, and a metric rail that is always on the right */
.case-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  grid-template-areas:
    "tag    tag"
    "title  rail"
    "flow   rail"
    "chips  rail";
  column-gap: 48px;
  row-gap: 14px;
  align-items: start;
  padding: 32px 36px;
}
.case-card .case-tag {
  grid-area: tag;
  white-space: nowrap;
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.case-card h3 { grid-area: title; margin-bottom: 0; }
.case-card .case-flow { grid-area: flow; }
.case-card .chips { grid-area: chips; margin-top: 4px; }

.case-rail {
  grid-area: rail;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding-left: 36px;
  border-left: 1px solid var(--border);
}
.case-metric { display: flex; flex-direction: column; gap: 6px; }
.case-metric b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text);
}
.case-metric.is-primary b { font-size: var(--metric-num); color: var(--accent); }
.case-metric small {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.case-metric + .case-metric { padding-top: 20px; border-top: 1px solid var(--border); }
.case-note { font-size: 0.84rem; line-height: 1.5; color: var(--text-dim); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chip {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  padding: 5px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}
/* ============================================================
   Tech stack — spec-sheet layout
   ============================================================ */

.stack-list { margin-top: 52px; border-top: 1px solid var(--border); }

.stack-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: start;
  padding: 30px 0;
  border-bottom: 1px solid var(--border);
}

.stack-cat {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--text);
}
.stack-cat span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--accent);
  margin-bottom: 6px;
}

.stack-items { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.stack-items .tech-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg-card);
  min-width: 72px;
  transition: border-color 0.2s, background 0.2s;
  cursor: default;
}
.stack-items .tech-logo img,
.stack-items .tech-logo .tech-svg {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
  opacity: 0.65;
  transition: opacity 0.2s;
  flex-shrink: 0;
}
.stack-items .tech-logo img { filter: invert(1); }
.stack-items .tech-logo .tech-svg { fill: #ffffff; }
.stack-items .tech-logo span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  white-space: nowrap;
  transition: color 0.2s;
}
.stack-items .tech-logo:hover {
  border-color: var(--accent);
  background: rgba(255,255,255,0.03);
}
.stack-items .tech-logo:hover img,
.stack-items .tech-logo:hover .tech-svg { opacity: 1; }
.stack-items .tech-logo:hover span { color: var(--text); }

/* ============================================================
   Clientele — marquee
   ============================================================ */

.clients { overflow: hidden; }
.clients .container { overflow: visible; }

.clients-marquee {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee-track.reverse { animation-direction: reverse; animation-duration: 52s; }
.clients-marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* pure-white tiles: the logos are either dark/colour on transparent, or have a
   baked white background — a #fff tile makes both read cleanly and hides the
   baked boxes seamlessly */
.client {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  min-width: 168px;
  padding: 12px 26px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.client:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35); }

/* logos are trimmed to their mark, so centering is automatic; wide wordmarks
   are capped by width, compact/detailed marks get more height to stay legible */
.client img {
  max-height: 46px;
  max-width: 168px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* square / detailed marks need more height than wordmarks to be recognisable */
.client img[src*="botvfx"],
.client img[src*="nikaa"],
.client img[src*="idect"],
.client img[src*="tyche"],
.client img[src*="cricclubs"],
.client img[src*="hotel-particulier"] {
  max-height: 52px;
}
/* voxtel is a very wide, thin, low-res wordmark — give it width so it doesn't read as tiny */
.client img[src*="voxtel"] { width: 160px; max-width: 160px; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .clients-marquee { flex-wrap: wrap; }
}

/* ---------------- responsive: case / stack / clients ---------------- */

@media (max-width: 900px) {
  .cases-grid { grid-template-columns: 1fr; --metric-num: 2rem; }
  .stack-row { grid-template-columns: 1fr; gap: 14px; }

  /* cards stack: tag, title, then the metrics side by side, then the story */
  .case-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tag" "title" "rail" "flow" "chips";
    padding: 30px;
  }
  .case-rail {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 16px 32px;
    padding: 4px 0 6px;
    border-left: none;
  }
  .case-metric + .case-metric { padding-top: 0; border-top: none; }
}

/* ============================================================
   Mobile polish
   ============================================================ */

/* even out heading line lengths so no single word strands on the last line */
h1, h2, h3 { text-wrap: balance; }

@media (max-width: 900px) {
  /* let capability text + visual shrink to the column: a wide visual (e.g.
     the monolith → services grid) no longer pushes the copy off-screen */
  .cap { grid-template-columns: minmax(0, 1fr); }
  .cap > * { min-width: 0; }
}

@media (max-width: 560px) {
  .section { padding: 80px 0; }
  .cases-grid:first-child { margin-top: 0; }   /* Work page: no heading above the cards */

  /* hero Delivery Engine card: compact — only the active step shows its line */
  .ec-step { padding: 6px 0; }
  .ec-step:not(.is-active) .ec-desc { display: none; }

  /* home service cards: title fits beside the icon at 360px */
  .svc-panel-text h3 { font-size: 1.75rem; }

  /* testimonials: full-width text; arrows move down beside the dots (swipe also works) */
  .quotes-carousel .quote-card { padding: 28px 22px; }
  .quote-card blockquote { font-size: 1rem; }
  .carousel-arrow { top: calc(100% + 12px); transform: none; }
  .carousel-arrow:active { transform: scale(0.93); }
  .carousel-arrow--prev { left: 0; }
  .carousel-arrow--next { right: 0; }

  /* Salesforce lifecycle: the wide two-lane diagram is unreadable at phone
     width — the numbered stage cards below carry the same story */
  .ultrack { display: none; }

  /* monolith → services visual: two columns of services so it fits */
  
  
  
  

  /* long result pills wrap more gracefully */
  .cap-result { font-size: 0.74rem; border-radius: 14px; }

  /* Work page logo tiles: smaller so more than one fits on screen */
  .client { height: 64px; min-width: 124px; padding: 10px 18px; }
  .client img { max-height: 36px; max-width: 120px; }
  .client img[src*="botvfx"], .client img[src*="nikaa"], .client img[src*="idect"],
  .client img[src*="tyche"], .client img[src*="cricclubs"], .client img[src*="hotel-particulier"] { max-height: 42px; }
  .client img[src*="voxtel"] { width: 116px; max-width: 116px; }
}

/* ============================================================
   Product visuals (.pv) — small, realistic screens used to illustrate
   capabilities. Real text (crisp at any size), one quiet window chrome,
   and a staggered reveal once the parent .reveal becomes .visible.
   ============================================================ */
.pv {
  width: 100%;
  font-size: 0.82rem;
  color: var(--text);
  text-align: left;
  background: #0b0e13;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.pv em { font-family: var(--font-mono); font-style: normal; font-size: 0.72rem; color: var(--text-dim); }
.pv b { font-weight: 600; }
.pv-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim); }
.pv-bar > i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.pv-bar > span { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-bar > b { margin-left: auto; font-weight: 500; color: var(--accent); white-space: nowrap; }
.pv-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }

.pv [style*="--i"] { opacity: 0; }
.visible .pv [style*="--i"] { animation: mRise var(--dur-2) var(--ease) both; animation-delay: calc(var(--i) * 90ms + 250ms); }

.pv-kicker { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.pv .ok { color: var(--c-ok); }
.pv .accent { color: var(--accent); }
.pv .dim { color: var(--c-com); }
.pv .r { text-align: right; }

.pv-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.64rem; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-dim); }
.pv-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pv-badge.live, .pv-bar .pv-badge:not(.ok) { color: var(--accent); border-color: rgba(0, 174, 239, 0.4); background: var(--accent-soft); }
.pv-badge.live i { animation: mPulse var(--dur-loop) var(--ease-inout) infinite; }
.pv-badge.ok { color: var(--c-ok); border-color: rgba(95, 214, 160, 0.4); background: rgba(95, 214, 160, 0.08); }

/* the green tick (shared with the Delivery Engine panels) */
.pp-tick, .pv-tick {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(95, 214, 160, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%235fd6a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.pv-wait { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #f5c451; box-shadow: inset 0 0 0 3px #0b0e13; background: #f5c451; animation: mPulse var(--dur-loop) var(--ease-inout) infinite; }

/* generic table: columns come from --cols on the container */
.pv-rows { display: flex; flex-direction: column; }
.pv-row { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pv-row:last-child { border-bottom: 0; }
.pv-row > .pv-tick { justify-self: end; }
.pv-row > span:not([class]) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-row.head { padding-top: 0; }
.pv-row.head em { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.pv-row.dimrow > * { opacity: 0.55; }
.pv-row.next > span:not([class]) { color: var(--text-dim); }

.pv-meter { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.pv-meter i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, var(--accent), #4fd0ff); transform-origin: left; transform: scaleX(0); }
.visible .pv-meter i { animation: mFill var(--dur-3) var(--ease) 0.7s both; }

.pv-pill { justify-self: start; font-family: var(--font-mono); font-size: 0.64rem; padding: 2px 8px; border-radius: 999px; border: 1px solid; }
.pv-pill.ok { color: var(--c-ok); border-color: rgba(95, 214, 160, 0.35); background: rgba(95, 214, 160, 0.08); }
.pv-pill.info { color: var(--accent); border-color: rgba(0, 174, 239, 0.35); background: var(--accent-soft); }
.pv-pill.warn { color: #f5c451; border-color: rgba(245, 196, 81, 0.35); background: rgba(245, 196, 81, 0.08); }
.pv-chip { font-size: 0.62rem !important; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-strong); white-space: nowrap; }
.pv-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pv-chips span { font-family: var(--font-mono); font-size: 0.64rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-dim); }

.pv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.pv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pv-kpis > div { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255, 255, 255, 0.02); }
.pv-kpis b { font-family: var(--font-display); font-size: 1.05rem; }

.pv-code { margin: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 9px; background: #07090d; font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.75; color: var(--text); white-space: pre; overflow: hidden; }
.pv-code .k { color: var(--c-fn); }
.pv-code .s { color: var(--c-key); }
.pv-code .v { color: var(--c-str); }
.pv-code .n { color: var(--c-num); }

/* Salesforce: record page */
.pv-path { display: flex; gap: 3px; }
.pv-path span { flex: 1; text-align: center; padding: 6px 4px; font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-dim); background: rgba(255, 255, 255, 0.05); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%, 7px 50%); }
.pv-path span:first-child { clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%); border-radius: 4px 0 0 4px; }
.pv-path span:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 7px 50%); border-radius: 0 4px 4px 0; }
.pv-path .done { color: var(--accent); background: var(--accent-soft); }
.pv-path .now { color: #06121a; background: var(--accent); font-weight: 600; }
.pv-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pv-fields div { display: flex; flex-direction: column; gap: 3px; }
.pv-callout { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid rgba(245, 196, 81, 0.35); border-radius: 10px; background: rgba(245, 196, 81, 0.05); }
.pv-callout .pv-kicker { color: #f5c451; }
.pv-callout p { color: var(--text); font-size: 0.8rem; }
.pv-actions { display: flex; gap: 8px; margin-top: 2px; }
.pv-btn { font-size: 0.72rem; font-weight: 600; padding: 5px 12px; border-radius: 7px; background: var(--accent); color: #06121a; }
.pv-btn.ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border-strong); font-weight: 500; }

/* Salesforce: integration systems */
.pv-sys { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-sys span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.66rem; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--border); color: var(--text-dim); }
.pv-sys i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-ok); }

/* agent / case steps */
.pv-case { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255, 255, 255, 0.02); }
.pv-steps { list-style: none; display: flex; flex-direction: column; }
.pv-steps li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pv-steps li:last-child { border-bottom: 0; }
.pv-steps li b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-steps li em { margin-left: auto; white-space: nowrap; }
.pv-steps li.wait b { color: #f5c451; }
.pv-steps.trace b { font-family: var(--font-mono); font-size: 0.72rem; }
.pv-tag { flex: 0 0 52px; text-align: center; font-family: var(--font-mono); font-size: 0.6rem; padding: 2px 0; border-radius: 5px; color: var(--accent); background: var(--accent-soft); }
.pv-tag.gate { color: #f5c451; background: rgba(245, 196, 81, 0.1); }

/* AI: data checks + grounded answer */
.pv-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pv-checks > div { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.pv-checks b { font-weight: 500; }
.pv-checks em { margin-left: auto; }
.pv-q { align-self: flex-end; max-width: 85%; padding: 8px 12px; border-radius: 10px 10px 2px 10px; background: rgba(255, 255, 255, 0.06); }
.pv-a { padding: 10px 12px; border-left: 2px solid var(--accent); background: var(--accent-soft); border-radius: 2px 8px 8px 2px; line-height: 1.5; }
.pv-a sup { margin-left: 3px; font-family: var(--font-mono); font-size: 0.6rem; color: var(--accent); }

/* Salesforce lifecycle: release-plan (Gantt) */
.ultrack { width: 100%; margin: 46px 0 6px; }
.gantt { display: grid; grid-template-columns: 96px repeat(5, minmax(0, 1fr)); row-gap: 10px; column-gap: 0; align-items: center; }
.gantt > em { padding-bottom: 8px; border-bottom: 1px solid var(--border); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }
.gantt > span:first-child { border-bottom: 1px solid var(--border); align-self: stretch; }
.gantt .gl { grid-column: 1; font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim); }
.gb {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 6px; padding: 7px 12px; border-radius: 7px; font-size: 0.74rem; white-space: nowrap; overflow: hidden;
  border: 1px solid; transform-origin: left;
}
.gb i { font-family: var(--font-mono); font-style: normal; font-size: 0.64rem; opacity: 0.85; }
.visible .pv .gb[style*="--i"] { animation-name: mGrowX; }
.gb.plan { color: var(--text); border-color: var(--border-strong); background: rgba(255, 255, 255, 0.04); }
.gb.sf { color: #bfeeff; border-color: rgba(0, 174, 239, 0.45); background: rgba(0, 174, 239, 0.12); }
.gb.af { color: #ddd1ff; border-color: rgba(167, 139, 250, 0.45); background: rgba(167, 139, 250, 0.12); }
.gb.rel { color: #c9f5e1; border-color: rgba(95, 214, 160, 0.45); background: rgba(95, 214, 160, 0.1); }
@media (max-width: 560px) {
  .pv-body { padding: 12px 12px 14px; gap: 10px; }
  .pv-row { grid-template-columns: var(--cols-m, var(--cols)); gap: 8px; font-size: 0.78rem; }
  .pv-code { white-space: pre-wrap; word-break: break-word; font-size: 0.68rem; }
  .pv-checks { grid-template-columns: 1fr; }
  .pv-fields { grid-template-columns: repeat(2, 1fr); }
  .pv-path { gap: 2px; }
  .pv-path span, .pv-path span:first-child, .pv-path span:last-child { clip-path: none; border-radius: 3px; font-size: 0.56rem; padding: 6px 2px; }
  .pv-steps:not(.trace) li em { display: none; }   /* keep the step names readable */
  .pv-kpis b { font-size: 0.95rem; }
}
@keyframes mGrowX { from { opacity: 0; transform: scaleX(0.2); } to { opacity: 1; transform: none; } }

/* ---------------- 404 ---------------- */
.page-hero.nf { min-height: 100svh; display: flex; align-items: center; border-bottom: 0; }
.page-hero.nf > .container { width: 100%; }   /* flex item: keep the normal container width */
.nf .hero-ctas { margin-top: 2rem; }
.nf-links { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 280px)); gap: 0 32px; margin-top: 2.6rem; }
.nf-links a { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); color: var(--text); transition: color var(--dur-1), gap var(--dur-1) var(--ease); }
.nf-links a:hover { color: var(--accent); gap: 18px; }
.nf-links .mono { font-size: 0.72rem; color: var(--accent); }
@media (max-width: 560px) { .nf-links { grid-template-columns: 1fr; } }

/* ============================================================
   Keyboard focus + page transitions
   ============================================================ */

/* one consistent ring for keyboard focus (mouse clicks don't trigger it);
   :where() keeps specificity at zero so component styles still win */
:where(a, button, summary, select, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.btn:focus-visible { outline-offset: 4px; }

/* cross-fade between pages; the nav is held in place so only content changes */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ============================================================
   Motion housekeeping
   ============================================================ */

/* looping animations pause while their section is off screen (js/main.js
   toggles .is-offscreen) — saves battery and keeps the page calm */
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after,
.is-offscreen::before, .is-offscreen::after { animation-play-state: paused !important; }

/* one site-wide reduced-motion rule: every animation and transition jumps
   straight to its end state (component blocks above add specific tweaks) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}