/*
 * Landing visual refresh
 *
 * This file is intentionally loaded only by index.html. The restrained
 * petrol / mineral palette and material refinements therefore cannot leak
 * into Docs, Roadmap, Trust or the interactive product demo.
 */
body[data-page="home"] {
  --ink-950: #06100f;
  --ink-900: #091817;
  --ink-850: #0d201f;
  --ink-800: #142a28;
  --ink-700: #29413e;
  --text-100: #f3f5f0;
  --text-200: #d7ded8;
  --text-300: #a9b8b1;
  --text-400: #768b83;
  --violet-300: #c2b6d6;
  --violet-400: #9b87b8;
  --violet-500: #796596;
  --cyan-300: #9de8cf;
  --cyan-400: #64cfac;
  --mint-300: #9de8cf;
  --mint-400: #57c7a3;
  --amber-400: #d7a94c;
  --wallet: #57c7a3;
  --vault: #9b87b8;
  --proof: #75d4b5;
  --limit: #d7a94c;
  --border: rgba(185, 207, 197, .14);
  --border-strong: rgba(185, 207, 197, .25);
  --surface: rgba(12, 31, 29, .86);
  --surface-solid: #0d201f;
  --surface-soft: rgba(229, 240, 234, .035);
  --surface-violet: rgba(155, 135, 184, .085);
  --surface-cyan: rgba(87, 199, 163, .06);
  --line-violet: rgba(155, 135, 184, .34);
  --line-cyan: rgba(87, 199, 163, .3);
  background:
    radial-gradient(ellipse at 82% 7%, rgba(108, 86, 135, .14), transparent 38rem),
    radial-gradient(ellipse at 10% 34%, rgba(38, 111, 91, .13), transparent 34rem),
    linear-gradient(180deg, #06100f 0%, #071312 52%, #050d0d 100%);
}

body[data-page="home"] .page-grid {
  opacity: .08;
  background-size: 88px 88px;
  mask-image: linear-gradient(to bottom, black, transparent 64%);
}

body[data-page="home"] .text-gradient {
  background-image: linear-gradient(105deg, #c2b6d6 8%, #9de8cf 88%);
}

body[data-page="home"] .hero {
  position: relative;
  isolation: isolate;
}

body[data-page="home"] .hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6,16,15,.92) 0 36%, rgba(6,16,15,.48) 62%, transparent 82%),
    radial-gradient(ellipse at 72% 45%, rgba(87,199,163,.07), transparent 30rem);
  pointer-events: none;
}

body[data-page="home"] .hero-copy {
  text-shadow: 0 1px 18px rgba(0,0,0,.24);
}

/*
 * The controlled-orbit background reads at the edges of the frame, so the
 * shared veil becomes a directional vignette: the hero copy column stays
 * protected on the left while the top and bottom bands stay open.
 */
body[data-page="home"] .immersive-viewport::after {
  background:
    linear-gradient(90deg, rgba(6,16,15,.92) 0 17%, rgba(6,16,15,.42) 36%, rgba(6,16,15,0) 58%),
    radial-gradient(135% 105% at 70% 52%, rgba(6,16,15,0) 62%, rgba(6,16,15,.34) 100%);
}

@media (max-width: 760px) {
  body[data-page="home"] .immersive-viewport::after {
    background:
      linear-gradient(180deg, rgba(6,16,15,.74) 0 22%, rgba(6,16,15,.28) 52%, rgba(6,16,15,.62)),
      radial-gradient(140% 80% at 62% 50%, rgba(6,16,15,0) 40%, rgba(6,16,15,.5) 100%);
  }
}

body[data-page="home"] .finance-panel,
body[data-page="home"] .ownership-side,
body[data-page="home"] .proof-receipt,
body[data-page="home"] .strategy-inspector,
body[data-page="home"] .architecture-map {
  border-color: rgba(186, 207, 198, .17);
  background:
    linear-gradient(145deg, rgba(16, 37, 35, .92), rgba(8, 21, 20, .95));
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .28),
    inset 0 1px rgba(233, 242, 237, .035);
}

body[data-page="home"] .finance-panel {
  position: relative;
}

