:root{
      /* Brand */
      --up-night: #070A12;
      --up-ink: #0B1220;
      --up-electric:#3CF2FF;
      --up-acid:#B8FF5A;
      --up-lilac:#8B5CF6;
      --up-mist:#E7EEF9;

      /* THEME — LIGHT (paper, più contrasto) */
      --bg: #f7f9fc;                 /* non bianco puro */
      --surface: rgba(255,255,255,0.92);
      --surface-strong: #ffffff;
      --surface-soft: #eef2f7;
      --text: #0b1220;
      --muted: #475569;              /* slate-600 */
      --muted-2: #64748b;            /* slate-500 */
      --border: rgba(15,23,42,0.14);
      --border-soft: rgba(15,23,42,0.10);

      /* nav */
      --nav-bg: rgba(247,249,252,0.78);
      --nav-bg-scrolled: rgba(247,249,252,0.92);
      --nav-border: rgba(15,23,42,0.08);
      --nav-shadow: 0 14px 45px rgba(2,6,23,0.10);

      /* toggle */
      --toggle-bg: rgba(255,255,255,0.70);
      --toggle-border: rgba(15,23,42,0.16);
      --toggle-text: #0b1220;
    }

    html.dark{
      --bg: #070A12;
      --surface: rgba(255,255,255,0.06);
      --surface-strong: rgba(255,255,255,0.08);
      --surface-soft: rgba(255,255,255,0.04);
      --text: #e5e7eb;
      --muted: rgba(255,255,255,0.75);
      --muted-2: rgba(255,255,255,0.60);
      --border: rgba(255,255,255,0.12);
      --border-soft: rgba(255,255,255,0.10);

      --nav-bg: rgba(7,10,18,0.72);
      --nav-bg-scrolled: rgba(7,10,18,0.86);
      --nav-border: rgba(255,255,255,0.10);
      --nav-shadow: 0 18px 50px rgba(0,0,0,0.45);

      --toggle-bg: rgba(15,23,42,0.55);
      --toggle-border: rgba(255,255,255,0.14);
      --toggle-text: #e5e7eb;
    }

    * { font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
    html { scroll-behavior: smooth; }
    /* Fa capire al browser come disegnare i controlli nativi (select dropdown incluso) */
    html { color-scheme: light; }
    html.dark { color-scheme: dark; }

    /* Wrapper scrollabile */
    #app-wrapper { height: 100vh; overflow-y: auto; overflow-x: hidden; background: var(--bg); }

    /* Navbar */
    #navbar{
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 50;
      transition: all 250ms ease;
      background: var(--nav-bg);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--nav-border);
    }
    #navbar.scrolled{
      background: var(--nav-bg-scrolled);
      box-shadow: var(--nav-shadow);
    }

    /* Gradient text */
    .up-gradient-text{
      background: linear-gradient(135deg, var(--up-electric) 0%, var(--up-acid) 55%, var(--up-lilac) 100%, var(--up-night) 120%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Link underline hover */
    .nav-link{ position: relative; }
    .nav-link::after{
      content:'';
      position:absolute; left:0; bottom:-6px;
      width:0; height:2px;
      background: linear-gradient(90deg, var(--up-electric), var(--up-acid));
      transition: width .25s ease;
      opacity:.9;
    }
    .nav-link:hover::after{ width:100%; }

    /* Hover lift */
    .hover-lift{ transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
    .hover-lift:hover{ transform: translateY(-8px); box-shadow: 0 24px 60px rgba(2,6,23,0.12); border-color: rgba(15,23,42,0.18); }
    html.dark .hover-lift:hover{ box-shadow: 0 24px 70px rgba(0,0,0,0.55); }

    /* Buttons shine */
    .shine-btn{ position:relative; overflow:hidden; }
    .shine-btn::before{
      content:'';
      position:absolute; top:0; left:-120%;
      width:120%; height:100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
      transform: skewX(-18deg);
      transition: left .55s ease;
    }
    .shine-btn:hover::before{ left:120%; }

    /* Hero glow blobs */
    .blob{
      position:absolute;
      border-radius:50%;
      filter: blur(70px);  /* meno “polvere” */
      opacity:.42;         /* più presenza in white mode */
      animation: blobFloat 9s ease-in-out infinite;
      pointer-events:none;
    }
    @keyframes blobFloat{
      0%,100%{ transform: translate(0,0) scale(1); }
      50%{ transform: translate(28px,-28px) scale(1.08); }
    }

    /* Reveal (fade-in scroll) */
    .reveal{
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 650ms ease, transform 650ms ease;
      will-change: opacity, transform;
    }
    .reveal.is-visible{ opacity:1; transform: translateY(0); }

    /* Step-in (cards) */
    .step-item{
      opacity:0;
      transform: translate3d(0,14px,0);
      backface-visibility:hidden;
      will-change: opacity, transform;
    }
    .step-item.step-in{ animation: stepFadeUp 650ms ease-out forwards; }
    @keyframes stepFadeUp{
      from{ opacity:0; transform: translate3d(0,14px,0); }
      to{ opacity:1; transform: translate3d(0,0,0); }
    }

    /* Anti-flicker */
    #app-wrapper .reveal, #app-wrapper .reveal *,
    #app-wrapper .step-item, #app-wrapper .step-item *{
      backface-visibility:hidden;
      transform: translateZ(0);
    }

    /* Better justify */
    .text-better-justify{
      text-align: justify;
      text-justify: inter-word;
      hyphens: auto;
    }

    /* Focus ring */
    input:focus, textarea:focus, select:focus{
      outline:none;
      border-color: rgba(60,242,255,0.8);
      box-shadow: 0 0 0 4px rgba(60,242,255,0.15);
    }

    /* Sezione “soft” per white mode */
    .section-soft{
      background:
        radial-gradient(900px 420px at 18% 10%, rgba(60,242,255,0.12), transparent 60%),
        radial-gradient(900px 420px at 82% 90%, rgba(184,255,90,0.10), transparent 60%),
        linear-gradient(180deg, rgba(248,250,252,1), rgba(255,255,255,1));
    }
    html.dark .section-soft{
      background:
        radial-gradient(900px 420px at 18% 10%, rgba(60,242,255,0.14), transparent 60%),
        radial-gradient(900px 420px at 82% 90%, rgba(184,255,90,0.12), transparent 60%),
        linear-gradient(180deg, rgba(7,10,18,1), rgba(7,10,18,1));
    }

    /* Superfici coerenti (invece di bg-white puro ovunque) */
    .surface{
      background: var(--surface);
      border: 1px solid var(--border);
      backdrop-filter: blur(10px);
    }
    .surface-strong{
      background: var(--surface-strong);
      border: 1px solid var(--border);
    }
    .surface-soft{
      background: var(--surface-soft);
      border: 1px solid var(--border);
    }

    /* Toggle */
    .theme-toggle{
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 16px;
      border: 1px solid var(--toggle-border);
      background: var(--toggle-bg);
      color: var(--toggle-text);
      backdrop-filter: blur(12px);
      box-shadow: 0 10px 28px rgba(2,6,23,0.12);
      transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
      user-select: none;
    }
    .theme-toggle:hover{ transform: translateY(-1px); box-shadow: 0 14px 40px rgba(2,6,23,0.16);}
    .theme-toggle:active{ transform: translateY(0);}
    .theme-toggle .pill{
      width: 34px; height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.10);
    }
    html.dark .theme-toggle .pill{
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.10);
    }

    /* Accessibilità */
    @media (prefers-reduced-motion: reduce){
      .reveal, .step-item{ opacity:1 !important; transform:none !important; transition:none !important; animation:none !important;}
      .blob{ animation:none !important; }
    }
    @media (max-width: 768px){
      #hero .reveal{ opacity:1 !important; transform:none !important; transition:none !important;}
    }

    /* FIX: in dark mode, alcune UI native del select mostrano testo bianco su sfondo chiaro.
   Forziamo il testo delle option a scuro così resta leggibile. */
    html.dark #service option{
      color: #0b1220 !important;
    }

    html.dark #service optgroup{
      color: #0b1220 !important;
  }

  /* Stile bottone input file */
