/* =============================================================================
   TowerGuard Landing Page — main.css
   Costellazioni sempre visibili (canvas full viewport + grid soft).
   Layout denso, niente voids.
   Animazione: Lenis smooth-scroll + GSAP scroll-linked choreography.
   ============================================================================= */

:root {
  --color-bg: #06091A;
  --color-bg-2: #0B1430;
  --color-grad-start: #1E3A8A;
  --color-grad-end: #3B82F6;
  --color-accent: #67E8F9;
  --color-accent-2: #818CF8;
  --color-text: #F8FAFC;
  --color-text-muted: #B6C0D1;

  --glass-bg-opacity: 0.04;
  --glass-blur: 20px;
  --glass-border: 1px;
  --glass-radius: 22px;

  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@font-face { font-family: "Manrope";        src: url("../fonts/manrope-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope";        src: url("../fonts/manrope-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrainsmono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrainsmono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk";  src: url("../fonts/space-grotesk-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

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

/* Lenis takes over scroll: html.lenis disables native smooth scroll */
html.lenis, html.lenis body { height: auto; }
html.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* -----------------------------------------------------------------------------
   Background layers — fixed, ALWAYS VISIBLE
   ----------------------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -3;
  background:
    radial-gradient(900px 700px at 18% 22%, rgba(59, 130, 246, 0.30), transparent 65%),
    radial-gradient(800px 600px at 82% 75%, rgba(103, 232, 249, 0.20), transparent 60%),
    radial-gradient(700px 600px at 50% 105%, rgba(129, 140, 248, 0.22), transparent 60%),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-2) 100%);
  animation: bgShift 40s ease-in-out infinite alternate;
}

@keyframes bgShift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-30px, -20px, 0) scale(1.05); }
}

/* Mesh grid: soft, NO mask cut-out (so it stays visible everywhere) */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(103, 232, 249, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 232, 249, 0.05) 1px, transparent 1px);
  background-size: 70px 70px;
  background-position: center center;
  pointer-events: none;
  /* Soft top-bottom fade only, no center cut */
  mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* Particles canvas — always visible behind everything */
#bg-particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
}

main { position: relative; z-index: 1; }

/* -----------------------------------------------------------------------------
   Typography
   ----------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  margin: 0;
}
h1 {
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.04;
  background: linear-gradient(180deg, #FFFFFF 0%, #8FA4C0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero H1 split: brand "TowerGuard:" gigante + resto della frase su riga sotto.
   Il textContent dell'h1 resta 1:1 con HERO_H1 (Property 1 invariance). */
#hero h1 {
  background: none;
  -webkit-text-fill-color: initial;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 1.4vh, 18px);
  max-width: none;
}
.hero-brand {
  display: block;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 14vw, 12rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  background: linear-gradient(120deg, #67E8F9 0%, #3B82F6 35%, #818CF8 65%, #67E8F9 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(103, 232, 249, 0.45)) drop-shadow(0 4px 60px rgba(59, 130, 246, 0.35));
  animation: brandShimmer 6s ease-in-out infinite, brandPulse 4s ease-in-out infinite;
  position: relative;
  z-index: 2;
  white-space: nowrap;
  /* Su mobile riduciamo a una dimensione che entra anche su iPhone SE (320px) */
}
@media (max-width: 767px) {
  .hero-brand {
    font-size: 13vw;
    letter-spacing: -0.04em;
  }
}
@media (max-width: 380px) {
  .hero-brand {
    font-size: 12.5vw;
  }
}
.hero-rest {
  display: block;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: linear-gradient(180deg, #E2E8F0 0%, #94A3B8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  max-width: 24ch;
}
/* Il `:` di "TowerGuard:" e' parte di Approved_Copy (Property 1 lo richiede
   1:1 nel textContent dell'<h1>), ma visivamente non lo vogliamo. Lo
   inseriamo in un suo span e lo nascondiamo da display senza alterare il
   textContent. `font-size: 0` lo collassa, `position: absolute` ne rimuove
   l'impatto sul layout, `aria-hidden` lo esclude dagli screen-reader. */
.hero-colon {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
@keyframes brandShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes brandPulse {
  0%, 100% {
    filter: drop-shadow(0 0 30px rgba(103, 232, 249, 0.45)) drop-shadow(0 4px 60px rgba(59, 130, 246, 0.35));
  }
  50% {
    filter: drop-shadow(0 0 50px rgba(103, 232, 249, 0.7)) drop-shadow(0 4px 90px rgba(59, 130, 246, 0.55));
  }
}
h2 {
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.8rem);
  line-height: 1.15;
}
h3 {
  font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.3;
  color: var(--color-text);
}
strong, b { font-family: var(--font-body); font-weight: 500; color: var(--color-accent); }
p {
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 70ch;
  margin: 0;
}

/* -----------------------------------------------------------------------------
   Layout — DENSE: padding aggressively reduced
   ----------------------------------------------------------------------------- */
main > section {
  width: 100%;
  max-width: clamp(1180px, 90vw, 1360px);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
  padding-block: clamp(72px, 7vh, 110px);
  position: relative;
}
@media (max-width: 1023px) { main > section { padding-block: clamp(56px, 6vh, 80px); } }
@media (max-width: 767px)  { main > section { padding-block: clamp(48px, 9vw, 64px); } }

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
}
.section-tag::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--color-accent);
}

