/* VM Corporation v2 — piccola web app mobile-first. Colori: inchiostro, rame, carta. Font: Plus Jakarta Sans. */
:root{
  --ink:#0B0D10;--ink-2:#14171C;--ink-3:#1E2229;
  --paper:#F4EFE6;--paper-2:#EAE3D6;--white:#FFFFFF;
  --copper:#E08A3C;--copper-2:#F2A33A;--copper-deep:#B8661F;--copper-soft:rgba(224,138,60,.14);
  --wa:#25D366;
  --t:#15171B;--t2:#50535A;--t3:#666A72;
  --td:#F1ECE2;--td2:#B6B1A7;--td3:#9B968C;
  --line:rgba(21,23,27,.10);--lined:rgba(255,255,255,.10);
  --font:"Plus Jakarta Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --gut:16px;--max:1120px;--r:16px;--r-lg:22px;
  --dock-h:76px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.55;color:var(--t);background:var(--paper);overflow-x:hidden;-webkit-font-smoothing:antialiased;padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom))}
@media (min-width:900px){body{padding-bottom:0}}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.05}
h2{font-size:clamp(1.7rem,5.6vw,2.6rem)}
p{margin:0}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
@media (min-width:768px){:root{--gut:28px}}
section{padding:56px 0}
@media (min-width:900px){section{padding:96px 0}}
.sub{margin-top:12px;color:var(--t2);font-size:1.02rem;max-width:58ch}
.hl{color:var(--copper)}
.skip{position:absolute;left:-999px;top:8px;background:var(--copper);color:var(--ink);padding:8px 12px;border-radius:8px;z-index:100}.skip:focus{left:8px}

/* bottoni */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 22px;border-radius:14px;font-weight:700;font-size:1rem;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:var(--font);transition:transform .15s,background .15s,border-color .15s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--copper);color:var(--ink)}
.btn-primary:hover{background:var(--copper-2)}
.btn-dark{background:var(--ink-3);color:var(--td);border-color:var(--lined)}
.btn-dark:hover{background:#262b33}
.btn-ghost{background:var(--white);color:var(--t);border-color:var(--line)}
.btn-wa{background:var(--wa);color:#063}
.btn-sm{min-height:40px;padding:0 16px;border-radius:11px;font-size:.92rem}
.btn-block{width:100%}
.btn:disabled{opacity:.6;cursor:wait}

/* header */
.top{position:sticky;top:0;z-index:40;background:rgba(11,13,16,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--lined)}
.top-in{display:flex;align-items:center;justify-content:space-between;height:60px;gap:12px}
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--td)}
.logo-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--copper);color:var(--ink);font-weight:800;font-size:.95rem;letter-spacing:-.03em}
.logo-text{font-weight:700;font-size:1.05rem;letter-spacing:-.02em}
.top-nav{display:none;gap:26px}
.top-nav a{text-decoration:none;color:var(--td2);font-weight:600;font-size:.95rem}.top-nav a:hover{color:var(--td)}
@media (min-width:900px){.top-nav{display:flex}}

/* hero */
.hero{background:var(--ink);color:var(--td);padding:28px 0 0;overflow:hidden;position:relative}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(640px 360px at 90% 0%,rgba(224,138,60,.22),transparent 65%);pointer-events:none}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.hero-text,.phones-wrap{min-width:0}
@media (min-width:900px){.hero{padding:64px 0 0}.hero-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:40px}}
.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--lined);font-size:.8rem;font-weight:600;color:var(--td2)}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--copper);box-shadow:0 0 0 4px var(--copper-soft)}
.hero h1{margin-top:18px;font-size:clamp(2.1rem,8.2vw,4.1rem);max-width:14ch}
.hero-sub{margin-top:16px;font-size:1.05rem;color:var(--td2);max-width:48ch}
.hero-sub strong{color:var(--td);font-weight:800}
.cta-row{display:grid;gap:10px;margin-top:22px}
@media (min-width:480px){.cta-row{grid-template-columns:auto auto;justify-content:start}}
.hero-note{margin-top:12px;font-size:.82rem;color:var(--td3)}

