body {
      background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--wb-accent) 14%, transparent), transparent 34%),
        linear-gradient(180deg, var(--wb-bg) 0%, var(--wb-surface) 100%);
    }

    .wb-ecosystem-hero {
      padding: var(--wb-s16) 0 var(--wb-s12);
    }

    .wb-ecosystem-hero-grid,
    .wb-ecosystem-split,
    .wb-ecosystem-card-grid,
    .wb-ecosystem-link-grid,
    .wb-ecosystem-flow {
      display: grid;
      gap: var(--wb-s6);
    }

    .wb-ecosystem-hero-grid,
    .wb-ecosystem-split {
      grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr);
      align-items: start;
    }

    .wb-ecosystem-signal {
      display: inline-flex;
      align-items: center;
      gap: var(--wb-s2);
      min-height: 2rem;
      padding: 0 var(--wb-s3);
      border: 1px solid var(--wb-accent-border);
      background: var(--wb-accent-softer);
      color: var(--wb-accent-text);
      font-size: 0.8rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .wb-ecosystem-title {
      margin: var(--wb-s5) 0 var(--wb-s4);
      max-width: 14ch;
      font-size: clamp(2.8rem, 6vw, 5rem);
      line-height: 0.95;
      letter-spacing: -0.05em;
    }

    .wb-ecosystem-lead {
      margin: 0;
      max-width: 42rem;
      color: var(--wb-muted);
      font-size: clamp(1.05rem, 2vw, 1.28rem);
      line-height: 1.75;
    }

    .wb-ecosystem-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--wb-s3);
      margin-top: var(--wb-s7);
    }

    .wb-ecosystem-panel,
    .wb-ecosystem-card,
    .wb-ecosystem-link,
    .wb-ecosystem-band {
      border: 1px solid var(--wb-border);
      background: color-mix(in srgb, var(--wb-surface) 92%, white);
    }

    .wb-ecosystem-panel {
      padding: var(--wb-s5);
    }

    .wb-ecosystem-panel h2,
    .wb-ecosystem-card h2,
    .wb-ecosystem-card h3,
    .wb-ecosystem-link h3,
    .wb-ecosystem-band h2 {
      margin: 0 0 var(--wb-s3);
      letter-spacing: -0.03em;
    }

    .wb-ecosystem-panel p,
    .wb-ecosystem-card p,
    .wb-ecosystem-link p,
    .wb-ecosystem-band p,
    .wb-ecosystem-meta,
    .wb-ecosystem-list {
      margin: 0;
      color: var(--wb-muted);
      line-height: 1.7;
    }

    .wb-ecosystem-card-grid,
    .wb-ecosystem-link-grid,
    .wb-ecosystem-flow {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wb-ecosystem-card,
    .wb-ecosystem-link {
      padding: var(--wb-s5);
    }

    .wb-ecosystem-kicker {
      display: block;
      margin-bottom: var(--wb-s3);
      color: var(--wb-accent-text);
      font-family: var(--wb-font-mono);
      font-size: 0.82rem;
    }

    .wb-ecosystem-link {
      color: inherit;
      text-decoration: none;
      transition: transform var(--wb-t), border-color var(--wb-t), background var(--wb-t);
    }

    .wb-ecosystem-link:hover {
      transform: translateY(-2px);
      border-color: var(--wb-accent-border);
      background: color-mix(in srgb, var(--wb-accent-softer) 35%, var(--wb-surface));
    }

    .wb-ecosystem-link-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--wb-s3);
      margin-bottom: var(--wb-s2);
    }

    .wb-ecosystem-arrow {
      color: var(--wb-accent-text);
      font-size: 1.1rem;
    }

    .wb-ecosystem-band {
      padding: var(--wb-s6);
    }

    .wb-ecosystem-list,
    .wb-ecosystem-stat-list {
      list-style: none;
      padding: 0;
    }

    .wb-ecosystem-list {
      margin: var(--wb-s4) 0 0;
    }

    .wb-ecosystem-list li + li,
    .wb-ecosystem-stat-list li + li {
      margin-top: var(--wb-s2);
      padding-top: var(--wb-s2);
      border-top: 1px solid var(--wb-border);
    }

    .wb-ecosystem-stat-list {
      margin: var(--wb-s4) 0 0;
    }

    .wb-ecosystem-stat-label {
      display: block;
      color: var(--wb-text);
      font-size: 0.86rem;
      margin-bottom: 2px;
    }

    .wb-ecosystem-quiet {
      color: var(--wb-muted);
    }

    .wb-ecosystem-pills {
      display: flex;
      flex-wrap: wrap;
      gap: var(--wb-s2);
      margin: var(--wb-s4) 0 0;
    }

    .wb-ecosystem-pill {
      display: inline-flex;
      align-items: center;
      min-height: 2rem;
      padding: 0 var(--wb-s3);
      border: 1px solid var(--wb-border);
      background: var(--wb-surface-2);
      color: var(--wb-text);
      font-size: 0.85rem;
    }

    .wb-ecosystem-flow-step {
      padding: var(--wb-s5);
      border: 1px solid var(--wb-border);
      background: var(--wb-surface);
    }

    .wb-ecosystem-flow-step strong {
      display: block;
      margin-bottom: var(--wb-s2);
      color: var(--wb-text);
      letter-spacing: -0.02em;
    }

    .wb-ecosystem-mini-note {
      margin-top: var(--wb-s4);
      font-size: 0.9rem;
      color: var(--wb-muted);
    }

    @media (max-width: 980px) {
      .wb-ecosystem-hero-grid,
      .wb-ecosystem-split,
      .wb-ecosystem-card-grid,
      .wb-ecosystem-link-grid,
      .wb-ecosystem-flow {
        grid-template-columns: 1fr;
      }

      .wb-ecosystem-title {
        max-width: none;
      }
    }

    @media (max-width: 720px) {
      .wb-ecosystem-hero {
        padding: var(--wb-s12) 0 var(--wb-s10);
      }

      .wb-ecosystem-title {
        font-size: clamp(2.2rem, 12vw, 3.3rem);
      }
    }