/* Holo Intelligence UI: the site's design system.
   Mirrors the app's station shell (sarch/web/css/sarch.css, product.css): red/black holographic glass, corner
   brackets, Rajdhani for words, JetBrains Mono for data. Page agents never edit this file: page-only styles go
   in css/pages/<page>.css. See STYLEGUIDE.md for every class. */

/* =========================================================================================
   1. TOKENS AND THEMES
   A theme is the app's handful of colours (sarch/web/js/theme.js); everything else derives from them.
   Applied with data-theme on <html>; Ember is the default.
   ========================================================================================= */
:root,
:root[data-theme="ember"] {
  --void: #050102; --ember: #ff2b2b; --dim: #8a1418; --deep: #3d0709;
  --glow: #ffb0a4; --hot: #ffe0d8; --muted: #c4473f; --warn: #ffd166;
}
:root[data-theme="arctic"]   { --void: #01050a; --ember: #2bd4ff; --dim: #145a80; --deep: #072838; --glow: #a8e9ff; --hot: #e2f8ff; --muted: #3f97c0; --warn: #ffd166; }
:root[data-theme="amber"]    { --void: #060301; --ember: #ffab1f; --dim: #8a5a14; --deep: #3d2507; --glow: #ffd9a4; --hot: #fff1da; --muted: #c4873f; --warn: #ff6b6b; }
:root[data-theme="violet"]   { --void: #040108; --ember: #a64bff; --dim: #5a148a; --deep: #27073d; --glow: #d9b3ff; --hot: #f3e4ff; --muted: #8a52c4; --warn: #ffd166; }
:root[data-theme="emerald"]  { --void: #010603; --ember: #2bff8a; --dim: #148a4a; --deep: #073d20; --glow: #a8ffcb; --hot: #e2fff0; --muted: #3fc47b; --warn: #ffd166; }
:root[data-theme="graphite"] { --void: #050506; --ember: #d8dde6; --dim: #5d6370; --deep: #22252b; --glow: #c4cad4; --hot: #ffffff; --muted: #8a909c; --warn: #ffd166; }

:root {
  /* derived from the theme (same recipe as theme.js applySettings) */
  --hair: color-mix(in srgb, var(--ember) 20%, transparent);
  --hair-strong: color-mix(in srgb, var(--ember) 38%, transparent);
  --glass: color-mix(in srgb, var(--ember) 3.5%, transparent);
  --glass-solid: color-mix(in srgb, var(--ember) 4%, var(--void));
  --accent-soft: color-mix(in srgb, var(--ember) 18%, transparent);
  --accent-glow: color-mix(in srgb, var(--ember) 50%, transparent);
  --scrim: color-mix(in srgb, var(--void) 82%, transparent);
  --text: var(--glow);                                            /* body copy */
  --text-2: color-mix(in srgb, var(--glow) 62%, var(--muted));    /* secondary copy: passes AA on --void */
  --label: color-mix(in srgb, var(--muted) 80%, var(--glow));     /* micro labels: --muted lifted to 4.5:1 in every theme */
  --line: color-mix(in srgb, var(--ember) 12%, transparent);

  /* type */
  --font-ui: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --fs-hero: clamp(2.7rem, 1.1rem + 5.4vw, 6rem);
  --fs-h1: clamp(2.4rem, 1.3rem + 3.6vw, 4.4rem);
  --fs-h2: clamp(2rem, 1.25rem + 2.5vw, 3.4rem);
  --fs-h3: clamp(1.3rem, 1.15rem + 0.4vw, 1.55rem);
  --fs-lead: clamp(1.18rem, 1.05rem + 0.45vw, 1.42rem);
  --fs-body: 1.125rem;
  --fs-small: 0.98rem;
  --fs-micro: 0.74rem;

  /* space and shape */
  --gutter: 16px;
  --max: 1200px;
  --max-wide: 1380px;
  --section-y: clamp(84px, 13vh, 168px);
  --radius: 0;                                 /* the app has no rounded corners */
  --bracket: 14px;                             /* corner bracket size on cards */
  --header-h: 64px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  color-scheme: dark;
}
@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }

/* browsers without color-mix: Ember's derived values */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --hair: rgba(255, 60, 50, 0.2); --hair-strong: rgba(255, 60, 50, 0.38); --glass: rgba(255, 30, 24, 0.035);
    --glass-solid: #0f0304; --accent-soft: rgba(255, 43, 43, 0.18); --accent-glow: rgba(255, 43, 43, 0.5);
    --scrim: rgba(5, 1, 2, 0.82); --text-2: #e78a7e; --label: #d05c53; --line: rgba(255, 43, 43, 0.12);
  }
}

/* =========================================================================================
   2. BASE
   ========================================================================================= */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; background: var(--void); color: var(--text);
  font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-body); line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.6s ease;
}
/* a faint scanline veil over everything, like the app's glass */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--hot); text-decoration-color: var(--hair-strong); text-underline-offset: 0.22em; text-decoration-thickness: 1px; transition: color 0.2s, text-decoration-color 0.2s; }
a:hover { color: var(--hot); text-decoration-color: var(--ember); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; color: var(--hot); font-weight: 700; line-height: 1.04; text-wrap: balance; }
h1 { font-size: var(--fs-h1); letter-spacing: 0.02em; text-transform: uppercase; }
h2 { font-size: var(--fs-h2); letter-spacing: 0.03em; text-transform: uppercase; }
h3 { font-size: var(--fs-h3); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; line-height: 1.15; }
h4 { font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
strong, b { color: var(--hot); font-weight: 700; }
small { font-size: var(--fs-small); }
hr { border: 0; height: 1px; background: var(--hair); margin: 2.5rem 0; }
::selection { background: var(--ember); color: var(--void); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { padding-left: 1.3em; }

/* focus: a hot ring that reads on every theme */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }
.skip-link {
  position: fixed; left: var(--gutter); top: 10px; z-index: 100; transform: translateY(-160%);
  padding: 0.6rem 1rem; background: var(--ember); color: var(--void); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none; transition: transform 0.2s var(--ease-out);
}
.skip-link:focus { transform: none; color: var(--void); }

/* layering: the 3D stage sits behind everything */
.site-header, main, .site-footer { position: relative; z-index: 2; }

/* =========================================================================================
   3. LAYOUT UTILITIES
   ========================================================================================= */
.container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container.wide { max-width: calc(var(--max-wide) + 2 * var(--gutter)); }
.container.narrow { max-width: calc(820px + 2 * var(--gutter)); }
.section { padding-block: var(--section-y); position: relative; }
.section.tight { padding-block: calc(var(--section-y) * 0.6); }
.page-top { padding-top: calc(var(--header-h) + clamp(48px, 9vh, 110px)); }

.stack > * + * { margin-top: var(--stack, 1rem); }
.stack-lg { --stack: 2rem; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--gap, 0.75rem); align-items: center; }
.grid { display: grid; gap: var(--gap, 1.25rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 260px)), 1fr)); }
.grid-2 { display: grid; gap: var(--gap, 1.25rem); grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: var(--gap, 1.25rem); grid-template-columns: 1fr; }
.grid-4 { display: grid; gap: var(--gap, 1.25rem); grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .grid-2, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* two columns: text and a visual. .split.flip puts the visual first on wide screens. */
.split { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split.flip > :first-child { order: 2; }
  .split.text-left > :first-child { grid-column: 1; }
  .split.text-right > :first-child { grid-column: 2; }
}
.measure { max-width: 62ch; }
.center { text-align: center; margin-inline: auto; }
.mono { font-family: var(--font-data); }
.hot { color: var(--hot); }
.accent { color: var(--ember); }
.muted { color: var(--text-2); }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2.5rem; } .mt-5 { margin-top: 4rem; }
.mb-0 { margin-bottom: 0 !important; }
.visually-hidden, .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;
}
/* a soft dark pool behind text that sits over the 3D */
.scrim { position: relative; isolation: isolate; }
.scrim::before {
  content: ""; position: absolute; inset: -12% -16%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--scrim), transparent);
}
/* narrow screens: the pool stops at the screen's edge, so it never makes the page wider than the screen */
@media (max-width: 899.98px) { .scrim::before { inset: -12% calc(-1 * var(--gutter)); } }

