/* =====================================================================
   VEIL · THE SEALED FILE
   Static stylesheet. No build step. Brand tokens mirror veilit.xyz.
   Sections:
     1. Fonts and tokens          8. Gallery
     2. Base and utilities        9. Progression
     3. Navigation               10. The reveal
     4. Hero                     11. Beyond the file / Your view
     5. Record component         12. About VEIL / FAQ / Final CTA
     6. Record skins (tiers)     13. Footer
     7. Anatomy / How / Tiers    14. Motion and responsive
   ===================================================================== */

/* 1. FONTS AND TOKENS ------------------------------------------------- */
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@property --ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  color-scheme: dark;
  --ink: #05040b;
  --ink-2: #0c0a18;
  --ink-3: #131026;
  --ink-4: #1c1734;
  --fg: #f6f4ff;
  --fg-2: rgba(246, 244, 255, 0.7);
  --fg-3: rgba(246, 244, 255, 0.54);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.22);
  --veil: #a08bff;
  --veil-deep: #6b4ff0;
  --veil-hi: #ddd3ff;
  --veil-wash: rgba(160, 139, 255, 0.1);
  --mint: #7ee2c8;
  --exposed: #ffb547;
  --exposed-hi: #ffd391;
  --f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 0.8, 0.2, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --r-1: 8px;
  --r-2: 14px;
  --r-3: 22px;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --nav-h: 76px;
  --guil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='36' viewBox='0 0 120 36'%3E%3Cg fill='none' stroke='%23a08bff' stroke-width='.6'%3E%3Cpath d='M0 18c15-14 45-14 60 0s45 14 60 0' stroke-opacity='.24'/%3E%3Cpath d='M0 18c15 14 45 14 60 0s45-14 60 0' stroke-opacity='.24'/%3E%3Cpath d='M0 9c15-7 45-7 60 0s45 7 60 0' stroke-opacity='.12'/%3E%3Cpath d='M0 27c15 7 45 7 60 0s45-7 60 0' stroke-opacity='.12'/%3E%3C/g%3E%3C/svg%3E");
  --noise: 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='.85' 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 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 2. BASE AND UTILITIES ----------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  background: var(--ink);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: rgba(160, 139, 255, 0.35); color: #fff; }

:focus-visible {
  outline: 2px solid var(--veil-hi);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: fixed;
  left: 16px; top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--fg);
  color: var(--ink);
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 16px; }

/* Ambient environment: noise + glow, fixed behind everything */
.env {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 78% -5%, rgba(107, 79, 240, 0.2), transparent 70%),
    radial-gradient(40% 35% at 0% 100%, rgba(160, 139, 255, 0.05), transparent 70%),
    var(--ink);
}
.env::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.035;
}

/* Type */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 500 12px/1.2 var(--f-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--veil);
}
.eyebrow__n { color: var(--fg-3); }
.eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.h2 {
  font-size: clamp(2.15rem, 1.15rem + 3.7vw, 4.25rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.h3 {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.lede {
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.18rem);
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 58ch;
  text-wrap: pretty;
}
.accent {
  background: linear-gradient(95deg, #e4dcff 0%, var(--veil) 60%, #8d74ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mono {
  font-family: var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
}
.fine {
  font: 400 13px/1.55 var(--f-sans);
  color: var(--fg-3);
}

/* Buttons */
.btn {
  --h: 50px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--h);
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 13px;
  font: 600 15px/1 var(--f-sans);
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease),
    border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), color 0.35s var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform 0.35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--primary {
  background: var(--fg);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 14px 40px -14px rgba(160, 139, 255, 0.75);
}
.btn--primary:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 18px 50px -14px rgba(160, 139, 255, 0.95);
}
.btn--ghost {
  border-color: var(--line-2);
  background: rgba(255, 255, 255, 0.025);
  color: var(--fg);
}
.btn--ghost:hover {
  border-color: rgba(160, 139, 255, 0.55);
  background: var(--veil-wash);
  transform: translateY(-1px);
}
.btn--sm { --h: 40px; padding: 0 16px; font-size: 14px; border-radius: 11px; }
.btn[disabled],
.btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(12, 10, 24, 0.6);
  font: 500 11.5px/1 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.chip__dot {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--veil-wash);
  box-shadow: inset 0 0 0 1px rgba(160, 139, 255, 0.35);
}
.chip__dot::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--veil);
  box-shadow: 0 0 10px var(--veil);
}
.chip__sep { color: var(--line-3); }
.chip b { color: var(--veil-hi); font-weight: 500; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid rgba(160, 139, 255, 0.35);
  background: rgba(160, 139, 255, 0.08);
  font: 500 11px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--veil-hi);
}
.tag--amber {
  border-color: rgba(255, 181, 71, 0.45);
  background: rgba(255, 181, 71, 0.08);
  color: var(--exposed-hi);
}
.tag__pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse 2.4s var(--ease) infinite;
}

/* Sections */
.section {
  position: relative;
  padding-block: clamp(80px, 10vw, 136px);
}
.sindex {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(40px, 6vw, 64px);
  font: 500 11px/1 var(--f-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.sindex i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.sindex b { color: var(--veil); font-weight: 500; }

.shead {
  display: grid;
  gap: 20px;
  max-width: 780px;
  margin-bottom: clamp(44px, 6vw, 76px);
}
.shead--center { margin-inline: auto; text-align: center; justify-items: center; }
.shead--center .lede { margin-inline: auto; }

/* Scroll reveal (only when JS is active) */
.js .rv {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .rv.is-in { opacity: 1; transform: none; }

/* 3. NAVIGATION ------------------------------------------------------- */
.nav {
  position: fixed;
  top: 12px;
  left: 0; right: 0;
  z-index: 50;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.nav__bar {
  position: relative;
  max-width: var(--wrap);
  height: 60px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 10px 0 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  isolation: isolate;
  pointer-events: auto;
  transition: border-color 0.4s var(--ease);
}
/* Glass lives on a pseudo-element so the bar never becomes the
   containing block of the fixed mobile menu */
.nav__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(12, 10, 24, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  transition: background-color 0.4s var(--ease);
}
.is-scrolled .nav__bar { border-color: var(--line-2); }
.is-scrolled .nav__bar::before { background: rgba(8, 7, 16, 0.78); }
.nav__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  border-radius: 10px;
}
.nav__brand img { width: 70px; height: auto; }
.nav__product {
  padding-left: 14px;
  border-left: 1px solid var(--line-2);
  font: 500 11px/1 var(--f-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.nav__menu { display: contents; }
.nav__menu > nav { margin-left: auto; }
.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav__links a {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--fg-2);
  font-size: 14.5px;
  font-weight: 500;
  transition: color 0.25s, background-color 0.25s;
}
.nav__links a:hover { color: var(--fg); background: rgba(255, 255, 255, 0.04); }
.nav__links a[aria-current="true"] { color: var(--fg); }
.nav__links a[aria-current="true"]::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 4px;
  background: var(--veil);
  box-shadow: 0 0 8px var(--veil);
}
.nav__links .n { display: none; }
.nav__cta { flex: none; }
.nav__menu-foot { display: none; }
.nav__toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  place-items: center;
}
.nav__toggle span {
  position: relative;
  display: block;
  width: 16px; height: 1.5px;
  background: var(--fg);
  transition: transform 0.35s var(--ease), background-color 0.2s;
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px; height: 1.5px;
  background: var(--fg);
  transition: transform 0.35s var(--ease);
}
.nav__toggle span::before { transform: translateY(-5px); }
.nav__toggle span::after { transform: translateY(5px); }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: rotate(-45deg); }
.nav__progress {
  position: absolute;
  left: 18px; right: 18px; bottom: -1px;
  height: 1px;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, rgba(160, 139, 255, 0), var(--veil) 30%, var(--veil-hi));
  box-shadow: 0 0 10px rgba(160, 139, 255, 0.8);
}

