/* ==========================================================================
   AXIONIV — Design tokens
   ========================================================================== */
:root{
  --ink:#0A0E1A; --ink900:#070A12; --ink800:#0A0E1A; --ink700:#0F1526; --ink600:#161E33; --ink500:#1F2942;
  --gold:#C9A24B; --gold-light:#E7CC85; --gold-dark:#A17E30;
  --cream:#F4F1EA; --mist:#B8BFCC; --mist-dim:#7A8296;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"Jost",system-ui,sans-serif;
  --gold-sheen:linear-gradient(135deg,#A17E30 0%,#E7CC85 45%,#C9A24B 55%,#A17E30 100%);

  /* Curve di movimento — response bassa = interfaccia che risponde subito.
     --ease   smorzamento critico, nessun rimbalzo: default per tutto.
     --spring leggero overshoot: solo dove il gesto ha portato slancio. */
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.28,.64,1);
  --r-press:.12s;   /* feedback alla pressione: immediato */
  --r-fast:.2s;
  --r-base:.3s;
  --r-slow:.42s;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--cream);line-height:1.55;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background:radial-gradient(120% 90% at 50% -10%,#131b30 0%,#0a0e1a 55%,#070a12 100%);background-attachment:fixed}

/* Tipografia: la crenatura è specifica per corpo, non un valore unico.
   Il display stringe man mano che cresce, il testo piccolo resta neutro. */
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;font-optical-sizing:auto}
h1{line-height:1.04;letter-spacing:-.024em;text-wrap:balance}
h2{line-height:1.1;letter-spacing:-.018em;text-wrap:balance}
h3{line-height:1.15;letter-spacing:-.012em}
h4{line-height:1.2;letter-spacing:-.008em}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Nessun ritardo di 300 ms sul tap, nessun lampo grigio alla pressione. */
a,button,summary,[role=button],input,select,textarea{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* Anello di focus visibile solo da tastiera, coerente su tutti i controlli. */
:focus{outline:none}
:focus-visible{outline:2px solid rgba(201,162,75,.9);outline-offset:3px;border-radius:6px}
.btn-primary:focus-visible,.btn-secondary:focus-visible,.chip:focus-visible,.navlinks a:focus-visible{outline-offset:4px}
::selection{background:rgba(201,162,75,.28);color:var(--cream)}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#070a12}
::-webkit-scrollbar-thumb{background:#1f2942;border-radius:999px}::-webkit-scrollbar-thumb:hover{background:#2c3860}

/* Layout */
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
@media(max-width:640px){.wrap{padding:0 24px}}
.sec{padding:112px 0}
@media(max-width:768px){.sec{padding:80px 0}}

/* Atoms */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;text-transform:uppercase;letter-spacing:.28em;color:rgba(201,162,75,.8)}
.eyebrow::before{content:"";height:1px;width:32px;background:rgba(201,162,75,.5)}
.eyebrow.c{justify-content:center}.eyebrow.c::before{display:none}
.gold-grad{background:var(--gold-sheen);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.hairline{height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,75,.4),transparent)}

/* Bottoni — il riscontro vive sulla pressione, non sul rilascio.
   :active è più rapido di :hover perché la mano è già in movimento. */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;background:var(--gold-sheen);
  padding:16px 32px;font:inherit;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--ink900);
  border:0;cursor:pointer;transition:transform var(--r-base) var(--ease),box-shadow var(--r-base) var(--ease)}
.btn-primary:hover{transform:scale(1.03);box-shadow:0 14px 34px -18px rgba(201,162,75,.55)}
.btn-primary:active{transform:scale(.975);box-shadow:none;transition-duration:var(--r-press)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;border:1px solid rgba(201,162,75,.4);
  padding:16px 32px;font:inherit;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--cream);
  background:transparent;cursor:pointer;
  transition:transform var(--r-base) var(--ease),border-color var(--r-base) var(--ease),background-color var(--r-base) var(--ease)}
.btn-secondary:hover{border-color:var(--gold);background:rgba(201,162,75,.05)}
.btn-secondary:active{transform:scale(.975);background:rgba(201,162,75,.1);transition-duration:var(--r-press)}
.btn-full{width:100%}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ==========================================================================
   Veli luminosi condivisi — usati dall'hero fotografico della home
   e dall'header delle pagine interne.
   (I "nastri" oro sfocati sono stati rimossi: erano un pattern decorativo
    che non raccontava nulla del prodotto.)
   ========================================================================== */
.lg-sheen{position:absolute;top:50%;left:50%;width:170vmax;height:170vmax;transform:translate(-50%,-50%);opacity:.7;mix-blend-mode:screen;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(231,204,133,.10) 55deg,transparent 130deg,transparent 230deg,rgba(201,162,75,.08) 300deg,transparent 360deg);
  animation:lgrot 52s linear infinite}
.lg-streak{position:absolute;top:-50%;left:-30%;width:38%;height:200%;transform:rotate(18deg);filter:blur(26px);
  background:linear-gradient(90deg,transparent,rgba(243,226,174,.14),transparent);animation:lgstreak 12s ease-in-out infinite}
.lg-grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.lg-fade{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(to bottom,transparent,#070a12)}
@keyframes lgrot{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes lgstreak{0%{transform:translate(-40%,0) rotate(18deg);opacity:0}50%{opacity:1}100%{transform:translate(280%,0) rotate(18deg);opacity:0}}

/* Ambient orbs */
.ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(150px);mix-blend-mode:screen;will-change:transform}
.orb1{top:-8%;left:-8%;width:46vw;height:46vw;background:radial-gradient(circle,rgba(201,162,75,.16),transparent 70%);animation:ag1 30s ease-in-out infinite}
.orb2{top:32%;right:-12%;width:42vw;height:42vw;background:radial-gradient(circle,rgba(28,47,82,.5),transparent 70%);animation:ag2 36s ease-in-out infinite}
.orb3{bottom:-10%;left:34%;width:40vw;height:40vw;background:radial-gradient(circle,rgba(231,204,133,.12),transparent 70%);animation:ag3 26s ease-in-out infinite}
@keyframes ag1{0%,100%{transform:translate(0,0)}50%{transform:translate(8%,10%)}}
@keyframes ag2{0%,100%{transform:translate(0,0)}50%{transform:translate(-10%,6%)}}
@keyframes ag3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,-8%) scale(1.1)}}
.slow-float{animation:float 8s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ==========================================================================
   Navbar
   ========================================================================== */
header.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:all .5s var(--ease)}
header.nav.scrolled{background:rgba(7,10,18,.8);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.05)}
nav.bar{height:80px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:36px;width:36px;border-radius:6px;object-fit:cover}
.brand .bt{font-family:var(--serif);font-size:20px;letter-spacing:.35em;transition:color .3s}
.brand:hover .bt{color:var(--gold)}
.navlinks{display:flex;gap:36px}
.navlinks a{position:relative;font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--mist);transition:color .3s}
.navlinks a:hover{color:var(--cream)}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--gold);transition:width .3s}
.navlinks a:hover::after{width:100%}
.nav-cta{padding:12px 24px!important}
.navright{display:flex;align-items:center;gap:20px}
.langsw{display:flex;align-items:center;gap:6px;padding:4px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(7,10,18,.4)}
.flag{display:flex;align-items:center;justify-content:center;padding:5px 7px;border:0;background:transparent;border-radius:999px;cursor:pointer;
  opacity:.45;transition:opacity .3s,background .3s;line-height:0}