/* =========================================================================================
   4. TYPE PIECES: micro labels, section heads, lead
   ========================================================================================= */
.eyebrow, .micro {
  font-family: var(--font-data); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--label); line-height: 1.4;
}
.eyebrow { display: inline-flex; align-items: center; gap: 0.65rem; margin: 0 0 1.1rem; }
.eyebrow::before { content: ""; width: 1.9rem; height: 1px; background: var(--ember); box-shadow: 0 0 6px var(--accent-glow); }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text); max-width: 60ch; }
.hero-title { font-size: var(--fs-hero); line-height: 0.94; letter-spacing: 0.015em; text-transform: uppercase; }
.hero-title .accent, h1 .accent, h2 .accent { color: var(--ember); text-shadow: 0 0 28px var(--accent-soft); }

.section-head { margin-bottom: clamp(2.2rem, 5vw, 3.6rem); max-width: 760px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .index {
  display: inline-flex; align-items: center; gap: 0.75rem; margin: 0 0 1.1rem;
  font-family: var(--font-data); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--label);
}
.section-head .index::before { content: ""; width: 2.4rem; height: 1px; background: linear-gradient(90deg, transparent, var(--ember)); }
.section-head .index b, .section-head .index .n { color: var(--ember); font-weight: 600; }
.section-head h2 + .lead, .section-head h1 + .lead { margin-top: 1.1rem; }
.section-head.center .index::after { content: ""; width: 2.4rem; height: 1px; background: linear-gradient(90deg, var(--ember), transparent); }
.section-head.center .lead { margin-inline: auto; }

