/* Ingenisis landing — tokens mirror src/brand.ts. Dark (ink) and light (paper) grounds alternate;
   each uses its own official ramp (dark-ground / light-ground). Spacing is an 8 px scale. */
:root {
  --ink: #0F1622;
  --ink-deep: #0A0F18;
  --paper: #F3F5F8;
  --paper-2: #E6EBF1;
  --aqua: #9DEFF3;
  --ocean: #73B1E6;
  --teal-l: #34898D;   /* light-ground ramp ends */
  --ocean-l: #145786;
  --slate: #4A5566;    /* brand tagline colour on light grounds */
  --ramp-d: linear-gradient(90deg, #9DEFF3 0%, #9DEFF3 33%, #94E8F2 35.9%, #8CE0F1 38.8%, #85D9F0 41.6%, #7FD2EE 44.5%, #7ACAED 47.4%, #77C2EB 50.3%, #74BAE9 53.1%, #73B1E6 56%, #73B1E6 100%);
  --ramp-l: linear-gradient(90deg, #34898D 0%, #34898D 33%, #2B838D 35.9%, #217D8C 38.8%, #19778C 41.6%, #12718B 44.5%, #0D6B8A 47.4%, #0D6489 50.3%, #105D88 53.1%, #145786 56%, #145786 100%);
  --ease: cubic-bezier(0.45, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px;
  --gutter: clamp(20px, 4.5vw, 72px);
  --max: 1760px;
  --r: 20px;
  --section: clamp(72px, min(11vw, 14svh), 144px);
}

/* Ground themes: components read --fg / --muted / --line / --ramp / --surface. */
.dark  { --bg: var(--ink); --fg: #FFFFFF; --muted: rgba(255,255,255,.8); --line: rgba(255,255,255,.14); --line-2: rgba(255,255,255,.3); --surface: rgba(255,255,255,.045); --accent: var(--aqua); --accent-2: var(--ocean); --ramp: var(--ramp-d); background: var(--bg); color: var(--fg); color-scheme: dark; }
.light { --bg: var(--paper); --fg: var(--ink); --muted: var(--slate); --line: rgba(15,22,34,.12); --line-2: rgba(15,22,34,.26); --surface: #FFFFFF; --accent: var(--teal-l); --accent-2: var(--ocean-l); --ramp: var(--ramp-l); background: var(--bg); color: var(--fg); color-scheme: light; }
.dark.deep { --bg: var(--ink-deep); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink-deep); font: 500 18px/1.65 Manrope, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4, p, ol, ul, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { flex: none; }
:focus-visible { outline: 2px solid var(--accent, #9DEFF3); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Type scale (tight Manrope tracking gets compensating word-spacing) ── */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; line-height: 1; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); }
.dark .eyebrow { color: var(--aqua); }
.eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--ramp); }
.display { font-weight: 800; font-size: clamp(40px, 4.4vw, 68px); line-height: 1.03; letter-spacing: -.03em; word-spacing: .06em; }
.h2 { font-weight: 800; font-size: clamp(32px, 3.4vw, 50px); line-height: 1.1; letter-spacing: -.024em; word-spacing: .05em; max-width: 20ch; }
.lead { font-size: clamp(19px, 1.45vw, 21px); line-height: 1.6; font-weight: 500; color: var(--muted); max-width: 58ch; }
.grad { background: var(--ramp); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .08em .12em 0; margin: 0 -.08em -.12em 0; }
cite { font-style: normal; }

/* Kinetic type (split in main.js): letters rise inside each word's mask when the line enters view. */
.kin .w { display: inline-block; overflow: hidden; padding: 0 .06em .14em 0; margin: 0 -.06em -.14em 0; vertical-align: top; }
.kin .ch { display: inline-block; transform: translateY(108%); opacity: 0; }
.kin.is-in .ch { animation: rise .95s var(--ease-out) forwards; animation-delay: calc(var(--i) * var(--step, 16ms) + var(--d0, 0ms)); }
.kin .w.grad { background: none; color: inherit; }
.kin .w.grad .ch { background: var(--ramp); background-size: var(--gw) 100%; background-position: calc(-1 * var(--gx)) 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; margin-right: -.08em; }
@keyframes rise { to { transform: none; opacity: 1; } }

.section { padding: var(--section) 0; position: relative; }
.head { display: grid; gap: var(--s3); margin-bottom: clamp(32px, min(4vw, 6svh), 56px); }
.head--split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s3) clamp(32px, 6vw, 96px); align-items: start; }
/* Eyebrow on its own row so the side copy starts level with the title's first line. */
.head--split > div { display: contents; }
.head--split .eyebrow { grid-column: 1; }
.head--split .h2 { grid-column: 1; grid-row: 2; }
.head--split .head__side { grid-column: 2; grid-row: 2; display: grid; gap: var(--s2); }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 54px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 16px; white-space: nowrap; cursor: pointer; border: 0; transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease); }
.btn--solid { background: var(--fg); color: var(--bg); }
.dark .btn--solid:hover { background: var(--aqua); }
.light .btn--solid:hover { background: var(--ocean-l); color: #fff; }
.btn--ghost { border: 1.5px solid var(--line-2); background: rgba(10,15,24,.3); }
.btn--ghost:hover { border-color: var(--fg); }
.btn:active { transform: scale(.98); }
.arrow { width: 16px; height: 16px; transition: transform .45s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ── Nav: the lockup leads ── */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: 128px; display: flex; align-items: center; gap: var(--s3); padding: 0 calc(max(0px, (100% - var(--max)) / 2) + var(--gutter)); transition: background-color .5s var(--ease), height .5s var(--ease), box-shadow .5s var(--ease); }
.nav.is-scrolled { height: 100px; background: rgba(10,15,24,.88); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
/* Official SVG, inlined; ≥160 px rule. Its artwork starts 26.25/400 of the width in (built-in clear space): pull it
   left by that much so the ink lines up with the content column; the clear space stays empty. */
.lockup { display: block; --lw: 372px; width: var(--lw); margin-left: calc(var(--lw) * -26.25 / 400); }
.lockup svg { display: block; width: 100%; height: auto; }
.nav .lockup { transition: width .5s var(--ease), margin .5s var(--ease); }
.nav.is-scrolled .lockup { --lw: 296px; }
.nav nav { margin-left: auto; }
.nav__links { display: flex; gap: 2px; }
.nav__links a { display: block; padding: 10px 7px; white-space: nowrap; border-radius: 999px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.88); transition: background-color .35s var(--ease), color .35s var(--ease); }
.nav__links a:hover, .nav__links a[aria-current="true"] { background: rgba(255,255,255,.09); color: #fff; }
.nav__cta { height: 48px; padding: 0 22px; font-size: 15px; background: #fff; color: var(--ink); }
.nav__cta:hover { background: var(--aqua); }
.nav__toggle { display: none; }

/* ── Hero: full-bleed embedding space ── */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: flex; align-items: center; padding: 160px 0 112px;
  background: radial-gradient(70% 90% at 70% 45%, #142238 0%, var(--ink-deep) 70%); }
.hero { touch-action: pan-y; }
.hero.is-dragging { cursor: grabbing; user-select: none; }
.hero__net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero__wash { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,15,24,.92) 0%, rgba(10,15,24,.8) 36%, rgba(10,15,24,.3) 56%, rgba(10,15,24,0) 72%),
              linear-gradient(0deg, var(--ink-deep) 0%, rgba(10,15,24,0) 22%); }
.hero__copy { display: grid; gap: var(--s3); pointer-events: none; }
.hero__copy > * { max-width: 700px; }
.hero__copy > h1 { max-width: 960px; }
.hero__copy a { pointer-events: auto; }
.hero__copy .lead { color: rgba(255,255,255,.88); max-width: 38ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s2); }
.hero__copy > :not(h1) { animation: fadeUp 1s var(--ease-out) both; animation-delay: .9s; }
.hero__hint { position: absolute; right: calc(max(0px, (100% - var(--max)) / 2) + var(--gutter)); bottom: var(--s5); font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); pointer-events: none; animation: fadeUp 1s var(--ease-out) 2s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } }

