/* ===========================
   PIANO — Theme-aware design
   =========================== */

/* ---- CSS Variables (dark = default) ---- */
:root {
  --bg:        #0C0C0C;
  --bg-1:      #0F0F0F;
  --fg:        #EDEDED;
  --fg-2:      #888;
  --fg-3:      #666;
  --fg-4:      #555;
  --fg-5:      #444;
  --fg-6:      #333;
  --fg-7:      #2A2A2A;
  --fg-btn-ol: #777;

  --bd-1:   rgba(255,255,255,0.04);
  --bd-2:   rgba(255,255,255,0.05);
  --bd-3:   rgba(255,255,255,0.06);
  --bd-4:   rgba(255,255,255,0.07);
  --bd-5:   rgba(255,255,255,0.08);
  --bd-6:   rgba(255,255,255,0.10);
  --bd-7:   rgba(255,255,255,0.11);
  --bd-8:   rgba(255,255,255,0.12);
  --bd-9:   rgba(255,255,255,0.14);
  --bd-10:  rgba(255,255,255,0.26);
  --bd-11:  rgba(255,255,255,0.28);

  --nav-bg:    rgba(12,12,12,0.85);
  --drawer-bg: #0C0C0C;
  --hover-bg:  rgba(255,255,255,0.02);
  --hover-bg2: rgba(255,255,255,0.07);
  --hover-bg3: rgba(255,255,255,0.13);

  --btn-bg: #EDEDED;
  --btn-fg: #0C0C0C;
  --inv-bg: #EDEDED;
  --inv-fg: #0C0C0C;
  --lockup-fg: #EDEDED;

  --warn-bd: rgba(234,179,8,0.25);
  --warn-bg: rgba(234,179,8,0.04);

  --green: #16C784;
  --red:   #EA3943;

  /* Logo accent colors */
  --logo-rise: #57D5FF;
  --logo-fall: #FF6F8B;

  /* ISO SVG fills */
  --iso-t:    #14191F;
  --iso-l:    #0D1117;
  --iso-r:    #10151B;
  --iso-a:    #0F1E18;
  --iso-k:    #C0CAD4;
  --iso-bd:   #2A3444;
  --iso-bd2:  #2E3A4A;
  --iso-ls:   #080C12;
  --iso-lbd:  #ffffff;
  --iso-grid: #343A46;
  --iso-div:  rgba(255,255,255,0.18);
  --iso-shad: #05070A;
  --iso-cap:  #EDEDED;
}

[data-theme="light"] {
  --bg:        #FAFAFA;
  --bg-1:      #F0F0F0;
  --fg:        #111111;
  --fg-2:      #555;
  --fg-3:      #555;
  --fg-4:      #444;
  --fg-5:      #666;
  --fg-6:      #999;
  --fg-7:      #CCCCCC;
  --fg-btn-ol: #555;

  --bd-1:   rgba(0,0,0,0.04);
  --bd-2:   rgba(0,0,0,0.05);
  --bd-3:   rgba(0,0,0,0.07);
  --bd-4:   rgba(0,0,0,0.09);
  --bd-5:   rgba(0,0,0,0.10);
  --bd-6:   rgba(0,0,0,0.12);
  --bd-7:   rgba(0,0,0,0.13);
  --bd-8:   rgba(0,0,0,0.14);
  --bd-9:   rgba(0,0,0,0.16);
  --bd-10:  rgba(0,0,0,0.18);
  --bd-11:  rgba(0,0,0,0.20);

  --nav-bg:    rgba(250,250,250,0.88);
  --drawer-bg: #FAFAFA;
  --hover-bg:  rgba(0,0,0,0.03);
  --hover-bg2: rgba(0,0,0,0.05);
  --hover-bg3: rgba(0,0,0,0.08);

  --btn-bg: #111111;
  --btn-fg: #FAFAFA;
  --inv-bg: #111111;
  --inv-fg: #FAFAFA;
  --lockup-fg: #111111;

  --warn-bd: rgba(180,120,0,0.25);
  --warn-bg: rgba(180,120,0,0.05);

  /* ISO SVG fills — light mode */
  --iso-t:    #D8E2ED;
  --iso-l:    #C2D0DE;
  --iso-r:    #CAD8E8;
  --iso-a:    #D0EAE0;
  --iso-k:    #E8EFF5;
  --iso-bd:   #9AAEC0;
  --iso-bd2:  #9AAEC0;
  --iso-ls:   #BED0E0;
  --iso-lbd:  #8899AA;
  --iso-grid: #9AAEC0;
  --iso-div:  rgba(0,0,0,0.12);
  --iso-shad: rgba(0,0,0,0.08);
  --iso-cap:  #111111;
}

/* ---- Theme transition ---- */
body, .nav, .nav-drawer,
.hero__figure, .hiw__fig,
.pricing-card, .feature-card,
.security-card, .security-compare,
.faq-item, .callout, .callout--warn {
  transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }

/* ---- Typography ---- */
h1 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
}
h2 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
}
h3 { font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--fg); }
p { color: var(--fg-3); line-height: 1.75; }

/* ---- Layout ---- */
.container { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
.section { padding: 104px 0; }

/* ---- Labels ---- */
.label {
  display: inline-block;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--fg-5); margin-bottom: 14px;
}
.fig-label {
  font-size: 0.62rem; letter-spacing: 0.1em;
  color: var(--fg-6); text-transform: uppercase;
  font-family: 'Courier New', monospace;
}
.divider { height: 1px; background: var(--bd-3); }

/* ---- Buttons ---- */
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: 0.875rem; font-weight: 600;
  padding: 10px 20px; border-radius: 7px;
  transition: all 0.18s ease;
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-outline {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--fg-btn-ol);
  font-size: 0.875rem; font-weight: 500;
  padding: 10px 20px; border-radius: 7px;
  border: 1px solid var(--bd-7);
  transition: all 0.18s ease;
}
.btn-outline:hover { color: var(--fg); border-color: var(--bd-10); }


/* ==============================
   NAV
   ============================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 56px;
  border-bottom: 1px solid var(--bd-3);
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav__inner {
  max-width: 1080px; margin: 0 auto; padding: 0 28px;
  height: 100%; display: flex; align-items: center; gap: 36px;
}
.nav__logo {
  display: inline-flex; align-items: center; width: 42px; height: 38px;
  color: var(--fg); flex-shrink: 0;
}
.nav__links { display: flex; gap: 28px; flex: 1; }
.nav__links a { font-size: 0.84rem; color: var(--fg-4); transition: color 0.18s; }
.nav__links a:hover { color: var(--fg); }
.nav__cta {
  font-size: 0.8rem; font-weight: 600; color: var(--fg);
  border: 1px solid var(--bd-9); padding: 7px 15px;
  border-radius: 7px; transition: all 0.18s; white-space: nowrap; flex-shrink: 0;
}
.nav__cta:hover { background: var(--hover-bg2); border-color: var(--bd-11); }
.nav__hamburger { display: none; background: none; border: none; cursor: pointer; padding: 4px; margin-left: auto; }
.nav__hamburger span { display: block; width: 20px; height: 1.5px; background: var(--fg-2); margin: 4px 0; transition: all 0.25s; }
.nav-drawer {
  display: none; position: fixed; top: 56px; left: 0; right: 0;
  background: var(--drawer-bg); border-bottom: 1px solid var(--bd-3);
  padding: 20px 28px 28px; z-index: 199;
  flex-direction: column; gap: 20px;
}
.nav-drawer.open { display: flex; }
.nav-drawer a { font-size: 0.95rem; color: var(--fg-3); }

/* ---- Theme Toggle (single-button cycle) ---- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: none; border: 1px solid var(--bd-4);
  border-radius: 7px; padding: 0;
  cursor: pointer; color: var(--fg-6);
  flex-shrink: 0;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.theme-toggle:hover { color: var(--fg); background: var(--hover-bg); }
.theme-toggle:active { background: var(--hover-bg2); }
.theme-toggle__icon { width: 15px; height: 15px; display: none; }
.theme-toggle[data-mode="auto"] .theme-toggle__icon--auto,
.theme-toggle[data-mode="light"] .theme-toggle__icon--light,
.theme-toggle[data-mode="dark"] .theme-toggle__icon--dark { display: block; }

/* ---- Language Toggle ---- */
.lang-toggle {
  display: inline-flex; align-items: center;
  background: none; border: 1px solid var(--bd-4);
  border-radius: 7px; padding: 0;
  overflow: hidden; flex-shrink: 0;
}
.lang-toggle__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px;
  background: none; border: none;
  cursor: pointer; color: var(--fg-6);
  font-family: inherit; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.04em;
  transition: all 0.15s;
}
.lang-toggle__btn:hover { color: var(--fg); background: var(--hover-bg); }
.lang-toggle__btn.active { color: var(--fg); background: var(--hover-bg2); }
.lang-toggle__btn + .lang-toggle__btn { border-left: 1px solid var(--bd-3); }

/* ---- Art Mode Toggle ---- */
.art-toggle {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--bd-4);
  border-radius: 7px;
  background: var(--hover-bg);
}
.art-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 30px;
  padding: 0 10px;
  border: none;
  background: none;
  color: var(--fg-6);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  transition: color 0.15s, background-color 0.15s;
}
.art-toggle__btn:hover { color: var(--fg); background: var(--hover-bg); }
.art-toggle__btn.active {
  color: var(--fg);
  background:
    linear-gradient(180deg, rgba(87,213,255,0.18), rgba(22,199,132,0.08)),
    var(--hover-bg2);
}
.art-toggle__btn + .art-toggle__btn { border-left: 1px solid var(--bd-3); }


/* ==============================
   HERO
   ============================== */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center; gap: 64px;
  padding: 80px 0 72px;
  position: relative;
}
.hero > *:not(canvas.hero-particles) { position: relative; z-index: 1; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--bd-6); border-radius: 100px;
  padding: 5px 14px 5px 10px; font-size: 0.75rem; color: var(--fg-4); margin-bottom: 28px;
}
.piano-lockup { display: block; overflow: visible; }
.piano-lockup--nav   { width: 42px;  height: auto; }
.piano-lockup--footer{ width: 158px; height: auto; }
.piano-lockup__shell {
  fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 14;
  stroke: var(--lockup-fg);
}
.piano-lockup__rise  { fill: var(--logo-rise); }
.piano-lockup__fall  { fill: var(--logo-fall); }
.piano-lockup__meter { fill: var(--lockup-fg); }
.piano-lockup__rail  { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.piano-lockup__rail--rise { stroke: var(--logo-rise); stroke-width: 3; }
.piano-lockup__rail--fall { stroke: var(--logo-fall); stroke-width: 2.5; }
.piano-lockup__word  {
  fill: var(--lockup-fg);
  font-family: 'Outfit', sans-serif;
  font-size: 70px; font-weight: 900; letter-spacing: 0;
}
.hero__badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.hero__h1 { margin-bottom: 20px; word-break: keep-all; overflow-wrap: break-word; }
.hero__sub { font-size: 1rem; color: var(--fg-4); max-width: 500px; margin: 0 0 18px; line-height: 1.75; }
.hero__ctas { display: flex; align-items: center; gap: 16px; }
.hero-story {
  max-width: 560px;
  margin: 0 0 32px;
}
.hero-story__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.hero-story__label {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--fg-5);
}
.hero-story__controls {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.hero-story__btn {
  width: 34px;
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--bd-10);
  cursor: pointer;
  transition: width 0.2s ease, background-color 0.2s ease;
}
.hero-story__btn.active {
  width: 46px;
  background: rgba(22, 199, 132, 0.22);
  position: relative;
  overflow: hidden;
}
.hero-story__btn.active::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--green);
  border-radius: inherit;
  pointer-events: none;
}
.hero-story__btn.progressing::after {
  animation: hero-progress 6800ms linear forwards;
}
@keyframes hero-progress {
  from { width: 0; }
  to { width: 100%; }
}
.hero-story__viewport {
  position: relative;
  min-height: 286px;
  padding: 0;
}
.hero-story__item {
  display: none;
}
.hero-story__item.active {
  display: block;
  animation: hero-story-in 420ms ease both;
}
.hero-story__item h1,
.hero-story__item h2 {
  max-width: 520px;
  margin-bottom: 18px;
  color: var(--fg);
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.08;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.hero-story__item p {
  max-width: 460px;
  color: var(--fg-4);
  font-size: 0.96rem;
}
.hero-story__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 520px;
  padding-top: 18px;
  border-top: 1px solid var(--bd-8);
}
@keyframes hero-story-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero__figure {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 48px 32px; border: 1px solid var(--bd-3);
  border-radius: 16px; background: var(--bg-1);
}
.hero-art-carousel {
  position: relative;
  width: 100%;
}
.hero-art-carousel__item {
  display: none;
}
.hero-art-carousel__item.active {
  display: block;
  animation: hero-art-in 540ms ease both;
}
@keyframes hero-art-in {
  from { opacity: 0; transform: translateY(10px) scale(0.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Serious mode: drop the framed container so the particle field can breathe
   across the whole hero. The isometric SVG floats freely. */
html[data-art="serious"] .hero__figure {
  border: 0;
  background: transparent;
  padding: 0;
}
.iso-svg { width: 100%; max-width: 520px; }

/* Hero particle field — Serious mode only. Spans the whole hero section
   (behind both text and figure) so it reads as an ambient field, not a
   boxed-in artwork. */
canvas.hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms ease-out;
}
html[data-art="serious"] canvas.hero-particles { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  canvas.hero-particles { display: none !important; }
}

/* ==============================
   PIXEL ART MODE + PARALLAX
   ============================== */
html[data-art="serious"] .pixel-only { display: none !important; }
html[data-art="pixel"] .serious-art { display: none !important; }
html[data-art="pixel"] {
  --pixel-ink: #081225;
  --pixel-panel: #0D1B2D;
  --pixel-line: rgba(167, 213, 214, 0.24);
  --pixel-cyan: #57D5FF;
  --pixel-green: #16C784;
  --pixel-gold: #FFCF5A;
  --pixel-pink: #FF6F8B;
  --pixel-brass: #B98235;
}
html[data-art="pixel"] body {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(180deg, rgba(87,213,255,0.04), transparent 360px),
    var(--bg);
}
html[data-art="pixel"] .hero {
  min-height: 760px;
  padding-top: 112px;
  padding-bottom: 86px;
}
html[data-art="pixel"] .hero__badge {
  border-radius: 5px;
  background: rgba(87,213,255,0.06);
  box-shadow: 0 0 0 1px rgba(87,213,255,0.04), 0 0 28px rgba(87,213,255,0.08);
}
html[data-art="pixel"] .hero__h1 {
  text-shadow: 4px 4px 0 rgba(0,0,0,0.32);
}

html[data-art="pixel"] .hero-story__item h1 {
  text-shadow: 4px 4px 0 rgba(0,0,0,0.32);
}
html[data-art="pixel"] .hero__figure,
html[data-art="pixel"] .hiw__fig,
html[data-art="pixel"] .feature-card,
html[data-art="pixel"] .portfolio-card,
html[data-art="pixel"] .home-institution-card {
  border-radius: 8px;
}
html[data-art="pixel"] .hero__figure {
  padding: 0;
  border: 0;
  background: transparent;
}
html[data-art="pixel"] .hiw__fig {
  padding: 0;
  border: 0;
  background: transparent;
  gap: 0;
}
html[data-art="pixel"] .hiw__fig .fig-label {
  display: none;
}
.parallax-scene { --scroll-progress: 0; }
.parallax-layer {
  transform: translate3d(0, var(--parallax-y, 0), 0);
  will-change: transform;
}
.pixel-stage {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(167,213,214,0.22);
  border-radius: 8px;
  background: var(--pixel-ink, #081225);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 24px 70px rgba(0,0,0,0.28);
  image-rendering: pixelated;
}
.pixel-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 6px 6px,
    linear-gradient(180deg, rgba(255,255,255,0.035) 1px, transparent 1px) 0 0 / 6px 6px;
  mix-blend-mode: soft-light;
  opacity: 0.42;
}
.pixel-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 24%, rgba(87,213,255,0.16), transparent 30%),
    linear-gradient(180deg, transparent 0 78%, rgba(0,0,0,0.26));
  opacity: 0.8;
}
.pixel-stage__image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  image-rendering: pixelated;
  filter: saturate(1.06) contrast(1.04);
}
.pixel-stage__image--a { object-position: 58% center; }
.pixel-stage__image--b { object-position: center center; }
.pixel-stage__image--c { object-position: 18% center; }
.pixel-stage__image--d { object-position: 82% center; }
.pixel-stage__image--workflow {
  object-position: right center;
  transform: scale(1.2);
  transform-origin: right center;
}

/* Pull the garden / basis scenes farther outward visually so their core
   subjects (GOLD / ETF / SILVER / AI SEMI for garden, gauges for basis)
   land on the side opposite the text. Apply the shift to the stage
   container — not just the <img> — so the dynamics overlay (.pixel-
   basis-dynamics, vignette, etc.) tracks the artwork's gauges and
   labels instead of floating where the un-shifted image used to be.
   The image keeps its .parallax-layer y-axis parallax independently. */