/* =========================================================================================
   5. HUD DIVIDERS, TICK RULES, LABELS
   ========================================================================================= */
.hud-rule {
  position: relative; height: 12px; margin: 2.5rem 0; color: var(--label);
  background:
    linear-gradient(90deg, var(--ember) 0 64px, transparent 64px) 0 50% / 100% 1px no-repeat,
    linear-gradient(var(--hair), var(--hair)) 0 50% / 100% 1px no-repeat;
}
.hud-rule::before { /* end ticks */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(var(--ember), var(--ember)) 0 0 / 1px 100% no-repeat,
              linear-gradient(var(--hair-strong), var(--hair-strong)) 100% 0 / 1px 100% no-repeat;
}
.hud-rule[data-label]::after {
  content: attr(data-label); position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  padding: 0 0.6rem; background: var(--void); font-family: var(--font-data); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tick-rule {
  height: 10px; margin: 2rem 0;
  background:
    repeating-linear-gradient(90deg, var(--hair-strong) 0 1px, transparent 1px 12px) 0 100% / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, var(--ember) 0 1px, transparent 1px 120px) 0 100% / 100% 10px no-repeat,
    linear-gradient(var(--hair), var(--hair)) 0 100% / 100% 1px no-repeat;
  opacity: 0.8;
}
.hud-label {
  display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-data); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--label);
}
.hud-label b { color: var(--hot); font-weight: 600; }
.dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--dim); display: inline-block; flex: none; }
.dot.on { background: var(--ember); box-shadow: 0 0 0.55rem var(--accent-glow); }
.dot.live { background: var(--ember); box-shadow: 0 0 0.55rem var(--accent-glow); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* =========================================================================================
   6. BUTTONS
   ========================================================================================= */
.btn {
  --btn-bg: var(--accent-soft); --btn-fg: var(--hot); --btn-bd: var(--ember);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 46px; padding: 0.7rem 1.35rem; border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-ui); font-size: 1rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.1; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: box-shadow 0.25s, background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.2s;
}
.btn:hover { color: var(--btn-fg); box-shadow: 0 0 1.1rem var(--accent-glow); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  --btn-bg: var(--ember); --btn-fg: var(--void); --btn-bd: var(--ember);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.btn-primary:hover { --btn-bg: var(--hot); --btn-bd: var(--hot); box-shadow: none; filter: drop-shadow(0 0 12px var(--accent-glow)); }
.btn-primary:focus-visible { outline: 2px solid var(--void); outline-offset: -6px; } /* clip-path would cut an outside ring */
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--glow); --btn-bd: var(--hair-strong); }
.btn-ghost:hover { --btn-fg: var(--hot); --btn-bd: var(--ember); --btn-bg: var(--glass); }
.btn-ghost::before, .btn-ghost::after { /* little HUD corners */
  content: ""; position: absolute; width: 7px; height: 7px; pointer-events: none; transition: border-color 0.25s;
}
.btn-ghost::before { top: -1px; left: -1px; border-top: 1px solid var(--ember); border-left: 1px solid var(--ember); }
.btn-ghost::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--ember); border-right: 1px solid var(--ember); }
.btn-lg { min-height: 56px; padding: 0.9rem 1.7rem; font-size: 1.12rem; }
.btn-sm { min-height: 36px; padding: 0.4rem 0.85rem; font-size: 0.86rem; letter-spacing: 0.12em; }
.btn-block { display: flex; width: 100%; }
.btn .arrow { font-family: var(--font-data); font-weight: 400; transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(3px); }
.btn s, .btn .was { font-weight: 600; opacity: 0.9; text-decoration-thickness: 2px; } /* 0.9 keeps 4.5:1 on every theme's primary button */
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.45; pointer-events: none; }
.text-link {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; font-family: var(--font-data); font-size: 0.82rem;
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hot); text-decoration: none;
}
.text-link::after { content: "→"; transition: transform 0.2s; color: var(--ember); }
.text-link:hover::after { transform: translateX(4px); }

/* =========================================================================================
   7. HOLO CARD: glass panel with corner brackets (the app's .holo-card / .panel)
   ========================================================================================= */
