.eco { position: relative; overflow: hidden; background: var(--navy); }
.eco::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 40%, transparent 85%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 40%, transparent 85%);
}
.eco::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 720px 380px at 82% 8%, color-mix(in srgb, var(--brand-primary) 22%, transparent), transparent 60%);
}
.eco .sec-title { color: #fff; }
.eco .sec-sub { color: rgba(255,255,255,.72); }
.eco-rule { position: absolute; left: 0; right: 0; height: 2px; background: var(--brand-gradient-h); opacity: .85; z-index: 2; }
.eco-rule.top { top: 0; }
.eco-rule.bottom { bottom: 0; }

.eco-wrap { position: relative; }
.eco-grid {
  position: relative; display: grid; grid-template-columns: 1.04fr .96fr;
  gap: 40px; align-items: center; margin-top: 14px;
}
@media (max-width: 940px){ .eco-grid { grid-template-columns: 1fr; gap: 26px; } }

.eco-chart {
  position: relative; width: 100%; max-width: 540px; margin-inline: auto; aspect-ratio: 1 / 1;
}
.eco-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eco-line-base { stroke: rgba(255,255,255,.13); stroke-width: .5; fill: none; }
.eco-line-flow {
  stroke-width: .7; fill: none; stroke-linecap: round;
  stroke-dasharray: 1.4 4.2; opacity: .55;
  animation: eco-flow 2.6s linear infinite;
}
.eco-line-flow.dim { opacity: .12; }
.eco-line-flow.hot { opacity: 1; stroke-width: 1.15; stroke-dasharray: 2 3.4; animation-duration: 1.1s; }
@keyframes eco-flow { to { stroke-dashoffset: -22; } }
@media (prefers-reduced-motion: reduce){ .eco-line-flow { animation: none; } }

.eco-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 33%; height: 33%; border-radius: 50%;
  display: grid; place-items: center; text-align: center; padding: 6%;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--brand-primary) 42%, #0a1426), color-mix(in srgb, var(--brand-primary) 12%, #0a1426));
  border: 1px solid color-mix(in srgb, var(--brand-primary) 55%, transparent);
  box-shadow: 0 0 0 6px rgba(255,255,255,.025), 0 0 46px color-mix(in srgb, var(--brand-primary) 40%, transparent);
  z-index: 3;
}
.eco-hub::before {
  content: ""; position: absolute; inset: -8%; border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.16); animation: eco-spin 26s linear infinite;
}
@keyframes eco-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .eco-hub::before { animation: none; } }
.eco-hub i { font-size: clamp(20px, 4vw, 30px); color: #fff; margin-bottom: 4px; }
.eco-hub b { color: #fff; font-family: var(--font-fa); font-size: clamp(11px, 2.1vw, 14px); font-weight: 600; line-height: 1.5; }
.eco-hub span { color: rgba(255,255,255,.62); font-size: clamp(8px, 1.5vw, 10px); margin-top: 2px; }

.eco-node {
  position: absolute; transform: translate(-50%,-50%);
  width: 23%; min-width: 92px; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: transparent; border: 0; cursor: pointer; padding: 0;
  font-family: var(--font-fa); color: #fff;
  transition: transform .28s var(--ease-out);
}
.eco-node .nd-ico {
  width: clamp(46px, 9vw, 62px); height: clamp(46px, 9vw, 62px); border-radius: 16px;
  display: grid; place-items: center; font-size: clamp(22px, 4.4vw, 30px);
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.14);
  color: #fff; backdrop-filter: blur(4px);
  transition: transform .28s var(--ease-out), border-color .28s, box-shadow .28s, background .28s;
}
.eco-node .nd-label {
  font-size: clamp(10.5px, 2vw, 13px); font-weight: 600; text-align: center; line-height: 1.4;
  text-shadow: 0 1px 8px rgba(0,0,0,.5); transition: color .2s;
}
.eco-node .nd-sub {
  font-family: var(--font-mono); direction: ltr; font-size: 9px; letter-spacing: .02em;
  color: rgba(255,255,255,.5); transition: color .2s; text-align: center;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: none;
}
@media (min-width: 600px){ .eco-node .nd-sub { display: block; } }
.eco-node:hover .nd-ico, .eco-node:focus-visible .nd-ico,
.eco-node.active .nd-ico {
  transform: scale(1.12);
  background: var(--nd-accent, var(--brand-primary));
  border-color: color-mix(in srgb, var(--nd-accent, var(--brand-primary)) 70%, #fff);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--nd-accent, var(--brand-primary)) 45%, transparent);
}
.eco-node.active { transform: translate(-50%,-50%) scale(1.05); }
.eco-node.dim { opacity: .4; }
.eco-node:focus-visible { outline: none; }
.eco-node:focus-visible .nd-ico { outline: 2px solid #fff; outline-offset: 3px; }

.eco-panel {
  position: relative; min-height: 360px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px; padding: 32px 30px;
  display: flex; flex-direction: column;
}
.eco-panel-key { animation: eco-fade .38s var(--ease-out); }
@keyframes eco-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.eco-panel .pn-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: 12px; color: rgba(255,255,255,.66); margin-bottom: 16px;
}
.eco-panel .pn-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-primary); }
.eco-panel .pn-eyebrow .badge {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-size: 17px; color: #fff; background: var(--pn-accent, var(--brand-primary));
}
.eco-panel h3 {
  margin: 0 0 12px; color: #fff; font-family: var(--font-fa); font-weight: 600;
  font-size: 23px; line-height: 1.5; letter-spacing: -.01em; text-wrap: balance;
}
.eco-panel .pn-sub-mono {
  font-family: var(--font-mono); direction: ltr; font-size: 12px; letter-spacing: .04em;
  color: var(--pn-accent, var(--brand-primary-200)); margin: 0 0 12px;
}
.eco-panel p.pn-text { margin: 0 0 18px; font-size: 14px; line-height: 1.95; color: rgba(255,255,255,.78); }

