*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',sans-serif; background:#0d2535; color:#fff; overflow-x:hidden; }

.nav {
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 48px;
    background:rgba(13,37,53,0.96); backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,0.06);
}
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo img { height:36px; width:auto; }
.nav-btn {
    background:#20b4c0; color:#fff; border:none; padding:9px 22px;
    border-radius:6px; font-size:13px; font-weight:700; text-decoration:none; letter-spacing:.4px;
}
.nav-btn:hover { background:#0a8a94; color:#fff; }

.hero {
    min-height:100vh; display:flex; align-items:center;
    padding:100px 48px 60px;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(32,180,192,0.06) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(32,180,192,0.04) 0%, transparent 45%);
    position:relative;
}
.hero-bg {
    position:absolute; inset:0; z-index:0;
    background-image:
        linear-gradient(rgba(32,180,192,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32,180,192,0.025) 1px, transparent 1px);
    background-size:50px 50px;
}
.hero-inner {
    position:relative; z-index:1;
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
    max-width:1100px; margin:0 auto; width:100%;
}

.hero-left { display:flex; flex-direction:column; align-items:center; text-align:center; }
.hero-logo-img {
    width:min(380px, 90%);
    height:auto;
    border-radius:20px;
    margin-bottom:32px;
    filter: drop-shadow(0 20px 60px rgba(32,180,192,0.18));
}
.hero-tagline {
    font-size:15px; color:#7ca5b5; line-height:1.7; margin-bottom:28px; max-width:360px;
}
.hero-cta {
    display:inline-block; background:#20b4c0; color:#fff;
    padding:13px 32px; border-radius:7px; font-size:14px; font-weight:700;
    text-decoration:none; letter-spacing:.3px;
    box-shadow:0 4px 24px rgba(32,180,192,0.28);
    transition:all .2s;
}
.hero-cta:hover { background:#0a8a94; color:#fff; transform:translateY(-2px); }

.hero-right { display:flex; flex-direction:column; gap:14px; }
.info-card {
    background:rgba(255,255,255,0.03); border:1px solid rgba(32,180,192,0.12);
    border-radius:12px; padding:18px 20px; display:flex; align-items:flex-start; gap:16px;
    transition:border-color .2s;
}
.info-card:hover { border-color:rgba(32,180,192,0.35); }
.info-ico {
    width:42px; height:42px; border-radius:10px; flex-shrink:0;
    background:rgba(32,180,192,0.1); border:1px solid rgba(32,180,192,0.15);
    display:flex; align-items:center; justify-content:center;
}
.info-ico i { font-size:20px; color:#20b4c0; }
.info-card h4 { font-size:13px; font-weight:700; margin-bottom:4px; color:#fff; }
.info-card p { font-size:12px; color:#6a8a9a; line-height:1.55; margin:0; }

.bottom { background:#0b1e2d; border-top:1px solid rgba(32,180,192,0.08); padding:48px; }
.bottom-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px; }
.bot-block h5 {
    font-size:11px; font-weight:700; color:#20b4c0;
    text-transform:uppercase; letter-spacing:1.5px;
    margin-bottom:16px; padding-bottom:10px;
    border-bottom:1px solid rgba(32,180,192,0.2);
}
.srv-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.srv-list li { display:flex; align-items:center; gap:10px; font-size:13px; color:#a0c0cc; }
.srv-list li i { color:#20b4c0; font-size:15px; flex-shrink:0; }
.city-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.city-item {
    display:flex; align-items:center; gap:7px;
    background:rgba(32,180,192,0.05); border:1px solid rgba(32,180,192,0.1);
    border-radius:7px; padding:8px 10px; font-size:12px; color:#a0c0cc;
}
.city-item i { color:#20b4c0; font-size:13px; }
.oea {
    margin-top:12px; display:flex; align-items:center; gap:10px;
    background:rgba(32,180,192,0.06); border:1px solid rgba(32,180,192,0.2);
    border-radius:8px; padding:10px 12px;
}
.oea i { font-size:20px; color:#20b4c0; flex-shrink:0; }
.oea span { font-size:11px; color:#7ca5b5; line-height:1.4; }
.oea strong { display:block; font-size:13px; color:#fff; }
.contact-list { display:flex; flex-direction:column; gap:10px; }
.contact-item { display:flex; align-items:center; gap:12px; }
.contact-ico {
    width:36px; height:36px; border-radius:8px; flex-shrink:0;
    background:rgba(32,180,192,0.08); border:1px solid rgba(32,180,192,0.12);
    display:flex; align-items:center; justify-content:center;
}
.contact-ico i { font-size:16px; color:#20b4c0; }
.contact-item span { font-size:10px; color:#5a7a8a; text-transform:uppercase; letter-spacing:.8px; display:block; }
.contact-item strong { font-size:13px; color:#c0d8e0; font-weight:500; }
.office-cards { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.office-card {
    background:rgba(32,180,192,0.04); border:1px solid rgba(32,180,192,0.1);
    border-radius:8px; padding:10px 12px; display:flex; align-items:flex-start; gap:10px;
}
.office-card .flag { font-size:18px; flex-shrink:0; margin-top:1px; }
.office-card address { font-style:normal; font-size:11px; color:#7ca5b5; line-height:1.6; }

footer {
    background:#0b1e2d; border-top:1px solid rgba(32,180,192,0.06);
    padding:20px 48px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
}
footer .logo { font-size:14px; font-weight:800; color:#20b4c0; letter-spacing:3px; }
footer p { font-size:11px; color:#3a5a6a; }

@media (max-width:900px) {
    .nav { padding:14px 20px; }
    .hero { padding:90px 20px 40px; }
    .hero-inner { grid-template-columns:1fr; gap:32px; }
    .hero-right { display:none; }
    .hero-logo-img { width:min(280px,85%); }
    .bottom { padding:36px 20px; }
    .bottom-grid { grid-template-columns:1fr; gap:32px; }
    footer { padding:16px 20px; flex-direction:column; text-align:center; }
}