.holo-card {
  position: relative; background: var(--glass); border: 1px solid var(--hair); padding: clamp(1.15rem, 2.4vw, 1.6rem);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.holo-card::before, .holo-card::after {
  content: ""; position: absolute; width: var(--bracket); height: var(--bracket); pointer-events: none; transition: width 0.3s, height 0.3s;
}
.holo-card::before { top: -1px; left: -1px; border-top: 2px solid var(--ember); border-left: 2px solid var(--ember); }
.holo-card::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--ember); border-right: 2px solid var(--ember); }
.holo-card > :last-child { margin-bottom: 0; }
.holo-card h3 { margin: 0 0 0.55rem; }
.holo-card p { color: var(--text-2); }
.holo-card .card-label { /* a mono label in the top bar, like the app's panel titles */
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: -0.2rem 0 1rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--hair);
  font-family: var(--font-data); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--label);
}
.holo-card .card-label::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 54px; height: 3px; background: var(--ember); }
.holo-card.solid { background: var(--glass-solid); }
.holo-card.hot { border-color: var(--hair-strong); box-shadow: 0 0 2.4rem var(--accent-soft), inset 0 0 2.4rem color-mix(in srgb, var(--ember) 6%, transparent); }
.holo-card.flat { -webkit-backdrop-filter: none; backdrop-filter: none; }
.holo-card.corners-4 { background-image:
  linear-gradient(var(--ember), var(--ember)), linear-gradient(var(--ember), var(--ember)),
  linear-gradient(var(--ember), var(--ember)), linear-gradient(var(--ember), var(--ember));
  background-size: var(--bracket) 2px, 2px var(--bracket), var(--bracket) 2px, 2px var(--bracket);
  background-position: calc(100% + 1px) -1px, calc(100% + 1px) -1px, -1px calc(100% + 1px), -1px calc(100% + 1px);
  background-repeat: no-repeat; background-color: var(--glass);
}
a.holo-card, .holo-card.interactive { display: block; color: inherit; text-decoration: none; transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease-out); }
a.holo-card:hover, .holo-card.interactive:hover { border-color: var(--hair-strong); box-shadow: 0 0 1.6rem var(--accent-soft), inset 0 0 1.6rem color-mix(in srgb, var(--ember) 5%, transparent); transform: translateY(-2px); }
a.holo-card:hover::before, a.holo-card:hover::after, .holo-card.interactive:hover::before, .holo-card.interactive:hover::after { width: calc(var(--bracket) * 1.8); height: calc(var(--bracket) * 1.8); }
.holo-card .icon { width: 40px; height: 40px; color: var(--ember); margin-bottom: 1rem; filter: drop-shadow(0 0 6px var(--accent-soft)); }

/* =========================================================================================
   8. BADGES AND PRICE
   ========================================================================================= */
.badge {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.18rem 0.5rem; border: 1px solid var(--hair-strong);
  font-family: var(--font-data); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  line-height: 1.3; color: var(--glow); white-space: nowrap; vertical-align: middle;
}
.badge-ok { border-color: var(--ember); color: var(--hot); background: var(--accent-soft); }
.badge-sale { border-color: var(--ember); background: var(--ember); color: var(--void); }
.badge-soon { border-style: dashed; border-color: var(--warn); color: var(--warn); }
.badge-soon::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; animation: blink 1.6s steps(2) infinite; }
.badge-warn { border-color: var(--warn); color: var(--warn); }

.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.9rem; }
.price-was {
  font-family: var(--font-ui); font-size: 1.6rem; font-weight: 600; color: var(--text-2);
  text-decoration: line-through; text-decoration-color: var(--ember); text-decoration-thickness: 2px;
}
.price-now { font-family: var(--font-ui); font-size: clamp(3.4rem, 2.6rem + 3vw, 4.6rem); font-weight: 700; line-height: 0.9; color: var(--hot); text-shadow: 0 0 30px var(--accent-soft); }
.price-now small { font-size: 0.32em; font-weight: 600; color: var(--text-2); letter-spacing: 0.12em; margin-left: 0.3rem; }
.price .badge-sale { align-self: center; }
.price-note { font-family: var(--font-data); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--text-2); }
/* compact price for buttons and tight spots: <s>$40</s> $30 */
.price-inline { display: inline-flex; align-items: baseline; gap: 0.45rem; }
.price-inline s { color: var(--text-2); text-decoration-color: var(--ember); text-decoration-thickness: 2px; }

/* =========================================================================================
   9. KBD, CODE, TABLES
   ========================================================================================= */
