:root{--navy:#0b1f3a;--blue:#0877d1;--cyan:#16b8c8;--ink:#182230;--muted:#5d6b7b;--bg:#f4f8fc;--line:#dce5ee}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);line-height:1.6;background:#fff}
a{color:var(--blue);text-decoration:none}.wrap{max-width:1120px;margin:auto;padding:0 22px}
header{background:var(--navy);color:#fff}.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0}
.logo{font-size:24px;font-weight:800;letter-spacing:.3px;color:#fff}.logo span{color:#39d4df}
nav{display:flex;gap:20px;flex-wrap:wrap}nav a{color:#eaf4ff;font-weight:600;font-size:14px}
.hero{background:linear-gradient(120deg,#0b1f3a,#075b9d);color:#fff;padding:74px 0}
.hero h1{font-size:clamp(34px,5vw,54px);line-height:1.12;margin:0 0 18px;max-width:760px}
.hero p{font-size:18px;color:#e4f2ff;max-width:700px;margin:0 0 28px}
.btn{display:inline-block;background:var(--cyan);color:#06243a;padding:13px 20px;border-radius:8px;font-weight:800;margin:5px 8px 5px 0}
.btn.outline{background:transparent;color:#fff;border:1px solid #9bc9ec}
section{padding:52px 0}.soft{background:var(--bg)}h2{font-size:30px;margin:0 0 12px;color:var(--navy)}h3{margin:0 0 8px;color:var(--navy)}
.lead{color:var(--muted);max-width:760px;margin:0 0 26px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:0 5px 18px rgba(12,43,74,.05)}
.tag{display:inline-block;background:#e4f8fa;color:#075e69;padding:4px 10px;border-radius:30px;font-size:12px;font-weight:700}
ul{padding-left:20px}.notice{background:#fff8e6;border:1px solid #f2d68b;padding:15px 18px;border-radius:10px;color:#5e4813}
footer{background:#07172b;color:#d8e5f2;padding:30px 0}footer a{color:#aeeaf0}footer .foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.small{font-size:13px;color:#718096}.contactline{font-size:17px;font-weight:700}
.pagehead{background:var(--bg);padding:40px 0;border-bottom:1px solid var(--line)}.pagehead h1{margin:0;color:var(--navy)}
@media(max-width:700px){.top{align-items:flex-start;flex-direction:column}.hero{padding:54px 0}nav{gap:12px}}