/* ===========================================================
   Thomas Zorzetto — Crescita Digitale
   Custom styles on top of Tailwind (Play CDN)
   =========================================================== */

:root {
  --navy-950: #050b16;
  --navy-900: #081226;
  --navy-800: #0c1c38;
  --navy-700: #122a4d;
  --navy-600: #1a3a66;
  --navy-500: #244d84;
  --accent-300: #ffc27a;
  --accent-400: #ffab5c;
  --accent-500: #f5872e;
  --accent-600: #dd7017;
  --accent-glow: rgba(245, 135, 46, 0.45);
}

* { scrollbar-color: var(--accent-600) var(--navy-900); }

html {
  background: var(--navy-950);
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--navy-950);
  color: #e7edf7;
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
}

/* -------------------- Preloader -------------------- */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-950);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-logo {
  width: 72px;
  height: 72px;
  animation: preloader-pulse 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 18px var(--accent-glow));
}
@keyframes preloader-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.08); opacity: 1; }
}

/* -------------------- Background canvas -------------------- */
#bg-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------- Glass / cards -------------------- */
.glass-panel {
  background: linear-gradient(155deg, rgba(18, 42, 77, 0.55), rgba(8, 18, 38, 0.65));
  border: 1px solid rgba(255, 171, 92, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.service-card {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.service-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 171, 92, 0.55), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.service-card:hover::before { opacity: 1; }
.service-card:hover {
  box-shadow: 0 24px 60px -20px rgba(245, 135, 46, 0.35);
}
.service-card .card-glow {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: blur(8px);
}
.service-card:hover .card-glow { opacity: 0.85; }

/* -------------------- Buttons -------------------- */
.btn-magnetic {
  position: relative;
  display: inline-flex;
  isolation: isolate;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-400), var(--accent-600));
  box-shadow: 0 10px 30px -8px rgba(245, 135, 46, 0.55);
  transition: transform 0.35s cubic-bezier(.2,.9,.3,1.3), box-shadow 0.35s ease, opacity 0.3s ease;
}
.btn-primary:hover {
  box-shadow: 0 16px 40px -6px rgba(245, 135, 46, 0.7);
}
.btn-primary:disabled,
.btn-ghost:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

.btn-ghost {
  border: 1px solid rgba(231, 237, 247, 0.25);
  transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}
.btn-ghost:hover {
  border-color: var(--accent-400);
  background: rgba(255, 171, 92, 0.08);
}

/* -------------------- Nav -------------------- */
#navbar {
  transition: background-color 0.4s ease, border-color 0.4s ease, padding 0.4s ease;
  border-bottom: 1px solid transparent;
}
#navbar.is-scrolled {
  background: rgba(5, 11, 22, 0.82);
  border-color: rgba(255, 171, 92, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-link {
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -4px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-400), var(--accent-600));
  transition: right 0.35s ease;
}
.nav-link:hover::after,
.nav-link.is-active::after {
  right: 0;
}
.nav-link.is-active { color: var(--accent-400); }

/* -------------------- Hero -------------------- */
.hero-headline .word {
  display: inline-block;
  overflow: hidden;
}
.hero-headline .word span {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}
.gradient-text {
  background: linear-gradient(120deg, var(--accent-300), var(--accent-500) 55%, #ffe0b3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-orbit {
  position: absolute;
  border: 1px solid rgba(255, 171, 92, 0.15);
  border-radius: 999px;
}

.scroll-cue {
  animation: scroll-cue-bounce 2s ease-in-out infinite;
}
@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(10px); opacity: 1; }
}

/* -------------------- Portrait treatment -------------------- */
.portrait-frame {
  position: relative;
  isolation: isolate;
}
.portrait-frame img {
  filter: grayscale(0.35) contrast(1.08) saturate(0.9) brightness(0.92);
}
.portrait-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 30% 15%, transparent 35%, rgba(5, 11, 22, 0.55) 78%, rgba(5, 11, 22, 0.92) 100%),
    linear-gradient(200deg, rgba(245, 135, 46, 0.28), rgba(10, 24, 48, 0.65) 60%);
  mix-blend-mode: multiply;
}
.portrait-frame::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: inherit;
  background: conic-gradient(from 180deg, var(--accent-500), transparent 30%, transparent 70%, var(--accent-500));
  z-index: -1;
  opacity: 0.7;
  filter: blur(2px);
}

