/* ==========================================================================
   Showpiece sections — Hero · Protection Journey · Insurance + Wealth Ecosystem
   All motion is driven by state classes (.is-ready, .is-active, .is-linked)
   and CSS custom properties set by animations.js. No content lives in JS.
   ========================================================================== */

/* ==========================================================================
   1. FINANCIAL FUTURE INTERACTIVE HERO
   ========================================================================== */
.hero {
  --mx: 0; --my: 0;
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(100vh, 940px);
  display: flex; align-items: center;
  padding: clamp(70px, 9vw, 120px) 0 clamp(80px, 9vw, 130px);
  color: rgba(255,255,255,.8);
  background:
    radial-gradient(1200px 700px at 78% 40%, rgba(46,98,184,.35), transparent 60%),
    linear-gradient(165deg, var(--c-primary-950) 0%, var(--c-primary-900) 45%, var(--c-primary) 100%);
}
.hero::before { /* fine grid */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%);
}
.hero::after { /* horizon glow */
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -1px; height: 180px; z-index: -1;
  background: linear-gradient(to top, rgba(4,17,39,.9), transparent);
}
.hero-orb { position: absolute; border-radius: 50%; filter: blur(70px); z-index: -1; pointer-events: none; animation: orb-drift 18s ease-in-out infinite alternate; }
.hero-orb--gold { width: 420px; height: 420px; right: 6%; top: -80px; background: rgba(201,162,39,.35); }
.hero-orb--green { width: 520px; height: 520px; left: -160px; bottom: -200px; background: rgba(14,148,100,.32); animation-delay: -6s; }
.hero-orb--blue { width: 360px; height: 360px; right: 30%; bottom: -120px; background: rgba(46,98,184,.45); animation-delay: -12s; }
@keyframes orb-drift { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(40px,-30px,0) scale(1.12); } }

.hero__inner { flex-direction: row; flex-wrap: wrap; align-items: center; gap: clamp(40px, 5vw, 80px); }
.hero__copy { flex: 1 1 520px; display: flex; flex-direction: column; gap: 26px; }
.hero__visual { flex: 1 1 440px; position: relative; min-height: 560px; display: flex; align-items: center; justify-content: center; }

.hero-badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 8px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px);
  font-size: .88rem; font-weight: 600; color: var(--c-white);
}
.hero-badge__seal { padding: 4px 10px; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--c-gold-300), var(--c-gold)); color: var(--c-primary-900); font-weight: 800; font-size: .78rem; letter-spacing: .04em; }

.hero-headline { font-size: var(--fs-display); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; color: var(--c-white); }
.hero-line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-line > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.hero-line:nth-child(2) > span { transition-delay: .12s; }
.hero-line:nth-child(3) > span { transition-delay: .24s; }
.hero.is-ready .hero-line > span { transform: none; }

.hero-subtitle { font-size: var(--fs-lead); line-height: 1.65; color: rgba(255,255,255,.78); max-width: 560px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 10px; }
.hero-stat { flex: 1 1 140px; padding: 16px 18px; border-radius: var(--r-md); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 4px; }
.hero-stat__num { font-size: 2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--c-white); display: flex; align-items: baseline; }
.hero-stat__num .suffix { color: var(--c-gold-300); }
.hero-stat__label { font-size: .84rem; color: rgba(255,255,255,.7); }