kbd, .kbd {
  display: inline-block; min-width: 1.7em; padding: 0.08em 0.45em 0.12em; border: 1px solid var(--hair-strong);
  border-bottom-width: 2px; background: var(--glass-solid); color: var(--hot); text-align: center;
  font-family: var(--font-data); font-size: 0.82em; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
code { font-family: var(--font-data); font-size: 0.86em; color: var(--hot); background: var(--glass); border: 1px solid var(--line); padding: 0.08em 0.35em; overflow-wrap: anywhere; }
.code {
  position: relative; margin: 1.5rem 0; border: 1px solid var(--hair); background: color-mix(in srgb, var(--void) 70%, transparent);
}
.code-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--hair); font-family: var(--font-data); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--label);
}
.code-head::before { content: ""; flex: none; width: 0.45rem; height: 0.45rem; background: var(--ember); box-shadow: 0 0 6px var(--accent-glow); margin-right: -0.4rem; }
.code-head > :first-child { margin-right: auto; }
.code pre, pre.code { margin: 0; padding: 1rem 1.1rem; overflow-x: auto; font-family: var(--font-data); font-size: 0.84rem; line-height: 1.65; color: var(--glow); tab-size: 2; }
.code pre code, pre.code code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }
.tok-key { color: var(--hot); } .tok-str { color: var(--ember); } .tok-num { color: var(--warn); } .tok-com { color: var(--label); font-style: italic; } .tok-pun { color: var(--label); }

.table-wrap { width: 100%; overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--hair); background: var(--glass); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.table th, .table td { padding: 0.7rem 0.9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table th { font-family: var(--font-data); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); border-bottom-color: var(--hair-strong); white-space: nowrap; }
.table td { color: var(--text); }
.table td:first-child { color: var(--hot); font-weight: 600; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--glass); }
.table .num { text-align: right; font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* =========================================================================================
   10. ACCORDION (details/summary), CALLOUTS
   ========================================================================================= */
.accordion { border-top: 1px solid var(--hair); }
.accordion:last-of-type, .accordion-group > .accordion:last-child { border-bottom: 1px solid var(--hair); }
.accordion > summary {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.15rem 0.2rem;
  list-style: none; cursor: pointer; color: var(--hot); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.04em;
  transition: color 0.2s;
}
.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary::after {
  content: ""; flex: none; width: 1.6rem; height: 1.6rem; border: 1px solid var(--hair-strong);
  background: linear-gradient(var(--ember), var(--ember)) center / 0.7rem 2px no-repeat,
              linear-gradient(var(--ember), var(--ember)) center / 2px 0.7rem no-repeat;
  transition: transform 0.3s var(--ease-out), background-size 0.3s;
}
.accordion[open] > summary::after { transform: rotate(180deg); background-size: 0.7rem 2px, 2px 0; }
.accordion > summary:hover { color: var(--ember); }
.accordion > summary .q-index { font-family: var(--font-data); font-size: 0.72rem; color: var(--label); letter-spacing: 0.14em; margin-right: 0.9rem; }
.accordion > summary > span:not(.q-index) { flex: 1; }
.accordion-body { padding: 0 0.2rem 1.3rem; color: var(--text-2); max-width: 70ch; }
.accordion-body > :last-child { margin-bottom: 0; }
.accordion[open] .accordion-body { animation: drop-in 0.35s var(--ease-out); }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } }

.callout {
  position: relative; margin: 1.6rem 0; padding: 1rem 1.2rem 1rem 1.3rem; border: 1px solid var(--hair);
  border-left: 3px solid var(--ember); background: var(--glass); color: var(--text);
}
.callout > :last-child { margin-bottom: 0; }
.callout-title {
  display: block; margin-bottom: 0.35rem; font-family: var(--font-data); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember);
}
.callout-warn { border-left-color: var(--warn); }
.callout-warn .callout-title { color: var(--warn); }
.callout-tip { border-left-color: var(--hot); }
.callout-tip .callout-title { color: var(--hot); }

/* =========================================================================================
   11. FORMS (contact page and anywhere else)
   ========================================================================================= */
.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.2rem; }
.field > label, .label {
  font-family: var(--font-data); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label);
}
.field .req { color: var(--ember); }
.input, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 0.7rem 0.85rem; border: 1px solid var(--hair-strong); border-radius: 0;
  background: color-mix(in srgb, var(--void) 70%, transparent); color: var(--hot);
  font-family: var(--font-ui); font-size: 1.1rem; font-weight: 500; transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea, textarea.input { min-height: 9rem; resize: vertical; line-height: 1.5; }
