/* ============================================================================
   DIGITAL VALCORE — Design System "ARC"
   Forme tonde derivate dall'isotipo (la D con l'arco + la V arancione),
   superfici tech, palette di brand: nero, bianco, arancione (accent ≤5%).
   Tipografia: Outfit (display) + Inter (testo), self-hosted.
   Tutto in rem: il widget di accessibilità scala html{font-size}.
   ========================================================================== */

/* --------------------------------------------------------------- 1. FONT */
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('../fonts/outfit-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('../fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* --------------------------------------------- 2. PROPRIETÀ ANIMABILI CSS */
@property --ring{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --sweep{syntax:'<percentage>';inherits:false;initial-value:-40%}
@property --halo{syntax:'<number>';inherits:false;initial-value:0}

/* ------------------------------------------------------------- 3. TOKENS */
:root{
  /* superfici */
  --bg:#050506;
  --bg-2:#0a0a0c;
  --surf:linear-gradient(165deg,#141416,#0c0c0e);
  --surf-2:linear-gradient(165deg,#1a1a1d,#101012);
  --paper:#f4f2ee;
  --paper-2:#e8e5df;

  /* inchiostri su scuro */
  --ink:#fff;
  --ink-2:#b9b9bd;
  --ink-3:#8e8e94;
  --ink-4:#7e7e85;

  /* inchiostri su chiaro */
  --ink-d:#0a0a0b;
  --ink-d2:#3b3a38;
  --ink-d3:#5b5955;

  /* accent */
  --or:#ff751f;
  --or-2:#ff9a52;
  --or-deep:#e85d00;
  --or-soft:rgba(255,117,31,.12);
  --or-line:rgba(255,117,31,.28);
  --green:#25d366;

  /* linee */
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.16);
  --line-d:rgba(10,10,10,.1);
  --line-d2:rgba(10,10,10,.2);

  /* raggi — la firma del brand: angolo alto-destro molto arrotondato (la "D") */
  --r-xs:.5rem;
  --r-sm:.9rem;
  --r-md:1.35rem;
  --r-lg:2rem;
  --r-xl:3.25rem;
  --r-pill:999px;

  /* ombre */
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 1.25rem 3rem rgba(0,0,0,.45);
  --sh-3:0 2rem 4.5rem rgba(0,0,0,.6);
  --sh-or:0 1.25rem 3rem rgba(255,117,31,.16);

  /* tipografia */
  --display:'Outfit',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --text:'Inter','Outfit',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;

  --t-micro:clamp(.625rem,.58rem + .18vw,.72rem);
  --t-small:clamp(.78rem,.74rem + .2vw,.875rem);
  --t-body:clamp(.95rem,.9rem + .25vw,1.0625rem);
  --t-lead:clamp(1.05rem,.98rem + .45vw,1.3rem);
  --t-h4:clamp(1.05rem,.98rem + .4vw,1.25rem);
  --t-h3:clamp(1.25rem,1.1rem + .7vw,1.7rem);
  --t-h2:clamp(1.85rem,1.4rem + 2.1vw,3.4rem);
  --t-h1:clamp(2.2rem,1.4rem + 3.4vw,4.6rem);
  --t-mega:clamp(3rem,1.4rem + 7vw,8.5rem);

  /* ritmo */
  --gut:clamp(1.15rem,.7rem + 2vw,2.75rem);
  --sec:clamp(4.5rem,2.5rem + 7vw,9rem);
  --maxw:84rem;
  --hdr-h:4.25rem;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-soft:cubic-bezier(.4,0,.2,1);

  color-scheme:dark;
}

/* ------------------------------------------------------------- 4. RESET */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  font-size:100%;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr-h) + 2rem);
}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--text);
  font-size:var(--t-body);
  line-height:1.65;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{padding:0;list-style:none}
[hidden]{display:none!important}
::selection{background:var(--or);color:#000}

:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:var(--r-xs)}
.skip{
  position:fixed;top:.75rem;left:.75rem;z-index:2000;
  padding:.7rem 1.2rem;background:var(--or);color:#000;border-radius:var(--r-pill);
  font:600 var(--t-small)/1 var(--text);
  transform:translateY(-200%);transition:transform .25s var(--e-out);
}
.skip:focus{transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

/* ------------------------------------------------- 5. FONDALE TECH */
.backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--bg)}
/* matrice di punti: leggibile come "dato", non come griglia da wireframe */
.backdrop::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at center,rgba(255,255,255,.14) 1px,transparent 1.2px);
  background-size:2.25rem 2.25rem;
  mask-image:radial-gradient(ellipse 110% 80% at 50% 0%,#000 10%,transparent 70%);
  opacity:.5;
}
/* aurora arancione sfumata */
.backdrop::after{
  content:'';position:absolute;left:50%;top:-30vh;translate:-50% 0;
  width:min(100rem,150vw);aspect-ratio:1.4;
  background:
    radial-gradient(circle at 42% 45%,rgba(255,117,31,.17),transparent 55%),
    radial-gradient(circle at 63% 38%,rgba(255,154,82,.09),transparent 48%);
  filter:blur(30px);
}

/* ---------------------------------------------------------- 6. TIPOGRAFIA */
h1,h2,h3,h4,h5,h6{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.03em;text-wrap:balance;overflow-wrap:normal;hyphens:manual}
h1{font-size:var(--t-h1);letter-spacing:-.04em}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.18;letter-spacing:-.025em}
h4{font-size:var(--t-h4);line-height:1.28;letter-spacing:-.02em;font-weight:700}
h5,h6{font-size:var(--t-body);letter-spacing:-.015em;font-weight:700}
p{text-wrap:pretty}
strong,b{font-weight:650;color:var(--ink)}

.mega-type{font-size:var(--t-mega);line-height:.88;letter-spacing:-.05em;font-weight:900}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--ink-2);max-width:60ch}
.muted{color:var(--ink-3)}
.prose p+p{margin-top:1.1em}
.prose p{color:var(--ink-2);max-width:72ch}
.prose a{color:var(--or);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.prose a:hover{color:var(--ink)}
.grad{background:linear-gradient(100deg,var(--or),var(--or-2) 55%,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Occhiello: pillola monospaziata con punto pulsante */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.4rem .85rem .4rem .7rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.eyebrow::before{content:'';width:.4rem;height:.4rem;border-radius:50%;background:var(--or);flex:0 0 auto}
.eyebrow b{color:var(--or);font-weight:600}
.on-paper .eyebrow{background:rgba(10,10,10,.04);border-color:var(--line-d);color:var(--ink-d3)}
.eyebrow-c{margin-inline:auto}

.caret{display:inline-block;width:.08em;height:.82em;margin-left:.12em;background:var(--or);border-radius:2px;vertical-align:-.03em;animation:blink 1.15s steps(2,start) infinite}
@keyframes blink{50%{opacity:0}}
.num{font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.045em;line-height:.9}

/* ------------------------------------------------------------ 7. LAYOUT */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:58rem}
.wrap-wide{max-width:96rem}
section{position:relative}
.sec{padding-block:var(--sec)}
.sec-sm{padding-block:calc(var(--sec)*.7)}
.sec-line{border-top:1px solid var(--line)}
.on-paper.sec-line{border-top-color:transparent}

.sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;margin-bottom:clamp(2.2rem,1rem + 3vw,3.75rem)}
.sec-head-c{align-items:center;text-align:center}
.sec-head-c .lead{margin-inline:auto}
.sec-head-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.sec-head-split > *{min-width:0}

/* Sezione chiara — bordi tondi a tutta larghezza per staccare dal nero */
.on-paper{background:var(--paper);color:var(--ink-d);border-radius:var(--r-xl)}
.sec.on-paper,.sec-sm.on-paper{width:min(100% - var(--gut) * 2, var(--maxw));margin-inline:auto}
.sec.on-paper > .wrap,.sec-sm.on-paper > .wrap{max-width:none;padding-inline:clamp(1.25rem,3vw,3.25rem)}
.on-paper h1,.on-paper h2,.on-paper h3,.on-paper h4,.on-paper h5,.on-paper h6{color:var(--ink-d)}
.on-paper b,.on-paper strong,.on-paper dd,.on-paper .num,.on-paper .v{color:var(--ink-d)}
.on-paper .num em{color:var(--or)}
.on-paper .lead,.on-paper .prose p{color:var(--ink-d2)}
.on-paper .muted{color:var(--ink-d3)}
.on-paper .prose a{color:var(--ink-d);text-decoration-color:var(--or);text-decoration-thickness:2px}
.paper-wrap{padding-inline:var(--gut)}
.paper-wrap > .on-paper{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.25rem,3vw,3.5rem)}

/* ----------------------------------------------------------- 8. BOTTONI */
.btn{
  --sweep:-40%;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  max-width:100%;text-align:center;
  padding:.9rem 1.55rem;border:1px solid transparent;border-radius:var(--r-pill);
  font-family:var(--text);font-size:var(--t-small);font-weight:600;
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color .3s var(--e-out),background-color .3s var(--e-out),border-color .3s var(--e-out),transform .3s var(--e-out),box-shadow .35s var(--e-out);
}
.btn svg{width:1em;height:1em;flex:0 0 auto;transition:transform .35s var(--e-out)}
.btn:hover svg{transform:translateX(.25rem)}
.btn::after{
  content:'';position:absolute;inset:-50% auto -50% var(--sweep);z-index:-1;width:45%;
  transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transition:--sweep .6s var(--e-out);
}
.btn:hover::after{--sweep:140%}
.btn-primary{background:linear-gradient(100deg,var(--or),var(--or-deep));color:#000;border-color:transparent;box-shadow:0 .6rem 1.6rem rgba(255,117,31,.24)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--sh-or)}
.btn-ghost{border-color:var(--line-2);color:var(--ink);background:rgba(255,255,255,.03);backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--or-line);color:var(--or);background:var(--or-soft)}
.btn-solid{background:var(--ink);color:#000;border-color:var(--ink)}
.btn-solid:hover{background:var(--or);border-color:var(--or)}
.on-paper .btn-ghost{border-color:var(--line-d2);color:var(--ink-d);background:rgba(255,255,255,.5)}
.on-paper .btn-ghost:hover{border-color:var(--ink-d);background:var(--ink-d);color:var(--paper)}
.btn-lg{padding:1.1rem 2rem;font-size:var(--t-body)}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;max-width:100%}
.btn-row > *{min-width:0}

.tlink{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--or);transition:gap .3s var(--e-out),color .3s;
}
.tlink::after{content:'→';transition:transform .3s var(--e-out)}
.tlink:hover{color:var(--ink)}
.tlink:hover::after{transform:translateX(.25rem)}
.on-paper .tlink:hover{color:var(--ink-d)}

/* ------------------------------------------------------------ 9. HEADER */
/* Barra flottante a pillola, vetro smerigliato: linguaggio "tech" moderno. */
.hdr{
  position:fixed;left:0;right:0;z-index:900;
  top:calc(env(safe-area-inset-top,0px) + .7rem);
  padding-inline:var(--gut);transition:top .35s var(--e-out);
}
.hdr-in{
  max-width:var(--maxw);margin-inline:auto;height:var(--hdr-h);
  display:flex;align-items:center;gap:clamp(.75rem,2.5vw,2rem);
  padding-inline:clamp(.9rem,2vw,1.4rem);
  border-radius:var(--r-pill);border:1px solid var(--line);
  background:rgba(10,10,12,.62);
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:var(--sh-1);
  transition:background-color .35s var(--e-out),border-color .35s,box-shadow .35s;
}
.hdr.is-stuck .hdr-in{background:rgba(8,8,10,.86);border-color:var(--line-2);box-shadow:var(--sh-2)}
.hdr.is-open .hdr-in{background:rgba(8,8,10,.96);border-radius:var(--r-lg)}
.hdr-logo{flex:0 0 auto;display:block}
.hdr-logo img{height:1.45rem;width:auto}