/* 4. HERO ------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + 36px);
  padding-bottom: 56px;
  overflow: clip;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 88px 88px;
  background-position: center top;
  opacity: 0.45;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 70% at 70% 40%, #000 0%, transparent 75%);
}
.hero__bg::after {
  content: "";
  position: absolute;
  right: -10%; top: -20%;
  width: 70%; height: 110%;
  background: radial-gradient(closest-side, rgba(107, 79, 240, 0.28), transparent 75%);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.hero__copy { display: grid; gap: 26px; justify-items: start; }
.h1 {
  display: grid;
  gap: 18px;
  font-weight: 600;
}
.h1__kicker {
  font: 500 13px/1 var(--f-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.h1__kicker b { color: var(--veil); font-weight: 500; }
.h1__main {
  display: block;
  font-size: clamp(2.55rem, min(5.6vw, 9vh), 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
}
.h1__main span { display: block; text-wrap: balance; }
.hero__lede { max-width: 50ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  font: 500 11px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.formula span {
  padding: 8px 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--fg-2);
  background: rgba(255, 255, 255, 0.02);
}
.formula span.formula__out {
  border-color: rgba(160, 139, 255, 0.45);
  color: var(--veil-hi);
  background: var(--veil-wash);
}
.formula i { font-style: normal; color: var(--veil); font-size: 14px; }

.hero__art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
  --tx: 0; --ty: 0;
  --rw: clamp(300px, min(33vw, calc((100svh - 240px) * 0.69)), 420px);
}
.hero__geo {
  position: absolute;
  left: 50%; top: 50%;
  width: min(760px, 120%);
  aspect-ratio: 600 / 760;
  transform: translate(-50%, -50%) translate3d(calc(var(--tx) * 8px), calc(var(--ty) * 8px), 0);
  transition: transform 1.2s var(--ease);
  pointer-events: none;
  color: var(--fg);
}
.hero__geo svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.hero__geo .g-l { fill: none; stroke: currentColor; stroke-opacity: 0.08; stroke-width: 1; }
.hero__geo .g-l2 { fill: none; stroke: currentColor; stroke-opacity: 0.16; stroke-width: 1; }
.hero__geo .g-tick { fill: none; stroke: var(--veil); stroke-opacity: 0.35; stroke-width: 6; stroke-dasharray: 1 12.72; }
.hero__geo .g-dash { fill: none; stroke: var(--veil); stroke-opacity: 0.35; stroke-dasharray: 3 7; }
.hero__geo .g-plate-top { fill: rgba(28, 23, 52, 0.55); stroke: rgba(255, 255, 255, 0.2); }
.hero__geo .g-plate-side { fill: rgba(12, 10, 24, 0.9); stroke: rgba(255, 255, 255, 0.16); }
.hero__geo .g-lbl { font: 500 10px var(--f-mono); letter-spacing: 2px; fill: var(--veil); fill-opacity: 0.8; }
.hero__geo .g-dot { fill: var(--veil-hi); }
.hero__geo .g-spin { transform-origin: 50% 46.05%; animation: spin 90s linear infinite; will-change: transform; }
.hero__geo .g-spin--rev { animation-duration: 140s; animation-direction: reverse; }

.hero__figure {
  position: relative;
  z-index: 2;
  width: var(--rw);
  animation: float 9s ease-in-out infinite;
}
.float {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: rgba(12, 10, 24, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9);
  font: 500 10.5px/1.2 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  transform: translate3d(calc(var(--tx) * var(--z) * 1px), calc(var(--ty) * var(--z) * 1px), 0);
  transition: transform 1s var(--ease);
  pointer-events: none;
}
.float b { color: var(--fg); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; }
.float { white-space: nowrap; }
.float--a { --z: 22; right: calc(50% + var(--rw) / 2 - 22px); top: 14%; }
.float--a b { display: flex; align-items: center; gap: 8px; }
.float--a b::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--exposed); box-shadow: 0 0 10px var(--exposed); }
.float--b { --z: 30; left: calc(50% + var(--rw) / 2 - 30px); top: 49%; }
.float--c { --z: 16; right: calc(50% + var(--rw) / 2 - 40px); bottom: 12%; }
.lvls { display: flex; gap: 4px; }
.lvls i {
  width: 14px; height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(160, 139, 255, 0.4);
}
.lvls i:nth-child(1) { background: rgba(207, 201, 230, 0.12); }
.lvls i:nth-child(2) { background: rgba(160, 139, 255, 0.22); }
.lvls i:nth-child(3) { background: rgba(107, 79, 240, 0.4); }
.lvls i:nth-child(4) { background: linear-gradient(135deg, #2a2933, #050409); border-color: rgba(220, 215, 238, 0.45); }
.lvls i:nth-child(5) { background: conic-gradient(from 0deg, #a08bff, #7ee2c8, #ddd3ff, #a08bff); border-color: transparent; box-shadow: 0 0 10px rgba(160, 139, 255, 0.6); }

/* 5. RECORD COMPONENT ------------------------------------------------- */
.record {
  position: relative;
  width: 100%;
  container-type: inline-size;
  -webkit-user-select: none;
  user-select: none;
}
.record__stage {
  position: relative;
  transform: perspective(1600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.9s var(--ease);
}
.is-tracking .record__stage { transition-duration: 0.25s; }

.record__sheet,
.record__folder {
  position: absolute;
  inset: 0;
  border-radius: var(--rr);
  background: var(--sheet);
  border: 1px solid var(--r-line);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.95);
  display: none;
}
.record__sheet--1 { transform: translate(2.6cqi, -2.4cqi) rotate(2.2deg); }
.record__sheet--2 { transform: translate(5cqi, -4.4cqi) rotate(4.4deg); opacity: 0.7; }
.record__sheet--3 { transform: translate(-3cqi, 2.6cqi) rotate(-2.6deg); opacity: 0.55; }
.record__folder {
  inset: 3cqi -5cqi -2cqi 5cqi;
  transform: rotate(5.5deg);
  background: linear-gradient(170deg, #1d1838, #100d22 70%);
  border-color: rgba(160, 139, 255, 0.22);
}
.record__folder span {
  position: absolute;
  top: -5.4cqi;
  right: 9cqi;
  height: 5.6cqi;
  padding: 0 4cqi;
  display: flex;
  align-items: center;
  border: 1px solid rgba(160, 139, 255, 0.22);
  border-bottom: 0;
  border-radius: 1.8cqi 1.8cqi 0 0;
  background: #1c1737;
  font: 500 max(8px, 2cqi)/1 var(--f-mono);
  letter-spacing: 0.18em;
  color: var(--veil);
  white-space: nowrap;
}
.record--folder .record__folder { display: block; }

.record__doc {
  position: relative;
  aspect-ratio: 5 / 7;
  display: flex;
  flex-direction: column;
  border-radius: var(--rr);
  overflow: clip;
  isolation: isolate;
  background: var(--r-bg);
  color: var(--r-ink);
  box-shadow:
    inset 0 0 0 1px var(--r-line),
    0 60px 120px -50px rgba(0, 0, 0, 0.95),
    0 0 90px -30px var(--r-glow, transparent);
}
.record__doc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  opacity: var(--noise-o, 0.04);
  pointer-events: none;
}
.r-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}
.r-pattern {
  z-index: -2;
  background: var(--r-pattern, none);
  opacity: var(--r-pattern-o, 1);
}
.r-smoke { z-index: -2; display: none; }
.r-watermark {
  z-index: -1;
  display: grid;
  place-items: center;
  color: var(--r-accent);
  opacity: var(--wm-o, 0.5);
  transform: translate3d(calc(var(--tx, 0) * -1.6cqi), calc(var(--ty, 0) * -1.6cqi), 0);
  transition: transform 1s var(--ease);
}
.r-watermark svg { width: 122%; max-width: none; height: auto; margin-top: 18%; overflow: visible; }
.r-frame {
  z-index: 0;
  inset: 2.6cqi;
  border: 1px solid var(--r-frame, transparent);
  border-radius: calc(var(--rr) - 1.8cqi);
}
.r-frame i {
  position: absolute;
  width: 4.2cqi; height: 4.2cqi;
  border: 0 solid var(--r-accent);
  opacity: var(--corner-o, 0);
}
.r-frame i:nth-child(1) { left: -1px; top: -1px; border-left-width: 1.5px; border-top-width: 1.5px; }
.r-frame i:nth-child(2) { right: -1px; top: -1px; border-right-width: 1.5px; border-top-width: 1.5px; }
.r-frame i:nth-child(3) { left: -1px; bottom: -1px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.r-frame i:nth-child(4) { right: -1px; bottom: -1px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.r-ticks { display: none; z-index: 0; }
.r-micro { display: none; z-index: 0; }
.r-gloss, .r-holo, .r-edge { display: none; }
.r-sheen {
  z-index: 4;
  background: radial-gradient(70cqi circle at var(--mx, 50%) var(--my, 22%), rgba(255, 255, 255, var(--sheen-o, 0.06)), transparent 62%);
}

.r-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3.1cqi;
  padding: 7.2cqi 7.6cqi 6.8cqi;
}
.r-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3cqi;
}
.r-brand {
  display: flex;
  align-items: center;
  gap: 2.2cqi;
  font: 600 max(13px, 4.7cqi)/1 var(--f-sans);
  letter-spacing: -0.02em;
}
.r-brand img { width: max(22px, 7.6cqi); height: auto; }
.r-meta {
  display: grid;
  gap: 0.6cqi;
  text-align: right;
  font: 500 max(8px, 2.05cqi)/1.3 var(--f-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--r-dim);
}
.r-meta b { color: var(--r-accent); font-weight: 500; }
.r-rule {
  display: flex;
  align-items: center;
  gap: 2.4cqi;
  font: 500 max(8px, 1.95cqi)/1 var(--f-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--r-dim);
  white-space: nowrap;
}
.r-rule::before,
.r-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--r-line);
}
.r-title { display: grid; gap: 1.4cqi; }
.r-label {
  font: 500 max(9px, 2.3cqi)/1 var(--f-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--r-accent);
}
.r-name {
  font: 600 max(30px, 11.4cqi)/0.92 var(--f-sans);
  letter-spacing: -0.045em;
  color: var(--r-ink);
  white-space: nowrap;
}
.r-class {
  font: 500 max(9px, 2.2cqi)/1 var(--f-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--r-dim);
}
.r-cipher {
  overflow: hidden;
  white-space: nowrap;
  font: 400 max(8px, 2cqi)/1 var(--f-mono);
  letter-spacing: 0.14em;
  color: var(--r-cipher);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.r-cipher span,
.redact__c {
  display: inline-block;
  animation: marquee 40s linear infinite;
  will-change: transform;
}
.r-extra { display: none; gap: 1.3cqi; }
.r-extra i {
  display: block;
  height: max(5px, 1.5cqi);
  border-radius: 0.5cqi;
  background: var(--r-redact);
  box-shadow: inset 0 0 0 1px var(--r-redact-line);
}
.r-extra i:nth-child(1) { width: 100%; }
.r-extra i:nth-child(2) { width: 78%; }
.r-extra i:nth-child(3) { width: 90%; }

.r-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.2cqi 4.4cqi;
}
.r-fields > div {
  position: relative;
  display: grid;
  align-content: start;
  gap: 1.2cqi;
  padding-top: 2.2cqi;
  border-top: 1px solid var(--r-line);
  transition: background-color 0.3s, box-shadow 0.3s;
}
.r-fields dt {
  font: 500 max(8.5px, 2.05cqi)/1.2 var(--f-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--r-dim);
}
.r-fields dd {
  font: 500 max(11.5px, 3.3cqi)/1.25 var(--f-sans);
  letter-spacing: -0.01em;
  color: var(--r-ink);
}
.redact {
  position: relative;
  display: block;
  height: max(15px, 4.6cqi);
  border-radius: 0.9cqi;
  overflow: hidden;
  background: var(--r-redact);
  box-shadow: inset 0 0 0 1px var(--r-redact-line), var(--redact-layer, 0 0 0 0 transparent);
}
.redact__c {
  position: absolute;
  left: 0; top: 50%;
  margin-top: max(-4px, -1cqi);
  padding-left: 1.6cqi;
  white-space: nowrap;
  font: 400 max(8px, 2cqi)/1 var(--f-mono);
  letter-spacing: 0.14em;
  color: var(--r-cipher);
  animation-duration: 22s;
}
.r-note {
  display: block;
  margin-top: 1.2cqi;
  font: 500 max(8px, 1.9cqi)/1 var(--f-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--r-dim);
}
.r-foot {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 3cqi;
}
.r-foot__l { display: grid; gap: 2.4cqi; justify-items: start; }
.r-action {
  font: 500 max(9px, 2.3cqi)/1 var(--f-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--r-accent);
  white-space: nowrap;
}
a.r-action { pointer-events: auto; border-radius: 4px; transition: color 0.25s; }
a.r-action:hover { color: var(--veil-hi); text-decoration: underline; text-underline-offset: 4px; }
.t-skin:not([data-tier="0"]) .r-action { display: none; }
.r-stamp {
  padding: 1.5cqi 2.2cqi;
  border: 1px solid currentColor;
  border-radius: 0.9cqi;
  font: 500 max(8.5px, 2.05cqi)/1 var(--f-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--exposed-hi);
  white-space: nowrap;
}
.r-barcode {
  width: 30cqi;
  height: 3.4cqi;
  opacity: 0.45;
  background:
    repeating-linear-gradient(90deg,
      var(--r-dim) 0 1px, transparent 1px 3px,
      var(--r-dim) 3px 5px, transparent 5px 6px,
      var(--r-dim) 6px 7px, transparent 7px 10px,
      var(--r-dim) 10px 13px, transparent 13px 14px);
}
.r-seal {
  width: 27cqi;
  aspect-ratio: 1;
  color: var(--r-accent);
}
.r-seal svg { width: 100%; height: 100%; overflow: visible; }

