:root{
  --bg:#08071A;
  --bg2:#0B0A24;
  --txt:#FFF7FF;
  --muted:#FFD6FF;
  --ink:#0a0822;
  --line:rgba(255,255,255,.14);

  --p1:#FF4FD8;   /* pink */
  --p2:#7C5CFF;   /* purple */
  --p3:#00F5FF;   /* cyan */
  --p4:#FFD84D;   /* gold */
  --p5:#40FF7A;   /* lime */

  --shadow: 0 18px 0 rgba(0,0,0,.35);
  --shadowSoft: 0 18px 60px rgba(0,0,0,.55);
  --radius:22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--txt);
  overflow-x:hidden;

  /* Cartoon casino backdrop */
  background:
    radial-gradient(900px 500px at 20% -10%, rgba(255,79,216,.28), transparent 60%),
    radial-gradient(850px 520px at 100% 0%, rgba(0,245,255,.22), transparent 60%),
    radial-gradient(900px 560px at 60% 110%, rgba(255,216,77,.18), transparent 60%),
    radial-gradient(700px 480px at 0% 90%, rgba(64,255,122,.14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

/* Links */
a{color:inherit;text-decoration:none}
.container{width:min(1120px, 92vw); margin:0 auto}

/* Stars + confetti canvases */
#stars{
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
#stars{z-index:-6; opacity:.9}


/* Arcade grid floor */
.grid-glow{
  position:fixed; inset:-30%;
  z-index:-4;
  background:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 86px 86px;
  transform: perspective(900px) rotateX(62deg) translateY(14%);
  opacity:.20;
  filter: drop-shadow(0 0 20px rgba(0,245,255,.25));
}

/* Stickers / blobs */
.bg-orbs{position:fixed; inset:0; z-index:-3; pointer-events:none}
.orb{
  position:absolute; width:560px; height:560px; border-radius:44%;
  filter: blur(26px);
  opacity:.30;
  animation: float 8.5s ease-in-out infinite;
}
.orb.o1{left:-190px; top:120px; background: radial-gradient(circle at 30% 30%, rgba(255,79,216,.95), transparent 62%)}
.orb.o2{right:-210px; top:-40px; background: radial-gradient(circle at 30% 30%, rgba(0,245,255,.88), transparent 62%); animation-duration: 11s}
.orb.o3{left:36%; bottom:-260px; background: radial-gradient(circle at 30% 30%, rgba(255,216,77,.82), transparent 62%); animation-duration: 13s}

@keyframes float{
  0%,100%{ transform: translate3d(0,0,0) rotate(0deg) }
  50%{ transform: translate3d(0,-26px,0) rotate(6deg) }
}

/* Subtle noise */
.noise{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  opacity:.10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Header: thick outline + arcade shine */
.header{
  width:min(1200px, 94vw);
  margin:18px auto 0;
  padding:14px 16px;
  border:2px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.18));
  backdrop-filter: blur(10px);
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow: var(--shadowSoft);
  position: sticky;
  top: 12px;
  z-index: 50;
}

.brand{display:flex; align-items:center; gap:10px}
.brand-mark{
  width:16px; height:16px; border-radius:6px;
  background: conic-gradient(from 180deg, var(--p1), var(--p2), var(--p3), var(--p4), var(--p1));
  box-shadow: 0 0 18px rgba(255,79,216,.35);
}
.brand-text{
  font-weight:1000;
  letter-spacing:.2px;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.brand-tag{
  color:var(--muted);
  font-size:12px;
  padding:6px 10px;
  border:2px solid rgba(255,255,255,.14);
  border-radius:999px;
  background: rgba(0,0,0,.18);
  display:none;
}
@media (min-width: 860px){ .brand-tag{display:inline-flex} }

.nav{display:flex; align-items:center; gap:14px}
.nav a{color:rgba(255,255,255,.85); font-weight:900; font-size:14px}
.nav a:hover{color:var(--p4)}
.nav-cta{
  color: var(--ink)!important;
  padding:10px 12px;
  border-radius:999px;
  border:2px solid rgba(0,0,0,.25);
  background: linear-gradient(90deg, var(--p4), #fff2a6);
  box-shadow: 0 6px 0 rgba(0,0,0,.35);
}

/* Hero */
.hero{padding: 64px 0 26px; position:relative}
.hero-floor{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:-120px; width:min(1100px, 92vw); height:240px;
  background: radial-gradient(closest-side, rgba(255,216,77,.20), transparent 72%);
  filter: blur(3px);
  z-index:-1;
}

.hero-inner{
  width:min(1200px, 94vw);
  margin: 0 auto;
  display:grid;
  gap: 26px;
  grid-template-columns: 1fr;
  align-items:center;
}
@media (min-width: 980px){ .hero-inner{ grid-template-columns: 1.15fr .85fr; } }

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color:rgba(255,255,255,.9);
  font-weight:950;
  font-size:13px;
}
.pill .dot{
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle, var(--p4), var(--p1));
  box-shadow: 0 0 18px rgba(255,216,77,.45);
}

.hero-copy h1{
  font-size: clamp(40px, 5vw, 66px);
  margin: 14px 0 10px;
  line-height: 1.02;
  letter-spacing:-.8px;
  text-shadow: 0 3px 0 rgba(0,0,0,.35);
}
.grad{
  background: linear-gradient(90deg, var(--p4), var(--p1), var(--p3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter: drop-shadow(0 6px 12px rgba(255,79,216,.18));
}
.sub{
  color: rgba(255,255,255,.88);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height:1.6;
  margin: 0 0 18px;
  max-width: 60ch;
}

.hero-actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin: 18px 0 14px}

/* Big cartoon CTA */
.cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 18px;
  border-radius: 999px;
  border:3px solid rgba(0,0,0,.35);
  background: linear-gradient(90deg, var(--p4), #fff1a3, var(--p1));
  box-shadow: 0 8px 0 rgba(0,0,0,.35), 0 22px 70px rgba(0,0,0,.40);
  font-weight:1000;
  letter-spacing:.2px;
  min-width: 220px;
  color: var(--ink);
  transform: translateZ(0);
  overflow:hidden;
}
.cta.small{min-width:auto; padding: 12px 16px}
.cta:hover{transform: translateY(-1px)}
.cta:active{transform: translateY(6px); box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 14px 50px rgba(0,0,0,.35)}
.cta-arrow{opacity:.95}
.cta::after{
  content:"";
  position:absolute; inset:-40%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.65), transparent 46%),
    radial-gradient(circle at 80% 70%, rgba(0,245,255,.45), transparent 50%);
  filter: blur(10px);
  opacity:.55;
  animation: shimmer 2.2s ease-in-out infinite;
}
@keyframes shimmer{
  0%,100%{transform: translate3d(-2%, -2%, 0) rotate(0deg)}
  50%{transform: translate3d(3%, 3%, 0) rotate(10deg)}
}

