:root {
  color-scheme: dark;
  --void: #08110e;
  --void-2: #0e1a16;
  --ink: #e7efe8;
  --muted: #8aa094;
  --line: rgba(231, 239, 232, 0.12);
  --mint: #7dcfb6;
  --amber: #e3b15a;
  --glass: rgba(231, 239, 232, 0.07);
  --glass-strong: rgba(231, 239, 232, 0.12);
  --display: "Syne", "Avenir Next", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(90rem 40rem at 10% -10%, rgba(125, 207, 182, 0.12), transparent 50%),
    radial-gradient(70rem 36rem at 110% 0%, rgba(227, 177, 90, 0.08), transparent 42%),
    var(--void);
  color: var(--ink);
  font-family: var(--mono);
}

body { padding: 0 0 80px; }

.skip { position: absolute; left: -999px; }

.glass {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.mast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  gap: 16px 24px;
  align-items: center;
  padding: 14px clamp(18px, 3vw, 40px);
  overflow-x: auto;
  overscroll-behavior: contain;
}

.mark { color: inherit; text-decoration: none; }
.mark span { display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.mark strong { display: block; margin-top: 2px; font-family: var(--display); font-size: 20px; font-weight: 700; }

.rate {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
}

.rate b {
  font-family: var(--display);
  font-size: 28px;
  line-height: 1;
  color: var(--mint);
}

.rate small { color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-size: 10px; }

.stamp {
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--amber);
  color: var(--amber);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.window { display: grid; gap: 4px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.window select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
}

.rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px clamp(18px, 3vw, 40px) 0;
}

.rail a {
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rail a:hover, .rail a.is-on { color: var(--ink); background: var(--glass-strong); }

.pace {
  display: grid;
  gap: 6px;
  margin: 16px clamp(18px, 3vw, 40px) 0;
  padding: 12px 16px;
  border-radius: 16px;
}

.pace b { color: var(--mint); }
.pace .track { height: 4px; background: rgba(231, 239, 232, 0.08); border-radius: 99px; }
.pace .track > i { display: block; height: 100%; background: var(--mint); border-radius: inherit; max-width: 100%; }

.wrap { padding: 28px clamp(18px, 3vw, 40px) 0; }

.hero { display: grid; gap: 10px; margin-bottom: 22px; }
.kicker { margin: 0; color: var(--muted); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.hero h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(44px, 7vw, 84px);
  line-height: 0.88;
}
.deck, .note { margin: 0; max-width: 44rem; color: var(--muted); font-size: 13px; line-height: 1.6; }
.note { margin: 10px 0 0; }

.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.kpis article, .leaders article, .growth-grid article {
  padding: 16px 16px 14px;
  border-radius: 16px;
  background: var(--void-2);
  border: 1px solid var(--line);
}

.kpis span, .kpis small, .leaders span, .leaders small, .growth-grid span, .growth-grid small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kpis strong, .leaders strong, .growth-grid strong {
  display: block;
  margin: 10px 0 8px;
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 48px);
  line-height: 0.9;
}

.kpis .is-lead, .leaders .is-lead, .row.is-top {
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-color: rgba(125, 207, 182, 0.35);
}

.section { margin-top: 48px; }
.section h2 { margin: 0 0 6px; font-family: var(--display); font-size: 28px; }
.section p { margin: 0 0 16px; color: var(--muted); font-size: 12px; }

.leaders { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.split { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 28px; }

ol, ul { margin: 0; padding: 0; list-style: none; }

.row {
  display: grid;
  gap: 6px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

#destList .row { grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; }
#channelList .row, #doorList .row { grid-template-columns: 88px minmax(0, 1fr) auto; align-items: start; }
#eventList .row { grid-template-columns: 150px 88px 1fr auto; align-items: baseline; font-size: 12px; }
#growthActions .row { grid-template-columns: 180px 1fr; }

b.title { font-family: var(--display); font-size: 20px; font-weight: 600; }
.meta { color: var(--muted); font-size: 11px; }
.badge {
  justify-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(125, 207, 182, 0.16);
  color: var(--mint);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bar { height: 3px; background: rgba(231, 239, 232, 0.08); border-radius: 99px; }
.bar > i { display: block; height: 100%; background: var(--mint); border-radius: inherit; }
.copy {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.stage { color: var(--mint); text-transform: uppercase; letter-spacing: 0.08em; }
.stage.is-click { color: var(--amber); }
.growth-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.kpis article, .leaders article, .row { animation: rise 520ms ease both; }

@media (max-width: 900px) {
  .mast, .kpis, .leaders, .split, .growth-grid, #destList .row, #channelList .row, #doorList .row, #eventList .row { grid-template-columns: 1fr; }
}