/* ══════════════════════════════════════════════
   RIOVIEW STUDIO — style.css
   Dark · cinematic · iridescent
   Sito ideato e sviluppato da Valerio Buccirossi.
   © 2026 Rioview Studio · Valerio Buccirossi. Tutti i diritti riservati.
   ══════════════════════════════════════════════ */

:root{
  --bg:        #050507;
  --bg-2:      #0a0a10;
  --bg-3:      #101019;
  --line:      rgba(255,255,255,.09);
  --text:      #f5f5f8;
  /* grigi chiari: su fondo nero devono restare pienamente leggibili
     (contrasto ben oltre la soglia WCAG AA anche ai corpi piccoli) */
  --muted:     #c8c8d2;
  --muted-2:   #9e9eac;

  --iris-1:#ff4db8;   /* pink   */
  --iris-2:#8a5cff;   /* violet */
  --iris-3:#3aa0ff;   /* blue   */
  --iris-4:#2fe6c8;   /* teal   */
  --gold:  #e8c37a;

  --grad: linear-gradient(115deg,var(--iris-1),var(--iris-2) 38%,var(--iris-3) 66%,var(--iris-4));
  --grad-soft: linear-gradient(115deg,rgba(255,77,184,.9),rgba(138,92,255,.9),rgba(58,160,255,.9),rgba(47,230,200,.9));

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 80px);
  --radius: 20px;

  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --display: 'Sora', 'Inter', system-ui, sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
}

/* ── reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--iris-2);color:#fff}

/* ── shared ── */
.section{padding:clamp(80px,12vh,160px) var(--pad);max-width:var(--maxw);margin-inline:auto}
.tag{
  display:inline-block;font-family:var(--display);font-weight:600;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:22px;
}
.tag--gold{color:var(--gold)}
.section__head{max-width:820px;margin-bottom:clamp(40px,6vw,72px)}
.section__head h2,h2{
  font-family:var(--display);font-weight:800;line-height:1.04;
  font-size:clamp(2.4rem,5.6vw,4.3rem);letter-spacing:-.02em;
}
.section__sub{margin-top:20px;color:var(--muted);font-size:clamp(1.35rem,1.9vw,1.6rem);max-width:640px}

/* ── buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--display);font-weight:600;font-size:.98rem;
  padding:15px 30px;border-radius:100px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease), color .4s;
  will-change:transform;
}
.btn--primary{background:var(--grad);color:#0a0a10;background-size:180% 180%}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 14px 40px -10px rgba(138,92,255,.6);background-position:100% 50%}
.btn--ghost{border:1px solid var(--line);color:var(--text)}
.btn--ghost:hover{border-color:rgba(255,255,255,.4);transform:translateY(-3px)}
.btn--cta{background:var(--grad);color:#fff;background-size:180% 180%}
.btn--cta:hover{transform:translateY(-3px);box-shadow:0 14px 40px -10px rgba(138,92,255,.6);background-position:100% 50%}
.btn--gold{background:linear-gradient(115deg,#f4d999,#d9a94e);color:#241a06}
.btn--gold:hover{transform:translateY(-3px);box-shadow:0 14px 40px -10px rgba(232,195,122,.5)}
.btn--lg{font-size:clamp(1rem,2.4vw,1.35rem);padding:18px 38px}

/* ══ SCROLL PROGRESS ══ */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:var(--grad);z-index:1000;transition:width .1s linear;
}