/* Annotation pins (anatomy section) */
.record[data-annotate] .r-fields > div,
.record[data-annotate] .r-head { padding-left: max(24px, 5.6cqi); }
.record[data-annotate] [data-pin]::after {
  content: attr(data-pin);
  position: absolute;
  z-index: 5;
  left: 0;
  top: 1.9cqi;
  width: max(18px, 4cqi);
  height: max(18px, 4cqi);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--veil);
  color: var(--ink);
  font: 600 max(8.5px, 1.9cqi)/1 var(--f-mono);
  letter-spacing: 0;
  box-shadow: 0 0 0 max(3px, 0.8cqi) rgba(160, 139, 255, 0.2);
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.record[data-annotate] .r-head { position: relative; }
.record[data-annotate] .r-head::after { left: 0; top: 0; }
.record[data-annotate] .r-seal { position: relative; }
.record[data-annotate] .r-seal::after { left: auto; right: -1cqi; top: -1cqi; }
.record[data-annotate] [data-pin].is-hl::after {
  transform: scale(1.25);
  box-shadow: 0 0 0 max(5px, 1.4cqi) rgba(160, 139, 255, 0.3), 0 0 24px var(--veil);
}
.record[data-annotate] .r-fields > .is-hl {
  background: rgba(160, 139, 255, 0.08);
  box-shadow: 0 0 0 1.4cqi rgba(160, 139, 255, 0.08);
}

