:root { color-scheme: dark; --navy: #081626; --panel: #10253a; --cyan: #64e0f5; --gold: #f7cd6d; --text: #f3f6fb; --muted: #bac9d8; --line: #2e455a; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--navy); color: var(--text); line-height: 1.65; }
a { color: var(--cyan); text-underline-offset: .25em; }
a:hover { color: var(--gold); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; border-radius: 4px; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; inset-block-start: 12px; inset-inline-start: 12px; transform: translateY(-180%); padding: 12px 20px; color: var(--navy); background: var(--gold); z-index: 10; }
.skip-link:focus { transform: none; }
.site-header { border-bottom: 1px solid var(--line); background: #091a2b; }
.header-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 32px; padding-block: 24px; }
.brand { font-size: 1.55rem; font-weight: 850; letter-spacing: -.04em; color: var(--text); text-decoration: none; white-space: nowrap; }
.brand span { color: var(--cyan); margin-inline-start: 6px; }
.brand { display: inline-flex; align-items: center; }
.brand img { width: 44px; height: 44px; margin-inline-end: 10px; border-radius: 12px; flex: none; }
nav { display: flex; gap: 12px 22px; flex-wrap: wrap; align-items: center; }
nav a { text-decoration: none; padding-block: 6px; }
.main-nav { flex: 1; }
.main-nav a { color: var(--muted); font-size: .9rem; }
nav a[aria-current] { color: var(--gold); box-shadow: 0 2px 0 var(--gold); }
.language-nav { font-size: .82rem; gap: 16px; }
.page-intro { padding-block: 64px 40px; }
.eyebrow { color: var(--gold); font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; margin: 0 0 16px; }
h1, h2 { line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 4.5vw, 4.3rem); max-width: 16ch; margin: 0 0 24px; }
h2 { font-size: clamp(1.45rem, 2.5vw, 2rem); margin-block: 0 18px; }
p { margin-block: 0 18px; }
.intro-copy { color: var(--muted); font-size: 1.15rem; max-width: 48ch; }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; padding-block: 72px; }
.hero > *, .header-inner > *, .content-section { min-width: 0; }
.cta { display: inline-block; max-width: 100%; background: var(--gold); border: 1px solid var(--gold); color: var(--navy); font: inherit; font-weight: 750; border-radius: 12px; padding: 14px 22px; text-decoration: none; line-height: 1.5; text-align: center; margin-block: 12px; }
.cta:disabled { background: #283950; border-color: #52647a; color: #e2eaf3; cursor: default; }
.cta:hover:not(:disabled) { background: #ffe2a0; color: var(--navy); }
.pitch-art { aspect-ratio: 1 / 1.04; position: relative; overflow: hidden; border-radius: 28px; border: 1px solid #396475; background: radial-gradient(ellipse at 80% 0%, #337b99 0%, transparent 42%), radial-gradient(ellipse at 0% 100%, #197071 0%, transparent 50%), linear-gradient(145deg, #173449, #071b2b); box-shadow: 0 22px 70px #0005; }
.pitch-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; }
.sections { padding-block-end: 24px; }
.content-section { padding-block: 32px; border-top: 1px solid var(--line); }
.content-section p, .item-list { color: var(--muted); max-width: 75ch; }
.item-list { padding-inline-start: 24px; }
.item-list li { padding-block: 7px; }
.features .item-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; max-width: none; }
.features li { background: var(--panel); padding: 24px; border: 1px solid var(--line); border-radius: 16px; color: var(--text); }
.leagues { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; }
.leagues li { border: 1px solid var(--line); border-top: 3px solid var(--cyan); background: linear-gradient(145deg, #19334a, var(--panel)); border-radius: 8px; padding: 24px 16px; font-weight: 700; direction: ltr; }
.leagues li:nth-child(even) { border-top-color: var(--gold); }
.reading-column { max-width: 850px; }
.reading-column p { line-height: 1.85; }
.closing-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-block: 20px 64px; }
.site-footer { background: #06111d; border-top: 1px solid var(--line); padding-block: 36px; }
.site-footer p, .site-footer nav { font-size: .9rem; }
.preview-note { color: var(--gold); font-size: .85rem; }
.site-footer a, bdi { overflow-wrap: anywhere; }
.chooser main { max-width: 760px; padding-block: 90px; }
.language-choices { margin-block: 36px; gap: 20px; }
.language-choices a { background: var(--panel); border: 1px solid var(--line); padding: 18px 28px; border-radius: 12px; }
[dir="rtl"] { letter-spacing: normal; }
@media (max-width: 960px) { .hero { gap: 28px; } .main-nav { order: 3; flex-basis: 100%; } .language-nav { margin-inline-start: auto; } .leagues { grid-template-columns: repeat(3, minmax(0, 1fr)); } h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); } }
@media (max-width: 600px) { .shell { width: calc(100% - 32px); } .header-inner { padding-block: 18px; gap: 16px; } .brand { font-size: 1.35rem; } .language-nav { gap: 12px; } .main-nav { gap: 8px 18px; } .main-nav a { font-size: .85rem; } .hero { grid-template-columns: 1fr; padding-block: 40px; } .pitch-art { aspect-ratio: 1.4; } .page-intro { padding-block: 40px 24px; } h1 { max-width: none; } .features .item-list, .leagues { grid-template-columns: 1fr; } .leagues li { padding: 18px; } .content-section { padding-block: 26px; } .closing-cta { padding-block-end: 40px; gap: 14px; } .chooser main { padding-block: 50px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }