:root {
  --bg: #071922;
  --bg-2: #0a222b;
  --surface: #0d2933;
  --surface-2: #15343e;
  --line: rgba(220, 235, 220, .16);
  --text: #f3f0e4;
  --muted: #b7c4bb;
  --mint: #d7ed72;
  --aqua: #73d1ca;
  --lime: #d7ed72;
  --gold: #fa8567;
  --danger: #ff9d87;
  --max: 1280px;
  --radius: 14px;
  --shadow: 0 20px 54px rgba(0, 0, 0, .3);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color-scheme: dark;
}

html { scroll-padding-top: 80px; }
body { background: var(--bg); color: var(--text); }
h1, h2, h3, .hero-copy h1, .article-title { font-family: Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -.028em; }
h1 { line-height: 1.04; }
h2 { line-height: 1.13; }
a { text-decoration-thickness: .08em; text-underline-offset: .18em; }
.wrap { width: min(calc(100% - 40px), var(--max)); }
.skip-link { background: var(--lime); color: #10232a; border-radius: 0 0 3px 0; }

/* Winshark's visual signature: ink-blue water, chartreuse wayfinding, coral accents,
   editorial serif headlines and hard-edged chart panels. */
.site-header {
  height: 68px;
  border-bottom: 1px solid rgba(215, 237, 114, .42);
  background: #071922;
  backdrop-filter: none;
  z-index: 70;
}
.header-inner { gap: 22px; position: relative; }
.brand { gap: 9px; font-size: 1rem; letter-spacing: -.035em; }
.brand img { width: 34px; height: 34px; }
.brand b { color: var(--gold); }
.main-nav { gap: clamp(13px, 1.6vw, 23px); }
.main-nav a { color: #d2d9cc; font-size: .82rem; font-weight: 650; text-decoration: none; }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--lime); }
.header-actions .button { min-height: 40px; padding: 8px 13px; border-radius: 4px; font-size: .77rem; }
.button { border-radius: 4px; }
.button-primary { background: var(--lime); color: #10232a; box-shadow: none; }
.button-primary:hover { background: #e7f6a1; }
.button-outline { border-color: rgba(215, 237, 114, .62); color: var(--lime); }
.button-quiet { border-radius: 4px; }
.menu-toggle {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(215, 237, 114, .42);
  border-radius: 4px;
  background: transparent;
}
.menu-toggle span { width: 18px; border-radius: 0; transition: transform .18s, opacity .18s; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu-overlay[hidden] { display: none !important; }
.menu-overlay {
  position: fixed;
  inset: 68px 0 0;
  z-index: 60;
  display: block;
  width: 100%;
  border: 0;
  background: rgba(3, 12, 17, .72);
  backdrop-filter: blur(2px);
  cursor: default;
}
body.nav-open { overflow: hidden; padding-right: var(--nav-scrollbar-width, 0px); overscroll-behavior: none; }

.home-hero { background: #0c2933; border-bottom: 1px solid var(--line); }
.hero-grid { min-height: 520px; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); gap: 34px; padding-block: 56px 62px; }
.hero-copy h1 { max-width: 660px; font-size: clamp(2.7rem, 5vw, 4.65rem); }
.hero-copy h1 span { color: var(--lime); }
.hero-copy > p { max-width: 560px; color: #c3cec3; }
.eyebrow { color: var(--aqua); letter-spacing: .12em; }
.eyebrow-dot { width: 9px; height: 9px; border-radius: 1px; background: var(--gold); box-shadow: none; }
.hero-art {
  height: 360px;
  overflow: hidden;
  border: 1px solid rgba(215, 237, 114, .25);
  border-left: 4px solid var(--lime);
  background: #102e38;
}
.hero-art::before {
  position: absolute;
  inset: 22px 18px;
  border: 1px solid rgba(115, 209, 202, .22);
  clip-path: polygon(0 0, 100% 7%, 100% 91%, 0 100%);
  content: "";
}
.hero-art::after { position: absolute; top: 0; bottom: 0; left: 49%; border-left: 1px solid rgba(115, 209, 202, .16); content: ""; }
.art-orbit, .bubble, .hero-glow, .art-card::before { display: none !important; }
.art-card {
  z-index: 1;
  width: min(350px, 76%);
  height: 238px;
  padding: 23px 26px;
  border: 1px solid rgba(243, 240, 228, .28);
  border-radius: 3px 3px 34px 3px;
  background: #183b45;
  box-shadow: 12px 12px 0 rgba(3, 14, 20, .24);
}
.art-kicker { color: var(--lime); letter-spacing: .2em; }
.fin-shape { background: var(--lime); filter: none; clip-path: polygon(0 100%, 38% 27%, 59% 0, 70% 55%, 100% 100%, 76% 88%, 55% 90%, 31% 86%); }
.art-wave { border-top-color: var(--gold); border-radius: 0; transform: rotate(-8deg) skewX(-20deg); }
.art-chip { border-radius: 3px; border-color: rgba(243, 240, 228, .35); background: var(--gold); color: #10232a; backdrop-filter: none; box-shadow: 4px 4px 0 rgba(3, 14, 20, .24); }
.chip-b { background: var(--lime); color: #10232a; }

.section { padding-block: 78px; border-bottom: 1px solid rgba(220, 235, 220, .08); }
.section-soft, .home-guides-section, .home-compare-section, .home-faq-section { background: #0a222b; }
.home-bonus-section, .home-payments-section, .home-vip-section { background: #0b252e; }
.home-mobile-section { background: #102c35; }
.home-bonus-section::before { width: 3px; background: var(--gold); }
.category-card {
  border-radius: 3px 15px 3px 3px;
  border-color: rgba(220, 235, 220, .18);
  background: #102d37;
  box-shadow: none;
}
.category-icon { border-radius: 3px 11px 3px 3px; background: rgba(215, 237, 114, .12); color: var(--lime); }
.feature-card, .related-card { border-radius: 15px 3px 15px 3px; background: #102d37; box-shadow: none; }
.home-game-card { border-radius: 3px; background: #102d37; box-shadow: none; }
.home-game-mark { border-radius: 3px 11px 3px 3px; background: rgba(115, 209, 202, .12); color: var(--aqua); }
.quickstart-steps li { border-radius: 3px 15px 3px 3px; background: #102d37; }
.quickstart-steps li > span { border-radius: 3px; background: rgba(215, 237, 114, .13); color: var(--lime); }
.bonus-calculator-card, .vip-criteria-card { border-radius: 3px 18px 3px 3px; background: #102d37; box-shadow: none; }
.calculator-icon, .vip-mark { border-radius: 3px; background: var(--gold); color: #10232a; }
.game-finder-controls, .game-compare-module, .game-compare-section { border-radius: 3px; background: #0d2630; box-shadow: none; }
.game-finder-controls input, .game-finder-controls select, .input-suffix { border-radius: 3px; }
.home-comparison-table, .home-faq-item, .payment-route-grid > a { border-radius: 3px; background: #102d37; }
.home-comparison-table thead th { color: var(--lime); }
.text-link:hover, .related-card:hover a, .main-nav a:hover { text-decoration: underline; }
.payment-route-grid > a { border-color: rgba(115, 209, 202, .2); }
.payment-route-grid span { color: var(--aqua); }
.mobile-device-card { border-radius: 18px 3px 18px 3px; background: #0d2630; }
.mobile-device-screen { border-radius: 20px 20px 3px 3px; background: #173640; box-shadow: 8px 8px 0 rgba(3, 14, 20, .3); }
.mobile-device-screen i { width: 58px; height: 58px; border: 0; border-radius: 3px 18px 3px 3px; background: var(--lime); box-shadow: none; }
.home-final-cta { border-block: 1px solid rgba(215, 237, 114, .32); background: #15343e; }
.home-final-inner h2 { color: var(--text); }
.home-final-inner p { color: #c3cec3; }
.responsible-band { background: #102d37; border-radius: 3px 16px 3px 3px; }
.page-promo { border-radius: 3px 18px 3px 3px; border-color: rgba(215, 237, 114, .25); background: #102d37; box-shadow: none; }
.page-promo::after, .context-popup-card::after { display: none !important; }
.page-promo-art, .page-promo--game .page-promo-art, .page-promo--bonus .page-promo-art, .page-promo--payment .page-promo-art { border-radius: 3px 12px 3px 3px; background: #183b45; box-shadow: none; }
.context-popup-card, .context-popup--game .context-popup-card { border-radius: 4px 20px 4px 4px; background: #102d37; box-shadow: var(--shadow); }
.context-popup::backdrop { backdrop-filter: none; }
.comparison-featured { background: #102d37; }
.sidebar-context--game .context-card-art, .sidebar-context--bonus .context-card-art, .sidebar-context--payment .context-card-art, .sidebar-context--vip .context-card-art { background: #183b45; }

@media (max-width: 1000px) {
  .header-inner { gap: 14px; }
  .main-nav { gap: 12px; }
  .main-nav a { font-size: .76rem; }
  .hero-grid { gap: 22px; }
}
@media (max-width: 800px) {
  .site-header { height: 70px; }
  .header-inner { justify-content: space-between; gap: 9px; }
  .brand { margin-right: auto; font-size: .95rem; }
  .header-actions { margin-left: auto; }
  .header-actions .button { min-height: 40px; padding: 8px 10px; font-size: .72rem; }
  .menu-toggle { display: flex; flex: 0 0 40px; }
  .menu-overlay { inset-block-start: 70px; }
  .main-nav {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    left: 0;
    z-index: 71;
    display: none;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid rgba(215, 237, 114, .28);
    border-radius: 3px 14px 3px 3px;
    background: #0c2933;
    box-shadow: 8px 8px 0 rgba(3, 14, 20, .24);
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 12px 8px; border-bottom: 1px solid rgba(220, 235, 220, .1); font-size: .92rem; }
  .main-nav a:last-child { border-bottom: 0; }
  .hero-grid { grid-template-columns: 1fr; padding-block: 45px 38px; }
  .hero-art { height: 310px; }
  .art-card { height: 216px; }
  .section { padding-block: 62px; }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - 28px); }
  .brand { gap: 7px; font-size: .88rem; }
  .brand img { width: 31px; height: 31px; }
  .header-actions .button { min-height: 38px; padding-inline: 9px; font-size: .68rem; }
  .menu-toggle { width: 38px; height: 38px; flex-basis: 38px; }
  .hero-copy h1 { font-size: clamp(2.45rem, 11vw, 3.5rem); }
  .hero-art { height: 278px; }
  .art-card { width: 78%; height: 198px; }
  .section { padding-block: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-toggle span { transition: none; }
}