:root {
  --gold: #c8a96e;
  --gold-bright: #e5cb8c;
  --gold-muted: #8a7444;
  --gold-border: rgba(200, 169, 110, 0.22);
  --gold-border-strong: rgba(200, 169, 110, 0.42);
  --gold-ghost: rgba(200, 169, 110, 0.08);
  --obsidian: #070708;
  --black: #050506;
  --deep: #0b0b0d;
  --surface: #111115;
  --surface-2: #17171c;
  --surface-3: #1d1d24;
  --text: #ede7db;
  --text-subtle: #b4aa99;
  --text-muted: #817765;
  --text-faint: #5a5144;
  --green: #76d89a;
  --radius: 2px;
  --transition: 220ms cubic-bezier(0.22, 1, 0.36, 1);
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Cormorant Garamond', Georgia, serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;
  --shadow-soft: 0 24px 60px rgba(0, 0, 0, 0.35);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-xxl: 64px;
  --space-section: clamp(64px, 7vw, 96px);

  --grid-gap: var(--space-xl);
  --measure: 72ch;

  --panel-pad: var(--space-lg);
  --panel-pad-lg: calc(var(--space-lg) + var(--space-sm));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  position: relative;
  margin: 0;
  background:
    radial-gradient(circle at top right, rgba(200, 169, 110, 0.08), transparent 24%),
    radial-gradient(circle at left bottom, rgba(200, 169, 110, 0.05), transparent 20%),
    var(--obsidian);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(720px 540px at 20% 18%, rgba(200, 169, 110, 0.11), transparent 62%),
    radial-gradient(840px 620px at 78% 12%, rgba(200, 169, 110, 0.07), transparent 64%),
    radial-gradient(980px 720px at 55% 88%, rgba(200, 169, 110, 0.06), transparent 68%);
  opacity: 0.9;
  transform: translateZ(0);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(200, 169, 110, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(200, 169, 110, 0.07) 1px, transparent 1px),
    repeating-linear-gradient(to bottom, rgba(200, 169, 110, 0.04) 0, rgba(200, 169, 110, 0.04) 1px, transparent 1px, transparent 7px);
  background-size: 140px 140px, 140px 140px, auto;
  opacity: 0.07;
  mask-image: radial-gradient(circle at 50% 22%, rgba(0, 0, 0, 0.92), transparent 74%);
  mix-blend-mode: screen;
  transform: translateZ(0);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

strong {
  font-weight: 600;
}

.site-texture {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  z-index: 1;
  transform: translateZ(0);
  will-change: opacity;
}

.icon {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  color: var(--gold);
}

.icon use,
.icon path {
  vector-effect: non-scaling-stroke;
}

.kicker-row {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--gold);
  color: var(--black);
  padding: 0.7rem 1rem;
  z-index: 200;
  transition: top var(--transition);
}

.skip-link:focus {
  top: 1rem;
}

.container {
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: 0 2rem;
}

.site-main {
  position: relative;
  z-index: 2;
  overflow: visible;
}

.section {
  position: relative;
  padding: var(--space-section) 0;
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

.section.alt {
  background: rgba(17, 17, 21, 0.86);
  border-top: 1px solid var(--gold-border);
  border-bottom: 1px solid var(--gold-border);
}

.section.deep {
  background: rgba(12, 12, 15, 0.95);
}

.section-kicker,
.hero-kicker,
.card-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr);
  gap: var(--space-xl);
  align-items: end;
  margin-bottom: var(--space-xxl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(200, 169, 110, 0.12);
}

.section-title,
.hero-title {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-display);
  line-height: 0.92;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.section-title {
  font-size: clamp(2.6rem, 5vw, 4.6rem);
}

.hero-title {
  font-size: clamp(4rem, 9vw, 8.6rem);
}

.page-hero .hero-title {
  font-size: clamp(3.1rem, 7vw, 6.7rem);
}

.section-copy,
.hero-copy,
.card-copy,
.body-copy {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text-subtle);
  font-style: italic;
  line-height: 1.85;
}

.section-copy {
  max-width: var(--measure);
}

.body-copy + .body-copy {
  margin-top: 1rem;
}

.hero-copy {
  max-width: 42rem;
  font-size: 1.18rem;
}

.page-hero .hero-copy {
  max-width: 44rem;
  font-size: 1.12rem;
}

.hero-title .accent,
.section-title .accent,
.metric-value .accent {
  color: var(--gold);
}

.hero-title .outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(200, 169, 110, 0.6);
}

.hero-actions,
.action-row,
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0.85rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition:
    border-color var(--transition),
    background var(--transition),
    color var(--transition),
    transform var(--transition);
}

.hi-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.9;
}

.btn:hover .hi-icon,
.nav-link:hover .hi-icon,
.mobile-link:hover .hi-icon {
  opacity: 1;
  filter: drop-shadow(0 0 12px rgba(200,169,110,0.25));
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}

.btn-primary:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
}

.btn-secondary {
  border-color: var(--gold-border-strong);
  color: var(--text);
  background: transparent;
}

.btn-secondary:hover {
  background: var(--gold-ghost);
  color: var(--gold-bright);
}

.btn-ghost {
  border-color: var(--gold-border);
  color: var(--text-subtle);
}

.btn-ghost:hover {
  border-color: var(--gold-border-strong);
  color: var(--text);
}

/* ── Nav timing system ── */
:root {
  --nav-fast: 160ms;
  --nav-med:  220ms;
  --nav-slow: 420ms;
  --nav-ease: cubic-bezier(.22,1,.36,1);
}

/* ── Keyframes ── */
@keyframes dropdownItemIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0);   }
}
@keyframes mobileMenuReveal {
  from { opacity:0; transform:translateY(-10px); }
  to   { opacity:1; transform:translateY(0);     }
}
@keyframes cartPulse {
  0%,100% { box-shadow:0 0 0 0   rgba(212,176,94,0.30); }
  50%     { box-shadow:0 0 0 5px rgba(212,176,94,0);    }
}

/* ══════════════════════════════════════════════════════════
   UNIVERSAL HEADER SHELL — single rule governs all pages
══════════════════════════════════════════════════════════ */
.site-header-shell {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  width: 100%;
  background:
    linear-gradient(180deg, rgba(5,7,11,0.88), rgba(5,7,11,0.74));
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-bottom: 1px solid rgba(212,176,94,0.12);
  box-shadow:
    0 20px 80px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.04);

  /* Slide-up/slide-down transitions */
  transform: translateY(0);
  opacity: 1;
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity   260ms ease,
    background 220ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
  will-change: transform, opacity;
}

.site-header-shell::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,176,94,0.55), transparent);
  opacity: 0.60;
  pointer-events: none;
}

/* ── Hide: header slides above viewport ── */
body.header-hidden .site-header-shell {
  transform: translateY(-105%);
  opacity: 0;
  pointer-events: none;
}

/* ── Visible: explicit restore ── */
body.header-visible .site-header-shell {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ── Compact: denser after scroll threshold ── */
body.header-compact .site-header-shell {
  background:
    linear-gradient(180deg, rgba(5,7,11,0.96), rgba(5,7,11,0.84));
  border-bottom-color: rgba(212,176,94,0.20);
  box-shadow: 0 20px 70px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ── Menu open: never hide when dropdown or mobile menu is active ── */
body.header-menu-open .site-header-shell,
body.mobile-menu-open .site-header-shell {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ── Reduced motion: remove transitions ── */
@media (prefers-reduced-motion: reduce) {
  .site-header-shell {
    transition: background 220ms ease, border-color 200ms ease !important;
    transform: none !important;
  }
}

/* ── Z-index layer system ── */
:root {
  --z-base:     1;
  --z-content:  10;
  --z-header:   9000;
  --z-ticker:   8000;
  --z-dropdown: 99999;
  --z-overlay:  100000;
}

/* ── Dropdown portal — direct child of <body>, above all stacking contexts ── */
.nav-dropdown-portal {
  position: fixed;
  inset: 0;
  z-index: var(--z-dropdown);
  pointer-events: none;
  overflow: visible;
}

/* Dropdowns hosted in the portal use fixed coords set by JS */
.nav-dropdown-portal .nav-dropdown {
  position: fixed !important;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  /* Keep all visual styles from .nav-dropdown — only override positioning */
  transform: translateX(-50%) translateY(6px) scale(0.97);
  transition:
    opacity var(--nav-fast) ease,
    transform var(--nav-med) var(--nav-ease),
    visibility var(--nav-fast) ease;
}

.nav-dropdown-portal .nav-dropdown.is-portal-open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Stagger for portal-hosted items */
.nav-dropdown-portal .nav-dropdown.is-portal-open a,
.nav-dropdown-portal .nav-dropdown.is-portal-open button,
.nav-dropdown-portal .nav-dropdown.is-portal-open .dropdown-label,
.nav-dropdown-portal .nav-dropdown.is-portal-open .dropdown-note,
.nav-dropdown-portal .nav-dropdown.is-portal-open .dropdown-section {
  animation: dropdownReveal 220ms ease both;
}
.nav-dropdown-portal .nav-dropdown .dropdown-label   { animation-delay: 0ms;   }
.nav-dropdown-portal .nav-dropdown .dropdown-note    { animation-delay: 0ms;  }
.nav-dropdown-portal .nav-dropdown a:nth-of-type(1),
.nav-dropdown-portal .nav-dropdown .dropdown-section:nth-child(1) { animation-delay: 0ms;  }
.nav-dropdown-portal .nav-dropdown a:nth-of-type(2),
.nav-dropdown-portal .nav-dropdown .dropdown-section:nth-child(2) { animation-delay: 0ms;  }
.nav-dropdown-portal .nav-dropdown a:nth-of-type(3),
.nav-dropdown-portal .nav-dropdown .dropdown-section:nth-child(3) { animation-delay: 0ms;  }
.nav-dropdown-portal .nav-dropdown a:nth-of-type(4)  { animation-delay: 0ms; }
.nav-dropdown-portal .nav-dropdown a:nth-of-type(5)  { animation-delay: 0ms; }
.nav-dropdown-portal .nav-dropdown a:nth-of-type(6)  { animation-delay: 0ms; }
.nav-dropdown-portal .nav-dropdown a:nth-of-type(7)  { animation-delay: 0ms; }
.nav-dropdown-portal .nav-dropdown a:nth-of-type(8)  { animation-delay: 0ms; }

/* ── Inner site-header div ── */
.site-header {
  position: relative;
  z-index: 2;
  background: transparent;
  border-bottom: none;
  transition: none;
}

/* Prevent any ancestor between nav and dropdown from clipping */
.header-shell,
.header-actions,
.main-nav,
.main-nav ul {
  overflow: visible;
}

.site-header.scrolled { background: transparent; }

/* ═══════════════════════════════════════════════
   2025 HEADER INNER — 3-column grid layout
═══════════════════════════════════════════════ */
.header-shell {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 44px);
  min-height: 76px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 2.5vw, 36px);
  transition: min-height 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.header-compact .header-shell { min-height: 64px; }

/* ═══════════════════════════════════════════════
   2025 BRAND LOCKUP
═══════════════════════════════════════════════ */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity 180ms ease;
}

.brand:hover { opacity: 0.88; }

.brand-logo {
  height: clamp(34px, 3vw, 44px);
  width: auto;
  filter: drop-shadow(0 0 14px rgba(212,176,94,0.22));
  transition: filter 220ms ease, transform 220ms ease;
  flex-shrink: 0;
}

.brand:hover .brand-logo {
  filter: drop-shadow(0 0 20px rgba(212,176,94,0.38));
  transform: translateY(-1px);
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}

.brand-mark {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  color: #D4B05E;
}

.brand-sub {
  font-family: var(--font-mono);
  font-size: 0.50rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.40);
}

@media (max-width: 640px) {
  .brand-text { display: none; }
  .brand-logo { height: 34px; }
}

/* ═══════════════════════════════════════════════
   2025 CENTER NAV CAPSULE
═══════════════════════════════════════════════ */
.main-nav {
  justify-self: center;
}

.main-nav ul,
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-nav ul {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(212,176,94,0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.022);
  backdrop-filter: blur(8px);
}

.main-nav [data-auth-nav-item] {
  margin-left: 2px;
  padding-left: 8px;
  border-left: 1px solid rgba(212,176,94,0.14);
}

/* ═══════════════════════════════════════════════
   2025 NAV LINK PILLS
═══════════════════════════════════════════════ */
.nav-link,
.mobile-link {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.60);
  text-decoration: none;
  transition: color 180ms ease, background 180ms ease;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  cursor: pointer;
  /* Remove old underline pseudo */
  position: relative;
}

/* Remove old underline */
.nav-link::after { display: none; }

.nav-link:hover,
.nav-link.active,
.mobile-link:hover,
.mobile-link.active {
  color: #F5F1E8;
  background: rgba(212,176,94,0.08);
  box-shadow: inset 0 0 0 1px rgba(212,176,94,0.10);
}

.nav-link.active {
  color: #F5F1E8;
  background: rgba(212,176,94,0.12);
  box-shadow: inset 0 0 0 1px rgba(212,176,94,0.16);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

/* ═══════════════════════════════════════════════
   2025 MOBILE TOGGLE
═══════════════════════════════════════════════ */
.mobile-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.028);
  border: 1px solid rgba(212,176,94,0.16);
  border-radius: 10px;
  color: rgba(245,241,232,0.72);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}

.mobile-toggle:hover {
  background: rgba(212,176,94,0.06);
  border-color: rgba(212,176,94,0.30);
  color: #F5F1E8;
}

.mobile-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  margin: 3px auto;
  transition: transform 260ms cubic-bezier(0.22,1,0.36,1), opacity 180ms ease;
}

.mobile-toggle.is-open span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.mobile-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-toggle.is-open span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* ═══════════════════════════════════════════════
   2025 MOBILE MENU — full-height glass slide-down
═══════════════════════════════════════════════ */
.mobile-menu {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 0;
  padding: 0;
  background: rgba(5,7,11,0.96);
  backdrop-filter: blur(22px);
  border-top: 1px solid rgba(212,176,94,0.08);
  transition: max-height 380ms cubic-bezier(0.22,1,0.36,1), padding 260ms ease;
}

.mobile-menu.open {
  max-height: 92dvh;
  padding: 12px 0 24px;
}

.mobile-link {
  display: flex;
  align-items: center;
  padding: 14px clamp(20px,4vw,32px);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.60);
  text-decoration: none;
  border-bottom: 1px solid rgba(212,176,94,0.06);
  transition: color 160ms ease, background 160ms ease;
}

.mobile-link:hover,
.mobile-link.active {
  color: #F5F1E8;
  background: rgba(212,176,94,0.05);
}

.mobile-link-sub {
  padding-left: clamp(32px,6vw,48px);
  font-size: 0.62rem;
  color: rgba(245,241,232,0.44);
}

.mobile-cta { padding: 16px clamp(20px,4vw,32px) 0; }

/* ═══════════════════════════════════════════
   PREMIUM DROPDOWN NAV SYSTEM
═══════════════════════════════════════════ */

/* ── Nav link — pill state (replaces underline) ── */
.nav-link {
  transition:
    color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.nav-link::after { display: none !important; }

.nav-link:hover,
.nav-link.active {
  color: #F5F1E8 !important;
  background: rgba(212,176,94,0.08);
  box-shadow: inset 0 0 0 1px rgba(212,176,94,0.12);
  transform: none;
}

/* ── Dropdown group ── */
.nav-group {
  position: relative;
}

/* Invisible bridge that fills the gap between trigger and dropdown panel.
   Without this, moving the cursor downward exits the trigger before entering
   the panel, causing the hover state to flicker off. */
.nav-group::after {
  content: '';
  position: absolute;
  left: -16px;
  right: -16px;
  top: 100%;
  height: 20px; /* covers the 14px margin-top gap + 6px arrow nib */
  pointer-events: auto;
}

.nav-dropdown-toggle {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.nav-chevron {
  flex-shrink: 0;
  opacity: 0.50;
  transition: transform var(--nav-med) var(--nav-ease), opacity var(--nav-fast) ease;
}

.nav-group:hover .nav-chevron,
.nav-group.is-open .nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* ═══════════════════════════════════════════════
   2025 DROPDOWN PANEL — premium glass
═══════════════════════════════════════════════ */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(12px) scale(0.97);
  min-width: 264px;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid rgba(212,176,94,0.20);
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.082),
      rgba(255,255,255,0.020) 46%,
      rgba(212,176,94,0.042)),
    rgba(5,7,11,0.84);
  backdrop-filter: blur(28px) saturate(155%);
  -webkit-backdrop-filter: blur(28px) saturate(155%);
  box-shadow:
    0 40px 120px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.028);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 240ms cubic-bezier(0.22,1,0.36,1),
    visibility 180ms ease;
  z-index: var(--z-dropdown);
  will-change: transform, opacity;
}

/* Glossy top-highlight overlay — gives the glass surface feel */
.nav-dropdown::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.16),
      rgba(255,255,255,0.035) 28%,
      transparent 58%
    );
  opacity: 0.42;
}

/* Subtle gold separator line below the label area */
.nav-dropdown::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  top: 54px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,176,94,0.30), transparent);
  pointer-events: none;
}

/* Account/wide dropdowns have their own section dividers — suppress the line */
.nav-dropdown-wide::after { display: none; }

.nav-group:hover .nav-dropdown,
.nav-group.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* ── Dropdown items ── */
.nav-dropdown a,
.nav-dropdown button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  color: rgba(245,241,232,0.66);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  background: transparent;
  border: 0;
  width: 100%;
  cursor: pointer;
  text-align: left;
  transition:
    color 180ms ease,
    background 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

/* Gold dot indicator — appears on hover */
.nav-dropdown a::before,
.nav-dropdown button::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(212,176,94,0.55);
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 180ms ease, transform 180ms ease;
}

.nav-dropdown a:hover,
.nav-dropdown button:hover {
  color: #F5F1E8;
  background:
    linear-gradient(90deg, rgba(212,176,94,0.12), rgba(255,255,255,0.035));
  transform: translateX(4px);
  box-shadow: inset 0 0 0 1px rgba(212,176,94,0.08);
}

.nav-dropdown a:hover::before,
.nav-dropdown button:hover::before {
  opacity: 1;
  transform: scale(1);
}

/* ── Staggered reveal on open ── */
@keyframes dropdownReveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.nav-group.is-open .nav-dropdown a,
.nav-group.is-open .nav-dropdown button,
.nav-group.is-open .dropdown-label,
.nav-group.is-open .dropdown-note,
.nav-group:hover .nav-dropdown a,
.nav-group:hover .nav-dropdown button,
.nav-group:hover .dropdown-label,
.nav-group:hover .dropdown-note {
  animation: dropdownReveal 220ms ease forwards;
}

.nav-dropdown .dropdown-label     { animation-delay: 0ms;   }
.nav-dropdown .dropdown-note      { animation-delay: 20ms;  }
.nav-dropdown a:nth-of-type(1)    { animation-delay: 38ms;  }
.nav-dropdown a:nth-of-type(2)    { animation-delay: 62ms;  }
.nav-dropdown a:nth-of-type(3)    { animation-delay: 86ms;  }
.nav-dropdown a:nth-of-type(4)    { animation-delay: 110ms; }
.nav-dropdown a:nth-of-type(5)    { animation-delay: 134ms; }
.nav-dropdown a:nth-of-type(6)    { animation-delay: 158ms; }
.nav-dropdown a:nth-of-type(7)    { animation-delay: 182ms; }
.nav-dropdown a:nth-of-type(8)    { animation-delay: 206ms; }

/* ── Dropdown layout helpers ── */
.nav-dropdown-wide { min-width: 280px; }

.nav-dropdown-sep {
  height: 1px;
  background: rgba(212,176,94,0.12);
  margin: 6px 8px;
}

.dropdown-section { margin-bottom: 4px; }

.dropdown-label {
  display: block;
  padding: 6px 14px 10px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(212,176,94,0.55);
  pointer-events: none;
}

.dropdown-note {
  padding: 0 14px 8px;
  font-size: 0.70rem;
  line-height: 1.45;
  color: rgba(245,241,232,0.36);
  pointer-events: none;
  white-space: normal;
}

.nav-dropdown-danger { color: rgba(210,100,88,0.72) !important; }
.nav-dropdown-danger:hover {
  color: rgba(230,110,98,0.95) !important;
  background: rgba(180,60,50,0.07) !important;
}

/* ── Active group ── */
.nav-group.nav-active > .nav-dropdown-toggle {
  color: #F5F1E8;
}
.nav-group.nav-active > .nav-dropdown-toggle .nav-chevron {
  opacity: 0.80;
}

/* ════════════════════════════════════════════════════════
   AUTH VISIBILITY SYSTEM
   Default: hide all conditional elements.
   Body classes (set by JS) reveal the correct set.
   !important beats any component-level display rule.
════════════════════════════════════════════════════════ */

/* Default: hide everything auth-conditional */
[data-auth="in"],
[data-auth="out"] {
  display: none !important;
}

/* Logged IN — show member elements, hide guest elements */
body.is-logged-in [data-auth="in"]  { display: inline-flex !important; }
body.is-logged-in [data-auth="out"] { display: none          !important; }

/* Logged IN — Account nav-group (li or div) needs flex */
body.is-logged-in li[data-auth="in"],
body.is-logged-in div[data-auth="in"].nav-group,
body.is-logged-in .nav-group[data-auth="in"] { display: flex !important; }

/* Logged OUT — show guest elements, hide member elements */
body.is-logged-out [data-auth="out"] { display: inline-flex !important; }
body.is-logged-out [data-auth="in"]  { display: none          !important; }

/* Block-level auth elements (sections only — divs handled by specific rules above) */
body.is-logged-in section[data-auth="in"]  { display: block !important; }
body.is-logged-out section[data-auth="out"] { display: block !important; }
/* Generic div[data-auth] content blocks (not nav-group) */
body.is-logged-in div[data-auth="in"]:not(.nav-group)  { display: block !important; }
body.is-logged-out div[data-auth="out"]:not(.nav-group) { display: block !important; }

/* ═══════════════════════════════════════════════
   2025 ACTION BUTTONS
═══════════════════════════════════════════════ */

/* Login / Join */
.header-auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(212,176,94,0.24);
  border-radius: 12px;
  color: #F5F1E8;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: linear-gradient(145deg, rgba(212,176,94,0.10), rgba(255,255,255,0.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  white-space: nowrap;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

body[data-page="login"] .header-auth-btn { display: none !important; }

.header-auth-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(212,176,94,0.48);
  background: linear-gradient(145deg, rgba(212,176,94,0.16), rgba(255,255,255,0.028));
  box-shadow: 0 12px 36px rgba(0,0,0,0.32), 0 0 20px rgba(212,176,94,0.06);
}

/* Body state classes */
body.is-logged-in  .guest-only  { display: none !important; }
body.is-logged-out .member-only { display: none !important; }

/* Cart / Basket */
.header-cart-btn {
  position: relative;
  overflow: hidden;
  min-height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(212,176,94,0.22);
  border-radius: 12px;
  color: rgba(245,241,232,0.86);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(212,176,94,0.09), rgba(255,255,255,0.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  white-space: nowrap;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

/* Shimmer sweep */
.header-cart-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(212,176,94,0.16), transparent 70%);
  transform: translateX(-120%);
  transition: transform 560ms ease;
  pointer-events: none;
}

.header-cart-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(212,176,94,0.46);
  box-shadow: 0 12px 36px rgba(0,0,0,0.32), 0 0 20px rgba(212,176,94,0.06);
}

.header-cart-btn:hover::before { transform: translateX(120%); }

.cart-count {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(212,176,94,0.16);
  color: #D4B05E;
  font-size: 0.58rem;
  font-family: var(--font-mono);
  transition: background 180ms ease;
}

.cart-count.has-items {
  background: rgba(212,176,94,0.24);
  animation: cartPulse 1200ms ease infinite;
}

/* ── Mobile accordion groups ── */
.mobile-group {
  border-bottom: 1px solid rgba(212,176,94,0.06);
}

.mobile-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(20px,4vw,32px);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.58);
  transition: color 160ms ease;
  text-align: left;
}

.mobile-group-toggle::after {
  content: '▾';
  font-size: 0.60rem;
  opacity: 0.55;
  transition: transform 240ms cubic-bezier(0.22,1,0.36,1), opacity 160ms ease;
  flex-shrink: 0;
  margin-left: 8px;
}

.mobile-group-toggle[aria-expanded="true"] {
  color: #F5F1E8;
}
.mobile-group-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
  opacity: 1;
}

.mobile-group-links {
  display: none;
  flex-direction: column;
  padding: 0 0 8px;
}
.mobile-group-links.is-open { display: flex; }

.mobile-cart-link {
  margin: 12px clamp(20px,4vw,32px) 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid rgba(212,176,94,0.20);
  border-radius: 10px;
  background: rgba(212,176,94,0.05);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.72);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}

.mobile-cart-link:hover {
  border-color: rgba(212,176,94,0.42);
  background: rgba(212,176,94,0.09);
}

/* ── Focus-visible accessibility ── */
.nav-link:focus-visible,
.nav-dropdown a:focus-visible,
.nav-dropdown-toggle:focus-visible,
.header-cart-btn:focus-visible {
  outline: 1px solid rgba(212,176,94,0.75);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ── Ticker bar ── */
/* (removed from individual sticky — now part of sticky shell) */

/* ── Compact header on scroll ── */
.header-shell {
  transition: min-height 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.header-compact .header-shell {
  min-height: 62px;
}

/* ── Reduced motion (nav elements) ── */
@media (prefers-reduced-motion: reduce) {
  .nav-dropdown,
  .nav-dropdown a,
  .nav-link,
  .header-cart-btn,
  .mobile-menu {
    animation: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   MARKET INTELLIGENCE STRIP — v2: clean, spaced, seamless loop
══════════════════════════════════════════════════════════════ */

/* ── Outer shell ── */
.market-bar,
.ticker-bar {
  position: relative;
  width: 100%;
  height: 44px;
  overflow: hidden;
  z-index: var(--z-ticker);
  pointer-events: none;
  box-sizing: border-box;

  background:
    radial-gradient(ellipse 30% 100% at 15% 50%, rgba(212,176,94,0.06), transparent),
    linear-gradient(180deg, rgba(5,7,11,0.96), rgba(5,7,11,0.84));

  border-top:    1px solid rgba(212,176,94,0.10);
  border-bottom: 1px solid rgba(212,176,94,0.07);
}

.ticker-bar * { pointer-events: auto; }

/* Kill shimmer — it was covering items */
.ticker-bar::before { display: none; }

/* ── Edge fades — narrow so items are visible near edges ── */
/* Edge fade — z-index 1 keeps it BELOW the track content (z-index 2) */
.ticker-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(5,7,11,1)  0%,
      transparent     4%,
      transparent    96%,
      rgba(5,7,11,1) 100%);
}

body.header-compact .ticker-bar { opacity: 0.92; }

/* ── Container override — full-width, no padding, no max-width ── */
.ticker-bar .container {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Viewport ── */
.ticker-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* ─────────────────────────────────────────────────────────────────
   ANIMATED TRACK — single canonical renderer (renderMarketTicker).
   Two identical .market-strip-set divs in the track; animating
   -50% moves exactly one set width for a seamless loop.
   No dependency on ticker-render.js or --ticker-shift.
   ───────────────────────────────────────────────────────────────── */
.ticker-track {
  display: flex !important;
  align-items: center;
  height: 100%;
  width: max-content;
  flex-shrink: 0;
  animation: marketTickerLoop 42s linear infinite;
  will-change: transform;
  position: relative;
  z-index: 2;
}

.ticker-bar:hover .ticker-track,
.ticker-bar:focus-within .ticker-track {
  animation-play-state: paused;
}

@keyframes marketTickerLoop {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ── Sets ── */
.market-strip-set {
  display: flex !important;
  visibility: visible !important;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  flex-shrink: 0;
  min-width: max-content;
}

/* ── Market item ── */
.market-item {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  min-width: 118px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.78);
  cursor: default;
}

.market-item::before,
.market-item::after { display: none; }

.market-item strong {
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(245,241,232,0.90);
}

.market-item .market-dash {
  font-size: 0.66rem;
  color: rgba(245,241,232,0.52);
}

.market-item .market-change {
  font-size: 0.62rem;
  color: rgba(212,176,94,0.55);
}

.market-item.positive .market-dash  { color: rgba(110,231,183,0.78); }
.market-item.positive .market-change{ color: rgba(110,231,183,0.88); text-shadow: 0 0 8px rgba(110,231,183,0.30); }
.market-item.negative .market-dash  { color: rgba(248,113,113,0.74); }
.market-item.negative .market-change{ color: rgba(248,113,113,0.85); text-shadow: 0 0 8px rgba(248,113,113,0.28); }
.market-item.neutral  .market-change{ color: rgba(212,176,94,0.48); }

.market-item.is-flash { outline: 1px solid rgba(212,176,94,0.28); border-radius: 4px; }

/* ── Old ticker-render.js classes — restyled to match new design ── */
.ticker-item {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  min-width: 118px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.78);
}

.ticker-symbol {
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(245,241,232,0.90);
}

.ticker-price {
  display: inline !important;
  font-size: 0.65rem;
  color: rgba(245,241,232,0.52);
}

.ticker-change {
  display: inline !important;
  font-size: 0.62rem;
  color: rgba(212,176,94,0.55);
}

.ticker-item.up   .ticker-change { color: rgba(110,231,183,0.88); text-shadow: 0 0 8px rgba(110,231,183,0.30); }
.ticker-item.down .ticker-change { color: rgba(248,113,113,0.85); text-shadow: 0 0 8px rgba(248,113,113,0.28); }
.ticker-item.up   .ticker-price  { color: rgba(110,231,183,0.75); }
.ticker-item.down .ticker-price  { color: rgba(248,113,113,0.72); }

/* Separator — hide the pipe */
.ticker-sep   { display: none !important; }
.ticker-delta { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   LIVE STATUS LABEL — fixed left anchor above the track
══════════════════════════════════════════════════════════════ */
.market-status {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 26px 0 14px;
  background: linear-gradient(90deg,
    rgba(5,7,11,0.99) 0%,
    rgba(5,7,11,0.99) 52%,
    transparent 100%);
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(212,176,94,0.58);
  pointer-events: none;
  white-space: nowrap;
}

.market-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6EE7B7;
  box-shadow: 0 0 8px rgba(110,231,183,0.65);
  animation: livePulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes livePulse {
  0%, 100% { opacity: 0.4; box-shadow: 0 0 4px rgba(110,231,183,0.30); }
  50%       { opacity: 1.0; box-shadow: 0 0 12px rgba(110,231,183,0.75); }
}

/* ── Responsive ── */
@media (max-width: 760px) {
  .ticker-bar { height: 40px; }
  .ticker-viewport { height: 40px; }
  .ticker-track { animation-duration: 26s; }
  .market-strip-set { gap: 20px; padding-right: 20px; }
  .market-item { font-size: 0.62rem; min-width: 100px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none !important; transform: none !important; }
  .market-live-dot { animation: none; }
  .ticker-viewport { overflow-x: auto; scrollbar-width: none; }
  .ticker-viewport::-webkit-scrollbar { display: none; }
}

html[data-reduced-motion="true"] .ticker-track { animation: none !important; }

:focus-visible {
  outline: 1px solid rgba(200, 169, 110, 0.75);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Optional market watchlist cards (used when present) */
[data-stock-cards] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-md);
}

.market-card {
  background: rgba(18, 22, 27, 0.78);
  border: 1px solid rgba(200, 169, 110, 0.14);
  border-radius: 16px;
  padding: 1.05rem 1.05rem 0.95rem;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 118px;
}

.market-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.market-card-symbol {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(243, 239, 231, 0.86);
}

.market-card-price {
  font-family: var(--font-mono);
  font-size: 1.08rem;
  letter-spacing: 0.08em;
  color: rgba(243, 239, 231, 0.92);
}

.market-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.market-card-change {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: rgba(237, 231, 219, 0.7);
}

.market-card-spark {
  width: 120px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: rgba(237, 231, 219, 0.35);
}

.market-card.up .market-card-change,
.market-card.up .market-card-spark {
  color: rgba(118, 216, 154, 0.78);
}

.market-card.down .market-card-change,
.market-card.down .market-card-spark {
  color: rgba(255, 120, 120, 0.72);
}

.market-card.is-stale {
  opacity: 0.78;
}

html[data-reduced-motion="true"] .reveal {
  transition: none;
  transform: none;
  opacity: 1;
}

.home-hero,
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.home-hero::before,
.page-hero::before,
.card::before,
.premium-card::before,
.system-card::before,
.process-card::before,
.flow-step::before,
.hero-panel::before,
.table-card::before,
.form-panel::before,
.info-panel::before,
.legal-card::before,
.success-card::before,
.cta-card::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  z-index: 2;
}

.home-hero::after,
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(820px 560px at 18% 38%, rgba(200, 169, 110, 0.12), transparent 66%),
    radial-gradient(720px 560px at 82% 22%, rgba(200, 169, 110, 0.07), transparent 62%),
    linear-gradient(to bottom, rgba(200, 169, 110, 0.06), transparent 42%);
  opacity: 0.95;
}

.home-hero > .container,
.page-hero > .container {
  position: relative;
  z-index: 1;
}

.home-hero {
  padding: clamp(5.5rem, 8vw, 8rem) 0 clamp(4rem, 6vw, 6rem);
}

.page-hero {
  padding: clamp(3.6rem, 5vw, 4.9rem) 0 2.75rem;
}

.grid-split,
.hero-grid,
.page-hero-grid,
.split-layout,
.form-layout,
.detail-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: var(--grid-gap);
  align-items: start;
}

.card {
  position: relative;
  background: linear-gradient(180deg, rgba(26, 26, 31, 0.96), rgba(14, 14, 18, 0.98));
  border: 1px solid var(--gold-border);
  border-radius: var(--radius);
  padding: var(--panel-pad);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.hero-panel,
.premium-card,
.system-card,
.process-card,
.flow-step,
.table-card,
.chart-card,
.form-panel,
.info-panel,
.legal-card,
.success-card,
.cta-card {
  position: relative;
}

.hero-panel {
  padding: var(--panel-pad-lg);
}

.info-panel {
  padding: var(--panel-pad-lg);
}

.table-card,
.chart-card {
  padding: calc(var(--panel-pad) + var(--space-sm));
}

.legal-card {
  padding: calc(var(--panel-pad) + var(--space-sm));
}

.premium-card,
.system-card,
.process-card,
.flow-step,
.hero-panel,
.table-card,
.chart-card,
.legal-card {
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.premium-card:hover,
.system-card:hover,
.process-card:hover,
.flow-step:hover,
.hero-panel:hover,
.table-card:hover,
.chart-card:hover,
.legal-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-border-strong);
}

/* =========================================================
   Unified grid + spacing + typography system
   ========================================================= */