.eco-bullets { display: grid; gap: 9px; margin: 0 0 18px; }
.eco-bullets .bl { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.86); }
.eco-bullets .bl i { font-size: 17px; color: var(--pn-accent, var(--brand-primary)); flex: none; margin-top: 1px; }

.eco-outcome {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border-radius: 13px;
  background: color-mix(in srgb, var(--pn-accent, var(--brand-primary)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--pn-accent, var(--brand-primary)) 34%, transparent);
  margin-bottom: 20px;
}
.eco-outcome i { font-size: 19px; color: var(--pn-accent, var(--brand-primary-200)); flex: none; margin-top: 1px; }
.eco-outcome span { font-size: 13px; line-height: 1.7; color: #fff; }
.eco-outcome b { color: #fff; font-weight: 600; }

.eco-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
.eco-chips .chip {
  font-size: 12px; color: rgba(255,255,255,.82); padding: 7px 12px; border-radius: 100px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  display: inline-flex; align-items: center; gap: 7px;
}
.eco-chips .chip i { font-size: 14px; color: var(--brand-primary-200); }

.eco-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.eco .btn-demo {
  position: relative; color: #fff; border: none;
  background: linear-gradient(135deg, var(--brand-primary), #2196F3);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-primary) 30%, transparent);
}
.eco .btn-demo:hover { filter: brightness(1.07); transform: translateY(-1px); }

.eco-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1);
}
.eco-nav button {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
  color: #fff; font-family: var(--font-fa); font-size: 13px; font-weight: 500;
  padding: 9px 15px; border-radius: 11px; transition: background .2s, border-color .2s, transform .2s;
}
.eco-nav button:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.3); transform: translateY(-1px); }
.eco-nav button i { font-size: 16px; }
.eco-nav .pos { font-family: var(--font-mono); direction: ltr; font-size: 12.5px; color: rgba(255,255,255,.6); letter-spacing: .05em; }
.eco-back {
  background: none; border: 0; cursor: pointer; color: rgba(255,255,255,.6);
  font-family: var(--font-fa); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start; margin-bottom: 14px; padding: 0; transition: color .2s;
}
.eco-back:hover { color: #fff; }

.eco-cta {
  position: relative; margin-top: 40px; border-radius: 22px; padding: 30px 34px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--brand-primary) 26%, #0a1426), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
}
.eco-cta .cta-txt h4 { margin: 0 0 6px; color: #fff; font-family: var(--font-fa); font-size: 19px; font-weight: 600; }
.eco-cta .cta-txt p { margin: 0; color: rgba(255,255,255,.72); font-size: 13.5px; line-height: 1.7; max-width: 560px; }
.eco-cta .cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 620px){ .eco-cta { padding: 24px; } .eco-panel { padding: 24px 22px; } }