/* ==========================================================================
   RASTTSec — Design System
   Self-contained. No external fonts, images, or scripts (strict CSP safe).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;

  --bg: #04060a;
  --bg-elev: #070a10;
  --surface: #0b1017;
  --surface-2: #0f151e;
  --surface-3: #131a25;

  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);

  --text: #e9eff7;
  --text-2: #b6c2d2;
  --muted: #93a1b3;
  --muted-2: #8494a6;

  --mint: #cdff4f;
  --mint-dim: #1ec88c;
  --blue: #3d7bff;
  --red: #ff4d6d;
  --amber: #f5a524;

  --grad: linear-gradient(115deg, #cdff4f 0%, #37d8c0 40%, #3d7bff 100%);
  --grad-soft: linear-gradient(115deg, rgba(205, 255, 79, 0.16), rgba(61, 123, 255, 0.16));

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 30px;

  --maxw: 1180px;
  --gutter: clamp(18px, 4vw, 40px);

  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 50px -24px rgba(0, 0, 0, 0.9);
  --shadow-2: 0 40px 90px -40px rgba(0, 0, 0, 0.95);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.5s;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.nav-open { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

h1 { font-size: clamp(2.3rem, 6vw, 4.15rem); }
h2 { font-size: clamp(1.85rem, 3.8vw, 2.85rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.06rem; }

p { margin: 0; color: var(--text-2); }

::selection { background: rgba(205, 255, 79, 0.28); color: #fff; }

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

/* ---------- Sprite ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.section { padding-block: clamp(64px, 9vw, 122px); position: relative; }
.section--tight { padding-block: clamp(44px, 6vw, 76px); }
.section--alt { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.017) 12%, rgba(255, 255, 255, 0.017) 88%, transparent); }

.stack { display: grid; gap: 18px; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: 62ch; }
.measure-sm { max-width: 48ch; }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--mint);
  color: #04140e;
  border-radius: var(--r-sm);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: none; }

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--mint);
  opacity: 0.7;
}
.eyebrow--plain::before { display: none; }

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

.lead { font-size: clamp(1rem, 1.5vw, 1.13rem); color: var(--text-2); }
.small { font-size: 0.875rem; }
.tiny { font-size: 0.78rem; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.hr {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
  border: 0;
  margin: 0;
}

.section-head { max-width: 720px; margin-bottom: clamp(34px, 5vw, 58px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* ---------- Ambient background ---------- */
.bg-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-fx__grid {
  position: absolute;
  inset: -20% -10% 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 10%, transparent 72%);
  animation: none;
}
.bg-fx__orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0.55;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.bg-fx__orb--a {
  width: 620px; height: 620px;
  top: -280px; left: -120px;
  background: radial-gradient(circle, rgba(205, 255, 79, 0.5), transparent 68%);
  animation: float1 20s ease-in-out infinite;
}
.bg-fx__orb--b {
  width: 560px; height: 560px;
  top: 5%; right: -180px;
  background: radial-gradient(circle, rgba(61, 123, 255, 0.45), transparent 68%);
  animation: float2 26s ease-in-out infinite;
}
.bg-fx__noise {
  position: absolute; inset: 0; opacity: 0.035;
  background-image: radial-gradient(rgba(255, 255, 255, 0.7) 0.5px, transparent 0.5px);
  background-size: 4px 4px;
}
@keyframes gridDriftT { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(62px, 62px, 0); } }
@keyframes float1 { 50% { transform: translate3d(60px, 40px, 0) scale(1.08); } }
@keyframes float2 { 50% { transform: translate3d(-50px, 60px, 0) scale(1.1); } }

.page { position: relative; z-index: 1; }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 90;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: linear-gradient(180deg, rgba(6, 8, 12, 0.97), rgba(6, 8, 12, 0.93));
  border-bottom-color: rgba(205, 255, 79, 0.14);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 72px;
}
.header__progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px; width: 0;
  background: var(--grad);
  transition: width 0.1s linear;
}

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo__mark { width: 32px; height: 32px; flex: none; object-fit: contain; }
/* the source mark is a 256px png, so it stays crisp on high-density screens */
.logo__mark .lg-ring { fill: none; stroke: url(#lgGrad); stroke-width: 2.2; }
.logo__mark .lg-core { fill: url(#lgGrad); }
.logo__mark .lg-tick { stroke: var(--bg); stroke-width: 2.2; stroke-linecap: round; }
.logo__text { font-weight: 700; font-size: 1.12rem; letter-spacing: -0.035em; }
.logo__text span { color: var(--muted); font-weight: 500; }

/* ---------- Nav ---------- */
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__link {
  position: relative;
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-2);
  transition: color 0.22s var(--ease), background 0.22s var(--ease);
}
.nav__link:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.nav__link.is-active { color: #fff; }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}
.nav__item { position: relative; }
.nav__caret { width: 9px; height: 9px; margin-left: 5px; opacity: 0.6; }
.nav__link.is-open .nav__caret { transform: rotate(180deg); }
.nav__caret { transition: transform 0.25s var(--ease); }

.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: -14px;
  width: 560px;
  padding: 16px;
  background: rgba(8, 11, 16, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.985);
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
}
.nav__item.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.dropdown__item {
  display: flex;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--r-sm);
  transition: background 0.2s var(--ease);
}
.dropdown__item:hover { background: rgba(255, 255, 255, 0.055); }
.dropdown__icon {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--grad-soft);
  border: 1px solid var(--line);
  color: var(--mint);
}
.dropdown__icon svg { width: 17px; height: 17px; }
.dropdown__t { font-size: 0.9rem; font-weight: 550; color: #fff; }
.dropdown__d { font-size: 0.78rem; color: var(--muted); line-height: 1.45; }
.dropdown__foot {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--muted);
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.93rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  transition: transform 0.22s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--grad);
  color: #04140e;
  box-shadow: 0 12px 34px -14px rgba(205, 255, 79, 0.75);
}
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  transform: translateX(-130%);
  transition: transform 0.75s var(--ease);
}
.btn--primary:hover::after { transform: translateX(130%); }
.btn--primary:hover { box-shadow: 0 18px 44px -14px rgba(205, 255, 79, 0.85); }

.btn--ghost {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line-2);
  color: var(--text);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.26); }

.btn--quiet { padding: 9px 14px; font-size: 0.87rem; color: var(--text-2); }
.btn--quiet:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }

