/* ============================================================
   BDG PRO — premium landing page (guests). Distinct from the
   in-app dashboard. Royal gold on near-black with red-velvet accents.
   ============================================================ */
.lp{background:#07060b; color:#f3ead4; -webkit-font-smoothing:antialiased}
.lp-stage{position:relative; max-width:480px; margin:0 auto; min-height:100vh; overflow-x:hidden;
  background:radial-gradient(120% 60% at 50% -8%,#1c1206,#07060b 60%)}

/* ---------- top nav ---------- */
.lp-nav{position:fixed; top:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; z-index:60;
  display:flex; align-items:center; justify-content:space-between; padding:12px 16px; transition:all .3s}
.lp-nav.solid{background:linear-gradient(180deg,rgba(18,14,8,.96),rgba(12,9,5,.9)); backdrop-filter:blur(10px);
  box-shadow:0 6px 20px rgba(0,0,0,.5); border-bottom:1px solid rgba(245,196,94,.25)}
.lp-logo{display:flex; align-items:center; gap:8px; text-decoration:none}
.lp-logo-img{width:34px; height:34px; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  border:1.5px solid rgba(245,196,94,.6); box-shadow:0 0 12px rgba(245,196,94,.35)}
.lp-logo-img img{width:100%; height:100%; object-fit:contain}
.lp-logo-crown{font-size:20px}
.lp-logo-word{font-size:19px; font-weight:900; letter-spacing:.5px; color:#fff}
.lp-logo-word b{background:linear-gradient(135deg,#fff0c0,var(--gold-deep)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin-left:2px}
.lp-nav-btns{display:flex; gap:8px}
.lp-nb{padding:8px 15px; border-radius:22px; font-size:12.5px; font-weight:800; text-decoration:none; color:#f3ead4; border:1px solid rgba(245,196,94,.35)}
.lp-nb.primary{color:#2b1c00; border:none; background:linear-gradient(135deg,#fff0c0,var(--gold) 55%,var(--gold-deep));
  box-shadow:0 4px 12px rgba(200,146,46,.4)}

/* ---------- hero ---------- */
.lp-hero{position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:80px 22px 40px; overflow:hidden}
.lp-hero-slides{position:absolute; inset:0; z-index:0}
.lp-hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.5s ease}
.lp-hero-bg.active{opacity:1; animation:lpZoom 5s ease-out both}
@keyframes lpZoom{from{transform:scale(1.03)}to{transform:scale(1.14)}}
.lp-hero-ov{position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(7,6,11,.55) 0%,rgba(7,6,11,.35) 35%,rgba(7,6,11,.82) 78%,#07060b 100%)}
.lp-hero-glow{position:absolute; z-index:1; top:32%; left:50%; width:340px; height:340px; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(245,196,94,.32),transparent 62%); filter:blur(6px); pointer-events:none;
  animation:lpPulse 4.5s ease-in-out infinite}
@keyframes lpPulse{0%,100%{opacity:.7}50%{opacity:1}}
.lp-hero-inner{position:relative; z-index:2; animation:lpUp .8s ease-out both}
@keyframes lpUp{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:translateY(0)}}
.lp-eyebrow{display:inline-block; font-size:10.5px; font-weight:900; letter-spacing:2px; text-transform:uppercase; color:var(--gold);
  padding:5px 14px; border-radius:20px; background:rgba(245,196,94,.1); border:1px solid rgba(245,196,94,.35); margin-bottom:16px}
.lp-title{font-size:62px; font-weight:900; letter-spacing:1px; line-height:.92; margin:0 0 12px; color:#fff;
  text-shadow:0 6px 30px rgba(0,0,0,.6)}
.lp-title span{display:block; background:linear-gradient(180deg,#fff6da,var(--gold) 52%,var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 4px 18px rgba(245,196,94,.4))}
.lp-tag{font-size:19px; font-weight:800; margin:0 0 10px;
  background:linear-gradient(90deg,#ffe6a1,#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lp-sub{font-size:13px; line-height:1.6; color:rgba(243,234,212,.72); max-width:330px; margin:0 auto 24px}
.lp-cta{display:flex; flex-direction:column; gap:11px; max-width:300px; margin:0 auto}
.lp-btn{position:relative; overflow:hidden; display:inline-block; text-align:center; padding:15px 26px; border-radius:15px;
  font-size:15px; font-weight:900; text-decoration:none; cursor:pointer; border:none; transition:transform .12s}
.lp-btn:active{transform:scale(.97)}
.lp-btn.gold{color:#3a2405; border:1px solid rgba(255,255,255,.3);
  background:linear-gradient(135deg,#fff0c0,var(--gold) 52%,var(--gold-deep));
  box-shadow:0 10px 26px rgba(200,146,46,.45), inset 0 1px 0 rgba(255,255,255,.6)}
.lp-btn.gold::after{content:''; position:absolute; top:0; bottom:0; width:36%; left:-46%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent); transform:skewX(-20deg); animation:bdgBtnShine 3s ease-in-out infinite}
.lp-btn.ghost{color:#fff; background:rgba(255,255,255,.06); border:1.5px solid rgba(245,196,94,.4)}
.lp-btn.lg{padding:17px 34px; font-size:16px}
.lp-trust{display:flex; justify-content:center; flex-wrap:wrap; gap:8px 16px; margin-top:22px}
.lp-trust span{font-size:11px; font-weight:700; color:rgba(243,234,212,.7)}
.lp-scroll{position:absolute; z-index:2; bottom:16px; left:50%; transform:translateX(-50%); color:var(--gold);
  font-size:20px; text-decoration:none; animation:lpBounce 1.8s ease-in-out infinite}
@keyframes lpBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}

/* ---------- stats ---------- */
.lp-stats{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:-24px 16px 8px; position:relative; z-index:3}
.lp-stat{padding:16px 10px; border-radius:15px; text-align:center;
  background:linear-gradient(180deg,rgba(40,32,16,.7),rgba(18,14,8,.7)); border:1px solid rgba(245,196,94,.28);
  box-shadow:0 8px 20px rgba(0,0,0,.4)}
.lp-stat b{display:block; font-size:26px; font-weight:900; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff6da,var(--gold-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lp-stat span{font-size:10.5px; font-weight:700; color:rgba(243,234,212,.62); letter-spacing:.3px}

/* ---------- sections ---------- */
.lp-sec{padding:34px 16px 8px}
.lp-h2{font-size:26px; font-weight:900; text-align:center; margin:0 0 6px; color:#fff}
.lp-h2 span{background:linear-gradient(135deg,#fff6da,var(--gold) 55%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lp-p{text-align:center; font-size:12.5px; color:rgba(243,234,212,.62); max-width:330px; margin:0 auto 18px; line-height:1.6}

/* games row (horizontal scroll) */
.lp-games{display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; padding:4px 2px 8px; scroll-snap-type:x mandatory}
.lp-games::-webkit-scrollbar{display:none}
.lp-game{flex:0 0 158px; scroll-snap-align:start; text-decoration:none; border-radius:16px; overflow:hidden; position:relative;
  background:linear-gradient(180deg,#1a1408,#0d0a05); border:1px solid rgba(245,196,94,.28);
  box-shadow:0 10px 24px rgba(0,0,0,.45); transition:transform .15s}
.lp-game:active{transform:scale(.97)}
.lp-game-img{height:110px; overflow:hidden; position:relative}
.lp-game-img img{width:100%; height:100%; object-fit:cover}
.lp-game-img::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(13,10,5,.9))}
.lp-game-meta{padding:9px 12px 12px}
.lp-game-meta b{display:block; font-size:14px; color:#fff; font-weight:900}
.lp-game-meta span{font-size:10.5px; color:rgba(243,234,212,.6)}
.lp-game-play{position:absolute; top:9px; right:9px; z-index:2; font-size:10px; font-weight:900; color:#2b1c00;
  padding:3px 9px; border-radius:12px; background:linear-gradient(135deg,#fff0c0,var(--gold-deep)); box-shadow:0 3px 8px rgba(0,0,0,.4)}

/* feature cards */
.lp-feats{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.lp-feat{padding:18px 14px; border-radius:16px; text-align:left;
  background:linear-gradient(180deg,rgba(36,29,15,.5),rgba(16,12,7,.5)); border:1px solid rgba(245,196,94,.22)}
.lp-feat-ic{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:13px; font-size:22px; margin-bottom:10px;
  background:linear-gradient(135deg,rgba(245,196,94,.22),rgba(245,196,94,.05)); border:1px solid rgba(245,196,94,.3)}
.lp-feat b{display:block; font-size:14.5px; color:#fff; margin-bottom:5px}
.lp-feat p{font-size:11.5px; line-height:1.55; color:rgba(243,234,212,.62); margin:0}

/* jackpot band */
.lp-promo{position:relative; margin:30px 0; min-height:250px; overflow:hidden}
.lp-promo-track{position:relative; min-height:250px}
.lp-promo-slide{position:absolute; inset:0; display:flex; align-items:center; opacity:0; visibility:hidden; transition:opacity .8s ease}
.lp-promo-slide.active{opacity:1; visibility:visible}
.lp-promo-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.lp-promo-slide.active .lp-promo-bg{animation:lpZoom 7s ease-out both}
.lp-promo-ov{position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(7,6,11,.94) 8%,rgba(7,6,11,.55) 60%,rgba(7,6,11,.18))}
.lp-promo-copy{position:relative; z-index:2; padding:26px 20px; max-width:76%}
.lp-promo-slide.active .lp-promo-copy{animation:lpUp .6s ease-out both}
.lp-promo-copy h2{font-size:26px; font-weight:900; margin:8px 0 8px; color:#fff; line-height:1.05}
.lp-promo-copy h2 span{display:block; background:linear-gradient(135deg,#fff6da,var(--gold) 55%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lp-promo-copy p{font-size:12px; color:rgba(243,234,212,.72); line-height:1.55; margin:0 0 16px}
.lp-promo-dots{position:absolute; z-index:3; bottom:12px; left:20px; display:flex; gap:6px}
.lp-promo-dots i{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.3); cursor:pointer; transition:all .25s}
.lp-promo-dots i.on{width:20px; border-radius:4px; background:linear-gradient(90deg,var(--gold-lt),var(--gold-deep)); box-shadow:0 0 8px rgba(245,196,94,.7)}

/* winners */
.lp-winners{display:flex; flex-direction:column; gap:9px}
.lp-winrow{display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:13px;
  background:linear-gradient(100deg,rgba(40,32,16,.6),rgba(18,14,8,.5)); border:1px solid rgba(245,196,94,.2)}
.lp-win-av{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; font-size:15px; font-weight:900; color:#2b1c00;
  background:linear-gradient(135deg,#fff0c0,var(--gold-deep)); box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.lp-win-name{display:flex; flex-direction:column; font-size:13px; font-weight:800; color:#fff}
.lp-win-name small{font-size:10px; font-weight:600; color:rgba(243,234,212,.55)}
.lp-win-amt{margin-left:auto; font-size:13px; font-weight:900; color:var(--gold); font-variant-numeric:tabular-nums}

/* final CTA */
.lp-final{position:relative; text-align:center; padding:48px 22px 40px; overflow:hidden}
.lp-final-glow{position:absolute; top:20%; left:50%; width:300px; height:260px; transform:translateX(-50%);
  background:radial-gradient(circle,rgba(245,196,94,.22),transparent 65%); pointer-events:none}
.lp-final h2{font-size:30px; font-weight:900; margin:8px 0 8px; color:#fff; position:relative}
.lp-final h2 span{background:linear-gradient(135deg,#fff6da,var(--gold) 55%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lp-final p{font-size:12.5px; color:rgba(243,234,212,.66); max-width:320px; margin:0 auto 22px; line-height:1.6; position:relative}
.lp-final-login{display:block; margin-top:16px; font-size:12.5px; font-weight:700; color:rgba(243,234,212,.7); text-decoration:none; position:relative}

/* footer */
.lp-foot{text-align:center; padding:30px 22px 40px; border-top:1px solid rgba(245,196,94,.14); margin-top:14px}
.lp-foot-logo{font-size:20px; font-weight:900; color:#fff; margin-bottom:10px}
.lp-foot-logo b{background:linear-gradient(135deg,#fff0c0,var(--gold-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lp-foot p{font-size:11px; line-height:1.6; color:rgba(243,234,212,.5); max-width:340px; margin:0 auto 8px}
.lp-foot-cr{color:rgba(243,234,212,.35) !important}

/* live winner row slide-in */
.lp-winrow.new{animation:lpWinIn .6s cubic-bezier(.2,1.2,.4,1)}
@keyframes lpWinIn{0%{opacity:0; transform:translateY(-16px) scale(.97); box-shadow:0 0 22px rgba(245,196,94,.5)}
  100%{opacity:1; transform:translateY(0) scale(1)}}

/* scroll reveal (JS adds .lp-rv, then .in) */
.lp-rv{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.9,.3,1)}
.lp-rv.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .lp-hero-bg.active,.lp-promo-slide.active .lp-promo-bg{animation:none}
  .lp-rv{opacity:1; transform:none; transition:none}
}
@media (max-width:360px){.lp-title{font-size:52px}.lp-h2{font-size:23px}}