/* 关键渲染路径优化 */
* {
    box-sizing: border-box;
}

/* 基础样式与主题变量 */
:root {
    --color-primary: #3b82f6;
    --color-secondary: #10b981;
    --color-accent: #f59e0b;
    --color-dark: #1f2937;
    --color-light: #f3f4f6;
    --color-neutral: #f8fafc;
}

/* Safari CSS变量兼容性修复 */
@supports not (color: var(--color-primary)) {
    .bg-primary { background-color: #3b82f6 !important; }
    .text-primary { color: #3b82f6 !important; }
    .border-primary { border-color: #3b82f6 !important; }
    .bg-secondary { background-color: #10b981 !important; }
    .text-secondary { color: #10b981 !important; }
    .bg-accent { background-color: #f59e0b !important; }
    .text-accent { color: #f59e0b !important; }
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Safari兼容性修复 */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #1f2937;
}

/* 容器（兼容本地最简 Tailwind 构建缺失 container 的情况） */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 640px) { .container { max-width: 640px; } }
@media (min-width: 768px) { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }

/* 中性色背景兜底 */
.bg-neutral { background-color: var(--color-neutral); }

/* Safari clamp函数兼容性修复 */
@supports not (font-size: clamp(1rem, 2vw, 2rem)) {
    .text-responsive {
        font-size: 1.5rem;
    }
    @media (min-width: 768px) {
        .text-responsive {
            font-size: 2rem;
        }
    }
    @media (min-width: 1024px) {
        .text-responsive {
            font-size: 2.5rem;
        }
    }
}

/* 动画效果 */
.fade-in {
    animation: fadeIn 1s ease-in-out;
    will-change: transform, opacity;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 导航栏样式 */
.nav-sticky {
    transition: all 0.3s ease;
    backdrop-filter: saturate(180%) blur(6px);
    -webkit-backdrop-filter: saturate(180%) blur(6px);
    /* Safari兼容性修复 */
    background-color: rgba(255, 255, 255, 0.95);
}

/* 服务卡片悬停效果 */
.service-card:hover {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.service-card {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
}

/* 图片通用优化 */
img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Safari兼容性修复 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 服务项目图片完整显示 */
.service-card img {
    width: 100%;
    height: auto; /* 高度自适应保持比例 */
    object-fit: contain; /* 使用 contain 保持图片完整显示 */
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
}

/* 服务项目图片容器 */
.service-card .h-48 {
    height: 240px; /* 增加高度以更好显示图片 */
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

/* 统一链接过渡效果 */
a { 
    transition: color 0.25s ease, opacity 0.25s ease;
    -webkit-transition: color 0.25s ease, opacity 0.25s ease;
}

/* 按钮风格增强（不改动 HTML，基于现有颜色类做兜底增强） */
a.bg-primary,
button.bg-primary {
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25);
}
a.bg-primary:hover,
button.bg-primary:hover {
    filter: brightness(1.02);
    -webkit-filter: brightness(1.02);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
    -webkit-transform: translateY(-1px);
}
a.bg-primary:active,
button.bg-primary:active {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.25);
}

a.border-2.border-primary,
button.border-2.border-primary {
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.1s ease;
    -webkit-transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.1s ease;
}
a.border-2.border-primary:hover,
button.border-2.border-primary:hover {
    background-color: rgba(59, 130, 246, 0.06);
}
a:focus-visible,
button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

/* Safari focus兼容性修复 */
a:focus,
button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

/* 表单焦点优化（兜底） */
input, select, textarea {
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
    border-color: var(--color-primary);
    -webkit-box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* 标题排版优化 */
h1, h2, h3, h4 {
    letter-spacing: 0.2px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1 { margin-bottom: 0.75rem; }
h2 { margin-bottom: 0.75rem; }
h3 { margin-bottom: 0.5rem; }
h4 { margin-bottom: 0.5rem; }

/* 深色模式（自动跟随系统 + 可通过 .dark 类强制） */
@media (prefers-color-scheme: dark) {
    :root {
        --color-neutral: #0b1220;
        --color-dark: #e5e7eb;
    }
    body { background-color: #0b1220; color: #e5e7eb; }
    .bg-neutral { background-color: #0f172a; }
    /* 常用卡片兜底 */
    .bg-white { background-color: #0f172a !important; }
    .text-gray-900 { color: #e5e7eb !important; }
    .text-gray-700 { color: #cbd5e1 !important; }
    .text-gray-600 { color: #94a3b8 !important; }
}

/* Safari暗色模式兼容性修复 */
@supports (-webkit-backdrop-filter: blur(10px)) {
    .nav-sticky {
        -webkit-backdrop-filter: saturate(180%) blur(6px);
        backdrop-filter: saturate(180%) blur(6px);
    }
    .border-gray-100 { border-color: #1f2937 !important; }
    .shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl { box-shadow: none; }
}

.dark body { background-color: #0b1220; color: #e5e7eb; }
.dark .bg-neutral { background-color: #0f172a; }
.dark .bg-white { background-color: #0f172a !important; }
.dark .text-gray-900 { color: #e5e7eb !important; }
.dark .text-gray-700 { color: #cbd5e1 !important; }
.dark .text-gray-600 { color: #94a3b8 !important; }
.dark .border-gray-100 { border-color: #1f2937 !important; }
.dark .shadow, .dark .shadow-sm, .dark .shadow-md, .dark .shadow-lg, .dark .shadow-xl { box-shadow: none; }