:root {
  color-scheme: dark;
  --bg: #0e1117;
  --panel: #171d28;
  --panel-2: #1d2636;
  --line: #293345;
  --text: #f6f7fa;
  --muted: #abb3c1;
  --hot: #ff6238;
  --hot-2: #ff2f46;
  --green: #16f49a;
  --gold: #ffc85a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: radial-gradient(circle at 58% 12%, #171b24 0 16%, transparent 38%), var(--bg); color: var(--text); line-height: 1.65; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; }
h1,h2,h3,p { overflow-wrap: anywhere; }
h1,h2,h3 { line-height: 1.1; margin: 0 0 .75rem; }
h1 { font-size: clamp(2.3rem, 5.3vw, 5.2rem); letter-spacing: -.055em; }
h2 { font-size: clamp(1.8rem, 3.2vw, 3.25rem); letter-spacing: -.04em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
p { margin: 0 0 1rem; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 999; padding: .8rem 1rem; background: var(--green); color: #08140e; font-weight: 900; border-radius: .5rem; }
.skip-link:focus { top: 1rem; }
.site-header { position: sticky; top: 0; z-index: 100; display: grid; grid-template-columns: 230px 1fr auto; align-items: center; gap: 1rem; min-height: 76px; padding: .65rem 1.25rem; background: rgba(14,17,23,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.brand { color: #fff; font: italic 800 2.8rem/1 Georgia, serif; letter-spacing: -.08em; text-decoration: none; }
.desktop-nav { justify-self: center; display: flex; align-items: center; gap: .3rem; min-width: min(100%, 690px); padding: .3rem; border: 1px solid var(--line); border-radius: .9rem; background: #0b0e14; }
.desktop-nav a { flex: 1; padding: .7rem .8rem; border-radius: .65rem; color: var(--muted); text-align: center; font-size: .9rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.desktop-nav a:hover,.desktop-nav a:focus-visible { background: var(--panel-2); color: #fff; }
.header-cta,.hero-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .8rem 1.25rem; border: 0; border-radius: .85rem; background: linear-gradient(180deg,#23ffad,#08ca78); box-shadow: 0 10px 30px rgba(14,232,140,.22), inset 0 1px rgba(255,255,255,.55); color: #04130d; font-weight: 950; text-decoration: none; text-transform: uppercase; letter-spacing: .01em; }
.header-cta:hover,.hero-cta:hover { transform: translateY(-2px); filter: saturate(1.1) brightness(1.04); }
.mobile-nav { display: none; }
.side-rail { position: fixed; inset: 76px auto 0 0; z-index: 40; display: flex; flex-direction: column; width: 250px; padding: 1rem .8rem 2rem; background: #121720; border-right: 1px solid var(--line); overflow-y: auto; }
.side-rail::before { content: "BEEF MENÜ"; margin: .2rem .6rem .75rem; color: #788295; font-size: .72rem; font-weight: 900; letter-spacing: .13em; }
.side-rail a { margin-bottom: .5rem; padding: .9rem 1rem; border: 1px solid transparent; border-radius: .8rem; background: #171d27; color: #d9dde5; font-weight: 800; text-decoration: none; }
.side-rail a:hover,.side-rail a:focus-visible { border-color: var(--hot); background: #1f2734; color: #fff; }
main,.site-footer { margin-left: 250px; }
main { min-height: 70vh; }
.hero { position: relative; min-height: min(720px, calc(100vh - 76px)); display: grid; align-items: center; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
.hero>img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(7,9,13,.98) 0%,rgba(7,9,13,.88) 34%,rgba(7,9,13,.35) 62%,rgba(7,9,13,.08)), linear-gradient(0deg,rgba(7,9,13,.75),transparent 50%); }
.hero-copy { width: min(760px, 60%); padding: clamp(3rem,7vw,7.5rem) clamp(1.2rem,5vw,5.5rem); }
.hero-copy h1 { font-size: clamp(2.5rem,4vw,4.1rem); }
.hero-copy>p:not(.eyebrow):not(.hero-phrase) { max-width: 62ch; color: #d6d9df; font-size: clamp(1rem,1.4vw,1.22rem); }
.eyebrow { color: var(--hot); font-size: .78rem; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.hero-phrase { display: inline-block; margin-bottom: .9rem; padding: .42rem .7rem; border: 1px solid var(--hot); border-radius: 999px; background: rgba(255,83,51,.12); color: #fff; font-weight: 900; }
.compact-hero { min-height: min(560px, calc(100vh - 76px)); }
.compact-hero .hero-copy { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 821px) {
  .hero-copy { width: min(700px, 66%); padding-top: 2.4rem; padding-bottom: 2.4rem; }
}
.quick-strip { position: sticky; top: 76px; z-index: 30; display: flex; gap: .65rem; padding: .85rem 2rem; background: rgba(16,21,29,.96); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.quick-strip a { flex: 0 0 auto; padding: .7rem 1rem; border-radius: .7rem; background: #20293a; color: #d4d9e2; font-size: .88rem; font-weight: 900; text-decoration: none; }
.quick-strip a:hover { background: #2b3850; color: #fff; }
.category-orbit,.article-shell,.faq-zone,.feature-stage,.reward-stage,.route-cards { width: min(1180px, calc(100% - 3rem)); margin: 0 auto; }
.category-orbit { padding: 5rem 0 2.5rem; }
.section-heading { display: grid; grid-template-columns: 1fr 1.4fr; column-gap: 2rem; align-items: end; margin-bottom: 2rem; }
.section-heading .eyebrow { grid-column: 1/-1; }
.section-heading p:last-child { color: var(--muted); }
.orbit-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: .8rem; }
.orbit-card { position: relative; min-height: 190px; display: flex; flex-direction: column; justify-content: end; padding: 1rem; overflow: hidden; border: 2px solid rgba(255,96,49,.8); border-radius: 1rem; background-image: linear-gradient(0deg,rgba(6,8,12,.96),rgba(6,8,12,.1) 70%),url("/assets/images/games-lobby.webp"); background-size: 400% 200%; text-decoration: none; box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.orbit-card:hover { transform: translateY(-4px); border-color: var(--green); }
.orbit-card span { font-weight: 950; }
.orbit-card small { color: #c7ccd5; }
.temple { background-position: 0 0; }.seven { background-position: 34% 35%; }.candy { background-position: 100% 0; }.bass { background-position: 0 100%; }.vault { background-position: 100% 100%; }.crown { background-position: 70% 100%; }
.feature-stage,.reward-stage { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.3rem; align-items: stretch; padding: 2.5rem 0; }
.feature-stage.reverse { grid-template-columns: .9fr 1.1fr; }
.feature-art,.feature-copy,.reward-stage { border: 1px solid var(--line); border-radius: 1.25rem; overflow: hidden; }
.feature-art img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; }
.feature-copy { padding: clamp(1.4rem,3vw,3rem); background: linear-gradient(145deg,#1b2230,#121720); }
.feature-copy p,.reward-stage p { color: #c1c7d1; }
.text-link { color: var(--green); font-weight: 900; }
.reward-stage { position: relative; grid-template-columns: 1fr 1fr; min-height: 500px; padding: 0; background: var(--panel); }
.reward-stage>img { width: 100%; height: 100%; object-fit: cover; }
.reward-stage>div { padding: clamp(1.5rem,4vw,4rem); align-self: center; }
.article-shell { padding: 5rem 0 2rem; }
.article-intro { margin-bottom: 3.5rem; padding: clamp(1.5rem,4vw,4rem); border: 1px solid var(--line); border-radius: 1.25rem; background-image: linear-gradient(120deg,rgba(20,25,34,.92),rgba(20,25,34,.65)),url("/assets/images/games-lobby.webp"); background-size: cover; background-position: center; }
.lead { max-width: 80ch; color: #d4d8df; font-size: clamp(1.05rem,1.5vw,1.25rem); }
.article-shell>section { padding: 2.2rem 0; border-bottom: 1px solid var(--line); }
.article-shell>section p,.article-shell>section li { color: #c4cad4; }
.article-shell>section>p { max-width: 88ch; }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.split-grid>div { padding: 1.5rem; border-radius: 1rem; background-image: linear-gradient(120deg,rgba(23,29,40,.96),rgba(23,29,40,.8)),url("/assets/images/games-lobby.webp"); background-size: cover; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 1rem; }
table { width: 100%; border-collapse: collapse; background: #151b25; }
th,td { padding: .95rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--gold); background: #1c2432; }
td { min-width: 170px; }
.steps { display: grid; gap: .8rem; margin: 1.2rem 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding: 1.1rem 1.2rem 1.1rem 4rem; border-radius: .9rem; background: #191f2a; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 1rem; top: 1rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: linear-gradient(135deg,var(--hot),var(--hot-2)); color: #fff; font-weight: 950; }
.check-list { display: grid; gap: .75rem; padding: 0; list-style: none; }
.check-list li { position: relative; padding: .8rem 1rem .8rem 2.5rem; border-radius: .7rem; background: #171d27; }
.check-list li::before { content: "✓"; position: absolute; left: .9rem; color: var(--green); font-weight: 900; }
.faq-zone { padding: 3rem 0 5rem; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.faq-grid details { min-height: 160px; padding: 1.2rem; border: 1px solid var(--line); border-radius: 1rem; background-image: linear-gradient(120deg,rgba(24,30,41,.97),rgba(24,30,41,.88)),url("/assets/images/rewards-vault.webp"); background-size: cover; }
.faq-grid details:nth-child(even) { background-image: linear-gradient(120deg,rgba(24,30,41,.97),rgba(24,30,41,.88)),url("/assets/images/safe-access.webp"); }
.faq-grid summary { cursor: pointer; font-weight: 900; }
.faq-grid p { margin-top: .8rem; color: #c5cbd4; }
.closing-cta { position: relative; min-height: 480px; display: grid; place-items: center start; padding: clamp(2rem,6vw,6rem); overflow: hidden; isolation: isolate; border-top: 1px solid var(--line); }
.closing-cta>img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.closing-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(6,8,12,.96),rgba(6,8,12,.58) 62%,rgba(6,8,12,.18)); }
.closing-cta>div { max-width: 700px; }
.secondary-cta { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: .8rem 1.2rem; border: 1px solid #fff; border-radius: .85rem; font-weight: 900; text-decoration: none; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.offer-board { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; }
.offer-main,.offer-side { min-height: 320px; display: flex; flex-direction: column; justify-content: end; padding: 2rem; border: 1px solid var(--line); border-radius: 1.2rem; background-image: linear-gradient(0deg,rgba(8,10,14,.96),rgba(8,10,14,.18)),url("/assets/images/rewards-vault.webp"); background-size: cover; background-position: center; }
.offer-side { background-position: 70% center; }
.offer-main strong,.offer-side strong { font-size: clamp(3rem,7vw,6rem); line-height: .95; color: var(--green); }
.offer-side strong { color: var(--gold); }
.badge { align-self: flex-start; margin-bottom: auto; padding: .35rem .6rem; border-radius: 999px; background: var(--green); color: #07130d; font-size: .75rem; font-weight: 950; text-transform: uppercase; }
.badge.alt { background: var(--hot); color: #fff; }
.problem-grid,.route-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; }
.image-card { min-height: 250px; padding: 1.2rem; display: flex; flex-direction: column; justify-content: end; border: 1px solid var(--line); border-radius: 1rem; background-image: linear-gradient(0deg,rgba(7,9,13,.97),rgba(7,9,13,.15)),url("/assets/images/safe-access.webp"); background-size: 250% auto; text-decoration: none; }
.image-card.key { background-position: 55% center; }.image-card.shield { background-position: 70% center; }.image-card.crown { background-position: 85% center; }.image-card.gift { background-image: linear-gradient(0deg,rgba(7,9,13,.97),rgba(7,9,13,.15)),url("/assets/images/rewards-vault.webp"); }
.safety-callout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; }
.safety-callout img { height: 100%; min-height: 360px; object-fit: cover; border-radius: 1rem; }
.route-cards { padding: 4rem 0; grid-template-columns: repeat(3,1fr); }
.site-footer { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2rem; padding: 3.5rem clamp(1.5rem,5vw,5rem); background: #0a0d12; border-top: 1px solid var(--line); }
.site-footer nav { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; }
.site-footer nav a { color: #c8ced8; }
.footer-note { grid-column: 1/-1; max-width: 100ch; margin: 1rem 0 0; color: #858e9e; font-size: .86rem; }
.footer-brand { display: inline-block; margin-bottom: 1rem; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { a,.orbit-card { transition: transform .18s ease,background .18s ease,border-color .18s ease,filter .18s ease; } }
@media (max-width: 1120px) {
  .site-header { grid-template-columns: 190px 1fr auto; }
  .desktop-nav a:nth-child(4),.desktop-nav a:nth-child(5) { display: none; }
  .orbit-grid { grid-template-columns: repeat(3,1fr); }
  .problem-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 820px) {
  .site-header { grid-template-columns: 1fr auto auto; min-height: 68px; padding: .55rem .8rem; }
  .brand { font-size: 2.3rem; }
  .desktop-nav,.side-rail { display: none; }
  .mobile-nav { position: relative; display: block; order: 3; }
  .mobile-nav summary { padding: .65rem .8rem; border: 1px solid var(--line); border-radius: .65rem; background: #191f2a; cursor: pointer; font-weight: 900; list-style: none; }
  .mobile-nav nav { position: absolute; right: 0; top: calc(100% + .5rem); display: grid; min-width: 210px; padding: .6rem; border: 1px solid var(--line); border-radius: .8rem; background: #151b25; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
  .mobile-nav nav a { padding: .75rem; border-radius: .5rem; text-decoration: none; }
  .header-cta { min-height: 46px; padding: .65rem .8rem; font-size: .78rem; }
  main,.site-footer { margin-left: 0; }
  .hero { min-height: 690px; align-items: end; }
  .hero>img { object-position: 65% center; }
  .hero::after { background: linear-gradient(0deg,rgba(7,9,13,.99) 0%,rgba(7,9,13,.82) 55%,rgba(7,9,13,.22)); }
  .hero-copy { width: 100%; padding: 2rem 1rem 2.2rem; }
  .hero-copy h1 { font-size: clamp(2.15rem,10vw,3.5rem); }
  .hero-copy>p:not(.eyebrow):not(.hero-phrase) { font-size: .98rem; }
  .compact-hero { min-height: 620px; }
  .quick-strip { top: 68px; padding: .65rem .8rem; }
  .category-orbit,.article-shell,.faq-zone,.feature-stage,.reward-stage,.route-cards { width: min(100% - 2rem, 1180px); }
  .section-heading,.feature-stage,.feature-stage.reverse,.reward-stage,.split-grid,.offer-board,.safety-callout { grid-template-columns: 1fr; }
  .section-heading { align-items: start; }
  .orbit-grid { grid-template-columns: repeat(2,1fr); }
  .orbit-card { min-height: 180px; }
  .feature-art img { min-height: 300px; }
  .reward-stage>img { max-height: 420px; width: 100%; object-fit: cover; }
  .article-shell { padding-top: 3rem; }
  .article-intro { padding: 1.4rem; }
  .faq-grid,.route-cards { grid-template-columns: 1fr; }
  .problem-grid { grid-template-columns: 1fr 1fr; }
  .closing-cta { min-height: 520px; align-items: end; padding: 2rem 1rem; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-note { grid-column: auto; }
}
@media (max-width: 430px) {
  .site-header { gap: .45rem; }
  .brand { font-size: 2rem; }
  .header-cta { max-width: 128px; font-size: .68rem; }
  .mobile-nav summary { font-size: .72rem; }
  .hero { min-height: 700px; }
  .hero-cta,.secondary-cta { width: 100%; }
  .orbit-grid,.problem-grid { grid-template-columns: 1fr; }
  .orbit-card { min-height: 220px; }
  .site-footer nav { grid-template-columns: 1fr; }
  th,td { padding: .8rem; }
}