: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: 20px 0px; }
    /* .section img {
      border-radius: 16px;
    } */
    .section-tight { padding: 38px 0; }
    .eyebrow {
      display: block;
      margin-bottom: 0px;
      font-size: 3rem;
      text-align: center;
      font-weight: 800;
      color: var(--white);
      background: var(--black);
      border-radius: 0px;
      padding: 20px;
      text-transform: uppercase;
    }
    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; }
    .hero-copy .lead { font-size: 1.8rem; color: #333; line-height: 35px;}
    .hero-copy .lead strong { color: var(--pink); }
    .muted { color: var(--muted); }

    .hero {
      padding-top: 20px;
    }
    .hero-topbar {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
      display: none;
    }
    .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);
    }
    .hero-inner {
      display: grid;
      /* Left column is 0.4 parts, Right column is 0.6 parts */
      grid-template-columns: 0.4fr 0.6fr; 
      grid-template-areas: 
        "copy art"
        "form art"
        "stats stats";
      gap: 20px;
      padding: 34px 34px 28px;
      position: relative;
      min-height: 520px;
      grid-template-areas: "copy art" "form art" "stats stats";
    }

    .hero-copy {
      grid-area: copy;
    }
    .hero-form {
      grid-area: form;
    }
    .hero-art {
      grid-area: art;

    }
    .stats-grid {
      grid-area: stats;
    }

    .hero-copy { max-width: 560px; }
    .hero-copy h1 { margin-bottom: 10px; font-size: 42px; }
    .hero-form {
      background: #313131;
      padding: 20px 20px 0px 20px;
      border-radius: 16px;
      border: 2px solid rgba(17,17,17,.12);
      backdrop-filter: blur(5px);
    }
    .hero-form h2, .hero-form p {
      color: var(--white);
    }
    .hero-form .kickstarter-coming-soon img{
      margin: 20px auto 0px auto;
      width: 80%;
    }
    .hero-form .keyring {
      width: 120px;
      margin: auto;
    }
    .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;
    }
    .hero-form h3 {
      font-size: 1.2rem;
      text-align: center;
    }
    .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:flex-start;
      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;
      border: 3px solid #303030;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      border: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: #ee8617; 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;
    }

     #inside-the-box .content-image {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 20px;
      }

    #inside-the-box .content-image img {
      width: 100%;
      height: auto;
    }
    #inside-the-box .content-text { padding-top:40px;}   
    #inside-the-box .three-col { 
      grid-template-columns: repeat(2, 1fr);
    }
    #inside-the-box iframe {
        aspect-ratio: 9 / 16;
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
      }
    #inside-the-box .card-preview img {
      border: 2px solid rgba(0,0,0,.08);
      border-radius: var(--radius);
      margin: 10px auto;
      max-width: 320px;
    }
    #inside-the-box .card-preview img:first-child {
      display: none;
    }
    .two-col {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 30px;
      align-items: center;
    }
    .two-col .content-text {
      padding: 40px;
    }
    #who-is-gattara .two-col{
      align-items:initial;
    } 
    #who-is-gattara .two-col .gattara-sara-standing img{
      border-radius:16px;
    }
    #how-to-play .content-text {
      padding: 20px;
    }
    #how-to-play .content-image img {
      width: 72%;
      margin: auto;
    }
    #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; }
    #social a{
      display: flex;             /* Places elements side-by-side */
      align-items: center;       /* Vertically centers both image and text */
      gap: 15px;  
    }
    #social a img {
       width: 50px;              /* Adjust image size as needed */
      height: auto;
    }
    #social .btn-kickstarter {
      background: #1ece78;
      color: var(--white);
      font-weight: 800;
      padding: 10px 18px;
      border-radius: 999px;
      margin-top: 12px;
      text-decoration: none;
      justify-content: center;
    }
    #social .two-col{
      align-items: start;
      justify-items: center;
    }
    #social p {
      margin-top: 12px;
      line-height: 1.4;
    }
    #social h2 { font-size: 2rem; margin-bottom: 12px; }

    .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;
    }

    .gattara-fader {
      position: relative;
      min-height: 420px;
    }
    .gattara-fader img {
      position: absolute;
      inset: 0;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.9s ease-in-out;
      pointer-events: none;
    }
    .gattara-fader img.is-active {
      opacity: 1;
      pointer-events: auto;
    }

    .gattara-dots {
      position: absolute;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 3;
    }

    .gattara-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 0;
      padding: 0;
      background: rgb(255,255,255);
      border: 1px solid #ff4f87;
      cursor: pointer;
      transition: transform 0.2s ease, background 0.2s ease;
    }

    .gattara-dot:hover {
      transform: scale(1.12);
    }

    .gattara-dot.is-active {
      background: var(--pink, #ff4f87);
    }

      #early-access-bottom .content-card {
        background: #313131;
      }
      #early-access-bottom .hero-form {
        padding-top: 0px;
        max-width: 640px;
        margin: auto;
        border-radius: 0pxx; 
        border: 0px;
        backdrop-filter: none;
      }

    @media screen and (max-width: 768px) {
      .card {
        border:0px;
        border-radius: 0px;
        box-shadow: none;
        padding: 20px 0px 0px 0px;
      }
      .card h2,
      .card h3 {
        text-align: center;
      }
      .two-col {
        gap: 0px;
      }
      .content-card { 
        border-radius: 0px;
        box-shadow: none;
        border: 0px;
      }
      .content-card .content-image {

      }
      .content-card .content-image img {
        border-radius: 0px;
      }
      .content-card .content-text {
        padding: 20px;
      }
      .early-access .eyebrow { 
        background: var(--black);
      }
      .eyebrow {
        font-size: 1.6rem; 
        padding: 12px; 
        display: block;
        margin: 0px;
        color: var(--white);
        background: #205aa5;
        padding: 20px 0px;
        text-transform: uppercase;
        letter-spacing: .04em;
        border-radius: 0px;
        text-align: center;
      }
      #inside-the-box .card {
        border: 0px;
        border-radius: 0px;
        box-shadow: none;
        padding: 0px;
      }
      #inside-the-box .content-image {
        margin-top: 20px;
        grid-template-columns: 1fr;
      }
      #inside-the-box .three-col {
          grid-template-columns: repeat(1, 1fr);
      }
      #inside-the-box .card-preview img {
          border: 2px solid rgba(0, 0, 0, .08);
          margin: 10px auto;
          max-width: 100%;
      }
      #inside-the-box .card-preview img:first-child {
        display: block;
      }
      #inside-the-box .content-text {
        padding-top: 0px;
      }
      #inside-the-box .eyebrow {
        background-color: #205aa5;
      }
      #inside-the-box .card-game {
        padding: 0px 5px;
        color: var(--white);
      }
      #inside-the-box .card-game-green {
        background-color: #4CAF50;
      }
       #inside-the-box .card-game-red {
        background-color: #f44336;
      }
      #inside-the-box .card-game-yellow {
        background-color: #FFEB3B;
        color: var(--black);
      }
      #inside-the-box .card-game-meow {
        background-color: #f63b7c;
      }
       #inside-the-box ul {
        list-style: none;
        padding: 0px;
      }
      .hero {
        padding-top: 0px;
      }
      .section { padding: 0px 0px; border-bottom: 3px solid #EDEDED; }
      .container { width: 100%; padding: 0px; } 
      .hero-card {
        border-radius: 0px;
        margin-bottom: 0px;
        border: 0px;
        box-shadow: none;
      }
      .hero-inner .hero-art {
        order: 2;
        height: auto;
        min-height: 0px;
      }
      .hero-inner .hero-copy {
        order: 1;
        padding: 20px 0px;
        border-bottom: 3px solid #000;
        background-color: #205aa5;
        max-width: 100%;
      }
      .hero-inner .hero-copy h1 {
        color: var(--white);
      }
      .hero-inner .stats-grid {
        order: 3;
        border-top: 3px solid #000;
        border-bottom: 0px;
        border-left: 0px;
        border-right: 0px;
      }
      .hero-inner .hero-form {
        order: 4;
        margin-top: 0px;
      }
      .hero-copy h1 {
        text-align: center;
        margin:0px;
        padding: 0px;
      }
      .hero-copy .lead {
        text-align: center;
        line-height: 32px;
      }
      .hero-inner {
        grid-template-columns: 1fr;
        padding:  0px;
        gap: 0px;
        min-height: auto;
        display: flex;
        flex-direction: column;
      }
      .hero-inner .stats-grid .stat {
        border-right: 0;
        border-bottom: 3px solid #000;
        padding: 12px 0;
      }
      .stat strong {
        display: block;
        font-family: 'Baloo 2', sans-serif;
        line-height: 1;
        margin-bottom: 6px;
        font-size: 1.6rem;
      }
      .hero-art {
        margin-top: 0px;
        min-height: 420px;
      }
      .hero-art img {
        max-height: max-content;
        border: 0px;
        border-radius: 0px;
      }
      .hero-form {
        border-radius: 0px;
        border: 0px;
        background-color: #313131;
        color: var(--white);
        padding: 20px 20px 20px 20px;
        backdrop-filter: none;
      }
      .hero-form h2, .hero-form p {
        color: var(--white);
        text-align: center;
      }
      .hero-form .kickstarter-coming-soon {
        padding: 20px 0px 0px 0px;
      }
      .hero-form .kickstarter-coming-soon img {
        width: 100%;
        max-width: 300px;
        margin: auto;
      }
      .hero-inner,
      .two-col,
      .inside-box-grid,
      .three-col,
      .gallery-strip {
        grid-template-columns: 1fr;
      }
      .gallery-strip img {
        width: 100%;
      }
      .signup-row { grid-template-columns: 1fr; }

      .content-card {
        border-radius: 0px;
      }
      #how-to-play .content-image {
        padding-top: 20px;
      }
      #how-to-play .content-text {
        padding-top: 0px;
      }
      #how-to-play .three-col {
          grid-template-columns: repeat(1, 1fr);
      }
      article.card iframe {
        aspect-ratio: 9 / 16;
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
      }
      #how-to-play .card img {
        width: 77%;
      }
      #how-to-play .card:last-child img {
        width: 77%;
      }
      #faq, .section-band-blue {
        padding: 20px;
      }
      .footer-band .brand {
        padding: 0px 12px;
      }
      .ks-live-inner {
        align-items: flex-start;
      }
      .inside-box-grid .button-row {
        justify-content: center !important;
      }
      #early-access-bottom {
        border-bottom: 0px;
      }
      #early-access-bottom .container.content-card {
          padding-top: 0px;
      }
      #early-access-bottom .hero-form.before-ks {
          margin-top: 0;
      }
      #early-access-bottom .hero-form {
        padding-top: 0px;
      }
    }