/* -----------------------------------------------------------------------------
   Hero — full-bleed (no rectangle border), contenuto centrato in container
   ----------------------------------------------------------------------------- */
#hero {
  /* override del max-width applicato a `main > section`: hero deve riempire
     tutta la viewport orizzontalmente per non creare un rettangolo visibile. */
  max-width: none;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: 0;
  min-height: clamp(560px, 88vh, 880px);
  display: flex;
  align-items: center;
  padding-block: 0;
  /* NIENTE overflow: hidden — i glow degli orb devono poter sfumare fuori
     dalla section senza che si veda il bordo di clipping. Il clipping
     orizzontale e' gestito da body { overflow-x: hidden }. */
  position: relative;
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: clamp(1180px, 90vw, 1360px);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vh, 26px);
}
#hero .subtitle {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 60ch;
}
#hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }

/* Scroll cue */
.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 36px;
  border: 1.5px solid rgba(103, 232, 249, 0.5);
  border-radius: 12px;
  z-index: 2;
}
.scroll-cue span {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 3px;
  animation: scrollCue 2s ease-in-out infinite;
}
@keyframes scrollCue {
  0%   { transform: translate(-50%, 0); opacity: 1; }
  60%  { transform: translate(-50%, 12px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 0; }
}

/* -----------------------------------------------------------------------------
   Panoramica — 2 cards, FULL WIDTH no glow void
   ----------------------------------------------------------------------------- */
#panoramica {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.5vw, 32px);
}
#panoramica article {
  position: relative;
  padding: clamp(28px, 3vw, 44px);
  border-radius: var(--glass-radius);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--color-grad-start) 18%, transparent),
      color-mix(in srgb, var(--color-grad-end) 6%, transparent)),
    rgba(255, 255, 255, var(--glass-bg-opacity));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border) solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.3);
  /* `overflow: hidden` rompe il rendering 3D dei figli con
     transform-style: preserve-3d, quindi non lo applichiamo. */
}
#panoramica article::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
}
#panoramica article h2 {
  margin: 8px 0 12px 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #B6C0D1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 1023px) { #panoramica { grid-template-columns: 1fr; } }

/* -----------------------------------------------------------------------------
   Vantaggi — 3x2 grid, denser
   ----------------------------------------------------------------------------- */
.section-head {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.section-head h2 { max-width: 22ch; }

#vantaggi .panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  perspective: 1200px;
}
@media (max-width: 1023px) { #vantaggi .panels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { #vantaggi .panels { grid-template-columns: 1fr; } }

.glass-panel {
  position: relative;
  padding: clamp(24px, 2.6vw, 32px);
  border-radius: var(--glass-radius);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--color-grad-start) 22%, transparent),
      color-mix(in srgb, var(--color-grad-end) 8%, transparent)),
    rgba(255, 255, 255, var(--glass-bg-opacity));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border) solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 280ms ease, border-color 280ms ease;
  will-change: transform;
  counter-increment: panel;
  min-height: 220px;
}
#vantaggi .panels { counter-reset: panel; }

