/* ME Standard Ecosystem News Hub
   Presentation and authority architecture only. No market facts or signals. */
:root {
  --hub-ink: #02080e;
  --hub-panel: #06121d;
  --hub-panel-2: #081824;
  --hub-paper: #f1efe8;
  --hub-copy: #aab8c1;
  --hub-muted: #708491;
  --hub-blue: #8fcdf4;
  --hub-gold: #c2a36b;
  --hub-line: rgba(185, 207, 222, .12);
  --hub-line-gold: rgba(194, 163, 107, .28);
}

.ecosystem-hub {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 7vw, 104px) 0;
  background:
    radial-gradient(circle at 86% 16%, rgba(105, 163, 199, .07), transparent 28rem),
    linear-gradient(180deg, #030a11 0%, #02080e 100%);
  border-top: 1px solid rgba(194, 163, 107, .12);
  border-bottom: 1px solid rgba(143, 205, 244, .08);
}

.ecosystem-hub::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0 7%, rgba(255,255,255,.012) 7% 7.05%, transparent 7.05% 93%, rgba(255,255,255,.012) 93% 93.05%, transparent 93.05%);
}

.ecosystem-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: clamp(48px, 7vw, 88px);
  align-items: end;
  margin-bottom: 48px;
}
.ecosystem-intro h2 {
  max-width: 760px;
  margin: 0;
  color: var(--hub-paper);
  font-family: var(--mes-serif, Georgia, serif);
  font-size: clamp(38px, 4.7vw, 62px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.036em;
  text-wrap: balance;
}

.ecosystem-intro > div > p:last-child {
  max-width: 780px;
  margin: 22px 0 0;
  color: var(--hub-copy);
  font-size: 15px;
  line-height: 1.78;
}

.ecosystem-charter {
  padding: 22px 0 4px 28px;
  border-left: 1px solid var(--hub-line-gold);
}

.ecosystem-charter > span,
.ecosystem-node > span,
.ecosystem-contracts span {
  color: #7f94a1;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.ecosystem-charter strong {
  display: block;
  margin-top: 13px;
  color: #d9d5ca;
  font-family: var(--mes-serif, Georgia, serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.ecosystem-charter p {
  margin: 12px 0 0;
  color: #7e909b;
  font-size: 11px;
  line-height: 1.65;
}

.ecosystem-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--hub-line);
  border-top: 1px solid var(--hub-line-gold);
  border-bottom: 1px solid var(--hub-line);
}

.ecosystem-node {
  position: relative;
  min-height: 260px;
  padding: 28px 25px 24px;
  background: linear-gradient(180deg, rgba(8,24,36,.96), rgba(5,16,25,.98));
}
.ecosystem-node::after {
  content: "";
  position: absolute;
  left: 25px;
  right: 25px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(143,205,244,.28), transparent);
  opacity: .55;
}

.ecosystem-node-primary {
  background:
    linear-gradient(180deg, rgba(19,33,43,.98), rgba(7,19,29,.99));
}

.ecosystem-node-primary::after {
  background: linear-gradient(90deg, rgba(194,163,107,.68), rgba(143,205,244,.22), transparent);
  opacity: 1;
}

.ecosystem-node h3 {
  margin: 58px 0 12px;
  color: #eceae4;
  font-family: var(--mes-serif, Georgia, serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.02em;
}

.ecosystem-node p {
  margin: 0;
  color: #92a4af;
  font-size: 12px;
  line-height: 1.72;
}
.ecosystem-node-meta {
  position: absolute;
  left: 25px;
  right: 25px;
  bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 13px;
  border-top: 1px solid rgba(185,207,222,.08);
}

.ecosystem-node-meta span {
  color: #5f7481;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;
}

.ecosystem-node-meta strong {
  color: #a7bac5;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-align: right;
}

.ecosystem-node-primary .ecosystem-node-meta strong {
  color: #c7ad79;
}
.ecosystem-contracts {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 20px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(194,163,107,.12);
}

.ecosystem-contracts span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: #738894;
}

