*{margin:0;padding:0;box-sizing:border-box}
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');
:root{--bg:#0f1319;--fg:#e2e6ed;--card:#171c24;--primary:#00d4ff;--primary-fg:#0f1319;--secondary:#252b36;--secondary-fg:#c5cad4;--muted:#1e232d;--muted-fg:#6b7280;--accent:#a855f7;--border:#2a3040;--radius:0.75rem}
body{background:var(--bg);color:var(--fg);font-family:'Inter',sans-serif;line-height:1.6}
h1,h2,h3,h4,h5,h6{font-family:'Orbitron',sans-serif}
a{color:var(--primary);text-decoration:none}a:hover{opacity:0.85}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(23,28,36,0.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem}
.logo{font-family:'Orbitron',sans-serif;font-size:1.25rem;font-weight:700;color:var(--primary);text-shadow:0 0 20px rgba(0,212,255,0.5)}
.nav{display:flex;gap:1.5rem}
.nav a{color:var(--muted-fg);font-size:0.875rem;transition:color 0.2s}
.nav a:hover{color:var(--primary)}
.menu-toggle{display:none;background:none;border:none;color:var(--fg);font-size:1.5rem;cursor:pointer}
@media(max-width:768px){.nav{display:none}.nav.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:rgba(23,28,36,0.95);padding:1rem;border-top:1px solid var(--border)}.menu-toggle{display:block}}

/* Hero */
.hero{padding:5rem 0;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,212,255,0.05),transparent);pointer-events:none}
.hero h1{font-size:clamp(1.75rem,5vw,3rem);font-weight:700;margin-bottom:1rem;text-shadow:0 0 20px rgba(0,212,255,0.5)}
.hero p{color:var(--muted-fg);max-width:600px;margin:0 auto 2rem}

/* Category Filters */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:0.5rem;margin-bottom:2rem}
.filter-btn{padding:0.5rem 1rem;border-radius:9999px;border:none;font-size:0.875rem;font-weight:500;cursor:pointer;transition:all 0.2s;background:var(--secondary);color:var(--secondary-fg)}
.filter-btn.active,.filter-btn:hover{background:linear-gradient(135deg,var(--primary),var(--accent));color:var(--primary-fg)}

/* Cards Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;padding-bottom:3rem}
.card{background:rgba(23,28,36,0.8);backdrop-filter:blur(12px);border:1px solid rgba(42,48,64,0.5);border-radius:var(--radius);overflow:hidden;transition:box-shadow 0.3s}
.card:hover{box-shadow:0 0 20px rgba(0,212,255,0.15)}
.card-img{height:10rem;display:flex;align-items:center;justify-content:center;background:var(--secondary);font-size:3.75rem}
.card-body{padding:1.25rem}
.card-meta{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem}
.tag{font-size:0.75rem;font-weight:600;color:var(--primary);background:rgba(0,212,255,0.1);padding:0.125rem 0.5rem;border-radius:0.25rem}
.card-meta span{font-size:0.75rem;color:var(--muted-fg)}
.card h3{font-family:'Orbitron',sans-serif;font-size:0.875rem;font-weight:600;margin-bottom:0.5rem;color:var(--fg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card:hover h3{color:var(--primary)}
.card p{font-size:0.75rem;color:var(--muted-fg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .date{font-size:0.75rem;color:var(--muted-fg);margin-top:0.75rem}

/* Content pages */
.page-content{max-width:48rem;margin:0 auto;padding:4rem 1rem}
.page-content h1{font-size:1.875rem;margin-bottom:0.5rem}
.page-content .subtitle{font-size:0.875rem;color:var(--muted-fg);margin-bottom:2rem}
.page-content h2{font-family:'Orbitron',sans-serif;font-size:1.125rem;color:var(--primary);margin:1.5rem 0 0.5rem}
.page-content p,.page-content li{font-size:0.875rem;color:var(--muted-fg);margin-bottom:1rem;line-height:1.7}
.page-content ul{padding-left:1.5rem}
.page-content strong{color:var(--fg)}

/* Glass card info */
.info-card{background:rgba(23,28,36,0.8);backdrop-filter:blur(12px);border:1px solid rgba(42,48,64,0.5);border-radius:var(--radius);padding:1.5rem;margin-bottom:2rem}

/* Form */
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:0.875rem;color:var(--fg);margin-bottom:0.25rem}
.form-group input,.form-group textarea{width:100%;background:var(--secondary);border:1px solid var(--border);border-radius:var(--radius);padding:0.5rem 1rem;color:var(--fg);font-size:0.875rem;font-family:'Inter',sans-serif}
.form-group input:focus,.form-group textarea:focus{outline:none;box-shadow:0 0 0 2px var(--primary)}
.form-group textarea{resize:none}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:var(--primary-fg);border:none;padding:0.5rem 1.5rem;border-radius:var(--radius);font-size:0.875rem;font-weight:600;cursor:pointer;transition:opacity 0.2s}
.btn-primary:hover{opacity:0.9}

/* Article detail */
.article-img{height:12rem;display:flex;align-items:center;justify-content:center;background:var(--secondary);font-size:4.5rem;border-radius:var(--radius);margin-bottom:2rem}

/* Footer */
.footer{border-top:1px solid var(--border);background:var(--card);margin-top:4rem;padding:3rem 0}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}
.footer h3{font-family:'Orbitron',sans-serif;font-size:1.125rem;color:var(--primary);margin-bottom:0.75rem}
.footer h4{font-family:'Orbitron',sans-serif;font-size:0.875rem;color:var(--fg);margin-bottom:0.75rem}
.footer p,.footer li,.footer a{font-size:0.875rem;color:var(--muted-fg)}
.footer ul{list-style:none}
.footer li{margin-bottom:0.5rem}
.footer-bottom{border-top:1px solid var(--border);margin-top:2rem;padding-top:2rem;text-align:center}
.footer-bottom p{font-size:0.75rem;color:var(--muted-fg);margin-bottom:0.25rem}