:root {
   --clr-page-bg      : #021245;
   --clr-page-bg-2    : #3A194F;
   --clr-card-bg      : #FFFFFF;
   --clr-border       : #E5E8F0;
   --clr-heading      : #FFFFFF;
   --clr-body         : #FFFFFF;
   --clr-body-dark    : #000000;
   --clr-muted        : #6F7A8C;
   --clr-green        : #6EC50A;
   --clr-yellow       : #FFB800;
   --clr-bullet       : #4563FF;
   /* Footer specific colors */
   --c-bg             : #0C183C;
   --c-text-primary   : #FFFFFF;
   --c-text-secondary : #C9D2F4;
   --c-divider        : #FFFFFF1A;
   --c-accent         : #3E66FF;
   --ff-heading       : "Montserrat", "Poppins", sans-serif;
   --ff-body          : "Inter", "Open Sans", sans-serif;
   --shadow-card      : 0 4px 14px rgba(0,0,0,.08);
   --radius-card      : 8px;
   --radius-btn       : 6px;
   --container-max    : 1320px;
   --gap-page-h       : 5vw;
   --bp-tablet        : 768px;
   --bp-mobile        : 640px;
}

body {
   margin: 0;
   background: radial-gradient(circle at 100% 0%, var(--clr-page-bg-2) 0%, var(--clr-page-bg) 60%);
   font-family: var(--ff-body);
   color: var(--clr-body);
   min-height: 100vh;
   box-sizing: border-box; 
}

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

.container {
   max-width: var(--container-max);
   margin-left: auto;
   margin-right: auto;
   padding-left: var(--gap-page-h);
   padding-right: var(--gap-page-h);
}

/* HEADER and LOGO ---------------------------------------------------- */
.site-header {
   display: flex;
   align-items: center;
   padding: 20px var(--gap-page-h);
}

.site-logo {
   width: 120px;
   height: auto;
   margin-right: auto;
}

.site-logo svg {
   width: 100%;
   height: auto;
   display: block;
}

/* HERO -------------------------------------------------------------- */
.hero {
   color: var(--clr-heading);
   padding: 40px 0 60px; /* Reduced top and bottom padding */
}

.hero__inner { /* This is the .container */
   display: flex;
   gap: 80px;
}

.hero__content { flex: 1 1 60%; }
.hero h1 { font: 700 52px/1.15 var(--ff-heading); margin:0 0 16px; }
.hero__date { font: 500 18px var(--ff-body); opacity:.8; margin:0 0 32px; }

.bullet-list {
   list-style:none; 
   padding:0; 
   margin:0 0 32px;
}

.bullet-list li {
   font: 500 18px/1.4 var(--ff-body);
   padding-left:40px; 
   position:relative; 
   margin-bottom:16px;
}

.bullet-list li::before {
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   content: "\f058"; /* Font Awesome check-circle icon */
   position: absolute;
   left: 0;
   top: 0;
   font-size: 24px;
   color: var(--clr-bullet);
}

.trust-row {
   display: flex;
   gap: 24px; 
   flex-wrap: wrap;
   font: 600 14px var(--ff-body);
   list-style: none; 
   padding: 0;
   margin: 0;
}

.trust-row li { 
   display: flex; 
   align-items: center; 
} 

.trust-row li > i.fas { 
   margin-right: 8px; 
   font-size: 1em; 
   color: var(--clr-bullet);
}

.hero__art{ flex:1 1 40%; display:flex; justify-content:center; align-items:flex-start; }
.hero__art img{ width:100%; max-width:420px; height:auto; display:block; }

/* OFFER WALL -------------------------------------------------------- */
/* .offerwall { margin-top:-60px; } - Removed as requested */

/* CARD GRID (desktop) */
.casino-card {
   background: var(--clr-card-bg);
   box-shadow: var(--shadow-card);
   border-radius: var(--radius-card);
   padding: 28px 32px 0; 
   margin-bottom: 32px;
   display: grid;
   grid-template-columns: 220px 260px 240px 120px 1fr;
   align-items: stretch; 
   justify-items: center;
   position: relative;
   min-height: 140px;
}

.card__logo, 
.card__bonus,
.card__rating,
.card__score,
.card__cta {
   padding-left: 16px; 
   padding-right: 16px;
   display: flex; 
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%; 
}

.card__logo img { 
   width: 180px;
   height: 80px;
   object-fit: contain;
   display: block; 
}

.card__bonus {
   text-align: center;
   color: var(--clr-body-dark);
}

.card__bonus .label { font: 600 14px var(--ff-body); display:block; }
.card__bonus .headline { font: 700 22px var(--ff-heading); margin: 4px 0; display:block; }
.card__bonus .subline { font: 400 14px var(--ff-body); display:block; }