/* Seal SVG parts */
.seal .s-line { fill: none; stroke: currentColor; stroke-width: 1.2; }
.seal .s-thin { stroke-width: 0.7; }
.seal .s-faint { opacity: 0.4; }
.seal .s-dash { stroke-dasharray: 2 5; }
.seal .s-dot2 { stroke-dasharray: 1 5; stroke-width: 2.2; stroke-linecap: round; }
.seal .s-tick { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.7; }
.seal .s-text { font: 500 8.4px var(--f-mono); letter-spacing: 0.6px; fill: currentColor; opacity: 0.92; }
.seal .s-num { font: 600 30px var(--f-sans); fill: currentColor; text-anchor: middle; letter-spacing: -1px; }
.seal .s-small { font: 500 8px var(--f-mono); fill: currentColor; text-anchor: middle; letter-spacing: 2.4px; opacity: 0.8; }
.seal .s-fill { fill: currentColor; fill-opacity: 0.08; stroke: none; }
.seal .s-solid { fill: currentColor; stroke: none; }
.seal .s-occ { fill: var(--seal-occ, #08070e); stroke: none; }
.seal .s-spin { transform-origin: 100px 100px; animation: spin 50s linear infinite; }
.seal .s-spin-rev { transform-origin: 100px 100px; animation: spin 70s linear infinite reverse; }
.seal .s-spin-fast { transform-origin: 100px 100px; animation: spin 18s linear infinite; }
.seal .s-pulse { transform-origin: 100px 100px; animation: corePulse 3.2s ease-in-out infinite; }
.seal .f1 { fill: #2c2b36; }
.seal .f2 { fill: #121118; }
.seal .f3 { fill: #3b3a48; }
.seal .f4 { fill: #1b1a22; }

/* Watermark geometry (record backgrounds, final CTA) */
.w { fill: none; stroke: currentColor; stroke-width: 0.5; }
.w-d { stroke-dasharray: 2 3; }
.w-f { stroke-opacity: 0.5; }
/* Rotating whole SVG elements keeps the motion on the compositor */
.t-skin[data-tier="5"] .r-watermark svg,
.final__bg svg { animation: spin 160s linear infinite; will-change: transform; }

/* 6. RECORD SKINS (tiers) --------------------------------------------- */
.t-skin {
  --rr: 3.6cqi;
  --r-ink: #f4f1ff;
  --r-dim: rgba(244, 241, 255, 0.56);
  --r-line: rgba(255, 255, 255, 0.1);
  --r-accent: #a08bff;
  --r-redact: #030208;
  --r-redact-line: rgba(160, 139, 255, 0.22);
  --r-cipher: rgba(160, 139, 255, 0.55);
  --r-bg: linear-gradient(160deg, #16132b, #0c0a18 60%);
  --sheet: #110f22;
  --wm-o: 0.5;
}

/* 00 · Concept preview (master file, unassigned) */
.t-skin[data-tier="0"] {
  --r-bg:
    radial-gradient(120% 70% at 85% 0%, rgba(107, 79, 240, 0.3), transparent 55%),
    linear-gradient(165deg, #1a1634 0%, #0e0c1e 55%, #0a0919 100%);
  --r-pattern: var(--guil) 0 0 / 34cqi auto;
  --r-pattern-o: 0.55;
  --r-frame: rgba(160, 139, 255, 0.2);
  --corner-o: 0.9;
  --sheet: #15122b;
  --wm-o: 0.22;
  --r-glow: rgba(107, 79, 240, 0.55);
}
.t-skin[data-tier="0"] .record__sheet--1,
.t-skin[data-tier="0"] .record__sheet--2 { display: block; }

/* 01 · SEALED: matte graphite, restrained */
.t-skin[data-tier="1"] {
  --r-bg: linear-gradient(172deg, #1b1a23 0%, #131219 62%, #0f0e14 100%);
  --r-accent: #d3cde8;
  --r-dim: rgba(240, 238, 248, 0.52);
  --r-line: rgba(255, 255, 255, 0.09);
  --r-cipher: rgba(211, 205, 232, 0.3);
  --r-redact: #07060b;
  --r-redact-line: rgba(255, 255, 255, 0.09);
  --sheet: #16151c;
  --wm-o: 0;
  --noise-o: 0.06;
}
.t-skin[data-tier="1"] .record__sheet--1 { display: block; }
.t-skin[data-tier="1"] .r-cipher span,
.t-skin[data-tier="1"] .redact__c { animation: none; }

/* 02 · CIPHER: guilloche, double rule, live ciphertext */
.t-skin[data-tier="2"] {
  --r-bg:
    radial-gradient(90% 60% at 0% 0%, rgba(160, 139, 255, 0.18), transparent 60%),
    linear-gradient(160deg, #18143c 0%, #0f0c27 60%, #0a0919 100%);
  --r-accent: #b3a2ff;
  --r-pattern: var(--guil) 0 0 / 26cqi auto;
  --r-pattern-o: 1;
  --r-frame: rgba(160, 139, 255, 0.32);
  --corner-o: 1;
  --sheet: #141036;
  --wm-o: 0.32;
  --r-glow: rgba(107, 79, 240, 0.35);
}
.t-skin[data-tier="2"] .record__sheet--1,
.t-skin[data-tier="2"] .record__sheet--2 { display: block; }
.t-skin[data-tier="2"] .r-frame { box-shadow: inset 0 0 0 1.2cqi transparent, inset 0 0 0 calc(1.2cqi + 1px) rgba(160, 139, 255, 0.16); }
.t-skin[data-tier="2"] .r-fields dd { font-family: var(--f-mono); font-size: max(10.5px, 2.85cqi); letter-spacing: 0.02em; }

/* 03 · SHADOW: smoked black, layered redactions, drifting hatch */
.t-skin[data-tier="3"] {
  --r-bg: linear-gradient(170deg, #0c0a16 0%, #060509 70%, #040307 100%);
  --r-accent: #9c88ff;
  --r-ink: #ebe6ff;
  --r-dim: rgba(235, 230, 255, 0.5);
  --r-line: rgba(156, 136, 255, 0.14);
  --r-redact: #000;
  --r-redact-line: rgba(156, 136, 255, 0.3);
  --redact-layer: 0.9cqi 0.9cqi 0 0 rgba(107, 79, 240, 0.28), 1.8cqi 1.8cqi 0 0 rgba(107, 79, 240, 0.12);
  --r-frame: rgba(156, 136, 255, 0.2);
  --corner-o: 0.8;
  --sheet: #0a0813;
  --wm-o: 0.35;
  --noise-o: 0.07;
  --seal-occ: #07060c;
  --r-glow: rgba(70, 40, 170, 0.6);
}
.t-skin[data-tier="3"] .record__sheet--1,
.t-skin[data-tier="3"] .record__sheet--2 { display: block; }
.t-skin[data-tier="3"] .r-pattern {
  inset: -20%;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 9px);
  animation: hatch 7s linear infinite;
}
.t-skin[data-tier="3"] .r-smoke {
  display: block;
  inset: -25%;
  background:
    radial-gradient(35% 30% at 70% 30%, rgba(107, 79, 240, 0.32), transparent 70%),
    radial-gradient(40% 32% at 25% 75%, rgba(60, 38, 150, 0.35), transparent 70%);
  animation: smoke 16s ease-in-out infinite alternate;
}
.t-skin[data-tier="3"] .r-extra { display: grid; }
.t-skin[data-tier="3"] .record__doc { box-shadow: inset 0 0 0 1px var(--r-line), inset 0 0 18cqi rgba(0, 0, 0, 0.7), 0 60px 120px -50px #000, 0 0 90px -30px var(--r-glow); }

/* 04 · OBSIDIAN: polished black glass, faceted seal, technical marks */
.t-skin[data-tier="4"] {
  --r-bg: linear-gradient(152deg, #22212b 0%, #0a090e 34%, #040306 60%, #14131a 100%);
  --r-accent: #e1dcf2;
  --r-ink: #f8f7fc;
  --r-dim: rgba(230, 228, 240, 0.5);
  --r-line: rgba(225, 220, 242, 0.13);
  --r-redact: #000;
  --r-redact-line: rgba(225, 220, 242, 0.22);
  --r-cipher: rgba(225, 220, 242, 0.42);
  --r-pattern:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px) 0 0 / 4.4cqi 4.4cqi,
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px) 0 0 / 4.4cqi 4.4cqi;
  --r-frame: rgba(225, 220, 242, 0.28);
  --corner-o: 1;
  --sheet: #0e0d12;
  --wm-o: 0.28;
  --sheen-o: 0.14;
  --r-glow: rgba(160, 150, 210, 0.3);
}
.t-skin[data-tier="4"] .record__sheet { display: block; }
.t-skin[data-tier="4"] .record__doc {
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.2),
    inset -1px -1px 0 rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(225, 220, 242, 0.12),
    0 60px 120px -50px #000,
    0 0 80px -30px var(--r-glow);
}
.t-skin[data-tier="4"] .r-ticks {
  display: block;
  inset: auto;
  left: 1cqi; top: 14%; bottom: 14%;
  width: 1.4cqi;
  background: repeating-linear-gradient(180deg, var(--r-line) 0 1px, transparent 1px 1.6cqi);
  border-radius: 0;
}
.t-skin[data-tier="4"] .r-ticks::after {
  content: "";
  position: absolute;
  left: calc(100cqi - 3.4cqi);
  top: 0; bottom: 0;
  width: 1.4cqi;
  background: inherit;
}
.t-skin[data-tier="4"] .r-gloss {
  display: block;
  z-index: 3;
  inset: -10% -60%;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, 0.075) 46%, rgba(255, 255, 255, 0.02) 50%, transparent 56%);
  animation: gloss 9s var(--ease-io) infinite;
}
.t-skin[data-tier="4"] .r-name {
  background: linear-gradient(180deg, #ffffff 20%, #b9b5c9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.t-skin[data-tier="4"] .r-extra { display: grid; }

/* 05 · ZERO: absolute black, iridescent edge, lattice, microtext */
.t-skin[data-tier="5"] {
  --r-bg:
    radial-gradient(80% 50% at 50% 42%, rgba(107, 79, 240, 0.24), transparent 70%),
    radial-gradient(70% 40% at 50% 104%, rgba(126, 226, 200, 0.12), transparent 70%),
    #030207;
  --r-accent: #cfc3ff;
  --r-ink: #fcfbff;
  --r-dim: rgba(240, 236, 255, 0.55);
  --r-line: rgba(207, 195, 255, 0.14);
  --r-redact: #000;
  --r-redact-line: rgba(126, 226, 200, 0.3);
  --r-cipher: rgba(126, 226, 200, 0.62);
  --r-pattern: radial-gradient(circle, rgba(160, 139, 255, 0.24) 0.9px, transparent 1.3px) 0 0 / 3.4cqi 3.4cqi;
  --r-pattern-o: 0.8;
  --r-frame: rgba(207, 195, 255, 0.16);
  --corner-o: 1;
  --sheet: #08070f;
  --wm-o: 0.24;
  --sheen-o: 0.1;
  --seal-occ: #030207;
  --r-glow: rgba(126, 100, 255, 0.75);
}
.t-skin[data-tier="5"] .record__sheet { display: block; }
.t-skin[data-tier="5"] .record__sheet--1 { border-color: rgba(126, 226, 200, 0.2); }
.t-skin[data-tier="5"] .r-pattern {
  -webkit-mask-image: radial-gradient(70% 55% at 50% 45%, #000, transparent 80%);
  mask-image: radial-gradient(70% 55% at 50% 45%, #000, transparent 80%);
}
.t-skin[data-tier="5"] .r-name {
  background: linear-gradient(100deg, #ffffff 0%, #d9cfff 35%, #8ee8d2 65%, #c4b5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.t-skin[data-tier="5"] .r-edge {
  display: block;
  z-index: 5;
  padding: 1.5px;
  background: conic-gradient(from var(--ang), #a08bff, #7ee2c8, #ddd3ff, #6b4ff0, #a08bff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: angle 7s linear infinite;
}
.t-skin[data-tier="5"] .r-holo {
  display: block;
  z-index: 3;
  background: conic-gradient(from 210deg at var(--mx, 50%) var(--my, 22%), transparent 0deg, rgba(126, 226, 200, 0.12) 50deg, transparent 110deg, rgba(160, 139, 255, 0.16) 200deg, transparent 280deg);
  mix-blend-mode: color-dodge;
  opacity: 0.8;
}
.t-skin[data-tier="5"] .r-micro { display: block; }
.r-micro span {
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  font: 500 max(4px, 1.25cqi)/1 var(--f-mono);
  letter-spacing: 0.3em;
  color: rgba(207, 195, 255, 0.5);
}
.r-micro span:nth-child(1) { top: 0.9cqi; left: 7cqi; right: 7cqi; }
.r-micro span:nth-child(2) { bottom: 0.9cqi; left: 7cqi; right: 7cqi; color: rgba(126, 226, 200, 0.45); }
.r-micro span:nth-child(3),
.r-micro span:nth-child(4) { top: 7cqi; bottom: 7cqi; writing-mode: vertical-rl; }
.r-micro span:nth-child(3) { left: 0.8cqi; transform: rotate(180deg); }
.r-micro span:nth-child(4) { right: 0.8cqi; }
.t-skin[data-tier="5"] .r-extra { display: grid; }
.t-skin[data-tier="5"] .r-extra i { box-shadow: inset 0 0 0 1px var(--r-redact-line), 0.8cqi 0.8cqi 0 0 rgba(126, 226, 200, 0.08); }

/* 7. ANATOMY / HOW IT WORKS / TIERS ---------------------------------- */
.anatomy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}
.anatomy__figure { position: relative; padding: 4% 6% 4% 8%; }
.anatomy__list { display: grid; gap: 12px; }
.callout {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 4px 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(12, 10, 24, 0.55);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.3s var(--ease);
  cursor: default;
}
.callout:hover,
.callout.is-hl,
.callout:focus-visible {
  border-color: rgba(160, 139, 255, 0.45);
  background: rgba(160, 139, 255, 0.07);
}
.callout__n {
  grid-row: span 2;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(160, 139, 255, 0.45);
  font: 500 10.5px/1 var(--f-mono);
  color: var(--veil-hi);
}
.callout h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.callout p { font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.anatomy__note {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 48px);
}

/* Equation */
.equation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.08fr);
  align-items: stretch;
  gap: 14px;
}
.eq {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 26px 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: linear-gradient(180deg, rgba(28, 23, 52, 0.45), rgba(12, 10, 24, 0.45));
  overflow: hidden;
}
.eq--out {
  border-color: rgba(160, 139, 255, 0.4);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(107, 79, 240, 0.25), transparent 70%),
    linear-gradient(180deg, rgba(28, 23, 52, 0.6), rgba(12, 10, 24, 0.6));
}
.eq .iso { width: 100%; max-width: 230px; height: auto; margin: 0 auto 10px; }
.eq__k { font: 500 11px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--veil); }
.eq p { color: var(--fg-2); font-size: 15px; }
.eq__op {
  align-self: center;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  font: 300 24px/1 var(--f-sans);
  color: var(--veil-hi);
  background: var(--ink-2);
}
.iso-s { fill: #0c0a18; stroke: rgba(255, 255, 255, 0.38); stroke-width: 1; stroke-linejoin: round; }
.iso-r { fill: #110e22; }
.iso-p { fill: rgba(28, 23, 52, 0.6); stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.iso-t { fill: rgba(160, 139, 255, 0.55); stroke: var(--veil-hi); stroke-width: 1; }
.iso-g { fill: #131026; stroke: rgba(255, 255, 255, 0.38); stroke-width: 1; }
.iso-ring { fill: none; stroke: var(--veil); stroke-opacity: 0.6; stroke-dasharray: 3 5; }
.eq__note { margin-top: 20px; text-align: center; }

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-top: clamp(64px, 8vw, 104px);
  padding-top: 36px;
}
.steps::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--veil), var(--line-2) 40%, var(--line) 100%);
}
.step { position: relative; display: grid; gap: 12px; align-content: start; }
.step::before {
  content: "";
  position: absolute;
  top: -41px; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--veil);
  box-shadow: 0 0 12px rgba(160, 139, 255, 0.6);
}
.step__n { font: 500 12px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--veil); }
.step__ico { width: 40px; height: 40px; color: var(--veil-hi); }
.step__ico * { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.step p { color: var(--fg-2); font-size: 15px; }

/* Classification overview */
.tiers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: clamp(12px, 1.6vw, 22px);
}
.tier {
  display: grid;
  gap: 16px;
  align-content: end;
}
.tier__link {
  display: block;
  border-radius: 16px;
  transition: transform 0.5s var(--ease);
}
.tier__link:hover { transform: translateY(-8px); }
.tier:nth-child(1) .mini { width: 80%; }
.tier:nth-child(2) .mini { width: 85%; }
.tier:nth-child(3) .mini { width: 90%; }
.tier:nth-child(4) .mini { width: 95%; }
.tier:nth-child(5) .mini { width: 100%; }
.tier__meta { display: grid; gap: 6px; }
.tier__n { font: 500 11px/1 var(--f-mono); letter-spacing: 0.16em; color: var(--veil); }
.tier__meta h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.03em; }
.tier__meta p { font-size: 14px; color: var(--fg-2); line-height: 1.5; }
.tier__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font: 500 11px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  transition: color 0.25s;
}
.tier__link:hover + .tier__meta .tier__go,
.tier__go:hover { color: var(--veil-hi); }
.tiers__axis {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  font: 500 11px/1 var(--f-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.tiers__axis i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), var(--veil));
  position: relative;
}
.tiers__axis i::after {
  content: "";
  position: absolute;
  right: -1px; top: -3px;
  border: 3.5px solid transparent;
  border-left: 6px solid var(--veil);
}
.disclaimer {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 40px;
  padding: 18px 20px;
  border: 1px dashed var(--line-2);
  border-radius: 14px;
  color: var(--fg-3);
  font-size: 14px;
  line-height: 1.55;
}
.disclaimer svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--veil); }

/* Mini record (overview cards) */
.mini {
  container-type: inline-size;
  margin-inline: auto;
}
.mini__doc {
  position: relative;
  aspect-ratio: 5 / 7;
  border-radius: 6cqi;
  overflow: clip;
  isolation: isolate;
  background: var(--r-bg);
  color: var(--r-ink);
  box-shadow: inset 0 0 0 1px var(--r-line), 0 40px 70px -40px #000, 0 0 60px -26px var(--r-glow, transparent);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: 9cqi 9cqi 10cqi;
  gap: 4cqi;
}
.mini .r-frame { inset: 4cqi; border-radius: 3.6cqi; }
.mini .r-frame i { width: 7cqi; height: 7cqi; }
.mini__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 500 max(9px, 6cqi)/1 var(--f-mono);
  letter-spacing: 0.12em;
  color: var(--r-dim);
}
.mini__top img { width: 13cqi; height: auto; }
.mini__seal { align-self: center; justify-self: center; width: 64cqi; aspect-ratio: 1; color: var(--r-accent); }
.mini__seal svg { width: 100%; height: 100%; overflow: visible; }
.mini__name {
  font: 600 max(16px, 15cqi)/1 var(--f-sans);
  letter-spacing: -0.04em;
}
.t-skin[data-tier="4"] .mini__name,
.t-skin[data-tier="5"] .mini__name {
  background: linear-gradient(100deg, #fff, var(--r-accent) 60%, #8ee8d2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.t-skin[data-tier="4"] .mini__name { background: linear-gradient(180deg, #fff, #b9b5c9); -webkit-background-clip: text; background-clip: text; }
.mini__bars { display: grid; gap: 2.4cqi; }
.mini__bars i { height: 2.6cqi; border-radius: 1cqi; background: var(--r-redact); box-shadow: inset 0 0 0 1px var(--r-redact-line), var(--redact-layer, 0 0 0 0 transparent); }
.mini__bars i:nth-child(2) { width: 70%; }
.mini .r-watermark { opacity: calc(var(--wm-o, 0.5) * 1.7); }
.mini .r-watermark svg { width: 150%; margin-top: 0; }
.mini .r-edge { border-radius: 6cqi; }
.mini .r-gloss { border-radius: 6cqi; }

/* 8. GALLERY ---------------------------------------------------------- */
.tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  margin-bottom: clamp(36px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(12, 10, 24, 0.6);
}
.tab {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 14px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--fg-2);
  text-align: left;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.tab:hover { color: var(--fg); background: rgba(255, 255, 255, 0.03); }
.tab[aria-selected="true"] {
  color: var(--fg);
  background: linear-gradient(180deg, var(--ink-4), var(--ink-3));
  box-shadow: inset 0 0 0 1px rgba(160, 139, 255, 0.4), 0 10px 30px -14px rgba(107, 79, 240, 0.7);
}
.tab__sw {
  flex: none;
  width: 22px; height: 30px;
  border-radius: 4px;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.tab__t { display: grid; gap: 4px; }
.tab__n { font: 500 10.5px/1 var(--f-mono); letter-spacing: 0.16em; color: var(--veil); }
.tab__name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; }

.gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}
.viewer-wrap {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  --tx: 0; --ty: 0;
}
.viewer-wrap::before {
  content: "";
  position: absolute;
  inset: 4% -6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(107, 79, 240, 0.18), transparent 75%);
  pointer-events: none;
}
.viewer {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 420px;
  touch-action: pan-y;
}
.viewer__layer { grid-area: 1 / 1; }
.viewer__layer.is-hidden { visibility: hidden; }
.viewer__layer.is-hidden * { animation-play-state: paused !important; }
.viewer__layer.is-top { z-index: 2; }
.viewer__layer.is-entering { animation: wipe var(--wipe, 0.85s) var(--ease-io) both; }
.viewer__layer.is-leaving { transition: opacity 0.85s var(--ease); opacity: 0.35; }
.viewer__scan {
  position: absolute;
  z-index: 6;
  left: -8%; right: -8%;
  top: -4%; bottom: -4%;
  pointer-events: none;
  opacity: 0;
}
.viewer__scan::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--veil-hi) 20%, #fff 50%, var(--veil-hi) 80%, transparent);
  box-shadow: 0 0 22px 4px rgba(160, 139, 255, 0.7);
}
.viewer__scan::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: 2px;
  height: 60px;
  transform: translateY(-62px);
  background: linear-gradient(180deg, transparent, rgba(160, 139, 255, 0.1));
}
.viewer__scan.is-run { animation: scan var(--wipe, 0.85s) var(--ease-io) both; }