/* Entrance choreography (class-driven) */
.hero-anim { opacity: 0; transform: translateY(30px); filter: blur(6px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }
.hero.is-ready .hero-anim { opacity: 1; transform: none; filter: none; }
.hero-anim--1 { transition-delay: .05s; } .hero-anim--2 { transition-delay: .45s; } .hero-anim--3 { transition-delay: .6s; }
.hero-anim--4 { transition-delay: .75s; } .hero-anim--5 { transition-delay: .9s; } .hero-anim--6 { transition-delay: 1.05s; }

/* Central orbit */
.hero-orbit { position: relative; width: min(380px, 78vw); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; transform: translate3d(calc(var(--mx) * -8px), calc(var(--my) * -8px), 0); transition: transform .6s var(--ease); }
.hero-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(255,255,255,.22); animation: spin 60s linear infinite; }
.hero-ring--2 { inset: 14%; border: 1px solid rgba(201,162,39,.35); animation-duration: 40s; animation-direction: reverse; }
.hero-ring--3 { inset: -14%; border-color: rgba(95,211,164,.18); animation-duration: 90s; }
.hero-ring::after { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--c-gold-300); box-shadow: 0 0 18px var(--c-gold); }
.hero-ring--3::after { background: var(--c-green-300); box-shadow: 0 0 18px var(--c-green-300); }
@keyframes spin { to { transform: rotate(360deg); } }

.hero-core {
  position: relative; width: 62%; aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), rgba(255,255,255,.04) 60%), linear-gradient(160deg, var(--c-primary-700), var(--c-primary-900));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.6), inset 0 0 60px rgba(201,162,39,.15);
  opacity: 0; transform: scale(.7); transition: opacity 1.2s var(--ease) .3s, transform 1.4s var(--ease) .3s;
}
.hero.is-ready .hero-core { opacity: 1; transform: none; }
.hero-core__num { font-size: clamp(3.6rem, 7vw, 5rem); font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.hero-core__label { font-size: .82rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--c-white); }
.hero-core__sub { font-size: .8rem; color: var(--c-gold-300); font-weight: 600; }

