/* Elevate Studios — nero e viola, come il logo. */
@font-face{font-family:"Inter Tight";src:url(fonts/inter-tight.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  /* tema chiaro "viola e giallo" (scelto il 09/10/2026): i nomi restano quelli
     di prima, ma ora --ink e' il fondo chiaro e --bone il testo scuro */
  --ink:#FAF8F5;--ink-2:#FFFFFF;--ink-3:#F2EDFA;--line:#E6E0EE;
  --bone:#1C1630;--bone-2:#4B4360;--mute:#6E6880;
  --vio:#6D3BFF;--vio-2:#7F52FF;--vio-lt:#6D3BFF;--vio-dk:#3E1784;
  --giallo:#FFD84D;--scuro:#1C1630;
  --vero:#1E6B3A;--vero-bg:#E3F4E8;
  --gut:20px;--max:1280px;--r:24px;
  --es-out:cubic-bezier(.16,1,.3,1);--es-inout:cubic-bezier(.87,0,.13,1);
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (min-width:760px){:root{--gut:40px}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
body{background:var(--ink);color:var(--bone);font:400 1.0625rem/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
ul,ol{list-style:none}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--vio-lt)}
::selection{background:var(--vio);color:#fff}
:focus-visible{outline:2px solid var(--vio-lt);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--vio);color:#fff;padding:10px 14px;border-radius:10px;font-weight:600}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- tipografia ---------- */
.mono{font:500 .75rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.kicker{font:500 .75rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--vio-lt);display:flex;flex-wrap:wrap;gap:.4em .9em;align-items:center}
.kicker b{font-weight:500;color:var(--mute)}
.h1{font-weight:800;font-size:clamp(3.1rem,13.2vw,6.6rem);line-height:.94;letter-spacing:-.045em}
.h2{font-weight:800;font-size:clamp(2.3rem,8.6vw,5rem);line-height:.98;letter-spacing:-.035em}
.h3{font-weight:700;font-size:clamp(1.7rem,6vw,2.6rem);line-height:1.04;letter-spacing:-.025em}
.h1 em,.h2 em,.h3 em{font-size:1.04em;letter-spacing:-.02em}
.lead{font-size:clamp(1.12rem,3.6vw,1.35rem);line-height:1.45;color:var(--bone-2);font-weight:500}
.body{color:var(--bone-2)}
.note{font:500 .72rem/1.5 var(--mono);letter-spacing:.04em;color:var(--mute)}

.ul{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .5s var(--es-out);padding-bottom:2px}
.ul:hover,.ul:focus-visible{background-size:100% 1.5px}
.arrow{display:inline-flex;align-items:center;gap:.5em;font-weight:600}
.arrow svg{width:1em;height:1em;transition:transform .45s var(--es-out)}
.arrow:hover svg{transform:translate(2px,-2px)}

/* ---------- pulsanti ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:54px;padding:0 26px;border-radius:999px;font-weight:700;font-size:1rem;letter-spacing:-.005em;transition:background-color .3s,color .3s,border-color .3s,transform .3s var(--es-out),box-shadow .3s}
.btn:active{transform:scale(.98)}
.btn--vio{background:var(--vio);color:#fff;box-shadow:0 12px 34px -12px rgba(122,54,216,.8)}
.btn--vio:hover{background:var(--vio-2);box-shadow:0 16px 40px -12px rgba(142,77,240,.9)}
.btn--line{border:1.5px solid var(--line);color:var(--bone)}
.btn--line:hover{border-color:var(--vio-lt)}
.btn--ink{background:var(--ink);color:var(--bone)}
.btn--ink:hover{background:var(--ink-3)}
.btn--white{background:#fff;color:var(--ink)}
.btn--white:hover{background:var(--bone)}
.btn small{font:500 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.btn svg{width:1.1em;height:1.1em}

/* ---------- etichette ---------- */
.tag{display:inline-flex;align-items:center;gap:.55em;font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:8px 11px;border-radius:8px;background:var(--line);color:var(--bone-2)}
.tag--vero{background:var(--vero-bg);color:var(--vero)}
.tag--vero::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--vero);animation:pulse 2.4s infinite}
.tag--vio{background:rgba(122,54,216,.18);color:var(--vio-lt)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(107,224,143,.55)}70%{box-shadow:0 0 0 8px rgba(107,224,143,0)}100%{box-shadow:0 0 0 0 rgba(107,224,143,0)}}