/* -------------------- Marquee -------------------- */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* -------------------- Form -------------------- */
.field {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(231, 237, 247, 0.15);
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.field:focus {
  outline: none;
  border-color: var(--accent-400);
  background: rgba(255, 171, 92, 0.05);
  box-shadow: 0 0 0 4px rgba(245, 135, 46, 0.12);
}
.field.field-error {
  border-color: #f87171;
}
.field-error-msg {
  display: none;
  color: #fca5a5;
}
.field-error + .field-error-msg,
.field.field-error ~ .field-error-msg {
  display: block;
}

.form-status {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* -------------------- Reveal animations -------------------- */
.reveal-up {
  opacity: 0;
  transform: translateY(48px);
}
.reveal-fade {
  opacity: 0;
}

/* -------------------- Cookie banner -------------------- */
#cookie-banner {
  transform: translateY(120%);
  transition: transform 0.6s cubic-bezier(.2,.9,.25,1);
}
#cookie-banner.is-visible {
  transform: translateY(0);
}

/* -------------------- Cursore razzo custom -------------------- */
html.has-custom-cursor,
html.has-custom-cursor * {
  cursor: none !important;
}

#cursor-rocket {
  position: fixed;
  top: 0; left: 0;
  width: 30px;
  height: 30px;
  pointer-events: none;
  z-index: 90;
  transform: translate(-50%, -50%) rotate(-45deg);
  opacity: 0;
  transition: opacity 0.3s ease;
  filter: drop-shadow(0 2px 8px rgba(245, 135, 46, 0.55));
  will-change: transform;
}
#cursor-rocket svg { width: 100%; height: 100%; display: block; }
#cursor-rocket.is-hovering {
  filter: drop-shadow(0 2px 16px rgba(245, 135, 46, 0.85));
}

.cursor-particle {
  position: fixed;
  top: 0; left: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 194, 122, 0.9), rgba(245, 135, 46, 0.25) 60%, transparent 75%);
  pointer-events: none;
  z-index: 89;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

@media (max-width: 767px), (pointer: coarse) {
  #cursor-rocket, .cursor-particle { display: none !important; }
  html.has-custom-cursor, html.has-custom-cursor * { cursor: auto !important; }
}

/* -------------------- Misc -------------------- */
.section-eyebrow {
  letter-spacing: 0.28em;
}

::selection {
  background: var(--accent-500);
  color: #0a1830;
}

.noscroll { overflow: hidden; }

/* ===========================================================
   v2 additions — hero scene, rotating text, chatbot, FAQ,
   timeline, floating actions, progress bar, micro-interazioni
   =========================================================== */

/* -------------------- Scroll progress bar -------------------- */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: 70;
  background: linear-gradient(90deg, var(--accent-500), var(--accent-300));
  box-shadow: 0 0 12px 1px var(--accent-glow);
  transition: width 0.1s linear;
}

/* -------------------- Rotating word -------------------- */
.rotating-word-wrap {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  height: 1.15em;
}
.rotating-word {
  display: inline-block;
}

/* -------------------- Logo navbar mobile: nome + "Crescita Digitale"
   che si alternano in dissolvenza (su desktop restano invece impilati,
   sempre visibili, senza animazione) -------------------- */
.nav-brand-mobile {
  position: relative;
  display: block;
  height: 1.2em;
  min-width: 128px;
}
.nav-brand-mobile-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
  opacity: 0;
  animation: nav-brand-cycle 4.4s ease-in-out infinite;
}
.nav-brand-mobile-text:nth-child(2) {
  animation-delay: -2.2s;
}
@keyframes nav-brand-cycle {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  44%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-brand-mobile-text { animation: none; opacity: 0; }
  .nav-brand-mobile-text:first-child { opacity: 1; }
}

