:root {
--bg: #ffffff;
--bg-alt: #f8fafc; /* slate-50 */
--fg: #0f172a;
--muted: #475569;
--border: rgba(2,6,23,.08);
--card: #ffffff;
--surface: #ffffff;
--primary: #4f46e5;
--primary-contrast: #ffffff;
--chip-ring: rgba(2,6,23,.10);
--shadow: 0 1px 2px rgba(2,6,23,.06), 0 2px 8px rgba(2,6,23,.05);
}
.dark:root, .dark {
--bg: #0b1220;
--bg-alt: #111827;
--fg: #e5e7eb;
--muted: #9aa4b2;
--border: rgba(148,163,184,.22);
--card: #0f172a;
--surface: #0c1628;
--primary: #818cf8;
--primary-contrast: #0b1220;
--chip-ring: rgba(148,163,184,.38);
--shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(2,6,23,.45);
}


html { scroll-behavior: smooth; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background: var(--bg); color: var(--fg); }


.bg-alt { background: var(--bg-alt); }


.chip { display:inline-flex; align-items:center; border-radius:9999px; padding:0.25rem 0.75rem; font-size:0.875rem; font-weight:600; border:1px solid var(--chip-ring); background: color-mix(in oklab, var(--bg) 92%, transparent); }
.card { border-radius:1rem; box-shadow: var(--shadow); border:1px solid var(--border); background: var(--card); }
.hero-gradient { background: radial-gradient(60% 60% at 50% 0%, color-mix(in oklab, var(--primary) 22%, transparent) 0%, color-mix(in oklab, var(--primary) 18%, transparent) 26%, color-mix(in oklab, #ec4899 14%, transparent) 60%, rgba(255,255,255,0) 100%); }
.glass { background-color: color-mix(in oklab, var(--card) 72%, transparent); backdrop-filter: blur(10px); }


input, select, textarea { background: var(--surface); color: var(--fg); border:1px solid var(--border); border-radius: .75rem; padding:.8rem 1rem; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in oklab, var(--primary) 55%, transparent); outline-offset: 2px; }


.btn-primary { background: var(--primary); color: var(--primary-contrast); border-radius:9999px; padding:.8rem 1.1rem; font-weight:700; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-ghost { border-radius:9999px; padding:.8rem 1.1rem; font-weight:700; border:1px solid var(--border); background: transparent; color: var(--fg); }
.btn-ghost:hover { background: color-mix(in oklab, var(--card) 85%, transparent); }
    
    .tech-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .75rem;
  border-radius: .75rem;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 120px;
  transition: transform .15s ease, box-shadow .2s ease;
}
.tech-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.tech-badge img {
  height: 36px;
  width: 36px;
  object-fit: contain;
  filter: brightness(0.8);
}
.dark .tech-badge img {
  filter: brightness(1.1);
}
.tech-badge span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fg);
}