.card__rating { 
   text-align: center; 
   color: var(--clr-body-dark);
   border-left: 1px solid var(--clr-border);
}

.card__rating .votes { font: 400 14px var(--ff-body); display: block; margin-bottom: 6px; }
.stars { font-size: 18px; color: var(--clr-yellow); letter-spacing: 2px; }

.card__score { 
   font: 700 34px var(--ff-heading); 
   color: var(--clr-green); 
   text-align: center; 
   border-left: 1px solid var(--clr-border);
}

.card__cta {
   text-align: center; 
   gap: 8px; 
   border-left: 1px solid var(--clr-border);
}

.btn-play {
   display: inline-block;
   background: var(--clr-green);
   color: #fff;
   padding: 16px 48px;
   border-radius: var(--radius-btn);
   font: 700 16px var(--ff-heading);
   text-transform: uppercase;
   text-decoration: none;
   transition: background 0.2s;
   white-space: nowrap; 
}

.btn-play:hover, .btn-play:focus {
   background: #5aa209;
}

.review-link { font: 500 13px var(--ff-body); color: var(--clr-muted); text-decoration: underline; }

.card__legal {
   grid-column: 1/-1; 
   margin-top: 24px;
   margin-left: -32px; 
   margin-right: -32px;
   padding: 12px 32px 16px; 
   background-color: #fafafa;
   color: #5b616c;
   font-family: var(--ff-body);
   font-weight: 400;
   font-size: 11px; 
   line-height: 1.4; 
   text-align: center;
   border-top: 1px solid var(--clr-border);
   border-bottom-left-radius: var(--radius-card);
   border-bottom-right-radius: var(--radius-card);
}

/* CONTENT SECTION --------------------------------------------------- */
.content-section {
   padding: 60px 0;
   background: linear-gradient(to bottom, var(--clr-page-bg) 0%, var(--c-bg) 100%);
}

.content-section .container {
   max-width: 1200px;
}

.content-section h2 {
   font: 600 28px/1.2 var(--ff-heading);
   color: var(--c-text-primary);
   margin: 0 0 24px;
}

.content-section h3 {
   font: 600 22px/1.3 var(--ff-heading);
   color: var(--c-text-primary);
   margin: 32px 0 16px;
}

.content-section p {
   font: 400 16px/1.6 var(--ff-body);
   color: var(--c-text-secondary);
   margin: 0 0 16px;
}

/* FOOTER ------------------------------------------------------------ */
.site-footer {
   background-color: var(--c-bg);
   padding: 4rem 1.25rem;
   color: var(--c-text-primary);
}

.footer-container {
   max-width: 1200px;
   margin: 0 auto;
}

.footer-top {
   display: flex;
   justify-content: space-between;
   gap: 4rem;
   margin-bottom: 2rem;
}

.footer-brand h4 {
   font: 700 14px/1.4 var(--ff-heading);
   text-transform: uppercase;
   color: var(--c-text-primary);
   margin: 0 0 1rem;
}

.footer-info p {
   font: 400 15px/1.5 var(--ff-body);
   color: var(--c-text-secondary);
   margin: 0 0 1rem;
}

.footer-divider {
   border-top: 1px solid var(--c-divider);
   margin: 0 0 2rem;
}

.footer-trust {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 1.5rem;
   margin-bottom: 2rem;
}

.footer-trust img {
   height: 34px;
   width: auto;
}

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

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

.footer-nav a {
   color: var(--c-text-primary);
   font: 400 14px/1.5 var(--ff-body);
   text-decoration: none;
   transition: color 0.2s;
}

.footer-nav a:hover,
.footer-nav a:focus {
   color: var(--c-accent);
}

.footer-nav li:not(:last-child)::after {
   content: "·";
   padding-left: 1rem;
   color: var(--c-text-secondary);
}

.copyright {
   font: 400 14px/1.5 var(--ff-body);
   color: var(--c-text-secondary);
}

