/* Stessi colori dell'app (tema "Battito", lib/core/theme.dart). */
    :root {
      --ink: #10132B;
      --surface: #1B1F45;
      --surface-high: #262B5C;
      --text: #EEF0FF;
      --muted: #8E93C4;
      --lime: #C6F432;
      --on-lime: #1B2400;
      --coral: #FF7A59;
      --radius: 20px;
      --max: 1120px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--ink);
      color: var(--text);
      font: 17px/1.6 Inter, system-ui, sans-serif;
    }

    h1,
    h2,
    h3 {
      font-family: "Space Grotesk", Inter, sans-serif;
      letter-spacing: -0.02em;
      line-height: 1.08;
      margin: 0;
    }

    a {
      color: inherit;
    }

    .wrap {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 24px;
    }

    .muted {
      color: var(--muted);
    }

    .accent {
      color: var(--coral);
    }

    header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: rgba(16, 19, 43, .88);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--surface);
    }

    header .wrap {
      display: flex;
      align-items: center;
      gap: 28px;
      height: 68px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      font: 700 22px "Space Grotesk", sans-serif;
    }

    nav {
      display: flex;
      gap: 24px;
      margin-left: auto;
    }

    nav a {
      text-decoration: none;
      color: var(--muted);
      font-weight: 500;
    }

    nav a:hover {
      color: var(--text);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 22px;
      border-radius: 14px;
      font-weight: 600;
      text-decoration: none;
      border: 1px solid transparent;
      white-space: nowrap;
    }

    .btn-lime {
      background: var(--lime);
      color: var(--on-lime);
    }

    .btn-lime:hover {
      filter: brightness(1.06);
    }

    .btn-ghost {
      border-color: var(--surface-high);
      color: var(--text);
    }

    .btn-ghost:hover {
      background: var(--surface);
    }

    .btn-sm {
      padding: 9px 16px;
      border-radius: 12px;
      font-size: 15px;
    }

    .hero {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 56px;
      align-items: center;
      padding: 72px 0 40px;
    }

    .eyebrow {
      display: inline-block;
      color: var(--lime);
      font-weight: 600;
      font-size: 14px;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }

    .hero h1 {
      font-size: clamp(44px, 6vw, 76px);
    }

    .hero p {
      font-size: 20px;
      margin: 24px 0 32px;
      max-width: 34em;
    }

    .ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .free {
      margin-top: 18px;
      font-size: 15px;
    }

    .free b {
      color: var(--text);
      font-weight: 600;
    }

    /* Cornice del telefono: mostra la parte alta della schermata (saluto, lezioni, abbonamento). */
    .phone {
      width: 100%;
      max-width: 340px;
      aspect-ratio: 9 / 15;
      justify-self: center;
      overflow: hidden;
      border-radius: 44px;
      border: 8px solid var(--surface-high);
    }

    .phone img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: top;
    }

    section {
      padding: 72px 0;
    }

    .section-head {
      max-width: 680px;
      margin-bottom: 40px;
    }

    .section-head h2 {
      font-size: clamp(32px, 4vw, 48px);
    }

    .section-head p {
      font-size: 19px;
      margin: 14px 0 0;
    }

    .two {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .card {
      background: var(--surface);
      border-radius: var(--radius);
      padding: 32px;
    }

    .card h3 {
      font-size: 26px;
      margin: 14px 0 8px;
    }

    .tag {
      display: inline-block;
      font-size: 13px;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 99px;
      background: var(--surface-high);
      color: var(--muted);
    }

    .tag.lime {
      background: var(--lime);
      color: var(--on-lime);
    }

    ul.checks {
      list-style: none;
      padding: 0;
      margin: 18px 0 0;
      display: grid;
      gap: 10px;
    }

    ul.checks li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }

    ul.checks li::before {
      content: "";
      flex: none;
      width: 20px;
      height: 20px;
      margin-top: 3px;
      border-radius: 50%;
      background: var(--surface-high) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23C6F432' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
    }

    .features {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .feature {
      background: var(--surface);
      border-radius: 18px;
      padding: 24px;
      border-left: 4px solid var(--coral);
    }

    .feature:nth-child(4n+2) {
      border-left-color: #7C9CFF;
    }

    .feature:nth-child(4n+3) {
      border-left-color: var(--lime);
    }

    .feature:nth-child(4n+4) {
      border-left-color: #FBBF24;
    }

    .feature h3 {
      font-size: 19px;
      margin-bottom: 6px;
    }

    .feature p {
      margin: 0;
      font-size: 15px;
    }

    .plans {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      align-items: stretch;
    }

    .plan {
      background: var(--surface);
      border-radius: var(--radius);
      padding: 32px;
      display: flex;
      flex-direction: column;
      border: 2px solid transparent;
    }

    .plan.featured {
      border-color: var(--lime);
    }

    .plan h3 {
      font-size: 24px;
    }

    .price {
      display: flex;
      align-items: baseline;
      gap: 6px;
      margin: 18px 0 4px;
    }

    .price b {
      font: 700 56px/1 "Space Grotesk", sans-serif;
      letter-spacing: -0.03em;
    }

    .limit {
      font-weight: 600;
      color: var(--lime);
      margin-bottom: 4px;
    }

    .plan .btn {
      margin-top: auto;
    }

    .plan ul.checks {
      margin: 22px 0 28px;
    }

    .plans-note {
      margin-top: 24px;
      font-size: 15px;
    }

    .faq {
      display: grid;
      gap: 12px;
      max-width: 820px;
    }

    details {
      background: var(--surface);
      border-radius: 16px;
      padding: 20px 24px;
    }

    summary {
      cursor: pointer;
      font-weight: 600;
      font-size: 18px;
      list-style: none;
      display: flex;
      justify-content: space-between;
      gap: 16px;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary::after {
      content: "+";
      color: var(--lime);
      font-size: 24px;
      line-height: 1;
    }

    details[open] summary::after {
      content: "–";
    }

    details p {
      margin: 12px 0 0;
      color: var(--muted);
    }

    .cta-band {
      background: var(--surface);
      border-radius: 28px;
      padding: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
    }

    .cta-band h2 {
      font-size: clamp(30px, 3.6vw, 44px);
    }

    footer {
      border-top: 1px solid var(--surface);
      padding: 32px 0 48px;
      margin-top: 72px;
    }

    footer .wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 20px 32px;
      align-items: center;
      color: var(--muted);
      font-size: 15px;
    }

    footer a {
      color: var(--muted);
    }

    footer .links {
      display: flex;
      gap: 24px;
      margin-left: auto;
      flex-wrap: wrap;
    }

    /* Showcase App Screenshots */
    .screenshots-scroll {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 18px;
      margin-top: 10px;
    }

    .shot-card {
      background: var(--surface);
      border-radius: var(--radius);
      padding: 22px 18px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0.05);
      transition: transform .2s ease, border-color .2s ease;
    }

    .shot-card:hover {
      transform: translateY(-4px);
      border-color: rgba(198, 244, 50, 0.35);
    }

    .shot-phone {
      width: 100%;
      max-width: 180px;
      aspect-ratio: 9 / 18;
      border-radius: 28px;
      overflow: hidden;
      border: 5px solid var(--surface-high);
      margin-bottom: 16px;
      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
      background: var(--ink);
    }

    .shot-phone img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
      display: block;
    }

    .shot-card h4 {
      font-size: 16px;
      margin: 0 0 6px;
      color: var(--text);
    }

    .shot-card p {
      font-size: 13.5px;
      margin: 0;
      color: var(--muted);
      line-height: 1.45;
    }

    /* Griglia tipologie centri */
    .types {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .type-card {
      background: var(--surface);
      border-radius: 18px;
      padding: 28px 22px;
      display: flex;
      flex-direction: column;
      border: 1px solid rgba(255, 255, 255, 0.04);
      transition: transform .2s ease, border-color .2s ease;
    }

    .type-card:hover {
      transform: translateY(-3px);
      border-color: rgba(255, 122, 89, 0.3);
    }

    .type-icon {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      background: var(--surface-high);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
      color: var(--coral);
    }

    .type-card h3 {
      font-size: 20px;
      margin-bottom: 10px;
    }

    .type-card p {
      font-size: 14.5px;
      margin: 0 0 16px;
      color: var(--muted);
      line-height: 1.5;
    }

    .type-tag {
      margin-top: auto;
      font-size: 12px;
      font-weight: 600;
      color: var(--lime);
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    /* Onboarding & Migrazione */
    .onboarding-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .step-card {
      background: var(--surface);
      border-radius: var(--radius);
      padding: 32px 28px;
      position: relative;
      border-top: 3px solid var(--lime);
      display: flex;
      flex-direction: column;
    }

    .step-number {
      font-family: "Space Grotesk", sans-serif;
      font-size: 32px;
      font-weight: 700;
      color: var(--lime);
      margin-bottom: 14px;
      line-height: 1;
    }

    .step-card h3 {
      font-size: 21px;
      margin-bottom: 10px;
    }

    .step-card p {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.55;
    }

    .migration-banner {
      background: linear-gradient(135deg, var(--surface) 0%, var(--surface-high) 100%);
      border-radius: var(--radius);
      padding: 32px 36px;
      margin-top: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      border: 1px solid rgba(198, 244, 50, 0.25);
    }

    .migration-banner h3 {
      font-size: 22px;
      margin-bottom: 6px;
    }

    .migration-banner p {
      margin: 0;
      font-size: 15px;
      color: var(--muted);
    }

    /* Assistenza */
    .support-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .support-card {
      background: var(--surface);
      border-radius: var(--radius);
      padding: 32px 26px;
      display: flex;
      flex-direction: column;
      border: 1px solid rgba(255, 255, 255, 0.04);
    }

    .support-icon {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      background: var(--surface-high);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
      color: var(--lime);
    }

    .support-card h3 {
      font-size: 21px;
      margin-bottom: 8px;
    }

    .support-card p {
      color: var(--muted);
      font-size: 15px;
      margin: 0 0 20px;
      line-height: 1.5;
    }

    .support-card .btn {
      margin-top: auto;
      align-self: flex-start;
    }

    @media (max-width: 900px) {
      .hero {
        grid-template-columns: 1fr;
        padding-top: 48px;
      }

      .phone {
        max-width: 300px;
      }

      .two,
      .plans,
      .onboarding-grid,
      .support-grid {
        grid-template-columns: 1fr;
      }

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

      .screenshots-scroll {
        grid-template-columns: repeat(5, 220px);
        overflow-x: auto;
        padding-bottom: 16px;
        scroll-snap-type: x mandatory;
      }

      .shot-card {
        scroll-snap-align: start;
      }

      .migration-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px;
      }

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

      .cta-band {
        flex-direction: column;
        align-items: flex-start;
        padding: 36px 28px;
      }

      nav {
        display: none;
      }

      header .btn {
        margin-left: auto;
      }
    }

    @media (max-width: 540px) {
      body {
        font-size: 16px;
      }

      .wrap {
        padding: 0 16px;
      }

      .types,
      .features {
        grid-template-columns: 1fr;
      }

      .card,
      .plan,
      .step-card,
      .support-card {
        padding: 24px;
      }

      section {
        padding: 56px 0;
      }

      footer .links {
        margin-left: 0;
      }
    }

    /* Modulo "Richiedi una demo" */
    #demo { padding: 72px 0; }
    .demo-box { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; background: var(--surface);
      border-radius: var(--radius); padding: 40px; }
    .demo-intro p { margin: 14px 0 0; }
    #demo-form { display: grid; gap: 14px; }
    #demo-form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    #demo-form label { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
    #demo-form input, #demo-form select, #demo-form textarea { width: 100%; font: 16px Inter, system-ui, sans-serif;
      color: var(--text); background: var(--ink); border: 1px solid var(--surface-high); border-radius: 12px;
      padding: 12px 14px; }
    #demo-form input:focus, #demo-form select:focus, #demo-form textarea:focus { outline: 2px solid var(--lime);
      border-color: transparent; }
    #demo-form .check { display: flex; gap: 10px; align-items: flex-start; color: var(--text); }
    #demo-form .check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--lime); }
    #demo-form .check a { color: var(--lime); }
    #demo-form .hp { position: absolute; left: -9999px; }
    #demo-form button { justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
    #demo-form button[disabled] { opacity: .6; cursor: wait; }
    .form-error { color: #FF8A8A; margin: 0; min-height: 1em; }
    @media (max-width: 820px) {
      .demo-box { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
      #demo-form .grid2 { grid-template-columns: 1fr; }
      #demo-form button { justify-self: stretch; }
    }
    /* Badge degli store */
    .stores { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; }
    .stores .play img { display: block; height: 62px; width: auto; margin: -9px; }
    .stores .web { font-size: 15px; color: var(--muted); }
    .stores .web a { color: var(--text); }
    .get-app { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
      margin-top: 40px; padding: 28px 32px; border-radius: var(--radius);
      background: linear-gradient(120deg, var(--surface-high), var(--surface)); }
    .get-app h3 { font-size: 26px; }
    .get-app p { margin: 6px 0 0; }
    .get-app .stores { margin-top: 0; }

    /* Animazioni allo scorrimento (solo con JS attivo e se l'utente non ha ridotto il movimento) */
    .progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 20; background: var(--lime);
      transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
    @media (prefers-reduced-motion: no-preference) {
      .js .reveal { opacity: 0; transform: translateY(32px) scale(.98);
        transition: opacity .7s ease, transform .8s cubic-bezier(.2, .75, .2, 1);
        transition-delay: var(--d, 0s); }
      .js .reveal.in { opacity: 1; transform: none; }
      .js .hero > div:first-child > * { animation: rise .8s cubic-bezier(.2, .75, .2, 1) both; }
      .js .hero > div:first-child > :nth-child(2) { animation-delay: .08s; }
      .js .hero > div:first-child > :nth-child(3) { animation-delay: .16s; }
      .js .hero > div:first-child > :nth-child(4) { animation-delay: .24s; }
      .js .hero > div:first-child > :nth-child(5) { animation-delay: .32s; }
      .js .hero .phone { animation: rise 1s .2s cubic-bezier(.2, .75, .2, 1) both; }
      .js .hero .phone img { animation: float 6s 1.2s ease-in-out infinite; }
      .js .shot-card .shot-phone { transition: transform .5s cubic-bezier(.2, .75, .2, 1); }
      .js .shot-card.focus .shot-phone { transform: translateY(-8px) scale(1.03); }
      .js .stores .play { transition: transform .2s; }
      .js .stores .play:hover { transform: translateY(-2px); }
    }
    @keyframes rise { from { opacity: 0; transform: translateY(24px); } }
    @keyframes float { 50% { transform: translateY(-10px); } }

    /* Pagine di approfondimento (gestionale-box-crossfit, app-prenotazioni-pilates, ridurre-assenze-lezioni) */
    .article { max-width: 760px; margin: 0 auto; padding: 56px 24px 24px; }
    .article h1 { font-size: clamp(36px, 5vw, 56px); margin: 12px 0 20px; }
    .article .lead { font-size: 20px; color: var(--muted); margin: 0 0 32px; }
    .article h2 { font-size: clamp(26px, 3vw, 34px); margin: 48px 0 14px; }
    .article h3 { font-size: 21px; margin: 28px 0 8px; }
    .article p, .article li { color: #D3D6F2; }
    .article ul, .article ol { padding-left: 22px; }
    .article li { margin: 6px 0; }
    .article .card { margin: 24px 0; }
    .article table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 16px; }
    .article th, .article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--surface-high); }
    .article th { color: var(--text); }
    .cta-box { margin: 48px 0 16px; padding: 28px; border-radius: var(--radius); background: linear-gradient(120deg, var(--surface-high), var(--surface)); }
    .cta-box h2 { margin: 0 0 8px; }
    .cta-box .ctas { margin-top: 18px; }
    .related { margin: 32px 0 0; }
    .related a { display: block; padding: 6px 0; color: var(--lime); }

/* Foto di copertina delle pagine articolo */
.article .cover { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; margin: 8px 0 24px; display: block; }