:root{
  --notte:#111914;
  --notte-2:#0b120e;
  --verde:#1c2b23;
  --verde-2:#26382e;
  --verde-3:#34483b;
  --oro:#c9a961;
  --oro-vivo:#efd08c;
  --crema:#f1eee5;
  --muted:#99a69c;
  --linea:#3b4a40;
  --max:1180px;
  --shadow:0 30px 80px rgba(0,0,0,.30);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--notte);
  color:var(--crema);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--oro-vivo)}
img{max-width:100%}
.site-header{
  position:sticky; top:0; z-index:20;
  min-height:76px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:10px max(22px,calc((100vw - var(--max))/2));
  background:rgba(12,18,14,.91);
  border-bottom:1px solid rgba(201,169,97,.14);
  backdrop-filter:blur(16px);
}
.brand-lockup{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--crema);
}
.brand-lockup img{width:46px;height:auto}
.brand-lockup span{display:flex;flex-direction:column;line-height:1.05}
.brand-lockup strong{color:var(--oro);letter-spacing:.16em;font-size:.9rem}
.brand-lockup small{font-size:.58rem;letter-spacing:.12em;color:#c8c9bf;margin-top:5px}
.site-nav{display:flex;align-items:center;gap:28px}
.site-nav a{
  color:#d7dbd5;text-decoration:none;font-size:.88rem;font-weight:650;
}
.site-nav a:hover{color:var(--oro-vivo)}
.site-nav .nav-cta{
  border:1px solid rgba(201,169,97,.55);
  border-radius:999px;padding:8px 15px;color:var(--oro-vivo)
}
.landing{overflow:hidden}
.hero-full{
  min-height:720px;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  align-items:center;
  padding:80px max(22px,calc((100vw - var(--max))/2));
  isolation:isolate;
}
.hero-bg,.hero-shade{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3
}
.hero-shade{
  z-index:-2;
  background:
    linear-gradient(90deg,rgba(9,15,11,.96) 0%,rgba(9,15,11,.74) 45%,rgba(9,15,11,.20) 78%,rgba(9,15,11,.22) 100%),
    linear-gradient(0deg,var(--notte) 0%,transparent 26%);
}
.hero-content{max-width:680px}
.eyebrow,.section-kicker{
  color:var(--oro-vivo);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.hero-content h1{
  margin:9px 0 24px;
  font-size:clamp(4rem,8vw,7.3rem);
  line-height:.86;
  letter-spacing:-.055em;
  color:#f3f0e7;
  text-transform:uppercase;
}
.hero-content h1 span{color:var(--oro)}
.hero-copy{
  max-width:630px;
  color:#d4dad3;
  font-size:1.16rem;
  line-height:1.7;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 21px;border-radius:999px;
  text-decoration:none;font-size:.9rem;font-weight:800;
  letter-spacing:.02em;
}
.button.primary{background:var(--oro);color:#151d17}
.button.primary:hover{background:var(--oro-vivo)}
.button.ghost{border:1px solid rgba(239,208,140,.52);color:var(--oro-vivo);background:rgba(13,21,16,.25)}
.button.light{background:#f1eee5;color:#1b251e}
.hero-note{color:#8f9b92;font-size:.83rem;margin-top:18px}
.hero-symbol{
  align-self:center;justify-self:end;width:min(430px,38vw);
  filter:drop-shadow(0 30px 55px rgba(0,0,0,.38));
  opacity:.96
}
.hero-symbol img{width:100%;height:auto}
.section{
  max-width:var(--max);
  margin:0 auto;
  padding:105px 22px;
}
.two-col{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px}
.intro-section h2,.section h2,.cta-band h2{
  margin:7px 0 22px;
  font-size:clamp(2.35rem,4.6vw,4.5rem);
  line-height:1.02;
  letter-spacing:-.045em;
  color:#f0eee6;
}
.lead{font-size:1.2rem;color:#d7ddd7;line-height:1.68;margin-top:5px}
.muted{color:var(--muted)}
.max-copy{max-width:500px}
.feature-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:58px
}
.feature-card{
  min-height:270px;
  padding:27px 24px;
  border:1px solid var(--linea);
  border-radius:18px;
  background:linear-gradient(145deg,#1c2b23,#152119);
}
/* Il cerchio serviva a dare una forma a un glifo che non ce l'aveva. Le icone
   nuove una forma ce l'hanno — anelli, rotta, segnaposto — e il cerchio le
   soffocava, oltre a fare rumore quattro volte di fila. */
.feature-icon{
  width:44px;height:44px;
  display:grid;place-items:center;
  color:var(--oro-vivo);
  margin-bottom:24px;
}
.feature-card h3{font-size:1.13rem;color:var(--oro-vivo);margin:0 0 12px}
.feature-card p{color:#a9b4ac;font-size:.93rem;margin:0}
.manifesto{
  position:relative;
  max-width:1320px;
  margin:20px auto;
  min-height:590px;
  padding:80px clamp(30px,7vw,95px);
  border:1px solid rgba(201,169,97,.25);
  border-radius:28px;
  display:grid;grid-template-columns:1.05fr .95fr;
  overflow:hidden;
  background:
    radial-gradient(circle at 84% 40%,rgba(201,169,97,.18),transparent 28%),
    linear-gradient(135deg,#1b2a22 0%,#0d1510 76%);
}
.manifesto:before{
  content:"";position:absolute;inset:0;opacity:.2;
  background-image:linear-gradient(rgba(201,169,97,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(201,169,97,.11) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(90deg,transparent,black);
}
.manifesto-copy{position:relative;z-index:2;max-width:600px}
.manifesto-copy h2{
  font-size:clamp(3rem,6vw,6rem);line-height:.91;letter-spacing:-.045em;
  margin:9px 0 28px;color:#f3f0e7;text-transform:uppercase
}
.manifesto-copy h2 span{color:var(--oro)}
.manifesto-copy p{color:#b7c0b9;font-size:1.03rem;max-width:520px}
.manifesto-line{
  display:flex;flex-direction:column;
  margin-top:36px;padding-left:18px;border-left:3px solid var(--oro)
}
.manifesto-line strong{color:var(--oro-vivo);font-size:1.04rem}
.manifesto-line span{color:#8e9b92}
.manifesto-visual{position:relative;min-height:420px}
.manifesto-visual img{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:88%;z-index:3;filter:drop-shadow(0 24px 45px rgba(0,0,0,.4))
}
.radar{
  position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  border:1px solid rgba(201,169,97,.23);border-radius:50%
}
.r1{width:360px;height:360px}.r2{width:280px;height:280px}.r3{width:190px;height:190px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:45px}
.phones{
  display:grid;grid-template-columns:repeat(3,1fr);gap:25px;
  align-items:end;
}
.phone-card{
  margin:0;padding:22px 14px 18px;
  border:1px solid var(--linea);border-radius:26px;
  background:linear-gradient(180deg,#1b2a22,#121d17);
  text-align:center;
}
.phone-card.featured{
  transform:translateY(-22px);
  border-color:rgba(201,169,97,.53);
  box-shadow:var(--shadow)
}
.phone-card img{width:min(100%,330px);filter:drop-shadow(0 24px 34px rgba(0,0,0,.34))}
.phone-card figcaption{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.phone-card figcaption strong{color:var(--oro-vivo);font-size:1.04rem}
.phone-card figcaption span{color:#8f9c92;font-size:.84rem}
.preview-note{text-align:center;color:#708076;font-size:.78rem;margin-top:20px}
.privacy-showcase{
  display:grid;grid-template-columns:1fr .9fr;gap:75px;align-items:center
}
.privacy-copy .text-link{text-decoration:none;font-weight:800}
.privacy-card{
  position:relative;
  padding:28px;border:1px solid var(--linea);border-radius:24px;
  background:linear-gradient(160deg,#203229,#121c17);
  display:grid;gap:14px;
}
.privacy-card>img{
  position:absolute;width:190px;right:-38px;top:-64px;opacity:.13
}
.privacy-card>div{
  display:flex;flex-direction:column;gap:3px;
  padding:17px 18px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(8,14,10,.23)
}
.privacy-card strong{color:var(--oro-vivo)}
.privacy-card span{color:#a7b1a9;font-size:.9rem}
.social-language{
  display:grid;grid-template-columns:1fr 1fr;gap:22px
}
.social-poster{
  min-height:470px;position:relative;overflow:hidden;border-radius:26px;
  padding:42px;border:1px solid rgba(201,169,97,.25);
  box-shadow:0 20px 70px rgba(0,0,0,.22)
}
.poster-a{
  background:
    linear-gradient(140deg,rgba(8,14,10,.3),rgba(8,14,10,.9)),
    url('/assets/hero-passo.svg') center/cover;
}
.poster-b{background:linear-gradient(145deg,#1f3027,#0e1712)}
.poster-brand{color:var(--oro);font-size:.78rem;font-weight:800;letter-spacing:.18em}
.social-poster h3{
  font-size:clamp(2.4rem,5vw,4.7rem);line-height:.9;
  margin:65px 0 19px;color:#f0eee7;letter-spacing:-.045em
}
.social-poster h3 span{color:var(--oro)}
.social-poster p{color:#cbd1cb;max-width:360px}
.poster-b img{position:absolute;width:48%;right:24px;bottom:25px;opacity:.85}
.poster-route{
  width:170px;height:3px;background:var(--oro);margin-top:38px;position:relative
}
.poster-route:after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:12px;height:12px;border:3px solid var(--oro);border-radius:50%;background:#19251e}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
details{
  border:1px solid var(--linea);border-radius:15px;padding:18px 20px;background:#17231c
}
summary{cursor:pointer;font-weight:750;color:#ece9e1}
details p{color:#9eaaa1;margin-bottom:2px;font-size:.93rem}
.cta-band{
  max-width:var(--max);margin:35px auto 105px;
  padding:48px 50px;border-radius:26px;
  display:flex;justify-content:space-between;align-items:center;gap:30px;
  background:var(--oro);color:#172019
}
.cta-band .eyebrow{color:#314135}
.cta-band h2{color:#152019;font-size:clamp(2rem,4vw,3.5rem);margin-bottom:12px}
.cta-band p{margin:0;max-width:650px;color:#324139}
/* I due pulsanti store dentro la fascia dorata: la riga è già centrata in
   verticale, quindi il margine superiore di .hero-actions la sfalserebbe. */
.cta-band .hero-actions{margin-top:0;flex-shrink:0}
.site-footer{
  max-width:var(--max);margin:0 auto;padding:35px 22px 50px;
  border-top:1px solid var(--linea);
  display:grid;grid-template-columns:1fr auto;gap:20px;
  color:#849188;font-size:.84rem
}
.footer-brand{display:flex;flex-direction:column}
.footer-brand strong{color:var(--oro);letter-spacing:.15em}
.footer-links{display:flex;gap:18px}
.footer-links a{color:#b3bcb5;text-decoration:none}
.footer-company{grid-column:1/-1;margin:0;color:#65736a}

/* Legal and utility pages from the original package */
main:not(.landing){
  max-width:820px;margin:0 auto;padding:38px 20px 64px;font-size:17px
}
.marchio,.brand{
  color:var(--oro);font-size:.8rem;font-weight:800;letter-spacing:.18em;margin:0 0 28px
}
main:not(.landing) h1{color:var(--oro);font-size:1.8rem;line-height:1.25;margin:0 0 20px}
main:not(.landing) h2{color:var(--oro);font-size:1.18rem;margin:40px 0 12px}
.riquadro{
  background:var(--verde-2);border:1px solid var(--linea);border-radius:12px;padding:17px 20px;margin:22px 0
}
.spento{color:var(--muted)}
.piede{
  color:var(--muted);font-size:.85rem;border-top:1px solid var(--linea);margin-top:48px;padding-top:24px
}
.dadefinire{background:var(--oro-vivo);color:var(--notte);font-weight:700;padding:0 .3em;border-radius:.2em}
table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem}
th,td{text-align:left;vertical-align:top;padding:.6rem .5rem;border-bottom:1px solid var(--linea)}
th{color:var(--muted);font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.tabella{overflow-x:auto}

@media(max-width:900px){
  .site-nav a:not(.nav-cta){display:none}
  .hero-full{grid-template-columns:1fr;min-height:690px}
  .hero-symbol{position:absolute;right:-70px;bottom:20px;width:340px;opacity:.27}
  .hero-content{position:relative;z-index:3}
  .two-col,.privacy-showcase{grid-template-columns:1fr;gap:22px}
  .feature-grid{grid-template-columns:1fr 1fr}
  .manifesto{grid-template-columns:1fr;min-height:auto}
  .manifesto-visual{min-height:320px}
  .manifesto-visual img{width:min(430px,85%);right:50%;transform:translate(50%,-50%)}
  .phones{grid-template-columns:1fr 1fr}
  .phone-card:last-child{grid-column:1/-1;width:50%;justify-self:center}
  .phone-card.featured{transform:none}
  .section-heading{align-items:start;flex-direction:column}
  .social-language{grid-template-columns:1fr}
  .cta-band{margin-left:22px;margin-right:22px;flex-direction:column;align-items:flex-start}
}
@media(max-width:620px){
  .site-header{min-height:68px}
  .brand-lockup img{width:39px}
  .brand-lockup small{display:none}
  .site-nav{gap:0}
  .hero-full{padding-top:60px;min-height:690px}
  .hero-content h1{font-size:clamp(3.3rem,17vw,5.2rem)}
  .hero-copy{font-size:1rem}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .section{padding:76px 18px}
  .feature-grid{grid-template-columns:1fr}
  .feature-card{min-height:auto}
  .manifesto{margin-left:12px;margin-right:12px;padding:55px 24px}
  .manifesto-copy h2{font-size:3.4rem}
  .manifesto-visual{min-height:260px}
  .phones{grid-template-columns:1fr}
  .phone-card:last-child{grid-column:auto;width:auto}
  .phone-card{max-width:420px;justify-self:center}
  .privacy-card>img{right:-30px;top:-30px}
  .social-poster{padding:30px;min-height:400px}
  .social-poster h3{margin-top:55px}
  .faq-grid{grid-template-columns:1fr}
  .cta-band{padding:34px 26px}
  .site-footer{grid-template-columns:1fr}
  .footer-links{flex-wrap:wrap}
}

/* v2 — tema più chiaro e visual editoriali Migratorya */
:root{
  --bg:#17251d;
  --surface:#203128;
  --surface-2:#2b4034;
  --surface-soft:#334b3d;
  --text:#f7f3e8;
  --muted:#bdc8bf;
  --gold:#d9ad59;
  --gold-2:#efcc83;
  --line:rgba(239,204,131,.23);
}
body{background:linear-gradient(180deg,#1b2a21 0%,#142119 100%);color:var(--text)}
.site-header{background:rgba(27,42,33,.94);border-bottom-color:rgba(239,204,131,.16)}
.hero-shade{background:linear-gradient(90deg,rgba(16,29,22,.84) 0%,rgba(16,29,22,.58) 48%,rgba(16,29,22,.20) 100%)}
.section,.intro-section{background:transparent}
.feature-card,.privacy-card,.faq details,.editorial-copy-card{background:rgba(47,70,57,.72);border-color:rgba(239,204,131,.18);box-shadow:0 18px 45px rgba(0,0,0,.14)}
.manifesto{background:linear-gradient(135deg,#2a4033,#1b2d23)}
.privacy-showcase{background:linear-gradient(135deg,rgba(53,78,63,.60),rgba(34,53,42,.72));border:1px solid rgba(239,204,131,.14);border-radius:28px}
.social-poster{filter:brightness(1.08)}

.editorial-showcase{padding-top:92px;padding-bottom:92px}
.editorial-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;margin-top:34px;align-items:stretch}
.editorial-side{display:grid;grid-template-rows:auto 1fr;gap:24px}
.editorial-card{margin:0;overflow:hidden;border-radius:26px;border:1px solid rgba(239,204,131,.22);background:#22362a;box-shadow:0 24px 65px rgba(0,0,0,.22)}
.editorial-card img{display:block;width:100%;height:100%;object-fit:cover}
/* ⚠️ NIENTE `aspect-ratio` QUI, ed è la correzione dell'8 settembre 2026.
   La griglia ha `align-items:stretch`: impone prima l'altezza della riga, poi
   il rapporto 1:1 ricavava la larghezza da quell'altezza — 625 px contro i 583
   della colonna. L'immagine sforava di 42 px e ne copriva 18 di quella accanto,
   ed e il difetto che si vedeva sul sito vivo.
   Senza il rapporto l'altezza la detta la riga e la larghezza resta quella
   della colonna; a riempire ci pensa `object-fit:cover` sull'immagine.
   Nel monocolonna del telefono il rapporto torna utile e resta, piu sotto:
   li nessuno impone l'altezza, quindi comanda la larghezza. */
.editorial-main{min-height:420px}
.editorial-wide{aspect-ratio:2.35/1}
.editorial-copy-card{border-radius:26px;padding:34px;display:flex;flex-direction:column;justify-content:center}
.editorial-copy-card h3{font-size:clamp(28px,3vw,44px);margin:8px 0 14px;color:var(--gold-2)}
.editorial-copy-card p:last-child{font-size:18px;line-height:1.65;color:var(--muted);margin:0}

@media(max-width:800px){
  .editorial-grid{grid-template-columns:1fr}
  .editorial-main{aspect-ratio:1/1}
  .editorial-wide{aspect-ratio:2/1}
  .editorial-showcase{padding-top:64px;padding-bottom:64px}
}

/* ==========================================================================
   LA COLLABORAZIONE COL CLUB ITALIANO DEL COLOMBACCIO — 8 settembre 2026
   Aggiunta dopo l'incontro in cui il Club ha chiesto più visibilità. Compare
   in tre punti, con tre pesi diversi: una firma nell'eroe, una sezione sua
   dopo «cos'è l'app», una riga nel piede.
   Marchio di terzi, usato con la loro autorizzazione scritta.
   ========================================================================== */

/* La firma nell'eroe: piccola, accanto alla nota sulla disponibilità. */
.hero-collab{
  display:flex; align-items:center; gap:12px;
  margin-top:22px;
  color:var(--muted); font-size:.92rem;
}
.hero-collab img{
  /* Lo stemma è una scansione con fondo chiaro: su questo verde profondo
     stacca troppo. Un filo di trasparenza lo fa sedere nella pagina senza
     alterarne i colori, che su un marchio altrui non si toccano. */
  opacity:.92;
  flex:0 0 auto;
}
.hero-collab strong{color:var(--crema); font-weight:600}

/* La sezione: stemma a sinistra, racconto a destra. */
.collab{
  display:grid; grid-template-columns:260px 1fr; gap:clamp(28px,5vw,64px);
  align-items:center;
  border:1px solid rgba(201,169,97,.22);
  border-radius:24px;
  background:linear-gradient(135deg,rgba(28,43,35,.9),rgba(13,21,16,.9));
}
.collab-marchio{display:flex; justify-content:center}
.collab-marchio img{
  width:100%; max-width:240px; height:auto;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.45));
}
.collab-copy h2{
  font-size:clamp(1.7rem,3.4vw,2.6rem);
  line-height:1.1; letter-spacing:-.02em;
  margin:6px 0 18px; color:#f3f0e7;
}
.collab-copy p{color:#b7c0b9; max-width:56ch}
.collab-copy p + p{margin-top:14px}
/* La chiusa: una riga sola, tono da firma. Non e un paragrafo come gli altri
   e non deve leggersi come tale. */
.collab-chiusa{
  margin-top:26px;
  font-size:1.12rem; line-height:1.45;
  color:var(--oro-vivo);
  font-weight:600;
  letter-spacing:.005em;
}
.collab-link{margin-top:22px}
.collab-link a{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--oro-vivo); text-decoration:none;
  font-weight:600; letter-spacing:.02em;
  border-bottom:1px solid rgba(239,208,140,.35);
  padding-bottom:2px;
}
.collab-link a:hover{border-bottom-color:var(--oro-vivo)}
.collab-copy strong{color:var(--oro-vivo); font-weight:600}

/* Una riga nel piede, dove si guarda per capire chi c'è dietro. */
.footer-collab{
  display:flex; align-items:center; gap:11px;
  color:var(--muted); font-size:.88rem;
}
.footer-collab img{opacity:.92; flex:0 0 auto}
.footer-collab strong{color:var(--crema); font-weight:600}

/* Sotto i 760 px lo stemma va sopra il testo: affiancati diventerebbero due
   colonne strette in cui non si legge né l'uno né l'altro. */
@media (max-width:760px){
  .collab{grid-template-columns:1fr; text-align:center}
  .collab-copy p{margin-left:auto; margin-right:auto}
  .hero-collab{justify-content:flex-start}
}

/* ==========================================================================
   ICONE DELLE SCHEDE E PULSANTI DEGLI STORE — 8 settembre 2026
   ========================================================================== */

/* Le quattro icone erano glifi tipografici (◎ ⌖ ↗ ▤): a 1,5 rem si vedevano
   i difetti del carattere, non un'icona. Ora sono tracciati disegnati, con lo
   stesso spessore e le stesse terminazioni tonde — un insieme, non quattro
   simboli presi dove capitava. */
/* Piu grandi e senza cerchio intorno: il cerchio serviva a dare una forma a un
   glifo che non ce l'aveva. Queste una forma ce l'hanno, e il cerchio le
   soffocava. */
.feature-icon svg{width:34px;height:34px;display:block}

/* I due pulsanti degli store, nella forma che tutti riconoscono: il marchio a
   sinistra, «Scarica su» piccolo sopra il nome del negozio.
   ⚠️ NON SONO I DISTINTIVI UFFICIALI di Apple e Google, che sono immagini
   fornite da loro con regole d'uso proprie. Qui il marchio è quello vero — il
   tracciato della mela, il triangolo di Play nei suoi quattro colori — dentro
   un pulsante nostro. Se un giorno servissero i distintivi ufficiali si
   scaricano dai rispettivi kit e si sostituiscono queste due `<a>`. */
.button.store{
  gap:11px;
  padding:10px 20px 10px 17px;
  background:var(--oro); color:#151d17;
  text-align:left;
}
.button.store:hover{background:var(--oro-vivo)}
.button.store.chiaro{background:#f1eee5; color:#1b251e}
.button.store .store-logo{width:23px;height:23px;flex:0 0 auto}
.button.store span{display:flex;flex-direction:column;line-height:1.12}
.button.store small{
  font-size:.66rem; font-weight:600; letter-spacing:.04em;
  opacity:.78; text-transform:none;
}
.button.store strong{font-size:1rem; font-weight:800; letter-spacing:.01em}