.hub{position:relative;width:1140px;height:560px;overflow:hidden;border-radius:28px;background:#071019;color:#f2f6fb;font-family:Red Hat Text,Segoe UI,system-ui,sans-serif;isolation:isolate;box-shadow:0 40px 100px -40px #050e1acc,0 0 0 1px #ffffff0d inset}.hub .stars{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.55),transparent 60%),radial-gradient(1px 1px at 26% 62%,rgba(255,255,255,.35),transparent 60%),radial-gradient(1.5px 1.5px at 38% 28%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1px 1px at 47% 74%,rgba(255,255,255,.3),transparent 60%),radial-gradient(1px 1px at 58% 12%,rgba(255,255,255,.45),transparent 60%),radial-gradient(1.5px 1.5px at 66% 54%,rgba(255,255,255,.4),transparent 60%),radial-gradient(1px 1px at 74% 24%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1px 1px at 84% 70%,rgba(255,255,255,.3),transparent 60%),radial-gradient(1px 1px at 91% 38%,rgba(255,255,255,.45),transparent 60%),radial-gradient(1px 1px at 6% 82%,rgba(255,255,255,.35),transparent 60%),radial-gradient(1.5px 1.5px at 33% 88%,rgba(255,255,255,.3),transparent 60%),radial-gradient(1px 1px at 52% 44%,rgba(255,255,255,.3),transparent 60%);animation:twinkle 6s ease-in-out infinite}.hub .stars2{animation-delay:-3s;background-image:radial-gradient(1px 1px at 18% 40%,rgba(255,255,255,.4),transparent 60%),radial-gradient(1px 1px at 29% 10%,rgba(255,255,255,.35),transparent 60%),radial-gradient(1px 1px at 43% 58%,rgba(255,255,255,.3),transparent 60%),radial-gradient(1.5px 1.5px at 62% 34%,rgba(255,255,255,.45),transparent 60%),radial-gradient(1px 1px at 70% 80%,rgba(255,255,255,.3),transparent 60%),radial-gradient(1px 1px at 79% 50%,rgba(255,255,255,.4),transparent 60%),radial-gradient(1px 1px at 88% 16%,rgba(255,255,255,.35),transparent 60%),radial-gradient(1px 1px at 95% 84%,rgba(255,255,255,.3),transparent 60%),radial-gradient(1px 1px at 9% 50%,rgba(255,255,255,.3),transparent 60%)}.hub .planet{position:absolute;left:50%;top:64%;width:1500px;height:1500px;transform:translate(-50%);border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,#0e4a3d,#0b3b33 30%,#0a2a2b 48%,#071019 60%);box-shadow:0 -40px 120px -20px #0bc39673,0 -8px #5fe3c259;animation:breathe 7s ease-in-out infinite}.hub .planet:before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 50% 2%,rgba(95,227,194,.55),rgba(11,195,150,.18) 18%,transparent 40%)}.hub .planet:after{content:"";position:absolute;inset:0;border-radius:50%;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:overlay}.hub .haze{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(7,16,25,.55) 100%)}.hub svg.wires{position:absolute;inset:0;z-index:2;width:1140px;height:560px;pointer-events:none}.hub .wire{fill:none;stroke:#ffffff24;stroke-width:1.2}.hub .pulse{fill:none;stroke:#5fe3c2;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:46 600;stroke-dashoffset:646;filter:drop-shadow(0 0 5px rgba(11,195,150,.9));animation:run 3s cubic-bezier(.45,0,.3,1) infinite}.hub .pulse.out{stroke-dashoffset:-46;animation-name:runOut}.hub .pill{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;height:56px;padding:0 22px 0 18px;border-radius:14px;background:linear-gradient(180deg,#273240,#1e2733);border:0;box-shadow:0 10px 30px -14px #000000e6;font-family:Red Hat Display,sans-serif;font-weight:600;font-size:15px;letter-spacing:.01em;color:#f2f6fb;white-space:nowrap;animation:pillIn .9s cubic-bezier(.2,.8,.2,1) both}.hub .pill .fi{width:18px;height:18px;color:#5fe3c2;opacity:1}.hub .core{position:absolute;left:420px;top:130px;width:300px;height:300px;z-index:4;border-radius:40px;padding:5px;background:conic-gradient(from 210deg,#b9c3cf,#f4f7fa 20%,#8c98a8 38%,#e6eaf0,#7f8b9b 72%,#f4f7fa 88%,#b9c3cf);box-shadow:0 30px 80px -30px #000000e6,0 0 60px -20px #5fe3c280;animation:coreIn 1.4s cubic-bezier(.2,.8,.2,1) both,hover 6s ease-in-out 1.4s infinite}.hub .core-in{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:radial-gradient(120% 80% at 50% 110%,#0e4a3d,#0a2230 45%,#0a121c);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;box-shadow:inset 0 1px #ffffff1f}.hub .core-in:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 0%,rgba(255,255,255,.12),transparent 70%)}.hub .mark{width:96px;height:auto;filter:drop-shadow(0 12px 24px rgba(11,195,150,.5));animation:markFloat 6s ease-in-out infinite}.hub .word{height:22px;width:auto;filter:drop-shadow(0 0 14px rgba(95,227,194,.55))}.hub .ring{position:absolute;inset:-14px;border-radius:52px;border:1px solid rgba(95,227,194,.18);animation:ringPulse 3s ease-out infinite;pointer-events:none}@keyframes twinkle{0%,to{opacity:.9}50%{opacity:.45}}@keyframes breathe{0%,to{filter:brightness(1)}50%{filter:brightness(1.18)}}@keyframes run{0%{stroke-dashoffset:646;opacity:0}8%{opacity:1}60%{stroke-dashoffset:0;opacity:1}75%,to{stroke-dashoffset:0;opacity:0}}@keyframes runOut{0%{stroke-dashoffset:646;opacity:0}8%{opacity:1}60%{stroke-dashoffset:0;opacity:1}75%,to{stroke-dashoffset:0;opacity:0}}@keyframes pillLit{0%,52%{border-color:#ffffff1a;box-shadow:0 10px 30px -14px #000000e6,inset 0 1px #ffffff14}62%{border-color:#5fe3c2d9;box-shadow:0 0 0 1px #5fe3c259,0 0 26px -2px #0bc396a6,inset 0 1px #ffffff1f}85%,to{border-color:#ffffff1a;box-shadow:0 10px 30px -14px #000000e6,inset 0 1px #ffffff14}}@keyframes pillIn{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes coreIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}@keyframes hover{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes markFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes ringPulse{0%{transform:scale(.96);opacity:0}30%{opacity:.6}to{transform:scale(1.12);opacity:0}}@media(prefers-reduced-motion:reduce){.hub *{animation:none!important}.hub .pulse{opacity:0}}
