
:root{
  --bg:#F6F6F8; --band:#F0EDFF; --surface:#FFFFFF;
  --ink:#4C4C68; --muted:rgba(76,76,104,.7); --line:#DBD5FE;
  --lav:#DBD5FE; --lav-soft:#F0EDFF;
  --cta:#FD8B0F; --cta-hover:#F65D06; --cta-active:#F65D06;
  --cta-ink:#FFFFFF; --cta-glow:rgba(253,139,15,.45);
  --hero-ink:#4C4C68;
  --font:'Raleway','Helvetica Neue,sans-serif';
  --wrap:1120px; --bar-h:76px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + 12px)}
body{
  font-family:var(--font);font-weight:500;font-size:17px;line-height:1.7;
  color:var(--ink);background:var(--bg);
  /* never dead-flat: faint lavender dot-grid texture */
  background-image:radial-gradient(rgba(124,111,199,.06) 1px, transparent 1px);
  background-size:26px 26px;
  padding-bottom:calc(var(--bar-h) + 12px);
}
img{max-width:100%;height:auto}
a{color:#7c5cd6;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- header: white surface + lavender hairline, logo only (no site-title text) */
.topbar{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  box-shadow:0 6px 20px rgba(76,76,104,.08)}
.topbar-in{display:flex;align-items:center;gap:24px;height:var(--bar-h)}
.brand img{height:44px;width:auto;max-width:112px;display:block}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.nav a{display:inline-block;padding:8px 9px;border-radius:1000px;font-size:13px;font-weight:600;
  color:var(--muted);text-decoration:none;transition:.2s;white-space:nowrap}
.nav a:hover,.nav a:focus{color:var(--ink);background:var(--lav-soft);text-decoration:none}
.nav-more{position:relative}
.nav-more summary{list-style:none;cursor:pointer;display:inline-block;padding:8px 12px;
  border-radius:1000px;font-size:13.5px;font-weight:700;color:var(--muted)}
.nav-more summary::-webkit-details-marker{display:none}
.nav-more[open] summary,.nav-more summary:hover{color:var(--ink);background:var(--lav-soft)}
.more-drop{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;z-index:950;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px;
  box-shadow:0 14px 34px rgba(76,76,104,.18);display:flex;flex-direction:column}
.more-drop a{font-size:13px}
.nav-extra{display:none}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:1000px;color:var(--ink);font:700 14px var(--font);padding:8px 16px;cursor:pointer}
@media(max-width:1380px){
  .nav{display:none}
  .nav-toggle{display:inline-block}
  .topbar.open .nav{display:flex;position:absolute;top:var(--bar-h);left:0;right:0;
    background:var(--surface);padding:12px 20px;flex-direction:column;align-items:flex-start;gap:2px;
    border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(76,76,104,.15)}
  .topbar.open .nav a{width:100%}
}
.topbar .btn{margin-left:0}

/* ---------- buttons: orange CTA, pulse + glow; chips/pills stay lavender */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:2px solid transparent;border-radius:1000px;padding:12px 26px;
  font:700 16px/20px var(--font);text-decoration:none;cursor:pointer;
  background:var(--cta);color:var(--cta-ink);transition:transform .18s,background .18s,box-shadow .18s;
  animation:cta-pulse 2.4s ease-in-out infinite}
.btn:hover{background:var(--cta-hover);transform:translateY(-2px);
  box-shadow:0 10px 26px var(--cta-glow)}
.btn:active{background:var(--cta-active);transform:translateY(0)}
@keyframes cta-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(253,139,15,.45), 0 6px 18px rgba(253,139,15,.3)}
  50%{box-shadow:0 0 0 10px rgba(253,139,15,0), 0 6px 30px rgba(246,93,6,.55)}
}
/* reduced-motion counterpart of the pulse, right beside it */
@media(prefers-reduced-motion:reduce){
  .btn{animation:none}
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* ---------- hero: full-bleed art, H1 + bonus chip + CTA centered on ALL devices */
.hero{position:relative;overflow:hidden;background:var(--band)}
.hero-art{position:absolute;inset:0;background:url('../hero.png') center/cover no-repeat}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(246,246,248,.55),rgba(240,237,255,.7))}
.hero-ink .hero-scrim{background:linear-gradient(180deg,rgba(40,34,72,.5),rgba(40,34,72,.7))}
.hero-in{position:relative;z-index:2;text-align:center;padding:84px 20px 96px;
  max-width:860px;margin:0 auto}
.hero h1{font-weight:800;font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.1;
  color:var(--hero-ink)}
