:root {
   --bg-0: #07111f;
   --bg-1: #0b1728;
   --bg-2: #12233a;
   --panel: rgba(10, 18, 34, 0.72);
   --panel-strong: rgba(17, 28, 48, 0.94);
   --panel-soft: rgba(255, 255, 255, 0.06);
   --line: rgba(255, 255, 255, 0.12);
   --line-strong: rgba(255, 255, 255, 0.2);
   --text: #f7fbff;
   --text-soft: rgba(247, 251, 255, 0.78);
   --text-faint: rgba(247, 251, 255, 0.6);
   --accent: #6ee7ff;
   --accent-2: #ffb36b;
   --accent-3: #84f7b4;
   --shadow-lg: 0 24px 60px rgba(1, 8, 18, 0.38);
   --shadow-md: 0 14px 30px rgba(1, 8, 18, 0.26);
   --radius-xl: 28px;
   --radius-lg: 22px;
   --radius-md: 16px;
   --radius-sm: 12px;
   --container-max: 1280px;
   --gap-page-h: clamp(18px, 3vw, 34px);
   --ff-heading: "Cormorant Garamond", "Georgia", serif;
   --ff-body: "Inter", "Segoe UI", sans-serif;
}

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

html {
   scroll-behavior: smooth;
}

body {
   margin: 0;
   min-height: 100vh;
   font-family: var(--ff-body);
   color: var(--text);
   background:
      radial-gradient(circle at top left, rgba(110, 231, 255, 0.16), transparent 30%),
      radial-gradient(circle at 85% 15%, rgba(255, 179, 107, 0.12), transparent 28%),
      radial-gradient(circle at bottom center, rgba(132, 247, 180, 0.12), transparent 24%),
      linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 46%, var(--bg-2) 100%);
   position: relative;
   overflow-x: hidden;
}

body::before {
   content: "";
   position: fixed;
   inset: 0;
   pointer-events: none;
   background-image:
      linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
   background-size: 80px 80px;
   mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 85%);
   opacity: 0.35;
}

a {
   color: inherit;
}

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

.container {
   width: min(var(--container-max), calc(100% - (var(--gap-page-h) * 2)));
   margin-inline: auto;
}

.site-header {
   position: sticky;
   top: 0;
   z-index: 20;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 18px var(--gap-page-h);
   background: rgba(7, 17, 31, 0.55);
   backdrop-filter: blur(16px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-logo a {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   text-decoration: none;
}

.site-logo h1 {
   margin: 0;
   font: 700 clamp(1.5rem, 2vw, 2rem)/1 var(--ff-heading);
   letter-spacing: 0.02em;
}

.site-logo h1::after {
   content: "HR";
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-left: 10px;
   padding: 0.18rem 0.5rem;
   border-radius: 999px;
   background: rgba(110, 231, 255, 0.14);
   color: var(--accent);
   font: 600 0.7rem/1 var(--ff-body);
   letter-spacing: 0.12em;
   vertical-align: middle;
}

.site-nav {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
}

.site-nav a {
   padding: 10px 14px;
   border-radius: 999px;
   text-decoration: none;
   color: var(--text-soft);
   border: 1px solid transparent;
   transition: 0.25s ease;
}

.site-nav a:hover,
.site-nav a:focus {
   color: var(--text);
   border-color: rgba(255, 255, 255, 0.16);
   background: rgba(255, 255, 255, 0.05);
}

.hero {
   padding: clamp(34px, 5vw, 72px) 0 clamp(24px, 4vw, 48px);
}

.hero__inner {
   display: grid;
   grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
   gap: clamp(28px, 5vw, 72px);
   align-items: center;
}

.hero__content {
   position: relative;
   padding: clamp(24px, 3vw, 38px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: var(--radius-xl);
   background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
      rgba(8, 15, 28, 0.74);
   box-shadow: var(--shadow-lg);
   overflow: hidden;
}

.hero__content::after {
   content: "";
   position: absolute;
   inset: auto -10% -35% auto;
   width: 260px;
   height: 260px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(110, 231, 255, 0.16), transparent 72%);
   pointer-events: none;
}

.hero__eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 18px;
   padding: 8px 14px;
   border-radius: 999px;
   background: rgba(110, 231, 255, 0.12);
   color: var(--accent);
   font: 600 0.88rem/1 var(--ff-body);
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.hero__eyebrow::before {
   content: "";
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--accent-3);
   box-shadow: 0 0 0 6px rgba(132, 247, 180, 0.12);
}

.hero h1 {
   margin: 0 0 16px;
   font: 700 clamp(2.8rem, 6vw, 5.3rem)/0.95 var(--ff-heading);
   letter-spacing: -0.03em;
}

.hero__lede {
   margin: 0 0 24px;
   max-width: 62ch;
   color: var(--text-soft);
   font-size: 1.05rem;
   line-height: 1.7;
}

.hero__date {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin: 0 0 24px;
   padding: 10px 14px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.08);
   color: var(--text-soft);
   font-size: 0.92rem;
}

