/* =============================================================
   Ink · landing
   La hero standard da SaaS, portata nel mondo del tatuaggio:
   il font a puntini e' dotwork, il viola e' quello della carta
   da stencil (lo stesso di Ink), l'ago traccia una stella
   nautica sulla "pelle" del video, al posto dei loghi delle
   aziende ci sono tre soggetti da foglio di flash.
   ============================================================= */

@font-face {
  font-family: "Geist Pixel Circle";
  src: url("fonts/GeistPixel-Circle.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #000000;
  --text: #ffffff;
  --muted: #8e8e8e;
  --nav-text: #2e2e2e;
  --pill-dark: #28282a;
  --sign-in-text: #c8c8c8;
  --nav-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  --trust-bg: #28282a;
  --trust-border: rgba(255, 255, 255, 0.4);
  --trust-text: #c4c2c3;
  --font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-display: "BubbledotICG-FinePos", "Geist Pixel Circle", monospace;

  /* L'inchiostro di Ink: il viola della carta da stencil. */
  --stencil: #8f7aff;
  --stencil-chiaro: #b4a8ff;
  --stencil-scuro: #5a3fe3;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--stencil);
  outline-offset: 3px;
}

/* ---------------- sfondo ---------------- */

/* z-index 0: lo sfondo e' un livello a se'. Velatura e stencil restano
   dentro, sotto la pagina. */
.bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #000;
  overflow: hidden;
}

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

/* Una velatura d'inchiostro: tiene leggibile il bianco sopra il cielo
   chiaro del video e scurisce i bordi come una vignettatura. */
.bg-ink {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 30% at 50% 45%, rgba(8, 6, 18, 0.5), rgba(8, 6, 18, 0) 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.45));
}

/* Lo stencil: una stella nautica che l'ago traccia sulla curva della
   "pelle" a destra. Il disegno lo fa main.js. */
.stencil {
  position: absolute;
  z-index: 2;
  right: clamp(18px, 5vw, 90px);
  bottom: clamp(150px, 24vh, 260px);
  width: clamp(80px, 11vw, 170px);
  height: auto;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(143, 122, 255, 0.55));
  transform: rotate(-12deg);
}

.stencil-tratti path,
.stencil-tratti circle {
  fill: none;
  stroke: var(--stencil-chiaro);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.stencil-tratti .anello {
  stroke-width: 2.2;
  stroke-dasharray: 0 7;
  opacity: 0.75;
}

.stencil-puntini circle {
  fill: var(--stencil-chiaro);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.stencil-puntini circle.si {
  opacity: 0.85;
}

.ago {
  fill: #fff;
  opacity: 0;
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px var(--stencil));
  transition: opacity 0.4s ease;
}

.ago.al-lavoro {
  opacity: 1;
}

/* ---------------- pagina ---------------- */

/* Senza z-index: la testata (z-index 30) deve poter stare sopra il velo
   del menu, che vive fuori dalla pagina. */
.page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding: clamp(16px, 2.4vh, 28px) clamp(14px, 3vw, 32px);
  padding-top: max(clamp(16px, 2.4vh, 28px), env(safe-area-inset-top));
  padding-bottom: max(clamp(16px, 2.4vh, 28px), env(safe-area-inset-bottom));
}

/* ---------------- testata ---------------- */

.header {
  position: relative;
  z-index: 30;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.8vw, 28px);
  width: 100%;
  max-width: 720px;
  animation: slideDown 0.7s var(--ease) both;
}

.logo {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: clamp(40px, 4.4vw, 46px);
  height: clamp(40px, 4.4vw, 46px);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--nav-shadow);
  transition: transform 0.25s var(--ease);
}

.logo:hover {
  transform: scale(1.04);
}

.logo img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}

.nav {
  flex: 1;
  max-width: 430px;
  height: clamp(44px, 5.2vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--nav-shadow);
}