.ginfo { display: grid; gap: 22px; align-content: center; }
.ginfo__top { display: flex; align-items: flex-end; gap: 22px; }
.ginfo__num {
  font: 600 clamp(80px, 10vw, 136px)/0.8 var(--f-sans);
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(160, 139, 255, 0.55);
}
.ginfo__title { display: grid; gap: 10px; padding-bottom: 6px; }
.ginfo__title h3 {
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.3rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.95;
}
.ginfo__desc { color: var(--fg-2); font-size: 1.05rem; max-width: 46ch; min-height: 4.8em; }
.specs { display: grid; border-top: 1px solid var(--line); }
.specs div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.specs dt { font: 500 11px/1.6 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.specs dd { font-size: 15px; color: var(--fg); }
.meter { display: flex; align-items: center; gap: 14px; }
.meter__bars { display: flex; gap: 5px; }
.meter__bars i {
  width: 28px; height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  transition: background-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.meter__bars i.on { background: var(--veil); box-shadow: 0 0 10px rgba(160, 139, 255, 0.6); }
.ginfo__nav { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.3s, background-color 0.3s, transform 0.3s var(--ease);
}
.icon-btn:hover { border-color: rgba(160, 139, 255, 0.55); background: var(--veil-wash); }
.icon-btn svg { width: 18px; height: 18px; }
.ginfo__hint { margin-left: 6px; }

/* 9. PROGRESSION ------------------------------------------------------ */
.prog {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
}
.panel {
  display: grid;
  gap: 28px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: linear-gradient(180deg, rgba(19, 16, 38, 0.7), rgba(12, 10, 24, 0.7));
}
.ctrl { display: grid; gap: 14px; }
.ctrl__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ctrl__label { font: 500 11.5px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
.ctrl__val {
  font: 600 22px/1 var(--f-sans);
  letter-spacing: -0.03em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.range {
  --fill: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--veil-deep), var(--veil) var(--fill), rgba(255, 255, 255, 0.1) var(--fill));
}
.range::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--veil-deep), var(--veil) var(--fill), rgba(255, 255, 255, 0.1) var(--fill));
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 26px;
  margin-top: -11px;
  border-radius: 50%;
  border: 0;
  background: var(--fg);
  box-shadow: 0 0 0 6px rgba(160, 139, 255, 0.22), 0 6px 18px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.range::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 0;
  background: var(--fg);
  box-shadow: 0 0 0 6px rgba(160, 139, 255, 0.22), 0 6px 18px rgba(0, 0, 0, 0.6);
}
.range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 9px rgba(160, 139, 255, 0.28), 0 6px 18px rgba(0, 0, 0, 0.6); }
.range:active::-webkit-slider-thumb { transform: scale(1.08); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--veil-hi); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--veil-hi); }
.ticks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: -6px;
}
.ticks button {
  padding: 6px 0;
  border: 0;
  background: none;
  font: 500 10px/1.2 var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: center;
  transition: color 0.25s;
}
.ticks button:first-child { text-align: left; }
.ticks button:last-child { text-align: right; }
.ticks button:hover { color: var(--fg); }
.ticks button.on { color: var(--veil-hi); }
.map { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: stretch; }
.map__y,
.map__x { font: 500 9.5px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.map__y { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; }
.map__x { grid-column: 2; text-align: center; }
.map__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.map__grid span {
  aspect-ratio: 2.2;
  border-radius: 5px;
  background: var(--sw);
  opacity: 0.55;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: opacity 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
  cursor: pointer;
}
.map__grid span.same { opacity: 0.85; }
.map__grid span.on {
  opacity: 1;
  transform: scale(1.06);
  box-shadow: inset 0 0 0 1.5px var(--fg), 0 0 18px rgba(160, 139, 255, 0.6);
}
.panel__fine { font-size: 13px; color: var(--fg-3); line-height: 1.55; }
.preview { display: grid; justify-items: center; gap: 22px; }
.preview__label {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.preview__label .tag { font-size: 12px; padding: 9px 14px; }
.readout {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 12px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.readout b { color: var(--fg); font-weight: 500; }
.preview__explain { max-width: 44ch; text-align: center; color: var(--fg-2); font-size: 14.5px; }

/* 10. THE REVEAL ------------------------------------------------------ */
.reveal {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
}
.reveal__copy { display: grid; gap: 26px; align-content: center; }
.samples { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; }
.samples legend { padding: 0; margin-bottom: 12px; font: 500 11px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.samples__row { display: flex; flex-wrap: wrap; gap: 8px; }
.samples input { position: absolute; opacity: 0; pointer-events: none; }
.samples label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-2);
  cursor: pointer;
  transition: border-color 0.25s, background-color 0.25s, color 0.25s;
}
.samples label i { width: 9px; height: 12px; border-radius: 2px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.samples label:hover { color: var(--fg); border-color: var(--line-3); }
.samples input:checked + label { color: var(--fg); border-color: rgba(160, 139, 255, 0.6); background: var(--veil-wash); }
.samples input:focus-visible + label { outline: 2px solid var(--veil-hi); outline-offset: 2px; }
.reveal__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.rsteps { display: grid; gap: 2px; counter-reset: rs; }
.rsteps li {
  counter-increment: rs;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 14px;
  color: var(--fg-3);
  transition: color 0.4s var(--ease);
}
.rsteps li::before {
  content: counter(rs, decimal-leading-zero);
  font: 500 10.5px/1 var(--f-mono);
  letter-spacing: 0.1em;
  color: var(--fg-3);
  transition: color 0.4s;
}
.rsteps li.is-active { color: var(--fg); }
.rsteps li.is-active::before { color: var(--veil); }
.rsteps li.is-done { color: var(--fg-2); }
.rsteps li.is-done::before { content: "\2713"; color: var(--veil); }

.stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(560px, 64vw, 720px);
  padding: 76px clamp(20px, 4vw, 56px) 56px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(107, 79, 240, 0.1), transparent 70%),
    linear-gradient(180deg, rgba(12, 10, 24, 0.85), rgba(5, 4, 11, 0.9));
  overflow: hidden;
  isolation: isolate;
}
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
  mask-image: radial-gradient(closest-side, #000, transparent);
}
.stage::after {
  content: "";
  position: absolute;
  inset: 15%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(126, 100, 255, 0.5), transparent 75%);
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.stage.is-geo::after { opacity: 0.6; }
.stage.is-done::after { opacity: 0.85; }
.stage__label { position: absolute; left: 20px; top: 20px; z-index: 4; }
.stage__status {
  position: absolute;
  right: 22px; top: 27px;
  z-index: 4;
  font: 500 10.5px/1 var(--f-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}
.stage__status b { color: var(--veil-hi); font-weight: 500; }
.stage__foot {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  text-align: center;
  font: 500 10px/1.4 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-inline: 16px;
}
.stage__geo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
}
.stage__geo * {
  fill: none;
  stroke: var(--veil);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.55;
  transition: stroke-dashoffset 1.6s var(--ease-io);
}
.stage__geo .gl2 { stroke: var(--mint); opacity: 0.4; }
.stage__geo .gl3 { stroke: #fff; opacity: 0.18; }
.stage.is-geo .stage__geo * { stroke-dashoffset: 0; }
.stage.is-geo .stage__geo *:nth-child(2n) { transition-delay: 0.15s; }
.stage.is-geo .stage__geo *:nth-child(3n) { transition-delay: 0.3s; }
.stage__geo .spin { transform-origin: 50% 50%; transform-box: fill-box; animation: spin 60s linear infinite; }

.flipper {
  position: relative;
  width: min(360px, 76vw);
  perspective: 1800px;
  z-index: 2;
}
.flipper__in {
  display: grid;
  transform-style: preserve-3d;
  transition: transform 1.2s var(--ease-io);
}
.flip-face {
  grid-area: 1 / 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip-back { transform: rotateY(180deg); }
.stage.is-flip .flipper__in { transform: rotateY(180deg); }
.stage.is-start .flip-front .cover__doc { animation: appear 0.6s var(--ease) both; }
.stage.no-tr *,
.stage.no-tr *::before,
.stage.no-tr *::after { transition: none !important; }
.stage .flip-back .r-seal { transform: scale(0.6); opacity: 0; transition: transform 0.8s cubic-bezier(0.2, 1.4, 0.4, 1), opacity 0.4s; }
.stage.is-class .flip-back .r-seal { transform: none; opacity: 1; }
.stage.is-class .flip-back .r-seal svg { filter: drop-shadow(0 0 10px var(--r-accent)); animation: sealGlow 2.4s ease-out 1 both; }

.cover { container-type: inline-size; }
.cover__doc {
  position: relative;
  aspect-ratio: 5 / 7;
  border-radius: 3.6cqi;
  overflow: clip;
  isolation: isolate;
  background: var(--r-bg);
  color: var(--r-ink);
  box-shadow: inset 0 0 0 1px var(--r-line), 0 60px 120px -50px #000, 0 0 80px -30px rgba(107, 79, 240, 0.5);
  display: flex;
  flex-direction: column;
}
.cover__in {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4cqi;
  padding: 7.2cqi 7.6cqi 7cqi;
}
.cover__title { display: grid; gap: 1.6cqi; }
.cover__big {
  font: 600 max(34px, 14cqi)/0.9 var(--f-sans);
  letter-spacing: -0.05em;
}
.cover__cipher {
  margin: 0;
  font: 400 max(8px, 2.15cqi)/1.55 var(--f-mono);
  letter-spacing: 0.18em;
  color: rgba(160, 139, 255, 0.4);
  white-space: pre;
  overflow: hidden;
  transition: color 0.6s var(--ease), text-shadow 0.6s var(--ease);
}
.stage.is-cipher .cover__cipher { color: rgba(221, 211, 255, 0.85); text-shadow: 0 0 12px rgba(160, 139, 255, 0.7); }
.cover__lines { display: grid; gap: 2.6cqi; }
.cover__lines li {
  position: relative;
  font: 500 max(9px, 2.3cqi)/1.3 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--r-ink);
  padding: 0.6cqi 0;
}
.cover__lines li i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 100%);
  border-radius: 0.8cqi;
  background: #020106;
  box-shadow: inset 0 0 0 1px rgba(160, 139, 255, 0.3);
  transform-origin: 100% 50%;
  transition: transform 0.7s var(--ease-io);
}
.cover__lines li:nth-child(2) i { --w: 86%; transition-delay: 0.12s; }
.cover__lines li:nth-child(3) i { --w: 94%; transition-delay: 0.24s; }
.cover__lines li:nth-child(4) i { --w: 78%; transition-delay: 0.36s; }
.stage.is-lift .cover__lines li i { transform: scaleX(0); }
.cover__seal { margin-top: auto; align-self: flex-end; width: 26cqi; aspect-ratio: 1; color: var(--r-accent); }
.cover__seal svg { width: 100%; height: 100%; overflow: visible; }
.cover__tape {
  position: absolute;
  z-index: 3;
  left: -20%; right: -20%;
  top: 58%;
  padding: 1.6cqi 0;
  transform: rotate(-14deg);
  background: linear-gradient(90deg, rgba(160, 139, 255, 0.85), rgba(221, 211, 255, 0.95), rgba(160, 139, 255, 0.85));
  color: var(--ink);
  font: 600 max(8px, 2.2cqi)/1 var(--f-mono);
  letter-spacing: 0.3em;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8);
  transition: transform 0.9s var(--ease-io), opacity 0.6s var(--ease);
}
.cover__tape span { display: inline-block; animation: marquee 26s linear infinite; }
.stage.is-lift .cover__tape { transform: rotate(-14deg) translateX(120%); opacity: 0; }

