/* ==========================================================================
   COSMORA · Componenti
   Ogni blocco corrisponde a un componente documentato in
   design-system/COMPONENTI.md. Convenzione: BEM (blocco__elemento--variante).
   Indice:
     1. Container            8. InfoCard
     2. AuroraBackground     9. EcosystemCard (+ Constellation)
     3. Navbar              10. ProcessStep
     4. Button              11. Input / TextArea (Field)
     5. HeroSection         12. ContactForm
     6. SectionTitle        13. Footer
     7. Section / Cards grid 14. Reveal (utility animata)
   ========================================================================== */


/* ==========================================================================
   1. Container
   ========================================================================== */
.container {
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - 2 * var(--gutter), var(--container-narrow));
}

.container--wide {
  width: min(100% - 2 * var(--gutter), var(--container-wide));
}


/* ==========================================================================
   2. AuroraBackground
   Cielo FERMO: nessuna reazione al mouse e nessuna animazione del fondo,
   a parte il lieve respiro delle stelle brillanti. Si muove solo con lo scroll,
   a velocità diverse per ogni livello (parallax).
   Livelli, dal più lontano: stelle far → mid-1 → mid-2 → mid-3 → near, più
   le stelle brillanti (sparks 1-3) e le tende aurorali.
   --k = velocità: px di spostamento per px di scroll.
   PRESTAZIONI: dove il browser lo supporta il parallax è una scroll-driven
   animation (gira sul compositor, senza JavaScript). Altrimenti main.js
   scrive --sy sul solo elemento .aurora. --travel (px di scroll totale) lo
   scrive main.js: serve a far arrivare i livelli alla fine della pagina.
   Le tende sono SVG con filtri (rumore + deformazione): raggi verticali,
   pieghe e bordo inferiore brillante. Filtri e gradienti stanno nello
   sprite SVG di index.html. Varianti: --calm · --contained
   ========================================================================== */
.aurora {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100lvh;
  z-index: var(--z-aurora);
  overflow: hidden;
  pointer-events: none;
  background: var(--gradient-night);
  contain: layout paint;
}

/* ---------- Stelle: tessere ripetute, ognuna con un leggero alone ---------- */
.aurora__stars {
  --k: 0.1;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + var(--travel, 0px) * var(--k));
  background-repeat: repeat;
  translate: 0 calc(var(--sy, 0) * var(--k) * -1px);
  will-change: transform;
}

.aurora__stars--far {
  --k: 0.05;
  background-size: 420px 420px;
  background-image:
    radial-gradient(4px 4px at 215px 222px, rgb(170 215 255 / 0.1), transparent 100%),
    radial-gradient(1px 1px at 215px 222px, rgb(170 215 255 / 0.74) 50%, transparent 100%),
    radial-gradient(4px 4px at 353px 226px, rgb(255 255 255 / 0.1), transparent 100%),
    radial-gradient(1px 1px at 353px 226px, rgb(255 255 255 / 0.71) 50%, transparent 100%),
    radial-gradient(4px 4px at 254px 190px, rgb(255 255 255 / 0.1), transparent 100%),
    radial-gradient(1px 1px at 254px 190px, rgb(255 255 255 / 0.84) 50%, transparent 100%),
    radial-gradient(4px 4px at 177px 279px, rgb(170 215 255 / 0.1), transparent 100%),
    radial-gradient(1px 1px at 177px 279px, rgb(170 215 255 / 0.56) 50%, transparent 100%),
    radial-gradient(4px 4px at 79px 119px, rgb(255 255 255 / 0.1), transparent 100%),
    radial-gradient(1px 1px at 79px 119px, rgb(255 255 255 / 0.65) 50%, transparent 100%),
    radial-gradient(4px 4px at 244px 58px, rgb(170 215 255 / 0.1), transparent 100%),
    radial-gradient(1px 1px at 244px 58px, rgb(170 215 255 / 0.73) 50%, transparent 100%),
    radial-gradient(4px 4px at 177px 350px, rgb(170 215 255 / 0.1), transparent 100%),
    radial-gradient(1px 1px at 177px 350px, rgb(170 215 255 / 0.81) 50%, transparent 100%),
    radial-gradient(4px 4px at 136px 260px, rgb(255 255 255 / 0.1), transparent 100%),
    radial-gradient(1px 1px at 136px 260px, rgb(255 255 255 / 0.52) 50%, transparent 100%),
    radial-gradient(4px 4px at 308px 405px, rgb(255 255 255 / 0.1), transparent 100%),
    radial-gradient(1px 1px at 308px 405px, rgb(255 255 255 / 0.56) 50%, transparent 100%),
    radial-gradient(4px 4px at 309px 148px, rgb(170 215 255 / 0.1), transparent 100%),
    radial-gradient(1px 1px at 309px 148px, rgb(170 215 255 / 0.73) 50%, transparent 100%),
    radial-gradient(4px 4px at 351px 64px, rgb(170 215 255 / 0.1), transparent 100%),
    radial-gradient(1px 1px at 351px 64px, rgb(170 215 255 / 0.83) 50%, transparent 100%),
    radial-gradient(4px 4px at 163px 16px, rgb(255 255 255 / 0.1), transparent 100%),
    radial-gradient(1px 1px at 163px 16px, rgb(255 255 255 / 0.84) 50%, transparent 100%),
    radial-gradient(4px 4px at 209px 221px, rgb(255 255 255 / 0.1), transparent 100%),
    radial-gradient(1px 1px at 209px 221px, rgb(255 255 255 / 0.70) 50%, transparent 100%),
    radial-gradient(4px 4px at 306px 42px, rgb(170 215 255 / 0.1), transparent 100%),
    radial-gradient(1px 1px at 306px 42px, rgb(170 215 255 / 0.52) 50%, transparent 100%),
    radial-gradient(4px 4px at 187px 265px, rgb(170 215 255 / 0.1), transparent 100%),
    radial-gradient(1px 1px at 187px 265px, rgb(170 215 255 / 0.67) 50%, transparent 100%),
    radial-gradient(4px 4px at 196px 150px, rgb(255 255 255 / 0.1), transparent 100%),
    radial-gradient(1px 1px at 196px 150px, rgb(255 255 255 / 0.79) 50%, transparent 100%);
}

