:root { --navy: #0a1220; --navy-2: #101a2a; --orange: #ff6a00; --ink: #101827; --muted: #7a869a; --line: #dce1e8; --paper: #f4f6f8; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Sora", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.section-dark { color: white; background: var(--navy); }
.site-header { height: 78px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; background: var(--navy); color: #fff; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; font-size: 19px; letter-spacing: -.07em; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.brand span span { color: var(--orange); }
.nav-links { display: flex; gap: 34px; margin-left: 80px; color: #aab3c0; font-size: 12px; }
.nav-links a:hover, .text-link:hover, .site-footer a:hover { color: var(--orange); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; border-radius: 5px; padding: 15px 19px; font-size: 12px; font-weight: 700; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--orange); box-shadow: 0 8px 22px #ff6a0033; }
.button-primary:hover { background: #ff7b21; }
.button-ghost { border: 1px solid #536071; color: #fff; padding: 11px 15px; }
.button-ghost:hover { border-color: var(--orange); color: var(--orange); }
.button-small { font-size: 11px; }
.hero { min-height: 670px; padding: 70px 8vw 90px; display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 5vw; overflow: hidden; }
.hero-copy { position: relative; z-index: 2; max-width: 580px; }
.eyebrow { margin: 0 0 24px; color: var(--orange); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px #ff6a0022; vertical-align: 1px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 25px; font-size: clamp(45px, 5vw, 76px); line-height: 1.03; letter-spacing: -.08em; }
h1 em, h2 em { color: var(--orange); font-style: normal; }
.hero-lede { max-width: 450px; color: #aeb8c7; font-size: 15px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 29px; margin: 36px 0 48px; }
.text-link { color: #c4cbd5; font-size: 12px; font-weight: 600; }
.text-link span { margin-left: 8px; color: var(--orange); font-size: 17px; }
.hero-note { display: flex; align-items: center; gap: 10px; color: #738095; font-size: 10px; line-height: 1.5; }
.tiny-mark { display: grid; place-items: center; width: 24px; height: 24px; color: var(--navy); background: #fff; font-size: 13px; font-style: italic; font-weight: 800; }
.hero-visual { position: relative; min-height: 500px; }
.court-lines { position: absolute; inset: -30% -15% -30% 0; opacity: .42; background: radial-gradient(ellipse at 45% 45%, transparent 0 27%, #31405a 27.2% 27.45%, transparent 27.7% 45%, #31405a 45.2% 45.45%, transparent 45.7%), linear-gradient(90deg, transparent 49.8%, #31405a 50%, transparent 50.2%); transform: rotate(-15deg); }
.glass-card { position: absolute; z-index: 2; border: 1px solid #66738966; background: linear-gradient(135deg, #1d2a3bdf, #111b2ce8); box-shadow: 0 24px 60px #00000042; backdrop-filter: blur(13px); }
.score-card { top: 73px; left: 17%; width: min(390px, 76%); padding: 22px 25px; border-radius: 8px; }
.score-topline, .score-events, .panel-top, .mini-heading { display: flex; justify-content: space-between; align-items: center; color: #97a4b6; font-size: 9px; font-weight: 600; letter-spacing: .12em; }
.live-pill { color: var(--orange); }.live-pill span { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--orange); }
.matchup { display: flex; justify-content: space-between; align-items: end; margin-top: 28px; }.matchup-away { margin-top: 17px; }
.team-label { display: block; margin-bottom: 8px; color: var(--orange); font-size: 8px; letter-spacing: .14em; }.matchup strong { color: #fff; font-size: 13px; letter-spacing: -.03em; }.score-number { color: #fff; font-size: 45px; font-weight: 700; letter-spacing: -.1em; line-height: .8; }.muted-score { color: #8693a5; }
.score-divider { height: 1px; margin: 23px 0 13px; background: #65728755; }.score-events { font-size: 9px; letter-spacing: 0; }.orange { color: var(--orange); margin-right: 5px; }
.stat-card { right: 3%; bottom: 55px; width: 235px; padding: 20px; border-radius: 7px; }.mini-heading { margin-bottom: 20px; font-size: 8px; }.mini-heading span { color: #69778d; }
.bar-row { display: grid; grid-template-columns: 30px 1fr 29px; align-items: center; gap: 9px; margin: 14px 0; color: #a9b4c3; font-size: 9px; }.bar-row b { color: #fff; text-align: right; font-size: 10px; }.bar { height: 4px; border-radius: 10px; background: #4b5a70; }.bar i { display: block; height: 100%; border-radius: inherit; background: var(--orange); }
.orange-slash { position: absolute; z-index: 1; top: 58%; left: 4%; width: 560px; height: 5px; background: var(--orange); box-shadow: 0 0 18px #ff6a00aa; transform: rotate(-16deg); }.orange-slash:after { content: ""; position: absolute; right: -8px; top: -6px; width: 17px; height: 17px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px #ff6a00; }
.proof-strip { min-height: 76px; padding: 0 8vw; display: flex; align-items: center; justify-content: space-between; gap: 25px; color: #667386; background: #fff; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-align: center; }.proof-strip i { width: 1px; height: 25px; background: #d7dce4; }
.section { padding: 120px 8vw; }.light-section { background: var(--paper); }.section-intro { max-width: 620px; }.dark-eyebrow { color: var(--orange); }.section-intro h2, .insight-copy h2, .final-cta h2 { margin-bottom: 25px; font-size: clamp(32px, 4vw, 56px); line-height: 1.08; letter-spacing: -.08em; }.section-intro h2 span { color: #8b96a4; }.section-intro > p:last-child { max-width: 470px; color: #778394; font-size: 14px; line-height: 1.8; }
.feature-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 16px; margin-top: 66px; }.feature-card { min-height: 355px; padding: 29px; border: 1px solid var(--line); border-radius: 7px; background: #fff; overflow: hidden; }.feature-card h3 { margin: 32px 0 15px; font-size: 20px; letter-spacing: -.06em; }.feature-card p { color: #778394; font-size: 12px; line-height: 1.75; }.feature-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #cfd6df; border-radius: 50%; color: #7d8999; font-size: 10px; font-weight: 700; }.orange-icon { border-color: var(--orange); color: var(--orange); }.feature-dark { color: white; border-color: var(--navy); background: var(--navy); }.feature-dark p { color: #9aa8ba; }.feature-dark .feature-icon { border-color: #5b687a; color: var(--orange); }
.feature-visual { position: relative; margin: 29px -29px -29px; height: 115px; background: #eef1f5; }.court-mini { overflow: hidden; background: var(--navy); }.court-arc { position: absolute; left: 30px; bottom: -52px; width: 215px; height: 150px; border: 1px solid #51627a; border-radius: 50%; }.court-dot { position: absolute; z-index: 1; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px #ff6a0024; }.dot-one { left: 43%; top: 28%; }.dot-two { left: 62%; top: 56%; background: #fff; box-shadow: 0 0 0 5px #ffffff1c; }.dot-three { left: 28%; top: 68%; }
.chart-mini { display: flex; align-items: end; gap: 8px; height: 72px; margin-top: 33px; padding: 0 15px 0 0; border-bottom: 1px solid #dbe0e7; }.chart-mini span { display: block; width: 18px; border-radius: 2px 2px 0 0; background: #d4dbe4; }.chart-mini .active { background: var(--orange); }.insight-badge { display: inline-flex; gap: 9px; margin-top: 32px; padding: 10px 13px; border-radius: 3px; color: #fff; background: #25344a; font-size: 10px; }.insight-badge span { color: var(--orange); }
.insight-section { display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; align-items: center; }.insight-copy { max-width: 480px; }.insight-copy > p:not(.eyebrow) { color: #a9b5c5; font-size: 14px; line-height: 1.8; margin-bottom: 30px; }.light-link { color: #fff; }.insight-panel { padding: 29px; border: 1px solid #45546a; border-radius: 7px; background: #111d2d; }.panel-top { color: var(--orange); }.spark { font-size: 17px; }.insight-panel h3 { margin: 31px 0 23px; font-size: 19px; letter-spacing: -.05em; }.analysis-row { display: grid; grid-template-columns: 26px 1fr 30px; gap: 9px; align-items: start; padding: 17px 0; border-top: 1px solid #405068; color: #738198; font-size: 9px; line-height: 1.6; }.analysis-row > span { color: var(--orange); }.analysis-row p { margin: 0; }.analysis-row strong { color: #e6eaf0; font-size: 11px; }.analysis-row b { color: #fff; text-align: right; font-size: 10px; }.panel-footer { margin-top: 15px; color: #758298; font-size: 9px; }.panel-footer span { float: right; color: var(--orange); }
.plans-section { background: #fff; }.plans-intro { text-align: center; margin: 0 auto; }.plans-intro > p:last-child { margin-right: auto; margin-left: auto; }.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1120px; margin: 65px auto 25px; }.plan-card { position: relative; padding: 30px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }.plan-featured { border: 2px solid var(--orange); box-shadow: 0 20px 50px #1a284012; }.plan-ribbon { position: absolute; top: -1px; right: 24px; padding: 6px 9px; color: #fff; background: var(--orange); font-size: 8px; font-weight: 700; letter-spacing: .08em; }.plan-label { margin-bottom: 24px; color: var(--orange); font-size: 9px; font-weight: 700; letter-spacing: .15em; }.plan-card h3 { margin-bottom: 10px; font-size: 24px; letter-spacing: -.06em; }.plan-desc { min-height: 42px; color: #7a8696; font-size: 11px; line-height: 1.55; }.price { margin: 24px 0; font-size: 31px; font-weight: 700; letter-spacing: -.08em; }.price small { color: #8d98a7; font-size: 10px; font-weight: 500; letter-spacing: 0; }.plan-card ul { min-height: 125px; padding: 19px 0 15px; margin: 0 0 20px; border-top: 1px solid var(--line); list-style: none; color: #566477; font-size: 11px; line-height: 2.2; }.plan-card li:before { content: "✓"; margin-right: 10px; color: var(--orange); font-weight: 700; }.button-outline { width: 100%; border: 1px solid #bbc4d0; color: #27364a; }.button-outline:hover { border-color: var(--orange); color: var(--orange); }.pricing-note { color: #8a95a3; font-size: 10px; text-align: center; }
.final-cta { padding: 78px 8vw; display: flex; align-items: center; justify-content: space-between; gap: 30px; }.final-cta h2 { margin: 0; }.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 31px 8vw; color: #8390a1; background: #fff; font-size: 10px; }.footer-brand { color: var(--ink); font-size: 15px; }.footer-brand img { width: 26px; height: 26px; }.site-footer a { color: var(--ink); font-weight: 600; }
@media (max-width: 850px) { .nav-links { display: none; }.hero { grid-template-columns: 1fr; padding-top: 70px; }.hero-visual { min-height: 420px; margin-top: -15px; }.score-card { left: 5%; }.stat-card { right: 4%; }.feature-grid, .plan-grid { grid-template-columns: 1fr; }.feature-card { min-height: 290px; }.plan-card ul { min-height: auto; }.insight-section { grid-template-columns: 1fr; }.insight-copy { margin-bottom: 25px; }.proof-strip { flex-wrap: wrap; justify-content: center; padding: 20px 7vw; }.proof-strip i { display: none; }.section { padding-top: 85px; padding-bottom: 85px; } }
@media (max-width: 520px) { .site-header { padding: 0 6vw; }.site-header .button { display: none; }.hero { padding-right: 6vw; padding-left: 6vw; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }.hero-visual { min-height: 365px; margin-right: -8vw; margin-left: -4vw; transform: scale(.92); transform-origin: left top; }.score-card { top: 35px; width: 79%; }.stat-card { bottom: 28px; width: 205px; }.orange-slash { top: 58%; left: 0; width: 430px; height: 4px; transform: rotate(-14deg); }.orange-slash:after { width: 14px; height: 14px; right: -7px; top: -5px; }.section { padding-right: 6vw; padding-left: 6vw; }.final-cta { align-items: flex-start; flex-direction: column; padding-right: 6vw; padding-left: 6vw; }.site-footer { align-items: flex-start; flex-direction: column; padding-right: 6vw; padding-left: 6vw; } }