body {
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.social-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(112, 140, 138, 0.08);
  border: 2px solid rgba(112, 140, 138, 0.3);
  backdrop-filter: blur(10px);
}

.social-btn:hover {
  background: #708c8a;
  border-color: #708c8a;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 35px rgba(112, 140, 138, 0.4);
}

.card-entrance {
  animation: cardSlideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes cardSlideUp {
  from {
      opacity: 0;
      transform: translateY(30px) scale(0.95);
  }
  to {
      opacity: 1;
      transform: translateY(0) scale(1);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.quote-text {
  color: #666666;
}

.dark .quote-text {
  color: #8f8f8f !important;
}


html, body {
  background: #f4f5f7 !important;
  min-height: 100% !important;
  height: 100% !important;
}

.dark html, .dark body {
  background: #212121 !important;
  min-height: 100% !important;
  height: 100% !important;
}

main {
  background: inherit !important;
}

.dark .bg-white {
  background: #1a1a1a !important;
  border: 1px solid #404040;
}

.dark .text-charcoal {
  color: #f0f0f0 !important;
}

.dark .text-gray-500 {
  color: #b0b0b0 !important;
}

.dark .text-gray-600 {
  color: #a0a0a0 !important;
}

.dark .border-gray-100 {
  border-color: #404040 !important;
}

.dark .social-btn {
  background: rgba(112, 140, 138, 0.3);
  border-color: #708c8a;
  color: #f0f0f0;
}

.dark .social-btn:hover {
  background: #708c8a;
  color: white;
}

.dark .from-orange-100 {
  background: linear-gradient(to right, rgba(255, 165, 0, 0.2), rgba(255, 193, 7, 0.2)) !important;
}

.dark .text-orange-700 {
  color: #ffb347 !important;
}

.dark .border-orange-200 {
  border-color: rgba(255, 165, 0, 0.4) !important;
}