:root{
  --ex-primary: #0f172a;        /* dark navy */
  --ex-accent: #14b8a6;         /* teal mint */
  --ex-soft: #f1f5f9;           /* soft background */
  --ex-card: #ffffff;
  --ex-text: #0b1220;
  --ex-muted: #6b7280;
}
.navbar{
  background: var(--ex-card);
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
  padding: 14px 0;
}

.navbar-brand{
  font-weight: 800;
  font-size: 22px;
  color: var(--ex-primary) !important;
}

.nav-link{
  color: var(--ex-text) !important;
  font-weight: 500;
  margin-left: 18px;
}

.nav-link:hover{
  color: var(--ex-accent) !important;
}
.hero{
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  padding: 100px 0;
  text-align: center;
}

.hero h1{
  font-size: 48px;
  font-weight: 800;
  color: var(--ex-primary);
}

.hero p{
  font-size: 18px;
  color: var(--ex-muted);
  margin-top: 15px;
}
.card{
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
  transition: all .25s ease;
}

.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
.article-layout{
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 40px;
}

@media(max-width:992px){
  .article-layout{
    grid-template-columns: 1fr;
  }
}

.sidebar{
  position: sticky;
  top: 100px;
}
footer{
  background: var(--ex-primary);
  color: #fff;
  padding: 60px 0;
}

footer a{
  color: #cbd5e1;
  text-decoration: none;
}

footer a:hover{
  color: var(--ex-accent);
}

.footer-title{
  font-weight: 700;
  margin-bottom: 15px;
}