/* ===========================================================================
   NILS Automotive — layer di personalizzazione (NON modifica styles.css)
   Rimappa la palette animejs sui colori NILS: rosso racing + navy + acciaio,
   su fondo near-black. Le variabili --hex-* sono lette anche dal motore 3D,
   quindi questo ricolora radar, anelli ed effetti.
   =========================================================================== */

:root {
  /* ---- Foreground (testo / linee chiare) -> neutro NILS ---- */
  --hex-fg-1: #ffffff; --hex-fg-2: #d8d8d8; --hex-fg-3: #b0b0b0; --hex-fg-4: #9a9a9a;
  --hex-fg-5: #6a6a6a; --hex-fg-6: #474747; --hex-fg-7: #393939; --hex-fg-8: #2a2a2a;
  --hex-white-1: #ffffff; --hex-white-2: #d8d8d8; --hex-white-3: #9a9a9a; --hex-white-4: #6a6a6a;
  --hex-white-5: #555555; --hex-white-6: #444444; --hex-white-7: #353535; --hex-white-8: #262626;

  /* ---- Background (fondo scena / sezioni scure) -> near-black NILS ---- */
  --hex-bg-1: #141414; --hex-bg-2: #181818; --hex-bg-3: #1f1f1f; --hex-bg-4: #262626;
  --hex-bg-5: #2d2d2d; --hex-bg-6: #343434; --hex-bg-7: #3b3b3b;
  --hex-black-1: #141414; --hex-black-2: #141414; --hex-black-3: #141414; --hex-black-4: #131313;
  --hex-black-5: #131313; --hex-black-6: #121212; --hex-black-7: #121212; --hex-black-8: #111111;

  /* ===================== RAMP NILS ===================== */
  /* ROSSO racing NILS */
  --nils-red-1:#ff3b30; --nils-red-2:#e2231a; --nils-red-3:#b8160f; --nils-red-4:#8a1912;
  --nils-red-5:#6b150f; --nils-red-6:#4f110c; --nils-red-7:#381210; --nils-red-8:#241414;
  /* NAVY NILS */
  --nils-navy-1:#4f9bff; --nils-navy-2:#2f6fd0; --nils-navy-3:#1f4d8a; --nils-navy-4:#163a6b;
  --nils-navy-5:#122f56; --nils-navy-6:#0f2643; --nils-navy-7:#0d1f33; --nils-navy-8:#141a24;
  /* ACCIAIO / argento */
  --nils-steel-1:#eaeaea; --nils-steel-2:#bdbdbd; --nils-steel-3:#8c8c8c; --nils-steel-4:#6a6a6a;
  --nils-steel-5:#555555; --nils-steel-6:#444444; --nils-steel-7:#353535; --nils-steel-8:#262626;

  /* ---- Famiglie calde -> ROSSO ---- */
  --hex-red-1:var(--nils-red-1);--hex-red-2:var(--nils-red-2);--hex-red-3:var(--nils-red-3);--hex-red-4:var(--nils-red-4);--hex-red-5:var(--nils-red-5);--hex-red-6:var(--nils-red-6);--hex-red-7:var(--nils-red-7);--hex-red-8:var(--nils-red-8);
  --hex-pink-1:var(--nils-red-1);--hex-pink-2:var(--nils-red-2);--hex-pink-3:var(--nils-red-3);--hex-pink-4:var(--nils-red-4);--hex-pink-5:var(--nils-red-5);--hex-pink-6:var(--nils-red-6);--hex-pink-7:var(--nils-red-7);--hex-pink-8:var(--nils-red-8);
  --hex-magenta-1:var(--nils-red-1);--hex-magenta-2:var(--nils-red-2);--hex-magenta-3:var(--nils-red-3);--hex-magenta-4:var(--nils-red-4);--hex-magenta-5:var(--nils-red-5);--hex-magenta-6:var(--nils-red-6);--hex-magenta-7:var(--nils-red-7);--hex-magenta-8:var(--nils-red-8);
  --hex-corail-1:var(--nils-red-1);--hex-corail-2:var(--nils-red-2);--hex-corail-3:var(--nils-red-3);--hex-corail-4:var(--nils-red-4);--hex-corail-5:var(--nils-red-5);--hex-corail-6:var(--nils-red-6);--hex-corail-7:var(--nils-red-7);--hex-corail-8:var(--nils-red-8);
  --hex-orange-1:var(--nils-red-1);--hex-orange-2:var(--nils-red-2);--hex-orange-3:var(--nils-red-3);--hex-orange-4:var(--nils-red-4);--hex-orange-5:var(--nils-red-5);--hex-orange-6:var(--nils-red-6);--hex-orange-7:var(--nils-red-7);--hex-orange-8:var(--nils-red-8);

  /* ---- Famiglie fredde -> NAVY ---- */
  --hex-king-1:var(--nils-navy-1);--hex-king-2:var(--nils-navy-2);--hex-king-3:var(--nils-navy-3);--hex-king-4:var(--nils-navy-4);--hex-king-5:var(--nils-navy-5);--hex-king-6:var(--nils-navy-6);--hex-king-7:var(--nils-navy-7);--hex-king-8:var(--nils-navy-8);
  --hex-sega-1:var(--nils-navy-1);--hex-sega-2:var(--nils-navy-2);--hex-sega-3:var(--nils-navy-3);--hex-sega-4:var(--nils-navy-4);--hex-sega-5:var(--nils-navy-5);--hex-sega-6:var(--nils-navy-6);--hex-sega-7:var(--nils-navy-7);--hex-sega-8:var(--nils-navy-8);
  --hex-sky-1:var(--nils-navy-1);--hex-sky-2:var(--nils-navy-2);--hex-sky-3:var(--nils-navy-3);--hex-sky-4:var(--nils-navy-4);--hex-sky-5:var(--nils-navy-5);--hex-sky-6:var(--nils-navy-6);--hex-sky-7:var(--nils-navy-7);--hex-sky-8:var(--nils-navy-8);
  --hex-indigo-1:var(--nils-navy-1);--hex-indigo-2:var(--nils-navy-2);--hex-indigo-3:var(--nils-navy-3);--hex-indigo-4:var(--nils-navy-4);--hex-indigo-5:var(--nils-navy-5);--hex-indigo-6:var(--nils-navy-6);--hex-indigo-7:var(--nils-navy-7);--hex-indigo-8:var(--nils-navy-8);
  --hex-purple-1:var(--nils-navy-1);--hex-purple-2:var(--nils-navy-2);--hex-purple-3:var(--nils-navy-3);--hex-purple-4:var(--nils-navy-4);--hex-purple-5:var(--nils-navy-5);--hex-purple-6:var(--nils-navy-6);--hex-purple-7:var(--nils-navy-7);--hex-purple-8:var(--nils-navy-8);
  --hex-lavender-1:var(--nils-navy-1);--hex-lavender-2:var(--nils-navy-2);--hex-lavender-3:var(--nils-navy-3);--hex-lavender-4:var(--nils-navy-4);--hex-lavender-5:var(--nils-navy-5);--hex-lavender-6:var(--nils-navy-6);--hex-lavender-7:var(--nils-navy-7);--hex-lavender-8:var(--nils-navy-8);
  --hex-cyan-1:var(--nils-navy-1);--hex-cyan-2:var(--nils-navy-2);--hex-cyan-3:var(--nils-navy-3);--hex-cyan-4:var(--nils-navy-4);--hex-cyan-5:var(--nils-navy-5);--hex-cyan-6:var(--nils-navy-6);--hex-cyan-7:var(--nils-navy-7);--hex-cyan-8:var(--nils-navy-8);
  --hex-turquoise-1:var(--nils-navy-1);--hex-turquoise-2:var(--nils-navy-2);--hex-turquoise-3:var(--nils-navy-3);--hex-turquoise-4:var(--nils-navy-4);--hex-turquoise-5:var(--nils-navy-5);--hex-turquoise-6:var(--nils-navy-6);--hex-turquoise-7:var(--nils-navy-7);--hex-turquoise-8:var(--nils-navy-8);

  /* ---- Famiglie gialle/verdi -> ACCIAIO ---- */
  --hex-green-1:var(--nils-steel-1);--hex-green-2:var(--nils-steel-2);--hex-green-3:var(--nils-steel-3);--hex-green-4:var(--nils-steel-4);--hex-green-5:var(--nils-steel-5);--hex-green-6:var(--nils-steel-6);--hex-green-7:var(--nils-steel-7);--hex-green-8:var(--nils-steel-8);
  --hex-lime-1:var(--nils-steel-1);--hex-lime-2:var(--nils-steel-2);--hex-lime-3:var(--nils-steel-3);--hex-lime-4:var(--nils-steel-4);--hex-lime-5:var(--nils-steel-5);--hex-lime-6:var(--nils-steel-6);--hex-lime-7:var(--nils-steel-7);--hex-lime-8:var(--nils-steel-8);
  --hex-citrus-1:var(--nils-steel-1);--hex-citrus-2:var(--nils-steel-2);--hex-citrus-3:var(--nils-steel-3);--hex-citrus-4:var(--nils-steel-4);--hex-citrus-5:var(--nils-steel-5);--hex-citrus-6:var(--nils-steel-6);--hex-citrus-7:var(--nils-steel-7);--hex-citrus-8:var(--nils-steel-8);
  --hex-yellow-1:var(--nils-steel-1);--hex-yellow-2:var(--nils-steel-2);--hex-yellow-3:var(--nils-steel-3);--hex-yellow-4:var(--nils-steel-4);--hex-yellow-5:var(--nils-steel-5);--hex-yellow-6:var(--nils-steel-6);--hex-yellow-7:var(--nils-steel-7);--hex-yellow-8:var(--nils-steel-8);
}

