/* Boosted v4 · bozza E — apertura nel marchio, solo colori del brand, lavori veri. Mobile first. */

@font-face {
  font-family: 'Montserrat';
  src: url('/_comune/fonts/montserrat-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/_comune/fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('/_comune/fonts/inter-var-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --nero: #08090A;
  --nero-2: #0F1011;
  --nero-3: #16181B;
  --riga: #1F2126;
  --riga-2: #2A2D33;
  --testo: #F7F8F8;
  --sec: #A3A9B3;
  --lilla: #C9A9E9;
  --lilla-chiaro: #DFC9F0;
  --viola: #8B6FB8;
  --testa: 72px;
  --g: 20px;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --curva-esce: cubic-bezier(0.5, 0, 0.75, 0);
  /* the logo gradient, with a little light in it */
  --cromo: linear-gradient(100deg, #B994E3 0%, #F4EAFF 18%, #C9A9E9 34%, #8B6FB8 52%, #DFC9F0 70%, #FFFFFF 80%, #C9A9E9 100%);
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --g: 40px; } }
@media (min-width: 1200px) { :root { --g: 72px; --testa: 84px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--testa) + 16px); background: var(--nero); overflow-x: clip; }
body {
  margin: 0; min-height: 100svh; background: transparent; color: var(--testo);
  font: 400 16.5px/1.6 'Montserrat', 'Inter', system-ui, -apple-system, sans-serif;
  
  -webkit-font-smoothing: antialiased; overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--lilla); color: var(--nero); }
:focus-visible { outline: 2px solid var(--lilla); outline-offset: 3px; border-radius: 8px; }
a { color: inherit; }
img, svg, canvas { display: block; }
h1, h2, h3, p { margin: 0; }
em { font-style: normal; color: var(--lilla); }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms var(--curva-esce) both vt-esce; }
::view-transition-new(root) { animation: 360ms var(--curva) both vt-entra; }
@keyframes vt-esce { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; } }

.salta-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--lilla); color: var(--nero); padding: 12px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.salta-link:focus { top: 12px; }

/* ── Testo cromato: la sfumatura del marchio, con una luce lenta ── */
.cromo {
  background: var(--cromo); background-size: 240% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-bottom: 0.06em;
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.fermo) .cromo { animation: luce 7s ease-in-out infinite alternate; }
}
@keyframes luce { to { background-position: 100% 50%; } }

/* ── Cielo ───────────────────────────────────── */
.cielo { position: fixed; inset: 0; width: 100%; height: 100%; height: 100lvh; pointer-events: none; z-index: -1; }

/* ── Apertura ────────────────────────────────── */
.apertura { display: none; }
html.intro .apertura {
  display: block; position: fixed; inset: 0; z-index: 60; background: var(--nero);
  cursor: pointer; touch-action: none;
}
html.intro body { overflow: hidden; }
.apertura__tela { position: absolute; inset: 0; width: 100%; height: 100%; }
.apertura__firma {
  position: absolute; left: 0; right: 0; bottom: calc(15svh + env(safe-area-inset-bottom));
  display: grid; justify-items: center; gap: 14px;
  opacity: 0; transform: translateY(10px); transition: opacity 600ms var(--curva), transform 800ms var(--curva);
  pointer-events: none;
}
.apertura.firma .apertura__firma { opacity: 1; transform: none; }
.apertura.via .apertura__firma { opacity: 0; transform: translateY(-6px); transition-duration: 220ms; }
.apertura__scritta { width: min(46vw, 210px); height: auto; }
.apertura__motto { font-size: clamp(18px, 4.8vw, 26px); font-weight: 650; letter-spacing: -0.02em; }

