:root {
   --bg: #0b1220;
   --bg-soft: #111a2d;
   --card: rgba(255, 255, 255, 0.04);
   --line: rgba(255, 255, 255, 0.12);
   --text: rgba(255, 255, 255, 0.92);
   --muted: rgba(255, 255, 255, 0.68);
   --accent: #4cc0ff;
   --accent-2: #7bd7ff;
   --success: #2ed399;
   --radius: 18px;
   --radius-lg: 26px;
   --shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
   --container: 1120px;
 }
 
 * {
   box-sizing: border-box;
 }
 
 html,
 body {
   height: 100%;
 }
 
 body {
   margin: 0;
   font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
   background: linear-gradient(180deg, var(--bg) 0%, #0a0f1b 40%, #060a12 100%);
   color: var(--text);
 }

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.08;
  background: repeating-linear-gradient(
    135deg,
    rgba(220, 20, 60, 0.35) 0 10px,
    rgba(30, 64, 175, 0.35) 10px 20px,
    transparent 20px 42px
  );
}
 
 a {
   color: inherit;
   text-decoration: none;
 }
 
 img {
   max-width: 100%;
   display: block;
 }
 
 .bg {
   position: fixed;
   inset: 0;
   z-index: -2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3CradialGradient id='g1' cx='18%25' cy='12%25' r='62%25'%3E%3Cstop offset='0' stop-color='%234cc0ff' stop-opacity='0.22'/%3E%3Cstop offset='1' stop-color='%234cc0ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='g2' cx='82%25' cy='22%25' r='58%25'%3E%3Cstop offset='0' stop-color='%237bd7ff' stop-opacity='0.18'/%3E%3Cstop offset='1' stop-color='%237bd7ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1920' height='1080' fill='%230b1220'/%3E%3Crect width='1920' height='1080' fill='url(%23g1)'/%3E%3Crect width='1920' height='1080' fill='url(%23g2)'/%3E%3Ccircle cx='260' cy='820' r='82' fill='none' stroke='%234cc0ff' stroke-opacity='0.22' stroke-width='10'/%3E%3Ccircle cx='260' cy='820' r='42' fill='none' stroke='%237bd7ff' stroke-opacity='0.25' stroke-width='8'/%3E%3Crect x='1380' y='150' width='150' height='200' rx='18' fill='%237bd7ff' fill-opacity='0.08' stroke='%237bd7ff' stroke-opacity='0.28'/%3E%3Crect x='1420' y='190' width='150' height='200' rx='18' fill='%234cc0ff' fill-opacity='0.08' stroke='%234cc0ff' stroke-opacity='0.24'/%3E%3Ccircle cx='1540' cy='830' r='110' fill='none' stroke='%234cc0ff' stroke-opacity='0.2' stroke-width='8'/%3E%3Cpath d='M1540 720 L1540 940 M1430 830 L1650 830 M1465 755 L1615 905 M1465 905 L1615 755' stroke='%237bd7ff' stroke-opacity='0.18' stroke-width='4'/%3E%3Cpath d='M-220 860 C 360 610, 700 730, 1200 520 S 2000 240, 2300 40' fill='none' stroke='%234cc0ff' stroke-opacity='0.14' stroke-width='10'/%3E%3C/svg%3E");
   background-size: cover;
   background-position: center;
   opacity: 0.95;
 }
 
 .container {
   width: min(100% - 32px, var(--container));
   margin: 0 auto;
 }
 
 .skip-link {
   position: absolute;
   left: -999px;
   top: 10px;
   padding: 8px 12px;
   border-radius: 10px;
   background: rgba(0, 0, 0, 0.7);
   border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .skip-link:focus {
   left: 10px;
 }
 
 .site-header {
   position: sticky;
   top: 0;
   z-index: 30;
   backdrop-filter: blur(14px);
   background: linear-gradient(180deg, rgba(10, 15, 27, 0.88), rgba(10, 15, 27, 0.6));
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .header__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   padding: 14px 0;
 }
 
 .brand {
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
 .brand__logo {
   width: 40px;
   height: 40px;
   border-radius: 12px;
   background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.3), transparent 45%),
     radial-gradient(circle at 60% 60%, rgba(76, 192, 255, 0.9), rgba(76, 192, 255, 0.2));
   border: 1px solid rgba(255, 255, 255, 0.25);
   box-shadow: 0 0 20px rgba(76, 192, 255, 0.3);
  animation: accentGlow 5s ease-in-out infinite;
 }
 
 .brand__name {
   display: flex;
   flex-direction: column;
   line-height: 1.05;
 }
 
 .brand__name strong {
   font-size: 14px;
   letter-spacing: 0.3px;
 }
 
 .brand__name span {
   font-size: 12px;
   color: var(--muted);
 }
 
 .nav {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   justify-content: flex-end;
 }
 
 .nav a {
   padding: 8px 10px;
   border-radius: 12px;
   border: 1px solid transparent;
   color: var(--muted);
   transition: 160ms ease;
 }
 
 .nav a:hover,
 .nav a[aria-current="page"] {
   color: var(--text);
   border-color: rgba(255, 255, 255, 0.2);
   background: rgba(255, 255, 255, 0.04);
 }
 
 .header__badge {
   display: none;
 }
 
 @media (min-width: 900px) {
   .header__badge {
     display: flex;
     align-items: center;
     gap: 10px;
   }
 }
 
 .badge18 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 38px;
   height: 28px;
   border-radius: 10px;
   font-weight: 800;
   font-size: 12px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   background: rgba(255, 255, 255, 0.05);
  animation: pulse18 2.6s ease-in-out infinite;
 }
 
 .badgeText {
   font-size: 12px;
   color: var(--muted);
   max-width: 220px;
 }
 
 .hero {
   padding: 50px 0 20px;
 }
 
 .hero__grid {
   display: grid;
   gap: 20px;
 }
 
 @media (min-width: 980px) {
   .hero__grid {
     grid-template-columns: 1.2fr 0.8fr;
   }
 }
 
 .kicker {
   display: inline-flex;
   gap: 10px;
   align-items: center;
   font-size: 12px;
   letter-spacing: 0.35px;
   text-transform: uppercase;
   color: var(--muted);
 }
 
 h1 {
   margin: 10px 0 12px;
   font-size: clamp(30px, 5vw, 46px);
   line-height: 1.05;
 }
 
 .lead {
   color: var(--muted);
   line-height: 1.6;
   max-width: 65ch;
 }
 
 .hero__card {
   padding: 18px;
   border-radius: var(--radius-lg);
   border: 1px solid rgba(255, 255, 255, 0.16);
   background: rgba(255, 255, 255, 0.04);
   box-shadow: var(--shadow);
 }
 
 .hero__list {
   margin: 12px 0 16px;
   padding-left: 18px;
   color: var(--muted);
 }
 
 .chip-row {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
 }
 
 .chip {
   padding: 6px 10px;
   border-radius: 999px;
   font-size: 12px;
   border: 1px solid rgba(255, 255, 255, 0.16);
   color: rgba(255, 255, 255, 0.85);
   background: rgba(255, 255, 255, 0.04);
 }
 
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 10px 14px;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   background: rgba(255, 255, 255, 0.05);
   color: var(--text);
   font-weight: 700;
   font-size: 14px;
   transition: 160ms ease;
 }
 
 .btn:hover {
   transform: translateY(-1px);
   border-color: rgba(255, 255, 255, 0.35);
 }
 
 .btn--primary {
   background: linear-gradient(180deg, rgba(76, 192, 255, 0.35), rgba(76, 192, 255, 0.12));
   border-color: rgba(76, 192, 255, 0.6);
   box-shadow: 0 0 24px rgba(76, 192, 255, 0.28);
 }
 
 .section {
   padding: 34px 0;
 }
 
 .section--alt {
   background: rgba(255, 255, 255, 0.02);
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
 }
 
 .section__head h2 {
   margin: 0 0 8px;
   font-size: 22px;
 }
 
 .section__head p {
   margin: 0 0 18px;
   color: var(--muted);
   line-height: 1.55;
   max-width: 70ch;
 }
 
 .grid {
   display: grid;
   gap: 12px;
 }
 
 @media (min-width: 920px) {
   .grid--3 {
     grid-template-columns: repeat(3, 1fr);
   }
 }
 
 .panel {
   padding: 16px;
   border-radius: var(--radius);
   border: 1px solid rgba(255, 255, 255, 0.14);
   background: var(--card);
  transition: transform 180ms ease, box-shadow 180ms ease;
 }

.panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}
 
 .panel h3 {
   margin: 0 0 8px;
   font-size: 16px;
 }
 
 .panel p {
   margin: 0;
   color: var(--muted);
   line-height: 1.55;
 }
 
 .casino-list {
   display: grid;
   gap: 12px;
 }
 
 .casino-card {
   padding: 16px;
   border-radius: var(--radius-lg);
   border: 1px solid rgba(255, 255, 255, 0.16);
   background: var(--card);
   display: grid;
   gap: 12px;
  transition: transform 180ms ease, box-shadow 180ms ease;
 }

.casino-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
}
 
 @media (min-width: 900px) {
   .casino-card {
     grid-template-columns: 70px 1fr auto;
     align-items: start;
   }
 }
 
 .casino-card__logo {
   width: 64px;
   height: 64px;
   border-radius: 16px;
   background: rgba(0, 0, 0, 0.25);
   border: 1px solid rgba(255, 255, 255, 0.2);
   display: grid;
   place-items: center;
   overflow: hidden;
 }
 
 .casino-card__logo img {
   width: 52px;
   height: 52px;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
 }
 
 .casino-card__meta {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   font-size: 12px;
   color: var(--muted);
 }
 
 .casino-card__title {
   font-weight: 800;
 }
 
 .casino-card__desc {
   margin: 8px 0 10px;
   color: var(--muted);
   line-height: 1.55;
 }
 
 .casino-card__list {
   margin: 0;
   padding-left: 18px;
   color: rgba(255, 255, 255, 0.78);
 }
 
 .pill {
   padding: 4px 8px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   font-size: 11px;
 }
 
 .pill--accent {
   border-color: rgba(76, 192, 255, 0.5);
   color: var(--accent-2);
 }
 
 .rating {
   display: inline-flex;
   align-items: center;
   gap: 8px;
 }
 