.nav-link {
  position: relative;
  padding: 10px 12px;
  border: 0;
  background: none;
  color: var(--nav-text);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.nav-link:hover,
.nav-link[aria-expanded="true"] {
  opacity: 0.75;
}

.nav-link.is-active {
  opacity: 1;
}

/* Tre punti d'inchiostro sotto la voce attiva. */
.nav-link.is-active::after,
.sheet-link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--stencil-scuro);
  box-shadow: -5px 0 0 var(--stencil-scuro), 5px 0 0 var(--stencil-scuro);
}

.sign-in {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: clamp(44px, 5.2vw, 48px);
  padding: 0 clamp(18px, 2.4vw, 24px);
  border-radius: 999px;
  background: var(--pill-dark);
  color: var(--sign-in-text);
  box-shadow: var(--nav-shadow);
  font-weight: 500;
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.25s var(--ease);
}

.sign-in:hover {
  background: #323234;
  color: #fff;
  transform: translateY(-1px);
}

.burger {
  display: none;
}

/* ---------------- hero ---------------- */

.hero {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.trust {
  --trust-size: clamp(36px, 4.5vw, 42px);
  display: inline-flex;
  align-items: center;
  margin-bottom: clamp(16px, 2.5vh, 26px);
}

.avatar {
  position: relative;
  width: var(--trust-size);
  height: var(--trust-size);
  padding: 5px;
  border-radius: 50%;
  background: var(--trust-bg);
  border: 1px solid var(--trust-border);
  transition: transform 0.35s var(--ease);
}

.avatar-in {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font-size: calc(var(--trust-size) * 0.34);
}

.a1 {
  z-index: 1;
}

.a2 {
  z-index: 2;
  margin-left: calc(var(--trust-size) * -0.42);
}

.a3 {
  z-index: 4;
  margin-left: calc(var(--trust-size) * -0.42);
}

.trust:hover .a1 {
  transform: translateY(-2px);
}

.trust:hover .a2 {
  transform: translateY(-4px);
}

.trust:hover .a3 {
  transform: translateY(-2px);
}

.trust-pill {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  height: var(--trust-size);
  margin-left: calc(var(--trust-size) * -0.42);
  padding: 0 16px 0 calc(var(--trust-size) * 0.58);
  border-radius: 999px;
  background: var(--trust-bg);
  border: 1px solid var(--trust-border);
  color: var(--trust-text);
  font-weight: 500;
  font-size: clamp(12px, 1.4vw, 13.5px);
  white-space: nowrap;
}

.headline {
  margin: 0;
  max-width: 100%;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 6.2vw, 80px);
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.hl {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  animation: headlineFade 0.85s var(--ease) forwards;
}

.hl1 {
  animation-delay: 0.12s;
}

.hl2 {
  animation-delay: 0.3s;
}

.sub {
  --o: 0.8;
  max-width: min(500px, 92%);
  margin: clamp(14px, 2.2vh, 22px) auto 0;
  color: #d0d0d0;
  font-weight: 400;
  font-size: clamp(calc(13.5px + 2pt), calc(1.55vw + 2pt), calc(16.5px + 2pt));
  line-height: 1.55;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(20px, 3.2vh, 32px);
  padding: clamp(11px, 1.6vh, 13px) clamp(22px, 3vw, 28px);
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-weight: 600;
  font-size: clamp(13.5px, 1.5vw, 14.5px);
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 22px rgba(255, 255, 255, 0.32), 0 0 44px rgba(255, 255, 255, 0.12);
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease;
}

/* Al passaggio la luce si tinge d'inchiostro. */
.cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 28px rgba(255, 255, 255, 0.45), 0 0 64px rgba(143, 122, 255, 0.45);
}

.cta svg {
  transition: transform 0.3s var(--ease);
}

.cta:hover svg {
  transform: translateX(2px);
}

/* ---------------- numeri ---------------- */

.stats {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  width: 100%;
  max-width: 920px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.stat-icon {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 33px);
  line-height: 1;
}