.btn--lg { padding: 16px 28px; font-size: 1rem; }
.btn--sm { padding: 10px 17px; font-size: 0.87rem; }
.btn--full { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--mint);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Chips / badges ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}
.chip--mint { color: var(--mint); border-color: rgba(205, 255, 79, 0.32); background: rgba(205, 255, 79, 0.08); }
.chip--blue { color: #8fb3ff; border-color: rgba(61, 123, 255, 0.32); background: rgba(61, 123, 255, 0.1); }
.chip--red { color: #ff8fa3; border-color: rgba(255, 77, 109, 0.3); background: rgba(255, 77, 109, 0.1); }
.chip--amber { color: #ffc766; border-color: rgba(245, 165, 36, 0.3); background: rgba(245, 165, 36, 0.1); }
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(205, 255, 79, 0.16);
  animation: pulseDot 2.4s ease-in-out infinite;
}
.dot--red { background: var(--red); box-shadow: 0 0 0 4px rgba(255, 77, 109, 0.16); }
@keyframes pulseDot { 50% { opacity: 0.45; } }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Cards ---------- */
.card {
  position: relative;
  padding: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.card--hover:hover {
  transform: translateY(-5px);
  border-color: rgba(205, 255, 79, 0.34);
  background: linear-gradient(180deg, rgba(205, 255, 79, 0.06), rgba(255, 255, 255, 0.014));
}
.card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--grad-soft);
  border: 1px solid var(--line-2);
  color: var(--mint);
  margin-bottom: 18px;
  transition: transform 0.4s var(--ease-out);
}
.card__icon svg { width: 21px; height: 21px; }
.card--hover:hover .card__icon { transform: scale(1.07) rotate(-4deg); }
.card--hover { transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.card--hover:hover { box-shadow: 0 30px 70px -34px rgba(205, 255, 79, 0.5); }
.card__title { margin-bottom: 9px; }
.card__body { font-size: 0.93rem; color: var(--muted); }
.card__foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- Grids ---------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--wide { gap: 26px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(56px, 9vw, 104px) clamp(48px, 7vw, 84px); }
.hero__grid {
  display: grid;
  /* single column: the hero carried a panel beside the headline until it was removed for
     clarity. The measure is capped so the headline does not stretch on a wide display. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}
.hero__grid > div { max-width: 940px; }
.hero__title { margin-bottom: 20px; }
.hero__lead { font-size: clamp(1rem, 1.6vw, 1.16rem); max-width: 56ch; }
.hero__cta { margin-top: 30px; }
.hero__meta {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
}
.hero__meta div { display: flex; flex-direction: column; gap: 2px; }
.hero__meta b { font-size: 1.28rem; font-weight: 650; letter-spacing: -0.03em; }
.hero__meta span { font-size: 0.76rem; color: var(--muted); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
.spotlight {
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(205, 255, 79, 0.13), transparent 62%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  z-index: 0;
}
.hero:hover .spotlight { opacity: 1; }
.hero > .container { position: relative; z-index: 1; }

/* ---------- Terminal card ---------- */
.terminal {
  position: relative;
  background: linear-gradient(180deg, #070b11, #05080d);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.terminal::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(205, 255, 79, 0.5), transparent 40%, rgba(61, 123, 255, 0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.terminal__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.terminal__bar i { width: 10px; height: 10px; border-radius: 50%; background: #2a323d; }
.terminal__bar i:nth-child(1) { background: #ff5f57; }
.terminal__bar i:nth-child(2) { background: #ffbd2e; }
.terminal__bar i:nth-child(3) { background: #28c840; }
.terminal__name { margin-left: 8px; font-family: var(--mono); font-size: 0.74rem; color: var(--muted); }
.terminal__body {
  padding: 18px;
  font-family: var(--mono);
  font-size: 0.79rem;
  line-height: 1.85;
  min-height: 286px;
}
.tl { white-space: pre-wrap; word-break: break-word; }
.tl-p { color: var(--mint); }
.tl-c { color: var(--text); }
.tl-m { color: var(--muted); }
.tl-d { color: var(--muted-2); }
.tl-w { color: var(--amber); }
.tl-r { color: var(--red); }
.tl-b { color: #7ea8ff; }
.cursor { display: inline-block; width: 8px; height: 15px; background: var(--mint); vertical-align: -2px; animation: blink 1.05s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Marquee ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  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; gap: 54px; width: max-content; animation: slide 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee--rev .marquee__track { animation-direction: reverse; }
@keyframes slide { to { transform: translateX(-50%); } }

/* --- client logos: a slow, seamless flow. Greyscale at rest, full colour on
   hover, paused while the cursor is over the strip, soft fades at both edges so
   a logo never looks cut off mid-scroll. --- */
.clients-flow {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 96px, #000 calc(100% - 96px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 96px, #000 calc(100% - 96px), transparent);
}
.clients-flow__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: clientsFlow var(--flow, 40s) linear infinite;
  will-change: transform;
}
.clients-flow:hover .clients-flow__track { animation-play-state: paused; }
.clients-flow__item {
  display: grid;
  place-items: center;
  margin-right: 64px;
  opacity: .62;
  filter: grayscale(1);
  transition: opacity .25s ease, filter .25s ease;
}
.clients-flow__item:hover { opacity: 1; filter: grayscale(0); }
.clients-flow__item img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}
@keyframes clientsFlow { to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 560px) {
  .clients-flow {
    mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  }
  .clients-flow__item { margin-right: 40px; }
  .clients-flow__item img { height: 30px; max-width: 130px; }
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.trust-item:hover { color: var(--text-2); }
.trust-item svg { width: 15px; height: 15px; color: var(--mint); opacity: 0.8; }

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat { padding: 30px 26px; background: var(--bg-elev); }
.stat__n {
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 650;
  letter-spacing: -0.045em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.stat__l { margin-top: 9px; font-size: 0.83rem; color: var(--muted); }

/* ---------- Timeline ---------- */
.timeline { position: relative; display: grid; gap: 0; }
.timeline__row {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 22px;
  padding-bottom: 30px;
  position: relative;
}
.timeline__row:last-child { padding-bottom: 0; }
.timeline__row::before {
  content: "";
  position: absolute;
  left: 30px; top: 44px; bottom: -2px;
  width: 2px;
  background: linear-gradient(180deg, rgba(205, 255, 79, 0.4), rgba(255, 255, 255, 0.05));
}
.timeline__row:last-child::before { display: none; }
.timeline__step {
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--mint);
  z-index: 1;
}
.timeline__body { padding-top: 8px; }
.timeline__body p { font-size: 0.92rem; color: var(--muted); }

/* ---------- Work / case cards ---------- */
.work {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(205, 255, 79, 0.09), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  overflow: hidden;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease);
}
.work::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.06) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.9s var(--ease);
}
.work:hover { transform: translateY(-6px); border-color: rgba(205, 255, 79, 0.32); }
.work:hover::after { transform: translateX(100%); }
.work__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.work__title { font-size: 1.22rem; margin-bottom: 10px; letter-spacing: -0.025em; }
.work__desc { font-size: 0.9rem; color: var(--muted); }
.work__metrics { display: flex; gap: 24px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); }
.work__metric b { display: block; font-size: 1.2rem; letter-spacing: -0.03em; color: var(--mint); }
.work__metric span { font-size: 0.72rem; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.07em; font-family: var(--mono); }
.work__findings { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
/* Cover image: published with the case study from the panel. Sits above the chips, takes
   the card's rounding, and reserves its space so cards with and without covers stay aligned. */
.work__media {
  margin: 0 0 20px;
  border-radius: calc(var(--r-lg) - 8px);
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.work__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
/* Additional project pictures on a work card (up to three). */
.work__gallery { margin-top: 16px; display: flex; gap: 8px; }
.work__gallery img { width: calc((100% - 16px) / 3); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.filter {
  padding: 9px 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.filter:hover { color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.filter.is-active { background: var(--grad); color: #04140e; border-color: transparent; font-weight: 600; }
.is-hidden { display: none !important; }
.works-empty { color: var(--muted); text-align: center; padding: 34px 0 6px; font-size: 0.95rem; }

/* ---------- Accordion ---------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-size: 1.02rem;
  font-weight: 550;
  letter-spacing: -0.02em;
  transition: color 0.25s var(--ease);
}
.acc__btn:hover { color: var(--mint); }
.acc__ico {
  flex: none;
  position: relative;
  width: 22px; height: 22px;
  margin-top: 3px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.acc__ico::before,
.acc__ico::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.acc__ico::before { width: 9px; height: 1.5px; }
.acc__ico::after { width: 1.5px; height: 9px; transition: opacity 0.3s var(--ease); }
.acc__item.is-open .acc__ico { background: var(--grad); border-color: transparent; color: #04140e; transform: rotate(180deg); }
.acc__item.is-open .acc__ico::after { opacity: 0; }
.acc__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.42s var(--ease);
}
.acc__inner { padding: 0 60px 24px 4px; color: var(--muted); font-size: 0.94rem; }

/* ---------- Services detail layout ---------- */
.svc-layout { display: grid; grid-template-columns: 250px 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.svc-nav { position: sticky; top: 100px; display: grid; gap: 2px; }
.svc-nav a {
  padding: 10px 13px;
  border-radius: var(--r-sm);
  font-size: 0.87rem;
  color: var(--muted);
  border-left: 2px solid transparent;
  transition: all 0.24s var(--ease);
}
.svc-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.svc-nav a.is-active { color: #fff; border-left-color: var(--mint); background: rgba(205, 255, 79, 0.07); }
.svc-block { scroll-margin-top: 110px; padding-bottom: 46px; margin-bottom: 46px; border-bottom: 1px solid var(--line); }
.svc-block:last-child { border-bottom: 0; margin-bottom: 0; }
.svc-block__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.svc-block__ico {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--grad-soft);
  border: 1px solid var(--line-2);
  color: var(--mint);
}
.svc-block__ico svg { width: 22px; height: 22px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 24px; }
.check-list { display: grid; gap: 11px; }
.check-list li { display: flex; gap: 11px; font-size: 0.91rem; color: var(--text-2); }
.check-list svg { flex: none; width: 17px; height: 17px; margin-top: 4px; color: var(--mint); }
.panel {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.panel__t { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px; }

/* ---------- Prose / article ---------- */
.prose { max-width: 74ch; }
.prose h2 { margin: 42px 0 14px; font-size: 1.6rem; }
.prose h3 { margin: 30px 0 10px; }
.prose p { margin-bottom: 16px; }
.prose ul { margin: 0 0 18px; display: grid; gap: 9px; }
.prose ul li { display: flex; gap: 11px; color: var(--text-2); }
.prose ul li::before { content: "→"; color: var(--mint); font-family: var(--mono); }
.prose code {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  color: var(--mint);
}
.prose blockquote {
  margin: 26px 0;
  padding: 18px 22px;
  border-left: 2px solid var(--mint);
  background: rgba(205, 255, 79, 0.05);
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--text-2);
}

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: 0.89rem; }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); }
th { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: rgba(255, 255, 255, 0.025); }
tbody tr:last-child td { border-bottom: 0; }
td { color: var(--text-2); }
tbody tr { transition: background 0.2s var(--ease); }
tbody tr:hover { background: rgba(255, 255, 255, 0.028); }

/* ---------- CTA band ---------- */
.cta {
  position: relative;
  padding: clamp(40px, 6vw, 64px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  background:
    radial-gradient(100% 130% at 12% 0%, rgba(205, 255, 79, 0.16), transparent 56%),
    radial-gradient(90% 120% at 92% 100%, rgba(61, 123, 255, 0.18), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  overflow: hidden;
  text-align: center;
}
.cta__orb {
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.35;
  pointer-events: none;
}
.cta > * { position: relative; z-index: 1; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; }
/* Decorative hairlines removed: the page-wide column grid, the ambient square grid and the two
   vertical rules that framed the content column all lived on .bg-fx__grid. Structure now comes
   from spacing and the panels themselves, not from drawn lines. */
.bg-fx__grid { display: none !important; }

/* The hidden attribute has to actually hide. Author rules such as `.field { display: grid }`
   override the browser's default for [hidden] and leave "hidden" elements on screen - which is
   how the testing-window and target fields stayed visible on a build enquiry. This is the guard
   that makes `hidden` trustworthy everywhere. */
[hidden] { display: none !important; }

.field { display: grid; gap: 7px; }
.field label { font-size: 0.83rem; font-weight: 550; color: var(--text-2); }
.field label span { color: var(--red); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--text);
  font: inherit;
  font-size: 0.93rem;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--mint);
  background: rgba(205, 255, 79, 0.045);
  box-shadow: 0 0 0 4px rgba(205, 255, 79, 0.13);
}
.field__hint { font-size: 0.76rem; color: var(--muted-2); }
.field--error input, .field--error textarea, .field--error select { border-color: var(--red); }
.field__err { font-size: 0.76rem; color: var(--red); display: none; }
.field--error .field__err { display: block; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.check { display: flex; gap: 11px; align-items: flex-start; font-size: 0.85rem; color: var(--muted); }
.check input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--mint); flex: none; }
.form__note {
  display: none;
  gap: 12px;
  padding: 15px 18px;
  border: 1px solid rgba(205, 255, 79, 0.3);
  background: rgba(205, 255, 79, 0.08);
  border-radius: var(--r);
  font-size: 0.87rem;
  color: var(--text);
}
.form__note.is-on { display: flex; }
.form__note svg { flex: none; width: 19px; height: 19px; color: var(--mint); margin-top: 2px; }

/* ---------- Contact / info ---------- */
.info-row { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.info-row:last-child { border-bottom: 0; }
.info-row__ico { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); color: var(--mint); }
.info-row__ico svg { width: 17px; height: 17px; }
.info-row b { display: block; font-size: 0.9rem; }
.info-row span { font-size: 0.83rem; color: var(--muted); }

/* ---------- People ---------- */
.person { text-align: center; }
.person__av {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--mint);
  background: var(--grad-soft);
  border: 1px solid var(--line-2);
  margin-bottom: 16px;
  transition: transform 0.45s var(--ease-out);
}
.person:hover .person__av { transform: translateY(-4px) rotate(-2deg); }
.person b { display: block; }
.person span { font-size: 0.83rem; color: var(--muted); }

/* ---------- Footer ---------- */
.footer {
  position: relative;
  margin-top: clamp(60px, 8vw, 100px);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 60%);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 34px;
  padding-block: clamp(44px, 6vw, 68px);
}
.footer__about { max-width: 34ch; font-size: 0.88rem; color: var(--muted); margin-top: 16px; }
.footer h4 { font-family: var(--mono); font-size: 0.71rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 15px; font-weight: 500; }
.footer li { margin-bottom: 9px; }
.footer li a { font-size: 0.87rem; color: var(--text-2); transition: color 0.22s var(--ease), padding-left 0.22s var(--ease); }
.footer li a:hover { color: var(--mint); padding-left: 3px; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.81rem;
  color: var(--muted-2);
}
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  color: var(--muted);
  transition: all 0.25s var(--ease);
}
.footer__social a:hover { color: var(--mint); border-color: rgba(205, 255, 79, 0.4); transform: translateY(-2px); }
.footer__social svg { width: 16px; height: 16px; }
.preview-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px 16px;
  margin-bottom: 22px;
  border: 1px dashed rgba(245, 165, 36, 0.4);
  background: rgba(245, 165, 36, 0.06);
  border-radius: var(--r);
  font-size: 0.79rem;
  color: #ffce7a;
  line-height: 1.55;
}
.preview-note svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }

/* ---------- Mobile nav ---------- */
.burger {
  display: none;
  width: 42px; height: 42px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  cursor: pointer;
}
.burger span { position: relative; width: 17px; height: 1.6px; background: var(--text); display: block; transition: transform 0.3s var(--ease), background 0.3s var(--ease); }
.burger span::before,
.burger span::after { content: ""; position: absolute; left: 0; width: 17px; height: 1.6px; background: var(--text); transition: transform 0.3s var(--ease); }
.burger span::before { top: -5.5px; }
.burger span::after { top: 5.5px; }
.burger.is-on span { background: transparent; }
.burger.is-on span::before { transform: translateY(5.5px) rotate(45deg); }
.burger.is-on span::after { transform: translateY(-5.5px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 72px 0 0;
  z-index: 80;
  background: rgba(6, 9, 14, 0.985);
  padding: 26px var(--gutter) 46px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-out);
  display: grid;
  align-content: start;
  gap: 4px;
}
.drawer.is-on { transform: none; }
.drawer > a {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.06rem;
  font-weight: 550;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer__sub { padding: 6px 0 14px 14px; display: grid; gap: 11px; border-bottom: 1px solid var(--line); }
.drawer__sub a { font-size: 0.9rem; color: var(--muted); }
.drawer__sub a:hover { color: var(--mint); }
.drawer .btn { margin-top: 24px; }

/* ---------- Misc ---------- */
.breadcrumbs { display: flex; align-items: center; gap: 9px; font-size: 0.8rem; color: var(--muted-2); font-family: var(--mono); }
.breadcrumbs a:hover { color: var(--mint); }
.breadcrumbs sep { opacity: 0.45; }

.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 70;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: rgba(8, 11, 16, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.3s var(--ease);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--mint); border-color: rgba(205, 255, 79, 0.4); }
.to-top svg { width: 17px; height: 17px; }

.page-hero { padding-block: clamp(40px, 6vw, 72px) clamp(30px, 4vw, 52px); }
.page-hero__title { max-width: 20ch; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.split--wide { align-items: start; }

.notice {
  display: flex;
  gap: 13px;
  padding: 16px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: rgba(61, 123, 255, 0.07);
  font-size: 0.87rem;
  color: var(--text-2);
}
.notice svg { flex: none; width: 18px; height: 18px; color: #8fb3ff; margin-top: 3px; }

.pill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.pill {
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.022);
  transition: all 0.3s var(--ease);
}
.pill:hover { border-color: rgba(205, 255, 79, 0.3); background: rgba(205, 255, 79, 0.05); transform: translateY(-2px); }
.pill b { display: block; font-size: 0.9rem; margin-bottom: 3px; }
.pill span { font-size: 0.79rem; color: var(--muted); }

.quote {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
}
.quote p { font-size: 1.02rem; color: var(--text); line-height: 1.7; }
.quote__who { margin-top: 20px; display: flex; align-items: center; gap: 13px; padding-top: 18px; border-top: 1px solid var(--line); }
.quote__av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--line-2); color: var(--mint); font-size: 0.9rem; font-weight: 600; }
.quote__who b { display: block; font-size: 0.88rem; }
.quote__who span { font-size: 0.79rem; color: var(--muted); }

.carousel { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { flex: 0 0 min(400px, 84vw); scroll-snap-align: start; }
.carousel-nav { display: flex; gap: 9px; margin-top: 22px; }
.carousel-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.carousel-btn:hover { color: var(--mint); border-color: rgba(205, 255, 79, 0.4); }
.carousel-btn svg { width: 16px; height: 16px; }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal--l { transform: translateX(-28px); }
.reveal--r { transform: translateX(28px); }
.reveal--s { transform: scale(0.965); }
.reveal--d1 { transition-delay: 0.08s; }
.reveal--d2 { transition-delay: 0.16s; }
.reveal--d3 { transition-delay: 0.24s; }
.reveal--d4 { transition-delay: 0.32s; }
.reveal--d5 { transition-delay: 0.4s; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; }
  .terminal { max-width: 560px; }
  .svc-layout { grid-template-columns: 1fr; }
  .svc-nav { position: static; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 30px; }
  .svc-nav a { border-left: 0; border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; font-size: 0.81rem; }
  .svc-nav a.is-active { border-color: rgba(205, 255, 79, 0.4); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: flex; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr; }
  .form__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .grid--4 { grid-template-columns: 1fr; }
  .hero__meta { gap: 16px 24px; }
  .acc__inner { padding-right: 8px; }
  .card { padding: 22px; }
  .work { padding: 22px; }
  .marquee__track { gap: 34px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Dynamic layer
   ========================================================================== */
.page { animation: pageIn 0.7s var(--ease-out) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora::before,
.aurora::after { content: ""; position: absolute; width: 58vw; height: 58vw; border-radius: 50%; opacity: 0.32; will-change: transform; }
.aurora::before { background: radial-gradient(circle, #cdff4f, transparent 64%); top: -32%; left: -12%; animation: drift1 26s ease-in-out infinite; }
.aurora::after { background: radial-gradient(circle, #3d7bff, transparent 64%); bottom: -42%; right: -16%; animation: drift2 32s ease-in-out infinite; }
@keyframes drift1 { 50% { transform: translate3d(9vw, 7vh, 0) scale(1.1); } }
@keyframes drift2 { 50% { transform: translate3d(-7vw, -9vh, 0) scale(1.08); } }

.scanline {
  position: absolute;
  left: 0; right: 0;
  height: 130px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(205, 255, 79, 0.1), transparent);
  animation: scan 7s linear infinite;
}
@keyframes scan { 0% { top: -18%; } 100% { top: 106%; } }

.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt__pop { transform: translateZ(34px); }

.glow-card { position: relative; }
.glow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(205, 255, 79, 0.16), transparent 62%);
}
.glow-card:hover::before { opacity: 1; }

.word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; }
.word > i { display: inline-block; font-style: normal; transform: translateY(108%); animation: wordUp 0.85s var(--ease-out) forwards; }
@keyframes wordUp { to { transform: none; } }

/* Gradient text inside a split heading stays atomic (see initSplitText); give it its own
   entrance so it does not just pop in while the surrounding words animate. */
.js [data-split] .grad-text { animation: gradTextIn 0.9s var(--ease-out) 0.16s both; }
@keyframes gradTextIn { from { opacity: 0; transform: translateY(0.16em); } to { opacity: 1; transform: none; } }

.floating { animation: floatY 7s ease-in-out infinite; }
@keyframes floatY { 50% { transform: translateY(-14px); } }

.timeline__fill {
  position: absolute;
  left: 30px; top: 44px; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--mint), var(--blue));
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.15s linear;
  z-index: 2;
}

.pulse-ring { position: relative; }
.pulse-ring::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1px solid rgba(205, 255, 79, 0.4);
  animation: ring 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes ring { 0% { opacity: 0.7; transform: scale(0.98); } 100% { opacity: 0; transform: scale(1.14); } }

.hover-lift { transition: transform 0.4s var(--ease-out); }
.hover-lift:hover { transform: translateY(-4px); }

.grid-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.grid-stagger.is-in > * { opacity: 1; transform: none; }

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .spotlight { display: none; }
}

@media print {
  .header, .drawer, .to-top, .bg-fx { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   DESIGN v2 — "Signal" overhaul
   Distinctive palette: obsidian base, acid signal, ember alert, iris AI.
   ========================================================================== */

:root {
  --acc: #cdff4f;
  --acc-2: #43f0b0;
  --acc-3: #ff6a3d;
  --acc-4: #a78bff;
  --acc-5: #ffc24b;
  --ink-on-acc: #0b1205;
  --grad: linear-gradient(100deg, #cdff4f, #43f0b0);
  --grad-2: linear-gradient(100deg, #cdff4f 0%, #3affc3 36%, #59d5ff 68%, #a78bff 100%);
  --hazard: repeating-linear-gradient(-45deg, var(--acc) 0 9px, transparent 9px 19px);
}

/* ---- base retint ---- */
body {
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(167, 139, 255, 0.07), transparent 60%),
    radial-gradient(900px 600px at -10% 10%, rgba(205, 255, 79, 0.05), transparent 55%),
    var(--bg);
}
::selection { background: var(--acc); color: var(--ink-on-acc); }
:focus-visible { outline-color: var(--acc); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #07090d; }
::-webkit-scrollbar-thumb { background: #1d232e; border-radius: 8px; border: 2px solid #07090d; }
::-webkit-scrollbar-thumb:hover { background: var(--acc); }

/* ---- logo ---- */
.logo__mark path { stroke: var(--acc) !important; }
.logo__mark circle { fill: var(--acc) !important; stroke: none !important; }
.logo__mark .lg-tick { stroke: var(--bg) !important; }
.logo__text span { color: var(--acc); font-weight: 600; }

/* ---- eyebrow: plain label, no prefix decoration ---- */
.eyebrow { color: var(--acc); gap: 0; }
.eyebrow::before,
.eyebrow::after { content: none; display: none; }

/* ---- header / nav ---- */
.header.is-stuck { background: linear-gradient(180deg, rgba(6, 8, 12, 0.97), rgba(6, 8, 12, 0.93)); border-bottom-color: rgba(205, 255, 79, 0.14); }
.header__progress { background: var(--grad-2); }
.nav__link:hover { color: #fff; background: rgba(205, 255, 79, 0.07); }
.nav__link.is-active::after { background: var(--acc); }
.nav__link.is-active { color: var(--acc); }
.dropdown { border-color: rgba(205, 255, 79, 0.18); }
.dropdown__icon { color: var(--acc); background: rgba(205, 255, 79, 0.09); border-color: rgba(205, 255, 79, 0.22); }
.dropdown__item:hover { background: rgba(205, 255, 79, 0.06); }

/* ---- buttons ---- */
.btn--primary { background: var(--acc); color: var(--ink-on-acc); box-shadow: 0 10px 34px -12px rgba(205, 255, 79, 0.55); }
.btn--primary::after { background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.7) 50%, transparent 75%); }
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(205, 255, 79, 0.5), 0 18px 48px -14px rgba(205, 255, 79, 0.7); }
.btn--ghost { border-color: rgba(205, 255, 79, 0.28); color: var(--text); }
.btn--ghost:hover { border-color: var(--acc); background: rgba(205, 255, 79, 0.08); color: var(--acc); }
.link-arrow { color: var(--acc); }

/* ---- chips ---- */
.chip--mint { color: var(--acc); border-color: rgba(205, 255, 79, 0.35); background: rgba(205, 255, 79, 0.08); }
.chip--blue { color: #c3b5ff; border-color: rgba(167, 139, 255, 0.35); background: rgba(167, 139, 255, 0.1); }
.chip--red { color: #ff9a7a; border-color: rgba(255, 106, 61, 0.35); background: rgba(255, 106, 61, 0.1); }
.chip--amber { color: #ffd08a; border-color: rgba(255, 194, 75, 0.35); background: rgba(255, 194, 75, 0.1); }
.dot { background: var(--acc); box-shadow: 0 0 0 4px rgba(205, 255, 79, 0.16); }
.dot--red { background: var(--acc-3); box-shadow: 0 0 0 4px rgba(255, 106, 61, 0.16); }

/* ---- ambient ---- */
.bg-fx__grid { background-image:
  linear-gradient(rgba(205, 255, 79, 0.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(205, 255, 79, 0.05) 1px, transparent 1px); }
.bg-fx__orb--a { background: radial-gradient(circle, rgba(205, 255, 79, 0.34), transparent 66%); }
.bg-fx__orb--b { background: radial-gradient(circle, rgba(167, 139, 255, 0.3), transparent 66%); }
.spotlight { background: radial-gradient(circle, rgba(205, 255, 79, 0.12), transparent 62%); }

/* ---- cards ---- */
.card--hover:hover { border-color: rgba(205, 255, 79, 0.4); background: linear-gradient(180deg, rgba(205, 255, 79, 0.05), rgba(255, 255, 255, 0.012)); box-shadow: 0 30px 80px -36px rgba(205, 255, 79, 0.4); }
.card__icon { color: var(--acc); background: rgba(205, 255, 79, 0.09); border-color: rgba(205, 255, 79, 0.22); }
.card--hover:hover .card__icon { transform: scale(1.08) rotate(-5deg); box-shadow: 0 0 0 5px rgba(205, 255, 79, 0.08); }
.glow-card::before { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(205, 255, 79, 0.13), transparent 62%); }

/* ---- work cards: hazard top edge + leading index ---- */
.grid { counter-reset: workidx; }
.work__top {
  padding-bottom: 15px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.work__top::before {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 44px; height: 2px;
  background: var(--acc);
}
.work__top::after {
  counter-increment: workidx;
  content: counter(workidx, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--acc);
  opacity: 0.9;
}
.work:hover { border-color: rgba(205, 255, 79, 0.38); }
.work__metric b { color: var(--acc); }

/* ---- stats ---- */
.stat__n {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--acc);
  text-shadow: 0 0 34px rgba(205, 255, 79, 0.35);
}

/* ---- timeline ---- */
.timeline__fill { background: linear-gradient(180deg, var(--acc), var(--acc-3)); }
.timeline__step { color: var(--acc); border-color: rgba(205, 255, 79, 0.28); }

/* ---- section divider hazard band ---- */
.section--alt::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--hazard);
  opacity: 0.16;
  pointer-events: none;
}

/* ---- CTA band ---- */
.cta {
  border-color: rgba(205, 255, 79, 0.22);
  background:
    linear-gradient(180deg, transparent 0 10px, var(--hazard) 10px 15px, transparent 15px calc(100% - 15px), var(--hazard) calc(100% - 15px) calc(100% - 10px), transparent calc(100% - 10px)),
    radial-gradient(90% 120% at 12% 0%, rgba(205, 255, 79, 0.13), transparent 55%),
    radial-gradient(90% 120% at 90% 100%, rgba(167, 139, 255, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
}
.cta__orb { opacity: 0.3; }

/* ---- terminal ---- */
.terminal::before { background: linear-gradient(140deg, rgba(205, 255, 79, 0.5), transparent 40%, rgba(167, 139, 255, 0.4)); }
.terminal__body { min-height: 0; }
.scanline { background: linear-gradient(180deg, transparent, rgba(205, 255, 79, 0.09), transparent); }
.tl-p { color: var(--acc); }
.tl-r { color: var(--acc-3); }
.tl-b { color: var(--acc-4); }
.cursor { background: var(--acc); }

/* ---- accordion / filters / panels ---- */
.acc__btn:hover { color: var(--acc); }
.acc__item.is-open .acc__ico { background: var(--acc); color: var(--ink-on-acc); }
.filter.is-active { background: var(--acc); color: var(--ink-on-acc); }
.filter:hover { border-color: rgba(205, 255, 79, 0.4); color: var(--acc); }
.svc-nav a.is-active { border-left-color: var(--acc); background: rgba(205, 255, 79, 0.07); color: #fff; }
.svc-block__ico { color: var(--acc); background: rgba(205, 255, 79, 0.09); border-color: rgba(205, 255, 79, 0.22); }
.check-list svg { color: var(--acc); }
.quote__av { color: var(--acc); background: rgba(205, 255, 79, 0.09); border-color: rgba(205, 255, 79, 0.22); }
.person__av { color: var(--acc); background: linear-gradient(140deg, rgba(205, 255, 79, 0.12), rgba(167, 139, 255, 0.1)); border-color: rgba(205, 255, 79, 0.2); }
.notice { border-color: rgba(167, 139, 255, 0.3); background: rgba(167, 139, 255, 0.07); }
.notice svg { color: var(--acc-4); }
.info-row__ico { color: var(--acc); border-color: rgba(205, 255, 79, 0.2); }
.footer li a:hover { color: var(--acc); }
.footer__social a:hover { color: var(--acc); border-color: rgba(205, 255, 79, 0.45); }
.to-top:hover { color: var(--acc); border-color: rgba(205, 255, 79, 0.45); }

/* ---- form focus ---- */
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--acc);
  background: rgba(205, 255, 79, 0.04);
  box-shadow: 0 0 0 4px rgba(205, 255, 79, 0.12);
}
.check input { accent-color: var(--acc); }

/* ---- gradient text ---- */
.grad-text { background: var(--grad-2); }

/* ==========================================================================
   Layout hardening + no-JS resilience
   ========================================================================== */

.grid > *, .split > *, .svc-layout > *, .form__grid > *, .pill-grid > *, .hero__grid > * { min-width: 0; }
h1, h2, h3, h4 { overflow-wrap: break-word; }
table { min-width: 540px; }
.table-wrap { -webkit-overflow-scrolling: touch; }

/* clip horizontal spill from transformed reveals without breaking sticky */
.page { overflow-x: clip; }
.work__top { flex-wrap: wrap; row-gap: 8px; align-items: center; }
.hero__meta { align-items: flex-end; }
.tag-row { align-items: center; }
.acc__btn { align-items: center; }

/* dropdown centring so it can never clip the viewport */
@media (max-width: 1260px) {
  .dropdown { left: 50%; margin-left: -280px; }
}

/* no-JS: keep all content readable and navigable */
.acc__panel { max-height: none; }
.js .acc__panel { max-height: 0; }
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal--l { transform: translateX(-28px); }
.js .reveal--r { transform: translateX(28px); }
.js .reveal--s { transform: scale(0.965); }
.js .reveal.is-in { opacity: 1; transform: none; }
.grid-stagger > * { opacity: 1; transform: none; }
.js .grid-stagger > * { opacity: 0; transform: translateY(22px); }
.js .grid-stagger.is-in > * { opacity: 1; transform: none; transition-delay: inherit; }

html:not(.js) .drawer {
  position: static;
  inset: auto;
  transform: none;
  background: rgba(255, 255, 255, 0.015);
  border-bottom: 1px solid var(--line);
}
html:not(.js) .burger { display: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .grid-stagger > * { opacity: 1; transform: none; }
  .work__top::before, .section--alt::before { opacity: 0.1; }
}

@media (max-width: 560px) {
  .stat { padding: 22px 18px; }
  .work__metrics { gap: 16px; }
  .cta { padding: 32px 20px; }
}

/* ==========================================================================
   DESIGN v3 — nav repair + vivid animated gradients
   ========================================================================== */

:root {
  --grad: linear-gradient(100deg, #cdff4f, #3affc3);
  --grad-2: linear-gradient(100deg, #cdff4f 0%, #3affc3 32%, #59d5ff 62%, #b18cff 100%);
  --grad-3: linear-gradient(180deg, #cdff4f, #3affc3, #b18cff);
}

/* ---- BUG FIX: caret was display:block (global svg reset) -> dropped to its own line ---- */
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav__caret {
  display: inline-block !important;
  flex: none;
  width: 11px;
  height: 11px;
  margin-left: 0;
  transform: translateY(-0.5px);
}
.nav__link.is-open .nav__caret { transform: translateY(-0.5px) rotate(180deg); }
.nav__link { gap: 6px; }
.nav__link.is-active::after { left: 13px; right: 13px; }

/* nav sits next to the brand instead of floating in the middle */
.nav { margin-left: clamp(22px, 4vw, 64px); margin-right: auto; gap: 2px; }
.header__inner .btn--sm { margin-left: 12px; }

/* the sheen sweep looked like a stray dot on small buttons */
.btn--sm::after { display: none; }

/* ---- BUG FIX: dropdown title/description were inline ---- */
.dropdown__t,
.dropdown__d { display: block; }
.dropdown__t { line-height: 1.35; }
.dropdown__d { margin-top: 3px; }

/* keep the dropdown inside the viewport and open below the trigger */
.dropdown {
  top: 100%;
  margin-top: 10px;
  z-index: 5;
}
.dropdown__foot .link-arrow { flex: none; }

/* ---- vivid, animated gradients ---- */
.grad-text,
.stat__n {
  background-image: var(--grad-2);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.stat__n { text-shadow: 0 0 28px rgba(205, 255, 79, 0.22); }
@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* gradient accents that used to be flat */
.header__progress {
  height: 3px;
  background: var(--grad-2);
  background-size: 220% 100%;
  animation: gradShift 9s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(58, 255, 195, 0.45);
}
.work__top::before { width: 52px; height: 3px; background: var(--grad-2); border-radius: 2px; }
.timeline__fill { background: var(--grad-3); }
.card__icon { background: linear-gradient(140deg, rgba(205, 255, 79, 0.14), rgba(177, 140, 255, 0.1)); }
.chip--mint { background: linear-gradient(120deg, rgba(205, 255, 79, 0.12), rgba(58, 255, 195, 0.06)); }
.eyebrow { color: var(--acc); }

/* animated gradient wash over the CTA band */
.cta { position: relative; }
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(205, 255, 79, 0.12), transparent 38%, rgba(89, 213, 255, 0.1) 62%, rgba(177, 140, 255, 0.16));
  background-size: 100% 100%;
}

/* gradient ring on primary buttons */
.btn--primary:hover {
  box-shadow: 0 0 0 1px rgba(205, 255, 79, 0.55), 0 0 34px -6px rgba(58, 255, 195, 0.55), 0 20px 50px -18px rgba(177, 140, 255, 0.5);
}

/* nav link hover sweep */
.nav__link::before {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 4px;
  height: 1px;
  background: var(--acc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav__link:hover::before { transform: scaleX(1); }
.nav__link.is-active::before { display: none; }

/* logo mark picks up the vivid gradient */
.logo__mark { filter: drop-shadow(0 0 10px rgba(205, 255, 79, 0.35)); }

/* ==========================================================================
   DESIGN v4 — dropdown focus mode + rhythm
   ========================================================================== */
.dropdown {
  width: 700px;
  padding: 18px;
  gap: 4px;
  background: rgba(8, 11, 16, 0.985);
  border-color: rgba(205, 255, 79, 0.16);
  box-shadow: 0 50px 110px -44px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  max-height: min(540px, calc(100vh - 108px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dropdown__item { align-items: center; height: 88px; min-height: 88px; padding: 10px 12px; }
.dropdown__icon { margin-top: 0; }
.dropdown__t { font-size: 0.91rem; }
.dropdown__d {
  font-size: 0.8rem;
  line-height: 1.42;
  color: #9fb0c4;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 9 items + CTA card = a perfect 5x2 grid, footer fills the last cell */
.dropdown__foot {
  grid-column: auto;
  margin-top: 0;
  padding: 14px;
  border-top: 0;
  border: 1px solid rgba(205, 255, 79, 0.16);
  border-radius: 10px;
  background: linear-gradient(140deg, rgba(205, 255, 79, 0.07), rgba(177, 140, 255, 0.05));
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
}
.dropdown__foot .link-arrow { align-self: flex-start; }
.dropdown__foot { height: 88px; min-height: 88px; }
.dropdown__foot > span { display: none; }
.dropdown__foot::before {
  content: "Start here";
  font-family: var(--mono);
  font-size: 0.67rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--acc);
}
.dropdown__foot .link-arrow { font-size: 0.86rem; }
/* focus scrim: dims the page behind the open menu, never intercepts clicks */
.nav__item.is-open::after {
  content: "";
  position: fixed;
  inset: 72px 0 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, rgba(205, 255, 79, 0.05), transparent 60%), rgba(4, 6, 10, 0.62);
  animation: scrimIn 0.32s var(--ease) both;
}
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }

/* dropdown centring at ≤1260px pushed the panel off the left edge — anchor to the trigger instead */
@media (max-width: 1260px) {
  .dropdown { left: -14px; margin-left: 0; width: min(700px, calc(100vw - 40px)); }
}

/* mobile: keep the drawer trigger clear of the CTA */
@media (max-width: 900px) {
  .nav { display: none; }
  .header__inner .btn--sm { margin-left: auto; }
}

/* ==========================================================================
   DESIGN v5 — editorial panels (CLI/terminal chrome retired)
   ========================================================================== */
.snapshot {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(205, 255, 79, 0.07), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.snapshot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(205, 255, 79, 0.42), transparent 45%, rgba(177, 140, 255, 0.38));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.snapshot__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}
.snapshot__label {
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.snapshot__body { padding: 18px; display: grid; gap: 15px; }
.snapshot__list { display: grid; gap: 10px; padding: 0 18px 18px; }
.snapshot__list li { display: flex; gap: 10px; font-size: 0.86rem; color: var(--text-2); }
.snapshot__list svg { flex: none; width: 15px; height: 15px; margin-top: 4px; color: var(--acc); }
.snapshot__foot {
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.snapshot__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.snapshot__cell b { display: block; font-size: 1.24rem; letter-spacing: -0.03em; color: var(--acc); }
.snapshot__cell span { font-size: 0.74rem; color: var(--muted-2); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }

/* severity meters */
.sev { display: grid; grid-template-columns: 76px 1fr 32px; align-items: center; gap: 12px; }
.sev__name { font-size: 0.83rem; color: var(--text-2); }
.sev__track { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.sev__track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--sev-c, var(--acc));
  box-shadow: 0 0 12px -2px var(--sev-c, var(--acc));
  transition: width 1.1s var(--ease-out);
}
.is-in .sev__track i { width: var(--sev-w, 40%); }
.sev__n { font-family: var(--mono); font-size: 0.83rem; text-align: right; color: var(--text); }

/* finding card (replaces the old CLI block) */
.finding__head { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.finding__row { display: grid; grid-template-columns: 132px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.finding__row:last-child { border-bottom: 0; }
.finding__k {
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding-top: 2px;
}
.finding__v { font-size: 0.9rem; color: var(--text-2); }
.finding__v b { color: var(--text); }

@media (max-width: 560px) {
  .sev { grid-template-columns: 64px 1fr 28px; gap: 9px; }
  .finding__row { grid-template-columns: 1fr; gap: 5px; }
  .snapshot__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   DESIGN v6 — site-wide dynamism and finish
   ========================================================================== */

/* inner-page heroes get the same living background as the home hero */
.page-hero { position: relative; overflow: hidden; }
.page-hero::before {
  content: "";
  position: absolute;
  inset: -60% -10% auto -10%;
  height: 460px;
  pointer-events: none;
  background:
    radial-gradient(42% 60% at 14% 42%, rgba(205, 255, 79, 0.17), transparent 70%),
    radial-gradient(38% 58% at 76% 22%, rgba(177, 140, 255, 0.17), transparent 70%),
    radial-gradient(30% 50% at 48% 60%, rgba(58, 255, 195, 0.1), transparent 70%);
  opacity: 0.9;
  animation: drift2 28s ease-in-out infinite;
}
/* the same bottom hairline the home hero carried, removed here too so the two match. */
.page-hero::after { content: none; }
.page-hero > .container { position: relative; z-index: 1; }

/* gradient accent bar above every section head */
.section-head { position: relative; }
.section-head::before {
  content: "";
  display: block;
  width: 58px;
  height: 3px;
  border-radius: 3px;
  margin-bottom: 20px;
  background: var(--grad-2);
  background-size: 220% 100%;
  animation: gradShift 9s ease-in-out infinite;
}
.section-head--center::before { margin-inline: auto; }
.section-head--center .eyebrow { margin-top: 0; }

/* card hover: border + shadow only (no per-card animated pseudo layer) */
.card { position: relative; }
.card--hover:hover { border-color: rgba(205, 255, 79, 0.34); }

/* numbered service blocks */
.svc-layout > div { counter-reset: svcidx; }
.svc-block { counter-increment: svcidx; position: relative; }
.svc-block__head { align-items: center; }
.svc-block__head::after {
  content: counter(svcidx, decimal-leading-zero);
  margin-left: auto;
  font-family: var(--mono);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.07);
  line-height: 1;
}
.svc-block:hover .svc-block__head::after { color: rgba(205, 255, 79, 0.3); }
.svc-block__head::after { transition: color 0.35s var(--ease); }

/* hero scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  pointer-events: none;
}
.scroll-cue i {
  width: 1px;
  height: 38px;
  background: linear-gradient(180deg, var(--acc), transparent);
  animation: cueDrop 2.4s ease-in-out infinite;
}
@keyframes cueDrop { 0%, 100% { opacity: 0.35; transform: scaleY(0.7); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* premium finish */
h1 { letter-spacing: -0.035em; }
h2 { letter-spacing: -0.032em; }
.lead { color: var(--text-2); }
.panel { transition: border-color 0.35s var(--ease), background 0.35s var(--ease); }
.panel:hover { border-color: rgba(205, 255, 79, 0.24); }
.quote { transition: transform 0.4s var(--ease), border-color 0.4s var(--ease); }
.quote:hover { transform: translateY(-4px); border-color: rgba(205, 255, 79, 0.3); }
.image-none { display: none; }

/* CTA orbs still carried the old palette inline — retint them all at once */
.cta__orb { background: radial-gradient(circle, var(--acc), transparent 68%) !important; }
.cta__orb + .cta__orb { background: radial-gradient(circle, var(--acc-4), transparent 68%) !important; }
.spotlight { will-change: transform; }

@media (max-width: 900px) {
  .page-hero::before { inset: -50% -20% auto -20%; height: 340px; }
  .scroll-cue { display: none; }
  .svc-block__head::after { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero::before, .section-head::before, .card::after, .scroll-cue i { animation: none !important; }
  .scroll-cue i { background: linear-gradient(180deg, var(--acc), transparent); }
}

/* ---------- consolidated reduced-motion suppression (must be last) ---------- */
@media (prefers-reduced-motion: reduce) {
  .grad-text,
  .stat__n,
  .header__progress,
  .cta::after,
  .masthead__track { animation: none !important; }
  .nav__item.is-open::after { animation: none; }
  .scroll-cue i { animation: none !important; }
}

/* ==========================================================================
   DESIGN v7 — "Technical Editorial" system
   Replaces the generated-template look (glow orbs, soft rounded cards, uniform
   rhythm) with a print-derived language: a visible hairline column grid, an
   indexed section system, crop-marked panels, squarer geometry and monospaced
   data labels. Structure carries the design instead of decoration.
   ========================================================================== */

:root {
  --rule: rgba(255, 255, 255, 0.09);
  --rule-strong: rgba(255, 255, 255, 0.2);
  --tick: rgba(255, 255, 255, 0.22);
}

/* ---------- 1. background: kill the glow, draw a column grid ---------- */
.bg-fx__orb,
.bg-fx__noise { display: none !important; }

.bg-fx__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  background-position: 0 0;
  mask-image: none;
  -webkit-mask-image: none;
  animation: none;
  opacity: 1;
}
.bg-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 60% at 50% 0%, transparent 30%, rgba(4, 6, 10, 0.55) 100%);
  pointer-events: none;
}

/* ---------- 2. section headers become an indexed editorial system ---------- */
.section-head {
  position: relative;
  padding-top: 0;
  margin-bottom: clamp(30px, 4vw, 48px);
  max-width: 860px;
}
.section-head::before { content: none; }
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--acc);
  line-height: 1;
  width: auto;
  height: auto;
  border-radius: 0;
  animation: none;
}
.section-head::after { content: none; }
.section-head--center { margin-inline: auto; text-align: center; }

/* Headings carry the hierarchy now that the numbering and the rules are gone: a larger,
   tighter title with real space above it, and the eyebrow in the accent colour. */
.section-head h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin-top: 6px;
}
.section-head .eyebrow {
  color: var(--acc);
  letter-spacing: 0.2em;
  font-weight: 600;
}
.section-head { margin-top: clamp(8px, 1.6vw, 22px); }


/* ---------- 3. panels: crop-marked technical surfaces, no glow ---------- */
.card,
.panel,
.quote,
.snapshot,
.acc {
  position: relative;
  border-radius: 4px;
  border: 1px solid var(--rule);
  background-color: rgba(255, 255, 255, 0.016);
  background-image: none;
  background-repeat: no-repeat;
  background-size: 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px;
  background-position:
    0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  box-shadow: none;
}
.card--hover {
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.card--hover:hover {
  transform: translateY(-2px);
  border-color: var(--rule-strong);
  background-color: rgba(255, 255, 255, 0.032);
  background-image:
    linear-gradient(var(--acc), var(--acc)), linear-gradient(var(--acc), var(--acc)),
    linear-gradient(var(--acc), var(--acc)), linear-gradient(var(--acc), var(--acc)),
    linear-gradient(var(--acc), var(--acc)), linear-gradient(var(--acc), var(--acc)),
    linear-gradient(var(--acc), var(--acc)), linear-gradient(var(--acc), var(--acc));
  box-shadow: none;
}
.card__icon,
.svc-block__ico {
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--rule);
  color: var(--acc);
}
.card--hover:hover .card__icon { transform: none; box-shadow: none; }
.card__title { letter-spacing: -0.02em; }

/* ---------- 4. squarer geometry, monospaced micro-labels ---------- */
.btn { border-radius: 4px; padding: 12px 20px; font-size: 0.875rem; }
.btn--lg { padding: 14px 24px; font-size: 0.94rem; }
.btn--sm { padding: 9px 15px; font-size: 0.82rem; }
.btn--ghost {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  padding: 13px 18px;
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--text-2);
}
.btn--ghost:hover { border-color: var(--acc); color: var(--acc); background: transparent; }
.field input, .field select, .field textarea { border-radius: 4px; background: rgba(255, 255, 255, 0.018); }
.chip { border-radius: 3px; }
.filter { border-radius: 3px; }
.acc { border-radius: 0; border-left: 0; border-right: 0; background-image: none; border-color: var(--rule); }
.acc__item { border-bottom: 1px solid var(--rule); }
.acc__ico { border-radius: 2px; width: 20px; height: 20px; }

/* ---------- 5. hero: tighter display type, spec-rail metadata ---------- */
.hero__title {
  letter-spacing: -0.045em;
  line-height: 1.02;
  font-size: clamp(2.4rem, 6.4vw, 4.5rem);
}
.hero__lead { font-size: clamp(1rem, 1.5vw, 1.1rem); max-width: 52ch; color: var(--text-2); }
.hero__meta {
  margin-top: 38px;
  padding-top: 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}
.hero__meta > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  padding: 16px 18px 16px 0;
  border-right: 1px solid var(--rule);
}
.hero__meta > div:last-child { border-right: 0; }
.hero__meta b {
  font-family: var(--font);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hero__meta span {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ---------- 6. footer as a colophon ---------- */
.footer { border-top: 1px solid var(--rule-strong); }
.footer__grid { gap: 0; padding-block: 0; }
.footer__grid > div { padding: 34px 26px; border-right: 1px solid var(--rule); }
.footer__grid > div:first-child { padding-left: 0; }
.footer__grid > div:last-child { border-right: 0; }
.footer h4 {
  color: var(--acc);
  letter-spacing: 0.2em;
  font-size: 0.64rem;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.footer__bottom { border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; }
.footer__social a { border-radius: 3px; }

/* ---------- 7. masthead: index ticker above the header ---------- */
.masthead {
  position: relative;
  z-index: 2;
  background: var(--bg);
  overflow: hidden;
}
.masthead__track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: slide 46s linear infinite;
}
.masthead__track span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 9px 22px;
  border-right: 1px solid var(--rule);
  white-space: nowrap;
}
.masthead__track span:nth-child(odd) { color: var(--text-2); }

/* ---------- 8. fine detail: rules, ticks, numbers ---------- */
.eyebrow { letter-spacing: 0.2em; font-size: 0.68rem; }
.lead { color: var(--text-2); }
.stat { border-radius: 0; }
.stat__n { font-variant-numeric: tabular-nums; }
.work { border-radius: 4px; background-image: none; border: 1px solid var(--rule); }
.work::after { display: none; }
.work__top { border-bottom: 1px solid var(--rule); }
.work__metric b { font-variant-numeric: tabular-nums; }
.timeline__step { border-radius: 2px; font-size: 0.72rem; }
.timeline__row::before { left: 30px; width: 1px; }
.timeline__fill { width: 1px; left: 30px; }
.pill { border-radius: 4px; background-image: none; }
.cta { border-radius: 4px; }
.table-wrap { border-radius: 4px; }
th, td { border-color: var(--rule); }
.link-arrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }

@media (max-width: 900px) {
  .hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__meta > div:nth-child(2) { border-right: 0; }
  .footer__grid > div { border-right: 0; padding: 22px 0; border-bottom: 1px solid var(--rule); }
}

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

/* ==========================================================================
   DESIGN v8 — refinements from art-direction review
   Actions: structural (not decorative) page rules; hero columns resolve on one
   baseline; the fake-metrics card replaced by a factual deliverables spec;
   accent discipline; one unified button family; legible marquee with edge fade.
   ========================================================================== */

/* --- the visible rules must be true: frame the content column, not a random field --- */
@media (min-width: 1260px) {
  .bg-fx__grid {
    background-image:
      linear-gradient(90deg, var(--rule) 1px, transparent 1px),
      linear-gradient(90deg, var(--rule) 1px, transparent 1px);
    background-size: 1px 100%, 1px 100%;
    background-repeat: no-repeat;
    background-position: calc(50% - 550px) 0, calc(50% + 550px) 0;
    mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 92%, transparent 100%);
  }
}
@media (max-width: 1259px) { .bg-fx__grid { display: none; } }

/* --- hero: both columns resolve together, with a closing rule --- */
/* These rules arranged the panel that used to sit beside the headline. With that panel
   removed the hero has a single child, which became :last-child - so `display: flex` turned the
   headline, the description and the actions into a row and squeezed the eyebrow to 31px wide.
   Removed rather than left in place: a rule that depends on how many children an element has is
   a trap once the markup changes. */
.hero__grid { align-items: start; }
/* the hairline that ran along the hero's bottom edge is removed: it read as a seam
   between the hero and the next section rather than as a deliberate mark. */
.hero::after { content: none; }

/* --- deliverables specification panel (replaces the illustrative-metrics card) --- */
.spec { display: grid; }
.spec__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 15px 18px;
  border-bottom: 1px solid var(--rule);
}
.spec__row:last-child { border-bottom: 0; }
.spec__k { font-size: 0.91rem; color: var(--text); letter-spacing: -0.01em; }
.spec__v {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  text-align: right;
}
@media (max-width: 560px) {
  .spec__row { grid-template-columns: 1fr; gap: 5px; }
  .spec__v { text-align: left; }
}

/* --- accent discipline: lime is reserved for the primary action, the section
       index and one headline highlight. Everything else is neutral. --- */
.eyebrow { color: var(--text-2) !important; }
.check-list svg,
.snapshot__list svg { color: var(--muted) !important; }
.chip--mint { color: var(--text-2); border-color: var(--rule-strong); background: transparent; }
.stat__n {
  background: none;
  color: var(--text) !important;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}
.work__metric b { color: var(--text); }
.footer h4 { color: var(--muted-2) !important; }
.link-arrow { color: var(--text-2); }
.link-arrow:hover { color: var(--acc); }
.pill:hover { border-color: var(--rule-strong); background: rgba(255, 255, 255, 0.03); transform: none; }

/* --- one button family, one case --- */
.btn--ghost {
  font-family: var(--font);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
  padding: 12px 20px;
}

/* --- marquee: legible, with an edge fade so it never looks clipped by accident --- */
.masthead {
  mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.masthead__track span { color: var(--muted); }
.masthead__track span:nth-child(odd) { color: var(--text-2); }

/* --- nav: remove the dead gap between the nav group and the CTA --- */
.nav { margin-left: auto; margin-right: 0; }

/* ==========================================================================
   DESIGN v9 — motion restored + overflow fixed (palette unchanged: black + acid)
   The accent stays the previous black-with-acid-yellow scheme. This block only:
   - restores the motion that the performance pass trimmed, but only where cheap
     (no full-viewport animations; the card shimmer runs on :hover only)
   - centres the mega-menu under its trigger and clamps its width, which is the
     confirmed cause of a 47px horizontal overflow between 1024px and 1280px
   ========================================================================== */

/* --- 1. overflow fix: centre the mega-menu under its trigger, clamped --- */
.dropdown,
.nav__item .dropdown {
  left: 50%;
  right: auto;
  margin-left: calc(min(700px, 100vw - 48px) / -2);
  width: min(700px, 100vw - 48px);
}
@media (max-width: 1260px) {
  .dropdown { left: 50%; right: auto; margin-left: calc(min(700px, 100vw - 48px) / -2); }
}

/* --- 2. ambient motion restored at low cost --- */
.bg-fx__orb { display: block !important; opacity: 0.36; }
.bg-fx__orb--a { background: radial-gradient(circle, rgba(205, 255, 79, 0.52), transparent 66%); }
.bg-fx__orb--b { background: radial-gradient(circle, rgba(167, 139, 255, 0.42), transparent 66%); }

.grad-text {
  background-image: var(--grad-2);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradShift 9s ease-in-out infinite;
}
.header__progress {
  background: var(--grad-2);
  background-size: 220% 100%;
  animation: gradShift 9s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(205, 255, 79, 0.4);
}
.section-head::after,
.work__top::before { background: var(--grad-2); }
.stat__n {
  background-image: var(--grad-2);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-color: transparent;
  animation: gradShift 9s ease-in-out infinite;
  text-shadow: none;
}

/* card shimmer returns, but only while hovered: no idle animation cost */
.card--hover::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-2);
  background-size: 300% 100%;
  -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.35s var(--ease);
  pointer-events: none;
}
.card--hover:hover::after { opacity: 0.8; animation: gradShift 6s linear infinite; }
.card--hover:hover { border-color: transparent; }

/* --- 3. contents index: every page of the site, in one structured directory --- */
.toc { display: grid; border-top: 1px solid var(--rule-strong); }
.toc__item { border-bottom: 1px solid var(--rule); }
.toc__item a {
  display: grid;
  grid-template-columns: 56px minmax(150px, 220px) 1fr 96px;
  gap: 22px;
  align-items: baseline;
  padding: 20px 4px;
  transition: background 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.toc__item a:hover { background: rgba(255, 255, 255, 0.025); padding-left: 14px; }
.toc__n { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em; color: var(--acc); }
.toc__t { font-size: 1.02rem; font-weight: 550; letter-spacing: -0.02em; color: var(--text); }
.toc__d { font-size: 0.86rem; color: var(--muted); }
.toc__a {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  text-align: right;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.toc__item a:hover .toc__a { color: var(--acc); transform: translateX(4px); }
.toc__item a:hover .toc__t { color: #fff; }
@media (max-width: 900px) {
  .toc__item a { grid-template-columns: 44px 1fr; gap: 6px 16px; padding: 18px 0; }
  .toc__d { grid-column: 2 / -1; }
  .toc__a { grid-column: 2 / -1; text-align: left; }
}

/* --- accent restored on the elements that carried it in the previous design --- */
.eyebrow { color: var(--acc) !important; }
.check-list svg,
.snapshot__list svg { color: var(--acc) !important; }
.link-arrow { color: var(--acc); }
.chip--mint { color: var(--acc); border-color: rgba(205, 255, 79, 0.35); background: rgba(205, 255, 79, 0.08); }
.info-row__ico { color: var(--acc); }
.footer h4 { color: var(--acc) !important; }

/* hero gradient word: keep the entrance, then let it shimmer (two animations) */
.js [data-split] .grad-text {
  animation: gradTextIn 0.9s var(--ease-out) 0.16s both,
             gradShift 9s ease-in-out 1.2s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-split] .grad-text { animation: none !important; }
}

/* --- contents index refinements (design review) --- */
.toc { border-top: 1px solid var(--rule-strong); }
.toc__item { border-bottom: 1px solid var(--rule-strong); }
.toc__item a { min-height: 92px; align-items: center; padding: 22px 6px; }
.toc__n { font-variant-numeric: tabular-nums; color: var(--acc); }
.toc__t { font-size: 1.06rem; }
.toc__d { max-width: 62ch; }
.toc__a { color: var(--text-2); font-size: 0.7rem; letter-spacing: 0.16em; }
.toc__item a:hover .toc__a { color: var(--acc); }
@media (max-width: 900px) { .toc__item a { min-height: 0; padding: 20px 0; } }

/* --- final review fixes: contrast + fade width --- */
.spec__v { color: var(--muted); font-size: 0.68rem; }
.bg-fx__grid {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px);
}
.masthead {
  mask-image: linear-gradient(90deg, transparent 0, #000 150px, #000 calc(100% - 150px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 150px, #000 calc(100% - 150px), transparent 100%);
}
.masthead__track span { color: var(--muted-2); }

/* --- background: neutral near-black with the ambient tint (previous scheme) --- */
body {
  background:
    radial-gradient(1200px 820px at 12% -6%, rgba(205, 255, 79, 0.07), transparent 62%),
    radial-gradient(900px 600px at 92% 8%, rgba(167, 139, 255, 0.05), transparent 60%),
    #04060a;
  background-attachment: fixed;
}
.bg-fx::after {
  background: radial-gradient(120% 60% at 50% 0%, transparent 32%, rgba(4, 6, 10, 0.6) 100%);
}

/* ==========================================================================
   DESIGN v11 — card hover: soft glow instead of a yellow border
   The previous hover flipped the border to a solid accent and painted a gradient
   hairline ring, which reads as a colour change rather than a highlight. Replaced
   with a two-layer bloom (acid + mint) and a neutral border.
   ========================================================================== */
.card--hover:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.16);
  background-color: rgba(255, 255, 255, 0.034);
  box-shadow:
    0 26px 60px -34px rgba(205, 255, 79, 0.5),
    0 0 44px -20px rgba(58, 240, 176, 0.42);
  background-image: none;
}
.card--hover:hover::after {
  opacity: 0;
  animation: none;
}
.card--hover:hover .card__icon {
  border-color: rgba(205, 255, 79, 0.3);
  background: rgba(205, 255, 79, 0.06);
}

/* keep the work cards consistent with the same bloom */
.work:hover {
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-4px);
  box-shadow:
    0 28px 62px -34px rgba(205, 255, 79, 0.48),
    0 0 44px -20px rgba(58, 240, 176, 0.38);
}

/* industries pills: neutral border, gentle bloom */
.pill:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -26px rgba(205, 255, 79, 0.45);
}

/* the section index tick and the mega-menu CTA keep the accent; nothing else does */
.quote:hover { border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 22px 50px -32px rgba(205, 255, 79, 0.4); }
.panel:hover { border-color: rgba(255, 255, 255, 0.15); }

/* the cards also carry .reveal, whose `transform: none` has higher specificity than
   a plain :hover rule — restore the lift with a matching selector */
.js .reveal.is-in.card--hover:hover { transform: translateY(-3px); }
.js .reveal.is-in.work:hover { transform: translateY(-4px); }

/* Secondary header action: start a build, beside book an assessment. It is hidden once the
   primary nav collapses, where the drawer carries the same pair instead - two buttons do not
   fit beside the logo and the burger. */
.header__cta-2 { margin-right: 8px; }
@media (max-width: 900px) { .header__cta-2 { display: none; } }

/* ==========================================================================
   Measure control: nothing on this site should be read as a 100-character line.
   The container caps the page width, but a full-width paragraph inside it still
   ran to ~175 characters on a 24-inch display and ~95 on the inner pages. Prose
   is now capped at a comfortable measure, and centred blocks stay centred.
   ========================================================================== */
.lead,
.card__body,
.section p,
article p,
.acc__body { max-width: 68ch; }

/* centred prose must stay centred once it is capped */
.section-head--center .lead,
.section-head--center p,
.center,
p.center { margin-inline: auto; }

@media (min-width: 1600px) {
  /* a little more breathing room on very large screens, not more line length */
  :root { --gutter: clamp(24px, 3vw, 56px); }
}

/* ==========================================================================
   Touch targets. Measured on a 390px screen: the header and drawer call to
   action were 32px tall, and footer links were 16px - both below the ~44px that
   a thumb actually hits. Padding is added only where the target is small, so the
   visual rhythm is unchanged.
   ========================================================================== */
@media (max-width: 900px) {
  .drawer a.btn,
  .header .btn--sm:not(.header__cta-2) { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  /* the secondary header action stays hidden on small screens: two actions do not fit beside the
     logo and the burger, which squeezed both to about fifty pixels and clipped the labels */
  .header .header__cta-2 { display: none !important; }
  .drawer > a,
  .drawer__sub a { min-height: 44px; display: flex; align-items: center; }
  footer a:not(.btn),
  .footer__links a,
  .tag-row a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* Large screens: keep the header from feeling lost on a 48-inch display without
   stretching its contents. */
@media (min-width: 2000px) {
  .header__inner, .masthead__track { font-size: 1.03em; }
  .container { padding-inline: clamp(32px, 3.4vw, 72px); }
}

/* ==========================================================================
   Reduced motion, last word. Earlier blocks cover some elements but a later
   editorial rule re-enabled the background orbs, and neither the page entrance
   nor the marquee was covered, so four things still drifted for anyone who has
   asked their system for less movement.

   Safety note: .page is revealed by its animation's `both` fill, so the animation
   is replaced with explicit final styles rather than simply removed - otherwise
   the page would sit at opacity 0.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bg-fx__orb,
  .bg-fx__noise,
  .aurora::before,
  .aurora::after,
  .marquee__track,
  .masthead__track,
  .clients-flow__track,
  .dot,
  [class*="pulse"],
  .eyebrow-rot__list,
  .spotlight {
    animation: none !important;
  }
  .eyebrow-rot { height: auto; }
  .marquee__track,
  .masthead__track,
  .clients-flow__track { transform: none !important; }

  .page {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
}

/* ==========================================================================
   Rotating eyebrow: three words, one at a time, each rising as the next arrives.
   The list is a fixed-height window; the words are stepped by one line per third
   of the cycle. Reduced motion stops it and shows the first word.
   ========================================================================== */
.eyebrow-rot {
  display: inline-block;
  overflow: hidden;
  height: 1.5em;
  vertical-align: bottom;
}
.eyebrow-rot__list {
  display: block;
  animation: eyebrowStep 7.5s cubic-bezier(.2,.7,.2,1) infinite;
}
.eyebrow-rot__list > span {
  display: block;
  height: 1.5em;
  line-height: 1.5em;
  white-space: nowrap;
}
@keyframes eyebrowStep {
  0%, 26%    { transform: translateY(0); }
  33%, 59%   { transform: translateY(-1.5em); }
  66%, 92%   { transform: translateY(-3em); }
  100%       { transform: translateY(0); }
}

/* ==========================================================================
   Section colour. Each section carries a very low-alpha wash, cycling through the
   palette so the page has rhythm without introducing anything loud. Applied by
   position, so a section that is added or reordered stays in the cycle, and low
   enough in alpha that body text contrast is untouched.
   ========================================================================== */
.section:nth-of-type(3n + 1) { background-image: linear-gradient(180deg, rgba(205, 255, 79, 0.035), transparent 58%); }
.section:nth-of-type(3n + 2) { background-image: linear-gradient(180deg, rgba(89, 213, 255, 0.045), transparent 58%); }
.section:nth-of-type(3n)     { background-image: linear-gradient(180deg, rgba(177, 140, 255, 0.05), transparent 58%); }

/* the section eyebrow follows the same cycle, so the colour is legible and not just a haze */
.section:nth-of-type(3n + 2) .section-head .eyebrow { color: #7fd8ff; }
.section:nth-of-type(3n)     .section-head .eyebrow { color: #c3a8ff; }


/* ==========================================================================
   Header actions keep their own width. As flex items they were shrinking with the
   available space, which clipped the labels to fragments on a 360px screen.
   ========================================================================== */
.header__inner .btn { flex: none; white-space: nowrap; }
.header__inner .logo { flex: none; }
.header__inner { min-width: 0; }
@media (max-width: 420px) {
  /* at the narrowest sizes the space between things tightens, rather than the label shortening
     or the button vanishing */
  .header__inner { padding-inline: 12px; gap: 10px; }
  .header__inner .btn--primary { padding-inline: 11px; font-size: .78rem; }
}

/* Below 360px the mark, the wordmark and a full label cannot all fit. The wordmark gives way:
   the mark alone still reads as the brand, and the action keeps its words. */
@media (max-width: 359px) {
  .header__inner .logo__text { display: none; }
  .header__inner .btn--primary { padding-inline: 10px; }
}