/* Floating financial elements */
.hero-float { --depth: 1; position: absolute; z-index: 2; transform: translate3d(calc(var(--mx) * var(--depth) * 14px), calc(var(--my) * var(--depth) * 14px), 0); transition: transform .5s var(--ease); }
.hero-float--depth-2 { --depth: 1.8; }
.hero-float--depth-3 { --depth: 2.6; }
.hero-float__inner {
  display: flex; align-items: center; gap: 12px; min-width: 190px;
  padding: 14px 16px; border-radius: 18px;
  background: rgba(255,255,255,.95); color: var(--c-ink); box-shadow: 0 24px 50px -18px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(24px) scale(.9);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.hero-float--glass .hero-float__inner { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(12px); color: var(--c-white); }
.hero.is-ready .hero-float__inner { opacity: 1; transform: none; animation: bob 7s ease-in-out infinite; }
.hero-float--a { top: 4%; left: -2%; } .hero-float--a .hero-float__inner { transition-delay: .9s; animation-delay: 1.8s; }
.hero-float--b { top: 10%; right: -4%; } .hero-float--b .hero-float__inner { transition-delay: 1.05s; animation-delay: 2.6s; }
.hero-float--c { top: 46%; left: -8%; } .hero-float--c .hero-float__inner { transition-delay: 1.2s; animation-delay: 3.2s; }
.hero-float--d { bottom: 12%; right: -6%; } .hero-float--d .hero-float__inner { transition-delay: 1.35s; animation-delay: 2.1s; }
.hero-float--e { bottom: 0; left: 8%; } .hero-float--e .hero-float__inner { transition-delay: 1.5s; animation-delay: 3.8s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.float-icon { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; }
.float-icon--green { background: var(--c-green-100); color: var(--c-green); }
.float-icon--blue { background: var(--c-primary-100); color: var(--c-primary); }
.float-icon--gold { background: var(--c-gold-100); color: var(--c-gold-ink); }
.float-text { display: flex; flex-direction: column; line-height: 1.25; }
.float-text__label { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.hero-float--glass .float-text__label { color: rgba(255,255,255,.7); }
.float-text__value { font-size: .98rem; font-weight: 800; }
.float-pill { margin-left: auto; padding: 3px 9px; border-radius: var(--r-pill); font-size: .72rem; font-weight: 800; background: var(--c-green-100); color: var(--c-green); }

.mini-bars { display: flex; align-items: flex-end; gap: 5px; height: 38px; }
.mini-bars span { width: 8px; height: var(--h, 40%); border-radius: 3px; background: linear-gradient(to top, var(--c-green), var(--c-green-300)); transform-origin: bottom; transform: scaleY(0); transition: transform .9s var(--ease); }
.hero.is-ready .mini-bars span { transform: scaleY(1); }
.mini-bars span:nth-child(2) { transition-delay: 1.3s; } .mini-bars span:nth-child(3) { transition-delay: 1.4s; } .mini-bars span:nth-child(4) { transition-delay: 1.5s; } .mini-bars span:nth-child(5) { transition-delay: 1.6s; } .mini-bars span:nth-child(1) { transition-delay: 1.2s; }

.hero-scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.hero-scroll::after { content: ""; width: 1px; height: 40px; background: linear-gradient(var(--c-gold-300), transparent); animation: scroll-cue 2.2s ease-in-out infinite; }
@keyframes scroll-cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media (max-width: 1000px) {
  .hero__visual { min-height: 460px; order: 2; }
  .hero-float--a { left: 0; } .hero-float--c { left: 0; } .hero-float--b, .hero-float--d { right: 0; }
}
@media (max-width: 560px) {
  .hero__visual { min-height: 420px; }
  .hero-float__inner { min-width: 0; padding: 10px 12px; gap: 8px; }
  .float-icon { width: 32px; height: 32px; font-size: .75rem; }
  .float-text__value { font-size: .85rem; }
  .hero-float--e, .hero-float--c { display: none; }
  .hero-scroll { display: none; }
}

/* ==========================================================================
   2. PROTECTION JOURNEY — scroll-driven storytelling
   animations.js sets --journey-progress (0–1) and toggles .is-active / .is-done
   ========================================================================== */
.journey { --journey-progress: 0; background: linear-gradient(180deg, var(--c-soft), #fff); position: relative; }
.journey__intro { padding-top: var(--section-y); }
.journey__track { position: relative; }
.journey__sticky { padding: 40px 0 var(--section-y); }
.journey__layout { flex-direction: row; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.journey__rail { flex: 0 1 360px; display: flex; flex-direction: column; gap: 6px; position: relative; padding-left: 26px; list-style: none; margin: 0; }
.journey__rail::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--c-line); }
.journey__rail::after { content: ""; position: absolute; left: 7px; top: 12px; width: 3px; border-radius: 3px; height: calc((100% - 24px) * var(--journey-progress)); background: linear-gradient(var(--c-green), var(--c-gold)); transition: height .2s linear; }

.journey-step { position: relative; padding: 18px 20px; border-radius: var(--r-md); display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: background .4s, box-shadow .4s, transform .4s var(--ease); }
.journey-step::before { content: ""; position: absolute; left: -26px; top: 24px; width: 17px; height: 17px; border-radius: 50%; background: var(--c-white); border: 3px solid var(--c-line); z-index: 1; transition: border-color .4s, background .4s, transform .4s var(--ease); }
.journey-step__num { font-size: .75rem; font-weight: 800; letter-spacing: .16em; color: var(--c-muted); text-transform: uppercase; }
.journey-step__title { font-size: 1.12rem; font-weight: 800; color: var(--c-muted); transition: color .3s; }
.journey-step__desc { font-size: .9rem; color: var(--c-muted); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .4s; }
.journey-step.is-done::before { border-color: var(--c-green); background: var(--c-green); }
.journey-step.is-done .journey-step__title { color: var(--c-ink); }
.journey-step.is-active { background: var(--c-white); box-shadow: var(--shadow-md); transform: translateX(6px); }
.journey-step.is-active::before { border-color: var(--c-gold); background: var(--c-gold-300); transform: scale(1.25); }
.journey-step.is-active .journey-step__num { color: var(--c-green); }
.journey-step.is-active .journey-step__title { color: var(--c-primary); }
.journey-step.is-active .journey-step__desc { max-height: 120px; opacity: 1; }

.journey__stage { flex: 1 1 520px; position: relative; min-height: 520px; }
.journey-panel {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 22px;
  padding: clamp(26px, 3.5vw, 44px); border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--c-primary-900), var(--c-primary)); color: rgba(255,255,255,.8);
  box-shadow: var(--shadow-lg); overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(40px) scale(.97);
  transition: opacity .7s var(--ease), transform .8s var(--ease), visibility .7s;
}
.journey-panel::after { content: ""; position: absolute; width: 380px; height: 380px; right: -140px; bottom: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(201,162,39,.28), transparent 65%); pointer-events: none; }
.journey-panel.is-active { opacity: 1; visibility: visible; transform: none; }
.journey-panel h3 { color: var(--c-white); font-size: clamp(1.5rem, 2.4vw, 2rem); }
.journey-panel__eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--c-gold-300); }
.journey-panel > * { position: relative; z-index: 1; }

