/* ============================================================
   Stradegi — Components
   Every colour comes from themes.css. Do not hard-code a colour
   here: add a token to themes.css and reference it instead.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
/* Structural tokens and all theme palettes live in themes.css. */

/* ---------- 2. Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); }
h2 { font-size: clamp(2rem, 4.3vw, 3.2rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
h4 { font-size: 1.05rem; letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; color: var(--text-dim); }
p:last-child { margin-bottom: 0; }

::selection { background: rgba(var(--accent-1-rgb), 0.3); color: var(--text); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.skip-link:focus { left: 16px; top: 16px; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 3. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: clamp(64px, 9vw, 130px);
}
.section--tight { padding-block: clamp(48px, 6vw, 82px); }
.section--flush-top { padding-top: 0; }

.section-head {
  max-width: 720px;
  margin-bottom: clamp(36px, 4.5vw, 64px);
}
.section-head--center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: clamp(18px, 2.2vw, 28px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--5 { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }

.split {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.15fr 1fr; }
}

.stack-sm > * + * { margin-top: 14px; }

/* ---------- 4. Background FX ---------- */
.fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.fx__aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform;
}
.fx__aurora--a {
  width: 62vw; height: 62vw;
  top: -22vw; left: -14vw;
  background: radial-gradient(circle at 50% 50%, rgba(var(--fx-a), 0.55), transparent 68%);
  animation: drift-a 26s var(--ease) infinite alternate;
}
.fx__aurora--b {
  width: 54vw; height: 54vw;
  top: 12vh; right: -18vw;
  background: radial-gradient(circle at 50% 50%, rgba(var(--fx-b), 0.42), transparent 68%);
  animation: drift-b 32s var(--ease) infinite alternate;
}
.fx__aurora--c {
  width: 48vw; height: 48vw;
  bottom: -20vw; left: 22vw;
  background: radial-gradient(circle at 50% 50%, rgba(var(--fx-c), 0.38), transparent 70%);
  animation: drift-c 38s var(--ease) infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9vw, 7vh, 0) scale(1.16); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-11vw, 9vh, 0) scale(0.94); }
}
@keyframes drift-c {
  from { transform: translate3d(0, 0, 0) scale(0.96); }
  to   { transform: translate3d(7vw, -8vh, 0) scale(1.2); }
}

.fx__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--fx-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--fx-grid) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 8%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 8%, transparent 78%);
  /* Driven by the hero's pointer handler; stays at 0 everywhere else. */
  transform: translate3d(calc(var(--hero-parallax-x, 0) * 7px),
                         calc(var(--hero-parallax-y, 0) * 7px), 0);
}

.fx__noise {
  position: absolute;
  inset: 0;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.fx__spotlight {
  position: absolute;
  width: 620px; height: 620px;
  left: 0; top: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--spotlight), transparent 62%);
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: transform;
}
.has-pointer .fx__spotlight { opacity: 1; }

main, .site-header, .site-footer { position: relative; z-index: 1; }

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  z-index: 60;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-4));
  box-shadow: 0 0 14px rgba(var(--accent-1-rgb), 0.55);
  transition: width 0.1s linear;
}

/* ---------- 5. Typography helpers ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 20px;
}
.kicker::before {
  content: '';
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.kicker--violet { color: var(--violet); }
.kicker--lime { color: var(--lime); }
.kicker--plain::before { display: none; }

.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--text-dim);
  max-width: 62ch;
}

.eyebrow-num {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}

/* ---------- 6. Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: 0.93rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(100deg, var(--btn-from), var(--btn-to));
  color: var(--btn-text);
  box-shadow: 0 12px 30px -14px var(--btn-glow);
}
.btn--primary:hover {
  box-shadow: 0 20px 46px -16px var(--btn-glow-hover);
  color: var(--btn-text);
}

.btn--ghost {
  background: var(--surface-raised);
  border-color: var(--line-strong);
  color: var(--text);
  backdrop-filter: blur(12px);
}
.btn--ghost:hover {
  border-color: rgba(var(--accent-1-rgb), 0.45);
  background: var(--tint);
  color: var(--accent-1);
}

.btn--link {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--cyan);
  box-shadow: none;
}
.btn--link .icon { transition: transform 0.35s var(--ease); }
.btn--link:hover { transform: none; color: var(--accent-2); }
.btn--link:hover .icon { transform: translateX(5px); }

.btn--sm { padding: 10px 18px; font-size: 0.84rem; }
.btn--lg { padding: 17px 34px; font-size: 1rem; }

/* .btn is nowrap so labels never break mid-phrase. A label long enough that it
   cannot fit a phone screen has to be allowed to wrap, or it drags the whole
   document wider than the viewport. */
.btn--wrap { white-space: normal; text-align: center; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.dot-live {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-1);
  box-shadow: 0 0 0 4px rgba(var(--accent-1-rgb), 0.18);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.82); }
}

.icon { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- 7. Header ---------- */
/* Keep the same header controls and spacing on every route. */
.site-header .theme-picker,
.site-header .hide-sm { display: none; }
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: var(--surface-raised);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
}

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

/* Official brand artwork. Which file shows is driven by data-mode, which the
   inline script in <head> sets before first paint.
   "on light" = artwork intended for a light background, and vice versa.
   height:auto is required so the width/height attributes on the <img> (which
   reserve space and avoid layout shift) don't force the intrinsic height. */
.logo { display: block; width: auto; height: auto; }
.logo--on-light { display: block; }
.logo--on-dark { display: none; }
html[data-mode='dark'] .logo--on-light { display: none; }
html[data-mode='dark'] .logo--on-dark { display: block; }

.brand .logo--symbol { width: 27px; height: auto; }
.brand .logo--wordmark { width: 82px; height: auto; }

.brand--footer { gap: 12px; }
.brand--footer .logo--symbol { width: 32px; height: auto; }
.brand--footer .logo--wordmark { width: 98px; height: auto; }

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  position: relative;
  display: block;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dim);
  transition: color 0.3s ease, background 0.3s ease;
}
.nav__link:hover { color: var(--text); background: var(--tint); }
.nav__link::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 3px;
  width: 0; height: 1.5px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transform: translateX(-50%);
  transition: width 0.35s var(--ease);
}
.nav__link:hover::after { width: 42%; }
.nav__link.is-active { color: var(--text); }
.nav__link.is-active::after { width: 42%; }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 10px;
}

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--text);
  transition: transform 0.35s var(--ease), opacity 0.25s ease;
}
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- 7b. Theme picker ---------- */
.theme-picker { position: relative; }

.theme-picker__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.theme-picker__toggle:hover {
  color: var(--text);
  border-color: rgba(var(--accent-1-rgb), 0.45);
}

.theme-picker__chips { display: inline-flex; }
.theme-picker__chips i {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--bg-soft);
  margin-left: -5px;
}
.theme-picker__chips i:first-child { margin-left: 0; }

