/* United spot. Il concetto e' quello di NGL (scrivi in anonimo dal link nelle storie), la
   grafica e' di United: notte blu come le storie, luci sfocate, Inter nero, il nodo, «spot» a
   pennarello, pezzi veri dell'app. Un solo tema scuro. */
@font-face { font-family: "Inter"; src: url("/fonts/Inter_600SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter_700Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter_800ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter_900Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "League Spartan"; src: url("/fonts/LeagueSpartan-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("/fonts/PermanentMarker-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  --accent: #5565f5;
  --accent-soft: #8b96ff;
  --violet: #8e5cff;
  --pink: #ff5fa8;
  --night: #0a0b1a;
  --night-2: #121433;
  --night-3: #1a1d45;
  --ink: #12131c;
  --chip: #ece9fa;
  --white: #ffffff;
  --muted: rgba(255, 255, 255, 0.7);
  --line: rgba(255, 255, 255, 0.08);
  --gradient: linear-gradient(165deg, #5565f5 0%, #8e5cff 48%, #ff5fa8 100%);
  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--night);
  color: var(--white);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
a { color: inherit; }
img, svg { display: block; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; border-radius: 12px; }

/* ---------- Logo: nodo + United + spot a pennarello ---------- */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  color: var(--white);
  line-height: 1;
}
.wordmark-knot { width: 44px; height: auto; align-self: center; margin-right: 2px; }
.wordmark-united { font-family: "League Spartan", var(--font); font-weight: 700; font-size: 25px; letter-spacing: -0.01em; }
.wordmark-spot {
  font-family: "Permanent Marker", cursive;
  font-size: 25px;
  color: var(--accent-soft);
  display: inline-block;
  transform: rotate(-6deg) translateY(-1px);
}

/* ---------- Bottoni ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -0.02em;
  transition: transform 0.2s ease, background 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-light { background: var(--white); color: var(--ink); }
.btn-ghost { border: 1.5px solid rgba(255, 255, 255, 0.35); color: var(--white); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }
.btn-small { min-height: 42px; padding: 0 18px; font-size: 15px; }

/* ---------- Intestazione ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  background: rgba(10, 11, 26, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.site-nav { display: none; gap: 28px; }
.site-nav a { font-weight: 800; font-size: 15px; text-decoration: none; color: rgba(255, 255, 255, 0.82); }
.site-nav a:hover { color: var(--white); }

/* ---------- Apertura: testo a sinistra, telefono con le storie a destra ---------- */
.intro {
  position: relative;
  display: grid;
  gap: 46px;
  padding: 48px 20px 72px;
  max-width: 1180px;
  margin: 0 auto;
  isolation: isolate;
}
.intro-glow {
  /* Le stesse luci sfocate dello sfondo delle storie. */
  position: absolute;
  inset: -80px -40% -40px;
  z-index: -1;
  background:
    radial-gradient(38% 34% at 22% 26%, rgba(85, 101, 245, 0.55), transparent 70%),
    radial-gradient(30% 30% at 78% 40%, rgba(142, 92, 255, 0.42), transparent 70%),
    radial-gradient(34% 30% at 60% 88%, rgba(255, 95, 168, 0.3), transparent 70%);
  filter: blur(20px);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.86);
}
.live-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #3ddc97;
  box-shadow: 0 0 0 5px rgba(61, 220, 151, 0.18);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(61, 220, 151, 0); } }
.intro-title {
  margin: 0;
  font-weight: 900;
  font-size: clamp(54px, 13vw, 112px);
  line-height: 0.9;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.marker {
  position: relative;
  z-index: 0;
  display: inline-block;
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--accent-soft);
  transform: rotate(-4deg);
  padding: 0 0.06em;
}
.marker::after {
  /* La sottolineatura a pennarello. */
  content: "";
  position: absolute;
  left: 2%; right: 4%; bottom: -0.04em;
  height: 0.12em;
  border-radius: 999px;
  background: var(--pink);
  transform: rotate(-2deg);
  opacity: 0.85;
  /* La linea sta sotto la scritta. */
  z-index: -1;
}
.intro-lead {
  max-width: 34ch;
  margin: 24px 0 0;
  font-size: clamp(18px, 4.4vw, 21px);
  line-height: 1.5;
  font-weight: 600;
  color: var(--muted);
}
.intro-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 30px; }
/* Lo stesso bottone della mail dei gestori: bianco, angoli tondi, ombra piena. */
.btn-block {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-radius: 20px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.03em;
  box-shadow: 6px 6px 0 var(--accent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-block:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--accent); }