/* carosello telefoni */
.phones-wrap{margin-inline:calc(var(--gut) * -1);padding-bottom:28px}
@media (min-width:900px){.phones-wrap{margin-inline:0;padding-bottom:48px}}
.phones{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--gut) 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.phones::-webkit-scrollbar{display:none}
.phone{flex:0 0 min(62vw,228px);scroll-snap-align:center;text-decoration:none;color:var(--td)}
@media (min-width:900px){.phone{flex-basis:210px;scroll-snap-align:start}}
.phone-frame{position:relative;border-radius:30px;background:#0a0a0c;padding:7px;border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 50px -28px rgba(0,0,0,.9),inset 0 0 0 1px rgba(0,0,0,.6)}
.phone-frame::before{content:"";position:absolute;left:50%;top:14px;width:34%;height:8px;border-radius:999px;background:#0a0a0c;transform:translateX(-50%);z-index:2;border:1px solid rgba(255,255,255,.08)}
.phone-frame img{border-radius:24px;aspect-ratio:420/909;object-fit:cover;object-position:top;background:#fff}
.phone-cap{display:grid;gap:1px;margin-top:10px;padding-inline:4px;font-size:.84rem;min-width:0}
.phone-cap strong{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone-cap span{color:var(--td3);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phones-dots{display:flex;justify-content:center;gap:6px;margin-top:4px}
.phones-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .2s,width .2s}
.phones-dots i.on{background:var(--copper);width:18px;border-radius:999px}
@media (min-width:900px){.phones-dots{display:none}}

/* prove */
.proof{padding:0;background:var(--ink);color:var(--td)}
.proof-grid{list-style:none;margin:0;padding:18px 0 22px;display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid var(--lined)}
@media (min-width:900px){.proof-grid{grid-template-columns:repeat(4,1fr);gap:14px;padding:26px 0 30px}}
.proof-grid li{background:var(--ink-2);border:1px solid var(--lined);border-radius:var(--r);padding:16px 16px 14px}
.proof-v{display:block;font-weight:800;font-size:clamp(1.6rem,6vw,2.3rem);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.proof-v .u{color:var(--copper);font-size:.65em;margin-left:2px}
.proof-l{display:block;margin-top:6px;font-size:.8rem;color:var(--td3);line-height:1.3}

/* chip (modulo) */
.chip{flex:none;padding:10px 15px;border-radius:999px;border:1px solid var(--line);background:var(--white);font:inherit;font-weight:700;font-size:.92rem;color:var(--t2);cursor:pointer;transition:background .15s,color .15s,border-color .15s;-webkit-tap-highlight-color:transparent}
.chip[aria-selected="true"],.chip[aria-pressed="true"]{background:var(--ink);color:var(--td);border-color:var(--ink)}

/* offerta: 6 card, una riga ciascuna */
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
@media (min-width:900px){.offer-grid{grid-template-columns:repeat(3,1fr);gap:14px}}
.offer{display:grid;gap:10px;align-content:start;padding:16px 14px 16px;border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line);text-decoration:none;color:var(--t);transition:transform .15s,border-color .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent;min-height:150px}
@media (min-width:900px){.offer{padding:22px 20px}}
.offer:hover{border-color:var(--copper-deep);box-shadow:0 14px 30px -22px rgba(21,23,27,.5)}
.offer:active{transform:scale(.99)}
.offer-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--ink);color:var(--copper)}
.offer strong{font-size:1.02rem;letter-spacing:-.01em;line-height:1.2}
.offer span{font-size:.9rem;color:var(--t2);line-height:1.35}
.offer.is-menu{background:var(--ink);color:var(--td);border-color:var(--ink)}
.offer.is-menu span{color:var(--td2)}
.offer.is-menu .offer-ico{background:var(--copper);color:var(--ink)}
.offer .offer-go{font-size:.8rem;font-weight:700;color:var(--copper-deep);margin-top:auto}
.offer.is-menu .offer-go{color:var(--copper)}

/* menu digitale */
.menu-sec{background:var(--white)}
.kicker{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--copper-deep);background:var(--copper-soft);padding:6px 10px;border-radius:999px;margin-bottom:14px}
.mini-steps{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mini-steps li{display:flex;flex-direction:column;gap:8px;align-items:flex-start;font-weight:700;font-size:.86rem;line-height:1.25;padding:12px;border-radius:14px;background:var(--paper)}
@media (min-width:600px){.mini-steps li{flex-direction:row;align-items:center;font-size:.95rem;padding:14px 16px}}
.mini-steps span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--copper);font-size:.82rem;flex:none}
.tool{margin-top:18px;border-radius:var(--r-lg);background:var(--ink);color:var(--td);border:1px solid var(--lined);overflow:hidden}
.tool>div{display:none;padding:22px 18px;min-width:0}
@media (min-width:900px){.tool>div{padding:32px 30px}}
.tool[data-state="idle"] .tool-idle,.tool[data-state="busy"] .tool-busy,.tool[data-state="done"] .tool-done,.tool[data-state="error"] .tool-err{display:block}
.tool h3{font-size:1.35rem}
.tool-idle p{margin-top:6px;color:var(--td2);font-size:.95rem}
.drop{display:grid;justify-items:center;gap:6px;margin-top:18px;padding:28px 16px;border-radius:18px;border:2px dashed rgba(224,138,60,.55);background:rgba(224,138,60,.06);cursor:pointer;text-align:center;transition:background .15s,border-color .15s}
.drop:hover,.drop.is-over{background:rgba(224,138,60,.12);border-color:var(--copper)}
.drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop-ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--copper);color:var(--ink);margin-bottom:4px}
.drop strong{font-size:1.05rem}
.drop-sub{font-size:.8rem;color:var(--td3)}
.tool-alt{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px;font-size:.9rem;color:var(--td2)}
.tool .btn-ghost{background:transparent;color:var(--td);border-color:rgba(255,255,255,.22)}
.tool .btn-ghost:hover{border-color:var(--td)}
.tool-off{margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(224,138,60,.1);color:var(--td2);font-size:.9rem}
.tool-off a{color:var(--copper)}
.tool-busy{text-align:center}
.spin{width:44px;height:44px;margin:8px auto 14px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:var(--copper);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tool-busy p{font-weight:700;min-height:1.5em}
#busy-thumb{width:120px;height:120px;object-fit:cover;border-radius:14px;margin:16px auto 0;opacity:.7}
.tool-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.preview-col,.edit-col{min-width:0}
@media (min-width:900px){.tool-cols{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;align-items:start}}
.phone-shell{position:relative;margin:0 auto;width:min(100%,300px);max-width:100%;aspect-ratio:300/600;border-radius:34px;background:#0a0a0c;padding:9px;border:1px solid rgba(255,255,255,.2);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.phone-notch{position:absolute;left:50%;top:16px;transform:translateX(-50%);width:34%;height:9px;border-radius:999px;background:#0a0a0c;z-index:3;border:1px solid rgba(255,255,255,.08)}
.mn-scroll{height:100%;border-radius:26px;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;background:#141414}
.mn-scroll::-webkit-scrollbar{display:none}
.preview-hint{text-align:center;font-size:.78rem;color:var(--td3);margin-top:10px}
.edit-col{display:grid;gap:12px;align-content:start}
.edit-sub{color:var(--td2);font-size:.95rem;margin-top:-6px}
.edit-col label{display:grid;gap:6px;font-size:.82rem;font-weight:700;color:var(--td2)}
.edit-col input[type=text]{font:inherit;font-size:1rem;color:var(--td);padding:12px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:var(--ink-2);width:100%}
.edit-col input[type=text]:focus{outline:0;border-color:var(--copper);box-shadow:0 0 0 3px var(--copper-soft)}
.edit-row{display:grid;gap:12px}
@media (min-width:520px){.edit-row{grid-template-columns:auto 1fr;align-items:end}}
.logo-up input{position:absolute;width:1px;height:1px;opacity:0}
.logo-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border-radius:12px;border:1px dashed rgba(255,255,255,.3);color:var(--td);font-weight:700;cursor:pointer;font-size:.9rem}
.logo-btn img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.sw{width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.sw[aria-checked="true"]{border-color:var(--copper);box-shadow:0 0 0 3px var(--copper-soft)}
.sw::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--ac)}
.edit-count{font-size:.82rem;color:var(--td3)}
.qr-box{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:center;padding:14px;border-radius:16px;background:var(--white);color:var(--t)}
.qr{width:120px;height:120px;background:#fff;border-radius:10px;overflow:hidden}
.qr svg{width:100%;height:100%;display:block}
.qr-txt{display:grid;gap:4px;font-size:.84rem;color:var(--t2)}
.qr-txt strong{color:var(--t);font-size:.95rem}
.qr-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.qr-box .btn-ghost{background:var(--paper);color:var(--t);border-color:var(--line)}
.demo-note{font-size:.8rem;color:var(--td3)}
.linkbtn{background:none;border:0;color:var(--td2);text-decoration:underline;cursor:pointer;font:inherit;font-size:.86rem;justify-self:start;padding:0}
.tool-err p{font-weight:700}
.plans{display:grid;gap:12px;margin-top:26px}
@media (min-width:700px){.plans{grid-template-columns:1fr 1fr;gap:16px}}
.plan{position:relative;padding:20px 20px 18px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--paper)}
.plan.is-best{background:var(--ink);color:var(--td);border-color:var(--ink)}
.plan-badge{position:absolute;top:-11px;left:18px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--copper);color:var(--ink);padding:4px 10px;border-radius:999px}
.plan-name{font-weight:700;font-size:.95rem;color:var(--t2)}
.plan.is-best .plan-name{color:var(--td2)}
.plan-price{display:flex;align-items:baseline;gap:6px;margin-top:6px}
.plan-price b{font-size:2.3rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.plan-price span{font-size:.95rem;color:var(--t2)}
.plan.is-best .plan-price span{color:var(--td2)}
.plan-note{margin-top:6px;font-size:.84rem;color:var(--t3)}
.plan.is-best .plan-note{color:var(--td3)}
.plan .btn{margin-top:14px;width:100%}
.plan:not(.is-best) .btn{background:var(--ink);color:var(--td)}
.included{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
@media (min-width:700px){.included{grid-template-columns:1fr 1fr;gap:8px 22px}}
.included li{display:flex;gap:10px;align-items:flex-start;color:var(--t2);font-size:.95rem}
.included li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;margin-top:2px;background:var(--copper-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23B8661F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center/12px no-repeat}
.plans-note{margin-top:14px;font-size:.84rem;color:var(--t3)}

/* prove da screenshot */
.proofs-title{margin-top:26px;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--td3)}
.proofs{display:flex;gap:12px;overflow-x:auto;margin:12px calc(var(--gut) * -1) 0;padding:4px var(--gut) 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
.proofs::-webkit-scrollbar{display:none}
@media (min-width:900px){.proofs{display:grid;grid-template-columns:1fr 1.4fr 1fr;margin-inline:0;padding-inline:0;overflow:visible}}
.proof-card{flex:0 0 86%;scroll-snap-align:center;background:var(--white);color:var(--t);border-radius:var(--r-lg);padding:10px 10px 14px;display:grid;gap:10px;align-content:start}
@media (min-width:900px){.proof-card{flex:auto}}
.proof-shot{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#F6F7F9}
.proof-shot img{width:100%;height:auto;display:block}
.proof-tag{position:absolute;right:8px;top:8px;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--copper);padding:4px 8px;border-radius:999px}
.proof-card strong{font-size:1.02rem;letter-spacing:-.01em;padding-inline:4px}
.proof-card p{font-size:.86rem;color:var(--t2);padding-inline:4px}
.proof-src{font-size:.72rem;color:var(--t3);padding-inline:4px}

/* risultati */
.results{background:var(--ink);color:var(--td)}
.results .sub{color:var(--td2)}
.result-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:26px}
@media (min-width:900px){.result-hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px}}
.result-big{background:var(--ink-2);border:1px solid var(--lined);border-radius:var(--r-lg);padding:22px 20px;display:grid;gap:8px;align-content:center}
.result-label{font-size:.82rem;color:var(--td3);font-weight:600}
.result-num .u{font-size:.5em;margin-left:4px;vertical-align:baseline}
.result-num{font-weight:800;font-size:clamp(2.4rem,11vw,4.2rem);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--copper)}
.result-cmp{font-size:.92rem;color:var(--td2)}.result-cmp strong{color:var(--td)}
.chart{margin:0;background:var(--ink-2);border:1px solid var(--lined);border-radius:var(--r-lg);padding:20px 18px 14px}
.chart figcaption{font-size:.82rem;font-weight:600;color:var(--td3)}
.bars{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-items:end;height:190px;margin-top:16px;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:0}
.bar{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;text-decoration:none;color:inherit}
.bar i{display:block;background:var(--copper);border-radius:6px 6px 0 0;transform-origin:bottom;transform:scaleY(0);transition:transform .9s cubic-bezier(.22,1,.36,1)}
.bars.go .bar i{transform:scaleY(1)}
.bar b{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--h) + 6px);font-size:.74rem;font-weight:700;white-space:nowrap;color:var(--td);opacity:0;transition:opacity .3s .6s}
.bars.go .bar b{opacity:1}
.bar small{position:absolute;left:0;right:0;top:100%;margin-top:6px;text-align:center;font-size:.72rem;color:var(--td3)}
.chart-note{margin-top:30px;font-size:.72rem;color:var(--td3)}
.mini-stats{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mini-stats li{background:var(--ink-2);border:1px solid var(--lined);border-radius:var(--r);padding:14px 12px}
.mini-v{display:block;font-weight:800;font-size:clamp(1.2rem,4.8vw,1.7rem);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mini-v .u{color:var(--copper);font-size:.7em}
.mini-l{display:block;font-size:.72rem;color:var(--td3);margin-top:4px;line-height:1.3}
.ba{display:grid;gap:10px;margin-top:14px}
@media (min-width:900px){.ba{grid-template-columns:1fr 1fr;gap:14px}}
.ba-card{border-radius:var(--r-lg);padding:18px 18px;border:1px solid var(--lined);background:var(--ink-2)}
.ba-card.after{background:linear-gradient(180deg,rgba(224,138,60,.16),rgba(224,138,60,.06));border-color:rgba(224,138,60,.4)}
.ba-title{font-size:.8rem;font-weight:700;color:var(--td3);text-transform:uppercase;letter-spacing:.06em}
.ba-card.after .ba-title{color:var(--copper)}
.ba-card ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;font-size:.95rem;color:var(--td2)}
.ba-card.after ul{color:var(--td)}
.ba-card li{padding-left:18px;position:relative}
.ba-card li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:2px;background:var(--td3)}
.ba-card.after li::before{background:var(--copper)}
.table-view{margin-top:14px;font-size:.9rem}
.table-view summary{cursor:pointer;color:var(--td2);font-weight:600;font-size:.86rem}
.table-view table{border-collapse:collapse;margin-top:10px;width:100%;max-width:460px;font-variant-numeric:tabular-nums}
.table-view caption{text-align:left;font-size:.78rem;color:var(--td3);margin-bottom:6px}
.table-view th,.table-view td{text-align:right;padding:7px 8px;border-bottom:1px solid var(--lined)}
.table-view th:first-child,.table-view td:first-child{text-align:left}
.table-view th{font-size:.74rem;color:var(--td3);font-weight:600}
.honest{margin-top:18px;padding:14px 16px;border-left:3px solid var(--copper);background:rgba(224,138,60,.07);color:var(--td2);font-size:.92rem;border-radius:0 12px 12px 0}
.results .btn-block{margin-top:18px}
@media (min-width:900px){.results .btn-block{width:auto;min-width:260px}}

