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

:root {
  --app-bg: #07090e;
  --card-bg: rgba(255, 255, 255, 0.03);
  --card-subtle: rgba(255, 255, 255, 0.05);
  --border-color: rgba(255, 255, 255, 0.08);
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --primary: #00d4ff;
}

[data-bs-theme="light"] {
  --app-bg: #f1f6fb;
  --card-bg: #ffffff;
  --card-subtle: #e5f1fc;
  --border-color: rgba(2, 132, 199, 0.18);
  --text-main: #0a192f;
  --text-muted: #2c4966;
  --text-dim: #486581;
  --primary: #0284c7;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--app-bg);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-main);
}

.glass-card {
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.glass-card:hover {
  border-color: rgba(0, 212, 255, 0.3);
  background: var(--card-subtle);
}

/* Light Mode Overrides: Vibrant Ice-Porcelain & Midnight Navy */
[data-bs-theme="light"] body {
  background-color: #f1f6fb;
  color: #0a192f;
}
[data-bs-theme="light"] h1,
[data-bs-theme="light"] h2,
[data-bs-theme="light"] h3,
[data-bs-theme="light"] h4,
[data-bs-theme="light"] h5,
[data-bs-theme="light"] h6 {
  color: #0a192f;
}
[data-bs-theme="light"] .text-white {
  color: #0a192f !important;
}
[data-bs-theme="light"] .text-muted {
  color: #2c4966 !important;
}
[data-bs-theme="light"] .glass-card {
  background: #ffffff !important;
  border-color: rgba(2, 132, 199, 0.18) !important;
  box-shadow: 0 4px 20px -2px rgba(2, 132, 199, 0.08), 0 2px 6px -1px rgba(10, 25, 47, 0.03) !important;
}
[data-bs-theme="light"] .glass-card:hover {
  border-color: #0284c7 !important;
  background: #ffffff !important;
  box-shadow: 0 10px 30px -4px rgba(2, 132, 199, 0.18), 0 4px 12px -2px rgba(10, 25, 47, 0.06) !important;
}
[data-bs-theme="light"] section#how {
  background: #eaf4fd !important;
}
[data-bs-theme="light"] section#pricing {
  background: #f1f6fb !important;
}
[data-bs-theme="light"] .py-4.py-md-5[style*="rgba(7, 9, 14"] {
  background: #eaf4fd !important;
  border-color: rgba(2, 132, 199, 0.16) !important;
}
[data-bs-theme="light"] section[style*="rgba(0, 212, 255, 0.05)"] {
  background: #e0f2fe !important;
}
[data-bs-theme="light"] .glass-card[style*="#0f172a"] {
  background: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 10px 30px rgba(2, 132, 199, 0.15) !important;
}
[data-bs-theme="light"] .btn-light {
  background: #0a192f;
  color: #ffffff;
  border-color: #0a192f;
}
[data-bs-theme="light"] .btn-light:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}
[data-bs-theme="light"] .btn-outline-light {
  color: #0a192f;
  border-color: rgba(2, 132, 199, 0.35);
}
[data-bs-theme="light"] .btn-outline-light:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

/* Universal Light Theme Form Input Visibility */
[data-bs-theme="light"] input,
[data-bs-theme="light"] textarea,
[data-bs-theme="light"] select,
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .tech-input,
[data-bs-theme="light"] .pay-field input {
  color: #0a192f !important;
  background-color: #ffffff !important;
  border-color: #bddbf5 !important;
  -webkit-text-fill-color: #0a192f !important;
}

[data-bs-theme="light"] input:focus,
[data-bs-theme="light"] textarea:focus,
[data-bs-theme="light"] select:focus,
[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .tech-input:focus,
[data-bs-theme="light"] .pay-field input:focus {
  color: #0a192f !important;
  background-color: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
  -webkit-text-fill-color: #0a192f !important;
}

[data-bs-theme="light"] input::placeholder,
[data-bs-theme="light"] textarea::placeholder,
[data-bs-theme="light"] .tech-input::placeholder {
  color: #627d98 !important;
  -webkit-text-fill-color: #627d98 !important;
}

.text-gradient {
  background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-bs-theme="light"] .text-gradient {
  background: linear-gradient(135deg, #0a192f 0%, #0284c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-bs-theme="light"] .rounded-pill.glass-card {
  background: #e0f2fe !important;
  border-color: rgba(2, 132, 199, 0.35) !important;
}
[data-bs-theme="light"] .rounded-pill.glass-card small {
  color: #0284c7 !important;
}

[data-bs-theme="light"] small.text-uppercase {
  color: #486581 !important;
}

.blue-glow {
  box-shadow: 0 0 40px -10px rgba(0, 212, 255, 0.3);
}

/* Mobile Responsiveness Enhancements */
@media (max-width: 640px) {
  body {
    font-size: 14px;
  }
  
  /* Optimize small screen card display */
  .glass-card {
    border-radius: 12px;
  }
  
  /* Better flow on small screens */
  p {
    word-break: break-word;
  }

  /* Reduce touch target padding on very small screens (except text/inline/footer links) */
  @supports (touch-action: manipulation) {
    button, a:not(.fp-link):not(.bp-drawer-links a):not(p a):not(li a) {
      min-height: 44px;
      min-width: 44px;
    }
  }
  
  /* Improve testability and readability */
  h1, h2, h3, h4, h5, h6 {
    word-break: break-word;
    hyphens: auto;
  }
}

/* Improve readability on landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
  nav {
    height: auto;
    padding: 8px 0;
  }
  
  main {
    padding-top: 20px;
  }
}

/* Tablet and up optimizations */
@media (min-width: 641px) {
  .glass-card {
    transition: all 0.3s ease;
  }
}

/* Very large text size optimization */
@media (min-width: 1024px) {
  .glass-card:hover {
    transform: translateY(-2px);
  }
}

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

/* ==========================================================================
   Universal Custom Dropdown Styling (Consistent End Margin & SVG Chevron)
   ========================================================================== */
select,
select.form-select,
select.tech-select,
select.tech-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2300d4ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 12px !important;
  padding-right: 36px !important;
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

[data-bs-theme="light"] select,
[data-bs-theme="light"] select.form-select,
[data-bs-theme="light"] select.tech-select,
[data-bs-theme="light"] select.tech-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}