:root{
  --mark:url(logo-mark.png);
  --navy:#081226;--navy-2:#0c1c3d;--blue-700:#1a3a8f;--blue-600:#1e56d6;--blue-500:#2a7bf0;--blue-400:#4d9bff;--blue-300:#7db6ff;--cyan:#37e0ff;--violet:#7c5cff;
  --ink:#0b1729;--muted:#5f6f89;--line:#e7edf6;--bg:#fff;--soft:#f5f8fe;
  --grad:linear-gradient(135deg,#2a7bf0,#1a3a8f);--grad-b:linear-gradient(135deg,#4d9bff,#1e56d6 55%,#12295f);--grad-glow:linear-gradient(120deg,#37e0ff,#2a7bf0 45%,#7c5cff);
  --shadow:0 24px 60px rgba(16,44,110,.16);--shadow-sm:0 10px 28px rgba(16,44,110,.10);--r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img,svg{max-width:100%}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.02em;line-height:1.2}
.container{width:min(1180px,92%);margin:0 auto}
.narrow{width:min(780px,92%);margin:0 auto}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:13px;font-weight:700;font-size:.97rem;transition:.22s;border:0;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 26px rgba(30,86,214,.34)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(30,86,214,.46)}
.btn-outline{background:#fff;color:var(--blue-700);border:1.6px solid var(--line)}
.btn-outline:hover{border-color:var(--blue-500);color:var(--blue-600)}
.btn-ghost{background:#fff;color:var(--blue-700);border:0}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px}
.logo-mark{height:40px;width:33px;flex:0 0 auto;display:block;background:var(--mark) center/contain no-repeat}
.brand .wm b{font-size:1.12rem;font-weight:800;letter-spacing:.05em;color:var(--navy);display:block;line-height:1}
.brand .wm small{font-size:.55rem;font-weight:600;letter-spacing:.3em;color:var(--muted);display:block;margin-top:3px}
.menu{display:flex;gap:30px;align-items:center}
.menu a{font-weight:600;color:#3c4a63;font-size:.94rem;position:relative}
.menu a:hover{color:var(--blue-600)}
.menu a.active{color:var(--blue-600)}
@media(max-width:800px){.menu{display:none}}

/* footer */
footer{background:var(--navy);color:#c1d0ec;padding:56px 0 26px;margin-top:80px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-brand .wm b{color:#fff}.foot-brand .wm small{color:#8ba3d2}
.foot-brand p{margin-top:14px;font-size:.92rem;max-width:340px;color:#9fb2d8}
footer h5{color:#fff;font-size:.95rem;margin-bottom:14px}
footer ul{list-style:none}footer ul li{margin-bottom:9px;font-size:.92rem}
footer ul a{color:#a9bad9}footer ul a:hover{color:#fff}
.foot-bottom{padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.86rem;color:#8ba3d2}
@media(max-width:700px){.foot-grid{grid-template-columns:1fr 1fr}}

/* ===== blog listing ===== */
.blog-hero{background:radial-gradient(700px 340px at 80% -10%,rgba(55,224,255,.14),transparent 55%),linear-gradient(135deg,#081226,#0c1c3d);color:#fff;padding:70px 0 64px;text-align:center}
.blog-hero .eyebrow{color:var(--cyan);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.76rem}
.blog-hero h1{font-size:clamp(2rem,4vw,3rem);margin:14px 0 12px}
.blog-hero p{color:#a9bde0;max-width:620px;margin:0 auto;font-size:1.08rem}
.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;padding:64px 0}
@media(max-width:760px){.posts{grid-template-columns:1fr;padding:44px 0}}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.3s}
.post-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:#cfe0fb}
.post-thumb{height:180px;position:relative;display:grid;place-items:center;background:var(--grad)}
.post-card:nth-child(2n) .post-thumb{background:linear-gradient(135deg,#37e0ff,#1e56d6)}
.post-thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(150px 80px at 78% 20%,rgba(255,255,255,.28),transparent)}
.post-thumb svg{width:70px;height:70px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:1}
.post-body{padding:24px 26px 28px;flex:1;display:flex;flex-direction:column}
.post-cat{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-600);margin-bottom:10px}
.post-body h2{font-size:1.3rem;margin-bottom:10px}
.post-body p{color:var(--muted);font-size:.96rem;flex:1}
.post-more{margin-top:16px;color:var(--blue-600);font-weight:700;font-size:.92rem}

/* ===== article ===== */
.art-hero{position:relative;overflow:hidden;background:var(--grad-b);color:#fff;padding:56px 0 46px}
.art-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.1)}
.crumb{font-size:.86rem;color:rgba(255,255,255,.82);margin-bottom:16px;position:relative;z-index:1}
.crumb a:hover{text-decoration:underline}
.art-cat{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);padding:5px 13px;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:14px;position:relative;z-index:1}
.art-hero h1{font-size:clamp(1.8rem,3.6vw,2.7rem);max-width:800px;position:relative;z-index:1}
.art-meta{margin-top:16px;font-size:.9rem;color:rgba(255,255,255,.86);display:flex;gap:18px;flex-wrap:wrap;position:relative;z-index:1}
.article{padding:52px 0 20px;font-size:1.06rem;color:#26344a}
.article>p{margin:0 0 20px}
.article h2{font-size:1.6rem;margin:38px 0 14px;color:var(--navy)}
.article h3{font-size:1.24rem;margin:26px 0 10px;color:var(--navy)}
.article ul,.article ol{margin:0 0 20px;padding-left:4px;list-style:none}
.article ul li{position:relative;padding-left:30px;margin-bottom:11px}
.article ul li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--grad);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat}
.article ol{counter-reset:oi}
.article ol li{position:relative;padding-left:38px;margin-bottom:12px;counter-increment:oi}
.article ol li::before{content:counter(oi);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:8px;background:var(--grad);color:#fff;font-size:.8rem;font-weight:700;display:grid;place-items:center}
.article strong{color:var(--navy)}
.article a{color:var(--blue-600);font-weight:600}.article a:hover{text-decoration:underline}
.callout{background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--blue-500);border-radius:12px;padding:18px 22px;margin:26px 0;color:#33415c}
.callout b{color:var(--navy)}
.art-cta{background:radial-gradient(600px 260px at 20% 0,rgba(55,224,255,.28),transparent 60%),var(--grad);border-radius:22px;padding:44px;text-align:center;color:#fff;margin:44px 0 10px}
.art-cta h3{font-size:1.5rem;margin-bottom:8px;color:#fff}
.art-cta p{opacity:.93;max-width:520px;margin:0 auto 22px}
.related{border-top:1px solid var(--line);margin-top:44px;padding-top:34px}
.related h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:16px}
.related a{display:block;font-weight:700;color:var(--navy);padding:12px 0;border-bottom:1px solid var(--line)}
.related a:hover{color:var(--blue-600)}
.float{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;flex-direction:column;gap:12px}
.float a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.22);transition:.2s;font-weight:800;font-size:.7rem}
.float a:hover{transform:scale(1.08)}.fz{background:#0068ff}.fp{background:var(--grad)}