body[data-page="home"] .finance-panel::after {
  content: '';
  position: absolute;
  inset: 1px 8% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(235,244,239,.2), transparent);
  pointer-events: none;
}

body[data-page="home"] .balance-card--wallet {
  border-color: rgba(87,199,163,.34);
  background: linear-gradient(145deg, rgba(38,117,94,.17), rgba(17,52,45,.08));
}

body[data-page="home"] .balance-card--vault {
  border-color: rgba(155,135,184,.34);
  background: linear-gradient(145deg, rgba(121,101,150,.18), rgba(51,40,70,.08));
}

body[data-page="home"] :is(.card, .boundary-steps article, .receipt-stat, .strategy-view, .architecture-chain) {
  transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease, translate .22s ease;
}

body[data-page="home"] :is(.boundary-steps article, .receipt-stat, .architecture-chain):hover {
  translate: 0 -2px;
  border-color: rgba(157,232,207,.25);
  box-shadow: 0 16px 38px rgba(0,0,0,.18);
}

body[data-page="home"] .immersive-viewport::after {
  background:
    linear-gradient(90deg, rgba(6,16,15,.94) 0 19%, rgba(6,16,15,.52) 38%, rgba(6,16,15,.04) 71%),
    linear-gradient(180deg, rgba(6,16,15,.35), transparent 43%, rgba(6,16,15,.55));
}

body[data-page="home"][data-webgl-state="ready"] .immersive-canvas {
  opacity: .78;
}

/* Cohesive CSS fallback: two protected spaces joined by one controlled gate. */
body[data-page="home"] .fallback--ownership {
  width: min(62vw, 720px);
  height: 260px;
}

body[data-page="home"] .fallback--ownership::before {
  content: '';
  position: absolute;
  left: 24%;
  right: 24%;
  top: 48%;
  height: 20%;
  border: 1px solid rgba(214,226,219,.13);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(87,199,163,.1), rgba(215,169,76,.1) 50%, rgba(155,135,184,.1));
}

body[data-page="home"] .fallback--ownership i:nth-child(1),
body[data-page="home"] .fallback--ownership i:nth-child(3) {
  top: 14%;
  width: 43%;
  height: 72%;
  aspect-ratio: auto;
  transform: none;
  border-radius: 46% 52% 50% 44%;
}

body[data-page="home"] .fallback--ownership i:nth-child(1) {
  left: 2%;
  border: 1px solid rgba(87,199,163,.32);
  background: radial-gradient(circle at 68% 48%, rgba(157,232,207,.17), rgba(13,32,31,.86) 56%, rgba(6,16,15,.96));
  box-shadow: inset -18px 0 40px rgba(87,199,163,.08), 0 20px 55px rgba(0,0,0,.3);
}

body[data-page="home"] .fallback--ownership i:nth-child(2) {
  z-index: 2;
  left: calc(50% - 5px);
  top: 29%;
  width: 10px;
  height: 42%;
  border-radius: 999px;
  background: #d7a94c;
  box-shadow: 0 0 24px rgba(215,169,76,.25);
}

body[data-page="home"] .fallback--ownership i:nth-child(3) {
  right: 2%;
  border: 1px solid rgba(155,135,184,.34);
  background: radial-gradient(circle at 34% 48%, rgba(194,182,214,.15), rgba(24,28,38,.88) 56%, rgba(6,16,15,.96));
  box-shadow: inset 18px 0 40px rgba(155,135,184,.08), 0 20px 55px rgba(0,0,0,.3);
}

@media (max-width: 760px) {
  body[data-page="home"] .hero::before {
    background: linear-gradient(180deg, rgba(6,16,15,.84), rgba(6,16,15,.34) 68%, rgba(6,16,15,.76));
  }

  body[data-page="home"] .immersive-viewport::after {
    background: linear-gradient(180deg, rgba(6,16,15,.77) 0 34%, rgba(6,16,15,.36) 58%, rgba(6,16,15,.72));
  }

  body[data-page="home"][data-webgl-state="ready"] .immersive-canvas { opacity: .52; }
  body[data-page="home"] .fallback--ownership { width: 110vw; transform: translateX(18%) scale(.72); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] :is(.boundary-steps article, .receipt-stat, .architecture-chain):hover { translate: none; }
}