/* lavori */
.work-list{display:grid;gap:10px;margin-top:22px}
@media (min-width:700px){.work-list{grid-template-columns:1fr 1fr;gap:16px}}
@media (min-width:1040px){.work-list{grid-template-columns:repeat(3,1fr)}}
.work-item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px 10px 10px;text-decoration:none;color:var(--t);transition:transform .15s,border-color .15s;-webkit-tap-highlight-color:transparent}
.work-item:active{transform:scale(.99)}
.work-item:hover{border-color:var(--copper-deep)}
.work-thumb{width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--paper-2)}
.work-thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.work-body strong{display:block;font-size:1rem;letter-spacing:-.01em}
.work-body span{display:block;font-size:.8rem;color:var(--t3);margin-top:2px}
.work-body p{display:none}
.work-go{font-size:.84rem;font-weight:700;color:#8A4B12;padding:8px 12px;border-radius:999px;background:var(--copper-soft);white-space:nowrap}
@media (min-width:700px){
  .work-item{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:12px;padding:10px 10px 14px;align-items:start}
  .work-thumb{width:100%;height:auto;aspect-ratio:1200/750;border-radius:12px;border:1px solid var(--line)}
  .work-body{padding-inline:4px}
  .work-body p{display:block;margin-top:8px;font-size:.9rem;color:var(--t2)}
  .work-go{justify-self:start;margin-inline:4px}
}

/* come funziona */
.how{background:var(--paper-2)}
.steps{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0;position:relative}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:16px 0;position:relative}
.steps li:not(:last-child)::before{content:"";position:absolute;left:19px;top:56px;bottom:-8px;width:2px;background:var(--line)}
.step-n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--copper);font-weight:800}
.steps strong{display:block;font-size:1.1rem;letter-spacing:-.01em}
.steps p{margin-top:4px;color:var(--t2);font-size:.95rem}
@media (min-width:900px){.steps{grid-template-columns:repeat(4,1fr);gap:18px}.steps li{grid-template-columns:1fr;padding:0}.steps li:not(:last-child)::before{display:none}.step-n{margin-bottom:14px}}