.grid-main {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.span-12 {
  grid-column: span 12;
}

.span-8 {
  grid-column: span 8;
}

.span-6 {
  grid-column: span 6;
}

.span-4 {
  grid-column: span 4;
}

.grid-cards,
.grid-2,
.grid-3,
.grid-4,
.systems-spotlight,
.process-grid,
.system-grid,
.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

.grid-flow,
.flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

.grid-dashboard {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

.dashboard-summary {
  grid-column: span 4;
}

.dashboard-table {
  grid-column: span 8;
}

.prose {
  max-width: var(--measure);
}

.prose p + p,
.prose ul + p,
.prose p + ul,
.prose ul + ul {
  margin-top: var(--space-md);
}

/* =========================================================
   Motion / reveal
   ========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--transition), transform 520ms var(--transition);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
    transform: none;
  }
}

/* =========================================================
   Headings, labels, lists
   ========================================================= */

.eyebrow-line {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.eyebrow-line::before {
  content: '';
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.8;
}

.card-title,
.detail-title,
.flow-title {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 0.98;
}

.card-title {
  font-size: clamp(1.35rem, 1.8vw, 2rem);
}

.detail-title {
  font-size: clamp(1.6rem, 2.2vw, 2.4rem);
}

.flow-title {
  font-size: 1.35rem;
}

.card-copy {
  margin-top: var(--space-sm);
}

.info-panel .section-title,
.chart-card .section-title,
.table-card .section-title,
.form-panel .section-title,
.legal-card .section-title {
  font-size: clamp(1.9rem, 3vw, 3.2rem);
}

.chart-card svg {
  width: 100%;
  height: auto;
  margin-top: var(--space-lg);
  opacity: 0.92;
}

.cta-card .section-title {
  font-size: clamp(2.4rem, 4.4vw, 4.6rem);
}

.legal-card .body-copy {
  max-width: var(--measure);
  font-style: normal;
  line-height: 1.95;
}

.detail-label,
.data-label {
  margin: var(--space-md) 0 0;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero-summary-list,
.info-list,
.detail-list {
  margin: var(--space-lg) 0 0;
  padding-left: 1.1rem;
  color: var(--text-subtle);
  line-height: 1.8;
}

.hero-summary-list li + li,
.info-list li + li,
.detail-list li + li {
  margin-top: var(--space-sm);
}

.system-objective {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(200, 169, 110, 0.12);
}

.muted-note {
  margin: var(--space-lg) 0 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(200, 169, 110, 0.22);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
  background: rgba(200, 169, 110, 0.06);
  white-space: nowrap;
}

/* =========================================================
   Metrics
   ========================================================= */

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.metric-tile {
  border: 1px solid rgba(200, 169, 110, 0.18);
  background: rgba(7, 7, 8, 0.42);
  padding: var(--space-md);
  border-radius: var(--radius);
}

.metric-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.metric-label {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* =========================================================
   Tables
   ========================================================= */

.table-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(200, 169, 110, 0.12);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.data-table th,
.data-table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(200, 169, 110, 0.14);
  vertical-align: top;
}

.data-table thead th {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(200, 169, 110, 0.22);
}

.data-table tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--text);
}

.data-table tbody td {
  color: var(--text-subtle);
}

.data-table td:last-child {
  text-align: right;
}

.data-table tbody tr:hover {
  background: rgba(200, 169, 110, 0.05);
}

.table-card {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 720px) {
  .table-card::after {
    content: '';
    position: sticky;
    right: 0;
    top: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(270deg, rgba(14, 14, 18, 0.96), rgba(14, 14, 18, 0));
    pointer-events: none;
  }
}


/* =========================================================
   Forms
   ========================================================= */

.form-stack {
  display: grid;
  gap: var(--space-xl);
}

.form-panel .button-row {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(200, 169, 110, 0.12);
}

.form-fields {
  display: grid;
  gap: var(--space-xl);
}

.form-group {
  margin: 0;
  min-inline-size: 0;
  padding: var(--space-lg);
  border-radius: var(--radius);
  border: 1px solid rgba(200, 169, 110, 0.14);
  background: rgba(7, 7, 8, 0.28);
}

.form-group-title {
  padding: 0 var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.field {
  display: grid;
  gap: var(--space-sm);
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid rgba(200, 169, 110, 0.18);
  background: rgba(7, 7, 8, 0.55);
  color: var(--text);
  padding: 0.9rem 1rem;
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}

.field textarea {
  min-height: 160px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgba(200, 169, 110, 0.42);
  background: rgba(7, 7, 8, 0.72);
}

/* =========================================================
   Systems catalog
   ========================================================= */

.catalog-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(200, 169, 110, 0.12);
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.filter-button {
  appearance: none;
  border-radius: var(--radius);
  border: 1px solid rgba(200, 169, 110, 0.18);
  background: rgba(7, 7, 8, 0.34);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.65rem 0.8rem;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.filter-button:hover {
  border-color: rgba(200, 169, 110, 0.32);
  color: var(--text);
  transform: translateY(-1px);
}

.filter-button.active {
  background: rgba(200, 169, 110, 0.12);
  border-color: rgba(200, 169, 110, 0.42);
  color: var(--gold-bright);
}

.system-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.system-card .body-copy {
  max-width: 66ch;
}

.system-card .action-row {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(200, 169, 110, 0.12);
}

.system-code {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* =========================================================
   Layout helpers
   ========================================================= */

.stack {
  display: grid;
  gap: var(--space-xl);
}

.timeline {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.timeline-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-lg);
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(200, 169, 110, 0.12);
}

.timeline-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.timeline-year {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.timeline-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.05;
}

.timeline-copy {
  margin: var(--space-xs) 0 0;
  color: var(--text-subtle);
  font-style: italic;
  line-height: 1.85;
}

/* =========================================================
   Info / success / admin
   ========================================================= */

.info-stack {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.success-card {
  text-align: center;
  max-width: 940px;
  margin: 0 auto;
}

.success-reference {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-top: var(--space-xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(200, 169, 110, 0.22);
  background: rgba(200, 169, 110, 0.06);
}

.success-card [data-success-context] {
  margin-top: var(--space-lg);
}

.success-card .info-list {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  max-width: 70ch;
}

.admin-card {
  position: relative;
  background: linear-gradient(180deg, rgba(26, 26, 31, 0.96), rgba(14, 14, 18, 0.98));
  border: 1px solid var(--gold-border);
  padding: var(--panel-pad);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.admin-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(200, 169, 110, 0.22);
  background: rgba(200, 169, 110, 0.08);
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* =========================================================
   Footer
   ========================================================= */

/* ═══════════════════════════════════════
   UNIVERSAL FOOTER
═══════════════════════════════════════ */

.site-footer {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 56px 0 0;
  margin: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(212,176,94,0.07), transparent 32%),
    linear-gradient(180deg, rgba(5,7,11,0.96), #05070B);
  border-top: 1px solid rgba(212,176,94,0.14);
  overflow: hidden;
}

.footer-container {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding-left: 44px;
  padding-right: 44px;
  padding-bottom: 52px;

  display: grid;
  grid-template-columns: 1.15fr 0.8fr 0.8fr 0.95fr;
  gap: clamp(32px, 4vw, 68px);
  align-items: start;
}

/* ── Brand column ── */
.footer-brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.footer-logo,
.footer-brand img {
  width: 72px;
  height: auto;
  margin-bottom: 18px;
  opacity: 0.92;
}

.footer-brand h3,
.footer-column h4,
.footer-contact h4 {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #D4B05E;
}

.footer-brand h3 {
  max-width: 360px;
  white-space: normal;
  overflow-wrap: break-word;
}

.footer-brand p,
.footer-contact p {
  margin: 0 0 8px;
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(245,241,232,0.58);
  max-width: 360px;
}

.footer-brand p {
  max-width: 380px;
}

.footer-brand span {
  display: block;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(212,176,94,0.70);
}

/* ── Nav / Contact columns ── */
.footer-column,
.footer-contact {
  min-width: 0;
  border-left: 1px solid rgba(212,176,94,0.10);
  padding-left: 28px;
  display: flex;
  flex-direction: column;
}

.footer-column a {
  display: block;
  margin-bottom: 11px;
  color: rgba(245,241,232,0.60);
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.5;
  transition: color 180ms ease, transform 180ms ease;
}

.footer-column a:hover {
  color: #D4B05E;
  transform: translateX(4px);
}

.footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 13px 24px;
  border: 1px solid rgba(212,176,94,0.36);
  border-radius: 10px;
  color: #F5F1E8;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(212,176,94,0.07);
  transition: background 200ms ease, border-color 200ms ease;
  width: fit-content;
}

.footer-cta:hover {
  background: rgba(212,176,94,0.14);
  border-color: rgba(212,176,94,0.68);
}

/* ── Bottom bar ── */
.footer-bottom {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 20px 44px;
  border-top: 1px solid rgba(212,176,94,0.10);

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}

.footer-bottom p {
  margin: 0;
  max-width: 720px;
  font-size: 0.74rem;
  line-height: 1.55;
  color: rgba(245,241,232,0.48);
}

/* ── Responsive: 1100px ── */
@media (max-width: 1100px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 52px);
  }
}

/* ── Responsive: 720px ── */
@media (max-width: 720px) {
  .site-footer {
    padding-top: 48px;
  }

  .footer-container {
    grid-template-columns: 1fr;
    padding-left: 20px;
    padding-right: 20px;
    gap: 28px;
    padding-bottom: 42px;
  }

  .footer-column,
  .footer-contact {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(212,176,94,0.10);
    padding-top: 22px;
  }

  .footer-bottom {
    padding-left: 20px;
    padding-right: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* =========================================================
   Auth + Account Portal (Premium member area)
   ========================================================= */

.auth-split {
  align-items: stretch;
}

.auth-hero {
  display: grid;
  gap: var(--space-xl);
}

.auth-benefits {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.auth-benefit {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(200, 169, 110, 0.12);
}

.auth-benefit:first-child {
  border-top: 0;
  padding-top: 0;
}

.auth-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(200, 169, 110, 0.18);
  border-radius: var(--radius);
  background: rgba(200, 169, 110, 0.06);
  color: var(--gold-bright);
}

.auth-panel-head {
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(200, 169, 110, 0.12);
  margin-bottom: var(--space-lg);
}

.auth-form .field-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.check input {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
}

.inline-link {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.inline-link:hover {
  color: var(--text);
}

.auth-status {
  margin-top: var(--space-md);
  min-height: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.auth-status.is-error {
  color: rgba(255, 120, 120, 0.88);
}

.auth-status.is-success {
  color: rgba(118, 216, 154, 0.9);
}

.field-control {
  position: relative;
  display: flex;
  align-items: center;
}

.field-control input {
  padding-right: 3.75rem;
}

.field-action {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(200, 169, 110, 0.18);
  background: rgba(7, 7, 8, 0.35);
  color: var(--text-muted);
  border-radius: var(--radius);
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.field-action:hover {
  border-color: rgba(200, 169, 110, 0.42);
  color: var(--text);
  background: rgba(200, 169, 110, 0.08);
}

.field-action-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.secure-note {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(200, 169, 110, 0.12);
}

.account-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}

.account-nav {
  position: sticky;
  top: calc(74px + 34px + var(--space-lg));
  display: grid;
  gap: var(--space-sm);
  align-self: start;
}

.account-nav-head {
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(200, 169, 110, 0.12);
  margin-bottom: var(--space-sm);
}

.account-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(200, 169, 110, 0.12);
  background: rgba(7, 7, 8, 0.22);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.account-link:hover {
  transform: translateY(-1px);
  border-color: rgba(200, 169, 110, 0.28);
  color: var(--text);
  background: rgba(200, 169, 110, 0.06);
}

.account-link.active {
  border-color: rgba(200, 169, 110, 0.42);
  color: var(--gold-bright);
  background: rgba(200, 169, 110, 0.1);
}

.account-nav-foot {
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(200, 169, 110, 0.12);
  margin-top: var(--space-md);
  display: grid;
  gap: var(--space-md);
}

.identity-panel {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.avatar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
}

.avatar-frame {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(200, 169, 110, 0.32);
  background: radial-gradient(circle at 30% 30%, rgba(200, 169, 110, 0.14), rgba(7, 7, 8, 0.6));
  box-shadow: 0 0 0 6px rgba(200, 169, 110, 0.04);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-initials {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text);
}

.avatar-meta {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.avatar-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.avatar-sub {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kv-list {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.kv {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(200, 169, 110, 0.1);
}

.kv:first-child {
  border-top: 0;
  padding-top: 0;
}

.kv dt {
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.kv dd {
  margin: 0;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  color: rgba(237, 231, 219, 0.86);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(200, 169, 110, 0.22);
  background: rgba(200, 169, 110, 0.08);
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge.up {
  border-color: rgba(118, 216, 154, 0.3);
  background: rgba(118, 216, 154, 0.08);
  color: rgba(118, 216, 154, 0.92);
}

.badge.down {
  border-color: rgba(255, 120, 120, 0.3);
  background: rgba(255, 120, 120, 0.07);
  color: rgba(255, 120, 120, 0.9);
}

.badge.neutral {
  border-color: rgba(200, 169, 110, 0.14);
  background: rgba(7, 7, 8, 0.24);
  color: var(--text-muted);
}

.account-metrics .admin-card {
  box-shadow: none;
}

@media (max-width: 960px) {
  .account-layout {
    grid-template-columns: 1fr;
  }

  .account-nav {
    position: relative;
    top: auto;
  }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 980px) {
  :root {
    --grid-gap: var(--space-lg);
  }

  /* Collapse header to 2-col: brand | actions+toggle */
  .header-shell {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .main-nav {
    display: none;
  }

  .header-actions {
    display: flex;
    gap: 8px;
  }

  .mobile-toggle {
    display: inline-flex;
  }

  .secondary-cta {
    display: none;
  }

  .grid-split,
  .hero-grid,
  .page-hero-grid,
  .split-layout,
  .form-layout,
  .detail-hero-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .section-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .dashboard-summary,
  .dashboard-table {
    grid-column: span 12;
  }
}

@media (max-width: 720px) {
  :root {
    --grid-gap: var(--space-md);
    --panel-pad: var(--space-md);
    --panel-pad-lg: var(--space-lg);
  }

  .container {
    padding: 0 1.25rem;
  }

  .header-shell,
  .mobile-menu {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .data-table {
    min-width: 560px;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Reduced-motion: disable non-essential animations globally ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-track, .market-strip-track { animation: none !important; }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-bg-system::before,
  .status-dot,
  .live-dot,
  .radar-ring {
    animation: none !important;
  }
}

/* ══════════════════════════════════════
   Page: msiia-premium.html (home)
══════════════════════════════════════ */
  body[data-page="home"] {
    --home-bg: #07090c;
    --home-bg-2: #0b0f14;
    --home-panel: rgba(18, 22, 27, 0.78);
    --home-panel-strong: rgba(15, 18, 23, 0.88);
    --home-border: rgba(200, 169, 110, 0.18);
    --home-border-strong: rgba(200, 169, 110, 0.28);
    --home-gold: #c8a96e;
    --home-gold-muted: #8f7445;
    --home-text: #f2efe8;
    --home-text-subtle: #b8b1a3;
    --home-line: rgba(255, 255, 255, 0.06);
    position: relative;
    background:
      radial-gradient(circle at 70% 40%, rgba(200, 169, 110, 0.12), transparent 25%),
      linear-gradient(180deg, #05070b 0%, #0b0f14 50%, #05070b 100%);
    color: var(--home-text);
  }

  body[data-page="home"]::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(1200px 900px at 50% 110%, rgba(0, 0, 0, 0.5), transparent 58%);
    opacity: 0.85;
  }

  body[data-page="home"]::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle at center, transparent 42%, rgba(0, 0, 0, 0.16) 72%, rgba(0, 0, 0, 0.42) 100%);
    opacity: 0.9;
  }

  body[data-page="home"] .site-texture {
    opacity: 0.015;
  }

  body[data-page="home"] .section.alt,
  body[data-page="home"] .section.deep {
    background: transparent;
    border-top-color: rgba(255, 255, 255, 0.04);
    border-bottom-color: transparent;
  }

  body[data-page="home"] {
    --system-planet-bg-image:
      linear-gradient(90deg, rgba(5, 7, 11, 0.99) 0%, rgba(5, 7, 11, 0.9) 48%, rgba(5, 7, 11, 0.5) 74%, rgba(5, 7, 11, 0.08) 94%, transparent 100%),
      radial-gradient(circle at 84% 54%, rgba(200, 169, 110, 0.08) 0%, rgba(200, 169, 110, 0.02) 34%, transparent 64%),
      url("/assets/planet-system-worldmap.png");
    --system-planet-bg-repeat: no-repeat;
    --system-planet-bg-size: cover, 1500px 1500px, clamp(1200px, 86vw, 1880px);
  }

  html,
  body,
  .site-main {
    background-color: #05070b;
  }

  body[data-page="home"] {
    background-color: #05070b;
    min-height: 100%;
  }

  body[data-page="home"] .container {
    width: min(calc(100% - 2rem), 1480px);
    margin-inline: auto;
    padding: 0;
  }

  body[data-page="home"] .site-main,
  body[data-page="home"] section,
  body[data-page="home"] .site-footer {
    background-color: transparent;
  }

  body[data-page="home"] .section-label,
  body[data-page="home"] .section-kicker,
  body[data-page="home"] .block-kicker,
  body[data-page="home"] .card-kicker,
  body[data-page="home"] .chart-header,
  body[data-page="home"] .metrics-table-header,
  body[data-page="home"] .hero-kicker {
    color: var(--home-gold);
  }

  body[data-page="home"] .hero-title,
  body[data-page="home"] .section-title,
  body[data-page="home"] .block-title,
  body[data-page="home"] .card-title,
  body[data-page="home"] .system-card-title,
  body[data-page="home"] .chart-title,
  body[data-page="home"] .flow-step-title {
    color: var(--home-text);
  }

  body[data-page="home"] .hero-copy,
  body[data-page="home"] .section-copy,
  body[data-page="home"] .block-description,
  body[data-page="home"] .card-copy,
  body[data-page="home"] .body-copy,
  body[data-page="home"] .chart-description,
  body[data-page="home"] .metric-row-label,
  body[data-page="home"] .system-card-description,
  body[data-page="home"] .flow-step-description,
  body[data-page="home"] .system-metric-label,
  body[data-page="home"] .metric-label {
    color: var(--home-text-subtle);
  }

  body[data-page="home"] .hero-title .accent,
  body[data-page="home"] .section-title .accent,
  body[data-page="home"] .metric-value .accent,
  body[data-page="home"] .metric-row-value,
  body[data-page="home"] .system-metric-value {
    color: var(--home-gold);
  }

  body[data-page="home"] .hero-title .outline {
    color: transparent;
    -webkit-text-stroke: 1px rgba(243, 239, 231, 0.62);
    text-stroke: 1px rgba(243, 239, 231, 0.62);
  }

  /* Core Capabilities (System Overview) visual field */
  .system-overview {
    position: relative;
    padding: clamp(4.2rem, 6vw, 6rem) 0;
    overflow: hidden;      /* contain the photon visual inside this section */
    isolation: isolate;
  }

  /* Bottom fade so visual doesn't bleed into the next section */
  .system-overview::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 140px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, #05070B);
    z-index: 4;
  }

  .overview-top {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(520px, 1.12fr);
    gap: clamp(2.25rem, 4.6vw, 4.75rem);
    align-items: center;
    margin-bottom: var(--space-xxl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(200, 169, 110, 0.12);
    position: relative;
    z-index: 2;
  }

  .overview-copy .section-label {
    margin: 0 0 0.85rem;
  }

  .overview-copy .section-kicker {
    margin: 0;
  }

  .overview-copy .section-title {
    margin-top: 0.85rem;
    max-width: 44rem;
  }

  .overview-copy .section-copy {
    margin-top: 1.15rem;
    max-width: 40rem;
  }

  .overview-visual {
    position: relative;
    justify-self: end;
    width: min(560px, 100%);
    padding-top: 0.25rem;
  }

  /* Remove the old boxed visual field — replaced by transparent photon layer */
  .overview-visual-field {
    display: none;
  }

  /* ── Transparent floating photon layer — no box, no frame ── */
  .core-systems-visual {
    position: relative;
    min-height: clamp(280px, 30vw, 440px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    isolation: isolate;
    justify-self: end;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    pointer-events: none;
    transform: translateX(18px);
    z-index: 2;
  }

  /* Stronger ambient glow behind planet */
  .core-systems-visual::before {
    content: '';
    position: absolute;
    inset: 8%;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(212,176,94,0.14), transparent 70%);
    filter: blur(58px);
    opacity: 0.78;
    z-index: -1;
    pointer-events: none;
  }

  /* The transparent PNG — larger, cinematic slide-in from right */
  .planetary-photon-layer {
    display: block;
    width: min(100%, 780px);
    max-width: none;
    height: auto;
    object-fit: contain;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0;
    transform: translate3d(80px, 46px, 0) scale(0.92);
    -webkit-mask-image:
      radial-gradient(ellipse at center, black 0%, black 58%, transparent 82%);
    mask-image:
      radial-gradient(ellipse at center, black 0%, black 58%, transparent 82%);
    filter:
      drop-shadow(0 0 44px rgba(212,176,94,0.18))
      drop-shadow(0 36px 100px rgba(0,0,0,0.44));
    transition:
      opacity   1100ms cubic-bezier(.22,1,.36,1),
      transform 1300ms cubic-bezier(.22,1,.36,1),
      filter    1000ms ease;
  }

  .core-systems-visual.is-visible .planetary-photon-layer {
    opacity: 0.96;
    transform: translate3d(0, 0, 0) scale(1);
    animation: planetaryPhotonFloat 10s ease-in-out infinite alternate;
  }

  @keyframes planetaryPhotonFloat {
    from { transform: translate3d(0, 0, 0)      scale(1);     }
    to   { transform: translate3d(-10px, -16px, 0) scale(1.025); }
  }

  @media (prefers-reduced-motion: reduce) {
    .planetary-photon-layer,
    .core-systems-visual.is-visible .planetary-photon-layer {
      animation:  none !important;
      transition: none !important;
      opacity:    0.95 !important;
      transform:  none !important;
    }
  }

  .overview-visual-field::before {
    content: '';
    position: absolute;
    inset: 10%;
    border-radius: 14px;
    background:
      repeating-linear-gradient(90deg, rgba(200,169,110,0.06) 0 1px, transparent 1px 80px),
      repeating-linear-gradient(0deg, rgba(200,169,110,0.06) 0 1px, transparent 1px 80px),
      repeating-linear-gradient(90deg, rgba(200,169,110,0.025) 0 1px, transparent 1px 40px),
      repeating-linear-gradient(0deg, rgba(200,169,110,0.025) 0 1px, transparent 1px 40px);
    opacity: 0.62;
    pointer-events: none;
    mask-image: radial-gradient(circle at 60% 35%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 42%, rgba(0,0,0,0.2) 72%, rgba(0,0,0,0) 100%);
  }

  .overview-visual-field::after {
    content: '';
    position: absolute;
    inset: 10%;
    border-radius: 14px;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(200,169,110,0.55), rgba(200,169,110,0.55)) 0 0 / 28px 3px no-repeat,
      linear-gradient(180deg, rgba(200,169,110,0.55), rgba(200,169,110,0.55)) 0 0 / 3px 28px no-repeat,
      linear-gradient(90deg, rgba(200,169,110,0.55), rgba(200,169,110,0.55)) 100% 0 / 28px 3px no-repeat,
      linear-gradient(180deg, rgba(200,169,110,0.55), rgba(200,169,110,0.55)) 100% 0 / 3px 28px no-repeat,
      linear-gradient(90deg, rgba(200,169,110,0.55), rgba(200,169,110,0.55)) 0 100% / 28px 3px no-repeat,
      linear-gradient(180deg, rgba(200,169,110,0.55), rgba(200,169,110,0.55)) 0 100% / 3px 28px no-repeat,
      linear-gradient(90deg, rgba(200,169,110,0.55), rgba(200,169,110,0.55)) 100% 100% / 28px 3px no-repeat,
      linear-gradient(180deg, rgba(200,169,110,0.55), rgba(200,169,110,0.55)) 100% 100% / 3px 28px no-repeat;
    filter: drop-shadow(0 0 10px rgba(200,169,110,0.18));
    opacity: 0.62;
  }

  .overview-visual-markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 18px;
    background:
      radial-gradient(circle at 66% 42%, rgba(255,255,255,0.06), transparent 55%),
      radial-gradient(circle at 74% 46%, rgba(200,169,110,0.10), transparent 58%);
    opacity: 0.72;
  }

  .overview-planet {
    position: absolute;
    left: 50%;
    top: 52%;
    right: auto;
    width: clamp(520px, 48vw, 880px);
    max-width: none;
    height: auto;
    opacity: 0.92;
    transform: translate(-58%, -42%) scale(1.65);
    filter:
      drop-shadow(0 0 18px rgba(200,169,110,0.20))
      drop-shadow(0 0 68px rgba(200,169,110,0.08));
    mix-blend-mode: screen;
  }

  @media (max-width: 1024px) {
    .overview-top {
      grid-template-columns: 1fr;
    }

    .overview-visual {
      justify-self: start;
      width: min(640px, 100%);
      margin-top: 1.25rem;
    }

    .core-systems-visual {
      justify-self: center;
      transform: none;
      min-height: 360px;
    }

    .planetary-photon-layer {
      width: min(118%, 720px);
    }

    .overview-planet {
      left: 50%;
      top: 54%;
      right: auto;
      width: clamp(520px, 88vw, 860px);
      transform: translate(-58%, -46%) scale(1.5);
      mix-blend-mode: lighten;
    }
  }

  @media (max-width: 640px) {
    .overview-visual-field {
      border-radius: 16px;
    }

    .overview-visual-field::before,
    .overview-visual-field::after {
      inset: 12%;
      border-radius: 12px;
    }

    .overview-planet {
      top: 56%;
      left: 50%;
      right: auto;
      width: 122%;
      max-width: 560px;
      transform: translate(-56%, -54%) scale(1.15);
      opacity: 0.82;
    }
  }

  .home-hero {
    padding: clamp(5.4rem, 7vw, 6.6rem) 0 clamp(2.8rem, 4vw, 3.8rem);
    position: relative;
    z-index: 1;
    overflow: hidden;
  }

  .home-hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 88%;
    pointer-events: none;
    background:
      radial-gradient(circle at 18% 18%, rgba(200, 169, 110, 0.14), transparent 24%),
      radial-gradient(circle at 74% 34%, rgba(17, 22, 31, 0.42), transparent 34%);
    opacity: 0.92;
    z-index: 0;
  }

  .home-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(
        90deg,
        rgba(3,5,10,0.94) 0%,
        rgba(3,5,10,0.78) 35%,
        rgba(3,5,10,0.24) 70%,
        transparent 100%
      ),
      radial-gradient(circle at 70% 40%, rgba(0, 0, 0, 0.24), transparent 60%);
  }

  .hero-bg-system {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--system-planet-bg-image);
    background-repeat: var(--system-planet-bg-repeat);
    background-position:
      left top,
      right 16% center,
      right -34% 58%;
    background-size: var(--system-planet-bg-size);
    opacity: 0.86;
    filter: saturate(1.05) contrast(1.08);
  }

  /* Hero planet intro (animated image) */
  .home-hero .hero-bg-system {
    background-image:
      linear-gradient(90deg, rgba(5, 7, 11, 0.99) 0%, rgba(5, 7, 11, 0.9) 48%, rgba(5, 7, 11, 0.5) 74%, rgba(5, 7, 11, 0.08) 94%, transparent 100%),
      radial-gradient(circle at 84% 54%, rgba(200, 169, 110, 0.08) 0%, rgba(200, 169, 110, 0.02) 34%, transparent 64%);
    background-repeat: no-repeat;
    background-position: left top, right 16% center;
    background-size: cover, 1500px 1500px;
  }

  .hero-planet-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,0.25) 18%,
      rgba(0,0,0,0.75) 42%,
      black 62%,
      black 100%
    );
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,0.25) 18%,
      rgba(0,0,0,0.75) 42%,
      black 62%,
      black 100%
    );
  }

  .hero-planet-animated {
    position: absolute;
    width: clamp(900px, 78vw, 1600px);
    max-width: none;
    left: 44%;
    top: 50%;
    opacity: 0;
    transform:
      translate(-82%, -50%)
      scale(1.04);
    filter:
      drop-shadow(0 0 36px rgba(200,169,110,0.18))
      drop-shadow(0 0 120px rgba(200,169,110,0.08));
    mix-blend-mode: screen;
    will-change: transform, opacity;
    animation: heroPlanetIntro 2.6s cubic-bezier(.19, 1, .22, 1) 0.25s forwards;
  }

  @keyframes heroPlanetIntro {
    0% {
      opacity: 0;
      transform:
        translate(-100%, -50%)
        scale(0.98);
    }

    55% {
      opacity: 0.72;
    }

    100% {
      opacity: 0.92;
      transform:
        translate(-66%, -50%)
        scale(1.04);
    }
  }

  .hero-bg-system::before {
    content: '';
    position: absolute;
    right: 6%;
    top: 54%;
    transform: translateY(-50%) translateZ(0);
    width: clamp(920px, 64vw, 1440px);
    height: clamp(920px, 64vw, 1440px);
    background: radial-gradient(circle, rgba(200, 169, 110, 0.18) 0%, rgba(200, 169, 110, 0.06) 40%, transparent 70%);
    filter: blur(68px);
    opacity: 0.95;
    will-change: opacity;
    animation: heroSystemPulse 10.5s ease-in-out infinite;
  }

  .hero-bg-system::after {
    content: '';
    position: absolute;
    inset: -10%;
    pointer-events: none;
    background-image:
      linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
      repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 0, rgba(255, 255, 255, 0.045) 1px, transparent 1px, transparent 8px);
    background-size: 160px 160px, 160px 160px, auto;
    opacity: 0.045;
    mask-image: radial-gradient(circle at 78% 54%, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.42) 38%, transparent 70%);
    mix-blend-mode: screen;
  }

  @keyframes heroSystemPulse {
    0%, 100% { opacity: 0.82; }
    50%       { opacity: 0.96; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-bg-system::before {
      animation: none;
    }

    .hero-planet-animated {
      animation: none;
      opacity: 0.9;
      transform: translate(-66%, -50%) scale(1.04);
    }
  }

  .home-hero .container {
    position: relative;
    z-index: 2;
  }

  .hero-hud {
    position: absolute;
    top: clamp(7.25rem, 16vh, 10.5rem);
    right: clamp(1.5rem, 4vw, 3.5rem);
    width: min(760px, 52vw);
    height: min(560px, 62vh);
    z-index: 1;
    pointer-events: none;
    opacity: 0.75;
    mix-blend-mode: screen;
    background:
      linear-gradient(to right, rgba(200, 169, 110, 0.18) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(200, 169, 110, 0.18) 1px, transparent 1px),
      radial-gradient(circle at 72% 55%, rgba(200, 169, 110, 0.08), transparent 56%);
    background-size: 140px 140px, 140px 140px, auto;
    mask-image: radial-gradient(circle at 72% 55%, rgba(0, 0, 0, 0.9), transparent 68%);
  }

  .hero-hud::before,
  .hero-hud::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background:
      linear-gradient(var(--home-gold) 0 0) left top / 60px 2px no-repeat,
      linear-gradient(var(--home-gold) 0 0) left top / 2px 60px no-repeat,
      linear-gradient(var(--home-gold) 0 0) right top / 60px 2px no-repeat,
      linear-gradient(var(--home-gold) 0 0) right top / 2px 60px no-repeat,
      linear-gradient(var(--home-gold) 0 0) left bottom / 60px 2px no-repeat,
      linear-gradient(var(--home-gold) 0 0) left bottom / 2px 60px no-repeat,
      linear-gradient(var(--home-gold) 0 0) right bottom / 60px 2px no-repeat,
      linear-gradient(var(--home-gold) 0 0) right bottom / 2px 60px no-repeat;
    opacity: 0.32;
  }

  .hero-hud::after {
    inset: 18%;
    opacity: 0.16;
    background:
      linear-gradient(to right, rgba(200, 169, 110, 0.14) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(200, 169, 110, 0.14) 1px, transparent 1px);
    background-size: 120px 120px, 120px 120px;
  }

  .hero-status-card {
    position: absolute;
    top: clamp(8.8rem, 20vh, 13.8rem);
    right: clamp(2rem, 5vw, 4.2rem);
    width: min(360px, 26vw);
    padding: 1.4rem;
    z-index: 2;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 1.5rem 1.6rem !important;
  }

  .hero-status-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(200,169,110,.68), rgba(200,169,110,.68)) left top / 44px 2px no-repeat,
      linear-gradient(180deg, rgba(200,169,110,.68), rgba(200,169,110,.68)) left top / 2px 44px no-repeat,

      linear-gradient(90deg, rgba(200,169,110,.68), rgba(200,169,110,.68)) right top / 44px 2px no-repeat,
      linear-gradient(180deg, rgba(200,169,110,.68), rgba(200,169,110,.68)) right top / 2px 44px no-repeat,

      linear-gradient(90deg, rgba(200,169,110,.68), rgba(200,169,110,.68)) left bottom / 44px 2px no-repeat,
      linear-gradient(180deg, rgba(200,169,110,.68), rgba(200,169,110,.68)) left bottom / 2px 44px no-repeat,

      linear-gradient(90deg, rgba(200,169,110,.68), rgba(200,169,110,.68)) right bottom / 44px 2px no-repeat,
      linear-gradient(180deg, rgba(200,169,110,.68), rgba(200,169,110,.68)) right bottom / 2px 44px no-repeat;
    opacity: .72;
  }

  .hero-status-card::after {
    content: '';
    position: absolute;
    inset: 10px 12px;
    pointer-events: none;
    background:
      radial-gradient(circle at 92% 15%, rgba(77,186,110,.12), transparent 22%),
      radial-gradient(circle at 52% 45%, rgba(200,169,110,.04), transparent 65%),
      repeating-linear-gradient(0deg, rgba(200,169,110,.028) 0 1px, transparent 1px 48px);
    opacity: .68;
    -webkit-mask-image: radial-gradient(circle at 52% 44%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.55) 56%, transparent 78%);
    mask-image: radial-gradient(circle at 52% 44%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.55) 56%, transparent 78%);
  }

  .hero-status-card > * {
    position: relative;
    z-index: 2;
  }

  .status-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(200,169,110,.12);
  }

  .status-card-kicker {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(243, 239, 231, 0.86);
  }

  .status-card-sub {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(200, 169, 110, 0.7);
  }

  .status-card-body {
    display: grid;
    gap: 1rem;
    padding-top: 1rem;
  }

  .status-item {
    position: relative;
    padding: 0 2.2rem 1rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(200,169,110,.14) !important;
    padding: 0 2.4rem 1rem 0 !important;
  }

  .status-item--last {
    border-bottom: none !important;
    padding-bottom: 0;
  }

  .status-label {
    margin: 0;
    font-family: var(--font-mono);
    font-size: .56rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(184,177,163,.62);
  }

  .status-value {
    margin: .45rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.6vw, 1.85rem);
    line-height: 0.95;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(243,239,231,.94);
  }

  .status-value--small {
    font-size: clamp(1.1rem, 1.2vw, 1.45rem);
  }

  .status-dot {
    position: absolute;
    right: 0.1rem;
    top: .15rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4dba6e;
    box-shadow:
      0 0 0 3px rgba(77,186,110,.12),
      0 0 18px rgba(77,186,110,.45);
  }

  .status-dot--good::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: rgba(77,186,110, 0.14);
    filter: blur(8px);
  }

  @media (max-width: 1024px) {
    .hero-status-card {
      display: none;
    }
  }

  @media (max-width: 640px) {
    .hero-hud {
      display: none;
    }
  }

  .hero-layout {
    display: block;
    position: relative;
    min-height: clamp(500px, 63vh, 650px);
  }

  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 42rem;
    display: grid;
    gap: 1.45rem;
    align-content: center;
    padding: 0.4rem 0 1rem;
    padding-right: clamp(4rem, 7vw, 7.5rem);
  }

  .system-card::after,
  .architecture-block::after,
  .metrics-table::after,
  .performance-chart::after,
  .premium-card::after,
  .cta-card::after {
    content: '';
    position: absolute;
    inset: 1px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    pointer-events: none;
    opacity: 0.9;
  }

  .eyebrow-line {
    margin-bottom: -0.15rem;
  }

  .hero-title {
    display: grid;
    gap: 0.03em;
    font-size: clamp(4.2rem, 6.9vw, 7.9rem);
    line-height: 0.84;
    letter-spacing: 0.03em;
    text-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  }

  .hero-title-line {
    display: block;
    margin-bottom: 0.03em;
  }

  .hero-copy {
    max-width: 33rem;
    font-family: var(--font-body);
    font-size: 1.12rem;
    font-style: normal;
    line-height: 1.56;
    color: #b8b1a3;
    margin-top: 0.55rem;
  }

  .hero-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 0.85rem;
    flex-wrap: wrap;
  }

  .home-hero .btn-primary {
    min-width: 206px;
    padding-inline: 1.4rem;
  }

  .hero-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.35rem 0.2rem;
    border: 0;
    background: transparent;
    color: rgba(243, 239, 231, 0.9);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .hero-link-cta::after {
    content: '→';
    color: var(--home-gold);
    font-size: 1.05rem;
    line-height: 1;
    transition: transform var(--transition), color var(--transition);
  }

  .hero-link-cta:hover {
    color: var(--home-gold);
  }

  .hero-link-cta:hover::after {
    transform: translateX(2px);
  }

  .hero-stats {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    max-width: min(100%, 42rem);
    margin-top: 2rem;
    padding-top: 0;
    border-top: 0;
    position: relative;
    z-index: 2;
  }

  .hero-stat {
    flex: 1 1 0;
    min-width: 120px;
    border-left: 1px solid rgba(255,255,255,0.1);
    padding: 0 1.5rem;
  }

  .hero-stat-value {
    margin: 0;
    color: var(--home-gold);
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 2.2vw, 2.75rem);
    line-height: 0.92;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .hero-stat-label {
    margin: 0.65rem 0 0;
    color: var(--home-text-subtle);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    line-height: 1.55;
  }

  .hero-brand-strip {
    margin-top: 4.8rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    text-align: center;
  }

  .hero-brand-strip-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
  }

  .hero-brand-strip-head span {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 169, 110, 0.18), transparent);
  }

  .hero-brand-strip-head p {
    margin: 0;
    color: rgba(184, 177, 163, 0.82);
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
  }

  .hero-brand-row {
    display: flex;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    margin-top: 1.2rem;
    opacity: 0.6;
  }

  .hero-brand-row span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.3rem;
    padding: 0 1.6rem;
    color: rgba(184, 177, 163, 0.68);
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.2vw, 1.22rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    transition: color var(--transition), border-color var(--transition), transform var(--transition);
  }

  .hero-brand-row span:first-child {
    border-left: 0;
  }

  .hero-brand-row span:hover {
    color: rgba(200, 169, 110, 0.84);
    border-left-color: rgba(200, 169, 110, 0.12);
    transform: translateY(-1px);
  }

  .system-overview,
  .architecture-section,
  .performance-snapshot,
  .performance-intel-section,
  .featured-systems,
  .cta-section {
    position: relative;
    z-index: 1;
    padding: var(--space-section) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
  }

  .section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200, 169, 110, 0.14) 50%, transparent 100%);
    margin: 0;
  }

  .section-label {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    margin-bottom: 1.25rem;
    display: inline-block;
  }

  .section-head {
    margin-bottom: 2.75rem;
    padding-bottom: 1.4rem;
    border-bottom-color: rgba(255, 255, 255, 0.06);
  }

  .section-copy {
    max-width: 90%;
    margin-top: 1rem;
  }

  .system-overview-grid,
  .systems-spotlight {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
  }

  /* Additional Systems (Featured) — compact split layout */
  .additional-systems-section {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 6vw, 88px) 0;
    background:
      radial-gradient(circle at 30% 40%, rgba(200,169,110,0.08), transparent 40%),
      radial-gradient(circle at 70% 60%, rgba(200,169,110,0.05), transparent 50%),
      linear-gradient(180deg, #05070C, #0A0F18, #05070C);
  }

  .additional-systems-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  }

  .systems-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    overflow: visible;
  }

  .systems-visual::before {
    content: "";
    position: absolute;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(200,169,110,0.12), transparent 70%);
    filter: blur(8px);
    z-index: 0;
    pointer-events: none;
  }

  .systems-visual::after {
    content: "";
    position: absolute;
    inset: 10%;
    pointer-events: none;
    background:
      repeating-linear-gradient(90deg, rgba(200,169,110,0.025) 0 1px, transparent 1px 120px),
      repeating-linear-gradient(0deg, rgba(200,169,110,0.02) 0 1px, transparent 1px 120px);
    opacity: 0.18;
    mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.25) 52%, rgba(0,0,0,0) 80%);
  }

  .systems-visual img {
    width: clamp(280px, 38vw, 520px);
    height: auto;
    max-height: min(380px, 52vh);
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter:
      drop-shadow(0 0 60px rgba(200,169,110,0.25))
      drop-shadow(0 28px 80px rgba(0,0,0,0.65));
  }

  .systems-text {
    max-width: 520px;
    justify-self: end;
  }

  .section-description {
    opacity: 0.7;
    line-height: 1.6;
  }

  .additional-systems-divider {
    height: 1px;
    margin: 2rem 0;
    background: linear-gradient(to right, transparent, rgba(200,169,110,0.4), transparent);
  }

  .additional-systems-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 1.6vw, 1.5rem);
  }

  .additional-systems-section .additional-system-card {
    background: linear-gradient(180deg, rgba(10,15,25,0.65), rgba(5,8,14,0.9));
    border: 1px solid rgba(200,169,110,0.15);
    border-radius: 16px;
    padding: 1.4rem;
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }

  .additional-systems-section .additional-system-card:hover {
    transform: translateY(-6px);
    border-color: rgba(200,169,110,0.35);
    box-shadow: 0 22px 70px rgba(0,0,0,0.42);
  }

  .additional-systems-section .additional-system-card .action-row {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .system-card-cta {
    border: 1px solid rgba(200,169,110,0.3) !important;
    background: transparent !important;
    padding: 0.6rem 1rem !important;
    transition: all 0.3s ease !important;
  }

  .system-card-cta:hover {
    background: rgba(200,169,110,0.08) !important;
  }

  @media (max-width: 1100px) {
    .additional-systems-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 900px) {
    .additional-systems-grid {
      grid-template-columns: 1fr;
    }

    .systems-text {
      justify-self: start;
    }

    .additional-systems-cards {
      grid-template-columns: 1fr;
    }

    .systems-visual {
      min-height: 360px;
    }
  }

  .system-card,
  .architecture-block,
  .metrics-table,
  .performance-chart,
  .premium-card,
  .cta-card {
    position: relative;
    background: rgba(12, 16, 22, 0.7);
    border: 1px solid rgba(200, 169, 110, 0.14);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(10px);
  }

  .system-card {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  }

  .system-card:hover,
  .premium-card:hover,
  .architecture-block:hover,
  .metrics-table:hover,
  .performance-chart:hover,
  .cta-card:hover {
    transform: translateY(-4px);
    border-color: #c8a96e;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  }

  .system-icon {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(200, 169, 110, 0.2);
    background: linear-gradient(180deg, rgba(200, 169, 110, 0.18), rgba(143, 116, 69, 0.1));
    color: var(--home-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    font-size: 1.25rem;
  }

  .system-icon .hi-icon {
    width: 22px;
    height: 22px;
  }

  .system-metric {
    margin-top: auto;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(15, 18, 23, 0.66);
  }

  .architecture-layers {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .architecture-layer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .architecture-block {
    padding: 1.75rem;
  }

  .architecture-block::before {
    height: 2px;
    background: linear-gradient(90deg, transparent, #c8a96e, transparent);
    opacity: 0.6;
  }

  .architecture-flow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
  }

  .flow-step {
    padding: 1.45rem 1.2rem;
    background: rgba(16, 19, 24, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  }

  .flow-step-number {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--home-gold);
  }

  .flow-step-title {
    font-size: 1rem;
  }

  .performance-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 1.5rem;
    align-items: stretch;
  }

  .metrics-table,
  .performance-chart {
    padding: 2rem;
    background: rgba(10, 14, 20, 0.75);
    border: 1px solid rgba(200, 169, 110, 0.12);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.3);
  }

  .metrics-table-header {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .metrics-table-tag {
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.45rem 0.7rem;
    color: var(--home-gold);
    border: 1px solid rgba(200, 169, 110, 0.18);
    background: rgba(15, 18, 23, 0.78);
  }

  .metrics-list {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
  }

  .metric-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .metric-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .metric-row-value {
    text-align: right;
  }

  .performance-chart {
    overflow: hidden;
  }

  .performance-chart svg {
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 1rem;
    background:
      linear-gradient(to bottom, transparent 0%, transparent 24%, rgba(255, 255, 255, 0.04) 24%, rgba(255, 255, 255, 0.04) 25%, transparent 25%, transparent 49%, rgba(255, 255, 255, 0.04) 49%, rgba(255, 255, 255, 0.04) 50%, transparent 50%, transparent 74%, rgba(255, 255, 255, 0.04) 74%, rgba(255, 255, 255, 0.04) 75%, transparent 75%, transparent 100%);
  }

  .premium-card {
    padding: 1.75rem;
    background: rgba(12, 16, 22, 0.7);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  }

  .premium-card:nth-child(even) {
    background: rgba(14, 18, 24, 0.85);
  }

  .cta-card {
    padding: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
    background:
      radial-gradient(circle at top center, rgba(200, 169, 110, 0.10), transparent 36%),
      linear-gradient(180deg, rgba(22, 27, 32, 0.92), rgba(12, 16, 20, 0.94));
    border-color: rgba(200, 169, 110, 0.22);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(200, 169, 110, 0.05);
  }

  .cta-card .section-copy {
    max-width: 600px;
    margin: 0 auto 2rem;
  }

  @media (max-width: 1180px) {
    .performance-grid,
    .architecture-layer {
      grid-template-columns: 1fr;
    }

    .hero-content {
      max-width: 100%;
      padding: 0 2rem 0 0;
      align-content: start;
    }

    .hero-layout {
      min-height: auto;
    }

    .hero-bg-system {
      background-position:
        left top,
        center 58%,
        center 74%;
      background-size:
        cover,
        980px 980px,
        clamp(720px, 92vw, 1120px);
      opacity: 0.65;
    }

    .hero-bg-system::before {
      right: auto;
      left: 50%;
      top: 58%;
      transform: translate(-50%, -50%);
      width: clamp(560px, 76vw, 860px);
      height: clamp(560px, 76vw, 860px);
      filter: blur(68px);
    }

    .hero-bg-system::after {
      mask-image: radial-gradient(circle at 50% 72%, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.42) 40%, transparent 72%);
    }

    .hero-stats {
      margin-top: 1.8rem;
    }

    .architecture-flow {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 768px) {
    .home-hero {
      padding: 6rem 0 3rem;
    }

    .hero-title {
      font-size: clamp(3rem, 10vw, 5rem);
    }

    .hero-content {
      padding-right: 1.2rem;
    }

    .hero-bg-system {
      background-position:
        left top,
        center 62%,
        center 78%;
      background-size:
        cover,
        740px 740px,
        clamp(560px, 96vw, 820px);
      opacity: 0.48;
    }

    .hero-bg-system::before {
      width: 520px;
      height: 520px;
      top: 66%;
      filter: blur(70px);
    }

    .hero-bg-system::after {
      opacity: 0.03;
      mask-image: radial-gradient(circle at 50% 78%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, transparent 74%);
    }
  }

  @media (max-width: 640px) {
    .home-hero {
      padding: 5rem 0 2.6rem;
    }

    .hero-layout {
      gap: 2.25rem;
      min-height: auto;
    }

    .hero-actions {
      flex-direction: column;
      align-items: flex-start;
    }

    .hero-bg-system {
      opacity: 0.38;
      background-position:
        left top,
        center 66%,
        center 82%;
      background-size:
        cover,
        620px 620px,
        620px;
    }

    .hero-bg-system::before {
      width: 420px;
      height: 420px;
      top: 70%;
      filter: blur(66px);
      opacity: 0.82;
    }

    .architecture-flow,
    .system-overview-grid,
    .systems-spotlight {
      grid-template-columns: 1fr;
    }

    .hero-stat {
      width: 100%;
      padding: 0 0 0 1rem;
    }

    .hero-stats {
      gap: 1rem;
      margin-top: 1.5rem;
    }

    .hero-link-cta {
      padding-left: 0;
    }

    .hero-brand-strip-head {
      grid-template-columns: 1fr;
      gap: 0.7rem;
    }

    .hero-brand-strip-head span:first-child {
      display: none;
    }

    .hero-brand-strip-head span:last-child {
      display: block;
    }

    .hero-brand-row span {
      width: 50%;
      border-left: 0;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      padding: 0.85rem 1rem;
    }

    .hero-brand-row span:nth-child(-n + 2) {
      border-top: 0;
    }

    .section-head {
      gap: 1rem;
    }

    .section-copy {
      max-width: 100%;
    }

    .cta-card,
    .metrics-table,
    .performance-chart,
    .system-card,
    .premium-card,
    .architecture-block {
      padding: 1.5rem;
    }
  }

  /* ═══════════════════════════════════════════════════════════════
     MODULAR DESIGN — SHARED INFRASTRUCTURE SECTION
     Neural Stellar Field HUD Integration
  ═══════════════════════════════════════════════════════════════ */

  .architecture-section .arch-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
    margin-bottom: 3rem;
  }

  /* LEFT: text + section-head stays untouched in layout */
  .architecture-section .arch-left {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* RIGHT: HUD panel container */
  .arch-hud-panel {
    position: relative;
    justify-self: end;
    width: min(560px, 100%);
    align-self: start;
  }

  /* The framed container */
  .arch-hud-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    border: 1px solid rgba(200, 169, 110, 0.22);
    background:
      radial-gradient(ellipse at 54% 44%, rgba(212,176,94,0.10) 0%, transparent 62%),
      radial-gradient(ellipse at 82% 68%, rgba(143,116,69,0.07) 0%, transparent 55%),
      linear-gradient(180deg, rgba(6,8,12,0.60) 0%, rgba(5,7,11,0.85) 100%);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.03) inset,
      0 0 60px rgba(212,176,94,0.08),
      0 30px 80px rgba(0,0,0,0.60);
    backdrop-filter: blur(6px);
    overflow: hidden; /* clip inner grid + glow layers */
  }

  /* Internal technical grid — LAYER 2 */
  .arch-hud-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background:
      repeating-linear-gradient(90deg, rgba(212,176,94,0.055) 0 1px, transparent 1px 72px),
      repeating-linear-gradient(0deg,  rgba(212,176,94,0.055) 0 1px, transparent 1px 72px),
      repeating-linear-gradient(90deg, rgba(212,176,94,0.022) 0 1px, transparent 1px 36px),
      repeating-linear-gradient(0deg,  rgba(212,176,94,0.022) 0 1px, transparent 1px 36px);
    pointer-events: none;
    z-index: 1;
    mask-image: radial-gradient(ellipse at 55% 44%, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.1) 82%, rgba(0,0,0,0) 100%);
  }

  /* Inner glow wash — LAYER 3 */
  .arch-hud-frame::after {
    content: '';
    position: absolute;
    inset: -12%;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(ellipse at 55% 46%, rgba(212,176,94,0.14) 0%, rgba(212,176,94,0.06) 38%, transparent 68%);
    filter: blur(18px);
  }

  /* The SVG cluster — LAYERS 4 + 5 */
  .stellar-cluster-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 3;
    /* shift cluster center to match the SVG's core coords (860/1600 = 53.75%) */
    transform: scale(1.04);
    transform-origin: 53.75% 52.22%;
    mix-blend-mode: screen;
    opacity: 0.92;
  }

  /* Gold corner brackets — LAYER 6 (HUD frame overlay) */
  .arch-hud-brackets {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    pointer-events: none;
    z-index: 4;
    background:
      /* top-left H */
      linear-gradient(90deg, rgba(255,220,145,0.72) 0 0) 0 0 / 32px 2.5px no-repeat,
      /* top-left V */
      linear-gradient(180deg, rgba(255,220,145,0.72) 0 0) 0 0 / 2.5px 32px no-repeat,
      /* top-right H */
      linear-gradient(90deg, rgba(255,220,145,0.72) 0 0) 100% 0 / 32px 2.5px no-repeat,
      /* top-right V */
      linear-gradient(180deg, rgba(255,220,145,0.72) 0 0) 100% 0 / 2.5px 32px no-repeat,
      /* bottom-left H */
      linear-gradient(90deg, rgba(255,220,145,0.72) 0 0) 0 100% / 32px 2.5px no-repeat,
      /* bottom-left V */
      linear-gradient(180deg, rgba(255,220,145,0.72) 0 0) 0 100% / 2.5px 32px no-repeat,
      /* bottom-right H */
      linear-gradient(90deg, rgba(255,220,145,0.72) 0 0) 100% 100% / 32px 2.5px no-repeat,
      /* bottom-right V */
      linear-gradient(180deg, rgba(255,220,145,0.72) 0 0) 100% 100% / 2.5px 32px no-repeat;
  }

  /* Status bar beneath panel */
  .arch-hud-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.85rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid rgba(200,169,110,0.14);
    border-radius: 8px;
    background: rgba(7,9,12,0.72);
    backdrop-filter: blur(8px);
  }

  .arch-hud-status-item {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
  }

  .arch-hud-status-label {
    margin: 0;
    font-family: var(--font-mono, monospace);
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(200,169,110,0.55);
  }

  .arch-hud-status-value {
    margin: 0;
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(243,239,231,0.90);
  }

  .arch-hud-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(92,214,108,0.92);
    box-shadow: 0 0 8px rgba(92,214,108,0.50);
    flex-shrink: 0;
    align-self: center;
  }

  /* Responsive collapse */
  @media (max-width: 1100px) {
    .architecture-section .arch-split {
      grid-template-columns: 1fr;
    }
    .arch-hud-panel {
      justify-self: start;
      width: min(600px, 100%);
      margin-top: 1.5rem;
    }
  }

  @media (max-width: 640px) {
    .arch-hud-frame {
      border-radius: 12px;
    }
    .arch-hud-frame::before {
      border-radius: 12px;
    }
    .stellar-cluster-svg {
      transform: scale(1.06);
    }
  }

  
  /* ════════════════════════════════════════════════════════════════════
     MSIIA PREMIUM MODERNIZATION v2.0
     Full homepage UI/UX upgrade — dark luxury institutional system
  ════════════════════════════════════════════════════════════════════ */

  /* ── REFINED DESIGN TOKENS ── */
  body[data-page="home"] {
    --gold-100: #fff8ed;
    --gold-200: #ffe9bb;
    --gold-300: #ffd98a;
    --gold-400: #f5c45a;
    --gold-500: #c8a96e;
    --gold-600: #9d7f46;
    --gold-700: #6e5425;
    --gold-glow: rgba(200,169,110,0.18);
    --gold-glow-soft: rgba(200,169,110,0.08);
    --surface-0: #03050a;
    --surface-1: #070a10;
    --surface-2: #0b0f17;
    --surface-3: rgba(14,18,26,0.85);
    --surface-4: rgba(20,26,36,0.70);
    --border-faint: rgba(255,255,255,0.04);
    --border-gold-faint: rgba(200,169,110,0.10);
    --border-gold: rgba(200,169,110,0.20);
    --border-gold-strong: rgba(200,169,110,0.35);
    --text-primary: #f4f1ea;
    --text-secondary: #b4aca0;
    --text-tertiary: #726a60;
    --green-active: #4dba6e;
    --red-alert: #e05a5a;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --shadow-card: 0 8px 32px rgba(0,0,0,0.40), 0 2px 8px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.03) inset;
    --shadow-card-hover: 0 20px 60px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.35), 0 0 0 1px rgba(200,169,110,0.12) inset;
    --shadow-glow-gold: 0 0 40px rgba(200,169,110,0.12), 0 0 80px rgba(200,169,110,0.06);
    --transition-smooth: all 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast: all 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* ── GLOBAL TEXTURE UPGRADE ── */
  body[data-page="home"] {
    background:
      radial-gradient(ellipse 140% 80% at 72% 0%, rgba(200,169,110,0.09) 0%, transparent 50%),
      radial-gradient(ellipse 80% 60% at 0% 60%, rgba(200,169,110,0.05) 0%, transparent 50%),
      linear-gradient(180deg, #03050a 0%, #060910 40%, #08091280 70%, #03050a 100%);
  }

  /* ── NOISE GRAIN OVERLAY ── */
  body[data-page="home"] .site-texture {
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 160px 160px;
  }

  /* ════════════════════════════════════
     NAVIGATION — PREMIUM UPGRADE
  ════════════════════════════════════ */

  /* site-header-shell: do NOT redefine position/z-index/isolation here —
     the global rule above handles it. These overrides caused the scroll glitch. */
  .site-header-shell .site-header {
    position: relative !important;
    top: auto !important;
    z-index: 2;
    /* Remove inner backdrop-filter — the shell handles the blur */
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-header-shell .ticker-bar,
  .site-header-shell .market-bar {
    position: relative !important;
    top: auto !important;
    z-index: 1;
  }

  .site-header {
    border-bottom: none;
  }

  .site-header::after {
    content: '';
    position: absolute;
    inset: 0;
    bottom: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.18) 30%, rgba(200,169,110,0.28) 50%, rgba(200,169,110,0.18) 70%, transparent 100%);
    pointer-events: none;
  }

  /* nav-link pill style — global rules apply, no home-page override needed */

  /* ticker bar — global rules in market intelligence strip section apply */

  /* ════════════════════════════════════
     HERO — CINEMATIC UPGRADE
  ════════════════════════════════════ */

  /* Stronger diagonal scan-line overlay for the hero */
  .home-hero {
    position: relative;
  }

  .home-hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 100%;
    pointer-events: none;
    background:
      repeating-linear-gradient(
        -45deg,
        transparent 0,
        transparent 48px,
        rgba(200,169,110,0.008) 48px,
        rgba(200,169,110,0.008) 49px
      );
    z-index: 0;
    opacity: 0.6;
  }

  /* Hero kicker — premium mono tag style */
  .hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.60rem !important;
    letter-spacing: 0.24em !important;
    padding: 0.38rem 0.8rem !important;
    border: 1px solid rgba(200,169,110,0.22) !important;
    border-radius: 4px !important;
    background: rgba(200,169,110,0.05) !important;
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
  }

  .hero-kicker::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
  }

  /* Hero title — tighter, more premium */
  .hero-title {
    line-height: 0.86 !important;
    letter-spacing: 0.02em !important;
  }

  /* Hero stats — redesigned as data strip */
  .hero-stats {
    padding: 1.2rem 0 !important;
    border-top: 1px solid rgba(200,169,110,0.12) !important;
    border-bottom: 1px solid rgba(200,169,110,0.06) !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    margin-top: 1.5rem !important;
  }

  .hero-stat {
    flex: none !important;
    min-width: auto !important;
    border-left: 1px solid rgba(255,255,255,0.08) !important;
    padding: 0.5rem 1.6rem !important;
    position: relative;
  }

  .hero-stat:first-child {
    border-left: none !important;
    padding-left: 0 !important;
  }

  .hero-lower-row {
    display: grid;
    grid-template-columns: minmax(360px, 560px) auto;
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
    margin-top: 1.4rem;
  }

  .hero-lower-row .hero-copy {
    margin: 0 !important;
    max-width: 560px;
  }

  .hero-lower-row .hero-actions {
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    justify-content: flex-start;
    white-space: nowrap;
  }

  .hero-lower-row .btn-primary {
    min-width: 190px;
    height: 52px;
  }

  .hero-lower-row .hero-link-cta {
    height: 52px;
    display: inline-flex;
    align-items: center;
  }

  .hero-stats--inline {
    margin: 1.5rem 0 0 !important;
    padding: 0.75rem 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(90px, 1fr)) !important;
    align-items: center;
    gap: 0 !important;
  }

  .hero-stats--inline .hero-stat {
    padding: 0 1rem !important;
  }

  .hero-stats--inline .hero-stat:first-child {
    padding-left: 0 !important;
  }

  .hero-stats--inline .hero-stat-value {
    font-size: clamp(1.35rem, 1.8vw, 1.9rem) !important;
  }

  .hero-stats--inline .hero-stat-label {
    font-size: 0.54rem !important;
  }

  @media (max-width: 900px) {
    .hero-lower-row {
      grid-template-columns: 1fr;
      gap: 1.2rem;
    }

    .hero-lower-row .hero-actions {
      flex-wrap: wrap;
      white-space: normal;
    }

    .hero-stats--inline {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .hero-stats--inline .hero-stat:nth-child(odd) {
      border-left: 0 !important;
      padding-left: 0 !important;
    }

    .hero-stats--inline .hero-stat:nth-child(n+3) {
      border-top: 1px solid rgba(255,255,255,0.06) !important;
      padding-top: 0.85rem !important;
      margin-top: 0.85rem !important;
    }
  }

  .hero-stat::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--gold-500);
    transition: width 0.6s cubic-bezier(0.22,1,0.36,1) 0.2s;
  }

  .hero-stat.is-visible::after {
    width: 100%;
  }

  .hero-stat-value {
    font-size: clamp(1.8rem, 2.1vw, 2.55rem) !important;
    font-family: var(--font-display) !important;
    color: var(--gold-500) !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    text-shadow: 0 0 32px rgba(200,169,110,0.30);
  }

  .hero-stat-label {
    font-size: 0.58rem !important;
    letter-spacing: 0.16em !important;
    margin-top: 0.4rem !important;
    color: rgba(180,172,160,0.65) !important;
    line-height: 1.5 !important;
  }

  /* Hero brand strip — refined */
  .hero-brand-strip {
    margin-top: 3.5rem !important;
    padding-top: 1.2rem !important;
  }

  .hero-brand-strip-head p {
    font-size: 0.52rem !important;
    letter-spacing: 0.28em !important;
    color: rgba(180,172,160,0.45) !important;
  }

  .hero-brand-row span {
    font-family: var(--font-mono) !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.18em !important;
    color: rgba(180,172,160,0.35) !important;
    text-transform: uppercase !important;
    transition: var(--transition-fast) !important;
  }

  .hero-brand-row span:hover {
    color: rgba(200,169,110,0.65) !important;
  }

  /* ════════════════════════════════════
     STATUS CARD — PREMIUM REDESIGN
  ════════════════════════════════════ */

  .hero-status-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 1.5rem 1.6rem !important;
  }

  .status-card-kicker {
    font-size: 0.58rem !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    color: var(--gold-500) !important;
  }

  .status-card-sub {
    font-size: 0.52rem !important;
    letter-spacing: 0.2em !important;
    color: rgba(200,169,110,0.45) !important;
  }

  .status-label {
    font-size: 0.52rem !important;
    letter-spacing: 0.2em !important;
    color: rgba(180,172,160,0.55) !important;
  }

  .status-value {
    font-size: 1.5rem !important;
    letter-spacing: 0.12em !important;
    color: var(--text-primary) !important;
    text-shadow: none !important;
  }

  .status-dot {
    width: 8px !important;
    height: 8px !important;
    background: var(--green-active) !important;
    box-shadow:
      0 0 0 2px rgba(77,186,110,0.12),
      0 0 12px rgba(77,186,110,0.45) !important;
    will-change: opacity;
    animation: statusPulse 2.8s ease-in-out infinite;
  }

  @keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.65; }
  }

  /* ════════════════════════════════════
     SECTION TRANSITIONS — CONTINUITY
  ════════════════════════════════════ */

  /* Subtle gold thread connecting sections */
  .system-overview,
  .architecture-section,
  .performance-snapshot,
  .featured-systems,
  .discipline-section,
  .cta-section {
    position: relative !important;
  }

  .system-overview::before,
  .architecture-section::before,
  .performance-snapshot::before,
  .featured-systems::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 80px;
    background: linear-gradient(180deg, transparent, rgba(200,169,110,0.30), transparent);
    pointer-events: none;
  }

  /* Section label — upgraded mono tag */
  .section-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-family: var(--font-mono) !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.26em !important;
    color: var(--gold, #c8a96e) !important;
    text-transform: uppercase !important;
    padding: 0.22rem 0.7rem !important;
    border: 1px solid rgba(200,169,110,0.16) !important;
    border-radius: 3px !important;
    background: rgba(200,169,110,0.04) !important;
    margin-bottom: 1rem !important;
  }

  .section-label::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold, #c8a96e);
    box-shadow: 0 0 8px rgba(200,169,110,0.60);
    flex-shrink: 0;
  }

  /* Section kicker */
  .section-kicker {
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: rgba(200,169,110,0.70) !important;
    margin-bottom: 0.6rem !important;
  }

  /* Section title */
  .section-title {
    font-size: clamp(1.85rem, 2.8vw, 3.2rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.01em !important;
  }

  /* ════════════════════════════════════
     SYSTEM CARDS — PREMIUM REDESIGN
  ════════════════════════════════════ */

  .system-card {
    border-radius: var(--radius-lg) !important;
    border: 1px solid rgba(200,169,110,0.10) !important;
    background:
      linear-gradient(145deg, rgba(14,18,28,0.92) 0%, rgba(8,10,18,0.88) 100%) !important;
    box-shadow: var(--shadow-card) !important;
    padding: 2rem !important;
    transition: var(--transition-smooth) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Diagonal highlight seam */
  .system-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(200,169,110,0.30) 30%,
      rgba(200,169,110,0.50) 55%,
      rgba(200,169,110,0.30) 80%,
      transparent 100%
    );
    pointer-events: none;
  }

  .system-card::after {
    content: '' !important;
    position: absolute !important;
    inset: 1px !important;
    border-radius: calc(var(--radius-lg) - 1px) !important;
    border: 1px solid rgba(255,255,255,0.025) !important;
    pointer-events: none !important;
    opacity: 1 !important;
  }

  .system-card:hover {
    border-color: rgba(200,169,110,0.25) !important;
    box-shadow: var(--shadow-card-hover) !important;
    transform: translateY(-5px) !important;
    background:
      linear-gradient(145deg, rgba(18,22,34,0.95) 0%, rgba(10,13,22,0.92) 100%) !important;
  }

  /* System icon — hexagonal ring */
  .system-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(200,169,110,0.24) !important;
    background:
      radial-gradient(circle at 40% 35%, rgba(200,169,110,0.18), transparent 60%),
      linear-gradient(145deg, rgba(200,169,110,0.12), rgba(143,116,69,0.06)) !important;
    color: var(--gold-500) !important;
    font-size: 1.1rem !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 4px 14px rgba(0,0,0,0.30) !important;
    transition: var(--transition-fast) !important;
  }

  .system-card:hover .system-icon {
    border-color: rgba(200,169,110,0.40) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 4px 18px rgba(0,0,0,0.35),
      0 0 20px rgba(200,169,110,0.12) !important;
  }

  .system-card-title {
    font-size: 1.1rem !important;
    letter-spacing: 0.01em !important;
    line-height: 1.3 !important;
  }

  .system-card-description {
    font-size: 0.87rem !important;
    line-height: 1.65 !important;
    color: rgba(180,172,160,0.72) !important;
  }

  /* System metric footer */
  .system-metric {
    border-radius: 6px !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    background: rgba(5,7,12,0.60) !important;
    padding: 0.75rem 1rem !important;
    margin-top: auto !important;
  }

  .system-metric-label {
    font-family: var(--font-mono) !important;
    font-size: 0.55rem !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(180,172,160,0.45) !important;
    margin: 0 !important;
  }

  .system-metric-value {
    font-family: var(--font-mono) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--gold-500) !important;
    margin: 0.3rem 0 0 !important;
  }

  /* ════════════════════════════════════
     ARCHITECTURE BLOCKS — UPGRADE
  ════════════════════════════════════ */

  .architecture-block {
    border-radius: var(--radius-md) !important;
    border: 1px solid rgba(200,169,110,0.10) !important;
    background: rgba(10,13,20,0.85) !important;
    box-shadow: var(--shadow-card) !important;
    padding: 1.75rem !important;
    transition: var(--transition-smooth) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .architecture-block::before {
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(200,169,110,0.45) 40%, rgba(200,169,110,0.70) 60%, transparent) !important;
    opacity: 0.7 !important;
    border-radius: 2px 2px 0 0 !important;
  }

  .architecture-block:hover {
    border-color: rgba(200,169,110,0.22) !important;
    box-shadow: var(--shadow-card-hover) !important;
    transform: translateY(-4px) !important;
  }

  .block-kicker {
    font-family: var(--font-mono) !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.20em !important;
    text-transform: uppercase !important;
    color: rgba(200,169,110,0.60) !important;
    margin-bottom: 0.65rem !important;
  }

  .block-title {
    font-size: 1.25rem !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 0.6rem !important;
  }

  .block-description {
    font-size: 0.86rem !important;
    line-height: 1.65 !important;
    color: rgba(180,172,160,0.68) !important;
  }

  /* ════════════════════════════════════
     FLOW STEPS — REDESIGNED
  ════════════════════════════════════ */

  .architecture-flow {
    position: relative !important;
  }

  /* Connector line between steps */
  .architecture-flow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,110,0.15) 15%, rgba(200,169,110,0.15) 85%, transparent);
    pointer-events: none;
    z-index: 0;
  }

  .flow-step {
    border-radius: var(--radius-md) !important;
    border: 1px solid rgba(200,169,110,0.09) !important;
    background: rgba(8,11,18,0.88) !important;
    box-shadow: var(--shadow-card) !important;
    padding: 1.4rem 1rem !important;
    text-align: center !important;
    transition: var(--transition-smooth) !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .flow-step:hover {
    border-color: rgba(200,169,110,0.22) !important;
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-card-hover) !important;
  }

  .flow-step-number {
    font-family: var(--font-mono) !important;
    font-size: 0.56rem !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--gold-500) !important;
    display: inline-block !important;
    padding: 0.15rem 0.5rem !important;
    border: 1px solid rgba(200,169,110,0.20) !important;
    border-radius: 3px !important;
    background: rgba(200,169,110,0.04) !important;
    margin-bottom: 0.6rem !important;
  }

  .flow-step-title {
    font-size: 0.92rem !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 0.35rem !important;
  }

  .flow-step-description {
    font-size: 0.72rem !important;
    letter-spacing: 0.06em !important;
    color: rgba(180,172,160,0.55) !important;
    text-transform: uppercase !important;
  }

  /* ════════════════════════════════════
     MODULAR DESIGN / SYSTEM ARCHITECTURE — COMPACT REBUILD
  ════════════════════════════════════ */

  .architecture-section {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at 72% 22%, rgba(200,169,110,.08), transparent 34%),
      linear-gradient(180deg, #05070b 0%, #080b10 52%, #05070b 100%);
  }

  .architecture-hero-grid {
    display: grid;
    grid-template-columns: minmax(520px, 0.9fr) minmax(520px, 1fr);
    gap: clamp(3rem, 5vw, 6rem);
    align-items: center;
    margin-bottom: clamp(3rem, 5vw, 5rem);
  }

  .architecture-copy .section-title {
    max-width: 760px;
    margin: 0.8rem 0 1.25rem !important;
    font-family: var(--font-display) !important;
    font-size: clamp(3.2rem, 5vw, 6rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.03em !important;
    text-transform: uppercase !important;
  }

  .architecture-copy .section-title span {
    display: block;
    white-space: nowrap;
  }

  .architecture-copy .section-title span:last-child {
    color: var(--gold-500);
  }

  .architecture-copy .section-label {
    margin-top: 0.6rem !important;
    margin-bottom: 0.7rem !important;
  }

  .architecture-copy .section-description {
    margin: 0;
    max-width: 42rem;
    font-size: 1.05rem;
    line-height: 1.62;
    color: rgba(180,172,160,0.70);
  }

  .architecture-visual {
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    justify-self: center;
  }

  .architecture-visual.arch-hud-panel {
    justify-self: center;
    align-self: center;
    width: 100%;
    max-width: 620px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: unset;
  }

  .architecture-visual-card.arch-hud-frame {
    width: 100%;
    max-width: 620px;
    aspect-ratio: 16 / 9;
  }

  .architecture-layer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 1.4vw, 1.4rem);
    margin-bottom: clamp(2rem, 3vw, 3rem);
  }

  .architecture-layer-card.architecture-block {
    padding: clamp(1.35rem, 1.8vw, 1.8rem) !important;
    min-height: 180px;
    border-radius: 16px !important;
  }

  .architecture-step-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    position: relative;
    margin-top: 0 !important;
  }

  .architecture-step-grid::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 4%;
    right: 4%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,110,.22), transparent);
    z-index: 0;
    pointer-events: none;
  }

  .architecture-step-card.flow-step {
    min-height: 170px;
    padding: 1.2rem !important;
    border-radius: 14px !important;
    text-align: center;
    position: relative;
    z-index: 1 !important;
  }

  @media (max-width: 1100px) {
    .architecture-hero-grid {
      grid-template-columns: 1fr;
    }

    .architecture-copy .section-title span {
      white-space: normal;
    }

    .architecture-step-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 640px) {
    .architecture-layer-grid,
    .architecture-step-grid {
      grid-template-columns: 1fr;
    }

    .architecture-step-grid::before {
      display: none;
    }
  }

  /* ════════════════════════════════════
     PERFORMANCE SECTION — PREMIUM
  ════════════════════════════════════ */

  .metrics-table {
    border-radius: var(--radius-lg) !important;
    border: 1px solid rgba(200,169,110,0.12) !important;
    background: rgba(7,10,16,0.92) !important;
    box-shadow: var(--shadow-card) !important;
    padding: 2rem !important;
  }

  .metrics-table-header {
    border-bottom: 1px solid rgba(200,169,110,0.10) !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-family: var(--font-mono) !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--gold-500) !important;
  }

  .metrics-table-tag {
    font-family: var(--font-mono) !important;
    font-size: 0.56rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 0.3rem 0.65rem !important;
    border: 1px solid rgba(200,169,110,0.18) !important;
    border-radius: 3px !important;
    background: rgba(200,169,110,0.04) !important;
    color: rgba(200,169,110,0.65) !important;
  }

  .metric-row {
    padding: 0.85rem 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 1rem !important;
    transition: background 0.18s ease !important;
  }

  .metric-row:hover {
    background: rgba(200,169,110,0.03);
    border-radius: 4px;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    margin: 0 -0.5rem;
  }

  .metric-row-label {
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(180,172,160,0.65) !important;
  }

  .metric-row-value {
    font-family: var(--font-mono) !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.10em !important;
    color: var(--gold-500) !important;
    text-align: right !important;
    font-weight: 500 !important;
  }

  /* Performance chart panel */
  .performance-chart {
    border-radius: var(--radius-lg) !important;
    border: 1px solid rgba(200,169,110,0.12) !important;
    background: rgba(5,8,13,0.94) !important;
    box-shadow: var(--shadow-card) !important;
    padding: 2rem !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .performance-chart::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(90deg, rgba(200,169,110,0.03) 0 1px, transparent 1px 60px),
      repeating-linear-gradient(0deg, rgba(200,169,110,0.03) 0 1px, transparent 1px 40px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
  }

  .performance-chart > * {
    position: relative;
    z-index: 1;
  }

  /* ════════════════════════════════════
     PERFORMANCE INTEL — DASHBOARD MODULE
  ════════════════════════════════════ */

  .performance-intel-section {
    position: relative;
    overflow: hidden;
    background:
      linear-gradient(90deg, rgba(3,5,10,0.96) 0%, rgba(3,5,10,0.82) 42%, rgba(3,5,10,0.68) 100%),
      linear-gradient(180deg, rgba(3,5,10,0.96) 0%, rgba(3,5,10,0.68) 50%, rgba(3,5,10,0.96) 100%),
      url("/assets/visuals/msiia-star-cluster-layer.png");
    background-size: auto, auto, cover;
    background-position: center, center, center;
    background-repeat: no-repeat;
  }

  .performance-intel-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 72% 28%, rgba(200,169,110,0.10), transparent 34%),
      radial-gradient(circle at 30% 70%, rgba(200,169,110,0.06), transparent 38%);
    opacity: 0.9;
  }

  .performance-intel-section::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      var(--system-planet-bg-image),
      repeating-linear-gradient(90deg, rgba(200,169,110,0.025) 0 1px, transparent 1px 120px),
      repeating-linear-gradient(0deg, rgba(200,169,110,0.02) 0 1px, transparent 1px 76px);
    background-repeat: var(--system-planet-bg-repeat), repeat, repeat;
    background-position:
      left top, right 20% center, right -30% 55%,
      0 0,
      0 0;
    background-size: var(--system-planet-bg-size), auto, auto;
    opacity: 0.10;
    filter: saturate(1.02) contrast(1.04);
  }

  .performance-intel-section .container {
    position: relative;
    z-index: 1;
  }

  .performance-card {
    background: linear-gradient(145deg, rgba(10,14,20,0.94), rgba(5,8,13,0.92));
    border: 1px solid rgba(200,169,110,0.16);
    border-radius: 16px;
    box-shadow: 0 22px 70px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(255,255,255,0.025);
  }

  .performance-section-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, auto);
    align-items: end;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
  }

  .performance-status-bar {
    justify-self: end;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(200,169,110,0.14);
    background: rgba(5,8,13,0.62);
    backdrop-filter: blur(14px);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(180,172,160,0.70);
  }

  .performance-status-bar .status-label {
    color: rgba(243,239,231,0.88);
  }

  .status-sep {
    opacity: 0.55;
  }

  .live-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(77,186,110,0.95);
    box-shadow: 0 0 0 4px rgba(77,186,110,0.14), 0 0 18px rgba(77,186,110,0.30);
    animation: livePulse 1.8s ease-in-out infinite;
  }

  @keyframes livePulse {
    0%, 100% { transform: scale(1); opacity: 0.95; }
    50% { transform: scale(1.15); opacity: 0.75; }
  }

  .performance-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1rem;
    border-radius: 16px;
    border: 1px solid rgba(200,169,110,0.14);
    background: rgba(5,8,13,0.55);
    backdrop-filter: blur(18px);
    margin-bottom: 1.25rem;
    position: relative;
  }

  .live-status-pill {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.9rem;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(180,172,160,0.72);
  }

  .pill-strong {
    color: rgba(243,239,231,0.9);
  }

  .pill-muted {
    color: rgba(180,172,160,0.68);
  }

  .audit-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: flex-end;
  }

  .audit-button {
    appearance: none;
    border: 1px solid rgba(200,169,110,0.16);
    background: rgba(10,14,20,0.56);
    color: rgba(243,239,231,0.86);
    padding: 0.62rem 0.85rem;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    transition: var(--transition-fast);
    cursor: pointer;
    white-space: nowrap;
  }

  .audit-button:hover {
    border-color: rgba(200,169,110,0.30);
    background: rgba(200,169,110,0.06);
    transform: translateY(-1px);
  }

  .audit-button.is-disabled,
  .audit-button[aria-disabled="true"] {
    opacity: 0.58;
    cursor: not-allowed;
  }

  .audit-button.is-disabled:hover,
  .audit-button[aria-disabled="true"]:hover {
    transform: none;
    background: rgba(10,14,20,0.56);
    border-color: rgba(200,169,110,0.16);
  }

  .audit-button-primary {
    border-color: rgba(200,169,110,0.28);
    background: rgba(200,169,110,0.10);
    color: rgba(245,196,90,0.92);
  }

  .audit-feedback {
    position: absolute;
    inset: auto 1rem -0.9rem auto;
    margin: 0;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(200,169,110,0.14);
    background: rgba(3,5,10,0.78);
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(180,172,160,0.75);
  }

  .performance-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
    grid-template-areas:
      "market chart"
      "market kpis"
      "signal dimensions";
    gap: clamp(1rem, 1.6vw, 1.5rem);
    align-items: stretch;
  }

  .market-watch-card { grid-area: market; }
  .performance-chart-card { grid-area: chart; }
  .performance-kpi-strip { grid-area: kpis; }
  .system-dimensions-card { grid-area: dimensions; }
  .signal-card { grid-area: signal; }

  .performance-preview-gate {
    position: relative;
    max-height: 520px;
    overflow: hidden;
  }

  .privacy-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 68%;
    z-index: 8;
    pointer-events: none;
    background:
      linear-gradient(
        180deg,
        rgba(5, 7, 11, 0.00) 0%,
        rgba(5, 7, 11, 0.60) 22%,
        rgba(5, 7, 11, 0.92) 52%,
        rgba(5, 7, 11, 0.98) 100%
      );
  }

  .privacy-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(
        ellipse at 50% 20%,
        rgba(255, 255, 255, 0.11),
        rgba(255, 255, 255, 0.035) 38%,
        transparent 70%
      ),
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.035),
        transparent 42%
      );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .privacy-overlay::after {
    content: "";
    position: absolute;
    top: 18%;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(200, 169, 110, 0.42),
      rgba(255, 255, 255, 0.20),
      rgba(200, 169, 110, 0.42),
      transparent
    );
    box-shadow:
      0 0 20px rgba(200, 169, 110, 0.18),
      0 16px 42px rgba(0, 0, 0, 0.48);
  }

  .privacy-lock-panel {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    min-width: 300px;
    padding: 1.2rem 1.6rem;
    border: 1px solid rgba(200, 169, 110, 0.22);
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(8, 11, 17, 0.80), rgba(4, 6, 10, 0.94));
    box-shadow:
      0 22px 70px rgba(0, 0, 0, 0.55),
      0 0 34px rgba(200, 169, 110, 0.08);
    text-align: center;
  }

  .lock-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(200, 169, 110, 0.28);
    background: rgba(200, 169, 110, 0.08);
    box-shadow: 0 0 22px rgba(200, 169, 110, 0.12);
    color: rgba(200, 169, 110, 0.95);
  }

  .lock-icon .hi-icon {
    width: 22px;
    height: 22px;
  }

  .privacy-title {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(243, 239, 231, 0.92);
  }

  .privacy-lock-panel small {
    max-width: 340px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(184, 177, 163, 0.64);
  }

  .privacy-access-btn {
    margin-top: 0.6rem;
    height: 40px;
    padding: 0 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(200, 169, 110, 0.35);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(200, 169, 110, 0.95);
    text-decoration: none;
    background: rgba(200, 169, 110, 0.06);
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
  }

  .privacy-access-btn:hover {
    background: rgba(200, 169, 110, 0.10);
    border-color: rgba(200, 169, 110, 0.46);
    color: rgba(245, 196, 90, 0.92);
    transform: translateY(-1px);
  }

  .market-watch-card,
  .performance-chart-card,
  .performance-kpi-strip,
  .system-dimensions-card,
  .signal-card {
    padding: 1.15rem;
  }

  .perf-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
  }

  .perf-card-head--dense {
    margin-bottom: 1rem;
  }

  .perf-card-head h3 {
    margin: 0;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
  }

  .perf-card-live {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(180,172,160,0.70);
  }

  .perf-card-tag {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(200,169,110,0.16);
    background: rgba(200,169,110,0.04);
    color: rgba(200,169,110,0.65);
    white-space: nowrap;
  }

  .perf-card-tag--green {
    border-color: rgba(77,186,110,0.24);
    background: rgba(77,186,110,0.06);
    color: rgba(118,216,154,0.86);
  }

  .market-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.25rem;
  }

  .market-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto 86px;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 0.65rem;
    min-height: 56px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.04);
    background: rgba(3,5,10,0.25);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.035);
    transition: var(--transition-fast);
  }

  .market-row:last-child {
    box-shadow: none;
  }

  .market-row:hover {
    border-color: rgba(200,169,110,0.16);
    background: rgba(200,169,110,0.05);
    transform: translateY(-1px);
  }

  .market-logo {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(200,169,110,0.14);
    background: radial-gradient(circle at 30% 30%, rgba(200,169,110,0.16), rgba(5,8,13,0.75));
    color: rgba(245,196,90,0.88);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }

  .market-logo--fx { color: rgba(243,239,231,0.86); }
  .market-logo--crypto { background: radial-gradient(circle at 30% 30%, rgba(245,196,90,0.18), rgba(5,8,13,0.76)); }

  .market-meta strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(243,239,231,0.86);
  }

  .market-meta span {
    display: block;
    font-size: 0.76rem;
    color: rgba(180,172,160,0.62);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
  }

  .market-price {
    text-align: right;
  }

  .market-price strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.70rem;
    letter-spacing: 0.12em;
    color: rgba(243,239,231,0.86);
  }

  .market-change {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-top: 0.18rem;
  }

  .market-change.positive { color: rgba(118,216,154,0.88); }
  .market-change.negative { color: rgba(224,90,90,0.85); }

  .mini-sparkline {
    width: 86px;
    height: 22px;
    opacity: 0.95;
  }

  .mini-sparkline path {
    fill: none;
    stroke: rgba(200,169,110,0.55);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .market-row[data-trend="up"] .mini-sparkline path { stroke: rgba(118,216,154,0.70); }
  .market-row[data-trend="down"] .mini-sparkline path { stroke: rgba(224,90,90,0.62); }

  .research-metrics-mini {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.05);
  }

  .market-watch-card {
    display: flex;
    flex-direction: column;
  }

  .market-list {
    flex: 1;
  }

  .market-foot {
    margin-top: auto;
  }

  .mini-metric {
    padding: 0.65rem 0.7rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.04);
    background: rgba(3,5,10,0.22);
  }

  .mini-metric span {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.54rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(180,172,160,0.62);
  }

  .mini-metric strong {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.10em;
    color: rgba(245,196,90,0.88);
  }

  .view-watchlist {
    display: inline-flex;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(200,169,110,0.75);
    text-decoration: none;
    align-items: center;
    gap: 0.6rem;
  }

  .view-watchlist:hover {
    color: rgba(245,196,90,0.92);
  }

  .chart-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 1rem;
  }

  .perf-card-kicker {
    margin: 0 0 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(200,169,110,0.72);
  }

  .performance-chart-card h3 {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
  }

  .performance-chart-card {
    min-height: 360px;
    padding: 1.35rem 1.35rem 1.2rem;
  }

  .chart-range-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.04);
    background: rgba(3,5,10,0.22);
  }

  .range-btn {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(180,172,160,0.70);
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    transition: var(--transition-fast);
  }

  .range-btn:hover {
    color: rgba(243,239,231,0.86);
    background: rgba(200,169,110,0.05);
  }

  .range-btn.is-active {
    color: rgba(245,196,90,0.94);
    border-color: rgba(200,169,110,0.20);
    background: rgba(200,169,110,0.08);
  }

  .chart-canvas-wrap {
    position: relative;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.04);
    background:
      linear-gradient(180deg, rgba(3,5,10,0.22), rgba(3,5,10,0.06)),
      radial-gradient(circle at 70% 36%, rgba(200,169,110,0.08), transparent 55%);
    overflow: hidden;
    padding: 0.75rem 0.75rem 0.85rem;
  }

  .chart-canvas-wrap {
    min-height: 280px;
  }

  .chart-canvas-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      repeating-linear-gradient(90deg, rgba(200,169,110,0.025) 0 1px, transparent 1px 92px),
      repeating-linear-gradient(0deg, rgba(200,169,110,0.02) 0 1px, transparent 1px 54px);
    opacity: 0.55;
  }

  .performance-line-chart {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
  }

  .performance-line-chart {
    height: 280px;
  }

  .chart-fill { opacity: 0.85; }
  .chart-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .chart-line--msiia { stroke: url(#msiiaLine); stroke-width: 2.4; }
  .chart-line--bench { stroke: rgba(180,172,160,0.58); stroke-width: 1.8; }

  .chart-legend {
    margin-top: 0.9rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
  }

  .legend-item {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.04);
    background: rgba(3,5,10,0.20);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(180,172,160,0.70);
  }

  .legend-item strong {
    color: rgba(245,196,90,0.92);
    letter-spacing: 0.10em;
    font-size: 0.62rem;
  }

  .legend-swatch {
    width: 14px;
    height: 3px;
    border-radius: 999px;
    background: rgba(200,169,110,0.55);
  }

  .legend-swatch--msiia { background: linear-gradient(90deg, rgba(143,116,69,0.82), rgba(245,196,90,1)); }
  .legend-swatch--bench { background: rgba(180,172,160,0.55); }

  .performance-kpi-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
  }

  .kpi-tile {
    padding: 0.95rem 0.95rem;
    border-left: 1px solid rgba(200,169,110,0.10);
  }

  .kpi-tile:first-child {
    border-left: 0;
  }

  .kpi-tile span {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.54rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(180,172,160,0.62);
  }

  .kpi-tile strong {
    display: block;
    margin-top: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.86rem;
    letter-spacing: 0.10em;
    color: rgba(245,196,90,0.92);
  }

  .kpi-tile small {
    display: block;
    margin-top: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.52rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(180,172,160,0.54);
  }

  .performance-intel-section .dashboard-card {
    padding: clamp(1rem, 1.8vw, 1.5rem) !important;
  }

  .system-dimensions-card {
    min-height: 360px;
  }

  .signal-card--compact {
    min-height: 360px;
  }

  .system-dimensions-inner {
    display: grid;
    grid-template-columns: 1.15fr 240px 0.95fr;
    gap: 1rem;
    align-items: start;
    margin-top: 0.35rem;
  }

  .dimension-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .dimension-map {
    display: grid;
    place-items: center;
  }

  .dimension-item {
    padding: 0.65rem 0.75rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.04);
    background: rgba(3,5,10,0.22);
  }

  .dimension-item strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(243,239,231,0.86);
  }

  .dimension-item span {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: rgba(180,172,160,0.66);
    line-height: 1.4;
  }

  .neural-mark {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.04);
    background: rgba(3,5,10,0.20);
    padding: 0.85rem;
    display: grid;
    place-items: center;
  }

  .neural-mark--large {
    padding: 1.05rem;
    border-color: rgba(200,169,110,0.12);
    background:
      radial-gradient(circle at 50% 40%, rgba(200,169,110,0.10), transparent 62%),
      rgba(3,5,10,0.20);
  }

  .neural-mark svg {
    width: 100%;
    height: auto;
    opacity: 0.95;
  }

  .dimension-metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .dimension-bookmark-row {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .bookmark-tile {
    position: relative;
    padding: 0.95rem 0.95rem 0.9rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.04);
    background: rgba(3,5,10,0.22);
    overflow: hidden;
  }

  .bookmark-tile::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,110,0.22), transparent);
    opacity: 0.95;
    pointer-events: none;
  }

  .bookmark-tile span {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.54rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(180,172,160,0.62);
  }

  .bookmark-tile strong {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.92rem;
    letter-spacing: -0.01em;
    color: rgba(243,239,231,0.88);
  }

  .bookmark-tile p {
    margin: 0.55rem 0 0;
    font-size: 0.80rem;
    line-height: 1.6;
    color: rgba(180,172,160,0.66);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .dim-metric {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.04);
    background: rgba(3,5,10,0.22);
  }

  .dim-metric span {
    font-family: var(--font-mono);
    font-size: 0.54rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(180,172,160,0.62);
  }

  .dim-metric strong {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.10em;
    color: rgba(245,196,90,0.90);
    white-space: nowrap;
  }

  .signal-head {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
  }

  .signal-live {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(180,172,160,0.70);
  }

  .signal-compact-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    align-items: center;
    margin-top: 0.85rem;
    justify-items: center;
  }

  .signal-card {
    display: flex;
    flex-direction: column;
  }

  .signal-compact-body {
    flex: 1;
    align-content: center;
  }

  .signal-readout {
    display: grid;
    gap: 0.35rem;
    width: 100%;
    text-align: left;
  }

  .signal-card--compact .signal-readout {
    max-width: 260px;
    text-align: center;
  }

  .signal-cta {
    margin-top: auto;
    align-self: flex-start;
  }

  .radar {
    position: relative;
    width: 170px;
    height: 170px;
    border-radius: 999px;
    border: 1px solid rgba(77,186,110,0.18);
    background:
      radial-gradient(circle at 50% 50%, rgba(77,186,110,0.10), transparent 65%),
      radial-gradient(circle at 50% 50%, rgba(200,169,110,0.06), transparent 70%);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  }

  .radar-ring {
    position: absolute;
    inset: 18px;
    border-radius: 999px;
    border: 1px solid rgba(77,186,110,0.14);
    opacity: 0.7;
  }

  .radar-ring--mid { inset: 44px; opacity: 0.55; }
  .radar-ring--outer { inset: 8px; opacity: 0.35; }

  .radar-sweep {
    position: absolute;
    inset: -20%;
    background: conic-gradient(from 90deg, rgba(77,186,110,0.00), rgba(77,186,110,0.18), rgba(77,186,110,0.00));
    animation: radarSweep 3.2s linear infinite;
    opacity: 0.55;
    mix-blend-mode: screen;
  }

  @keyframes radarSweep {
    to { transform: rotate(360deg); }
  }

  .radar-dot {
    position: absolute;
    left: 62%;
    top: 42%;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(118,216,154,0.95);
    box-shadow: 0 0 0 5px rgba(77,186,110,0.14), 0 0 24px rgba(77,186,110,0.30);
  }

  .signal-kicker {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(180,172,160,0.65);
  }

  .signal-value {
    margin: 0.45rem 0 0;
    font-family: var(--font-display);
    font-size: 2.2rem;
    letter-spacing: 0.12em;
    color: rgba(118,216,154,0.92);
    text-shadow: 0 0 30px rgba(77,186,110,0.20);
  }

  .signal-sub {
    margin: 0.5rem 0 0;
    font-size: 0.88rem;
    color: rgba(180,172,160,0.70);
  }

  .signal-sub strong {
    color: rgba(245,196,90,0.90);
    font-family: var(--font-mono);
    letter-spacing: 0.10em;
  }

  .signal-bar {
    margin-top: 0.85rem;
    height: 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(3,5,10,0.30);
    overflow: hidden;
  }

  .signal-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, rgba(77,186,110,0.65), rgba(245,196,90,0.65));
    box-shadow: 0 0 18px rgba(77,186,110,0.18);
  }

  .signal-cta {
    display: inline-flex;
    margin-top: auto;
    padding: 0.7rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(200,169,110,0.18);
    background: rgba(200,169,110,0.08);
    color: rgba(245,196,90,0.92);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.60rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: var(--transition-fast);
  }

  .signal-cta:hover {
    background: rgba(200,169,110,0.12);
    border-color: rgba(200,169,110,0.30);
    transform: translateY(-1px);
  }

  @media (max-width: 900px) {
    .performance-dashboard-grid {
      grid-template-columns: 1fr;
      grid-template-areas:
        "market"
        "chart"
        "kpis"
        "signal"
        "dimensions";
    }

    .performance-preview-gate {
      max-height: 460px;
    }

    .privacy-overlay {
      height: 72%;
    }

    .privacy-lock-panel {
      min-width: min(300px, 86vw);
    }

    .market-meta span {
      max-width: 100%;
    }

    .performance-section-header {
      grid-template-columns: 1fr;
      align-items: start;
    }

    .performance-status-bar {
      justify-self: start;
    }

    .performance-action-row {
      grid-template-columns: 1fr;
      justify-items: start;
    }

    .audit-actions {
      justify-content: flex-start;
      flex-wrap: wrap;
    }


    .system-dimensions-inner {
      grid-template-columns: 1fr;
    }

    .dimension-list {
      grid-template-columns: 1fr;
    }

    .dimension-bookmark-row {
      grid-template-columns: 1fr;
    }

    .system-dimensions-card,
    .signal-card {
      min-height: auto;
    }
  }

  @media (max-width: 720px) {
    .performance-kpi-strip {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kpi-tile {
      border-left: 0;
      border-top: 1px solid rgba(255,255,255,0.04);
    }

    .kpi-tile:nth-child(1),
    .kpi-tile:nth-child(2) {
      border-top: 0;
    }

    .radar {
      width: 150px;
      height: 150px;
    }

    .signal-compact-body {
      justify-items: center;
    }

    .chart-legend {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 600px) {
    .performance-preview-gate {
      max-height: 420px;
    }
  }

  .chart-header {
    font-family: var(--font-mono) !important;
    font-size: 0.60rem !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    color: var(--gold-500) !important;
    margin-bottom: 0.5rem !important;
  }

  .chart-title {
    font-size: 1.05rem !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 0.5rem !important;
  }

  .chart-description {
    font-size: 0.82rem !important;
    line-height: 1.65 !important;
    color: rgba(180,172,160,0.60) !important;
    margin-bottom: 1.2rem !important;
  }

  /* Chart SVG upgrade */
  .performance-chart svg {
    background:
      linear-gradient(to bottom,
        transparent 0%,
        transparent 24%,
        rgba(200,169,110,0.04) 24%,
        rgba(200,169,110,0.04) 25%,
        transparent 25%,
        transparent 49%,
        rgba(200,169,110,0.04) 49%,
        rgba(200,169,110,0.04) 50%,
        transparent 50%,
        transparent 74%,
        rgba(200,169,110,0.04) 74%,
        rgba(200,169,110,0.04) 75%,
        transparent 75%
      ) !important;
    border-top: 1px solid rgba(200,169,110,0.12) !important;
    padding-top: 0.8rem !important;
  }

  .performance-grid {
    gap: clamp(1.6rem, 2.8vw, 2.4rem) !important;
    align-items: start !important;
  }

  .performance-chart .perf-chart-enhanced {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
  }

  .performance-support {
    margin-top: clamp(1.6rem, 2.6vw, 2.2rem);
    max-width: 78ch;
  }

  .performance-support p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.75;
    color: rgba(180,172,160,0.72);
  }

  .performance-support p + p {
    margin-top: 0.85rem;
  }

  .performance-notes {
    margin-top: clamp(1.6rem, 3vw, 2.4rem);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
  }

  .performance-notes article {
    position: relative;
    padding: 1.4rem 1.4rem 1.35rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(200,169,110,0.12);
    background:
      linear-gradient(180deg, rgba(8,10,16,0.92), rgba(4,6,11,0.88));
    box-shadow: 0 18px 52px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.02) inset;
    overflow: hidden;
  }

  .performance-notes article::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,110,0.28), transparent);
    opacity: 0.9;
    pointer-events: none;
  }

  .performance-notes span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 999px;
    border: 1px solid rgba(200,169,110,0.16);
    background: rgba(200,169,110,0.05);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    color: rgba(200,169,110,0.72);
  }

  .performance-notes h4 {
    margin: 0.9rem 0 0.55rem;
    font-size: 0.98rem;
    letter-spacing: -0.01em;
  }

  .performance-notes p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.7;
    color: rgba(180,172,160,0.68);
  }

  @media (max-width: 1024px) {
    .performance-notes {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 640px) {
    .performance-notes {
      grid-template-columns: 1fr;
    }
  }

  /* ════════════════════════════════════
     PREMIUM CARDS — MAJOR UPGRADE
  ════════════════════════════════════ */

  .premium-card {
    border-radius: var(--radius-lg) !important;
    border: 1px solid rgba(200,169,110,0.10) !important;
    background:
      linear-gradient(145deg, rgba(12,16,24,0.92) 0%, rgba(7,9,16,0.88) 100%) !important;
    box-shadow: var(--shadow-card) !important;
    padding: 1.85rem !important;
    transition: var(--transition-smooth) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .premium-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,110,0.35) 50%, transparent);
    pointer-events: none;
  }

  .premium-card::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 120px !important;
    height: 120px !important;
    background: radial-gradient(circle at top right, rgba(200,169,110,0.06), transparent 60%) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 0.38s ease !important;
  }

  .premium-card:hover::after {
    opacity: 1 !important;
  }

  .premium-card:hover {
    border-color: rgba(200,169,110,0.24) !important;
    box-shadow: var(--shadow-card-hover) !important;
    transform: translateY(-5px) !important;
  }

  .premium-card:nth-child(even) {
    background:
      linear-gradient(145deg, rgba(14,18,26,0.94) 0%, rgba(9,12,20,0.90) 100%) !important;
  }

  .card-kicker {
    font-family: var(--font-mono) !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(200,169,110,0.65) !important;
    margin-bottom: 0.7rem !important;
  }

  .card-title {
    font-size: 1.15rem !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    margin-bottom: 0.35rem !important;
  }

  .card-copy {
    font-size: 0.78rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(200,169,110,0.45) !important;
    margin-bottom: 0.85rem !important;
  }

  .body-copy {
    font-size: 0.88rem !important;
    line-height: 1.68 !important;
    color: rgba(180,172,160,0.68) !important;
  }

  .system-objective {
    margin-top: 1.2rem !important;
    padding: 0.85rem 1rem !important;
    border: 1px solid rgba(200,169,110,0.10) !important;
    border-radius: var(--radius-sm) !important;
    background: rgba(5,7,12,0.60) !important;
  }

  .detail-label {
    font-family: var(--font-mono) !important;
    font-size: 0.55rem !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(180,172,160,0.40) !important;
    margin: 0 0 0.3rem !important;
  }

  /* ════════════════════════════════════
     CTA SECTION — CINEMATIC UPGRADE
  ════════════════════════════════════ */

  .cta-section {
    padding: clamp(4rem, 8vw, 7rem) 0 !important;
  }

  .cta-card {
    border-radius: var(--radius-xl) !important;
    border: 1px solid rgba(200,169,110,0.18) !important;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(200,169,110,0.12) 0%, transparent 55%),
      radial-gradient(ellipse at 20% 100%, rgba(200,169,110,0.06) 0%, transparent 40%),
      linear-gradient(180deg, rgba(16,20,30,0.94), rgba(8,11,18,0.96)) !important;
    box-shadow:
      0 0 0 1px rgba(200,169,110,0.06) inset,
      0 40px 100px rgba(0,0,0,0.50),
      var(--shadow-glow-gold) !important;
    padding: clamp(3rem, 6vw, 5rem) !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .cta-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,110,0.45) 30%, rgba(200,169,110,0.70) 50%, rgba(200,169,110,0.45) 70%, transparent);
  }

  /* ════════════════════════════════════
     BUTTONS — PREMIUM UPGRADE
  ════════════════════════════════════ */

  .btn {
    font-family: var(--font-mono) !important;
    font-size: 0.64rem !important;
    letter-spacing: 0.20em !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    transition: var(--transition-smooth) !important;
    position: relative;
    overflow: hidden;
    gap: 0.55rem;
  }

  .hi-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.9;
  }

  .btn:hover .hi-icon,
  .nav-link:hover .hi-icon,
  .mobile-link:hover .hi-icon {
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(200,169,110,0.25));
  }

  .nav-link,
  .mobile-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
  }

  .trust-card-title {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
  }

  .trust-card-title .hi-icon {
    width: 20px;
    height: 20px;
    opacity: 0.95;
  }

  .btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 60%);
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.22s ease;
  }

  .btn:hover::after {
    opacity: 1;
  }

  .btn-primary {
    background:
      linear-gradient(145deg, rgba(200,169,110,0.18) 0%, rgba(200,169,110,0.08) 100%) !important;
    border: 1px solid rgba(200,169,110,0.45) !important;
    color: var(--gold-300) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.28), 0 0 0 1px rgba(200,169,110,0.08) inset !important;
  }

  .btn-primary:hover {
    background:
      linear-gradient(145deg, rgba(200,169,110,0.28) 0%, rgba(200,169,110,0.14) 100%) !important;
    border-color: rgba(200,169,110,0.65) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 20px rgba(200,169,110,0.14) !important;
    transform: translateY(-2px) !important;
  }

  .btn-secondary {
    border: 1px solid rgba(200,169,110,0.20) !important;
    background: rgba(200,169,110,0.04) !important;
    color: rgba(200,169,110,0.75) !important;
  }

  .btn-secondary:hover {
    border-color: rgba(200,169,110,0.35) !important;
    background: rgba(200,169,110,0.08) !important;
    transform: translateY(-2px) !important;
  }

  .btn-ghost {
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: rgba(180,172,160,0.70) !important;
  }

  .btn-ghost:hover {
    border-color: rgba(200,169,110,0.18) !important;
    color: rgba(200,169,110,0.70) !important;
    transform: translateY(-2px) !important;
  }

  /* ════════════════════════════════════
     OVERVIEW VISUAL — UPGRADE
  ════════════════════════════════════ */

  .overview-visual-field {
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .overview-visual-field::before,
  .overview-visual-field::after,
  .overview-visual-markers {
    display: none !important;
  }

  /* ════════════════════════════════════
     REVEAL ANIMATIONS — UPGRADED
  ════════════════════════════════════ */

  [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .section-reveal[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 900ms ease,
      transform 900ms cubic-bezier(.19, 1, .22, 1);
  }

  .section-reveal[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Staggered children reveal */
  [data-reveal-children] > * {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.60s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.60s cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-reveal-children].is-visible > *:nth-child(1)  { opacity:1; transform:none; transition-delay:0.00s; }
  [data-reveal-children].is-visible > *:nth-child(2)  { opacity:1; transform:none; transition-delay:0.05s; }
  [data-reveal-children].is-visible > *:nth-child(3)  { opacity:1; transform:none; transition-delay:0.10s; }
  [data-reveal-children].is-visible > *:nth-child(4)  { opacity:1; transform:none; transition-delay:0.15s; }
  [data-reveal-children].is-visible > *:nth-child(5)  { opacity:1; transform:none; transition-delay:0.20s; }
  [data-reveal-children].is-visible > *:nth-child(6)  { opacity:1; transform:none; transition-delay:0.25s; }
  [data-reveal-children].is-visible > *:nth-child(7)  { opacity:1; transform:none; transition-delay:0.30s; }
  [data-reveal-children].is-visible > *:nth-child(8)  { opacity:1; transform:none; transition-delay:0.35s; }
  [data-reveal-children].is-visible > *:nth-child(9)  { opacity:1; transform:none; transition-delay:0.40s; }
  [data-reveal-children].is-visible > *:nth-child(10) { opacity:1; transform:none; transition-delay:0.45s; }
  [data-reveal-children].is-visible > *:nth-child(11) { opacity:1; transform:none; transition-delay:0.50s; }
  [data-reveal-children].is-visible > *:nth-child(12) { opacity:1; transform:none; transition-delay:0.55s; }


  /* ════════════════════════════════════
     ENHANCED EQUITY CHART SVG
  ════════════════════════════════════ */

  .perf-chart-enhanced {
    width: 100%;
    margin-top: 1rem;
    position: relative;
    z-index: 1;
  }

  /* ════════════════════════════════════
     GRID CARDS — UNIFORM SYSTEM
  ════════════════════════════════════ */

  .grid-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 1.25rem !important;
  }

/* ══════════════════════════════════════
   GOVERNANCE / TRANSPARENCY FRAMEWORK SECTION
══════════════════════════════════════ */

.governance-section {
  position: relative;
  padding: clamp(64px, 7vw, 110px) 0;
  overflow: hidden;
  border-top: 1px solid rgba(212, 176, 94, 0.08);
}

.governance-wrap {
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
  padding-left: 44px;
  padding-right: 44px;
}

.governance-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(520px, 1.2fr);
  gap: clamp(48px, 6vw, 88px);
  align-items: start;
}

/* ── Left column: sticky copy ── */
.governance-copy {
  max-width: 620px;
  position: sticky;
  top: 120px;
}

.governance-title {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 4.6vw, 5.2rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--text);
  margin: 0 0 20px;
}