#upload::file-selector-button {
  border: 1px solid var(--border);
  background: var(--surface-strong);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

#upload::file-selector-button:hover {
  background: rgba(60,242,255,0.12);
}

/* Dark mode – bottone coerente col tema */
html.dark #upload::file-selector-button {
  background: #070A12;
  border-color: rgba(255,255,255,0.12);
  color: #e5e7eb;
}

html.dark #upload::file-selector-button:hover {
  background: rgba(184,255,90,0.12);
}

/* Processo: card più solide (mobile + desktop) */
#processo .surface{
  background: rgba(15, 23, 42, 0.88) !important;
  border-color: rgba(255,255,255,0.14) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html:not(.dark) #processo .surface{
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.10) !important;
}
@media (min-width: 768px){
  #processo .surface{
    background: rgba(15, 23, 42, 0.80);
  }
}

/* Badge numeri: leggibili in dark e in light */
#processo .step-item .step-badge{
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.20);
}

/* Dark mode: testo chiaro e background più pieno */
html.dark #processo .step-item .step-badge{
  color: rgba(255,255,255,0.95) !important;
  filter: saturate(1.15) brightness(1.05);
}

/* Light mode: testo scuro (come ora) */
html:not(.dark) #processo .step-item .step-badge{
  color: #081018 !important; /* o var(--up-ink) se preferisci */
}

