*{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{
  --navy:#0f355d;
  --green:#1f8a70;
  --dark:#111827;
  --muted:#4b5563;
  --line:#e5e7eb;
  --bg:#ffffff;
  --soft:#f7f9fb;
  --shadow:0 12px 35px rgba(2,6,23,.08);
  --radius:18px;
}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--dark)}
a{text-decoration:none;color:inherit}
.container{width:min(1140px,92%);margin:0 auto}

.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar__inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand__logo{width:64px;height:64px;object-fit:contain;border-radius:14px;background:#fff;border:1px solid var(--line);padding:4px}
.brand__eyebrow{margin:0;color:var(--muted);font-size:.72rem;font-weight:600}
.brand h1{margin:.15rem 0 0;font-size:1rem;line-height:1.2}
.nav{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.nav a{font-weight:600;color:var(--muted)}
.nav a:hover{color:var(--navy)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.78rem 1rem;border-radius:12px;font-weight:700;border:1px solid transparent;transition:.2s ease}
.btn--primary{background:var(--navy);color:#fff}
.btn--primary:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn--ghost{border-color:var(--line);background:#fff;color:var(--navy)}

.hero{
  padding:28px 0 18px;
  background:
    radial-gradient(circle at 10% 0%, rgba(15,53,93,.08), transparent 35%),
    radial-gradient(circle at 95% 25%, rgba(31,138,112,.09), transparent 32%),
    linear-gradient(#fff, #fbfdff);
}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}
.tag{margin:0 0 8px;color:var(--green);text-transform:uppercase;letter-spacing:.08em;font-weight:800;font-size:.75rem}
.hero h2{margin:0 0 10px;font-size:clamp(1.55rem,3vw,2.4rem);line-height:1.08;color:var(--navy)}
.hero__text{margin:0 0 14px;color:var(--muted);line-height:1.7}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.hero__details{display:grid;gap:6px;color:var(--muted);font-size:.95rem}
.hero__details p{margin:0}
.hero__details a{color:var(--navy);font-weight:600}
.hero__visual{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#fff}
.hero__visual img{width:100%;height:100%;display:block;object-fit:cover}

.section{padding:42px 0}
.section--soft{background:var(--soft)}
.section__head{margin-bottom:16px}
.section__head h3{margin:0;font-size:1.5rem}

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px;box-shadow:0 4px 15px rgba(2,6,23,.04)}
.card h4{margin:0 0 7px;color:var(--navy);font-size:1rem}
.card p{margin:0;color:var(--muted);line-height:1.55}

.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.panel h3{margin:0 0 8px}
.panel p{margin:0;color:var(--muted);line-height:1.65}

.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.value{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px}
.value h4{margin:0 0 6px;color:var(--navy)}
.value p{margin:0;color:var(--muted);line-height:1.55}

.gallery{display:grid;grid-template-columns:1.1fr .9fr;gap:12px}
.gallery__item{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.gallery__item img{width:100%;height:100%;display:block;object-fit:cover}
.gallery__item--wide{grid-row:span 2;min-height:360px}
.gallery__item:not(.gallery__item--wide){min-height:174px}

.contact{display:grid;grid-template-columns:.95fr 1.05fr;gap:14px}
.contact__info,.contact__map{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.contact__info{padding:18px}
.contact__info h3{margin:0 0 8px}
.contact__info ul{margin:0;padding-left:1rem;color:var(--muted);line-height:1.9}
.contact__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.contact__map{overflow:hidden;min-height:360px}
.contact__map iframe{width:100%;height:100%;min-height:360px;border:0}

.float-call{
  position:fixed;right:16px;bottom:16px;z-index:60;
  width:54px;height:54px;border-radius:999px;display:grid;place-items:center;
  background:var(--green);color:#fff;font-size:1.4rem;box-shadow:var(--shadow)
}
.float-call:hover{transform:translateY(-2px)}

.footer{border-top:1px solid var(--line);background:#fff}
.footer__inner{display:flex;align-items:center;gap:12px;padding:16px 0;color:var(--muted);flex-wrap:wrap}
.footer__inner p{margin:0}
.footer__logo{width:64px;height:64px;object-fit:contain;border-radius:10px;border:1px solid var(--line);padding:4px;background:#fff}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease, transform .55s ease}
.reveal.visible{opacity:1;transform:none}

@media (max-width: 980px){
  .topbar__inner{grid-template-columns:1fr;justify-items:start}
  .nav{justify-content:flex-start}
  .hero__grid,.split,.contact{grid-template-columns:1fr}
  .values{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 680px){
  .cards,.values,.gallery{grid-template-columns:1fr}
  .gallery__item--wide{grid-row:auto;min-height:260px}
  .gallery__item:not(.gallery__item--wide){min-height:220px}
  .brand__logo{width:52px;height:52px}
  .brand h1{font-size:.95rem}
}