:root {

  --page:
    #040711;

  --surface:
    #080d1d;

  --surface2:
    #0c1328;

  --line:
    rgba(255,255,255,.09);

  --cyan:
    #24eaff;

  --blue:
    #176fff;

  --deepBlue:
    #081c68;

  --purple:
    #773cff;

  --red:
    #ff334d;

  --deepRed:
    #a20b22;

  --white:
    #ffffff;

  --muted:
    rgba(255,255,255,.66);

}


/* ================================
   RESET
================================ */

* {
  box-sizing: border-box;
}

html {
  background: var(--page);
  scroll-behavior: smooth;
}

body {

  margin: 0;

  background:
    radial-gradient(
      900px 700px at 10% 10%,
      rgba(23,111,255,.13),
      transparent 55%
    ),

    radial-gradient(
      900px 700px at 90% 25%,
      rgba(255,51,77,.10),
      transparent 55%
    ),

    var(--page);

  color: var(--white);

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

}


a {
  color: inherit;
}


/* ================================
   MAIN CONTAINER
================================ */

.site {

  width:
    min(560px, 100%);

  margin:
    0 auto;

  background:
    rgba(5,8,20,.98);

  box-shadow:
    0 0 90px
    rgba(0,0,0,.55);

}


/* ================================
   HERO
================================ */

.hero {

  position: relative;

  width: 100%;

  overflow: hidden;

  background: #000;

}


.heroImage {

  display: block;

  width: 100%;

  height: auto;

  user-select: none;

  -webkit-user-drag: none;

}


/* ================================
   TRUST BAR
================================ */

.trustBar {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 1px;

  background:
    rgba(255,255,255,.08);

  border-top:
    1px solid rgba(36,234,255,.22);

  border-bottom:
    1px solid rgba(36,234,255,.10);

}


.trustItem {

  min-height: 90px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  padding:
    14px 8px;

  text-align: center;

  background:
    linear-gradient(
      180deg,
      rgba(12,19,40,.98),
      rgba(6,10,24,.98)
    );

}


.trustIcon {

  width: 30px;

  height: 30px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  font-weight: 900;

  color: #04101a;

  background:
    linear-gradient(
      135deg,
      var(--cyan),
      #8bfaff
    );

  box-shadow:
    0 0 16px
    rgba(36,234,255,.28);

}


.trustItem strong {

  display: block;

  font-size: 13px;

  line-height: 1.2;

}


.trustItem small {

  display: block;

  margin-top: 3px;

  color:
    rgba(255,255,255,.50);

  font-size: 10px;

}


/* ================================
   SECTION
================================ */

.section {

  padding:
    54px 20px;

  border-bottom:
    1px solid var(--line);

}


.sectionHead {

  margin-bottom: 24px;

  text-align: center;

}


.eyebrow {

  display: inline-block;

  margin-bottom: 9px;

  color: var(--cyan);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 2px;

}


.sectionHead h2,
.finalCTA h2 {

  margin:
    0;

  font-size:
    clamp(28px, 7vw, 38px);

  line-height: 1.12;

  letter-spacing: -.7px;

}


.sectionHead p {

  max-width: 390px;

  margin:
    12px auto 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.65;

}


/* ================================
   FEATURES
================================ */

.featureGrid {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 10px;

}


.featureCard {

  position: relative;

  min-height: 175px;

  padding:
    18px 13px;

  border:
    1px solid rgba(36,234,255,.13);

  border-radius:
    18px;

  background:

    radial-gradient(
      130px 100px at 50% 0%,
      rgba(23,111,255,.16),
      transparent 70%
    ),

    linear-gradient(
      180deg,
      #0d142a,
      #070b18
    );

  overflow: hidden;

}


.featureCard::after {

  content: "";

  position: absolute;

  left: 15%;

  right: 15%;

  bottom: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--cyan),
      transparent
    );

  opacity: .6;

}


.featureIcon {

  width: 38px;

  height: 38px;

  display: grid;

  place-items: center;

  margin-bottom: 17px;

  border-radius: 12px;

  color: var(--cyan);

  font-size: 12px;

  font-weight: 900;

  background:
    rgba(36,234,255,.08);

  border:
    1px solid rgba(36,234,255,.20);

}


.featureCard h3 {

  margin:
    0 0 7px;

  font-size: 17px;

}


.featureCard p {

  margin: 0;

  color:
    rgba(255,255,255,.56);

  font-size: 12px;

  line-height: 1.55;

}


/* ================================
   PROMO
================================ */

.promoGrid {

  display: grid;

  gap: 12px;

}


.promoCard {

  position: relative;

  overflow: hidden;

  padding:
    24px;

  border-radius:
    22px;

  border:
    1px solid
    rgba(255,255,255,.10);

  background:

    radial-gradient(
      300px 150px at 100% 0%,
      rgba(119,60,255,.15),
      transparent 70%
    ),

    linear-gradient(
      135deg,
      #0b1124,
      #070b17
    );

}


