@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg-primary:#08080d;--bg-card:#0d0d15;--bg-elevated:#12121e;--border-subtle:#1a1a2e;--border-medium:#22223a;--text-primary:#eceff1;--text-secondary:#b0bec5;--text-muted:#78909c;--text-dim:#546e7a;--accent-blue:#64b5f6;--accent-purple:#ce93d8;--accent-red:#ef5350;--accent-green:#81c784;--accent-yellow:#ffd54f;--font-display:'Outfit',sans-serif;--font-mono:'JetBrains Mono',monospace;--font-body:'Inter','Segoe UI',sans-serif;--max-width:clamp(700px,75vw,1600px);--content-width:clamp(680px,65vw,900px)}
html{scroll-behavior:smooth}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--accent-blue);text-decoration:none;transition:color .2s}a:hover{color:var(--accent-purple)}
img{max-width:100%;height:auto;display:block}
.site-header{padding:16px clamp(16px,3vw,40px);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;max-width:var(--max-width);margin:0 auto;width:100%}
.site-header__logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.site-header__logo img{height:clamp(28px,3vw,40px);width:auto}
.site-header__logo-text{font-family:var(--font-display);font-weight:700;font-size:clamp(14px,1.2vw,18px);color:var(--text-secondary)}
.site-header__logo-text span{background:linear-gradient(135deg,var(--accent-blue),var(--accent-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}
.site-header nav{display:flex;gap:clamp(16px,2vw,32px);align-items:center}
.site-header nav a{font-family:var(--font-mono);font-size:clamp(11px,.85vw,14px);color:var(--text-muted);transition:color .2s;letter-spacing:.5px}
.site-header nav a:hover,.site-header nav a.active{color:var(--text-primary)}
.site-footer{border-top:1px solid var(--border-subtle);padding:clamp(32px,4vw,60px) clamp(16px,3vw,40px);margin-top:clamp(40px,5vw,80px)}
.site-footer__inner{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(24px,3vw,48px)}
.site-footer__brand p{color:var(--text-muted);font-size:clamp(12px,.85vw,14px);margin-top:12px;max-width:360px;line-height:1.6}
.site-footer__links h4,.site-footer__legal h4{font-family:var(--font-mono);font-size:clamp(10px,.75vw,12px);color:var(--text-dim);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px}
.site-footer__links ul,.site-footer__legal ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.site-footer__links a,.site-footer__legal a{color:var(--text-secondary);font-size:clamp(12px,.85vw,14px);transition:color .2s}
.site-footer__links a:hover,.site-footer__legal a:hover{color:var(--text-primary)}
.site-footer__bottom{max-width:var(--max-width);margin:clamp(24px,3vw,40px) auto 0;padding-top:clamp(16px,2vw,24px);border-top:1px solid var(--border-subtle);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.site-footer__bottom p{color:var(--text-dim);font-size:clamp(10px,.7vw,12px);font-family:var(--font-mono)}
.blog-hero{text-align:center;padding:clamp(40px,5vw,80px) clamp(16px,3vw,40px)}
.blog-hero h1{font-family:var(--font-display);font-size:clamp(28px,3.5vw,56px);font-weight:800;background:linear-gradient(135deg,var(--accent-blue),var(--accent-purple),var(--accent-red));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:12px}
.blog-hero p{color:var(--text-secondary);font-size:clamp(14px,1.1vw,18px);max-width:600px;margin:0 auto}
.blog-grid{max-width:var(--max-width);margin:0 auto;padding:0 clamp(16px,3vw,40px) clamp(40px,5vw,80px);display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(280px,22vw,380px),1fr));gap:clamp(16px,1.5vw,24px)}
.blog-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden;transition:border-color .2s,transform .2s;display:flex;flex-direction:column;text-decoration:none}
.blog-card:hover{border-color:var(--accent-blue);transform:translateY(-2px)}
.blog-card__img{width:100%;aspect-ratio:16/9;object-fit:cover}
.blog-card__body{padding:clamp(16px,1.5vw,24px);flex:1;display:flex;flex-direction:column}
.blog-card__tag{font-family:var(--font-mono);font-size:10px;color:var(--accent-purple);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.blog-card__title{font-family:var(--font-display);font-size:clamp(16px,1.2vw,20px);font-weight:600;color:var(--text-primary);margin-bottom:8px;line-height:1.3}
.blog-card__excerpt{color:var(--text-secondary);font-size:clamp(12px,.85vw,14px);line-height:1.6;flex:1}
.blog-card__meta{margin-top:16px;display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:clamp(10px,.7vw,12px);color:var(--text-dim)}
.article-container{max-width:var(--content-width);margin:0 auto;padding:clamp(24px,3vw,60px) clamp(16px,3vw,40px)}
.article-container h1{font-family:var(--font-display);font-size:clamp(26px,3vw,44px);font-weight:800;line-height:1.2;margin-bottom:16px;color:var(--text-primary)}
.article-meta{font-family:var(--font-mono);font-size:clamp(11px,.8vw,13px);color:var(--text-dim);margin-bottom:clamp(24px,3vw,40px);display:flex;gap:16px;flex-wrap:wrap}
.article-container .featured-img{width:100%;border-radius:12px;margin-bottom:clamp(24px,3vw,40px);border:1px solid var(--border-subtle)}
.article-container h2{font-family:var(--font-display);font-size:clamp(20px,2vw,30px);font-weight:700;margin:clamp(28px,3vw,44px) 0 12px;color:var(--text-primary)}
.article-container h3{font-family:var(--font-display);font-size:clamp(17px,1.5vw,23px);font-weight:600;margin:clamp(20px,2vw,32px) 0 8px;color:var(--text-primary)}
.article-container p{color:var(--text-secondary);font-size:clamp(14px,1vw,17px);margin-bottom:16px;line-height:1.8}
.article-container ul,.article-container ol{color:var(--text-secondary);font-size:clamp(14px,1vw,17px);margin:0 0 16px clamp(20px,2vw,32px);line-height:1.8}
.article-container li{margin-bottom:6px}
.article-container blockquote{border-left:3px solid var(--accent-purple);padding:12px 20px;margin:20px 0;background:var(--bg-elevated);border-radius:0 8px 8px 0;color:var(--text-secondary);font-style:italic}
.article-container code{font-family:var(--font-mono);background:var(--bg-elevated);padding:2px 6px;border-radius:4px;font-size:.9em;color:var(--accent-blue)}
.article-cta{background:linear-gradient(135deg,#64b5f610,#ce93d810);border:1px solid var(--accent-blue);border-radius:12px;padding:clamp(20px,2.5vw,36px);margin:clamp(28px,3vw,48px) 0;text-align:center}
.article-cta h3{margin-top:0;color:var(--accent-blue)}
.article-cta .cta-btn{display:inline-block;margin-top:12px;padding:12px 28px;background:var(--accent-blue);color:#08080d;font-family:var(--font-mono);font-weight:600;font-size:14px;border-radius:8px;transition:background .2s}
.article-cta .cta-btn:hover{background:var(--accent-purple);color:#fff}
.related-posts{margin-top:clamp(32px,4vw,60px);padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--border-subtle)}
.related-posts h3{font-family:var(--font-display);font-size:clamp(18px,1.5vw,24px);margin-bottom:16px}
.related-posts ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.related-posts a{color:var(--text-secondary);font-size:clamp(13px,.95vw,16px);padding:8px 0;display:block;border-bottom:1px solid var(--border-subtle);transition:color .2s}
.related-posts a:hover{color:var(--accent-blue)}
@media(max-width:768px){.site-footer__inner{grid-template-columns:1fr;gap:24px}.site-header nav{gap:12px}.blog-grid{grid-template-columns:1fr}}