/* ---- Logo NILS nell'header (la SVG anime.js era larga e bassa) ---- */
.header-logo img.nils-logo {
  width: auto !important;
  height: 52px !important;
}

/* ---- Nascondi snippet di codice e widget "Bundle size" / sponsor ---- */
.sub-nav pre,
.sub-nav .copy-button,
.sub-nav .modules-sizes,
.sub-nav .funding-level-box {
  display: none !important;
}

/* ===========================================================================
   Menu prodotti NILS (tendine) nella sezione finale
   =========================================================================== */
.nils-products-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
  width: 100%;
  max-width: 920px;
  margin: 28px auto 0;
  text-align: left;
  counter-reset: nilsprod;
}
@media (max-width: 740px) { .nils-products-menu { grid-template-columns: 1fr; } }

.nils-product {
  counter-increment: nilsprod;
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background:
    linear-gradient(165deg, rgba(46,46,49,.55) 0%, rgba(18,18,20,.55) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 14px 34px -16px rgba(0,0,0,.85);
  overflow: hidden;
  transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .28s ease, box-shadow .28s ease, background .28s ease;
}
/* barra accento laterale */
.nils-product::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--nils-red-1), var(--nils-red-4));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
/* riflesso lucido superiore */
.nils-product::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 42%;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
  pointer-events: none;
}
.nils-product:hover {
  transform: translateY(-3px);
  border-color: rgba(226,35,26,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 22px 46px -18px rgba(226,35,26,.35),
    0 14px 34px -16px rgba(0,0,0,.9);
}
.nils-product:hover::before,
.nils-product[open]::before { transform: scaleY(1); }
.nils-product[open] {
  border-color: rgba(226,35,26,.5);
  background: linear-gradient(165deg, rgba(58,32,32,.6) 0%, rgba(20,16,16,.6) 100%);
}

.nils-product > summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--hex-fg-1);
  user-select: none;
}
.nils-product > summary::-webkit-details-marker { display: none; }
/* numero indice metallico (01, 02, …) */
.nils-product > summary::before {
  content: counter(nilsprod, decimal-leading-zero);
  font-family: "BerkeleyMono", monospace;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--hex-fg-5);
  min-width: 20px;
}

