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

/* Base Reset & Variables */
:root {
  --saas-primary: #5200FF;
  --saas-secondary: #00F0FF;
  --saas-dark: #0a0c10;
  --saas-glass-bg: rgba(20, 22, 28, 0.65);
  --saas-glass-border: rgba(255, 255, 255, 0.08);
  --saas-text-muted: #8b92a5;
  --saas-glow: 0 0 20px rgba(82, 0, 255, 0.2);
}

/* Typography Override */
body, h1, h2, h3, h4, h5, h6, p, a, span, div {
  font-family: 'Inter', sans-serif !important;
}

/* Global Dark Mode Override */
body {
  background-color: var(--saas-dark) !important;
  color: #fff !important;
  /* Abstract dark mesh gradient background */
  background-image: 
    radial-gradient(at 0% 0%, rgba(82,0,255,0.08) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(0,240,255,0.05) 0px, transparent 50%) !important;
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
  letter-spacing: -0.02em;
}

p {
  color: var(--saas-text-muted) !important;
  line-height: 1.7;
}

/* Premium Component Glassmorphism Overrides */
.project-box, .service-item, .contact-box, .box-item, .pricing-item {
  background: var(--saas-glass-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--saas-glass-border) !important;
  border-radius: 16px !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
}

.project-box:hover, .service-item:hover, .box-item:hover, .pricing-item:hover {
  transform: translateY(-5px) !important;
  border: 1px solid rgba(82,0,255, 0.4) !important;
  box-shadow: 0 15px 45px rgba(82,0,255, 0.15) !important;
}

/* Modern Button Glowing Focus */
.rr-primary-btn, .btn-primary {
  background: linear-gradient(135deg, var(--saas-primary), #8F00FF) !important;
  border-radius: 8px !important;
  color: #fff !important;
  border: none !important;
  transition: all 0.3s ease !important;
  box-shadow: var(--saas-glow) !important;
}

.rr-primary-btn:hover, .btn-primary:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 0 30px rgba(82,0,255, 0.4) !important;
}

/* Fluid Typography Scalings for 2026 */
.section-title {
  font-size: clamp(2rem, 5vw, 4rem) !important;
  font-weight: 800 !important;
}

/* Form Upgrades */
input, textarea, select {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--saas-glass-border) !important;
  color: #fff !important;
  border-radius: 8px !important;
  backdrop-filter: blur(4px) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--saas-primary) !important;
  box-shadow: 0 0 15px rgba(82,0,255,0.2) !important;
  outline: none !important;
}

/* Minimalist Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--saas-dark);
}
::-webkit-scrollbar-thumb {
  background: var(--saas-glass-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--saas-primary);
}