.governance-title span {
  color: #D4B05E;
  font-style: italic;
}

.governance-text {
  max-width: 580px;
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.65;
  color: rgba(245, 241, 232, 0.62);
  margin: 0;
}

/* ── Right column: 2×2 card grid ── */
.governance-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.governance-card {
  position: relative;
  min-height: 190px;
  padding: 24px;
  border-radius: 18px;
  border: 1px solid rgba(212, 176, 94, 0.14);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.018),
    0 14px 44px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.governance-card:hover {
  border-color: rgba(212, 176, 94, 0.32);
  background:
    linear-gradient(145deg, rgba(212, 176, 94, 0.07), rgba(255, 255, 255, 0.018));
  transform: translateY(-2px);
}

.governance-card-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(212, 176, 94, 0.08);
  border: 1px solid rgba(212, 176, 94, 0.14);
  color: rgba(212, 176, 94, 0.9);
  margin-bottom: 14px;
  flex-shrink: 0;
}

.governance-card-icon .hi-icon {
  width: 18px;
  height: 18px;
}

.governance-card .card-kicker {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(212, 176, 94, 0.60);
  margin: 0 0 10px;
}

.governance-card h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.2;
  color: #F5F1E8;
  margin: 0 0 10px;
}

.governance-card p {
  font-size: 0.84rem;
  line-height: 1.55;
  color: rgba(245, 241, 232, 0.56);
  margin: 0;
  flex: 1;
}

