/* IBM Plex Sans (variabile, pesi 400-700), un file per alfabeto: il browser scarica solo quelli usati. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/ibm-plex-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/ibm-plex-sans-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/ibm-plex-sans-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* Palette del sito dgblend: navy, teal, blu, ambra, mist. */
:root{
  color-scheme:light dark;
  --navy:#0c2530; --navy-2:#0a1e28; --teal:#146b7a; --teal-dark:#0f4f5c; --blue:#1d6fa5;
  --amber:#f2a93b; --amber-hover:#e29a2a; --ink-deep:#090d12;
  --ground:#f4f7f8; --surface:#ffffff; --surface-2:#e9eff2;
  --ink:#090d12; --muted:#4b5a66; --hairline:#d9e1e6;
  --link:#0f4f5c; --heading:#1d6fa5; --step:#146b7a; --step-ink:#ffffff;
  --callout:#146b7a; --callout-ink:#ffffff;
  --shadow:0 1px 2px rgba(9,13,18,.04),0 6px 20px rgba(9,13,18,.06);
  --radius:8px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#090d12; --surface:#111a22; --surface-2:#182530;
    --ink:#e6edf3; --muted:#9fb0bd; --hairline:#24313d;
    --link:#6cc1d3; --heading:#7dbdea; --step:#1a8398; --step-ink:#ffffff;
    --callout:#0f4f5c; --callout-ink:#e6edf3;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --ground:#090d12; --surface:#111a22; --surface-2:#182530;
  --ink:#e6edf3; --muted:#9fb0bd; --hairline:#24313d;
  --link:#6cc1d3; --heading:#7dbdea; --step:#1a8398; --step-ink:#ffffff;
  --callout:#0f4f5c; --callout-ink:#e6edf3;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important}
.wrap{max-width:960px; margin:0 auto; padding-inline:22px}
h1,h2,h3,h4{margin:0; letter-spacing:-.015em; text-wrap:balance}
a{color:var(--link)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size:.94em}

/* Barra superiore, navy come il sito */
.topbar{background:var(--navy); color:#fff; position:sticky; top:0; z-index:50; box-shadow:0 1px 0 rgba(255,255,255,.08),0 6px 18px rgba(0,0,0,.25)}
html{scroll-padding-top:72px}
.bar{display:flex; align-items:center; gap:16px; height:64px}
.brand{display:inline-flex; align-items:center; text-decoration:none; line-height:0}
.logo{height:37px; width:140px; display:block}
.footer .logo{height:32px; width:121px}
.tools{margin-left:auto; display:flex; align-items:center; gap:14px}
.eyebrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75)}
@media (max-width:560px){.eyebrow{display:none}}

