/* ═══════════════════════════════════════════════════════
   $NAT — Editorial Luxe meets Crypto Precision
   Dark mode only. Bloomberg + Vogue + Swiss design.
   ═══════════════════════════════════════════════════════ */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,400;1,9..144,600;1,9..144,700;1,9..144,800&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ── Design Tokens ── */
:root {
  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Menlo', monospace;

  /* Type Scale */
  --text-xs:   clamp(0.6875rem, 0.65rem + 0.2vw, 0.8125rem);
  --text-sm:   clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl:   clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  --text-2xl:  clamp(1.75rem, 1.2rem + 2vw, 3rem);
  --text-3xl:  clamp(2.25rem, 1rem + 3.5vw, 4rem);
  --text-hero: clamp(2.75rem, 0.5rem + 6vw, 6.5rem);

  /* Spacing (4px base) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Color System — Dark Only */
  --color-bg:          oklch(14% 0.005 60);
  --color-surface:     oklch(18% 0.008 40);
  --color-surface-2:   oklch(20% 0.005 60);
  --color-surface-3:   oklch(23% 0.005 60);
  --color-border:      oklch(28% 0.005 60);
  --color-divider:     oklch(24% 0.005 60 / 0.6);

  /* Text */
  --color-text:        oklch(92% 0.01 80);
  --color-text-muted:  oklch(65% 0.01 60);
  --color-text-faint:  oklch(55% 0.01 80);

  /* Bitcoin Orange — sparingly */
  --color-btc:         #F7931A;
  --color-btc-dim:     oklch(65% 0.12 65);

  /* Accent — orange-red (PDF style) */
  --color-accent:      oklch(62% 0.22 30);
  --color-accent-hover:oklch(55% 0.22 30);
  --color-accent-dim:  oklch(62% 0.22 30 / 0.15);

  /* Data readout — warm orange */
  --color-data:        oklch(88% 0.05 30);
  --color-data-dim:    oklch(75% 0.04 30);

  /* Semantic */
  --color-up:          oklch(70% 0.15 150);
  --color-down:        oklch(65% 0.18 25);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;

  /* Shadows (warm dark) */
  --shadow-sm:  0 1px 3px oklch(0% 0 0 / 0.3);
  --shadow-md:  0 4px 16px oklch(0% 0 0 / 0.35);
  --shadow-lg:  0 12px 40px oklch(0% 0 0 / 0.45);
  --shadow-lift: 0 8px 24px oklch(0% 0 0 / 0.4);

  /* Transition */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 180ms var(--ease-out);
  --transition-mid:  350ms var(--ease-out);
  --transition-slow: 600ms var(--ease-out);

  /* Content widths */
  --content-narrow: 680px;
  --content-default: 960px;
  --content-wide: 1200px;
}

/* ── Global ── */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow-x: hidden;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover {
  color: var(--color-accent-hover);
}

/* ── Page Views ── */
.page-view {
  display: none;
}
.page-view.active {
  display: block;
}

/* ── Utility ── */
.container {
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-8));
}
.container--narrow {
  max-width: var(--content-narrow);
}
.container--default {
  max-width: var(--content-default);
}

/* ── Disclaimer Banner ── */
.disclaimer-banner {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  padding: var(--space-1) var(--space-4);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  line-height: 1.5;
  padding-block: 6px;
}

/* ═══════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: oklch(14% 0.005 60 / 0.85);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--color-divider);
  min-height: 56px;
  height: auto;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  height: auto;
  padding-top: 6px;
  padding-bottom: 6px;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-8));
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  cursor: pointer;
  margin-right: var(--space-10);
  flex-shrink: 0;
}
.nav__logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.nav__ticker {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.35rem;
  color: oklch(95% 0.01 80);
  letter-spacing: 0.01em;
}
.nav__ticker-dollar {
  color: oklch(78% 0.16 80);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
  row-gap: 2px;
}
.nav__link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 500;
  position: relative;
}
.nav__link:hover {
  color: var(--color-text);
}
.nav__link.active {
  color: var(--color-text);
  font-weight: 600;
}
.nav__link.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: var(--space-3);
  right: var(--space-3);
  height: 1.5px;
  background: var(--color-accent);
  border-radius: 1px;
}

.nav__social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: var(--space-4);
}
.nav__social a {
  color: var(--color-text-faint);
  display: flex;
  align-items: center;
}
.nav__social a:hover {
  color: var(--color-text);
}

.nav__hamburger {
  display: none;
  color: var(--color-text);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

/* ── Mobile Menu ── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-6);
  transform: translateX(100%);
  transition: transform var(--transition-mid);
}
.mobile-menu.active {
  transform: translateX(0);
}
.mobile-menu__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-12);
}
.mobile-menu__close {
  color: var(--color-text);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
}
.mobile-menu__link {
  font-size: var(--text-xl);
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-text-muted);
  padding: var(--space-3) 0;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px solid var(--color-divider);
}
.mobile-menu__link:hover,
.mobile-menu__link.active {
  color: var(--color-text);
}
.mobile-menu__social {
  margin-top: auto;
  display: flex;
  gap: var(--space-6);
  padding-top: var(--space-8);
}
.mobile-menu__social a {
  color: var(--color-text-faint);
}

/* ═══════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════ */
.hero {
  padding-top: clamp(var(--space-10), 5vw, var(--space-16));
  padding-bottom: clamp(var(--space-8), 4vw, var(--space-16));
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-btc);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  font-style: italic;
  color: var(--color-text);
  line-height: 1.1;
  margin-bottom: var(--space-6);
  max-width: 20ch;
  font-variation-settings: 'opsz' 72;
}
.hero__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 52ch;
  line-height: 1.7;
}
/* Hero two-column layout */
.hero__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
.hero__text {
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  .hero__content {
    grid-template-columns: 1fr;
  }
}

/* Faucet Banner Card */
.faucet-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: var(--space-8) var(--space-6);
  border-radius: 16px;
  background: oklch(17% 0.015 30);
  border: 1px solid oklch(30% 0.04 30);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s, border-color 0.3s;
  cursor: pointer;
}
.faucet-banner:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px oklch(62% 0.22 30 / 0.15);
  border-color: oklch(62% 0.22 30 / 0.5);
}
.faucet-banner__glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 50% 80%, oklch(62% 0.22 30 / 0.08), transparent 50%);
  pointer-events: none;
  animation: faucetGlow 4s ease-in-out infinite alternate;
}
@keyframes faucetGlow {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.1); }
}
.faucet-banner__icon {
  margin-bottom: var(--space-4);
  filter: drop-shadow(0 0 12px oklch(62% 0.22 30 / 0.4));
}
.faucet-banner__badge {
  display: inline-block;
  padding: 4px 12px;
  background: oklch(62% 0.22 30 / 0.15);
  color: oklch(75% 0.18 30);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}
.faucet-banner__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  font-style: italic;
  color: oklch(92% 0.02 60);
  margin-bottom: var(--space-2);
}
.faucet-banner__amount {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: #F7931A;
  margin-bottom: var(--space-2);
}
.faucet-banner__amount span {
  color: oklch(62% 0.22 30);
}
.faucet-banner__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}
.faucet-banner__cta {
  display: inline-block;
  padding: 10px 28px;
  background: linear-gradient(135deg, oklch(62% 0.22 30), #F7931A);
  color: white;
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.faucet-banner:hover .faucet-banner__cta {
  transform: scale(1.05);
  box-shadow: 0 4px 20px oklch(62% 0.22 30 / 0.4);
}

.hero__slogan {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(55% 0.08 30);
}

/* ═══════════════════════════════════════════════════════
   PRICE DISPLAY
   ═══════════════════════════════════════════════════════ */
.price-section {
  padding-block: clamp(var(--space-6), 3vw, var(--space-12));
}

/* Price Grid — two-column: data left, chart right */
.price-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr);
  gap: clamp(var(--space-6), 4vw, var(--space-16));
  align-items: center;
}
.price-grid__left {
  display: flex;
  flex-direction: column;
}
.price-grid__chart {
  min-width: 0;
}
.chart-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.chart-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.price__display {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.price__value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-data);
  letter-spacing: -0.02em;
}
.hero__price-change {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
}
.hero__price-change.up { color: var(--color-up); }
.hero__price-change.down { color: var(--color-down); }

.price__stats {
  display: flex;
  gap: clamp(var(--space-6), 4vw, var(--space-12));
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.price__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.price__stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
}
.price__stat-value {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-data);
}