.flag:hover{opacity:.85}
.flag.on{opacity:1;background:rgba(201,162,75,.16)}
.flag svg{border-radius:2px;display:block}
.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;background:transparent;border:0;cursor:pointer}
.burger span{position:absolute;left:0;height:1px;width:24px;background:var(--cream);transition:all .3s}
.bwrap{position:relative;height:16px;width:24px}
.burger.on .b1{top:8px;transform:rotate(45deg)}.burger.on .b2{opacity:0}.burger.on .b3{top:8px;transform:rotate(-45deg)}
.b1{top:0}.b2{top:8px}.b3{top:16px}
.mobile{display:none;overflow:hidden;border-top:1px solid rgba(255,255,255,.05);background:rgba(7,10,18,.97);backdrop-filter:blur(12px)}
.mobile.on{display:block;animation:slide .4s var(--ease)}
@keyframes slide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mobile .in{display:flex;flex-direction:column;gap:4px;padding:24px 0}
.mobile a{font-family:var(--serif);font-size:26px;padding:10px 0;transition:color .3s}
.mobile a:hover{color:var(--gold)}
@media(max-width:1024px){.navlinks,.nav-cta{display:none}.burger{display:flex}}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.hero .in{position:relative;z-index:10;padding:140px 0}
.hero h1{font-size:clamp(42px,7vw,80px);max-width:900px}
.hero h1 span.line{display:block}
.shimmer{background:linear-gradient(105deg,#8A6A24 0%,#C9A24B 30%,#F3E2AE 50%,#C9A24B 70%,#8A6A24 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  font-style:italic;animation:shimmer 3.4s ease-in-out infinite}
@keyframes shimmer{0%{background-position:180% 0}100%{background-position:-80% 0}}
.hero .sub{margin-top:32px;max-width:640px;font-size:clamp(17px,2vw,21px);color:var(--mist);line-height:1.6}
.hero .cta{margin-top:48px;display:flex;gap:16px;flex-wrap:wrap}
.scrollcue{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:10}
.scrollcue span{font-size:10px;text-transform:uppercase;letter-spacing:.28em;color:var(--mist-dim)}
.scrollcue .ln{height:40px;width:1px;background:linear-gradient(to bottom,rgba(201,162,75,.6),transparent);animation:float 8s ease-in-out infinite}
@media(max-width:768px){.scrollcue{display:none}}

/* Sezioni generiche */
.sechead{max-width:640px}
.sechead h2{font-size:clamp(32px,4vw,48px);margin-top:24px;line-height:1.15}
.sechead.c{margin:0 auto;text-align:center}
.lead{margin-top:24px;font-size:18px;color:var(--mist);line-height:1.6;max-width:560px}
.grid-cards{display:grid;gap:20px}
@media(min-width:768px){.grid-cards.two{grid-template-columns:1fr 1fr}}
@media(min-width:768px){.grid-cards.three{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;display:flex;flex-direction:column;border-radius:16px;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.02);padding:40px;
  transition:transform var(--r-slow) var(--ease),border-color var(--r-slow) var(--ease),
             background-color var(--r-slow) var(--ease),box-shadow var(--r-slow) var(--ease)}
.card:hover{transform:translateY(-6px);border-color:rgba(201,162,75,.25);background:rgba(255,255,255,.04);box-shadow:0 24px 60px -30px rgba(201,162,75,.35)}
.card .num{font-family:var(--serif);font-size:30px;color:rgba(201,162,75,.4)}
.card h3{font-size:26px}
.card p{font-size:15px;color:var(--mist);line-height:1.6}
.tiles{display:grid;gap:1px;border:1px solid rgba(255,255,255,.05);border-radius:16px;overflow:hidden}
@media(min-width:768px){.tiles.four{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.tiles.four{grid-template-columns:repeat(4,1fr)}}
@media(min-width:768px){.tiles.three{grid-template-columns:repeat(3,1fr)}}
.tile{background:rgba(255,255,255,.015);padding:32px;transition:background .5s}
.tile:hover{background:rgba(255,255,255,.04)}
.tile .n{font-family:var(--serif);font-size:48px;color:rgba(201,162,75,.3);transition:color .5s}
.tile:hover .n{color:rgba(201,162,75,.6)}
.tile h3{margin-top:24px;font-size:20px}
.tile p{margin-top:12px;font-size:14px;color:var(--mist);line-height:1.6}
.split{display:grid;gap:56px}
@media(min-width:1024px){.split{grid-template-columns:.9fr 1.1fr;gap:80px}}
.split.rev>*:first-child{order:2}
.stack{display:flex;flex-direction:column;gap:16px}
.band{border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);background:rgba(7,10,18,.4);padding:80px 0}
.band .bigtext{max-width:820px;font-family:var(--serif);font-size:clamp(24px,3vw,32px);line-height:1.3}

/* Before/After */
.ba{position:relative;aspect-ratio:4/3;width:100%;overflow:hidden;border-radius:16px;border:1px solid rgba(255,255,255,.1);user-select:none;touch-action:none}
.ba .layer{position:absolute;inset:0}
.ba .after{background:linear-gradient(135deg,#1a2a4a,#14203a 50%,#0b1120)}
.ba .after::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 70% 20%,rgba(201,162,75,.28),transparent 60%)}
.ba .before{background:linear-gradient(135deg,#20242c,#171a20 50%,#0e1016);clip-path:inset(0 50% 0 0)}
.ba .cells{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ba .g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ba .g i{width:56px;height:40px;border-radius:4px;display:block}
.ba .before .g i{background:rgba(122,130,150,.35)}
.ba .after .g i{background:linear-gradient(135deg,rgba(231,204,133,.7),rgba(201,162,75,.3))}
.ba .lbl{position:absolute;top:16px;font-size:11px;text-transform:uppercase;letter-spacing:.16em;padding:5px 12px;border-radius:999px;background:rgba(7,10,18,.7);backdrop-filter:blur(4px);z-index:3}
.ba .lbl.b{left:16px;color:var(--mist);border:1px solid rgba(255,255,255,.2)}
.ba .lbl.a{right:16px;color:var(--gold);border:1px solid rgba(201,162,75,.4)}
.ba .handle{position:absolute;inset-block:0;width:40px;margin-left:-20px;left:50%;display:flex;align-items:center;justify-content:center;cursor:ew-resize;z-index:10}
.ba .handle .bar{position:absolute;inset-block:0;left:50%;width:1px;transform:translateX(-50%);background:rgba(201,162,75,.7)}
.ba .knob{width:44px;height:44px;border-radius:50%;border:1px solid rgba(201,162,75,.6);background:rgba(7,10,18,.8);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;color:var(--gold);transition:transform .2s}
.ba .handle:hover .knob{transform:scale(1.05)}
.cap{margin-top:12px;text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--mist-dim)}
.videoslot{position:relative;aspect-ratio:4/3;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,#14203a,#0e1730 50%,#0b1120);overflow:hidden}
.videoslot::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 30%,rgba(201,162,75,.18),transparent 60%)}
.videoslot .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.videoslot .play i{width:80px;height:80px;border-radius:50%;border:1px solid rgba(201,162,75,.5);background:rgba(7,10,18,.6);display:flex;align-items:center;justify-content:center;color:var(--gold);transition:transform .3s}
.videoslot:hover .play i{transform:scale(1.05)}
.videoslot .tag{position:absolute;bottom:16px;left:16px;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--mist);padding:5px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(7,10,18,.6);z-index:2}
.reels{display:flex;justify-content:center;gap:16px}
.reel{position:relative;aspect-ratio:9/16;width:33%;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(to bottom,#182742,#0b1120);overflow:hidden}
.reel::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 20%,rgba(201,162,75,.16),transparent 60%)}
.reel.side{transform:translateY(24px);opacity:.8}
.reel .lines{position:absolute;bottom:12px;left:12px;right:12px;display:flex;flex-direction:column;gap:6px;z-index:2}
.reel .lines i{height:6px;border-radius:999px;display:block}
.reel .lines i:first-child{width:66%;background:rgba(201,162,75,.4)}
.reel .lines i:last-child{width:50%;background:rgba(122,130,150,.4)}

/* Video reali dentro gli slot: il video riempie il box, il velo oro resta sopra
   finche non parte, poi sfuma per non sporcare l'immagine. */
.videoslot video,.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.videoslot::after,.reel::after{z-index:1;transition:opacity .45s ease}
.videoslot .play{background:none;border:0;padding:0;cursor:pointer;transition:opacity .35s ease}
.videoslot .play:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.videoslot .tag{transition:opacity .35s ease}
.videoslot.playing::after,.videoslot.playing .play,.videoslot.playing .tag{opacity:0;pointer-events:none}
.reel.live::after{opacity:.45}
.reel.live .lines{display:none}
/* Reel singolo: senza i due laterali decorativi serve piu' larghezza */
.reels.single .reel{width:min(64%,280px)}

/* Servizi */
.svc{border-top:1px solid rgba(255,255,255,.05);padding:96px 0;scroll-margin-top:88px}
.tagrow{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.tagrow .num{font-family:var(--serif);font-size:30px;color:rgba(201,162,75,.4)}
.tagrow .ln{height:1px;width:64px;background:linear-gradient(90deg,transparent,rgba(201,162,75,.4),transparent)}
.tagrow .tag{font-size:12px;text-transform:uppercase;letter-spacing:.28em;color:rgba(201,162,75,.7)}
.svc h2{font-size:clamp(32px,4vw,48px)}
.cols{margin-top:32px;display:grid;gap:32px}
@media(min-width:560px){.cols{grid-template-columns:1fr 1fr}}
.cols h4{font-size:12px;text-transform:uppercase;letter-spacing:.28em;color:rgba(201,162,75,.6);margin-bottom:16px;font-family:var(--sans);font-weight:400}
.cols ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.cols li{display:flex;gap:12px;font-size:15px;line-height:1.45}
.cols li::before{content:"";margin-top:8px;width:4px;height:4px;border-radius:50%;flex:0 0 auto;background:var(--gold)}
.cols .uc li{color:var(--mist)}.cols .uc li::before{background:var(--mist-dim)}
.outcome{margin-top:32px;border-left:2px solid rgba(201,162,75,.4);padding-left:20px;font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.35}

/* Pacchetti */
.pkg-badge{position:absolute;top:-13px;left:32px;background:var(--gold-sheen);color:var(--ink900);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;padding:5px 16px;border-radius:999px}
.card.feat{border:1px solid rgba(201,162,75,.4);background:rgba(15,21,38,.5)}
@property --pkgang{syntax:'<angle>';initial-value:0deg;inherits:false}
.card.feat::before{content:"";position:absolute;inset:-1.5px;border-radius:18px;padding:1.5px;
  background:conic-gradient(from var(--pkgang),transparent 0deg,rgba(201,162,75,.65) 55deg,rgba(231,204,133,.95) 92deg,transparent 165deg,transparent 220deg,rgba(201,162,75,.5) 305deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:pkgspin 8s linear infinite;pointer-events:none}
@keyframes pkgspin{to{--pkgang:360deg}}
.pkg-list{list-style:none;margin:28px 0;display:flex;flex-direction:column;gap:12px;flex:1}
.pkg-list li{display:flex;gap:12px;font-size:15px;line-height:1.45}
.pkg-list svg{flex:0 0 auto;margin-top:3px;color:var(--gold)}
.ideal{font-size:14px;color:var(--mist-dim);line-height:1.5;margin-bottom:28px}
.ideal b{color:rgba(201,162,75,.7);font-weight:400}
.feat-wrap{max-width:640px;margin:0 auto}
.bbox{position:relative;overflow:hidden;border-radius:24px;border:1px solid rgba(201,162,75,.2);background:rgba(7,10,18,.5);padding:56px 40px}
@media(max-width:640px){.bbox{padding:40px 24px}}
.bgrid{position:relative;display:grid;gap:48px;z-index:2}
@media(min-width:1024px){.bgrid{grid-template-columns:1fr 1fr;gap:80px}}
.tiers{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px}
.tier{border:1px solid rgba(201,162,75,.25);background:rgba(255,255,255,.02);border-radius:12px;padding:16px 20px}
.tier .l{font-family:var(--serif);font-size:22px;color:var(--gold)}
.tier .n{margin-top:4px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--mist-dim)}
.bcol{display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.bcol ul{list-style:none;display:flex;flex-direction:column;gap:16px}
.bcol li{display:flex;gap:12px;font-size:15px}
.bcol li svg{flex:0 0 auto;margin-top:3px;color:var(--gold)}
.egrid{margin-top:48px;display:grid;gap:24px}
@media(min-width:1024px){.egrid{grid-template-columns:1.1fr .9fr}}
.efeat{display:flex;flex-direction:column;justify-content:space-between;border-radius:16px;border:1px solid rgba(201,162,75,.2);background:rgba(15,21,38,.4);padding:40px}
.efeat h3{font-size:26px}.efeat p{margin-top:16px;font-size:15px;color:var(--mist);line-height:1.6}
.elist{border-radius:16px;border:1px solid rgba(255,255,255,.05);overflow:hidden;list-style:none}
.elist li{padding:24px;background:rgba(255,255,255,.015);border-top:1px solid rgba(255,255,255,.05)}
.elist li:first-child{border-top:0}
.elist h4{font-size:19px}.elist p{margin-top:4px;font-size:14px;color:var(--mist);line-height:1.5}
.fineprint{margin-top:32px;font-size:14px;color:var(--mist-dim)}.fineprint a{color:var(--gold)}

/* Processo */
.timeline{position:relative;list-style:none}
.timeline::before{content:"";position:absolute;left:26px;top:8px;height:calc(100% - 2rem);width:1px;
  background:linear-gradient(to bottom,rgba(201,162,75,.4),rgba(255,255,255,.1),transparent)}
@media(max-width:768px){.timeline::before{display:none}}
.titem{position:relative;padding-bottom:56px}
.titem:last-child{padding-bottom:0}
@media(min-width:769px){.titem{display:flex;gap:32px}}
.bubble{position:relative;z-index:10;height:54px;width:54px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid rgba(201,162,75,.3);background:var(--ink);font-family:var(--serif);font-size:18px;color:var(--gold);margin-bottom:20px}
@media(min-width:769px){.bubble{margin-bottom:0}}
.tbox{width:100%;border-radius:16px;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.02);padding:36px;
  transition:transform .5s var(--ease),border-color .5s}
.tbox:hover{transform:translateY(-6px);border-color:rgba(201,162,75,.25)}
.tbox h3{font-size:28px}.tbox>p{margin-top:12px;font-size:15px;color:var(--mist);line-height:1.6;max-width:640px}
.tdet{margin-top:24px;display:grid;gap:12px;list-style:none}
@media(min-width:640px){.tdet{grid-template-columns:repeat(3,1fr)}}
.tdet li{display:flex;gap:12px;font-size:14px;line-height:1.5}
.tdet li::before{content:"";margin-top:7px;width:4px;height:4px;border-radius:50%;flex:0 0 auto;background:var(--gold)}

/* Contatti */
.cgrid{display:grid;gap:48px}
@media(min-width:1024px){.cgrid{grid-template-columns:1.35fr .65fr;gap:64px}}
.formbox{border-radius:24px;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.02);padding:40px}
@media(max-width:640px){.formbox{padding:28px 24px}}
.formbox h2{font-size:34px}
.formbox .sub{margin-top:12px;font-size:15px;color:var(--mist)}
fieldset{border:0;margin-top:32px}
legend{font-size:12px;text-transform:uppercase;letter-spacing:.28em;color:rgba(201,162,75,.7);margin-bottom:16px}
.mrow{display:grid;gap:16px}
@media(min-width:560px){.mrow.two{grid-template-columns:1fr 1fr}}
label.f{display:block;margin-bottom:8px;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--mist)}
.i{width:100%;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(7,10,18,.6);padding:12px 16px;font:inherit;font-size:15px;color:var(--cream);outline:none;transition:border-color .3s}
.i::placeholder{color:var(--mist-dim)}
.i:focus{border-color:rgba(201,162,75,.5)}
select.i{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' stroke='%237A8296' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
textarea.i{resize:none}
.req{color:var(--gold)}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:28px;font-size:14px;color:var(--mist)}
.consent input{margin-top:3px;accent-color:var(--gold);width:16px;height:16px;flex:0 0 auto}
.consent a{color:var(--gold)}
.side{display:flex;flex-direction:column;gap:24px}
.sbox{border-radius:16px;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.02);padding:28px}
.sbox.gold{border-color:rgba(201,162,75,.2);background:rgba(15,21,38,.4)}
.sbox h3{font-size:21px}.sbox p{margin-top:12px;font-size:14px;color:var(--mist);line-height:1.6}
.sbox a.mail{margin-top:12px;display:inline-block;color:var(--gold);transition:color .3s}
.sbox a.mail:hover{color:var(--gold-light)}
.sbox h4{font-size:12px;text-transform:uppercase;letter-spacing:.28em;color:rgba(201,162,75,.7);margin-bottom:24px;font-family:var(--sans);font-weight:400}
.steps{list-style:none;display:flex;flex-direction:column;gap:24px}
.steps li{display:flex;gap:16px}
.steps .n{font-family:var(--serif);font-size:21px;color:rgba(201,162,75,.5)}
.steps .t{font-size:15px}.steps .d{margin-top:4px;font-size:14px;color:var(--mist);line-height:1.5}
.msg{margin-top:20px;border-radius:8px;padding:14px 16px;font-size:14px;line-height:1.5}
.msg.err{border:1px solid rgba(239,68,68,.3);background:rgba(239,68,68,.1);color:#fca5a5}
.ok{padding:64px 24px;text-align:center;display:flex;flex-direction:column;align-items:center}
.ok .ring{width:64px;height:64px;border-radius:50%;border:1px solid rgba(201,162,75,.4);background:rgba(201,162,75,.05);color:var(--gold);display:flex;align-items:center;justify-content:center}
.ok h2{margin-top:24px;font-size:30px}.ok p{margin-top:12px;max-width:400px;color:var(--mist)}

/* CTA box */
.ctabox{position:relative;overflow:hidden;border-radius:24px;border:1px solid rgba(201,162,75,.15);background:rgba(15,21,38,.4);padding:80px 40px;text-align:center}
@media(max-width:640px){.ctabox{padding:56px 24px}}
.ctabox .glow{position:absolute;left:50%;top:0;transform:translateX(-50%);width:256px;height:256px;border-radius:50%;background:rgba(201,162,75,.1);filter:blur(120px);pointer-events:none}
.ctabox h2{position:relative;font-size:clamp(30px,4.5vw,56px);max-width:760px;margin:24px auto 0;line-height:1.12}
.ctabox p{position:relative;margin:24px auto 0;max-width:520px;font-size:18px;color:var(--mist)}
.ctabtns{position:relative;margin-top:40px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* Footer */
footer{margin-top:96px;border-top:1px solid rgba(255,255,255,.05);background:rgba(7,10,18,.6)}
.fgrid{display:grid;gap:48px;padding:64px 0}
@media(min-width:768px){.fgrid{grid-template-columns:1.4fr 1fr 1fr}}
footer h4{font-size:12px;text-transform:uppercase;letter-spacing:.28em;color:rgba(201,162,75,.7);margin-bottom:20px;font-family:var(--sans);font-weight:400}
footer ul{list-style:none;display:flex;flex-direction:column;gap:12px}
footer a{color:var(--mist);font-size:14px;transition:color .3s}
footer a:hover{color:var(--cream)}
.fbot{display:flex;justify-content:space-between;gap:16px;padding:24px 0 48px;font-size:12px;color:var(--mist-dim);flex-wrap:wrap}

/* Modale */
.overlay{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px}
.overlay.on{display:flex;animation:fade .25s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.backdrop{position:fixed;inset:0;background:rgba(7,10,18,.85);backdrop-filter:blur(4px)}
.dialog{position:relative;z-index:10;margin:auto;width:100%;max-width:660px;border-radius:24px;border:1px solid rgba(201,162,75,.2);
  background:var(--ink800);box-shadow:0 40px 80px -20px rgba(0,0,0,.7);overflow:hidden;animation:pop .35s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(28px) scale(.98)}to{opacity:1;transform:none}}
.dialog .glow{position:absolute;right:-64px;top:-64px;width:224px;height:224px;border-radius:50%;background:rgba(201,162,75,.1);filter:blur(100px);pointer-events:none}
.mclose{position:absolute;right:20px;top:20px;z-index:20;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.1);
  background:transparent;color:var(--mist);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}
.mclose:hover{border-color:rgba(201,162,75,.4);color:var(--cream)}
.mbody{max-height:88vh;overflow-y:auto;padding:40px}
@media(max-width:640px){.mbody{padding:28px 24px}}
.mbody h2{font-size:32px}


/* Modale legale (Privacy / Cookie) */
.legal{max-height:88vh;overflow-y:auto;padding:40px}
@media(max-width:640px){.legal{padding:28px 24px}}
.legal h2{font-size:32px;margin-bottom:8px}
.legal .upd{font-size:13px;color:var(--mist-dim);margin-bottom:28px}
.legal h3{font-family:var(--sans);font-weight:500;font-size:13px;text-transform:uppercase;letter-spacing:.18em;color:rgba(201,162,75,.8);margin:28px 0 12px}
.legal p,.legal li{font-size:14.5px;line-height:1.65;color:var(--mist)}
.legal p{margin-bottom:12px}
.legal ul{margin:0 0 12px 18px}
.legal li{margin-bottom:6px}
.legal strong{color:var(--cream);font-weight:500}
.legal a{color:var(--gold)}
.legal .note{border:1px solid rgba(201,162,75,.25);background:rgba(201,162,75,.06);border-radius:10px;padding:16px 18px;margin-bottom:24px;font-size:13.5px;color:var(--cream)}
.legal table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:13.5px}
.legal th,.legal td{text-align:left;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.07);color:var(--mist)}
.legal th{color:rgba(201,162,75,.8);font-weight:500;font-family:var(--sans);font-size:12px;text-transform:uppercase;letter-spacing:.1em}

