/*
 * SecureCloudGate marketing site.
 *
 * Colour has one rule worth knowing before editing: the cool gradient (violet → electric → cyan)
 * is the product at work; amber appears only where something is proven (evidence, verification,
 * "And prove it."). Don't spend amber on decoration.
 */

@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --night: #090818;
  --deep: #100e2c;
  --raised: #17143c;
  --violet: #8e7cff;
  --indigo: #5b4bf5;
  --electric: #4b7bff;
  --cyan: #63e0e6;
  --amber: #ffb866;
  --ink: #ecebfa;
  --muted: #a9a6cf;
  --faint: #7c79a8;
  --line: rgb(158 148 255 / 0.16);
  --line-strong: rgb(158 148 255 / 0.32);
  --glass: linear-gradient(160deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.02) 60%);
  --ok: #5fe0b0;
  --warn: #ffb866;
  --bad: #ff8a78;
  --brand-gradient: linear-gradient(100deg, var(--violet), var(--electric) 55%, var(--cyan));

  --display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(20px, 4.500vw, 56px);
  --section: clamp(84px, 11vw, 168px);
  --radius: 18px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--night);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
code { font: 500 0.9em var(--mono); color: var(--ink); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgb(91 75 245 / 0.6); color: #fff; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--night); border-radius: 10px; font-weight: 600; text-decoration: none; transition: top 0.15s; }
.skip-link:focus { top: 12px; }
.wrap { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.narrow { max-width: 760px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background-color 0.3s, border-color 0.3s; }
.site-header.is-stuck, .site-header.is-open { background: rgb(9 8 24 / 0.82); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom-color: var(--line); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.mark { width: 34px; height: 34px; }
.brand-name { font: 600 1.18rem/1 var(--display); letter-spacing: -0.02em; }
.site-nav { display: flex; align-items: center; gap: 28px; flex: 1; justify-content: space-between; }
.nav-list { display: flex; align-items: center; gap: 4px; margin-left: 20px; }
.nav-group { position: relative; display: flex; align-items: center; }
.nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--muted); font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: color 0.15s, background-color 0.15s; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink); }
.nav-link-parent { padding-right: 2px; }
.nav-toggle { display: grid; place-items: center; width: 26px; height: 44px; padding: 0; background: none; border: 0; color: var(--faint); cursor: pointer; }
.nav-toggle svg { width: 12px; height: 12px; transition: transform 0.2s var(--ease); }
.nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-toggle[aria-expanded="true"], .nav-group:hover .nav-toggle { color: var(--ink); }
.menu { position: absolute; top: calc(100% + 6px); left: -8px; width: 320px; padding: 8px; background: rgb(18 16 48 / 0.97); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 24px 60px rgb(0 0 0 / 0.5); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.16s, transform 0.16s var(--ease), visibility 0.16s; }
.nav-group.is-open .menu { opacity: 1; visibility: visible; transform: none; }
.menu-link { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
.menu-link:hover, .menu-link:focus-visible { background: rgb(142 124 255 / 0.12); }
.menu-label { display: block; font-weight: 600; font-size: 0.95rem; }
.menu-note { display: block; color: var(--faint); font-size: 0.84rem; line-height: 1.35; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.menu-button { display: none; width: 44px; height: 44px; padding: 0; background: none; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.menu-button svg { width: 22px; height: 22px; margin: auto; stroke: currentColor; stroke-width: 1.800; stroke-linecap: round; fill: none; }
.menu-button path { transform-origin: 12px 12px; transition: transform 0.2s var(--ease); }
.menu-button[aria-expanded="true"] .bar-a { transform: translateY(4px) rotate(45deg); }
.menu-button[aria-expanded="true"] .bar-b { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Buttons and links ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 14px; font-weight: 600; font-size: 1rem; text-decoration: none; transition: transform 0.15s var(--ease), box-shadow 0.2s, background-color 0.2s, border-color 0.2s; }
.button:active { transform: translateY(1px); }
.button-primary { background: linear-gradient(100deg, #6a58ff, #3f6cf5); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 10px 30px -8px rgb(79 91 255 / 0.7); }
.button-primary:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.34), 0 14px 38px -8px rgb(79 91 255 / 0.95); }
.button-quiet { border: 1px solid var(--line-strong); color: var(--ink); background: rgb(255 255 255 / 0.03); }
.button-quiet:hover { border-color: var(--violet); background: rgb(142 124 255 / 0.1); }
.button-small { min-height: 44px; padding: 0 18px; border-radius: 12px; font-size: 0.93rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.text-link { display: inline-block; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--violet); text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color 0.15s; }
.text-link:hover { text-decoration-color: var(--cyan); }
.link-row { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 28px; }

/* ---------- Type ---------- */
.eyebrow { font: 600 0.8rem/1.4 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 24px; }
.hero-title { font: 600 clamp(2.600rem, 4.700vw, 4.200rem)/1.02 var(--display); letter-spacing: -0.04em; text-wrap: balance; }
.topic-title { font: 600 clamp(2.400rem, 4.600vw, 4rem)/1.02 var(--display); letter-spacing: -0.038em; text-wrap: balance; max-width: 16ch; }
.title { font: 600 clamp(2rem, 3.500vw, 3.050rem)/1.06 var(--display); letter-spacing: -0.032em; text-wrap: balance; max-width: 20ch; }
.subtitle { font: 600 1.45rem/1.2 var(--display); letter-spacing: -0.02em; }
.lede { margin-top: 24px; max-width: 34em; color: var(--muted); font-size: clamp(1.100rem, 1.400vw, 1.260rem); line-height: 1.55; }
.aside { margin-top: 24px; max-width: 36em; padding-left: 18px; border-left: 2px solid var(--line-strong); color: var(--muted); font-size: 0.98rem; }
.statement { margin-top: 48px; max-width: 24em; font: 500 clamp(1.500rem, 2.600vw, 2.200rem)/1.2 var(--display); letter-spacing: -0.025em; text-wrap: balance; }
.statement-small { margin-top: 32px; font-size: clamp(1.250rem, 1.800vw, 1.500rem); color: var(--ink); }
.statement-large { margin-top: 0; max-width: 18em; font-size: clamp(2rem, 4.400vw, 3.600rem); line-height: 1.06; }
.split-copy > p + p, .split-copy > .steps + p { margin-top: 24px; }

.locator { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; color: var(--violet); font-size: 0.9rem; font-weight: 600; }
.ticks { display: inline-flex; gap: 3px; }
.tick { width: 12px; height: 3px; border-radius: 2px; background: rgb(158 148 255 / 0.22); }
.tick-on { background: var(--violet); box-shadow: 0 0 10px rgb(142 124 255 / 0.9); }

/* ---------- Sections ---------- */
.section { position: relative; padding-block: var(--section); }
.section-tight { padding-block: calc(var(--section) * 0.55); }
.section-head { margin-bottom: clamp(40px, 5vw, 72px); }
.section-glow-a::before, .section-glow-b::before, .closing::before, .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.section-glow-a::before { background: radial-gradient(60% 55% at 85% 30%, rgb(91 75 245 / 0.22), transparent 70%); }
.section-glow-b::before { background: radial-gradient(55% 60% at 12% 55%, rgb(47 107 245 / 0.2), transparent 70%); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.split-flip > .split-copy { order: 2; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 80px); }
.hero::before { inset: -140px 0 0; background: radial-gradient(48% 60% at 78% 38%, rgb(91 75 245 / 0.34), transparent 70%), radial-gradient(40% 50% at 96% 78%, rgb(47 107 245 / 0.24), transparent 70%), radial-gradient(34% 40% at 8% 4%, rgb(99 224 230 / 0.07), transparent 70%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.hero-graph { position: relative; aspect-ratio: 1 / 0.92; margin-right: calc(var(--gutter) * -0.6); }
.hero-graph canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.journey { display: flex; flex-wrap: wrap; gap: 8px 0; margin-top: clamp(32px, 4vw, 56px); padding-top: 28px; border-top: 1px solid var(--line); color: var(--faint); font-size: 0.92rem; font-weight: 500; }
.journey li { display: flex; align-items: center; animation: journey 12s linear infinite; }
.journey li:not(:last-child)::after { content: ""; width: clamp(14px, 2.400vw, 36px); height: 1px; margin-inline: 12px; background: var(--line-strong); }
.journey li:nth-child(2) { animation-delay: 1.500s; }
.journey li:nth-child(3) { animation-delay: 3s; }
.journey li:nth-child(4) { animation-delay: 4.500s; }
.journey li:nth-child(5) { animation-delay: 6s; }
.journey li:nth-child(6) { animation-delay: 7.500s; }
.journey li:nth-child(7) { animation-delay: 9s; }
.journey li:nth-child(8) { animation-delay: 10.500s; animation-name: journey-proof; }
@keyframes journey { 0%, 14%, 100% { color: var(--faint); } 3%, 9% { color: var(--ink); } }
@keyframes journey-proof { 0%, 14%, 100% { color: var(--faint); } 3%, 9% { color: var(--amber); } }

/* ---------- Panels (product illustrations) ---------- */
.panel { position: relative; padding: 24px; background: var(--glass), rgb(16 14 44 / 0.72); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 30px 80px -30px rgb(0 0 0 / 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.panel-kicker { font: 600 1.05rem/1.2 var(--display); letter-spacing: -0.01em; }
.chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font-size: 0.8rem; font-weight: 500; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.figure-note { margin-top: 18px; color: var(--faint); font-size: 0.8rem; line-height: 1.45; }
.kv-list { display: grid; }
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 10px 0; border-top: 1px solid var(--line); }
.kv dt { color: var(--muted); font-size: 0.92rem; }
.kv dd { text-align: right; font-weight: 600; font-size: 0.96rem; }
.tone-proof { color: var(--amber); }
.risk { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.risk::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.risk-low { color: var(--ok); }
.risk-high { color: var(--bad); }
.risk-high-good { color: var(--ok); }
.mock-action { display: flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 18px; border-radius: 12px; background: linear-gradient(100deg, rgb(106 88 255 / 0.9), rgb(63 108 245 / 0.9)); color: #fff; font-weight: 600; font-size: 0.95rem; cursor: default; user-select: none; }
.diff { margin-top: 14px; overflow-x: auto; white-space: nowrap; padding: 12px 14px; border-radius: 12px; background: rgb(5 4 18 / 0.6); border: 1px solid var(--line); font: 500 0.8rem/1.7 var(--mono); }
.diff-line { display: flex; gap: 16px; color: var(--faint); }
.diff-line::before { content: ""; width: 1ch; flex: none; }
.diff-line span:first-child { width: 62px; flex: none; }
.diff-add { color: var(--ok); }
.diff-add::before { content: "+"; }
.hash { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: rgb(5 4 18 / 0.6); border: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; }
.hash code { color: var(--cyan); font-size: 0.82rem; }

/* ---------- Steps (real sequences) ---------- */
.steps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; margin-top: 36px; }
.step { display: flex; align-items: center; color: var(--faint); font-size: 0.9rem; font-weight: 600; transition: color 0.35s; }
.step:not(:last-child)::after { content: ""; width: 22px; height: 1px; margin-inline: 10px; background: var(--line-strong); transition: background-color 0.35s; }
.step.is-done { color: var(--muted); }
.step.is-on { color: var(--ink); }
.step.is-done::after { background: var(--violet); }
.step:last-child.is-on { color: var(--amber); }
.steps-tight { margin: 0 0 20px; }
.steps-tight .step { font-size: 0.82rem; }
.steps-tight .step:not(:last-child)::after { width: 12px; margin-inline: 7px; }
.steps-vertical { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 0; }
.steps-vertical .step { position: relative; padding: 13px 0 13px 34px; color: var(--ink); font-size: 1.05rem; }
.steps-vertical .step::before { content: ""; position: absolute; left: 6px; top: 50%; width: 11px; height: 11px; margin: -5.500px 0 0; border-radius: 50%; background: var(--night); border: 2px solid var(--violet); z-index: 1; }
.steps-vertical .step:not(:last-child)::after { position: absolute; left: 11px; top: 50%; height: 100%; width: 1px; margin: 0; background: var(--line-strong); }
.steps-vertical .step:last-child { color: var(--amber); }
.steps-vertical .step:last-child::before { border-color: var(--amber); }

/* ---------- Roles ---------- */
.roles { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.role-tabs { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); }
.role-tab { position: relative; min-height: 48px; padding: 0 20px; background: none; border: 0; text-align: left; color: var(--muted); font: 500 1.05rem var(--body); cursor: pointer; transition: color 0.15s; }
.role-tab::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px; background: var(--violet); transform: scaleY(0); transition: transform 0.25s var(--ease); }
.role-tab:hover { color: var(--ink); }
.role-tab[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.role-tab[aria-selected="true"]::before { transform: scaleY(1); }
.role-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.role-panel[hidden] { display: none; }
.role-line { font: 500 clamp(1.600rem, 2.800vw, 2.400rem)/1.14 var(--display); letter-spacing: -0.028em; text-wrap: balance; }
.role-view .kv:first-child { border-top: 0; padding-top: 0; }

/* ---------- Punchline ---------- */
.punch { position: relative; padding-block: calc(var(--section) * 1.1); background: radial-gradient(70% 60% at 50% 100%, rgb(91 75 245 / 0.26), transparent 70%); border-block: 1px solid var(--line); }
.punch-lines { font: 600 clamp(1.900rem, 6.200vw, 5.500rem)/1.02 var(--display); letter-spacing: -0.045em; }
.punch-lines span { display: block; color: rgb(236 235 250 / 0.38); }
.punch-lines span:nth-child(2) { color: rgb(236 235 250 / 0.5); }
.punch-lines span:nth-child(3) { color: rgb(236 235 250 / 0.64); }
.punch-lines span:nth-child(4) { color: rgb(236 235 250 / 0.8); }
.punch-lines span:nth-child(5) { color: var(--ink); }
.punch-proof { margin-top: 0.35em; font: 600 clamp(1.900rem, 6.200vw, 5.500rem)/1.02 var(--display); letter-spacing: -0.045em; color: var(--amber); text-shadow: 0 0 60px rgb(255 184 102 / 0.35); }

/* ---------- Change passport ---------- */
.passport { padding: 0; overflow: hidden; }
.passport-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 24px; background: linear-gradient(100deg, rgb(142 124 255 / 0.22), rgb(75 123 255 / 0.12)); border-bottom: 1px solid var(--line); }
.passport-title { font: 600 0.82rem var(--body); letter-spacing: 0.16em; text-transform: uppercase; }
.passport-id { font: 500 0.86rem var(--mono); color: var(--cyan); }
.passport .kv-list { padding: 6px 24px 0; }
.passport .hash { margin: 14px 24px 0; }
.passport .figure-note { margin: 16px 24px 20px; }
.passport-group { transition: opacity 0.5s, transform 0.5s var(--ease); }
.passport-group:first-child .kv:first-child { border-top: 0; }
.js [data-once] .passport-group { opacity: 0.16; transform: translateX(8px); }
.js [data-once] .passport-group.is-on, .js [data-once] .passport-group.is-done { opacity: 1; transform: none; }
.passport-evidence .kv:first-child { border-top: 0; }

/* ---------- Autopilot ---------- */
.autopilot { display: grid; grid-template-columns: minmax(0, 1.150fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.finding-list li { display: grid; grid-template-columns: 5.200em 1fr; align-items: baseline; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.finding-list b { font: 600 1.7rem/1 var(--display); letter-spacing: -0.03em; color: var(--bad); }
.finding-list span { color: var(--ink); font-size: 1.02rem; }
.action-list li { position: relative; padding: 12px 0 12px 28px; border-top: 1px solid var(--line); font-weight: 500; }
.action-list li::before { content: ""; position: absolute; left: 2px; top: 1.250em; width: 12px; height: 2px; background: var(--cyan); }
.reduction { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); }

/* ---------- Growth ---------- */
.section-growth { background: linear-gradient(180deg, transparent, rgb(16 14 44 / 0.7) 30%, rgb(16 14 44 / 0.7) 70%, transparent); }
.growth { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: stage; }
.growth-stage { position: relative; padding: 36px 28px 0 0; border-top: 1px solid var(--line-strong); }
.growth-stage::before { content: ""; position: absolute; left: 0; top: -6px; width: 11px; height: 11px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 5px rgb(142 124 255 / 0.18); }
.growth-stage:nth-child(2)::before { background: #6f7cff; }
.growth-stage:nth-child(3)::before { background: var(--electric); }
.growth-stage:nth-child(4)::before { background: var(--cyan); }
.growth-name { font: 600 1.7rem/1.1 var(--display); letter-spacing: -0.03em; }
.growth-size { margin: 6px 0 20px; color: var(--muted); font-size: 0.95rem; }
.growth-stage li { padding: 5px 0; color: var(--ink); font-size: 0.98rem; }

/* ---------- Mission control ---------- */
.mission { padding: clamp(24px, 3.500vw, 44px); }
.gauges { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); }
.gauge { position: relative; text-align: center; }
.gauge svg { width: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.gauge-track { stroke: rgb(158 148 255 / 0.14); }
.gauge-value { stroke: var(--violet); filter: drop-shadow(0 0 6px rgb(142 124 255 / 0.7)); }
.gauge:nth-child(2) .gauge-value, .gauge:nth-child(3) .gauge-value { stroke: #6f7cff; }
.gauge:nth-child(4) .gauge-value { stroke: var(--electric); }
.gauge:nth-child(5) .gauge-value, .gauge:nth-child(6) .gauge-value { stroke: var(--cyan); }
.gauge-score { position: absolute; inset: 0 0 auto; aspect-ratio: 1; display: grid; place-items: center; font: 600 clamp(1.400rem, 2.800vw, 2.400rem)/1 var(--display); letter-spacing: -0.03em; }
.gauge-name { margin-top: 10px; color: var(--muted); font-size: 0.9rem; font-weight: 500; }
.facts { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); }
.facts li { padding: 20px 12px 0 0; }
.facts b { display: block; font: 600 1.6rem/1.1 var(--display); letter-spacing: -0.03em; }
.facts span { color: var(--muted); font-size: 0.86rem; line-height: 1.3; display: block; margin-top: 4px; }
.facts-inline { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }

/* ---------- Integrations ---------- */
.category-list { margin-top: 32px; display: grid; gap: 0; }
.category-list div { display: grid; grid-template-columns: minmax(0, 13em) 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.category-list dt { color: var(--muted); font-size: 0.95rem; }
.category-list dd { font-weight: 600; }
.category-list + p { margin-top: 28px; }
.integration-graph svg { width: 100%; height: auto; overflow: visible; }
.trace { fill: none; stroke: url(#trace-g); stroke-width: 1.500; stroke-dasharray: 3 3; animation: trace 3.500s linear infinite; }
@keyframes trace { to { stroke-dashoffset: -30; } }
.trace-dot { fill: var(--violet); }
.trace-label { fill: var(--ink); font: 500 15px var(--body); }
.hub { fill: rgb(23 20 60 / 0.9); stroke: var(--cyan); stroke-width: 1.200; filter: drop-shadow(0 0 22px rgb(99 224 230 / 0.35)); }
.hub-label { fill: var(--ink); font: 600 19px var(--display); letter-spacing: -0.02em; }

/* ---------- Identity ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; max-width: 34em; }
.tag-list li { padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.92rem; font-weight: 500; }
.access-chain { margin-top: clamp(40px, 5vw, 64px); padding: 24px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: rgb(16 14 44 / 0.6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.access-chain .steps { margin-top: 0; }
.grant { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 0.95rem; }
.grant-what { font-weight: 600; }
.grant-time { color: var(--muted); }
.grant-time time { font: 600 1rem var(--mono); color: var(--cyan); }

/* ---------- Photos ---------- */
.photo-frame { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); aspect-ratio: 5 / 4; box-shadow: 0 40px 90px -40px rgb(0 0 0 / 0.9); }
.photo-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgb(91 75 245 / 0.28), rgb(9 8 24 / 0.05) 45%, rgb(9 8 24 / 0.55)); mix-blend-mode: multiply; pointer-events: none; }
.photo { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) contrast(1.04) brightness(0.86); }
.photo-tall { aspect-ratio: 4 / 5; }
.photo-wide { aspect-ratio: 16 / 9; margin-top: 36px; }

/* ---------- ISMS ---------- */
.isms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: isms; }
.isms li { counter-increment: isms; position: relative; min-height: 92px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgb(16 14 44 / 0.6); font-weight: 600; font-size: 0.96rem; line-height: 1.25; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.isms li::before { content: counter(isms, decimal-leading-zero); font: 500 0.78rem var(--mono); color: var(--faint); }
.isms li:nth-child(7) { border-color: rgb(255 184 102 / 0.6); color: var(--amber); box-shadow: 0 0 34px -10px rgb(255 184 102 / 0.5); }

/* ---------- Audit ---------- */
.table-scroll { overflow-x: auto; margin-inline: -8px; padding-inline: 8px; }
.audit-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 0.93rem; }
.audit-table th, .audit-table td { padding: 13px 16px 13px 0; text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
.audit-table thead th { border-top: 0; color: var(--muted); font-weight: 500; font-size: 0.85rem; }
.audit-table tbody th { font-weight: 600; }
.audit-table td { color: var(--ink); }
.status { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-ok { color: var(--ok); }
.status-warn { color: var(--bad); }
.audit-finding { margin-top: 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgb(255 138 120 / 0.35); background: rgb(255 138 120 / 0.06); font-size: 0.93rem; color: var(--ink); }
.audit-finding b { color: var(--bad); font-weight: 600; margin-right: 6px; }

/* ---------- Cost ---------- */
.cost-delta { font: 600 clamp(3.200rem, 6vw, 4.600rem)/1 var(--display); letter-spacing: -0.045em; }
.cost-why { margin: 18px 0 4px; color: var(--muted); }
.cost-list li { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.cost-list b { font: 600 0.95rem var(--mono); }
.bar { grid-column: 1 / -1; width: 100%; height: 4px; }
.bar-track { fill: rgb(158 148 255 / 0.14); }
.bar-value { fill: var(--electric); }
.feature-narrow { max-width: 520px; }

/* ---------- Incident timeline ---------- */
.timeline { margin-top: 32px; border-left: 1px solid var(--line-strong); }
.event { position: relative; display: flex; align-items: baseline; gap: 18px; padding: 9px 0 9px 24px; color: var(--muted); transition: color 0.4s; }
.event::before { content: ""; position: absolute; left: -5px; top: 1.050em; width: 9px; height: 9px; border-radius: 50%; background: var(--night); border: 2px solid var(--faint); transition: border-color 0.4s, background-color 0.4s; }
.event time { font: 500 0.88rem var(--mono); color: var(--faint); }
.event span { font-weight: 600; font-size: 1.05rem; }
.event.is-on, .event.is-done { color: var(--ink); }
.event.is-on::before, .event.is-done::before { border-color: var(--violet); background: var(--violet); }
.event-warn.is-on, .event-warn.is-done { color: var(--warn); }
.event-bad.is-on, .event-bad.is-done { color: var(--bad); }
.event-bad.is-on::before, .event-bad.is-done::before, .event-warn.is-on::before, .event-warn.is-done::before { border-color: var(--bad); background: var(--bad); }
.event-good.is-on, .event-good.is-done { color: var(--ok); }
.event-good.is-on::before, .event-good.is-done::before { border-color: var(--ok); background: var(--ok); }
html:not(.js) .event { color: var(--ink); }

/* ---------- Offboarding, review ---------- */
.access-list li { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--line); }
.access-list li:first-child { border-top: 0; padding-top: 0; }
.access-list b { color: var(--bad); font-weight: 600; }
.check-list li { position: relative; display: flex; justify-content: space-between; padding: 11px 34px 11px 0; border-top: 1px solid var(--line); font-weight: 500; }
.check-list li:first-child { border-top: 0; padding-top: 0; }
.check-list li::after { content: ""; position: absolute; right: 6px; top: 50%; width: 13px; height: 7px; margin-top: -6px; border-left: 2px solid var(--amber); border-bottom: 2px solid var(--amber); transform: rotate(-45deg); }
.check-list li:first-child::after { margin-top: -11px; }

/* ---------- Phone ---------- */
.phone-figure { display: grid; justify-items: center; }
.phone { width: min(320px, 100%); padding: 10px; border-radius: 44px; background: linear-gradient(160deg, #2b2760, #0e0c28); border: 1px solid var(--line-strong); box-shadow: 0 50px 100px -40px rgb(0 0 0 / 0.9), 0 0 80px -20px rgb(91 75 245 / 0.5); }
.phone-screen { padding: 22px 18px 26px; border-radius: 34px; background: radial-gradient(120% 60% at 50% 0%, #1b1848, var(--night)); min-height: 520px; display: flex; flex-direction: column; gap: 18px; }
.phone-bar { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.phone-lock { color: var(--faint); font-size: 0.74rem; font-weight: 500; }
.phone-card { padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: rgb(255 255 255 / 0.04); }
.phone-kicker { color: var(--muted); font-size: 0.82rem; }
.phone-id { margin: 2px 0 8px; font: 600 1.05rem var(--mono); }
.phone-card .kv { padding: 8px 0; }
.phone-card .kv dt, .phone-card .kv dd { font-size: 0.86rem; }
.phone-bio { margin-top: auto; display: grid; justify-items: center; gap: 12px; text-align: center; color: var(--muted); font-size: 0.88rem; }
.phone-bio svg { width: 54px; height: 54px; color: var(--cyan); }

/* ---------- Bands, closing ---------- */
.band { position: relative; padding-block: var(--section); border-block: 1px solid var(--line); background: radial-gradient(60% 80% at 20% 50%, rgb(75 123 255 / 0.2), transparent 70%); }
.band .title { max-width: none; font-size: clamp(2.400rem, 6vw, 5rem); letter-spacing: -0.045em; }
.band .statement { color: var(--muted); max-width: 28em; }
.band-plain { padding-block: calc(var(--section) * 0.7); }
.design-visual { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 32px; align-items: center; }
.plain-list { margin-top: 24px; }
.plain-list li { position: relative; padding: 9px 0 9px 24px; border-top: 1px solid var(--line); }
.plain-list li::before { content: ""; position: absolute; left: 2px; top: 1.250em; width: 10px; height: 2px; background: var(--violet); }
.plain-list + p { margin-top: 28px; }
.closing { position: relative; padding-block: calc(var(--section) * 1.150); overflow: hidden; }
.closing::before { background: radial-gradient(70% 90% at 50% 110%, rgb(91 75 245 / 0.42), transparent 70%), radial-gradient(40% 50% at 85% 20%, rgb(99 224 230 / 0.1), transparent 70%); z-index: 0; }
.closing-inner { position: relative; }
.closing-title { font: 600 clamp(2.500rem, 6.200vw, 5.400rem)/1 var(--display); letter-spacing: -0.045em; text-wrap: balance; max-width: 15ch; }
.closing-lede { margin-top: 28px; max-width: 32em; color: var(--muted); font-size: 1.2rem; }

/* ---------- Topic pages ---------- */
.topic-hero { position: relative; padding: clamp(48px, 7vw, 104px) 0 clamp(40px, 5vw, 72px); }
.topic-hero::before { content: ""; position: absolute; inset: -140px 0 0; z-index: -1; background: radial-gradient(50% 70% at 80% 30%, rgb(91 75 245 / 0.28), transparent 70%); pointer-events: none; }
.topic-blocks { display: grid; gap: 0; }
.topic-block { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(20px, 5vw, 80px); padding-block: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); }
.topic-body { color: var(--muted); max-width: 40em; }
.topic-body p { font-size: 1.1rem; }
.topic-body .plain-list { color: var(--ink); }
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.area { padding: 32px 32px 36px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 110px; }
.area-name { font: 600 1.55rem/1.1 var(--display); letter-spacing: -0.025em; }
.area p { color: var(--muted); flex: 1; }
.area .text-link { align-self: flex-start; font-size: 0.95rem; }
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.related a { display: block; height: 100%; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color 0.2s, background-color 0.2s; }
.related a:hover { border-color: var(--violet); background: rgb(142 124 255 / 0.07); }
.related span { display: block; font: 600 1.2rem/1.2 var(--display); letter-spacing: -0.02em; }
.related small { display: block; margin-top: 6px; color: var(--muted); font-size: 0.92rem; }

/* ---------- About, contact, legal ---------- */
.beliefs li { padding-block: clamp(20px, 3vw, 36px); border-top: 1px solid var(--line); font: 600 clamp(1.700rem, 4.200vw, 3.400rem)/1.08 var(--display); letter-spacing: -0.038em; text-wrap: balance; max-width: 22em; }
.belief-close { margin-top: clamp(32px, 5vw, 64px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--amber); max-width: 30em; font: 500 clamp(1.300rem, 2.200vw, 1.800rem)/1.3 var(--display); letter-spacing: -0.02em; color: var(--amber); }
.disciplines { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; margin-top: clamp(40px, 5vw, 72px); }
.disciplines div { padding: 22px 0; border-top: 1px solid var(--line); }
.disciplines dt { font: 600 1.15rem/1.2 var(--display); letter-spacing: -0.015em; }
.disciplines dd { margin-top: 8px; color: var(--muted); font-size: 0.95rem; }
.contact-notes { margin-top: 56px; }
.contact-notes div { padding: 20px 0; border-top: 1px solid var(--line); }
.contact-notes dt { font-weight: 600; }
.contact-notes dd { margin-top: 4px; color: var(--muted); }
.prose .subtitle { margin-top: 44px; }
.prose p { margin-top: 12px; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { padding: 72px 0 40px; border-top: 1px solid var(--line); background: rgb(5 4 16 / 0.6); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2.200fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer-brand p { margin-top: 16px; color: var(--muted); max-width: 22em; }
.footer-chain { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 24px; max-width: 26em; color: var(--faint); font-size: 0.8rem; }
.footer-chain li:not(:last-child)::after { content: "→"; margin-inline: 7px; color: var(--line-strong); }
.footer-chain li:last-child { color: var(--amber); }
.footer-title { font: 600 0.92rem var(--body); color: var(--muted); margin-bottom: 14px; }
.footer-col li a { display: inline-flex; align-items: center; min-height: 36px; color: var(--ink); text-decoration: none; font-size: 0.97rem; }
.footer-col li a:hover { color: var(--cyan); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--faint); font-size: 0.86rem; }

/* ---------- Reveal ---------- */
.js [data-reveal] { opacity: 0; transition: opacity 0.9s var(--ease); }
.js [data-reveal].is-in { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .menu-button { display: grid; }
  .site-nav { position: fixed; inset: 72px 0 0; display: none; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 24px; padding: 16px var(--gutter) 40px; overflow-y: auto; background: var(--night); }
  .site-header.is-open .site-nav { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; margin-left: 0; }
  .nav-group { flex-wrap: wrap; border-top: 1px solid var(--line); }
  .nav-list > li:not(.nav-group) { border-top: 1px solid var(--line); }
  .nav-link { min-height: 56px; padding: 0; font-size: 1.15rem; color: var(--ink); flex: 1; }
  .nav-toggle { width: 56px; height: 56px; }
  .nav-toggle svg { width: 16px; height: 16px; }
  .menu { position: static; display: none; width: 100%; padding: 0 0 12px; border: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .nav-group.is-open .menu { display: block; }
  .menu-link { padding: 10px 0; }
  .nav-actions { flex-direction: column; align-items: stretch; }
  .nav-actions .nav-link { justify-content: center; border: 1px solid var(--line-strong); border-radius: 12px; font-size: 1rem; flex: none; }
  .nav-actions .button { min-height: 52px; }
}

@media (max-width: 900px) {
  .hero-grid, .split, .roles, .role-panel, .autopilot, .design-visual { grid-template-columns: minmax(0, 1fr); }
  .split-flip > .split-copy { order: 0; }
  .hero-graph { aspect-ratio: 1 / 0.86; margin-inline: calc(var(--gutter) * -0.5); }
  .journey li:not(:last-child)::after { width: 12px; margin-inline: 8px; }
  .role-tabs { flex-direction: row; overflow-x: auto; gap: 0; border-left: 0; border-bottom: 1px solid var(--line); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .role-tabs::-webkit-scrollbar { display: none; }
  .role-tab { flex: none; padding: 0 16px; white-space: nowrap; }
  .role-tab:first-child { padding-left: 0; }
  .role-tab::before { left: 0; right: 16px; top: auto; bottom: -1px; width: auto; height: 2px; transform: scaleX(0); }
  .role-tab[aria-selected="true"]::before { transform: scaleX(1); }
  .growth { grid-template-columns: minmax(0, 1fr); border-left: 1px solid var(--line-strong); }
  .growth-stage { padding: 0 0 36px 28px; border-top: 0; }
  .growth-stage::before { left: -6px; top: 8px; }
  .gauges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts-inline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .topic-block { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .areas { grid-template-columns: minmax(0, 1fr); }
  .area { padding-right: 0; }
  .related { grid-template-columns: minmax(0, 1fr); }
  .disciplines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .photo-tall { aspect-ratio: 5 / 4; }
  .design-visual .photo-frame { display: none; }
  .access-chain { padding: 20px; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .actions .button { flex: 1 1 100%; }
  .isms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-list div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .disciplines { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: 20px; }
  .passport { padding: 0; }
  .trace-label { font-size: 19px; }
  .hub-label { font-size: 21px; }
  .finding-list li { grid-template-columns: 5.400em 1fr; }
  .finding-list b { font-size: 1.4rem; }
  .kv { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .js [data-reveal] { opacity: 1; }
  .js [data-once] .passport-group { opacity: 1; transform: none; }
  .journey li { color: var(--muted); }
  .journey li:last-child { color: var(--amber); }
}

@media print {
  .site-header, .hero-graph, .closing .actions { display: none; }
  body { background: #fff; color: #000; }
}
.passport-stage { max-width: 640px; }