.hero__date::before {
   content: "";
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--accent-2);
}

.bullet-list {
   display: grid;
   gap: 14px;
   list-style: none;
   padding: 0;
   margin: 0 0 24px;
}

.bullet-list li {
   position: relative;
   padding: 16px 16px 16px 52px;
   border-radius: var(--radius-md);
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.08);
   color: var(--text);
   line-height: 1.55;
}

.bullet-list li::before {
   content: "✓";
   position: absolute;
   left: 16px;
   top: 50%;
   transform: translateY(-50%);
   display: grid;
   place-items: center;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: rgba(132, 247, 180, 0.14);
   color: var(--accent-3);
   font-weight: 700;
}

.trust-row {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   list-style: none;
   padding: 0;
   margin: 0;
}

.trust-row li {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 14px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.08);
   color: var(--text-soft);
   font-size: 0.88rem;
   font-weight: 600;
}

.trust-row i {
   color: var(--accent);
}

.hero__art {
   display: grid;
   place-items: center;
   gap: 22px;
   padding: 12px;
   border-radius: calc(var(--radius-xl) + 8px);
   background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
      rgba(10, 18, 34, 0.72);
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: var(--shadow-lg);
}

.hero__art img {
   width: min(100%, 500px);
   height: auto;
   filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.3));
}

.hero__art .bullet-list {
   width: 100%;
   margin: 0;
}

.offerwall {
   display: grid;
   gap: 18px;
   padding-bottom: clamp(26px, 4vw, 48px);
}

.casino-card {
   position: relative;
   display: grid;
   grid-template-columns: 1.1fr 1.2fr 0.72fr auto auto;
   align-items: center;
   gap: 0;
   overflow: hidden;
   padding: 22px 0;
   border-radius: var(--radius-xl);
   border: 1px solid rgba(255, 255, 255, 0.1);
   background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
   box-shadow: var(--shadow-md);
   backdrop-filter: blur(12px);
   transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.casino-card::before {
   content: "";
   position: absolute;
   inset: 0 auto 0 0;
   width: 6px;
   background: linear-gradient(180deg, var(--accent), var(--accent-2));
}

.casino-card:hover {
   transform: translateY(-2px);
   border-color: rgba(255, 255, 255, 0.18);
   box-shadow: 0 26px 48px rgba(1, 8, 18, 0.34);
}

.card__logo,
.card__bonus,
.card__rating,
.card__score,
.card__cta {
   padding: 0 22px;
}

.card__logo {
   display: flex;
   justify-content: center;
   align-items: center;
}

.card__logo img {
   width: min(180px, 100%);
   max-height: 72px;
   object-fit: contain;
}

.card__bonus {
   display: grid;
   gap: 4px;
   color: var(--text);
}

.card__bonus .label {
   color: var(--text-faint);
   font-size: 0.78rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
}

.card__bonus .headline {
   font: 700 clamp(1.45rem, 2vw, 2rem)/1.05 var(--ff-heading);
}

.card__bonus .subline {
   color: var(--text-soft);
   font-size: 0.98rem;
}

.card__rating {
   border-left: 1px solid rgba(255, 255, 255, 0.1);
   display: grid;
   justify-items: center;
   gap: 8px;
}

.card__rating .votes {
   color: var(--text-soft);
   font-size: 0.92rem;
}

.stars {
   color: #ffd36d;
   letter-spacing: 0.14em;
   font-size: 1rem;
}

.card__score {
   border-left: 1px solid rgba(255, 255, 255, 0.1);
   display: grid;
   place-items: center;
   font: 700 clamp(2rem, 3vw, 3rem)/1 var(--ff-heading);
   color: var(--accent-3);
}

.card__cta {
   border-left: 1px solid rgba(255, 255, 255, 0.1);
   display: grid;
   justify-items: center;
   gap: 10px;
}

.btn-play {
   position: relative;
   overflow: hidden;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 180px;
   padding: 15px 28px;
   border-radius: 999px;
   border: 0;
   text-decoration: none;
   color: #08111f;
   background: linear-gradient(135deg, var(--accent) 0%, #b7f0ff 100%);
   box-shadow: 0 14px 28px rgba(110, 231, 255, 0.26);
   font: 700 0.92rem/1 var(--ff-body);
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.btn-play::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.35), transparent 80%);
   transform: translateX(-120%);
}

.btn-play:hover::after,
.btn-play:focus::after {
   animation: shimmer 1s ease;
}

