*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#202124;line-height:1.5}a{text-decoration:none;color:inherit}.wrap{max-width:1180px;margin:auto;padding:0 22px}.narrow{max-width:820px}.nav{max-width:1180px;margin:auto;min-height:72px;padding:0 22px;display:flex;align-items:center;gap:25px;border-bottom:1px solid #e5e7eb}.logo{font-size:22px;font-weight:900;margin-right:auto}.logo b{color:#4285f4}.nav nav{display:flex;gap:20px;font-size:14px;font-weight:bold}.btn{display:inline-block;padding:13px 22px;border-radius:999px;border:1px solid #ccd2da;font-weight:800;cursor:pointer;margin:5px}.dark{background:#202124;color:white;border-color:#202124}.white{background:#fff}.hero{padding:90px 0;background:linear-gradient(135deg,#fff,#f7f9fc)}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:65px;align-items:center}.hero h1,.section h1{font-size:clamp(42px,6vw,70px);line-height:1.02;letter-spacing:-3px;margin:15px 0}.hero h1 span{color:#4285f4}.hero p,.lead{font-size:18px;color:#62666b;max-width:700px}.hero small,.section>div>small,.form-page small{color:#4285f4;font-weight:900;letter-spacing:2px}.map{min-height:390px;border:1px solid #e1e5ea;border-radius:30px;padding:30px;text-align:center;background:repeating-linear-gradient(45deg,#f7f8fa,#f7f8fa 20px,#eef1f4 21px,#eef1f4 22px);box-shadow:0 25px 70px #4285f420}.map small{color:#777}.pin{margin:75px auto 15px;width:70px;height:70px;border-radius:50%;background:#e9f1ff;color:#4285f4;display:grid;place-items:center;font-size:38px}.map strong{display:block;background:white;padding:12px;border-radius:12px;color:#34a853}.section{padding:80px 0}.gray{background:#f7f9fc}.section h2{font-size:40px;letter-spacing:-1.5px}.green{color:#34a853!important}.cards,.steps,.service-grid,.contact,.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:30px}.cards div,.steps article,.service-grid article,.contact article,.dashboard article,.price-card,.table,.box{border:1px solid #e1e5ea;border-radius:22px;padding:25px;background:white}.steps article b{font-size:28px;color:#4285f4}.steps article h3{margin-bottom:5px}.cta{background:#202124;color:white;border-radius:28px;padding:40px;display:flex;justify-content:space-between;align-items:center;margin-top:25px;margin-bottom:70px}.cta h2{margin:0}.form-page{background:#f7f9fc;min-height:80vh;padding:60px 0}.box{margin-top:25px;box-shadow:0 12px 40px #00000008}.bar{display:flex;gap:6px;margin-bottom:30px}.bar i{height:7px;flex:1;border-radius:10px;background:#e3e6eb}.bar i:first-child{background:#4285f4}.step{display:none}.step.active{display:block}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{display:block;font-weight:bold;font-size:13px;margin:16px 0}input,select,textarea{width:100%;padding:13px;border:1px solid #cfd5dd;border-radius:10px;margin-top:6px;font:inherit}.mapbox{padding:25px;text-align:center;background:#f3f7fc;border:1px dashed #cbd5e1;border-radius:18px}.review{background:#f7f9fc;padding:18px;border-radius:15px;display:grid;grid-template-columns:1fr 1fr;gap:9px}.full{width:100%}.center{text-align:center}.price{background:#f7f9fc;padding:25px;border-radius:18px;margin:20px 0}.price strong,.price-card>strong{display:block;font-size:48px}.price-card{max-width:470px;margin-top:30px}.price-card li{margin:10px 0}.notice,.note{font-size:12px;color:#686d74;margin-top:18px}.notice{background:#fff6d9;padding:18px;border-radius:15px;color:#715300}.service-grid{grid-template-columns:repeat(3,1fr)}.contact{grid-template-columns:repeat(3,1fr)}.vertical{grid-template-columns:1fr 1fr}.dashboard article strong{display:block;font-size:38px;margin-top:8px}.table{overflow:auto;margin-top:30px}.table table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px;border-bottom:1px solid #e5e7eb;text-align:left}.legal{font-size:17px;line-height:1.9;color:#5e6368}footer{background:#202124;color:#fff;padding:45px 22px;margin-top:50px;min-height:130px}footer .wrap{padding:0}@media(max-width:800px){.nav nav{display:none}.hero-grid,.grid{grid-template-columns:1fr}.cards,.steps,.service-grid,.contact,.dashboard,.vertical{grid-template-columns:1fr 1fr}.cta{display:block}.hero{padding:55px 0}}@media(max-width:520px){.cards,.steps,.service-grid,.contact,.dashboard,.review{grid-template-columns:1fr}.nav{padding:0 14px}.hero h1,.section h1{font-size:44px}.box{padding:20px}}#businessMap {
    width: 100%;
    height: 350px;
    border-radius: 10px;
    margin-top: 15px;
}

.mapbox {
    padding: 18px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fff;
}

.mapbox p {
    margin: 6px 0 12px;
    color: #666;
    font-size: 14px;
}

.map-coordinates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.map-coordinates label {
    display: block;
    font-size: 13px;
    margin-bottom: 5px;
}

.map-coordinates input {
    width: 100%;
    padding: 9px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #f7f7f7;
}

@media (max-width: 600px) {
    .map-coordinates {
        grid-template-columns: 1fr;
    }

    #businessMap {
        height: 300px;
    }
}

.form-buttons {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 25px;
}

.form-buttons .back {
    background: #f1f3f5;
    color: #20252b;
    border: 1px solid #d0d5dd;
    padding: 12px 20px;
    border-radius: 6px;
    cursor: pointer;
}

.form-buttons .back:hover {
    background: #e5e7eb;
}
.bar {
    display: flex;
    gap: 6px;
}

.bar i {
    flex: 1;
    height: 4px;
    background: #e5e7eb;
    transition: background 0.3s ease;
}

.bar i.active {
    background: #1877f2;
}
/* PROJECT MAP HEADER */

.site-header {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    position: relative;
    z-index: 9999;
}

.header-container {
    max-width: 1200px;
    margin: auto;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    text-decoration: none;
    font-size: 27px;
    font-weight: 800;
    color: #172033;
}

.logo span {
    color: #2878e8;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 25px;
}

.main-nav a {
    text-decoration: none;
    color: #172033;
    font-weight: 600;
}

.main-nav a:hover {
    color: #2878e8;
}

/* Mobile menu button */
.menu-toggle {
    display: none;
    border: none;
    background: #2878e8;
    color: white;
    font-size: 25px;
    width: 45px;
    height: 42px;
    border-radius: 7px;
    cursor: pointer;
}

/* PHONE */
@media (max-width: 768px) {

    .header-container {
        padding: 12px 18px;
    }

    .logo {
        font-size: 22px;
    }

    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        box-shadow: 0 5px 15px rgba(0,0,0,0.12);
    }

    .main-nav.active {
        display: flex;
    }

    .main-nav a {
        padding: 16px 20px;
        border-bottom: 1px solid #eeeeee;
        display: block;
    }

    .main-nav a:hover {
        background: #f5f8ff;
    }
}