.rating--v1 .rating__score {
  background: rgba(76, 192, 255, 0.18);
  border-color: rgba(76, 192, 255, 0.6);
  color: var(--accent-2);
  box-shadow: inset 0 0 0 1px rgba(76, 192, 255, 0.15);
}

.rating--v1 .rating__bar {
  height: 10px;
  background: rgba(76, 192, 255, 0.14);
  border: 1px solid rgba(76, 192, 255, 0.35);
}

.rating--v1 .rating__bar span {
  background: linear-gradient(90deg, #4cc0ff, #2ed399);
}

 .rating__score {
   padding: 6px 10px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   font-weight: 800;
   font-size: 12px;
 }
 
 .rating__bar {
   width: 110px;
   height: 8px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.08);
   overflow: hidden;
 }
 
 .rating__bar span {
   display: block;
   height: 100%;
   background: linear-gradient(90deg, var(--accent), var(--accent-2));
 }
 
 .regulators {
   display: grid;
   gap: 12px;
 }
 
 @media (min-width: 920px) {
   .regulators {
     grid-template-columns: repeat(3, 1fr);
   }
 }
 
 .reg {
   padding: 16px;
   border-radius: var(--radius);
   border: 1px solid rgba(255, 255, 255, 0.14);
   background: var(--card);
  transition: transform 180ms ease, box-shadow 180ms ease;
 }

