/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 自定义颜色 */
:root {
    --primary: #3B82F6;
    --primary-dark: #2563EB;
    --secondary: #10B981;
    --dark: #1F2937;
    --light: #F9FAFB;
    --gray: #6B7280;
}

/* 自定义按钮样式 */
.btn-primary {
    @apply bg-blue-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-700 transition duration-300 shadow-md;
}

.btn-secondary {
    @apply bg-white text-blue-600 font-bold py-3 px-6 rounded-lg hover:bg-blue-50 transition duration-300 shadow-md;
}

/* 自定义卡片样式 */
.card {
    @apply bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition duration-300;
}

/* 自定义标题样式 */
.title {
    @apply text-3xl md:text-4xl font-bold text-gray-800 mb-4;
}

.subtitle {
    @apply text-2xl font-bold text-gray-800 mb-6;
}

/* 自定义间距 */
.mt-16 {
    margin-top: 4rem;
}

.mb-16 {
    margin-bottom: 4rem;
}

.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .title {
        font-size: 2.5rem;
    }

    .subtitle {
        font-size: 1.75rem;
    }
}

@media (max-width: 640px) {
    .title {
        font-size: 2rem;
    }

    .subtitle {
        font-size: 1.5rem;
    }
}

/* 动画效果 */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
}

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

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

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 表单输入框聚焦样式 */
input:focus,
select:focus,
textarea:focus {
    @apply ring-2 ring-blue-500 border-transparent;
}

/* 导航栏链接样式 */
nav a {
    @apply relative;
}

nav a:hover:after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all duration-300;
    animation: expand 0.3s forwards;
}

@keyframes expand {
    from { width: 0; }
    to { width: 100%; }
}

/* 自定义列表样式 */
.custom-list li {
    @apply flex items-start mb-2;
}

.custom-list li:before {
    content: '•';
    @apply text-blue-600 font-bold mr-2 mt-1;
}

/* 数据统计卡片样式 */
.stats-card {
    @apply bg-white rounded-lg shadow-md p-6 hover:shadow-xl transition duration-300;
}

.stats-card .number {
    @apply text-3xl font-bold text-blue-600 mb-1;
}

.stats-card .label {
    @apply text-gray-600;
}

/* 价格卡片样式 */
.price-card {
    @apply bg-white rounded-lg shadow-md p-8 hover:shadow-xl transition duration-300;
}

.price-card.popular {
    @apply border-t-4 border-blue-600 relative transform scale-105 z-10;
}

.price-card .price {
    @apply text-4xl font-bold text-gray-800 mb-6 text-center;
}

.price-card .feature-list {
    @apply space-y-3 mb-8;
}

/* 常见问题样式 */
.faq-item {
    @apply bg-white p-6 rounded-lg shadow-md mb-4;
}

.faq-item h3 {
    @apply text-xl font-semibold mb-3 text-gray-800;
}

.faq-item p {
    @apply text-gray-600;
}

/* 地图容器样式 */
.map-container {
    @apply h-96 w-full bg-gray-200 flex items-center justify-center;
}

/* 按钮悬停效果增强 */
button:hover {
    @apply transform translate-y-[-2px];
}

button:active {
    @apply transform translate-y-0;
}

/* 图片悬停效果 */
.img-hover {
    @apply transition duration-500 ease-in-out;
}

.img-hover:hover {
    @apply transform scale-105;
}

/* 确保所有链接都有过渡效果 */
 a {
    @apply transition duration-300;
}