@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --paper:#f3f5ef; --surface:#fff; --ink:#14201a; --muted:#68746d; --line:#d7ded7; --green:#1d5fd1; --green-dark:#174ca8; --soft-green:#dce8fa; --orange:#bc6338; --soft-orange:#f3dfd5; --blue:#2f6973; --soft-blue:#dcebed; --mono:'DM Mono',monospace; --sans:'DM Sans',sans-serif; --display:'Space Grotesk',sans-serif; color-scheme:light; }
:root.dark { --paper:#111714; --surface:#19221c; --ink:#eef4ed; --muted:#9ca9a0; --line:#334139; --green:#70a7ff; --green-dark:#9bc2ff; --soft-green:#203655; --orange:#e28a5c; --soft-orange:#4a2d24; --blue:#8ac7ce; --soft-blue:#20393d; color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { position:relative; margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:var(--sans); transition:background .25s,color .25s; }
body::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.27; background-image:linear-gradient(to right, color-mix(in srgb, var(--line) 42%, transparent) 1px, transparent 1px),linear-gradient(to bottom, color-mix(in srgb, var(--line) 42%, transparent) 1px, transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom, #000 0, transparent 760px); }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
.site-header { height:80px; max-width:1280px; margin:auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:5; }
.brand { display:flex; align-items:center; gap:10px; font:700 17px var(--display); }
.brand-accent { color:var(--green); }
.brand-mark { display:block; flex:0 0 24px; width:24px; height:24px; background:url('assets/logo-mark.svg') center/contain no-repeat; }
:root.dark .brand-mark { background-image:url('assets/logo-mark-dark.svg'); }
.main-nav { display:flex; align-items:center; gap:31px; margin-left:auto; margin-right:30px; font-size:13px; font-weight:600; }
.main-nav a { padding:28px 0; border-bottom:2px solid transparent; }
.main-nav a:hover,.main-nav a:focus-visible { color:var(--green-dark); border-color:var(--green); }
.header-actions { display:flex; align-items:center; gap:10px; }
.header-cta { padding:10px 12px; background:var(--ink); color:var(--paper); font:500 10px var(--mono); text-transform:uppercase; letter-spacing:1px; }
.header-cta span { color:var(--green); margin-left:8px; }
.theme-toggle,.menu-toggle { background:none; border:1px solid var(--line); width:34px; height:34px; display:grid; place-items:center; cursor:pointer; }
.theme-toggle:hover,.menu-toggle:hover { border-color:var(--green); color:var(--green-dark); }
.theme-toggle .moon { display:none; }
:root.dark .theme-toggle .sun { display:none; }
:root.dark .theme-toggle .moon { display:inline; }
.menu-toggle { display:none; font-size:17px; line-height:1; }
.section-wrap { max-width:1280px; margin:auto; padding-left:64px; padding-right:64px; }
.eyebrow,.chart-overline,.visual-label,.season-note,.footer-meta,.board-topline,.market-sport small,.matchup span,.signal-panel-legend,.responsible-note { font:500 10px var(--mono); text-transform:uppercase; letter-spacing:1px; }
.eyebrow { display:flex; align-items:center; gap:9px; color:var(--green); margin:0 0 23px; }
.eyebrow-dot { width:7px; height:7px; flex:0 0 7px; background:var(--green); border-radius:50%; box-shadow:0 0 0 4px var(--soft-green); }
h1,h2 { font-family:var(--display); font-weight:700; line-height:.99; letter-spacing:0; margin:0; }
h1 { font-size:76px; }
h2 { font-size:64px; }
h1 em,h2 em { color:var(--green); font-style:normal; }
.site-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.8fr); align-items:end; gap:60px; border-bottom:1px solid var(--line); padding-top:30px; padding-bottom:32px; }
.site-intro .eyebrow { margin-bottom:14px; }
.site-intro-description { max-width:470px; margin:0 0 5px; color:var(--muted); font-size:15px; line-height:1.55; }
.hero { min-height:620px; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:center; gap:62px; padding-top:70px; padding-bottom:78px; }
.hero-copy h2 { max-width:600px; }
.hero-description { max-width:475px; color:var(--muted); font-size:17px; line-height:1.6; margin:27px 0 28px; }
.hero-actions { display:flex; align-items:center; gap:25px; }
.button { display:inline-flex; gap:17px; align-items:center; padding:13px 17px; font-size:13px; font-weight:700; }
.button-primary { background:var(--green); color:#fff; }
.button-primary:hover { background:var(--green-dark); }
.text-link { width:max-content; font-size:13px; font-weight:700; border-bottom:1px solid var(--ink); padding-bottom:4px; }
.text-link span { color:var(--green); margin-left:7px; }
.text-link:hover { color:var(--green-dark); border-color:var(--green); }
.season-note { color:var(--muted); margin-top:42px; }
.season-note span { color:var(--ink); }
.season-note i { display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--orange); margin:0 10px 2px; }
.market-visual { position:relative; min-height:455px; display:flex; align-items:center; justify-content:center; }
.market-visual::before { content:''; position:absolute; inset:26px 0 0 40px; background:var(--soft-green); border:1px solid var(--line); }
.visual-label { position:absolute; left:0; top:0; color:var(--green); }
.visual-label span { color:var(--muted); margin-left:12px; }
.market-board { z-index:1; width:min(100%,560px); padding:23px 25px 17px; background:var(--surface); border:1px solid var(--line); box-shadow:10px 10px 0 var(--green); }
.board-topline { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:17px; border-bottom:1px solid var(--line); color:var(--green); }
.board-topline span:last-child { color:var(--muted); }
.board-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:24px 0 21px; }
.chart-overline { display:block; color:var(--muted); margin-bottom:8px; }
.board-heading strong { display:block; max-width:360px; font:600 24px/1.08 var(--display); }
.board-badge,.chart-badge { display:inline-block; padding:5px 7px; background:var(--soft-orange); color:var(--orange); font:500 10px var(--mono); white-space:nowrap; }
.market-tabs { display:flex; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.market-tab { flex:0 0 72px; border:0; border-bottom:2px solid transparent; background:none; padding:13px 8px 11px; color:var(--muted); cursor:pointer; font:500 10px var(--mono); letter-spacing:1px; }
.market-tab:hover,.market-tab.active { color:var(--green-dark); border-color:var(--green); }
.market-list { border-bottom:1px solid var(--line); }
.market-row { display:grid; grid-template-columns:82px minmax(0,1fr) 105px; align-items:center; gap:12px; min-height:78px; border-bottom:1px solid var(--line); }
.market-row[hidden] { display:none; }
.market-row:last-child { border-bottom:0; }
.market-sport { color:var(--green); font:500 11px var(--mono); }
.market-sport small { display:block; color:var(--muted); font-size:8px; margin-top:6px; }
.matchup { display:grid; gap:6px; min-width:0; }
.matchup strong { font:600 19px var(--display); }
.matchup strong small { color:var(--muted); font:500 12px var(--mono); }
.matchup span { color:var(--muted); font-size:9px; letter-spacing:.5px; }
.market-price { display:grid; justify-items:end; gap:4px; }
.market-price small { color:var(--muted); font:500 10px var(--mono); text-decoration:line-through; }
.market-price strong { font:600 18px var(--display); }
.market-price b { font:500 9px var(--mono); }
.price-down { color:var(--orange); }
.price-up { color:var(--blue); }
.board-footer { display:flex; justify-content:space-between; gap:15px; padding-top:13px; color:var(--muted); font:10px var(--mono); }
.board-footer b { color:var(--green); font-weight:400; margin-left:5px; }
.legend-dot { display:inline-block; width:6px; height:6px; background:var(--green); border-radius:50%; margin-right:5px; }
.signal-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); min-height:76px; display:flex; align-items:center; gap:23px; font:500 15px var(--display); }
.signal-strip p { color:var(--muted); margin-right:auto; font:10px var(--mono); text-transform:uppercase; letter-spacing:1px; }
.signal-strip span { white-space:nowrap; }
.signal-strip b { color:var(--orange); font-weight:400; }
.feature { display:grid; grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr); align-items:center; gap:72px; padding-top:128px; padding-bottom:128px; }
.feature-description { max-width:420px; color:var(--muted); font-size:16px; line-height:1.6; margin:24px 0 28px; }
.signal-panel { padding:25px 25px 17px; background:var(--surface); border:1px solid var(--line); box-shadow:10px 10px 0 var(--orange); }
.signal-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.signal-panel-head strong { font:600 20px var(--display); }
.signal-chart { display:block; width:100%; height:auto; margin:28px 0 0; overflow:visible; }
.chart-grid { fill:none; stroke:var(--line); stroke-width:1; stroke-dasharray:3 5; }
.chart-area { fill:var(--soft-green); }
.chart-line { fill:none; stroke:var(--green); stroke-linecap:square; stroke-linejoin:miter; stroke-width:4; }
.chart-point { fill:var(--surface); stroke:var(--orange); stroke-width:4; }
.chart-labels { display:flex; justify-content:space-between; color:var(--muted); font:10px var(--mono); }
.signal-panel-legend { display:flex; justify-content:space-between; padding:14px 0 16px; border-bottom:1px solid var(--line); color:var(--muted); font-size:9px; }
.context-callout { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:12px; padding-top:18px; }
.callout-index { color:var(--orange); font:10px var(--mono); }
.context-callout div { display:grid; gap:5px; }
.context-callout small { color:var(--orange); font:9px var(--mono); letter-spacing:1px; text-transform:uppercase; }
.context-callout strong { font:500 15px var(--display); }
.context-callout > b { color:var(--orange); font:500 11px var(--mono); }
.workflow { display:grid; grid-template-columns:35% 65%; padding-top:0; padding-bottom:128px; }
.workflow-content { padding-top:3px; }
.large-copy { max-width:585px; font:500 22px/1.35 var(--display); margin:0 0 58px; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.principles article { border-top:2px solid var(--green); padding-top:14px; }
.principles article span { color:var(--green); font:10px var(--mono); }
h3 { font:600 18px var(--display); margin:19px 0 10px; }
.principles p { max-width:180px; color:var(--muted); font-size:13px; line-height:1.55; margin:0; }
.responsible { display:grid; grid-template-columns:1fr 1fr; gap:60px; padding-top:68px; padding-bottom:78px; border-top:1px solid var(--line); }
.responsible-copy { max-width:480px; padding-top:4px; }
.responsible-copy > p:first-child { margin:0 0 28px; font:500 22px/1.4 var(--display); }
.responsible-note { margin:0; padding:13px 14px; border-left:3px solid var(--orange); background:var(--soft-orange); color:var(--orange); font-size:9px; line-height:1.55; }
.closing { min-height:310px; padding-top:54px; padding-bottom:54px; display:flex; justify-content:space-between; align-items:flex-end; background:var(--green); color:#fff; }
.closing .eyebrow { color:#d7f4df; }
.closing .eyebrow-dot { background:#d7f4df; box-shadow:0 0 0 4px #ffffff20; }
.closing h2 em { color:#c9dcff; }
.round-arrow { border:1px solid #ffffff70; width:56px; height:56px; display:grid; place-items:center; font-size:25px; }
.round-arrow:hover { background:#ffffff18; }
.site-footer { display:flex; align-items:center; justify-content:space-between; min-height:100px; gap:25px; }
.site-footer p { color:var(--muted); font:500 14px var(--display); }
.footer-disclaimer { max-width:390px; color:var(--muted); font:9px/1.5 var(--mono); letter-spacing:.35px; }
.footer-meta { color:var(--muted); white-space:nowrap; }
@media (max-width:800px) {
  .site-header { height:68px; padding:0 20px; justify-content:flex-start; }
  .main-nav { display:none; position:absolute; top:68px; left:0; right:0; margin:0; padding:10px 20px 20px; background:var(--surface); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; gap:0; }
  .main-nav.open { display:flex; }
  .main-nav a { padding:14px 0; }
  .header-actions { margin-left:auto; gap:6px; }
  .header-cta { padding:8px 7px; font-size:8px; letter-spacing:.6px; }
  .theme-toggle { flex:0 0 34px; }
  .menu-toggle { display:grid; flex:0 0 34px; }
  .site-intro { grid-template-columns:1fr; gap:18px; padding:34px 20px 36px; }
  h1 { font-size:56px; }
  h2 { font-size:52px; }
  .site-intro-description { max-width:520px; margin-bottom:0; }
  .hero { grid-template-columns:1fr; gap:50px; padding:72px 20px 68px; }
  .market-visual { min-height:410px; }
  .market-visual::before { inset:15px 0 0 20px; }
  .market-board { width:calc(100% - 20px); box-shadow:7px 7px 0 var(--green); padding:18px 16px 13px; }
  .signal-strip { padding:20px; flex-wrap:wrap; gap:13px; }
  .signal-strip p { width:100%; margin-bottom:4px; }
  .feature { grid-template-columns:1fr; gap:42px; padding:82px 20px; }
  .signal-panel { box-shadow:7px 7px 0 var(--orange); padding:20px 16px 14px; }
  .workflow { grid-template-columns:1fr; gap:38px; padding:0 20px 82px; }
  .principles { gap:22px; }
  .responsible { grid-template-columns:1fr; gap:38px; padding:54px 20px 62px; }
  .closing { padding:44px 20px; }
  .site-footer { padding:28px 20px; flex-wrap:wrap; gap:16px; }
  .site-footer p { order:3; width:100%; }
  .footer-disclaimer { max-width:100%; order:4; }
}
@media (max-width:480px) {
  .site-header { padding-left:12px; padding-right:12px; }
  .brand { gap:0; }
  .brand > span:last-child { display:none; }
  .header-actions { gap:4px; }
  .header-cta { padding:8px 5px; font-size:7px; letter-spacing:0; }
  h1 { font-size:46px; }
  h2 { font-size:44px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:18px; }
  .hero-description { font-size:16px; }
  .market-visual { min-height:390px; }
  .board-heading strong { font-size:21px; }
  .market-row { grid-template-columns:58px minmax(0,1fr) 85px; gap:8px; min-height:72px; }
  .market-sport { font-size:10px; }
  .matchup strong { font-size:16px; }
  .matchup span { font-size:8px; }
  .market-price strong { font-size:16px; }
  .market-price small,.market-price b { font-size:8px; }
  .board-footer { font-size:8px; }
  .principles { grid-template-columns:1fr; }
  .principles p { max-width:none; }
  .closing h2 { font-size:43px; }
  .footer-meta { font-size:9px; }
}

.landing { min-height:calc(100vh - 180px); display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.55fr); align-items:center; gap:100px; padding-top:88px; padding-bottom:92px; }
.landing-copy h1 { font-size:clamp(64px,8vw,108px); }
.landing-description { max-width:470px; color:var(--muted); font-size:18px; line-height:1.55; margin:28px 0 0; }
.coming-panel { padding:28px; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--green); box-shadow:10px 10px 0 var(--soft-green); }
.panel-label { margin:0 0 20px; color:var(--green); font:500 10px var(--mono); text-transform:uppercase; letter-spacing:1px; }
.coming-panel h2 { font-size:clamp(34px,4vw,52px); }
.coming-panel p:not(.panel-label) { max-width:310px; color:var(--muted); font-size:15px; line-height:1.55; margin:20px 0 24px; }
.coming-soon { display:inline-block; padding:7px 9px; background:var(--soft-green); color:var(--green-dark); font:500 9px var(--mono); letter-spacing:1px; text-transform:uppercase; }
.feature-list { display:grid; grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr); gap:80px; border-top:1px solid var(--line); padding-top:72px; padding-bottom:100px; }
.section-heading .eyebrow { margin-bottom:20px; }
.section-heading h2 { font-size:clamp(40px,5vw,64px); }
.feature-placeholder { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:start; gap:18px; border-top:2px solid var(--green); padding-top:16px; }
.feature-number { color:var(--green); font:500 10px var(--mono); }
.feature-placeholder h3 { margin:0 0 9px; font-size:20px; }
.feature-placeholder p { color:var(--muted); font-size:14px; line-height:1.55; margin:0; }
.site-footer { border-top:1px solid var(--line); }
@media (max-width:800px) {
  .landing { min-height:auto; grid-template-columns:1fr; gap:54px; padding:72px 20px 86px; }
  .landing-copy h1 { font-size:clamp(58px,15vw,84px); }
  .landing-description { max-width:520px; font-size:16px; }
  .coming-panel { box-shadow:7px 7px 0 var(--soft-green); }
  .feature-list { grid-template-columns:1fr; gap:42px; padding:58px 20px 78px; }
  .site-footer { padding:28px 20px; }
}