.reg:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}
 
 .reg__top {
   display: flex;
   gap: 12px;
   align-items: center;
   margin-bottom: 10px;
 }
 
 .reg__icon {
   width: 44px;
   height: 44px;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   background: rgba(0, 0, 0, 0.2);
   display: grid;
   place-items: center;
 }
 
 .reg__icon img {
   width: 28px;
   height: 28px;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
 }
 
 .reg__title {
   font-weight: 800;
 }
 
 .reg__desc {
   color: var(--muted);
   line-height: 1.55;
 }
 
 .faq {
   display: grid;
   gap: 12px;
 }
 
 .qa {
   border-radius: var(--radius);
   border: 1px solid rgba(255, 255, 255, 0.14);
   background: var(--card);
 }
 
 .qa summary {
   cursor: pointer;
   list-style: none;
   padding: 14px 16px;
   font-weight: 800;
   display: flex;
   justify-content: space-between;
   gap: 10px;
 }
 
 .qa summary::-webkit-details-marker {
   display: none;
 }
 
 .qa .qa__a {
   padding: 0 16px 14px;
   color: var(--muted);
   line-height: 1.6;
 }
 
 .disclaimer {
   padding: 16px;
   border-radius: var(--radius-lg);
   border: 1px solid rgba(255, 255, 255, 0.16);
   background: rgba(0, 0, 0, 0.2);
   color: var(--muted);
   line-height: 1.6;
 }
 
 .page {
   padding: 36px 0;
 }
 
 .prose {
   padding: 16px;
   border-radius: var(--radius);
   border: 1px solid rgba(255, 255, 255, 0.14);
   background: var(--card);
   line-height: 1.65;
 }
 
 .site-footer {
   border-top: 1px solid rgba(255, 255, 255, 0.12);
   padding: 24px 0 32px;
   background: rgba(10, 15, 27, 0.65);
 }
 
 .footer__links {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
 }
 
 .footer__links a {
   color: var(--muted);
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   padding-bottom: 2px;
 }
 
 .fineprint {
   color: var(--muted);
   font-size: 12px;
   line-height: 1.55;
 }
 
 .modal,
 .cookie {
   position: fixed;
   inset: 0;
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 80;
 }
 
 .modal[aria-hidden="false"] {
   display: flex;
 }
 
 .modal__backdrop {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.7);
 }
 
 .modal__panel {
   position: relative;
   width: min(720px, 92%);
   padding: 18px;
   border-radius: var(--radius-lg);
   background: rgba(10, 15, 27, 0.95);
   border: 1px solid rgba(255, 255, 255, 0.2);
   box-shadow: var(--shadow);
 }
 
 .cookie {
   inset: auto 16px 16px 16px;
   z-index: 70;
 }
 
 .cookie[aria-hidden="false"] {
   display: block;
 }
 
 .cookie__inner {
   width: min(var(--container), 100%);
   margin: 0 auto;
   padding: 14px;
   border-radius: var(--radius-lg);
   border: 1px solid rgba(255, 255, 255, 0.18);
   background: rgba(10, 15, 27, 0.9);
   display: grid;
   gap: 10px;
 }
 
 @media (min-width: 900px) {
   .cookie__inner {
     grid-template-columns: 1.4fr 0.6fr;
     align-items: center;
   }
 }
 
 .cookie__text {
   color: var(--muted);
   line-height: 1.55;
 }
 
 .cookie__actions {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
   flex-wrap: wrap;
 }

@keyframes accentGlow {
  0%,
  100% {
    box-shadow: 0 0 16px rgba(76, 192, 255, 0.25);
  }
  50% {
    box-shadow: 0 0 28px rgba(123, 215, 255, 0.45);
  }
}

@keyframes pulse18 {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(123, 215, 255, 0);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 14px rgba(123, 215, 255, 0.35);
  }
}

.bg {
  background-image: url("../../identity/scenes/bg.png");
  background-size: cover;
  background-position: center;
}