/* ==========================================================================
   Amministrare.com — foglio di stile principale
   ========================================================================== */

:root {
  --paper: #f4f8fc;
  --ink: #183b59;
  --muted: #657d90;
  --brand: #087fbd;
  --brand-dark: #006b9e;
  --sage: #7d927c;
  --line: #d7e4ed;
  --night: #102f49;
  --footer: #0e2e49;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 5px; }
.skip-link:focus { top: 12px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; }
h1 { font-size: clamp(46px, 4.5vw, 72px); letter-spacing: -2.8px; margin: 25px 0; }
h1 em { color: var(--brand); }
h2 { font-size: 49px; letter-spacing: -1.7px; margin: 22px 0; }

/* ---------- Header ---------- */
.site-header { position: fixed; z-index: 10; top: 0; width: 100%; background: #f4f8fcd9; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: .3s; }
.site-header nav { max-width: 1320px; margin: auto; height: 91px; padding: 0 5%; display: flex; align-items: center; justify-content: space-between; transition: .3s; }
.site-header.small { box-shadow: 0 5px 25px #183b590d; }
.site-header.small nav { height: 68px; }
.logo { width: 220px; height: auto; display: block; }
.navlinks { display: flex; gap: 38px; font-size: 14px; list-style: none; margin: 0; padding: 0; }
.navlinks a:hover { color: var(--brand); }

/* ---------- Bottoni ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 28px; padding: 14px 25px; border: 1px solid var(--brand); border-radius: 5px; background: var(--brand); color: #fff; font-size: 14px; transition: .2s; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px #087fbd26; }
.btn.outline { color: var(--brand); background: transparent; }
.btn.light { background: #fff; color: var(--brand); border-color: #fff; white-space: nowrap; }
.textlink { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--brand); border-bottom: 1px solid #9dc8e1; padding-bottom: 5px; }

.eyebrow { font-size: 11px; letter-spacing: 2.5px; font-weight: 600; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ''; width: 25px; height: 1px; background: var(--brand); }
.tiny { font-size: 10px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; }

/* ---------- Hero ---------- */
.hero { min-height: 860px; height: 100svh; max-height: 1050px; display: grid; grid-template-columns: 1fr 1.12fr; column-gap: 48px; align-items: center; max-width: 1320px; margin: auto; padding: 110px 5% 70px; position: relative; }
.intro { font-size: 17px; color: var(--muted); max-width: 350px; line-height: 1.8; }
.actions { display: flex; gap: 12px; margin: 29px 0; }
.stores { display: flex; gap: 11px; margin-top: 34px; }
.store img { height: 42px; width: auto; max-width: 150px; object-fit: contain; display: block; }
@keyframes playPulse { 0% { box-shadow: 0 0 0 0 #ffffffb3; } 70%, 100% { box-shadow: 0 0 0 12px #ffffff00; } }
@keyframes playPulseBrand { 0% { box-shadow: 0 0 0 0 #087fbd66; } 70%, 100% { box-shadow: 0 0 0 10px #087fbd00; } }
/* video di presentazione: link sotto gli store e badge sul palazzo */
.videoplay { position: relative; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); animation: playPulseBrand 2.4s ease-out infinite; }
.videoplay::after { content: ''; position: absolute; left: 12px; top: 9px; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.videolink { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--brand); text-align: left; cursor: pointer; }
.videolink small { font-weight: 400; color: var(--muted); }
.videolink:hover > span:last-child { text-decoration: underline; text-underline-offset: 4px; }
.caption-right { display: flex; align-items: center; gap: 10px; }
.palazzo-video { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px 0 4px; border: 1px solid #ffffff38; border-radius: 20px; background: #ffffff14; color: #e6f3fb; font: inherit; font-size: 12px; white-space: nowrap; flex-shrink: 0; cursor: pointer; backdrop-filter: blur(6px); transition: background .2s; }
.palazzo-video:hover { background: #ffffff26; }
.palazzo-video .videoplay { width: 26px; height: 26px; background: #fff; animation-name: playPulse; }
.palazzo-video .videoplay::after { left: 10px; top: 8px; border-left: 8px solid var(--brand); border-top-width: 5px; border-bottom-width: 5px; }
/* pulsanti dell'apertura: una sola colonna, due pulsanti per riga con bordi allineati */
.cta { width: min(100%, 360px); }
.cta .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 29px 0 0; }
.cta .btn { height: auto; aspect-ratio: 534 / 167; padding: 0 16px; gap: 12px; }  /* stessa forma dei badge sotto */
/* badge degli store con le stesse proporzioni (sfondo nero allungato), larghi come i pulsanti sopra */
.cta .stores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.cta .store img { width: 100%; height: auto; max-width: none; }
.herofoot { position: absolute; bottom: 18px; left: 5%; right: 5%; display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; }

/* ---------- Palazzo ---------- */
.palazzo { position: relative; align-self: center; padding-top: 5px; }
.buildingcaption { display: flex; align-items: center; justify-content: space-between; padding: 0 35px; margin-bottom: -30px; position: relative; z-index: 1; }
.buildingcaption .tiny { font-size: 9px; letter-spacing: 2px; }
.tourpause { background: transparent; border: 1px solid #c9deeb; color: #47718d; width: 29px; height: 29px; border-radius: 50%; font-size: 11px; }

.pl-svg { width: 100%; height: clamp(400px, calc(100svh - 370px), 640px); display: block; overflow: hidden; transform: perspective(1400px) rotateY(calc(var(--mx, 0) * 5deg)) rotateX(calc(var(--my, 0) * -3deg)); }
.pl-depth { transform: translate(calc(var(--mx, 0) * var(--d) * 1px), calc(var(--my, 0) * var(--d) * .6px)); }

/* costruzione iniziale */
.pl-svg .pl-drop { transform: translateY(-150px); opacity: 0; }
.pl-svg.is-built .pl-drop { transform: none; opacity: 1; transition: transform 1s cubic-bezier(.3, 1.3, .5, 1) var(--delay), opacity .45s ease var(--delay); }
.pl-ground { transform-box: fill-box; transform-origin: 50% 60%; transform: scale(.7); opacity: 0; }
.is-built .pl-ground { transform: none; opacity: 1; transition: transform 1s cubic-bezier(.2, .9, .3, 1), opacity .6s; }
.pl-tree { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0); }
.is-built .pl-tree { transform: none; transition: transform .9s cubic-bezier(.3, 1.5, .5, 1) var(--delay); }
.pl-halo { transform-box: fill-box; transform-origin: center; opacity: 0; }
.is-built .pl-halo { opacity: 1; transition: opacity 1.6s; }
.pl-sky { opacity: 0; transition: opacity 2s 1.2s; }
.is-built .pl-sky { opacity: 1; }

/* piani che si aprono */
.pl-lift { transition: transform 1.05s cubic-bezier(.22, .9, .25, 1); }
.pl-lift.is-lifted { transform: translateY(-76px); }
.pl-roof { transform: translateY(-15px); }

.pl-slab { fill: #e3eff6; transition: fill .6s; }
.pl-tiles { stroke: #d2e3ee; stroke-width: 1; fill: none; opacity: 0; transition: opacity .6s; }
.pl-front { fill: #f4f8fb; transition: fill .6s; }
.pl-side { fill: #c3d8e6; transition: fill .6s; }
.pl-balcony { fill: #7bacca; transition: fill .6s; }
.pl-outline { fill: none; stroke: #0789cb; stroke-width: 2; opacity: 0; transition: opacity .3s, stroke-width .3s; }
.pl-floor { outline: none; cursor: pointer; }
.pl-floor:hover .pl-outline, .pl-floor:focus-visible .pl-outline { opacity: .9; stroke-width: 3; }
.pl-floor.is-active .pl-slab { fill: #f3f9fd; }
.pl-floor.is-active .pl-tiles { opacity: 1; }
.pl-floor.is-active .pl-front { fill: #e5f4ff; }
.pl-floor.is-active .pl-side { fill: #97c9e7; }
.pl-floor.is-active .pl-balcony { fill: var(--brand); }

.pl-dot { fill: #8db8d4; transition: fill .5s; }
.pl-floor.is-active .pl-dot { fill: var(--brand); }
.pl-ring { fill: none; stroke: var(--brand); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.is-alive .pl-floor.is-active .pl-ring { animation: pl-ring 2.4s ease-out infinite; }
@keyframes pl-ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }

/* finestre */
.pl-glow { fill: #f6d38c; opacity: 0; transition: opacity .5s ease; }
.pl-floor.is-active .pl-glow { opacity: .95; transition-delay: calc(var(--i) * 110ms + 250ms); }
.pl-glow.twinkle { opacity: .75; transition-duration: 1.2s; }
.pl-door { fill: #f3c97a; opacity: 0; transition: opacity 1.5s 1.4s; }
.is-built .pl-door { opacity: .55; }

/* oggetti dentro il piano aperto */
.pl-item { opacity: 0; transform: translateY(var(--from, 14px)); transition: opacity .35s ease, transform .35s ease; }
.pl-floor.is-active .pl-item { opacity: 1; transform: none; transition: opacity .5s ease calc(var(--i) * 90ms + 380ms), transform .75s cubic-bezier(.3, 1.4, .5, 1) calc(var(--i) * 90ms + 380ms); }
.pl-float { animation: pl-bob 3.2s ease-in-out infinite alternate; }
@keyframes pl-bob { to { transform: translateY(-7px); } }
.pl-cabin { animation: pl-lift 4.2s cubic-bezier(.6, 0, .4, 1) infinite alternate; }
@keyframes pl-lift { 0%, 15% { transform: translateY(0); } 85%, 100% { transform: translateY(-24px); } }
.pl-flow { stroke-dasharray: 5 11; animation: pl-flow 1.2s linear infinite; }
@keyframes pl-flow { to { stroke-dashoffset: -16; } }
.pl-trend { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pl-floor.is-active .pl-trend { stroke-dashoffset: 0; transition: opacity .3s 1.2s, stroke-dashoffset 1s ease 1.3s; }

/* etichette collegate */
.pl-link { fill: none; stroke: #59a9d6; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; transition: stroke-dashoffset .4s ease; }
.pl-anchor { fill: var(--brand); opacity: 0; transition: opacity .3s; }
.pl-chip { opacity: 0; transform: translateY(10px) scale(.96); transform-box: fill-box; transform-origin: 0 100%; transition: opacity .3s, transform .3s; }
.pl-chipwrap.is-shown .pl-link { stroke-dashoffset: 0; transition: stroke-dashoffset .7s ease .9s; }
.pl-chipwrap.is-shown .pl-anchor { opacity: 1; transition-delay: .85s; }
.pl-chipwrap.is-shown .pl-chip { opacity: 1; transform: none; transition: opacity .5s ease 1.35s, transform .7s cubic-bezier(.3, 1.4, .5, 1) 1.35s; }
.is-alive .pl-chipwrap.is-shown .pl-chip { animation: pl-bob 3.6s ease-in-out 2.2s infinite alternate; }

/* ambiente */
.pl-cloud { fill: #e2edf6; animation: pl-drift var(--dur) linear var(--delay) infinite; }
@keyframes pl-drift { from { transform: translateX(-140px); } to { transform: translateX(800px); } }
.pl-flock { animation: pl-fly 26s linear 3s infinite; opacity: 0; }
@keyframes pl-fly { 0% { transform: translate(-60px, 150px); opacity: 0; } 4% { opacity: 1; } 55% { transform: translate(700px, 20px); opacity: 1; } 56%, 100% { transform: translate(700px, 20px); opacity: 0; } }
.pl-wing { fill: none; stroke: #7d9bb1; stroke-width: 1.6; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: pl-flap .45s ease-in-out infinite alternate; }
@keyframes pl-flap { to { transform: scaleY(-.6); } }
.is-alive .pl-crown { transform-box: fill-box; transform-origin: 50% 100%; animation: pl-sway 5s ease-in-out infinite alternate; }
@keyframes pl-sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
.is-alive .pl-halo { animation: pl-breathe 7s ease-in-out infinite alternate; }
@keyframes pl-breathe { to { transform: scale(1.06); } }
.pl-svg.is-offscreen * { animation-play-state: paused !important; }

/* vetro, luce e ombre */
.pl-sheen { fill: url(#pl-sheen); opacity: 0; }
.is-alive .pl-sheen { animation: pl-sheen 9s ease-in-out calc(var(--i) * .18s + 1s) infinite; }
.is-alive .pl-floor.is-active .pl-sheen { animation-duration: 4.5s; }
@keyframes pl-sheen { 0%, 72% { transform: translateX(0); opacity: 0; } 76% { opacity: .9; } 100% { transform: translateX(62px); opacity: 0; } }
.pl-rail-glass { fill: #cfe8f7; fill-opacity: .32; transition: fill-opacity .6s; }
.pl-floor.is-active .pl-rail-glass { fill-opacity: .45; }
.pl-rail-top { fill: none; stroke: #ffffff; stroke-width: 2; stroke-opacity: .85; }
.pl-edge { fill: none; stroke: #ffffff; stroke-width: 1.4; stroke-opacity: .75; stroke-linejoin: round; }
.pl-cast { fill: url(#pl-castg); opacity: 0; transition: opacity .8s ease .15s; }
.pl-floor.is-active .pl-cast { opacity: 1; }

/* schede dell'app */
.pl-chipwrap { pointer-events: none; }
.pl-chipwrap.is-shown .pl-chip { pointer-events: auto; cursor: pointer; }
.pl-chip:hover rect:first-child, .pl-chip:focus-visible rect:first-child { stroke: #087fbd; }
.pl-cardbar { transform-box: fill-box; transform-origin: left; transform: scaleX(0); }
.pl-chipwrap.is-shown .pl-cardbar { transform: none; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1) 1.6s; }
.pl-cardsheen { opacity: 0; }
.pl-chipwrap.is-shown .pl-cardsheen { animation: pl-cardsheen 1.2s ease 1.9s both; }
@keyframes pl-cardsheen { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(280px); } }

/* sera: cielo, stelle, lampioni e finestre accese */
.pl-svg { --dusk: 0; }
.pl-night { opacity: var(--dusk); }
.pl-halo { transition: opacity 1.6s; }
.is-built .pl-halo { opacity: calc(1 - var(--dusk)); }
.pl-stars circle { fill: #fff; opacity: calc(var(--dusk) * .9); }
.is-alive .pl-stars circle { animation: pl-star var(--t) ease-in-out infinite alternate; }
@keyframes pl-star { to { opacity: calc(var(--dusk) * .25); } }
.pl-moon { fill: #fdf3d6; opacity: var(--dusk); filter: drop-shadow(0 0 10px #ffe9b0); }
.pl-cloud { fill-opacity: calc(1 - var(--dusk) * .55); }
.pl-lampglow { opacity: calc(var(--dusk) * .9); }
.pl-lamp { fill: #fff3cf; opacity: calc(.35 + var(--dusk) * .65); }
.pl-floor:not(.is-active) .pl-glow:not(.twinkle) { opacity: calc(var(--dusk) * .85); }
.is-built .pl-door { opacity: calc(.55 + var(--dusk) * .4); }

/* selettore piani e racconto */
.floorchoices { display: flex; gap: 7px; margin: -10px 10px 0; position: relative; }
.floorchoices button { background: transparent; border: 1px solid #c7ddea; border-radius: 6px; padding: 11px 10px; flex: 1; color: #637f93; font-size: 11px; text-align: left; transition: .35s; }
.floorchoices button span { font-size: 10px; margin-right: 7px; opacity: .6; }
.floorchoices button:hover { border-color: var(--brand); color: var(--brand); }
.floorchoices button.selected { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 7px 20px #087fbd1a; }
.floorstory { display: flex; align-items: center; gap: 14px; margin: 16px 10px 0; min-height: 65px; }
.storynumber { font: 32px var(--serif); color: #8eb9d5; }
.floorstory strong { font-size: 13px; font-weight: 500; color: #225375; }
.floorstory p { font-size: 11px; color: #6d8495; margin: 3px 0; line-height: 1.5; }
.floorstory > a { margin-left: auto; color: var(--brand); font-size: 23px; padding: 5px 9px; }
.floorstory.refresh { animation: storyIn .45s ease both; }
@keyframes storyIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tourprogress { height: 2px; background: #dce9f2; margin: 9px 10px 0; overflow: hidden; }
.tourprogress span { display: block; height: 100%; width: 0; background: #259dce; }
.tourprogress.running span { animation: tourTime 6s linear forwards; }
@keyframes tourTime { to { width: 100%; } }

/* ---------- Vetrina del palazzo: stesso linguaggio della sezione PayByBank ---------- */
.palazzo { padding: 22px 18px 18px; border-radius: 28px; overflow: hidden; isolation: isolate; color: #fff;
  background: radial-gradient(ellipse at 55% 36%, #21608a 0, #143d5c 42%, #0d2840 100%);
  box-shadow: 0 50px 90px -40px #0b2236cc, 0 20px 40px -30px #0b223699, inset 0 1px 0 #ffffff2e, inset 0 0 0 1px #ffffff14; }
.palazzo::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .07; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 63px, #b7e5ff 63px 64px), repeating-linear-gradient(0deg, transparent 0 63px, #b7e5ff 63px 64px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 75%); }
.palazzo::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(125deg, #ffffff17 0%, #ffffff05 22%, transparent 34%); }
.palazzo .buildingcaption { padding: 0 8px; margin-bottom: -26px; }
.palazzo .buildingcaption .tiny { color: #8fc3e3; }
.palazzo .tourpause { border-color: #ffffff38; color: #cfe6f5; background: #ffffff0d; }
.palazzo .floorchoices { margin: -6px 0 0; }
.palazzo .floorchoices button { background: #ffffff0d; border-color: #ffffff24; color: #b9d3e4; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.palazzo .floorchoices button:hover { border-color: #7dd4f7; color: #fff; }
.palazzo .floorchoices button.selected { background: linear-gradient(135deg, #0a8fd0, #0772ab); border-color: #5fb9e5; color: #fff; box-shadow: 0 8px 24px #0a8fd055, inset 0 1px 0 #ffffff40; }
.palazzo .floorstory { margin: 14px 4px 0; }
.palazzo .storynumber { color: #6fb9df; }
.palazzo .floorstory strong { color: #fff; }
.palazzo .floorstory p { color: #9fbfd4; }
.palazzo .floorstory > a { color: #7dd4f7; }
.palazzo .tourprogress { background: #ffffff1a; margin: 8px 4px 0; }
.palazzo .tourprogress span { background: #7dd4f7; box-shadow: 0 0 8px #7dd4f7; }

/* il palazzo di sera: chiaro e luminoso sulla vetrina scura, come lo schermo del telefono */
.palazzo .pl-night, .palazzo .pl-flock, .palazzo .pl-cloud { display: none; }
.palazzo .pl-ground ellipse { fill: #06182a; opacity: .55; }
.palazzo .pl-ground path:nth-of-type(1) { fill: #1f4d70; }
.palazzo .pl-ground path:nth-of-type(2) { fill: #163c59; }
.palazzo .pl-ground path:nth-of-type(3) { fill: #10304a; }
.palazzo .pl-ground path:nth-of-type(4) { stroke: #3a76a0; }
.palazzo .pl-base path:nth-of-type(1) { fill: #2c6189; }
.palazzo .pl-base path:nth-of-type(2) { fill: #d3e3ef; }
.palazzo .pl-base path:nth-of-type(3) { fill: #7fa6c2; }
.palazzo .pl-base path:nth-of-type(7) { fill: #a9c7dc; }
.palazzo .pl-slab { fill: #c4d9e8; }
.palazzo .pl-front { fill: #e9f2f9; }
.palazzo .pl-side { fill: #96b7cf; }
.palazzo .pl-balcony { fill: #3a74a0; }
.palazzo .pl-tiles { stroke: #c5dcec; }
.palazzo .pl-floor.is-active .pl-slab { fill: #eef6fc; }
.palazzo .pl-floor.is-active .pl-front { fill: #ffffff; }
.palazzo .pl-floor.is-active .pl-side { fill: #a8cde6; }
.palazzo .pl-floor.is-active .pl-balcony { fill: #0a8fd0; }
.palazzo .pl-edge { stroke: #bfeaff; stroke-opacity: .95; stroke-width: 1.6; }
.palazzo .pl-rail-top { stroke: #d6f2ff; }
.palazzo .pl-rail-glass { fill: #9fdcff; fill-opacity: .22; }
.palazzo .pl-outline { stroke: #7dd4f7; }
.palazzo .pl-dot { fill: #24557a; stroke: #ffffff40; stroke-width: 1; }
.palazzo .pl-floor.is-active .pl-dot { fill: #0a8fd0; stroke: #bfeaff; }
.palazzo .pl-ring { stroke: #7dd4f7; }
.palazzo .pl-crown { fill: #4f8a80; }
.palazzo .pl-cloud { fill: #ffffff; fill-opacity: .05; }
.palazzo .pl-link { stroke: #7dd4f7; stroke-width: 1.6; filter: drop-shadow(0 0 3px #7dd4f7); }
.palazzo .pl-anchor { fill: #7dd4f7; }
.palazzo .pl-stars circle { opacity: calc(.45 + var(--dusk) * .45); }
@keyframes pl-star-dark { to { opacity: .12; } }
.is-alive .palazzo .pl-stars circle, .palazzo .is-alive .pl-stars circle { animation-name: pl-star-dark; }
.palazzo .pl-moon { opacity: calc(.75 + var(--dusk) * .25); }
.palazzo .pl-lampglow { opacity: calc(.55 + var(--dusk) * .4); }
.palazzo .pl-lamp { opacity: 1; }
.palazzo .pl-floor:not(.is-active) .pl-glow:not(.twinkle) { opacity: calc(.28 + var(--dusk) * .55); }
.is-built .palazzo .pl-door, .palazzo .is-built .pl-door { opacity: .9; }

/* binario laterale dei piani */
.buildingrail { position: fixed; right: 15px; top: 42%; z-index: 8; display: flex; flex-direction: column; align-items: center; font-size: 10px; color: #6b92af; opacity: 0; pointer-events: none; transition: .4s; }
.buildingrail.shown { opacity: 1; pointer-events: auto; }
.buildingrail a { width: 42px; height: 30px; display: flex; justify-content: space-around; align-items: center; background: #edf4fa; font-size: 9px; border: 1px solid #cadfec; transition: .4s; }
.buildingrail a span { font-size: 20px; line-height: 1; color: #95b5ca; }
.buildingrail a:hover { background: var(--brand); color: #fff; }
.buildingrail a.current { background: var(--brand); color: #fff; transform: translateX(-6px); box-shadow: 4px 3px 0 #c1dced; }
.buildingrail a.current span { color: #fae2aa; }
.railroof { width: 46px; height: 9px; background: #2d6b96; clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%); }
.railbase { width: 46px; height: 5px; background: #9cbed3; }
.buildingrail small { font-size: 7px; letter-spacing: 1px; margin-top: 10px; writing-mode: vertical-rl; }

/* ---------- Piani (sezioni) ---------- */
.floor { min-height: 560px; max-width: 1200px; margin: auto; padding: 76px 5%; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 11%; position: relative; border-bottom: 1px solid var(--line); }
.floor .number { position: absolute; font: 300px/1 var(--serif); color: #e3edf5; z-index: 0; top: 30px; left: 3%; pointer-events: none; transition: color .7s; }
.floor > *:not(.number) { position: relative; }
.floor.focused-floor .eyebrow { color: var(--brand); }
.floor.focused-floor .number { color: #d5e9f7; }
.reverse .copy { order: 2; }
.reverse .number { left: auto; right: 4%; }
.copy p { color: var(--muted); max-width: 380px; }
.stage { height: 340px; display: flex; align-items: center; justify-content: center; position: relative; }
.stage::before { content: ''; position: absolute; width: 300px; height: 300px; background: #e5f0f8; border-radius: 50%; z-index: -1; }

.paper { width: 250px; background: #fff; border: 1px solid #dce6ee; border-radius: 3px; padding: 25px; box-shadow: 0 20px 40px #35403210; position: absolute; transition: .5s; }
.paper.back { transform: rotate(-12deg) translate(-30px, -4px); height: 270px; background: #bbd5e8; }
.paper.mid { transform: rotate(9deg) translate(26px, 5px); height: 270px; }
.paper.front { transform: rotate(-3deg); height: 280px; }
.stage:hover .paper.front { transform: rotate(0deg) translate(25px, -15px); }
.stage:hover .paper.back { transform: rotate(-19deg) translate(-55px, 0); }
.dochead { display: flex; justify-content: space-between; color: var(--sage); font-size: 10px; letter-spacing: 1px; }
.plan { border: 2px solid #c0c7b6; height: 170px; margin-top: 20px; background: linear-gradient(90deg, transparent 47%, #c0c7b6 48%, #c0c7b6 50%, transparent 51%); }
.paper h3 { font-size: 27px; margin: 28px 0 15px; }
.rule { height: 4px; background: #e0eaf2; margin: 12px 0; }
.rule.short { width: 65%; }
.seal { display: inline-block; margin-top: 13px; color: var(--sage); border: 1px solid #b7c3ae; border-radius: 30px; padding: 4px 10px; font-size: 9px; }
.tag { position: absolute; background: #fff; border: 1px solid #e3e3d8; box-shadow: 0 10px 25px #3440370b; border-radius: 6px; padding: 13px 19px; font-size: 12px; bottom: 0; right: -10px; }

.card { width: 100%; background: #fff; border: 1px solid #dce6ee; border-radius: 10px; padding: 25px; box-shadow: 0 20px 40px #3540320b; }
.maintenance { transform: rotate(-2deg); }
.maintenance h3 { font-size: 23px; margin: 12px 0; }
.workrow { display: flex; justify-content: space-between; font-size: 12px; margin-top: 22px; }
.pill { padding: 5px 10px; border-radius: 20px; font-size: 10px; background: #f0e3c5; color: #9a7839; }
.progress { height: 9px; background: #eee8d9; border-radius: 20px; overflow: hidden; margin: 22px 0; }
.progress span { display: block; width: 0; height: 100%; background: repeating-linear-gradient(120deg, #b49757 0 8px, #d2bd86 8px 16px); transition: width 1.8s; }
.visible .progress span { width: 72%; }
.workicons { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); list-style: none; margin: 0; padding-left: 0; }
.workicons li { text-align: center; font-size: 10px; color: var(--muted); }
.workicons b { display: block; font-size: 24px; font-weight: 400; color: var(--ink); margin-bottom: 5px; }
.account { transform: rotate(2deg); padding: 26px; }
.account .label { font-size: 12px; margin-top: 16px; color: var(--muted); }
.balance { font-family: var(--serif); font-size: 40px; margin: 10px 0 22px; }
.balance small { font-size: 22px; }
.accountrow { border-top: 1px solid #e0eaf2; padding: 15px 0; display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.accountrow small { display: block; color: var(--muted); font-size: 10px; }
.paid { color: #69836a; background: #e8eee2; }
.due { color: #92733b; background: #f2e8d2; }

/* ---------- PayByBank ---------- */
.directpay { color: #fff; padding: 85px 6% 55px; margin-top: 50px; overflow: hidden; background: radial-gradient(ellipse at 80% 35%, #1b4b6b 0, transparent 55%), var(--night); }
.directpay-inner { max-width: 1120px; margin: auto; }
.directpay .eyebrow { color: #7fc9ee; font-size: 10px; letter-spacing: 2px; }
.directpay .eyebrow::before { background: #7fc9ee; }
.direct-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.direct-copy h2 { color: #fff; font-size: 64px; line-height: 1.06; letter-spacing: -2px; margin: 25px 0; }
.direct-copy h2 em { font-style: normal; color: #72c9f0; }
.direct-copy > p { font-size: 15px; line-height: 1.85; color: #bbd3e2; max-width: 380px; }
.direct-copy > p strong { color: #fff; font-weight: 500; }
.direct-channels { display: flex; gap: 10px; margin: 24px 0; list-style: none; padding: 0; }
.direct-channels li { border: 1px solid #41637b; padding: 6px 13px; border-radius: 25px; color: #c7e1ef; font-size: 11px; }
.direct-benefit { display: flex; gap: 12px; max-width: 370px; color: #9cc5dd; }
.direct-benefit > span { font-size: 18px; color: #7bd1ed; }
.direct-benefit p { font-size: 12px; line-height: 1.8; margin: 0; }
.openbank-label { display: block; font-size: 9px; margin-top: 25px; color: #729eb8; letter-spacing: .4px; }

/* Telefono con l'app Amministrare.com */
.phone-stage { position: relative; display: grid; justify-items: center; padding: 20px 0 0; perspective: 1700px; }
.phone-glow { position: absolute; top: 8%; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, #2b9be0 0, #1b5d8a66 38%, transparent 68%); filter: blur(8px); opacity: .6; animation: glowPulse 6s ease-in-out infinite alternate; }
@keyframes glowPulse { to { opacity: .85; transform: scale(1.06); } }

.phone { --rx: 7deg; --ry: -18deg; --gx: 30%; --gy: 12%; position: relative; z-index: 1; width: 292px; height: 600px; border-radius: 54px; padding: 4px;
  background: linear-gradient(140deg, #f4f7fa 0%, #b3c0cb 14%, #59687a 34%, #d8e0e7 52%, #7f8d9a 74%, #e9eef2 92%, #a8b5c0 100%);
  box-shadow: inset 0 0 0 1px #ffffff99, inset 0 0 0 2.5px #00000055, 0 60px 90px -30px #020f1ecc, 0 25px 50px -25px #000000aa;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.phone.is-tracking { transition: transform .15s linear; }
.phone-key { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #5d6b78, #c9d3db 60%, #7b8995); }
.phone-key--action { left: -3px; top: 104px; height: 26px; }
.phone-key--up { left: -3px; top: 150px; height: 46px; }
.phone-key--down { left: -3px; top: 206px; height: 46px; }
.phone-key--power { right: -3px; top: 168px; height: 74px; }
.phone-bezel { position: absolute; inset: 4px; border-radius: 50px; background: #04070b; padding: 9px; box-shadow: inset 0 0 0 1px #1d2833; }
.phone-screen { position: relative; height: 100%; border-radius: 42px; overflow: hidden; background: #f4f8fc; isolation: isolate; font-family: var(--sans); color: var(--ink); }
.phone-island { position: absolute; z-index: 7; top: 10px; left: 50%; width: 92px; height: 27px; margin-left: -46px; border-radius: 20px; background: #000; }
.phone-island i { position: absolute; right: 13px; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3a4f7a, #0b1220 60%); }

/* vetro e riflessi */
.phone-glass { position: absolute; inset: 0; z-index: 8; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(circle at var(--gx) var(--gy), #ffffff40, transparent 42%),
    linear-gradient(118deg, #ffffff3d 0%, #ffffff12 24%, #ffffff00 36%, #ffffff00 70%, #ffffff14 82%, #ffffff00 92%);
  box-shadow: inset 0 0 0 1px #ffffff1a, inset 0 1px 0 #ffffff55; }
.phone-glass::after { content: ''; position: absolute; inset: -40% -60%; background: linear-gradient(105deg, transparent 42%, #ffffff30 49%, #ffffff10 52%, transparent 58%); transform: translateX(-60%); animation: sheen 7s ease-in-out 1.5s infinite; }
@keyframes sheen { 0%, 70% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.phone-shadow { width: 230px; height: 26px; margin-top: 18px; border-radius: 50%; background: radial-gradient(ellipse, #000000a0, transparent 70%); filter: blur(4px); transform: translateX(18px); }
.phone-stage .demo-safety { margin: 14px 0 0; padding: 0; border: 0; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: #7fa5bd; }

/* schede in vetro smerigliato attorno al telefono */
.glass-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 11px 15px 11px 12px; white-space: nowrap; border-radius: 14px; color: #fff; font-size: 11px;
  background: linear-gradient(135deg, #ffffff2e, #ffffff0d); border: 1px solid #ffffff38; box-shadow: 0 20px 40px #02101e55, inset 0 1px 0 #ffffff40;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); animation: floatCard 5s ease-in-out infinite alternate; }
.glass-card strong { display: block; font-size: 12px; font-weight: 600; }
.glass-card small { display: block; color: #cfe6f5; font-size: 10px; margin-top: 2px; }
.glass-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #7dd4f733; color: #9fe2ff; font-size: 15px; }
.glass-card--top { bottom: 205px; right: calc(50% + 116px); }
.glass-card--bottom { top: 132px; left: calc(50% + 112px); animation-delay: -2.5s; }
@keyframes floatCard { to { transform: translateY(-12px); } }

/* schermate dell'app */
.app-screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 50px 16px 14px; background: #f4f8fc; transform: translateX(100%); transition: transform .65s cubic-bezier(.2, .8, .2, 1), opacity .65s, filter .65s; }
.app-screen.is-current { transform: none; }
.app-screen.is-before { transform: translateX(-30%); opacity: .4; filter: brightness(.85); }
.statusbar { position: absolute; top: 15px; left: 30px; right: 26px; display: flex; justify-content: space-between; align-items: center; font: 600 12px var(--sans); color: #0f2235; }
.status-icons { display: flex; gap: 5px; align-items: center; }
.status-icons svg { height: 10px; fill: currentColor; stroke: currentColor; stroke-width: 1.2; }
.status-icons svg:first-child { width: 15px; stroke: none; }
.status-icons svg:last-child { width: 22px; }

.app-top { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.app-top img { width: 120px; height: auto; }
.app-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #dcecf7; color: var(--brand); font-size: 8px; font-weight: 700; }
.app-place { margin: 8px 0 10px; font-size: 9.5px; color: var(--muted); }
.app-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 9px; background: #e4eef6; font-size: 9.5px; }
.app-tabs span { flex: 1; text-align: center; padding: 5px 0; border-radius: 7px; color: #5f7d93; }
.app-tabs .on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 2px 6px #183b5914; }
.app-balance { margin-top: 12px; padding: 14px 15px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #0a86c6, #075c92); box-shadow: 0 12px 24px #087fbd40; position: relative; overflow: hidden; }
.app-balance::after { content: ''; position: absolute; right: -30px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: #ffffff1a; }
.app-balance small { font-size: 9px; color: #cfe9f8; }
.app-balance strong { display: block; font: 30px var(--serif); margin: 2px 0; }
.app-balance strong span { font-size: 17px; opacity: .8; }
.app-balance em { font-style: normal; font-size: 9px; color: #ffe2a6; }
.app-rates { list-style: none; margin: 12px 0 0; padding: 0; }
.app-rates li { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 11px; font-size: 10px; }
.app-rates li > span:nth-child(2) { flex: 1; }
.app-rates small { display: block; font-size: 8.5px; color: var(--muted); }
.app-rates b { font-weight: 600; font-size: 10px; }
.app-rates .selected { background: #fff; box-shadow: 0 0 0 1.5px #82bfe0, 0 6px 14px #087fbd18; }
.rate-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; }
.rate-dot.ok { background: #e3eedf; color: #5c8a5e; }
.rate-dot.due { background: #f6e6c4; color: #a87b25; font-weight: 700; }
.app-cta { position: relative; overflow: hidden; margin-top: auto; width: 100%; border: 0; border-radius: 13px; padding: 13px 15px; display: flex; justify-content: space-between; align-items: center; background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 600; box-shadow: 0 10px 20px #087fbd40; transition: transform .2s, background .2s; }
.app-cta:hover { background: var(--brand-dark); }
.app-cta.is-pressed { transform: scale(.96); background: var(--brand-dark); }
.app-screen[data-screen="0"] .app-cta { margin-bottom: 10px; margin-top: 10px; }
.app-tabbar { display: flex; justify-content: space-around; margin: auto -16px -14px; padding: 8px 0 16px; border-top: 1px solid #dfe9f1; background: #ffffffcc; font-size: 14px; color: #8aa4b6; }
.app-tabbar span { text-align: center; line-height: 1.1; }
.app-tabbar small { display: block; font-size: 7.5px; margin-top: 2px; }
.app-tabbar .on { color: var(--brand); }

.app-nav { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-top: 2px; }
.app-nav button { border: 0; background: none; padding: 0; color: var(--brand); font-size: 11px; }
.app-nav span { width: 40px; }
.transfer { margin-top: 14px; padding: 15px; border-radius: 16px; background: #fff; box-shadow: 0 8px 20px #183b5912; }
.transfer > small { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: #7299b1; }
.transfer > strong { display: block; font: 32px var(--serif); margin: 2px 0 8px; }
.transfer > strong span { font-size: 18px; color: #7195ac; }
.transfer dl { margin: 0; }
.transfer dl div { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid #e6eef4; font-size: 9.5px; }
.transfer dt { color: #7c98ab; }
.transfer dd { margin: 0; text-align: right; font-weight: 600; }
.app-label { margin: 14px 0 6px; font-size: 10px; font-weight: 600; }
.banks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.banks li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 11px; background: #fff; font-size: 10px; border: 1px solid #e3edf4; }
.banks li i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 10px; color: #fff; background: var(--c); }
.banks li span { margin-left: auto; color: var(--brand); }
.banks .selected { border-color: #82bfe0; box-shadow: 0 0 0 1px #82bfe0; }
.app-secure { margin: 8px 0 0; text-align: center; font-size: 8.5px; color: var(--muted); }
.app-screen[data-screen="1"] .app-cta { margin-top: auto; }

.app-screen--bank { background: linear-gradient(170deg, #12324d, #0b1f31 60%); color: #fff; }
.app-screen--bank .statusbar { color: #fff; }
.bank-top { display: flex; align-items: center; gap: 9px; margin-top: 4px; font-size: 12px; font-weight: 600; }
.bank-logo { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #0a7cc0; font-size: 12px; }
.bank-lock { margin-left: auto; font-size: 11px; }
.bank-body { flex: 1; display: flex; flex-direction: column; }
.auth { text-align: center; margin: 34px 0 18px; }
.faceid { width: 74px; height: 74px; fill: none; stroke: #7dd4f7; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.faceid .tick { stroke: #7ee0a5; stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.app-screen--bank.is-scanning .faceid { animation: scan 1.1s ease-in-out infinite alternate; }
@keyframes scan { to { transform: scale(.92); opacity: .7; } }
.app-screen--bank.is-done .faceid .face { opacity: 0; transition: opacity .2s; }
.app-screen--bank.is-done .faceid .tick { stroke-dashoffset: 0; transition: stroke-dashoffset .6s ease .15s; }
.app-screen--bank.is-done .faceid path:first-child { stroke: #7ee0a5; transition: stroke .4s; }
.auth p { margin: 10px 0 0; font-size: 12px; }
.auth-done { display: none; color: #9ff0be; font-weight: 600; font-size: 14px !important; }
.app-screen--bank.is-done .auth-wait { display: none; }
.app-screen--bank.is-done .auth-done { display: block; animation: storyIn .5s ease both; }
.bank-summary { border-radius: 14px; padding: 4px 13px; background: #ffffff10; border: 1px solid #ffffff1c; }
.bank-summary div { display: flex; justify-content: space-between; gap: 8px; padding: 9px 0; font-size: 9.5px; border-bottom: 1px solid #ffffff14; }
.bank-summary div:last-child { border: 0; }
.bank-summary span { color: #9ebbd0; }
.app-cta--light { margin-top: auto; background: #ffffff; color: #0b3352; box-shadow: none; opacity: .35; pointer-events: none; transition: opacity .5s; }
.app-screen--bank.is-done .app-cta--light { opacity: 1; pointer-events: auto; }
.app-cta--light:hover { background: #e7f3fb; }

/* tocco simulato durante la demo automatica */
.tap { position: absolute; z-index: 9; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #ffffff66; border: 2px solid #ffffffcc; box-shadow: 0 0 0 6px #ffffff22; opacity: 0; transform: scale(.4); pointer-events: none; }
.tap.is-on { animation: tap .65s ease-out forwards; }
@keyframes tap { 0% { opacity: 0; transform: scale(1.4); } 35% { opacity: 1; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.5); } }


.direct-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: 65px; }
.direct-steps button { position: relative; display: flex; text-align: left; gap: 14px; border: 0; border-top: 1px solid #43627b; background: transparent; color: #fff; padding: 22px 0 20px; }
.direct-steps button > span { font: 26px var(--serif); color: #6c97b2; }
.direct-steps strong { font-size: 13px; font-weight: 500; color: #b7cede; display: block; margin: 4px 0 9px; }
.direct-steps small { font-size: 10px; line-height: 1.7; color: #8cadc3; display: block; max-width: 235px; }
.direct-steps i { height: 2px; width: 0; background: #7dd4f7; position: absolute; top: -1px; left: 0; transition: width .6s; }
.direct-steps .active i { width: 100%; }
.direct-steps .active > span { color: #7dd4f7; }
.direct-steps .active strong { color: #fff; }
.direct-bottom { display: flex; justify-content: space-between; gap: 40px; align-items: flex-start; border-top: 1px solid #31536e; padding-top: 15px; }
.direct-bottom > span { font-size: 9px; color: #6e9bb7; padding-top: 8px; }
.pay-explainer { max-width: 550px; width: 50%; }
.pay-explainer summary { font-size: 11px; padding: 4px 0; cursor: pointer; color: #bfdbea; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.pay-explainer summary::-webkit-details-marker { display: none; }
.pay-explainer summary span { font-size: 20px; color: #78bde0; transition: transform .3s; }
.pay-explainer[open] summary span { transform: rotate(45deg); }
.pay-explainer p { font-size: 11px; line-height: 1.8; color: #a8c5d7; }

/* ---------- Prova e integrazione ---------- */
.trywrap { padding: 70px 5%; max-width: 1200px; margin: auto; }
.try { padding: 62px 65px; background: linear-gradient(115deg, #086ca8, #1398cc); color: #fff; border-radius: 15px; display: flex; align-items: center; justify-content: space-between; gap: 35px; position: relative; overflow: hidden; }
.try::before { content: ''; position: absolute; inset: 0; opacity: .11; background: repeating-linear-gradient(90deg, transparent 0 78px, #b7e5ff 78px 81px), repeating-linear-gradient(0deg, transparent 0 78px, #b7e5ff 78px 81px); -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); }
.try > * { position: relative; }
.try h2 { font-size: 40px; max-width: 510px; margin: 0; }
.integration { max-width: 1090px; padding: 25px 5% 100px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.integration h2 { font-size: 33px; }
.integration p { font-size: 14px; color: var(--muted); }
.integration-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 22px; }
.integration-links .textlink { margin-top: 0; }
.flow { display: flex; align-items: center; gap: 15px; }
.kipo { font: bold 47px var(--sans); color: #e98432; }
.flowline { flex: 1; height: 1px; background: #c7cec0; position: relative; }
.flowline::after { content: ''; position: absolute; height: 7px; width: 7px; border-radius: 50%; background: var(--brand); top: -3px; animation: flow 3s infinite; }
@keyframes flow { from { left: 0; } to { left: 100%; } }
.flow img { width: 135px; }
.flowlabels { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 25px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer); color: #d6e5ef; padding: 65px 6% 25px; }
.footergrid { max-width: 1150px; margin: auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 56px; }
.footerbrand img { width: 235px; }
.footerbrand p { font-size: 12px; line-height: 1.9; max-width: 350px; color: #aac3d5; }
.socials { display: flex; gap: 19px; font-size: 11px; color: #bfd9e8; margin-top: 22px; }
.footerlinks h2 { font: 600 11px var(--sans); letter-spacing: 1.5px; margin: 0 0 20px; color: #fff; }
.footerlinks ul { list-style: none; margin: 0; padding: 0; }
.footerlinks a { display: block; font-size: 12px; margin: 9px 0; color: #b6ccdc; }
.footerlinks a:hover, .socials a:hover { color: #fff; }
.certs { max-width: 1150px; margin: 35px auto 0; display: flex; gap: 20px; align-items: stretch; border-top: 1px solid #31516b; padding-top: 25px; }
.cert { padding: 17px 20px; border: 1px solid #476b86; border-radius: 5px; font-size: 10px; display: flex; align-items: center; gap: 15px; }
.cert strong { font: 19px var(--serif); color: #fff; white-space: nowrap; }
.cert small { display: inline-block; margin-top: 7px; color: #9bb6c9; font-size: 9px; }
.bottom { max-width: 1150px; margin: 30px auto 0; font-size: 10px; display: flex; justify-content: space-between; align-items: center; color: #9eb8cb; }
.bottom > a:last-child { display: flex; align-items: center; gap: 13px; }
.softimelogo { width: 90px; height: auto; }

/* ---------- Dialog ---------- */
dialog { border: 1px solid #d1d7c9; border-radius: 16px; padding: 35px; background: var(--paper); max-width: 550px; width: 90%; color: var(--ink); }
dialog::backdrop { background: #0d2b44d9; backdrop-filter: blur(6px); }
dialog h2 { font-size: 32px; }
dialog .close { float: right; border: 0; background: none; font-size: 25px; color: var(--ink); }
#video-dialog { max-width: 900px; }
#video-dialog h2 { font-size: 28px; }
#video-dialog video { width: 100%; background: var(--footer); border-radius: 8px; }

/* ---------- Comparsa allo scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s, transform .8s; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Pagine interne ---------- */
.navlinks a[aria-current="page"] { color: var(--brand); }
.page-hero { max-width: 1200px; margin: auto; padding: 150px 5% 70px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.page-hero h1 { font-size: clamp(42px, 4.4vw, 64px); letter-spacing: -2.2px; margin: 22px 0; }
.page-hero .lead { font-size: 18px; line-height: 1.75; color: var(--muted); max-width: 520px; }
.breadcrumb { font-size: 12px; color: var(--muted); margin: 0 0 26px; }
.breadcrumb a { color: var(--brand); }
.breadcrumb span { margin: 0 8px; opacity: .6; }

/* vetrina scura riutilizzabile, stesso linguaggio del palazzo e di PayByBank */
.showcase { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 26px; color: #fff;
  background: radial-gradient(ellipse at 55% 36%, #21608a 0, #143d5c 42%, #0d2840 100%);
  box-shadow: 0 50px 90px -40px #0b2236cc, inset 0 1px 0 #ffffff2e, inset 0 0 0 1px #ffffff14; }
.showcase::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .07;
  background: repeating-linear-gradient(90deg, transparent 0 63px, #b7e5ff 63px 64px), repeating-linear-gradient(0deg, transparent 0 63px, #b7e5ff 63px 64px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 75%); }
.showcase::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, #ffffff17 0%, #ffffff05 22%, transparent 34%); }
.showcase .tiny { color: #8fc3e3; }

.section { max-width: 1200px; margin: auto; padding: 70px 5%; }
.section-head { max-width: 640px; margin-bottom: 46px; }
.section-head h2 { margin: 18px 0 14px; }
.section-head p { color: var(--muted); font-size: 16px; line-height: 1.8; }

/* Domande frequenti e riquadro per gli amministratori (Come funziona) */
.faq { display: grid; gap: 12px; }
.faq-item { background: #fff; border: 1px solid #dce6ee; border-radius: 14px; transition: border-color .2s, box-shadow .2s; }
.faq-item[open] { border-color: #b9d6e8; box-shadow: 0 16px 34px -28px #18476e66; }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 24px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 14px; }
.faq-item summary span { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #e8f2fa; color: var(--brand); font-size: 20px; font-weight: 400; transition: transform .3s; }
.faq-item[open] summary span { transform: rotate(45deg); }
.faq-item p { margin: 0; padding: 0 24px 22px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.admin-box { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 46px 50px; border-radius: 24px; color: #fff; background: radial-gradient(ellipse at 85% 20%, #1b4b6b 0, transparent 60%), var(--night); }
.admin-box .eyebrow { color: #7fc9ee; }
.admin-box .eyebrow::before { background: #7fc9ee; }
.admin-box h2 { color: #fff; font-size: 40px; margin: 16px 0 14px; }
.admin-box h2 em { color: #72c9f0; font-style: normal; }
.admin-box p { margin: 0; color: #bbd3e2; font-size: 15px; line-height: 1.8; }
.admin-box-actions { display: grid; gap: 18px; justify-items: start; }
.admin-box .btn { background: #fff; color: var(--brand); border-color: #fff; }
.admin-box .textlink { color: #9fd8f3; border-color: #9fd8f340; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.prose-block p { color: var(--muted); font-size: 16px; line-height: 1.85; margin: 0 0 18px; }

.channels { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.channel h3 { font-size: 28px; margin: 24px 0 8px; }
.channel p { color: var(--muted); margin: 0 0 18px; }
.channel .stores { margin-top: 0; }

/* schede funzioni */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature { position: relative; padding: 30px 28px; background: #fff; border: 1px solid #dce6ee; border-radius: 18px; box-shadow: 0 20px 40px -30px #18476e40; transition: transform .35s, box-shadow .35s; }
.feature:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -30px #18476e66; }
.feature-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #0a8fd0, #0772ab); box-shadow: 0 10px 22px -8px #087fbd99, inset 0 1px 0 #ffffff55; }
.feature-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature h3 { font-size: 24px; margin: 22px 0 10px; }
.feature p { color: var(--muted); font-size: 14px; line-height: 1.75; margin: 0; }
.feature .tag-new { position: absolute; top: 24px; right: 24px; font-size: 9px; letter-spacing: 1.5px; color: #0a7cc0; background: #e3f1fa; border-radius: 20px; padding: 4px 9px; }

/* numeri */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stat { padding: 26px 24px; border-radius: 18px; background: #ffffff0d; border: 1px solid #ffffff1f; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.stat strong { display: block; font: 46px/1 var(--serif); letter-spacing: -1.5px; color: #fff; }
.stat strong small { font-size: 26px; color: #7dd4f7; }
.stat span { display: block; margin-top: 12px; font-size: 12px; color: #9fbfd4; line-height: 1.5; }
.showcase-quote { margin: 24px 4px 4px; font: 22px/1.4 var(--serif); color: #e6f3fb; }
.showcase-quote small { display: block; margin-top: 10px; font: 11px var(--sans); letter-spacing: 2px; color: #7dd4f7; text-transform: uppercase; }

/* certificazioni */
.cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cert-card { padding: 26px 22px; background: #fff; border: 1px solid #dce6ee; border-radius: 18px; text-align: center; }
.cert-card img { width: 92px; height: 92px; object-fit: contain; }
.cert-card h3 { font: 600 15px/1.35 var(--sans); margin: 16px 0 6px; }
.cert-card p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.6; }
.cert-card small { display: block; margin-top: 10px; font-size: 10px; letter-spacing: .5px; color: #7c98ab; }

/* testo lungo (privacy) */
.prose { max-width: 1200px; margin: auto; padding: 150px 5% 70px; }
.prose h1 { font-size: clamp(40px, 4vw, 56px); letter-spacing: -2px; margin: 20px 0 30px; }
.prose p { font-size: 17px; line-height: 1.9; color: #3c5b73; margin: 0 0 20px; }
.prose h2 { font-size: 30px; letter-spacing: -.5px; margin: 46px 0 16px; }
.prose ul { margin: 0 0 20px; padding-left: 22px; }
.prose li { font-size: 17px; line-height: 1.8; color: #3c5b73; margin-bottom: 10px; }
.prose li strong { color: var(--ink); font-weight: 600; }
.prose .note { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.prose .links { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 30px; }

/* ---------- Schermate dell'app (anteprime illustrative in Come funziona) ---------- */
/* La schermata desktop è disegnata a 1280×880 e ridimensionata con --s (calcolato in main.js) */
.am-app, .am-m { --am-ink: #10304d; --am-muted: #5f7a8f; --am-line: #e1eaf2; --am-blue: #0a6fb0; }
.am-browser { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -30px #02101e99, 0 0 0 1px #ffffff26; }
.am-browserbar { display: flex; align-items: center; gap: 12px; height: 30px; padding: 0 14px; background: #e9f0f6; border-bottom: 1px solid #d7e3ec; }
.am-browserbar i { width: 9px; height: 9px; border-radius: 50%; background: #c7d5e1; }
.am-browserbar span { margin: 0 auto; padding: 3px 14px; border-radius: 6px; background: #fff; font-size: 10px; color: #6d8597; }
.am-viewport { position: relative; overflow: hidden; aspect-ratio: 1280 / 880; }
.am-app { position: absolute; left: 0; top: 0; width: 1280px; height: 880px; transform: scale(var(--s, .5)); transform-origin: 0 0;
  display: grid; grid-template-columns: 268px 1fr; background: #f3f7fb; color: var(--am-ink);
  font: 14px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; text-align: left; }
.am-app svg, .am-m svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.am-side { display: flex; flex-direction: column; padding: 20px 14px 14px; background: #fff; border-right: 1px solid var(--am-line); overflow: hidden; }
.am-side > img { width: 196px; margin: 4px 0 22px 6px; }
.am-label { margin: 0 6px 6px; font-size: 11px; color: var(--am-muted); }
.am-select { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #d9e4ee; border-radius: 9px; font-weight: 600; font-size: 13px; }
.am-select svg:first-child { width: 22px; height: 22px; color: var(--am-blue); }
.am-select svg:last-child { width: 14px; height: 14px; margin-left: auto; color: var(--am-muted); }
.am-swap { display: flex; align-items: center; gap: 8px; margin: 9px 8px 12px; font-size: 12px; color: var(--am-blue); }
.am-swap svg { width: 14px; height: 14px; }
.am-nav { display: flex; align-items: center; gap: 13px; padding: 6px 12px; border-radius: 8px; font-size: 13.5px; color: #23425c; }
.am-nav svg { width: 19px; height: 19px; color: #355a78; }
.am-nav.on { background: #e5f0fa; color: #0b5f97; font-weight: 600; box-shadow: inset 3px 0 #087fbd; }
.am-nav.on svg { color: #0b5f97; }
.am-nav b { margin-left: auto; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; background: #e0262b; color: #fff; font-size: 11px; }
.am-sec { margin: 11px 12px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 1px; color: #6d8597; text-transform: uppercase; }
.am-user { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 12px 6px 6px; border-top: 1px solid var(--am-line); }
.am-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--am-blue); color: #fff; font-size: 13px; font-weight: 600; }
.am-user strong { display: block; font-size: 13.5px; }
.am-user small { font-size: 11px; color: var(--am-muted); }
.am-user svg { width: 14px; height: 14px; margin-left: auto; color: var(--am-muted); }

.am-main { padding: 0 26px 20px; overflow: hidden; }
.am-top { display: flex; align-items: center; gap: 22px; height: 54px; margin: 0 -26px 20px; padding: 0 26px; border-bottom: 1px solid var(--am-line); font-size: 12.5px; }
.am-top u { color: var(--am-muted); }
.am-top i { margin: 0 8px; font-style: normal; color: #a7b8c6; }
.am-top svg { width: 22px; height: 22px; color: #355a78; }
.am-top .am-avatar { width: 34px; height: 34px; font-size: 12px; }
.am-top > :nth-child(2) { margin-left: auto; }
.am-hello { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.am-hello h3 { margin: 0 0 4px; font: 700 30px/1.1 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; letter-spacing: -.6px; color: #0f2f4d; }
.am-hello p { margin: 0; font-size: 15px; color: #3d5a72; }
.am-hello small { font-size: 12px; color: var(--am-muted); }
.am-card { background: #fff; border: 1px solid var(--am-line); border-radius: 14px; padding: 16px 18px; box-shadow: 0 1px 2px #0f2f4d0d; }
.am-card h4 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 12px; font-size: 16.5px; font-weight: 700; }
.am-card h4 a, .am-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--am-blue); }
.am-card h4 a svg, .am-link svg { width: 14px; height: 14px; }
.am-bldg { position: relative; display: flex; align-items: center; gap: 16px; height: 92px; margin-bottom: 14px; overflow: hidden; }
.am-bldg > svg { width: 30px; height: 30px; padding: 16px; box-sizing: content-box; border-radius: 50%; background: #eaf3fa; color: var(--am-blue); }
.am-bldg strong { display: block; font-size: 15.5px; letter-spacing: .2px; }
.am-bldg span { font-size: 14px; color: #3d5a72; }
.am-bldg .am-photo { position: absolute; right: 0; top: 0; height: 100%; width: 420px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
.am-row { display: grid; gap: 14px; margin-bottom: 14px; }
.am-row--a { grid-template-columns: 1.68fr 1fr; }
.am-row--b { grid-template-columns: 1.27fr 1fr; }
.am-alert { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 10px; background: #fde9e9; }
.am-alert > i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: #e0262b; color: #fff; font: 700 20px/1 Arial, sans-serif; font-style: normal; }
.am-alert strong { display: block; font-size: 18px; color: #c4161c; }
.am-alert span, .am-pay span { font-size: 12.5px; color: #3d5a72; }
.am-pay { display: flex; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--am-line); }
.am-pay > svg { width: 28px; height: 28px; padding: 14px; box-sizing: content-box; border-radius: 50%; background: #eaf3fa; color: var(--am-blue); }
.am-pay strong { display: block; font-size: 14.5px; }
.am-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 16px; border-radius: 8px; background: var(--am-blue); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 6px 14px -6px #0a6fb0aa; }
.am-btn svg { width: 14px; height: 14px; }
.am-pay .am-btn, .am-m .am-btn { color: #fff; font-size: 13px; }
.am-empty { display: grid; justify-items: center; text-align: center; padding-top: 4px; }
.am-empty > svg { width: 64px; height: 64px; color: #7fb3d9; stroke-width: 1.3; }
.am-empty strong { margin-top: 8px; font-size: 14px; }
.am-empty span { font-size: 12.5px; color: #3d5a72; margin-bottom: 10px; }
.am-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.am-tile { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--am-line); border-radius: 10px; }
.am-tile > svg { width: 28px; height: 28px; color: var(--am-blue); }
.am-tile > svg:last-child { width: 13px; height: 13px; margin-left: auto; color: #355a78; }
.am-tile strong { display: block; font-size: 13.5px; }
.am-tile span { font-size: 11px; color: var(--am-muted); }
.am-msg { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.am-msg + .am-msg { border-top: 1px solid var(--am-line); }
.am-msg > svg { width: 26px; height: 26px; color: var(--am-blue); }
.am-msg strong { font-size: 13.5px; font-weight: 600; }
.am-msg span { display: block; font-size: 11.5px; color: var(--am-muted); }
.am-msg > svg:last-child { width: 22px; height: 22px; margin-left: auto; color: #2e9b4f; }
.am-data { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; font-size: 13.5px; }
.am-data small { display: block; font-size: 11.5px; color: var(--am-muted); }
.am-data p { margin: 0 0 10px; }
.am-admin { display: flex; align-items: center; gap: 22px; }
.am-admin svg.logo { width: 150px; height: auto; stroke: none; }
.am-admin div { padding-left: 22px; border-left: 1px solid var(--am-line); font-size: 13px; color: #3d5a72; }
.am-admin strong { display: block; font-size: 14px; color: var(--am-ink); }
.am-foot { display: flex; justify-content: flex-end; margin-top: 2px; }
.am-note { font-size: 10.5px; color: var(--am-muted); }

/* tabella rate (schermata Situazione e rate) */
.am-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.am-kpi small { display: block; font-size: 12px; color: var(--am-muted); }
.am-kpi strong { display: block; margin-top: 4px; font-size: 26px; letter-spacing: -.5px; }
.am-kpi.bad strong { color: #c4161c; }
.am-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.am-table th { padding: 8px 10px; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--am-muted); border-bottom: 1px solid var(--am-line); }
.am-table td { padding: 11px 10px; border-bottom: 1px solid var(--am-line); }
.am-table td:last-child, .am-table th:last-child { text-align: right; }
.am-check { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #b9cbd9; color: #fff; font-size: 11px; vertical-align: middle; }
.am-check.on { background: var(--am-blue); border-color: var(--am-blue); }
.am-pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }
.am-pill.bad { background: #fde9e9; color: #c4161c; }
.am-pill.ok { background: #e3f3e8; color: #2a7d43; }
.am-pill.next { background: #fdf1d9; color: #946414; }
.am-paybar { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(135deg, #0b3b5e, #0a5c92); color: #fff; }
.am-paybar span { font-size: 13px; color: #bfe0f5; }
.am-paybar strong { display: block; font-size: 20px; color: #fff; }
.am-paybar .am-btn { margin: 0; background: #fff; color: #0a4f80; font-size: 13px; box-shadow: none; }

/* versione mobile dentro il telefono */
.am-m { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 48px 14px 0; background: #f3f7fb; color: #10304d; font: 12px/1.35 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; text-align: left; }
.am-m .statusbar { color: #0f2235; }
.am-m .statusbar svg { fill: currentColor; }
.am-m-top { display: flex; align-items: center; gap: 12px; }
.am-m-top img { width: 112px; height: auto; }
.am-m-top svg { width: 19px; height: 19px; margin-left: auto; color: #355a78; }
.am-m-top .am-avatar { width: 28px; height: 28px; font-size: 10px; }
.am-m h3 { margin: 14px 0 2px; font: 700 21px/1.1 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; letter-spacing: -.4px; color: #0f2f4d; }
.am-m > p { margin: 0 0 10px; font-size: 11px; color: #3d5a72; }
.am-m .am-select { padding: 7px 10px; font-size: 11.5px; background: #fff; }
.am-m .am-select svg:first-child { width: 18px; height: 18px; }
.am-m .am-card { margin-top: 10px; padding: 12px; border-radius: 12px; }
.am-m .am-card h4 { font-size: 13px; margin-bottom: 8px; }
.am-m .am-alert { padding: 10px; gap: 10px; }
.am-m .am-alert > i { width: 30px; height: 30px; font-size: 15px; }
.am-m .am-alert strong { font-size: 14px; }
.am-m .am-alert span { font-size: 10px; }
.am-m .am-btn { display: flex; justify-content: center; margin-top: 10px; padding: 9px; font-size: 11.5px; }
.am-m .am-quick { gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.am-m .am-tile { min-width: 0; }
.am-m .am-tile { flex-direction: column; align-items: flex-start; gap: 6px; padding: 9px; }
.am-m .am-tile > svg { width: 20px; height: 20px; }
.am-m .am-tile strong { font-size: 11px; }
.am-m .am-tile span { font-size: 9px; }
.am-m-tabbar { display: flex; justify-content: space-around; margin: auto -14px 0; padding: 8px 0 18px; background: #ffffffe6; border-top: 1px solid #e1eaf2; font-size: 9px; color: #6d8597; }
.am-m-tabbar span { position: relative; display: grid; justify-items: center; gap: 3px; }
.am-m-tabbar svg { width: 19px; height: 19px; }
.am-m-tabbar .on { color: #0a6fb0; font-weight: 600; }
.am-m-tabbar b { position: absolute; top: -4px; right: -2px; min-width: 15px; height: 15px; border-radius: 8px; display: grid; place-items: center; background: #e0262b; color: #fff; font-size: 9px; }

/* impaginazione in Come funziona */
.mock-caption { margin: 12px 4px 0; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #8fc3e3; }
.channel .visual { display: grid; place-items: center; height: 620px; padding: 26px; border-radius: 22px; background: radial-gradient(ellipse at 50% 40%, #21608a 0, #143d5c 45%, #0d2840 100%); box-shadow: 0 40px 80px -40px #0b2236cc; overflow: hidden; }
.channel .visual .phone { --ry: -12deg; transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(.92); }
.channel .visual .am-browser { width: 100%; }

/* ---------- Accesso e recupero password ---------- */
.auth-layout { max-width: 1200px; margin: auto; padding: 140px 5% 90px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.auth-panel { max-width: 470px; }
.auth-panel h1 { font-size: clamp(40px, 4vw, 58px); letter-spacing: -2px; margin: 20px 0 14px; }
.auth-panel .lead { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0 0 26px; }
.auth-form { display: grid; gap: 18px; padding: 28px; background: #fff; border: 1px solid #dce6ee; border-radius: 20px; box-shadow: 0 30px 60px -40px #18476e66; }
.field label, .field-head label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.field-head { display: flex; justify-content: space-between; align-items: baseline; }
.field input { width: 100%; padding: 13px 14px; border: 1px solid #c9d9e5; border-radius: 10px; background: #f9fbfd; font: 16px var(--sans); color: var(--ink); transition: border-color .2s, box-shadow .2s, background .2s; }
.field input:hover { border-color: #9fbdd3; }
.field input:focus { outline: none; background: #fff; border-color: var(--brand); box-shadow: 0 0 0 4px #087fbd26; }
.field input:user-invalid { border-color: #d64545; box-shadow: 0 0 0 4px #d6454520; }
.field-toggle { border: 0; background: none; padding: 0; font-size: 12px; color: var(--brand); }
.field-hint { margin: 7px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.field-hint.is-warning { color: #946414; }
.check { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #3c5b73; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); }
.auth-submit { width: 100%; padding: 15px; font-size: 15px; }
.auth-submit:disabled { opacity: .7; cursor: progress; transform: none; box-shadow: none; }
.auth-form .textlink { justify-self: center; margin-top: 0; }
.auth-demo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding: 18px 4px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.auth-notice { margin: 0 0 18px; padding: 13px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; border: 1px solid #c9dceb; background: #eef6fc; color: #1d5379; }
.auth-notice.is-error { border-color: #f1c4c4; background: #fdeeee; color: #a3222a; }
.auth-notice.is-ok { border-color: #bfe2cb; background: #ecf8f0; color: #22683a; }
.auth-app { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: #fff7e6; border: 1px solid #f2dfb4; font-size: 13px; color: #7a5a17; }
.auth-app a { color: #8a5a00; font-weight: 600; text-decoration: underline; }
.auth-showcase { display: grid; justify-items: center; padding: 26px 26px 20px; }
.auth-showcase .tiny { justify-self: start; margin: 0 0 6px; }
.auth-phone .phone { --ry: -12deg; transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(.92); margin: -10px 0; }
.auth-message { max-width: 620px; margin: auto; padding: 170px 6% 110px; text-align: center; }
.auth-message h1 { font-size: clamp(38px, 4vw, 54px); letter-spacing: -2px; margin: 18px 0 16px; }
.auth-message .eyebrow { justify-content: center; }
.notfound-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.notfound-actions .btn { margin-top: 0; }
.auth-message p { color: var(--muted); line-height: 1.75; }
.auth-message .lead { font-size: 18px; color: #3c5b73; }
.auth-message .btn { margin-top: 18px; }
.auth-message-icon { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #0a8fd0, #0772ab); box-shadow: 0 16px 30px -12px #087fbd99, inset 0 1px 0 #ffffff55; }
.auth-message-icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-mini { display: flex; justify-content: center; padding: 34px 5% 0; }
.auth-mini img { width: 200px; height: auto; }
.auth-page--bare .auth-layout { padding-top: 50px; }
.auth-page--bare .auth-message { padding-top: 70px; }

/* ---------- Mobile ---------- */

/* ---------- Letture dei contatori ---------- */
.meterflow { --heat: #e8822a; --heat-dark: #b3470d; padding: 95px 6% 60px; overflow: hidden; background: radial-gradient(ellipse at 78% 40%, #fde9d6 0, transparent 52%), linear-gradient(180deg, #fff 0%, var(--paper) 100%); border-bottom: 1px solid var(--line); }
.mflow-inner { max-width: 1120px; margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.meterflow .eyebrow { color: var(--heat-dark); font-size: 10px; letter-spacing: 2px; }
.meterflow .eyebrow::before { background: var(--heat); }
.mflow-copy h2 { font-size: 60px; line-height: 1.06; letter-spacing: -2px; margin: 25px 0; }
.mflow-copy h2 em { font-style: normal; color: var(--heat); }
.mflow-copy > p { font-size: 15px; line-height: 1.85; color: var(--muted); max-width: 410px; }
.mflow-copy > p strong { color: var(--ink); font-weight: 600; }
.mflow-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; max-width: 410px; }
.mflow-points li { display: flex; gap: 14px; align-items: flex-start; }
.mflow-points li > span { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid #f3cfae; color: var(--heat-dark); font-size: 14px; }
.mflow-points strong { display: block; font-size: 14px; font-weight: 600; }
.mflow-points small { display: block; font-size: 12.5px; color: var(--muted); }
.mflow-note { display: block; margin-top: 26px; font-size: 10px; letter-spacing: .4px; color: #8a9cab; }

/* La scena: contatore, lettura nell'app, amministratore */
.mflow-stage { position: relative; width: 540px; height: 470px; justify-self: center; }
.mflow-halo { position: absolute; left: 30px; top: 0; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, #ffd2a8 0, #ffe7d200 70%); filter: blur(6px); }

.dial { position: absolute; left: 10px; top: 10px; width: 250px; height: 250px; border-radius: 50%; padding: 12px; background: linear-gradient(145deg, #f7f9fb, #b8c4ce 45%, #e9eef2 70%, #9aa8b4); box-shadow: 0 30px 50px -28px #0f2f4d88, inset 0 0 0 1px #ffffffaa; }
.dial-face { position: relative; height: 100%; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 10px; background: radial-gradient(circle at 35% 30%, #ffffff, #eef2f5 60%, #dfe6ec); box-shadow: inset 0 6px 14px #0f2f4d22; overflow: hidden; }
.dial-brand { font-size: 9px; letter-spacing: 2.5px; color: #6c7f8f; font-weight: 600; }
.dial-serial { font-size: 8.5px; letter-spacing: 1px; color: #8a9cab; }
.odometer { display: flex; gap: 3px; padding: 6px 7px; border-radius: 7px; background: #1a2733; box-shadow: inset 0 2px 6px #000a, 0 1px 0 #fff; }
.odo { position: relative; width: 22px; height: 30px; overflow: hidden; border-radius: 3px; background: linear-gradient(180deg, #2c3b48, #f3f5f7 18%, #fff 50%, #f3f5f7 82%, #2c3b48); }
.odo b { display: block; font: 700 21px/30px ui-monospace, Menlo, Consolas, monospace; color: #17232e; text-align: center; }
.odo-red { background: linear-gradient(180deg, #5b1010, #fff1f0 18%, #fff 50%, #fff1f0 82%, #5b1010); }
.odo-red b { color: #c4161c; }
.odo-comma { align-self: flex-end; margin: 0 -1px; font: 700 18px/1 Georgia, serif; color: #fff; }
.odo .strip { display: flex; flex-direction: column; }
.odo .strip i { font-style: normal; height: 30px; }
.odo-fast .strip { animation: odoRoll 4s linear infinite; }
@keyframes odoRoll { to { transform: translateY(-300px); } }
.dial-wheel { position: absolute; right: 52px; bottom: 44px; width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(var(--heat) 0 12.5%, #fff 0 25%, var(--heat) 0 37.5%, #fff 0 50%, var(--heat) 0 62.5%, #fff 0 75%, var(--heat) 0 87.5%, #fff 0); box-shadow: 0 0 0 2px #c8d3dc; animation: wheel 1.6s linear infinite; }
@keyframes wheel { to { transform: rotate(360deg); } }
.dial-scan { position: absolute; left: 22%; right: 22%; top: 47%; height: 46px; margin-top: -23px; border-radius: 10px; border: 2px solid var(--heat); box-shadow: 0 0 0 6px #e8822a26, 0 0 24px #e8822a66; opacity: 0; }

.send-card { position: absolute; left: 140px; top: 236px; width: 262px; padding: 16px; border-radius: 18px; background: #fff; box-shadow: 0 30px 60px -28px #0f2f4d99, 0 0 0 1px #e3ebf2; }
.send-head { display: flex; align-items: center; gap: 10px; }
.send-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, var(--heat), var(--heat-dark)); color: #fff; font-size: 17px; }
.send-head strong { display: block; font: 600 14px/1.2 var(--sans); }
.send-head small { display: block; font-size: 10.5px; color: var(--muted); }
.send-display { position: relative; margin-top: 12px; padding: 9px 14px; border-radius: 11px; background: linear-gradient(180deg, #13263a, #0c1a28); box-shadow: inset 0 2px 6px #000a; text-align: right; font: 700 26px/1.1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 2px; color: #7cf0b2; }
.send-typed { display: inline-block; clip-path: inset(0 100% 0 0); }
.send-caret { display: inline-block; width: 2px; height: 24px; margin-left: 3px; vertical-align: -4px; background: #7cf0b2; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.send-usage { margin: 9px 2px 0; font-size: 11.5px; color: #2a7d43; opacity: 0; }
.send-usage b { font-weight: 700; }
.send-btn { position: relative; margin-top: 11px; height: 38px; border-radius: 10px; background: var(--heat); color: #fff; font-size: 12.5px; font-weight: 600; display: grid; place-items: center; overflow: hidden; }
.send-btn span { grid-area: 1 / 1; }
.send-btn-done { opacity: 0; }

.send-path { position: absolute; left: 392px; top: 152px; width: 110px; height: 110px; overflow: visible; }
.send-path path { fill: none; stroke-linecap: round; }
.send-track { stroke: #f3cfae; stroke-width: 2; stroke-dasharray: 3 6; }
.send-pulse { stroke: var(--heat); stroke-width: 4; stroke-dasharray: .18 1; stroke-dashoffset: .18; opacity: 0; filter: drop-shadow(0 0 4px #e8822a); }

.admin-card { position: absolute; right: 0; top: 38px; width: 236px; padding: 14px 15px; border-radius: 16px; background: #fff; box-shadow: 0 26px 50px -26px #0f2f4d88, 0 0 0 1px #e3ebf2; display: grid; grid-template-columns: auto 1fr; gap: 4px 11px; align-items: center; opacity: .35; transform: translateY(6px) scale(.97); }
.admin-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--brand), #0b3d66); color: #fff; font: 600 15px var(--serif); }
.admin-card strong { display: block; font: 600 13px/1.2 var(--sans); }
.admin-card small { display: block; font-size: 10.5px; color: var(--muted); }
.admin-row { grid-column: 1 / -1; position: relative; margin-top: 9px; padding: 9px 11px; border-radius: 10px; background: var(--paper); display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 600; }
.admin-row em { font-style: normal; font-size: 10.5px; padding: 2px 8px; border-radius: 99px; }
.admin-wait { background: #fdf1d9; color: #946414; }
.admin-ok { position: absolute; right: 11px; background: #e3f3e8; color: #2a7d43; opacity: 0; }

/* Sequenza in loop (12 s): lettura del contatore, scrittura, invio, conferma */
.meterflow.is-live .dial-scan { animation: mScan 12s infinite; }
.meterflow.is-live .send-typed { animation: mType 12s infinite; }
.meterflow.is-live .send-usage { animation: mShow 12s infinite; }
.meterflow.is-live .send-btn { animation: mPress 12s infinite; }
.meterflow.is-live .send-btn-idle { animation: mIdle 12s infinite; }
.meterflow.is-live .send-btn-done { animation: mDone 12s infinite; }
.meterflow.is-live .send-pulse { animation: mPulse 12s infinite; }
.meterflow.is-live .admin-card { animation: mAdmin 12s infinite; }
.meterflow.is-live .admin-wait { animation: mWait 12s infinite; }
.meterflow.is-live .admin-ok { animation: mOk 12s infinite; }
@keyframes mScan { 0%, 2% { opacity: 0; transform: scale(1.15); } 6%, 16% { opacity: 1; transform: scale(1); } 20%, 100% { opacity: 0; transform: scale(1); } }
@keyframes mType { 0%, 16% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(7, end); } 30%, 94% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes mShow { 0%, 31% { opacity: 0; transform: translateY(4px); } 34%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes mPress { 0%, 39% { transform: none; filter: none; } 40.5% { transform: scale(.95); filter: brightness(.9); } 42%, 94% { transform: none; background: #2a7d43; } 100% { background: var(--heat); } }
@keyframes mIdle { 0%, 41% { opacity: 1; } 42%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes mDone { 0%, 41% { opacity: 0; transform: translateY(8px); } 43%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes mPulse { 0%, 43% { opacity: 0; stroke-dashoffset: .18; } 44% { opacity: 1; } 55% { opacity: 1; stroke-dashoffset: -1; } 56%, 100% { opacity: 0; stroke-dashoffset: -1; } }
@keyframes mAdmin { 0%, 54% { opacity: .35; transform: translateY(6px) scale(.97); box-shadow: 0 26px 50px -26px #0f2f4d88, 0 0 0 1px #e3ebf2; } 58% { opacity: 1; transform: translateY(-4px) scale(1.03); box-shadow: 0 26px 50px -26px #0f2f4d88, 0 0 0 3px #e8822a55; } 62%, 94% { opacity: 1; transform: none; box-shadow: 0 26px 50px -26px #0f2f4d88, 0 0 0 1px #e3ebf2; } 100% { opacity: .35; transform: translateY(6px) scale(.97); } }
@keyframes mWait { 0%, 72% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes mOk { 0%, 73% { opacity: 0; transform: scale(.7); } 76% { opacity: 1; transform: scale(1.12); } 79%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.mflow-steps { list-style: none; max-width: 1120px; margin: 55px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mflow-steps li { display: flex; gap: 14px; padding: 18px 20px; border-radius: 14px; background: #ffffffb3; border: 1px solid var(--line); }
.mflow-steps span { font: 22px var(--serif); color: var(--heat); }
.mflow-steps strong { display: block; font-size: 14px; font-weight: 600; }
.mflow-steps small { display: block; font-size: 12px; color: var(--muted); }
.demo-safety--light { max-width: 1120px; margin: 18px auto 0; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: #9fb2c1; text-align: center; }

@media (max-width: 800px) {
  .meterflow { padding: 70px 6% 50px; }
  .mflow-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .mflow-copy h2 { font-size: 44px; }
  .mflow-stage { justify-self: start; margin-left: calc(50% - 270px); transform: scale(var(--mflow-scale, .8)); transform-origin: top center; margin-bottom: calc(470px * (var(--mflow-scale, .8) - 1)); }
  .mflow-steps { grid-template-columns: 1fr; margin-top: 30px; }
  .site-header nav { height: 75px; }
  .logo { width: 175px; }
  .navlinks { display: none; }
  .hero { height: auto; max-height: none; min-height: 0; grid-template-columns: 1fr; padding: 125px 6% 80px; }
  h1 { font-size: 55px; }
  h2 { font-size: 42px; }
  .palazzo { max-width: 490px; width: 100%; justify-self: center; margin-top: 25px; }
  .pl-svg { height: auto; }
  .palazzo { padding: 16px 10px 14px; border-radius: 22px; }
  .buildingcaption { padding: 0 15px; }
  .floorchoices { margin-top: -6px; }
  .floorchoices button { padding: 10px 7px; font-size: 10px; }
  .floorstory { gap: 10px; }
  .floorstory p { font-size: 10px; }
  .buildingrail { display: none; }
  .herofoot { font-size: 8px; }
  .herofoot span:last-child { display: none; }
  .floor { grid-template-columns: 1fr; gap: 40px; padding: 56px 8%; }
  .admin-box { grid-template-columns: 1fr; gap: 26px; padding: 34px 26px; }
  .admin-box h2 { font-size: 32px; }
  .faq-item summary { padding: 16px 18px; font-size: 16px; }
  .faq-item p { padding: 0 18px 18px; }
  .page-hero { grid-template-columns: 1fr; gap: 40px; padding: 120px 6% 50px; }
  .section { padding: 48px 6%; }
  .two-col, .channels { grid-template-columns: 1fr; gap: 34px; }
  .feature-grid, .stats { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .prose { padding: 120px 6% 60px; }
  .auth-layout { grid-template-columns: 1fr; padding: 110px 6% 60px; gap: 40px; }
  .auth-panel { max-width: none; }
  .auth-form { padding: 22px 18px; }
  .auth-showcase { display: none; }
  .auth-message { padding: 120px 6% 70px; }
  .channel .visual { height: auto; padding: 18px; }
  .channel .visual .phone { transform: scale(.86); margin: -40px 0; }
  .floor .number { font-size: 240px; }
  .reverse .copy { order: 0; }
  .stage { max-width: 400px; width: 100%; margin: auto; }
  .directpay { padding: 55px 7%; }
  .direct-layout { grid-template-columns: 1fr; gap: 35px; }
  .direct-copy h2 { font-size: 51px; }
  .direct-copy > p { max-width: none; }
  .glass-card { display: none; }
  .phone { --ry: -10deg; }
  .direct-steps { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  .direct-steps button { padding: 17px 0; }
  .direct-steps small { max-width: none; }
  .direct-bottom { display: block; }
  .pay-explainer { width: 100%; margin-top: 15px; }
  .try { padding: 38px 25px; display: block; }
  .try h2 { font-size: 33px; margin-bottom: 25px; }
  .integration { grid-template-columns: 1fr; gap: 30px; }
  .footergrid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footerbrand { grid-column: 1 / -1; }
  .certs { flex-wrap: wrap; gap: 12px; }
  .cert { width: 100%; padding: 15px; }
  .bottom { flex-wrap: wrap; gap: 20px; }
  .store img { height: 39px; max-width: 135px; }
}

/* ---------- Movimento ridotto ---------- */
@media (max-width: 600px) {
  .mflow-stage { --mflow-scale: .58; }
  .mflow-copy h2 { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .send-typed { clip-path: none; }
  .send-usage, .admin-card, .send-btn-done { opacity: 1; transform: none; }
  .send-btn-idle { opacity: 0; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .progress span { width: 72%; }
  .pl-svg { transform: none; }
  .phone { transform: none; }
  .pl-svg .pl-drop, .pl-ground, .pl-tree, .pl-halo, .pl-sky { transform: none; opacity: 1; }
  .tourprogress, .tourpause { display: none; }
}
.am-app svg.am-photo, .am-app svg.logo { stroke: none; }

/* App per iOS e Android: l'intestazione scende sotto notch e barra di stato (sul web gli spazi valgono 0) */
.site-header { padding-top: env(safe-area-inset-top); }
.site-header nav { padding-left: max(5%, env(safe-area-inset-left)); padding-right: max(5%, env(safe-area-inset-right)); }
.auth-layout { padding-top: calc(140px + env(safe-area-inset-top)); }
.auth-page--bare .auth-layout { padding-top: calc(50px + env(safe-area-inset-top)); }
@media (max-width: 800px) { .auth-layout { padding-top: calc(110px + env(safe-area-inset-top)); } }
/* nell'app non si invita a scaricare l'app */
.is-native [data-app-banner] { display: none !important; }

/* ---------- App per iOS e Android: accesso e recupero password come schermate dell'app ----------
   is-native la mette assets/js/avvio.js prima che la pagina venga disegnata. Niente menu, vetrina e footer del sito:
   in alto il logo bianco sul blu notte dello splash (il passaggio dallo splash non si nota), sotto una scheda unica. */
.is-native .auth-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
.is-native .auth-page .skip-link,
.is-native .auth-page .navlinks,
.is-native .auth-page .site-header .btn,
.is-native .auth-page .auth-showcase,
.is-native .auth-page .eyebrow,
.is-native .auth-page .footergrid,
.is-native .auth-page .certs,
.is-native .auth-page .bottom > a:last-child { display: none; }
.is-native .auth-page .site-header { position: static; background: linear-gradient(165deg, #0f2f4d 0%, #0b4a78 100%); backdrop-filter: none; -webkit-backdrop-filter: none; padding: calc(env(safe-area-inset-top) + 30px) 0 74px; }
.is-native .auth-page .site-header nav { height: auto; justify-content: center; }
.is-native .auth-page .site-header nav > a { pointer-events: none; }  /* nell'app il logo non porta alla home del sito */
.is-native .auth-page .logo { content: url(../img/logo-white.png); width: 190px; }
.is-native .auth-page main { flex: 1; margin-top: -50px; position: relative; z-index: 11; }
.is-native .auth-page .auth-layout { display: block; padding: 0 16px 20px; }
.is-native .auth-page .auth-panel,
.is-native .auth-page .auth-message { max-width: 480px; margin: 0 auto; padding: 26px 20px 22px; background: #fff; border-radius: 22px; box-shadow: 0 24px 48px -30px #0f2f4d80; }
.is-native .auth-page .auth-message { margin: 0 16px; }
@media (min-width: 512px) { .is-native .auth-page .auth-message { margin: 0 auto; } }
.is-native .auth-page .auth-panel h1,
.is-native .auth-page .auth-message h1 { font-size: 30px; letter-spacing: -1px; margin: 0 0 8px; }
.is-native .auth-page .auth-panel .lead { font-size: 14px; line-height: 1.55; margin: 0 0 20px; }
.is-native .auth-page .auth-message .lead { font-size: 15px; }
.is-native .auth-page .auth-message-icon { width: 60px; height: 60px; border-radius: 18px; margin-bottom: 14px; }
.is-native .auth-page .auth-form { padding: 0; border: 0; border-radius: 0; box-shadow: none; gap: 16px; }
.is-native .auth-page .auth-submit,
.is-native .auth-page .auth-message .btn { border-radius: 12px; padding: 16px; font-size: 16px; }
.is-native .auth-page .auth-demo { flex-direction: column; align-items: stretch; text-align: center; gap: 10px; margin-top: 20px; padding: 18px 0 0; }
.is-native .auth-page .auth-demo .btn { border-radius: 12px; padding: 14px; }
.is-native .auth-page .site-footer { background: none; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); }
.is-native .auth-page .bottom { margin: 0; justify-content: center; gap: 16px; color: var(--muted); font-size: 11px; }
.is-native .auth-page .bottom a { color: var(--brand); }