:root{
  --blu:#30b4cf;
  --blu-scuro:#1778a3;
  --blu-notte:#0f3a4d;
  --giallo:#ffe561;
  --giallo-scuro:#f4cf2e;
  --bg:#f4fbfd;
  --testo:#33474e;
  --bianco:#ffffff;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins',system-ui,sans-serif;
  color:var(--testo);
  background:var(--bg);
  line-height:1.6;
  overflow-x:hidden;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px;}
a{text-decoration:none;color:inherit;}

/* ---------- HEADER ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(48,180,207,.15);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;}
.nav img{height:42px;width:auto;}
.nav-cta{
  background:var(--blu);color:#fff;font-weight:600;font-size:.9rem;
  padding:10px 20px;border-radius:999px;transition:.25s;
  box-shadow:0 6px 16px rgba(48,180,207,.35);
}

.nav-cta.b2 {background:var(--giallo);color:var(--blu-notte);}
.nav-cta.b2:hover {background:var(--giallo-scuro);}

.nav-cta:hover{background:var(--blu-scuro);transform:translateY(-2px);}



/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:80px 0 90px;
  background:
	radial-gradient(1200px 500px at 15% -10%, rgba(255,229,97,.35), transparent 60%),
	radial-gradient(1000px 600px at 100% 0%, rgba(48,180,207,.28), transparent 55%),
	linear-gradient(180deg,#ffffff 0%,var(--bg) 100%);
  overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;}
.hero-logo{height:110px;width:auto;margin-bottom:26px;}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(48,180,207,.12);color:var(--blu-scuro);
  font-weight:600;font-size:.82rem;letter-spacing:.4px;
  padding:7px 16px;border-radius:999px;margin-bottom:22px;text-transform:uppercase;
}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--giallo-scuro);}
.hero h1{
  font-size:clamp(2.1rem,5vw,3.3rem);line-height:1.12;color:var(--blu-notte);
  font-weight:800;margin-bottom:20px;
}
.hero h1 span{color:var(--blu);}
.hero p{font-size:1.1rem;max-width:520px;margin-bottom:34px;color:#4a5a60;}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
.btn-primary{
  background:var(--blu);color:#fff;font-weight:700;font-size:1.02rem;
  padding:15px 30px;border-radius:999px;transition:.25s;
  box-shadow:0 12px 26px rgba(48,180,207,.4);display:inline-flex;align-items:center;gap:10px;
}
.btn-primary:hover{background:var(--blu-scuro);transform:translateY(-3px);box-shadow:0 16px 32px rgba(48,180,207,.5);}
.btn-ghost{
  color:var(--blu-scuro);font-weight:600;font-size:1rem;
  padding:15px 22px;border-radius:999px;border:2px solid rgba(48,180,207,.35);transition:.25s;
}
.btn-ghost:hover{background:rgba(48,180,207,.08);border-color:var(--blu);}

/* phone mockup */
.phone-stage{display:flex;justify-content:center;position:relative;}
.blob{
  position:absolute;inset:auto;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--giallo),transparent 70%);
  opacity:.55;filter:blur(10px);z-index:0;top:50%;left:50%;transform:translate(-50%,-50%);
}
.phone{
  position:relative;z-index:1;width:270px;height:540px;background:#0f3a4d;
  border-radius:42px;padding:12px;box-shadow:0 30px 60px rgba(15,58,77,.35);
}
.phone::before{
  content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:110px;height:22px;background:#0f3a4d;border-radius:0 0 16px 16px;z-index:3;
}
.phone-screen{width:100%;height:100%;border-radius:32px;overflow:hidden;background:#fff;}
.phone-screen img{width:100%;height:100%;object-fit:cover;object-position:bottom;display:block;}

/* ---------- SECTION SHARED ---------- */
section.block{padding:80px 0;}
.section-title{text-align:center;margin-bottom:14px;}
.eyebrow{
  display:block;text-align:center;color:var(--blu);font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;font-size:.8rem;margin-bottom:10px;
}
h2.big{font-size:clamp(1.7rem,3.5vw,2.4rem);color:var(--blu-notte);font-weight:800;text-align:center;}
.lead{text-align:center;max-width:680px;margin:16px auto 0;color:#556067;font-size:1.06rem;}

/* story */
.story{background:#fff;}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px;}
.story-card{
  background:var(--bg);border-radius:22px;padding:32px 26px;border:1px solid rgba(48,180,207,.12);
  transition:.25s;
}
.story-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(48,180,207,.14);}
.story-ico{
  width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;margin-bottom:18px;background:rgba(255,229,97,.35);
}
.story-card:nth-child(2) .story-ico{background:rgba(48,180,207,.16);}
.story-card h3{color:var(--blu-notte);font-size:1.2rem;font-weight:700;margin-bottom:10px;}
.story-card p{font-size:.98rem;color:#556067;}

/* features + preview */
.feat{background:linear-gradient(180deg,var(--bg),#eaf7fb);}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:20px;}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:20px;}
.feat-list li{display:flex;gap:16px;align-items:flex-start;}
.check{
  flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--blu);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 6px 14px rgba(48,180,207,.35);
}
.feat-list h4{color:var(--blu-notte);font-size:1.08rem;font-weight:700;}
.feat-list p{font-size:.96rem;color:#556067;}

/* CTA / QR */
.cta{
  background:
	radial-gradient(900px 400px at 100% 0%, rgba(255,229,97,.25), transparent 60%),
	linear-gradient(135deg,var(--blu) 0%,var(--blu-scuro) 100%);
  color:#fff;border-radius:0;padding:90px 0;
}
.cta-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center;}
.cta h2{font-size:clamp(1.8rem,3.6vw,2.5rem);font-weight:800;margin-bottom:16px;line-height:1.15;}
.cta p{font-size:1.08rem;opacity:.94;margin-bottom:30px;max-width:460px;}
.cta .btn-white{
  background:#fff;color:var(--blu-scuro);font-weight:700;font-size:1.05rem;
  padding:16px 32px;border-radius:999px;display:inline-flex;align-items:center;gap:10px;transition:.25s;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}
.cta .btn-white:hover{transform:translateY(-3px);background:var(--giallo);color:var(--blu-notte);}
.qr-card{
  background:#fff;border-radius:28px;padding:26px;text-align:center;
  box-shadow:0 24px 50px rgba(0,0,0,.22);max-width:280px;margin:0 auto;
}
.qr-card img{width:100%;max-width:220px;height:auto;display:block;margin:0 auto 14px;}
.qr-card span{color:var(--blu-notte);font-weight:600;font-size:.92rem;}
.qr-url{display:block;color:var(--blu);font-size:.82rem;margin-top:4px;word-break:break-all;}

/* footer */
footer{background:var(--blu-notte);color:#cfe6ee;padding:40px 0;text-align:center;}
footer img{height:34px;margin-bottom:14px;opacity:.95;}
footer .powered{font-size:.85rem;opacity:.75;margin-top:10px;}
footer a{color:var(--giallo);font-weight:600;}

/* responsive */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:44px;text-align:center;}
  .hero p{margin-left:auto;margin-right:auto;}
  .hero-actions{justify-content:center;}
  .hero-logo{margin-left:auto;margin-right:auto;}
  .story-grid{grid-template-columns:1fr;}
  .feat-grid{grid-template-columns:1fr;gap:40px;}
  .feat .phone-stage{order:-1;}
  .cta-grid{grid-template-columns:1fr;text-align:center;}
  .cta p{margin-left:auto;margin-right:auto;}
  .cta-actions{justify-content:center;display:flex;}
}
@media (max-width:520px){
/*  .nav-cta{display:none;} */
  section.block{padding:60px 0;}
  .hero{padding:56px 0 64px;}
}



.form-container { margin: 0 auto; background: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="text"], input[type="email"], input[type="date"], input[type="time"], input[type="number"], input[type="url"], textarea {
	width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;
}
button { background-color: #007bff; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
button:hover { background-color: #0056b3; }
.row { display: flex; gap: 10px; }
.row .form-group { flex: 1; }


.alert { padding: 10px 15px; margin-bottom: 20px; border-radius: 4px; }
.alert.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert.danger { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
th, td { border: 1px solid #ddd; padding: 10px; text-align: left; vertical-align: top; }
th { background-color: #007bff; color: white; }
tr:nth-child(even) { background-color: #f9f9f9; }
tr:hover { background-color: #f1f1f1; }
.btn-delete { background-color: #dc3545; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; }
.btn-delete:hover { background-color: #bd2130; }
.thumb { width: 50px; height: 50px; object-fit: cover; margin-right: 5px; border-radius: 4px; border: 1px solid #ccc; }
.no-data { text-align: center; padding: 20px; color: #666; }



input[type="file"] {
    display: block;
    border: 2px dashed #eee;
    border-radius: 10px;
    padding: 50px 30px;
    background: url(upload.png) center center no-repeat;
    background-size: contain;
    width: 100%;
}