html[data-art="pixel"] .section-showcase--garden .pixel-stage--garden {
  transform: translateX(-22%);
}
html[data-art="pixel"] .section-showcase--basis .pixel-stage--workshop {
  transform: translateX(22%);
}
.pixel-stage__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(7,18,35,0.5), transparent 32%),
    linear-gradient(90deg, rgba(4,10,21,0.56), transparent 38%),
    linear-gradient(180deg, rgba(4,10,21,0.24), transparent 38%, rgba(4,10,21,0.42));
}
.pixel-stage__layer {
  position: absolute;
  z-index: 6;
  pointer-events: none;
}
.hero-pixel-scene {
  inset: 0;
  display: none;
  font-family: 'Courier New', monospace;
}
.hero-pixel-note {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid rgba(255,207,90,0.48);
  border-radius: 4px;
  color: #FFF7D8;
  background: rgba(6,16,31,0.74);
  box-shadow: 0 0 18px rgba(255,207,90,0.18);
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
}
.hero-pixel-note--condition { right: 10%; top: 18%; }
.hero-pixel-note--price { left: 9%; top: 18%; }
.hero-pixel-note--plan { right: 12%; bottom: 18%; }
.hero-pixel-note--watch { left: 11%; bottom: 14%; }
.hero-pixel-cup {
  position: absolute;
  left: 19%;
  bottom: 19%;
  width: 28px;
  height: 22px;
  border: 3px solid #FFE0A8;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: rgba(255,207,90,0.24);
  animation: hero-cup-shake 2.8s ease-in-out infinite;
}
.hero-pixel-cup::after {
  content: "";
  position: absolute;
  right: -11px;
  top: 4px;
  width: 11px;
  height: 11px;
  border: 3px solid #FFE0A8;
  border-left: 0;
  border-radius: 0 8px 8px 0;
}
.hero-pixel-chart {
  position: absolute;
  right: 17%;
  top: 36%;
  width: 116px;
  height: 54px;
  background:
    linear-gradient(90deg, rgba(255,111,139,0.9) 0 12px, transparent 12px 20px, rgba(87,213,255,0.86) 20px 30px, transparent 30px 40px, rgba(255,111,139,0.72) 40px 50px, transparent 50px 60px, rgba(22,199,132,0.78) 60px 72px, transparent 72px 82px, rgba(255,207,90,0.84) 82px 96px, transparent 96px);
  clip-path: polygon(0 72%, 16% 48%, 30% 62%, 44% 28%, 58% 46%, 72% 18%, 100% 34%, 100% 100%, 0 100%);
  opacity: 0.84;
}
.hero-pixel-rain {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(110deg, transparent 0 18px, rgba(189,236,228,0.20) 18px 20px, transparent 20px 42px);
  opacity: 0.54;
  animation: hero-rain-fall 5.8s linear infinite;
}
.hero-pixel-save {
  position: absolute;
  right: 13%;
  bottom: 20%;
  min-width: 72px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(22,199,132,0.52);
  border-radius: 4px;
  color: #DFFBEF;
  background: rgba(22,199,132,0.18);
  box-shadow: 0 0 22px rgba(22,199,132,0.16);
  font-size: 0.66rem;
  font-weight: 800;
}
.hero-pixel-alert {
  position: absolute;
  width: 34px;
  height: 28px;
  border: 1px solid rgba(255,207,90,0.54);
  border-radius: 4px;
  background: rgba(255,111,139,0.24);
  box-shadow: 0 0 18px rgba(255,111,139,0.16);
  animation: hero-alert-float 4s ease-in-out infinite;
}
.hero-pixel-alert::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 7px;
  width: 16px;
  height: 12px;
  border-top: 3px solid rgba(255,247,216,0.84);
  border-bottom: 3px solid rgba(255,247,216,0.64);
}
.hero-pixel-alert--one { left: 13%; top: 24%; }
.hero-pixel-alert--two { left: 24%; top: 14%; animation-delay: 0.8s; }
.hero-pixel-path {
  position: absolute;
  left: 30%;
  right: 18%;
  bottom: 24%;
  height: 5px;
  background: linear-gradient(90deg, rgba(255,111,139,0.28), rgba(255,207,90,0.38), rgba(87,213,255,0.72));
  box-shadow: 0 0 24px rgba(87,213,255,0.20);
}
.hero-pixel-moon {
  position: absolute;
  right: 13%;
  top: 14%;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #FFF3B8;
  box-shadow: 0 0 34px rgba(255,243,184,0.22);
}
.hero-pixel-moon::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 4px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(6,16,31,0.84);
}
.hero-pixel-key-panel {
  position: absolute;
  left: 38%;
  bottom: 18%;
  width: 126px;
  height: 34px;
  border: 1px solid rgba(167,213,214,0.28);
  border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, #FFF4D7 0 14px, #111B2C 14px 18px, #FFF4D7 18px 31px);
  box-shadow: 0 0 28px rgba(87,213,255,0.16);
}
@keyframes hero-cup-shake {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  40% { transform: translate3d(1px, -1px, 0) rotate(-2deg); }
  55% { transform: translate3d(-1px, 0, 0) rotate(2deg); }
}
@keyframes hero-rain-fall {
  from { transform: translateY(-24px); }
  to { transform: translateY(24px); }
}
@keyframes hero-alert-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.pixel-stage--hero {
  max-width: 560px;
  min-height: 315px;
}
.pixel-stage--wide {
  min-height: 360px;
}
.pixel-stage--piano {
  box-shadow:
    0 0 0 1px rgba(87,213,255,0.12),
    0 30px 90px rgba(0,0,0,0.34),
    0 0 70px rgba(87,213,255,0.12);
}
.pixel-stage__layer--notes {
  inset: 0;
}
.pixel-note {
  position: absolute;
  width: 8px;
  height: 14px;
  border-radius: 2px 2px 1px 1px;
  background: var(--pixel-cyan);
  box-shadow: 0 0 14px currentColor;
  color: var(--pixel-cyan);
  animation: pixel-note-rise 4.8s ease-in-out infinite;
}
.pixel-note::before {
  content: "";
  position: absolute;
  right: -5px;
  top: -8px;
  width: 4px;
  height: 18px;
  background: currentColor;
}
.pixel-note--cyan { left: 45%; bottom: 36%; color: var(--pixel-cyan); animation-delay: 0s; }
.pixel-note--gold { left: 55%; bottom: 32%; color: var(--pixel-gold); animation-delay: 0.8s; }
.pixel-note--pink { left: 72%; bottom: 34%; color: var(--pixel-pink); animation-delay: 1.6s; }
.pixel-note--green { left: 36%; bottom: 30%; color: var(--pixel-green); animation-delay: 2.4s; }
.pixel-note--blue { left: 63%; bottom: 44%; color: #7BD9FF; animation-delay: 3.2s; }
@keyframes pixel-note-rise {
  0% { transform: translate3d(0, 12px, 0); opacity: 0; }
  18%, 76% { opacity: 1; }
  100% { transform: translate3d(12px, -96px, 0); opacity: 0; }
}
.pixel-stage__layer--hero-tickers {
  left: 12%;
  right: 8%;
  bottom: 8%;
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.pixel-stage__layer--hero-tickers span,
.pixel-asset-stream span,
.pixel-proof-row span,
.pixel-conveyor-token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(167,213,214,0.32);
  border-radius: 4px;
  background: rgba(8,18,37,0.72);
  color: #DDF9F3;
  font-family: 'Courier New', monospace;
  font-size: 0.66rem;
  font-weight: 800;
  box-shadow: 0 0 14px rgba(87,213,255,0.14);
}
.pixel-stage__layer--signal {
  left: 40%;
  right: 16%;
  top: 32%;
  height: 58px;
}
.pixel-stage__layer--signal span {
  position: absolute;
  left: 0;
  width: 78%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pixel-cyan), var(--pixel-gold), transparent);
  box-shadow: 0 0 14px rgba(87,213,255,0.55);
  transform-origin: left center;
  animation: pixel-signal-sweep 2.8s linear infinite;
}
.pixel-stage__layer--signal span:nth-child(1) { top: 8px; transform: rotate(-6deg); }
.pixel-stage__layer--signal span:nth-child(2) { top: 28px; transform: rotate(3deg); animation-delay: 0.45s; }
.pixel-stage__layer--signal span:nth-child(3) { top: 48px; transform: rotate(-2deg); animation-delay: 0.9s; }
@keyframes pixel-signal-sweep {
  0% { clip-path: inset(0 100% 0 0); opacity: 0.2; }
  38%, 82% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 100%); opacity: 0.2; }
}

/* ==============================
   TRUST BOUNDARY
   ============================== */
.trust-boundary {
  padding: 34px 0;
  background: var(--bg);
}
.trust-boundary__inner {
  display: grid;
  grid-template-columns: minmax(220px, 0.82fr) minmax(0, 1.18fr);
  gap: 24px;
  align-items: center;
}
.trust-boundary__intro h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  color: var(--fg);
}
.trust-boundary__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.trust-boundary__item {
  min-height: 94px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--bd-5);
  border-radius: 8px;
  background: var(--hover-bg);
}
.trust-boundary__item svg {
  width: 20px;
  height: 20px;
  color: var(--green);
}
.trust-boundary__item span {
  color: var(--fg);
  font-size: 0.88rem;
  line-height: 1.35;
  word-break: keep-all;
}

.section-showcase {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: 34px;
  align-items: center;
  margin: -18px 0 46px;
}
.section-showcase--garden {
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
}
.section-showcase--basis {
  margin: 0;
}
.section-showcase__copy {
  position: relative;
  z-index: 4;
}
.section-showcase__copy h3 {
  margin-bottom: 12px;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.55rem, 2.2vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.section-showcase__copy p {
  max-width: 390px;
  color: var(--fg-4);
  font-size: 0.95rem;
}
.pixel-route-layer { inset: 0; }
.pixel-route {
  position: absolute;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--pixel-cyan) 0 8px, transparent 8px 15px);
  filter: drop-shadow(0 0 8px rgba(87,213,255,0.8));
  opacity: 0.82;
  animation: pixel-route-flow 1.4s linear infinite;
}
.pixel-route--one { left: 14%; top: 54%; width: 64%; transform: rotate(-10deg); }
.pixel-route--two { left: 30%; top: 36%; width: 50%; transform: rotate(11deg); animation-delay: 0.2s; }
.pixel-route--three { left: 44%; top: 68%; width: 38%; transform: rotate(-1deg); animation-delay: 0.4s; }
@keyframes pixel-route-flow { to { background-position-x: 23px; } }
.pixel-route-pulse {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--pixel-cyan);
  background: rgba(87,213,255,0.34);
  box-shadow: 0 0 16px rgba(87,213,255,0.9);
  animation: pixel-route-pulse 4.2s linear infinite;
}
.pixel-route-pulse--one { left: 14%; top: 50%; }
.pixel-route-pulse--two { left: 36%; top: 33%; animation-delay: 1.2s; }
.pixel-route-pulse--three { left: 52%; top: 65%; animation-delay: 2.4s; }
@keyframes pixel-route-pulse {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  15%, 78% { opacity: 1; }
  100% { transform: translate3d(220px, -26px, 0); opacity: 0; }
}
.pixel-asset-stream {
  left: 8%;
  right: 8%;
  bottom: 8%;
  display: flex;
  justify-content: space-between;
}
.pixel-asset-stream span {
  animation: pixel-token-breathe 2.4s ease-in-out infinite;
}
.pixel-asset-stream span:nth-child(2n) { animation-delay: 0.35s; }
.pixel-asset-stream span:nth-child(3n) { animation-delay: 0.7s; }
@keyframes pixel-token-breathe {
  0%,100% { transform: translateY(0); box-shadow: 0 0 10px rgba(87,213,255,0.12); }
  50% { transform: translateY(-5px); box-shadow: 0 0 20px rgba(255,207,90,0.28); }
}
.pixel-garden-flow {
  inset: 0;
}
.pixel-garden-flow span {
  position: absolute;
  height: 4px;
  border-radius: 0;
  background: repeating-linear-gradient(90deg, rgba(87,213,255,0.2) 0 9px, rgba(87,213,255,0.95) 9px 14px, transparent 14px 22px);
  box-shadow: 0 0 12px rgba(87,213,255,0.6);
  animation: pixel-garden-water 1.8s linear infinite;
}
.pixel-garden-flow span:nth-child(1) { left: 13%; top: 72%; width: 56%; transform: rotate(-5deg); }
.pixel-garden-flow span:nth-child(2) { left: 36%; top: 50%; width: 40%; transform: rotate(14deg); animation-delay: 0.4s; }
.pixel-garden-flow span:nth-child(3) { left: 44%; top: 77%; width: 34%; transform: rotate(-18deg); animation-delay: 0.8s; }
@keyframes pixel-garden-water { to { background-position-x: 44px; } }
.pixel-fireflies {
  inset: 0;
}
.pixel-fireflies span {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--pixel-gold);
  box-shadow: 0 0 14px rgba(255,207,90,0.9);
  animation: pixel-firefly 5s ease-in-out infinite;
}
.pixel-fireflies span:nth-child(1) { left: 20%; top: 32%; }
.pixel-fireflies span:nth-child(2) { left: 44%; top: 24%; animation-delay: 0.8s; }
.pixel-fireflies span:nth-child(3) { left: 72%; top: 30%; animation-delay: 1.6s; }
.pixel-fireflies span:nth-child(4) { left: 58%; top: 58%; animation-delay: 2.4s; }
.pixel-fireflies span:nth-child(5) { left: 32%; top: 66%; animation-delay: 3.2s; }
.pixel-fireflies span:nth-child(6) { left: 80%; top: 68%; animation-delay: 4s; }
@keyframes pixel-firefly {
  0%,100% { transform: translate3d(0,0,0); opacity: 0.35; }
  35% { transform: translate3d(12px,-18px,0); opacity: 1; }
  70% { transform: translate3d(-8px,-8px,0); opacity: 0.75; }
}
.basis-edge-section {
  background:
    linear-gradient(180deg, transparent, rgba(87,213,255,0.04), transparent);
}
.pixel-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.pixel-proof-row span {
  min-width: auto;
  color: #FFEFBC;
}
.pixel-conveyors {
  inset: 0;
}
.pixel-conveyor-token {
  position: absolute;
  min-width: 52px;
  color: #DDF9F3;
  animation: pixel-conveyor-top 5.8s linear infinite;
}
.pixel-conveyor-token--top { top: 18%; left: 17%; }
.pixel-conveyor-token--top.pixel-conveyor-token--b { animation-delay: 2.6s; }
.pixel-conveyor-token--bottom {
  left: 60%;
  bottom: 16%;
  color: #FFEFBC;
  animation-name: pixel-conveyor-bottom;
}
.pixel-conveyor-token--bottom.pixel-conveyor-token--b { animation-delay: 2.6s; }
@keyframes pixel-conveyor-top {
  0% { transform: translateX(-40px); opacity: 0; }
  12%, 84% { opacity: 1; }
  100% { transform: translateX(300px); opacity: 0; }
}
@keyframes pixel-conveyor-bottom {
  0% { transform: translateX(220px); opacity: 0; }
  12%, 84% { opacity: 1; }
  100% { transform: translateX(-210px); opacity: 0; }
}
.pixel-gauge {
  left: 50%;
  top: 48%;
  width: 82px;
  height: 82px;
  margin-left: -41px;
  margin-top: -41px;
  border: 2px solid rgba(167,213,214,0.38);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8,18,37,0.84) 0 45%, rgba(87,213,255,0.12) 46% 100%);
  box-shadow: 0 0 22px rgba(87,213,255,0.2);
}
.pixel-gauge span {
  position: absolute;
  left: 38px;
  top: 14px;
  width: 4px;
  height: 34px;
  background: var(--pixel-gold);
  transform-origin: 50% 100%;
  animation: pixel-gauge-needle 3.6s ease-in-out infinite;
}
@keyframes pixel-gauge-needle {
  0%,100% { transform: rotate(-32deg); }
  50% { transform: rotate(34deg); }
}

