:root{
  --page:#151923;
  --page-deep:#0f1320;
  --header:#1a1e29;
  --sidebar:#191e2a;
  --panel:#202838;
  --panel-2:#242d3e;
  --panel-soft:#1c2230;
  --line:rgba(154,169,196,.18);
  --text:#f5f7ff;
  --text-strong:#ffffff;
  --muted:#aeb8cc;
  --muted-2:#7f8ba3;
  --blue:#359cff;
  --blue-2:#2479dd;
  --accent:#c9ff5a;
  --accent-2:#e5ff8a;
  --danger:#ff5b6b;
  --radius:24px;
  --radius-sm:14px;
  --shadow:0 22px 60px rgba(0,0,0,.34);
  --max:1260px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--page);color:var(--text);line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1rem;color:var(--muted)}
h1,h2,h3{line-height:1.08;margin:0 0 1rem;color:var(--text-strong)}
h1{font-size:clamp(2.55rem,4.7vw,4.35rem);letter-spacing:-.055em;max-width:760px}
h2{font-size:clamp(2rem,4vw,3.35rem);letter-spacing:-.045em}
h3{font-size:1.25rem;letter-spacing:-.015em}
.container{width:min(var(--max),calc(100% - 48px));margin:auto}
.section{padding:88px 0;background:var(--page);color:var(--text)}
.section-dark{background:radial-gradient(circle at 78% 0%,rgba(53,156,255,.20),transparent 34%),linear-gradient(180deg,var(--page-deep),var(--page));color:var(--text)}
.section-surface{background:var(--page);color:var(--text)}
.site-header{position:sticky;top:0;z-index:20;background:rgba(26,30,41,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.header-inner{min-height:64px;display:flex;align-items:center;gap:20px}
.brand img,.site-footer img{filter:drop-shadow(0 8px 22px rgba(0,0,0,.36))}
.site-nav{display:flex;gap:22px;margin-left:auto;color:var(--muted);font-weight:800;font-size:.86rem;text-transform:uppercase;letter-spacing:.02em}
.site-nav a{opacity:.9}.site-nav a:hover{opacity:1;color:var(--text-strong)}
.header-cta{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#54b1ff,var(--blue));color:#fff;padding:11px 20px;border-radius:999px;font-weight:900;box-shadow:0 10px 24px rgba(53,156,255,.3);white-space:nowrap}
.menu-toggle{display:none;margin-left:auto;background:var(--panel);border:1px solid var(--line);color:#fff;border-radius:999px;padding:10px 14px;font-weight:900}
.hero{padding:34px 0 54px;overflow:hidden;background:linear-gradient(180deg,#1b202b 0%,#151923 100%)}
.hero-grid{display:grid;grid-template-columns:1fr .95fr;gap:30px;align-items:center}
.eyebrow{color:var(--accent);font-weight:900;text-transform:uppercase;letter-spacing:.18em;font-size:.78rem}
.hero-copy p{font-size:1.06rem;color:var(--muted)}
.hero-lead{font-size:1.24rem!important;max-width:720px;color:#dbe5f8!important}
.hero-actions{margin-top:20px}
.hero-mini-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.hero-mini-stats span{background:rgba(53,156,255,.12);border:1px solid var(--line);border-radius:999px;color:#dbe9ff;font-weight:800;padding:8px 12px;font-size:.88rem}
.hero-media{background:linear-gradient(180deg,#222b3c,#171d29);border:1px solid var(--line);border-radius:24px;padding:10px;box-shadow:var(--shadow)}
.hero-media>img,.image-text img{border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.cta-banner{position:relative}.banner-action{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;background:rgba(15,19,32,.76);border:1px solid var(--line);border-radius:18px;padding:12px 14px}.banner-action strong{color:#fff;line-height:1.25}.banner-action .btn{padding:11px 16px;border-radius:14px;flex:0 0 auto}
.payment-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}.payment-strip img{height:42px;width:100%;object-fit:contain;background:#fff;border-radius:12px;padding:7px}
.hero-proof{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}.hero-proof article{background:rgba(32,40,56,.78);border:1px solid var(--line);border-radius:18px;padding:18px}.hero-proof strong{display:block;color:#fff;margin-bottom:4px;font-size:1.05rem}.hero-proof p{margin:0;color:var(--muted);font-size:.96rem}
.button-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;padding:14px 24px;font-weight:900;border:1px solid transparent;transition:.2s transform,.2s filter,.2s box-shadow}.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-primary{background:linear-gradient(180deg,#55b5ff,var(--blue));color:#fff;box-shadow:0 14px 30px rgba(53,156,255,.28)}
.btn-secondary{background:#fff;color:#111723}.btn-ghost{border-color:var(--line);color:#fff;background:var(--panel)}.full{width:100%}
.split,.image-text,.bonus-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.content-narrow{max-width:100%;width:100%}.lead{max-width:100%;font-size:1.1rem;color:var(--text)}
.check-list{padding:0;margin:0;list-style:none;color:var(--text)}.check-list li{position:relative;padding:0 0 10px 30px;color:inherit}.check-list li:before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;background:var(--blue);border-radius:4px;box-shadow:0 0 0 4px rgba(53,156,255,.15)}
.two-col{columns:2;column-gap:32px}.section-heading{text-align:center;max-width:1020px;margin:0 auto 34px}.section-heading p{color:var(--muted)}.left-heading{text-align:left;margin:0 0 24px;max-width:900px}.intro-section{padding-top:74px}.intro-find{max-width:1040px}.list-card{background:linear-gradient(180deg,#242d3e,#1c2432);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card,.mini-card,.bonus-box,.category-grid article,.timeline article{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);color:var(--text)}
.card p,.mini-card p,.category-grid p,.timeline p{color:var(--muted)}.card h3,.mini-card h3,.category-grid h3,.timeline h3{color:var(--text-strong)}
.light{background:var(--panel-2);border-color:var(--line);color:var(--text)}.light p,.light li{color:var(--text)}.light ol{color:var(--text);padding-left:1.25rem}.light h3{color:var(--text-strong)}
.bonus-section{background:linear-gradient(180deg,#151923,#171d28)}.bonus-box{background:linear-gradient(180deg,#242d3e,#1d2432);color:var(--text);position:sticky;top:96px}.bonus-box li{color:var(--text)}
.spacing-top{margin-top:28px}.steps-two{grid-template-columns:repeat(2,1fr)}ol{padding-left:1.25rem}.image-text{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:stretch}.image-text>div{min-width:0}.reverse{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.image-frame{display:flex;min-height:100%;background:linear-gradient(180deg,#222b3c,#151923);border:1px solid var(--line);border-radius:24px;padding:10px;box-shadow:var(--shadow);overflow:hidden}.image-frame img{width:100%;height:100%;min-height:360px;object-fit:cover;object-position:center}
.mini-card{margin:18px 0;background:var(--panel-2)}.mini-card.dark{background:var(--panel-2)}
.games-section{background:var(--page)}.game-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;margin-bottom:34px}.game-grid img{border-radius:18px;box-shadow:0 15px 35px rgba(0,0,0,.26);transition:.2s transform}.game-grid img:hover{transform:translateY(-5px)}
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.category-grid article{background:var(--panel);border-color:var(--line)}.category-grid+.center{margin-top:40px}.games-section .center .btn{position:relative;z-index:1}.compact{grid-template-columns:repeat(4,1fr);margin-top:28px}
.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.timeline span{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--blue);color:#fff;font-weight:900;margin-bottom:14px}.center{text-align:center}.center .btn,.center-row{justify-content:center}
.faq-list{max-width:1000px;margin:auto}.faq-item{border:1px solid var(--line);border-radius:18px;margin-bottom:12px;overflow:hidden;background:var(--panel)}.faq-item button{width:100%;padding:20px 62px 20px 24px;text-align:left;background:transparent;border:0;color:#fff;font-weight:900;font-size:1rem;cursor:pointer;position:relative}.faq-item button:after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:rgba(53,156,255,.16);border:1px solid rgba(53,156,255,.35);color:#75bdff;font-size:1.25rem;line-height:1}.faq-item.is-open button:after{content:"–"}.faq-panel{display:none;padding:0 24px 20px;color:var(--muted)}.faq-panel p{color:var(--muted)}.faq-item.is-open .faq-panel{display:block}
.final-cta{padding:88px 0;background:radial-gradient(circle at 50% 0%,rgba(53,156,255,.18),transparent 40%),var(--page-deep)}.final-cta p{max-width:900px;margin:0 auto 20px;color:var(--muted)}
.site-footer{background:#0b0e17;color:var(--muted);padding:38px 0}.footer-grid{display:flex;justify-content:space-between;gap:24px;align-items:center}.footer-grid nav{display:flex;gap:18px;flex-wrap:wrap}.footer-grid a:hover{color:var(--blue)}
@media (max-width:980px){.container{width:min(var(--max),calc(100% - 32px))}.hero-grid,.split,.image-text,.bonus-grid,.reverse{grid-template-columns:1fr}.hero-proof{grid-template-columns:1fr}.card-grid,.category-grid,.compact{grid-template-columns:repeat(2,1fr)}.timeline{grid-template-columns:1fr 1fr}.game-grid{grid-template-columns:repeat(4,1fr)}.bonus-box{position:static}.site-nav{position:absolute;top:64px;left:16px;right:16px;display:none;flex-direction:column;background:#111727;border:1px solid var(--line);border-radius:18px;padding:16px}.site-nav.is-open{display:flex}.menu-toggle{display:block;order:3;margin-left:0}.header-cta{order:2;margin-left:auto;padding:9px 15px;font-size:.9rem}.header-inner{position:relative}.image-frame img{min-height:260px}.banner-action{align-items:flex-start;flex-direction:column}.banner-action .btn{width:100%}}
@media (max-width:640px){.container{width:min(var(--max),calc(100% - 28px))}.section{padding:58px 0}.hero{padding:24px 0 44px}.hero-grid{gap:18px}.hero-copy{display:contents}.hero-copy .eyebrow{order:1}.hero-copy h1{order:2}.hero-lead{order:3}.hero-media{order:4}.hero-actions{order:5;margin-top:8px}.hero-mini-stats{order:6}.hero-proof{order:7}.card-grid,.category-grid,.compact,.timeline,.steps-two{grid-template-columns:1fr}.two-col{columns:1}.game-grid{grid-template-columns:repeat(2,1fr)}.payment-strip{grid-template-columns:repeat(3,1fr)}.footer-grid{display:block}.footer-grid nav{margin-top:20px}.btn{width:100%}.center-row{width:100%}h1{font-size:2.18rem;letter-spacing:-.05em}.hero-lead{font-size:1.03rem!important}.header-inner{min-height:58px;gap:10px}.brand img{width:116px;height:auto}.menu-toggle{padding:8px 11px;font-size:.82rem}.header-cta{display:inline-flex;padding:8px 12px;font-size:.82rem}.hero-media{padding:8px;border-radius:18px}.hero-media>img{border-radius:14px}.payment-strip img{height:34px;border-radius:9px;padding:5px}.banner-action{display:none}.hero-mini-stats span{font-size:.8rem;padding:6px 10px}.list-card{padding:20px}.image-frame{padding:8px;border-radius:18px}.image-frame img{min-height:220px;border-radius:14px}.faq-item button{padding:18px 56px 18px 18px}.site-footer p{margin-bottom:0}}

/* Bug-fix pass: keep long text sections contained, prevent media stretching, and stop CTA overlap. */
html, body {
  overflow-x: hidden;
}

.about-section {
  overflow: hidden;
  background: var(--page);
}

.about-section .container {
  max-width: var(--max);
  width: min(var(--max), calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

.about-section .content-narrow {
  max-width: 1040px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.about-section h2,
.about-section p {
  max-width: 100%;
}

/* Media sections now behave as compact feature blocks instead of stretched image columns. */
.media-feature {
  align-items: start;
  gap: clamp(24px, 4vw, 54px);
}

.media-feature > .image-frame {
  align-self: start;
  min-height: 0;
  height: auto;
  padding: 10px;
  background:
    radial-gradient(circle at 18% 16%, rgba(53,156,255,.20), transparent 34%),
    linear-gradient(180deg, #222b3c, #151923);
}

.media-feature > .image-frame img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1125 / 469;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
}

/* Make very tall text/media combinations read like a designed article block, not a stretched poster. */
.media-feature .mini-card {
  margin-top: 20px;
}

/* Add reliable clearance around CTAs below dense grids. */
.category-grid,
.timeline,
.card-grid.compact {
  margin-bottom: clamp(28px, 3vw, 44px);
}

.category-grid + .center,
.timeline + .center,
.card-grid.compact + .center {
  clear: both;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: 0;
}

.category-grid + .center .btn,
.timeline + .center .btn,
.card-grid.compact + .center .btn {
  flex: 0 1 auto;
  max-width: 100%;
}

@media (min-width: 981px) {
  .media-feature {
    grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr);
  }

  .media-feature.reverse {
    grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr);
  }

  .media-feature > .image-frame {
    position: sticky;
    top: 92px;
  }
}

@media (max-width: 980px) {
  .about-section .container {
    width: min(var(--max), calc(100% - 32px));
  }

  .media-feature > .image-frame {
    position: static;
  }

  .media-feature > .image-frame img {
    max-height: none;
  }
}

@media (max-width: 640px) {
  .about-section .container {
    width: min(var(--max), calc(100% - 28px));
  }

  .media-feature > .image-frame img {
    aspect-ratio: 16 / 9;
  }

  .category-grid + .center,
  .timeline + .center,
  .card-grid.compact + .center {
    margin-top: 24px;
  }
}

/* Revision 4: tighter rhythm, visible section changes, and full-width CTA image banners. */
:root {
  --section-pad: clamp(42px, 5vw, 64px);
  --section-pad-tight: clamp(34px, 4.2vw, 54px);
}

.section {
  position: relative;
  padding: var(--section-pad) 0;
  border-top: 1px solid rgba(154,169,196,.10);
  overflow: hidden;
}

.hero {
  padding: clamp(28px, 4vw, 44px) 0 clamp(34px, 4vw, 48px);
  border-top: 0;
}

.section + .section {
  margin-top: 0;
}

.section-surface {
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0) 36%),
    var(--page);
}

.section-dark,
.bonus-section,
.games-section,
.faq-section,
.final-cta {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.section-marked::before {
  content: attr(data-section);
  position: absolute;
  top: 0;
  left: max(24px, calc((100vw - var(--max)) / 2));
  transform: translateY(-1px);
  padding: 5px 14px 6px;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, var(--blue), var(--blue-2));
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  z-index: 3;
  box-shadow: 0 12px 30px rgba(53,156,255,.22);
}

.section-marked::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(53,156,255,.42), transparent);
  pointer-events: none;
}

.section-heading {
  margin-bottom: clamp(20px, 2.6vw, 30px);
}

.intro-section {
  padding-top: var(--section-pad-tight);
  padding-bottom: var(--section-pad-tight);
}

.about-section,
.image-story {
  padding-top: var(--section-pad-tight);
  padding-bottom: var(--section-pad-tight);
}

.card-grid,
.category-grid,
.timeline,
.game-grid {
  gap: clamp(12px, 1.7vw, 18px);
}

/* Replace weak side-column media with bold local-image CTA banners. */
.image-banner-section {
  display: flex !important;
  flex-direction: column;
  gap: clamp(22px, 3vw, 34px);
}

.image-banner-section.reverse > .image-frame {
  order: -1;
}

.image-banner-section > .image-frame {
  position: relative !important;
  top: auto !important;
  width: 100%;
  min-height: 0;
  padding: clamp(8px, 1vw, 12px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 16% 12%, rgba(201,255,90,.17), transparent 26%),
    radial-gradient(circle at 86% 18%, rgba(53,156,255,.28), transparent 34%),
    linear-gradient(180deg, #263149, #151923);
  box-shadow: 0 26px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(53,156,255,.12);
  overflow: hidden;
}

.image-banner-section > .image-frame::after {
  content: "";
  position: absolute;
  inset: clamp(8px, 1vw, 12px);
  border-radius: 20px;
  background: linear-gradient(90deg, rgba(15,19,32,.08), rgba(15,19,32,.18) 44%, rgba(15,19,32,.48));
  pointer-events: none;
}

.image-banner-section > .image-frame img {
  width: 100%;
  height: clamp(260px, 28vw, 390px);
  min-height: 0 !important;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
  filter: saturate(1.08) contrast(1.03);
}

.image-cta {
  position: absolute;
  right: clamp(22px, 3vw, 38px);
  bottom: clamp(22px, 3vw, 36px);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  padding: 14px 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #10151f;
  font-weight: 950;
  box-shadow: 0 18px 38px rgba(201,255,90,.24), 0 0 0 1px rgba(255,255,255,.16) inset;
}

.image-banner-section > div:not(.image-frame) {
  width: min(100%, 1080px);
  margin-inline: auto;
}

.image-banner-section > div:not(.image-frame) h2 {
  max-width: 920px;
}

.image-banner-section > div:not(.image-frame) p {
  max-width: 1040px;
}

.image-banner-section .mini-card {
  margin: clamp(18px, 2vw, 24px) 0;
}

@media (min-width: 981px) {
  .image-banner-section > div:not(.image-frame) {
    columns: 2 420px;
    column-gap: clamp(34px, 4vw, 58px);
  }

  .image-banner-section > div:not(.image-frame) h2,
  .image-banner-section > div:not(.image-frame) h3,
  .image-banner-section > div:not(.image-frame) .mini-card,
  .image-banner-section > div:not(.image-frame) ul,
  .image-banner-section > div:not(.image-frame) .check-list {
    break-inside: avoid;
    column-span: all;
  }

  .image-banner-section > div:not(.image-frame) h2 {
    margin-bottom: 18px;
  }
}

@media (max-width: 980px) {
  .section {
    padding: clamp(38px, 6vw, 52px) 0;
  }

  .section-marked::before {
    left: 16px;
  }

  .image-banner-section > .image-frame img {
    height: clamp(220px, 42vw, 320px);
  }
}

@media (max-width: 640px) {
  .section {
    padding: 42px 0;
  }

  .hero {
    padding: 24px 0 36px;
  }

  .section-marked::before {
    left: 14px;
    font-size: .66rem;
    padding: 4px 11px 5px;
  }

  .section-heading {
    margin-bottom: 18px;
  }

  .image-banner-section {
    gap: 18px;
  }

  .image-banner-section > .image-frame {
    border-radius: 20px;
    padding: 7px;
  }

  .image-banner-section > .image-frame::after {
    inset: 7px;
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(15,19,32,.02), rgba(15,19,32,.52));
  }

  .image-banner-section > .image-frame img {
    height: clamp(180px, 52vw, 250px);
    border-radius: 15px;
  }

  .image-cta {
    left: 18px;
    right: 18px;
    bottom: 18px;
    width: auto;
  }
}