.price__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}
.btn--primary {
  background: var(--color-accent);
  color: oklch(15% 0 0);
}
.btn--primary:hover {
  background: var(--color-accent-hover);
  color: oklch(15% 0 0);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn--ghost {
  border: 1px solid var(--color-border);
  color: var(--color-text);
  background: transparent;
}
.btn--ghost:hover {
  border-color: var(--color-text-muted);
  background: var(--color-surface);
  color: var(--color-text);
}

/* ═══════════════════════════════════════════════════════
   BLOCK CHAIN VISUALIZATION
   ═══════════════════════════════════════════════════════ */
.blocks-section {
  padding-block: clamp(var(--space-8), 4vw, var(--space-16));
  overflow: hidden;
}
.blocks__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-4);
}
.blocks__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  font-variation-settings: 'opsz' 36;
}
.blocks__live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-up);
  margin-right: var(--space-2);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.blocks__subtitle {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-text-faint);
}

/* BTC Cube */
.blocks__visual {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--space-2);
}
.btc-cube {
  width: 230px;
  height: 230px;
  flex-shrink: 0;
  perspective: 800px;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 16px oklch(70% 0.16 65 / 0.3));
}
.btc-cube__inner {
  width: 140px;
  height: 140px;
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  animation: cubeRoll 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes cubeRoll {
  0%   { transform: rotateX(-20deg) rotateY(0deg); }
  25%  { transform: rotateX(-20deg) rotateY(-90deg); }
  50%  { transform: rotateX(-20deg) rotateY(-180deg); }
  75%  { transform: rotateX(-20deg) rotateY(-270deg); }
  100% { transform: rotateX(-20deg) rotateY(-360deg); }
}
.btc-cube__face {
  position: absolute;
  inset: 0;
  background: var(--color-btc);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btc-cube__face--front { transform: translateZ(70px); }
.btc-cube__face--right {
  transform: rotateY(90deg) translateZ(70px);
  background: oklch(58% 0.16 65);
}
.btc-cube__face--top {
  transform: rotateX(90deg) translateZ(70px);
  background: oklch(72% 0.16 65);
}
.btc-cube__face--back {
  transform: rotateY(180deg) translateZ(70px);
  background: oklch(55% 0.14 65);
}
.btc-cube__face--left {
  transform: rotateY(-90deg) translateZ(70px);
  background: oklch(60% 0.15 65);
}
.btc-cube__face--bottom {
  transform: rotateX(-90deg) translateZ(70px);
  background: oklch(50% 0.14 65);
}
.btc-cube__face svg {
  width: 56px;
  height: 56px;
}

.blocks__connector {
  width: 60px;
  height: 2px;
  flex-shrink: 0;
  background: repeating-linear-gradient(
    to right,
    var(--color-text-faint) 0,
    var(--color-text-faint) 6px,
    transparent 6px,
    transparent 12px
  );
  opacity: 0.4;
}

/* Block Strip */
.blocks__strip {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-surface-3) transparent;
  padding-bottom: var(--space-2);
}
.blocks__strip::-webkit-scrollbar {
  height: 4px;
}
.blocks__strip::-webkit-scrollbar-track {
  background: transparent;
}
.blocks__strip::-webkit-scrollbar-thumb {
  background: var(--color-surface-3);
  border-radius: 2px;
}

.blocks__chain {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2);
}

/* Block Card — 3D Isometric */
.block-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 230px;
}
.block-card__height {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.block-card__cube {
  width: 100%;
  position: relative;
  perspective: 600px;
}
/* 3D wrapper for the isometric effect */
.block-card__3d {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.block-card:hover .block-card__3d {
  transform: translateY(-4px) rotateX(2deg) rotateY(-2deg);
}
/* Front face — the main content panel */
.block-card__body {
  background: oklch(24% 0.012 40);
  border: 1px solid oklch(32% 0.02 40);
  border-left: 3px solid oklch(62% 0.22 30);
  border-radius: 6px;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  aspect-ratio: 1;
  justify-content: center;
  position: relative;
  overflow: hidden;
  z-index: 2;
}
/* Top face — creates the 3D raised-lid illusion */
.block-card__face-top {
  position: absolute;
  top: -10px;
  left: 4px;
  right: -4px;
  height: 14px;
  background: oklch(30% 0.018 40);
  border-radius: 8px 8px 0 0;
  transform: skewX(-4deg);
  z-index: 3;
  border: 1px solid oklch(36% 0.02 40);
  border-bottom: none;
}
/* Right face — the 3D side depth */
.block-card__face-right {
  position: absolute;
  top: 4px;
  right: -8px;
  bottom: -4px;
  width: 12px;
  background: oklch(18% 0.015 40);
  border-radius: 0 8px 8px 0;
  transform: skewY(-4deg);
  z-index: 1;
  border: 1px solid oklch(26% 0.02 40);
  border-left: none;
}
/* Shine line across top */
.block-card__shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(100% 0 0 / 0.08), transparent);
  z-index: 4;
}

.block-card__btc,
.block-card__nat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.block-card__btc-icon,
.block-card__nat-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}
.block-card__btc-icon svg {
  width: 30px;
  height: 30px;
}
.block-card__btc-data,
.block-card__nat-data {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.block-card__btc-amount,
.block-card__nat-amount {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}
.block-card__btc-usd,
.block-card__nat-usd {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-text-faint);
}
.block-card__time {
  font-size: 0.875rem;
  color: var(--color-text-faint);
  text-align: center;
  font-family: var(--font-mono);
}
.block-card__pool {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}
.block-card__pool-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

/* Block skeletons */
.block-card--skeleton .block-card__body {
  background: oklch(22% 0.008 40);
}
.block-card--skeleton .block-card__face-top {
  background: oklch(26% 0.01 40);
}
.block-card--skeleton .block-card__face-right {
  background: oklch(16% 0.01 40);
}
.skeleton-line {
  height: 12px;
  border-radius: 4px;
  background: var(--color-surface-2);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-line:nth-child(2) { width: 70%; }
.skeleton-line:nth-child(3) { width: 50%; }
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.2; }
}

/* ═══════════════════════════════════════════════════════
   SECTION STYLES
   ═══════════════════════════════════════════════════════ */
.section {
  padding-block: clamp(var(--space-10), 6vw, var(--space-20));
}
.section--bordered {
  border-top: 1px solid var(--color-divider);
}
.section__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: oklch(62% 0.22 30);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.section__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  font-style: italic;
  color: var(--color-text);
  margin-bottom: var(--space-6);
  font-variation-settings: 'opsz' 36;
}
.section__body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.75;
}
.section__body p + p {
  margin-top: var(--space-4);
}

/* Orange underline bar for section titles (PDF style) */
.section__title::after,
.page-header__title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: oklch(62% 0.22 30);
  margin-top: 12px;
}

/* Mission */
.mission {
  padding-block: clamp(var(--space-12), 6vw, var(--space-24));
  border-top: 1px solid var(--color-divider);
}
.mission__text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.5;
  max-width: 42ch;
  font-variation-settings: 'opsz' 36;
}
.mission__text strong {
  color: var(--color-btc);
  font-weight: 600;
}

/* What is NAT */
.what-nat {
  padding-block: clamp(var(--space-10), 5vw, var(--space-20));
  border-top: 1px solid var(--color-divider);
}
.what-nat__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: start;
}
.what-nat__body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.75;
}
.what-nat__body p + p {
  margin-top: var(--space-4);
}
.what-nat__highlight {
  color: var(--color-accent);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   ENERGY TOKENIZATION THESIS
   ═══════════════════════════════════════════════════════ */
.energy {
  padding-block: clamp(var(--space-12), 6vw, var(--space-24));
  border-top: 1px solid var(--color-divider);
}
.energy__hero-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  font-style: italic;
  color: var(--color-text);
  margin-bottom: var(--space-6);
  font-variation-settings: 'opsz' 72;
}
.energy__lede {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 60ch;
  margin-bottom: clamp(var(--space-12), 5vw, var(--space-20));
}
.energy__lede em {
  color: var(--color-accent);
  font-style: normal;
  font-weight: 600;
}

/* Energy Tokenization Quotes */
.energy__quotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-bottom: clamp(var(--space-10), 4vw, var(--space-16));
}
.energy__quote-card {
  padding: var(--space-5) var(--space-6);
  background: oklch(17% 0.01 30);
  border-left: 3px solid oklch(62% 0.22 30);
  border-radius: 0 8px 8px 0;
}
.energy__quote-text {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-style: italic;
  font-weight: 500;
  line-height: 1.7;
  color: oklch(85% 0.02 60);
  margin-bottom: var(--space-3);
}
.energy__quote-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.energy__quote-meta strong {
  color: oklch(90% 0.01 60);
}
.energy__quote-source {
  color: var(--color-accent);
  text-decoration: none;
  font-size: 0.78rem;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.energy__quote-source:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 768px) {
  .energy__quotes {
    grid-template-columns: 1fr;
  }
}