.glass-panel::before {
  content: counter(panel, decimal-leading-zero);
  position: absolute;
  top: 18px; right: 22px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--color-accent);
  opacity: 0.75;
  letter-spacing: 0.1em;
}
.glass-panel::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.55), transparent);
}
.glass-panel .panel-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(103, 232, 249, 0.18),
    transparent 50%
  );
  opacity: 0;
  transition: opacity 280ms ease;
}
.glass-panel:hover {
  box-shadow: 0 24px 64px rgba(59, 130, 246, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border-color: rgba(103, 232, 249, 0.22);
}
.glass-panel:hover .panel-glow { opacity: 1; }
.glass-panel h3 { margin: 6px 0 10px 0; }
.glass-panel p  { color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.6; }

/* -----------------------------------------------------------------------------
   Chiusura — text full width, niente blob a destra che lascia void
   ----------------------------------------------------------------------------- */
#chiusura {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#chiusura h2 {
  max-width: 18ch;
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
#chiusura p { max-width: 78ch; }

/* -----------------------------------------------------------------------------
   CTA
   ----------------------------------------------------------------------------- */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 44px;
  min-height: 48px;
  padding-inline: 28px;
  padding-block: 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms ease, background 220ms ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.cta--primary {
  background: linear-gradient(135deg, var(--color-grad-start), var(--color-grad-end));
  color: var(--color-text);
  border: 1px solid rgba(103, 232, 249, 0.35);
  box-shadow: 0 10px 40px rgba(59, 130, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.cta--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 600ms cubic-bezier(.2,.7,.2,1);
}
.cta--primary:hover, .cta--primary:focus-visible {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 16px 50px rgba(59, 130, 246, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.cta--primary:hover::before, .cta--primary:focus-visible::before { transform: translateX(100%); }

.cta--secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-accent);
  border: 1px solid rgba(103, 232, 249, 0.32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.cta--secondary:hover, .cta--secondary:focus-visible {
  transform: translateY(-2px) scale(1.02);
  background: rgba(103, 232, 249, 0.10);
  border-color: rgba(103, 232, 249, 0.6);
}
.cta::after {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 220ms ease;
  position: relative;
  z-index: 1;
}
.cta:hover::after, .cta:focus-visible::after { transform: translateX(4px); }
.cta--secondary[href^="#"]::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 13l7 7 7-7'/></svg>");
}
.cta--secondary[href^="#"]:hover::after, .cta--secondary[href^="#"]:focus-visible::after { transform: translateY(4px); }

/* -----------------------------------------------------------------------------
   Focus + reduced-motion
   ----------------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 6px; }

.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  animation-duration: 50ms !important;
  transition-duration: 50ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}
.no-anim section[data-reveal], .no-anim .glass-panel {
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 50ms !important;
    transition-duration: 50ms !important;
    animation-iteration-count: 1 !important;
  }
  html { scroll-behavior: auto; }
  #bg-particles { display: none; }
  body::before { animation: none; }
  .scroll-cue span { animation: none; }
}

/* -----------------------------------------------------------------------------
   Soft accent orbs — small and pinned to corners (NOT big void areas)
   ----------------------------------------------------------------------------- */
.accent-orb {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(40px);
  z-index: 0;
  width: clamp(180px, 22vw, 320px);
  aspect-ratio: 1;
  opacity: 0.7;
}
.accent-orb--cyan  { background: radial-gradient(circle, rgba(103, 232, 249, 0.5), transparent 70%); }
.accent-orb--blue  { background: radial-gradient(circle, rgba(59, 130, 246, 0.55), transparent 70%); }
.accent-orb--indigo { background: radial-gradient(circle, rgba(129, 140, 248, 0.5), transparent 70%); }

main > section > * { position: relative; z-index: 1; }

/* -----------------------------------------------------------------------------
   Footer — sits AT THE BOTTOM, no orphan space below it
   ----------------------------------------------------------------------------- */
body { display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
#footer { flex-shrink: 0; }

#footer {
  width: 100%;
  max-width: clamp(1180px, 90vw, 1360px);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
  padding-block: clamp(40px, 5vh, 64px);
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: clamp(32px, 5vh, 56px);
  position: relative;
  z-index: 1;
}
.footer-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 32px;
  align-items: center;
  width: 100%;
}
@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }
}
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col--brand { align-items: flex-start; }
.footer-col--contacts a,
.footer-col--policies a {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 200ms ease;
}
.footer-col--contacts a:hover,
.footer-col--policies a:hover,
.footer-col--contacts a:focus-visible,
.footer-col--policies a:focus-visible {
  color: var(--color-accent);
}
.footer-col--policies { align-items: flex-end; }
@media (max-width: 767px) {
  .footer-col--brand,
  .footer-col--policies { align-items: center; }
}
#footer img { width: clamp(110px, 11vw, 150px); height: auto; opacity: 0.85; }
.footer-copyright {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  font-family: var(--font-body);
}
.footer-legal {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
  opacity: 0.7;
  font-family: var(--font-body);
  max-width: none;
}

