:root{--mob-orange:var(--pgf-orange)}html{scroll-padding-top:95px}.mob-wrap{width:86%;max-width:1400px;margin:auto}.mob-hero{padding:60px 0 68px;background:radial-gradient(ellipse at 85% 40%,#246861,#1a4c47 65%);border-bottom:1px solid #ffffff12}.mob-kicker{font-size:10.5px;letter-spacing:.2em;color:var(--pgf-orange);-webkit-text-stroke:var(--pgf-accent-stroke);paint-order:stroke fill;font-weight:700;margin-bottom:25px}.mob-hero .mob-kicker{margin-top:75px}.mob-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:9%;align-items:center}.mob-intro h1{font-size:clamp(42px,5.3vw,82px);font-weight:600;line-height:1.08;letter-spacing:-.055em;margin:0}.mob-intro em,.mob-copy em,.mob-road em,.mob-cta em{font-style:normal;color:var(--pgf-orange);-webkit-text-stroke:var(--pgf-accent-stroke);paint-order:stroke fill}.mob-lead p{font-size:16px;line-height:1.9;color:#b1c1c9;max-width:490px}.mob-jump{display:flex;gap:15px;flex-wrap:wrap;margin-top:30px}.mob-jump a{padding:12px 14px;border:1px solid #75909d66;font-size:10.5px;border-radius:30px}.mob-jump a:hover{border-color:#ef6216;color:var(--pgf-orange);-webkit-text-stroke:var(--pgf-accent-stroke);paint-order:stroke fill}.mob-domains{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:55px 0 20px}.mob-domain{border:1px solid #23655e;background:linear-gradient(135deg,#205e58,#1c524d);display:flex;gap:25px;padding:34px;position:relative;align-items:center;transition:border-color .25s,transform .25s}.mob-domain:hover{border-color:#ef6216;transform:translateY(-4px)}.mob-domain>svg{width:94px;min-width:70px;flex-shrink:0;fill:none;stroke:#d2e0e7;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.mob-domain svg .accent{stroke:#ef6216}.mob-domain span,.mob-road-grid span{font-size:9.5px;letter-spacing:.15em;color:var(--pgf-orange);-webkit-text-stroke:var(--pgf-accent-stroke);paint-order:stroke fill}.mob-domain h2{font-size:25px;line-height:1.25;margin:15px 0 12px;letter-spacing:-.04em}.mob-domain p{font-size:12.5px;color:#aabcc5;line-height:1.8;margin:0;max-width:300px}.mob-domain>b{position:absolute;right:22px;top:20px;color:var(--pgf-orange);-webkit-text-stroke:var(--pgf-accent-stroke);paint-order:stroke fill;font-weight:400}.mob-feature{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center;padding:95px 0 110px}.mob-photo{margin:0;position:relative}.mob-photo img{width:100%;height:520px;object-fit:cover;display:block;border:1px solid #256b64}.mob-photo figcaption,.mob-police-photo figcaption{font-size:8.5px;letter-spacing:.12em;color:#8ca1ae;line-height:1.8;margin-top:14px}.mob-copy h2,.mob-road h2,.mob-cta h2{font-size:clamp(31px,3.2vw,49px);letter-spacing:-.05em;line-height:1.2;margin:0 0 30px}.mob-copy p{font-size:14px;color:#afc0c9;line-height:1.9}.mob-copy ul{list-style:none;padding:20px 0 0;margin:0}.mob-copy li{border-top:1px solid #1f5953;padding:15px 0 15px 18px;color:#cfdae0;font-size:12.5px;line-height:1.7;position:relative}.mob-copy li:before{content:'+';position:absolute;left:0;color:var(--pgf-orange);-webkit-text-stroke:var(--pgf-accent-stroke);paint-order:stroke fill}.mob-road{padding:95px 0;background:#1c524d;border-block:1px solid #1b4f4a}.mob-road-head{display:flex;justify-content:space-between;gap:55px;align-items:end;margin-bottom:45px}.mob-road-head p{max-width:350px;font-size:14px;color:#afc0c9;line-height:1.9;margin:0 0 30px}.mob-police-photo{margin:0}.mob-police-photo img{width:100%;height:540px;object-fit:cover;object-position:center;display:block;border:1px solid #256b64}.mob-road-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:50px}.mob-road-grid h3{font-size:21px;letter-spacing:-.03em;font-weight:500}.mob-road-grid p{color:#a8bcc6;font-size:13px;line-height:1.9}.mob-editorial-note{border-top:1px solid #ffffff15;margin:38px 0 0;padding-top:18px;font-size:10.5px;line-height:1.8;color:#869ba7;max-width:850px}.mob-cta{display:grid;grid-template-columns:1fr 1fr;gap:10%;padding:100px 0}.mob-cta p{font-size:14px;color:#b2c2ca;line-height:1.9;max-width:400px}.mob-cta a{display:inline-block;background:#ef6216;color:#111;padding:18px 23px;font-size:11.5px;font-weight:700;margin-top:14px}.mob-cta a.mob-secondary{display:block;background:none;color:#c4d2d9;padding:10px 0;font-weight:500}a:focus-visible{outline:2px solid #ef6216;outline-offset:5px}@media(max-width:1000px){.mob-intro{gap:5%}.mob-domain{padding:25px;gap:15px}.mob-domain>svg{width:70px;min-width:60px}.mob-domain h2{font-size:21px}.mob-feature{gap:5%}.mob-photo img{height:460px}}@media(max-width:760px){.mob-wrap{width:87%}.mob-hero{padding:35px 0 50px}.mob-hero .mob-kicker{margin-top:45px}.mob-intro,.mob-domains,.mob-feature,.mob-cta{grid-template-columns:1fr}.mob-intro{gap:20px}.mob-intro h1{font-size:48px}.mob-lead p{font-size:14px}.mob-domains{gap:13px;padding-top:30px}.mob-domain{padding:28px}.mob-feature{padding:60px 0;gap:35px}.mob-photo img{height:360px}.mob-road{padding:60px 0}.mob-road-head{display:block}.mob-road-head p{max-width:none}.mob-police-photo img{height:360px}.mob-road-grid{grid-template-columns:1fr;gap:20px;margin-top:35px}.mob-road-grid article{border-bottom:1px solid #ffffff12;padding-bottom:15px}.mob-road-grid h3{margin:12px 0}.mob-cta{gap:15px;padding:65px 0}.mob-domain h2{font-size:24px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mob-domain{transition:none}}
body{font-family:Montserrat,Arial,sans-serif}main a{text-decoration:none}.mob-domain:hover h2{color:var(--pgf-orange);-webkit-text-stroke:var(--pgf-accent-stroke);paint-order:stroke fill}
.mob-photo img{height:auto;aspect-ratio:16/10;object-fit:cover}.mob-police-photo img{object-position:center 45%}
/* Three mobility domains, including UHF tag access. */
.mob-domains{grid-template-columns:repeat(3,minmax(0,1fr))}.mob-domain{flex-direction:column;align-items:flex-start;padding:30px;gap:20px}.mob-domain>svg{width:140px;height:140px}.mob-domain h2{font-size:25px}.mob-uhf{padding:90px 0 110px;border-top:1px solid #ffffff12;background:radial-gradient(ellipse at 20% 50%,#23665f,#1a4c47 65%)}.mob-uhf-grid{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center}.mob-uhf-visual{padding:45px 25px;border:1px solid #246b64;background:linear-gradient(135deg,#22635daa,#1c514caa)}.mob-uhf-visual>svg{display:block;max-width:100%;width:350px;height:350px;margin:auto;fill:none;stroke:#c5d7e1;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.mob-uhf-visual svg .accent{stroke:#ef6216}.mob-uhf-flow{display:flex;justify-content:center;align-items:center;gap:12px;font-size:8.5px;letter-spacing:.07em;margin-top:25px;color:#c5d4dc;flex-wrap:wrap}.mob-uhf-flow i{font-style:normal;color:var(--pgf-orange);-webkit-text-stroke:var(--pgf-accent-stroke);paint-order:stroke fill;font-size:18px}@media(max-width:1000px){.mob-domain{padding:25px}.mob-domain h2{font-size:22px}.mob-uhf-visual{padding:25px 15px}.mob-uhf-visual>svg{height:auto}}@media(max-width:760px){.mob-domains,.mob-uhf-grid{grid-template-columns:1fr}.mob-domain{flex-direction:row;align-items:center;gap:22px}.mob-domain h2{font-size:23px}.mob-uhf{padding:60px 0}.mob-uhf-grid{gap:35px}.mob-uhf-visual>svg{width:260px}}
/* Keep domain icons prominent on smaller cards. */
@media(max-width:1000px){.mob-domain>svg{width:120px;height:120px}}@media(max-width:760px){.mob-domain>svg{width:112px;height:112px;min-width:112px}}@media(max-width:420px){.mob-domain{flex-direction:column;align-items:flex-start}.mob-domain>svg{width:128px;height:128px}}
/* Radio exchange stays aligned to the photograph at every viewport size. */
.uhf-live-photo{position:relative;isolation:isolate}.mob-uhf-photo .uhf-live-photo>img{height:auto;aspect-ratio:auto;width:100%;display:block}.uhf-radio-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden;fill:none;stroke-linecap:round}.uhf-link{stroke:#ffc77a;stroke-width:4;stroke-dasharray:5 13;opacity:.6}.uhf-send,.uhf-reply{stroke:#fff1bb;stroke-width:12;stroke-dasharray:16 84;animation:uhf-travel 4.8s linear infinite;filter:drop-shadow(0 0 6px #fff3c0) drop-shadow(0 0 15px #ff8b22) drop-shadow(0 0 25px #ff6b00)}.uhf-reply{stroke:#e5fcff;animation-delay:2.4s}.uhf-tag-ring,.uhf-reader-ring{stroke:#ffe2a0;stroke-width:6;filter:drop-shadow(0 0 10px #ff9b35);transform-box:fill-box;transform-origin:center;animation:uhf-ring 4.8s ease-out infinite}.uhf-tag-ring{animation-delay:1.65s}.uhf-tag-outline{stroke:#fff5cd;stroke-width:4;fill:#ffb34a33;filter:drop-shadow(0 0 9px #ffa032)}@keyframes uhf-travel{0%{stroke-dashoffset:100;opacity:0}5%{opacity:1}42%{stroke-dashoffset:0;opacity:1}47%,100%{stroke-dashoffset:0;opacity:0}}@keyframes uhf-ring{0%,50%,100%{transform:scale(.65);opacity:0}10%{opacity:.9}40%{transform:scale(1.9);opacity:0}}@media(prefers-reduced-motion:reduce){.uhf-radio-overlay *{animation:none}.uhf-send,.uhf-reply,.uhf-reader-ring,.uhf-tag-ring{display:none}}
.mob-integration a{color:var(--pgf-orange);-webkit-text-stroke:var(--pgf-accent-stroke);paint-order:stroke fill;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#ffb57680;font-weight:600}.mob-integration a:hover{color:var(--pgf-orange);-webkit-text-stroke:var(--pgf-accent-stroke);paint-order:stroke fill;text-decoration-color:currentColor}
/* LPR demonstration: aligned plate, scanning beam and enlarged recognition result. */
.lpr-live-photo{position:relative;isolation:isolate}.mob-lpr-photo .lpr-live-photo>img{width:100%;height:auto;aspect-ratio:auto;display:block}.lpr-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;overflow:hidden}.lpr-plate{fill:#f5f3eb;stroke:#16413d;stroke-width:1}.lpr-plate-text{fill:#0e2a27;stroke:none;font:700 18px Arial,sans-serif;letter-spacing:1px}.lpr-scan{stroke:#fff7ba;stroke-width:7;filter:drop-shadow(0 0 7px #ff8b22);animation:lpr-scan 4.8s linear infinite}.lpr-target{stroke:#ffe2a0;stroke-width:5;filter:drop-shadow(0 0 8px #ff9b35);animation:lpr-target 4.8s ease-in-out infinite}.lpr-camera-ring{stroke:#ffe2a0;stroke-width:5;transform-box:fill-box;transform-origin:center;animation:uhf-ring 4.8s ease-out infinite;filter:drop-shadow(0 0 10px #ff9b35)}.lpr-readout{position:absolute;left:14px;bottom:14px;min-width:150px;padding:12px 16px;background:#194a45e8;border:1px solid #ffba6c99;box-shadow:0 0 22px #ff9a3322;color:#ffe7ba;display:grid;gap:5px}.lpr-readout-label{font-size:8.5px;font-weight:600;letter-spacing:.14em}.lpr-readout strong{font:700 clamp(18px,2vw,26px) monospace;letter-spacing:.08em;color:#fff4dd}.lpr-reading,.lpr-detected{font-size:9.5px;grid-area:3/1}.lpr-reading{animation:lpr-reading 4.8s steps(1) infinite}.lpr-detected{color:#c9f6df;animation:lpr-detected 4.8s steps(1) infinite}@keyframes lpr-scan{0%,18%{transform:translateY(0);opacity:0}20%{opacity:1}43%{transform:translateY(25px);opacity:1}46%,100%{transform:translateY(25px);opacity:0}}@keyframes lpr-target{0%,15%{opacity:.3}40%,88%{opacity:1}100%{opacity:.3}}@keyframes lpr-reading{0%{opacity:1}48%,100%{opacity:0}}@keyframes lpr-detected{0%{opacity:0}48%,95%{opacity:1}100%{opacity:0}}@media(prefers-reduced-motion:reduce){.lpr-overlay *,.lpr-readout *{animation:none}.lpr-overlay .uhf-send,.lpr-scan,.lpr-camera-ring,.lpr-reading{display:none}.lpr-detected{opacity:1}}@media(max-width:420px){.lpr-readout{left:9px;bottom:9px;min-width:125px;padding:9px 11px}}
/* Match the home Competenze grid and use its gutters for the photos. */
main { --mobility-gutter: 8%; }
main .mob-wrap {
width: calc(100% - 2 * var(--mobility-gutter));
max-width: none;
}
.mob-domains { gap: 15px; }
.mob-domains .mob-domain { min-height: 490px; }
.mob-domains .mob-domain > svg {
width: clamp(152px, 16vw, 224px);
height: clamp(152px, 16vw, 224px);
max-width: 100%;
align-self: center;
}
@media (max-width: 900px) {
main { --mobility-gutter: 7%; }
.mob-domains { grid-template-columns: 1fr; }
.mob-domains .mob-domain {
min-height: 390px;
flex-direction: column;
align-items: flex-start;
}
.mob-domains .mob-domain > svg {
width: clamp(150px, 30vw, 200px);
height: clamp(150px, 30vw, 200px);
}
}
@media (max-width: 560px) {
main { --mobility-gutter: 6%; }
}
/* Full-width access scenes. The image and SVG share the same crop. */
.mob-scene {
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--bg);
}
.mob-scene + .mob-scene {
background: color-mix(in srgb, var(--bg) 92%, var(--pane, #182531));
border-top: 1px solid #8798a44d;
}
.mob-scene .mob-photo {
position: absolute;
inset: 0 0 0 24%;
--scene-fade: linear-gradient(90deg, transparent 7%, #0001 20%, #0006 31%, #000 50%);
}
.mob-scene .lpr-live-photo,
.mob-scene .uhf-live-photo { height: 100%; }
/* Mirror the photo and radio overlay together so the signal stays on the tag. */
.mob-scene .uhf-live-photo { transform: scaleX(-1); }
.mob-scene .mob-photo .lpr-live-photo > img,
.mob-scene .mob-photo .uhf-live-photo > img {
height: 100%;
object-fit: cover;
object-position: center;
border: 0;
}
.mob-scene .mob-photo img,
.mob-scene .mob-photo svg {
-webkit-mask-image: var(--scene-fade);
mask-image: var(--scene-fade);
}
.mob-scene .mob-scene-content {
position: relative;
z-index: 1;
display: flex;
align-items: center;
min-height: 660px;
padding-block: 60px;
pointer-events: none;
}
.mob-scene .mob-copy {
width: 40%;
max-width: 460px;
pointer-events: auto;
}
.mob-scene .mob-copy h2 { margin-bottom: 20px; }
.mob-scene .mob-copy ul { padding-top: 10px; }
.mob-scene .mob-copy li {
padding-block: 10px;
border-color: #6a7f8c60;
}
.mob-scene .lpr-readout {
inset: auto clamp(14px, 3vw, 50px) 45px auto;
}
.mob-scene .mob-photo figcaption {
position: absolute;
inset: auto clamp(14px, 3vw, 50px) 14px auto;
margin: 0;
padding: 4px 8px;
border-radius: 3px;
background: color-mix(in srgb, var(--bg) 90%, transparent);
}
@media (min-width: 1100px) {
#accessi-privati.mob-scene .mob-photo { right: var(--mobility-gutter); }
#accessi-uhf.mob-scene .mob-photo { inset: 0 24% 0 var(--mobility-gutter); }
#accessi-uhf.mob-scene .mob-scene-content { justify-content: flex-end; }
#accessi-uhf.mob-scene figcaption {
inset-inline: clamp(14px, 3vw, 50px) auto;
}
}
@media (max-width: 1099px) {
.mob-scene .mob-photo {
position: relative;
inset: auto;
margin-inline: var(--mobility-gutter);
--scene-fade: linear-gradient(180deg, #000 72%, transparent 100%);
}
.mob-scene .lpr-live-photo,
.mob-scene .uhf-live-photo,
.mob-scene .mob-photo .lpr-live-photo > img,
.mob-scene .mob-photo .uhf-live-photo > img { height: auto; }
.mob-scene .mob-scene-content {
min-height: 0;
padding-block: 22px 56px;
}
.mob-scene .mob-copy { width: 100%; max-width: 660px; }
.mob-scene .lpr-readout { bottom: 34px; }
.mob-scene .mob-photo figcaption { bottom: 2px; }
}
/* Fade the roadside photo into its heading and surrounding content. */
.mob-road-scene {
padding-top: 68px;
border-top: 0;
}
.mob-road-scene .mob-road-head {
position: relative;
z-index: 1;
margin-bottom: 0;
}
.mob-road-scene .mob-road-head h2 { margin-bottom: 0; }
.mob-road-scene .mob-road-head p { margin-bottom: 6px; }
.mob-road-scene .mob-police-photo { margin: -92px auto 0; }
.mob-road-scene .mob-police-photo img {
height: auto;
border: 0;
--road-fade: linear-gradient(180deg, transparent 3%, #0003 15%, #000 31%, #000 86%, transparent 100%);
-webkit-mask-image: var(--road-fade);
mask-image: var(--road-fade);
}
.mob-road-scene .mob-police-photo figcaption {
position: relative;
margin-top: -16px;
}
.mob-road-scene .mob-road-grid { margin-top: 36px; }
@media (max-width: 760px) {
.mob-road-scene { padding-top: 42px; }
.mob-road-scene .mob-road-head p { margin-top: 18px; }
.mob-road-scene .mob-police-photo { margin-top: -25px; }
.mob-road-scene .mob-police-photo img {
--road-fade: linear-gradient(180deg, transparent 2%, #000 24%, #000 83%, transparent 100%);
}
}
.mob-road-scene { background: var(--bg); }