:root {
  color-scheme: light;
  --green: #007a50;
  --green-deep: #004d36;
  --green-soft: #e8f5ef;
  --yellow: #ffd229;
  --yellow-deep: #e9b800;
  --ink: #16211d;
  --muted: #5e6b66;
  --paper: #fff;
  --line: #dbe5e0;
  --shadow: 0 16px 45px rgba(0, 62, 42, .13);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body { margin: 0; background: var(--paper); color: var(--ink); line-height: 1.58; }
a { color: inherit; }
img { max-width: 100%; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 76px;
  padding: .75rem clamp(1rem, 4vw, 4.5rem);
  background: var(--green);
  border-bottom: 3px solid var(--yellow);
  box-shadow: 0 5px 18px rgba(0, 40, 28, .2);
}

.brand {
  position: relative;
  color: #fff;
  font-size: clamp(1.9rem, 3vw, 2.65rem);
  font-weight: 900;
  letter-spacing: -.09em;
  line-height: 1;
  text-decoration: none;
}

.brand::before {
  content: "";
  position: absolute;
  inset: 50% auto auto -.35rem;
  width: 1.08em;
  aspect-ratio: 1;
  border: .15em solid #fff;
  border-right-color: transparent;
  border-radius: 50%;
  transform: translateY(-50%);
  opacity: .35;
}

.header-cta, .hero-cta, .panel-cta {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: .78rem 1.35rem;
  border: 2px solid var(--yellow);
  border-radius: .35rem;
  background: var(--yellow);
  color: #111c16;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(70, 55, 0, .17);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.header-cta:hover, .hero-cta:hover, .panel-cta:hover,
.header-cta:focus-visible, .hero-cta:focus-visible, .panel-cta:focus-visible {
  background: #ffe26c;
  box-shadow: 0 12px 26px rgba(70, 55, 0, .24);
  transform: translateY(-2px);
}

:focus-visible { outline: 3px solid #ffb800; outline-offset: 3px; }

.product-nav {
  display: flex;
  gap: clamp(.55rem, 2vw, 1.8rem);
  overflow-x: auto;
  padding: .75rem clamp(1rem, 4vw, 4.5rem);
  background: var(--green-deep);
  color: #fff;
  scrollbar-width: none;
}
.product-nav::-webkit-scrollbar { display: none; }

.product-nav a { flex: 0 0 auto; padding: .35rem .1rem; font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent; }
.product-nav a:hover, .product-nav a[aria-current="page"] { color: var(--yellow); border-bottom-color: var(--yellow); }

.hero {
  display: flex;
  align-items: center;
  min-height: 540px;
  padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 5vw, 6rem);
  background-color: var(--yellow);
  background-position: center;
  background-size: cover;
}

.hero-home {
  background-image: linear-gradient(90deg, rgba(0, 86, 57, .04) 30%, rgba(255, 210, 41, .12) 48%, rgba(255, 210, 41, .96) 82%), url("/assets/images/qbet-hero.jpg");
}

.hero-copy { width: min(46%, 670px); margin-left: auto; }
.eyebrow, .kicker { margin: 0 0 .55rem; color: var(--green); font-size: .82rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { max-width: 15ch; margin: 0; color: var(--green-deep); font-size: clamp(2.3rem, 5vw, 4.7rem); line-height: .98; letter-spacing: -.055em; }
.hero-lead { max-width: 61ch; margin: 1.2rem 0; font-size: clamp(1rem, 1.4vw, 1.22rem); }
.hero-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.4rem; }
.secondary-cta { display: inline-flex; min-height: 50px; align-items: center; padding: .75rem 1.2rem; border: 2px solid currentColor; border-radius: .35rem; font-weight: 800; text-decoration: none; }
.hero-note { max-width: 48ch; margin: .9rem 0 0; font-size: .82rem; color: #375248; }

.quick-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #c9d8d1;
  border-bottom: 1px solid var(--line);
}

.quick-categories a { display: grid; grid-template-columns: auto 1fr; gap: 0 .7rem; align-items: center; min-height: 84px; padding: 1rem clamp(.8rem, 2vw, 2rem); background: #fff; text-decoration: none; }
.quick-categories span { grid-row: 1 / 3; color: var(--green); font-size: 1.65rem; }
.quick-categories strong { font-size: 1.05rem; }
.quick-categories small { color: var(--muted); }
.quick-categories a:hover { background: var(--green-soft); }

.section-shell { width: min(1500px, calc(100% - 2rem)); margin-inline: auto; }
.catalogue { padding-block: clamp(3rem, 6vw, 6rem); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; }
.section-heading h2, .guide h2, .terms-copy h2, .safe-copy h2 { max-width: 19ch; margin: 0; color: var(--green-deep); font-size: clamp(2rem, 4vw, 3.55rem); line-height: 1.03; letter-spacing: -.045em; }
.section-intro { max-width: 88ch; margin: 0 0 2rem; color: var(--muted); }
.category-tabs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.category-tabs a { padding: .55rem .8rem; border: 1px solid #b8cec4; border-radius: 99px; color: var(--green-deep); font-size: .88rem; font-weight: 750; text-decoration: none; }
.category-tabs a:hover { background: var(--green); color: #fff; }

.rail-block + .rail-block { margin-top: 3rem; }
.rail-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.rail-title h3 { margin: 0; color: var(--green); font-size: 1.45rem; }
.rail-title span { color: var(--muted); font-size: .85rem; }
.game-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(195px, 1fr); gap: 1.1rem; overflow-x: auto; padding: .2rem .1rem 1rem; scroll-snap-type: x mandatory; scrollbar-color: var(--green) #e8efe9; }
.game-card { min-width: 0; scroll-snap-align: start; }
.game-card h3 { margin: .68rem 0 .05rem; font-size: 1rem; }
.game-card p { margin: 0; color: var(--muted); font-size: .84rem; }
.game-art { position: relative; aspect-ratio: 1.08; overflow: hidden; border-radius: .25rem; background-color: #032e22; background-repeat: no-repeat; box-shadow: 0 8px 20px rgba(0, 45, 31, .16); }
.slot-art { background-image: url("/assets/images/qbet-slots-atlas.jpg"); background-size: 400% 300%; }
.s1 { background-position: 0 0; } .s2 { background-position: 33.333% 0; } .s3 { background-position: 66.667% 0; } .s4 { background-position: 100% 0; }
.s5 { background-position: 0 50%; } .s6 { background-position: 33.333% 50%; } .s7 { background-position: 66.667% 50%; } .s8 { background-position: 100% 50%; }
.s9 { background-position: 0 100%; } .s10 { background-position: 33.333% 100%; } .s11 { background-position: 66.667% 100%; } .s12 { background-position: 100% 100%; }
.game-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: linear-gradient(160deg, rgba(0, 72, 48, .75), rgba(0, 28, 20, .92));
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease;
}
.game-overlay span { display: block; margin-top: .35rem; color: var(--yellow); font-size: .77rem; }
.game-art:hover .game-overlay, .game-art:focus-within .game-overlay { opacity: 1; transform: translateY(0); }

.story { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .65fr); gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(3rem, 6vw, 6rem); border-top: 1px solid var(--line); }
.story-copy h2 { margin: 0 0 1.4rem; color: var(--green-deep); font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.03; letter-spacing: -.045em; }
.story-copy p { max-width: 80ch; }
.facts-panel { align-self: start; padding: 1.6rem; border-radius: .6rem; background: var(--green-deep); color: #fff; box-shadow: var(--shadow); }
.facts-panel h3 { margin-top: 0; color: var(--yellow); font-size: 1.45rem; }
.facts-panel dl { margin: 0 0 1.4rem; }
.facts-panel dl div { display: grid; grid-template-columns: 7rem 1fr; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.facts-panel dt { font-weight: 850; }
.facts-panel dd { margin: 0; color: #d9eee5; }

.live-section { background: #f3f7f5; }
.live-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.live-art { aspect-ratio: 1.45; background-image: url("/assets/images/qbet-live-atlas.jpg"); background-size: 300% 200%; }
.l1 { background-position: 0 0; } .l2 { background-position: 50% 0; } .l3 { background-position: 100% 0; }
.l4 { background-position: 0 100%; } .l5 { background-position: 50% 100%; } .l6 { background-position: 100% 100%; }
.text-link { color: var(--green); font-weight: 800; text-decoration: none; }

.sports-section { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); padding: clamp(3rem, 7vw, 7rem) clamp(1rem, 6vw, 7rem); background: var(--green-deep); color: #fff; }
.sports-copy h2 { margin: 0; color: var(--yellow); font-size: clamp(2.3rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.05em; }
.sports-copy .kicker { color: #a7e4ca; }
.sports-copy .hero-cta { margin-top: 1rem; }
.sports-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sports-cards article { display: flex; min-height: 330px; flex-direction: column; justify-content: end; padding: 1.2rem; border: 1px solid rgba(255,255,255,.22); border-radius: .5rem; background-image: linear-gradient(to top, rgba(0, 35, 25, .95), rgba(0, 67, 45, .08)), url("/assets/images/qbet-hero.jpg"); background-size: auto 100%; box-shadow: 0 18px 35px rgba(0,0,0,.22); }
.sports-cards article:nth-child(1) { background-position: 78% center; } .sports-cards article:nth-child(2) { background-position: 10% center; } .sports-cards article:nth-child(3) { background-position: 48% center; }
.sports-cards span { color: var(--yellow); font-weight: 900; }
.sports-cards h3 { margin: .3rem 0; font-size: 1.55rem; }
.sports-cards p { margin: 0; color: #d0e8df; }

.benefits { margin-block: clamp(3rem, 7vw, 7rem); padding: clamp(2rem, 5vw, 4.5rem); border-radius: .7rem; background-image: linear-gradient(90deg, rgba(0, 70, 47, .92), rgba(255, 210, 41, .22)), url("/assets/images/qbet-benefits.jpg"); background-size: cover; background-position: center; box-shadow: var(--shadow); }
.light-heading h2, .light-heading .kicker { color: #fff; }
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.benefit { min-height: 250px; padding: 1.15rem; border-radius: .45rem; background-color: rgba(255,255,255,.92); background-image: linear-gradient(to bottom, rgba(255,255,255,.18), rgba(255,255,255,.94) 54%), url("/assets/images/qbet-benefits.jpg"); background-size: 400% 100%; box-shadow: 0 10px 26px rgba(0, 56, 38, .16); }
.b1 { background-position: 0 0; } .b2 { background-position: 33.333% 0; } .b3 { background-position: 66.667% 0; } .b4 { background-position: 100% 0; }
.benefit h3 { margin: 6.8rem 0 .4rem; color: var(--green-deep); }
.benefit p { margin: 0; font-size: .9rem; }

.guide { padding-block: clamp(3rem, 6vw, 6rem); }
.article-header { margin-bottom: 2rem; }
.article-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6rem); }
.article-columns h3 { margin: 2rem 0 .35rem; color: var(--green); font-size: 1.25rem; }
.article-columns p { margin-top: 0; }
.article-columns a { color: var(--green); font-weight: 750; }
.deep-guide { padding-block: clamp(3rem, 6vw, 6rem); border-top: 1px solid var(--line); }
.deep-guide .article-header { max-width: 980px; }
.deep-guide .article-header h2 { max-width: 22ch; margin: 0; color: var(--green-deep); font-size: clamp(2rem, 4vw, 3.55rem); line-height: 1.03; letter-spacing: -.045em; }
.deep-guide .article-header > p:last-child { max-width: 78ch; font-size: 1.08rem; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.detail-grid section { padding: clamp(1.2rem, 2.2vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.detail-grid h3 { margin: 0 0 .75rem; color: var(--green); font-size: 1.3rem; }
.detail-grid p { margin: .7rem 0 0; }
.detail-grid a { color: var(--green); font-weight: 750; }

.faq { padding-block: clamp(3rem, 6vw, 6rem); }
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.faq details { min-height: 110px; padding: 1.25rem; border: 1px solid #c9dbd2; border-radius: .5rem; background-image: linear-gradient(90deg, rgba(255,255,255,.97), rgba(232,245,239,.90)), url("/assets/images/qbet-benefits.jpg"); background-size: cover; }
.faq summary { cursor: pointer; color: var(--green-deep); font-weight: 850; }
.faq details p { margin-bottom: 0; }

.closing-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(2.2rem, 5vw, 4rem) clamp(1rem, 6vw, 7rem); background-image: linear-gradient(90deg, rgba(0, 74, 49, .96), rgba(0, 74, 49, .7)), url("/assets/images/qbet-hero.jpg"); background-size: cover; background-position: center 56%; color: #fff; }
.closing-cta h2 { max-width: 23ch; margin: 0; color: #fff; font-size: clamp(1.8rem, 3.6vw, 3.2rem); line-height: 1.04; }
.closing-cta .kicker { color: var(--yellow); }
.closing-cta p:not(.kicker) { margin-bottom: 0; color: #d8ece4; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; padding: 1.4rem 1rem; background: #17201c; color: #fff; }
.footer-links a { font-weight: 700; text-decoration: none; }
.footer-links a:hover { color: var(--yellow); }
footer { display: flex; justify-content: center; padding: 1rem; background: #101713; color: #91a29a; font-size: .85rem; }
footer a { text-decoration: none; }

.hero-sub { min-height: 470px; }
.hero-sub .hero-copy { width: min(58%, 760px); margin-left: 0; padding: clamp(1.2rem, 3vw, 2.3rem); border-radius: .65rem; background: rgba(0, 74, 50, .90); color: #fff; box-shadow: var(--shadow); }
.hero-sub h1 { color: #fff; }
.hero-sub .eyebrow { color: var(--yellow); }
.hero-sub .hero-note { color: #d8ece4; }
.hero-bonus { background-image: linear-gradient(90deg, rgba(255, 210, 41, .24), rgba(255, 210, 41, .06)), url("/assets/images/qbet-benefits.jpg"); }
.hero-safe { background-image: linear-gradient(90deg, rgba(0, 85, 56, .18), rgba(255, 210, 41, .13)), url("/assets/images/qbet-benefits.jpg"); background-position: center; }
.hero-sub .secondary-cta { color: #fff; }

.bonus-lanes, .status-section { padding-block: clamp(3rem, 6vw, 6rem); }
.lane-grid, .status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.lane, .status-card { min-height: 330px; padding: 1.4rem; border-radius: .55rem; color: #fff; background-image: linear-gradient(to top, rgba(0, 46, 31, .96), rgba(0, 81, 54, .26)), url("/assets/images/qbet-slots-atlas.jpg"); background-size: cover; box-shadow: var(--shadow); }
.lane-slots { background-position: 0 0; } .lane-live { background-image: linear-gradient(to top, rgba(0, 46, 31, .96), rgba(0, 81, 54, .25)), url("/assets/images/qbet-live-atlas.jpg"); background-position: 50% center; } .lane-sport { background-image: linear-gradient(to top, rgba(0, 46, 31, .96), rgba(0, 81, 54, .22)), url("/assets/images/qbet-hero.jpg"); background-position: 18% center; }
.lane { display: flex; flex-direction: column; justify-content: end; }
.lane span, .status-card span { color: var(--yellow); font-weight: 900; }
.lane h3, .status-card h3 { margin: .35rem 0; font-size: 1.55rem; }
.lane p { margin-top: .2rem; }
.lane a, .status-card a { margin-top: auto; color: var(--yellow); font-weight: 850; }

.terms-check, .safe-steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 620px; background: var(--green-soft); }
.terms-visual, .safe-image { min-height: 420px; background: url("/assets/images/qbet-benefits.jpg") center/cover no-repeat; }
.terms-copy, .safe-copy { align-self: center; padding: clamp(2rem, 6vw, 6rem); }
.checklist, .safe-copy ol { padding-left: 1.4rem; }
.checklist li, .safe-copy li { margin: .85rem 0; padding-left: .3rem; }
.terms-copy .hero-cta { margin-top: 1rem; }

.status-card { background-image: linear-gradient(to bottom, rgba(0, 79, 53, .83), rgba(0, 44, 31, .97)), url("/assets/images/qbet-benefits.jpg"); background-size: cover; }
.status-card p { color: #e0f0ea; }
.status-curacao { background-position: 5% center; } .status-ggl { background-position: 37% center; } .status-geo { background-position: 70% center; }

.hero-404 { min-height: calc(100vh - 76px); background-image: linear-gradient(90deg, rgba(0, 74, 50, .15), rgba(255, 210, 41, .9)), url("/assets/images/qbet-hero.jpg"); }

@media (hover: none) {
  .game-overlay { inset: auto 0 0; min-height: 43%; opacity: 1; transform: none; font-size: .82rem; }
}

@media (max-width: 980px) {
  .quick-categories { grid-template-columns: repeat(2, 1fr); }
  .story, .sports-section, .terms-check, .safe-steps { grid-template-columns: 1fr; }
  .facts-panel { position: static; }
  .live-grid, .lane-grid, .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sports-cards { grid-template-columns: repeat(3, minmax(150px, 1fr)); overflow-x: auto; }
  .sports-cards article { min-height: 280px; }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .terms-visual, .safe-image { order: -1; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 94px; }
  .site-header { min-height: 68px; padding-inline: .85rem; }
  .brand { font-size: 2rem; }
  .header-cta { min-height: 46px; padding: .65rem .85rem; font-size: .88rem; }
  .product-nav { padding-inline: 1rem; }
  .hero { min-height: 650px; align-items: end; padding: 2rem 1rem; }
  .hero-home { background-image: linear-gradient(to bottom, rgba(0, 74, 50, .04) 20%, rgba(0, 74, 50, .98) 67%), url("/assets/images/qbet-hero.jpg"); background-position: 35% center; }
  .hero-copy, .hero-sub .hero-copy { width: 100%; margin: 0; padding: 0; background: transparent; box-shadow: none; color: #fff; }
  .hero h1 { max-width: 13ch; color: #fff; font-size: clamp(2.35rem, 12vw, 4rem); }
  .hero .eyebrow { color: var(--yellow); }
  .hero-note { color: #d4e9df; }
  .secondary-cta { color: #fff; }
  .quick-categories { grid-template-columns: 1fr 1fr; }
  .quick-categories a { min-height: 76px; padding: .8rem; }
  .quick-categories small { font-size: .72rem; }
  .section-shell { width: min(100% - 1.25rem, 1500px); }
  .section-heading, .rail-title { align-items: start; flex-direction: column; }
  .category-tabs { justify-content: start; }
  .game-rail { grid-auto-columns: minmax(168px, 74vw); }
  .story { gap: 1rem; }
  .live-grid, .lane-grid, .status-grid, .faq-grid, .article-columns, .detail-grid { grid-template-columns: 1fr; }
  .live-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 78vw); grid-template-columns: none; overflow-x: auto; padding-bottom: 1rem; }
  .sports-section { padding-inline: 1rem; }
  .sports-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74vw; }
  .benefits { width: calc(100% - 1rem); padding: 1rem; }
  .benefit-grid { grid-template-columns: 1fr 1fr; }
  .benefit { min-height: 220px; padding: .85rem; }
  .benefit h3 { margin-top: 5.6rem; font-size: 1rem; }
  .benefit p { font-size: .78rem; }
  .closing-cta { align-items: flex-start; flex-direction: column; padding-inline: 1rem; }
  .closing-cta .hero-cta { width: 100%; }
  .hero-sub { min-height: 610px; background-image: linear-gradient(to bottom, rgba(0, 74, 50, .08) 20%, rgba(0, 74, 50, .97) 64%), url("/assets/images/qbet-benefits.jpg"); }
  .hero-404 { background-image: linear-gradient(to bottom, rgba(0, 74, 50, .08) 20%, rgba(0, 74, 50, .97) 68%), url("/assets/images/qbet-hero.jpg"); background-position: 35% center; }
}

@media (max-width: 420px) {
  .quick-categories { grid-template-columns: 1fr; }
  .benefit-grid { grid-template-columns: 1fr; }
  .benefit { min-height: 205px; }
  .hero-actions > * { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}