/* Integrated component rules (namespaced). Global html/body removed to respect host page styles. */
.groups-shell { container-type: inline-size; max-width: 1920px; margin-inline: auto; }
.groups-section, .groups-section * { box-sizing: border-box; }
.groups-section {
  --lime: #afff24; --green: #7bef41; --sky: #95bed8;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 45cqw 38.65cqw; gap: 6.4cqw;
  min-height: 56.28cqw; padding: 7.55cqw 5.55cqw 7.2cqw 4.4cqw;
  background: radial-gradient(ellipse at 103% 1%,#174e193b,transparent 40%),radial-gradient(ellipse at 89% 99%,#245c1138,transparent 38%),#01131c;
  color: #fafcfd; font-family: Arial, Helvetica, sans-serif;
}
.groups-section::before { content: ''; position: absolute; inset: -10%; z-index: -1; opacity: .5; background-image: repeating-linear-gradient(31deg,transparent 0 45px,#47681733 45px 48px,transparent 48px 94px); mask-image: repeating-linear-gradient(100deg,transparent 0 28px,#000 29px 110px,transparent 111px 144px); pointer-events: none; }
.groups-section::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .6; background-image: radial-gradient(#b5e52e 1px,transparent 1.4px); background-size: 97px 92px; background-position: 24px 80px; pointer-events: none; }
.groups-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.groups-copy { padding-top: .9cqw; position: relative; z-index: 1; }
.groups-kicker p { margin: 0 0 .65cqw; color: #90bad6; font: 600 max(11px,.76cqw)/1.2 monospace; letter-spacing: .11cqw; }
.groups-kicker strong { color: #f4f9ff; margin-right: .8cqw; }
.groups-kicker span { display: block; font: 700 max(12px,.86cqw)/1.2 monospace; color: #c6ff00; letter-spacing: .09cqw; }
.groups-copy h2 { position: relative; margin: 2.5cqw 0 2.45cqw -.3cqw; font-size: 5.6cqw; font-weight: 800; line-height: .94; letter-spacing: -.29cqw; white-space: nowrap; }
.groups-underline { position: absolute; bottom: -1.65cqw; right: 2.1cqw; width: 24.6cqw; height: 1.9cqw; overflow: visible; filter: drop-shadow(0 0 5px #90ff353e); }
.groups-description { color: #c0d8e8; font-size: 1.29cqw; line-height: 1.48; letter-spacing: -.005cqw; margin: 0; }
.groups-capabilities { list-style: none; display: flex; flex-wrap: wrap; gap: .85cqw; margin: 2.3cqw 0 2.5cqw; padding: 0; max-width: 43cqw; }
.groups-capabilities li { padding: .75cqw 1.2cqw; border: 1px solid transparent; border-radius: .65cqw; background: linear-gradient(#031720,#021019) padding-box,linear-gradient(130deg,#205f71,#83a734) border-box; color: #e5eff6; font-size: .94cqw; line-height: 1.2; font-weight: 600; transition: color 200ms ease,box-shadow 200ms ease,translate 200ms ease; }
.groups-capabilities li:hover { color: #ccff91; box-shadow: 0 0 18px #93ff281a; translate: 0 -2px; }
.groups-actions { display: flex; align-items: center; gap: 1.7cqw; }
.groups-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 1cqw; font: 750 1.2cqw/1.2 Arial,Helvetica,sans-serif; cursor: pointer; border: none; white-space: nowrap; }
.groups-actions svg { width: 1.55cqw; height: 1.55cqw; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 200ms ease; }
.groups-primary { position: relative; overflow: hidden; padding: 1.25cqw 1.9cqw; min-height: 4.4cqw; border-radius: .75cqw; background: linear-gradient(110deg,#b9ff2b,#94f932); color: #001018; box-shadow: 0 0 30px #77fb3738; transition: box-shadow 220ms ease,transform 220ms ease; }
.groups-primary::after { content: ''; position: absolute; inset: -70% -30%; background: linear-gradient(90deg,transparent,#fff7,transparent); transform: translateX(-130%) rotate(-20deg); }
.groups-secondary { color: #f4f9fb; padding: 12px 10px; min-height: 44px; background: none; }
.groups-actions button:focus-visible { outline: 2px solid #d5ff9b; outline-offset: 6px; }
.groups-primary:is(:hover,:focus-visible) { box-shadow: 0 0 38px #80ff486e; transform: translateY(-2px); }
.groups-primary:is(:hover,:focus-visible) svg { transform: translate(3px,-3px); }
.groups-secondary:is(:hover,:focus-visible) { color: #b8ff56; }
.groups-secondary:is(:hover,:focus-visible) svg { transform: translateX(4px); }
.groups-ecosystem { position: relative; min-width: 0; --pointer-x: 70%; --pointer-y: 20%; }
.groups-panel { position: relative; isolation: isolate; padding: 1.85cqw 1.95cqw 1.8cqw; border: 1.5px solid transparent; border-radius: 1.55cqw; background: linear-gradient(130deg,#0a242dd9,#03181ed9 37%,#06271ee0) padding-box,linear-gradient(120deg,#9bdfff,#277e60 35%,#69da75 70%,#acff88) border-box; box-shadow: inset 0 0 34px #71f29117,0 0 35px #63ed7626; transition: box-shadow 300ms ease; }
.groups-panel::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: linear-gradient(130deg,#d5efff0a 2%,transparent 17% 39%,#fff03 39%,transparent 59%),radial-gradient(ellipse at 100% 0,#9fff642d,transparent 27%); }
.groups-panel::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at var(--pointer-x) var(--pointer-y),#a9ff4216,transparent 50%); transition: opacity 250ms ease; }
.groups-panel:focus-visible { outline: 2px solid #bbff6a; outline-offset: 5px; }
.groups-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75cqw; }
.groups-panel-header p { display: flex; align-items: center; gap: .65cqw; margin: 0; font: 700 .95cqw/1.2 monospace; letter-spacing: .09cqw; color: #c6ff00; }
.groups-status-dot { display: block; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; border: 1px solid #27727d88; background: radial-gradient(circle,#baff36 0 20%,transparent 25%),radial-gradient(circle,#aeff1822,transparent 70%); }
.groups-status-menu { display: flex; gap: .4cqw; }
.groups-status-menu i { width: .53cqw; height: .53cqw; border-radius: 50%; background: #a2f870; }
.groups-status-menu i:first-child { background: #77b9bd99; }
.groups-metrics { border: 1px solid transparent; border-radius: 1cqw; background: linear-gradient(110deg,#03151cd9,#03161ad9) padding-box,linear-gradient(125deg,#16432d55,#38574999,#18493166) border-box; padding: 0 1.1cqw; }
.groups-metric { display: flex; align-items: center; gap: 1.7cqw; min-height: 7.4cqw; padding: 1.3cqw 0 1.05cqw; }
.groups-metric + .groups-metric { border-top: 1px solid #366068; }
.groups-metric-icon { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 4.35cqw; height: 4.35cqw; border-radius: 50%; border: 1px solid transparent; background: radial-gradient(circle at 30% 20%,#18371a,#001c20 70%) padding-box,linear-gradient(130deg,#8af531,#07404a) border-box; box-shadow: inset 0 0 14px #8cff2510; }
.groups-metric-icon svg { width: 64%; height: 64%; }
.groups-metric-icon::after { content: ''; position: absolute; inset: -3px; border: 1px solid #94ff45; border-radius: inherit; opacity: 0; }
.groups-metric-copy { min-width: 0; }
.groups-metric-value { margin: 0; color: #c3ff17; font-size: 3.75cqw; font-weight: 800; line-height: 1; letter-spacing: -.12cqw; }
.groups-metric:first-child .groups-metric-value { color: #fff; font-size: 4.55cqw; letter-spacing: -.2cqw; }
.groups-metric-label { color: #bcd3e5; font-size: .97cqw; line-height: 1.3; margin: .4cqw 0 0; letter-spacing: -.01cqw; white-space: nowrap; }
.groups-chart { position: relative; height: 10.85cqw; overflow: hidden; margin-top: .95cqw; border: 1px solid #185541; border-radius: .8cqw; background: linear-gradient(#15414d33 1px,transparent 1px),linear-gradient(90deg,#15414d33 1px,transparent 1px),radial-gradient(ellipse at 85% 90%,#204e1622,transparent); background-size: 100% 2.18cqw,2.95cqw 100%,100% 100%; }
.groups-chart-bars { position: absolute; inset: 1.2cqw .65cqw 0 1.25cqw; display: flex; align-items: flex-end; gap: 1.3cqw; }
.groups-chart-bars i { flex: 1; border-radius: .45cqw .45cqw 0 0; border: 1px solid #9fea4666; background: linear-gradient(170deg,#b2ff23,#1c9a22 72%,#0a482e); box-shadow: inset 1px 1px 2px #ccff7766,0 0 15px #8fea2914; transform-origin: center bottom; }
.groups-chart-bars i:nth-child(1) { height: 26%; background: linear-gradient(#258d33,#034835); }
.groups-chart-bars i:nth-child(2) { height: 40%; background: linear-gradient(#73cc20,#085833); }
.groups-chart-bars i:nth-child(3) { height: 57%; background: linear-gradient(#8bea22,#0c672c); }
.groups-chart-bars i:nth-child(4) { height: 74%; }
.groups-chart-bars i:nth-child(5) { height: 100%; }
.groups-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.groups-chart-point { filter: drop-shadow(0 0 9px #9bff27); }
.groups-orbits { position: absolute; width: 47.85cqw; height: 49cqw; left: -6.8cqw; top: -5.1cqw; pointer-events: none; }
.orbit-track { stroke: url(#groups-orbit-line); stroke-width: 1.5; }
.groups-orbit-dot { fill: #a5ff42; filter: drop-shadow(0 0 7px #94ff56); }
.groups-avatar { position: absolute; z-index: 3; width: 3.8cqw; height: 3.8cqw; border: 2px solid #9afa2f; border-radius: 50%; background-image: url('assets/community-portraits.png'); background-size: 200% 200%; box-shadow: 0 0 18px #8dff4a26; }
.avatar-one { top: 4.1cqw; left: -4.5cqw; background-position: 0% 0%; --avatar-delay: 0ms; }
.avatar-two { top: -4.7cqw; right: 5.7cqw; background-position: 100% 0%; --avatar-delay: -700ms; }
.avatar-three { top: 22.9cqw; left: -4.9cqw; background-position: 0% 100%; --avatar-delay: -1400ms; }
.avatar-four { top: 17.1cqw; right: -4.7cqw; background-position: 100% 100%; --avatar-delay: -2100ms; }
.groups-avatar::after { content: ''; position: absolute; inset: -5px; border: 1px solid #a5ff39; border-radius: 50%; opacity: 0; }
.groups-floating-icon { position: absolute; z-index: 3; display: grid; place-items: center; width: 4.8cqw; height: 4.8cqw; border: 1px solid #416d4299; border-radius: .85cqw; background: linear-gradient(130deg,#18361be6,#001e1df0); box-shadow: inset 0 0 19px #96fc2533,0 0 18px #001919; }
.groups-floating-icon svg { width: 65%; height: 65%; }
.people-float { top: 6.8cqw; right: -3.9cqw; }
.bolt-float { bottom: 2.7cqw; left: -4.2cqw; }
.groups-ecosystem:is(:hover,:focus-within,.is-active) .groups-panel { box-shadow: inset 0 0 40px #75ff6b1f,0 0 45px #72ff4847; }
.groups-ecosystem:is(:hover,:focus-within,.is-active) .groups-panel::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .groups-copy { animation: groups-enter 750ms ease-out both; }
  .groups-panel { animation: groups-enter 850ms ease-out 120ms backwards; }
  .groups-ecosystem:is(:hover,:focus-within,.is-active) .groups-avatar { animation: groups-avatar-bob 2.8s ease-in-out var(--avatar-delay) infinite; }
  .groups-ecosystem:is(:hover,:focus-within,.is-active) .groups-avatar::after { animation: groups-pulse 2.2s ease-out var(--avatar-delay) infinite; }
  .groups-ecosystem:is(:hover,:focus-within,.is-active) .groups-status-dot { animation: groups-status 1.8s ease-in-out infinite; }
  .groups-ecosystem:is(:hover,:focus-within,.is-active) .groups-floating-icon svg { animation: groups-icon-bob 2s ease-in-out infinite; }
  .groups-ecosystem:is(:hover,:focus-within,.is-active) .groups-metric-icon::after { animation: groups-pulse 2.2s ease-out infinite; }
  .groups-ecosystem:is(:hover,:focus-within,.is-active) .groups-metric:nth-child(2) .groups-metric-icon::after { animation-delay: 350ms; }
  .groups-ecosystem:is(:hover,:focus-within,.is-active) .groups-metric:nth-child(3) .groups-metric-icon::after { animation-delay: 700ms; }
  .groups-ecosystem:is(:hover,:focus-within,.is-active) .groups-chart-bars i { animation: groups-chart-rise 850ms cubic-bezier(.2,.7,.2,1) backwards; }
  .groups-chart-bars i:nth-child(2) { animation-delay: 80ms !important; }.groups-chart-bars i:nth-child(3) { animation-delay: 160ms !important; }.groups-chart-bars i:nth-child(4) { animation-delay: 240ms !important; }.groups-chart-bars i:nth-child(5) { animation-delay: 320ms !important; }
  .groups-ecosystem:is(:hover,:focus-within,.is-active) .groups-chart-point { animation: groups-chart-glow 1.8s ease-in-out infinite; }
  .groups-ecosystem:is(:hover,:focus-within,.is-active) .orbit-track { stroke-dasharray: 9 6; animation: groups-orbit-flow 7s linear infinite; }
  .groups-primary:is(:hover,:focus-visible)::after { animation: groups-shine 950ms ease-out; }
}
@keyframes groups-enter { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes groups-avatar-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes groups-icon-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes groups-pulse { 0% { opacity: .6; transform: scale(.97); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes groups-status { 0%,100% { box-shadow: 0 0 4px #a6ff2420; } 50% { box-shadow: 0 0 16px #a6ff244d; } }
@keyframes groups-chart-rise { from { transform: scaleY(.2); opacity: .4; } to { transform: scaleY(1); opacity: 1; } }
@keyframes groups-chart-glow { 0%,100% { opacity: .75; } 50% { opacity: 1; filter: drop-shadow(0 0 13px #baff36); } }
@keyframes groups-orbit-flow { to { stroke-dashoffset: -150; } }
@keyframes groups-shine { to { transform: translateX(130%) rotate(-20deg); } }
@container (max-width: 1000px) {
  .groups-section { display: block; min-height: 100vh; padding: 50px 34px 65px; }
  .groups-copy { padding: 0; }
  .groups-kicker p { font-size: 11px; letter-spacing: 1.4px; margin-bottom: 10px; }.groups-kicker span { font-size: 13px; letter-spacing: 1px; }
  .groups-copy h2 { font-size: clamp(39px,7.1cqw,72px); margin: 29px 0 37px; line-height: .98; letter-spacing: -2.5px; }
  .groups-underline { width: 47%; height: 25px; left: 38%; right: auto; bottom: -26px; }
  .groups-description { font-size: 17px; line-height: 1.55; max-width: 700px; }
  .groups-desktop-break { display: none; }
  .groups-capabilities { max-width: 700px; margin: 25px 0 28px; gap: 10px; }
  .groups-capabilities li { padding: 11px 15px; font-size: 13px; border-radius: 8px; }
  .groups-actions { gap: 24px; flex-wrap: wrap; }
  .groups-actions button { font-size: 17px; gap: 14px; }.groups-actions svg { width: 23px; height: 23px; }
  .groups-primary { padding: 18px 24px; border-radius: 10px; }
  .groups-ecosystem { width: min(78cqw,620px); margin: 80px auto 0; }
  .groups-panel { padding: 26px 24px; border-radius: 23px; }
  .groups-panel-header { margin-bottom: 13px; }.groups-panel-header p { font-size: 14px; gap: 10px; letter-spacing: 1px; }
  .groups-status-dot { width: 26px; height: 26px; }.groups-status-menu { gap: 7px; }.groups-status-menu i { width: 7px; height: 7px; }
  .groups-metrics { padding: 0 16px; border-radius: 14px; }
  .groups-metric { gap: 23px; min-height: 116px; padding: 20px 0; }
  .groups-metric-icon { width: 64px; height: 64px; }
  .groups-metric-value { font-size: 51px; letter-spacing: -1px; }.groups-metric:first-child .groups-metric-value { font-size: 62px; letter-spacing: -2px; }
  .groups-metric-label { font-size: 14px; line-height: 1.35; margin-top: 6px; white-space: normal; }
  .groups-chart { height: 170px; margin-top: 16px; border-radius: 11px; background-size: 100% 35px,45px 100%,100% 100%; }
  .groups-chart-bars { inset: 18px 10px 0 18px; gap: 18px; }.groups-chart-bars i { border-radius: 7px 7px 0 0; }
  .groups-orbits { width: 125%; height: 112%; left: -13%; top: -8%; }
  .groups-avatar { width: 54px; height: 54px; }.avatar-one { top: 12%; left: -34px; }.avatar-two { top: -44px; right: 13%; }.avatar-three { top: 59%; left: -35px; }.avatar-four { top: 46%; right: -36px; }
  .groups-floating-icon { width: 60px; height: 60px; border-radius: 12px; }.people-float { top: 23%; right: -32px; }.bolt-float { bottom: 7%; left: -33px; }
}
@container (max-width: 550px) {
  .groups-section { padding: 35px 22px 55px; }
  .groups-copy h2 { font-size: clamp(31px,7.75cqw,43px); letter-spacing: -1.8px; }
  .groups-kicker p { font-size: 9px; letter-spacing: 1px; }.groups-kicker strong { margin-right: 7px; }
  .groups-description { font-size: 16px; }
  .groups-capabilities { gap: 8px; }.groups-capabilities li { padding: 10px 12px; font-size: 12px; }
  .groups-actions { gap: 15px; }.groups-actions button { font-size: 15px; }
  .groups-ecosystem { width: calc(100% - 18px); margin-top: 75px; }
  .groups-panel { padding: 19px 13px; border-radius: 18px; }
  .groups-panel-header p { font-size: 12px; gap: 7px; }.groups-status-dot { width: 22px; height: 22px; }.groups-status-menu i { width: 5px; height: 5px; }
  .groups-metrics { padding: 0 10px; }
  .groups-metric { gap: 12px; min-height: 110px; padding-block: 18px; }
  .groups-metric-icon { width: 43px; height: 43px; }
  .groups-metric-value { font-size: 40px; }.groups-metric:first-child .groups-metric-value { font-size: 45px; }
  .groups-metric-label { font-size: 12px; }
  .groups-chart { height: 135px; }.groups-chart-bars { gap: 12px; }
  .groups-avatar { width: 42px; height: 42px; }.avatar-one { left: -24px; }.avatar-three { left: -24px; }.avatar-four { right: -24px; }.avatar-two { top: -34px; }
  .groups-floating-icon { width: 43px; height: 43px; }.people-float { right: -22px; }.bolt-float { left: -22px; }
}
@media (prefers-reduced-motion: reduce) {
  .groups-section *, .groups-section *::before, .groups-section *::after { animation: none !important; transition: none !important; }
}