@font-face{font-family:"Anybody";font-style:normal;font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url(../fonts/anybody.woff2) format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/geist.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/geistmono.woff2) format("woff2")}

@property --w{syntax:"<number>";inherits:true;initial-value:78}
@property --wt{syntax:"<number>";inherits:true;initial-value:900}

/* La pagina FiveM e' scura per scelta: stesso scheletro dello studio, carattere proprio */
:root{
  --bg:#0b0d10;
  --panel:#13161b;
  --panel2:#1a1e25;
  --ink:#f1f2f4;
  --muted:#9ba2ad;
  --line:rgba(241,242,244,.18);
  --edge:#f1f2f4;
  --accent:#f0c41a;
  --on-accent:#0b0d10;
  --pad:clamp(1.25rem,4vw,3.25rem);
  --max:1380px;
  --ease:cubic-bezier(.16,1,.3,1);
  --display:"Anybody","Arial Narrow",Impact,sans-serif;
  --body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
  --scene:url(../img/scene.jpg);
  --z-bar:50; --z-grain:90; --z-skip:120;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
fieldset{border:0;min-width:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:fixed;left:1rem;top:-4rem;z-index:var(--z-skip);background:var(--accent);color:var(--on-accent);padding:.7rem 1rem;font-weight:600}
.skip:focus{top:1rem}
body::after{content:"";position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:54px;padding:0 1.6rem;border:2px solid var(--edge);
  font-family:var(--display);font-weight:800;font-stretch:90%;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background-color .2s,color .2s}
.btn--solid{background:var(--accent);color:var(--on-accent);box-shadow:5px 5px 0 var(--edge)}
.btn--solid:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--edge)}
.btn--solid:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--edge)}
.btn--line:hover{background:var(--ink);color:var(--bg)}