.promoPrimary {

  background:

    radial-gradient(
      300px 170px at 100% 0%,
      rgba(255,51,77,.22),
      transparent 65%
    ),

    radial-gradient(
      240px 150px at 0% 100%,
      rgba(36,234,255,.13),
      transparent 70%
    ),

    linear-gradient(
      135deg,
      #11162d,
      #080b17
    );

}


.promoTag {

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    27px;

  padding:
    0 12px;

  border-radius:
    999px;

  color:
    var(--cyan);

  font-size:
    11px;

  font-weight:
    800;

  background:
    rgba(36,234,255,.08);

  border:
    1px solid
    rgba(36,234,255,.18);

}


.promoTitle {

  margin-top:
    18px;

  font-size:
    28px;

  font-weight:
    900;

  letter-spacing:
    -.6px;

}


.promoValue {

  margin-top:
    5px;

  color:
    rgba(255,255,255,.72);

  font-size:
    18px;

  font-weight:
    700;

}


.promoValue span {

  color:
    #ff445c;

  font-size:
    30px;

  font-weight:
    1000;

}


.promoCard p {

  margin:
    15px 0 0;

  color:
    rgba(255,255,255,.50);

  font-size:
    12px;

}


.cashbackRow {

  display:
    flex;

  align-items:
    center;

  gap:
    20px;

  margin-top:
    20px;

}


.cashbackRow > div:not(.divider) {

  display:
    flex;

  flex-direction:
    column;

}


.cashbackRow strong {

  color:
    var(--cyan);

  font-size:
    34px;

  line-height:
    1;

}


.cashbackRow span {

  margin-top:
    6px;

  color:
    rgba(255,255,255,.65);

  font-size:
    12px;

}


.cashbackRow .divider {

  width:
    1px;

  height:
    47px;

  background:
    rgba(255,255,255,.15);

}


/* ================================
   GAME TYPES
================================ */

.gameStrip {

  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    10px;

}


.gameChip {

  min-height:
    66px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  border:
    1px solid rgba(36,234,255,.13);

  border-radius:
    16px;

  color:
    rgba(255,255,255,.82);

  font-size:
    14px;

  font-weight:
    750;

  background:
    linear-gradient(
      180deg,
      #0d1429,
      #080c19
    );

}


.gameChip span {

  color:
    var(--cyan);

  font-size:
    20px;

  filter:
    drop-shadow(
      0 0 7px
      rgba(36,234,255,.4)
    );

}


/* ================================
   FINAL CTA
================================ */

.finalCTA {

  position:
    relative;

  overflow:
    hidden;

  padding:
    65px 22px 58px;

  text-align:
    center;

  background:

    radial-gradient(
      360px 220px at 50% 30%,
      rgba(23,111,255,.22),
      transparent 68%
    ),

    radial-gradient(
      280px 180px at 90% 70%,
      rgba(255,51,77,.14),
      transparent 70%
    ),

    #060a18;

}


.finalGlow {

  position:
    absolute;

  width:
    180px;

  height:
    180px;

  left:
    50%;

  top:
    20%;

  border-radius:
    50%;

  transform:
    translateX(-50%);

  background:
    rgba(36,234,255,.10);

  filter:
    blur(60px);

}


.finalCTA > *:not(.finalGlow) {

  position:
    relative;

  z-index:
    2;

}


.finalCTA p {

  margin:
    13px 0 26px;

  color:
    rgba(255,255,255,.58);

  font-size:
    14px;

}


/* ================================
   MAIN CTA
================================ */

.mainCTA {

  position:
    relative;

  width:
    100%;

  height:
    72px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    11px;

  overflow:
    hidden;

  border-radius:
    999px;

  border:
    1px solid
    rgba(36,234,255,.85);

  color:
    #fff;

  text-decoration:
    none;

  font-size:
    22px;

  font-weight:
    950;

  background:

    radial-gradient(
      130% 200% at 15% 0%,
      rgba(255,255,255,.16),
      transparent 45%
    ),

    linear-gradient(
      90deg,
      #08236f,
      #135cff 32%,
      #261452 58%,
      #c71639 100%
    );

  box-shadow:

    0 18px 50px
    rgba(0,0,0,.50),

    0 0 22px
    rgba(36,234,255,.25),

    0 0 24px
    rgba(255,51,77,.15);

}


.mainCTA::before {

  content:
    "";

  position:
    absolute;

  inset:
    2px;

  border-radius:
    inherit;

  background:

    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255,255,255,.55) 28%,
      transparent 52%
    );

  transform:
    translateX(-100%);

  animation:
    buttonShine
    2.6s
    ease-in-out
    infinite;

}


.mainCTA span {

  position:
    relative;

  z-index:
    2;

}