.aurora__stars--mid-1 {
  --k: 0.08;
  background-size: 700px 700px;
  background-image:
    radial-gradient(7px 7px at 72px 56px, rgb(170 215 255 / 0.2), transparent 100%),
    radial-gradient(1.3px 1.3px at 72px 56px, rgb(170 215 255 / 0.67) 50%, transparent 100%),
    radial-gradient(7px 7px at 230px 155px, rgb(170 215 255 / 0.2), transparent 100%),
    radial-gradient(1.3px 1.3px at 230px 155px, rgb(170 215 255 / 0.93) 50%, transparent 100%),
    radial-gradient(7px 7px at 572px 15px, rgb(185 255 225 / 0.2), transparent 100%),
    radial-gradient(1.3px 1.3px at 572px 15px, rgb(185 255 225 / 0.63) 50%, transparent 100%),
    radial-gradient(7px 7px at 68px 681px, rgb(185 255 225 / 0.2), transparent 100%),
    radial-gradient(1.3px 1.3px at 68px 681px, rgb(185 255 225 / 0.74) 50%, transparent 100%),
    radial-gradient(7px 7px at 515px 47px, rgb(170 215 255 / 0.2), transparent 100%),
    radial-gradient(1.3px 1.3px at 515px 47px, rgb(170 215 255 / 0.81) 50%, transparent 100%);
}

.aurora__stars--mid-2 {
  --k: 0.12;
  background-size: 820px 820px;
  background-image:
    radial-gradient(8px 8px at 423px 808px, rgb(255 255 255 / 0.24), transparent 100%),
    radial-gradient(1.5px 1.5px at 423px 808px, rgb(255 255 255 / 0.85) 50%, transparent 100%),
    radial-gradient(8px 8px at 168px 481px, rgb(255 255 255 / 0.24), transparent 100%),
    radial-gradient(1.5px 1.5px at 168px 481px, rgb(255 255 255 / 0.93) 50%, transparent 100%),
    radial-gradient(8px 8px at 521px 407px, rgb(205 190 255 / 0.24), transparent 100%),
    radial-gradient(1.5px 1.5px at 521px 407px, rgb(205 190 255 / 0.87) 50%, transparent 100%),
    radial-gradient(8px 8px at 188px 606px, rgb(170 215 255 / 0.24), transparent 100%),
    radial-gradient(1.5px 1.5px at 188px 606px, rgb(170 215 255 / 0.90) 50%, transparent 100%),
    radial-gradient(8px 8px at 779px 192px, rgb(205 190 255 / 0.24), transparent 100%),
    radial-gradient(1.5px 1.5px at 779px 192px, rgb(205 190 255 / 0.85) 50%, transparent 100%);
}

.aurora__stars--mid-3 {
  --k: 0.16;
  background-size: 940px 940px;
  background-image:
    radial-gradient(9px 9px at 354px 567px, rgb(205 190 255 / 0.28), transparent 100%),
    radial-gradient(1.7px 1.7px at 354px 567px, rgb(205 190 255 / 0.60) 50%, transparent 100%),
    radial-gradient(9px 9px at 478px 203px, rgb(255 215 185 / 0.28), transparent 100%),
    radial-gradient(1.7px 1.7px at 478px 203px, rgb(255 215 185 / 0.89) 50%, transparent 100%),
    radial-gradient(9px 9px at 29px 166px, rgb(205 190 255 / 0.28), transparent 100%),
    radial-gradient(1.7px 1.7px at 29px 166px, rgb(205 190 255 / 0.82) 50%, transparent 100%),
    radial-gradient(9px 9px at 517px 245px, rgb(255 215 185 / 0.28), transparent 100%),
    radial-gradient(1.7px 1.7px at 517px 245px, rgb(255 215 185 / 0.90) 50%, transparent 100%);
}

.aurora__stars--near {
  --k: 0.2;
  background-size: 640px 640px;
  background-image:
    radial-gradient(7px 7px at 350px 450px, rgb(185 255 225 / 0.18), transparent 100%),
    radial-gradient(1.7px 1.7px at 350px 450px, rgb(185 255 225 / 0.95) 50%, transparent 100%),
    radial-gradient(7px 7px at 36px 134px, rgb(255 215 185 / 0.18), transparent 100%),
    radial-gradient(1.7px 1.7px at 36px 134px, rgb(255 215 185 / 0.88) 50%, transparent 100%),
    radial-gradient(7px 7px at 253px 332px, rgb(205 190 255 / 0.18), transparent 100%),
    radial-gradient(1.7px 1.7px at 253px 332px, rgb(205 190 255 / 0.93) 50%, transparent 100%),
    radial-gradient(7px 7px at 465px 257px, rgb(205 190 255 / 0.18), transparent 100%),
    radial-gradient(1.7px 1.7px at 465px 257px, rgb(205 190 255 / 0.88) 50%, transparent 100%),
    radial-gradient(7px 7px at 538px 307px, rgb(255 215 185 / 0.18), transparent 100%),
    radial-gradient(1.7px 1.7px at 538px 307px, rgb(255 215 185 / 0.97) 50%, transparent 100%),
    radial-gradient(7px 7px at 592px 392px, rgb(185 255 225 / 0.18), transparent 100%),
    radial-gradient(1.7px 1.7px at 592px 392px, rgb(185 255 225 / 0.84) 50%, transparent 100%),
    radial-gradient(7px 7px at 17px 97px, rgb(185 255 225 / 0.18), transparent 100%),
    radial-gradient(1.7px 1.7px at 17px 97px, rgb(185 255 225 / 0.96) 50%, transparent 100%),
    radial-gradient(7px 7px at 427px 143px, rgb(205 190 255 / 0.18), transparent 100%),
    radial-gradient(1.7px 1.7px at 427px 143px, rgb(205 190 255 / 0.97) 50%, transparent 100%);
}