.nav{display:flex;align-items:center;gap:clamp(.15rem,1vw,.6rem);margin-left:auto}
.nav-link{
  position:relative;display:inline-flex;align-items:center;gap:.3rem;
  padding:.5rem .7rem;border-radius:var(--r-pill);
  font-size:var(--t-small);font-weight:500;color:var(--ink-2);
  transition:color .25s,background-color .25s;
}
.nav-link:hover,.nav-item:hover>.nav-link{color:var(--ink);background:rgba(255,255,255,.06)}
.nav-link[aria-current="page"]{color:var(--or);background:var(--or-soft)}
.nav-item{position:relative;display:flex;align-items:center}
.nav-chev{
  background:none;border:0;padding:.5rem .3rem .5rem 0;cursor:pointer;color:var(--ink-4);
  display:inline-flex;align-items:center;border-radius:var(--r-pill);
}
.nav-chev svg{width:.7rem;height:.7rem;transition:transform .35s var(--e-out)}
.nav-item.is-open .nav-chev svg{transform:rotate(180deg)}
.nav-item.is-open .nav-chev{color:var(--or)}
.nav-cta{margin-left:.4rem}

/* --- MEGA MENU --------------------------------------------------------- */
.mega{
  position:fixed;left:var(--gut);right:var(--gut);
  top:calc(env(safe-area-inset-top,0px) + var(--hdr-h) + 1.1rem);
  max-width:var(--maxw);margin-inline:auto;
  background:linear-gradient(180deg,rgba(9,9,11,.99),rgba(6,6,8,.99));
  backdrop-filter:blur(30px) saturate(1.4);-webkit-backdrop-filter:blur(30px) saturate(1.4);
  border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translateY(-.6rem) scale(.99);transform-origin:top center;
  transition:opacity .3s var(--e-out),transform .35s var(--e-out),visibility .35s;
  max-height:calc(100dvh - var(--hdr-h) - 3rem);overflow-y:auto;overscroll-behavior:contain;
}
.nav-item.is-open .mega{opacity:1;visibility:visible;transform:none}
.mega-in{
  padding:clamp(1.5rem,2.5vw,2.25rem);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,2rem);
}
.mega-col{display:flex;flex-direction:column;gap:.1rem}
.mega-col > .eyebrow{margin-bottom:.7rem;align-self:flex-start}
.mega-a{
  display:block;padding:.6rem .8rem;border-radius:var(--r-sm);position:relative;
  transition:background-color .28s var(--e-out),transform .28s var(--e-out);
}
.mega-a:hover{background:rgba(255,255,255,.05);transform:translateX(.25rem)}
.mega-a b{display:block;font-family:var(--display);font-weight:650;font-size:var(--t-small);letter-spacing:-.015em;color:var(--ink)}
.mega-a:hover b{color:var(--or)}
.mega-a span{display:block;font-size:var(--t-micro);color:var(--ink-4);line-height:1.5;margin-top:.15rem}
.mega-feat{
  grid-column:1/-1;margin-top:.4rem;
  border:1px solid var(--or-line);border-radius:var(--r-md);
  background:linear-gradient(100deg,var(--or-soft),transparent 62%);
  padding:1.1rem 1.4rem;display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.6rem;justify-content:space-between;
}
.mega-feat > div{display:flex;flex-direction:column;gap:.35rem;min-width:min(100%,22rem)}
.mega-feat h3{font-size:var(--t-h4)}
.mega-feat p{font-size:var(--t-small);color:var(--ink-2)}

/* --- DROPDOWN ---------------------------------------------------------- */
.drop{
  position:absolute;top:calc(100% + .9rem);left:50%;translate:-50% 0;min-width:16rem;
  background:rgba(10,10,12,.95);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid var(--line-2);border-radius:var(--r-md);padding:.5rem;box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translateY(-.4rem);
  transition:opacity .25s var(--e-out),transform .3s var(--e-out),visibility .3s;
}
.nav-item.is-open .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.62rem .85rem;border-radius:var(--r-sm);font-size:var(--t-small);color:var(--ink-2);
  transition:background-color .25s,color .25s,transform .25s var(--e-out);
}
.drop a:hover{background:rgba(255,255,255,.06);color:var(--ink);transform:translateX(.2rem)}
.drop a svg{width:.7rem;height:.7rem;opacity:.45}

/* --- BURGER ------------------------------------------------------------ */
.burger{
  display:none;width:2.5rem;height:2.5rem;margin-left:auto;flex:0 0 auto;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:var(--r-pill);cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:.26rem;
}
.burger span{display:block;width:1rem;height:1.5px;border-radius:2px;background:var(--ink);transition:transform .3s var(--e-out),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.27rem) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-.27rem) rotate(-45deg)}

/* ------------------------------------------------------------- 10. HERO */
.hero{
  position:relative;min-height:100svh;
  padding-top:calc(var(--hdr-h) + clamp(2.5rem,5.5vw,4.5rem));
  padding-bottom:clamp(2.5rem,5vw,4.5rem);
  display:flex;align-items:center;overflow:hidden;
}
.hero-in{position:relative;z-index:2;width:100%}
.hero-spot{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(26rem 26rem at var(--mx,50%) var(--my,40%),rgba(255,117,31,.1),transparent 70%);
}
.hero:hover .hero-spot{opacity:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.hero h1{margin-block:.4em .55em}
.hero .lead{max-width:46ch}
.hero-badge{
  display:inline-flex;align-items:center;gap:.55rem;padding:.45rem 1rem .45rem .8rem;
  border:1px solid var(--or-line);border-radius:var(--r-pill);
  background:linear-gradient(100deg,var(--or-soft),rgba(255,255,255,.02));
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--or);
  transition:border-color .3s,background-color .3s;
}
.hero-badge:hover{border-color:var(--or);background:rgba(255,117,31,.18)}
.hero-badge i{width:.42rem;height:.42rem;border-radius:50%;background:var(--or);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(255,117,31,.5)}50%{opacity:.5;transform:scale(.7);box-shadow:0 0 0 .45rem rgba(255,117,31,0)}}

/* Indicatore di scorrimento */
.scroll-cue{
  position:absolute;left:50%;translate:-50% 0;bottom:clamp(1.25rem,3vw,2.5rem);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);
}
.scroll-cue i{
  width:1.35rem;height:2.25rem;border:1px solid var(--line-2);border-radius:var(--r-pill);
  position:relative;display:block;
}
.scroll-cue i::after{
  content:'';position:absolute;left:50%;top:.45rem;translate:-50% 0;
  width:.25rem;height:.5rem;border-radius:2px;background:var(--or);
  animation:cue 1.8s var(--e-soft) infinite;
}
@keyframes cue{0%{transform:translate(-50%,0);opacity:0}30%{opacity:1}70%{transform:translate(-50%,.85rem);opacity:0}100%{opacity:0}}

/* Il "core": anello conico rotante + isotipo. Motivo grafico del brand. */
.core{position:relative;width:min(100%,30rem);aspect-ratio:1;margin-inline:auto}
.core-ring{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from var(--ring),transparent 0deg,var(--or) 26deg,transparent 70deg,transparent 185deg,rgba(255,255,255,.45) 210deg,transparent 250deg);
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
  animation:spin 16s linear infinite;
}
.core-ring:nth-of-type(2){inset:11%;animation-duration:24s;animation-direction:reverse;opacity:.65}
.core-ring:nth-of-type(3){inset:22%;animation-duration:34s;opacity:.4}
@keyframes spin{to{--ring:360deg}}
.core-tick{
  position:absolute;inset:-4%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.18) 0deg .22deg,transparent .22deg 6deg);
  mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));
}
.core-halo{
  position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,117,31,.2),transparent 65%);filter:blur(24px);
}
/* immagine centrata nel core: essendo un elemento rimpiazzato va dimensionata
   in percentuale, l'inset da solo non la ridimensiona */
.core-img{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:62%;height:62%;object-fit:contain;
  filter:drop-shadow(0 1.5rem 3rem rgba(0,0,0,.65));z-index:2;
}
.core-glyph{
  position:absolute;inset:0;display:grid;place-items:center;z-index:2;
  font-family:var(--display);font-weight:900;font-size:clamp(3rem,8vw,6rem);
  letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1.5px var(--or-line);
}
/* chip di dati che orbitano attorno al core */
.core-chip{
  position:absolute;z-index:3;display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem .8rem;border-radius:var(--r-pill);
  background:rgba(12,12,14,.8);border:1px solid var(--line-2);backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.08em;color:var(--ink-2);
  box-shadow:var(--sh-2);white-space:nowrap;
  animation:float 6s ease-in-out infinite;
}
.core-chip b{color:var(--or);font-weight:600}
.core-chip-1{top:4%;left:-8%;animation-delay:-1s}
.core-chip-2{top:44%;right:-12%;animation-delay:-3s}
.core-chip-3{bottom:4%;left:-2%;animation-delay:-5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-.6rem)}}


/* Hero delle pagine interne: non a tutta altezza */
.hero-page{min-height:auto;padding-bottom:clamp(2.5rem,5vw,5rem)}
.hero-page h1{font-size:clamp(2.1rem,1.3rem + 3.4vw,4.4rem)}
.core-sm{max-width:21rem}

/* ------------------------------------------------------ 11. DATI / KPI */
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.75rem}
.readout div{
  padding:clamp(1rem,2vw,1.5rem);border-radius:var(--r-md);
  background:var(--surf);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:.3rem;
  transition:border-color .35s,transform .35s var(--e-out);
}
.readout div:hover{border-color:var(--or-line);transform:translateY(-3px)}
.readout .num{font-size:clamp(1.6rem,1rem + 2.2vw,2.8rem);color:var(--ink)}
.readout .num em{font-style:normal;color:var(--or)}
.readout .num span{font:inherit;color:inherit;letter-spacing:inherit;text-transform:none}
.readout .num + span{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);line-height:1.5}
.on-paper .readout div{background:#fff;border-color:var(--line-d)}
.on-paper .readout .num + span{color:var(--ink-d3)}

/* --------------------------------------------------------- 12. CARD */
/* Firma: angolo alto-destro molto arrotondato, come l'arco della D. */
.cards{display:grid;gap:clamp(.75rem,1.4vw,1.1rem)}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards-5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.cards-5{grid-template-columns:repeat(3,minmax(0,1fr))}.cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.cards-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.cards-5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cards-2,.cards-3,.cards-4,.cards-5{grid-template-columns:1fr}}

