/* ===== Reset / base (mobile-first) ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --text:#ffffff;
  --head-text:#4e444a;
  --gift:#3ee06b;
  --green-1:#7dfb98;
  --green-2:#2dd35f;
  --green-glow:rgba(74,240,120,.5);
  --gold-1:#f7da8b;
  --gold-2:#e2a93f;
  --gold-text:#4a3206;
  --card-bg:rgba(255,255,255,.05);
  --card-border:rgba(255,255,255,.14);
}
html{-webkit-text-size-adjust:100%;background:#05100a}
body{
  font-family:Inter,-apple-system,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#0c1d15 0%,#0a140e 45%,#05100a 100%);
  min-height:100vh;
  line-height:1.4;
}

/* Page fills the *visible* viewport; banner flexes to absorb leftover space
   so all offers and both CTAs stay in view on load (no toolbar overlap). */
.page{
  max-width:600px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100svh;
  height:100dvh;
}

/* ===== Header: logo + welcome ===== */
.topbar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  background:transparent;
  padding:9px 16px;
}
.logo-box{flex:0 0 auto;display:flex;align-items:center;height:36px}
.logo-box img{height:36px;width:auto;display:block}
.welcome{
  font-size:1.4rem;
  font-weight:800;
  color:#fff;
  white-space:nowrap;
}

/* ===== Hero banner (full-bleed, flexes to fill) ===== */
.hero{position:relative;line-height:0;flex:1 1 auto;min-height:60px}
.hero img{display:block;width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;height:38%;
  background:linear-gradient(180deg,rgba(7,16,10,0) 0%,#0a140e 92%);
  pointer-events:none;
}

/* ===== Bonus + rollovers + CTAs (anchored to bottom of viewport) ===== */
.content{
  position:relative;z-index:1;
  flex:0 0 auto;
  margin-top:-16px;
  padding:0 14px calc(8px + env(safe-area-inset-bottom));
}
.bonus{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:1px 15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 12px rgba(0,0,0,.35);
}
.bonus-list{list-style:none}
.row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.row:last-child{border-bottom:0}
.deposit{color:#fff;font-weight:800;font-size:1.02rem}
.gift{color:var(--gift);font-weight:800;font-size:1.02rem}
.code{
  margin-left:auto;
  color:var(--gold-text);
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2));
  border-radius:50px;
  padding:6px 13px;
  font-size:.82rem;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 2px 5px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.55);
}

/* ===== Rollover lines ===== */
.rollover{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:8px;
  padding:8px 12px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:12px;
  font-size:.92rem;
  font-weight:700;
  color:#fff;
}
.rollover .drop{flex:0 0 auto;display:flex}

/* ===== CTA (glowing green pill) ===== */
.cta{
  display:block;
  text-align:center;
  text-decoration:none;
  margin-top:8px;
  font-size:1.2rem;
  font-weight:800;
  letter-spacing:.03em;
  color:#093218;
  background:linear-gradient(180deg,var(--green-1),var(--green-2));
  border-radius:50px;
  padding:11px;
  box-shadow:0 0 18px var(--green-glow),0 5px 14px rgba(0,0,0,.4);
  animation:pulse 1.9s ease-in-out infinite;
}
.cta:active{transform:translateY(2px)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@media (prefers-reduced-motion:reduce){.cta{animation:none}}

/* ===== Desktop: revert to normal flow, centered column (refine later) ===== */
@media (min-width:768px){
  .page{height:auto;min-height:100vh;display:flex;max-width:900px;justify-content:center}
  .topbar{padding:14px 18px;gap:14px}
  .logo-box,.logo-box img{height:64px}
  .welcome{font-size:2.1rem}
  .hero{flex:none}
  .hero img{height:auto;object-fit:cover;opacity:.5;border-radius:14px;}
  .content{position:absolute;display:flex;width:900px;margin-top:60px;padding:0 16px 26px;justify-content:space-between;}
  .bonus{width: 49%;}
  .right-column{width:49%;display:flex;flex-direction:column;justify-content:space-between}
  .cta-container{display:flex;flex-direction:column;gap:20px}
  .row{padding:12px 0}
  .deposit,.gift{font-size:1.25rem;text-shadow:0px 0px 8px #000;}
  .code{font-size:1rem;padding:9px 18px}
  .rollover{font-size:1.1rem;margin-top:0;padding:11px 14px}
  .rollover>span:last-child{text-shadow:0px 0px 8px #000;}
  .cta{font-size:1.5rem;margin-top:0;padding:15px}
}