.intro-visual {
  position: relative;
  justify-self: center;
  width: min(300px, 78vw);
}
.phone {
  position: relative;
  padding: 10px;
  border-radius: 46px;
  background: linear-gradient(160deg, #2a2d55, #121433);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transform: rotate(3deg);
}
.phone-screen {
  position: relative;
  /* Un telefono vero e' piu' lungo della storia: la storia sta in alto, sotto c'e' la barra. */
  aspect-ratio: 9 / 19.5;
  border-radius: 36px;
  overflow: hidden;
  background: var(--night);
}
.phone-slide {
  position: absolute;
  top: 6%;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 14px;
  opacity: 0;
  animation: slide 16s infinite;
}
.phone-slide:nth-child(1) { animation-delay: 0s; }
.phone-slide:nth-child(2) { animation-delay: 4s; }
.phone-slide:nth-child(3) { animation-delay: 8s; }
.phone-slide:nth-child(4) { animation-delay: 12s; }
@keyframes slide {
  0%, 24% { opacity: 1; }
  25%, 100% { opacity: 0; }
}
.phone-bars {
  position: absolute;
  top: calc(6% + 6px); left: 12px; right: 12px;
  display: flex;
  gap: 4px;
}
.phone-bars span {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}
.phone-bars i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--white);
  transform-origin: left;
  transform: scaleX(0);
  animation: bar 16s linear infinite;
}
.phone-bars span:nth-child(2) i { animation-name: bar2; }
.phone-bars span:nth-child(3) i { animation-name: bar3; }
.phone-bars span:nth-child(4) i { animation-name: bar4; }
@keyframes bar { 0% { transform: scaleX(0); } 25%, 100% { transform: scaleX(1); } }
@keyframes bar2 { 0%, 25% { transform: scaleX(0); } 50%, 100% { transform: scaleX(1); } }
@keyframes bar3 { 0%, 50% { transform: scaleX(0); } 75%, 100% { transform: scaleX(1); } }
@keyframes bar4 { 0%, 75% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
.phone-head {
  position: absolute;
  top: calc(6% + 16px); left: 14px; right: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.phone-head b { font-weight: 800; }
.phone-head span:last-child { color: rgba(255, 255, 255, 0.7); font-weight: 600; }
.phone-avatar {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--white);
  color: var(--accent);
}
.phone-knot { width: 18px; height: auto; }
.phone-reply {
  position: absolute;
  left: 12px; right: 12px; bottom: 5%;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}
.phone-reply span {
  flex: 1;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
}
.phone-reply i { font-style: normal; font-size: 18px; }

.chip {
  position: absolute;
  z-index: 2;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  animation: float 6s ease-in-out infinite;
}
.chip b { display: block; color: var(--accent); font-weight: 900; }
.chip-likes { top: 14%; left: -22%; --tilt: -6deg; transform: rotate(var(--tilt)); }
.chip-batch { bottom: 22%; right: -26%; --tilt: 5deg; transform: rotate(var(--tilt)); animation-delay: -2s; }
.chip-check { bottom: -4%; left: -10%; --tilt: -3deg; transform: rotate(var(--tilt)); animation-delay: -4s; background: #3ddc97; }
@keyframes float {
  0%, 100% { transform: rotate(var(--tilt, 0deg)) translateY(0); }
  50% { transform: rotate(var(--tilt, 0deg)) translateY(-10px); }
}

/* ---------- Fascia inclinata con le frasi che scorrono ---------- */
.band-switch {
  /* Sopra il blu notte dell'apertura, sotto il chiaro di «Come funziona»: niente triangoli scuri. */
  overflow: hidden;
  padding: 34px 0;
  background: linear-gradient(180deg, var(--night) 50%, #f2f0ff 50%);
}
.marquee {
  overflow: hidden;
  padding: 16px 0;
  background: var(--accent);
  transform: rotate(-2deg) scale(1.04);
}
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee span {
  font-size: clamp(18px, 4.4vw, 26px);
  font-weight: 900;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.marquee span::after { content: "✦"; margin: 0 18px; color: var(--pink); font-size: 0.8em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sezioni ---------- */
.section { padding: 64px 20px; max-width: 1180px; margin: 0 auto; }
.kicker {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.section-title {
  margin: 0 0 22px;
  font-weight: 900;
  font-size: clamp(42px, 10.5vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.highlight {
  /* Parola evidenziata come un adesivo, un po' storta. */
  display: inline-block;
  padding: 0 0.14em 0.04em;
  border-radius: 0.16em;
  background: var(--white);
  color: var(--night);
  transform: rotate(-1.5deg);
}
.section-lead {
  max-width: 52ch;
  margin: -4px 0 30px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
}

/* ---------- Per i gestori: griglia di pezzi dell'app ---------- */
.bento { display: grid; gap: 14px; }
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border-radius: 30px;
  background: var(--night-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.tile h3 { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -0.04em; }
.tile > p { margin: 0 0 12px; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--muted); }
.tile-batch { background: linear-gradient(160deg, #23277a, #121433 70%); }
.tile-mod { background: linear-gradient(160deg, #3a1d5e, #121433 75%); }
.mock { margin-top: auto; }
.mock-batch {
  padding: 16px;
  border-radius: 22px;
  background: var(--white);
  color: var(--ink);
}
.mock-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.mock-row b { font-weight: 900; font-size: 16px; }
.mock-row span { color: #6b6f85; font-weight: 700; }
.mock-progress { height: 8px; margin: 12px 0; border-radius: 8px; background: var(--chip); overflow: hidden; }
.mock-progress i { display: block; height: 100%; width: 100%; border-radius: 8px; background: var(--accent); }
.mock-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mock-thumbs img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; }
.mock-days { display: flex; gap: 6px; margin-top: 12px; }
.mock-days button {
  flex: 1;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  display: grid;
  place-items: center;
  height: 30px;
  border-radius: 10px;
  background: var(--chip);
  color: #6b6f85;
  font-size: 12px;
  font-weight: 900;
}
.mock-days button[aria-pressed="true"] { background: var(--accent); color: var(--white); }
.mock-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mock-buttons button {
  display: grid;
  place-items: center;
  height: 40px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.mock-buttons button:hover { transform: translateY(-2px); filter: brightness(1.06); }
.mock-buttons button:active { transform: scale(0.96); }
.mock-remove { background: #e2325f; color: var(--white); }
.mock-keep { background: var(--chip); color: var(--accent); }
.mock-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 110px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
}
.mock-bars i { flex: 1; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, var(--accent-soft), var(--accent)); }
.mock-bars i:nth-child(6) { background: linear-gradient(180deg, var(--pink), var(--violet)); }
.bar-38 { height: 38%; } .bar-48 { height: 48%; } .bar-56 { height: 56%; } .bar-62 { height: 62%; }
.bar-72 { height: 72%; } .bar-84 { height: 84%; } .bar-100 { height: 100%; }
.mock-roles { list-style: none; padding: 0; margin-bottom: 0; display: grid; gap: 8px; }
.mock-roles li {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.mock-roles b { display: block; color: var(--white); font-weight: 900; font-size: 16px; }
/* Moderazione: la pila di contenuti da controllare. */
.mock-queue { position: relative; min-height: 300px; }
.q-card {
  position: absolute;
  left: 0; right: 0;
  padding: 16px 18px;
  border-radius: 22px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.q-card p { margin: 10px 0 0; font-size: 16px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; }
/* Le carte dietro sono piene, non trasparenti: non si vede la terza attraverso la seconda. */
.q-card { transition: top 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease, background-color 0.3s ease; }
.q-card[data-pos="0"] { top: 118px; z-index: 3; }
.q-card[data-pos="1"] { top: 56px; z-index: 2; transform: scale(0.94) rotate(2deg); background: #e6e5f4; }
.q-card[data-pos="2"] { top: 0; z-index: 1; transform: scale(0.88) rotate(-3deg); background: #cfcde6; }
.q-card .mock-buttons { margin-top: 14px; }
.q-card:not([data-pos="0"]) .mock-buttons { visibility: hidden; }
.q-card.is-removed { transform: translateX(-120%) rotate(-14deg); opacity: 0; }
.q-card.is-kept { transform: translateX(120%) rotate(14deg); opacity: 0; }
.q-badge { display: inline-block; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; }
.q-risk { background: #ffe1ea; color: #d61f5a; }
.q-user { background: #fff1d6; color: #a15c00; }
.q-auto { background: var(--chip); color: var(--accent); }

/* Il tuo link: lo spotted finto della scuola di prova, cliccabile. */
.mock-demo {
  display: block;
  border-radius: 22px;
  overflow: hidden;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.2s ease;
}
.mock-demo:hover { transform: translateY(-3px) rotate(-1deg); }
.demo-head {
  display: block;
  padding: 10px 14px;
  background: linear-gradient(100deg, #5565f5, #8e5cff);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
}
.demo-head b { display: block; font-size: 17px; font-weight: 900; letter-spacing: -0.03em; }
.demo-text { display: block; padding: 12px 14px 4px; color: #a2a5b8; font-weight: 800; font-size: 14px; }
.demo-foot { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; }
.demo-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); font-size: 12px; font-weight: 800; }
.demo-open { flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 900; font-size: 14px; }

/* ---------- La rete: cartina a puntini ---------- */
.network { display: grid; gap: 30px; align-items: center; }
.network-map {
  /* L'Italia senza riquadro, grande, su una luce blu appena accennata. */
  position: relative;
  justify-self: center;
  width: min(720px, 100%);
  aspect-ratio: 0.82;
  background: radial-gradient(55% 48% at 50% 45%, rgba(85, 101, 245, 0.18), transparent 72%);
}
.network-map canvas { width: 100%; height: 100%; }

/* ---------- Sicurezza, download, piede ---------- */
.safety-grid { display: grid; gap: 14px; }
.safety-grid p {
  margin: 0;
  padding: 22px 24px;
  border-radius: 26px;
  background: var(--night-2);
  font-size: 18px;
  line-height: 1.45;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.84);
}
.safety-grid strong { color: var(--white); font-weight: 900; }

.stores-big { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.stores-big a {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  transition: transform 0.2s ease;
}
.stores-big a:hover { transform: translateY(-3px); }
.stores-big svg { width: 30px; height: 30px; }
.stores-big span { display: none; }

/* ---------- Fasce a contrasto ---------- */
.band { width: 100%; }
.band-light { background: #f2f0ff; color: var(--ink); }
.band-accent { background: var(--accent); color: var(--white); overflow: hidden; }
.kicker-dark { color: var(--accent); }
.kicker-light { color: rgba(255, 255, 255, 0.82); }
.band-light .section-title { color: var(--ink); }
.marker-ink {
  display: inline-block;
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--accent);
  transform: rotate(-3deg);
}

/* ---------- Come funziona: tre passi su fondo chiaro ---------- */
.flow { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 42px; }
.flow-step { position: relative; display: grid; gap: 14px; }
.flow-num {
  position: absolute;
  top: 14px; left: 20px;
  z-index: 2;
  font-family: "Permanent Marker", cursive;
  font-size: 52px;
  line-height: 1;
  color: var(--pink);
  transform: rotate(-8deg);
}
.flow-visual {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 26px;
  border-radius: 28px;
  background: var(--white);
  box-shadow: 0 1px 0 rgba(18, 19, 28, 0.06), 0 24px 50px rgba(85, 101, 245, 0.12);
}
.flow-step h3 { margin: 4px 0 0; font-size: 34px; font-weight: 900; letter-spacing: -0.045em; }
.flow-step > p { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 600; color: #4b4f63; }

.mini-ask {
  width: min(260px, 100%);
  border-radius: 22px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 16px 34px rgba(18, 19, 28, 0.14);
  transform: rotate(-2deg);
}
.mini-ask-head {
  margin: 0;
  padding: 12px 16px;
  background: linear-gradient(100deg, #5565f5, #8e5cff);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
}
.mini-ask-head b { display: block; font-size: 18px; font-weight: 900; letter-spacing: -0.03em; }
.mini-ask-text { margin: 0; padding: 14px 16px 10px; font-size: 16px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; }
.caret {
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--accent);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.mini-send {
  display: block;
  width: calc(100% - 24px);
  border: 0;
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  margin: 0 12px 12px;
  padding: 10px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  text-align: center;
  font-weight: 900;
}
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: min(260px, 100%); }
.rules li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 15px;
}
.rules .no { background: #ffe8ee; color: #c2184d; text-decoration: line-through; text-decoration-thickness: 2px; }
.rules .no::before { content: "✕"; text-decoration: none; display: inline-block; }
.rules .yes { background: #e2f8ee; color: #137a4b; }
.rules .yes::before { content: "✓"; }
.flow-story { position: relative; }
.flow-story img {
  width: 116px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 18px 34px rgba(18, 19, 28, 0.22);
}
.flow-story img:first-child { transform: rotate(-7deg) translateX(34px); }
.flow-story img:last-child { position: absolute; transform: rotate(6deg) translateX(-30px); }

/* ---------- Contatto gestori, a contrasto ---------- */
.contact { position: relative; padding-top: 80px; padding-bottom: 80px; }
.contact-title {
  position: relative;
  max-width: 14ch;
  margin: 0;
  font-weight: 900;
  font-size: clamp(40px, 9.6vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.contact-lead {
  position: relative;
  max-width: 44ch;
  margin: 20px 0 30px;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}
.contact-mail {
  position: relative;
  display: inline-block;
  padding: 18px 26px;
  border-radius: 20px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  font-weight: 900;
  font-size: clamp(20px, 5.4vw, 34px);
  letter-spacing: -0.035em;
  box-shadow: 8px 8px 0 var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow-wrap: anywhere;
}
.contact-mail:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--ink); }

/* ---------- La rete: numeri grandi senza riquadri ---------- */
.network-numbers { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 8px; }
.network-numbers p { margin: 0; display: flex; flex-direction: column; }
.network-numbers b {
  font-size: clamp(48px, 11vw, 74px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}
.network-numbers span {
  font-family: "Permanent Marker", cursive;
  font-size: 22px;
  color: var(--pink);
  transform: rotate(-3deg);
  transform-origin: left;
}

/* ---------- L'app: @, tag, commenti, reazioni ---------- */
.app { display: grid; gap: 40px; align-items: center; padding-top: 80px; padding-bottom: 80px; }
.app-lead { max-width: 44ch; margin: -4px 0 28px; font-size: 18px; line-height: 1.5; font-weight: 600; color: #4b4f63; }
.store-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.store-btn {
  /* Stesso bottone della mail e dell'apertura: bianco, angoli tondi, ombra piena. */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 18px;
  border-radius: 20px;
  border: 2px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.store-btn:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.store-btn svg { width: 26px; height: 26px; }
.store-btn span { display: flex; flex-direction: column; font-weight: 900; font-size: 18px; letter-spacing: -0.02em; line-height: 1.1; }
.store-btn small { font-size: 11px; font-weight: 700; opacity: 0.75; letter-spacing: 0; }
.app-visual {
  position: relative;
  min-height: 380px;
  display: grid;
  place-items: center;
}
.thread { position: relative; display: grid; gap: 10px; width: min(330px, 92%); }
.bubble {
  margin: 0;
  justify-self: start;
  max-width: 92%;
  padding: 12px 16px;
  border-radius: 20px 20px 20px 6px;
  background: var(--white);
  box-shadow: 0 14px 30px rgba(18, 19, 28, 0.12);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}
.bubble b { color: var(--accent); font-weight: 900; }
.bubble-reply {
  justify-self: end;
  border-radius: 20px 20px 6px 20px;
  background: var(--accent);
  color: var(--white);
}
.ghost {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 900;
  color: #8b8fa3;
}
.react, .tag-chip {
  position: absolute;
  z-index: 2;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 15px;
  box-shadow: 0 12px 26px rgba(18, 19, 28, 0.16);
  animation: float 6s ease-in-out infinite;
}
.react { background: var(--white); }
.react-1 { top: 6%; left: 2%; --tilt: -8deg; }
.react-2 { bottom: 8%; right: 4%; --tilt: 6deg; animation-delay: -2s; }
.react-3 { top: 2%; right: 14%; font-size: 30px; padding: 6px 10px; --tilt: 10deg; animation-delay: -4s; }
.tag-chip { background: var(--ink); color: var(--white); }
.tag-1 { bottom: 4%; left: 8%; --tilt: 5deg; animation-delay: -1s; }
.tag-2 { top: 40%; right: -2%; --tilt: -6deg; background: var(--pink); animation-delay: -3s; }

/* ---------- Footer ---------- */
.site-footer { padding: 56px 20px 26px; overflow: hidden; }
/* Sopra la scritta gigante, che sborda in alto: i link devono restare cliccabili. */
.footer-top { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; gap: 22px; }
.footer-brand { display: flex; align-items: center; gap: 22px; }
.footer-knot { flex: 0 0 auto; width: clamp(96px, 22vw, 150px); height: auto; color: var(--white); }
.footer-claim { margin: 0; max-width: 18ch; font-size: clamp(26px, 6vw, 40px); font-weight: 900; letter-spacing: -0.04em; line-height: 1.02; }
.site-footer nav, .school-footer nav { display: flex; flex-wrap: wrap; gap: 8px; }
.site-footer nav a, .school-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  color: var(--white);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.site-footer nav a:hover, .school-footer nav a:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.footer-giant {
  margin: 40px 0 0;
  font-family: "League Spartan", var(--font);
  font-weight: 800;
  font-size: 16.5vw;
  line-height: 0.8;
  letter-spacing: -0.04em;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.22);
  pointer-events: none;
  /* Un riflesso che attraversa la scritta, di continuo. */
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.2) 50%, transparent 62%) 150% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shine 7s linear infinite;
}
@keyframes shine { to { background-position: -150% 0; } }
.footer-giant span {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 0.08em;
  color: var(--accent);
  -webkit-text-stroke: 0;
  display: inline-block;
  transform: rotate(-6deg);
}
.footer-bottom {
  max-width: 1180px;
  margin: 18px auto 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}
.school-footer {
  max-width: 560px;
  margin: 0 auto;
  padding: 10px 16px 36px;
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.school-footer nav { justify-content: center; }
.school-footer p { margin: 0; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.7); }

/* ---------- Pagina della scuola: la domanda anonima ---------- */
body.school {
  background: var(--gradient) fixed, var(--night);
  min-height: 100svh;
}
.school-main {
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 16px 32px;
  display: grid;
  gap: 22px;
}
.school-top { display: flex; justify-content: center; padding: 6px 0 4px; }
.ask { display: grid; gap: 14px; }
.ask-card, .ask-done {
  margin: 0;
  padding: 0;
  border-radius: 36px;
  background: var(--white);
  color: var(--ink);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(20, 8, 60, 0.35);
}
.ask-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  background: linear-gradient(100deg, #5565f5, #8e5cff);
  color: var(--white);
}
.ask-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.ask-knot { width: 34px; height: auto; color: var(--white); }
.ask-label { margin: 0; font-size: 13px; font-weight: 800; opacity: 0.86; }
.ask-school { margin: 2px 0 0; font-size: clamp(24px, 6.4vw, 32px); font-weight: 900; letter-spacing: -0.045em; line-height: 1.02; overflow-wrap: anywhere; }
.ask-place { margin: 4px 0 0; font-size: 13px; font-weight: 700; opacity: 0.8; }
.ask-card textarea {
  display: block;
  width: 100%;
  min-height: 190px;
  padding: 22px 22px 8px;
  border: 0;
  resize: none;
  background: transparent;
  color: var(--ink);
  font: 800 22px/1.25 var(--font);
  letter-spacing: -0.02em;
}
.ask-card textarea::placeholder { color: #a2a5b8; }
.ask-card textarea:focus { outline: none; }
.ask-counter { margin: 0; padding: 0 22px 16px; text-align: right; color: #8b8fa3; font-size: 13px; font-weight: 700; }
.send {
  display: block;
  width: calc(100% - 28px);
  margin: 0 14px 14px;
  padding: 20px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font: 900 22px var(--font);
  letter-spacing: -0.03em;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.send:hover { transform: translateY(-2px); }
.send:disabled { opacity: 0.6; cursor: progress; transform: none; }
.ask-result { margin: 0; padding: 0 22px 18px; font-weight: 700; color: #c2185b; min-height: 0; }
.ask-result:empty { display: none; }
.ask-done { padding: 34px 22px 10px; text-align: center; }
.ask-done[hidden] { display: none; }
.done-emoji { font-size: 64px; line-height: 1; }
.ask-done h2 { margin: 12px 0 6px; font-size: 44px; font-weight: 900; letter-spacing: -0.055em; }
.ask-done p { margin: 0 0 22px; font-size: 17px; font-weight: 600; line-height: 1.45; color: #4b4f63; }
.ask-done .send { width: 100%; margin: 0 0 14px; }
.ask-rules { margin: 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--white); opacity: 0.9; line-height: 1.5; }
.school-app {
  padding: 26px 22px;
  border-radius: 32px;
  background: rgba(10, 11, 26, 0.55);
  text-align: center;
}
.school-app h2 { margin: 0 0 18px; font-size: 26px; font-weight: 900; letter-spacing: -0.04em; line-height: 1.05; }
.privacy-note { margin: 0; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--white); opacity: 0.8; line-height: 1.5; }
.privacy-note a { font-weight: 800; }

body.school .wordmark-spot { color: var(--white); }

/* ---------- Domande frequenti ---------- */
.faq-list { display: grid; border-top: 2px solid rgba(255, 255, 255, 0.14); }
.faq-item { border-bottom: 2px solid rgba(255, 255, 255, 0.14); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(20px, 4.6vw, 28px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); background: var(--accent); color: var(--white); }
.faq-item summary:hover { color: var(--accent-soft); }
.faq-item summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.faq-item p {
  max-width: 62ch;
  margin: -6px 0 24px;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- Interazioni ---------- */
/* Apertura: le luci seguono appena il mouse e respirano da sole. */
.intro-glow {
  translate: calc(var(--mx, 0) * 46px) calc(var(--my, 0) * 34px);
  transition: translate 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: glow-drift 16s ease-in-out infinite alternate;
}
@keyframes glow-drift {
  from { transform: scale(1) rotate(0deg); }
  to { transform: scale(1.08) rotate(4deg); }
}
.intro-visual {
  translate: calc(var(--mx, 0) * -14px) calc(var(--my, 0) * -10px);
  transition: translate 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Telefono: storie a tocco, come su Instagram (35% a sinistra indietro, il resto avanti). */
.phone-tap {
  position: absolute;
  top: 0;
  bottom: 14%;
  z-index: 3;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.phone-prev { left: 0; width: 35%; }
.phone-next { right: 0; width: 65%; }
.phone-tap:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: -6px; border-radius: 30px; }
.phone.is-live .phone-slide { animation: none; opacity: 0; transition: opacity 0.2s ease; }
.phone.is-live .phone-slide.is-active { opacity: 1; }
.phone.is-live .phone-bars i { animation: none; transform: scaleX(0); }
.phone.is-live .phone-bars .is-done i { transform: scaleX(1); }
.phone.is-live .phone-bars .is-active i { animation: story-bar 5s linear forwards; }
@keyframes story-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Come funziona: i riquadri si alzano, «Invia!» invia davvero. */
.flow-visual { position: relative; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease; }
.flow-num { transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.flow-story img { transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.rules li { transition: transform 0.25s ease; }
.mini-ask-text { min-height: 3.4em; transition: opacity 0.35s ease, transform 0.35s ease; }
.mini-ask.is-sent .mini-ask-text { opacity: 0; transform: translate(30px, -18px) rotate(5deg); }
.mini-ask.is-sent { animation: sent-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
.mini-send { transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease, opacity 0.2s ease; }
.mini-send:hover { transform: translateY(-2px); }
.mini-send:active { transform: scale(0.96); }
.mini-ask.is-sent .mini-send { background: #3ddc97; color: var(--ink); }
.mini-ask.is-typing .mini-send { opacity: 0.6; }
@keyframes sent-pop {
  0% { transform: rotate(-2deg) scale(1); }
  40% { transform: rotate(-4deg) scale(1.06); }
  100% { transform: rotate(-2deg) scale(1); }
}
.burst {
  position: absolute;
  z-index: 3;
  left: var(--ox);
  top: var(--oy);
  font-size: 22px;
  pointer-events: none;
  animation: burst 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes burst {
  from { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
  70% { opacity: 1; }
  to { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1.15); opacity: 0; }
}

/* Gestori: le tessere si alzano, le barre crescono e mostrano il valore. */
.tile { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease; }
.mock-bars i {
  position: relative;
  transform-origin: bottom;
  transition:
    transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) var(--delay, 0ms),
    translate 0.25s cubic-bezier(0.3, 1.6, 0.5, 1),
    filter 0.2s ease;
}
.mock-bars i:nth-child(2) { --delay: 70ms; }
.mock-bars i:nth-child(3) { --delay: 140ms; }
.mock-bars i:nth-child(4) { --delay: 210ms; }
.mock-bars i:nth-child(5) { --delay: 280ms; }
.mock-bars i:nth-child(6) { --delay: 350ms; }
.mock-bars i:nth-child(7) { --delay: 420ms; }
.js .mock-bars:not(.is-visible) i { transform: scaleY(0); }
.mock-bars i::after {
  content: attr(data-v);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  padding: 3px 7px;
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  font-style: normal;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.mock-bars i:hover { translate: 0 -8px; filter: brightness(1.18); }
.mock-bars i:hover::after { opacity: 1; transform: translate(-50%, 0); }
.mock-days button { transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease; }
.mock-days button:hover { transform: translateY(-2px); }
.mock-days button:active { transform: scale(0.9); }
.mock-thumbs img { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mock-roles li { transition: transform 0.25s ease, background-color 0.25s ease; }

@media (hover: hover) {
  .flow-step:hover .flow-visual { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 1px 0 rgba(18, 19, 28, 0.06), 0 34px 60px rgba(85, 101, 245, 0.22); }
  .flow-step:hover .flow-num { transform: rotate(-16deg) scale(1.15); }
  .flow-step:hover .rules .no { animation: nope 0.45s ease; }
  .flow-step:hover .rules .no:nth-child(2) { animation-delay: 0.08s; }
  .flow-step:hover .rules .no:nth-child(3) { animation-delay: 0.16s; }
  .flow-step:hover .rules .yes { transform: scale(1.04); }
  .flow-step:hover .flow-story img:first-child { transform: rotate(-12deg) translateX(14px); }
  .flow-step:hover .flow-story img:last-child { transform: rotate(11deg) translateX(-8px); }
  .tile:hover { transform: translateY(-5px); border-color: rgba(139, 150, 255, 0.4); box-shadow: 0 26px 50px rgba(0, 0, 0, 0.35); }
  .mock-thumbs img:hover { transform: translateY(-6px) rotate(-2deg); }
  .mock-roles li:hover { transform: translateX(5px); background: rgba(255, 255, 255, 0.11); }
}
@keyframes nope {
  0%, 100% { translate: 0; }
  25% { translate: -5px; }
  75% { translate: 5px; }
}

/* La colonna di @: quattro grandi e tre piccole come nel materiale di United. Ogni @ sale come
   fumo, svanisce e riparte; i ritardi vanno dal basso verso l'alto. */
.at-cloud {
  --u: 0.85px;
  position: relative;
  width: calc(var(--u) * 175);
  height: calc(var(--u) * 270);
  flex: 0 0 auto;
  pointer-events: none;
}
.at-cloud-light { margin: 32px 0 0 auto; }
.at-cloud-dark { justify-self: center; }
.cloud-at {
  position: absolute;
  left: calc(var(--u) * var(--x));
  top: calc(var(--u) * var(--y));
  font-family: "League Spartan", var(--font);
  font-weight: 800;
  font-size: calc(var(--u) * var(--s));
  line-height: 1;
  transform: translate(-50%, -50%);
  animation: smoke 5s linear infinite;
  will-change: transform, opacity;
}
.cloud-b1 { --x: 123; --y: 42; --s: 46; animation-delay: -1.3s; }
.cloud-b2 { --x: 85; --y: 82; --s: 52; animation-delay: -2.2s; }
.cloud-b3 { --x: 115; --y: 147; --s: 62; animation-delay: -3.1s; }
.cloud-b4 { --x: 45; --y: 222; --s: 78; animation-delay: -4.1s; }
.cloud-s1 { --x: 152; --y: 26; --s: 20; animation-delay: -0.9s; }
.cloud-s2 { --x: 62; --y: 150; --s: 24; animation-delay: -2.7s; }
.cloud-s3 { --x: 104; --y: 234; --s: 18; animation-delay: -4.4s; }
.at-cloud-dark .cloud-at { color: #101a3c; }
.at-cloud-dark [class*="cloud-s"] { color: var(--accent); }
.at-cloud-light .cloud-at { color: var(--white); }
.at-cloud-light [class*="cloud-s"] { color: var(--ink); }
@keyframes smoke {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 16px)); }
  14% { opacity: 1; transform: translate(calc(-50% + 1px), calc(-50% + 10px)); }
  76% { opacity: 1; transform: translate(calc(-50% + 5px), calc(-50% - 14px)); }
  100% { opacity: 0; transform: translate(calc(-50% + 7px), calc(-50% - 24px)); }
}

/* L'app: qualcuno sta sempre scrivendo. */
.bubble-typing { display: flex; gap: 5px; padding: 14px 16px; }
.bubble-typing span { width: 8px; height: 8px; border-radius: 50%; background: #8b8fa3; animation: typing 1.2s ease-in-out infinite; }
.bubble-typing span:nth-child(2) { animation-delay: 0.15s; }
.bubble-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* Menu della mail da computer: indirizzo copiato e scelta del servizio. */
.mail-menu {
  position: fixed;
  z-index: 50;
  display: grid;
  gap: 6px;
  min-width: 240px;
  padding: 12px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  animation: menu-in 0.18s ease-out;
}
.mail-menu p { margin: 0 4px 4px; font-size: 13px; font-weight: 800; color: #4b4f63; }
.mail-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--chip);
  color: var(--ink);
  font-weight: 900;
  font-size: 15px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.mail-menu a:hover, .mail-menu a:focus-visible { background: var(--accent); color: var(--white); outline: none; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Schermi larghi ---------- */
@media (min-width: 900px) {
  .site-header { padding: 16px 32px; }
  .site-nav { display: flex; }
  .wordmark-knot { width: 52px; }
  .wordmark-united, .wordmark-spot { font-size: 28px; }
  .intro { grid-template-columns: 1.15fr 0.85fr; align-items: center; padding: 80px 32px 110px; gap: 40px; }
  .intro-visual { width: 320px; }
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
  .app { grid-template-columns: 1fr 1fr; gap: 48px; }
  .footer-top { grid-template-columns: 1fr auto; align-items: end; }
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(210px, auto); }
  .tile-batch { grid-column: span 3; grid-row: span 2; }
  .tile-mod { grid-column: span 3; grid-row: span 2; }
  .tile-stats, .tile-roles, .tile-link { grid-column: span 2; }
  .network { grid-template-columns: 1.05fr 0.95fr; gap: 12px; }
  .network .highlight { white-space: nowrap; }
  .network-map { justify-self: end; margin-right: -40px; }
  .safety-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faq { display: grid; grid-template-columns: 0.8fr 1.2fr; grid-template-rows: auto 1fr; column-gap: 48px; align-items: start; }
  .faq .kicker, .faq .section-title { grid-column: 1; }
  .faq-list { grid-column: 2; grid-row: 1 / span 2; }
  /* Fascia blu: testo a sinistra, colonna di @ in una sua colonna a destra, mai sopra il titolo. */
  .contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 72px; align-items: center; }
  .contact > :not(.at-cloud) { grid-column: 1; }
  .contact-mail { justify-self: start; }
  .at-cloud-light { grid-column: 2; grid-row: 1 / span 4; justify-self: end; margin: 0 -10px 0 0; --u: 1.45px; }
  .app-visual { grid-template-columns: 1fr auto; gap: 8px; }
  .at-cloud-dark { --u: 1.25px; }
}
@media (max-width: 420px) {
  .chip-likes { left: -8%; }
  .chip-batch { right: -10%; }
  .chip-check { left: -4%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track, .chip, .live-dot, .phone-bars i, .react, .tag-chip, .caret { animation: none; }
  .intro-glow, .cloud-at, .bubble-typing span, .footer-giant, .mini-ask.is-sent { animation: none; }
  .phone.is-live .phone-bars .is-active i { animation: none; transform: scaleX(1); }
  .js .mock-bars:not(.is-visible) i { transform: none; }
  .phone-slide { animation: none; }
  .phone-slide:first-child { opacity: 1; }
}