/* ── Responsive: tablet (1100px) ── */
@media (max-width: 1100px) {
  .governance-grid {
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 52px);
  }

  .governance-copy {
    position: static;
    max-width: none;
  }
}

/* ── Responsive: mobile (760px) ── */
@media (max-width: 760px) {
  .governance-section {
    padding: 56px 0;
  }

  .governance-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  .governance-title {
    font-size: 2.5rem;
  }

  .governance-cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .governance-card {
    min-height: auto;
  }
}

  /* ════════════════════════════════════
     RESPONSIVE REFINEMENTS
  ════════════════════════════════════ */

  @media (max-width: 768px) {
    .hero-stats {
      grid-template-columns: repeat(2, 1fr) !important;
    }

    .hero-stat:nth-child(1),
    .hero-stat:nth-child(2) {
      border-bottom: 1px solid rgba(255,255,255,0.06) !important;
      padding-bottom: 0.8rem !important;
    }

    .hero-stat:nth-child(1),
    .hero-stat:nth-child(3) {
      border-left: none !important;
      padding-left: 0 !important;
    }

    .section-title {
      font-size: clamp(1.6rem, 5vw, 2.4rem) !important;
    }
  }

  @media (max-width: 640px) {
    .hero-stats {
      grid-template-columns: repeat(2, 1fr) !important;
    }
    .premium-card,
    .system-card,
    .architecture-block {
      padding: 1.5rem !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal-children] > *,
    .status-dot,
    .btn,
    .system-card,
    .premium-card {
      animation: none !important;
      transition: none !important;
    }
    [data-reveal] {
      opacity: 1 !important;
      transform: none !important;
    }
  }

/* ══════════════════════════════════════
   DISCIPLINE / DESIGN PRINCIPLES SECTION
══════════════════════════════════════ */

.discipline-section {
  position: relative;
  padding: clamp(64px, 7vw, 110px) 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.discipline-wrap {
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
  padding-left: 44px;
  padding-right: 44px;
}

.discipline-header {
  margin-bottom: 18px;
}

.discipline-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr);
  gap: clamp(48px, 6vw, 88px);
  align-items: center;
}

/* ── Left column: copy + cards ── */
.discipline-copy {
  min-width: 0;
}

.discipline-title {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 4.6vw, 5.3rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--text);
  margin: 0 0 20px;
}

.discipline-title span {
  color: #D4B05E;
  font-style: italic;
}

.discipline-text {
  max-width: 660px;
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.65;
  color: rgba(245, 241, 232, 0.62);
  margin-bottom: 30px;
}

/* ── Three principle cards (inside discipline-copy) ── */
.discipline-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.discipline-card,
.principle-card {
  min-height: 210px;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(212, 176, 94, 0.14);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.018),
    0 14px 44px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.discipline-card:hover,
.principle-card:hover {
  border-color: rgba(212, 176, 94, 0.32);
  background:
    linear-gradient(145deg, rgba(212, 176, 94, 0.06), rgba(255, 255, 255, 0.018));
  transform: translateY(-2px);
}

.discipline-card .card-kicker,
.principle-card .card-kicker {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(212, 176, 94, 0.65);
  margin-bottom: 12px;
}

.discipline-card h3,
.principle-card h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 10px;
}

.discipline-card p,
.principle-card p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(245, 241, 232, 0.56);
  margin: 0;
  flex: 1;
}

/* ── Right column: image ── */
.discipline-visual {
  margin: 0;
  position: relative;
  border: 1px solid rgba(212, 176, 94, 0.22);
  border-radius: 28px;
  overflow: hidden;
  background: rgba(5, 7, 11, 0.62);
  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.50),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  width: 100%;
}

.discipline-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  height: auto;
}

/* Gold corner brackets */
.discipline-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 27px;
  pointer-events: none;
  background:
    linear-gradient(90deg,  rgba(212,176,94,0.55) 0 0) 0    0    / 24px 2px  no-repeat,
    linear-gradient(180deg, rgba(212,176,94,0.55) 0 0) 0    0    / 2px  24px no-repeat,
    linear-gradient(90deg,  rgba(212,176,94,0.55) 0 0) 100% 0    / 24px 2px  no-repeat,
    linear-gradient(180deg, rgba(212,176,94,0.55) 0 0) 100% 0    / 2px  24px no-repeat,
    linear-gradient(90deg,  rgba(212,176,94,0.55) 0 0) 0    100% / 24px 2px  no-repeat,
    linear-gradient(180deg, rgba(212,176,94,0.55) 0 0) 0    100% / 2px  24px no-repeat,
    linear-gradient(90deg,  rgba(212,176,94,0.55) 0 0) 100% 100% / 24px 2px  no-repeat,
    linear-gradient(180deg, rgba(212,176,94,0.55) 0 0) 100% 100% / 2px  24px no-repeat;
}

/* Image fallback */
.discipline-visual img[src=""],
.discipline-visual img:not([src]) {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, rgba(212,176,94,0.06) 0%, rgba(5,7,11,0.9) 100%);
}

/* ── Responsive: tablet (1100px) ── */
@media (max-width: 1100px) {
  .discipline-grid {
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 52px);
  }

  .discipline-visual {
    max-width: 900px;
  }
}

/* ── Responsive: mobile (760px) ── */
@media (max-width: 760px) {
  .discipline-section {
    padding: 56px 0;
  }

  .discipline-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  .discipline-title {
    font-size: 2.5rem;
  }

  .discipline-cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .discipline-card,
  .principle-card {
    min-height: auto;
  }

  .discipline-visual {
    border-radius: 20px;
  }

  .discipline-visual::after {
    border-radius: 19px;
  }
}

/* ════════════════════════════════════════════════════════
   HOMEPAGE TYPOGRAPHY UPGRADE — Cormorant Garamond
   Overrides Bebas Neue display font with institutional serif
════════════════════════════════════════════════════════ */
body[data-page="home"] .hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.03em !important;
  font-size: clamp(2.8rem, 5vw, 5.6rem) !important;
  line-height: 0.92 !important;
}

body[data-page="home"] .hero-title em,
body[data-page="home"] .hero-title em.hero-title-line {
  color: #D4B05E !important;
  font-style: italic !important;
}

body[data-page="home"] .section-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}

body[data-page="home"] .section-title em {
  color: #D4B05E !important;
  font-style: italic !important;
}

body[data-page="home"] .discipline-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  font-size: clamp(1.8rem, 3vw, 3rem) !important;
  line-height: 1.1 !important;
}

body[data-page="home"] .discipline-title em {
  color: #D4B05E !important;
  font-style: italic !important;
}

body[data-page="home"] .governance-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  font-size: clamp(1.8rem, 3vw, 3rem) !important;
  line-height: 1.1 !important;
}

body[data-page="home"] .governance-title em {
  color: #D4B05E !important;
  font-style: italic !important;
}

body[data-page="home"] .system-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-size: 1.15rem !important;
}

/* =========================================================
   ARCHITECTURE PAGE — Premium Institutional Layout
   ========================================================= */

/* -- Hero -- */
.architecture-hero {
  position: relative;
  padding: 56px 0 48px;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 42%, rgba(212,176,94,0.10), transparent 32%),
    linear-gradient(180deg, rgba(5,7,11,0.98), #05070B);
  border-bottom: 1px solid rgba(212,176,94,0.08);
}

.architecture-hero-wrap {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 44px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1fr);
  gap: clamp(44px, 6vw, 90px);
  align-items: center;
}

.architecture-hero h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3rem, 5vw, 6rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: #F5F1E8;
  margin: 0 0 22px;
}

.architecture-hero h1 em {
  color: #D4B05E;
  font-style: italic;
}

.architecture-hero .hero-desc {
  font-size: clamp(0.98rem, 1.1vw, 1.12rem);
  line-height: 1.65;
  color: rgba(245,241,232,0.60);
  max-width: 580px;
  margin: 0 0 28px;
}

.arch-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* -- Architecture layer model (hero right) -- */
.arch-hero-model {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.arch-layer-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items: center;
}

.arch-layer-num {
  font-family: "DM Mono", monospace;
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(212,176,94,0.52);
  text-align: right;
  padding-right: 12px;
  border-right: 1px solid rgba(212,176,94,0.14);
}

.arch-layer-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(212,176,94,0.14);
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  transition: border-color 200ms ease, background 200ms ease;
}

.arch-layer-pill:hover {
  border-color: rgba(212,176,94,0.30);
  background: linear-gradient(135deg, rgba(212,176,94,0.07), rgba(255,255,255,0.02));
}

.arch-layer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.arch-layer-label {
  font-family: "DM Mono", monospace;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.82);
}

.arch-layer-role {
  font-size: 0.78rem;
  color: rgba(245,241,232,0.40);
  margin-left: auto;
  white-space: nowrap;
}

/* -- Section scaffold -- */
.arch-section {
  padding: 42px 0;
}

.arch-section + .arch-section {
  border-top: 1px solid rgba(212,176,94,0.07);
}

.arch-section-wrap {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 44px;
}

.arch-section-head {
  margin-bottom: 28px;
}

.arch-section-head h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: #F5F1E8;
  margin: 6px 0 10px;
}

.arch-section-head h2 span {
  color: #D4B05E;
  font-style: italic;
}

.arch-section-head p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(245,241,232,0.52);
  max-width: 660px;
  margin: 0;
}

/* -- Grids -- */
.arch-grid { display: grid; gap: 18px; }
.arch-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.arch-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.arch-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* -- Cards -- */
.arch-card {
  position: relative;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(212,176,94,0.14);
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.018), 0 14px 44px rgba(0,0,0,0.25);
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
  display: flex;
  flex-direction: column;
}

.arch-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212,176,94,0.32);
  background: linear-gradient(145deg, rgba(212,176,94,0.07), rgba(255,255,255,0.018));
}

.arch-card-kicker {
  font-family: "DM Mono", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(212,176,94,0.60);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.arch-card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid rgba(212,176,94,0.22);
  font-size: 0.58rem;
  color: rgba(212,176,94,0.78);
  flex-shrink: 0;
}

.arch-card h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.2;
  color: #F5F1E8;
  margin: 0 0 10px;
}

.arch-card p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(245,241,232,0.54);
  margin: 0;
  flex: 1;
}

.arch-card-meta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(212,176,94,0.08);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.arch-meta-item { display: flex; flex-direction: column; gap: 3px; }

.arch-meta-label {
  font-family: "DM Mono", monospace;
  font-size: 0.50rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(212,176,94,0.44);
}

.arch-meta-value {
  font-size: 0.76rem;
  color: rgba(245,241,232,0.68);
  line-height: 1.3;
}

/* -- Chart cards -- */
.arch-chart-card {
  border-radius: 18px;
  border: 1px solid rgba(212,176,94,0.14);
  background: rgba(5,7,11,0.72);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.arch-chart-head {
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(212,176,94,0.08);
}

.arch-chart-title {
  font-family: "DM Mono", monospace;
  font-size: 0.60rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(212,176,94,0.70);
}

.arch-chart-sub {
  font-size: 0.76rem;
  color: rgba(245,241,232,0.40);
  margin-top: 3px;
}

.arch-chart-body {
  flex: 1;
  position: relative;
  min-height: 200px;
}

.arch-chart-body canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* -- Architecture model flow -- */
.model-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  position: relative;
}

.model-flow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 2%, rgba(212,176,94,0.22) 20%, rgba(212,176,94,0.22) 80%, transparent 98%);
  pointer-events: none;
  z-index: 0;
}

.model-node {
  position: relative;
  z-index: 1;
  padding: 20px 16px;
  border-radius: 16px;
  border: 1px solid rgba(212,176,94,0.16);
  background: linear-gradient(145deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 200ms ease, background 200ms ease;
}

.model-node:hover {
  border-color: rgba(212,176,94,0.36);
  background: linear-gradient(145deg, rgba(212,176,94,0.06), rgba(255,255,255,0.015));
}

.model-node-num {
  font-family: "DM Mono", monospace;
  font-size: 0.50rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(212,176,94,0.44);
}

.model-node-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 2px 0;
}

.model-node-label {
  font-family: "DM Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.88);
  line-height: 1.3;
}

.model-node-desc {
  font-size: 0.76rem;
  line-height: 1.45;
  color: rgba(245,241,232,0.42);
  margin-top: 4px;
}

/* -- Governance checklist -- */
.arch-check-card {
  position: relative;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(212,176,94,0.12);
  background: linear-gradient(145deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: border-color 200ms ease;
}

.arch-check-card:hover { border-color: rgba(212,176,94,0.28); }

.arch-check-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(212,176,94,0.08);
  border: 1px solid rgba(212,176,94,0.16);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: rgba(212,176,94,0.80);
}

.arch-check-icon .hi-icon { width: 14px; height: 14px; }

.arch-check-body { min-width: 0; flex: 1; }

.arch-check-title {
  font-family: "DM Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.82);
  margin: 0 0 5px;
}

.arch-check-desc {
  font-size: 0.80rem;
  line-height: 1.50;
  color: rgba(245,241,232,0.46);
  margin: 0;
}

/* -- Technical spec grid -- */
.arch-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(212,176,94,0.12);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(212,176,94,0.08);
}

.arch-spec-cell {
  padding: 20px 22px;
  background: rgba(5,7,11,0.88);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.arch-spec-label {
  font-family: "DM Mono", monospace;
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(212,176,94,0.52);
}

.arch-spec-value {
  font-family: "DM Mono", monospace;
  font-size: 0.84rem;
  color: rgba(245,241,232,0.88);
  line-height: 1.4;
}

.arch-spec-note {
  font-size: 0.74rem;
  color: rgba(245,241,232,0.38);
  line-height: 1.4;
}

/* -- Final CTA -- */
.arch-cta {
  padding: 52px 0 64px;
  border-top: 1px solid rgba(212,176,94,0.08);
}

.arch-cta-wrap {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.arch-cta h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: #F5F1E8;
  margin: 0 0 12px;
}

.arch-cta h2 em { color: #D4B05E; font-style: italic; }

.arch-cta p {
  font-size: 0.9rem;
  color: rgba(245,241,232,0.50);
  line-height: 1.6;
  max-width: 560px;
  margin: 0;
}

.arch-cta-actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }

/* -- Responsive -- */
@media (max-width: 1100px) {
  .architecture-hero-wrap { grid-template-columns: 1fr; }
  .arch-grid-5, .model-flow { grid-template-columns: 1fr 1fr; }
  .arch-grid-3 { grid-template-columns: 1fr 1fr; }
  .arch-cta-wrap { grid-template-columns: 1fr; }
  .arch-cta-actions { flex-direction: row; }
  .model-flow::before { display: none; }
}

@media (max-width: 720px) {
  .architecture-hero-wrap,
  .arch-section-wrap,
  .arch-cta-wrap { padding: 0 20px; }
  .architecture-hero { padding: 42px 0 36px; }
  .arch-grid-5, .arch-grid-3, .arch-grid-2, .model-flow { grid-template-columns: 1fr; }
  .arch-spec-grid { grid-template-columns: 1fr; }
  .arch-cta-actions { flex-direction: column; }
}

/* =========================================================
   ARCHITECTURE PAGE — Body + Background + Fonts + Reveal
   ========================================================= */

/* Page-level background */
.architecture-page {
  position: relative;
  background: #05070B;
  overflow-x: hidden;
}

/* Layered fixed atmospheric background */
.architecture-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 18%, rgba(212,176,94,0.08), transparent 32%),
    radial-gradient(circle at 12% 72%, rgba(58,111,158,0.05), transparent 28%),
    linear-gradient(180deg, #05070B, #05070B);
  z-index: 0;
}

