:root { --navy:#071a3d; --blue:#1463ff; --cyan:#18b7cf; --ink:#15223c; --muted:#657087; --line:#dfe6f0; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 15% 5%,#dff7fb 0,transparent 25%),#f5f7fb; font:16px/1.75 Manrope,sans-serif; }
.cms-header { height:82px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 max(20px,calc((100vw - 1140px)/2)); color:white; background:var(--navy); }
.cms-brand { display:flex; align-items:center; gap:10px; color:white; text-decoration:none; font-family:"Space Grotesk",sans-serif; }
.cms-brand span { display:grid; place-items:center; width:39px; height:39px; border-radius:12px; color:var(--navy); background:linear-gradient(135deg,#80e6f2,#fff); font-weight:800; }
.cms-home { padding:8px 13px; border:1px solid rgba(255,255,255,.25); border-radius:9px; color:white; text-decoration:none; font-weight:700; }
main { width:min(100% - 30px,980px); margin:46px auto; }
.cms-article { overflow:hidden; border:1px solid var(--line); border-radius:24px; background:white; box-shadow:0 25px 70px rgba(16,36,73,.1); }
.cms-hero { position:relative; display:grid; align-items:end; min-height:300px; padding:clamp(28px,6vw,68px); color:white; background:radial-gradient(circle at 85% 15%,rgba(24,183,207,.45),transparent 25%),linear-gradient(135deg,#08214d,#135abb); }
.cms-hero.has-image { min-height:480px; }
.cms-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cms-hero.has-image::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,17,43,.92),rgba(4,17,43,.12) 75%); }
.cms-hero-copy { position:relative; z-index:1; max-width:760px; }
.cms-kicker { margin:0 0 10px; color:#8ce9f2; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:0; font:700 clamp(36px,7vw,68px)/1.04 "Space Grotesk",sans-serif; letter-spacing:-.035em; }
.cms-excerpt { max-width:680px; margin:18px 0 0; color:#dce8fc; font-size:clamp(17px,2vw,21px); }
time { display:block; margin-top:16px; color:#b9c9e5; font-size:14px; }
.cms-body { max-width:780px; margin:auto; padding:clamp(30px,7vw,75px); }
.cms-body h2,.cms-body h3,.cms-body h4 { margin:1.7em 0 .6em; color:var(--navy); font-family:"Space Grotesk",sans-serif; line-height:1.2; }
.cms-body h2 { font-size:clamp(27px,4vw,38px); }
.cms-body h3 { font-size:24px; }
.cms-body a { color:var(--blue); font-weight:700; }
.cms-body img { max-width:100%; height:auto; border-radius:14px; }
.cms-body blockquote { margin:28px 0; padding:18px 24px; border-left:4px solid var(--cyan); color:#31435f; background:#eef9fb; }
.cms-body code,.cms-body pre { border-radius:7px; background:#eef2f7; font-family:Consolas,monospace; }
.cms-body code { padding:2px 5px; }
.cms-body pre { overflow:auto; padding:18px; }
.cms-footer { display:flex; justify-content:space-between; gap:20px; width:min(100% - 30px,980px); margin:0 auto 45px; color:var(--muted); font-size:14px; }
.cms-footer a { color:var(--blue); font-weight:700; }
.cms-footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 16px; }
.cms-footer-links a { overflow-wrap:anywhere; }
@media (max-width:600px) { .cms-header { height:70px; padding:0 15px; } .cms-brand strong { font-size:14px; } main { margin:20px auto; } .cms-article { border-radius:17px; } .cms-hero,.cms-hero.has-image { min-height:350px; } .cms-footer { display:block; } .cms-footer-links { justify-content:flex-start; margin-top:8px; } }