/* ===== Processo: render più "doop" in LIGHT mode ===== */

/* In LIGHT: card più paper e meno "nebbia colorata" */
html:not(.dark) #processo .step-item.surface{
  background: rgba(255,255,255,0.94) !important;
  border-color: rgba(15,23,42,0.10) !important;
  box-shadow: 0 12px 30px rgba(2,6,23,0.08) !important;
}

/* In LIGHT: blob dentro le card molto più discreti (qui era il problema) */
html:not(.dark) #processo .step-item .step-blob{
  opacity: 0.12 !important;
  filter: blur(55px) !important;
}

/* In DARK: lasciamo i blob belli presenti */
html.dark #processo .step-item .step-blob{
  opacity: 0.35 !important;
  filter: blur(40px) !important;
}

/* ===== Gradient text default (DARK) ===== */
.up-gradient-text{
  background: linear-gradient(90deg, #22D3EE, #A3E635, #8B5CF6);
  background-clip: text;              /* standard */
  -webkit-background-clip: text;      /* Safari/Chrome */
  color: transparent;                 /* standard fallback */
  -webkit-text-fill-color: transparent;
}

/* ===== In LIGHT mode lo rendiamo più contrastato ===== */
html:not(.dark) .up-gradient-text{
  background: linear-gradient(90deg, #0EA5B7, #65A30D, #6D28D9);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

html:not(.dark) .up-gradient-text{
  text-shadow: 0 1px 1px rgba(0,0,0,0.05);
}

/* Stop double-tap zoom su elementi interattivi (mobile) */
a, button, [role="button"], .tap-no-zoom {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button, a {
  -webkit-touch-callout: none;
}

/* Link legali footer */
.footer-legal-link{
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.35);
  text-underline-offset: 3px;
}

/* ===== HERO SLIDE COUNTER =====

.hero-track{
  counter-reset: heroSlide;
}

.hero-slide{
  counter-increment: heroSlide;
}

.hero-slide::after{
  content: "0" counter(heroSlide);
  position:absolute;
  top:1.4rem;
  right:1.4rem;
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.12em;
  color:rgba(255,255,255,0.35);
} */