.nils-product-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--nils-red-1);
  box-shadow: 0 0 10px 1px rgba(226,35,26,.9);
  flex: 0 0 auto;
}
.nils-product-arrow {
  margin-left: auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  font-size: 17px; line-height: 1;
  color: var(--hex-fg-3);
  transition: transform .3s cubic-bezier(.22,1,.36,1), color .25s ease, border-color .25s ease, background .25s ease;
}
.nils-product[open] .nils-product-arrow {
  transform: rotate(135deg);
  color: #fff;
  border-color: var(--nils-red-2);
  background: var(--nils-red-2);
}

.nils-product > ul {
  list-style: none;
  margin: 0;
  padding: 0 24px 20px 60px;
}
.nils-product > ul li { padding: 7px 0; }
.nils-product > ul li a {
  position: relative;
  color: var(--hex-fg-3);
  text-decoration: none;
  font-size: .95rem;
  transition: color .18s ease, padding-left .18s ease;
}
.nils-product > ul li a::before {
  content: "→";
  position: absolute; left: -20px;
  opacity: 0;
  color: var(--nils-red-1);
  transition: opacity .18s ease, transform .18s ease;
}
.nils-product > ul li a:hover { color: #fff; padding-left: 4px; }
.nils-product > ul li a:hover::before { opacity: 1; transform: translateX(2px); }

/* ===========================================================================
   Titoli METALLICI + accento carbon/tricolore
   =========================================================================== */
/* Titoli metallici SENZA background-clip (che tagliava il corsivo):
   colore pieno + riflessi/ombre via text-shadow. Non si taglia mai.
   Annullo eventuali fill trasparenti anche sui .char dello scramble. */
#intro h2, #intro h2 *,
.feature-section h2, .feature-section h2 *,
#get-started h2, #get-started h2 *,
#sponsors h2, #sponsors h2 *,
.home-section-light .section-heading, .home-section-light .section-heading * {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-style: italic;
}

/* ARGENTO metallico */
#intro h2,
#get-started h2,
#sponsors h2,
#intuitive h2,
#staggering h2,
#clockwork h2 {
  color: #ececed !important;
  text-shadow:
    0 -1px 0 rgba(255,255,255,.55),
    0 2px 1px rgba(0,0,0,.45),
    0 4px 10px rgba(0,0,0,.5);
}
/* ROSSO metallico */
#composition h2,
#svgUtils h2,
#responsive h2 {
  color: #f4382e !important;
  text-shadow:
    0 -1px 0 rgba(255,180,172,.5),
    0 2px 2px rgba(0,0,0,.4),
    0 4px 10px rgba(0,0,0,.45);
}
/* BLU metallico */
#scroll h2,
#draggable h2 {
  color: #4a93ec !important;
  text-shadow:
    0 -1px 0 rgba(186,214,255,.55),
    0 2px 2px rgba(0,0,0,.4),
    0 4px 10px rgba(0,0,0,.45);
}
/* Sezioni a fondo chiaro: grafite leggibile */
.home-section-light .section-heading {
  color: #161616 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

/* il puntino resta rosso NILS pieno */
#intro h2 .animation-engine.red-dot,
#intro h2 .animate-anything-dot,
.animate-anything-dot {
  color: var(--nils-red-1) !important;
  -webkit-text-fill-color: var(--nils-red-1) !important;
}

/* Barra carbon + tricolore italiano sopra l'headline */
#intro .home-section-text::before {
  content: "";
  display: block;
  width: 150px;
  height: 11px;
  margin-bottom: 22px;
  border-radius: 2px;
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,.40) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 2px, transparent 2px 4px),
    linear-gradient(90deg, #1aa64b 0 33.33%, #f3f3f3 33.33% 66.66%, #e2231a 66.66% 100%);
  box-shadow: 0 1px 8px rgba(0,0,0,.55);
}

/* ===========================================================================
   Footer NILS — contatti
   =========================================================================== */
.nils-contacts li { margin-bottom: 8px; line-height: 1.5; }
.nils-ct-label {
  display: inline-block;
  min-width: 74px;
  color: var(--hex-fg-4);
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.nils-newsletter-copy { color: var(--hex-fg-3); margin: 4px 0 12px; max-width: 320px; }
.footer-logo img.nils-logo { width: auto !important; height: 56px !important; }