/* ==========================================================================
   Scalspire — Custom Styles (supplements Tailwind CDN utility classes)
   ========================================================================== */

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

:root {
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-outfit: 'Outfit', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: #020617; /* slate-950 */
  color: #e2e8f0;
  -webkit-font-smoothing: antialiased;
}

.font-outfit {
  font-family: var(--font-outfit);
}

/* Custom slim scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #020617; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.anim-fade-in { animation: fadeIn 0.25s ease-out; }

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.anim-zoom-in { animation: zoomIn 0.2s ease-out; }

@keyframes spin { to { transform: rotate(360deg); } }
.anim-spin { animation: spin 0.8s linear infinite; }

@keyframes gentleBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.anim-bounce { animation: gentleBounce 2.4s ease-in-out infinite; }

/* Range input thumb styling for the ROI calculator slider */
input[type="range"] { -webkit-appearance: none; appearance: none; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 9999px;
  background: #6366f1; border: 2px solid #eef2ff; cursor: pointer; margin-top: -1px;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 9999px;
  background: #6366f1; border: 2px solid #eef2ff; cursor: pointer;
}

/* Select element dark styling */
select { color-scheme: dark; }

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

main { animation: fadeIn 0.2s ease-out; }

/* Desktop services dropdown: pure CSS hover reveal */
#services-dropdown-wrap .services-dropdown-panel {
  display: none;
}
@media (min-width: 1024px) {
  #services-dropdown-wrap:hover .services-dropdown-panel {
    display: block;
  }
}