.card{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(1.3rem,2.1vw,1.9rem);
  border-radius:var(--r-md) var(--r-xl) var(--r-md) var(--r-md);
  background:var(--surf);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:.65rem;
  transition:transform .45s var(--e-out),border-color .45s,box-shadow .45s var(--e-out);
}
.card::before{ /* alone arancione: si accende all'hover e segue il puntatore */
  content:'';position:absolute;z-index:-1;
  left:var(--mx,88%);top:var(--my,-4%);translate:-50% -50%;
  width:72%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(255,117,31,.24),transparent 62%);
  filter:blur(24px);opacity:0;transition:opacity .5s var(--e-out);
}
.card:hover{transform:translateY(-5px);border-color:var(--or-line);box-shadow:var(--sh-2)}
.card:hover::before{opacity:1}
.card-idx{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;color:var(--or);text-transform:uppercase}
.card h3,.card h4{color:var(--ink)}
.card p{font-size:var(--t-small);color:var(--ink-3);line-height:1.66;overflow-wrap:break-word}
.card h3,.card h4{hyphens:manual;overflow-wrap:normal}
.card .tlink{margin-top:auto;padding-top:.8rem;align-self:flex-start}
a.card:hover h3,a.card:hover h4,button.card:hover h3{color:var(--or)}
.on-paper .card{background:#fff;border-color:var(--line-d);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.on-paper .card:hover{border-color:var(--or-line);box-shadow:0 1.25rem 2.5rem rgba(0,0,0,.09)}
.on-paper .card p{color:var(--ink-d3)}
.on-paper .card h3,.on-paper .card h4{color:var(--ink-d)}

/* Icona circolare */
.card-ico{
  width:2.9rem;height:2.9rem;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(140deg,rgba(255,117,31,.16),rgba(255,117,31,.04));
  border:1px solid var(--or-line);
  display:grid;place-items:center;font-size:1.15rem;line-height:1;
  transition:background .35s,transform .35s var(--e-out);
}
.card-ico svg{width:1.3rem;height:1.3rem;stroke:var(--or);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.card:hover .card-ico{background:var(--or);transform:scale(1.06)}
.card:hover .card-ico svg{stroke:#000}

/* ------------------------------------------------- 13. ELENCHI E CHIP */
.ticks{display:grid;gap:.75rem}
.ticks li{display:grid;grid-template-columns:1.1rem 1fr;gap:.75rem;align-items:start;font-size:var(--t-small);color:var(--ink-2);line-height:1.6}
.ticks li::before{
  content:'';margin-top:.34em;width:1.15rem;height:1.15rem;border-radius:7px;flex:0 0 auto;
  background:var(--or-soft);border:1px solid var(--or-line);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff751f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E");
  background-size:.68rem .68rem;background-repeat:no-repeat;background-position:center;
}
.on-paper .ticks li{color:var(--ink-d2)}
.ticks-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));column-gap:2.5rem}

.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.06em;
  padding:.35rem .75rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink-3);
  transition:border-color .3s,color .3s,background-color .3s;
}
.chip:hover{border-color:var(--or-line);color:var(--or);background:var(--or-soft)}
.on-paper .chip{border-color:var(--line-d);background:rgba(255,255,255,.7);color:var(--ink-d3)}

/* --------------------------------------------------- 14. TICKER / LOGHI */
.ticker{
  --dur:40s;position:relative;display:flex;overflow:hidden;
  padding-block:1.1rem;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker-track{display:flex;flex:0 0 auto;align-items:center;gap:clamp(1.5rem,3.5vw,3rem);padding-right:clamp(1.5rem,3.5vw,3rem);animation:marq var(--dur) linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-100%)}}
.ticker-rev .ticker-track{animation-direction:reverse;--dur:48s}
.ticker-item{
  display:inline-flex;align-items:center;gap:clamp(1.5rem,3.5vw,3rem);flex:0 0 auto;
  font-family:var(--display);font-weight:700;font-size:clamp(1rem,.7rem + 1vw,1.55rem);
  letter-spacing:-.025em;color:var(--ink-3);white-space:nowrap;
}
.ticker-item::after{content:'';width:.32rem;height:.32rem;border-radius:50%;background:var(--or);flex:0 0 auto}
.on-paper .ticker-item{color:var(--ink-d3)}

/* Nastro delle skill: pillole che scorrono, righe leggermente inclinate */
.tape::before,.tape::after{
  content:'';position:absolute;top:0;bottom:0;width:clamp(3rem,10vw,9rem);z-index:2;pointer-events:none;
}
.tape::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.tape::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.tape-row{--dur:46s;display:flex;overflow:hidden}
.tape-row:nth-child(2){--dur:56s}
.tape-row:nth-child(3){--dur:64s}
.tape-row:nth-child(2) .tape-track{animation-direction:reverse}
.tape-track{display:flex;flex:0 0 auto;gap:.55rem;padding-right:.55rem;animation:marq var(--dur) linear infinite}
.tape-row:hover .tape-track{animation-play-state:paused}
.tape-chip{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;
  padding:.62rem 1.15rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surf);
  font-family:var(--display);font-weight:650;letter-spacing:-.015em;
  font-size:clamp(.95rem,.75rem + .6vw,1.25rem);color:var(--ink-2);
  transition:border-color .3s,color .3s,background .3s,transform .3s var(--e-out);
}
.tape-chip::before{
  content:'';width:.38rem;height:.38rem;border-radius:50%;background:var(--or);flex:0 0 auto;opacity:.7;
}
.tape-chip:hover{border-color:var(--or);color:var(--ink);transform:translateY(-2px)}
.tape-chip.is-hot{
  border-color:transparent;color:#000;background:linear-gradient(100deg,var(--or),var(--or-deep));
  box-shadow:0 .5rem 1.4rem rgba(255,117,31,.25);
}
.tape-chip.is-hot::before{background:#000;opacity:.45}
.tape-chip.is-ghost{background:transparent;border-style:dashed;color:var(--ink-4)}

/* --------------------------------------------------- 15. STEP / PROCESSO */
.steps{display:grid;gap:clamp(.75rem,1.4vw,1.1rem)}
.step{
  position:relative;display:grid;grid-template-columns:clamp(3.2rem,7vw,5.5rem) minmax(0,1fr);
  gap:clamp(1rem,2.5vw,2.5rem);align-items:start;
  padding:clamp(1.3rem,2.4vw,2rem);
  border-radius:var(--r-md) var(--r-xl) var(--r-md) var(--r-md);
  background:var(--surf);border:1px solid var(--line);
  transition:border-color .4s,transform .4s var(--e-out);
}
.step:hover{border-color:var(--or-line);transform:translateY(-3px)}
.on-paper .step{background:#fff;border-color:var(--line-d)}
.step-n{
  font-family:var(--display);font-weight:900;font-size:clamp(1.9rem,1rem + 3vw,3.6rem);
  line-height:.85;letter-spacing:-.06em;color:transparent;
  -webkit-text-stroke:1.5px var(--line-2);transition:color .4s,-webkit-text-stroke-color .4s;
}
.on-paper .step-n{-webkit-text-stroke-color:var(--line-d2)}
.step:hover .step-n{color:var(--or);-webkit-text-stroke-color:var(--or)}
.step-b{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.step-b p{color:var(--ink-3);font-size:var(--t-small);max-width:68ch}
.on-paper .step-b p{color:var(--ink-d3)}

/* Elenco a righe */
.rows{display:grid;gap:.6rem}
.row-item{
  display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:clamp(.75rem,2vw,2rem);
  padding:clamp(1rem,2vw,1.5rem);border-radius:var(--r-md);
  background:var(--surf);border:1px solid var(--line);transition:border-color .35s,transform .35s var(--e-out);
}
.row-item:hover{border-color:var(--or-line);transform:translateX(.3rem)}
.row-n{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;color:var(--or);padding-top:.35rem}
.row-b p{color:var(--ink-3);font-size:var(--t-small);max-width:70ch}
.row-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(1rem,3vw,3rem);align-items:start}

/* -------------------------------------------------------------- 16. FAQ */
.faq{display:grid;gap:.6rem}
.faq details{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surf);
  transition:border-color .35s,background .35s;overflow:hidden;
}
.faq details[open]{border-color:var(--or-line)}
.on-paper .faq details{background:#fff;border-color:var(--line-d)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:1rem;
  padding:clamp(1rem,1.8vw,1.35rem) clamp(1.1rem,2vw,1.6rem);
  font-family:var(--display);font-weight:650;font-size:var(--t-h4);letter-spacing:-.02em;
  transition:color .25s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--or)}
.faq summary::after{
  content:'';margin-left:auto;flex:0 0 auto;margin-top:.15em;
  width:1.5rem;height:1.5rem;border-radius:50%;border:1px solid var(--or-line);background:var(--or-soft);
  background-image:linear-gradient(var(--or),var(--or)),linear-gradient(var(--or),var(--or));
  background-size:.6rem 1.5px,1.5px .6rem;background-position:center,center;background-repeat:no-repeat;
  transition:transform .35s var(--e-out);
}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq-a{padding:0 clamp(1.1rem,2vw,1.6rem) clamp(1.1rem,2vw,1.5rem);color:var(--ink-3);font-size:var(--t-small);max-width:76ch;line-height:1.75}
.on-paper .faq-a{color:var(--ink-d3)}
.faq details[open] .faq-a{animation:fade .45s var(--e-out)}
@keyframes fade{from{opacity:0;transform:translateY(-.4rem)}}

/* ------------------------------------------------------ 17. TEAM (tondo) */
.team{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(.75rem,1.5vw,1.25rem)}
@media (max-width:1100px){.team{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.team{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:460px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}
.team-card{
  background:none;border:0;padding:0;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;align-items:stretch;gap:.7rem;
}
.team-ph{
  position:relative;width:100%;aspect-ratio:1;border-radius:15px;overflow:hidden;
  background:var(--surf-2);border:1px solid var(--line);
  transition:border-color .4s,transform .45s var(--e-out),box-shadow .45s;
}
.team-ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .5s var(--e-out),transform .7s var(--e-out)}
.team-ph::after{
  content:'';position:absolute;inset:0;border-radius:15px;
  border:1.5px solid var(--or);
  opacity:0;transition:opacity .4s;
}
.team-card:hover .team-ph,.team-card:focus-visible .team-ph{transform:translateY(-4px);box-shadow:var(--sh-2)}
.team-card:hover .team-ph img,.team-card:focus-visible .team-ph img{filter:none;transform:scale(1.05)}
.team-card:hover .team-ph::after,.team-card:focus-visible .team-ph::after{opacity:1}
.team-b{display:flex;flex-direction:column;gap:.15rem}
.team-b b{font-family:var(--display);font-weight:650;font-size:var(--t-small);letter-spacing:-.015em;transition:color .3s}
.team-card:hover .team-b b{color:var(--or)}
.team-b span{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.05em;color:var(--ink-4);line-height:1.45}
.on-paper .team-b span{color:var(--ink-d3)}
.team-plus{
  position:absolute;right:.6rem;bottom:.6rem;width:1.8rem;height:1.8rem;border-radius:9px;
  background:var(--or);color:#000;display:grid;place-items:center;font-size:1rem;line-height:1;font-weight:700;
  opacity:0;transform:scale(.7);transition:opacity .3s,transform .35s var(--e-out);
}
.team-card:hover .team-plus,.team-card:focus-visible .team-plus{opacity:1;transform:none}

/* ------------------------------------------------------- 18. MODALE */
.modal{
  position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:var(--gut);
  background:rgba(0,0,0,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:fade .3s var(--e-out);
}
.modal[hidden]{display:none!important}
.modal-box{
  position:relative;width:min(50rem,100%);max-height:86dvh;overflow-y:auto;
  background:linear-gradient(170deg,#161618,#0d0d0f);
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.6rem);box-shadow:var(--sh-3);
  animation:pop .4s var(--e-out);
}
@keyframes pop{from{opacity:0;transform:translateY(1.2rem) scale(.985)}}
.modal-close{
  position:absolute;top:.9rem;right:.9rem;width:2.4rem;height:2.4rem;border-radius:50%;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:var(--ink);cursor:pointer;
  display:grid;place-items:center;transition:border-color .25s,color .25s,background .25s;z-index:2;
}
.modal-close:hover{border-color:var(--or);color:var(--or);background:var(--or-soft)}
.modal-head{display:flex;gap:1.25rem;align-items:center;margin-bottom:1.5rem;padding-right:2.8rem}
.modal-head img{width:5rem;height:5rem;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid var(--or-line)}
.modal-head span{display:block;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--or);margin-top:.3rem}
.modal-sec{margin-top:1.4rem}
.modal-sec p{color:var(--ink-2);font-size:var(--t-small);line-height:1.75}
.modal-sec p+p{margin-top:.9em}
.modal-sec ul{display:grid;gap:.5rem;margin-top:.8rem}
.modal-sec ul li{display:grid;grid-template-columns:1rem 1fr;gap:.7rem;font-size:var(--t-small);color:var(--ink-2)}
.modal-sec ul li::before{content:'';margin-top:.45em;width:.42rem;height:.42rem;border-radius:50%;background:var(--or)}
.modal-ico{
  width:3rem;height:3rem;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(255,117,31,.18),rgba(255,117,31,.04));border:1px solid var(--or-line);
}
.modal-ico svg{width:1.4rem;height:1.4rem;stroke:var(--or);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* --------------------------------------------- 19. CITAZIONI / RECENSIONI */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:clamp(.75rem,1.4vw,1.1rem)}
.quote{
  background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r-md) var(--r-xl) var(--r-md) var(--r-md);
  padding:clamp(1.3rem,2.1vw,1.9rem);display:flex;flex-direction:column;gap:1.05rem;
  transition:border-color .4s,transform .4s var(--e-out);
}
.quote:hover{border-color:var(--or-line);transform:translateY(-4px)}
.on-paper .quote{background:#fff;border-color:var(--line-d)}
.quote-stars{display:flex;gap:.12rem;color:var(--or);font-size:.85rem;letter-spacing:.08em}
.quote p{font-family:var(--display);font-weight:500;font-size:var(--t-h4);line-height:1.45;letter-spacing:-.02em;color:var(--ink)}
.on-paper .quote p{color:var(--ink-d)}
.quote-who{display:flex;align-items:center;gap:.8rem;margin-top:auto;padding-top:.8rem;border-top:1px solid var(--line)}
.on-paper .quote-who{border-color:var(--line-d)}
.quote-av{
  width:2.5rem;height:2.5rem;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--or-soft);border:1px solid var(--or-line);color:var(--or);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.04em;overflow:hidden;
}
.quote-av img{width:100%;height:100%;object-fit:cover}
.quote-who b{display:block;font-size:var(--t-small);font-weight:600}
.quote-who span{display:block;font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-4)}
.on-paper .quote-who span{color:var(--ink-d3)}