/* Movimento ridotto: non significa "nessun riscontro", ma un riscontro
   che non muove nulla nello spazio. Restano le dissolvenze e i colori,
   spariscono spostamenti, parallasse, scale e cicli infiniti. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.16s!important;transition-timing-function:ease!important}
  *,*::before,*::after{transition-property:opacity,color,background-color,border-color,box-shadow,outline-color!important}
  .reveal{opacity:1;transform:none}
  .card:hover,.tbox:hover,.btn-primary:hover,.btn-secondary:hover,
  .btn-primary:active,.btn-secondary:active,.chip:active{transform:none}
}

/* --- Voce di menu attiva --- */
.navlinks a.active{color:var(--cream)}
.navlinks a.active::after{width:100%}

/* --- Card cliccabili (anteprima servizi in home) --- */
a.card{text-decoration:none}
a.card h3{transition:color .4s}
a.card:hover h3{color:var(--gold-light)}

/* -------------------------------------------------------------------------- */
/*  Sfondo ambientale sobrio — blooms navy, polvere in salita, velo            */
/*  Riscrive gli orb esistenti: nessuna modifica all'HTML/JSX necessaria.      */
/* -------------------------------------------------------------------------- */

.ambient {
  background: linear-gradient(
    180deg,
    rgba(19, 27, 48, 0.5) 0%,
    transparent 30%,
    transparent 70%,
    rgba(7, 10, 18, 0.6) 100%
  );
  animation: ax-veil 40s ease-in-out infinite;
}

