*{box-sizing:border-box}
:root{
  --bg:#ffffff;
  --text:#121826;
  --muted:#5b6473;
  --line:#e7eaf0;
  --primary:#1f6feb;
  --primary-2:#0d47a1;
  --soft:#f6f8fc;
  --shadow:0 10px 30px rgba(18,24,38,.08);
  --radius:18px;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}
.container{width:min(1120px,92%); margin:0 auto}
.topbar{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(10px);
  background:rgba(255,255,255,.88);
  border-bottom:1px solid var(--line);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:76px}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; font-weight:700;
  background:linear-gradient(135deg,#eaf2ff,#d8e8ff);
  color:var(--primary-2); border:1px solid #d7e4ff;
}
.brand h1{font-size:1rem; margin:0}
.brand p{margin:2px 0 0; color:var(--muted); font-size:.82rem}
nav{display:flex; gap:14px; align-items:center}
nav a{
  color:var(--text); text-decoration:none; font-size:.92rem; padding:8px 10px; border-radius:10px;
}
nav a:hover{background:var(--soft)}
.menu-btn{display:none; border:1px solid var(--line); background:#fff; border-radius:10px; padding:8px 10px; font-size:1rem}

.hero{
  padding:46px 0 28px;
  background:
    radial-gradient(circle at 85% 20%, rgba(31,111,235,.10), transparent 35%),
    radial-gradient(circle at 10% 10%, rgba(13,71,161,.07), transparent 30%),
    #fff;
}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:stretch}
.badge{
  display:inline-block; padding:7px 12px; border:1px solid #dbe7ff; background:#f4f8ff;
  border-radius:999px; font-size:.82rem; color:var(--primary-2); margin-bottom:10px;
}
.hero h2{font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.1; margin:0 0 12px}
.hero p{color:var(--muted); margin:0 0 18px; max-width:62ch}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 14px; border-radius:12px; border:1px solid var(--line);
  text-decoration:none; color:var(--text); background:#fff; transition:.2s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg,var(--primary),#3b82f6); color:#fff; border-color:transparent}
.btn.full{width:100%; margin-top:10px}
.hero-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)
}
.hero-card h3{margin:0 0 10px; font-size:1rem}
.hero-card ul{margin:0; padding-left:18px; color:var(--muted)}
.hero-card li{margin-bottom:8px}

.section{padding:34px 0}
.section.alt{background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section-head{margin-bottom:18px}
.section-head span{
  color:var(--primary-2); font-weight:600; font-size:.86rem; letter-spacing:.02em;
}
.section-head h3{margin:6px 0 0; font-size:clamp(1.2rem,2vw,1.6rem)}
.section-head.left h3{max-width:18ch}
.panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)
}
.panel p{margin:0 0 10px; color:var(--muted)}
.panel p:last-child{margin-bottom:0}
.cards{display:grid; gap:14px}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)
}
.card h4{margin:0 0 8px}
.card p{margin:0 0 6px; color:var(--muted)}
.card p:last-child{margin-bottom:0}
.service-card .icon{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:#f5f8ff; border:1px solid #dde7fb; margin-bottom:10px; font-size:1.1rem;
}
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:start}
.highlight{border-color:#dbe7ff; background:linear-gradient(180deg,#fff,#f8fbff)}
.highlight h4{margin-top:0; margin-bottom:8px}
.location-box{display:grid; grid-template-columns:1fr 1.2fr; gap:14px; align-items:stretch}
.location-box iframe{
  width:100%; min-height:300px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow)
}
.contact-panel{
  background:linear-gradient(135deg,#ffffff,#f7faff);
  border:1px solid #dfe8fb; border-radius:20px; padding:20px; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.contact-panel h3{margin:4px 0 8px}
.contact-panel p{margin:0 0 4px; color:var(--muted)}
.mini-label{font-size:.85rem; font-weight:600; color:var(--primary-2)}
.contact-actions{display:flex; gap:10px; flex-wrap:wrap}
.footer{
  border-top:1px solid var(--line);
  padding:26px 0 34px;
  background:#fff;
}
.footer-grid{display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:16px}
.footer h4{margin:0 0 8px}
.footer p{margin:0 0 6px; color:var(--muted); font-size:.92rem}

@media (max-width: 920px){
  .hero-grid, .split, .location-box, .footer-grid{grid-template-columns:1fr}
  .cards.three{grid-template-columns:1fr}
  .cards.two{grid-template-columns:1fr}
  .contact-panel{flex-direction:column; align-items:flex-start}
  nav{
    position:absolute; top:76px; left:0; right:0; background:#fff; border-bottom:1px solid var(--line);
    padding:10px 4%; display:none; flex-direction:column; align-items:flex-start;
  }
  nav.open{display:flex}
  .menu-btn{display:block}
}