/* ------------------------------------------------------- 20. MEDIA */
.embed{position:relative;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-2);overflow:hidden}
.on-paper .embed{border-color:var(--line-d);background:#fff}
.embed iframe{width:100%;border:0;display:block}
.embed-head{
  display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);
}
.on-paper .embed-head{border-color:var(--line-d);color:var(--ink-d3)}
.embed-head i{width:.42rem;height:.42rem;border-radius:50%;background:var(--or)}

/* Video YouTube: facciata privacy-friendly */
.ytf{
  position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surf);padding:0;display:block;
  transition:border-color .4s,transform .4s var(--e-out);
}
.ytf:hover{border-color:var(--or-line);transform:translateY(-3px)}
.ytf img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e-out),filter .5s}
.ytf:hover img{transform:scale(1.04);filter:brightness(.7)}
.ytf-play{position:absolute;inset:0;display:grid;place-items:center}
.ytf-play::before{
  content:'';width:clamp(3.2rem,7vw,4.6rem);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(140deg,var(--or),var(--or-deep));box-shadow:0 1rem 2.5rem rgba(255,117,31,.35);
  transition:transform .35s var(--e-out);
}
.ytf-play::after{
  content:'';position:absolute;width:0;height:0;
  border-left:clamp(.85rem,1.7vw,1.1rem) solid #000;
  border-top:clamp(.5rem,1vw,.7rem) solid transparent;
  border-bottom:clamp(.5rem,1vw,.7rem) solid transparent;
  translate:.16rem 0;
}
.ytf:hover .ytf-play::before{transform:scale(1.1)}
.ytf-note{
  position:absolute;left:0;right:0;bottom:0;padding:.6rem .9rem;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);background:linear-gradient(transparent,rgba(0,0,0,.85));text-align:left;
}
.shot{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surf);overflow:hidden}
.shot img{width:100%;height:auto}
.on-paper .shot{border-color:var(--line-d);background:#fff}
.shot-cap{padding:.7rem 1rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.on-paper .shot-cap{border-color:var(--line-d);color:var(--ink-d3)}
.shot-cover{display:flex;flex-direction:column}
.shot-cover > img{width:auto;max-width:100%;max-height:18rem;object-fit:contain;margin:clamp(1.5rem,4vw,3rem) auto;display:block}

/* --------------------------------------------------------- 21. TABELLE */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.on-paper .tbl-wrap{border-color:var(--line-d);background:#fff}
table{width:100%;border-collapse:collapse;font-size:var(--t-small);min-width:36rem}
th,td{padding:.95rem 1.15rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.on-paper th,.on-paper td{border-color:var(--line-d)}
thead th{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-4);font-weight:500;background:rgba(255,255,255,.03);
}
.on-paper thead th{color:var(--ink-d3);background:var(--paper-2)}
tbody th{font-family:var(--display);font-weight:650;color:var(--ink)}
.on-paper tbody th{color:var(--ink-d)}
td{color:var(--ink-3)}
.on-paper td{color:var(--ink-d3)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background-color .25s}
tbody tr:hover{background:rgba(255,255,255,.025)}
.on-paper tbody tr:hover{background:rgba(0,0,0,.03)}
td.neg{color:var(--ink-4)}
td.pos{color:var(--or)}

/* ----------------------------------------------------- 22. CTA FINALE */
.cta-band{position:relative;overflow:hidden;text-align:center;padding-block:clamp(4rem,8vw,8rem)}
.cta-band::before{
  content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(70rem,140%);aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,117,31,.15),transparent 58%);filter:blur(10px);
}
.cta-band > *{position:relative}
.cta-band h2{max-width:20ch;margin-inline:auto}
.cta-band .lead{margin-inline:auto;text-align:center}
.cta-band .btn-row{justify-content:center;margin-top:2.2rem}
.cta-claim{
  margin-top:1.1rem;font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.1rem,.9rem + 1vw,1.6rem);color:var(--or);
}
.cta-punti{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,1.4vw,1.1rem);
  margin-top:clamp(1.8rem,3vw,2.6rem);text-align:left;
}
.cta-punti > div{
  padding:clamp(1.1rem,2vw,1.5rem);border-radius:var(--r-md) var(--r-xl) var(--r-md) var(--r-md);
  border:1px solid var(--line);background:var(--surf);
  display:flex;flex-direction:column;gap:.45rem;
}
.cta-punti b{font-family:var(--display);font-weight:650;font-size:var(--t-h4);letter-spacing:-.02em}
.cta-punti span{font-size:var(--t-small);color:var(--ink-3);line-height:1.65}
@media (max-width:820px){.cta-punti{grid-template-columns:1fr}}
.cta-mark{width:3rem;height:auto;margin:0 auto 1.4rem;opacity:.95}

/* ------------------------------------------------------------ 23. FOOTER */
.ftr{
  position:relative;z-index:2;border-top:1px solid var(--line);overflow:hidden;
  background:#000 var(--ftr-bg,none) center/cover no-repeat;
}
.ftr::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.92));pointer-events:none}
.ftr > *{position:relative;z-index:1}
.ftr-glow{
  position:absolute;left:50%;top:-14rem;translate:-50% 0;z-index:0;
  width:min(70rem,140%);aspect-ratio:1.6;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,117,31,.2),transparent 62%);filter:blur(20px);
}
.ftr-hero{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.4rem;
  padding-block:clamp(3rem,6vw,5.5rem) clamp(2rem,4vw,3.5rem);
  border-bottom:1px solid var(--line);
}
.ftr-mark{width:3.2rem;height:auto;opacity:.95}
.ftr-claim{
  font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.14;
  font-size:clamp(1.4rem,.95rem + 2.2vw,2.8rem);max-width:28ch;text-wrap:balance;
}
.ftr-hero-act{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;justify-content:center}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem);padding-block:clamp(3rem,5vw,4.5rem)}
.ftr-brand{display:flex;flex-direction:column;align-items:flex-start;gap:1.05rem;max-width:26rem}
.ftr-contatti{display:flex;flex-direction:column;gap:.25rem;font-size:var(--t-small);color:var(--ink-2)}
.ftr-contatti a{transition:color .25s}
.ftr-contatti a:hover{color:var(--or)}
.ftr-contatti span{color:var(--ink-4)}
.ftr-brand img{width:clamp(11rem,16vw,14rem);height:auto}
.ftr-brand p{font-size:var(--t-small);color:var(--ink-3);line-height:1.7}
.ftr-col h3{font-family:var(--mono);font-size:var(--t-micro);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin-bottom:1rem}
.ftr-col a{display:block;padding:.32rem 0;font-size:var(--t-small);color:var(--ink-2);transition:color .25s,padding-left .3s var(--e-out)}
.ftr-col a:hover{color:var(--or);padding-left:.4rem}
.ftr-social{display:flex;gap:.55rem;margin-top:.4rem}
.ftr-social a{
  width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  transition:border-color .3s,color .3s,background-color .3s,transform .3s var(--e-out);
}
.ftr-social a:hover{border-color:var(--or);color:var(--or);background:var(--or-soft);transform:translateY(-2px)}
.ftr-social svg{width:1rem;height:1rem;fill:currentColor}
.ftr-partners{padding-block:clamp(2rem,4vw,3rem);border-top:1px solid var(--line)}
.ftr-partners .eyebrow{margin-bottom:1.2rem}
.ftr-bot{
  border-top:1px solid var(--line);padding-block:1.6rem;
  display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between;
}
.ftr-bot small{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.04em;color:var(--ink-4);line-height:1.8}
.ftr-certs{display:flex;gap:.6rem;align-items:center}
.ftr-certs img{height:2.6rem;width:auto;border-radius:var(--r-xs);opacity:.75;transition:opacity .3s}
.ftr-certs a:hover img{opacity:1}
.legal-links{display:flex;flex-wrap:wrap;gap:.45rem 1.15rem;align-items:center}
.legal-links a,.legal-links .legal-link-btn{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.06em;color:var(--ink-4);
  background:none;border:0;padding:0;cursor:pointer;transition:color .25s;
}
.legal-links a:hover,.legal-links .legal-link-btn:hover{color:var(--or)}