.hero .bonus{display:inline-block;margin:18px 0 26px;padding:12px 28px;
  font-weight:700;font-size:clamp(1.15rem,3vw,1.9rem);line-height:1.35;
  color:var(--ink);background:var(--lav-soft);border:1px solid var(--line);
  border-radius:1000px}
.hero-ink .bonus{color:#fff;background:rgba(76,76,104,.4);border-color:rgba(255,255,255,.45)}

/* ---------- sections: alternating lavender bands, textured (never dead flat) */
.band{padding:64px 0;border-bottom:1px solid var(--line)}
.band.alt{background-color:var(--band)}
.band.alt{background-image:url('../pattern.svg');background-size:auto}
/* two-col splits that would strand content: centered ~860px stack instead */
.section{max-width:860px;margin:0 auto}
.section h2{font-weight:800;font-size:clamp(1.5rem,3.2vw,2.35rem);line-height:1.25;margin-bottom:26px;
  padding-bottom:12px;border-bottom:3px solid var(--lav);display:inline-block}
.section h3{font-weight:700;font-size:clamp(1.15rem,2.2vw,1.5rem);margin:30px 0 12px;color:#6d4fc4}
.section p{margin:0 0 16px;color:var(--ink)}
.section ul,.section ol{margin:0 0 18px 24px}
.section li{margin:7px 0}
.section li::marker{color:var(--lav)}

/* tables: lavender brand hairlines - never generic gray */
.tbl{width:100%;border-collapse:separate;border-spacing:0;margin:10px 0 24px;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.tbl th{background:var(--lav-soft);color:var(--ink);font-weight:700;text-align:left;
  padding:13px 16px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:nth-child(even) td{background:rgba(237,233,254,.55)}
@media(max-width:640px){.tbl{display:block;overflow-x:auto}}

/* FAQ accordion (optional block type) */
.faq-list{margin:0 0 18px;display:flex;flex-direction:column;gap:12px}
.faq-list details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.faq-list summary{cursor:pointer;font-weight:700;color:var(--ink)}
.faq-list p{margin:10px 0 0;color:var(--muted)}

/* games strip: webp tiles, small radius, hover lift; cards never touch (>=24px gaps) */
.games-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:24px;margin:20px 0 8px}
.game-tile{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;transition:transform .2s,box-shadow .2s}
.game-tile:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(76,76,104,.18)}
.game-tile img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.game-tile figcaption{font-size:12px;padding:8px 10px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* one-line strip card: small illustration (<=150px) + text + CTA */
.trust-strip{max-width:860px;margin:8px auto 0;display:flex;gap:24px}
.strip-card{display:flex;align-items:center;gap:16px;flex:1;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 20px}
.strip-card img{height:48px;max-width:150px;max-height:150px;width:auto;flex:0 0 auto}
.strip-card p{flex:1;font-size:14px;line-height:1.5;color:var(--muted)}
@media(max-width:640px){.trust-strip{flex-direction:column}.strip-card p{flex:1 1 auto}}

.cta-inline{text-align:center;margin:30px 0 4px}

/* ---------- sticky CTA bar: fixed BOTTOM, all devices, bonus + translated CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:950;
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(76,76,104,.15)}
.sticky-cta-in{display:flex;align-items:center;gap:18px;padding:12px 20px;
  max-width:var(--wrap);margin:0 auto}
.sticky-cta .b{font-weight:700;font-size:clamp(.9rem,2.4vw,1.1rem);color:var(--ink);line-height:1.3}
.sticky-cta .btn{margin-left:auto;flex:0 0 auto;padding:11px 24px}
@media(max-width:640px){
  :root{--bar-h:64px}
  .sticky-cta .b{font-size:.86rem}
  .sticky-cta .btn{padding:10px 18px;font-size:14px}
}

/* ---------- footer-only language switcher (lavender pills, never in the nav) */
footer{padding:56px 0 40px;background:var(--surface);border-top:1px solid var(--line)}
.foot-top{display:flex;flex-wrap:wrap;gap:34px;align-items:flex-start;justify-content:space-between}
.foot-top img.brand-foot{height:30px;margin-bottom:14px}
.foot-trust{display:flex;gap:14px;align-items:center}
.foot-trust img{height:38px;width:auto;max-width:150px}
.switch h4{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.switch ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;max-width:520px}
.switch a{display:inline-block;padding:6px 14px;border:1px solid var(--line);border-radius:1000px;
  font-size:13.5px;font-weight:600;color:var(--muted)}
.switch a:hover{border-color:#c4b5fd;color:#6d4fc4}
.switch a.on{border-color:#c4b5fd;color:var(--ink);background:var(--lav-soft)}
.foot-blurb{margin:26px 0 0;font-size:14px;color:var(--muted);max-width:860px}
.legal{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.6;color:var(--muted)}