/* Polvere luminosa che sale lentamente */
.ambient::before,
.ambient::after {
  content: "";
  position: absolute;
  inset: -800px 0 0;
  pointer-events: none;
}
.ambient::before {
  opacity: 0.07;
  background-image: radial-gradient(rgba(244, 241, 234, 0.9) 0.6px, transparent 0.7px);
  background-size: 120px 120px;
  animation: ax-dust 140s linear infinite;
}
.ambient::after {
  opacity: 0.05;
  background-image: radial-gradient(rgba(201, 162, 75, 0.9) 0.6px, transparent 0.7px);
  background-size: 190px 190px;
  animation: ax-dust 220s linear infinite;
}

/* Blooms: due navy + un oro tenue, deriva molto lenta */
.orb1 {
  width: 46vw; height: 46vw; top: -6%; left: -10%;
  background: radial-gradient(circle, rgba(28, 47, 82, 0.55), transparent 70%);
  animation: ax-bloom-a 44s ease-in-out infinite;
}
.orb2 {
  width: 42vw; height: 42vw; top: 34%; right: -12%;
  background: radial-gradient(circle, rgba(19, 27, 48, 0.75), transparent 70%);
  animation: ax-bloom-b 52s ease-in-out infinite;
}
.orb3 {
  width: 40vw; height: 40vw; bottom: -8%; left: 32%;
  background: radial-gradient(circle, rgba(201, 162, 75, 0.1), transparent 70%);
  animation: ax-bloom-c 60s ease-in-out infinite;
}