/* faq */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 0;font-weight:700;font-size:1.02rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:1px solid var(--line);color:var(--copper-deep);font-weight:700;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 0 16px;color:var(--t2);max-width:64ch}
#faq-list{margin-top:14px;border-top:1px solid var(--line)}

/* contatti */
.contact{background:var(--white)}
.channels{display:grid;gap:10px;margin-top:20px}
@media (min-width:600px){.channels{grid-template-columns:1fr 1fr}}
.channel{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--paper);text-decoration:none;color:var(--t)}
.channel b{display:block;font-size:.95rem}.channel span{font-size:.82rem;color:var(--t3)}
.channel-ico{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--copper-soft);color:var(--copper-deep)}
.channel.wa .channel-ico{background:rgba(37,211,102,.15);color:#128C4E}
.form{display:grid;gap:14px;margin-top:20px;max-width:640px}
.form label{display:grid;gap:6px;font-size:.84rem;font-weight:700;color:var(--t2)}
.form input,.form textarea{font:inherit;font-size:1rem;color:var(--t);padding:14px 14px;border-radius:12px;border:1px solid rgba(21,23,27,.18);background:var(--paper);width:100%;transition:border-color .15s,box-shadow .15s}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--copper-deep);box-shadow:0 0 0 3px var(--copper-soft);background:#fff}
.form textarea{resize:vertical;min-height:110px}
.row2{display:grid;gap:14px}
@media (min-width:520px){.row2{grid-template-columns:1fr 1fr}}
.need{border:0;padding:0;margin:0;display:grid;gap:8px}
.need legend{font-size:.84rem;font-weight:700;color:var(--t2);padding:0;margin-bottom:6px}
.need-chips{display:flex;flex-wrap:wrap;gap:8px}
.need-chips .chip{font-size:.88rem;padding:9px 13px}
.check{display:flex!important;gap:10px;align-items:flex-start;font-weight:400!important;font-size:.84rem!important}
.check input{width:20px;height:20px;margin-top:1px;flex:none;padding:0}
.check a{color:var(--copper-deep)}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.form-status{min-height:1.4em;font-size:.92rem;color:var(--t2)}
.form-status.ok{color:#1E6B3A;font-weight:700}.form-status.err{color:#9B2C2C}
.form .is-invalid{border-color:#C94C4C}

/* footer */
.foot{background:var(--ink);color:var(--td2);padding:32px 0 28px}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px}
.foot-nav{display:flex;flex-wrap:wrap;gap:16px}.foot-nav a{text-decoration:none;font-size:.9rem;color:var(--td2)}
.foot-tag{margin-top:14px;font-size:.84rem;color:var(--td3)}
.privacy{margin-top:14px;font-size:.82rem;color:var(--td3);max-width:80ch}.privacy summary{cursor:pointer;color:var(--td2)}.privacy p{margin-top:8px}
.copy{margin-top:14px;font-size:.76rem;color:var(--td3)}

/* dock mobile */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:1fr;gap:10px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:rgba(11,13,16,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--lined);transition:transform .25s}
.dock.has-wa{grid-template-columns:auto 1fr}
.dock.hide{transform:translateY(110%)}
@media (min-width:900px){.dock{display:none}}
[hidden]{display:none!important}
::selection{background:var(--copper);color:var(--ink)}

