:root{
  --bg:#f8fafc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --blue:#2563eb;         /* evidenza "30 secondi" */
  --cta:#28a745;          /* bottone verde */
  --cta-dark:#218838;
  --border:#e2e8f0;
  --shadow:0 10px 30px rgba(2,6,23,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{
  font:16px/1.6 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg); color:var(--text);
}
.container{max-width:1100px;margin:0 auto;padding:20px}

/* Header */
.header{background:var(--card);border-bottom:1px solid var(--border)}
.header__inner{display:flex;align-items:center;gap:12px;padding:14px 0}
.logo{height:44px}

/* Hero */
.hero{
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:30px;align-items:center;
  padding:36px 0;
}
.hero__title{font:800 42px/1.1 "Poppins","Inter",sans-serif;margin:0 0 6px}
.hero__subtitle{font:700 28px/1.2 "Poppins","Inter",sans-serif;margin:0 0 10px}
.highlight{color:var(--blue)}
.hero__lead{color:var(--muted);margin:0 0 18px}

/* Pills */
.pills{display:flex;gap:14px;flex-wrap:wrap;padding:0;margin:14px 0}
.pill{
  list-style:none;background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;
  padding:8px 12px;border-radius:999px;font-weight:600
}

/* Card form */
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow);padding:18px
}
.label{font-weight:700;margin:2px 0 6px;display:block}
.input{
  width:100%;padding:14px 16px;border:1px solid var(--border);
  border-radius:12px;font-size:16px;margin-bottom:12px
}

/* Pulsante principale */
button,
.btn,
button[type="submit"] {
  display: block;             /* blocco */
  margin: 0 auto;             /* centrato */
  width: 100%;
  max-width: 320px;           /* limite massimo */
  font-size: 22px;            /* testo più grande */
  font-weight: 700;           /* grassetto */
  letter-spacing: 1px;        /* testo più largo */
  text-align: center;
  padding: 18px 28px;
  border: none;
  border-radius: 12px;
  background-color: var(--cta);
  color: #fff;
  cursor: pointer;
  animation: pulse 1.6s infinite;
  transition: all 0.3s ease;
}
button:hover,
.btn:hover,
button[type="submit"]:hover {
  background-color: var(--cta-dark);
  transform: scale(1.05);
}

/* Effetto pulsazione */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.6);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 12px rgba(40, 167, 69, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
  }
}

.notice{font-size:12px;color:#64748b;margin:8px 0 0}
.status{margin-top:8px;color:#334155;min-height:22px}

/* Benefits */
.benefits{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:22px 0 8px
}
.benefit{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:20px;box-shadow:var(--shadow);text-align:center
}
.benefit h3{margin:6px 0 8px}
.benefit p{color:var(--muted)}

/* Footer */
.footer{background:var(--card);border-top:1px solid var(--border);color:#64748b;margin-top:14px}
.footer__inner{padding:18px 0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px}

/* Responsive */
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .hero__title{font-size:34px}
  .hero__subtitle{font-size:22px}
}
@media (max-width:640px){
  .container { padding: 16px; }
  .card { margin: 0 8px; }
  .pills { flex-direction: column; align-items: stretch; gap: 10px; }
  .pill  { width: 100%; text-align: left; }
  .benefits { grid-template-columns: 1fr; gap: 14px; }
  .hero__title { font-size: 28px; line-height: 1.2; }
  .hero__subtitle { font-size: 20px; }
  button,
  .btn,
  button[type="submit"] {
    font-size: 20px;
    padding: 16px 24px;
    max-width: 100%;
  }
}