.theme-picker__caret {
  width: 12px; height: 12px;
  transition: transform 0.3s var(--ease);
}
.theme-picker__toggle[aria-expanded='true'] .theme-picker__caret { transform: rotate(180deg); }

.theme-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 272px;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  z-index: 70;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.theme-menu.is-open { opacity: 1; visibility: visible; transform: none; }

.theme-menu__title {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4px 8px 10px;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.25s ease;
}
.theme-option:hover { background: var(--tint); }
.theme-option[aria-checked='true'] { background: var(--tint); }

.theme-option__chips { display: inline-flex; flex: none; }
.theme-option__chips i {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--bg-elev);
  margin-left: -5px;
}
.theme-option__chips i:first-child { margin-left: 0; }

.theme-option__text { display: grid; gap: 1px; min-width: 0; }
.theme-option__name {
  font-family: var(--font-display);
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text);
}
.theme-option__note {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-option__tick {
  width: 15px; height: 15px;
  margin-left: auto;
  flex: none;
  color: var(--accent-1);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.theme-option[aria-checked='true'] .theme-option__tick { opacity: 1; }

/* Keep the header on one line as space tightens. */
@media (max-width: 1200px) {
  .theme-picker__label { display: none; }
  .theme-picker__toggle { padding: 0 10px; }
}
@media (max-width: 560px) {
  .theme-picker { display: none; }
}

/* ---------- 8. Hero ---------- */
.hero {
  /* Accent for the headline, CTAs and hero visuals. Defaults to the theme
     accent; a variant can switch it (see .hero--blue). */
  --hero-accent: var(--accent-1);
  --hero-cta-bg: var(--accent-3);
  --hero-cta-fg: var(--btn-text);
  --hero-cta-bg-hover: var(--accent-1);

  position: relative;
  display: flex;
  align-items: center;
  min-height: min(88vh, 980px);
  padding-top: calc(var(--header-h) + clamp(28px, 4vw, 58px));
  padding-bottom: clamp(48px, 6vw, 92px);
  overflow: hidden;
}

/* Opt-in vivid blue for a hero, set per variant via hero.tone.
   NOTE: this blue is not in the brand palette (see README). */
.hero--blue {
  --hero-accent: #1c5f9e;
  --hero-cta-bg: #1c5f9e;
  --hero-cta-fg: #ffffff;
  --hero-cta-bg-hover: #14496f;
}
html[data-mode='dark'] .hero--blue {
  --hero-accent: #6fb4ea;
  --hero-cta-bg: #6fb4ea;
  --hero-cta-fg: #0b1c2c;
  --hero-cta-bg-hover: #94c9f2;
}

/* Full-bleed decorative layer behind the hero content. */
.hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }

/* Very soft illumination sitting behind the intelligence visual. */
.hero__glow {
  position: absolute;
  top: 50%;
  right: 2%;
  width: min(640px, 44vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
  background: radial-gradient(circle, rgba(var(--accent-1-rgb), 0.11), transparent 66%);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(44px, 5vw, 76px);
  align-items: center;
  width: 100%;
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); }
}

/* ---------- 8a. Hero content ---------- */
.hero__content { min-width: 0; }

.hero__eyebrow {
  font-weight: 500;
  letter-spacing: 0.22em;
  margin-bottom: clamp(22px, 2.4vw, 34px);
}

.hero__title {
  /* Fallback for engines without container queries - deliberately conservative. */
  font-size: clamp(2.5rem, 5.5vw, 5.5rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--text);
  margin: 0 0 clamp(22px, 2.4vw, 34px);
}
@supports (container-type: inline-size) {
  /* Size the headline against the column, not the viewport, so a long line can
     never wrap no matter how wide the screen gets. --hero-headline-cqw is set
     per home page variant in src/data/home-pages.json. */
  .hero__content { container-type: inline-size; }
  .hero__title {
    font-size: min(clamp(3rem, 11vw, 7.5rem), calc(var(--hero-headline-cqw, 16) * 1cqw));
  }
}

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

.hero__lede {
  max-width: 600px;
  font-size: clamp(1.0625rem, 1.05rem + 0.35vw, 1.3125rem);
  line-height: 1.62;
  color: var(--text-dim);
  margin: 0 0 clamp(30px, 3.4vw, 46px);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.hero__cta {
  gap: 11px;
  padding: 16px 28px;
  border-radius: 12px;
  font-size: 0.95rem;
  transition: background-color 0.2s ease, border-color 0.2s ease,
              color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.hero__cta:hover { transform: translateY(-1px); }
.hero__cta .icon { transition: transform 0.2s var(--ease); }
.hero__cta:hover .icon { transform: translateX(3px); }

.hero__cta--primary {
  background: var(--hero-cta-bg);
  border-color: var(--hero-cta-bg);
  color: var(--hero-cta-fg);
}
.hero__cta--primary:hover {
  background: var(--hero-cta-bg-hover);
  border-color: var(--hero-cta-bg-hover);
  color: var(--hero-cta-fg);
}

.hero__cta--secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}
.hero__cta--secondary:hover {
  background: var(--tint);
  border-color: var(--hero-accent);
  color: var(--hero-accent);
}

/* ---------- 8b. Intelligence network ---------- */
.hero__visual {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

/* Shared sizing for whichever hero visual a variant uses. */
.hero-visual-svg {
  display: block;
  width: 100%;
  height: auto;
}

.network__structure circle {
  fill: none;
  stroke: var(--accent-1);
  stroke-width: 1;
  opacity: 0.07;
}
.network__structure--dashed {
  stroke-dasharray: 2 11;
  opacity: 0.11;
}

.network__edge {
  stroke: var(--accent-1);
  stroke-width: 1;
  stroke-opacity: 0.17;
}
.network__edge-pulse {
  stroke: var(--accent-1);
  stroke-width: 1.2;
  stroke-opacity: 0.42;
}

.network__node {
  fill: var(--accent-1);
  fill-opacity: 0.42;
}

.network__halo {
  fill: none;
  stroke: var(--accent-1);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: heroHalo 9s ease-in-out infinite;
}
.network__body {
  fill: var(--accent-3);
  fill-opacity: 0.92;
}
.network__core { fill: var(--bg-soft); }
.network__ticks {
  stroke: var(--accent-1);
  stroke-width: 1;
  opacity: 0.3;
}

.network__index,
.network__label {
  font-family: var(--font-display);
  text-anchor: middle;
  fill: var(--accent-1);
}
.network__index {
  font-size: 10px;
  letter-spacing: 0.12em;
  fill-opacity: 0.4;
}
.network__label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  fill-opacity: 0.62;
}

.network__particle { fill: var(--accent-1); }

/* The journey particle walks the spine: DATA -> INTELLIGENCE -> DECISION ->
   ACTION. Offsets are cumulative from the DATA anchor at (88, 430). */
@keyframes heroJourney {
  0%   { transform: translate(0, 0);            opacity: 0; }
  7%   { opacity: 1; }
  33%  { transform: translate(127px, -130px); }              /* INTELLIGENCE */
  64%  { transform: translate(277px, -195px); }              /* DECISION     */
  93%  { transform: translate(407px, -280px); opacity: 1; }  /* ACTION       */
  100% { transform: translate(407px, -280px); opacity: 0; }
}
.network__particle--journey { animation: heroJourney 16s linear infinite; }

/* Each spine segment brightens as the particle crosses it. */
@keyframes heroEdgeA {
  0%, 5%    { opacity: 0.45; }
  20%       { opacity: 1; }
  34%, 100% { opacity: 0.45; }
}
@keyframes heroEdgeB {
  0%, 36%   { opacity: 0.45; }
  50%       { opacity: 1; }
  64%, 100% { opacity: 0.45; }
}
@keyframes heroEdgeC {
  0%, 66%   { opacity: 0.45; }
  80%       { opacity: 1; }
  93%, 100% { opacity: 0.45; }
}
.network__edge-pulse--1 { animation: heroEdgeA 16s linear infinite; }
.network__edge-pulse--2 { animation: heroEdgeB 16s linear infinite; }
.network__edge-pulse--3 { animation: heroEdgeC 16s linear infinite; }

@keyframes heroHalo {
  0%, 100% { transform: scale(1);    opacity: 0.42; }
  50%      { transform: scale(1.42); opacity: 0.1; }
}

/* Secondary nodes drift a couple of pixels, slowly. */
@keyframes heroDrift1 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(2.5px, -3px); }
}
@keyframes heroDrift2 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-3px, 2px); }
}
.network__drift {
  transform-box: fill-box;
  transform-origin: center;
}
.network__drift--1 { animation: heroDrift1 26s ease-in-out infinite; }
.network__drift--2 { animation: heroDrift2 34s ease-in-out infinite; }

