:root{--navy-950:#081c33;--navy-900:#0d2c50;--navy-800:#123a67;--navy-700:#17497f;
--blue:#1266cc;--sky:#1a8fce;--cyan:#38bdf8;--green:#3cb872;--green-l:#7ee2a8;
--ink:#0f172a;--slate:#46566b;--muted:#6b7a90;--line:#dfe6ef;--bg:#f5f8fc;--card:#fff}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.72;-webkit-font-smoothing:antialiased}
svg{display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:840px;margin:0 auto;padding:0 24px}
/* top bar */
.topbar{background:var(--navy-950);position:sticky;top:0;z-index:20}
.topbar-in{max-width:1140px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;color:#fff}
.brand .mk{width:34px;height:34px;border-radius:9px;background:linear-gradient(140deg,var(--navy-700),var(--navy-900));display:grid;place-items:center;border:1px solid rgba(56,189,248,.35)}
.brand b{font-size:1.16rem;font-weight:700;letter-spacing:-.02em}
.tnav{display:flex;gap:24px;align-items:center;font-size:.92rem}
.tnav a{color:rgba(255,255,255,.82);font-weight:500}
.tnav a:hover{color:#fff;text-decoration:none}
.tbtn{background:linear-gradient(to right,var(--blue),var(--sky));color:#fff !important;padding:9px 18px;border-radius:10px;font-weight:600}
/* hero head */
.phead{background:radial-gradient(ellipse 70% 60% at 78% -20%,rgba(26,143,206,.28),transparent),linear-gradient(165deg,#081c33,#123a67);color:#fff;padding:66px 0 54px}
.phead .kick{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9bdcf9}
.phead h1{font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.022em;margin:12px 0 14px;font-weight:740;line-height:1.1}
.phead p{color:rgba(255,255,255,.85);font-size:1.12rem;max-width:44rem}
/* article */
article{padding:56px 0 20px}
article h2{color:var(--navy-800);font-size:1.5rem;margin:38px 0 12px;letter-spacing:-.02em}
article h3{color:var(--navy-800);font-size:1.12rem;margin:26px 0 8px}
article p{color:var(--slate);margin:0 0 16px;font-size:1.04rem}
article ul{margin:0 0 18px 4px;padding-left:22px}
article li{color:var(--slate);margin-bottom:10px}
article strong{color:var(--ink)}
.lead{font-size:1.16rem;color:#33465e}
.callout{background:#fff;border:1px solid var(--line);border-left:4px solid var(--cyan);border-radius:0 14px 14px 0;padding:20px 24px;margin:26px 0;box-shadow:0 8px 26px rgba(18,58,103,.07)}
.callout p{margin:0;color:var(--navy-700)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 8px}
.btn{display:inline-block;border-radius:11px;padding:12px 22px;font-weight:600;font-size:.96rem}
.btn:hover{text-decoration:none}
.btn-cyan{background:linear-gradient(to right,var(--blue),var(--sky));color:#fff}
.btn-ghost{border:1px solid var(--line);background:#fff;color:var(--navy-800)}
/* footer */
footer{background:var(--navy-950);color:rgba(255,255,255,.6);padding:40px 0;margin-top:56px;font-size:.9rem}
.foot-in{max-width:1140px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{color:rgba(255,255,255,.66)}
footer a:hover{color:#fff}
footer .fb{color:#fff;font-weight:700}
@media(max-width:720px){.tnav{flex-wrap:wrap;gap:12px}.tnav a:not(.tbtn){font-size:.82rem}}
.navmark{height:34px;width:auto;display:block}