/* ---- Market ticker marquee ---- */
.market-marquee {
  padding: 0 0 64px;
}
.market-marquee__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.market-marquee__lead,
.market-marquee__note {
  font-size: 0.76rem;
  color: var(--fg-5);
}
.market-marquee__lead { color: var(--fg-4); }
.market-marquee__viewport {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bd-4);
  border-radius: 8px;
  background:
    linear-gradient(90deg, var(--bg), transparent 14%, transparent 86%, var(--bg)),
    linear-gradient(180deg, var(--hover-bg), transparent);
}
.market-marquee__viewport::before,
.market-marquee__viewport::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  z-index: 2;
  width: 72px;
  pointer-events: none;
}
.market-marquee__viewport::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg), transparent);
}
.market-marquee__viewport::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg), transparent);
}
.market-marquee__track {
  display: flex;
  width: max-content;
  padding: 12px 0;
  animation: market-marquee 86s linear infinite;
  will-change: transform;
}
.market-marquee__viewport:hover .market-marquee__track {
  animation-play-state: paused;
}
.market-marquee__group {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
  padding-right: 10px;
}
.market-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 168px;
  min-height: 58px;
  padding: 9px 13px 9px 9px;
  border: 1px solid var(--bd-5);
  border-radius: 8px;
  background: var(--bg-1);
  box-shadow: inset 0 1px 0 var(--bd-2);
}
.market-badge__text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.15;
}
.market-badge__text strong {
  color: var(--fg);
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  font-weight: 800;
}
.market-badge__text em {
  margin-top: 3px;
  color: var(--fg-5);
  font-size: 0.68rem;
  font-style: normal;
  white-space: nowrap;
}
.market-icon {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  overflow: hidden;
  border: 1px solid var(--bd-6);
  border-radius: 5px;
  background: var(--bg);
  image-rendering: pixelated;
}
.market-icon::before,
.market-icon::after {
  content: "";
  position: absolute;
  image-rendering: pixelated;
}
.market-icon--chip {
  background:
    linear-gradient(#57D5FF 0 0) 7px 7px / 4px 4px no-repeat,
    linear-gradient(#16C784 0 0) 23px 7px / 4px 4px no-repeat,
    linear-gradient(#16C784 0 0) 7px 23px / 4px 4px no-repeat,
    linear-gradient(#57D5FF 0 0) 23px 23px / 4px 4px no-repeat,
    var(--bg);
}
.market-icon--chip::before {
  inset: 11px;
  background: #16C784;
  box-shadow: 0 0 0 3px rgba(87,213,255,0.28);
}
.market-icon--network {
  background:
    linear-gradient(90deg, transparent 46%, rgba(87,213,255,0.65) 46% 54%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(87,213,255,0.65) 46% 54%, transparent 54%),
    var(--bg);
}
.market-icon--network::before {
  width: 6px; height: 6px; left: 6px; top: 6px;
  background: #57D5FF;
  box-shadow: 16px 4px 0 #16C784, 9px 17px 0 #FF6F8B;
}
.market-icon--search::before {
  width: 14px; height: 14px; left: 7px; top: 7px;
  border: 3px solid #57D5FF;
  border-radius: 4px;
}
.market-icon--search::after {
  width: 10px; height: 4px; left: 19px; top: 22px;
  background: #16C784;
  transform: rotate(45deg);
  transform-origin: left center;
}
.market-icon--ev::before {
  left: 12px; top: 5px;
  width: 10px; height: 24px;
  background: #FFCF5A;
  clip-path: polygon(45% 0, 100% 0, 68% 38%, 100% 38%, 36% 100%, 52% 55%, 16% 55%);
}
.market-icon--basket {
  background:
    linear-gradient(#57D5FF 0 0) 7px 18px / 4px 9px no-repeat,
    linear-gradient(#16C784 0 0) 15px 13px / 4px 14px no-repeat,
    linear-gradient(#FFCF5A 0 0) 23px 8px / 4px 19px no-repeat,
    var(--bg);
}
.market-icon--basket::before {
  left: 5px; right: 5px; bottom: 5px;
  height: 2px;
  background: var(--fg-5);
}
.market-icon--gold::before {
  left: 7px; top: 10px;
  width: 20px; height: 13px;
  background: linear-gradient(135deg, #FFF0A8 0 30%, #D6A742 30% 70%, #8A641B 70%);
  transform: skewX(-12deg);
}
.market-icon--silver::before {
  left: 8px; top: 8px;
  width: 18px; height: 18px;
  border-radius: 4px;
  background: linear-gradient(135deg, #F3F7FA 0 30%, #AEB8C2 30% 70%, #6F7A84 70%);
}
.market-icon--platinum::before {
  left: 7px; top: 8px;
  width: 20px; height: 16px;
  background: linear-gradient(135deg, #F7FBFF 0 26%, #B9CADB 26% 62%, #7D8EA0 62%);
  box-shadow: inset -4px -4px 0 rgba(0,0,0,0.12);
}
.market-icon--palladium::before {
  left: 8px; top: 7px;
  width: 18px; height: 18px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, transparent 42%, rgba(255,255,255,0.55) 42% 58%, transparent 58%),
    linear-gradient(135deg, #D7E6F3 0 34%, #9EB5C7 34% 70%, #607486 70%);
}
.market-icon--oil::before {
  left: 10px; top: 7px;
  width: 14px; height: 20px;
  border: 3px solid #111;
  border-color: #EA3943 #A12A32 #A12A32 #EA3943;
  background:
    linear-gradient(#FFCF5A 0 0) 0 5px / 100% 3px no-repeat,
    #1B1B1B;
}
.market-icon--region {
  background:
    linear-gradient(#57D5FF 0 0) 6px 8px / 22px 4px no-repeat,
    linear-gradient(#16C784 0 0) 8px 15px / 18px 4px no-repeat,
    linear-gradient(#FF6F8B 0 0) 11px 22px / 12px 4px no-repeat,
    var(--bg);
}
.market-icon--region::before {
  left: 5px; top: 6px;
  width: 24px; height: 22px;
  border: 2px solid var(--bd-8);
}
.market-icon--crypto::before {
  left: 8px; top: 8px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background:
    linear-gradient(#0C0C0C 0 0) 7px 4px / 4px 10px no-repeat,
    linear-gradient(#0C0C0C 0 0) 5px 7px / 8px 3px no-repeat,
    linear-gradient(#0C0C0C 0 0) 5px 12px / 8px 3px no-repeat,
    #FFCF5A;
}
.market-icon--device::before {
  left: 10px; top: 5px;
  width: 14px; height: 24px;
  border: 3px solid #57D5FF;
  border-radius: 4px;
}
.market-icon--device::after {
  left: 15px; bottom: 7px;
  width: 4px; height: 2px;
  background: #16C784;
}
.market-icon--cloud::before {
  left: 6px; top: 14px;
  width: 22px; height: 10px;
  background: #57D5FF;
  border-radius: 4px;
}
.market-icon--cloud::after {
  left: 10px; top: 8px;
  width: 10px; height: 10px;
  background: #16C784;
  border-radius: 4px 4px 0 0;
  box-shadow: 7px 3px 0 #57D5FF;
}
.market-icon--commerce::before {
  left: 8px; top: 9px;
  width: 18px; height: 16px;
  background:
    linear-gradient(#FFCF5A 0 0) 0 0 / 100% 4px no-repeat,
    #D6A742;
}
.market-icon--commerce::after {
  left: 10px; top: 16px;
  width: 14px; height: 3px;
  background: #0C0C0C;
  transform: rotate(-10deg);
}
@keyframes market-marquee {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .market-marquee__track {
    animation: none;
    transform: none;
  }
}
.iso-face-top   { fill: var(--iso-t); }
.iso-face-left  { fill: var(--iso-l); }
.iso-face-right { fill: var(--iso-r); }
.iso-panel      { fill: var(--iso-t); }
.iso-panel-accent { fill: var(--iso-a); }
.iso-key        { fill: var(--iso-k); }
.iso-key-border { stroke: var(--iso-bd); }
.iso-layer      { fill: var(--iso-r); }
.iso-layer-side { fill: var(--iso-ls); }
.iso-grid       { stroke: var(--iso-grid) !important; }
.iso-divider    { stroke: var(--iso-div) !important; }
.iso-shadow     { fill: var(--iso-shad); }
.iso-cap        { fill: var(--iso-cap); }


/* ==============================
   ISO ANIMATIONS
   ============================== */
@keyframes layer0-open { 0%,100%{transform:translateY(0)} 50%{transform:translateY(12px)} }
@keyframes layer1-open { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }
@keyframes layer2-open { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes layer3-open { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes sphere-lift  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
@keyframes cube-bob     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes card-fan     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

.fig01-l0 { animation: layer0-open 5s ease-in-out infinite; }
.fig01-l1 { animation: layer1-open 5s ease-in-out infinite; }
.fig01-l2 { animation: layer2-open 5s ease-in-out infinite; }
.fig01-l3 { animation: layer3-open 5s ease-in-out infinite; }
.fig01-sp { animation: sphere-lift  5s ease-in-out infinite; }
.fig02-ca { animation: cube-bob 3.4s ease-in-out infinite 0s; }
.fig02-cb { animation: cube-bob 3.4s ease-in-out infinite 0.9s; }
.fig02-cc { animation: cube-bob 3.4s ease-in-out infinite 1.8s; }
.fig03-c0 { animation: card-fan 3.2s ease-in-out infinite 0s; }
.fig03-c1 { animation: card-fan 3.2s ease-in-out infinite 0.18s; }
.fig03-c2 { animation: card-fan 3.2s ease-in-out infinite 0.36s; }
.fig03-c3 { animation: card-fan 3.2s ease-in-out infinite 0.54s; }
.fig03-c4 { animation: card-fan 3.2s ease-in-out infinite 0.72s; }
.fig03-c5 { animation: card-fan 3.2s ease-in-out infinite 0.90s; }
.fig03-c6 { animation: card-fan 3.2s ease-in-out infinite 1.08s; }
.fig03-c7 { animation: card-fan 3.2s ease-in-out infinite 1.26s; }

.fig03-setup { max-width: 560px; overflow: visible; }
.fig03-layer, .fig03-key, .fig03-bar, .fig03-lock {
  transform-box: fill-box; transform-origin: center;
}
.fig03-layer--api     { animation: setup-api-layer    5.6s ease-in-out infinite; }
.fig03-layer--params  { animation: setup-param-layer  5.6s ease-in-out infinite; }
.fig03-layer--monitor { animation: setup-monitor-layer 5.6s ease-in-out infinite; }
.fig03-shadow  { animation: setup-shadow   5.6s ease-in-out infinite; }
.fig03-api-key { stroke-dasharray: 260; animation: setup-line-draw 5.6s ease-in-out infinite; }
.fig03-lock    { animation: setup-lock     5.6s ease-in-out infinite; }
.fig03-key--rise { animation: setup-key-rise 2.4s ease-in-out infinite; }
.fig03-key--fall { animation: setup-key-fall 2.4s ease-in-out infinite 0.25s; }
.fig03-sliders { stroke-dasharray: 210; animation: setup-line-draw 5.6s ease-in-out infinite 0.55s; }
.fig03-ratio   { stroke-dasharray: 230; animation: setup-line-draw 5.6s ease-in-out infinite 0.85s; }
.fig03-bar--a  { animation: setup-bar-a 2.2s ease-in-out infinite; }
.fig03-bar--b  { animation: setup-bar-b 2.2s ease-in-out infinite 0.2s; }
.fig03-profit  { stroke-dasharray: 150; animation: setup-profit 5.6s ease-in-out infinite 1.2s; }

@keyframes setup-api-layer    { 0%,100%{transform:translateY(-4px);opacity:0.9}  36%,72%{transform:translateY(-13px);opacity:1} }
@keyframes setup-param-layer  { 0%,100%{transform:translateY(0);opacity:0.86}    36%,72%{transform:translateY(-2px);opacity:1} }
@keyframes setup-monitor-layer{ 0%,100%{transform:translateY(4px);opacity:0.82}  36%,72%{transform:translateY(9px);opacity:1} }
@keyframes setup-shadow        { 0%,100%{opacity:0.45;transform:scaleX(0.92);transform-origin:center} 36%,72%{opacity:0.7;transform:scaleX(1);transform-origin:center} }
@keyframes setup-line-draw     { 0%,14%{stroke-dashoffset:260;opacity:0.25} 34%,78%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:0;opacity:0.8} }
@keyframes setup-lock          { 0%,22%,100%{transform:translateY(0);opacity:0.7} 34%,78%{transform:translateY(-4px);opacity:1} }
@keyframes setup-key-rise      { 0%,100%{transform:translateY(4px);opacity:0.75}  50%{transform:translateY(-5px);opacity:1} }
@keyframes setup-key-fall      { 0%,100%{transform:translateY(-4px);opacity:0.75} 50%{transform:translateY(5px);opacity:1} }
@keyframes setup-bar-a         { 0%,100%{transform:scaleY(0.72);opacity:0.82} 50%{transform:scaleY(1.08);opacity:1} }
@keyframes setup-bar-b         { 0%,100%{transform:scaleY(1.05);opacity:0.82} 50%{transform:scaleY(0.72);opacity:1} }
@keyframes setup-profit        { 0%,30%{stroke-dashoffset:150;opacity:0} 54%,82%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:0;opacity:0} }

@media (prefers-reduced-motion: reduce) {
  .piano-lockup *, .fig03-setup * { animation: none !important; }
}


/* ==============================
   BASIS HEDGE ARTICLE GRAPHICS
   ============================== */
.bh-hero-graphic {
  margin: 36px auto 8px;
  max-width: 920px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #1E232B;
  background: #080A0D;
}
.bh-hero-svg { width: 100%; display: block; }
.bh-hero-caption {
  margin: 0; padding: 14px 24px 18px;
  background: #080A0D; color: #EDEDED;
  font-size: 0.95rem; font-weight: 500; text-align: center;
  border-top: 1px solid #1E232B;
  font-family: 'Inter', sans-serif;
}

.bh-section-graphic { margin: 18px 0 24px; max-width: 480px; }
.bh-section-graphic--wide { max-width: none; }
.bh-section-svg { width: 100%; display: block; border-radius: 8px; overflow: visible; }

@keyframes bh-flow-dash { to { stroke-dashoffset: -24; } }
@keyframes bh-pulse-soft { 0%,100% { opacity: 0.78; } 50% { opacity: 1; } }
@keyframes bh-pulse-strong { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes bh-bounce-up   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes bh-bounce-down { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes bh-clock-tick  { to { transform: rotate(360deg); } }
@keyframes bh-bldg-rise   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes bh-bar-grow    { 0%,100% { transform: scaleY(0.92); } 50% { transform: scaleY(1.05); } }
@keyframes bh-neutral-long-shift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes bh-neutral-short-shift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes bh-neutral-flow-dash { to { stroke-dashoffset: -28; } }
@keyframes bh-engine-pulse { 0%,100% { opacity: 0.86; transform: scale(0.98); } 50% { opacity: 1; transform: scale(1); } }
@keyframes bh-node-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes bh-manual-clock-spin { to { transform: rotate(360deg); } }
@keyframes bh-manual-slide { 0%,100% { transform: translateX(-8px); } 50% { transform: translateX(10px); } }
@keyframes bh-manual-long-drift { 0%,100% { transform: scaleY(0.82); } 50% { transform: scaleY(1.12); } }
@keyframes bh-manual-short-drift { 0%,100% { transform: scaleY(1.1); } 50% { transform: scaleY(0.76); } }
@keyframes bh-manual-alert-pop { 0%,100% { opacity: 0.58; transform: translateX(0); } 50% { opacity: 0.9; transform: translateX(-3px); } }

.bh-fee-flow, .bh-flow-line { animation: bh-flow-dash 1.5s linear infinite; }
.bh-zero-label { animation: bh-pulse-soft 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.bh-long-label { animation: bh-bounce-up 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.bh-short-label { animation: bh-bounce-down 2.4s ease-in-out infinite 0.6s; transform-box: fill-box; transform-origin: center; }
.bh-bars-green-front, .bh-bars-green-depth, .bh-bars-green-apex {
  animation: bh-bar-grow 3.2s ease-in-out infinite;
  transform-box: fill-box; transform-origin: bottom;
}
.bh-bars-red-front, .bh-bars-red-depth {
  animation: bh-bar-grow 3.2s ease-in-out infinite 1.6s;
  transform-box: fill-box; transform-origin: top;
}

.bh-col-long { animation: bh-bounce-up 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.bh-col-short { animation: bh-bounce-down 2.6s ease-in-out infinite 1.3s; transform-box: fill-box; transform-origin: center; }
.bh-pivot { animation: bh-pulse-soft 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.bh-clock-hands { animation: bh-clock-tick 8s linear infinite; transform-origin: 170px 125px; }
.bh-profit-bar { animation: bh-pulse-soft 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

.bh-bldg-1 { animation: bh-bldg-rise 3s ease-in-out infinite 0s; transform-box: fill-box; transform-origin: center; }
.bh-bldg-2 { animation: bh-bldg-rise 3s ease-in-out infinite 0.3s; transform-box: fill-box; transform-origin: center; }
.bh-bldg-3 { animation: bh-bldg-rise 3s ease-in-out infinite 0.6s; transform-box: fill-box; transform-origin: center; }
.bh-neutral-long { animation: bh-neutral-long-shift 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.bh-neutral-short { animation: bh-neutral-short-shift 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.bh-neutral-pivot, .bh-neutral-net { animation: bh-pulse-soft 2.3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.bh-neutral-flow, .bh-network-link path { animation: bh-neutral-flow-dash 1.7s linear infinite; }
.bh-institution-node { animation: bh-node-float 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.bh-institution-node-b { animation-delay: 0.25s; }
.bh-institution-node-c { animation-delay: 0.5s; }
.bh-hedge-engine { animation: bh-engine-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

.bh-manual-clock-hand { animation: bh-manual-clock-spin 6s linear infinite; transform-origin: 92px 112px; }
.bh-manual-knob { animation: bh-manual-slide 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.bh-manual-long-bar { animation: bh-manual-long-drift 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
.bh-manual-short-bar { animation: bh-manual-short-drift 2.8s ease-in-out infinite 0.35s; transform-box: fill-box; transform-origin: bottom; }
.bh-manual-alert { animation: bh-manual-alert-pop 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.bh-manual-alert-b { animation-delay: 0.35s; }
.bh-manual-alert-c { animation-delay: 0.7s; }
.bh-manual-stress { animation: bh-flow-dash 1.35s linear infinite; }

@media (max-width: 700px) {
  .bh-section-graphic { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bh-fee-flow, .bh-flow-line, .bh-zero-label, .bh-long-label, .bh-short-label,
  .bh-bars-green-front, .bh-bars-green-depth, .bh-bars-green-apex,
  .bh-bars-red-front, .bh-bars-red-depth,
  .bh-col-long, .bh-col-short, .bh-pivot, .bh-clock-hands, .bh-profit-bar,
  .bh-bldg-1, .bh-bldg-2, .bh-bldg-3,
  .bh-neutral-long, .bh-neutral-short, .bh-neutral-pivot, .bh-neutral-net,
  .bh-neutral-flow, .bh-network-link path, .bh-institution-node, .bh-hedge-engine,
  .bh-manual-clock-hand, .bh-manual-knob, .bh-manual-long-bar, .bh-manual-short-bar,
  .bh-manual-alert, .bh-manual-stress {
    animation: none !important;
  }
}


/* ==============================
   FEATURES 3-col
   ============================== */
.features-intro { text-align: center; margin-bottom: 64px; }
.features-intro h2 { margin-bottom: 12px; }
.features-intro p { max-width: 480px; margin: 0 auto; }

.features-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  border: 1px solid var(--bd-4); border-radius: 14px; overflow: hidden;
}
.feature-card {
  padding: 40px 32px; border-right: 1px solid var(--bd-4);
  display: flex; flex-direction: column; gap: 14px; transition: background 0.2s;
}
.feature-card:last-child { border-right: none; }
.feature-card:hover { background: var(--hover-bg); }
.feature-card__num { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; color: var(--fg-6); font-family: 'Courier New', monospace; }
.feature-card h3 { color: var(--fg); font-size: 1rem; }
.feature-card p { font-size: 0.875rem; color: var(--fg-4); }
.feature-card__note {
  margin-top: auto; font-size: 0.75rem; color: var(--fg-6);
  border: 1px solid var(--bd-3); border-radius: 5px;
  padding: 6px 10px; width: fit-content;
}

.pixel-feature-art {
  position: relative;
  width: 100%;
  height: 165px;
  margin-bottom: 8px;
  overflow: hidden;
  border: 1px solid rgba(87,213,255,0.16);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(87,213,255,0.08) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(180deg, rgba(255,207,90,0.06) 1px, transparent 1px) 0 0 / 12px 12px,
    radial-gradient(circle at 74% 22%, rgba(87,213,255,0.18), transparent 34%),
    rgba(6,16,31,0.64);
  image-rendering: pixelated;
}
.pixel-feature-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0 48%, rgba(0,0,0,0.18) 50%, transparent 52%);
  background-size: 100% 6px;
  opacity: 0.38;
}
.pixel-feature-art__label {
  position: absolute;
  left: 14px;
  top: 12px;
  z-index: 2;
  color: rgba(221,249,243,0.58);
  font-family: 'Courier New', monospace;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.pixel-gate-scene,
.pixel-balance-scene,
.pixel-linked-scene {
  position: absolute;
  inset: 34px 14px 16px;
}
.pixel-signal {
  position: absolute;
  height: 14px;
  background: #DDEFF0;
  box-shadow: 0 0 0 3px rgba(221,239,240,0.08), 0 0 18px rgba(87,213,255,0.28);
}
.pixel-signal--left {
  left: 9%;
  top: 52%;
  width: 56px;
  animation: pixel-signal-left 2.2s steps(6) infinite;
}
.pixel-signal--pass {
  left: 57%;
  top: 52%;
  width: 78px;
  background: #32E6B8;
  animation: pixel-signal-pass 2.2s steps(6) infinite;
}
.pixel-signal--blocked {
  left: 12%;
  top: 29%;
  width: 42px;
  background: #EA3943;
  opacity: 0.54;
}
.pixel-gate {
  position: absolute;
  left: 43%;
  top: 29%;
  width: 58px;
  height: 58px;
  border: 4px solid #32E6B8;
  background: rgba(50,230,184,0.08);
  box-shadow: 0 0 24px rgba(50,230,184,0.38), inset 0 0 0 4px rgba(255,255,255,0.08);
  animation: pixel-gate-pulse 2.2s steps(2) infinite;
}
.pixel-check {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #FFCF5A;
  box-shadow: 0 0 12px rgba(255,207,90,0.42);
}
.pixel-check--one { left: 45%; top: 18%; animation: pixel-check-blink 2.2s steps(1) infinite; }
.pixel-check--two { left: 52%; top: 18%; animation: pixel-check-blink 2.2s steps(1) infinite 0.22s; }
.pixel-check--three { left: 59%; top: 18%; animation: pixel-check-blink 2.2s steps(1) infinite 0.44s; }

.pixel-balance-pan {
  position: absolute;
  bottom: 42px;
  width: 82px;
  height: 34px;
  border: 3px solid currentColor;
  background: rgba(8,23,43,0.78);
  box-shadow: 0 0 18px currentColor;
}
.pixel-balance-pan--long {
  left: 18%;
  color: #32E6B8;
  animation: pixel-pan-long 3s steps(5) infinite;
}
.pixel-balance-pan--short {
  right: 18%;
  color: #EA3943;
  animation: pixel-pan-short 3s steps(5) infinite;
}
.pixel-balance-beam {
  position: absolute;
  left: 23%;
  right: 23%;
  bottom: 58px;
  height: 6px;
  background: #DDEFF0;
  box-shadow: 0 0 18px rgba(221,239,240,0.26);
  animation: pixel-balance-beam 3s steps(5) infinite;
}
.pixel-balance-center {
  position: absolute;
  left: calc(50% - 7px);
  bottom: 34px;
  width: 14px;
  height: 56px;
  background: #57D5FF;
  box-shadow: 0 0 18px rgba(87,213,255,0.45);
}
.pixel-ratio-line {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 28px;
  height: 4px;
  background: repeating-linear-gradient(90deg, #FFCF5A 0 12px, transparent 12px 20px);
  box-shadow: 0 0 16px rgba(255,207,90,0.32);
  animation: pixel-ratio-flow 1.4s steps(6) infinite;
}
.pixel-correction-dot {
  position: absolute;
  top: 22px;
  width: 14px;
  height: 14px;
  background: #57D5FF;
  box-shadow: 0 0 18px rgba(87,213,255,0.62);
  animation: pixel-correction-run 3s steps(8) infinite;
}
.pixel-correction-dot--one { left: 28%; }
.pixel-correction-dot--two { left: 62%; animation-delay: 0.35s; }

.pixel-linked-grid {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 26px;
  height: 62px;
  border: 3px solid rgba(221,239,240,0.52);
  background:
    linear-gradient(90deg, transparent 48%, rgba(221,239,240,0.22) 49% 51%, transparent 52%),
    linear-gradient(180deg, transparent 48%, rgba(221,239,240,0.22) 49% 51%, transparent 52%),
    rgba(8,23,43,0.72);
  box-shadow: 0 0 22px rgba(87,213,255,0.14);
}
.pixel-linked-bar {
  position: absolute;
  bottom: 54px;
  width: 18px;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
  animation: pixel-linked-bars 2.8s steps(5) infinite;
}
.pixel-linked-bar--g1 { left: 18%; height: 32px; color: #32E6B8; animation-delay: 0s; }
.pixel-linked-bar--g2 { left: 26%; height: 48px; color: #32E6B8; animation-delay: 0.12s; }
.pixel-linked-bar--g3 { left: 34%; height: 39px; color: #32E6B8; animation-delay: 0.24s; }
.pixel-linked-bar--r1 { right: 34%; height: 34px; color: #EA3943; animation-delay: 0.36s; }
.pixel-linked-bar--r2 { right: 26%; height: 52px; color: #EA3943; animation-delay: 0.48s; }
.pixel-linked-bar--r3 { right: 18%; height: 42px; color: #EA3943; animation-delay: 0.6s; }
.pixel-linked-route {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 28px;
  height: 5px;
  background: repeating-linear-gradient(90deg, #57D5FF 0 10px, transparent 10px 18px);
  box-shadow: 0 0 16px rgba(87,213,255,0.42);
  animation: pixel-ratio-flow 1.2s steps(6) infinite;
}

.pixel-setup-art {
  position: relative;
  width: min(100%, 520px);
  height: 378px;
  overflow: hidden;
  border: 1px solid rgba(87,213,255,0.16);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(87,213,255,0.07) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(180deg, rgba(255,207,90,0.05) 1px, transparent 1px) 0 0 / 14px 14px,
    radial-gradient(circle at 68% 18%, rgba(87,213,255,0.16), transparent 36%),
    rgba(6,16,31,0.72);
  image-rendering: pixelated;
}
.pixel-setup-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0 48%, rgba(0,0,0,0.20) 50%, transparent 52%);
  background-size: 100% 6px;
  opacity: 0.34;
}
.pixel-setup-board {
  position: absolute;
  left: 14%;
  width: 72%;
  height: 108px;
  border: 4px solid rgba(221,239,240,0.72);
  background:
    linear-gradient(90deg, rgba(221,239,240,0.12) 1px, transparent 1px) 0 0 / 18px 18px,
    rgba(11,30,54,0.88);
  box-shadow: 0 20px 0 rgba(0,0,0,0.24), 0 0 28px rgba(87,213,255,0.12);
}
.pixel-setup-board--api { top: 32px; }
.pixel-setup-board--rules { top: 136px; left: 19%; }
.pixel-setup-board--monitor { top: 240px; }
.pixel-setup-title {
  position: absolute;
  left: 14px;
  top: 12px;
  color: rgba(221,249,243,0.58);
  font-family: 'Courier New', monospace;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.pixel-setup-lock {
  position: absolute;
  right: 48px;
  top: 38px;
  width: 44px;
  height: 34px;
  border: 4px solid #32E6B8;
  box-shadow: 0 0 18px rgba(50,230,184,0.36);
}
.pixel-setup-lock::before {
  content: "";
  position: absolute;
  left: 8px;
  top: -30px;
  width: 22px;
  height: 28px;
  border: 4px solid #32E6B8;
  border-bottom: 0;
}
.pixel-setup-key {
  position: absolute;
  left: 44px;
  top: 56px;
  width: 102px;
  height: 10px;
  background: #FFCF5A;
  box-shadow: 0 0 18px rgba(255,207,90,0.44);
}
.pixel-setup-key::before {
  content: "";
  position: absolute;
  left: -22px;
  top: -10px;
  width: 26px;
  height: 26px;
  border: 6px solid #FFCF5A;
}
.pixel-setup-key::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 10px;
  width: 10px;
  height: 14px;
  background: #FFCF5A;
  box-shadow: 18px 0 0 #FFCF5A;
}
.pixel-setup-ip {
  position: absolute;
  right: 44px;
  bottom: 12px;
  color: rgba(221,249,243,0.58);
  font-family: 'Courier New', monospace;
  font-size: 0.58rem;
  font-weight: 800;
}
.pixel-setup-slider {
  position: absolute;
  left: 44px;
  right: 42px;
  height: 5px;
  background: rgba(221,239,240,0.42);
}
.pixel-setup-slider::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 18px;
  height: 18px;
  background: #57D5FF;
  box-shadow: 0 0 14px rgba(87,213,255,0.48);
  animation: pixel-slider-knob 3s steps(6) infinite;
}
.pixel-setup-slider--one { top: 42px; }
.pixel-setup-slider--one::after { left: 24%; }
.pixel-setup-slider--two { top: 64px; }
.pixel-setup-slider--two::after { left: 54%; animation-delay: 0.2s; }
.pixel-setup-slider--three { top: 86px; }
.pixel-setup-slider--three::after { left: 38%; animation-delay: 0.4s; }
.pixel-setup-flow {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -28px;
  height: 5px;
  background: repeating-linear-gradient(90deg, #32E6B8 0 12px, transparent 12px 20px);
  box-shadow: 0 0 18px rgba(50,230,184,0.42);
  transform: rotate(17deg);
  animation: pixel-ratio-flow 1.3s steps(6) infinite;
}
.pixel-setup-bar {
  position: absolute;
  bottom: 24px;
  width: 24px;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
  animation: pixel-linked-bars 2.6s steps(5) infinite;
}
.pixel-setup-bar--one { left: 38%; height: 36px; color: #32E6B8; }
.pixel-setup-bar--two { left: 49%; height: 58px; color: #FFCF5A; animation-delay: 0.18s; }
.pixel-setup-bar--three { left: 60%; height: 46px; color: #EA3943; animation-delay: 0.36s; }
.pixel-setup-arrow {
  position: absolute;
  right: 42px;
  bottom: 42px;
  width: 68px;
  height: 6px;
  background: #57D5FF;
  box-shadow: 0 0 16px rgba(87,213,255,0.48);
  animation: pixel-arrow-pulse 2s steps(2) infinite;
}
.pixel-setup-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -10px;
  width: 22px;
  height: 22px;
  border-top: 6px solid #57D5FF;
  border-right: 6px solid #57D5FF;
  transform: rotate(45deg);
}

.pixel-workflow-art {
  position: relative;
  width: min(100%, 520px);
  min-height: 378px;
  overflow: hidden;
  border: 1px solid rgba(87,213,255,0.16);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(87,213,255,0.07) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(180deg, rgba(255,207,90,0.05) 1px, transparent 1px) 0 0 / 14px 14px,
    radial-gradient(circle at 50% 18%, rgba(255,207,90,0.16), transparent 30%),
    radial-gradient(circle at 80% 62%, rgba(87,213,255,0.16), transparent 34%),
    rgba(6,16,31,0.72);
  image-rendering: pixelated;
}
.pixel-workflow-art::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 4px solid rgba(221,239,240,0.12);
  box-shadow: inset 0 0 0 4px rgba(0,0,0,0.18);
}
.pixel-workflow-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0 48%, rgba(0,0,0,0.20) 50%, transparent 52%);
  background-size: 100% 6px;
  opacity: 0.34;
  z-index: 8;
}
.pixel-workflow-art__label,
.pixel-workflow-panel__title {
  position: absolute;
  z-index: 5;
  color: rgba(221,249,243,0.62);
  font-family: 'Courier New', monospace;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.pixel-workflow-art__label {
  left: 18px;
  top: 16px;
}
.pixel-workflow-panel {
  position: absolute;
  z-index: 3;
  border: 4px solid rgba(221,239,240,0.72);
  background:
    linear-gradient(90deg, rgba(221,239,240,0.12) 1px, transparent 1px) 0 0 / 18px 18px,
    rgba(11,30,54,0.90);
  box-shadow: 0 20px 0 rgba(0,0,0,0.24), 0 0 28px rgba(87,213,255,0.12);
}
.pixel-workflow-panel::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid rgba(87,213,255,0.10);
  pointer-events: none;
}
.pixel-workflow-panel__title {
  left: 12px;
  top: 10px;
}
.pixel-workflow-panel--choose {
  left: 28px;
  top: 88px;
  width: 158px;
  height: 148px;
}
.pixel-workflow-panel--rules {
  left: calc(50% - 88px);
  top: 58px;
  width: 176px;
  height: 184px;
  border-color: rgba(255,207,90,0.72);
  animation: pixel-workflow-panel-pulse 2.6s steps(2) infinite;
}
.pixel-workflow-panel--run {
  right: 28px;
  top: 128px;
  width: 164px;
  height: 158px;
}
.pixel-workflow-route {
  position: absolute;
  z-index: 1;
  height: 6px;
  background: repeating-linear-gradient(90deg, #32E6B8 0 12px, transparent 12px 20px);
  box-shadow: 0 0 18px rgba(50,230,184,0.42);
  animation: pixel-workflow-flow 1.15s steps(6) infinite;
}
.pixel-workflow-route--top {
  left: 32%;
  right: 30%;
  top: 143px;
  transform: rotate(-8deg);
}
.pixel-workflow-route--bottom {
  left: 34%;
  right: 28%;
  top: 245px;
  background: repeating-linear-gradient(90deg, #57D5FF 0 12px, transparent 12px 20px);
  transform: rotate(11deg);
  animation-duration: 1.35s;
}
.pixel-market-token {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 32px;
  border: 3px solid currentColor;
  background: rgba(6,16,31,0.78);
  color: #DDEFF0;
  font-family: 'Courier New', monospace;
  font-size: 0.58rem;
  font-weight: 800;
  box-shadow: 0 0 14px currentColor;
  animation: pixel-token-pop 2.8s steps(3) infinite;
}
.pixel-market-token--gold { left: 18px; top: 42px; color: #FFCF5A; }
.pixel-market-token--oil { right: 18px; top: 42px; color: #32E6B8; animation-delay: 0.18s; }
.pixel-market-token--etf { left: 18px; bottom: 18px; color: #57D5FF; animation-delay: 0.36s; }
.pixel-market-token--coin { right: 18px; bottom: 18px; color: #EA3943; animation-delay: 0.54s; }
.pixel-user-cursor {
  position: absolute;
  left: 62px;
  top: 70px;
  width: 22px;
  height: 22px;
  background: #DDEFF0;
  clip-path: polygon(0 0, 0 100%, 34% 76%, 50% 100%, 70% 90%, 54% 66%, 100% 66%);
  box-shadow: 0 0 14px rgba(221,239,240,0.42);
  animation: pixel-workflow-cursor 2.8s steps(5) infinite;
}
.pixel-rule-slider {
  position: absolute;
  left: 22px;
  right: 62px;
  height: 5px;
  background: rgba(221,239,240,0.42);
}
.pixel-rule-slider::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 18px;
  height: 18px;
  background: #57D5FF;
  box-shadow: 0 0 14px rgba(87,213,255,0.48);
  animation: pixel-rule-knob 3s steps(6) infinite;
}
.pixel-rule-slider--entry { top: 58px; }
.pixel-rule-slider--entry::after { left: 18%; }
.pixel-rule-slider--limit { top: 84px; }
.pixel-rule-slider--limit::after { left: 54%; animation-delay: 0.2s; }
.pixel-rule-slider--exit { top: 110px; }
.pixel-rule-slider--exit::after { left: 36%; animation-delay: 0.4s; }
.pixel-rule-gate {
  position: absolute;
  right: 20px;
  top: 56px;
  width: 38px;
  height: 64px;
  border: 4px solid #32E6B8;
  background: rgba(50,230,184,0.08);
  box-shadow: 0 0 24px rgba(50,230,184,0.38), inset 0 0 0 4px rgba(255,255,255,0.08);
  animation: pixel-rule-gate 2.2s steps(2) infinite;
}
.pixel-rule-check {
  position: absolute;
  bottom: 24px;
  width: 12px;
  height: 12px;
  background: #FFCF5A;
  box-shadow: 0 0 12px rgba(255,207,90,0.44);
  animation: pixel-rule-check 2.2s steps(1) infinite;
}
.pixel-rule-check--one { left: 38px; }
.pixel-rule-check--two { left: 62px; animation-delay: 0.22s; }
.pixel-rule-check--three { left: 86px; animation-delay: 0.44s; }
.pixel-run-screen {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 44px;
  bottom: 28px;
  border: 3px solid rgba(221,239,240,0.48);
  background:
    linear-gradient(90deg, transparent 48%, rgba(221,239,240,0.18) 49% 51%, transparent 52%),
    linear-gradient(180deg, transparent 48%, rgba(221,239,240,0.18) 49% 51%, transparent 52%),
    rgba(6,16,31,0.68);
}
.pixel-run-bar {
  position: absolute;
  bottom: 48px;
  width: 18px;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
  animation: pixel-run-bars 2.8s steps(5) infinite;
}
.pixel-run-bar--long { left: 40px; height: 48px; color: #32E6B8; }
.pixel-run-bar--mid { left: 66px; height: 34px; color: #FFCF5A; animation-delay: 0.16s; }
.pixel-run-bar--short { left: 92px; height: 54px; color: #EA3943; animation-delay: 0.32s; }
.pixel-run-balance {
  position: absolute;
  right: 22px;
  bottom: 58px;
  width: 46px;
  height: 6px;
  background: #DDEFF0;
  box-shadow: 0 0 16px rgba(221,239,240,0.28);
  animation: pixel-run-balance 2.6s steps(4) infinite;
}
.pixel-run-lock {
  position: absolute;
  right: 28px;
  bottom: 22px;
  width: 24px;
  height: 20px;
  border: 3px solid #32E6B8;
  box-shadow: 0 0 14px rgba(50,230,184,0.36);
  animation: pixel-lock-pulse 2.2s steps(2) infinite;
}
.pixel-run-lock::before {
  content: "";
  position: absolute;
  left: 4px;
  top: -16px;
  width: 12px;
  height: 14px;
  border: 3px solid #32E6B8;
  border-bottom: 0;
}

.portfolio-section {
  background:
    linear-gradient(180deg, transparent, var(--hover-bg), transparent);
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.portfolio-card {
  min-height: 220px;
  padding: 30px 28px;
  border: 1px solid var(--bd-4);
  border-radius: 14px;
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.portfolio-card__kicker {
  font-family: 'Courier New', monospace;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--fg-6);
  text-transform: uppercase;
}
.portfolio-card p {
  font-size: 0.9rem;
  color: var(--fg-4);
}

.institution-section {
  background:
    linear-gradient(180deg, transparent, var(--hover-bg), transparent);
}
.home-institution-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.home-institution-card {
  min-height: 230px;
  padding: 30px 28px;
  border: 1px solid var(--bd-4);
  border-radius: 14px;
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.home-institution-card p {
  font-size: 0.9rem;
  color: var(--fg-4);
}

.bridge-section {
  background:
    linear-gradient(180deg, transparent, var(--hover-bg), transparent);
}
html[data-art="pixel"] .bridge-section .features-intro {
  position: relative;
  isolation: isolate;
  min-height: 320px;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  border-radius: 16px;
  overflow: hidden;
}
html[data-art="pixel"] .bridge-section .features-intro > .label,
html[data-art="pixel"] .bridge-section .features-intro > h2,
html[data-art="pixel"] .bridge-section .features-intro > p {
  max-width: 44%;
  margin-left: 0;
  margin-right: 0;
}
html[data-art="pixel"] .bridge-section .features-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/hero-emotion-noise.png') 75% center / cover no-repeat;
  opacity: 0.7;
  z-index: -1;
  pointer-events: none;
  image-rendering: pixelated;
}
html[data-art="pixel"] .bridge-section .features-intro::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(8,18,37,0.85) 0%,
    rgba(8,18,37,0.6) 40%,
    rgba(8,18,37,0.2) 70%,
    rgba(8,18,37,0.35) 100%);
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 860px) {
  html[data-art="pixel"] .bridge-section .features-intro {
    align-items: center;
    text-align: center;
    padding: 40px 24px;
    min-height: auto;
  }
  html[data-art="pixel"] .bridge-section .features-intro > .label,
  html[data-art="pixel"] .bridge-section .features-intro > h2,
  html[data-art="pixel"] .bridge-section .features-intro > p {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  html[data-art="pixel"] .bridge-section .features-intro::after {
    background: linear-gradient(180deg,
      rgba(8,18,37,0.7) 0%,
      rgba(8,18,37,0.5) 50%,
      rgba(8,18,37,0.7) 100%);
  }
}
.bridge-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.bridge-card {
  min-height: 230px;
  padding: 30px 28px;
  border: 1px solid var(--bd-4);
  border-radius: 14px;
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bridge-card__kicker {
  font-family: 'Courier New', monospace;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--fg-6);
  text-transform: uppercase;
}
.bridge-card p {
  font-size: 0.9rem;
  color: var(--fg-4);
}


/* ==============================
   HOW IT WORKS
   ============================== */
/* --- HIW shared header row (top, horizontal, both modes) --- */
.hiw-header-row {
  text-align: center;
  margin-bottom: 56px;
}
.hiw-header-row h2 {
  margin-bottom: 10px;
}
.hiw-header-row p {
  max-width: 520px;
  margin: 0 auto;
  color: var(--fg-4);
}

/* --- HIW grid (fig left, body right) --- */
.hiw { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.hiw__fig {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 48px 24px; border: 1px solid var(--bd-3);
  border-radius: 16px; background: var(--bg-1);
}
.hiw__fig .fig-label { align-self: flex-start; }
/* Header inside body no longer needed — kept for backward safety */
.hiw__header { margin-bottom: 36px; }
.hiw__header h2 { margin-bottom: 10px; }
.hiw__steps { display: flex; flex-direction: column; }
.hiw__step {
  display: flex; gap: 20px; padding: 24px 0;
  border-bottom: 1px solid var(--bd-2);
}
.hiw__step:last-child { border-bottom: none; }
.hiw__step-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--bd-8);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; color: var(--fg-5); font-family: 'Courier New', monospace; margin-top: 1px;
}
.hiw__step-time { font-size: 0.7rem; color: var(--fg-6); margin-bottom: 4px; font-family: 'Courier New', monospace; }
.hiw__step h3 { margin-bottom: 4px; font-size: 0.95rem; }
.hiw__step p { font-size: 0.875rem; }
.hiw__mechanisms {
  margin-top: 76px;
}
.hiw__mechanisms-intro {
  margin-bottom: 28px;
}
.hiw__mechanisms-intro p {
  max-width: 620px;
}

/* --- HIW canvas (pixel mode: image + overlay + notes) --- */
.hiw-canvas {
  position: relative;
  width: 100%;
}

/* Steps overlay — left side of image */
.hiw-steps-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 46%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 20px 18px 20px 20px;
  background: linear-gradient(
    90deg,
    rgba(6, 14, 26, 0.88) 0%,
    rgba(6, 14, 26, 0.72) 76%,
    transparent 100%
  );
  border-radius: 8px 0 0 8px;
}
.hiw-steps-overlay__step {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(167, 213, 214, 0.14);
}
.hiw-steps-overlay__step:last-child {
  border-bottom: none;
}
.hiw-steps-overlay__step .hiw__step-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-color: rgba(167, 213, 214, 0.36);
  color: var(--pixel-cyan);
  margin-top: 2px;
}
.hiw-steps-overlay__step .hiw__step-time {
  color: var(--pixel-cyan);
  opacity: 0.7;
}
.hiw-steps-overlay__step h3 {
  font-size: 0.82rem;
  color: #e8f1ff;
  margin-bottom: 3px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.hiw-steps-overlay__step p {
  font-size: 0.75rem;
  color: rgba(200, 220, 240, 0.72);
  line-height: 1.45;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Floating music notes */
.hiw-note {
  position: absolute;
  z-index: 12;
  font-size: 3.3rem;
  pointer-events: none;
  user-select: none;
  animation: hiw-note-rise 3.6s ease-in-out infinite;
  opacity: 0;
}
.hiw-note--cyan  { left: 52%; bottom: 28%; color: var(--pixel-cyan);  animation-delay: 0s;    }
.hiw-note--gold  { left: 62%; bottom: 22%; color: var(--pixel-gold);  animation-delay: 0.6s;  }
.hiw-note--pink  { left: 74%; bottom: 30%; color: var(--pixel-pink);  animation-delay: 1.2s;  }
.hiw-note--green { left: 58%; bottom: 38%; color: var(--pixel-green); animation-delay: 1.8s;  }
.hiw-note--blue  { left: 68%; bottom: 18%; color: #7BD9FF;            animation-delay: 2.4s;  }
.hiw-note--orange{ left: 80%; bottom: 26%; color: #FFB347;            animation-delay: 3.0s;  }

@keyframes hiw-note-rise {
  0%   { transform: translate3d(0, 0, 0) scale(0.8);     opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: 0.7; }
  100% { transform: translate3d(8px, -80px, 0) scale(1); opacity: 0; }
}

/* Reduced motion: disable note animation */
@media (prefers-reduced-motion: reduce) {
  .hiw-note { animation: none; opacity: 0; }
}

/* Pixel mode overrides */
html[data-art="pixel"] .hiw-header-row h2 {
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.28);
}
html[data-art="pixel"] .hiw__fig {
  padding: 0;
  border: 0;
  background: transparent;
  gap: 0;
  align-items: stretch;
}
html[data-art="pixel"] .hiw__fig .fig-label {
  display: none;
}
/* Pixel mode: hide the serious-art body column (steps are in overlay) */
html[data-art="pixel"] .hiw__body {
  display: none;
}
/* Pixel mode: fig takes full width */
html[data-art="pixel"] .hiw {
  grid-template-columns: 1fr;
  gap: 0;
}
/* Serious mode: hide pixel canvas */
html[data-art="serious"] .hiw-canvas {
  display: none;
}


/* ==============================
   SECURITY
   ============================== */
.security-header { max-width: 520px; margin-bottom: 48px; }
.security-header h2 { margin-bottom: 10px; }
.security-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 40px; }
.security-card {
  border: 1px solid var(--bd-4); border-radius: 10px; padding: 24px;
  transition: border-color 0.2s;
}
.security-card:hover { border-color: var(--hover-bg3); }
.security-card__icon { font-size: 1rem; margin-bottom: 10px; color: var(--fg-5); }
.security-card h3 { font-size: 0.875rem; margin-bottom: 5px; }
.security-card p { font-size: 0.8rem; color: var(--fg-5); }

.security-compare {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--bd-4); border-radius: 12px; overflow: hidden;
}
.security-col { padding: 30px 32px; }
.security-col + .security-col { border-left: 1px solid var(--bd-4); }
.security-col h3 { font-size: 0.82rem; color: var(--fg-5); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.06em; }
.security-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.security-col li { font-size: 0.875rem; color: var(--fg-4); display: flex; align-items: flex-start; gap: 10px; }
.security-col li::before { content: '—'; color: var(--fg-6); flex-shrink: 0; }
.security-col--do li::before { content: '✓'; color: var(--green); }


/* ==============================
   PRICING
   ============================== */
.pricing-header { text-align: center; margin-bottom: 48px; }
.pricing-header h2 { margin-bottom: 10px; }
#pricing {
  position: relative;
  overflow: hidden;
}
#pricing > .container {
  position: relative;
  z-index: 2;
}
.pricing-pixel-notes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.pricing-pixel-notes::before {
  content: "";
  position: absolute;
  inset: 12% 12% 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 46%, rgba(255,207,90,0.10), transparent 34%),
    radial-gradient(circle at 35% 60%, rgba(87,213,255,0.10), transparent 28%),
    radial-gradient(circle at 66% 58%, rgba(22,199,132,0.08), transparent 30%);
  filter: blur(6px);
}
.pricing-pixel-notes .pixel-floating-note {
  opacity: 0;
  transform: scale(0.72);
}
.pricing-pixel-notes .pixel-floating-note--one { left: 24%; top: 58%; color: #57D5FF; }
.pricing-pixel-notes .pixel-floating-note--two { left: 29%; top: 30%; color: #16C784; animation-delay: 1.1s; }
.pricing-pixel-notes .pixel-floating-note--three { left: 69%; top: 70%; color: #FFCF5A; animation-delay: 2.2s; }
.pricing-pixel-notes .pixel-floating-note--four { left: 64%; top: 34%; color: #FF7BDF; animation-delay: 3.3s; }
.pricing-pixel-notes .pixel-floating-note--five { left: 78%; top: 58%; color: #B9F7A4; animation-delay: 4.4s; }
.pricing-card {
  max-width: 440px; margin: 0 auto;
  border: 1px solid var(--bd-8); border-radius: 14px;
  padding: 40px; background: var(--bg-1);
}
.pricing-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--bd-3);
}
.pricing-row:last-of-type { border-bottom: none; margin-bottom: 28px; }
.pricing-row__label { font-size: 0.875rem; color: var(--fg-4); }
.pricing-row__val { font-size: 0.875rem; color: var(--fg); font-weight: 500; }
.pricing-note { font-size: 0.82rem; color: var(--fg-5); margin-bottom: 28px; line-height: 1.65; }

@media (max-width: 860px) {
  .pricing-pixel-notes .pixel-floating-note {
    width: 20px;
    height: 32px;
    box-shadow: 0 0 22px currentColor;
  }
  .pricing-pixel-notes .pixel-floating-note::before {
    right: -11px;
    top: -22px;
    width: 9px;
    height: 45px;
  }
  .pricing-pixel-notes .pixel-floating-note--one { left: 20%; top: 47%; }
  .pricing-pixel-notes .pixel-floating-note--two { display: none; }
  .pricing-pixel-notes .pixel-floating-note--three { left: 67%; top: 76%; }
  .pricing-pixel-notes .pixel-floating-note--four { display: none; }
  .pricing-pixel-notes .pixel-floating-note--five { display: none; }
}


/* ==============================
   FAQ
   ============================== */
.faq-header { text-align: center; margin-bottom: 48px; }
.faq-header h2 { margin-bottom: 10px; }
.faq-list { max-width: 660px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--bd-3); }
.faq-question {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 0; text-align: left;
  color: var(--fg); font-size: 0.925rem; font-weight: 500; font-family: inherit; gap: 16px;
}
.faq-icon { color: var(--fg-6); font-size: 1.2rem; line-height: 1; flex-shrink: 0; transition: transform 0.22s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-answer-inner { padding-bottom: 20px; color: var(--fg-4); font-size: 0.875rem; line-height: 1.75; }


/* ==============================
   CTA + FOOTER
   ============================== */
.cta-block {
  text-align: center; padding: 104px 0;
  border-top: 1px solid var(--bd-3);
}
.cta-block h2 { margin-bottom: 14px; }
.cta-block p { margin-bottom: 36px; max-width: 400px; margin-left: auto; margin-right: auto; }

/* Risk Disclosure */
.risk-disclosure { padding: 0 0 48px; }
.risk-disclosure__box {
  border: 1px solid var(--bd-6);
  border-radius: 12px; padding: 36px 40px;
}
.risk-disclosure__header {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--fg-4); margin-bottom: 24px;
}
.risk-disclosure__sub {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-5);
  margin: 24px 0 14px;
}
.risk-disclosure__sub:first-of-type { margin-top: 0; }
.risk-disclosure__items { display: flex; flex-direction: column; gap: 10px; }
.risk-disclosure__items p, .risk-disclosure__body {
  font-size: 0.875rem; color: var(--fg-4); line-height: 1.7;
}
.risk-disclosure__items p strong, .risk-disclosure__body strong { color: var(--fg-2); }

/* Footer — horizontal columns */
.footer { border-top: 1px solid var(--bd-3); padding: 56px 0 0; }
.footer__inner { display: flex; flex-direction: row; align-items: flex-start; gap: 64px; padding-bottom: 48px; }
.footer__brand { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.footer__logo { display: inline-flex; width: fit-content; margin-bottom: 2px; color: var(--fg); font-weight: 700; font-family: 'Outfit', sans-serif; font-size: 1.1rem; letter-spacing: -0.02em; }
.footer__tagline { font-size: 0.875rem; color: var(--fg-4); }
.footer__contact { font-size: 0.875rem; color: var(--fg-4); margin-top: 2px; }
.footer__contact a { color: var(--fg-2); transition: color 0.18s; }
.footer__contact a:hover { color: var(--fg); }
.footer__nav { display: flex; flex-direction: column; gap: 10px; min-width: 140px; }
.footer__nav-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-6); margin-bottom: 2px; }
.footer__nav a { font-size: 0.82rem; color: var(--fg-4); text-decoration: none; transition: color 0.18s; }
.footer__nav a:hover { color: var(--fg); }
.footer__bottom { border-top: 1px solid var(--bd-1); padding: 20px 0; }
.footer__copy { font-size: 0.75rem; color: var(--fg-7); }


/* ==============================
   RESPONSIVE
   ============================== */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding: 96px 0 60px; min-height: auto; }
  .hero__figure { display: none; }
  .market-marquee { padding-bottom: 56px; }
  .market-marquee__lead,
  .market-marquee__note { padding: 0 2px; }
  .market-badge { width: 154px; min-height: 54px; }
  .portfolio-grid,
  .home-institution-grid,
  .bridge-grid,
  .features-grid { grid-template-columns: 1fr; }
  .portfolio-card { min-height: auto; }
  .home-institution-card { min-height: auto; }
  .bridge-card { min-height: auto; }
  .feature-card { border-right: none; border-bottom: 1px solid var(--bd-4); }
  .feature-card:last-child { border-bottom: none; }
  /* HIW: mobile vertical stack */
  .hiw-header-row { margin-bottom: 36px; }
  /* Serious mode: single column */
  .hiw { grid-template-columns: 1fr; gap: 40px; }
  /* Serious: hide fig (SVG too complex for tiny screens) */
  .hiw__fig { display: none; }
  /* Serious: show body steps below header */
  html[data-art="serious"] .hiw__body { display: block; }
  /* Pixel: show fig (canvas) full width */
  html[data-art="pixel"] .hiw__fig { display: flex; }
  /* Pixel: canvas stays full width, override single-col */
  html[data-art="pixel"] .hiw { grid-template-columns: 1fr; }
  /* Pixel mobile: overlay becomes below-image steps block */
  html[data-art="pixel"] .hiw-steps-overlay {
    position: static;
    width: 100%;
    background: rgba(6, 14, 26, 0.82);
    border-radius: 0 0 8px 8px;
    padding: 20px 18px;
  }
  /* Hide notes on small screens to reduce clutter */
  html[data-art="pixel"] .hiw-note { display: none; }
  .hiw__mechanisms { margin-top: 52px; }
  .security-grid { grid-template-columns: 1fr 1fr; }
  .security-compare { grid-template-columns: 1fr; }
  .security-col + .security-col { border-left: none; border-top: 1px solid var(--bd-4); }
  .nav__links, .nav__cta { display: none; }
  .nav__hamburger { display: block; }
  .theme-toggle { display: none; }
  .lang-toggle { display: none; }
  .art-toggle { margin-left: auto; }
  .art-toggle__btn { min-width: 52px; padding: 0 8px; }
  html[data-art="pixel"] .hero {
    min-height: auto;
    padding-top: 92px;
    gap: 34px;
  }
  html[data-art="pixel"] .hero__figure {
    display: flex;
    order: 2;
  }
  html[data-art="pixel"] .hero__text {
    order: 1;
  }
  .pixel-stage--hero {
    max-width: none;
    min-height: auto;
  }
  .section-showcase,
  .section-showcase--garden,
  .section-showcase--basis {
    grid-template-columns: 1fr;
    gap: 22px;
    margin: -10px 0 38px;
  }
  .section-showcase--basis { margin: 0; }
  .pixel-stage--wide { min-height: auto; }
  .pixel-route-pulse { display: none; }
}
@media (max-width: 1120px) and (min-width: 861px) {
  .portfolio-grid,
  .bridge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .security-grid { grid-template-columns: 1fr; }
  .container { padding: 0 20px; }
  .footer__inner { flex-direction: column; gap: 36px; }
  .art-toggle__btn {
    min-width: 44px;
    font-size: 0.66rem;
  }
  .pixel-stage__layer--hero-tickers,
  .pixel-asset-stream {
    display: none;
  }
  .pixel-gauge {
    width: 62px;
    height: 62px;
    margin-left: -31px;
    margin-top: -31px;
  }
  .pixel-gauge span {
    left: 28px;
    top: 10px;
    height: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .parallax-layer,
  .pixel-note,
  .pixel-stage__layer--signal span,
  .pixel-route,
  .pixel-route-pulse,
  .pixel-asset-stream span,
  .pixel-garden-flow span,
  .pixel-fireflies span,
  .pixel-conveyor-token,
  .pixel-gauge span {
    animation: none !important;
    transform: none !important;
  }
}

/* Recharts focus suppression */
.recharts-wrapper:focus-visible, .recharts-surface:focus-visible { outline: none; }


/* ==============================
   SUB-PAGE SHARED
   ============================== */
.page-hero {
  padding: 120px 0 72px;
  border-bottom: 1px solid var(--bd-3);
}
.page-hero__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; color: var(--fg-5); margin-bottom: 28px;
  transition: color 0.18s;
}
.page-hero__back:hover { color: var(--fg-2); }
.page-hero h1 { margin-bottom: 16px; }
.page-hero p { font-size: 1rem; color: var(--fg-4); max-width: 520px; line-height: 1.75; }

/* Article body */
.article { max-width: 720px; margin: 0 auto; }
.article-section { padding: 72px 0; border-bottom: 1px solid var(--bd-2); }
.article-section:last-child { border-bottom: none; }
.article-section h2 { margin-bottom: 16px; }
.article-section > p { margin-bottom: 32px; }

/* Step badge */
.step-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-6);
  border: 1px solid var(--bd-5); border-radius: 4px;
  padding: 4px 10px; margin-bottom: 20px;
  font-family: 'Courier New', monospace;
}

/* Callout */
.callout {
  border: 1px solid var(--bd-5); border-radius: 10px;
  padding: 24px 28px; margin: 28px 0;
  display: flex; gap: 16px; align-items: flex-start;
}
.callout--warn { border-color: var(--warn-bd); background: var(--warn-bg); }
.callout__icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.callout p { font-size: 0.9rem; color: var(--fg-3); margin: 0; }
.callout strong { color: var(--fg); }

/* Equation row */
.equation-row {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center; gap: 12px; margin: 32px 0;
}
.equation-op { font-size: 1.4rem; color: var(--fg-6); text-align: center; font-weight: 700; }
.equation-card {
  border: 1px solid var(--bd-4); border-radius: 10px; padding: 24px 20px; text-align: center;
}
.equation-card--result { background: var(--inv-bg); border-color: var(--inv-bg); }
.equation-card--result h3 { color: var(--inv-fg); }
.equation-card--result .equation-val { color: var(--inv-fg); }
.equation-card h3 { font-size: 0.9rem; margin-bottom: 8px; }
.equation-val { font-family: 'Outfit', sans-serif; font-size: 1.8rem; font-weight: 800; color: var(--fg); }

/* Scenario grid */
.scenario-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 28px 0; }
.scenario-card { border: 1px solid var(--bd-4); border-radius: 10px; padding: 24px 20px; }
.scenario-card__num { font-size: 0.65rem; color: var(--fg-6); font-family: 'Courier New', monospace; letter-spacing: 0.1em; margin-bottom: 10px; }
.scenario-card h3 { font-size: 0.9rem; margin-bottom: 12px; }
.scenario-card__math { font-size: 0.82rem; color: var(--fg-5); line-height: 1.7; margin-bottom: 12px; }
.scenario-card__result {
  font-family: 'Outfit', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--fg);
  padding-top: 12px; border-top: 1px solid var(--bd-3);
}

/* Institution cards */
.institution-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 32px 0; }
.institution-card { border: 1px solid var(--bd-4); border-radius: 10px; padding: 24px; }
.institution-card__type { font-size: 0.65rem; color: var(--fg-5); font-family: 'Courier New', monospace; letter-spacing: 0.1em; margin-bottom: 10px; }
.institution-card h3 { font-size: 0.875rem; margin-bottom: 6px; }
.institution-card p { font-size: 0.82rem; color: var(--fg-5); }

/* Challenge cards */
.challenge-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 32px 0; }
.challenge-card { border: 1px solid var(--bd-4); border-radius: 10px; padding: 28px 24px; }
.challenge-card__icon { font-size: 1.4rem; margin-bottom: 12px; }
.challenge-card h3 { font-size: 0.95rem; margin-bottom: 8px; }
.challenge-card p { font-size: 0.82rem; color: var(--fg-5); }

/* EWY stat grid */
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 32px 0; }
.stat-card { border: 1px solid var(--bd-4); border-radius: 10px; padding: 22px 20px; }
.stat-card__label { font-size: 0.65rem; color: var(--fg-5); font-family: 'Courier New', monospace; letter-spacing: 0.1em; margin-bottom: 8px; text-transform: uppercase; }
.stat-card h3 { font-size: 1rem; margin-bottom: 4px; }
.stat-card p { font-size: 0.8rem; color: var(--fg-5); }

/* Holdings list */
.holdings-list { border: 1px solid var(--bd-4); border-radius: 10px; overflow: hidden; margin: 28px 0; }
.holdings-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--bd-2);
  font-size: 0.875rem;
}
.holdings-row:last-child { border-bottom: none; }
.holdings-row__name { color: var(--fg-2); }
.holdings-row__weight { color: var(--fg); font-family: 'Courier New', monospace; font-size: 0.8rem; }

/* Data table */
.data-table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 0.875rem; }
.data-table th {
  text-align: left; padding: 12px 16px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-5); border-bottom: 1px solid var(--bd-4);
}
.data-table td { padding: 14px 16px; color: var(--fg-3); border-bottom: 1px solid var(--bd-1); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--hover-bg); }

/* Risk list */
.risk-list { display: flex; flex-direction: column; gap: 12px; margin: 28px 0; }
.risk-item { border: 1px solid var(--bd-4); border-radius: 10px; padding: 24px; }
.risk-item h3 { font-size: 0.95rem; margin-bottom: 12px; }
.risk-item ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.risk-item li { font-size: 0.875rem; color: var(--fg-4); display: flex; gap: 10px; }
.risk-item li::before { content: '—'; color: var(--fg-6); flex-shrink: 0; }

/* Sub-page responsive */
@media (max-width: 860px) {
  .scenario-grid, .institution-grid, .challenge-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .equation-row { grid-template-columns: 1fr; }
  .equation-op { display: none; }
}
@media (max-width: 560px) {
  .stat-grid { grid-template-columns: 1fr; }
}


/* ===== FIG 0.1 — Piano Hedge Console ===== */
@keyframes riser-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.fig01-r1 { animation: riser-bob 2.2s ease-in-out infinite 0s; }
.fig01-r2 { animation: riser-bob 2.2s ease-in-out infinite 0.18s; }
.fig01-r3 { animation: riser-bob 2.2s ease-in-out infinite 0.36s; }
.fig01-r4 { animation: riser-bob 2.2s ease-in-out infinite 0.54s; }
.fig01-r5 { animation: riser-bob 2.2s ease-in-out infinite 0.72s; }
.fig01-r6 { animation: riser-bob 2.2s ease-in-out infinite 0.54s; }

@keyframes arc-trace {
  0%{stroke-dashoffset:600;opacity:0.1} 45%{stroke-dashoffset:0;opacity:1}
  72%{stroke-dashoffset:0;opacity:1}    100%{stroke-dashoffset:600;opacity:0.1}
}
.fig01-arc { animation: arc-trace 3.6s ease-in-out infinite; }

@keyframes rail-pulse { 0%,100%{opacity:0.35} 50%{opacity:1} }
.fig01-rail-blue { animation: rail-pulse 2.8s ease-in-out infinite; }
.fig01-rail-teal { animation: rail-pulse 2.8s ease-in-out infinite 1.4s; }

/* ===== FIG 0.2-01 ===== */
@keyframes flow-signal {
  0%{stroke-dashoffset:100;opacity:0.15} 40%{stroke-dashoffset:0;opacity:1}
  90%,100%{stroke-dashoffset:-100;opacity:0.15}
}
.fig02-flow-l { animation: flow-signal 1.8s ease-in-out infinite; }
.fig02-flow-r { animation: flow-signal 1.8s ease-in-out infinite 0.35s; }

/* ===== FIG 0.2-02 ===== */
@keyframes drift-left  { 0%,15%,75%,100%{transform:translateX(0)} 45%{transform:translateX(-10px)} }
@keyframes drift-right { 0%,15%,75%,100%{transform:translateX(0)} 45%{transform:translateX(10px)} }
@keyframes tune-draw   { 0%,20%{stroke-dashoffset:300;opacity:0} 55%,80%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:300;opacity:0} }
.fig02-f2-left  { animation: drift-left  3.2s ease-in-out infinite; }
.fig02-f2-right { animation: drift-right 3.2s ease-in-out infinite; }
.fig02-f2-tune  { animation: tune-draw   3.2s ease-in-out infinite; }

/* ===== FIG 0.2-03 ===== */
@keyframes long-bars  { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-7px)} 75%{transform:translateY(4px)} }
@keyframes short-bars { 0%,100%{transform:translateY(0)} 40%{transform:translateY(5px)}  75%{transform:translateY(-6px)} }
@keyframes profit-flow{ 0%{stroke-dashoffset:200;opacity:0} 40%{opacity:1} 80%{stroke-dashoffset:0;opacity:0.8} 100%{stroke-dashoffset:0;opacity:0} }
.fig02-f3-long   { animation: long-bars   2.8s ease-in-out infinite; }
.fig02-f3-short  { animation: short-bars  2.8s ease-in-out infinite; }
.fig02-f3-profit { animation: profit-flow 2.8s ease-in-out infinite; }

@keyframes pixel-signal-left {
  0% { transform: translateX(0); opacity: 0.32; }
  38%, 62% { transform: translateX(42px); opacity: 1; }
  100% { transform: translateX(42px); opacity: 0.28; }
}
@keyframes pixel-signal-pass {
  0%, 42% { transform: translateX(-24px); opacity: 0; }
  64%, 84% { opacity: 1; }
  100% { transform: translateX(26px); opacity: 0.22; }
}
@keyframes pixel-gate-pulse {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}
@keyframes pixel-check-blink {
  0%, 34% { opacity: 0.25; }
  35%, 70% { opacity: 1; }
  71%, 100% { opacity: 0.32; }
}
@keyframes pixel-pan-long {
  0%, 100% { transform: translateY(9px); }
  50% { transform: translateY(-4px); }
}
@keyframes pixel-pan-short {
  0%, 100% { transform: translateY(-7px); }
  50% { transform: translateY(5px); }
}
@keyframes pixel-balance-beam {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(3deg); }
}
@keyframes pixel-ratio-flow {
  to { background-position-x: 40px; }
}
@keyframes pixel-correction-run {
  0% { transform: translateX(-36px); opacity: 0; }
  24%, 72% { opacity: 1; }
  100% { transform: translateX(36px); opacity: 0; }
}
@keyframes pixel-linked-bars {
  0%, 100% { transform: translateY(0); }
  42% { transform: translateY(-10px); }
  76% { transform: translateY(6px); }
}
@keyframes pixel-slider-knob {
  0%, 100% { transform: translateX(-10px); }
  50% { transform: translateX(18px); }
}
@keyframes pixel-arrow-pulse {
  0%, 100% { opacity: 0.46; }
  50% { opacity: 1; }
}
@keyframes pixel-workflow-flow {
  to { background-position-x: 40px; }
}
@keyframes pixel-workflow-panel-pulse {
  0%, 100% { box-shadow: 0 20px 0 rgba(0,0,0,0.24), 0 0 28px rgba(255,207,90,0.14); }
  50% { box-shadow: 0 20px 0 rgba(0,0,0,0.24), 0 0 34px rgba(255,207,90,0.28); }
}
@keyframes pixel-token-pop {
  0%, 100% { transform: translateY(0); opacity: 0.82; }
  44% { transform: translateY(-4px); opacity: 1; }
}
@keyframes pixel-workflow-cursor {
  0%, 100% { transform: translate(0, 0); }
  35% { transform: translate(24px, -10px); }
  68% { transform: translate(48px, 22px); }
}
@keyframes pixel-rule-knob {
  0%, 100% { transform: translateX(-8px); }
  50% { transform: translateX(18px); }
}
@keyframes pixel-rule-gate {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}
@keyframes pixel-rule-check {
  0%, 34% { opacity: 0.25; }
  35%, 70% { opacity: 1; }
  71%, 100% { opacity: 0.32; }
}
@keyframes pixel-run-bars {
  0%, 100% { transform: translateY(0); }
  42% { transform: translateY(-8px); }
  76% { transform: translateY(5px); }
}
@keyframes pixel-run-balance {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(4deg); }
}
@keyframes pixel-lock-pulse {
  0%, 100% { opacity: 0.58; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-workflow-route,
  .pixel-workflow-panel--rules,
  .pixel-market-token,
  .pixel-user-cursor,
  .pixel-rule-slider::after,
  .pixel-rule-gate,
  .pixel-rule-check,
  .pixel-run-bar,
  .pixel-run-balance,
  .pixel-run-lock {
    animation: none !important;
    transform: none !important;
  }
}


/* ==============================
   PIXEL CINEMATIC OVERRIDE
   ============================== */
html[data-art="pixel"] {
  --bg: #06101F;
  --bg-1: #0A1830;
  --fg: #FFF3D6;
  --fg-2: #DDEFF0;
  --fg-3: #AABEC0;
  --fg-4: #C7D6CE;
  --fg-5: #82999C;
  --fg-6: #5E7479;
  --fg-7: #3B5058;
  --bd-1: rgba(157, 219, 220, 0.04);
  --bd-2: rgba(157, 219, 220, 0.06);
  --bd-3: rgba(157, 219, 220, 0.09);
  --bd-4: rgba(157, 219, 220, 0.13);
  --bd-5: rgba(157, 219, 220, 0.18);
  --bd-6: rgba(157, 219, 220, 0.22);
  --bd-7: rgba(157, 219, 220, 0.26);
  --bd-8: rgba(157, 219, 220, 0.30);
  --bd-9: rgba(255, 207, 90, 0.32);
  --bd-10: rgba(255, 207, 90, 0.46);
  --bd-11: rgba(255, 207, 90, 0.58);
  --nav-bg: rgba(6, 16, 31, 0.82);
  --drawer-bg: #06101F;
  --hover-bg: rgba(87, 213, 255, 0.055);
  --hover-bg2: rgba(87, 213, 255, 0.12);
  --hover-bg3: rgba(255, 207, 90, 0.16);
  --btn-bg: #FFF0A6;
  --btn-fg: #06101F;
  --inv-bg: #FFF0A6;
  --inv-fg: #06101F;
  --lockup-fg: #FFF3D6;
}

html[data-art="pixel"] body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 16% 8%, rgba(87,213,255,0.12), transparent 28rem),
    radial-gradient(circle at 88% 16%, rgba(255,207,90,0.10), transparent 28rem),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(180deg, #06101F 0%, #08162B 42%, #06101F 100%);
}

html[data-art="pixel"] .nav {
  border-bottom-color: rgba(255,207,90,0.18);
  box-shadow: 0 12px 34px rgba(0,0,0,0.22);
}

html[data-art="pixel"] .art-toggle {
  background: rgba(255,243,214,0.08);
  border-color: rgba(255,207,90,0.24);
}

html[data-art="pixel"] .art-toggle__btn.active {
  color: #06101F;
  background: linear-gradient(180deg, #FFF4B5, #BDECE4);
}

html[data-art="pixel"] .btn-primary {
  box-shadow: 0 0 0 1px rgba(255,207,90,0.28), 0 0 34px rgba(255,207,90,0.16);
}

html[data-art="pixel"] .btn-outline {
  color: #DDEFF0;
  background: rgba(6,16,31,0.38);
  border-color: rgba(157,219,220,0.32);
}

html[data-art="pixel"] .hero.container {
  position: relative;
  max-width: none;
  min-height: 100vh;
  grid-template-columns: minmax(300px, 560px) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  padding: 116px max(28px, calc((100vw - 1180px) / 2)) 104px;
}

html[data-art="pixel"] .hero.container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,16,31,0.98) 0%, rgba(6,16,31,0.82) 34%, rgba(6,16,31,0.18) 68%, rgba(6,16,31,0.55) 100%),
    linear-gradient(180deg, rgba(6,16,31,0.42) 0%, transparent 42%, rgba(6,16,31,0.88) 100%);
}

html[data-art="pixel"] .hero.container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,207,90,0.42), transparent);
  box-shadow: 0 0 34px rgba(255,207,90,0.22);
}

html[data-art="pixel"] .hero__text {
  position: relative;
  z-index: 6;
  align-self: center;
  padding: 54px 0;
}

html[data-art="pixel"] .hero__badge {
  border-color: rgba(87,213,255,0.32);
  color: #C7D6CE;
  background: rgba(6,16,31,0.52);
}

html[data-art="pixel"] .hero__h1 {
  color: #FFF3D6;
  text-shadow: 5px 5px 0 rgba(0,0,0,0.64), 0 0 28px rgba(255,207,90,0.08);
}

html[data-art="pixel"] .hero-story__item h1 {
  color: #FFF3D6;
  text-shadow: 5px 5px 0 rgba(0,0,0,0.64), 0 0 28px rgba(255,207,90,0.08);
}

html[data-art="pixel"] .hero__sub {
  max-width: 470px;
  color: #C7D6CE;
}

html[data-art="pixel"] .hero-story__label {
  color: #FFCF5A;
}

html[data-art="pixel"] .hero-story__footer {
  border-top-color: rgba(255,207,90,0.30);
}

html[data-art="pixel"] .hero-story__item h1,
html[data-art="pixel"] .hero-story__item h2 {
  color: #FFF3D6;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.38);
}

html[data-art="pixel"] .hero-story__item p {
  color: #C7D6CE;
}

html[data-art="pixel"] .hero-story__btn {
  background: rgba(157,219,220,0.30);
}

html[data-art="pixel"] .hero-story__btn.active {
  background: #FFCF5A;
}

html[data-art="pixel"] .hero__figure {
  position: absolute;
  inset: 56px 0 0 24%;
  z-index: 0;
  display: block;
  width: auto;
  padding: 0;
  pointer-events: none;
}

html[data-art="pixel"] .hero-art-carousel,
html[data-art="pixel"] .hero-art-carousel__item {
  height: 100%;
}

html[data-art="pixel"] .pixel-stage--hero {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.parallax-layer {
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0) scale(var(--parallax-scale, 1));
}

html[data-art="pixel"] .pixel-stage__image {
  filter: saturate(1.13) contrast(1.08) brightness(0.92);
}

html[data-art="pixel"] .pixel-stage::before {
  opacity: 0.62;
}

html[data-art="pixel"] .pixel-stage::after {
  background:
    radial-gradient(circle at 64% 28%, rgba(87,213,255,0.20), transparent 26%),
    radial-gradient(circle at 80% 60%, rgba(255,207,90,0.12), transparent 24%),
    linear-gradient(180deg, rgba(6,16,31,0.06) 0%, transparent 54%, rgba(6,16,31,0.58) 100%);
  opacity: 1;
}

html[data-art="pixel"] .market-marquee {
  padding: 28px 0 78px;
  background: #06101F;
}

html[data-art="pixel"] .trust-boundary {
  background: #06101F;
  border-top: 1px solid rgba(157,219,220,0.10);
}

html[data-art="pixel"] .trust-boundary__intro h2 {
  color: #FFF3D6;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.28);
}

html[data-art="pixel"] .trust-boundary__item {
  background: rgba(8, 23, 43, 0.74);
  border-color: rgba(157,219,220,0.14);
}

html[data-art="pixel"] .market-marquee__viewport,
html[data-art="pixel"] .market-badge {
  background: rgba(8, 23, 43, 0.76);
  border-color: rgba(157,219,220,0.18);
}

html[data-art="pixel"] .market-marquee__viewport::before {
  background: linear-gradient(90deg, #06101F, transparent);
}

html[data-art="pixel"] .market-marquee__viewport::after {
  background: linear-gradient(270deg, #06101F, transparent);
}

html[data-art="pixel"] .divider {
  background: linear-gradient(90deg, transparent, rgba(255,207,90,0.18), transparent);
}

html[data-art="pixel"] .portfolio-section,
html[data-art="pixel"] .institution-section,
html[data-art="pixel"] .basis-edge-section {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #06101F;
}

html[data-art="pixel"] .portfolio-section > .container,
html[data-art="pixel"] .institution-section > .container,
html[data-art="pixel"] .basis-edge-section > .container {
  max-width: none;
  padding: 0;
}

html[data-art="pixel"] .portfolio-section .features-intro,
html[data-art="pixel"] .institution-section .features-intro {
  max-width: 760px;
  margin: 0 auto;
  padding: 110px 28px 52px;
}

html[data-art="pixel"] .features-intro h2,
html[data-art="pixel"] .security-header h2,
html[data-art="pixel"] .pricing-header h2,
html[data-art="pixel"] .faq-header h2,
html[data-art="pixel"] .cta-block h2 {
  color: #FFF3D6;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.35);
}

html[data-art="pixel"] .features-intro p,
html[data-art="pixel"] .security-header p,
html[data-art="pixel"] .pricing-header p,
html[data-art="pixel"] .cta-block p {
  color: #AABEC0;
}

html[data-art="pixel"] .section-showcase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 460px) minmax(0, 1fr);
  min-height: min(820px, 92vh);
  margin: 0;
  overflow: hidden;
  padding: 0 max(28px, calc((100vw - 1180px) / 2));
  border-top: 1px solid rgba(157,219,220,0.10);
  border-bottom: 1px solid rgba(157,219,220,0.10);
}

html[data-art="pixel"] .section-showcase--garden {
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, 520px);
}

html[data-art="pixel"] .section-showcase--basis {
  grid-template-columns: minmax(380px, 520px) minmax(0, 1.15fr);
}

html[data-art="pixel"] .section-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,16,31,0.94) 0%, rgba(6,16,31,0.66) 35%, rgba(6,16,31,0.10) 72%, rgba(6,16,31,0.48) 100%),
    linear-gradient(180deg, rgba(6,16,31,0.42), transparent 40%, rgba(6,16,31,0.70));
}

html[data-art="pixel"] .section-showcase--garden::before {
  background:
    linear-gradient(90deg, rgba(6,16,31,0.06) 0%, rgba(6,16,31,0.00) 38%, rgba(6,16,31,0.10) 62%, rgba(6,16,31,0.32) 84%, rgba(6,16,31,0.46) 100%),
    linear-gradient(180deg, rgba(6,16,31,0.14), transparent 46%, rgba(6,16,31,0.30));
}

html[data-art="pixel"] .section-showcase--basis::before {
  background:
    linear-gradient(270deg, rgba(6,16,31,0.06) 0%, rgba(6,16,31,0.00) 38%, rgba(6,16,31,0.10) 62%, rgba(6,16,31,0.32) 84%, rgba(6,16,31,0.46) 100%),
    linear-gradient(180deg, rgba(6,16,31,0.14), transparent 46%, rgba(6,16,31,0.30));
}

html[data-art="pixel"] .section-showcase .pixel-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html[data-art="pixel"] .section-showcase__copy {
  z-index: 6;
  align-self: center;
  max-width: 460px;
  padding: 76px 36px;
}

html[data-art="pixel"] .section-showcase--garden .section-showcase__copy {
  grid-column: 2;
  padding-left: 24px;
  padding-right: 48px;
}

html[data-art="pixel"] .section-showcase--basis .section-showcase__copy {
  padding-left: 48px;
  padding-right: 24px;
}

html[data-art="pixel"] .section-showcase__copy .label {
  color: #FFCF5A;
}

html[data-art="pixel"] .section-showcase__copy h2,
html[data-art="pixel"] .section-showcase__copy h3 {
  color: #FFF3D6;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 1.02;
  text-shadow: 5px 5px 0 rgba(0,0,0,0.42);
}

html[data-art="pixel"] .section-showcase__copy p {
  max-width: 430px;
  color: #C7D6CE;
  font-size: 1rem;
}

html[data-art="pixel"] .portfolio-grid,
html[data-art="pixel"] .home-institution-grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 68px 28px 116px;
}

html[data-art="pixel"] .portfolio-card,
html[data-art="pixel"] .home-institution-card,
html[data-art="pixel"] .feature-card,
html[data-art="pixel"] .security-card,
html[data-art="pixel"] .pricing-card,
html[data-art="pixel"] .risk-disclosure__box {
  background: rgba(8, 23, 43, 0.74);
  border-color: rgba(157,219,220,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

html[data-art="pixel"] .portfolio-card__kicker,
html[data-art="pixel"] .label {
  color: #FFCF5A;
}

html[data-art="pixel"] .section:not(.portfolio-section):not(.institution-section):not(.basis-edge-section):not(.bridge-section),
html[data-art="pixel"] .cta-block,
html[data-art="pixel"] .risk-disclosure,
html[data-art="pixel"] .footer {
  background: #06101F;
}

html[data-art="pixel"] .features-grid,
html[data-art="pixel"] .security-compare {
  border-color: rgba(157,219,220,0.14);
}

html[data-art="pixel"] #pricing .pricing-card {
  background: rgba(8, 23, 43, 0.90);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 24px 70px rgba(0,0,0,0.16);
}

html[data-art="pixel"] .pixel-stage__layer--hero-tickers {
  left: 44%;
  right: 7%;
  bottom: 10%;
}

html[data-art="pixel"] .pixel-note--cyan { left: 52%; bottom: 32%; }
html[data-art="pixel"] .pixel-note--gold { left: 60%; bottom: 28%; }
html[data-art="pixel"] .pixel-note--pink { left: 78%; bottom: 30%; }
html[data-art="pixel"] .pixel-note--green { left: 46%; bottom: 26%; }
html[data-art="pixel"] .pixel-note--blue { left: 68%; bottom: 40%; }

@media (max-width: 860px) {
  .hero-story__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-story__viewport {
    min-height: 190px;
  }

  .hero__ctas {
    flex-wrap: wrap;
  }

  .trust-boundary__inner,
  .trust-boundary__grid {
    grid-template-columns: 1fr;
  }

  .trust-boundary__grid {
    gap: 8px;
  }

  .trust-boundary__item {
    min-height: 72px;
  }

  .trust-boundary {
    padding-top: 20px;
  }

  html[data-art="pixel"] .hero.container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    padding: 76px 20px 14px;
  }

  html[data-art="pixel"] .hero.container::before {
    background:
      linear-gradient(180deg, rgba(6,16,31,0.52) 0%, rgba(6,16,31,0.80) 40%, rgba(6,16,31,0.96) 100%),
      linear-gradient(90deg, rgba(6,16,31,0.70), rgba(6,16,31,0.20));
  }

  html[data-art="pixel"] .hero__text {
    padding: 0;
  }

  html[data-art="pixel"] .hero__figure {
    position: relative;
    inset: auto;
    z-index: 2;
    width: 100%;
    height: auto;
    margin-top: 26px;
    pointer-events: auto;
  }

  html[data-art="pixel"] .pixel-stage--hero {
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: auto;
    border: 1px solid rgba(157,219,220,0.18);
    border-radius: 8px;
  }

  html[data-art="pixel"] .hero-art-carousel,
  html[data-art="pixel"] .hero-art-carousel__item {
    height: auto;
  }

  html[data-art="pixel"] .section-showcase,
  html[data-art="pixel"] .section-showcase--garden,
  html[data-art="pixel"] .section-showcase--basis {
    display: flex;
    min-height: 680px;
    padding: 0 20px;
  }

  html[data-art="pixel"] .section-showcase::before,
  html[data-art="pixel"] .section-showcase--garden::before {
    background:
      linear-gradient(180deg, rgba(6,16,31,0.24) 0%, rgba(6,16,31,0.52) 42%, rgba(6,16,31,0.98) 100%),
      linear-gradient(90deg, rgba(6,16,31,0.36), rgba(6,16,31,0.18));
  }

  html[data-art="pixel"] .section-showcase__copy,
  html[data-art="pixel"] .section-showcase--garden .section-showcase__copy {
    grid-column: auto;
    align-self: flex-end;
    padding: 0 0 52px;
  }

  html[data-art="pixel"] .section-showcase__copy h2,
  html[data-art="pixel"] .section-showcase__copy h3 {
    font-size: clamp(2rem, 12vw, 3.1rem);
  }

  html[data-art="pixel"] .portfolio-grid,
  html[data-art="pixel"] .home-institution-grid {
    padding: 42px 20px 86px;
  }

  html[data-art="pixel"] .pixel-stage__layer--hero-tickers {
    display: none;
  }
}


/* ==============================
   PIXEL SCALE + MOTION REFINEMENT
   ============================== */
html[data-art="pixel"] .hero.container {
  max-width: 1180px;
  min-height: auto;
  grid-template-columns: minmax(320px, 500px) minmax(520px, 1fr);
  gap: 58px;
  overflow: visible;
  padding: 128px 28px 96px;
}

html[data-art="pixel"] .hero.container::before {
  display: none;
}

html[data-art="pixel"] .hero__figure {
  position: relative;
  inset: auto;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
  pointer-events: auto;
}

html[data-art="pixel"] .pixel-stage--hero,
html[data-art="pixel"] .section-showcase .pixel-stage {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(157,219,220,0.18);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 24px 70px rgba(0,0,0,0.26);
}

html[data-art="pixel"] .pixel-stage--hero {
  max-width: 680px;
}

html[data-art="pixel"] .pixel-stage__image {
  inset: -1.5%;
  width: 103%;
  height: 103%;
  object-fit: cover;
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0);
}

html[data-art="pixel"] .pixel-stage__vignette {
  overflow: hidden;
}

html[data-art="pixel"] .pixel-stage__vignette::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(110deg, transparent 22%, rgba(87,213,255,0.10) 45%, transparent 66%);
  opacity: 0.55;
  transform: translateX(-70%);
  animation: pixel-ambient-sweep 8s ease-in-out infinite;
}

@keyframes pixel-ambient-sweep {
  0%, 18% { transform: translateX(-72%); opacity: 0; }
  42%, 62% { opacity: 0.55; }
  100% { transform: translateX(72%); opacity: 0; }
}

html[data-art="pixel"] .section-showcase,
html[data-art="pixel"] .section-showcase--garden,
html[data-art="pixel"] .section-showcase--basis {
  max-width: 1180px;
  min-height: auto;
  margin: 0 auto;
  padding: 88px 28px;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: 52px;
  overflow: visible;
  border: 0;
}

html[data-art="pixel"] .section-showcase--garden {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
}

html[data-art="pixel"] .section-showcase::before,
html[data-art="pixel"] .section-showcase--garden::before {
  display: none;
}

html[data-art="pixel"] .section-showcase__copy,
html[data-art="pixel"] .section-showcase--garden .section-showcase__copy {
  grid-column: auto;
  align-self: center;
  padding: 0;
}

html[data-art="pixel"] .section-showcase__copy h2,
html[data-art="pixel"] .section-showcase__copy h3 {
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  line-height: 1.05;
}

@media (max-width: 860px) {
  html[data-art="pixel"] .hero.container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 92px 20px 64px;
  }

  html[data-art="pixel"] .hero__figure {
    margin-top: 26px;
  }

  html[data-art="pixel"] .pixel-stage--hero {
    max-width: none;
  }

  html[data-art="pixel"] .section-showcase,
  html[data-art="pixel"] .section-showcase--garden,
  html[data-art="pixel"] .section-showcase--basis {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 58px 20px;
    min-height: auto;
  }

  html[data-art="pixel"] .section-showcase--garden .pixel-stage {
    order: 2;
  }

  html[data-art="pixel"] .section-showcase--garden .section-showcase__copy {
    order: 1;
  }

  html[data-art="pixel"] .section-showcase__copy h2,
  html[data-art="pixel"] .section-showcase__copy h3 {
    font-size: clamp(1.8rem, 10vw, 2.8rem);
  }
}

/* ==============================
   PIXEL REQUESTED MOTION RESTORE
   ============================== */
html[data-art="pixel"] .hero.container {
  max-width: none;
  min-height: calc(100vh - 56px);
  grid-template-columns: minmax(300px, 560px) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  padding: 96px max(28px, calc((100vw - 1180px) / 2)) 58px;
}

html[data-art="pixel"] .hero.container::before {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,16,31,0.98) 0%, rgba(6,16,31,0.82) 34%, rgba(6,16,31,0.18) 68%, rgba(6,16,31,0.55) 100%),
    linear-gradient(180deg, rgba(6,16,31,0.42) 0%, transparent 42%, rgba(6,16,31,0.88) 100%);
}

html[data-art="pixel"] .hero__figure {
  position: absolute;
  inset: 56px 0 0 24%;
  z-index: 0;
  display: block;
  width: auto;
  padding: 0;
  pointer-events: none;
}

html[data-art="pixel"] .pixel-stage--hero {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html[data-art="pixel"] .pixel-stage--hero .pixel-stage__image {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
}

html[data-art="pixel"] .pixel-stage--story-shaken .pixel-stage__image { object-position: 66% center; }
html[data-art="pixel"] .pixel-stage--story-rain .pixel-stage__image { object-position: 88% center; }
html[data-art="pixel"] .pixel-stage--story-noise .pixel-stage__image { object-position: 64% center; }
html[data-art="pixel"] .pixel-stage--story-wait .pixel-stage__image { object-position: 88% center; }
html[data-art="pixel"] .pixel-stage--story-code .pixel-stage__image { object-position: 84% center; }

html[data-art="pixel"] .hero__h1 {
  font-size: clamp(2.45rem, 4.7vw, 3.85rem);
}

html[data-art="pixel"] .hero-story__item h1 {
  font-size: clamp(2.45rem, 4.7vw, 3.85rem);
}

html[data-art="pixel"] .hero-story__viewport {
  min-height: 284px;
}

html[data-art="pixel"] .hero-story__item h2 {
  font-size: clamp(1.28rem, 2.35vw, 1.9rem);
}

.pixel-notes {
  inset: 0;
  z-index: 7;
}

.pixel-floating-note {
  position: absolute;
  width: 27px;
  height: 42px;
  color: #57D5FF;
  background: currentColor;
  border-radius: 6px 6px 3px 3px;
  box-shadow: 0 0 32px currentColor;
  opacity: 0;
  animation: pixel-float-note 6.4s ease-in-out infinite;
}

.pixel-floating-note::before {
  content: "";
  position: absolute;
  right: -15px;
  top: -30px;
  width: 12px;
  height: 60px;
  background: currentColor;
}

.pixel-floating-note--one { left: 40%; top: 52%; color: #31CFFF; animation-delay: 0s; }
.pixel-floating-note--two { left: 51%; top: 44%; color: #32E6B8; animation-delay: 1.1s; }
.pixel-floating-note--three { left: 62%; top: 58%; color: #FFCF5A; animation-delay: 2.2s; }
.pixel-floating-note--four { left: 73%; top: 35%; color: #FF7BDF; animation-delay: 3.3s; }
.pixel-floating-note--five { left: 84%; top: 48%; color: #B9F7A4; animation-delay: 4.4s; }

@keyframes pixel-float-note {
  0% { transform: translate3d(0, 18px, 0) scale(0.86); opacity: 0; }
  18% { opacity: 0.92; }
  58% { opacity: 0.85; }
  100% { transform: translate3d(18px, -92px, 0) scale(1.04); opacity: 0; }
}

.pixel-map-flow {
  inset: 0;
  z-index: 7;
}

.map-hub {
  position: absolute;
  left: 49.5%;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,207,90,0.82);
  background: rgba(87,213,255,0.26);
  box-shadow: 0 0 22px rgba(87,213,255,0.55), 0 0 30px rgba(255,207,90,0.24);
  transform: translate(-50%, -50%);
  animation: map-hub-pulse 2.4s ease-in-out infinite;
}

@keyframes map-hub-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.82; }
  50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

.map-route {
  position: absolute;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(87,213,255,0.15) 0 8px, rgba(87,213,255,0.9) 8px 12px, transparent 12px 20px);
  box-shadow: 0 0 12px rgba(87,213,255,0.46);
  opacity: 0.68;
  transform-origin: right center;
  animation: map-route-flow 1.5s linear infinite;
}

.map-route--us { left: 18%; top: 58%; width: 32%; transform: rotate(-13deg); }
.map-route--commodity { left: 36%; top: 33%; width: 18%; transform: rotate(43deg); }
.map-route--crypto { left: 50%; top: 44%; width: 30%; transform: rotate(11deg); transform-origin: left center; }
.map-route--asia { left: 49%; top: 58%; width: 30%; transform: rotate(-15deg); transform-origin: left center; }

@keyframes map-route-flow { to { background-position-x: 40px; } }

.map-token {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 23px;
  padding: 0 8px;
  border: 1px solid rgba(157,219,220,0.42);
  border-radius: 4px;
  background: rgba(8,18,37,0.78);
  color: #DDF9F3;
  font-family: 'Courier New', monospace;
  font-size: 0.66rem;
  font-weight: 800;
  box-shadow: 0 0 16px rgba(87,213,255,0.22);
}

.map-token--us { animation: map-token-us 5.2s ease-in-out infinite; }
.map-token--commodity { animation: map-token-commodity 5.2s ease-in-out infinite 0.7s; }
.map-token--crypto { animation: map-token-crypto 5.2s ease-in-out infinite 1.4s; }
.map-token--asia { animation: map-token-asia 5.2s ease-in-out infinite 2.1s; }

@keyframes map-token-us {
  0%, 8% { left: 17%; top: 55%; opacity: 0; }
  20%, 78% { opacity: 1; }
  92%, 100% { left: 49%; top: 50%; opacity: 0; }
}
@keyframes map-token-commodity {
  0%, 8% { left: 38%; top: 27%; opacity: 0; }
  20%, 78% { opacity: 1; }
  92%, 100% { left: 49%; top: 50%; opacity: 0; }
}
@keyframes map-token-crypto {
  0%, 8% { left: 72%; top: 41%; opacity: 0; }
  20%, 78% { opacity: 1; }
  92%, 100% { left: 51%; top: 50%; opacity: 0; }
}
@keyframes map-token-asia {
  0%, 8% { left: 73%; top: 62%; opacity: 0; }
  20%, 78% { opacity: 1; }
  92%, 100% { left: 51%; top: 52%; opacity: 0; }
}

html[data-art="pixel"] .section-showcase--garden {
  max-width: none;
  min-height: min(820px, 92vh);
  grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);
  margin: 0;
  overflow: hidden;
  padding: 0 max(28px, calc((100vw - 1180px) / 2));
  border-top: 1px solid rgba(157,219,220,0.10);
  border-bottom: 1px solid rgba(157,219,220,0.10);
}

html[data-art="pixel"] .section-showcase--garden::before {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,16,31,0.32) 0%, rgba(6,16,31,0.04) 48%, rgba(6,16,31,0.68) 74%, rgba(6,16,31,0.96) 100%),
    linear-gradient(180deg, rgba(6,16,31,0.32), transparent 44%, rgba(6,16,31,0.78));
}

html[data-art="pixel"] .section-showcase--garden .pixel-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html[data-art="pixel"] .section-showcase--garden .section-showcase__copy {
  grid-column: 2;
  z-index: 6;
  align-self: center;
  padding: 76px 0;
}

.pixel-basis-dynamics {
  inset: 0;
  z-index: 7;
}

.basis-spread-chip {
  position: absolute;
  left: 48.7%;
  top: 43%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 106px;
  height: 28px;
  border: 1px solid rgba(255,207,90,0.46);
  border-radius: 5px;
  background: rgba(9,18,32,0.76);
  color: #D9FCEB;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(255,207,90,0.22);
  animation: spread-chip-pulse 2.4s ease-in-out infinite;
}

@keyframes spread-chip-pulse {
  0%,100% { transform: translate(-50%, -50%); color: #D9FCEB; }
  50% { transform: translate(-50%, -54%); color: #FFF0A6; }
}

.basis-gauge-ring {
  position: absolute;
  left: 48.7%;
  top: 47.5%;
  width: 86px;
  height: 86px;
  border: 2px solid rgba(157,219,220,0.30);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8,18,37,0.22) 0 54%, transparent 55%);
  box-shadow: 0 0 26px rgba(87,213,255,0.16);
  transform: translate(-50%, -50%);
}

.basis-gauge-ring span {
  position: absolute;
  left: 40px;
  top: 14px;
  width: 5px;
  height: 34px;
  background: #FFCF5A;
  border-radius: 2px;
  transform-origin: 50% 100%;
  box-shadow: 0 0 14px rgba(255,207,90,0.68);
  animation: basis-needle-sweep 3.4s ease-in-out infinite;
}

@keyframes basis-needle-sweep {
  0%,100% { transform: rotate(-34deg); }
  50% { transform: rotate(36deg); }
}

.basis-balance-indicator {
  position: absolute;
  right: 7.55%;
  top: 37.5%;
  width: 10px;
  height: 31.5%;
  border: 1px solid rgba(157,219,220,0.28);
  border-radius: 4px;
  background: rgba(8,18,37,0.34);
}

.basis-balance-indicator span {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 22%;
  height: 28%;
  background: linear-gradient(180deg, #57D5FF, #FFCF5A);
  box-shadow: 0 0 14px rgba(87,213,255,0.42);
  animation: balance-level 3s ease-in-out infinite;
}

@keyframes balance-level {
  0%,100% { bottom: 18%; height: 24%; }
  50% { bottom: 38%; height: 34%; }
}

@media (max-width: 860px) {
  html[data-art="pixel"] .hero.container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    padding: 76px 20px 14px;
  }

  html[data-art="pixel"] .hero.container::before {
    display: block;
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(6,16,31,0.94), rgba(6,16,31,0.68)),
      linear-gradient(180deg, transparent 0 72%, rgba(6,16,31,0.90) 100%);
  }

  html[data-art="pixel"] .hero__text {
    position: relative;
    z-index: 6;
  }

  html[data-art="pixel"] .hero-story__viewport {
    min-height: 250px;
  }

  html[data-art="pixel"] .hero-story__item h1 {
    font-size: clamp(2.28rem, 11.2vw, 3.35rem);
  }

  html[data-art="pixel"] .hero-story__footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
  }

  html[data-art="pixel"] .hero__figure {
    position: absolute;
    left: 24%;
    right: -58%;
    top: 88px;
    bottom: 0;
    z-index: 0;
    width: auto;
    height: auto;
    margin-top: 0;
    opacity: 0.38;
    pointer-events: none;
  }

  html[data-art="pixel"] .pixel-stage--hero {
    height: 100%;
    aspect-ratio: auto;
    min-height: auto;
    border: 0;
    border-radius: 0;
  }

  html[data-art="pixel"] .hero-art-carousel,
  html[data-art="pixel"] .hero-art-carousel__item {
    height: 100%;
  }

  .pixel-floating-note { transform: scale(0.8); }

  html[data-art="pixel"] .section-showcase--garden,
  html[data-art="pixel"] .section-showcase--garden .pixel-stage {
    position: relative;
    min-height: auto;
    aspect-ratio: auto;
  }

  html[data-art="pixel"] .section-showcase--garden {
    display: grid;
    grid-template-columns: 1fr;
    padding: 58px 20px;
  }

  html[data-art="pixel"] .section-showcase--garden::before {
    display: none;
  }

  html[data-art="pixel"] .section-showcase--garden .pixel-stage {
    order: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(157,219,220,0.18);
    border-radius: 8px;
  }

  html[data-art="pixel"] .section-showcase--garden .section-showcase__copy {
    order: 1;
    grid-column: auto;
    padding: 0;
  }

  .map-token,
  .basis-spread-chip {
    transform: scale(0.82);
  }
}

/* Pixel mode: combine market copy and give the RWA map full emphasis. */
html[data-art="pixel"] .portfolio-section .features-intro {
  max-width: 880px;
  padding-bottom: 36px;
}

html[data-art="pixel"] .portfolio-section .features-intro p {
  max-width: 680px;
}

html[data-art="pixel"] .section-showcase--market {
  display: block;
  max-width: 1280px;
  min-height: auto;
  margin: 0 auto;
  padding: 0 28px 70px;
  overflow: visible;
  border: 0;
}

html[data-art="pixel"] .section-showcase--market::before {
  display: none;
}

html[data-art="pixel"] .section-showcase--market .section-showcase__copy {
  display: none;
}

html[data-art="pixel"] .section-showcase--market .pixel-stage {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 0;
  box-shadow:
    0 34px 110px rgba(0,0,0,0.34),
    0 0 120px rgba(87,213,255,0.08);
}

html[data-art="pixel"] .section-showcase--market .pixel-stage__image {
  object-position: center center;
}

html[data-art="pixel"] .portfolio-grid {
  padding-top: 34px;
}

@media (max-width: 860px) {
  html[data-art="pixel"] .portfolio-section .features-intro {
    padding: 82px 20px 28px;
  }

  html[data-art="pixel"] .section-showcase--market {
    padding: 0 20px 46px;
  }

  html[data-art="pixel"] .section-showcase--market .pixel-stage {
    aspect-ratio: 16 / 10;
  }
}

/* ==============================
   LEGAL PAGES (terms / privacy / risk-disclosure)
   Single design system using site-wide CSS variables. No external fonts
   beyond Outfit + Inter (already loaded by site). Dark/light mode flips
   automatically via the existing data-theme variables.
   ============================== */

body.legal-page {
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.legal-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 28px 96px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: start;
}

/* Side nav */
.legal-tabs {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9rem;
}
.legal-tabs h3 {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-4);
  margin: 0 0 18px;
  font-weight: 600;
}
.legal-tab-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--fg-3);
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.legal-tab-link:hover { background: var(--hover-bg); color: var(--fg); }
.legal-tab-link.active {
  background: var(--bg-1);
  color: var(--fg);
  font-weight: 600;
}
.legal-tab-icon { font-size: 1rem; }

/* Main content */
.legal-content { min-width: 0; }
.legal-content h1 {
  font-family: Outfit, sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  line-height: 1.15;
}
.legal-content h2 {
  font-family: Outfit, sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 56px 0 16px;
  letter-spacing: -0.005em;
  border-top: 1px solid var(--bd-3);
  padding-top: 32px;
}
.legal-content h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal-content h3 {
  font-family: Outfit, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 28px 0 10px;
}
.legal-content h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 18px 0 8px;
  color: var(--fg);
}
.legal-content p,
.legal-content li {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--fg-2);
}
.legal-content ol,
.legal-content ul {
  margin: 12px 0 16px;
  padding-left: 22px;
}
.legal-content li { margin-bottom: 8px; }
.legal-content li > ul,
.legal-content li > ol { margin-top: 8px; }
.legal-content strong { color: var(--fg); }