@keyframes heroFlowB {
  0%   { transform: translate(0, 0);        opacity: 0; }
  15%  { opacity: 0.75; }
  85%  { opacity: 0.75; }
  100% { transform: translate(98px, 22px);  opacity: 0; }
}
@keyframes heroFlowC {
  0%   { transform: translate(0, 0);        opacity: 0; }
  15%  { opacity: 0.75; }
  85%  { opacity: 0.75; }
  100% { transform: translate(94px, -84px); opacity: 0; }
}
.network__particle--b { animation: heroFlowB 11s ease-in-out infinite; }
.network__particle--c { animation: heroFlowC 13s ease-in-out 2s infinite; }

/* ---------- 8c. Automation pipeline visual ---------- */
/* Used by the "Smarter operations. Lower cost." variant. Opposite motion
   vocabulary to the network: volume converging IN, then a steady stream OUT. */
.pipeline__structure {
  fill: none;
  stroke: var(--accent-1);
  stroke-width: 1;
  stroke-dasharray: 2 12;
  opacity: 0.11;
}

.pipeline__edge {
  stroke: var(--accent-1);
  stroke-width: 1;
  stroke-opacity: 0.2;
}
.pipeline__trunk {
  stroke: var(--accent-1);
  stroke-width: 1.4;
  stroke-opacity: 0.5;
}

/* Work items, restless */
.pipeline__work {
  fill: var(--accent-1);
  fill-opacity: 0.62;
  transform-box: fill-box;
  transform-origin: center;
  animation: pipelineWork 3.6s ease-in-out infinite;
}

/* Rings collapsing inward: many becoming one */
.pipeline__collapse {
  fill: none;
  stroke: var(--accent-1);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: pipelineCollapse 6s cubic-bezier(0.45, 0, 0.7, 1) infinite;
}
.pipeline__collapse--late { animation-delay: -3s; }

/* Engine */
.pipeline__emit {
  fill: none;
  stroke: var(--accent-1);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: pipelineEmit 3s ease-out infinite;
}
.pipeline__engine-ring {
  fill: none;
  stroke: var(--accent-1);
  stroke-width: 1.4;
  stroke-opacity: 0.85;
}
.pipeline__engine-mid {
  fill: var(--accent-3);
  fill-opacity: 0.9;
}
.pipeline__engine-core { fill: var(--bg-soft); }

/* Output nodes light up top to bottom, like a conveyor */
.pipeline__out {
  fill: var(--accent-1);
  animation: pipelineOut 3s ease-in-out infinite;
}

.pipeline__particle { fill: var(--accent-1); }
.pipeline__particle--in1 { animation: pipelineIn1 3.4s linear infinite; }
.pipeline__particle--in2 { animation: pipelineIn2 3.4s linear 0.85s infinite; }
.pipeline__particle--in3 { animation: pipelineIn3 3.4s linear 1.7s infinite; }
.pipeline__particle--in4 { animation: pipelineIn4 3.4s linear 2.55s infinite; }
.pipeline__particle--down { animation: pipelineDown 3s linear infinite; }
.pipeline__particle--down-b { animation-delay: -1.5s; }

.pipeline__annotation,
.pipeline__engine-label {
  font-family: var(--font-display);
  text-anchor: middle;
  fill: var(--accent-1);
}
.pipeline__annotation {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  fill-opacity: 0.62;
}
.pipeline__engine-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  fill-opacity: 0.85;
}

@keyframes pipelineWork {
  0%, 100% { opacity: 0.42; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.15); }
}

@keyframes pipelineCollapse {
  0%   { transform: scale(1);    opacity: 0; }
  18%  { opacity: 0.4; }
  100% { transform: scale(0.12); opacity: 0; }
}

@keyframes pipelineEmit {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.6); opacity: 0; }
}

@keyframes pipelineOut {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

/* Inflow lanes. Offsets are each lane's start point -> the engine at (280, 300),
   for the outer arc at r=175. Update these if that arc moves. */
@keyframes pipelineIn1 {
  0%   { transform: translate(0, 0);              opacity: 0; }
  14%  { opacity: 0.9; }
  100% { transform: translate(164.5px, 59.9px);   opacity: 0; }
}
@keyframes pipelineIn2 {
  0%   { transform: translate(0, 0);              opacity: 0; }
  14%  { opacity: 0.9; }
  100% { transform: translate(87.5px, 151.6px);   opacity: 0; }
}
@keyframes pipelineIn3 {
  0%   { transform: translate(0, 0);               opacity: 0; }
  14%  { opacity: 0.9; }
  100% { transform: translate(-87.5px, 151.6px);   opacity: 0; }
}
@keyframes pipelineIn4 {
  0%   { transform: translate(0, 0);               opacity: 0; }
  14%  { opacity: 0.9; }
  100% { transform: translate(-164.5px, 59.9px);   opacity: 0; }
}

@keyframes pipelineDown {
  0%   { transform: translate(0, 0);     opacity: 0; }
  14%  { opacity: 0.85; }
  86%  { opacity: 0.85; }
  100% { transform: translate(0, 155px); opacity: 0; }
}

/* ---------- 8d. Flow ribbon (hero background) ---------- */
.ribbon {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}
/* Dots are zero-length dashes with a round cap - far cheaper than thousands
   of <circle> elements. */
.ribbon__line {
  fill: none;
  stroke: var(--hero-accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-dasharray: 0.1 7.4;
}
.ribbon__line--flow {
  stroke-width: 2.2;
  animation: ribbonFlow 2.4s linear infinite;
}
@keyframes ribbonFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -7.5; }
}

