/* ============================================================
   REXOAI® — design system condiviso
   Bianco e nero. La tipografia È il brand.
   ============================================================ */
:root{
  --bg:#070707; --bg-raise:#0E0E0E; --bg-card:#121212;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.22);
  --white:#FFFFFF; --text:#F2F2F2; --text-dim:#9B9B9B;
  --radius:14px; --maxw:1180px;
  --ease:cubic-bezier(.22,.8,.3,1);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html.lock{ overflow:hidden; }
html.has-cursor, html.has-cursor *{ cursor:none; }
body{
  font-family:'Poppins',system-ui,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{ background:var(--white); color:#000; }
.wrap{ width:min(var(--maxw),92%); margin:0 auto; }
section{ padding:100px 0; position:relative; scroll-margin-top:76px; }
a{ color:inherit; text-decoration:none; }
.lead{ color:var(--text-dim); max-width:58ch; }

/* ---------- Grana (texture da stampa) ---------- */
body::after{
  content:""; position:fixed; inset:0; z-index:998; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- Intro / sipario (solo home) ---------- */
#intro{
  position:fixed; inset:0; z-index:2000; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transition:transform .85s var(--ease);
  /* Failsafe: se il JS non parte (file mancante, errore, script bloccati)
     il sipario si alza comunque da solo dopo 4 secondi */
  animation:introFailsafe .85s var(--ease) 4s forwards;
}
#intro.done{ transform:translateY(-101%); }
@keyframes introFailsafe{ to{ transform:translateY(-101%); visibility:hidden; } }
.intro-word{
  position:relative; font-size:clamp(3rem,13vw,10rem); font-weight:900;
  text-transform:uppercase; letter-spacing:-.05em; line-height:1; user-select:none;
}
.intro-outline{ color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.35); }
.intro-fill{ position:absolute; inset:0; color:var(--white); clip-path:inset(0 100% 0 0); }
.intro-meta{
  display:flex; gap:18px; align-items:center;
  font-size:.72rem; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--text-dim);
}
.intro-meta b{ color:var(--white); font-variant-numeric:tabular-nums; min-width:4ch; text-align:right; }

/* ---------- Barra scroll + cursore ---------- */
#progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--white); z-index:1000; }
#cursor,#cursor-ring{
  position:fixed; top:0; left:0; border-radius:50%; pointer-events:none;
  z-index:999; mix-blend-mode:difference; transform:translate(-50%,-50%);
}
#cursor{ width:10px; height:10px; background:#fff; }
#cursor-ring{ width:38px; height:38px; border:1px solid rgba(255,255,255,.8);
  transition:width .25s var(--ease),height .25s var(--ease); }
#cursor-ring.grow{ width:70px; height:70px; }

