/* Quantum Paradigm - Futuristic Violet Theme */

/* CSS Variables for Consistency */
:root {
  --primary-violet: #8b5cf6;
  --secondary-violet: #7c3aed;
  --dark-violet: #5b21b6;
  --neon-violet: #a855f7;
  --neon-glow: 0 0 20px #a855f7, 0 0 40px #a855f7, 0 0 60px #a855f7;
  --gradient-bg: linear-gradient(135deg, #0f0f23 0%, #1a0933 25%, #2d1b69 50%, #1a0933 75%, #0f0f23 100%);
  --card-bg: rgba(139, 92, 246, 0.1);
  --card-border: rgba(139, 92, 246, 0.3);
}

/* Custom Animations */
@keyframes glow {
  from { text-shadow: 0 0 20px #a855f7, 0 0 30px #a855f7, 0 0 40px #a855f7; }
  to { text-shadow: 0 0 30px #a855f7, 0 0 40px #a855f7, 0 0 50px #a855f7; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Global Styles */
* {
  scroll-behavior: smooth;
}

body {
  background: var(--gradient-bg);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 15, 35, 0.5);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8b5cf6, #7c3aed);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #a855f7, #8b5cf6);
}

/* Typography */
.text-glow {
  text-shadow: var(--neon-glow);
  animation: glow 2s ease-in-out infinite alternate;
}

.gradient-text {
  background: linear-gradient(135deg, #a855f7, #3b82f6, #8b5cf6);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient 3s ease infinite;
}

/* Container and Spacing System */
.container-custom {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container-custom {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container-custom {
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container-custom {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container-custom {
    padding-left: 3rem;
    padding-right: 3rem;
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container-custom {
    max-width: 1536px;
  }
}

/* Section Padding System */
.section-padding {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 640px) {
  .section-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 768px) {
  .section-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

@media (min-width: 1024px) {
  .section-padding {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media (min-width: 1280px) {
  .section-padding {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

/* Enhanced Responsive Spacing */
.section-spacing {
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .section-spacing {
    margin-bottom: 3rem;
  }
}

@media (min-width: 1024px) {
  .section-spacing {
    margin-bottom: 4rem;
  }
}

/* Buttons */
.btn-primary {
  @apply px-8 py-4 bg-gradient-to-r from-violet-600 to-purple-600 text-white font-semibold rounded-xl shadow-lg transition-all duration-300 transform hover:scale-105 hover:shadow-2xl;
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
}

.btn-primary:hover {
  box-shadow: 0 15px 40px rgba(139, 92, 246, 0.5);
  transform: translateY(-2px) scale(1.05);
}

.btn-secondary {
  @apply px-8 py-4 border-2 border-violet-400 text-violet-400 font-semibold rounded-xl transition-all duration-300 hover:bg-violet-400 hover:text-gray-900;
}

.btn-ghost {
  @apply px-6 py-3 text-white border border-white/20 rounded-lg hover:bg-white/10 transition-all duration-300;
}

/* Cards */
.card {
  @apply rounded-2xl p-8 backdrop-blur-sm border transition-all duration-300 hover:transform hover:scale-105;
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.1);
}

.card:hover {
  box-shadow: 0 20px 40px rgba(139, 92, 246, 0.2);
  border-color: rgba(168, 85, 247, 0.5);
}

.card-glow {
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.3);
}

/* Enhanced Navigation */
.nav-blur {
  backdrop-filter: blur(20px);
  background: rgba(15, 15, 35, 0.9);
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Hero Section */
.hero-bg {
  background: 
    radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.3) 0%, transparent 50%);
}

/* Forms */
.form-input {
  @apply w-full px-4 py-3 bg-white/10 border border-white/30 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-violet-400 focus:ring-2 focus:ring-violet-400/20 transition-all duration-300;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.form-input:focus {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Enhanced Select Dropdown Styling */
.form-input select,
select.form-input {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 40px !important;
}

.form-input select:focus,
select.form-input:focus {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Dropdown Options Styling */
.form-input option,
select.form-input option {
  background-color: #1a1a2e !important;
  color: #ffffff !important;
  padding: 10px 12px !important;
  border: none !important;
}

.form-input option:checked,
select.form-input option:checked {
  background-color: #8b5cf6 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.form-input option:hover,
select.form-input option:hover {
  background-color: rgba(139, 92, 246, 0.4) !important;
  color: #ffffff !important;
}

/* Better dropdown visibility on different browsers */
.form-input select option[value=""] {
  color: #9ca3af !important;
  font-style: italic !important;
}

.form-input select option:not([value=""]) {
  color: #ffffff !important;
  font-style: normal !important;
}

.form-textarea {
  @apply w-full px-4 py-3 bg-white/10 border border-white/30 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-violet-400 focus:ring-2 focus:ring-violet-400/20 transition-all duration-300;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  min-height: 150px !important;
  resize: both !important;
  max-width: 100% !important;
  width: 100% !important;
}

.form-textarea:focus {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Enhanced resize handle visibility */
.form-textarea::-webkit-resizer {
  background-color: rgba(139, 92, 246, 0.3);
  border-radius: 0 0 8px 0;
}

/* Resize instructions styling */
.resize-hint {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.form-textarea:hover + .resize-hint,
.form-textarea:focus + .resize-hint {
  opacity: 1;
}

/* Special Effects */
.floating {
  animation: float 6s ease-in-out infinite;
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.slide-in-left {
  animation: slideInLeft 0.6s ease-out;
}

/* Grid Pattern Background */
.grid-bg {
  background-image: 
    linear-gradient(rgba(139, 92, 246, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* Hover Effects */
.hover-glow:hover {
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.4);
  transform: translateY(-5px);
}

/* Enhanced Component Spacing */
.component-spacing {
  margin-bottom: 1.5rem;
}

.component-spacing-lg {
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .component-spacing {
    margin-bottom: 2rem;
  }
  
  .component-spacing-lg {
    margin-bottom: 3.5rem;
  }
}

@media (min-width: 1024px) {
  .component-spacing {
    margin-bottom: 2.5rem;
  }
  
  .component-spacing-lg {
    margin-bottom: 4rem;
  }
}

/* Enhanced Cards Spacing */
.card {
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .card {
    margin-bottom: 0;
    padding: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .card {
    padding: 3rem;
  }
}

/* Enhanced Mobile Navigation */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 15, 35, 0.98);
  backdrop-filter: blur(20px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  gap: 2rem;
}

@media (min-width: 640px) {
  .mobile-nav {
    padding: 3rem;
    gap: 2.5rem;
  }
}

/* Blog Comments */
.comment-card {
  @apply bg-white/5 border border-white/10 rounded-lg p-4 backdrop-blur-sm;
}

/* Newsletter */
.newsletter-bg {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(168, 85, 247, 0.1) 100%);
}

/* Live Chat Widget */
.chat-widget {
  @apply fixed bottom-6 right-6 z-50;
}

.chat-button {
  @apply w-16 h-16 bg-gradient-to-r from-violet-600 to-purple-600 rounded-full flex items-center justify-center text-white shadow-2xl hover:scale-110 transition-transform duration-300 cursor-pointer;
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

.chat-window {
  @apply absolute bottom-20 right-0 w-80 h-96 bg-gray-900/95 backdrop-blur-lg rounded-xl border border-violet-400/30 shadow-2xl;
  display: none;
}

.chat-window.open {
  display: block;
  animation: fadeInUp 0.3s ease-out;
}

/* Case Studies */
.case-study-metric {
  @apply text-4xl font-bold gradient-text;
}

/* Services Icons */
.service-icon {
  @apply w-16 h-16 bg-gradient-to-br from-violet-500 to-purple-600 rounded-2xl flex items-center justify-center text-2xl text-white mb-6 group-hover:scale-110 transition-transform duration-300;
}

/* Loading States */
.loading {
  @apply animate-pulse bg-gradient-to-r from-violet-500/20 to-purple-500/20 rounded;
}

/* Utility Classes */
.text-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.backdrop-blur-strong {
  backdrop-filter: blur(40px);
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  :root {
    --primary-violet: #9d4edd;
    --secondary-violet: #7209b7;
    --neon-violet: #c77dff;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark Mode Override (default is dark) */
@media (prefers-color-scheme: light) {
  /* Keep dark theme even if user prefers light mode for brand consistency */
}

/* Focus Styles for Accessibility */
*:focus {
  outline: 2px solid var(--primary-violet);
  outline-offset: 2px;
}

/* Skip Link */
.skip-link {
  @apply absolute -top-10 left-4 bg-violet-600 text-white px-4 py-2 rounded-md z-50 focus:top-4 transition-all;
}

/* 3D Visualization Animations */
.perspective-1000 {
  perspective: 1000px;
}

.transform-gpu {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

.preserve-3d {
  transform-style: preserve-3d;
}

@keyframes spin-3d-slow {
  0% {
    transform: rotateY(0deg) rotateX(15deg);
  }
  100% {
    transform: rotateY(360deg) rotateX(15deg);
  }
}

@keyframes spin-3d-reverse {
  0% {
    transform: rotateY(0deg) rotateX(-10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateY(-360deg) rotateX(-10deg) rotateZ(5deg);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
    box-shadow: 0 0 10px currentColor;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
    box-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
  }
}

@keyframes pulse-soft {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

@keyframes pulse-subtle {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.9;
  }
}

@keyframes float-gentle {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-5px) rotate(1deg);
  }
  66% {
    transform: translateY(2px) rotate(-1deg);
  }
}

@keyframes ping-slow {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  75%, 100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes floating-3d {
  0%, 100% {
    transform: translateY(0px) translateZ(0px) rotateY(0deg);
  }
  25% {
    transform: translateY(-10px) translateZ(5px) rotateY(5deg);
  }
  50% {
    transform: translateY(-5px) translateZ(10px) rotateY(0deg);
  }
  75% {
    transform: translateY(-15px) translateZ(5px) rotateY(-5deg);
  }
}

@keyframes pulse-connection {
  0%, 100% {
    opacity: 0.3;
    stroke-width: 2;
  }
  50% {
    opacity: 0.8;
    stroke-width: 4;
  }
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Apply 3D animations */
.animate-spin-3d-slow {
  animation: spin-3d-slow 20s linear infinite;
}

.animate-spin-3d-reverse {
  animation: spin-3d-reverse 15s linear infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.animate-pulse-soft {
  animation: pulse-soft 3s ease-in-out infinite;
}

.animate-pulse-subtle {
  animation: pulse-subtle 4s ease-in-out infinite;
}

.animate-float-gentle {
  animation: float-gentle 6s ease-in-out infinite;
}

.animate-ping-slow {
  animation: ping-slow 3s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.floating-3d {
  animation: floating-3d 8s ease-in-out infinite;
}

.animate-pulse-connection {
  animation: pulse-connection 2s ease-in-out infinite;
}

.animate-twinkle {
  animation: twinkle 4s ease-in-out infinite;
}

/* Gradient utilities for 3D effects */
.bg-gradient-radial {
  background: radial-gradient(circle, var(--tw-gradient-stops));
}