/* Subtle fixed grid overlay */
.architecture-page::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(212,176,94,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,176,94,0.016) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.28;
  z-index: 0;
}

/* Main content above fixed backgrounds */
.architecture-page .site-main {
  position: relative;
  z-index: 1;
}

/* ── Font system ── */
.architecture-page h1,
.architecture-page h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.035em;
}

.architecture-page h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
}

.architecture-page .section-label,
.architecture-page .arch-card-kicker,
.architecture-page .arch-chart-title,
.architecture-page .arch-spec-label,
.architecture-page .arch-check-title,
.architecture-page .model-node-label,
.architecture-page .model-node-num,
.architecture-page .arch-layer-label,
.architecture-page .arch-layer-num {
  font-family: "DM Mono", monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ── Hero grid (alias for architecture-hero-wrap) ── */
.architecture-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1fr);
  gap: clamp(44px, 6vw, 88px);
  align-items: center;
}

/* ── Section head spacing tightening ── */
.arch-section-head h2 {
  font-size: clamp(2.2rem, 4vw, 4.4rem);
  line-height: 0.95;
  margin-top: 4px;
  margin-bottom: 10px;
}

/* ── Model flow: stronger visual connection ── */
.model-flow {
  position: relative;
}

.model-flow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212,176,94,0.20) 10%,
    rgba(212,176,94,0.28) 50%,
    rgba(212,176,94,0.20) 90%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Chart body min-height bump ── */
.arch-chart-body {
  min-height: 220px;
}

/* ── Responsive additions ── */
@media (max-width: 900px) {
  .architecture-hero-grid,
  .architecture-hero-wrap {
    grid-template-columns: 1fr;
  }

  .architecture-hero {
    padding: 44px 0 36px;
  }

  .arch-grid-5 {
    grid-template-columns: 1fr 1fr;
  }

  .arch-grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  .model-flow {
    grid-template-columns: 1fr 1fr;
  }

  .model-flow::before {
    display: none;
  }

  .arch-spec-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 580px) {
  .arch-grid-5,
  .arch-grid-3,
  .arch-grid-2,
  .model-flow,
  .arch-spec-grid {
    grid-template-columns: 1fr;
  }

  .arch-section-wrap,
  .arch-cta-wrap,
  .architecture-hero-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* -- Reveal: site.js adds .reveal + .is-visible via IntersectionObserver -- */

/* site.js queries [data-reveal], adds .reveal class, then observes for .is-visible */
[data-reveal].reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
}

[data-reveal].reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger reveal for grids -- scoped to architecture-page, observer in architecture.js */
.architecture-page [data-reveal-children] > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.architecture-page [data-reveal-children].is-visible > * {
  opacity: 1;
  transform: none;
}
.architecture-page [data-reveal-children].is-visible > *:nth-child(1)  { transition-delay: 0.00s; }
.architecture-page [data-reveal-children].is-visible > *:nth-child(2)  { transition-delay: 0.05s; }
.architecture-page [data-reveal-children].is-visible > *:nth-child(3)  { transition-delay: 0.10s; }
.architecture-page [data-reveal-children].is-visible > *:nth-child(4)  { transition-delay: 0.15s; }
.architecture-page [data-reveal-children].is-visible > *:nth-child(5)  { transition-delay: 0.20s; }
.architecture-page [data-reveal-children].is-visible > *:nth-child(6)  { transition-delay: 0.25s; }
.architecture-page [data-reveal-children].is-visible > *:nth-child(7)  { transition-delay: 0.30s; }
.architecture-page [data-reveal-children].is-visible > *:nth-child(8)  { transition-delay: 0.35s; }
.architecture-page [data-reveal-children].is-visible > *:nth-child(9)  { transition-delay: 0.40s; }
.architecture-page [data-reveal-children].is-visible > *:nth-child(10) { transition-delay: 0.45s; }
.architecture-page [data-reveal-children].is-visible > *:nth-child(11) { transition-delay: 0.50s; }
.architecture-page [data-reveal-children].is-visible > *:nth-child(12) { transition-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal].reveal,
  .architecture-page [data-reveal-children] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}}

/* =========================================================
   ICON UTILITY SYSTEM — .ui-icon / .flow-dot / .arch-card-badge
   ========================================================= */

/* SVG icon wrapper — inherits currentColor, scales with parent */
.ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #D4B05E;
}

.ui-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

/* Glowing color dot — use color property as both fill and glow color */
.flow-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* Badge row: dot + icon side by side */
.arch-card-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

/* Icon container above card content */
.arch-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(212,176,94,0.08);
  border: 1px solid rgba(212,176,94,0.14);
  margin-bottom: 14px;
  flex-shrink: 0;
}

.arch-card-icon .ui-icon {
  width: 18px;
  height: 18px;
}

/* Model node badge with dot + icon */
.model-node .arch-card-badge {
  margin-bottom: 6px;
}

/* Hero layer pill dot */
.arch-layer-pill .flow-dot {
  width: 8px;
  height: 8px;
  margin-right: 2px;
}

/* =========================================================
   ARCHITECTURE PAGE — FIXED GRID LAYOUTS
   ========================================================= */

/* Global grid safety */
.architecture-page *,
.architecture-page *::before,
.architecture-page *::after {
  box-sizing: border-box;
}

.architecture-page section,
.architecture-page div {
  min-width: 0;
}

/* ── 1. Architecture Layers Grid ── */
.arch-layers-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.arch-layer-card {
  min-width: 0;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(212,176,94,0.14);
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.018), 0 14px 44px rgba(0,0,0,0.25);
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
  display: flex;
  flex-direction: column;
}

.arch-layer-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212,176,94,0.32);
  background: linear-gradient(145deg, rgba(212,176,94,0.07), rgba(255,255,255,0.018));
}

.arch-layer-card .arch-card-kicker,
.arch-layer-card h3,
.arch-layer-card p,
.arch-layer-card .arch-card-meta {
  /* Inherit all arch-card typography */
}

.arch-layer-card h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.2;
  color: #F5F1E8;
  margin: 0 0 10px;
}

.arch-layer-card p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(245,241,232,0.54);
  margin: 0;
  flex: 1;
}

@media (max-width: 1280px) {
  .arch-layers-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .arch-layers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .arch-layers-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 2. Architecture Model Flow Grid ── */
/* arch-model-flow: now controlled by VISUAL AUDIT FIXES block below */

.arch-model-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,176,94,0.60), transparent);
  align-self: center;
  margin: 0 4px;
}

.arch-model-node {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 18px 14px;
  border-radius: 16px;
  border: 1px solid rgba(212,176,94,0.16);
  background: linear-gradient(145deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 200ms ease, background 200ms ease;
}

.arch-model-node:hover {
  border-color: rgba(212,176,94,0.36);
  background: linear-gradient(145deg, rgba(212,176,94,0.06), rgba(255,255,255,0.015));
}

.arch-model-num {
  font-family: "DM Mono", monospace;
  font-size: 0.50rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(212,176,94,0.44);
}

.arch-model-label {
  font-family: "DM Mono", monospace;
  font-size: 0.60rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.88);
  line-height: 1.3;
  display: block;
}

.arch-model-desc {
  font-size: 0.74rem;
  line-height: 1.45;
  color: rgba(245,241,232,0.42);
  margin: 2px 0 0;
}

@media (max-width: 1100px) {
  .arch-model-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .arch-model-line {
    display: none;
  }
}

@media (max-width: 620px) {
  .arch-model-flow {
    grid-template-columns: 1fr;
  }
}

/* ── 3. Exposure Map Grid ── */
.exposure-map-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.exposure-card {
  min-width: 0;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(212,176,94,0.14);
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.018), 0 14px 44px rgba(0,0,0,0.25);
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
  display: flex;
  flex-direction: column;
}

.exposure-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212,176,94,0.32);
  background: linear-gradient(145deg, rgba(212,176,94,0.07), rgba(255,255,255,0.018));
}

.exposure-card h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.2;
  color: #F5F1E8;
  margin: 0 0 10px;
}

.exposure-card p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(245,241,232,0.54);
  margin: 0;
  flex: 1;
}

.exposure-card .arch-card-meta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(212,176,94,0.08);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (max-width: 980px) {
  .exposure-map-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .exposure-map-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 4. Portfolio Analytics Grid ── */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.analytics-card {
  min-width: 0;
  border-radius: 18px;
  border: 1px solid rgba(212,176,94,0.14);
  background:
    linear-gradient(rgba(212,176,94,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,176,94,0.025) 1px, transparent 1px),
    rgba(5,7,11,0.72);
  background-size: 54px 54px, 54px 54px, auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.analytics-card-head {
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(212,176,94,0.08);
  flex-shrink: 0;
}

.analytics-card-title {
  font-family: "DM Mono", monospace;
  font-size: 0.60rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(212,176,94,0.70);
  margin: 0;
}

.analytics-card-sub {
  font-size: 0.76rem;
  color: rgba(245,241,232,0.40);
  margin: 3px 0 0;
}

.analytics-card-body {
  flex: 1;
  position: relative;
  min-height: 220px;
  padding: 4px;
}

.analytics-card-body canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

@media (max-width: 980px) {
  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .analytics-card-body {
    min-height: 260px;
  }
}

/* =========================================================
   VISUAL AUDIT FIXES — Applied from 9-part audit
   ========================================================= */

/* ── PROMPT 01: Hero copy improvements ── */
.arch-hero-desc {
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.70;
  color: rgba(245,241,232,0.68);
  max-width: 560px;
  margin: 0 0 28px;
}

/* Stronger hero layer pill on hover */
.arch-layer-pill:hover .arch-layer-label {
  color: #F5F1E8;
}

/* ── PROMPT 02: Fix oversized SVG icons in card badges ──
   Root cause: svg { display:block; max-width:100% } global rule
   + flex container stretching makes width:100% resolve too large.
   Fix: cap icon at 18px with overflow:hidden guard.           */
.arch-card-badge .ui-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

.arch-card-badge .ui-icon svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* ── PROMPT 03: Model flow — Flexbox replaces Grid ──
   CSS Grid with 11 alternating columns collapses vertically in some
   rendering contexts. Flexbox gives identical visual result reliably. */
.arch-model-flow {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  grid-template-columns: unset !important;  /* cancel any grid rules */
}

.arch-model-flow::-webkit-scrollbar { display: none; }

.arch-model-flow .arch-model-node {
  flex: 1 1 0 !important;
  min-width: 140px !important;
  max-width: none !important;
}

.arch-model-flow .arch-model-line {
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 1px !important;
  align-self: center !important;
  margin: 0 4px;
}

/* Responsive: at 1100px collapse to 3-col-style vertical scroll */
@media (max-width: 1100px) {
  .arch-model-flow {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }

  .arch-model-flow .arch-model-node {
    flex: 1 1 calc(33% - 18px) !important;
    min-width: 200px !important;
  }

  .arch-model-flow .arch-model-line {
    display: none !important;
  }
}

@media (max-width: 620px) {
  .arch-model-flow .arch-model-node {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
}

/* ── PROMPT 04: Exposure map — 6 cards in 3-col = clean 2 rows ── */
.exposure-map-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Ensure 5th + 6th card fill 2/3 of last row */
@media (min-width: 981px) {
  .exposure-map-grid .exposure-card:nth-child(4),
  .exposure-map-grid .exposure-card:nth-child(5),
  .exposure-map-grid .exposure-card:nth-child(6) {
    /* Let them flow naturally in the 3-col grid */
  }
}

/* ── PROMPT 05: Analytics chart canvas sizing ── */
.analytics-card-body {
  position: relative;
  flex: 1;
  min-height: 220px;
}

.analytics-card-body canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* ── PROMPT 06: Governance checkpoint card improvements ── */
.arch-check-card {
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}

.arch-check-card:hover {
  transform: translateY(-1px);
}

/* ── PROMPT 07: Technical spec — stronger label contrast ── */
.arch-spec-label {
  font-size: 0.54rem;
  letter-spacing: 0.24em;
}

.arch-spec-value {
  font-size: 0.86rem;
  color: rgba(245,241,232,0.92);
}

/* header-compact .header-shell — defined in global header section above */

/* ── PROMPT 09: CTA section final polish ── */
.arch-cta h2 {
  font-size: clamp(2.2rem, 3.4vw, 3.8rem);
  line-height: 0.95;
  margin-bottom: 14px;
}

.arch-cta-actions {
  gap: 10px;
  min-width: 220px;
}

.arch-cta-actions .btn {
  text-align: center;
  justify-content: center;
}

/* Section separator lines for visual rhythm */
.arch-section + .arch-section {
  border-top: 1px solid rgba(212,176,94,0.07);
}

/* Layer card - ensure flex-start alignment (no centering of small badge) */
.arch-layer-card {
  align-items: flex-start !important;
}

.exposure-card {
  align-items: flex-start !important;
}

/* Arch model node label typography */
.arch-model-label {
  font-family: "Cormorant Garamond", serif;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(245,241,232,0.92);
  line-height: 1.2;
  margin-top: 4px;
}

.arch-model-desc {
  font-size: 0.76rem;
  line-height: 1.48;
  color: rgba(245,241,232,0.42);
  margin-top: 6px;
}

/* Stronger section label pill */
.architecture-page .section-label {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid rgba(212,176,94,0.22);
  border-radius: 999px;
  background: rgba(212,176,94,0.06);
}

/* =========================================================
   PERFORMANCE INTELLIGENCE — Structura Grid v2
   ========================================================= */

/* ── Page shell ── */
.performance-page {
  position: relative;
  background: #05070B;
  overflow-x: hidden;
}

.performance-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 20%, rgba(212,176,94,0.09), transparent 34%),
    radial-gradient(circle at 12% 76%, rgba(77,173,118,0.04), transparent 26%);
  z-index: 0;
}

.performance-page .site-main {
  position: relative;
  z-index: 1;
}

/* ── Risk disclosure notice ── */
.risk-notice-bar {
  background: rgba(192,80,80,0.06);
  border-bottom: 1px solid rgba(192,80,80,0.14);
  padding: 12px 44px;
  text-align: center;
}

.risk-notice-bar p {
  font-family: "DM Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.11em;
  color: rgba(245,241,232,0.42);
  line-height: 1.7;
  margin: 0 auto;
  max-width: 1200px;
}

/* ── Hero ── */
.performance-hero {
  padding: 56px 0 48px;
  background:
    radial-gradient(circle at 78% 32%, rgba(212,176,94,0.10), transparent 32%),
    linear-gradient(180deg, rgba(5,7,11,0.98), #05070B);
  border-bottom: 1px solid rgba(212,176,94,0.08);
}

.performance-hero-grid {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 44px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1fr);
  gap: clamp(42px, 6vw, 86px);
  align-items: center;
}

.performance-hero h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3rem, 5.4vw, 6rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: #F5F1E8;
  margin: 0 0 20px;
}

.performance-hero h1 em {
  color: #D4B05E;
  font-style: italic;
}

.performance-hero .hero-desc {
  font-size: clamp(0.96rem, 1.1vw, 1.1rem);
  line-height: 1.68;
  color: rgba(245,241,232,0.60);
  max-width: 560px;
  margin: 0 0 28px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Hero chart panel */
.performance-hero-panel {
  min-height: 310px;
  border-radius: 22px;
  border: 1px solid rgba(212,176,94,0.18);
  background:
    linear-gradient(rgba(212,176,94,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,176,94,0.022) 1px, transparent 1px),
    rgba(5,7,11,0.72);
  background-size: 54px 54px, 54px 54px, auto;
  padding: 20px;
  overflow: hidden;
  position: relative;
}

.performance-hero-panel canvas {
  width: 100%;
  height: 260px;
  display: block;
}

/* ── Section scaffold ── */
.performance-section {
  padding: 42px 0;
  border-top: 1px solid rgba(212,176,94,0.07);
}

.perf-wrap {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 44px;
}

.section-head {
  margin-bottom: 26px;
}

.section-head h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.2rem, 4vw, 4.4rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.028em;
  color: #F5F1E8;
  margin: 6px 0 10px;
}

.section-head h2 em,
.section-head h2 span { color: #D4B05E; font-style: italic; }

.section-head p.copy {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(245,241,232,0.50);
  max-width: 640px;
  margin: 0;
}

/* ── Grids — Structura Grid ── */
.perf-grid          { display: grid; gap: 18px; }
.perf-grid-3        { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.perf-grid-2        { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── Glass Institutional Cards ── */
.performance-card,
.chart-card,
.download-card,
.required-card,
.darwin-card {
  min-width: 0;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(212,176,94,0.14);
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  box-shadow: 0 16px 48px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.018);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
  display: flex;
  flex-direction: column;
}

.performance-card:hover,
.download-card:hover,
.required-card:hover,
.darwin-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212,176,94,0.34);
  background: linear-gradient(145deg, rgba(212,176,94,0.07), rgba(255,255,255,0.018));
}

/* Metric cards */
.perf-metric-value {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.6rem;
  font-weight: 400;
  color: #D4B05E;
  line-height: 1;
  margin-bottom: 4px;
}

.perf-metric-label {
  font-family: "DM Mono", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.68);
  margin-bottom: 12px;
}

.perf-metric-desc {
  font-size: 0.82rem;
  line-height: 1.56;
  color: rgba(245,241,232,0.48);
  flex: 1;
  margin: 0 0 14px;
}

.perf-status {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 12px;
  border-top: 1px solid rgba(212,176,94,0.08);
  font-family: "DM Mono", monospace;
  font-size: 0.54rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.42);
  margin-top: auto;
}

.perf-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.perf-dot--green { background: #4DAD76; box-shadow: 0 0 6px #4DAD76; }
.perf-dot--gold  { background: #D4B05E; box-shadow: 0 0 6px #D4B05E; }
.perf-dot--blue  { background: #5B8FD4; box-shadow: 0 0 6px #5B8FD4; }

/* Chart cards */
.chart-card {
  min-height: 340px;
  overflow: hidden;
  padding: 0;
}

.chart-card-head {
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(212,176,94,0.12);
  flex-shrink: 0;
}

.chart-card-title {
  font-family: "DM Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(212,176,94,0.82);
  margin: 0 0 3px;
}

.chart-card-sub {
  font-size: 0.75rem;
  color: rgba(245,241,232,0.44);
  margin: 0;
}

.chart-card-body {
  flex: 1;
  position: relative;
  min-height: 280px;
  padding: 4px;
  background:
    linear-gradient(rgba(212,176,94,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,176,94,0.038) 1px, transparent 1px),
    rgba(8,10,16,0.80);
  background-size: 54px 54px, 54px 54px, auto;
}

.chart-card-body canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ── Darwin X6 section ── */
.darwin-section {
  padding: 52px 0;
  border-top: 1px solid rgba(212,176,94,0.10);
  border-bottom: 1px solid rgba(212,176,94,0.10);
  background:
    radial-gradient(circle at 58% 50%, rgba(212,176,94,0.055), transparent 42%),
    linear-gradient(180deg, rgba(212,176,94,0.025), transparent);
}

.darwin-grid {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

.darwin-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 8px;
  border: 1px solid rgba(212,176,94,0.22);
  border-radius: 999px;
  background: rgba(212,176,94,0.06);
  margin-bottom: 16px;
}

.darwin-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4DAD76;
  box-shadow: 0 0 8px #4DAD76;
}

.darwin-badge-label {
  font-family: "DM Mono", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(212,176,94,0.78);
}

.darwin-copy h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 3vw, 3.2rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: #F5F1E8;
  margin: 0 0 14px;
}

.darwin-copy h2 em { color: #D4B05E; font-style: italic; }

.darwin-copy p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(245,241,232,0.56);
  max-width: 540px;
  margin: 0 0 22px;
}

.darwin-disclaimer {
  font-family: "DM Mono", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.11em;
  color: rgba(245,241,232,0.28);
  line-height: 1.65;
  max-width: 540px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(212,176,94,0.08);
}

.darwin-card {
  padding: 28px;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.darwin-card-label {
  font-family: "DM Mono", monospace;
  font-size: 0.54rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(212,176,94,0.52);
}

.darwin-card-name {
  font-family: "Cormorant Garamond", serif;
  font-size: 2rem;
  color: #D4B05E;
  line-height: 1;
  margin: 4px 0 8px;
}

.darwin-card-sub {
  font-size: 0.80rem;
  color: rgba(245,241,232,0.40);
  margin: 0 0 18px;
}

/* ── Download cards ── */
.download-card {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-radius: 14px;
  flex-direction: unset;
}

.dl-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(212,176,94,0.08);
  border: 1px solid rgba(212,176,94,0.16);
  display: grid;
  place-items: center;
  color: rgba(212,176,94,0.78);
  flex-shrink: 0;
}

.dl-icon .hi-icon { width: 16px; height: 16px; }

.dl-body {}

.dl-name {
  font-family: "Cormorant Garamond", serif;
  font-size: 1rem;
  font-weight: 500;
  color: #F5F1E8;
  margin: 0 0 3px;
}

.dl-meta {
  font-family: "DM Mono", monospace;
  font-size: 0.52rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.36);
}

.dl-access {
  color: rgba(212,176,94,0.50);
  margin-top: 3px;
}

.btn-request {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 9px;
  border: 1px solid rgba(212,176,94,0.24);
  font-family: "DM Mono", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.68);
  background: rgba(212,176,94,0.05);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 180ms, background 180ms, color 180ms;
  cursor: pointer;
}

.btn-request:hover {
  border-color: rgba(212,176,94,0.52);
  background: rgba(212,176,94,0.12);
  color: #F5F1E8;
}

.btn-request--locked { opacity: 0.54; cursor: default; }

/* ── Required info cards ── */
.required-card h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: #F5F1E8;
  margin: 0 0 10px;
  line-height: 1.2;
}

.required-card p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(245,241,232,0.50);
  margin: 0;
  flex: 1;
}

.req-kicker {
  font-family: "DM Mono", monospace;
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(212,176,94,0.54);
  margin-bottom: 10px;
}

/* ── Final CTA ── */
.performance-cta {
  padding: 52px 0 64px;
  border-top: 1px solid rgba(212,176,94,0.08);
}

.performance-cta-grid {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.performance-cta h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.2rem, 3.4vw, 3.8rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: #F5F1E8;
  margin: 0 0 12px;
}

.performance-cta h2 em { color: #D4B05E; font-style: italic; }

.performance-cta p {
  font-size: 0.9rem;
  color: rgba(245,241,232,0.48);
  line-height: 1.6;
  max-width: 540px;
  margin: 0;
}

.perf-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
}

/* ── Motion Layer: reveal animations ── */
[data-reveal],
[data-reveal-children] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms ease, transform 560ms ease;
}

[data-reveal].is-visible,
[data-reveal-children].is-visible > * {
  opacity: 1;
  transform: none;
}

/* Stagger for grid children */
[data-reveal-children].is-visible > *:nth-child(1)  { transition-delay: 0.00s; }
[data-reveal-children].is-visible > *:nth-child(2)  { transition-delay: 0.05s; }
[data-reveal-children].is-visible > *:nth-child(3)  { transition-delay: 0.10s; }
[data-reveal-children].is-visible > *:nth-child(4)  { transition-delay: 0.15s; }
[data-reveal-children].is-visible > *:nth-child(5)  { transition-delay: 0.20s; }
[data-reveal-children].is-visible > *:nth-child(6)  { transition-delay: 0.25s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-children] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .performance-hero-grid { grid-template-columns: 1fr; }
  .darwin-grid           { grid-template-columns: 1fr; }
  .performance-cta-grid  { grid-template-columns: 1fr; }
  .perf-cta-actions      { flex-direction: row; }
  .perf-grid-3           { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .performance-hero { padding: 40px 0 34px; }
  .performance-hero-grid,
  .perf-wrap,
  .darwin-grid,
  .performance-cta-grid { padding-left: 20px; padding-right: 20px; }
  .perf-grid-3,
  .perf-grid-2  { grid-template-columns: 1fr; }
  .download-card { grid-template-columns: 36px 1fr; }
  .dl-btn-wrap { grid-column: 1 / -1; }
  .perf-cta-actions { flex-direction: column; }
  .risk-notice-bar  { padding: 12px 20px; }
}

/* ══════════════════════════════════════════════════════
   RISK FRAMEWORK PAGE — Motion Layer v1
   Appended: 2026-04-29
══════════════════════════════════════════════════════ */

.risk-page { background: #05070B; overflow-x: hidden; }

.risk-page::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%, rgba(212,176,94,0.055), transparent),
    radial-gradient(ellipse 40% 60% at 10% 90%, rgba(122,48,40,0.045), transparent);
  pointer-events: none; z-index: 0;
}

.risk-wrap {
  max-width: 1480px; margin: 0 auto; padding: 0 44px;
  position: relative; z-index: 1;
}

@keyframes photonLine {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 8px currentColor; opacity: 1; }
  50%       { box-shadow: 0 0 20px currentColor, 0 0 40px currentColor; opacity: 0.75; }
}
@keyframes riskCountUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.risk-section {
  padding: 56px 0;
  border-top: 1px solid rgba(212,176,94,0.07);
  position: relative; z-index: 1;
}

.risk-section--dark {
  background: linear-gradient(180deg, rgba(5,7,11,0.0), rgba(212,176,94,0.018), rgba(5,7,11,0.0));
}

.risk-section-head { margin-bottom: 42px; max-width: 720px; }

.risk-section-head h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.2rem, 4vw, 4.6rem);
  font-weight: 400; line-height: 0.92; letter-spacing: -0.035em;
  color: #F5F1E8; margin: 6px 0 14px;
}
.risk-section-head h2 em { color: #D4B05E; font-style: italic; }

.risk-section-desc {
  font-size: 0.9rem; color: rgba(245,241,232,0.44);
  line-height: 1.65; max-width: 600px; margin: 0;
}

.risk-grid   { display: grid; gap: 18px; }
.risk-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.risk-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.risk-card,
.risk-metric-card,
.risk-chart-card,
.crisis-card,
.governance-card {
  min-width: 0; padding: 24px; border-radius: 18px;
  border: 1px solid rgba(212,176,94,0.14);
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  box-shadow: 0 16px 48px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.018);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
  display: flex; flex-direction: column;
}

.risk-card:hover,
.risk-metric-card:hover,
.crisis-card:hover,
.governance-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212,176,94,0.34);
  background: linear-gradient(145deg, rgba(212,176,94,0.07), rgba(255,255,255,0.018));
}

.risk-card-icon-wrap,
.risk-metric-icon,
.crisis-icon-wrap {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-bottom: 14px;
}

.risk-card-icon-wrap .hi-icon,
.risk-metric-icon .hi-icon,
.crisis-icon-wrap .hi-icon { width: 20px; height: 20px; }

.risk-icon--gold  { background: rgba(212,176,94,0.14); color: #D4B05E; }
.risk-icon--amber { background: rgba(240,168,74,0.14);  color: #F0A84A; }
.risk-icon--red   { background: rgba(216,92,74,0.14);   color: #D85C4A; }
.risk-icon--blue  { background: rgba(91,143,212,0.14);  color: #5B8FD4; }
.risk-icon--green { background: rgba(85,201,138,0.14);  color: #55C98A; }

.risk-card-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.22rem; font-weight: 600; color: #F5F1E8;
  margin: 0 0 8px; line-height: 1.2;
}

.risk-card-desc {
  font-size: 0.84rem; color: rgba(245,241,232,0.48);
  line-height: 1.62; flex: 1; margin: 0 0 16px;
}

.risk-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-top: 14px;
  border-top: 1px solid rgba(212,176,94,0.08);
  margin-top: auto;
}

.risk-badge {
  font-family: "DM Mono", monospace;
  font-size: 0.52rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid currentColor;
}
.risk-badge--green { color: #55C98A; background: rgba(85,201,138,0.10); }
.risk-badge--amber { color: #F0A84A; background: rgba(240,168,74,0.10); }
.risk-badge--red   { color: #D85C4A; background: rgba(216,92,74,0.10); }
.risk-badge--gold  { color: #D4B05E; background: rgba(212,176,94,0.10); }

.risk-level { display: flex; align-items: center; gap: 7px; flex: 1; justify-content: flex-end; }

.risk-level-bar {
  width: 60px; height: 3px; border-radius: 99px;
  background: rgba(255,255,255,0.08); position: relative; overflow: hidden;
}
.risk-level-bar::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--fill, 50%);
  background: linear-gradient(90deg, #D4B05E, #F0A84A);
  border-radius: 99px;
}

.risk-level-label {
  font-family: "DM Mono", monospace; font-size: 0.50rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245,241,232,0.32); white-space: nowrap;
}

/* ── Hero ── */
.risk-hero {
  padding: 64px 0 56px;
  background:
    radial-gradient(circle at 78% 28%, rgba(212,176,94,0.10), transparent 32%),
    radial-gradient(circle at 18% 78%, rgba(122,48,40,0.08), transparent 28%),
    linear-gradient(180deg, rgba(5,7,11,0.98), #05070B);
  position: relative; z-index: 1;
}

.risk-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1fr);
  gap: clamp(42px, 6vw, 86px); align-items: center;
}

.risk-hero h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.8rem, 5vw, 5.6rem);
  font-weight: 400; line-height: 0.92; letter-spacing: -0.035em;
  color: #F5F1E8; margin: 6px 0 18px;
}
.risk-hero h1 em { color: #D4B05E; font-style: italic; }

.risk-hero-desc {
  font-size: 0.92rem; color: rgba(245,241,232,0.52);
  line-height: 1.68; max-width: 520px; margin: 0 0 28px;
}

.risk-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.risk-stat-panel {
  padding: 28px; border-radius: 20px;
  border: 1px solid rgba(212,176,94,0.18);
  background:
    linear-gradient(rgba(212,176,94,0.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,176,94,0.025) 1px, transparent 1px),
    rgba(5,7,11,0.72);
  background-size: 48px 48px, 48px 48px, auto;
}

.risk-stat-label {
  font-family: "DM Mono", monospace; font-size: 0.54rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(212,176,94,0.55); margin: 0 0 18px;
}

.risk-stat-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px 24px; margin-bottom: 18px;
}

.risk-stat-item { display: flex; flex-direction: column; gap: 4px; }

.risk-stat-value {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.1rem; font-weight: 400; color: #D4B05E;
  line-height: 1; animation: riskCountUp 600ms ease both;
}

.risk-stat-name {
  font-family: "DM Mono", monospace; font-size: 0.52rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245,241,232,0.44);
}

.risk-stat-notice {
  font-size: 0.72rem; color: rgba(245,241,232,0.28); line-height: 1.5;
  border-top: 1px solid rgba(212,176,94,0.08); padding-top: 12px; margin: 0;
}

/* ── Control flow ── */
.risk-flow-wrapper {
  overflow-x: auto; padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.risk-flow {
  display: grid;
  grid-template-columns: 1fr 48px 1fr 48px 1fr 48px 1fr 48px 1fr 48px 1fr;
  gap: 0; align-items: center; min-width: 860px;
}

.risk-flow-node { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.risk-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: currentColor; box-shadow: 0 0 18px currentColor;
  animation: dotPulse 1800ms ease-in-out infinite; flex-shrink: 0;
}
.risk-dot--gold  { color: #D4B05E; }
.risk-dot--green { color: #55C98A; }
.risk-dot--amber { color: #F0A84A; }
.risk-dot--red   { color: #D85C4A; }

.risk-flow-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 14px; border-radius: 14px;
  border: 1px solid rgba(212,176,94,0.14);
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  text-align: center; width: 100%;
}
.risk-flow-card .hi-icon { width: 20px; height: 20px; color: rgba(212,176,94,0.68); flex-shrink: 0; }

.risk-flow-title {
  font-family: "DM Mono", monospace; font-size: 0.56rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245,241,232,0.72); line-height: 1.3;
}
.risk-flow-sub { font-size: 0.72rem; color: rgba(245,241,232,0.32); line-height: 1.3; }

.risk-flow-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212,176,94,0.55), transparent);
  position: relative; overflow: hidden; border-radius: 1px;
}
.risk-flow-line::after {
  content: ""; position: absolute; inset: 0; width: 35%;
  background: linear-gradient(90deg, transparent, rgba(245,241,232,0.82), transparent);
  animation: photonLine 2200ms ease-in-out infinite;
}

/* ── Metric cards ── */
.risk-metric-card { gap: 0; }

.risk-metric-value {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.4rem; font-weight: 400; color: #D4B05E;
  line-height: 1; margin-bottom: 4px;
}

.risk-metric-label {
  font-family: "DM Mono", monospace; font-size: 0.54rem;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: rgba(245,241,232,0.60); margin-bottom: 10px;
}

.risk-metric-desc {
  font-size: 0.82rem; color: rgba(245,241,232,0.44);
  line-height: 1.58; flex: 1; margin: 0 0 14px;
}

.risk-metric-bar-wrap {
  display: flex; align-items: center; gap: 10px;
  padding-top: 12px; border-top: 1px solid rgba(212,176,94,0.08); margin-top: auto;
}

.risk-metric-bar {
  flex: 1; height: 3px; border-radius: 99px;
  background: rgba(255,255,255,0.08); position: relative; overflow: hidden;
}
.risk-metric-bar::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--usage, 50%);
  background: linear-gradient(90deg, #D85C4A, #F0A84A);
  border-radius: 99px; transition: width 800ms ease;
}
.risk-metric-bar--green::after { background: linear-gradient(90deg, #55C98A, #4DAD76); }

.risk-metric-bar-label {
  font-family: "DM Mono", monospace; font-size: 0.50rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245,241,232,0.30); white-space: nowrap;
}

/* ── Chart cards ── */
.risk-chart-card { min-height: 340px; padding: 0; overflow: hidden; }

.risk-chart-head {
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(212,176,94,0.10); flex-shrink: 0;
}
.risk-chart-title {
  font-family: "DM Mono", monospace; font-size: 0.58rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(212,176,94,0.80); margin: 0 0 3px;
}
.risk-chart-sub { font-size: 0.74rem; color: rgba(245,241,232,0.38); margin: 0; }

.risk-chart-body {
  flex: 1; position: relative; min-height: 272px;
  background:
    linear-gradient(rgba(212,176,94,0.048) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,176,94,0.032) 1px, transparent 1px),
    rgba(8,10,16,0.80);
  background-size: 52px 52px, 52px 52px, auto;
}
.risk-chart-body canvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important; display: block;
}

/* ── Crisis protocol ── */
.crisis-card--critical {
  border-color: rgba(216,92,74,0.22);
  background: linear-gradient(145deg, rgba(216,92,74,0.06), rgba(255,255,255,0.012));
}
.crisis-card--critical:hover {
  border-color: rgba(216,92,74,0.40);
  background: linear-gradient(145deg, rgba(216,92,74,0.10), rgba(255,255,255,0.018));
}

.crisis-card-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.crisis-card-header .crisis-icon-wrap { margin-bottom: 0; }

.crisis-state {
  font-family: "DM Mono", monospace; font-size: 0.50rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245,241,232,0.30); margin: 0 0 3px;
}
.crisis-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.14rem; font-weight: 600; color: #F5F1E8; margin: 0; line-height: 1.2;
}
.crisis-desc {
  font-size: 0.82rem; color: rgba(245,241,232,0.46);
  line-height: 1.60; flex: 1; margin: 0 0 14px;
}
.crisis-response {
  display: flex; align-items: center; gap: 8px;
  padding-top: 12px; border-top: 1px solid rgba(212,176,94,0.08); margin-top: auto;
}
.crisis-response-label {
  font-family: "DM Mono", monospace; font-size: 0.50rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,241,232,0.28);
}
.crisis-response-action {
  font-family: "DM Mono", monospace; font-size: 0.54rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(212,176,94,0.72);
}

/* ── Governance disclosure ── */
.governance-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.governance-card-header .hi-icon { width: 20px; height: 20px; color: rgba(212,176,94,0.55); flex-shrink: 0; }
.governance-card-header h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.10rem; font-weight: 600; color: #F5F1E8; margin: 0; line-height: 1.2;
}
.governance-card p {
  font-size: 0.82rem; color: rgba(245,241,232,0.44); line-height: 1.65; margin: 0;
}

/* ── Final CTA ── */
.risk-cta {
  padding: 52px 0;
  border-top: 1px solid rgba(212,176,94,0.10);
  background:
    radial-gradient(circle at 60% 50%, rgba(212,176,94,0.055), transparent 40%),
    linear-gradient(180deg, rgba(212,176,94,0.022), transparent);
  position: relative; z-index: 1;
}

.risk-cta-grid {
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}

.risk-cta-copy h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.0rem, 3.2vw, 3.6rem);
  font-weight: 400; line-height: 0.95; letter-spacing: -0.025em;
  color: #F5F1E8; margin: 6px 0 12px;
}
.risk-cta-copy h2 em { color: #D4B05E; font-style: italic; }

.risk-cta-copy p {
  font-size: 0.88rem; color: rgba(245,241,232,0.46);
  line-height: 1.62; max-width: 500px; margin: 0;
}

.risk-cta-actions { display: flex; flex-direction: column; gap: 10px; min-width: 196px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .risk-hero-grid  { grid-template-columns: 1fr; }
  .risk-grid-3     { grid-template-columns: 1fr 1fr; }
  .risk-cta-grid   { grid-template-columns: 1fr; }
  .risk-cta-actions { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .risk-wrap    { padding: 0 20px; }
  .risk-hero    { padding: 40px 0 36px; }
  .risk-section { padding: 40px 0; }
  .risk-grid-3,
  .risk-grid-2  { grid-template-columns: 1fr; }
  .risk-flow    { min-width: 600px; }
  .risk-cta-actions { flex-direction: column; }
  .risk-stat-grid { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════
   ABOUT PAGE — Motion Layer v1
   Appended: 2026-04-29
══════════════════════════════════════════════════════ */

.about-page { background: #05070B; overflow-x: hidden; }

.about-page::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 85% 8%, rgba(212,176,94,0.06), transparent),
    radial-gradient(ellipse 35% 55% at 5% 95%, rgba(91,143,212,0.04), transparent);
  pointer-events: none; z-index: 0;
}

.about-wrap {
  max-width: 1480px; margin: 0 auto; padding: 0 44px;
  position: relative; z-index: 1;
}

/* ── Section scaffold ── */
.about-section {
  padding: 56px 0;
  border-top: 1px solid rgba(212,176,94,0.07);
  position: relative; z-index: 1;
}

.about-section--dark {
  background: linear-gradient(180deg, rgba(5,7,11,0.0), rgba(212,176,94,0.016), rgba(5,7,11,0.0));
}

.about-section-head { margin-bottom: 42px; max-width: 700px; }

.about-section-head h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.2rem, 4vw, 4.6rem);
  font-weight: 400; line-height: 0.92; letter-spacing: -0.035em;
  color: #F5F1E8; margin: 6px 0 14px;
}
.about-section-head h2 em { color: #D4B05E; font-style: italic; }

.about-section-desc {
  font-size: 0.9rem; color: rgba(245,241,232,0.44);
  line-height: 1.65; max-width: 580px; margin: 0;
}

/* ── Grid ── */
.about-grid   { display: grid; gap: 18px; }
.about-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── Glass card base ── */
.about-card,
.about-governance-card {
  min-width: 0; padding: 24px; border-radius: 18px;
  border: 1px solid rgba(212,176,94,0.14);
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  box-shadow: 0 16px 48px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.018);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
  display: flex; flex-direction: column;
}

.about-card:hover,
.about-governance-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212,176,94,0.34);
  background: linear-gradient(145deg, rgba(212,176,94,0.07), rgba(255,255,255,0.018));
}

