/* Tailwind 配置扩展 */
tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: '#0A6EB4', // 帅康主色调-蓝色
        secondary: '#66B2FF', // 次要蓝色
        accent: '#FF7D00', // 强调色-橙色
        dark: '#1E293B', // 深色文本
        light: '#F8FAFC', // 浅色背景
      },
      fontFamily: {
        inter: ['Inter', 'sans-serif'],
      },
      borderRadius: {
        'xl': '1rem',
        '2xl': '1.5rem',
        '3xl': '2rem',
      }
    },
  }
}

/* 自定义工具类 */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .bento-shadow {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  }
  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .hover-lift:hover {
    transform: translateY(-5px);
  }
  .tech-gradient {
    background: linear-gradient(to right, var(--tw-gradient-stops));
  }
}

/* 全局样式 */
html {
  scroll-behavior: smooth;
}

body {
  @apply font-inter text-dark bg-light;
}

/* 全局圆角样式 - 所有图片、框和按钮 */
img, 
.btn, 
.card, 
.box, 
.bento-item, 
.product-card, 
.feature-card, 
.testimonial-card,
input,
button,
select,
textarea {
  border-radius: 1.25rem !important;
}

/* 基础动画 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease forwards;
}

.animate-pulse-slow {
  animation: pulse 3s infinite;
}

/* 头部导航样式 */
.header {
  @apply fixed w-full top-0 z-50 transition-all duration-300 bg-white/95 backdrop-blur-sm shadow-sm;
}

.header .container {
  @apply mx-auto px-4 sm:px-6 lg:px-8;
}

.header-content {
  @apply flex items-center justify-between py-4;
}

.logo {
  @apply text-2xl font-bold text-primary flex items-center gap-2 transition-transform duration-300 hover:scale-105;
}

.nav-links {
  @apply hidden md:flex items-center space-x-8;
}

.nav-links a {
  @apply text-dark hover:text-primary transition-colors duration-300 font-medium relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-primary after:transition-all after:hover:w-full;
}

.nav-cta {
  @apply hidden md:block bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-full transition-all duration-300 hover:shadow-lg hover:shadow-primary/20 transform hover:-translate-y-0.5;
}

.mobile-menu-btn {
  @apply md:hidden text-dark text-2xl hover:text-primary transition-colors;
}

/* Bento Grid 布局样式 */
.bento-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-12;
}

.bento-item {
  @apply rounded-2xl overflow-hidden bento-shadow transition-all duration-500 hover:shadow-xl bg-white hover-lift overflow-hidden relative group;
}

/* Bento 项目的科技感渐变 */
.bento-item.primary-accent {
  background: linear-gradient(180deg, rgba(10, 110, 180, 0.02) 0%, rgba(10, 110, 180, 0.05) 100%);
}

.bento-item.accent-accent {
  background: linear-gradient(180deg, rgba(255, 125, 0, 0.02) 0%, rgba(255, 125, 0, 0.05) 100%);
}

.bento-item.large {
  @apply md:col-span-2 md:row-span-2;
}

.bento-item.medium {
  @apply md:col-span-1 md:row-span-2;
}

.bento-item.small {
  @apply md:col-span-1 md:row-span-1;
}

.bento-content {
  @apply p-6 flex flex-col h-full relative z-10;
}

.bento-title {
  @apply text-xl sm:text-2xl font-bold mb-3 text-dark transition-colors group-hover:text-primary;
}

.bento-description {
  @apply text-gray-600 mb-4 flex-grow transition-all group-hover:text-gray-700;
}

.bento-cta {
  @apply inline-flex items-center text-primary font-medium hover:underline mt-auto transition-all group-hover:text-primary/80;
}

.bento-cta i {
  @apply ml-2 transition-transform group-hover:translate-x-1;
}

.bento-image {
  @apply overflow-hidden;
}

.bento-image img {
  @apply w-full h-full object-cover transition-transform duration-700 group-hover:scale-105;
}

