:root {
  color-scheme: dark;
}

/* Reusable components (plain CSS to work with CDN Tailwind) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
  color: #fff;
  background-image: linear-gradient(135deg, #6366f1, #d946ef);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 30px rgba(0,0,0,0.35);
  transition: opacity .2s ease;
}
.btn-primary:hover { opacity: .95; }
.btn-primary:active { opacity: .9; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  transition: background .2s ease, color .2s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }

.section-title {
  font-size: clamp(1.5rem, 2vw + 1rem, 1.875rem);
  font-weight: 800;
  margin-bottom: 1.5rem;
}

.glass-card {
  border-radius: 1rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 30px rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.project-card {
  border-radius: 1rem;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 30px rgba(0,0,0,0.35);
  transition: border-color .2s ease;
}
.project-card:hover { border-color: rgba(255,255,255,0.2); }

.project-media {
  height: 160px;
  background-image: radial-gradient(ellipse at top left, rgba(99,102,241,0.35), transparent 40%),
                    radial-gradient(ellipse at bottom right, rgba(217,70,239,0.35), transparent 40%);
}

/* Subtle entrance animation for sections */
[data-animate] { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
[data-animate].is-inview { opacity: 1; transform: translateY(0); }