/* Selettore lingua (details), come nel sito */
.lang{position:relative}
.lang summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(255,255,255,.35); border-radius:6px; padding:5px 10px;
  font-size:12px; font-weight:600; letter-spacing:.06em; color:#fff;
}
.lang summary::-webkit-details-marker{display:none}
.lang summary::after{content:""; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid rgba(255,255,255,.8)}
.lang[open] summary{background:rgba(255,255,255,.1)}
.lang-menu{
  position:absolute; right:0; z-index:20; margin-top:8px; min-width:160px; max-width:calc(100vw - 2rem);
  display:flex; flex-direction:column; gap:2px; background:var(--navy); border:1px solid rgba(255,255,255,.15);
  border-radius:8px; padding:6px; box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.lang-menu a{color:rgba(255,255,255,.92); text-decoration:none; font-size:14px; padding:8px 12px; border-radius:6px}
.lang-menu a:hover,.lang-menu a:focus-visible{background:rgba(255,255,255,.1); color:#fff; outline:none}

/* Interruttore tema: automatico / chiaro / scuro */
.theme{
  width:34px; height:34px; border-radius:6px; border:1px solid rgba(255,255,255,.35); background:transparent;
  color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0;
}
.theme:hover{background:rgba(255,255,255,.1)}
.theme:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
.theme svg{width:18px; height:18px; display:none}
.theme[data-mode="auto"] .ic-auto,.theme[data-mode="light"] .ic-light,.theme[data-mode="dark"] .ic-dark{display:block}

/* Hero navy */
.hero{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%); color:#fff; padding:56px 0 64px; position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:-40% -10% auto; height:140%; background:radial-gradient(60% 60% at 70% 30%,rgba(20,107,122,.55),transparent 70%); pointer-events:none}
.hero .wrap{position:relative}
.hero h1{font-size:clamp(30px,5vw,46px); font-weight:700; line-height:1.1; max-width:22ch}
.hero p{font-size:clamp(16px,2.2vw,18px); color:rgba(255,255,255,.82); max-width:62ch; margin:16px 0 0}

/* Card sistema operativo, sovrapposte all'hero */
main.wrap{padding-bottom:72px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin:-32px 0 10px}
.card{
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:22px 22px 20px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow); position:relative;
}
.card.reco{border-color:var(--teal); box-shadow:var(--shadow),0 0 0 1px var(--teal)}
.reco-tag{
  position:absolute; top:-11px; left:18px; background:var(--amber); color:var(--ink-deep);
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; border-radius:999px;
}
.card .glyph{width:40px; height:40px; color:var(--teal)}
.card h2{font-size:20px; font-weight:600}
.card .sub{color:var(--muted); font-size:14px; margin-top:-6px}
.btn{
  margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--amber); color:var(--ink-deep); text-decoration:none; font-weight:600; font-size:15.5px;
  padding:12px 16px; border-radius:var(--radius); border:0; cursor:pointer; transition:background .15s ease;
}
.btn:hover{background:var(--amber-hover)}
.btn:focus-visible{outline:3px solid var(--teal); outline-offset:2px}
.btn[aria-disabled="true"]{background:var(--surface-2); color:var(--muted); cursor:default; pointer-events:none}
.btn .arrow{transition:transform .15s ease}
.btn:hover .arrow{transform:translateY(2px)}
.verify{font-size:11.5px; color:var(--muted); line-height:1.4; word-break:break-all}
.verify .lbl{font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:10.5px; margin-right:6px}
.verify code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; color:var(--ink)}

/* Barra dei download che resta sotto l'header quando le card escono dalla vista */
.dock{position:sticky; top:64px; height:0; z-index:40}
.dock-inner{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0 0;
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:8px 12px; box-shadow:var(--shadow);
  opacity:0; transform:translateY(-10px); pointer-events:none; transition:opacity .18s ease,transform .18s ease;
}
.dock.stuck .dock-inner{opacity:1; transform:none; pointer-events:auto}
.dock-label{font-size:13px; font-weight:600; color:var(--muted); margin-right:auto}
.dock-btn{
  display:inline-flex; align-items:center; gap:7px; background:var(--amber); color:var(--ink-deep);
  text-decoration:none; font-weight:600; font-size:14px; padding:8px 14px; border-radius:6px;
}
.dock-btn:hover{background:var(--amber-hover)}
@media (max-width:420px){.dock-label{display:none} .dock-inner{justify-content:center}}

/* Avviso iPhone/iPad (mostrato da app.js) */
.ios-notice{margin-top:22px; background:rgba(242,169,59,.14); border:1px solid rgba(242,169,59,.6); border-radius:var(--radius); padding:12px 14px; font-size:14.5px; color:#fff; max-width:62ch}
.ios-notice b{color:var(--amber)}

/* Configurazione server per Android: QR + campi da copiare */
.srvbox{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; margin-top:12px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius); padding:14px}
.qr{display:flex; flex-direction:column; align-items:center; gap:6px}
.qr img{width:150px; height:150px; background:#fff; padding:6px; border-radius:6px; border:1px solid var(--hairline)}
.qr-cap{font-size:12px; color:var(--muted); text-align:center; max-width:150px}
.srvfields{flex:1 1 260px; display:flex; flex-direction:column; gap:10px; min-width:0}
.field{display:grid; grid-template-columns:auto 1fr auto; gap:8px 10px; align-items:center; font-size:13.5px}
.field .fl{font-weight:600; color:var(--muted); white-space:nowrap}
.field code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; word-break:break-all; background:var(--surface-2); padding:6px 8px; border-radius:6px; min-width:0}
.copy{font:inherit; font-size:12.5px; font-weight:600; color:var(--ink); background:transparent; border:1px solid var(--hairline); border-radius:6px; padding:6px 10px; cursor:pointer; white-space:nowrap}
.copy:hover{border-color:var(--teal); color:var(--teal)}
.copy.done{border-color:var(--teal); color:var(--teal)}
@media (max-width:480px){.field{grid-template-columns:1fr auto} .field .fl{grid-column:1 / -1}}