/* ---------- 8e. Particle globe visual ---------- */
.visual-globe {
  position: relative;
  width: 100%;
}

/* A soft rim glow rather than a wash, so it lifts the sphere without burying
   the dots. */
.globe__glow-in  { stop-color: var(--hero-accent); stop-opacity: 0.04; }
.globe__glow-mid { stop-color: var(--hero-accent); stop-opacity: 0.15; }
.globe__glow-out { stop-color: var(--hero-accent); stop-opacity: 0; }
.globe__halo { fill: url(#globeGlow); }

.globe__structure circle,
.globe__structure ellipse {
  fill: none;
  stroke: var(--hero-accent);
  stroke-width: 1;
  stroke-opacity: 0.3;
}

.globe__band {
  fill: none;
  stroke: var(--hero-accent);
  stroke-linecap: round;
}
.globe__band--landNear { stroke-width: 3.4; stroke-opacity: 1; }
.globe__band--landFar  { stroke-width: 2.4; stroke-opacity: 0.62; }
.globe__band--seaNear  { stroke-width: 2.2; stroke-opacity: 0.34; }
.globe__band--seaFar   { stroke-width: 1.6; stroke-opacity: 0.18; }

.globe__sparks circle {
  fill: var(--hero-accent);
  animation: globeSpark 11s ease-in-out infinite;
}
.globe__sparks circle:nth-child(2) { animation-delay: -2s; }
.globe__sparks circle:nth-child(3) { animation-delay: -4s; }
.globe__sparks circle:nth-child(4) { animation-delay: -6s; }
.globe__sparks circle:nth-child(5) { animation-delay: -8s; }
.globe__sparks circle:nth-child(6) { animation-delay: -9s; }

@keyframes globeSpark {
  0%, 100% { transform: translate(0, 0);        opacity: 0.3; }
  50%      { transform: translate(-3px, -5px);  opacity: 0.85; }
}

/* Annotations are HTML rather than SVG text so they stay legible at any
   size. They only work while the hero is two-column. */
.globe-notes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.globe-note {
  position: absolute;
  width: max-content;
  max-width: 160px;
}
.globe-note--possibility  { left: 30%; top: 2%; }
.globe-note--intelligence { left: 0%;  top: 30%; }
.globe-note--reality      { left: 70%; top: 2%; }

.globe-note__marker {
  position: absolute;
  left: 0; top: 4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hero-accent);
}
/* Leader line dropping toward the ribbon */
.globe-note::before {
  content: '';
  position: absolute;
  left: 2.5px; top: 16px;
  width: 1px; height: 78px;
  background: linear-gradient(180deg, var(--hero-accent), transparent);
  opacity: 0.6;
}

.globe-note__title {
  display: block;
  padding-left: 15px;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hero-accent);
}
.globe-note__list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0 0 0 15px;
  display: grid;
  gap: 2px;
}
.globe-note__list li {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.globe-caption {
  position: absolute;
  right: 0; bottom: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.globe-caption__sep { opacity: 0.5; }

/* Both decorations assume the wide two-column hero. */
@media (max-width: 1023px) {
  .globe-notes { display: none; }
  .hero__background { display: none; }
}

/* ---------- 8f. Hero responsive ---------- */
@media (max-width: 1023px) {
  .hero { min-height: auto; }
  .hero__glow { display: none; }
  .hero__visual { max-width: 460px; }
}

@media (max-width: 700px) {
  .network__node--optional { display: none; }
  .hero__visual { max-width: 380px; }
}

/* Below this the SVG's annotated labels shrink past legibility. */
@media (max-width: 560px) {
  .network__index,
  .network__label { display: none; }
}

@media (max-width: 620px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__cta { width: 100%; }
}

/* ---------- 8g. Rotating hero visual (/3) ---------- */
/* One illustration and two animations, one slot, on a continuous loop. The
   slides share a single grid cell, so the slot takes the height of the tallest
   visual and the shorter ones stay centred instead of pulling the hero around
   as the loop turns over.

   Every slide runs the SAME keyframes and only the delay differs, so the
   stagger is one line per slide. Timings are percentages of the cycle - one
   slot is 1/3 and the crossfade is 1/8 of a slot - which is why the absolute
   duration is the only thing --hero-rotate-slot carries. Raise the slot for
   a calmer loop; the fades scale with it. */
.hero-rotator {
  display: grid;
  width: 100%;
}
.hero-rotator__slide {
  grid-area: 1 / 1;
  display: grid;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  animation: heroRotatorLoop calc(var(--hero-rotate-slot, 8s) * 3) linear infinite;
}
/* Resting state if the animation never runs. */
.hero-rotator__slide:first-child { opacity: 1; visibility: visible; }

/* The illustration slide. It arrives with its own transparent ground, so it
   sits on the hero directly - no plate, no backdrop. The height attribute the
   <img> carries is only a placeholder for the aspect ratio, so it has to be
   handed back to the ratio here or the browser will use the attribute value. */
.hero-scene { position: relative; width: 100%; }

.hero-rotator__img {
  display: block;
  width: 100%;
  height: auto;
}

/* A raster has no motion of its own, so the stream across the illustration is
   drawn: dots riding two paths traced off the artwork's own ribbon, one per
   leg - idea -> platform, then platform -> outcome.

   pathLength="100" puts the dash pattern and the offset in percent of the path,
   so ONE keyframe drives both legs whatever their real length, and animating
   the offset by a NEGATIVE period carries the dots along the path's direction
   (the same sign the globe's route pulses use). The gradient stroke fades each
   leg in at its start and out at its end, so dots are absorbed by the bulb and
   the city rather than appearing and vanishing mid-air. */
.hero-scene__flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-scene__fade-in  { stop-color: var(--hero-accent); stop-opacity: 0.95; }
.hero-scene__fade-out { stop-color: var(--hero-accent); stop-opacity: 0; }

.hero-scene__beam {
  fill: none;
  stroke: url(#heroSceneFade);
  /* Big enough to read against the artwork's own static cubes, which are a
     similar blue - the motion is what tells the two apart. */
  stroke-width: 18;
  stroke-linecap: round;
  /* Five dots: the period is 100/5, and the offset travels exactly one of
     them, so the stream loops without a seam. */
  stroke-dasharray: 0.1 19.9;
  animation: heroSceneFlow 3.5s linear infinite;
}
@keyframes heroSceneFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -20; }
}

/* The loop always opens on the first slide, so each later slide simply waits
   its turn: slide 2 holds for one slot, slide 3 for two, then every delay
   keeps repeating. (Negative delays were the obvious alternative, but they
   run the order BACKWARDS - the most-advanced slide comes round soonest.) */
.hero-rotator__slide:nth-child(2) { animation-delay: var(--hero-rotate-slot, 8s); }
.hero-rotator__slide:nth-child(3) { animation-delay: calc(var(--hero-rotate-slot, 8s) * 2); }

/* 0% is "just finished fading in", so the first slide is on screen at load.
   Each fade overlaps the next, which is what keeps the slot from blinking
   empty on the wrap from the last slide back to the first. */
@keyframes heroRotatorLoop {
  0%, 29.1667%       { opacity: 1; visibility: visible; }
  33.3333%, 95.8333% { opacity: 0; visibility: hidden; }
  100%               { opacity: 1; visibility: visible; }
}

/* The stack's inputs and outcomes only read while its labels are big enough,
   and that needs a wide column: the labels are 11 units in a 616-unit viewBox,
   so at /2's split - where the visual lands around 440px - they render at
   about 8px. /3 therefore borrows /1's split, giving the diagram the bigger
   half of the hero. The copy column is correspondingly narrow, which is why
   the CTA pair is tightened in the range where it would otherwise wrap: the
   same fix, and the same reason, as /1 (see 17c). */
@media (min-width: 1024px) {
  .hero--v-rotate .hero__grid {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  }
  /* The copy column is narrow here, so the CTA pair has to be tightened to
     stay on one line - same as /1, and for the same reason. */
  .hero--v-rotate .hero__cta { padding: 13px 19px; font-size: 0.875rem; }
  /* The column tops out around 620px, which is the width the stack's labels
     are sized for. The cap keeps that true for the two TALL visuals too: the
     rotator has to hold the globe as well, and it would otherwise grow with
     the column and push the hero down the page. */
  .hero--v-rotate .hero__visual { max-width: 620px; }
}
/* Mid-size desktops: tighter again, or the pair wraps. */
@media (min-width: 1024px) and (max-width: 1239px) {
  .hero--v-rotate .hero__grid {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr);
  }
  .hero--v-rotate .hero__cta { padding: 12px 17px; font-size: 0.84rem; }
}