/* ---------- Stelle brillanti ----------
   Elementi veri (non texture), generati nel markup: un puntino con un alone
   che respira (si ingrandisce e rimpicciolisce appena). Poche, con
   .spark--cross, emettono ogni tanto un bagliore a forma di "+".
   Solo transform e opacity: girano sul compositor.
   Variabili per stella: --c colore RGB · --halo diametro dell'alone ·
   --dur durata del respiro · --dl sfasamento · --flare e --xdur (croce). */
.aurora__sparks {
  --k: 0.1;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + var(--travel, 0px) * var(--k));
  translate: 0 calc(var(--sy, 0) * var(--k) * -1px);
  will-change: transform;
}

.aurora__sparks--1 { --k: 0.07; }
.aurora__sparks--2 { --k: 0.13; }
.aurora__sparks--3 { --k: 0.18; }

.spark {
  position: absolute;
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  border-radius: 50%;
  background: rgb(var(--c, 255 255 255) / 0.95);
}

.spark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--halo, 16px);
  height: var(--halo, 16px);
  margin: calc(var(--halo, 16px) / -2) 0 0 calc(var(--halo, 16px) / -2);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgb(var(--c, 255 255 255) / 0.55),
    rgb(var(--c, 255 255 255) / 0.16) 45%,
    transparent 100%
  );
  animation: spark-halo var(--dur, 5s) ease-in-out var(--dl, 0s) infinite alternate;
}

.spark--cross {
  width: 2.5px;
  height: 2.5px;
}

/* il bagliore a "+": due raggi sottili che si aprono dall'alone e svaniscono */
.spark--cross::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--flare, 44px);
  height: var(--flare, 44px);
  margin: calc(var(--flare, 44px) / -2) 0 0 calc(var(--flare, 44px) / -2);
  background:
    radial-gradient(closest-side, rgb(var(--c, 255 255 255) / 0.95), rgb(var(--c, 255 255 255) / 0.3) 38%, transparent 100%) center / 100% 2px no-repeat,
    radial-gradient(closest-side, rgb(var(--c, 255 255 255) / 0.95), rgb(var(--c, 255 255 255) / 0.3) 38%, transparent 100%) center / 2px 100% no-repeat;
  opacity: 0;
  animation: spark-cross var(--xdur, 7s) ease-in-out var(--dl, 0s) infinite;
}

@keyframes spark-halo {
  from { transform: scale(0.62); opacity: 0.45; }
  to   { transform: scale(1.22); opacity: 1; }
}

@keyframes spark-cross {
  0%, 52% { transform: scale(0.15); opacity: 0; }
  70%     { transform: scale(1); opacity: 0.95; }
  100%    { transform: scale(1.18); opacity: 0; }
}

/* ---------- Tende aurorali ----------
   top = --y0 + --k × --appear: la tenda è posizionata in modo da
   attraversare lo schermo quando lo scroll arriva a --appear. */
.aurora__curtain {
  --k: 0.22;
  --y0: 0px;
  --appear: 0px;
  position: absolute;
  left: 0;
  width: 100%;
  height: 70vh;
  top: calc(var(--y0) + var(--k) * var(--appear));
  translate: 0 calc(var(--sy, 0) * var(--k) * -1px);
  opacity: var(--o, 1);
  overflow: visible;
  will-change: transform;
}

.aurora__curtain--a { --k: 0.22; --y0: -30vh; --o: 0.92; }
.aurora__curtain--b { --k: 0.32; --y0: 100vh; --o: 0.8; }
.aurora__curtain--c { --k: 0.27; --y0: 150vh; --o: 0.8; }

/* ---------- Parallax nativo: scroll-driven animation (compositor) ---------- */
@keyframes aurora-parallax {
  from { translate: 0 0; }
  to   { translate: 0 calc(var(--travel, 0px) * var(--k) * -1); }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .aurora:not(.aurora--contained) .aurora__stars,
    .aurora:not(.aurora--contained) .aurora__sparks,
    .aurora:not(.aurora--contained) .aurora__curtain {
      animation: aurora-parallax linear both;
      animation-timeline: scroll(root block);
    }
  }
}

/* Velo scuro: bordi sempre più scuri + contrasto per il testo */
.aurora__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgb(2 3 8 / 0.94) 0%,
      rgb(2 3 8 / 0.5) clamp(1rem, 6vw, 7rem),
      transparent clamp(2.5rem, 22vw, 22rem),
      transparent calc(100% - clamp(2.5rem, 22vw, 22rem)),
      rgb(2 3 8 / 0.5) calc(100% - clamp(1rem, 6vw, 7rem)),
      rgb(2 3 8 / 0.94) 100%
    ),
    linear-gradient(180deg, rgb(2 3 8 / 0.5) 0%, transparent 16%, transparent 66%, rgb(2 3 8 / 0.5) 100%),
    radial-gradient(130% 90% at 50% 40%, transparent 55%, rgb(2 3 8 / 0.5) 100%);
}

