:root {
  --primary: #0d8493;
  --primary-strong: #08636f;
  --secondary: #df5d94;
  --accent: #6fd4d7;
  --page-bg: #f3f7f8;
  --footer-bg: #17313a;
  --footer-soft: #244752;
}

body { background: var(--page-bg); }
.site-header { border-top: 3px solid var(--primary); }
.logo-mark { filter: saturate(1.18) hue-rotate(8deg); }
.page-hero {
  isolation: isolate;
  overflow: hidden;
  border-radius: 28px;
  clip-path: none;
  background: linear-gradient(112deg, var(--footer-bg) 0%, var(--footer-soft) 61%, var(--primary-strong) 100%);
}
.page-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: min(46%, 520px);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--footer-bg) 4%, transparent)), url("../images/sweet-bonanza.webp") center / cover no-repeat;
  opacity: .76;
  mix-blend-mode: screen;
}
.eyebrow { background: color-mix(in srgb, var(--accent) 28%, white); color: var(--primary-strong); }
.content-panel { border-radius: 20px; }
.content-panel:nth-of-type(3n) { border-top: 3px solid var(--secondary); }
.button-primary, .slot-play, .cta-link { background: var(--primary); border-radius: 28px; }
.button-primary:hover, .slot-play:hover, .cta-link:hover { background: var(--primary-strong); }
.slot-card { border-radius: 20px; }
.site-footer { background: var(--footer-bg); }
.footer-badge { background: var(--footer-soft); }
@media (max-width: 680px) {
  .page-hero { border-radius: 0; clip-path: none; }
  .page-hero::after { width: 48%; opacity: .34; }
}

/* Full-template hero variation */
.hero .hero-media { background: url("../images/sweet-bonanza.webp") center / cover no-repeat; }
.hero .hero-media img { opacity: .16; }
.hero .hero-layer { background: linear-gradient(105deg, var(--footer-bg) 2%, color-mix(in srgb, var(--footer-bg) 72%, transparent) 56%, color-mix(in srgb, var(--primary-strong) 45%, transparent) 100%); }