/* ---------- 9. Cards ---------- */
.card {
  position: relative;
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
  overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(var(--accent-1-rgb), 0.9), transparent 42%, rgba(var(--accent-2-rgb), 0.75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.card::after {
  content: '';
  position: absolute;
  width: 260px; height: 260px;
  top: var(--my, 50%); left: var(--mx, 50%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(var(--accent-1-rgb), 0.16), transparent 66%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.card:hover::before,
.card:hover::after { opacity: 1; }

.card--flat::after { display: none; }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  border-radius: 14px;
  margin-bottom: 22px;
  border: 1px solid rgba(var(--accent-1-rgb), 0.2);
  background: linear-gradient(150deg, rgba(var(--accent-1-rgb), 0.2), rgba(var(--accent-2-rgb), 0.12));
  color: var(--accent-1);
}
.card__icon .icon { width: 24px; height: 24px; }
.card--violet .card__icon { color: var(--accent-2); border-color: rgba(var(--accent-2-rgb), 0.22); background: linear-gradient(150deg, rgba(var(--accent-2-rgb), 0.2), rgba(var(--accent-1-rgb), 0.1)); }
.card--lime .card__icon { color: var(--accent-3); border-color: rgba(var(--accent-3-rgb), 0.24); background: linear-gradient(150deg, rgba(var(--accent-3-rgb), 0.22), rgba(var(--accent-1-rgb), 0.1)); }

.card__kicker {
  font-size: 0.72rem;
  line-height: 1.5;
  /* Reserve three lines so card titles line up across a row regardless of
     how long each kicker is. */
  min-height: 4.5em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 10px;
}
.card h3 { margin-bottom: 12px; }
.card p { font-size: 0.95rem; }

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.tag {
  font-size: 0.72rem;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--tint);
  color: var(--text-dim);
}

.card__foot {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Feature (solution) card — larger, image-free, gradient plate */
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.feature-card .card__foot { margin-top: auto; }
.feature-card .card__tags { margin-bottom: 4px; }
.feature-card__glow {
  position: absolute;
  inset: auto -30% -55% -30%;
  height: 60%;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-1-rgb), 0.22), transparent 70%);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.feature-card:hover .feature-card__glow { opacity: 1; }
.feature-card--violet .feature-card__glow { background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-2-rgb), 0.24), transparent 70%); }
.feature-card--lime .feature-card__glow { background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-3-rgb), 0.22), transparent 70%); }

/* ---------- 10. Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.stat {
  background: var(--surface-solid);
  padding: clamp(24px, 3vw, 36px);
  transition: background 0.4s var(--ease);
}
.stat:hover { background: var(--tint); }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}
.stat__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: 4px;
}
.stat__sub { font-size: 0.82rem; color: var(--muted); }

/* ---------- 11. Marquee ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 22px;
  border-block: 1px solid var(--line);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  padding-inline: clamp(24px, 3vw, 46px);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.28rem);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.35s ease;
}
.marquee__item:hover { color: var(--cyan); }@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------- 12. News ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 34px;
}
.filter-chip {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--text-dim);
  font-size: 0.82rem;
  font-family: var(--font-display);
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.filter-chip:hover { color: var(--text); border-color: var(--line-strong); }
.filter-chip.is-active {
  background: linear-gradient(100deg, rgba(var(--accent-1-rgb), 0.22), rgba(var(--accent-2-rgb), 0.18));
  border-color: rgba(var(--accent-1-rgb), 0.45);
  color: var(--accent-1);
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease),
              background 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.news-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--accent-1-rgb), 0.4);
  background: linear-gradient(165deg, rgba(var(--accent-1-rgb), 0.09), rgba(var(--accent-2-rgb), 0.05));
  box-shadow: var(--shadow);
}
.news-card__type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--cyan);
}
.news-card__type .icon { width: 14px; height: 14px; }
.news-card h3 {
  font-size: 1.16rem;
  line-height: 1.3;
  margin: 0;
}
.news-card__date {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.news-card__date .icon { width: 14px; height: 14px; }

.news-card--featured {
  grid-column: span 2;
  background: linear-gradient(150deg, rgba(var(--accent-1-rgb), 0.16), rgba(var(--accent-2-rgb), 0.1) 60%, var(--surface-solid));
}
@media (max-width: 720px) {
  .news-card--featured { grid-column: span 1; }
}

/* ---------- 13. Team ---------- */
.person {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 2.6vw, 32px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.person:hover { transform: translateY(-5px); border-color: rgba(var(--accent-2-rgb), 0.35); box-shadow: var(--shadow); }
.person__avatar {
  width: 62px; height: 62px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--btn-text);
  background: var(--gradient-avatar);
  box-shadow: 0 14px 30px -16px rgba(var(--accent-2-rgb), 0.5);
}
.person__name { font-family: var(--font-display); font-size: 1.14rem; font-weight: 600; }
.person__role {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-top: 4px;
}
.person p { font-size: 0.92rem; margin: 0; }