/* -------------------------------------------------------- 24. FORM */
.field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.1rem}
.field > span,label > span.lbl{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
input[type=text],input[type=email],input[type=tel],input[type=url],textarea,select{
  width:100%;padding:.9rem 1.1rem;background:rgba(255,255,255,.04);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  transition:border-color .25s,background-color .25s,box-shadow .25s;
}
input::placeholder,textarea::placeholder{color:var(--ink-4)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--or);background:rgba(255,117,31,.05);box-shadow:0 0 0 3px rgba(255,117,31,.12)}
textarea{resize:vertical;min-height:8rem}
.privacy-field{display:grid;grid-template-columns:1.15rem 1fr;gap:.75rem;align-items:start;margin-block:1.2rem;font-size:var(--t-small);color:var(--ink-3);line-height:1.6}
.privacy-field input{margin-top:.28em;accent-color:var(--or);width:1.15rem;height:1.15rem}
.privacy-field a{color:var(--or);text-decoration:underline;text-underline-offset:.2em}
.notice{padding:1rem 1.2rem;border:1px solid var(--line-2);border-left:3px solid var(--or);border-radius:var(--r-sm);margin-bottom:1.5rem;font-size:var(--t-small)}
.notice-ok{border-left-color:var(--green)}
.notice-err{border-left-color:#ff4d4d}

/* --------------------------------------------------- 25. PAGINE DI TESTO */
.page-head{padding-top:calc(var(--hdr-h) + clamp(3.5rem,7vw,6.5rem));padding-bottom:clamp(2rem,4vw,3rem)}
.legal-page{padding-block:clamp(1.5rem,3vw,2.5rem) var(--sec)}
.legal-page h1{font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);margin-bottom:.8rem}
.legal-updated{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:1.5rem}
.legal-page section{margin-top:1rem;padding:clamp(1.3rem,2.2vw,1.9rem);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surf)}
.legal-page section h2{font-size:var(--t-h3);margin-bottom:.7rem}
.legal-page p{color:var(--ink-2);max-width:74ch}
.legal-page a{color:var(--or);text-decoration:underline;text-underline-offset:.2em}
.legal-owner-box{
  display:flex;flex-direction:column;gap:.3rem;padding:1.4rem 1.6rem;
  border:1px solid var(--or-line);border-radius:var(--r-md);
  background:linear-gradient(140deg,var(--or-soft),transparent 65%);
  font-size:var(--t-small);color:var(--ink-2);margin-block:1.5rem;
}
.legal-owner-box strong{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--or);margin-bottom:.3rem}

/* ------------------------------------------------------ 26. RIVELAZIONI */
.rv{opacity:0;transform:translateY(1.4rem);transition:opacity .75s var(--e-out),transform .75s var(--e-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.06s}.rv-d2{transition-delay:.12s}.rv-d3{transition-delay:.18s}
.rv-d4{transition-delay:.24s}.rv-d5{transition-delay:.3s}.rv-d6{transition-delay:.36s}
html.no-js .rv{opacity:1;transform:none}
.reveal-line{display:block;overflow:hidden;padding-bottom:.06em}
.reveal-line > span{display:block;transform:translateY(105%);transition:transform .95s var(--e-out)}
.reveal-line:nth-child(2) > span{transition-delay:.09s}
.reveal-line:nth-child(3) > span{transition-delay:.18s}
.reveal-line:nth-child(4) > span{transition-delay:.27s}
.is-ready .reveal-line > span{transform:none}
html.no-js .reveal-line > span{transform:none}
.prog{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--or),var(--or-2));z-index:950;width:0;transition:width .12s linear;border-radius:0 2px 2px 0}

/* --------------------------------------------------------- 27. UTILITÀ */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3.5vw,3.5rem);align-items:start}
.split-l{display:grid;gap:clamp(1.5rem,3.5vw,3.5rem);grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}
.split-r{display:grid;gap:clamp(1.5rem,3.5vw,3.5rem);grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:start}
.stack{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem}
.stack-sm{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem}
.mt-1{margin-top:.8rem}.mt-2{margin-top:1.5rem}.mt-3{margin-top:2.4rem}.mt-4{margin-top:clamp(2.4rem,4.5vw,4rem)}
.center{text-align:center}
.mark{width:2.4rem;height:auto}
.mark-wide{width:clamp(9rem,20vw,13.5rem);height:auto}
@media (max-width:860px){.split,.split-l,.split-r{grid-template-columns:1fr}}

.panel{border:1px solid var(--line);border-radius:var(--r-md) var(--r-xl) var(--r-md) var(--r-md);background:var(--surf);padding:clamp(1.4rem,2.5vw,2.4rem)}
.on-paper .panel{border-color:var(--line-d);background:#fff}
.panel-or{border-color:var(--or-line);background:linear-gradient(150deg,var(--or-soft),transparent 62%)}

.rail{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase}
.rail span{padding:.45rem .9rem;border-radius:var(--r-pill);border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink-3)}
.on-paper .rail span{border-color:var(--line-d);background:#fff;color:var(--ink-d3)}
.rail span:last-child{border-color:var(--or-line);background:var(--or-soft);color:var(--or)}
.rail i{color:var(--or);font-style:normal}

.pull{
  position:relative;padding:clamp(1.2rem,2.5vw,2rem) clamp(1.4rem,3vw,2.5rem);
  border-radius:var(--r-md) var(--r-xl) var(--r-md) var(--r-md);
  border:1px solid var(--or-line);background:linear-gradient(140deg,var(--or-soft),transparent 62%);
  font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,.9rem + 1.8vw,2.3rem);
  line-height:1.22;letter-spacing:-.035em;
}
.pull cite{display:block;margin-top:1rem;font-family:var(--mono);font-size:var(--t-micro);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--or);font-weight:400}

.byline{display:flex;align-items:center;gap:.85rem}
.byline img{width:3rem;height:3rem;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid var(--or-line)}
.byline b{display:block;font-size:var(--t-small);font-weight:600}
.byline span{display:block;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.on-paper .byline span{color:var(--ink-d3)}

.figure-soft{position:relative}
.figure-soft img{width:100%;height:auto;filter:drop-shadow(0 2rem 4rem rgba(0,0,0,.55))}

.strip{
  display:inline-flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.5rem 1rem;border-radius:var(--r-pill);border:1px solid var(--line);background:rgba(255,255,255,.03);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
}
.strip b{color:var(--or);font-weight:500}
.on-paper .strip{border-color:var(--line-d);background:#fff;color:var(--ink-d3)}

.deliver{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:.45rem}
.deliver li{
  display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  font-size:var(--t-small);color:var(--ink-2);
}
.deliver li::before{content:'';width:.4rem;height:.4rem;border-radius:50%;background:var(--or);flex:0 0 auto}
.on-paper .deliver li{border-color:var(--line-d);background:#fff;color:var(--ink-d2)}

.faces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;max-width:min(27rem,100%)}
.faces img{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .5s var(--e-out)}
.faces img:hover{filter:none}

/* Scheda servizio con dettaglio espandibile */
.svc details{border-top:1px solid var(--line);margin-top:.35rem}
.on-paper .svc details{border-color:var(--line-d)}
.svc summary{
  list-style:none;cursor:pointer;padding:.75rem 0;display:flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--or);
}
.svc summary::-webkit-details-marker{display:none}
.svc summary::after{content:'+';margin-left:auto;font-size:1rem;line-height:1}
.svc details[open] summary::after{content:'–'}
.svc-more-b{padding-bottom:.9rem;animation:fade .4s var(--e-out)}
.svc-more-b p{color:var(--ink-2)}
.on-paper .svc-more-b p{color:var(--ink-d2)}
.svc .ticks li{font-size:var(--t-micro)}

/* Nota espandibile dentro uno step */
.nota{margin-top:.8rem;width:100%;border-top:1px solid var(--line)}
.on-paper .nota{border-color:var(--line-d)}
.nota summary{
  list-style:none;cursor:pointer;padding:.6rem 0;display:flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--or);
}
.nota summary::-webkit-details-marker{display:none}
.nota summary::after{content:'+';margin-left:auto;font-size:1rem;line-height:1}
.nota[open] summary::after{content:'–'}
.nota-b{padding-bottom:.8rem;animation:fade .4s var(--e-out)}
.nota-b p{color:var(--ink-3);font-size:var(--t-small)}
.on-paper .nota-b p{color:var(--ink-d3)}

/* Mockup chat */
.chat{display:flex;flex-direction:column;gap:.5rem}
.chat-head{display:flex;align-items:center;gap:.7rem;padding-bottom:.9rem;border-bottom:1px solid var(--line);margin-bottom:.4rem}
.chat-av{width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,var(--or),var(--or-deep));color:#000;font-family:var(--mono);font-size:var(--t-micro);font-weight:700}
.chat-head b{display:block;font-size:var(--t-small)}
.chat-head i{font-style:normal;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.08em;color:var(--green)}
.chat-b{max-width:85%;padding:.65rem .95rem;font-size:var(--t-small);line-height:1.5;border:1px solid var(--line);border-radius:var(--r-md)}
.chat-utente{align-self:flex-end;background:rgba(255,255,255,.05);border-bottom-right-radius:var(--r-xs)}
.chat-ai{align-self:flex-start;background:var(--or-soft);border-color:var(--or-line);border-bottom-left-radius:var(--r-xs)}
.chat-note{margin-top:.6rem;padding-top:.8rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}

/* Scheda meta del caso studio */
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:.6rem}
.meta div{background:var(--surf);border:1px solid var(--line);border-radius:var(--r-md);padding:1rem 1.15rem;display:flex;flex-direction:column;gap:.3rem}
.meta dt,.meta .k{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.meta dd,.meta .v{margin:0;font-size:var(--t-small);color:var(--ink);line-height:1.5}

/* Galleria di un caso studio */
.galleria{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.25rem,3vw,3rem);align-items:center;padding:clamp(1.3rem,2.4vw,2rem);border:1px solid var(--line);border-radius:var(--r-md) var(--r-xl) var(--r-md) var(--r-md);background:var(--surf);margin-bottom:.75rem}
.on-paper .galleria{border-color:var(--line-d);background:#fff}
.galleria-img{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:.7rem}
.galleria-b h3{margin-bottom:.7rem}
.galleria-b p{color:var(--ink-3);font-size:var(--t-small)}
.on-paper .galleria-b p{color:var(--ink-d3)}
@media (max-width:860px){.galleria{grid-template-columns:1fr}}

/* Elenco dei casi studio */
.progetti{display:grid;gap:clamp(.75rem,1.4vw,1.1rem)}
.progetto{
  display:grid;grid-template-columns:clamp(3rem,6vw,5rem) minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(1rem,2.5vw,2.5rem);align-items:center;
  padding:clamp(1.3rem,2.4vw,2rem);
  border:1px solid var(--line);border-radius:var(--r-md) var(--r-xl) var(--r-md) var(--r-md);
  background:var(--surf);
  transition:border-color .45s,transform .45s var(--e-out),box-shadow .45s;
}
.progetto:hover{border-color:var(--or-line);transform:translateY(-4px);box-shadow:var(--sh-2)}
.progetto-n{
  font-family:var(--display);font-weight:900;font-size:clamp(1.8rem,1rem + 3vw,3.4rem);line-height:.85;
  letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--line-2);transition:color .4s,-webkit-text-stroke-color .4s;
}
.progetto:hover .progetto-n{color:var(--or);-webkit-text-stroke-color:var(--or)}
.progetto-b h2{font-size:var(--t-h3);margin-block:.5rem .6rem;transition:color .3s}
.progetto:hover .progetto-b h2{color:var(--or)}
.progetto-b p{font-size:var(--t-small);color:var(--ink-3);max-width:62ch}
.progetto-img{display:grid;place-items:center;overflow:hidden;border-radius:var(--r-sm);background:var(--bg-2);aspect-ratio:16/10;border:1px solid var(--line)}
.progetto-img img{width:100%;height:100%;object-fit:contain;padding:1.1rem;background:var(--paper);transition:transform .7s var(--e-out)}
.progetto-img .pv{border-radius:0}
.progetto:hover .progetto-img .pv svg{transform:scale(1.05)}
.progetto-img .pv svg{transition:transform .7s var(--e-out)}
.progetto:hover .progetto-img img{transform:scale(1.05)}
@media (max-width:860px){.progetto{grid-template-columns:1fr;gap:.7rem}.progetto-img{order:-1}}

