/* Mama BetPro Wellat — black/red landing */
:root{
  --bg:#050505;
  --ink:#f4f4f4;
  --mute:#b7b7b7;
  --red:#ff2a3a;
  --red2:#c41020;
  --line:rgba(255,42,58,.35);
  --glow:0 0 28px rgba(255,42,58,.55),0 0 60px rgba(255,42,58,.25);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:"Figtree",sans-serif}
.wl-body{min-height:100vh;overflow-x:hidden}

.wl-stage{position:fixed;inset:0;z-index:0;pointer-events:none}
.wl-hero-media{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 28%;
  opacity:.42;filter:saturate(1.05) contrast(1.08) brightness(.72);
  animation:wlKen 18s ease-in-out infinite alternate;
}
@keyframes wlKen{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to{transform:scale(1.12) translate3d(-1.5%,-1%,0)}
}
.wl-wash{
  position:absolute;inset:0;
  background:
    linear-gradient(105deg, rgba(5,5,5,.88) 0%, rgba(5,5,5,.55) 42%, rgba(80,8,14,.45) 100%),
    linear-gradient(180deg, rgba(5,5,5,.2) 0%, rgba(5,5,5,.55) 55%, #050505 100%);
}
.wl-grain{
  position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wl-orb{position:absolute;border-radius:50%;filter:blur(50px);opacity:.55;animation:wlFloat 8s ease-in-out infinite}
.wl-orb-a{width:340px;height:340px;left:-80px;top:12%;background:rgba(255,42,58,.35)}
.wl-orb-b{width:280px;height:280px;right:-60px;bottom:18%;background:rgba(196,16,32,.3);animation-delay:-3s}
@keyframes wlFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(18px,-22px,0)}
}

.wl-nav,.wl-hero,.wl-how,.wl-foot{position:relative;z-index:2}
.wl-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,3vw,28px) clamp(18px,5vw,56px);
}
.wl-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.wl-mark{
  width:48px;height:48px;border-radius:14px;
  box-shadow:var(--glow);
  transition:transform .28s ease, filter .28s ease, box-shadow .28s ease;
  animation:wlLogo 3.2s ease-in-out infinite;
}
@keyframes wlLogo{
  0%,100%{filter:drop-shadow(0 0 8px rgba(255,42,58,.45))}
  50%{filter:drop-shadow(0 0 20px rgba(255,42,58,.9))}
}
.wl-brand:hover .wl-mark{
  transform:scale(1.08) rotate(-3deg);
  box-shadow:0 0 36px rgba(255,42,58,.75);
}
.wl-brand-copy strong{
  display:block;font-family:"Syne",sans-serif;font-weight:800;
  font-size:clamp(15px,2.2vw,18px);letter-spacing:.01em;line-height:1.1;
}

.wl-link{
  text-decoration:none;color:#fff;font-weight:700;font-size:14px;
  padding:11px 18px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,42,58,.08);
  box-shadow:0 0 16px rgba(255,42,58,.18);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.wl-link:hover{
  transform:translateY(-2px);
  background:rgba(255,42,58,.22);
  box-shadow:var(--glow);
}

.wl-hero{
  min-height:calc(100svh - 88px);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(24px,6vh,64px) clamp(18px,5vw,56px) clamp(40px,8vh,80px);
  max-width:920px;
}