.legal-header {
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--bd-3);
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 0.82rem;
  color: var(--fg-4);
  margin-top: 18px;
}
.legal-meta-item { display: inline-flex; gap: 8px; align-items: center; }
.legal-meta-item strong { color: var(--fg-3); font-weight: 600; }

/* Information boxes — all share the same shape, differ only by accent */
.highlight-box,
.warning-box,
.danger-box,
.info-box,
.critical-box {
  border: 1px solid var(--bd-3);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--bg-1);
  padding: 18px 22px;
  margin: 18px 0;
}
.highlight-box  { border-left-color: var(--logo-rise); }
.warning-box    { border-left-color: #EAB308; background: var(--warn-bg); border-color: var(--warn-bd); }
.danger-box     { border-left-color: var(--red); background: rgba(234, 57, 67, 0.04); }
.info-box       { border-left-color: var(--fg-4); }
.critical-box   { border-left-color: var(--red); background: rgba(234, 57, 67, 0.06); }

.highlight-box h3,
.warning-box h3,
.danger-box h3,
.info-box h3,
.critical-box h3,
.highlight-box h4,
.warning-box h4,
.danger-box h4,
.info-box h4,
.critical-box h4 {
  margin-top: 0;
  margin-bottom: 10px;
}
.highlight-box p:last-child,
.warning-box p:last-child,
.danger-box p:last-child,
.info-box p:last-child,
.critical-box p:last-child { margin-bottom: 0; }

/* Tables */
.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 20px;
  font-size: 0.9rem;
}
.legal-content th,
.legal-content td {
  border: 1px solid var(--bd-3);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.legal-content th {
  background: var(--bg-1);
  font-weight: 600;
  color: var(--fg);
}
.legal-content td { color: var(--fg-2); }

/* Back link / footer area */
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 48px;
  padding: 10px 16px;
  border: 1px solid var(--bd-3);
  border-radius: 8px;
  color: var(--fg);
  text-decoration: none;
  font-size: 0.88rem;
  transition: background 120ms;
}
.legal-back:hover { background: var(--hover-bg); }