/* Manifesto */
.manifesto-hero{text-align:center}
.manifesto-hero h1{font-size:clamp(2rem,1.1rem + 3.6vw,4.4rem)}
.manifesto-hero .lead{margin-inline:auto}
.manifesto-art{display:grid;grid-template-columns:clamp(3.5rem,9vw,8rem) minmax(0,1fr);gap:clamp(1rem,3vw,3rem);align-items:start;padding:clamp(1.4rem,2.6vw,2.4rem);border:1px solid var(--line);border-radius:var(--r-md) var(--r-xl) var(--r-md) var(--r-md);background:var(--surf)}
.on-paper .manifesto-art{border-color:var(--line-d);background:#fff}
.manifesto-n{font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,1.6rem + 3.5vw,5.5rem);line-height:.82;letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1.5px var(--or-line)}
.on-paper .manifesto-n{-webkit-text-stroke-color:rgba(255,117,31,.55)}
.manifesto-ico{font-size:1.6rem;line-height:1;margin-bottom:.9rem}
.manifesto-art h2{font-size:clamp(1.35rem,1rem + 1.7vw,2.4rem)}
@media (max-width:640px){.manifesto-art{grid-template-columns:1fr;gap:.6rem}}

/* Thank you page */
.grazie-hero{text-align:center;min-height:auto}
.grazie-hero .lead{margin-inline:auto}
.grazie-check{
  display:grid;place-items:center;width:5rem;height:5rem;margin:0 auto 1.6rem;border-radius:50%;
  border:1px solid var(--or);color:var(--or);background:var(--or-soft);
  box-shadow:0 0 0 .65rem rgba(255,117,31,.07);animation:pop .6s var(--e-out) both;
}
.grazie-check svg{width:2.1rem;height:2.1rem}

/* --------------------------------------------------------- 28. RESPONSIVE */
@media (max-width:1180px){
  .mega-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-top{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  :root{--hdr-h:3.85rem}
  .burger{display:flex}
  .nav{
    position:fixed;top:calc(env(safe-area-inset-top,0px) + var(--hdr-h) + 1.4rem);
    left:var(--gut);right:var(--gut);
    max-height:calc(100dvh - var(--hdr-h) - 3rem);overflow-y:auto;overscroll-behavior:contain;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:rgba(8,8,10,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-3);
    padding:.8rem 1rem calc(1.4rem + env(safe-area-inset-bottom,0px));
    transform:translateY(-.8rem) scale(.98);visibility:hidden;opacity:0;
    transition:transform .4s var(--e-out),opacity .3s,visibility .4s;
  }
  .nav.is-open{transform:none;visibility:visible;opacity:1}
  .nav > a,.nav-item{border-bottom:1px solid var(--line)}
  .nav > a{padding:.9rem .4rem;font-size:var(--t-h4);font-family:var(--display);font-weight:600;color:var(--ink);border-radius:0}
  .nav-item{flex-wrap:wrap;justify-content:space-between}
  .nav-item > .nav-link{padding:.9rem .4rem;font-size:var(--t-h4);font-family:var(--display);font-weight:600;color:var(--ink);flex:1;border-radius:0;background:none}
  .nav-chev{padding:.9rem .5rem}
  .nav-chev svg{width:.9rem;height:.9rem}
  .mega,.drop{
    position:static;transform:none;visibility:visible;opacity:1;
    background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;padding:0;box-shadow:none;
    width:100%;max-height:0;overflow:hidden;translate:0;min-width:0;border-radius:0;
    transition:max-height .45s var(--e-out);
  }
  .nav-item.is-open .mega,.nav-item.is-open .drop{max-height:160rem;overflow:visible}
  .mega-in{display:block;padding:0 0 1rem}
  .mega-col{margin-bottom:1rem}
  .mega-feat{margin-top:.5rem}
  .drop{padding-bottom:.8rem}
  .nav-cta{margin:1.2rem 0 0;justify-content:center}
  .hero-grid,.sec-head-split,.row-split{grid-template-columns:1fr}
  .core{max-width:19rem;order:-1}
  .core-chip{display:none}
  .ftr-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ftr-brand{grid-column:1/-1}
}
@media (max-width:640px){
  .readout{grid-template-columns:repeat(2,1fr)}
  .ftr-top{grid-template-columns:1fr}
  .ftr-bot{flex-direction:column;align-items:flex-start}
  .modal-head{flex-direction:column;align-items:flex-start;gap:.9rem}
  .step{grid-template-columns:1fr;gap:.6rem}
  .row-item{grid-template-columns:1fr;gap:.35rem}
  .on-paper{border-radius:var(--r-lg)}
}

/* ----------------------------------------------- 29. MOTO RIDOTTO / A11Y */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1!important;transform:none!important}
  .reveal-line > span{transform:none!important}
  .hero-spot{display:none}
}
html.acc-noanim .rv{opacity:1!important;transform:none!important}
html.acc-noanim .reveal-line > span{transform:none!important}
html.acc-noanim .core-ring,html.acc-noanim .ticker-track,html.acc-noanim .core-chip,html.acc-noanim .team-ph::after{animation:none!important}
html.acc-contrast .backdrop,html.acc-contrast .hero-spot,html.acc-contrast .cta-band::before,html.acc-contrast .card::before{display:none}

/* ------------------------------------------- 30. PROVE SOCIALI DAL CRM */
.sp-load{display:flex;align-items:center;gap:.7rem;padding:1.5rem 0;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.sp-spin{width:1rem;height:1rem;border-radius:50%;border:1.5px solid var(--line-2);border-top-color:var(--or);animation:spin2 .9s linear infinite}
@keyframes spin2{to{transform:rotate(360deg)}}
.sp-marquee{--dur:52s;position:relative;display:flex;overflow:hidden;padding-block:.5rem;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sp-marquee+.sp-marquee{margin-top:.35rem}
.sp-marquee-rev .sp-track{animation-direction:reverse;--dur:62s}
.sp-track{display:flex;flex:0 0 auto;align-items:center;gap:.7rem;padding-right:.7rem;animation:marq var(--dur) linear infinite}
.sp-marquee:hover .sp-track{animation-play-state:paused}
/* I loghi dei clienti arrivano in mille colori (molti neri): li mettiamo su una
   piastrella chiara, così sono sempre leggibili sul fondo scuro del sito. */
.sp-logo{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:clamp(7.5rem,13vw,10rem);height:clamp(4.5rem,7.5vw,6rem);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);
  background:#f4f2ee;padding:clamp(.7rem,1.2vw,1.1rem);overflow:hidden;
  transition:border-color .35s,transform .35s var(--e-out),box-shadow .35s;
}
.sp-logo:hover{border-color:var(--or);transform:translateY(-3px);box-shadow:0 .75rem 1.75rem rgba(0,0,0,.4)}
/* il logo si adatta al riquadro senza mai uscirne: dimensioni automatiche
   limitate dai lati del riquadro (le percentuali su width/height non si
   risolvono su un'immagine dentro un contenitore ad altezza fissa). */
.sp-logo img{
  display:block;width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;object-position:center;
  filter:grayscale(1);opacity:.88;transition:filter .35s,opacity .35s;
}
.sp-logo:hover img{filter:none;opacity:1}
.on-paper .sp-logo{border-color:var(--line-d);background:#fff}
.sp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,1.4vw,1.1rem)}
@media (max-width:980px){.sp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.sp-grid{grid-template-columns:1fr}}
.sp-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;margin-top:.4rem}
.sp-metrics div{padding:.7rem .85rem;border-radius:var(--r-sm)}
.sp-metrics .num{font-size:clamp(1.05rem,.85rem + .7vw,1.4rem)}
.sp-thumb{display:block;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);margin-bottom:.4rem;aspect-ratio:16/10;background:var(--bg-2)}
.sp-thumb img{width:100%;height:100%;object-fit:cover}
.sp .quotes .ytf{margin-top:.2rem}

/* ------------------------------------- 31. SCHEMI: PILASTRI, FLUSSO, MAPPA */
.btn-sm{padding:.5rem 1rem;font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;font-family:var(--mono)}
.card-act{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:auto;padding-top:.9rem}
.card-act .tlink{margin:0;padding:0}

/* Pilastri del growth model: box cliccabili collegati da "+" */
.pillars{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:.6rem}
.pillar{text-align:left;cursor:pointer;align-items:flex-start}
.pillar .tlink{margin-top:auto;padding-top:.9rem}
.pillar-plus{
  align-self:center;display:grid;place-items:center;
  width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid var(--or-line);background:var(--or-soft);
  color:var(--or);font-family:var(--display);font-weight:700;font-size:1.1rem;line-height:1;flex:0 0 auto;
}
@media (max-width:960px){
  .pillars{grid-template-columns:1fr}
  .pillar-plus{justify-self:center}
}

/* Schema a frecce: canali esterni → canali proprietari */
.flow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(.75rem,2vw,1.5rem)}
.flow-box{
  padding:clamp(1.2rem,2.2vw,1.8rem);border-radius:var(--r-md) var(--r-xl) var(--r-md) var(--r-md);
  border:1px solid var(--line);background:var(--surf);
  display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;height:100%;
}
.on-paper .flow-box{background:#fff;border-color:var(--line-d)}
.flow-box-own{border-color:var(--or-line);background:linear-gradient(150deg,var(--or-soft),transparent 62%)}
.flow-tag{
  margin-top:auto;padding-top:.9rem;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
}
.on-paper .flow-tag{color:var(--ink-d3)}
.flow-tag-own{color:var(--or)}
.flow-arrow{display:flex;flex-direction:column;align-items:center;gap:.4rem;color:var(--or);min-width:6rem}
.flow-arrow svg{width:clamp(3.5rem,8vw,5rem);height:auto}
.flow-arrow svg path:first-child{animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-18}}
.flow-arrow span{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);text-align:center}
.on-paper .flow-arrow span{color:var(--ink-d3)}
.flow-res{
  display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:1rem;
  padding:1rem 1.6rem;border-radius:var(--r-pill);
  border:1px solid var(--or-line);background:linear-gradient(100deg,var(--or-soft),rgba(255,255,255,.02));
}
.flow-res svg{width:1.2rem;height:1.2rem;color:var(--or);flex:0 0 auto}
.flow-res strong{font-family:var(--display);font-size:var(--t-h4);color:var(--or);letter-spacing:-.02em}
@media (max-width:860px){
  .flow{grid-template-columns:1fr}
  .flow-arrow{flex-direction:row;gap:.75rem;min-width:0}
  .flow-arrow svg{transform:rotate(90deg);width:3rem}
}