/* ---------- 14. Offices ---------- */
.office {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.office:hover { transform: translateY(-4px); border-color: rgba(var(--accent-1-rgb), 0.35); box-shadow: var(--shadow); }
.office__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.office__city {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 9px;
}
.office__city .icon { width: 16px; height: 16px; color: var(--cyan); }
.office__badge {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-3-rgb), 0.3);
  color: var(--accent-3);
  background: rgba(var(--accent-3-rgb), 0.14);
}
.office address {
  font-style: normal;
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.7;
}
.office__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
}
.office__links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-dim);
  transition: color 0.3s ease;
}
.office__links a:hover { color: var(--cyan); }
.office__links .icon { width: 14px; height: 14px; }

/* ---------- 15. CTA band ---------- */
.cta-band {
  position: relative;
  padding: clamp(38px, 5vw, 66px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 130% at 12% 0%, rgba(var(--accent-1-rgb), 0.22), transparent 60%),
    radial-gradient(ellipse 70% 130% at 88% 100%, rgba(var(--accent-2-rgb), 0.18), transparent 60%),
    var(--surface-solid);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  overflow: hidden;
}
.cta-band__inner {
  display: grid;
  gap: 28px;
  align-items: center;
}
@media (min-width: 880px) {
  .cta-band__inner { grid-template-columns: 1.4fr auto; }
}
.cta-band h2 { margin-bottom: 12px; }
.cta-band p { max-width: 52ch; }

/* ---------- 16. Forms ---------- */
.form {
  display: grid;
  gap: 18px;
}
.field { display: grid; gap: 8px; }
.field label {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--muted);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--input-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: rgba(var(--accent-1-rgb), 0.6);
  background: var(--input-bg);
  box-shadow: 0 0 0 4px rgba(var(--accent-1-rgb), 0.2);
}
.field--row { grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .field--row { grid-template-columns: 1fr; } }

.form-note { font-size: 0.82rem; color: var(--muted); }

.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--accent-1-rgb), 0.35);
  background: rgba(var(--accent-1-rgb), 0.12);
  color: var(--text);
  font-size: 0.9rem;
  margin-bottom: 24px;
}
.alert .icon { color: var(--accent-1); flex: none; margin-top: 2px; }

/* ---------- 17. Content blocks ---------- */
.prose { max-width: 74ch; }
.prose h2 { margin-top: 1.8em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { color: var(--text-dim); padding-left: 20px; }
.prose li { margin-bottom: 0.5em; }

.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.checklist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--text-dim);
}
.checklist .icon {
  flex: none;
  width: 20px; height: 20px;
  padding: 3px;
  border-radius: 50%;
  color: var(--accent-1);
  background: rgba(var(--accent-1-rgb), 0.16);
  margin-top: 1px;
}

.panel {
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
}

.page-hero {
  padding-top: calc(var(--header-h) + clamp(48px, 7vw, 92px));
  padding-bottom: clamp(40px, 5vw, 72px);
}
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); }
.page-hero .lede { margin-top: 20px; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 22px;
}
.breadcrumb a:hover { color: var(--cyan); }
.breadcrumb .sep { opacity: 0.45; }

.job {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.job:hover { transform: translateX(5px); border-color: rgba(var(--accent-1-rgb), 0.4); box-shadow: var(--shadow); }
.job__title { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; margin-bottom: 8px; }
.job__meta { display: flex; flex-wrap: wrap; gap: 8px; }

.quote-block {
  position: relative;
  padding-left: 26px;
  border-left: 2px solid rgba(var(--accent-1-rgb), 0.5);
  font-size: 1.05rem;
  color: var(--text);
}

/* ---------- 17b. Home page sections (variant /2) ---------- */

/* --- Section heads ------------------------------------------------------ */
.section-head--split,
.section-head--row { max-width: none; }

.section-head--split {
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
}
.section-head--split .kicker { margin-bottom: 0; }
.section-head--split h2 { margin: 0; }
@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: 1.05fr 0.95fr;
    column-gap: clamp(32px, 5vw, 84px);
    align-items: end;
  }
  .section-head--split .kicker { grid-column: 1 / -1; }
  .section-head--split .lede { margin: 0; }
}

.section-head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.section-head--row .kicker { margin-bottom: 14px; }
.section-head--row h2 { margin: 0; }

/* --- Capability cards --------------------------------------------------- */
.capability {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.capability:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-1-rgb), 0.35);
  box-shadow: var(--shadow);
}
.capability__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-1-rgb), 0.22);
  background: var(--tint);
  color: var(--accent-1);
}
.capability__icon .icon { width: 21px; height: 21px; }
.capability__title {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  margin: 0;
}
.capability p { font-size: 0.92rem; margin: 0; }
.capability__link { margin-top: auto; padding-top: 6px; font-size: 0.88rem; }

/* --- Media plates ------------------------------------------------------- */
/* Stand-ins for photography. Built from the brand palette so the layout reads
   as finished; swap for real imagery when it is available. */
.media {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(ellipse 130% 100% at 24% 0%, rgba(var(--accent-1-rgb), 0.85), transparent 64%),
    linear-gradient(150deg, rgba(var(--accent-3-rgb), 0.62), rgba(var(--accent-3-rgb), 0.98));
}
.media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--accent-1-rgb), 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-1-rgb), 0.32) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.55;
  mask-image: radial-gradient(ellipse 85% 85% at 74% 26%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 74% 26%, #000, transparent 76%);
}
.media--card { aspect-ratio: 16 / 10; border-radius: 0; }
.media--industry {
  aspect-ratio: 3 / 2;
  border-radius: 0;
  background: linear-gradient(155deg,
    rgba(var(--accent-1-rgb), 0.55),
    rgba(var(--accent-1-rgb), 0.22) 52%,
    rgba(var(--accent-3-rgb), 0.7));
}
.media--case {
  border-radius: 0;
  height: 100%;
  min-height: 220px;
}

/* --- Product cards ------------------------------------------------------ */
.product-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--accent-3);
  color: var(--btn-text);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 20px 22px 22px;
}
.product-card__name {
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 600;
}
.product-card__text { font-size: 0.88rem; line-height: 1.5; opacity: 0.78; }
.product-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.product-card__more .icon { transition: transform 0.2s var(--ease); }
.product-card:hover .product-card__more { opacity: 1; }
.product-card:hover .product-card__more .icon { transform: translateX(3px); }

/* --- Industry cards ----------------------------------------------------- */
.industry {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.industry:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-1-rgb), 0.35);
  box-shadow: var(--shadow);
}
.industry__label {
  padding: 15px 17px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
}

/* --- Clients ------------------------------------------------------------ */
.clients__eyebrow { text-align: center; margin-bottom: 26px; }
.clients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 64px);
  padding-block: clamp(22px, 2.8vw, 34px);
  border-block: 1px solid var(--line);
}
.clients__item {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  font-weight: 600;
  color: var(--muted);
  transition: color 0.3s ease;
}
.clients__item:hover { color: var(--text); }