/* Varianti */
.aurora--calm .aurora__curtain {
  opacity: calc(var(--o, 1) * 0.65);
}

.aurora--contained {
  position: absolute;
  height: 100%;
  z-index: 0;
}

.aurora--contained .aurora__stars,
.aurora--contained .aurora__sparks {
  height: 100%;
  translate: none;
}

.aurora--contained .aurora__curtain {
  top: 0;
  height: 100%;
  translate: none;
}

/* ==========================================================================
   3. Navbar · capsula flottante "Liquid Glass"
   Vetro trasparente con sfocatura e saturazione del fondo, riflessi
   speculari sui bordi e ombra morbida. Mobile (< 768px): il menu si apre
   dentro la capsula. Senza JS il menu resta sempre visibile.
   Stati: .is-open (menu aperto) · .is-scrolled (vetro appena più denso)
   ========================================================================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  padding-top: 0.75rem;
  pointer-events: none; /* solo la capsula riceve i clic */
}

.navbar__inner {
  --glass-tint: 0.26;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-4);
  min-height: 3.75rem;
  padding: 0.4rem 0.55rem 0.4rem 1.2rem;
  border-radius: 1.875rem;
  pointer-events: auto;
  /* vetro limpido: poco colore proprio, tanta luce sui bordi */
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.15), rgb(255 255 255 / 0.02) 38%, rgb(255 255 255 / 0) 60%, rgb(255 255 255 / 0.08)),
    rgb(10 16 40 / var(--glass-tint));
  -webkit-backdrop-filter: blur(6px) saturate(190%) brightness(1.12);
  backdrop-filter: blur(6px) saturate(190%) brightness(1.12);
  box-shadow:
    0 22px 48px -14px rgb(0 0 0 / 0.65),
    0 3px 10px rgb(0 0 0 / 0.35),
    inset 0 1.5px 0 rgb(255 255 255 / 0.7),
    inset 0 -1.5px 0 rgb(180 215 255 / 0.3),
    inset 2px 0 3px -1px rgb(255 255 255 / 0.4),
    inset -2px 0 3px -1px rgb(255 255 255 / 0.32),
    inset 0 0 32px rgb(255 255 255 / 0.09),
    inset 0 -12px 20px -12px rgb(170 210 255 / 0.4);
  transition: box-shadow var(--dur-base) var(--ease-soft);
}

/* Lente: dove il browser lo permette (Chromium) lo sfondo sotto la capsula
   viene rifratto: leggermente ingrandito al centro, curvato ai bordi.
   La mappa di spostamento è disegnata da main.js (initLens). */
.has-lens .navbar__inner {
  -webkit-backdrop-filter: url(#cosmora-lens) blur(1.5px) saturate(190%) brightness(1.12);
  backdrop-filter: url(#cosmora-lens) blur(1.5px) saturate(190%) brightness(1.12);
}

/* bordo speculare: luce intensa sugli angoli opposti, quasi nulla al centro */
.navbar__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(
    125deg,
    rgb(255 255 255 / 0.95),
    rgb(255 255 255 / 0.14) 28%,
    rgb(255 255 255 / 0.05) 62%,
    rgb(255 255 255 / 0.75)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* riflessi: goccia di luce in alto a sinistra e bagliore freddo in basso a destra */
.navbar__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(120% 160% at 14% -70%, rgb(255 255 255 / 0.36), transparent 56%),
    radial-gradient(70% 120% at 88% 175%, rgb(190 225 255 / 0.32), transparent 60%);
  pointer-events: none;
}

.navbar.is-scrolled .navbar__inner {
  --glass-tint: 0.34;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar__inner {
    background: color-mix(in srgb, var(--night-800) 90%, transparent);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .navbar__inner,
  .has-lens .navbar__inner {
    background: color-mix(in srgb, var(--night-800) 94%, transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--text-strong);
  text-decoration: none;
}

.navbar__brand svg {
  width: 2rem;
  height: 2rem;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--aurora-sky) 45%, transparent));
  transition: transform var(--dur-slow) var(--ease-out);
}

.navbar__brand:hover svg {
  transform: rotate(-18deg) scale(1.08);
}

.navbar__toggle {
  display: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: var(--border-width) solid rgb(255 255 255 / 0.28);
  border-radius: var(--radius-pill);
  background: linear-gradient(145deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.05));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}

.navbar__toggle:hover {
  border-color: rgb(255 255 255 / 0.5);
}

.navbar__toggle span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.1rem;
  height: 2px;
  margin: -1px 0 0 -0.55rem;
  border-radius: 2px;
  background: var(--text-strong);
  transition: transform var(--dur-base) var(--ease-soft), opacity var(--dur-fast) linear;
}

.navbar__toggle span:nth-child(1) { transform: translateY(-6px); }
.navbar__toggle span:nth-child(3) { transform: translateY(6px); }
.navbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.navbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

.navbar__menu {
  flex-basis: 100%;
  display: grid;
  grid-template-rows: 1fr;
}

.navbar__menu-inner {
  min-height: 0;
  overflow: hidden;
}

.navbar__list {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-3) var(--space-2);
}

.navbar__link {
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.5);
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  transition:
    color var(--dur-fast) var(--ease-soft),
    background-color var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-fast) var(--ease-soft);
}

.navbar__link:hover {
  color: var(--text-strong);
  background: rgb(255 255 255 / 0.1);
}