/* ── Perspective: 100 pilots → 5 ── */
.gap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 104px); align-items: center; }
.gap__copy { display: grid; gap: var(--s3); }
.craft { margin-top: var(--s2); font-weight: 800; font-size: clamp(38px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -.028em; word-spacing: .05em; }
.pilots { display: grid; gap: var(--s3); padding: clamp(24px, 3.5vw, 44px); border-radius: var(--r); background: var(--surface); box-shadow: 0 1px 0 var(--line), 0 24px 60px -32px rgba(15,22,34,.25); }
/* Graphics are capped by viewport height too, so each one fits on screen with its heading on wide, short displays. */
.gap > .pilots { justify-self: end; width: min(100%, calc(40svh + 72px)); }
.pilots__grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(8px, 1.2vw, 14px); }
.pilots__grid i { aspect-ratio: 1; border-radius: 50%; background: var(--ocean-l); transition: background-color .8s var(--ease), transform .8s var(--ease), box-shadow .8s var(--ease); transition-delay: var(--d, 0ms); }
.pilots.is-run .pilots__grid i { background: var(--paper-2); transform: scale(.72); }
.pilots.is-run .pilots__grid i.ok { background: var(--teal-l); transform: scale(1.08); box-shadow: 0 0 0 5px rgba(52,137,141,.2); }
.pilots__key { display: grid; gap: var(--s1); padding-top: var(--s2); border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; }
.pilots__key b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-right: 8px; color: var(--teal-l); }
.pilots__key cite { font-size: 13px; color: var(--muted); }