/* ── Icon colours ── */
.about-card-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-bottom: 14px;
}
.about-card-icon .hi-icon { width: 20px; height: 20px; }

.about-icon--gold  { background: rgba(212,176,94,0.14); color: #D4B05E; }
.about-icon--amber { background: rgba(240,168,74,0.14);  color: #F0A84A; }
.about-icon--red   { background: rgba(216,92,74,0.14);   color: #D85C4A; }
.about-icon--blue  { background: rgba(91,143,212,0.14);  color: #5B8FD4; }
.about-icon--green { background: rgba(85,201,138,0.14);  color: #55C98A; }

.about-card-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.22rem; font-weight: 600; color: #F5F1E8;
  margin: 0 0 8px; line-height: 1.2;
}

.about-card-desc {
  font-size: 0.84rem; color: rgba(245,241,232,0.48);
  line-height: 1.62; flex: 1; margin: 0 0 14px;
}

.about-card-kicker {
  font-family: "DM Mono", monospace; font-size: 0.50rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(212,176,94,0.45); margin: 0;
  padding-top: 12px; border-top: 1px solid rgba(212,176,94,0.08);
  margin-top: auto;
}

/* ── Hero ── */
.about-hero {
  padding: 64px 0 56px;
  background:
    radial-gradient(circle at 78% 28%, rgba(212,176,94,0.10), transparent 32%),
    radial-gradient(circle at 12% 72%, rgba(91,143,212,0.06), transparent 28%),
    linear-gradient(180deg, rgba(5,7,11,0.98), #05070B);
  position: relative; z-index: 1;
}

.about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(380px, 1fr);
  gap: clamp(42px, 6vw, 86px); align-items: center;
}

.about-hero h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.8rem, 5vw, 5.6rem);
  font-weight: 400; line-height: 0.92; letter-spacing: -0.035em;
  color: #F5F1E8; margin: 6px 0 18px;
}
.about-hero h1 em { color: #D4B05E; font-style: italic; }

.about-hero-desc {
  font-size: 0.92rem; color: rgba(245,241,232,0.52);
  line-height: 1.68; max-width: 520px; margin: 0 0 28px;
}

.about-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Hero identity panel */
.about-identity-panel {
  padding: 28px; border-radius: 20px;
  border: 1px solid rgba(212,176,94,0.18);
  background:
    linear-gradient(rgba(212,176,94,0.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,176,94,0.025) 1px, transparent 1px),
    rgba(5,7,11,0.72);
  background-size: 48px 48px, 48px 48px, auto;
}

.about-identity-label {
  font-family: "DM Mono", monospace; font-size: 0.54rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(212,176,94,0.55); margin: 0 0 20px;
}

.about-identity-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin-bottom: 22px;
}

.about-identity-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(212,176,94,0.10);
  background: rgba(255,255,255,0.022);
}

.about-identity-icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212,176,94,0.12); color: #D4B05E;
}
.about-identity-icon .hi-icon { width: 16px; height: 16px; }

.about-identity-name {
  font-family: "DM Mono", monospace; font-size: 0.56rem;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(245,241,232,0.62); line-height: 1.3;
}

.about-identity-meta {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; padding-top: 18px;
  border-top: 1px solid rgba(212,176,94,0.08);
}

.about-meta-item { display: flex; flex-direction: column; gap: 3px; align-items: center; }

.about-meta-value {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.8rem; font-weight: 400; color: #D4B05E; line-height: 1;
}

.about-meta-label {
  font-family: "DM Mono", monospace; font-size: 0.48rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245,241,232,0.38); text-align: center;
}

/* ── Mission section ── */
.about-mission-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.95fr);
  gap: clamp(42px, 6vw, 86px); align-items: start;
}

.about-mission-copy h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.2rem, 4vw, 4.6rem);
  font-weight: 400; line-height: 0.92; letter-spacing: -0.035em;
  color: #F5F1E8; margin: 6px 0 20px;
}
.about-mission-copy h2 em { color: #D4B05E; font-style: italic; }

.about-mission-copy .about-section-desc + .about-section-desc { margin-top: 12px; }

/* Principles card */
.about-principles-card {
  padding: 28px; border-radius: 20px;
  border: 1px solid rgba(212,176,94,0.18);
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  box-shadow: 0 16px 48px rgba(0,0,0,0.28);
}

.about-principles-label {
  font-family: "DM Mono", monospace; font-size: 0.54rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(212,176,94,0.55); margin: 0 0 20px;
}

.about-principles-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}

.about-principle-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(212,176,94,0.07);
}
.about-principle-item:last-child { border-bottom: none; padding-bottom: 0; }
.about-principle-item:first-child { padding-top: 0; }

.about-principle-item .hi-icon {
  width: 18px; height: 18px; color: #55C98A;
  flex-shrink: 0; margin-top: 2px;
}

.about-principle-item > div { display: flex; flex-direction: column; gap: 4px; }

.about-principle-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.05rem; font-weight: 600; color: #F5F1E8; line-height: 1.2;
}

.about-principle-desc {
  font-size: 0.80rem; color: rgba(245,241,232,0.44); line-height: 1.58;
}

/* ── Framework flow ── */
.about-flow-wrapper { overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }

.about-framework-flow {
  display: grid;
  grid-template-columns: 1fr 48px 1fr 48px 1fr 48px 1fr 48px 1fr;
  gap: 0; align-items: center; min-width: 820px;
}

.about-flow-node { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.about-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: #D4B05E; box-shadow: 0 0 18px #D4B05E;
  animation: dotPulse 1800ms ease-in-out infinite; flex-shrink: 0;
}

.about-flow-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 14px; border-radius: 14px;
  border: 1px solid rgba(212,176,94,0.14);
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  text-align: center; width: 100%;
  transition: border-color 220ms ease, background 220ms ease;
}
.about-flow-card:hover {
  border-color: rgba(212,176,94,0.32);
  background: linear-gradient(145deg, rgba(212,176,94,0.06), rgba(255,255,255,0.018));
}
.about-flow-card .hi-icon { width: 20px; height: 20px; color: rgba(212,176,94,0.68); flex-shrink: 0; }

.about-flow-title {
  font-family: "DM Mono", monospace; font-size: 0.56rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245,241,232,0.72); line-height: 1.3;
}
.about-flow-sub { font-size: 0.72rem; color: rgba(245,241,232,0.32); line-height: 1.3; }

.about-flow-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212,176,94,0.55), transparent);
  position: relative; overflow: hidden; border-radius: 1px;
}
.about-flow-line::after {
  content: ""; position: absolute; inset: 0; width: 35%;
  background: linear-gradient(90deg, transparent, rgba(245,241,232,0.80), transparent);
  animation: photonLine 2200ms ease-in-out infinite;
}

/* ── Governance cards ── */
.about-governance-card { gap: 0; }

.about-governance-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.about-governance-header .hi-icon { width: 20px; height: 20px; color: rgba(212,176,94,0.55); flex-shrink: 0; }
.about-governance-header h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.10rem; font-weight: 600; color: #F5F1E8; margin: 0; line-height: 1.2;
}
.about-governance-card p {
  font-size: 0.82rem; color: rgba(245,241,232,0.44); line-height: 1.65; margin: 0;
}

/* ── Final CTA ── */
.about-cta {
  padding: 52px 0;
  border-top: 1px solid rgba(212,176,94,0.10);
  background:
    radial-gradient(circle at 60% 50%, rgba(212,176,94,0.055), transparent 40%),
    linear-gradient(180deg, rgba(212,176,94,0.022), transparent);
  position: relative; z-index: 1;
}

.about-cta-grid {
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}

.about-cta-copy h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.0rem, 3.2vw, 3.6rem);
  font-weight: 400; line-height: 0.95; letter-spacing: -0.025em;
  color: #F5F1E8; margin: 6px 0 12px;
}
.about-cta-copy h2 em { color: #D4B05E; font-style: italic; }

.about-cta-copy p {
  font-size: 0.88rem; color: rgba(245,241,232,0.46);
  line-height: 1.62; max-width: 500px; margin: 0;
}

.about-cta-actions { display: flex; flex-direction: column; gap: 10px; min-width: 196px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .about-hero-grid    { grid-template-columns: 1fr; }
  .about-mission-grid { grid-template-columns: 1fr; }
  .about-grid-3       { grid-template-columns: 1fr 1fr; }
  .about-cta-grid     { grid-template-columns: 1fr; }
  .about-cta-actions  { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .about-wrap       { padding: 0 20px; }
  .about-hero       { padding: 40px 0 36px; }
  .about-section    { padding: 40px 0; }
  .about-grid-3,
  .about-grid-2     { grid-template-columns: 1fr; }
  .about-framework-flow { min-width: 600px; }
  .about-cta-actions { flex-direction: column; }
  .about-identity-grid { grid-template-columns: 1fr; }
  .about-identity-meta { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════════════════════
   CONTACT PAGE — Motion Layer v1
   Appended: 2026-04-29
══════════════════════════════════════════════════════ */

.contact-page { background: #05070B; overflow-x: hidden; }

.contact-page::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 55% 40% at 82% 6%, rgba(212,176,94,0.06), transparent),
    radial-gradient(ellipse 40% 55% at 12% 88%, rgba(58,111,158,0.05), transparent);
  pointer-events: none; z-index: 0;
}

.contact-wrap {
  max-width: 1480px; margin: 0 auto; padding: 0 44px;
  position: relative; z-index: 1;
}

/* ── Sections ── */
.contact-section {
  padding: 56px 0;
  border-top: 1px solid rgba(212,176,94,0.07);
  position: relative; z-index: 1;
}

.contact-section--dark {
  background: linear-gradient(180deg, rgba(5,7,11,0.0), rgba(212,176,94,0.016), rgba(5,7,11,0.0));
}

.contact-section-head { margin-bottom: 42px; max-width: 700px; }

.contact-section-head h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.2rem, 4vw, 4.6rem);
  font-weight: 400; line-height: 0.92; letter-spacing: -0.035em;
  color: #F5F1E8; margin: 6px 0 14px;
}
.contact-section-head h2 em { color: #D4B05E; font-style: italic; }

.contact-section-desc {
  font-size: 0.9rem; color: rgba(245,241,232,0.44);
  line-height: 1.65; max-width: 580px; margin: 0;
}

/* ── Glass card base ── */
.contact-card,
.contact-form-panel,
.contact-route-card,
.contact-notice-card {
  min-width: 0; padding: 24px; border-radius: 18px;
  border: 1px solid rgba(212,176,94,0.14);
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  box-shadow: 0 16px 48px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.018);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.contact-route-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212,176,94,0.34);
  background: linear-gradient(145deg, rgba(212,176,94,0.07), rgba(255,255,255,0.018));
}

/* ── Hero ── */
.contact-hero {
  padding: 64px 0 56px;
  background:
    radial-gradient(circle at 78% 28%, rgba(212,176,94,0.10), transparent 32%),
    radial-gradient(circle at 18% 72%, rgba(58,111,158,0.06), transparent 28%),
    linear-gradient(180deg, rgba(5,7,11,0.98), #05070B);
  position: relative; z-index: 1;
}

.contact-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1fr);
  gap: clamp(42px, 6vw, 86px); align-items: center;
}

.contact-hero h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.8rem, 5vw, 5.6rem);
  font-weight: 400; line-height: 0.92; letter-spacing: -0.035em;
  color: #F5F1E8; margin: 6px 0 18px;
}
.contact-hero h1 em { color: #D4B05E; font-style: italic; }

.contact-hero-desc {
  font-size: 0.92rem; color: rgba(245,241,232,0.52);
  line-height: 1.68; max-width: 520px; margin: 0 0 28px;
}

.contact-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Info panel */
.contact-info-panel {
  padding: 28px; border-radius: 20px;
  border: 1px solid rgba(212,176,94,0.18);
  background: rgba(5,7,11,0.72);
}

.contact-info-label {
  font-family: "DM Mono", monospace; font-size: 0.54rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(212,176,94,0.55); margin: 0 0 18px;
}

.contact-info-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.contact-info-item { display: flex; align-items: flex-start; gap: 12px; }

.contact-info-icon {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212,176,94,0.12); color: #D4B05E;
}
.contact-info-icon .hi-icon { width: 16px; height: 16px; }

.contact-info-title {
  display: block; font-family: "DM Mono", monospace; font-size: 0.56rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,241,232,0.62);
  margin-bottom: 2px;
}
.contact-info-desc {
  display: block; font-size: 0.82rem; color: rgba(245,241,232,0.40); line-height: 1.45;
}

.contact-info-notice {
  font-size: 0.72rem; color: rgba(245,241,232,0.26); line-height: 1.5;
  border-top: 1px solid rgba(212,176,94,0.08); padding-top: 12px; margin: 0;
}

/* ── Form section ── */
.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 420px);
  gap: clamp(32px, 5vw, 56px); align-items: start;
}

.contact-form-panel { display: flex; flex-direction: column; gap: 24px; }

.contact-form-header h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 3.6vw, 4rem);
  font-weight: 400; line-height: 0.92; letter-spacing: -0.035em;
  color: #F5F1E8; margin: 6px 0 14px;
}
.contact-form-header h2 em { color: #D4B05E; font-style: italic; }

.contact-form-intro {
  font-size: 0.86rem; color: rgba(245,241,232,0.44); line-height: 1.65; margin: 0;
}

.contact-form { display: flex; flex-direction: column; gap: 14px; }

.contact-field-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}

.contact-field { display: flex; flex-direction: column; gap: 6px; }
.contact-field--full { grid-column: 1 / -1; }

.contact-label {
  font-family: "DM Mono", monospace; font-size: 0.54rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245,241,232,0.54);
}

.contact-required { color: rgba(212,176,94,0.65); }

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%; min-height: 52px; box-sizing: border-box;
  border: 1px solid rgba(212,176,94,0.16);
  border-radius: 12px;
  background: rgba(255,255,255,0.035);
  color: #F5F1E8;
  padding: 0 16px;
  font-family: "DM Mono", monospace; font-size: 0.78rem;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  -webkit-appearance: none;
}

.contact-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgba(212,176,94,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 38px;
}

.contact-field option { background: #0E111A; color: #F5F1E8; }

.contact-field textarea {
  min-height: 140px; padding: 14px 16px; resize: vertical;
  line-height: 1.6;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: rgba(212,176,94,0.55);
  box-shadow: 0 0 0 3px rgba(212,176,94,0.08);
}

.contact-field input.contact-field--error,
.contact-field select.contact-field--error,
.contact-field textarea.contact-field--error {
  border-color: rgba(216,92,74,0.55);
  box-shadow: 0 0 0 3px rgba(216,92,74,0.08);
}

.contact-field input::placeholder,
.contact-field textarea::placeholder { color: rgba(245,241,232,0.22); }

.contact-field-error {
  font-family: "DM Mono", monospace; font-size: 0.52rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(216,92,74,0.75); min-height: 14px;
}

/* Radio group */
.contact-radio-group { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 2px; }

.contact-radio {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: "DM Mono", monospace; font-size: 0.70rem;
  color: rgba(245,241,232,0.58); padding: 8px 14px;
  border: 1px solid rgba(212,176,94,0.14); border-radius: 8px;
  transition: border-color 180ms ease, background 180ms ease;
}
.contact-radio:hover { border-color: rgba(212,176,94,0.32); background: rgba(212,176,94,0.04); }
.contact-radio input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.contact-radio input[type="radio"]:focus-visible + .contact-radio-mark { outline: 2px solid rgba(212,176,94,0.6); }

.contact-radio-mark {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(212,176,94,0.35); flex-shrink: 0;
  position: relative;
}
.contact-radio input[type="radio"]:checked ~ .contact-radio-mark {
  border-color: #D4B05E;
  background: #D4B05E;
  box-shadow: 0 0 6px rgba(212,176,94,0.45);
}
.contact-radio input[type="radio"]:checked ~ .contact-radio-mark::after {
  content: ""; position: absolute; inset: 3px;
  background: #05070B; border-radius: 50%;
}

.contact-form-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }

/* Success state */
.contact-form-success {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px; border-radius: 14px;
  border: 1px solid rgba(85,201,138,0.28);
  background: rgba(85,201,138,0.07);
  margin-top: 6px;
}
.contact-form-success .hi-icon { width: 22px; height: 22px; color: #55C98A; flex-shrink: 0; margin-top: 2px; }
.contact-success-title {
  font-family: "Cormorant Garamond", serif; font-size: 1.05rem;
  font-weight: 600; color: #55C98A; margin: 0 0 4px;
}
.contact-success-desc { font-size: 0.82rem; color: rgba(245,241,232,0.44); line-height: 1.6; margin: 0; }

/* Sidebar */
.contact-form-sidebar { display: flex; flex-direction: column; gap: 16px; }

.contact-sidebar-card { transition: none; }

.contact-sidebar-label {
  font-family: "DM Mono", monospace; font-size: 0.54rem;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: rgba(212,176,94,0.55); margin: 0 0 14px;
}

.contact-sidebar-card--alt {
  border-color: rgba(212,176,94,0.22);
  background: linear-gradient(145deg, rgba(212,176,94,0.06), rgba(255,255,255,0.012));
}

.contact-sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.contact-sidebar-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.80rem; color: rgba(245,241,232,0.44); line-height: 1.55; }
.contact-sidebar-list .hi-icon { width: 16px; height: 16px; color: #55C98A; flex-shrink: 0; margin-top: 2px; }

.contact-sidebar-body { font-size: 0.82rem; color: rgba(245,241,232,0.44); line-height: 1.62; margin: 0; }

.contact-sidebar-links { display: flex; flex-direction: column; gap: 4px; }

.contact-sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(212,176,94,0.08);
  color: rgba(245,241,232,0.58); text-decoration: none;
  font-family: "DM Mono", monospace; font-size: 0.64rem;
  letter-spacing: 0.10em; text-transform: uppercase;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}
.contact-sidebar-link:hover {
  border-color: rgba(212,176,94,0.28); color: rgba(245,241,232,0.82);
  background: rgba(212,176,94,0.04);
}
.contact-sidebar-link .hi-icon { width: 16px; height: 16px; color: rgba(212,176,94,0.55); flex-shrink: 0; }

/* ── Contact route cards ── */
.contact-route-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}

.contact-route-card { display: flex; flex-direction: column; }

.contact-route-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.contact-route-icon .hi-icon { width: 20px; height: 20px; }
.contact-route-icon--gold  { background: rgba(212,176,94,0.14); color: #D4B05E; }
.contact-route-icon--amber { background: rgba(240,168,74,0.14);  color: #F0A84A; }
.contact-route-icon--blue  { background: rgba(91,143,212,0.14);  color: #5B8FD4; }
.contact-route-icon--green { background: rgba(85,201,138,0.14);  color: #55C98A; }

.contact-route-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.18rem; font-weight: 600; color: #F5F1E8;
  margin: 0 0 8px; line-height: 1.2;
}

.contact-route-desc {
  font-size: 0.82rem; color: rgba(245,241,232,0.46);
  line-height: 1.62; flex: 1; margin: 0 0 14px;
}

.contact-route-tag {
  font-family: "DM Mono", monospace; font-size: 0.50rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(212,176,94,0.50); padding-top: 12px;
  border-top: 1px solid rgba(212,176,94,0.08);
  margin-top: auto;
}

/* ── Process flow ── */
.contact-flow-wrapper { overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }

.contact-process-flow {
  display: grid;
  grid-template-columns: 1fr 48px 1fr 48px 1fr 48px 1fr 48px 1fr;
  gap: 0; align-items: center; min-width: 780px;
}

.contact-flow-node { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.contact-flow-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: #D4B05E; box-shadow: 0 0 18px #D4B05E;
  animation: dotPulse 1800ms ease-in-out infinite; flex-shrink: 0;
}

.contact-flow-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 14px; border-radius: 14px;
  border: 1px solid rgba(212,176,94,0.14);
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  text-align: center; width: 100%;
  transition: border-color 220ms ease;
}
.contact-flow-card:hover { border-color: rgba(212,176,94,0.30); }
.contact-flow-card .hi-icon { width: 20px; height: 20px; color: rgba(212,176,94,0.68); flex-shrink: 0; }

.contact-flow-title {
  font-family: "DM Mono", monospace; font-size: 0.56rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245,241,232,0.72); line-height: 1.3;
}
.contact-flow-sub { font-size: 0.72rem; color: rgba(245,241,232,0.32); line-height: 1.3; }

.contact-flow-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212,176,94,0.55), transparent);
  position: relative; overflow: hidden; border-radius: 1px;
}
.contact-flow-line::after {
  content: ""; position: absolute; inset: 0; width: 35%;
  background: linear-gradient(90deg, transparent, rgba(245,241,232,0.80), transparent);
  animation: photonLine 2200ms ease-in-out infinite;
}

/* ── Security notice ── */
.contact-notice-card {
  max-width: 900px;
  border-color: rgba(240,168,74,0.22);
  background: linear-gradient(145deg, rgba(240,168,74,0.05), rgba(255,255,255,0.012));
}

.contact-notice-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }

.contact-notice-icon {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(240,168,74,0.14); color: #F0A84A;
}
.contact-notice-icon .hi-icon { width: 22px; height: 22px; }

.contact-notice-kicker {
  font-family: "DM Mono", monospace; font-size: 0.50rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(240,168,74,0.65); margin: 0 0 3px;
}

.contact-notice-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.18rem; font-weight: 600; color: #F5F1E8; margin: 0;
}

.contact-notice-body {
  font-size: 0.84rem; color: rgba(245,241,232,0.46); line-height: 1.65; margin: 0 0 14px;
}

.contact-notice-list {
  margin: 0 0 16px; padding-left: 0; list-style: none;
  display: flex; flex-direction: column; gap: 6px;
}
.contact-notice-list li {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 0.82rem; color: rgba(245,241,232,0.50); line-height: 1.55;
}
.contact-notice-list li::before {
  content: ""; display: inline-block; width: 5px; height: 5px;
  border-radius: 50%; background: rgba(240,168,74,0.55); flex-shrink: 0; margin-top: 4px;
}

.contact-notice-footer {
  font-size: 0.78rem; color: rgba(245,241,232,0.30); line-height: 1.55;
  border-top: 1px solid rgba(240,168,74,0.10); padding-top: 14px; margin: 0;
}

/* ── Final CTA ── */
.contact-cta {
  padding: 52px 0;
  border-top: 1px solid rgba(212,176,94,0.10);
  background:
    radial-gradient(circle at 60% 50%, rgba(212,176,94,0.055), transparent 40%),
    linear-gradient(180deg, rgba(212,176,94,0.022), transparent);
  position: relative; z-index: 1;
}

.contact-cta-grid {
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}

.contact-cta-copy h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.0rem, 3.2vw, 3.6rem);
  font-weight: 400; line-height: 0.95; letter-spacing: -0.025em;
  color: #F5F1E8; margin: 6px 0 12px;
}
.contact-cta-copy h2 em { color: #D4B05E; font-style: italic; }

.contact-cta-copy p {
  font-size: 0.88rem; color: rgba(245,241,232,0.46);
  line-height: 1.62; max-width: 500px; margin: 0;
}

.contact-cta-actions { display: flex; flex-direction: column; gap: 10px; min-width: 196px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .contact-hero-grid   { grid-template-columns: 1fr; }
  .contact-form-grid   { grid-template-columns: 1fr; }
  .contact-route-grid  { grid-template-columns: 1fr 1fr; }
  .contact-cta-grid    { grid-template-columns: 1fr; }
  .contact-cta-actions { flex-direction: row; flex-wrap: wrap; }
  .contact-form-sidebar { grid-row: 1; }
}

@media (max-width: 720px) {
  .contact-wrap           { padding: 0 20px; }
  .contact-hero           { padding: 40px 0 36px; }
  .contact-section        { padding: 40px 0; }
  .contact-route-grid     { grid-template-columns: 1fr; }
  .contact-field-grid     { grid-template-columns: 1fr; }
  .contact-process-flow   { min-width: 560px; }
  .contact-cta-actions    { flex-direction: column; }
  .contact-radio-group    { flex-direction: column; }
}

/* Contact: ensure hidden attribute wins over display:flex */
#contact-success[hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════
   REQUEST ACCESS PAGE — Motion Layer v1
   Appended: 2026-04-30
══════════════════════════════════════════════════════ */

.request-page { background: #05070B; overflow-x: hidden; }

.request-page::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 55% 40% at 82% 6%, rgba(212,176,94,0.06), transparent),
    radial-gradient(ellipse 40% 55% at 12% 88%, rgba(58,111,158,0.05), transparent);
  pointer-events: none; z-index: 0;
}

.request-wrap {
  max-width: 1480px; margin: 0 auto; padding: 0 44px;
  position: relative; z-index: 1;
}

/* ── Sections ── */
.request-section {
  padding: 56px 0;
  border-top: 1px solid rgba(212,176,94,0.07);
  position: relative; z-index: 1;
}

.request-section--dark {
  background: linear-gradient(180deg, rgba(5,7,11,0.0), rgba(212,176,94,0.016), rgba(5,7,11,0.0));
}

.request-section-head { margin-bottom: 42px; max-width: 700px; }

.request-section-head h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.2rem, 4vw, 4.6rem);
  font-weight: 400; line-height: 0.92; letter-spacing: -0.035em;
  color: #F5F1E8; margin: 6px 0 14px;
}
.request-section-head h2 em { color: #D4B05E; font-style: italic; }

.request-section-desc {
  font-size: 0.9rem; color: rgba(245,241,232,0.44);
  line-height: 1.65; max-width: 580px; margin: 0;
}

/* ── Grids ── */
.request-grid   { display: grid; gap: 18px; }
.request-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── Glass card base ── */
.request-card,
.request-form-panel,
.request-doc-card,
.request-tier-card,
.request-disclosure-card {
  min-width: 0; padding: 24px; border-radius: 18px;
  border: 1px solid rgba(212,176,94,0.14);
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  box-shadow: 0 16px 48px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.018);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.request-card:hover,
.request-doc-card:hover,
.request-tier-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212,176,94,0.34);
  background: linear-gradient(145deg, rgba(212,176,94,0.07), rgba(255,255,255,0.018));
}

/* ── Hero ── */
.request-hero {
  padding: 64px 0 56px;
  background:
    radial-gradient(circle at 78% 28%, rgba(212,176,94,0.10), transparent 32%),
    radial-gradient(circle at 18% 72%, rgba(58,111,158,0.06), transparent 28%),
    linear-gradient(180deg, rgba(5,7,11,0.98), #05070B);
  position: relative; z-index: 1;
}

.request-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1fr);
  gap: clamp(42px, 6vw, 86px); align-items: start;
}

.request-hero h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.8rem, 5vw, 5.6rem);
  font-weight: 400; line-height: 0.92; letter-spacing: -0.035em;
  color: #F5F1E8; margin: 6px 0 18px;
}
.request-hero h1 em { color: #D4B05E; font-style: italic; }

.request-hero-desc {
  font-size: 0.92rem; color: rgba(245,241,232,0.52);
  line-height: 1.68; max-width: 520px; margin: 0 0 28px;
}

.request-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Qualification panel */
.request-info-panel {
  padding: 28px; border-radius: 20px;
  border: 1px solid rgba(212,176,94,0.18);
  background: rgba(5,7,11,0.72);
}

.request-info-label {
  font-family: "DM Mono", monospace; font-size: 0.54rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(212,176,94,0.55); margin: 0 0 18px;
}

.request-qual-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.request-qual-item { display: flex; align-items: flex-start; gap: 12px; }

.request-qual-icon {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.request-qual-icon .hi-icon { width: 16px; height: 16px; }

.request-qual-icon--gold  { background: rgba(212,176,94,0.14); color: #D4B05E; }
.request-qual-icon--amber { background: rgba(240,168,74,0.14);  color: #F0A84A; }
.request-qual-icon--red   { background: rgba(216,92,74,0.14);   color: #D85C4A; }
.request-qual-icon--blue  { background: rgba(91,143,212,0.14);  color: #5B8FD4; }

.request-qual-title {
  display: block; font-family: "DM Mono", monospace; font-size: 0.58rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,241,232,0.70);
  margin-bottom: 3px;
}
.request-qual-desc {
  display: block; font-size: 0.80rem; color: rgba(245,241,232,0.38); line-height: 1.50;
}

.request-info-notice {
  font-size: 0.72rem; color: rgba(245,241,232,0.26); line-height: 1.5;
  border-top: 1px solid rgba(212,176,94,0.08); padding-top: 12px; margin: 0;
}

/* ── Form section ── */
.request-form-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 400px);
  gap: clamp(32px, 5vw, 56px); align-items: start;
}

.request-form-panel { display: flex; flex-direction: column; gap: 24px; }

.request-form-header h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 3.6vw, 4rem);
  font-weight: 400; line-height: 0.92; letter-spacing: -0.035em;
  color: #F5F1E8; margin: 6px 0 14px;
}
.request-form-header h2 em { color: #D4B05E; font-style: italic; }

.request-form-intro {
  font-size: 0.86rem; color: rgba(245,241,232,0.44); line-height: 1.65; margin: 0;
}

.request-form { display: flex; flex-direction: column; gap: 14px; }

.request-field-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}

.request-field { display: grid; gap: 6px; }
.request-field--full { grid-column: 1 / -1; }

.request-field label {
  font-family: "DM Mono", monospace; font-size: 0.60rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(212,176,94,0.68);
}

.request-required { color: rgba(212,176,94,0.60); }

.request-field input,
.request-field select,
.request-field textarea {
  width: 100%; min-height: 52px; box-sizing: border-box;
  border: 1px solid rgba(212,176,94,0.16);
  border-radius: 12px;
  background: rgba(255,255,255,0.035);
  color: #F5F1E8;
  padding: 0 16px;
  font-family: "DM Mono", monospace; font-size: 0.78rem;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  -webkit-appearance: none;
}

.request-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgba(212,176,94,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
  padding-right: 38px;
}
.request-field option { background: #0E111A; color: #F5F1E8; }

.request-field textarea {
  min-height: 150px; padding: 14px 16px; resize: vertical; line-height: 1.6;
}

.request-field input:focus,
.request-field select:focus,
.request-field textarea:focus {
  outline: none;
  border-color: rgba(212,176,94,0.55);
  box-shadow: 0 0 0 3px rgba(212,176,94,0.08);
}

.request-field input.request-field--error,
.request-field select.request-field--error,
.request-field textarea.request-field--error {
  border-color: rgba(216,92,74,0.55);
  box-shadow: 0 0 0 3px rgba(216,92,74,0.08);
}

.request-field input::placeholder,
.request-field textarea::placeholder { color: rgba(245,241,232,0.22); }

.request-field-error {
  font-family: "DM Mono", monospace; font-size: 0.52rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(216,92,74,0.75); min-height: 14px;
}

/* Risk acknowledgement */
.request-ack-row { display: flex; flex-direction: column; gap: 6px; }

.request-ack-label {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
}

.request-ack-label input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }

.request-ack-check {
  width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0;
  border: 1px solid rgba(212,176,94,0.30);
  background: rgba(255,255,255,0.03);
  margin-top: 2px; position: relative;
  transition: border-color 180ms ease, background 180ms ease;
}

.request-ack-label:hover .request-ack-check { border-color: rgba(212,176,94,0.55); }

.request-ack-label input:checked + .request-ack-check {
  background: #D4B05E; border-color: #D4B05E;
}

.request-ack-label input:checked + .request-ack-check::after {
  content: ""; position: absolute; inset: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2305070B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 6 5 9 10 3'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat;
}

.request-ack-label input:focus-visible + .request-ack-check { outline: 2px solid rgba(212,176,94,0.6); }

.request-ack-text { font-size: 0.80rem; color: rgba(245,241,232,0.46); line-height: 1.58; }

.request-form-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }

/* Success */
.request-form-success[hidden] { display: none !important; }

.request-form-success {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px; border-radius: 14px;
  border: 1px solid rgba(85,201,138,0.28);
  background: rgba(85,201,138,0.07); margin-top: 6px;
}
.request-form-success .hi-icon { width: 22px; height: 22px; color: #55C98A; flex-shrink: 0; margin-top: 2px; }
.request-success-title { font-family: "Cormorant Garamond", serif; font-size: 1.05rem; font-weight: 600; color: #55C98A; margin: 0 0 4px; }
.request-success-desc { font-size: 0.82rem; color: rgba(245,241,232,0.44); line-height: 1.6; margin: 0; }

/* Sidebar */
.request-form-sidebar { display: flex; flex-direction: column; gap: 16px; }

.request-sidebar-card { transition: none; }
.request-sidebar-card--alt {
  border-color: rgba(212,176,94,0.20);
  background: linear-gradient(145deg, rgba(212,176,94,0.05), rgba(255,255,255,0.012));
}

.request-sidebar-label {
  font-family: "DM Mono", monospace; font-size: 0.54rem;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: rgba(212,176,94,0.55); margin: 0 0 16px;
}

.request-sidebar-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; counter-reset: none; }

.request-sidebar-steps li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(212,176,94,0.07);
}
.request-sidebar-steps li:last-child { border-bottom: none; padding-bottom: 0; }
.request-sidebar-steps li:first-child { padding-top: 0; }

.request-step-num {
  font-family: "DM Mono", monospace; font-size: 0.54rem;
  letter-spacing: 0.10em; color: rgba(212,176,94,0.50);
  min-width: 22px; margin-top: 1px;
}

.request-step-title {
  display: block; font-family: "DM Mono", monospace; font-size: 0.62rem;
  letter-spacing: 0.10em; text-transform: uppercase; color: rgba(245,241,232,0.70);
  margin-bottom: 3px;
}
.request-step-desc { display: block; font-size: 0.78rem; color: rgba(245,241,232,0.38); line-height: 1.52; }

.request-sidebar-links { display: flex; flex-direction: column; gap: 4px; }
.request-sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(212,176,94,0.08);
  color: rgba(245,241,232,0.58); text-decoration: none;
  font-family: "DM Mono", monospace; font-size: 0.62rem;
  letter-spacing: 0.10em; text-transform: uppercase;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}
.request-sidebar-link:hover {
  border-color: rgba(212,176,94,0.28); color: rgba(245,241,232,0.82);
  background: rgba(212,176,94,0.04);
}
.request-sidebar-link .hi-icon { width: 16px; height: 16px; color: rgba(212,176,94,0.55); flex-shrink: 0; }

/* ── Process flow ── */
.request-flow-wrapper { overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }

.request-flow {
  display: grid;
  grid-template-columns: 1fr 44px 1fr 44px 1fr 44px 1fr 44px 1fr;
  gap: 0; align-items: center; min-width: 780px;
}

.request-flow-node { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.request-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: #D4B05E; box-shadow: 0 0 18px #D4B05E;
  animation: dotPulse 1800ms ease-in-out infinite; flex-shrink: 0;
}

.request-flow-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 10px; border-radius: 14px;
  border: 1px solid rgba(212,176,94,0.14);
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  text-align: center; width: 100%;
  transition: border-color 220ms ease;
}
.request-flow-card:hover { border-color: rgba(212,176,94,0.30); }
.request-flow-card .hi-icon { width: 20px; height: 20px; color: rgba(212,176,94,0.68); flex-shrink: 0; }

.request-flow-title {
  font-family: "DM Mono", monospace; font-size: 0.54rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(245,241,232,0.72); line-height: 1.3;
}
.request-flow-sub { font-size: 0.70rem; color: rgba(245,241,232,0.32); line-height: 1.3; }

.request-flow-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212,176,94,0.55), transparent);
  position: relative; overflow: hidden; border-radius: 1px;
}
.request-flow-line::after {
  content: ""; position: absolute; inset: 0; width: 35%;
  background: linear-gradient(90deg, transparent, rgba(245,241,232,0.80), transparent);
  animation: photonLine 2200ms ease-in-out infinite;
}

/* ── Document cards ── */
.request-doc-card { display: flex; flex-direction: column; }

.request-doc-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.request-doc-icon .hi-icon { width: 20px; height: 20px; }

