/* =========================================================
   FLUX ITALIA
   Palette rigorosamente monocroma: bianco → grigi chiarissimi
   → nero. L'unico "colore" della pagina è la LUCE, e compare
   solo dentro il Light Lab, dove è un dato tecnico.
   ========================================================= */
:root{
  --white:      #FFFFFF;
  --paper:      #F6F6F7;
  --paper-2:    #EFEFF1;
  --ink:        #0B0B0C;
  --ink-2:      #16171A;
  --ink-soft:   #3A3D45;
  --grey:       #6E727C;
  --grey-light: #9AA0AA;
  --hair:       #E3E4E7;
  --hair-dark:  rgba(255,255,255,.12);

  --glass:      rgba(255,255,255,.66);
  --glass-line: rgba(255,255,255,.85);
  --blur:       saturate(140%) blur(20px);

  --sh-sm: 0 2px 10px rgba(11,11,12,.04);
  --sh-md: 0 18px 44px rgba(11,11,12,.09);
  --sh-lg: 0 40px 90px rgba(11,11,12,.16);

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  --ease: cubic-bezier(.16,1,.3,1);
  --nav-h: 92px;
}

*{ -webkit-font-smoothing:antialiased; }
html{ scroll-behavior:smooth; }

body{
  background:var(--white);
  color:var(--ink);
  font-family:'Inter Tight', system-ui, -apple-system, sans-serif;
  font-weight:300;
  font-size:1.02rem;
  line-height:1.6;
  overflow-x:hidden;
}
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; height:auto; display:block; }
::selection{ background:var(--ink); color:#fff; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:4px; }
.dark :focus-visible{ outline-color:#fff; }

/* ---------- Tipografia ---------- */
.display{
  font-family:'Archivo', system-ui, sans-serif;
  font-weight:600; letter-spacing:-.035em; line-height:.96;
}
h2.section-title{
  font-family:'Archivo', sans-serif;
  font-weight:600; letter-spacing:-.032em; line-height:1.02;
  font-size:clamp(2.1rem, 4.2vw, 3.7rem); margin:0;
}
h2.section-title .thin{ font-weight:400; color:var(--grey); }
.dark h2.section-title .thin{ color:var(--grey-light); }

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:.68rem; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--grey);
  display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; opacity:.5; }
.dark .eyebrow{ color:var(--grey-light); }

.mono{ font-family:'IBM Plex Mono', monospace; font-size:.74rem; letter-spacing:.05em; }
.lead{ font-size:1.1rem; color:var(--ink-soft); font-weight:300; }
.dark .lead{ color:#B9BDC5; }
.muted{ color:var(--grey); }

section{ position:relative; scroll-margin-top:calc(var(--nav-h) + 12px); }
.sec-pad{ padding:clamp(4.5rem, 8.5vw, 8rem) 0; }
.bg-paper{ background:var(--paper); }
.dark{ background:var(--ink); color:#EDEEF0; }
.dark p{ color:#B9BDC5; }

/* =========================================================
   FASCE DI LUCE — la texture che dà senso al vetro
   ========================================================= */
.beams{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.beams .b{
  position:absolute; top:-30%; height:170%; width:26vw;
  background:linear-gradient(180deg, rgba(11,11,12,.055), rgba(11,11,12,0) 72%);
  filter:blur(46px); transform:rotate(14deg);
}
.beams .b:nth-child(1){ left:6%;  width:18vw; opacity:.9; }
.beams .b:nth-child(2){ left:34%; width:30vw; transform:rotate(11deg); opacity:.55; }
.beams .b:nth-child(3){ left:72%; width:22vw; transform:rotate(17deg); opacity:.75; }
.beams .pool{
  position:absolute; left:50%; top:38%; transform:translateX(-50%);
  width:70vw; height:60vh; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.9), rgba(255,255,255,0) 70%);
  filter:blur(30px);
}
.dark .beams .b{ background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,0) 70%); }
.dark .beams .pool{ background:radial-gradient(ellipse at center, rgba(255,255,255,.06), transparent 70%); }

.z1{ position:relative; z-index:1; }

/* =========================================================
   BOTTONI
   ========================================================= */