.ghost{
  padding: 12px 14px;
  border-radius: 999px;
  border:2px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.9);
  font-weight:1000;
  background: rgba(0,0,0,.16);
}
.ghost:hover{color:var(--p4)}

.trust{display:flex; flex-wrap:wrap; gap:10px; margin-top: 14px}
.trust-item{
  padding:10px 12px; border-radius: 16px;
  border:2px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: 0 8px 0 rgba(0,0,0,.25);
}
.trust-item .k{display:block; font-weight:1000}
.trust-item .v{display:block; color:rgba(255,255,255,.82); font-weight:900; font-size:13px; margin-top:2px}

/* Hero card: arcade panel */
.hero-card{
  border:3px solid rgba(0,0,0,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.22));
  border-radius: var(--radius);
  box-shadow: 0 10px 0 rgba(0,0,0,.35), 0 26px 80px rgba(0,0,0,.55);
  overflow:hidden;
  position:relative;
}
.hero-card:before{
  content:"";
  position:absolute; inset:-2px;
  background: conic-gradient(from 180deg, rgba(255,79,216,.38), rgba(0,245,255,.30), rgba(255,216,77,.30), rgba(124,92,255,.35), rgba(255,79,216,.38));
  filter: blur(18px);
  opacity:.55;
  z-index:-1;
}

.card-top{display:flex; align-items:flex-start; justify-content:space-between; padding:16px 16px 10px}
.badge{
  padding:8px 10px; border-radius:999px;
  border:2px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.20);
  font-weight:1000;
}
.mini-stats{display:flex; gap:10px}
.ms{padding:8px 10px; border-radius:14px; background: rgba(0,0,0,.16); border:2px solid rgba(255,255,255,.12)}
.ms-k{display:block; color:rgba(255,255,255,.82); font-size:11px; font-weight:950}
.ms-v{display:block; font-weight:1000; margin-top:2px}

