@font-face{font-family:"Archivo";src:url(fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  --fluo:#f4ff2e;
  --fluo-deep:#e2ee00;
  --ink:#111111;
  --ink-2:#2b2b22;
  --rosa:#ff3d8b;
  --carta:#ffffff;
  --carta-2:#f3f3ee;
  --mare:#0058a8;
  --mare-2:#00468a;
  --r-s:4px;--r-m:6px;--r-l:8px;
  --ui:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --disp:"Archivo","Arial Narrow",sans-serif;
  --gut:clamp(16px,4vw,48px);
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 2px 4px rgba(17,17,17,.10),0 14px 32px -8px rgba(17,17,17,.30);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;font:400 1.0625rem/1.55 var(--ui);color:var(--ink);background:var(--carta);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:2px}
::selection{background:var(--rosa);color:#fff}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:var(--r-s)}
.nol h2 :focus-visible,.foot :focus-visible,.ticket :focus-visible{outline-color:var(--fluo)}
html{scrollbar-color:var(--ink) var(--carta-2)}
.ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--fluo);padding:10px 14px;border-radius:var(--r-m)}
.skip:focus{left:8px}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gut)}

h1,h2,h3{font-family:var(--disp);font-stretch:68%;font-weight:900;line-height:.92;letter-spacing:-.01em;text-wrap:balance;margin:0}
h2{font-size:clamp(2.6rem,6.4vw,5.2rem);margin-bottom:.35em;max-width:16ch}
h3{font-size:1.75rem;font-stretch:75%;font-weight:800;line-height:1;margin-bottom:.35em}
.lead{font-size:clamp(1.08rem,1.6vw,1.3rem);max-width:58ch;margin:0 0 1.2em}
.lead.small{font-size:1rem;opacity:.85}

/* Pulsanti Fluent */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:44px;padding:.6em 1.1em;border-radius:var(--r-m);border:2px solid transparent;font:600 1rem/1.1 var(--ui);text-decoration:none;cursor:pointer;transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-xl{min-height:56px;padding:.8em 1.4em;font-size:1.1rem}
.btn-ink{background:var(--ink);color:var(--fluo)}
.btn-ink:hover{background:#000;box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.btn-paper{background:var(--carta);color:var(--ink);border-color:var(--ink)}
.btn-paper:hover{background:var(--carta-2)}
.btn-ghost{background:transparent;color:inherit;border-color:currentColor}
.btn-ghost:hover{background:rgba(17,17,17,.07)}
.btn-yellow{background:var(--fluo);color:var(--ink)}
.btn-yellow:hover{background:#fff}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* Barra comandi */
.bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:20px;padding:10px var(--gut);background:rgba(244,255,46,.92);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid rgba(17,17,17,.14)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-m);background:var(--ink);color:var(--fluo);font:900 1.05rem/1 var(--disp);font-stretch:75%}
.brand-name{font:800 1.35rem/1 var(--disp);font-stretch:70%;display:flex;flex-direction:column}
.brand-name b{font-weight:500;font-size:.72em;letter-spacing:.02em}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{padding:8px 12px;border-radius:var(--r-s);font-weight:600;font-size:.96rem;text-decoration:none}
.nav a:hover{background:rgba(17,17,17,.08)}
.nav a[aria-current="true"]{background:var(--ink);color:var(--fluo)}
.bar-actions{display:flex;gap:8px}

