:root {
  --koda-bg: #0e0f13;
  --koda-card: #13151b;
  --koda-card-2: #181b22;
  --koda-text: #e9edf1;
  --koda-muted: #9aa4b2;
  --koda-accent: #7c9cff;    /* soft neon blue */
  --koda-accent-2: #b77cff;  /* soft neon purple */
  --koda-glow: 0 0 24px rgba(124,156,255,0.35);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body.bg-koda {
  background: radial-gradient(1200px 800px at 10% -10%, #121521 0%, var(--koda-bg) 45%),
              radial-gradient(1200px 800px at 110% 10%, #15192a 0%, var(--koda-bg) 50%);
  color: var(--koda-text);
}

a { color: var(--koda-accent); text-decoration: none; }
a:hover { opacity: .9; }

.glass-nav {
  background: rgba(19, 21, 27, .6);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.btn-invite {
  --bs-btn-bg: linear-gradient(90deg, var(--koda-accent), var(--koda-accent-2));
  --bs-btn-border-color: rgba(255,255,255,.18);
  --bs-btn-hover-bg: linear-gradient(90deg, var(--koda-accent-2), var(--koda-accent));
  --bs-btn-hover-border-color: rgba(255,255,255,.25);
  --bs-btn-active-bg: linear-gradient(90deg, var(--koda-accent-2), var(--koda-accent));
  --bs-btn-active-border-color: rgba(255,255,255,.3);
  --bs-btn-color: #fff;             /* <— was #0b0d12 */
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  color: #fff;                      /* ensure specificity */
  font-weight: 700;
  border-width: 1px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, var(--koda-glow);
}
.btn-invite:hover { transform: translateY(-1px); }

.btn-outline-light {
  --bs-btn-color: #e6ebf1;
  --bs-btn-border-color: rgba(230,235,241,.55);
  --bs-btn-hover-color: #0b0d12;
  --bs-btn-hover-bg: #e6ebf1;
  --bs-btn-hover-border-color: #e6ebf1;
  --bs-btn-active-color: #0b0d12;
  --bs-btn-active-bg: #e6ebf1;
  --bs-btn-active-border-color: #e6ebf1;
}

.btn:focus {
  box-shadow: 0 0 0 .25rem rgba(124,156,255,.25);
}

.hero {
  padding: 5rem 0 3rem;
}
.hero h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.hero .lead {
  color: var(--koda-muted);
}

.card-koda {
  background: linear-gradient(180deg, var(--koda-card), var(--koda-card-2));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 1rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}

.badge.bg-gradient {
  background-image:
    linear-gradient(0deg, rgba(255,255,255,.28), rgba(255,255,255,.28)),
    linear-gradient(90deg, var(--koda-accent), var(--koda-accent-2));
  color: #bcc3d4;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, var(--koda-glow);
}

.badge-code {
  vertical-align: baseline;
  padding: .35em .5em;
  font-weight: 700;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset;
}

.koda-section {
  padding: 3rem 0;
  border-top: 1px dashed rgba(255,255,255,.08);
}

.koda-list dt {
  color: var(--koda-text);
  font-weight: 700;
}
.koda-list dd {
  color: var(--koda-muted);
  margin-bottom: .75rem;
}

footer { background: transparent; }
.link-secondary:hover { color: var(--koda-text) !important; }

.opacity-75 { opacity: .75; }