/* Economic Structure Bar */
.energy__structure {
  margin-bottom: clamp(var(--space-10), 4vw, var(--space-16));
}
.energy__structure-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
  font-variation-settings: 'opsz' 36;
}
.energy__structure-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  margin-bottom: var(--space-6);
}
.energy__bar {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  min-height: 120px;
  border: 1px solid oklch(25% 0.01 60);
}
.energy__bar-segment {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-5) var(--space-6);
  position: relative;
}
.energy__bar-segment--nat {
  flex: 3;
  background: linear-gradient(135deg, oklch(18% 0.02 30) 0%, oklch(20% 0.04 30) 100%);
  border-right: 1px solid oklch(25% 0.01 60);
}
.energy__bar-segment--btc {
  flex: 2;
  background: linear-gradient(135deg, oklch(18% 0.02 65) 0%, oklch(20% 0.04 65) 100%);
}
.energy__bar-label {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-1);
}
.energy__bar-segment--nat .energy__bar-label {
  color: var(--color-accent);
}
.energy__bar-segment--btc .energy__bar-label {
  color: var(--color-btc);
}
.energy__bar-role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: oklch(70% 0.01 80);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}
.energy__bar-desc {
  font-size: var(--text-sm);
  color: oklch(55% 0.01 80);
}
.energy__bar-footer {
  text-align: center;
  padding-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.06em;
}

/* Social Community Bar */
.social-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  margin-bottom: var(--space-2);
}
.social-bar__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.social-bar__icons {
  display: flex;
  gap: 12px;
}
.social-bar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: oklch(20% 0.008 40);
  border: 1px solid oklch(28% 0.01 40);
  color: oklch(70% 0.01 60);
  transition: all 0.25s ease;
}
.social-bar__link:hover {
  transform: translateY(-2px);
  border-color: oklch(40% 0.01 40);
}
.social-bar__link--x:hover {
  color: #fff;
  background: oklch(22% 0.01 40);
}
.social-bar__link--tg:hover {
  color: #26A5E4;
  background: oklch(22% 0.02 220);
  border-color: rgba(38, 165, 228, 0.3);
}
.social-bar__link--dc:hover {
  color: #5865F2;
  background: oklch(22% 0.03 270);
  border-color: rgba(88, 101, 242, 0.3);
}
.social-bar__link--qq:hover {
  color: #12B7F5;
  background: oklch(22% 0.02 220);
  border-color: rgba(18, 183, 245, 0.3);
}
.social-bar__link--yt:hover {
  color: #FF0000;
  background: oklch(22% 0.03 25);
  border-color: rgba(255, 0, 0, 0.3);
}
.social-bar__link--web:hover {
  color: oklch(62% 0.22 30);
  background: oklch(22% 0.02 30);
  border-color: rgba(200, 80, 30, 0.3);
}
.social-bar__link svg {
  width: 22px;
  height: 22px;
}

/* Supply Comparison Chart */
.energy__supply-chart {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  background: oklch(16% 0.005 40);
  border: 1px solid oklch(22% 0.01 40);
  border-radius: 8px;
}
.energy__supply-chart-header {
  margin-bottom: var(--space-4);
}
.energy__supply-chart-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.energy__supply-chart-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.energy__supply-chart-legend {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-4);
  justify-content: center;
}
.energy__supply-legend-item {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
}

.energy__supply-chart-note {
  text-align: center;
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-text-faint);
  margin-top: var(--space-3);
}

/* Explanatory Cards */
.energy__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: clamp(var(--space-10), 4vw, var(--space-16));
}
.energy__card {
  background: oklch(18% 0.008 40);
  border: 1px solid var(--color-border);
  border-left: 3px solid oklch(62% 0.22 30);
  border-radius: 6px;
  padding: var(--space-6) var(--space-6);
}
.energy__card-icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-3);
}
.energy__card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  font-variation-settings: 'opsz' 36;
}
.energy__card-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}
.energy__card-body em {
  color: var(--color-accent);
  font-style: normal;
  font-weight: 600;
}

/* Mining Margin Chart */
.energy__margin {
  margin-bottom: clamp(var(--space-10), 4vw, var(--space-16));
}
.energy__margin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.energy__margin-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  font-variation-settings: 'opsz' 36;
}
.energy__margin-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  margin-top: var(--space-1);
}
.energy__margin-legend {
  display: flex;
  gap: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.energy__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.energy__legend-item i {
  display: inline-block;
  width: 12px;
  height: 3px;
  border-radius: 2px;
}
.energy__legend-item--margin i {
  background: var(--color-accent);
}
.energy__legend-item--treasury i {
  background: oklch(65% 0.18 25);
}
.energy__chart-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4) var(--space-4);
  margin-bottom: var(--space-4);
}
.energy__chart-wrap canvas {
  width: 100%;
  height: auto;
}
.energy__margin-note {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  line-height: 1.7;
  max-width: 72ch;
}

/* Economic Implications */
.energy__implication {
  padding-top: clamp(var(--space-6), 3vw, var(--space-10));
}
.energy__implication-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-6);
  font-variation-settings: 'opsz' 36;
}
.energy__implication-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.energy__impl-card {
  padding: var(--space-6);
  border-left: 2px solid var(--color-accent);
}
.energy__impl-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
}
.energy__impl-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}
.energy__impl-text strong {
  color: var(--color-text);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   FEATURES
   ═══════════════════════════════════════════════════════ */
.features {
  padding-block: clamp(var(--space-10), 5vw, var(--space-20));
  border-top: 1px solid var(--color-divider);
}
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.feature-card {
  background: oklch(18% 0.008 40);
  border-radius: 6px;
  border-left: 3px solid oklch(62% 0.22 30);
  padding: clamp(var(--space-5), 2vw, var(--space-8));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(100% 0 0 / 0.05), transparent);
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* All cards equal width */
.feature-card__icon {
  color: var(--color-accent);
  width: 24px;
  height: 24px;
}
.feature-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  font-variation-settings: 'opsz' 24;
}
.feature-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════ */
.faq {
  padding-block: clamp(var(--space-10), 5vw, var(--space-20));
  border-top: 1px solid var(--color-divider);
}
.faq__list {
  max-width: var(--content-default);
}
.faq-item {
  border-bottom: 1px solid var(--color-divider);
}
.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) 0;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  gap: var(--space-4);
}
.faq-item__trigger:hover {
  color: var(--color-accent);
}
.faq-item__icon {
  width: 20px;
  height: 20px;
  color: var(--color-text-faint);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}
.faq-item.open .faq-item__icon {
  transform: rotate(45deg);
}
.faq-item__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-mid);
}
.faq-item.open .faq-item__content {
  grid-template-rows: 1fr;
}
.faq-item__inner {
  overflow: hidden;
}
.faq-item__answer {
  padding-bottom: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
}
.faq-item__answer a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════
   RESOURCES
   ═══════════════════════════════════════════════════════ */