.request-doc-icon--gold  { background: rgba(212,176,94,0.14); color: #D4B05E; }
.request-doc-icon--amber { background: rgba(240,168,74,0.14);  color: #F0A84A; }
.request-doc-icon--red   { background: rgba(216,92,74,0.14);   color: #D85C4A; }
.request-doc-icon--blue  { background: rgba(91,143,212,0.14);  color: #5B8FD4; }
.request-doc-icon--green { background: rgba(85,201,138,0.14);  color: #55C98A; }

.request-doc-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.10rem; font-weight: 600; color: #F5F1E8;
  margin: 0 0 8px; line-height: 1.2;
}
.request-doc-desc {
  font-size: 0.82rem; color: rgba(245,241,232,0.46);
  line-height: 1.60; flex: 1; margin: 0 0 16px;
}

.request-doc-btn {
  font-family: "DM Mono", monospace; font-size: 0.60rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 16px; border-radius: 8px;
  border: 1px solid rgba(212,176,94,0.20);
  color: rgba(245,241,232,0.38);
  background: rgba(255,255,255,0.02);
  cursor: not-allowed; margin-top: auto;
  opacity: 0.7;
}

/* ── Access tiers ── */
.request-tier-card { display: flex; flex-direction: column; gap: 0; }

.request-tier-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}

.request-tier-badge {
  font-family: "DM Mono", monospace; font-size: 0.50rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; border: 1px solid currentColor;
}
.request-tier-badge--observer  { color: rgba(245,241,232,0.44); background: rgba(255,255,255,0.04); }
.request-tier-badge--qualified { color: #D4B05E; background: rgba(212,176,94,0.10); }
.request-tier-badge--deployment { color: #55C98A; background: rgba(85,201,138,0.10); }

.request-tier-label {
  font-family: "DM Mono", monospace; font-size: 0.48rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245,241,232,0.28); margin: 0;
}

.request-tier-card--qualified {
  border-color: rgba(212,176,94,0.28);
  background: linear-gradient(145deg, rgba(212,176,94,0.06), rgba(255,255,255,0.014));
}

.request-tier-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.22rem; font-weight: 600; color: #F5F1E8;
  margin: 0 0 8px; line-height: 1.2;
}
.request-tier-desc {
  font-size: 0.82rem; color: rgba(245,241,232,0.46); line-height: 1.60; margin: 0 0 14px;
}

.request-tier-list {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-direction: column; gap: 5px; flex: 1;
}
.request-tier-list li {
  font-size: 0.80rem; color: rgba(245,241,232,0.44); line-height: 1.45;
  padding-left: 14px; position: relative;
}
.request-tier-list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(212,176,94,0.45);
}

.request-tier-restriction {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(212,176,94,0.08);
  margin-bottom: 14px;
}
.request-tier-restriction .hi-icon { width: 14px; height: 14px; color: rgba(240,168,74,0.55); flex-shrink: 0; }
.request-tier-restriction span { font-size: 0.72rem; color: rgba(245,241,232,0.34); line-height: 1.4; }

/* ── Disclosure cards ── */
.request-disclosure-card { display: flex; flex-direction: column; gap: 0; transition: none; }

.request-disclosure-icon {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(240,168,74,0.10); color: #F0A84A; margin-bottom: 12px;
}
.request-disclosure-icon .hi-icon { width: 18px; height: 18px; }

.request-disclosure-card h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.08rem; font-weight: 600; color: #F5F1E8;
  margin: 0 0 8px; line-height: 1.2;
}
.request-disclosure-card p {
  font-size: 0.81rem; color: rgba(245,241,232,0.44); line-height: 1.65; margin: 0;
}

/* ── Final CTA ── */
.request-cta {
  padding: 52px 0;
  border-top: 1px solid rgba(212,176,94,0.10);
  background:
    radial-gradient(circle at 60% 50%, rgba(212,176,94,0.055), transparent 40%),
    linear-gradient(180deg, rgba(212,176,94,0.022), transparent);
  position: relative; z-index: 1;
}

.request-cta-grid {
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}

.request-cta-copy h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.0rem, 3.2vw, 3.6rem);
  font-weight: 400; line-height: 0.95; letter-spacing: -0.025em;
  color: #F5F1E8; margin: 6px 0 12px;
}
.request-cta-copy h2 em { color: #D4B05E; font-style: italic; }

.request-cta-copy p {
  font-size: 0.88rem; color: rgba(245,241,232,0.46);
  line-height: 1.62; max-width: 500px; margin: 0;
}

.request-cta-actions { display: flex; flex-direction: column; gap: 10px; min-width: 196px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .request-hero-grid  { grid-template-columns: 1fr; }
  .request-form-grid  { grid-template-columns: 1fr; }
  .request-grid-3     { grid-template-columns: 1fr 1fr; }
  .request-cta-grid   { grid-template-columns: 1fr; }
  .request-cta-actions { flex-direction: row; flex-wrap: wrap; }
  .request-form-sidebar { grid-row: 1; }
}

@media (max-width: 720px) {
  .request-wrap       { padding: 0 20px; }
  .request-hero       { padding: 40px 0 36px; }
  .request-section    { padding: 40px 0; }
  .request-grid-3     { grid-template-columns: 1fr; }
  .request-field-grid { grid-template-columns: 1fr; }
  .request-flow       { min-width: 560px; }
  .request-cta-actions { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════
   AUTH PAGES (login.html / signup.html) — v1
   Appended: 2026-04-30
══════════════════════════════════════════════════════ */

/* ── Page shell ── */
.auth-page {
  position: relative;
  min-height: calc(100vh - 120px);
  overflow: hidden;
  padding: clamp(44px, 6vw, 80px) 0;
  background: #05070B;
}

.auth-bg {
  position: absolute; inset: 0;
  pointer-events: none;
}

.auth-bg--stars {
  background:
    radial-gradient(circle at 76% 38%, rgba(212,176,94,0.16), transparent 28%),
    radial-gradient(circle at 82% 64%, rgba(212,176,94,0.08), transparent 22%);
}

.auth-bg--grid {
  background-image:
    linear-gradient(rgba(212,176,94,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,176,94,0.025) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.28;
}

.auth-bg--vignette {
  background:
    linear-gradient(90deg, #05070B 0%, rgba(5,7,11,0.92) 42%, rgba(5,7,11,0.55) 100%),
    radial-gradient(circle at 50% 50%, transparent 30%, #05070B 100%);
}

/* ── Shell grid ── */
.auth-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.75fr);
  gap: 22px;
  align-items: start;
}

/* ── Panel base ── */
.auth-copy-panel,
.auth-form-panel,
.auth-info-panel {
  border: 1px solid rgba(212,176,94,0.16);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  box-shadow: 0 24px 80px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(255,255,255,0.025);
}

.auth-copy-panel { padding: clamp(32px, 5vw, 56px); }
.auth-form-panel  { padding: 28px 30px; }
.auth-info-panel  { grid-column: 1 / -1; padding: 20px 28px; }

/* ── Copy panel ── */
.auth-copy-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.2rem, 4vw, 4.4rem);
  font-weight: 400; line-height: 0.92; letter-spacing: -0.035em;
  color: #F5F1E8; margin: 6px 0 14px;
}
.auth-copy-title em { color: #D4B05E; font-style: italic; }

.auth-copy-desc {
  font-size: 0.88rem; color: rgba(245,241,232,0.48);
  line-height: 1.65; max-width: 440px; margin: 0 0 24px;
}

.auth-feature-list {
  list-style: none; margin: 0 0 28px; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.auth-feature-list li { display: flex; align-items: flex-start; gap: 12px; }
.auth-feature-list .hi-icon { width: 18px; height: 18px; color: rgba(212,176,94,0.55); flex-shrink: 0; margin-top: 2px; }

.auth-feature-title {
  display: block; font-family: "DM Mono", monospace; font-size: 0.58rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,241,232,0.68);
  margin-bottom: 2px;
}
.auth-feature-desc { display: block; font-size: 0.78rem; color: rgba(245,241,232,0.38); line-height: 1.5; }

.auth-copy-links { display: flex; flex-direction: column; gap: 10px; }

.auth-copy-sub {
  font-family: "DM Mono", monospace; font-size: 0.54rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245,241,232,0.34); margin: 0;
}

.auth-text-link {
  font-size: 0.78rem; color: rgba(212,176,94,0.60);
  text-decoration: none;
  transition: color 160ms ease;
}
.auth-text-link:hover { color: #D4B05E; }

/* Tier note (signup) */
.auth-tier-note { margin: 0 0 24px; display: flex; flex-direction: column; gap: 8px; }
.auth-tier-row  { display: flex; align-items: center; gap: 10px; }

.auth-tier-badge {
  font-family: "DM Mono", monospace; font-size: 0.50rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor;
  flex-shrink: 0;
}
.auth-tier-badge--account    { color: rgba(245,241,232,0.44); }
.auth-tier-badge--deployment { color: #D4B05E; }

.auth-tier-desc { font-size: 0.78rem; color: rgba(245,241,232,0.38); }

/* ── Form panel ── */
.auth-form-header { margin-bottom: 18px; }

.auth-form-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 400; line-height: 1; letter-spacing: -0.025em;
  color: #F5F1E8; margin: 4px 0 0;
}

.auth-form-sub {
  font-size: 0.76rem; color: rgba(245,241,232,0.36); line-height: 1.55; margin: 6px 0 0;
}

/* Provider buttons */
.provider-grid { display: grid; gap: 8px; margin-bottom: 2px; }

.provider-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 16px;
  border-radius: 12px; border: 1px solid rgba(212,176,94,0.16);
  background: rgba(255,255,255,0.028);
  color: rgba(245,241,232,0.60);
  font-family: "DM Mono", monospace; font-size: 0.64rem; letter-spacing: 0.10em;
  text-transform: uppercase; cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.provider-btn:hover {
  border-color: rgba(212,176,94,0.32);
  background: rgba(212,176,94,0.04);
  color: rgba(245,241,232,0.80);
}

.provider-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* Divider */
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0;
  color: rgba(245,241,232,0.24);
  font-family: "DM Mono", monospace; font-size: 0.52rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
  content: ""; flex: 1; height: 1px;
  background: rgba(212,176,94,0.10);
}
.auth-divider--sm { margin: 10px 0; }

/* Fields */
.auth-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-bottom: 12px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.auth-field:last-child { margin-bottom: 0; }
.auth-field--full { grid-column: 1 / -1; }

.auth-field label {
  font-family: "DM Mono", monospace; font-size: 0.60rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(212,176,94,0.68);
  display: flex; justify-content: space-between; align-items: center;
}

.auth-req { color: rgba(212,176,94,0.55); }

.auth-field input,
.auth-field select {
  width: 100%; min-height: 48px; box-sizing: border-box;
  border: 1px solid rgba(212,176,94,0.16);
  border-radius: 10px;
  background: rgba(255,255,255,0.032);
  color: #F5F1E8;
  padding: 0 14px;
  font-family: "DM Mono", monospace; font-size: 0.76rem;
  transition: border-color 170ms ease, box-shadow 170ms ease;
  -webkit-appearance: none;
}

.auth-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgba(212,176,94,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
  padding-right: 32px;
}
.auth-field option { background: #0E111A; color: #F5F1E8; }

.auth-field input:focus,
.auth-field select:focus {
  outline: none;
  border-color: rgba(212,176,94,0.55);
  box-shadow: 0 0 0 3px rgba(212,176,94,0.08);
}

.auth-field--error { border-color: rgba(216,92,74,0.55) !important; box-shadow: 0 0 0 3px rgba(216,92,74,0.08) !important; }

.auth-field input::placeholder { color: rgba(245,241,232,0.22); }

.auth-field-error {
  font-family: "DM Mono", monospace; font-size: 0.52rem;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(216,92,74,0.72); min-height: 13px;
}

/* Password wrap */
.auth-pw-wrap { position: relative; display: flex; }
.auth-pw-wrap input { flex: 1; padding-right: 52px; }

.auth-pw-toggle {
  position: absolute; right: 0; top: 0; bottom: 0;
  padding: 0 12px;
  background: transparent; border: none;
  font-family: "DM Mono", monospace; font-size: 0.54rem;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(212,176,94,0.50); cursor: pointer;
  transition: color 160ms ease;
}
.auth-pw-toggle:hover { color: #D4B05E; }

/* Forgot link */
.auth-forgot-link {
  font-family: "DM Mono", monospace; font-size: 0.52rem;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(212,176,94,0.45); text-decoration: none;
  transition: color 160ms ease;
}
.auth-forgot-link:hover { color: #D4B05E; }

/* Remember me */
.auth-remember {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 0.78rem; color: rgba(245,241,232,0.42); margin-bottom: 14px;
}
.auth-remember input { position: absolute; opacity: 0; width: 0; height: 0; }

.auth-check-mark {
  width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
  border: 1px solid rgba(212,176,94,0.28); background: rgba(255,255,255,0.03);
  position: relative; transition: border-color 160ms ease, background 160ms ease;
}
.auth-remember:hover .auth-check-mark { border-color: rgba(212,176,94,0.50); }
.auth-remember input:checked + .auth-check-mark { background: #D4B05E; border-color: #D4B05E; }
.auth-remember input:checked + .auth-check-mark::after {
  content: ""; position: absolute; left: 3px; top: 1px;
  width: 8px; height: 5px;
  border-left: 2px solid #05070B; border-bottom: 2px solid #05070B;
  transform: rotate(-45deg);
}

/* Submit button */
.auth-submit-btn { width: 100%; justify-content: center; margin-top: 4px; }

/* Demo button */
.auth-demo-btn {
  width: 100%; min-height: 46px; padding: 0 16px;
  border-radius: 10px; border: 1px solid rgba(212,176,94,0.28);
  background: rgba(212,176,94,0.07); color: #D4B05E;
  font-family: "DM Mono", monospace; font-size: 0.60rem;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}
.auth-demo-btn:hover { background: rgba(212,176,94,0.13); border-color: rgba(212,176,94,0.50); }

/* Notice */
.auth-notice {
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid rgba(212,176,94,0.08); border-radius: 10px;
  font-size: 0.72rem; color: rgba(245,241,232,0.36); line-height: 1.6;
}
.auth-notice strong {
  display: block; font-family: "DM Mono", monospace; font-size: 0.52rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(212,176,94,0.55); margin-bottom: 3px;
}

.auth-form-footer {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(212,176,94,0.07);
  font-size: 0.76rem; color: rgba(245,241,232,0.34);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.auth-form-footer a { color: rgba(212,176,94,0.65); text-decoration: none; transition: color 160ms ease; }
.auth-form-footer a:hover { color: #D4B05E; }
.auth-sep { color: rgba(212,176,94,0.20); }

/* ── Account type cards ── */
.account-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }

.account-type-card {
  padding: 14px 10px; border-radius: 12px;
  border: 1px solid rgba(212,176,94,0.14);
  background: rgba(255,255,255,0.022);
  cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: border-color 180ms ease, background 180ms ease;
  outline: none;
}
.account-type-card:hover { border-color: rgba(212,176,94,0.32); background: rgba(212,176,94,0.04); }
.account-type-card.is-active {
  border-color: rgba(212,176,94,0.55);
  background: rgba(212,176,94,0.08);
}
.account-type-card:focus-visible { box-shadow: 0 0 0 2px rgba(212,176,94,0.55); }

.account-type-card .hi-icon { width: 18px; height: 18px; color: rgba(212,176,94,0.55); }
.account-type-card.is-active .hi-icon { color: #D4B05E; }

.account-type-name {
  font-family: "DM Mono", monospace; font-size: 0.58rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(245,241,232,0.62);
}
.account-type-card.is-active .account-type-name { color: rgba(245,241,232,0.88); }

.account-type-desc {
  font-size: 0.68rem; color: rgba(245,241,232,0.30); line-height: 1.3;
}

/* Conditional field groups */
.sg-conditional { display: flex; flex-direction: column; gap: 12px; }
.sg-conditional[hidden] { display: none !important; }

.auth-type-note {
  padding: 12px 14px; border-radius: 10px;
  background: rgba(212,176,94,0.04); border: 1px solid rgba(212,176,94,0.10);
  font-size: 0.78rem; color: rgba(245,241,232,0.38); line-height: 1.58; margin: 0;
}

/* Risk ack */
.auth-ack-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.auth-ack-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.auth-ack-label input { position: absolute; opacity: 0; width: 0; height: 0; }

.auth-ack-check {
  width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
  border: 1px solid rgba(212,176,94,0.28); background: rgba(255,255,255,0.03);
  margin-top: 2px; position: relative; transition: border-color 160ms ease, background 160ms ease;
}
.auth-ack-label:hover .auth-ack-check { border-color: rgba(212,176,94,0.50); }
.auth-ack-label input:checked + .auth-ack-check { background: #D4B05E; border-color: #D4B05E; }
.auth-ack-label input:checked + .auth-ack-check::after {
  content: ""; position: absolute; left: 3px; top: 1px;
  width: 8px; height: 5px;
  border-left: 2px solid #05070B; border-bottom: 2px solid #05070B;
  transform: rotate(-45deg);
}

.auth-ack-text { font-size: 0.76rem; color: rgba(245,241,232,0.42); line-height: 1.55; }

/* ── Info panel ── */
.auth-info-grid { display: flex; flex-wrap: wrap; gap: 20px 40px; }

.auth-info-item { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 200px; }
.auth-info-item .hi-icon { width: 18px; height: 18px; color: rgba(212,176,94,0.50); flex-shrink: 0; margin-top: 2px; }

.auth-info-item h3 {
  font-family: "DM Mono", monospace; font-size: 0.58rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245,241,232,0.60); margin: 0 0 3px;
}
.auth-info-item p {
  font-size: 0.78rem; color: rgba(245,241,232,0.36); line-height: 1.55; margin: 0;
}

/* ── Toast notification ── */
.auth-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 99999;
  max-width: 360px; padding: 14px 18px;
  border-radius: 12px; border: 1px solid rgba(212,176,94,0.20);
  background: rgba(14,17,26,0.96);
  font-family: "DM Mono", monospace; font-size: 0.64rem;
  letter-spacing: 0.10em; line-height: 1.5;
  color: rgba(245,241,232,0.70);
  box-shadow: 0 12px 40px rgba(0,0,0,0.50);
  opacity: 0; transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
}
.auth-toast--visible { opacity: 1; transform: none; }
.auth-toast--success { border-color: rgba(85,201,138,0.30); color: #55C98A; }
.auth-toast--warn    { border-color: rgba(240,168,74,0.30);  color: #F0A84A; }

/* ── Responsive ── */
@media (max-width: 980px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-field-grid { grid-template-columns: 1fr; }
  .account-type-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .auth-copy-panel,
  .auth-form-panel { padding: 24px 20px; }
  .auth-info-panel { padding: 16px 20px; }
  .account-type-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   AUTH ANTI-FLICKER FIX
   Appended: 2026-04-30
══════════════════════════════════════════════════════ */

/*
 * Before site.js runs, [data-auth] elements default to
 * display:none (see the existing rules above).
 * The inline body script sets is-logged-in/is-logged-out
 * synchronously so CSS shows the correct elements before
 * any JS loads. auth-ready is added after applyAuthVisibility()
 * runs, making everything final and stable.
 *
 * Scenario: if neither class is set yet (race condition on
 * very slow devices), keep elements hidden until auth-ready.
 */
body:not(.is-logged-in):not(.is-logged-out) [data-auth] {
  visibility: hidden !important;
}

body.auth-ready [data-auth] {
  visibility: visible;
}

/* ══════════════════════════════════════════════════════
   ACCOUNT PROFILE PAGE — v1
   Appended: 2026-04-30
══════════════════════════════════════════════════════ */

.account-profile-page { background: #05070B; overflow-x: hidden; }

.account-profile-page::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 55% 40% at 80% 8%, rgba(212,176,94,0.055), transparent),
    radial-gradient(ellipse 35% 50% at 8% 88%, rgba(91,143,212,0.04), transparent);
  pointer-events: none; z-index: 0;
}

.profile-wrap {
  max-width: 1480px; margin: 0 auto; padding: 0 44px;
  position: relative; z-index: 1;
}

/* ── Sections ── */
.profile-section {
  padding: 56px 0;
  border-top: 1px solid rgba(212,176,94,0.07);
  position: relative; z-index: 1;
}

.profile-section--dark {
  background: linear-gradient(180deg, rgba(5,7,11,0), rgba(212,176,94,0.016), rgba(5,7,11,0));
}

.profile-section-head { margin-bottom: 36px; max-width: 700px; }

.profile-section-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.2rem, 4vw, 4.2rem);
  font-weight: 400; line-height: 0.92; letter-spacing: -0.035em;
  color: #F5F1E8; margin: 6px 0 12px;
}
.profile-section-title em { color: #D4B05E; font-style: italic; }

.profile-section-desc {
  font-size: 0.88rem; color: rgba(245,241,232,0.44);
  line-height: 1.65; max-width: 580px; margin: 0;
}

/* ── Grids ── */
.profile-grid   { display: grid; gap: 18px; }
.profile-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.profile-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

/* ── Glass card base ── */
.profile-card,
.profile-panel,
.profile-form-panel,
.profile-security-card,
.profile-compliance-card {
  min-width: 0; padding: 24px; border-radius: 18px;
  border: 1px solid rgba(212,176,94,0.14);
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  box-shadow: 0 16px 48px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.018);
  transition: transform 220ms ease, border-color 220ms ease;
}

/* ── Hero ── */
.profile-hero {
  padding: 64px 0 56px;
  background:
    radial-gradient(circle at 78% 28%, rgba(212,176,94,0.10), transparent 32%),
    linear-gradient(180deg, rgba(5,7,11,0.98), #05070B);
  position: relative; z-index: 1;
}

.profile-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1fr);
  gap: clamp(36px, 5vw, 72px); align-items: start;
}

.profile-hero-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.6rem, 4.8vw, 5.2rem);
  font-weight: 400; line-height: 0.92; letter-spacing: -0.035em;
  color: #F5F1E8; margin: 6px 0 16px;
}
.profile-hero-title em { color: #D4B05E; font-style: italic; }

.profile-hero-desc {
  font-size: 0.90rem; color: rgba(245,241,232,0.50);
  line-height: 1.68; max-width: 500px; margin: 0 0 26px;
}

.profile-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Summary panel */
.profile-summary-panel {
  padding: 26px; border-radius: 20px;
  border: 1px solid rgba(212,176,94,0.18);
  background: rgba(5,7,11,0.72);
}

.profile-summary-label {
  font-family: "DM Mono", monospace; font-size: 0.54rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(212,176,94,0.55); margin: 0 0 16px;
}

.profile-summary-list { list-style: none; margin: 0 0 14px; padding: 0; }

.profile-summary-item {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 9px 0;
  border-bottom: 1px solid rgba(212,176,94,0.06);
}
.profile-summary-item:last-child { border-bottom: none; }

.profile-summary-key {
  font-family: "DM Mono", monospace; font-size: 0.52rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245,241,232,0.34); flex-shrink: 0;
}

.profile-summary-val {
  font-size: 0.80rem; color: rgba(245,241,232,0.72);
  text-align: right; word-break: break-word;
}

.profile-summary-badge {
  font-family: "DM Mono", monospace; font-size: 0.50rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  color: rgba(245,241,232,0.55); border: 1px solid rgba(245,241,232,0.18);
}

.profile-summary-badge--amber { color: #F0A84A; border-color: rgba(240,168,74,0.30); background: rgba(240,168,74,0.08); }
.profile-summary-badge--green { color: #55C98A; border-color: rgba(85,201,138,0.30); background: rgba(85,201,138,0.08); }

.profile-summary-notice {
  font-size: 0.70rem; color: rgba(245,241,232,0.25); line-height: 1.5;
  border-top: 1px solid rgba(212,176,94,0.08); padding-top: 12px; margin: 0;
}

/* ── Profile form ── */
.profile-form-panel { display: flex; flex-direction: column; gap: 28px; }

.profile-form-block { display: flex; flex-direction: column; gap: 14px; }

.profile-form-block-label {
  font-family: "DM Mono", monospace; font-size: 0.56rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(212,176,94,0.55); margin: 0;
  padding-bottom: 8px; border-bottom: 1px solid rgba(212,176,94,0.08);
}

.profile-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }

.profile-field { display: grid; gap: 6px; }
.profile-field--full { grid-column: 1 / -1; }

.profile-field label {
  font-family: "DM Mono", monospace; font-size: 0.60rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(212,176,94,0.68);
}

.pf-req { color: rgba(212,176,94,0.55); }

.profile-field input,
.profile-field select,
.profile-field textarea {
  width: 100%; min-height: 52px; box-sizing: border-box;
  border: 1px solid rgba(212,176,94,0.16);
  border-radius: 12px; background: rgba(255,255,255,0.035);
  color: #F5F1E8; padding: 0 16px;
  font-family: "DM Mono", monospace; font-size: 0.78rem;
  transition: border-color 170ms ease, box-shadow 170ms ease;
  -webkit-appearance: none;
}

.profile-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgba(212,176,94,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
  padding-right: 32px;
}
.profile-field option { background: #0E111A; color: #F5F1E8; }

.profile-field input:focus,
.profile-field select:focus,
.profile-field textarea:focus {
  outline: none;
  border-color: rgba(212,176,94,0.55);
  box-shadow: 0 0 0 3px rgba(212,176,94,0.08);
}

.profile-field input.is-error { border-color: rgba(216,92,74,0.55); }
.profile-field input::placeholder { color: rgba(245,241,232,0.22); }

.pf-error {
  font-family: "DM Mono", monospace; font-size: 0.52rem;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(216,92,74,0.75); min-height: 14px;
}

/* Account type cards */
.profile-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }

.profile-type-card {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 16px 12px; border-radius: 12px;
  border: 1px solid rgba(212,176,94,0.14);
  background: rgba(255,255,255,0.022); cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
  text-align: center;
}
.profile-type-card:hover { border-color: rgba(212,176,94,0.32); background: rgba(212,176,94,0.04); }
.profile-type-card:focus-visible { box-shadow: 0 0 0 2px rgba(212,176,94,0.55); outline: none; }
.profile-type-card.is-active {
  border-color: rgba(212,176,94,0.55); background: rgba(212,176,94,0.08);
}
.profile-type-card .hi-icon { width: 18px; height: 18px; color: rgba(212,176,94,0.50); }
.profile-type-card.is-active .hi-icon { color: #D4B05E; }

.profile-type-name {
  font-family: "DM Mono", monospace; font-size: 0.58rem;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(245,241,232,0.58); line-height: 1.3;
}
.profile-type-card.is-active .profile-type-name { color: rgba(245,241,232,0.88); }

/* Radio group */
.profile-contact-prefs { display: flex; flex-wrap: wrap; gap: 8px; }

.pf-radio {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: "DM Mono", monospace; font-size: 0.68rem;
  color: rgba(245,241,232,0.54); padding: 8px 14px;
  border: 1px solid rgba(212,176,94,0.12); border-radius: 8px;
  transition: border-color 160ms ease, background 160ms ease;
}
.pf-radio:hover { border-color: rgba(212,176,94,0.28); background: rgba(212,176,94,0.03); }
.pf-radio input { position: absolute; opacity: 0; width: 0; height: 0; }

.pf-radio-mark {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(212,176,94,0.30); position: relative;
}
.pf-radio input:checked + .pf-radio-mark {
  border-color: #D4B05E; background: #D4B05E;
  box-shadow: 0 0 6px rgba(212,176,94,0.40);
}
.pf-radio input:checked + .pf-radio-mark::after {
  content: ""; position: absolute; inset: 3px;
  background: #05070B; border-radius: 50%;
}

/* Conditional blocks */
.pf-conditional[hidden] { display: none !important; }

/* Form actions */
.profile-form-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }

/* Save feedback */
.pf-save-feedback[hidden] { display: none !important; }
.pf-save-feedback {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border-radius: 12px;
  border: 1px solid rgba(85,201,138,0.25); background: rgba(85,201,138,0.07);
  margin-top: 6px;
}
.pf-save-feedback .hi-icon { width: 20px; height: 20px; color: #55C98A; flex-shrink: 0; margin-top: 2px; }
.pf-save-feedback p { font-size: 0.82rem; color: rgba(245,241,232,0.55); line-height: 1.6; margin: 0; }

/* ── Icon colours ── */
.profile-icon--gold  { background: rgba(212,176,94,0.14); color: #D4B05E; }
.profile-icon--amber { background: rgba(240,168,74,0.14);  color: #F0A84A; }
.profile-icon--red   { background: rgba(216,92,74,0.14);   color: #D85C4A; }
.profile-icon--blue  { background: rgba(91,143,212,0.14);  color: #5B8FD4; }
.profile-icon--green { background: rgba(85,201,138,0.14);  color: #55C98A; }

/* ── Compliance cards ── */
.profile-compliance-card {
  display: flex; flex-direction: column; gap: 0;
  transition: transform 220ms ease, border-color 220ms ease;
}
.profile-compliance-card:hover { transform: translateY(-2px); border-color: rgba(212,176,94,0.28); }

.profile-compliance-icon {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.profile-compliance-icon .hi-icon { width: 18px; height: 18px; }

.profile-compliance-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.10rem; font-weight: 600; color: #F5F1E8; margin: 0 0 7px;
}
.profile-compliance-desc { font-size: 0.80rem; color: rgba(245,241,232,0.44); line-height: 1.60; flex: 1; margin: 0 0 14px; }

.profile-compliance-badge {
  font-family: "DM Mono", monospace; font-size: 0.50rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; border: 1px solid currentColor;
  align-self: flex-start; margin-top: auto;
}
.profile-compliance-badge--pending  { color: #F0A84A; background: rgba(240,168,74,0.10); }
.profile-compliance-badge--complete { color: #55C98A; background: rgba(85,201,138,0.10); }
.profile-compliance-badge--info     { color: #5B8FD4; background: rgba(91,143,212,0.10); }

.profile-compliance-link {
  font-family: "DM Mono", monospace; font-size: 0.58rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(212,176,94,0.60); text-decoration: none;
  margin-top: auto; transition: color 160ms ease;
}
.profile-compliance-link:hover { color: #D4B05E; }

/* ── Security cards ── */
.profile-security-card {
  display: flex; flex-direction: column; gap: 0;
  transition: transform 220ms ease, border-color 220ms ease;
}
.profile-security-card:hover { transform: translateY(-2px); border-color: rgba(212,176,94,0.28); }

.profile-security-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }

.profile-security-icon {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212,176,94,0.12); color: #D4B05E;
}
.profile-security-icon .hi-icon { width: 17px; height: 17px; }

.profile-security-label {
  font-family: "DM Mono", monospace; font-size: 0.50rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245,241,232,0.28); margin: 0 0 2px;
}
.profile-security-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.05rem; font-weight: 600; color: #F5F1E8; margin: 0;
}
.profile-security-desc { font-size: 0.80rem; color: rgba(245,241,232,0.42); line-height: 1.58; flex: 1; margin: 0 0 12px; }

.profile-security-badge {
  font-family: "DM Mono", monospace; font-size: 0.50rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid currentColor;
  align-self: flex-start; margin-bottom: 10px;
}
.profile-security-badge--ok      { color: #55C98A; background: rgba(85,201,138,0.10); }
.profile-security-badge--pending  { color: #F0A84A; background: rgba(240,168,74,0.10); }
.profile-security-badge--info     { color: #5B8FD4; background: rgba(91,143,212,0.10); }

.profile-security-btn {
  font-family: "DM Mono", monospace; font-size: 0.58rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 10px 16px; border-radius: 8px; margin-top: auto;
  border: 1px solid rgba(212,176,94,0.18);
  background: rgba(212,176,94,0.05);
  color: rgba(245,241,232,0.50); cursor: not-allowed;
  transition: background 180ms ease, border-color 180ms ease;
}
.profile-security-btn:not([disabled]) { cursor: pointer; color: rgba(245,241,232,0.70); }
.profile-security-btn:not([disabled]):hover { background: rgba(212,176,94,0.10); border-color: rgba(212,176,94,0.32); }

.profile-security-btn--danger {
  border-color: rgba(216,92,74,0.25); color: rgba(216,92,74,0.65);
  background: rgba(216,92,74,0.05); cursor: pointer;
}
.profile-security-btn--danger:hover { background: rgba(216,92,74,0.12); border-color: rgba(216,92,74,0.45); color: #D85C4A; }

/* ── Notification toggles ── */
.profile-notifications-panel {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 780px;
}

.profile-toggle {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 18px 20px; border-radius: 14px;
  border: 1px solid rgba(212,176,94,0.10);
  background: rgba(255,255,255,0.025);
  transition: border-color 180ms ease;
}
.profile-toggle:hover { border-color: rgba(212,176,94,0.20); }

.profile-toggle-info { display: flex; align-items: flex-start; gap: 14px; flex: 1; min-width: 0; }
.profile-toggle-info .hi-icon { width: 18px; height: 18px; color: rgba(212,176,94,0.50); flex-shrink: 0; margin-top: 2px; }

.profile-toggle-title {
  font-family: "DM Mono", monospace; font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(245,241,232,0.70); margin-bottom: 3px;
}
.profile-toggle-desc { font-size: 0.78rem; color: rgba(245,241,232,0.36); line-height: 1.50; }

/* Toggle switch */
.profile-toggle-switch { flex-shrink: 0; cursor: pointer; position: relative; }
.profile-toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.profile-toggle-track {
  display: block; width: 44px; height: 24px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(212,176,94,0.18);
  position: relative; transition: background 200ms ease, border-color 200ms ease;
}
.profile-toggle-track::after {
  content: ""; position: absolute; left: 3px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(245,241,232,0.40);
  transition: transform 200ms ease, background 200ms ease;
}
.profile-toggle-switch input:checked + .profile-toggle-track {
  background: rgba(212,176,94,0.22); border-color: rgba(212,176,94,0.45);
}
.profile-toggle-switch input:checked + .profile-toggle-track::after {
  transform: translateY(-50%) translateX(20px); background: #D4B05E;
}
.profile-toggle-switch input:focus-visible + .profile-toggle-track { outline: 2px solid rgba(212,176,94,0.55); }

/* ── Final CTA ── */
.profile-cta {
  padding: 52px 0;
  border-top: 1px solid rgba(212,176,94,0.10);
  background:
    radial-gradient(circle at 60% 50%, rgba(212,176,94,0.05), transparent 40%),
    linear-gradient(180deg, rgba(212,176,94,0.018), transparent);
  position: relative; z-index: 1;
}

.profile-cta-grid {
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(28px, 4vw, 64px); align-items: center;
}

.profile-cta-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.9rem, 3.0vw, 3.2rem);
  font-weight: 400; line-height: 0.95; letter-spacing: -0.025em;
  color: #F5F1E8; margin: 6px 0 10px;
}
.profile-cta-title em { color: #D4B05E; font-style: italic; }

.profile-cta-copy p { font-size: 0.86rem; color: rgba(245,241,232,0.42); line-height: 1.62; max-width: 480px; margin: 0; }
.profile-cta-actions { display: flex; flex-direction: column; gap: 10px; min-width: 188px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .profile-hero-grid  { grid-template-columns: 1fr; }
  .profile-grid-3     { grid-template-columns: 1fr 1fr; }
  .profile-cta-grid   { grid-template-columns: 1fr; }
  .profile-cta-actions { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .profile-wrap          { padding: 0 20px; }
  .profile-hero          { padding: 40px 0 34px; }
  .profile-section       { padding: 40px 0; }
  .profile-grid-2,
  .profile-grid-3,
  .profile-field-grid    { grid-template-columns: 1fr; }
  .profile-type-grid     { grid-template-columns: 1fr; }
  .profile-cta-actions   { flex-direction: column; }
  .profile-contact-prefs { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════
   ACCOUNT DASHBOARD PAGE — v2
   Appended: 2026-04-30
══════════════════════════════════════════════════════ */

.account-page { background: #05070B; overflow-x: hidden; }

.account-page::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 55% 40% at 80% 8%, rgba(212,176,94,0.055), transparent),
    radial-gradient(ellipse 35% 50% at 8% 88%, rgba(91,143,212,0.035), transparent);
  pointer-events: none; z-index: 0;
}

.account-wrap {
  max-width: 1480px; margin: 0 auto; padding: 0 44px;
  position: relative; z-index: 1;
}

/* ── Sections ── */
.account-section {
  padding: 56px 0;
  border-top: 1px solid rgba(212,176,94,0.07);
  position: relative; z-index: 1;
}

.account-section--dark {
  background: linear-gradient(180deg, rgba(5,7,11,0), rgba(212,176,94,0.016), rgba(5,7,11,0));
}

.account-section-head { margin-bottom: 36px; max-width: 700px; }

.account-section-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.2rem, 4vw, 4.2rem);
  font-weight: 400; line-height: 0.92; letter-spacing: -0.035em;
  color: #F5F1E8; margin: 6px 0 12px;
}
.account-section-title em { color: #D4B05E; font-style: italic; }

.account-section-desc {
  font-size: 0.88rem; color: rgba(245,241,232,0.44);
  line-height: 1.65; max-width: 560px; margin: 0;
}

/* ── Grids ── */
.account-grid   { display: grid; gap: 18px; }
.account-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.account-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

/* ── Glass card base ── */
.account-card,
.account-system-card,
.account-doc-card,
.account-basket-card,
.account-gov-card,
.account-activity-item {
  min-width: 0; padding: 22px; border-radius: 18px;
  border: 1px solid rgba(212,176,94,0.14);
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  box-shadow: 0 16px 48px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.018);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.account-card:hover,
.account-system-card:hover,
.account-doc-card:hover,
.account-basket-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212,176,94,0.30);
  background: linear-gradient(145deg, rgba(212,176,94,0.06), rgba(255,255,255,0.012));
}

/* ── Icon colours ── */
.account-metric-icon,
.account-doc-icon,
.account-gov-icon,
.account-activity-icon {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.account-metric-icon .hi-icon,
.account-doc-icon .hi-icon,
.account-gov-icon .hi-icon,
.account-activity-icon .hi-icon { width: 18px; height: 18px; }

.account-icon--gold  { background: rgba(212,176,94,0.14); color: #D4B05E; }
.account-icon--amber { background: rgba(240,168,74,0.14);  color: #F0A84A; }
.account-icon--red   { background: rgba(216,92,74,0.14);   color: #D85C4A; }
.account-icon--blue  { background: rgba(91,143,212,0.14);  color: #5B8FD4; }
.account-icon--green { background: rgba(85,201,138,0.14);  color: #55C98A; }

/* ── Hero ── */
.account-hero {
  padding: 64px 0 56px;
  background:
    radial-gradient(circle at 78% 28%, rgba(212,176,94,0.10), transparent 32%),
    linear-gradient(180deg, rgba(5,7,11,0.98), #05070B);
  position: relative; z-index: 1;
}

.account-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: clamp(32px, 4vw, 60px); align-items: start;
}

.account-hero-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.6rem, 4.8vw, 5.0rem);
  font-weight: 400; line-height: 0.92; letter-spacing: -0.035em;
  color: #F5F1E8; margin: 6px 0 20px;
}
.account-hero-title em { color: #D4B05E; font-style: italic; }

/* Identity block */
.account-hero-identity {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-radius: 14px;
  border: 1px solid rgba(212,176,94,0.14);
  background: rgba(255,255,255,0.025);
  margin-bottom: 24px;
}

.account-identity-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(212,176,94,0.28);
  background: rgba(212,176,94,0.10); color: #D4B05E;
  display: flex; align-items: center; justify-content: center;
  font-family: "Cormorant Garamond", serif; font-size: 1.2rem; font-weight: 600;
}
.account-identity-avatar .hi-icon { width: 28px; height: 28px; }

.account-identity-meta { flex: 1; min-width: 0; }
.account-identity-name { font-family: "Cormorant Garamond", serif; font-size: 1.10rem; font-weight: 600; color: #F5F1E8; margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-identity-type { font-family: "DM Mono", monospace; font-size: 0.54rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(212,176,94,0.55); margin: 0 0 1px; }
.account-identity-email { font-size: 0.76rem; color: rgba(245,241,232,0.36); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.account-identity-status { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.account-status-dot { width: 7px; height: 7px; border-radius: 50%; }
.account-status-dot--active { background: #55C98A; box-shadow: 0 0 8px #55C98A; animation: dotPulse 2s ease-in-out infinite; }
.account-status-dot--pending { background: #F0A84A; box-shadow: 0 0 8px #F0A84A; }
.account-status-label { font-family: "DM Mono", monospace; font-size: 0.52rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,241,232,0.44); }

.account-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Quick nav panel */
.account-nav-panel {
  padding: 22px; border-radius: 18px;
  border: 1px solid rgba(212,176,94,0.14);
  background: rgba(5,7,11,0.70);
}

.account-nav-panel-label {
  font-family: "DM Mono", monospace; font-size: 0.52rem;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: rgba(212,176,94,0.50); margin: 0 0 14px;
}

.account-quick-nav { display: flex; flex-direction: column; gap: 2px; }

.account-quick-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  font-family: "DM Mono", monospace; font-size: 0.62rem;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(245,241,232,0.52); text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
.account-quick-link:hover { background: rgba(212,176,94,0.07); color: rgba(245,241,232,0.80); }
.account-quick-link.account-quick-link--active {
  background: rgba(212,176,94,0.10); color: #D4B05E;
  border: 1px solid rgba(212,176,94,0.20);
}
.account-quick-link--danger { color: rgba(216,92,74,0.55); }
.account-quick-link--danger:hover { background: rgba(216,92,74,0.08); color: rgba(216,92,74,0.80); }
.account-quick-link .hi-icon { width: 15px; height: 15px; flex-shrink: 0; }

/* ── Metric cards ── */
.account-metric-card { display: flex; flex-direction: column; gap: 6px; }
.account-metric-label { font-family: "DM Mono", monospace; font-size: 0.54rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,241,232,0.42); margin: 10px 0 2px; }
.account-metric-value { font-family: "Cormorant Garamond", serif; font-size: 2.1rem; font-weight: 400; color: #D4B05E; line-height: 1; }
.account-metric-desc  { font-size: 0.78rem; color: rgba(245,241,232,0.38); line-height: 1.55; margin: 0; }

/* ── System cards ── */
.account-system-card { display: flex; flex-direction: column; gap: 10px; }
.account-system-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.account-system-name { font-family: "Cormorant Garamond", serif; font-size: 1.14rem; font-weight: 600; color: #F5F1E8; margin: 0; }
.account-system-desc { font-size: 0.82rem; color: rgba(245,241,232,0.46); line-height: 1.58; flex: 1; margin: 0; }
.account-system-meta { display: flex; gap: 12px; font-family: "DM Mono", monospace; font-size: 0.52rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,241,232,0.30); }
.account-system-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }

.account-system-badge, .account-gov-badge {
  font-family: "DM Mono", monospace; font-size: 0.50rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid currentColor;
  flex-shrink: 0; white-space: nowrap;
}
.account-system-badge--green, .account-gov-badge--complete { color: #55C98A; background: rgba(85,201,138,0.10); }
.account-system-badge--amber, .account-gov-badge--pending  { color: #F0A84A; background: rgba(240,168,74,0.10); }
.account-system-badge--red   { color: #D85C4A; background: rgba(216,92,74,0.10); }
.account-gov-badge--observer { color: rgba(245,241,232,0.45); background: rgba(255,255,255,0.05); }

/* ── Empty states ── */
.account-systems-empty,
.account-basket-empty { margin-top: 0; }

.account-empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 52px 28px; border-radius: 18px; text-align: center;
  border: 1px solid rgba(212,176,94,0.10);
  background: rgba(255,255,255,0.018);
}
.account-empty-state .hi-icon { width: 36px; height: 36px; color: rgba(212,176,94,0.30); }
.account-empty-title { font-family: "Cormorant Garamond", serif; font-size: 1.2rem; font-weight: 600; color: rgba(245,241,232,0.60); margin: 0; }
.account-empty-desc  { font-size: 0.82rem; color: rgba(245,241,232,0.36); line-height: 1.58; max-width: 400px; margin: 0; }

/* ── Document cards ── */
.account-doc-card { display: flex; flex-direction: column; gap: 8px; }
.account-doc-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.account-doc-type { font-family: "DM Mono", monospace; font-size: 0.50rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,241,232,0.32); }
.account-doc-badge { font-family: "DM Mono", monospace; font-size: 0.48rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid currentColor; }
.account-doc-badge--available { color: #55C98A; background: rgba(85,201,138,0.10); }
.account-doc-badge--restricted { color: #F0A84A; background: rgba(240,168,74,0.10); }
.account-doc-badge--pending    { color: rgba(245,241,232,0.40); background: rgba(255,255,255,0.04); }
.account-doc-title { font-family: "Cormorant Garamond", serif; font-size: 1.08rem; font-weight: 600; color: #F5F1E8; margin: 0; }
.account-doc-desc  { font-size: 0.80rem; color: rgba(245,241,232,0.42); line-height: 1.58; flex: 1; margin: 0; }

.account-doc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; border-radius: 8px; margin-top: auto;
  font-family: "DM Mono", monospace; font-size: 0.60rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(245,241,232,0.65); text-decoration: none;
  border: 1px solid rgba(212,176,94,0.20);
  background: rgba(212,176,94,0.05);
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.account-doc-btn:hover { background: rgba(212,176,94,0.10); border-color: rgba(212,176,94,0.35); color: rgba(245,241,232,0.85); }
.account-doc-btn--request { border-color: rgba(240,168,74,0.20); color: rgba(240,168,74,0.65); background: rgba(240,168,74,0.04); }
.account-doc-btn--request:hover { background: rgba(240,168,74,0.09); border-color: rgba(240,168,74,0.38); color: #F0A84A; }

.account-docs-footer { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* ── Basket ── */
.account-basket-card { display: flex; flex-direction: column; gap: 10px; }
.account-basket-item-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.account-basket-item-name { font-family: "Cormorant Garamond", serif; font-size: 1.10rem; font-weight: 600; color: #F5F1E8; margin: 0; }
.account-basket-item-desc  { font-size: 0.80rem; color: rgba(245,241,232,0.42); line-height: 1.58; flex: 1; margin: 0; }
.account-basket-item-meta  { display: flex; gap: 12px; font-family: "DM Mono", monospace; font-size: 0.52rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,241,232,0.28); }

.account-basket-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-top: 18px;
  padding: 20px 24px; border-radius: 14px;
  border: 1px solid rgba(212,176,94,0.14);
  background: rgba(212,176,94,0.04);
}
.account-basket-total { display: flex; align-items: baseline; gap: 12px; }
.account-basket-total-label { font-family: "DM Mono", monospace; font-size: 0.54rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,241,232,0.36); }
.account-basket-total-value { font-family: "Cormorant Garamond", serif; font-size: 2rem; font-weight: 400; color: #D4B05E; line-height: 1; }
.account-basket-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Governance cards ── */
.account-gov-card { display: flex; flex-direction: column; gap: 10px; }
.account-gov-header { display: flex; align-items: flex-start; gap: 12px; }
.account-gov-header > div { flex: 1; min-width: 0; }
.account-gov-kicker { font-family: "DM Mono", monospace; font-size: 0.50rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,241,232,0.28); margin: 0 0 2px; }
.account-gov-title { font-family: "Cormorant Garamond", serif; font-size: 1.08rem; font-weight: 600; color: #F5F1E8; margin: 0; }
.account-gov-desc  { font-size: 0.80rem; color: rgba(245,241,232,0.42); line-height: 1.58; margin: 0; flex: 1; }
.account-gov-link  { font-family: "DM Mono", monospace; font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(212,176,94,0.55); text-decoration: none; margin-top: auto; transition: color 160ms ease; }
.account-gov-link:hover { color: #D4B05E; }

/* ── Activity ── */
.account-activity-panel {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid rgba(212,176,94,0.10); border-radius: 18px;
  overflow: hidden;
}

.account-activity-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(212,176,94,0.07);
  border-radius: 0; box-shadow: none; border-left: none; border-right: none; border-top: none;
  background: rgba(255,255,255,0.018);
  transition: background 160ms ease;
}
.account-activity-item:last-child { border-bottom: none; }
.account-activity-item:hover { background: rgba(212,176,94,0.04); }

.account-activity-icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: rgba(212,176,94,0.10); color: rgba(212,176,94,0.60);
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.account-activity-icon .hi-icon { width: 16px; height: 16px; }

.account-activity-body { flex: 1; min-width: 0; }
.account-activity-label { font-family: "DM Mono", monospace; font-size: 0.60rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,241,232,0.65); margin: 0 0 3px; }
.account-activity-desc  { font-size: 0.78rem; color: rgba(245,241,232,0.36); line-height: 1.50; margin: 0; }
.account-activity-time  { font-family: "DM Mono", monospace; font-size: 0.50rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,241,232,0.26); flex-shrink: 0; margin-top: 3px; white-space: nowrap; }

/* ── Final CTA ── */
.account-cta {
  padding: 52px 0;
  border-top: 1px solid rgba(212,176,94,0.10);
  background:
    radial-gradient(circle at 60% 50%, rgba(212,176,94,0.055), transparent 40%),
    linear-gradient(180deg, rgba(212,176,94,0.022), transparent);
  position: relative; z-index: 1;
}

.account-cta-grid {
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(28px, 4vw, 64px); align-items: center;
}

.account-cta-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.9rem, 3.0vw, 3.2rem);
  font-weight: 400; line-height: 0.95; letter-spacing: -0.025em;
  color: #F5F1E8; margin: 6px 0 10px;
}
.account-cta-title em { color: #D4B05E; font-style: italic; }
.account-cta-copy p { font-size: 0.86rem; color: rgba(245,241,232,0.42); line-height: 1.62; max-width: 480px; margin: 0; }
.account-cta-actions { display: flex; flex-direction: column; gap: 10px; min-width: 188px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .account-hero-grid { grid-template-columns: 1fr; }
  .account-grid-3    { grid-template-columns: 1fr 1fr; }
  .account-cta-grid  { grid-template-columns: 1fr; }
  .account-cta-actions { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .account-wrap      { padding: 0 20px; }
  .account-hero      { padding: 40px 0 34px; }
  .account-section   { padding: 40px 0; }
  .account-grid-2,
  .account-grid-3    { grid-template-columns: 1fr; }
  .account-cta-actions { flex-direction: column; }
  .account-hero-identity { flex-wrap: wrap; }
}


/* ======================================================================
   PRODUCT PAGE - Premium Institutional System Dossier
   ====================================================================== */

.product-page { background:#05070B; overflow-x:hidden; position:relative; }
.product-wrap { max-width:1480px; margin:0 auto; padding:0 clamp(20px,3vw,44px); }

/* breadcrumb */
.product-crumb { display:flex; align-items:center; gap:10px; padding:18px 0 0; font-family:var(--font-mono); font-size:.60rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(245,241,232,.32); }
.product-crumb a { color:rgba(245,241,232,.40); text-decoration:none; transition:color 160ms; }
.product-crumb a:hover { color:#D4B05E; }
.product-crumb-sep { color:rgba(245,241,232,.20); }

/* hero */
.product-hero { padding:clamp(48px,6vw,80px) 0 clamp(40px,5vw,64px); position:relative; background:radial-gradient(circle at 78% 28%,rgba(212,176,94,.10),transparent 34%),radial-gradient(circle at 10% 60%,rgba(212,176,94,.04),transparent 28%),linear-gradient(180deg,rgba(5,7,11,.98),#05070B); }
.product-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,480px); gap:clamp(40px,6vw,80px); align-items:center; }
.product-hero-kicker { font-family:var(--font-mono); font-size:.60rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(212,176,94,.70); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.product-hero-kicker::before { content:''; width:22px; height:1px; background:rgba(212,176,94,.50); }
.product-hero-title { font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(3rem,6vw,6.4rem); font-weight:400; line-height:.88; letter-spacing:-.035em; color:#F5F1E8; margin:0 0 18px; }
.product-hero-title em { color:#D4B05E; font-style:italic; }
.product-hero-desc { font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.72; color:rgba(245,241,232,.55); max-width:540px; margin:0 0 28px; }
.product-hero-badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.product-badge { padding:5px 13px; border:1px solid rgba(212,176,94,.18); border-radius:999px; font-family:var(--font-mono); font-size:.60rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(245,241,232,.60); background:rgba(212,176,94,.03); }
.product-badge.stability { border-color:rgba(212,176,94,.32); color:rgba(212,176,94,.80); }
.product-badge.green { border-color:rgba(58,200,120,.32); color:rgba(58,200,120,.80); }
.product-badge.red { border-color:rgba(220,80,70,.32); color:rgba(220,80,70,.75); }
.product-hero-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* image canvas */
.product-image-canvas { position:relative; min-height:380px; border-radius:24px; border:1px solid rgba(212,176,94,.18); background:radial-gradient(circle at 50% 42%,rgba(212,176,94,.14),transparent 52%),linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); overflow:hidden; box-shadow:0 32px 100px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; }
.product-image-canvas::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(212,176,94,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(212,176,94,.024) 1px,transparent 1px); background-size:60px 60px; opacity:.38; pointer-events:none; }
.product-image-canvas::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,7,11,.40) 0%,transparent 22%,transparent 78%,rgba(5,7,11,.40) 100%); pointer-events:none; }
.product-image-canvas img { position:relative; z-index:1; width:100%; padding:32px; object-fit:contain; filter:drop-shadow(0 24px 52px rgba(0,0,0,.58)); }
.product-canvas-placeholder { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:40px; text-align:center; }
.product-canvas-orb { width:120px; height:120px; border-radius:50%; border:1px solid rgba(212,176,94,.22); box-shadow:0 0 60px rgba(212,176,94,.12),inset 0 0 40px rgba(212,176,94,.06); animation:prodOrbPulse 3.6s ease-in-out infinite; }
@keyframes prodOrbPulse { 0%,100%{box-shadow:0 0 60px rgba(212,176,94,.12),inset 0 0 40px rgba(212,176,94,.06);}50%{box-shadow:0 0 90px rgba(212,176,94,.20),inset 0 0 60px rgba(212,176,94,.10);} }
.product-canvas-label { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(212,176,94,.55); }

/* metrics */
.product-metrics-strip { padding:0 0 clamp(36px,4vw,52px); border-bottom:1px solid rgba(212,176,94,.08); }
.product-metrics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:24px; }
.product-metric-card { padding:20px 18px; border:1px solid rgba(212,176,94,.12); border-radius:16px; background:linear-gradient(145deg,rgba(255,255,255,.040),rgba(255,255,255,.012)); box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 8px 24px rgba(0,0,0,.22); position:relative; overflow:hidden; transition:border-color 220ms ease,transform 220ms ease; }
.product-metric-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(212,176,94,.30),transparent); }
.product-metric-card:hover { border-color:rgba(212,176,94,.26); transform:translateY(-2px); }
.product-metric-key { font-family:var(--font-mono); font-size:.55rem; letter-spacing:.20em; text-transform:uppercase; color:rgba(212,176,94,.55); margin-bottom:10px; }
.product-metric-value { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.55rem; font-weight:400; color:#F5F1E8; line-height:1; margin-bottom:6px; }
.product-metric-sub { font-size:.75rem; color:rgba(245,241,232,.32); }

/* overview */
.product-overview { padding:clamp(40px,5vw,64px) 0; }
.product-overview-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(40px,6vw,72px); align-items:start; }
.product-section-eye { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(212,176,94,.65); margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.product-section-eye::before { content:''; width:22px; height:1px; background:rgba(212,176,94,.45); }
.product-section-title { font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(2rem,3.2vw,3.4rem); font-weight:400; line-height:1.05; letter-spacing:-.025em; color:#F5F1E8; margin:0 0 18px; }
.product-section-title em { color:#D4B05E; font-style:italic; }
.product-body-text { font-size:.92rem; line-height:1.72; color:rgba(245,241,232,.52); margin:0 0 20px; }
.product-capability-grid { display:flex; flex-direction:column; gap:12px; }
.product-capability-card { padding:18px 20px; border:1px solid rgba(212,176,94,.10); border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.030),rgba(255,255,255,.010)); transition:border-color 200ms; }
.product-capability-card:hover { border-color:rgba(212,176,94,.24); }
.product-capability-card h4 { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.05rem; font-weight:600; color:rgba(245,241,232,.88); margin:0 0 6px; }
.product-capability-card p { font-size:.82rem; line-height:1.60; color:rgba(245,241,232,.44); margin:0; }

/* architecture */
.product-arch-section { padding:clamp(36px,4vw,56px) 0; border-top:1px solid rgba(212,176,94,.08); }
.product-arch-flow { display:flex; align-items:center; gap:0; margin-top:28px; overflow-x:auto; padding-bottom:8px; }
.product-arch-node { flex-shrink:0; padding:14px 20px; border:1px solid rgba(212,176,94,.18); border-radius:12px; background:rgba(255,255,255,.025); text-align:center; transition:border-color 200ms,background 200ms; cursor:default; }
.product-arch-node.is-self { border-color:rgba(212,176,94,.45); background:rgba(212,176,94,.07); }
.product-arch-node:hover:not(.is-self) { border-color:rgba(212,176,94,.28); }
.product-arch-node-num { font-family:var(--font-mono); font-size:.52rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(212,176,94,.50); margin-bottom:6px; }
.product-arch-node-label { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.10em; text-transform:uppercase; color:rgba(245,241,232,.78); }
.product-arch-node.is-self .product-arch-node-label { color:rgba(212,176,94,.92); }
.product-arch-arrow { flex-shrink:0; width:36px; height:1px; background:linear-gradient(90deg,rgba(212,176,94,.22),rgba(212,176,94,.50)); position:relative; }
.product-arch-arrow::after { content:''; position:absolute; right:-1px; top:50%; transform:translateY(-50%); border:4px solid transparent; border-left:6px solid rgba(212,176,94,.50); }

/* performance */
.product-perf-section { padding:clamp(36px,4vw,56px) 0; border-top:1px solid rgba(212,176,94,.08); }
.product-chart-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; margin-top:28px; }
.product-chart-card { border:1px solid rgba(212,176,94,.12); border-radius:18px; overflow:hidden; background:linear-gradient(145deg,rgba(8,12,20,.92),rgba(4,6,11,.96)); }
.product-chart-hdr { padding:14px 18px 10px; border-bottom:1px solid rgba(212,176,94,.07); display:flex; justify-content:space-between; align-items:center; }
.product-chart-lbl { font-family:var(--font-mono); font-size:.60rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(212,176,94,.55); }
.product-chart-card canvas { width:100%; display:block; }
.product-chart-disc { margin-top:16px; padding:14px 16px; border:1px solid rgba(180,60,50,.18); border-radius:10px; background:rgba(180,60,50,.06); font-size:.78rem; line-height:1.72; color:rgba(245,241,232,.36); }

/* governance */
.product-governance { padding:clamp(36px,4vw,56px) 0; border-top:1px solid rgba(212,176,94,.08); }
.product-governance-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:28px; }
.product-gov-card { padding:20px; border:1px solid rgba(212,176,94,.10); border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.028),rgba(255,255,255,.008)); display:flex; align-items:flex-start; gap:14px; transition:border-color 200ms; }
.product-gov-card:hover { border-color:rgba(212,176,94,.22); }
.product-gov-icon { width:32px; height:32px; flex-shrink:0; border-radius:8px; background:rgba(212,176,94,.08); border:1px solid rgba(212,176,94,.14); color:rgba(212,176,94,.75); display:flex; align-items:center; justify-content:center; }
.product-gov-icon svg { width:16px; height:16px; }
.product-gov-text { font-size:.85rem; line-height:1.65; color:rgba(245,241,232,.50); }

/* downloads */
.product-downloads { padding:clamp(36px,4vw,56px) 0; border-top:1px solid rgba(212,176,94,.08); }
.product-download-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:28px; }
.product-download-card { padding:22px; border:1px solid rgba(212,176,94,.12); border-radius:16px; background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.010)); display:flex; flex-direction:column; gap:10px; transition:border-color 220ms,transform 220ms; }
.product-download-card:hover { border-color:rgba(212,176,94,.28); transform:translateY(-2px); }
.product-download-icon { width:36px; height:36px; border-radius:10px; background:rgba(212,176,94,.08); border:1px solid rgba(212,176,94,.14); color:rgba(212,176,94,.75); display:flex; align-items:center; justify-content:center; }
.product-download-icon svg { width:18px; height:18px; }
.product-download-card h4 { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.05rem; font-weight:600; color:rgba(245,241,232,.88); margin:0; }
.product-download-card p { font-size:.80rem; line-height:1.60; color:rgba(245,241,232,.40); margin:0; flex:1; }
.product-download-card .btn { margin-top:auto; font-size:.62rem; padding:8px 14px; min-height:38px; }

/* buy */
.product-buy-section { padding:clamp(40px,5vw,64px) 0; border-top:1px solid rgba(212,176,94,.08); background:radial-gradient(circle at 80% 50%,rgba(212,176,94,.06),transparent 40%),linear-gradient(180deg,rgba(5,7,11,0),rgba(212,176,94,.016),rgba(5,7,11,0)); }
.product-buy-grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:clamp(40px,5vw,72px); align-items:start; }
.product-buy-copy h2 { font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(2rem,3vw,3.2rem); font-weight:400; line-height:1.05; letter-spacing:-.025em; color:#F5F1E8; margin:0 0 14px; }
.product-buy-copy h2 em { color:#D4B05E; font-style:italic; }
.product-buy-copy p { font-size:.90rem; line-height:1.70; color:rgba(245,241,232,.44); }
.product-buy-card { position:sticky; top:120px; padding:28px; border:1px solid rgba(212,176,94,.22); border-radius:20px; background:radial-gradient(circle at 90% 10%,rgba(212,176,94,.09),transparent 42%),linear-gradient(145deg,rgba(14,18,28,.92),rgba(6,8,14,.95)); box-shadow:0 32px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.05); position:relative; overflow:hidden; }
.product-buy-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(212,176,94,.55),transparent); }
.product-buy-kicker { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(212,176,94,.60); margin-bottom:10px; }
.product-buy-price { font-family:'Cormorant Garamond',Georgia,serif; font-size:3.2rem; font-weight:400; color:#D4B05E; line-height:1; margin-bottom:4px; }
.product-buy-period { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(245,241,232,.34); margin-bottom:22px; }
.product-buy-features { display:flex; flex-direction:column; gap:9px; margin-bottom:22px; }
.product-buy-feature { display:flex; align-items:center; gap:10px; font-size:.84rem; color:rgba(245,241,232,.58); }
.product-buy-actions { display:flex; flex-direction:column; gap:10px; }
.product-buy-actions .btn { justify-content:center; }
.product-buy-note { margin-top:14px; font-size:.73rem; line-height:1.65; color:rgba(245,241,232,.28); }
.product-buy-locked { padding:16px; border:1px solid rgba(180,60,50,.20); border-radius:10px; background:rgba(180,60,50,.06); font-size:.82rem; line-height:1.65; color:rgba(245,241,232,.45); margin-bottom:16px; }

/* related */
.product-related { padding:clamp(36px,4vw,56px) 0; border-top:1px solid rgba(212,176,94,.08); }
.product-related-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:28px; }
.product-related-card { padding:20px; border:1px solid rgba(212,176,94,.12); border-radius:16px; background:linear-gradient(145deg,rgba(255,255,255,.032),rgba(255,255,255,.010)); display:flex; flex-direction:column; gap:12px; transition:border-color 220ms,transform 220ms; text-decoration:none; }
.product-related-card:hover { border-color:rgba(212,176,94,.28); transform:translateY(-2px); }
.product-related-role { font-family:var(--font-mono); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(212,176,94,.55); }
.product-related-name { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.15rem; font-weight:500; color:rgba(245,241,232,.90); }
.product-related-price { font-family:var(--font-mono); font-size:.78rem; color:rgba(212,176,94,.70); margin-top:auto; }
.product-related-actions { display:flex; gap:8px; flex-wrap:wrap; }
.product-related-actions .btn { font-size:.60rem; padding:7px 12px; min-height:34px; }

/* toast */
.product-toast { position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(8px); padding:12px 22px; border-radius:10px; background:rgba(8,12,20,.96); border:1px solid rgba(212,176,94,.28); font-family:var(--font-mono); font-size:.70rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(245,241,232,.88); z-index:9999; pointer-events:none; opacity:0; transition:opacity 220ms,transform 220ms; }
.product-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

.product-reveal { opacity:0; transform:translateY(16px); transition:opacity 560ms ease,transform 560ms ease; }
.product-reveal.is-visible { opacity:1; transform:none; }

@media(max-width:1100px){
  .product-hero-grid,.product-buy-grid { grid-template-columns:1fr; }
  .product-metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .product-overview-grid,.product-chart-grid { grid-template-columns:1fr; }
  .product-governance-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .product-download-grid,.product-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .product-buy-card { top:auto; }
}
@media(max-width:680px){
  .product-governance-grid,.product-download-grid,.product-related-grid { grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════
   PERFORMANCE ANALYTICS SECTION  (performance.html #charts)
══════════════════════════════════════════════════════════ */

/* ── Section shell ── */
.perf-analytics-section {
  position: relative;
  padding: clamp(70px,8vw,120px) 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 28%, rgba(212,176,94,0.08), transparent 34%),
    radial-gradient(circle at 18% 72%, rgba(58,111,158,0.045), transparent 32%),
    linear-gradient(180deg, #05070B 0%, #06080F 48%, #05070B 100%);
}

/* ── 2-column header: copy left, image right ── */
.analytics-header-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.88fr);
  gap: clamp(40px,6vw,86px);
  align-items: center;
  margin-bottom: clamp(36px,5vw,60px);
}

.analytics-header-copy .section-label { margin-bottom: 14px; }

.analytics-header-copy h2 {
  margin: 0 0 22px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(3rem, 5vw, 6.2rem);
  line-height: 0.92;
  letter-spacing: -0.044em;
  font-weight: 400;
  color: #F5F1E8;
}
.analytics-header-copy h2 em { color: #D4B05E; font-style: italic; }

.analytics-intro {
  max-width: 560px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.72;
  color: rgba(245,241,232,0.58);
}

/* ── Image canvas placeholder ── */
.analytics-image-canvas {
  position: relative;
  min-height: clamp(330px, 34vw, 500px);
  border-radius: 28px;
  border: 1px solid rgba(212,176,94,0.16);
  background:
    radial-gradient(circle at 58% 52%, rgba(212,176,94,0.10), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  box-shadow:
    0 30px 100px rgba(0,0,0,0.44),
    inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
  isolation: isolate;
}

/* Ambient glow behind visual */
.analytics-image-canvas::before {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(212,176,94,0.12), transparent 68%);
  filter: blur(44px);
  opacity: 0.78;
  z-index: 0;
  pointer-events: none;
}

/* Edge fade overlay */
.analytics-image-canvas::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,7,11,0.38), transparent 24%, transparent 76%, rgba(5,7,11,0.34)),
    linear-gradient(180deg, rgba(5,7,11,0.24), transparent 28%, rgba(5,7,11,0.34)),
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(5,7,11,0.62));
  z-index: 2;
  pointer-events: none;
}

/* The constellation visual — transparent PNG floated center */
.performance-analytics-visual {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: min(112%, 860px);
  height: auto;
  transform: translate(-50%, -50%) translateY(34px) scale(0.96);
  opacity: 0;
  object-fit: contain;
  filter:
    drop-shadow(0 0 34px rgba(212,176,94,0.18))
    drop-shadow(0 34px 88px rgba(0,0,0,0.42));
  transition:
    opacity   900ms cubic-bezier(.22,1,.36,1),
    transform 1100ms cubic-bezier(.22,1,.36,1),
    filter    900ms ease;
}

.analytics-image-canvas.is-visible .performance-analytics-visual {
  opacity: 0.92;
  transform: translate(-50%, -50%) translateY(0) scale(1);
  animation: analyticsVisualFloat 10s ease-in-out infinite alternate;
}

@keyframes analyticsVisualFloat {
  from { transform: translate(-50%, -50%) translateY(0)    scale(1);     }
  to   { transform: translate(-50%, -50%) translateY(-12px) scale(1.015); }
}

/* Caption overlay */
.analytics-visual-caption {
  position: absolute;
  z-index: 3;
  left: 24px;
  bottom: 22px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(212,176,94,0.14);
  background: rgba(5,7,11,0.42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 46px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.04);
}

.analytics-visual-caption span {
  display: block;
  margin-bottom: 5px;
  font-family: 'DM Mono', monospace;
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(212,176,94,0.70);
}

.analytics-visual-caption strong {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  color: rgba(245,241,232,0.88);
}

/* Kept for fallback only — hidden when image present */
.analytics-image-placeholder { display: none; }
.image-placeholder-label      { display: none; }
.image-placeholder-note       { display: none; }

@media (prefers-reduced-motion: reduce) {
  .performance-analytics-visual,
  .analytics-image-canvas.is-visible .performance-analytics-visual {
    animation:  none !important;
    transition: none !important;
    opacity:    0.92 !important;
    transform:  translate(-50%,-50%) scale(1) !important;
  }
}

@keyframes analyticsParticleDrift {
  from { background-position: 0 0; }
  to   { background-position: 220px -180px; }
}

/* ── 2x2 chart grid ── */
.analytics-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

/* ── Individual chart card ── */
.analytics-chart-card {
  min-width: 0;
  border-radius: 22px;
  border: 1px solid rgba(212,176,94,0.13);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.044), rgba(255,255,255,0.010)),
    radial-gradient(circle at 82% 10%, rgba(212,176,94,0.05), transparent 34%);
  box-shadow: 0 24px 80px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.042);
  overflow: hidden;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.analytics-chart-card:hover {
  transform: translateY(-3px);
  border-color: rgba(212,176,94,0.30);
  box-shadow: 0 32px 100px rgba(0,0,0,0.46), 0 0 32px rgba(212,176,94,0.052);
}

/* ── Card header ── */
.analytics-chart-header {
  min-height: 78px;
  padding: 18px 22px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(212,176,94,0.09);
  background: rgba(255,255,255,0.014);
}

.analytics-chart-kicker {
  margin: 0 0 7px;
  font-family: 'DM Mono', monospace;
  font-size: 0.60rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(212,176,94,0.68);
}

.analytics-chart-header h3 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.25rem, 1.6vw, 1.75rem);
  font-weight: 400;
  line-height: 1.05;
  color: #F5F1E8;
}

.analytics-chart-period {
  flex-shrink: 0;
  font-family: 'DM Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.38);
  padding-top: 4px;
}

/* ── Canvas wrapper — this drives chart height ── */
.analytics-chart-canvas-wrap {
  position: relative;
  height: clamp(240px, 22vw, 320px);
  padding: 16px;
}

.analytics-chart-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ── Card footer ── */
.analytics-chart-footer {
  min-height: 52px;
  padding: 0 22px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.42);
}

.analytics-chart-footer strong {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #D4B05E;
}

.analytics-chart-footer strong.analytics-negative {
  color: rgba(248,113,113,0.85);
}

/* ── Bottom disclaimer ── */
.analytics-disclaimer {
  margin-top: clamp(22px,3vw,36px);
  font-family: 'DM Mono', monospace;
  font-size: 0.60rem;
  letter-spacing: 0.10em;
  color: rgba(245,241,232,0.28);
  text-align: center;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .analytics-header-grid { grid-template-columns: 1fr; }
  .analytics-image-canvas { min-height: 360px; }
  .performance-analytics-visual { width: min(118%, 720px); }

@media (max-width: 680px) {
  .analytics-image-canvas { min-height: 300px; border-radius: 22px; }
  .performance-analytics-visual { width: 125%; }
  .analytics-visual-caption { left: 16px; bottom: 16px; }
}
  .analytics-chart-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .perf-analytics-section { padding: 56px 0; }
  .analytics-chart-canvas-wrap { height: 240px; }
  .analytics-chart-header { flex-direction: column; gap: 6px; min-height: auto; }
  .analytics-chart-footer { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ══════════════════════════════════════════════════════════
   PERFORMANCE QUALITY INDICATORS  (performance.html #metrics)
   Inherits .performance-section (padding:42px 0, border-top).
   Inherits .perf-wrap (max-width:1480px, padding:0 44px).
══════════════════════════════════════════════════════════ */

/* ── Header row: copy left, summary panel right ── */
.quality-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 40px;
  align-items: end;
  margin-bottom: 24px;
}

/* h2 matches the page's section-head scale exactly */
.quality-header-copy h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 4vw, 4.4rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.028em;
  color: #F5F1E8;
  margin: 6px 0 10px;
}
.quality-header-copy h2 em { color: #D4B05E; font-style: italic; }

.quality-header-copy p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(245,241,232,0.50);
  max-width: 580px;
  margin: 0;
}

/* ── Compact summary panel — right side of header ── */
.quality-summary-panel {
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(212,176,94,0.14);
  background: linear-gradient(145deg, rgba(255,255,255,0.038), rgba(255,255,255,0.008));
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
}

.summary-kicker {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(212,176,94,0.64);
  margin-bottom: 8px;
}

.quality-summary-panel strong {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1;
  color: #F5F1E8;
  margin-bottom: 5px;
}

.quality-summary-panel > span {
  display: block;
  font-size: 0.78rem;
  color: rgba(245,241,232,0.42);
}

/* ── 3×2 metric card grid — same gap as .perf-grid ── */
.quality-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* ── Individual metric card — extends .performance-card geometry ── */
.quality-metric-card {
  position: relative;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(212,176,94,0.14);
  background: linear-gradient(145deg, rgba(255,255,255,0.040), rgba(255,255,255,0.012));
  box-shadow: 0 16px 48px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.018);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.quality-metric-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212,176,94,0.34);
  background: linear-gradient(145deg, rgba(212,176,94,0.06), rgba(255,255,255,0.018));
}

/* ── Icon badge ── */
.metric-icon {
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(212,176,94,0.16);
  background: rgba(212,176,94,0.07);
  color: rgba(212,176,94,0.82);
  flex-shrink: 0;
}

/* ── Text hierarchy ── */
.metric-kicker {
  margin: 0 0 4px;
  font-family: 'DM Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(212,176,94,0.62);
}

.metric-value {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  color: #D4B05E;
  margin-bottom: 10px;
}

.metric-text {
  font-size: 0.84rem;
  line-height: 1.58;
  color: rgba(245,241,232,0.50);
  flex: 1;
}

/* ── Status badge ── */
.metric-status {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(212,176,94,0.09);
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'DM Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.46);
}

.metric-status span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  flex-shrink: 0;
  animation: statusPulse 3s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.50; }
}

.metric-status.positive { color: rgba(110,231,183,0.80); }
.metric-status.gold     { color: rgba(212,176,94,0.82); }
.metric-status.blue     { color: rgba(96,165,250,0.82); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .quality-header        { grid-template-columns: 1fr; align-items: start; }
  .quality-summary-panel { max-width: 280px; }
  .quality-metrics-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .quality-metrics-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   CONTACT SECURITY NOTICE  (contact.html #security)
══════════════════════════════════════════════════════════ */

.contact-security-section {
  padding: clamp(36px, 4.5vw, 64px) 0;
  border-top: 1px solid rgba(212,176,94,0.07);
  position: relative; z-index: 1;
  display: flex;
  justify-content: center;
  background:
    radial-gradient(circle at 18% 30%, rgba(212,176,94,0.045), transparent 32%),
    linear-gradient(180deg, #05070B 0%, #06080F 100%);
}

.contact-security-section .contact-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* ── Card shell — centered, tighter ── */
.security-notice-card {
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: 22px;
  border: 1px solid rgba(212,176,94,0.22);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.044), rgba(255,255,255,0.010)),
    radial-gradient(circle at 8% 14%, rgba(212,176,94,0.09), transparent 28%);
  box-shadow:
    0 26px 86px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.048);
  transition:
    transform 240ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.security-notice-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212,176,94,0.32);
  box-shadow:
    0 32px 100px rgba(0,0,0,0.50),
    0 0 34px rgba(212,176,94,0.052);
}

/* ── Header row: icon + label/title ── */
.security-notice-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(212,176,94,0.13);
}

