form.signup div.signup__row button {
  cursor: pointer;
}
/* Margine sopra il pulsante solo su desktop */
@media (min-width: 641px) {
  form.signup div.signup__row button {
    margin-top: 1.3rem !important;
  }
}
/* ======================================================
  0️⃣ VARIABLES & RESET
  ====================================================== */

@media (max-width: 640px) {
  .signup__row {
    flex-direction: column;
    align-items: center;
  }
  form.signup div.signup__row input[type="text"],
  form.signup div.signup__row input[type="email"] {
    font-size: 0.85rem !important;
    padding: 0.1rem 0.3rem !important;
    height: 18px !important;
    min-height: 18px !important;
    border: 1px solid #ddd !important;
    border-radius: .4rem !important;
    box-sizing: border-box !important;
    margin-bottom: 0.25rem !important;
    width: 100% !important;
    max-width: 300px !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    flex: none !important;
  }
  form.signup div.signup__row button {
    font-size: 0.95rem !important;
    padding: 0.35rem 0.6rem !important;
    height: 32px !important;
    border-radius: .4rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 300px !important;
    display: block !important;
    margin: 1.1rem auto 0 auto !important;
    flex: none !important;
  }
  .signup {
    padding: 2.2rem 0.2rem 2.5rem 0.2rem;
    max-width: 320px;
    margin: 0 auto 2.5rem auto !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* ======================================================
  1️⃣ UTILITIES
  ====================================================== */
.container{
  max-width:1140px;
  width:90%;
  margin:auto;
}
.text-center{ text-align:center; }
.mt-2{margin-top:2rem;}
.mb-2{margin-bottom:2rem;}
.flex{display:flex;}
.flex-center{align-items:center;justify-content:center;}
.grid{
  display:grid;
  gap:2rem;
}

/* ======================================================
  2️⃣ HEADER (sticky + centered container)
  ====================================================== */
.header{
  position:sticky;
  top:0;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
  box-shadow:0 2px 6px rgba(0,0,0,.07);
  z-index:10;
}
.header__inner{
  display:flex;
  justify-content:space-between;
  gap: 0;
  padding:.8rem 0;
}
.logo img{height:96px;}
.nav{
  display:flex;
  align-items:center;
}
.nav__toggle{
  background:none;
  border:none;
  font-size:2.5rem;
  cursor:pointer;
  display:none;
}
.nav__list{
  list-style:none;
  display:flex;
  gap:1.5rem;
}
.nav__list a{
  color:var(--c-primary);
  text-decoration:none;
  font-weight:600;
  transition:color .2s;
}
.nav__list a:hover{color:var(--c-accent);}
.nav__list a.active{color:var(--c-gold);}

/* ======================================================
  3️⃣ BREADCRUMB
  ====================================================== */
.breadcrumb{
  background:#fafafa;
  padding:.5rem 1rem;
  font-size:.9rem;
}
.breadcrumb ol{
  list-style:none;
  display:flex;
  gap:.4rem;
}
.breadcrumb li+li::before{
  content:"/";
  margin:0 .4rem;
  color:var(--c-gray);
}

/* ======================================================
  4️⃣ HERO (with canvas)
  ====================================================== */
.hero{
  position:relative;
  min-height:85vh;
  background:url('../img/hero-bg.webp') center/cover no-repeat;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero--simple{
  min-height:45vh;
  background:var(--c-accent);
}
.hero__canvas{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}
.hero__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:2;
}
.hero__content{
  position:relative;
  z-index:3;
  text-align:center;
  color:var(--c-white);
  max-width:720px;
  margin:auto;
}
.hero__title{
  font-family:var(--ff-title);
  font-size:3rem;
  line-height:1.2;
  margin-bottom:.5rem;
}
.hero__subtitle{
  font-size:1.2rem;
  margin-bottom:2rem;
}


/* ======================================================
  5️⃣ SIGNUP FORM
  ====================================================== */
  /* Forza padding sopra il primo campo del form signup su tutte le versioni */
.signup__row input:first-child {
  margin-top: 1.2rem !important;
}
.signup{
  background:rgba(255,255,255,.9);
  /* padding-top rimosso per lasciare priorità a quello mobile */
  padding:1rem 1rem 0.2rem 1rem;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  margin-bottom: 1.5rem;
}
.signup__row{
  padding: 0.2rem 0.2rem 0.5rem 0.2rem;
  flex-wrap:wrap;
  gap:.6rem;
}
.signup__row input{
  flex:1 1 200px;
  padding:0.45rem 0.8rem;
  border:1px solid #ddd;
  border-radius:.4rem;
  margin:0;
  background:#fff;
  color:#222;
  font-weight:400;
  transition:box-shadow .2s;
}
.signup__row button:hover{
  opacity:.95;
}
.form__privacy{
  font-size:.85rem;
  margin-top:.5rem;
  color:#555;
}

/* ======================================================
  6️⃣ SECTIONS & CARDS
  ====================================================== */
.conscientia-box {
  background: var(--c-accent);
  color: #fff;
  padding: 2.5rem 2rem;
  border-radius: 12px;
  text-align: center;
  max-width: 600px;
  margin: 2rem auto 0 auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}
.conscientia-box p {
  font-size: 1.15rem;
  margin-bottom: 1.5rem;
}
.section{
  padding:3rem 0;
  scroll-margin-top: 110px;
}
.section__title{
  font-family:var(--ff-title);
  font-size:2.2rem;
  text-align:center;
  margin-bottom:2rem;
  color:var(--c-primary);
  scroll-margin-top: 110px;
}
.section--gray{background:var(--c-bg-light);}

/* Card – used for about, posts, etc. */
.card{
  background:#fff;
  padding:1.5rem;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:transform .2s, box-shadow .2s;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.card h3{
  font-family:var(--ff-title);
  font-size:1.4rem;
  margin-bottom:.5rem;
  color:var(--c-primary);
}
.card p{font-size:.95rem;}

/* Download box – a different background color */
.download-box{
  background:var(--c-accent);
  color:#fff;
  padding:2rem;
  border-radius:8px;
  text-align:center;
}
.download-box a.btn{
  margin-top:1rem;
}

.conscientia-box {
  background: var(--c-accent);
  color: #fff;
  padding: 2.5rem 2rem;
  border-radius: 12px;
  text-align: center;
  max-width: 600px;
  margin: 2rem auto 0 auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}
.conscientia-box p {
  font-size: 1.15rem;
  margin-bottom: 1.5rem;
}
.section{
  padding:3rem 0;
}
.section__title{
  font-family:var(--ff-title);
  font-size:2.2rem;
  text-align:center;
  margin-bottom:2rem;
  color:var(--c-primary);
}
.section--gray{background:var(--c-bg-light);}

/* Card – used for about, posts, etc. */
.card{
  background:#fff;
  padding:1.5rem;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:transform .2s, box-shadow .2s;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.card h3{
  font-family:var(--ff-title);
  font-size:1.4rem;
  margin-bottom:.5rem;
  color:var(--c-primary);
}
.card p{font-size:.95rem;}

/* Download box – a different background color */
.download-box{
  background:var(--c-accent);
  color:#fff;
  padding:2rem;
  border-radius:8px;
  text-align:center;
}
.download-box a.btn{
  margin-top:1rem;
}
/* Variables */
:root{
  --c-primary   : #0A2742;   /* deep blue – titles, links */
  --c-accent    : #00B3A1;   /* turquoise – accent, canvas particles */
  --c-emerald   : #A1C349;   /* lime green – icons */
  --c-gold      : #CCA43B;   /* matte gold – main CTA */
  --c-bg-light  : #f9f9f9;   /* very light gray – alternate sections */
  --c-bg-dark   : #14171A;   /* very dark – fallback */
  --c-white     : #fff;
  --c-gray      : #555;

  --ff-title    : 'Merriweather', serif;
  --ff-body     : 'Inter', sans-serif;
}

/* Reset */
*,
*::before,
*::after{
.signup {
  background:rgba(255,255,255,.9);
  padding:1rem 1.5rem;
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html{
  font-size:100%;
  scroll-behavior:smooth;
}
body{
  font-family:var(--ff-body);
  line-height:1.6;
  color:var(--c-primary);
  background:var(--c-white);
}

/* ======================================================
  7️⃣ FAQ ACCORDION (native <details>)
  ====================================================== */
.accordion details{
  border:1px solid #e0e0e0;
  border-radius:6px;
  padding:.8rem 1rem;
  margin-bottom:.5rem;
  background:#fff;
}
.accordion summary{
  font-weight:600;
  cursor:pointer;
  outline:none;
}
.accordion summary::marker{
  color:var(--c-accent);
}
.accordion p{
  margin-top:.5rem;
}

/* ======================================================
  8️⃣ ICON LIST (values)
  ====================================================== */
.icons{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  gap:2rem;
}
.icons li{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:120px;
}
.icons img{
  height:48px;
  margin-bottom:.5rem;
}
.icons span{
  font-weight:600;
}

/* ======================================================
  9️⃣ FOOTER (3-column layout)
  ====================================================== */
.footer{
  background:#222;
  color:#ccc;
  font-size:.9rem;
  padding:2rem 0;
}
/* Footer main layout */
.footer__inner{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  justify-content:space-between;
}

.footer__col{
  flex:1 1 200px;
}
.footer__col ul{
  list-style:none;
}
.social{
  display:flex;
  flex-direction:column;
  gap:.25rem;
}

/* ======================================================
  10️⃣ BUTTONS (primary / secondary)
  ====================================================== */
.btn{
  display:inline-block;
  text-decoration:none;
  font-weight:600;
  border-radius:.4rem;
  transition:transform .2s, background .2s;
}
.btn--primary{
  background:var(--c-gold);
  color:#fff;
  padding:.7rem 1.4rem;
}
.btn--primary:hover{transform:scale(1.03);}
.btn--secondary{
  background:var(--c-accent);
  color:#fff;
  padding:.6rem 1.2rem;
}
.btn--secondary:hover{background:#009080;}

/* ======================================================
  11️⃣ RESPONSIVE BREAKPOINTS
  ====================================================== */
@media (max-width:960px){
  .nav__list{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    flex-direction:column;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
    padding:1rem;
  }
  .nav__list.active{
    display:flex;
  }
  .nav__toggle{display:block;}
  .header__inner{padding:.5rem 0;}
  .footer__inner{
    flex-direction:column;
    gap:0.3rem;
  }
}
@media (max-width:640px){
  .footer__col h4,
  .footer__col ul,
  .footer__col p,
  .footer__col li {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .footer__col {
    margin-bottom: 0 !important;
    text-align: center;
  }
  .footer__inner {
    flex-direction: column;
    text-align: center;
    gap: 0.08rem !important;
    padding: 0 !important;
  }
  .footer {
    padding: 0.3rem 0 0 !important;
    margin-top: 0 !important;
  }
  .hero__title{font-size:2.5rem;}
  .hero__subtitle{font-size:1rem;}
  .signup__row{flex-direction:column;}
  .grid--2, .grid--3{
    grid-template-columns:1fr;
  }
}

/* Alternanza cards articoli blog */
.card--green {
  background: #00B3A1;
  color: #fff;
}
.card--green .meta,
.card--green a,
.card--green p {
  color: #fff;
}
.card--white {
  background: #fff;
  color: #0A2742;
}
.card--white .meta,
.card--white a,
.card--white p {
  color: #0A2742;
}
/* Fine alternanza cards */

@media (max-width: 700px) {
  .icons {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
  .icons li {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 340px;
  }
}
/* Riduci la dimensione del font delle descrizioni delle icone valori */
.icon-desc {
  font-size: 0.7rem;
  line-height: 1.5;
  margin-top: 0.5em;
}