:root{
  --ink:#0e0e11; --panel:#17171c; --card:#1d1d24;
  --txt:#f4f2f5; --muted:#b9b4c0;
  --pink:#ff2e7e; --mint:#57d9a3; --gold:#e8a33d; --blu:#3b82f6;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--txt);font-family:Archivo,system-ui,sans-serif;line-height:1.6}
h1,h2,h3,.disp{font-family:Anton,Impact,sans-serif;font-weight:400;letter-spacing:.01em;text-wrap:balance}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.eyebrow{color:var(--pink);font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem}

/* header */
header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;background:linear-gradient(180deg,rgba(14,14,17,.92),rgba(14,14,17,.75));backdrop-filter:blur(8px)}
.logo{font-family:Anton,Impact,sans-serif;font-size:1.5rem;line-height:1;text-align:center}
.logo img{display:block;height:1.6em;width:auto;margin:0 auto}
header .logo{text-decoration:none;text-align:left;font-size:1.15rem}
header .logo img{margin:0}
header .logo small{font-size:.5rem;letter-spacing:.3em}
.logo small{display:block;font-family:Archivo;font-weight:800;font-size:.55rem;letter-spacing:.42em;color:var(--muted);margin-top:2px}
nav{display:flex;gap:26px;font-weight:800;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em}
nav a{text-decoration:none;color:var(--txt);position:relative;padding-bottom:4px}
nav a::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--pink);
  transform:scaleX(0);transform-origin:right;transition:transform .3s}
