 :root {
     /* Colors */
     --color-primary: #3667E3;
     --color-primary-dark: #2a55c2;
     --color-text-light: #f4f7f9;
     --color-text-dark: #2e353c;
     --color-gray-100: #f7f9fc;
     --color-gray-200: #e2e8f0;
     --color-gray-300: #cbd5e0;
     --color-gray-400: #94a3b8;
     --color-gray-500: #64748b;
     --color-white: #ffffff;
     --color-black: #000000;

     --theme-bg: var(--color-white);
     --theme-surface: var(--color-gray-100);
     --theme-text: var(--color-text-dark);
     --theme-text-secondary: var(--color-gray-500);
     --theme-border: var(--color-gray-200);
     --theme-card-bg: var(--color-white);

     /* Dark Theme */
     --dark-theme-bg: #1a202c;
     --dark-theme-surface: #2d3748;
     --dark-theme-text: var(--color-text-light);
     --dark-theme-text-secondary: var(--color-gray-400);
     --dark-theme-border: #4a5568;
     --dark-theme-card-bg: #2d3748;

     /* Spacing */
     --space-sm: 8px;
     --space-md: 16px;
     --space-lg: 24px;
     --space-xl: 48px;

     /* Typography */
     --font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     --font-size-body: 1rem;
     --font-size-heading1: 2.5rem;
     --font-size-heading2: 2rem;
     --font-size-heading3: 1.5rem;

     /* Border Radius */
     --radius-sm: 8px;
     --radius-md: 16px;

     /* Box Shadow */
     --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
     --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

 /* ==========================================================================
   Base Styles
   ========================================================================== */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: var(--font-family-system);
     line-height: 1.6;
     background-color: var(--theme-bg);
     color: var(--theme-text);
     transition: background-color 0.3s, color 0.3s;
 }

 body.theme-dark {
     --theme-bg: var(--dark-theme-bg);
     --theme-surface: var(--dark-theme-surface);
     --theme-text: var(--dark-theme-text);
     --theme-text-secondary: var(--dark-theme-text-secondary);
     --theme-border: var(--dark-theme-border);
     --theme-card-bg: var(--dark-theme-card-bg);
 }

 a {
     color: var(--color-primary);
     text-decoration: none;
     transition: color 0.3s;
 }

 a:hover,
 a:focus {
     color: var(--color-primary-dark);
 }

 h1,
 h2,
 h3 {
     margin-bottom: var(--space-md);
     line-height: 1.2;
 }

 h1 {
     font-size: var(--font-size-heading1);
 }

 h2 {
     font-size: var(--font-size-heading2);
 }

 h3 {
     font-size: var(--font-size-heading3);
 }

 p {
     margin-bottom: var(--space-md);
 }

 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 var(--space-md);
 }

 .section {
     padding: var(--space-xl) 0;
 }

 .section__title {
     text-align: center;
     margin-bottom: var(--space-xl);
 }

 .btn {
     display: inline-block;
     padding: var(--space-sm) var(--space-md);
     border-radius: var(--radius-sm);
     font-weight: bold;
     text-align: center;
     cursor: pointer;
     border: none;
     transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
 }

 .btn--primary {
     background-color: var(--color-primary);
     color: var(--color-white);
 }

 .btn--primary:hover,
 .btn--primary:focus {
     background-color: var(--color-primary-dark);
     box-shadow: var(--shadow-sm);
     color: white;
 }

 .btn--secondary {
     background-color: transparent;
     border: 2px solid var(--color-primary);
     color: var(--color-primary);
 }

 .btn--secondary:hover,
 .btn--secondary:focus {
     background-color: var(--color-primary);
     color: var(--color-white);
     box-shadow: var(--shadow-sm);
 }

 .btn--outline {
     background-color: transparent;
     border: 1px solid var(--theme-border);
     color: var(--theme-text);
 }

 .btn--outline:hover,
 .btn--outline:focus {
     background-color: var(--theme-border);
 }

 .btn-icon {
     background: none;
     border: none;
     color: var(--theme-text);
     font-size: 1.5rem;
     cursor: pointer;
     transition: color 0.3s;
 }

 .btn-icon:hover,
 .btn-icon:focus {
     color: var(--color-primary);
 }

 /* ==========================================================================
   Header & Navigation
   ========================================================================== */
 .header {
     position: fixed;
     width: 100%;
     top: 0;
     left: 0;
     z-index: 100;
     background-color: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid var(--theme-border);
     transition: background-color 0.3s, border-color 0.3s;
 }

 .theme-dark .header {
     background-color: rgba(26, 32, 44, 0.95);
     border-color: var(--dark-theme-border);
 }

 .header__container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: var(--space-sm) var(--space-md);
 }

 .logo {
     font-size: 1.5rem;
     font-weight: bold;
     color: var(--color-primary);
 }

 .logo i {
     color: var(--color-text-dark);
 }

 .theme-dark .logo i {
     color: var(--color-text-light);
 }

 .nav {
     display: none;
 }

 .nav__list {
     display: flex;
     list-style: none;
     gap: var(--space-md);
 }

 .nav__link {
     font-weight: bold;
     color: var(--theme-text);
 }

 .nav__link:hover {
     color: var(--color-primary);
 }

 .header__actions {
     display: flex;
     align-items: center;
     gap: var(--space-md);
 }

 .menu-toggle {
     background: none;
     border: none;
     font-size: 1.5rem;
     color: var(--theme-text);
     cursor: pointer;
 }

 .mobile-menu {
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     background-color: var(--theme-surface);
     border-bottom: 1px solid var(--theme-border);
     padding: var(--space-md);
     transform: translateY(-100%);
     opacity: 0;
     pointer-events: none;
     transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
 }

 .mobile-menu.is-active {
     transform: translateY(0);
     opacity: 1;
     pointer-events: auto;
 }

 .mobile-menu__list {
     list-style: none;
 }

 .mobile-menu__item {
     margin-bottom: var(--space-sm);
 }

 .mobile-menu__link {
     display: block;
     padding: var(--space-sm) 0;
     font-weight: bold;
     color: var(--theme-text);
 }

 /* ==========================================================================
   Hero Section
   ========================================================================== */
 .hero {
     padding-top: 100px;
     padding-bottom: var(--space-xl);
     text-align: center;
 }

 .hero__container {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: var(--space-xl);
 }

 .hero__title {
     font-size: 2.5rem;
 }

 .hero__subtitle {
     font-size: 1.1rem;
     color: var(--theme-text-secondary);
 }

 .hero__actions {
     display: flex;
     flex-direction: column;
     gap: var(--space-sm);
     margin-top: var(--space-md);
 }

 .hero__image-placeholder {
     width: 100%;
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-md);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--theme-text-secondary);
     font-style: italic;
 }

 .hero__image-placeholder img {
     width: 100%;
     border-radius: var(--radius-md);
 }

 /* ==========================================================================
   Cards & Grids
   ========================================================================== */
 .cards-grid,
 .steps-grid,
 .payment-methods-grid {
     display: grid;
     gap: var(--space-md);
 }

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

 .card {
     background-color: var(--theme-card-bg);
     border: 1px solid var(--theme-border);
     border-radius: var(--radius-md);
     padding: var(--space-md);
     box-shadow: var(--shadow-sm);
     transition: transform 0.3s;
 }

 .card:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
 }

 .bookmaker-card {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
 }

 .bookmaker-card__logo-placeholder {
     width: 100%;
     height: 80px;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: var(--theme-surface);
     border-radius: var(--radius-sm);
     margin-bottom: var(--space-md);
     font-size: 0.9rem;
     color: var(--theme-text-secondary);
 }

 .bookmaker-card__logo-placeholder img {
     height: 80px;
 }

 .bookmaker-card__tags {
     list-style: none;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: var(--space-sm);
     margin: var(--space-md) 0;
     color: var(--theme-text-secondary);
 }

 .bookmaker-card__tags i {
     color: var(--color-primary);
     margin-right: 5px;
 }

 .bookmaker-card__bonus {
     background-color: var(--theme-surface);
     padding: var(--space-sm);
     border-radius: var(--radius-sm);
     margin-bottom: var(--space-md);
 }

 .placeholder-text {
     color: var(--theme-text-secondary);
     font-style: italic;
     font-size: 0.9rem;
 }

 .bookmaker-card__disclaimer {
     font-size: 0.8rem;
     color: var(--color-gray-500);
     margin-top: var(--space-sm);
 }

 .badge {
     background-color: var(--color-primary);
     color: var(--color-white);
     padding: 4px 8px;
     border-radius: var(--radius-sm);
     font-size: 0.8rem;
     font-weight: bold;
     display: inline-block;
     margin-top: var(--space-sm);
 }

 .steps-grid {
     grid-template-columns: 1fr;
     text-align: center;
 }

 .step-card {
     background-color: var(--theme-surface);
     padding: var(--space-md);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-sm);
 }

 .step-card__icon {
     font-size: 2.5rem;
     color: var(--color-primary);
     margin-bottom: var(--space-sm);
 }

 /* ==========================================================================
   Comparison Table
   ========================================================================== */
 .comparison-table {
     width: 100%;
     overflow-x: auto;
     background-color: var(--theme-card-bg);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-sm);
 }

 .comparison-table__header,
 .comparison-table__row {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     border-bottom: 1px solid var(--theme-border);
 }

 .comparison-table__header {
     font-weight: bold;
     background-color: var(--theme-surface);
     padding: var(--space-sm) 0;
 }

 .comparison-table__cell {
     padding: var(--space-sm);
     text-align: center;
     word-break: break-word;
 }

 .comparison-table__cell i {
     color: var(--color-primary);
 }

 /* ==========================================================================
   Other Sections
   ========================================================================== */
 .payment-methods-grid {
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     text-align: center;
 }

 .payment-method-card {
     background-color: var(--theme-card-bg);
     padding: var(--space-md);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-sm);
     transition: transform 0.3s;
 }

 .payment-method-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
 }

 .payment-method-card__icon-placeholder {
     width: 96px;
     height: 96px;
     margin: 0 auto var(--space-sm);
     background-color: var(--theme-surface);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.8rem;
     color: var(--theme-text-secondary);
 }

 .payment-method-card__icon-placeholder img {
     width: 100%;
     background: white;
     padding: 10px;
     border-radius: 10px;
 }

 .mobile-app-section {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: var(--space-md);
     text-align: center;
 }

 .mobile-app__image-placeholder {
     width: 100%;
     max-width: 640px;
     height: 200px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--theme-text-secondary);
     font-style: italic;
 }

 .mobile-app__image-placeholder img {
     width: 100%;
     border-radius: var(--radius-md);

 }

 /* ==========================================================================
   Accordion (FAQ)
   ========================================================================== */
 .accordion {
     max-width: 800px;
     margin: 0 auto;
 }

 .accordion__item {
     border-bottom: 1px solid var(--theme-border);
 }

 .accordion__button {
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: var(--space-md);
     background: none;
     border: none;
     cursor: pointer;
     font-size: 1.1rem;
     font-weight: bold;
     color: var(--theme-text);
     text-align: left;
 }

 .accordion__button:hover {
     color: var(--color-primary);
 }

 .accordion__icon {
     font-size: 1.5rem;
     transition: transform 0.3s;
 }

 .accordion__button[aria-expanded="true"] .accordion__icon {
     transform: rotate(45deg);
 }

 .accordion__content {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease-in-out;
     padding: 0 var(--space-md);
 }

 .accordion__content.is-expanded {
     max-height: 500px;
     /* A safe value, can be adjusted or calculated with JS */
     padding: var(--space-md);
 }

 /* ==========================================================================
   Contact Section
   ========================================================================== */
 .contact-grid {
     display: grid;
     gap: var(--space-md);
     grid-template-columns: 1fr;
 }

 .contact-form {
     background-color: var(--theme-card-bg);
     padding: var(--space-md);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-sm);
 }

 .form-group {
     margin-bottom: var(--space-md);
 }

 .form-group label {
     display: block;
     margin-bottom: 5px;
     font-weight: bold;
 }

 .form-group input,
 .form-group textarea {
     width: 100%;
     padding: 10px;
     border: 1px solid var(--theme-border);
     border-radius: var(--radius-sm);
     background-color: var(--theme-surface);
     color: var(--theme-text);
     transition: border-color 0.3s;
 }

 .form-group input:focus,
 .form-group textarea:focus {
     outline: none;
     border-color: var(--color-primary);
 }

 .contact-info {
     padding: var(--space-md);
     background-color: var(--theme-surface);
     border-radius: var(--radius-md);
 }

 .contact-info i {
     color: var(--color-primary);
     margin-right: 8px;
 }

 /* ==========================================================================
   Footer
   ========================================================================== */
 .footer {
     background-color: var(--theme-surface);
     padding: var(--space-xl) 0 var(--space-sm);
     border-top: 1px solid var(--theme-border);
 }

 .footer__container {
     display: grid;
     grid-template-columns: 1fr;
     gap: var(--space-md);
     margin-bottom: var(--space-lg);
 }

 .footer__links-section h4 {
     margin-bottom: var(--space-sm);
     font-size: 1rem;
 }

 .footer__links {
     list-style: none;
 }

 .footer__links li {
     margin-bottom: 5px;
 }

 .footer__links a {
     color: var(--theme-text-secondary);
 }

 .footer__links a:hover {
     color: var(--color-primary);
 }

 .footer__compliance {
     margin-top: var(--space-md);
 }

 .footer__responsible-gaming {
     font-size: 0.9rem;
     color: var(--theme-text-secondary);
     margin-bottom: var(--space-sm);
 }

 .compliance-logos {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--space-sm);
 }

 .compliance-logo {
     height: 40px;
     filter: grayscale(100%);
     opacity: 0.6;
 }

 .compliance-logo:hover {
     filter: grayscale(0%);
     opacity: 0.6;
 }

 .footer__copyright {
     text-align: center;
     border-top: 1px solid var(--theme-border);
     padding-top: var(--space-sm);
     font-size: 0.8rem;
     color: var(--theme-text-secondary);
 }

 /* ==========================================================================
   Overlays & Banners
   ========================================================================== */
 .age-gate {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.8);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;
 }

 .age-gate.hidden {
     display: none;
 }

 .age-gate__content {
     background-color: var(--theme-card-bg);
     padding: var(--space-lg);
     border-radius: var(--radius-md);
     text-align: center;
     max-width: 450px;
     box-shadow: var(--shadow-md);
 }

 .cookie-banner {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     background-color: var(--theme-surface);
     border-top: 1px solid var(--theme-border);
     padding: var(--space-md);
     transform: translateY(100%);
     opacity: 0;
     transition: transform 0.5s ease-out, opacity 0.5s ease-out;
     z-index: 50;
 }

 .cookie-banner.visible {
     transform: translateY(0);
     opacity: 1;
 }

 .cookie-banner__content {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: var(--space-md);
 }

 .cookie-banner__actions {
     display: flex;
     gap: var(--space-sm);
     flex-wrap: wrap;
 }

 /* ==========================================================================
   Responsive Utilities
   ========================================================================== */
 /* ==========================================================================
   Jogo Responsável Section (Updated)
   ========================================================================== */
 .section--responsible-gaming {
     background-color: var(--theme-surface);
     border-top: 1px solid var(--theme-border);
     border-bottom: 1px solid var(--theme-border);
 }

 .responsible-gaming-container {
     padding-top: var(--space-xl);
     padding-bottom: var(--space-xl);
 }

 .responsible-gaming__content {
     display: flex;
     flex-direction: column;
     gap: var(--space-lg);
 }

 .responsible-gaming__text-block h3 {
     margin-top: var(--space-md);
     color: var(--color-primary-dark);
 }

 .responsible-gaming__symptoms,
 .responsible-gaming__tools {
     list-style: none;
     margin-bottom: var(--space-lg);
 }

 .responsible-gaming__symptoms li,
 .responsible-gaming__tools li {
     margin-bottom: var(--space-sm);
     color: var(--theme-text);
 }

 .responsible-gaming__symptoms i {
     color: #e53e3e;
     /* Red color for warning */
     margin-right: 8px;
 }

 .responsible-gaming__tools i {
     color: #48bb78;
     /* Green color for tools */
     margin-right: 8px;
 }

 .responsible-gaming__tips-block {
     display: flex;
     flex-direction: column;
     gap: var(--space-md);
 }

 .responsible-gaming__card {
     background-color: var(--theme-card-bg);
     padding: var(--space-lg);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-md);
     border: 1px solid var(--theme-border);
 }

 .responsible-gaming__card ul {
     list-style: none;
 }

 .responsible-gaming__card li {
     margin-bottom: var(--space-sm);
     color: var(--theme-text-secondary);
 }

 .responsible-gaming__card i {
     color: var(--color-primary);
     margin-right: 8px;
 }

 .responsible-gaming__help-box {
     padding: var(--space-md);
     background-color: var(--theme-surface);
     border-left: 4px solid var(--color-primary);
     border-radius: var(--radius-sm);
 }

 .responsible-gaming__help-box p {
     margin-bottom: 0;
 }


 /* Media Queries for better layout on larger screens */
 @media (min-width: 768px) {
     .responsible-gaming__content {
         flex-direction: row;
         align-items: flex-start;
         gap: var(--space-xl);
     }

     .responsible-gaming__text-block,
     .responsible-gaming__tips-block {
         flex: 1;
     }
 }

 .d-none {
     display: none;
 }

 .d-md-inline {
     display: none;
 }

 @media (min-width: 480px) {
     .cards-grid {
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     }
 }

 @media (min-width: 768px) {
     .hero__actions {
         flex-direction: row;
         gap: var(--space-md);
     }

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

     .mobile-app-section {
         flex-direction: row;
         align-items: center;
         text-align: left;
     }

     .mobile-app__image-placeholder {
         height: 360px;
     }

     .d-md-none {
         display: none;
     }

     .d-md-inline {
         display: block;
     }
 }

 @media (min-width: 1024px) {
     .header__container {
         padding: var(--space-sm) var(--space-md);
     }

     .nav {
         display: flex;
     }

     .menu-toggle {
         display: none;
     }

     .hero__container {
         flex-direction: row;
         text-align: left;
         align-items: center;
     }

     .hero__text {
         width: 50%;
     }

     .hero__image-placeholder {
         width: 50%;
         height: 560px;
     }

     .steps-grid {
         grid-template-columns: repeat(4, 1fr);
     }

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

     .footer__container {
         grid-template-columns: 2fr 1fr 1fr 2fr;
     }
 }

 .privacy {
     padding: 120px 0;
 }

 .privacy-content h1 {
     font-size: 2.25rem;
     font-weight: 700;
     text-align: center;
     margin-bottom: 2rem;
     color: #4338ca;
 }

 .privacy-content h2 {
     font-size: 1.875rem;
     font-weight: 600;
     margin-top: 1.5rem;
     margin-bottom: 0.5rem;
     color: #4f46e5;
 }

 .privacy-content h3 {
     font-size: 1.25rem;
     font-weight: 600;
     margin-top: 1rem;
     margin-bottom: 0.5rem;
     color: white;
 }

 .privacy-content p,
 .privacy-content li {
     font-size: 1rem;
     line-height: 1.625;
     color: white;
     margin-bottom: 1rem;
 }

 .privacy-content a {
     color: #4f46e5;
     font-weight: 500;
     text-decoration: none;
     transition: color 0.2s ease-in-out;
 }

 .privacy-content a:hover {
     color: #4338ca;
 }

 .privacy-content section {
     margin-bottom: 2rem;
 }

 .privacy-content ul {
     list-style-type: disc;
     margin-left: 24px;
 }

 .thanks-content {
    text-align: center;
     padding: 2rem;
     background-color: #ffffff;
     border-radius: 0.5rem;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     margin: 6rem 0;
 }

 .thanks-content h1 {
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 1rem;
     color: #4338ca;
 }

 .thanks-content p {
     font-size: 1.125rem;
     color: #374151;
     margin-bottom: 2rem;
 }

 .thanks-content a {
     display: inline-block;
     background-color: #4f46e5;
     color: #ffffff;
     font-weight: 600;
     padding: 0.75rem 1.5rem;
     border-radius: 0.375rem;
     text-decoration: none;
     transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
     border: none;
     cursor: pointer;
 }

 .thanks-content a:hover {
     background-color: #4338ca;
     transform: translateY(-2px);
 }