/* voce attiva: una piccola lente di vetro */
.navbar__link[aria-current="true"] {
  color: #fff;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.08));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    inset 0 -1px 0 rgb(255 255 255 / 0.1),
    0 0 0 1px rgb(255 255 255 / 0.14),
    0 4px 14px -4px rgb(0 0 0 / 0.4);
}

.navbar__cta {
  margin-block: var(--space-2) var(--space-3);
}

@media (max-width: 47.99em) {
  .js .navbar__toggle { display: inline-block; }

  .js .navbar__menu {
    grid-template-rows: 0fr;
    visibility: hidden;
    transition:
      grid-template-rows var(--dur-base) var(--ease-soft),
      visibility 0s linear var(--dur-base);
  }

  .js .navbar__menu.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
    transition-delay: 0s;
  }
}

@media (min-width: 48em) {
  .navbar__menu {
    flex-basis: auto;
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .navbar__menu-inner {
    overflow: visible;
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .navbar__list {
    display: flex;
    gap: var(--space-1);
    padding: 0;
  }

  .navbar__cta { margin: 0; }
}


/* ==========================================================================
   4. Button
   Varianti: --primary · --ghost   Misure: --sm · --lg   Modificatori: --block
   Stati: :hover, :focus-visible, :active, [disabled], [aria-busy="true"]
   ========================================================================== */
.btn {
  --btn-min-h: 3rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: var(--btn-min-h);
  padding: 0.7rem 1.6rem;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-soft),
    background-position var(--dur-slow) var(--ease-soft),
    background-color var(--dur-fast) var(--ease-soft),
    border-color var(--dur-fast) var(--ease-soft);
}

.btn svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover svg {
  transform: translateX(3px);
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  color: var(--text-on-aurora);
  background: var(--gradient-button);
  background-size: 220% 100%;
  background-position: 0% 0;
  box-shadow:
    0 10px 28px -10px color-mix(in srgb, var(--aurora-sky) 70%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 0.45);
}

.btn--primary:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow:
    0 16px 36px -10px color-mix(in srgb, var(--aurora-violet) 75%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 0.55);
}

.btn--primary:active {
  transform: translateY(0) scale(0.98);
}

.btn--ghost {
  color: var(--text-strong);
  background: var(--surface-glass);
  border-color: var(--border-strong);
}

.btn--ghost:hover {
  background: var(--surface-glass-hover);
  border-color: color-mix(in srgb, var(--aurora-sky) 70%, #fff);
  transform: translateY(-2px);
}

.btn--sm {
  --btn-min-h: 2.75rem;
  padding: 0.5rem 1.2rem;
  font-size: 0.9375rem;
}

.btn--lg {
  --btn-min-h: 3.4rem;
  padding: 0.85rem 2rem;
  font-size: 1.0625rem;
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.btn[aria-busy="true"] {
  cursor: progress;
  pointer-events: none;
}


/* ==========================================================================
   5. HeroSection
   Varianti: --center (testo centrato, senza orbita)
   Elementi: __art (decorazione, aria-hidden) __inner __eyebrow __title
             __subtitle __actions __scroll   +  .orbit (illustrazione)
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  padding-block: clamp(3rem, 8vw, 6rem) clamp(4.5rem, 9vw, 7rem);
}

.hero__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* alone scuro e morbido dietro il testo: l'aurora che passa sotto il titolo
   non ne riduce più il contrasto */
.hero__inner::before {
  content: "";
  position: absolute;
  inset: -3rem -1rem; /* non oltre la gutter minima: nessun overflow */
  z-index: -1;
  background: radial-gradient(closest-side, rgb(3 5 12 / 0.62), rgb(3 5 12 / 0.4) 55%, transparent 100%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  max-width: 44rem;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 1rem 0.4rem 0.8rem;
  border: var(--border-width) solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--night-900) 55%, transparent);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text);
}

.hero__eyebrow svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* Il titolo non deve mai uscire dal viewport né perdere lettere:
   corpo fluido con clamp(), a capo anche a metà parola solo come ultima
   risorsa (overflow-wrap), padding extra per i corsivi con gradiente. */
.hero__title {
  max-width: 100%;
  font-size: var(--fs-hero);
  line-height: 1.06;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

.hero__title em {
  font-style: italic;
  padding: 0 0.1em 0.14em;
  margin: 0 -0.1em -0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (forced-colors: active) {
  .hero__title em {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
  }
}

.hero__subtitle {
  max-width: 38em;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
}

/* freccia centrale: semitrasparente, ferma */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  color: #fff;
  opacity: 0.42;
  transition: opacity var(--dur-base) var(--ease-soft), translate var(--dur-base) var(--ease-out);
}

.hero__scroll svg {
  width: 1.9rem;
  height: 1.9rem;
}

.hero__scroll:hover {
  opacity: 0.9;
  translate: -50% 4px;
}

.hero--center .hero__inner {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.hero--center .hero__actions {
  justify-content: center;
}

@media (max-width: 29.99em) {
  .hero__actions { width: 100%; }
  .hero__actions .btn { width: 100%; }
}

/* ---------- Orbit · illustrazione del cuore di Cosmora ---------- */
.orbit {
  --size: 22rem;
  position: absolute;
  top: 3%;
  right: calc(var(--size) * -0.34);
  width: var(--size);
  aspect-ratio: 1;
  opacity: 0.32;
}

.orbit__core {
  position: absolute;
  inset: 27%;
  overflow: hidden;
  border-radius: 50%;
  background: var(--night-800);
  box-shadow: 0 0 90px 8px color-mix(in srgb, var(--aurora-violet) 38%, transparent);
  animation: orb-breathe 9s ease-in-out infinite alternate;
}

.orbit__core::before,
.orbit__core::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.orbit__core::before {
  inset: -30%;
  background:
    radial-gradient(45% 45% at 25% 72%, var(--aurora-emerald), transparent 70%),
    radial-gradient(45% 45% at 22% 24%, var(--aurora-sky), transparent 70%),
    radial-gradient(45% 45% at 74% 24%, var(--aurora-violet), transparent 70%),
    radial-gradient(45% 45% at 78% 76%, var(--aurora-magenta), transparent 70%),
    radial-gradient(35% 35% at 52% 94%, var(--aurora-peach), transparent 70%);
  animation: spin 50s linear infinite;
}

.orbit__core::after {
  inset: 0;
  background:
    radial-gradient(circle at 30% 24%, rgb(255 255 255 / 0.5), transparent 28%),
    radial-gradient(circle at 68% 76%, transparent 38%, rgb(3 5 12 / 0.6) 100%);
}

.orbit__ring {
  position: absolute;
  inset: var(--inset, 0);
  border: var(--border-width) solid rgb(255 255 255 / 0.16);
  border-radius: 50%;
  animation: spin var(--spin, 90s) linear infinite var(--dir, normal);
}

.orbit__ring::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--dot, var(--aurora-sky));
  box-shadow: 0 0 14px 3px var(--dot, var(--aurora-sky));
}

