:root{
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --line: #E7E5DF;
  --ink: #14151A;
  --ink-dim: #6B6D76;
  --accent: #0F5D3C;
  --accent-soft: #E6F0EA;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{background:var(--bg); color-scheme:light;}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'JetBrains Mono', monospace;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:980px; margin:0 auto; padding:0 24px;}

nav{display:flex; align-items:center; justify-content:space-between; padding:28px 0;}
.logo{display:flex; align-items:center;}
.logo-mark{height:26px; width:auto; display:block;}
.navlinks{display:flex; gap:36px; font-size:14px; color:var(--ink-dim);}
.navlinks a:hover{color:var(--ink);}
.navcta{background:var(--ink); color:#fff; padding:10px 18px; border-radius:8px; font-size:14px; font-weight:600;}
@media(max-width:680px){.navlinks{display:none;}}

.hero{padding:88px 0 64px;}
.kicker{
  color:var(--accent); font-size:13px; font-weight:600; letter-spacing:0.02em;
  margin-bottom:20px; display:flex; align-items:center; gap:8px;
}
.kicker::before{content:""; width:6px; height:6px; background:var(--accent); border-radius:50%;}
h1{
  font-size:clamp(38px, 6vw, 64px); font-weight:800; letter-spacing:-0.03em;
  line-height:1.05; max-width:640px; margin-bottom:22px;
}
h1 em{font-style:normal; color:var(--accent);}
.sub{color:var(--ink-dim); font-size:18px; line-height:1.6; max-width:480px; margin-bottom:36px;}
.herobtns{display:flex; gap:12px; margin-bottom:8px;}
.btn-primary{background:var(--ink); color:#fff; padding:14px 26px; border-radius:8px; font-weight:600; font-size:15px;}
.btn-ghost{border:1px solid var(--line); padding:14px 26px; border-radius:8px; font-weight:600; font-size:15px;}

.matchgrid{
  margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
@media(max-width:680px){.matchgrid{grid-template-columns:1fr;}}
.match{background:var(--surface); padding:22px;}
.match .lg{font-size:11px; color:var(--ink-dim); margin-bottom:14px; letter-spacing:0.04em;}
.match .teams{display:flex; justify-content:space-between; font-weight:700; font-size:15px; margin-bottom:16px;}
.match .odds{display:flex; gap:8px; margin-bottom:16px;}
.odd{flex:1; text-align:center; padding:8px 0; border:1px solid var(--line); border-radius:6px;}
.odd .v{font-family:'JetBrains Mono'; font-weight:600; font-size:14px;}
.odd .l{font-size:10px; color:var(--ink-dim); margin-top:2px;}
.odd.pick{border-color:var(--accent); background:var(--accent-soft);}
.match .action{font-size:13px; font-weight:600; color:var(--accent);}

.section{padding:80px 0; border-top:1px solid var(--line);}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; flex-wrap:wrap; gap:16px;}
h2{font-size:clamp(26px,3.5vw,36px); font-weight:800; letter-spacing:-0.02em;}
.section-note{color:var(--ink-dim); font-size:15px; max-width:340px;}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
@media(max-width:680px){.steps{grid-template-columns:1fr;}}
.step .n{font-family:'JetBrains Mono'; color:var(--accent); font-size:13px; font-weight:600; margin-bottom:10px;}
.step h3{font-size:18px; font-weight:700; margin-bottom:8px;}
.step p{color:var(--ink-dim); font-size:14px; line-height:1.6;}

.board{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface);}
.brow{display:grid; grid-template-columns:32px 1fr auto; gap:16px; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line); font-size:14px;}
.brow:last-child{border-bottom:none;}
.brow.first{background:var(--accent-soft);}
.brow .rank{font-family:'JetBrains Mono'; color:var(--ink-dim); font-size:13px;}
.brow.first .rank{color:var(--accent); font-weight:700;}
.brow .name{font-weight:600;}
.brow .pts{font-family:'JetBrains Mono'; font-weight:700;}

.pricing{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media(max-width:900px){.pricing{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.pricing{grid-template-columns:1fr;}}
.pcard{border:1px solid var(--line); border-radius:14px; padding:30px 24px; background:var(--surface);}
.pcard.hi{border-color:var(--ink); background:var(--ink); color:#fff;}
.pcard h3{font-size:18px; font-weight:700; margin-bottom:6px;}
.pcard .p{font-family:'JetBrains Mono'; font-size:28px; font-weight:600; margin:14px 0;}
.pcard ul{list-style:none; font-size:14px; line-height:2.1; color:var(--ink-dim);}
.pcard.hi ul{color:#B8BAC2;}
.pcard li::before{content:"— ";}

footer{padding:36px 0; border-top:1px solid var(--line); color:var(--ink-dim); font-size:13px; text-align:center;}