/* Hero */
.hero{background:var(--fluo);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(28px,5vw,72px) var(--gut) clamp(48px,6vw,96px);max-width:none}
.hero-copy{max-width:640px;justify-self:end;width:100%}
.hero h1{font-size:clamp(3.6rem,9.6vw,6rem);font-stretch:62%;line-height:.86;margin-bottom:.32em}
.hl{display:inline-block;line-height:1;padding:.02em .12em .12em;margin-bottom:.06em;background:var(--ink);color:var(--fluo);border-radius:var(--r-s);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero-lead{font-size:clamp(1.12rem,1.7vw,1.35rem);max-width:34ch;margin:0 0 1.4em;color:var(--ink-2)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-meta{margin:1.3em 0 0;font-weight:600;font-size:.95rem}

.sign{position:relative;margin:0;max-width:600px;width:100%}
.sign-board{position:relative;background:var(--carta);padding:12px;border-radius:var(--r-l);box-shadow:var(--shadow);transform:rotate(1.6deg)}
.sign-board img{border-radius:var(--r-s);aspect-ratio:1400/1232;object-fit:cover}
.pin{position:absolute;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--fluo);font:900 1.2rem/1 var(--disp);border:3px solid var(--fluo);box-shadow:0 4px 10px rgba(0,0,0,.35)}
.p1{left:58%;top:12%}.p2{left:22%;top:66%}.p3{left:78%;top:52%}
.legend{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:6px;font-weight:600;font-size:.98rem}
.legend b{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:8px;border-radius:50%;background:var(--ink);color:var(--fluo);font:900 .85rem/1 var(--disp)}
.star{position:absolute;right:-18px;top:-34px;width:clamp(120px,13vw,160px);aspect-ratio:1;display:grid;place-items:center;text-decoration:none;color:var(--ink);transform:rotate(-12deg);transition:transform .4s var(--ease)}
.star svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--rosa);filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.star span{position:relative;text-align:center;font:700 .95rem/1 var(--disp);font-stretch:75%;text-transform:uppercase;color:var(--ink)}
.star b{font-size:1.65em;font-weight:900;display:block}
.star:hover{transform:rotate(-4deg) scale(1.05)}

/* Ingresso a strati, come una stampa: fondo, foto, prezzo, nero per ultimo */
@media (prefers-reduced-motion:no-preference){
  .js .layer{animation:stampa .9s var(--ease) backwards}
  .js .sign{animation-delay:.05s}
  .js .star{animation-name:timbro;animation-delay:.45s}
  .js .hero h1{animation-delay:.7s}
  .js .hero-lead{animation-delay:.85s}
  .js .hero-cta,.js .hero-meta{animation-delay:.95s}
}
@keyframes stampa{from{clip-path:inset(0 100% 0 0);transform:translateX(-12px)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes timbro{from{opacity:0;transform:rotate(-40deg) scale(1.6)}to{opacity:1;transform:rotate(-12deg) scale(1)}}

/* Ticker */
.ticker{background:var(--ink);color:var(--fluo);overflow:hidden;border-block:4px solid var(--rosa)}
.ticker-track{display:flex;width:max-content;animation:scorri 38s linear infinite}
.ticker span{font:800 clamp(1.3rem,2.4vw,1.9rem)/1 var(--disp);font-stretch:70%;text-transform:uppercase;padding:16px 26px;white-space:nowrap}
.ticker span::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:52px;background:var(--rosa);border-radius:50%;vertical-align:middle}
@keyframes scorri{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;padding:8px var(--gut)}.ticker [aria-hidden="true"]{display:none}.ticker span{padding:6px 0}.ticker span::after{display:none}.ticker span+span::before{content:"";display:inline-block;width:.38em;height:.38em;margin:0 .6em;background:var(--rosa);border-radius:50%;vertical-align:middle}}