@keyframes ax-bloom-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; }
  50%      { transform: translate3d(6%, 4%, 0) scale(1.08); opacity: 0.8; }
}
@keyframes ax-bloom-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.04); opacity: 0.5; }
  50%      { transform: translate3d(-7%, -3%, 0) scale(1); opacity: 0.75; }
}
@keyframes ax-bloom-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.4; }
  50%      { transform: translate3d(3%, -6%, 0) scale(1.1); opacity: 0.65; }
}
@keyframes ax-dust {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -800px, 0); }
}
@keyframes ax-veil {
  0%, 100% { opacity: 0.22; }
  50%      { opacity: 0.42; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient,
  .ambient::before,
  .ambient::after,
  .orb1, .orb2, .orb3 {
    animation: none;
  }
}


/* -------------------------------------------------------------------------- */
/*  HERO HOME — sfondo fotografico cinematico (ken burns + veli + haze)        */
/*  Scoped su .hero.photo: gli header delle pagine interne restano invariati.  */
/* -------------------------------------------------------------------------- */
.hero.photo .hp{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:#070a12}
.hero.photo .hp-img{position:absolute;inset:0;overflow:hidden}
.hero.photo .hp-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 46%;
  transform-origin:60% 45%;filter:saturate(.72) contrast(1.04) brightness(.86);animation:ax-kenburns 38s ease-in-out infinite}
.hero.photo .hp-mult{position:absolute;inset:0;mix-blend-mode:multiply;
  background:linear-gradient(180deg,rgba(10,14,26,.55) 0%,rgba(10,14,26,.28) 38%,rgba(7,10,18,.72) 100%)}
.hero.photo .hp-soft{position:absolute;inset:0;mix-blend-mode:soft-light;
  background:radial-gradient(120% 110% at 62% 34%,rgba(201,162,75,.20) 0%,rgba(161,126,48,.06) 38%,transparent 66%)}
.hero.photo .hp-tone{position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(19,27,48,.55) 0%,rgba(10,14,26,.35) 45%,rgba(7,10,18,.8) 100%)}
.hero.photo .hp-haze{position:absolute;border-radius:50%;filter:blur(150px);mix-blend-mode:screen;will-change:transform}
.hero.photo .hp-h1{top:-10%;right:-6%;width:70vw;height:70vw;
  background:radial-gradient(circle,rgba(201,162,75,.22),transparent 68%);animation:ax-haze 28s ease-in-out infinite}
.hero.photo .hp-h2{bottom:-24%;left:-14%;width:62vw;height:62vw;
  background:radial-gradient(circle,rgba(28,47,82,.6),transparent 70%);animation:ax-haze 34s ease-in-out infinite reverse}
.hero.photo .hp-vig{position:absolute;inset:0;
  background:radial-gradient(120% 100% at 30% 44%,transparent 0%,rgba(7,10,18,.42) 58%,rgba(7,10,18,.78) 100%),
             linear-gradient(90deg,rgba(7,10,18,.82) 0%,rgba(7,10,18,.58) 30%,rgba(7,10,18,.18) 54%,transparent 72%)}
.hero.photo h1{text-shadow:0 2px 40px rgba(7,10,18,.55)}
.hero.photo .fu{animation:ax-fade-up .85s cubic-bezier(.22,1,.36,1) both}

/* Testo ancorato al bordo sinistro della finestra: la villa (a destra) resta libera.
   Il contenitore centrato da 1200px viene annullato solo qui, sull'hero della home. */
.hero.photo .in{max-width:none;margin:0;padding:140px clamp(24px,4vw,64px) 140px clamp(24px,4vw,72px)}
.hero.photo .in>*{max-width:min(560px,46vw)}
.hero.photo h1{font-size:clamp(34px,3.4vw,52px);max-width:min(560px,46vw);text-wrap:balance}
.hero.photo .sub{max-width:min(540px,44vw);font-size:clamp(16px,1.3vw,18px)}
@media(max-width:1024px){
  .hero.photo .in{padding:150px 24px 120px}
  .hero.photo .in>*{max-width:none}
  .hero.photo h1{font-size:clamp(40px,6.4vw,68px);max-width:none}
  .hero.photo .sub{max-width:640px;font-size:clamp(17px,2vw,21px)}
  .hero.photo .hp-img img{object-position:60% 46%}
}

@keyframes ax-kenburns{
  0%{transform:scale(1.06) translate3d(0,0,0)}
  50%{transform:scale(1.14) translate3d(-1.6%,-1.2%,0)}
  100%{transform:scale(1.06) translate3d(0,0,0)}
}
@keyframes ax-haze{
  0%,100%{opacity:.55;transform:translate3d(0,0,0) scale(1)}
  50%{opacity:.85;transform:translate3d(2%,-1.5%,0) scale(1.06)}
}
@keyframes ax-fade-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}

/* Slider prima/dopo con foto reali (annulla i segnaposto astratti) */
.ba.photo .layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba.photo .after,.ba.photo .before{background:none}
.ba.photo .after::after{display:none}


/* ==========================================================================
   HEADER DELLE PAGINE INTERNE — "luce d'apertura"
   Sostituisce i nastri oro sfocati. Tre idee:
   1. un reticolo architettonico appena percettibile (misura, non decoro);
   2. un solo fascio di luce, con posizione e inclinazione diverse per pagina;
   3. una barra traslucida di orientamento: dove sono, cosa c'e' qui.
   I colori restano quelli del sistema: ink, oro, cream, mist.
   ========================================================================== */
/* L'header occupa tutta l'altezza dello schermo, come l'hero della home:
   entrando in una pagina interna si vede una schermata intera, non una fascia.
   100dvh, non 100vh, perche' su mobile la barra del browser si ritrae e con
   100vh l'ultima riga finirebbe sotto il bordo visibile. */
.pagehead{
  --ph-x:60%;        /* da dove entra la luce */
  --ph-rot:12deg;    /* inclinazione del fascio */
  --ph-cell:120px;   /* passo del reticolo */
  position:relative;display:flex;flex-direction:column;
  min-height:100vh;min-height:100dvh;overflow:hidden;isolation:isolate}