/* ── Bottone: la sfumatura del marchio, la freccia in un cerchio ── */
.bottone {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 60px; padding: 0 8px 0 26px; border-radius: 999px;
  background: linear-gradient(100deg, #EFE4FA 0%, #C9A9E9 45%, #A98BD6 100%); background-size: 180% 100%; background-position: 0% 50%;
  color: var(--nero); font-size: 17px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; text-align: left; text-decoration: none;
  transition: transform 140ms ease-out, background-position 500ms var(--curva);
  touch-action: manipulation;
}
.bottone__freccia {
  flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--nero);
  transition: transform 300ms var(--curva);
}
.bottone__freccia svg { width: 18px; height: 18px; fill: none; stroke: var(--testo); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--curva); }
.bottone:active { transform: scale(0.97); }
.bottone:active .bottone__freccia svg { transform: translateX(3px); }
@media (hover: hover) {
  .bottone:hover { background-position: 100% 50%; }
  .bottone:hover .bottone__freccia { transform: rotate(-45deg); }
}

/* text link: thin underline that grows from the left */
.collegamento {
  color: var(--testo); text-decoration: none; font-weight: 600; white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px; transition: background-size 300ms var(--curva), color 200ms ease-out;
}
.collegamento:active { color: var(--lilla); }
@media (hover: hover) { .collegamento:hover { color: var(--lilla); } }
.collegamento--grande { font-size: 17px; display: inline-flex; align-items: center; min-height: 48px; background-position: 0 calc(100% - 12px); }
.nota { margin-top: 16px; font-size: 14.5px; line-height: 1.55; color: var(--sec); }
.nota .collegamento { margin-left: 4px; }

/* ── Ingresso degli elementi dopo l'apertura ─── */
html.js .entra { opacity: 0; transform: translateY(18px); }
html.js.pronto .entra {
  opacity: 1; transform: none;
  transition: opacity 700ms ease-out, transform 900ms var(--curva);
  transition-delay: calc(var(--d, 0) * 110ms);
}

/* ── Prima schermata ─────────────────────────── */
.eroe {
  position: relative; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto; gap: 32px;
  padding: calc(var(--testa) + env(safe-area-inset-top) + 28px) var(--g) calc(28px + env(safe-area-inset-bottom));
  isolation: isolate; overflow-x: clip;
}
.eroe__luce {
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 34%; width: 150vw; max-width: 1400px; aspect-ratio: 1.3; transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side at 40% 50%, rgba(139, 111, 184, 0.30), rgba(139, 111, 184, 0) 70%),
    radial-gradient(closest-side at 64% 44%, rgba(201, 169, 233, 0.14), rgba(201, 169, 233, 0) 70%);
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.fermo) .eroe__luce { animation: respira 9s ease-in-out infinite alternate; }
}
@keyframes respira { to { transform: translate(-46%, -52%) scale(1.08); } }
.eroe__testo { align-self: center; }
.eroe__sopra { font-size: 14.5px; color: var(--sec); margin-bottom: 18px; }
.eroe__titolo {
  font-size: clamp(42px, 12vw, 120px); line-height: 1; font-weight: 750; letter-spacing: -0.032em;
  text-wrap: balance; max-width: 9em;
}
.eroe__titolo .cromo { white-space: nowrap; }
.eroe__sotto { margin-top: 22px; max-width: 24em; color: var(--sec); font-size: 18px; line-height: 1.5; }
.eroe__fondo { align-self: end; }
.eroe__fondo .bottone { width: 100%; }
@media (min-width: 768px) { .eroe__fondo .bottone { width: auto; min-width: 280px; } }
@media (min-width: 1024px) {
  .eroe { grid-template-rows: 1fr; grid-template-columns: 1fr auto; align-items: end; padding-bottom: 64px; }
  .eroe__titolo { font-size: clamp(72px, 7.4vw, 132px); }
  .eroe__fondo { width: 380px; }
}

