/* ===== ANUBIS AUTOMATION · nero profondo e oro caldo, presi dal marchio ===== */
:root{
  --nero:#070706;
  --nero-2:#0d0d0b;
  --nero-3:#131311;
  --oro-chiaro:#F2D79B;
  --oro:#C9A15C;
  --bronzo:#7E5F2C;
  --testo:#E9E5DA;
  --testo-2:#95907F;
  --linea:rgba(201,161,92,.22);
  --mk-primario:#C9A15C; --mk-secundario:#F2D79B; --mk-fondo:#070706; --mk-texto:#E9E5DA;
  --t-titolo:"Montserrat", "Helvetica Neue", Arial, sans-serif;
  --t-testo:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--nero); color:var(--testo);
  font-family:var(--t-testo); font-weight:300; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{width:min(1120px, 92vw); margin:0 auto}
.mk-progress{height:2px; background:linear-gradient(90deg,var(--bronzo),var(--oro-chiaro))}

/* --- tipografia --- */
h1,h2,h3,.occhiello,.btn,.num,.nome-rubik{font-family:var(--t-titolo)}
h1{font-size:clamp(2rem, 5vw, 3.9rem); line-height:1.1; font-weight:500; letter-spacing:-.015em; margin:0 0 1.5rem}
h2{font-size:clamp(1.5rem, 3.2vw, 2.5rem); line-height:1.18; font-weight:500; letter-spacing:-.01em; margin:0 0 1.1rem}
h3{font-size:1.05rem; font-weight:500; letter-spacing:.02em; margin:0 0 .5rem}
p{margin:0 0 1.1rem; max-width:62ch}
.occhiello{font-size:.7rem; letter-spacing:.32em; text-transform:uppercase; color:var(--oro); font-weight:400; margin:0 0 1.5rem}
.oro{color:var(--oro-chiaro)}
.spenta{color:var(--testo-2)}
.grande{font-size:clamp(1.05rem,1.9vw,1.3rem); font-weight:300}