.ph{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  background:radial-gradient(130% 120% at var(--ph-x) -14%,#16213a 0%,#0d1424 46%,#070a12 100%)}

/* Reticolo: si dissolve verso i bordi, non finisce con un taglio */
.ph-grid{position:absolute;inset:-1px;
  background-image:linear-gradient(90deg,rgba(244,241,234,.055) 1px,transparent 1px),
                   linear-gradient(0deg,rgba(244,241,234,.032) 1px,transparent 1px);
  background-size:var(--ph-cell) 100%,100% var(--ph-cell);
  -webkit-mask-image:radial-gradient(118% 104% at var(--ph-x) 6%,#000 0%,rgba(0,0,0,.5) 46%,transparent 80%);
          mask-image:radial-gradient(118% 104% at var(--ph-x) 6%,#000 0%,rgba(0,0,0,.5) 46%,transparent 80%)}

/* Fascio di luce: una sola forma, movimento lento e di piccola ampiezza */
.ph-shaft{position:absolute;top:-32%;bottom:-32%;left:var(--ph-x);
  width:clamp(11rem,26vw,26rem);margin-left:-13vw;
  transform:rotate(var(--ph-rot));filter:blur(46px);mix-blend-mode:screen;will-change:transform;
  background:linear-gradient(90deg,transparent,rgba(201,162,75,.13) 36%,rgba(231,204,133,.2) 52%,rgba(201,162,75,.09) 68%,transparent);
  animation:ph-drift 46s ease-in-out infinite}
.ph-shaft.b{width:clamp(6rem,13vw,13rem);margin-left:6vw;filter:blur(58px);opacity:.6;
  animation:ph-drift 62s ease-in-out infinite reverse}

/* Pozza di luce ancorata al titolo: la luce nasce dove nasce il testo.
   Segue il blocco di testo, che a schermo intero e' centrato in verticale. */
.ph-pool{position:absolute;left:-6%;top:50%;transform:translateY(-48%);
  width:min(48rem,74vw);height:min(34rem,52vw);
  background:radial-gradient(circle at 34% 62%,rgba(201,162,75,.1),transparent 66%);filter:blur(26px)}

/* Bordo inferiore: dissolvenza + orizzonte, non un divisore da 1px secco */
.ph-edge{position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(to bottom,transparent,rgba(7,10,18,.7) 62%,#070a12)}
.ph-horizon{position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,75,.42) 24%,rgba(201,162,75,.5) 60%,transparent)}

@keyframes ph-drift{
  0%,100%{transform:rotate(var(--ph-rot)) translate3d(0,0,0)}
  50%    {transform:rotate(var(--ph-rot)) translate3d(2.5%,-1.5%,0)}
}

/* Contenuto — occupa lo spazio sopra la barra di orientamento e vi si centra.
   Si usa padding-block, non la scorciatoia: la scorciatoia azzererebbe anche il
   padding orizzontale di .wrap e a 1200 px il testo toccherebbe il bordo. */
/* width:100% e' necessario: .wrap ha margin:0 auto e, come elemento flessibile,
   i margini automatici sull'asse trasversale annullano lo stiramento — senza
   larghezza esplicita il contenitore si stringerebbe sul contenuto e il testo
   non sarebbe piu' allineato alla griglia da 1200 px del resto del sito. */
.pagehead .in{position:relative;z-index:10;flex:1;width:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(7rem,13vh,10rem) clamp(2.5rem,6vh,4.5rem)}
.pagehead h1{font-size:clamp(2.25rem,4.6vw,3.6rem);max-width:22ch}
.pagehead .sub{margin-top:1.5rem;max-width:56ch;
  font-size:clamp(1.0625rem,1.35vw,1.1875rem);color:var(--mist);line-height:1.62}
.pagehead .eyebrow{margin-bottom:1.5rem}
.pagehead .fu{animation:ax-fade-up .8s var(--ease) both}

/* Barra di orientamento: materiale traslucido, il contenuto le scorre sotto */
.ph-meta{position:relative;z-index:10;border-top:1px solid rgba(255,255,255,.07);
  background:rgba(10,14,26,.5);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
.ph-meta .row{display:flex;align-items:center;justify-content:space-between;
  gap:.75rem 1.75rem;min-height:3.75rem;padding:.7rem 0;flex-wrap:wrap}

.crumbs{display:flex;align-items:center;gap:.625rem;white-space:nowrap;
  font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:var(--mist-dim)}
.crumbs i{display:block;flex:0 0 auto;width:.875rem;height:1px;background:rgba(184,191,204,.32)}
.crumbs a{transition:color var(--r-fast) var(--ease)}
.crumbs a:hover{color:var(--gold)}
.crumbs b{color:var(--cream);font-weight:400}

.chips{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
  padding:.5rem .9375rem;font:inherit;font-size:12px;letter-spacing:.05em;color:var(--mist);cursor:pointer;
  transition:transform var(--r-base) var(--ease),color var(--r-base) var(--ease),
             border-color var(--r-base) var(--ease),background-color var(--r-base) var(--ease)}
.chip:hover{color:var(--cream);border-color:rgba(201,162,75,.45);background:rgba(201,162,75,.07)}
.chip:active{transform:scale(.96);transition-duration:var(--r-press)}
.chip em{font-style:normal;font-family:var(--serif);font-size:14px;line-height:1;color:rgba(201,162,75,.75)}
.chip svg{flex:0 0 auto;color:rgba(201,162,75,.8)}
/* Variante non cliccabile: un dato, non un comando */
.chip.fact{cursor:default}
.chip.fact:hover{transform:none;color:var(--mist);border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03)}

/* Parametri per pagina: stesso sistema, quattro luoghi diversi */
.pagehead.p-servizi  {--ph-x:66%;--ph-rot:13deg;--ph-cell:130px}
.pagehead.p-pacchetti{--ph-x:37%;--ph-rot:-11deg;--ph-cell:104px}
.pagehead.p-processo {--ph-x:79%;--ph-rot:7deg;--ph-cell:150px}
.pagehead.p-contatti {--ph-x:23%;--ph-rot:-16deg;--ph-cell:118px}

@media(max-width:900px){
  .pagehead .in{padding-block:6.5rem 2rem}
  .ph-meta .row{justify-content:flex-start}
  /* La fila di scorciatoie scorre in orizzontale e sfuma al bordo */
  .chips{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:2px;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%)}
  .chips::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap}
}

/* ==========================================================================
   NAVBAR — materiale traslucido con bordo di scorrimento sfumato
   ========================================================================== */
header.nav{transition:background-color var(--r-slow) var(--ease)}
header.nav.scrolled{background:rgba(7,10,18,.6);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border-bottom:0}
header.nav.scrolled::after{content:"";position:absolute;left:0;right:0;top:100%;height:1.375rem;
  pointer-events:none;background:linear-gradient(to bottom,rgba(7,10,18,.46),transparent)}
/* Vibranza: sopra un materiale traslucido un grigio tenue perde leggibilita' */
header.nav.scrolled .navlinks a{color:#C3CAD6}
.navlinks a{transition:color var(--r-base) var(--ease)}
.navlinks a::after{transition:width var(--r-base) var(--ease)}

/* Menu mobile: entra ed esce dalla stessa direzione, senza salti */
/* Chiuso resta nel flusso (serve per animarne l'altezza) ma non deve lasciare
   nemmeno il filo del bordo sotto la barra di navigazione. */
.mobile{display:block;max-height:0;opacity:0;visibility:hidden;border-top-color:transparent;
  transition:max-height var(--r-slow) var(--ease),opacity var(--r-base) var(--ease),
             border-top-color var(--r-base) var(--ease),visibility 0s linear var(--r-slow)}
.mobile.on{max-height:32rem;opacity:1;visibility:visible;border-top-color:rgba(255,255,255,.05);
  animation:none;transition-delay:0s}
.burger span{transition:transform var(--r-base) var(--ease),opacity var(--r-fast) var(--ease),top var(--r-base) var(--ease)}
.mobile a{transition:color var(--r-base) var(--ease),transform var(--r-base) var(--ease)}
.mobile a:active{transform:scale(.98)}

/* ==========================================================================
   MEDIA REALI — fascia larga per il video tour
   Il comportamento dei video (avvio al clic, velo che sfuma, reel in loop) e'
   definito piu' in alto: qui c'e' solo la larghezza della fascia. A 920 px il
   sorgente 1440x1080 resta nitido anche su schermi ad alta densita', mentre
   nella colonna stretta di prima meta' dei pixel veniva scartata.
   ========================================================================== */
.mediaband{max-width:57.5rem;margin:3rem auto 0}
.reels.single{justify-content:center}

/* ==========================================================================
   SERVIZI — ritmo alternato e collegamento ai pacchetti
   ========================================================================== */
/* Una sezione su due poggia su un piano leggermente rialzato: la pagina
   respira invece di ripetere quattro volte la stessa fascia. */
.svc{position:relative}
.svc.panel{background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,0) 68%)}
.svc.panel::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,75,.28),transparent)}
.svclink{margin-top:2rem;display:flex;align-items:center;gap:.625rem;flex-wrap:wrap}
.svclink .lb{font-size:10px;text-transform:uppercase;letter-spacing:.22em;color:var(--mist-dim)}
.tile .k{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.22em;
  color:rgba(201,162,75,.7);margin-bottom:.875rem}

