:root {
      --color-bg: #f9f9f9;
      --color-box-bg: #ffffff;
      --color-border: #ddd;
      --color-text: #444;
      --color-text-muted: #777;
      --color-accent: #8fbfbf; /* verde acqua tenue */
      --color-accent-hover: #6ea3a3;
      --border-radius: 14px;
      --gap: 24px;
      --max-width: 1200px;
      --font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

      /* alias utile (nel tuo CSS usavi --muted ma non esisteva) */
      --muted: var(--color-text-muted);
    }

    body {
      margin: 0;
      background-color: var(--color-bg);
      font-family: var(--font-family);
      color: var(--color-text);
      padding: 20px;
    }

    /* ===== Header (titolo + testo) ===== */
    .cta-card-14__header {
      max-width: var(--max-width);
      margin: 0 auto 14px auto;
      padding: 10px 6px 6px;
      display: grid;
      gap: 10px;
    }

    .cta-card-14__kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--color-text-muted);
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: 12px;
    }

    .cta-card-14__kicker::before {
      content: "";
      width: 14px;
      height: 14px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 30%, rgba(143,191,191,.9), rgba(143,191,191,.15));
      border: 1px solid rgba(110,163,163,.35);
      box-shadow: 0 6px 18px rgba(143,191,191,.18);
    }

    .cta-card-14__titolo{
      font-family: "Fraunces", serif;
      font-weight: 750;
      font-size: clamp(22px, 3.2vw, 34px);
      margin: 0;
      line-height: 1.05;
      letter-spacing: -0.02em;
    }

    .cta-card-14--sub-totolo{
      margin: 0;
      color: var(--muted);
      font-size: clamp(13px, 1.6vw, 15px);
      max-width: 62ch;
      line-height: 1.55;
    }

    /* Wrapper del blocco */
    .cta-card-14__grid {
      display: flex;
      gap:10px;
      max-width: 1200px;
      margin: 0 auto;
      flex-wrap: wrap;
      justify-content: center;
    }

    /* Blocco principale */
    .cta-card-14 {
      background-color: var(--color-box-bg);
      border: 1.5px solid var(--color-border);
      border-radius: var(--border-radius);
      box-shadow: 0 4px 12px rgba(143, 191, 191, 0.15);
      overflow: hidden;
      flex: 1 1 220px;
      max-width: 23%;
      display: flex;
      flex-direction: column;
      transition: box-shadow 0.3s ease, border-color 0.3s ease, transform .25s ease;
    }

    .cta-card-14:hover {
      box-shadow: 0 8px 24px rgba(143, 191, 191, 0.35);
      border-color: var(--color-accent-hover);
      transform: translateY(-2px);
    }

    /* Elementi del blocco */
    .cta-card-14__image {
      width: 100%;
      height: 140px;
      object-fit: cover;
      display: block;
      border-top-left-radius: var(--border-radius);
      border-top-right-radius: var(--border-radius);
    }

    .cta-card-14__content {
      padding: 16px 20px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 10px;
    }

    .cta-card-14__title {
      margin: 0 0 4px 0;
      font-size: 1.05rem;
      color: var(--color-text);
      line-height: 1.2;
      letter-spacing: -0.01em;
    }

    .cta-card-14__text {
      flex-grow: 1;
      margin: 0 0 6px 0;
      color: var(--color-text-muted);
      font-size: 0.95rem;
      line-height: 1.4;
    }

    .cta-card-14__btn {
      align-self: flex-start;
      padding: 8px 20px;
      background-color: var(--color-accent);
      color: #fff;
      font-weight: 600;
      font-size: 1rem;
      border: none;
      border-radius: 9999px;
      cursor: pointer;
      text-decoration: none;
      transition: background-color 0.3s ease, box-shadow 0.3s ease, transform .12s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      user-select: none;

    }

    .cta-card-14__btn:hover,
    .cta-card-14__btn:focus-visible {
      background-color: var(--color-accent-hover);
      box-shadow: 0 6px 12px rgba(110, 163, 163, 0.5);
      outline: none;
      transform: translateY(-1px);
    }

    .cta-card-14__btn:active {
      transform: translateY(0px) scale(.99);
    }

    /* Responsive */
    @media (max-width: 1100px) {
      .cta-card-14 {
        max-width: 48%;
        flex-basis: 48%;
      }
      .cta-card-14__header{
        margin-bottom: 10px;
      }
    }

    @media (max-width: 600px) {
      body { padding: 16px; }
      .cta-card-14 {
        max-width: 100%;
        flex-basis: 100%;
      }
    }
  </style>