/* --- Case study --------------------------------------------------------- */
.case-study {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 960px) {
  .case-study { grid-template-columns: 0.85fr 1.15fr; }
}
.case-study__intro h2 { margin-bottom: 24px; }

.case-study__card {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--accent-3);
  color: var(--btn-text);
  box-shadow: var(--shadow);
}
@media (min-width: 620px) {
  .case-study__card { grid-template-columns: 0.9fr 1.1fr; }
}
.case-study__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 2.8vw, 34px);
}
.case-study__badge {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 11px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.8;
}
.case-study__body h3 {
  margin: 0;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  color: inherit;
}
.case-study__body p {
  margin: 0;
  font-size: 0.92rem;
  color: inherit;
  opacity: 0.78;
}
.case-study__body .btn--link {
  margin-top: auto;
  padding-top: 10px;
  color: inherit;
  opacity: 0.85;
}
.case-study__body .btn--link:hover { color: inherit; opacity: 1; }

/* ---------- 17c. Home page sections (variant /1) ---------- */

/* --- Hero layout for the AI platform diagram ---------------------------- */
/* The diagram carries labels either side of the platform, so it earns more
   of the hero than the other visuals do. */
.hero--v-stack .hero__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .hero--v-stack .hero__grid {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  }
}
.hero--v-stack .hero__visual { max-width: 780px; }
/* The copy column is narrower here, so the CTA pair has to be tighter to
   stay on one line beside the diagram. */
.hero--v-stack .hero__actions { gap: 10px; }
.hero--v-stack .hero__cta { padding: 13px 19px; font-size: 0.875rem; }

/* --- Hero footer strip: proof points left, positioning line right ------- */
.hero__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  margin-top: clamp(38px, 4.5vw, 66px);
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--line);
}
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.87rem;
  color: var(--text-dim);
}
.hero__trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-1-rgb), 0.28);
  background: var(--tint);
  color: var(--accent-1);
}
.hero__trust-icon .icon { width: 15px; height: 15px; }
.hero__footnote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- AI platform diagram ------------------------------------------------ */
.visual-stack { width: 100%; }

/* Holds the single definition of the artwork, referenced by both crops. */
.ai-stack__art { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Only one crop is ever shown; see the responsive block below. */
.ai-stack--compact { display: none; }

/* The compact crop is cut to the platform, so the connectors would appear as
   orphaned stubs at its edges. Custom properties are the one thing that
   inherits across a <use> shadow boundary, which is why this is a variable
   rather than a selector on the link itself. */
.ai-stack__links { opacity: var(--ai-links-opacity, 1); }
.ai-stack--compact { --ai-links-opacity: 0; }

.ai-stack__glow-in  { stop-color: var(--hero-accent); stop-opacity: 0.11; }
.ai-stack__glow-out { stop-color: var(--hero-accent); stop-opacity: 0; }

.ai-stack__link {
  fill: none;
  stroke: var(--hero-accent);
  stroke-width: 1.4;
  stroke-opacity: 0.3;
}
/* One dot running each connector: a single short dash with a long gap,
   swept by animating the offset through exactly one period. */
.ai-stack__flow {
  fill: none;
  stroke: var(--hero-accent);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 0.1 175;
  animation: aiStackFlow 3.4s linear infinite;
}
@keyframes aiStackFlow {
  from { stroke-dashoffset: 175; }
  to   { stroke-dashoffset: 0; }
}

/* Translucent sheets. They overlap, so alpha accumulates toward the middle -
   the per-layer values stay low to keep that from turning to mud. The top
   face uses --accent-2-rgb, which is the palette's lighter blue: the plates
   read as lit from above, with the two side faces falling away in tone. */
.ai-stack__face-top {
  fill: rgba(var(--accent-2-rgb), 0.14);
  stroke: rgba(var(--accent-2-rgb), 0.92);
  stroke-width: 1.3;
}
.ai-stack__face-left  { fill: rgba(var(--accent-1-rgb), 0.15); }
.ai-stack__face-right { fill: rgba(var(--accent-1-rgb), 0.23); }

.ai-stack__layer--base .ai-stack__face-top--base {
  fill: rgba(var(--accent-2-rgb), 0.26);
  stroke: rgba(var(--accent-1-rgb), 0.7);
}
.ai-stack__layer--base .ai-stack__face-left  { fill: rgba(var(--accent-1-rgb), 0.3); }
.ai-stack__layer--base .ai-stack__face-right { fill: rgba(var(--accent-1-rgb), 0.36); }

.ai-stack__mark {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.06em;
  fill: var(--accent-2);
  opacity: 0.9;
}

.ai-stack__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--muted);
}
.ai-stack__port { fill: var(--hero-accent); }
.ai-stack__box {
  fill: var(--bg-soft);
  fill-opacity: 0.55;
  stroke: rgba(var(--accent-1-rgb), 0.3);
  stroke-width: 1.2;
}
.ai-stack__glyph {
  fill: none;
  stroke: var(--hero-accent);
  stroke-width: 1.5;
}

/* --- Impact band -------------------------------------------------------- */
.impact-band {
  padding: clamp(26px, 3vw, 40px) clamp(22px, 3vw, 42px);
  border-radius: var(--radius-lg);
  background: var(--tint);
}
.impact-band .kicker { margin-bottom: 22px; }
/* Inside the band the stats read as a plain row, not a bordered card. */
.impact-band .stats {
  gap: clamp(20px, 3vw, 44px);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.impact-band .stat { padding: 0; background: none; }
.impact-band .stat:hover { background: none; }

/* --- Section head link -------------------------------------------------- */
.section-head__link { margin-top: 18px; }

/* --- Rich industry cards ------------------------------------------------ */
.industry--rich {
  border: 0;
  background: none;
  box-shadow: none;
  transition: none;
}
.industry--rich:hover { transform: none; border-color: transparent; box-shadow: none; }
.industry--rich .media--industry {
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 130% 92% at 18% 114%, rgba(var(--accent-1-rgb), 0.45), transparent 66%),
    linear-gradient(168deg,
      rgba(var(--accent-1-rgb), 0.3),
      rgba(var(--accent-1-rgb), 0.14) 52%,
      rgba(var(--accent-3-rgb), 0.22));
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
/* The shared .media plate overlays a technical grid; a photograph wants a
   clean ground behind it. That overlay slot is reused for the gradient glaze
   instead. */
.industry--rich .media--industry::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  pointer-events: none;
  background:
    linear-gradient(178deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 44%),
    linear-gradient(0deg, rgba(var(--accent-3-rgb), 0.3), rgba(var(--accent-3-rgb), 0) 58%);
  transition: opacity 0.6s var(--ease);
}

/* A sheen that drifts across on hover. Sits above the glaze, hence z-index 3
   over the image's auto. */
.industry--rich .media--industry::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 36%,
    rgba(255, 255, 255, 0.38) 50%,
    rgba(255, 255, 255, 0) 64%);
  transform: translateX(-120%);
}
.industry--rich:hover .media--industry::before {
  animation: industrySheen 1.4s var(--ease-out);
}
@keyframes industrySheen {
  0%   { opacity: 0; transform: translateX(-120%); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(120%); }
}

