/* ════════════════════════════════════════════════════════════════════════
   MARION CHAIN — V4 layout overlay (polish pass 2)
   - Live ticker fixed at top
   - Hero canvas tightened, ALL hero text moves below it (closer now)
   - "ACTIVE" status everywhere
   - Design cards: text-only, color-keyed left rule + eyebrow
   - Tighter mobile rhythm
   ═══════════════════════════════════════════════════════════════════════ */

body[data-layout="v4"] { padding-top: 38px; }

/* ───── Hero canvas ───── */
body[data-layout="v4"] .hero-v4 {
  position: relative;
  height: clamp(240px, 28vh, 320px);
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
body[data-layout="v4"] .hero-v4 canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ───── Hero text block (sits closer to the canvas now) ───── */
body[data-layout="v4"] .hero-text-block {
  /* V4: hero text block now sits ABOVE the constellation. Tight padding
     above (header sits on top of it), generous below (lets the headline
     breathe before the canvas takes over). No bottom border — the canvas
     section has its own. */
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(124,255,176,0.06), transparent 70%),
    var(--bg, #07080d);
  padding: 36px 0 28px;
}
body[data-layout="v4"] .hero-v4 {
  /* The canvas now sits BELOW the headline — give it a top divider too. */
  border-top: 1px solid rgba(255,255,255,0.06);
}
body[data-layout="v4"] .hero-content-v4 {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}
body[data-layout="v4"] .hero-content-v4 .hero-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
}
body[data-layout="v4"] .hero-content-v4 .hero-meta {
  justify-content: center;
  margin-top: 24px;
  flex-wrap: wrap;
}
body[data-layout="v4"] .hero-content-v4 .scroll-cue {
  display: inline-block;
  margin-top: 28px;
  position: static;
  transform: none;
}

/* ───── Status badge always green ───── */
body[data-layout="v4"] .status-dot.live,
body[data-layout="v4"] .status-dot.sim {
  background: #7cffb0;
  box-shadow: 0 0 8px rgba(124, 255, 176, 0.65);
  animation: v4-pulse 1.6s ease-in-out infinite;
}
body[data-layout="v4"] .hc.tr #orbit-mode {
  color: #7cffb0;
  font-weight: 600;
  letter-spacing: 0.2em;
}
@keyframes v4-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

/* ═════════════════════════════════════════════════════════════════════════
   Design / value-prop section — ICON-FREE polished cards
   ═══════════════════════════════════════════════════════════════════════ */
.section-design { padding: 88px 0 56px; }
.section-design .design-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 40px;
}

/* Belt-and-suspenders: even if anything ever leaks an SVG inside, cap it. */
.section-design .design-grid svg,
.section-design .design-card svg { display: none !important; }

.section-design .design-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0)) padding-box,
    linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)) border-box;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 28px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Color-accent left rule — drawn via a pseudo so it never breaks card width */