/* -------------------- Hero scene: browser che si costruisce -------------------- */
.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-scene-mock {
  position: absolute;
  top: 50%;
  right: -4%;
  transform: translateY(-50%);
  width: min(640px, 62vw);
  aspect-ratio: 16 / 11;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(18, 42, 77, 0.5), rgba(6, 13, 26, 0.65));
  border: 1px solid rgba(255, 171, 92, 0.14);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6);
  opacity: 0.55;
  backdrop-filter: blur(2px);
}
.hero-scene-mock .mock-topbar,
.showcase-mock .mock-topbar {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hero-scene-mock .mock-dot,
.showcase-mock .mock-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255,171,92,0.35);
}
.hero-scene-mock .mock-urlbar,
.showcase-mock .mock-urlbar {
  margin-left: 10px;
  height: 12px;
  flex: 1;
  max-width: 220px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}
.hero-scene-mock .mock-body,
.showcase-mock .mock-body {
  position: relative;
  padding: 22px;
  height: calc(100% - 30px);
}
.hero-scene-mock .mock-block {
  position: absolute;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,171,92,0.22), rgba(255,171,92,0.06));
  border: 1px solid rgba(255,171,92,0.18);
  transform-origin: left top;
  opacity: 0;
}
.hero-scene-mock .mock-line {
  position: absolute;
  height: 8px;
  border-radius: 999px;
  background: rgba(231,237,247,0.14);
  opacity: 0;
}
.hero-scene-mock .mock-cursor {
  position: absolute;
  width: 16px;
  height: 16px;
  opacity: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  z-index: 5;
}

/* -------------------- Showcase scrollytelling -------------------- */
.showcase-pin-wrap {
  position: relative;
  height: 200vh;
}
.showcase-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.showcase-captions {
  position: relative;
}
.showcase-caption {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.showcase-visual {
  position: relative;
  aspect-ratio: 1;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
}
.showcase-orbit {
  position: absolute;
  inset: 6%;
  border: 1px solid rgba(255, 171, 92, 0.14);
  border-radius: 999px;
}
.showcase-orbit::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(255, 171, 92, 0.08);
  border-radius: 999px;
}
.showcase-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.showcase-idea-logo {
  filter: drop-shadow(0 0 50px rgba(245, 135, 46, 0.4));
}
.showcase-idea-bubble {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 26px 34px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(18, 42, 77, 0.6), rgba(6, 13, 26, 0.8));
  border: 1px solid rgba(255, 171, 92, 0.3);
  border-bottom-left-radius: 8px;
}
.showcase-idea-bubble span {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-400), var(--accent-600));
  animation: chat-typing-bounce 1.1s ease-in-out infinite;
}
.showcase-idea-bubble span:nth-child(2) { animation-delay: 0.15s; }
.showcase-idea-bubble span:nth-child(3) { animation-delay: 0.3s; }
.showcase-mock {
  width: 100%;
  aspect-ratio: 16 / 12;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(18, 42, 77, 0.55), rgba(6, 13, 26, 0.75));
  border: 1px solid rgba(255, 171, 92, 0.16);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6);
  overflow: hidden;
}
.showcase-block {
  position: absolute;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 171, 92, 0.3);
  background: rgba(255, 171, 92, 0);
}
.showcase-content-line {
  position: absolute;
  left: 10%;
  height: 10%;
  border-radius: 999px;
  background: rgba(255, 220, 176, 0.75);
  opacity: 0;
}
.showcase-content-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26%;
  height: 26%;
  transform: translate(-50%, -50%);
  stroke: rgba(255, 220, 176, 0.85);
  opacity: 0;
}
.showcase-launch-rocket {
  filter: drop-shadow(0 10px 30px rgba(245, 135, 46, 0.55));
}
.showcase-growth-card {
  position: absolute;
  bottom: 7%;
  right: 5%;
  width: 36%;
  aspect-ratio: 2 / 1;
  padding: 6px 8px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(18, 42, 77, 0.8), rgba(6, 13, 26, 0.9));
  border: 1px solid rgba(255, 171, 92, 0.35);
  box-shadow: 0 16px 30px -14px rgba(0,0,0,0.55);
  opacity: 0;
}
.showcase-growth-card svg { width: 100%; height: 100%; display: block; }
.showcase-growth-path {
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
}

