/* Ecosystem landing pages: each system gets its own display font, colours
   and background pattern. Fonts are free Google Fonts; no trademarked
   typefaces or logos are used. */
.eco-hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 110px) 0 clamp(48px, 6vw, 80px); background: var(--eco-bg, var(--teal)); color: var(--eco-fg, var(--carbon)); }
.eco-hero::before { content: ''; position: absolute; inset: 0; background-image: var(--eco-pattern); background-size: var(--eco-size, 42px 42px); opacity: 0.55; pointer-events: none; }
.eco-hero .shell { position: relative; }
.eco-hero .crumbs, .eco-hero .crumbs a { color: inherit; opacity: 0.8; }
.eco-hero .lede { color: inherit; opacity: 0.85; max-width: 62ch; }
.eco-wordmark { font-family: var(--eco-font, var(--font)); font-weight: 800; font-size: clamp(56px, 11vw, 150px); line-height: 0.92; letter-spacing: -0.02em; margin: 14px 0 6px; }
.eco-by-line { font: 500 15px/1 var(--font-ui); opacity: 0.8; margin-bottom: 18px; }
.eco-hero .eco-status { display: inline-block; font: 600 11px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; background: var(--eco-fg, var(--carbon)); color: var(--eco-bg, var(--teal)); padding: 6px 9px; border-radius: 6px; }
.eco-hero .btn-dark { --bg: var(--eco-fg, var(--carbon)); --fg: var(--eco-bg, var(--eggshell)); }
.eco-hero .btn-ghost { color: inherit; }
.eco-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.eco-layout h2 { font-family: var(--eco-font, var(--font)); margin: 0 0 12px; }
.eco-how { font-size: 18px; line-height: 1.6; margin-bottom: 30px; max-width: 65ch; }
.eco-needs { display: grid; gap: 10px; padding-left: 22px; }
.eco-needs li::marker { color: var(--eco-accent, var(--teal)); }
.eco-links { list-style: none; padding: 0; display: grid; gap: 10px; }
.eco-links a { color: var(--eco-accent, var(--teal)); }
.eco-community { padding-top: 0; }
.eco-note { color: var(--muted-dark); font: 400 13px/1.5 var(--font-ui); margin-top: 26px; }
@media (max-width: 860px) { .eco-layout { grid-template-columns: 1fr; } }

/* Fonts */
.eco-font-space-grotesk { --eco-font: 'Space Grotesk', var(--font); }
.eco-font-noto-sans { --eco-font: 'Noto Sans', var(--font); }
.eco-font-rajdhani { --eco-font: 'Rajdhani', var(--font); }
.eco-font-ibm-plex-sans { --eco-font: 'IBM Plex Sans', var(--font); }
.eco-font-exo-2 { --eco-font: 'Exo 2', var(--font); }
.eco-font-nunito { --eco-font: 'Nunito', var(--font); }
.eco-font-oswald { --eco-font: 'Oswald', var(--font); }
.eco-font-chakra-petch { --eco-font: 'Chakra Petch', var(--font); }
.eco-font-poppins { --eco-font: 'Poppins', var(--font); }

/* Themes */
.eco-theme-grid { --eco-bg: #9ec4b5; --eco-fg: #1e2124; --eco-accent: #9ec4b5;
  --eco-pattern: linear-gradient(#1e212422 2px, transparent 2px), linear-gradient(90deg, #1e212422 2px, transparent 2px); --eco-size: 42px 42px; }
/* Pegboard: birch board with slotted holes. */
.eco-theme-pegboard { --eco-bg: #e9dcc3; --eco-fg: #1f2a33; --eco-accent: #d8a13a;
  --eco-pattern: radial-gradient(ellipse 3px 8px at 50% 50%, #1f2a3355 97%, transparent 100%); --eco-size: 40px 40px; }
.eco-theme-pegboard .eco-wordmark { letter-spacing: -0.03em; }
.eco-theme-octagon { --eco-bg: #20262c; --eco-fg: #f3f5f6; --eco-accent: #ff8a3d;
  --eco-pattern: radial-gradient(circle at 50% 50%, transparent 9px, #ff8a3d33 10px, #ff8a3d33 11px, transparent 12px); --eco-size: 25px 25px; }
.eco-theme-hex { --eco-bg: #f2c14e; --eco-fg: #2b2118; --eco-accent: #b7791f;
  --eco-pattern: linear-gradient(30deg, #2b211822 12%, transparent 12.5%, transparent 87%, #2b211822 87.5%), linear-gradient(150deg, #2b211822 12%, transparent 12.5%, transparent 87%, #2b211822 87.5%), linear-gradient(90deg, #2b211811 2%, transparent 2.5%, transparent 97%, #2b211811 97.5%); --eco-size: 40px 70px; }
.eco-theme-isogrid { --eco-bg: #2b3036; --eco-fg: #f2f5f3; --eco-accent: #39ff8b;
  --eco-pattern: linear-gradient(60deg, transparent 48.5%, #39ff8b2e 49%, #39ff8b2e 51%, transparent 51.5%), linear-gradient(-60deg, transparent 48.5%, #39ff8b2e 49%, #39ff8b2e 51%, transparent 51.5%), linear-gradient(0deg, transparent 48.5%, #39ff8b22 49%, #39ff8b22 51%, transparent 51.5%); --eco-size: 46px 40px; }
.eco-theme-isogrid .btn-dark { --bg: #39ff8b; --fg: #14171a; }
.eco-theme-channels { --eco-bg: #2d3142; --eco-fg: #f4f4f9; --eco-accent: #7ec8e3;
  --eco-pattern: repeating-linear-gradient(0deg, transparent 0 22px, #7ec8e333 22px 26px, transparent 26px 48px); --eco-size: auto; }
.eco-theme-kerf { --eco-bg: #c79a6b; --eco-fg: #2a1d12; --eco-accent: #e25822;
  --eco-pattern: repeating-linear-gradient(90deg, transparent 0 18px, #e2582255 18px 19px), repeating-linear-gradient(0deg, transparent 0 18px, #2a1d1222 18px 19px); --eco-size: auto; }