.section-design .design-card::before {
  content: '';
  position: absolute;
  top: 14px; bottom: 14px; left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent, #7cffb0);
  box-shadow: 0 0 16px var(--accent, rgba(124,255,176,0.5));
}
.section-design .design-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.40);
}
.section-design .design-card--mint   { --accent: #7cffb0; }
.section-design .design-card--cyan   { --accent: #6dd4f0; }
.section-design .design-card--violet { --accent: #b89aff; }

.section-design .design-card--mint:hover   { border-color: rgba(124, 255, 176, 0.32); }
.section-design .design-card--cyan:hover   { border-color: rgba(109, 212, 240, 0.32); }
.section-design .design-card--violet:hover { border-color: rgba(184, 154, 255, 0.32); }

.section-design .design-eyebrow {
  align-self: flex-start;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent, #7cffb0);
  background: rgba(255,255,255,0.04);
  border: 1px solid currentColor;
  padding: 3px 8px;
  border-radius: 3px;
  opacity: 0.85;
}
.section-design .design-card h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: #e8edf2;
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.section-design .design-card p {
  color: #a8b0c2;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 880px) {
  .section-design { padding: 56px 0 40px; }
  .section-design .design-grid { grid-template-columns: 1fr; gap: 16px; }
  .section-design .design-card { padding: 22px 22px 24px; }
}

/* ───── Phase list (roadmap) ───── */
.phase-list {
  list-style: none;
  margin: 28px 0 36px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.phase {
  display: grid;
  grid-template-columns: 56px 96px 1fr;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.phase:hover { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)); }
.phase.phase-done   { border-left-color: #7cffb0; }
.phase.phase-flight { border-left-color: #ffb86b; }
.phase .phase-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  color: #7cffb0;
}
.phase .phase-month {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #6a7283;
  text-transform: uppercase;
}
.phase .phase-body h4 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #e8edf2;
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}
.phase .phase-body p {
  margin: 0;
  font-size: 13px;
  color: #a8b0c2;
  line-height: 1.55;
}
@media (max-width: 720px) {
  .phase { grid-template-columns: 48px 1fr; row-gap: 6px; padding: 14px 16px; }
  .phase .phase-month { grid-column: 2; }
  .phase .phase-body { grid-column: 1 / -1; }
}

/* ───── About: honest paragraph callout ───── */
.about-honest {
  border-left: 3px solid #7cffb0;
  background: rgba(124,255,176,0.04);
  padding: 14px 16px;
  border-radius: 6px;
  font-size: 13.5px;
  color: #c8d0dc;
  line-height: 1.6;
}

/* ───── Live ticker bar ───── */
.live-ticker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: linear-gradient(180deg, rgba(7,8,13,0.96) 0%, rgba(7,8,13,0.86) 100%);
  border-bottom: 1px solid rgba(124, 255, 176, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.live-ticker-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: #e8edf2;
}
.live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7cffb0;
  box-shadow: 0 0 8px rgba(124, 255, 176, 0.7);
  animation: v4-pulse 1.6s ease-in-out infinite;
}
.live-label {
  font-weight: 600;
  letter-spacing: 0.2em;
  color: #7cffb0;
}
.live-rule {
  flex: 0 0 auto;
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.12);
}
.live-track {
  flex: 1 1 auto;
  position: relative;
  height: 22px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.live-row {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  animation: v4-row-fade 0.4s ease-out;
}
.live-row-tag {
  font-weight: 600;
  letter-spacing: 0.16em;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  color: #a8b0c2;
  font-size: 10px;
}
.live-row-tag.ship { background: rgba(124, 255, 176, 0.12); color: #7cffb0; }
.live-row-tag.take { background: rgba(109, 212, 240, 0.12); color: #6dd4f0; }
.live-row-tag.queue { background: rgba(184, 154, 255, 0.12); color: #b89aff; }
.live-row-msg { color: #e8edf2; font-size: 11px; }
.live-row-meta { color: #6a7283; font-size: 10px; margin-left: 4px; }
@keyframes v4-row-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
  .live-ticker-inner { padding: 8px 14px; }
  .live-row-meta { display: none; }
  body[data-layout="v4"] .hero-v4 { height: clamp(200px, 26vh, 260px); }
  body[data-layout="v4"] .hero-text-block { padding: 24px 0 20px; }
}

/* === Revenue & Audit sections (added v5) ============================== */
.section-revenue { padding: 96px 0 64px; }
.section-audit   { padding: 64px 0 96px; }

.revenue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 36px;
}
.revenue-card {
  background: rgba(12, 15, 21, 0.6);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 22px 22px 20px;
  position: relative;
  overflow: hidden;
}
.revenue-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--mint, #7cffb0);
}
.revenue-card--mint::before   { background: #7cffb0; }
.revenue-card--coral::before  { background: #ff6e9a; }
.revenue-card--cyan::before   { background: #6dd4f0; }
.revenue-card--violet::before { background: #b89aff; }
.revenue-card--amber::before  { background: #ffb86b; }
.revenue-tag {
  display: inline-block;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #8a93a3; margin-bottom: 8px;
}
.revenue-card h3 {
  font-size: 15px; margin: 0 0 8px; color: #e8edf3; line-height: 1.3;
}
.revenue-card p { font-size: 13px; color: #b6bdcb; line-height: 1.5; margin: 0; }

.audit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 36px;
}
.audit-card {
  background: rgba(12, 15, 21, 0.6);
  border: 1px solid rgba(255,107,122,0.18);
  border-radius: 12px;
  padding: 22px 22px 18px;
}
.audit-card h3 {
  font-size: 14px; margin: 0 0 12px; color: #ff6b7a;
  letter-spacing: 0.04em; 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;
}

/* === Live metrics strip (added v5) ==================================== */
.live-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 24px auto 0;
  max-width: 920px;
  padding: 0 20px;
}
.metric {
  background: rgba(12, 15, 21, 0.55);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}
.metric .v {
  display: block;
  font-size: 24px; font-weight: 700; color: #e8edf3;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.metric .l {
  display: block; font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8a93a3; margin-top: 4px;
}