/* ===================================================================
   Vetrina Immobiliare — home page (grafica premium)
   Tutto in questo file: nessuna libreria esterna, nessuno stile inline
   (la Content-Security-Policy del sito blocca CDN e stili inline).
   =================================================================== */
:root{
  --ink:#e9eefb; --ink2:#9fb0cc; --ink3:#6b7c99;
  --bg0:#05070d; --bg1:#080c16; --panel:#0d1320; --panel2:#111a2b;
  --line:#1b2740; --line2:#27364f;
  --blue:#4f8dff; --blue2:#2563eb; --cyan:#38e0d0; --violet:#8b7bff; --green:#34d399;
  --gold:#f0b429; --red:#f2545b;
  --shadow-xl:0 40px 90px rgba(0,0,0,.65);
  --shadow-lg:0 24px 60px rgba(0,0,0,.5);
  --r-lg:22px; --r-md:16px; --r-sm:12px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1140px;
}
/* ===== TEMA CHIARO: tonalità calde e luminose, non il solito bianco piatto ===== */
html[data-theme="light"]{
  --ink:#0d1730; --ink2:#4a5b78; --ink3:#78899f;
  --bg0:#eef2fa; --bg1:#f6f8fc; --panel:#ffffff; --panel2:#ffffff;
  --line:#dde5f2; --line2:#c9d5e8;
  --blue:#2563eb; --blue2:#1d4ed8; --cyan:#0d9488; --violet:#7c5cf0; --green:#059669;
  --shadow-xl:0 30px 70px rgba(31,55,102,.16);
  --shadow-lg:0 18px 44px rgba(31,55,102,.13);
}
html[data-theme="light"] .bgfx{background:
  radial-gradient(1100px 640px at 50% -12%, #dbe7ff 0%, transparent 62%),
  linear-gradient(180deg,#f7f9fd 0%, #eaf0f9 100%)}
html[data-theme="light"] .orb{opacity:.42;filter:blur(80px)}
html[data-theme="light"] .orb.a{background:radial-gradient(circle at 30% 30%,#9fc0ff,#dfe9ff 70%)}
html[data-theme="light"] .orb.b{background:radial-gradient(circle at 60% 40%,#8fe3da,#e0f6f3 70%)}
html[data-theme="light"] .orb.c{background:radial-gradient(circle at 50% 50%,#c3b8ff,#ece8ff 70%);opacity:.34}
html[data-theme="light"] .grid{opacity:.55;
  background-image:linear-gradient(rgba(60,110,200,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(60,110,200,.07) 1px,transparent 1px)}
html[data-theme="light"] .nav.stuck{background:rgba(255,255,255,.86);box-shadow:0 8px 30px rgba(31,55,102,.1)}
html[data-theme="light"] .eyebrow{background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.22);color:#1e4bb8}
html[data-theme="light"] .shine{background:linear-gradient(100deg,#1d4ed8,#2563eb 25%,#0d9488 50%,#7c5cf0 75%,#1d4ed8);
  background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="light"] .btn-g{background:#fff;border-color:var(--line2);box-shadow:0 2px 10px rgba(31,55,102,.07)}
html[data-theme="light"] .btn-g:hover{background:#f4f7fd}
html[data-theme="light"] .kpi,
html[data-theme="light"] .feat,
html[data-theme="light"] .cbox,
html[data-theme="light"] .toolcard,
html[data-theme="light"] .faq details,
html[data-theme="light"] .snum{background:#fff;box-shadow:0 4px 18px rgba(31,55,102,.07)}
html[data-theme="light"] .feat:hover{box-shadow:0 20px 46px rgba(31,55,102,.14)}
html[data-theme="light"] .feat::before{background:radial-gradient(420px 220px at var(--mx,50%) var(--my,0%),rgba(37,99,235,.09),transparent 70%)}
html[data-theme="light"] .kpi b{background:linear-gradient(135deg,#0d1730,#2563eb);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="light"] .ficon{background:linear-gradient(140deg,rgba(37,99,235,.12),rgba(13,148,136,.1));border-color:rgba(37,99,235,.2)}
html[data-theme="light"] .ficon svg{stroke:#2563eb}
html[data-theme="light"] .chips span{color:#1e4bb8;background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.2)}
html[data-theme="light"] .tag{color:#0b7d72}
html[data-theme="light"] .snum{color:#0d1730}
html[data-theme="light"] .marquee{background:rgba(255,255,255,.55)}
html[data-theme="light"] .cbox.bad{border-color:rgba(220,60,70,.24);background:#fff}
html[data-theme="light"] .cbox.good{border-color:rgba(5,150,105,.28);background:linear-gradient(170deg,#f0fbf6,#fff)}
html[data-theme="light"] .mk.x{background:rgba(220,60,70,.1);color:#c0323b}
html[data-theme="light"] .mk.v{background:rgba(5,150,105,.12);color:#05745a}
html[data-theme="light"] .cta{background:linear-gradient(150deg,rgba(37,99,235,.1),rgba(13,148,136,.08) 55%,rgba(124,92,240,.1));
  border-color:var(--line2);box-shadow:0 24px 60px rgba(31,55,102,.14)}
html[data-theme="light"] .cta::before{background:conic-gradient(from 0deg,transparent,rgba(37,99,235,.09),transparent 30%)}
html[data-theme="light"] .mailtag{background:#fff;border-color:var(--line2)}
html[data-theme="light"] .foot{background:rgba(255,255,255,.6)}
html[data-theme="light"] .device{background:linear-gradient(160deg,#ffffff,#eef3fb);border-color:var(--line2)}
html[data-theme="light"] .device::before{background:linear-gradient(140deg,rgba(37,99,235,.35),transparent 40%,rgba(13,148,136,.28))}
html[data-theme="light"] .floatcard{background:rgba(255,255,255,.94);border-color:var(--line2);color:#0d1730}
html[data-theme="light"] .cookiebar{background:#fff}
html[data-theme="light"] .vmock,html[data-theme="light"] .vmockH{border-color:var(--line2)}

/* selettore della lingua */
.langbox{position:relative}
.langbox summary{list-style:none;cursor:pointer}
.langbox summary::-webkit-details-marker{display:none}
.langmenu{position:absolute;right:0;top:calc(100% + 8px);min-width:186px;max-width:calc(100vw - 28px);z-index:80;padding:7px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;gap:2px}
html[data-theme="light"] .langmenu{background:#fff}
.lgitem{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-size:14px;
  color:var(--ink2);font-weight:500;white-space:nowrap;transition:background .15s,color .15s}
.lgitem:hover{background:rgba(255,255,255,.07);color:var(--ink)}
html[data-theme="light"] .lgitem:hover{background:#f1f5fc}
.lgitem.on{color:var(--ink);font-weight:700}
.lgitem.on::after{content:"✓";margin-left:auto;color:var(--green)}
.lgflag{font-size:17px;line-height:1}

/* pulsante che cambia tema */
.themebtn{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--line2);color:var(--ink);transition:background .2s,transform .2s}
.themebtn:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
html[data-theme="light"] .themebtn{background:#fff;box-shadow:0 2px 10px rgba(31,55,102,.07)}
html[data-theme="light"] .themebtn:hover{background:#f4f7fd}
.themebtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.themebtn .i-sun{display:none}
html[data-theme="light"] .themebtn .i-sun{display:block}
html[data-theme="light"] .themebtn .i-moon{display:none}

*{box-sizing:border-box}
/* il fondo va messo anche su <html>: così non restano bande nere ai bordi su iPad/iPhone */
html{scroll-behavior:smooth;background:var(--bg0);overflow-x:hidden;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
/* i titoli non finiscono più sotto la barra fissa quando si clicca su un collegamento */
section[id]{scroll-margin-top:92px}
/* testo selezionato e barra di scorrimento in tinta */
::selection{background:rgba(79,141,255,.32);color:#fff}
html[data-theme="light"] ::selection{background:rgba(37,99,235,.22);color:#0d1730}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--ink3);background-clip:content-box}
/* contorno ben visibile per chi naviga da tastiera */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
body.home{
  margin:0;padding:0;width:100%;max-width:100%;min-height:100vh;
  /* NIENTE sfondo qui: lo sfondo sta su <html> e l'effetto aurora (.bgfx) sta dietro.
     Se il body avesse un colore pieno, coprirebbe l'aurora e la pagina sembrerebbe nera. */
  background:transparent;color:var(--ink);font-family:var(--sans);
  line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.home a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.12;letter-spacing:-.025em;font-weight:800;overflow-wrap:anywhere}
p,li,span,summary,figcaption,label{overflow-wrap:break-word}
p{margin:0}
.wrapx{max-width:var(--maxw);margin:0 auto;width:100%;
  padding-left:max(24px, env(safe-area-inset-left));padding-right:max(24px, env(safe-area-inset-right))}

/* ---------- sfondo animato (aurora + griglia + grana) ---------- */
.bgfx{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:-2;overflow:hidden;pointer-events:none;background:
  radial-gradient(1200px 700px at 50% -10%, #0e1a33 0%, transparent 60%),
  linear-gradient(180deg,#070b14 0%, #05070d 100%)}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.orb.a{width:620px;height:620px;left:-180px;top:-160px;background:radial-gradient(circle at 30% 30%,#2a6bff,#0a1e4d 70%);animation:float1 26s ease-in-out infinite}
.orb.b{width:560px;height:560px;right:-160px;top:60px;background:radial-gradient(circle at 60% 40%,#17c1b4,#062e33 70%);animation:float2 32s ease-in-out infinite}
.orb.c{width:520px;height:520px;left:38%;top:52%;background:radial-gradient(circle at 50% 50%,#6d5bff,#1a1240 70%);animation:float3 38s ease-in-out infinite;opacity:.36}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(90px,70px) scale(1.12)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-80px,110px) scale(1.08)}}
@keyframes float3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-90px) scale(1.15)}}
/* grana finissima: toglie l'effetto "piatto" alle sfumature, come nelle riviste stampate */
.bgfx::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-theme="light"] .bgfx::after{opacity:.045;mix-blend-mode:multiply}
/* passaggio morbido tra tema chiaro e scuro (non al primo caricamento) */
html.ready body.home,html.ready .nav,html.ready .feat,html.ready .kpi,html.ready .cbox,
html.ready .authcard,html.ready .legalcard,html.ready .faq details,html.ready .snum,
html.ready .themebtn,html.ready .langmenu,html.ready .cookiebar,html.ready .totop{
  transition:background-color .45s ease,border-color .45s ease,color .45s ease,box-shadow .45s ease}
/* illustrazioni vive: il sole pulsa piano, le finestre si accendono appena */
.vscene circle[fill="#fff3c4"],.vscene circle[fill="#ffe9a8"]{animation:sunglow 6s ease-in-out infinite;transform-origin:center}
@keyframes sunglow{0%,100%{opacity:.85}50%{opacity:1}}
.vscene rect[fill="#8fd0e8"],.vscene rect[fill="#a9cdec"],.vscene rect[fill="#6fa3cf"]{
  animation:winlight 7s ease-in-out infinite}
@keyframes winlight{0%,100%{opacity:1}45%{opacity:.72}}
@media(prefers-reduced-motion:reduce){.vscene circle,.vscene rect{animation:none}}
.grid{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:-1;pointer-events:none;opacity:.4;
  background-image:linear-gradient(rgba(120,160,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 22%, #000 0%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 22%, #000 0%, transparent 72%)}

/* ---------- barra di navigazione ---------- */
/* barra a tutta larghezza (da bordo a bordo), con il contenuto centrato all'interno */
.nav{position:sticky;top:0;left:0;right:0;width:100%;z-index:60;
  transition:background .3s,box-shadow .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.stuck{background:rgba(7,11,20,.86);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line);box-shadow:0 10px 40px rgba(0,0,0,.5)}
.navin{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-width:0;padding:16px max(24px, env(safe-area-inset-left)) 16px max(24px, env(safe-area-inset-right))}
.brand{min-width:0}
.brand span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:17px;letter-spacing:-.02em}
.blogo{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:14px;font-weight:900;color:#fff;
  background:linear-gradient(140deg,var(--blue),var(--blue2) 60%,var(--violet));
  box-shadow:0 8px 24px rgba(79,141,255,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.navlinks{display:flex;align-items:center;gap:26px}
.navlinks a{color:var(--ink2);font-size:14.5px;font-weight:500;transition:color .2s}
.navlinks a:hover{color:var(--ink)}
.navcta{display:flex;align-items:center;gap:10px}

/* ---------- pulsanti ---------- */
.btn-p,.btn-g{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:15px;
  padding:13px 26px;border-radius:14px;transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .25s,filter .2s;white-space:nowrap}
.btn-p{color:#fff;background:linear-gradient(135deg,var(--blue) 0%,var(--blue2) 55%,#5b52e0 100%);
  box-shadow:0 12px 34px rgba(59,110,255,.42),inset 0 1px 0 rgba(255,255,255,.28);position:relative;overflow:hidden}
.btn-p::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(59,110,255,.55)}
.btn-p:hover::after{transform:translateX(120%)}
.btn-g{color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--line2);backdrop-filter:blur(8px)}
.btn-g:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.btn-sm{padding:10px 20px;font-size:14px;border-radius:12px}
.btn-xl{padding:16px 34px;font-size:16.5px;border-radius:16px}

/* ---------- animazioni di comparsa ---------- */
/* i contenuti sono SEMPRE visibili; si nascondono per la comparsa solo se il JavaScript è attivo */
.rv{transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
html.js .rv{opacity:0;transform:translateY(26px)}
html.js .rv.on{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}.rv.d6{transition-delay:.48s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.orb{animation:none}}

/* ---------- hero ---------- */
.hero{position:relative;padding:74px 0 40px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;font-size:13px;font-weight:600;
  color:#bcd6ff;background:rgba(79,141,255,.1);border:1px solid rgba(79,141,255,.28);backdrop-filter:blur(8px);margin-bottom:26px}
.dotpulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 10px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.hero h1{font-size:clamp(34px,6.4vw,68px);font-weight:900;margin-bottom:22px;letter-spacing:-.04em}
/* titolo che compare parola per parola. Senza JavaScript resta tutto visibile subito. */
.hero h1 .hw{display:inline-block;vertical-align:top;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.hero h1 .hw i{display:inline-block;font-style:normal}
html.js .hero h1 .hw i{animation:wordUp .78s cubic-bezier(.2,.85,.25,1) both}
@keyframes wordUp{from{transform:translateY(115%);opacity:0}to{transform:none;opacity:1}}
.hero h1 .hw1 i{animation-delay:.06s}  .hero h1 .hw2 i{animation-delay:.115s}
.hero h1 .hw3 i{animation-delay:.17s}  .hero h1 .hw4 i{animation-delay:.225s}
.hero h1 .hw5 i{animation-delay:.28s}  .hero h1 .hw6 i{animation-delay:.335s}
.hero h1 .hw7 i{animation-delay:.39s}  .hero h1 .hw8 i{animation-delay:.445s}
.hero h1 .hw9 i{animation-delay:.5s}   .hero h1 .hw10 i{animation-delay:.555s}
.hero h1 .hw11 i{animation-delay:.61s} .hero h1 .hw12 i{animation-delay:.665s}
@media(prefers-reduced-motion:reduce){ html.js .hero h1 .hw i{animation:none} }
.shine{background:linear-gradient(100deg,#8fb6ff 0%,#4f8dff 25%,#38e0d0 50%,#8b7bff 75%,#8fb6ff 100%);
  background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:250% center}}
.hero .sub{color:var(--ink2);font-size:clamp(16px,2.1vw,20px);max-width:640px;margin:0 auto;line-height:1.7}
.hero .sub b{color:var(--ink);font-weight:700}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.microcopy{margin-top:16px;color:var(--ink3);font-size:13.5px}

/* ---------- vetrina (mockup prodotto) ---------- */
.stage{position:relative;margin:56px auto 0;max-width:940px;padding:0 24px}
/* il contenitore esterno NON si inclina: tiene ferme le schede fluttuanti (che usano
   backdrop-filter, pesantissimo da ridisegnare dentro una rotazione 3D → scatti).
   La prospettiva sta qui perché vale solo per i figli diretti. */
.stage-in{position:relative;max-width:100%;perspective:1600px}
/* solo i due dispositivi si inclinano. Niente transition: l'attenuazione la fa il
   JavaScript fotogramma per fotogramma, così il movimento non "rincorre" il mouse */
.tilt{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:26px;
  transform-style:preserve-3d;backface-visibility:hidden}
.tilt.live{will-change:transform}
/* dentro l'inclinazione il sollevamento al passaggio del mouse darebbe due animazioni in conflitto */
.tilt .galfig{transition:none}
.tilt .galfig:hover{transform:none}
.device{position:relative;max-width:100%;border-radius:26px;padding:12px;background:linear-gradient(160deg,#1c2740,#0b111d);
  border:1px solid var(--line2);box-shadow:var(--shadow-xl);flex:none;overflow:hidden;
  transform:translateZ(0);backface-visibility:hidden}
/* riflesso di luce che segue il mouse: si muove solo con translate3d (nessun ridisegno) */
.glare{position:absolute;inset:-50%;pointer-events:none;z-index:4;opacity:0;
  background:radial-gradient(ellipse 30% 30% at 50% 50%,rgba(255,255,255,.22),rgba(255,255,255,.07) 45%,transparent 72%);
  transition:opacity .45s ease;will-change:transform,opacity}
.tilt.live .glare{opacity:1}
@media(hover:none),(pointer:coarse){ .glare{display:none} }
@media(prefers-reduced-motion:reduce){ .glare{display:none} }
.device::before{content:"";position:absolute;inset:0;border-radius:26px;padding:1px;
  background:linear-gradient(140deg,rgba(120,170,255,.55),transparent 40%,rgba(56,224,208,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.device.v{width:236px}
.device.h{width:396px;margin-bottom:12px}
.screen{border-radius:16px;overflow:hidden;background:#f2f5fa;display:flex;flex-direction:column;container-type:inline-size}
.device.v .screen{aspect-ratio:9/16}
.device.h .screen{aspect-ratio:16/9}
.dband{display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-weight:800;letter-spacing:.06em;
  white-space:nowrap;overflow:hidden;padding:0 8px;font-size:11.5px;font-size:clamp(7px, 4.4cqw, 12px)}
.device.h .dband{font-size:11px;font-size:clamp(7px, 2.9cqw, 12px)}
.device.v .dband{height:11%}
.device.h .dband{height:15%}
.bl{width:19px;height:19px;border-radius:6px;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:8.5px;font-weight:900}
.b-green{background:linear-gradient(90deg,#0a3d2e,#0d5240)}
.b-gold{background:linear-gradient(90deg,#7c5b16,#9a7320)}
.dgrid{flex:1;min-height:0;display:grid;gap:7px;padding:9px}
.device.v .dgrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr)}
.device.h .dgrid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px;padding:8px}
.cell{position:relative;border-radius:9px;overflow:hidden;background:#e2e9f3}
.cell svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.price{position:absolute;left:5px;bottom:5px;z-index:2;background:rgba(255,255,255,.94);color:#0a0e17;
  font-weight:800;padding:2px 6px;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.28);
  max-width:calc(100% - 10px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:9px;font-size:clamp(5.5px, 4.2cqw, 9.5px)}
.device.h .price{padding:2px 5px;font-size:7.5px;font-size:clamp(5px, 2cqw, 8px)}
.stamp{position:absolute;left:50%;top:46%;z-index:2;transform:translate(-50%,-50%) rotate(-22deg);
  font-weight:900;opacity:.7;white-space:nowrap;text-shadow:0 1px 2px rgba(255,255,255,.6);
  max-width:140%;overflow:hidden;font-size:13px;font-size:clamp(6.5px, 5.4cqw, 13px)}
.device.h .stamp{font-size:10px;font-size:clamp(5.5px, 2.5cqw, 10px)}
.s-red{color:#DC2626}.s-orange{color:#E67309}.s-green{color:#16A34A}.s-blue{color:#3372CC}
.dlabel{text-align:center;color:var(--ink3);font-size:12.5px;margin-top:14px;font-weight:500}
/* schede fluttuanti attorno al prodotto */
.floatcard{position:absolute;background:rgba(15,22,38,.86);border:1px solid var(--line2);border-radius:14px;
  padding:11px 15px;box-shadow:var(--shadow-lg);backdrop-filter:blur(14px);display:flex;align-items:center;gap:10px;
  font-size:13px;font-weight:600;z-index:5}
.floatcard i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none}
.floatcard svg{width:15px;height:15px;stroke-width:2;fill:none}
.fc1{left:-6px;top:14%;animation:bob 6s ease-in-out infinite}
.fc2{right:-10px;top:34%;animation:bob 7.5s ease-in-out infinite .6s}
.fc3{left:4%;bottom:9%;animation:bob 6.8s ease-in-out infinite 1.2s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.i-blue{background:rgba(79,141,255,.16);color:#8fb6ff;stroke:#8fb6ff}
.i-green{background:rgba(52,211,153,.16);color:#6ee7b7;stroke:#6ee7b7}
.i-gold{background:rgba(240,180,41,.16);color:#f5c95f;stroke:#f5c95f}

/* ---------- numeri / statistiche ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:940px;margin:76px auto 0;padding:0 24px}
.kpi{text-align:center;padding:22px 14px;border-radius:var(--r-md);background:rgba(13,19,32,.6);
  border:1px solid var(--line);backdrop-filter:blur(10px)}
.kpi b{display:block;font-size:clamp(26px,3.6vw,38px);font-weight:900;letter-spacing:-.03em;
  background:linear-gradient(135deg,#fff,#8fb6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi span{display:block;color:var(--ink3);font-size:13px;margin-top:6px;font-weight:500}

/* ---------- sezioni ---------- */
.sec{padding:92px 0}
.sec-head{text-align:center;max-width:660px;margin:0 auto 52px}
.tag{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#7fd8ce;margin-bottom:14px}
.sec-head h2{font-size:clamp(27px,4.2vw,44px);font-weight:900;letter-spacing:-.03em}
.sec-head p{color:var(--ink2);font-size:16.5px;margin-top:16px}

/* ---------- schede funzioni ---------- */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{position:relative;padding:30px 26px;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(170deg,rgba(20,29,48,.9),rgba(11,16,27,.9));border:1px solid var(--line);
  transition:transform .35s cubic-bezier(.2,.8,.3,1),border-color .35s,box-shadow .35s}
.feat::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px 220px at var(--mx,50%) var(--my,0%),rgba(79,141,255,.16),transparent 70%)}
.feat:hover{transform:translateY(-7px);border-color:var(--line2);box-shadow:var(--shadow-lg)}
.feat:hover::before{opacity:1}
.ficon{position:relative;width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:20px;
  background:linear-gradient(140deg,rgba(79,141,255,.2),rgba(56,224,208,.12));border:1px solid rgba(120,170,255,.28)}
.ficon svg{width:26px;height:26px;stroke:#9dc2ff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feat h3{font-size:19px;margin-bottom:10px;position:relative}
.feat p{color:var(--ink2);font-size:15px;position:relative}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;position:relative}
.chips span{font-size:11.5px;font-weight:600;color:#9dc2ff;background:rgba(79,141,255,.1);
  border:1px solid rgba(79,141,255,.22);padding:4px 11px;border-radius:999px}

/* ---------- come funziona (timeline) ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1000px;margin:0 auto}
.steps::before{content:"";position:absolute;left:9%;right:9%;top:31px;height:2px;
  background:linear-gradient(90deg,transparent,var(--blue),var(--cyan),transparent);opacity:.45}
.step{text-align:center;position:relative}
.snum{width:62px;height:62px;margin:0 auto 20px;border-radius:20px;display:grid;place-items:center;
  font-size:21px;font-weight:900;color:#fff;position:relative;z-index:2;
  background:linear-gradient(140deg,#16223a,#0d1524);border:1px solid var(--line2);
  box-shadow:0 12px 30px rgba(0,0,0,.5)}
.snum::after{content:"";position:absolute;inset:-1px;border-radius:20px;padding:1px;
  background:linear-gradient(140deg,var(--blue),var(--cyan));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.step h3{font-size:18px;margin-bottom:9px}
.step p{color:var(--ink2);font-size:14.5px}

/* ---------- la vetrina vista dalla strada ----------
   Tutta disegnata con sfumature CSS: nessuna fotografia, quindi nessuna licenza
   da pagare e nessun file da scaricare. Le misure interne sono in "cqw" (percentuale
   della larghezza della scena), così l'illustrazione resta identica a ogni dimensione. */
.shopwrap{max-width:920px;margin:0 auto}
.shop{position:relative;aspect-ratio:16/10;border-radius:22px;overflow:hidden;
  border:1px solid var(--line2);box-shadow:var(--shadow-xl);container-type:inline-size;
  background:linear-gradient(180deg,#2a3142 0%,#1d2331 44%,#161b26 100%)}
/* fughe orizzontali della facciata */
.shop::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 7.2%,rgba(255,255,255,.028) 7.2% 7.5%)}
.shopsky{position:absolute;left:0;right:0;top:0;height:5%;background:linear-gradient(180deg,rgba(4,7,13,.75),transparent)}

/* insegna dell'agenzia */
.shopsign{position:absolute;left:6%;top:5.5%;width:52%;height:12%;border-radius:.7cqw;z-index:2;
  display:flex;align-items:center;gap:1.6cqw;padding:0 2.2cqw;color:#fff;font-weight:800;letter-spacing:.07em;
  white-space:nowrap;overflow:hidden;font-size:clamp(9px,2.3cqw,20px);
  background:linear-gradient(90deg,#0a3d2e,#0d5240);box-shadow:0 .7cqw 1.8cqw rgba(0,0,0,.5)}
.shopsign .bl{width:3cqw;height:3cqw;min-width:15px;min-height:15px;border-radius:.7cqw;
  font-size:clamp(6px,1.3cqw,11px);flex:none}

/* la vetrata: cornice in alluminio + vetro */
.shopwin{position:absolute;left:6%;right:26%;top:21%;bottom:15%;padding:.9cqw;border-radius:.5cqw;
  background:linear-gradient(150deg,#aab3c2,#5c6576 46%,#8c94a3);
  box-shadow:0 1.6cqw 3.4cqw rgba(0,0,0,.55)}
.shopglass{position:relative;height:100%;border-radius:.25cqw;overflow:hidden;
  background:linear-gradient(180deg,#070c15,#04070d)}

/* interno dell'agenzia */
.shopin{position:absolute;inset:0;
  background:linear-gradient(180deg,#121a2a 0%,#0d1421 61.9%,#0a0f19 62%,#080c14 100%)}
.shoplight{position:absolute;left:50%;top:-8%;width:74%;height:48%;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%,rgba(255,214,150,.17),transparent 70%)}
.shopdesk{position:absolute;left:5%;right:5%;bottom:0;height:15%;
  background:linear-gradient(180deg,rgba(31,40,57,.92),rgba(11,16,25,.96));
  border-top:1px solid rgba(255,255,255,.07)}

/* il monitor appeso, con dentro la vetrina che gira da sola */
.tvarm{position:absolute;left:50%;top:0;width:.7cqw;min-width:2px;height:13%;transform:translateX(-50%);
  background:linear-gradient(180deg,#3a4350,#222932)}
.tv{position:absolute;left:50%;top:11.5%;transform:translateX(-50%);height:78%;aspect-ratio:9/16;
  padding:.65cqw;border-radius:1cqw;background:linear-gradient(160deg,#2b3241,#12161f);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 2cqw 4cqw rgba(0,0,0,.65), 0 0 7cqw rgba(120,170,255,.18)}
.tvscreen{position:relative;height:100%;border-radius:.45cqw;overflow:hidden;background:#000}
.tvscreen .vmock{width:100%;height:100%;max-width:none;border:none;border-radius:0;box-shadow:none}
.tvscreen .vchip{display:none}      /* dentro la scena l'etichetta "video" non serve */
.tvled{position:absolute;left:50%;bottom:.15cqw;width:.45cqw;height:.45cqw;min-width:2px;min-height:2px;
  border-radius:50%;background:#4ade80;transform:translateX(-50%);box-shadow:0 0 .9cqw #4ade80}

/* riflessi sul vetro */
.refl{position:absolute;top:-20%;height:140%;pointer-events:none;mix-blend-mode:screen;
  transform:skewX(-16deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
.r1{left:5%;width:15%;animation:reflDrift 24s ease-in-out infinite}
.r2{left:33%;width:7%;opacity:.65;animation:reflDrift 30s ease-in-out infinite 2s}
@keyframes reflDrift{0%,100%{transform:skewX(-16deg) translateX(0)}50%{transform:skewX(-16deg) translateX(3.4cqw)}}
.glassrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.10) 0 8.5%,transparent 9.2% 25%,
    rgba(255,255,255,.055) 25.8% 32%,transparent 32.8%);
  box-shadow:inset 0 0 3cqw rgba(255,255,255,.06)}

/* la sagoma di chi si ferma a guardare */
.passer{position:absolute;left:5%;bottom:0;width:17%;height:54%;pointer-events:none;
  filter:blur(.55cqw);opacity:.55;animation:sway 14s ease-in-out infinite}
.passer::before{content:"";position:absolute;left:50%;bottom:0;width:100%;height:73%;transform:translateX(-50%);
  border-radius:44% 44% 10% 10%/40% 40% 6% 6%;background:#04070d}
.passer::after{content:"";position:absolute;left:50%;bottom:65%;width:46%;padding-top:46%;transform:translateX(-50%);
  border-radius:50%;background:#04070d}
@keyframes sway{0%,100%{transform:translateX(0)}50%{transform:translateX(1.2cqw)}}

/* la porta d'ingresso accanto alla vetrata */
.shopdoor{position:absolute;right:6%;width:15%;top:21%;bottom:15%;padding:.7cqw;border-radius:.4cqw;
  background:linear-gradient(150deg,#9aa3b2,#535b6b);box-shadow:0 1.4cqw 3cqw rgba(0,0,0,.5)}
.shopdoor::before{content:"";position:absolute;inset:.7cqw;border-radius:.25cqw;
  background:linear-gradient(180deg,#0d1522,#070b12)}
.shopdoor::after{content:"";position:absolute;left:13%;top:47%;width:7%;height:11%;border-radius:.3cqw;background:#c7ced9}
.shopopen{position:absolute;left:50%;top:16%;transform:translateX(-50%);z-index:2;font-style:normal;
  font-weight:800;letter-spacing:.13em;white-space:nowrap;font-size:clamp(6px,1.15cqw,11px);
  color:#ffd9a0;border:1px solid rgba(255,217,160,.45);border-radius:.35cqw;padding:.4cqw .8cqw;
  background:rgba(22,15,6,.72);box-shadow:0 0 1.6cqw rgba(255,190,90,.38)}

/* marciapiede e luce che esce dalla vetrina */
.shoppave{position:absolute;left:0;right:0;bottom:0;height:15%;
  background:linear-gradient(180deg,#2b3140,#20252f);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.shoppave::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 10.6%,rgba(255,255,255,.05) 10.6% 11%)}
.shoppave::after{content:"";position:absolute;left:6%;right:26%;top:0;height:72%;
  background:linear-gradient(180deg,rgba(150,190,255,.18),transparent);filter:blur(1cqw)}

.shopcap{text-align:center;color:var(--ink3);font-size:12.5px;margin-top:14px}
.shopnotes{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.shopnotes span{font-size:13px;font-weight:600;color:#9dc2ff;background:rgba(79,141,255,.1);
  border:1px solid rgba(79,141,255,.22);padding:7px 14px;border-radius:999px}

/* tema chiaro: la facciata si schiarisce, l'interno resta buio (com'è nella realtà) */
html[data-theme="light"] .shop{background:linear-gradient(180deg,#e8edf5 0%,#dae1ed 44%,#c9d2e2 100%)}
html[data-theme="light"] .shop::before{background:repeating-linear-gradient(180deg,transparent 0 7.2%,rgba(10,20,40,.05) 7.2% 7.5%)}
html[data-theme="light"] .shopsky{background:linear-gradient(180deg,rgba(160,175,200,.5),transparent)}
html[data-theme="light"] .shopwin,html[data-theme="light"] .shopdoor{background:linear-gradient(150deg,#dde3ec,#949db0 46%,#c6cdd9)}
html[data-theme="light"] .shoppave{background:linear-gradient(180deg,#c4cddb,#b0bacb)}
html[data-theme="light"] .shopnotes span{color:#1e4bb8;background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.2)}

@media(max-width:640px){ .shop{aspect-ratio:4/3} .shopnotes span{font-size:12px;padding:6px 11px} }
@media(max-width:420px){ .shop{aspect-ratio:5/4} }
@media(prefers-reduced-motion:reduce){ .refl,.passer{animation:none} }

/* ---------- galleria esempi ---------- */
/* allineate in alto: una didascalia più lunga va a capo sotto senza spostare
   la vetrina, così i bordi superiori restano sulla stessa riga */
.gal{display:flex;gap:34px;justify-content:center;align-items:flex-start;flex-wrap:wrap;width:100%}
/* flex:0 0 auto = non si restringono mai (vanno a capo invece di venire schiacciate e tagliate) */
.galfig{margin:0;text-align:center;flex:0 0 auto;max-width:100%;min-width:0;
  transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.galfig:hover{transform:translateY(-10px) scale(1.02)}
/* Nella galleria la larghezza la decide la vetrina, MAI la didascalia: altrimenti
   una descrizione più lunga allarga il riquadro e la vetrina resta spostata da un
   lato (succede facilmente cambiando lingua). Il testo va a capo, le vetrine restano
   allineate e le distanze fra loro identiche. */
.gal .galfig{width:212px}
.gal .galfig.wide{width:380px}
.gal .galfig .vmock,.gal .galfig .vmockH{width:100%}
/* manda la vetrina orizzontale sempre a capo: la disposizione non cambia
   a seconda di quanto è larga la finestra */
.galbreak{flex:0 0 100%;height:0;margin:0}
/* vetrine d'esempio (verticale e orizzontale) */
.vmock{width:212px;aspect-ratio:9/16}
.vmockH{width:380px;aspect-ratio:16/9}
.vmock,.vmockH{max-width:100%;border-radius:18px;overflow:hidden;border:1px solid var(--line2);box-shadow:var(--shadow-xl);
  display:flex;flex-direction:column;background:#eef1f6;
  container-type:inline-size}   /* i testi interni si misurano sulla larghezza del riquadro */
/* nome dell'agenzia: mai a capo, si adatta alla larghezza (utile per nomi lunghi in DE/ES) */
.vband{display:flex;align-items:center;gap:7px;justify-content:center;color:#fff;font-weight:800;
  letter-spacing:.05em;white-space:nowrap;overflow:hidden;padding:0 8px;
  font-size:12px;font-size:clamp(7px, 5.6cqw, 13px)}
.vmockH .vband{font-size:11px;font-size:clamp(7px, 3.1cqw, 12px)}
.vmock .vband{height:11%}.vmockH .vband{height:15%}
.vband.band-green{background:linear-gradient(90deg,#0a3d2e,#0d5240)}
.vband.band-blue{background:linear-gradient(90deg,#0c3a63,#12508a)}
.vband.band-dark{background:linear-gradient(90deg,#161b26,#222a3a)}
.vband.band-gold{background:linear-gradient(90deg,#7c5b16,#9a7320)}
.vband.band-teal{background:linear-gradient(90deg,#0d4f4a,#116a63)}
.vlogo{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;
  background:rgba(255,255,255,.22);font-size:8.5px;font-weight:900}
/* minmax(0,1fr): le celle possono restringersi davvero, così la griglia non sborda mai */
.vgrid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);gap:7px;padding:9px}
.vgrid.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vgrid.cols3{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:7px}
.vgridH{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);gap:6px;padding:8px}
.vgridH.rows2{grid-template-rows:repeat(2,minmax(0,1fr))}
.vgridH.rows3{grid-template-rows:repeat(3,minmax(0,1fr));gap:5px;padding:7px}
.vtile{position:relative;border-radius:9px;overflow:hidden;background:#e6edf5}
.vscene{position:absolute;inset:0;width:100%;height:100%;display:block}
.vprice{position:absolute;left:6px;bottom:6px;z-index:2;background:rgba(255,255,255,.94);color:#0b0f17;
  font-weight:800;padding:2px 7px;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.25);
  max-width:calc(100% - 12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:9.5px;font-size:clamp(6px, 4.4cqw, 10px)}
.vmockH .vprice{left:4px;bottom:4px;padding:2px 5px;font-size:8px;font-size:clamp(5.5px, 2.1cqw, 8.5px)}
/* badge: resta dentro alla cella anche con parole lunghe (VERMIETET, RESERVIERT…) */
.vbadge{position:absolute;left:50%;top:47%;z-index:2;transform:translate(-50%,-50%) rotate(-23deg);
  font-weight:900;opacity:.68;white-space:nowrap;text-shadow:0 1px 2px rgba(255,255,255,.55);
  max-width:135%;overflow:hidden;font-size:13px;font-size:clamp(7px, 5.6cqw, 14px)}
.vmockH .vbadge{font-size:10.5px;font-size:clamp(6px, 2.6cqw, 11px)}
.vbadge.st-venduto{color:#DC2626}.vbadge.st-affittato{color:#E67309}.vbadge.st-nuovo{color:#16A34A}
.vbadge.st-riservato{color:#3372CC}.vbadge.st-ribassato{color:#EA580C}

/* =====================================================================
   PAGINE DI ACCESSO (login, 2FA, cambio password) e pagine informative
   ===================================================================== */
.authtop{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--maxw);margin:0 auto;padding:18px max(20px,env(safe-area-inset-left))}
.authwrap{min-height:calc(100vh - 78px);display:flex;align-items:center;justify-content:center;
  padding:20px max(20px,env(safe-area-inset-left)) 60px}
.authcard{width:100%;max-width:440px;position:relative;border-radius:24px;padding:34px 32px;
  background:linear-gradient(170deg,rgba(20,29,48,.92),rgba(11,16,27,.94));
  border:1px solid var(--line);box-shadow:var(--shadow-xl)}
.authcard::before{content:"";position:absolute;inset:0;border-radius:24px;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(120,170,255,.5),transparent 45%,rgba(56,224,208,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.authcard.wide{max-width:660px}
.authcard h1{font-size:24px;margin-bottom:8px;letter-spacing:-.02em}
.authcard>p{color:var(--ink2);font-size:14.5px}
html[data-theme="light"] .authcard{background:#fff;box-shadow:0 24px 60px rgba(31,55,102,.14)}
html[data-theme="light"] .authcard::before{background:linear-gradient(140deg,rgba(37,99,235,.35),transparent 45%,rgba(13,148,136,.28))}
/* campi e pulsanti */
.fld{display:block;margin:17px 0}
.fld span{display:block;font-size:13px;color:var(--ink2);margin-bottom:8px;font-weight:500}
.fld input{width:100%;padding:14px;border-radius:13px;border:1px solid var(--line2);
  background:rgba(0,0,0,.25);color:var(--ink);font-size:15.5px;transition:border-color .18s,box-shadow .18s,background .18s}
.fld input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(79,141,255,.2);background:rgba(0,0,0,.35)}
html[data-theme="light"] .fld input{background:#f7f9fd}
html[data-theme="light"] .fld input:focus{background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.13)}
.btn{display:inline-block;width:100%;margin-top:14px;padding:14px 18px;border:0;border-radius:13px;
  background:linear-gradient(135deg,var(--blue),var(--blue2) 60%,#5b52e0);color:#fff;font-size:15.5px;font-weight:700;
  cursor:pointer;text-align:center;text-decoration:none;box-shadow:0 12px 30px rgba(59,110,255,.4);
  transition:transform .16s,filter .18s}
.btn:hover{filter:brightness(1.06);transform:translateY(-2px)}
.btn.ghost{background:rgba(255,255,255,.05);border:1px solid var(--line2);color:var(--ink);box-shadow:none}
html[data-theme="light"] .btn.ghost{background:#fff;box-shadow:0 2px 10px rgba(31,55,102,.07)}
.linkbtn{background:none;border:0;color:var(--ink3);cursor:pointer;font-size:13.5px;text-decoration:underline;padding:0;font-family:inherit}
.linkbtn:hover{color:var(--ink2)}
.err{color:#ffc7c7;background:rgba(242,84,91,.13);border:1px solid rgba(242,84,91,.35);
  padding:12px 14px;border-radius:12px;font-size:14px;margin:14px 0}
html[data-theme="light"] .err{color:#a32029;background:#fdeef0;border-color:#f6c9ce}
.badge{display:inline-block;margin:8px 0;background:rgba(52,211,153,.13);color:#6ee7b7;
  border:1px solid rgba(52,211,153,.34);padding:8px 15px;border-radius:999px;font-size:13.5px}
html[data-theme="light"] .badge{color:#05745a;background:#e8f9f2;border-color:#a9e5d0}
.muted{color:var(--ink2)}.small{font-size:13px}.inline{display:inline}.mt{margin-top:16px}
.authcard a{color:var(--blue);text-decoration:underline}
html[data-theme="light"] .authcard a{color:var(--blue2)}
code{background:rgba(0,0,0,.3);border:1px solid var(--line2);padding:4px 8px;border-radius:8px;
  font-size:13px;word-break:break-all;font-family:ui-monospace,Menlo,monospace}
html[data-theme="light"] code{background:#f2f6fc}
.qr{display:block;margin:18px auto;border-radius:16px;background:#fff;padding:12px;box-shadow:var(--shadow-lg)}
.codes{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.codes li{background:rgba(0,0,0,.28);border:1px solid var(--line2);border-radius:11px;padding:10px;text-align:center;
  font-family:ui-monospace,Menlo,monospace;font-size:14px}
html[data-theme="light"] .codes li{background:#f4f7fd}
/* pagine informative (privacy, cookie) */
.legalwrap{max-width:820px;margin:0 auto;padding:20px max(20px,env(safe-area-inset-left)) 70px}
.legalcard{border-radius:22px;padding:34px 32px;border:1px solid var(--line);
  background:linear-gradient(170deg,rgba(20,29,48,.9),rgba(11,16,27,.93));box-shadow:var(--shadow-xl)}
html[data-theme="light"] .legalcard{background:#fff;box-shadow:0 20px 50px rgba(31,55,102,.12)}
.legalcard h1{font-size:26px;margin-bottom:6px}
.legalcard h2{font-size:17px;margin:24px 0 8px}
.legalcard p,.legalcard li{color:var(--ink2);font-size:14.5px;line-height:1.7}
.legalcard ul{margin:8px 0;padding-left:20px}
.legalcard li{margin:6px 0}
.legalcard b{color:var(--ink)}
.legalcard a{color:var(--blue);text-decoration:underline}
.legalhead{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:6px}
@media(max-width:520px){.authcard,.legalcard{padding:26px 20px;border-radius:20px}.codes{grid-template-columns:1fr}}

/* ---------- esempio ANIMATO: com'è il video esportato ---------- */
/* tre pagine impilate che si alternano con dissolvenza, come nel video vero */
.vvideo{position:relative}
.vstack{position:relative;flex:1;min-height:0}
.vpage{position:absolute;inset:0;display:flex;opacity:0;animation:vcycle 10.5s infinite}
.vpage .vgrid{flex:1;min-height:0}
.vpage.p1{animation-delay:0s}
.vpage.p2{animation-delay:-7s}
.vpage.p3{animation-delay:-3.5s}
@keyframes vcycle{
  0%{opacity:1} 28%{opacity:1}        /* pagina ferma ~3 s */
  33.3%{opacity:0} 94%{opacity:0}     /* dissolvenza e attesa */
  100%{opacity:1}
}
/* etichetta: pallino che pulsa (non un tasto "play": l'animazione parte da sola) */
.vchip{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);z-index:6;display:inline-flex;
  align-items:center;gap:7px;padding:4px 12px;border-radius:999px;white-space:nowrap;pointer-events:none;
  background:rgba(8,12,22,.82);color:#dbe7ff;font-size:8.5px;font-weight:800;letter-spacing:.08em;
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px)}
.vplay{width:6px;height:6px;border-radius:50%;background:#34d399;
  box-shadow:0 0 0 0 rgba(52,211,153,.7);animation:vlive 2s ease-out infinite}
@keyframes vlive{
  0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}
  70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}
  100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}
}
@media(prefers-reduced-motion:reduce){
  .vpage{animation:none} .vpage.p1{opacity:1} .vpage.p2,.vpage.p3{opacity:0} .vplay{animation:none}
}

/* ================= DIMOSTRAZIONE AUTOMATICA (4 passaggi) ================= */
.demo{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px;align-items:center;
  max-width:920px;margin:0 auto}
.dscreen{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#eef1f6;
  border:1px solid var(--line2);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;
  container-type:inline-size;justify-self:center;width:100%;max-width:300px}
.dtop{height:10%;display:flex;align-items:center;justify-content:center;gap:7px;color:#fff;font-weight:800;
  letter-spacing:.05em;background:linear-gradient(90deg,#0a3d2e,#0d5240);white-space:nowrap;overflow:hidden;
  padding:0 8px;font-size:clamp(7px,4.4cqw,12px)}
.dcells{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;padding:10px}
.dcell{position:relative;border-radius:10px;overflow:hidden;background:#e6edf5;
  opacity:0;transform:translateY(16px) scale(.94);transition:opacity .5s ease,transform .55s cubic-bezier(.2,.8,.3,1)}
.dcell svg{position:absolute;inset:0;width:100%;height:100%}
.dprice{position:absolute;left:6px;bottom:6px;background:rgba(255,255,255,.94);color:#0b0f17;font-weight:800;
  padding:2px 7px;border-radius:6px;font-size:clamp(6px,4cqw,10px);white-space:nowrap}
/* passaggio 1: gli annunci arrivano uno alla volta */
.demo[data-step="1"] .dcell,.demo[data-step="2"] .dcell,
.demo[data-step="3"] .dcell,.demo[data-step="4"] .dcell{opacity:1;transform:none}
.demo[data-step="1"] .c1{transition-delay:.05s}.demo[data-step="1"] .c2{transition-delay:.35s}
.demo[data-step="1"] .c3{transition-delay:.65s}.demo[data-step="1"] .c4{transition-delay:.95s}
/* passaggio 2: linee rosse di allineamento */
.dguide{position:absolute;background:#ff3b30;opacity:0;transition:opacity .35s;box-shadow:0 0 9px rgba(255,59,48,.8);z-index:4}
.dguide.gv{top:8%;bottom:2%;left:50%;width:2px;transform:translateX(-1px)}
.dguide.gh{left:3%;right:3%;top:54%;height:2px}
.demo[data-step="2"] .dguide{opacity:.95;animation:gpulse 1.1s ease-in-out infinite}
@keyframes gpulse{0%,100%{opacity:.95}50%{opacity:.45}}
/* passaggio 3: compare il badge */
.dstamp{position:absolute;left:26%;top:31%;z-index:5;transform:translate(-50%,-50%) rotate(-23deg) scale(.5);
  font-weight:900;color:#DC2626;opacity:0;white-space:nowrap;font-size:clamp(9px,6cqw,17px);
  text-shadow:0 1px 3px rgba(255,255,255,.7);transition:opacity .4s,transform .5s cubic-bezier(.2,1.4,.4,1)}
.demo[data-step="3"] .dstamp,.demo[data-step="4"] .dstamp{opacity:.72;transform:translate(-50%,-50%) rotate(-23deg) scale(1)}
/* passaggio 4: escono i file */
.dout{position:absolute;inset:auto 0 12px 0;display:flex;gap:7px;justify-content:center;z-index:6;pointer-events:none}
.dout span{background:rgba(8,12,22,.86);color:#dbe7ff;border:1px solid rgba(255,255,255,.18);
  padding:5px 12px;border-radius:999px;font-size:clamp(7px,3.4cqw,11px);font-weight:800;letter-spacing:.05em;
  opacity:0;transform:translateY(14px) scale(.9);transition:opacity .45s,transform .5s cubic-bezier(.2,1.5,.4,1)}
.demo[data-step="4"] .dout span{opacity:1;transform:none}
.demo[data-step="4"] .dout span:nth-child(2){transition-delay:.12s}
.demo[data-step="4"] .dout span:nth-child(3){transition-delay:.24s}
.demo[data-step="4"] .dscreen{box-shadow:var(--shadow-xl),0 0 0 3px rgba(52,211,153,.35)}
/* elenco dei passaggi */
.dsteps{display:flex;flex-direction:column;gap:10px}
.dstep{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;border-radius:15px;cursor:pointer;
  background:transparent;border:1px solid transparent;color:var(--ink3);font-size:15.5px;font-weight:600;
  font-family:inherit;transition:background .3s,border-color .3s,color .3s,transform .3s}
.dstep .dnum{width:30px;height:30px;flex:none;border-radius:10px;display:grid;place-items:center;font-style:normal;
  font-size:13px;font-weight:900;background:rgba(255,255,255,.06);border:1px solid var(--line2);transition:all .3s}
.dstep:hover{color:var(--ink2)}
.demo[data-step="1"] .s1,.demo[data-step="2"] .s2,.demo[data-step="3"] .s3,.demo[data-step="4"] .s4{
  background:linear-gradient(90deg,rgba(79,141,255,.13),transparent);border-color:var(--line2);
  color:var(--ink);transform:translateX(5px)}
.demo[data-step="1"] .s1 .dnum,.demo[data-step="2"] .s2 .dnum,
.demo[data-step="3"] .s3 .dnum,.demo[data-step="4"] .s4 .dnum{
  background:linear-gradient(135deg,var(--blue),var(--blue2));border-color:transparent;color:#fff;
  box-shadow:0 6px 16px rgba(59,110,255,.45)}
html[data-theme="light"] .dstep .dnum{background:#eef2fa}
.dauto{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:6px 13px;border-radius:999px;
  align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--ink3);
  background:rgba(255,255,255,.04);border:1px solid var(--line2)}
@media(max-width:820px){
  .demo{grid-template-columns:1fr;gap:26px}
  .dscreen{max-width:min(100%,260px)}
  .dsteps{gap:7px}
  .dstep{padding:11px 13px;font-size:14px;gap:11px}
}

/* ================= CONFRONTO TRASCINABILE (prima / dopo) ================= */
.ba{--pos:50%;position:relative;max-width:820px;margin:0 auto;aspect-ratio:16/9;border-radius:22px;overflow:hidden;
  border:1px solid var(--line2);box-shadow:var(--shadow-xl);background:#10151f;touch-action:pan-y;
  container-type:inline-size}
.balayer{position:absolute;inset:0}
.bbefore{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.bawin{position:absolute;inset:0;display:flex;flex-direction:column}
/* lato "dopo": vetrina digitale luminosa */
.digital{background:linear-gradient(160deg,#101725,#0a0f18)}
.bahead{height:15%;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-weight:800;
  letter-spacing:.06em;background:linear-gradient(90deg,#0a3d2e,#0d5240);font-size:clamp(8px,2.4cqw,14px);
  white-space:nowrap;overflow:hidden;padding:0 10px}
.bagrid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;padding:10px}
.bacell{position:relative;border-radius:9px;overflow:hidden;background:#e6edf5;
  box-shadow:0 0 18px rgba(120,180,255,.14)}
.bacell svg{position:absolute;inset:0;width:100%;height:100%}
/* lato "prima": fogli stampati ingialliti e storti */
.paper{background:linear-gradient(160deg,#3b3125,#241d15);padding:4%;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:3%}
.basheet{background:linear-gradient(160deg,#f4ecd2,#ddcfa8);border-radius:2px;padding:7% 8%;
  box-shadow:0 2px 8px rgba(0,0,0,.45);display:flex;flex-direction:column;justify-content:center;gap:9%}
.basheet i{display:block;height:8%;min-height:2px;background:#a89a78;border-radius:1px;opacity:.75}
.basheet i:nth-child(2){width:78%}.basheet i:nth-child(3){width:56%}
.basheet::before{content:"";display:block;height:44%;background:#c9bb98;border-radius:2px;margin-bottom:8%}
.p1{transform:rotate(-1.6deg)}.p2{transform:rotate(.9deg)}.p3{transform:rotate(-.6deg) translateY(2%)}
.p4{transform:rotate(1.4deg)}.p5{transform:rotate(-1.1deg)}.p6{transform:rotate(.5deg) translateY(-2%)}
.p3{opacity:.85}.p5{opacity:.9}
.bareflect{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,transparent 38%,transparent 62%,rgba(255,255,255,.09) 100%)}
/* etichette e maniglia */
.balabel{position:absolute;top:12px;z-index:5;padding:5px 13px;border-radius:999px;font-size:clamp(8px,1.9cqw,12px);
  font-weight:800;letter-spacing:.05em;background:rgba(8,12,22,.8);color:#dbe7ff;border:1px solid rgba(255,255,255,.18);
  white-space:nowrap}
.balabel.l{left:12px}.balabel.r{right:12px}
.bahandle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;z-index:6;pointer-events:none;
  background:linear-gradient(180deg,transparent,#fff 12%,#fff 88%,transparent);transform:translateX(-1.5px);
  box-shadow:0 0 16px rgba(255,255,255,.55)}
.bagrip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.96);box-shadow:0 6px 22px rgba(0,0,0,.5)}
.bagrip::before,.bagrip::after{content:"";position:absolute;top:50%;width:0;height:0;
  border-style:solid;border-width:6px 7px 6px 0;border-color:transparent #16233a transparent transparent}
.bagrip::before{left:9px;transform:translateY(-50%)}
.bagrip::after{right:9px;transform:translateY(-50%) rotate(180deg)}
.badrag{position:absolute;top:calc(50% + 34px);left:50%;transform:translateX(-50%);font-size:10px;font-weight:800;
  letter-spacing:.08em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.8);white-space:nowrap}
.barange{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:7;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent}
.barange::-webkit-slider-thumb{-webkit-appearance:none;width:52px;height:100%;cursor:ew-resize}
.barange::-moz-range-thumb{width:52px;height:100%;border:0;background:transparent;cursor:ew-resize}
.mt2{margin-top:70px}
@media(max-width:600px){.bagrip{width:38px;height:38px}.badrag{display:none}.ba{aspect-ratio:4/3}}

/* ---------- barra di avanzamento della lettura (in cima) ---------- */
/* la barra si allunga con una scala (nessun ricalcolo del layout a ogni scorrimento) */
.progress{position:fixed;top:0;left:0;height:3px;z-index:90;width:100%;pointer-events:none;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--violet));
  box-shadow:0 0 12px rgba(79,141,255,.6);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;transition:transform .12s linear}

/* ---------- pulsante "torna su" ---------- */
.totop{position:fixed;right:18px;bottom:18px;z-index:70;width:46px;height:46px;border-radius:14px;cursor:pointer;
  display:grid;place-items:center;border:1px solid var(--line2);color:var(--ink);
  background:var(--panel2);box-shadow:var(--shadow-lg);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .3s,visibility .3s,background .2s}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-3px)}
.totop svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html[data-theme="light"] .totop{background:#fff}
@media(max-width:600px){.totop{right:14px;bottom:14px;width:42px;height:42px}}

/* ---------- menu per i telefoni (compare sotto i 760px) ---------- */
.menubox{position:relative;display:none}
.menubox summary{list-style:none;cursor:pointer}
.menubox summary::-webkit-details-marker{display:none}
.menumenu{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;max-width:calc(100vw - 28px);z-index:85;padding:8px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:16px;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;gap:3px}
html[data-theme="light"] .menumenu{background:#fff}
.menumenu a{padding:11px 13px;border-radius:11px;font-size:14.5px;color:var(--ink2);font-weight:500;white-space:nowrap}
.menumenu a:hover{background:rgba(255,255,255,.07);color:var(--ink)}
html[data-theme="light"] .menumenu a:hover{background:#f1f5fc}
.menumenu .sep{height:1px;background:var(--line);margin:5px 2px}
.menumenu .go{color:var(--blue);font-weight:700}
@media(max-width:760px){.menubox{display:block}}

/* con più annunci per pagina, prezzi e badge si rimpiccioliscono da soli */
.vgrid.cols3 .vprice{font-size:clamp(4.5px,2.8cqw,7.5px);padding:1px 5px;left:4px;bottom:4px}
.vgrid.cols3 .vbadge{font-size:clamp(5px,3.6cqw,9px)}
.vgridH.rows3 .vprice{font-size:clamp(4.5px,1.8cqw,7px);padding:1px 4px}
.vgridH.rows3 .vbadge{font-size:clamp(5px,2.2cqw,9px)}
/* nota sotto il titolo della galleria */
.emore{margin-top:10px;font-size:14.5px;color:var(--ink3)}

/* ---------- avviso cookie ---------- */
.cookiebar{position:fixed;left:12px;right:12px;bottom:12px;z-index:9999;display:flex;gap:14px;align-items:center;
  justify-content:center;flex-wrap:wrap;background:var(--panel2);border:1px solid var(--line2);
  border-radius:14px;padding:12px 16px;box-shadow:var(--shadow-lg);font-size:13.5px;color:var(--ink2);
  max-width:900px;margin:0 auto}
.cookiebar a{color:var(--blue);text-decoration:underline}
.ckbtn{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;border:0;border-radius:10px;
  padding:9px 18px;font-weight:700;cursor:pointer;font-size:13.5px;white-space:nowrap}

/* ---------- fascia scorrevole ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:20px 0;background:rgba(9,14,24,.6);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mrow{display:flex;gap:44px;width:max-content;animation:slide 34s linear infinite}
.mrow span{display:inline-flex;align-items:center;gap:10px;color:var(--ink3);font-size:14.5px;font-weight:600;white-space:nowrap}
.mrow span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);opacity:.8}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- confronto prima/dopo ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:0 auto}
.cbox{padding:28px 26px;border-radius:var(--r-lg);border:1px solid var(--line);background:rgba(13,19,32,.7)}
.cbox.bad{border-color:rgba(242,84,91,.28)}
.cbox.good{border-color:rgba(52,211,153,.3);background:linear-gradient(170deg,rgba(16,42,36,.6),rgba(11,16,27,.75))}
.cbox h3{font-size:16px;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.cbox ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.cbox li{display:flex;gap:11px;align-items:flex-start;color:var(--ink2);font-size:14.5px}
.mk{flex:none;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900;margin-top:2px}
.mk.x{background:rgba(242,84,91,.16);color:#ff9ba0}
.mk.v{background:rgba(52,211,153,.16);color:#6ee7b7}

/* ---------- domande frequenti ---------- */
.faq{max-width:780px;margin:0 auto;display:grid;gap:12px}
.faq details{border:1px solid var(--line);border-radius:var(--r-md);background:rgba(13,19,32,.7);overflow:hidden;transition:border-color .25s}
.faq details[open]{border-color:var(--line2)}
.faq summary{padding:19px 22px;cursor:pointer;font-weight:650;font-size:15.5px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--ink3);font-weight:400;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 22px 20px;color:var(--ink2);font-size:14.5px}

/* ---------- richiamo finale ---------- */
.cta{position:relative;max-width:960px;margin:0 auto;padding:64px 40px;border-radius:32px;text-align:center;overflow:hidden;
  background:linear-gradient(150deg,rgba(37,99,235,.22),rgba(56,224,208,.12) 55%,rgba(139,123,255,.18));
  border:1px solid var(--line2);box-shadow:var(--shadow-xl)}
.cta::before{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent,rgba(79,141,255,.16),transparent 30%);
  animation:spin 16s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cta>*{position:relative}
.cta h2{font-size:clamp(26px,4vw,40px);font-weight:900;letter-spacing:-.03em}
.cta p{color:var(--ink2);max-width:540px;margin:16px auto 30px;font-size:16.5px}
.mailrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.mailtag{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:14px;
  background:rgba(0,0,0,.28);border:1px solid var(--line2);font-size:14.5px;font-weight:600;color:var(--ink);
  overflow-wrap:anywhere;max-width:100%}

/* ---------- piè di pagina ---------- */
.foot{border-top:1px solid var(--line);margin-top:96px;padding:46px 0 40px;background:rgba(5,7,13,.7)}
.footin{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}
.footbrand{max-width:330px}
.footbrand p{color:var(--ink3);font-size:13.5px;margin-top:12px}
.footcols{display:flex;gap:56px;flex-wrap:wrap}
.footcol h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);margin-bottom:14px;font-weight:700}
.footcol a{display:block;color:var(--ink2);font-size:14px;margin-bottom:9px;transition:color .2s}
.footcol a:hover{color:var(--ink)}
.footbot{max-width:var(--maxw);margin:34px auto 0;padding:22px 24px 0;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--ink3);font-size:13px}

/* ---------- adattamento a schermi piccoli ---------- */
/* tablet in verticale e finestre strette */
@media(max-width:1100px){
  .navlinks{gap:20px}
  .navlinks a{font-size:14px}
  .device.v{width:216px}
  .device.h{width:352px}
}
@media(max-width:1100px){ .gal .galfig.wide{width:340px} .gal .galfig{width:196px} }
@media(max-width:940px){
  .gal{gap:22px}
  .gal .galfig.wide{width:min(100%,360px)} .gal .galfig{width:min(46%,200px)}
  .feats{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr;gap:34px}
  .steps::before{display:none}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .compare{grid-template-columns:1fr}
  .tilt{flex-direction:column;align-items:center;gap:34px}
  .device.h{width:min(100%,396px)}
  .floatcard{display:none}
  .gal{gap:26px}
}
@media(max-width:760px){
  .navlinks{display:none}
  .feats{grid-template-columns:1fr}
  .sec{padding:70px 0}
}
@media(max-width:640px){
  .navcta .btn-p{display:none}     /* "Richiedi accesso" resta nell'hero, la barra non sborda */
  .navin{gap:10px;padding-top:12px;padding-bottom:12px}
  .themebtn{width:36px;height:36px}
  .eyebrow{font-size:12px;padding:7px 13px;max-width:100%;white-space:normal;line-height:1.35}
}
@media(max-width:600px){
  .gal{gap:18px}
  .gal .galfig.wide{width:min(100%,340px)} .gal .galfig{width:min(46%,170px)}
  .sec{padding:58px 0}
  .sec-head{margin-bottom:38px}
  .hero{padding:38px 0 16px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn-p,.hero-cta .btn-g{width:100%}
  .btn-xl{padding:15px 22px;font-size:15.5px}
  .cta{padding:42px 20px;border-radius:24px}
  .kpis{gap:10px;margin-top:52px}
  .kpi{padding:16px 10px}
  .device.v{width:min(100%,220px)}
  .stage{margin-top:40px}
  .footin{flex-direction:column;gap:26px}
  .footcols{gap:30px}
  .footbot{flex-direction:column;text-align:center}
  .mailtag{width:100%;justify-content:center}
  .feat{padding:24px 20px}
  .marquee{padding:16px 0}
}
/* telefoni piccoli */
@media(max-width:380px){
  .navcta .btn-sm{padding:9px 14px;font-size:13px}
  .brand{font-size:15px}
  .blogo{width:34px;height:34px}
  .kpis{grid-template-columns:1fr}
}
/* telefoni coricati: meno spazi verticali, hero più compatto */
@media(max-height:520px) and (orientation:landscape){
  .hero{padding:26px 0 8px}
  .sec{padding:44px 0}
  .stage{margin-top:26px}
  .device.v{width:150px}
  .device.h{width:min(100%,300px)}
  .kpis{margin-top:34px}
}

/* ---------- animazioni legate allo scorrimento ----------
   Usano le "timeline" native del browser: girano sul compositore, quindi non
   rallentano nulla e non serve JavaScript. Dove non sono supportate (Safari
   vecchi) semplicemente non si vedono e la pagina resta com'è. */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    /* il testo dell'apertura si allontana mentre si scende */
    html.js .hero>.wrapx{animation:heroAway linear both;
      animation-timeline:scroll(root block);animation-range:0 90vh}
    @keyframes heroAway{to{transform:translateY(-24px);opacity:.35}}
    /* i due dispositivi partono inclinati all'indietro e si raddrizzano */
    html.js .tilt .galfig{animation:devLean linear both;
      animation-timeline:scroll(root block);animation-range:0 58vh}
    @keyframes devLean{from{transform:perspective(1200px) rotateX(9deg) translateY(8px)}to{transform:none}}
    /* gli annunci dentro lo schermo scorrono un filo più lenti: dà profondità */
    html.js .tilt .dgrid{animation:gridPar linear both;
      animation-timeline:scroll(root block);animation-range:0 80vh}
    @keyframes gridPar{to{transform:translateY(-9px)}}
    /* la scena della vetrina entra salendo */
    html.js .shop{animation:shopRise linear both;
      animation-timeline:view();animation-range:entry 12% cover 40%}
    @keyframes shopRise{from{transform:translateY(36px) scale(.972)}to{transform:none}}
  }
}

/* schermi molto grandi: non far "perdere" il contenuto al centro */
@media(min-width:1600px){
  :root{--maxw:1260px}
  .hero h1{font-size:clamp(48px,4.4vw,74px)}
}