/* -----------------------------------------------------------------------------
   404
   ----------------------------------------------------------------------------- */
.page-404 main { min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.page-404 #not-found { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 60px 24px; }
.page-404 #not-found h1 { font-size: clamp(96px, 18vw, 200px); line-height: 1; margin: 0; }
.page-404 #not-found .subtitle { font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--color-text-muted); margin-bottom: 12px; }


/* =============================================================================
   Hero wireframe orbital decoration (right side, desktop only)
   ============================================================================= */
.hero-wireframe {
  position: absolute;
  top: 75%;
  right: 16%;
  transform: translateY(-50%);
  width: clamp(280px, 30vw, 420px);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  overflow: visible;
}
.hero-wireframe svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 30px rgba(103, 232, 249, 0.25));
}
.hero-wireframe .hw-orbit {
  transform-origin: 200px 200px;
  /* `transform-box: view-box` (default su SVG) usa il viewBox come riferimento.
     `fill-box` sul <g> dipende dal bbox del singolo elemento e crea il
     "salto" che vedevi. Forziamo view-box per coerenza. */
  transform-box: view-box;
}
.hero-wireframe .hw-orbit--outer { animation: hwSpin 28s linear infinite; }
.hero-wireframe .hw-orbit--mid   { animation: hwSpin 18s linear infinite reverse; }
.hero-wireframe .hw-orbit--inner { animation: hwSpin 12s linear infinite; }
.hero-wireframe .hw-pulse {
  transform-origin: 200px 200px;
  transform-box: view-box;
  animation: hwPulse 3s ease-in-out infinite;
}
@keyframes hwSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes hwPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.05; transform: scale(1.15); }
}
@media (max-width: 1023px) { .hero-wireframe { display: none; } }

/* (rimossa regola duplicata `#hero { overflow: hidden }`: gia' applicata sopra) */

/* =============================================================================
   Contact CTA section — orbital rings around a single bold CTA
   ============================================================================= */
#contatto {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(80px, 10vh, 140px);
  min-height: clamp(420px, 50vh, 560px);
  position: relative;
}
.contact-card {
  position: relative;
  width: clamp(340px, 50vw, 520px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 40px rgba(59, 130, 246, 0.35));
}
.contact-ring {
  transform-origin: 200px 200px;
  transform-box: fill-box;
}
.contact-ring--a { animation: ringSpin 24s linear infinite; }
.contact-ring--b { animation: ringSpin 16s linear infinite reverse; }
.contact-ring--c { animation: ringSpin 10s linear infinite; }
.contact-dot {
  transform-origin: 200px 200px;
  transform-box: fill-box;
  filter: drop-shadow(0 0 8px #67E8F9);
  animation: ringSpin 24s linear infinite;
}
.contact-dot--b {
  animation: ringSpin 16s linear infinite reverse;
  filter: drop-shadow(0 0 8px #818CF8);
}
@keyframes ringSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.contact-card__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta--xl {
  font-size: 1.1rem;
  padding: 22px 48px;
  letter-spacing: 0.02em;
  box-shadow: 0 16px 60px rgba(59, 130, 246, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* =============================================================================
   Contact CTA — bottone disco moderno (NON eredita .cta default)
   ============================================================================= */
.cta-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 2.5vw, 2.3rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  width: clamp(220px, 26vw, 320px);
  height: clamp(220px, 26vw, 320px);
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    rgba(103, 232, 249, 0.30) 0%,
    rgba(59, 130, 246, 0.45) 30%,
    rgba(30, 58, 138, 0.55) 65%,
    rgba(6, 9, 26, 0.85) 100%
  );
  border: 1.5px solid rgba(103, 232, 249, 0.45);
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.1),
    0 0 60px rgba(59, 130, 246, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -50px 80px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  position: relative;
  cursor: pointer;
  transition:
    transform 400ms cubic-bezier(.2,.7,.2,1),
    box-shadow 400ms ease,
    border-color 400ms ease;
}
.cta-disc > span {
  position: relative;
  z-index: 2;
  pointer-events: none;
  text-align: center;
  line-height: 1.1;
}
.cta-disc::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px solid rgba(103, 232, 249, 0.18);
  pointer-events: none;
  transition: inset 400ms cubic-bezier(.2,.7,.2,1), border-color 400ms ease;
  z-index: 1;
}
.cta-disc:hover,
.cta-disc:focus-visible {
  transform: scale(1.04);
  border-color: rgba(103, 232, 249, 0.85);
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.3),
    0 0 90px rgba(103, 232, 249, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -50px 80px rgba(0, 0, 0, 0.5);
}
.cta-disc:hover::before,
.cta-disc:focus-visible::before {
  inset: 8%;
  border-color: rgba(103, 232, 249, 0.4);
}

/* =============================================================================
   Scroll progress indicator (right rail)
   ============================================================================= */
.scroll-progress {
  position: fixed;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  z-index: 5;
  pointer-events: none;
}
.scroll-progress__line {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(103, 232, 249, 0.3), transparent);
  transform: translateX(-50%);
}
.scroll-progress__nodes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
}
.scroll-progress__nodes li {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(103, 232, 249, 0.25);
  border: 1px solid rgba(103, 232, 249, 0.35);
  transition: transform 300ms ease, background 300ms ease, box-shadow 300ms ease;
}
.scroll-progress__nodes li.is-active {
  background: var(--color-accent);
  transform: scale(1.6);
  box-shadow: 0 0 12px var(--color-accent);
}
@media (max-width: 1023px) {
  .scroll-progress { display: none; }
}