.orbit__ring:nth-of-type(1) { --inset: 0; --spin: 95s; --dot: var(--aurora-sky); }
.orbit__ring:nth-of-type(2) { --inset: 9%; --spin: 70s; --dir: reverse; --dot: var(--aurora-peach); }
.orbit__ring:nth-of-type(3) { --inset: 18%; --spin: 52s; --dot: var(--aurora-emerald); }

@media (min-width: 64em) {
  .orbit {
    --size: min(40vw, 34rem);
    top: 50%;
    right: 3%;
    margin-top: calc(var(--size) / -2);
    opacity: 1;
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes orb-breathe {
  from { transform: scale(0.97); }
  to   { transform: scale(1.03); }
}


/* ==========================================================================
   6. SectionTitle
   Varianti: --center
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: #7ee8d2;
}

.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-aurora);
}

.section-title {
  text-shadow: 0 1px 18px rgb(3 5 12 / 0.7);
  display: grid;
  gap: var(--space-4);
  max-width: 42rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section-title__eyebrow {
  justify-self: start;
}

.section-title__heading {
  font-size: var(--fs-h2);
}

.section-title__lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text);
}

.section-title--center {
  margin-inline: auto;
  text-align: center;
}

.section-title--center .section-title__eyebrow {
  justify-self: center;
}


/* ==========================================================================
   7. Section + griglia di card
   ========================================================================== */
.section {
  position: relative;
  padding-block: var(--section-y);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-5);
}

.cards-grid > * {
  min-width: 0;
}


/* ==========================================================================
   Superficie "glass" condivisa da InfoCard, EcosystemCard, ContactForm,
   ProcessStep__body: vetro scuro con bordo sfumato.
   ========================================================================== */
.info-card,
.eco-card,
.contact-form,
.process-step__body {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.025)),
    color-mix(in srgb, var(--night-900) 74%, transparent);
  box-shadow: var(--shadow-md);
}

.info-card::before,
.eco-card::before,
.contact-form::before,
.process-step__body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: var(--border-width);
  border-radius: inherit;
  background: var(--gradient-border);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}


/* ==========================================================================
   8. InfoCard
   Varianti colore: --emerald (default) · --sky · --violet · --rose
   ========================================================================== */
.info-card {
  --card-accent: var(--aurora-emerald);
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: clamp(1.4rem, 4vw, 2rem);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-soft);
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow:
    var(--shadow-lg),
    0 0 44px -14px color-mix(in srgb, var(--card-accent) 70%, transparent);
}

.info-card--emerald { --card-accent: var(--aurora-emerald); }
.info-card--sky    { --card-accent: var(--aurora-sky); }
.info-card--violet { --card-accent: var(--aurora-violet); }
.info-card--rose   { --card-accent: var(--aurora-rose); }

.info-card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--card-accent);
  background: color-mix(in srgb, var(--card-accent) 14%, transparent);
  box-shadow: inset 0 0 0 var(--border-width) color-mix(in srgb, var(--card-accent) 38%, transparent);
  transition: transform var(--dur-slow) var(--ease-out);
}

.info-card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.info-card:hover .info-card__icon {
  transform: rotate(-8deg) scale(1.08);
}

.info-card__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

.info-card__text {
  color: var(--text-muted);
}


/* ==========================================================================
   9. EcosystemCard  (+ Constellation, la galassia a punti)
   Varianti colore: --emerald · --sky · --violet · --magenta · --peach
   Variante --open: invito "la prossima stella" (bordo tratteggiato)
   Le card sono volutamente NON cliccabili: niente link ai prodotti.
   ========================================================================== */
.eco-card {
  --card-accent: var(--aurora-emerald);
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: clamp(1.4rem, 4vw, 1.9rem);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-soft);
}

.eco-card:hover {
  transform: translateY(-5px);
  box-shadow:
    var(--shadow-lg),
    0 0 48px -14px color-mix(in srgb, var(--card-accent) 75%, transparent);
}

