:root{
  --bg:#0b0f14;
  --ink:#e5e7eb;
  --muted:#9aa4b2;
  --brand:#f59e0b;
  --card:#11161d;
  --accent:#1f2937;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial}
a{color:#a5b4fc;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.site-header{position:sticky;top:0;background:rgba(11,15,20,.9);backdrop-filter:blur(8px);border-bottom:1px solid #202734;z-index:50}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--ink);text-decoration:none}
.brand .logo{width:36px;height:36px}
.site-nav{display:flex;gap:14px;align-items:center}
.site-nav .btn{background:var(--brand);color:#111827;padding:8px 12px;border-radius:10px;font-weight:700}
.content{padding:32px 0}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center}
.card{background:var(--card);border:1px solid #202734;border-radius:16px;padding:18px}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.lead{font-size:1.2rem;color:#c4c9d4}
.kicker{color:var(--brand);text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.btn-ghost{padding:10px 14px;border:1px solid #2a3342;border-radius:10px;color:#d1d5db;display:inline-block}
.site-footer{border-top:1px solid #202734;padding:20px 0;color:var(--muted)}
.small{font-size:.85rem;color:var(--muted)}
form label{display:block;margin:10px 0 6px}
input[type="text"],input[type="email"],textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #2a3342;background:#0e141b;color:#e5e7eb}
button, .btn-primary{background:var(--brand);color:#111827;padding:10px 14px;border-radius:10px;border:none;font-weight:700;cursor:pointer}
@media (max-width:900px){.hero{grid-template-columns:1fr}}


/* === MENU MOBILE RESPONSIVE === */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 38px;         /* leggermente più largo */
  height: 34px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 100;
  position: relative;
  transition: transform 0.3s ease;
}
.menu-toggle span {
  display: block;
  width: 100%;          /* linea più lunga */
  height: 2.5px;        /* linea più sottile */
  background: #f59e0b;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Effetto "X" quando il menu è aperto */
.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}
.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Layout mobile */
@media (max-width: 900px) {
  .menu-toggle {
    display: flex;
  }

  .nav-wrapper {
    display: none;
    flex-direction: column;          /* menu verticale */
    align-items: flex-start;
    position: absolute;
    top: 60px;
    right: 16px;
    background: #0e141b;
    border: 1px solid #202734;
    border-radius: 12px;
    padding: 16px;
    width: 220px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  }
  .nav-wrapper.open {
    display: flex;
    animation: fadeIn 0.3s ease;
  }

  .site-nav {
    display: flex;
    flex-direction: column;         /* 👈 forza la verticalità */
    width: 100%;
  }

  .site-nav a {
    display: block;
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid #1c2530;
    text-align: left;
  }
  .site-nav a:last-child {
    border-bottom: none;
  }

  @keyframes fadeIn {
    from {opacity: 0; transform: translateY(-10px);}
    to {opacity: 1; transform: translateY(0);}
  }
}