:root {
  --primary: #00E5FF;
  --bg-deep: #050505;
  --text-main: #F2F2F2;
  --glass: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.07);
}

body {
  font-family: 'Inter', sans-serif;
  cursor: default;
}

.syne {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.gradient-text {
  background: linear-gradient(135deg, #00E5FF 0%, #8A2BE2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Glassmorphism Refined */
.glass-card {
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  @apply rounded-[2rem] p-10 transition-all duration-700 ease-out;
}

.glass-hover:hover {
  border-color: rgba(0, 229, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.btn-primary {
  @apply bg-[#00E5FF] text-black font-extrabold py-5 px-10 rounded-full transition-all duration-500 shadow-[0_10px_20px_rgba(0,229,255,0.2)] hover:shadow-[0_15px_30px_rgba(0,229,255,0.4)] hover:-translate-y-1 active:scale-95 text-xs tracking-widest;
}

.btn-secondary {
  @apply border border-white/10 bg-white/5 text-white font-bold py-5 px-10 rounded-full transition-all duration-500 hover:bg-white hover:text-black hover:-translate-y-1 active:scale-95 text-xs tracking-widest;
}

/* FAQ Styling */
.faq-item {
  @apply border border-white/5 rounded-3xl overflow-hidden bg-white/[0.01] transition-all duration-500;
}

.faq-header {
  @apply w-full p-8 flex justify-between items-center text-left hover:bg-white/[0.03] transition-colors;
}

.faq-content {
  @apply px-8 overflow-hidden max-h-0 transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)];
}

.faq-item.active {
  @apply bg-white/[0.04] border-white/10;
}

.faq-item.active .faq-content {
  @apply pb-8 max-h-96;
}

.faq-item.active .faq-icon {
  @apply rotate-180 text-[#00E5FF];
}

/* Animations */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
}

.pulse-animation {
  animation: pulse-glow 3s infinite;
}

@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
  70% { box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.process-card {
  position: relative;
}

@media (min-width: 768px) {
  .process-card:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 2.5rem;
    left: 70%;
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.1), transparent);
    z-index: 0;
  }
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -4px;
  left: 0;
  background-color: var(--primary);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* Custom Selection */
::selection {
  background: var(--primary);
  color: black;
}