:root{
--bg:#d0ecff;
--card:#ffffff;
--accent:#0481c9;
--muted:#6b7280;
--radius:18px;
--glass: rgba(255,255,255,0.6);
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box;text-decoration: none;}
section{padding: 0%;}
body{padding-left: 20px;padding-right:20px;background:linear-gradient(180deg,var(--bg),#f0e1ff);color:#0f172a;line-height:1.45}
.container{max-width:1100px;margin:0 auto;padding:0 20px}


.header-row{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
.brand{display:flex;gap:12px;align-items:center}
.brand-title{font-size: 25px; font-weight:700}
.brand-sub{font-size:18px;color:var(--muted)}
.phone{background:var(--card);padding:10px 14px;border-radius:12px;text-decoration:none;color:inherit;box-shadow:0 6px 20px rgba(16,24,40,.06)}


/* Hero */
.hero{padding:30px 0}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:36px;align-items:center}
.hero-left h1{font-size:38px;margin:0}
.accent{color:var(--accent)}
.lead{color:var(--muted);margin-top:14px}
.benefits{display:flex;gap:14px;margin-top:18px;padding:0;list-style:none}
.benefits li{background:var(--card);padding:10px 14px;border-radius:12px;box-shadow:0 6px 20px rgba(16,24,40,.04);font-size:14px}

.circle{width: 12px;height: 12px; margin-top: auto;margin-bottom: auto; margin-left: 4px; margin-right: 8px; background: #000;border-radius: 50%;}
.green{background-color: #41e90e;}
.yellow{background-color:rgb(255, 219, 15);}
.orange{background-color:rgb(253, 137, 42);}
.zones{padding: 0%;}
.zones li{border-radius: 8px; display: flex;justify-content: start;margin-bottom: 8px;padding-left: 6px; padding-top: 12px;padding-bottom: 12px; background-color: #eeeeee;}

.hero-cta{margin-top:22px;display:flex;gap:12px}
.btn{text-align: center;border:0;padding:12px 18px;border-radius:12px;font-weight:600;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease}
.btn:active{transform:translateY(1px)}
.btn.primary{font-size: 18px;background:linear-gradient(90deg,var(--accent),#02499b);color:white;box-shadow:0 8px 30px rgba(14,165,255,.18)}
.btn.ghost{font-size: 18px;background:linear-gradient(90deg,#1dac00,#2f6809);color: #ffffff;border:1px solid rgba(15,23,42,.06);}
.tg-btn{display: block; border-radius: 12px; height: 50px;}
.logo-img{width: 96px;}


.device-card{background:var(--card);border-radius:16px;padding:18px;box-shadow:0 10px 40px rgba(2,6,23,.06);display:flex;flex-direction:column;gap:12px}
.device-top{font-size:13px;color:var(--muted)}
.device-body img{width:100%;border-radius:10px}
.device-footer{font-size:13px;color:var(--muted)}

/* Map */
.map-container{position:relative;overflow:hidden;}


/* How */
.how{padding:0px 0}
.steps{display:flex;gap:14px;margin-top:14px}
.step{background:var(--card);padding:18px;border-radius:14px;flex:1;box-shadow:0 8px 30px rgba(2,6,23,.04)}
.step .num{width:36px;height:36px;border-radius:10px;background:linear-gradient(180deg,var(--accent),#0366d6);color:white;display:flex;align-items:center;justify-content:center;font-weight:700}


/* Form */
.form-section{padding:40px 0}
.lead-form{display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,rgba(255,255,255,0.8),rgba(255,255,255,0.6));padding:22px;border-radius:14px;box-shadow:0 10px 40px rgba(2,6,23,.03)}
.lead-form .row{display:flex;gap:12px}
.lead-form input, .lead-form textarea{flex:1;padding:12px;border-radius:10px;border:1px solid rgba(15,23,42,.06);font-size:14px}
.lead-form textarea{min-height:90px;resize:vertical}
.actions{display:flex;align-items:center;gap:16px;margin-top:6px}
.small{font-size:13px;color:var(--muted)}


/* FAQ */
.faq{padding:20px 0}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.q{background:var(--card);padding:14px;border-radius:12px;box-shadow:0 8px 30px rgba(2,6,23,.03)}


.site-footer{padding:20px 0;color:var(--muted)}
.footer-row{display:flex;justify-content:space-between}


/* Modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,0.4);backdrop-filter:blur(3px);z-index:40}
.modal.hidden{display:none}
.modal-content{background:var(--card);padding:26px;border-radius:14px;text-align:center;min-width:280px}


/* Paralax */
.paralax-container{
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: -1000;
}
.paralax-container img{
    width: 1080px;
}
.content {
    text-align: center;
    padding: 20px;
}


/* Responsive */
@media(max-width:900px){
.hero-grid{grid-template-columns:1fr}
.steps{flex-direction:column}
.faq-grid{grid-template-columns:1fr}
.lead-form .row{flex-direction:column}
}

@media only screen and (orientation: portrait) and (min-device-width: 344px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
    body{
        overflow-x: hidden;
    }
    
    .paralax-container{
        position: fixed;
        left: 50%;
        transform: translate(-50%, 0%);
        z-index: -1000;
    }
    .paralax-container img{
        width: 380px;
        height: auto;
    }
    .content {
        text-align: center;
        padding: 0px;
    }

    .hero{padding: 0px;}
    .container{padding: 12px 0px;}
    .header-row{display:flex;align-items:center;justify-content:start;flex-wrap: wrap;gap: 12px;}
    .phone{width: 100%;height: 48px;line-height: 28px; text-align: center;}
}