/* ---------- marchio ---------- */
.mark{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:.98rem;letter-spacing:.02em;text-transform:uppercase}
.mark-ico{width:30px;height:30px;flex:none}
.mark small{display:none;font:500 .6rem var(--mono);letter-spacing:.14em;color:var(--mute);margin-left:4px}
@media (min-width:1100px){.mark small{display:inline}}

/* ---------- barra in alto ---------- */
.top{position:fixed;inset:0 0 auto;z-index:50;transition:background-color .4s,border-color .4s;border-bottom:1px solid transparent}
.top.is-solid{background:rgba(10,9,16,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:66px}
.nav{display:none;gap:28px;font-weight:600;font-size:.95rem;color:var(--bone-2)}
.nav a:hover{color:var(--bone)}
@media (min-width:960px){.nav{display:flex}}
.top .btn{min-height:42px;padding:0 18px;font-size:.92rem}

/* ---------- telefono ---------- */
.phone{--pw:300px;position:relative;width:var(--pw);aspect-ratio:390/844;border-radius:calc(var(--pw)*.15);background:#050408;padding:calc(var(--pw)*.032);box-shadow:0 0 0 1.5px #2f2b3a inset,0 0 0 1px #000,0 50px 90px -20px rgba(0,0,0,.8);flex:none}
.phone::before{content:"";position:absolute;z-index:3;top:calc(var(--pw)*.058);left:50%;transform:translateX(-50%);width:28%;height:calc(var(--pw)*.078);border-radius:99px;background:#050408}
.phone .screen{position:relative;width:100%;height:100%;border-radius:calc(var(--pw)*.12);overflow:hidden;background:#050408;isolation:isolate;padding-top:calc(var(--pw)*.125)}
.phone video,.phone .screen>img{width:100%;height:100%;object-fit:cover;object-position:top}
.phone-cap{display:flex;align-items:center;gap:10px;margin-top:18px;justify-content:center;text-align:center;flex-wrap:wrap}
.screen-badge{position:absolute;z-index:4;left:calc(var(--pw)*.03);bottom:calc(var(--pw)*.012);padding:calc(var(--pw)*.018) calc(var(--pw)*.035);border-radius:99px;background:#1D1B19;color:#F3EEE6;font:500 calc(var(--pw)*.03)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;min-height:calc(var(--pw)*.1);display:flex;align-items:center}

/* ---------- HERO ---------- */
.hero{position:relative;padding:118px 0 40px;overflow:clip}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 70% 45%,#000 20%,transparent 75%);pointer-events:none}
.hero .wrap{position:relative;display:grid;gap:40px}
.hero .h1{margin-top:22px}
.ln{display:block;overflow:hidden;clip-path:inset(0 -30% -.02em -30%);padding-bottom:.06em;margin-bottom:-.06em}
.ln>span{display:inline-block}
.ln>.rot{display:inline-grid;vertical-align:bottom}
.rot-w{grid-area:1/1;white-space:nowrap;font-family:var(--serif);font-style:italic;font-weight:400;color:var(--vio-lt);letter-spacing:-.02em;font-size:1.06em;transform:translateY(105%);opacity:0;transition:transform .8s var(--es-out),opacity .5s}
.rot-w.is-on{transform:none;opacity:1}
.rot-w.is-out{transform:translateY(-105%);opacity:0;transition:transform .8s var(--es-out),opacity .3s}
.hero .lead{margin-top:26px;max-width:40ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-cta .btn--vio{flex:1 1 auto}
@media (min-width:460px){.hero-cta .btn--vio{flex:0 0 auto}}
.trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px}
.trust li{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.92rem;color:var(--bone-2)}
.trust svg{width:17px;height:17px;color:var(--vio-lt);flex:none}

.fan{position:relative;height:calc(var(--cw)*844/390 + 30px);--cw:min(56vw,300px);margin-top:10px}
.fan .phone{--pw:var(--cw)}
.fp{position:absolute;left:50%;top:0}
.fp-c{transform:translateX(-50%);z-index:3}
.fp-l{transform:translateX(-50%) translateX(-58%) translateY(7%) rotate(-9deg) scale(.84);z-index:2}
.fp-r{transform:translateX(-50%) translateX(58%) translateY(7%) rotate(9deg) scale(.84);z-index:2}
.fan-layer:first-of-type{z-index:1}
.fan-layer+.fan-layer{z-index:2}
.fp-l .screen>img,.fp-r .screen>img{filter:brightness(.78)}
.fan-glow{position:absolute;left:50%;top:45%;width:130%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(122,54,216,.45),rgba(122,54,216,.12) 55%,transparent 72%);pointer-events:none;z-index:0}
.fan-layer{position:absolute;inset:0}
.chip{position:absolute;z-index:5}
.chip-in{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;background:rgba(19,17,25,.95);border:1px solid var(--line);box-shadow:0 20px 40px -18px rgba(0,0,0,.85);white-space:nowrap;font-size:.8rem;line-height:1.25}
.chip b{display:block;font-weight:700;color:var(--bone);font-size:.84rem}
.chip span{color:var(--mute)}
.chip i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--vio);color:#fff;flex:none}
.chip i svg{width:17px;height:17px}
.chip i.ok{background:var(--vero-bg);color:var(--vero)}
.chip-a{left:0;top:6%}
.chip-b{right:0;top:36%}
.chip-c{left:0;bottom:22%}
.chip-d{right:2%;bottom:5%}
@media (max-width:520px){.chip-in{font-size:.7rem;padding:7px 10px 7px 7px;gap:8px}.chip b{font-size:.74rem}.chip i{width:26px;height:26px;border-radius:8px}.chip i svg{width:14px;height:14px}.chip-c{display:none}.chip-a{left:-6px}.chip-b{right:-6px}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.floaty{animation:bob 6s ease-in-out infinite}
.floaty.d2{animation-delay:-2s}.floaty.d3{animation-delay:-4s}.floaty.d4{animation-delay:-1s}
@media (min-width:1000px){
  .hero{padding:140px 0 60px;min-height:100svh;display:flex;align-items:center}
  .hero .wrap{grid-template-columns:1.2fr .8fr;align-items:center;gap:30px}
  .fan{--cw:270px;margin-top:0}
  .chip{font-size:.84rem}
  .chip-a{left:-4%}
  .chip-b{right:-6%}
}

/* ---------- fascia che scorre ---------- */
.band{position:relative;z-index:2;padding:34px 0 30px;overflow:hidden}
.band-in{background:var(--vio);transform:rotate(-2.2deg);margin-inline:-3%;padding:18px 0;box-shadow:0 30px 60px -30px rgba(122,54,216,.7)}
.band-track{display:flex;width:max-content;animation:marq 38s linear infinite}
.band-track span{display:flex;align-items:center;gap:.5em;padding-right:.5em;font-weight:800;font-size:clamp(1.8rem,6.4vw,4rem);letter-spacing:-.035em;line-height:1;color:#fff;white-space:nowrap}
.band-track em{color:#fff;font-size:1.06em}
.band-track svg{width:.62em;height:.62em;flex:none;color:var(--ink)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- sezioni ---------- */
.sec{padding:96px 0}
@media (min-width:960px){.sec{padding:140px 0}}
.sec-head{display:grid;gap:22px;margin-bottom:48px}
.sec-head .h2{max-width:17ch}
.sec-head .lead{max-width:46ch}
@media (min-width:960px){.sec-head{grid-template-columns:1.15fr .85fr;align-items:end;gap:40px;margin-bottom:72px}.sec-head .kicker{grid-column:1/-1}}

/* ---------- 01 servizi ---------- */
.svc{display:grid;gap:18px}
.svc-item{position:relative;background:var(--ink-2);border:1px solid var(--line);border-radius:28px;padding:26px 22px;display:grid;gap:28px;overflow:hidden}
.svc-num{font:400 3.6rem/.8 var(--serif);font-style:italic;color:var(--vio-lt)}
.svc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.svc-text .h3{margin-top:18px}
.svc-text .body{margin-top:14px;max-width:50ch}
.checks{margin-top:22px;display:grid;gap:10px}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-weight:500;color:var(--bone)}
.checks li::before{content:"";width:14px;height:8px;margin-top:.45em;border-left:2px solid var(--vio-lt);border-bottom:2px solid var(--vio-lt);transform:rotate(-45deg)}
.for{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);color:var(--mute);font-size:.95rem}
.for b{color:var(--bone-2);font-weight:600}
.work-links{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:24px}
.svc-media{display:flex;justify-content:center;align-items:center;position:relative;min-height:200px}
.svc-media::before{content:"";position:absolute;inset:6% 4%;background:radial-gradient(closest-side,rgba(122,54,216,.3),transparent 70%);pointer-events:none}
.svc-media .phone{--pw:min(62vw,290px)}
.stat{display:flex;align-items:baseline;gap:14px;margin-top:24px;padding:16px 18px;background:var(--ink);border-radius:16px;border:1px solid var(--line)}
.stat strong{font:400 3.2rem/.8 var(--serif);font-style:italic;color:var(--vio-lt)}
.stat span{font-weight:500;color:var(--bone-2);line-height:1.35}
@media (min-width:960px){
  .svc{gap:22px}
  .svc-item{grid-template-columns:1fr 1fr;padding:48px;gap:48px;align-items:center}
  .svc-item:nth-child(even) .svc-media{order:-1}
  .svc-media .phone{--pw:300px}
}

/* ventaglio di schermate */
.stack{position:relative;width:min(100%,460px);aspect-ratio:1/1.05}
.stack img{position:absolute;top:50%;left:50%;width:46%;height:auto;aspect-ratio:390/844;object-fit:cover;border-radius:18px;border:1px solid var(--line);box-shadow:0 30px 60px -24px rgba(0,0,0,.85);transition:transform 1.1s var(--es-out)}
.js:not(.no-anim) .stack:not(.is-open) .st1{transform:translate(-50%,-50%) rotate(-3deg) scale(.9)}
.js:not(.no-anim) .stack:not(.is-open) .st3{transform:translate(-50%,-50%) rotate(3deg) scale(.9)}
.stack .st1{transform:translate(-50%,-50%) translateX(-62%) rotate(-10deg) scale(.9)}
.stack .st2{transform:translate(-50%,-50%);z-index:2}
.stack .st3{transform:translate(-50%,-50%) translateX(62%) rotate(10deg) scale(.9)}
.stack.is-open:hover .st1,.no-anim .stack:hover .st1{transform:translate(-50%,-50%) translateX(-70%) rotate(-13deg) scale(.9)}
.stack.is-open:hover .st3,.no-anim .stack:hover .st3{transform:translate(-50%,-50%) translateX(70%) rotate(13deg) scale(.9)}

/* chat automatica */
.chat{position:relative;width:min(100%,380px);background:#0E0C14;border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(0,0,0,.85)}
.chat-top{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--ink-3)}
.chat-av{width:38px;height:38px;border-radius:50%;background:#1f1d24;display:grid;place-items:center;font-weight:800;color:#fff;border:1px solid var(--line)}
.chat-top b{display:block;font-weight:700;font-size:.95rem}
.chat-top small{display:flex;align-items:center;gap:6px;color:var(--vero);font-size:.78rem}
.chat-top small::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--vero)}
.chat-time{margin-left:auto;font:500 .72rem var(--mono);color:var(--mute)}
.chat-body{display:flex;flex-direction:column;gap:9px;padding:18px 14px 20px;min-height:330px}
.msg{max-width:84%;padding:10px 13px;border-radius:16px;font-size:.92rem;line-height:1.35}
.msg--in{align-self:flex-start;background:#23202c;border-bottom-left-radius:5px}
.msg--out{align-self:flex-end;background:var(--vio);color:#fff;border-bottom-right-radius:5px}
.msg--out small{display:block;margin-top:4px;font:500 .62rem var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.msg--sys{align-self:center;max-width:none;background:var(--vero-bg);color:var(--vero);font:500 .7rem var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border-radius:99px;margin-top:6px}
.js:not(.no-anim) .chat .msg{opacity:0;transform:translateY(10px) scale(.97)}
.js:not(.no-anim) .chat.is-play .msg{animation:msgIn .55s var(--es-out) forwards;animation-delay:calc(var(--d)*1.05s + .2s)}
@keyframes msgIn{to{opacity:1;transform:none}}

/* reel */
.reels{display:flex;gap:14px;justify-content:center;align-items:flex-end}
.reel{position:relative;width:min(64vw,270px);aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#000;border:1px solid var(--line);box-shadow:0 30px 60px -24px rgba(0,0,0,.85);flex:none}
.reel video{width:100%;height:100%;object-fit:cover}
.reel--b{display:none}
.reel-sound{position:absolute;right:10px;bottom:10px;z-index:2;display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:99px;background:rgba(10,9,16,.78);color:#fff;font:600 .78rem var(--sans);border:1px solid rgba(255,255,255,.15)}
.reel-sound svg{width:16px;height:16px}
.reel-sound .on{display:none}
.reel-sound[aria-pressed="true"] .on{display:block}
.reel-sound[aria-pressed="true"] .off{display:none}
.reel-cap{position:absolute;left:10px;top:10px;z-index:2}
@media (min-width:1200px){.reel{width:230px}.reel--b{display:block;transform:translateY(-30px)}}

/* ---------- 02 provalo (la firma) ---------- */
.provalo{background:var(--vio);color:#fff;overflow:hidden;position:relative}
.provalo::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:56px 56px;pointer-events:none}
.provalo .wrap{position:relative;display:grid;gap:40px}
.provalo em{color:#fff}
.provalo .kicker{color:#fff}
.provalo .kicker b{color:rgba(255,255,255,.6)}
.provalo .lead{color:rgba(255,255,255,.86);margin-top:20px;max-width:40ch}
.provalo .h2{margin-top:20px;max-width:13ch}
.hints{display:grid;gap:12px;counter-reset:h}
.hints li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;font-weight:600;font-size:1.05rem;line-height:1.3}
.hints li::before{counter-increment:h;content:counter(h);width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--vio-lt);display:grid;place-items:center;font:500 .8rem var(--mono)}
.provalo .work-links{margin-top:30px}
.provalo .note{color:rgba(255,255,255,.72);margin-top:22px;max-width:52ch}
.provalo-media{display:flex;justify-content:center}
.provalo .phone{--pw:min(88vw,350px);box-shadow:0 0 0 1.5px #2f2b3a inset,0 0 0 1px #000,0 60px 90px -30px rgba(20,4,50,.7)}
.phone .bc-foot{padding-bottom:1.5em}
@media (min-width:960px){
  .provalo .wrap{grid-template-columns:1fr 1fr;grid-template-areas:"head media" "more media";gap:36px 40px}
  .provalo-head{grid-area:head;align-self:end}
  .provalo-more{grid-area:more;align-self:start}
  .provalo-media{grid-area:media;align-self:center}
  .provalo .phone{--pw:370px}
}

/* ---------- 03 concept ---------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gut));padding:4px var(--gut) 10px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.card{scroll-snap-align:center;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column}
.card-media{display:flex;justify-content:center;padding:18px 0 26px;margin:-22px -22px 18px;background:radial-gradient(120% 90% at 50% 0%,rgba(122,54,216,.28),transparent 60%),var(--ink-3);border-radius:var(--r) var(--r) 0 0;border-bottom:1px solid var(--line)}
.card .phone{--pw:min(52vw,220px)}
.card .h3{font-size:1.7rem;margin-top:14px}
.card .body{margin-top:10px;font-size:1rem}
.card .work-links{margin-top:auto;padding-top:20px}
.card--text{background:var(--vio-dk);border-color:#5a2cb0}
.card--text .body{color:rgba(255,255,255,.82)}
.card--text .big{font-weight:800;font-size:2.4rem;line-height:.98;letter-spacing:-.03em;margin:18px 0 6px}
.card--text .big em{color:#fff}
.rail-hint{display:flex;align-items:center;gap:12px;color:var(--vio-lt);margin-top:14px}
.rail-hint::after{content:"";width:46px;height:1.5px;background:currentColor}
@media (min-width:960px){
  .rail{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;margin:0;padding:0}
  .card .phone{--pw:230px}
  .rail-hint{display:none}
}

/* ---------- 04 come funziona ---------- */
.steps{display:grid;gap:14px;counter-reset:s}
.steps li{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;display:grid;gap:10px;align-content:start}
.steps li::before{counter-increment:s;content:counter(s);width:46px;height:46px;border-radius:50%;background:var(--vio);color:#fff;font:800 1.3rem/46px var(--sans);text-align:center;margin-bottom:8px}
.steps h3{font-size:1.35rem;font-weight:700;letter-spacing:-.015em;line-height:1.15}
.steps p{color:var(--bone-2);font-size:1rem}
@media (min-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}}

/* ---------- 05 perché ---------- */
.why{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.why li{background:var(--ink);padding:28px 22px}
.why svg{width:30px;height:30px;color:var(--vio-lt)}
.why h3{margin-top:16px;font-size:1.3rem;font-weight:700;letter-spacing:-.015em}
.why p{margin-top:8px;color:var(--bone-2);font-size:1rem}
@media (min-width:760px){.why{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.why{grid-template-columns:repeat(4,1fr)}}
.founder{margin-top:56px;display:grid;gap:18px;max-width:880px}
.founder p{font-size:clamp(1.2rem,3.8vw,1.7rem);line-height:1.38;font-weight:500;letter-spacing:-.012em}
.founder p em{font-size:1.08em}
.founder .sign{display:flex;align-items:center;gap:14px}
.founder .sign em{font-size:1.9rem;color:var(--bone)}

/* ---------- 06 domande ---------- */
.faq{border-top:1px solid var(--line);max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-weight:700;font-size:clamp(1.15rem,3.8vw,1.45rem);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--vio-lt),var(--vio-lt)) center/100% 2px no-repeat,linear-gradient(var(--vio-lt),var(--vio-lt)) center/2px 100% no-repeat;transition:transform .4s var(--es-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 26px;color:var(--bone-2);max-width:62ch}

/* ---------- 07 contatti ---------- */
.contact{background:var(--bone);color:var(--ink);color-scheme:light}
.contact em{color:var(--vio)}
.contact .kicker{color:var(--vio)}
.contact .kicker b{color:#6E6880}
.contact .lead{color:#3A3546;margin-top:20px;max-width:36ch}
.contact .h2{margin-top:20px;max-width:12ch;font-size:clamp(2.6rem,10vw,5.8rem)}
.contact .wrap{display:grid;gap:48px}
.contact-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.contact .btn--line{border-color:#D6D0E2;color:var(--ink)}
.contact .btn--line:hover{border-color:var(--vio)}
.contact-list{margin-top:34px;display:grid;gap:1px;background:#DCD6E6;border:1px solid #DCD6E6;border-radius:18px;overflow:hidden;max-width:540px}
.contact-list li{background:var(--bone);padding:16px 18px;display:flex;justify-content:space-between;gap:14px;align-items:baseline;flex-wrap:wrap}
.contact-list span{font:500 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#6E6880}
.contact-list a,.contact-list b{font-weight:600;word-break:break-word}
.form{background:#fff;border-radius:var(--r);padding:26px 22px;box-shadow:0 30px 60px -30px rgba(40,20,80,.3);align-self:start}
.form h3{font-size:1.4rem;font-weight:700;letter-spacing:-.015em;line-height:1.2}
.form .intro{color:#57516A;margin-top:8px;font-size:.98rem}
.pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;border:0}
.pick legend{font:500 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#57516A;margin-bottom:10px;width:100%}
.pick label{position:relative}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick span{display:inline-block;padding:10px 14px;border-radius:99px;border:1.5px solid #DCD6E6;font-weight:600;font-size:.92rem;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.pick input:checked+span{background:var(--vio);border-color:var(--vio);color:#fff}
.pick input:focus-visible+span{outline:2px solid var(--vio);outline-offset:2px}
.field{display:grid;gap:7px;margin-top:18px}
.field label{font:500 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#57516A}
.field input,.field textarea{width:100%;border:1.5px solid #DCD6E6;background:#FAF9FC;border-radius:12px;padding:14px;font-size:1rem;color:var(--ink);transition:border-color .25s}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--vio)}
.form .btn{width:100%;margin-top:22px}
.form .note{color:#6E6880;margin-top:14px;font-size:.72rem}
.form-ok{margin-top:14px;font-weight:600;color:#1E6B3A}
@media (min-width:960px){.contact .wrap{grid-template-columns:1.05fr .95fr;gap:80px;align-items:start}.form{padding:34px}}

/* ---------- footer ---------- */
.foot{padding:72px 0 110px;border-top:1px solid var(--line);overflow:hidden}
.foot .wrap{display:grid;gap:30px}
.foot-mark{font-weight:800;font-size:clamp(3rem,14.5vw,11.5rem);line-height:.86;letter-spacing:-.05em;text-transform:uppercase}
.foot-mark span{color:var(--vio-lt)}
.foot-tag{font:500 .8rem var(--mono);letter-spacing:.2em;color:var(--vio-lt)}
.foot-row{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center}
.social{display:flex;flex-wrap:wrap;gap:10px}
.social a{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border:1.5px solid var(--line);border-radius:999px;font-weight:600;font-size:.92rem;transition:border-color .3s}
.social a:hover{border-color:var(--vio-lt)}
.social svg{width:17px;height:17px}
@media (min-width:960px){.foot{padding-bottom:72px}}

/* ---------- invito fisso (telefono) ---------- */
.cta-float{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));z-index:40;transform:translate(-50%,160%);transition:transform .6s var(--es-out);white-space:nowrap}
.cta-float.is-on{transform:translate(-50%,0)}
@media (min-width:960px){.cta-float{display:none}}

/* ---------- pagine secondarie ---------- */
.page{padding:120px 0 80px}
.page .h2{margin-top:18px;max-width:18ch}
.page .lead{margin-top:18px;max-width:52ch}
.legal{max-width:720px;margin-top:48px}
.legal h2{font-size:1.35rem;font-weight:700;letter-spacing:-.015em;margin:44px 0 12px}
.legal p{color:var(--bone-2);margin-top:12px}
.legal ul.sum{display:grid;gap:10px;margin-top:26px;padding:22px;background:var(--ink-2);border:1px solid var(--line);border-radius:18px}
.legal ul.sum li{font-weight:600}
.legal ul.sum b{color:var(--vio-lt);font-weight:600}
.legal a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}

/* ---------- /prova ---------- */
.prova{padding:92px 0 64px}
.prova-intro .h2{margin-top:14px;font-size:clamp(2rem,7.4vw,3.6rem);max-width:16ch}
.prova-intro .lead{margin-top:14px;max-width:46ch;font-size:1.05rem}
.prova-app{margin:26px auto 0;padding-inline:12px;max-width:430px}
.prova-app .phone{--pw:100%;width:100%;aspect-ratio:auto;height:min(calc(100svh - 84px),780px);border-radius:30px;padding:0;box-shadow:0 0 0 1px var(--line),0 40px 80px -30px rgba(0,0,0,.7)}
.prova-app .phone::before{display:none}
.prova-app .screen{border-radius:30px;padding-top:0}
.prova-app .bc{--bc-fs:15px}
.prova-after{margin-top:28px;display:grid;gap:22px;justify-items:start}
.prova-after .note{max-width:60ch}
@media (min-width:760px){
  .prova{padding:130px 0 90px}
  .prova-intro{text-align:center;display:grid;justify-items:center}
  .prova-intro .kicker{justify-content:center}
  .prova-app .phone{--pw:390px;width:390px;aspect-ratio:390/844;height:auto;border-radius:calc(var(--pw)*.15);padding:calc(var(--pw)*.032);box-shadow:0 0 0 1.5px #2f2b3a inset,0 0 0 1px #000,0 50px 90px -20px rgba(0,0,0,.75)}
  .prova-app .phone::before{display:block}
  .prova-app .screen{border-radius:calc(var(--pw)*.12);padding-top:calc(var(--pw)*.125)}
  .prova-app .bc{--bc-fs:14px}
  .prova-app{max-width:none;display:flex;justify-content:center;margin-top:44px}
  .prova-after{justify-items:center;text-align:center}
}

/* ---------- movimento ---------- */
.js:not(.no-anim) [data-reveal]{opacity:0;transform:translateY(40px)}
.js:not(.no-anim):not(.is-ready) .hero-anim{opacity:0}
.no-anim [data-reveal],.no-anim .hero-anim{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .band-track{transform:none}
}

@view-transition{navigation:auto}
::view-transition-old(root){animation:.5s var(--es-inout) both vt-old}
::view-transition-new(root){animation:.6s var(--es-inout) both vt-new}
@keyframes vt-old{to{opacity:.4;transform:translateY(-4%)}}
@keyframes vt-new{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ---------- pagina presentazione (prezzi, avatar) ---------- */
.avatar{width:84px;height:84px;border-radius:50%;background:linear-gradient(145deg,var(--vio),var(--vio-dk));display:flex;align-items:center;justify-content:center;font:400 2.1rem var(--serif);font-style:italic;color:#fff;flex-shrink:0;overflow:hidden}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.founder-row{display:flex;gap:18px;align-items:center;margin-bottom:22px}

.pricing{display:grid;gap:18px}
@media (min-width:760px){.pricing{grid-template-columns:1fr 1fr}}
.price-card{position:relative;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;display:flex;flex-direction:column}
.price-card--top{box-shadow:0 0 0 1.5px var(--vio) inset}
.price-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.price-card .h3{margin-top:16px}
.price-num{display:flex;align-items:baseline;gap:10px;margin-top:20px;flex-wrap:wrap}
.price-num strong{font:400 3.2rem/.8 var(--serif);font-style:italic;color:var(--vio-lt)}
.price-num del{color:var(--mute);font-size:1.15rem}
.price-num small{display:block;width:100%;margin-top:6px;color:var(--mute);font:500 .78rem/1.4 var(--mono);letter-spacing:.04em;text-transform:none}
.price-card .checks{margin-top:22px;flex:1}
.price-card .for{margin-top:18px}
.price-card .btn{margin-top:24px;width:100%}

@media (min-width:1000px){.hero--solo .wrap{grid-template-columns:1fr}.hero--solo .hero-text{width:fit-content;max-width:100%;margin-inline:auto}}

.pitch .sec-head{max-width:760px}
@media (min-width:860px){.pitch .sec-head{margin-inline:auto}}

.nav--always{display:flex!important;gap:14px;font-size:.76rem;overflow-x:auto;scrollbar-width:none;flex:1;margin:0 10px}
.nav--always::-webkit-scrollbar{display:none}
.nav--always a{white-space:nowrap}
@media (min-width:600px){.nav--always{font-size:.9rem;gap:24px;flex:none;overflow:visible;margin:0}}
@media (max-width:599px){.top--pitch .mark-text{display:none}}

/* ---------- tema chiaro: correzioni delle regole pensate per il nero (prova 09/10/2026) ---------- */
::selection{background:var(--giallo);color:var(--scuro)}
.top.is-solid{background:rgba(250,248,245,.9)}
.hero::before{background-image:linear-gradient(rgba(28,22,48,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(28,22,48,.05) 1px,transparent 1px)}
.evid{background:linear-gradient(transparent 52%,var(--giallo) 52%,var(--giallo) 90%,transparent 90%);padding:0 .08em;margin:0 -.08em}
.fan-glow{background:radial-gradient(closest-side,rgba(109,59,255,.22),rgba(255,216,77,.16) 55%,transparent 72%)}
.fp-l .screen>img,.fp-r .screen>img{filter:none}
.chip-in{background:#fff;box-shadow:0 18px 36px -18px rgba(40,20,80,.35)}
.btn--vio{box-shadow:0 12px 30px -12px rgba(109,59,255,.55)}
.btn--white{color:var(--scuro)}
.btn--white:hover{background:var(--giallo)}
.btn--ink{background:var(--scuro);color:#fff}
.tag{background:#EFEAF5}
.tag--vio{background:rgba(109,59,255,.1);color:var(--vio)}
.band-in{box-shadow:0 24px 50px -30px rgba(109,59,255,.6)}
.band-track em{color:var(--giallo)}
.band-track svg{color:var(--giallo)}
.card-media{background:radial-gradient(120% 90% at 50% 0%,rgba(109,59,255,.16),transparent 60%),var(--ink-3)}
.card{box-shadow:0 18px 40px -30px rgba(40,20,80,.35)}
.card--text{background:var(--vio-dk);border-color:var(--vio-dk);color:#fff}
.card--text .big em{color:var(--giallo)}
.card--text .arrow{color:#fff}
.reel{box-shadow:0 30px 60px -30px rgba(40,20,80,.45)}
.provalo em{color:var(--giallo)}
.hints li::before{background:#fff;color:var(--vio)}
.provalo .btn--white:hover{background:var(--giallo)}
.contact{background:var(--ink-3);color:var(--scuro);color-scheme:light}
.contact .btn--line{border-color:#D6D0E2;color:var(--scuro)}
.contact-list{background:var(--line);border-color:var(--line)}
.contact-list li{background:#fff}
.field input,.field textarea{color:var(--scuro)}
.price-card--top{box-shadow:0 0 0 2px var(--vio) inset,0 24px 50px -30px rgba(109,59,255,.45)}
.price-card--top::before{content:"Consigliato per i locali";position:absolute;top:-12px;right:22px;background:var(--giallo);color:var(--scuro);font:500 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:8px}
.prezzi{background:var(--ink-3)}
.prezzi .price-card{box-shadow:0 18px 40px -30px rgba(40,20,80,.35)}
.lavori{padding-top:24px}
/* servizi corti: 4 schede da scorrere sul telefono, in griglia sul computer */
.svc-card .svc-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.svc-card .h3{margin-top:12px}
@media (min-width:960px){.svc-rail{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);grid-auto-columns:auto;overflow:visible;margin-inline:0;padding-inline:0}.svc-rail+.rail-hint{display:none}}