/**
 * 摄状元®数字创影 — 全站统一设计系统 v1.0
 * 品牌色(橙+白) + 字体 + 间距 + 组件 + 响应式
 * 所有页面必须引用此文件，禁止各自为政
 */

/* ===== 1. CSS变量 — 全站设计令牌 ===== */
:root {
    /* 品牌色 */
    --szy-primary: #C86B2A;
    --szy-primary-dark: #A0551F;
    --szy-primary-light: #E8873A;
    --szy-primary-bg: rgba(200, 107, 42, 0.06);

    /* 辅助金 */
    --szy-gold: #D4A574;
    --szy-gold-light: #E8C9A0;
    --szy-gold-dark: #B8860B;

    /* 深色底 */
    --szy-dark: #3D2A1A;
    --szy-dark-2: #2A1D12;
    --szy-dark-3: #4A3525;

    /* 中性色 */
    --szy-text: #2D2D2D;
    --szy-text-secondary: #6B6B6B;
    --szy-text-muted: #999999;
    --szy-border: rgba(212, 165, 116, 0.15);
    --szy-border-light: rgba(0, 0, 0, 0.06);

    /* 背景色 */
    --szy-bg: #FAF7F4;
    --szy-bg-warm: #FFFBF5;
    --szy-bg-white: #FFFFFF;
    --szy-bg-section: #F5F0EB;

    /* 功能色 */
    --szy-success: #16A34A;
    --szy-warning: #D97706;
    --szy-error: #DC2626;
    --szy-info: #2563EB;

    /* 字体 */
    --szy-font: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
    --szy-font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

    /* 字号阶梯 */
    --szy-text-xs: 0.75rem;    /* 12px */
    --szy-text-sm: 0.875rem;   /* 14px */
    --szy-text-base: 1rem;     /* 16px */
    --szy-text-lg: 1.125rem;   /* 18px */
    --szy-text-xl: 1.25rem;    /* 20px */
    --szy-text-2xl: 1.5rem;    /* 24px */
    --szy-text-3xl: 1.875rem;  /* 30px */
    --szy-text-4xl: 2.25rem;   /* 36px */
    --szy-text-5xl: 3rem;      /* 48px */

    /* 间距阶梯 */
    --szy-space-1: 4px;
    --szy-space-2: 8px;
    --szy-space-3: 12px;
    --szy-space-4: 16px;
    --szy-space-5: 20px;
    --szy-space-6: 24px;
    --szy-space-8: 32px;
    --szy-space-10: 40px;
    --szy-space-12: 48px;
    --szy-space-16: 64px;
    --szy-space-20: 80px;

    /* 圆角 */
    --szy-radius-sm: 6px;
    --szy-radius: 10px;
    --szy-radius-lg: 16px;
    --szy-radius-xl: 24px;
    --szy-radius-full: 9999px;

    /* 阴影 */
    --szy-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --szy-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    --szy-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.1);
    --szy-shadow-brand: 0 4px 20px rgba(200, 107, 42, 0.15);
    --szy-shadow-hover: 0 12px 36px rgba(200, 107, 42, 0.12);

    /* 过渡 */
    --szy-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --szy-transition-fast: all 0.15s ease;

    /* 最大宽度 */
    --szy-max-width: 1200px;
    --szy-header-height: 64px;

    /* ===== 兼容别名 — 旧页面变量名映射到设计系统 ===== */
    --szy-red: var(--szy-primary);
    --szy-red-dark: var(--szy-primary-dark);
    --szy-coral: var(--szy-primary-light);
    --szy-warm-bg: var(--szy-bg-warm);
    --szy-cream: #FFF5EB;
    --szy-text-light: var(--szy-text-secondary);
}

/* ===== 2. 全局重置 ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--szy-font);
    font-size: var(--szy-text-base);
    line-height: 1.6;
    color: var(--szy-text);
    background: var(--szy-bg);
}

a {
    color: var(--szy-primary);
    text-decoration: none;
    transition: var(--szy-transition-fast);
}
a:hover {
    color: var(--szy-primary-dark);
}

img {
    max-width: 100%;
    height: auto;
}

/* ===== 3. 排版系统 ===== */
.szy-h1 {
    font-size: var(--szy-text-5xl);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--szy-text);
}
.szy-h2 {
    font-size: var(--szy-text-3xl);
    font-weight: 700;
    line-height: 1.3;
    color: var(--szy-text);
}
.szy-h3 {
    font-size: var(--szy-text-xl);
    font-weight: 600;
    line-height: 1.4;
    color: var(--szy-text);
}
.szy-h4 {
    font-size: var(--szy-text-lg);
    font-weight: 600;
    line-height: 1.4;
    color: var(--szy-text);
}
.szy-body {
    font-size: var(--szy-text-base);
    line-height: 1.6;
    color: var(--szy-text-secondary);
}
.szy-caption {
    font-size: var(--szy-text-sm);
    color: var(--szy-text-muted);
}

