html{
 scroll-behavior: smooth;
 -webkit-text-size-adjust: 100%;
 }

 body{
 margin: 0;
 min-height: 100dvh;
 display: flex;
 justify-content: center;
 overflow-x: hidden;
 padding-top: max(20px, env(safe-area-inset-top));
 padding-right: 0;
 padding-bottom: max(60px, calc(env(safe-area-inset-bottom) + 60px));
 padding-left: 0;
 box-sizing: border-box;
 -webkit-tap-highlight-color: transparent;
 }
 body::before {
 content: "";
 position: fixed;
 top: 0; left: 0; width: 100%; height: 100%;
 background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
 url('/web_images/spiaggia.jpg') no-repeat center center;
 background-size: cover;
 filter: blur(10px);
 -webkit-filter: blur(10px);
 transform: scale(1.08);
 z-index: -1;
 }
 
 button, a, .action-btn, .lang-btn, .btn-copy, #footer-install-btn {
 transition: transform 0.08s ease-in-out, opacity 0.08s ease-in-out, background-color 0.15s ease !important;
 cursor: pointer;
 touch-action: manipulation;
 }

 button:focus-visible, a:focus-visible {
 outline: 3px solid #93c5fd;
 outline-offset: 3px;
 }
 button:active, a:active, .action-btn:active, .lang-btn:active, .btn-copy:active, #footer-install-btn:active {
 transform: scale(0.92) !important;
 opacity: 0.75 !important;
 }

 .top-controls {
 position: absolute;
 top: calc(env(safe-area-inset-top) + 20px);
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 10;
 width: 100%;
 pointer-events: none;
 }

 .lang-switch {
 display: flex;
 gap: 6px;
 pointer-events: auto;
 }
 .lang-btn {
 background: rgba(0, 0, 0, 0.4);
 backdrop-filter: blur(15px);
 -webkit-backdrop-filter: blur(15px);
 border: 1px solid rgba(255, 255, 255, 0.3);
 padding: 6px 10px;
 border-radius: 20px;
 color: #ffffff;
 font-weight: 600;
 font-size: 0.8rem;
 }
 .lang-btn.active {
 background: rgba(59, 130, 246, 0.7);
 border-color: rgba(255, 255, 255, 0.6);
 }
 .container {
 background: rgba(15, 23, 42, .65);
 backdrop-filter: blur(20px) saturate(180%);
 -webkit-backdrop-filter: blur(20px) saturate(180%);
 padding: 30px 20px;
 border-radius: 28px;
 border: 1px solid rgba(255, 255, 255, .25);
 box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
 width: calc(100% - 40px);
 max-width: 520px;
 margin: 90px auto 0 auto;
 box-sizing: border-box;
 text-align: center;
 position: relative;
 left: 0;
 right: 0;
 transform: translateZ(0);
 }
 .brand-logo-container { display: flex; justify-content: center; align-items: center; margin-top: 25px; margin-bottom: 10px; }
 .brand-logo { max-width: 80px; max-height: 80px; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); object-fit: contain; }
 h1 { color: #ffffff; margin: 5px 0 6px 0; font-size: 1.4rem; font-weight: 700; }
 .welcome-msg { font-size: 0.95rem; color: rgba(255, 255, 255, 0.95); margin-bottom: 4px; font-weight: 600; }
 .subtitle { color: rgba(255, 255, 255, 0.85); margin-bottom: 20px; font-size: 0.82rem; }

 .info-bar {
 display: grid;
 grid-template-columns: repeat(6, 1fr);
 gap: 2px;
 background: rgba(0, 0, 0, 0.45);
 border: 1px solid rgba(255, 255, 255, 0.18);
 border-radius: 18px;
 padding: 10px 2px;
 margin-bottom: 10px;
 backdrop-filter: blur(10px);
 }
 .info-box { display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
 .info-label { font-size: 0.46rem; color: rgba(255, 255, 255, 0.85); text-transform: uppercase; margin-bottom: 3px; font-weight: 600; white-space: nowrap; }
 .info-value, .weather-temp { font-size: 0.72rem; font-weight: 700; color: #ffffff; white-space: nowrap; }

 .news-ticker {
 display: flex;
 align-items: center;
 height: 44px;
 background: rgba(0, 0, 0, .55);
 border: 1px solid rgba(255, 255, 255, .18);
 border-radius: 14px;
 overflow: hidden;
 margin-bottom: 12px;
 }

 .ticker-label {
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0 15px;
 background: #1d4ed8;
 color: white;
 font-size: .72rem;
 font-weight: 800;
 flex-shrink: 0;
 z-index: 2;
 }

 .ticker-viewport {
 flex: 1;
 overflow: hidden;
 height: 100%;
 display: flex;
 align-items: center;
 position: relative;
 }

 .news-ticker-track {
 display: flex;
 width: max-content;
 animation: ticker-scroll 35s linear infinite;
 will-change: transform;
 transform: translateZ(0);
 }

 .news-ticker-track:hover {
 animation-play-state: paused;
 }

 .news-ticker-content {
 display: flex;
 align-items: center;
 white-space: nowrap;
 flex-shrink: 0;
 }

 .ticker-item {
 padding: 0 18px;
 font-size: .78rem;
 white-space: nowrap;
 }

 .ticker-sep {
 width: 6px;
 height: 6px;
 background: #3b82f6;
 border-radius: 50%;
 margin: 0 5px;
 }

 .temp-min {
 color: #7dd3fc;
 font-weight: 700;
 }

 .temp-max {
 color: #fca5a5;
 font-weight: 700;
 }

 @keyframes ticker-scroll {
 from {
 transform: translateX(0) translateZ(0);
 }
 to {
 transform: translateX(-50%) translateZ(0);
 }
 }

 .hourly-container {
 display: flex; gap: 8px; overflow-x: auto;
 background: rgba(0, 0, 0, 0.35);
 border: 1px solid rgba(255, 255, 255, 0.15);
 border-radius: 16px; padding: 10px; margin-bottom: 22px;
 scrollbar-width: thin;
 overscroll-behavior-x: contain;
 -webkit-overflow-scrolling: touch;
 }
 .hourly-item {
 display: flex; flex-direction: column; align-items: center; justify-content: center;
 min-width: 50px; padding: 6px; background: rgba(255, 255, 255, 0.08);
 border-radius: 12px; font-size: 0.7rem; gap: 4px;
 }
 .hourly-item.current-hour {
 background: rgba(59, 130, 246, 0.35);
 border: 1px solid rgba(59, 130, 246, 0.6);
 }
 .hourly-time { font-weight: 600; color: rgba(255, 255, 255, 0.8); }
 .hourly-icon { font-size: 1rem; }
 .hourly-temp { font-weight: 700; color: #fff; }

 .service-heading {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 gap: 12px;
 margin: 2px 4px 10px;
 text-align: left;
 }
 .service-heading strong { font-size: .8rem; letter-spacing: .02em; text-transform: uppercase; }
 .service-heading span { font-size: .68rem; color: rgba(255,255,255,.62); }
 .cards-container { display: flex; flex-direction: column; gap: 10px; }
 .card-link {
 display: flex; align-items: center; gap: 12px; padding: 12px 14px;
 background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.25);
 border-radius: 18px; text-decoration: none; color: #ffffff; font-weight: 700; font-size: 0.98rem;
 transition: transform 0.12s ease, opacity 0.12s ease, background-color 0.15s ease !important;
 }
 .service-icon {
 width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center;
 background: rgba(59,130,246,.16); border: 1px solid rgba(147,197,253,.18);
 border-radius: 13px; font-size: 1.25rem;
 }
 .service-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
 .service-title { line-height: 1.2; }
 .service-copy small { color: rgba(255,255,255,.67); font-size: .68rem; font-weight: 500; line-height: 1.25; }
 .service-chevron { color: rgba(255,255,255,.58); font-size: 1.65rem; line-height: 1; font-weight: 300; }
 .card-link:hover { background: rgba(255,255,255,.10); }
 .card-link:active {
 transform: scale(0.97) !important;
 opacity: 0.9 !important;
 }
 .glass-box {
 background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.2);
 border-radius: 20px; padding: 18px; text-align: left; margin-top: 4px;
 }
 .box-header { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 700; margin-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding-bottom: 8px; }
 .wifi-content { display: flex; gap: 14px; align-items: center; }
 .qrcode-box { background: #ffffff; padding: 6px; border-radius: 12px; }
 .wifi-details { flex: 1; display: flex; flex-direction: column; gap: 8px; }
 .wifi-row { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.3); padding: 7px 10px; border-radius: 10px; font-size: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.1); }
 .wifi-value { font-family: monospace; font-weight: 700; }
 
 .btn-copy { 
 background: rgba(255, 255, 255, 0.18); 
 border: 1px solid rgba(255, 255, 255, 0.25); 
 color: #fff;
 padding: 12px 10px;
 border-radius: 10px;
 font-size: 0.78rem;
 font-weight: 600;
 min-height: 42px;
 }
 .btn-copy.copied {
 background: #10b981 !important;
 border-color: #34d399 !important;
 color: #ffffff !important;
 }

 .info-buttons { display: flex; flex-direction: column; gap: 10px; }
 .action-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 14px; text-decoration: none !important; font-weight: 700; font-size: 0.88rem; color: #fff !important; }
 .btn-map { background: #2563eb; }
 .btn-whatsapp { background: #25D366; }
 .btn-emergency { background: #dc2626; }
 .footer-info { margin-top: 25px; font-size: 0.73rem; color: rgba(255, 255, 255, 0.65); border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 16px; text-align: center; }
 
 #footer-install-btn {
 display: inline-flex;
 position: fixed;
 bottom: calc(env(safe-area-inset-bottom) + 20px);
 left: 50%;
 right: auto;
 z-index: 999;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 44px;
 padding: 10px 22px;
 border-radius: 26px;
 background: rgba(0,0,0,.65);
 backdrop-filter: blur(18px);
 -webkit-backdrop-filter: blur(18px);
 border: 1px solid rgba(255,255,255,.35);
 box-shadow: 0 8px 25px rgba(0,0,0,.45);
 transform: translateX(-50%) translateZ(0);
 will-change: transform;
 }

 #pwa-welcome-modal, #ios-install-modal {
 display: none; 
 position: fixed; 
 inset: 0; 
 width: 100%; 
 height: 100dvh;
 background: rgba(0, 0, 0, 0.75); 
 backdrop-filter: blur(6px); 
 -webkit-backdrop-filter: blur(6px);
 z-index: 1100;
 justify-content: center; 
 align-items: center; 
 padding: 20px;
 box-sizing: border-box;
 }
 .modal-card { 
 background: #1e293b; 
 border: 1px solid rgba(255, 255, 255, 0.25); 
 border-radius: 24px; 
 padding: 24px 20px; 
 width: 100%; 
 max-width: 480px; 
 color: #fff; 
 text-align: left; 
 position: relative;
 max-height: 85dvh;
 overflow-y: auto;
 margin: auto;
 }
 .modal-close-btn { width: 100%; background: #3b82f6; color: white; border: none; padding: 12px; border-radius: 14px; font-weight: 700; margin-top: 15px; text-align: center; }

 .ios-step-box {
 background: rgba(0, 0, 0, 0.35);
 border: 1px solid rgba(255, 255, 255, 0.12);
 border-radius: 14px;
 padding: 10px 12px;
 display: flex;
 align-items: center;
 gap: 12px;
 font-size: 0.85rem;
 color: #e2e8f0;
 }

 .ios-step-icon {
 display: flex; align-items: center; justify-content: center; flex-shrink: 0;
 width: 36px; height: 36px; background: rgba(255, 255, 255, 0.1);
 border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px;
 }

 .ios-step-icon-nobox {
 display: flex; align-items: center; justify-content: center; flex-shrink: 0;
 width: 36px; height: 36px; font-size: 1.25rem;
 }

 @keyframes floatUpArrow {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-3px); }
 }
 .animated-up-icon svg { animation: floatUpArrow 1.4s infinite ease-in-out; }

 @keyframes bounceBottom {
 0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
 40% { transform: translate(-50%, 12px); }
 60% { transform: translate(-50%, 6px); }
 }
 .bouncing-bottom-arrow {
 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
 font-size: 3.2rem; text-align: center; animation: bounceBottom 1.2s infinite ease-in-out;
 pointer-events: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.8));
 }

 @media (min-width: 768px) {
 .bouncing-bottom-arrow { display: none; }
 }

 img {
 content-visibility: auto;
 }

 @media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
 }

 .card-link,
 .glass-box,
 .info-bar,
 .news-ticker {
 transform: translateZ(0);
 backface-visibility: hidden;
 }
html{background:#142b27!important;}