@media (max-width: 1023px) {
  .showcase-pin-wrap { height: auto; }
  .showcase-sticky { position: relative; height: auto; padding: 5rem 0; }
  .showcase-sticky .grid { grid-template-columns: 1fr; }
  .showcase-captions { margin-bottom: 3rem; position: relative; }
  .showcase-visual { aspect-ratio: auto; }

  /* Versione mobile: niente scroll-jacking (GSAP/ScrollTrigger resta disattivato,
     vedi showcase.js), ma le 4 fasi si alternano da sole in loop continuo di 12s,
     così la sezione non resta più "congelata" per sempre su Fase 1. */
  .showcase-caption {
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: showcase-caption-cycle 12s ease-in-out infinite;
  }
  .showcase-caption[data-stage="1"] { animation-delay: 0s; }
  .showcase-caption[data-stage="2"] { animation-delay: 3s; }
  .showcase-caption[data-stage="3"] { animation-delay: 6s; }
  .showcase-caption[data-stage="4"] { animation-delay: 9s; }

  .showcase-layer { position: relative; display: none; }
  .showcase-layer[data-showcase-layer="1"] {
    display: flex;
    animation: showcase-caption-cycle 12s ease-in-out infinite;
  }
  .showcase-layer[data-showcase-layer="2"] {
    display: flex;
    animation: showcase-layer2-cycle 12s ease-in-out infinite;
  }
  .showcase-layer[data-showcase-layer="4"] {
    display: flex;
    /* niente animazione sul layer intero: card di crescita e razzo hanno
       ciascuno il proprio tempo, vedi sotto */
  }
  .showcase-block {
    animation: showcase-block-fill 12s ease-in-out infinite;
  }
  .showcase-content-line,
  .showcase-content-icon {
    animation: showcase-content-reveal 12s ease-in-out infinite;
  }
  .showcase-growth-card {
    animation: showcase-growthcard-cycle 12s ease-in-out infinite;
  }
  .showcase-growth-path {
    animation: showcase-growth-draw 12s ease-in-out infinite;
  }
  .showcase-launch-rocket {
    opacity: 0;
    animation: showcase-rocket-cycle 12s ease-in-out infinite;
  }

  @keyframes showcase-caption-cycle {
    0%   { opacity: 0; }
    2%   { opacity: 1; }
    22%  { opacity: 1; }
    25%  { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes showcase-layer2-cycle {
    0%   { opacity: 0; }
    24%  { opacity: 0; }
    27%  { opacity: 1; }
    97%  { opacity: 1; }
    100% { opacity: 0; }
  }
  @keyframes showcase-block-fill {
    0%   { opacity: 0; transform: scale(0.9); background-color: rgba(255,171,92,0); border-color: rgba(255,171,92,0.3); }
    24%  { opacity: 0; transform: scale(0.9); }
    28%  { opacity: 1; transform: scale(1); background-color: rgba(255,171,92,0); border-color: rgba(255,171,92,0.3); }
    50%  { background-color: rgba(255,171,92,0); border-color: rgba(255,171,92,0.3); }
    60%  { background-color: rgba(255,171,92,0.22); border-color: rgba(255,171,92,0.6); }
    96%  { opacity: 1; background-color: rgba(255,171,92,0.22); border-color: rgba(255,171,92,0.6); }
    100% { opacity: 0; }
  }
  /* Fase 3: dentro ai blocchi compaiono le righe di testo / l'iconcina immagine,
     insieme al riempimento di colore qui sopra */
  @keyframes showcase-content-reveal {
    0%   { opacity: 0; }
    50%  { opacity: 0; }
    58%  { opacity: 1; }
    96%  { opacity: 1; }
    100% { opacity: 0; }
  }
  /* Fase 4, primo momento: compare la card col grafico di crescita */
  @keyframes showcase-growthcard-cycle {
    0%   { opacity: 0; transform: translateY(10px) scale(0.9); }
    74%  { opacity: 0; transform: translateY(10px) scale(0.9); }
    79%  { opacity: 1; transform: translateY(0) scale(1); }
    97%  { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; }
  }
  @keyframes showcase-growth-draw {
    0%, 78%  { stroke-dashoffset: 140; }
    93%, 100% { stroke-dashoffset: 0; }
  }
  /* Fase 4, secondo momento: il razzo parte (dopo la card) */
  @keyframes showcase-rocket-cycle {
    0%   { opacity: 0; transform: translateY(0); }
    85%  { opacity: 0; transform: translateY(0); }
    88%  { opacity: 1; transform: translateY(0); }
    98%  { opacity: 1; transform: translateY(-40px); }
    100% { opacity: 0; transform: translateY(-40px); }
  }

  /* Chi preferisce meno animazioni vede direttamente il fotogramma finale, fermo */
  @media (prefers-reduced-motion: reduce) {
    .showcase-caption, .showcase-layer, .showcase-block,
    .showcase-content-line, .showcase-content-icon,
    .showcase-growth-card, .showcase-growth-path, .showcase-launch-rocket { animation: none !important; }
    .showcase-caption { opacity: 0 !important; }
    .showcase-caption[data-stage="4"] { opacity: 1 !important; }
    .showcase-layer { display: none !important; }
    .showcase-layer[data-showcase-layer="4"] { display: flex !important; opacity: 1 !important; }
    .showcase-block { opacity: 1 !important; background-color: rgba(255,171,92,0.22) !important; border-color: rgba(255,171,92,0.6) !important; }
    .showcase-content-line, .showcase-content-icon { opacity: 1 !important; }
    .showcase-growth-card { opacity: 1 !important; transform: none !important; }
    .showcase-growth-path { stroke-dashoffset: 0 !important; }
    .showcase-launch-rocket { opacity: 1 !important; }
  }
}

.hero-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffdcb0;
  background: rgba(245, 135, 46, 0.1);
  border: 1px solid rgba(255, 171, 92, 0.25);
  backdrop-filter: blur(6px);
  opacity: 0;
  animation: hero-chip-float 7s ease-in-out infinite;
}
@keyframes hero-chip-float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-14px); }
  100% { transform: translateY(0px); }
}

