@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#0A0A0F; --surface:#111118; --card:#16161F; --border:#1E1E2E; --muted:#2A2A3E;
  --accent:#7C6AF7; --glow:#9B8FFF; --text:#E8E6FF; --sub:#8A88AA;
  --orange:#FF6B35; --teal:#00D9C0; --pink:#FF4D8B;
  --fd:'Instrument Serif',serif; --fb:'DM Sans',sans-serif; --fm:'JetBrains Mono',monospace;
}
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:var(--fb); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
::-webkit-scrollbar{width:5px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:var(--muted);border-radius:3px}
::selection{background:rgba(124,106,247,.3)}
.bg-grid{background-image:radial-gradient(circle,#1E1E2E 1px,transparent 1px);background-size:32px 32px}
.gradient-text{background:linear-gradient(135deg,#7C6AF7,#FF4D8B 50%,#FF6B35);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.container{max-width:1200px;margin:0 auto;padding:0 1.25rem}
.container-sm{max-width:800px;margin:0 auto;padding:0 1.25rem}

/* NAV */
.navbar{position:fixed;top:0;left:0;right:0;z-index:100;height:64px;background:rgba(10,10,15,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(30,30,46,.8)}
.navbar-inner{height:64px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.logo-icon{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#7C6AF7,#FF4D8B);display:flex;align-items:center;justify-content:center;font-size:16px}
.logo-text{font-family:var(--fd);font-size:1.2rem}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-link{color:var(--sub);text-decoration:none;font-size:.875rem;padding:6px 12px;border-radius:8px;transition:color .15s,background .15s}
.nav-link:hover{color:var(--text);background:rgba(255,255,255,.05)}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;font-weight:500;padding:9px 20px;border-radius:12px;border:none;cursor:pointer;text-decoration:none;transition:all .2s}
.btn-primary{background:var(--accent);color:white;box-shadow:0 0 20px rgba(124,106,247,.3)}
.btn-primary:hover{background:var(--glow);transform:translateY(-1px)}
.btn-secondary{background:var(--card);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--accent);transform:translateY(-1px)}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px}
.hamburger span{display:block;width:20px;height:2px;background:var(--sub);margin:4px 0;border-radius:2px;transition:.3s}
.mobile-menu{display:none;flex-direction:column;background:var(--surface);border-top:1px solid var(--border);padding:8px 20px 16px;position:fixed;top:64px;left:0;right:0;z-index:99}
.mobile-menu.open{display:flex}
.mobile-menu a{color:var(--sub);text-decoration:none;padding:12px 0;font-size:.9rem;border-bottom:1px solid var(--border)}
.mobile-menu a:last-child{border:none}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:500;padding:5px 12px;border-radius:100px}
.badge-accent{background:rgba(124,106,247,.15);color:var(--glow);border:1px solid rgba(124,106,247,.3)}
.badge-teal{background:rgba(0,217,192,.15);color:var(--teal);border:1px solid rgba(0,217,192,.3)}
.badge-pink{background:rgba(255,77,139,.15);color:var(--pink);border:1px solid rgba(255,77,139,.3)}
.badge-orange{background:rgba(255,107,53,.15);color:var(--orange);border:1px solid rgba(255,107,53,.3)}

/* REVEAL */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* BLOG LIST */
.blog-featured{display:grid;grid-template-columns:1fr;gap:1.5rem;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:2rem;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s;margin-bottom:1.5rem}
.blog-featured:hover{border-color:rgba(124,106,247,.4);transform:translateY(-2px)}
@media(min-width:768px){.blog-featured{grid-template-columns:3fr 2fr}}
.blog-featured-visual{background:var(--surface);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;min-height:140px}
.blog-grid-main{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.blog-grid-main{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.blog-grid-main{grid-template-columns:repeat(3,1fr)}}
.blog-card-main{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.5rem;text-decoration:none;color:inherit;display:block;transition:transform .2s,border-color .2s}
.blog-card-main:hover{transform:translateY(-3px);border-color:rgba(124,106,247,.4)}
.blog-tag-main{font-size:.7rem;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.6rem}
.blog-card-main h3{font-family:var(--fd);font-size:1.05rem;line-height:1.35;margin-bottom:.6rem}
.blog-card-main p{color:var(--sub);font-size:.82rem;line-height:1.6;margin-bottom:1rem}
.blog-meta{display:flex;justify-content:space-between;font-size:.78rem;color:var(--sub)}

/* ARTICLE */
.article-hero{padding:7rem 0 3rem;text-align:left}
.article-body{max-width:720px;margin:0 auto;padding:2rem 1.25rem 5rem}
.article-body h2{font-family:var(--fd);font-size:1.7rem;margin:2.5rem 0 .8rem;color:var(--text)}
.article-body h3{font-family:var(--fd);font-size:1.25rem;margin:2rem 0 .6rem;color:var(--text)}
.article-body p{color:var(--sub);font-size:.9rem;line-height:1.8;margin-bottom:1.2rem}
.article-body strong{color:var(--text);font-weight:600}
.article-body ul,.article-body ol{padding-left:1.5rem;margin-bottom:1.2rem}
.article-body li{color:var(--sub);font-size:.9rem;line-height:1.8;margin-bottom:.4rem}
.article-body li strong{color:var(--text)}
.article-body blockquote{border-left:3px solid var(--accent);padding:.75rem 1.25rem;background:rgba(124,106,247,.07);border-radius:0 8px 8px 0;margin:1.5rem 0}
.article-body blockquote p{color:var(--text);margin:0;font-style:italic}
.article-body code{font-family:var(--fm);font-size:.82rem;background:var(--muted);padding:2px 7px;border-radius:5px;color:var(--teal)}
.article-body pre{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.25rem;overflow-x:auto;margin:1.5rem 0}
.article-body pre code{background:none;padding:0;font-size:.82rem;color:var(--teal)}
.article-cta{background:var(--card);border:1px solid var(--accent);border-radius:16px;padding:2rem;text-align:center;margin:3rem 0}
.article-cta h3{font-family:var(--fd);font-size:1.4rem;margin-bottom:.5rem}
.article-cta p{color:var(--sub);font-size:.875rem;margin-bottom:1.25rem}

/* LEGAL */
.legal-body{max-width:720px;margin:0 auto;padding:7rem 1.25rem 5rem}
.legal-body h1{font-family:var(--fd);font-size:2.5rem;margin-bottom:.5rem}
.legal-body .last-updated{color:var(--sub);font-size:.8rem;margin-bottom:2.5rem}
.legal-body h2{font-family:var(--fd);font-size:1.4rem;margin:2.5rem 0 .75rem;color:var(--text)}
.legal-body p,.legal-body li{color:var(--sub);font-size:.875rem;line-height:1.8;margin-bottom:.75rem}
.legal-body ul,.legal-body ol{padding-left:1.5rem;margin-bottom:1rem}
.legal-body a{color:var(--accent);text-decoration:underline}
.legal-body strong{color:var(--text);font-weight:600}

/* FOOTER SIMPLE */
.footer-main{background:var(--surface);border-top:1px solid var(--border);padding:1.5rem 0}
.footer-inner{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
@media(min-width:640px){.footer-inner{flex-direction:row;justify-content:space-between}}
.footer-inner p,.footer-inner a{color:var(--sub);font-size:.78rem;text-decoration:none}
.footer-inner a:hover{color:var(--text)}
.footer-inner p a{color:var(--sub);text-decoration:underline}
.footer-inner p a:hover{color:var(--text)}

@media(max-width:767px){.nav-links,.nav-cta{display:none!important}.hamburger{display:block}}
@media(min-width:768px){.hamburger{display:none}.mobile-menu{display:none!important}}