/* Neumorphism Design System for MagikPay */

/* Enhanced Card Base with Neumorphism */
.mission-card,
.infrastructure-card,
.who-we-serve-card,
.global-presence-card,
.contact-card,
.contact-info-card,
.contact-form-card,
.office-card,
.pricing-card,
.spread-card,
.addon-card,
.terms-card,
.login-form-card,
.feature-card,
.hero-panel,
.faq-box,
.premium-feature-card,
.why-choose-card,
.category-card,
.metric-card,
.features-card,
.how-it-works-card,
.security-card,
.premium-rails-showcase {
  background: linear-gradient(145deg, #0f172a, #1e293b) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 
    inset 3px 3px 6px rgba(0, 0, 0, 0.3),
    inset -3px -3px 6px rgba(255, 255, 255, 0.05),
    0 8px 16px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
  margin-top: 20px;
}

/* Hover Effects */
.mission-card:hover,
.infrastructure-card:hover,
.who-we-serve-card:hover,
.global-presence-card:hover,
.contact-card:hover,
.contact-info-card:hover,
.contact-form-card:hover,
.office-card:hover,
.pricing-card:hover,
.spread-card:hover,
.addon-card:hover,
.terms-card:hover,
.login-form-card:hover,
.feature-card:hover,
.hero-panel:hover,
.faq-box:hover,
.premium-feature-card:hover,
.why-choose-card:hover,
.category-card:hover,
.metric-card:hover,
.features-card:hover,
.how-it-works-card:hover,
.security-card:hover,
.premium-rails-showcase:hover {
  background: linear-gradient(145deg, #1e293b, #334155) !important;
  box-shadow: 
    inset 3px 3px 6px rgba(0, 0, 0, 0.3),
    inset -3px -3px 6px rgba(255, 255, 255, 0.05),
    0 12px 24px rgba(0, 0, 0, 0.3),
    0 0 0 3px rgba(99, 102, 241, 0.2) !important;
  transform: translateY(-4px) !important;
}

/* Active/Pressed Effects */
.mission-card:active,
.infrastructure-card:active,
.who-we-serve-card:active,
.global-presence-card:active,
.contact-card:active,
.contact-info-card:active,
.contact-form-card:active,
.office-card:active,
.pricing-card:active,
.spread-card:active,
.addon-card:active,
.terms-card:active,
.login-form-card:active,
.feature-card:active,
.hero-panel:active,
.faq-box:active,
.premium-feature-card:active,
.why-choose-card:active,
.category-card:active,
.metric-card:active,
.features-card:active,
.how-it-works-card:active,
.security-card:active,
.premium-rails-showcase:active {
  transform: translateY(-2px) !important;
  box-shadow: 
    inset 4px 4px 8px rgba(0, 0, 0, 0.4),
    inset -2px -2px 4px rgba(255, 255, 255, 0.02) !important;
}

/* Special styling for popular pricing cards */
.pricing-card.popular {
  background: linear-gradient(145deg, #1e293b, #334155) !important;
  box-shadow: 
    inset 3px 3px 6px rgba(0, 0, 0, 0.3),
    inset -3px -3px 6px rgba(255, 255, 255, 0.05),
    0 8px 16px rgba(0, 0, 0, 0.2),
    0 0 0 2px rgba(99, 102, 241, 0.3) !important;
}

.pricing-card.popular:hover {
  background: linear-gradient(145deg, #334155, #475569) !important;
  box-shadow: 
    inset 3px 3px 6px rgba(0, 0, 0, 0.3),
    inset -3px -3px 6px rgba(255, 255, 255, 0.05),
    0 12px 24px rgba(0, 0, 0, 0.3),
    0 0 0 3px rgba(99, 102, 241, 0.4) !important;
}

/* Enhanced AI Border - Stable */
.ai-border::before {
  animation: none !important;
}

/* Neumorphic Button Styling */
.neumorphic-btn {
  background: linear-gradient(145deg, #0f172a, #1e293b) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
  color: #e2e8f0 !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 
    inset 2px 2px 4px rgba(0, 0, 0, 0.3),
    inset -2px -2px 4px rgba(255, 255, 255, 0.05),
    0 4px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
}

.neumorphic-btn:hover {
  background: linear-gradient(145deg, #1e293b, #334155) !important;
  box-shadow: 
    inset 2px 2px 4px rgba(0, 0, 0, 0.3),
    inset -2px -2px 4px rgba(255, 255, 255, 0.05),
    0 6px 12px rgba(0, 0, 0, 0.3),
    0 0 0 2px rgba(99, 102, 241, 0.2) !important;
  transform: translateY(-1px) !important;
}

.neumorphic-btn:active {
  transform: translateY(0) !important;
  box-shadow: 
    inset 4px 4px 8px rgba(0, 0, 0, 0.4),
    inset -2px -2px 4px rgba(255, 255, 255, 0.02) !important;
}

/* Neumorphic Input Styling */
.neumorphic-input {
  background: linear-gradient(145deg, #0f172a, #1e293b) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  color: #e2e8f0 !important;
  box-shadow: 
    inset 2px 2px 4px rgba(0, 0, 0, 0.3),
    inset -2px -2px 4px rgba(255, 255, 255, 0.05) !important;
  transition: all 0.3s ease !important;
}

.neumorphic-input:focus {
  outline: none !important;
  border-color: #6366f1 !important;
  box-shadow: 
    inset 2px 2px 4px rgba(0, 0, 0, 0.3),
    inset -2px -2px 4px rgba(255, 255, 255, 0.05),
    0 0 0 3px rgba(99, 102, 241, 0.3) !important;
}

/* Neumorphic Panel Styling */
.neumorphic-panel {
  background: linear-gradient(145deg, #0f172a, #1e293b) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 
    inset 3px 3px 6px rgba(0, 0, 0, 0.3),
    inset -3px -3px 6px rgba(255, 255, 255, 0.05),
    0 8px 16px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
}

.neumorphic-panel:hover {
  background: linear-gradient(145deg, #1e293b, #334155) !important;
  box-shadow: 
    inset 3px 3px 6px rgba(0, 0, 0, 0.3),
    inset -3px -3px 6px rgba(255, 255, 255, 0.05),
    0 12px 24px rgba(0, 0, 0, 0.3),
    0 0 0 3px rgba(99, 102, 241, 0.2) !important;
  transform: translateY(-3px) !important;
}

/* Enhanced AI Border with Pulsing Effect - Stable */
.ai-border-pulse::before {
  animation: none !important;
}

/* Keyframe Animations - Removed as animations are now stable */

/* Header Menu Bar AI Light Design */
.site-header {
  position: relative !important;
}

.site-header::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  filter: blur(3px) !important;
  opacity: 0.8 !important;
  z-index: 1 !important;
}

.nav-container {
  position: relative !important;
}

.nav-container::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  padding: 1px !important;
  border-radius: 16px !important;
  filter: blur(2px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.4 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.nav-container > * {
  position: relative !important;
  z-index: 1 !important;
}

.site-nav {
  position: relative !important;
}

.site-nav::before {
  content: "" !important;
  position: absolute !important;
  /* inset: -1px !important; */
  padding: 1px !important;
  border-radius: 16px !important;
  filter: blur(3px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.5 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.site-nav > * {
  position: relative !important;
  z-index: 1 !important;
}

.nav-list {
  position: relative !important;
}

.nav-list::before {
  content: "" !important;
  position: absolute !important;
  /* inset: -1px !important; */
  padding: 1px !important;
  border-radius: 12px !important;
  filter: blur(2px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.3 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.nav-list > * {
  position: relative !important;
  z-index: 1 !important;
}

.nav-list a {
  position: relative !important;
}

.nav-list a::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  padding: 1px !important;
  border-radius: inherit !important;
  filter: blur(1px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.2 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.nav-list a > * {
  position: relative !important;
  z-index: 1 !important;
}

.nav-toggle {
  position: relative !important;
}

.nav-toggle::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  padding: 1px !important;
  border-radius: inherit !important;
  filter: blur(2px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.4 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.nav-toggle > * {
  position: relative !important;
  z-index: 1 !important;
}

.nav-ctas {
  position: relative !important;
}

.nav-ctas::before {
  content: "" !important;
  position: absolute !important;
  /* inset: -1px !important; */
  padding: 1px !important;
  border-radius: 12px !important;
  filter: blur(2px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.3 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.nav-ctas > * {
  position: relative !important;
  z-index: 1 !important;
}

.brand {
  position: relative !important;
  padding: 10px;
}

.brand::before {
  content: "" !important;
  position: absolute !important;
  /* inset: -1px !important; */
  padding: 1px !important;
  border-radius: 12px !important;
  filter: blur(2px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.3 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.brand > * {
  position: relative !important;
  z-index: 1 !important;
}

/* What We Do Section AI Light Borders */
.premium-what-we-do {
  position: relative !important;
}

.premium-what-we-do::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  padding: 1px !important;
  border-radius: 20px !important;
  filter: blur(4px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.6 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.premium-what-we-do > * {
  position: relative !important;
  z-index: 1 !important;
}

.premium-wxd-header {
  position: relative !important;
}

.premium-wxd-header::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  padding: 1px !important;
  border-radius: 16px !important;
  filter: blur(3px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.5 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.premium-wxd-header > * {
  position: relative !important;
  z-index: 1 !important;
}

.premium-features-grid {
  position: relative !important;
}

.premium-features-grid::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  padding: 1px !important;
  border-radius: 18px !important;
  filter: blur(3px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.5 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.premium-features-grid > * {
  position: relative !important;
  z-index: 1 !important;
}

.premium-feature-card {
  position: relative !important;
}

.premium-feature-card::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  padding: 1px !important;
  border-radius: inherit !important;
  filter: blur(2px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.4 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.premium-feature-card > * {
  position: relative !important;
  z-index: 1 !important;
}

.feature-icon {
  position: relative !important;
}

.feature-icon::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  padding: 1px !important;
  border-radius: inherit !important;
  filter: blur(1px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.3 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.feature-icon > * {
  position: relative !important;
  z-index: 1 !important;
}

.feature-content {
  position: relative !important;
}

.feature-content::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  padding: 1px !important;
  border-radius: inherit !important;
  filter: blur(1px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.2 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.feature-content > * {
  position: relative !important;
  z-index: 1 !important;
}

.feature-badge {
  position: relative !important;
}

.feature-badge::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  padding: 1px !important;
  border-radius: inherit !important;
  filter: blur(1px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.3 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.feature-badge > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Footer Neumorphism Design */
.site-footer {
  background: linear-gradient(145deg, #0a0f1a, #1a1f2a) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 
    inset 0 4px 8px rgba(0, 0, 0, 0.3),
    inset 0 -2px 4px rgba(255, 255, 255, 0.02) !important;
  position: relative !important;
}

.site-footer::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  filter: blur(3px) !important;
  opacity: 0.8 !important;
  z-index: 1 !important;
}

.footer-grid {
  background: linear-gradient(145deg, #0f172a, #1e293b) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-shadow: 
    inset 3px 3px 6px rgba(0, 0, 0, 0.3),
    inset -3px -3px 6px rgba(255, 255, 255, 0.05),
    0 8px 16px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

.footer-grid::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  padding: 1px !important;
  border-radius: inherit !important;
  filter: blur(4px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.6 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.footer-grid > * {
  position: relative !important;
  z-index: 1 !important;
}

.footer-grid:hover {
  background: linear-gradient(145deg, #1e293b, #334155) !important;
  box-shadow: 
    inset 3px 3px 6px rgba(0, 0, 0, 0.3),
    inset -3px -3px 6px rgba(255, 255, 255, 0.05),
    0 12px 24px rgba(0, 0, 0, 0.3),
    0 0 0 3px rgba(99, 102, 241, 0.2) !important;
  transform: translateY(-2px) !important;
}

.footer-brand {
  background: linear-gradient(145deg, #0f172a, #1e293b) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 
    inset 2px 2px 4px rgba(0, 0, 0, 0.3),
    inset -2px -2px 4px rgba(255, 255, 255, 0.05),
    0 4px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

.footer-brand::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  padding: 1px !important;
  border-radius: inherit !important;
  filter: blur(3px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.5 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.footer-brand > * {
  position: relative !important;
  z-index: 1 !important;
}

.footer-brand:hover {
  background: linear-gradient(145deg, #1e293b, #334155) !important;
  box-shadow: 
    inset 2px 2px 4px rgba(0, 0, 0, 0.3),
    inset -2px -2px 4px rgba(255, 255, 255, 0.05),
    0 6px 12px rgba(0, 0, 0, 0.3),
    0 0 0 2px rgba(99, 102, 241, 0.2) !important;
  transform: translateY(-1px) !important;
}

.footer-cols {
  background: linear-gradient(145deg, #0f172a, #1e293b) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 
    inset 2px 2px 4px rgba(0, 0, 0, 0.3),
    inset -2px -2px 4px rgba(255, 255, 255, 0.05),
    0 4px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

.footer-cols::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  padding: 1px !important;
  border-radius: inherit !important;
  filter: blur(3px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.5 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.footer-cols > * {
  position: relative !important;
  z-index: 1 !important;
}

.footer-cols:hover {
  background: linear-gradient(145deg, #1e293b, #334155) !important;
  box-shadow: 
    inset 2px 2px 4px rgba(0, 0, 0, 0.3),
    inset -2px -2px 4px rgba(255, 255, 255, 0.05),
    0 6px 12px rgba(0, 0, 0, 0.3),
    0 0 0 2px rgba(99, 102, 241, 0.2) !important;
  transform: translateY(-1px) !important;
}

.footer-cols h4 {
  background: linear-gradient(145deg, #1e293b, #334155) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  margin-bottom: 12px !important;
  box-shadow: 
    inset 1px 1px 2px rgba(0, 0, 0, 0.3),
    inset -1px -1px 2px rgba(255, 255, 255, 0.05) !important;
  color: #d9deed !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

.footer-cols ul {
  background: linear-gradient(145deg, #0f172a, #1e293b) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  box-shadow: 
    inset 2px 2px 4px rgba(0, 0, 0, 0.3),
    inset -2px -2px 4px rgba(255, 255, 255, 0.05) !important;
}

.footer-cols ul li {
  background: linear-gradient(145deg, #1e293b, #334155) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  margin-bottom: 4px !important;
  box-shadow: 
    inset 1px 1px 2px rgba(0, 0, 0, 0.3),
    inset -1px -1px 2px rgba(255, 255, 255, 0.05) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

.footer-cols ul li::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  padding: 1px !important;
  border-radius: inherit !important;
  filter: blur(1px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.3 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.footer-cols ul li > * {
  position: relative !important;
  z-index: 1 !important;
}

.footer-cols ul li:hover {
  background: linear-gradient(145deg, #334155, #475569) !important;
  box-shadow: 
    inset 1px 1px 2px rgba(0, 0, 0, 0.3),
    inset -1px -1px 2px rgba(255, 255, 255, 0.05),
    0 2px 4px rgba(0, 0, 0, 0.2) !important;
  transform: translateX(2px) !important;
}

.footer-cols ul li:last-child {
  margin-bottom: 0 !important;
}

.footer-cols a {
  color: var(--color-text-1) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.footer-cols a:hover {
  color: #6366f1 !important;
  text-shadow: 0 0 8px rgba(99, 102, 241, 0.5) !important;
}

.footer-payment-icons {
  background: linear-gradient(145deg, #0f172a, #1e293b) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  box-shadow: 
    inset 2px 2px 4px rgba(0, 0, 0, 0.3),
    inset -2px -2px 4px rgba(255, 255, 255, 0.05),
    0 4px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

.footer-payment-icons::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  padding: 1px !important;
  border-radius: inherit !important;
  filter: blur(3px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.5 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.footer-payment-icons > * {
  position: relative !important;
  z-index: 1 !important;
}

.footer-payment-icons:hover {
  background: linear-gradient(145deg, #1e293b, #334155) !important;
  box-shadow: 
    inset 2px 2px 4px rgba(0, 0, 0, 0.3),
    inset -2px -2px 4px rgba(255, 255, 255, 0.05),
    0 6px 12px rgba(0, 0, 0, 0.3),
    0 0 0 2px rgba(99, 102, 241, 0.2) !important;
  transform: translateY(-1px) !important;
}

.payment-icon {
  background: linear-gradient(145deg, #1e293b, #334155) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 10px !important;
  box-shadow: 
    inset 2px 2px 4px rgba(0, 0, 0, 0.3),
    inset -2px -2px 4px rgba(255, 255, 255, 0.05),
    0 2px 4px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

.payment-icon::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  padding: 1px !important;
  border-radius: inherit !important;
  filter: blur(2px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.4 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.payment-icon > * {
  position: relative !important;
  z-index: 1 !important;
}

.payment-icon:hover {
  background: linear-gradient(145deg, #334155, #475569) !important;
  box-shadow: 
    inset 2px 2px 4px rgba(0, 0, 0, 0.3),
    inset -2px -2px 4px rgba(255, 255, 255, 0.05),
    0 4px 8px rgba(0, 0, 0, 0.3),
    0 0 0 2px rgba(99, 102, 241, 0.3) !important;
  transform: translateY(-2px) scale(1.05) !important;
}

.social-link {
  background: linear-gradient(145deg, #1e293b, #334155) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  box-shadow: 
    inset 2px 2px 4px rgba(0, 0, 0, 0.3),
    inset -2px -2px 4px rgba(255, 255, 255, 0.05),
    0 2px 4px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

.social-link::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  padding: 1px !important;
  border-radius: inherit !important;
  filter: blur(2px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.4 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.social-link > * {
  position: relative !important;
  z-index: 1 !important;
}

.social-link:hover {
  background: linear-gradient(145deg, #334155, #475569) !important;
  box-shadow: 
    inset 2px 2px 4px rgba(0, 0, 0, 0.3),
    inset -2px -2px 4px rgba(255, 255, 255, 0.05),
    0 4px 8px rgba(0, 0, 0, 0.3),
    0 0 0 2px rgba(99, 102, 241, 0.3) !important;
  transform: translateX(3px) translateY(-1px) !important;
}

.footer-disclaimer {
  background: linear-gradient(145deg, #0f172a, #1e293b) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  margin-top: 20px !important;
  box-shadow: 
    inset 2px 2px 4px rgba(0, 0, 0, 0.3),
    inset -2px -2px 4px rgba(255, 255, 255, 0.05),
    0 4px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

.footer-disclaimer::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  padding: 1px !important;
  border-radius: inherit !important;
  filter: blur(3px) !important;
  background: conic-gradient(from 180deg, #6366f1, #06b6d4, #d946ef, #3b82f6, #6366f1) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.5 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.footer-disclaimer > * {
  position: relative !important;
  z-index: 1 !important;
}

.footer-disclaimer:hover {
  background: linear-gradient(145deg, #1e293b, #334155) !important;
  box-shadow: 
    inset 2px 2px 4px rgba(0, 0, 0, 0.3),
    inset -2px -2px 4px rgba(255, 255, 255, 0.05),
    0 6px 12px rgba(0, 0, 0, 0.3),
    0 0 0 2px rgba(99, 102, 241, 0.2) !important;
  transform: translateY(-1px) !important;
}

.footer-disclaimer p {
  color: var(--color-text-2) !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Responsive adjustments for neumorphism */
@media (max-width: 768px) {
  .mission-card,
  .infrastructure-card,
  .who-we-serve-card,
  .global-presence-card,
  .contact-card,
  .contact-info-card,
  .contact-form-card,
  .office-card,
  .pricing-card,
  .spread-card,
  .addon-card,
  .terms-card,
  .login-form-card,
  .feature-card,
  .hero-panel,
  .faq-box,
  .premium-feature-card,
  .why-choose-card,
  .category-card,
  .metric-card,
  .features-card,
  .how-it-works-card,
  .security-card,
  .premium-rails-showcase {
    box-shadow: 
      inset 2px 2px 4px rgba(0, 0, 0, 0.3),
      inset -2px -2px 4px rgba(255, 255, 255, 0.05),
      0 6px 12px rgba(0, 0, 0, 0.2) !important;
          margin-top: 9px;
  }
  
  
  .mission-card:hover,
  .infrastructure-card:hover,
  .who-we-serve-card:hover,
  .global-presence-card:hover,
  .contact-card:hover,
  .contact-info-card:hover,
  .contact-form-card:hover,
  .office-card:hover,
  .pricing-card:hover,
  .spread-card:hover,
  .addon-card:hover,
  .terms-card:hover,
  .login-form-card:hover,
  .feature-card:hover,
  .hero-panel:hover,
  .faq-box:hover,
  .premium-feature-card:hover,
  .why-choose-card:hover,
  .category-card:hover,
  .metric-card:hover,
  .features-card:hover,
  .how-it-works-card:hover,
  .security-card:hover,
  .premium-rails-showcase:hover {
    transform: translateY(-2px) !important;
    box-shadow: 
      inset 2px 2px 4px rgba(0, 0, 0, 0.3),
      inset -2px -2px 4px rgba(255, 255, 255, 0.05),
      0 8px 16px rgba(0, 0, 0, 0.3),
      0 0 0 2px rgba(99, 102, 241, 0.2) !important;
  }

  /* Footer responsive adjustments */
  .footer-grid {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .footer-brand,
  .footer-cols {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  .footer-cols h4 {
    padding: 6px 10px !important;
    font-size: 0.9rem !important;
  }

  .footer-cols ul {
    padding: 10px !important;
    border-radius: 10px !important;
  }

  .footer-cols ul li {
    padding: 5px 8px !important;
    border-radius: 6px !important;
  }

  .footer-payment-icons {
    padding: 12px !important;
    border-radius: 12px !important;
  }

  .payment-icon {
    padding: 8px !important;
    border-radius: 10px !important;
  }

  .social-link {
    padding: 6px 10px !important;
    border-radius: 8px !important;
  }

  .footer-disclaimer {
    padding: 12px !important;
    border-radius: 12px !important;
    margin-top: 16px !important;
  }

  /* Header responsive adjustments for tablet */
  .nav-container::before {
    border-radius: 14px !important;
    filter: blur(1.5px) !important;
  }

  .site-nav::before {
    border-radius: 14px !important;
    filter: blur(2.5px) !important;
  }

  .nav-list::before {
    border-radius: 10px !important;
    filter: blur(1.5px) !important;
  }

  .nav-list a::after {
    filter: blur(1px) !important;
  }

  .nav-toggle::after {
    filter: blur(1.5px) !important;
  }

  .nav-ctas::before {
    border-radius: 10px !important;
    filter: blur(1.5px) !important;
  }

  .brand::before {
    border-radius: 10px !important;
    filter: blur(1.5px) !important;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    padding: 12px !important;
    border-radius: 12px !important;
  }

  .footer-brand,
  .footer-cols {
    padding: 12px !important;
    border-radius: 10px !important;
  }

  .footer-cols h4 {
    padding: 5px 8px !important;
    font-size: 0.85rem !important;
  }

  .footer-cols ul {
    padding: 8px !important;
    border-radius: 8px !important;
  }

  .footer-cols ul li {
    padding: 4px 6px !important;
    border-radius: 5px !important;
    font-size: 0.9rem !important;
  }

  .footer-payment-icons {
    padding: 10px !important;
    border-radius: 10px !important;
  }

  .payment-icon {
    padding: 6px !important;
    border-radius: 8px !important;
  }

  .social-link {
    padding: 5px 8px !important;
    border-radius: 6px !important;
    font-size: 0.9rem !important;
  }

  .footer-disclaimer {
    padding: 10px !important;
    border-radius: 10px !important;
    margin-top: 12px !important;
  }

  .footer-disclaimer p {
    font-size: 0.85rem !important;
  }

  /* What We Do responsive adjustments */
  .premium-what-we-do::before {
    border-radius: 16px !important;
    filter: blur(3px) !important;
  }

  .premium-wxd-header::before {
    border-radius: 12px !important;
    filter: blur(2px) !important;
  }

  .premium-features-grid::before {
    border-radius: 14px !important;
    filter: blur(2px) !important;
  }

  .premium-feature-card::before {
    filter: blur(1.5px) !important;
  }

  .feature-icon::before {
    filter: blur(1px) !important;
  }

  .feature-content::before {
    filter: blur(1px) !important;
  }

  .feature-badge::before {
    filter: blur(1px) !important;
  }

  /* Header responsive adjustments */
  .nav-container::before {
    border-radius: 12px !important;
    filter: blur(1px) !important;
  }

  .site-nav::before {
    border-radius: 12px !important;
    filter: blur(2px) !important;
  }

  .nav-list::before {
    border-radius: 8px !important;
    filter: blur(1px) !important;
  }

  .nav-list a::after {
    filter: blur(1px) !important;
  }

  .nav-toggle::after {
    filter: blur(1px) !important;
  }

  .nav-ctas::before {
    border-radius: 8px !important;
    filter: blur(1px) !important;
  }

  .brand::before {
    border-radius: 8px !important;
    filter: blur(1px) !important;
  }

  /* What We Do responsive adjustments for tablet */
  .premium-what-we-do::before {
    border-radius: 18px !important;
    filter: blur(3.5px) !important;
  }

  .premium-wxd-header::before {
    border-radius: 14px !important;
    filter: blur(2.5px) !important;
  }

  .premium-features-grid::before {
    border-radius: 16px !important;
    filter: blur(2.5px) !important;
  }

  .premium-feature-card::before {
    filter: blur(1.5px) !important;
  }

  .feature-icon::before {
    filter: blur(1px) !important;
  }

  .feature-content::before {
    filter: blur(1px) !important;
  }

  .feature-badge::before {
    filter: blur(1px) !important;
  }
}
@media (max-width: 768px) {
  .brand {
    position: relative !important;
    justify-content: flex-start;
    display: flex;
    margin-top: 0;
    padding-top: 12px;
    padding-bottom: 12px;
}
.nav-toggle {
  position: relative !important;
  margin-top: -50px;
  margin-left: 84%;
  margin-bottom: 10px;
}
    .site-header {
        height: 68px;
    }
    .site-nav {
      inset:6px 0px 0px 0px !important;
      /* inset 0 1px 0 rgba(255,255,255,0.1); */
    }
}
@media (min-width: 768px) and (max-width: 1200px) {
.brand > * {
  position: relative !important;
  z-index: 1 !important;
  width: 30% !important;
}
.brand {
  justify-content: center;
  display: flex;
}
.site-nav {
  position: relative !important;
  justify-content: center;
}
}