/*</head>

<body>

  <!-- HEADER INSERITO (titolo + testo) -->
  <header class="cta-card-14__header" aria-label="Sezione con titolo e descrizione">
    <div class="cta-card-14__kicker">In evidenza</div>
    <h1 class="cta-card-14__titolo">Scopri i nostri servizi</h1>
    <p class="cta-card-14--sub-totolo">
      Scegli la soluzione più adatta: consulenza, supporto e risorse pensate per aiutarti a partire subito.
    </p>
  </header>

  <!-- GRIGLIA CARD -->
  <main class="cta-card-14__grid" aria-label="Griglia di call to action">
    <article class="cta-card-14">
      <!-- Immagine (se vuoi mantenerla reale). In alternativa puoi rimuovere l'<img>. -->
      <img class="cta-card-14__image" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='500'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%238fbfbf' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='500' fill='url(%23g)'/%3E%3Ccircle cx='260' cy='220' r='120' fill='%236ea3a3' fill-opacity='.25'/%3E%3Ccircle cx='980' cy='160' r='160' fill='%238fbfbf' fill-opacity='.22'/%3E%3C/svg%3E" />
      <div class="cta-card-14__content">
        <div>
          <h2 class="cta-card-14__title">Consulenza</h2>
          <p class="cta-card-14__text">Analisi rapida e indicazioni operative per muoverti con chiarezza.</p>
        </div>
        <a class="cta-card-14__btn" href="#">Scopri →</a>
      </div>
    </article>

    <article class="cta-card-14">
      <img class="cta-card-14__image" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='500'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%238fbfbf' stop-opacity='.55'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='500' fill='url(%23g)'/%3E%3Cpath d='M0 340 C 240 260, 420 420, 680 330 S 1060 300, 1200 360 L 1200 500 L 0 500 Z' fill='%236ea3a3' fill-opacity='.18'/%3E%3C/svg%3E" />
      <div class="cta-card-14__content">
        <div>
          <h2 class="cta-card-14__title">Supporto</h2>
          <p class="cta-card-14__text">Ti seguiamo passo-passo con risposte rapide e soluzioni pratiche.</p>
        </div>
        <a class="cta-card-14__btn" href="#">Vai →</a>
      </div>
    </article>

    <article class="cta-card-14">
      <img class="cta-card-14__image" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='500'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238fbfbf' stop-opacity='.50'/%3E%3Cstop offset='1' stop-color='%23ffffff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='500' fill='url(%23g)'/%3E%3Crect x='120' y='110' width='260' height='260' rx='40' fill='%236ea3a3' fill-opacity='.16'/%3E%3Crect x='820' y='90' width='320' height='320' rx='56' fill='%238fbfbf' fill-opacity='.18'/%3E%3C/svg%3E" />
      <div class="cta-card-14__content">
        <div>
          <h2 class="cta-card-14__title">Risorse</h2>
          <p class="cta-card-14__text">Template, guide e materiali pronti per velocizzare il lavoro.</p>
        </div>
        <a class="cta-card-14__btn" href="#">Apri →</a>
      </div>
    </article>

    <article class="cta-card-14">
      <img class="cta-card-14__image" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='500'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%236ea3a3' stop-opacity='.35'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='500' fill='url(%23g)'/%3E%3Ccircle cx='600' cy='250' r='190' fill='%238fbfbf' fill-opacity='.16'/%3E%3Ccircle cx='600' cy='250' r='110' fill='%236ea3a3' fill-opacity='.12'/%3E%3C/svg%3E" />
      <div class="cta-card-14__content">
        <div>
          <h2 class="cta-card-14__title">Contatti</h2>
          <p class="cta-card-14__text">Parliamone: ti aiutiamo a scegliere il percorso migliore.</p>
        </div>
        <a class="cta-card-14__btn" href="#">Scrivi →</a>
      </div>
    </article>
  </main>

  <script>
    // opzionale: niente JS necessario per l'header. Lasciato vuoto volutamente.
  </script>
</body>
</html>