@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg: #0b0e14;
  --bg-elevated: #11151f;
  --border: #1e2433;
  --text: #e7e9ee;
  --text-dim: #8b93a7;
  --violet: #7c5cff;
  --teal: #00d9c0;
  --coral: #ff6b9d;
  --amber: #ffa94d;
  --blue: #4dabf7;
  --gradient: linear-gradient(135deg, var(--violet), var(--teal));
  --radius: 14px;
}

*{box-sizing:border-box; margin:0; padding:0;}
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.wrap{max-width: 1120px; margin: 0 auto; padding: 0 24px;}

h1,h2,h3,h4{font-family:'Space Grotesk', sans-serif; font-weight:600; letter-spacing:-0.02em;}

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--teal);
}

/* Header */
header.site{
  border-bottom: 1px solid var(--border);
  position: sticky; top:0; z-index: 50;
  background: rgba(11,14,20,0.85);
  backdrop-filter: blur(10px);
}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; height:72px;}
.logo{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px;}
.logo span{background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;}
nav.main a{
  color: var(--text-dim); font-size:14px; font-weight:500; margin-left:28px;
  transition: color .2s;
}
nav.main a:hover{color:var(--text);}

/* Hero */
.hero{padding: 80px 0 60px; border-bottom:1px solid var(--border); position:relative; overflow:hidden;}
.hero::before{
  content:''; position:absolute; top:-200px; right:-150px; width:500px; height:500px;
  background: radial-gradient(circle, rgba(124,92,255,0.25), transparent 70%);
  pointer-events:none;
}
.hero h1{font-size: 44px; max-width: 680px; line-height:1.15; margin: 16px 0;}
.hero p.lead{color:var(--text-dim); font-size:17px; max-width:560px;}

/* Category pills */
.pills{display:flex; gap:10px; flex-wrap:wrap; margin-top:28px;}
.pill{
  font-family:'JetBrains Mono', monospace; font-size:12px; padding:8px 14px;
  border:1px solid var(--border); border-radius:100px; color:var(--text-dim);
  transition: all .2s;
}
.pill:hover{border-color: var(--violet); color:var(--text);}

/* Article grid */
.section-title{display:flex; align-items:baseline; justify-content:space-between; margin: 56px 0 24px;}
.section-title h2{font-size:24px;}
.section-title a{font-size:13px; color:var(--teal); font-family:'JetBrains Mono',monospace;}

.grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px;}
@media(max-width:900px){.grid{grid-template-columns: repeat(2,1fr);}}
@media(max-width:600px){.grid{grid-template-columns: 1fr;}}

.card{
  background: var(--bg-elevated); border:1px solid var(--border); border-radius: var(--radius);
  overflow:hidden; transition: transform .2s, border-color .2s;
  display:flex; flex-direction:column;
}
.card:hover{transform: translateY(-3px); border-color: rgba(124,92,255,0.4);}
.card .thumb{height:150px; background: var(--gradient); opacity:0.85; position:relative;}
.card .thumb .cat-badge{
  position:absolute; bottom:10px; left:12px; font-family:'JetBrains Mono',monospace;
  font-size:11px; background: rgba(0,0,0,0.4); padding:4px 10px; border-radius: 100px; color:#fff;
}
.card .body{padding:18px; flex:1; display:flex; flex-direction:column;}
.card h3{font-size:16px; margin-bottom:8px; line-height:1.35;}
.card p{color:var(--text-dim); font-size:13.5px; flex:1;}
.card .meta{font-size:12px; color:var(--text-dim); margin-top:14px; font-family:'JetBrains Mono',monospace;}

/* Article page */
.article-header{padding: 56px 0 32px; border-bottom:1px solid var(--border);}
.article-header .cat-tag{
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--teal);
  text-transform:uppercase; letter-spacing:0.08em;
}
.article-header h1{font-size:36px; margin:14px 0; max-width:760px;}
.article-meta{color:var(--text-dim); font-size:13.5px;}
.article-body{max-width: 720px; margin: 40px auto 0; padding: 0 24px; font-size:16.5px;}
.article-body h2{font-size:24px; margin: 40px 0 16px;}
.article-body h3{font-size:19px; margin: 28px 0 12px;}
.article-body p{margin-bottom: 18px; color: #d5d8e0;}
.article-body ul, .article-body ol{margin: 0 0 18px 22px; color:#d5d8e0;}
.article-body li{margin-bottom:8px;}
.article-body strong{color:#fff;}
.article-body blockquote{
  border-left:3px solid var(--violet); padding: 4px 20px; margin: 24px 0; color:var(--text-dim); font-style:italic;
}

/* Footer */
footer{border-top:1px solid var(--border); margin-top:100px; padding:40px 0; color:var(--text-dim); font-size:13px;}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;}
footer a{color:var(--text-dim);}
footer a:hover{color:var(--teal);}

.related-box{
  background: var(--bg-elevated); border:1px solid var(--border); border-radius: var(--radius);
  padding: 24px; margin: 48px 0;
}