.connect-world,.connect-home{color:#f4f3e9;background:radial-gradient(ellipse at 12% 40%,#24483f 0%,transparent 55%),radial-gradient(ellipse at 95% 90%,#293752 0%,transparent 50%),#0b1e2b}.connect-world{padding:40px 0 65px}.connect-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:70px}.connect-back{font-size:11px;text-decoration:none;color:#bacfc9;display:inline-block;margin-bottom:35px}.connect-world .eyebrow,.connect-home .eyebrow{color:#e4c47d;font-size:9px;letter-spacing:.13em}.connect-world h1{font-size:clamp(42px,4.6vw,62px);line-height:1.15;letter-spacing:-.055em;margin:15px 0 20px;font-weight:400}.connect-world h1 em{font-style:normal;color:#efd18d}.connect-intro{font-size:13px;color:#c8d7d1;line-height:1.9;max-width:450px}.connect-circles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:34px 0}.connect-orb{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;text-align:center;background:linear-gradient(140deg,#ffffff13,#ffffff03);border:1px solid #d4d9c53d;box-shadow:inset 0 1px 14px #ffffff04,0 9px 20px #0002;text-decoration:none;min-width:0;transition:transform .2s,border-color .2s,background .2s}.connect-orb:hover{transform:translateY(-5px);border-color:#e6c77e;background:#ffffff17}.connect-icon{font:bold 43px/1 Arial,sans-serif;color:#f4eddc;margin-bottom:10px}.connect-youtube .connect-icon{font-size:32px}.connect-instagram .connect-icon{font-size:50px;line-height:.85}.connect-tiktok .connect-icon{font-size:50px;line-height:.85}.connect-linkedin .connect-icon{font-size:34px}.connect-orb strong{font-size:11px;font-weight:600}.connect-orb small{font-size:8px;color:#adbfba;margin-top:5px}.connect-direct{display:grid;gap:0;margin-top:28px}.connect-direct a{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid #ffffff20;text-decoration:none;font-size:12px;color:#d5dfd9}.connect-direct span{color:#e4c47d}.connect-right{padding-top:48px}.connect-section-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px}.connect-section-head h2{font-size:25px;font-weight:400;letter-spacing:-.03em}.connect-section-head>a{font-size:10px;text-decoration:none;color:#e4c47d;white-space:nowrap}.connect-feature{display:grid;grid-template-columns:145px 1fr;gap:23px;padding:23px;background:#ffffff09;border:1px solid #d3d6c32f;border-radius:15px;text-decoration:none;align-items:center}.connect-feature img{width:145px;height:170px;object-fit:cover;border-radius:8px}.connect-feature h3{font-size:25px;line-height:1.25;font-weight:500;letter-spacing:-.035em;margin:10px 0}.connect-feature p{color:#baccC5;font-size:11px;line-height:1.8}.connect-feature strong{display:block;margin-top:15px;font-size:10px;color:#e8c77f}.connect-paths{margin:19px 0 30px;display:grid;gap:12px}.connect-paths a{display:flex;gap:15px;align-items:center;padding:16px 20px;background:#ffffff07;border:1px solid #ffffff20;border-radius:10px;text-decoration:none}.connect-paths a>span{font-size:25px;color:#e6c57b;width:28px}.connect-paths h3{font-size:13px;font-weight:500}.connect-paths p{font-size:10px;color:#aec5bb;margin-top:5px}.connect-paths b{margin-left:auto;color:#e6c57b}.connect-music{display:grid;grid-template-columns:1fr 1fr;gap:15px}.connect-music a{text-decoration:none;overflow:hidden;border-radius:8px;background:#ffffff08;border:1px solid #ffffff20}.connect-music img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}.connect-music span{display:flex;justify-content:space-between;font-size:11px;padding:13px 15px}.connect-music b{color:#e6c57b}.connect-follow{display:flex;justify-content:space-between;font-size:11px;margin-top:20px;padding:15px 0;text-decoration:none;color:#cfddd5}.connect-follow span{color:#e6c57b}.connect-world a:focus-visible,.connect-home a:focus-visible{outline:3px solid #efc66a;outline-offset:5px}.connect-home .section-head{align-items:center}.connect-home .section-head p{color:#bacdc6}.connect-home .connect-circles{grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;margin:25px 0 0}.connect-hub-link{color:#e6c57b;text-decoration:none;font-size:12px;white-space:nowrap}.connect-home h2{color:#f4f3e9}
@media(max-width:1050px){.connect-layout{gap:35px}.connect-feature{grid-template-columns:110px 1fr;padding:18px;gap:17px}.connect-feature img{width:110px;height:150px}.connect-feature h3{font-size:22px}.connect-circles{gap:10px}.connect-orb small{font-size:7px}.connect-home .connect-circles{gap:14px}.connect-orb strong{font-size:10px}}
@media(max-width:760px){.connect-world{padding:25px 0 40px}.connect-layout{grid-template-columns:1fr;gap:35px}.connect-back{margin-bottom:25px}.connect-world h1{font-size:45px}.connect-circles{max-width:480px;gap:12px;margin:25px auto}.connect-icon{font-size:36px;margin-bottom:8px}.connect-orb small{font-size:7px}.connect-orb strong{font-size:10px}.connect-right{padding-top:0}.connect-section-head h2{font-size:24px}.connect-feature{grid-template-columns:105px 1fr;padding:18px;gap:17px}.connect-feature img{width:105px;height:150px}.connect-feature h3{font-size:22px}.connect-feature p{font-size:10px}.connect-home .connect-circles{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.connect-home .section-head{display:block}.connect-hub-link{display:inline-block;margin-top:18px}.connect-home h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){.connect-orb{transition:none}.connect-orb:hover{transform:none}}

.connect-icon svg{display:block;width:43px;height:43px}.connect-instagram .connect-icon{font-size:43px;line-height:1}
@media(max-width:760px){.connect-icon svg{width:36px;height:36px}}

/* Gentle floating circles with a richer, platform-inspired palette. */
.connect-world,.connect-home{background:radial-gradient(ellipse at 0 35%,#163e50 0%,transparent 55%),radial-gradient(ellipse at 95% 85%,#322b55 0%,transparent 60%),#0a192e}
.connect-orb{--orb-light:#284977;--orb-dark:#132c4b;--orb-glow:#84b9ef;background:radial-gradient(circle at 28% 18%,#ffffff18,transparent 52%),linear-gradient(145deg,var(--orb-light),var(--orb-dark));border-color:#ffffff35;box-shadow:inset 0 1px 1px #ffffff25,0 13px 25px #0003;transition:transform .55s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s;position:relative;isolation:isolate}
.connect-youtube{--orb-light:#733d52;--orb-dark:#352b49;--orb-glow:#efa5b2}.connect-facebook{--orb-light:#315b91;--orb-dark:#1b315d;--orb-glow:#93c4ff}.connect-instagram{--orb-light:#795371;--orb-dark:#3d315b;--orb-glow:#f1b9d5}.connect-tiktok{--orb-light:#216469;--orb-dark:#153744;--orb-glow:#91e1d5}.connect-x{--orb-light:#414a67;--orb-dark:#202d47;--orb-glow:#c8d2ef}.connect-linkedin{--orb-light:#285f89;--orb-dark:#193b56;--orb-glow:#9ed5f4}
.connect-orb:hover,.connect-orb:focus-visible{background:radial-gradient(circle at 28% 18%,#ffffff24,transparent 52%),linear-gradient(145deg,var(--orb-light),var(--orb-dark));transform:scale(1.035);border-color:var(--orb-glow);box-shadow:0 16px 35px #0004,0 0 22px #ffffff0b}
.connect-orb small{color:#d0dbe5}.connect-icon{color:#fff8ed;text-shadow:0 2px 9px #0002}.connect-circles{padding:8px 0}.connect-floating .connect-orb{animation:connect-drift 8s ease-in-out infinite;--float:7px}
.connect-floating .connect-orb:nth-child(2){animation-duration:9s;animation-delay:-3s}.connect-floating .connect-orb:nth-child(3){animation-duration:7.5s;animation-delay:-1.5s}.connect-floating .connect-orb:nth-child(4){animation-duration:9.5s;animation-delay:-4s}.connect-floating .connect-orb:nth-child(5){animation-duration:8.5s;animation-delay:-2s}.connect-floating .connect-orb:nth-child(6){animation-duration:10s;animation-delay:-5s}
.connect-floating:hover .connect-orb,.connect-floating:focus-within .connect-orb{animation-play-state:paused}
@keyframes connect-drift{0%,100%{translate:0 0}50%{translate:0 calc(-1 * var(--float))}}
.connect-motion-toggle{display:block;margin:-12px 0 10px auto;padding:8px 12px;color:#d4dded;font:10px Poppins,Arial,sans-serif;border:1px solid #ffffff30;border-radius:20px;background:#ffffff08;cursor:pointer;min-height:32px}.connect-motion-toggle[hidden]{display:none}.connect-home .connect-motion-toggle{margin:14px 0 0 auto}.connect-motion-toggle:hover{border-color:#d8b96e;color:#f1d493}.connect-motion-toggle:focus-visible{outline:3px solid #efc66a;outline-offset:3px}
.connect-feature,.connect-paths a,.connect-music a{background:linear-gradient(135deg,#34436a55,#29455233);border-color:#b8cbe333;transition:border-color .35s,box-shadow .35s}.connect-feature:hover,.connect-paths a:hover,.connect-music a:hover{border-color:#d7bd795e;box-shadow:0 8px 28px #0002}
@media(max-width:760px){.connect-floating .connect-orb{--float:4px}.connect-motion-toggle{margin-top:-8px}}
@media(prefers-reduced-motion:reduce){.connect-floating .connect-orb{animation:none!important;translate:none!important}.connect-orb,.connect-feature,.connect-paths a,.connect-music a{transition:none!important}.connect-orb:hover,.connect-orb:focus-visible{transform:none}}

/* Complete social family: four across, two on small screens. */
.connect-circles{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.connect-home .connect-circles{grid-template-columns:repeat(4,minmax(0,1fr));max-width:900px;gap:24px;margin:32px auto 0}
.connect-hopeward{--orb-light:#785d3f;--orb-dark:#493343;--orb-glow:#f0ce97}
.connect-telegram{--orb-light:#28768c;--orb-dark:#21425f;--orb-glow:#a1e3f5}
.connect-hopeward .connect-icon{font-size:32px}
.connect-world .connect-icon{font-size:32px;margin-bottom:8px}
.connect-world .connect-icon svg{width:32px;height:32px}
.connect-world .connect-orb small{font-size:7px}
.connect-floating .connect-orb:nth-child(7){animation-duration:8.8s;animation-delay:-2.8s}
.connect-floating .connect-orb:nth-child(8){animation-duration:9.8s;animation-delay:-4.8s}
@media(min-width:761px) and (max-width:1050px){.connect-world .connect-circles{grid-template-columns:repeat(2,minmax(0,1fr));max-width:320px}}
@media(max-width:760px){.connect-circles,.connect-home .connect-circles{grid-template-columns:repeat(2,minmax(0,1fr));max-width:380px;gap:18px}.connect-world .connect-orb small,.connect-orb small{font-size:9px}.connect-orb strong{font-size:12px}}

/* Floating community constellation, inspired by the supplied Connect reference. */
.connect-world,.connect-home{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 12% 35%,#16374e,transparent 65%),linear-gradient(135deg,#111e39,#111c31 55%,#292646)}
.connect-world::before,.connect-home::before,.connect-world::after,.connect-home::after{content:"";position:absolute;pointer-events:none;z-index:0;inset:-18%;border-radius:45%;opacity:.5;will-change:auto}
.connect-world::before,.connect-home::before{background:radial-gradient(ellipse at 24% 35%,#2e68966e,transparent 45%),radial-gradient(ellipse at 80% 75%,#78639155,transparent 50%);transform:translate(-2%,-1%) rotate(-7deg)}
.connect-world::after,.connect-home::after{background:radial-gradient(ellipse at 55% 48%,#33868130,transparent 40%),radial-gradient(ellipse at 10% 95%,#c8a45220,transparent 45%);transform:translate(2%,1%) rotate(6deg)}
.connect-ambient-running::before{animation:connect-atmosphere 28s ease-in-out infinite alternate}
.connect-ambient-running::after{animation:connect-atmosphere 36s ease-in-out -12s infinite alternate-reverse}
@keyframes connect-atmosphere{from{transform:translate(-3%,-2%) rotate(-7deg) scale(1)}to{transform:translate(4%,3%) rotate(8deg) scale(1.08)}}
.connect-world>.wrap,.connect-home>.wrap{position:relative;z-index:1}
.connect-circles,.connect-home .connect-circles,.connect-world .connect-circles{display:block;position:relative;max-width:546px;width:100%;aspect-ratio:1/1.08;margin:32px auto 24px;padding:0}
.connect-circles .connect-orb{position:absolute;width:32%;aspect-ratio:1;z-index:2;background:radial-gradient(circle at 30% 15%,#ffffff20,transparent 62%),radial-gradient(ellipse at 80% 100%,color-mix(in srgb,var(--orb-light) 65%,transparent),#1e2940c9);border:1px solid #ffffff36;box-shadow:inset 0 1px 2px #ffffff20,0 15px 32px #03091433;backdrop-filter:blur(9px);--drift-x:6px;--drift-y:-7px;--tilt:.7deg}
.connect-circles .connect-orb:hover,.connect-circles .connect-orb:focus-visible{z-index:5;transform:scale(1.04);border-color:var(--orb-glow);box-shadow:inset 0 1px 2px #ffffff28,0 16px 36px #0004,0 0 25px #d7b97112}
.connect-circles .connect-youtube{left:29%;top:29%;width:41%;z-index:3;--orb-light:#306975;--orb-glow:#e9cb86}
.connect-circles .connect-facebook{left:24%;top:0%;--drift-x:5px;--drift-y:7px}
.connect-circles .connect-instagram{left:1%;top:47%;--drift-x:5px;--drift-y:-6px}
.connect-circles .connect-tiktok{left:1%;top:18%;--drift-x:-4px;--drift-y:6px}
.connect-circles .connect-x{left:25%;top:67%;--drift-x:-5px;--drift-y:5px}
.connect-circles .connect-linkedin{left:55%;top:7%;--drift-x:6px;--drift-y:-5px}
.connect-circles .connect-hopeward{left:56%;top:61%;--drift-x:-4px;--drift-y:7px}
.connect-circles .connect-telegram{left:67%;top:34%;--drift-x:4px;--drift-y:-6px}
.connect-circles .connect-icon,.connect-world .connect-icon{font-size:43px;margin-bottom:10px}
.connect-circles .connect-icon svg,.connect-world .connect-icon svg{width:43px;height:43px}
.connect-circles .connect-youtube .connect-icon{font-size:49px;color:#f1d18a}
.connect-circles .connect-linkedin .connect-icon{font-size:36px}
.connect-circles .connect-orb strong{font-size:13px;max-width:80%}
.connect-circles .connect-orb small,.connect-world .connect-orb small{font-size:9px;max-width:80%;line-height:1.35}
.connect-floating .connect-orb:nth-child(n){animation:connect-orbit 14s ease-in-out infinite}
.connect-floating .connect-orb:nth-child(1){animation-duration:18s;animation-delay:-6s}
.connect-floating .connect-orb:nth-child(2){animation-duration:13s;animation-delay:-2s}
.connect-floating .connect-orb:nth-child(3){animation-duration:15s;animation-delay:-7s}
.connect-floating .connect-orb:nth-child(4){animation-duration:11s;animation-delay:-4s}
.connect-floating .connect-orb:nth-child(5){animation-duration:12s;animation-delay:-2s}
.connect-floating .connect-orb:nth-child(6){animation-duration:14s;animation-delay:-9s}
.connect-floating .connect-orb:nth-child(7){animation-duration:16s;animation-delay:-5s}
.connect-floating .connect-orb:nth-child(8){animation-duration:12.5s;animation-delay:-11s}
@keyframes connect-orbit{0%,100%{translate:0 0;rotate:0deg}33%{translate:var(--drift-x) var(--drift-y);rotate:var(--tilt)}66%{translate:calc(var(--drift-x) * -.65) calc(var(--drift-y) * .45);rotate:calc(var(--tilt) * -1)}}
.connect-floating:hover .connect-orb:nth-child(n),.connect-floating:focus-within .connect-orb:nth-child(n){animation-play-state:paused}
.connect-motion-toggle{position:relative;z-index:1;margin:0 0 14px auto}
.connect-home>.wrap{display:grid;grid-template-columns:.8fr 1fr;column-gap:70px;align-items:center}
.connect-home .section-head{display:block;margin:0;grid-column:1;grid-row:1}
.connect-home .section-head h2{font-size:clamp(32px,3.6vw,52px);line-height:1.2}
.connect-home .section-head p{line-height:1.9;max-width:380px;margin-top:20px}
.connect-home .connect-hub-link{display:inline-block;margin-top:24px;border-bottom:1px solid #d3b66d66;padding-bottom:8px}
.connect-home .connect-circles{grid-column:2;grid-row:1;margin:0 auto}
.connect-home .connect-motion-toggle{grid-column:2;margin:16px 0 0 auto}
@media(max-width:1050px){.connect-layout{grid-template-columns:1fr 1fr;gap:30px}.connect-circles .connect-icon,.connect-world .connect-icon{font-size:32px}.connect-circles .connect-icon svg,.connect-world .connect-icon svg{width:32px;height:32px}.connect-circles .connect-orb strong{font-size:11px}.connect-circles .connect-orb small,.connect-world .connect-orb small{font-size:8px}.connect-home>.wrap{column-gap:30px}}
@media(max-width:760px){.connect-layout{grid-template-columns:1fr}.connect-home>.wrap{display:block}.connect-home .connect-circles{margin:35px auto 12px}.connect-circles,.connect-home .connect-circles,.connect-world .connect-circles{max-width:480px}.connect-circles .connect-icon,.connect-world .connect-icon{font-size:30px;margin-bottom:7px}.connect-circles .connect-icon svg,.connect-world .connect-icon svg{width:30px;height:30px}.connect-circles .connect-youtube .connect-icon{font-size:40px}.connect-circles .connect-linkedin .connect-icon{font-size:28px}.connect-circles .connect-orb strong{font-size:11px}.connect-circles .connect-orb small,.connect-world .connect-orb small{font-size:8px}.connect-circles .connect-orb{--drift-x:3px;--drift-y:-4px;--tilt:.4deg}.connect-motion-toggle{min-height:40px}}
@media(prefers-reduced-motion:reduce){.connect-ambient-running::before,.connect-ambient-running::after,.connect-floating .connect-orb:nth-child(n){animation:none!important;translate:none!important;rotate:none!important}.connect-circles .connect-orb:hover,.connect-circles .connect-orb:focus-visible{transform:none}}
