:root{
  --bg:#0b0f17; --bg-2:#0f1420; --card:#121827;
  --text:#e6eefc; --muted:#9fb2d7;
  --brand:#3b82f6; --brand-2:#8b5cf6;
  --accent:linear-gradient(135deg, rgba(59,130,246,.35), rgba(139,92,246,.35));
  --glass:rgba(17,25,40,.55);
  --border:rgba(148,163,184,.15);
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(59,130,246,.15), transparent),
    radial-gradient(1000px 500px at 100% 0%, rgba(139,92,246,.15), transparent),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}

/* navbar */
.navbar{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(10,14,23,.9),rgba(10,14,23,.6));backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-container{max-width:1200px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between}
.nav-logo h2{margin:0;font-weight:800;letter-spacing:.3px}
.nav-menu{display:flex;gap:16px;align-items:center}
.nav-link{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px}
.nav-link:hover{color:var(--text);background:var(--accent)}
.get-started-btn{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:none;padding:10px 14px;border-radius:10px;cursor:pointer;box-shadow:var(--shadow)}

/* hero */
.hero-section{padding:64px 20px 36px}
.hero-content{max-width:900px;margin:0 auto;text-align:center}
.hero-content h1{font-size:52px;margin:0 0 8px}
.hero-content p{color:var(--muted);margin:0 0 18px}
.highlight{background:linear-gradient(135deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.search-container{display:inline-flex;gap:8px;background:var(--glass);border:1px solid var(--border);padding:8px;border-radius:12px;box-shadow:var(--shadow)}
.search-input{width:320px;padding:10px 12px;color:var(--text);background:transparent;border:none;outline:none}
.search-btn{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:none;padding:10px 14px;border-radius:10px;cursor:pointer}

/* layout */
.main-content{padding:24px 20px 60px}
.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr; /* Sidebar + content */
  gap: 24px;
}
.sidebar {
  position: sticky;
  top: 76px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sidebar h3{margin:0 0 10px}
.category-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.category-link{color:var(--muted);text-decoration:none;padding:10px 12px;border-radius:10px;display:block;border:1px solid var(--border);background:rgba(15,20,32,.6)}
.category-link:hover{color:var(--text);background:var(--accent)}
.category-link.active{color:#fff;background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(139,92,246,.15));border-color:rgba(99,102,241,.35)}
.tags-container{display:flex;flex-wrap:wrap;gap:8px}
.tag{padding:6px 10px;border:1px solid var(--border);color:var(--muted);border-radius:999px;background:rgba(15,20,32,.6)}

/* cards */
.articles-section h2{margin:8px 0 14px}
.featured-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.featured-card,.article-card{background:rgba(15,20,32,.7);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.card-image{height:160px;background:
  radial-gradient(600px 200px at 20% -10%, rgba(59,130,246,.25), transparent),
  radial-gradient(600px 200px at 100% 0%, rgba(139,92,246,.25), transparent),
  linear-gradient(180deg,#0e1526,#0a0f1a);
display:flex;align-items:center;justify-content:center}
.placeholder-img{font-size:42px}
.placeholder-img.large{font-size:64px;height:320px;display:flex;align-items:center;justify-content:center}
.card-content{padding:14px}
.card-content h3{margin:4px 0 8px}
.card-content p{margin:0 0 12px;color:var(--muted)}
.card-meta{display:flex;align-items:center;justify-content:space-between;color:var(--muted)}
.read-more-btn{background:transparent;color:var(--text);border:1px solid var(--border);padding:8px 10px;border-radius:10px;cursor:pointer}
.read-more-btn:hover{background:var(--accent)}
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* article container */

.articles-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.featured-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* about me */
.about-me {
  background: #111;
  color: #f5f5f5;
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
  max-width: 800px;
  margin: 3rem auto;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.about-me h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #fff;
}

.about-me p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  color: #ccc;
}

.about-btn {
  background: #ff4081;
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 2rem;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.2s ease;
}

.about-btn:hover {
  background: #ff5f9e;
  transform: scale(1.05);
}

/* Cards */
.featured-card, .article-card {
  background: rgba(15,20,32,.7);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Responsive */
@media (max-width:1024px){
  .content-wrapper { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .featured-grid { grid-template-columns: 1fr; }
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width:640px){
  .articles-grid { grid-template-columns: 1fr; }
  .search-input { width: 220px; }
}



/* footer */
.footer{border-top:1px solid var(--border);padding:36px 20px;background:rgba(10,14,23,.6)}
.footer-content{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{color:var(--text)}
.social-links{display:flex;gap:15px}
.social-link{display:flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:6px;border:1px solid var(--border);transition:all 0.3s ease}
.social-link:hover{color:var(--text);background:rgba(15,20,32,.5)}