.field select, select.input {
  appearance: none; padding-right: 2.4rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ember) 50%), linear-gradient(-45deg, transparent 50%, var(--ember) 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.field select option { background: var(--void); color: var(--hot); }
.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember), 0 0 1rem var(--accent-soft); }
.field-hint { font-family: var(--font-data); font-size: 0.74rem; color: var(--text-2); }
.field-error { font-family: var(--font-data); font-size: 0.74rem; color: var(--warn); }
.field.invalid input, .field.invalid textarea, .field.invalid select, .input[aria-invalid="true"] { border-color: var(--warn); }
.check { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 1rem; cursor: pointer; color: var(--text); }
.check input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.22rem; accent-color: var(--ember); }
.form-row { display: grid; gap: 0 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.6rem; }
.form-status { font-family: var(--font-data); font-size: 0.8rem; color: var(--text-2); }
.form-status.ok { color: var(--hot); } .form-status.err { color: var(--warn); }

/* =========================================================================================
   12. PROSE: long guide and legal text
   ========================================================================================= */
.prose { max-width: 72ch; color: var(--text); font-size: 1.15rem; line-height: 1.65; }
.prose > * + * { margin-top: 1.05em; }
.prose p, .prose ul, .prose ol { margin: 0; }
.prose > * + p, .prose > * + ul, .prose > * + ol { margin-top: 1em; }
.prose h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); margin-top: 2.6em; padding-top: 1.1em; border-top: 1px solid var(--hair); }
.prose h3 { font-size: 1.3rem; margin-top: 2em; }
.prose h4 { margin-top: 1.6em; color: var(--glow); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0.7em; }
.prose li { margin: 0.4em 0; padding-left: 0.2em; }
.prose ul { list-style: none; padding-left: 1.3em; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: ""; position: absolute; left: -1.1em; top: 0.72em; width: 0.45em; height: 2px; background: var(--ember); }
.prose ol { padding-left: 1.6em; }
.prose ol > li::marker { font-family: var(--font-data); font-size: 0.85em; color: var(--ember); }
.prose a { color: var(--hot); }
.prose blockquote { margin-left: 0; padding: 0.4em 0 0.4em 1.2em; border-left: 2px solid var(--ember); color: var(--text-2); }
.prose img { border: 1px solid var(--hair); }
.prose .table-wrap, .prose .code, .prose .callout { margin-top: 1.5em; }
.prose small, .prose .meta { font-family: var(--font-data); font-size: 0.78rem; color: var(--text-2); letter-spacing: 0.04em; }
.toc { font-family: var(--font-data); font-size: 0.82rem; }
.toc ol, .toc ul { list-style: none; padding: 0; margin: 0; }
.toc li { margin: 0; border-left: 1px solid var(--hair); }
.toc a { display: block; padding: 0.35rem 0 0.35rem 0.9rem; color: var(--text-2); text-decoration: none; }
.toc a:hover, .toc a[aria-current="true"] { color: var(--hot); border-left: 2px solid var(--ember); margin-left: -1px; padding-left: calc(0.9rem - 1px); }

/* =========================================================================================
   13. HEADER, NAV, MOBILE MENU, THEME SWITCHER
   ========================================================================================= */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--header-h); }
