/* Homepage, 2026 concept. Loaded after site.css: the header and footer are shared, so
   they are restyled here too; everything else is scoped to .home and leaves the other
   routes alone until they are rebuilt. */

:root {
  --n-bg: #02070b;
  --n-bg-2: #020407;
  --n-surface: #03090e;
  --n-surface-2: #040d11;
  --n-line: #132633;
  --n-line-2: rgba(28, 66, 87, 0.9);
  --n-line-3: #1a5266;
  --n-text: #f0faff;
  --n-text-2: #b0c2d1;
  --n-muted: #8fa3b8;
  --n-dim: #758fa6;
  --n-dim-2: #6e8599;
  --n-cyan: #3bc7ff;
  --n-cyan-2: #6bd1ff;
  --n-cyan-3: #8fe0ff;
  --n-cyan-ink: #030a0f;
  --n-ui: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --n-display: var(--n-ui);
  --n-mono: var(--n-ui);
  --n-pad: 56px;
}

body { background: var(--n-bg); }

/* ---------- shared chrome ---------- */
.site-header {
  height: 76px;
  padding: 0 var(--n-pad);
  background: var(--n-bg-2);
  border-bottom: 1px solid var(--n-line);
  font-family: var(--n-ui);
}
.brand { gap: 10px; }
.nav { gap: 30px; padding: 0; background: none; border: 0; border-radius: 0; }
.nav a { height: auto; padding: 0; font-family: var(--n-ui); font-size: 13px; color: var(--n-text-2); border-radius: 0; }
.nav a:hover { color: var(--n-text); }
.nav a[aria-current="page"] { background: none; color: var(--n-cyan); font-weight: 500; }
.nav .dot { background: var(--n-cyan); }
.header-actions .btn { font-family: var(--n-ui); border-radius: 8px; min-height: 38px; font-size: 13px; }
.header-actions .btn-ghost { border-color: var(--n-cyan); color: var(--n-text); }
.header-actions .btn-ghost:hover { border-color: var(--n-cyan-2); background: rgba(59, 199, 255, 0.08); }
.header-actions .btn-light { background: var(--n-cyan); color: var(--n-cyan-ink); border-color: var(--n-cyan); }
.header-actions .btn-light:hover { background: var(--n-cyan-2); color: var(--n-cyan-ink); }
.wallet-chip { background: var(--n-surface-2); }
.live-dot { background: #37d39b; }

.site-footer {
  padding: 34px var(--n-pad);
  background: var(--n-bg-2);
  border-top: 1px solid var(--n-line);
  font-family: var(--n-ui);
}
.footer-brand { align-items: center; }
.site-footer .legal, .site-footer .links a { font-family: var(--n-ui); color: var(--n-dim); }
.site-footer .links a:hover { color: var(--n-cyan); }

.ticker { background: var(--n-surface-2); color: var(--n-cyan-3); border-bottom: 1px solid var(--n-line); font-family: var(--n-ui); }
.ticker b { color: var(--n-cyan); }

/* ---------- page shell ---------- */
.home { font-family: var(--n-ui); color: var(--n-text); }
.home section { padding: 42px var(--n-pad) 46px; border-top: 1px solid var(--n-line); background: var(--n-bg-2); }
.home .eyebrow-2 {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--n-cyan-2);
}
.home h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; color: var(--n-text); }
.home .lead { font-size: 13px; color: var(--n-muted); line-height: 1.6; }
.home a { color: var(--n-cyan); }
.home a.n-btn-primary { color: var(--n-cyan-ink); }
.home a.n-btn-ghost, .home a.world-card { color: var(--n-text); }

/* Headings and figures take the display face; anything that has to line up takes mono. */
.home h1, .home h2, .home h3,
.sec-head .titles h2, .step-card h3, .mission-body h3, .world-head b {
  font-family: var(--n-display); letter-spacing: -0.02em;
}
.hero-stats strong, .science-stats strong, .fund-row strong, .world-metrics b {
  font-family: var(--n-display); letter-spacing: -0.01em;
}
.home .eyebrow-2, .pill-live, .step-card .no, .planned-tag,
.world-status, .science-quote, .mission-shot .tag, .world-metrics span {
  font-family: var(--n-mono);
}
.home .mono, .hero-stats strong, .world-metrics b, .science-stats strong, .fund-row strong,
.home .eyebrow-2, .pill-live, .step-card .no, .planned-tag, .world-status, .mission-shot .tag {
  font-variant-numeric: tabular-nums;
}