.security-icon {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(212,176,94,0.22);
  background: linear-gradient(145deg, rgba(212,176,94,0.16), rgba(212,176,94,0.04));
  color: #D4B05E;
  box-shadow: 0 0 24px rgba(212,176,94,0.10), inset 0 1px 0 rgba(255,255,255,0.06);
}

.security-notice-title {
  margin: 8px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.7rem, 2.35vw, 2.7rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.032em;
  color: #F5F1E8;
}

/* ── Two-column content grid ── */
.security-notice-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(340px, 1.12fr);
  gap: clamp(22px, 3.5vw, 44px);
  align-items: start;
}

/* Left: body copy + callout ── */
.security-copy {
  display: grid;
  gap: 12px;
}

.security-copy p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.58;
  color: rgba(245,241,232,0.56);
}

.security-final-note {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(212,176,94,0.13);
  background: rgba(212,176,94,0.042);
  color: rgba(245,241,232,0.64) !important;
  font-size: 0.86rem !important;
  line-height: 1.62 !important;
}

/* Right: list ── */
.security-list {
  margin: 0; padding: 0;
  display: grid; gap: 8px;
  list-style: none;
}

.security-list li {
  position: relative;
  padding: 11px 14px 11px 38px;
  border-radius: 13px;
  border: 1px solid rgba(212,176,94,0.10);
  background: linear-gradient(145deg, rgba(255,255,255,0.034), rgba(255,255,255,0.008));
  font-size: 0.88rem;
  color: rgba(245,241,232,0.60);
  line-height: 1.38;
  transition: border-color 200ms ease, background 200ms ease;
}

.security-list li::before {
  content: '';
  position: absolute;
  left: 16px; top: 50%;
  width: 6px; height: 6px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(212,176,94,0.75);
  box-shadow: 0 0 12px rgba(212,176,94,0.44);
}

.security-list li:hover {
  border-color: rgba(212,176,94,0.22);
  background: linear-gradient(145deg, rgba(212,176,94,0.06), rgba(255,255,255,0.010));
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .security-notice-grid { grid-template-columns: 1fr; }
  .security-notice-card { width: min(100%, 720px); }
}

@media (max-width: 620px) {
  .security-notice-head { align-items: flex-start; }
  .security-icon { width: 44px; height: 44px; border-radius: 12px; }
  .security-list li { padding-right: 14px; }
}

/* ══════════════════════════════════════════════════════════
   MARKET LEADERS WATCHLIST  (msiia-premium.html)
══════════════════════════════════════════════════════════ */

/* ── Section: compact watchlist band ── */
.market-leaders-section {
  position: relative;
  padding: 34px 0 42px;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      rgba(5,7,11,0.00) 0%,
      rgba(5,7,11,0.82) 16%,
      #05070B 48%,
      rgba(5,7,11,0.82) 84%,
      rgba(5,7,11,0.00) 100%
    ),
    radial-gradient(circle at 50% 24%, rgba(212,176,94,0.035), transparent 32%);
}

.market-leaders-section::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,7,11,0.88), transparent 18%, transparent 82%, rgba(5,7,11,0.92)),
    radial-gradient(circle, rgba(212,176,94,0.22) 0 1px, transparent 1.4px);
  background-size: auto, 86px 86px;
  opacity: 0.035;
  animation: marketLeaderDust 34s linear infinite;
}

@keyframes marketLeaderDust {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 0, 220px -180px; }
}

.market-leaders-section::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 56px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, #05070B);
}

/* ── Compact header ── */
.market-leaders-header {
  position: relative; z-index: 2;
  text-align: center;
  max-width: 620px;
  margin: 0 auto 20px;
}

.market-leaders-header .section-label { justify-content: center; font-size: 0.55rem; }

.market-leaders-header h2 {
  margin: 8px 0 8px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.75rem, 2.8vw, 3.1rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: #F5F1E8;
}

.market-leaders-header h2 em { color: #D4B05E; font-style: italic; }

.market-leaders-header > p {
  max-width: 520px;
  margin: 0 auto;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(245,241,232,0.48);
}

/* ── 10-column compact grid ── */
.market-leaders-strip {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
  max-width: 1380px;
  margin: 0 auto;
}

/* ── Small glass card ── */
.leader-card {
  position: relative;
  min-height: 72px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(212,176,94,0.16);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.018) 48%, rgba(212,176,94,0.035)),
    radial-gradient(circle at 20% 12%, rgba(212,176,94,0.14), transparent 32%);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 8px 28px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.07);
  display: grid;
  align-content: space-between;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(.22,1,.36,1), border-color 200ms ease, box-shadow 200ms ease;
}

.leader-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent, rgba(245,241,232,0.06), transparent);
  opacity: 0;
  transform: translateX(-85%);
  transition: opacity 220ms ease, transform 680ms ease;
  pointer-events: none;
}

.leader-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212,176,94,0.28);
  box-shadow: 0 14px 42px rgba(0,0,0,0.34), 0 0 18px rgba(212,176,94,0.045);
}

.leader-card:hover::before { opacity: 1; transform: translateX(85%); }

/* Per-stock tint variants */
.leader-card[data-stock="NVDA"],
.leader-card[data-stock="AMD"],
.leader-card[data-stock="AVGO"] {
  background: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.016)),
    radial-gradient(circle at 18% 18%, rgba(96,165,250,0.08), transparent 34%);
}
.leader-card[data-stock="AAPL"],
.leader-card[data-stock="MSFT"],
.leader-card[data-stock="GOOGL"] {
  background: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.016)),
    radial-gradient(circle at 18% 18%, rgba(212,176,94,0.10), transparent 34%);
}
.leader-card[data-stock="TSLA"],
.leader-card[data-stock="AMZN"],
.leader-card[data-stock="META"],
.leader-card[data-stock="COST"] {
  background: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.016)),
    radial-gradient(circle at 18% 18%, rgba(56,189,140,0.07), transparent 34%);
}

/* ── Card inner ── */
.leader-card-top {
  position: relative; z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.leader-icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(212,176,94,0.18);
  background: rgba(212,176,94,0.08);
  color: #D4B05E;
  box-shadow: 0 0 12px rgba(212,176,94,0.08);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.leader-icon svg { width: 12px; height: 12px; }

.leader-card:hover .leader-icon {
  transform: scale(1.03);
  box-shadow: 0 0 18px rgba(212,176,94,0.14);
}

.leader-sector {
  font-family: 'DM Mono', monospace;
  font-size: 0.46rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.34);
  text-align: right;
  line-height: 1.3;
}

.leader-card strong {
  position: relative; z-index: 2;
  display: block;
  margin-top: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: #D4B05E;
}

.leader-card > div > span {
  position: relative; z-index: 2;
  display: block;
  margin-top: 3px;
  font-size: 0.66rem;
  line-height: 1.25;
  color: rgba(245,241,232,0.46);
}

/* ── Responsive ── */
@media (max-width: 1180px) {
  .market-leaders-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .leader-card { min-height: 68px; }
}

@media (max-width: 720px) {
  .market-leaders-section { padding: 28px 0 34px; }
  .market-leaders-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-leaders-header h2 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
}

@media (max-width: 460px) {
  .market-leaders-strip { grid-template-columns: 1fr; }
}