/* RESPONSIVE  <=  768px -------------------------------------------- */
@media(max-width: 768px) {
   .site-header {
      padding: 15px var(--gap-page-h);
   }
   
   .site-logo {
      width: 100px;
   }
   
   .hero {
      padding: 20px 0 40px;
   }
   
   .hero__inner { flex-direction: column; align-items: flex-start; gap: 48px; }
   .hero__art { display: none; }
   .hero h1 { font-size: 42px; }
   
   .offerwall.container {
      padding-left: 12px;
      padding-right: 12px;
   }
   
   .casino-card {
      padding: 20px 10px 0; 
      margin-bottom: 24px;
      grid-template-columns: none !important; 
      display: flex;
      flex-direction: column;
      align-items: center; 
   }
   
   .card__rating,
   .card__score,
   .card__cta {
      border-left: none; 
   }
   
   .card__logo, 
   .card__bonus,
   .card__rating,
   .card__score,
   .card__cta {
      padding-left: 8px;
      padding-right: 8px;
      text-align: center; 
      margin-bottom: 16px; 
   }
   
   .card__logo { margin-bottom: 10px; } 
   .card__cta { margin-bottom: 0; } 
   
   .card__bonus .headline {
      font-size: 18px;
   }
   
   .btn-play {
      padding: 14px 0; 
      font-size: 15px;
      width: 100%; 
   }
   
   .card__legal {
      margin-left: -10px; 
      margin-right: -10px;
      padding-left: 10px; 
      padding-right: 10px;
   }
   
   /* Footer responsive */
   .site-footer {
      padding: 3rem 1rem;
   }
   
   .footer-top {
      flex-direction: column;
      gap: 2rem;
   }
   
   .footer-trust {
      justify-content: center;
   }
   
   .footer-bottom {
      flex-direction: column;
      text-align: center;
      gap: 1.5rem;
   }
   
   .footer-nav ul {
      justify-content: center;
   }
   
   .copyright {
      order: 1;
   }
}

/* RESPONSIVE  <=  640px (mobile) ----------------------------------- */
@media(max-width: 640px) {
   .site-header {
      padding: 10px var(--gap-page-h);
   }
   
   .site-logo {
      width: 80px;
   }
   
   .hero { 
      padding: 15px 0 30px;
   }
   
   /* .offerwall { margin-top: -20px; } - Removed margin-top for mobile too */
   
   /* Mobile typography optimizations */
   .hero h1 { 
      font-size: 32px; /* Further reduced from 42px on tablet */
      line-height: 1.2;
   }
   
   .hero__date {
      font-size: 16px;
      margin-bottom: 24px;
   }
   
   .bullet-list { 
      margin-bottom: 24px;
   }
   
   .bullet-list li { 
      font-size: 14px; 
      padding-left: 28px;
      margin-bottom: 12px;
      line-height: 1.5;
   }
   
   .bullet-list li::before {
      font-size: 18px;
      top: 1px;
   }
   
   .trust-row {
      font-size: 13px;
      gap: 16px;
   }
   
   .trust-row li > i.fas {
      margin-right: 6px;
   }
   
   .offerwall.container { 
      padding-left: 4px;
      padding-right: 4px;
   }
   
   .casino-card {
      padding: 16px 4px 0; 
      margin-bottom: 16px;
   }
   
   .card__logo, 
   .card__bonus,
   .card__cta { 
      padding-left: 4px;
      padding-right: 4px;
   }
   
   .card__logo img { 
      width: 120px;
      height: 60px;
   }
   
   .card__bonus .headline { 
      font-size: 16px;
      line-height: 1.2;
   }
   
   .card__bonus .label { 
      font-size: 11px;
      letter-spacing: 0.5px;
   }
   
   .card__bonus .subline { 
      font-size: 12px;
      line-height: 1.3;
   }
   
   .card__rating, .card__score { display: none; } 
   
   .btn-play {
      font-size: 14px;
      padding: 12px 0;
   }
   
   .review-link {
      font-size: 12px;
   }
   
   .card__cta { gap: 6px; }
   
   .card__legal {
      margin-left: -4px; 
      margin-right: -4px;
      padding: 10px 4px 12px;
      font-size: 10px;
   }
   
   /* Content section mobile */
   .content-section {
      padding: 40px 0;
   }
   
   .content-section h2 {
      font-size: 24px;
   }
   
   .content-section h3 {
      font-size: 20px;
   }
   
   .content-section p {
      font-size: 14px;
   }
   
   /* Footer mobile */
   .footer-nav ul {
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
   }
   
   .footer-nav li:not(:last-child)::after {
      display: none;
   }
   
   .footer-trust {
      gap: 1rem;
   }
   
   .footer-trust img {
      height: 30px;
   }
}

    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        justify-content: center;
        align-items: center;
    }
    .modal-content {
        background-color: #066aab;
        padding: 20px;
        border-radius: 8px;
        text-align: center;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }
    .modal-content img {
        max-width: 100px;
        margin-bottom: 20px;
    }
    .modal-content h1 {
        color: #fff;
        margin-bottom: 20px;
    }
    .modal-content p {
        color: #fff;
        margin-bottom: 20px;
        max-width: 80%;
    }
    .modal-content label {
        display: block;
        margin: 20px 0;
        color: #fff;
        font-weight: 700;
    }
    .modal-content button {
        padding: 10px 20px;
        background-color: #FFA500;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
    }
    .modal-content button:disabled {
        background-color: #aaa;
    }