*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--blue:#2563eb;--blue-dark:#1d4ed8;--blue-light:#eff6ff;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--green:#059669}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:var(--gray-900);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 48px;max-width:1280px;margin:0 auto}
.nav-brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:18px;color:var(--gray-900)}
.nav-logo{width:32px;height:32px;background:var(--blue);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-logo svg{width:18px;height:18px}
.nav-links{display:flex;align-items:center;gap:40px}
.nav-links a{font-size:14px;color:var(--gray-600);font-weight:500}
.nav-links a:hover{color:var(--gray-900);text-decoration:none}
.nav-links a.active{color:var(--blue)}
.nav-cta{display:flex;align-items:center;gap:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:600;border:1px solid transparent;cursor:pointer;font-family:inherit;white-space:nowrap}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}

.blog-header{max-width:860px;margin:0 auto;padding:80px 24px 48px;text-align:center}
.blog-header h1{font-size:48px;font-weight:700;letter-spacing:-0.03em;margin-bottom:16px}
.blog-header p{font-size:18px;color:var(--gray-600);max-width:520px;margin:0 auto}

.posts{max-width:860px;margin:0 auto;padding:0 24px 80px}
.post{border-bottom:1px solid var(--gray-200);padding:40px 0}
.post:first-child{padding-top:0}
.post-meta{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--gray-500);margin-bottom:8px}
.post-tag{background:var(--blue-light);color:var(--blue);padding:4px 10px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
.post h2{font-size:24px;font-weight:600;margin-bottom:10px}
.post h2 a{color:var(--gray-900)}
.post h2 a:hover{color:var(--blue);text-decoration:none}
.post-excerpt{font-size:15px;color:var(--gray-600);line-height:1.8}
.post-read{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--blue);margin-top:12px}
.post-read:hover{text-decoration:none}
.post-read svg{width:16px;height:16px;transition:transform 0.15s}
.post-read:hover svg{transform:translateX(4px)}

.article{max-width:760px;margin:0 auto;padding:48px 24px 80px}
.article .back{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--gray-500);font-weight:500;margin-bottom:40px}
.article .back:hover{color:var(--gray-900);text-decoration:none}
.article h1{font-size:40px;font-weight:700;letter-spacing:-0.02em;margin-bottom:12px;line-height:1.2}
.article .meta{font-size:14px;color:var(--gray-500);margin-bottom:40px;display:flex;align-items:center;gap:12px}
.article h2{font-size:24px;font-weight:600;margin:40px 0 12px}
.article h3{font-size:18px;font-weight:600;margin:32px 0 8px;color:var(--gray-800)}
.article p,.article li{font-size:16px;color:var(--gray-700);line-height:1.9}
.article ul{padding-left:24px;margin:16px 0}
.article li{margin-bottom:8px}
.article blockquote{border-left:3px solid var(--blue);background:var(--blue-light);padding:20px 24px;margin:24px 0;border-radius:0 8px 8px 0}
.article blockquote p{font-style:italic;color:var(--gray-700);margin:0}
.article code{background:var(--gray-100);padding:2px 6px;border-radius:4px;font-size:14px;font-family:'JetBrains Mono',monospace}
.article pre{background:var(--gray-900);color:#e5e7eb;padding:20px 24px;border-radius:8px;overflow-x:auto;margin:24px 0}
.article pre code{background:transparent;padding:0;color:inherit;font-size:13px;line-height:1.7}
.article .divider{height:1px;background:var(--gray-200);margin:40px 0}
.article .cta-box{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:12px;padding:32px;margin:40px 0;text-align:center}
.article .cta-box h3{font-size:20px;margin:0 0 8px}
.article .cta-box p{font-size:14px;color:var(--gray-600);margin-bottom:20px}
.article .cta-box .btn{box-shadow:0 4px 14px rgba(37,99,235,0.3)}

.footer{border-top:1px solid var(--gray-200);padding:40px 24px;text-align:center;font-size:13px;color:var(--gray-500)}

@media(max-width:768px){
  .blog-header h1{font-size:36px}
  .article h1{font-size:28px}
  .nav{padding:16px 20px;flex-wrap:wrap;gap:12px}
  .nav-links{order:3;width:100%;justify-content:center;gap:20px}
}