.site-header::before { /* glass appears once you scroll */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.35s;
  background: color-mix(in srgb, var(--void) 78%, transparent); border-bottom: 1px solid var(--hair);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
}
.site-header.is-scrolled::before, .site-header.menu-open::before { opacity: 1; }
.nav { height: 100%; display: flex; align-items: center; gap: 1.2rem; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 44px; color: var(--hot); text-decoration: none; flex: none; }
.brand:hover { color: var(--hot); }
.brand-mark { width: 30px; height: 30px; color: var(--ember); filter: drop-shadow(0 0 6px var(--accent-glow)); }
.brand-word { display: flex; flex-direction: column; line-height: 1; }
.brand-word b { font-size: 1.02rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--hot); }
.brand-word span { margin-top: 0.28rem; font-family: var(--font-data); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--label); }
.nav-links { display: none; align-items: center; gap: 0.2rem; margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav-links a {
  position: relative; display: block; padding: 0.55rem 0.8rem; color: var(--glow); text-decoration: none;
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.25rem; height: 2px; background: var(--ember);
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-out); box-shadow: 0 0 8px var(--accent-glow);
}
.nav-links a:hover { color: var(--hot); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--hot); }
.nav-actions { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.nav-links + .nav-actions { margin-left: 0.6rem; }
.nav-buy { min-height: 40px; padding: 0.45rem 1rem; font-size: 0.92rem; }
.nav-buy s { font-size: 0.8em; }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--hair-strong); color: var(--hot);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: transform 0.3s var(--ease-out), background-color 0.2s;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.nav-menu {
  position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 39; overflow-y: auto;
  padding: 1.4rem var(--gutter) 2.5rem; background: color-mix(in srgb, var(--void) 94%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: 1.6rem;
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.25s, transform 0.3s var(--ease-out), visibility 0s 0.3s;
}
.nav-menu.open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.3s var(--ease-out); }
.nav-menu ul { list-style: none; margin: 0; padding: 0; }
.nav-menu li a {
  display: flex; align-items: baseline; gap: 1rem; padding: 0.95rem 0; border-bottom: 1px solid var(--line);
  color: var(--hot); text-decoration: none; font-size: 1.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.nav-menu li a::before { content: attr(data-n); font-family: var(--font-data); font-size: 0.72rem; font-weight: 600; color: var(--ember); letter-spacing: 0.14em; }
.nav-menu li a[aria-current="page"] { color: var(--ember); }
.nav-menu .btn { width: 100%; }
.nav-menu .theme-row { display: flex; flex-direction: column; gap: 0.7rem; }
body.menu-lock { overflow: hidden; }
@media (min-width: 980px) {
  .nav-links { display: flex; }
  .nav-toggle, .nav-menu { display: none; }
}
@media (max-width: 979.98px) { .nav-actions .theme-switch, .nav-actions .nav-buy { display: none; } }
@media (max-width: 380px) { .brand-word span { display: none; } }

/* theme switcher */
.theme-switch { position: relative; }
.theme-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; height: 40px; padding: 0 0.7rem; background: transparent;
  border: 1px solid var(--hair-strong); color: var(--glow); font-family: var(--font-data); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.theme-btn:hover, .theme-btn[aria-expanded="true"] { border-color: var(--ember); color: var(--hot); }
.theme-btn i { width: 14px; height: 14px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 8px var(--accent-glow), inset 0 0 0 3px var(--void); border: 1px solid var(--ember); }
.theme-pop {
  position: absolute; right: 0; top: calc(100% + 10px); width: 240px; padding: 0.9rem; z-index: 50;
  background: color-mix(in srgb, var(--void) 92%, transparent); border: 1px solid var(--hair-strong);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.theme-pop::before { content: ""; position: absolute; top: -1px; left: -1px; width: 12px; height: 12px; border-top: 2px solid var(--ember); border-left: 2px solid var(--ember); }
.theme-pop .micro { display: block; margin-bottom: 0.6rem; }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
.swatch {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.5rem 0.2rem 0.4rem; min-height: 44px;
  background: transparent; border: 1px solid var(--line); color: var(--text-2);
  font-family: var(--font-data); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.swatch i { width: 22px; height: 22px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 10px color-mix(in srgb, var(--sw) 55%, transparent), inset 0 0 0 4px var(--sw-void, #050102); border: 1px solid var(--sw); }
.swatch:hover { border-color: var(--hair-strong); color: var(--hot); }
.swatch[aria-pressed="true"] { border-color: var(--ember); color: var(--hot); background: var(--accent-soft); }
.nav-menu .swatches { grid-template-columns: repeat(6, 1fr); }
.nav-menu .swatch span { display: none; }

/* the no-JS nav that sits inside <header data-site-header> until site.js replaces it */
.nav-static { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; min-height: var(--header-h); padding: 0.6rem var(--gutter); background: var(--void); border-bottom: 1px solid var(--hair); }
.nav-static a { display: inline-block; padding: 0.6rem 0; color: var(--glow); text-decoration: none; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.9rem; }
.nav-static a:first-child { color: var(--hot); font-weight: 700; letter-spacing: 0.24em; margin-right: auto; }
.nav-static a[aria-current="page"] { color: var(--ember); }
header[data-site-header]:has(.nav-static) { position: relative; height: auto; }

/* =========================================================================================
   14. FOOTER
   ========================================================================================= */
.site-footer { margin-top: 2rem; padding: 3.5rem 0 2.2rem; border-top: 1px solid var(--hair); background: linear-gradient(to bottom, color-mix(in srgb, var(--void) 70%, transparent), var(--void) 40%); }
.footer-grid { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-brand { grid-column: 1 / -1; max-width: 380px; }
.footer-brand p { margin-top: 1rem; color: var(--text-2); font-size: var(--fs-small); }
.footer-brand .hud-label { display: block; line-height: 1.8; font-size: 0.68rem; }
.footer-brand .hud-label .dot { margin-right: 0.45rem; vertical-align: 0.05em; }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .footer-brand { grid-column: auto; } }
.footer-col h2 { font-family: var(--font-data); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; color: var(--label); margin: 0 0 1rem; }
.footer-col ul { list-style: none; margin: -0.45rem 0 0; padding: 0; display: grid; gap: 0; }
.footer-col a { display: inline-block; min-width: 44px; padding: 0.45rem 0; color: var(--glow); text-decoration: none; font-weight: 600; letter-spacing: 0.04em; overflow-wrap: anywhere; } /* 42px tap targets */
.footer-col a:hover { color: var(--hot); }
.footer-col a[aria-current="page"] { color: var(--ember); }
.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem; margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line);
  font-family: var(--font-data); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-2);
}
.footer-base p { margin: 0; }

/* =========================================================================================
   15. THE 3D STAGE (hero3d.js) AND ITS STATIC FALLBACK
   ========================================================================================= */
.stage { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.has-webgl .stage { opacity: 1; }
/* No JS or no WebGL: a drawn Core, recoloured by the theme through a mask */
.core-art { position: relative; aspect-ratio: 1; filter: drop-shadow(0 0 10px var(--accent-glow)); pointer-events: none; }
.core-art::before { /* the lines */
  content: ""; position: absolute; inset: 0; background: var(--ember);
  -webkit-mask: url(../img/core-fallback.svg) center / contain no-repeat; mask: url(../img/core-fallback.svg) center / contain no-repeat;
}
.core-art::after { /* the hot heart */
  content: ""; position: absolute; left: 50%; top: 44%; width: 15%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, var(--hot) 0 18%, color-mix(in srgb, var(--ember) 70%, transparent) 34%, transparent 70%);
  animation: breathe 5s ease-in-out infinite;
}
.stage-fallback { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; transition: opacity 1s ease; }
.stage-fallback .core-art { position: absolute; left: var(--fx, 68%); top: var(--fy, 48%); width: min(92vh, 78vw); transform: translate(-50%, -50%); }
/* an inline Core: <div class="core-box"><div class="core-art"></div><canvas class="core-inline"></canvas></div> */
.core-box { position: relative; width: 100%; aspect-ratio: 1; }
.core-box .core-art { position: absolute; inset: 4%; transition: opacity 0.8s ease; }
.core-box canvas.core-inline { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; }
.core-box.live canvas.core-inline { opacity: 1; }
.core-box.live .core-art { opacity: 0; }
.stage-fallback::after { /* floor glow */
  content: ""; position: absolute; left: var(--fx, 68%); top: 84%; width: 70vw; height: 30vh; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--accent-soft), transparent);
}
.has-webgl .stage-fallback { opacity: 0; }
@keyframes breathe { 50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.85; } }
.stage-fallback.center .core-art { --fx: 50%; --fy: 50%; opacity: 0.35; }
@media (max-width: 760px) { .stage-fallback .core-art { --fx: 50%; --fy: 30%; width: 118vw; opacity: 0.55; } }

