/* Base */
:root{
  --bg:#070a0f;
  --fg:#dfe6ff;
  --muted:#9bb1ff;
  --accent:#0ef;
  --accent-2:#7f5af0;
  --card:#0b1020cc;
  --card-2:#0b1020a6;
  --line:#1b223a;
  --success:#2dd4bf;
  --warning:#f59e0b;
  --danger:#ef4444;
  --shadow:0 20px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Urbanist",system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--fg);
  background:linear-gradient(180deg,#05070b 0%, #0a1020 100%);
  overflow-x:hidden;
}

/* Particle canvas sits behind */
#bg{
  position:fixed; inset:0; z-index:-1;
  background:radial-gradient(1200px 800px at 10% -10%, #0ef1 0%, transparent 60%),
             radial-gradient(1200px 800px at 90% -10%, #7f5af044 0%, transparent 60%);
}

/* Navigation */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(16px,5vw,40px);
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, rgba(9,12,22,.75), rgba(9,12,22,.35));
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;font-weight:800;letter-spacing:.4px}
.brand .logo{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#0ef,#7f5af0);color:#080b12;font-weight:900}
.nav nav{display:flex;align-items:center;gap:18px}
.nav nav a{color:var(--muted);text-decoration:none;font-weight:600;opacity:.95}
.nav nav a:hover{color:var(--fg)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border-radius:14px;text-decoration:none;
  background:var(--card-2); color:var(--fg); border:1px solid var(--line);
  box-shadow:var(--shadow); font-weight:700; letter-spacing:.3px;
  transform:translateZ(0); transition:transform .2s ease, box-shadow .2s ease, background .2s;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 30px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06)}