/* ── Film ── */
.film { grid-column: 1 / -1; margin-top: clamp(8px, 2vw, 32px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.film__side { display: grid; gap: var(--s2); align-content: center; }
.film__title { font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.film__chapters { display: grid; margin-top: var(--s1); }
.film__chapters button { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; width: 100%; padding: 12px 0 12px 16px; border: 0; border-left: 2px solid var(--line); background: none; text-align: left; cursor: pointer; color: var(--muted); transition: color .35s var(--ease); }
.film__chapters button::before { content: ""; position: absolute; left: -2px; top: 0; width: 2px; height: 100%; background: var(--ramp); transform-origin: top; transform: scaleY(var(--p, 0)); }
.film__chapters button:hover { color: var(--fg); }
.film__t { grid-row: 1 / 3; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 3px; }
.film__chapters b { font-size: 17px; font-weight: 800; color: var(--fg); opacity: .55; transition: opacity .35s var(--ease); }
.film__line { grid-column: 2; font-size: 14.5px; line-height: 1.5; }
.film__chapters li.is-now b { opacity: 1; }
.film__chapters li.is-now button { color: var(--fg); }
.film__frame { width: min(100%, calc((100svh - 220px) * 16 / 9)); margin-inline: 0 auto; position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--ink-deep); box-shadow: 0 40px 90px -40px rgba(10,15,24,.55); }
.film__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film__video::cue { font-family: Manrope, sans-serif; font-weight: 700; background: rgba(10,15,24,.75); }
.film__ui { position: absolute; inset: auto 0 0; display: flex; justify-content: flex-end; gap: 8px; padding: var(--s3); background: linear-gradient(0deg, rgba(10,15,24,.6), transparent); }
.chip { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(15,22,34,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 14px; font-weight: 700; color: #fff; cursor: pointer; transition: background-color .35s var(--ease), border-color .35s var(--ease); }
.chip:hover { border-color: #fff; }
.chip[aria-pressed="true"] { background: #fff; color: var(--ink); }
.film__bar { position: absolute; inset: auto 0 0; height: 3px; background: rgba(255,255,255,.12); }
.film__bar span { display: block; height: 100%; background: var(--ramp-d); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ── Consulting: lifecycle rail ── */
.rail__steps { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.rail__steps::before, .rail__fill { content: ""; position: absolute; left: 10%; top: 27px; height: 2px; }
.rail__steps::before { right: 10%; background: var(--line-2); }
.rail__fill { width: calc(80% * var(--k, 0) / 4); background: var(--ramp); transition: width .8s var(--ease); }
.rail__step { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--s2); padding: 0 var(--s1); background: none; border: 0; cursor: pointer; text-align: center; color: var(--muted); }
.rail__dot { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--line-2); font-size: 15px; font-weight: 800; color: var(--fg); transition: border-color .5s var(--ease), background-color .5s var(--ease), color .5s var(--ease), transform .5s var(--ease); }
.rail__step:hover .rail__dot, .rail__step.is-done .rail__dot { border-color: var(--accent); }
.rail__step[aria-selected="true"] { color: var(--fg); }
.rail__step[aria-selected="true"] .rail__dot { background: var(--accent); border-color: var(--accent); color: var(--bg); transform: scale(1.08); }
.rail__label { font-size: 15px; font-weight: 700; line-height: 1.35; max-width: 15ch; }
.rail__panel { margin-top: var(--s6); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); padding: clamp(28px, 4vw, 48px); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); animation: fadeUp .6s var(--ease-out); }
.rail__panel[hidden] { display: none; }
.rail__panel h3 { font-size: clamp(24px, 2.3vw, 30px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.rail__panel p { color: var(--muted); }
.rail__panel ul { display: grid; gap: 12px; align-content: start; }
.rail__panel li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; }
.rail__panel li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--accent); }
.rail__note { margin-top: var(--s3); font-size: 15px; }

/* ── Solutions: architecture inside the client's environment ── */
.arch { display: grid; }
.arch__env { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: var(--s3); padding: clamp(30px, 3vw, 40px) clamp(20px, 3vw, 32px) clamp(18px, 2.4vw, 28px); border: 1.5px dashed var(--line-2); border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0)); }
.arch__tag { position: absolute; top: -15px; left: 28px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
/* Labels sit in their own column so every connector runs straight from people to solution to system. */
.arch__main { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: var(--s3); }
.arch__main > .flow { grid-column: 2; }
.arch__row { display: contents; }
.arch__row > .arch__label { align-self: center; }
.arch__people { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.arch__people li { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1); }
.arch__people span { padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 700; }
.arch__label { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.mod { position: relative; display: grid; gap: 8px; align-content: start; padding: 18px 20px; border-radius: 16px; background: var(--ink); color: #fff; box-shadow: 0 24px 50px -30px rgba(15,22,34,.6); overflow: hidden; }
.mod::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--ramp-d); }
.mod__ind { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--aqua); }
.mod__name { font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.mod ul { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); }
.mod li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.86); }
.mod li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ocean); }
.mod__live { display: inline-flex; align-items: center; gap: 8px; margin-top: 0; font-size: 12px; font-weight: 700; color: var(--aqua); }
.mod__live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--aqua); animation: blink 2.4s var(--ease) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.flow { display: grid; grid-template-columns: repeat(3, 1fr); height: 28px; }
.flow i { justify-self: center; width: 2px; height: 100%; background: repeating-linear-gradient(180deg, var(--teal-l) 0 6px, transparent 6px 14px); background-size: 2px 14px; animation: flowDown 1.1s linear infinite; }
.flow--up i { animation-name: flowUp; background-image: repeating-linear-gradient(180deg, var(--ocean-l) 0 6px, transparent 6px 14px); }
@keyframes flowDown { to { background-position: 0 14px; } }
@keyframes flowUp { to { background-position: 0 -14px; } }
.flow--feed { grid-template-columns: 1fr; height: 24px; }
.sys { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.sys li { display: grid; gap: 2px; padding: 10px var(--s2); border-radius: 12px; background: var(--paper-2); }
.sys b { font-size: 15px; font-weight: 800; }
.sys span { font-size: 13px; line-height: 1.45; color: var(--slate); }
.arch__ctrl { display: grid; gap: 12px; align-content: start; padding: var(--s3) var(--s2) var(--s3) var(--s3); border-left: 1.5px dashed var(--line-2); }
.arch__ctrl ul { display: grid; gap: 10px; }
.arch__ctrl li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.arch__ctrl svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgba(52,137,141,.14); color: var(--teal-l); }
.acc { display: flex; align-items: center; gap: var(--s2); padding: 18px var(--s3); border-radius: 16px; background: var(--ink); color: #fff; font-size: 16px; line-height: 1.5; }
.acc b { font-weight: 800; }

/* ── Industries: tabs + value chain ── */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); margin-bottom: var(--s5); }
.tab { height: 46px; padding: 0 22px; border-radius: 999px; border: 0; background: transparent; font-size: 15px; font-weight: 700; cursor: pointer; color: var(--muted); transition: background-color .4s var(--ease), color .4s var(--ease); }
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { background: var(--accent); color: var(--ink); }
.ind { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ind[hidden] { display: none; }
.ind:not([hidden]) { animation: fadeUp .6s var(--ease-out); }
.ind__copy { display: grid; gap: var(--s3); }
.ind__copy h3 { font-size: clamp(28px, 3vw, 40px); font-weight: 800; line-height: 1.12; letter-spacing: -.024em; word-spacing: .04em; }
.ind__copy p { color: var(--muted); }
.kpis-label { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: -8px; }
.kpis { display: flex; flex-wrap: wrap; gap: var(--s1); }
.kpis li { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; font-weight: 700; }
.reg { font-size: 15px; line-height: 1.6; padding-top: var(--s2); border-top: 1px solid var(--line); }
.chain { padding: clamp(24px, 3vw, 36px); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.chain__title { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s3); }
.chain li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s2); padding-bottom: var(--s3); }
.chain li:last-child { padding-bottom: 0; }
.chain li::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--line); }
.chain li:last-child::before { display: none; }
.chain__dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-2); }
.chain li.on .chain__dot { border-color: var(--aqua); background: radial-gradient(circle, var(--aqua) 0 5px, transparent 6px); box-shadow: 0 0 0 5px rgba(157,239,243,.12); }
.chain__stage { font-size: 17px; font-weight: 700; line-height: 1.4; padding-top: 2px; }
.chain__use { display: block; margin-top: 2px; font-size: 15px; font-weight: 500; color: var(--muted); }
.chain li.on .chain__use { color: var(--aqua); font-weight: 600; }

