:root{
  --brand: #59a6ff;
  --brand-2: #7c4dff;
  --bg: #0b0f17;
  --fg: #e7eefc;
  --muted: #9fb1d8;
  --border: rgba(255,255,255,.12);
}

html, body { background: var(--bg); color: var(--fg); }
.navbar { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0)); }
.navbar .nav-link.active { color: #fff; }
.link-light-subtle { color: var(--muted); text-decoration: none; }
.link-light-subtle:hover { color: #fff; text-decoration: underline; }

.text-gradient { background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero { position: relative; }
.hero-bg { position: absolute; inset: 0; background: radial-gradient(1000px 500px at 10% -5%, rgba(121,164,255,.25), transparent), radial-gradient(900px 500px at 100% 0%, rgba(124,77,255,.18), transparent); filter: blur(0.5px); z-index: 0; }
.hero .container { z-index: 1; position: relative; }

.glass { background: rgba(255,255,255,.04); border: 1px solid var(--border); }
.feature-card { background: rgba(255,255,255,.03); border: 1px solid var(--border); }
.notice-card { background: rgba(255,255,255,.03); border: 1px solid var(--border); transition: transform .2s ease, box-shadow .2s ease; }
.notice-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.25); }

.timeline { border-left: 2px solid var(--border); padding-left: 1rem; }
.timeline-item { position: relative; margin-bottom: 1.25rem; }
.timeline-badge { position: absolute; left: -14px; top: 0; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .9rem; }
.timeline-content { margin-left: .75rem; }

.footer .link-light-subtle { color: var(--muted); }
.footer .link-light-subtle:hover { color: #fff; }

.btn-primary { background: linear-gradient(90deg, var(--brand), var(--brand-2)); border: none; }
.btn-outline-light { border-color: var(--border); }