/* ==========================================================================
   v4 — composizione: oggetti fisici inclinati, fuori-griglia, sovrapposizioni,
   liste editoriali, fasce a tutta larghezza. Sovrascrive le regole sopra.
   ========================================================================== */
.hero{padding-top:34px}
.hero h1{font-size:clamp(2.45rem,9.4vw,4.6rem);letter-spacing:-.04em;line-height:.98}
.hero .badge{border-radius:6px;background:transparent;border:0;padding:0;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--td3)}
.hero .badge .dot{width:22px;height:2px;border-radius:0;background:var(--copper);box-shadow:none}
/* telefoni: fascia inclinata, sborda dai bordi, sfalsati */
.phones-wrap{margin:26px calc(var(--gut) * -1) 0;padding:18px 0 34px;transform:rotate(-4deg) scale(1.04);transform-origin:50% 100%}
.phones{padding:10px 8vw 14px;gap:12px}
.phone:nth-child(odd){transform:translateY(16px)}
.phone:nth-child(3n){transform:translateY(-8px)}
.phones-dots{transform:rotate(4deg);margin-top:0}
@media (min-width:900px){
  .hero{padding-top:70px;padding-bottom:0}
  .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:end}
  .phones-wrap{margin:0 -6vw -10px 0;padding:0 0 60px;transform:rotate(-6deg) scale(1.06) translateX(4%);transform-origin:0 100%}
  .phones{padding:30px 10px 10px}
  .phone{flex-basis:200px}
}
/* numeri: fascia a scorrimento continuo */
.proof{border-top:1px solid var(--lined);border-bottom:1px solid var(--lined);overflow:hidden}
.proof .wrap{max-width:none;padding:0}
.proof-grid{display:flex;width:max-content;gap:0;padding:14px 0;border:0;animation:ticker 32s linear infinite}
.proof:hover .proof-grid{animation-play-state:paused}
.proof-grid li{display:flex;align-items:baseline;gap:12px;padding:6px 34px;background:none;border:0;border-left:1px solid var(--lined);border-radius:0;white-space:nowrap}
.proof-v{font-size:clamp(2rem,6vw,2.8rem)}
.proof-l{margin:0;font-size:.86rem;max-width:none;color:var(--td2)}
@keyframes ticker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.proof-grid{animation:none;width:auto;flex-wrap:wrap;justify-content:center}.proof-grid li{white-space:normal}.proof-grid li[aria-hidden="true"]{display:none}}
/* offerta: lista-indice editoriale, righe a tutta larghezza, rientri alternati */
.services{padding-top:64px}
.services h2{font-size:clamp(2rem,8vw,3.4rem)}
.offer-grid{display:block;margin:22px calc(var(--gut) * -1) 0;border-top:1px solid var(--line)}
.offer{display:grid;grid-template-columns:52px minmax(0,1fr) 26px;align-items:center;gap:8px 12px;min-height:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:18px var(--gut) 18px;transition:background .2s,padding-left .25s}
.offer:nth-child(even){padding-left:calc(var(--gut) + 22px)}
.offer:hover{box-shadow:none;background:rgba(21,23,27,.035);padding-left:calc(var(--gut) + 10px)}
.offer:nth-child(even):hover{padding-left:calc(var(--gut) + 32px)}
.offer-ico{width:40px;height:40px;background:transparent;color:var(--t);border:1px solid var(--line);border-radius:50%}
.offer strong{font-size:1.25rem;letter-spacing:-.025em}
.offer span:not(.offer-ico):not(.offer-go){display:block;font-size:.95rem;color:var(--t2);margin-top:2px}
.offer .offer-go{grid-column:3;grid-row:1;font-size:0;line-height:0;overflow:hidden;width:26px;height:26px;border-radius:50%;background:var(--ink) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23E08A3C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12h13M12 5l7 7-7 7'/></svg>") center/14px no-repeat;margin:0}
.offer>strong,.offer>span:not(.offer-ico):not(.offer-go){grid-column:2}
.offer-ico{grid-row:1/span 2;align-self:center}
.offer.is-menu{background:var(--copper);color:var(--ink);border-color:var(--copper);margin:10px 0;border-radius:0}
.offer.is-menu span:not(.offer-ico):not(.offer-go){color:rgba(11,13,16,.75)}
.offer.is-menu .offer-ico{background:var(--ink);color:var(--copper);border-color:var(--ink)}
.offer.is-menu .offer-go{background-color:var(--ink)}
.offer.is-menu:hover{background:var(--copper-2)}
@media (min-width:900px){
  .offer-grid{margin-inline:0;max-width:960px}
  .offer{grid-template-columns:64px minmax(0,1fr) 34px;padding:24px 12px}
  .offer strong{font-size:1.6rem}
  .offer:nth-child(even){padding-left:72px}
  .offer:nth-child(even):hover{padding-left:84px}
  .offer .offer-go{width:34px;height:34px;background-size:16px}
}
/* menu digitale: passi in una riga, telefono inclinato, QR che si sovrappone */
.menu-sec{overflow:hidden;padding-top:72px}
.mini-steps{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:18px}
.mini-steps li{flex:0 1 auto;flex-direction:row;align-items:center;gap:8px;padding:0;background:transparent;font-size:.92rem;color:var(--t2)}
.mini-steps span{background:var(--copper);color:var(--ink);width:24px;height:24px;font-size:.76rem}
.tool{border-radius:28px;margin-top:22px}
.phone-shell{transform:rotate(-3deg);margin-top:10px}
.preview-hint{margin-top:16px}
.qr-box{position:relative;z-index:2;transform:rotate(1.5deg);box-shadow:0 24px 50px -24px rgba(0,0,0,.8)}
@media (min-width:900px){
  .tool-cols{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:30px}
  .phone-shell{transform:rotate(-5deg) translateY(10px);margin-left:0}
  .qr-box{margin-left:-48px}
}
.plans{margin-top:30px;align-items:start}
.plan{transform:rotate(-1deg)}
.plan.is-best{transform:rotate(1.2deg) translateY(-6px)}
@media (max-width:699px){.plan.is-best{margin-top:-6px}}
/* risultati: il numero grande sporge sopra il bordo della sezione, prove a ventaglio */
.results{overflow:visible;padding-top:0}
.results .wrap>h2{padding-top:0}
.result-hero{margin-top:0}
.results-pull{margin-top:-54px;position:relative;z-index:3}
.result-big{box-shadow:0 30px 60px -30px rgba(0,0,0,.9);transform:rotate(-1.2deg);border-color:rgba(224,138,60,.35)}
.result-num{font-size:clamp(2.7rem,12.5vw,4.8rem)}
.chart{transform:rotate(.6deg)}
@media (min-width:900px){.result-big{transform:rotate(-1.5deg) translateY(-18px)}.chart{transform:rotate(.8deg)}}
.results .wrap>h2,.results .wrap>.sub{position:relative;z-index:1}
.results-head{padding:150px 0 28px}
@media (min-width:900px){.results-head{padding:190px 0 36px}}
.proofs{gap:0;padding-right:18vw}
.proof-card{flex:0 0 78%;margin-right:-26px;transform:rotate(-3deg);box-shadow:0 26px 50px -28px rgba(0,0,0,.85)}
.proof-card:nth-child(2){transform:rotate(2deg) translateY(10px)}
.proof-card:nth-child(3){transform:rotate(-1deg)}
@media (min-width:900px){.proofs{gap:22px;padding-right:0;align-items:start}.proof-card{margin:0;flex:auto}.proof-card:nth-child(1){transform:rotate(-2deg) translateY(12px)}.proof-card:nth-child(2){transform:rotate(1deg) translateY(-10px)}.proof-card:nth-child(3){transform:rotate(1.8deg) translateY(14px)}}
.proof-tag{transform:rotate(6deg);right:-6px;top:10px;border:1px dashed var(--copper)}
/* lavori: primo progetto grande e inclinato, poi righe numerate con rientri */
.work{overflow:hidden}
.work-list{display:block;margin-top:14px}
.work-item{grid-template-columns:40px 64px minmax(0,1fr) auto;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:14px 0}
.work-item:hover{border-color:var(--line);background:rgba(21,23,27,.03)}
.work-n{font-size:.8rem;font-weight:800;color:var(--t3);font-variant-numeric:tabular-nums}
.work-item:nth-child(even){padding-left:18px}
.work-item.is-featured{display:grid;grid-template-columns:1fr;gap:14px;padding:0 0 24px;border-bottom:1px solid var(--line);margin-bottom:6px}
.work-item.is-featured .work-n{display:none}
.work-item.is-featured .work-thumb{width:108%;margin-left:-4%;height:auto;aspect-ratio:1200/750;border-radius:14px;border:1px solid var(--line);transform:rotate(-2.2deg);box-shadow:0 30px 60px -30px rgba(21,23,27,.55);margin-top:12px;margin-bottom:10px}
.work-item.is-featured .work-body strong{font-size:1.5rem;letter-spacing:-.03em}
.work-item.is-featured .work-body p{display:block;margin-top:8px;font-size:.95rem;color:var(--t2)}
.work-item.is-featured .work-go{justify-self:start}
@media (min-width:700px){
  .work-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 24px;align-items:start}
  .work-item{grid-template-columns:1fr;border:1px solid var(--line);border-radius:var(--r);background:var(--white);padding:10px 10px 14px}
  .work-item:nth-child(even){padding-left:10px;transform:translateY(26px)}
  .work-n{position:absolute;right:14px;top:12px;z-index:2;background:var(--ink);color:var(--copper);padding:4px 8px;border-radius:999px;font-size:.72rem}
  .work-item{position:relative}
  .work-item:nth-child(3n){transform:rotate(.8deg)}
  .work-item:nth-child(3n+1){transform:rotate(-.6deg)}
  .work-item.is-featured{grid-column:1/-1;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:30px;padding:18px 22px;transform:none;border:0;background:transparent}
  .work-item.is-featured .work-thumb{width:100%;margin:0;transform:rotate(-2.5deg)}
  .work-item.is-featured .work-n{display:none}
}
@media (min-width:1040px){.work-list{grid-template-columns:repeat(3,1fr)}.work-item:nth-child(even){transform:translateY(0)}.work-item:nth-child(3n+2){transform:translateY(34px)}}
/* come funziona: numeri giganti in colonna */
.steps li{grid-template-columns:72px 1fr;gap:10px;padding:18px 0}
.steps li:not(:last-child)::before{left:28px;top:64px}
.step-n{width:56px;height:56px;font-size:1.6rem;letter-spacing:-.05em;background:transparent;color:var(--copper-deep);border:2px solid var(--ink);border-radius:50%}
@media (min-width:900px){.steps li{grid-template-columns:1fr}.steps li:nth-child(even){transform:translateY(28px)}}
/* contatti: il modulo entra nel footer */
.contact{padding-bottom:0}
.form{margin-top:22px;margin-bottom:-70px;position:relative;z-index:3;transform:rotate(-.6deg);background:var(--white);padding:22px 18px 24px;border-radius:24px;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(21,23,27,.5)}
@media (min-width:600px){.form{padding:30px 28px}}
.foot{padding-top:120px}
/* dock un filo più "oggetto" */
.dock{border-top:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;padding-top:0}
.dock .btn{box-shadow:0 18px 40px -16px rgba(0,0,0,.8)}
.dock .btn-primary{background:var(--copper)}

.results .wrap>h2{margin-top:44px}
@media (min-width:900px){.results .wrap>h2{margin-top:64px}}
.proofs{padding-top:20px;padding-bottom:26px}
.phones{padding-top:18px;padding-bottom:30px}