/* ---------- Header ---------- */
.bar{position:sticky;top:0;z-index:var(--z-bar);height:66px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:2px solid var(--edge)}
.bar .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.mark{font-family:var(--display);font-weight:900;font-stretch:90%;font-size:1.35rem;text-transform:uppercase;display:flex;align-items:baseline;gap:.7rem}
.mark i{font-style:normal;color:var(--accent)}
.mark small{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;color:var(--muted)}
.links{display:flex;gap:2.2rem}
.links a{position:relative;font-weight:500;font-size:.92rem;padding:.4rem 0}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.links a:hover::after{transform:scaleX(1)}
.bar .btn{min-height:42px;padding:0 1.15rem;font-size:.82rem;box-shadow:3px 3px 0 var(--edge)}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(2.5rem,7vh,5rem) clamp(3rem,7vh,5rem);overflow:clip}
.plate{display:inline-flex;flex-direction:column;align-items:center;background:var(--accent);color:var(--on-accent);border:3px solid #000;border-radius:9px;padding:.35rem 1.1rem .5rem;margin-bottom:1.6rem;box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent);animation:rise .8s var(--ease) both}
.plate b{font-family:var(--display);font-weight:900;font-stretch:80%;font-size:1.7rem;letter-spacing:.14em;line-height:1}
.plate small{font-family:var(--mono);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500}
.tune{--w:78;--wt:900;font-family:var(--display);font-stretch:calc(var(--w)*1%);font-weight:var(--wt);text-transform:uppercase;
  font-size:clamp(3rem,14vw,14.5rem);line-height:.86;letter-spacing:.004em;animation:tune 1.7s var(--ease) both}
.tune span{display:block;white-space:nowrap}
.tune em{font-style:normal;color:var(--accent)}
@keyframes tune{from{--w:150;--wt:200}}
.hero__row{margin-top:clamp(1.8rem,4vw,3.2rem);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2rem}
.hero p{max-width:32rem;font-size:clamp(1.08rem,1.5vw,1.28rem);color:var(--muted)}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem 1.25rem}
.hero p,.hero__cta{animation:rise .9s var(--ease) .5s both}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.band{overflow:hidden;background:var(--accent);color:var(--on-accent);border-block:2px solid var(--edge);padding:.85rem 0}
.band__track{display:flex;width:max-content;animation:run 38s linear infinite}
.band__track span{flex:none;padding-right:2.6rem;font-family:var(--display);font-weight:800;font-stretch:80%;font-size:1.2rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
@keyframes run{to{transform:translateX(-50%)}}

.chapter{padding-block:clamp(4.5rem,10vw,8.5rem)}
.chapter h2{font-family:var(--display);font-weight:900;font-stretch:80%;text-transform:uppercase;font-size:clamp(2.6rem,6.6vw,6rem);line-height:.9}
.chapter h2 em{font-style:normal;color:var(--accent)}
.lede{margin-top:1.4rem;max-width:38rem;color:var(--muted);font-size:1.15rem}

/* ---------- Vetrina script ---------- */
.show{margin-top:clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:start}
.pick{position:sticky;top:90px;border-top:2px solid var(--edge)}
.pick label{position:relative;display:grid;grid-template-columns:2.6rem 1fr;align-items:center;padding:1.05rem .2rem;border-bottom:2px solid var(--line);cursor:pointer;transition:padding .35s var(--ease),background-color .25s,color .25s}
.pick input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pick .n{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.pick .t{font-family:var(--display);font-weight:800;font-stretch:84%;font-size:1.4rem;text-transform:uppercase;line-height:1}
.pick small{display:block;margin-top:.3rem;font-family:var(--body);font-weight:400;font-stretch:100%;font-size:.8rem;text-transform:none;color:var(--muted)}
.pick label:hover{padding-left:.7rem}
.pick label:has(:checked){background:var(--accent);color:var(--on-accent);padding-left:.9rem}
.pick label:has(:checked) .n,.pick label:has(:checked) small{color:var(--on-accent)}
.pick label:has(:focus-visible){outline:3px solid var(--accent);outline-offset:3px}

.scr{display:none}
.show:has(#s1:checked) .p1,.show:has(#s2:checked) .p2,.show:has(#s3:checked) .p3,
.show:has(#s4:checked) .p4,.show:has(#s5:checked) .p5,.show:has(#s6:checked) .p6{display:block;animation:swap .6s var(--ease) both}
@keyframes swap{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.screen{position:relative;min-height:clamp(430px,48vw,540px);display:grid;place-items:center;padding:clamp(1rem,3vw,2rem);padding-top:3rem;border:2px solid var(--edge);overflow:hidden;
  background:linear-gradient(180deg,rgba(8,10,13,.55),rgba(8,10,13,.82)),var(--scene) center/cover}
.screen__tag{position:absolute;left:0;top:0;background:var(--accent);color:var(--on-accent);font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .8rem;font-weight:500}
.screen__hint{position:absolute;right:.9rem;bottom:.7rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:rgba(255,255,255,.62);text-transform:uppercase}
.notes{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.2rem,3vw,3rem);padding-top:1.8rem}
.notes h3{font-family:var(--display);font-weight:900;font-stretch:80%;text-transform:uppercase;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:.95}
.notes h3 span{color:var(--accent)}
.notes p{margin-top:.9rem;color:var(--muted);max-width:34rem}
.notes ul{border-top:2px solid var(--line)}
.notes li{display:grid;grid-template-columns:1.4rem 1fr;gap:.4rem;padding:.8rem 0;border-bottom:2px solid var(--line);font-size:.98rem}
.notes li::before{content:"";width:9px;height:9px;margin-top:.5rem;background:var(--accent)}

/* ===== Mini interfacce: ogni script ha la sua grafica, come nel gioco ===== */
.ui{width:100%;max-width:440px;position:relative}

/* 01 Minigiochi */
.lp{background:#12161c;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:1.2rem 1.2rem 1.1rem;box-shadow:0 18px 50px rgba(0,0,0,.5);color:rgba(255,255,255,.95);text-align:center;font-family:"Sora",var(--body);user-select:none}
.lp__head{display:flex;justify-content:space-between;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:.4rem}
.lp svg{width:min(250px,70%);margin-inline:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lp__ring{fill:none;stroke:rgba(255,255,255,.08);stroke-width:14}
.lp__zone{fill:none;stroke:#7eb8a8;stroke-width:14}
.lp__needle{stroke:#f4f6f8;stroke-width:3;stroke-linecap:round}
.lp__hub{fill:#f4f6f8}
.lp__pins{display:flex;justify-content:center;gap:.5rem;margin:.4rem 0 .6rem}
.lp__pin{width:30px;height:8px;background:rgba(255,255,255,.12);border-radius:4px;transition:background-color .25s}
.lp__pin.on{background:#7eb8a8}
.lp__msg{min-height:1.4em;font-size:.88rem;color:rgba(255,255,255,.7)}
.lp.bad{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* 02 Distributore */
.vd{background:linear-gradient(180deg,#c42a33,#8c1a21);border:3px solid #4a0d10;border-radius:10px;padding:.7rem;box-shadow:0 22px 50px rgba(0,0,0,.55);color:#f2ede6;font-family:var(--mono)}
.vd__sign{text-align:center;font-family:var(--display);font-weight:800;font-stretch:80%;letter-spacing:.2em;font-size:.85rem;padding:.25rem;background:#1a0608;color:#ffd9a0;border:1px solid #4a0d10;margin-bottom:.6rem}
.vd__body{display:grid;grid-template-columns:1.5fr 1fr;gap:.6rem}
.vd__glass{background:linear-gradient(135deg,rgba(255,255,255,.1),transparent 40%),#161a1e;border:3px solid #23272c;padding:.5rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;align-content:stretch;grid-auto-rows:1fr}
.vd__item{display:grid;align-content:center;background:#20262c;border:1px solid #333b44;padding:.35rem .2rem;text-align:center;font-size:.62rem;line-height:1.25}
.vd__item b{display:block;font-size:.8rem;color:#ffb000}
.vd__item span{display:block;color:#c9b8ad}
.vd__item.hit{outline:2px solid #39ff8a;background:#17301f}
.vd__panel{background:#23272c;border:3px solid #111;padding:.5rem;display:grid;gap:.45rem;align-content:start}
.vd__lcd{background:#0a120e;border:2px inset #000;padding:.4rem .5rem;color:#ffb000;text-shadow:0 0 6px rgba(255,176,0,.35);min-height:84px;display:grid;align-content:space-between}
.vd__lcd small{display:flex;justify-content:space-between;font-size:.58rem;color:rgba(255,176,0,.6)}
.vd__code{font-size:1.9rem;letter-spacing:.2em;text-align:center;line-height:1.1}
.vd__hint{font-size:.58rem;min-height:1.6em;line-height:1.3}
.vd__keys{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem}
.vd__keys button{background:#3a3f45;border:1px solid #111;border-bottom-width:3px;color:#f2ede6;font-family:var(--mono);font-size:.8rem;padding:.38rem 0;transition:transform .12s,background-color .2s}
.vd__keys button:hover{background:#4a5058}
.vd__keys button:active{transform:translateY(2px);border-bottom-width:1px}
.vd__keys .ok{background:#1f6b3a}
.vd__keys .cl{background:#7e161c}

/* 03 Coltivazione: HUD sulla pianta, come nello script */
.pl{max-width:380px;color:#f3efe6;font-family:var(--body);text-shadow:0 2px 12px rgba(0,0,0,.85)}
.pl__scene{position:relative;height:240px;display:grid;place-items:end center}
.pl__scene>svg{width:min(270px,76%);height:auto;overflow:visible}
.st{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:50% 100%;transition:opacity .7s var(--ease),transform .9s var(--ease)}
[data-stage="1"] .st1,[data-stage="2"] .st2,[data-stage="3"] .st3{opacity:1;transform:none}
.pl__leaf{fill:#9dce7a}.pl__leaf.d{fill:#5f8f4a}
.pl__stem{stroke:#5f8f4a;stroke-width:5;stroke-linecap:round;fill:none}
.pl__fruit{fill:#e08b6d}.pl__sh{fill:rgba(255,255,255,.35)}
.pl__soil{fill:#2b2118}.pl__soil2{fill:#3a2d20}
.pl__prog{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.3rem;opacity:0;pointer-events:none;transition:opacity .25s;background:radial-gradient(circle,rgba(8,10,13,.7),transparent 70%)}
.pl__prog.on{opacity:1}
.pl__prog svg{width:74px;transform:rotate(-90deg)}
.pl__prog circle{fill:none;stroke-width:3}
.pl__prog .bg{stroke:rgba(255,255,255,.18)}
.pl__prog .fg{stroke:#9dce7a;stroke-linecap:round;stroke-dasharray:113;stroke-dashoffset:113}
.pl__prog.on .fg{animation:ring 1.1s linear forwards}
@keyframes ring{to{stroke-dashoffset:0}}
.pl__prog p{font-size:.78rem;letter-spacing:.06em}
.pl__prog i{position:absolute;top:22%;width:5px;height:11px;border-radius:50%;background:#8fd3ff;opacity:0}
.pl__prog i:nth-of-type(1){left:44%}.pl__prog i:nth-of-type(2){left:50%}.pl__prog i:nth-of-type(3){left:56%}
.pl__prog.on.water i{animation:drop .6s ease-in infinite}
.pl__prog.on.water i:nth-of-type(2){animation-delay:.2s}.pl__prog.on.water i:nth-of-type(3){animation-delay:.4s}
@keyframes drop{from{opacity:.9;transform:translateY(-14px)}to{opacity:0;transform:translateY(38px)}}
.pl__hud{padding:.2rem .2rem 0}
.pl__k{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#e6c27a}
.pl__t{font-family:Georgia,"Palatino Linotype",serif;font-size:1.7rem;font-weight:700;line-height:1.1;margin:.1rem 0}
.pl__s{font-size:.82rem;color:rgba(243,239,230,.72);margin-bottom:.7rem;min-height:1.3em}
.pl__m{margin-bottom:.5rem}
.pl__m div{display:flex;justify-content:space-between;font-size:.7rem;letter-spacing:.06em;margin-bottom:.2rem}
.pl__m span.tr{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.16);overflow:hidden}
.pl__m span.tr i{display:block;height:100%;width:calc(var(--v,0)*1%);border-radius:4px;transition:width .5s var(--ease),background-color .4s}
.pl__m.g i{background:#9dce7a}.pl__m.w i{background:#8fd3ff}.pl__m.h i{background:#e6c27a}.pl__m.h.low i{background:#e08b6d}
.pl__keys{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.pl__keys button{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .8rem .4rem .45rem;font-size:.78rem;background:rgba(10,14,18,.65);border:1px solid rgba(255,255,255,.22);border-radius:8px;color:#f3efe6;transition:background-color .2s,transform .15s}
.pl__keys button:hover{background:rgba(157,206,122,.28)}
.pl__keys button:active{transform:translateY(1px)}
.pl__keys button[disabled]{opacity:.45;cursor:default}
.pl__keys kbd{display:grid;place-items:center;width:22px;height:22px;border-radius:5px;background:#f3efe6;color:#14181c;font:600 .72rem var(--mono);text-shadow:none}

/* 04 Fatture */
.bl{display:grid;grid-template-columns:.8fr 1.5fr;gap:.6rem;font-family:Georgia,"Palatino Linotype",serif;color:#1a2228}
.bl__reg{background:#f0ebe3;border-radius:6px;padding:.4rem;display:grid;gap:.3rem;align-content:start;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.bl__reg h4{font:600 .6rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:#7a8791;padding:.2rem .3rem}
.bl__row{display:block;width:100%;text-align:left;padding:.45rem .5rem;border:1px solid #d5cdc0;background:#f7f4ee;border-radius:4px;font-size:.7rem;line-height:1.25;transition:background-color .2s,transform .2s}
.bl__row b{display:block;font-size:.78rem}
.bl__row span{color:#7a8791;font-size:.62rem}
.bl__row.on{background:#fff;border-color:#2f5d50;transform:translateX(4px)}
.bl__doc{position:relative;background:#f7f4ee;border-radius:3px;padding:.9rem 1rem 1rem;box-shadow:0 18px 40px rgba(0,0,0,.45);min-height:300px;font-size:.74rem}
.bl__doc h4{font-size:.98rem;letter-spacing:.04em;border-bottom:2px solid #1a2228;padding-bottom:.35rem;margin-bottom:.5rem}
.bl__doc dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem .6rem}
.bl__doc dt{color:#7a8791}
.bl__tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:2.8rem;padding-top:.4rem;border-top:1px solid #d5cdc0;font-size:.74rem}
.bl__tot b{font-size:1.25rem}
.bl__stamp{position:absolute;right:.9rem;bottom:7.7rem;border:3px solid #2f5d50;color:#2f5d50;padding:.1rem .6rem;font:800 1.15rem var(--display);font-stretch:85%;letter-spacing:.12em;transform:rotate(-12deg) scale(1);opacity:0;transition:opacity .2s}
.bl__stamp.on{opacity:.9;animation:stamp .45s var(--ease)}
.bl__stamp.due{border-color:#9b3b32;color:#9b3b32}
@keyframes stamp{from{transform:rotate(-12deg) scale(2.2);opacity:0}to{transform:rotate(-12deg) scale(1);opacity:.9}}
.bl__pay{margin-top:.8rem;width:100%;min-height:38px;background:#2f5d50;color:#fff;font:600 .72rem var(--body);letter-spacing:.1em;text-transform:uppercase;border-radius:3px;transition:filter .2s,transform .15s}
.bl__pay:hover{filter:brightness(1.15)}
.bl__pay:active{transform:translateY(1px)}
.bl__pay[disabled]{opacity:.45;cursor:default}

/* 05 Menu di pausa */
.pm{background:rgba(7,9,12,.88);border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;color:#f3f5f7;box-shadow:0 28px 80px rgba(0,0,0,.55)}
.pm__sky{height:92px;background:linear-gradient(180deg,rgba(7,9,12,.1),#10141a),var(--scene) center 62%/cover;display:flex;align-items:flex-end;justify-content:space-between;padding:.7rem 1rem}
.pm__sky b{font-family:var(--display);font-weight:900;font-stretch:70%;font-size:2.3rem;letter-spacing:.06em;line-height:.9}
.pm__sky b em{font-style:normal;color:#f0c41a}
.pm__sky kbd{font-family:var(--mono);font-size:.62rem;border:1px solid rgba(255,255,255,.3);padding:.15rem .4rem;border-radius:3px;color:rgba(255,255,255,.7)}
.pm__body{display:grid;grid-template-columns:1fr 1.15fr;gap:1px;background:rgba(255,255,255,.08)}
.pm__card,.pm__list{background:#10141a;padding:.9rem}
.pm__av{width:48px;height:48px;background:#161c24;border:1px solid rgba(255,255,255,.1);border-radius:8px;display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:1.2rem;color:#f0c41a;margin-bottom:.6rem}
.pm__card h4{font-family:var(--display);font-weight:800;font-stretch:78%;font-size:1.25rem;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.pm__card p{font-size:.72rem;color:rgba(243,245,247,.55);margin-top:.2rem}
.pm__duty{display:inline-block;margin-top:.5rem;font-family:var(--mono);font-size:.62rem;color:#f0c41a;background:rgba(240,196,26,.16);padding:.15rem .5rem;border-radius:3px}
.pm__cash{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.7rem;font-family:var(--mono);font-size:.66rem}
.pm__cash span{background:#161c24;padding:.35rem .5rem;border-radius:4px;color:rgba(243,245,247,.6)}
.pm__cash b{display:block;color:#f3f5f7;font-size:.82rem;font-weight:500}
.pm__list li button{width:100%;text-align:left;display:flex;justify-content:space-between;padding:.58rem .7rem;margin-bottom:.25rem;background:#161c24;border-left:3px solid transparent;font-family:var(--display);font-weight:700;font-stretch:80%;font-size:.98rem;letter-spacing:.08em;text-transform:uppercase;transition:border-color .2s,background-color .2s,padding .25s var(--ease)}
.pm__list li button span{font-family:var(--mono);font-size:.6rem;color:rgba(243,245,247,.4);align-self:center}
.pm__list li button:hover,.pm__list li button:focus-visible{border-left-color:#f0c41a;background:rgba(240,196,26,.16);padding-left:1rem}
.pm__list li.out button:hover{border-left-color:#ff5a5a;background:rgba(255,90,90,.14)}

/* 06 Concessionario: i passaggi reali dello script (scheda, contratto, configurazione) */
.dl{--ac:#8ec9b8;max-width:470px;color:#fff;font-family:"Outfit",var(--body)}
.dl__steps{display:flex;gap:.4rem;margin-bottom:.7rem}
.dl__steps button{flex:1;padding:.5rem .3rem;font:500 .64rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);background:rgba(10,14,18,.78);border:1px solid rgba(255,255,255,.18);border-radius:8px;transition:background-color .25s,color .25s}
.dl__steps button.on{background:var(--ac);color:#0c1210;border-color:transparent}
.dl__v{display:none}
.dl[data-step="1"] .v1,.dl[data-step="2"] .v2,.dl[data-step="3"] .v3{display:block;animation:swap .5s var(--ease) both}
.dl__sheet{display:flex;background:rgba(16,20,24,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16);border-radius:20px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.dl__spine{flex:0 0 38px;display:grid;place-items:center;border-right:1px dashed rgba(142,201,184,.32);background:repeating-linear-gradient(180deg,rgba(142,201,184,.12) 0 2px,transparent 2px 10px),linear-gradient(180deg,rgba(142,201,184,.2),rgba(142,201,184,.04))}
.dl__spine span{writing-mode:vertical-rl;transform:rotate(180deg);font:600 .62rem var(--mono);letter-spacing:.3em;color:var(--ac)}
.dl__pn{flex:1;min-width:0;padding:1.1rem 1.1rem 1rem}
.dl__meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.dl__kick{font:500 .62rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.dl__pill{font:700 .56rem var(--body);letter-spacing:.14em;color:var(--ac);background:rgba(142,201,184,.16);border:1px solid rgba(142,201,184,.28);padding:.25rem .55rem;border-radius:99px}
.dl__shop{font-size:.74rem;color:rgba(255,255,255,.5)}
.dl__brand{font-size:.74rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:.5rem}
.dl__name{font-size:1.9rem;font-weight:650;letter-spacing:-.04em;line-height:1.05}
.dl__price{display:flex;justify-content:space-between;align-items:flex-end;margin:.9rem 0 .5rem;padding:.7rem .8rem;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.dl__price small{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.dl__price b{font-size:1.85rem;font-weight:700;letter-spacing:-.04em;color:#d7f0e7;line-height:1}
.dl__hint{font-size:.78rem;color:rgba(255,255,255,.5);min-height:2.4em;line-height:1.5}
.dl__acts{display:grid;gap:.45rem;margin-top:.5rem}
.dl__b{min-height:44px;border-radius:12px;font-weight:600;font-size:.88rem;border:1px solid rgba(255,255,255,.2);color:#fff;transition:filter .2s,transform .15s,background-color .2s}
.dl__b:hover{background:rgba(255,255,255,.08)}
.dl__b:active{transform:scale(.98)}
.dl__b.pri{background:linear-gradient(180deg,#a8d9cb,var(--ac));color:#0c1210;border-color:transparent}
.dl__b.pri:hover{filter:brightness(1.06)}
.dl__b[disabled]{opacity:.4;cursor:default}
.dl__b.full{width:100%}
/* contratto */
.dl__paper{background:#dfe5ea;color:#1a1f24;border-radius:14px;padding:.6rem;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.dl__frame{background:linear-gradient(180deg,#fcfdfe,#f3f5f7);border:1px solid rgba(26,31,36,.14);padding:.9rem 1rem .8rem}
.dl__head{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding-bottom:.6rem;border-bottom:1px solid rgba(26,31,36,.14)}
.dl__seal{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(47,122,106,.55);background:radial-gradient(circle at 35% 30%,rgba(142,201,184,.35),transparent 55%);color:#2f7a6a;font:800 .7rem var(--body);letter-spacing:.08em}
.dl__head p{font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(26,31,36,.55)}
.dl__head h4{font-size:1rem;font-weight:650;letter-spacing:-.01em}
.dl__ref{font:500 .56rem var(--mono);color:rgba(26,31,36,.6);text-align:right;line-height:1.5}
.dl__sec{padding:.5rem 0;border-bottom:1px solid rgba(26,31,36,.1)}
.dl__sec h5{font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:#2f7a6a;margin-bottom:.3rem}
.dl__row{display:grid;grid-template-columns:84px 1fr;gap:.4rem;font-size:.72rem;margin-bottom:.15rem}
.dl__row span{color:rgba(26,31,36,.55)}
.dl__row b{font-weight:500}
.dl__row .m{font-family:var(--mono);font-size:.66rem}
.dl__row .pr{font-size:1.15rem;font-weight:700;color:#2f7a6a}
.dl__lab{display:flex;justify-content:space-between;margin:.55rem 0 .3rem;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(26,31,36,.55)}
.dl__pad{position:relative;display:block;width:100%;height:84px;border-radius:10px;border:1.5px dashed rgba(26,31,36,.2);background:#fff;overflow:hidden;cursor:pointer;color:#1a1f24;transition:border-color .2s}
.dl__pad:hover{border-color:#2f7a6a}
.dl__pad em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:.72rem;color:rgba(26,31,36,.45);transition:opacity .2s}
.dl__pad svg{position:absolute;left:20%;top:8px;width:60%;height:calc(100% - 16px)}
.dl__pad path{fill:none;stroke:#1a1f24;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:260;stroke-dashoffset:260}
.dl__pad.signed em{opacity:0}
.dl__pad.signed path{animation:ink 1.1s ease-out forwards}
@keyframes ink{to{stroke-dashoffset:0}}
.dl__foot{display:grid;grid-template-columns:1fr 1.4fr;gap:.5rem;margin-top:.6rem}
.dl__paper .dl__b{color:#1a1f24;border-color:rgba(26,31,36,.25)}
.dl__paper .dl__b:hover{background:rgba(26,31,36,.06)}
.dl__paper .dl__b.pri{color:#0c1210}
/* configurazione */
.dl__cfg{padding:1.1rem;width:100%}
.dl__cfg h5{font:500 .62rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:.8rem 0 .4rem}
.dl__cfg h5:first-child{margin-top:0}
.dl__cfg h5 b{color:var(--ac);font-weight:500;margin-left:.4rem}
.dl__colors{display:grid;grid-template-columns:repeat(6,1fr);gap:.45rem}
.dl__colors label{position:relative;aspect-ratio:1;border-radius:10px;border:2px solid rgba(255,255,255,.18);cursor:pointer;transition:transform .2s,border-color .2s}
.dl__colors input,.dl__opt input,.dl__sw input{position:absolute;opacity:0;inset:0;cursor:pointer}
.dl__colors label:has(:checked){border-color:#fff;transform:scale(1.1)}
.dl__colors label:has(:focus-visible),.dl__opt label:has(:focus-visible),.dl__sw:has(:focus-visible){outline:3px solid var(--ac);outline-offset:2px}
.c1{background:#8ec9b8}.c2{background:#d96a4a}.c3{background:#e8e9ec}.c4{background:#2b3f6e}.c5{background:#16181c}.c6{background:#c9a24a}
.dl__opt{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.dl__opt label{position:relative;text-align:center;padding:.55rem .3rem;border:1px solid rgba(255,255,255,.18);border-radius:12px;font-size:.78rem;cursor:pointer;transition:background-color .2s,border-color .2s}
.dl__opt label:has(:checked){background:rgba(142,201,184,.16);border-color:rgba(142,201,184,.5)}
.dl__sw{position:relative;display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:.6rem;padding:.55rem .7rem;border:1px solid rgba(255,255,255,.18);border-radius:12px;font-size:.78rem;cursor:pointer}
.dl__sw i{flex:none;width:36px;height:20px;border-radius:99px;background:rgba(255,255,255,.18);position:relative;transition:background-color .2s}
.dl__sw i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .25s var(--ease)}
.dl__sw:has(:checked) i{background:var(--ac)}
.dl__sw:has(:checked) i::after{transform:translateX(16px)}
.dl__tot{display:flex;justify-content:space-between;align-items:baseline;margin:.9rem 0 .6rem;font-size:.78rem;color:rgba(255,255,255,.6)}
.dl__tot b{font-size:1.55rem;color:#fff;font-weight:650;letter-spacing:-.03em}
.dl__done{margin-top:.6rem;text-align:center;font-size:.8rem;color:var(--ac);min-height:1.2em}

/* ---------- Handling / Setup ---------- */
.trio{margin-top:clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:repeat(12,1fr);border-top:2px solid var(--edge)}
.trio > div{padding:1.6rem 1.6rem 1.8rem 0;border-bottom:2px solid var(--line)}
.trio > div:nth-child(1){grid-column:1/6}
.trio > div:nth-child(2){grid-column:6/10;padding-top:3.2rem}
.trio > div:nth-child(3){grid-column:10/13;padding-top:5rem;padding-right:0}
.trio h3{font-family:var(--display);font-weight:900;font-stretch:80%;text-transform:uppercase;font-size:clamp(1.7rem,2.8vw,2.6rem);line-height:.95}
.trio p{margin-top:.8rem;color:var(--muted)}
.trio .num{font-family:var(--mono);font-size:.78rem;color:var(--accent);display:block;margin-bottom:.8rem;letter-spacing:.1em}

/* ---------- Contatti ---------- */
.contact{background:var(--accent);color:var(--on-accent);border-block:2px solid var(--edge);padding-block:clamp(4rem,9vw,7.5rem)}
.contact h2{font-family:var(--display);font-weight:900;font-stretch:78%;text-transform:uppercase;font-size:clamp(3.4rem,13vw,12.5rem);line-height:.84}
.contact__lede{margin-top:1.6rem;max-width:34rem;font-size:1.2rem;font-weight:500}
.rows{margin-top:clamp(2rem,4vw,3.5rem);border-top:2px solid var(--on-accent)}
.rows a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem .2rem;border-bottom:2px solid var(--on-accent);font-family:var(--display);font-weight:800;font-stretch:84%;font-size:clamp(1.3rem,2.6vw,2.2rem);text-transform:uppercase;transition:padding .35s var(--ease),background-color .25s,color .25s}
.rows a span{font-family:var(--mono);font-weight:500;font-size:.8rem;letter-spacing:.06em;text-transform:none}
.rows a:hover{padding-inline:1rem;background:var(--on-accent);color:var(--accent)}

footer{padding-block:2rem 2.4rem;font-size:.9rem;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem}
footer nav{display:flex;gap:1.6rem;flex-wrap:wrap}
footer a:hover{color:var(--ink)}

/* ---------- Rivelazione allo scroll (contenuto visibile se il browser non la supporta) ---------- */
.rv-on .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv-on .reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .show{grid-template-columns:1fr}
  .pick{position:static;display:grid;grid-template-columns:repeat(2,1fr);column-gap:1rem}
  .notes{grid-template-columns:1fr}
  .trio > div:nth-child(n){grid-column:1/-1;padding:1.6rem 0 1.8rem}
}
@media (max-width:640px){
  .tune{font-size:15vw}
  .links{gap:1.1rem}
  .links a{font-size:.84rem}
  .bar .btn{display:none}
  .bar .wrap{gap:.8rem}
  .mark small{display:none}
  .mark{font-size:1.15rem}
  .vd__body{grid-template-columns:1fr}
  .bl{grid-template-columns:1fr}
  .pm__body{grid-template-columns:1fr}
  .pick .t{font-size:1.1rem}
  .screen__hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .band__track{animation:none}
  .rv-on .reveal{opacity:1;transform:none}
}

/* Barra uguale su tutte le pagine: logo a sinistra, link a destra */
.bar{color:var(--ink);background:var(--bg)}
.bar a{color:var(--ink)}
.bar .wrap{justify-content:space-between}
.links{margin-left:auto}
.links a[aria-current]::after{transform:scaleX(1)}
.links a[aria-current]{font-weight:600}
/* titoli di sezione: la larghezza dei caratteri si regola mentre entrano */
@keyframes widen{from{--w:106}to{--w:80}}
@keyframes maskin{from{clip-path:inset(0 0 100% 0);transform:translateY(38%)}to{clip-path:inset(0);transform:none}}
.chapter h2{font-stretch:calc(var(--w,80)*1%)}
@supports (animation-timeline:view()){
  .chapter h2{--w:80;animation:widen linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
}
@media (max-width:640px){.chapter h2{animation:none!important;--w:80}}
.rv-on .reveal h2{clip-path:inset(0 0 100% 0)}
.rv-on .reveal.in h2{animation:maskin .9s var(--ease) both}
@media (prefers-reduced-motion:reduce){.rv-on .reveal h2{clip-path:none}}
.pt0{padding-top:0}
.ptm{padding-top:clamp(2rem,4vw,3rem)}