:root{
  --bg:#1C1D21;
  --bg-2:#232429;
  --bg-3:#2A2C32;
  --line:rgba(255,255,255,.08);
  --orange:#8AD646;
  --orange-glow:rgba(138,214,70,.18);
  --orange-faint-4:rgba(138,214,70,.4);
  --orange-faint-08:rgba(138,214,70,.08);
  --green:#FF7F00;
  --txt:#F4F5F7;
  --muted:#9A9DA6;
  --muted-2:#6E717B;
  --r:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Outfit',system-ui,sans-serif;
  background:var(--bg);
  color:var(--txt);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}

header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(28,29,33,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:11px;font-weight:700;font-size:21px}
.logo .mark{
  width:34px;height:34px;border-radius:10px;
  background:var(--orange);
  display:grid;place-items:center;
  position:relative;
}
.logo .mark::before{
  content:"";width:15px;height:15px;border-radius:50%;
  background:var(--bg);
  box-shadow:inset 0 0 0 2.5px var(--orange);
  background:
    linear-gradient(115deg,transparent 46%,var(--bg) 46% 54%,transparent 54%),
    linear-gradient(65deg,transparent 46%,var(--bg) 46% 54%,transparent 54%),
    #fff;
}
.logo b{color:var(--orange)}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{color:var(--muted);font-weight:500;font-size:15px;transition:color .2s}
.nav-links a:hover{color:var(--txt)}
.nav-cta{
  background:var(--orange);color:#1C1D21;font-weight:700;font-size:15px;
  padding:11px 22px;border-radius:999px;transition:transform .15s,filter .2s;
}
.nav-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
@media(max-width:860px){.nav-links{display:none}}

.hero{position:relative;padding:50px 0;overflow:hidden;background:url('/app/bg.png') no-repeat;background-size:668px;background-position:calc(50% + 259px) 18px}

.hero-grid{display:grid;grid-template-columns:1.32fr .68fr;gap:40px;align-items:center;position:relative;z-index:2}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:34px}
.pill{
  display:inline-flex;align-items:center;gap:9px;
  background:#292A31;
  padding:8px 16px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--muted);
}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px var(--orange-glow);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
h1{
  font-size:clamp(38px,4.4vw,56px);line-height:1.04;font-weight:700;
}
h1 .o{color:var(--orange)}
.lead{font-size:19px;color:var(--muted);max-width:520px;text-wrap:pretty}
.lead b{color:var(--txt);font-weight:600}

.stores{display:flex;gap:14px;flex-wrap:wrap}
.store{
  display:flex;align-items:center;gap:13px;
  background:#fff;color:#000;border-radius:14px;
  padding:11px 22px 11px 18px;transition:transform .15s,box-shadow .2s;
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}
.store:hover{transform:translateY(-3px);box-shadow:0 14px 38px rgba(0,0,0,.45)}
.store svg{width:26px;height:26px;flex-shrink:0}
.store .t{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.store .t small{font-size:11px;font-weight:500;opacity:.7}
.store .t span{font-size:19px;font-weight:700}

.hero-meta{display:flex;gap:30px;margin-top:40px}
.hero-meta .m b{display:block;font-size:26px;font-weight:700;color:var(--txt)}
.hero-meta .m span{font-size:13.5px;color:var(--muted-2)}
.hero-meta .m b em{color:var(--orange);font-style:normal}

.phone-stage{position:relative;display:grid;place-items:center end;perspective:1600px}
.phone{
  width:251px;height:510px;border-radius:20px;margin-right:30px;
  background:#0d0e10;
  padding:11px;
  box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,255,255,.04);
  transform:rotateY(-19deg) rotateX(12deg) rotateZ(6deg);
  transition:transform .5s ease;
  position:relative;
}
.phone:hover{transform:rotateY(-6deg) rotateX(2deg)}
.phone .notch{
  position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:120px;height:27px;background:#0d0e10;border-radius:0 0 16px 16px;z-index:5;
}
.screen{
  width:100%;height:100%;border-radius:36px;overflow:hidden;
  background:var(--bg);display:flex;flex-direction:column;
  border:1px solid rgba(255,255,255,.06);
}
.sbar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px 8px;font-size:13px;font-weight:600}
.sbar .dots{display:flex;gap:5px;align-items:center}
.sbar .dots i{width:15px;height:11px;background:var(--txt);border-radius:2px;display:inline-block;opacity:.85}