/* Mappa mentale: hub centrale + nodi disposti in cerchio */
.mindmap{
  --r:min(30vw,15.5rem);
  position:relative;width:100%;max-width:42rem;aspect-ratio:1;margin:clamp(1rem,3vw,2rem) auto 0;
}
.mm-lines{position:absolute;inset:0}
.mm-line{
  position:absolute;left:50%;top:50%;height:1px;width:var(--r);
  transform-origin:0 50%;transform:rotate(var(--a));
  background:linear-gradient(90deg,var(--or-line),rgba(255,255,255,.06));
}
.mm-hub{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3;
  width:clamp(8rem,22vw,11rem);aspect-ratio:1;border-radius:50%;cursor:pointer;
  border:1px solid var(--or-line);background:radial-gradient(circle at 40% 35%,rgba(255,117,31,.22),rgba(12,12,14,.95) 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;padding:1rem;text-align:center;
  box-shadow:0 0 0 .6rem rgba(255,117,31,.05),var(--sh-2);
  transition:transform .4s var(--e-out),box-shadow .4s;
}
.mm-hub:hover{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 0 0 .9rem rgba(255,117,31,.08),var(--sh-or)}
.mm-hub-ico{width:2rem;height:2rem;color:var(--or)}
.mm-hub-ico svg{width:100%;height:100%}
.mm-hub b{font-family:var(--display);font-weight:800;font-size:var(--t-small);letter-spacing:-.02em;line-height:1.15}
.mm-hub span{font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-4);line-height:1.3}
.mm-node{
  position:absolute;left:50%;top:50%;z-index:2;cursor:pointer;
  width:clamp(7rem,17vw,9.5rem);padding:.85rem .9rem;border-radius:var(--r-md);
  border:1px solid var(--line);background:rgba(14,14,16,.92);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;gap:.15rem;text-align:center;
  transform:rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1)) translate(-50%,-50%);
  transition:border-color .35s,box-shadow .35s,scale .35s var(--e-out);
}
.mm-node:hover{border-color:var(--or-line);box-shadow:var(--sh-2);scale:1.06;z-index:4}
.mm-node b{font-family:var(--display);font-weight:650;font-size:var(--t-small);letter-spacing:-.015em}
.mm-node:hover b{color:var(--or)}
.mm-node span{font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-4);line-height:1.35}
.on-paper .mm-node{background:#fff;border-color:var(--line-d)}
@media (max-width:780px){
  .mindmap{aspect-ratio:auto;max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .mm-lines{display:none}
  .mm-hub{position:static;translate:none;width:auto;aspect-ratio:auto;border-radius:var(--r-md);grid-column:1/-1;flex-direction:row;justify-content:flex-start;text-align:left;gap:.8rem;padding:1.1rem}
  .mm-hub:hover{transform:none}
  .mm-node{position:static;transform:none;width:auto}
  .mm-node:hover{scale:1}
}

/* Contenuto ricco dentro la modale (arriva dai box del vecchio sito) */
.dlg-rich p{color:var(--ink-2);font-size:var(--t-small);line-height:1.75}
.dlg-rich p+p{margin-top:.9em}
.dlg-rich strong{color:var(--ink)}
.dlg-rich ul{display:grid;gap:.5rem;margin-top:1rem}
.dlg-rich ul li{display:grid;grid-template-columns:1rem 1fr;gap:.7rem;font-size:var(--t-small);color:var(--ink-2)}
.dlg-rich ul li::before{content:'';margin-top:.45em;width:.42rem;height:.42rem;border-radius:50%;background:var(--or)}
.dv-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:.6rem;margin-top:1.4rem}
.dv-card{
  padding:1rem;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(255,255,255,.03);
  display:flex;flex-direction:column;gap:.35rem;transition:border-color .3s,background .3s;
}
.dv-card:hover{border-color:var(--or-line);background:var(--or-soft)}
.dv-card-icon{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;background:var(--or-soft);border:1px solid var(--or-line);margin-bottom:.3rem}
.dv-card-icon svg{width:1.1rem;height:1.1rem;stroke:var(--or);stroke-width:1.7;fill:none}
.dv-card-title{font-family:var(--display);font-weight:650;font-size:var(--t-small);letter-spacing:-.015em}
.dv-card-desc{font-size:var(--t-micro);color:var(--ink-3);line-height:1.5}

/* Newsletter */
.nl-hero{min-height:auto;padding-bottom:clamp(3rem,6vw,5rem)}
.nl-card{width:100%}
.nl-card .field{margin-bottom:1rem}
.nl-card .privacy-field{margin-block:1rem}

/* --------------------------------------------------- 32. CASE HISTORY */
.ch-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.2rem}
.ch-count{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;color:var(--ink-4)}
.ch-count b{color:var(--or);font-weight:600}
#chToggle svg{transition:transform .35s var(--e-out)}
#chToggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.ch-filters{
  margin-top:1.1rem;padding:clamp(1.1rem,2vw,1.6rem);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surf);
  display:grid;gap:1.3rem;animation:fade .35s var(--e-out);
}
.ch-group .eyebrow{align-self:flex-start}
.ch-f{cursor:pointer;font-family:var(--mono)}
.ch-f.is-on{border-color:var(--or);background:var(--or);color:#000;font-weight:600}
.ch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,1.4vw,1.1rem)}
@media (max-width:980px){.ch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ch-grid{grid-template-columns:1fr}}
.ch-card{
  display:flex;flex-direction:column;text-align:left;cursor:pointer;padding:0;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-md) var(--r-xl) var(--r-md) var(--r-md);
  background:var(--surf);
  transition:transform .45s var(--e-out),border-color .45s,box-shadow .45s;
}
.ch-card:hover{transform:translateY(-5px);border-color:var(--or-line);box-shadow:var(--sh-2)}
.ch-top{position:relative;display:block;border-bottom:1px solid var(--line);overflow:hidden}
.ch-top .pv{border-radius:0}
.ch-card:hover .ch-top .pv svg{transform:scale(1.04)}
.ch-top .pv svg{transition:transform .7s var(--e-out)}
.ch-badge{
  position:absolute;top:.75rem;right:.85rem;z-index:1;padding:.28rem .7rem;border-radius:var(--r-pill);
  background:var(--or);color:#000;font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:.06em;
}
.ch-media{
  position:absolute;top:.75rem;left:.85rem;z-index:1;width:1.7rem;height:1.7rem;border-radius:50%;
  display:grid;place-items:center;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);
  color:#fff;font-size:.6rem;padding-left:.12rem;
}
.ch-body{display:flex;flex-direction:column;gap:.5rem;padding:1.1rem 1.2rem 1.3rem;flex:1}
.ch-body > b{font-family:var(--display);font-weight:700;font-size:var(--t-h4);letter-spacing:-.025em;transition:color .3s}
.ch-card:hover .ch-body > b{color:var(--or)}
.ch-meta{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.06em;color:var(--ink-4)}
.ch-body .tlink{margin-top:auto;padding-top:.6rem}
.ch-empty{margin-top:2rem;color:var(--ink-3);font-size:var(--t-small)}
.ch-rich img{width:100%;height:auto;border-radius:var(--r-sm);border:1px solid var(--line);margin-block:1rem}
.ch-rich h2{font-size:var(--t-h3);margin-top:1.8rem;margin-bottom:.7rem}
.ch-rich h3{font-size:var(--t-h4);margin-top:1.4rem;margin-bottom:.5rem}
.ch-rich blockquote{
  margin-block:1.1rem;padding:.9rem 1.2rem;border-radius:var(--r-sm);
  border-left:2px solid var(--or);background:rgba(255,255,255,.03);
}
.ch-rich blockquote p{margin:0}
.ch-rich a{color:var(--or);text-decoration:underline;text-underline-offset:.2em;word-break:break-word}

/* ---------------------------------------- 33. HERO HOME: titolo a piena riga */
.hero-in{display:flex;flex-direction:column;align-items:stretch;gap:clamp(.9rem,1.6vw,1.4rem)}
.hero .eyebrow,.hero .hero-badge{align-self:flex-start}
.hero-title{font-size:clamp(2.1rem,1rem + 4.2vw,4.9rem);max-width:24ch;margin:0}
.hero-page .hero-title{font-size:clamp(1.95rem,1rem + 3.4vw,4rem);max-width:26ch}
.hero-home .hero-grid{align-items:start;gap:clamp(1.5rem,4vw,3.5rem);grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr)}
.hero-home .core{margin-top:-1.5rem}
.hero-home .lead{max-width:48ch}
.hero-home .core{max-width:22rem;margin-inline:auto 0}
.hero-home .core-chip-1{top:2%;left:-4%}
.hero-home .core-chip-2{top:46%;right:-2%}
.hero-home .core-chip-3{bottom:2%;left:0}
.hero-proof{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.hero-proof img{width:clamp(8rem,16vw,11rem);height:auto}
.hero-proof span{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
@media (max-width:980px){.hero-home .core{order:0;margin-top:1rem}}
.core-iso{width:50%;height:50%;filter:drop-shadow(0 .75rem 2rem rgba(255,117,31,.25))}

/* --------------------------------------- 34. ANTEPRIME VETTORIALI */
.pv{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-sm);background:var(--bg-2)}
.pv svg{width:100%;height:100%;display:block}
.pv-tag{
  position:absolute;left:.75rem;bottom:.7rem;padding:.3rem .7rem;border-radius:var(--r-pill);
  background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:#fff;
}

/* Dettaglio case history */
.ch-crumb{
  margin-bottom:1.2rem;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);
}
.ch-crumb a{color:var(--or)}
.ch-crumb a:hover{color:var(--ink)}
.ch-crumb span{margin-inline:.45rem;opacity:.5}
.ch-hero-pv{border:1px solid var(--line);border-radius:var(--r-md) var(--r-xl) var(--r-md) var(--r-md);overflow:hidden}
.ch-hero-pv .pv{border-radius:0;aspect-ratio:16/11}
.ch-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.6rem,1.2vw,1rem)}
.ch-nav-a{
  display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 1.3rem;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surf);
  transition:border-color .35s,transform .35s var(--e-out);
}
.ch-nav-a:hover{border-color:var(--or-line);transform:translateY(-3px)}
.ch-nav-a span{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.ch-nav-a b{font-family:var(--display);font-weight:650;font-size:var(--t-small);letter-spacing:-.015em}
.ch-nav-a:hover b{color:var(--or)}
.ch-nav-all{text-align:center;border-color:var(--or-line);background:linear-gradient(140deg,var(--or-soft),transparent 65%)}
.ch-nav-next{text-align:right}
@media (max-width:760px){.ch-nav{grid-template-columns:1fr}.ch-nav-next{text-align:left}}

/* --------------------------------- 35. CASE STUDY HILARIA: demo interattive */
.asset-box{width:min(70rem,100%);max-height:90dvh;display:flex;flex-direction:column;padding:1.1rem}
.asset-head{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;padding:.2rem 3rem .9rem .2rem}
.asset-head h2{font-size:var(--t-h4);flex:1 1 auto;min-width:0}
.asset-box iframe{flex:1;width:100%;min-height:min(70dvh,38rem);border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}

.chat-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
@media (max-width:760px){.chat-tabs{grid-template-columns:1fr}}
.chat-tab{
  display:flex;flex-direction:column;gap:.2rem;text-align:left;cursor:pointer;
  padding:.9rem 1.1rem;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surf);
  transition:border-color .3s,background .3s,transform .3s var(--e-out);
}
.chat-tab:hover{border-color:var(--or-line);transform:translateY(-2px)}
.chat-tab.is-active{border-color:var(--or);background:linear-gradient(140deg,var(--or-soft),transparent 65%)}
.chat-tab b{font-family:var(--display);font-weight:650;font-size:var(--t-small)}
.chat-tab span{font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-4)}
.chat-tab.is-active span{color:var(--or)}

.chat-win{border:1px solid var(--line);border-radius:var(--r-md) var(--r-xl) var(--r-md) var(--r-md);background:var(--surf);overflow:hidden}
.chat-win .chat-head{padding:1rem 1.15rem;margin:0;border-bottom:1px solid var(--line)}
.chat-win .chat-head > span:nth-of-type(1){flex:1}
.chat-body{display:flex;flex-direction:column;gap:.55rem;padding:1.1rem;height:clamp(22rem,52vh,30rem);overflow-y:auto;scroll-behavior:smooth}
.msg{
  position:relative;max-width:86%;padding:.65rem .95rem .95rem;border-radius:var(--r-md);
  font-size:var(--t-small);line-height:1.55;border:1px solid var(--line);animation:fade .35s var(--e-out);
}
.msg-user{align-self:flex-end;background:rgba(255,255,255,.06);border-bottom-right-radius:var(--r-xs)}
.msg-bot{align-self:flex-start;background:var(--or-soft);border-color:var(--or-line);border-bottom-left-radius:var(--r-xs)}
.msg-time{display:block;margin-top:.35rem;font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-4);text-align:right}
.msg-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:.5rem;color:var(--or);font-family:var(--mono);font-size:var(--t-micro);word-break:break-all}
.msg.typing{display:flex;gap:.3rem;padding:.9rem 1rem}
.msg.typing span{width:.4rem;height:.4rem;border-radius:50%;background:var(--or);animation:typ 1.2s ease-in-out infinite}
.msg.typing span:nth-child(2){animation-delay:.18s}
.msg.typing span:nth-child(3){animation-delay:.36s}
@keyframes typ{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-.25rem)}}

