/* MS Copyworks — sito in nero, direzione «Luce» (da design/luce.css) */

/* ---------- Poppins, caricato dai file del sito (OFL in /font) ---------- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../font/poppins-regular.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:italic;font-weight:400;font-display:swap;src:url(../font/poppins-italic.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../font/poppins-medium.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../font/poppins-semibold.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../font/poppins-bold.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(../font/poppins-extrabold.woff2) format('woff2')}

:root{
  --nero:#041414;
  --pet:#0D3B3B;
  --tq:#4FC7C7;
  --tq-h:#73D4D4;
  --tq2:#14807E;
  --white:#FFFFFF;
  --w80:rgba(255,255,255,.8);
  --w60:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.1);
  --pad:clamp(20px,5vw,64px);
  --wrap:1280px;
  --sec:clamp(80px,9vw,128px);
  --sec-m:clamp(64px,7vw,104px);
  --r-m:16px;
  --r-l:24px;
  --r-xl:32px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* passaggio tra le pagine: dissolvenza breve, dove il browser la sa fare */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}

/* ---------- base ---------- */
html{-webkit-text-size-adjust:100%;color-scheme:dark;scrollbar-color:#14807E #041414}
body{margin:0;background:#041414}
body.no-scroll{overflow:hidden}
[hidden]{display:none!important}
.nb{position:relative;width:100%;background:var(--nero);color:var(--white);font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:clip;isolation:isolate}
.nb *,.nb *::before,.nb *::after{box-sizing:border-box}
.nb h1,.nb h2,.nb h3,.nb p,.nb figure,.nb ul{margin:0}
.nb ul{padding:0;list-style:none}
.nb img,.nb svg{display:block}
.nb :where(a){color:inherit}
.nb ::selection{background:var(--tq);color:var(--nero)}
.nb :is(a,button):focus-visible{outline:3px solid var(--tq);outline-offset:3px;border-radius:10px}
.bg-tq :is(a,button):focus-visible,.bg-white :is(a,button):focus-visible{outline-color:var(--nero)}
.nb-grana{position:fixed;inset:0;z-index:40;pointer-events:none;background-image:url(../img/grana.png);background-size:200px 200px;opacity:.5}
.nb-wrap{position:relative;width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sec{position:relative;padding-top:var(--sec);padding-bottom:var(--sec)}
.sec-m{position:relative;padding-top:var(--sec-m);padding-bottom:var(--sec-m)}
.glow{position:absolute;pointer-events:none;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(20,128,126,.34),rgba(13,59,59,.18) 45%,transparent 72%)}

/* le animazioni in loop (schermi delle ads, feed, loghi) si fermano fuori dallo schermo */
.is-paused,.is-paused *{animation-play-state:paused!important}

/* ---------- caratteri: 8 dimensioni in tutto ---------- */
.t-h1{font-size:clamp(46px,5.7vw,86px);line-height:.98;font-weight:800;letter-spacing:-.048em;text-wrap:balance}
.t-h2{font-size:clamp(38px,4.6vw,66px);line-height:1.02;font-weight:800;letter-spacing:-.042em;text-wrap:balance}
.t-h3{font-size:clamp(23px,2.1vw,30px);line-height:1.2;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.t-lead{font-size:clamp(18px,1.45vw,21px);line-height:1.5;font-weight:500;color:var(--w80);text-wrap:pretty}
.t-body{font-size:clamp(17px,1.2vw,18px);line-height:1.65;font-weight:400;color:var(--w80);text-wrap:pretty}
.t-small{font-size:14px;line-height:1.55;font-weight:400;color:var(--w60)}
.t-num{font-size:clamp(64px,7.4vw,112px);line-height:.92;font-weight:800;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.t-mark{font-size:clamp(34px,11.2vw,160px);line-height:.95;font-weight:800;letter-spacing:-.05em}
.metal{background:linear-gradient(180deg,#FFFFFF 0%,#DCE6E6 42%,#93A8A8 76%,#647A7A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.tq{color:var(--tq)}
.white{color:var(--white)}
.b{font-weight:700;color:var(--white)}
.measure{max-width:36em}

/* ---------- barra in alto ---------- */
.nb-top{position:sticky;top:0;z-index:30;background:rgba(4,20,20,.92);border-bottom:1px solid rgba(255,255,255,.06)}
.nb-top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px}
.nb-brand{display:inline-flex;align-items:center;text-decoration:none}
.nb-brand img{height:36px;width:auto}
.nb-nav{display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.nb-nav a{font-size:14px;font-weight:500;color:var(--w80);text-decoration:none;padding:10px 18px;border-radius:999px;transition:color .18s ease,background-color .18s ease}
.nb-nav a:hover{color:var(--white)}
.nb-nav a.is-cur{background:rgba(255,255,255,.1);color:var(--white)}
.nb-top-m{display:flex;align-items:center;gap:8px}
.nb-menu{width:44px;height:44px;flex:none;padding:0;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--white);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .16s var(--ease),background-color .18s ease}
.nb-menu:hover{background:rgba(255,255,255,.1)}
.nb-menu:active{transform:scale(.94)}

/* menu a tutto schermo sul telefono */
.sheet{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;padding:0 var(--pad) 28px;background:rgba(4,20,20,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:sheet-in .35s var(--ease) both}
.sheet::before{content:'';position:absolute;left:50%;bottom:-30%;width:150%;aspect-ratio:1;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(20,128,126,.4),transparent 70%);pointer-events:none}
.sheet-top{position:relative;display:flex;align-items:center;justify-content:space-between;height:68px}
.sheet-nav{position:relative;display:flex;flex-direction:column;gap:4px;margin-top:28px}
.sheet-nav a{font-size:clamp(38px,4.6vw,66px);line-height:1.15;font-weight:800;letter-spacing:-.042em;color:var(--white);text-decoration:none;padding:6px 0}
.sheet-nav a.is-cur{color:var(--tq)}
.sheet .nb-btn{position:relative;margin-top:auto;width:100%}
@keyframes sheet-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* ---------- pulsanti ---------- */
.nb-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:0 30px;border-radius:999px;background:var(--tq);color:var(--nero);font-family:inherit;font-size:clamp(17px,1.2vw,18px);font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;box-shadow:0 0 0 1px rgba(79,199,199,.5),0 18px 50px -12px rgba(79,199,199,.6);transition:transform .16s var(--ease),background-color .18s ease}
.nb-btn:hover{background:var(--tq-h)}
.nb-btn:active{transform:scale(.97)}
.nb-btn svg{flex:none;transition:transform .22s var(--ease)}
.nb-btn:hover svg{transform:translateX(4px)}
.nb-btn-s{min-height:44px;padding:0 20px;font-size:14px;box-shadow:none}
.nb-btn-ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.nb-btn-ghost:hover{background:rgba(255,255,255,.06)}

.only-m{display:none!important}
@media (max-width:760px){
  .only-d{display:none!important}
  .only-m{display:flex!important}
  .nb-top-in{height:68px}
  .nb-brand img{height:32px}
}


/* ---------- fila dei loghi ---------- */
.nb-logos{display:flex;flex-direction:column;gap:14px;min-width:0}
.nb-marq{overflow:hidden;width:100%;max-width:560px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.nb-marq-track{display:flex;width:max-content;animation:nb-marq 52s linear infinite}
.nb-marq-set{display:flex;align-items:center;gap:44px;padding-right:44px}
.nb-marq-set img{width:auto;opacity:.72}
.lg-ap{height:21px}
.lg-fi{height:34px}
.lg-nm{height:30px}
.lg-sp{height:24px}
.lg-vl{height:24px}
@keyframes nb-marq{to{transform:translateX(-50%)}}
/* AP Sales sta a parte, sotto la fila: non è un cliente, è l'agenzia con cui abbiamo collaborato */
.nb-ap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;max-width:560px;padding:16px 18px;border-radius:var(--r-m);background:rgba(255,255,255,.04);border:1px solid var(--line)}
.nb-ap .lg-ap{flex:none;width:auto;opacity:.9}
.nb-ap p{flex:1 1 15em;min-width:0}

/* ---------- requisito dei 1.500 € al mese: deve vedersi subito (Michael, 22/10/2026) ---------- */
.cta-req{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.req{display:flex;align-items:center;gap:12px;max-width:34em;margin:0;padding:11px 16px 11px 11px;border-radius:14px;background:rgba(79,199,199,.08);border:1px solid rgba(79,199,199,.32);font-size:clamp(15px,1.1vw,16px);line-height:1.45;font-weight:500;color:var(--white);text-wrap:pretty}
.req-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(79,199,199,.16);color:var(--tq)}
.req strong{font-weight:700;color:var(--tq);white-space:nowrap}
.req-forte{margin:0;font-size:clamp(20px,1.75vw,24px);line-height:1.42;font-weight:600;color:var(--white);text-wrap:pretty}
.bg-tq .req-forte{color:var(--nero)}
.evid{padding:.04em .34em;border-radius:8px;background:var(--nero);color:var(--tq);white-space:nowrap;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- schermi delle ads, con i video veri dei clienti ---------- */
.ad{position:absolute;inset:0;overflow:hidden}
.ad-1{background:radial-gradient(120% 80% at 28% 18%,#2BA3A1 0%,#14807E 30%,#0D3B3B 64%,#041414 100%)}
.ad-2{background:radial-gradient(130% 80% at 72% 26%,#24706E 0%,#0D3B3B 46%,#041414 100%)}
.ad-3{background:radial-gradient(120% 90% at 50% 8%,#8AE0E0 0%,#4FC7C7 26%,#14807E 62%,#0D3B3B 100%)}
.ad-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* un velo scuro in alto e in basso, perché barre e nome restino leggibili sopra il video */
.ad::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,20,20,.4) 0%,rgba(4,20,20,0) 20%,rgba(4,20,20,0) 56%,rgba(4,20,20,.8) 100%)}
/* su iPhone col risparmio energetico i video non partono: resta la copertina, senza il tasto play */
.ad-vid::-webkit-media-controls{display:none!important}
.ad-vid::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.ad-bars{position:absolute;top:14px;left:14px;right:14px;z-index:2;display:flex;gap:5px}
.ad-bar{flex:1 1 0;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.ad-bar i{display:block;height:100%;background:var(--white);transform-origin:left;transform:scaleX(0)}
.ad-bar.is-on i{animation:ad-prog 4s linear infinite}
.ad-bar.is-done i{transform:scaleX(1)}
@keyframes ad-prog{to{transform:scaleX(1)}}
.ad-cap{position:absolute;left:18px;right:58px;bottom:24px;z-index:2;display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.3}
.ad-cap b{font-weight:700}
.ad-cap span{color:rgba(255,255,255,.72)}
.ad-rail{position:absolute;right:14px;bottom:26px;z-index:2;display:flex;flex-direction:column;gap:18px;color:var(--white)}
.phone{position:relative;border-radius:48px;padding:9px;background:linear-gradient(150deg,#3B4B4B,#0B1515 38%,#1B2B2B 70%,#0B1515);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 50px 120px -30px rgba(79,199,199,.65)}
.screen{position:relative;width:100%;height:100%;border-radius:40px;overflow:hidden;background:#000}

/* ================= Apertura ================= */
.a-hero{position:relative;overflow:clip;padding-top:clamp(12px,3vw,40px);padding-bottom:clamp(48px,6vw,88px)}
@media (min-width:1024px){.a-hero{min-height:824px;display:flex;align-items:center}}
.a-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(40px,5vw,72px)}
.a-copy{flex:1 1 560px;min-width:0;position:relative;z-index:3;display:flex;flex-direction:column;gap:24px}
.a-word{position:relative;display:inline-block;color:var(--tq);text-shadow:0 0 34px rgba(79,199,199,.55)}
.a-drop{position:absolute;left:55%;top:84%;margin-left:-7px;opacity:0}
.a-drop svg{filter:drop-shadow(0 0 8px rgba(79,199,199,.95))}
.a-vis{flex:1 1 420px;min-width:0;position:relative;display:flex;justify-content:center;align-items:center;perspective:1500px;padding:28px 0 8px}
.a-vis::before{content:'';position:absolute;left:50%;top:52%;width:min(860px,170%);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(79,199,199,.5),rgba(20,128,126,.28) 38%,rgba(13,59,59,.16) 60%,transparent 80%);pointer-events:none}
.a-stack{position:relative;width:clamp(236px,62vw,318px);aspect-ratio:9/19.5;transform-style:preserve-3d;transform:rotateY(-18deg) rotateX(8deg) rotateZ(2deg);animation:a-float 8s ease-in-out infinite}
@keyframes a-float{0%,100%{transform:rotateY(-18deg) rotateX(8deg) rotateZ(2deg) translateY(0)}50%{transform:rotateY(-11deg) rotateX(5deg) rotateZ(.6deg) translateY(-12px)}}
.a-ghost{position:absolute;inset:0;border-radius:48px;background:linear-gradient(160deg,rgba(79,199,199,.24),rgba(13,59,59,.45));border:1px solid rgba(79,199,199,.28)}
.a-ghost-1{transform:translate3d(-60px,28px,-150px);opacity:.55}
.a-ghost-2{transform:translate3d(-116px,56px,-300px);opacity:.28}
.a-stack .phone{position:absolute;inset:0}
.a-feed{position:absolute;inset:0;animation:a-feed 12s cubic-bezier(.75,0,.2,1) infinite}
.a-slide{position:absolute;left:0;right:0;height:100%}
.a-s1{top:0}
.a-s2{top:100%}
.a-s3{top:200%}
.a-s4{top:300%}
@keyframes a-feed{0%,26%{transform:translateY(0)}33%,59%{transform:translateY(-100%)}66%,92%{transform:translateY(-200%)}100%{transform:translateY(-300%)}}

/* ================= Il problema ================= */
.p-list{display:flex;flex-direction:column;gap:clamp(80px,10vw,144px)}
.p-step{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center}
@media (min-width:1024px){
  .p-step{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(56px,7vw,112px)}
  .p-step.rev .p-vis{order:2}
}
.p-text{display:flex;flex-direction:column;gap:20px;max-width:36em}
.p-vis{position:relative}
.p-vis::before{content:'';position:absolute;left:50%;top:50%;width:125%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(20,128,126,.26),transparent 70%);pointer-events:none}
.panel{position:relative;border-radius:var(--r-xl);background:linear-gradient(180deg,rgba(13,59,59,.72),rgba(13,59,59,.3));border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 90px -50px rgba(79,199,199,.45);overflow:hidden}
.p-panel{width:100%;aspect-ratio:4/3}

/* imbuto di luce: le barre crescono una volta, quando la sezione appare */
/* il riquadro dell'imbuto segue il grafico: niente vuoto sopra e sotto (Michael, 22/10/2026) */
.p-panel.fun{aspect-ratio:auto}
.fun{display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2vw,24px);padding:clamp(28px,3.4vw,44px) clamp(24px,3.4vw,44px)}
.fun-row{display:grid;grid-template-columns:7.4em minmax(0,1fr);align-items:center;gap:14px}
.fun-row .t-small{color:var(--w80)}
.fun-row .b{font-size:14px}
.fun-bar{position:relative;height:14px;border-radius:8px;background:rgba(255,255,255,.06)}
.fun-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:8px;transform-origin:left}
.fb-1 i{width:100%;background:linear-gradient(90deg,#FFFFFF,rgba(255,255,255,.72));box-shadow:0 0 26px rgba(255,255,255,.22)}
.fb-2 i{width:56%;background:linear-gradient(90deg,rgba(255,255,255,.8),rgba(255,255,255,.5))}
.fb-3 i{width:11%;background:var(--tq);box-shadow:0 0 18px rgba(79,199,199,.85)}
.fb-4 i{width:3%;min-width:10px;background:var(--tq);box-shadow:0 0 14px rgba(79,199,199,.9)}
.fun-drip{position:absolute;left:4px;bottom:100%;width:14px;height:44px;pointer-events:none}
.fun-drip svg{position:absolute;left:0;top:0;opacity:0;filter:drop-shadow(0 0 6px rgba(79,199,199,.9))}

/* feed di post fermi che scorrono via (una volta, quando appare) */
.feedv{display:flex;justify-content:center;align-items:flex-start;padding-top:clamp(24px,3vw,36px)}
.mp{position:relative;width:min(48%,210px);aspect-ratio:9/17;border-radius:28px;padding:7px;background:linear-gradient(150deg,#2E3C3C,#0B1515 45%,#1A2626);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.mp-screen{position:relative;width:100%;height:100%;border-radius:22px;overflow:hidden;background:#0A1717}
.stream{display:flex;flex-direction:column;gap:8px;padding:8px}
.post{flex:none;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:7px;display:flex;flex-direction:column;gap:6px}
.post-top{display:flex;align-items:center;gap:6px}
.post-av{flex:none;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#4FC7C7,#14807E)}
.post-top .post-l{flex:0 1 46%}
.post-img{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:radial-gradient(110% 90% at 50% 22%,rgba(255,255,255,.4),rgba(255,255,255,.1) 72%);display:flex;align-items:center;justify-content:center}
.post-prod{width:64%;height:64%}
.post-tag{position:absolute;top:9%;right:9%;width:19%;aspect-ratio:1;border-radius:50%;background:#4FC7C7;box-shadow:0 0 0 2px rgba(255,255,255,.4)}
.post-act{width:38%;max-width:40px;height:auto;color:rgba(255,255,255,.55)}
.post-l{height:5px;border-radius:3px;background:rgba(255,255,255,.16)}
.post-l.s{width:56%}

/* lo stesso post ogni mese: la fila torna su sé stessa, una volta */
.loopv{display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vw,32px);padding:clamp(24px,4vw,44px) 0}
.loop-strip{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.loop-track{display:flex;width:max-content}
.loop-set{display:flex;gap:14px;padding-right:14px}
.loop-set .post{width:clamp(92px,10vw,124px)}
.loop-ic{position:absolute;top:18px;right:18px;color:var(--tq);filter:drop-shadow(0 0 8px rgba(79,199,199,.8))}
.flat{margin:0 clamp(24px,4vw,44px);height:36px;width:auto;color:rgba(255,255,255,.35)}

/* ================= La soluzione ================= */
.sol-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(44px,5vw,72px);align-items:center}
@media (min-width:1024px){.sol-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.sol-copy{display:flex;flex-direction:column;gap:24px}
.deck{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.2vw,16px)}
.deck::before{content:'';position:absolute;left:50%;top:50%;width:140%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(79,199,199,.3),rgba(20,128,126,.16) 45%,transparent 72%);pointer-events:none}
.card{position:relative;aspect-ratio:9/16;border-radius:clamp(10px,1.2vw,16px);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.1);overflow:hidden;transform:translateY(-5px);box-shadow:0 18px 40px -14px rgba(79,199,199,.75)}
.card svg{width:38%;height:auto}
.card::after{content:'';position:absolute;left:12%;right:30%;bottom:10%;height:5px;border-radius:3px;background:currentColor;opacity:.4}
.c-1{background:linear-gradient(160deg,#14807E,#0D3B3B);color:var(--white)}
.c-2{background:var(--tq);color:var(--nero)}
.c-3{background:linear-gradient(160deg,#0D3B3B,#041414);color:var(--tq)}
.c-4{background:#FFFFFF;color:var(--pet)}
.c-5{background:linear-gradient(160deg,#4FC7C7,#14807E);color:var(--white)}
.c-6{background:linear-gradient(160deg,#1A4747,#041414);color:var(--white)}
.c-7{background:var(--tq2);color:var(--white)}
.c-8{background:linear-gradient(160deg,#8AE0E0,#4FC7C7);color:var(--nero)}
.c-9{background:#041414;color:var(--tq);border-color:rgba(79,199,199,.4)}
.c-10{background:linear-gradient(160deg,#FFFFFF,#CFE9E9);color:var(--tq2)}

/* ================= Il budget ================= */
.bud-col{display:flex;flex-direction:column;gap:clamp(32px,4vw,48px)}
.bud-lead{max-width:44em}
.schema{display:flex;flex-direction:column;gap:14px}
.sch-row{display:flex;gap:clamp(8px,1vw,12px);height:clamp(96px,10vw,132px)}
.sch-prova{flex:1 1 0;min-width:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(4px,.6vw,8px);padding:clamp(8px,1vw,12px);border-radius:var(--r-l);background:rgba(255,255,255,.04);border:1px solid var(--line)}
.cell{position:relative;border-radius:8px;background:rgba(255,255,255,.07)}
.cell::after{content:'';position:absolute;inset:0;border-radius:8px;background:var(--tq);box-shadow:0 0 14px rgba(79,199,199,.7);opacity:var(--on,0)}
.cell.win{--on:1}
.cell.win::after{box-shadow:0 0 20px rgba(79,199,199,.95)}
.sch-vince{flex:2 1 0;min-width:0;position:relative;border-radius:var(--r-l);background:rgba(255,255,255,.04);border:1px solid var(--line);overflow:hidden}
.sch-fill{position:absolute;inset:0;transform-origin:left;background:linear-gradient(90deg,var(--tq2),var(--tq));box-shadow:inset 0 0 50px rgba(255,255,255,.28)}
.sch-labels{display:flex;gap:clamp(8px,1vw,12px)}
.sch-labels .t-small{color:var(--w80);font-weight:600}
.sch-l1{flex:1 1 0;min-width:0}
.sch-l2{flex:2 1 0;min-width:0}

/* ================= Girate o con l'AI ================= */
.gir-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(48px,6vw,96px);align-items:center}
@media (min-width:1024px){.gir-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.tris{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,1.6vw,22px);padding-top:48px}
.tris::before{content:'';position:absolute;left:50%;top:55%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(79,199,199,.34),rgba(20,128,126,.16) 45%,transparent 72%);pointer-events:none}
.tp{position:relative;flex:0 1 180px;min-width:0;aspect-ratio:9/19;border-radius:clamp(20px,2.4vw,30px);padding:6px;background:linear-gradient(150deg,#3B4B4B,#0B1515 40%,#1B2B2B);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 30px 70px -30px rgba(79,199,199,.6)}
.tp .scr{position:relative;width:100%;height:100%;border-radius:clamp(15px,1.9vw,24px);overflow:hidden}
.tp .ad-cap{left:10px;right:10px;bottom:12px}
.tp .ad-bars{top:9px;left:9px;right:9px}
.tp-1{transform:translateY(-24px) rotate(-4deg)}
.tp-2{transform:translateY(8px)}
.tp-3{transform:translateY(-44px) rotate(3deg)}

/* ================= Cosa ricevi ================= */
.ric-card{padding:clamp(28px,5vw,72px);display:flex;flex-direction:column;gap:clamp(32px,4vw,48px)}
.ric-card::before{content:'';position:absolute;right:-20%;top:-40%;width:70%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(79,199,199,.22),transparent 70%);pointer-events:none}
.ric-cols{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (min-width:1024px){.ric-cols{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.ric-left{display:flex;flex-direction:column;gap:28px}
.checks{display:flex;flex-direction:column;gap:18px}
.checks li{display:flex;gap:14px;align-items:flex-start}
.chk{flex:none;width:30px;height:30px;margin-top:1px;border-radius:50%;background:var(--tq);color:var(--nero);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 18px rgba(79,199,199,.55)}
.ric-right{border-radius:var(--r-l);background:rgba(4,20,20,.6);border:1px solid var(--line);padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:18px}
.needs{display:flex;flex-direction:column;gap:14px}
.needs li{display:flex;gap:12px;align-items:flex-start}
.needs svg{flex:none;margin-top:4px;color:var(--tq)}

/* ================= Le prove (Home) ================= */
.prove-head{display:flex;flex-direction:column;gap:20px;max-width:46em;margin-bottom:clamp(40px,5vw,64px)}
/* uno per riga sul telefono; su tablet due sopra e il terzo centrato sotto; da computer tre in fila */
.stats{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2vw,24px)}
@media (min-width:700px){
  .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stat{grid-column:span 2}
  .stat:last-child:nth-child(odd){grid-column:2/span 2}
}
@media (min-width:1100px){
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat,.stat:last-child:nth-child(odd){grid-column:auto}
}
.stat{padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:16px}
.stat .t-num{font-size:clamp(56px,5vw,80px);white-space:nowrap}
.stat-who{color:var(--tq);font-weight:600}
.mbars{display:flex;flex-direction:column;gap:8px}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) 4.6em;align-items:center;gap:10px}
.mtrack{height:10px}
.mbar{height:100%;border-radius:6px;transform-origin:left}
.mb-us{background:var(--tq);box-shadow:0 0 14px rgba(79,199,199,.6)}
.mb-avg{background:rgba(255,255,255,.22)}
.mv{font-size:14px;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.mv.avg{color:var(--w60)}
.conv{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cv-set{display:flex;gap:6px}
.cv{width:22px;height:22px;border-radius:6px;background:var(--tq);box-shadow:0 0 12px rgba(79,199,199,.6)}
.cv-old{background:rgba(255,255,255,.22);box-shadow:none}
.conv svg{color:var(--w60)}
.prove-more{margin-top:clamp(28px,3vw,40px);display:flex}

/* ================= Chi siamo ================= */
.chi-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
@media (min-width:1024px){.chi-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.chi-photo{position:relative}
.chi-photo::before{content:'';position:absolute;left:50%;top:50%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(79,199,199,.3),rgba(20,128,126,.14) 45%,transparent 72%);pointer-events:none}
.chi-photo img{position:relative;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(72% 82% at 50% 45%,#000 60%,transparent 100%);mask-image:radial-gradient(72% 82% at 50% 45%,#000 60%,transparent 100%)}
@media (max-width:760px){.chi-photo{margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}}
.chi-copy{display:flex;flex-direction:column;gap:20px}

/* ================= I dubbi ================= */
.dub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:clamp(36px,4vw,48px);align-items:start}
.chat{display:flex;flex-direction:column;gap:12px}
.chat-q{align-self:flex-start;max-width:92%;border-radius:24px 24px 24px 6px;padding:16px 22px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.chat-swap{display:grid}
.chat-swap>*{grid-area:1/1}
.chat-typing{justify-self:end;align-self:start;display:flex;gap:5px;padding:14px 18px;border-radius:18px 18px 6px 18px;background:rgba(13,59,59,.8);opacity:0;pointer-events:none}
.chat-typing span{width:7px;height:7px;border-radius:50%;background:var(--white)}
.chat.is-typing .chat-typing span{animation:typing .9s ease-in-out infinite}
.chat.is-typing .chat-typing span:nth-child(2){animation-delay:.15s}
.chat.is-typing .chat-typing span:nth-child(3){animation-delay:.3s}
.chat-a{justify-self:end;max-width:96%;border-radius:24px 24px 6px 24px;padding:20px 24px;background:linear-gradient(160deg,#14807E,#0D3B3B 70%);box-shadow:0 26px 60px -30px rgba(79,199,199,.65)}
.chat-a .t-body{color:var(--white)}
@keyframes typing{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* ================= Chiusura ================= */
.chiu-glow{position:absolute;left:30%;top:46%;width:min(1100px,170vw);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(20,128,126,.38),rgba(13,59,59,.2) 45%,transparent 72%);pointer-events:none}
.chiu-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,96px);align-items:start}
@media (min-width:1024px){.chiu-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.chiu-left,.chiu-right{display:flex;flex-direction:column;gap:24px}
.duo{display:flex;gap:18px;align-items:flex-start}
.duo-pics{display:flex;flex:none;padding-top:2px}
.duo-pics img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--nero);box-shadow:0 0 0 2px rgba(79,199,199,.65),0 0 26px rgba(79,199,199,.45)}
.duo-pics img + img{margin-left:-16px}
.biglietto{background:#FFFFFF;color:var(--nero);border-radius:18px;padding:22px 24px;transform:rotate(-2deg);max-width:30em;box-shadow:0 30px 60px -28px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.4)}
.biglietto .t-body{color:var(--nero)}

/* ================= Domande frequenti ================= */
.faq-col{display:flex;flex-direction:column;gap:clamp(32px,4vw,48px)}
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:900px}
.faq-item{border-radius:var(--r-l);background:rgba(255,255,255,.04);border:1px solid var(--line);padding:0 clamp(20px,3vw,32px);transition:background-color .25s ease,border-color .25s ease}
.faq-item.is-open{background:rgba(13,59,59,.6);border-color:rgba(79,199,199,.32)}
.faq-q{all:unset;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;cursor:pointer;font-family:inherit;color:var(--white)}
.faq-q .t-lead{color:var(--white);font-weight:600}
.faq-q:focus-visible{outline:3px solid var(--tq);outline-offset:4px;border-radius:8px}
.faq-ic{flex:none;color:var(--tq);transition:transform .3s var(--ease)}
.faq-item.is-open .faq-ic{transform:rotate(45deg)}
.faq-a{padding-bottom:28px;display:flex;flex-direction:column;gap:20px}
.conto{border-radius:18px;background:rgba(4,20,20,.65);border:1px solid var(--line);padding:clamp(16px,2vw,24px);display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:8px;flex:1 1 220px;min-width:0}
.field .t-small{color:var(--w80);font-weight:600}
.field input{font-family:inherit;font-size:17px;font-weight:500;color:var(--white);background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.16);border-radius:var(--r-m);height:56px;padding:0 16px;outline:none;width:100%}
.field input::placeholder{color:rgba(255,255,255,.4)}
.field input:focus{border-color:var(--tq);box-shadow:0 0 0 4px rgba(79,199,199,.18)}
.conto-out{flex:1 1 200px;min-width:0;min-height:86px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.conto-out .t-small{color:var(--w80);font-weight:600}

/* ================= Piè di pagina ================= */
.foot{position:relative;border-top:1px solid var(--line);padding-top:clamp(56px,7vw,96px);padding-bottom:40px}
/* il logo è già «MS», accanto c'è solo «Copyworks»; sotto la scritta c'è spazio per le lettere che scendono (p, y) */
.foot-mark{display:flex;align-items:center;gap:.16em;white-space:nowrap;padding-bottom:.16em}
.foot-mark img{height:.82em;width:auto;flex:none}
/* i dati in tre colonne: co-fondatori, contatti, note legali */
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:28px clamp(24px,4vw,64px);margin-top:clamp(24px,3vw,36px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--line)}
@media (min-width:900px){.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr)}}
.foot-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.foot-tit{color:var(--white);font-weight:600}
.foot-list{display:flex;flex-direction:column;gap:8px}
.foot-list li{color:var(--w80)}
.foot-list a{color:var(--w80);text-decoration:none;transition:color .18s ease}
.foot-btn{all:unset;box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:14px;line-height:1.55;color:var(--w80);transition:color .18s ease}
.foot-list a:hover,.foot-list a[aria-current],.foot-btn:hover{color:var(--white)}
.foot-btn:focus-visible{outline:3px solid var(--tq);outline-offset:3px;border-radius:6px}
/* i due WhatsApp: nome a sinistra e numero a destra, con i numeri allineati in colonna (Michael, 22/10/2026) */
.foot-list.foot-contatti{display:grid;grid-template-columns:max-content max-content;column-gap:16px;row-gap:8px;justify-content:start}
.foot-contatti>li{grid-column:1/-1}
.foot-contatti .foot-wa,.foot-contatti .foot-wa a{display:grid;grid-template-columns:subgrid}
.foot-contatti .foot-wa a{grid-column:1/-1}
.foot-num{font-variant-numeric:tabular-nums}
@media (max-width:359px){.foot-list.foot-contatti{grid-template-columns:max-content}}

/* ================= Pagina Casi studio ================= */
.pg-hero{position:relative;padding-top:clamp(32px,6vw,96px);padding-bottom:clamp(40px,5vw,72px)}
.pg-hero-in{position:relative;display:flex;flex-direction:column;gap:24px;max-width:50em}
.case{position:relative;overflow:clip;padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(56px,7vw,104px);border-top:1px solid var(--line)}
.stacco + .case{border-top:0}
.case-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,5vw,96px);align-items:center}
@media (min-width:1024px){
  .case-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .case.rev .case-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .case.rev .case-vis{order:2}
}
.case-vis{position:relative;display:flex;justify-content:center;perspective:1400px;padding:24px 0}
.case-vis::before{content:'';position:absolute;left:50%;top:50%;width:min(720px,160%);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(79,199,199,.42),rgba(20,128,126,.22) 40%,transparent 74%);pointer-events:none}
.case-phone{width:clamp(220px,58vw,300px);aspect-ratio:9/19.5;transform:rotateY(-12deg) rotateX(6deg);animation:c-float 8s ease-in-out infinite}
.case.rev .case-phone{transform:rotateY(12deg) rotateX(6deg);animation-name:c-float-r}
@keyframes c-float{0%,100%{transform:rotateY(-12deg) rotateX(6deg) translateY(0)}50%{transform:rotateY(-7deg) rotateX(4deg) translateY(-10px)}}
@keyframes c-float-r{0%,100%{transform:rotateY(12deg) rotateX(6deg) translateY(0)}50%{transform:rotateY(7deg) rotateX(4deg) translateY(-10px)}}
.case-copy{display:flex;flex-direction:column;gap:22px}
.case-metrics{display:flex;flex-direction:column;gap:26px;padding-top:6px}
.metric{display:flex;flex-direction:column;gap:12px}
.metric .t-body{color:var(--white);font-weight:500}
.fonte{font-style:italic}
.cta-band{position:relative;padding-top:var(--sec);padding-bottom:var(--sec)}
.cta-band-in{position:relative;display:flex;flex-direction:column;gap:24px;align-items:flex-start;max-width:44em}

/* ================= Pagina Contatti ================= */
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,96px);align-items:center}
@media (min-width:1024px){.ct-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.ct-left{display:flex;flex-direction:column;gap:28px}
.ct-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:12px}
.ct-card{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--r-l);background:rgba(255,255,255,.04);border:1px solid var(--line);text-decoration:none;color:var(--white);min-height:84px;transition:border-color .2s ease,background-color .2s ease,transform .16s var(--ease)}
.ct-card:hover{border-color:rgba(79,199,199,.45);background:rgba(13,59,59,.5)}
.ct-card:active{transform:scale(.98)}
.ct-ic{flex:none;width:48px;height:48px;border-radius:14px;background:rgba(79,199,199,.12);color:var(--tq);display:flex;align-items:center;justify-content:center}
.ct-card .t-small{color:var(--w60)}
.ct-val{font-size:clamp(17px,1.2vw,18px);line-height:1.4;font-weight:600}
.ct-ph{color:var(--tq)}
.ct-photo{position:relative}
.ct-photo::before{content:'';position:absolute;left:50%;top:50%;width:130%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(79,199,199,.32),rgba(20,128,126,.16) 45%,transparent 72%);pointer-events:none}
.ct-photo img{position:relative;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(75% 70% at 50% 45%,#000 62%,transparent 100%);mask-image:radial-gradient(75% 70% at 50% 45%,#000 62%,transparent 100%)}
.ct-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(28px,4vw,72px);align-items:start}
.ct-more-col{display:flex;flex-direction:column;gap:24px}

/* ================= Pagine Privacy e Cookie ================= */
.lg{padding-bottom:var(--sec-m)}
.lg-body{display:flex;flex-direction:column;gap:16px;max-width:44em}
.lg-body h2{margin-top:28px;color:var(--white)}
.lg-body h2:first-child{margin-top:0}
.lg-body a{color:var(--tq);text-underline-offset:3px}
.lg-body a:hover{color:var(--tq-h)}

/* ================= Stacchi di colore (pattern interrupt) ================= */
.stacco{position:relative;margin-left:clamp(8px,1.5vw,24px);margin-right:clamp(8px,1.5vw,24px);border-radius:clamp(28px,4vw,56px);overflow:hidden;isolation:isolate;border-top:0}
.stacco:last-child{margin-bottom:clamp(8px,1.5vw,24px)}
.stacco .glow{background:radial-gradient(closest-side,rgba(255,255,255,.34),rgba(255,255,255,.1) 45%,transparent 72%)}
.bg-tq{background:var(--tq);color:var(--nero)}
.bg-white{background:#FFFFFF;color:var(--nero)}
.bg-tq2{background:var(--tq2);color:var(--white)}
.bg-pet{background:var(--pet);color:var(--white)}
.bg-tq .t-lead,.bg-tq .t-body{color:rgba(4,20,20,.82)}
.bg-tq .t-small{color:rgba(4,20,20,.72)}
.bg-white .t-lead,.bg-white .t-body{color:rgba(4,20,20,.76)}
.bg-white .t-small{color:rgba(4,20,20,.64)}
.bg-tq .b,.bg-white .b,.bg-tq .white{color:var(--nero)}
.bg-tq2 .t-lead,.bg-tq2 .t-body{color:rgba(255,255,255,.92)}
.bg-tq2 .t-small{color:rgba(255,255,255,.82)}
.stacco .biglietto .t-body{color:var(--nero)}

/* pulsanti sugli stacchi */
.bg-tq .nb-btn,.bg-white .nb-btn:not(.nb-btn-ghost){background:var(--nero);color:var(--white);box-shadow:0 18px 44px -16px rgba(4,20,20,.55)}
.bg-tq .nb-btn:hover,.bg-white .nb-btn:not(.nb-btn-ghost):hover{background:var(--pet)}
.bg-white .nb-btn-ghost{color:var(--nero);box-shadow:inset 0 0 0 1.5px rgba(4,20,20,.3)}
.bg-white .nb-btn-ghost:hover{background:rgba(13,59,59,.06)}
.bg-tq2 .nb-btn{background:var(--white);color:var(--nero);box-shadow:0 18px 44px -16px rgba(4,20,20,.5)}
.bg-tq2 .nb-btn:hover{background:var(--tq-h)}

/* la soluzione sul turchese: si accende la luce */
.bg-tq .deck::before{background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(255,255,255,.18) 45%,transparent 72%)}
.bg-tq .card{border-color:rgba(4,20,20,.14);box-shadow:0 18px 36px -16px rgba(4,20,20,.6)}
.bg-tq .c-2{background:var(--pet);color:var(--tq)}
.bg-tq .c-5{background:linear-gradient(160deg,#14807E,#0D3B3B);color:var(--white)}
.bg-tq .c-8{background:#FFFFFF;color:var(--tq2)}

/* i numeri sul bianco */
.bg-white .panel{background:rgba(13,59,59,.05);border-color:rgba(4,20,20,.08);box-shadow:none}
.bg-white .stat-who{color:var(--tq2)}
.bg-white .metal{background:linear-gradient(180deg,#0D3B3B 0%,#14807E 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.bg-white .mb-us,.bg-white .cv{background:var(--tq2);box-shadow:none}
.bg-white .mb-avg,.bg-white .cv-old{background:rgba(4,20,20,.14)}
.bg-white .mv{color:var(--nero)}
.bg-white .mv.avg{color:rgba(4,20,20,.6)}
.bg-white .conv svg{color:rgba(4,20,20,.5)}

/* la chiusura sul turchese profondo */
.bg-tq2 .chiu-glow{background:radial-gradient(closest-side,rgba(79,199,199,.6),rgba(79,199,199,.16) 50%,transparent 75%)}
.bg-tq2 .duo-pics img{border-color:var(--tq2);box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.bg-tq .duo-pics img{border-color:var(--tq);box-shadow:0 0 0 2px rgba(4,20,20,.85)}

/* ================= Rifiniture (22/10/2026): luce, profondità e movimento più curato ================= */
/* scorrimento morbido da computer (Lenis): regole della libreria */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}

/* titoli che salgono da sotto una maschera: un po' di spazio in più, così non si tagliano le lettere che scendono */
.riga-mask{padding:0 .1em .14em;margin:0 -.1em -.14em}

/* pulsanti «Prenota la call»: quando sono sullo schermo, ogni pochi secondi un riflesso di luce li attraversa e porta l'occhio lì (lo muove main.js) */
.nb-btn:not(.nb-btn-s):not(.nb-btn-ghost){position:relative;overflow:hidden;isolation:isolate}
.nb-btn:not(.nb-btn-s):not(.nb-btn-ghost)::after{content:'';position:absolute;top:0;bottom:0;left:-55%;width:45%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);transform:translateX(var(--luce,0%))}
.nb-btn:not(.nb-btn-s):not(.nb-btn-ghost):hover{transform:translateY(-2px)}
.nb-btn:not(.nb-btn-s):not(.nb-btn-ghost):active{transform:translateY(0) scale(.97)}

/* telefono dell'apertura: da computer segue un poco il mouse */
.a-tilt{position:relative;transform-style:preserve-3d}
/* i telefoni dietro mostrano le altre ads, in trasparenza */
.a-ghost-1{background:linear-gradient(160deg,rgba(79,199,199,.3),rgba(13,59,59,.62)),url(../video/atelier-del-gioiello.webp) center/cover}
.a-ghost-2{background:linear-gradient(160deg,rgba(79,199,199,.3),rgba(13,59,59,.62)),url(../video/natura-medica.webp) center/cover}

/* schermi dei telefoni come vetro: un riflesso leggero in diagonale */
.screen::after,.tp .scr::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 22%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 72%,rgba(255,255,255,.06) 100%)}

/* riquadri scuri: la luce arriva da sopra, una linea turchese sul bordo alto */
.panel::after{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;pointer-events:none;background:linear-gradient(90deg,rgba(79,199,199,0),rgba(79,199,199,.7),rgba(79,199,199,0))}
.bg-white .panel::after{background:linear-gradient(90deg,rgba(20,128,126,0),rgba(20,128,126,.35),rgba(20,128,126,0))}

/* nome in fondo: sale da sotto il bordo quando arriva sullo schermo */
.foot-mask{overflow:clip;padding:0 0 .14em;margin:0 0 -.14em}
.ct-val{overflow-wrap:anywhere}
/* Contatti: l'email ha una riga tutta sua, i due WhatsApp affiancati sotto */
.ct-cards .ct-card:first-child{grid-column:1/-1}

/* ================= Modifiche del 22/10/2026, ore 14:17 ================= */
/* sopra i telefoni fermi una sola barra, che segue il video (la muove main.js) */
[data-vbar] i{animation:none!important}

/* banner dei cookie: in basso a sinistra da computer, in basso a tutta larghezza dal telefono.
   «Rifiuta» e «Accetta» hanno lo stesso peso; la X vale come rifiuto */
.ck{position:fixed;left:24px;bottom:24px;z-index:70;width:min(460px,calc(100vw - 48px));max-height:calc(100dvh - 48px);overflow:auto;
  display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:var(--r-l);background:#0A2626;border:1px solid rgba(79,199,199,.3);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.04);color:var(--white);animation:ck-in .35s var(--ease) both}
@keyframes ck-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ck-x{all:unset;box-sizing:border-box;position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--w80);cursor:pointer}
.ck-x:hover{color:var(--white);background:rgba(255,255,255,.06)}
.ck-tit{color:var(--white);font-weight:700;padding-right:44px}
.ck-txt{color:var(--w80)}
.ck-txt a{color:var(--tq);text-underline-offset:3px}
.ck-pref{display:flex;flex-direction:column;gap:10px}
.ck-riga{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-radius:var(--r-m);background:rgba(255,255,255,.04);border:1px solid var(--line)}
label.ck-riga{cursor:pointer}
.ck-voce{display:flex;flex-direction:column;gap:2px;min-width:0}
.ck-voce .t-small{color:var(--w80)}
.ck-voce .ck-nome{color:var(--white);font-weight:600}
.ck-check{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ck-sw{flex:none;position:relative;width:44px;height:26px;border-radius:999px;background:rgba(255,255,255,.16);transition:background-color .2s ease}
.ck-sw::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--white);transition:transform .2s var(--ease)}
.ck-sw.is-on,.ck-check:checked + .ck-sw{background:var(--tq)}
.ck-sw.is-on::after,.ck-check:checked + .ck-sw::after{transform:translateX(18px)}
.ck-sw.is-fisso{opacity:.55}
.ck-check:focus-visible + .ck-sw{outline:3px solid var(--tq);outline-offset:3px}
.ck-btns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.ck-btn{all:unset;box-sizing:border-box;min-height:48px;padding:0 18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:15px;font-weight:600;line-height:1;color:var(--white);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);cursor:pointer;
  transition:background-color .18s ease,transform .16s var(--ease)}
.ck-btn:hover{background:rgba(255,255,255,.08)}
.ck-btn:active{transform:scale(.97)}
.ck-btn-link{grid-column:1/-1;order:-1;justify-self:start;min-height:40px;padding:0 2px;box-shadow:none;text-decoration:underline;text-underline-offset:4px;color:var(--w80)}
.ck-btn-full{grid-column:1/-1;order:1}
.ck-btn-link:hover{background:transparent;color:var(--white)}
.ck :is(button,a,label):focus-visible{outline:3px solid var(--tq);outline-offset:3px}
@media (max-width:760px){
  .ck{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));width:auto;max-height:calc(100dvh - 20px);padding:20px}
}

/* chi ha chiesto meno movimento vede le pagine ferme, con tutto già al suo posto */
@media (prefers-reduced-motion:reduce){
  .nb *,.nb *::before,.nb *::after{animation:none!important;transition:none!important}
  @view-transition{navigation:none}
}