/* --card-accent: colore della costellazione; --word-*: sfumatura della parola "costellazione" */
.eco-card--emerald { --card-accent: var(--aurora-emerald); --word-a: #b6ffdf; --word-b: #34d399; --word-c: #2dd4bf; }
.eco-card--sky     { --card-accent: var(--aurora-sky);     --word-a: #b8e8ff; --word-b: #38bdf8; --word-c: #6f93ff; }
.eco-card--violet  { --card-accent: var(--aurora-violet);  --word-a: #dccfff; --word-b: #9b7bff; --word-c: #6e7bff; }
.eco-card--magenta { --card-accent: var(--aurora-magenta); --word-a: #ffc2f6; --word-b: #e062f0; --word-c: #b86bff; }
.eco-card--peach   { --card-accent: var(--aurora-peach);   --word-a: #ffe6d2; --word-b: #ffb98f; --word-c: #fb7a8c; }

.eco-card__glyph {
  width: 7.5rem;
  height: auto;
  margin-bottom: var(--space-2);
  overflow: visible;
}

.eco-card__glyph polyline {
  fill: none;
  stroke: var(--card-accent);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
  transition: opacity var(--dur-base) var(--ease-soft);
}

.eco-card__glyph circle {
  fill: var(--card-accent);
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 4px var(--card-accent));
  transition: transform var(--dur-base) var(--ease-out);
}

.eco-card:hover .eco-card__glyph polyline {
  opacity: 1;
}

.eco-card:hover .eco-card__glyph circle {
  animation: glyph-pulse 1.8s ease-in-out infinite;
}

.eco-card:hover .eco-card__glyph circle:nth-of-type(2n) { animation-delay: -0.6s; }
.eco-card:hover .eco-card__glyph circle:nth-of-type(3n) { animation-delay: -1.2s; }

.eco-card__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

/* la parola "costellazione" prende i colori della sua costellazione */
.eco-card__word {
  background: linear-gradient(95deg, var(--word-a, #fff), var(--word-b, var(--card-accent)) 55%, var(--word-c, var(--card-accent)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (forced-colors: active) {
  .eco-card__word {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
  }
}

.eco-card__text {
  color: var(--text-muted);
}

.eco-card--open {
  --card-accent: var(--aurora-peach);
  background:
    radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--aurora-magenta) 14%, transparent), transparent 60%),
    color-mix(in srgb, var(--night-900) 40%, transparent);
}

.eco-card--open::before {
  background: none;
  -webkit-mask: none;
  mask: none;
  padding: 0;
  border: var(--border-width) dashed color-mix(in srgb, var(--aurora-peach) 55%, transparent);
}

@keyframes glyph-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.7); }
}

/* ---------- Constellation ---------- */
.constellation {
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 50%, color-mix(in srgb, var(--aurora-violet) 18%, transparent), transparent 70%),
    radial-gradient(40% 40% at 15% 20%, color-mix(in srgb, var(--aurora-emerald) 14%, transparent), transparent 70%),
    radial-gradient(40% 40% at 88% 80%, color-mix(in srgb, var(--aurora-magenta) 14%, transparent), transparent 70%),
    color-mix(in srgb, var(--night-950) 55%, transparent);
  box-shadow: inset 0 0 0 var(--border-width) var(--border-soft), var(--shadow-lg);
}

.constellation__sky {
  position: absolute;
  inset: 0;
}

.constellation__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.constellation__lines g {
  fill: none;
  stroke: var(--c);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
  filter: drop-shadow(0 0 3px var(--c));
}

.constellation__lines polyline {
  vector-effect: non-scaling-stroke;
}

.constellation__lines .is-link {
  stroke-dasharray: 3 6;
  opacity: 0.4;
}

.constellation__star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s, 8px);
  height: var(--s, 8px);
  margin: calc(var(--s, 8px) / -2) 0 0 calc(var(--s, 8px) / -2);
  border-radius: 50%;
  background: var(--c, #fff);
  box-shadow: 0 0 calc(var(--s, 8px) * 2) calc(var(--s, 8px) * 0.35) color-mix(in srgb, var(--c, #fff) 65%, transparent);
  animation: star-pulse 5s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}

.constellation__star--lg { --s: 12px; }
.constellation__star--sm { --s: 5px; }
.constellation__star--dust { --s: 3px; opacity: 0.7; }

.constellation__core {
  --s: 22px;
  background: radial-gradient(circle at 35% 30%, #fff, var(--aurora-sky) 55%, var(--aurora-violet));
  animation-duration: 6s;
}

.constellation__core::before,
.constellation__core::after {
  content: "";
  position: absolute;
  inset: -90%;
  border: var(--border-width) solid rgb(255 255 255 / 0.22);
  border-radius: 50%;
  animation: ring-out 6s ease-out infinite;
}

.constellation__core::after {
  animation-delay: -3s;
}

@media (min-width: 48em) {
  .constellation { aspect-ratio: 16 / 9; }
}

@media (min-width: 64em) {
  .constellation { aspect-ratio: 2 / 1; }
}

@keyframes star-pulse {
  from { opacity: 0.55; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1.12); }
}

@keyframes ring-out {
  from { transform: scale(0.4); opacity: 0.8; }
  to   { transform: scale(2.4); opacity: 0; }
}


/* ==========================================================================
   10. ProcessStep
   Elenco ordinato (<ol class="process">). Ogni numero è CENTRATO rispetto
   alla propria card: verticalmente su mobile (numero a sinistra, linea
   continua), orizzontalmente da lg (numero sopra la card, linea tra i numeri).
   ========================================================================== */
.process {
  --process-gap: var(--space-6);
  display: grid;
  gap: var(--process-gap);
}

.process-step {
  position: relative;
  min-width: 0;
  padding-left: 4.5rem;
}

.process-step__num {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-top: -1.625rem;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--text-strong);
  background:
    linear-gradient(var(--night-900), var(--night-900)) padding-box,
    var(--gradient-aurora) border-box;
  border: 2px solid transparent;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--night-950) 55%, transparent), var(--glow-sky);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-base) var(--ease-soft);
}