.cap-list{display:flex;flex-direction:column;gap:.5rem}
.cap-card{
  padding:.85rem 1rem;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(255,255,255,.02);
  transition:border-color .35s,background .35s,transform .35s var(--e-out);
}
.cap-card.is-active{border-color:var(--or);background:var(--or-soft);transform:translateX(.3rem)}
.cap-card-head{display:flex;align-items:center;gap:.6rem}
.cap-card-num{font-family:var(--mono);font-size:var(--t-micro);color:var(--or)}
.cap-card-title{font-family:var(--display);font-weight:650;font-size:var(--t-small)}
.cap-card-desc{margin-top:.3rem;font-size:var(--t-micro);color:var(--ink-3);line-height:1.6}

.mail-list{display:flex;flex-direction:column;gap:.35rem;margin-top:auto}
.mail-list button{
  width:100%;display:flex;align-items:center;gap:.7rem;text-align:left;cursor:pointer;
  padding:.55rem .75rem;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(255,255,255,.02);
  transition:border-color .3s,background .3s,transform .3s var(--e-out);
}
.mail-list button:hover{border-color:var(--or-line);background:var(--or-soft);transform:translateX(.25rem)}
.mail-list b{font-family:var(--mono);font-size:var(--t-micro);color:var(--or)}
.mail-list span{font-size:var(--t-micro);color:var(--ink-2);line-height:1.4}
.manifesto-h1{max-width:20ch;margin-inline:auto;text-align:center;font-size:clamp(1.9rem,1rem + 3.2vw,3.9rem)}
.manifesto-hero .btn-row,.manifesto-hero .eyebrow{align-self:center}

/* Claim grafici: allineati alla colonna, mai fuori contesto */
.claim-img{width:100%;max-width:26rem;height:auto;align-self:center;justify-self:end}
.claim-img-c{justify-self:center;margin-inline:auto;max-width:30rem;margin-top:.6rem}
@media (max-width:860px){.claim-img{justify-self:start;max-width:20rem}}

/* Blog */
.card .pv{margin-bottom:.5rem}
.ing-meta{font-style:italic;color:var(--ink-4)!important;padding-left:.8rem;border-left:2px solid var(--line-2)}
.ing-ko{color:var(--ink-2)!important}
.ing-ko b{color:var(--or)}
.ftr-manifesto{
  width:100%;padding-block:1.4rem;border-top:1px solid var(--line);
  font-size:var(--t-micro);line-height:1.75;color:var(--ink-4);max-width:none;
}

/* ======================================================================
   36. CORREZIONI MOBILE — in fondo al foglio per vincere sulle regole
   aggiunte dopo i media query principali.
   ====================================================================== */
@media (max-width:980px){
  .hero-home .hero-grid,
  .hero-grid,
  .sec-head-split,
  .split,.split-l,.split-r,
  .row-split{grid-template-columns:1fr!important}
  .hero-home .core,.hero .core{max-width:15rem;margin:0 auto;order:-1}
  .hero-home .core{margin-top:0}
  .scroll-cue{display:none}
  .claim-img{justify-self:start;max-width:18rem}
  .ch-nav{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .chat-tabs{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .cta-punti{grid-template-columns:1fr}
  .meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .hero-title{font-size:clamp(1.85rem,1.2rem + 3.6vw,2.6rem)}
  .readout{grid-template-columns:1fr}
  .meta{grid-template-columns:1fr}
  .ftr-certs img{height:2.2rem}
  .btn-lg{padding:.95rem 1.4rem;font-size:var(--t-small)}
  .sp-grid{grid-template-columns:1fr}
  .galleria-img{grid-template-columns:1fr}
  .tape-chip{font-size:.9rem;padding:.5rem .9rem}
}

/* ======================================================================
   37. RIFINITURE — allineamenti, claim, loghi, caroselli
   ====================================================================== */

/* Sezioni chiare: più compatte e staccate dalla linea della sezione dopo */
.sec.on-paper,.sec-sm.on-paper{
  padding-block:clamp(2.75rem,4.5vw,4.5rem);
  margin-block:clamp(1.5rem,3vw,3rem);
}

/* Elenchi con spunta allineati al titolo della colonna accanto */
.sec-head-split > .ticks,.split-l > .ticks,.split > .ticks{padding-top:.35rem}

/* Carosello delle competenze: ponte fra due sezioni, niente buchi */
.tape{
  position:relative;display:flex;flex-direction:column;gap:.35rem;
  padding-block:clamp(1.5rem,3vw,2.5rem);overflow:hidden;
  border-block:1px solid var(--line);
}
.tape .ticker{border:0;padding-block:.55rem;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.tape .ticker-item{color:var(--ink-2)}
.tape .ticker-rev .ticker-item{color:var(--ink-3)}

/* Claim grafici */
.claim-img-wide{max-width:min(34rem,90%);margin:clamp(2rem,4vw,3.25rem) auto 0 0;justify-self:start}
.claim-hero{width:min(46rem,100%);height:auto;margin-inline:auto;margin-top:.4rem}

/* Muro di loghi: statico, ogni logo intero nel suo riquadro */
.sp-wall{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr));
  gap:clamp(.5rem,1vw,.8rem);
}
.sp-wall .sp-logo{width:100%;height:clamp(5.25rem,8vw,7rem)}

/* Scorrimento: sfumatura più ampia, i loghi svaniscono invece di essere tagliati */
.sp-marquee{mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.sp-logo{padding:clamp(.7rem,1.1vw,1rem)}

/* Menu con più voci: compatto, burger anticipato */
.nav-ext{width:.65rem;height:.65rem;opacity:.5;flex:0 0 auto}
@media (min-width:1301px){
  .nav-link{padding:.5rem .55rem;font-size:calc(var(--t-small) * .96);white-space:nowrap}
  .nav{gap:.1rem;flex-wrap:nowrap}
}
@media (max-width:1300px){
  .burger{display:flex}
  .nav{
    position:fixed;top:calc(env(safe-area-inset-top,0px) + var(--hdr-h) + 1.4rem);
    left:var(--gut);right:var(--gut);
    max-height:calc(100dvh - var(--hdr-h) - 3rem);overflow-y:auto;overscroll-behavior:contain;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:rgba(8,8,10,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-3);
    padding:.8rem 1rem calc(1.4rem + env(safe-area-inset-bottom,0px));
    transform:translateY(-.8rem) scale(.98);visibility:hidden;opacity:0;
    transition:transform .4s var(--e-out),opacity .3s,visibility .4s;
  }
  .nav.is-open{transform:none;visibility:visible;opacity:1}
  .nav > a,.nav-item{border-bottom:1px solid var(--line)}
  .nav > a{padding:.9rem .4rem;font-size:var(--t-h4);font-family:var(--display);font-weight:600;color:var(--ink);border-radius:0;justify-content:space-between}
  .nav > a:hover{background:none;color:var(--or)}
  .nav-item{flex-wrap:wrap;justify-content:space-between}
  .nav-item > .nav-link{padding:.9rem .4rem;font-size:var(--t-h4);font-family:var(--display);font-weight:600;color:var(--ink);flex:1;border-radius:0;background:none}
  .nav-chev{padding:.9rem .5rem}
  .nav-chev svg{width:.9rem;height:.9rem}
  .mega,.drop{
    position:static;transform:none;visibility:visible;opacity:1;
    background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;padding:0;box-shadow:none;
    width:100%;max-height:0;overflow:hidden;translate:0;min-width:0;border-radius:0;
    transition:max-height .45s var(--e-out);
  }
  .nav-item.is-open .mega,.nav-item.is-open .drop{max-height:160rem;overflow:visible}
  .mega-in{display:block;padding:0 0 1rem}
  .mega-col{margin-bottom:1rem}
  .mega-feat{margin-top:.5rem}
  .drop{padding-bottom:.8rem}
  .nav-cta{margin:1.2rem 0 0;justify-content:center}
}

/* WhatsApp: chat alta come la colonna accanto, numeri affiancati */
.wa-split{align-items:stretch}
.wa-split > .panel.chat{height:100%}
.wa-split > .panel.chat{justify-content:space-between}
.readout-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:520px){.readout-2{grid-template-columns:1fr}}

/* Muro di loghi su schermi stretti: riquadri più piccoli, meno righe */
@media (max-width:700px){
  .sp-wall{grid-template-columns:repeat(auto-fill,minmax(min(100%,7.5rem),1fr))}
  .sp-wall .sp-logo{height:clamp(4.25rem,14vw,5.25rem)}
  .sp-logo{padding:.6rem}
}

/* ------------------------------------------- 38. CARD 3D: seguono il mouse */
/* La piega è scritta come transform inline da assets/js/site.js: qui stanno
   solo il riflesso che insegue il puntatore e la transizione da usare mentre
   la card si muove. Senza JS, da touch o con "riduci le animazioni" attivo,
   resta l'hover classico (sollevamento + bordo arancione). */
.card,.ch-card,.progetto,.team-card{transform-origin:50% 50%}
.is-tilting{transition:transform .1s linear,border-color .45s,box-shadow .45s var(--e-out)}

/* riflesso di luce nel punto in cui si trova il mouse */
.card::after,.ch-card::after,.progetto::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(16rem circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.1),transparent 60%);
  opacity:0;transition:opacity .45s var(--e-out);
}
.card:hover::after,.ch-card:hover::after,.progetto:hover::after{opacity:1}
.on-paper .card::after{background:radial-gradient(16rem circle at var(--mx,50%) var(--my,50%),rgba(255,117,31,.1),transparent 60%)}
/* il riflesso è un ::after con inset:0 e raggio ereditato: non serve
   overflow:hidden, basta il contesto di posizionamento */
.ch-card,.progetto{position:relative}

@media (prefers-reduced-motion:reduce){
  .card::after,.ch-card::after,.progetto::after{display:none}
}

/* --------------------- 39. RITRATTO NELLA HERO (landing personali) */
/* Le foto del team sono già scontornate su fondo arancione: qui restano a
   colori, con l'angolo firma della D e un alone caldo che le stacca dal nero. */
.hero-foto{
  position:relative;margin:0;width:min(100%,21rem);margin-inline:auto;
  border:1px solid var(--line);border-radius:var(--r-md) var(--r-xl) var(--r-md) var(--r-md);
  background:var(--surf);overflow:hidden;
  box-shadow:0 1.5rem 3.5rem rgba(0,0,0,.55),0 .75rem 3rem rgba(255,117,31,.18);
  transition:transform .5s var(--e-out),border-color .45s,box-shadow .45s;
}
.hero-foto:hover{transform:translateY(-4px);border-color:var(--or-line)}
.hero-foto img{display:block;width:100%;height:auto}
.hero-foto figcaption{
  display:flex;flex-direction:column;gap:.15rem;
  padding:.85rem 1.1rem;border-top:1px solid var(--line);background:rgba(10,10,12,.75);
}
.hero-foto b{font-family:var(--display);font-weight:650;font-size:var(--t-small);letter-spacing:-.015em;color:var(--ink)}
.hero-foto span{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
@media (max-width:980px){.hero-foto{max-width:17rem;order:-1}}
@media (max-width:860px){.hero-foto{max-width:14rem;margin-inline:0}}