/* MARION CHAIN — v5 overlay (clean) ================================== */
/* Replaces v4-overlay.css. Everything that was patched-on-top is rebuilt
   here so the visual language is consistent and stale references can't
   leak in via leftover rules. */

:root {
  --bg:        #050608;
  --bg-elev:   #0c0f15;
  --bg-elev-2: #11151d;
  --line:      #1b212c;
  --line-soft: rgba(255,255,255,0.06);
  --text:      #e8edf3;
  --muted:     #8a93a3;
  --mint:      #7cffb0;
  --cyan:      #6dd4f0;
  --violet:    #b89aff;
  --coral:     #ff6e9a;
  --amber:     #ffb86b;
  --red:       #ff6b7a;
}

/* ===== Hero text refinement ========================================== */
.hero-text-block { padding: 56px 0 28px; }
.hero-eyebrow { color: var(--muted); letter-spacing: 0.18em; font-size: 11px; }
.hero-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 18px 0 18px;
}
.hero-sub {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.55;
  color: #b6bdcb;
  max-width: 760px;
}

/* ===== Live metrics strip (hero) ===================================== */
.live-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 24px 0 16px;
}
.metric {
  background: linear-gradient(180deg, rgba(12,15,21,0.65), rgba(12,15,21,0.4));
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.metric::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 50% at 50% 0%, rgba(124,255,176,0.06), transparent 60%);
}
.metric .v {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.metric .l {
  display: block; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin-top: 6px;
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.meta-cell {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px;
  background: rgba(12,15,21,0.45);
  border-left: 2px solid var(--mint);
  border-radius: 4px;
}
.meta-l { color: var(--muted); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.meta-v { font-family: 'JetBrains Mono', monospace; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }

/* ===== Hero canvas frame ============================================= */
.hero-v4 {
  height: clamp(240px, 28vh, 320px);
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(60% 80% at 50% 50%, rgba(124,255,176,0.04), transparent 70%),
    var(--bg);
  overflow: hidden;
}
.hero-v4 canvas { width: 100%; height: 100%; display: block; }
.hero-corners .hc {
  position: absolute; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--muted); letter-spacing: 0.1em;
  padding: 8px 14px;
}
.hero-corners .tl { top: 0; left: 0; }
.hero-corners .tr { top: 0; right: 0; color: var(--mint); }
.hero-corners .bl { bottom: 0; left: 0; }
.hero-corners .br { bottom: 0; right: 0; }
.hero-corners .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); margin-right: 6px; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ===== Section base =================================================== */
.section { padding: 88px 0; }
.section-head { max-width: 820px; margin-bottom: 32px; }
.section-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
.section-eyebrow .live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--mint); margin-right: 8px;
  box-shadow: 0 0 0 0 rgba(124,255,176, 0.6); animation: livepulse 1.8s infinite;
}
@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0   rgba(124,255,176, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(124,255,176, 0); }
  100% { box-shadow: 0 0 0 0   rgba(124,255,176, 0); }
}
.section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.15; letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.section-sub { color: #b6bdcb; line-height: 1.55; font-size: 15px; max-width: 720px; }

/* ===== LIVE NOW panels =============================================== */
.section-live { background: linear-gradient(180deg, rgba(124,255,176,0.025), transparent 60%); }
.live-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 800px) { .live-panels { grid-template-columns: 1fr; } }
.live-panel {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 18px 12px;
  min-height: 320px;
}
.live-panel-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px;
}
.live-panel-head h3 {
  margin: 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
}
.live-panel-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); }
.live-panel-list { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow: hidden; }
.live-panel-list li {
  display: grid;
  grid-template-columns: 64px 1fr 80px;
  gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px dashed var(--line);
  font-size: 12.5px;
  animation: slideIn 0.35s ease-out;
}
@keyframes slideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.live-panel-list li:last-child { border-bottom: 0; }
.live-panel-list .sq {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em;
  text-align: center; padding: 3px 6px; border-radius: 4px;
  background: rgba(124,255,176,0.1); color: var(--mint);
}
.live-panel-list .sq.s-CHAIN  { color: var(--mint);   background: rgba(124,255,176,0.1); }
.live-panel-list .sq.s-CRYPT  { color: var(--violet); background: rgba(184,154,255,0.1); }
.live-panel-list .sq.s-TOKEN  { color: var(--coral);  background: rgba(255,110,154,0.1); }
.live-panel-list .sq.s-FLOW   { color: var(--cyan);   background: rgba(109,212,240,0.1); }
.live-panel-list .sq.s-WARD   { color: var(--red);    background: rgba(255,107,122,0.1); }
.live-panel-list .sq.s-BRIDGE { color: var(--amber);  background: rgba(255,184,107,0.1); }
.live-panel-list .sq.s-CIVIC  { color: var(--violet); background: rgba(184,154,255,0.1); }
.live-panel-list .sq.s-BEACON { color: var(--coral);  background: rgba(255,110,154,0.1); }
.live-panel-list .sq.s-HEARTH { color: var(--mint);   background: rgba(124,255,176,0.1); }
.live-panel-list .sq.s-LENS   { color: var(--cyan);   background: rgba(109,212,240,0.1); }
.live-panel-list .sq.s-AUDIT  { color: var(--red);    background: rgba(255,107,122,0.1); }
.live-panel-list .sq.s-PROFIT { color: var(--mint);   background: rgba(124,255,176,0.1); }
.live-panel-list .title { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-panel-list .ts { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); text-align: right; }
.live-panel-empty {
  display: block !important; padding: 24px 0 !important; text-align: center;
  color: var(--muted); font-style: italic; border: 0 !important;
  grid-template-columns: 1fr !important;
}