/* ===== 4. 容器 ===== */
.szy-container {
    max-width: var(--szy-max-width);
    margin: 0 auto;
    padding: 0 var(--szy-space-6);
}
.szy-section {
    padding: var(--szy-space-20) var(--szy-space-6);
}
.szy-section-sm {
    padding: var(--szy-space-12) var(--szy-space-6);
}

/* ===== 5. 按钮系统 ===== */
.szy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--szy-space-2);
    padding: 12px 28px;
    font-size: var(--szy-text-base);
    font-weight: 600;
    line-height: 1;
    border: none;
    border-radius: var(--szy-radius);
    cursor: pointer;
    transition: var(--szy-transition);
    text-decoration: none;
    white-space: nowrap;
}
.szy-btn:active {
    transform: scale(0.97);
}

/* Primary — 品牌红渐变 */
.szy-btn-primary {
    background: linear-gradient(135deg, var(--szy-primary), var(--szy-primary-light));
    color: #fff;
    box-shadow: var(--szy-shadow-brand);
}
.szy-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(200, 107, 42, 0.25);
    color: #fff;
}

/* Secondary — 金底红字 */
.szy-btn-secondary {
    background: linear-gradient(135deg, #FFF5EB, #FEF0E0);
    color: var(--szy-primary);
    border: 1px solid var(--szy-border);
}
.szy-btn-secondary:hover {
    background: linear-gradient(135deg, #FEF0E0, #FDE8D0);
    transform: translateY(-1px);
}

/* Gold — 金底深字，CTA用 */
.szy-btn-gold {
    background: var(--szy-gold);
    color: var(--szy-dark);
    font-weight: 700;
    border-radius: var(--szy-radius-full);
    padding: 14px 36px;
}
.szy-btn-gold:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(212, 165, 116, 0.3);
    color: var(--szy-dark);
}

/* Ghost — 透明底 */
.szy-btn-ghost {
    background: transparent;
    color: var(--szy-primary);
    border: 1.5px solid var(--szy-primary);
}
.szy-btn-ghost:hover {
    background: var(--szy-primary);
    color: #fff;
}

/* Dark — 深色底 */
.szy-btn-dark {
    background: linear-gradient(135deg, var(--szy-dark), var(--szy-dark-2));
    color: #fff;
}
.szy-btn-dark:hover {
    transform: translateY(-2px);
    box-shadow: var(--szy-shadow-lg);
    color: #fff;
}

/* Sizes */
.szy-btn-sm {
    padding: 8px 18px;
    font-size: var(--szy-text-sm);
    border-radius: var(--szy-radius-sm);
}
.szy-btn-lg {
    padding: 16px 40px;
    font-size: var(--szy-text-lg);
    border-radius: var(--szy-radius);
}

/* ===== 6. 卡片系统 ===== */
.szy-card {
    background: var(--szy-bg-white);
    border-radius: var(--szy-radius-lg);
    padding: var(--szy-space-8);
    border: 1px solid var(--szy-border);
    box-shadow: var(--szy-shadow-sm);
    transition: var(--szy-transition);
}
.szy-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--szy-shadow-hover);
}

/* Card with top accent */
.szy-card-accent {
    position: relative;
    overflow: hidden;
}
.szy-card-accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--szy-primary), var(--szy-gold));
}

/* Card icon */
.szy-card-icon {
    font-size: 2.5rem;
    margin-bottom: var(--szy-space-4);
    display: block;
}

/* Card title */
.szy-card-title {
    font-size: var(--szy-text-xl);
    font-weight: 700;
    color: var(--szy-primary);
    margin-bottom: var(--szy-space-2);
}

/* Card description */
.szy-card-desc {
    font-size: var(--szy-text-sm);
    color: var(--szy-text-secondary);
    margin-bottom: var(--szy-space-4);
    line-height: 1.7;
}