.btn-play:hover,
.btn-play:focus {
   transform: translateY(-1px);
}

.review-link {
   color: var(--text-soft);
   text-decoration: none;
   font-size: 0.88rem;
}

.review-link:hover,
.review-link:focus {
   color: var(--text);
   text-decoration: underline;
}

.card__legal {
   grid-column: 1 / -1;
   margin-top: 18px;
   padding: 14px 22px 0;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   color: var(--text-faint);
   text-align: center;
   font-size: 0.75rem;
   line-height: 1.5;
}

.content-section {
   padding: clamp(48px, 6vw, 88px) 0;
}

.content-section .container {
   position: relative;
   display: grid;
   gap: 28px;
   padding: clamp(24px, 3vw, 40px);
   border-radius: calc(var(--radius-xl) + 6px);
   border: 1px solid rgba(255, 255, 255, 0.08);
   background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)),
      rgba(8, 15, 28, 0.72);
   box-shadow: var(--shadow-lg);
}

.content-section .container::before {
   content: "";
   position: absolute;
   inset: 18px 18px auto auto;
   width: 220px;
   height: 220px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(255, 179, 107, 0.12), transparent 70%);
   pointer-events: none;
}

.content-section h2 {
   margin: 0;
   font: 700 clamp(1.7rem, 3vw, 2.4rem)/1.05 var(--ff-heading);
   letter-spacing: -0.02em;
}

.content-section p {
   margin: 0;
   color: var(--text-soft);
   font-size: 1rem;
   line-height: 1.8;
   max-width: 82ch;
}

.site-footer {
   margin-top: clamp(20px, 3vw, 40px);
   padding: clamp(34px, 5vw, 64px) 0;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(4, 9, 18, 0.75);
   backdrop-filter: blur(14px);
}

.footer-container {
   width: min(1200px, calc(100% - (var(--gap-page-h) * 2)));
   margin-inline: auto;
}

.footer-top {
   display: grid;
   grid-template-columns: 220px minmax(0, 1fr);
   gap: 24px;
   margin-bottom: 24px;
}

.footer-brand h4 {
   margin: 0;
   font: 700 0.95rem/1.4 var(--ff-body);
   text-transform: uppercase;
   letter-spacing: 0.12em;
   color: var(--accent);
}

.footer-info p {
   margin: 0 0 14px;
   color: var(--text-soft);
   font-size: 0.96rem;
   line-height: 1.7;
}

.footer-divider {
   height: 1px;
   margin: 24px 0;
   background: rgba(255, 255, 255, 0.1);
}

.footer-trust {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 16px;
   margin-bottom: 24px;
}

.footer-trust a,
.footer-trust img {
   height: 34px;
   width: auto;
   object-fit: contain;
}

.footer-bottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 18px;
   flex-wrap: wrap;
}

.footer-nav ul {
   display: flex;
   flex-wrap: wrap;
   gap: 0;
   list-style: none;
   padding: 0;
   margin: 0;
}

.footer-nav li {
   display: inline-flex;
   align-items: center;
}

.footer-nav li:not(:last-child)::after {
   content: "·";
   padding: 0 14px;
   color: var(--text-faint);
}

.footer-nav a {
   color: var(--text-soft);
   text-decoration: none;
   font-size: 0.92rem;
}

.footer-nav a:hover,
.footer-nav a:focus {
   color: var(--text);
   text-decoration: underline;
}

.copyright {
   color: var(--text-faint);
   font-size: 0.9rem;
}

.page-shell {
   width: min(1000px, calc(100% - (var(--gap-page-h) * 2)));
   margin: clamp(28px, 4vw, 56px) auto;
   padding: clamp(24px, 3vw, 40px);
   border-radius: calc(var(--radius-xl) + 4px);
   border: 1px solid rgba(255, 255, 255, 0.08);
   background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)),
      rgba(8, 15, 28, 0.78);
   box-shadow: var(--shadow-lg);
}

.page-hero {
   display: grid;
   gap: 14px;
   margin-bottom: 28px;
}

.page-hero__eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   width: fit-content;
   padding: 8px 14px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.05);
   color: var(--accent);
   font-size: 0.8rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
}

.page-hero__eyebrow::before {
   content: "";
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--accent-2);
}

.page-hero h1 {
   margin: 0;
   font: 700 clamp(2rem, 4vw, 3.2rem)/1 var(--ff-heading);
   letter-spacing: -0.03em;
}

.page-hero p {
   margin: 0;
   color: var(--text-soft);
   line-height: 1.75;
   max-width: 72ch;
}

.page-body h2 {
   margin: 30px 0 10px;
   font: 700 clamp(1.4rem, 2.4vw, 1.9rem)/1.15 var(--ff-heading);
}

