/* ==================== TOSOL Landing Page Styles ==================== */

/* ---- Smooth Scrolling ---- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

/* ---- Base Resets ---- */
body {
  overflow-x: hidden;
}

/* ---- Sticky Navbar ---- */
#navbar {
  background: rgba(248, 247, 250, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#navbar.scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* ---- Language Switcher ---- */
.lang-btn {
  color: #808390;
  cursor: pointer;
}

.lang-btn:hover {
  color: #4c7f8c;
  background: rgba(76, 127, 140, 0.05);
}

.lang-btn.active {
  color: #fff;
  background: #4c7f8c;
}

/* ---- Feature Cards Hover ---- */
.feature-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 4px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ---- FAQ Accordion ---- */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-item.open .faq-content {
  max-height: 300px;
}

.faq-item.open .faq-toggle i {
  transform: rotate(180deg);
}

.faq-toggle:hover {
  background: rgba(76, 127, 140, 0.02);
}

/* ---- Scroll Animations ---- */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate="fade-in"] {
  transform: none;
}

[data-animate="slide-left"] {
  transform: translateX(-24px);
}

[data-animate="slide-right"] {
  transform: translateX(24px);
}

[data-animate].animated {
  opacity: 1;
  transform: none;
}

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

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

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-delayed 3.5s ease-in-out infinite;
  animation-delay: 1s;
}

/* ---- Mobile Menu ---- */
#mobile-menu.open #mobile-overlay {
  display: block;
}

#mobile-menu.open #mobile-panel {
  transform: translateX(0);
}

/* ---- Nav Link Active State ---- */
.nav-link.active {
  color: #4c7f8c;
}

/* ---- Contact Form Focus ---- */
input:focus,
textarea:focus {
  border-color: #4c7f8c;
}

/* ---- Counter Animation ---- */
.counter {
  font-variant-numeric: tabular-nums;
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .animate-float,
  .animate-float-delayed {
    animation: none;
  }

  .faq-content {
    transition: none;
  }

  .feature-card {
    transition: none;
  }

  .counter {
    /* Skip counter animation — show final value immediately */
  }
}

/* ---- Selection Color ---- */
::selection {
  background: rgba(76, 127, 140, 0.15);
  color: #2F2B3D;
}

/* ---- Scrollbar (WebKit) ---- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #F8F7FA;
}

::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}