/* Base theme */
:root{
  --bg:#0b0b0c; --card:#111114; --muted:#0e0e11; --text:#fff; --sub:#cfd3dc;
  --brand1:#ff7a30; --brand2:#ff5a6b; --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.55}
img{max-width:100%;display:block} a{color:#fff;text-decoration:none}
.container{width:min(1140px,92%);margin-inline:auto}

/* NAV */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,10,12,.6);backdrop-filter:saturate(1.1) blur(8px);border-bottom:1px solid #1a1a1f}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand-logo{height:48px}
.menu{display:flex;gap:22px;align-items:center}
.btn{background:linear-gradient(135deg,var(--brand1),var(--brand2));border:0;border-radius:999px;padding:12px 18px;font-weight:700;cursor:pointer}
.btn--sm{padding:10px 14px}
.btn--light{background:#fff;color:#101010}
.hamburger{display:none;background:transparent;border:0;gap:5px;flex-direction:column}
.hamburger span{width:22px;height:2px;background:#fff;border-radius:1px}
@media (max-width:900px){ .menu{display:none;position:absolute;right:4%;top:62px;background:#111114;border:1px solid #1f1f24;border-radius:14px;padding:14px 16px;flex-direction:column;box-shadow:var(--shadow)} .hamburger{display:flex} }

/* HERO */
.hero{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(900px 600px at 20% 10%, rgba(255,150,64,.35), transparent 60%), radial-gradient(900px 600px at 80% 20%, rgba(255,90,107,.3), transparent 60%); pointer-events:none}
.hero-inner{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding:80px 0}
.hero-copy h1{font-size:clamp(36px,6vw,64px);margin:0 0 12px}
.underline{background:linear-gradient(120deg,var(--brand1),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--sub);max-width:680px;margin-bottom:20px}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.cta input{flex:1;min-width:260px;background:#0f0f13;border:1px solid #24242a;border-radius:999px;padding:12px 16px;color:#fff}
.hero-visual img{width:100%;border-radius:16px;border:1px solid #1e1e24;box-shadow:0 20px 40px rgba(0,0,0,.35)}

/* PRIZES trusted-by */
.trusted{border-top:1px solid #1a1a1f;border-bottom:1px solid #1a1a1f;background:#0a0a0d;padding:8px 0}
.trusted-kicker{display:block;color:#aeb3be;font-size:.95rem;margin-bottom:10px}
.trusted-kicker.center{text-align:center;font-size:1.15rem;font-weight:800;letter-spacing:.3px;color:#e5e7ee}
.trusted-rail{overflow:hidden;mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent)}
.trusted-track{display:flex;gap:40px;align-items:center;min-width:200%;animation:logos-roll 26s linear infinite}
.trusted img{height:36px;object-fit:contain;filter:none;opacity:1}
@keyframes logos-roll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* SECTIONS */
.section{padding:72px 0}
.section.muted{background:var(--muted)}
.section-title{font-size:clamp(28px,4vw,40px);margin:0 0 22px}
.section-title.center{text-align:center}
.grid{display:grid;gap:18px}
.grid.three{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width:900px){ .hero-inner{grid-template-columns:1fr} .grid.three{grid-template-columns:1fr} }

/* CARDS */
.card{background:var(--card);border:1px solid #1e1e24;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.step .step-num{font-weight:800;background:linear-gradient(135deg,var(--brand1),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.1rem}

/* Centered images for drops & games */
.drops-center, .games-center{display:flex;justify-content:center}
.drops-center img, .games-center img{max-width:820px;border-radius:16px;border:1px solid #1e1e24;box-shadow:0 16px 32px rgba(0,0,0,.35)}

/* TEDDY */
.teddy-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.teddy-visual img{width:100%;border-radius:16px;border:1px solid #1e1e24}
.teddy-copy .lead{margin-bottom:14px}
.ticks{list-style:none;padding:0;margin:12px 0 18px}
.ticks li{padding-left:24px;position:relative;margin-bottom:8px}
.ticks li:before{content:'✓';position:absolute;left:0;top:0;color:#9fe29a}

/* FOOTER */
.footer{padding:32px 0;background:#0a0a0c;border-top:1px solid #1a1a1f}
.footer-inner{display:grid;gap:12px;align-items:center;grid-template-columns:1fr 1fr}
.brand-ico{width:28px;height:28px;border-radius:8px;margin-right:8px;vertical-align:middle}
.foot-cta{justify-self:end}
.foot-copy{grid-column:1/-1;color:#a7adba;opacity:.8;margin:0}
@media (max-width:900px){ .footer-inner{grid-template-columns:1fr} .foot-cta{justify-self:start;width:100%} .foot-cta input{flex:1} }

/* v7: Live grid and refined image sizing */
.live-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.live-card{background:var(--card);border:1px solid #1e1e24;border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.live-card h3{margin:6px 0 12px}
.live-media{display:flex;justify-content:center}
.live-media img{width:88%;max-width:520px;border-radius:12px;border:1px solid #1e1e24;box-shadow:0 12px 24px rgba(0,0,0,.28)}
@media (max-width:900px){.live-grid{grid-template-columns:1fr} .live-media img{width:94%}}

/* Smaller Teddy image for a more professional layout */
.teddy-visual img{max-width:420px;margin-inline:auto}
@media (max-width:900px){.teddy-visual img{max-width:360px}}

/* v9: smaller Teddy and twin image section */
.teddy-visual img{max-width:340px;margin-inline:auto}
@media (max-width:900px){.teddy-visual img{max-width:300px}}

.duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.duo-card{background:var(--card);border:1px solid #1e1e24;border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.duo-card h3{margin:6px 0 12px}
.duo-media{display:flex;justify-content:center}
.duo-media img{width:78%;max-width:440px;border-radius:12px;border:1px solid #1e1e24;box-shadow:0 12px 24px rgba(0,0,0,.28)}
@media (max-width:900px){.duo-grid{grid-template-columns:1fr} .duo-media img{width:86%;max-width:460px}}

/* v10: style mini-live headings like Teddy title, bump image size */
.duo-card h3{
  font-size:clamp(22px,3.2vw,28px);
  margin:6px 0 12px;
  font-weight:800;
  background:linear-gradient(120deg,var(--brand1),var(--brand2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.duo-media img{width:84%;max-width:520px} /* a bit larger */

/* v13: larger Teddy and larger duo images */
.teddy-visual img{max-width:560px;margin-inline:auto}
@media (max-width:900px){.teddy-visual img{max-width:420px}}

/* Duo images a bit larger */
.duo-media img{width:92%;max-width:640px}
@media (max-width:900px){.duo-media img{width:94%;max-width:520px}}

/* v15: Teddy animation, CTAs, and spacing polish */

/* Subtle floating animation on Teddy */
@keyframes bob {
  0% { transform: translateY(0) }
  50% { transform: translateY(-6px) }
  100% { transform: translateY(0) }
}
.floaty .teddy-visual, .floaty img {}
.floaty img { animation: bob 4.5s ease-in-out infinite; transition: transform .25s ease, filter .25s ease }
.floaty img:hover { transform: translateY(-8px) scale(1.02); filter: drop-shadow(0 10px 18px rgba(255,122,48,.25)) }

/* CTA buttons under Teddy */
.teddy-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.btn--lg{padding:14px 18px;font-size:1rem}
.btn--outline{background:transparent;color:#fff;border:1px solid #2a2a31}
.btn--outline:hover{border-color:#3a3a44;background:rgba(255,255,255,.06)}

/* Section spacing & polish */
.section{padding:84px 0}
.section.muted{background:linear-gradient(180deg, #0e0e11 0%, #0b0b0c 100%)}
.teddy-grid{gap:34px}
.duo-elevated{background:#0f0f13;border:1px solid #202029;border-radius:18px;padding:18px;box-shadow:0 18px 32px rgba(0,0,0,.35)}

.duo-card{background:transparent;border:1px solid #1f1f26;border-radius:14px;padding:16px}
.duo-media img{border-radius:14px}

/* v16 enlarge images */
.teddy-visual img{max-width:1000px!important}
.duo-media img{max-width:1000px!important}

/* v17 force larger images */
.teddy-visual img{max-width:1000px!important;width:100%;height:auto;}
.duo-media img{max-width:1000px!important;width:100%;height:auto;}

/* v18 Teddy wave + blink */
@keyframes teddyWave {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  50% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}
.teddy-visual img {
  animation: teddyWave 6s ease-in-out infinite;
  transform-origin: bottom center;
}

.teddy-visual {
  position: relative;
}
.teddy-eyes {
  position: absolute;
  width: 30%;
  height: 12%;
  top: 24%;
  left: 35%;
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  opacity: 0;
  animation: blink 7s infinite;
  pointer-events: none;
}
@keyframes blink {
  0%, 92%, 100% { opacity: 0; }
  93%, 96%      { opacity: 1; }
}

/* v19: revert Teddy to static image */
.teddy-visual img{animation:none !important; transform:none !important}

/* v19: force Live Drops & Our Games side-by-side on desktop */
.duo-grid{display:grid !important; grid-template-columns: 1fr 1fr !important; gap:24px !important; align-items:start}
@media (max-width: 700px){
  .duo-grid{grid-template-columns:1fr !important}
}

/* v21b: centered two-up layout for mini-live */
.duo-grid{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:32px !important;
  max-width:1200px;
  margin: 0 auto;
  align-items:start;
  justify-items:center;
}
.duo-card{width:100%;max-width:560px}
.duo-media{display:flex;justify-content:center}
.duo-media img{width:100%;max-width:1000px;height:auto}
@media (max-width:860px){
  .duo-grid{grid-template-columns:1fr !important;max-width:760px}
  .duo-card{max-width:720px}
}