nav a:hover,nav a:focus-visible{color:var(--pink)}
nav a:hover::after,nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.socials{display:flex;gap:14px}
.hright{display:flex;align-items:center;gap:22px}
.hright .btn{margin-top:0;padding:9px 18px;font-size:.85rem}
.lead{display:grid;gap:12px;margin-top:16px}
.lead input,.lead textarea{width:100%;padding:11px 13px;border-radius:4px;border:1px solid #ffffff22;background:var(--ink);color:var(--txt);font:inherit}
.lead input:focus,.lead textarea:focus{outline:2px solid var(--pink);border-color:transparent}
.socials a{opacity:.85;text-decoration:none;font-weight:800;display:inline-block;transition:transform .25s,color .25s}
.socials svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.socials a:hover,.socials a:focus-visible{opacity:1;color:var(--pink);transform:translateY(-3px) scale(1.15)}

/* hero carousel */
.hero{position:relative;min-height:78vh;overflow:hidden;display:grid}
.slide{grid-area:1/1;opacity:0;transition:opacity .9s;display:grid;align-content:center;padding:9vh 6vw;pointer-events:none}
.slide.on{opacity:1;pointer-events:auto}
.slide{position:relative}
.slide>:not(.trio){position:relative;z-index:1}
.trio{position:absolute;right:5vw;top:50%;height:min(64%,30vw);transform:translateY(-50%);display:flex;gap:18px;align-items:center}
.trio video{height:100%;aspect-ratio:9/16;object-fit:cover;border-radius:16px;box-shadow:0 30px 60px -20px #000,0 0 0 1px #ffffff22}
.trio video:nth-child(1){transform:rotate(-6deg) translateY(24px)}
.trio video:nth-child(2){transform:translateY(-18px) scale(1.06);z-index:1}
.trio video:nth-child(3){transform:rotate(6deg) translateY(24px)}
.slide:has(.trio) .disp{font-size:clamp(2.6rem,4.6vw,5.5rem)}
@media (min-width:1101px){.slide:has(.trio)>:not(.trio){max-width:34vw}}
@media (max-width:1100px){.trio{right:-12vw;opacity:.35;height:86%}}
.s1{background:radial-gradient(120% 140% at 30% 20%,#1b6b4e 0%,#0f3b2c 45%,#0b1410 100%)}
.s2{background:radial-gradient(120% 140% at 70% 15%,#274a8f 0%,#14264d 50%,#0b0e17 100%)}
.s4{background:radial-gradient(120% 140% at 60% 30%,#6d3fc0 0%,#2e1a5c 50%,#0e0a17 100%)}
.s6{background:radial-gradient(120% 140% at 60% 30%,#9d2a5c 0%,#4a1430 50%,#140a10 100%)}
.s7{background:radial-gradient(120% 140% at 60% 30%,#2f6f8f 0%,#163747 50%,#081116 100%)}
.s5{background:radial-gradient(120% 140% at 35% 25%,#12707e 0%,#0a3940 50%,#060f12 100%)}
.s3{background:radial-gradient(120% 140% at 40% 80%,#8f5a1c 0%,#4d2f0f 50%,#170f06 100%)}
.slide .disp{font-size:clamp(3rem,9vw,7.5rem);line-height:.92;text-transform:uppercase;color:var(--pink);max-width:14ch}
.slide .disp em{font-style:normal;color:var(--txt)}
.slide p{margin-top:22px;max-width:52ch;color:var(--muted);font-size:1.05rem}
.btn{display:inline-block;margin-top:30px;background:var(--txt);color:var(--ink);font-weight:800;
  padding:13px 26px;border-radius:4px;text-decoration:none;width:max-content}
.btn{transition:background .25s,color .25s,transform .25s,box-shadow .25s}
.btn:hover,.btn:focus-visible{background:var(--pink);color:#16060d;transform:translateY(-3px);
  box-shadow:0 10px 24px -8px var(--pink)}
.btn:active{transform:translateY(-1px)}
.dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;gap:10px}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:#ffffff55;cursor:pointer;padding:0}
.dots button.on{background:var(--txt)}
.arr{position:absolute;bottom:20px;left:6vw;display:flex;gap:10px}
.arr button{width:38px;height:38px;border-radius:50%;border:1px solid #ffffff66;background:#00000044;color:var(--txt);
  font-size:1.1rem;cursor:pointer}
.arr button{transition:background .25s,border-color .25s,transform .25s}
.arr button:hover{background:var(--pink);border-color:var(--pink);color:#16060d;transform:scale(1.15)}
.dots button{transition:transform .25s,background .25s}
.dots button:hover{transform:scale(1.5);background:#ffffffaa}

section{padding:90px 0}
.lead{color:var(--muted);max-width:60ch;margin-top:14px}

/* servizi */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:44px}
.card{background:var(--card);border-radius:14px;padding:30px 26px;display:flex;flex-direction:column;gap:12px;
  border:2px solid transparent;transition:transform .3s,border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-8px);border-color:currentColor;box-shadow:0 20px 40px -18px currentColor}
.card:hover .frame{transform:scale(1.12) rotate(-4deg)}
.card:hover .frame::after{transform:scaleY(-1)} /* bocca: da triste a sorriso */
.card .tag{font-weight:800;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}
.card h3{font-size:1.6rem;text-transform:uppercase}
.card p{color:var(--muted);font-size:.95rem}
.frame{width:64px;height:44px;border:3px solid currentColor;border-radius:8px;position:relative;transition:transform .35s}
.frame::after{content:"";position:absolute;inset:8px;border:3px solid currentColor;border-radius:50% 50% 0 0/100% 100% 0 0;border-bottom:0;transition:transform .35s}

.aishow{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:18px;align-items:center;margin-top:56px}
.aishow video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:14px;background:var(--card);box-shadow:0 18px 40px -20px #000}
.aishow+.aishow{margin-top:96px} .aishow:first-child{margin-top:0}
.aishow.flip{grid-template-columns:repeat(3,1fr) 1.3fr}
.aishow.flip>div{order:1;padding-left:12px}
.aishow video:nth-of-type(2){transform:translateY(28px)} /* sfalsa il video centrale */
@media (max-width:760px){.aishow{grid-template-columns:repeat(3,1fr)}.aishow>div{grid-column:1/-1;order:-1!important;padding-left:0!important}.aishow video:nth-of-type(2){transform:none}}
/* contatti */
.locs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:40px}
.loc{background:var(--panel);border-radius:14px;padding:28px 26px;border-left:4px solid var(--pink);
  transition:transform .3s,background .3s,box-shadow .3s}
.loc:hover{transform:translateX(6px);background:var(--card);box-shadow:0 14px 30px -16px #ff2e7e88}
.loc h3{font-size:1.35rem;margin-top:4px}
.loc p{color:var(--muted);font-size:.95rem;margin-top:10px}
.ico svg{width:1.05em;height:1.05em;vertical-align:-.15em;margin-right:.55em;fill:none;stroke:var(--pink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* dms banner */
.dms{margin:0 auto;max-width:1200px;border-radius:16px;overflow:hidden;display:grid;grid-template-columns:1fr 2fr;
  background:linear-gradient(90deg,#000,#2a0715 55%,#57081f)}
.dms .left{padding:48px 36px}
.dms .left h2{font-family:Archivo;font-weight:800;font-size:1.7rem}
.dms .noise{position:relative;overflow:hidden;display:flex;align-items:center}
.noise span{font-family:Anton,Impact,sans-serif;text-transform:uppercase;white-space:nowrap;
  font-size:5.2rem;line-height:.95;color:var(--pink)}
.noise .ghost{position:absolute;opacity:.28;font-size:7.5rem;top:-18px;left:-40px}
.noise .ghost2{position:absolute;opacity:.2;font-size:4rem;bottom:-8px;left:10px;color:#ff7eb0}

footer{border-top:1px solid #ffffff1a;margin-top:90px;padding:44px 0;color:var(--muted);font-size:.9rem}
.foot{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}
@media (max-width:760px){nav{display:none}.hright .socials{display:none}.dms{grid-template-columns:1fr}.noise{min-height:160px}}