/* Design tokens */
:root {
  --ring: 0 0% 100% / .08;
}

/***** Utility helpers *****/
.nav-link { color: rgba(255,255,255,0.8); transition: color .2s ease; }
.nav-link:hover { color: #9EFF00; }
.section { max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 640px){ .section{ padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px){ .section{ padding-left: 2rem; padding-right: 2rem; padding-top: 6rem; padding-bottom: 6rem; } }
.section-header { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2.5rem; }
@media (min-width: 768px){ .section-header{ flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.section-title { font-size: 1.5rem; font-weight: 600; }
@media (min-width: 768px){ .section-title{ font-size: 1.875rem; } }
.section-subtitle { font-size: .875rem; color: rgba(255,255,255,0.6); }
.card { background: rgba(15,20,26,0.7); border: 1px solid rgba(255,255,255,0.1); border-radius: .75rem; padding: 1.5rem; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); }
.card-title { font-size: 1.125rem; font-weight: 600; }
.card-subtitle { font-size: .875rem; color: rgba(255,255,255,0.6); margin-top: .25rem; }
.list { margin-top: 1rem; font-size: .9375rem; color: rgba(255,255,255,0.8); }
.list li { margin-top: .5rem; }
.tags { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.tags span { font-size: .75rem; background: rgba(20,26,33,0.8); border: 1px solid rgba(255,255,255,0.1); border-radius: 9999px; padding: .25rem .75rem; color: rgba(255,255,255,0.8); }
.badge-card { background: rgba(15,20,26,0.7); border: 1px solid rgba(255,255,255,0.1); border-radius: .5rem; padding: 1rem; font-size: .875rem; transition: border-color .2s ease; }
.badge-card:hover { border-color: rgba(158,255,0,0.4); }
.timeline { position: relative; padding-left: 1.5rem; }
.timeline li { margin-bottom: 1.5rem; }
.timeline::before { content: ""; position: absolute; left: .5rem; top: .25rem; bottom: .25rem; width: 1px; background: linear-gradient(to bottom, rgba(158,255,0,0.4), rgba(255,255,255,0.1), transparent); }
.timeline-dot { width: .75rem; height: .75rem; border-radius: 9999px; background: #9EFF00; box-shadow: 0 0 0 3px rgba(158,255,0,0.18), 0 10px 30px -10px rgba(0,0,0,.6); position: absolute; left: -7px; margin-top: .5rem; }
.link { color: #9EFF00; transition: color .2s ease; }
.link:hover { color: #B7FF4A; }
.input { width: 100%; background: rgba(20,26,33,0.6); border: 1px solid rgba(255,255,255,0.1); border-radius: .5rem; padding: .5rem .75rem; font-size: .875rem; color: #fff; }
.input:focus { outline: none; box-shadow: 0 0 0 2px rgba(158,255,0,0.4); }
.btn-primary { display: inline-flex; align-items: center; gap: .5rem; background: #9EFF00; color: #000; font-weight: 500; padding: .5rem 1rem; border-radius: .5rem; transition: filter .2s ease, box-shadow .2s ease; box-shadow: 0 0 0 3px rgba(158,255,0,0.18), 0 10px 30px -10px rgba(0,0,0,.6); }
.btn-primary:hover { filter: brightness(0.95); }
.btn-ghost { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); padding: .5rem 1rem; border-radius: .5rem; transition: border-color .2s ease, color .2s ease; }
.btn-ghost:hover { border-color: rgba(158,255,0,0.5); color: #9EFF00; }
.stat-card { background: rgba(20,26,33,0.7); border: 1px solid rgba(255,255,255,0.1); border-radius: .5rem; padding: .75rem .75rem; display: flex; align-items: center; justify-content: space-between; }

/* Typography */
.prose p { color: rgba(255,255,255,0.8); line-height: 1.75; }

/* Mobile nav */
#mobileNav a { border-bottom: 1px solid rgba(255,255,255,0.05); }
#mobileNav li:last-child a { border-bottom: none; }