.stat-value {
  color: #fff;
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.stat-label {
  color: var(--muted);
  font-size: clamp(11px, 1.2vw, 12.5px);
  line-height: 1.35;
}

/* ---------------- ingressi ---------------- */

.anim,
.anim-pulse {
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  filter: blur(6px);
  animation: reveal 0.85s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}

.anim-pulse {
  animation-name: revealPulse;
  animation-duration: 1.1s;
}

@keyframes reveal {
  to {
    opacity: var(--o, 1);
    transform: none;
    filter: none;
  }
}

@keyframes revealPulse {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.98);
    filter: blur(6px);
  }
  62% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
  80% {
    transform: scale(1.035);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes headlineFade {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------------- velo e fogli ---------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: overlayIn 0.28s ease both;
}

.sheet {
  position: fixed;
  z-index: 25;
  left: 50%;
  top: calc(max(clamp(16px, 2.4vh, 28px), env(safe-area-inset-top)) + clamp(56px, 6.2vw, 62px));
  width: min(92vw, 420px);
  max-height: calc(100dvh - 110px);
  overflow: auto;
  padding: 22px 18px 20px;
  border-radius: 28px;
  background: #fff;
  color: #111;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  transform: translateX(-50%);
  animation: menuIn 0.38s var(--ease) both;
}

.sheet[hidden],
.overlay[hidden] {
  display: none;
}

.sheet-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.sheet-link {
  position: relative;
  display: block;
  padding: 14px 8px 18px;
  border: 0;
  background: none;
  color: var(--nav-text);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.015em;
  text-align: center;
  text-decoration: none;
  opacity: 0;
  cursor: pointer;
  animation: linkIn 0.42s var(--ease) forwards;
  animation-delay: calc(0.06s + var(--i) * 0.05s);
}

.sheet-link:not(.is-active) {
  color: #6b6b6b;
}

.sheet-link.is-active::after {
  bottom: 8px;
}

.sheet-signin {
  display: block;
  margin-top: 10px;
  padding: 14px;
  border-radius: 999px;
  background: var(--pill-dark);
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  opacity: 0;
  animation: linkIn 0.42s var(--ease) forwards;
  animation-delay: calc(0.06s + var(--i) * 0.05s);
}

.sheet-funzioni {
  width: min(92vw, 520px);
  padding: 26px 26px 22px;
}

.sheet-funzioni h2 {
  margin: 0 32px 14px 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.sheet-funzioni ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ogni voce ha il suo punto d'inchiostro. */
.sheet-funzioni li {
  position: relative;
  padding: 10px 0 10px 22px;
  border-top: 1px solid #ececec;
  color: #2a2a2a;
  font-size: 14.5px;
  line-height: 1.45;
  opacity: 0;
  animation: linkIn 0.42s var(--ease) forwards;
  animation-delay: calc(0.08s + var(--i) * 0.045s);
}

.sheet-funzioni li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 17px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--stencil);
  box-shadow: 0 0 0 3px rgba(143, 122, 255, 0.18);
}

.sheet-nota {
  margin: 14px 0 0;
  color: #6b6b6b;
  font-size: 13px;
  line-height: 1.45;
}

.sheet-firma {
  margin: 8px 0 0;
  color: #8e8e8e;
  font-size: 12.5px;
}

.sheet-firma a {
  color: var(--stencil-scuro);
  text-decoration: none;
}

.sheet-chiudi {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f1f1f1;
  color: #111;
  cursor: pointer;
}

.sheet-chiudi:hover {
  background: #e6e6e6;
}

@keyframes overlayIn {
  from {
    opacity: 0;
  }
}

