/* ==========================================================================
   HOW TO CONNECT STYLES
   Extends css/style.css + css/profile.css (.reward-steps / .realm-stat reused
   directly — this page borrows both components rather than inventing new ones).
   ========================================================================== */

.connect-page{max-width:1100px; margin:0 auto; padding:80px 5% 150px;}
.connect-code{
  margin-top:12px; padding:14px 18px; border-radius:8px;
  background:var(--bg); border:1px solid var(--border);
  font-family:monospace; font-size:0.88rem; color:var(--frost-glow);
}
.connect-reqs{margin-top:120px;}
.connect-cta{
  text-align:center; margin-top:120px; padding:70px 5%; border-radius:16px;
  background:radial-gradient(ellipse at 50% 50%, rgba(111,216,255,0.08), transparent 65%), var(--bg-alt);
}
.connect-cta h2{font-family:var(--font-display); font-size:clamp(1.7rem,3.4vw,2.4rem); margin-top:16px;}
.connect-cta p{color:var(--text-dim); margin-top:16px; max-width:520px; margin-left:auto; margin-right:auto; line-height:1.8;}
.connect-cta .hero-actions{justify-content:center; margin-top:34px;}