/* ===== Design cards ================================================== */
.design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.design-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 22px 20px;
  position: relative;
}
.design-card .design-eyebrow {
  display: inline-block; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; margin-bottom: 12px;
  background: rgba(124,255,176,0.1); color: var(--mint);
}
.design-card--mint   .design-eyebrow { background: rgba(124,255,176,0.1);  color: var(--mint); }
.design-card--cyan   .design-eyebrow { background: rgba(109,212,240,0.1);  color: var(--cyan); }
.design-card--violet .design-eyebrow { background: rgba(184,154,255,0.1);  color: var(--violet); }
.design-card h3 { margin: 0 0 10px; font-size: 18px; color: var(--text); }
.design-card p  { margin: 0; color: #b6bdcb; line-height: 1.55; font-size: 14px; }
/* defensive: kill any leftover icon */
.section-design .design-card svg { display: none !important; }

/* ===== Squad grid ==================================================== */
.squad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.squad-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 16px 14px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}
.squad-card:hover { transform: translateY(-2px); border-color: rgba(124,255,176,0.4); }
.squad-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--mint);
}
.squad-card .sc-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em; color: var(--mint);
  margin-bottom: 4px;
}
.squad-card .sc-name {
  font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px;
}
.squad-card p { font-size: 12.5px; line-height: 1.5; color: #b6bdcb; margin: 0 0 10px; }
.squad-card .sc-meta { font-size: 10px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
.sc-crypt::before  { background: var(--violet); } .sc-crypt  .sc-tag { color: var(--violet); }
.sc-chain::before  { background: var(--mint); }
.sc-token::before  { background: var(--coral); }  .sc-token  .sc-tag { color: var(--coral); }
.sc-flow::before   { background: var(--cyan); }   .sc-flow   .sc-tag { color: var(--cyan); }
.sc-ward::before   { background: var(--red); }    .sc-ward   .sc-tag { color: var(--red); }
.sc-bridge::before { background: var(--amber); }  .sc-bridge .sc-tag { color: var(--amber); }
.sc-civic::before  { background: var(--violet); } .sc-civic  .sc-tag { color: var(--violet); }
.sc-beacon::before { background: var(--coral); }  .sc-beacon .sc-tag { color: var(--coral); }
.sc-hearth::before { background: var(--mint); }
.sc-lens::before   { background: var(--cyan); }   .sc-lens   .sc-tag { color: var(--cyan); }
.sc-audit::before  { background: var(--red); }    .sc-audit  .sc-tag { color: var(--red); }
.sc-profit::before { background: var(--mint); }
.sc-outreach::before { background: var(--amber); } .sc-outreach .sc-tag { color: var(--amber); }

/* ===== AUDIT pipeline ================================================ */
.section-audit { background: linear-gradient(180deg, rgba(255,107,122,0.025), transparent 60%); }
.audit-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  gap: 8px;
  align-items: stretch;
  margin: 28px 0 36px;
}
.af-step {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 14px 12px;
  text-align: center;
  position: relative;
}
.af-num {
  display: inline-block;
  width: 26px; height: 26px; line-height: 26px; border-radius: 50%;
  background: rgba(255,107,122,0.15); color: var(--red);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
  margin-bottom: 8px;
}
.af-step h4 { margin: 0 0 4px; font-size: 13px; color: var(--text); }
.af-step p  { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.45; }
.af-arrow {
  align-self: center;
  color: var(--red); font-size: 18px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
@media (max-width: 900px) {
  .audit-flow { grid-template-columns: 1fr; }
  .af-arrow { display: none; }
}
.audit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.audit-card {
  background: var(--bg-elev);
  border: 1px solid rgba(255,107,122,0.18);
  border-radius: 12px;
  padding: 20px 22px 18px;
}
.audit-card h3 {
  font-size: 13px; margin: 0 0 12px; color: var(--red);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.audit-card ul { margin: 0; padding-left: 18px; }
.audit-card li { font-size: 12.5px; color: #c4cad6; line-height: 1.6; margin-bottom: 4px; }

/* ===== Revenue cards ================================================= */
.section-revenue { background: linear-gradient(180deg, rgba(124,255,176,0.025), transparent 60%); }
.revenue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}
.revenue-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px 16px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}
.revenue-card:hover { transform: translateY(-2px); border-color: rgba(124,255,176,0.35); }
.revenue-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--mint);
}
.revenue-card--mint::before   { background: var(--mint); }
.revenue-card--coral::before  { background: var(--coral); }
.revenue-card--cyan::before   { background: var(--cyan); }
.revenue-card--violet::before { background: var(--violet); }
.revenue-card--amber::before  { background: var(--amber); }
.revenue-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.revenue-card h3 { font-size: 15px; margin: 0 0 8px; color: var(--text); line-height: 1.3; }
.revenue-card p  { font-size: 13px; color: #b6bdcb; line-height: 1.55; margin: 0; }

/* ===== Reveal animations (intersection observer) =====================
   Safety: only hide reveal sections when JS has confirmed it can drive
   them (body.js-ready). If JS is disabled, blocked, or any module
   errors before body.js-ready is set, every section still renders
   normally. The 800ms timeout in reveal.js guarantees content shows
   even if IntersectionObserver fails. */
body.js-ready .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s, transform 0.7s; }
body.js-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ===== Live ticker tweaks ============================================ */
.live-ticker { border-bottom: 1px solid var(--line); }
.live-ticker .live-pulse { background: var(--mint); box-shadow: 0 0 0 0 rgba(124,255,176, 0.6); animation: livepulse 1.8s infinite; }
.live-ticker .live-label { color: var(--mint); font-weight: 600; letter-spacing: 0.16em; }

