:root{
  --bg:#0b0f14; --ink:#e9eef4; --muted:#a9b4c2; --accent:#14e1b3; --accent-2:#60a5fa;
  --line:#1c2633; --shadow:rgba(0,0,0,.35);
}
.btn{
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  position: relative; overflow: hidden; will-change: transform;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px var(--shadow); }
.btn:active{ transform: translateY(0); box-shadow: 0 3px 10px var(--shadow); }
.btn.ghost:hover{ border-color: var(--accent); color: var(--ink);
  background: linear-gradient(90deg, rgba(20,225,179,.08), rgba(96,165,250,.08)); }

.badge{
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
}
.badge:hover{
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(20,225,179,.15), 0 2px 6px rgba(96,165,250,.12);
  background: linear-gradient(90deg, rgba(20,225,179,.06), rgba(96,165,250,.06));
}

.card{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 32px var(--shadow);
  border-color: rgba(20,225,179,.3);
}

nav .links a{
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
  padding: 6px 10px; border-radius: 8px;
}
nav .links a:hover{
  background: rgba(20,225,179,.10);
  box-shadow: 0 2px 8px rgba(20,225,179,.15) inset;
}
nav .links a.active{
  background: linear-gradient(90deg, rgba(20,225,179,.22), rgba(96,165,250,.22));
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(20,225,179,.35) inset;
}

a:focus-visible, .btn:focus-visible, .badge:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition: none !important; animation: none !important; }
}

.btn .ripple{
  position: absolute; border-radius: 50%; transform: scale(0);
  animation: ripple .6s linear; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 60%);
  opacity: .7;
}
@keyframes ripple{ to{ transform: scale(4); opacity: 0; } }


/* === Minimal Mobile Enhancements (2025-08-19) === */
@media (max-width:720px){
  nav{flex-wrap:wrap;}
  nav .links{
    order:3; width:100%;
    overflow-x:auto; white-space:nowrap; flex-wrap:nowrap;
    padding-bottom:6px; -webkit-overflow-scrolling:touch;
  }
  nav .links a{display:inline-block; margin-right:6px;}
}
@media (max-width:640px){
  .btn{padding:12px 16px;}
  .badge{padding:6px 10px; margin-bottom:6px; display:inline-flex; align-items:center;}
}