/* Card price */
.szy-card-price {
    background: linear-gradient(135deg, #FFF5EB, #FEF0E0);
    border-radius: var(--szy-radius-sm);
    padding: var(--szy-space-3) var(--szy-space-4);
    text-align: center;
    margin-bottom: var(--szy-space-4);
}
.szy-card-price .label {
    font-size: var(--szy-text-xs);
    color: var(--szy-text-muted);
}
.szy-card-price .value {
    font-size: var(--szy-text-xl);
    font-weight: 700;
    color: var(--szy-primary);
}

/* ===== 7. Hero区系统 ===== */
.szy-hero {
    background: linear-gradient(135deg, var(--szy-primary) 0%, var(--szy-primary-dark) 50%, var(--szy-dark) 100%);
    color: #fff;
    text-align: center;
    padding: 100px var(--szy-space-6) 80px;
    position: relative;
    overflow: hidden;
}
.szy-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 165, 116, 0.08) 0%, transparent 60%);
    animation: szy-hero-glow 8s ease-in-out infinite;
}
@keyframes szy-hero-glow {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(5%, 5%); }
}
.szy-hero h1 {
    font-size: var(--szy-text-5xl);
    font-weight: 800;
    margin-bottom: var(--szy-space-4);
    position: relative;
    z-index: 1;
}
.szy-hero h1 span {
    color: var(--szy-gold);
}
.szy-hero p {
    font-size: var(--szy-text-lg);
    opacity: 0.9;
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
}

/* Dark hero variant */
.szy-hero-dark {
    background: linear-gradient(135deg, var(--szy-dark) 0%, var(--szy-dark-2) 50%, #0D0810 100%);
}

/* ===== 8. Section标题系统 ===== */
.szy-section-header {
    text-align: center;
    margin-bottom: var(--szy-space-12);
}
.szy-section-title {
    font-size: var(--szy-text-3xl);
    font-weight: 700;
    color: var(--szy-primary);
    margin-bottom: var(--szy-space-2);
}
.szy-section-subtitle {
    font-size: var(--szy-text-base);
    color: var(--szy-text-muted);
}

/* On dark background */
.szy-section-header-light .szy-section-title {
    color: var(--szy-gold);
}
.szy-section-header-light .szy-section-subtitle {
    color: rgba(255, 255, 255, 0.5);
}

/* ===== 9. Grid系统 ===== */
.szy-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--szy-space-6);
}
.szy-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--szy-space-6);
}
.szy-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--szy-space-6);
}

/* ===== 10. 深色区块 ===== */
.szy-bg-dark {
    background: linear-gradient(135deg, var(--szy-dark), var(--szy-dark-2));
    color: #fff;
    padding: var(--szy-space-20) var(--szy-space-6);
}
.szy-bg-dark .szy-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(212, 165, 116, 0.2);
}
.szy-bg-dark .szy-card:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ===== 11. CTA区块 ===== */
.szy-cta {
    background: linear-gradient(135deg, var(--szy-primary), var(--szy-primary-dark));
    text-align: center;
    padding: var(--szy-space-20) var(--szy-space-6);
    color: #fff;
}
.szy-cta h2 {
    font-size: var(--szy-text-3xl);
    margin-bottom: var(--szy-space-4);
}
.szy-cta p {
    opacity: 0.85;
    margin-bottom: var(--szy-space-8);
    font-size: var(--szy-text-lg);
}

/* ===== 12. 标签/Badge ===== */
.szy-badge {
    display: inline-block;
    padding: 4px 12px;
    font-size: var(--szy-text-xs);
    font-weight: 600;
    border-radius: var(--szy-radius-full);
    background: var(--szy-primary-bg);
    color: var(--szy-primary);
}
.szy-badge-gold {
    background: linear-gradient(135deg, #FFF5EB, #FEF0E0);
    color: var(--szy-gold-dark);
}
.szy-badge-success {
    background: rgba(22, 163, 74, 0.1);
    color: var(--szy-success);
}

/* ===== 13. 分割线 ===== */
.szy-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--szy-border), transparent);
    margin: var(--szy-space-8) 0;
}

/* ===== 14. 列表样式 ===== */
.szy-list {
    list-style: none;
}
.szy-list li {
    padding: var(--szy-space-2) 0;
    color: var(--szy-text-secondary);
    font-size: var(--szy-text-sm);
    display: flex;
    align-items: center;
    gap: var(--szy-space-2);
}
.szy-list li::before {
    content: '✓';
    color: var(--szy-gold);
    font-weight: bold;
    flex-shrink: 0;
}

/* ===== 15. Footer统一 ===== */
.szy-footer {
    background: var(--szy-dark);
    color: rgba(255, 255, 255, 0.6);
    padding: var(--szy-space-12) var(--szy-space-6) var(--szy-space-6);
}
.szy-footer-inner {
    max-width: var(--szy-max-width);
    margin: 0 auto;
}
.szy-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--szy-space-8);
    margin-bottom: var(--szy-space-8);
}
.szy-footer h4 {
    color: var(--szy-gold);
    font-size: var(--szy-text-base);
    font-weight: 600;
    margin-bottom: var(--szy-space-4);
}
.szy-footer a {
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--szy-text-sm);
    transition: var(--szy-transition-fast);
}
.szy-footer a:hover {
    color: var(--szy-gold);
}
.szy-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: var(--szy-space-6);
    text-align: center;
    font-size: var(--szy-text-sm);
}