/* ── Delivery ── */
.deliver { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s3); }
.viz--pod { display: flex; flex-direction: column; }
.viz--pod .pillars { margin-top: auto; padding-top: var(--s1); }
.viz { padding: clamp(24px, 3.5vw, 40px); border-radius: var(--r); background: var(--surface); box-shadow: 0 1px 0 var(--line), 0 24px 60px -36px rgba(15,22,34,.3); display: grid; gap: var(--s3); align-content: start; }
.viz h3 { font-size: 22px; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; }
.viz p { font-size: 16px; line-height: 1.6; color: var(--muted); }
.viz__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.viz__tag { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pod { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; max-width: 230px; }
.pod i { aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed var(--line-2); transition: background-color 1s var(--ease), border-color 1s var(--ease), box-shadow 1s var(--ease); transition-delay: calc(var(--i) * 50ms + 200ms); }
.viz.is-in .pod i.on { border: 1.5px solid var(--ocean-l); background: var(--ocean-l); box-shadow: 0 0 0 5px rgba(20,87,134,.14); }
.viz.is-in .pod i:not(.on) { border-color: var(--teal-l); }
.key { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: 14px; font-weight: 600; color: var(--muted); }
.key span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.key .k1::before { background: var(--ocean-l); }
.key .k2::before { border: 1.5px dashed var(--teal-l); }
.key .k-c::before { border-radius: 3px; background: var(--teal-l); }
.key .k-d::before { border-radius: 3px; background: var(--ocean-l); }
.key .k-g::before { border-radius: 3px; background: var(--ink); }
.key .k-e::before { width: 18px; height: 4px; border-radius: 2px; background: #8D99A8; vertical-align: 3px; }
/* Accelerator library: columns = engagements; tiles accumulate, build effort shrinks. */
.lib { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 18px); }
.lib__col { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; padding: 12px 10px; border-radius: 14px; transition: background-color .5s var(--ease); }
.lib__col.is-now { background: var(--paper); }
.lib__name { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lib__col.is-now .lib__name { color: var(--fg); }
.lib__effort { height: 6px; border-radius: 3px; background: var(--paper-2); overflow: hidden; }
.lib__effort span { display: block; height: 100%; width: var(--e); border-radius: 3px; background: #8D99A8; transform-origin: left; transform: scaleX(0); transition: transform .8s var(--ease-out); }
.lib__col.is-on .lib__effort span { transform: none; }
.lib__stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: clamp(72px, 13svh, 112px); align-content: end; gap: 4px; min-height: 100px; }
.lib__stack i { aspect-ratio: 1; border-radius: 4px; opacity: 0; transform: translateY(8px) scale(.6); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.lib__col.is-on .lib__stack i { opacity: 1; transform: none; }
.lib__stack i.c { background: var(--teal-l); }
.lib__stack i.d { background: var(--ocean-l); }
.lib__stack i.g { background: var(--ink); }
.lib__stack i.new { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--aqua); }
.pillars { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
.pillars li { display: grid; gap: 4px; align-content: start; padding-top: var(--s2); border-top: 1px solid var(--line); }
.pillars h3 { font-size: 16px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.pillars p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* ── Insights ── */
.papers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.paper { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--surface); transition: transform .6s var(--ease), border-color .6s var(--ease); }
.paper:hover { transform: translateY(-4px); border-color: var(--line-2); }
.paper__cover { position: relative; height: clamp(150px, 24svh, 210px); background: radial-gradient(90% 120% at 80% 20%, #1A2B44, #0A0F18 70%); border-bottom: 1px solid var(--line); }
.paper__cover svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.paper__cover > span { position: absolute; left: var(--s2); top: var(--s2); z-index: 1; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.32); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(10,15,24,.6); }
.paper__body { display: grid; gap: 12px; align-content: start; padding: var(--s3) var(--s3) var(--s4); }
.paper__ind { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--aqua); }
.paper h3 { font-size: 21px; font-weight: 800; line-height: 1.3; letter-spacing: -.012em; }
.paper p { font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.paper__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.paper__tags li { padding: 4px 10px; border-radius: 999px; background: var(--line); font-size: 12px; font-weight: 700; }

/* ── About: coverage map (dark panel) with the market context of the regions it lights ── */
.map { position: relative; border-radius: 28px; overflow: hidden; background: radial-gradient(60% 70% at 62% 48%, #13233A 0%, var(--ink-deep) 75%); box-shadow: 0 40px 90px -50px rgba(0,0,0,.7); border: 1px solid var(--line); }
.map__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); align-items: center; gap: var(--s3); padding-right: var(--s3); }
/* The map is sized so heading, map and legend fit one screen. */
.map canvas { display: block; width: min(100%, max(520px, calc((100svh - 420px) * 1.87))); margin-inline: auto; aspect-ratio: 1.87; }
.map__stats { padding: 0; }
.map__stat .map__line { font-size: 16px; color: #fff; }
.map__stat { display: grid; gap: 6px; padding: 18px 20px 20px; border-radius: 18px; border: 1px solid var(--line); background: rgba(15,22,34,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: auto; }
.map__stat dt { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--aqua); }
.map__stat dd { margin: 0; }
.map__stat .map__fig { font-size: clamp(30px, 3.2vw, 44px); color: #fff; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.map__stat dd { font-size: 14px; line-height: 1.5; color: var(--muted); }
.map__stat cite { font-size: 12px; font-weight: 700; }
.map__stat cite a { color: #fff; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.map__stat cite a:hover { text-decoration-color: currentColor; }
.map__key { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); padding: 18px var(--s3); border-top: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--muted); }
.map__key span::before { content: ""; display: inline-block; vertical-align: 1px; margin-right: 10px; }
.map__key .k-hub::before { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ink-deep), 0 0 0 4px var(--aqua); }
.map__key .k-cov::before { width: 9px; height: 9px; border-radius: 50%; background: var(--ramp-d); }
.map__key .k-reach::before { width: 22px; height: 2px; background: var(--ramp-d); vertical-align: 4px; }

/* ── Connect ── */
.connect__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.connect__copy { display: grid; gap: var(--s3); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); padding: clamp(24px, 3.5vw, 40px); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.field { position: relative; }
.field--wide, .form__foot { grid-column: 1 / -1; }
.field input, .field select, .field textarea { width: 100%; padding: 26px 16px 10px; border-radius: 12px; border: 1.5px solid var(--line-2); background: rgba(255,255,255,.03); font-size: 16px; font-weight: 600; outline: none; appearance: none; resize: vertical; transition: border-color .35s var(--ease); }
.field label { position: absolute; left: 17px; top: 18px; font-size: 16px; font-weight: 600; color: var(--muted); pointer-events: none; transform-origin: left top; transition: transform .3s var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field input:not(:placeholder-shown) + label, .field input:focus + label, .field textarea:not(:placeholder-shown) + label, .field textarea:focus + label, .field select:focus + label, .field select:valid + label { transform: translateY(-10px) scale(.75); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #C2410C; }
.form__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s1); }
.form__status { font-size: 15px; font-weight: 600; }

/* ── Footer: brand column + link columns, legal line ── */
.foot { padding: var(--s10) 0 var(--s4); }
.foot__top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s6); padding-bottom: var(--s8); }
.foot__brand { display: grid; gap: var(--s3); align-content: start; justify-items: start; }
.foot__brand .lockup { --lw: 240px; }
.domain { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--muted); transition: color .35s var(--ease); }
.domain svg { width: 14px; height: 14px; color: var(--aqua); transition: transform .45s var(--ease); }
.domain:hover { color: #fff; }
.domain:hover svg { transform: translate(2px, -2px); }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.foot__cols div { display: grid; gap: 12px; align-content: start; font-size: 15px; color: var(--muted); }
.foot__cols h4 { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--fg); margin-bottom: 4px; }
.foot__cols a:hover, .foot__base a:hover { color: var(--aqua); }
.foot__base { display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.foot__base span:last-child { display: flex; gap: var(--s3); }

/* Reveal: one gentle fade per block */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ── Responsive ── */
/* The nav shares the content column; below 1240px there isn't room for all six links. */
@media (max-width: 1240px) { .nav__links li:nth-child(n+5) { display: none; } }
@media (max-width: 1100px) {
  .film { grid-template-columns: 1fr; }
  .map__stage { grid-template-columns: 1fr; padding: 0 0 var(--s3); }
  .map__stats { padding: 0 var(--s3); }
  .map canvas { width: 100%; }
  .nav__links a { padding: 10px; font-size: 14px; }
  .nav__links li:nth-child(n+4) { display: none; }
  .lockup { --lw: 280px; }
  .nav.is-scrolled .lockup { --lw: 256px; }
  .gap, .connect__grid, .ind, .rail__panel, .deliver, .foot__top, .head--split { grid-template-columns: 1fr; }
  .head--split .head__side { grid-column: 1; grid-row: 3; }
  .arch__env { grid-template-columns: 1fr; }
  .arch__ctrl { border-left: 0; border-top: 1.5px dashed var(--line-2); padding: var(--s3) 0 0; }
  .arch__ctrl ul { display: flex; flex-wrap: wrap; gap: 10px 20px; }
  .papers { grid-template-columns: 1fr 1fr; }
  .papers .paper:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .nav { height: 84px; gap: 12px; }
  .nav.is-scrolled { height: 76px; }
  .nav .lockup, .nav.is-scrolled .lockup { --lw: 224px; }
  .nav nav, .nav__cta { display: none; }
  .nav__toggle { display: grid; gap: 6px; place-content: center; margin-left: auto; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: transparent; cursor: pointer; }
  .nav__toggle span { display: block; width: 18px; height: 1.5px; background: #fff; transition: transform .4s var(--ease); }
  .nav.is-open { height: auto; flex-wrap: wrap; padding-top: 13px; padding-bottom: var(--s3); background: var(--ink-deep); }
  .nav.is-open nav { display: block; order: 3; width: 100%; margin: 0; }
  .nav.is-open .nav__links { flex-direction: column; }
  .nav.is-open .nav__links li { display: block; }
  .nav.is-open .nav__links a { font-size: 19px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); border-radius: 0; background: none; }
  .nav.is-open .nav__cta { display: inline-flex; order: 4; margin-top: var(--s2); }
  .nav.is-open .nav__toggle span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav.is-open .nav__toggle span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .hero { align-items: flex-start; padding: 112px 0 120px; }
  .hero__wash { background: linear-gradient(180deg, rgba(10,15,24,.55) 0%, rgba(10,15,24,.85) 55%, rgba(10,15,24,.5) 80%, var(--ink-deep) 100%); }
  .hero__ctas .btn { width: 100%; }
  .hero__hint { left: var(--gutter); right: auto; bottom: var(--s3); }
  .pilots__grid { gap: 7px; }
  .film__ui { justify-content: flex-start; padding: 12px; }
  .rail__steps { grid-template-columns: 1fr; gap: 12px; }
  .rail__steps::before, .rail__fill { display: none; }
  .rail__step { grid-template-columns: 48px 1fr; justify-items: start; align-items: center; text-align: left; }
  .rail__dot { width: 48px; height: 48px; }
  .rail__label { max-width: none; }
  .rail__panel { margin-top: var(--s3); }
  .mods, .sys, .arch__people { grid-template-columns: 1fr; gap: 12px; }
  .arch__main { grid-template-columns: 1fr; row-gap: 10px; }
  .arch__main > .flow { grid-column: 1; }
  .arch__people li { justify-content: flex-start; }
  .flow { grid-template-columns: 1fr; }
  .flow i:nth-child(n+2) { display: none; }
  .arch__tag { left: 16px; font-size: 11px; letter-spacing: .08em; }
  .tabs { border-radius: 18px; }
  .tab { padding: 0 14px; font-size: 14px; }
  .lib { gap: 4px; }
  .lib__col { padding: 8px 4px; }
  .lib__name { font-size: 10px; letter-spacing: .02em; }
  .lib__stack { gap: 3px; min-height: 96px; }
  .pillars, .papers { grid-template-columns: 1fr; }
  .papers .paper:last-child { grid-column: auto; }
  .form { grid-template-columns: 1fr; }
  .form__foot .btn { width: 100%; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
}