/* ==========================================================================
   HOME — quattro passi collegati
   La sezione "soluzione" e l'anteprima del processo usavano lo stesso
   componente a quattro riquadri, con contenuti che si somigliavano: sulla
   stessa pagina sembravano la stessa cosa detta due volte. Ora la sequenza
   ha la forma di una sequenza (un filo che collega i passi) e l'anteprima
   del processo ha la forma di un riepilogo (il binario orizzontale).
   ========================================================================== */
.flow{position:relative;display:grid;gap:2.5rem}
@media(min-width:860px){.flow{grid-template-columns:repeat(4,1fr);gap:1.75rem}}
/* Il filo passa dietro i pallini: si vede solo negli spazi fra un passo e l'altro */
.flow::before{content:"";display:none;position:absolute;left:1.375rem;right:1.375rem;top:1.375rem;height:1px;
  background:linear-gradient(90deg,rgba(201,162,75,.55),rgba(201,162,75,.3) 66%,rgba(201,162,75,.12))}
@media(min-width:860px){.flow::before{display:block}}
.flow .st{position:relative}
.flow .sn{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid rgba(201,162,75,.35);
  background:var(--ink);font-family:var(--serif);font-size:1.125rem;line-height:1;color:var(--gold);
  transition:border-color var(--r-slow) var(--ease),background-color var(--r-slow) var(--ease),
             box-shadow var(--r-slow) var(--ease)}
.flow .st:hover .sn{border-color:rgba(201,162,75,.7);background:rgba(201,162,75,.08);
  box-shadow:0 0 0 6px rgba(201,162,75,.05)}
/* L'ultimo non e' un'altra tappa: e' il risultato */
.flow .st.end .sn{border-color:rgba(201,162,75,.7);background:rgba(201,162,75,.1)}
.flow h3{margin-top:1.5rem;font-size:1.3125rem}
.flow p{margin-top:.625rem;font-size:14px;color:var(--mist);line-height:1.6}
/* Le schede cliccabili cedono alla pressione come un pulsante */
a.card:active{transform:translateY(-2px) scale(.992);transition-duration:var(--r-press)}

/* ==========================================================================
   PACCHETTI — confronto rapido e categorie leggibili
   ========================================================================== */
.cmp{margin-top:2.5rem;overflow-x:auto;border-radius:16px;border:1px solid rgba(255,255,255,.06);
  background:rgba(10,14,26,.45)}
.cmp table{width:100%;min-width:44rem;border-collapse:collapse;font-size:14px}
.cmp th,.cmp td{padding:.875rem 1.125rem;text-align:left;border-top:1px solid rgba(255,255,255,.05)}
.cmp thead th{border-top:0;font-family:var(--sans);font-weight:400;font-size:10px;
  text-transform:uppercase;letter-spacing:.2em;color:rgba(201,162,75,.75)}
.cmp tbody th{font-family:var(--sans);font-weight:400;font-size:13px;color:var(--mist);white-space:nowrap}
.cmp td{color:var(--cream)}
.cmp td.no{color:var(--mist-dim)}
.cmp tbody tr{transition:background-color var(--r-fast) var(--ease)}
.cmp tbody tr:hover{background:rgba(255,255,255,.022)}
.cmp caption{caption-side:bottom;padding:.875rem 1.125rem;text-align:left;
  font-size:12px;color:var(--mist-dim);border-top:1px solid rgba(255,255,255,.05)}
/* Etichetta di categoria in cima alla card: dice cosa sto guardando */
.card .kcat{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1rem;
  font-size:10px;text-transform:uppercase;letter-spacing:.22em;color:rgba(201,162,75,.7)}
.card .kcat::before{content:"";width:1.25rem;height:1px;background:rgba(201,162,75,.45)}
/* Intestazione di gruppo: sostituisce l'occhiello nudo ripetuto tre volte */
.grouphead{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;margin-bottom:2rem}
.grouphead h3{font-size:clamp(1.625rem,3vw,2.25rem);margin-top:.875rem}
.grouphead .gn{font-family:var(--serif);font-size:2.75rem;line-height:1;color:rgba(201,162,75,.28)}

/* ==========================================================================
   PROCESSO — la linea si riempie mentre si legge
   ========================================================================== */
.timeline{--tl:0}
.timeline::after{content:"";position:absolute;left:26px;top:8px;width:1px;
  height:calc((100% - 2rem) * var(--tl));
  background:linear-gradient(to bottom,rgba(231,204,133,.9),rgba(201,162,75,.5));
  box-shadow:0 0 12px rgba(201,162,75,.35)}
@media(max-width:768px){.timeline::after{display:none}}
.bubble{transition:border-color var(--r-slow) var(--ease),background-color var(--r-slow) var(--ease),
  box-shadow var(--r-slow) var(--ease)}
.titem.in .bubble{border-color:rgba(201,162,75,.65);background:rgba(201,162,75,.07);
  box-shadow:0 0 0 6px rgba(201,162,75,.05)}
/* Esito della fase: chiude ogni blocco con un fatto, non con altri elenchi */
.tout{margin-top:1.5rem;display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.06);padding-top:1.125rem}
.tout dt{flex:0 0 auto;font-size:10px;text-transform:uppercase;letter-spacing:.22em;
  color:rgba(201,162,75,.7);padding-top:.375rem}
.tout dd{font-family:var(--serif);font-style:italic;font-size:1.125rem;line-height:1.4;color:var(--cream)}
/* Fascia di chiusura: un binario orizzontale, non un'altra colonna di box */
.rail{display:grid;border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.06);background:rgba(10,14,26,.5)}
@media(min-width:768px){.rail{grid-template-columns:repeat(3,1fr)}}
.rail .r{position:relative;padding:1.75rem 1.5rem;border-top:1px solid rgba(255,255,255,.05)}
.rail .r:first-child{border-top:0}
@media(min-width:768px){
  .rail .r{border-top:0;border-left:1px solid rgba(255,255,255,.05)}
  .rail .r:first-child{border-left:0}
}
.rail .rk{font-family:var(--serif);font-size:1.75rem;line-height:1;color:rgba(201,162,75,.4)}
.rail .rt{margin-top:.875rem;font-family:var(--serif);font-size:1.3125rem;line-height:1.2}
.rail .rd{margin-top:.5rem;font-size:14px;color:var(--mist);line-height:1.55}

/* ==========================================================================
   CONTATTI — riga di rassicurazione e passi collegati
   ========================================================================== */
.steps{position:relative}
/* Un filo unisce i tre passi: sono una sequenza, non tre voci sciolte */
.steps::before{content:"";position:absolute;left:.5rem;top:.75rem;bottom:.75rem;width:1px;
  background:linear-gradient(to bottom,rgba(201,162,75,.45),rgba(255,255,255,.08))}
.steps li{position:relative;padding-left:1.75rem;gap:0}
.steps li>.n{position:absolute;left:0;top:-.125rem;width:1rem;text-align:center;
  background:var(--ink800);padding:.125rem 0;font-size:1.0625rem;line-height:1.2}
.sbox{transition:border-color var(--r-slow) var(--ease),background-color var(--r-slow) var(--ease)}
.sbox:hover{border-color:rgba(201,162,75,.2)}

/* ==========================================================================
   FINESTRE MODALI — il materiale si forma, non si limita a comparire
   ========================================================================== */
