/* ---------- Hero ecosystem: centre logo + orbit of service cards ---------- */
.eco-wrap { position: relative; min-width: 0; width: 100%; max-width: 720px; margin-inline: auto; container-type: inline-size; }
.eco {
  position: relative; width: 100%; aspect-ratio: 1;
}

.eco-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.eco-art .orbit { fill: none; stroke: rgba(242, 146, 24, 0.22); stroke-width: 1; stroke-dasharray: 2 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.eco-art .ring { fill: none; stroke: rgba(255, 214, 160, 0.35); stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* energy waves: rings that leave the sun's edge and fade as they reach the cards */
.eco-art .wave {
  fill: none; stroke: rgba(255, 210, 150, 0.55); stroke-width: 1.2; vector-effect: non-scaling-stroke;
  transform-box: fill-box; transform-origin: center; opacity: 0;
}

/* light trails: a warm gradient line plus a soft spark that travels outward */
.eco-art .trail { stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.eco-art .spark {
  stroke: #fff4e2; stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 7 93; stroke-dashoffset: 7; opacity: 0;
  filter: drop-shadow(0 0 0.8px rgba(255, 170, 70, 0.9));
}
.eco-art .node-dot { fill: #f7a531; filter: drop-shadow(0 0 0.9px rgba(255, 170, 70, 0.8)); }

/* particles: each group is rotated to its angle; the dot itself drifts outward */
.eco-art .particles > g { transform-box: view-box; transform-origin: 50px 50px; }
.eco-art .particle { fill: #ffe7c2; opacity: 0; filter: drop-shadow(0 0 0.6px rgba(255, 190, 110, 0.9)); }

/* ---------- The sun ---------- */
/* wide, faint corona that lifts the whole centre */
.eco-corona {
  position: absolute; left: 50%; top: 50%; width: 78%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 236, 205, 0.34) 0%, rgba(255, 196, 120, 0.16) 30%, rgba(242, 146, 24, 0.06) 48%, rgba(242, 146, 24, 0) 68%);
}
/* very subtle radiating rays, slowly turning */
.eco-rays {
  position: absolute; left: 50%; top: 50%; width: 66%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 170, 0.12) 0deg 1.4deg, rgba(255, 220, 170, 0) 1.4deg 12deg);
  -webkit-mask: radial-gradient(circle, transparent 42%, #000 50%, transparent 72%);
  mask: radial-gradient(circle, transparent 42%, #000 50%, transparent 72%);
}

.eco-core {
  position: absolute; left: 50%; top: 50%; width: 36%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 2;
  border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2cqw;
  /* warm white light, deepening gently towards a golden rim */
  background: radial-gradient(circle at 50% 42%, #ffffff 0%, #fffaf1 38%, #fdefd9 68%, #f8ddb2 100%);
  border: 0.3cqw solid rgba(242, 146, 24, 0.55);
  box-shadow:
    0 0 0 1.1cqw rgba(255, 238, 212, 0.14),
    0 0 0 2.4cqw rgba(255, 220, 170, 0.07),
    0 0 4cqw 0.8cqw rgba(255, 214, 160, 0.5),
    0 0 11cqw 3cqw rgba(242, 146, 24, 0.22),
    inset 0 0 3.2cqw rgba(242, 146, 24, 0.2);
}
/* fine inner ring */
.eco-core::before {
  content: ''; position: absolute; inset: 5%; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(242, 146, 24, 0.28);
}
.core-badge {
  width: 34%; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #2c2d74 0%, #202158 60%, #15163d 100%);
  box-shadow: 0 0 0 0.5cqw #fff, 0 0 0 0.8cqw rgba(242, 146, 24, 0.35), 0 1.4cqw 2.4cqw -1cqw rgba(32, 33, 88, 0.55);
}
.eco-core .core-logo { width: 84%; height: auto; }
.eco-core .cap {
  margin: 0; font-family: var(--f-head); font-weight: 700; font-size: clamp(0.8rem, 2.5cqw, 1.2rem);
  color: var(--navy); text-align: center; line-height: 1.15; letter-spacing: -0.01em;
}
.eco-core .cap span {
  display: block; margin-top: 0.35em; font-family: var(--f-body); font-weight: 600; font-size: 0.58em;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}

/* ---------- Service cards ---------- */
.eco-cards { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; list-style: none; }
.ec { position: absolute; left: var(--x); top: var(--y); width: 22.5%; transform: translate(-50%, -42%); }
.ec-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 12.5cqw; padding: 4.6cqw 1.2cqw 1.8cqw; border-radius: 20px;
  background: linear-gradient(180deg, #fff 0%, #fffdfa 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--c1) 18%, transparent),
    0 1.6cqw 3.4cqw -1.4cqw rgba(26, 27, 74, 0.3),
    0 0.4cqw 1cqw -0.4cqw rgba(26, 27, 74, 0.12);
  transition: translate 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease;
}
.ec-ic {
  position: absolute; left: 50%; top: 0; width: 7.4cqw; height: 7.4cqw; min-width: 36px; min-height: 36px;
  transform: translate(-50%, -50%); border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(145deg, var(--c1), var(--c2));
  box-shadow:
    0 0 0 0.6cqw #fff,
    0 1.2cqw 2cqw -0.8cqw color-mix(in srgb, var(--c2) 80%, transparent);
  transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.4, 1);
}
.ec-ic .i { width: 46%; height: 46%; stroke-width: 1.9; }
.ec-card b {
  font-family: var(--f-head); font-weight: 700; font-size: clamp(0.76rem, 2.15cqw, 1.04rem); color: var(--navy); text-wrap: balance;
  line-height: 1.2; letter-spacing: -0.01em;
}
.ec-tx { margin-top: 0.25em; font-size: clamp(0.6rem, 1.45cqw, 0.76rem); color: var(--muted); line-height: 1.3; text-wrap: balance; }

.ec:hover .ec-card {
  translate: 0 -4px;
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--c1) 55%, transparent),
    0 2.4cqw 4.4cqw -1.6cqw rgba(26, 27, 74, 0.38),
    0 0 3cqw -0.6cqw color-mix(in srgb, var(--c1) 45%, transparent);
}
.ec:hover .ec-ic { transform: translate(-50%, -50%) scale(1.1); }

/* ---------- Motion: the sun pulses, waves and particles radiate, cards float ---------- */
@media (prefers-reduced-motion: no-preference) {
  .eco-core { animation: core-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both, sun-pulse 5s ease-in-out 1.2s infinite; }
  .eco-corona { animation: corona 5s ease-in-out 1.2s infinite; }
  .eco-rays { animation: rays-turn 90s linear infinite; }
  .eco-art .wave { animation: wave-out 7.5s cubic-bezier(0.25, 0.6, 0.35, 1) calc(var(--k) * -2.5s) infinite; }
  .eco-art .trail { animation: trail-glow 5s ease-in-out calc(var(--i) * -0.55s) infinite; }
  .eco-art .spark { animation: spark-run 4.2s cubic-bezier(0.45, 0, 0.3, 1) calc(var(--i) * 0.47s) infinite; }
  .eco-art .node-dot { animation: trail-glow 5s ease-in-out calc(var(--i) * -0.55s) infinite; }
  .eco-art .particle { animation: particle-out var(--t) linear var(--d) infinite; }
  .ec { animation: ec-in 0.8s cubic-bezier(0.25, 1.1, 0.35, 1) calc(0.55s + var(--i) * 0.07s) both; }

  /* each card bobs on its own rhythm (different length and phase) */
  .ec-card { animation: ec-float calc(6.5s + var(--i) * 0.5s) cubic-bezier(0.45, 0, 0.55, 1) calc(var(--i) * -1.1s) infinite; }

  /* hovering a card pauses it so it can be read comfortably */
  .ec:hover .ec-card { animation-play-state: paused; }
}
/* without motion, show one quiet static wave and a few resting particles */
@media (prefers-reduced-motion: reduce) {
  .eco-art .wave:first-child { opacity: 0.35; transform: scale(1.35); }
  .eco-art .particle { opacity: 0.6; transform: translateX(27px); }
}
@keyframes core-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes sun-pulse {
  0%, 100% { box-shadow: 0 0 0 1.1cqw rgba(255, 238, 212, 0.14), 0 0 0 2.4cqw rgba(255, 220, 170, 0.07), 0 0 4cqw 0.8cqw rgba(255, 214, 160, 0.5), 0 0 11cqw 3cqw rgba(242, 146, 24, 0.22), inset 0 0 3.2cqw rgba(242, 146, 24, 0.2); }
  50% { box-shadow: 0 0 0 1.4cqw rgba(255, 238, 212, 0.2), 0 0 0 3cqw rgba(255, 220, 170, 0.09), 0 0 5.5cqw 1.2cqw rgba(255, 214, 160, 0.6), 0 0 14cqw 4cqw rgba(242, 146, 24, 0.28), inset 0 0 3.6cqw rgba(242, 146, 24, 0.24); }
}
@keyframes corona { 0%, 100% { opacity: 0.8; scale: 1; } 50% { opacity: 1; scale: 1.04; } }
@keyframes rays-turn { to { rotate: 360deg; } }
@keyframes wave-out {
  0% { transform: scale(1); opacity: 0; }
  12% { opacity: 0.55; }
  100% { transform: scale(2.25); opacity: 0; }
}
@keyframes trail-glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
/* the spark leaves the sun and fades before it reaches the card */
@keyframes spark-run {
  0% { stroke-dashoffset: 7; opacity: 0; }
  10% { opacity: 1; }
  55% { opacity: 0.9; }
  70%, 100% { stroke-dashoffset: -62; opacity: 0; }
}
@keyframes particle-out {
  0% { transform: translateX(18px); opacity: 0; }
  15% { opacity: 0.9; }
  100% { transform: translateX(44px); opacity: 0; }
}
@keyframes ec-in { from { opacity: 0; scale: 0.85; } to { opacity: 1; scale: 1; } }
/* each card rises 5–8px; amplitude and rhythm vary per card */
@keyframes ec-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-5px - var(--i) * 0.35px)); } }