.process-step:hover .process-step__num {
  transform: scale(1.1);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--night-950) 55%, transparent), var(--glow-violet);
}

/* connettori verticali: mezza linea sopra e mezza sotto ogni numero */
.process-step:not(:first-child)::before,
.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1.625rem - 1px);
  width: 2px;
  opacity: 0.55;
}

.process-step:not(:first-child)::before {
  top: calc(var(--process-gap) * -1);
  bottom: calc(50% + 2rem);
  background: linear-gradient(to bottom, transparent, var(--aurora-sky));
}

.process-step:not(:last-child)::after {
  top: calc(50% + 2rem);
  bottom: calc(var(--process-gap) * -1);
  background: linear-gradient(to bottom, var(--aurora-violet), transparent);
}

.process-step__body {
  --card-accent: var(--aurora-violet);
  display: grid;
  align-content: start;
  gap: var(--space-2);
  height: 100%;
  padding: clamp(1.25rem, 3.5vw, 1.75rem);
}

.process-step__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

.process-step__text {
  color: var(--text-muted);
}

@media (min-width: 64em) {
  .process {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--process-gap);
  }

  .process-step {
    padding-left: 0;
    padding-top: 4.75rem;
  }

  /* numero centrato sopra la card */
  .process-step__num {
    top: 0;
    left: 50%;
    margin: 0 0 0 -1.625rem;
  }

  .process-step:not(:first-child)::before {
    display: none;
  }

  /* linea dal bordo di questo numero al bordo del successivo */
  .process-step:not(:last-child)::after {
    top: calc(1.625rem - 1px);
    bottom: auto;
    left: calc(50% + 2rem);
    width: calc(100% + var(--process-gap) - 4rem);
    height: 2px;
    background: linear-gradient(to right, var(--aurora-sky), var(--aurora-violet));
  }
}


/* ==========================================================================
   11. Input / TextArea  (dentro .field)
   Stati: :hover, :focus-visible, [aria-invalid="true"], [disabled]
   ========================================================================== */
.field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.field__label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-strong);
}

.field__optional {
  font-weight: 400;
  color: var(--text-muted);
}

.field__req {
  color: var(--aurora-peach);
}

.input,
.textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-field);
  color: var(--text-strong);
  font-size: 1rem; /* >= 16px: niente zoom automatico su iOS */
  line-height: 1.5;
  transition:
    border-color var(--dur-fast) var(--ease-soft),
    background-color var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-base) var(--ease-soft);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-faint);
}

.input:hover,
.textarea:hover {
  border-color: color-mix(in srgb, var(--aurora-sky) 60%, #fff);
}

.input:focus-visible,
.textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--focus-ring);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--night-950) 78%, transparent);
  box-shadow: var(--glow-sky);
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--aurora-rose);
}

.input[disabled],
.textarea[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.textarea {
  min-height: 9rem;
  resize: vertical;
}

.field__hint {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-error);
}

.field__error[hidden] {
  display: none;
}


/* ==========================================================================
   12. ContactForm
   Stati: .is-sent (invio riuscito) · [aria-busy="true"] (invio in corso)
   ========================================================================== */
.contact-form {
  --card-accent: var(--aurora-violet);
  container-type: inline-size;
  display: grid;
  gap: var(--space-5);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-lg), 0 0 80px -30px color-mix(in srgb, var(--aurora-violet) 60%, transparent);
}

.contact-form__row {
  display: grid;
  gap: var(--space-5);
}

@container (min-width: 30rem) {
  .contact-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.contact-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__actions {
  display: grid;
  gap: var(--space-3);
}

.contact-form__note {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.contact-form__status {
  min-height: 1.5em;
  font-weight: 500;
  color: var(--text-strong);
}

.contact-form__status:empty {
  display: none;
}

.contact-form__status.is-success {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-width) solid color-mix(in srgb, var(--aurora-emerald) 55%, transparent);
  background: color-mix(in srgb, var(--aurora-emerald) 12%, transparent);
}

.contact-form__status.is-error {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-width) solid color-mix(in srgb, var(--aurora-rose) 60%, transparent);
  background: color-mix(in srgb, var(--aurora-rose) 12%, transparent);
  color: var(--text-error);
}


/* ==========================================================================
   13. Footer
   ========================================================================== */
.footer {
  position: relative;
  padding-block: var(--space-7) var(--space-6);
  background: color-mix(in srgb, var(--night-950) 78%, transparent);
  color: var(--text-muted);
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--aurora-teal), var(--aurora-violet), var(--aurora-magenta), transparent);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-6);
}

.footer__brand {
  display: grid;
  gap: var(--space-2);
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--text-strong);
}

.footer__logo svg {
  width: 1.4rem;
  height: 1.4rem;
}

.footer__tagline {
  max-width: 26rem;
}

.footer__top {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-soft), background-color var(--dur-fast) var(--ease-soft);
}

.footer__top:hover {
  color: var(--text-strong);
  background: var(--surface-glass);
}

.footer__top svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur-base) var(--ease-out);
}

.footer__top:hover svg {
  transform: translateY(-3px);
}

.footer__legal {
  flex-basis: 100%;
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border-soft);
  font-size: var(--fs-small);
}


/* ==========================================================================
   14. Reveal · comparsa morbida allo scroll
   Attiva SOLO se main.js aggiunge .js-reveal a <html>: senza JS (o se
   qualcosa va storto) il contenuto resta sempre visibile.
   ========================================================================== */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0s),
    transform var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0s);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1;
    transform: none;
  }
}