@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  --subtle-glow: 0 0 20px rgba(50, 50, 50, 0.5);
  --accent-glow: 0 0 15px rgba(75, 75, 75, 0.6);
  --purple-glow: 0 0 20px rgba(147, 51, 234, 0.5);
  --deep-black: #0a0a0a;
  --accent-color: #474747;
}

body {
  background-color: var(--deep-black);
  color: #fff;
  font-family: 'Inter', sans-serif;
  background-image: 
    radial-gradient(circle at 90% 10%, rgba(50, 50, 50, 0.1) 0%, rgba(10, 10, 10, 0) 70%),
    radial-gradient(circle at 10% 90%, rgba(50, 50, 50, 0.1) 0%, rgba(10, 10, 10, 0) 70%);
  background-attachment: fixed;
}

.space-grotesk {
  font-family: 'Space Grotesk', sans-serif;
}

.subtle-glow {
  box-shadow: var(--subtle-glow);
}

.accent-glow {
  box-shadow: var(--accent-glow);
}

.purple-glow {
  box-shadow: var(--purple-glow);
}

.glass {
  backdrop-filter: blur(10px);
  background-color: rgba(15, 15, 15, 0.6);
  border: 1px solid rgba(60, 60, 60, 0.2);
}

.modern-glass {
  backdrop-filter: blur(12px);
  background: linear-gradient(135deg, rgba(20, 20, 20, 0.7), rgba(10, 10, 10, 0.8));
  border: 1px solid rgba(70, 70, 70, 0.3);
}

.modern-button {
  backdrop-filter: blur(8px);
  background: linear-gradient(135deg, rgba(40, 40, 40, 0.4), rgba(20, 20, 20, 0.4));
  border: 1px solid rgba(70, 70, 70, 0.4);
  transition: all 0.3s ease;
}

.modern-button:hover {
  box-shadow: var(--purple-glow);
  background: linear-gradient(135deg, rgba(50, 50, 50, 0.6), rgba(30, 30, 30, 0.6));
  transform: translateY(-2px);
  border-color: rgba(147, 51, 234, 0.4);
}

.social-button {
  background: linear-gradient(135deg, rgba(40, 40, 40, 0.4), rgba(20, 20, 20, 0.4));
  border: 1px solid rgba(70, 70, 70, 0.4);
  transition: all 0.3s ease;
}

.social-button:hover {
  box-shadow: var(--purple-glow);
  border-color: rgba(147, 51, 234, 0.4);
  transform: translateY(-2px);
}

.card-hover {
  transition: all 0.4s ease;
}

.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--purple-glow);
  border-color: rgba(147, 51, 234, 0.4);
}

.decorative-element {
  position: absolute;
  opacity: 0.05;
  z-index: -1;
}

.cat-1 {
  top: 10%;
  right: 5%;
  width: 150px;
  height: 150px;
  transform: rotate(15deg);
}

.cat-2 {
  bottom: 15%;
  left: 5%;
  width: 180px;
  height: 180px;
  transform: rotate(-10deg);
}

.abstract-1 {
  top: 40%;
  right: 15%;
  width: 200px;
  height: 200px;
  transform: rotate(45deg);
}

.abstract-2 {
  top: 25%;
  left: 10%;
  width: 150px;
  height: 150px;
}

.abstract-3 {
  bottom: 10%;
  right: 20%;
  width: 180px;
  height: 180px;
  transform: rotate(-15deg);
}

.subtle-grid {
  background-image: linear-gradient(rgba(70, 70, 70, 0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(70, 70, 70, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}