*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#020604;color:#f7fbf8;font-family:Inter,Arial,sans-serif}a{text-decoration:none;color:inherit}.wrap{width:min(1140px,calc(100% - 36px));margin:auto}.top{height:58px;position:sticky;top:0;z-index:60;background:rgba(2,6,4,.95);border-bottom:1px solid rgba(25,242,133,.14);backdrop-filter:blur(14px)}.top-inner{height:100%;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:8px;white-space:nowrap}.brand img{width:27px;height:27px;object-fit:contain}.brand strong{font-size:17px}.brand span{color:#1af18a}.top nav{display:flex;gap:27px;margin:auto;font-size:11px;color:#e0e6e2}.top nav a:hover{color:#1af18a}.subscribe,.primary,.offer-button,.feature-copy>b{background:#19f18a;color:#021108;font-weight:900;border-radius:8px}.subscribe{padding:11px 17px;font-size:11px}.hero{position:relative;overflow:hidden;background:#020604;border-bottom:1px solid rgba(25,242,133,.12)}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 35%,rgba(24,240,133,.1),transparent 32%);pointer-events:none}.hero-inner{height:405px;display:grid;grid-template-columns:42% 58%;align-items:center;position:relative}.hero-copy{z-index:4;position:relative}.eyebrow,.section-head span,.feature-copy>span,.responsible>div>span{color:#1bf18a;font-size:9px;font-weight:900;letter-spacing:.08em}.hero h1{font-size:66px;line-height:.86;letter-spacing:-.065em;font-weight:950;font-style:italic;margin:15px 0 21px;text-shadow:0 7px 30px #000}.hero h1 span{color:#19f18a}.hero-copy>p{font-size:13px;line-height:1.55;color:#d6dfd9;max-width:410px}.socials,.footer-socials{display:flex;gap:9px}.socials{margin:15px 0}.socials a,.footer-socials a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#07100b;border:1px solid rgba(255,255,255,.14)}.socials img,.footer-socials img{width:21px;height:21px;object-fit:contain}.primary{display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:13px 19px;border:0;font-size:11px;cursor:pointer}.age-note{display:flex;align-items:center;gap:10px;margin-top:12px;color:#849289;font-size:9px}.age-note b{color:#1af18a;border:1px solid #15995b;border-radius:6px;padding:5px 7px;font-size:10px}.hero-art{position:absolute;right:-2%;top:0;width:64%;height:100%;overflow:hidden}.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center 48%;filter:saturate(.96) contrast(1.05) brightness(.9)}.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#020604 0%,rgba(2,6,4,.75) 13%,transparent 39%,transparent 88%,#020604 100%),linear-gradient(0deg,#020604 0%,transparent 17%)}.trust{position:relative;z-index:5;display:grid;grid-template-columns:repeat(3,1fr);margin-top:-24px;padding-bottom:15px}.trust>div{height:59px;display:flex;align-items:center;justify-content:center;gap:13px;border:1px solid rgba(25,242,133,.23);background:rgba(4,15,9,.94)}.trust>div:first-child{border-radius:11px 0 0 11px}.trust>div:last-child{border-radius:0 11px 11px 0}.trust img{width:31px;height:31px}.trust span{font-size:10px;line-height:1.25;color:#e3eae6}.trust span b{display:block}.partners{padding:27px 0 13px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:14px}.section-head h2{font-size:26px;margin:6px 0 0;letter-spacing:-.04em}.section-head p{max-width:390px;font-size:9px;line-height:1.5;color:#89968e}.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.offer{height:292px;padding:14px;border:1px solid;border-radius:12px;display:flex;flex-direction:column;position:relative;overflow:hidden;background:#07100b}.offer:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(5,7,6,.96) 0%,rgba(5,7,6,.84) 48%,rgba(5,7,6,.18) 100%),var(--art);background-size:cover;background-position:center;opacity:.95}.offer>*{position:relative;z-index:2}.offer-1{border-color:#8c2dc3;background:#1d0928}.offer-2{border-color:#0aa857;background:#061c10}.offer-3{border-color:#d34820;background:#281006}.offer-top{display:flex;justify-content:space-between;align-items:center}.rank,.rating{font-size:9px;font-weight:900;padding:5px 7px;border-radius:7px}.rank{background:#19f18a;color:#031109}.offer-1 .rank{background:#ad42ff}.offer-3 .rank{background:#ff6237}.rating{background:rgba(0,0,0,.35);color:#22ef89}.casino-row{display:flex;align-items:center;gap:10px;margin-top:12px}.casino-logo{width:44px;height:44px;background:rgba(0,0,0,.62);border-radius:7px;display:grid;place-items:center}.casino-logo img{max-width:34px;max-height:34px}.casino-row h3{font-size:16px;margin:0}.offer>p{font-size:8.5px;color:#d0d7d2;line-height:1.42;max-width:80%;margin:9px 0}.bonus{margin-top:auto;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(0,0,0,.36);display:grid;gap:3px}.bonus small{font-size:7px;color:#9aa59e}.bonus strong{font-size:12px;line-height:1.18}.offer-button{margin-top:8px;padding:10px;text-align:center;font-size:9px}.offer-1 .offer-button{background:linear-gradient(90deg,#ffe46c,#ba39ff)}.offer-3 .offer-button{background:linear-gradient(90deg,#ffdf63,#ff643d)}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:11px}.feature{height:135px;display:grid;grid-template-columns:47% 53%;border:1px solid rgba(25,242,133,.22);border-radius:11px;overflow:hidden;background:#07110b}.feature-image{position:relative;overflow:hidden}.feature-image img{width:100%;height:100%;object-fit:cover}.feature-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,#07110b 100%)}.feature-copy{padding:18px 17px 14px 5px}.feature-copy h3{font-size:18px;margin:4px 0 6px}.feature-copy p{font-size:8px;line-height:1.45;color:#9ba69f;margin:0 0 10px}.feature-copy>b{display:inline-block;padding:9px 13px;font-size:8px}.how{margin-top:11px;padding:13px 17px;border:1px solid rgba(25,242,133,.2);border-radius:11px;background:#05100a}.how h3{font-size:16px;margin:0 0 9px}.steps{display:grid;grid-template-columns:1fr 42px 1fr 42px 1fr;align-items:center}.steps>div{display:flex;align-items:center;gap:11px}.steps>div>b{width:38px;height:38px;flex:0 0 38px;border:1px solid #19ef88;border-radius:50%;display:grid;place-items:center;color:#19ef88;font-size:18px}.steps span{display:grid;gap:3px}.steps strong{font-size:9px}.steps small{font-size:7px;color:#8d9991;line-height:1.35}.steps>i{text-align:center;color:#16e985;font-size:25px;font-style:normal}.responsible{margin-top:0;padding:17px;border:1px solid rgba(25,242,133,.15);border-radius:11px;background:#05100a;display:grid;grid-template-columns:1fr 1.2fr;gap:25px}.responsible h2{font-size:17px;margin:5px 0}.responsible p{font-size:8px;color:#8f9b93;line-height:1.5}.responsible-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.responsible-grid b{font-size:8px;padding:10px;border-radius:7px;background:#08140d;color:#cfd8d2}.warning{margin:11px auto 22px;padding:13px 16px;border:1px solid rgba(255,200,77,.13);border-radius:10px;background:rgba(255,200,77,.02);font-size:8px;color:#8e9992}.warning>strong{color:#ffd365}.warning p{margin:5px 0}footer{border-top:1px solid rgba(25,242,133,.12);background:#010403;padding:13px 0}.footer-main{display:flex;align-items:center;gap:26px}.footer-main nav{display:flex;gap:20px;margin:auto;font-size:8px;color:#d3dcd6}.footer-socials a{width:27px;height:27px}.footer-socials img{width:17px;height:17px}.circle21{width:34px;height:34px;border:1px solid #dbe3de;border-radius:50%;display:grid;place-items:center;font-size:9px}.copyright{text-align:center;color:#6e7b73;font-size:7px;margin-top:8px}.age-overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.84);backdrop-filter:blur(12px);display:grid;place-items:center;padding:20px}.age-overlay.hidden{display:none}.age-modal{width:min(410px,100%);padding:25px;border:1px solid rgba(25,242,133,.25);border-radius:16px;background:#07110b;box-shadow:0 30px 100px #000}.age-modal>img{width:44px;height:44px;object-fit:contain}.age-modal>span{display:block;color:#19ef88;font-size:9px;font-weight:900;margin-top:12px}.age-modal h2{font-size:24px;margin:6px 0}.age-modal p,.age-modal small{font-size:9px;line-height:1.5;color:#9aa69e}.age-modal>div{display:flex;gap:8px;margin:16px 0}.secondary{padding:12px 18px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#0a140e;color:#fff;font-weight:800;cursor:pointer}
@media(max-width:900px){.top{height:auto}.top-inner{padding:9px 0;flex-wrap:wrap}.top nav{order:3;width:100%;overflow:auto;white-space:nowrap;padding:4px 0}.subscribe{margin-left:auto}.hero-inner{height:560px;grid-template-columns:1fr}.hero-copy{padding-bottom:220px}.hero-art{width:100%;height:60%;top:auto;bottom:0;opacity:.7}.hero-art:after{background:linear-gradient(0deg,#020604 0%,transparent 37%),linear-gradient(90deg,#020604 0%,transparent 38%,#020604 100%)}.trust{grid-template-columns:1fr;margin-top:-15px}.trust>div{border-radius:0!important;justify-content:flex-start;padding-left:22px}.trust>div:first-child{border-radius:11px 11px 0 0!important}.trust>div:last-child{border-radius:0 0 11px 11px!important}.offer-grid,.feature-grid,.responsible{grid-template-columns:1fr}.offer{height:305px}.section-head{align-items:flex-start;flex-direction:column}.steps{grid-template-columns:1fr}.steps>i{transform:rotate(90deg);font-size:18px}.steps>div{padding:7px 0}.footer-main{flex-wrap:wrap}.footer-main nav{order:3;width:100%;overflow:auto}}
@media(max-width:560px){.wrap{width:calc(100% - 22px)}.hero h1{font-size:48px}.hero-copy>p{font-size:12px}.hero-art{width:125%;right:-25%}.feature{grid-template-columns:42% 58%}.feature-copy{padding-right:10px}.responsible-grid{grid-template-columns:1fr}.age-modal>div{flex-direction:column}.primary{width:100%}}
/* ===== PRODUCTION ASSET PASS v5 ===== */
.hero-art{
  right:-3%;
  width:68%;
  border-left:0;
}
.hero-art img{
  object-position:64% 48%;
  filter:saturate(.92) contrast(1.04) brightness(.82);
}
.hero-art:after{
  background:
    linear-gradient(90deg,#020604 0%,rgba(2,6,4,.94) 9%,rgba(2,6,4,.55) 25%,transparent 48%,transparent 91%,#020604 100%),
    linear-gradient(0deg,#020604 0%,rgba(2,6,4,.18) 17%,transparent 34%);
}
.offer:before{
  opacity:1;
  background-image:
    linear-gradient(90deg,rgba(4,6,5,.94) 0%,rgba(4,6,5,.78) 44%,rgba(4,6,5,.20) 77%,rgba(4,6,5,.08) 100%),
    var(--art);
  background-size:cover;
  background-position:center;
}
.offer-1:after,.offer-2:after,.offer-3:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}
.offer-1:after{background:linear-gradient(180deg,rgba(155,42,220,.10),transparent 50%)}
.offer-2:after{background:linear-gradient(180deg,rgba(15,220,112,.08),transparent 50%)}
.offer-3:after{background:linear-gradient(180deg,rgba(255,91,35,.10),transparent 50%)}
.feature-image img{
  transform:scale(1.03);
  filter:saturate(.92) contrast(1.04) brightness(.86);
}
.cashback-feature .feature-image img{object-position:44% 55%}
.wheel-feature .feature-image img{object-position:48% 50%}
.feature-image:after{
  background:
    linear-gradient(90deg,rgba(5,17,10,.03) 0%,rgba(5,17,10,.04) 52%,#07110b 100%),
    linear-gradient(0deg,rgba(5,17,10,.24),transparent 48%);
}
@media(max-width:900px){
  .hero-art{width:108%;right:-28%}
  .hero-art img{object-position:61% 50%}
}


/* =========================================================
   FINAL VISUAL QA PASS v6
   ========================================================= */

:root{
  --green:#19f18a;
  --panel:#06110b;
  --line:rgba(25,241,138,.22);
}

/* Header: slightly stronger hierarchy, still compact */
.top{height:64px}
.top-inner{gap:32px}
.brand img{width:30px;height:30px}
.brand strong{font-size:18px;letter-spacing:-.02em}
.top nav{font-size:12px;gap:30px}
.subscribe{padding:12px 20px;font-size:12px;border-radius:9px}

/* Hero: closer to approved reference proportions */
.hero-inner{height:440px;grid-template-columns:43% 57%}
.hero-copy{padding-left:2px}
.eyebrow{font-size:10px}
.hero h1{
  font-size:72px;
  margin:17px 0 24px;
  letter-spacing:-.07em;
}
.hero-copy>p{
  max-width:430px;
  font-size:14px;
  line-height:1.58;
  color:#e1e7e3;
}
.socials{margin:18px 0}
.socials a{width:37px;height:37px}
.socials img{width:23px;height:23px}
.primary{padding:14px 20px;font-size:12px;min-width:205px}
.age-note{font-size:9.5px;margin-top:13px}

.hero-art{
  width:66%;
  right:-1%;
}
.hero-art img{
  object-position:61% 48%;
  filter:saturate(.94) contrast(1.05) brightness(.86);
}
.hero-art:after{
  background:
    linear-gradient(90deg,#020604 0%,rgba(2,6,4,.97) 7%,rgba(2,6,4,.70) 22%,rgba(2,6,4,.18) 43%,transparent 57%,transparent 91%,#020604 100%),
    linear-gradient(0deg,#020604 0%,rgba(2,6,4,.22) 13%,transparent 31%);
}

/* Trust strip: icons/text no longer feel tiny */
.trust{margin-top:-25px;padding-bottom:20px}
.trust>div{height:66px;gap:14px}
.trust img{width:34px;height:34px}
.trust span{font-size:11px}

/* More breathing room between major sections */
.partners{padding:36px 0 17px}
.section-head{margin-bottom:18px}
.section-head span{font-size:10px}
.section-head h2{font-size:30px;margin-top:7px}
.section-head p{font-size:10px;max-width:405px}

/* Partner cards: art remains the star, UI becomes cleaner/readable */
.offer-grid{gap:14px}
.offer{
  height:330px;
  padding:17px;
  border-radius:14px;
}
.offer:before{
  background-image:
    linear-gradient(90deg,rgba(3,5,4,.92) 0%,rgba(3,5,4,.72) 39%,rgba(3,5,4,.18) 73%,rgba(3,5,4,.04) 100%),
    linear-gradient(0deg,rgba(3,5,4,.80) 0%,rgba(3,5,4,.08) 47%,rgba(3,5,4,.10) 100%),
    var(--art);
}
.rank,.rating{font-size:10px}
.casino-row{margin-top:14px;gap:11px}
.casino-logo{width:48px;height:48px}
.casino-logo img{max-width:38px;max-height:38px}
.casino-row h3{font-size:18px}
.offer>p{
  font-size:9.5px;
  line-height:1.45;
  max-width:72%;
  margin:10px 0;
  color:#d8dfda;
  text-shadow:0 2px 10px #000;
}
.bonus{
  padding:11px 12px;
  background:rgba(2,5,3,.70);
  backdrop-filter:blur(5px);
  border-color:rgba(255,255,255,.12);
}
.bonus small{font-size:7.5px}
.bonus strong{font-size:13px;line-height:1.22}
.offer-button{
  margin-top:9px;
  padding:11px;
  font-size:9.5px;
  border-radius:8px;
}

/* Cashback/Wheel: make them feel like actual feature cards, not thin banners */
.feature-grid{gap:14px;margin-top:14px}
.feature{
  height:160px;
  grid-template-columns:45% 55%;
  border-radius:14px;
}
.feature-image:after{
  background:
    linear-gradient(90deg,rgba(5,17,10,.02) 0%,rgba(5,17,10,.02) 48%,rgba(7,17,11,.86) 82%,#07110b 100%),
    linear-gradient(0deg,rgba(5,17,10,.28),transparent 50%);
}
.feature-copy{padding:22px 20px 18px 4px}
.feature-copy>span{font-size:9px}
.feature-copy h3{font-size:21px;margin:5px 0 7px}
.feature-copy p{font-size:9px;line-height:1.5;margin-bottom:12px}
.feature-copy>b{padding:10px 14px;font-size:9px}

/* Process block: more legible and premium */
.how{
  margin-top:14px;
  padding:17px 20px;
  border-radius:13px;
}
.how h3{font-size:18px;margin-bottom:13px}
.steps>div{gap:13px}
.steps>div>b{
  width:43px;height:43px;flex-basis:43px;
  font-size:20px;
}
.steps strong{font-size:10px}
.steps small{font-size:8px;line-height:1.42}
.steps>i{font-size:28px}

/* Responsible gaming: no cramped micro-text */
.responsible{
  margin-top:14px;
  padding:20px;
  border-radius:13px;
  gap:30px;
}
.responsible h2{font-size:20px;margin:6px 0 8px}
.responsible p{font-size:9px;line-height:1.55}
.responsible-grid{gap:9px}
.responsible-grid b{font-size:9px;padding:12px}

/* Footer/warning consistency */
.warning{
  margin-top:14px;
  margin-bottom:26px;
  padding:15px 18px;
  font-size:9px;
}
footer{padding:17px 0}
.footer-main nav{font-size:9px}
.copyright{font-size:8px}

/* Desktop-wide: don't let content become visually tiny on big monitors */
@media(min-width:1450px){
  .wrap{width:min(1220px,calc(100% - 48px))}
}

/* Tablet/mobile cleanup */
@media(max-width:900px){
  .top{height:auto}
  .hero-inner{height:600px}
  .hero-copy{padding-bottom:235px}
  .hero h1{font-size:62px}
  .hero-art{width:112%;right:-30%;height:61%}
  .offer{height:330px}
  .feature{height:165px}
}
@media(max-width:560px){
  .top nav{gap:20px}
  .hero-inner{height:590px}
  .hero h1{font-size:49px}
  .hero-copy>p{font-size:12px}
  .hero-art{width:142%;right:-42%;opacity:.78}
  .trust span{font-size:10px}
  .section-head h2{font-size:25px}
  .offer{height:320px}
  .offer>p{max-width:82%}
  .feature{height:155px;grid-template-columns:42% 58%}
  .feature-copy h3{font-size:17px}
  .feature-copy p{font-size:8px}
}


/* =========================================================
   USER QA FIXES v7
   ========================================================= */

/* 1. Hero artwork must never protrude beyond the hero region. */
.hero,
.hero-inner{
  overflow:hidden;
}
.hero-art{
  right:0 !important;
  width:64% !important;
  max-width:760px;
  clip-path:inset(0 0 0 0);
}
.hero-art img{
  display:block;
  width:100%;
  height:100%;
}
.hero-art:after{
  right:0;
}

/* 2. New premium header treatment — not the old flat header look. */
.top{
  height:70px;
  background:
    linear-gradient(180deg,rgba(7,19,12,.98),rgba(2,7,4,.96));
  border-bottom:1px solid rgba(25,241,138,.22);
  box-shadow:0 12px 40px rgba(0,0,0,.22);
}
.top-inner{
  position:relative;
}
.top-inner:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(25,241,138,.42),transparent);
  pointer-events:none;
}
.brand{
  padding:7px 0;
}
.brand img{
  width:32px;height:32px;
  filter:drop-shadow(0 0 10px rgba(25,241,138,.18));
}
.brand strong{
  font-size:19px;
}
.top nav{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(7,18,11,.42);
  border:1px solid rgba(255,255,255,.035);
}
.top nav a{
  padding:6px 7px;
  border-radius:7px;
  transition:.18s ease;
}
.top nav a:hover{
  background:rgba(25,241,138,.08);
}
.subscribe{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:132px;
  background:linear-gradient(135deg,#22f497,#11d979);
  box-shadow:0 8px 28px rgba(25,241,138,.16);
}
.tg-plane{
  display:grid;
  place-items:center;
  width:18px;height:18px;
  border-radius:50%;
  background:#03120a;
  color:#20ef8c;
  font-size:9px;
}

/* 3. "How it works" is removed from HTML. Hide defensively if cached markup remains. */
.how{display:none!important}

/* 4. Responsible gaming readability. */
.responsible{
  margin-top:16px;
  padding:24px 25px;
  grid-template-columns:1fr 1.15fr;
  gap:38px;
}
.responsible>div>span{
  font-size:10px;
}
.responsible h2{
  font-size:22px;
  line-height:1.18;
  margin:7px 0 10px;
}
.responsible p{
  max-width:520px;
  font-size:11px;
  line-height:1.62;
  color:#aab6ae;
}
.responsible-grid{
  gap:10px;
}
.responsible-grid b{
  min-height:48px;
  display:flex;
  align-items:center;
  padding:13px 15px;
  font-size:10.5px;
  line-height:1.35;
  background:#08150d;
  border:1px solid rgba(255,255,255,.025);
}

/* Warning readability. */
.warning{
  margin-top:16px;
  margin-bottom:30px;
  padding:19px 22px;
  font-size:10.5px;
  line-height:1.55;
}
.warning>strong{
  font-size:10.5px;
}
.warning p{
  margin:7px 0;
}

/* Footer readability and hierarchy. */
footer{
  padding:20px 0 16px;
}
.footer-main{
  min-height:44px;
}
.footer-main nav{
  font-size:10px;
  gap:24px;
}
.footer-socials a{
  width:31px;
  height:31px;
}
.footer-socials img{
  width:19px;
  height:19px;
}
.circle21{
  width:39px;
  height:39px;
  font-size:10px;
}
.copyright{
  font-size:9px;
  margin-top:12px;
  color:#839087;
}

/* Keep the feature area from sticking too close to responsible block now
   that the process block is intentionally gone. */
.feature-grid{
  margin-bottom:16px;
}

/* Responsive cleanup after the header/hero fixes. */
@media(max-width:900px){
  .top{height:auto}
  .top nav{
    border:0;
    background:transparent;
    padding:4px 0;
  }
  .hero-art{
    width:108%!important;
    max-width:none;
    right:-24%!important;
  }
  .responsible{
    grid-template-columns:1fr;
    gap:18px;
  }
}
@media(max-width:560px){
  .subscribe{
    min-width:auto;
    padding:10px 13px;
  }
  .hero-art{
    width:135%!important;
    right:-36%!important;
  }
  .responsible{
    padding:19px 17px;
  }
  .responsible h2{font-size:19px}
  .responsible p{font-size:10.5px}
  .footer-main nav{font-size:9.5px}
}


/* =========================================================
   USER QA FIXES v8
   ========================================================= */

/* Hero: hard containment on desktop so artwork cannot protrude right. */
.hero{
  position:relative;
  overflow:hidden!important;
}
.hero-inner{
  overflow:hidden!important;
}
@media(min-width:901px){
  .hero-art{
    right:0!important;
    width:62%!important;
    max-width:740px!important;
  }
}

/* Hero CTA: no stray icon/arrow after the label. */
.hero .primary{
  gap:0!important;
}
.hero .primary::after{
  display:none!important;
  content:none!important;
}

/* Partner descriptions: readable without sacrificing the artwork. */
.offer>p{
  display:inline-block;
  width:auto;
  max-width:78%;
  margin:9px 0 10px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:rgba(2,6,4,.67);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  color:#f0f4f1!important;
  font-size:10.5px!important;
  line-height:1.5!important;
  text-shadow:0 1px 8px rgba(0,0,0,.95);
  box-shadow:0 7px 20px rgba(0,0,0,.12);
}

/* All CTAs: no plain arrow glyph/pseudo-element. */
.offer-button::after,
.feature-copy b::after,
.primary::after{
  content:none!important;
  display:none!important;
}

/* Cashback/Wheel row: use full width deliberately and remove the "missing block" feeling. */
.feature-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  width:100%;
  margin-top:14px;
  margin-bottom:10px!important;
}
.feature{
  width:100%;
  min-width:0;
}

/* Pull responsible gaming upward now that "How it works" is gone. */
.responsible{
  margin-top:10px!important;
}
.warning{
  margin-top:10px!important;
}

/* Slightly stronger cashback eyebrow now that copy is longer. */
.cashback-feature .feature-copy>span{
  font-size:9.5px!important;
  letter-spacing:.055em;
}

/* Footer follows content more naturally. */
.warning{
  margin-bottom:22px!important;
}

/* Mobile keeps feature cards stacked, with intentional spacing. */
@media(max-width:760px){
  .feature-grid{
    grid-template-columns:1fr;
    gap:11px;
  }
  .offer>p{
    max-width:90%;
    font-size:10px!important;
  }
}


/* =========================================================
   FINAL POLISH v9
   ========================================================= */

/* Header CTA: clear community action, no duplicate Telegram label. */
.subscribe{
  min-width:150px;
  letter-spacing:.035em;
  font-weight:900;
}

/* Hero: keep the green ambience but dissolve the JPG boundary.
   The artwork fades to transparency at the right edge, exposing the
   section's own green-black background rather than a hard rectangle. */
.hero{
  background:
    radial-gradient(ellipse at 79% 45%,rgba(12,104,57,.22) 0%,rgba(5,50,28,.13) 23%,transparent 50%),
    linear-gradient(90deg,#020604 0%,#020704 57%,#031109 100%);
}
@media(min-width:901px){
  .hero-art{
    right:0!important;
    width:65%!important;
    max-width:790px!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 82%,rgba(0,0,0,.86) 89%,rgba(0,0,0,.40) 96%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 82%,rgba(0,0,0,.86) 89%,rgba(0,0,0,.40) 96%,transparent 100%);
  }
  .hero-art:after{
    background:
      linear-gradient(90deg,#020604 0%,rgba(2,6,4,.93) 8%,rgba(2,6,4,.54) 21%,rgba(2,6,4,.08) 39%,transparent 56%),
      linear-gradient(0deg,#020604 0%,rgba(2,6,4,.18) 14%,transparent 31%);
  }
}

/* Casino description: NOT another "bonus card".
   No border, no rectangle, no blur-card — readability comes from a soft
   local gradient behind normal text. */
.offer>p{
  position:relative;
  display:block!important;
  width:76%!important;
  max-width:76%!important;
  margin:10px 0 12px!important;
  padding:7px 8px 7px 9px!important;
  border:0!important;
  border-radius:0!important;
  background:linear-gradient(90deg,rgba(1,5,3,.72) 0%,rgba(1,5,3,.48) 63%,transparent 100%)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  color:#f1f5f2!important;
  font-size:10.5px!important;
  line-height:1.48!important;
  text-shadow:0 2px 8px rgba(0,0,0,.95)!important;
}

/* Partner CTA: compact, premium, clearly action-oriented. */
.offer-button{
  width:62%!important;
  min-width:178px;
  align-self:flex-start;
  margin-top:10px!important;
  padding:12px 17px!important;
  border-radius:10px!important;
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.025em;
  box-shadow:0 9px 26px rgba(0,0,0,.20);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.offer-button:hover{
  transform:translateY(-2px);
  filter:brightness(1.07);
  box-shadow:0 12px 30px rgba(0,0,0,.27);
}

/* Give Cashback/Wheel their own visual section rhythm. */
.feature-grid{
  margin-top:36px!important;
  margin-bottom:14px!important;
  gap:16px!important;
}
.feature{
  height:190px!important;
  grid-template-columns:46% 54%!important;
}
.feature-image img{
  transform:scale(1.06)!important;
}
.feature-copy{
  padding:26px 23px 22px 6px!important;
}
.feature-copy>span{
  font-size:10px!important;
}
.feature-copy h3{
  font-size:23px!important;
  margin:6px 0 8px!important;
}
.feature-copy p{
  font-size:10px!important;
  line-height:1.52!important;
  margin-bottom:14px!important;
}
.feature-copy>b{
  padding:11px 16px!important;
  font-size:9.5px!important;
  border-radius:9px!important;
}

/* Keep the following section close enough that there is no "missing block" gap. */
.responsible{
  margin-top:12px!important;
}

/* Mobile/tablet. */
@media(max-width:900px){
  .hero-art{
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 88%,transparent 100%);
  }
  .offer-button{width:auto!important;min-width:190px}
}
@media(max-width:760px){
  .feature-grid{margin-top:25px!important}
  .feature{height:180px!important}
}
@media(max-width:560px){
  .offer>p{width:88%!important;max-width:88%!important}
  .offer-button{width:70%!important;min-width:0}
  .feature{height:170px!important}
  .feature-copy h3{font-size:19px!important}
}


/* =========================================================
   CTA + COPY POLISH v10
   ========================================================= */

/* Header CTA: premium dark-green button, white copy. */
.subscribe{
  min-width:158px!important;
  min-height:44px;
  padding:0 22px!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(35,240,143,.58)!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,rgba(17,128,77,.96),rgba(7,83,48,.98))!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.035em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 24px rgba(0,210,120,.13);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.subscribe:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 27px rgba(0,210,120,.20);
}

/* Partner CTA system: darker branded surfaces + white copy. */
.offer-button{
  width:72%!important;
  max-width:265px;
  min-width:190px;
  min-height:44px;
  margin:11px auto 0 0!important;
  padding:0 18px!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  border-radius:11px!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:950!important;
  text-shadow:0 1px 5px rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.14)!important;
}
.offer:nth-child(1) .offer-button{
  background:linear-gradient(180deg,#7d2cba,#542078)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 24px rgba(147,46,214,.22)!important;
}
.offer:nth-child(2) .offer-button{
  background:linear-gradient(180deg,#159a61,#0c6b44)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 24px rgba(24,206,126,.18)!important;
}
.offer:nth-child(3) .offer-button{
  background:linear-gradient(180deg,#d56832,#9a3e20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 24px rgba(235,99,45,.20)!important;
}

/* Cashback/Wheel action buttons use the same premium CTA language,
   but remain green because these are YABLUKO.BET actions. */
.feature-copy>b{
  min-width:152px;
  min-height:43px;
  padding:0 19px!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(42,231,144,.48)!important;
  border-radius:11px!important;
  background:linear-gradient(180deg,#148d5a,#0a6640)!important;
  color:#fff!important;
  font-size:10.5px!important;
  font-weight:950!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 22px rgba(0,205,118,.14);
}

/* The eyebrow is now a slogan rather than a corporate descriptor. */
.hero-kicker{
  letter-spacing:.09em!important;
  font-weight:950!important;
}

/* Responsive CTA sizing. */
@media(max-width:760px){
  .subscribe{min-width:136px!important;padding:0 16px!important}
  .offer-button{width:76%!important;max-width:none}
  .feature-copy>b{min-width:140px}
}


/* =========================================================
   v11 — CTA alignment + hero CTA
   ========================================================= */

/* Hero CTA now uses the same premium YABLUKO.BET language. */
.primary{
  min-width:210px!important;
  min-height:46px;
  padding:0 22px!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(42,231,144,.52)!important;
  border-radius:11px!important;
  background:linear-gradient(180deg,#148d5a,#0a6640)!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.015em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 9px 24px rgba(0,205,118,.16);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.primary:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 11px 28px rgba(0,205,118,.22);
}
.primary b{display:none!important}

/* Partner CTAs are centered inside every card. */
.offer-button{
  margin:11px auto 0!important;
}

/* Feature cards remain intentionally clickable as one large target.
   The inner CTA communicates the action and reacts with the card. */
.feature{
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.feature:hover{
  border-color:rgba(25,242,133,.48);
  box-shadow:0 10px 30px rgba(0,210,120,.10);
  transform:translateY(-1px);
}
.feature:hover .feature-copy>b{
  filter:brightness(1.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 9px 24px rgba(0,205,118,.21);
}

@media(max-width:560px){
  .primary{width:100%!important;min-width:0}
}


/* =========================================================
   v12 — accumulated visual polish
   ========================================================= */

/* HERO: continue the scene instead of fading into a flat green rectangle. */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 79% 36%, rgba(0,102,58,.22) 0%, rgba(0,63,38,.13) 28%, rgba(0,22,14,.04) 52%, transparent 70%),
    radial-gradient(ellipse at 96% 58%, rgba(0,74,45,.20) 0%, rgba(0,34,21,.10) 37%, transparent 68%),
    linear-gradient(90deg,#000b07 0%,#00130c 50%,#00180f 76%,#001109 100%)!important;
}
.hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  inset:0 0 0 56%;
  background:
    radial-gradient(circle at 22% 28%,rgba(0,236,126,.075),transparent 24%),
    radial-gradient(circle at 63% 60%,rgba(0,148,83,.06),transparent 31%),
    linear-gradient(105deg,rgba(0,0,0,0),rgba(0,55,33,.07) 45%,rgba(0,20,12,.14));
  opacity:.9;
}

/* Keep the existing artwork but dissolve its right edge more naturally. */
.hero-art,
.hero-visual,
.hero-image{
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 70%,rgba(0,0,0,.92) 78%,rgba(0,0,0,.62) 88%,transparent 100%)!important;
  mask-image:linear-gradient(90deg,#000 0%,#000 70%,rgba(0,0,0,.92) 78%,rgba(0,0,0,.62) 88%,transparent 100%)!important;
}

/* Premium/minimal CTA system: flatter, tighter radius, restrained borders.
   Glow is reserved for hover rather than permanently painting every button. */
.subscribe,
.primary,
.offer-button{
  border-radius:7px!important;
  text-shadow:none!important;
  transition:background .18s ease,border-color .18s ease,color .18s ease,
             box-shadow .18s ease,transform .18s ease,filter .18s ease!important;
}

/* Secondary header action: dark/outline, so hero CTA remains primary. */
.subscribe{
  background:rgba(2,22,14,.78)!important;
  border:1px solid rgba(27,220,126,.55)!important;
  color:#f5fff9!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  font-weight:850!important;
}
.subscribe:hover{
  background:rgba(8,78,48,.72)!important;
  border-color:rgba(37,239,144,.85)!important;
  box-shadow:0 8px 24px rgba(0,211,121,.12)!important;
}

/* Main hero CTA: solid premium green, not a glossy casino-template gradient. */
.primary{
  background:#087748!important;
  border:1px solid rgba(42,224,139,.62)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055)!important;
  font-size:11.5px!important;
  font-weight:850!important;
}
.primary:hover{
  background:#0a8b55!important;
  border-color:rgba(48,242,153,.88)!important;
  box-shadow:0 9px 25px rgba(0,207,119,.15)!important;
}

/* Partner CTA: dark surface + brand border.  Brand fill appears only on hover. */
.offer-button{
  width:72%!important;
  max-width:265px!important;
  min-height:44px!important;
  margin:11px auto 0!important;
  background:rgba(4,8,7,.82)!important;
  color:#fff!important;
  font-size:11.5px!important;
  font-weight:850!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.offer:nth-child(1) .offer-button{
  border:1px solid rgba(168,70,226,.78)!important;
}
.offer:nth-child(2) .offer-button{
  border:1px solid rgba(26,210,127,.75)!important;
}
.offer:nth-child(3) .offer-button{
  border:1px solid rgba(235,104,52,.78)!important;
}
.offer:nth-child(1) .offer-button:hover{
  background:#63268c!important;
  box-shadow:0 8px 23px rgba(150,52,207,.18)!important;
}
.offer:nth-child(2) .offer-button:hover{
  background:#0b7749!important;
  box-shadow:0 8px 23px rgba(20,195,116,.16)!important;
}
.offer:nth-child(3) .offer-button:hover{
  background:#a74725!important;
  box-shadow:0 8px 23px rgba(226,91,40,.17)!important;
}

/* Cashback / Wheel home cards are the CTA themselves.
   No redundant inner button; make the whole surface communicate interaction. */
.feature{
  cursor:pointer!important;
}
.feature-copy>b{
  display:none!important;
}
.feature:hover{
  border-color:rgba(31,232,137,.56)!important;
  box-shadow:0 12px 32px rgba(0,205,118,.09)!important;
  transform:translateY(-2px)!important;
}
.feature img{
  transition:transform .28s ease,filter .28s ease!important;
}
.feature:hover img{
  transform:scale(1.018);
  filter:brightness(1.04);
}

@media (prefers-reduced-motion:reduce){
  .feature,.feature img,.subscribe,.primary,.offer-button{transition:none!important}
  .feature:hover{transform:none!important}
  .feature:hover img{transform:none!important}
}


/* =========================================================
   v13 — corrective polish
   ========================================================= */

/* Undo the aggressive v12 hero scene overlay that introduced a vertical seam.
   Keep the v11 composition/art sizing and only retain its original edge dissolve. */
.hero{
  background:
    radial-gradient(circle at 76% 36%,rgba(0,104,59,.18),transparent 31%),
    linear-gradient(90deg,#000b07 0%,#00130c 62%,#00190f 100%)!important;
}
.hero::after{
  content:none!important;
}
.hero-art,
.hero-visual,
.hero-image{
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 82%,rgba(0,0,0,.88) 90%,transparent 100%)!important;
  mask-image:linear-gradient(90deg,#000 0%,#000 82%,rgba(0,0,0,.88) 90%,transparent 100%)!important;
}

/* Hero CTA = same premium outline language as ПРИЄДНАТИСЬ. */
.primary{
  min-width:230px!important;
  min-height:46px!important;
  padding:0 23px!important;
  background:rgba(2,22,14,.78)!important;
  border:1px solid rgba(27,220,126,.55)!important;
  border-radius:7px!important;
  color:#f5fff9!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  font-size:11.5px!important;
  font-weight:850!important;
  letter-spacing:.015em!important;
}
.primary:hover{
  background:rgba(8,78,48,.72)!important;
  border-color:rgba(37,239,144,.85)!important;
  box-shadow:0 8px 24px rgba(0,211,121,.12)!important;
  transform:translateY(-1px)!important;
}

/* Partner CTAs: wider and a touch taller, still centered and restrained. */
.offer-button{
  width:80%!important;
  max-width:310px!important;
  min-height:47px!important;
  margin:16px auto 0!important;
  padding:0 20px!important;
  font-size:12px!important;
}

/* Cashback/Wheel: whole cards are still the CTA; inner buttons stay hidden. */
.feature-copy>b{
  display:none!important;
}

@media(max-width:760px){
  .offer-button{width:84%!important;max-width:none!important}
  .primary{min-width:0!important;width:100%!important}
}


/* =========================================================
   v14 — natural hero edge + cleaner offer scan
   ========================================================= */

/* No artificial continuation/fade: let the source hero artwork end naturally. */
.hero{
  background:#00130c!important;
}
.hero::after{
  content:none!important;
}
.hero-art,
.hero-visual,
.hero-image{
  -webkit-mask-image:none!important;
  mask-image:none!important;
}

/* Hide only the ambiguous score/age marker; ranking badge .rank remains. */
.offer-rating,
.offer-score,
.offer-age,
.offer .rating{
  display:none!important;
}

.offer-description{
  line-height:1.38!important;
  opacity:.9;
}
.offer-bonus{
  line-height:1.12!important;
}


/* =========================================================
   v15 — final hero geometry + exact partner copy
   ========================================================= */
.hero{
  background:#00130c!important;
  overflow:hidden!important;
}
.hero::after{
  content:none!important;
}

/* Desktop: finite artwork. It intentionally stops before the right edge,
   leaving a clean dark-green field after it. */
@media(min-width:901px){
  .hero-art{
    left:auto!important;
    right:15%!important;
    top:0!important;
    width:49%!important;
    height:100%!important;
    overflow:hidden!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .hero-art img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center 48%!important;
  }
  .hero-art:after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background:
      linear-gradient(90deg,#020604 0%,rgba(2,6,4,.72) 12%,transparent 34%),
      linear-gradient(0deg,#020604 0%,transparent 15%)!important;
    pointer-events:none!important;
  }
}

/* Mobile keeps the existing responsive composition. */
@media(max-width:900px){
  .hero-art{
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
}

/* Ranking stays; ambiguous 5+/5++ score stays hidden. */
.offer .rating{display:none!important}


/* =========================================================
   v16 — hero restored from v8 + final identity polish
   ========================================================= */

/* HERO: restore the exact v8 desktop geometry/fade direction.
   This intentionally overrides all v9-v15 hero experiments. */
.hero{
  position:relative!important;
  overflow:hidden!important;
  background:#020604!important;
  border-bottom:1px solid rgba(25,242,133,.12)!important;
}
.hero:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:radial-gradient(circle at 72% 35%,rgba(24,240,133,.1),transparent 32%)!important;
  pointer-events:none!important;
}
.hero::after{
  content:none!important;
}
.hero-inner{
  overflow:hidden!important;
}
@media(min-width:901px){
  .hero-art{
    position:absolute!important;
    right:0!important;
    top:0!important;
    width:62%!important;
    max-width:740px!important;
    height:100%!important;
    overflow:hidden!important;
    clip-path:inset(0 0 0 0)!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .hero-art img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center 48%!important;
    filter:saturate(.96) contrast(1.05) brightness(.9)!important;
  }
  .hero-art:after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background:
      linear-gradient(90deg,#020604 0%,rgba(2,6,4,.75) 13%,transparent 39%,transparent 88%,#020604 100%),
      linear-gradient(0deg,#020604 0%,transparent 17%)!important;
    pointer-events:none!important;
  }
}

/* Larger hero social targets, keeping the same clean circular language. */
.socials{
  gap:12px!important;
  margin:18px 0!important;
}
.socials a{
  width:43px!important;
  height:43px!important;
  border-radius:50%!important;
  background:#07100b!important;
  border:1px solid rgba(255,255,255,.16)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.socials img{
  width:27px!important;
  height:27px!important;
}
.socials a:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(25,241,138,.48)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.25)!important;
}

/* Expressive brush/grunge wordmark.
   Road Rage is an OFL Google Font; body copy remains Inter. */
.hero h1{
  font-family:"Road Rage",Impact,sans-serif!important;
  font-style:normal!important;
  font-weight:400!important;
  font-size:78px!important;
  line-height:.82!important;
  letter-spacing:.005em!important;
  text-transform:uppercase!important;
  margin:15px 0 21px!important;
  text-shadow:0 7px 30px #000!important;
}
.hero h1 span{
  color:#19f18a!important;
}

/* Main hero CTA: distinct from header CTA, but still premium/minimal. */
.hero .primary{
  min-width:225px!important;
  min-height:46px!important;
  padding:0 24px!important;
  gap:0!important;
  border-radius:7px!important;
  border:1px solid rgba(27,220,126,.70)!important;
  background:linear-gradient(180deg,rgba(9,91,55,.90),rgba(4,54,33,.94))!important;
  color:#fff!important;
  font-size:11.5px!important;
  font-weight:900!important;
  letter-spacing:.025em!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.hero .primary::after{
  display:none!important;
  content:none!important;
}
.hero .primary:hover{
  background:linear-gradient(180deg,rgba(12,119,71,.95),rgba(5,72,43,.97))!important;
  border-color:rgba(39,239,144,.90)!important;
  box-shadow:0 9px 25px rgba(0,207,119,.13)!important;
  transform:translateY(-1px)!important;
}

@media(max-width:900px){
  .hero-art{
    width:108%!important;
    max-width:none!important;
    right:-24%!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .hero-art:after{
    background:
      linear-gradient(0deg,#020604 0%,transparent 37%),
      linear-gradient(90deg,#020604 0%,transparent 38%,#020604 100%)!important;
  }
  .hero h1{font-size:64px!important}
}
@media(max-width:560px){
  .hero-art{width:135%!important;right:-36%!important}
  .hero h1{font-size:54px!important}
  .socials a{width:41px!important;height:41px!important}
  .socials img{width:25px!important;height:25px!important}
}


/* =========================================================
   v17 — tiny hero seam fix + slightly larger wordmark
   ========================================================= */

/* Preserve v16 hero geometry. Blend only the last ~36px of the artwork
   into the existing hero background so the right seam disappears. */
@media(min-width:901px){
  .hero-art:before{
    content:""!important;
    position:absolute!important;
    z-index:2!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    width:38px!important;
    pointer-events:none!important;
    background:linear-gradient(90deg,rgba(2,6,4,0) 0%,rgba(2,6,4,.38) 42%,#00130c 100%)!important;
  }

  /* Slight increase only; retain Road Rage and existing spacing. */
  .hero h1{
    font-size:84px!important;
  }
}

@media(max-width:900px) and (min-width:561px){
  .hero h1{font-size:68px!important}
}
@media(max-width:560px){
  .hero h1{font-size:57px!important}
}


/* =========================================================
   v18 — larger 21+ age gate only
   Main page layout and technical behavior stay untouched.
   ========================================================= */
@media(min-width:641px){
  .age-card{
    width:min(620px,calc(100vw - 48px))!important;
    padding:38px 40px 34px!important;
    border-radius:20px!important;
  }
  .age-logo{
    font-size:42px!important;
    margin-bottom:20px!important;
  }
  .age-eyebrow{
    font-size:12px!important;
    margin-bottom:8px!important;
  }
  .age-card h2{
    font-size:31px!important;
    line-height:1.08!important;
    margin-bottom:14px!important;
  }
  .age-card p{
    font-size:13px!important;
    line-height:1.6!important;
  }
  .age-actions{
    gap:12px!important;
    margin-top:22px!important;
    margin-bottom:24px!important;
  }
  .age-actions button{
    min-height:54px!important;
    padding:0 24px!important;
    font-size:14px!important;
    border-radius:9px!important;
  }
  .age-note{
    font-size:12px!important;
    line-height:1.55!important;
  }
}


/* =========================================================
   v19 — actual 21+ modal sizing fix
   ========================================================= */
@media(min-width:641px){
  .age-modal{
    width:min(540px,calc(100vw - 48px))!important;
    padding:36px 38px 34px!important;
    border-radius:19px!important;
  }
  .age-modal>img{
    width:56px!important;
    height:56px!important;
  }
  .age-modal>span{
    font-size:11px!important;
    margin-top:16px!important;
  }
  .age-modal h2{
    font-size:31px!important;
    line-height:1.1!important;
    margin:8px 0 13px!important;
  }
  .age-modal p{
    font-size:11px!important;
    line-height:1.6!important;
  }
  .age-modal>div{
    gap:11px!important;
    margin:21px 0 0!important;
  }
  .age-modal>div .primary,
  .age-modal>div .secondary{
    min-height:52px!important;
    padding:0 24px!important;
    font-size:13px!important;
  }
}

/* User requested removal of the bottom responsible-gaming note
   inside the age gate only. */
.age-modal>small{
  display:none!important;
}

/* v25 shared legal information inside the site footer */
.footer-legal{display:grid;grid-template-columns:1.55fr 1fr;gap:42px;margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.07)}
.footer-legal-col strong{display:block;margin-bottom:8px;color:#dfe8e2;font-size:10px;letter-spacing:.06em}
.footer-legal-col p{margin:5px 0;color:#839087;font-size:9.5px;line-height:1.65;max-width:720px}
@media(max-width:700px){.footer-legal{grid-template-columns:1fr;gap:15px}.footer-legal-col p{font-size:9.25px}}


/* v26 — unified public footer */
footer .footer-main, .shared-site-footer .footer-main{display:flex;align-items:center;gap:14px;min-height:48px}
footer .footer-main .footer-socials, .shared-site-footer .footer-main .footer-socials{margin-left:auto;display:flex;gap:9px}
footer .footer-socials a, .shared-site-footer .footer-socials a{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#07100b;border:1px solid rgba(255,255,255,.14);transition:.18s transform,.18s border-color,.18s background}
footer .footer-socials a:hover, .shared-site-footer .footer-socials a:hover{transform:translateY(-1px);border-color:rgba(25,241,138,.55);background:#09170f}
footer .footer-socials img, .shared-site-footer .footer-socials img{width:19px;height:19px;object-fit:contain}
footer .circle21, .shared-site-footer .circle21{margin-left:7px;width:39px;height:39px;flex:0 0 39px}
footer .footer-legal, .shared-site-footer .footer-legal{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.9fr);gap:54px;margin-top:15px;padding-top:17px;border-top:1px solid rgba(255,255,255,.075)}
footer .footer-legal-col strong, .shared-site-footer .footer-legal-col strong{display:block;margin-bottom:7px;color:#e6eee9;font-size:10.5px;letter-spacing:.055em}
footer .footer-legal-col p, .shared-site-footer .footer-legal-col p{margin:5px 0;color:#8d9a92;font-size:9.75px;line-height:1.58;max-width:760px}
footer .copyright, .shared-site-footer .copyright{margin-top:14px;padding-top:2px;text-align:center;color:#748078;font-size:8.25px}
@media(max-width:700px){footer .footer-main,.shared-site-footer .footer-main{flex-wrap:wrap}footer .footer-main .footer-socials,.shared-site-footer .footer-main .footer-socials{margin-left:auto}footer .footer-legal,.shared-site-footer .footer-legal{grid-template-columns:1fr;gap:14px}footer .footer-legal-col p,.shared-site-footer .footer-legal-col p{font-size:9.5px}}


/* v31 — public mobile audit fixes */
@media(max-width:760px){
 .top-inner{gap:10px!important}.brand img{width:27px!important;height:27px!important}.brand strong{font-size:16px!important}.subscribe{padding:10px 13px!important;font-size:10px!important}
 .top nav{gap:22px!important;font-size:11px!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}.top nav::-webkit-scrollbar{display:none}
 footer .footer-main,.shared-site-footer .footer-main{gap:10px!important}footer .footer-brand strong,.shared-site-footer .footer-brand strong{font-size:15px!important}
 footer .footer-legal-col strong,.shared-site-footer .footer-legal-col strong{font-size:11px!important}footer .footer-legal-col p,.shared-site-footer .footer-legal-col p{font-size:10px!important;line-height:1.62!important}
 footer .copyright,.shared-site-footer .copyright{font-size:8.5px!important;line-height:1.5!important}
}
@media(max-width:390px){.wrap{width:calc(100% - 20px)!important}.subscribe{padding:9px 10px!important}.top nav{gap:19px!important}}

/* =========================================================
   v34 — real mobile composition pass
   Desktop rules above remain untouched.
   ========================================================= */
@media (max-width:760px){
  .top{height:auto!important}
  .top-inner{padding:10px 0 0!important;gap:8px 10px!important;flex-wrap:wrap!important}
  .brand{min-width:0!important}
  .brand img{width:27px!important;height:27px!important}
  .brand strong{font-size:16px!important}
  .subscribe{margin-left:auto!important;padding:10px 14px!important;font-size:10px!important}
  .top nav{order:3!important;width:100%!important;margin:0!important;padding:0!important;height:42px!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;align-items:center!important;gap:0!important;overflow:visible!important;border-top:1px solid rgba(255,255,255,.035)!important;font-size:10px!important}
  .top nav a{display:flex!important;align-items:center!important;justify-content:center!important;height:100%!important;white-space:nowrap!important}
  .top nav a:nth-child(4),.top nav a:nth-child(5){display:none!important}

  .hero{min-height:0!important}
  .hero-inner{height:510px!important;display:block!important;padding-top:27px!important;overflow:hidden!important}
  .hero-copy{position:relative!important;z-index:5!important;width:100%!important;max-width:100%!important;padding:0 0 0!important}
  .eyebrow{font-size:10px!important}
  .hero h1{font-size:55px!important;line-height:.84!important;margin:14px 0 18px!important}
  .hero-copy>p{max-width:345px!important;font-size:12.5px!important;line-height:1.5!important;margin:0!important}
  .socials{margin:15px 0 13px!important}
  .socials a{width:39px!important;height:39px!important}
  .socials img{width:24px!important;height:24px!important}
  .hero .primary{width:min(300px,78%)!important;min-width:0!important;min-height:46px!important;position:relative!important;z-index:6!important}
  .age-note{width:220px!important;margin-top:10px!important;font-size:8.5px!important;line-height:1.35!important;position:relative!important;z-index:6!important}
  .hero-art{display:block!important;position:absolute!important;z-index:2!important;left:auto!important;right:-34px!important;top:auto!important;bottom:0!important;width:355px!important;height:285px!important;max-width:none!important;opacity:.88!important;overflow:hidden!important}
  .hero-art img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:57% 46%!important;filter:saturate(.94) contrast(1.05) brightness(.80)!important}
  .hero-art:before{content:none!important}
  .hero-art:after{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(180deg,#020604 0%,rgba(2,6,4,.82) 9%,rgba(2,6,4,.08) 36%,transparent 55%),linear-gradient(90deg,#020604 0%,rgba(2,6,4,.45) 18%,transparent 46%,rgba(2,6,4,.08) 100%),linear-gradient(0deg,#020604 0%,transparent 20%)!important}
  .trust{margin-top:0!important;padding:0 0 18px!important;grid-template-columns:1fr!important}
  .trust>div{height:58px!important;padding-left:18px!important;justify-content:flex-start!important}
  .trust img{width:30px!important;height:30px!important}
  .trust span{font-size:10.5px!important}
}
@media (max-width:390px){
  .hero-inner{height:495px!important;padding-top:24px!important}
  .hero h1{font-size:50px!important}
  .hero-copy>p{max-width:315px!important;font-size:12px!important}
  .hero .primary{width:min(285px,82%)!important}
  .hero-art{width:325px!important;height:265px!important;right:-43px!important}
  .age-note{width:205px!important;font-size:8px!important}
}

/* =========================================================
   v35 — mobile home hero: clean stacked composition
   Desktop remains unchanged. On phones the artwork is a
   deliberate full-width hero panel, matching Cashback logic.
   ========================================================= */
@media (max-width:760px){
  .hero-inner{
    height:auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    padding-top:26px!important;
    overflow:visible!important;
  }
  .hero-copy{
    width:100%!important;
    max-width:none!important;
    padding:0!important;
  }
  .hero h1{
    font-size:52px!important;
    line-height:.88!important;
    margin:14px 0 19px!important;
  }
  .hero-copy>p{
    max-width:360px!important;
    font-size:12.5px!important;
    line-height:1.52!important;
  }
  .socials{margin:15px 0 13px!important}
  .hero .primary{
    width:min(340px,82%)!important;
    min-height:47px!important;
    margin:0!important;
  }
  .age-note{
    width:250px!important;
    margin:10px 0 14px!important;
    font-size:8.5px!important;
    line-height:1.35!important;
  }
  .hero-art{
    position:relative!important;
    inset:auto!important;
    order:2!important;
    width:100%!important;
    height:270px!important;
    max-width:none!important;
    margin:0!important;
    opacity:1!important;
    overflow:hidden!important;
    border-radius:0!important;
  }
  .hero-art img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:55% 43%!important;
    filter:saturate(.96) contrast(1.05) brightness(.82)!important;
  }
  .hero-art:after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background:linear-gradient(180deg,#020604 0%,rgba(2,6,4,.32) 12%,transparent 31%,transparent 76%,#020604 100%),linear-gradient(90deg,rgba(2,6,4,.18),transparent 24%,transparent 82%,rgba(2,6,4,.14))!important;
  }
  .trust{
    margin-top:0!important;
    padding-top:0!important;
    padding-bottom:18px!important;
  }
}
@media (max-width:390px){
  .hero-inner{padding-top:23px!important}
  .hero h1{font-size:48px!important}
  .hero-copy>p{max-width:330px!important;font-size:12px!important}
  .hero .primary{width:min(315px,86%)!important}
  .age-note{width:230px!important;font-size:8px!important}
  .hero-art{height:250px!important}
  .hero-art img{object-position:56% 43%!important}
}

/* =========================================================
   v36 — mobile hero artwork first
   Header -> artwork -> copy. Desktop remains unchanged.
   ========================================================= */
@media (max-width:760px){
  .hero-inner{
    display:flex!important;
    flex-direction:column!important;
    padding-top:0!important;
    overflow:visible!important;
  }
  .hero-art{
    order:-1!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:225px!important;
    margin:0 0 22px!important;
    overflow:hidden!important;
    opacity:1!important;
  }
  .hero-art img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:55% 42%!important;
    filter:saturate(.96) contrast(1.05) brightness(.82)!important;
  }
  .hero-art:after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background:linear-gradient(180deg,rgba(2,6,4,.12) 0%,transparent 30%,transparent 64%,#020604 100%),linear-gradient(90deg,rgba(2,6,4,.16),transparent 25%,transparent 82%,rgba(2,6,4,.12))!important;
  }
  .hero-copy{order:2!important;padding:0!important}
  .trust{margin-top:20px!important}
}
@media (max-width:390px){
  .hero-art{height:205px!important;margin-bottom:19px!important}
}