/* ==========================================================================
   X-Assist Technology JSC - Modern Landing Page Stylesheet
   Brand Colors: Primary Navy (#002D62), Accent Cyan (#0284C7), Dark Navy (#071B36)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root {
  --primary-navy: #002D62;
  --primary-dark: #071B36;
  --primary-light: #0A3D80;
  --accent-blue: #0284C7;
  --accent-cyan: #06B6D4;
  --accent-glow: rgba(2, 132, 199, 0.18);
  --bg-light: #F8FAFC;
  --bg-card: #FFFFFF;
  --text-main: #0F172A;
  --text-muted: #64748B;
  --border-light: #E2E8F0;
}

html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
  color: var(--text-main);
  background-color: #FFFFFF;
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Glassmorphism Classes */
.glass-nav {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.glass-nav-scrolled {
  box-shadow: 0 10px 30px -10px rgba(0, 45, 98, 0.08);
}

.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.glass-card-dark {
  background: rgba(11, 27, 54, 0.7);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradient Backgrounds & Ornaments */
.hero-gradient-bg {
  background: radial-gradient(circle at 85% 15%, rgba(2, 132, 199, 0.08) 0%, transparent 45%),
              radial-gradient(circle at 10% 70%, rgba(0, 45, 98, 0.04) 0%, transparent 40%),
              #FFFFFF;
}

.hero-mesh-grid {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(0, 45, 98, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 45, 98, 0.04) 1px, transparent 1px);
}

.dark-mesh-grid {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

/* Glow effects */
.glow-primary {
  box-shadow: 0 0 40px -10px rgba(2, 132, 199, 0.35);
}

.glow-subtle {
  box-shadow: 0 8px 30px rgba(0, 45, 98, 0.06);
}

/* Card hover transitions */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 35px -10px rgba(0, 45, 98, 0.12);
}

/* Custom Gradient Text */
.text-gradient {
  background: linear-gradient(135deg, #002D62 0%, #0284C7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-cyan {
  background: linear-gradient(135deg, #38BDF8 0%, #818CF8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

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

@keyframes pulseGlow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.08); }
}

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

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

.animate-pulse-glow {
  animation: pulseGlow 4s ease-in-out infinite;
}

/* Badge styling */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Comparison Matrix Styling */
.comparison-card-bad {
  border: 1px solid #fee2e2;
  background: linear-gradient(180deg, #fff5f5 0%, #ffffff 100%);
}

.comparison-card-good {
  border: 2px solid #0284c7;
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
  position: relative;
}

/* Timeline & Steps */
.step-number {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1.125rem;
}

/* Modal styles */
.modal-overlay {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
}

/* Language Switcher Button active state */
.lang-btn {
  white-space: nowrap;
}
.lang-btn.active {
  background-color: #002D62 !important;
  color: #FFFFFF !important;
}

/* Nav links nowrap */
.nav-item {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* Mobile Drawer Styles */
#mobile-menu-drawer {
  background-color: #FFFFFF !important;
  opacity: 1 !important;
}

#mobile-menu-overlay {
  background-color: rgba(15, 23, 42, 0.7) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Japanese font optimization when active */
body.lang-ja {
  font-family: 'Noto Sans JP', 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.03em;
  line-height: 1.8;
}