/* ── Titoli di sezione ───────────────────────── */
.p { display: inline-block; overflow: clip; overflow-clip-margin: 0.14em; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.p > span { display: inline-block; }
html.attesa .parole:not(.diviso) { visibility: hidden; }
html.js .parole:not(.visto) .p > span { transform: translateY(110%); }
html.js .parole .p > span { transition: transform 820ms var(--curva); transition-delay: calc(var(--k, 0) * 45ms); }
.sez-testa h2, .chiusura h2, .servizi > h2 { font-size: clamp(40px, 10.6vw, 88px); line-height: 1; font-weight: 760; letter-spacing: -0.03em; text-wrap: balance; }
.sez-testa p, .chiusura > p:not(.nota) { margin-top: 16px; max-width: 32em; color: var(--sec); font-size: 18px; }

/* ── Perché sceglierci: il metodo, su una linea che si accende ── */
.processo { position: relative; padding: 96px var(--g) 72px; }
.processo__testa h2 { font-size: clamp(40px, 10.6vw, 88px); line-height: 1; font-weight: 760; letter-spacing: -0.03em; text-wrap: balance; }
.processo__testa p { margin-top: 16px; max-width: 24em; font-size: clamp(20px, 5.4vw, 28px); line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; }
.processo__passi { position: relative; list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 44px; }
.processo__passi::before, .processo__passi::after {
  content: ''; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; border-radius: 2px;
}
.processo__passi::before { background: var(--riga-2); }
.processo__passi::after { background: linear-gradient(180deg, #F4EAFF, #C9A9E9 40%, #8B6FB8); transform-origin: 50% 0; transform: scaleY(var(--linea, 0)); }
.processo__passi li { position: relative; z-index: 1; display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start; }
.processo__n {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px;
  background: var(--nero); border: 2px solid var(--riga-2); color: var(--sec); font-size: 18px; font-weight: 700;
  transition: background-color 400ms ease-out, border-color 400ms ease-out, color 400ms ease-out, transform 500ms var(--curva);
}
.processo__passi li.acceso .processo__n { background: var(--lilla); border-color: var(--lilla); color: var(--nero); transform: scale(1.06); }
.processo__passi h3 { font-size: clamp(24px, 6.6vw, 40px); line-height: 1.1; font-weight: 720; letter-spacing: -0.02em; padding-top: 6px; text-wrap: balance; transition: color 400ms ease-out; color: rgba(247, 248, 248, 0.55); }
.processo__passi li.acceso h3 { color: var(--testo); }
.processo__passi p { margin-top: 10px; max-width: 32em; color: var(--sec); font-size: 16.5px; line-height: 1.55; }
@media (min-width: 1024px) {
  .processo { display: grid; grid-template-columns: 4fr 8fr; gap: 72px; align-items: start; }
  .processo__testa { position: sticky; top: calc(var(--testa) + 64px); }
  .processo__passi { margin-top: 0; }
}

/* ── Lavoriamo con l'AI ──────────────────────── */
.ai { position: relative; padding: 104px var(--g) 96px; isolation: isolate; overflow-x: clip; }
.ai::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(140vw, 1200px); aspect-ratio: 1.4; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(139, 111, 184, 0.22), rgba(139, 111, 184, 0) 70%);
}
.ai__titolo { margin-top: 16px; max-width: 12em; font-size: clamp(38px, 10vw, 88px); line-height: 1.02; font-weight: 760; letter-spacing: -0.03em; text-wrap: balance; }
.ai__testo { margin-top: 20px; max-width: 30em; color: var(--sec); font-size: 18px; line-height: 1.55; }
html.js .ai__titolo, html.js .ai__testo { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease-out, transform 900ms var(--curva); }
html.js .ai__titolo.visto, html.js .ai__testo.visto { opacity: 1; transform: none; }

/* ── I locali che seguiamo: il loro logo ─────── */
.locali { padding: 112px var(--g) 40px; }
.locali__lista { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 36px; }
.locale__logo {
  display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 24px; overflow: hidden;
  background: var(--fondo); border: 1px solid rgba(247, 248, 248, 0.08);
}
.locale__logo img { width: 72%; height: auto; max-height: 70%; object-fit: contain; }
.locale__logo--pieno img { width: min(58%, 260px); height: auto; max-height: none; border-radius: 50%; }
.locale__testo { padding-top: 18px; }
.locale__nome { font-size: clamp(36px, 10vw, 64px); line-height: 1; font-weight: 750; letter-spacing: -0.026em; }
.locale__dove { margin-top: 10px; font-size: 16px; color: var(--sec); }
.locale__cosa {
  display: inline-block; margin-top: 14px; padding: 8px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
  border: 1px solid var(--riga-2); color: var(--testo);
}
html.js .locale { opacity: 0; transform: translateY(36px); transition: opacity 600ms ease-out, transform 900ms var(--curva); }
html.js .locale.visto { opacity: 1; transform: none; }
@media (min-width: 1024px) {
  .locali__lista { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
  .locale__nome { font-size: clamp(34px, 3.2vw, 52px); }
}

/* ── Chiusura: la mezz'ora gratis ────────────── */
.chiusura { position: relative; padding: 128px var(--g) 140px; isolation: isolate; overflow-x: clip; }
.chiusura::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 40%; width: min(130vw, 1200px); aspect-ratio: 1.5; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(139, 111, 184, 0.30), rgba(139, 111, 184, 0.06) 55%, rgba(139, 111, 184, 0));
}
.chiusura h2 { font-size: clamp(46px, 13vw, 120px); line-height: 0.96; letter-spacing: -0.032em; max-width: 8em; }
.chiusura__azioni { margin-top: 34px; display: grid; justify-items: start; gap: 10px; }
.chiusura__azioni .bottone { width: 100%; }
@media (min-width: 768px) {
  .chiusura__azioni { display: flex; align-items: center; gap: 28px; }
  .chiusura__azioni .bottone { width: auto; }
}

