/* ========================================
   BASE STYLES & VARIABLES
   ======================================== */

:root {
  /* Colors - keeping the same theme */
  --bg: #08080f;
  --bg-2: #0f0f1c;
  --bg-3: #161625;
  --card: #11111e;
  --text: #f0eeff;
  --text-2: #a09cc0;
  --text-3: #5c5880;
  --purple: #8b5cf6;
  --pink: #ec4899;
  --cyan: #22d3ee;
  --amber: #fbbf24;
  --green: #34d399;
  --border: rgba(139, 92, 246, 0.15);
  --border-2: rgba(139, 92, 246, 0.3);
  --radius: 16px;
  --radius-sm: 10px;

  /* Animation timing */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.4s ease;
  --transition-slow: 0.65s ease;
  --cubic-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(139, 92, 246, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(236, 72, 153, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(34, 211, 238, 0.02) 0%, transparent 50%);
  background-size: 200% 200%;
  animation: meshShift 30s ease-in-out infinite;
}

@keyframes meshShift {
  0% { background-position: 0% 50%, 100% 50%, 50% 100%; }
  25% { background-position: 50% 0%, 80% 80%, 20% 20%; }
  50% { background-position: 100% 50%, 20% 20%, 80% 80%; }
  75% { background-position: 50% 100%, 80% 20%, 20% 80%; }
  100% { background-position: 0% 50%, 100% 50%, 50% 100%; }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--purple);
}

/* Selection color */
::selection {
  background: rgba(139, 92, 246, 0.3);
  color: var(--text);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}