/* MODALE richiesta info pacchetto */
.modal-bg {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15,23,42,0.75);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 48px rgba(37,99,235,0.18);
  padding: 28px 20px 20px 20px;
  max-width: 420px;
  width: 100%;
  position: relative;
  animation: modalIn .18s cubic-bezier(.4,1.4,.6,1);
}
@keyframes modalIn {
  from { transform: translateY(40px) scale(.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.modal-close {
  position: absolute;
  top: 12px; right: 16px;
  background: none;
  border: none;
  font-size: 2.1rem;
  color: #2563eb;
  cursor: pointer;
  line-height: 1;
  z-index: 2;
  transition: color .15s;
}
.modal-close:hover { color: #1e293b; }
.modal-card h2 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: #2563eb;
}
.modal-card .field label { font-weight: 600; }
.modal-card .btn { width: 100%; }
.modal-card input, .modal-card textarea, .modal-card select{ border-radius:12px; padding:10px 10px; }
.modal-price{ font-weight:800; color:#dbeafe; background:rgba(37,99,235,0.06); padding:10px 12px; border-radius:10px; border:1px solid rgba(37,99,235,0.06) }
.modal-bg{align-items:center}
@media (max-width: 600px) {
  .modal-card { padding: 18px 4vw 14px 4vw; }
}
.plan-table td.selected {
  background: #1e40af;
  color: #fff;
  font-weight: 800;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(37,99,235,0.10);
  transition: background .18s, color .18s;
}
/* Tabella prezzi nelle card */
.plan-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  margin-top: 2px;
}
.plan-table th, .plan-table td {
  padding: 4px 8px;
  text-align: center;
  font-size: 1.07rem;
}
.plan-table th {
  background: rgba(255,255,255,0.03);
  color: #a7d0ff;
  font-weight: 700;
  border-radius: 6px 6px 0 0;
}
.plan-table td {
  background: transparent;
  color: var(--text);
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.plan-table tr:last-child td {
  border-bottom: none;
}
@media (max-width: 900px) {
  .plan-table th, .plan-table td {
    font-size: 1rem;
    padding: 4px 2px;
  }
}
/* Prezzi cards ordinati */
.pricing-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}
.plan-card {
  background: linear-gradient(180deg, rgba(6,12,26,0.9), rgba(7,20,39,0.95));
  color: var(--text);
  border-radius: 14px;
  box-shadow: 0 6px 30px rgba(2,6,23,0.5);
  border: 1px solid rgba(255,255,255,0.04);
  padding: 22px 18px;
  min-width: 260px;
  max-width: 340px;
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  transition: box-shadow .18s, transform .18s;
}
.plan-card.selected,
.plan-card:hover {
  border: 2.5px solid #2563eb;
  box-shadow: 0 4px 32px rgba(37,99,235,0.13);
  z-index: 2;
}
.plan-card:hover { transform: translateY(-6px) scale(1.01); }
.plan-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.plan-card .plan-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}
.plan-card .pill {
  background: #2563eb;
  color: #fff;
  font-size: .85em;
  border-radius: 8px;
  padding: 2px 10px;
  margin-left: 6px;
}
.plan-card .plan-price { display:none }
.plan-card .plan-feat {
  font-size: 0.98rem;
  color: #cfe6ff;
  margin-bottom: 14px;
  min-height: 56px;
}
.plan-card .btn {
  margin-top: auto;
  width: 100%;
  font-size: 1.04rem;
}
.plan-card .price-badge{margin-top:10px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,0.03);color:var(--text);font-weight:700;border:1px solid rgba(255,255,255,0.03);width:100%}
.plan-card .price-badge .badge-line{margin:3px 0;font-size:0.95rem}
.plan-card .price-badge .per-user{color:#a7d0ff}
.plan-card .price-badge .total{color:#dbeafe;font-weight:800}
.plan-card .price-badge .hint{color:var(--muted);font-weight:600}

/* Per-plan badge accents */
.plan-card[data-piano="Base"] .price-badge{border-color:rgba(96,165,250,0.06);background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));}
.plan-card[data-piano="Standard"] .price-badge{border-color:rgba(34,197,94,0.06);background:linear-gradient(180deg,rgba(34,197,94,0.03),rgba(255,255,255,0.01));}
.plan-card[data-piano="Professional"] .price-badge{border-color:rgba(96,165,250,0.12);background:linear-gradient(90deg, rgba(96,165,250,0.08), rgba(37,99,235,0.04));}
.plan-card[data-piano="Enterprise"] .price-badge{border-color:rgba(148,163,184,0.06);background:linear-gradient(180deg,rgba(148,163,184,0.03),rgba(255,255,255,0.01));}
.price-badge .plan-name{font-size:0.98rem;color:#fff;font-weight:800;margin-bottom:4px}

.price-badge{cursor:pointer}
.price-badge:focus{outline:3px solid rgba(96,165,250,0.18);outline-offset:2px}
.price-badge:hover{background:rgba(255,255,255,0.05)}
.plan-card.featured .price-badge{background:linear-gradient(90deg, rgba(96,165,250,0.12), rgba(37,99,235,0.06)); border-color: rgba(96,165,250,0.12)}

/* Pulse animation for feedback */
.pulse{animation:pulseBadge .48s ease both}
@keyframes pulseBadge{0%{transform:scale(1);box-shadow:0 6px 30px rgba(2,6,23,0.5)}50%{transform:scale(1.02);box-shadow:0 10px 44px rgba(37,99,235,0.2)}100%{transform:scale(1);box-shadow:0 6px 30px rgba(2,6,23,0.5)}}

/* Modal focus styles */
.modal-card:focus{outline:none}
.modal-card:focus-visible{outline:3px solid rgba(96,165,250,0.14);outline-offset:3px}
.plan-card.featured {
  border: 1px solid rgba(96,165,250,0.12);
  box-shadow: 0 10px 44px rgba(37,99,235,0.16);
  transform: translateY(-4px);
}
/* "Più richiesto" ribbon for highlighted plan */
.plan-card .most-requested{
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(90deg,#f59e0b,#f97316);
  color: #08101a;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight:800;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(249,115,22,0.14);
  transform: rotate(-4deg);
  line-height:1;
  z-index:3;
}
@media (max-width:900px){
  .plan-card .most-requested{ top:10px; right:10px; font-size:0.72rem; padding:5px 8px }
}
@media (max-width: 900px) {
  .pricing-cards {
    flex-direction: column;
    align-items: center;
  }
  .plan-card {
    min-width: 90vw;
    max-width: 98vw;
    width: 100%;
  }
}
:root{
  --bg0:#071427;
  --bg1:#0b1e3a;
  --bg2:#102a52;
  --card: rgba(255,255,255,0.06);
  --card2: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.10);
  --text:#e5e7eb;
  --muted:#9fb3c8;
  --accent:#60a5fa;
  --accent2:#22c55e;
  --danger:#ef4444;
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --radius: 18px;
  --max: 1120px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 20% 0%, rgba(96,165,250,.18), transparent 60%),
              radial-gradient(900px 600px at 90% 10%, rgba(34,197,94,.12), transparent 55%),
              linear-gradient(120deg, var(--bg1), var(--bg2), var(--bg1));
  color: var(--text);
  line-height: 1.55;
}
a{color:inherit}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header */
.site-header{
  position: sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(7,20,39,0.72);
  border-bottom: 1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:110px;width:auto;max-width:320px;display:block;filter:drop-shadow(0 8px 28px rgba(37,99,235,0.18));transition:height .18s ease,transform .18s ease;}
@media (max-width: 1100px){
  .brand img{height:92px;max-width:260px;}
}
@media (max-width: 900px){
  .brand img{height:72px;max-width:220px;}
}
@media (max-width: 700px){
  .brand img{height:56px;max-width:160px;}
}
.site-header{box-shadow:0 2px 18px rgba(37,99,235,0.10);border-bottom:1.5px solid rgba(96,165,250,0.10);}
.plan-row{position:relative;overflow:hidden;}
.plan-row.featured::before{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(96,165,250,.10),transparent 70%);pointer-events:none;}
.plan-row .plan-title{z-index:1;position:relative;}
.plan-row .plan-prices{z-index:1;position:relative;}
.plan-row .plan-feat{z-index:1;position:relative;}
.plan-row .btn{z-index:1;position:relative;}
.plan-row .plan-title{letter-spacing:.2px;}
.plan-row .plan-prices{gap:24px;}
.plan-row .plan-mensile,.plan-row .plan-annuale{background:rgba(96,165,250,.08);padding:2px 10px;border-radius:8px;}
.plan-row .plan-mensile{color:#2563eb;}
.plan-row .plan-annuale{color:#22c55e;}
.plan-row .btn{margin-top:8px;font-size:1.01rem;box-shadow:0 2px 8px rgba(37,99,235,0.08);}
.plan-row .btn.primary{background:linear-gradient(90deg,#2563eb,#60a5fa);color:#fff;}
@media (max-width: 480px){
  .plan-row .plan-prices{flex-direction:column;gap:8px;}
  .plan-row{padding:10px 4px;}
}
.nav-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;
  padding:10px 14px;
  min-height:44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  text-decoration:none;
  font-weight:700;
  box-shadow: none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18)}
.btn.primary{background: linear-gradient(180deg, rgba(96,165,250,.95), rgba(37,99,235,.95)); border-color: rgba(255,255,255,0.14)}
.btn.primary:hover{filter: brightness(1.03)}
.btn.success{background: linear-gradient(180deg, rgba(34,197,94,.92), rgba(22,163,74,.92)); border-color: rgba(255,255,255,0.14)}
.badge{
  display:inline-flex;align-items:center;
  padding:4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  font-weight:700;
  font-size:12px;
}

/* Hero */
.hero{padding:56px 0 22px}
.hero-grid{display:grid;grid-template-columns: 1.15fr .85fr;gap:20px;align-items:stretch}
.hero-card{
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
}
.hero h1{margin:0 0 10px;font-size: clamp(28px, 3.2vw, 44px); line-height: 1.12}
.hero p.lead{margin:0 0 18px;color: var(--muted); font-size: 1.05rem}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kpi{border:1px solid var(--border);background: rgba(255,255,255,0.06);border-radius:16px;padding:14px}
.kpi .n{font-weight:900;font-size:18px}
.kpi .t{color:var(--muted);font-size:13px}

/* Sections */
.section{padding:34px 0}
.section h2{margin:0 0 10px;font-size: clamp(22px, 2.2vw, 30px)}
.section p{margin:0 0 12px;color: var(--muted)}
.grid{display:grid;grid-template-columns: repeat(3, 1fr);gap:14px}
.card{
  border:1px solid var(--border);
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding:16px;
}
.card h3{margin:0 0 6px;font-size:18px}
.card ul{margin:10px 0 0;padding-left:18px;color: var(--muted)}
.card li{margin:6px 0}

.callout{
  border:1px solid rgba(96,165,250,.25);
  background: radial-gradient(600px 200px at 10% 0%, rgba(96,165,250,.20), transparent 55%), rgba(255,255,255,0.05);
  border-radius: var(--radius);
  padding:18px;
}
.callout strong{color:#dbeafe}

/* Reserved area */
.reserved{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border:1px solid rgba(34,197,94,.22);
  background: radial-gradient(700px 220px at 20% 0%, rgba(34,197,94,.18), transparent 60%), rgba(255,255,255,0.05);
  border-radius: var(--radius);
  padding:18px;
}
.reserved p{margin:0;color:var(--muted)}

/* Form */
.form-wrap{display:grid;grid-template-columns: 1fr 1fr; gap:14px}
.field{display:flex;flex-direction:column;gap:8px}
label{font-weight:700}
input, textarea{
  border-radius: 14px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(15,39,74,0.55);
  color: var(--text);
  padding: 12px 12px;
  outline:none;
}
select{
  border-radius: 14px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(15,39,74,0.55);
  color: var(--text);
  padding: 12px 12px;
  outline:none;
}
select:focus{border-color: rgba(96,165,250,.65); box-shadow: 0 0 0 3px rgba(59,130,246,.18)}
textarea{min-height:120px;resize:vertical}
input:focus, textarea:focus{border-color: rgba(96,165,250,.65); box-shadow: 0 0 0 3px rgba(59,130,246,.18)}
.help{color:var(--muted); font-size: 13px}
.checks{display:flex;flex-direction:column;gap:10px}
.check{display:flex;gap:10px;align-items:flex-start;color:var(--muted)}
.check input{margin-top:3px}
.alert{
  border:1px solid var(--border);
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 12px;
  margin: 10px 0 0;
}
.alert.ok{border-color: rgba(34,197,94,.35)}
.alert.err{border-color: rgba(239,68,68,.35)}

/* Footer */
.footer{padding:28px 0 40px;border-top:1px solid var(--border);background: rgba(0,0,0,0.12)}
.footer a{color:#dbeafe;text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer-grid{display:grid;grid-template-columns: 1.2fr .8fr; gap:16px}
.small{color:var(--muted);font-size:13px}

/* Cookie banner */
.cookie-banner{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  border:1px solid var(--border);
  background: rgba(7,20,39,0.92);
  border-radius: 16px;
  padding: 14px;
  display:none;
  box-shadow: var(--shadow);
}
.cookie-banner .row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cookie-banner p{margin:0;color:var(--muted);max-width: 820px}
.cookie-banner .actions{display:flex;gap:10px;flex-wrap:wrap}

@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr;}
  .grid{grid-template-columns: 1fr;}
  .form-wrap{grid-template-columns: 1fr;}
  .footer-grid{grid-template-columns: 1fr;}

  .header-inner{flex-wrap:wrap;}
  .nav-actions{width:100%;justify-content:space-between;}
  .nav-actions .btn{flex:1 1 auto;}
  .nav-actions .btn.primary{flex:1 1 100%;}
}

@media (max-width: 520px){
  .container{padding:0 14px}
  .brand img{height:40px}
  .nav-actions{gap:8px}
  .nav-actions .btn{padding:10px 12px}
}

/* Pricing */

/* Prezzi lineare */
.pricing-list { display: flex; flex-direction: column; gap: 18px; }
.plan-row { border:1px solid var(--border); background: rgba(255,255,255,0.06); border-radius: var(--radius); padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.plan-row .plan-title { font-weight:900; font-size: 1.15rem; display:flex; align-items:center; gap:10px; }
.plan-row .plan-prices { display:flex; flex-wrap:wrap; gap:18px; font-weight:700; font-size:1.05rem; color:var(--accent); }
.plan-row .plan-prices span { font-size:13px; color:var(--muted); font-weight:700; margin-left:4px; }
.plan-row .plan-feat { color:var(--muted); font-size: 1rem; margin-bottom: 2px; }
.plan-row .btn { align-self: flex-start; margin-top: 4px; }
.plan-row.featured { border-color: rgba(96,165,250,.35); background: radial-gradient(600px 200px at 20% 0%, rgba(96,165,250,.18), transparent 55%), rgba(255,255,255,0.06); }
.plan-row .pill { display:inline-flex; align-self:flex-start; padding:4px 10px; border-radius:999px; border:1px solid rgba(96,165,250,.35); background: rgba(96,165,250,.15); color:#dbeafe; font-weight:800; font-size:12px; }

@media (max-width: 700px){
  .plan-row { padding: 14px 8px; }
  .plan-row .plan-title { font-size: 1.05rem; }
  .plan-row .plan-feat { font-size: .98rem; }
}

@media (max-width: 1100px){
  .pricing-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 680px){
  .pricing-grid{grid-template-columns:1fr}
  .nav-actions .btn{flex:1 1 100%}
}