@media (max-width: 1023px) {
  /* Sotto i 1024px la colonna del ritratto scompare (hidden lg:block) e il
     testo occupa tutta la larghezza: la scena decorativa di sfondo (mockup
     browser + logo grande) finiva dietro/attraverso il testo ("Specializzato
     in…") perché entrambi sono centrati sull'intera altezza della hero.
     Meglio nasconderla su schermi piccoli: è puramente decorativa
     (aria-hidden) e non essenziale alla lettura. */
  .hero-scene-mock { display: none; }
  .hero-logo-big { display: none; }
  .hero-chip { display: none; }
}

/* -------------------- Come lavoro: timeline -------------------- */
.timeline-line {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,171,92,0.12);
}
.timeline-line-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-500), var(--accent-300));
  box-shadow: 0 0 10px var(--accent-glow);
}
.timeline-step-dot {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

/* -------------------- Icon draw-in -------------------- */
.icon-draw path,
.icon-draw circle,
.icon-draw rect,
.icon-draw line,
.icon-draw polyline {
  stroke-dasharray: var(--icon-len, 100);
  stroke-dashoffset: var(--icon-len, 100);
}

/* -------------------- FAQ accordion -------------------- */
.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.faq-question {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 4px;
  text-align: left;
  width: 100%;
}
.faq-icon {
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(.2,.9,.3,1.2);
}
.faq-item.is-open .faq-icon {
  transform: rotate(45deg);
  color: var(--accent-400);
}
.faq-answer {
  height: 0;
  overflow: hidden;
  transition: height 0.4s cubic-bezier(.2,.9,.25,1);
}
.faq-answer-inner {
  padding-bottom: 22px;
  color: #a0aec7;
  line-height: 1.7;
}

/* -------------------- Floating action cluster (WhatsApp + Chat) -------------------- */
.fab-cluster {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 65;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.fab-btn {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.5);
  transition: transform 0.3s cubic-bezier(.2,.9,.3,1.3);
}
.fab-btn:hover { transform: scale(1.08) translateY(-2px); }
.fab-btn.fab-whatsapp { background: linear-gradient(135deg, #34d399, #059669); }
.fab-btn.fab-chat { background: linear-gradient(135deg, var(--accent-400), var(--accent-600)); }

.fab-status-dot {
  position: absolute;
  top: 2px; right: 2px;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #34d399;
  border: 2px solid var(--navy-950);
}
.fab-status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #34d399;
  animation: fab-pulse 1.8s ease-out infinite;
}
@keyframes fab-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* -------------------- Back to top -------------------- */
#back-to-top {
  position: fixed;
  left: 20px;
  bottom: 24px;
  z-index: 60;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
#back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* -------------------- Chatbot window: stile "assistente IA futuristico" -------------------- */
#chatbot-window {
  position: fixed;
  right: 20px;
  bottom: 92px;
  z-index: 66;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 140px));
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  transform: scale(0.9) translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(.2,.9,.25,1.15), opacity 0.3s ease;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7);
  background: linear-gradient(165deg, rgba(12,28,56,0.92), rgba(5,11,22,0.96));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