.n-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 9px; border: 1px solid transparent;
  font-family: var(--n-ui); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.n-btn-primary { background: var(--n-cyan); color: var(--n-cyan-ink); }
.n-btn-primary:hover { background: var(--n-cyan-2); color: var(--n-cyan-ink); }
.n-btn-ghost { border-color: #597a94; color: var(--n-text); font-weight: 500; }
.n-btn-ghost:hover { border-color: var(--n-cyan); color: var(--n-text); }

/* ---------- hero ---------- */
.home .hero-n {
  position: relative; min-height: 620px; padding: 42px var(--n-pad) 0;
  background: var(--n-bg); border-top: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
}
.hero-art { position: absolute; inset: 0; pointer-events: none; }
.hero-art picture, .hero-art img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 38%;
}
/* Two passes: one to hold the copy column, one to land the section on the page below. */
.hero-art::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--n-bg) 0%, rgba(2, 7, 11, 0.92) 22%, rgba(2, 7, 11, 0.45) 44%, transparent 66%),
    linear-gradient(180deg, rgba(2, 7, 11, 0.55) 0%, transparent 22%, transparent 62%, var(--n-bg) 100%);
}

.hero-inner { position: relative; z-index: 1; max-width: 720px; padding-top: 50px; }
.pill-live {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
  background: var(--n-surface-2); border: 1px solid var(--n-line-3); border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: #a3c9db;
}
.pill-live i { width: 7px; height: 7px; border-radius: 999px; background: #37d39b; display: inline-block; }
.hero-eyebrow { margin-top: 24px; font-size: 12px; font-weight: 600; letter-spacing: 0.15em; color: var(--n-cyan-2); }
.home .hero-n h1 {
  margin-top: 14px; font-size: 64px; line-height: 1.09; font-weight: 600;
  letter-spacing: -0.02em; color: var(--n-text);
}
.home .hero-n h1 em { font-style: normal; color: var(--n-cyan); }
.hero-lead-n { margin-top: 18px; max-width: 520px; font-size: 20px; line-height: 1.5; color: var(--n-text-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

.hero-stats { position: relative; z-index: 1; display: flex; gap: 46px; padding: 40px 0 46px; }
.hero-stats > div { display: flex; flex-direction: column; gap: 5px; }
.hero-stats strong { font-size: 22px; font-weight: 600; color: var(--n-text); }
.hero-stats span { font-size: 12px; color: var(--n-dim); }

/* ---------- featured worlds ---------- */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.sec-head .titles { display: flex; flex-direction: column; gap: 7px; }
.sec-head .more { font-size: 13px; font-weight: 500; color: var(--n-cyan); }

.world-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.world-card {
  display: flex; flex-direction: column; gap: 12px; padding: 18px;
  background: var(--n-surface); border: 1px solid var(--n-line-2); border-radius: 12px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); color: var(--n-text);
}
.world-card:hover { border-color: #2a6b8c; color: var(--n-text); }
.world-shot {
  position: relative; height: 132px; border-radius: 9px; overflow: hidden;
  background-image: radial-gradient(circle at 50% 55%, #14415c 0%, #071722 48%, #03090e 100%);
}
.world-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; display: block; }
.world-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.world-head b { font-size: 20px; font-weight: 600; }
.world-status {
  padding: 5px 9px; border-radius: 6px; background: #05171c; border: 1px solid #247391;
  font-size: 10px; font-weight: 500; color: var(--n-cyan-3); white-space: nowrap;
}
.world-status.open { border-color: #2c7a5c; color: #6fe0b0; background: #051a14; }
.world-card p { font-size: 12px; color: var(--n-muted); }
.world-metrics { display: flex; gap: 24px; margin-top: auto; }
.world-metrics div { display: flex; flex-direction: column; gap: 3px; }
.world-metrics b { font-size: 14px; font-weight: 600; color: var(--n-text); }
.world-metrics span { font-size: 9px; color: var(--n-dim-2); }

/* ---------- how it works ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.step-card {
  display: flex; flex-direction: column; gap: 12px; padding: 21px;
  background: var(--n-surface); border: 1px solid var(--n-line); border-radius: 12px;
}
.step-card .ring {
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid rgba(59, 199, 255, 0.5); background: rgba(59, 199, 255, 0.08);
}
.step-card .no { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--n-cyan-2); }
.step-card h3 { font-size: 20px; font-weight: 600; color: var(--n-text); }
.step-card p { font-size: 13px; line-height: 1.5; color: var(--n-muted); }
.planned-tag {
  align-self: flex-start; padding: 3px 8px; border-radius: 5px;
  background: rgba(163, 171, 190, 0.1); border: 1px solid #2a3b4a;
  font-size: 9px; font-weight: 600; letter-spacing: 0.1em; color: var(--n-dim);
}

/* ---------- mission / fund ---------- */
.fund-grid { display: grid; grid-template-columns: 575px minmax(0, 1fr); gap: 38px; align-items: start; }
.fund-copy { display: flex; flex-direction: column; gap: 14px; }
/* The three beats that explain where trading fees end up. */
.chain { list-style: none; margin: 6px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.chain li {
  position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr);
  gap: 4px 14px; padding: 12px 16px 13px;
  background: var(--n-surface); border: 1px solid var(--n-line); border-radius: 10px;
}
.chain .n {
  grid-row: span 2; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: rgba(59, 199, 255, 0.12); border: 1px solid rgba(59, 199, 255, 0.45);
  color: var(--n-cyan); font-size: 13px; font-weight: 600;
}
.chain b { font-size: 15px; font-weight: 600; color: var(--n-text); }
.chain li > span:last-child { font-size: 13px; line-height: 1.5; color: var(--n-muted); }
/* Connector between the beats. */
.chain li + li::before {
  content: ''; position: absolute; left: 31px; top: -11px; width: 1px; height: 11px;
  background: rgba(59, 199, 255, 0.35);
}

.science-stats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.science-stats.two span { line-height: 1.45; }

.fund-box { margin-top: 8px; padding: 17px 19px; background: var(--n-surface); border: 1px solid var(--n-line-2); border-radius: 12px; }
.fund-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.fund-row strong { font-size: 22px; font-weight: 600; }
.fund-row span { font-size: 13px; color: var(--n-dim); }
.fund-box.live { border-color: rgba(59, 199, 255, 0.38); }
.fund-row strong small { font-size: 14px; font-weight: 500; color: var(--n-muted); margin-left: 4px; }
.fund-row .amber-pct { font-size: 15px; color: var(--n-cyan); }
.live-pip {
  display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 999px;
  background: #37d39b; vertical-align: middle;
  animation: fund-pulse 2.4s ease-in-out infinite;
}
@keyframes fund-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.fund-note a { margin-left: 4px; }

.fund-track { height: 10px; margin-top: 14px; border-radius: 999px; background: #0b1b26; overflow: hidden; }
.fund-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1d7fb0, var(--n-cyan)); transition: width 600ms ease; }
.fund-note { margin-top: 12px; font-size: 12px; color: var(--n-dim); }
.fund-copy-text { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--n-muted); }
/* Where the money is: fees earned on pons, claims paid in $DSKY. */
.fund-lines { margin: 14px 0 0; display: flex; flex-direction: column; gap: 7px; }
.fund-lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 13px; }
.fund-lines dt { color: var(--n-muted); }
.fund-lines dd { margin: 0; color: var(--n-text); font-weight: 600; text-align: right; white-space: nowrap; }
.fund-lines dd i { font-style: normal; font-weight: 500; color: var(--n-dim); margin-left: 7px; }
.fund-lines .sub { margin-top: -3px; font-size: 12px; }
.fund-lines .sub dt, .fund-lines .sub dd { color: var(--n-dim); font-weight: 500; }

.mission-card {
  overflow: hidden; background: var(--n-surface); border: 1px solid var(--n-line-2);
  border-radius: 12px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}
.mission-shot { position: relative; height: 250px; background: radial-gradient(circle at 70% 40%, #12384f, #030c13); }
/* The dome centres near 44% of the photo's height, and the card crops vertically. */
.mission-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
.mission-shot .tag {
  position: absolute; left: 18px; top: 18px; padding: 5px 9px; border-radius: 6px;
  background: rgba(4, 11, 17, 0.88); border: 1px solid #266b8c;
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; color: var(--n-cyan-3);
}
.mission-body { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.mission-body h3 { font-size: 22px; font-weight: 600; }
.mission-body p { font-size: 13px; color: var(--n-muted); line-height: 1.5; }
.mission-meta { display: flex; flex-wrap: wrap; gap: 24px; font-size: 12px; color: var(--n-dim); }

/* ---------- observatories ---------- */
.obs-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.obs-card {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 16px;
  background: var(--n-surface); border: 1px solid var(--n-line); border-radius: 12px;
}
.obs-name { font-size: 15px; font-weight: 600; color: var(--n-text); display: flex; flex-direction: column; gap: 3px; }
.obs-name i { font-style: normal; font-weight: 400; font-size: 12px; color: var(--n-dim); }
.obs-inst { font-size: 12px; color: var(--n-muted); }
.obs-card strong { margin-top: 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--n-cyan); font-variant-numeric: tabular-nums; }
.obs-detail { font-size: 12px; line-height: 1.5; color: var(--n-dim); }
.obs-src { margin-top: auto; padding-top: 6px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n-dim-2); }
.obs-creed { display: flex; flex-wrap: wrap; gap: 10px 36px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--n-line); }
.obs-creed b { font-size: 16px; font-weight: 600; color: var(--n-text); }
.fund-milestone { margin-top: 12px; font-size: 13px; color: var(--n-muted); line-height: 1.5; }
.fund-milestone b { color: var(--n-text); font-weight: 600; }

/* ---------- science ---------- */
.science-grid { display: grid; grid-template-columns: 610px minmax(0, 1fr); gap: 56px; align-items: start; }
.science-copy { display: flex; flex-direction: column; gap: 14px; }
.science-sources { display: flex; flex-wrap: wrap; gap: 36px; font-size: 13px; color: var(--n-text-2); }
.science-sources b { display: block; font-weight: 600; color: var(--n-text); }
.science-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.science-stats > div {
  padding: 19px 15px; background: var(--n-surface); border: 1px solid var(--n-line); border-radius: 10px;
}
.science-stats strong { display: block; font-size: 22px; font-weight: 600; color: var(--n-text); }
.science-stats span { display: block; margin-top: 8px; font-size: 12px; color: var(--n-dim); }
.science-quote { margin-top: 26px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--n-dim-2); }