/* 11. BEYOND THE FILE / YOUR VIEW ------------------------------------ */
.beyond {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: start;
  gap: clamp(36px, 6vw, 96px);
}
.statements { display: grid; border-top: 1px solid var(--line); }
.statements li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.35rem, 1rem + 1.4vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.12;
}
.statements li span { font: 500 11px/2.4 var(--f-mono); letter-spacing: 0.14em; color: var(--veil); }
.statements li:last-child { color: var(--fg-2); }
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 36px;
}
.pillar {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(12, 10, 24, 0.55);
}
.pillar svg { width: 30px; height: 30px; color: var(--veil); margin-bottom: 6px; }
.pillar svg * { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.pillar h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.pillar p { font-size: 14px; line-height: 1.5; color: var(--fg-2); }

.doc {
  position: relative;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line-2);
  border-radius: 22px;
  background:
    radial-gradient(80% 50% at 100% 0%, rgba(107, 79, 240, 0.18), transparent 70%),
    var(--guil) 0 0 / 140px auto,
    linear-gradient(170deg, #15122a, #0a0918);
  overflow: hidden;
  box-shadow: 0 60px 120px -60px #000;
}
.doc__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line-2);
}
.doc__brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.02em; }
.doc__brand img { width: 26px; }
.doc__meta { text-align: right; font: 500 10.5px/1.6 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.doc__meta b { color: var(--veil); font-weight: 500; }
.terms { display: grid; }
.terms div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--line-2);
}
.terms dt { font: 500 11px/1.4 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); }
.terms dd { display: grid; gap: 6px; }
.terms dd .redact { height: 16px; border-radius: 4px; background: #020106; box-shadow: inset 0 0 0 1px rgba(160, 139, 255, 0.25); }
.terms dd .redact__c { font-size: 9px; color: rgba(160, 139, 255, 0.5); padding-left: 8px; margin-top: -4.5px; }
.terms dd small { font: 500 10px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--exposed-hi); }
.doc__foot { margin-top: 18px; padding-right: 150px; font-size: 13px; color: var(--fg-3); line-height: 1.55; }
.stamp {
  position: absolute;
  right: 22px; bottom: 30px;
  padding: 10px 14px;
  border: 1.5px solid rgba(255, 181, 71, 0.7);
  border-radius: 8px;
  transform: rotate(-9deg);
  font: 600 12px/1 var(--f-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--exposed-hi);
  background: rgba(5, 4, 11, 0.6);
  box-shadow: 0 0 0 4px rgba(255, 181, 71, 0.08);
  pointer-events: none;
}
.verify {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 14px;
  color: var(--fg-2);
  background: rgba(12, 10, 24, 0.5);
}
.verify svg { width: 18px; height: 18px; flex: none; color: var(--mint); }
.verify a { color: var(--fg); text-decoration: underline; text-decoration-color: rgba(160, 139, 255, 0.6); text-underline-offset: 3px; }