/* --- testata --- */
header.testata{position:fixed; top:0; left:0; right:0; z-index:50; backdrop-filter:blur(14px); background:rgba(0,0,0,.72); border-bottom:1px solid transparent; transition:border-color .3s, background .3s}
header.testata.giu{border-bottom-color:var(--linea); background:rgba(0,0,0,.94)}
.testata .wrap{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:.8rem 0}
.marchio{display:flex; align-items:center; gap:.75rem; text-decoration:none}
.marchio img{width:38px; height:34px; object-fit:contain; -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent); mask-image:radial-gradient(closest-side,#000 62%,transparent)}
.marchio b{font-family:var(--t-titolo); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; font-weight:400; color:var(--testo); white-space:nowrap}
nav.menu{display:flex; align-items:center; gap:1.8rem}
nav.menu a{font-family:var(--t-titolo); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:var(--testo-2); transition:color .25s}
nav.menu a:hover, nav.menu a.qui{color:var(--oro-chiaro)}
nav.menu a.btn{color:var(--nero)}
nav.menu a.btn:hover{color:var(--nero)}
@media (max-width:760px){
  .marchio b{font-size:.62rem; letter-spacing:.2em}
  nav.menu{gap:1rem}
  nav.menu a{font-size:.62rem; letter-spacing:.14em}
  nav.menu a.btn{padding:.7rem 1rem}
}
@media (max-width:560px){ .solo-largo{display:none} nav.menu a.btn{padding:.7rem .95rem; letter-spacing:.12em} .occhiello{font-size:.62rem; letter-spacing:.18em} }
@media (max-width:420px){ .marchio b{display:none} }

/* --- bottoni --- */
.btn{display:inline-block; white-space:nowrap; padding:.95rem 2rem; text-decoration:none; font-family:var(--t-titolo); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; font-weight:500; border:1px solid var(--oro); color:var(--nero); background:var(--oro); cursor:pointer; transition:background .3s, color .3s, box-shadow .3s, transform .3s}
.btn:hover{background:var(--oro-chiaro); border-color:var(--oro-chiaro); box-shadow:0 0 34px rgba(201,161,92,.28); transform:translateY(-2px)}
.btn.vuoto{background:transparent; color:var(--oro-chiaro)}
.btn.vuoto:hover{background:rgba(201,161,92,.1); box-shadow:none}

/* --- apertura --- */
.apertura{min-height:88svh; display:flex; align-items:center; position:relative; padding:9rem 0 5rem; overflow:hidden}
.apertura::before{content:""; position:absolute; inset:-30% -10% auto; height:110%; pointer-events:none; background:radial-gradient(ellipse 52% 46% at 62% 24%, rgba(201,161,92,.15), transparent 68%); animation:respiro 11s ease-in-out infinite alternate}
@keyframes respiro{from{opacity:.65; transform:translateX(-2%) scale(1)} to{opacity:1; transform:translateX(2%) scale(1.07)}}
.apertura .wrap{position:relative; z-index:1}
.apertura h1{max-width:20ch}
.apertura .sotto{max-width:52ch; color:var(--testo-2); font-size:clamp(1rem,1.7vw,1.2rem); margin-bottom:2.4rem}

/* --- sezioni --- */
section{padding:clamp(4rem, 8vw, 7rem) 0}
.intestazione{max-width:56ch; margin-bottom:3rem}

/* --- filo d'oro --- */
.filo{width:100%; height:14px; overflow:hidden; opacity:.75}
.filo svg{width:100%; height:14px}

/* --- sintomi --- */
.sintomi{border-top:1px solid var(--linea); background:var(--nero-2)}
.lista-sintomi{border-top:1px solid var(--linea)}
.sintomo{display:grid; grid-template-columns:5rem 1fr; gap:1.5rem; align-items:baseline; padding:1.8rem 0; border-bottom:1px solid var(--linea); transition:background .35s, padding-left .35s}
.sintomo:hover{background:rgba(201,161,92,.04); padding-left:1rem}
.sintomo .num{font-size:.82rem; letter-spacing:.18em; color:var(--oro)}
.sintomo p{margin:0; font-size:clamp(1rem,1.7vw,1.25rem); max-width:48ch}
@media (max-width:640px){ .sintomo{grid-template-columns:3rem 1fr; gap:1rem} }

/* --- risultato --- */
.risultato{text-align:center}
.risultato .occhiello{margin:0 auto 1.8rem; max-width:none}
.risultato p{max-width:24ch; margin:0 auto; font-family:var(--t-titolo); font-weight:400; font-size:clamp(1.5rem,3.4vw,2.6rem); line-height:1.24; color:var(--testo)}
.risultato .coda{font-family:var(--t-testo); font-size:1rem; color:var(--testo-2); margin-top:1.4rem; max-width:40ch}

/* --- chiusura --- */
.chiusura{text-align:center; border-top:1px solid var(--linea); background:var(--nero-2)}
.chiusura h2{max-width:22ch; margin-inline:auto}
.chiusura p{margin-inline:auto}

/* --- vetrina Rubik --- */
.vetrina{text-align:center; padding:7rem 0 3.5rem; position:relative; overflow:hidden; background:#000}
.vetrina::before{content:""; position:absolute; inset:0 0 auto; height:46%; pointer-events:none; background:radial-gradient(ellipse 44% 62% at 50% 34%, rgba(201,161,92,.16), transparent 72%)}
.vetrina .wrap{position:relative; z-index:1}
.vetrina p{margin-inline:auto}
.nome-rubik{font-size:clamp(2.4rem,8vw,5.2rem); letter-spacing:.3em; font-weight:600; text-transform:uppercase; margin:0 0 .5rem; text-indent:.3em;
  background:linear-gradient(180deg,#F7E6B8,#C9A15C 55%,#8A6A32); -webkit-background-clip:text; background-clip:text; color:transparent}
.vetrina .didascalia-alta{color:var(--testo-2); font-size:.76rem; letter-spacing:.26em; text-transform:uppercase; font-family:var(--t-titolo); margin:0 auto 1.6rem}
.orologio{width:clamp(66px,8vw,92px); margin:0 auto -1.2rem; position:relative; z-index:2; filter:drop-shadow(0 0 22px rgba(201,161,92,.4))}
.cubo{width:min(330px,58vw); margin:0 auto}
.cubo img{mix-blend-mode:screen}

/* --- schermate --- */
.due-colonne{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.due-colonne.alta{align-items:start; grid-template-columns:1.25fr .75fr}
@media (max-width:900px){ .due-colonne, .due-colonne.alta{grid-template-columns:1fr} }
.schermate{display:grid; gap:1.3rem}
.telefono{background:var(--nero-3); border:1px solid var(--linea); border-radius:16px; padding:1.1rem; box-shadow:0 30px 70px rgba(0,0,0,.6)}
.telefono .barra{display:flex; align-items:center; gap:.6rem; padding-bottom:.9rem; margin-bottom:1rem; border-bottom:1px solid var(--linea); font-size:.76rem; color:var(--testo-2); font-family:var(--t-titolo); letter-spacing:.12em; text-transform:uppercase}
.pallino{width:8px; height:8px; border-radius:50%; background:var(--oro)}
.bolla{background:#17170f; border:1px solid rgba(201,161,92,.18); border-radius:12px 12px 12px 4px; padding:.75rem .9rem; margin-bottom:.7rem; font-size:.92rem; max-width:88%}
.bolla.mia{margin-left:auto; border-radius:12px 12px 4px 12px; background:#1d1a10; border-color:rgba(201,161,92,.3)}
.bolla .chi{display:block; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--oro); margin-bottom:.35rem; font-family:var(--t-titolo)}
.bolla .ora{display:block; text-align:right; font-size:.62rem; color:var(--testo-2); margin-top:.35rem}
.vocale{display:flex; align-items:center; gap:.7rem}
.vocale .play{width:26px; height:26px; border-radius:50%; border:1px solid var(--oro); display:grid; place-items:center; flex:0 0 auto}
.vocale .play::before{content:""; border-left:7px solid var(--oro); border-top:5px solid transparent; border-bottom:5px solid transparent; margin-left:2px}
.onda{display:flex; align-items:center; gap:4px; height:22px; flex:1}
.onda i{width:2px; background:rgba(201,161,92,.55); border-radius:2px}
.riepilogo{background:var(--nero-3); border:1px solid var(--linea); border-radius:16px; padding:1.3rem 1.4rem; box-shadow:0 30px 70px rgba(0,0,0,.6)}
.riepilogo .titolo{font-family:var(--t-titolo); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--oro); margin-bottom:1rem; display:flex; justify-content:space-between; gap:1rem}
.riga{display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid rgba(201,161,92,.12); font-size:.92rem}
.riga:last-child{border-bottom:0}
.riga b{font-weight:500; color:var(--oro-chiaro); font-family:var(--t-titolo); font-size:.94rem}
.riga.avviso{color:var(--testo-2)}
.didascalia{font-size:.78rem; color:var(--testo-2); text-align:center; margin:.2rem auto 0}

/* --- passi --- */
.passi{background:var(--nero-2); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea)}
.griglia-passi{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea)}
.passo{background:var(--nero-2); padding:2.1rem 1.5rem; transition:background .35s}
.passo:hover{background:var(--nero-3)}
.passo .num{display:block; font-size:.7rem; letter-spacing:.2em; color:var(--oro); margin-bottom:1.3rem}
.passo p{font-size:.93rem; color:var(--testo-2); margin:0}
@media (max-width:900px){ .griglia-passi{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .griglia-passi{grid-template-columns:1fr} }

/* --- diagnosi --- */
.pagina-diagnosi{padding-top:9rem}
form{display:grid; gap:1.1rem; max-width:32rem; margin-top:2.6rem; padding-top:2.2rem; border-top:1px solid var(--linea)}
.campo label{display:block; font-family:var(--t-titolo); font-size:.63rem; letter-spacing:.22em; text-transform:uppercase; color:var(--testo-2); margin-bottom:.5rem}
.campo input{width:100%; background:transparent; border:0; border-bottom:1px solid var(--linea); color:var(--testo); font-family:var(--t-testo); font-size:1.02rem; padding:.6rem 0; transition:border-color .3s}
.campo input:focus{outline:none; border-bottom-color:var(--oro)}
form .btn{justify-self:start}
.privacy{font-size:.78rem; color:var(--testo-2); margin:.4rem 0 0; max-width:46ch; line-height:1.7}
.contatti{border-left:1px solid var(--linea); padding-left:1.6rem}
.contatti a{color:var(--oro-chiaro); text-decoration:none; border-bottom:1px solid var(--linea)}
.contatti a:hover{border-bottom-color:var(--oro)}
.contatti .voce{margin-bottom:1.6rem}
.contatti .voce span{display:block; font-family:var(--t-titolo); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--testo-2); margin-bottom:.3rem}
@media (max-width:900px){ .contatti{border-left:0; border-top:1px solid var(--linea); padding-left:0; padding-top:2rem; margin-top:1rem} }

/* --- piede --- */
footer{padding:3.5rem 0 3rem; border-top:1px solid var(--linea)}
.piede{display:flex; flex-wrap:wrap; gap:1.5rem 2rem; align-items:center; justify-content:space-between}
.piede img{width:56px; height:50px; object-fit:contain; -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent); mask-image:radial-gradient(closest-side,#000 62%,transparent)}
.piede-dati{font-size:.85rem; color:var(--testo-2); line-height:1.9}
.piede-dati a{color:var(--testo); text-decoration:none}
.piede-dati a:hover{color:var(--oro-chiaro)}
.piede-menu{display:flex; gap:1.4rem; font-family:var(--t-titolo); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase}
.piede-menu a{color:var(--testo-2); text-decoration:none}
.piede-menu a:hover{color:var(--oro-chiaro)}

/* --- scheda soluzione (anteprima in home) --- */
.scheda-soluzione{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center;
  background:#000; border:1px solid var(--linea); padding:clamp(1.6rem,3vw,2.6rem);
  text-decoration:none; transition:border-color .35s, box-shadow .35s, transform .35s;
}
.scheda-soluzione:hover{border-color:var(--oro); box-shadow:0 0 50px rgba(201,161,92,.14); transform:translateY(-3px)}
.scheda-logo{width:clamp(110px,16vw,170px); flex:0 0 auto}
.scheda-nome{
  font-family:var(--t-titolo); font-size:clamp(1.5rem,3.2vw,2.2rem); font-weight:600;
  text-transform:uppercase; letter-spacing:.22em; margin:0 0 .6rem;
  background:linear-gradient(180deg,#F7E6B8,#C9A15C 55%,#8A6A32); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.scheda-testo p{color:var(--testo-2); max-width:44ch}
.scheda-testo .scheda-nome{color:transparent}
.scheda-testo .btn{margin-top:.6rem}
@media (max-width:640px){ .scheda-soluzione{grid-template-columns:1fr; text-align:center; justify-items:center} .scheda-testo p{margin-inline:auto} }

/* --- per chi è --- */
.per-chi{border-bottom:1px solid var(--linea)}
.per-chi h2{max-width:20ch}

/* --- cinque passi + frase sotto la fila --- */
.griglia-passi.cinque{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){ .griglia-passi.cinque{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .griglia-passi.cinque{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .griglia-passi.cinque{grid-template-columns:1fr} }
.sotto-griglia{margin:2.4rem 0 0; max-width:66ch; color:var(--testo-2)}

/* --- strumenti che l'azienda ha già --- */
.strumenti{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.8rem}
.strumenti span{
  font-family:var(--t-titolo); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--oro-chiaro); border:1px solid var(--linea); padding:.55rem 1rem;
}