/* Betcorner landing page: a betting slip under floodlights */
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@500;600;700&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  --pitch:#061510;        /* page background: night pitch */
  --turf:#0d2619;         /* slip surface */
  --floodlight:#f4b942;   /* gold accent */
  --floodlight-deep:#e09a2a;
  --chalk:#f5f1e4;        /* main text */
  --mist:#9ab5a5;         /* secondary text */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  color:var(--chalk);
  font-family:'Work Sans',-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(244,185,66,.16), transparent 70%),
    var(--pitch);
}

main{ flex:1; padding:12px 20px 56px; }
a:focus-visible{ outline:2px solid var(--floodlight); outline-offset:3px; }

/* Header */
.site-header{ padding:24px 20px 0; text-align:center; }
.logo{
  font-family:'Teko',sans-serif;
  font-size:36px;
  line-height:1;
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--chalk);
}
.logo span{ color:var(--floodlight); }

/* Hero */
.hero{ width:100%; max-width:460px; margin:0 auto; text-align:center; }
.hero h1{
  font-family:'Teko',sans-serif;
  font-weight:600;
  font-size:clamp(52px,13vw,84px);
  line-height:.92;
  margin:28px 0 14px;
  text-wrap:balance;
}
.lede{ margin:0 0 32px; color:var(--mist); font-size:17px; text-wrap:balance; }

/* The list of offers: one slip per partner, stacked */
.offers{ display:flex; flex-direction:column; gap:24px; margin-bottom:24px; }

/* The betting slip */
.slip{
  text-align:left;
  background:linear-gradient(180deg,#143424 0%,var(--turf) 100%);
  border:1px solid rgba(244,185,66,.35);
  border-radius:6px;
  box-shadow:0 40px 90px -40px rgba(244,185,66,.35);
  animation:slip-in .6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes slip-in{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}

.slip-main{ padding:22px 26px 24px; }
.slip-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.slip-book{ font-family:'Teko',sans-serif; font-size:30px; line-height:1; }
.slip-type{ color:var(--mist); font-size:14px; }

.slip-figure{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  margin:8px 0 0;
  font-family:'Teko',sans-serif;
  line-height:.8;
  color:var(--floodlight);
}
.slip-figure .n{ font-size:clamp(120px,34vw,168px); font-weight:700; }
.slip-figure .u{ font-size:clamp(48px,12vw,64px); font-weight:600; margin:12px 0 0 6px; }

.slip-stub{
  position:relative;
  padding:20px 26px 24px;
  border-top:2px dashed rgba(244,185,66,.35);
  background:rgba(6,21,16,.45);
}
/* Ticket notches: half-circles cut into both edges along the tear line */
.slip-stub::before,
.slip-stub::after{
  content:"";
  position:absolute;
  top:-12px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--pitch);
}
.slip-stub::before{ left:-11px; }
.slip-stub::after{ right:-11px; }

/* Buttons */
.btn{
  display:block;
  width:100%;
  text-align:center;
  font-size:17px;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  padding:17px 18px;
  border-radius:4px;
  transition:transform .15s ease, filter .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }

/* The offer buttons: gold, bold, with a clear call to action */
.btn-primary{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:112px;
  padding:16px 18px;
  color:#1a1204;
  background:linear-gradient(180deg,#ffd46e 0%,var(--floodlight) 55%,var(--floodlight-deep) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 16px 34px -10px rgba(244,185,66,.8);
}
/* Line 1: "Claim now" in big condensed capitals, with an arrow */
.btn-primary .cta{
  display:block;
  font-family:'Teko',sans-serif;
  font-size:30px;
  font-weight:700;
  line-height:1;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.btn-primary .cta::after{ content:"\2192"; display:inline-block; margin-left:12px; transition:transform .2s ease; }
/* Line 2: what the bonus is */
.btn-primary .cta-sub{
  display:block;
  margin-top:6px;
  text-wrap:balance;
  font-size:14px;
  font-weight:500;
  line-height:1.35;
  color:#3b2a0a;
}
/* A light sweep across the button when it is hovered */
.btn-primary::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-70%;
  width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg);
  transition:left .6s ease;
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-primary:hover::before{ left:130%; }
.btn-primary:hover .cta::after{ transform:translateX(4px); }

.notice{ margin:22px 0 0; color:var(--mist); font-size:13px; }

/* Footer */
.site-footer{ border-top:1px solid rgba(244,185,66,.18); padding:36px 20px; text-align:center; }
.foot{ max-width:560px; margin:0 auto; }
.f-logo{ font-family:'Teko',sans-serif; font-size:26px; line-height:1; margin-bottom:12px; }
.f-logo span{ color:var(--floodlight); }
.site-footer p{ margin:6px 0; color:var(--mist); font-size:13px; }
.site-footer .copy{ margin-top:14px; color:#6d8979; }

@media (prefers-reduced-motion:reduce){
  .slip{ animation:none; }
  .btn{ transition:none; }
  .btn-primary::before{ display:none; }
  .btn-primary .cta::after{ transition:none; }
}