.resources {
  padding-block: clamp(var(--space-10), 5vw, var(--space-20));
  border-top: 1px solid var(--color-divider);
}
.resources__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}
.resource-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.resource-link:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
  transform: translateY(-1px);
}
.resource-link i {
  color: var(--color-text-faint);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */
.footer {
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-10);
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer__text {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.footer__social {
  display: flex;
  gap: var(--space-4);
}
.footer__social a {
  color: var(--color-text-faint);
  display: flex;
}
.footer__social a:hover {
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════
   SUB-PAGES
   ═══════════════════════════════════════════════════════ */

/* Page Header */
.page-header {
  padding-top: clamp(var(--space-10), 5vw, var(--space-16));
  padding-bottom: clamp(var(--space-6), 3vw, var(--space-10));
  border-bottom: 1px solid var(--color-divider);
}
.page-header__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  font-style: italic;
  color: var(--color-text);
  font-variation-settings: 'opsz' 48;
}
.page-header__desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  max-width: 52ch;
}

/* Exchange List */
.exchange-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.exchange-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border-left: 3px solid oklch(30% 0.01 40);
  border-radius: 6px;
  transition: all 0.25s ease;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.exchange-item:hover { background: var(--color-surface-2); }
.exchange-item--binance { border-left-color: #F0B90B; }
.exchange-item--okx { border-left-color: #ffffff; }
.exchange-item--bitget { border-left-color: #00D4AA; }
.exchange-item--gate { border-left-color: #2354E6; }
.exchange-item__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.exchange-item__logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.exchange-item__logo svg { width: 24px; height: 24px; }
.exchange-item__logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.exchange-item__logo--binance { background: #1E2026; border-radius: 10px; overflow: hidden; }
.exchange-item__logo--binance img { mix-blend-mode: screen; }
.exchange-item__logo--okx { background: transparent; border-radius: 10px; overflow: hidden; }
.exchange-item__logo--bitget { background: transparent; border-radius: 10px; overflow: hidden; }
.exchange-item__logo--gate { background: transparent; border-radius: 10px; overflow: hidden; }
.exchange-item__name {
  font-weight: 600;
  font-size: var(--text-base);
}
.exchange-item__pair {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
/* Brand-colored exchange buttons */
.btn--exchange {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn--exchange:hover { transform: translateY(-1px); filter: brightness(1.1); }
.btn--binance { background: #F0B90B; color: #181A20; }
.btn--okx { background: #ffffff; color: #181A20; }
.btn--bitget { background: #00D4AA; color: #0D1421; }
.btn--gate { background: #2354E6; color: #ffffff; }

/* Chain Tabs */
.chain-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-divider);
  margin-top: var(--space-6);
  overflow-x: auto;
}
.chain-tab {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
}
.chain-tab:hover {
  color: var(--color-text);
}
.chain-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.chain-content {
  display: none;
  padding-top: var(--space-6);
}
.chain-content.active {
  display: block;
}
.chain-content__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.chain-content__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}
.chain-content__text a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Dashboard */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
  margin-bottom: var(--space-10);
}
.dash-stat {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.dash-stat__label {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dash-stat__value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-data);
}

/* Table */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  margin-top: var(--space-6);
}
.data-table {
  width: 100%;
  font-size: var(--text-sm);
}
.data-table thead {
  background: var(--color-surface-2);
}
.data-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.data-table td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-divider);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.data-table tr:hover td {
  background: var(--color-surface-2);
}
.data-table .pool-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-text);
}
.pool-icon-sm {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 600;
  font-family: var(--font-mono);
}
.badge--yes {
  background: oklch(70% 0.15 150 / 0.15);
  color: var(--color-up);
}
.badge--no {
  background: oklch(65% 0.05 80 / 0.1);
  color: var(--color-text-faint);
}

/* ═══════════════════════════════════════════════════════
   PROJECTION CHART
   ═══════════════════════════════════════════════════════ */
.projection {
  margin-top: var(--space-10);
}
.projection__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.projection__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  max-width: 52ch;
}
.projection__legend {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}
.projection__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}
.legend-swatch--nat {
  background: var(--color-accent);
}
.legend-swatch--btc {
  background: var(--color-btc);
}

.projection__chart {
  display: flex;
  gap: 3px;
  height: 280px;
  align-items: flex-end;
}
.proj-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  position: relative;
  cursor: pointer;
}
.proj-bar__pct {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-text-faint);
  flex-shrink: 0;
  height: 16px;
}
.proj-bar__stack {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}
.proj-bar__nat {
  background: var(--color-accent);
  transition: height 1.2s var(--ease-out);
}
.proj-bar__btc {
  background: var(--color-btc);
  transition: height 1.2s var(--ease-out);
}
.proj-bar__year {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-text-faint);
  flex-shrink: 0;
}
.proj-bar--halving .proj-bar__year {
  color: var(--color-btc);
  font-weight: 600;
}
.proj-bar--crossover .proj-bar__stack {
  box-shadow: 0 0 0 1px var(--color-accent);
}

/* Tooltip */
.proj-bar__tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  color: var(--color-text);
  white-space: nowrap;
  line-height: 1.6;
  z-index: 10;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}
.proj-bar:hover .proj-bar__tooltip {
  display: block;
}
.proj-bar__tooltip-btc { color: var(--color-btc); }
.proj-bar__tooltip-nat { color: var(--color-accent); }

/* Crossover callout */
.projection__crossover {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--color-accent-dim);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-accent);
}
.projection__crossover-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.projection__crossover-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════
   EDITORIAL CONTENT (Security, Economics, Tech pages)
   ═══════════════════════════════════════════════════════ */
.editorial {
  padding-block: clamp(var(--space-8), 4vw, var(--space-16));
}
.editorial h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  font-variation-settings: 'opsz' 36;
}
.editorial h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}
.editorial p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-4);
}
.editorial strong {
  color: var(--color-text);
  font-weight: 600;
}
.editorial ul, .editorial ol {
  margin-left: var(--space-6);
  margin-bottom: var(--space-4);
}
.editorial li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-bottom: var(--space-2);
}
.editorial li::marker {
  color: var(--color-text-faint);
}

/* Metric callout */
.metric-callout {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  margin-block: var(--space-6);
  flex-wrap: wrap;
}
.metric-callout__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.metric-callout__value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-data);
}
.metric-callout__label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-family: var(--font-mono);
}

/* Halving timeline */
.halving-timeline {
  display: flex;
  gap: var(--space-3);
  margin-block: var(--space-6);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}
.halving-item {
  flex: 0 0 auto;
  min-width: 140px;
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  text-align: center;
}
.halving-item__year {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-btc);
  font-weight: 600;
  margin-bottom: var(--space-1);
}
.halving-item__value {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-data);
}
.halving-item__label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-1);
}

/* ═══════════════════════════════════════════════════════
   MARKET CAP SCENARIOS
   ═══════════════════════════════════════════════════════ */
.scenarios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-6);
}
.scenario-card {
  padding: var(--space-6);
  background: oklch(18% 0.008 40);
  border-radius: 6px;
  border-left: 3px solid var(--color-border);
}
.scenario-card--low { border-left-color: var(--color-text-faint); }
.scenario-card--mid { border-left-color: var(--color-accent); }
.scenario-card--high { border-left-color: var(--color-btc); }
.scenario-card__range {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-data);
  margin-bottom: var(--space-2);
}
.scenario-card__label {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}
.scenario-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}


/* ═══════════════════════════════════════════════════════
   VIDEO SHOWCASE
   ═══════════════════════════════════════════════════════ */
.video-showcase {
  padding-block: clamp(var(--space-6), 3vw, var(--space-12));
}
.video-showcase__player {
  width: 100%;
  border-radius: 12px;
  object-fit: contain;
  display: block;
}