.btn-ink, .btn-line, .btn-white{
  display:inline-flex; align-items:center; gap:.55rem;
  border-radius:var(--r-pill); font-weight:500; font-size:.94rem;
  padding:.72rem 1.4rem; border:1px solid transparent;
  transition:transform .3s var(--ease), background .25s ease, color .25s ease, border-color .25s ease, box-shadow .3s var(--ease);
}
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 14px 30px rgba(11,11,12,.24); }
.btn-line{ background:transparent; color:var(--ink); border-color:var(--hair); }
.btn-line:hover{ color:var(--ink); border-color:var(--ink); transform:translateY(-2px); background:rgba(255,255,255,.6); }
.dark .btn-line{ color:#fff; border-color:var(--hair-dark); }
.dark .btn-line:hover{ color:#fff; border-color:#fff; background:rgba(255,255,255,.06); }
.btn-white{ background:#fff; color:var(--ink); }
.btn-white:hover{ color:var(--ink); transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.3); }
.btn-x{ padding:.92rem 1.8rem; font-size:1rem; }
.btn-ink i, .btn-line i, .btn-white i{ transition:transform .3s var(--ease); }
.btn-ink:hover i, .btn-line:hover i, .btn-white:hover i{ transform:translateX(3px); }
.btn-outline-flux{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  border-radius:var(--r-sm); font-weight:500; font-size:.86rem;
  padding:.85rem 1.2rem; border:1px solid var(--hair-dark); color:#fff; background:transparent;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
  font-family:'IBM Plex Mono', monospace; letter-spacing:.04em;
}
.btn-outline-flux:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-outline-flux.disabled{ opacity:.38; pointer-events:none; }

/* =========================================================
   HEADER
   ========================================================= */
.nav-shell{ position:fixed; top:18px; left:0; right:0; z-index:1040; }
.nav-glass{
  background:var(--glass);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);
  border-radius:var(--r-pill);
  padding:.5rem .55rem .5rem 1.4rem;
  box-shadow:var(--sh-sm);
  transition:box-shadow .35s var(--ease), background .35s var(--ease);
}
.nav-shell.scrolled .nav-glass{
  background:rgba(255,255,255,.82);
  box-shadow:0 14px 40px rgba(11,11,12,.10);
}
.brand{ display:flex; align-items:center; gap:.6rem; color:var(--ink); }
.brand-mark{ width:26px; height:26px; flex:0 0 auto; }
.brand-word{
  font-family:'Archivo', sans-serif; font-weight:600; font-size:1.3rem;
  letter-spacing:-.03em; line-height:1;
}
.brand-word .dotk{ color:var(--grey); }
.nav-link-x{
  color:var(--ink-soft); font-size:.92rem; font-weight:400;
  padding:.45rem .8rem; border-radius:var(--r-pill);
  transition:color .2s ease, background .2s ease;
}
.nav-link-x:hover{ color:var(--ink); background:rgba(11,11,12,.05); }
.nav-link-x.active{ color:var(--ink); background:rgba(11,11,12,.07); }
.nav-toggle{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--hair);
  background:#fff; color:var(--ink); display:grid; place-items:center; font-size:1.05rem;
}
.mobile-panel{
  position:fixed; inset:0; z-index:1039;
  background:rgba(255,255,255,.94); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  display:flex; flex-direction:column; justify-content:center; gap:.2rem; padding:0 2rem;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.mobile-panel.open{ opacity:1; visibility:visible; }
.mobile-panel a{
  font-family:'Archivo',sans-serif; font-weight:600; letter-spacing:-.03em;
  font-size:2.2rem; padding:.55rem 0; border-bottom:1px solid var(--hair);
}

/* =========================================================
   NAV — stato "sopra il video" (bianco su scuro)
   ========================================================= */
.nav-shell.over-hero .nav-glass{
  background:rgba(16,18,24,.30);
  border-color:rgba(255,255,255,.20);
  box-shadow:0 10px 30px rgba(0,0,0,.20);
}
.nav-shell.over-hero .brand{ color:#fff; }
.nav-shell.over-hero .brand-word .dotk{ color:rgba(255,255,255,.55); }
.nav-shell.over-hero .nav-link-x{ color:rgba(255,255,255,.82); }
.nav-shell.over-hero .nav-link-x:hover{ color:#fff; background:rgba(255,255,255,.14); }
.nav-shell.over-hero .nav-link-x.active{ color:#fff; background:rgba(255,255,255,.16); }
.nav-shell.over-hero .btn-ink{ background:#fff; color:var(--ink); }
.nav-shell.over-hero .btn-ink:hover{ box-shadow:0 12px 30px rgba(0,0,0,.28); }
.nav-shell.over-hero .nav-toggle{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); color:#fff; }

/* =========================================================
   HERO — card video arrotondata con margini (stile nor.ma)
   ========================================================= */
.hero-wrap{ background:var(--white); padding:13px; }
.hero-card{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r-lg);
  min-height:calc(100vh - 26px);
  min-height:calc(100svh - 26px);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(1.3rem, 3vw, 2.4rem);
  padding-top:calc(var(--nav-h) + 10px);
  color:#fff;
  box-shadow:var(--sh-md);
}
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; background:#0E0F12; }
.hero-grad{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,9,12,.60) 0%, rgba(8,9,12,0) 24%),
    linear-gradient(0deg, rgba(8,9,12,.78) 0%, rgba(8,9,12,.20) 44%, rgba(8,9,12,0) 70%);
}

.hero-top{ display:flex; flex-wrap:wrap; gap:.55rem; }
.hpill{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:var(--r-pill); padding:.4rem .9rem;
  font-family:'IBM Plex Mono',monospace; font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:#EDEEF0;
}

.hero-bottom{ display:grid; grid-template-columns:1.35fr .95fr; gap:2rem; align-items:end; }
.eyebrow.on-dark{ color:rgba(255,255,255,.72); }
.hero-headline h1{
  font-family:'Archivo',sans-serif; font-weight:600; letter-spacing:-.035em; line-height:.98;
  font-size:clamp(2.5rem, 5.6vw, 4.8rem); margin:.9rem 0 0;
}
.hero-headline .soft{ color:rgba(255,255,255,.55); font-weight:400; }

.hero-glass{
  background:rgba(16,18,24,.42);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-md); padding:1.5rem;
  max-width:27rem; margin-left:auto;
  box-shadow:0 30px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12);
}
.hero-glass p{ color:#E4E6EA; font-size:1rem; margin:0 0 1.2rem; font-weight:300; }
.hero-glass-cta{ display:flex; flex-wrap:wrap; gap:.6rem; }
.btn-ghost-w{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.10); color:#fff;
  border:1px solid rgba(255,255,255,.35); border-radius:var(--r-pill);
  font-weight:500; font-size:.94rem; padding:.72rem 1.4rem;
  transition:transform .3s var(--ease), background .25s ease, border-color .25s ease;
}
.btn-ghost-w:hover{ color:#fff; background:rgba(255,255,255,.18); border-color:#fff; transform:translateY(-2px); }

@media (max-width:991.98px){
  .hero-bottom{ grid-template-columns:1fr; gap:1.4rem; }
  .hero-glass{ max-width:none; margin-left:0; }
}
@media (max-width:575.98px){
  .hero-card{ min-height:calc(100svh - 26px); padding-top:calc(var(--nav-h) + 4px); }
}

/* =========================================================
   TRUST STRIP
   ========================================================= */
.trust{ border-bottom:1px solid var(--hair); }
.trust-item{ padding:2.4rem 1.2rem; position:relative; }
.trust-item + .trust-item::before{
  content:""; position:absolute; left:0; top:28%; bottom:28%; width:1px; background:var(--hair);
}
.trust-item .n{
  font-family:'Archivo',sans-serif; font-weight:600; letter-spacing:-.03em;
  font-size:clamp(1.9rem,3vw,2.7rem); line-height:1;
}
.trust-item .l{
  font-family:'IBM Plex Mono',monospace; font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--grey); margin-top:.7rem;
}
@media (max-width:767.98px){ .trust-item{ padding:1.6rem .6rem; } .trust-item + .trust-item::before{ display:none; } }