/* =========================================================================================
   16. REVEAL ON SCROLL (site.js adds .is-in; only hidden when JS runs: <html class="js">)
   ========================================================================================= */
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(26px); }
@media (min-width: 900px) { /* sideways only where there's room, so nothing pokes past a phone's edge */
  .js [data-reveal="left"]:not(.is-in) { transform: translateX(-34px); }
  .js [data-reveal="right"]:not(.is-in) { transform: translateX(34px); }
}
.js [data-reveal="scale"]:not(.is-in) { transform: scale(0.94); }
.js [data-reveal="fade"]:not(.is-in) { transform: none; }
.js [data-reveal="scan"]:not(.is-in) { transform: none; clip-path: inset(0 0 100% 0); }
.js [data-reveal] { transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), clip-path 1s var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-reveal="scan"].is-in { clip-path: inset(0 0 0 0); }
/* failsafe: if site.js never starts, show everything after 2.5 s */
.js:not(.site-ready) [data-reveal] { animation: reveal-failsafe 0.01s 2.5s forwards; }
@keyframes reveal-failsafe { to { opacity: 1; transform: none; clip-path: none; } }
/* a hologram flicker when something arrives */
.js [data-reveal].is-in.flicker { animation: holo-flicker 0.7s steps(1) 1; animation-delay: var(--d, 0ms); }
@keyframes holo-flicker { 0% { opacity: 0.2; } 12% { opacity: 0.9; } 18% { opacity: 0.35; } 30% { opacity: 1; } 42% { opacity: 0.6; } 50%, 100% { opacity: 1; } }

/* =========================================================================================
   17. REDUCED MOTION
   ========================================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .js [data-reveal]:not(.is-in) { opacity: 1; transform: none; clip-path: none; }
  .dot.live, .badge-soon::before { animation: none; }
}

/* =========================================================================================
   18. PRINT
   ========================================================================================= */
@media print {
  .stage, .stage-fallback, .site-header, .nav-menu, body::after { display: none !important; }
  body { background: #fff; color: #111; }
  h1, h2, h3, h4, strong, b, a { color: #000; }
}