/* ============ RIFINITURA LIMEN ============
   Seconda mano sopra gli stili della pagina e sopra vetro.css: tipografia più compatta e nitida,
   schermi dei servizi come oggetti fisici, controlli in vetro, modulo contatti su una lastra.
   Si toglie da sola: basta eliminare il <link> a questo file. */
:root{
  --r-dev:28px;
  --bezel:0 0 0 1px rgba(210,255,234,.14),0 0 0 6px rgba(225,255,240,.022),0 0 0 7px rgba(210,255,234,.075);
  --lift:0 50px 100px -50px rgba(0,0,0,.95),0 26px 50px -32px rgba(0,0,0,.85);
  --seg:inset 0 1px 2px rgba(0,0,0,.55),inset 0 0 0 1px rgba(210,255,234,.08),0 1px 0 rgba(255,255,255,.035);
  --raised:linear-gradient(180deg,rgba(225,255,240,.13),rgba(225,255,240,.045));
  --raised-sh:inset 0 1px 0 rgba(255,255,255,.13),0 4px 12px -6px rgba(0,0,0,.75);
}
html{text-rendering:optimizeLegibility;font-kerning:normal}

/* ============ TIPOGRAFIA ============
   I titoli grandi restano nel carattere del marchio, più compatti e un passo più grandi;
   i titoli piccoli passano al Jost medio, che a quelle misure è più nitido. */
h2{font-size:clamp(30px,4.3vw,62px);line-height:1.05;letter-spacing:-.048em}
.ct h2,.faq-h h2{font-size:clamp(30px,3.7vw,54px)}
.gar h3,.step h3{font:500 clamp(18px,1.4vw,21px)/1.3 var(--fb);letter-spacing:-.012em}
.svc-item h3{letter-spacing:-.04em}
.gar p,.step p{line-height:1.55}

/* ============ HERO: l'avviso della giornata è vetro ============ */
.toast{border:0;border-radius:16px;background:var(--g-tint),rgba(5,13,10,.58);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);box-shadow:inset 0 1px 0 var(--g-hi),inset 0 0 0 1px rgba(210,255,234,.1),var(--g-drop)}
.toast .t1 em{border-color:rgba(61,245,168,.3);background:rgba(61,245,168,.07)}

/* ============ SERVIZI ============ */
/* le cinque voci diventano un selettore incassato, come quello della lingua */
.rail{gap:2px;padding:4px;border-radius:999px;background:rgba(0,0,0,.32);box-shadow:var(--seg)}
.rail button{position:relative;display:block;padding:12px 2px 13px;border-radius:999px;text-align:center;text-indent:.13em;font-size:clamp(9.5px,.76vw,11px);letter-spacing:.13em;white-space:nowrap;transition:color .4s,background .5s var(--ease),box-shadow .5s}
.rail button i{position:absolute;left:50%;bottom:5px;width:14px;height:2px;margin-left:-7px;background:transparent}
.rail button.on{background:var(--raised);box-shadow:var(--raised-sh)}
@media(hover:hover){.rail button:not(.on):hover{background:rgba(225,255,240,.04)}}
/* lo schermo: una cornice a due fili, un riflesso sul vetro e un'ombra lunga */
.device{border:0;border-radius:var(--r-dev);box-shadow:var(--bezel),var(--lift),0 50px 120px -60px rgba(61,245,168,.28)}
.device::before,.svc-inline::before{content:"";position:absolute;inset:0;z-index:6;border-radius:inherit;pointer-events:none;background:linear-gradient(162deg,rgba(255,255,255,.05),transparent 30%)}
@media(max-width:900px){.svc-inline{border:0;border-radius:24px;box-shadow:var(--bezel),var(--lift)}}
.demo-note{margin-top:6px}

/* ============ AGENDA ============ */
.dg .nd rect{fill:rgba(9,22,17,.78);stroke:rgba(210,255,234,.16)}
.dg .hub>rect{fill:rgba(12,30,23,.9);stroke:rgba(61,245,168,.5)}
.dg .nd{filter:drop-shadow(0 18px 24px rgba(0,0,0,.55))}
.dg .slot{stroke:rgba(210,255,234,.1)}

/* ============ METODO: i punti sulla linea sono piccole luci incassate ============ */
.step::before{background:radial-gradient(circle at 50% 35%,rgba(225,255,240,.16),rgba(0,0,0,.7) 70%);border-color:rgba(210,255,234,.22);box-shadow:0 0 0 5px var(--void)}
.step.on::before{background:radial-gradient(circle at 50% 35%,#d8ffef,var(--beam) 60%);border-color:var(--beam);box-shadow:0 0 0 5px var(--void),0 3px 12px rgba(61,245,168,.55)}

/* ============ DOMANDE ============ */
.qa button i{width:34px;height:34px;border-color:rgba(210,255,234,.16);background:linear-gradient(180deg,rgba(225,255,240,.07),rgba(225,255,240,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.qa.open button i{background:linear-gradient(180deg,rgba(61,245,168,.22),rgba(61,245,168,.07));border-color:rgba(61,245,168,.5)}
@media(hover:hover){.qa button:hover i{border-color:rgba(210,255,234,.3)}}

/* ============ CONTATTI: il modulo su una lastra ============ */
.ct>form{padding:clamp(24px,3vw,42px);border-radius:28px;background:var(--g-tint),rgba(6,16,12,.55);box-shadow:inset 0 1px 0 var(--g-hi),inset 0 0 0 1px rgba(210,255,234,.09),var(--lift)}
.ct>form .ok{inset:0;border-radius:inherit;padding:clamp(24px,3vw,42px);background:rgba(4,12,9,.97)}
.ct>form .fd:first-child input{padding-top:18px}
.ct>form .fd:first-child label{top:18px}
.ct>form .fd:first-child input:focus+label,.ct>form .fd:first-child input:not(:placeholder-shown)+label{top:-4px}
.copy{background:linear-gradient(180deg,rgba(225,255,240,.06),rgba(225,255,240,.015));border-color:rgba(210,255,234,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}

/* ============ PROGETTI: le copertine hanno la stessa ombra lunga degli schermi ============ */
.pc{box-shadow:var(--lift)}

@media(prefers-reduced-transparency:reduce){.toast{background:rgba(5,13,10,.96)}}