/* ========================================
   Parkexa — Fintech Aesthetic
   Arctic Linen: #1B3A6B · #5AA7FF · #EAF3FF · #CFE6FF · #FFF
   ======================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
}

::selection {
  background: #5AA7FF;
  color: #fff;
}

/* --- Fintech Card --- */
.fintech-card {
  box-shadow: 0px 4px 10px rgba(27, 58, 107, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fintech-card:hover {
  box-shadow: 0px 8px 24px rgba(27, 58, 107, 0.14);
  transform: translateY(-2px);
}

/* --- Primary CTA --- */
.btn-primary {
  background: #5AA7FF;
  color: #fff;
  font-weight: 600;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0px 4px 10px rgba(90, 167, 255, 0.25);
}

.btn-primary:hover {
  background: #4898F0;
  transform: translateY(-1px);
  box-shadow: 0px 8px 20px rgba(90, 167, 255, 0.35);
}

.btn-primary:active {
  transform: translateY(0);
}

/* --- Legacy .btn-gold alias --- */
.btn-gold {
  background: #5AA7FF;
  color: #fff;
  font-weight: 600;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0px 4px 10px rgba(90, 167, 255, 0.25);
}

.btn-gold:hover {
  background: #4898F0;
  transform: translateY(-1px);
  box-shadow: 0px 8px 20px rgba(90, 167, 255, 0.35);
}

/* --- Text Gradient --- */
.text-gradient {
  background: linear-gradient(135deg, #5AA7FF, #7BBCFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Glassmorphism (only dark sections) --- */
.glass-dark {
  background: rgba(27, 58, 107, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* --- Navbar --- */
#navbar {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: all 0.4s ease;
}

#navbar.scrolled {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid #E5E7EB;
  box-shadow: 0px 1px 4px rgba(27, 58, 107, 0.06);
}

/* --- Range Slider --- */
.range-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #E5E7EB;
  border-radius: 999px;
  cursor: pointer;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #5AA7FF;
  box-shadow: 0 2px 8px rgba(90, 167, 255, 0.4);
  border: 3px solid white;
  cursor: pointer;
}

.range-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #5AA7FF;
  box-shadow: 0 2px 8px rgba(90, 167, 255, 0.4);
  border: 3px solid white;
  cursor: pointer;
}

/* --- Hero Grid (subtle) --- */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(90, 167, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 167, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 20%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 20%, transparent 60%);
}

/* --- Star Pattern --- */
.star-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpolygon points='12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}

/* --- Occupancy Bar --- */
.occupancy-bar {
  animation: fill-bar 2s ease-out forwards;
  transform-origin: left;
}

@keyframes fill-bar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* --- Floating Animation --- */
.float-animation {
  animation: float 6s ease-in-out infinite;
}

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

/* --- Star Spin --- */
.star-spin {
  animation: spin-slow 120s linear infinite;
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- Pulse Slow --- */
.animate-pulse-slow {
  animation: pulse-slow 8s ease-in-out infinite;
}

@keyframes pulse-slow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* --- Animation Delays --- */
.animation-delay-1000 { animation-delay: 1s; }
.animation-delay-1500 { animation-delay: 1.5s; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-3000 { animation-delay: 3s; }

/* --- Scroll Reveal --- */
[data-reveal] {
  will-change: opacity, transform;
}

/* --- Feature Tabs --- */
.feature-tab {
  background: #EAF3FF;
  color: #7A8FAA;
  cursor: pointer;
  border: 1px solid transparent;
}

.feature-tab:hover {
  background: #CFE6FF;
  color: #1B3A6B;
}

.feature-tab.active {
  background: #1B3A6B;
  color: white;
  box-shadow: 0px 4px 10px rgba(27, 58, 107, 0.2);
}

/* --- Form Focus --- */
.form-input:focus {
  box-shadow: 0 0 0 4px rgba(90, 167, 255, 0.12);
}

/* --- LPR Scan --- */
.lpr-scan {
  animation: lpr-sweep 3s ease-in-out infinite;
}

@keyframes lpr-sweep {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(300px); opacity: 0; }
}

/* --- Image hover --- */
.group:hover img {
  transform: scale(1.02);
}

.group img {
  transition: transform 0.5s ease;
}

/* --- Mobile Menu --- */
#mobile-menu {
  transition: all 0.3s ease;
}

#mobile-menu.hidden {
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
}

#mobile-menu:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
  max-height: 500px;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CFE6FF; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #5AA7FF; }