/* Mission background image */
.mission__bg {
  position: absolute;
  inset: 0;
  background: url('nat-council.jpg') center/cover;
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
}
.mission > *:not(.mission__bg) {
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════
   SCROLL ANIMATIONS
   ═══════════════════════════════════════════════════════ */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in:nth-child(2) { transition-delay: 0.08s; }
.fade-in:nth-child(3) { transition-delay: 0.16s; }
.fade-in:nth-child(4) { transition-delay: 0.24s; }
.fade-in:nth-child(5) { transition-delay: 0.32s; }
.fade-in:nth-child(6) { transition-delay: 0.4s; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .nav__links {
    display: none;
  }
  .nav__social {
    display: none;
  }
  .nav__hamburger {
    display: flex;
  }
  .features__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .what-nat__grid {
    grid-template-columns: 1fr;
  }
  .energy__grid {
    grid-template-columns: 1fr;
  }
  .energy__bar {
    flex-direction: column;
  }
  .energy__bar-segment--nat {
    border-right: none;
    border-bottom: 2px solid oklch(14% 0.005 60);
  }
  .energy__implication-grid {
    grid-template-columns: 1fr;
  }
  .features__grid {
    grid-template-columns: 1fr;
  }

  .price-grid {
    grid-template-columns: 1fr;
  }
  .chart-container {
    aspect-ratio: 16 / 9;
  }
  .price__display {
    flex-direction: column;
    gap: var(--space-2);
  }
  .price__stats {
    flex-direction: column;
    gap: var(--space-4);
  }
  .blocks__visual {
    flex-direction: column;
    align-items: flex-start;
  }
  .btc-cube {
    width: 80px;
    height: 80px;
  }
  .btc-cube__inner {
    width: 56px;
    height: 56px;
  }
  .btc-cube__face--front { transform: translateZ(28px); }
  .btc-cube__face--right { transform: rotateY(90deg) translateZ(28px); }
  .btc-cube__face--top { transform: rotateX(90deg) translateZ(28px); }
  .btc-cube__face--back { transform: rotateY(180deg) translateZ(28px); }
  .btc-cube__face--left { transform: rotateY(-90deg) translateZ(28px); }
  .btc-cube__face--bottom { transform: rotateX(-90deg) translateZ(28px); }
  .blocks__connector {
    width: 2px;
    height: 40px;
    background: repeating-linear-gradient(
      to bottom,
      var(--color-text-faint) 0,
      var(--color-text-faint) 6px,
      transparent 6px,
      transparent 12px
    );
  }
  .hero__title {
    font-size: var(--text-2xl);
  }
  .projection__chart {
    height: 200px;
  }
  .scenarios {
    grid-template-columns: 1fr;
  }
  .metric-callout {
    flex-direction: column;
  }
  .exchange-item {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .block-card {
    width: 160px;
  }
  .price__actions {
    flex-direction: column;
  }
  .btn {
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════
   TASK 1: VALUATION THESIS (3.5% section)
   ═══════════════════════════════════════════════════════ */
.energy__valuation {
  border-top: 1px solid oklch(30% 0.02 60);
  padding-top: clamp(3rem, 4vw, 5rem);
  margin-top: clamp(3rem, 4vw, 5rem);
}
.energy__valuation-header {
  margin-bottom: var(--space-8);
}
.energy__valuation-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  font-variant-caps: all-small-caps;
}
.energy__valuation-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2vw + 0.5rem, 2.2rem);
  font-weight: 600;
  color: var(--color-text);
  font-variation-settings: 'opsz' 48;
}
.energy__valuation-analogy-row {
  display: flex;
  align-items: stretch;
  gap: 2rem;
  margin-bottom: var(--space-8);
}
.energy__valuation-pillar {
  flex: 1;
  background: oklch(20% 0.005 60);
  border-radius: 12px;
  padding: 2rem;
}
.energy__valuation-pillar-value {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--color-btc-dim);
  margin-bottom: var(--space-2);
  font-variation-settings: 'opsz' 72;
}
.energy__valuation-pillar--nat .energy__valuation-pillar-value {
  color: var(--color-accent);
}
.energy__valuation-pillar-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.energy__valuation-pillar-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}
.energy__valuation-equals {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--color-text-faint);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-variation-settings: 'opsz' 72;
}
.energy__valuation-logic {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-8);
}
.energy__valuation-logic strong {
  color: var(--color-text);
}
.energy__valuation-calc {
  background: oklch(18% 0.005 60);
  border-radius: 12px;
  overflow: hidden;
}
.energy__valuation-calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.energy__valuation-calc-label {
  color: var(--color-text-muted);
}
.energy__valuation-calc-val {
  color: var(--color-data);
  font-weight: 600;
}
.energy__valuation-calc-row + .energy__valuation-calc-row {
  border-top: 1px solid oklch(24% 0.005 60);
}
.energy__valuation-calc-row--result {
  background: oklch(30% 0.08 30);
}
.energy__valuation-calc-row--result .energy__valuation-calc-label,
.energy__valuation-calc-row--result .energy__valuation-calc-val {
  color: oklch(95% 0.01 80);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   TASK 2: TURNING POINT PAGE COMPONENTS
   ═══════════════════════════════════════════════════════ */

/* Cycle ATH Chart */
.turning-cycle-chart {
  background: oklch(18% 0.005 60);
  border-radius: 12px;
  padding: clamp(var(--space-4), 3vw, var(--space-8));
  margin-block: var(--space-6);
}
.turning-cycle-chart__header {
  margin-bottom: var(--space-6);
}
.turning-cycle-chart__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  font-variation-settings: 'opsz' 36;
}
.turning-cycle-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.turning-cycle-bar {
  display: grid;
  grid-template-columns: 120px 1fr 200px;
  gap: var(--space-4);
  align-items: center;
}
.turning-cycle-bar__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.turning-cycle-bar__label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.turning-cycle-bar__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.turning-cycle-bar__track {
  width: 100%;
  height: 28px;
  background: oklch(22% 0.005 60);
  border-radius: 6px;
  overflow: hidden;
}
.turning-cycle-bar__fill {
  height: 100%;
  background: oklch(45% 0.02 60);
  border-radius: 6px;
  transition: width 1s var(--ease-out);
}
.turning-cycle-bar__fill--green {
  background: oklch(65% 0.15 155);
}
.turning-cycle-bar__fill--yellow {
  background: oklch(75% 0.15 85);
}
.turning-cycle-bar__fill--red {
  background: oklch(65% 0.18 25);
  animation: barPulse 2s ease-in-out infinite;
}
@keyframes barPulse {
  0%, 100% { box-shadow: 0 0 8px oklch(65% 0.18 25 / 0.3); }
  50%      { box-shadow: 0 0 20px oklch(65% 0.18 25 / 0.6); }
}
.turning-cycle-bar__values {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.turning-cycle-bar__price {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-data);
}
.turning-cycle-bar__mult {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.turning-cycle-bar__mult--green { color: oklch(65% 0.15 155); }
.turning-cycle-bar__mult--yellow { color: oklch(75% 0.15 85); }
.turning-cycle-bar__mult--red { color: oklch(65% 0.18 25); }
.turning-cycle-bar__alert {
  font-weight: 700;
  color: oklch(65% 0.18 25);
  font-size: var(--text-sm);
}

/* Math Box */
.turning-math-box {
  margin-block: var(--space-8);
}
.turning-math-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.turning-math-cell {
  background: oklch(20% 0.005 60);
  padding: var(--space-5) var(--space-6);
  border-radius: 12px;
  text-align: center;
  flex: 1;
  min-width: 180px;
}
.turning-math-cell__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}
.turning-math-cell__value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
  font-variation-settings: 'opsz' 36;
}
.turning-math-cell__sub {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.turning-math-cell--result {
  background: oklch(22% 0.06 25);
  border: 1px solid oklch(35% 0.12 25);
}
.turning-math-cell--result .turning-math-cell__value {
  color: oklch(65% 0.18 25);
}
.turning-math-operator {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-faint);
  flex-shrink: 0;
  font-variation-settings: 'opsz' 48;
}

/* Crisis Grid */
.turning-crisis-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-block: var(--space-6);
}
.turning-crisis-card {
  background: oklch(18% 0.005 60);
  border-left: 3px solid oklch(65% 0.18 25);
  padding: var(--space-5);
  border-radius: var(--radius-md);
}
.turning-crisis-card__value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  color: oklch(65% 0.18 25);
  margin-bottom: var(--space-2);
  font-variation-settings: 'opsz' 48;
}
.turning-crisis-card__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}
.turning-crisis-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.6;
}

/* Projection Table */
.turning-projection-table {
  margin-block: var(--space-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: oklch(18% 0.005 60);
}
.turning-projection-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.turning-projection-table thead {
  background: oklch(20% 0.005 60);
}
.turning-projection-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-variant-caps: all-small-caps;
}
.turning-projection-table td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid oklch(24% 0.005 60);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.turning-projection-table__val {
  color: var(--color-data);
  font-weight: 600;
}
.turning-projection-table__future {
  background: oklch(16% 0.005 60);
}
.turning-projection-table__future td {
  font-style: italic;
}
.turning-projection-table__down {
  color: oklch(65% 0.18 25) !important;
  font-weight: 600;
}
.turning-projection-table__note {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  border-top: 1px solid oklch(24% 0.005 60);
  line-height: 1.5;
}

/* Solution Grid */
.turning-solution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-block: var(--space-6);
}
.turning-solution-item {
  background: oklch(20% 0.005 60);
  padding: var(--space-6);
  border-radius: 12px;
}
.turning-solution-item__icon {
  font-size: 2rem;
  margin-bottom: var(--space-3);
}
.turning-solution-item__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
  font-variation-settings: 'opsz' 24;
}
.turning-solution-item__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════
   TASK 3: SECURITY ATTACK GRID (51% attack data)
   ═══════════════════════════════════════════════════════ */
.security-attack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-block: var(--space-6);
}
.security-attack-card {
  background: oklch(18% 0.008 40);
  padding: 1.5rem;
  border-radius: 6px;
  border-left: 3px solid var(--color-accent);
}
.security-attack-card:nth-child(2) {
  border-left-color: var(--color-btc);
}
.security-attack-card--danger {
  border-left-color: oklch(65% 0.18 25) !important;
}
.security-attack-card__value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-data);
  margin-bottom: var(--space-2);
  font-variation-settings: 'opsz' 48;
}
.security-attack-card--danger .security-attack-card__value {
  color: oklch(65% 0.18 25);
  text-shadow: 0 0 20px oklch(65% 0.18 25 / 0.3);
}
.security-attack-card__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-variant-caps: all-small-caps;
  margin-bottom: var(--space-2);
}
.security-attack-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════
   TASK 6: EDITORIAL IMAGES
   ═══════════════════════════════════════════════════════ */
.editorial-img {
  width: 100%;
  border-radius: 12px;
  margin: 2rem 0;
  opacity: 0.85;
  filter: contrast(1.05) brightness(0.9);
}
.editorial-img--float {
  float: right;
  max-width: 320px;
  margin-left: 2rem;
  width: 100%;
}
.editorial-img__caption {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-style: italic;
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Turning page halving schedule image */
.turning-halving-img {
  width: 100%;
  border-radius: 12px;
  margin: var(--space-6) 0;
  opacity: 0.9;
  filter: contrast(1.05) brightness(0.9);
}

/* rometheminer quote block */
.turning-quote {
  background: oklch(18% 0.005 60);
  border-left: 3px solid var(--color-btc);
  padding: var(--space-6);
  border-radius: 0 12px 12px 0;
  margin-block: var(--space-8);
}
.turning-quote__text {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-3);
}
.turning-quote__author {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-btc);
  font-weight: 600;
}

