@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
*{font-family:'Inter',sans-serif;box-sizing:border-box;margin:0;padding:0;}
body{background:#060612;color:#fff;}
.grad{background:linear-gradient(135deg,#060612,#0d0d2b,#060612);}
.nav{border-bottom:1px solid rgba(255,255,255,0.05);padding:16px 24px;position:sticky;top:0;z-index:50;background:rgba(0,0,0,0.5);backdrop-filter:blur(20px);}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;}
.logo-text{font-size:18px;font-weight:900;}
.logo-king{color:#818cf8;}
.nav-links{display:flex;align-items:center;gap:20px;}
.nav-links a{color:rgba(255,255,255,0.4);text-decoration:none;font-size:14px;transition:color 0.2s;}
.nav-links a:hover{color:#fff;}
.btn-primary{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;padding:8px 18px;border-radius:8px;font-weight:700;font-size:14px;text-decoration:none;border:none;cursor:pointer;transition:opacity 0.2s;}
.btn-primary:hover{opacity:0.85;}
.btn-secondary{background:rgba(255,255,255,0.08);color:#fff;padding:8px 18px;border-radius:8px;font-weight:600;font-size:14px;text-decoration:none;border:1px solid rgba(255,255,255,0.1);cursor:pointer;transition:all 0.2s;}
.btn-secondary:hover{background:rgba(255,255,255,0.15);}
.container{max-width:900px;margin:0 auto;padding:0 24px;}
.container-wide{max-width:1200px;margin:0 auto;padding:0 24px;}
.page-hero{padding:60px 0 40px;text-align:center;}
.page-hero h1{font-size:42px;font-weight:900;margin-bottom:12px;line-height:1.2;}
.page-hero p{color:rgba(255,255,255,0.4);font-size:16px;}
.content-box{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:40px;margin-bottom:24px;}
.content-box h2{font-size:22px;font-weight:700;margin-bottom:16px;color:#a5b4fc;}
.content-box h3{font-size:17px;font-weight:600;margin:20px 0 10px;color:rgba(255,255,255,0.8);}
.content-box p{color:rgba(255,255,255,0.5);font-size:15px;line-height:1.8;margin-bottom:12px;}
.content-box ul,.content-box ol{color:rgba(255,255,255,0.5);font-size:15px;line-height:1.8;padding-left:20px;margin-bottom:12px;}
.content-box li{margin-bottom:6px;}
.content-box a{color:#818cf8;text-decoration:none;}
.content-box a:hover{text-decoration:underline;}
.badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;margin:2px;}
.badge-indigo{background:rgba(99,102,241,0.15);border:1px solid rgba(99,102,241,0.3);color:#a5b4fc;}
.badge-green{background:rgba(16,185,129,0.15);border:1px solid rgba(16,185,129,0.3);color:#6ee7b7;}
.badge-red{background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.3);color:#fca5a5;}
.footer{border-top:1px solid rgba(255,255,255,0.05);padding:40px 24px;margin-top:60px;}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px;}
.footer-links{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;}
.footer-links a{color:rgba(255,255,255,0.25);text-decoration:none;font-size:13px;transition:color 0.2s;}
.footer-links a:hover{color:rgba(255,255,255,0.6);}
.footer-copy{color:rgba(255,255,255,0.15);font-size:12px;}
.blog-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:28px;margin-bottom:20px;transition:border-color 0.2s;text-decoration:none;display:block;}
.blog-card:hover{border-color:rgba(99,102,241,0.4);}
.blog-card h2{font-size:20px;font-weight:700;color:#fff;margin-bottom:8px;line-height:1.3;}
.blog-card p{color:rgba(255,255,255,0.4);font-size:14px;line-height:1.6;margin-bottom:12px;}
.blog-meta{display:flex;gap:12px;align-items:center;font-size:12px;color:rgba(255,255,255,0.25);}
.blog-post h1{font-size:36px;font-weight:900;margin-bottom:16px;line-height:1.2;}
.blog-post h2{font-size:24px;font-weight:700;margin:32px 0 12px;color:#a5b4fc;}
.blog-post h3{font-size:19px;font-weight:600;margin:24px 0 10px;color:rgba(255,255,255,0.8);}
.blog-post p{color:rgba(255,255,255,0.6);font-size:16px;line-height:1.9;margin-bottom:16px;}
.blog-post ul,.blog-post ol{color:rgba(255,255,255,0.6);font-size:16px;line-height:1.9;padding-left:24px;margin-bottom:16px;}
.blog-post li{margin-bottom:8px;}
.blog-post img{width:100%;border-radius:12px;margin:20px 0;border:1px solid rgba(255,255,255,0.08);}
.blog-post a{color:#818cf8;}
.blog-post strong{color:rgba(255,255,255,0.85);}
.blog-post blockquote{border-left:4px solid #4f46e5;padding:12px 20px;background:rgba(99,102,241,0.08);border-radius:0 8px 8px 0;margin:20px 0;font-style:italic;color:rgba(255,255,255,0.5);}
.blog-post code{background:rgba(255,255,255,0.08);padding:2px 8px;border-radius:4px;font-family:monospace;font-size:14px;color:#a5b4fc;}
.blog-post pre{background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:20px;overflow-x:auto;margin:20px 0;}
.blog-post pre code{background:none;padding:0;color:#10b981;}
.tag-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px;}
.inp{width:100%;background:#0f0f23;border:1px solid rgba(255,255,255,0.15);border-radius:12px;padding:12px 16px;color:#fff;font-size:14px;outline:none;transition:border 0.2s;}
.inp:focus{border-color:rgba(99,102,241,0.6);}
.inp::placeholder{color:rgba(255,255,255,0.25);}
.glow{box-shadow:0 0 40px rgba(99,102,241,0.15);border:1px solid rgba(99,102,241,0.2);}
@media(max-width:768px){
  .nav-links a:not(.btn-primary){display:none;}
  .page-hero h1{font-size:28px;}
  .blog-post h1{font-size:26px;}
  .content-box{padding:24px;}
}