* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #000; color: #fff; font-family: Inter, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

.page { position: relative; overflow: hidden; min-height: 100vh; }

/* Hero colour glow (same Framer blob images, 50% opacity) */
.glow { position: absolute; top: 0; left: 50%; width: 1280px; height: 900px; transform: translateX(-50%); pointer-events: none; z-index: 0; }
.glow img { position: absolute; opacity: .5; }
.glow .b1 { left: -3px;  top: -448px; width: 1034px; height: 931px; }
.glow .b2 { left: 309px; top: -409px; width: 960px;  height: 936px; }
.glow .b3 { left: 236px; top: -168px; width: 781px;  height: 816px; }
.glow .b4 { left: 33px;  top: -479px; width: 1234px; height: 1233px; opacity: .557; }

/* Nav */
.nav { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; height: 80px; padding: 0 80px; display: flex; align-items: center; justify-content: space-between; }
.logo img { width: 119px; height: 28px; display: block; }
.nav nav { display: flex; gap: 40px; }
.nav nav a { font-size: 14px; color: #fff; }
.nav nav a:hover { opacity: .7; }

/* Hero */
.hero { position: relative; z-index: 1; height: 389px; display: flex; align-items: center; justify-content: center; padding: 0 24px; text-align: center; }
.hero h1 { font-size: 60px; line-height: 60px; font-weight: 600; letter-spacing: -0.01em; }

/* Body: sidebar + content */
.legal { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; padding: 0 0 120px; display: grid; grid-template-columns: 340px 640px; }
.side { display: flex; flex-direction: column; gap: 25px; padding-top: 0; }
.side a { font-size: 16px; line-height: 22.4px; font-weight: 600; color: #fff; max-width: 240px; }
.side a:hover { opacity: .7; }
.side a[aria-current="page"] { color: #F63C81; }

.content { color: rgb(204, 206, 209); font-size: 16px; line-height: 22.4px; }
.content h5 { color: #fff; font-size: 18px; line-height: 24px; font-weight: 600; margin: 22px 0 22px; }
.content h5:first-child { margin-top: 0; }
.content h6 { color: #fff; font-size: 16px; line-height: 22.4px; font-weight: 600; }
.content p { margin: 0; min-height: 22.4px; }
.content p:empty { min-height: 22.4px; }
.content strong { color: inherit; font-weight: 700; }
.content ul, .content ol { padding-left: 24px; margin: 12px 0; }
.content li { margin: 8px 0; }
.content a { color: #0099FF; text-decoration: none; }

/* Footer */
.footer { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto 40px; padding: 80px 80px 60px; border-radius: 40px; background: linear-gradient(180deg, #1a1a1a 0%, #000 100%); }
.ftop { display: flex; justify-content: space-between; gap: 40px; min-height: 230px; }
.fbrand img { width: 204px; height: 48px; display: block; }
.fbrand p { margin-top: 48px; color: rgb(204, 206, 209); font-size: 16px; }
.fcols { display: flex; gap: 100px; }
.fcols div { display: flex; flex-direction: column; gap: 16px; }
.fcols h4 { font-size: 16px; font-weight: 600; color: #fff; }
.fcols h4.gap { margin-top: 8px; }
.fcols a { font-size: 16px; color: rgb(204, 206, 209); }
.fcols a:hover, .flegal a:hover { color: #fff; }
.flegal { display: flex; align-items: center; gap: 26px; padding-bottom: 16px; border-bottom: 1px solid #333; }
.flegal a { font-size: 16px; color: rgb(204, 206, 209); }
.flegal .sep { width: 1px; height: 18px; background: #fff; }
.copy { margin-top: 18px; font-size: 16px; color: rgb(204, 206, 209); }

/* Mobile */
@media (max-width: 1020px) {
  .nav { padding: 0 24px; }
  .nav nav { display: none; }
  .hero { height: 260px; }
  .hero h1 { font-size: 40px; line-height: 44px; }
  .legal { grid-template-columns: 1fr; padding: 0 24px 80px; }
  .side { margin-bottom: 40px; }
  .footer { margin: 0 16px 24px; padding: 48px 24px; border-radius: 24px; }
  .ftop, .fcols { flex-direction: column; gap: 32px; }
}