/* =====================
   COME FUNZIONA — pagina semplice (.cf-*)
   ===================== */
.cf-hero{background:radial-gradient(120% 130% at 15% 0%,#0c4a2a 0%,#063018 55%,#04140b 100%);color:#fff;padding:52px 0 56px;text-align:center;position:relative;overflow:hidden}
.cf-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(124,255,178,.16),transparent 70%)}
.cf-hero-inner{position:relative;z-index:2;max-width:720px;margin:0 auto;padding:0 35px}
.cf-breadcrumb{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;color:#9fe6c0;margin-bottom:16px}
.cf-breadcrumb a{color:#9fe6c0;text-decoration:none}.cf-breadcrumb a:hover{color:#fff}
.cf-breadcrumb .ti{font-size:14px}
.cf-hero h1{font-family:Georgia,serif;font-size:42px;font-weight:400;line-height:1.1;margin-bottom:14px}
.cf-hero h1 em{font-style:italic;color:#7CFFB2}
.cf-hero p{font-size:16px;color:rgba(255,255,255,.85);line-height:1.7}

/* flow: 3 grandi step verticali */
.cf-flow{max-width:780px;margin:54px auto;padding:0 35px;position:relative}
.cf-flow::before{content:"";position:absolute;left:calc(35px + 33px);top:40px;bottom:40px;width:2px;background:linear-gradient(#cfe0d4,#eef2ef);z-index:0}
.cf-step{position:relative;z-index:1;display:flex;gap:22px;background:#fff;border:1px solid #e7ece8;border-radius:18px;
  padding:28px;margin-bottom:22px;box-shadow:0 16px 40px -26px rgba(0,40,20,.3);
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.cf-step:hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(0,40,20,.4)}
.cf-step-num{width:66px;height:66px;flex-shrink:0;border-radius:50%;background:#003d22;color:#fff;
  font-family:Georgia,serif;font-size:30px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -10px rgba(0,61,34,.6)}
.cf-step-body{flex:1}
.cf-step-body .cf-ic{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:1px;color:#2e8b57;text-transform:uppercase;margin-bottom:8px}
.cf-step-body .cf-ic .ti{font-size:18px}
.cf-step-body h2{font-family:Georgia,serif;font-size:24px;font-weight:400;color:#071f16;margin-bottom:10px}
.cf-step-body p{font-size:15px;color:#4a5a51;line-height:1.7;margin-bottom:14px}
.cf-step-body .cf-tip{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:#5b6b62;background:#f6f9f6;border:1px solid #e6efe8;border-radius:10px;padding:11px 14px;margin-bottom:14px;line-height:1.5}
.cf-step-body .cf-tip .ti{color:#2e8b57;font-size:17px;flex-shrink:0;margin-top:1px}
.cf-link{display:inline-flex;align-items:center;gap:8px;background:#003d22;color:#fff;font-size:13px;font-weight:700;
  border-radius:9px;padding:11px 20px;text-decoration:none;transition:background .2s,transform .2s}
.cf-link:hover{background:#0a5a32;transform:translateY(-2px)}
.cf-link.ghost{background:#fff;color:#003d22;border:1px solid #c8d8cc}
.cf-link.ghost:hover{background:#003d22;color:#fff}

/* riepilogo rapido */
.cf-quick{background:#f7faf8;border-top:1px solid #ecefed;border-bottom:1px solid #ecefed;padding:40px 0;text-align:center}
.cf-quick p{font-size:14px;color:#5b6b62}
.cf-quick b{color:#003d22}

/* CTA */
.cf-cta{text-align:center;padding:52px 35px}
.cf-cta h2{font-family:Georgia,serif;font-size:28px;font-weight:400;color:#071f16;margin-bottom:8px}
.cf-cta p{font-size:14px;color:#5b6b62;margin-bottom:22px}
.cf-cta .cf-link{font-size:14px;padding:14px 30px}

@media(max-width:600px){
  .cf-flow::before{display:none}
  .cf-step{flex-direction:column;gap:14px;padding:22px}
  .cf-step-num{width:52px;height:52px;font-size:24px}
  .cf-hero h1{font-size:32px}
}