#chatbot-window::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--chat-border-angle, 0deg), var(--accent-500), rgba(36,77,132,0.15) 30%, rgba(255,171,92,0.6) 55%, rgba(36,77,132,0.15) 80%, var(--accent-500));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: chat-border-spin 6s linear infinite;
  z-index: 1;
}
@property --chat-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes chat-border-spin {
  to { --chat-border-angle: 360deg; }
}
#chatbot-window.is-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.chatbot-header {
  position: relative;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(245,135,46,0.14), rgba(18,42,77,0.5));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}
.chatbot-header::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  animation: chat-header-scan 4.5s ease-in-out infinite;
}
@keyframes chat-header-scan {
  0% { left: -40%; }
  50% { left: 100%; }
  100% { left: 100%; }
}
.chatbot-avatar {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, rgba(255,194,122,0.35), rgba(8,18,38,0.4));
  border: 1px solid rgba(255,171,92,0.3);
}
.chatbot-avatar img { width: 38px; height: 38px; object-fit: contain; }
.chatbot-avatar::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  border: 1px solid rgba(255,171,92,0.35);
  animation: chat-avatar-ring 2.6s ease-in-out infinite;
}
@keyframes chat-avatar-ring {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.18); opacity: 0; }
}
.chatbot-messages {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-image:
    linear-gradient(rgba(255,171,92,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,171,92,0.035) 1px, transparent 1px);
  background-size: 26px 26px;
}
.chat-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.875rem;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  animation: chat-bubble-in 0.35s ease forwards;
}
@keyframes chat-bubble-in {
  to { opacity: 1; transform: translateY(0); }
}
.chat-bubble.from-bot {
  align-self: flex-start;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,171,92,0.16);
  border-left: 2px solid rgba(255,171,92,0.55);
  color: #e7edf7;
  border-bottom-left-radius: 4px;
  box-shadow: -6px 0 16px -10px rgba(245,135,46,0.35);
}
.chat-bubble.from-user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--accent-400), var(--accent-600));
  color: var(--navy-950);
  font-weight: 500;
  border-bottom-right-radius: 4px;
}
.chat-bubble.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  max-width: 100%;
}
.chat-suggest {
  font-size: 0.75rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,171,92,0.3);
  color: var(--accent-300);
  background: rgba(255,171,92,0.06);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.chat-suggest:hover {
  background: rgba(255,171,92,0.16);
  border-color: var(--accent-400);
}
.chat-typing {
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
  align-self: flex-start;
}
.chat-typing span {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(231,237,247,0.5);
  animation: chat-typing-bounce 1.1s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.chatbot-input-row {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.chatbot-input-row input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 0.875rem;
  color: #e7edf7;
}
.chatbot-input-row input:focus {
  outline: none;
  border-color: var(--accent-400);
}
.chatbot-send {
  width: 40px; height: 40px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent-400), var(--accent-600));
  flex-shrink: 0;
}
.sound-toggle {
  width: 32px; height: 32px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  color: #a0aec7;
  flex-shrink: 0;
}
.sound-toggle.is-muted .icon-sound-on { display: none; }
.sound-toggle:not(.is-muted) .icon-sound-off { display: none; }