.journey-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.journey-chip { padding: 12px 16px; border-radius: var(--r-md); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; gap: 2px; flex: 1 1 150px; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .3s; }
.journey-chip strong { color: var(--c-white); font-size: .98rem; }
.journey-chip span { font-size: .8rem; }
.journey-chip:hover { border-color: var(--c-gold-300); }
.journey-panel.is-active .journey-chip { opacity: 1; transform: none; }
.journey-panel.is-active .journey-chip:nth-child(2) { transition-delay: .08s; } .journey-panel.is-active .journey-chip:nth-child(3) { transition-delay: .16s; }
.journey-panel.is-active .journey-chip:nth-child(4) { transition-delay: .24s; } .journey-panel.is-active .journey-chip:nth-child(5) { transition-delay: .32s; } .journey-panel.is-active .journey-chip:nth-child(6) { transition-delay: .4s; }

.risk-list { display: flex; flex-direction: column; gap: 16px; }
.risk-bar { display: flex; flex-direction: column; gap: 8px; }
.risk-bar__head { display: flex; justify-content: space-between; font-size: .92rem; font-weight: 700; color: var(--c-white); }
.risk-bar__level { color: var(--c-gold-300); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.risk-bar__track { height: 10px; border-radius: 10px; background: rgba(255,255,255,.1); overflow: hidden; }
.risk-bar__fill { height: 100%; width: var(--val, 50%); border-radius: 10px; background: linear-gradient(90deg, var(--c-green-300), var(--c-gold)); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .2s; }
.journey-panel.is-active .risk-bar__fill { transform: scaleX(1); }

.protect-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.protect-item { flex: 1 1 200px; padding: 16px 18px; border-radius: var(--r-md); background: rgba(255,255,255,.95); color: var(--c-text); display: flex; gap: 12px; align-items: flex-start; opacity: 0; transform: scale(.94); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.protect-item strong { display: block; color: var(--c-ink); }
.protect-item span { font-size: .85rem; }
.journey-panel.is-active .protect-item { opacity: 1; transform: none; }
.journey-panel.is-active .protect-item:nth-child(2) { transition-delay: .1s; } .journey-panel.is-active .protect-item:nth-child(3) { transition-delay: .2s; } .journey-panel.is-active .protect-item:nth-child(4) { transition-delay: .3s; }

.growth-chart { display: flex; align-items: flex-end; gap: clamp(6px, 1.2vw, 14px); height: 190px; padding: 0 4px; border-bottom: 1px solid rgba(255,255,255,.2); }
.growth-bar { flex: 1; height: var(--h, 50%); border-radius: 8px 8px 0 0; background: linear-gradient(to top, rgba(95,211,164,.35), var(--c-green-300)); position: relative; transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--ease); }
.growth-bar--gold { background: linear-gradient(to top, rgba(201,162,39,.35), var(--c-gold-300)); }
.journey-panel.is-active .growth-bar { transform: scaleY(1); }
.growth-bar:nth-child(2) { transition-delay: .06s; } .growth-bar:nth-child(3) { transition-delay: .12s; } .growth-bar:nth-child(4) { transition-delay: .18s; } .growth-bar:nth-child(5) { transition-delay: .24s; }
.growth-bar:nth-child(6) { transition-delay: .3s; } .growth-bar:nth-child(7) { transition-delay: .36s; } .growth-bar:nth-child(8) { transition-delay: .42s; } .growth-bar:nth-child(9) { transition-delay: .48s; } .growth-bar:nth-child(10) { transition-delay: .54s; }
.growth-legend { display: flex; justify-content: space-between; font-size: .78rem; color: rgba(255,255,255,.6); }

/* Desktop: pin the stage while the user scrolls through the track */
@media (min-width: 1000px) {
  .journey__track.is-pinned { height: 360vh; }
  .journey__track.is-pinned .journey__sticky { position: sticky; top: 70px; min-height: calc(100vh - 70px); display: flex; align-items: center; padding: 20px 0; }
}
/* Un-pinned mode (no JS, tablet/mobile, reduced motion): natural stacked story.
   animations.js only adds .is-pinned on wide screens with motion allowed. */
.journey__track:not(.is-pinned) .journey__rail { display: none; }
.journey__track:not(.is-pinned) .journey__stage { min-height: 0; display: flex; flex-direction: column; gap: 20px; }
.journey__track:not(.is-pinned) .journey-panel { position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; }
.journey__track:not(.is-pinned) .journey-chip,
.journey__track:not(.is-pinned) .protect-item { opacity: 1; transform: none; }
.journey__track:not(.is-pinned) .risk-bar__fill,
.journey__track:not(.is-pinned) .growth-bar { transform: none; }

/* ==========================================================================
   3. INSURANCE + WEALTH ECOSYSTEM — signature section
   animations.js toggles .is-active on the matching node / hub label / detail,
   adds .is-linked to visited nodes and sets --eco-fill (0–1) on .eco.
   ========================================================================== */
.eco { --eco-fill: 0; position: relative; overflow: hidden; background: radial-gradient(900px 500px at 50% 45%, rgba(46,98,184,.35), transparent 70%), linear-gradient(180deg, var(--c-primary-950), var(--c-primary-900)); color: rgba(255,255,255,.8); }
.eco::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px); background-size: 28px 28px; mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%); pointer-events: none; }
.eco .container { position: relative; z-index: 1; }

