:root {
     --blue-900: #071a3a;
     --blue-800: #0b2b66;
     --orange: #ff8a00;
     --bg: #f4f7ff;
     --text: #0b1220;
     --muted: #5b6b86;
     --card: #ffffff;
     --border: rgba(7, 26, 58, .10);
     --shadow: 0 16px 34px rgba(7, 26, 58, .10);
     --radius: 18px;
 }

 * {
     box-sizing: border-box
 }

 body {
     margin: 0;
     font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
     background: linear-gradient(180deg, #eef3ff 0%, var(--bg) 60%, #fff 100%);
     color: var(--text);
 }

 /* Top bar */
 .top {
     background: linear-gradient(90deg, var(--blue-800), #0f3a86);
     padding: 18px 0;
     box-shadow: 0 10px 22px rgba(0, 0, 0, .10);
 }

 .container {
     width: min(980px, 92%);
     margin-inline: auto
 }

 .brand {
     color: #fff;
     font-weight: 900;
     letter-spacing: .5px;
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .brand__badge {
     border: 1px solid rgba(255, 255, 255, .18);
     background: rgba(255, 255, 255, .06);
     padding: 10px 12px;
     border-radius: 14px;
 }

 /* Article card */
 .wrap {
     padding: 26px 0 40px
 }

 .card {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     overflow: hidden;
 }

 .img {
     width: 100%;
     height: 320px;
     object-fit: cover;
     display: block;
     background: #dfe8ff;
 }

 .content {
     padding: 18px 18px 22px
 }

 h1 {
     margin: 0 0 10px;
     font-size: 28px;
     line-height: 1.4;
     color: var(--blue-900);
 }

 .meta {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     align-items: center;
     margin-bottom: 14px;
     color: var(--muted);
     font-size: 13px;
 }

 .pill {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 6px 10px;
     border-radius: 999px;
     border: 1px solid rgba(255, 138, 0, .35);
     background: rgba(255, 138, 0, .10);
     color: #1d1200;
     font-weight: 800;
     font-size: 12px;
 }

 .body {
     line-height: 2;
     color: #12203a;
     font-size: 16px;
 }

 .body p {
     margin: 0 0 12px
 }

 .body h2 {
     margin: 18px 0 8px;
     color: var(--blue-900)
 }

 .body ul {
     margin: 0 0 12px;
     padding: 0 18px
 }

 .body li {
     margin: 8px 0
 }

 .footer {
     margin-top: 18px;
     color: var(--muted);
     font-size: 13px;
     display: flex;
     justify-content: space-between;
     gap: 12px;
     flex-wrap: wrap;
 }

 .line {
     height: 1px;
     background: var(--border);
     margin: 16px 0 14px;
 }

 /* Responsive */
 @media (max-width: 680px) {
     .img {
         height: 220px
     }

     h1 {
         font-size: 22px
     }

     .body {
         font-size: 15px
     }
 }