/* === Variabili colori TAVLÒ === */
:root {
  --crema:   #faebd7; /* sfondo principale */
  --arancio: #ff7f32; /* accenti e bottoni */
  --giallo:  #ffd54f; /* focus (accessibilità) */
  --nero:    #000000; /* testo */
}

/* === Base / Tipografia === */
body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--nero);
  line-height: 1.6;
  padding: 2rem;

  /* sfondo con crema e velo caldo */
  background: var(--crema);
}

/* Titoli e paragrafi (spaziature) */
h1, h2, h3 {
  margin: 2rem 0 1rem;
  font-weight: bold;
  color: var(--nero);
}
p { margin: 1rem 0; }

/* Link: reset generale (evita blu/viola) */
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Microtrusts (le 3 frasi brevi) */
.microtrust {
  font-weight: bold;
  color: var(--nero);
  margin-bottom: 0.5rem;
}

/* === Call To Action (bottoni) === */
.cta-primary {
  display: inline-block;
  background-color: var(--arancio);
  color: white;
  padding: 0.8rem 1.5rem;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.cta-primary:hover { background-color: #e66400; } /* arancio più scuro */

.cta-secondary {
  display: inline-block;
  background-color: transparent;
  color: var(--arancio);
  border: 2px solid var(--arancio);
  padding: 0.6rem 1.2rem;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.cta-secondary:hover {
  background-color: #e66400;
  color: white;
}
/* Blocco che gestisce le due CTA (lista d’attesa + newsletter) */
.cta-block {
    display: flex;
    flex-direction: row;        /* bottoni affiancati */
    justify-content: center;/* allineati al testo sopra */
    align-items: center;
    gap: 16px;                  /* distanza orizzontale tra i bottoni */
    margin-top: 0.5rem;         /* poco spazio sopra (circa 8px) */
    margin-bottom: 2rem;        /* respiro verso il basso */
    transform: translateX( -30px);
}
/* Slogan sotto "Veloce. Trasparente. Smart." più vicino alle CTA */
#impatto .slogan {
    margin-bottom: 0.25rem;   /* margine molto più piccolo solo qui */
}
/* Contenitore centrale + spazio tra sezioni */
.container { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }
section   { padding: 2.5rem 0; }

/* Footer essenziale */
footer {
  text-align: center;
  margin-top: 2rem;
  padding: 1.5rem;
  border-top: 1px solid #ddd;
}
footer a {
  margin: 0 0.5rem;
  color: var(--nero);
  text-decoration: none;
  font-size: 1.5rem;
}
footer a:hover { color: var(--arancio); }

/* Accessibilità: outline visibile su tastiera */
.cta-primary:focus, .cta-secondary:focus, a:focus {
  outline: 3px solid var(--giallo);
  outline-offset: 2px;
}
header{
  display:flex;
  align-items:center;
  padding:16px 24px;
}

header .brand{ display:inline-flex; align-items: center; }

/* Logo TAVLÒ a sinistra, dimensione forte su desktop */
header .brand img{
  height: 120px;  
  width: auto;
  display: block;
  margin-left: -12px;
  transform: translateY(50px);
  margin-top: -20px
}

/* Tablet e small laptop */
@media (max-width: 768px){
  header .brand img{ height: 80px; }
}
/* Mobile */
@media (max-width: 480px){
  header .brand img{ height: 64px; }
}
@media (max-width: 1024px){

  .hero {
    grid-template-columns: 1fr;
  }

  .hero .hero-text {
    align-items: center;
    text-align: center;
  }

  .hero .cta-group{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0 auto;
    transform: none;
  }
  .hero ul{
  padding-left: 0;
  margin: 16px auto 0;
  list-style-position: inside;
  display: inline-block;
  text-align: left;
}

}
/* Allineamento orizzontale unico per header e sezioni */
header, section{
  max-width: 1120px;     /* larghezza contenuto */
  margin: 0 auto;        /* CENTRA tutto nella pagina */
  padding-left: 24px;    /* “gutter” a sinistra */
  padding-right: 24px;   /* “gutter” a destra */
}
header, section {
  max-width: 1100px;
  /* margin: 0 auto; */  /* centratura disattivata */
  padding-left: 24px;   /* spazio a sinistra */
  padding-right: 24px;  /* spazio a destra */
}
.hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr; /* colonna testo più larga */
  gap: 64px;                            /* più aria tra testo e illustrazione */
  align-items: start;
  margin-top: 40px;                     /* stacco dal logo */
  padding-top: 2.5rem;                  /* respiro sopra */
  padding-bottom: 2.5rem;               /* respiro sotto */
}
.hero-illustration {
  justify-self: end;           /* la spinge verso destra */
  width: min(520px, 90%);      /* grande ma non esagerata */
}

.hero h1 {
  font-size: 3rem;     /* grande e leggibile */
  line-height: 1.2;
  max-width: none;     /* non lo stringe più */
  margin-bottom: 16px;
}
/* Microtrusts dell'hero: più leggibili */
.hero .microtrust {
  font-weight: 900;     /* un po' più grassetto */
  font-size: 1.15rem;   /* leggermente più grande */
  line-height: 1.5;    /* più aria tra le righe */
  margin-bottom: 8px;   /* spazio tra le frasi */
  -webkit-text-stroke: 0.3px currentColor;
text-shadow:
  0.02em 0 currentColor,
 -0.02em 0 currentColor,
  0 0.02em currentColor,
  0 -0.02em currentColor;
letter-spacing: -0.005em;

}
/* CTA: più distacco dai microtrust + più spazio tra i bottoni */
.hero .cta-group{
  margin-top: 28px;     /* distacco dai microtrust (alzalo a 24/28 se vuoi più aria) */
  display: flex;
  gap: 20px;            /* spazio orizzontale tra i due bottoni */
  flex-wrap: wrap;      /* se manca spazio, vanno a capo bene */
  align-items: center;
}
/* Mobile: bottoni uno sotto l'altro, con spazi comodi */
@media (max-width: 768px){
  .hero > div:first-child{
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }
}
/* MOBILE: sistema CTA senza toccare desktop */
@media (max-width: 480px){
  .cta-block{
    transform: none;
    justify-content: flex-start;
    gap: 14px;
  }

  .cta-block a{
    padding: 12px 16px;
    min-height: 44px;
    width: auto;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}
.social-links{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 64px;
}

.social-btn{
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.social-btn i{
  font-size: 26px;
  color: #2b2b2b;
  transition: color .15s ease;
}

.social-btn:hover i{
  color: #ff7a00;
}

/* --- COMMUNITY SECTION --- */
#community{
  padding-top: 96px;     /* alza tutto il blocco */
  padding-bottom: 60px; /* più respiro sotto */
}
.social-links{
  margin-top: 48px;
}

/* --- COMMUNITY TEXT SPACING --- */
#community h2{
  margin-bottom: 20px;   /* spazio tra titolo e sottotitolo */
}

#community p{
  margin-bottom: 56px;   /* spazio tra testo e icone */
}

/* Alza la sezione Community (riduce il vuoto sopra) */
#community{
  padding-top: 0 !important;
  margin-top: -140px !important; /* prova così */
}
/* Più aria tra testo e icone */
#community p{
  margin-bottom: 48px !important;
}
/* Più aria tra testo e icone */
#community p{
  margin-bottom: 48px !important;
}

#community .social-links{
  margin-top: 48px !important;
}
#community .social-links {
  transform: translateY(20px);
}
#community .social-links a,
#community .social-links a:hover,
#community .social-links a:focus,
#community .social-links a:active,
#community .social-links a:visited {
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

#community .social-links a:focus {
  outline: none;
}

/* --- FOLLOW TITLE (Community) --- */
#community .follow-title{
  display: block;
  text-align: center;
  margin-top: 0;
  margin-bottom: 18px;
  transform: translateY(36px);
}
#community .footer-note{
  margin-top: 40px;
  text-align: center;
  font-size: 13px;
  opacity: 0.85;
}