:root {
  --ww-bg: #0d1117;
  --ww-border: #30363d;
  --ww-green: #22c55e;
  --ww-surface: #161b22;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.blog-page,
.static-page,
.join-page {
  min-height: 100vh;
  background: var(--ww-bg);
  color: #c9d1d9;
  font-family: 'Inter', sans-serif;
}

.blog-page .ww-nav,
.static-page .ww-nav,
.join-page .ww-nav {
  background: rgba(13, 17, 23, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ww-border);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.blog-page .ww-nav .navbar-brand,
.static-page .ww-nav .navbar-brand,
.join-page .ww-nav .navbar-brand {
  font-size: 2rem;
  font-weight: 800;
  color: #fff !important;
  letter-spacing: -0.5px;
  text-decoration: none;
}

.blog-page .ww-nav .nav-link,
.static-page .ww-nav .nav-link,
.join-page .ww-nav .nav-link {
  color: #8b949e !important;
  font-weight: 500;
  transition: color .2s;
  text-decoration: none;
}

.blog-page .ww-nav .nav-link:hover,
.static-page .ww-nav .nav-link:hover,
.join-page .ww-nav .nav-link:hover {
  color: #fff !important;
}

.blog-page .ww-nav .dropdown-menu,
.static-page .ww-nav .dropdown-menu,
.join-page .ww-nav .dropdown-menu {
  background-color: var(--ww-surface);
  border: 1px solid var(--ww-border);
  border-radius: 8px;
  padding: .35rem 0;
  margin-top: .35rem;
  min-width: 11rem;
}

.blog-page .ww-nav .dropdown-item,
.static-page .ww-nav .dropdown-item,
.join-page .ww-nav .dropdown-item {
  color: #c9d1d9;
  font-size: .9375rem;
  padding: .45rem 1rem;
}

.blog-page .ww-nav .dropdown-item:hover,
.blog-page .ww-nav .dropdown-item:focus,
.static-page .ww-nav .dropdown-item:hover,
.static-page .ww-nav .dropdown-item:focus,
.join-page .ww-nav .dropdown-item:hover,
.join-page .ww-nav .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.blog-page .ww-nav .dropdown-toggle::after,
.static-page .ww-nav .dropdown-toggle::after,
.join-page .ww-nav .dropdown-toggle::after {
  vertical-align: 0.12em;
}

.blog-page .btn-primary-ww,
.static-page .btn-primary-ww,
.join-page .btn-primary-ww {
  background: var(--ww-green);
  border-color: var(--ww-green);
  color: #000;
  font-weight: 700;
  padding: .7rem 1.8rem;
  border-radius: 8px;
  font-size: 1rem;
  text-decoration: none;
  transition: all .2s;
}

.blog-page .btn-primary-ww:hover,
.static-page .btn-primary-ww:hover,
.join-page .btn-primary-ww:hover {
  background: #16a34a;
  border-color: #16a34a;
  color: #000;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(34,197,94,.3);
}

.blog-page .btn-outline-ww,
.static-page .btn-outline-ww,
.join-page .btn-outline-ww {
  background: transparent;
  border: 1px solid var(--ww-border);
  color: #e6edf3;
  font-weight: 600;
  padding: .7rem 1.8rem;
  border-radius: 8px;
  font-size: 1rem;
  text-decoration: none;
  transition: all .2s;
}

.blog-page .btn-outline-ww:hover,
.static-page .btn-outline-ww:hover,
.join-page .btn-outline-ww:hover {
  border-color: #8b949e;
  color: #fff;
  background: rgba(255,255,255,.04);
}

.blog-page footer,
.static-page footer,
.join-page footer {
  background: var(--ww-bg);
  border-top: 1px solid var(--ww-border);
}

.blog-page footer a,
.static-page footer a,
.join-page footer a {
  color: #8b949e;
  text-decoration: none;
  transition: color .2s;
}

.blog-page footer a:hover,
.static-page footer a:hover,
.join-page footer a:hover {
  color: #fff;
}