/* ---------- Narrow screens: centre on top, cards in a grid ---------- */
@container (max-width: 520px) {
  .eco { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 2.2rem; padding-top: 0.6rem; }
  .eco-art, .eco-corona, .eco-rays { display: none; }
  .eco-core { position: relative; left: auto; top: auto; transform: none; width: 56%; max-width: 240px; border-width: 2px; gap: 8px;
    box-shadow: 0 0 0 8px rgba(255, 238, 212, 0.14), 0 0 26px 6px rgba(255, 214, 160, 0.45), 0 0 70px 18px rgba(242, 146, 24, 0.2), inset 0 0 20px rgba(242, 146, 24, 0.2); }
  .core-badge { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(242, 146, 24, 0.35); }
  .eco-core .cap { font-size: 0.95rem; }
  .eco-cards { position: relative; inset: auto; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.9rem 0.8rem; }
  .ec { position: relative; left: auto; top: auto; width: auto; transform: none; }
  .ec-card { height: 100%; min-height: 0; padding: 30px 10px 16px; }
  .ec-ic { width: 44px; height: 44px; box-shadow: 0 0 0 4px #fff, 0 8px 14px -8px color-mix(in srgb, var(--c2) 80%, transparent); }
  .ec-card b { font-size: 0.92rem; }
  .ec-tx { font-size: 0.76rem; }
}
@media (prefers-reduced-motion: no-preference) {
  @container (max-width: 520px) {
    .eco-core { animation: none; }
  }
}