:root {
      --bg: #070407;
      --bg-2: #12070a;
      --ink: #12080a;
      --red: #e32222;
      --red-deep: #7a0810;
      --blue: #1529d8;
      --blue-2: #07166d;
      --gold: #ffd667;
      --gold-2: #b8741d;
      --paper: #fff8eb;
      --cream: #f8ead5;
      --muted: #cbb9a0;
      --line: rgba(255, 214, 103, 0.24);
      --max: 1180px;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      min-height: 100%;
      overflow-x: hidden;
    }

    body {
      min-width: 320px;
      color: #fff8eb;
      background: var(--bg);
      font-family: Arial, "Segoe UI", sans-serif;
      letter-spacing: 0;
    }

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

    img {
      display: block;
      max-width: 100%;
    }

    .container {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 40;
      background: rgba(7, 4, 7, 0.94);
      border-bottom: 1px solid rgba(255, 214, 103, 0.18);
      backdrop-filter: blur(18px);
    }

    .topbar {
      min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 190px;
    }

    .brand-mark {
      width: 56px;
      aspect-ratio: 1;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: #130506;
      background:
        linear-gradient(135deg, #fff4a8 0%, #f5bd35 45%, #ef2b2b 100%);
      box-shadow: 0 16px 38px rgba(227, 34, 34, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.68);
      font-size: 18px;
      font-weight: 950;
    }

    .brand-name {
      display: block;
      color: var(--gold);
      font-size: 34px;
      line-height: 0.92;
      font-weight: 950;
      text-transform: uppercase;
      text-shadow: 0 3px 0 rgba(122, 8, 16, 0.86), 0 0 24px rgba(255, 214, 103, 0.25);
    }

    .brand-sub {
      display: block;
      margin-top: 5px;
      color: #fff1be;
      font-size: 11px;
      line-height: 1.2;
      font-weight: 800;
      text-transform: uppercase;
    }

    .main-nav {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      color: #fff2a8;
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .main-nav a {
      padding: 12px 0;
      position: relative;
    }

    .main-nav a:first-child::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 4px;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--red), var(--gold));
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
    }

    .btn {
      min-height: 42px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 0 20px;
      color: #130506;
      background: linear-gradient(135deg, #ffe989, #d89125);
      box-shadow: 0 16px 35px rgba(216, 145, 37, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.68);
      font-size: 13px;
      font-weight: 950;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .btn.secondary {
      color: #fff4c8;
      background: rgba(18, 7, 10, 0.64);
      border-color: rgba(255, 214, 103, 0.38);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .btn .arrow {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #130506;
      background: rgba(255, 255, 255, 0.48);
      font-size: 13px;
      line-height: 1;
    }

    .menu-button {
      display: none;
      width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.06);
      color: #fff8eb;
      font-size: 23px;
      line-height: 1;
    }

    .hero {
      position: relative;
      isolation: isolate;
      min-height: 690px;
      padding: 54px 0 38px;
      background:
        linear-gradient(180deg, #070407 0%, #12070a 70%, #0c0406 100%);
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background: url("/assets/net88-hero-casino.png") center right / cover no-repeat;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(90deg, rgba(7, 4, 7, 0.98) 0%, rgba(9, 4, 6, 0.92) 31%, rgba(14, 5, 7, 0.58) 52%, rgba(7, 4, 7, 0.08) 100%),
        linear-gradient(180deg, rgba(7, 4, 7, 0) 0%, rgba(7, 4, 7, 0.04) 55%, #0a0406 100%);
    }

    .hero-grid {
      min-height: 570px;
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.55fr);
      align-items: center;
      gap: 34px;
    }

    .hero-copy {
      width: min(620px, 100%);
      padding: 26px 0 38px;
    }

    .hero h1 {
      margin: 0;
      color: #fff;
      font-size: 82px;
      line-height: 0.92;
      font-weight: 950;
      text-transform: uppercase;
      text-shadow: 0 4px 0 rgba(122, 8, 16, 0.8), 0 0 42px rgba(255, 214, 103, 0.24);
    }

    .hero h1 span {
      display: block;
      margin-top: 12px;
      color: var(--gold);
      font-size: 46px;
      line-height: 1.08;
    }

    .hero-text {
      width: min(560px, 100%);
      margin: 25px 0 0;
      color: #f3dfc5;
      font-size: 18px;
      line-height: 1.76;
    }

    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }

    .hero-metrics {
      width: min(580px, 100%);
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 34px;
    }

    .metric {
      min-height: 92px;
      border: 1px solid rgba(255, 214, 103, 0.2);
      border-radius: 8px;
      padding: 17px 16px;
      background: rgba(11, 5, 8, 0.7);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .metric strong {
      display: block;
      color: var(--gold);
      font-size: 24px;
      font-weight: 950;
    }

    .metric span {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.38;
      font-weight: 800;
    }

    .hero-note {
      align-self: end;
      justify-self: end;
      width: min(330px, 100%);
      border: 1px solid rgba(255, 214, 103, 0.24);
      border-radius: 8px;
      padding: 22px;
      color: #fff7df;
      background: rgba(6, 3, 5, 0.68);
      backdrop-filter: blur(16px);
      box-shadow: 0 26px 60px rgba(0, 0, 0, 0.36);
    }

    .hero-note strong {
      display: block;
      color: var(--gold);
      font-size: 24px;
      line-height: 1.12;
      font-weight: 950;
    }

    .hero-note p {
      margin: 12px 0 0;
      color: #e8d6c1;
      font-size: 14px;
      line-height: 1.65;
    }

    .game-strip {
      position: relative;
      z-index: 3;
      margin-top: -38px;
    }

    .game-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      padding: 14px;
      border: 1px solid rgba(255, 214, 103, 0.22);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(21, 41, 216, 0.92), rgba(7, 22, 109, 0.92)),
        #101c9b;
      box-shadow: 0 20px 55px rgba(0, 0, 0, 0.28);
    }

    .game-card {
      min-height: 116px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 8px;
      padding: 18px;
      background: rgba(2, 8, 49, 0.36);
    }

    .game-card small {
      color: #ffe78a;
      font-size: 12px;
      font-weight: 950;
      text-transform: uppercase;
    }

    .game-card h3 {
      margin: 10px 0 7px;
      color: #fff;
      font-size: 20px;
      line-height: 1.15;
    }

    .game-card p {
      margin: 0;
      color: #d8dcff;
      font-size: 13px;
      line-height: 1.5;
    }

    .main {
      color: var(--ink);
      background:
        linear-gradient(180deg, #0a0406 0, #0a0406 80px, var(--paper) 80px, var(--paper) 100%);
    }

    .section {
      padding: 86px 0;
    }

    .section-title {
      margin: 0;
      color: #19080a;
      font-size: 46px;
      line-height: 1.06;
      font-weight: 950;
    }

    .section-title.light {
      color: #fff8eb;
    }

    .section-copy {
      color: #6b554c;
      font-size: 16px;
      line-height: 1.85;
    }

    .split {
      display: grid;
      grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
      gap: 58px;
      align-items: center;
    }

    .intro-copy p {
      margin: 0 0 18px;
    }

    .feature-list {
      display: grid;
      gap: 12px;
      margin-top: 26px;
    }

    .feature-item {
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 14px;
      align-items: start;
      padding: 16px;
      border: 1px solid #efd9b8;
      border-radius: 8px;
      background: #fffdf8;
    }

    .feature-index {
      width: 44px;
      aspect-ratio: 1;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: #fff;
      background: linear-gradient(135deg, var(--red), var(--blue));
      font-weight: 950;
    }

    .feature-item strong {
      display: block;
      color: #170709;
      font-size: 17px;
      line-height: 1.25;
    }

    .feature-item span {
      display: block;
      margin-top: 6px;
      color: #725a50;
      font-size: 14px;
      line-height: 1.62;
    }

    .visual-panel {
      min-height: 430px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #ead0aa;
      background:
        linear-gradient(90deg, rgba(7, 4, 7, 0.88), rgba(7, 4, 7, 0.1)),
        url("/assets/net88-hero-casino.png") center right / cover no-repeat;
      box-shadow: 0 28px 75px rgba(70, 24, 10, 0.18);
      position: relative;
    }

    .visual-caption {
      position: absolute;
      left: 24px;
      bottom: 24px;
      width: min(340px, calc(100% - 48px));
      border: 1px solid rgba(255, 214, 103, 0.25);
      border-radius: 8px;
      padding: 18px;
      color: #fff8eb;
      background: rgba(7, 4, 7, 0.76);
      backdrop-filter: blur(12px);
    }

    .visual-caption strong {
      color: var(--gold);
      font-size: 23px;
      line-height: 1.12;
    }

    .visual-caption p {
      margin: 9px 0 0;
      color: #e9d7be;
      font-size: 14px;
      line-height: 1.58;
    }

    .dark-band {
      color: #fff8eb;
      background:
        linear-gradient(180deg, #070407 0%, #20070b 52%, #08105b 100%);
      border-top: 1px solid rgba(255, 214, 103, 0.18);
      border-bottom: 1px solid rgba(255, 214, 103, 0.18);
    }

    .band-head {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
      gap: 44px;
      align-items: end;
      margin-bottom: 34px;
    }

    .band-head p {
      margin: 0;
      color: #dccbb5;
      font-size: 16px;
      line-height: 1.8;
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .step {
      min-height: 230px;
      border: 1px solid rgba(255, 214, 103, 0.18);
      border-radius: 8px;
      padding: 24px;
      background: rgba(255, 255, 255, 0.055);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .step-number {
      width: 42px;
      aspect-ratio: 1;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: #170709;
      background: var(--gold);
      font-weight: 950;
    }

    .step h3 {
      margin: 18px 0 10px;
      color: #fff;
      font-size: 22px;
      line-height: 1.16;
    }

    .step p {
      margin: 0;
      color: #dccbb5;
      font-size: 14px;
      line-height: 1.65;
    }

    .seo-block {
      display: grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr);
      gap: 26px;
      align-items: start;
    }

    .article-copy,
    .side-panel {
      border: 1px solid #ead0aa;
      border-radius: 8px;
      background: #fffdf8;
      box-shadow: 0 20px 58px rgba(70, 24, 10, 0.08);
    }

    .article-copy {
      padding: 34px;
    }

    .article-copy h2 {
      margin: 0;
      color: #170709;
      font-size: 38px;
      line-height: 1.08;
    }

    .article-copy h3 {
      margin: 28px 0 10px;
      color: #170709;
      font-size: 24px;
    }

    .article-copy p,
    .article-copy li {
      color: #65514a;
      font-size: 16px;
      line-height: 1.82;
    }

    .article-copy p {
      margin: 18px 0 0;
    }

    .article-copy ul {
      margin: 14px 0 0;
      padding-left: 20px;
    }

    .side-panel {
      padding: 26px;
      position: sticky;
      top: 104px;
    }

    .side-panel h3 {
      margin: 0 0 18px;
      color: #170709;
      font-size: 25px;
      line-height: 1.14;
    }

    .side-row {
      display: grid;
      grid-template-columns: 12px 1fr;
      gap: 13px;
      padding: 16px 0;
      border-top: 1px solid #efddc1;
    }

    .side-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-top: 6px;
      background: linear-gradient(135deg, var(--red), var(--gold));
    }

    .side-row strong {
      display: block;
      color: #170709;
      font-size: 16px;
    }

    .side-row span {
      display: block;
      margin-top: 6px;
      color: #725a50;
      font-size: 14px;
      line-height: 1.62;
    }

    .news-section {
      padding-top: 0;
    }

    .news-head {
      display: grid;
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
      gap: 40px;
      align-items: end;
      margin-bottom: 28px;
    }

    .news-head p {
      margin: 0;
      color: #6b554c;
      font-size: 16px;
      line-height: 1.75;
    }

    .news-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .news-card {
      min-height: 330px;
      border: 1px solid #ead0aa;
      border-radius: 8px;
      overflow: hidden;
      background: #fffdf8;
      box-shadow: 0 18px 50px rgba(70, 24, 10, 0.09);
    }

    .news-thumb {
      min-height: 136px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      padding: 18px;
      color: #fff8eb;
      background:
        linear-gradient(135deg, rgba(227, 34, 34, 0.88), rgba(21, 41, 216, 0.82)),
        url("/assets/net88-hero-casino.png") center / cover no-repeat;
    }

    .news-thumb span {
      font-size: 12px;
      font-weight: 950;
      text-transform: uppercase;
    }

    .news-thumb strong {
      color: var(--gold);
      font-size: 42px;
      line-height: 0.82;
      font-weight: 950;
    }

    .news-body {
      padding: 22px;
    }

    .news-body time {
      color: #b8741d;
      font-size: 12px;
      font-weight: 950;
      text-transform: uppercase;
    }

    .news-body h3 {
      margin: 10px 0 11px;
      color: #170709;
      font-size: 22px;
      line-height: 1.16;
    }

    .news-body p {
      margin: 0;
      color: #70584f;
      font-size: 14px;
      line-height: 1.65;
    }

    .footer {
      color: #f3dfc5;
      background: #070407;
      border-top: 1px solid rgba(255, 214, 103, 0.18);
    }

    .footer-inner {
      min-height: 94px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .footer strong {
      color: var(--gold);
      font-size: 28px;
      font-weight: 950;
    }

    .footer span {
      color: #cbb9a0;
      font-size: 14px;
    }

    @media (max-width: 1100px) {
      .main-nav {
        display: none;
      }

      .brand {
        min-width: 0;
      }

      .menu-button {
        display: inline-grid;
        place-items: center;
      }

      .hero-grid,
      .split,
      .band-head,
      .seo-block,
      .news-head {
        grid-template-columns: 1fr;
      }

      .hero-note {
        justify-self: start;
        align-self: start;
      }

      .game-grid,
      .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .news-grid {
        grid-template-columns: 1fr;
      }

      .side-panel {
        position: static;
      }
    }

    @media (max-width: 720px) {
      .container {
        width: min(100% - 28px, var(--max));
      }

      .topbar {
        min-height: 72px;
        gap: 12px;
      }

      .brand-mark {
        width: 48px;
      }

      .brand-name {
        font-size: 29px;
      }

      .brand-sub {
        display: none;
      }

      .header-actions .btn.secondary {
        display: none;
      }

      .header-actions .btn {
        min-height: 38px;
        padding: 0 14px;
        font-size: 12px;
      }

      .menu-button {
        display: none;
      }

      .hero {
        min-height: auto;
        padding: 38px 0 58px;
      }

      .hero::before {
        background-position: 58% center;
        opacity: 0.58;
      }

      .hero::after {
        background:
          linear-gradient(180deg, rgba(7, 4, 7, 0.95) 0%, rgba(7, 4, 7, 0.82) 46%, rgba(7, 4, 7, 0.98) 100%),
          linear-gradient(90deg, rgba(7, 4, 7, 0.96), rgba(7, 4, 7, 0.24));
      }

      .hero-grid {
        min-height: auto;
        gap: 20px;
      }

      .hero-copy {
        padding: 20px 0 0;
      }

      .hero h1 {
        font-size: 56px;
      }

      .hero h1 span {
        font-size: 30px;
      }

      .hero-text {
        font-size: 16px;
        line-height: 1.68;
      }

      .cta-row {
        display: grid;
        grid-template-columns: 1fr;
      }

      .hero-metrics,
      .game-grid,
      .steps {
        grid-template-columns: 1fr;
      }

      .game-strip {
        margin-top: 0;
        padding-top: 20px;
        background: #0a0406;
      }

      .main {
        background: var(--paper);
      }

      .section {
        padding: 58px 0;
      }

      .section-title {
        font-size: 34px;
      }

      .article-copy {
        padding: 24px;
      }

      .article-copy h2 {
        font-size: 30px;
      }

      .visual-panel {
        min-height: 360px;
      }

      .footer-inner {
        min-height: 110px;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
      }
    }
  

.article-main {
  color: var(--ink);
  background: var(--paper);
}

.article-hero {
  position: relative;
  isolation: isolate;
  color: #fff8eb;
  padding: 72px 0 66px;
  background:
    linear-gradient(90deg, rgba(7, 4, 7, 0.98), rgba(7, 4, 7, 0.68)),
    url("/assets/net88-hero-casino.png") center right / cover no-repeat;
}

.article-hero h1 {
  width: min(850px, 100%);
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 5vw, 66px);
  line-height: 1.03;
  font-weight: 950;
  text-transform: uppercase;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  color: #f2dfbf;
  font-size: 13px;
  font-weight: 800;
}

.article-meta span {
  border: 1px solid rgba(255, 214, 103, 0.24);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(7, 4, 7, 0.58);
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 28px;
  padding: 54px 0 86px;
}

.article-card,
.article-aside {
  border: 1px solid #ead0aa;
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 20px 58px rgba(70, 24, 10, 0.08);
}

.article-card {
  padding: clamp(24px, 4vw, 42px);
}

.article-card .column {
  color: #b8741d;
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.article-card .body {
  color: #604b46;
  font-size: 17px;
  line-height: 1.86;
}

.article-card .body h2,
.article-card .body h3,
.article-card .body h4 {
  color: #170709;
  line-height: 1.18;
}

.article-card .body img {
  height: auto;
  border-radius: 8px;
  margin: 22px auto;
}

.article-card .edit,
.article-card .page,
.article-card .column-page {
  color: #70584f;
  border-top: 1px solid #efddc1;
  margin-top: 24px;
  padding-top: 20px;
  font-size: 14px;
}

.article-card a {
  color: #b5131d;
  font-weight: 800;
}

.action-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.action-list a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  border: 1px solid #ead0aa;
  border-radius: 999px;
  padding: 0 14px;
  color: #170709;
  background: #fff8eb;
}

.article-aside {
  overflow: hidden;
  align-self: start;
  position: sticky;
  top: 100px;
}

.aside-media {
  min-height: 160px;
  background:
    linear-gradient(135deg, rgba(227, 34, 34, 0.78), rgba(21, 41, 216, 0.78)),
    url("/assets/net88-hero-casino.png") center / cover no-repeat;
}

.aside-body {
  padding: 24px;
}

.aside-body h3 {
  margin: 0 0 12px;
  color: #170709;
  font-size: 24px;
}

.aside-body p,
.aside-body li {
  color: #70584f;
  font-size: 14px;
  line-height: 1.65;
}

@media (max-width: 980px) {
  .article-layout {
    grid-template-columns: 1fr;
  }

  .article-aside {
    position: static;
  }
}