/* Robolero — stile condiviso del sito (home + valutazione).
   Il blog ha un suo foglio a parte: blog/style.css */
/* ====== IDENTITA' ROBOLERO ======
   Il nome e' robot + bolero. Il Bolero di Ravel e' un crescendo costruito su un
   ritmo che si ripete: e' la tesi di mercato del progetto (3,1 -> 17,5 miliardi).
   Da li' la palette: bordeaux come identita' (latino, non il solito blu-verde da
   startup tech), ember come colore dell'azione, ottone per il valore e i prezzi.
   Tema unico scuro: nero, bianco e oro in ogni momento della giornata.

   I nomi vecchi (--teal, --purple...) restano come alias perche' 169 regole li
   usano gia': cambiando qui cambia tutta l'interfaccia. Il codice nuovo usa i
   nomi semantici (--brand, --action, --value). */
:root{
  color-scheme:dark;
  /* PALETTE (16 settembre): nero, bianco, oro. Nient'altro. Film
     futuristico: la carta e' nera, l'inchiostro e' bianco, l'accento e'
     un solo oro. Rosso e verde esistono SOLO come segnale sui tasti e sugli
     stati (--ok / --bad): mai come decorazione. */
  /* superfici */
  --paper:#000000; --surface:#0c0c0c; --surface-2:#161616; --line:#262626;
  /* testo */
  --ink:#ffffff; --muted-ink:#9c9890;
  /* identita': oro. Sul bianco l'oro chiaro non si legge, quindi il testo
     usa l'oro profondo e i fondi pieni l'oro chiaro. */
  --sun:#f2c56b;                       /* l'oro della visiera, fisso in entrambi i temi */
  --brand:#f2c56b; --brand-soft:#f7d58a;
  --action:#f2c56b; --action-soft:#f7d58a;
  --value:#f2c56b;
  /* fondo pieno "di marca" e il suo testo: nero con scritte d'oro sul chiaro,
     oro con scritte nere sullo scuro */
  --brand-bg:#f2c56b; --on-brand:#0a0a0a;
  /* stati semantici: separati dall'accento, non sono decorazione */
  --ok:#4ec98a; --warn:#e0b04a; --bad:#ef7b7b;
  /* testo sopra i fondi d'oro: sempre nero */
  --on-accent:#0a0a0a;
  /* VERDE D'AZIONE (decisione del titolare, 19/09 sera): TUTTI i tasti primari (.btn.primary,
     compresi «Metti in vendita» e «Pubblica») sono verdi; il rosso resta a errori e stati
     negativi (--bad), l'oro a informazione e link. Un solo posto: cambiando qui cambiano tutte
     le pagine e i template. Testo #04130c su #18a85a (estremo scuro del gradiente) = 6,2:1,
     su #3be08a = 11:1 (AA e AAA). Uguale nei due temi: il verde e' un segnale, non un colore
     di superficie. Le sole eccezioni, dichiarate piu' sotto: il banner del consenso (neutro per
     legge), la banda .bigcta (fondo «di marca») e il link del menu (a.cta, oro). */
  --go-a:#3be08a; --go-b:#18a85a; --on-go:#04130c; --go-glow:rgba(44,214,130,.32);
  --radius:18px;
  --shadow:0 2px 4px rgba(0,0,0,.5),0 12px 32px rgba(0,0,0,.6);

  /* ---- PALCO: i blocchi cinematografici della home (hero, vetrina, scene, .b3d)
     condividono questi token scuri, senza colori di tema duplicati. ---- */
  --stage-bg:#000; --stage-ink:#fff; --stage-muted:rgba(255,255,255,.72);
  --stage-line:rgba(255,255,255,.12); --stage-line-strong:rgba(255,255,255,.45); --stage-chip:rgba(255,255,255,.08);
  --stage-accent:var(--sun); --stage-stroke:rgba(242,197,107,.26); --stage-glow:rgba(242,197,107,.55);
  --stage-scan:rgba(255,255,255,.035);
  --stage-tear:linear-gradient(90deg,transparent,rgba(242,197,107,.55) 30%,rgba(255,255,255,.8) 50%,rgba(242,197,107,.55) 70%,transparent);
  --stage-text-shadow:0 2px 24px rgba(0,0,0,.5);
  /* scene del mondo (20/09): palco a filo del nero con sfumatura sopra e sotto. */
  --scene-mask:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent); --scene-radius:0; --scene-shadow:none; --scene-scrim:.55; --scene-gutter:0px;
  --slab:#000;                                 /* la lastra nera sotto i render */
  --slab-bg:transparent;
  --slab-radius:28px;
  /* il robot del hero usa la sfumatura radiale sul palco nero. */
  --slab-geom:inset(4% 18% 22% 18% round 36px);
  --slab-clip:none;
  --robot-mask:radial-gradient(ellipse 58% 68% at 50% 40%,#000 50%,transparent 100%);
  --vcard-mask:radial-gradient(ellipse 70% 78% at 50% 50%,#000 62%,transparent 100%);
  --particles-filter:none;
  /* i titoli 3D (.t3d) hanno i loro token per tema (--t3d-faccia-*, --t3d-estrusione) nel blocco «home+annunci» in fondo */

  /* alias di compatibilita' col CSS esistente */
  --bg:var(--paper); --bg2:var(--surface-2); --card:var(--surface); --card2:var(--surface-2);
  --txt:var(--ink); --muted:var(--muted-ink);
  --teal:var(--brand); --blue:var(--brand-soft); --purple:var(--brand);
  --pink:var(--brand-soft); --gold:var(--value); --orange:var(--action);
}
/* la lastra del hero sul telefono: l'immagine e' larga 1,6 volte lo schermo (hero.js), quindi il
   ritaglio stringe di piu' ai lati; vale per la geometria, il tema decide se applicarla */
@media(max-width:700px){:root{--slab-geom:inset(6% 20.5% 24% 20.5% round 24px)}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--teal);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.center{text-align:center}

/* header */
header{position:sticky;top:0;z-index:90;background:rgba(7,7,16,.8);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{font-weight:800;font-size:22px;letter-spacing:-.6px;display:flex;align-items:center;color:var(--txt)}
.logo .mark{margin-right:9px;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--teal),var(--purple));display:flex;align-items:center;justify-content:center;font-size:16px}
.logo b{background:linear-gradient(90deg,var(--teal),var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav nav a{color:var(--muted);font-size:14px;margin-left:22px;font-weight:500;transition:.15s}
.nav nav a:hover{color:var(--txt)}
.nav nav a.cta{background:linear-gradient(135deg,var(--teal),var(--blue));color:#04130c;padding:9px 18px;border-radius:999px;font-weight:800}
.nav nav a.lang{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;margin-left:14px;line-height:1}
.nav nav a.lang:hover{border-color:var(--brand)}
@media(max-width:820px){.nav nav a:not(.cta):not(.lang){display:none}}
/* sotto i 520px il bottone del menu andava a capo e finiva sopra il logo */
@media(max-width:520px){
  .nav nav a.cta{white-space:nowrap;font-size:12.5px;padding:8px 14px;margin-left:10px}
  .logo{font-size:18px;letter-spacing:-.4px}
  .logo .mark{width:26px;height:26px;font-size:14px;border-radius:8px}
}

/* hero */
.hero{position:relative;padding:60px 0 50px;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none;z-index:0}
.blob.a{width:420px;height:420px;background:var(--purple);top:-120px;right:-60px}
.blob.b{width:360px;height:360px;background:var(--teal);bottom:-160px;left:-80px}
.blob.c{width:300px;height:300px;background:var(--pink);top:40px;left:40%;opacity:.25}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
@media(max-width:880px){.hero .wrap{grid-template-columns:1fr;gap:26px}}
.badge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:#04130c;background:linear-gradient(135deg,var(--teal),var(--gold));border-radius:999px;padding:6px 14px;margin-bottom:20px;letter-spacing:.3px}
h1{font-size:clamp(34px,6vw,60px);line-height:1.03;letter-spacing:-2px;font-weight:800;margin-bottom:18px}
h1 .g1{background:linear-gradient(90deg,var(--teal),var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h1 .g2{background:linear-gradient(90deg,var(--pink),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sub{font-size:18px;color:var(--muted-ink);max-width:520px;margin-bottom:26px}
.btn{display:inline-block;font-weight:800;padding:14px 26px;border-radius:999px;border:none;cursor:pointer;font-size:16px;transition:transform .15s,box-shadow .15s}
.btn.primary{background:linear-gradient(135deg,var(--teal),var(--blue));color:#04130c;box-shadow:0 8px 30px rgba(242,197,107,.25)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line);margin-left:8px}
.btn.ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn.sm{padding:10px 18px;font-size:14px}
.chips{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.chip{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:10px 16px}
.chip b{display:block;font-size:20px;background:linear-gradient(90deg,var(--teal),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.chip span{font-size:12px;color:var(--muted)}
/* hero art */
.heroart{position:relative}
.heroframe{border-radius:24px;overflow:hidden;border:1px solid var(--line);transform:rotate(-2deg);box-shadow:0 30px 80px rgba(0,0,0,.5);background:#000}
.heroframe .photo{height:360px}
.herotag{position:absolute;background:rgba(7,7,16,.85);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-size:13px;font-weight:700}
.herotag.t1{top:18px;left:-14px;color:var(--teal)}
.herotag.t2{bottom:24px;right:-12px;color:var(--gold)}
@media(max-width:880px){.heroframe{transform:none}.heroframe .photo{height:280px}.herotag{display:none}}

/* photo + fallback */
.photo{position:relative;width:100%;background:#000}
/* assoluta come il segnaposto .phfb: cosi' riempie il riquadro senza dipendere
   dall'altezza del genitore, che con height:auto non era calcolabile e lasciava
   una fascia vuota sotto la foto. Ogni .photo ha gia' un height o un min-height. */
/* i render dei robot sono su nero pieno: contain su fondo nero = mai un taglio, mai un bordo */
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.phfb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(140deg,var(--c1,#000),var(--c2,#3a2f14));color:#fff}
.phfb svg{width:46%;max-width:160px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.3))}
.phfb b{font-size:14px;font-weight:800;letter-spacing:.3px;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.phfb small{font-size:10px;opacity:.85;background:rgba(0,0,0,.25);padding:3px 9px;border-radius:999px}

/* sections */
section{padding:62px 0;position:relative}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:10px;
  background:linear-gradient(90deg,var(--teal),var(--pink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h2{font-size:clamp(26px,4vw,40px);letter-spacing:-1px;margin-bottom:12px;font-weight:800}
.lead{color:var(--muted);max-width:620px;margin-bottom:30px;font-size:16px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:relative;overflow:hidden}
.step .n{font-size:13px;font-weight:800;color:#04130c;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.step h4{font-size:18px;margin-bottom:6px}.step p{font-size:14px;color:var(--muted)}
.step.s1 .n{background:var(--teal)}.step.s2 .n{background:var(--gold)}.step.s3 .n{background:var(--pink)}

/* filter chips */
.fchips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.fchip{background:var(--card);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s}
.fchip:hover{color:var(--txt)}
.fchip.on{background:linear-gradient(135deg,var(--teal),var(--blue));color:#04130c;border-color:transparent}

/* model grid */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.mcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:.2s}
.mcard:hover{transform:translateY(-4px);border-color:var(--teal);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.mcard .photo{height:200px}
.mcard .pill{position:absolute;top:12px;left:12px;font-size:10px;font-weight:800;padding:5px 11px;border-radius:999px;letter-spacing:.4px;z-index:2}
.mcard .body{padding:18px}
.mcard .brand{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.mcard h4{font-size:19px;margin:3px 0 8px}
.mcard .desc{font-size:13px;color:var(--muted);min-height:36px}
.mcard .prow{display:flex;justify-content:space-between;align-items:flex-end;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.mcard .prow b{font-size:22px}.mcard .prow .lbl{font-size:11px;color:var(--muted)}
.mcard .used{font-size:12px;color:var(--teal);text-align:right}
.pill.cons{background:var(--sun);color:#0a0a0a}
.pill.dev{background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff}
.pill.ind{background:linear-gradient(135deg,var(--gold),var(--orange));color:#2a1500}

/* marketplace */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px;align-items:center}
.toolbar select{background:var(--card);border:1px solid var(--line);color:var(--txt);padding:11px 14px;border-radius:11px;font-size:14px}
.toolbar .count{margin-left:auto;color:var(--muted);font-size:13px}
.listings{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.lcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:.18s}
.lcard:hover{transform:translateY(-3px);border-color:var(--teal)}
.lcard .photo{height:150px}
.deal{position:absolute;top:10px;left:10px;font-size:10px;font-weight:800;padding:5px 10px;border-radius:999px;z-index:2}
.deal.top{background:var(--teal);color:#04130c}.deal.good{background:var(--blue);color:#04122e}
.deal.fair{background:var(--gold);color:#2a1c00}.deal.high{background:var(--pink);color:#2a0010}
.seller{position:absolute;top:10px;right:10px;font-size:9px;font-weight:800;padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;text-transform:uppercase;letter-spacing:.4px;z-index:2}
.lcard .body{padding:14px}
.lcard h4{font-size:15px}.lcard .meta{font-size:12px;color:var(--muted);margin:2px 0 8px}
.lcard .price{font-size:20px;font-weight:800}.lcard .ref{font-size:11px;color:var(--muted)}
.lcard .loc{font-size:12px;color:var(--muted);margin-top:8px}

/* compare table */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;min-width:680px}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:14px}
th{background:var(--bg2);color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.6px}
tbody tr:hover td{background:rgba(255,255,255,.02)}

/* advisor */
.advisor{background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:22px;padding:32px}
.q{display:none}.q.active{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qh{font-size:12px;color:var(--teal);font-weight:800;letter-spacing:.5px;margin-bottom:6px}
.qt{font-size:22px;font-weight:800;margin-bottom:18px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px}
.opt{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:15px 17px;cursor:pointer;transition:.15s}
.opt:hover{border-color:var(--teal);transform:translateY(-2px)}
.opt b{display:block;margin-bottom:2px}.opt small{color:var(--muted)}
.progress{height:6px;background:var(--card);border-radius:999px;margin-bottom:24px;overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--purple));width:20%;transition:width .35s}
.back{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;margin-top:16px}
#aresult{display:none}
.reco{background:color-mix(in srgb,var(--sun) 12%,var(--surface));border:1px solid var(--sun);border-radius:18px;padding:26px;display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center}
@media(max-width:620px){.reco{grid-template-columns:1fr}}
.reco .photo{height:180px;border-radius:14px;overflow:hidden}
.reco .tag{font-size:12px;color:var(--teal);font-weight:800;letter-spacing:1px}
.reco h3{font-size:25px;margin:5px 0}

/* cost calc */
.costgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
@media(max-width:760px){.costgrid{grid-template-columns:1fr 1fr}}
.icard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.icard .ic{font-size:24px;margin-bottom:8px}.icard h4{font-size:15px;margin-bottom:5px}.icard p{font-size:13px;color:var(--muted)}
.calc{background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.calc label{display:block;font-size:13px;color:var(--muted);margin:12px 0 6px}
.calc input,.calc select{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--txt);padding:11px;border-radius:10px;font-size:15px}
.calc .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.calcout .line{display:flex;justify-content:space-between;padding:5px 0;color:var(--muted);font-size:14px}
.calcout .tot{display:flex;justify-content:space-between;padding:12px 0 0;font-size:22px;font-weight:800;border-top:1px dashed var(--line);margin-top:8px}

/* trust */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:760px){.trust{grid-template-columns:1fr 1fr}}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-align:center}
.tcard .ic{font-size:28px;margin-bottom:8px}.tcard h4{font-size:15px;margin-bottom:5px}.tcard p{font-size:12.5px;color:var(--muted)}

/* blog teaser */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.bgrid{grid-template-columns:1fr}}
.bcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:block;transition:.18s}
.bcard:hover{transform:translateY(-3px);border-color:var(--purple)}
.bcard b{font-size:16px;color:var(--txt);display:block;margin-bottom:6px}.bcard p{font-size:13px;color:var(--muted)}

/* big cta */
.bigcta{background:var(--brand-bg);color:var(--paper);border:1px solid var(--brand-bg);border-radius:26px;padding:46px 26px;text-align:center}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(3,3,8,.82);backdrop-filter:blur(6px);z-index:100;display:none;align-items:flex-start;justify-content:center;padding:36px 14px;overflow-y:auto}
.overlay.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--line);border-radius:22px;max-width:940px;width:100%;overflow:hidden;animation:pop .25s ease;position:relative}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.mclose{position:absolute;top:16px;right:18px;background:rgba(0,0,0,.5);border:1px solid var(--line);color:#fff;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:18px;z-index:6}
.mtop{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:720px){.mtop{grid-template-columns:1fr}}
.mtop .photo{min-height:300px}
.minfo{padding:28px}
.minfo .brand{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px}
.minfo h3{font-size:27px;letter-spacing:-.6px;margin:4px 0 8px}
.priceblk{display:flex;gap:14px;margin:14px 0}
.priceblk div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;flex:1}
.priceblk b{display:block;font-size:19px}.priceblk span{font-size:11px;color:var(--muted)}
.resellers{margin-top:14px}
.resellers .rt{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px}
.resellers a{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px;margin:0 8px 8px 0;font-weight:600;color:var(--txt)}
.resellers a:hover{border-color:var(--teal);color:var(--teal)}
.mbody{padding:0 28px 28px}
.spectable{width:100%;border-collapse:collapse;margin:6px 0 18px}
.spectable td{padding:9px 12px;border-bottom:1px solid var(--line);font-size:14px}
.spectable td:first-child{color:var(--muted);width:44%}.spectable td:last-child{font-weight:600}
.feat{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.feat span{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:12.5px}
.prosc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
@media(max-width:560px){.prosc{grid-template-columns:1fr}}
.prosc ul{list-style:none;font-size:13.5px}.prosc li{padding:3px 0;color:var(--muted)}
.prosc h5{font-size:13px;margin-bottom:6px}.pro h5{color:var(--teal)}.con h5{color:var(--pink)}
.sectlabel{font-size:12px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin:18px 0 8px}

footer{border-top:1px solid var(--line);padding:42px 0;text-align:center;color:var(--muted);font-size:13px}
.fine{font-size:11px;opacity:.8;max-width:680px;margin:10px auto 0}

/* ====== SCHEDE MODELLO (public/robot/, generate da scripts/build-models.js) ====== */
.page{padding:34px 20px 60px}
.pagetitle{font-size:38px;letter-spacing:-1px;margin:6px 0 10px}
@media(max-width:560px){.pagetitle{font-size:29px}}

/* briciole di pane */
.crumbs{font-size:12.5px;color:var(--muted);margin-bottom:20px;display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--teal)}
.crumbs .sep{opacity:.5}
.crumbs [aria-current]{color:var(--txt)}

/* la scheda: stesso contenuto del modale della home, ma come pagina */
.sheet{background:var(--bg2);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.sheet .mtop .photo{min-height:340px}
.sheet .minfo h1{font-size:31px;letter-spacing:-.8px;margin:4px 0 8px}
@media(max-width:560px){.sheet .minfo h1{font-size:25px}}
.sheet .mbody{padding:0 28px 28px}
.sheet .sectlabel{font-weight:700}

/* invito alla valutazione, in fondo alla scheda */
.valuecta{margin-top:26px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;text-align:center}
.valuecta h2{font-size:23px;letter-spacing:-.5px;margin-bottom:8px}
.valuecta p{color:var(--muted);font-size:14px;max-width:62ch;margin:0 auto 16px}

/* griglia dei modelli correlati e dell'hub /robot/ */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-bottom:10px}
.rcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--txt);text-decoration:none;transition:.2s}
.rcard:hover{transform:translateY(-4px);border-color:var(--teal);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.rcard .photo{height:200px}
.rcard .pill{position:absolute;top:12px;left:12px;font-size:10px;font-weight:800;padding:5px 11px;border-radius:999px;letter-spacing:.4px;z-index:2}
.rcard .rb{padding:18px}
.rcard .brand{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.rcard h4{font-size:19px;margin:3px 0 8px}
.rcard .desc{font-size:13px;color:var(--muted);min-height:36px}
.rcard .prow{display:flex;justify-content:space-between;align-items:flex-end;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.rcard .prow b{font-size:22px}.rcard .prow .lbl{font-size:11px;color:var(--muted)}
.rcard .used{font-size:12px;color:var(--teal);text-align:right}

/* il logo dell'header e' un link nelle pagine interne */
header .logo{text-decoration:none}
a.mcard{display:block;color:var(--txt);text-decoration:none}

/* =====================================================================
   RIFACIMENTO IDENTITA' — 8 settembre 2026
   Sta in fondo di proposito: sovrascrive per ordine di cascata le regole
   scritte per il vecchio tema scuro, senza doverle riscrivere una a una.
   Se una regola qui sopra continua a vincere, e' perche' ha specificita'
   maggiore: alzarla qui, non aggiungere !important.
   ===================================================================== */

/* ---- tipografia: due caratteri, ruoli distinti ----
   Bricolage Grotesque per i titoli (carattere, non il solito Inter/Space Grotesk),
   IBM Plex Sans per il testo e l'interfaccia: leggibile e con credibilita' tecnica. */
body{
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--paper);color:var(--ink);
}
h1,h2,h3,h4,h5,.logo,.pagetitle,.btn,.badge{
  font-family:"Bricolage Grotesque","IBM Plex Sans",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
}
h1,h2,h3,h4,.pagetitle{text-wrap:balance}
h1{letter-spacing:-1.6px;font-weight:800}
h2{letter-spacing:-.8px;font-weight:800}
.lead{max-width:65ch}
/* i prezzi si incolonnano: cifre a larghezza fissa */
.priceblk b,.prow b,.used,.chip b,.spectable td:last-child{font-variant-numeric:tabular-nums}

/* ---- header ---- */
header{background:color-mix(in srgb,var(--paper) 85%,transparent);border-bottom:1px solid var(--line)}
.logo{color:var(--ink)}
.logo .mark{background:var(--brand);color:#fff}
.logo b{background:none;-webkit-text-fill-color:currentColor;color:var(--brand)}
.nav nav a{color:var(--muted-ink)}
.nav nav a:hover{color:var(--brand)}
.nav nav a.cta{background:var(--action);color:#fff}
.nav nav a.cta:hover{background:var(--action-soft);color:#fff}

/* ---- hero ----
   Via i blob sfocati viola/verde: su fondo chiaro impastavano. Al loro posto il
   motivo del bolero, un ritmo di barre che cresce — struttura, non decorazione. */
.hero .blob{display:none}
.hero{background:linear-gradient(180deg,var(--surface-2),transparent)}
h1 .g1{background:none;-webkit-text-fill-color:currentColor;color:var(--brand)}
h1 .g2{background:none;-webkit-text-fill-color:currentColor;color:var(--action)}
.sub{color:var(--muted-ink)}
.badge{background:var(--surface);border:1px solid var(--line);color:var(--brand);font-weight:700}
.heroframe{background:var(--surface-2);box-shadow:var(--shadow)}

/* il crescendo: barre che salgono, usate come divisore di sezione */
.crescendo{display:flex;align-items:flex-end;gap:4px;height:26px;margin:0 0 14px}
.crescendo i{display:block;width:5px;border-radius:2px;background:var(--brand);opacity:.28}
.crescendo i:nth-child(1){height:22%}.crescendo i:nth-child(2){height:34%;opacity:.4}
.crescendo i:nth-child(3){height:48%;opacity:.52}.crescendo i:nth-child(4){height:64%;opacity:.66}
.crescendo i:nth-child(5){height:82%;opacity:.8}.crescendo i:nth-child(6){height:100%;opacity:1;background:var(--action)}

/* ---- bottoni ---- */
.btn{font-weight:700;letter-spacing:-.2px}
.btn.primary,.btn.primary:hover{background:linear-gradient(135deg,var(--go-a),var(--go-b));color:var(--on-go);box-shadow:0 10px 34px var(--go-glow)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn.brand{background:var(--brand-bg);color:var(--on-brand)}
.btn.brand:hover{background:var(--brand-soft);color:#fff}

/* ---- chip e schede ---- */
.chip{background:var(--surface);border:1px solid var(--line)}
.chip b{background:none;-webkit-text-fill-color:currentColor;color:var(--brand)}
.chip span{color:var(--muted-ink)}
.fchip{background:var(--surface);border:1px solid var(--line);color:var(--muted-ink)}
.fchip.on{background:var(--brand-bg);color:var(--on-brand);border-color:transparent}
.mcard,.rcard,.lcard{background:var(--surface);box-shadow:var(--shadow)}
.mcard:hover,.rcard:hover{border-color:var(--brand);box-shadow:0 16px 40px color-mix(in srgb,var(--brand) 14%,transparent)}
.mcard .used,.rcard .used{color:var(--value);font-weight:600}
a{color:var(--brand)}

/* categorie: tinte piatte, non gradienti */
.pill.cons{background:color-mix(in srgb,var(--sun) 22%,var(--surface));color:var(--brand);border:1px solid color-mix(in srgb,var(--sun) 55%,transparent)}
.pill.dev{background:var(--brand-bg);color:var(--on-brand);border:1px solid var(--brand-bg)}
.pill.ind{background:var(--surface);color:var(--ink);border:1px solid var(--ink)}

/* valutazione dell'affare: colori semantici, distinti dall'accento del marchio */
.deal.top{background:var(--ok);color:#fff}
.deal.good{background:color-mix(in srgb,var(--ok) 74%,var(--surface));color:#fff}
.deal.fair{background:var(--warn);color:#fff}
.deal.high{background:var(--bad);color:#fff}
.seller{background:color-mix(in srgb,var(--ink) 72%,transparent);color:var(--paper)}

/* ---- campi dei moduli ---- */
input,select,textarea{font-family:inherit;font-size:15px}
.calc input,.calc select,.toolbar select{background:var(--surface);border:1px solid var(--line);color:var(--ink)}

/* ---- accessibilita' ---- */
:focus-visible{outline:3px solid var(--action);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .mcard:hover,.rcard:hover,.btn:hover{transform:none}
}

/* ---- mercato in attesa: nessun annuncio finto, si spiega cosa arriva ---- */
.mktsoon{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
@media(max-width:780px){.mktsoon{grid-template-columns:1fr}}
.mktcol{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.mktcol h4{font-size:18px;margin-bottom:10px}
.mktcol p{color:var(--muted-ink);font-size:14.5px;margin-bottom:14px;max-width:52ch}
.mktcol .btn{margin-top:4px}
.dealdemo{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px}
.dealdemo .deal{position:static}
/* quando arrivano annunci veri, lo stato vuoto sparisce: .mktsoon e' display:grid
   e senza questa riga l'attributo hidden non basterebbe */
.mktsoon[hidden]{display:none}

/* ---- annunci veri dal backend (home, #mercato): la card e' la .lcard del mercato,
   ma non e' un link (non c'e' ancora la pagina dell'annuncio), quindi niente mano ---- */
.annunci{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin:8px 0 26px}
.annunci[hidden]{display:none}
.annunci .lcard{cursor:default}
.annunci .lcard:hover{transform:none;border-color:var(--line)}
.annunci .lcard .photo{height:190px}
.annunci .lcard .price{color:var(--value)}
/* sotto ogni annuncio: la nota sul relay (i contatti del venditore non sono pubblici)
   e il bottone che apre il dialog "Contatta il venditore" */
.annunci .lcard .lnote{font-size:11.5px;line-height:1.4;color:var(--muted-ink);margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.annunci .lcard .lcontatta{display:block;width:100%;margin:10px 0 0;text-align:center}

/* ---- "Contatta il venditore" (home, #annunci): un solo <dialog> nativo per tutte le
   card. Esc, focus dentro e sfondo inerte li da' showModal(): qui solo l'aspetto.
   Palette: carta, inchiostro, oro; il rosso compare solo nell'esito negativo
   (.formko), come stato e non come decorazione. ---- */
.ctdlg{border:0;padding:0;background:transparent;color:var(--ink);width:min(600px,calc(100% - 32px));max-width:none;max-height:calc(100% - 32px);margin:auto;overflow:visible}
.ctdlg::backdrop{background:rgba(3,3,8,.72);backdrop-filter:blur(6px)}
.ctbox{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:30px 28px 26px;box-shadow:var(--shadow);max-height:calc(100vh - 32px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.ctbox h3{font-size:26px;letter-spacing:-.5px;margin:4px 0 4px;padding-right:44px}
.ctsub{color:var(--muted-ink);font-size:14px;margin:0 0 18px;padding-right:44px}
.ctsub:empty{display:none}
.ctclose{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ctclose:hover{border-color:var(--brand);color:var(--brand)}
.ctcount{font-size:12px;color:var(--muted-ink);text-align:right;font-variant-numeric:tabular-nums}
.ctfine{text-align:left;margin:0 0 16px;max-width:none;opacity:1;color:var(--muted-ink)}
.ctazioni{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ctazioni .btn{margin:0}
/* display:flex vincerebbe sull'attributo hidden (stessa trappola di .mktsoon) */
.ctazioni[hidden],#ctEsito[hidden],#ctEsito [data-esito][hidden]{display:none}
#ctEsito{margin:0 0 16px}
#ctEsito .formok{padding:22px 18px;margin:0}
#ctEsito .formok p{margin-bottom:14px}
.formko{background:color-mix(in srgb,var(--bad) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--bad) 36%,transparent);color:var(--ink);border-radius:12px;padding:12px 14px;font-size:14px;margin:0}
.formko a{color:var(--brand);font-weight:600}
[aria-busy="true"] #ctInvia{opacity:.6;cursor:progress}
@media(max-width:560px){
  .ctdlg{width:calc(100% - 16px);max-height:calc(100% - 16px)}
  .ctbox{padding:24px 18px 20px;border-radius:18px;max-height:calc(100vh - 16px)}
  .ctbox h3{font-size:22px}
  .ctazioni .btn{width:100%;text-align:center}
}

/* ---- striscia di avviso in cima alla pagina: impostazione "annuncio" del pannello.
   Fondo di marca (nero con testo d'oro sul chiaro, oro con testo nero sullo scuro) ---- */
.avviso{background:var(--brand-bg);color:var(--on-brand);font-size:14px;font-weight:600;line-height:1.4}
.avviso .wrap{display:flex;align-items:center;gap:14px;padding-top:9px;padding-bottom:9px}
.avviso a,.avviso span{color:inherit;flex:1;min-width:0}
.avviso a{text-decoration:underline;text-underline-offset:3px}
.avviso a:hover{opacity:.85}
.avviso button{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid color-mix(in srgb,currentColor 45%,transparent);
  background:transparent;color:inherit;font:inherit;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.avviso button:hover{border-color:currentColor}

/* ---- link del footer ---- */
.flinks{margin-top:12px;font-size:13px}
.flinks a{color:var(--muted-ink)}
.flinks a:hover{color:var(--brand)}

/* ---- pagina "vendi il tuo robot" ---- */
.sellgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
@media(max-width:900px){.sellgrid{grid-template-columns:1fr}}
.formcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.frow{grid-template-columns:1fr}}
.fld{margin-bottom:16px;display:flex;flex-direction:column;gap:6px}
.fld label{font-size:13px;font-weight:600;color:var(--ink)}
.fld .hint{font-size:12px;color:var(--muted-ink)}
.fld input,.fld select,.fld textarea{
  width:100%;background:var(--paper);border:1px solid var(--line);color:var(--ink);
  padding:12px 13px;border-radius:11px;font-size:15px;font-family:inherit}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.fld textarea{min-height:110px;resize:vertical}
.fld.req label::after{content:" *";color:var(--action)}
.aside{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.aside h4{font-size:16px;margin-bottom:10px}
.aside ul{list-style:none;font-size:14px;color:var(--muted-ink)}
.aside li{padding:7px 0;border-bottom:1px solid var(--line);display:flex;gap:9px}
.aside li:last-child{border-bottom:none}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted-ink);margin:6px 0 18px}
.consent input{margin-top:3px;width:16px;height:16px;accent-color:var(--brand);flex:none}
.formok{background:color-mix(in srgb,var(--ok) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--ok) 36%,transparent);color:var(--ink);border-radius:var(--radius);padding:26px;text-align:center}
.formok h3{color:var(--ok);margin-bottom:8px}

/* ---- banner cookie ---- */
/* il banner del consenso (.cbanner, analytics.js) e' in lingue.css: e' l'unico foglio caricato
   da TUTTE le pagine, blog compreso (che non ha site.css e lo mostrava nudo in fondo alla pagina) */

/* ultimi fondi rimasti dal tema scuro: su sfondo chiaro diventavano riquadri neri */
.photo{background:#000}
.phfb{color:#fff}
.step .n{background:var(--brand-bg);color:var(--on-brand)}
.step.s2 .n{background:var(--action);color:var(--on-accent)}
.step.s3 .n{background:var(--brand-bg);color:var(--on-brand)}
tbody tr:hover td{background:var(--surface-2)}
.herotag{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow)}
.herotag.t1{color:var(--brand)}
.herotag.t2{color:var(--value)}

/* testo sopra i fondi pieni, coerente nei due temi */
.btn.primary,.btn.primary:hover{color:var(--on-go)}
.btn.brand,.btn.brand:hover{color:var(--on-brand)}
.nav nav a.cta,.nav nav a.cta:hover{color:var(--on-accent)}
.fchip.on{color:var(--on-brand)}
.step.s1 .n,.step.s3 .n{color:var(--on-brand)}
.deal.top,.deal.good,.deal.fair,.deal.high{color:var(--on-accent)}
.logo .mark{color:var(--on-accent)}

/* credito sotto le foto: richiesto dalla licenza CC BY, non decorativo */
.credito{font-size:11.5px;color:var(--muted);margin:8px 2px 0;line-height:1.45}
.credito a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.credito a:hover{color:var(--txt)}

/* ==================== cinema: hero e "un mondo da immaginare" ====================
   Le scene sono concept generati con AI per Robolero: un'immagine emotiva del
   futuro, non una prova di cosa sanno fare oggi i modelli. Per questo ogni scena
   porta l'etichetta "Scena immaginata con AI" e la nota sotto il selettore: su un
   sito che dice quanto vale un robot, confondere immaginazione e realta' costerebbe
   esattamente la fiducia che lo strumento deve guadagnare.
   Motion: si muovono SOLO i livelli di sfondo (.layer), mai il testo. Ampiezze
   piccole (5-10%), will-change solo su cio' che si muove, tutto spento con
   prefers-reduced-motion e senza JavaScript. */
:root{
  --dur-fast:150ms; --dur-base:340ms; --dur-slow:640ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --sun:#f2c56b;   /* la luce dorata delle scene: unico accento sui fondi scuri */
}

/* ---- hero cinematico ---- */
.hero-cine{position:relative;overflow:hidden;background:#000;color:#fff;
  min-height:clamp(540px,74vh,800px);display:grid;align-items:end}
.hero-cine .layer{position:absolute;inset:-7% 0;will-change:transform}
.hero-cine .layer img{position:static;width:100%;height:100%;object-fit:cover;object-position:center 42%;
  animation:kenburns 28s var(--ease-out) infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}
@keyframes kenburns-lieve{from{transform:scale(1)}to{transform:scale(1.025)}}
.hero-cine .scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.22) 42%,rgba(0,0,0,.80) 100%)}
.hero-cine .wrap{position:relative;z-index:2;display:block;padding-top:120px;padding-bottom:60px}
.hero-cine h1{color:#fff;max-width:17ch;letter-spacing:-.03em;text-shadow:0 2px 28px rgba(0,0,0,.38);text-wrap:balance}
.hero-cine h1 em{font-style:normal;color:var(--sun)}
.hero-cine .sub{color:rgba(255,255,255,.88);max-width:54ch;text-shadow:0 1px 14px rgba(0,0,0,.3)}
.hero-cine .badge{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(10px)}
.hero-cine .chips{margin-top:26px}
.hero-cine .chip{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.20);backdrop-filter:blur(10px)}
.hero-cine .chip b{color:#fff;background:none;-webkit-text-fill-color:#fff}
.hero-cine .chip span{color:rgba(255,255,255,.74)}
.hero-cine .btn.ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.hero-cine .btn.ghost:hover{border-color:#fff;color:#fff}
.hero-cine .concept{position:absolute;right:20px;bottom:14px;z-index:3;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.58)}
@media(max-width:700px){
  .hero-cine{min-height:clamp(520px,84vh,720px)}
  .hero-cine .wrap{padding-top:96px;padding-bottom:70px}
  .hero-cine .layer img{object-position:center 30%}
}

/* ---- il mondo: cinque citta' ---- */
.world{background:#000;color:#fff;padding:0;overflow:hidden}
.world .intro{padding:66px 20px 26px}  /* il padding laterale di .wrap va tenuto: senza, la prima lettera finisce sotto overflow:hidden */
.world .eyebrow{background:none;-webkit-text-fill-color:currentColor;color:var(--sun)}
.world h2{color:#fff;max-width:18ch;text-wrap:balance}
.world .lead{color:rgba(255,255,255,.72)}
/* Il palco (20/09): le scene stanno su una lastra 3D che si inclina di pochi gradi verso il
   cursore (motion.js scrive --rx/--ry, come la testa del hero) e l'immagine, dietro, scorre
   al contrario di qualche pixel (--px/--py): e' questo scarto fra immagine e strato in primo
   piano (scrim, riflesso, frecce) a dare la profondita'. overflow+mask appiattiscono il 3D dei
   figli, quindi la profondita' e' una parallasse, non un translateZ.
   Il cambio scena e' una DISSOLVENZA INCROCIATA: la scena nuova (.on) sale davanti da 0 a 1 in
   1,6 s con easing simmetrico, mentre quella precedente (.was) resta piena sotto finche' la
   nuova non la copre. Mai un taglio, mai un buco nero a meta' strada. */
.stage{position:relative;width:min(100%,calc(min(78vh,800px)*16/9));margin-inline:auto;aspect-ratio:16/9;overflow:hidden;background:#000;
  border-radius:var(--scene-radius);box-shadow:var(--scene-shadow);isolation:isolate;  /* isolate: Safari ritaglia gli angoli anche con figli composti (translate3d) */
  transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-origin:50% 50%;will-change:transform}
.stage figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.6s cubic-bezier(.45,0,.55,1);will-change:opacity}
.stage figure.on{opacity:1;z-index:2}
.stage figure.was{opacity:1;z-index:1}
.stage .layer{position:absolute;inset:-6% -4%;will-change:transform;transform:translate3d(var(--px,0px),calc(var(--sy,0%) + var(--py,0px)),0)}
.stage .layer img{position:static;width:100%;height:100%;object-fit:cover;animation:kenburns-lieve 24s var(--ease-out) infinite alternate}
.stage figure:not(.on) img{animation-play-state:paused}
.stage .scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,var(--scene-scrim)) 100%)}
/* riflesso che segue il cursore, davanti a tutto: e' il vetro della lastra */
.stage::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .5s var(--ease-out);
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.13),transparent 62%)}
.stage.lit::after{opacity:1}
.stage figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 20px 32px}
.stage figcaption .in{max-width:1180px;margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.stage .city{font-family:"Bricolage Grotesque","IBM Plex Sans",sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sun);margin-bottom:6px}
.stage .stitle{font-family:"Bricolage Grotesque","IBM Plex Sans",sans-serif;font-size:clamp(22px,3.4vw,40px);font-weight:700;line-height:1.08;letter-spacing:-.02em;color:#fff;max-width:20ch;text-wrap:balance;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.stage .tag{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 11px;white-space:nowrap;backdrop-filter:blur(6px)}

.cities{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:18px 20px 26px;max-width:1180px;margin:0 auto}
/* pallini senza nome: le foto parlano da sole. Area di tocco 44px, pallino visibile 10px. */
.cities{justify-content:center;padding:14px 20px 30px}
.cities button[data-scene]{width:44px;height:44px;padding:0;background:transparent;border:0;cursor:pointer;position:relative}
.cities button[data-scene]::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:rgba(255,255,255,.34);transition:background var(--dur-fast),transform var(--dur-base) var(--ease-out)}
.cities button[data-scene]:hover::after{background:rgba(255,255,255,.7)}
.cities button[data-scene][aria-pressed="true"]::after{background:var(--sun);transform:scale(1.5)}
.cities .pause{font-family:inherit;font-weight:600;font-size:13px;background:transparent;color:rgba(255,255,255,.74);
  border:1px solid rgba(255,255,255,.24);border-radius:999px;min-height:44px;cursor:pointer;transition:color var(--dur-fast),border-color var(--dur-fast)}
.cities .pause:hover{color:#fff;border-color:rgba(255,255,255,.55)}
.cities .pause{margin-left:8px;min-width:44px;padding:0 14px}
.cities :focus-visible{outline-color:var(--sun)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Va DOPO la regola base .stage, non nel blocco media del hero piu' in alto: a parita'
   di specificita' vince l'ultima dichiarazione, e una media query scritta prima perde. */
@media(max-width:700px){
  /* stage 16:9 su un telefono e' alto 210px e la didascalia non ci sta: in verticale si
     ritaglia al centro (i soggetti sono centrati) e resta spazio per il testo */
  .stage{aspect-ratio:4/5;max-height:560px;width:calc(100% - 2 * var(--scene-gutter))}  /* nel chiaro la lastra ha 16px d'aria ai lati, nello scuro e' a filo */
  .stage figcaption{padding-bottom:24px}
}

/* ---- reveal allo scroll: solo con JavaScript acceso e senza reduced-motion.
   Senza JS o con reduced-motion tutto e' visibile subito: nessun contenuto
   resta parcheggiato a opacita' zero ad aspettare un osservatore. ---- */
html.js:not(.no-motion) .rv{opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
  transition-delay:calc(var(--i,0) * 55ms)}
html.js:not(.no-motion) .rv.in{opacity:1;transform:none}

/* ---- profondita' sulle card: sollevamento lieve, ombra che cresce ---- */
.mcard,.bcard,.rcard,.icard,.tcard,.step{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-fast)}
.mcard:hover,.bcard:hover,.rcard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.14)}

/* ---- niente motion quando l'utente lo chiede, anche senza JS ---- */
@media(prefers-reduced-motion:reduce){
  .hero-cine .layer img,.stage .layer img{animation:none}
  .hero-cine .layer,.stage .layer,.stage{transform:none!important}
  .stage figure{transition:none}
  .stage::after{display:none}
}
html.no-motion .hero-cine .layer img,html.no-motion .stage .layer img{animation:none}
html.no-motion .stage,html.no-motion .stage .layer{transform:none!important}

/* ---- stato del modello sulla card: si legge senza aprire la scheda ---- */
.stato{position:absolute;top:12px;right:12px;z-index:2;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--ink);color:var(--paper)}
.stato.preventivo{background:var(--brand-bg);color:var(--on-brand)}
.stato.preordine{background:var(--action);color:var(--on-accent)}
.stato.non-in-vendita{background:var(--bad);color:#fff}
.stato.fuori-produzione{background:var(--muted-ink);color:#fff}
.calc optgroup{font-weight:700;color:var(--muted-ink)}
.calc .row+.row{margin-top:2px}

/* ==================== motion "wow": tutto spento con reduced-motion ==================== */
/* 4. titolo parola per parola: solo dopo che lo script ha diviso le parole */
.hero-cine h1.split .w{display:inline-block;opacity:0;transform:translateY(.45em) rotate(1.2deg);
  animation:wordIn .75s var(--ease-out) forwards;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes wordIn{to{opacity:1;transform:none}}
/* 6. tilt e riflesso che segue il cursore */
.tilt{transform-style:preserve-3d;will-change:transform;transition:transform .22s var(--ease-out),box-shadow .3s var(--ease-out)}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 62%);z-index:3}
.tilt:hover::after{opacity:1}
/* 7. magnete: transizione al rientro, il movimento lo detta lo script */
.btn.magnet{transition:transform .28s var(--ease-out),box-shadow .2s}
/* 8. barra di avanzamento */
.scrollbar-top{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;pointer-events:none;
  background:linear-gradient(90deg,var(--brand),var(--action),var(--sun))}
/* 9. bagliore dorato sui fondi scuri */
.hero-cine::before,.world::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s var(--ease-out);
  background:radial-gradient(560px circle at var(--cx,50%) var(--cy,40%),rgba(242,197,107,.16),transparent 64%)}
.hero-cine.glow::before,.world.glow::before{opacity:1}
.world .stage{position:relative;z-index:0}
@media(prefers-reduced-motion:reduce){
  .hero-cine h1.split .w{animation:none;opacity:1;transform:none}
  .tilt,.btn.magnet{transform:none!important}
  .scrollbar-top,.hero-cine::before,.world::before{display:none}
}
html.no-motion .hero-cine h1.split .w{animation:none;opacity:1;transform:none}

/* ==================== hero: il robot che si accende ====================
   Riferimento: hero WebGL alla Active Theory — buio, particelle di luce che
   convergono su un emblema centrale. Qui l'emblema e' il robot, e la luce e'
   quella della palette (oro, arancio bruciato, bordeaux), niente blu/magenta.
   La visiera e l'anello stanno in % dell'IMMAGINE, non del viewport: hero.js
   dimensiona .robot come object-fit: cover e ancora il volto a un punto fisso,
   cosi' le sovrapposizioni restano sul viso a ogni schermo. */
.hero-robo{position:relative;overflow:hidden;background:#000;color:#fff;isolation:isolate;
  min-height:clamp(620px,100vh,980px);display:grid;align-items:end}
.hero-robo .particles{position:absolute;inset:0;z-index:0;display:block}
.hero-robo .robot{position:absolute;z-index:1;pointer-events:none;will-change:transform;
  /* senza JS: immagine quadrata centrata, un po' piu' alta del hero; hero.js sovrascrive con misure esatte */
  height:115%;aspect-ratio:1/1;left:50%;top:-2%;transform:translateX(-50%)}
.hero-robo .robot>img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill;
  -webkit-mask-image:radial-gradient(ellipse 58% 68% at 50% 40%,#000 50%,transparent 100%);
          mask-image:radial-gradient(ellipse 58% 68% at 50% 40%,#000 50%,transparent 100%);
  transition:opacity 1.4s var(--ease-out)}
/* gli stati "spenti" esistono solo se c'e' JS a fare la sequenza: senza JS tutto e' visibile subito */
.js .hero-robo .robot>img{opacity:0}
.hero-robo.on .robot>img{opacity:1}

/* la visiera: il rettangolo della scritta ROBOLERO, misurato sul file 2048x2048
   (x 709-1347, y 815-877). La scritta e' nei pixel: .cover e' la toppa nera sfumata
   che la nasconde finche' non "si accende", .bar il bagliore d'oro che le resta
   addosso (fusione screen: schiarisce, non copre). */
.hero-robo .visor{position:absolute;left:34.6%;top:39.8%;width:31.2%;height:3.1%}
.hero-robo .cover{position:absolute;left:-14%;top:-220%;width:128%;height:540%;
  background:radial-gradient(ellipse at 50% 50%,#000 42%,rgba(0,0,0,.85) 55%,rgba(0,0,0,0) 72%);opacity:0}
.hero-robo .bar{position:absolute;left:-12%;top:-260%;width:124%;height:620%;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,240,205,.55),rgba(242,197,107,.32) 38%,rgba(242,197,107,0) 70%);filter:blur(2px)}

/* l'anello attorno alla testa: gradiente della palette, si disegna e poi ruota */
.hero-robo .ring{position:absolute;left:20%;top:7.4%;width:60%;aspect-ratio:1;border-radius:50%;opacity:.9;
  padding:1.2px;background:conic-gradient(from 210deg,#2a2210,#b8902a 30%,#f2c56b 50%,#fff6dc 58%,#f2c56b 66%,#b8902a 80%,#2a2210);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 6px rgba(242,197,107,.45))}

/* sequenza di accensione */
@keyframes visorOn{0%{opacity:0}9%{opacity:.85}13%{opacity:.08}20%{opacity:1}26%{opacity:.3}33%,100%{opacity:1}}
@keyframes breathe{0%,100%{opacity:1;filter:brightness(1)}50%{opacity:.86;filter:brightness(1.18)}}
/* l'anello sta su un piano davanti al volto (translateZ): nelle keyframes va ripetuto, altrimenti l'animazione lo azzera */
@keyframes ringIn{from{opacity:0;transform:translateZ(34px) scale(.86) rotate(-40deg)}to{opacity:.9;transform:translateZ(34px) scale(1) rotate(0)}}
@keyframes ringSpin{from{transform:translateZ(34px) rotate(0)}to{transform:translateZ(34px) rotate(360deg)}}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes coverOff{0%{opacity:1}9%{opacity:.15}13%{opacity:.92}20%{opacity:0}26%{opacity:.7}33%,100%{opacity:0}}
.js .hero-robo .bar,.js .hero-robo .ring{opacity:0}
.js .hero-robo .cover{opacity:1}
.hero-robo.on .cover{animation:coverOff 1.15s steps(1,end) .9s forwards}
.hero-robo.on .bar{animation:visorOn 1.15s steps(1,end) .9s forwards}
.hero-robo.lit .bar{animation:breathe 4.2s ease-in-out infinite;opacity:1}
.hero-robo.on .ring{animation:ringIn 1.3s var(--ease-out) 1.6s forwards}
.hero-robo.lit .ring{animation:ringSpin 38s linear infinite;opacity:.9}

/* il testo: in basso, su un velo che parte dal fondo */
.hero-robo .copy{position:relative;z-index:2;padding:0 20px 56px;max-width:1180px;margin:0 auto;width:100%}
.js .hero-robo .copy{opacity:0;transform:translateY(18px)}
.hero-robo.on .copy{animation:riseIn 1s var(--ease-out) 2.1s forwards}
.hero-robo .copy::before{content:"";position:absolute;left:-100vw;right:-100vw;top:-140px;bottom:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.72) 45%,rgba(0,0,0,.92) 100%)}
.hero-robo h1{color:#fff;max-width:20ch;letter-spacing:-.03em;text-wrap:balance;font-size:clamp(30px,4.6vw,54px);margin-bottom:12px;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.hero-robo h1 em{font-style:normal;color:var(--sun)}
.hero-robo .sub{color:rgba(255,255,255,.84);max-width:56ch;font-size:16.5px;margin-bottom:20px}
.hero-robo .badge{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px)}
.hero-robo .btn.ghost{color:#fff;border-color:rgba(255,255,255,.45);background:transparent}
.hero-robo .btn.ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
.hero-robo .chips{margin-top:22px}
.hero-robo .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);backdrop-filter:blur(10px)}
.hero-robo .chip b{color:#fff;background:none;-webkit-text-fill-color:#fff}
.hero-robo .chip span{color:rgba(255,255,255,.7)}

/* ---- hero v2: testa 3D, wordmark fantasma, grana, titolo che gioca ----
   .scene3d e' il piano prospettico; .robot (dentro) ruota di pochi gradi verso il
   cursore (hero.js). Visiera e anello stanno piu' avanti (translateZ), cosi'
   scorrono rispetto al volto e la testa prende profondita'. */
.hero-robo .scene3d{position:absolute;inset:0;z-index:1;pointer-events:none;perspective:1400px;perspective-origin:50% 38%}
.hero-robo .robot{transform-style:preserve-3d;transform-origin:50% 38.5%}
.hero-robo .visor{transform:translateZ(54px)}
/* la luce sul metallo: segue il cursore (--lx/--ly da hero.js), mascherata come l'immagine */
.hero-robo .sheen{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease-out);mix-blend-mode:soft-light;
  background:radial-gradient(34% 40% at var(--lx,50%) var(--ly,36%),rgba(255,240,200,.95),rgba(242,197,107,.42) 45%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 58% 68% at 50% 40%,#000 50%,transparent 100%);
          mask-image:radial-gradient(ellipse 58% 68% at 50% 40%,#000 50%,transparent 100%)}
.hero-robo.lit .sheen{opacity:.85}
/* il wordmark gigante dietro la testa: contorno d'oro, scorre piano, due copie per il giro continuo */
.hero-robo .ghostmark{position:absolute;left:0;right:0;top:clamp(36px,6vh,72px);z-index:0;display:flex;white-space:nowrap;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity 2.4s ease 1.4s}
.hero-robo.on .ghostmark{opacity:1}
.hero-robo .ghostmark span{flex:0 0 auto;font-family:"Bricolage Grotesque","IBM Plex Sans",sans-serif;font-weight:800;font-size:clamp(96px,20vw,290px);line-height:1;
  letter-spacing:.08em;padding-right:.3em;color:transparent;-webkit-text-stroke:1.5px rgba(242,197,107,.26);animation:ghostSlide 46s linear infinite}
@keyframes ghostSlide{to{transform:translateX(-100%)}}
/* grana da pellicola: rumore SVG in overlay, che vibra a scatti */
.hero-robo .grain,.vetrina .vgrain{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px 220px}
.hero-robo .grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.075;mix-blend-mode:overlay;animation:grainJit .55s steps(3,end) infinite}
@keyframes grainJit{0%{background-position:0 0}33%{background-position:-46px 58px}66%{background-position:62px -34px}100%{background-position:0 0}}
.hero-robo .copy{z-index:3}
/* nel wordmark fantasma le O sono teste con la visiera accesa (scritta n.2): solo contorno */
.hero-robo .ghostmark .o{display:inline-block;width:.74em;height:.74em;border:.055em solid rgba(242,197,107,.26);border-radius:50%;position:relative;vertical-align:-.02em;margin:0 .13em 0 .05em}
.hero-robo .ghostmark .o::after{content:"";position:absolute;left:17%;right:17%;top:37%;height:.15em;border-radius:99px;background:rgba(242,197,107,.22)}
/* il titolo entra parola per parola, dopo che il velo del testo e' salito */
.hero-robo h1.split .w{display:inline-block;opacity:0;transform:translateY(.5em) rotate(1.5deg);
  animation:wordIn .8s var(--ease-out) forwards;animation-delay:calc(2.15s + var(--i,0) * 70ms)}
/* il verbo che ruota: le parole stanno nella stessa cella, l'em si adatta alla larghezza di quella attiva */
.hero-robo h1 .cycle{display:inline-grid;vertical-align:baseline;overflow:hidden;white-space:nowrap;transition:width .45s var(--ease-out);
  padding:0 .04em .06em;margin:0 -.04em -.06em}
.hero-robo h1 .cycle>span{grid-area:1/1;display:block;width:max-content;opacity:0;transform:translateY(.75em);transition:opacity .45s var(--ease-out),transform .6s var(--ease-out)}
.hero-robo h1 .cycle:not(.live)>span:first-child{opacity:1;transform:none}
.hero-robo h1 .cycle>span.on{opacity:1;transform:none}
.hero-robo h1 .cycle>span.out{opacity:0;transform:translateY(-.75em)}
@media(prefers-reduced-motion:reduce){
  .hero-robo .ghostmark span,.hero-robo .grain{animation:none}
  .hero-robo h1.split .w{animation:none;opacity:1;transform:none}
}
html.no-motion .hero-robo h1.split .w{animation:none;opacity:1;transform:none}

/* invito allo scroll, come nel riferimento */
.hero-robo .scrollcue{position:absolute;right:22px;bottom:22px;z-index:3;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:10px;opacity:0}
.hero-robo.lit .scrollcue{animation:riseIn 1s var(--ease-out) forwards}
.hero-robo .scrollcue i{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--sun),transparent);animation:cueDrop 1.8s ease-in-out infinite}
@keyframes cueDrop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

@media(max-width:700px){
  /* il hero cresce col contenuto: volto in alto, testo che parte sotto il mento
     (--face-bottom la calcola hero.js; il fallback vale senza JS) */
  .hero-robo{min-height:0;align-items:start}
  .hero-robo .copy{padding-top:var(--face-bottom,64vw);padding-bottom:44px}
  .hero-robo .copy::before{top:-40px}
  .hero-robo .sub{font-size:15.5px;margin-bottom:16px}
  .hero-robo .chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}
  .hero-robo .chip{padding:10px 10px}
  .hero-robo .chip b{font-size:18px}
  .hero-robo .chip span{font-size:11.5px;line-height:1.3;display:block}
  .hero-robo .robot{height:auto;width:160%;left:-30%;top:0;transform:none}
  .hero-robo .scrollcue{display:none}
}
/* niente sequenza, niente respiro, niente giro con reduced-motion: tutto al posto finale */
@media(prefers-reduced-motion:reduce){
  /* stessa specificita' delle regole .js che spengono: qui devono vincere */
  .js .hero-robo .robot>img,.js .hero-robo .bar,.js .hero-robo .ring,.js .hero-robo .copy{animation:none!important;opacity:1;transform:none}
  .js .hero-robo .cover{animation:none!important;opacity:0}
  .js .hero-robo .ring{opacity:.9}
  .hero-robo .scrollcue{opacity:1}
  .hero-robo .scrollcue i{animation:none}
}
/* il glow che segue il cursore (motion.js) vale anche qui */
.hero-robo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s var(--ease-out);
  background:radial-gradient(520px circle at var(--cx,50%) var(--cy,40%),rgba(242,197,107,.10),transparent 64%)}
.hero-robo.glow::before{opacity:1}

/* emblema-visiera nel menu: SVG, al posto dell'emoji */
.logo .mark{background:none;border-radius:0;width:32px;height:34px;padding:0}
.logo .mark svg{width:100%;height:100%;display:block}
.logo .mark .mbar{filter:drop-shadow(0 0 3px rgba(242,197,107,.9))}

/* ==================== vetrina: i robot in catalogo, su nero, glitchati ====================
   Fondo nero puro, nessuna card: il robot galleggia da solo (le immagini sono
   render su nero, object-fit: contain, cosi' non c'e' mai un bordo visibile).
   Il glitch e' fatto solo di bianco e oro: due copie dell'immagine (::before /
   ::after, background: var(--img) impostato da vetrina.js) tagliate a fette con
   clip-path e spostate di qualche pixel, che compaiono a scatti; sopra, righe di
   scansione e una riga di strappo che scorre. Il nome grande ha lo stesso
   trattamento (data-text nei pseudo-elementi). Con reduced-motion: tutto fermo. */
.vetrina{position:relative;overflow:hidden;color:#fff;background:#000;isolation:isolate;
  min-height:clamp(560px,86vh,820px);outline:none;--vb:translate(-50%,-60%)}
.vetrina .vgrain{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.10;mix-blend-mode:overlay}
/* righe di scansione + strappo che scorre */
.vetrina::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.vetrina::after{content:"";position:absolute;left:0;right:0;height:2px;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(242,197,107,.55) 30%,rgba(255,255,255,.8) 50%,rgba(242,197,107,.55) 70%,transparent);
  animation:vtear 7s linear infinite;opacity:.6}
@keyframes vtear{0%{top:-2px}100%{top:100%}}
.vetrina .vghost{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:0;pointer-events:none;white-space:nowrap;
  font-family:"Bricolage Grotesque","IBM Plex Sans",sans-serif;font-weight:800;font-size:clamp(72px,17vw,260px);line-height:1;letter-spacing:.02em;
  text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);transition:opacity .35s}
.vetrina .vbrand{position:absolute;left:24px;top:22px;z-index:6;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7)}
/* le figurine */
.vetrina .vstage{position:absolute;inset:0;z-index:2;perspective:1200px;touch-action:pan-y}
.vetrina .vfig{position:absolute;left:50%;top:46%;height:min(56vh,470px);aspect-ratio:3/4;margin:0;transform:var(--vb);opacity:0;pointer-events:none;
  transition:transform .65s cubic-bezier(.4,0,.2,1),opacity .65s cubic-bezier(.4,0,.2,1),filter .65s cubic-bezier(.4,0,.2,1);will-change:transform,opacity,filter}
.vetrina .vcard{position:absolute;inset:0;background:var(--img) center/contain no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 70% 78% at 50% 50%,#000 62%,transparent 100%);
          mask-image:radial-gradient(ellipse 70% 78% at 50% 50%,#000 62%,transparent 100%)}
.vetrina .vfig img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;opacity:0}   /* c'e' per alt e caricamento; si vede il background */
/* le due copie glitch: una bianca, una d'oro */
.vetrina .vcard::before,.vetrina .vcard::after{content:"";position:absolute;inset:0;background:inherit;pointer-events:none;opacity:0;mix-blend-mode:screen}
.vetrina .vcard::before{filter:grayscale(1) brightness(1.7) contrast(1.2);animation:vglitchA 6s steps(1,end) infinite}
.vetrina .vcard::after{filter:sepia(1) saturate(3.2) brightness(1.15);animation:vglitchB 6s steps(1,end) infinite;animation-delay:-3.1s}
.vetrina .vfig:not(.center) .vcard::before,.vetrina .vfig:not(.center) .vcard::after{animation-play-state:paused;opacity:0}
/* stato "swap": glitch violento per mezzo secondo mentre cambia il robot */
.vetrina.swap .vfig.center .vcard::before{animation:vglitchHard .5s steps(1,end) 1}
.vetrina.swap .vfig.center .vcard::after{animation:vglitchHard .5s steps(1,end) 1 reverse}
@keyframes vglitchA{
  0%,86%,100%{opacity:0;clip-path:inset(100% 0 0 0)}
  87%{opacity:.85;clip-path:inset(12% 0 78% 0);transform:translate(-9px,0)}
  89%{opacity:.7;clip-path:inset(46% 0 40% 0);transform:translate(7px,0)}
  91%{opacity:0}
  93%{opacity:.9;clip-path:inset(68% 0 20% 0);transform:translate(-5px,0)}
  95%{opacity:0}}
@keyframes vglitchB{
  0%,90%,100%{opacity:0;clip-path:inset(100% 0 0 0)}
  91%{opacity:.8;clip-path:inset(30% 0 62% 0);transform:translate(8px,0)}
  93%{opacity:.6;clip-path:inset(55% 0 30% 0);transform:translate(-10px,1px)}
  96%{opacity:0}
  97%{opacity:.75;clip-path:inset(8% 0 86% 0);transform:translate(6px,0)}
  99%{opacity:0}}
@keyframes vglitchHard{
  0%{opacity:.9;clip-path:inset(0 0 70% 0);transform:translate(-14px,0)}
  15%{opacity:.8;clip-path:inset(20% 0 45% 0);transform:translate(12px,-2px)}
  30%{opacity:.9;clip-path:inset(50% 0 20% 0);transform:translate(-8px,0)}
  45%{opacity:.6;clip-path:inset(75% 0 0 0);transform:translate(10px,2px)}
  60%{opacity:.85;clip-path:inset(35% 0 55% 0);transform:translate(-12px,0)}
  75%{opacity:.5;clip-path:inset(5% 0 80% 0);transform:translate(6px,0)}
  100%{opacity:0}}
.vetrina .vfig.center{transform:var(--vb) scale(1);opacity:1;z-index:3;filter:none;pointer-events:auto;cursor:pointer}
.vetrina .vfig.left{transform:var(--vb) translateX(-64%) scale(.72) rotateY(16deg);opacity:.35;filter:blur(1.5px) grayscale(1);z-index:2;pointer-events:auto;cursor:pointer}
.vetrina .vfig.right{transform:var(--vb) translateX(64%) scale(.72) rotateY(-16deg);opacity:.35;filter:blur(1.5px) grayscale(1);z-index:2;pointer-events:auto;cursor:pointer}
.vetrina .vfig.back{transform:var(--vb) scale(.5);opacity:0;filter:blur(6px);z-index:1}
/* il testo in basso a sinistra: modello e prezzo, nient'altro */
.vetrina .vinfo{position:absolute;left:24px;bottom:26px;z-index:6;max-width:min(46ch,58vw)}
.vetrina .vk{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.22em;color:rgba(255,255,255,.6);margin-bottom:8px}
.vetrina .vname{position:relative;font-family:"Bricolage Grotesque","IBM Plex Sans",sans-serif;font-weight:800;font-size:clamp(26px,3.6vw,46px);line-height:1;letter-spacing:-.02em;margin:0 0 10px;color:#fff}
.vetrina .vname::before,.vetrina .vname::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;pointer-events:none;opacity:0}
.vetrina .vname::before{color:var(--sun);animation:vtextA 5s steps(1,end) infinite}
.vetrina .vname::after{color:#fff;animation:vtextB 5s steps(1,end) infinite;animation-delay:-2.2s}
@keyframes vtextA{0%,92%,100%{opacity:0}93%{opacity:1;clip-path:inset(0 0 55% 0);transform:translate(-4px,0)}95%{opacity:1;clip-path:inset(60% 0 0 0);transform:translate(3px,0)}97%{opacity:0}}
@keyframes vtextB{0%,94%,100%{opacity:0}95%{opacity:1;clip-path:inset(35% 0 30% 0);transform:translate(5px,0)}97%{opacity:1;clip-path:inset(0 0 70% 0);transform:translate(-3px,0)}99%{opacity:0}}
.vetrina .vprezzi{margin:0 0 14px;font-size:13px;color:rgba(255,255,255,.62);font-family:"IBM Plex Mono",monospace;letter-spacing:.04em}
.vetrina .vprezzi b{color:var(--sun);font-weight:700;margin-right:14px;font-size:15px}
.vetrina .vname,.vetrina .vprezzi{transition:opacity .32s var(--ease-out),transform .32s var(--ease-out)}
.vetrina.swap .vname,.vetrina.swap .vprezzi{opacity:0;transform:translateY(8px)}
.vetrina.swap .vghost{opacity:0}
.vetrina .varrows{display:flex;gap:10px}
.vetrina .varrow{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:transparent;color:#fff;font-size:18px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:background .25s,color .25s,transform .25s,border-color .25s}
.vetrina .varrow:hover,.vetrina .varrow:focus-visible{background:var(--sun);border-color:var(--sun);color:#000;transform:scale(1.06);outline:none}
/* l'invito grande in basso a destra */
.vetrina .vdiscover{position:absolute;right:24px;bottom:30px;z-index:6;font-family:"Bricolage Grotesque","IBM Plex Sans",sans-serif;font-weight:800;
  font-size:clamp(20px,2.6vw,34px);letter-spacing:.02em;text-transform:uppercase;color:#fff;text-decoration:none;
  border-bottom:3px solid var(--sun);padding-bottom:4px;transition:transform .25s var(--ease-out),color .25s}
.vetrina .vdiscover:hover{transform:translateX(6px);color:var(--sun)}
@media(max-width:700px){
  .vetrina{min-height:0;padding-bottom:26px}
  .vetrina .vstage{position:relative;height:min(56vh,420px);margin-top:52px}
  .vetrina .vfig{height:min(46vh,340px);top:50%}
  .vetrina .vfig.left{transform:var(--vb) translateX(-74%) scale(.6) rotateY(18deg)}
  .vetrina .vfig.right{transform:var(--vb) translateX(74%) scale(.6) rotateY(-18deg)}
  .vetrina .vghost{top:30%;font-size:clamp(64px,22vw,120px)}
  .vetrina .vinfo{position:relative;left:auto;bottom:auto;max-width:none;padding:6px 20px 0}
  .vetrina .vname{font-size:30px}
  .vetrina .vdiscover{position:relative;right:auto;bottom:auto;display:inline-block;margin:16px 20px 0;font-size:22px}
}
@media(prefers-reduced-motion:reduce){
  .vetrina .vfig,.vetrina .vname,.vetrina .vprezzi,.vetrina .vghost{transition:none}
  .vetrina::after,.vetrina .vcard::before,.vetrina .vcard::after,.vetrina .vname::before,.vetrina .vname::after{animation:none;opacity:0}
}
html.no-motion .vetrina::after,html.no-motion .vetrina .vcard::before,html.no-motion .vetrina .vcard::after,html.no-motion .vetrina .vname::before,html.no-motion .vetrina .vname::after{animation:none;opacity:0}

/* ==================== identita' (15 settembre): marchio n.1 + scritta n.2 ====================
   Marchio: un anello e una visiera d'oro — la testa del hero ridotta a due segni. L'anello e'
   in currentColor, quindi segue il tema (inchiostro su carta, carta su scuro).
   Scritta: ROBOLERO in Bricolage 800, con le tre O che sono teste con la visiera accesa.
   Le O sono <i class="o"> vuoti disegnati in CSS: la misura e' in em, cosi' scalano col testo.
   Il lockup (.logo) porta aria-label="Robolero": mark e scritta sono decorativi. */
.logo{gap:10px;font-size:19px;letter-spacing:.07em;text-transform:uppercase;line-height:1}
.logo .mark{margin-right:0;width:30px;height:30px;background:none;border-radius:0;padding:0;color:var(--ink);flex:0 0 auto}
.logo .mark svg{width:100%;height:100%;display:block;overflow:visible}
.logo .word{display:inline-flex;align-items:center;white-space:nowrap;font-weight:800}
.logo .o{display:inline-block;width:.74em;height:.74em;border:.115em solid currentColor;border-radius:50%;position:relative;margin:0 .11em 0 .04em;vertical-align:-.05em;flex:0 0 auto}
.logo .o::after{content:"";position:absolute;left:17%;right:17%;top:36%;height:.17em;border-radius:99px;background:var(--sun)}
.logo .mark .mbar{filter:drop-shadow(0 0 3px rgba(242,197,107,.75))}
@media(max-width:700px){
  .logo{font-size:16px;letter-spacing:.06em;gap:8px}
  .logo .mark{width:26px;height:26px}
}

/* banda "quanto vale": blocco nero pieno, cinematografico, sul bianco della pagina */
.bigcta h2,.bigcta .lead{color:var(--paper)}
.bigcta .eyebrow{color:var(--sun);background:none;-webkit-text-fill-color:currentColor}
.bigcta .crescendo i{background:var(--sun)}
.bigcta .btn.ghost{background:transparent;color:var(--paper);border-color:color-mix(in srgb,var(--paper) 45%,transparent)}
.bigcta .btn.ghost:hover{border-color:var(--paper);color:var(--paper)}

/* ==================== Blog quotidiano (/notizie/): indice per giorno e post ====================
   Bianco, nero, oro. La data e' un timbro in monospazio; il giorno e' un blocco con
   un filo d'oro; ogni post e' una riga cliccabile, non una card. Nel post, le fonti
   sono una lista numerata in fondo, con il dominio accanto. */
.notizie .eyebrow a{color:inherit;text-decoration:underline;text-decoration-color:var(--sun);text-underline-offset:3px}
.ngiorno{margin-top:34px;padding-top:18px;border-top:1px solid var(--line)}
.ngiorno:first-of-type{margin-top:26px}
.ngtit{display:flex;align-items:baseline;gap:14px;font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-ink);margin:0 0 6px}
.ngtit time{color:var(--ink);font-weight:500;padding:4px 10px;border:1px solid var(--ink);border-radius:6px;letter-spacing:.1em}
.ngtit span{color:var(--brand);font-weight:500}
.npost{display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:start;padding:18px 0;border-top:1px dashed var(--line);color:var(--ink);text-decoration:none;position:relative}
.ngtit+.npost{border-top:0}
.npost h3{grid-column:1;font-size:clamp(19px,2.2vw,24px);line-height:1.2;letter-spacing:-.015em;margin:0;text-wrap:balance;transition:color .2s}
.npost p{grid-column:1;margin:0;color:var(--muted-ink);font-size:15px;max-width:70ch}
.npost .nleggi{grid-column:2;grid-row:1/3;align-self:center;font-family:"Bricolage Grotesque","IBM Plex Sans",sans-serif;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border-bottom:2px solid var(--sun);padding-bottom:2px;white-space:nowrap;transition:transform .25s var(--ease-out),color .2s}
.npost:hover h3{color:var(--brand)}
.npost:hover .nleggi{transform:translateX(5px);color:var(--brand)}
.npost:focus-visible{outline:2px solid var(--sun);outline-offset:4px;border-radius:6px}
/* il post */
.notizia article{max-width:72ch}
.notizia .ndata{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-ink);margin:0 0 10px}
.notizia .ndata time{color:var(--ink);padding:3px 8px;border:1px solid var(--ink);border-radius:5px}
.notizia .nagente{color:var(--brand)}
.notizia .ncorpo{margin-top:22px;font-size:17px;line-height:1.7}
.notizia .ncorpo h2{font-size:clamp(22px,2.6vw,30px);margin:34px 0 10px;letter-spacing:-.02em}
.notizia .ncorpo h2:first-child{margin-top:8px}
.notizia .ncorpo p{margin:0 0 16px}
.notizia .ncorpo strong{color:var(--ink);background:linear-gradient(transparent 62%,color-mix(in srgb,var(--sun) 55%,transparent) 62%)}
.notizia .ncorpo a{color:var(--brand);text-decoration:underline;text-decoration-color:var(--sun);text-underline-offset:3px}
.notizia .nfonti{margin-top:34px;padding:18px 20px;border:1px solid var(--line);border-left:3px solid var(--sun);border-radius:0 12px 12px 0;background:var(--surface-2)}
.notizia .nfonti h2{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-ink);margin:0 0 10px}
.notizia .nfonti ol{margin:0;padding-left:22px;font-size:14.5px}
.notizia .nfonti li{margin:6px 0}
.notizia .nfonti a{color:var(--ink)}
.notizia .nhost{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted-ink);margin-left:6px}
.notizia .nmodelli{margin:18px 0 0;font-size:14px;color:var(--muted-ink)}
.notizia .nmodelli a{color:var(--brand)}
.notizia .nnota{margin:22px 0 0;font-size:13px;color:var(--muted-ink);border-top:1px solid var(--line);padding-top:12px}
.notizia .valuecta{margin-top:40px}
@media(max-width:700px){
  .npost{grid-template-columns:1fr}
  .npost .nleggi{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}
  .ngtit{flex-wrap:wrap;gap:8px}
}

/* ====== HOME, 18/09 sera: blocchi senza riquadri, titoli 3D, colori d'azione ======
   Richiesta del titolare: sfondo nero, niente cornici e sfondi colorati, i titoli
   "escono dallo schermo" (estrusione d'oro + rotazione in prospettiva all'arrivo),
   tasti d'azione verdi che pulsano (dal 19/09 sera niente rosso, vedi --go-*), vetrina con il solo
   robot centrale, scene con frecce in sovrimpressione, lente sui modelli. */
.b3d{background:#000;color:#fff;padding:78px 0}
.b3d .lead{color:rgba(255,255,255,.72)}
.b3d .center .lead{margin-inline:auto}
.t3d{font-family:"Bricolage Grotesque",-apple-system,sans-serif;font-weight:800;font-size:clamp(34px,6vw,74px);line-height:1;letter-spacing:-.02em;color:#fff;text-wrap:balance;margin:0 0 26px;
  transform-style:preserve-3d;
  text-shadow:0 1px 0 #d4a94f,0 2px 0 #c39a43,0 3px 0 #b08938,0 4px 0 #9c782f,0 5px 0 #866626,0 6px 0 #6f531d,0 8px 0 #4a3712,0 14px 22px rgba(0,0,0,.55),0 0 46px rgba(242,197,107,.28)}
.center .t3d,.t3d.center{margin-inline:auto}
html.js .t3d[data-t3d]{opacity:0;transform:perspective(900px) rotateX(38deg) translateY(30px) translateZ(-160px) scale(.86);transition:transform 1.15s cubic-bezier(.16,1,.3,1),opacity .8s ease}
html.js .t3d[data-t3d].on{opacity:1;transform:perspective(900px) rotateX(0) translateY(0) translateZ(0) scale(1);animation:t3dFloat 7s ease-in-out 1.2s infinite}
@keyframes t3dFloat{0%,100%{transform:perspective(900px) translateZ(0) rotateX(0)}50%{transform:perspective(900px) translateZ(26px) rotateX(-3deg)}}
html.no-motion .t3d[data-t3d],html.js .t3d[data-t3d].on{animation-duration:0s}
html.js:not(.no-motion) .t3d[data-t3d].on{animation-duration:7s}
/* tasti d'azione (20/09): .go e' solo un alias storico di .btn.primary, che ormai e' verde da
   solo (token --go-* in :root); il rosso .vai del 18/09 e' stato tolto: niente tasti rossi.
   .pulsa chiama all'azione, ma UNO SOLO alla volta: con JavaScript pulsa soltanto il tasto
   .pulsa piu' in alto fra quelli nel viewport (classe .pulsa-on data da motion.js); senza
   JavaScript pulsano tutti; con reduced-motion nessuno. */
.btn.primary.go,.btn.primary.go:hover{background:linear-gradient(135deg,var(--go-a),var(--go-b));color:var(--on-go);box-shadow:0 10px 34px var(--go-glow)}
.btn.pulsa{position:relative;animation:btnPulse 2.4s ease-in-out infinite}
.btn.pulsa::after{content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;box-shadow:0 0 0 0 rgba(59,224,138,0);animation:btnAnello 2.4s ease-out infinite}
html.js .btn.pulsa:not(.pulsa-on),html.js .btn.pulsa:not(.pulsa-on)::after{animation:none}
@keyframes btnPulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1px) scale(1.035)}}
/* l'anello si allarga di 16px uniformi (box-shadow), non in scala: su una pillola larga la scala
   sbordava sul tasto accanto e nel chiaro il bordo scuro sembrava un difetto */
@keyframes btnAnello{0%{box-shadow:0 0 0 0 rgba(59,224,138,.6)}70%,100%{box-shadow:0 0 0 16px rgba(59,224,138,0)}}
/* vetrina: si vede solo il robot al centro; il prossimo arriva scorrendo (frecce, tasti, swipe, tempo) */
.vetrina .vfig.left,.vetrina .vfig.right,.vetrina .vfig.back{opacity:0!important;pointer-events:none}
/* scene: frecce in sovrimpressione, niente pallini, niente pausa; nello scuro la lastra sfuma sul
   nero (--scene-mask), nel chiaro e' una lastra arrotondata con ombra (token in :root) */
.world .stage{mask-image:var(--scene-mask);-webkit-mask-image:var(--scene-mask)}
/* overflow visibile: la lastra inclinata sporge di qualche pixel e nel chiaro ha un'ombra; la pagina
   non scorre in orizzontale perche' body ha overflow-x:hidden e sul telefono il tilt e' spento */
.world{padding:34px 0;overflow:visible}
.warrow{position:absolute;top:50%;z-index:3;width:56px;height:56px;margin-top:-28px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.28);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.32;transition:opacity .2s,background .2s,transform .2s;backdrop-filter:blur(6px)}
.warrow svg{width:26px;height:26px}
.warrow.prev{left:max(12px,calc((100% - min(100%,calc(min(78vh,800px)*16/9))) / 2 + 14px))}
.warrow.next{right:max(12px,calc((100% - min(100%,calc(min(78vh,800px)*16/9))) / 2 + 14px))}
.world:hover .warrow,.warrow:focus-visible{opacity:.85}
.warrow:hover{background:rgba(0,0,0,.55);transform:scale(1.06)}
.world{position:relative}
/* guide e passi senza riquadri */
.bgrid.nudo{gap:6px 40px;grid-template-columns:repeat(2,1fr)}
.bgrid.nudo .bcard{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.12);border-radius:0;padding:22px 0 18px 54px;position:relative;counter-increment:guida}
.bgrid.nudo .bcard::before{content:counter(guida,decimal-leading-zero);position:absolute;left:0;top:22px;font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.1em;color:var(--sun)}
.bgrid.nudo{counter-reset:guida}
.bgrid.nudo .bcard b{font-family:"Bricolage Grotesque",-apple-system,sans-serif;font-size:clamp(18px,2vw,24px);letter-spacing:-.01em;color:#fff;transition:transform .25s,text-shadow .25s}
.bgrid.nudo .bcard p{color:rgba(255,255,255,.6)}
.bgrid.nudo .bcard:hover{transform:none;border-color:rgba(242,197,107,.5)}
.bgrid.nudo .bcard:hover b{transform:translateX(8px);text-shadow:0 0 22px rgba(242,197,107,.55)}
.b3d .steps .step{background:transparent;border:0;padding:18px 0}
.b3d .steps .step h4{font-family:"Bricolage Grotesque",-apple-system,sans-serif;font-size:22px;color:#fff}
.b3d .steps .step p{color:rgba(255,255,255,.62)}
.b3d .steps .step .n{background:transparent;color:var(--sun);border:1px solid rgba(242,197,107,.5);width:38px;height:38px;border-radius:50%;font-size:14px}
.b3d .mktsoon .mktcol{background:transparent;border:0;padding:0}
.b3d .mktsoon h4{color:#fff}
/* la lente dei modelli: il robot esce dalla scheda e galleggia in sovrimpressione */
.lente{position:fixed;right:clamp(12px,4vw,64px);top:50%;z-index:120;width:min(520px,44vw);transform:translateY(-50%) translateX(40px) scale(.7);opacity:0;pointer-events:none;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .35s;perspective:1000px}
.lente.on{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0) scale(1)}
.lente-scena{position:relative;background:radial-gradient(60% 60% at 50% 45%,#161616,#000 75%);border:1px solid rgba(242,197,107,.35);border-radius:28px;padding:26px 26px 22px;box-shadow:0 40px 90px rgba(0,0,0,.7),0 0 60px rgba(242,197,107,.12);transform-style:preserve-3d;cursor:pointer}
.lente img{display:block;width:min(360px,70%);aspect-ratio:3/4;object-fit:contain;margin:0 auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));animation:lenteFloat 5.5s ease-in-out infinite;transform-origin:50% 60%}
@keyframes lenteFloat{0%,100%{transform:translateZ(40px) translateY(0) rotate(-1.5deg)}50%{transform:translateZ(80px) translateY(-14px) rotate(1.5deg)}}
.lente-testi{text-align:center;margin-top:8px;color:#fff}
.lente-testi b{display:block;font-family:"Bricolage Grotesque",-apple-system,sans-serif;font-size:clamp(20px,2.2vw,30px);letter-spacing:-.01em}
.lente-testi .lente-cifra{display:block;font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--sun);margin:6px 0 8px;letter-spacing:.04em}
.lente-testi p{font-size:15px;color:rgba(255,255,255,.78);margin:0 0 6px;text-wrap:balance}
.lente-testi em{font-style:normal;font-size:12px;color:rgba(255,255,255,.5);letter-spacing:.08em;text-transform:uppercase}
@media(max-width:1000px){.lente{display:none}}
@media(max-width:700px){.bgrid.nudo{grid-template-columns:1fr}.b3d{padding:56px 0}.warrow{width:44px;height:44px;margin-top:-22px;opacity:.5}}
@media(prefers-reduced-motion:reduce){.t3d[data-t3d],.btn.pulsa,.btn.pulsa::after,.lente img{animation:none!important}html.js .t3d[data-t3d]{opacity:1;transform:none;transition:none}}
/* annunci: giudizio del prezzo mentre si scrive (vendi.html), timbro VENDUTO sugli esempi, passi «come funziona» */
.pricejudge{display:flex;align-items:center;gap:12px;margin-top:10px}
.pricejudge .deal{position:static}
.pricejudge .pricenote{font-size:13px;color:var(--muted)}
.pricejudge.pop .deal{animation:dealPop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes dealPop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.annunci .lcard.venduto{position:relative}
.annunci .lcard.venduto .photo img,.annunci .lcard.venduto .photo .phfb{filter:grayscale(.35) brightness(.8)}
.annunci .lcard.venduto .timbro{position:absolute;right:14px;top:14px;transform:rotate(-12deg);font-family:"Bricolage Grotesque",-apple-system,sans-serif;font-weight:800;font-size:22px;letter-spacing:.14em;color:#ff5a3c;border:3px solid #ff5a3c;border-radius:8px;padding:4px 12px;background:rgba(0,0,0,.55);text-shadow:0 0 12px rgba(255,90,60,.5);box-shadow:0 0 22px rgba(255,90,60,.25)}
.annunci .lcard.venduto .esempio{position:absolute;left:14px;bottom:12px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.annunci.esempi{margin-bottom:10px}
ol.come{margin:8px 0 18px 18px;padding:0;font-size:15px;line-height:1.6}
ol.come li{margin-bottom:6px}
.cercobox{max-width:760px}
.frow .fld{flex:1}
/* ---- risposte sotto la stima (public/funzioni.js: «E' giusta?», «Quanto l'hai pagato?», tre domande) ----
   Vive dentro la card del risultato di valuta.html (#funzioniValuta). Solo bottoni e campi facoltativi:
   stessi token della pagina, nessun colore nuovo. In stampa non compare. */
#funzioniValuta[hidden]{display:none}
.fz{margin-top:16px;border-top:1px dashed var(--line);padding-top:14px;font-size:14px}
.fz-blocco{padding:10px 0}
.fz-blocco+.fz-blocco{border-top:1px solid var(--line)}
.fz-q{font-weight:700;color:var(--txt);margin:0 0 8px;font-size:14.5px}
.fz-n{display:inline-block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:var(--muted);margin-right:4px;letter-spacing:.04em}
.fz-titolo{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.fz-scelte{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fz-b{font:inherit;font-size:13.5px;font-weight:600;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--txt);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.fz-b:hover{border-color:var(--teal);color:var(--teal)}
.fz-b:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.fz-b.on{background:var(--sun);border-color:var(--sun);color:var(--on-accent)}
.fz-b:disabled:not(.on){opacity:.45;cursor:default}
.fz-b.fz-num{min-width:40px;padding:9px 0;text-align:center;font-family:"IBM Plex Mono",ui-monospace,monospace}
.fz-scala{font-size:12px;color:var(--muted)}
.fz-nota{font-size:12px;color:var(--muted);margin:8px 0 0;line-height:1.5}
.fz-ok{margin:8px 0 0;color:var(--txt);font-weight:600;line-height:1.5}
.fz-dopo{margin-top:10px}
.fz-dopo .fz-q{margin-top:12px}
.fz-lbl{display:block;font-size:12.5px;color:var(--muted);margin:10px 0 0}
.fz-riga{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.fz-riga input[type=number]{width:140px;background:var(--bg2);border:1px solid var(--line);color:var(--txt);padding:9px 11px;border-radius:10px;font:inherit;font-size:14px}
.fz-riga input:focus{outline:none;border-color:var(--teal)}
.fz-salta{font:inherit;font-size:12.5px;background:none;border:none;color:var(--muted);text-decoration:underline;cursor:pointer;padding:6px 0;margin-top:6px}
.fz-salta:hover{color:var(--txt)}
.fz-apri{font:inherit;font-size:13.5px;font-weight:600;text-align:left;width:100%;background:var(--card);border:1px dashed var(--line);border-radius:12px;padding:11px 13px;color:var(--txt);cursor:pointer;line-height:1.4}
.fz-apri:hover{border-color:var(--teal);color:var(--teal)}
.fz-form{margin-top:10px}
.fz-griglia{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:420px){.fz-griglia{grid-template-columns:1fr}}
.fz-griglia label{display:block;font-size:12px;color:var(--muted)}
.fz-griglia input,.fz-griglia select{display:block;width:100%;margin-top:4px;background:var(--bg2);border:1px solid var(--line);color:var(--txt);padding:9px 10px;border-radius:10px;font:inherit;font-size:14px}
.fz-griglia input:focus,.fz-griglia select:focus{outline:none;border-color:var(--teal)}
.fz-esito .fz-ok{font-size:15px}
.fz-consigli{margin-top:6px}
.fz-consiglio{margin:8px 0 0;padding:10px 12px;border-radius:12px;background:var(--surface-2);color:var(--txt);line-height:1.5;font-size:13.5px}
.fz-link{font-weight:700;white-space:nowrap}
@media print{#funzioniValuta{display:none!important}}

/* ====== TEMA UNICO SCURO ======
   I blocchi cinematografici usano i token --stage-* / --slab-* definiti in testa:
   lo sfondo resta nero senza dipendere dal sistema, dall'ora o da preferenze locali. */

/* ---- hero: palco nero ---- */
.hero-robo{background:var(--stage-bg);color:var(--stage-ink)}
.hero-robo .particles{filter:var(--particles-filter)}
/* immagine, riflesso, anello e visiera condividono la maschera radiale. */
.hero-robo .robot{clip-path:var(--slab-clip)}
.hero-robo .robot>img,.hero-robo .sheen{-webkit-mask-image:var(--robot-mask);mask-image:var(--robot-mask)}
.hero-robo .copy::before{background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--stage-bg) 72%,transparent) 45%,color-mix(in srgb,var(--stage-bg) 92%,transparent) 100%)}
.hero-robo h1{color:var(--stage-ink);text-shadow:var(--stage-text-shadow)}
.hero-robo h1 em{color:var(--stage-accent)}
.hero-robo .sub{color:var(--stage-muted)}
.hero-robo .badge{background:var(--stage-chip);color:var(--stage-ink);border-color:var(--stage-line)}
.hero-robo .btn.ghost{color:var(--stage-ink);border-color:var(--stage-line-strong)}
.hero-robo .btn.ghost:hover{border-color:var(--stage-ink);color:var(--stage-ink);background:var(--stage-chip)}
.hero-robo .chip{background:var(--stage-chip);border-color:var(--stage-line)}
.hero-robo .chip b{color:var(--stage-ink);-webkit-text-fill-color:var(--stage-ink)}
.hero-robo .chip span{color:var(--stage-muted)}
.hero-robo .ghostmark span{-webkit-text-stroke-color:var(--stage-stroke)}
.hero-robo .ghostmark .o{border-color:var(--stage-stroke)}
.hero-robo .ghostmark .o::after{background:var(--stage-stroke)}
.hero-robo .scrollcue{color:var(--stage-muted)}

/* ---- vetrina: figurine e testi sul palco nero ---- */
.vetrina{background:var(--stage-bg);color:var(--stage-ink)}
.vetrina::before{background:repeating-linear-gradient(180deg,var(--stage-scan) 0 1px,transparent 1px 3px)}
.vetrina::after{background:var(--stage-tear)}
.vetrina .vghost{-webkit-text-stroke-color:var(--stage-stroke)}
.vetrina .vfig{background:var(--slab-bg);border-radius:var(--slab-radius);overflow:hidden}
.vetrina .vcard{-webkit-mask-image:var(--vcard-mask);mask-image:var(--vcard-mask)}
.vetrina .vbrand,.vetrina .vk,.vetrina .vprezzi{color:var(--stage-muted)}
.vetrina .vprezzi b{color:var(--stage-accent)}
.vetrina .vname{color:var(--stage-ink)}
.vetrina .vname::before{color:var(--stage-accent)}
.vetrina .vname::after{color:var(--stage-ink)}
.vetrina .varrow{border-color:var(--stage-line-strong);color:var(--stage-ink)}
.vetrina .vdiscover{color:var(--stage-ink)}
.vetrina .vdiscover:hover{color:var(--stage-accent)}

/* ---- scene: il palco segue il tema, le foto restano su nero ---- */
.world{background:var(--stage-bg);color:var(--stage-ink)}
.world h2{color:var(--stage-ink)}
.world .lead{color:var(--stage-muted)}

/* ---- blocchi .b3d: guide, vendi, modelli, advisor, costi, mercato ---- */
.b3d{background:var(--stage-bg);color:var(--stage-ink)}
.b3d .lead{color:var(--stage-muted)}
.bgrid.nudo .bcard{border-bottom-color:var(--stage-line)}
.bgrid.nudo .bcard::before{color:var(--stage-accent)}
.bgrid.nudo .bcard b{color:var(--stage-ink)}
.bgrid.nudo .bcard p{color:var(--stage-muted)}
.bgrid.nudo .bcard:hover{border-color:color-mix(in srgb,var(--stage-accent) 50%,transparent)}
.bgrid.nudo .bcard:hover b{text-shadow:0 0 22px var(--stage-glow)}
.b3d .steps .step h4{color:var(--stage-ink)}
.b3d .steps .step p{color:var(--stage-muted)}
.b3d .steps .step .n{color:var(--stage-accent);border-color:color-mix(in srgb,var(--stage-accent) 50%,transparent)}
.b3d .mktsoon h4{color:var(--stage-ink)}

/* ---- banda .bigcta (valuta.html): fondo «di marca» (nero nel chiaro, oro nello scuro). Occhiello,
   barre e tasto pieno erano d'oro fisso: nello scuro sparivano sull'oro. Tutto in --on-brand ---- */
.bigcta .eyebrow{color:var(--on-brand)}
.bigcta .crescendo i{background:var(--on-brand)}
.bigcta .btn.primary,.bigcta .btn.primary:hover{background:var(--on-brand);color:var(--brand-bg);box-shadow:none;filter:none}  /* eccezione dichiarata al verde: banda «di marca», il tasto e' un link agli annunci */
/* «Da considerare» nelle schede e nel modale: l'oro medio (--brand-soft) sul chiaro non arriva ad AA */
.con h5{color:var(--ink)}
/* la barra fissa del risultato su valuta.html (stile in pagina, sotto i 1000px) era nera fissa dal vecchio
   tema: segue la carta del tema; il valore in oro pieno, non in gradiente (AA sul bianco) */
body .mobar{background:color-mix(in srgb,var(--paper) 94%,transparent)}
body .mobar b{background:none;-webkit-text-fill-color:currentColor;color:var(--value)}

/* ---- header compatto sotto i 520px: logo, tasto, lingua e tema su UNA riga (prima la
   lingua andava a capo sotto il tasto). Il tasto tema tiene 44x44 di area utile ---- */
@media(max-width:520px){
  .nav.wrap{padding:0 14px}
  .nav nav{display:flex;align-items:center;flex-wrap:nowrap;min-width:0}
  .logo{font-size:14px;letter-spacing:.05em;gap:7px}
  .logo .mark{width:24px;height:24px}
  .nav nav a.cta{font-size:11.5px;padding:7px 10px;margin-left:8px;letter-spacing:0}
  .lingue{margin-left:6px}
  .lingue-btn{padding:6px 7px;gap:4px}
}
/* sotto i 400px (iPhone SE/mini) anche il tedesco e il francese del tasto devono starci in una riga */
@media(max-width:400px){
  .logo{font-size:13px;letter-spacing:.04em;gap:6px}
  .nav nav a.cta{font-size:11px;padding:7px 8px;margin-left:6px}
  .lingue{margin-left:4px;gap:4px}
  .lingue-btn{padding:6px 6px;gap:3px}
  .lingue-btn::after{width:5px;height:5px}
}

/* ---- filtri dell'hub /robot/ e riga «Adatto a» delle schede (agente modelli-filtri, 19/09/2026; markup in scripts/build-models.js) ----
   Due file di chip sopra la griglia, «Tipo» e «Uso», combinabili; la chip attiva e' in oro (--sun,
   testo --on-accent) in entrambi i temi; il conteggio e' in Plex Mono. Su telefono ogni fila scorre in
   orizzontale a tutta larghezza. Senza JavaScript il blocco non compare e la griglia resta intera. */
.hubf{display:none;margin:-6px 0 26px}
html.js .hubf{display:block}
.hubf-riga{display:flex;align-items:center;gap:16px;padding:11px 0;border-top:1px solid var(--line)}
.hubf-riga+.hubf-riga{border-top:1px dashed var(--line)}
.hubf-lbl{flex:0 0 auto;min-width:40px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-ink)}
.hubf-chips{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.hubf-chip{font:inherit;font-size:13.5px;font-weight:600;line-height:1;display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s,color .15s,opacity .15s}
.hubf-chip:hover{border-color:var(--brand)}
.hubf-chip:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.hubf-chip .n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:500;color:var(--muted-ink);font-variant-numeric:tabular-nums}
.hubf-chip.on{background:var(--sun);border-color:var(--sun);color:var(--on-accent)}
.hubf-chip.on .n{color:inherit;opacity:.7}
.hubf-chip.vuota{opacity:.42}
.hubf-esito{display:flex;align-items:center;gap:14px;margin:12px 0 0;font-size:13px;color:var(--muted-ink);font-variant-numeric:tabular-nums}
.hubf-azzera{font:inherit;font-size:12.5px;font-weight:600;background:none;border:none;color:var(--brand);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}
.hubf-azzera:hover{color:var(--ink)}
.hubf-nessuno{padding:36px 20px;text-align:center;border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted-ink);font-size:15px;margin-bottom:10px}
.rgrid .rcard[hidden],.hubf-nessuno[hidden],.hubf-azzera[hidden]{display:none}
@media(max-width:700px){
  .hubf-riga{flex-direction:column;align-items:stretch;gap:8px}
  .hubf-chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 -20px;padding:2px 20px 4px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .hubf-chips::-webkit-scrollbar{display:none}
  .hubf-chip{scroll-snap-align:start;flex:0 0 auto}
}
/* la riga «Adatto a» nella scheda: ogni voce rimanda all'hub gia' filtrato (?uso=) */
.sheet .usi{font-size:12.5px;color:var(--muted-ink);margin:0 0 12px;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.sheet .usi .lbl{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-right:2px}
.sheet .usi a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--line);padding-bottom:1px}
.sheet .usi a:hover{color:var(--brand);border-color:var(--brand)}
.sheet .usi .sep{opacity:.45}

/* ====== 19/09 sera — agente «home+annunci»: titoli 3D nitidi, tasti verdi, etichette
   dell'affare, venduti di recente ======
   Richiesta 4 — i titoli .t3d escono dallo schermo ma restano NITIDI, premium e seri.
   Due strati sullo stesso <h2>:
   - l'elemento porta il colore di base e l'ESTRUSIONE: text-shadow SENZA sfocatura,
     1 px per passo, 8 passi (oro scuro → nero sullo scuro, oro → oro scuro sul chiaro),
     piu' UNA sola ombra morbida sotto;
   - lo ::after (stesso testo, letto da data-text che motion.js scrive dal testo gia'
     tradotto) porta la FACCIA con il gradiente (background-clip:text) e un filo di
     contorno; sta sopra all'elemento, cosi' l'estrusione non copre il gradiente (su un
     solo elemento il text-shadow verrebbe dipinto SOPRA il testo ritagliato).
   Niente blur, niente trasformazione a regime: l'entrata (.on) finisce su transform:none,
   quindi il testo e' rasterizzato fermo e resta nitido a ogni zoom. Con reduced-motion
   o senza JS il titolo e' visibile subito, con l'estrusione.
   Colori: faccia oro chiaro → oro, con estrusione scura. */
:root{
  --t3d-faccia-a:#ffe6a3; --t3d-faccia-b:#f2c56b; --t3d-bordo:rgba(255,236,190,.35);
  --t3d-estrusione:0 1px 0 #7a5d0e,0 2px 0 #6b510c,0 3px 0 #5b450a,0 4px 0 #4b3908,0 5px 0 #3b2d06,0 6px 0 #2c2104,0 7px 0 #1d1603,0 8px 0 #0f0b02,0 14px 22px rgba(0,0,0,.6);
  /* etichette dell'affare (richiesta 9): oro caldo e testo nero per il migliore, verde bosco,
     neutro, rosso scuro. Verde e rosso qui sono semantici (giudizio sul prezzo). */
  --deal-top:linear-gradient(135deg,#f2c56b 0%,#ffe6a3 100%);
  --deal-top-ink:#0a0a0a;
  --deal-top-alone:0 0 0 1px rgba(255,230,163,.28),0 0 18px rgba(242,197,107,.5);
  --deal-good:#1c7a4d; --deal-good-ink:#fff;
  --deal-fair:#262626; --deal-fair-ink:#f4f3ef; --deal-fair-bordo:rgba(255,255,255,.18);
  --deal-high:#8a1f1f; --deal-high-ink:#fff;
}
/* la faccia piena e l'estrusione: sostituiscono l'effetto del 18/09 (alone sfocato, float 3D) */
.t3d{position:relative;font-family:"Bricolage Grotesque",-apple-system,sans-serif;font-weight:800;font-size:clamp(32px,4.6vw,62px);line-height:1.06;letter-spacing:.01em;color:var(--t3d-faccia-b);text-shadow:var(--t3d-estrusione);transform-style:flat;-webkit-font-smoothing:antialiased}
.t3d::after{content:attr(data-text) / "";position:absolute;left:0;top:0;width:100%;pointer-events:none;user-select:none;color:transparent;-webkit-text-fill-color:transparent;background-image:linear-gradient(180deg,var(--t3d-faccia-a) 0%,var(--t3d-faccia-b) 78%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:.5px var(--t3d-bordo);text-shadow:none}
.t3d:not([data-text])::after{content:none}
/* entrata: un lieve rialzo in prospettiva che si posa su transform:none (mai in movimento a regime) */
html.js .t3d[data-t3d]{transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .55s ease}
html.js .t3d[data-t3d]:not(.on){opacity:0;transform:perspective(800px) rotateX(14deg) translateY(24px)}
html.js .t3d[data-t3d].on,html.js:not(.no-motion) .t3d[data-t3d].on{opacity:1;transform:none;animation:none}
html.no-motion .t3d[data-t3d]:not(.on){opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){html.js .t3d[data-t3d]:not(.on){opacity:1;transform:none;transition:none}}
/* sotto i 700px il corpo scende a 32px: l'estrusione si accorcia a 5 passi (stessa scala, stessi colori) */
@media(max-width:700px){
  .t3d{line-height:1.1}
  :root{--t3d-estrusione:0 1px 0 #7a5d0e,0 2px 0 #5b450a,0 3px 0 #3b2d06,0 4px 0 #1d1603,0 5px 0 #0f0b02,0 10px 16px rgba(0,0,0,.6)}
}

/* richiesta 5 — i tasti di vendita sono verdi (.go) come gli altri inviti: il rosso resta
   per errori e stati negativi. .vai (rosso) non e' piu' usato dalle pagine. */

/* richiesta 9 — etichette dell'affare: leggibili sul nero e sul bianco */
.deal{letter-spacing:.06em;text-transform:uppercase}
.deal.top{background:var(--deal-top);color:var(--deal-top-ink);box-shadow:var(--deal-top-alone)}
.deal.good{background:var(--deal-good);color:var(--deal-good-ink)}
.deal.fair{background:var(--deal-fair);color:var(--deal-fair-ink);box-shadow:inset 0 0 0 1px var(--deal-fair-bordo)}
.deal.high{background:var(--deal-high);color:var(--deal-high-ink)}
/* il teaser «Gli annunci» e' senza riquadri (18/09): sul fondo bianco l'ombra della card
   restava visibile come un rettangolo fantasma */
.b3d .mktsoon .mktcol{box-shadow:none}

/* richiesta 9 — «Venduti di recente» (annunci.html): la data di chiusura sotto la citta';
   il timbro VENDUTO resta quello del 18/09. Nessuna etichetta «esempio». */
.annunci.venduti{margin-bottom:10px}
.annunci .lcard.venduto .loc{margin-top:8px}
.annunci .lcard.venduto .quando{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:var(--ink);font-weight:600}
.annunci .lcard.venduto .quando::before{content:"✓";color:var(--ok);font-weight:800;font-size:12px}