/* ---------- tablet ---------- */
@media (max-width: 1180px) {
  :root { --n-pad: 28px; }
  .world-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fund-grid, .science-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .obs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-art img { object-position: 78% 40%; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  :root { --n-pad: 18px; }
  .site-header { height: 64px; }
  .home section { padding: 34px var(--n-pad) 38px; }
  .home .hero-n { min-height: 620px; padding-top: 0; justify-content: flex-end; }
  .hero-art img { object-position: 56% 26%; }
  /* Keep the planet visible at the top, then go dark early enough that the copy sits
     on a solid background rather than on the bright limb. */
  .hero-art::after {
    background:
      linear-gradient(180deg, rgba(2, 7, 11, 0.45) 0%, rgba(2, 7, 11, 0.22) 16%, rgba(2, 7, 11, 0.80) 34%, rgba(2, 7, 11, 0.94) 52%, var(--n-bg) 78%);
  }
  .hero-inner { padding-top: 0; max-width: none; }
  .home .hero-n h1 { font-size: 38px; }
  .hero-lead-n { font-size: 16px; }
  .hero-actions .n-btn { flex: 1 1 auto; justify-content: center; }
  .hero-stats { flex-wrap: wrap; gap: 22px 32px; padding: 26px 0 8px; }
  .world-cards, .steps, .science-stats { grid-template-columns: minmax(0, 1fr); }
  .science-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .science-stats.two { grid-template-columns: minmax(0, 1fr); }
  .obs-grid { grid-template-columns: minmax(0, 1fr); }
  .obs-creed { flex-direction: column; gap: 8px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .home h2 { font-size: 24px; }
  .fund-grid { gap: 22px; }
}