.wl-duo{
  display:inline-flex;align-items:stretch;margin:0 0 18px;border-radius:999px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 22px rgba(245,197,24,.12),0 0 18px rgba(34,197,94,.1);
  animation:wlIn .7s ease both;
}
.wl-duo span{
  padding:9px 14px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  font-family:"Syne",sans-serif;
}
.wl-duo-mama{
  background:linear-gradient(135deg,#f5c518,#d4a017);
  color:#1a1400;
  text-shadow:0 0 12px rgba(245,197,24,.35);
  box-shadow:inset 0 0 18px rgba(255,255,255,.15);
}
.wl-duo-bet{
  background:linear-gradient(135deg,#16a34a,#22c55e);
  color:#041108;
  text-shadow:0 0 12px rgba(34,197,94,.35);
  box-shadow:inset 0 0 18px rgba(255,255,255,.12);
}

.wl-kicker{
  margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#ff5a68;
  text-shadow:0 0 18px rgba(255,42,58,.45);
  animation:wlIn .7s ease both;
}
.wl-title{
  margin:0;font-family:"Syne",sans-serif;font-weight:800;
  font-size:clamp(2.6rem,8vw,5.2rem);line-height:.98;letter-spacing:-.03em;
  animation:wlIn .8s .08s ease both;
}
.wl-title span{
  color:var(--red);
  text-shadow:0 0 28px rgba(255,42,58,.55);
}
.wl-lead{
  margin:18px 0 28px;max-width:34ch;
  font-size:clamp(16px,2.4vw,19px);line-height:1.55;color:var(--mute);font-weight:500;
  animation:wlIn .85s .14s ease both;
}
.wl-cta{display:flex;flex-wrap:wrap;gap:12px;animation:wlIn .9s .2s ease both}
.wl-btn{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;font-weight:750;font-size:15px;
  padding:15px 22px;border-radius:14px;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease, background .25s ease;
}
.wl-btn-main{
  color:#fff;
  background:linear-gradient(135deg,#ff2a3a 0%,#c41020 55%,#7a0a12 100%);
  border:1px solid rgba(255,160,170,.4);
  box-shadow:var(--glow);
  animation:wlPulse 2.6s ease-in-out infinite;
}
.wl-btn-soft{
  color:#ffd0d4;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,42,58,.45);
  backdrop-filter:blur(10px);
}
.wl-btn:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 0 34px rgba(255,42,58,.8),0 0 70px rgba(255,42,58,.35);
  filter:brightness(1.06);
}
@keyframes wlPulse{
  0%,100%{box-shadow:0 0 18px rgba(255,42,58,.45),0 0 40px rgba(255,42,58,.2)}
  50%{box-shadow:0 0 34px rgba(255,42,58,.85),0 0 72px rgba(255,42,58,.4)}
}
@keyframes wlIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

.wl-how{
  padding:8px clamp(18px,5vw,56px) 56px;
  border-top:1px solid rgba(255,42,58,.18);
  background:linear-gradient(180deg, transparent, rgba(255,42,58,.04));
}
.wl-how h2{
  margin:0 0 18px;font-family:"Syne",sans-serif;font-size:clamp(1.2rem,3vw,1.5rem);font-weight:800;
}
.wl-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wl-steps a{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:14px;row-gap:2px;align-items:center;
  text-decoration:none;color:inherit;
  padding:16px 18px;border-radius:16px;
  border:1px solid rgba(255,42,58,.22);
  background:linear-gradient(135deg,rgba(255,42,58,.08),rgba(0,0,0,.35));
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.wl-steps a:hover{
  transform:translateY(-3px);
  border-color:rgba(255,42,58,.65);
  box-shadow:0 0 28px rgba(255,42,58,.35),0 12px 28px rgba(0,0,0,.4);
}
.wl-steps em{
  grid-row:1 / span 2;font-style:normal;font-family:"Syne",sans-serif;
  font-weight:800;font-size:22px;color:var(--red);
  text-shadow:0 0 16px rgba(255,42,58,.5);
}
.wl-steps strong{font-size:15px}
.wl-steps span{color:var(--mute);font-size:13px}

.wl-foot{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:18px clamp(18px,5vw,56px) 28px;
  color:#8a8a8a;font-size:12px;
}
.wl-foot a{color:#ff5a68;text-decoration:none;font-weight:700}
.wl-foot a:hover{text-shadow:0 0 12px rgba(255,42,58,.6)}

@media (min-width:820px){
  .wl-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
}
@media (max-width:520px){
  .wl-brand-copy strong{max-width:42vw}
  .wl-btn{width:100%;justify-content:center}
  .wl-cta{width:100%}
}