:root {
  --sky: #4a9fe8;
  --sky-light: #70c3f5;
  --blue: #2c5f8a;
  --navy: #102d47;
  --orange: #f88207;
  --orange-dark: #c75200;
  --cream: #fff8f0;
  --paper: #f5fbff;
  --purple: #7c4dff;
  --green: #2ecc71;
  --red: #e74c3c;
  --gold: #f7b32b;
  --ink: #15334c;
  --muted: #60798f;
  --line: #d7e8f4;
  --shell: 1060px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
.shell { width: min(calc(100% - 40px), var(--shell)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 9px 15px; border: 2px solid var(--navy); border-radius: 11px; background: white; font-weight: 900; transform: translateY(-150%); transition: transform 150ms ease; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 4px solid #ffd166; outline-offset: 4px; }

.site-header { position: absolute; z-index: 20; top: 0; right: 0; left: 0; padding-top: 18px; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 70px; padding: 9px 12px 9px 10px; border: 1px solid rgba(255,255,255,.6); border-radius: 22px; background: rgba(255,255,255,.92); box-shadow: 0 10px 0 rgba(25,82,126,.17),0 20px 36px rgba(12,53,85,.14); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.brand img, .footer-brand img { flex: none; border: 3px solid white; border-radius: 14px; box-shadow: 0 4px 0 rgba(29,79,118,.25); }
.brand span { display: grid; line-height: 1; }
.brand strong, .footer-brand strong { font-family: "Baloo 2",sans-serif; font-weight: 800; }
.brand strong { font-size: 19px; }
.brand small { margin-top: 3px; color: var(--orange-dark); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.main-site-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 7px; border: 2px solid #cde5f5; border-bottom: 4px solid #8dbbd8; border-radius: 13px; color: var(--blue); background: #eff9ff; font-size: 13px; font-weight: 900; transition: filter 150ms ease,transform 80ms ease; }
.main-site-link svg { width: 17px; height: 17px; fill: currentColor; }
.main-site-link:hover { filter: brightness(.97) saturate(1.08); }
.main-site-link:active, .support-button:active, .language-actions a:active { transform: translateY(2px); }

.hub-hero { position: relative; isolation: isolate; min-height: 600px; padding: 155px 0 120px; overflow: hidden; color: white; background: radial-gradient(circle at 73% 48%,rgba(255,255,255,.2),transparent 23%),linear-gradient(112deg,rgba(28,111,180,.08) 0 54%,rgba(248,130,7,.1) 54%),linear-gradient(180deg,var(--sky-light),var(--sky) 57%,#3187cf); }
.hub-hero::before { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 50px 50px; content: ""; mask-image: linear-gradient(black,transparent 90%); }
.hub-hero::after { position: absolute; z-index: -1; right: -5%; bottom: -100px; left: -5%; height: 170px; border-radius: 50% 50% 0 0/100% 100% 0 0; background: var(--paper); content: ""; }
.hub-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr .72fr; align-items: center; gap: 70px; }
.hub-copy { max-width: 650px; }
.eyebrow, .kicker { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px 7px; border: 1px solid rgba(255,255,255,.36); border-radius: 99px; background: rgba(20,75,116,.32); box-shadow: inset 0 1px rgba(255,255,255,.2); }
.eyebrow i { width: 9px; height: 9px; border: 2px solid rgba(255,255,255,.75); border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(46,204,113,.2); }
.hub-copy h1, .section-heading h2, .support-panel h2, .document-title h1 { margin: 0; font-family: "Baloo 2",sans-serif; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.hub-copy h1 { margin-top: 23px; font-size: clamp(58px,7vw,86px); text-shadow: 0 6px rgba(26,88,134,.36),0 14px 30px rgba(17,69,108,.22); }
.hub-copy h1 span { color: #ffe3b9; text-shadow: 0 6px rgba(192,86,0,.5),0 14px 28px rgba(127,53,0,.18); }
.hub-copy > p:last-of-type { max-width: 600px; margin: 22px 0 0; color: rgba(255,255,255,.93); font-size: 18px; font-weight: 700; }
.trust-row { display: flex; flex-wrap: wrap; gap: 13px 22px; margin-top: 26px; }
.trust-row span { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.94); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.trust-row i { display: grid; width: 19px; height: 19px; place-items: center; border: 2px solid rgba(255,255,255,.75); border-radius: 7px; background: var(--green); font-style: normal; font-size: 10px; }
.hero-emblem { position: relative; width: min(340px,100%); margin-inline: auto; }
.hero-emblem img { position: relative; z-index: 2; width: 100%; height: auto; border: 8px solid white; border-bottom: 14px solid #1c608e; border-radius: 31%; box-shadow: inset 0 3px rgba(255,255,255,.6),0 30px 48px rgba(13,69,110,.32); transform: rotate(3deg); }
.emblem-back { position: absolute; z-index: 1; inset: -22px; border: 3px solid rgba(255,255,255,.26); border-radius: 35%; background: rgba(255,255,255,.08); transform: rotate(-6deg); }
.emblem-badge { position: absolute; z-index: 3; right: -20px; bottom: -17px; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px 7px; border: 2px solid #fff4ca; border-bottom: 5px solid #b67b05; border-radius: 13px; color: var(--navy); background: linear-gradient(#ffe99e,#ffd166); box-shadow: 0 10px 20px rgba(30,72,101,.25); font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.emblem-badge svg { width: 19px; height: 19px; fill: currentColor; }
.arena-orb { position: absolute; z-index: -1; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(255,255,255,.09); }.orb-one { top: 200px; left: -80px; width: 220px; height: 220px; }.orb-two { right: -70px; bottom: 110px; width: 250px; height: 250px; }

.document-picker { padding: 82px 0 100px; }
.section-heading { max-width: 680px; margin: 0 auto 42px; text-align: center; }
.kicker { color: var(--orange-dark); }
.section-heading h2, .support-panel h2 { margin-top: 8px; font-size: clamp(38px,5vw,58px); }
.section-heading > p:last-child, .support-panel > div > p:last-child { margin: 14px 0 0; color: var(--muted); font-size: 17px; font-weight: 650; }
.legal-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.legal-card { position: relative; isolation: isolate; min-height: 380px; padding: 29px; overflow: hidden; border: 3px solid white; border-bottom: 9px solid rgba(0,0,0,.19); border-radius: 29px; color: white; box-shadow: inset 0 3px rgba(255,255,255,.33),0 22px 38px rgba(25,79,117,.16); }
.legal-card::before { position: absolute; z-index: -1; top: 0; right: 0; left: 0; height: 43%; border-radius: 25px 25px 58% 58%; background: linear-gradient(rgba(255,255,255,.23),transparent); content: ""; }
.legal-card::after { position: absolute; z-index: -2; right: -70px; bottom: -70px; width: 240px; height: 240px; border: 38px solid rgba(255,255,255,.07); border-radius: 50%; content: ""; }
.privacy-card { background: linear-gradient(145deg,#58b5ef,#2878b5); }.terms-card { background: linear-gradient(145deg,#a17eff,#6535d4); }
.card-topline { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.card-icon { display: grid; width: 65px; height: 65px; place-items: center; border: 2px solid rgba(255,255,255,.7); border-bottom: 6px solid rgba(0,0,0,.22); border-radius: 20px; background: rgba(9,43,68,.23); box-shadow: inset 0 2px rgba(255,255,255,.25); }
.card-icon svg { width: 32px; height: 32px; fill: currentColor; }
.status-chip { padding: 6px 10px 5px; border: 1px solid rgba(255,255,255,.48); border-radius: 99px; background: rgba(7,42,67,.18); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.legal-card h3 { margin: 24px 0 7px; font-family: "Baloo 2",sans-serif; font-size: 34px; font-weight: 800; line-height: 1.05; text-shadow: 0 3px rgba(0,0,0,.18); }
.legal-card > p { min-height: 52px; margin: 0; color: rgba(255,255,255,.86); font-weight: 700; }
.language-actions { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 25px; }
.language-actions a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 11px 10px 8px; border: 2px solid rgba(255,255,255,.65); border-bottom: 5px solid rgba(0,0,0,.24); border-radius: 13px; background: rgba(255,255,255,.16); font-size: 12px; font-weight: 900; transition: background 150ms ease,transform 80ms ease; }
.language-actions a:hover { background: rgba(255,255,255,.25); }
.language-actions a > span { display: grid; width: 28px; height: 25px; place-items: center; border-radius: 7px; color: var(--navy); background: #fff7e8; font-size: 10px; }
.language-actions a svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.support-section { padding: 0 0 95px; }
.support-panel { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 38px 42px; overflow: hidden; border: 3px solid #ffd88e; border-bottom: 9px solid #d89926; border-radius: 29px; background: linear-gradient(135deg,#fff4d8,#ffdfa2); box-shadow: inset 0 3px white,0 22px 38px rgba(129,86,13,.12); }
.support-panel::after { position: absolute; right: -70px; bottom: -110px; width: 260px; height: 260px; border: 40px solid rgba(248,130,7,.08); border-radius: 50%; content: ""; }
.support-icon { position: relative; z-index: 2; display: grid; width: 66px; height: 66px; place-items: center; border: 2px solid #ffc05b; border-bottom: 6px solid var(--orange-dark); border-radius: 20px; color: white; background: linear-gradient(#ffb64e,var(--orange)); box-shadow: inset 0 2px rgba(255,255,255,.45); }
.support-icon svg { width: 31px; height: 31px; fill: currentColor; }
.support-panel > div { position: relative; z-index: 2; }.support-panel h2 { color: #82480e; font-size: clamp(30px,4vw,43px); }.support-panel > div > p:last-child { color: #806243; }
.support-button { position: relative; z-index: 2; padding: 12px 18px 9px; border: 2px solid #ffae42; border-bottom: 5px solid var(--orange-dark); border-radius: 14px; color: white; background: linear-gradient(#ffb44f,var(--orange)); box-shadow: inset 0 2px rgba(255,255,255,.45); font-size: 13px; font-weight: 900; text-shadow: 0 2px rgba(135,51,0,.3); white-space: nowrap; }

.site-footer { padding: 31px 0; color: rgba(255,255,255,.72); background: #0e2639; }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 25px; }.footer-brand { display: flex; align-items: center; gap: 12px; }.footer-brand strong { display: block; color: white; font-size: 17px; line-height: 1.1; }.footer-brand p,.footer-grid > p { margin: 3px 0 0; font-size: 12px; font-weight: 700; }

/* Document pages */
.legal-page { background: linear-gradient(180deg,#e8f7ff 0,#f7fcff 360px); }
.legal-page .site-header { position: relative; padding-bottom: 18px; background: linear-gradient(180deg,#63bbf3,#4a9fe8); }
.legal-page .nav { box-shadow: 0 8px 0 rgba(25,82,126,.17),0 16px 28px rgba(12,53,85,.12); }
.document-main { padding: 48px 0 90px; }
.document-shell { width: min(calc(100% - 40px),900px); margin-inline: auto; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.breadcrumbs a { color: var(--blue); }.breadcrumbs svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.document-hero { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 19px; margin-bottom: 24px; padding: 28px; overflow: hidden; border: 3px solid #82c8f1; border-bottom: 9px solid #2873aa; border-radius: 27px; color: white; background: radial-gradient(circle at 92% 20%,rgba(255,215,139,.22),transparent 23%),linear-gradient(135deg,#56b1ed,#337fb9); box-shadow: inset 0 3px rgba(255,255,255,.38),0 20px 36px rgba(28,89,134,.16); }
.document-hero.terms-hero { border-color: #ad91f8; border-bottom-color: #5330ae; background: radial-gradient(circle at 92% 20%,rgba(255,215,139,.2),transparent 23%),linear-gradient(135deg,#9a77f6,#6842c5); }
.document-icon { display: grid; width: 66px; height: 66px; place-items: center; border: 2px solid rgba(255,255,255,.72); border-bottom: 6px solid rgba(0,0,0,.22); border-radius: 20px; background: rgba(7,45,72,.2); }
.document-icon svg { width: 33px; height: 33px; fill: currentColor; }
.document-title h1 { font-size: clamp(35px,5vw,50px); text-shadow: 0 3px rgba(0,0,0,.16); }.update-date { margin: 4px 0 0; color: rgba(255,255,255,.75); font-size: 12px; font-weight: 800; }
.language-switch { padding: 9px 12px 7px; border: 2px solid rgba(255,255,255,.7); border-bottom: 4px solid rgba(0,0,0,.22); border-radius: 12px; background: rgba(255,255,255,.16); font-size: 12px; font-weight: 900; white-space: nowrap; }
.document-note { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 22px; padding: 14px 16px; border: 2px solid #cce6f5; border-radius: 15px; color: #46677e; background: #edf8ff; font-size: 13px; font-weight: 700; }
.document-note svg { width: 19px; height: 19px; flex: none; margin-top: 1px; fill: var(--blue); }
.document-content { display: grid; gap: 15px; }
.document-content .section { margin: 0; padding: 24px 26px; border: 2px solid var(--line); border-bottom: 6px solid #bdd7e7; border-radius: 21px; background: white; box-shadow: inset 0 2px white,0 12px 25px rgba(30,88,130,.06); }
.document-content .section h2 { margin: 0 0 10px; color: var(--blue); font-family: "Baloo 2",sans-serif; font-size: 25px; font-weight: 800; line-height: 1.2; }
.document-content .section h3 { margin: 19px 0 6px; color: #4479a0; font-family: "Baloo 2",sans-serif; font-size: 19px; font-weight: 800; line-height: 1.25; }
.document-content p,.document-content li { color: #4f687c; font-size: 15px; }.document-content p { margin: 0 0 9px; }.document-content p:last-child { margin-bottom: 0; }.document-content ul { margin: 8px 0 0; padding-left: 22px; }.document-content li { margin-bottom: 6px; padding-left: 4px; }.document-content strong { color: #284a64; }.document-content a { color: #176fac; font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.document-content .warning { border-color: #ffd0ca; border-bottom-color: #e9968d; background: #fff8f6; }.document-content .warning h2 { color: #b93c31; }
.document-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 700; }.back-to-center { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); font-weight: 900; }.back-to-center svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.3; }

@keyframes float { 0%,100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
.hero-emblem img { animation: float 4s ease-in-out infinite; }

@media (max-width: 820px) {
  .hub-hero { padding-top: 142px; }.hub-hero-grid { grid-template-columns: 1fr; gap: 60px; text-align: center; }.hub-copy { margin-inline: auto; }.eyebrow { justify-content: center; }.trust-row { justify-content: center; }.hero-emblem { width: min(280px,70vw); }
  .legal-cards { grid-template-columns: 1fr; }.support-panel { grid-template-columns: auto 1fr; }.support-button { grid-column: 1/-1; justify-self: stretch; text-align: center; }.footer-grid { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 600px) {
  .shell,.document-shell { width: min(calc(100% - 28px),var(--shell)); }.site-header { padding-top: 10px; }.nav { min-height: 63px; border-radius: 18px; }.brand img { width: 43px; height: 43px; border-radius: 12px; }.brand strong { font-size: 16px; }.brand small { font-size: 8px; }.main-site-link { padding-inline: 10px; font-size: 0; }.main-site-link svg { width: 20px; height: 20px; }
  .hub-hero { min-height: 0; padding: 118px 0 112px; }.hub-copy h1 { font-size: clamp(50px,15vw,68px); }.hub-copy > p:last-of-type { font-size: 16px; }.trust-row { display: grid; justify-content: center; text-align: left; }.emblem-badge { right: -8px; }
  .document-picker { padding: 68px 0 76px; }.section-heading { margin-bottom: 32px; }.section-heading h2 { font-size: 40px; }.legal-card { min-height: 0; padding: 23px; }.legal-card h3 { font-size: 30px; }.legal-card > p { min-height: 0; }.language-actions { grid-template-columns: 1fr; }.support-section { padding-bottom: 72px; }.support-panel { display: block; padding: 27px 23px; }.support-icon { margin-bottom: 19px; }.support-button { display: block; margin-top: 23px; }
  .legal-page .site-header { padding-bottom: 10px; }.document-main { padding: 35px 0 68px; }.document-hero { grid-template-columns: auto 1fr; padding: 22px 18px; }.document-icon { width: 56px; height: 56px; border-radius: 17px; }.document-icon svg { width: 28px; height: 28px; }.document-title h1 { font-size: 34px; }.language-switch { grid-column: 1/-1; text-align: center; }.document-content .section { padding: 21px 19px; }.document-content .section h2 { font-size: 22px; }.document-footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