@media (max-width: 480px) {
  #chatbot-window { right: 12px; bottom: 84px; }
  .fab-cluster { right: 12px; }
}

/* -------------------- Form success animation -------------------- */
.success-check {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 2px solid #34d399;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.success-check svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: success-check-draw 0.5s 0.1s ease forwards;
}
@keyframes success-check-draw {
  to { stroke-dashoffset: 0; }
}
#form-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

/* ===========================================================
   v3 additions — logo grande e dinamico, configuratore,
   spotlight cursore, grafico crescita, easter egg
   =========================================================== */

/* -------------------- Navbar logo dinamico -------------------- */
.nav-logo-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  cursor: pointer;
  will-change: transform;
}
.nav-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: logo-spin 26s linear infinite, logo-glow-pulse 3.2s ease-in-out infinite;
  transform-style: preserve-3d;
}
@keyframes logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes logo-glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(245,135,46,0.35)); }
  50% { filter: drop-shadow(0 0 12px rgba(245,135,46,0.7)); }
}
@media (max-width: 767px) {
  .nav-logo-wrap { width: 54px; height: 54px; }
}

/* -------------------- Logo grande hero (watermark protagonista) -------------------- */
.hero-logo-big {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(420px, 46vw, 640px);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.hero-logo-big img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.14;
  animation: logo-spin 110s linear infinite, logo-glow-pulse-big 4.5s ease-in-out infinite;
}
@keyframes logo-glow-pulse-big {
  0%, 100% { filter: drop-shadow(0 0 30px rgba(245,135,46,0.18)); }
  50% { filter: drop-shadow(0 0 60px rgba(245,135,46,0.32)); }
}
@media (max-width: 1023px) {
  .hero-logo-big { opacity: 0.6; width: clamp(320px, 70vw, 460px); }
}

.hero-logo-rocket-ghost {
  position: absolute;
  width: 15%;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 6px 16px rgba(245,135,46,0.5));
}
.hero-logo-rocket-ghost img { width: 100%; display: block; }
.rocket-trail {
  position: absolute;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,171,92,0.7), transparent);
  opacity: 0;
  pointer-events: none;
}

/* -------------------- Preloader potenziato -------------------- */
.preloader-logo-wrap {
  position: relative;
  width: 140px;
  height: 140px;
}
.preloader-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: logo-spin 8s linear infinite, logo-glow-pulse 1.6s ease-in-out infinite, preloader-scale-in 0.7s cubic-bezier(.2,.9,.25,1.4);
}
@keyframes preloader-scale-in {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.preloader-ring {
  position: absolute;
  inset: -22px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,171,92,0.25);
  border-top-color: var(--accent-400);
  animation: logo-spin 1.4s linear infinite reverse;
}


/* -------------------- Configuratore rapido -------------------- */
.config-chip {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  border-radius: 14px;
  padding: 16px 18px;
  text-align: left;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}
.config-chip:hover { border-color: rgba(255,171,92,0.35); transform: translateY(-2px); }
.config-chip.is-selected {
  border-color: var(--accent-400);
  background: rgba(255,171,92,0.08);
  box-shadow: 0 0 0 1px rgba(255,171,92,0.25) inset;
}
.config-chip.is-selected .config-chip-check {
  opacity: 1;
  transform: scale(1);
}
.config-chip-check {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.config-step {
  display: none;
}
.config-step.is-active {
  display: block;
}
.config-summary-item {
  opacity: 0;
  transform: translateX(-8px);
  animation: config-item-in 0.35s ease forwards;
}
@keyframes config-item-in {
  to { opacity: 1; transform: translateX(0); }
}

/* -------------------- Grafico crescita animato (nella scena hero) -------------------- */
.growth-chart-path {
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
}
.growth-chart-fill {
  opacity: 0;
}
.growth-chart-dot {
  opacity: 0;
}

/* -------------------- Easter egg -------------------- */
#easter-egg-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
#easter-egg-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.easter-rocket {
  position: fixed;
  bottom: -60px;
  z-index: 99;
  pointer-events: none;
  font-size: 28px;
}