:root{
      --bg: #0b1220;
      --surface: rgba(255,255,255,.06);
      --surface-2: rgba(255,255,255,.08);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.72);
      --muted-2: rgba(255,255,255,.58);
      --border: rgba(255,255,255,.14);
      --accent: #22c55e;
      --accent-2: #60a5fa;
      --warning: #fbbf24;

      --radius: 18px;
      --shadow: 0 16px 50px rgba(0,0,0,.35);

      --max: 1920px;
      --pad: 16px;
      --pad-lg: 22px;

      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }

    *{ box-sizing: border-box; }
    html{
      scroll-behavior: smooth;
    }
    body{
      margin: 0;
      font-family: var(--font);
      background: linear-gradient(135deg, rgba(11,18,32,1) 0%, rgba(11,18,32,.95) 100%);
      color: var(--text);
      line-height: 1.45;
      position: relative;
      height: 100%;
    }
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background:
        radial-gradient(600px 400px at 20% 10%, rgba(96,165,250,.08), transparent 40%),
        radial-gradient(450px 350px at 90% 0%, rgba(34,197,94,.07), transparent 35%),
        radial-gradient(500px 400px at 50% 100%, rgba(251,191,36,.05), transparent 40%);
      pointer-events: none;
      z-index: 0;
    }
    .wrap { position: relative; }

    a{ color: inherit; }
    .wrap{
      max-width: var(--max);
      margin: 0 auto;
      padding: 22px var(--pad) 42px;
    }

    /* Header */
    .responsive-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 0;
      width: 100%;
   
      border-bottom: 1px solid var(--border);
      background: rgba(255,255,255,.02);
      backdrop-filter: blur(8px);
      position: relative;
      z-index: 100;
    }
    .logo h1 {
      margin: 0;
      font-size: 24px;
      color: var(--text);
      word-wrap: break-word;
      overflow-wrap: break-word;
      max-width: 200px;
      font-weight: 800;
    }
    
    /* Desktop Navigation */
    .desktop-nav {
      display: none;
      gap: 0;
    }
    .desktop-nav a {
      padding: 8px 16px;
      color: var(--text);
      text-decoration: none;
      transition: background .12s ease, color .12s ease;
      border-radius: 8px;
      font-weight: 500;
      font-size: 15px;
    }
    .desktop-nav a:hover {
      background: rgba(34,197,94,.15);
      color: var(--accent);
    }
    
    /* Mobile Menu Toggle */
    .mobile-menu {
      position: relative;
      flex-shrink: 0;
      display: flex;
    }
    .menu-toggle {
      background: transparent;
      color: var(--text);
      border: 2px solid var(--accent);
      padding: 8px 12px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 600;
      transition: all .12s ease;
      font-size: 18px;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .menu-toggle:hover {
      background: var(--accent);
      color: #07130b;
      transform: scale(1.05);
    }
    .menu-toggle.active {
      background: var(--accent);
      color: #07130b;
    }
    .menu-list {
      display: none !important;
      position: fixed;
      top: 65px;
      right: 16px;
      background: linear-gradient(135deg, rgba(11,18,32,0.98) 0%, rgba(11,18,32,0.95) 100%);
      border: 2px solid var(--accent);
      border-radius: 12px;
      margin: 0;
      padding: 12px 0;
      width: 240px;
      box-shadow: 0 16px 40px rgba(0,0,0,.8), 0 0 0 1px rgba(34,197,94,.2);
      z-index: 999999;
      max-width: 100vw;
      overflow: visible;
      backdrop-filter: blur(10px);
    }
    .menu-list.active {
      display: block !important;
    }
    .menu-list li {
      list-style: none;
      margin: 0;
    }
    .menu-list a {
      display: block;
      padding: 14px 18px;
      color: rgba(255,255,255,.95);
      text-decoration: none;
      transition: all .12s ease;
      word-wrap: break-word;
      overflow-wrap: break-word;
      font-weight: 500;
      font-size: 15px;
    }
    .menu-list a:hover {
      background: rgba(34,197,94,.2);
      color: var(--accent);
      padding-left: 24px;
    }

    /* Desktop view */
    @media (min-width: 720px) {
      .responsive-header {
        gap: 30px;
      }
      .desktop-nav {
        display: flex;
      }
      .mobile-menu {
        display: none !important;
      }
      .logo h1 {
        font-size: 28px;
      }
    }

    /* Top mini-bar */
    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid var(--border);
 
      background: rgba(255,255,255,.04);
      backdrop-filter: blur(8px);
      flex-wrap: wrap;
      width: 100%;
      overflow-x: hidden;
    }
    .topbar .badge{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      font-size: 13px;
      color: var(--muted);
      word-wrap: break-word;
      overflow-wrap: break-word;
      flex-wrap: wrap;
    }
    .dot{
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 4px rgba(34,197,94,.14);
      flex: 0 0 auto;
    }
    .topbar .right{
      font-size: 13px;
      color: var(--muted-2);
      white-space: nowrap;
    }

    /* Hero */
    .hero{
      margin-top: 16px;
      padding: 120px 22px;
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)), url('images/bg.webp');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      background-repeat: no-repeat;
      box-shadow: var(--shadow);
      overflow: hidden;
      word-wrap: break-word;
      position: relative;
    }
    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(11,18,32,.85) 0%, rgba(11,18,32,.75) 100%);
      z-index: 1;
    }
    .hero h1, .hero .sub, .hero .cta-row, .hero .hero-note {
      position: relative;
      z-index: 2;
    }
    h1{
      margin: 0 0 10px;
      font-size: 28px;
      line-height: 1.12;
      letter-spacing: -0.02em;
      word-wrap: break-word;
      overflow-wrap: break-word;
      word-break: break-word;
      text-shadow: 0 2px 8px rgba(0,0,0,.3);
    }
    .sub{
      margin: 0 0 16px;
      color: var(--muted);
      font-size: 15.5px;
      max-width: 62ch;
      word-wrap: break-word;
      overflow-wrap: break-word;
      word-break: break-word;
      text-shadow: 0 1px 4px rgba(0,0,0,.2);
    }

    .cta-row{
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      align-items:center;
      width: 100%;
      overflow-x: hidden;
      margin-top: 20px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: var(--text);
      text-decoration:none;
      font-weight: 600;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
      width: 100%;
      min-height: 46px;
      word-break: break-word;
      overflow-wrap: break-word;
    }
    .btn:active{ transform: translateY(1px); }
    .btn.primary{
      background: linear-gradient(180deg, rgba(34,197,94,.95), rgba(34,197,94,.75));
      border-color: rgba(34,197,94,.55);
      color: #07130b;
    }
    .btn.primary:hover{ background: linear-gradient(180deg, rgba(34,197,94,1), rgba(34,197,94,.80)); }
    .btn.secondary{
      background: rgba(96,165,250,.16);
      border-color: rgba(96,165,250,.35);
    }
    .btn.secondary:hover {
      background: rgba(96,165,250,.22);
      border-color: rgba(96,165,250,.45);
    }

    .hero-note{
      margin-top: 14px;
      display:flex;
      flex-wrap: wrap;
      gap: 10px;
      color: var(--muted-2);
      font-size: 13px;
      width: 100%;
      overflow-x: hidden;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.03);
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
      font-size: 14px;
    }
    .pill i {
      color: var(--accent);
      font-size: 16px;
    }

    /* Sections */
    .section{
      margin-top: 16px;
      padding: 18px;
      border-radius: var(--radius);
      background: rgba(255,255,255,.03);
      overflow: hidden;
      word-wrap: break-word;
    }
    .section h2{
      margin: 0 0 10px;
      font-size: 18px;
      letter-spacing: -0.01em;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    .section p{
      margin: 0;
      color: var(--muted);
      font-size: 15px;
      word-wrap: break-word;
      overflow-wrap: break-word;
      word-break: break-word;
    }

    /* Trust list */
    .checklist{
      list-style:none;
      padding: 0;
      margin: 12px 0 0;
      display:grid;
      gap: 10px;
      width: 100%;
      overflow-x: hidden;
    }
    .checklist li{
      display:flex;
      gap: 10px;
      align-items:flex-start;
      padding: 12px;
      background: rgba(255,255,255,.03);
      border-radius: 14px;
      color: rgba(255,255,255,.86);
      overflow: hidden;
      word-wrap: break-word;
    }
    .check{
      flex: 0 0 auto;
      color: var(--accent);
      font-size: 18px;
      margin-top: 2px;
    }

    /* Platform cards */
    .cards{
      margin-top: 12px;
      display:grid;
      gap: 12px;
      width: 100%;
      overflow-x: hidden;
    }
    .card{
      padding: 16px;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      box-shadow: 0 10px 30px rgba(0,0,0,.22);
      overflow: hidden;
      word-wrap: break-word;
    }
    .card-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap: 12px;
      flex-wrap: wrap;
      width: 100%;
      overflow-x: hidden;
    }
    .name{
      margin: 0;
      font-size: 16.5px;
      font-weight: 800;
      letter-spacing: -0.01em;
      word-wrap: break-word;
      overflow-wrap: break-word;
      word-break: break-word;
    }
    .rating{
      font-size: 13px;
      color: var(--muted);
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.03);
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    .meta{
      margin-top: 10px;
      display:grid;
      gap: 8px;
      color: var(--muted);
      font-size: 14px;
      width: 100%;
      overflow-x: hidden;
    }
    .meta .row{
      display:flex;
      gap: 10px;
      align-items:flex-start;
      word-wrap: break-word;
    }
    .ico{
      width: 22px; height: 22px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.03);
      display:grid;
      place-items:center;
      flex: 0 0 auto;
      color: var(--accent);
      font-size: 14px;
    }
    .card-actions{
      margin-top: 12px;
      display:grid;
      gap: 10px;
      width: 100%;
      overflow-x: hidden;
    }
    .btn.offer{
      background: rgba(34,197,94,.18);
      border-color: rgba(34,197,94,.32);
      font-weight: 800;
      word-break: break-word;
      overflow-wrap: break-word;
    }
    .btn.offer:hover{
      background: rgba(34,197,94,.22);
      border-color: rgba(34,197,94,.40);
    }
    .btn i {
      margin-right: 6px;
    }

    /* Quotes */
    .quotes{
      margin-top: 12px;
      display:grid;
      gap: 10px;
      width: 100%;
      overflow-x: hidden;
    }
    blockquote{
      margin: 0;
      padding: 14px;
      border-radius: 16px;
      background: rgba(255,255,255,.03);
      color: rgba(255,255,255,.86);
      word-wrap: break-word;
      overflow-wrap: break-word;
      overflow: hidden;
    }
    blockquote p{ margin: 0 0 8px; color: rgba(255,255,255,.86); word-wrap: break-word; }
    cite{ font-style: normal; color: var(--muted-2); font-size: 13px; }

    /* FAQ */
    details{
      border-radius: 16px;
      background: rgba(255,255,255,.03);
      padding: 12px 14px;
      width: 100%;
      overflow-x: hidden;
      word-wrap: break-word;
    }
    details + details{ margin-top: 10px; }
    summary{
      cursor: pointer;
      font-weight: 800;
      color: rgba(255,255,255,.90);
      outline: none;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    details p{
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 14.5px;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

    /* Footer disclaimer */
    footer{
      margin-top: 18px;
      padding: 14px 8px 0;
      color: rgba(255,255,255,.52);
      font-size: 12px;
      text-align: center;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

    /* Responsive footer */
    .responsive-footer {
      margin-top: 24px;
      padding: 16px 0;
      color: rgba(255,255,255,.52);
      font-size: 14px;
      text-align: center;
      overflow-x: hidden;
    }
    .responsive-footer h2 {
      margin: 0 0 12px;
      font-size: 18px;
      color: var(--text);
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    .responsive-footer ul {
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      width: 100%;
      overflow-x: hidden;
    }
    .responsive-footer li {
      margin: 0;
    }
    .responsive-footer a {
      color: var(--accent);
      text-decoration: none;
      transition: color .12s ease;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    .responsive-footer a:hover {
      color: var(--accent-2);
    }
    .footer-bottom {
      margin-top: 12px;
      font-size: 12px;
      color: rgba(255,255,255,.42);
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

    /* Cookie Modal */
    .cookie-modal {
      position: fixed;
      bottom: 20px;
      left: 20px;
      right: 20px;
      background: linear-gradient(135deg, rgba(11,18,32,0.98) 0%, rgba(11,18,32,0.95) 100%);
      border: 1px solid rgba(34,197,94,.3);
      border-radius: 12px;
      padding: 20px;
      z-index: 9998;
      box-shadow: 0 8px 32px rgba(0,0,0,.5);
      max-width: 400px;
      display: none;
      backdrop-filter: blur(10px);
    }
    .cookie-modal.show {
      display: block;
      animation: slideUp .3s ease;
    }
    @keyframes slideUp {
      from {
        transform: translateY(100px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    .cookie-content h3 {
      margin: 0 0 10px;
      font-size: 16px;
      color: var(--accent);
      font-weight: 700;
    }
    .cookie-content p {
      margin: 0 0 16px;
      font-size: 13px;
      color: rgba(255,255,255,.8);
      line-height: 1.4;
    }
    .cookie-buttons {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .cookie-buttons .btn {
      flex: 1;
      min-width: 120px;
      padding: 10px 16px;
      font-size: 13px;
    }

    /* Image-Text Section */
    .image-text-wrapper {
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;
      align-items: center;
    }
    .image-side {
      width: 100%;
    }
    .image-placeholder-img {
      width: 50%;
      height: auto;
      aspect-ratio: 1;
      border-radius: 18px;
      object-fit: cover;
      display: block;
      margin: 0 auto;
    }
    .text-side h2 {
      margin-top: 0;
      font-size: 32px;
      font-weight: 800;
      margin-bottom: 12px;
    }
    .rating-highlight {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      color: var(--accent);
      margin-bottom: 16px;
    }
    .rating-highlight i {
      color: #fbbf24;
    }
    .text-side p {
      color: var(--muted);
      margin-bottom: 20px;
      font-size: 16px;
    }
    .features-list {
      list-style: none;
      margin: 20px 0;
      padding: 0;
      display: grid;
      gap: 12px;
    }
    .features-list li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      color: var(--muted);
      font-size: 14px;
    }
    .features-list i {
      width: 22px;
      height: 22px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.03);
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      color: var(--accent);
      font-size: 12px;
    }

    /* Alternating layout for game sections */
    #jogos-grecia .image-text-wrapper {
      direction: rtl;
    }
    #jogos-grecia .text-side,
    #jogos-grecia .image-side {
      direction: ltr;
    }

    /* Desktop enhancements */
    @media (min-width: 720px){
      h1{ font-size: 36px; }
      .hero{ padding: 26px; }
      .section{ padding: 22px; }
      .cta-row .btn{ width: auto; }
      .image-text-wrapper {
        grid-template-columns: 1fr 1fr;
      }
      .text-side h2 {
        font-size: 40px;
      }
      .cards{ grid-template-columns: repeat(3, 1fr); }
      .checklist{ grid-template-columns: repeat(2, 1fr); }
      .contact-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
        align-items: center;
      }
      .contact-info {
        order: 1;
      }
      .newsletter-form {
        order: 2;
      }
    }

    /* Contact Section */
    .contact-wrapper {
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;
      align-items: start;
    }
    .contact-info {
      order: 2;
    }
    .newsletter-form {
      order: 1;
    }
    .contact-info h2,
    .newsletter-form h2 {
      margin-top: 0;
      font-size: 28px;
      font-weight: 800;
      margin-bottom: 12px;
    }
    .contact-info p,
    .newsletter-form p {
      color: var(--muted);
      margin-bottom: 20px;
    }
    .contact-details {
      display: grid;
      gap: 20px;
    }
    .contact-item {
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }
    .contact-item i {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: rgba(34,197,94,.15);
      color: var(--accent);
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      font-size: 18px;
    }
    .contact-item strong {
      display: block;
      color: var(--text);
      font-size: 16px;
      margin-bottom: 4px;
    }
    .contact-item p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }
    .contact-item a {
      color: var(--accent);
      text-decoration: none;
    }
    .contact-item a:hover {
      text-decoration: underline;
    }
    #newsletterForm {
      display: grid;
      gap: 12px;
    }
    #newsletterForm input {
      padding: 14px 16px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 12px;
      color: var(--text);
      font-size: 14px;
      font-family: var(--font);
      transition: all .12s ease;
    }
    #newsletterForm input::placeholder {
      color: rgba(255,255,255,.4);
    }
    #newsletterForm input:focus {
      outline: none;
      background: rgba(255,255,255,.06);
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(34,197,94,.15);
    }
    #newsletterForm button {
      padding: 14px 16px;
    }

    /* Mobile adjustments */
    @media (max-width: 719px){
      .wrap{
        padding: 16px 12px 32px;
      }
      h1{
        font-size: 22px;
      }
      .hero{
        padding: 16px;
      }
      .section{
        padding: 16px;
      }
      .cards{
        grid-template-columns: 1fr;
      }
      .checklist{
        grid-template-columns: 1fr;
      }
      .cta-row{
        flex-direction: column;
      }
      .cta-row .btn{
        width: 100%;
      }
    }

    /* Responsive section */
    .responsive-section {
      margin-top: 16px;
      padding: 18px;
      border-radius: var(--radius);
      background: rgba(255,255,255,.03);
      overflow: hidden;
      word-wrap: break-word;
    }
    .responsive-section h2 {
      margin: 0 0 10px;
      font-size: 18px;
      letter-spacing: -0.01em;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    .responsive-section ul {
      padding: 0;
      margin: 0;
      list-style: none;
      display: grid;
      gap: 10px;
      width: 100%;
      overflow-x: hidden;
    }
    .responsive-section li {
      padding: 12px;
      background: rgba(255,255,255,.03);
      border-radius: 14px;
      color: rgba(255,255,255,.86);
      word-wrap: break-word;
      overflow-wrap: break-word;
    }