:root {
      --blue: #2f99cc;
      --yellow: #f1bc57;
      --pink: #f63b7c;
      --black: #111;
      --white: #fff;
      --bg: #f3f0ed;
      --text: #252525;
      --muted: #666;
      --max: 1080px;
      --radius: 18px;
      --shadow: 0 12px 30px rgba(0,0,0,.12);
      --sm: 640px;
      --md: 768px;
      --lg: 1024px;
      --xl: 1280px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: 'Nunito', Arial, sans-serif;
      color: var(--text);
      background: var(--bg);
      line-height: 1.55;
    }

    img { max-width: 100%; height: auto; display: block; }
    a { color: inherit; }

    .hide {
      display: none !important;
    }
    .ks-live-banner {
      color: #111;
      padding: 14px 0 0 0;
    }
    .ks-live-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      flex-wrap: wrap;
      flex-direction: column;
      text-align: center; 
      padding: 12px 12px 0px 12px;
    }
    #ks-live-link {
     display: block;
     margin: auto;
     background: #1ece78;
    }
    .ks-live-copy {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 0.98rem;
    }
    .ks-live-copy strong {
      font-weight: 800;
    }
    .ks-live-btn {
      white-space: nowrap;
    }
    .container { width: min(calc(100% - 32px), var(--max)); margin: 0 auto; }
    .section { padding: 40px 0; }
    .section img {
      border-radius: 16px;
    }
    .section-tight { padding: 38px 0; }
    .eyebrow {
      display: inline-block;
      margin-bottom: 12px;
      font-size: .95rem;
      font-weight: 800;
      color: var(--white);
      background: var(--black);
      border-radius: 999px;
      padding: 8px 16px;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    h1, h2, h3 {
      font-family: 'Baloo 2', system-ui, sans-serif;
      line-height: 1.05;
      margin: 0 0 14px;
      color: var(--text);
    }
    h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); }
    h2 { font-size: clamp(1.7rem, 3vw, 3rem); }
    h3 { font-size: clamp(1.2rem, 2vw, 1.8rem); }
    p { margin: 5px 0 5px 0px; }
    .lead { font-size: 1.1rem; color: #333; }
    .muted { color: var(--muted); }

    .hero {
      padding-top: 20px;
    }
    .hero-topbar {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }
    .pill-cta {
      display: inline-block;
      background: #f63b7c;
      color: var(--white);
      text-decoration: none;
      padding: 10px 18px;
      border-radius: 999px;
      font-weight: 800;
      font-size: .95rem;
      box-shadow: var(--shadow);
    }
    .hero-card {
      background: var(--yellow);
      border: 3px solid var(--black);
      border-radius: 24px 24px 0 0;
      overflow: hidden;
      box-shadow: var(--shadow);
      margin-bottom:40px;
    }
    .hero-inner {
      display: grid;
      grid-template-columns: .4fr .6fr;
      gap: 24px;
      /* align-items: center; */
      padding: 34px 34px 28px;
      position: relative;
      min-height: 520px;
    }
    .hero-copy { max-width: 560px; }
    .hero-copy h1 { margin-bottom: 10px; }
    .hero-form {
      background: rgba(255,255,255,.82);
      padding: 20px;
      border-radius: 16px;
      border: 2px solid rgba(17,17,17,.12);
      backdrop-filter: blur(5px);
      margin-top:20px;
    }
    .hero-form .message {
      color: white;
      padding: 10px;
      text-align: center;
      border-radius: 10px;
    }
    .hero-form .feedback-messages {
      margin-top: 12px;
    }
    .hide {
      display: none !important;
    }
    .hero-form .message.error-message {
      background-color: red;
    }
    .hero-form .message.sent-message {
      background-color: green;
    }
    .benefits {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 20px;
        margin: 18px 0 18px;
        padding: 0;
        list-style: none;
        align-items: center;
        justify-content: space-around;
    }
    .benefits li {
      background: rgba(255,255,255,.72);
      border: 2px solid rgba(17,17,17,.08);
      border-radius: 999px;
      padding: 8px 14px;
      font-weight: 800;
    }
    .signup-row {
      margin-top: 12px;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(2, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 10px;
    }
    .signup-row input {
      border: 2px solid rgba(17,17,17,.15);
      border-radius: 12px;
      padding: 14px 14px;
      font: inherit;
      width: 100%;
      min-width: 0;
    }
    .signup-row input:focus-visible {
      border:2px solid var(--pink);
    }
    .btn {
      border: 0;
      border-radius: 12px;
      background: var(--pink);
      color: var(--white);
      font: inherit;
      font-weight: 800;
      padding: 14px 20px;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 180px;
    }
    .hero-art {
      position: relative;
      min-height: 420px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top:40px;
    }
    .hero-art img {
      width: 100%;
      object-fit: contain;
      filter: drop-shadow(0 12px 30px rgba(0,0,0,.18));
      border-radius: 16px;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      border-top:3px solid #000;
    }
    .stat {
      padding: 22px;
      color: var(--white);
      text-align: center;
      border-right:3px solid #000;
    }
    .stat:last-child {
      border-right:0px;
    }
    .stat:nth-child(1) { background: var(--blue); }
    .stat:nth-child(2) { background: var(--yellow); color: var(--white); }
    .stat:nth-child(3) { background: var(--pink); }
    .stat strong {
      display: block;
      font-size: clamp(2.3rem, 2vw, 2rem);
      font-family: 'Baloo 2', sans-serif;
      line-height: 1;
      margin-bottom: 6px;
    }

    .content-card {
      background: var(--white);
      border: 2px solid rgba(0,0,0,.08);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .two-col {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 30px;
      align-items: center;
    }
    #who-is-gattara .two-col{
      align-items:initial;
    } 
    #who-is-gattara .two-col .gattara-sara-standing img{
      border-radius:16px;
    }
    #how-to-play .three-col {
          grid-template-columns: repeat(2, 1fr);
    }
    #how-to-play .card {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-between;
    }
     #how-to-play .card img {
      width: 50%;
      margin: auto;
    }
    .three-col {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 22px;
    }
    .card {
      background: var(--white);
      border: 2px solid rgba(0,0,0,.08);
      border-radius: var(--radius);
      padding: 22px;
      box-shadow: var(--shadow);
      height: 100%;
    }
    .card ul { margin: 0; padding-left: 18px; }
    .card li { margin-bottom: 8px; }

    .section-band-blue {
      background: var(--blue);
      color: var(--white);
    }
    .section-band-blue h2, .section-band-blue h3, .section-band-blue p { color: var(--white); }

    .gallery-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      align-items: end;
      margin: 20px 0px;
    }
    .gallery-strip figure {
      margin: 0;
      background: var(--white);
      border-radius: 16px;
      overflow: hidden;
      border: 2px solid rgba(0,0,0,1);
      box-shadow: var(--shadow);
    }

    .feature-list {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }
    .feature-item {
      background: rgba(255,255,255,.78);
      border-left: 6px solid var(--pink);
      padding: 12px 14px;
      border-radius: 12px;
      color: #222;
    }

    .cats-hero {
      background: linear-gradient(180deg, var(--blue) 0 18%, var(--yellow) 18% 100%);
      border: 2px solid rgba(0,0,0,.08);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      text-align: center;
    }
    .cats-hero .text-wrap { padding: 26px 18px 10px; color: var(--white); }
    .cats-hero .text-wrap h2 { color: var(--white); }
    .cats-hero .image-wrap { padding: 0 14px 20px; }

    .faq-list {
      display: grid;
      gap: 14px;
    }
    details {
      background: var(--white);
      border: 2px solid rgba(0,0,0,.08);
      border-radius: 14px;
      padding: 16px 18px;
      box-shadow: var(--shadow);
    }
    summary {
      cursor: pointer;
      font-weight: 800;
      list-style: none;
    }
    summary::-webkit-details-marker { display: none; }
    details p { margin-top: 12px; }

    .inside-box-grid {
      display: grid;
      grid-template-columns: 0.4fr 0.6fr;
      gap: 22px;
      align-items: center;
    }

    .footer-band {
      background: #f6a81d;
      color: var(--black);
      text-align: center;
      border-top: 3px solid var(--black);
      padding: 42px 0 26px;
    }
    .footer-band .brand {
      font-family: 'Baloo 2', sans-serif;
      font-size: clamp(1.4rem, 2vw, 2rem);
      font-weight: 800;
      margin-bottom: 8px;
    }
    .footer-subband {
      background: var(--black);
      color: var(--white);
      text-align: center;
      padding: 12px 0;
    }
    .cta-center { text-align: center; }
    .button-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-top: 16px;
    }
    .btn-secondary {
      background: var(--black);
      color: var(--white);
    }
    .small { font-size: .95rem; }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }

    /* Responsive styles */  
    .hide-mobile { display: none; }
    .grid-container {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(1, minmax(0, 1fr)); /* 1 colonna su mobile */
      }
    .flex-responsive {
      display: flex;
      flex-direction: column; /* Verticale su mobile */
    }
    .text-responsive {
      /* clamp(minimo, preferito, massimo) */
      font-size: clamp(1rem, 2.5vw + 0.5rem, 2rem);
    }
     #faq a {
      color: #1ece78;
      text-decoration: none;
    }
    @media screen and (max-width: 767px) {
      .section { padding: 20px 0px; }
      .container { width: 100%;} 
      .hero-card {
        border-radius: 0px;
        margin-bottom: 10px;
        border: 0px;
      }
      .hero-inner {
        grid-template-columns: 1fr;
        padding:  12px;
        min-height: auto;
      }
      .hero-art {
        min-height: auto;
        margin-top: 0px;
      }
      .hero-art img {
        max-height: max-content;
        border: 3px solid #000;
      }
      .eyebrow { display: block; text-align: center; }
      .hero-inner,
      .two-col,
      .inside-box-grid,
      .three-col,
      .gallery-strip {
        grid-template-columns: 1fr;
      }
      .gallery-strip img {
        width: 100%;
      }
      .stats-grid { grid-template-columns: 1fr; }
      .signup-row { grid-template-columns: 1fr; }
      .stat {
        border-right: 0;
        border-bottom: 3px solid #000;
      }
      .content-card {
        border-radius: 0px;
      }
      #how-to-play .three-col {
          grid-template-columns: repeat(1, 1fr);
      }
      #how-to-play .card img {
        width: 100%;
      }
      #faq, .section-band-blue {
        padding: 20px;
      }
      .footer-band .brand {
        padding: 0px 12px;
      }
      .card {
        border-radius: 0px;
      }
      .ks-live-inner {
        align-items: flex-start;
      }
      .inside-box-grid .button-row {
        justify-content: center !important;
      }
    }