* {
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

html.dark body {
  background-color: #030712;
  color: #f8fafc;
}
html:not(.dark) body {
  background-color: #f1f5f9;
  color: #0f172a;
}

body {
  overflow-x: hidden;
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.ambient-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.fluid-glow-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(140px);
  opacity: 0.18;
  animation: ambientDrift 24s ease-in-out infinite alternate;
}
html:not(.dark) .fluid-glow-orb {
  opacity: 0.08;
}

.orb-cyan {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, #06b6d4 0%, rgba(6,182,212,0) 70%);
  top: -120px;
  left: -80px;
}
.orb-emerald {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, #10b981 0%, rgba(16,185,129,0) 70%);
  bottom: 5%;
  right: -100px;
  animation-delay: -7s;
}
.orb-purple {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #8b5cf6 0%, rgba(139,92,246,0) 70%);
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -12s;
}

@keyframes ambientDrift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(45px, 35px) scale(1.08); }
  100% { transform: translate(-35px, 50px) scale(0.92); }
}

html.dark .bento-glass {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.65), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}
html.dark .bento-glass:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

html:not(.dark) .bento-glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(203, 213, 225, 0.7);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
}
html:not(.dark) .bento-glass:hover {
  border-color: rgba(148, 163, 184, 0.8);
}

html:not(.dark) .text-white { color: #0f172a !important; }
html:not(.dark) .text-slate-400 { color: #64748b !important; }
html:not(.dark) .text-slate-300 { color: #475569 !important; }
html:not(.dark) .text-slate-200 { color: #334155 !important; }
html:not(.dark) .text-slate-100 { color: #1e293b !important; }
html:not(.dark) .bg-slate-900,
html:not(.dark) .bg-slate-900\/90,
html:not(.dark) .bg-slate-900\/60,
html:not(.dark) .bg-slate-950,
html:not(.dark) .bg-slate-950\/90,
html:not(.dark) .bg-slate-950\/80,
html:not(.dark) .bg-slate-950\/70 {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html:not(.dark) nav {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(226, 232, 240, 0.9) !important;
}
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #94a3b8 !important;
}

.tilt-card {
  will-change: transform;
  perspective: 1000px;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.1); }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.4); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.7); }

.skeleton-pulse {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
html:not(.dark) .skeleton-pulse {
  background: linear-gradient(90deg, rgba(0,0,0,0.02) 25%, rgba(0,0,0,0.06) 50%, rgba(0,0,0,0.02) 75%);
  background-size: 200% 100%;
}

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.btn-bounce {
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-bounce:active { transform: scale(0.95); }