/* ===== Section 3: Exploded profile ("Never Stops Growing") ===== */
.ex-stage { position: relative; width: 100%; max-width: 960px; height: 560px; margin: 0 auto; }

.ex-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
.ex-line { stroke: #c084fc; stroke-width: 1.5; fill: none; stroke-linecap: round; opacity: 0; transition: opacity .8s ease; filter: drop-shadow(0 0 3px rgba(168,85,247,.55)); }
.ex-line.on { opacity: .6; animation: ex-line-pulse 3.4s ease-in-out infinite; }
@keyframes ex-line-pulse { 0%,100% { opacity: .6; } 50% { opacity: .28; } }

/* central profile core */
.ex-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(300px, 80%); padding: 1.35rem 1.4rem; border-radius: 22px; background: linear-gradient(160deg, rgba(30,24,48,.85), rgba(17,14,28,.92)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(168,85,247,.32); box-shadow: 0 24px 60px -20px rgba(88,28,135,.6), 0 0 0 1px rgba(255,255,255,.04) inset; z-index: 3; color: #f4f2fb; text-align: center; }
.ex-core-head { display: flex; align-items: center; gap: .6rem; justify-content: center; margin-bottom: .8rem; }
.ex-avatar { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, #8c3cdd, #c026d3); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; color: #fff; box-shadow: 0 4px 14px -2px rgba(140,60,221,.6); }
.ex-core .ex-name { display: flex; align-items: center; gap: .3rem; font-weight: 600; font-size: .98rem; color: #fff; }
.ex-core .ex-name svg { width: 16px; height: 16px; color: #c084fc; }
.ex-core .ex-role { font-size: .72rem; color: rgba(226,222,240,.6); text-align: left; }
.ex-core-foot { margin-top: .2rem; font-size: .6rem; letter-spacing: .04em; text-transform: uppercase; color: #c9b8f0; background: rgba(168,85,247,.14); border: 1px solid rgba(168,85,247,.25); padding: .3rem .55rem; border-radius: 999px; display: inline-block; }

/* floating modules */
.ex-mod { position: absolute; left: 50%; top: 50%; width: 182px; transform: translate(-50%,-50%) translate(var(--mx,0px), var(--my,0px)); opacity: 1; transition: transform 1s cubic-bezier(.34,1.2,.4,1), opacity .8s ease; z-index: 2; }
.ex-mod.collapsed { transform: translate(-50%,-50%) scale(.5); opacity: 0; }
.ex-mod-inner { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border-radius: 14px; background: rgba(20,16,34,.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(168,85,247,.26); box-shadow: 0 10px 26px -8px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset; }
.ex-revealed .ex-mod-inner { animation: ex-float 6s ease-in-out infinite; }
.ex-mod:nth-child(2) .ex-mod-inner { animation-delay: -1s; }
.ex-mod:nth-child(3) .ex-mod-inner { animation-delay: -2s; }
.ex-mod:nth-child(4) .ex-mod-inner { animation-delay: -3s; }
.ex-mod:nth-child(5) .ex-mod-inner { animation-delay: -4s; }
.ex-mod:nth-child(6) .ex-mod-inner { animation-delay: -5s; }
@keyframes ex-float { 0%,100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
.ex-ic { display: flex; width: 34px; height: 34px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 10px; background: rgba(168,85,247,.16); }
.ex-ic svg { width: 18px; height: 18px; color: #c084fc; }
.ex-lbl { font-size: .86rem; font-weight: 600; color: #fff; line-height: 1.1; }
.ex-sub { font-size: .68rem; color: rgba(226,222,240,.6); margin-top: 2px; }

/* Mobile: radial layout can't fit [module][core][module] on a narrow screen,
   so fall back to a stacked grid (core on top, modules 2-up, no connector lines). */
@media (max-width: 767px) {
	.ex-stage { position: relative; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; max-width: 440px; }
	.ex-svg { display: none; }
	.ex-core { position: static; transform: none; grid-column: 1 / -1; width: 100%; order: -1; margin-bottom: .3rem; }
	.ex-mod { position: static; width: 100%; transform: none; transition: opacity .6s ease; }
	.ex-mod.collapsed { transform: none; opacity: 0; }
	.ex-mod-inner { height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.ex-mod { transition: none; }
	.ex-revealed .ex-mod-inner { animation: none; }
	.ex-line.on { animation: none; }
}