.ahead{display:flex;justify-content:space-between;align-items:center;padding:8px 18px 14px}
.ahead .h-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px}
.ahead .h-logo .m{width:22px;height:22px;border-radius:7px;background:var(--orange)}
.ahead .h-logo b{color:var(--orange)}
.ahead .icns{display:flex;gap:14px;color:var(--muted)}
.ahead .icns svg{width:19px;height:19px}

.tabs{display:flex;gap:7px;padding:0 14px 12px;overflow:hidden}
.tab{font-size:12.5px;font-weight:600;color:var(--muted);padding:7px 13px;border-radius:999px;background:var(--bg-2);white-space:nowrap}
.tab.live{background:var(--orange);color:#1C1D21;display:flex;align-items:center;gap:6px}
.tab.live::before{content:"";width:6px;height:6px;border-radius:50%;background:#1C1D21}

.mlist{flex:1;overflow:hidden;padding:0 14px}
.comp{display:flex;align-items:center;gap:8px;padding:13px 4px 9px;font-size:11.5px;font-weight:600;color:var(--muted-2);text-transform:uppercase}
.comp .flag{width:16px;height:11px;border-radius:2px;background:var(--bg-3)}
.match{
  background:var(--bg-2);border:1px solid var(--line);border-radius:13px;
  padding:11px 13px;margin-bottom:8px;display:flex;align-items:center;gap:10px;
}
.match .min{
  flex-shrink:0;width:34px;text-align:center;font-size:12px;font-weight:700;color:var(--green);
}
.match .min.ft{color:var(--muted-2)}
.match .teams{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.match .tr{display:flex;align-items:center;gap:8px}
.match .tr .cr{width:16px;height:16px;border-radius:50%;flex-shrink:0}
.match .tr .nm{font-size:13px;font-weight:500;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.match .sc{flex-shrink:0;font-size:14px;font-weight:700;color:var(--txt);width:18px;text-align:right}
.match .sc.g{color:var(--orange)}
.match.featured{border-color:var(--orange-faint-4);background:linear-gradient(180deg,var(--orange-faint-08),var(--bg-2))}

.evbox{margin:4px 0 0;background:var(--bg-3);border-radius:13px;padding:11px 13px}
.evbox .eh{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;margin-bottom:9px}
.evbox .eh .pin{color:var(--orange)}
.ev{display:flex;align-items:center;gap:9px;font-size:12px;margin-bottom:7px}
.ev .ec{width:14px;height:18px;border-radius:3px;flex-shrink:0}
.ev .ec.goal{background:var(--green)}
.ev .ec.yel{background:#F5C518}
.ev b{color:var(--txt);font-weight:600}
.ev span{color:var(--muted-2);margin-left:auto;font-weight:600}

section.block{padding:70px 0;position:relative}
#features{background:#292A31}
.eyebrow{font-size:13px;font-weight:700;text-transform:uppercase;color:var(--orange);margin-bottom:16px}
.sec-title{font-size:clamp(32px,4vw,46px);font-weight:700;line-height:1.05;max-width:680px;margin-bottom:18px;text-wrap:balance}
.sec-sub{font-size:18px;color:var(--muted);max-width:560px}
.sec-head{margin-bottom:54px}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat{
  background:var(--bg-2);border-radius:var(--r);
  padding:30px 26px;transition:transform .2s,border-color .2s,background .2s;
}
.feat:hover{transform:translateY(-4px);background:#31323A}
.feat .ico{
  width:50px;height:50px;border-radius:13px;display:grid;place-items:center;margin-bottom:20px;
  background:rgba(255,255,255,.07);
  color:var(--orange);
}

.feat .ico svg{width:26px;height:26px}
.feat h3{font-size:20px;font-weight:700;margin-bottom:9px}
.feat p{font-size:15px;color:var(--muted);text-wrap:pretty}

.coverage{background:#31323A}
.cov-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.cov-stat{display:flex;align-items:baseline;gap:14px;margin-bottom:8px}
.cov-stat b{font-size:clamp(64px,9vw,104px);font-weight:900;line-height:.9;color:var(--orange)}
.cov-stat span{font-size:20px;font-weight:600;color:var(--txt)}
.leagues{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.lg{background:var(--bg-3);border:1px solid var(--line);border-radius:999px;padding:9px 17px;font-size:14px;font-weight:500;color:var(--muted)}
.lg b{color:var(--txt);font-weight:600}

.wyg-grid{display:grid;grid-template-columns:.95fr 1.05fr;align-items:center;gap:50px}
.wyg-stage{display:grid;place-items:center}
.splitp{width:288px;border-radius:42px;padding:10px;background:#0d0e10;box-shadow:0 40px 80px rgba(0,0,0,.55),0 0 0 1.5px rgba(255,255,255,.05);position:relative}
.splits{border-radius:33px;overflow:hidden;height:560px;position:relative}
.splith{position:absolute;inset:0;overflow:hidden}
.splith.lite{clip-path:polygon(100% 0,100% 100%,38% 100%,62% 0)}
.splitline{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--orange);transform:skewX(-13deg);box-shadow:0 0 16px var(--orange);z-index:4}
.wsc{width:100%;height:100%;display:flex;flex-direction:column;width:288px}
.wsc.d{background:#1C1D21;color:#F4F5F7}
.wsc.l{background:#F4F5F7;color:#1C1D21}
.wsc-bar{display:flex;justify-content:space-between;align-items:center;padding:16px 22px 8px;font-size:12px;font-weight:600}
.wsc-head{display:flex;align-items:center;gap:7px;padding:4px 20px 14px;font-weight:700;font-size:17px}
.wsc-head .m{width:20px;height:20px;border-radius:6px;background:var(--orange)}
.wsc-head b{color:var(--orange)}
.wsc-tabs{display:flex;gap:6px;padding:0 16px 12px}
.wsc-tab{font-size:11px;font-weight:600;padding:7px 12px;border-radius:999px;white-space:nowrap}
.wsc.d .wsc-tab{background:#232429;color:#9A9DA6}
.wsc.l .wsc-tab{background:#E6E7EB;color:#6E717B}
.wsc-tab.on{background:var(--orange);color:#10210a}
.wsc-list{padding:0 16px;display:flex;flex-direction:column;gap:8px}
.wsc-lab{font-size:10px;font-weight:700;text-transform:uppercase;padding:6px 2px 2px}
.wsc.d .wsc-lab{color:#6E717B}
.wsc.l .wsc-lab{color:#9094A0}
.wsc-row{border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:10px}
.wsc.d .wsc-row{background:#232429;border:1px solid rgba(255,255,255,.06)}
.wsc.l .wsc-row{background:#fff;border:1px solid #E6E7EB}
.wsc-min{font-size:11px;font-weight:700;color:var(--orange);width:26px;flex-shrink:0}
.wsc-tm{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.wsc-tr{display:flex;align-items:center;gap:7px}
.wsc-tr .cr{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.wsc-tr .nm{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsc-sc{font-size:13px;font-weight:700;width:14px;text-align:right}
.wsc-sc.g{color:var(--orange)}

.cta{position:relative;text-align:center;padding:70px 0;overflow:hidden;background:#292A31}

.cta-in{position:relative;z-index:2}
.cta h2{font-size:clamp(36px,5vw,58px);font-weight:700;margin-bottom:20px;line-height:1.03}
.cta p{font-size:19px;color:var(--muted);margin-bottom:38px}
.cta .stores{justify-content:center}

/* footer */
footer{border-top:1px solid var(--line);padding:46px 0}
.foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot .fl{font-size:14px;color:var(--muted-2)}
.foot .fr{display:flex;gap:26px}
.foot .fr a{font-size:14px;color:var(--muted);transition:color .2s}
.foot .fr a:hover{color:var(--txt)}

@media(max-width:860px){
  .hero{background:none}
  .hero-grid{grid-template-columns:1fr;gap:60px}
  .hero-copy{align-items:center;text-align:center}
  .lead{text-align:center}
  .stores{justify-content:center}
	.phone{margin-right:0;}
  .phone-stage{order:1;place-items:center}
  .features{grid-template-columns:1fr}
  .cov-grid{grid-template-columns:1fr;gap:36px}
  .wyg-grid{grid-template-columns:1fr;gap:36px}
  .hero{padding:48px 0 60px}
  section.block{padding:64px 0}
}

:root.orange-mode{--orange:#FF7F00;--orange-glow:rgba(255,127,0,.18);--orange-faint-4:rgba(255,127,0,.4);--orange-faint-08:rgba(255,127,0,.08)}
.phone{cursor:pointer}