/* ===== Mobile tightening ============================================= */
@media (max-width: 720px) {
  .section { padding: 60px 0; }
  .hero-v4 { height: clamp(200px, 26vh, 260px); }
  .hero-title { font-size: clamp(28px, 7vw, 40px); }
  .live-metrics { grid-template-columns: 1fr 1fr; }
  .hero-meta { grid-template-columns: 1fr 1fr; }
}

/* === Tokenomics constellation (artistic chart) ======================== */
.section-tokenomics { background: linear-gradient(180deg, rgba(255,110,154,0.025), transparent 60%); }

.tk-stage {
  display: grid;
  grid-template-columns: minmax(360px, 1.3fr) minmax(280px, 1fr);
  gap: 28px;
  align-items: center;
  margin: 28px 0 28px;
}
@media (max-width: 900px) { .tk-stage { grid-template-columns: 1fr; } }

.tk-chart-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 540px;
  margin: 0 auto;
  width: 100%;
}
.tk-constellation {
  width: 100%; height: 100%; display: block;
  overflow: visible;
}
.tk-constellation .tk-petal {
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), opacity 0.25s, filter 0.25s;
  transform-origin: center;
  transform-box: fill-box;
}
.tk-constellation .tk-petal:hover,
.tk-constellation .tk-petal.is-on {
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.18));
}
.tk-constellation .tk-petal.is-dim { opacity: 0.28; }
.tk-constellation .tk-hex { transition: opacity 0.3s; }
.tk-constellation .tk-pct { pointer-events: none; }
.tk-constellation .tk-label { pointer-events: none; opacity: 0.85; }
.tk-constellation .tk-conn { transition: opacity 0.3s, stroke-width 0.3s; }
.tk-constellation .tk-petal:hover .tk-conn,
.tk-constellation .tk-petal.is-on .tk-conn { opacity: 0.95; stroke-width: 1.6; }

