:root {
    --gen-primary: #0c4635;
    --gen-primary-hov: #14674f;
    --gen-primary-soft: #e6f4f0;
    --gen-accent: #e331dd;
    --gen-accent-soft: #f8e3f7;
    --gen-hero-from: #0f5743;
    --gen-hero-to: #062d22;
    --gen-hero-mid: #2434a8;
    --gen-bg: #f4f6f5;
    --gen-surface: #ffffff;
    --gen-border: #d2e0dc;
    --gen-text: #14241f;
    --gen-text-soft: #608077;
    --gen-gold: #f1c122;
    --gen-signal: #eb921e;
    --gen-pale: #f6f9f8;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: 'Raleway', system-ui, sans-serif;
    background: var(--gen-bg);
    color: var(--gen-text);
    font-size: 15px;
    line-height: 1.65;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  .dir-gac {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* Header */

  .dej-ri {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--gen-pale);
    border-bottom: 2px solid var(--gen-border);
  }

  .dej-ri__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    gap: 16px;
  }

  .lol-xu {
    font-weight: 900;
    font-size: 16px;
    color: var(--gen-text);
    border-bottom: 2px solid var(--gen-accent);
    padding-bottom: 1px;
  }

  .xas-los {
    display: flex;
    gap: 6px;
    list-style: none;
  }

  .xas-los a {
    font-size: 12px;
    font-weight: 700;
    color: var(--gen-text-soft);
    padding: 5px 12px;
    border-radius: 99px;
    border: 1px solid var(--gen-border);
    background: #fff;
    transition: all .15s;
  }

  .xas-los a:hover {
    border-color: var(--gen-primary);
    color: var(--gen-primary);
    background: var(--gen-primary-soft);
  }

  /* Hero */

  .xuf-xe {
    background: linear-gradient(
      135deg,
      var(--gen-hero-from) 0%,
      var(--gen-hero-to) 100%
    );
    padding: 44px 0 0;
  }

  .xuf-xe__label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gen-accent);
    margin-bottom: 12px;
  }

  .xuf-xe h1 {
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 900;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.12;
  }

  .xuf-xe__sub {
    font-size: 14px;
    color: rgba(255, 255, 255, .8);
    max-width: 540px;
    line-height: 1.7;
    margin-bottom: 0;
  }

  .xuf-xe__stats {
    display: flex;
    gap: 0;
    margin-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }

  .lit-jad {
    flex: 1;
    text-align: center;
    padding: 14px 8px;
    border-right: 1px solid rgba(255, 255, 255, .1);
  }

  .lit-jad:last-child {
    border-right: none;
  }

  .lit-jad__num {
    font-size: 20px;
    font-weight: 900;
    color: var(--gen-accent);
    line-height: 1;
    display: block;
  }

  .lit-jad__lbl {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, .65);
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-top: 3px;
    display: block;
  }

  /* Main layout */

  .ni-fu {
    padding: 36px 0 48px;
  }

  .cu-ve {
    margin-bottom: 40px;
  }

  .co-ve {
    margin-bottom: 18px;
  }

  .co-ve h2 {
    font-size: 21px;
    font-weight: 800;
    margin-bottom: 4px;
  }

  .co-ve p {
    font-size: 13px;
    color: var(--gen-text-soft);
  }

  .pob {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--gen-accent);
    background: var(--gen-accent-soft);
    border-radius: 4px;
    padding: 2px 7px;
    margin-bottom: 8px;
  }

  /* Casino ranking cards */

  .po-vi {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .ran-fe {
    background: var(--gen-surface);
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
    transition: box-shadow .15s, transform .15s;
  }

  .ran-fe:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, .1);
    transform: translateY(-1px);
  }

  .ran-fe--first {
    border-top: 3px solid var(--gen-gold);
  }

  .ran-fe__logo {
    width: 64px;
    flex-shrink: 0;
  }

  .ran-fe__logo img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  .ran-fe__info {
    flex: 1;
    min-width: 0;
  }

  .ran-fe__name {
    font-size: 14px;
    font-weight: 700;
    display: block;
  }

  .ran-fe__bonus {
    font-size: 12px;
    color: var(--gen-text-soft);
    display: block;
    margin-top: 2px;
  }

  .ran-fe__deposit {
    font-size: 11px;
    color: var(--gen-text-soft);
    background: var(--gen-bg);
    border-radius: 6px;
    padding: 3px 8px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .ran-fe__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
    flex-shrink: 0;
  }

  .ran-fe__score-val {
    font-size: 17px;
    font-weight: 900;
    color: var(--gen-primary);
    line-height: 1;
  }

  .ran-fe__score-lbl {
    font-size: 9px;
    font-weight: 700;
    color: var(--gen-text-soft);
    letter-spacing: .5px;
    text-transform: uppercase;
  }

  .ran-fe__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gen-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 23px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s;
  }

  .ran-fe__btn:hover {
    background: var(--gen-primary-hov);
  }

  /* Text content */

  .koh-te h2 {
    font-size: 19px;
    font-weight: 800;
    margin: 26px 0 10px;
  }

  .koh-te h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 18px 0 8px;
  }

  .koh-te p {
    line-height: 1.75;
    margin-bottom: 14px;
  }

  .wet {
    background: var(--gen-primary-soft);
    border-left: 3px solid var(--gen-primary);
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
    margin: 16px 0;
    font-size: 14px;
  }

  /* FAQ */

  .fij h2 {
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 14px;
  }

  .geh-se {
    background: var(--gen-surface);
    border: 1px solid var(--gen-border);
    border-radius: 10px;
    margin-bottom: 8px;
  }

  .jup {
    padding: 13px 16px;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  .jup::after {
    content: "+";
    font-size: 18px;
    color: var(--gen-primary);
    font-weight: 400;
    flex-shrink: 0;
  }

  .pa-ta {
    padding: 0 16px 13px;
    font-size: 13px;
    color: var(--gen-text-soft);
    line-height: 1.7;
  }

  /* Markdown content */

  .koh-te table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 13px;
  }

  .koh-te th {
    background: var(--brand, var(--gen-primary, var(--v4-primary, #333)));
    color: #fff;
    padding: 8px 12px;
    text-align: left;
    font-weight: 700;
  }

  .koh-te td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--line, var(--gen-border, var(--v4-border, #e0e0e0)));
  }

  .koh-te tr:nth-child(even) td {
    background: rgba(0, 0, 0, .03);
  }

  .koh-te ul,
  .koh-te ol {
    padding-left: 20px;
    margin: 10px 0;
  }

  .koh-te li {
    margin-bottom: 6px;
    line-height: 1.65;
  }

  .koh-te blockquote {
    border-left: 3px solid var(--accent, var(--gen-accent, #666));
    padding: 10px 14px;
    margin: 12px 0;
    opacity: .85;
  }

  .koh-te code {
    background: rgba(0, 0, 0, .06);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: monospace;
    font-size: .9em;
  }

  /* Footer */

  .lo-mul {
    background: var(--gen-primary);
    border-top: 2px solid var(--gen-accent);
    padding: 22px 0;
  }

  .lo-mul p {
    font-size: 11px;
    color: rgba(255, 255, 255, .5);
    line-height: 1.7;
  }

  /* Responsive */

  @media (max-width: 600px) {
    .dej-ri__inner {
      height: auto;
      padding: 12px 0;
      flex-direction: column;
      align-items: flex-start;
    }

    .xas-los {
      flex-wrap: wrap;
    }

    .xuf-xe__stats {
      flex-wrap: wrap;
    }

    .lit-jad {
      flex: 0 0 50%;
    }

    .ran-fe {
      flex-wrap: wrap;
      padding: 14px;
    }

    .ran-fe__info {
      flex: 1 1 calc(100% - 120px);
    }

    .ran-fe__deposit {
      display: none;
    }

    .ran-fe__btn {
      width: 100%;
    }
  }