.bolt {

  color:
    #fff;

  filter:
    drop-shadow(
      0 0 8px
      var(--cyan)
    );

}


.arrow {

  position:
    absolute !important;

  right:
    23px;

  top:
    50%;

  transform:
    translateY(-53%);

  font-size:
    35px;

  font-weight:
    400;

}


/* ================================
   FOOTER
================================ */

.footer {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    5px;

  padding:
    27px 20px 30px;

  color:
    rgba(255,255,255,.35);

  font-size:
    10px;

  border-top:
    1px solid
    rgba(255,255,255,.05);

}


.footer strong {

  color:
    rgba(255,255,255,.58);

  letter-spacing:
    1.5px;

}


/* ================================
   STICKY CTA
================================ */

.stickyCTA {

  position:
    fixed;

  left:
    50%;

  bottom:
    calc(
      12px +
      env(safe-area-inset-bottom)
    );

  width:
    min(520px, 94vw);

  min-height:
    68px;

  z-index:
    100;

  display:
    flex;

  align-items:
    center;

  padding:
    8px 18px;

  border-radius:
    999px;

  color:
    #fff;

  text-decoration:
    none;

  border:
    1px solid
    rgba(36,234,255,.75);

  background:

    radial-gradient(
      120% 180% at 15% 0%,
      rgba(255,255,255,.16),
      transparent 45%
    ),

    linear-gradient(
      90deg,
      #071d67 0%,
      #114edc 32%,
      #20113f 59%,
      #ad102c 100%
    );

  box-shadow:

    0 18px 55px
    rgba(0,0,0,.66),

    0 0 18px
    rgba(36,234,255,.23),

    0 0 26px
    rgba(255,51,77,.15);

  transform:
    translateX(-50%);

  overflow:
    hidden;

  animation:
    stickyPulse
    2.7s
    ease-in-out
    infinite;

}


.stickyCTA::before {

  content:
    "";

  position:
    absolute;

  inset:
    2px;

  border-radius:
    inherit;

  background:

    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255,255,255,.48) 28%,
      transparent 52%
    );

  transform:
    translateX(-110%);

  animation:
    buttonShine
    2.5s
    ease-in-out
    infinite;

}


.stickyCTA > * {

  position:
    relative;

  z-index:
    2;

}


.stickyBolt {

  width:
    40px;

  height:
    40px;

  display:
    grid;

  place-items:
    center;

  flex:
    0 0 auto;

  margin-right:
    11px;

  border-radius:
    50%;

  background:
    rgba(0,0,0,.22);

  filter:
    drop-shadow(
      0 0 7px
      var(--cyan)
    );

}


.stickyText {

  display:
    flex;

  flex-direction:
    column;

  line-height:
    1.08;

}


.stickyText small {

  color:
    rgba(255,255,255,.55);

  font-size:
    9px;

  letter-spacing:
    1.4px;

}


.stickyText strong {

  margin-top:
    3px;

  font-size:
    19px;

}


.stickyArrow {

  margin-left:
    auto;

  font-size:
    35px;

  line-height:
    1;

}


.bottomSpace {
  height:
    95px;
}


/* ================================
   MICRO ANIMATIONS
================================ */

@keyframes buttonShine {

  0% {
    transform:
      translateX(-110%);
  }

  48% {
    transform:
      translateX(110%);
  }

  100% {
    transform:
      translateX(110%);
  }

}


@keyframes stickyPulse {

  0%,
  100% {

    transform:
      translateX(-50%)
      scale(1);

    filter:
      brightness(1);

  }

  50% {

    transform:
      translateX(-50%)
      scale(1.018);

    filter:
      brightness(1.08);

  }

}


/* Scroll reveal */

.reveal {

  opacity: 0;

  transform:
    translateY(18px);

  transition:
    opacity .55s ease,
    transform .55s ease;

}


.reveal.visible {

  opacity: 1;

  transform:
    translateY(0);

}


/* ================================
   ACTIVE
================================ */

.mainCTA:active,
.stickyCTA:active {

  filter:
    brightness(1.16);

}


/* ================================
   SMALL MOBILE
================================ */

@media (max-width: 390px) {

  .section {
    padding:
      46px 15px;
  }

  .featureGrid {
    gap:
      7px;
  }

  .featureCard {
    padding:
      15px 10px;
  }

  .featureCard h3 {
    font-size:
      15px;
  }

  .featureCard p {
    font-size:
      11px;
  }

  .stickyCTA {

    min-height:
      64px;

    padding:
      7px 15px;

  }

}


/* ================================
   REDUCED MOTION
================================ */

@media (
  prefers-reduced-motion:
  reduce
) {

  html {
    scroll-behavior:
      auto;
  }

  .stickyCTA,
  .stickyCTA::before,
  .mainCTA::before {

    animation:
      none;

  }

  .reveal {

    opacity:
      1;

    transform:
      none;

    transition:
      none;

  }

}