/* ---------- Identità tipografica ---------- */
.display{ text-transform:uppercase; font-weight:800; letter-spacing:-.03em; line-height:.95; }
.outline{ color:transparent; -webkit-text-stroke:2px var(--white); }
h2{
  text-transform:uppercase; font-weight:800;
  font-size:clamp(1.8rem,4.2vw,3rem);
  letter-spacing:-.02em; line-height:1.04; margin-bottom:16px;
}
h3{ font-weight:700; line-height:1.2; letter-spacing:-.01em; }
.eyebrow{
  display:block; font-size:.74rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-dim); margin-bottom:18px;
}
.eyebrow b{ color:var(--text); font-weight:700; }
.ghost{
  position:absolute; top:46px; right:0;
  font-size:clamp(6rem,15vw,12rem); font-weight:900; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.07);
  pointer-events:none; user-select:none;
}
.ast{ display:inline-block; font-style:normal; animation:spin 7s linear infinite; transform-origin:50% 52%; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Animazioni base ---------- */
.fade{
  opacity:0; transform:perspective(1000px) rotateX(9deg) translateY(34px);
  transform-origin:50% 100%;
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  will-change:transform,opacity;
}
.fade.show{ opacity:1; transform:perspective(1000px) rotateX(0) translateY(0); }
[data-tilt]{ transform-style:preserve-3d; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
[data-tilt] > *{ transform:translateZ(18px); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .fade{ opacity:1; transform:none; transition:none; }
  .panel,.panel::after,.scene-pivot,.step-num,.flip-inner,
  .case-bar i,.marquee-track,.line span,.ast,.art-anim{ animation:none !important; transition:none !important; }
  .panel{ transform:var(--order) !important; opacity:1 !important; }
  .panel::after{ opacity:1 !important; }
  .case-bar i{ width:var(--w) !important; }
  .line span{ transform:none !important; }
  #cursor,#cursor-ring,#intro{ display:none !important; }
  .spot-reveal{ -webkit-mask-image:none !important; mask-image:none !important; }
  .hero-spot,.hero-hint{ opacity:1 !important; animation:none !important; }
  .kin-line{ transform:none !important; }
  .manifesto .w{ color:var(--text) !important; }
}

/* ---------- Navbar ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(7,7,7,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:70px; }
.logo{ display:flex; align-items:center; gap:6px; font-weight:800; font-size:1.15rem; letter-spacing:.02em; text-transform:uppercase; }
.logo sup{ font-size:.55rem; color:var(--text-dim); }
.nav-links{ display:flex; gap:26px; font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); }
.nav-links a{ position:relative; padding:4px 0; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--white); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-links a.active{ color:var(--text); }
.nav-links a.active::after{ transform:scaleX(1); }
.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-burger{
  display:none; width:46px; height:46px; background:transparent;
  border:1px solid var(--line-strong); border-radius:10px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.nav-burger:active{ transform:scale(.94); }
.nav-burger span{ display:block; width:18px; height:2px; background:var(--white); transition:transform .3s var(--ease),opacity .3s; }
.nav-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-menu{ display:none; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--white); color:#000;
  font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  min-height:48px; padding:0 26px; border-radius:999px; border:none; cursor:pointer;
  white-space:nowrap; user-select:none;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:box-shadow .15s ease, transform .12s ease, opacity .2s;
  will-change:transform;
}
.btn:hover{ box-shadow:0 10px 30px rgba(255,255,255,.18); }
.btn:active{ transform:scale(.96); }
.btn:disabled{ opacity:.55; cursor:wait; transform:none; }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--line-strong); }
.btn-ghost:hover{ border-color:var(--white); box-shadow:none; }
/* Focus visibile da tastiera, su sfondo scuro e chiaro */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--white); outline-offset:3px; border-radius:6px;
}
.invert a:focus-visible, .invert button:focus-visible{ outline-color:#000; }
a, button{ -webkit-tap-highlight-color:transparent; }

/* ---------- Hero home ---------- */
.hero{ padding:96px 0 70px; position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(700px 380px at 70% 12%, rgba(255,255,255,.06), transparent 70%);
}
.hero h1{ font-size:clamp(3rem,10vw,8.2rem); margin-bottom:34px; }
.line{ display:block; overflow:hidden; }
.line span{ display:inline-block; transform:translateY(112%); animation:rise 1s var(--ease) forwards; }
.line:nth-child(1) span{ animation-delay:1.45s; }
.line:nth-child(2) span{ animation-delay:1.57s; }
.line:nth-child(3) span{ animation-delay:1.69s; }
/* Nelle sottopagine (senza intro) le righe partono subito */
body.subpage .line:nth-child(1) span{ animation-delay:.1s; }
body.subpage .line:nth-child(2) span{ animation-delay:.22s; }
body.subpage .line:nth-child(3) span{ animation-delay:.34s; }
@keyframes rise{ to{ transform:translateY(0); } }
.hero-sub{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero .lead{ font-size:1.06rem; margin-bottom:30px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- Hero spotlight (home): il titolo si legge sotto la luce ---------- */
.hero-spot{ position:relative; text-align:left; margin-bottom:34px; opacity:0; animation:heroIn 1s var(--ease) 1.45s forwards; }
body.subpage .hero-spot{ animation-delay:.15s; }
@keyframes heroIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
.hero-spot .spot-ghost,
.hero-spot .spot-reveal{
  font-size:clamp(2.6rem,9.5vw,7.6rem);
  line-height:.98; text-align:left;
}
.hero-spot .spot-reveal{
  -webkit-mask-image:radial-gradient(circle 230px at var(--mx,28%) var(--my,40%),#000 35%,transparent 72%);
  mask-image:radial-gradient(circle 230px at var(--mx,28%) var(--my,40%),#000 35%,transparent 72%);
}
.hero-hint{
  font-size:.72rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-dim); margin:-10px 0 34px;
  opacity:0; animation:heroIn 1s var(--ease) 1.7s forwards;
}

/* ---------- Page hero (sottopagine) ---------- */
.page-hero{ padding:84px 0 64px; position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.page-hero h1{ font-size:clamp(2.6rem,8vw,6rem); margin-bottom:24px; }
.page-hero .lead{ font-size:1.04rem; }
.page-hero .art{ position:absolute; right:-40px; top:50%; transform:translateY(-50%); width:min(42vw,460px); opacity:.9; pointer-events:none; }

/* ---------- Arte astratta SVG ---------- */
.art{ display:block; }
.art .stroke{ fill:none; stroke:var(--white); }
.art .faint{ stroke:rgba(255,255,255,.18); }
.art .fill{ fill:var(--white); }
.art-anim-rotate{ animation:spin 40s linear infinite; transform-origin:center; transform-box:fill-box; }
.art-anim-rotate.rev{ animation-direction:reverse; animation-duration:55s; }
.art-anim-dash{ stroke-dasharray:6 10; animation:dashmove 3.5s linear infinite; }
@keyframes dashmove{ to{ stroke-dashoffset:-64; } }
.art-band{
  padding:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; line-height:0; background:var(--bg-raise);
}
.art-band svg{ width:100%; height:120px; display:block; }

/* ---------- Scena 3D "canali → strategia" ---------- */
.scene{
  perspective:1300px; height:420px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; position:relative;
}
.scene-stage{ will-change:transform; }
.scene-pivot{
  position:relative; width:300px; height:330px;
  transform-style:preserve-3d; animation:pivot 18s ease-in-out infinite;
}
@keyframes pivot{
  0%,100%{ transform:rotateX(14deg) rotateY(-14deg); }
  50%{ transform:rotateX(10deg) rotateY(14deg); }
}
.panel{
  position:absolute; left:0; top:0; width:300px; height:54px;
  display:flex; align-items:center; justify-content:space-between; padding:0 18px;
  background:var(--bg-card); border:1px solid var(--line-strong); border-radius:10px;
  font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text);
  box-shadow:0 20px 50px rgba(0,0,0,.6); backface-visibility:hidden;
  animation:assemble 9s cubic-bezier(.6,.05,.2,1) infinite;
}
.panel::after{ content:"✓"; font-weight:700; color:var(--white); opacity:0; animation:check 9s ease infinite; }
.panel:nth-child(1){ --order:translate3d(0,0px,40px);   --chaos:translate3d(-130px,-150px,140px) rotateX(38deg) rotateY(-30deg) rotateZ(-14deg); }
.panel:nth-child(2){ --order:translate3d(0,68px,20px);  --chaos:translate3d(150px,-90px,-90px) rotateX(-26deg) rotateY(42deg) rotateZ(10deg); }
.panel:nth-child(3){ --order:translate3d(0,136px,0px);  --chaos:translate3d(-160px,60px,-130px) rotateX(20deg) rotateY(-46deg) rotateZ(16deg); }
.panel:nth-child(4){ --order:translate3d(0,204px,-20px);--chaos:translate3d(120px,150px,110px) rotateX(-34deg) rotateY(24deg) rotateZ(-10deg); }
.panel:nth-child(5){ --order:translate3d(0,272px,-40px);--chaos:translate3d(20px,-40px,-170px) rotateX(44deg) rotateY(-20deg) rotateZ(8deg); }
.panel:nth-child(1){ animation-delay:0s; }   .panel:nth-child(1)::after{ animation-delay:0s; }
.panel:nth-child(2){ animation-delay:.12s; } .panel:nth-child(2)::after{ animation-delay:.12s; }
.panel:nth-child(3){ animation-delay:.24s; } .panel:nth-child(3)::after{ animation-delay:.24s; }
.panel:nth-child(4){ animation-delay:.36s; } .panel:nth-child(4)::after{ animation-delay:.36s; }
.panel:nth-child(5){ animation-delay:.48s; } .panel:nth-child(5)::after{ animation-delay:.48s; }
@keyframes assemble{
  0%,12%{ transform:var(--chaos); opacity:.85; border-color:var(--line); }
  34%,78%{ transform:var(--order); opacity:1; border-color:var(--line-strong); }
  96%,100%{ transform:var(--chaos); opacity:.85; border-color:var(--line); }
}
@keyframes check{
  0%,30%{ opacity:0; transform:scale(.5); }
  40%,76%{ opacity:1; transform:scale(1); }
  92%,100%{ opacity:0; transform:scale(.5); }
}
.scene-caption{
  position:absolute; bottom:0; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-dim); text-align:center;
}
.scene-caption b{ color:var(--text); font-weight:700; }

/* ---------- Marquee ---------- */
.marquee{
  overflow:hidden; white-space:nowrap;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:18px 0; user-select:none;
}
.marquee-track{ display:inline-flex; animation:scrollX 26s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee span{
  font-size:clamp(1.2rem,2.6vw,2rem); font-weight:800;
  text-transform:uppercase; letter-spacing:-.01em; padding:0 26px; flex-shrink:0;
}
.marquee span i{ font-style:normal; color:var(--text-dim); padding-right:52px; }
.marquee.inv{ background:var(--white); border-color:var(--white); }
.marquee.inv span{ color:#000; }
.marquee.inv span i{ color:rgba(0,0,0,.35); }
.marquee.hollow span{ color:transparent; -webkit-text-stroke:1.5px var(--white); }
.marquee.hollow span i{ -webkit-text-stroke:1.5px rgba(255,255,255,.3); }
.marquee.adj{ border:none; padding:10px 0; }
.marquee.adj span{ font-style:italic; font-weight:800; font-size:clamp(1rem,2vw,1.5rem); color:var(--text-dim); }
.marquee.adj span i{ font-style:normal; color:var(--line-strong); }
.marquee.adj .marquee-track{ animation-duration:20s; animation-direction:reverse; }
@keyframes scrollX{ to{ transform:translateX(-50%); } }

/* ---------- Manifesto ---------- */
.manifesto{ padding:130px 0 80px; }
.manifesto p{
  font-size:clamp(1.7rem,4.6vw,3.4rem); font-weight:800; text-transform:uppercase;
  letter-spacing:-.02em; line-height:1.18; max-width:20ch;
}
.manifesto .w{ color:rgba(255,255,255,.13); transition:color .3s ease; }
.manifesto .w.on{ color:var(--white); }

/* ---------- Indice servizi (home) ---------- */
.serv-index{ margin-top:44px; border-top:1px solid var(--line); }
.serv-index a{
  display:grid; grid-template-columns:70px 1fr auto; align-items:center; gap:24px;
  padding:30px 0; border-bottom:1px solid var(--line);
  transition:padding .3s var(--ease);
}
.serv-index a:hover{ padding-left:16px; }
.serv-index .idx{
  font-weight:900; font-size:1.2rem; color:transparent;
  -webkit-text-stroke:1.2px var(--white); font-variant-numeric:tabular-nums;
}
.serv-index .name{
  font-size:clamp(1.4rem,4vw,2.6rem); font-weight:800;
  text-transform:uppercase; letter-spacing:-.02em; line-height:1.05;
}
.serv-index .name small{
  display:block; font-size:.78rem; font-weight:500; letter-spacing:0;
  text-transform:none; color:var(--text-dim); margin-top:4px;
}
.serv-index .arrow{
  font-size:1.6rem; font-weight:300; color:var(--text-dim);
  transition:transform .3s var(--ease), color .3s;
}
.serv-index a:hover .arrow{ transform:translateX(8px); color:var(--white); }

/* ---------- Problema ---------- */
.problema{ background:var(--bg-raise); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.prob-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; perspective:1200px; }
.prob-card{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.prob-card:hover{ border-color:var(--line-strong); box-shadow:0 24px 50px rgba(0,0,0,.5); }
.prob-card strong{ display:block; font-size:1.05rem; margin-bottom:8px; }
.prob-card p{ color:var(--text-dim); font-size:.94rem; }

/* ---------- Metodo / steps ---------- */
.steps{ margin-top:48px; display:grid; perspective:900px; }
.step{ display:grid; grid-template-columns:90px 1fr; gap:24px; padding:32px 0; border-bottom:1px solid var(--line); }
.step:first-child{ border-top:1px solid var(--line); }
.step-num{
  font-weight:900; font-size:2rem; color:transparent; -webkit-text-stroke:1.5px var(--white);
  font-variant-numeric:tabular-nums; transform:rotateY(90deg); transform-origin:left center;
  transition:transform .7s var(--ease) .25s; will-change:transform;
}
.step.show .step-num{ transform:rotateY(0); }
.step h3{ font-size:1.15rem; margin-bottom:6px; text-transform:uppercase; letter-spacing:.02em; }
.step p{ color:var(--text-dim); font-size:.96rem; max-width:62ch; }
.step small{ display:block; margin-top:8px; color:var(--text); font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }

/* ---------- Servizi (flip card 3D) ---------- */
.servizi{ background:var(--bg-raise); }
.serv-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:44px; }
.flip{ perspective:1100px; min-height:290px; cursor:pointer; scroll-margin-top:90px; }
.flip-inner{
  position:relative; width:100%; height:100%; min-height:290px;
  transform-style:preserve-3d; transition:transform .7s var(--ease);
}
.flip:hover .flip-inner,.flip.flipped .flip-inner,.flip:focus-within .flip-inner{ transform:rotateY(180deg); }
.flip-face{
  position:absolute; inset:0; backface-visibility:hidden;
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius); padding:32px; display:flex; flex-direction:column;
}
.flip-front h3{ font-size:1.3rem; text-transform:uppercase; letter-spacing:.01em; margin-bottom:12px; }
.flip-front h3 b{ display:block; font-size:.7rem; font-weight:700; letter-spacing:.2em; color:var(--text-dim); margin-bottom:8px; }
.flip-front p{ color:var(--text-dim); font-size:.94rem; }
.flip-hint{ margin-top:auto; font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); }
.flip-back{ transform:rotateY(180deg); border-color:var(--line-strong); background:linear-gradient(145deg,#181818,#0D0D0D); }
.flip-back h4{ font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); margin-bottom:16px; }
.flip-back ul{ list-style:none; display:grid; gap:10px; font-size:.92rem; }
.flip-back li::before{ content:"— "; color:var(--text-dim); }

/* ---------- Case studies (invertito) ---------- */
.invert{ background:var(--white); color:#000; }
.invert .eyebrow{ color:rgba(0,0,0,.45); }
.invert .eyebrow b{ color:#000; }
.invert .lead{ color:rgba(0,0,0,.55); }
.invert .ghost{ -webkit-text-stroke:1px rgba(0,0,0,.08); }
.case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; perspective:1200px; }
.case-card{
  background:var(--white); border:1.5px solid #000; border-radius:var(--radius);
  padding:28px; display:flex; flex-direction:column; gap:14px;
  box-shadow:6px 6px 0 #000; transition:transform .25s ease,box-shadow .25s ease;
}
.case-card:hover{ box-shadow:10px 10px 0 #000; }
.case-tag{
  align-self:flex-start; font-size:.66rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; background:#000; padding:5px 12px; border-radius:999px;
}
.case-card h3{ font-size:1.06rem; }
.case-card > p{ color:rgba(0,0,0,.55); font-size:.9rem; flex-grow:1; }
.case-metrics{ display:flex; gap:26px; }
.case-metrics b{
  display:block; font-size:1.9rem; font-weight:900; color:#000;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em; line-height:1.1;
}
.case-metrics em{ font-style:normal; font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(0,0,0,.45); }
.case-bar{ height:5px; border-radius:999px; background:rgba(0,0,0,.12); overflow:hidden; }
.case-bar i{ display:block; height:100%; width:0; background:#000; border-radius:999px; transition:width 1.4s var(--ease) .4s; }
.case-card.show .case-bar i{ width:var(--w); }
.case-note{ margin-top:20px; font-size:.78rem; color:rgba(0,0,0,.45); }

/* ---------- Stats teaser (home) ---------- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
.stat{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; background:var(--bg-card);
}
.stat b{
  display:block; font-size:clamp(2.2rem,5vw,3.4rem); font-weight:900;
  letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums;
}
.stat em{ font-style:normal; font-size:.74rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); display:block; margin-top:10px; }

/* ---------- Equazione cinetica ---------- */
.kinetic{ padding:120px 0; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.kin-line{
  display:flex; align-items:center; gap:3vw; white-space:nowrap;
  font-size:clamp(2.4rem,8vw,6.5rem); font-weight:900; text-transform:uppercase;
  letter-spacing:-.04em; line-height:1.12; will-change:transform; padding:6px 0;
}
.kin-line small{
  font-size:.16em; font-weight:700; letter-spacing:.24em; color:var(--text-dim);
  align-self:center; border:1px solid var(--line-strong); border-radius:999px;
  padding:.6em 1.2em; white-space:nowrap;
}
.kin-line .ast{ font-size:.8em; color:var(--white); }
.kin-line .arrow{ font-weight:300; }

/* ---------- Spotlight ---------- */
.spot{
  padding:150px 0; background:#000;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
}
.spot-stage{ position:relative; text-align:center; }
.spot-ghost,.spot-reveal{
  font-size:clamp(2.6rem,8.5vw,7rem); font-weight:900; text-transform:uppercase;
  letter-spacing:-.04em; line-height:1.02; user-select:none;
}
.spot-ghost{ color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.10); }
.spot-reveal{
  position:absolute; inset:0; color:var(--white);
  -webkit-mask-image:radial-gradient(circle 200px at var(--mx,50%) var(--my,50%), #000 35%, transparent 72%);
  mask-image:radial-gradient(circle 200px at var(--mx,50%) var(--my,50%), #000 35%, transparent 72%);
}
.spot-caption{
  margin-top:54px; text-align:center; font-size:.74rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--text-dim);
}

/* ---------- Testimonianze ---------- */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; perspective:1200px; }
.testi-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; display:flex; flex-direction:column; gap:18px;
}
.testi-card:hover{ border-color:var(--line-strong); box-shadow:0 24px 50px rgba(0,0,0,.5); }
.testi-card blockquote{ font-size:.96rem; color:var(--text); }
.testi-card blockquote::before{ content:"“"; color:var(--white); font-size:1.6rem; line-height:0; margin-right:4px; }
.testi-who{ font-size:.84rem; color:var(--text-dim); }
.testi-who b{ color:var(--text); display:block; }

/* ---------- CTA band ---------- */
.cta-band{ padding:120px 0; text-align:left; position:relative; overflow:hidden; }
.cta-band h2{ font-size:clamp(2.2rem,6vw,4.6rem); max-width:14ch; }
.cta-band .lead{ margin:18px 0 32px; }
.cta-band .art{ position:absolute; right:-60px; top:50%; transform:translateY(-50%); width:min(40vw,420px); opacity:.55; pointer-events:none; }

/* ---------- Contatti / form ---------- */
.contatti{ background:linear-gradient(180deg,var(--bg-raise),var(--bg)); }
.cta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; perspective:1200px; }
.contatti h2{ font-size:clamp(2rem,5vw,3.6rem); }
.contact-info{ display:grid; gap:18px; margin-top:34px; font-size:.94rem; }
.contact-info a{ color:var(--white); text-decoration:underline; text-underline-offset:3px; }
.contact-info strong{ display:block; font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); margin-bottom:4px; }
form{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:34px; display:grid; gap:16px; }
label{ font-size:.74rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); display:grid; gap:7px; }
input,textarea{
  font-size:1rem; /* 16px: evita lo zoom automatico di iOS al focus */
  font-family:inherit; color:var(--text);
  background:var(--bg-raise); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; width:100%;
}
input:focus,textarea:focus{ outline:2px solid var(--white); outline-offset:0; border-color:transparent; }
select{
  font-size:1rem; font-family:inherit; color:var(--text);
  background-color:var(--bg-raise); border:1px solid var(--line); border-radius:10px;
  padding:12px 42px 12px 14px; width:100%; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
select:focus{ outline:2px solid var(--white); outline-offset:0; border-color:transparent; }

/* ---------- Mini audit istantaneo ---------- */
.audit{ border-bottom:1px solid var(--line); }
.audit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:44px; align-items:start; }
.audit-form{
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius); padding:30px; display:grid; gap:14px;
}
.audit-empty{
  min-height:300px; display:grid; place-items:center; text-align:center;
  border:1px dashed var(--line-strong); border-radius:var(--radius);
  padding:30px; color:var(--text-dim); font-size:.9rem;
}
.audit-empty .ast{ display:block; font-size:1.6rem; color:var(--white); margin:0 auto 12px; }
.audit-result{
  background:#000; border:1px solid var(--line-strong);
  border-radius:var(--radius); padding:30px;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.audit-result[hidden]{ display:none; }
.audit-tag{
  display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#000; background:var(--white);
  padding:5px 12px; border-radius:999px;
}
.audit-result h3{ font-size:1.35rem; text-transform:uppercase; letter-spacing:-.01em; margin:14px 0 10px; }
.audit-diag{ color:var(--text-dim); font-size:.94rem; margin-bottom:18px; }
.audit-result h4{
  font-size:.7rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-dim); margin:18px 0 10px;
}
.audit-result ul{ list-style:none; display:grid; gap:10px; font-size:.92rem; }
.audit-result li{ padding-left:22px; position:relative; }
.audit-result li::before{ content:"→"; position:absolute; left:0; color:var(--white); font-weight:300; }
.audit-budget{
  border-top:1px solid var(--line); margin-top:20px; padding-top:16px;
  font-size:.9rem; color:var(--text-dim);
}
.audit-budget b{ color:var(--white); font-weight:800; }
.audit-result .btn{ margin-top:22px; width:100%; }
.audit-note{ margin-top:14px; font-size:.74rem; color:var(--text-dim); line-height:1.5; }
textarea{ resize:vertical; min-height:110px; }
.form-msg{ font-size:.88rem; color:var(--white); display:none; }

/* ---------- Footer ---------- */
footer.site{
  border-top:1px solid var(--line); padding:48px 0 0;
  font-size:.84rem; color:var(--text-dim); overflow:hidden;
}
.foot{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-bottom:36px; }
.foot-social{ display:flex; gap:18px; font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.foot-social a:hover{ color:var(--white); }
.foot-legal{
  display:flex; gap:8px 22px; flex-wrap:wrap; padding-bottom:30px;
  font-size:.76rem; border-top:1px solid var(--line); padding-top:22px;
}
.foot-legal a{ text-decoration:underline; text-underline-offset:3px; }
.foot-legal a:hover{ color:var(--white); }
.foot-mark{
  display:block; text-align:center;
  font-size:clamp(4rem,17vw,14rem); font-weight:900; text-transform:uppercase;
  letter-spacing:-.05em; line-height:.78;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.22);
  user-select:none; transform:translateY(14%); transition:color .5s ease;
}
.foot-mark:hover{ color:var(--white); }
.foot-mark b{ -webkit-text-stroke:0; color:var(--white); font-size:.25em; vertical-align:super; }

/* ---------- Responsive / smartphone ---------- */
@media (max-width:880px){
  section{ padding:60px 0; scroll-margin-top:72px; }
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .mobile-menu{
    display:flex; flex-direction:column;
    position:fixed; top:70px; left:0; right:0; bottom:0; z-index:49;
    background:rgba(7,7,7,.97); backdrop-filter:blur(10px);
    padding:26px 6% calc(40px + env(safe-area-inset-bottom));
    overflow-y:auto; overscroll-behavior:contain;
    transform:translateY(-110%); transition:transform .45s var(--ease);
  }
  .mobile-menu.open{ transform:none; }
  .mobile-menu a{
    font-size:1.5rem; font-weight:800; text-transform:uppercase;
    letter-spacing:-.01em; padding:18px 0; border-bottom:1px solid var(--line);
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-menu a:active{ color:var(--text-dim); }
  .mobile-menu a.btn{ font-size:.85rem; border-bottom:none; margin-top:26px; width:100%; min-height:54px; }
  .hero{ padding:0 0 44px; background:#000; }
  .hero::before{ display:none; }
  .hero h1{ font-size:clamp(2.2rem,11.5vw,3.4rem); margin-bottom:26px; }
  /* Lo spotlight prende la scena: schermo nero pieno, solo la luce */
  .hero-spot{
    min-height:62vh; display:flex; flex-direction:column; justify-content:center;
    margin-bottom:8px;
  }
  .hero-spot .spot-ghost,
  .hero-spot .spot-reveal{ font-size:clamp(2.7rem,13.5vw,4.2rem); }
  .hero-spot .spot-reveal{
    display:flex; flex-direction:column; justify-content:center;
    -webkit-mask-image:radial-gradient(circle 170px at var(--mx,45%) var(--my,45%),#000 35%,transparent 72%);
    mask-image:radial-gradient(circle 170px at var(--mx,45%) var(--my,45%),#000 35%,transparent 72%);
  }
  .hero-hint{ margin:0 0 30px; }
  /* Su mobile la descrizione lascia spazio: restano solo i pulsanti */
  .hero .hero-sub .lead{ display:none; }
  .hero-sub,.cta-grid{ grid-template-columns:1fr; gap:38px; }
  .hero-cta{ flex-direction:column; align-items:stretch; gap:12px; }
  .hero-cta .btn{ width:100%; min-height:54px; }
  .audit-grid{ grid-template-columns:1fr; }
  .audit-form,.audit-result{ padding:24px; }
  .page-hero{ padding:54px 0 44px; }
  .page-hero h1{ font-size:clamp(2.1rem,10.5vw,3.2rem); }
  .page-hero .art{ position:static; transform:none; width:min(70vw,300px); margin-top:30px; opacity:.7; }
  .prob-grid,.testi-grid,.case-grid,.stats{ grid-template-columns:1fr; }
  .serv-grid{ grid-template-columns:1fr; }
  .serv-index a{ grid-template-columns:48px 1fr auto; gap:14px; padding:22px 0; }
  .step{ grid-template-columns:58px 1fr; gap:14px; }
  .step-num{ font-size:1.5rem; }
  .scene{ height:340px; }
  .scene-pivot{ width:240px; height:290px; transform:scale(.84); }
  .panel{ width:240px; height:50px; font-size:.74rem; }
  .ghost{ display:none; }
  .manifesto{ padding:80px 0 46px; }
  .manifesto p{ max-width:none; }
  .kinetic{ padding:66px 0; }
  .kin-line{ font-size:clamp(1.8rem,9.5vw,3rem); gap:5vw; }
  .kin-line small{ display:none; }
  .spot{ padding:90px 0; }
  .spot-caption{ margin-top:36px; }
  .cta-band{ padding:80px 0; }
  .cta-band .art{ display:none; }
  .cta-band .btn{ min-height:54px; }
  form{ padding:24px; }
  form .btn{ width:100%; min-height:54px; }
  .foot{ flex-direction:column; align-items:flex-start; gap:24px; }
  .foot-social a{ display:inline-block; padding:10px 0; }
  .foot-legal{ gap:2px 18px; }
  .foot-legal a{ display:inline-block; padding:10px 0; }
  .foot-mark{ -webkit-text-stroke-width:1px; }
  .marquee{ padding:14px 0; }
}
@media (max-width:560px){
  .nav .btn{ display:none; }
  .nav{ height:64px; }
  .mobile-menu{ top:64px; }
  .intro-word{ font-size:clamp(2.4rem,15vw,4rem); }
  h2{ font-size:clamp(1.5rem,7.5vw,2rem); }
  .case-metrics b{ font-size:1.6rem; }
  .btn{ font-size:.8rem; padding:0 22px; }
}