.ecosystem-contracts span::before {
  content: "";
  width: 11px;
  height: 1px;
  margin-right: 8px;
  background: rgba(143,205,244,.42);
}

.ecosystem-contracts span:first-child::before,
.ecosystem-contracts span:nth-child(2)::before {
  background: rgba(194,163,107,.58);
}

.ecosystem-authority-note {
  max-width: 920px;
  margin: 23px 0 0;
  color: #647986;
  font-size: 10px;
  line-height: 1.7;
}
@media (max-width: 1050px) {
  .ecosystem-flow { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 780px) {
  .ecosystem-hub { padding: 62px 0 72px; }
  .ecosystem-intro { grid-template-columns: 1fr; gap: 28px; margin-bottom: 34px; }
  .ecosystem-charter { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--hub-line-gold); }
  .ecosystem-flow { grid-template-columns: 1fr; }
  .ecosystem-node { min-height: 235px; }
}

@media (max-width: 520px) {
  .ecosystem-intro h2 { font-size: clamp(34px, 11vw, 46px); }
  .ecosystem-node { min-height: 225px; padding: 24px 20px 22px; }
  .ecosystem-node h3 { margin-top: 48px; font-size: 24px; }
  .ecosystem-node-meta { left: 20px; right: 20px; bottom: 20px; }
  .ecosystem-contracts { display: grid; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .ecosystem-hub *, .ecosystem-hub *::before, .ecosystem-hub *::after { transition: none !important; animation: none !important; }
}

@media (prefers-contrast: more) {
  .ecosystem-flow, .ecosystem-node { border-color: rgba(255,255,255,.35); }
  .ecosystem-node p, .ecosystem-authority-note { color: #c4d0d7; }
}

.ecosystem-dispatch {
  margin-top: 34px;
  border-top: 1px solid var(--hub-line-gold);
  border-bottom: 1px solid var(--hub-line);
  background: rgba(4,14,22,.52);
}

.ecosystem-dispatch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 58px;
  padding: 0 22px;
  border-bottom: 1px solid var(--hub-line);
}

.ecosystem-dispatch-head div {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.ecosystem-dispatch-head span,
.ecosystem-dispatch-head strong {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.ecosystem-dispatch-head div > span { color: var(--hub-gold); }
.ecosystem-dispatch-head div > strong { color: #718591; }
.ecosystem-dispatch-head > span { color: #8bb7d1; }

.ecosystem-dispatch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, .5fr);
  min-height: 265px;
}

.ecosystem-dispatch-lead {
  padding: 28px 34px 32px;
  border-right: 1px solid var(--hub-line);
}

.ecosystem-dispatch-lead > span {
  color: #6e8491;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
}

.ecosystem-dispatch-lead h3 {
  max-width: 780px;
  margin: 44px 0 12px;
  color: #eceae4;
  font-family: var(--mes-serif, Georgia, serif);
  font-size: clamp(27px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.ecosystem-dispatch-lead p {
  max-width: 760px;
  margin: 0;
  color: #99aab4;
  font-size: 12px;
  line-height: 1.75;
}

.ecosystem-dispatch-lead a {
  display: inline-block;
  margin-top: 24px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(143,205,244,.28);
  color: #a9d3ec;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
}

.ecosystem-dispatch-meta {
  margin: 0;
  padding: 11px 22px;
}

.ecosystem-dispatch-meta div {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 16px;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid rgba(185,207,222,.08);
}
.ecosystem-dispatch-meta div:last-child { border-bottom: 0; }
.ecosystem-dispatch-meta dt {
  color: #607684;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;
}
.ecosystem-dispatch-meta dd {
  margin: 0;
  color: #b7c4cb;
  font-size: 10px;
  line-height: 1.45;
  text-align: right;
}

.ecosystem-routing {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 14px 22px;
  align-items: center;
  min-height: 54px;
  padding: 0 22px;
  border-top: 1px solid rgba(194,163,107,.10);
}
.ecosystem-routing span { color: #657b88; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.ecosystem-routing strong { color: #c0a46f; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; font-weight: 600; }
.ecosystem-routing p { margin: 0; color: #70838f; font-size: 10px; line-height: 1.55; }

@media (max-width: 780px) {
  .ecosystem-dispatch-head { align-items: flex-start; flex-direction: column; gap: 7px; padding: 16px 18px; }
  .ecosystem-dispatch-head div { align-items: flex-start; flex-direction: column; gap: 5px; }
  .ecosystem-dispatch-grid { grid-template-columns: 1fr; }
  .ecosystem-dispatch-lead { padding: 24px 20px 26px; border-right: 0; border-bottom: 1px solid var(--hub-line); }
  .ecosystem-dispatch-lead h3 { margin-top: 34px; }
  .ecosystem-dispatch-meta { padding: 8px 18px; }
  .ecosystem-routing { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
}

@media (prefers-contrast: more) {
  .ecosystem-dispatch { border-color: rgba(255,255,255,.40); }
  .ecosystem-dispatch-lead p, .ecosystem-routing p { color: #c4d0d7; }
}

/* Final Network identity presentation */
.ecosystem-intro h1 {
  max-width: 760px;
  margin: 0;
  color: var(--hub-paper);
  font-family: var(--mes-serif, Georgia, serif);
  font-size: clamp(38px, 4.7vw, 62px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.036em;
  text-wrap: balance;
}
.ecosystem-network-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 14px;
  padding-top: 6px;
}
.ecosystem-network-heading span { color: var(--hub-gold); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.ecosystem-network-heading p { margin: 0; color: #6f8490; font-size: 10px; }
.ecosystem-flow-network { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ecosystem-flow-network .ecosystem-node { min-height: 430px; padding-top: 22px; }
.ecosystem-brand-media {
  display: grid;
  place-items: center;
  width: 100%;
  height: 116px;
  margin-bottom: 19px;
  overflow: hidden;
  background: #030a10;
  border: 1px solid rgba(185,207,222,.10);
}
.ecosystem-brand-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ecosystem-flow-network .ecosystem-node > span { display: block; }
.ecosystem-flow-network .ecosystem-node h2 {
  margin: 12px 0 10px;
  color: #eceae4;
  font-family: var(--mes-serif, Georgia, serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.02em;
}
.ecosystem-secondary-handoffs {
  margin-top: 18px;
  padding: 17px 20px;
  border: 1px solid rgba(185,207,222,.09);
  background: rgba(6,18,29,.42);
}
.ecosystem-secondary-handoffs strong { color: #9eb1bc; font-size: 9px; letter-spacing: .10em; text-transform: uppercase; }
.ecosystem-secondary-handoffs p { margin: 7px 0 0; max-width: 980px; color: #718590; font-size: 10px; line-height: 1.65; }
@media (max-width: 1050px) {
  .ecosystem-flow-network { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 780px) {
  .ecosystem-network-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .ecosystem-flow-network { grid-template-columns: 1fr; }
  .ecosystem-flow-network .ecosystem-node { min-height: 390px; }
  .ecosystem-brand-media { height: 140px; }
}
@media (max-width: 520px) {
  .ecosystem-intro h1 { font-size: clamp(34px, 11vw, 46px); }
  .ecosystem-flow-network .ecosystem-node { min-height: 382px; }
  .ecosystem-flow-network .ecosystem-node h2 { font-size: 23px; }
}

.ecosystem-flow-network .ecosystem-node {
  display: flex;
  flex-direction: column;
}
.ecosystem-flow-network .ecosystem-node-meta {
  position: static;
  margin-top: auto;
}