/* Custom styles to enhance visuals beyond Tailwind */
:root { --bg1: #0b1220; --bg2: #0b1e3a; }
html { scroll-behavior: smooth; }
body { min-height: 100vh; }
.bg-surface {
  background: radial-gradient(1200px 600px at 10% -10%, rgba(14,165,233,.25), transparent 50%),
              radial-gradient(1000px 600px at 110% 10%, rgba(99,102,241,.20), transparent 50%),
              linear-gradient(180deg, #0b1325 0%, #0b162d 35%, #0b1a33 100%);
}
.noise {
  position: fixed; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width=\"160\" height=\"160\" viewBox=\"0 0 160 160\"><filter id=\"n\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"0.8\" numOctaves=\"4\" stitchTiles=\"stitch\"/></filter><rect width=\"100%\" height=\"100%\" filter=\"url(%23n)\"/></svg>');
  z-index: 0;
}
.bg-glass { background: rgba(255,255,255,.06); }
.dark .bg-glass { background: rgba(0,0,0,.2); }
.navlink { opacity:.9; transition:.2s; }
.navlink:hover { opacity:1; text-decoration: underline; text-underline-offset: 4px; }
.dropdown {
  position:absolute; top: 140%; left: 0; display: none; min-width: 220px;
  background: rgba(255,255,255,.08); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 8px;
}
.group:hover .dropdown { display: block; }
.dropdown a {
  display:block; padding: 10px 12px; border-radius: 8px; opacity:.9;
}
.dropdown a:hover { background: rgba(255,255,255,.06); opacity:1; }

.badge {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .75rem; border-radius: 999px; font-size:.875rem;
  background: rgba(14,165,233,.15); color:#93dbff; border:1px solid rgba(14,165,233,.35);
}
.btn-primary {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1rem; border-radius: 12px; font-weight:600;
  background: linear-gradient(135deg,#0ea5e9,#6366f1); color:white; box-shadow: 0 8px 24px rgba(14,165,233,.35);
  transition:.2s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(99,102,241,.35); }
.btn-ghost {
  padding:.75rem 1rem; border-radius: 12px; font-weight:600;
  border:1px solid rgba(255,255,255,.15); color: #cfe9ff; background: rgba(255,255,255,.04);
}
.card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px; padding: 16px;
}
.card-title { font-weight:600; margin-bottom:.4rem; }
.section-title { font-size:1.8rem; font-weight:800; letter-spacing:-.02em; }
.project {
  display:block; padding:18px; border-radius:16px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); transition:.2s;
}
.project:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(14,165,233,.15); }
.link { text-decoration: underline; text-underline-offset: 4px; }
.linkcard {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.input, .label {
  width:100%;
}
.label { display:block; margin-bottom:.5rem; font-size:.9rem; opacity:.9; }
.input {
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:.75rem 1rem;
}
.prose { color: inherit; }
@media (prefers-color-scheme: light) {
  body:not(.dark) .bg-surface { background: linear-gradient(180deg,#f6fbff 0%,#edf7ff 100%); }
}