/* ══ PRELOADER ══ */
.preloader{
  position:fixed;inset:0;z-index:2000;background:var(--bg);isolation:isolate;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  transition:opacity .8s var(--ease), visibility .8s;
}
.preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
/* ── Animazione one-shot del preloader (logo liquido + glitch + typing) ── */
.preloader .rv-wrap{display:flex;align-items:center;gap:44px}
.preloader .rv-col{display:flex;flex-direction:column;gap:10px}
.preloader .rv-row{display:flex;align-items:flex-end;gap:22px}
.preloader .rv-blobwrap{position:relative;width:180px;height:183px}
.preloader .rv-blobwrap .rv-liquid{filter:url(#rvLiquid);animation:rvFloat 9s ease-in-out infinite}
.preloader .rv-blobwrap img{width:180px;height:auto;display:block;animation:rvFade .5s ease both}
.preloader .rv-word{position:relative;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:800;font-size:72px;line-height:.9;letter-spacing:-3px;color:#f6f6f8}
.preloader .rv-word .rv-ghost{position:absolute;top:0;mix-blend-mode:screen}
.preloader .rv-word .rv-ghost.r{left:-8px;color:#ff2d55;animation:rvGhost .8s ease both;animation-delay:.15s}
.preloader .rv-word .rv-ghost.c{left:8px;color:#00e0ff;animation:rvGhost .8s ease both;animation-delay:.15s}
.preloader .rv-word .rv-l{display:inline-block;opacity:0;animation:rvLetterMix .5s cubic-bezier(.2,.75,.2,1) both}
.preloader .rv-studio svg{overflow:visible;display:block}
.preloader .rv-studio text{fill:#f6f6f8;stroke:#fff;stroke-width:1.1;stroke-dasharray:260;stroke-dashoffset:260;fill-opacity:0}
.preloader .rv-tag{padding-left:22px;border-left:1px solid #3a3a42;font-family:'SF Mono',ui-monospace,Menlo,monospace;opacity:0;animation:rvFade .25s ease both;animation-delay:1.95s}
.preloader .rv-tag .rv-diw{display:flex;gap:9px;font-weight:700;font-size:14px;letter-spacing:.2px;color:#f6f6f8}
.preloader .rv-tag .rv-diw span{opacity:0;animation:rvFade .3s ease both}
.preloader .rv-tag .rv-type{font-weight:400;font-size:13px;line-height:1.55;color:#9a9aa2;overflow:hidden;white-space:nowrap;width:0;border-right:2px solid transparent}
@keyframes rvFade{from{opacity:0}to{opacity:1}}
@keyframes rvFloat{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(4px,-6px) rotate(1.1deg)}50%{transform:translate(-3px,5px) rotate(-.9deg)}75%{transform:translate(5px,2px) rotate(.6deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes rvGhost{0%{opacity:.9}60%{opacity:.9}100%{opacity:0}}
@keyframes rvLetterMix{0%{opacity:0;transform:translateY(14px) translateX(-8px) skewX(12deg)}55%{opacity:1;transform:translateY(0) translateX(2px) skewX(0)}100%{opacity:1;transform:none}}
@keyframes rvDraw2{from{stroke-dashoffset:260}to{stroke-dashoffset:0}}
@keyframes rvFill2{0%{fill-opacity:0;stroke:#fff}60%{stroke:#fff}100%{fill-opacity:1;stroke:rgba(255,255,255,0)}}
@keyframes rvType29{from{width:0}to{width:29ch}}
@keyframes rvType22{from{width:0}to{width:22ch}}
@keyframes rvCaret{0%,50%{border-color:#fff}50.01%,100%{border-color:transparent}}
@keyframes rvCaretEnd{0%{border-color:#fff}25%{border-color:transparent}50%{border-color:#fff}75%,100%{border-color:transparent}}
@media (max-width:640px){
  .preloader .rv-wrap{flex-direction:column;gap:24px;text-align:center;padding:0 20px}
  .preloader .rv-blobwrap{width:120px;height:122px}
  .preloader .rv-blobwrap img{width:120px}
  .preloader .rv-word{font-size:46px;letter-spacing:-2px}
  .preloader .rv-row{flex-direction:column;align-items:center;gap:14px}
  .preloader .rv-tag{border-left:0;border-top:1px solid #3a3a42;padding-left:0;padding-top:12px}
  .preloader .rv-tag .rv-diw{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .preloader .rv-blobwrap .rv-liquid{animation:none;filter:none}
  .preloader .rv-blobwrap img{animation:none}
  .preloader .rv-word .rv-l{opacity:1;animation:none}
  .preloader .rv-word .rv-ghost{display:none}
  .preloader .rv-studio text{fill-opacity:1;stroke:rgba(255,255,255,0);stroke-dashoffset:0;animation:none}
  .preloader .rv-tag{opacity:1;animation:none}
  .preloader .rv-tag .rv-diw span{opacity:1;animation:none}
  .preloader .rv-tag .rv-type{width:auto;animation:none;border-right:0}
}

/* ══ CURSOR — luce di proiezione + scia da matita + onda al click (A+B+C) ══ */
.cursor{position:fixed;top:0;left:0;width:110px;height:110px;border-radius:50%;
  pointer-events:none;z-index:1500;transform:translate(-50%,-50%);mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,255,255,.15),rgba(138,92,255,.12) 42%,transparent 70%);
  transition:width .35s var(--ease), height .35s var(--ease), background .35s}
.cursor::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;
  background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 10px rgba(255,255,255,.8);
  transition:width .25s var(--ease), height .25s var(--ease), background .25s}
/* sui link la luce "va a fuoco": spot più piccolo e intenso */
.cursor.is-hover{width:52px;height:52px;
  background:radial-gradient(circle,rgba(255,255,255,.32),rgba(138,92,255,.32) 46%,rgba(58,160,255,.12) 68%,transparent 76%)}
.cursor.is-hover::after{width:12px;height:12px;background:#2fe6c8;box-shadow:0 0 14px rgba(47,230,200,.9)}
/* scia da matita: puntini iridescenti che seguono il movimento e svaniscono */
.cursor-trail{position:fixed;inset:0;pointer-events:none;z-index:1490}
.cursor-trail i{position:absolute;left:0;top:0;width:4px;height:4px;border-radius:50%;
  background:linear-gradient(115deg,#ff4db8,#8a5cff,#3aa0ff);mix-blend-mode:screen;
  transform:translate(-50%,-50%)}
/* onda al click: il sito reagisce come un'installazione interattiva */
.cursor-ripple{position:fixed;width:16px;height:16px;border-radius:50%;
  border:1.5px solid rgba(174,140,255,.9);pointer-events:none;z-index:1495;mix-blend-mode:screen;
  animation:cursorRipple .7s ease-out forwards}
@keyframes cursorRipple{
  from{transform:translate(-50%,-50%) scale(1);opacity:.95}
  to{transform:translate(-50%,-50%) scale(7);opacity:0}}
.has-cursor *{cursor:none!important}
@media (hover:none),(pointer:coarse){.cursor,.cursor-trail{display:none}}

/* ══ HEADER ══ */
.header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.header.is-scrolled{
  background:rgba(5,5,7,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--line);padding-block:12px;
}
.brand{display:flex;align-items:center;gap:10px}
.brand__symbol{
  width:35px;height:35px;object-fit:cover;flex:none;
  border-radius:52% 48% 55% 45% / 50% 55% 45% 50%;
  filter:url(#liquidWarpSoft); /* superficie liquida come la bolla della pagina, ma delicata */
  animation:brandFluid 16s ease-in-out infinite; /* morphing molto lento */
  will-change:border-radius,transform;
}
.brand__wordmark{height:clamp(21px,2.8vw,26px);width:auto;display:block}

.nav{
  display:flex;align-items:center;gap:4px;padding:6px 8px;
  background:rgba(20,20,28,.42);
  backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid rgba(255,255,255,.1);border-radius:18px;
  box-shadow:0 10px 34px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.07);
}
.nav a{font-size:.95rem;font-weight:500;color:#cfcfda;padding:9px 15px;border-radius:12px;
  transition:color .3s var(--ease), background .3s var(--ease), font-weight .15s}
.nav a:hover,.nav a:active{color:#fff;font-weight:600;background:rgba(255,255,255,.07)}
.nav a.is-current:not(.nav__cta){color:#fff;background:rgba(255,255,255,.07)}
.nav__cta{color:#0a0a10;background:var(--grad);background-size:180% 180%}
.nav__cta:hover{color:#0a0a10;background-position:100% 50%}

.header__tools{display:flex;align-items:center;gap:16px}
.lang{display:flex;align-items:center;gap:5px;font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--muted-2)}
.lang span{transition:color .3s}
.lang span.is-active{color:var(--text)}
.lang__sep{color:var(--muted-2)}
/* Le due barre ruotano attorno al centro del riquadro: la X resta dentro
   l'ingombro del pulsante e non viene tagliata dal bordo dello schermo. */
.burger{display:none;position:relative;width:34px;height:34px;flex:none}
.burger span{position:absolute;left:50%;top:50%;display:block;height:2px;width:24px;
  background:var(--text);border-radius:2px;transition:transform .35s var(--ease)}
.burger span:first-child{transform:translate(-50%,-50%) translateY(-5px)}
.burger span:last-child{transform:translate(-50%,-50%) translateY(5px)}
.burger[aria-expanded="true"] span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}

/* ══ HERO ══ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:120px var(--pad) 80px;overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__aura{
  position:absolute;top:-10%;left:50%;transform:translateX(-50%);
  width:min(1100px,120vw);height:min(1100px,120vw);border-radius:50%;
  background:radial-gradient(circle at 50% 40%,rgba(138,92,255,.28),rgba(58,160,255,.14) 38%,transparent 66%);
  filter:blur(40px);animation:auraFloat 14s ease-in-out infinite;
}
.hero__grain{
  position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__orb{
  position:absolute;right:clamp(-80px,-2vw,0px);top:50%;z-index:1;
  width:clamp(320px,42vw,620px);aspect-ratio:1;transform:translateY(-50%);
  will-change:transform;pointer-events:none;
}
.hero__orb img{
  width:100%;height:100%;object-fit:contain;
  animation:orbFloat 9s ease-in-out infinite;
  filter:drop-shadow(0 30px 80px rgba(138,92,255,.35)) contrast(1.06) saturate(1.12);
  mix-blend-mode:screen; /* nasconde lo sfondo nero del ritaglio: resta solo l'iridescenza */
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 58%,transparent 74%);
  mask-image:radial-gradient(circle at 50% 50%,#000 58%,transparent 74%);
}
.hero__orb-glow{
  position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,77,184,.35),rgba(58,160,255,.2) 45%,transparent 70%);
  filter:blur(50px);animation:pulse 6s ease-in-out infinite;
}
.hero__content{position:relative;z-index:2;max-width:min(720px,92%)}
.hero__eyebrow{
  font-family:var(--display);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  font-size:.82rem;color:var(--muted);margin-bottom:26px;
}
.hero__title{
  font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:.94;
  font-size:clamp(3.4rem,13vw,9.5rem);margin-bottom:30px;
}
.hero__title .word{display:inline-block;opacity:0;transform:translateY(40px);
  animation:wordUp .9s var(--ease) forwards;animation-delay:calc(.25s + var(--i) * .16s)}
.hero__title .grad{
  background:var(--grad);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:wordUp .9s var(--ease) forwards, shimmer 5s linear infinite 1.2s;
  animation-delay:calc(.25s + var(--i) * .16s);
}
.hero__lead{font-size:clamp(1.4rem,2.2vw,1.7rem);color:var(--muted);max-width:640px;margin-bottom:38px}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px}
.hero__scroll{
  position:absolute;bottom:34px;right:var(--pad);z-index:2;
  display:flex;align-items:center;gap:12px;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.hero__scroll-line{width:1px;height:44px;background:linear-gradient(var(--iris-2),transparent);position:relative;overflow:hidden}
.hero__scroll-line::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--text);animation:scrollDown 2s ease-in-out infinite}

/* ══ MARQUEE ══ */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding:22px 0;background:var(--bg-2)}
.marquee__track{display:flex;align-items:center;gap:38px;white-space:nowrap;width:max-content;animation:marquee 32s linear infinite}
.marquee__track span{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,3.4vw,2.6rem);letter-spacing:-.01em}
.marquee__track i{color:var(--iris-2);font-style:normal;font-size:1.1rem}

/* ══ MANIFESTO ══ */
.manifesto{padding:clamp(90px,16vh,200px) var(--pad);max-width:1100px;margin-inline:auto}
.manifesto__text{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.22;
  font-size:clamp(1.8rem,5vw,3.6rem);
}
.manifesto__text .mw{color:rgba(255,255,255,.28);transition:color .3s var(--ease)}
.manifesto__text .mw.on{color:var(--text)}

/* ══ STUDIO ══ */
.studio__grid{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.studio__media{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--bg-2);border:1px solid var(--line);aspect-ratio:1}
.studio__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.studio__media:hover img{transform:scale(1.05)}
.studio__media-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,transparent 40%,rgba(5,5,7,.55));pointer-events:none}
.studio__body p{color:var(--muted);font-size:clamp(1.35rem,1.8vw,1.55rem);margin-bottom:20px}
.studio__body b{color:var(--text);font-weight:600}
.studio__signals{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.studio__signals li{
  font-family:var(--display);font-size:.85rem;font-weight:600;
  padding:8px 16px;border:1px solid var(--line);border-radius:100px;color:var(--muted);
  transition:border-color .3s,color .3s}
.studio__signals li:hover{border-color:rgba(255,255,255,.4);color:var(--text)}

/* ══ APPROACH ══ */
.approach__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);counter-reset:step}
.approach__step{position:relative;padding:38px 32px;border:1px solid rgba(255,255,255,.05);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(10,10,16,.3));transition:transform .5s var(--ease),border-color .5s}
.approach__step:hover{transform:translateY(-8px);border-color:rgba(138,92,255,.4)}
.approach__num{font-family:var(--display);font-weight:800;font-size:2.6rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:block}
.approach__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.approach__icon{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);display:grid;place-items:center;flex:none}
.approach__icon svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.approach__step h3{font-family:var(--display);font-weight:700;font-size:1.72rem;margin-bottom:12px}
.approach__step p{color:var(--muted);font-size:1.38rem}

/* ══ SERVICES ══ */
.services__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.card{
  position:relative;padding:clamp(30px,3.5vw,46px);border:1px solid var(--line);
  border-radius:var(--radius);background:var(--bg-2);overflow:hidden;
  transition:transform .5s var(--ease),border-color .5s,background .5s;
  transform-style:preserve-3d;
}
.card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%),rgba(138,92,255,.14),transparent 45%);
}
.card:hover{border-color:rgba(255,255,255,.22);background:var(--bg-3)}
.card:hover::before{opacity:1}
.card__index{font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--muted-2);letter-spacing:.1em}
.card h3{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.7rem);margin:16px 0 14px;line-height:1.1}
.card p{color:var(--muted);font-size:1.02rem}
.services__note{margin-top:26px;color:var(--muted-2);font-size:.9rem}

/* ── Servizi: viaggio "hero" — un servizio alla volta, pinnato allo scroll ── */
.svc-journey{position:relative;height:520vh} /* ritmo veloce: ~70vh di scroll per servizio */
.svc-pin{position:sticky;top:0;height:100vh;overflow:hidden;
  display:grid;grid-template-columns:.95fr 1.05fr;align-items:center;
  gap:clamp(24px,4vw,70px);padding-top:44px}
.svc-aura{
  position:absolute;top:50%;left:26%;transform:translate(-50%,-50%);
  width:min(520px,58vw);aspect-ratio:1;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(138,92,255,.36),rgba(58,160,255,.15) 45%,transparent 68%);
  filter:blur(46px);transition:filter 1.1s var(--ease);
}
.svc-slides{position:relative;z-index:2;height:min(58vh,520px)}
.svc-slide{position:absolute;inset:0;padding-right:clamp(56px,6vw,100px);display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:translateY(46px);pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease)}
.svc-slide.is-on{opacity:1;transform:none;pointer-events:auto;
  transition:opacity .6s var(--ease) .2s, transform .6s var(--ease) .2s} /* entra dopo l'uscita della precedente */
.svc-slide__num{font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:.14em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:16px}
.svc-slide h3{font-family:var(--display);font-weight:800;line-height:1.06;letter-spacing:-.015em;
  font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:18px}
.svc-slide p{color:var(--muted);font-size:clamp(1.12rem,1.5vw,1.32rem);line-height:1.55;max-width:520px}

/* ── Grafiche animate dei servizi (scene SVG approvate, palette iridescente) ── */
.svc-gfx-stack{position:relative;z-index:2;justify-self:center;
  width:min(360px,38vw);height:min(360px,38vw);pointer-events:none}
.svc-gfx{position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;transform:scale(.88);transition:opacity .3s var(--ease), transform .3s var(--ease)}
.svc-gfx.is-on{opacity:1;transform:none;
  transition:opacity .6s var(--ease) .2s, transform .6s var(--ease) .2s} /* entra dopo che l'altra è uscita */
.svc-gfx svg{width:100%;height:100%;overflow:visible}
.svc-gfx:not(.is-on) *{animation-play-state:paused!important}

/* 01 · muro reattivo al tocco */
.s1-ring{transform-box:fill-box;transform-origin:center;animation:s1r 3.2s ease-out infinite}
.s1-ring.r1{animation-delay:1.05s}.s1-ring.r2{animation-delay:2.1s}
@keyframes s1r{0%{transform:scale(.15);opacity:.95}70%{opacity:.3}100%{transform:scale(3.1);opacity:0}}
.s1-t{animation:s1t 3.2s ease-in-out infinite}
@keyframes s1t{0%,100%{opacity:.22}45%{opacity:1}}
.s1-hand{animation:s1h 3.2s ease-in-out infinite}
@keyframes s1h{0%,14%,100%{transform:translateY(0)}7%{transform:translateY(-10px)}}

/* 02 · proiettore che dipinge la facciata */
.s2-shapes{animation:s2s 7s ease-in-out infinite}
@keyframes s2s{0%,100%{transform:translateY(0);filter:hue-rotate(0deg)}50%{transform:translateY(-26px);filter:hue-rotate(45deg)}}
.s2-cone{animation:s2c 3.5s ease-in-out infinite}
@keyframes s2c{0%,100%{opacity:.13}50%{opacity:.28}}
.s2-lens{transform-box:fill-box;transform-origin:center;animation:s2l 3.5s ease-in-out infinite}
@keyframes s2l{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}

/* 03 · sedia line-art che si disegna, su pedana girevole */
.s3-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:s3d 3s var(--ease) forwards}
@keyframes s3d{to{stroke-dashoffset:0}}
.s3-pop{opacity:0;animation:s3pop .6s ease 2.6s forwards}
@keyframes s3pop{to{opacity:1}}
.s3-beam{opacity:0;animation:s3beam 1.2s ease 3s forwards}
@keyframes s3beam{to{opacity:.3}}
.s3-belt{animation:s3b 7s linear infinite}
@keyframes s3b{to{stroke-dashoffset:-108}}
.s3-chair{animation:s3f 7s ease-in-out infinite}
@keyframes s3f{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* 04 · layout che si compone */
.s4-el{opacity:0;animation:s4in .9s var(--ease) forwards}
.s4-el.d1{animation-delay:.55s}.s4-el.d2{animation-delay:1.1s}
.s4-el.d3{animation-delay:1.65s}.s4-el.d4{animation-delay:2.2s}
@keyframes s4in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.s4-cursor{animation:s4cur 7s ease-in-out infinite}
@keyframes s4cur{0%,100%{transform:translate(0,0)}25%{transform:translate(52px,-64px)}55%{transform:translate(96px,-14px)}80%{transform:translate(30px,10px)}}

/* 05 · stampa di un case → la stampante svanisce → l'elettronica popola il case */
.s5-head{animation:s5h 2.2s ease-in-out infinite}
@keyframes s5h{0%,100%{transform:translateX(-44px)}50%{transform:translateX(44px)}}
.s5-bar{animation:s5bar 3.4s linear forwards} /* asse sincronizzato: sempre appena sopra la stampa */
@keyframes s5bar{from{transform:translateY(110px)}to{transform:translateY(70px)}}
.s5-rig{animation:s5rig .9s ease 4.3s forwards} /* a stampa finita la stampante svanisce */
@keyframes s5rig{to{opacity:0}}
.s5-l{opacity:0;animation:s5l .45s ease forwards}
@keyframes s5l{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.s5-el{opacity:0;animation:s5el .7s var(--ease) forwards} /* i componenti entrano nel case */
@keyframes s5el{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.s5-cav{opacity:0;animation:s5cav .6s ease forwards} /* apertura del case */
@keyframes s5cav{to{opacity:1}}
.s5-led{opacity:0;animation:s5el .5s ease 6.8s forwards, s5led 1.3s ease-in-out 7.5s infinite}
@keyframes s5led{0%,100%{opacity:.25}50%{opacity:1}}

/* 06 · consulenza — dialogo, idea che si accende, piano d'azione */
.s7-b1{animation:s7f 6s ease-in-out infinite}
@keyframes s7f{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.s7-dot{opacity:.25;animation:s7d 1.8s ease-in-out infinite}
.s7-dot.d1{animation-delay:.3s}.s7-dot.d2{animation-delay:.6s}
@keyframes s7d{0%,100%{opacity:.25}40%{opacity:1}}
.s7-b2{transform-box:fill-box;transform-origin:100% 100%;animation:s7b2 6s ease-in-out infinite}
@keyframes s7b2{0%,16%{opacity:0;transform:scale(.6)}28%,86%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.6)}}
.s7-glow{transform-box:fill-box;transform-origin:center;animation:s7g 3s ease-in-out infinite}
@keyframes s7g{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.12)}}
.s7-rays{animation:s7r 3s ease-in-out infinite}
@keyframes s7r{0%,100%{opacity:.15}50%{opacity:1}}
.s7-route{stroke-dashoffset:1;animation:s7route 2.6s var(--ease) .4s forwards}
@keyframes s7route{to{stroke-dashoffset:0}}
.s7-m{opacity:0;animation:s7m .5s ease .5s forwards}
.s7-m.m1{animation-delay:1.6s}.s7-m.m2{animation-delay:3s}
@keyframes s7m{to{opacity:1}}