.view {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 6vw, 96px);
}
.view__copy { display: grid; gap: 24px; }
.principles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.principles li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14.5px;
  color: var(--fg-2);
  background: rgba(12, 10, 24, 0.4);
}
.principles li::before {
  content: "";
  flex: none;
  width: 22px; height: 8px;
  border-radius: 2px;
  background: #020106;
  box-shadow: inset 0 0 0 1px rgba(160, 139, 255, 0.45);
}
.honest {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border-left: 2px solid var(--veil);
  border-radius: 0 14px 14px 0;
  background: linear-gradient(90deg, var(--veil-wash), transparent);
}
.honest strong { font-size: 15px; letter-spacing: -0.01em; }
.honest p { color: var(--fg-2); font-size: 14.5px; }

.ledger-wrap { display: grid; gap: 18px; justify-items: center; }
.toggle {
  display: inline-flex;
  padding: 5px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: rgba(12, 10, 24, 0.7);
}
.toggle button {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-3);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s;
}
.toggle button[aria-pressed="true"] { color: var(--fg); background: var(--ink-4); box-shadow: inset 0 0 0 1px rgba(160, 139, 255, 0.4); }
.toggle button[data-mode="public"][aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.5); }
.ledger {
  --acc: var(--veil);
  position: relative;
  width: min(100%, 470px);
  padding: 26px;
  border: 1px solid var(--line-2);
  border-radius: 22px;
  background:
    radial-gradient(70% 50% at 100% 0%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 70%),
    linear-gradient(170deg, #14112a, #08070f);
  box-shadow: 0 60px 120px -60px #000;
  transition: border-color 0.5s var(--ease);
}
.ledger[data-mode="public"] { --acc: var(--exposed); border-color: rgba(255, 181, 71, 0.3); }
.ledger__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
  font: 500 11px/1 var(--f-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.ledger__head .d { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 12px var(--acc); transition: background-color 0.5s; }
.ledger__head .t { margin-left: auto; color: var(--fg-3); }
.ledger__rows div {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  border-bottom: 1px solid var(--line);
}
.ledger__rows dt { font: 500 11px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.ledger__rows dd { position: relative; height: 22px; }
.lv-public,
.lv-sealed {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease-io);
}
.lv-public { gap: 8px; font-size: 14.5px; color: var(--exposed-hi); }
.lv-public::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--exposed); }
.lv-sealed .redact {
  width: var(--w, 100%);
  height: 20px;
  border-radius: 5px;
  background: #020106;
  box-shadow: inset 0 0 0 1px rgba(160, 139, 255, 0.35);
}
.lv-sealed .redact__c { font-size: 9.5px; color: rgba(160, 139, 255, 0.6); padding-left: 8px; margin-top: -5px; }
.lv-sealed { transform-origin: 0 50%; }
.ledger[data-mode="sealed"] .lv-public { opacity: 0; transform: translateX(8px); }
.ledger[data-mode="public"] .lv-sealed { opacity: 0; transform: scaleX(0.02); }
.ledger__rows div:nth-child(2) .lv-sealed { --w: 82%; transition-delay: 0.05s; }
.ledger__rows div:nth-child(3) .lv-sealed { --w: 64%; transition-delay: 0.1s; }
.ledger__rows div:nth-child(4) .lv-sealed { --w: 74%; transition-delay: 0.15s; }
.ledger__rows div:nth-child(5) .lv-sealed { --w: 90%; transition-delay: 0.2s; }
.ledger__foot { margin-top: 16px; font-size: 13.5px; color: var(--fg-2); min-height: 3em; }
.ledger__src { font-size: 12.5px; color: var(--fg-3); text-align: center; max-width: 46ch; }