.eco__map { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 48px); }
.eco__col { flex: 1 1 0; display: flex; flex-direction: column; gap: clamp(28px, 5vw, 70px); max-width: 360px; }

.eco-node {
  position: relative; display: flex; flex-direction: column; gap: 10px; text-align: left; width: 100%;
  padding: 22px 24px; border-radius: var(--r-lg); cursor: pointer; font-family: var(--font);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.75);
  transition: background .4s, border-color .4s, transform .5s var(--ease), box-shadow .5s var(--ease);
}
.eco-node:hover { border-color: rgba(232,203,110,.5); }
.eco-node__from { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; font-weight: 800; color: var(--c-white); }
.eco-node__arrow { display: flex; align-items: center; gap: 10px; padding-left: 4px; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.eco-node__arrow::before { content: "↓"; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); color: var(--c-gold-300); font-size: .95rem; letter-spacing: 0; transition: background .4s, color .4s, transform .5s var(--ease); }
.eco-node__to { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--c-gold-300); }
.eco-node .icon-slot { width: 44px; height: 44px; border-radius: 14px; font-size: .9rem; }

/* Connectors toward the hub */
.eco-node::after {
  content: ""; position: absolute; top: 50%; height: 2px; width: clamp(20px, 3vw, 48px);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 6px, transparent 6px 12px);
  background-size: 24px 2px;
}
.eco__col--left .eco-node::after { left: 100%; }
.eco__col--right .eco-node::after { right: 100%; }
.eco-node.is-linked::after { background: repeating-linear-gradient(90deg, var(--c-gold-300) 0 6px, transparent 6px 12px); background-size: 24px 2px; animation: flow 1s linear infinite; }
.eco__col--right .eco-node.is-linked::after { animation-direction: reverse; }
@keyframes flow { to { background-position: 24px 0; } }

