:root { --navy:#0D1B2A; --blue:#00A3FF; --orange:#D34100; --gold:#C89B3C; --ink:#1E293B; --muted:#64748B; --line:#E2E8F0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:Inter,Arial,sans-serif; line-height:1.72; }
a { color:inherit; }
.site-nav { min-height:64px; padding:0 2rem; display:flex; align-items:center; justify-content:space-between; background:var(--navy); color:#fff; }
.brand { font:800 1.2rem Montserrat,Arial,sans-serif; letter-spacing:.02em; text-decoration:none; }
.brand span { background:linear-gradient(90deg,var(--blue),var(--gold),var(--orange)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.back { color:#e2e8f0; font-size:.9rem; text-decoration:none; }
.hero { background:radial-gradient(ellipse at 18% 50%,rgba(0,163,255,.14),transparent 45%),radial-gradient(ellipse at 80% 20%,rgba(211,65,0,.12),transparent 42%),var(--navy); color:#fff; padding:5.5rem 1.5rem 4rem; text-align:center; }
.hero-inner { max-width:840px; margin:auto; }
.tag { display:inline-block; margin:0 0 1.5rem; padding:.35rem .85rem; border:1px solid rgba(200,155,60,.55); border-radius:20px; color:var(--gold); font:700 .7rem Montserrat,Arial,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
h1,h2 { font-family:Montserrat,Arial,sans-serif; }
h1 { max-width:800px; margin:0 auto 1.2rem; font-size:clamp(2.05rem,5vw,3.65rem); line-height:1.08; }
h1 em { font-style:normal; background:linear-gradient(90deg,var(--blue),var(--gold),var(--orange)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.deck { max-width:680px; margin:0 auto 1.4rem; color:#cbd5e1; font-size:1.08rem; }
.meta { color:#94a3b8; font-size:.9rem; }
.article { width:min(760px,calc(100% - 2.5rem)); margin:3.25rem auto 5rem; }
.cover { width:100%; display:block; border-radius:14px; margin:0 0 2.5rem; box-shadow:0 16px 40px rgba(13,27,42,.12); }
.article p { margin:0 0 1.45rem; font-size:1.07rem; }
.article h2 { margin:3rem 0 1rem; color:var(--navy); font-size:1.45rem; line-height:1.3; }
.quote { margin:2.25rem 0; padding:1.55rem 1.8rem; border-left:3px solid var(--blue); border-radius:0 12px 12px 0; background:#f8fafc; color:var(--navy); font:700 1.13rem/1.45 Montserrat,Arial,sans-serif; }
.share { margin:3rem 0 0; padding:1.5rem; border:1px solid var(--line); border-radius:12px; text-align:center; }
.share p { margin:0 0 1rem; font:700 .9rem Montserrat,Arial,sans-serif; }
.share a,.share button { display:inline-block; margin:.2rem; padding:.62rem 1rem; border:0; border-radius:7px; font:700 .8rem Montserrat,Arial,sans-serif; text-decoration:none; cursor:pointer; }
.share .linkedin { color:#fff; background:#0a66c2; }.share .copy { color:var(--navy); background:#e2e8f0; }
.author { display:flex; gap:1rem; margin-top:2.5rem; padding-top:2.5rem; border-top:1px solid var(--line); }
.avatar { width:52px; height:52px; display:grid; place-items:center; flex:none; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--blue),var(--orange)); font:800 1rem Montserrat,Arial,sans-serif; }
.author h2 { margin:0 0 .15rem; font-size:1rem; }.author p { margin:.2rem 0 0; color:var(--muted); font-size:.9rem; line-height:1.55; }
footer { padding:2.5rem 1.5rem; background:var(--navy); color:#94a3b8; text-align:center; font-size:.82rem; }
@media (max-width:600px) { .site-nav { padding:0 1.25rem; }.hero { padding:4rem 1.25rem 3rem; }.article { width:min(100% - 2.2rem,760px); } }