/* ── Onde concentriche al tocco della bolla (come uno stagno calmo) ── */
.brip{position:fixed;pointer-events:none;border-radius:50%;mix-blend-mode:screen;z-index:2;
  border:1.5px solid rgba(174,140,255,.85);width:16px;height:16px;transform:translate(-50%,-50%);
  animation:bripA 1.05s cubic-bezier(.22,1,.36,1) forwards}
.brip--2{border-color:rgba(61,224,208,.6);animation-duration:1.45s;animation-delay:.07s}
.brip--3{border-color:rgba(255,77,184,.4);animation-duration:1.8s;animation-delay:.15s}
@keyframes bripA{from{transform:translate(-50%,-50%) scale(1);opacity:.95}
  to{transform:translate(-50%,-50%) scale(15);opacity:0}}

/* ── Conductor: la bolla persistente che attraversa la Home ── */
.liquid-defs{position:absolute;width:0;height:0;overflow:hidden}
.conductor{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.conductor__orb{
  position:absolute;top:0;left:0;width:40vmin;height:40vmin;overflow:visible;
  transform:translate(-30vw,-30vh);
  will-change:transform,width,height,filter;
}
/* la bolla è l'immagine fedele del logo: nessun ritaglio, solo le animazioni */
.conductor__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:contrast(1.04) saturate(1.1)}

