/* NexaVault: CyberCrest structure (80%) + MokN solution section. Dark/light, fully responsive.
   Palette and type follow neXavault-basic-guidelines.pdf. */

/* ============ TOKENS ============ */
:root {
  /* brand palette (from the guidelines) */
  --navy:          #0D1944;   /* primary   */
  --navy-2:        #2A4D9B;   /* secondary */
  --blue:          #3085FF;   /* tertiary  */
  --link:          #4DA3FF;
  --taupe:         #949279;   /* accent    */
  --violet:        #7C5CFF;   /* premium accent / security elements */
  --green:         #22C55E;   /* verified  */

  /* dark theme (default) */
  --bg:            #060B1E;
  --bg-2:          #0A1230;
  --surface:       #0D1944;
  --surface-2:     #142150;
  --border:        rgba(255,255,255,.11);
  --border-strong: rgba(255,255,255,.22);
  --text:          #ffffff;
  --text-2:        #A9B4CE;
  --text-3:        #6F7C9C;
  --shadow:        0 24px 60px -20px rgba(0,0,0,.75);
  --grid-line:     rgba(255,255,255,.045);

  --font:      "Aspira Wide", "Aspira", "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw: 1520px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius: 14px;
  --radius-lg: 22px;
  --sec-pad: clamp(4rem, 9vw, 8.5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

:root[data-theme="light"] {
  --bg:            #ffffff;
  --bg-2:          #F5F7FB;   /* guidelines: light background */
  --surface:       #ffffff;
  --surface-2:     #EEF2F9;
  --border:        #D8E0EC;   /* guidelines: border */
  --border-strong: #B4C2D8;
  --text:          #111827;   /* guidelines: dark text */
  --text-2:        #4B5563;   /* guidelines: body text */
  --text-3:        #8792A6;
  --shadow:        0 20px 50px -22px rgba(13,25,68,.25);
  --grid-line:     rgba(13,25,68,.05);
}

/* Contrast band: pins the dark palette in BOTH themes so the section reads the same
   way at all times. Everything downstream uses var(), so nothing else needs changing. */
.section--dark {
  --bg:            #060B1E;
  --bg-2:          #0A1230;
  --surface:       #0D1944;
  --surface-2:     #142150;
  --border:        rgba(255,255,255,.11);
  --border-strong: rgba(255,255,255,.24);
  --text:          #ffffff;
  --text-2:        #A9B4CE;
  --text-3:        #6F7C9C;
  --brand:         #3085FF;
  --brand-soft:    rgba(48,133,255,.15);
  --accent:        #949279;
  --accent-soft:   rgba(148,146,121,.16);
  --glow:          rgba(48,133,255,.45);
  --glow-2:        rgba(124,92,255,.30);
  --grid-line:     rgba(255,255,255,.05);
  --shadow:        0 24px 60px -20px rgba(0,0,0,.75);
  background: var(--bg);
  color: var(--text-2);
}

/* ============ COLOUR PALETTES ============
   Orthogonal to light/dark. data-palette selects the accent metal family,
   data-theme selects the ground. Both dark and light variants are defined for
   every palette, and the shield's metal ramp (--m-*) moves with it. */

/* --- Blue and black (default) --- */
:root, :root[data-palette="blue"] {
  --brand: #3085FF;  --brand-ink: #ffffff;
  --brand-soft: rgba(48,133,255,.15);
  --accent: #949279; --accent-soft: rgba(148,146,121,.16);
  --glow: rgba(48,133,255,.45); --glow-2: rgba(124,92,255,.30);
  --m-1:#eaf2ff; --m-2:#b9cdea; --m-3:#6f8fc4; --m-4:#ffffff; --m-5:#33507f; --m-edge:#16233c;
}
:root[data-theme="light"], :root[data-theme="light"][data-palette="blue"] {
  --brand: #0D1944; --brand-soft: rgba(13,25,68,.07);
  --accent: #7C6F45; --accent-soft: rgba(148,146,121,.15);
  --glow: rgba(48,133,255,.22); --glow-2: rgba(124,92,255,.15);
}

/* --- Copper and black --- */
:root[data-palette="copper"] {
  --brand: #C87941; --brand-ink: #17100a;
  --brand-soft: rgba(200,121,65,.16);
  --accent: #E0A96D; --accent-soft: rgba(224,169,109,.16);
  --glow: rgba(200,121,65,.45); --glow-2: rgba(139,90,60,.34);
  --bg: #100A06; --bg-2: #1B120C; --surface: #221710; --surface-2: #2E1F15;
  --text-2: #D8C3B0; --text-3: #9A8271;
  --m-1:#ffe7d2; --m-2:#e3ab7b; --m-3:#b3733f; --m-4:#fff3e6; --m-5:#7a4a26; --m-edge:#33200f;
}
:root[data-theme="light"][data-palette="copper"] {
  --brand: #8B5A3C; --brand-ink: #ffffff;
  --brand-soft: rgba(139,90,60,.09);
  --accent: #8B5A3C; --accent-soft: rgba(139,90,60,.12);
  --glow: rgba(200,121,65,.22); --glow-2: rgba(139,90,60,.14);
  --bg: #ffffff; --bg-2: #FAF6F2; --surface: #ffffff; --surface-2: #F3EBE4;
  --border: #E4D8CD; --border-strong: #C6B2A1;
  --text: #1B120C; --text-2: #5B4A3E; --text-3: #93806F;
}

/* --- Custom: two colours from the picker, everything else derived with color-mix
       so the whole page (including the shield's metal ramp) recolours live --- */
:root[data-palette="custom"] {
  --c-accent: #3085FF;   /* overwritten inline by the picker */
  --c-ground: #060B1E;
  --brand: var(--c-accent);
  --brand-ink: #ffffff;
  --brand-soft: color-mix(in srgb, var(--c-accent) 15%, transparent);
  --accent: color-mix(in srgb, var(--c-accent) 55%, #ffffff);
  --accent-soft: color-mix(in srgb, var(--c-accent) 14%, transparent);
  --glow: color-mix(in srgb, var(--c-accent) 42%, transparent);
  --glow-2: color-mix(in srgb, var(--c-accent) 24%, transparent);
  --bg: var(--c-ground);
  --bg-2: color-mix(in srgb, var(--c-ground) 92%, #ffffff);
  --surface: color-mix(in srgb, var(--c-ground) 86%, #ffffff);
  --surface-2: color-mix(in srgb, var(--c-ground) 78%, #ffffff);
  --m-1: color-mix(in srgb, var(--c-accent) 16%, #ffffff);
  --m-2: color-mix(in srgb, var(--c-accent) 46%, #ffffff);
  --m-3: color-mix(in srgb, var(--c-accent) 82%, #ffffff);
  --m-4: #ffffff;
  --m-5: color-mix(in srgb, var(--c-accent) 72%, #000000);
  --m-edge: color-mix(in srgb, var(--c-accent) 34%, #000000);
}
:root[data-theme="light"][data-palette="custom"] {
  --brand: color-mix(in srgb, var(--c-accent) 82%, #000000);
  --accent: color-mix(in srgb, var(--c-accent) 70%, #000000);
  --brand-soft: color-mix(in srgb, var(--c-accent) 9%, transparent);
  --glow: color-mix(in srgb, var(--c-accent) 20%, transparent);
  --glow-2: color-mix(in srgb, var(--c-accent) 12%, transparent);
  --bg: #ffffff;
  --bg-2: color-mix(in srgb, var(--c-accent) 5%, #ffffff);
  --surface: #ffffff;
  --surface-2: color-mix(in srgb, var(--c-accent) 9%, #ffffff);
  --border: color-mix(in srgb, var(--c-accent) 18%, #ffffff);
  --border-strong: color-mix(in srgb, var(--c-accent) 38%, #ffffff);
  --text: color-mix(in srgb, var(--c-ground) 88%, #000000);
  --text-2: color-mix(in srgb, var(--c-ground) 55%, #6b7280);
  --text-3: color-mix(in srgb, var(--c-ground) 30%, #9aa3af);
}

/* --- Silver and black --- */
:root[data-palette="silver"] {
  --brand: #C3CBD6; --brand-ink: #12151a;
  --brand-soft: rgba(195,203,214,.14);
  --accent: #E6EBF2; --accent-soft: rgba(230,235,242,.14);
  --glow: rgba(195,203,214,.38); --glow-2: rgba(138,148,163,.26);
  --bg: #08090B; --bg-2: #0E1014; --surface: #14171C; --surface-2: #1D2128;
  --text-2: #B7BEC9; --text-3: #7C8593;
  --m-1:#ffffff; --m-2:#dfe5ed; --m-3:#98a2b0; --m-4:#ffffff; --m-5:#5d6673; --m-edge:#23282f;
}
:root[data-theme="light"][data-palette="silver"] {
  --brand: #3C4756; --brand-ink: #ffffff;
  --brand-soft: rgba(60,71,86,.08);
  --accent: #5D6673; --accent-soft: rgba(93,102,115,.12);
  --glow: rgba(93,102,115,.18); --glow-2: rgba(138,148,163,.12);
  --bg: #ffffff; --bg-2: #F4F6F8; --surface: #ffffff; --surface-2: #EDF0F3;
  --border: #DCE1E7; --border-strong: #B4BCC6;
  --text: #12151a; --text-2: #4C5563; --text-3: #838C99;
}

/* ============ RESET ============ */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-2);
  background: var(--bg);
  overflow-x: clip;   /* clip, not hidden. hidden makes body a scroll container and kills sticky header */
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
/* guidelines type hierarchy: H1 display bold, H2 semibold, H3 medium, body Inter regular */
h1,h2,h3,h4,h5 { font-family: var(--font); color: var(--text); line-height: 1.14; margin: 0 0 .6em; letter-spacing: -.015em; }
h1 { font-weight: 700; }
h2 { font-weight: 600; }
h3, h4, h5 { font-weight: 500; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--brand); color: #fff; }

h1 { font-size: clamp(2.35rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(1.85rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.15rem, 2.1vw, 1.5rem); }
h4 { font-size: clamp(1rem, 1.6vw, 1.15rem); }

/* ============ LAYOUT ============ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--sec-pad); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--alt { background: var(--bg-2); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 1rem;
  display: flex; align-items: center; gap: .7rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; flex: none; }

.lede { font-size: clamp(1rem, 1.5vw, 1.12rem); color: var(--text-2); max-width: 62ch; }
.sec-head { max-width: 60rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ============ BUTTONS ============ */
.btn {
  --btn-bg: var(--brand);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.7rem;
  font-family: var(--font-mono);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-ink);
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), color .3s;
  box-shadow: 0 0 0 0 var(--glow);
}
.btn::after { /* MokN sweep */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120px 60px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.32), transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px -10px var(--glow); }
.btn:hover::after { opacity: 1; }
.btn svg { width: 15px; height: 15px; flex: none; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--ghost { --btn-bg: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); box-shadow: none; }
.btn--sm { padding: .7rem 1.25rem; font-size: .7rem; }

/* Skip link: clipped rather than parked at -9999px, so it does not widen the page. */
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus {
  position: fixed; top: 1rem; left: 1rem; z-index: 200;
  width: auto; height: auto; overflow: visible; clip-path: none;
}

.txtlink {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 28px;                      /* WCAG 2.2 asks 24px minimum; 28 leaves margin */
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand);
}
.txtlink svg { width: 14px; transition: transform .3s var(--ease); }
.txtlink:hover svg { transform: translateX(5px); }

/* ============ DECOR ============ */
.grid-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
}
.orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(70px); opacity: .28;
}
.section > .wrap { position: relative; z-index: 1; }

/* ============ HEADER ============ */
.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(16px);   /* Safari still wants the prefix */
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background-color .3s;
}
.header.is-stuck { border-bottom-color: var(--border); }
.header__inner { display: flex; align-items: center; gap: 1.5rem; height: 74px; }

.logo { display: flex; align-items: center; gap: .55rem; flex: none; }
.logo__mark { width: 30px; height: 30px; flex: none; }
/* global, not scoped: the same mark is reused in the header, footer and the 3D hero stack */
.x-dark  { fill: var(--text); }
.x-taupe { fill: var(--accent); }
.logo__word {
  font-family: var(--font); font-weight: 600; font-size: 1.12rem;
  color: var(--text); letter-spacing: -.005em; line-height: 1;
}
.logo__word i { font-style: normal; color: var(--accent); }
.logo__r { font-size: .5em; vertical-align: super; opacity: .7; }

.nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.nav__item { position: relative; }
.nav__link {
  display: flex; align-items: center; gap: .38rem;
  padding: .6rem .85rem; border-radius: 8px;
  font-size: .875rem; font-weight: 500; color: var(--text);
  transition: color .2s, background-color .2s;
  cursor: pointer; background: none; border: 0;
}
.nav__link:hover, .nav__item.is-open > .nav__link { color: var(--brand); background: var(--brand-soft); }
.nav__link .chev { width: 11px; transition: transform .25s var(--ease); }
.nav__item.is-open .chev { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 12px); left: 50%;
  translate: -50% 0;
  min-width: 300px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .75rem;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav__item.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega--wide { min-width: min(560px, 88vw); }
.mega__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .15rem; }
.mega__link {
  display: block; padding: .6rem .8rem; border-radius: 9px;
  font-size: .865rem; color: var(--text-2);
  transition: background-color .2s, color .2s, padding-left .2s;
}
.mega__link:hover { background: var(--brand-soft); color: var(--brand); padding-left: 1.05rem; }

.header__actions { display: flex; align-items: center; gap: .6rem; flex: none; }
.nav > .btn { display: none; }   /* nav CTA is mobile-only; header__actions owns it on desktop */

/* ---- palette picker ---- */
.palette { position: relative; flex: none; }
.palette__btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: transparent; cursor: pointer;
  transition: border-color .25s, transform .25s var(--ease);
}
.palette__btn:hover, .palette.is-open .palette__btn { border-color: var(--brand); transform: scale(1.06); }
.palette__dot {
  width: 17px; height: 17px; border-radius: 50%;
  background: conic-gradient(from 210deg, var(--m-2), var(--brand), var(--m-5), var(--m-2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.palette__menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 120;
  min-width: 208px; padding: .6rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.palette.is-open .palette__menu { opacity: 1; visibility: visible; transform: none; }
.palette__title {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3); margin: .15rem .55rem .5rem;
}
.palette__opt {
  display: flex; align-items: center; gap: .65rem; width: 100%;
  padding: .55rem .55rem; border: 0; border-radius: 9px;
  background: none; cursor: pointer; color: var(--text-2); font-size: .85rem; text-align: left;
  transition: background-color .2s, color .2s;
}
.palette__opt:hover { background: var(--brand-soft); color: var(--text); }
.palette__opt[aria-checked="true"] { color: var(--text); }
.palette__opt[aria-checked="true"]::after {
  content: ""; margin-left: auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 8px 1px var(--glow);
}
.palette__sw { width: 22px; height: 22px; border-radius: 6px; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.palette__sw--blue   { background: linear-gradient(135deg, #3085FF 0%, #0D1944 55%, #05070f 100%); }
.palette__sw--copper { background: linear-gradient(135deg, #E0A96D 0%, #8B5A3C 55%, #100A06 100%); }
.palette__sw--silver { background: linear-gradient(135deg, #E6EBF2 0%, #8A94A3 55%, #08090B 100%); }
.palette__sw--custom { background: conic-gradient(from 160deg, #ff5f6d, #ffc371, #47e5bc, #4facfe, #a06bff, #ff5f6d); }

/* two-colour picker */
.palette__custom {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  margin: .5rem .1rem .1rem; padding-top: .6rem;
  border-top: 1px solid var(--border);
}
.palette__field { display: grid; gap: .35rem; justify-items: center; cursor: pointer; }
.palette__field span {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
}
.palette__field input[type="color"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--border); border-radius: 8px;
  transition: border-color .2s, transform .2s var(--ease);
}
.palette__field input[type="color"]:hover { border-color: var(--brand); transform: translateY(-1px); }
.palette__field input::-webkit-color-swatch-wrapper { padding: 3px; }
.palette__field input::-webkit-color-swatch { border: 0; border-radius: 5px; }
.palette__field input::-moz-color-swatch { border: 0; border-radius: 5px; }

.theme-toggle {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: transparent; cursor: pointer; color: var(--text);
  transition: border-color .25s, color .25s, transform .25s var(--ease);
}
.theme-toggle:hover { border-color: var(--brand); color: var(--brand); transform: rotate(18deg); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }

.burger {
  display: none; width: 40px; height: 40px; flex: none;
  border: 1px solid var(--border); border-radius: 10px;
  background: transparent; cursor: pointer; position: relative;
}
.burger span {
  position: absolute; left: 11px; width: 16px; height: 1.5px; background: var(--text);
  border-radius: 2px; transition: transform .3s var(--ease), opacity .2s;
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 19px; }
.burger span:nth-child(3) { top: 24px; }
body.nav-open .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ============ HERO ============ */
.hero { position: relative; padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero .orb--1 { width: min(720px, 90vw); aspect-ratio: 1; top: -34%; left: 50%; translate: -50% 0; background: var(--glow); }
.hero .orb--2 { width: min(420px, 60vw); aspect-ratio: 1; bottom: -22%; right: -8%; background: var(--glow-2); opacity: .22; }
.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero__inner { position: relative; z-index: 2; max-width: 62rem; }

/* ---- 3D extruded brand mark, orbit rings, orbiting nodes ---- */
.orbit {
  position: relative; width: 100%; max-width: 540px; margin-inline: auto;
  aspect-ratio: 1; perspective: 1400px;
  display: grid; place-items: center;
}
.orbit::before { /* core glow */
  content: ""; position: absolute; width: 55%; aspect-ratio: 1; border-radius: 50%;
  background: var(--glow); filter: blur(70px); opacity: .34;
}
.orbit__stage { position: absolute; inset: 0; transform-style: preserve-3d; }

/* the two counter-rotating rings, tilted on different axes */
.orbit__ring { position: absolute; inset: 8%; border-radius: 50%; border: 1px solid var(--border-strong); transform-style: preserve-3d; }
.orbit__ring--a { transform: rotateX(74deg); animation: ringA 13s linear infinite; }
.orbit__ring--b { inset: 2%; transform: rotateY(74deg); animation: ringB 17s linear infinite reverse; border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
@keyframes ringA { to { transform: rotateX(74deg) rotateZ(360deg); } }
@keyframes ringB { to { transform: rotateY(74deg) rotateZ(360deg); } }
/* a bead travelling each ring */
.orbit__bead { position: absolute; top: -4px; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 14px 3px var(--glow); }
.orbit__ring--b .orbit__bead { background: var(--accent); box-shadow: 0 0 14px 3px var(--accent); }

/* Extruded metal shield: N stacked copies along Z form the solid body. */
.nv-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.orbit__mark {
  position: relative; width: 47%; aspect-ratio: 100 / 117;
  transform-style: preserve-3d;
  animation: markSpin 9s linear infinite;      /* brisk turn, was 22s */
}
@keyframes markSpin { to { transform: rotateY(360deg); } }
/* Slices are centred on Z=0 (--z is negative for the front half, positive for the
   back), so the spin axis runs through the middle of the plate. Extruding backward
   only put the axis on the front face, which made the shield swing off-centre. */
.orbit__layer { position: absolute; inset: 0; transform: translateZ(calc(var(--z) * 0.8px)); }
/* every slice is the same polished metal, front face through side wall to back
   face. Depth comes from the per-slice --b shade set in the markup, not from
   darkening toward the rear, so the plate never turns into a black slab. */
.shield { width: 100%; height: 100%; fill: url(#nvMetal); }
.orbit__layer { filter: brightness(var(--b, 1)); }
.orbit__layer:first-child { filter: brightness(1) drop-shadow(0 8px 20px rgba(0,0,0,.5)); }

/* Specular highlight rides the metal gradient itself: rotating the shield sweeps the
   bright band across the face. A separate overlay div was tried and removed, because
   a rectangular blend layer cannot be clipped to the shield silhouette cheaply and
   showed as a grey box past the shield's edges. */
.orbit__sheen { display: none; }

.orbit__label {
  position: absolute; display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); white-space: nowrap;
}
.orbit__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 7px 1px var(--glow); flex: none; }
.orbit__label--tl { top: 6%;  left: 0; }
.orbit__label--tr { top: 22%; right: 0; flex-direction: row-reverse; }
.orbit__label--br { bottom: 22%; right: 2%; flex-direction: row-reverse; }
.orbit__label--bl { bottom: 6%;  left: 2%; }
.orbit__label--tr::before, .orbit__label--br::before { background: var(--accent); box-shadow: 0 0 10px 2px var(--accent); }
.hero .eyebrow { justify-content: flex-start; }
.hero h1 { margin-bottom: 1.4rem; }
.hero h1 .accent {
  background: linear-gradient(96deg, var(--brand), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lede { font-size: clamp(1rem, 1.7vw, 1.2rem); max-width: 54ch; margin-bottom: 2.2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; }

/* logo marquee */
.marquee { margin-top: clamp(3rem, 6vw, 4.5rem); position: relative; z-index: 2;
  overflow: hidden;   /* track is width:max-content, must be clipped or it widens the page */
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-3); text-align: center; margin-bottom: 1.4rem; }
.marquee__track { display: flex; align-items: center; gap: clamp(2rem, 4vw, 3.5rem); width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__item { display: flex; align-items: center; flex: none; }
.marquee__item img {
  height: clamp(38px, 5vw, 54px); width: auto;
  opacity: .5; transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.marquee__item:hover img { opacity: 1; transform: scale(1.06); }
/* certification artwork is light-on-transparent, so flip it on a light background */
:root[data-theme="light"] .marquee__item img { filter: invert(1) brightness(.5) contrast(1.5); opacity: .6; }
:root[data-theme="light"] .marquee__item:hover img { opacity: 1; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ============ MISSION / SPLIT ============ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.split__body p { max-width: 58ch; }

/* ============ SECTION INDEX (sticky vertical rail, left of the content) ============ */
.railed { position: relative; }
/* Sits in the viewport's left gutter, vertically centred. Only rendered when the gutter is
   genuinely wide enough (see the media query below), so it can never overlap the content. */
.rail {
  position: fixed; top: 50%; translate: 0 -50%;
  /* sits in the gutter beside the container; max() stops it sliding off-screen */
  left: max(1rem, calc((100vw - var(--maxw)) / 2 - 186px));
  z-index: 5; width: 170px;
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.rail.is-visible { opacity: 1; visibility: visible; }
.rail__list { display: grid; gap: .85rem; }
.rail__item {
  display: flex; align-items: baseline; gap: .55rem; white-space: nowrap;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-3); opacity: .55;
  transition: color .25s, opacity .25s, translate .25s var(--ease);
}
.rail__item:hover { color: var(--brand); opacity: 1; }
.rail__item.is-active { color: var(--brand); opacity: 1; translate: 4px 0; }
.rail__item .n { color: var(--brand); opacity: .6; }
.rail__item.is-active .n { opacity: 1; }
/* below this the gutter cannot hold the rail without touching the content */
@media (max-width: 1919px) { .rail { display: none; } }

/* ============ CARD GRID ============ */
.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.card {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .3s, box-shadow .4s var(--ease);
}
.card::before { /* cursor-follow glow */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(280px circle at var(--mx,50%) var(--my,0%), var(--brand-soft), transparent 65%);
  opacity: 0; transition: opacity .4s;
}
.card:hover { transform: translateY(-5px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.card:hover::before { opacity: 1; }
.card > * { position: relative; }
.card h3 { margin-bottom: .7rem; }
.card p { font-size: .93rem; margin-bottom: 0; }
.card__num {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
  color: var(--brand); margin-bottom: 1.6rem; display: block;
}
.card__icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 1.3rem;
  background: var(--brand-soft); color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
}
.card__icon svg { width: 21px; height: 21px; }
.card--link { display: flex; flex-direction: column; }
.card--link .txtlink { margin-top: 1.4rem; }

/* ============ MokN: DISCOVER OUR SOLUTION ============ */
.discover { position: relative; overflow: hidden; background: var(--bg-2); }
.discover .orb--a { width: min(560px, 80vw); aspect-ratio: 1; top: 6%; left: -14%; background: var(--glow); opacity: .18; }
.discover .orb--b { width: min(560px, 80vw); aspect-ratio: 1; bottom: 2%; right: -16%; background: var(--glow-2); opacity: .16; }

/* the vertical connecting path (MokN line_path) */
.disc__rows { position: relative; display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
.disc__rows::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-strong) 12%, var(--border-strong) 88%, transparent);
  translate: -50% 0;
}
.disc__rows::after { /* travelling light */
  content: ""; position: absolute; left: 50%; translate: -50% 0; width: 2px; height: 130px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--brand), transparent);
  top: 0; animation: travel 6s var(--ease) infinite;
  box-shadow: 0 0 22px 3px var(--glow);
}
@keyframes travel { 0% { top: -10%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

.disc__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.disc__row:nth-child(even) .disc__visual { order: 2; }

.disc__panel {
  position: relative;
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.disc__panel::before { /* MokN border-mask edge light */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 55%, transparent), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.disc__panel::after { /* soft interior glow */
  content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%;
  background: var(--glow); filter: blur(70px); opacity: .16;
  top: -40%; left: -18%; pointer-events: none;
}
.disc__row:nth-child(even) .disc__panel::after { left: auto; right: -18%; background: var(--glow-2); }
.disc__panel > * { position: relative; z-index: 1; }

.disc__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.disc__icon { position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center; color: var(--brand); }
.disc__icon::before { /* icon-glow */
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: var(--brand); filter: blur(18px); opacity: .2;
}
.disc__icon svg { width: 26px; height: 26px; position: relative; }
.disc__head h3 { margin: 0; }
.disc__panel p { font-size: clamp(.95rem, 1.4vw, 1.05rem); margin-bottom: 0; }

/* animated visual for each row */
.disc__visual {
  position: relative; aspect-ratio: 4/3; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--surface);
  overflow: hidden; display: grid; place-items: center;
}
.disc__visual::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 72%);
}
.disc__visual svg { width: 76%; height: auto; position: relative; overflow: visible; }
.pulse { animation: pulse 2.6s ease-in-out infinite; transform-origin: center; }
.pulse--2 { animation-delay: .5s; }
.pulse--3 { animation-delay: 1s; }
@keyframes pulse { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
.dash { stroke-dasharray: 6 8; animation: dash 1.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -28; } }
.spin { animation: spin 18s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes spin { to { transform: rotate(360deg); } }

/* MokN implement / narrative CTA block */
.implement {
  position: relative; margin-top: clamp(2.5rem, 5vw, 4rem);
  text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}
.implement::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px 240px at 50% 100%, var(--glow), transparent 70%); opacity: .26;
}
.implement > * { position: relative; }
.implement h3 { font-size: clamp(1.5rem, 3.4vw, 2.4rem); margin-bottom: 1rem; }
.implement p { max-width: 52ch; margin-inline: auto; margin-bottom: 2rem; }
/* corner dots */
.implement .corner { position: absolute; width: 9px; height: 9px; color: var(--brand); opacity: .8; }
.implement .corner svg { width: 100%; }
.corner.tl { top: 14px; left: 14px; } .corner.tr { top: 14px; right: 14px; }
.corner.bl { bottom: 14px; left: 14px; } .corner.br { bottom: 14px; right: 14px; }

/* MokN scroll narrative */
.narrative { position: relative; }
.narrative__steps { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.narrative__step {
  background: var(--surface); padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start;
  transition: background-color .4s var(--ease);
}
.narrative__step:hover, .narrative__step.is-active { background: var(--surface-2); }
.narrative__n {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em;
  color: var(--brand); padding-top: .35rem; min-width: 2.4rem;
}
.narrative__step p { color: var(--text-2); font-size: clamp(.98rem, 1.5vw, 1.1rem); margin: 0; }
.narrative__step.is-active p { color: var(--text); }

/* ============ TESTIMONIALS ============ */
.quotes { position: relative; }
.quotes__viewport { overflow: hidden; border-radius: var(--radius-lg); }
.quotes__track { display: flex; transition: transform .6s var(--ease); }
.quote {
  flex: 0 0 100%; min-width: 0;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.quote__mark { color: var(--brand); width: 34px; margin-bottom: 1.4rem; opacity: .8; }
.quote p { font-size: clamp(1rem, 1.9vw, 1.3rem); line-height: 1.6; color: var(--text); margin-bottom: 2rem; font-weight: 300; }
.quote__by { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .07em; }
.quote__by strong { color: var(--text); font-weight: 500; display: block; }
.quote__by span { color: var(--text-3); }
.quotes__nav { display: flex; align-items: center; gap: .8rem; margin-top: 1.6rem; }
.qbtn {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: 1px solid var(--border); background: transparent; color: var(--text);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .25s, color .25s, background-color .25s;
}
.qbtn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.qbtn svg { width: 16px; }
.quotes__count { font-family: var(--font-mono); font-size: .75rem; color: var(--text-3); margin-left: auto; letter-spacing: .1em; }

/* ============ FRAMEWORK GRID ============ */
/* Desktop: one continuously scrolling line, paused on hover or keyboard focus.
   Mobile: the same markup collapses into an accordion (see the 991px block). */
/* no overflow/mask here: that lives on the track, so the nav buttons are never clipped */
.fwx { position: relative; }
.fwx__track { display: flex; }
.fwx__hint {
  margin: 1.25rem 0 0; font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}
.fw {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color .3s, background-color .3s, transform .35s var(--ease);
}
.fw::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(240px circle at var(--mx,50%) var(--my,50%), var(--brand-soft), transparent 70%);
}
.fw:hover { border-color: var(--border-strong); background: var(--surface-2); }
.fw:hover::before { opacity: 1; }
.fw > * { position: relative; }

.fw__head {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  padding: 1.1rem clamp(1.25rem, 2vw, 1.6rem); min-height: 56px;
  background: none; border: 0; text-align: left; cursor: pointer; color: inherit;
}
.fw__name {
  font-family: var(--font-mono); font-size: .95rem; font-weight: 500;
  letter-spacing: .06em; color: var(--text); flex: 1; min-width: 0;
}
.fw__head > svg { width: 17px; flex: none; color: var(--brand); }
.fw__head .chev { width: 13px; color: var(--text-3); transition: transform .3s var(--ease); }
.fw.is-open .fw__head .chev { transform: rotate(180deg); }

/* Horizontal padding only. Vertical padding on the clipping element stays visible
   when the row collapses to 0fr, which would leak the top of the badge. The bottom
   space comes from the last child instead. */
.fw__body > div { padding-inline: clamp(1.25rem, 2vw, 1.6rem); }
.fw__body .txtlink { margin-bottom: clamp(1.25rem, 2vw, 1.6rem); }
.fw p { font-size: .89rem; margin-bottom: 1.1rem; }

/* ---- carousel navigation ---- */
.fwx__nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 3;
  width: 52px; height: 52px; display: none; place-items: center;
  border-radius: 50%; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--text); opacity: .45;
  transition: opacity .3s var(--ease), background-color .3s, border-color .3s, transform .3s var(--ease);
}
.fwx:hover .fwx__nav { opacity: .8; }         /* soften in when the row is hovered */
.fwx__nav:hover, .fwx__nav:focus-visible {
  opacity: 1; transform: scale(1.08);
  border-color: var(--brand);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.fwx__nav:active { transform: scale(.96); }
.fwx__nav svg { width: 18px; height: 18px; }
.fwx__nav--prev { left: -18px; }
.fwx__nav--next { right: -18px; }

@media (min-width: 992px) {
  .fwx__nav { display: grid; }
  .fwx__track {
    gap: 1.25rem;
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    scroll-snap-type: x proximity;
  }
  .fwx__track::-webkit-scrollbar { display: none; }
  .fwx__track:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; border-radius: var(--radius-lg); }
  .fw { width: 320px; flex: none; scroll-snap-align: start; }
  .fw__head { cursor: default; }              /* nothing to expand: body is always open */
  .fw__head .chev { display: none; }
  .fw:hover { transform: translateY(-4px); }
}
/* certification badge artwork */
.fw__badge {
  display: grid; place-items: center; min-height: 96px; margin: .25rem 0 1.25rem;
}
.fw__badge img {
  max-height: 84px; width: auto; max-width: 78%;
  opacity: .62; transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.fw:hover .fw__badge img { opacity: 1; transform: scale(1.04); }
/* badges are light artwork on transparent; invert them only on a light background.
   Inside a .section--dark band they stay as-is, the way CyberCrest shows them. */
:root[data-theme="light"] .fw__badge img { filter: invert(1) brightness(.55) contrast(1.4); opacity: .75; }
:root[data-theme="light"] .fw:hover .fw__badge img { opacity: 1; }
:root[data-theme="light"] .section--dark .fw__badge img { filter: none; opacity: .62; }
:root[data-theme="light"] .section--dark .fw:hover .fw__badge img { opacity: 1; }
/* NIS 2 has no official certification mark; keep the cell the same height */
.fw__badge-fallback { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  border: 1px dashed var(--border-strong); color: var(--text-3); opacity: .6; }
.fw__badge-fallback svg { width: 26px; }
.fw:hover .fw__badge-fallback { opacity: 1; color: var(--brand); border-color: var(--brand); }

/* ============ METHODOLOGY ============ */
.steps { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); position: relative; }
.step {
  position: relative; padding: clamp(1.5rem, 2.6vw, 2.1rem);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); overflow: hidden;
  transition: border-color .3s, transform .35s var(--ease);
}
.step:hover { border-color: var(--brand); transform: translateY(-4px); }
.step__n {
  font-family: var(--font-mono); font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 200;
  line-height: 1; color: var(--brand); opacity: .22;
  display: block; margin-bottom: .75rem;
  transition: opacity .35s;
}
.step:hover .step__n { opacity: .6; }
.step h3 { margin-bottom: .6rem; }
.step p { font-size: .92rem; margin: 0; }

/* ============ LIST ROWS (tech services / why us) ============ */
.rows { display: grid; }
.row {
  border-bottom: 1px solid var(--border); padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  display: grid; grid-template-columns: minmax(200px, 1fr) 2fr auto;
  gap: clamp(1rem, 3vw, 3rem); align-items: center;
  transition: background-color .35s, padding-inline .35s var(--ease);
}
.rows .wrap:first-child .row { border-top: 1px solid var(--border); }
.row:hover { background: var(--surface); padding-inline: 1.25rem; }
.row h3 { margin: 0; }
.row p { margin: 0; font-size: .95rem; }
.row .txtlink { justify-self: end; }

/* ============ WHY US ============ */
.why { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.why__item { padding: clamp(1.4rem, 2.4vw, 1.9rem); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color .3s, transform .3s var(--ease); }
.why__item:hover { border-color: var(--brand); transform: translateY(-3px); }
.why__item h3 { display: flex; align-items: center; gap: .7rem; font-size: 1.08rem; }
.why__item h3 svg { width: 19px; color: var(--brand); flex: none; }
.why__item p { font-size: .9rem; margin: 0; }

/* ============ FOUNDER QUOTE ============ */
.founder {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center; padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--surface), var(--bg-2));
}
.founder__avatar {
  width: clamp(96px, 13vw, 150px); height: auto; aspect-ratio: 1; flex: none;
  border-radius: 50%; object-fit: cover; object-position: 50% 22%;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 0 6px var(--brand-soft), var(--shadow);
}
.founder p { font-size: clamp(1rem, 1.8vw, 1.2rem); color: var(--text); font-weight: 300; }

/* ============ STATS ============ */
.stats { display: grid; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.stat { background: var(--surface); padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border); }
.stat__n { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 600; color: var(--brand); line-height: 1; margin-bottom: .6rem; letter-spacing: -.03em; }
.stat p { font-size: .88rem; margin: 0; }

/* ============ ACCREDITATIONS ============ */
.accreds { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.accred {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 1.35rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); font-size: .88rem;
  transition: border-color .3s, background-color .3s;
}
.accred:hover { border-color: var(--brand); background: var(--surface-2); }
.accred svg { width: 26px; height: 26px; flex: none; color: var(--brand); }

/* ============ FAQ ============ */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 1.5rem 3rem 1.5rem 0; position: relative;
  font-size: clamp(1rem, 1.7vw, 1.15rem); font-weight: 500; color: var(--text);
  transition: color .25s;
}
.faq__q:hover { color: var(--brand); }
.faq__q::after, .faq__q::before {
  content: ""; position: absolute; right: .75rem; top: 50%; background: currentColor;
  transition: transform .3s var(--ease), opacity .3s;
}
.faq__q::before { width: 14px; height: 1.5px; translate: 0 -50%; }
.faq__q::after { width: 1.5px; height: 14px; right: calc(.75rem + 6.25px); translate: 0 -50%; }
.faq__item.is-open .faq__q { color: var(--brand); }
.faq__item.is-open .faq__q::after { transform: rotate(90deg); opacity: 0; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: 1.5rem; margin: 0; max-width: 72ch; }

/* ============ BLOG ============ */
.posts { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.post {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface); transition: transform .35s var(--ease), border-color .3s;
}
.post:hover { transform: translateY(-5px); border-color: var(--border-strong); }
.post__thumb {
  aspect-ratio: 16/9; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  display: grid; place-items: center;
}
.post__thumb::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 26px 26px;
}
.post__thumb span {
  position: relative; font-family: var(--font-mono); font-size: 1.5rem; font-weight: 500;
  color: var(--brand); opacity: .55; letter-spacing: .1em;
}
.post__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.post__meta { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: .9rem; }
.post__meta span { color: var(--text-3); }
.post h3 { font-size: 1.08rem; margin-bottom: .7rem; }
.post p { font-size: .88rem; flex: 1; }

/* ============ CTA BANNER ============ */
.cta {
  position: relative; overflow: hidden; text-align: center;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: var(--surface); padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 300px at 50% 0%, var(--glow), transparent 70%); opacity: .3;
}
.cta::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 100% at 50% 50%, #000, transparent 75%);
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { margin-bottom: 1rem; }
.cta p { max-width: 50ch; margin-inline: auto; margin-bottom: 2.2rem; }

/* ============ FOOTER ============ */
.footer { background: var(--bg-2); border-top: 1px solid var(--border); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
/* explicit tracks: repeat(auto-fit,…) is invalid next to a flexible 1.4fr and kills the whole rule */
.footer__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); }
.footer__brand p { font-size: .9rem; max-width: 34ch; margin-top: 1.1rem; }
.footer h4 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1.1rem; font-weight: 500; }
.footer__links { display: grid; gap: .3rem; }
.footer__links a {
  font-size: .875rem; color: var(--text-2); width: fit-content;
  display: flex; align-items: center; min-height: 26px;   /* tap target */
  transition: color .2s, translate .2s var(--ease);
}
.footer__links a:hover { color: var(--brand); translate: 3px 0; }
.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center;
  font-size: .82rem; color: var(--text-3);
}
.footer__bottom nav { display: flex; gap: 1.5rem; margin-left: auto; flex-wrap: wrap; }
.footer__bottom a:hover { color: var(--brand); }
.socials { display: flex; gap: .6rem; margin-top: 1.5rem; }
.socials a {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border); color: var(--text-2);
  transition: border-color .25s, color .25s, transform .25s var(--ease);
}
.socials a:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.socials svg { width: 15px; }

/* ============ PAGE HERO (inner pages) ============ */
.phero { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); }
.phero .orb--1 { width: min(620px, 90vw); aspect-ratio: 1; top: -46%; left: 22%; background: var(--glow); opacity: .4; }
.phero__inner { position: relative; z-index: 1; max-width: 58rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1.5rem; }
.crumbs a:hover { color: var(--brand); }
.crumbs span { opacity: .5; }

/* ============ PROSE (services / legal) ============ */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.6rem; }
.prose h3 { margin-top: 2rem; }
.prose ul { display: grid; gap: .7rem; margin: 1.2rem 0 1.6rem; }
.prose ul li { position: relative; padding-left: 1.7rem; font-size: .95rem; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--brand);
  rotate: 45deg;
}
.prose ol { counter-reset: n; display: grid; gap: .7rem; margin: 1.2rem 0 1.6rem; padding: 0; list-style: none; }
.prose ol li { counter-increment: n; position: relative; padding-left: 2.2rem; font-size: .95rem; }
.prose ol li::before {
  content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: .78rem; color: var(--brand);
}

.aside {
  position: sticky; top: 6rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface);
}
.aside h4 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1rem; }
.aside .footer__links { margin-bottom: 1.75rem; }
.layout-2col { display: grid; grid-template-columns: 1fr 320px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

/* ============ FORM ============ */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .45rem; }
.field label { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.field input, .field textarea, .field select {
  padding: .85rem 1rem; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text);
  font-size: .95rem; transition: border-color .25s, background-color .25s;
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.field textarea { resize: vertical; min-height: 130px; }
.field--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form__note { font-size: .8rem; color: var(--text-3); }
.form__ok { display: none; padding: 1rem 1.2rem; border-radius: 10px; background: var(--brand-soft); border: 1px solid var(--brand); color: var(--text); font-size: .9rem; }
.form.is-sent .form__ok { display: block; }

/* ============ REVEAL ============ */
/* Default is VISIBLE. The hidden state is applied only once JS has confirmed it is
   running (html.js), so a script error or blocked file can never leave the page blank. */
html.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .layout-2col { grid-template-columns: 1fr; }
  .aside { position: static; }
}

@media (max-width: 991px) {
  .burger { display: block; }
  /* A backdrop-filter makes an element a containing block for its fixed-position
     descendants, which would trap the nav panel inside the 74px header instead of
     letting it fill the viewport. Drop the blur here and paint the header solid. */
  .header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--bg);
  }
  .nav {
    position: fixed; inset: 74px 0 0; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 1.25rem var(--gutter) 3rem;
    background: var(--bg); border-top: 1px solid var(--border);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden;
    transition: transform .35s var(--ease), visibility .35s;
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav { transform: none; visibility: visible; }
  .nav__link { padding: .95rem .25rem; font-size: 1rem; justify-content: space-between; width: 100%; border-bottom: 1px solid var(--border); border-radius: 0; }
  .nav__link:hover, .nav__item.is-open > .nav__link { background: none; }
  .mega {
    position: static; translate: none; transform: none; min-width: 0; width: 100%;
    background: none; border: 0; box-shadow: none; padding: 0;
    opacity: 1; visibility: visible;
    display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease);
  }
  .nav__item.is-open .mega { grid-template-rows: 1fr; }
  .mega__inner { overflow: hidden; }
  .mega__grid { grid-template-columns: 1fr 1fr; padding: .5rem 0; }
  .mega__link { padding: .55rem .25rem; font-size: .875rem; }
  .header__actions .btn { display: none; }
  .nav > .btn { display: inline-flex; margin-top: 1.5rem; width: 100%; }

  .split { grid-template-columns: 1fr; }
  .hero__grid { grid-template-columns: 1fr; }
  /* headline leads on mobile; the mark is decorative and follows it */
  .orbit { max-width: 360px; }

  /* frameworks: the carousel becomes a stacked accordion */
  .fwx { overflow: visible; mask-image: none; }
  .fwx__track { flex-direction: column; gap: .7rem; width: auto; animation: none; }
  .fw--clone { display: none; }              /* the loop clone is desktop-only */
  .fw { width: auto; }
  .fw:hover { transform: none; }
  .fw.is-open { border-color: var(--brand); }
  .fw__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
  .fw.is-open .fw__body { grid-template-rows: 1fr; }
  .fw__body > div { overflow: hidden; }
  .fw__badge { min-height: 0; margin-top: .25rem; }

  .disc__rows::before, .disc__rows::after { left: 12px; }
  .disc__row { grid-template-columns: 1fr; gap: 1.25rem; padding-left: 34px; }
  .disc__row:nth-child(even) .disc__visual { order: 0; }
  .disc__visual { aspect-ratio: 16/10; }
  .row { grid-template-columns: 1fr; gap: .75rem; }
  .row .txtlink { justify-self: start; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .field--2 { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom nav { margin-left: 0; width: 100%; gap: 1rem; }
  .narrative__step { grid-template-columns: 1fr; gap: .5rem; }
  .quotes__nav { flex-wrap: wrap; }
  .mega__grid { grid-template-columns: 1fr; }
  .orbit { max-width: 300px; }
  .orbit__label { font-size: .6rem; }
  .fw__badge { min-height: 78px; }
  .fw__badge img { max-height: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html.js [data-reveal] { opacity: 1; transform: none; }
  /* the carousel must not jump to its end frame: make it a plain scrollable row */
  .fwx { overflow-x: auto; mask-image: none; }
  .fwx__track { animation: none !important; transform: none !important; }
  .fwx__hint::after { content: " Scroll the row to see more."; }
}

@media print {
  .header, .footer, .rail, .cta, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}