.backdrop{-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}
.dialog{animation:ax-materialize .42s var(--ease) both}
@keyframes ax-materialize{
  from{opacity:0;transform:translateY(1.5rem) scale(.965);filter:blur(6px)}
  to  {opacity:1;transform:none;filter:blur(0)}
}
.mclose{transition:border-color var(--r-base) var(--ease),color var(--r-base) var(--ease),transform var(--r-base) var(--ease)}
.mclose:active{transform:scale(.94);transition-duration:var(--r-press)}
.i{transition:border-color var(--r-base) var(--ease),background-color var(--r-base) var(--ease),
  box-shadow var(--r-base) var(--ease)}
.i:focus{border-color:rgba(201,162,75,.55);box-shadow:0 0 0 3px rgba(201,162,75,.12)}
/* Convalida quando il campo viene lasciato, non al momento dell'invio */
.i:user-invalid{border-color:rgba(239,68,68,.55)}

/* Il segno di spunta degli elenchi e' disegnato in CSS: prima veniva iniettato
   da JavaScript e per un istante si leggeva il segnaposto grezzo nel testo. */
.ck{flex:0 0 auto;display:block;width:1rem;height:1rem;margin-top:.25rem;
  background:var(--gold);
  -webkit-mask:no-repeat center/1rem 1rem var(--ck-src);
          mask:no-repeat center/1rem 1rem var(--ck-src)}
:root{--ck-src:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10.5l3.5 3.5L16 5.5' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ==========================================================================
   PRIMA / DOPO — il cursore segue la mano
   ========================================================================== */
/* Lo scorrimento verticale della pagina resta possibile sopra l'immagine;
   solo la maniglia si appropria del gesto orizzontale. */
.ba{cursor:ew-resize;touch-action:pan-y}
.ba .handle{touch-action:none}
.ba .handle .knob{transition:transform var(--r-base) var(--spring),border-color var(--r-base) var(--ease)}
.ba.grab .handle .knob{transform:scale(1.12);border-color:rgba(201,162,75,.9)}
.ba .handle:focus-visible .knob{outline:2px solid rgba(201,162,75,.9);outline-offset:3px}
.ba .lbl{transition:opacity var(--r-base) var(--ease)}
.ba.grab .lbl{opacity:.35}

/* ==========================================================================
   PREFERENZE DI ACCESSIBILITA'
   ========================================================================== */
/* Meno trasparenza: i materiali diventano opachi, il blur sparisce */
@media(prefers-reduced-transparency:reduce){
  header.nav.scrolled,.ph-meta,.mobile{background:#0A0E1A;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .backdrop{background:rgba(7,10,18,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
  .chip,.card,.tile,.sbox,.formbox{background:#0F1526}
  .ba .lbl,.videoslot .tag,.videoslot .play i{-webkit-backdrop-filter:none;backdrop-filter:none;background:#070A12}
}
/* Piu' contrasto: superfici quasi piene e bordi definiti */
@media(prefers-contrast:more){
  .card,.tile,.sbox,.formbox,.chip,.tbox,.rail,.cmp{border-color:rgba(244,241,234,.34);background:#0B1020}
  .lead,.card p,.tile p,.sbox p,.rail .rd,.crumbs,.chip{color:#D6DBE4}
  .eyebrow,.cols h4,legend,footer h4{color:var(--gold-light)}
  .ph-grid,.ph-shaft,.ph-pool{opacity:.35}
  :focus-visible{outline-width:3px}
}
/* Movimento ridotto: il fascio si ferma, la linea del processo resta piena */
@media(prefers-reduced-motion:reduce){
  .ph-shaft{animation:none}
  .pagehead .fu{animation:none}
  .timeline{--tl:1}
  .timeline::after{box-shadow:none}
  .dialog{animation:none}
}

/* ==========================================================================
   BARRA DI NAVIGAZIONE SUL TOCCO
   Su iPhone il burger e le bandierine non rispondevano: erano i due bersagli
   piu' piccoli del sito (40x40 con un'icona da 24x16, e 38x27) dentro un
   header fisso. Sotto i 44 px raccomandati da Apple il dito centra il vuoto
   e non succede nulla.

   L'area sensibile si allarga con uno strato invisibile dentro il pulsante:
   il tocco cade comunque sul comando e la grafica non si sposta di un pixel.
   ========================================================================== */
.burger,.flag{position:relative}
.burger::after,.flag::after{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:44px;height:44px}
.burger::after{width:48px;height:48px}

/* Su iOS un pannello fisso con sfondo sfocato puo' lasciare indietro la
   propria area sensibile dopo lo scorrimento: un livello di composizione
   dedicato tiene allineato cio' che si vede con cio' che si tocca. */
header.nav{-webkit-transform:translateZ(0);transform:translateZ(0)}

/* A schermo stretto il marchio si stringe: cosi' le bandierine e il burger,
   ora piu' larghi da toccare, restano dentro la riga senza comprimersi. */
@media(max-width:420px){
  .brand .bt{font-size:17px;letter-spacing:.24em}
  .navright{gap:14px}
}
@media(max-width:340px){
  .brand .bt{display:none}
}

/* Allineamento del burger con il cambio lingua.
   `.burger span` (0,1,1) colpiva anche `.bwrap`, che e' a sua volta uno
   <span>: il contenitore diventava una barra assoluta alta 1 px e le tre
   linee, che si misurano a partire da li', scendevano 8 px sotto le
   bandierine. Il contenitore torna un blocco alto quanto l'inchiostro che
   contiene (linee a 0, 8 e 16 px, spesse 1 px = 17 px), cosi' il suo centro
   coincide con quello delle bandierine. */
.burger .bwrap{position:relative;left:auto;top:auto;width:24px;height:17px;background:none}
.burger .bwrap span{position:absolute;left:0;width:24px;height:1px;background:var(--cream)}


/* ==========================================================================
   BLOCCHI EDITORIALI — definizione in evidenza e domande frequenti
   ========================================================================== */

/* Definizione secca del brand, in apertura: e' la risposta che un motore di
   ricerca o un assistente cita quando qualcuno chiede "che cos'e' Axioniv". */
.defbox{border:1px solid rgba(201,162,75,.28);border-left-width:3px;border-radius:4px;
  background:linear-gradient(180deg,rgba(201,162,75,.05),rgba(201,162,75,0));
  padding:28px 32px;max-width:820px}
.defbox p{margin:0;font-family:var(--serif);font-size:clamp(20px,2.4vw,27px);line-height:1.5;color:var(--cream)}
.defbox p strong{color:var(--gold-light);font-weight:500}
@media(max-width:640px){.defbox{padding:22px 20px}}

.faq{max-width:820px;border-top:1px solid rgba(255,255,255,.08)}
.faq details{border-bottom:1px solid rgba(255,255,255,.08)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;
  padding:22px 0;font-family:var(--serif);font-size:clamp(18px,2vw,22px);line-height:1.4;
  color:var(--cream);transition:color var(--r-fast) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-light)}
.faq summary:focus-visible{outline:2px solid rgba(201,162,75,.9);outline-offset:4px;border-radius:2px}
.faq summary::after{content:"";flex:none;width:12px;height:12px;margin-left:auto;margin-top:.45em;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform var(--r-base) var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 0 24px;max-width:70ch;color:var(--mist);font-size:16px;line-height:1.75}
.faq .a p{margin:0 0 12px}
.faq .a p:last-child{margin-bottom:0}
@media(prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* Sei voci di menu: tra 1025 e 1200px la barra si stringe invece di traboccare */
@media(min-width:1025px) and (max-width:1200px){
  .navlinks{gap:22px}
  .navlinks a{font-size:12px;letter-spacing:.09em}
  .navright{gap:14px}
  .nav-cta{padding:10px 16px!important;font-size:12px}
}

/* Firma del marchio: resta in inglese in entrambe le versioni del sito */
.payoff{margin-top:16px;font-family:var(--serif);font-size:17px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);opacity:.92}
@media(max-width:640px){.payoff{font-size:15px;letter-spacing:.12em}}