.tk-constellation .tk-nucleus circle:last-of-type {
  animation: tknuc 2.6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes tknuc {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.6); opacity: 0.5; }
}

/* Draw-in for petals when section reveals */
.section-tokenomics.is-visible .tk-petal {
  animation: petal-in 0.7s cubic-bezier(.2,.8,.2,1) backwards;
}
.section-tokenomics.is-visible .tk-petal:nth-child(4)  { animation-delay: 0.10s; }
.section-tokenomics.is-visible .tk-petal:nth-child(5)  { animation-delay: 0.18s; }
.section-tokenomics.is-visible .tk-petal:nth-child(6)  { animation-delay: 0.26s; }
.section-tokenomics.is-visible .tk-petal:nth-child(7)  { animation-delay: 0.34s; }
.section-tokenomics.is-visible .tk-petal:nth-child(8)  { animation-delay: 0.42s; }
.section-tokenomics.is-visible .tk-petal:nth-child(9)  { animation-delay: 0.50s; }
.section-tokenomics.is-visible .tk-petal:nth-child(10) { animation-delay: 0.58s; }
@keyframes petal-in {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

.tk-supply {
  position: absolute;
  bottom: 6px; left: 50%; transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}
.tk-supply-num {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: 600; color: var(--text);
  letter-spacing: 0.02em;
}
.tk-supply-lbl {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase;
  margin-top: 2px;
}

/* Legend ============================================================== */
.tk-legend {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.tk-leg-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 14px;
  align-items: stretch;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, opacity 0.2s;
}
.tk-leg-item:hover,
.tk-leg-item.is-on { transform: translateX(2px); border-color: var(--c); }
.tk-leg-item.is-dim { opacity: 0.35; }
.tk-leg-swatch {
  background: var(--c);
  border-radius: 3px;
  box-shadow: 0 0 14px -2px var(--c);
}
.tk-leg-body { display: flex; flex-direction: column; gap: 3px; }
.tk-leg-top {
  display: flex; justify-content: space-between; align-items: baseline;
}
.tk-leg-label { font-size: 13px; color: var(--text); font-weight: 600; }
.tk-leg-pct {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px; font-weight: 700;
  color: var(--c);
}
.tk-leg-amt { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text); }
.tk-leg-note { font-size: 10.5px; color: var(--muted); letter-spacing: 0.02em; }

/* Linear bar (secondary data view) ==================================== */
.tokenomics-bar {
  display: flex; height: 12px; border-radius: 6px; overflow: hidden;
  margin: 8px 0 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.tk-bar-seg {
  transition: flex 0.3s ease, filter 0.25s;
}
.tk-bar-seg:hover,
.tk-bar-seg.is-on { filter: brightness(1.25); }
.tk-bar-seg.is-dim { filter: brightness(0.5) saturate(0.6); }

/* Detail cards under the bar ========================================= */
.tokenomics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 28px;
}
.tk-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px 10px;
  position: relative;
  transition: transform 0.2s, border-color 0.2s, opacity 0.2s;
}
.tk-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--c);
  border-radius: 8px 0 0 8px;
}
.tk-card:hover,
.tk-card.is-on { transform: translateY(-2px); border-color: var(--c); }
.tk-card.is-dim { opacity: 0.35; }
.tk-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.tk-card-pct {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px; font-weight: 700; color: var(--c);
}
.tk-card-name {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.tk-card-amt { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text); margin-bottom: 2px; }
.tk-card-note { font-size: 10.5px; color: var(--muted); line-height: 1.4; }

/* Foot context strip ================================================== */
.tokenomics-foot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted); line-height: 1.5;
}
.tokenomics-foot b { color: var(--text); }