@keyframes menuIn {
  from {
    opacity: 0;
    transform: translate(-50%, -10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes linkIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------------- telefono ---------------- */

@media (max-width: 720px) {
  .nav,
  .header > .sign-in {
    display: none;
  }

  .header {
    justify-content: space-between;
    max-width: none;
  }

  .logo {
    width: 48px;
    height: 48px;
  }

  .burger {
    display: grid;
    place-content: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--pill-dark);
    box-shadow: var(--nav-shadow);
    cursor: pointer;
    transition: background 0.25s ease;
  }

  .burger span {
    display: block;
    width: 18px;
    height: 1.5px;
    border-radius: 1px;
    background: #fff;
    transition: transform 0.3s var(--ease), opacity 0.2s ease, background 0.25s ease;
  }

  .burger[aria-expanded="true"] {
    background: #fff;
  }

  .burger[aria-expanded="true"] span {
    background: #000;
  }

  .burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  .sheet {
    top: calc(max(clamp(16px, 2.4vh, 28px), env(safe-area-inset-top)) + 60px);
  }

  /* Il minimo di 28px lascia troppo vuoto sul telefono: il titolo
     cresce con lo schermo e si ferma dove riprende la misura desktop.
     Con -0,08em le lettere a puntini si toccano e «pensa» si legge
     «persa»: qui serve un po' d'aria. */
  .headline {
    font-size: clamp(28px, 8.6vw, 44px);
    letter-spacing: -0.05em;
    line-height: 1.05;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 18px;
  }

  /* Sul telefono lo stencil scende sulla curva della "pelle", appena
     sopra i numeri (margine della pagina + le due righe di numeri, che
     arrivano a 170px quando le etichette vanno a capo). La larghezza e'
     lo spazio tra il bottone (184px, centrato) e il bordo, cosi' non gli
     finisce mai sotto. In alto sparirebbe sul cielo chiaro. */
  .stencil {
    right: 16px;
    bottom: calc(max(clamp(16px, 2.4vh, 28px), env(safe-area-inset-bottom)) + 178px);
    width: clamp(44px, calc(50vw - 116px), 84px);
    opacity: 0.9;
  }
}

@media (max-width: 420px) {
  .trust {
    --trust-size: 34px;
  }

  .trust-pill {
    font-size: 12px;
  }

  .headline {
    letter-spacing: -0.06em;
    line-height: 1.04;
  }
}

@media (max-height: 700px) {
  .trust {
    margin-bottom: 12px;
  }

  .sub {
    margin-top: 10px;
    line-height: 1.45;
  }

  .cta {
    margin-top: 16px;
  }

  .stats {
    gap: 10px;
  }
}

/* Telefono in orizzontale e finestre basse: i numeri tornano su una
   riga e il titolo si misura sull'altezza, altrimenti il bottone finisce
   sopra i numeri e la riga dei soggetti sotto la testata. */
@media (max-height: 500px) {
  .trust {
    margin-bottom: 10px;
  }

  .headline {
    font-size: max(28px, min(6.2vw, 8vh));
  }

  .sub {
    margin-top: 8px;
  }

  .cta {
    margin-top: 12px;
  }

  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 0;
  }

  .stat {
    gap: 3px;
  }
}

@media (max-height: 500px) and (max-width: 720px) {
  /* Piu' largo, cosi' sta su due righe. */
  .sub {
    max-width: min(640px, 92%);
  }

  .stencil {
    bottom: calc(max(clamp(16px, 2.4vh, 28px), env(safe-area-inset-bottom)) + 80px);
    width: min(clamp(44px, calc(50vw - 116px), 84px), 18vh);
  }
}

/* Ancora piu' bassi: via la stella, che finirebbe sul testo, e i simboli
   sopra i numeri; poi la riga dei soggetti. La stella resta nascosta e
   non tolta, cosi' main.js ne misura i tratti come sempre. */
@media (max-height: 420px) {
  .stencil {
    visibility: hidden;
  }

  .stat-icon {
    display: none;
  }
}

@media (max-height: 360px) {
  .trust {
    display: none;
  }
}

/* ---------------- movimento ridotto ---------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .anim,
  .anim-pulse,
  .hl,
  .sheet-link,
  .sheet-signin,
  .sheet-funzioni li {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .sub {
    opacity: 0.8;
  }

  .sheet {
    transform: translateX(-50%);
  }

  .headline {
    color: #fff;
  }
}