:root {
  --glass-bg: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-input-bg: rgba(255, 255, 255, 0.2);
  --glass-input-border: rgba(255, 255, 255, 0.3);
  --lift-hover: translateY(-8px);
}

body {
  background: linear-gradient(135deg, var(--chat-bg-dark) 0%, var(--chat-surface-1) 50%, var(--chat-surface-2) 100%);
  color: var(--chat-text-primary);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

.hero-section {
  background: linear-gradient(135deg, #0a284b 0%, #05111d 50%, #010c17 100%);
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 80%, rgba(13,110,253,0.3) 0%, transparent 50%), 
              radial-gradient(circle at 80% 20%, rgba(25,135,84,0.3) 0%, transparent 50%), 
              radial-gradient(circle at 40% 40%, rgba(255,193,7,0.2) 0%, transparent 50%);
  animation: float 20s ease-in-out infinite;
  z-index: 1;
}

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

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--chat-shadow-heavy);
}

.glass-button {
  background: linear-gradient(135deg, var(--chat-accent-blue), #0b5ed7);
  border: none;
  backdrop-filter: blur(10px);
  transition: var(--chat-transition);
}

.glass-button:hover {
  transform: var(--lift-hover);
  box-shadow: var(--chat-shadow-heavy);
}

.glass-button-outline {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(10px);
  transition: var(--chat-transition);
}

.glass-button-outline:hover {
  background: rgba(255,255,255,0.1);
  transform: var(--lift-hover);
}

.glass-input {
  background: var(--glass-input-bg) !important;
  border: 1px solid var(--glass-input-border) !important;
  color: var(--chat-text-light) !important;
  backdrop-filter: blur(10px);
  transition: var(--chat-transition);
}

.glass-input::placeholder {
  color: rgba(255,255,255,0.5);
}

.glass-input:focus {
  background: rgba(255,255,255,0.25) !important;
  border-color: var(--chat-accent-blue) !important;
  box-shadow: 0 0 0 0.25rem rgba(13,110,253,0.25);
  color: var(--chat-text-light) !important;
}

.lift {
  transition: var(--chat-transition);
}

.lift:hover {
  transform: var(--lift-hover);
}

.contact-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(13,110,253,0.1) 0%, transparent 70%);
  z-index: -1;
}

.form-label {
  color: var(--chat-text-light);
}

.btn-primary {
  background-color: var(--chat-accent-blue);
  border-color: var(--chat-accent-blue);
}

.btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

@media (max-width: 768px) {
  .display-3 {
    font-size: 2.5rem;
  }
  .glass-card {
    margin: 1rem;
  }
}

.fade-in {
  animation: fadeIn 1s ease-in;
}

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

.glass-card {
  animation: fadeIn 0.8s ease-out;
}