/* === Polished roadmap timeline ======================================= */
.phase-list.pl-v2 {
  list-style: none;
  margin: 32px 0 36px;
  padding: 0;
  position: relative;
}
/* The continuous vertical rail behind all phases */
.phase-list.pl-v2::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg,
    var(--mint) 0%,
    var(--mint) 14%,        /* done section */
    var(--cyan) 14%,
    var(--cyan) 28%,        /* in-flight section */
    var(--line) 28%,
    var(--line) 86%,
    var(--coral) 86%,
    var(--coral) 100%       /* mainnet tip */
  );
  border-radius: 1px;
}
.phase-list.pl-v2 .phase {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 18px 0 22px 0;
  border-bottom: 1px solid var(--line);
}
.phase-list.pl-v2 .phase:last-child { border-bottom: 0; }
.phase-list.pl-v2 .phase-rail {
  position: relative;
  z-index: 1;
  display: flex; justify-content: center; align-items: flex-start;
}
.phase-list.pl-v2 .phase-num {
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: 50%;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: 13px; color: var(--muted);
  transition: all 0.25s;
}
.phase-list.pl-v2 .phase.phase-done    .phase-num { border-color: var(--mint);  color: var(--mint);  box-shadow: 0 0 0 4px rgba(124,255,176,0.08); }
.phase-list.pl-v2 .phase.phase-flight  .phase-num { border-color: var(--cyan);  color: var(--cyan);  box-shadow: 0 0 0 4px rgba(109,212,240,0.10); animation: livepulse 2s infinite; }
.phase-list.pl-v2 .phase.phase-mainnet .phase-num { border-color: var(--coral); color: var(--coral); box-shadow: 0 0 0 4px rgba(255,110,154,0.10); }

.phase-list.pl-v2 .phase-body {
  padding-bottom: 4px;
}
.phase-list.pl-v2 .phase-meta {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 6px;
}
.phase-list.pl-v2 .phase-month {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.phase-list.pl-v2 .phase-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px;
  background: rgba(255,255,255,0.04); color: var(--muted);
  border: 1px solid var(--line);
}
.phase-list.pl-v2 .phase.phase-done    .phase-status { color: var(--mint);  border-color: rgba(124,255,176,0.3); }
.phase-list.pl-v2 .phase.phase-flight  .phase-status { color: var(--cyan);  border-color: rgba(109,212,240,0.3); background: rgba(109,212,240,0.05); }
.phase-list.pl-v2 .phase.phase-mainnet .phase-status { color: var(--coral); border-color: rgba(255,110,154,0.4); background: rgba(255,110,154,0.06); }

.phase-list.pl-v2 .phase-body h4 {
  margin: 0 0 6px;
  font-size: 17px; font-family: 'Space Grotesk', sans-serif; color: var(--text);
  font-weight: 600;
}
.phase-list.pl-v2 .phase-body p {
  margin: 0;
  font-size: 13px; line-height: 1.55; color: #b6bdcb;
  max-width: 680px;
}

/* The big roadmap progress strip — clean it up */
.roadmap-strip {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}
@media (max-width: 600px) { .roadmap-strip { grid-template-columns: 1fr; } }
.rm-bar {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  overflow: hidden;
}
.rm-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--mint), var(--cyan));
  width: 0%;
  transition: width 1.2s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 0 10px rgba(124,255,176,0.5);
}
.rm-stats {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--muted); letter-spacing: 0.05em;
}

/* === Site layout fixes (v5 build) ===================================== */
/* The live-ticker is fixed at top:0 (z-200, ~38px tall).
   The site-header was at top:0 too which hid it behind the ticker.
   Push the header down below the ticker, then add body padding so
   the hero text doesn't slide under the header. */
.site-header { top: 38px !important; }
body[data-build="v5"] { padding-top: 38px; }
body[data-build="v5"] .hero { padding-top: 64px; min-height: auto; }
body[data-build="v5"] .hero-text-block { padding: 90px 0 32px; }

/* Push the hero canvas to actually sit BELOW the hero text block */
body[data-build="v5"] .hero-v4 {
  height: clamp(280px, 32vh, 380px);
}
: 38px !important; }
body[data-build="v5"] { padding-top: 38px; }
body[data-build="v5"] .hero { padding-top: 64px; min-height: auto; }
body[data-build="v5"] .hero-text-block { padding: 90px 0 32px; }
body[data-build="v5"] .hero-v4 { height: clamp(280px, 32vh, 380px); }