/* Required BTC Price Chart */
.turning-required-price {
  margin-block: var(--space-8);
}
.turning-required-price__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
  font-variation-settings: 'opsz' 36;
}
.turning-required-price__sub {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}

/* NatPaper page styles */
.natpaper-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  margin-block: var(--space-6);
  background: oklch(18% 0.005 60);
}
.natpaper-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.natpaper-table thead {
  background: oklch(20% 0.005 60);
}
.natpaper-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.natpaper-table td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid oklch(24% 0.005 60);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.natpaper-table tr:hover td {
  background: oklch(20% 0.005 60);
}

/* Additional responsive rules for new components */
@media (max-width: 768px) {
  .energy__valuation-analogy-row {
    flex-direction: column;
  }
  .energy__valuation-equals {
    justify-content: center;
  }
  .turning-cycle-bar {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .turning-cycle-bar__values {
    align-items: flex-start;
    flex-direction: row;
    gap: var(--space-4);
  }
  .turning-crisis-grid {
    grid-template-columns: 1fr 1fr;
  }
  .turning-solution-grid {
    grid-template-columns: 1fr;
  }
  .turning-math-cell {
    min-width: 140px;
  }
  .security-attack-grid {
    grid-template-columns: 1fr;
  }
  .editorial-img--float {
    float: none;
    max-width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .turning-crisis-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════
   NAV LANGUAGE SWITCHER
   ═══════════════════════════════════════════════════════ */
.nav__lang {
  position: relative;
  margin-left: var(--space-2);
  flex-shrink: 0;
}
.nav__lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  background: oklch(24% 0.015 30);
  border: 1px solid oklch(38% 0.06 30);
  color: oklch(85% 0.04 30);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.nav__lang-btn:hover {
  background: oklch(28% 0.02 30);
  border-color: oklch(50% 0.1 30);
  color: oklch(92% 0.02 30);
}
.nav__lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  max-height: 380px;
  overflow-y: auto;
  background: oklch(18% 0.008 40);
  border: 1px solid oklch(26% 0.01 40);
  border-radius: 8px;
  padding: 6px;
  z-index: 1000;
  box-shadow: 0 12px 40px oklch(0% 0 0 / 0.5);
}
.nav__lang.open .nav__lang-dropdown {
  display: block;
}
.nav__lang-option {
  display: block;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.nav__lang-option:hover {
  background: oklch(24% 0.01 40);
  color: var(--color-text);
}
.nav__lang-option.active {
  color: oklch(62% 0.22 30);
  font-weight: 600;
}

@media (max-width: 1100px) {
  .nav__lang { display: none; }
}

/* ═══════════════════════════════════════════════════════
   FLOATING BUY CTA
   ═══════════════════════════════════════════════════════ */
.float-cta {
  position: fixed;
  bottom: clamp(20px, 4vw, 32px);
  right: clamp(16px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  animation: floatCta-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.5s both;
}
@keyframes floatCta-enter {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.float-cta__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 12px;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4px 24px oklch(0% 0 0 / 0.35), 0 0 0 1px oklch(100% 0 0 / 0.06);
  backdrop-filter: blur(8px);
}
.float-cta__btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 32px oklch(0% 0 0 / 0.45), 0 0 0 1px oklch(100% 0 0 / 0.1);
}
.float-cta__btn--binance {
  background: rgba(240, 185, 11, 0.95);
  color: #181A20;
}
.float-cta__btn--binance:hover {
  background: #F0B90B;
}
.float-cta__btn--okx {
  background: rgba(255, 255, 255, 0.95);
  color: #181A20;
}
.float-cta__btn--okx:hover {
  background: #ffffff;
}
.float-cta__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}
.float-cta__btn--binance .float-cta__icon {
  background: #1E2026;
  overflow: hidden;
}
.float-cta__btn--binance .float-cta__icon img { mix-blend-mode: screen; }
.float-cta__btn--okx .float-cta__icon {
  background: #1E2026;
  overflow: hidden;
}
.float-cta__btn--okx .float-cta__icon img { mix-blend-mode: screen; }
.float-cta__label {
  white-space: nowrap;
}

/* Mobile: smaller floating buttons */
@media (max-width: 640px) {
  .float-cta__btn {
    padding: 10px 16px;
    font-size: 0.8125rem;
    border-radius: 10px;
    gap: 8px;
  }
  .float-cta__icon {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
  }
}

/* ═══════════════════════════════════════════════════════
   SECURITY PAGE — Expanded Components
   ═══════════════════════════════════════════════════════ */

/* Chart Block */
.sec-chart-block {
  margin-top: var(--space-10);
  margin-bottom: var(--space-8);
}
.sec-chart-block__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
  font-variation-settings: 'opsz' 36;
}
.sec-chart-block__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.sec-chart-block__wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  overflow: hidden;
}
.sec-chart-block__wrap canvas {
  display: block;
  margin: 0 auto;
}
.sec-chart-block__note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-3);
  line-height: 1.7;
}

/* ESR Circle Visualization */
.esr-visual {
  margin-top: var(--space-10);
  margin-bottom: var(--space-8);
}
.esr-visual__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
  margin-top: var(--space-6);
}
.esr-visual__circle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
.esr-visual__circle {
  width: clamp(200px, 28vw, 280px);
  height: clamp(200px, 28vw, 280px);
  border-radius: 50%;
  background: conic-gradient(
    #F7931A 0deg 17.28deg,
    oklch(22% 0.005 60) 17.28deg 360deg
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 0 60px oklch(0% 0 0 / 0.4);
  animation: esrPulse 3s ease-in-out infinite;
}
@keyframes esrPulse {
  0%, 100% { box-shadow: 0 0 60px oklch(0% 0 0 / 0.4), 0 0 0 0 rgba(247, 147, 26, 0); }
  50% { box-shadow: 0 0 60px oklch(0% 0 0 / 0.4), 0 0 30px 4px rgba(247, 147, 26, 0.15); }
}
.esr-visual__circle-inner {
  width: 72%;
  height: 72%;
  border-radius: 50%;
  background: oklch(14% 0.005 60);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.esr-visual__circle-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 600;
  color: #F7931A;
}
.esr-visual__circle-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.esr-visual__legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.esr-visual__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.esr-visual__legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.esr-visual__legend-dot--btc {
  background: #F7931A;
}
.esr-visual__legend-dot--aoi {
  background: oklch(22% 0.005 60);
  border: 1px solid oklch(32% 0.005 60);
}

/* ESR Table */
.esr-visual__table-wrap {
  overflow-x: auto;
}
.esr-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.esr-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-faint);
  font-weight: 500;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.esr-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid oklch(24% 0.005 60 / 0.4);
  color: var(--color-text-muted);
}
.esr-table__val {
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.esr-table__val--accent {
  color: #F7931A;
}
.esr-table__val--danger {
  color: oklch(65% 0.18 25);
}
.esr-table tbody tr:hover {
  background: oklch(18% 0.008 40);
}

/* Quote Card */
.sec-quote-card {
  margin: var(--space-8) 0;
  padding: var(--space-6) var(--space-8);
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.sec-quote-card blockquote {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-style: italic;
  color: var(--color-text);
  line-height: 1.8;
  margin: 0;
  font-variation-settings: 'opsz' 20;
}

/* Proposal Grid */
.proposal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin: var(--space-6) 0;
}
.proposal-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.proposal-card:hover {
  transform: translateY(-2px);
}
.proposal-card--highlight {
  border-color: oklch(62% 0.22 30 / 0.5);
  background: oklch(18% 0.02 30);
}
.proposal-card--highlight:hover {
  border-color: oklch(62% 0.22 30 / 0.8);
}
.proposal-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.proposal-card__icon {
  font-size: 1.25rem;
}
.proposal-card__header h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.proposal-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}
.proposal-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.proposal-card__list li {
  font-size: var(--text-xs);
  line-height: 1.5;
  padding-left: 1.4em;
  position: relative;
}
.proposal-card__con {
  color: oklch(65% 0.18 25);
}
.proposal-card__con::before {
  content: '\2717';
  position: absolute;
  left: 0;
  font-weight: 700;
}
.proposal-card__pro {
  color: #00E59B;
}
.proposal-card__pro::before {
  content: '\2713';
  position: absolute;
  left: 0;
  font-weight: 700;
}