.page-body p,
.page-body li {
   color: var(--text-soft);
   line-height: 1.8;
   font-size: 0.98rem;
}

.page-body ul {
   margin: 0 0 16px;
   padding-left: 22px;
}

.contact-card {
   display: grid;
   gap: 22px;
   max-width: 760px;
}

.contact-form {
   display: grid;
   gap: 16px;
}

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

.field {
   display: grid;
   gap: 8px;
}

.field label {
   color: var(--text);
   font-size: 0.92rem;
   font-weight: 600;
}

.field input,
.field textarea {
   width: 100%;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 16px;
   background: rgba(255, 255, 255, 0.04);
   color: var(--text);
   padding: 14px 16px;
   font: 400 0.98rem/1.5 var(--ff-body);
   outline: none;
   transition: 0.2s ease;
}

.field input::placeholder,
.field textarea::placeholder {
   color: rgba(247, 251, 255, 0.42);
}

.field input:focus,
.field textarea:focus {
   border-color: rgba(110, 231, 255, 0.45);
   box-shadow: 0 0 0 4px rgba(110, 231, 255, 0.1);
}

.form-actions {
   display: flex;
   justify-content: flex-start;
}

.form-actions .btn-play {
   min-width: 200px;
}

.legal-note {
   margin: 10px 0 0;
   color: var(--text-faint);
   font-size: 0.84rem;
   line-height: 1.6;
}

.modal {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 1000;
   align-items: center;
   justify-content: center;
   padding: 20px;
   background: rgba(3, 7, 14, 0.82);
   backdrop-filter: blur(8px);
}

.modal-content {
   width: min(560px, 100%);
   padding: clamp(24px, 4vw, 40px);
   border-radius: calc(var(--radius-xl) + 6px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   background:
      radial-gradient(circle at top, rgba(110, 231, 255, 0.16), transparent 42%),
      linear-gradient(180deg, rgba(17, 28, 48, 0.98), rgba(8, 15, 28, 0.98));
   box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
   text-align: center;
}

.modal-content img {
   width: 96px;
   margin: 0 auto 18px;
}

.modal-content h1 {
   margin: 0 0 12px;
   font: 700 clamp(1.8rem, 3vw, 2.5rem)/1 var(--ff-heading);
}

.modal-content p {
   margin: 0 auto 14px;
   max-width: 42ch;
   color: var(--text-soft);
   line-height: 1.7;
}

.modal-content label {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin: 18px 0;
   color: var(--text);
   font-weight: 600;
}

.modal-content input[type="checkbox"] {
   width: 18px;
   height: 18px;
   accent-color: var(--accent);
}

.modal-content button {
   appearance: none;
   border: 0;
   border-radius: 999px;
   padding: 14px 24px;
   background: linear-gradient(135deg, var(--accent-2) 0%, #ffd28e 100%);
   color: #08111f;
   font: 700 0.95rem/1 var(--ff-body);
   cursor: pointer;
}

.modal-content button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
}

.modal-content button:not(:disabled):hover {
   transform: translateY(-1px);
}

@keyframes shimmer {
   from { transform: translateX(-120%); }
   to { transform: translateX(120%); }
}

@media (max-width: 920px) {
   .hero__inner,
   .footer-top {
      grid-template-columns: 1fr;
   }

   .casino-card {
      grid-template-columns: 1fr 1fr;
      gap: 16px 0;
      padding: 22px 0 18px;
   }

   .card__logo,
   .card__bonus,
   .card__rating,
   .card__score,
   .card__cta {
      padding-inline: 18px;
   }

   .card__rating,
   .card__score,
   .card__cta {
      border-left: 0;
   }

   .card__cta {
      grid-column: 1 / -1;
      padding-top: 4px;
   }
}

@media (max-width: 700px) {
   .site-header {
      position: static;
      flex-direction: column;
      align-items: flex-start;
   }

   .hero {
      padding-top: 20px;
   }

   .hero__content,
   .page-shell,
   .content-section .container {
      border-radius: 22px;
   }

   .hero h1 {
      font-size: clamp(2.2rem, 11vw, 3.4rem);
   }

   .bullet-list li {
      padding: 14px 14px 14px 48px;
   }

   .bullet-list li::before {
      left: 14px;
   }

   .trust-row {
      gap: 10px;
   }

   .trust-row li {
      padding: 9px 12px;
   }

   .casino-card {
      grid-template-columns: 1fr;
   }

   .card__rating,
   .card__score,
   .card__cta {
      border-left: 0;
   }

   .card__score {
      justify-items: start;
      padding-top: 2px;
   }

   .btn-play,
   .form-actions .btn-play {
      width: 100%;
      min-width: 0;
   }

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

   .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
   }

   .footer-nav li:not(:last-child)::after {
      padding-inline: 10px;
   }
}