.bonus-panel{
  margin: 0 16px 12px;
  border-radius: 18px;
  border:2px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  padding: 14px 14px;
}
.bonus-grad{
  font-size: 42px;
  line-height: 1;
  font-weight: 1200;
  background: linear-gradient(90deg, var(--p4), var(--p1), var(--p3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.bonus-sub{font-weight:1000}
.bonus-terms{margin-top:8px; color:rgba(255,255,255,.82); font-size:12px; line-height:1.5}

/* Slot reels */
.slot{padding: 0 16px 14px; display:grid; gap:10px}
.slot-reel{
  display:flex; gap:12px; font-size: 22px;
  padding: 12px 12px;
  border-radius: 16px;
  border:2px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  overflow:hidden; white-space:nowrap;
  animation: reel 3.7s linear infinite;
}
.slot-reel.r2{animation-duration: 4.6s; opacity:.95}
@keyframes reel{ 0%{ transform: translateX(0) } 100%{ transform: translateX(-44%) } }

.card-bottom{padding: 10px 16px 16px}
.meter{
  height:12px; border-radius:999px;
  background: rgba(255,255,255,.10);
  border:2px solid rgba(255,255,255,.12);
  overflow:hidden; margin-bottom: 12px;
}
.meter-bar{
  height:100%; width: 55%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--p5), var(--p4), var(--p1));
  box-shadow: 0 0 16px rgba(255,216,77,.35);
  transition: width .45s ease;
}
.card-actions{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  border:2px solid rgba(0,0,0,.35);
  background: rgba(255,255,255,.08);
  color: var(--txt);
  padding: 12px 14px;
  border-radius: 14px;
  font-weight:1000;
  cursor:pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.30);
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(5px); box-shadow: 0 1px 0 rgba(0,0,0,.30)}
.btn.primary{
  background: linear-gradient(90deg, var(--p3), #a0ffff);
  color: var(--ink);
}
.fineprint{margin-top: 12px; color:rgba(255,255,255,.75); font-size: 12px; line-height:1.5}

/* Sections */
.section{padding: 66px 0}
.section.alt{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,0));
  border-top: 2px solid rgba(255,255,255,.06);
  border-bottom: 2px solid rgba(255,255,255,.06);
}
.section h2{
  font-size: clamp(28px, 3vw, 40px);
  margin: 0 0 10px;
  letter-spacing:-.5px;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.lead{color:rgba(255,255,255,.86); max-width: 72ch; line-height:1.7; margin:0 0 22px}

/* Bonus strip */
.bonus-strip{display:grid; gap:16px; grid-template-columns: 1fr; align-items:stretch}
@media (min-width: 980px){ .bonus-strip{ grid-template-columns: 1.2fr .8fr; } }
.bonus-chip{
  display:inline-flex; align-items:center;
  padding:8px 10px; border-radius:999px;
  border:2px solid rgba(0,0,0,.35);
  background: linear-gradient(90deg, var(--p1), var(--p2));
  color:#fff;
  font-weight:1000; font-size:12px;
  width: fit-content;
  margin-bottom: 10px;
  box-shadow: 0 6px 0 rgba(0,0,0,.30);
}
.bonus-bullets{display:grid; gap:8px; margin-top: 14px}
.bb{display:flex; gap:10px; align-items:flex-start; color:rgba(255,255,255,.86); font-weight:950}
.bb .ico{filter: drop-shadow(0 0 8px rgba(255,216,77,.25))}

.bonus-card{
  border:3px solid rgba(0,0,0,.35);
  background: rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 16px 16px 14px;
  box-shadow: 0 10px 0 rgba(0,0,0,.35), 0 24px 70px rgba(0,0,0,.45);
}
.bc-top{display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px}
.bc-title{font-weight:1100}
.bc-pill{
  padding:8px 10px; border-radius:999px;
  background: linear-gradient(90deg, var(--p4), #fff1a3);
  border:2px solid rgba(0,0,0,.35);
  color: var(--ink);
  font-weight:1100;
  box-shadow: 0 6px 0 rgba(0,0,0,.30);
}
.bc-label{color:rgba(255,255,255,.85); font-weight:950; font-size:12px; margin-bottom: 8px}
.bc-row{display:flex; justify-content:space-between; padding: 10px 0; border-top: 2px dashed rgba(255,255,255,.14)}
.bc-row.total{border-top: 2px solid rgba(255,255,255,.18)}
.bc-row strong{font-weight:1100}
.tiny{margin-top: 10px; color:rgba(255,255,255,.78); font-size:12px}

/* Features */
.grid{display:grid; gap: 14px; grid-template-columns: 1fr}
@media (min-width: 860px){ .grid{ grid-template-columns: 1fr 1fr 1fr; } }
.feature{
  padding: 18px 16px;
  border-radius: var(--radius);
  border:3px solid rgba(0,0,0,.35);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 0 rgba(0,0,0,.30), 0 18px 55px rgba(0,0,0,.35);
}
.feature h3{margin:0 0 8px; text-shadow: 0 2px 0 rgba(0,0,0,.35)}
.feature p{margin:0; color:rgba(255,255,255,.86); line-height:1.65; font-weight:850}

/* Steps */
.steps{display:grid; gap: 14px; grid-template-columns: 1fr; margin-top: 18px}
@media (min-width: 860px){ .steps{ grid-template-columns: 1fr 1fr 1fr; } }
.step{
  padding: 18px 16px;
  border-radius: var(--radius);
  border:3px solid rgba(0,0,0,.35);
  background: rgba(0,0,0,.16);
  box-shadow: 0 10px 0 rgba(0,0,0,.30);
}
.step .num{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 12px;
  border:2px solid rgba(0,0,0,.35);
  background: linear-gradient(90deg, var(--p2), var(--p1));
  font-weight: 1100;
  color: #fff;
  margin-bottom: 10px;
  box-shadow: 0 6px 0 rgba(0,0,0,.28);
}
.cta-strip{
  margin-top: 18px;
  padding: 18px 16px;
  border-radius: var(--radius);
  border:3px solid rgba(0,0,0,.35);
  background: rgba(255,255,255,.06);
  display:flex; flex-wrap:wrap; gap: 14px;
  align-items:center; justify-content:space-between;
  box-shadow: 0 10px 0 rgba(0,0,0,.30);
}
.cta-strip p{margin:6px 0 0; color:rgba(255,255,255,.86); font-weight:850}

/* FAQ */
.faq{margin-top: 16px; display:grid; gap: 10px}
details{
  border-radius: 18px;
  border:3px solid rgba(0,0,0,.35);
  background: rgba(255,255,255,.06);
  padding: 14px 14px;
  box-shadow: 0 10px 0 rgba(0,0,0,.30);
}
summary{cursor:pointer; font-weight: 1100}
details p{color:rgba(255,255,255,.86); line-height:1.7; margin: 10px 0 0; font-weight:850}

/* Footer */
.footer{
  margin-top: 26px;
  padding-top: 18px;
  border-top: 2px solid rgba(255,255,255,.08);
  display:flex; flex-wrap:wrap; gap: 12px;
  align-items:center; justify-content:space-between;
}
.brand-mini{display:flex; gap:10px; align-items:center; font-weight:1100}
.foot-note{color:rgba(255,255,255,.80); font-size:13px; margin-top:6px; font-weight:850}
.foot-right{display:flex; gap:12px; color:rgba(255,255,255,.86); font-weight:950}
.foot-right a:hover{color:var(--p4)}

/* Reveal */
.reveal{opacity:0; transform: translateY(14px); transition: opacity .65s ease, transform .65s ease}
.reveal.on{opacity:1; transform: translateY(0)}

/* Sticky CTA */
.sticky-cta{
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 60;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .30s ease, transform .30s ease;
}
.sticky-cta.on{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-inner{
  width: min(720px, 100%);
  margin: 0 auto;
  border-radius: 18px;
  border:3px solid rgba(0,0,0,.35);
  background: linear-gradient(90deg, rgba(255,216,77,.95), rgba(255,79,216,.90));
  box-shadow: 0 10px 0 rgba(0,0,0,.35), 0 24px 80px rgba(0,0,0,.45);
  padding: 12px 12px;
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  color: var(--ink);
}
.st-title{font-weight:1200}
.st-sub{opacity:.85; font-weight:1000; font-size:12px; margin-top:2px}
.sticky-btn{
  padding: 12px 16px;
  border-radius: 14px;
  border:3px solid rgba(0,0,0,.35);
  background: linear-gradient(90deg, var(--p3), #a0ffff);
  color: var(--ink);
  font-weight:1200;
  box-shadow: 0 6px 0 rgba(0,0,0,.35);
}
.sticky-btn:active{transform: translateY(5px); box-shadow: 0 1px 0 rgba(0,0,0,.35)}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .orb, .cta::after{animation:none!important}
  .reveal{opacity:1; transform:none}
}