/* contenuti sopra la bolla, così il testo resta nitido e leggibile */
main > section, .marquee, .footer{position:relative;z-index:1}
/* le ancore fuori-bordo non devono allargare la pagina (niente scroll orizzontale) */
main > section{overflow-x:clip}

/* ancore invisibili: definiscono dove/come la bolla si posa in ogni sezione */
.oa{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:40vmin;height:40vmin;opacity:0;pointer-events:none;z-index:-1}
.oa--flow{position:relative;top:auto;left:auto;transform:none;width:100%;height:auto;aspect-ratio:1}
.hero .oa{left:auto;right:4vw;top:50%;transform:translateY(-50%);width:48vmin;height:48vmin}
.manifesto .oa{left:auto;right:3vw;top:24%;transform:none;width:26vmin;height:26vmin}
.approach .oa{left:auto;right:5vw;top:18%;transform:none;width:24vmin;height:24vmin}
/* nei servizi la bolla svanisce (op 0): due ancore tengono la dissolvenza per tutto il viaggio */
.services .oa{left:auto;right:5vw;top:2.5%;transform:none;width:22vmin;height:22vmin}
.services .oa--end{top:auto;bottom:2%}
.vision .oa{left:auto;right:5vw;top:50%;transform:translateY(-50%);width:32vmin;height:32vmin}
.shop .oa{left:auto;right:6vw;top:50%;transform:translateY(-50%);width:34vmin;height:34vmin}
.contact .oa{left:auto;right:7vw;top:22%;transform:none;width:30vmin;height:30vmin}