/* =========================================================
   CARD (vetro "solido": niente backdrop-filter → zero jank)
   ========================================================= */
.card-x{
  position:relative; height:100%; overflow:hidden;
  background:rgba(255,255,255,.72);
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s ease;
}
.card-x::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(340px 240px at var(--gx,50%) var(--gy,0%), rgba(11,11,12,.05), transparent 65%);
  transition:opacity .4s ease;
}
.card-x:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); border-color:#D6D7DB; }
.card-x:hover::before{ opacity:1; }

.feat{ padding:1.9rem 1.6rem; }
.feat-ico{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  border:1px solid var(--hair); background:#fff; color:var(--ink);
  font-size:1.15rem; margin-bottom:1.3rem;
}
.feat h3{ font-family:'Archivo',sans-serif; font-weight:600; letter-spacing:-.02em; font-size:1.08rem; margin:0 0 .55rem; }
.feat p{ color:var(--grey); font-size:.93rem; margin:0; }
.feat .idx{ position:absolute; top:1.5rem; right:1.5rem; font-family:'IBM Plex Mono',monospace; font-size:.64rem; color:var(--grey-light); }

/* =========================================================
   ABOUT
   ========================================================= */
.about-stack{ position:relative; }
.about-stack .main{ border-radius:var(--r-lg); box-shadow:var(--sh-lg); width:100%; }
.about-stack .inset{
  position:absolute; right:-26px; bottom:-30px; width:44%;
  border-radius:var(--r-md); box-shadow:var(--sh-lg); border:5px solid #fff;
}
@media (max-width:575.98px){ .about-stack .inset{ right:8px; bottom:-18px; width:48%; border-width:4px; } }
.pull{
  font-family:'Archivo',sans-serif; font-weight:400; letter-spacing:-.02em;
  font-size:1.28rem; line-height:1.4; color:var(--ink);
  border-left:2px solid var(--ink); padding-left:1.3rem; margin:2rem 0;
}
.dark .pull{ color:#fff; border-left-color:#fff; }

/* =========================================================
   PRODOTTI — l'unica grande sezione scura del corpo pagina.
   ========================================================= */
.product{
  display:block; height:100%; overflow:hidden; border-radius:var(--r-md);
  background:rgba(255,255,255,.035); border:1px solid var(--hair-dark);
  transition:transform .45s var(--ease), border-color .35s ease, background .35s ease;
}
.product:hover{ transform:translateY(-5px); border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.055); }
.product .sig{ position:relative; height:200px; background:#0E0F12; border-bottom:1px solid var(--hair-dark); }
.product .sig svg{ width:100%; height:100%; display:block; }
.product .body{ padding:1.4rem 1.5rem 1.6rem; }
.product .head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.product h3{ font-family:'Archivo',sans-serif; font-weight:600; letter-spacing:-.025em; font-size:1.25rem; margin:0; color:#fff; }
.product p{ font-size:.92rem; margin:.7rem 0 0; color:#9DA2AB; }
.product .arrow{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  border:1px solid var(--hair-dark); display:grid; place-items:center; color:#fff; font-size:.85rem;
  transition:transform .4s var(--ease), background .3s ease, color .3s ease;
}
.product:hover .arrow{ background:#fff; color:var(--ink); transform:rotate(-45deg); }
.product .specs{
  margin-top:1.1rem; padding-top:.85rem; border-top:1px solid rgba(255,255,255,.09);
  display:flex; gap:1.2rem; font-family:'IBM Plex Mono',monospace; font-size:.66rem; color:#7E838C;
}

/* =========================================================
   PROGETTI
   ========================================================= */
.project{ display:block; }
.project .ph{ position:relative; overflow:hidden; border-radius:var(--r-md); background:var(--paper-2); }
.project .ph img{ width:100%; transition:transform 1s var(--ease); }
.project:hover .ph img{ transform:scale(1.04); }
.project .ph .veil{
  position:absolute; inset:0; opacity:0; transition:opacity .4s ease;
  background:linear-gradient(180deg, rgba(11,11,12,0) 45%, rgba(11,11,12,.5));
}
.project:hover .ph .veil{ opacity:1; }
.project .tag{ font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); }
.project h3{ font-family:'Archivo',sans-serif; font-weight:600; letter-spacing:-.025em; font-size:1.22rem; margin:.45rem 0 .35rem; }
.project p{ color:var(--grey); font-size:.92rem; margin:0; }

/* =========================================================
   PROCESSO
   ========================================================= */
.proc{ position:relative; }
.proc::before{ content:""; position:absolute; left:6%; right:6%; top:46px; height:1px; background:var(--hair); }
@media (max-width:991.98px){ .proc::before{ display:none; } }
.step{ text-align:center; padding:0 .7rem; position:relative; }
.step .node{
  width:46px; height:46px; margin:0 auto 1.4rem; border-radius:50%;
  background:#fff; border:1px solid var(--hair); position:relative; z-index:2;
  display:grid; place-items:center;
  font-family:'IBM Plex Mono',monospace; font-size:.75rem; color:var(--grey);
  transition:background .35s var(--ease), color .35s ease, border-color .35s ease, box-shadow .35s var(--ease);
}
.step:hover .node{ background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:0 10px 26px rgba(11,11,12,.22); }
.step h3{ font-family:'Archivo',sans-serif; font-weight:600; letter-spacing:-.02em; font-size:1.02rem; margin-bottom:.5rem; }
.step p{ color:var(--grey); font-size:.9rem; margin:0; }

/* =========================================================
   CLIENTI / MARQUEE (immagini)
   ========================================================= */
.marquee{
  overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee-track{ display:flex; align-items:center; gap:4rem; width:max-content; animation:slide 42s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes slide{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(-50%,0,0);} }
.marquee img{ height:30px; width:auto; opacity:.32; filter:grayscale(1); }
.quote{
  font-family:'Archivo',sans-serif; font-weight:500; letter-spacing:-.025em;
  font-size:clamp(1.4rem,2.6vw,2.1rem); line-height:1.32;
}

/* =========================================================
   FAQ
   ========================================================= */
.accordion-item{ background:transparent!important; border:0!important; border-top:1px solid var(--hair)!important; border-radius:0!important; }
.accordion-item:last-child{ border-bottom:1px solid var(--hair)!important; }
.accordion-button{
  background:transparent!important; color:var(--ink)!important; box-shadow:none!important;
  font-family:'Archivo',sans-serif; font-weight:500; letter-spacing:-.015em; font-size:1.05rem;
  padding:1.45rem .2rem;
}
.accordion-button::after{ width:.95rem; height:.95rem; background-size:.95rem; opacity:.45; }
.accordion-body{ padding:0 .2rem 1.5rem; color:var(--grey); font-size:.97rem; max-width:54rem; }

/* =========================================================
   LIGHT LAB
   ========================================================= */
.lab{ --k-rgb:255,169,102; }
.lab-panel{
  background:rgba(255,255,255,.05);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--hair-dark);
  border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.4rem);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.lab-read{ display:flex; align-items:baseline; gap:.6rem; }
.lab-read b{ font-family:'Archivo',sans-serif; font-weight:600; letter-spacing:-.04em; font-size:3.2rem; line-height:1; color:#fff; }
.lab-read .u{ font-family:'IBM Plex Mono',monospace; font-size:1rem; color:rgb(var(--k-rgb)); }
.lab-name{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#8A8F98; margin-top:.35rem; }

.spectrum{
  height:8px; border-radius:var(--r-pill); margin:1.6rem 0 0;
  background:linear-gradient(90deg,#FF9040 0%,#FFB877 20%,#FFE2C4 42%,#FFF8F1 58%,#EAF1FF 80%,#CBDCFF 100%);
}
input[type=range].kslider{
  -webkit-appearance:none; appearance:none; width:100%; height:30px;
  background:transparent; margin-top:-19px; cursor:pointer;
}
input[type=range].kslider::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:#fff; border:2px solid #fff;
  box-shadow:0 0 0 5px rgba(var(--k-rgb),.28), 0 4px 14px rgba(0,0,0,.5);
  transition:box-shadow .3s ease;
}
input[type=range].kslider::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid #fff;
  box-shadow:0 0 0 5px rgba(var(--k-rgb),.28);
}
.scale{ display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:.62rem; color:#71767F; margin-top:.6rem; }

.presets{ display:flex; gap:.4rem; flex-wrap:wrap; margin:1.5rem 0 0; }
.preset{
  flex:1 1 0; min-width:88px; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid var(--hair-dark);
  border-radius:var(--r-sm); padding:.5rem .3rem; text-align:center;
  font-family:'IBM Plex Mono',monospace; font-size:.65rem; color:#B9BDC5;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.preset:hover{ background:rgba(255,255,255,.1); color:#fff; }
.preset[aria-pressed="true"]{ background:rgba(var(--k-rgb),.18); border-color:rgba(var(--k-rgb),.65); color:#fff; }
.preset span{ display:block; font-size:.57rem; color:#7E838C; margin-top:.15rem; }

.spec-row{
  display:flex; justify-content:space-between; padding:.6rem 0;
  border-top:1px solid rgba(255,255,255,.08);
  font-family:'IBM Plex Mono',monospace; font-size:.74rem;
}
.spec-row .k{ color:#7E838C; }
.spec-row .v{ color:#EDEEF0; }

.lab-scene{
  position:relative; border-radius:var(--r-md); overflow:hidden;
  background:#0A0B0D; border:1px solid var(--hair-dark); aspect-ratio:4/3; min-height:280px;
}
.lab-scene svg{ position:absolute; inset:0; width:100%; height:100%; }
.lab-badge{
  position:absolute; left:14px; top:14px; z-index:2;
  font-family:'IBM Plex Mono',monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:#B9BDC5; background:rgba(255,255,255,.07); border:1px solid var(--hair-dark);
  padding:.3rem .7rem; border-radius:var(--r-pill);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}

/* =========================================================
   CONTATTO
   ========================================================= */
.form-x{
  background:rgba(255,255,255,.05)!important;
  border:1px solid var(--hair-dark)!important;
  color:#fff!important; border-radius:var(--r-sm)!important;
  padding:.8rem 1rem!important; font-weight:300; font-size:.95rem;
  transition:border-color .25s ease, background .25s ease;
}
.form-x::placeholder{ color:#71767F; }
.form-x:focus{ background:rgba(255,255,255,.08)!important; border-color:#fff!important; box-shadow:none!important; }
select.form-x option{ background:var(--ink); color:#fff; }
.label-x{ font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color:#8A8F98; margin-bottom:.45rem; display:block; }
.form-check-input{ background-color:rgba(255,255,255,.08); border-color:var(--hair-dark); }
.form-check-input:checked{ background-color:#fff; border-color:#fff; }
.form-check-input:checked[type=checkbox]{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230B0B0C' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.contact-line{ display:flex; align-items:center; gap:.75rem; padding:.55rem 0; color:#B9BDC5; font-size:.96rem; }
.contact-line i{ color:#fff; opacity:.6; }
.sent{ display:none; border:1px solid var(--hair-dark); border-radius:var(--r-md); padding:1.2rem 1.3rem; background:rgba(255,255,255,.05); }

/* light variant del form (usato su sfondo chiaro, es. pagina Contacts) */
.form-x-light{
  background:#fff!important;
  border:1px solid var(--hair)!important;
  color:var(--ink)!important; border-radius:var(--r-sm)!important;
  padding:.8rem 1rem!important; font-weight:300; font-size:.95rem;
  transition:border-color .25s ease, background .25s ease;
}
.form-x-light::placeholder{ color:var(--grey-light); }
.form-x-light:focus{ border-color:var(--ink)!important; box-shadow:none!important; }
.label-x-light{ font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color:var(--grey); margin-bottom:.45rem; display:block; }
.sent-light{ display:none; border:1px solid var(--hair); border-radius:var(--r-md); padding:1.2rem 1.3rem; background:var(--paper); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--ink); color:#B9BDC5; padding:4.5rem 0 2rem; }
.site-footer h6{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:#71767F; margin-bottom:1.3rem;
}
.site-footer a{ color:#B9BDC5; font-size:.94rem; transition:color .2s ease; }
.site-footer a:hover{ color:#fff; }
.site-footer .payoff{ font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:#71767F; margin-top:1rem; }
.soc{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--hair-dark);
  display:grid; place-items:center; color:#B9BDC5;
  transition:transform .3s var(--ease), border-color .3s ease, color .3s ease;
}
.soc:hover{ color:#fff; border-color:#fff; transform:translateY(-3px); }
.bottom-bar{
  border-top:1px solid var(--hair-dark); margin-top:3.4rem; padding-top:1.5rem;
  font-size:.8rem; color:#71767F;
}

/* =========================================================
   MOTION
   ========================================================= */
.rv{ opacity:0; transform:translate3d(0,22px,0); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1!important; transform:none!important; }
  *,*::before,*::after{ animation:none!important; transition:none!important; }
}

/* =========================================================
   PAGINE INTERNE — elementi condivisi
   (breadcrumb, header di pagina, fasce CTA di chiusura)
   ========================================================= */

/* Breadcrumb */
.breadcrumb-x{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  font-family:'IBM Plex Mono', monospace; font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--grey-light); margin-bottom:1.4rem;
}
.breadcrumb-x a{ color:var(--grey); transition:color .2s ease; }
.breadcrumb-x a:hover{ color:var(--ink); }
.breadcrumb-x .sep{ font-size:.6rem; opacity:.6; }
.breadcrumb-x .current{ color:var(--ink); }
.dark .breadcrumb-x, .on-dark-crumb{ color:rgba(255,255,255,.4); }
.dark .breadcrumb-x a, .on-dark-crumb a{ color:rgba(255,255,255,.68); }
.dark .breadcrumb-x a:hover, .on-dark-crumb a:hover{ color:#fff; }
.dark .breadcrumb-x .current, .on-dark-crumb .current{ color:#fff; }

/* Header di pagina interna (sostituisce l'hero video sulle pagine secondarie) */
.page-hero{
  padding:calc(var(--nav-h) + 3.6rem) 0 3.6rem;
  border-bottom:1px solid var(--hair);
  background:var(--white);
}
.page-hero .section-title{ font-size:clamp(2.3rem, 5vw, 4.1rem); }
.page-hero .lead{ max-width:42rem; }
.page-hero.dark{ border-bottom-color:var(--hair-dark); }

/* Piccolo avviso discreto (es. pagina Products) */
.notice-line{
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:.82rem; color:var(--grey-light); max-width:38rem; margin-top:1.1rem;
}
.notice-line i{ margin-top:.18rem; flex:0 0 auto; }
.notice-line a{ color:var(--grey); text-decoration:underline; text-underline-offset:2px; }
.notice-line a:hover{ color:var(--ink); }

/* Fascia CTA di chiusura, riutilizzabile su tutte le pagine interne */
.cta-band{
  border-radius:var(--r-lg);
  padding:clamp(2.2rem, 5vw, 3.6rem);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.6rem;
}
.cta-band.on-dark{ background:var(--ink); color:#fff; }
.cta-band.on-paper{ background:var(--paper); }
.cta-band h3{
  font-family:'Archivo',sans-serif; font-weight:600; letter-spacing:-.025em;
  font-size:clamp(1.5rem, 2.6vw, 2.1rem); margin:0;
}
.cta-band p{ margin:.5rem 0 0; color:var(--grey); max-width:32rem; }
.cta-band.on-dark p{ color:#B9BDC5; }

/* =========================================================
   PRODUCTS — griglia categorie
   ========================================================= */
.cat-grid .cat-card{
  display:block; position:relative; overflow:hidden; border-radius:var(--r-md);
  background:var(--paper-2); border:1px solid var(--hair);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.cat-grid .cat-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); }
.cat-grid .cat-thumb{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--ink); }
.cat-grid .cat-thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease), filter .6s ease;
  filter:grayscale(.15);
}
.cat-grid .cat-card:hover .cat-thumb img{ transform:scale(1.06); filter:grayscale(0); }
.cat-grid .cat-thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,12,0) 40%, rgba(11,11,12,.62) 100%);
}
.cat-grid .cat-tag{
  position:absolute; left:1.2rem; top:1.2rem; z-index:2;
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  padding:.32rem .7rem; border-radius:var(--r-pill); backdrop-filter:blur(6px);
}
.cat-grid .cat-body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.4rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.cat-grid .cat-body h3{
  font-family:'Archivo',sans-serif; font-weight:600; letter-spacing:-.02em; font-size:1.22rem; color:#fff; margin:0;
  display:flex; align-items:baseline; gap:.5rem;
}
.cat-grid .cat-body h3 .dash{ color:rgba(255,255,255,.5); font-weight:400; }
.cat-grid .discover{
  display:inline-flex; align-items:center; gap:.4rem; color:#fff;
  font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  opacity:0; transform:translateX(-6px); transition:opacity .35s ease, transform .35s ease; white-space:nowrap;
}
.cat-grid .cat-card:hover .discover{ opacity:1; transform:none; }

/* =========================================================
   SINGLE PRODUCT
   ========================================================= */
.pg-code{
  font-family:'IBM Plex Mono',monospace; font-size:.74rem; letter-spacing:.1em;
  color:var(--grey); border:1px solid var(--hair); border-radius:var(--r-pill);
  padding:.35rem .9rem; display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
}
.pg-sticky{ position:sticky; top:calc(var(--nav-h) + 24px); }
.pg-stage{
  border-radius:var(--r-lg); background:var(--paper); border:1px solid var(--hair);
  padding:clamp(2rem,5vw,3.5rem); display:flex; align-items:center; justify-content:center;
  aspect-ratio:1/1; overflow:hidden; position:relative;
}
.pg-stage img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  transition:opacity .18s ease, transform .5s var(--ease);
}
.pg-stage:hover img.is-drawing{ transform:scale(1.7); }
.pg-thumbs{ display:flex; gap:.7rem; margin-top:1rem; }
.pg-thumb{
  width:84px; height:84px; border-radius:var(--r-sm); overflow:hidden; cursor:pointer;
  border:1.5px solid var(--hair); padding:.4rem; background:var(--paper);
  transition:border-color .25s ease;
}
.pg-thumb img{ width:100%; height:100%; object-fit:contain; }
.pg-thumb.active, .pg-thumb:hover{ border-color:var(--ink); }

.spec-grid-x{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--hair); }
.spec-grid-x .spec-item{
  display:flex; align-items:center; gap:.7rem; padding:.95rem 0;
  border-bottom:1px solid var(--hair);
}
.spec-grid-x .spec-item:nth-child(odd){ padding-right:1rem; }
.spec-grid-x .spec-item:nth-child(even){ padding-left:1rem; border-left:1px solid var(--hair); }
.spec-grid-x .s-ico{
  width:34px; height:34px; border-radius:9px; background:var(--paper); border:1px solid var(--hair);
  display:grid; place-items:center; color:var(--ink); font-size:.92rem; flex:0 0 auto;
}
.spec-grid-x .s-txt{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.spec-grid-x .s-label{ font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); }
.spec-grid-x .s-val{ font-size:.94rem; color:var(--ink); font-weight:400; }
@media (max-width:575.98px){
  .spec-grid-x{ grid-template-columns:1fr; }
  .spec-grid-x .spec-item:nth-child(even){ padding-left:0; border-left:0; }
}

.dl-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; margin-top:1.6rem; }
@media (max-width:575.98px){ .dl-row{ grid-template-columns:1fr 1fr; } }
.dl-btn{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  border:1px solid var(--hair); border-radius:var(--r-sm); padding:.85rem .6rem;
  font-family:'IBM Plex Mono',monospace; font-size:.78rem; letter-spacing:.04em; color:var(--ink);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.dl-btn:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.dl-btn.is-disabled{ color:var(--grey-light); border-color:var(--hair); pointer-events:none; opacity:.6; }

.cert-strip{ background:var(--ink); padding:2.4rem 0; }
.cert-wrap{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.cert-wrap .cert-label{
  font-family:'IBM Plex Mono',monospace; font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:#8A8F98;
}
.cert-card{
  background:#fff; border-radius:var(--r-sm); padding:1.1rem 1.8rem;
  box-shadow:0 20px 46px rgba(0,0,0,.35); display:inline-flex; align-items:center;
}

.pg-desc h2{ font-family:'Archivo',sans-serif; font-weight:600; letter-spacing:-.025em; }
.pg-desc .cap{
  float:left; font-family:'Archivo',sans-serif; font-weight:600; font-size:3.6rem; line-height:.8;
  padding:.1rem .6rem 0 0; color:var(--ink);
}

/* =========================================================
   ABOUT — hero immagine + ticker
   ========================================================= */
.about-hero{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r-lg); margin:13px; margin-top:calc(13px);
  min-height:78vh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(1.3rem,3vw,2.4rem); padding-top:calc(var(--nav-h) + 10px); color:#fff;
}
.about-hero .hero-bg{ z-index:-2; }
.about-hero .hero-grad{ z-index:-1;
  background:
    linear-gradient(180deg, rgba(8,9,12,.55) 0%, rgba(8,9,12,.15) 30%),
    linear-gradient(0deg, rgba(8,9,12,.9) 0%, rgba(8,9,12,.35) 46%, rgba(8,9,12,.05) 72%);
}
.about-hero .claim{
  font-family:'Archivo',sans-serif; font-weight:600; letter-spacing:-.03em; line-height:1.02;
  font-size:clamp(2rem, 4.4vw, 3.6rem); max-width:52rem; margin:.9rem 0 1.6rem;
}
.ticker{ overflow:hidden; border-top:1px solid rgba(255,255,255,.2); padding-top:1.1rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker-track{ display:flex; width:max-content; animation:tickerslide 26s linear infinite; }
.ticker-item{
  display:flex; align-items:center; gap:1.6rem; padding-right:1.6rem; white-space:nowrap;
  font-family:'Archivo',sans-serif; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(2.2rem, 6vw, 4.4rem); line-height:1;
  color:transparent; -webkit-text-stroke:1.2px rgba(255,255,255,.7);
}
.ticker-item i{ font-size:.5em; -webkit-text-stroke:0; color:rgba(255,255,255,.55); }
@keyframes tickerslide{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(-50%,0,0);} }

.narrative{ max-width:46rem; }
.narrative p{ font-size:1.05rem; color:var(--ink-soft); margin-bottom:1.3rem; }
.narrative h3{
  font-family:'Archivo',sans-serif; font-weight:600; letter-spacing:-.02em;
  font-size:1.5rem; margin:2.6rem 0 1.1rem;
}
.narrative h3:first-child{ margin-top:0; }

.video-module{
  position:relative; isolation:isolate; overflow:hidden; border-radius:var(--r-lg);
  min-height:64vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
  color:#fff; text-align:center;
}
.video-module .hero-bg{ z-index:-2; }
.video-module .hero-grad{ z-index:-1; background:linear-gradient(0deg, rgba(8,9,12,.55), rgba(8,9,12,.55)); }
.video-play-btn{
  width:84px; height:84px; border-radius:50%; border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.12); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:grid; place-items:center; color:#fff; font-size:1.6rem;
  transition:transform .35s var(--ease), background .3s ease;
}
.video-play-btn:hover{ transform:scale(1.08); background:rgba(255,255,255,.2); }
.video-module .cap{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.85); }

.mv-stack{ position:relative; padding-bottom:20%; }
.mv-stack .mv-main{ border-radius:var(--r-lg); box-shadow:var(--sh-lg); width:100%; aspect-ratio:4/5; object-fit:cover; }
.mv-stack .mv-front{
  position:absolute; left:-8%; bottom:0; width:52%; border-radius:var(--r-md);
  box-shadow:var(--sh-lg); border:6px solid var(--ink); aspect-ratio:4/5; object-fit:cover;
}
@media (max-width:991.98px){ .mv-stack{ padding-bottom:24%; } .mv-stack .mv-front{ left:0; width:46%; } }

/* =========================================================
   SERVICES
   ========================================================= */
.icon-feat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem 1.8rem; }
@media (max-width:575.98px){ .icon-feat-grid{ grid-template-columns:1fr; } }
.icon-feat{ display:flex; gap:1rem; }
.icon-feat .ico{
  width:40px; height:40px; border-radius:10px; border:1px solid var(--hair); background:#fff;
  display:grid; place-items:center; color:var(--ink); font-size:1.05rem; flex:0 0 auto;
}
.dark .icon-feat .ico{ background:rgba(255,255,255,.05); border-color:var(--hair-dark); color:#fff; }
.icon-feat h4{ font-family:'Archivo',sans-serif; font-weight:600; letter-spacing:-.015em; font-size:1rem; margin:0 0 .35rem; }
.icon-feat p{ font-size:.88rem; color:var(--grey); margin:0; }
.dark .icon-feat p{ color:#9DA2AB; }

.tick-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.1rem; }
.tick-list li{ display:flex; align-items:flex-start; gap:.9rem; font-size:1rem; color:var(--ink-soft); }
.dark .tick-list li{ color:#D5D8DD; }
.tick-list i{ color:var(--ink); margin-top:.28rem; flex:0 0 auto; }
.dark .tick-list i{ color:#fff; }

.callout-big{
  text-align:center; max-width:56rem; margin:0 auto;
  font-family:'Archivo',sans-serif; font-weight:500; letter-spacing:-.02em;
  font-size:clamp(1.4rem,2.8vw,2.15rem); line-height:1.4; color:var(--ink);
}
.callout-big span{ display:block; color:var(--grey); font-weight:400; font-size:.85em; margin-top:.9rem; }

.side-media{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); }
.side-media img{ width:100%; display:block; }

.gallery-duo{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:767.98px){ .gallery-duo{ grid-template-columns:1fr; } }
.gallery-duo img{ border-radius:var(--r-md); width:100%; aspect-ratio:4/3; object-fit:cover; }

/* =========================================================
   CONTACTS
   ========================================================= */
.info-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:991.98px){ .info-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:575.98px){ .info-row{ grid-template-columns:1fr; } }
.info-card{
  display:block;
  border:1px solid var(--hair); border-radius:var(--r-md); padding:1.5rem;
  background:#fff; transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.info-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.info-card .ico{
  width:40px; height:40px; border-radius:10px; background:var(--paper); border:1px solid var(--hair);
  display:grid; place-items:center; color:var(--ink); font-size:1.05rem; margin-bottom:1.1rem;
}
.info-card .lbl{ font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-bottom:.4rem; }
.info-card .val{ font-size:.98rem; color:var(--ink); }
.info-card .val a:hover{ text-decoration:underline; }

.map-block{
  position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/8; background:var(--paper-2);
}
.map-block img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); }
.map-block .pin{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-100%);
  width:44px; height:44px; border-radius:50% 50% 50% 0; background:var(--ink);
  display:grid; place-items:center; color:#fff; font-size:1rem; transform-origin:bottom center;
  box-shadow:0 10px 24px rgba(0,0,0,.3);
}
.map-block .pin i{ transform:rotate(45deg); }
.map-block .pin{ transform:translate(-50%,-100%) rotate(-45deg); }

.hours-list{ display:flex; flex-direction:column; }
.hours-list .row-h{ display:flex; justify-content:space-between; padding:.7rem 0; border-bottom:1px solid var(--hair); font-size:.92rem; }
.hours-list .row-h:last-child{ border-bottom:0; }
.hours-list .row-h span:first-child{ color:var(--grey); }