/* Lemon-style landing — the source page's own palette and rules, kept as they
   were, plus what the dynamic blocks need: a mobile drawer (the source hid its
   menu outright), game/provider/payment grids fed from the panel, and a FAQ
   built from the domain's own rows. */
:root{
  --bg:#0f2622; --bar:#132f2a; --card:#1a4038; --card2:#22503f;
  --lime:#b8d82c; --gold:#f7c450; --orange:#f59a23;
  --text:#eef5ee; --muted:#9dbbaf; --line:rgba(255,255,255,.08);
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Outfit",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.65;font-size:17px}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* header */
header{background:var(--bar);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.logo{font-weight:800;font-size:1.5rem;letter-spacing:.02em;text-decoration:none;display:flex;align-items:center;gap:8px}
.logo i{width:22px;height:22px;border:3px solid var(--lime);border-radius:6px;transform:rotate(-12deg);display:inline-block;flex:none}
.logo img{max-height:40px;width:auto}
.menu{display:flex;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:6px}
.menu a{padding:8px 16px;border-radius:8px;text-decoration:none;font-weight:600;font-size:.92rem;color:var(--muted)}
.menu a:hover{background:var(--card);color:var(--text)}
.btns{display:flex;gap:10px}
.btn{display:inline-block;padding:10px 22px;border-radius:999px;font-weight:700;font-size:.9rem;text-decoration:none;border:0;cursor:pointer;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#3a2a00}
.btn-orange{background:var(--orange);color:#3a1d00}
.btn-lg{padding:15px 34px;font-size:1.05rem}

/* burger + drawer: the source dropped its nav on mobile, which left no way
   through the site on a phone. */
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:24px;height:3px;border-radius:2px;background:var(--text)}
.drawer{position:fixed;inset:0 auto 0 0;width:min(84vw,320px);background:var(--bar);border-right:1px solid var(--line);padding:20px;z-index:30;transform:translateX(-100%);transition:transform .25s;overflow-y:auto}
body[data-menu-open="true"] .drawer{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.drawer-close{background:none;border:0;color:var(--text);font-size:1.8rem;line-height:1;cursor:pointer}
.drawer nav{display:grid;gap:4px;margin-top:18px}
.drawer nav a{padding:11px 14px;border-radius:10px;text-decoration:none;font-weight:600;color:var(--muted);background:var(--bg)}
.drawer nav a:hover{background:var(--card);color:var(--text)}
.drawer .btns{flex-direction:column}
.drawer .btn{text-align:center}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:20;opacity:0;pointer-events:none;transition:opacity .25s}
body[data-menu-open="true"] .backdrop{opacity:1;pointer-events:auto}

/* hero */
.hero{margin-top:28px;border-radius:20px;overflow:hidden;position:relative;
  background:radial-gradient(circle at 78% 40%,rgba(184,216,44,.35),transparent 45%),linear-gradient(120deg,#0a1d1a 30%,#16523f 100%);
  padding:72px 48px;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;min-height:360px}
.hero h1{font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.08;font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
.hero p{margin:18px 0 28px;color:#d5e6dc;max-width:46ch}
.hero-lead p:last-child{margin-bottom:0}
.hero .sev{font-size:clamp(9rem,20vw,15rem);font-weight:800;line-height:.8;color:var(--lime);text-align:center;transform:rotate(-6deg);text-shadow:0 12px 0 #6f8a10,0 30px 60px rgba(0,0,0,.4)}
.hero-art img{border-radius:var(--r);width:100%;height:auto}
.chip{display:inline-block;width:92px;height:92px;border-radius:50%;border:10px solid var(--lime);box-shadow:inset 0 0 0 6px var(--card2);position:absolute;right:6%;top:8%;opacity:.9}

/* quick tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:22px;background:var(--bar);padding:12px;border-radius:var(--r)}
.tiles a{background:var(--card);border-radius:10px;padding:12px;text-align:center;text-decoration:none;font-size:.85rem;font-weight:600;color:var(--muted)}
.tiles a:hover{background:var(--card2);color:var(--text)}

/* sections */
section{padding:64px 0 8px}
h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;margin-bottom:16px;line-height:1.2}
h2::after{content:"";display:block;width:56px;height:5px;border-radius:3px;background:var(--lime);margin-top:12px}
p{margin-bottom:14px;color:#d5e6dc;max-width:72ch}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card h3{font-size:1.1rem;margin-bottom:6px;color:var(--gold)}
.card p{font-size:.95rem;margin:0;color:var(--muted)}
.pay{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:22px}
.pay div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center;font-weight:700;color:var(--text)}
.pay span{display:block;font-weight:400;font-size:.8rem;color:var(--muted);margin-top:2px}
.pay img{height:34px;width:auto;margin:0 auto 8px;object-fit:contain}

/* games — the catalogue the panel fills, in the card idiom of the source.
   The whole tile is one link to the offer (same as templates 10 and 12), so
   hovering lifts the card instead of covering the artwork with buttons. */
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:22px}
.game{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--text);transition:transform .15s,border-color .15s}
.game:hover{transform:translateY(-3px);border-color:var(--lime)}
.game img{width:100%;aspect-ratio:1/1;object-fit:cover}
.game>span{display:block;padding:10px 12px;font-size:.88rem;font-weight:600}
.more{text-align:center;margin-top:20px}

/* provider rail */
.rail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rail-head .arrows{display:flex;gap:8px}
.arrow{width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--text);font-size:1.2rem;cursor:pointer}
.arrow:hover{background:var(--card2)}
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:22px;padding-bottom:6px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail a{flex:0 0 auto;width:160px;scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center;text-decoration:none;font-weight:600;font-size:.9rem}
.rail a:hover{background:var(--card2)}
.rail img{height:40px;width:auto;margin:0 auto 10px;object-fit:contain}

/* promo */
.promo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
/* With no promotion rows the offer tile is alone, so it takes the full width
   instead of leaving half the row empty. */
.promo.solo{grid-template-columns:1fr}
.big{background:linear-gradient(135deg,var(--card2),var(--card));border:1px solid var(--lime);border-radius:var(--r);padding:28px}
.big b{display:block;font-size:clamp(1.5rem,2.6vw,2.4rem);color:var(--lime);line-height:1.15;overflow-wrap:anywhere}
.big img{border-radius:10px;margin-bottom:14px}
ul.list{list-style:none;margin-top:8px}
ul.list li{padding:8px 0 8px 26px;position:relative;color:#d5e6dc;border-bottom:1px solid var(--line)}
ul.list li::before{content:"";position:absolute;left:0;top:16px;width:12px;height:12px;border-radius:3px;background:var(--lime)}
ul.list li a{color:var(--gold);font-weight:700;text-decoration:none;margin-left:6px}

.cta{text-align:center;background:var(--card);border-radius:20px;padding:44px 20px;margin-top:64px}
.cta p{margin:0 auto 22px}

footer{margin-top:64px;background:var(--bar);border-top:1px solid var(--line);padding:32px 0;font-size:.85rem;color:var(--muted)}
footer p{font-size:.85rem;color:var(--muted);max-width:none}
footer nav{display:flex;flex-wrap:wrap;gap:8px 18px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
footer nav a{color:var(--muted);text-decoration:none;font-weight:600}
footer nav a:hover{color:var(--text)}
/* Licence and partner logos (Footer Images in the panel). Greyed back so they
   sit quietly under the links, and lit on hover. */
.footer-logos{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-bottom:18px}
.footer-logos img{max-height:42px;width:auto;object-fit:contain;opacity:.65;filter:grayscale(1);transition:opacity .15s,filter .15s}
.footer-logos img:hover{opacity:1;filter:none}
/* The badge leads the warning line, so the text wraps beside it rather than
   under it. */
.footer-warning{display:flex;align-items:flex-start;gap:12px}
/* Seal beside the copyright line, the way templates 1-3 close their footer. */
.footer-bottom{display:flex;align-items:center;gap:16px;margin-top:14px}
.footer-policy{flex:none;display:inline-block}
.footer-policy img{height:52px;width:auto;display:block}
.footer-copy{font-size:.85rem;color:var(--muted)}
.footer-copy p{display:inline;margin:0}
.age{flex:none;display:inline-block;border:2px solid var(--orange);color:var(--orange);border-radius:50%;width:38px;height:38px;line-height:34px;text-align:center;font-weight:800}

/* the editor's own text: tables and headings from seo_text */
.text h2{margin-top:34px}
.text h3{font-size:1.2rem;margin:26px 0 8px;color:var(--gold)}
.text ul,.text ol{margin:0 0 16px 22px;color:#d5e6dc}
.text li{margin-bottom:6px}
.text table{margin-top:18px}
.text img{border-radius:12px;margin:18px 0}
.tblwrap,.text table{overflow-x:auto}
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:12px;overflow:hidden;display:table}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:.95rem;vertical-align:top}
th{color:var(--gold);font-weight:600}
td{color:#d5e6dc}
.steps{list-style:none;counter-reset:s;margin-top:18px;display:grid;gap:10px}
.steps li{counter-increment:s;background:var(--card);border-radius:12px;padding:14px 16px 14px 60px;position:relative;color:#d5e6dc}
.steps li::before{content:counter(s);position:absolute;left:14px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:var(--lime);color:#0f2622;font-weight:800;text-align:center;line-height:32px}
h3.sub{font-size:1.2rem;margin:26px 0 8px;color:var(--gold)}
.note{border-left:4px solid var(--lime);padding:4px 0 4px 18px;margin:22px 0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:22px}
.stats div{background:var(--card);border-radius:12px;padding:18px;text-align:center}
.stats b{display:block;font-size:1.9rem;color:var(--lime);line-height:1.1}
.stats span{font-size:.85rem;color:var(--muted)}
.lead{font-size:1.15rem;color:var(--text)}

/* faq */
details{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-top:10px}
summary{cursor:pointer;padding:16px 20px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--lime);font-size:1.4rem;line-height:1}
details[open] summary::after{content:"–"}
details p{padding:0 20px 16px;margin:0;color:var(--muted);max-width:none}

@media(max-width:820px){
  .menu{display:none}
  .burger{display:flex}
  .nav .btns{display:none}
  .hero{grid-template-columns:1fr;padding:44px 24px}
  .hero .sev{display:none}
  /* the ring sits over empty hero space on desktop; once the hero stacks it
     lands on top of the heading, so it goes */
  .chip{display:none}
  .promo{grid-template-columns:1fr}
  /* a stacked table reads as label + value instead of running off the screen */
  .text table,.text tbody,.text tr,.text td,.text th{display:block;width:100%}
  .text thead{display:none}
  .text tr{border-bottom:1px solid var(--line);padding:6px 0}
  .text td{border:0;padding:6px 16px}
  .text td[data-label]::before{content:attr(data-label);display:block;color:var(--gold);font-size:.8rem;font-weight:600}
}
@media(max-width:480px){.btns .btn{padding:9px 14px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}