/* ==============================================================
   SQL Guardian Web – Versione PRO (tema completo)
   Sfondo blu notte, vetro opaco, palette ciano/oro/bianco
   Include hero, pricing, form, features e responsive menu
============================================================== */

:root {
  --bg1:#04101e;
  --bg2:#061a2f;
  --accent:#00C6FF;
  --accent-2:#0093D1;
  --gold:#CBA26B;
  --text:#FFFFFF;
  --muted:#A5C3DA;
  --glass: rgba(255,255,255,0.05);
  --border: rgba(255,255,255,0.08);
  --radius:18px;
  --shadow: 0 20px 45px rgba(0,0,0,0.35);
  font-family:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
body.site-page{
  background:radial-gradient(circle at center top,var(--bg2) 0%,var(--bg1) 100%);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}

/* HEADER */
.main-header {
  background: rgba(4,16,28,0.55);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  position:sticky; top:0; z-index:30;
}
.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:min(1180px,92%);
  margin:0 auto;
  padding:12px 0;
}
.logo-top {height:58px;}
.main-nav ul {display:flex;gap:18px;list-style:none;}
.main-nav a {
  color:var(--text);
  opacity:0.9;
  padding:10px 14px;
  border-radius:999px;
  font-weight:500;
  transition:.25s;
}
.main-nav a:hover,
.main-nav a.active {
  background:rgba(0,198,255,0.14);
  outline:1px solid rgba(0,198,255,0.25);
}
.nav-toggle {display:none;}

/* HERO */
.hero{text-align:center;padding:20px 0 60px;}
.hero h1{font-size:clamp(36px,5vw,52px);font-weight:700;margin-bottom:10px;}
.hero h2{font-size:20px;font-weight:400;color:var(--muted);margin-bottom:14px;}
.hero p{color:var(--muted);max-width:800px;margin:0 auto 24px;}

.hero-pricing {
  text-align:center;
  padding:20px 0 30px;
}
.hero-pricing h1 {
  font-size:34px;
  font-weight:700;
  color:var(--text);
  margin-bottom:12px;
}
.hero-pricing .subtitle {
  max-width:720px;
  margin:0 auto;
  color:var(--muted);
  font-size:17px;
  line-height:1.5;
}

.container{width:min(1180px,92%);margin:0 auto;}

/* GLASS CARD */
.glass {
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* BUTTONS */
.btn-primary {
  display:inline-block;
  padding:12px 22px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#00131F;
  font-weight:800;
  box-shadow:0 14px 30px rgba(0,198,255,0.35);
  transition:.25s;
  text-decoration:none;
}
.btn-primary:hover {
  transform:translateY(-3px);
  box-shadow:0 20px 40px rgba(0,198,255,0.45);
}
.btn-primary.big{
  font-size:18px;
  padding:14px 28px;
  border-radius:30px;
}

.text-white{color:var(--text);}
.text-muted{color:var(--muted);}
.text-cyan{color:var(--accent);}
.text-gold{color:var(--gold);}

/* FEATURES */
.features {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
  margin:24px auto 62px;
}
.feature {
  padding:18px;
  text-align:center;
}

/* PRICING CARDS */
.pricing{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:22px;
  padding-bottom:30px;
}
.plan {
  position:relative;
  width:320px;
  text-align:center;
  padding:26px 20px 36px;
  border-radius:var(--radius);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 15px 30px rgba(0,0,0,0.3);
}
.plan.featured {
  border-color:rgba(0,198,255,0.4);
  box-shadow:0 0 25px rgba(0,198,255,0.2);
}
.plan h2 {color:var(--accent);font-size:20px;margin-bottom:8px;}
.plan .plan-sub {color:var(--muted);margin-bottom:14px;}
.plan ul {list-style:none;text-align:left;color:var(--muted);margin:0 0 16px;padding-left:0;}
.plan ul li {padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.05);}
.plan .price {font-size:24px;font-weight:800;color:var(--gold);}
.plan .price span {font-weight:500;font-size:16px;color:var(--muted);}
.plan .badge {
  position:absolute; top:12px; right:12px;
  background:rgba(203,162,107,0.15);
  border:1px solid rgba(203,162,107,0.35);
  border-radius:12px;
  font-size:12px;
  padding:4px 10px;
  color:var(--gold);
  text-transform:uppercase;
}
.cta-center{text-align:center;margin-bottom:50px;}

/* FORMS */
.form-section {margin-bottom:60px;}
.contact-form {max-width:720px;margin:0 auto;padding:24px;}
.form-group {margin-bottom:16px;}
.form-group label {display:block;font-weight:600;margin-bottom:6px;color:var(--accent);}
.form-group input,
.form-group textarea {
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.15);
  border-radius:10px;
  background:rgba(255,255,255,0.05);
  color:var(--text);
}
.grid-2 {display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
.hint {color:var(--muted);font-size:14px;margin-top:6px;}

/* FOOTER */
.site-footer {
  margin-top:60px;
  padding:28px 0;
  color:var(--muted);
  border-top:1px solid rgba(255,255,255,0.08);
  text-align:center;
}
.footer-inner {
  display:flex;
  align-items:center;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}
.logo-mini {height:28px;opacity:0.75;filter:brightness(1.4);}

/* RESPONSIVE MENU */
@media(max-width:820px) {
  .nav-toggle {display:inline-block;}
  .main-nav ul {
    display:none;
    flex-direction:column;
    position:absolute;
    right:16px; top:62px;
    background:#07172A;
    padding:10px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.08);
  }
  .main-nav.open ul {display:flex;}
}