/* Vela */
.vela{padding:clamp(64px,9vw,128px) 0;background:var(--carta)}
.steps{list-style:none;counter-reset:s;margin:48px 0 40px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:3px solid var(--ink)}
.steps li{counter-increment:s;padding:24px 28px 8px 0;border-right:1px solid rgba(17,17,17,.18)}
.steps li+li{padding-left:28px}
.steps li:last-child{border-right:0}
.steps li::before{content:counter(s);display:block;font:900 5rem/.8 var(--disp);font-stretch:62%;color:var(--rosa);margin-bottom:16px}
.steps p{margin:0;max-width:34ch}
.usi{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.usi li{padding:8px 16px;border-radius:999px;background:var(--fluo);font-weight:700;font-size:.98rem}

/* Lavori */
.lavori{background:var(--rosa);padding:clamp(64px,9vw,128px) 0 clamp(72px,9vw,128px)}
.lavori h2{color:var(--ink)}
.board{max-width:1400px;margin:40px auto 0;padding:0 var(--gut);display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(120px,14vw,190px);gap:clamp(12px,1.6vw,22px)}
.ph{position:relative;margin:0;grid-column:span 4;grid-row:span 2;border-radius:var(--r-l);overflow:hidden;background:var(--ink);box-shadow:var(--shadow)}
.ph-wide{grid-column:span 8}
.ph-tall{grid-row:span 3}
.board .ph:nth-child(1){grid-column:1/9;grid-row:1/3}.board .ph:nth-child(2){grid-column:9/13;grid-row:1/4}
.board .ph:nth-child(3){grid-column:1/5;grid-row:3/5}.board .ph:nth-child(4){grid-column:5/9;grid-row:3/6}
.board .ph:nth-child(5){grid-column:9/13;grid-row:4/6}.board .ph:nth-child(6){grid-column:1/5;grid-row:5/7}
.ph-fill{grid-column:5/13;grid-row:6/7;margin:0;align-self:center;font:900 clamp(2rem,4vw,3.4rem)/.9 var(--disp);font-stretch:62%;color:var(--ink);text-transform:uppercase}
.ph-fill a{text-decoration:none;border-bottom:4px solid var(--ink)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.ph img[src*="nuova-apertura"]{object-position:8% 50%}.ph img[src*="conad"]{object-position:92% 50%}.ph img[src*="outlet"]{object-position:50% 100%}
.ph:hover img{transform:scale(1.04)}
.ph figcaption{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);background:var(--fluo);color:var(--ink);padding:8px 12px;border-radius:var(--r-s);font-size:.88rem;line-height:1.25;transform:rotate(-1.5deg);box-shadow:0 4px 10px rgba(0,0,0,.25)}
.ph figcaption b{display:block;font:900 1.15rem/1 var(--disp);font-stretch:70%;text-transform:uppercase}

/* Preventivo */
.prev{background:var(--fluo);padding:clamp(64px,9vw,128px) 0}
.prev-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:start}
.form{display:grid;gap:22px;margin-top:8px}
fieldset{border:0;margin:0;padding:0}
legend,.field>span{font-weight:700;font-size:.98rem;margin-bottom:10px;padding:0;display:block}
.field>span i{font-style:normal;font-weight:500;opacity:.75}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;min-height:42px;padding:8px 16px;border-radius:var(--r-m);border:2px solid var(--ink);background:var(--carta);font-weight:600;transition:background .15s var(--ease),color .15s var(--ease)}
.chips input:checked+span{background:var(--ink);color:var(--fluo)}
.chips input:focus-visible+span{outline:3px solid var(--rosa);outline-offset:2px}
.chips label:hover span{background:var(--carta-2)}
.chips label:hover input:checked+span{background:#000}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.field{display:block}
.field input,.field select,.field textarea{width:100%;min-height:46px;padding:10px 12px;border:1px solid rgba(17,17,17,.35);border-bottom:2px solid var(--ink);border-radius:var(--r-s);background:var(--carta);font:inherit;color:var(--ink)}
.field textarea{resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#5c5c4e}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--rosa);box-shadow:0 2px 0 var(--rosa)}
.field [aria-invalid="true"]{border-color:#b3002d;border-bottom-color:#b3002d}
.form-err{margin:0;padding:10px 14px;border-radius:var(--r-s);background:var(--ink);color:#fff;font-weight:600}
.form-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.ticket{position:sticky;top:96px;background:var(--ink);color:#fff;border-radius:var(--r-l);padding:28px;box-shadow:var(--shadow);transform:rotate(-1.2deg)}
.ticket-head{margin:0;font:800 1rem/1 var(--disp);font-stretch:75%;text-transform:uppercase;color:var(--fluo);letter-spacing:.06em}
.ticket-big{margin:.15em 0 .4em;font:900 clamp(3rem,6vw,4.6rem)/.9 var(--disp);font-stretch:62%;color:var(--fluo);text-transform:uppercase;overflow-wrap:anywhere}
.ticket dl{margin:0;display:grid;gap:0}
.ticket dl div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.18)}
.ticket dt{font-weight:600;color:#c9c9b8}
.ticket dd{margin:0;font-weight:700}
.ticket-foot{margin:16px 0 0;font-size:.92rem;color:#d8d8c8}
.ticket.flash{animation:flash .5s var(--ease)}
@keyframes flash{from{box-shadow:0 0 0 6px var(--rosa)}}

/* Noleggio */
.nol{background:var(--ink);color:#fff;padding:clamp(64px,9vw,128px) 0}
.nol-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.h-en{display:block;margin-top:.4em;font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.15;letter-spacing:0;font-stretch:100%;font-weight:700;color:var(--fluo)}
.nol h2{color:#fff}
.nol-note{margin:0;font-weight:700;color:var(--fluo)}
.form-dark{background:var(--carta);color:var(--ink);padding:clamp(20px,3vw,32px);border-radius:var(--r-l);box-shadow:0 20px 40px -16px rgba(0,0,0,.5)}
.form-dark .field input,.form-dark .field select{border-bottom-color:var(--mare)}
.form-dark .field input:focus,.form-dark .field select:focus{border-bottom-color:var(--mare);box-shadow:0 2px 0 var(--mare)}
.form-dark .form-err{background:var(--rosa);color:var(--ink)}
.form-dark .btn{width:100%}
.form-dark .btn-yellow{background:var(--ink);color:var(--fluo)}
.form-dark .btn-yellow:hover{background:#000}

/* Guida */
.guida{background:var(--carta);padding:clamp(64px,9vw,128px) 0;overflow:hidden}
.guida-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,6vw,96px);align-items:center}
.phone{justify-self:center;width:min(300px,70vw);padding:10px;border-radius:38px;background:var(--ink);box-shadow:var(--shadow);transform:rotate(-3deg)}
.phone img{border-radius:30px;aspect-ratio:430/932;object-fit:cover;object-position:top;background:#ddd}

/* App */
.app{background:var(--fluo);padding:clamp(56px,7vw,96px) 0}
.app-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.app h2{margin:0}
.install-tip,.ios-tip,.installed{font-weight:600;margin:0}

/* Footer */
.foot{background:var(--ink);color:#e9e9dc;padding:56px 0 40px;font-size:.98rem}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px 48px}
.foot p{margin:0 0 12px}
.foot a{color:var(--fluo);display:inline-flex;gap:6px;align-items:center}
.foot-name{font:900 2rem/1 var(--disp);font-stretch:66%;color:var(--fluo);text-transform:uppercase}
.credit{grid-column:1/-1;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);font-size:.88rem;color:#b9b9aa}

/* Dock mobile */
.dock{display:none}

@media (max-width:1060px){
  .nav{display:none}
  .bar-actions{margin-left:auto}
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:24px}
  .hero-copy{justify-self:start}
  .sign{justify-self:center;margin-top:12px}
  .star{right:4px;top:-40px}
  .steps{grid-template-columns:1fr;border-top:0}
  .steps li,.steps li+li{padding:20px 0;border-right:0;border-top:3px solid var(--ink)}
  .steps li::before{font-size:3.6rem;margin-bottom:8px}
  .board{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .board .ph{grid-column:span 2!important;grid-row:span 2!important}
  .ph-fill{grid-column:1/-1;grid-row:auto}
  .prev-grid,.nol-grid,.guida-grid,.app-grid,.foot-grid{grid-template-columns:1fr}
  .ticket{position:static;transform:none}
  .guida-grid .phone{order:2}
  .bar .btn-ink span{display:none}
  .bar .btn-ink{width:44px;padding:0}
  .bar .install-btn span{display:none}
  .bar .install-btn{width:44px;padding:0}
  body{padding-bottom:72px}
  .dock{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--ink);padding:6px 6px calc(6px + env(safe-area-inset-bottom));gap:6px}
  .dock a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:var(--r-m);color:var(--fluo);text-decoration:none;font-weight:700;font-size:.85rem}
  .dock a:nth-child(2){background:var(--fluo);color:var(--ink)}
}
@media (max-width:420px){
  .hero h1{font-size:3.3rem}
  .hero-cta .btn{width:100%}
  .ph-tall{grid-column:span 2}
}
@media print{.bar,.dock,.ticker,.app{display:none}}