.eco-node.is-linked { border-color: rgba(232,203,110,.35); }
.eco-node.is-active { background: rgba(255,255,255,.96); border-color: transparent; transform: scale(1.04); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 4px rgba(201,162,39,.25); color: var(--c-text); }
.eco-node.is-active .eco-node__from { color: var(--c-ink); }
.eco-node.is-active .eco-node__arrow { color: var(--c-green); }
.eco-node.is-active .eco-node__arrow::before { background: var(--c-green); color: var(--c-white); transform: translateY(3px); }
.eco-node.is-active .eco-node__to { color: var(--c-green); }
.eco-node.is-active .icon-slot { color: var(--c-primary); background: var(--c-primary-100); border-color: var(--c-line); }

/* Hub */
.eco-hub { flex: 0 0 auto; width: clamp(240px, 26vw, 330px); aspect-ratio: 1; position: relative; display: flex; align-items: center; justify-content: center; }
.eco-hub__ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--c-gold-300) calc(var(--eco-fill) * 360deg), rgba(255,255,255,.1) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); transition: background .8s var(--ease); }
.eco-hub__halo { position: absolute; inset: -18%; border-radius: 50%; border: 1px dashed rgba(255,255,255,.16); animation: spin 70s linear infinite; }
.eco-hub__pulse { position: absolute; inset: 10%; border-radius: 50%; box-shadow: 0 0 0 0 rgba(201,162,39,.35); animation: hub-pulse 3.2s ease-out infinite; }
@keyframes hub-pulse { 0% { box-shadow: 0 0 0 0 rgba(201,162,39,.35); } 100% { box-shadow: 0 0 0 40px rgba(201,162,39,0); } }
.eco-hub__core { position: relative; width: 78%; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 22px; gap: 6px; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.2), transparent 60%), linear-gradient(160deg, var(--c-primary-700), var(--c-primary-950)); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 0 50px rgba(95,211,164,.15), 0 30px 60px -20px rgba(0,0,0,.6); }
.eco-hub__kicker { font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.eco-hub__title { font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 800; color: var(--c-white); line-height: 1.2; letter-spacing: -.02em; }
.eco-hub__states { position: relative; min-height: 1.6em; width: 100%; display: flex; justify-content: center; }
.eco-hub__state { position: absolute; font-size: .95rem; font-weight: 800; color: var(--c-gold-300); opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s var(--ease); }
.eco-hub__state.is-active { opacity: 1; transform: none; }

/* Detail panels */
.eco__details { position: relative; max-width: 880px; width: 100%; margin: 0 auto; min-height: 150px; }
.eco-detail { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding: 26px 30px; border-radius: var(--r-lg); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .5s, transform .6s var(--ease), visibility .5s; }
.eco-detail.is-active { opacity: 1; visibility: visible; transform: none; }
.eco-detail__copy { flex: 1 1 380px; display: flex; flex-direction: column; gap: 8px; }
.eco-detail__copy h3 { color: var(--c-white); }
.eco-detail__cta { flex: 0 0 auto; }
.eco__controls { display: flex; justify-content: center; gap: 10px; }
.eco-dot { width: 34px; height: 6px; border-radius: 6px; border: 0; background: rgba(255,255,255,.2); cursor: pointer; transition: background .3s, width .4s var(--ease); padding: 0; }
.eco-dot.is-active { background: var(--c-gold-300); width: 54px; }

@media (max-width: 960px) {
  .eco__map { flex-direction: column; }
  .eco-hub { order: -1; width: 240px; }
  .eco__col { max-width: 560px; width: 100%; gap: 16px; }
  .eco-node::after { display: none; }
  .eco__details { min-height: 0; }
  .eco-detail { position: relative; inset: auto; display: none; }
  .eco-detail.is-active { display: flex; }
}
.no-js .hero-line > span, .no-js .hero-anim, .no-js .hero-core, .no-js .hero-float__inner, .no-js .mini-bars span { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-line > span, .hero-anim, .hero-core, .hero-float__inner { opacity: 1 !important; transform: none !important; filter: none !important; }
  .mini-bars span { transform: none; }
}