/* ===== 16. 响应式断点 ===== */
@media (max-width: 1024px) {
    :root {
        --szy-text-5xl: 2.5rem;
        --szy-text-3xl: 1.5rem;
    }
    .szy-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .szy-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    :root {
        --szy-text-5xl: 2rem;
        --szy-text-3xl: 1.375rem;
        --szy-text-2xl: 1.25rem;
    }
    .szy-section {
        padding: var(--szy-space-12) var(--szy-space-4);
    }
    .szy-hero {
        padding: 72px var(--szy-space-4) 56px;
    }
    .szy-grid-2,
    .szy-grid-3,
    .szy-grid-4 {
        grid-template-columns: 1fr;
    }
    .szy-footer-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    :root {
        --szy-text-5xl: 1.75rem;
    }
    .szy-btn {
        padding: 10px 20px;
        font-size: var(--szy-text-sm);
    }
    .szy-btn-lg {
        padding: 12px 28px;
        font-size: var(--szy-text-base);
    }
}

/* ===== 17. 工具类 ===== */
.text-center { text-align: center; }
.text-primary { color: var(--szy-primary); }
.text-gold { color: var(--szy-gold); }
.text-muted { color: var(--szy-text-muted); }
.fw-bold { font-weight: 700; }
.fw-semibold { font-weight: 600; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--szy-space-4); }
.mt-8 { margin-top: var(--szy-space-8); }
.mb-4 { margin-bottom: var(--szy-space-4); }
.mb-8 { margin-bottom: var(--szy-space-8); }
.p-0 { padding: 0; }

/* ===== 18. 动画 ===== */
@keyframes szy-fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes szy-slide-up {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}
.szy-animate {
    animation: szy-fade-in 0.6s ease-out forwards;
}
.szy-animate-delay-1 { animation-delay: 0.1s; opacity: 0; }
.szy-animate-delay-2 { animation-delay: 0.2s; opacity: 0; }
.szy-animate-delay-3 { animation-delay: 0.3s; opacity: 0; }
.szy-animate-delay-4 { animation-delay: 0.4s; opacity: 0; }

/* ===== 19. 打印样式 ===== */
@media print {
    .szy-header, .szy-footer, .szy-cta, .szy-btn { display: none !important; }
    body { background: #fff; color: #000; }
}

/* ============================================
   FOOTER — 全站统一Footer样式 v10.1
   ============================================ */
.site-footer {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 50%, #0d0d2b 100%);
    color: #b0b0c8;
    padding: 60px 0 30px;
    margin-top: 80px;
    border-top: 1px solid rgba(100, 100, 180, 0.2);
}
.site-footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: 40px;
    margin-bottom: 40px;
}
.footer-brand {}
.footer-logo {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.footer-slogan {
    font-size: 1rem;
    color: #ffd700;
    margin-bottom: 10px;
    font-weight: 500;
}
.footer-tech {
    font-size: 0.75rem;
    color: #666;
    line-height: 1.6;
}
.footer-links h4,
.footer-contact h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #e0e0f0;
    margin-bottom: 16px;
}
.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li {
    margin-bottom: 8px;
}
.footer-links a {
    color: #9090b0;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s;
}
.footer-links a:hover {
    color: #ffd700;
}
.footer-contact p {
    font-size: 0.85rem;
    color: #9090b0;
    margin-bottom: 8px;
    line-height: 1.5;
}
.footer-bottom {
    border-top: 1px solid rgba(100, 100, 180, 0.15);
    padding-top: 24px;
    text-align: center;
}
.footer-bottom p {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 6px;
    line-height: 1.5;
}
.footer-bottom a {
    color: #8080a0;
    text-decoration: none;
}
.footer-bottom a:hover {
    color: #ffd700;
}
.footer-disclaimer {
    font-size: 0.72rem !important;
    color: #555 !important;
    max-width: 700px;
    margin: 10px auto !important;
    line-height: 1.5;
}
.footer-report-link {
    color: #8080a0 !important;
    font-size: 0.8rem;
    text-decoration: underline;
}
.footer-report-link:hover {
    color: #ffd700 !important;
}
/* Footer响应式 */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
}
@media (max-width: 576px) {
    .site-footer {
        padding: 40px 0 20px;
        margin-top: 40px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .footer-logo {
        font-size: 1.2rem;
    }
}