:root{
  --bg:#ffffff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --line:#e2e8f0;
  --accent:#2563eb;
  --accent-2:#22c55e;
  --ring: rgba(37,99,235,.25);
  --gold:#f59e0b;
  --light:#f8fafc;
  --shadow: 0 10px 20px rgba(2,6,23,.06), 0 2px 6px rgba(2,6,23,.04);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--text); background: linear-gradient(180deg, var(--light) 0%, #fff 18%);
}
.container{max-width:1200px; margin:0 auto; padding:0 24px}
.site-header{position:sticky; top:0; z-index:50; background:#fff; backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--line)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.brand{display:flex; align-items:baseline; gap:6px; text-decoration:none}
.brand-name{font-weight:800; color:var(--text); letter-spacing:.2px}
.brand-sub{color:var(--accent); font-weight:700}
.nav{list-style:none; display:flex; align-items:center; gap:18px; margin:0; padding:0}
.nav a{color:#0f172a; text-decoration:none; padding:10px 12px; border-radius:10px; font-weight:500}
.nav a:hover{background:var(--light)}
.nav .btn{background:var(--accent); color:white; padding:12px 16px; border-radius:12px; font-weight:600; box-shadow: var(--shadow)}
.has-sub{position:relative}
.has-sub .sub{display:none; position:absolute; top:44px; left:0; background:#fff; padding:12px; border:1px solid var(--line); border-radius:12px; width:320px; z-index:10; box-shadow: var(--shadow)}
.has-sub:hover . sub{display:grid}
.has-sub:hover .sub{display:grid; grid-template-columns:1fr; gap:6px}
.hero{padding:72px 0 24px; background: radial-gradient(800px 320px at 60% -160px, rgba(37,99,235,.08), transparent 40%)}
.hero h1{font-size:44px; line-height:1.08; margin:0 0 14px; letter-spacing:-.02em}
.hero p{color:var(--muted); max-width:780px; font-size:18px}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.badge{background:#fff; border:1px solid var(--line); color:#0f172a; padding:6px 10px; border-radius:999px; font-size:13px; box-shadow: var(--shadow)}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow: var(--shadow)}
.card h3{margin-top:0}
.section{padding:40px 0}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px}
.kpi{background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; text-align:center; box-shadow: var(--shadow)}
.kpi .num{font-size:28px; font-weight:800; color:#111827}
.kpi .label{color:var(--muted)}
.cta{display:inline-block; background:var(--accent); color:#fff; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:700; margin-top:8px; box-shadow: var(--shadow)}
.cta.secondary{background:#fff; color:var(--text); border:1px solid var(--line)}
.split{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; align-items:start}
.site-footer{margin-top:40px; background:#fff; border-top:1px solid var(--line)}
.site-footer .grid-3{padding:28px 0}
.site-footer h4{margin:0 0 10px}
.links{list-style:none; margin:0; padding:0}
.links li{margin:6px 0}
.links a{color:#0f172a; text-decoration:none}
.links a:hover{color:var(--accent)}
.copyright{text-align:center; color:#64748b; font-size:14px; padding:12px 0; border-top:1px solid var(--line)}
.lead{font-size:18px; color:#334155}
.breadcrumbs{font-size:13px; color:#64748b; margin:0 0 16px}
.breadcrumbs a{color:#64748b; text-decoration:none}
.service-hero{padding:38px 0 10px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fff, #f9fafb)}
.service-hero h1{margin:0 0 10px}
.service-content{padding:18px 0 40px}
ul.check{list-style:none; padding:0; margin:0}
ul.check li{margin:8px 0; padding-left:28px; position:relative}
ul.check li:before{content:"✓"; position:absolute; left:0; top:0; color:var(--accent-2); font-weight:700}
.table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px}
.table thead th{background:#f8fafc; color:#0f172a}
.table td,.table th{border:1px solid var(--line); padding:12px; text-align:left}
.form{display:grid; gap:12px}
input,select,textarea{background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; color:#0f172a; outline:none}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px var(--ring)}
button{background:var(--accent); color:#fff; padding:12px 16px; border:0; border-radius:12px; font-weight:700; cursor:pointer}
.map{height:300px; background:#f1f5f9; border:1px solid var(--line); border-radius:14px; display:flex; align-items:center; justify-content:center; color:#64748b}
.small{font-size:13px; color:#64748b}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent)}
a:hover{opacity:.9}