.connect-main { overflow: hidden; }
.connect-hero { min-height: min(46rem,calc(100vh - 5.5rem)); display: grid; grid-template-columns: minmax(0,1.15fr) minmax(19rem,.7fr); gap: clamp(2.5rem,8vw,7rem); align-items: center; padding-block: clamp(4rem,10vw,8rem); }
.connect-intro { position: relative; z-index: 1; }
.connect-intro::before { position: absolute; left: -12rem; top: 50%; z-index: -1; width: 28rem; height: 28rem; content: ""; border-radius: 50%; background: rgba(168,85,247,.13); filter: blur(72px); transform: translateY(-50%); }
.connect-hero h1 { max-width: 11ch; }
.connect-lede { max-width: 42rem; margin: 1.5rem 0 0; color: var(--muted); font-size: clamp(1.05rem,2vw,1.3rem); }
.community-card,.support-card { position: relative; overflow: hidden; color: #fff; text-decoration: none; }
.community-card { min-height: 25rem; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.5rem,4vw,2.5rem); border: 1px solid rgba(45,226,230,.35); border-radius: 1.4rem; background: linear-gradient(155deg,rgba(45,226,230,.16),rgba(18,12,27,.9) 48%,rgba(255,79,154,.12)); box-shadow: 0 2rem 5rem rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.08); transition: transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.community-card::before,.community-card::after { position: absolute; content: ""; border-radius: 50%; }
.community-card::before { width: 15rem; height: 15rem; right: -5rem; top: -5rem; border: 1px solid rgba(45,226,230,.24); box-shadow: inset 0 0 4rem rgba(45,226,230,.08),0 0 3rem rgba(45,226,230,.08); }
.community-card::after { width: .65rem; height: .65rem; right: 4.4rem; top: 4.4rem; background: var(--mint); box-shadow: 0 0 1.2rem var(--mint); }
.community-card:hover { color: #fff; border-color: rgba(45,226,230,.7); box-shadow: 0 2.2rem 5rem rgba(0,0,0,.5),0 0 2.5rem rgba(45,226,230,.13); transform: translateY(-4px); }
.card-kicker { color: var(--pink); font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.community-card strong { margin-top: .45rem; font-size: clamp(2rem,4vw,3rem); font-weight: 350; line-height: 1.08; }
.community-card p { max-width: 28rem; margin: .85rem 0 1.6rem; color: var(--muted); }
.card-action { display: inline-flex; align-items: center; gap: .5rem; color: var(--cyan); font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.card-action i { font-style: normal; transition: transform .2s ease; }
a:hover .card-action i { transform: translateX(.2rem); }
.support-section { position: relative; padding-block: clamp(5rem,10vw,9rem); border-block: 1px solid rgba(45,226,230,.13); background: linear-gradient(145deg,rgba(7,7,11,.96),rgba(22,10,28,.88)); }
.support-section::before { position: absolute; width: 34rem; height: 34rem; right: -12rem; bottom: -17rem; content: ""; border-radius: 50%; background: rgba(255,79,154,.1); filter: blur(70px); }
.support-heading { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(18rem,.55fr); gap: 2rem clamp(3rem,8vw,7rem); align-items: end; margin-bottom: 3rem; }
.support-heading h2 { margin: 0; font-size: clamp(2.2rem,5vw,4.2rem); font-weight: 300; letter-spacing: -.025em; }
.support-heading > p { margin: 0; color: var(--muted); }
.support-grid { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.support-card { min-height: 18rem; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.35rem,3vw,2rem); border: 1px solid rgba(255,255,255,.12); border-radius: 1.15rem; background: linear-gradient(145deg,rgba(29,20,40,.84),rgba(8,7,12,.92)); box-shadow: 0 1.2rem 3rem rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.05); transition: transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.support-card::after { position: absolute; width: 11rem; height: 11rem; right: -5rem; bottom: -6rem; content: ""; border-radius: 50%; background: var(--card-glow,rgba(168,85,247,.12)); filter: blur(26px); }
.support-card:hover { color: #fff; border-color: rgba(45,226,230,.42); box-shadow: 0 1.5rem 3.4rem rgba(0,0,0,.42),0 0 1.8rem rgba(45,226,230,.08); transform: translateY(-3px); }
.support-card-kofi { --card-glow: rgba(45,226,230,.14); }
.support-card-stripe { --card-glow: rgba(168,85,247,.16); }
.support-card-paypal { --card-glow: rgba(45,128,255,.15); }
.support-card-cash { --card-glow: rgba(0,255,170,.13); }
.support-mark { width: 2.65rem; height: 2.65rem; display: grid; place-items: center; margin-bottom: 2.4rem; border: 1px solid rgba(45,226,230,.28); border-radius: .75rem; color: #fff; font-size: 1.05rem; font-weight: 800; background: linear-gradient(135deg,rgba(45,226,230,.17),rgba(168,85,247,.2)); box-shadow: inset 0 1px rgba(255,255,255,.08),0 0 1.3rem rgba(45,226,230,.07); }
.support-card strong { margin: .38rem 0 0; font-size: clamp(1.35rem,3vw,1.85rem); font-weight: 450; }
.support-card p { max-width: 30rem; margin: .65rem 0 1.5rem; color: var(--muted); }
.support-card .card-action { margin-top: auto; }
.support-note { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1rem; padding: 1.35rem 1.5rem; border: 1px solid rgba(45,226,230,.18); border-radius: 1rem; background: rgba(45,226,230,.045); }
.support-note div { display: grid; gap: .12rem; }
.support-note span { color: var(--muted); font-size: .78rem; }
.support-note strong { color: #fff; font-size: 1rem; }
@media (max-width: 760px) { .connect-hero { min-height: auto; grid-template-columns: 1fr; padding-block: 3rem 5rem; } .community-card { min-height: 21rem; } .support-heading { grid-template-columns: 1fr; } .support-grid { grid-template-columns: 1fr; } .support-note { align-items: flex-start; flex-direction: column; } }
@media (max-width: 430px) { .connect-hero { width: min(calc(100% - 1rem),var(--content)); } .community-card,.support-card { border-radius: .95rem; } .support-card { min-height: 16.5rem; } }
@media (prefers-reduced-motion: reduce) { .community-card,.support-card,.card-action i { transition: none; } }