:root {
  --bg: #070a0e;
  --bg-2: #0f151b;
  --surface: #121a21;
  --surface-2: #18232b;
  --paper: #f2f4ef;
  --paper-2: #e7ebe3;
  --ink: #101519;
  --text: #f5f8f6;
  --muted: #aab6be;
  --muted-dark: #4f5b61;
  --line: #2a3740;
  --lime: #b9ef27;
  --cyan: #5ce7f4;
  --magenta: #ff63ca;
  --violet: #9e8dff;
  --container: 1180px;
  --radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.62 Arial, Helvetica, sans-serif; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
.container { width: min(var(--container), calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: -70px; left: 18px; padding: 10px 14px; background: var(--lime); color: var(--ink); font-weight: 800; }
.skip-link:focus { top: 18px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.04; letter-spacing: -.045em; }
h1 { max-width: 650px; margin-bottom: 24px; font-size: clamp(2.8rem, 5.2vw, 5.2rem); letter-spacing: -.07em; }
h2 { margin-bottom: 17px; font-size: clamp(2rem, 3.6vw, 3.5rem); }
h3 { margin-bottom: 9px; font-size: 1.2rem; }

.site-header { position: absolute; z-index: 20; top: 0; right: 0; left: 0; border-bottom: 1px solid rgba(255,255,255,.14); background: rgba(5,8,11,.78); backdrop-filter: blur(14px); }
.header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo { width: 220px; height: 52px; object-fit: contain; object-position: left center; }
.main-nav, .footer-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; font-size: 13px; }
.main-nav a, .footer-nav a { color: #c4ced2; text-decoration: none; }
.main-nav a:hover, .footer-nav a:hover, .footer-columns a:hover { color: var(--lime); }
.nav-cta { color: var(--lime) !important; font-weight: 800; }

.hero-neon { position: relative; min-height: 760px; overflow: hidden; background: var(--bg); }
.hero-neon-image, .hero-neon-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-neon-image { object-fit: cover; object-position: center; }
.hero-neon-overlay { background: linear-gradient(90deg, rgba(5,8,11,.97) 0%, rgba(5,8,11,.88) 34%, rgba(5,8,11,.39) 68%, rgba(5,8,11,.72) 100%), linear-gradient(0deg, rgba(5,8,11,.94) 0%, transparent 40%); }
.hero-neon-inner { position: relative; z-index: 1; min-height: 690px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .72fr); gap: 70px; align-items: center; padding-top: 104px; }
.hero-copy { max-width: 680px; }
.eyebrow { margin-bottom: 17px; color: var(--lime); font-size: 11px; font-weight: 900; letter-spacing: .19em; text-transform: uppercase; }
.hero-copy > p:not(.eyebrow) { max-width: 670px; margin-bottom: 15px; color: #d5e0e1; font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 27px; }
.button, .rank-button, .cookie-actions button, .catfish a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; padding: 12px 18px; font-size: 13px; font-weight: 850; text-decoration: none; cursor: pointer; }
.button-lime { color: var(--ink); background: var(--lime); box-shadow: 0 15px 34px rgba(185,239,39,.18); }
.button-lime:hover, .rank-button:hover, .catfish a:hover { background: #d5ff4a; }
.button-glass { border-color: rgba(255,255,255,.44); color: #fff; background: rgba(255,255,255,.05); }
.button-glass:hover { border-color: var(--cyan); color: var(--cyan); }
.hero-stats { display: flex; gap: 0; margin-top: 35px; border-top: 1px solid rgba(255,255,255,.24); }
.hero-stats span { display: grid; gap: 2px; min-width: 118px; padding: 14px 18px 0 0; }
.hero-stats b { color: var(--cyan); font-size: 19px; }
.hero-stats small { color: #aab9bc; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.hero-console { position: relative; justify-self: end; width: min(390px, 100%); padding: 14px; border: 1px solid rgba(92,231,244,.5); background: rgba(8,13,16,.64); box-shadow: 18px 22px 0 rgba(185,239,39,.12); transform: rotate(2deg); }
.console-top, .console-readout { display: flex; justify-content: space-between; gap: 16px; color: #a9bac1; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.console-top b { color: var(--lime); }
.console-screen { min-height: 280px; display: flex; flex-direction: column; justify-content: end; margin: 15px 0; padding: 26px; border: 1px solid #334951; background: radial-gradient(circle at 80% 18%, rgba(255,99,202,.28), transparent 28%), linear-gradient(145deg, #172b31, #0a1115 68%); }
.screen-dot { width: 12px; height: 12px; margin-bottom: auto; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 22px var(--magenta); }
.console-screen strong { max-width: 210px; margin-bottom: 8px; color: #fff; font-size: 28px; line-height: 1.02; letter-spacing: -.04em; }
.console-screen p { max-width: 210px; margin-bottom: 18px; color: #bdd0d1; font-size: 13px; }
.signal-bars { display: flex; align-items: end; gap: 5px; height: 42px; }
.signal-bars i { display: block; width: 17px; background: var(--cyan); }
.signal-bars i:nth-child(1) { height: 15px; opacity: .45; }.signal-bars i:nth-child(2) { height: 25px; opacity: .6; }.signal-bars i:nth-child(3) { height: 35px; opacity: .76; }.signal-bars i:nth-child(4) { height: 24px; opacity: .88; }.signal-bars i:nth-child(5) { height: 42px; background: var(--lime); }
.console-readout b { color: #fff; letter-spacing: .03em; }

.section { padding: 86px 0; }
.section-heading { width: 100%; max-width: 1060px; margin-bottom: 38px; }
.section-heading p { width: 100%; max-width: 1040px; margin-bottom: 0; color: var(--muted); font-size: 17px; }
.section-close { width: 100%; margin: 31px 0 0; padding: 13px 0 0 18px; border-left: 3px solid var(--lime); color: var(--muted); }
.section-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--lime); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.section-kicker > span:first-child { color: var(--cyan); }
.section-kicker .kicker-line { width: 38px; height: 2px; background: currentColor; }
.section-kicker small { margin-left: auto; color: #87939b; font-size: 9px; letter-spacing: .12em; }
.section-kicker.dark { color: var(--ink); }.section-kicker.dark > span:first-child { color: #587074; }

.ranking-section { color: var(--text); background: var(--bg-2); }
.rank-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rank-card { min-width: 0; min-height: 405px; display: flex; flex-direction: column; padding: 17px; border: 1px solid var(--line); border-top: 3px solid var(--cyan); background: linear-gradient(160deg, #18242c, #0d151c); }
.rank-card:nth-child(4n + 1) { border-top-color: var(--lime); }.rank-card:nth-child(4n + 3) { border-top-color: var(--magenta); }.rank-card:nth-child(4n) { border-top-color: var(--violet); }
.rank-card.tone-lime { background: linear-gradient(155deg, #1b2929, #111b20); }.rank-card.tone-magenta { background: linear-gradient(155deg, #28202c, #11151c); }.rank-card.tone-violet { background: linear-gradient(155deg, #20223a, #10161d); }
.rank-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rank-number { color: var(--lime); font-size: 18px; font-weight: 900; }.rank-angle { color: #a9b9be; font-size: 9px; text-align: right; text-transform: uppercase; letter-spacing: .08em; }
.rank-brand { display: flex; align-items: center; gap: 10px; margin: 24px 0 17px; }
.rank-brand img { width: 62px; height: 52px; padding: 5px; border-radius: 8px; object-fit: contain; background: #fff; }
.rank-brand h3 { margin: 0; color: #fff; font-size: 1.25rem; }.rank-brand small { color: #8ea1a8; font-size: 10px; }
.rank-offer { display: grid; gap: 4px; padding: 14px; border-left: 3px solid var(--cyan); background: #152832; }.tone-lime .rank-offer { border-left-color: var(--lime); }.tone-magenta .rank-offer { border-left-color: var(--magenta); }.tone-violet .rank-offer { border-left-color: var(--violet); }
.rank-offer span, .rank-meta span { color: #8ca6ad; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }.rank-offer strong { color: #f5f8f6; font-size: 13px; line-height: 1.4; }
.rank-meta { display: grid; grid-template-columns: .55fr 1.45fr; gap: 12px; margin: 15px 0; }.rank-meta b { display: block; margin-top: 3px; color: #d1dde0; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.rank-button { width: 100%; margin-top: auto; color: var(--ink); background: var(--lime); }

.signal-section { color: var(--ink); background: var(--paper); }
.signal-section .section-close { color: var(--muted-dark); }
.signal-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(340px, 1.15fr); gap: 70px; align-items: start; }
.signal-layout p { max-width: 650px; color: var(--muted-dark); font-size: 17px; }
.signal-panel { border-top: 1px solid #1d272d; }
.signal-row { display: grid; grid-template-columns: .7fr 1.45fr .45fr; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid #c8d0c9; }.signal-row span { color: #68777b; font-size: 10px; font-weight: 900; letter-spacing: .12em; }.signal-row strong { font-size: 16px; }.signal-row b { color: #0b8b83; font-size: 11px; text-align: right; letter-spacing: .1em; }

.paper-section { color: var(--ink); background: var(--paper-2); }.paper-section .section-heading p { color: var(--muted-dark); }.paper-section .section-close { color: var(--muted-dark); }
.table-shell { overflow-x: auto; border: 1px solid #cbd4cb; background: #f8faf6; }
table { width: 100%; min-width: 1040px; border-collapse: collapse; text-align: left; }.comparison-table th, .comparison-table td { padding: 14px 15px; border-bottom: 1px solid #d3dbd3; vertical-align: top; }.comparison-table thead th { color: #eaf7ef; background: #111a20; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }.comparison-table tbody th { color: #117e7b; font-size: 14px; }.comparison-table tbody td { color: #596569; font-size: 13px; }.comparison-table tbody tr:nth-child(even) { background: #edf2ed; }.comparison-table tbody tr:last-child th, .comparison-table tbody tr:last-child td { border-bottom: 0; }

.reels-section { color: var(--text); background: #0b1116; }.reels-section .section-heading p { color: #b2c0c4; }.reels-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 20px; }.reels-image { position: relative; min-height: 430px; overflow: hidden; border: 1px solid #394c55; border-radius: var(--radius); }.reels-image img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; }.image-label { position: absolute; right: 17px; bottom: 17px; left: 17px; padding: 16px 18px; border-left: 3px solid var(--cyan); background: rgba(5,8,11,.86); }.image-label span, .games-visual > div span { display: block; margin-bottom: 6px; color: var(--lime); font-size: 10px; font-weight: 900; letter-spacing: .15em; }.image-label strong, .games-visual > div strong { color: #fff; font-size: 18px; }
.reels-notes { display: grid; gap: 10px; }.reels-notes article { padding: 20px; border: 1px solid #2b3b43; background: #121d24; }.reels-notes article > span { color: var(--magenta); font-size: 11px; font-weight: 900; }.reels-notes h3 { color: #fff; }.reels-notes p { margin-bottom: 0; color: #b5c3c7; font-size: 14px; }

.bonus-section { color: var(--ink); background: linear-gradient(135deg, #d8f35c, #b9ef27 47%, #75d8c3); }.bonus-section .section-heading p, .bonus-header > p { color: #334641; }.bonus-header { display: grid; grid-template-columns: .95fr 1.05fr; gap: 80px; align-items: end; margin-bottom: 35px; }.bonus-header > p { margin: 0; font-size: 17px; }.bonus-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }.bonus-grid article { min-height: 230px; padding: 19px; border: 1px solid rgba(11,26,24,.3); background: rgba(255,255,255,.33); }.bonus-grid article:nth-child(2) { background: rgba(12,103,103,.1); }.bonus-grid article:nth-child(3) { background: rgba(130,79,204,.12); }.bonus-grid article:nth-child(4) { background: rgba(255,255,255,.5); }.bonus-grid article > span { color: #33615b; font-size: 12px; font-weight: 900; }.bonus-grid h3 { margin-top: 44px; }.bonus-grid p { margin-bottom: 0; color: #334641; font-size: 14px; }.bonus-section .section-close { border-color: #192a2b; color: #334641; }

.games-section { color: var(--ink); background: var(--paper); }.games-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr); gap: 60px; align-items: center; }.games-section .section-kicker { color: #087d77; }.games-section .section-kicker > span:first-child { color: #a568e7; }.games-section p { color: var(--muted-dark); font-size: 17px; }.game-list { margin: 25px 0 0; padding: 0; list-style: none; border-top: 1px solid #cdd5ce; }.game-list li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid #cdd5ce; }.game-index { color: #a568e7; font-size: 12px; font-weight: 900; }.game-list strong { display: block; margin-bottom: 3px; color: var(--ink); }.game-list li div span { display: block; color: #6b787a; font-size: 13px; }.games-visual { position: relative; min-height: 450px; overflow: hidden; border-radius: var(--radius); background: #0f171c; }.games-visual img { width: 100%; height: 100%; min-height: 450px; object-fit: cover; }.games-visual > div { position: absolute; right: 16px; bottom: 16px; left: 16px; padding: 15px 17px; border-left: 3px solid var(--magenta); background: rgba(5,8,11,.85); }

.mobile-section { color: var(--text); background: #131d25; }.mobile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .56fr); gap: 90px; align-items: start; }.mobile-grid p { max-width: 760px; color: #b9c8ca; font-size: 17px; }.check-list { margin-top: 24px; border-top: 1px solid #33454d; }.check-list div { display: flex; gap: 17px; padding: 16px 0; border-bottom: 1px solid #33454d; }.check-list b { color: var(--lime); font-size: 12px; }.check-list span { color: #d2dede; }.mobile-quote { padding: 22px; border: 1px solid var(--cyan); background: #182a31; }.mobile-quote span { display: block; margin-bottom: 10px; color: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: .15em; }.mobile-quote strong { color: #fff; font-size: 22px; line-height: 1.15; }

.support-section { color: var(--text); background: #080d12; }.support-section .section-heading p { color: #b5c2c6; }.support-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }.support-strip div { display: grid; gap: 6px; padding: 20px; border: 1px solid #293840; background: #111a21; }.support-strip strong { color: var(--lime); }.support-strip span { color: #b5c2c6; font-size: 13px; }
.faq-section { color: var(--ink); background: var(--paper); padding-bottom: 94px; }.faq-section .section-heading p { color: var(--muted-dark); }.faq-list { border-top: 1px solid #cbd4cd; }.faq-list details { border-bottom: 1px solid #cbd4cd; }.faq-list summary { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 800; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::after { content: "+"; color: #a568e7; font-size: 24px; line-height: 1; }.faq-list details[open] summary::after { content: "–"; }.faq-list details p { max-width: 900px; margin: 0 0 20px; color: var(--muted-dark); }

.site-footer { padding: 56px 0 24px; color: #fff; background: #070a0e; }.footer-top { display: grid; grid-template-columns: .78fr 1fr 1.2fr; gap: 30px; align-items: start; padding-bottom: 31px; border-bottom: 1px solid var(--line); }.footer-top > p, .footer-columns p, .support-area > p { margin: 0; color: #9eacb0; }.footer-nav { justify-content: flex-end; }.footer-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; padding: 31px 0; border-bottom: 1px solid var(--line); }.footer-columns h3, .support-area h3 { margin-bottom: 8px; color: #fff; font-size: 1rem; letter-spacing: 0; }.footer-columns a { color: var(--cyan); }.support-area { padding: 30px 0; border-bottom: 1px solid var(--line); }.support-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 17px; }.support-card { min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; border: 1px solid #28363d; background: #0e151b; text-align: center; text-decoration: none; }.support-card:hover { border-color: var(--lime); }.support-card img { width: 100%; height: 40px; object-fit: contain; object-position: center; }.support-card span { color: var(--lime); font-size: 11px; font-weight: 850; }.affiliate-row, .footer-bottom { display: flex; justify-content: space-between; gap: 24px; padding: 17px 0; color: #8e9ca0; font-size: 12px; }.affiliate-row { border-bottom: 1px solid var(--line); }.affiliate-row strong { color: #fff; }
.is-hidden { display: none !important; }
.catfish { position: fixed; z-index: 25; right: 50%; bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; width: min(760px, calc(100% - 32px)); padding: 12px 16px; border: 1px solid var(--magenta); color: #fff; background: #0b1116; box-shadow: 0 20px 55px rgba(0,0,0,.5); transform: translateX(50%); }.catfish strong { font-size: 13px; }.catfish a { color: var(--ink); background: var(--lime); white-space: nowrap; }.catfish-close { position: absolute; top: -28px; right: -1px; width: 28px; height: 28px; border: 0; color: #fff; background: #0b1116; font-size: 17px; cursor: pointer; }
.cookie-panel { position: fixed; z-index: 35; right: 18px; bottom: 18px; width: min(400px, calc(100% - 36px)); padding: 21px; border: 1px solid #3b4a52; color: #fff; background: #111920; box-shadow: 0 22px 65px rgba(0,0,0,.48); }.cookie-panel h2 { margin-bottom: 9px; font-size: 1.3rem; }.cookie-panel p { color: #b6c5c8; font-size: 13px; line-height: 1.45; }.cookie-more { display: none; }.cookie-more.is-visible { display: block; }.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }.cookie-actions button { padding: 9px 12px; font-size: 11px; }.cookie-primary { color: var(--ink); background: var(--lime); }.cookie-secondary { border-color: #43545c; color: #fff; background: #1b2930; }

@media (max-width: 1060px) {
  .hero-neon-inner { grid-template-columns: minmax(0, 1fr) minmax(260px, .58fr); gap: 35px; }
  .rank-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .signal-layout, .games-layout, .mobile-grid { gap: 35px; }
}
@media (max-width: 760px) {
  .container { width: min(100% - 30px, var(--container)); }
  .header-inner { min-height: 70px; align-items: flex-start; gap: 12px; padding: 12px 0; }
  .brand-logo { width: 190px; height: 47px; }
  .main-nav { justify-content: flex-end; gap: 10px 14px; font-size: 11px; }
  .main-nav .nav-cta { width: 100%; text-align: right; }
  h1 { font-size: clamp(2.45rem, 11vw, 3.7rem); }
  h2 { font-size: clamp(1.9rem, 8vw, 2.8rem); }
  .hero-neon { min-height: 890px; }.hero-neon-overlay { background: linear-gradient(180deg, rgba(5,8,11,.87), rgba(5,8,11,.72) 44%, rgba(5,8,11,.97) 84%); }.hero-neon-inner { display: block; min-height: 800px; padding-top: 130px; }.hero-copy > p:not(.eyebrow) { font-size: 16px; }.hero-console { width: min(390px, 100%); margin: 52px 0 0 auto; transform: rotate(1deg); }.hero-stats { gap: 0; }.hero-stats span { min-width: 0; flex: 1; padding-right: 9px; }.hero-stats b { font-size: 16px; }.hero-stats small { font-size: 9px; }
  .section { padding: 60px 0; }.section-kicker small { display: none; }.rank-grid, .bonus-grid, .support-strip, .footer-columns { grid-template-columns: 1fr 1fr; }.rank-card { min-height: 390px; padding: 15px; }.rank-meta { grid-template-columns: 1fr; }.signal-layout, .games-layout, .mobile-grid, .bonus-header, .reels-layout, .footer-top { grid-template-columns: 1fr; }.signal-row { grid-template-columns: .65fr 1fr; }.signal-row b { grid-column: 2; text-align: left; }.reels-image, .reels-image img, .games-visual, .games-visual img { min-height: 300px; height: 300px; }.games-visual { order: -1; }.bonus-header { gap: 20px; }.support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.footer-nav { justify-content: flex-start; }.affiliate-row, .footer-bottom { flex-direction: column; gap: 7px; }.catfish { width: calc(100% - 22px); bottom: 11px; padding: 10px; }.catfish strong { font-size: 11px; line-height: 1.35; }.catfish a { padding: 9px 10px; font-size: 11px; }.cookie-panel { right: 11px; bottom: 80px; left: 11px; width: auto; padding: 18px; }
}
@media (max-width: 460px) {
  .rank-grid, .bonus-grid, .support-strip, .footer-columns { grid-template-columns: 1fr; }.rank-card { min-height: 0; }.hero-console { margin-top: 40px; }.hero-stats small { letter-spacing: 0; }.support-grid { gap: 7px; }.support-card { min-height: 84px; padding: 8px; }
}