/* Passaggi */
.steps-section{margin-top:44px}
.steps-head{display:flex; align-items:baseline; gap:12px; padding-bottom:8px; border-bottom:1px solid var(--hairline); flex-wrap:wrap}
.steps-head h3{font-size:21px; font-weight:700; color:var(--heading)}
.steps-head .for{font-size:13px; color:var(--muted)}
ol.steps{list-style:none; counter-reset:s; padding:0; margin:20px 0 0; display:flex; flex-direction:column; gap:18px}
ol.steps li{counter-increment:s; display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:start}
ol.steps li::before{
  content:counter(s); width:34px; height:34px; border-radius:50%; background:var(--step); color:var(--step-ink);
  font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:center;
}
ol.steps li b{font-weight:600}
ol.steps li .d{color:var(--muted); font-size:14.5px; margin-top:2px}
.warnbox{
  background:var(--surface-2); border-left:3px solid var(--amber); border-radius:6px; padding:12px 14px;
  font-size:14px; color:var(--ink); display:flex; gap:10px; align-items:flex-start; margin-top:6px;
}
.warnbox .k{color:var(--teal); font-weight:600; white-space:nowrap}
:root[data-theme="dark"] .warnbox .k{color:var(--link)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .warnbox .k{color:var(--link)}}

/* Riquadro "durante la sessione", teal come la griglia servizi del sito */
.final{
  margin-top:44px; background:var(--callout); color:var(--callout-ink); border-radius:var(--radius);
  padding:24px; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center;
}
.final .ic{width:34px; height:34px; color:var(--amber)}
.final h3{font-size:18px; font-weight:600}
.final p{margin:6px 0 0; font-size:15px}
.final .chip{
  display:inline-flex; gap:8px; margin-top:12px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  border-radius:6px; padding:8px 12px; font-size:14px; align-items:center; flex-wrap:wrap;
}
.final .chip span{opacity:.8}

/* Note */
.notes{margin-top:36px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:640px){.notes{grid-template-columns:1fr}}
.note{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius); padding:16px}
.note h4{margin:0 0 4px; font-size:14.5px; font-weight:600}
.note p{margin:0; font-size:13.5px; color:var(--muted)}
.note p b{color:var(--ink)}
.mt40{margin-top:40px}
.mt16{margin-top:16px}
ul.contacts{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; font-size:13.5px}
ul.contacts .cc{color:var(--muted); margin-right:4px}
ul.contacts a{font-weight:600; text-decoration:none}
ul.contacts a:hover{text-decoration:underline}

/* Footer navy come il sito */
.footer{background:var(--navy); color:rgba(255,255,255,.85); font-size:14px}
.fgrid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:28px; padding-block:40px 28px}
@media (max-width:640px){.fgrid{grid-template-columns:1fr; gap:22px}}
.footer .brand{margin-bottom:10px}
.footer h4{font-size:14px; font-weight:600; color:#fff; margin-bottom:8px}
.footer p{margin:0 0 6px}
.footer a{color:#fff}
.fmuted{color:rgba(255,255,255,.62); font-size:13px}
.fmuted .mono{color:#fff}
ul.fcontacts{margin:0 0 8px; font-size:14px}
ul.fcontacts .cc{color:rgba(255,255,255,.62)}
ul.fcontacts a{color:#fff}
.fbottom{border-top:1px solid rgba(255,255,255,.12); padding-block:16px 20px; font-size:12.5px; color:rgba(255,255,255,.55)}