/* 12. ABOUT VEIL / FAQ / FINAL CTA ----------------------------------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
.about__copy { display: grid; gap: 24px; position: sticky; top: 110px; }
.about__quote { font: 500 11px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(12, 10, 24, 0.55);
}
.flow li {
  display: grid;
  gap: 6px;
  padding: 12px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.02);
}
.flow li span { font: 500 9.5px/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.flow .pub span { color: var(--exposed-hi); }
.flow .pub { box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.22); }
.flow .sea span { color: var(--veil); }
.flow .sea { box-shadow: inset 0 0 0 1px rgba(160, 139, 255, 0.3); background: var(--veil-wash); }
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feature {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(19, 16, 38, 0.6), rgba(12, 10, 24, 0.4));
  transition: border-color 0.3s var(--ease), transform 0.4s var(--ease);
}
.feature:hover { border-color: rgba(160, 139, 255, 0.35); transform: translateY(-2px); }
.feature svg { width: 30px; height: 30px; color: var(--veil); margin-bottom: 8px; }
.feature svg * { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.feature h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; }
.feature p { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); }
.limits {
  margin-top: 12px;
  padding: 18px 20px;
  border: 1px dashed rgba(255, 181, 71, 0.35);
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
}
.limits strong { color: var(--exposed-hi); font-weight: 600; }
.links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.links a:hover { border-color: rgba(160, 139, 255, 0.55); background: var(--veil-wash); }
.links a span { display: grid; gap: 4px; }
.links a b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.links a small { font: 500 11px/1 var(--f-mono); letter-spacing: 0.06em; color: var(--fg-3); }
.links svg { width: 16px; height: 16px; color: var(--veil); flex: none; transition: transform 0.3s var(--ease); }
.links a:hover svg { transform: translate(2px, -2px); }

.faq { max-width: 900px; margin-inline: auto; border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; }
.faq summary:hover h3 { color: var(--veil-hi); }
.faq__i {
  position: relative;
  flex: none;
  width: 30px; height: 30px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  transition: transform 0.4s var(--ease), border-color 0.3s;
}
.faq__i::before,
.faq__i::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 11px; height: 1.5px;
  background: var(--fg);
  transform: translate(-50%, -50%);
}
.faq__i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.4s var(--ease); }
.faq details[open] .faq__i { border-color: var(--veil); transform: rotate(180deg); }
.faq details[open] .faq__i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a { padding: 0 52px 24px 4px; color: var(--fg-2); display: grid; gap: 10px; }
.faq__a a { color: var(--fg); text-decoration: underline; text-decoration-color: rgba(160, 139, 255, 0.6); text-underline-offset: 3px; }
.faq details[open] .faq__a { animation: faqIn 0.5s var(--ease); }

.final {
  position: relative;
  overflow: clip;
  text-align: center;
  padding-block: clamp(120px, 16vw, 200px);
}
.final__bg {
  position: absolute;
  left: 50%; top: 50%;
  width: min(900px, 140vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  color: var(--veil);
  opacity: 0.28;
  pointer-events: none;
}
.final__bg svg { width: 100%; height: 100%; }
.final__bg::after {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(107, 79, 240, 0.45), transparent);
}
.final .h2 { font-size: clamp(2.4rem, 1.2rem + 4.6vw, 5rem); max-width: 14ch; margin-inline: auto; }
.final__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }

/* 13. FOOTER ---------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  padding-block: 56px 40px;
  background: linear-gradient(180deg, transparent, rgba(12, 10, 24, 0.7));
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
}
.footer__brand { display: grid; gap: 16px; align-content: start; }
.footer__brand img { width: 92px; }
.footer__brand p { color: var(--fg-3); font-size: 14px; max-width: 36ch; }
.footer h2 { font: 500 11px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 16px; }
.footer ul { display: grid; gap: 10px; }
.footer ul a { color: var(--fg-2); font-size: 14.5px; transition: color 0.25s; }
.footer ul a:hover { color: var(--fg); }
.footer__legal {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--fg-3);
}

/* 14. MOTION ---------------------------------------------------------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes angle { to { --ang: 360deg; } }
@keyframes hatch { to { transform: translate3d(-12.728px, 0, 0); } }
@keyframes smoke { from { transform: translate3d(-4%, 3%, 0) scale(1); } to { transform: translate3d(5%, -4%, 0) scale(1.12); } }
@keyframes gloss { 0%, 55% { transform: translateX(-38%); } 100% { transform: translateX(38%); } }
@keyframes corePulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.5; } }
@keyframes wipe {
  from { clip-path: inset(-20% -20% 120% -20%); }
  to { clip-path: inset(-20% -20% -20% -20%); }
}
@keyframes appear { from { opacity: 0.3; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes scan {
  0% { opacity: 0; transform: translateY(0); }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translateY(100%); }
}
@keyframes sealGlow { 0% { filter: drop-shadow(0 0 0 transparent) brightness(2); } 100% { filter: drop-shadow(0 0 6px var(--r-accent)) brightness(1); } }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Pause work that is off screen (toggled by script.js) */
.is-off *,
.is-off *::before,
.is-off *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  .js .rv { opacity: 1; transform: none; }
  .hero__figure { animation: none; }
  .viewer__scan { display: none; }
}

/* RESPONSIVE ---------------------------------------------------------- */
@media (max-width: 1180px) {
  .nav__product { display: none; }
  .anatomy { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px) minmax(0, 1fr); gap: 24px; }
  .callout { padding: 14px; }
}

@media (min-width: 961px) and (max-width: 1180px) {
  .float--b, .float--c { display: none; }
}

@media (max-width: 1080px) {
  .nav__links a { padding: 9px 9px; font-size: 14px; }
  .anatomy { grid-template-columns: 1fr 1fr; }
  .anatomy__figure { grid-column: 1 / -1; order: -1; width: min(440px, 100%); margin-inline: auto; }
  .equation { grid-template-columns: 1fr; }
  .eq__op { justify-self: center; }
  .eq { grid-template-columns: 200px 1fr; grid-template-rows: auto auto 1fr; column-gap: 26px; align-items: center; }
  .eq .iso { grid-row: span 3; margin: 0; }
  .tiers { grid-template-columns: repeat(5, 200px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-bottom: 18px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: thin; }
  .tier { scroll-snap-align: start; }
  .about__copy { position: static; }
}

@media (max-width: 960px) {
  :root { --nav-h: 72px; }
  .nav__toggle { display: grid; }
  .nav__cta--bar { display: none; }
  .nav__menu {
    position: fixed;
    inset: 0;
    z-index: -2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    padding: 108px var(--gutter) 32px;
    background: rgba(5, 4, 11, 0.97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.35s var(--ease), transform 0.5s var(--ease), visibility 0s 0.5s;
    pointer-events: auto;
    overflow-y: auto;
  }
  .nav.is-open .nav__menu { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s var(--ease), transform 0.5s var(--ease); }
  .nav__menu > nav { margin-left: 0; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .nav__links li { border-bottom: 1px solid var(--line); }
  .nav__links a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 20px 4px;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.035em;
    color: var(--fg);
    border-radius: 0;
  }
  .nav__links a[aria-current="true"]::after { display: none; }
  .nav__links .n { display: inline; font: 500 11px/1 var(--f-mono); letter-spacing: 0.14em; color: var(--veil); }
  .nav__menu-foot { display: grid; gap: 12px; }
  .nav__menu-foot .btn { width: 100%; }
  .nav__menu-foot p { text-align: center; }
  .nav__bar { gap: 12px; }

  .hero { min-height: 0; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 72px; }
  .hero__grid { grid-template-columns: 1fr; gap: 56px; }
  .hero__art { min-height: 0; padding: 40px 0 64px; --rw: min(380px, 78vw); }
  .float--a { right: auto; left: max(0px, calc(50% - var(--rw) / 2 - 24px)); top: 2%; }
  .float--b { left: auto; right: max(0px, calc(50% - var(--rw) / 2 - 24px)); top: auto; bottom: 0; }
  .float--c { display: none; }
  .hero__geo { width: 150%; }

  .gallery { grid-template-columns: 1fr; }
  .ginfo { max-width: 620px; margin-inline: auto; width: 100%; }
  .prog { grid-template-columns: 1fr; gap: 28px; }
  .prog .viewer { max-width: 340px; }
  .reveal { grid-template-columns: 1fr; gap: 24px; }
  .reveal__copy { display: contents; }
  .reveal .stage { order: 1; }
  .reveal .rsteps { order: 2; }
  .beyond { grid-template-columns: 1fr; }
  .view { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    border-radius: 0;
    border-inline: 0;
    padding-inline: var(--gutter);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; scroll-snap-align: center; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .pillars { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .section { padding-block: 88px; }
  .sindex { margin-bottom: 36px; }
  .h1 { gap: 16px; }
  .h1__main { font-size: clamp(2.45rem, 11.2vw, 3.4rem); }
  .hero__copy { gap: 22px; }
  .hero__ctas { width: 100%; display: grid; grid-template-columns: 1fr; }
  .hero__ctas .btn { width: 100%; }
  .formula { font-size: 10px; gap: 6px; }
  .formula span { padding: 7px 8px; }
  .hero__art { --rw: min(340px, 82vw); padding-bottom: 64px; }
  .hero__geo .g-lbl { display: none; }
  .float--b { bottom: 0; }
  .chip { white-space: nowrap; font-size: 10px; letter-spacing: 0.08em; gap: 8px; }
  .float { padding: 10px 12px; font-size: 9.5px; }
  .float b { font-size: 11px; }
  .float--b .lvls i { width: 11px; height: 11px; }

  .anatomy { grid-template-columns: 1fr; }
  .anatomy__figure { padding: 4% 2% 4% 7%; }
  .eq { grid-template-columns: 1fr; }
  .eq .iso { grid-row: auto; max-width: 200px; margin: 0 auto 6px; }
  .steps { grid-template-columns: 1fr; padding-top: 0; padding-left: 28px; gap: 30px; }
  .steps::before { left: 4px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; background: linear-gradient(180deg, var(--veil), var(--line)); }
  .step::before { top: 4px; left: -28px; }
  .tiers { grid-template-columns: repeat(5, 62vw); }
  .ginfo__top { gap: 16px; }
  .specs div { grid-template-columns: 104px 1fr; }
  .map { display: none; }
  .panel { gap: 20px; }
  .prog .viewer { max-width: 290px; }
  .preview { gap: 16px; }
  .ticks button { font-size: 0; }
  .ticks button::before { content: attr(data-short); font-size: 9.5px; }
  .stage { min-height: 0; padding: 72px 14px 64px; border-radius: 22px; }
  .stage__status { left: 20px; right: auto; top: 54px; }
  .stage__label { top: 16px; left: 16px; }
  .flipper { width: min(330px, 82vw); }
  .statements li { grid-template-columns: 40px 1fr; padding: 20px 0; }
  .principles { grid-template-columns: 1fr; }
  .ledger { padding: 20px; }
  .ledger__rows div { grid-template-columns: 88px 1fr; gap: 10px; }
  .flow { grid-template-columns: 1fr 1fr; }
  .flow li:last-child { grid-column: 1 / -1; }
  .features { grid-template-columns: 1fr; }
  .links { grid-template-columns: 1fr; }
  .faq__a { padding-right: 8px; }
  .terms div { grid-template-columns: 1fr; gap: 8px; }
  .stamp { bottom: auto; top: 86px; right: 14px; font-size: 10.5px; }
  .doc__foot { padding-right: 0; }
  .footer__grid { grid-template-columns: 1fr; }
}

@media (hover: none) {
  .tier__link:hover { transform: none; }
}