/* K9X Ecosystem page (uses styles.css variables) */
.eco h1 { font-size: clamp(28px, 4.2vw, 46px); line-height: 1.12; color: #fff; letter-spacing: -.8px; margin: 6px 0 14px; }
.eco h1 span { color: var(--cyan); }
.eco-hero { padding-top: calc(var(--nav-h) + 48px); background: radial-gradient(800px 360px at 80% 20%, rgba(0,230,255,.08), transparent 70%); }
.eco-start { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1200px; }
.eco-path { display: block; padding: 16px 18px; border: 1px solid var(--border-glow); border-radius: 10px; background: var(--surface); transition: all .2s; }
.eco-path:hover { border-color: var(--cyan); transform: translateY(-2px); }
.eco-path b { display: block; color: #fff; font-size: 15px; }
.eco-path span { color: var(--cyan); font-size: 14px; }
.eco-flow { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px; max-width: 1200px; overflow-x: auto; }
.eco-flow svg { width: 100%; min-width: 760px; height: auto; display: block; }
.eco-flow text { font: 700 15px -apple-system, "Segoe UI", Arial, sans-serif; fill: #fff; text-anchor: middle; }
.eco-flow text.sm { font: 500 12px -apple-system, "Segoe UI", Arial, sans-serif; fill: #94a3b8; }
.eco-flow .st rect { fill: #0f1e2d; stroke: rgba(0,230,255,.55); stroke-width: 1.4; }
.eco-flow .side rect { fill: #0a1521; stroke: rgba(0,230,255,.25); stroke-width: 1.2; }
.eco-flow .gold rect { fill: rgba(212,175,55,.07); stroke: rgba(212,175,55,.6); stroke-width: 1.2; }
.eco-flow .gold text { fill: #f1d98a; } .eco-flow .gold text.sm { fill: #c9b26a; }
.eco-flow .ar path, .eco-flow path.ar2 { stroke: #00E6FF; stroke-width: 1.6; fill: none; }
.eco-flow path.argold { stroke: #d4af37; stroke-width: 1.4; fill: none; stroke-dasharray: 5 4; }
.eco-flow path.fb { stroke: rgba(0,230,255,.45); stroke-width: 1.2; fill: none; stroke-dasharray: 3 4; }
.eco-flow text.fbt { font: 500 11.5px -apple-system, "Segoe UI", Arial, sans-serif; fill: #546880; }
.eco-group { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-sec); margin: 28px 0 12px; }
@media (max-width: 860px) { .eco-start { grid-template-columns: 1fr; } }
.nav-link--active { color: var(--cyan) !important; }