/* 英雄区域样式 */
.hero {
  @apply pt-24 pb-16 md:pt-32 md:pb-24 relative overflow-hidden rounded-3xl mx-4 md:mx-8 mt-20;
  background: linear-gradient(135deg, #0A6EB4 0%, #0A6EB4 85%, rgba(10, 110, 180, 0.8) 100%);
}

.hero-content {
  @apply relative z-10 text-white max-w-3xl mx-auto text-center px-4;
}

.hero-title {
  @apply text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight mb-6 text-shadow;
}

.hero-subtitle {
  @apply text-[clamp(1rem,2vw,1.25rem)] text-white/90 mb-8 max-w-2xl mx-auto;
}

.hero-cta {
  @apply bg-white text-primary hover:bg-gray-100 px-8 py-3 rounded-full font-semibold transition-all duration-300 hover:shadow-xl inline-flex items-center gap-2 transform hover:-translate-y-1;
}

/* 产品展示区域 */
.product-section {
  @apply py-16 px-4;
}

.section-header {
  @apply text-center mb-12;
}

.section-title {
  @apply text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-dark relative inline-block mx-auto;
}

.section-title:after {
  @apply content-[''] absolute bottom-[-8px] left-1/2 transform -translate-x-1/2 w-20 h-1 bg-primary rounded-full;
}

.section-description {
  @apply text-gray-600 max-w-2xl mx-auto;
}

.product-grid {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6;
}

.product-card {
  @apply bg-white rounded-2xl overflow-hidden bento-shadow transition-all duration-500 hover:shadow-xl hover-lift group;
}

.product-image {
  @apply h-64 overflow-hidden;
}

.product-image img {
  @apply w-full h-full object-cover transition-transform duration-700 group-hover:scale-110;
}

.product-info {
  @apply p-5 transition-all duration-300 group-hover:bg-gray-50;
}

.product-name {
  @apply font-semibold text-lg mb-2 transition-colors group-hover:text-primary;
}

.product-desc {
  @apply text-gray-600 text-sm mb-4;
}

.product-price {
  @apply font-bold text-primary;
}

/* 特性/优势区域 */
.features-section {
  @apply py-16 px-4 bg-gray-50 rounded-3xl mx-4 md:mx-8 my-8;
}

.features-grid {
  @apply grid grid-cols-1 md:grid-cols-3 gap-8;
}

.feature-card {
  @apply bg-white p-8 rounded-2xl bento-shadow transition-all duration-500 hover:shadow-xl hover-lift group relative overflow-hidden;
}

/* 特性卡片的装饰元素 */
.feature-card:before {
  @apply content-[''] absolute -right-10 -top-10 w-20 h-20 rounded-full bg-primary/5 transition-all duration-500 group-hover:bg-primary/10 group-hover:w-24 group-hover:h-24;
}

.feature-icon {
  @apply w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center text-primary text-2xl mb-6 transition-all duration-300 group-hover:bg-primary group-hover:text-white;
}

.feature-title {
  @apply text-xl font-bold mb-3 transition-colors group-hover:text-primary;
}

.feature-desc {
  @apply text-gray-600;
}

/* 客户评价区域 */
.testimonials-section {
  @apply py-16 px-4;
}

.testimonials-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

.testimonial-card {
  @apply bg-white p-6 rounded-2xl bento-shadow transition-all duration-500 hover:shadow-xl hover-lift group;
}

.testimonial-text {
  @apply text-gray-600 italic mb-6 relative;
}

.testimonial-text:before {
  @apply content-['"'] text-primary/20 text-6xl absolute -top-6 -left-2;
}

.testimonial-author {
  @apply flex items-center;
}

.author-avatar {
  @apply w-12 h-12 rounded-full overflow-hidden mr-4 border-2 border-white shadow-md;
}

.author-info {
  @apply font-medium;
}

.author-position {
  @apply text-sm text-gray-500;
}

/* 页脚样式 */
.footer {
  @apply bg-dark text-white py-12 px-4 rounded-3xl mx-4 md:mx-8 my-8;
}

.footer-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8;
}

.footer-column h3 {
  @apply text-lg font-semibold mb-4 transition-colors hover:text-secondary;
}

.footer-links {
  @apply space-y-2;
}

.footer-links a {
  @apply text-gray-300 hover:text-white transition-colors duration-300 flex items-center gap-2 hover:pl-1;
}

.footer-links a i {
  @apply opacity-0 transition-opacity duration-300 group-hover:opacity-100;
}

.social-links {
  @apply flex space-x-4 mt-6;
}

.social-links a {
  @apply w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-white hover:bg-primary transition-all duration-300 transform hover:-translate-y-1;
}

.copyright {
  @apply text-center text-gray-400 pt-8 border-t border-gray-800;
}

/* 联系按钮固定样式 */
.fixed-cta {
  @apply fixed bottom-6 right-6 bg-accent text-white p-4 rounded-full shadow-lg z-40 transition-all duration-300 hover:bg-accent/90 hover:shadow-xl transform hover:scale-110;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .bento-grid {
    @apply grid-cols-1 gap-4;
  }
  
  .bento-item.large,
  .bento-item.medium {
    @apply col-span-1 row-span-1;
  }
  
  .features-grid,
  .testimonials-grid {
    @apply grid-cols-1;
  }
  
  .product-grid {
    @apply grid-cols-1 sm:grid-cols-2;
  }
}

@media (max-width: 480px) {
  .product-grid {
    @apply grid-cols-1;
  }
  
  .footer-grid {
    @apply grid-cols-1;
  }
  
  .hero {
    @apply mt-16;
  }
}