/* ══ VISION ══ */
.vision__grid,.studio__mv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
/* Missione & Visione integrate nella sezione Studio */
.studio__mv{margin-top:clamp(48px,6vw,84px);padding-top:clamp(44px,5vw,72px);border-top:1px solid var(--line)}
.vision__block{padding:clamp(30px,4vw,50px);border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(160deg,var(--bg-2),rgba(16,16,25,.35))}
.vision__block h3{font-family:var(--display);font-weight:700;font-size:1.88rem;margin-bottom:20px}
.vision__block h3::after{content:"";display:block;width:46px;height:3px;background:var(--grad);border-radius:3px;margin-top:14px}
.vision__block p{color:var(--muted);font-size:clamp(1.35rem,1.8vw,1.55rem)}

/* ══ SHOP — due mondi: Unesimo + Believe The Unknown ══ */
.shop__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,34px)}
.shop-card{position:relative;text-align:center;overflow:hidden;
  padding:clamp(42px,5vw,70px) clamp(24px,3vw,48px);
  border-radius:calc(var(--radius) + 8px)}
.shop-card__icon{width:46px;height:36px;margin:0 auto 16px;display:block;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.9;
  animation:shopIconFloat 5s ease-in-out infinite}
@keyframes shopIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.shop-card__soon{display:inline-block;margin:0 auto 22px;font-family:var(--display);font-weight:600;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  padding:7px 16px;border-radius:100px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
.shop-card__title{font-family:var(--display);font-weight:300;font-size:clamp(2rem,4vw,3rem);
  letter-spacing:-.01em;margin-bottom:18px}
.shop-card__title em{font-style:normal;font-weight:800}
.shop-card p{color:var(--muted);font-size:clamp(1.2rem,1.7vw,1.45rem);max-width:460px;margin:0 auto 30px}
/* Unesimo — arancione del logo (#d96a27) */
.shop-card--unesimo{border:1px solid rgba(217,106,39,.28);
  background:radial-gradient(circle at 50% 0%,rgba(217,106,39,.13),transparent 60%),var(--bg-2)}
.shop-card--unesimo .shop-card__icon{stroke:#e8863f}
.shop-card--unesimo .shop-card__soon{color:#f0a06a;border-color:rgba(217,106,39,.45);background:rgba(217,106,39,.10)}
.shop-card--unesimo .shop-card__title em{background:linear-gradient(115deg,#f0a06a,#d96a27);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* Believe The Unknown — teal cosmico */
.shop-card--btu{border:1px solid rgba(49,233,129,.24);
  background:radial-gradient(circle at 50% 0%,rgba(49,233,129,.10),transparent 60%),var(--bg-2)}
.shop-card--btu .shop-card__icon{stroke:#7defd9}
.shop-card--btu .shop-card__icon .dot{fill:#7defd9;stroke:none}
.shop-card--btu .shop-card__soon{color:#7defd9;border-color:rgba(49,233,129,.4);background:rgba(49,233,129,.08)}
.shop-card--btu .shop-card__title em{background:linear-gradient(115deg,#2fe6c8,#3aa0ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.btn--teal{background:linear-gradient(115deg,#5df2a2,#1fc463);color:#04170c}
.btn--teal:hover{transform:translateY(-3px);box-shadow:0 14px 40px -10px rgba(49,233,129,.5)}

/* ══ CONTACT ══ */
.contact__inner{text-align:center;max-width:820px;margin-inline:auto}
.contact__inner h2{margin-bottom:20px}
.contact__inner>p{color:var(--muted);font-size:clamp(1.4rem,2.2vw,1.65rem);margin-bottom:38px}
.contact{padding-bottom:clamp(30px,4vh,52px)}
.contact__socials{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;margin-top:18px}
.contact__socials a{font-family:var(--display);font-weight:600;color:var(--muted);transition:color .3s}
.contact__socials a:hover{color:var(--text)}

/* ── Contact form ── */
.cform{max-width:640px;margin:0 auto;text-align:left;display:flex;flex-direction:column;gap:18px}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cform__field{display:flex;flex-direction:column;gap:8px}
.cform__field>span{font-family:var(--display);font-size:.8rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cform input[type=text],.cform input[type=email],.cform textarea{
  width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;
  color:var(--text);font-family:var(--font);font-size:1rem;padding:14px 16px;
  transition:border-color .3s,box-shadow .3s,background .3s;resize:vertical}
.cform input::placeholder,.cform textarea::placeholder{color:var(--muted-2)}
.cform input:focus,.cform textarea:focus{outline:none;border-color:rgba(138,92,255,.6);
  box-shadow:0 0 0 4px rgba(138,92,255,.14);background:var(--bg-3)}
.cform__hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform__verify{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px;margin-top:4px}
.cform__field--cap{flex:1;min-width:210px}
.cform__field--cap b{color:var(--text);font-variant-numeric:tabular-nums}
.cform__submit{flex:none}
.cform__status{min-height:1.3em;margin:4px 0 0;font-size:.98rem;color:var(--muted)}
.cform__status.is-ok{color:var(--iris-4)}
.cform__status.is-err{color:#ff6b8a}

/* ══ FOOTER — due righe: logo+link legali / claim+dati fiscali ══ */
.footer{padding:26px var(--pad) 24px;border-top:1px solid var(--line);max-width:var(--maxw);margin-inline:auto;
  display:flex;flex-direction:column;gap:14px}
.footer__row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 32px}
.footer__logo{width:min(172px,46%);height:auto;margin:0;opacity:.88}
.footer__legal{color:var(--muted-2);font-size:.84rem}
.footer__claim{font-family:var(--display);font-weight:600;color:var(--muted);font-size:.92rem}
.footer__links{color:var(--muted-2);font-size:.84rem}
.footer__links a{color:var(--muted-2);transition:color .3s}
.footer__links a:hover{color:var(--text)}

/* ══ PROTEZIONE DELLE IMMAGINI ══
   Le immagini non si possono trascinare, selezionare o salvare con il tasto
   destro / pressione prolungata: il puntatore le attraversa, quindi il menu
   contestuale si apre sulla pagina e non sull'immagine.
   Nota: nessuna tecnica lato browser può impedire uno screenshot; questo
   livello scoraggia il prelievo diretto, la protezione vera è l'anti-hotlink
   nel file .htaccess e i metadati di copyright dentro i file. */
img{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;user-drag:none;
  -webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
img:not([data-interactive]){pointer-events:none}
.noselect{user-select:none;-webkit-user-select:none}

/* ══ COOKIE BANNER (consenso GA4) ══
   Riga singola in basso a destra, con due pulsanti testuali identici:
   nessun colore guida la scelta, così le due opzioni restano di pari dignità
   come richiesto dalle linee guida del Garante. */
.cookiebar{position:fixed;right:clamp(16px,4vw,40px);bottom:clamp(16px,4vw,32px);z-index:1800;
  max-width:min(600px,calc(100vw - 32px));animation:cookieUp .55s var(--ease) both}
@keyframes cookieUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.cookiebar__inner{display:flex;align-items:center;gap:6px 18px;
  padding:7px 8px 7px 18px;border-radius:999px;
  background:var(--bg-2);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 16px 40px -16px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05)}
.cookiebar__text{margin:0;color:var(--muted);font-size:.78rem;line-height:1.45}
.cookiebar__text a{color:var(--text);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(138,92,255,.55);white-space:nowrap}
.cookiebar__text a:hover{text-decoration-color:var(--iris-2)}
.cookiebar__actions{display:flex;gap:6px;margin-left:auto;flex-shrink:0}
/* i due pulsanti sono volutamente identici: stesso peso, stesso colore */
.cookiebar__btn{appearance:none;-webkit-appearance:none;cursor:pointer;white-space:nowrap;
  font-family:var(--display);font-weight:600;font-size:.76rem;letter-spacing:.005em;
  padding:7px 15px;border-radius:999px;
  background:transparent;border:1px solid var(--line);color:var(--muted);
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.cookiebar__btn:hover{color:var(--text);border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.05)}
.cookiebar__btn:focus-visible{outline:2px solid var(--iris-2);outline-offset:2px}
@media (max-width:640px){
  .cookiebar{left:12px;right:12px;bottom:12px;max-width:none}
  .cookiebar__inner{flex-wrap:wrap;border-radius:16px;padding:12px 13px}
  .cookiebar__text{flex:1 1 100%}
  .cookiebar__btn{padding:8px 16px}
}
@media (prefers-reduced-motion:reduce){
  .cookiebar{animation:none}
}

/* ══ CONSENSO PRIVACY NEL FORM ══ */
.cform__consent{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.cform__consent input{width:17px;height:17px;margin-top:3px;flex:none;accent-color:#8a5cff;cursor:pointer}
.cform__consent span{color:var(--muted);font-size:.9rem;line-height:1.5;font-weight:400}
.cform__consent a{color:var(--text);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(138,92,255,.6)}

/* ══ REVEAL ══ */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.12s}
.reveal[data-delay="2"]{transition-delay:.24s}

/* ══ KEYFRAMES ══ */
@keyframes wordUp{to{opacity:1;transform:none}}
@keyframes shimmer{to{background-position:200% center}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes orbFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-26px) rotate(4deg)}}
@keyframes auraFloat{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-46%) scale(1.08)}}
@keyframes pulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes morph{0%,100%{border-radius:50% 50% 50% 50%}33%{border-radius:60% 40% 55% 45%}66%{border-radius:45% 55% 40% 60%}}
@keyframes brandFluid{
  0%,100%{border-radius:52% 48% 55% 45% / 50% 55% 45% 50%;transform:rotate(-4deg) scale(1)}
  50%{border-radius:45% 55% 45% 55% / 55% 45% 55% 45%;transform:rotate(6deg) scale(1.05)}
}
@keyframes scrollDown{0%{transform:translateY(-100%)}100%{transform:translateY(250%)}}

/* ══ RESPONSIVE ══ */
@media (max-width:1040px){
  .services__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  /* menu vetro stile Apple anche su mobile: pannello frosted che scende dall'hamburger */
  .nav{
    position:fixed;top:72px;right:var(--pad);
    /* la larghezza segue le voci, che sono corte: niente pannello sproporzionato */
    width:max-content;min-width:164px;max-width:min(280px,76vw);
    flex-direction:column;align-items:stretch;gap:3px;padding:10px;
    background:rgba(13,13,19,.96);backdrop-filter:blur(28px) saturate(1.7);
    -webkit-backdrop-filter:blur(28px) saturate(1.7);
    border:1px solid rgba(255,255,255,.16);border-radius:18px;
    box-shadow:0 22px 55px -22px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08);
    transform:translateY(-12px) scale(.96);transform-origin:top right;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
    z-index:850;
  }
  .nav.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .nav a{font-family:var(--display);font-size:1.02rem;color:var(--text);padding:11px 14px;border-radius:11px}
  .nav a:hover,.nav a:active{background:rgba(255,255,255,.08)}
  .nav__cta{margin-top:4px;text-align:center;color:#0a0a10;background:var(--grad)}
  .nav__cta:hover{color:#0a0a10}
  .burger{display:flex}
  .studio__grid,.vision__grid,.studio__mv,.shop__grid{grid-template-columns:1fr}
  .approach__steps{grid-template-columns:1fr}
  .hero__orb{opacity:.5;right:-18%}
  .hero__content{max-width:100%}
  /* (le regole della lista servizi sono nel blocco condiviso mobile+tablet più sotto) */
  /* conductor: ancore ridimensionate per mobile */
  .oa--flow{aspect-ratio:auto;height:30vh}
  .hero .oa{right:-20vw;top:58%;width:56vmin;height:56vmin}
  .manifesto .oa,.approach .oa,.vision .oa,.contact .oa{right:-6vw;width:36vmin;height:36vmin}
  .shop .oa{width:54vmin;height:54vmin}
  .services .oa{right:-6vw;width:30vmin;height:30vmin}
}
@media (max-width:620px){
  .services__grid{grid-template-columns:1fr}
  .cform__row{grid-template-columns:1fr}
  .cform__verify{flex-direction:column;align-items:stretch}
  .cform__submit{width:100%}
}
@media (max-width:560px){
  .brand__wordmark{height:20px}
  .hero__orb{opacity:.35}
  .footer__row{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ══ REDUCED MOTION ══ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .hero__title .word,.hero__title .grad{opacity:1;transform:none}
  .cursor{display:none}
}


/* ── Descrizioni sempre in peso regular ── */
.hero__lead,.section__sub,.studio__body p,.approach__step p,.svc-slide p,
.vision__block p,.shop-card p,.contact__inner>p{font-weight:400}

/* ── Sottomenu Shop (vetro, stile Apple) ── */
.nav__group{position:relative;display:flex}
.nav__grouplabel{font-family:var(--font);font-size:.95rem;font-weight:500;color:#cfcfda;padding:9px 15px;
  border-radius:12px;display:flex;align-items:center;gap:6px;
  transition:color .3s var(--ease), background .3s var(--ease), font-weight .15s}
.nav__grouplabel .caret{font-style:normal;font-size:.68rem;opacity:.7;transition:transform .3s var(--ease)}
/* niente cambio di font-weight in hover: cambierebbe la larghezza del label e
   farebbe slittare il sottomenu centrato. Solo colore + sfondo. */
.nav__group:hover .nav__grouplabel,.nav__group:focus-within .nav__grouplabel{color:var(--text);background:rgba(255,255,255,.07)}
.nav__group:hover .caret{transform:rotate(180deg)}
.nav__sub{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-8px);
  min-width:230px;padding:8px;display:flex;flex-direction:column;gap:2px;
  background:rgba(20,20,28,.6);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.12);border-radius:16px;
  box-shadow:0 22px 55px -22px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s}
.nav__sub::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.nav__group:hover .nav__sub,.nav__group:focus-within .nav__sub{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%)}
.nav__sub a{padding:10px 14px;border-radius:11px;white-space:nowrap}

/* ancora della bolla nella sezione portfolio */
.portfolio .oa{left:auto;right:6vw;top:44%;transform:none;width:28vmin;height:28vmin}

/* ── Galleria anteprime portfolio (sfalsata, editoriale) ── */
.pf-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,48px);
  margin-top:clamp(52px,6vw,96px);padding-bottom:clamp(60px,8vw,120px);
  position:relative;z-index:2;align-items:start;
}
/* sfalsatura verticale delle card */
.pf-card:nth-child(1){margin-top:clamp(28px,5vw,72px)}
.pf-card:nth-child(2){margin-top:0}
.pf-card:nth-child(3){margin-top:clamp(56px,9vw,140px)}
.pf-card{
  position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line);
  background:#0a0913;cursor:pointer;
  transition:transform .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease);
}
.pf-card:hover{
  transform:translateY(-12px);border-color:rgba(255,255,255,.32);
  box-shadow:0 44px 90px -34px rgba(138,92,255,.6);
}
.pf-card__media{position:relative;aspect-ratio:4/5;overflow:hidden}
.pf-card__media svg{width:100%;height:100%;display:block;transition:transform 1.2s var(--ease)}
.pf-card:hover .pf-card__media svg{transform:scale(1.09)}
.pf-card__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,4,10,.94) 6%,rgba(5,4,10,.3) 46%,transparent 72%);
  pointer-events:none;
}
/* indice grande, effetto editoriale */
.pf-card__num{
  position:absolute;top:14px;left:20px;z-index:3;
  font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.4rem);
  line-height:1;color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.5);
  letter-spacing:.02em;opacity:.85;
}
.pf-card__meta{position:absolute;left:0;right:0;bottom:0;padding:clamp(22px,2.4vw,30px);z-index:2}
.pf-card__tag{
  font-family:var(--display);font-size:.76rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text;
}
.pf-card__title{
  font-family:var(--display);font-weight:600;color:var(--text);
  font-size:clamp(1.35rem,1.9vw,1.75rem);line-height:1.12;margin-top:10px;
}
.pf-card::before{
  content:"↗";position:absolute;top:16px;right:18px;z-index:3;
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:1.15rem;
  opacity:0;transform:translateY(-6px) scale(.85);transition:opacity .4s,transform .4s;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.pf-card:hover::before{opacity:1;transform:translateY(0) scale(1)}
.pf-cta{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  position:relative;z-index:2;text-align:center;
}
.pf-note{
  margin:0;text-align:center;
  color:var(--muted);font-size:.92rem;opacity:.8;
}
@media (max-width:900px){
  .pf-grid{grid-template-columns:1fr;gap:26px;max-width:460px;margin-left:auto;margin-right:auto;padding-bottom:40px}
  .pf-card:nth-child(1),.pf-card:nth-child(2),.pf-card:nth-child(3){margin-top:0}
  .pf-card__media{aspect-ratio:4/3}
}

@media (max-width:900px){
  .nav__group{flex-direction:column;width:100%}
  .nav__grouplabel{font-family:var(--display);font-size:1.02rem;color:var(--text);padding:11px 14px;width:100%}
  .nav__grouplabel .caret{display:none}
  .nav__sub{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    background:transparent;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:0 0 0 16px;min-width:0}
  .nav__sub::before{display:none}
  .nav__sub a{color:rgba(255,255,255,.82);font-size:.98rem}
  .nav__sub a:hover,.nav__sub a:active{color:#fff}
  .portfolio .oa{right:-6vw;width:34vmin;height:34vmin}
}


/* ── Indicatore "scorri" del viaggio servizi ── */
.svc-progress{position:absolute;right:clamp(4px,1.5vw,18px);top:50%;transform:translateY(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}
.svc-progress__count{font-family:var(--display);font-size:.82rem;letter-spacing:.08em;color:var(--muted-2)}
.svc-progress__count b{color:var(--text);font-weight:700}
.svc-progress__count i{font-style:normal}
.svc-progress__track{width:2px;height:130px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.svc-progress__track i{display:block;width:100%;height:16%;background:var(--grad);border-radius:2px;
  transition:height .5s var(--ease)}
.svc-progress__label{font-family:var(--display);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-2);writing-mode:vertical-rl}
.svc-progress__chev{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;animation:chevDown 1.6s ease-in-out infinite}
@keyframes chevDown{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}
@media (max-width:900px){
  .svc-progress{right:2px;gap:9px}
  .svc-progress__track{height:90px}
  .svc-progress__label{display:none}
}

.shop-card__logo{width:min(292px,84%);height:auto;display:block;margin:0 auto 24px;
  filter:drop-shadow(0 0 18px rgba(49,233,129,.35))}
.shop-card__logo--img{width:min(380px,94%);filter:drop-shadow(0 0 14px rgba(49,233,129,.22))}
/* Loghi degli shop — i due file sono usati tali e quali, senza alcun ritocco.
   Entrambi hanno un ampio margine trasparente attorno al disegno: invece di
   ritagliarli, la cornice in eccesso viene esclusa dall'inquadratura via CSS
   (aspect-ratio + object-fit), così i due marchi risultano otticamente
   equilibrati nelle rispettive schede. */
.shop-card__logo--btu{width:min(480px,96%);aspect-ratio:667/190;
  object-fit:cover;object-position:center 49.8%;margin-bottom:26px;
  filter:drop-shadow(0 0 22px rgba(49,233,129,.26))}
.shop-card__logo--unesimo{width:min(450px,92%);aspect-ratio:667/170;
  object-fit:cover;object-position:center 50%;margin-bottom:26px;
  filter:drop-shadow(0 0 22px rgba(217,106,39,.24))}

/* testo riservato ai lettori di schermo (il nome resta leggibile da Google
   e dagli screen reader anche quando a video c'è solo il logo) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── Ambiti / settori di applicazione ── */
.sectors__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px;
  max-width:var(--maxw);margin-top:clamp(30px,4vw,52px);position:relative;z-index:2}
/* nessun hover: sono schede informative, non pulsanti */
.sector-card{padding:22px 22px 24px;border:1px solid var(--line);border-radius:16px;background:var(--bg-2)}
.sector-card__ic{font-size:1.7rem;line-height:1;display:block;margin-bottom:12px}
.sector-card h3{font-family:var(--display);font-weight:600;font-size:1.1rem;margin-bottom:7px;letter-spacing:-.01em}
.sector-card p{color:var(--muted);font-size:.9rem;line-height:1.45;font-weight:400}

/* ── Servizi come lista/griglia su TUTTI i dispositivi touch (telefono + tablet) ──
   Niente pin né scroll-jacking: 1 colonna su telefono, 2 su tablet.
   Il criterio (pointer:coarse) copre gli iPad anche in landscape (>900px). */
@media (max-width:900px), (pointer:coarse){
  .svc-journey{height:auto}
  .svc-pin{position:static;display:block;height:auto;overflow:visible;padding:8px 0 0}
  .svc-aura,.svc-progress{display:none}
  .svc-gfx-stack{position:static;width:auto;height:auto} /* svuotato: le grafiche vanno nelle slide */
  .svc-slides{position:static;height:auto;min-height:0;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
    gap:clamp(32px,5vw,58px) clamp(28px,4vw,48px)}
  .svc-slide{position:static;opacity:1;transform:none;pointer-events:auto;
    display:block;text-align:left;padding:0;transition:none}
  .svc-slide.is-on{transition:none}
  .svc-slide h3{font-size:clamp(1.55rem,3.6vw,2.05rem)}
  .svc-slide p{font-size:clamp(1.1rem,1.8vw,1.24rem)}
  .svc-slide .svc-gfx{position:static;inset:auto;place-items:center;
    width:min(230px,58vw);height:min(230px,58vw);margin:0 0 18px;
    opacity:0;transform:translateY(22px) scale(.96);
    transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .svc-slide .svc-gfx.is-on{opacity:1;transform:none}
}
/* su telefono stretto: una sola colonna piena */
@media (max-width:560px){
  .svc-slides{grid-template-columns:1fr}
  .svc-slide h3{font-size:clamp(1.6rem,6.2vw,2.1rem)}
  .svc-slide p{font-size:clamp(1.08rem,3.5vw,1.2rem)}
  .svc-slide .svc-gfx{width:min(240px,64vw);height:min(240px,64vw)}
}

/* ══════════════════════════════════════════════════════════════════
   BARRA DI NAVIGAZIONE — telefono e tablet
   Sostituisce il menu a tendina. Le voci stanno nella zona del pollice
   e restano sempre visibili; in testata rimangono solo marchio e lingua.
   Misure riferite a uno schermo da 390 px:
   pillola 68 px di altezza, voce 68 × 56 px, icona 26 px,
   etichetta 11,9 px, 21 px di stacco dal bordo inferiore.
   ══════════════════════════════════════════════════════════════════ */
.tabbar{display:none}

/* l'icona di Contatti scorre lentamente fra le tinte del marchio:
   si nota senza riquadri, senza colore pieno e senza cambiare ingombro */
@keyframes scorriTinte{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}

@media (max-width:900px), (pointer:coarse){
  /* la navigazione è in basso: in alto niente più hamburger né pannello */
  .burger{display:none}
  .nav{display:none}

  /* il marchio raddoppia e ha la riga tutta per sé, con la lingua all'altro capo */
  .header{padding:19px var(--pad)}
  .header.is-scrolled{padding-block:12px}
  .brand{gap:12px}
  .brand__symbol{width:57px;height:57px}
  .brand__wordmark{height:39px}

  /* Lo spazio che serve alla barra sta DENTRO il piede pagina, non dopo:
     così il documento finisce esattamente dove finisce il footer e non
     resta nulla da scorrere oltre. 21 px di stacco + 68 px di pillola
     + 10 px di respiro. */
  .footer{padding-bottom:99px}
  /* le due pagine legali non hanno la barra: lì lo spazio non serve */
  body:not(:has(.tabbar)) .footer{padding-bottom:24px}

  .tabbar{
    display:flex;align-items:stretch;
    position:fixed;bottom:21px;z-index:1500;
    /* sul telefono occupa la riga; sul tablet non si allarga oltre misura */
    left:50%;transform:translateX(-50%);width:min(100% - 30px,430px);
    padding:5px 7px;border-radius:28px;
    background:rgba(13,13,20,.88);
    backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
    border:1px solid rgba(255,255,255,.13);
    box-shadow:0 18px 40px -18px rgba(0,0,0,.9);
    font-family:var(--display);
  }
  .tabbar__voce{
    flex:1;min-width:0;height:56px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    padding:2px 1px;border-radius:18px;
    color:var(--muted-2);font-size:11.9px;line-height:1;letter-spacing:.03em;
    white-space:nowrap;transition:color .25s var(--ease)
  }
  .tabbar__voce svg{width:26px;height:26px;flex:none;
    fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  /* unica differenza fra le voci: dove ti trovi adesso */
  .tabbar__voce.is-corrente{color:var(--text);font-weight:700}
  .tabbar__voce.is-corrente svg{stroke:url(#tintaMarchio)}
  .tabbar__voce--iride svg{stroke:url(#tintaMarchio);animation:scorriTinte 8s linear infinite}
  .tabbar__voce:focus-visible{outline:2px solid var(--iris-2);outline-offset:-3px}

  /* indicatore "scorri" e banner cookie salgono sopra la barra */
  .hero__scroll{bottom:112px}
  .cookiebar{bottom:104px}
}
@media (max-width:640px){
  .cookiebar{bottom:104px}
}
/* telefoni molto stretti: le etichette rimpiccioliscono quel tanto che basta
   perché "Portfolio" e "Contatti" non si tocchino */
@media (max-width:360px){
  .tabbar__voce{font-size:10.6px;letter-spacing:0;gap:5px}
  .tabbar__voce svg{width:24px;height:24px}
}
@media (prefers-reduced-motion:reduce){
  .tabbar__voce--iride svg{animation:none}
}