@media (max-width: 880px) {
  .legal-wrapper {
    grid-template-columns: 1fr;
    padding: 64px 20px 80px;
    gap: 36px;
  }
  .legal-tabs {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bd-3);
  }
  .legal-tabs h3 { display: none; }
  .legal-tab-link { flex: 0 0 auto; white-space: nowrap; }
  .legal-content h1 { font-size: 1.8rem; }
  .legal-content h2 { font-size: 1.2rem; }
}

/* Legal pages — utility helpers */
.legal-page .text-danger { color: var(--red); }
.legal-page .text-center { text-align: center; }
.legal-page .lead { font-size: 1rem; line-height: 1.7; }
.legal-page .table-container { overflow-x: auto; margin: 16px 0 20px; }

/* ===== Strategy classification (quant positioning) ===== */
.strat-section { padding-bottom: 40px; }
.strat-chips {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px;
}
.strat-chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--bd-6);
  border-radius: 999px;
  background: var(--hover-bg);
  font-size: 0.92rem; font-weight: 600; color: var(--fg);
  white-space: nowrap;
}
.strat-chip__tag {
  font-family: 'Courier New', monospace;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--green);
}
.strat-note {
  margin-top: 18px; font-size: 0.8rem; line-height: 1.6;
  color: var(--fg-3); max-width: 640px;
}
@media (max-width: 480px) {
  .strat-chip { font-size: 0.85rem; padding: 8px 13px; }
}

/* ===== Track record (live metrics) ===== */
.track-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 8px;
}
.track-grid--3 { grid-template-columns: repeat(3, 1fr); }
.track-card__value--neutral { color: var(--fg); }
.track-card {
  border: 1px solid var(--bd-6); border-radius: 14px;
  background: var(--hover-bg); padding: 20px 18px;
}
.track-card__label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px;
}
.track-card__value {
  font-family: 'Courier New', monospace;
  font-size: 1.7rem; font-weight: 700; color: var(--green);
  line-height: 1.1;
}
.track-card__value--neg { color: var(--red); }
.track-asof {
  margin-top: 14px; font-family: 'Courier New', monospace;
  font-size: 0.78rem; color: var(--fg-2);
}
@media (max-width: 720px) {
  .track-grid { grid-template-columns: repeat(2, 1fr); }
  .track-card__value { font-size: 1.4rem; }
}