.btn.primary{background:linear-gradient(135deg,#0ef,#7f5af0); color:#08101a; border-color:transparent}
.btn.ghost{background:transparent; border:1px solid var(--line)}

/* Hero */
.hero{
  position:relative; isolation:isolate;
  padding: clamp(60px, 12vh, 140px) 20px 80px;
}
.hero-inner{
  width:min(1100px, 92vw); margin:0 auto; text-align:center;
}
.hero h1{font-size: clamp(38px, 7vw, 86px); margin:0 0 10px; line-height:1.0; font-weight:900}
.glow{ text-shadow: 0 0 40px #0ef3, 0 10px 30px #0008;}
.accent{ background:linear-gradient(135deg,#0ef,#7f5af0); -webkit-background-clip:text; background-clip:text; color:transparent }
.hero p{font-size: clamp(16px, 2.2vw, 22px); color:var(--muted)}
.cta{display:flex; gap:14px; justify-content:center; margin-top:26px}
.hero-badges{display:flex; gap:10px; justify-content:center; margin-top:24px}
.chip{padding:8px 12px;border-radius:999px;background:#101631;border:1px solid var(--line); color:var(--muted); font-weight:700}
.chip.link{cursor:pointer}

.orbs .orb{position:absolute; filter:blur(18px); border-radius:50%; opacity:.65; mix-blend-mode:screen}
.orb-a{ width:340px; height:340px; background:#0ef4; left:-80px; top:-40px; animation:float1 12s ease-in-out infinite }
.orb-b{ width:280px; height:280px; background:#7f5af055; right:-80px; top:60px; animation:float2 16s ease-in-out infinite }
.orb-c{ width:200px; height:200px; background:#2dd4bf55; left:20%; bottom:-40px; animation:float3 14s ease-in-out infinite }
@keyframes float1{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(20px)} }
@keyframes float2{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-25px)} }
@keyframes float3{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(10px,15px)} }

/* Sections */
.section{ padding:80px 20px }
.section.alt{ background: radial-gradient(800px 400px at 20% 0%, #111735 0%, transparent 60%), radial-gradient(800px 400px at 80% 0%, #0b1330 0%, transparent 60%) }
.section-head{ width:min(1100px,92vw); margin:0 auto 28px; text-align:center}
.section h2{ font-size: clamp(28px, 4.8vw, 52px); margin:0 0 8px; letter-spacing:.4px }
.section-head p{ color:var(--muted) }

/* Grid */
.grid{ width:min(1200px,92vw); margin:20px auto 0; display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-aff{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Cards */
.card{
  position:relative; border-radius:22px; padding:18px; overflow:hidden;
  background:linear-gradient(180deg, var(--card), rgba(10,16,30,.7));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform-style:preserve-3d; perspective:1000px;
}
.card::after{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background: conic-gradient(from 180deg at 50% 50%, transparent 0 89%, #0ef2 90% 94%, transparent 95% 100%);
  filter: blur(6px); opacity:.7;
}
.card .top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:12px;
}
.badge{font-weight:800; font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--line); background:#0e1428; color:var(--muted)}
.h1{font-size:20px; font-weight:800; letter-spacing:.3px}
.sub{color:var(--muted); font-size:14px}

.countdown{display:flex; gap:8px; margin:12px 0 6px}
.countdown .box{display:grid;place-items:center; width:70px; padding:10px 8px; background:#0e162f; border:1px solid var(--line); border-radius:12px}
.countdown .big{ font-size:22px; font-weight:900 }
.countdown .small{ font-size:10px; color:var(--muted) }

.actions{ display:flex; gap:10px; margin-top:14px }
.tag{ font-size:12px; color:var(--muted) }
.price{ font-size:22px; font-weight:900 }
.tiny{ font-size:12px; color:#8aa; }

/* How cards */
.how-grid{ width:min(1100px,92vw); margin:0 auto; display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.how-card{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:20px; box-shadow:var(--shadow); transform: translateY(20px); opacity:0; transition: all .7s ease }
.how-card .num{ font-weight:900; color:var(--accent); opacity:.9 }
.reveal.on{ transform:none; opacity:1 }
.delay1{ transition-delay:.1s }
.delay2{ transition-delay:.2s }

/* Footer */
.footer{ border-top:1px solid var(--line); padding:30px 20px; background:linear-gradient(180deg, rgba(9,12,22,.7), rgba(9,12,22,.95)) }
.footer-inner{ width:min(1100px,92vw); margin:0 auto; display:grid; gap:10px; justify-items:center; text-align:center }
.brandline{ display:flex; align-items:center; gap:8px; color:var(--muted) }
.footer .links{ display:flex; gap:14px }
.footer .links a{ color:var(--muted) }
.footer a{ color:#a8c5ff; text-decoration:none }
.footer a:hover{ color:var(--fg) }

/* Modal */
.modal.hidden{ display:none }
.modal{ position:fixed; inset:0; z-index:60; }
.modal-backdrop{ position:absolute; inset:0; background:#0009; backdrop-filter: blur(2px); }
.modal-card{ position:relative; z-index:1; width:min(920px,94vw); margin:8vh auto; background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); padding:20px }
.modal-card h3{ margin:6px 0 2px }
.modal-card .close{ position:absolute; right:12px; top:8px; border:0; border-radius:10px; background:#121a33; color:#fff; width:36px; height:36px; font-size:22px; cursor:pointer }

/* Utilities */
.hidden{ display:none }
.center{ text-align:center }
.right{ text-align:right }
.flex{ display:flex; gap:8px; align-items:center }

@media (max-width:520px){
  .countdown .box{ width:60px }
  .nav nav{ gap:12px }
}


/* Scrollbar progress */
#scrollbar{ position:fixed; left:0; top:0; height:3px; width:0; z-index:80; background:linear-gradient(90deg,#0ef,#7f5af0,#2dd4bf); box-shadow:0 0 16px #0ef7 }
/* Cursor glow */
#cursor{ position:fixed; left:0; top:0; width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%; pointer-events:none; z-index:70;
  background: radial-gradient(circle at 50% 50%, #0ef6 0, #0ef2 60%, transparent 70%); transform:translate3d(0,0,0); mix-blend-mode:screen; opacity:.8 }
/* Ticker */
.ticker{ position:sticky; top:0; z-index:55; height:28px; overflow:hidden; border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(9,12,22,.85), rgba(9,12,22,.5)); backdrop-filter:blur(6px) saturate(140%) }
.ticker .track{ white-space:nowrap; padding:4px 0; color:#9fb2ff; animation:ticker 30s linear infinite }
@keyframes ticker{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* Extra canvases layer order */
#stars{ position:fixed; inset:0; z-index:-2; pointer-events:none }
#ribbons{ position:fixed; inset:0; z-index:-3; pointer-events:none }

/* Shine sweep over hero */
.shine{ position:absolute; inset:0; background:linear-gradient(120deg, transparent 20%, #ffffff08 50%, transparent 80%);
  transform:skewX(-18deg) translateX(-100%); animation:shine 7s ease-in-out infinite; pointer-events:none }
@keyframes shine{ 0%,10%{ transform:skewX(-18deg) translateX(-120%) } 50%{ transform:skewX(-18deg) translateX(10%) } 100%{ transform:skewX(-18deg) translateX(120%) } }

/* Magnetic buttons */
.magnetic{ transition: transform .2s ease }
.magnetic:hover{ transform:translateY(-2px) }
.magnetic[data-mx][data-my]{ transform: translate(var(--mx,0), var(--my,0)) }

/* Hall of Fame */
.grid-hof{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.hof-card{ position:relative; border-radius:20px; padding:18px; background:linear-gradient(180deg, #0b1328cc, #091020aa);
  border:1px solid var(--line); box-shadow: var(--shadow); overflow:hidden }
.hof-card .rank{ position:absolute; right:10px; top:10px; font-weight:900; color:var(--accent); opacity:.85 }
.hof-card .wager{ font-weight:900; font-size:22px }
.hof-card .meta{ font-size:12px; color:var(--muted) }
.hof-card::after{ content:""; position:absolute; inset:-1px; background:conic-gradient(from 90deg at 50% 50%, transparent 0 88%, #7f5af033 90% 96%, transparent 100%); filter:blur(8px); }

/* Confetti canvas */
#confetti{ position:fixed; inset:0; pointer-events:none; z-index:65 }

/* Parallax shine on cards */
.card{ position:relative }
.card:hover{ box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.06) }
.card::before{ content:""; position:absolute; inset:-1px; background: radial-gradient(600px 200px at var(--sx,50%) -20%, #ffffff22, transparent 60%); pointer-events:none; opacity:.4; transition:opacity .2s }
.card:hover::before{ opacity:.8 }

/* Platform button row */
.platforms{ width:min(1200px,92vw); margin:6px auto 16px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center }
.pill{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; text-decoration:none;
  background:linear-gradient(135deg,#0ef,#7f5af0); color:#08101a; font-weight:800; box-shadow:0 12px 30px rgba(0,0,0,.35) }
.pill:hover{ transform:translateY(-1px) }

/* Hero avatar */
.hero-avatar{ position:absolute; left:50%; transform:translateX(-50%); bottom:-40px; width:140px; height:140px;
  border-radius:24px; padding:6px; background:linear-gradient(135deg,#0ef,#7f5af0);
  box-shadow:0 30px 80px rgba(0,0,0,.55); animation:avatarFloat 8s ease-in-out infinite }
.hero-avatar img{ width:100%; height:100%; border-radius:18px; display:block; background:#10162f; border:1px solid #1b223a }
@keyframes avatarFloat{ 0%,100%{ transform:translate(-50%,0)} 50%{ transform:translate(-50%,-10px)} }
@media (max-width:520px){ .hero-avatar{ width:112px; height:112px; bottom:-32px } }

/* Brand logo as image */
.brand .logo{ background:transparent }
.brand .logo img{ width:100%; height:100%; display:block; border-radius:8px }

/* avatar reposition */
.hero{ position:relative; z-index:1 }
.hero-inner{ position:relative; z-index:2 }
.hero-avatar{ right:clamp(16px, 6vw, 80px); left:auto; bottom:-28px; width:110px; height:110px; z-index:1; pointer-events:none }
@media (max-width: 900px){ .hero-avatar{ display:none } }

/* Social icons in footer */
.footer .socials{ display:flex; gap:12px; margin-top:12px; flex-wrap:wrap }
.footer .socials .social{ width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:var(--card); box-shadow:var(--shadow); transition:transform .12s ease, box-shadow .12s ease; color:var(--ink) }
.footer .socials .social:hover{ transform:translateY(-2px); box-shadow:0 6px 24px rgba(0,0,0,.2) }
.footer .socials .social svg{ width:22px; height:22px; fill:currentColor }


/* --- Bonus Cards v1 --- */
.bonus-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}
.bonus-card{
  position:relative;
  border-radius:18px;
  padding:28px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(0,255,200,.08), rgba(0,80,200,.05)),
              linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}
.bonus-card .brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  opacity:.95;
}
.bonus-card .brand .logo{
  width:40px;height:40px;border-radius:10px;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;letter-spacing:.5px;
}
.bonus-card h3{font-size:42px;line-height:1;margin:8px 0 4px;}
.bonus-card h3 .pct{font-weight:800;}
.bonus-card p.sub{opacity:.85;margin:0 0 16px;}
.bullet{margin:4px 0 0 0; padding-left:0; list-style:none;}
.bullet li{margin:6px 0;opacity:.9}
.bonus-card .cta{
  margin-top:18px;
  display:inline-block;
  padding:12px 18px;
  border-radius:12px;
  font-weight:700;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  background:#2e8bff!important;
  color:#fff;
}
.bonus-card .tag{
  position:absolute; top:14px; right:14px;
  font-size:12px; padding:6px 10px; border-radius:999px;
  background:rgba(0,255,170,.14); color:#b9fff0; border:1px solid rgba(0,255,170,.25);
}
/* end bonus cards */



/* Floating symbols */
.floater{position:absolute; pointer-events:none; z-index:2; opacity:.85; animation:floatY var(--dur,12s) ease-in-out infinite, slowSpin var(--rotDur,20s) linear infinite;}
.floater.small{width:64px;height:auto}.floater.med{width:96px}.floater.big{width:140px}
@keyframes floatY{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-18px) } }
@keyframes slowSpin{ from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } }
.hero, #how, #affiliates, footer{ position:relative }
@media (max-width: 768px){
  .floater{ opacity:.6; }
  .hide-mobile{ display:none }
}
.floater.dim{ opacity:.28; filter:blur(0.2px) }


/* Floating symbols — polished to match theme */
.floater{position:absolute; pointer-events:none; z-index:2; opacity:.78;
  animation:floatY var(--dur,12s) ease-in-out infinite;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));}
/* Light rotation only on hover to reduce motion clutter */
.floater.spin{animation:floatY var(--dur,12s) ease-in-out infinite, slowSpin var(--rotDur,26s) linear infinite;}
.floater.small{width:60px}.floater.med{width:88px}.floater.big{width:132px}
.floater.glow{ mix-blend-mode:screen; filter: drop-shadow(0 0 18px rgba(127,90,240,.35)) drop-shadow(0 0 28px rgba(0,238,255,.18)); }
.floater.dim{ opacity:.22; mix-blend-mode:screen; filter: blur(.2px); }

@keyframes floatY{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
@keyframes slowSpin{ from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } }

/* Ensure containers are relative */
.hero, #how.section, #affiliates.section, footer{ position:relative }

/* Mobile simplifications */
@media (max-width: 992px){
  .floater.big{ width:108px }
}
@media (max-width: 768px){
  .floater{ opacity:.5 }
  .hide-mobile{ display:none }
}


/* brand images and aligned buttons */
.bonus-grid{ align-items: stretch; }
.bonus-card{ display:flex; flex-direction:column; height:100%; }
.bonus-card .cta{ margin-top:auto; align-self:flex-start; }
.brand-top{ display:flex; align-items:center; gap:12px; margin:8px 0 12px 0; }
.brand-top img{ height:36px; width:auto; display:block; }
.brand-name{ margin:0; font-weight:700; letter-spacing:.2px; }


/* Top logo above brand row, non-intrusive */
.bonus-card .brand-top-logo{display:flex;justify-content:center;margin:4px 0 10px 0}
.bonus-card .brand-top-logo img{max-width:140px; width:100%; height:auto; display:block; filter:drop-shadow(0 6px 12px rgba(0,0,0,.30))}


/* Compact spacing when brand row is removed */
.bonus-card .brand-top-logo{ margin-top:6px; margin-bottom:12px; }


/* --- Alignment pass: make all bonus cards line up --- */
.bonus-card{ display:flex; flex-direction:column; }
.bonus-card .brand-top-logo{ min-height:48px; display:flex; align-items:center; justify-content:center; margin:4px 0 12px 0; }
.bonus-card .brand-top-logo img{ max-height:38px; width:auto; height:auto; max-width:none; }
.bonus-card h3{ margin:0; }
.bonus-card .sub{ margin:6px 0 14px 0; }
.bonus-card .bullet{ margin:0 0 18px 0; }
.bonus-card .cta{ margin-top:auto; align-self:flex-start; }


/* Uniform header heights for perfect row alignment */
.bonus-card{ display:flex; flex-direction:column; }
.bonus-card .brand-top-logo{ height:60px; display:flex; align-items:center; justify-content:center; margin:2px 0 12px 0; }
.bonus-card .brand-top-logo img{ max-height:56px; width:auto; height:auto; max-width:100%; }
/* Make FastSlots logo larger */
.bonus-grid .bonus-card:nth-child(1) .brand-top-logo img{ max-height:72px; }
/* Normalize heading/sub spacing so % lines align */
.bonus-card h3{ margin:0; line-height:1; min-height:48px; display:flex; align-items:flex-end; }
.bonus-card .sub{ margin:6px 0 14px 0; min-height:22px; display:flex; align-items:center; }
/* Keep CTAs aligned at bottom */
.bonus-card .cta{ margin-top:auto; }


/* Hide dark ribbon overlay above affiliates */
#affiliates .ribbons{ display:none !important; }
img.ribbons{ display:none !important; }