.industry--rich:hover .media--industry {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

/* --- Industry card images ------------------------------------------------ */
/* Positioned over the plate rather than replacing it: while a lazy-loaded
   image is still in flight the gradient below stands in, which is why the two
   share a palette. The source artwork is cropped to 3:2 by
   tools/build_industry_images.py, matching .media--industry exactly, so
   object-fit never actually has to crop. */
.industry__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.industry__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px 2px 0;
}
.industry__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
}
.industry__text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}
.industry__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--accent-1);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.industry__go .icon { width: 16px; height: 16px; }
.industry__go:hover {
  background: var(--accent-3);
  border-color: var(--accent-3);
  color: var(--btn-text);
}

/* --- Success story ------------------------------------------------------ */
.story {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 960px) {
  .story { grid-template-columns: 0.82fr 1.18fr; }
}
.story__intro h2 { margin-bottom: 18px; }
.story__intro p { margin: 0 0 24px; color: var(--text-dim); }

.story__media {
  display: grid;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--accent-3);
}
@media (min-width: 720px) {
  .story__media { grid-template-columns: minmax(0, 1fr) auto; }
}
/* The photo and the panel sit side by side rather than overlapping: the
   supplied artwork is a 3:1 panorama whose subject sits toward the right, so a
   panel laid over the right-hand side would cover exactly the part worth
   looking at.

   Deliberately NO aspect-ratio. The panel is taller than a 3:2 crop of this
   column, and an aspect-ratio would win over the grid's default stretch - it
   leaves a strip of the card's own background showing under the picture. Let
   the item stretch and the photo fills the card, with object-fit taking the
   few percent of crop that costs. Below 720px the two stack, and there the
   <img>'s width/height attributes still reserve the ratio. */
.media--story {
  border-radius: 0;
}
/* The shared .media plate draws a technical grid; a photograph wants a clean
   ground behind it. */
.media--story::after { display: none; }
.story__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story__panel {
  display: grid;
  align-content: center;
  gap: clamp(14px, 1.6vw, 22px);
  min-width: clamp(180px, 16vw, 250px);
  padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 30px);
  background: var(--accent-3);
  color: var(--btn-text);
}
.story__stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.story__stat-label {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  opacity: 0.75;
}

/* --- Full-bleed CTA band ------------------------------------------------ */
/* Unlike the default rounded card this runs edge to edge, so the caller must
   not wrap it in a .container. */
.cta-band--full {
  padding: clamp(52px, 6vw, 84px) var(--gutter);
  border: 0;
  border-radius: 0;
  background: var(--accent-3);
  color: var(--btn-text);
  box-shadow: none;
  backdrop-filter: none;
}
.cta-band--full .cta-band__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
}
.cta-band--full h2 { color: var(--btn-text); }
.cta-band--full p { color: rgba(255, 255, 255, 0.76); }
.cta-band--full .kicker { color: rgba(255, 255, 255, 0.72); }

/* Dot field, softened toward the edges. */
.cta-band__waves {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.55) 1px, transparent 1.7px);
  background-size: 15px 15px;
  opacity: 0.2;
  mask-image: radial-gradient(ellipse 78% 140% at 76% 50%, #000, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse 78% 140% at 76% 50%, #000, transparent 74%);
}

.btn--on-dark {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--accent-3);
}
.btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(255, 255, 255, 0.86);
  color: var(--accent-3);
}

/* --- Variant /1 responsive ---------------------------------------------- */
/* Mid-size desktops get a slightly wider copy column and tighter CTAs, or the
   button pair drops onto a second line. */
@media (min-width: 1024px) and (max-width: 1239px) {
  .hero--v-stack .hero__grid {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr);
  }
  .hero--v-stack .hero__cta { padding: 12px 17px; font-size: 0.84rem; }
}

/* Once the diagram is scaled down its side labels fall below legibility, so
   the compact crop - which is cut to the platform itself - takes over. The
   copy column is capped at the same time: the headline is sized in cqw, so a
   full-width column would blow it up far past its two-column size. */
@media (max-width: 1023px) {
  .ai-stack--wide { display: none; }
  .ai-stack--compact { display: block; }
  .hero--v-stack .hero__visual { max-width: 360px; }
  .hero--v-stack .hero__content { max-width: 660px; }
}

@media (max-width: 620px) {
  .hero__footer { flex-direction: column; align-items: flex-start; }
}

/* ---------- 18. Footer ---------- */
.site-footer {
  margin-top: clamp(60px, 9vw, 120px);
  padding-block: clamp(48px, 6vw, 78px) 34px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, var(--bg-soft));
}
.footer-top {
  display: grid;
  gap: clamp(34px, 5vw, 70px);
  grid-template-columns: 1fr;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 960px) {
  .footer-top { grid-template-columns: 0.9fr 1.6fr; }
}
.footer-brand__copy { margin-top: 20px; max-width: 34ch; font-size: 0.92rem; }
.footer-mail {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-display);
  color: var(--cyan);
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(var(--accent-1-rgb), 0.35);
  padding-bottom: 2px;
}
.footer-cols {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.footer-col h4 {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a {
  font-size: 0.9rem;
  color: var(--text-dim);
  transition: color 0.3s ease, padding-left 0.3s ease;
}
.footer-col a:hover { color: var(--cyan); padding-left: 4px; }
.footer-bottom {
  padding-top: 28px;
  display: grid;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--muted);
}
.footer-bottom p { margin: 0; font-size: 0.8rem; }
.footer-legal { max-width: 88ch; opacity: 0.8; }

/* ---------- 19. Reveal animations ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-reveal-delay='1'] { transition-delay: 0.08s; }
[data-reveal-delay='2'] { transition-delay: 0.16s; }
[data-reveal-delay='3'] { transition-delay: 0.24s; }
[data-reveal-delay='4'] { transition-delay: 0.32s; }
[data-reveal-delay='5'] { transition-delay: 0.4s; }

/* ---------- 20. Responsive ---------- */
.hide-sm { display: inline-flex; }

@media (max-width: 1024px) {
  .hide-sm { display: none; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    margin: 0;
    padding: 14px var(--gutter) 26px;
    background: var(--bg-elev);
    backdrop-filter: blur(22px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  /* The nav leaves the flow when it collapses, so anchor the actions right. */
  .site-header__actions { margin-left: auto; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link {
    padding: 15px 16px;
    border-radius: 12px;
    font-size: 1rem;
    border-bottom: 1px solid var(--line);
  }
  .nav__link::after { display: none; }
  .nav__link.is-active { background: var(--tint); }

  .nav-toggle { display: flex; }
}

@media (max-width: 720px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 21. Motion / print ---------- */


@media print {
  .fx, .site-header, .site-footer, .scroll-progress { display: none; }
  body { background: #fff; color: #000; }
}