/* spursbet.co.ke */
:root{--sb-bg:#fff;--sb-soft:#f5f7fb;--sb-tint:#eef2ff;--sb-ink:#0f172a;--sb-sub:#5b6475;--sb-line:#e6e9f2;--sb-blue:#2f6bff;--sb-violet:#7c4dff;--sb-mint:#12b981;--sb-grad:linear-gradient(120deg,#2f6bff,#7c4dff);--sb-r:20px;--sb-pop:cubic-bezier(.34,1.56,.64,1);--sb-out:cubic-bezier(.16,1,.3,1)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
.sb-page{margin:0;background:var(--sb-bg);color:var(--sb-ink);font:400 17px/1.75 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
img{display:block;max-width:100%;height:auto}
a{color:var(--sb-blue)}
h1,h2,h3,p{margin:0}
.sb-ico{width:20px;height:20px;flex:none}
.sb-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
.sb-skip{position:absolute;left:-999px;top:8px;z-index:300;padding:8px 14px;border-radius:10px;background:var(--sb-ink);color:#fff}
.sb-skip:focus{left:8px}
:focus-visible{outline:2px solid var(--sb-violet);outline-offset:3px}
.sb-amt{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.92em;font-weight:700;color:var(--sb-blue);white-space:nowrap}
.sb-progress{position:fixed;left:0;right:0;top:0;z-index:200;height:3px;pointer-events:none}
.sb-progress span{display:block;height:100%;width:0;background:var(--sb-grad)}

/* header pill */
.sb-top{position:sticky;top:12px;z-index:100;padding:0 16px}
.sb-top__pill{display:flex;align-items:center;gap:20px;max-width:1120px;height:62px;margin:12px auto 0;padding:0 10px 0 22px;border-radius:999px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 1px var(--sb-line),0 12px 30px -18px rgba(15,23,42,.35)}
.sb-name{display:inline-flex;align-items:flex-start;gap:3px;font:800 24px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:-.03em;color:var(--sb-ink);text-decoration:none}
.sb-name sup{padding:2px 5px;border-radius:6px;background:var(--sb-grad);color:#fff;font-size:10px;letter-spacing:.06em;line-height:1.2}
.sb-top__nav{flex:1}
.sb-top__nav ul{display:flex;justify-content:center;gap:4px;margin:0;padding:0;list-style:none}
.sb-top__nav a{display:block;padding:8px 16px;border-radius:999px;color:var(--sb-sub);font-weight:600;font-size:15.5px;text-decoration:none;transition:color .2s,background .2s}
.sb-top__nav a:hover{color:var(--sb-ink);background:var(--sb-soft)}
.sb-top__nav a[aria-current]{color:var(--sb-blue);background:var(--sb-tint)}
.sb-top__btns{display:flex;align-items:center;gap:8px;margin-left:auto}
.sb-btn{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 18px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;transition:transform .35s var(--sb-pop),box-shadow .25s}
.sb-btn--ghost{color:var(--sb-ink);background:var(--sb-soft);box-shadow:inset 0 0 0 1px var(--sb-line)}
.sb-btn--ghost:hover{transform:translateY(-2px)}
.sb-btn--fill{color:#fff;background:var(--sb-grad);box-shadow:0 8px 20px -10px rgba(47,107,255,.9)}
.sb-btn--fill:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(124,77,255,.9)}
.sb-top__more{display:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--sb-soft);color:var(--sb-ink);cursor:pointer;place-items:center}

/* bottom sheet */
.sb-sheet{position:fixed;inset:0;z-index:150;background:rgba(15,23,42,.45);display:flex;align-items:flex-end}
.sb-sheet[hidden]{display:none}
.sb-sheet__panel{width:100%;padding:10px 20px calc(24px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;background:#fff;animation:sheet .45s var(--sb-out)}
@keyframes sheet{from{transform:translateY(100%)}}
.sb-sheet__bar{position:relative;display:flex;justify-content:center;align-items:center;height:34px}
.sb-sheet__grip{width:44px;height:5px;border-radius:5px;background:var(--sb-line)}
.sb-sheet__x{position:absolute;right:0;top:2px;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:var(--sb-soft);color:var(--sb-ink);cursor:pointer}
.sb-sheet__list{margin:6px 0 18px;padding:0;list-style:none}
.sb-sheet__list a{display:block;padding:13px 4px;border-bottom:1px solid var(--sb-line);color:var(--sb-ink);font-weight:700;font-size:19px;text-decoration:none}
.sb-sheet__list a[aria-current]{color:var(--sb-blue)}

/* hero */
.sb-hero{position:relative;overflow:hidden;padding:60px 0 30px;text-align:center}
.sb-hero--short{padding:60px 0 40px}
.sb-hero__blob{position:absolute;left:50%;top:-120px;width:900px;height:620px;translate:-50% 0;background:radial-gradient(closest-side,rgba(47,107,255,.22),transparent),radial-gradient(closest-side at 70% 60%,rgba(124,77,255,.22),transparent);filter:blur(20px);animation:drift 12s ease-in-out infinite alternate;pointer-events:none}
@keyframes drift{to{transform:translate(40px,30px) scale(1.06)}}
.sb-hero__in{position:relative}
.sb-crumb{display:flex;justify-content:center;gap:8px;margin-bottom:14px;font-size:14px;font-weight:600;color:var(--sb-sub)}
.sb-crumb a{color:var(--sb-sub);text-decoration:none}
.sb-crumb a:hover{color:var(--sb-blue)}
.sb-hero__h1{max-width:900px;margin:0 auto 20px;font-size:clamp(38px,5.6vw,64px);font-weight:800;line-height:1.06;letter-spacing:-.035em;background:linear-gradient(180deg,#0f172a 40%,#38415a);-webkit-background-clip:text;background-clip:text;color:transparent}
.sb-hero__lead p{max-width:720px;margin:0 auto 14px;font-size:19px;line-height:1.65;color:var(--sb-sub)}
.sb-hero__act{margin:18px 0 10px}
.sb-hero__stage{position:relative;display:flex;justify-content:center;margin-top:34px}
.sb-hero__device{width:280px;padding:10px 10px 0;border-radius:40px 40px 0 0;background:#0f172a;box-shadow:0 40px 80px -30px rgba(47,107,255,.6)}
.sb-hero__device img{width:100%;max-height:420px;object-fit:cover;object-position:top;border-radius:30px 30px 0 0}
.sb-hero__chips{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.sb-chip{position:absolute;display:flex;flex-direction:column;align-items:flex-start;padding:12px 18px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--sb-line),0 18px 40px -20px rgba(15,23,42,.45);text-align:left;animation:float 6s ease-in-out infinite}
.sb-chip b{font:700 22px/1.1 "JetBrains Mono",monospace;background:var(--sb-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sb-chip span{font-size:13px;font-weight:600;color:var(--sb-sub)}
.sb-chip--1{left:calc(50% - 330px);top:40px}
.sb-chip--2{right:calc(50% - 330px);top:120px;animation-delay:-2s}
.sb-chip--3{left:calc(50% - 300px);top:240px;animation-delay:-4s}
@keyframes float{50%{transform:translateY(-10px)}}

/* CTA */
.sb-cta{position:relative;display:inline-flex;padding:2px;border-radius:999px;background:linear-gradient(90deg,#2f6bff,#7c4dff,#12b981,#2f6bff);background-size:300% 100%;text-decoration:none;animation:ring 5s linear infinite;box-shadow:0 14px 30px -14px rgba(47,107,255,.9);transition:transform .4s var(--sb-pop)}
.sb-cta__in{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;background:var(--sb-grad);color:#fff;font-weight:800;font-size:17px}
.sb-cta__arr{transition:transform .35s var(--sb-pop)}
.sb-cta:hover{transform:translateY(-3px) scale(1.02)}
.sb-cta:hover .sb-cta__arr{transform:translate(3px,-3px)}
.sb-cta--xl .sb-cta__in{min-height:60px;padding:0 34px;font-size:19px}
.sb-cta--xl{animation:ring 5s linear infinite,nudge 3.2s var(--sb-pop) infinite}
.sb-cta--light .sb-cta__in{background:#fff;color:var(--sb-blue)}
.sb-cta--wide,.sb-cta--wide .sb-cta__in{width:100%;justify-content:center}
@keyframes ring{to{background-position:300% 0}}
@keyframes nudge{0%,75%,100%{transform:none}82%{transform:translateY(-5px)}90%{transform:translateY(0) scale(.99)}}

/* reading column */
.sb-read{max-width:820px;padding-top:30px;padding-bottom:70px}
.sb-index{margin-bottom:34px;border-radius:var(--sb-r);background:var(--sb-soft);box-shadow:inset 0 0 0 1px var(--sb-line)}
.sb-index summary{display:flex;align-items:center;gap:10px;padding:16px 20px;cursor:pointer;list-style:none;font-weight:700}
.sb-index summary::-webkit-details-marker{display:none}
.sb-index summary .sb-ico{color:var(--sb-blue)}
.sb-index summary em{margin-left:auto;font-style:normal;font-size:14px;font-weight:600;color:var(--sb-sub)}
.sb-index__chev{transition:transform .3s}
.sb-index[open] .sb-index__chev{transform:rotate(180deg)}
.sb-index ol{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px;margin:0;padding:0 20px 18px;list-style:none}
.sb-index a{display:flex;gap:10px;padding:6px 0;color:var(--sb-ink);font-size:15px;line-height:1.4;text-decoration:none}
.sb-index a span{font:700 13px/1.6 "JetBrains Mono",monospace;color:var(--sb-violet)}
.sb-index a:hover{color:var(--sb-blue)}

.sb-sec{padding:6px 0 30px;margin-bottom:30px}
.sb-sec+.sb-sec{border-top:1px solid var(--sb-line);padding-top:36px}
.sb-sec__label{margin-bottom:8px!important;font:700 12.5px/1 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--sb-blue)}
.sb-sec__title{margin-bottom:18px;font-size:clamp(27px,3.2vw,36px);font-weight:800;line-height:1.15;letter-spacing:-.025em}
.sb-sec p{margin-bottom:16px;color:#2c3445}
.sb-sec>:last-child{margin-bottom:0}
.sb-h3{margin:28px 0 10px;font-size:22px;font-weight:700;letter-spacing:-.015em}
.sb-steps{counter-reset:k;display:grid;gap:10px;margin:0 0 18px;padding:0;list-style:none}
.sb-steps li{counter-increment:k;display:flex;gap:14px;align-items:flex-start;padding:12px 16px;border-radius:14px;background:var(--sb-soft)}
.sb-steps li::before{content:counter(k);flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--sb-grad);color:#fff;font:700 13px/1 "JetBrains Mono",monospace}
.sb-bullets{display:grid;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.sb-bullets li{position:relative;padding-left:22px}
.sb-bullets li::before{content:"";position:absolute;left:4px;top:.68em;width:8px;height:8px;border-radius:50%;background:var(--sb-grad);box-shadow:0 0 0 3px var(--sb-tint)}
.sb-timeline{position:relative;display:grid;gap:12px;margin:4px 0 20px;padding:0 0 0 4px;list-style:none}
.sb-timeline::before{content:"";position:absolute;left:21px;top:16px;bottom:16px;width:2px;background:linear-gradient(var(--sb-blue),var(--sb-violet))}
.sb-timeline li{position:relative;display:flex;gap:16px;align-items:center;font-weight:600}
.sb-timeline__n{position:relative;flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--sb-blue);color:var(--sb-blue);font:700 15px/1 "JetBrains Mono",monospace}
.sb-table{margin:4px 0 22px;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--sb-line)}
.sb-table table{width:100%;border-collapse:collapse;font-size:15.5px}
.sb-table th{padding:13px 16px;background:var(--sb-soft);color:var(--sb-sub);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:left}
.sb-table td{padding:12px 16px;border-top:1px solid var(--sb-line);vertical-align:top}
.sb-table td:first-child{font-weight:700}
.sb-callout{position:relative;margin:4px 0 20px;padding:16px 20px 16px 24px;border-radius:14px;background:#f3f0ff}
.sb-callout::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:4px;background:var(--sb-grad)}
.sb-callout p{margin:0!important;font-weight:600}

/* bento screenshot */
.sb-bento{display:grid;grid-template-columns:260px minmax(0,1fr);gap:14px;margin:8px 0 24px}
.sb-bento__phone{display:grid;place-items:center;padding:24px 20px 0;border-radius:var(--sb-r);background:linear-gradient(160deg,var(--sb-tint),#f4efff);overflow:hidden}
.sb-bento__phone img{width:200px;max-height:360px;object-fit:cover;object-position:top;border-radius:22px 22px 0 0;border:6px solid #0f172a;border-bottom:0;transition:transform .6s var(--sb-out)}
.sb-bento:hover .sb-bento__phone img{transform:translateY(-8px)}
.sb-bento__cap{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:22px;border-radius:var(--sb-r);background:var(--sb-soft)}
.sb-bento__tag{display:inline-flex;align-items:center;gap:6px;font:700 12px/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--sb-violet)}
.sb-bento__tag .sb-ico{width:16px;height:16px}
.sb-bento__cap strong{font-size:22px;letter-spacing:-.02em}
.sb-bento__cap>span:last-child{color:var(--sb-sub);font-size:15.5px;line-height:1.55}

/* banner */
.sb-banner{position:relative;overflow:hidden;margin:4px 0 40px;padding:34px 36px;border-radius:26px;background:var(--sb-grad);color:#fff;isolation:isolate}
.sb-banner__glow{position:absolute;right:-80px;top:-80px;z-index:-1;width:300px;height:300px;border-radius:50%;background:radial-gradient(closest-side,rgba(18,185,129,.65),transparent);animation:drift 7s ease-in-out infinite alternate}
.sb-banner__kicker{font:700 12.5px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.sb-banner__big{margin:10px 0 8px!important;font-size:clamp(32px,4.6vw,48px);font-weight:800;line-height:1.05;letter-spacing:-.03em}
.sb-banner__txt{max-width:520px;margin-bottom:20px!important;opacity:.92}
.sb-banner__row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.sb-banner__row small{font-size:13px;opacity:.8}
.sb-banner .sb-cta{background:rgba(255,255,255,.55);animation:none;box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}

/* faq */
.sb-faqs{display:grid;gap:10px}
.sb-faq{border-radius:16px;background:var(--sb-soft);transition:background .25s,box-shadow .25s}
.sb-faq[open]{background:#fff;box-shadow:0 0 0 1px var(--sb-line),0 16px 30px -22px rgba(15,23,42,.4)}
.sb-faq summary{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:17px 20px;cursor:pointer;list-style:none;font-weight:700}
.sb-faq summary::-webkit-details-marker{display:none}
.sb-faq__chev{color:var(--sb-blue);transition:transform .4s var(--sb-pop)}
.sb-faq[open] .sb-faq__chev{transform:rotate(180deg)}
.sb-faq p{margin:0!important;padding:0 20px 18px;color:var(--sb-sub)}

/* contact */
.sb-contact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}
.sb-contact__card{padding:20px;border-radius:var(--sb-r);background:var(--sb-soft)}
.sb-contact__card .sb-ico{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--sb-grad);color:#fff}
.sb-contact__card p{margin:0!important}
.sb-contact__k{margin-top:12px!important;font:700 12px/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--sb-sub)}
.sb-contact__v{margin-top:6px!important;font-size:18px;font-weight:800;word-break:break-word}
.sb-contact__t{margin-top:4px!important;font-size:14.5px;color:var(--sb-sub)}

/* footer */
.sb-foot{padding:60px 0 40px;background:#0f172a;color:#aab3c5}
.sb-foot__top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:36px}
.sb-name--foot{color:#fff}
.sb-foot__top p{max-width:360px;margin-top:14px;font-size:15px}
.sb-foot h2{margin:0 0 12px;font:700 12.5px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#8ea6ff}
.sb-foot ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.sb-foot nav a{color:#dfe5f1;font-size:15px;text-decoration:none}
.sb-foot nav a:hover{color:#fff;text-decoration:underline}
.sb-foot__rg{display:flex;gap:14px;align-items:flex-start;margin-top:36px;padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.05)}
.sb-foot__rg .sb-ico{width:26px;height:26px;color:var(--sb-mint)}
.sb-foot__rg p{font-size:14.5px}
.sb-foot__rg b{color:#fff}
.sb-foot__copy{margin-top:20px!important;font-size:13px;color:#6f7a92}

/* reveal */
.sb-js .sb-anim{opacity:0;transform:translateY(20px);transition:opacity .7s var(--sb-out),transform .8s var(--sb-out)}
.sb-js .sb-anim.sb-in{opacity:1;transform:none}

@media (max-width:900px){
  .sb-top__nav{display:none}
  .sb-top__more{display:grid}
  .sb-chip--1{left:calc(50% - 260px)}
  .sb-chip--2{right:calc(50% - 260px)}
  .sb-chip--3{left:calc(50% - 240px)}
  .sb-foot__top{grid-template-columns:1fr 1fr}
  .sb-foot__top>div:first-child{grid-column:1/-1}
}
@media (max-width:640px){
  .sb-page{font-size:16.5px}
  .sb-wrap{padding:0 16px}
  .sb-top{top:8px;padding:0 10px}
  .sb-top__pill{height:56px;margin-top:8px;gap:8px;padding:0 6px 0 16px}
  .sb-name{font-size:21px}
  .sb-btn{height:40px;padding:0 13px;font-size:14px}
  .sb-btn--ghost span{display:none}
  .sb-btn--ghost{width:40px;padding:0;justify-content:center}
  .sb-top__more{width:40px;height:40px}
  .sb-hero{padding:40px 0 20px}
  .sb-hero__h1{font-size:38px}
  .sb-hero__lead p{font-size:17px}
  .sb-cta--xl,.sb-cta--xl .sb-cta__in{width:100%;justify-content:center}
  .sb-cta--xl .sb-cta__in{font-size:18px;padding:0 16px}
  .sb-hero__stage{flex-direction:column;align-items:center;gap:18px;margin-top:24px}
  .sb-hero__chips{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
  .sb-chip{position:static;padding:8px 12px;border-radius:14px;animation:none}
  .sb-chip b{font-size:17px}
  .sb-chip span{font-size:12px}
  .sb-hero__device{width:220px;border-radius:32px 32px 0 0;padding:8px 8px 0}
  .sb-hero__device img{max-height:300px;border-radius:24px 24px 0 0}
  .sb-index ol{grid-template-columns:1fr}
  .sb-table--many{overflow-x:auto}
  .sb-table--many table{min-width:560px}
  .sb-table table{font-size:14.5px}
  .sb-table th,.sb-table td{padding:10px 12px}
  .sb-bento{grid-template-columns:1fr}
  .sb-bento__cap{padding:18px}
  .sb-banner{padding:28px 20px;border-radius:22px}
  .sb-banner__row .sb-cta,.sb-banner__row .sb-cta__in{width:100%;justify-content:center}
  .sb-contact{grid-template-columns:1fr}
  .sb-foot__top{grid-template-columns:1fr}
}
@media (max-width:370px){
  .sb-name{font-size:19px}
  .sb-btn--fill{padding:0 10px}
  .sb-hero__h1{font-size:33px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .sb-js .sb-anim{opacity:1;transform:none}
}