/* layout.css — sfondo, layer di dissolvenza, container, card, griglie */

/* Il body mantiene SEMPRE il gradiente di base */
body{
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  display:grid;
  place-items:center;
  padding:24px;
  min-height:100svh;
}

/* Layer immagine di sfondo con dissolvenza (sopra al gradiente) */
.bg{
  position:fixed;
  inset:0;
  z-index:0; /* sopra al body, sotto ai contenuti */
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease;
  will-change:opacity;
  background:
    linear-gradient(180deg, var(--overlay-1), var(--overlay-2)),
    url('/img/background.jpg') center/cover no-repeat;
}
.bg.bg--visible{ opacity:1; }

/* Il contenuto vive sopra al layer di background */
.wrap{
  position:relative;
  z-index:1;
  width:min(980px, 100%);
  transition: transform .24s ease; /* micro-movimento sul toggle */
}

.card{
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  background: var(--card);
  border:1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: clamp(22px, 4vw, 44px);
}

header.brand{
  display:grid;
  justify-items:center;
  gap:14px;
  text-align:center;
}
header.brand img{
  width:clamp(140px,22vw,200px);
  height:auto;
}
h1{
  font-size:clamp(28px,5vw,44px);
  font-weight:800;
}
.lead{
  margin:8px auto 0;
  max-width:70ch;
  color:var(--muted);
  font-size:clamp(15px,2.2vw,18px);
  line-height:1.7;
}

/* Cover opzionale sotto al lead */
.hero-cover{ margin:14px 0 0 }
.hero-cover img{
  width:100%;
  height:auto;
  border-radius:14px;
  display:block;
  box-shadow:var(--shadow-sm);
}

/* Intro + griglie */
.intro{ margin-top: clamp(16px,2vw,22px); color:var(--muted); font-size:16px }

.feature-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: var(--grid-gap);
  margin-top: clamp(22px,4vw,34px);
}

/* FAQ */
.faq{ margin-top: clamp(24px,4vw,40px); }
.faq-title{
  font-size: clamp(20px,3.5vw,26px);
  font-weight: 800;
  text-align: center;
  margin-bottom: 12px;
}
.faq-list{
  display: grid;
  gap: 12px;
}

/* Toggle wrapper */
.toggle-row{
  margin-top: clamp(18px,3vw,26px);
  display:flex;
  justify-content:center;
}

/* Footer */
footer{
  margin-top:24px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}