/* =============================================================================
   FONT PREVIEW BLOCK — rimosso (font scelto: Space Grotesk).
   ============================================================================= */


/* (override del default `.cta` non piu' necessario: il bottone contatto
   ora usa la classe dedicata `.cta-disc` che non eredita da `.cta`.) */


/* =============================================================================
   CSS SCROLL-DRIVEN ANIMATIONS
   Eseguite sul compositor thread, niente lavoro su main thread.
   Fallback browser non-supporting: lo stato finale dei @keyframes coincide
   con lo stato CSS di base, quindi gli elementi appaiono direttamente visibili.
   Specifica: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline
   ============================================================================= */

@supports (animation-timeline: view()) {
  /* Section reveal — fade + slide-up al primo enter in viewport. */
  @keyframes sectionReveal {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  main > section[data-reveal]:not(#hero) {
    animation: sectionReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }

  /* Hero content parallax — sale e scompare durante lo scroll. */
  @keyframes heroParallax {
    from { transform: translateY(0); opacity: 1; }
    to   { transform: translateY(-80px); opacity: 0.4; }
  }
  #hero .hero-content {
    animation: heroParallax linear both;
    animation-timeline: scroll();
    animation-range: 0 100vh;
  }
  @keyframes heroCueFade {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
  .scroll-cue {
    animation: heroCueFade linear both;
    animation-timeline: scroll();
    animation-range: 0 30vh;
  }

  /* Accent orbs — parallax stratificato, ognuno a velocità diversa. */
  @keyframes orbDrift1 {
    from { transform: translate3d(0, 60px, 0) scale(0.95); }
    to   { transform: translate3d(0, -120px, 0) scale(1.15); }
  }
  @keyframes orbDrift2 {
    from { transform: translate3d(0, 40px, 0) scale(0.95); }
    to   { transform: translate3d(0, -80px, 0) scale(1.10); }
  }
  @keyframes orbDrift3 {
    from { transform: translate3d(0, 80px, 0) scale(0.92); }
    to   { transform: translate3d(0, -160px, 0) scale(1.18); }
  }
  .accent-orb--cyan {
    animation: orbDrift1 linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  .accent-orb--blue {
    animation: orbDrift2 linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  .accent-orb--indigo {
    animation: orbDrift3 linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }

  /* Section-tag entry — slide-in da sinistra. */
  @keyframes tagSlideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  .section-tag {
    animation: tagSlideIn linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }

  /* Panoramica articles — 3D unfold più contenuto. */
  @keyframes panoramicaLifeLeft {
    0%   {
      opacity: 0;
      transform: perspective(1200px) rotateY(20deg) rotateX(-8deg) translateZ(-100px) translateX(-30px);
      filter: blur(8px);
    }
    40%  {
      opacity: 1;
      transform: perspective(1200px) rotateY(0) rotateX(0) translateZ(0) translateX(0);
      filter: blur(0);
    }
    75%  {
      opacity: 1;
      transform: perspective(1200px) rotateY(-1.5deg) rotateX(1deg) translateZ(10px) translateY(-10px);
      filter: blur(0);
    }
    100% {
      opacity: 1;
      transform: perspective(1200px) rotateY(0) rotateX(-2deg) translateZ(5px) translateY(12px);
      filter: blur(0);
    }
  }
  @keyframes panoramicaLifeRight {
    0%   {
      opacity: 0;
      transform: perspective(1200px) rotateY(-20deg) rotateX(-8deg) translateZ(-100px) translateX(30px);
      filter: blur(8px);
    }
    40%  {
      opacity: 1;
      transform: perspective(1200px) rotateY(0) rotateX(0) translateZ(0) translateX(0);
      filter: blur(0);
    }
    75%  {
      opacity: 1;
      transform: perspective(1200px) rotateY(1.5deg) rotateX(1deg) translateZ(10px) translateY(10px);
      filter: blur(0);
    }
    100% {
      opacity: 1;
      transform: perspective(1200px) rotateY(0) rotateX(-2deg) translateZ(5px) translateY(-12px);
      filter: blur(0);
    }
  }
  #panoramica article {
    animation-timeline: view();
    animation-fill-mode: both;
    animation-timing-function: linear;
    transform-style: preserve-3d;
    will-change: transform, opacity;
  }
  #panoramica article:nth-of-type(1) {
    animation-name: panoramicaLifeLeft;
    animation-range: cover 0% cover 100%;
  }
  #panoramica article:nth-of-type(2) {
    animation-name: panoramicaLifeRight;
    animation-range: cover 0% cover 100%;
  }
  #panoramica { perspective: 1600px; }

  /* Vantaggi panels — 3D unfold con direzione di entrata diversa per ognuno
     basata sulla posizione nella grid 3×2:
       row 1 (1,2,3): vengono dall'alto (rotateX negativo)
       row 2 (4,5,6): vengono dal basso (rotateX positivo)
       col 1 (1,4):   tilt da sinistra (rotateY negativo)
       col 2 (2,5):   nessun tilt orizzontale
       col 3 (3,6):   tilt da destra (rotateY positivo)
  */

  /* row 1 — dall'alto */
  @keyframes panel1 {
    0%   { opacity: 0; transform: perspective(1200px) rotateX(-25deg) rotateY(-10deg) translateZ(-100px) translate3d(-30px, -50px, 0) scale(0.88); filter: blur(8px); }
    35%  { opacity: 1; transform: perspective(1200px) rotateX(0) rotateY(0) translateZ(0) translate3d(0,0,0) scale(1); filter: blur(0); }
    70%  { opacity: 1; transform: perspective(1200px) rotateX(2deg) rotateY(-1deg) translateZ(8px) translateY(-12px) scale(1.02); filter: blur(0); }
    100% { opacity: 1; transform: perspective(1200px) rotateX(-2deg) rotateY(1deg) translateZ(0) translateY(10px) scale(1); filter: blur(0); }
  }
  @keyframes panel2 {
    0%   { opacity: 0; transform: perspective(1200px) rotateX(-25deg) rotateY(0) translateZ(-100px) translate3d(0, -50px, 0) scale(0.88); filter: blur(8px); }
    35%  { opacity: 1; transform: perspective(1200px) rotateX(0) rotateY(0) translateZ(0) translate3d(0,0,0) scale(1); filter: blur(0); }
    70%  { opacity: 1; transform: perspective(1200px) rotateX(3deg) rotateY(0) translateZ(10px) translateY(-15px) scale(1.02); filter: blur(0); }
    100% { opacity: 1; transform: perspective(1200px) rotateX(-3deg) rotateY(0) translateZ(0) translateY(12px) scale(1); filter: blur(0); }
  }
  @keyframes panel3 {
    0%   { opacity: 0; transform: perspective(1200px) rotateX(-25deg) rotateY(10deg) translateZ(-100px) translate3d(30px, -50px, 0) scale(0.88); filter: blur(8px); }
    35%  { opacity: 1; transform: perspective(1200px) rotateX(0) rotateY(0) translateZ(0) translate3d(0,0,0) scale(1); filter: blur(0); }
    70%  { opacity: 1; transform: perspective(1200px) rotateX(2deg) rotateY(1deg) translateZ(8px) translateY(-12px) scale(1.02); filter: blur(0); }
    100% { opacity: 1; transform: perspective(1200px) rotateX(-2deg) rotateY(-1deg) translateZ(0) translateY(10px) scale(1); filter: blur(0); }
  }
  /* row 2 — dal basso */
  @keyframes panel4 {
    0%   { opacity: 0; transform: perspective(1200px) rotateX(25deg) rotateY(-10deg) translateZ(-100px) translate3d(-30px, 50px, 0) scale(0.88); filter: blur(8px); }
    35%  { opacity: 1; transform: perspective(1200px) rotateX(0) rotateY(0) translateZ(0) translate3d(0,0,0) scale(1); filter: blur(0); }
    70%  { opacity: 1; transform: perspective(1200px) rotateX(-2deg) rotateY(-1deg) translateZ(8px) translateY(12px) scale(1.02); filter: blur(0); }
    100% { opacity: 1; transform: perspective(1200px) rotateX(2deg) rotateY(1deg) translateZ(0) translateY(-10px) scale(1); filter: blur(0); }
  }
  @keyframes panel5 {
    0%   { opacity: 0; transform: perspective(1200px) rotateX(25deg) rotateY(0) translateZ(-100px) translate3d(0, 50px, 0) scale(0.88); filter: blur(8px); }
    35%  { opacity: 1; transform: perspective(1200px) rotateX(0) rotateY(0) translateZ(0) translate3d(0,0,0) scale(1); filter: blur(0); }
    70%  { opacity: 1; transform: perspective(1200px) rotateX(-3deg) rotateY(0) translateZ(10px) translateY(15px) scale(1.02); filter: blur(0); }
    100% { opacity: 1; transform: perspective(1200px) rotateX(3deg) rotateY(0) translateZ(0) translateY(-12px) scale(1); filter: blur(0); }
  }
  @keyframes panel6 {
    0%   { opacity: 0; transform: perspective(1200px) rotateX(25deg) rotateY(10deg) translateZ(-100px) translate3d(30px, 50px, 0) scale(0.88); filter: blur(8px); }
    35%  { opacity: 1; transform: perspective(1200px) rotateX(0) rotateY(0) translateZ(0) translate3d(0,0,0) scale(1); filter: blur(0); }
    70%  { opacity: 1; transform: perspective(1200px) rotateX(-2deg) rotateY(1deg) translateZ(8px) translateY(12px) scale(1.02); filter: blur(0); }
    100% { opacity: 1; transform: perspective(1200px) rotateX(2deg) rotateY(-1deg) translateZ(0) translateY(-10px) scale(1); filter: blur(0); }
  }

  #vantaggi { perspective: 1600px; }
  #vantaggi .panels { perspective: 1600px; }
  #vantaggi .glass-panel {
    animation-timeline: view();
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-range: cover 0% cover 100%;
    transform-style: preserve-3d;
    will-change: transform, opacity;
  }
  #vantaggi .glass-panel:nth-of-type(1) { animation-name: panel1; }
  #vantaggi .glass-panel:nth-of-type(2) { animation-name: panel2; }
  #vantaggi .glass-panel:nth-of-type(3) { animation-name: panel3; }
  #vantaggi .glass-panel:nth-of-type(4) { animation-name: panel4; }
  #vantaggi .glass-panel:nth-of-type(5) { animation-name: panel5; }
  #vantaggi .glass-panel:nth-of-type(6) { animation-name: panel6; }

  /* Chiusura — i singoli figli entrano in stagger leggero. */
  @keyframes chiusuraIn {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  #chiusura > * {
    animation: chiusuraIn linear both;
    animation-timeline: view();
  }
  #chiusura > *:nth-child(1) { animation-range: entry 0%  entry 70%; }
  #chiusura > *:nth-child(2) { animation-range: entry 6%  entry 76%; }
  #chiusura > *:nth-child(3) { animation-range: entry 12% entry 82%; }
  #chiusura > *:nth-child(4) { animation-range: entry 18% entry 88%; }

  /* Contact card — scale-in. */
  @keyframes contactIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
  }
  .contact-card {
    animation: contactIn linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }

  /* Hero entrance — già pure CSS via animation-delay sul load, niente da fare */
}

/* Reduced motion: tutte le scroll animations sono ridotte a istantanee. */
@media (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: view()) {
    main > section[data-reveal]:not(#hero),
    #hero .hero-content,
    .scroll-cue,
    .accent-orb,
    .section-tag,
    #panoramica article,
    #vantaggi .glass-panel,
    #chiusura > *,
    .contact-card {
      animation: none !important;
    }
  }
}