/* ── Piede ───────────────────────────────────── */
.piede { padding: 56px var(--g) calc(56px + env(safe-area-inset-bottom)); border-top: 1px solid var(--riga); background: var(--nero); font-size: 15px; color: var(--sec); }
.piede__motto { font-size: clamp(34px, 10vw, 72px); font-weight: 750; letter-spacing: -0.026em; line-height: 1.05; color: var(--testo); }
.piede__sotto { margin: 10px 0 34px; font-size: clamp(16px, 4.4vw, 20px); font-weight: 600; color: var(--lilla-chiaro); }
.piede__griglia { display: grid; gap: 22px; }
.piede__griglia p + p { margin-top: 2px; }
.piede__nome { color: var(--testo); font-weight: 650; }
.piede a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.piede__piccolo { margin-top: 36px; font-size: 13.5px; }
.ferma { background: none; border: 0; padding: 12px 0; min-height: 44px; color: var(--sec); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (min-width: 768px) { .piede__griglia { grid-template-columns: repeat(3, 1fr); } }

/* ── Pagina in arrivo ────────────────────────── */
.arrivo { min-height: 100svh; display: grid; align-content: center; padding: calc(var(--testa) + 40px) var(--g) 80px; }
.arrivo h1 { font-size: clamp(40px, 10.5vw, 88px); line-height: 1; font-weight: 750; letter-spacing: -0.028em; text-wrap: balance; max-width: 12em; }
.arrivo p { margin-top: 18px; color: var(--sec); font-size: 18px; }
.arrivo .azioni { margin-top: 30px; display: flex; }
.arrivo .bottone--vuoto { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; border-radius: 999px; background: rgba(247, 248, 248, 0.08); text-decoration: none; font-weight: 600; }

/* ── Movimento ridotto o fermato ─────────────── */
@media (prefers-reduced-motion: reduce) {
  html.js .entra, html.js .locale, html.js .dolore__lista li, html.js .dolore__fine, html.js .servizi__frase, html.js .risultati li, html.js .ai__titolo, html.js .ai__testo { opacity: 1; transform: none; }
  html.js .risultati__numero .cromo { clip-path: none; }
  html.js .parole:not(.visto) .p > span { transform: none; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .nastro__binario { flex-wrap: wrap; width: auto; padding: 0 var(--g); }
  .nastro__copia { display: none; }
  .dolore__lista span { transition: none; }
}
html.fermo .entra, html.fermo .locale, html.fermo .dolore__lista li, html.fermo .dolore__fine, html.fermo .servizi__frase, html.fermo .risultati li, html.fermo .ai__titolo, html.fermo .ai__testo { opacity: 1; transform: none; }
html.fermo .risultati__numero .cromo { clip-path: none; }
html.fermo .parole .p > span { transform: none; }
html.fermo *, html.fermo *::before, html.fermo *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
.risultati__chi img.risultati__logo-chiaro { object-fit: contain; background: #F2EAD6; }