/* 无人机行业自定义样式 */

/* 定义科技感的深蓝色主题 */
:root {
  --color-primary-rgb: 0, 102, 204;  /* #0066cc */
  --color-primary-rgb-50: 230, 242, 255;
  --color-primary-rgb-100: 204, 229, 255;
  --color-primary-rgb-200: 153, 203, 255;
  --color-primary-rgb-300: 102, 178, 255;
  --color-primary-rgb-400: 51, 153, 255;
  --color-primary-rgb-500: 0, 127, 255;
  --color-primary-rgb-600: 0, 102, 204;
  --color-primary-rgb-700: 0, 77, 153;
  --color-primary-rgb-800: 0, 51, 102;
  --color-primary-rgb-900: 0, 26, 51;
  
  --color-secondary: #00a8ff;
  --color-dark: #001f3f;
  --color-accent: #00d4ff;
}

/* 科技感字体 */
body {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 标题字体 - 更现代、更有力 */
h1, h2, h3, h4, h5, h6, .heading {
  font-family: 'Jost', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* 导航栏样式 - 深色科技感 */
.nav-scrolled {
  background: rgba(0, 31, 63, 0.98) !important;
  backdrop-filter: blur(12px);
}

/* 按钮样式 - 科技感按钮 */
.btn {
  @apply font-semibold tracking-wide transition-all duration-300;
}

.btn-primary {
  @apply bg-primary-600 text-white hover:bg-primary-700 hover:shadow-lg;
  box-shadow: 0 4px 14px 0 rgb(0 102 204 / 0.25);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px 0 rgb(0 102 204 / 0.35);
}

.btn-outline {
  @apply border-2 hover:shadow-md;
}

/* 产品卡片 - 现代科技风格 */
.product-card {
  @apply bg-white rounded-xl overflow-hidden transition-all duration-500;
  border: 1px solid rgba(0, 102, 204, 0.1);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 102, 204, 0.15);
  border-color: rgba(0, 102, 204, 0.3);
}

/* 产品图片容器 - 16:10 比例适合无人机展示 */
.product-image {
  @apply relative overflow-hidden bg-gray-100;
  aspect-ratio: 16 / 10;
}

.product-image img {
  @apply w-full h-full object-contain;
}

/* 科技感渐变背景 */
.tech-gradient {
  background: linear-gradient(135deg, #001f3f 0%, #0066cc 50%, #00a8ff 100%);
}

.tech-gradient-light {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
}

/* 深色区块样式 */
.dark-section {
  background-color: #001f3f;
  color: #ffffff;
}

.dark-section h2, .dark-section h3 {
  color: #ffffff;
}

.dark-section .text-gray-600 {
  color: #a0c4e4;
}


/* Prevent horizontal scrollbars on mobile */
@media (max-width: 768px) {
    html, body {
      overflow-x: hidden;
      max-width: 100%;
    }
    
    /* Reset AOS horizontal animations on mobile */
    [data-aos="fade-left"],
    [data-aos="fade-right"] {
      transform: none !important;
      opacity: 1 !important;
    }
    
    /* Before animation state */
    [data-aos="fade-left"]:not(.aos-animate),
    [data-aos="fade-right"]:not(.aos-animate) {
      transform: translateY(20px) !important;
      opacity: 0 !important;
    }
}