*{box-sizing:border-box}
:root{--navy:#092b5d;--blue:#135db6;--orange:#f47721;--ink:#14243a;--muted:#53637b;--line:#e0e7f0}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,system-ui,sans-serif;background:#f6f8fc;color:var(--ink);line-height:1.65}
a{color:#1358b5}
header{background:#fff;border-bottom:1px solid #dfe6ef;position:sticky;top:0;z-index:10}
.wrap{max-width:1140px;margin:auto;padding:0 20px}
.head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);text-decoration:none;font-size:19px}
.logo{width:46px;height:46px;object-fit:contain;display:block}
.nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.nav a{text-decoration:none;font-weight:700;color:#243b5b}
.nav a:hover{color:var(--blue)}
.btn{display:inline-block;background:var(--orange);color:#fff!important;text-decoration:none;border-radius:9px;padding:12px 20px;font-weight:800;border:0;transition:background .2s,transform .2s}
.btn:hover{background:#dc5d0b;transform:translateY(-1px)}
.hero{background:linear-gradient(120deg,#092b5d,#135db6);color:#fff;padding:52px 0}
.hero h1{font-size:clamp(30px,4vw,49px);line-height:1.16;margin:0 0 16px;max-width:850px}
.hero p{font-size:18px;max-width:780px;color:#e5efff}
.hero .btn{margin-top:12px}
.banner{max-width:970px;width:100%;height:auto;display:block;margin:22px auto;border-radius:8px}
.section{padding:34px 0}
.section h2{font-size:27px;color:var(--ink);line-height:1.25;margin:0 0 22px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.panel,.tile{background:#fff;border:1px solid var(--line);border-radius:13px;padding:22px;box-shadow:0 4px 18px rgba(22,45,77,.05)}
.tile{transition:transform .2s,box-shadow .2s,border-color .2s}
.tile:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(22,45,77,.09);border-color:#cbd9e9}
.tile h3{margin:0 0 8px;color:var(--navy);font-size:19px;line-height:1.35}
.tile p{margin:0 0 15px;color:var(--muted)}
.tile a{font-weight:700;text-decoration:none}
.tile a:hover{text-decoration:underline}
.split{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:24px}
.side{width:100%;height:auto;border-radius:10px;display:block}
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags a{padding:8px 12px;border:1px solid #d9e3ef;border-radius:20px;background:#fff;text-decoration:none;font-size:14px}
.guide{max-width:850px;margin:auto}
.guide h1{font-size:35px;line-height:1.25}
.guide h2{margin-top:28px}
.guide li{margin:10px 0}
.note{background:#eef5ff;border-left:4px solid #2366bc;padding:14px 16px;border-radius:5px}
footer{background:#10243d;color:#d6e0eb;padding:30px 0;margin-top:35px}
footer a{color:#fff}
.small{font-size:13px;color:#66778f}
.search{width:100%;padding:14px;border:1px solid #c9d6e5;border-radius:9px;font-size:16px;margin:10px 0 20px}
img{max-width:100%}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.head{gap:12px}.nav{gap:12px}}
@media(max-width:760px){.grid,.split{grid-template-columns:1fr}.head{align-items:flex-start}.hero{padding:35px 0}.section{padding:23px 0}.guide h1{font-size:29px}}
@media(max-width:520px){.wrap{padding-left:15px;padding-right:15px}.head{display:flex}.brand{font-size:16px}.logo{width:40px;height:40px}.nav{width:100%;gap:10px 15px}.nav a{font-size:14px}.head>.btn{margin-left:auto}.hero h1{font-size:32px}.hero p{font-size:16px}.banner{margin:16px auto}.section h2{font-size:24px}.panel,.tile{padding:18px}}