/* Milestone Table */
.milestone-table-wrap {
  overflow-x: auto;
  margin: var(--space-6) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.milestone-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.milestone-table thead th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-faint);
  font-weight: 500;
  font-size: var(--text-xs);
  white-space: nowrap;
}
.milestone-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid oklch(24% 0.005 60 / 0.3);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.milestone-table__mcap {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}
.milestone-table__val {
  font-weight: 600;
  color: var(--color-data);
  font-variant-numeric: tabular-nums;
}
.milestone-table tbody tr {
  transition: background 0.15s ease;
}
.milestone-table tbody tr:hover {
  background: oklch(18% 0.008 40);
}
.milestone-table__row--parity {
  background: oklch(62% 0.22 30 / 0.08) !important;
}
.milestone-table__row--parity td {
  color: var(--color-text);
}
.milestone-table__row--parity:hover {
  background: oklch(62% 0.22 30 / 0.14) !important;
}
.milestone-table__row--parity2 {
  background: oklch(65% 0.18 50 / 0.1) !important;
}
.milestone-table__row--parity2 td {
  color: var(--color-text);
}
.milestone-table__row--parity2:hover {
  background: oklch(65% 0.18 50 / 0.16) !important;
}

/* Milestone Legend */
.milestone-legend {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.milestone-legend__item {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.milestone-legend__item--fee {
  color: oklch(62% 0.22 30);
}
.milestone-legend__item--sub {
  color: oklch(70% 0.12 50);
}

/* Security page responsive */
@media (max-width: 768px) {
  .esr-visual__row {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .esr-visual__circle-wrap {
    order: 0;
  }
  .proposal-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
}
@media (max-width: 480px) {
  .proposal-grid {
    grid-template-columns: 1fr;
  }
  .milestone-table {
    font-size: var(--text-xs);
  }
  .sec-quote-card {
    padding: var(--space-4) var(--space-5);
  }
}

/* ═══════════════════════════════════════════════════════
   Language Modal
   ═══════════════════════════════════════════════════════ */
.lang-modal { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; }
.lang-modal.hidden { display:none; }
.lang-modal__backdrop { position:absolute; inset:0; background:oklch(8% 0.005 40/0.92); backdrop-filter:blur(12px); }
.lang-modal__card { position:relative; z-index:1; background:oklch(16% 0.008 40); border:1px solid oklch(26% 0.01 40); border-radius:16px; padding:clamp(2rem,5vw,3rem); max-width:620px; width:90%; max-height:90vh; overflow-y:auto; box-shadow:0 24px 80px oklch(0% 0 0/0.6); }
.lang-modal__header { text-align:center; margin-bottom:2rem; }
.lang-modal__logo { width:56px; height:56px; border-radius:50%; margin-bottom:1rem; }
.lang-modal__title { font-family:var(--font-display); font-size:1.5rem; font-weight:800; color:var(--color-text); margin-bottom:0.5rem; }
.lang-modal__subtitle { font-size:0.875rem; color:var(--color-text-muted); }
.lang-modal__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.lang-modal__btn { display:flex; align-items:center; gap:8px; padding:12px 14px; background:oklch(20% 0.008 40); border:1px solid oklch(28% 0.01 40); border-radius:10px; color:var(--color-text-muted); font-family:var(--font-body); font-size:0.8125rem; font-weight:500; cursor:pointer; transition:all 0.2s ease; white-space:nowrap; }
.lang-modal__btn:hover { background:oklch(26% 0.02 30); border-color:oklch(42% 0.08 30); color:var(--color-text); transform:translateY(-1px); }
@media(max-width:480px){ .lang-modal__grid{grid-template-columns:repeat(2,1fr);} .lang-modal__btn{font-size:0.75rem;padding:10px 12px;} }

/* ═══════════════════════════════════════════════════════
   LTC/DOGE ANALOGY
   ═══════════════════════════════════════════════════════ */
.ltc-doge-analogy {
  margin-top: var(--space-6);
}
.ltc-doge-analogy__intro {
  margin-bottom: var(--space-6);
}
.ltc-doge-analogy__intro p {
  color: var(--color-text-muted);
  line-height: 1.7;
}
.ltc-doge-chart-container {
  background: oklch(16% 0.005 40);
  border: 1px solid oklch(22% 0.01 40);
  border-radius: 8px;
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}
.ltc-doge-chart-header {
  margin-bottom: var(--space-3);
}
.ltc-doge-chart-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
}
.ltc-doge-chart-subtitle {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: 4px;
}
.ltc-doge-chart-legend {
  display: flex;
  gap: var(--space-6);
  justify-content: center;
  margin-top: var(--space-3);
}
.ltc-doge-legend-item {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Data Cards */
.ltc-doge-data-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.ltc-doge-card {
  background: oklch(18% 0.008 40);
  border: 1px solid oklch(24% 0.01 40);
  border-radius: 8px;
  padding: var(--space-4);
}
.ltc-doge-card--current {
  border-color: oklch(40% 0.1 30);
  background: oklch(20% 0.015 30);
}
.ltc-doge-card__year {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.ltc-doge-card__split {
  margin-bottom: var(--space-2);
}
.ltc-doge-card__bar {
  display: flex;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}
.ltc-doge-card__labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}
.ltc-doge-card__note {
  font-size: 0.75rem;
  color: var(--color-text-faint);
  line-height: 1.5;
  margin-top: var(--space-2);
}

/* Conclusion */
.ltc-doge-conclusion {
  background: oklch(16% 0.005 40);
  border-left: 3px solid oklch(62% 0.22 30);
  border-radius: 0 8px 8px 0;
  padding: var(--space-5) var(--space-6);
}
.ltc-doge-conclusion h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}
.ltc-doge-conclusion p {
  line-height: 1.7;
  margin-bottom: var(--space-3);
}

/* Compare cards */
.ltc-doge-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.ltc-doge-compare__item {
  background: oklch(20% 0.008 40);
  border: 1px solid oklch(26% 0.01 40);
  border-radius: 8px;
  padding: var(--space-4);
}
.ltc-doge-compare__item--nat {
  border-color: oklch(42% 0.1 30);
  background: oklch(20% 0.015 30);
}
.ltc-doge-compare__label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.ltc-doge-compare__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .ltc-doge-data-cards { grid-template-columns: 1fr; }
  .ltc-doge-compare { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   PAGE: WALLET — Cross-Chain Purchase Guide
   ═══════════════════════════════════════════════════════ */

/* ── Bridge Explainer ── */
.wallet-bridge-explainer {
  padding-bottom: var(--space-8);
}
.wallet-bridge-text {
  max-width: var(--content-narrow);
  margin: 0 auto var(--space-10);
}
.wallet-bridge-text p {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.wallet-bridge-text p:last-child {
  margin-bottom: 0;
}

/* ── Bridge Flow Visual ── */
.wallet-bridge-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  background: oklch(16% 0.005 40);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}
.wallet-bridge-flow__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.wallet-bridge-flow__node span {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.wallet-bridge-flow__node--btc span { color: #F7931A; }
.wallet-bridge-flow__node--eth span { color: #627EEA; }
.wallet-bridge-flow__node--sol span { color: #9945FF; }
.wallet-bridge-flow__node--bsc span { color: #F0B90B; }

.wallet-bridge-flow__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-faint);
}
.wallet-bridge-flow__arrow-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  white-space: nowrap;
}

.wallet-bridge-flow__branch {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── 2×2 Chain Grid ── */
.wallet-chain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

/* ── Chain Card ── */
.wallet-chain-card {
  background: oklch(18% 0.008 40);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.wallet-chain-card:hover {
  box-shadow: var(--shadow-sm);
}

/* Chain-specific border colors */
.wallet-chain-card--eth {
  border-left-color: #627EEA;
  border-color: oklch(32% 0.04 270);
  background: oklch(19% 0.012 270 / 0.6);
}
.wallet-chain-card--btc { border-left-color: #F7931A; }
.wallet-chain-card--sol { border-left-color: #9945FF; }
.wallet-chain-card--bsc { border-left-color: #F0B90B; }

/* Card Header */
.wallet-chain-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.wallet-chain-card__logo {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}
.wallet-chain-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
}

/* Badge */
.wallet-chain-card__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.5;
  white-space: nowrap;
}
.wallet-chain-card__badge--eth {
  background: oklch(30% 0.06 270);
  color: #93a8f8;
}
.wallet-chain-card__badge--btc {
  background: oklch(28% 0.06 65);
  color: #F7931A;
}
.wallet-chain-card__badge--sol {
  background: oklch(25% 0.06 300);
  color: #c084fc;
}
.wallet-chain-card__badge--bsc {
  background: oklch(28% 0.06 85);
  color: #F0B90B;
}

/* Description */
.wallet-chain-card__desc {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
}

/* Contract Address */
.wallet-chain-card__contract {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.wallet-chain-card__contract-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wallet-chain-card__contract-addr {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-data);
  background: oklch(14% 0.005 60);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-divider);
  word-break: break-all;
  user-select: all;
  cursor: text;
  line-height: 1.6;
}

/* Action buttons area */
.wallet-chain-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
}

/* ── DEX Branded Buttons ── */
.wallet-btn {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-5);
}

/* Primary DEX buttons with brand colors */
.wallet-btn--uniswap {
  background: #FF007A;
  color: #fff;
}
.wallet-btn--uniswap:hover {
  background: #e0006b;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px oklch(0% 0 0 / 0.3);
}

.wallet-btn--ordinals {
  background: #F7931A;
  color: #fff;
}
.wallet-btn--ordinals:hover {
  background: #e0850f;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px oklch(0% 0 0 / 0.3);
}

.wallet-btn--raydium {
  background: linear-gradient(135deg, #2B6AFF, #6C5CE7);
  color: #fff;
}
.wallet-btn--raydium:hover {
  background: linear-gradient(135deg, #2458d9, #5a4bc9);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px oklch(0% 0 0 / 0.3);
}

.wallet-btn--pancake {
  background: #1FC7D4;
  color: #1a1a2e;
}
.wallet-btn--pancake:hover {
  background: #19b3bf;
  color: #1a1a2e;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px oklch(0% 0 0 / 0.3);
}

.wallet-btn--1inch {
  background: #1B314F;
  color: #fff;
  border: 1px solid #2a4570;
}
.wallet-btn--1inch:hover {
  background: #243d63;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px oklch(0% 0 0 / 0.3);
}

.wallet-btn--jupiter {
  background: linear-gradient(135deg, #70CAAF, #2B6CB0);
  color: #fff;
}
.wallet-btn--jupiter:hover {
  background: linear-gradient(135deg, #5fb99e, #245da0);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px oklch(0% 0 0 / 0.3);
}

.wallet-btn--bridge {
  background: oklch(22% 0.01 220);
  color: #fff;
  border: 1px solid oklch(30% 0.01 220);
}
.wallet-btn--bridge:hover {
  background: oklch(26% 0.01 220);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px oklch(0% 0 0 / 0.3);
}

/* Ensure all wallet-btn have icon alignment */
.wallet-btn img,
.wallet-btn svg {
  flex-shrink: 0;
}
.wallet-btn__logo {
  height: 20px;
  width: 20px;
  object-fit: contain;
  vertical-align: middle;
}
.wallet-btn__logo--round {
  border-radius: 50%;
  object-fit: cover;
}

/* ── LP APR Banner ── */
.lp-apr-banner {
  background: oklch(17% 0.015 30);
  border: 1px solid oklch(25% 0.02 30);
  border-radius: 12px;
  padding: var(--space-6) var(--space-8);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-4) var(--space-8);
  align-items: center;
}
.lp-apr-banner__main {
  grid-row: 1;
}
.lp-apr-banner__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lp-apr-banner__value {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: #22c55e;
  line-height: 1.1;
}
.lp-apr-banner__meta {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.lp-apr-banner__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}
.lp-apr-banner__meta-label {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}
.lp-apr-banner__meta-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 500;
}
.lp-apr-banner__note {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  line-height: 1.6;
  color: oklch(55% 0.01 60);
  border-top: 1px solid oklch(22% 0.01 30);
  padding-top: var(--space-3);
}
@media (max-width: 640px) {
  .lp-apr-banner {
    grid-template-columns: 1fr;
    padding: var(--space-5);
  }
  .lp-apr-banner__main { grid-row: auto; }
  .lp-apr-banner__meta { grid-row: auto; }
}

/* ── Holder Chain Stats ── */
.dash-stat--chain {
  position: relative;
}
.dash-stat__chain-icon {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  opacity: 0.6;
}
.dashboard-stats--holders {
  margin-top: var(--space-3);
}

/* ── Webmaster Section ── */
.webmaster {
  padding: var(--space-6) 0;
  border-top: 1px solid oklch(25% 0.01 220);
  margin-top: var(--space-4);
}
.webmaster__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.webmaster__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.webmaster__label strong {
  color: oklch(85% 0.08 30);
  font-weight: 700;
}
.webmaster__links {
  display: flex;
  gap: var(--space-3);
}
.webmaster__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.webmaster__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px oklch(0% 0 0 / 0.3);
}
.webmaster__link--x {
  background: oklch(20% 0.005 220);
  color: oklch(90% 0.01 220);
  border: 1px solid oklch(30% 0.01 220);
}
.webmaster__link--tg {
  background: oklch(20% 0.02 220);
  color: #29B6F6;
  border: 1px solid oklch(30% 0.02 240);
}
@media (max-width: 640px) {
  .webmaster__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

/* ═══════════════════════════════════════════════════════
   CONTRACTS SECTION (Homepage footer)
   ═══════════════════════════════════════════════════════ */
.contracts-section {
  padding: var(--space-8) 0 var(--space-4);
  border-top: 1px solid oklch(25% 0.01 220);
}
.contracts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.contract-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.contract-item__chain {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: oklch(75% 0.01 220);
}
.contract-item__addr {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: oklch(60% 0.01 220);
  background: oklch(18% 0.01 220);
  padding: var(--space-2) var(--space-3);
  border-radius: 6px;
  border: 1px solid oklch(25% 0.01 220);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  word-break: break-all;
  line-height: 1.5;
}
.contract-item__addr:hover {
  border-color: var(--color-accent);
  color: oklch(80% 0.01 220);
}
@media (max-width: 768px) {
  .contracts-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Responsive: Stack to 1-col on mobile ── */
@media (max-width: 768px) {
  .wallet-chain-grid {
    grid-template-columns: 1fr;
  }
  .wallet-bridge-flow {
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3);
  }
  .wallet-bridge-flow__branch {
    flex-direction: row;
    gap: var(--space-4);
  }
}

@media (max-width: 480px) {
  .wallet-chain-card {
    padding: var(--space-4);
  }
  .wallet-chain-card__actions {
    flex-direction: column;
  }
  .wallet-chain-card__actions .btn {
    width: 100%;
    justify-content: center;
  }
  .wallet-bridge-flow {
    flex-direction: column;
    gap: var(--space-3);
  }
  .wallet-bridge-flow__arrow svg {
    transform: rotate(90deg);
  }
  .wallet-bridge-flow__branch {
    flex-direction: row;
    gap: var(--space-4);
  }
}

/* ═══════════════════════════════════════════════════════
   TECH PROTOCOL STACK
   ═══════════════════════════════════════════════════════ */
.tech-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: var(--space-6) 0;
  max-width: 700px;
}
.tech-stack__layer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-radius: 10px;
  border-left: 4px solid;
  background: oklch(18% 0.008 40);
}
.tech-stack__layer--nat {
  border-left-color: oklch(62% 0.22 30);
  background: oklch(20% 0.015 30);
}
.tech-stack__layer--dmt {
  border-left-color: #9945FF;
  background: oklch(18% 0.02 300);
}
.tech-stack__layer--tap {
  border-left-color: #8B5CF6;
}
.tech-stack__layer--ordinals {
  border-left-color: #6B7280;
}
.tech-stack__layer--btc {
  border-left-color: #F7931A;
  background: oklch(18% 0.01 65);
}
.tech-stack__icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}
.tech-stack__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
}
.tech-stack__role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.03em;
  margin-top: 2px;
}
.tech-stack__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-top: var(--space-2);
}
.tech-stack__arrow {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  padding: 8px 0;
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════
   NAT SATELLITE ORBIT — JS-driven 3D orbit
   ═══════════════════════════════════════════════════════ */
.nat-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* No z-index here — JS controls z-index on the satellite directly */
}
.nat-orbit__satellite {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  /* JS will set transform, z-index, opacity */
  transition: none;
  will-change: transform, opacity, filter;
}
/* 3D sphere look for the NAT logo */
.nat-orbit__logo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    inset -4px -4px 8px rgba(0, 0, 0, 0.5),
    inset 3px 3px 6px rgba(255, 200, 100, 0.3),
    0 0 14px rgba(247, 147, 26, 0.5),
    0 0 28px rgba(247, 147, 26, 0.2);
  background: radial-gradient(circle at 35% 35%, rgba(255,220,140,0.25), transparent 60%);
}
/* Orbit trail (subtle) */
.nat-orbit__trail {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 100px;
  margin: -50px 0 0 -120px;
  border: 1px solid rgba(247, 147, 26, 0.08);
  border-radius: 50%;
  transform: rotateX(65deg);
}
@media (max-width: 480px) {
  .nat-orbit__satellite {
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
  }
  .nat-orbit__trail {
    width: 140px;
    height: 60px;
    margin: -30px 0 0 -70px;
  }
}