/* ===== Unic Place — sito vetrina · design system ===== */
:root{
  --verde:#1a6b40; --verde-scuro:#103823; --verde-chiaro:#5ed68c; --verde-tenue:#e8f7ee;
  --ink:#0f1f17; --grigio:#5a6b62; --linea:#e3e9e5; --bg:#ffffff; --bg-soft:#f4f8f5;
  --raggio:14px; --ombra:0 1px 2px rgba(16,56,35,.04), 0 10px 30px rgba(16,56,35,.07);
  --max:1180px;
  --f: 'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{line-height:1.12;letter-spacing:-.02em;font-weight:800}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.sezione{padding:clamp(56px,8vw,104px) 0}
.sezione-soft{background:var(--bg-soft)}
.centro{text-align:center}

/* bottoni */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:999px;
  padding:13px 24px;font-size:15px;font-weight:700;cursor:pointer;transition:transform .12s,background .15s,box-shadow .15s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-primario{background:var(--verde);color:#fff;box-shadow:0 8px 20px rgba(26,107,64,.28)}
.btn-primario:hover{background:var(--verde-scuro)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--linea)}
.btn-ghost:hover{border-color:var(--verde);color:var(--verde)}
.btn-chiaro{background:#fff;color:var(--verde-scuro)}
.btn-grande{padding:16px 30px;font-size:16.5px}
.btn-bianco{background:#fff;color:var(--verde-scuro)}
.btn-bordo-bianco{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-bordo-bianco:hover{background:rgba(255,255,255,.12)}

/* header */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.nav{display:flex;align-items:center;gap:24px;height:68px}
.nav-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--verde-scuro)}
.nav-logo svg{height:34px;width:34px}
.nav-links{display:flex;gap:6px;margin-left:14px}
.nav-links a{padding:8px 13px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--grigio)}
.nav-links a:hover{background:var(--bg-soft);color:var(--ink)}
.nav-links a.attivo{color:var(--verde)}
.nav-azioni{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-azioni .btn{padding:10px 18px;font-size:14.5px}
.burger{display:none;background:none;border:none;font-size:26px;cursor:pointer;color:var(--ink)}

/* hero */
.hero{position:relative;overflow:hidden;background:
   radial-gradient(1100px 460px at 78% -8%, var(--verde-tenue), transparent 60%),
   radial-gradient(800px 420px at 5% 8%, #eef6ff, transparent 55%)}
.hero-griglia{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:clamp(48px,7vw,90px) 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--verde-tenue);color:var(--verde);
  font-weight:700;font-size:13px;padding:6px 13px;border-radius:999px;margin-bottom:18px}
.hero h1{font-size:clamp(36px,5.2vw,60px);letter-spacing:-.03em}
.hero p.sub{font-size:clamp(17px,2vw,21px);color:var(--grigio);margin-top:18px;max-width:560px}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}
.hero-trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;color:var(--grigio);font-size:13.5px}
.hero-trust span{display:flex;align-items:center;gap:7px}

/* mockup prodotto (finta finestra app) */
.mockup{background:#fff;border:1px solid var(--linea);border-radius:16px;box-shadow:var(--ombra);overflow:hidden}
.mockup-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--linea);background:#fbfdfb}
.mockup-bar i{width:11px;height:11px;border-radius:50%;background:#e3e9e5}
.mockup-bar i:nth-child(1){background:#ff5f57}.mockup-bar i:nth-child(2){background:#febc2e}.mockup-bar i:nth-child(3){background:#28c840}
.mockup-url{margin-left:10px;font-size:12px;color:var(--grigio);background:#fff;border:1px solid var(--linea);border-radius:999px;padding:3px 12px}
.mockup-body{display:grid;grid-template-columns:120px 1fr;min-height:300px}
.mockup-side{background:var(--verde-scuro);padding:16px 12px;display:flex;flex-direction:column;gap:9px}
.mockup-side b{color:#fff;font-size:13px;margin-bottom:6px}
.mockup-side span{height:9px;border-radius:5px;background:rgba(255,255,255,.18)}
.mockup-side span.on{background:var(--verde-chiaro)}
.mockup-main{padding:18px}
.mockup-h{height:14px;width:55%;background:#dfe7e2;border-radius:6px;margin-bottom:14px}
.mockup-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px}
.mockup-cards div{height:62px;border-radius:10px;background:var(--verde-tenue);border:1px solid #d6efe0}
.mockup-cards div:nth-child(2){background:#eef6ff;border-color:#dbe9fb}
.mockup-cards div:nth-child(3){background:#fff7ed;border-color:#f6e6cd}
.mockup-row{height:10px;border-radius:5px;background:#eef2ef;margin-bottom:9px}
.mockup-row.w70{width:70%}.mockup-row.w50{width:50%}.mockup-row.w85{width:85%}
.mockup-bars{display:flex;align-items:flex-end;gap:8px;height:70px;margin-top:14px}
.mockup-bars i{flex:1;background:linear-gradient(var(--verde-chiaro),var(--verde));border-radius:5px 5px 2px 2px}

/* generic grids/cards */
.titolo-sez{font-size:clamp(27px,3.6vw,40px)}
.intro-sez{color:var(--grigio);font-size:17px;margin-top:12px;max-width:620px}
.centro .intro-sez{margin-left:auto;margin-right:auto}
.griglia{display:grid;gap:18px;margin-top:40px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--linea);border-radius:var(--raggio);padding:24px;box-shadow:var(--ombra);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(16,56,35,.12)}
.card .ico{width:46px;height:46px;border-radius:12px;background:var(--verde-tenue);display:flex;align-items:center;justify-content:center;font-size:23px;margin-bottom:14px}
.card h3{font-size:18.5px;margin-bottom:7px}
.card p{color:var(--grigio);font-size:14.5px}

/* problema (lista) */
.problema-lista{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px}
.problema-voce{display:flex;gap:12px;background:#fff;border:1px solid var(--linea);border-radius:12px;padding:16px 18px}
.problema-voce .x{color:#dc2626;font-weight:800;font-size:18px}
.problema-voce p{font-size:15px}

/* soluzione split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.lista-check{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.lista-check li{list-style:none;display:flex;gap:11px;align-items:flex-start;font-size:15.5px}
.lista-check .v{color:var(--verde);font-weight:800;flex-shrink:0;margin-top:2px}

/* step */
.step{position:relative;background:#fff;border:1px solid var(--linea);border-radius:var(--raggio);padding:24px;box-shadow:var(--ombra)}
.step .num{width:34px;height:34px;border-radius:50%;background:var(--verde);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.step .ico{font-size:26px;margin-bottom:8px}
.step h3{font-size:17px;margin-bottom:6px}
.step p{color:var(--grigio);font-size:14px}

/* tipologie chips */
.tipo-card{background:#fff;border:1px solid var(--linea);border-radius:var(--raggio);padding:20px;box-shadow:var(--ombra)}
.tipo-card .emo{font-size:30px;margin-bottom:10px}
.tipo-card h3{font-size:16.5px;margin-bottom:5px}
.tipo-card p{color:var(--grigio);font-size:13.5px}

/* funzionalità lista */
.fx{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--linea);font-size:15px}
.fx:last-child{border-bottom:none}
.fx .v{color:var(--verde);font-weight:800}

/* banda CTA */
.banda{background:linear-gradient(135deg,var(--verde-scuro),var(--verde));color:#fff;border-radius:22px;padding:clamp(34px,5vw,60px);text-align:center;box-shadow:0 18px 50px rgba(16,56,35,.25)}
.banda h2{font-size:clamp(26px,3.6vw,40px)}
.banda p{opacity:.92;margin-top:12px;font-size:17px}
.banda .hero-cta{justify-content:center;margin-top:26px}

/* social section */
.social-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.social-tags span{background:#fff;border:1px solid var(--linea);border-radius:999px;padding:8px 15px;font-size:14px;font-weight:600;color:var(--grigio)}

/* prezzi */
.prezzo-card{background:#fff;border:1px solid var(--linea);border-radius:18px;padding:28px;box-shadow:var(--ombra);display:flex;flex-direction:column}
.prezzo-card.evidenza{border-color:var(--verde);box-shadow:0 16px 44px rgba(26,107,64,.18);position:relative}
.prezzo-card.evidenza::before{content:'Più scelto';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--verde);color:#fff;font-size:12px;font-weight:700;padding:4px 13px;border-radius:999px}
.prezzo-nome{font-size:20px;font-weight:800}
.prezzo-cifra{font-size:38px;font-weight:800;margin:10px 0 2px}
.prezzo-cifra small{font-size:15px;color:var(--grigio);font-weight:600}
.prezzo-card ul{list-style:none;margin:18px 0;display:flex;flex-direction:column;gap:10px}
.prezzo-card li{display:flex;gap:9px;font-size:14.5px}.prezzo-card li .v{color:var(--verde);font-weight:800}
.prezzo-card .btn{margin-top:auto}

/* caso studio */
.caso{background:#fff;border:1px solid var(--linea);border-radius:18px;overflow:hidden;box-shadow:var(--ombra)}
.caso-top{padding:18px 20px;color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;gap:10px}
.caso-body{padding:20px}
.caso-body .et{font-size:12px;font-weight:700;color:var(--verde);text-transform:uppercase;letter-spacing:1px}
.caso-body p{font-size:14px;color:var(--grigio);margin:4px 0 12px}
.caso-tags{display:flex;flex-wrap:wrap;gap:6px}
.caso-tags span{background:var(--bg-soft);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--grigio)}

/* risorse */
.risorsa{display:block;background:#fff;border:1px solid var(--linea);border-radius:var(--raggio);padding:22px;box-shadow:var(--ombra);transition:transform .15s}
.risorsa:hover{transform:translateY(-3px)}
.risorsa .et{font-size:12px;color:var(--verde);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.risorsa h3{font-size:17px;margin:7px 0}
.risorsa p{color:var(--grigio);font-size:14px}
.risorsa .leggi{color:var(--verde);font-weight:700;font-size:14px;margin-top:12px;display:inline-block}

/* form */
.form-box{background:#fff;border:1px solid var(--linea);border-radius:18px;padding:28px;box-shadow:var(--ombra)}
.campo{margin-bottom:15px}
.campo label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.campo input,.campo select,.campo textarea{width:100%;border:1px solid var(--linea);border-radius:10px;padding:12px 14px;font-size:15px;font-family:inherit;color:var(--ink)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(26,107,64,.13)}
.form-due{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.privacy-riga{display:flex;gap:9px;font-size:13.5px;color:var(--grigio);align-items:flex-start;margin:6px 0 16px}
.form-esito{margin-top:14px;padding:12px 14px;border-radius:10px;font-weight:600;font-size:14px}
.form-esito.ok{background:#e7f6ec;color:#1e7c43}.form-esito.ko{background:#fdecea;color:#b03a2e}

/* footer */
.site-footer{background:var(--verde-scuro);color:#cfe0d6;padding:54px 0 26px}
.footer-griglia{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.footer-logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:19px;margin-bottom:12px}
.footer-logo svg{height:32px;width:32px}
.site-footer p.descr{font-size:14px;max-width:260px}
.footer-col h4{color:#fff;font-size:14px;margin-bottom:12px}
.footer-col a{display:block;font-size:14px;padding:5px 0;color:#cfe0d6}
.footer-col a:hover{color:#fff}
.footer-basso{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:#9fb3a7}
.footer-social{display:flex;gap:14px}

/* reveal anim */
.rivela{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rivela.vista{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rivela{opacity:1;transform:none}}

/* responsive */
@media(max-width:900px){
  .hero-griglia,.split{grid-template-columns:1fr}
  .g3,.g4{grid-template-columns:1fr 1fr}
  .problema-lista{grid-template-columns:1fr}
  .footer-griglia{grid-template-columns:1fr 1fr}
  .nav-links{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--linea);padding:10px 16px;gap:2px}
  .nav-links.aperto{display:flex}
  .nav-links a{padding:13px}
  .burger{display:block;margin-left:auto}
  .nav-azioni{margin-left:0}
  .nav-azioni .btn-ghost{display:none}
}
@media(max-width:560px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .form-due{grid-template-columns:1fr}
  .footer-griglia{grid-template-columns:1fr 1fr}
  .mockup-body{grid-template-columns:1fr}.mockup-side{flex-direction:row;flex-wrap:wrap}
}