/* =====================================================
   全局设计变量
   ===================================================== */
:root {
    /* 莫兰迪基础色（用户指定，禁止修改） */
    --morandi-deep-gray: #73787D;
    --morandi-light-gray: #BABDC0;
    --morandi-blue: #9EB4CC;
    --morandi-purple: #ADA1BF;
    --morandi-china-red: #A83231;
    --morandi-pink: #D9BCC1;
    --morandi-orange: #D29657;
    --morandi-matcha-green: #879E82;

    /* 基础通用色 */
    --base-white: #FFFFFF;
    --base-black: #000000;

    /* 设计令牌 */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.16);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* =====================================================
   主题变量（10 套，由 data.json 的 current_theme 驱动）
   ===================================================== */
[data-theme="deep-gray"] {
    --theme-primary: #43484E;
    --theme-secondary: #C4C8CC;
    --theme-accent: #C9A86C;
    --theme-success: #7D8A7D;
    --theme-bg: #2E343B;
    --theme-card-bg: #383E45;
    --theme-text-primary: #ECEFF4;
    --theme-text-secondary: #A8B0BA;
    --theme-border: #3A4047;
    --theme-gradient-start: #C9A86C;
    --theme-gradient-end: #A8843A;
    --theme-navbar-bg: #43484E;
    --theme-navbar-text: #FFFFFF;
    --theme-footer-bg: #43484E;
    --theme-footer-text: #FFFFFF;
}

[data-theme="light-gray"] {
    --theme-primary: #8A9098;
    --theme-secondary: #6B7078;
    --theme-accent: #B76E79;
    --theme-success: #98D4BB;
    --theme-bg: #6E7680;
    --theme-card-bg: #7A828C;
    --theme-text-primary: #F5F7FA;
    --theme-text-secondary: #C0C6CE;
    --theme-border: #5A6068;
    --theme-gradient-start: #B76E79;
    --theme-gradient-end: #8C525B;
    --theme-navbar-bg: #8A9098;
    --theme-navbar-text: #FFFFFF;
    --theme-footer-bg: #8A9098;
    --theme-footer-text: #FFFFFF;
}

[data-theme="blue"] {
    --theme-primary: #3E5A73;
    --theme-secondary: #4A5568;
    --theme-accent: #C9A86C;
    --theme-success: #6B9B7A;
    --theme-bg: #1E3550;
    --theme-card-bg: #263E5C;
    --theme-text-primary: #EAF2FA;
    --theme-text-secondary: #A8BFD4;
    --theme-border: #2A4A6B;
    --theme-gradient-start: #3E5A73;
    --theme-gradient-end: #C9A86C;
    --theme-navbar-bg: #3E5A73;
    --theme-navbar-text: #FFFFFF;
    --theme-footer-bg: #3E5A73;
    --theme-footer-text: #FFFFFF;
}

[data-theme="purple"] {
    --theme-primary: #7A6E8C;
    --theme-secondary: #6B6378;
    --theme-accent: #C9B8E0;
    --theme-success: #8FA68F;
    --theme-bg: #3E3550;
    --theme-card-bg: #473D5B;
    --theme-text-primary: #EFEAF7;
    --theme-text-secondary: #B4A8CC;
    --theme-border: #554A73;
    --theme-gradient-start: #7A6E8C;
    --theme-gradient-end: #C9B8E0;
    --theme-navbar-bg: #7A6E8C;
    --theme-navbar-text: #FFFFFF;
    --theme-footer-bg: #7A6E8C;
    --theme-footer-text: #FFFFFF;
}

[data-theme="china-red"] {
    --theme-primary: #5C2323;
    --theme-secondary: #4A4A4A;
    --theme-accent: #C9A86C;
    --theme-success: #3D5A47;
    --theme-bg: #451A1A;
    --theme-card-bg: #522020;
    --theme-text-primary: #F7E9E9;
    --theme-text-secondary: #C99A9A;
    --theme-border: #5C2323;
    --theme-gradient-start: #5C2323;
    --theme-gradient-end: #C9A86C;
    --theme-navbar-bg: #5C2323;
    --theme-navbar-text: #FFFFFF;
    --theme-footer-bg: #5C2323;
    --theme-footer-text: #FFFFFF;
}

[data-theme="pink"] {
    --theme-primary: #B8949E;
    --theme-secondary: #9A9399;
    --theme-accent: #B76E79;
    --theme-success: #8FA68F;
    --theme-bg: #7A4E5C;
    --theme-card-bg: #865664;
    --theme-text-primary: #FAEEF2;
    --theme-text-secondary: #D2A6B4;
    --theme-border: #6B4350;
    --theme-gradient-start: #B8949E;
    --theme-gradient-end: #B76E79;
    --theme-navbar-bg: #B8949E;
    --theme-navbar-text: #FFFFFF;
    --theme-footer-bg: #B8949E;
    --theme-footer-text: #FFFFFF;
}

[data-theme="orange"] {
    --theme-primary: #A9744F;
    --theme-secondary: #6B5D54;
    --theme-accent: #C9A86C;
    --theme-success: #7D9176;
    --theme-bg: #5C3A28;
    --theme-card-bg: #694432;
    --theme-text-primary: #F8EDE4;
    --theme-text-secondary: #CFA88A;
    --theme-border: #805238;
    --theme-gradient-start: #A9744F;
    --theme-gradient-end: #C9A86C;
    --theme-navbar-bg: #A9744F;
    --theme-navbar-text: #FFFFFF;
    --theme-footer-bg: #A9744F;
    --theme-footer-text: #FFFFFF;
}

[data-theme="matcha-green"] {
    --theme-primary: #6B7F65;
    --theme-secondary: #8B8678;
    --theme-accent: #C9B896;
    --theme-success: #4A5D45;
    --theme-bg: #3A4A38;
    --theme-card-bg: #435441;
    --theme-text-primary: #EEF4EC;
    --theme-text-secondary: #B3C2AC;
    --theme-border: #4A5D45;
    --theme-gradient-start: #6B7F65;
    --theme-gradient-end: #C9B896;
    --theme-navbar-bg: #6B7F65;
    --theme-navbar-text: #FFFFFF;
    --theme-footer-bg: #6B7F65;
    --theme-footer-text: #FFFFFF;
}

[data-theme="midnight"] {
    --theme-primary: #1A1A1A;
    --theme-secondary: #4A4A4A;
    --theme-accent: #C9A86C;
    --theme-success: #7D8A7D;
    --theme-bg: #121212;
    --theme-card-bg: #1E1E1E;
    --theme-text-primary: #ECECEC;
    --theme-text-secondary: #A0A0A0;
    --theme-border: #3A3A3A;
    --theme-gradient-start: #C9A86C;
    --theme-gradient-end: #A8843A;
    --theme-navbar-bg: #1A1A1A;
    --theme-navbar-text: #FFFFFF;
    --theme-footer-bg: #1A1A1A;
    --theme-footer-text: #FFFFFF;
}

[data-theme="china-pride"] {
    --theme-primary: #8B1A2B;
    --theme-secondary: #5C0F1D;
    --theme-accent: #C9A86C;
    --theme-success: #2E7D32;
    --theme-bg: #5A1220;
    --theme-card-bg: #661626;
    --theme-text-primary: #FAEAEA;
    --theme-text-secondary: #D09AA0;
    --theme-border: #6B1626;
    --theme-gradient-start: #8B1A2B;
    --theme-gradient-end: #C9A86C;
    --theme-navbar-bg: #8B1A2B;
    --theme-navbar-text: #FFFFFF;
    --theme-footer-bg: #8B1A2B;
    --theme-footer-text: #FFFFFF;
}

/* 默认主题（铂金沉稳） */
:root:not([data-theme]) {
    --theme-primary: #43484E;
    --theme-secondary: #C4C8CC;
    --theme-accent: #C9A86C;
    --theme-success: #7D8A7D;
    --theme-bg: #2E343B;
    --theme-card-bg: #383E45;
    --theme-text-primary: #ECEFF4;
    --theme-text-secondary: #A8B0BA;
    --theme-border: #3A4047;
    --theme-gradient-start: #C9A86C;
    --theme-gradient-end: #A8843A;
    --theme-navbar-bg: #43484E;
    --theme-navbar-text: #FFFFFF;
    --theme-footer-bg: #43484E;
    --theme-footer-text: #FFFFFF;
}

/* =====================================================
   动画
   ===================================================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(32px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.animate-fade-in-up { animation: fadeInUp 0.7s var(--ease) forwards; }
.animate-fade-in { animation: fadeIn 0.6s var(--ease) forwards; }
.animate-scale-in { animation: scaleIn 0.5s var(--ease) forwards; }

.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.16s; }
.delay-3 { animation-delay: 0.24s; }
.delay-4 { animation-delay: 0.32s; }
.delay-5 { animation-delay: 0.4s; }
.delay-6 { animation-delay: 0.48s; }

/* =====================================================
   全局重置
   ===================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.7;
    color: var(--theme-text-primary);
    background-color: var(--theme-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* =====================================================
   导航栏
   ===================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 68px;
    background-color: var(--theme-navbar-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    transition: height 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.navbar.scrolled {
    height: 60px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.14);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--theme-navbar-text);
}

.logo-img {
    height: 40px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
}

.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.25;
}

.logo-en {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--theme-navbar-text);
}

.logo-cn {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--theme-navbar-text);
    opacity: 0.85;
}

.menu ul {
    display: flex;
    list-style: none;
    gap: 34px;
    align-items: center;
}

.menu li {
    position: relative;
}

.menu a {
    position: relative;
    display: inline-block;
    padding: 6px 2px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--theme-navbar-text);
    opacity: 0.9;
    transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}

.menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--theme-accent), var(--theme-gradient-end));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
}

.menu a:hover {
    color: var(--theme-accent);
    opacity: 1;
}

.menu a:hover::after {
    transform: scaleX(1);
}

.mobile-menu-btn {
    display: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.mobile-menu-btn span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--theme-navbar-text);
    transition: all 0.3s var(--ease);
}

/* =====================================================
   轮播区
   ===================================================== */
.banner {
    position: relative;
    width: 100%;
    height: 620px;
    overflow: hidden;
    margin-top: 68px;
}

.banner-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.banner-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}

.banner-slide.active {
    opacity: 1;
    transform: scale(1);
}

.banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.45) 100%);
    z-index: 1;
}

.banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #FFFFFF;
    z-index: 2;
    width: 80%;
    max-width: 900px;
    padding: 40px 60px;
}

.banner-content .banner-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 18px;
    letter-spacing: 3px;
    color: #FFFFFF;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.7s 0.2s var(--ease) forwards;
}

.banner-content .banner-subtitle {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.7s 0.4s var(--ease) forwards;
}

.banner-indicators {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.indicator {
    width: 26px;
    height: 5px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.4s var(--ease);
}

.indicator.active {
    width: 40px;
    background-color: var(--theme-accent);
}

.banner-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 28px;
    z-index: 10;
    pointer-events: none;
}

.arrow {
    pointer-events: auto;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    font-size: 22px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.3s var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow:hover {
    background-color: var(--theme-accent);
    color: #FFFFFF;
    transform: scale(1.08);
}

/* =====================================================
   公司简介区
   ===================================================== */
.about {
    background-color: var(--theme-bg);
    padding: 96px 0;
    position: relative;
    overflow: hidden;
}

.about::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -8%;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, var(--theme-primary) 0%, transparent 70%);
    opacity: 0.06;
    pointer-events: none;
}

.about-content {
    display: flex;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.about-text {
    flex: 1;
}

.about-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--theme-text-primary);
    margin-bottom: 12px;
    position: relative;
    display: inline-block;
}

.about-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 56px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--theme-accent), var(--theme-gradient-end));
}

.about-subtitle {
    font-size: 17px;
    font-weight: 600;
    color: var(--theme-accent);
    margin: 22px 0 20px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.about-desc {
    font-size: 16px;
    line-height: 1.9;
    color: var(--theme-text-secondary);
}

.about-image {
    flex: 1;
    max-width: 560px;
    height: 420px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease);
}

.about-image:hover img {
    transform: scale(1.04);
}

/* =====================================================
   区块标题（业务/产品/实力共用）
   ===================================================== */
.section-title {
    text-align: center;
    margin-bottom: 56px;
    position: relative;
}

.section-title h2 {
    font-size: 34px;
    font-weight: 700;
    color: var(--theme-text-primary);
    letter-spacing: 1px;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    display: block;
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--theme-accent), var(--theme-gradient-end));
    margin: 16px auto 0;
}

/* =====================================================
   核心业务区
   ===================================================== */
.business {
    padding: 96px 0;
}

.business-grid {
    display: grid;
    grid-template-columns: repeat(var(--cards-per-row, 4), 1fr);
    gap: 26px;
}

.business-card {
    background-color: var(--theme-card-bg);
    border: 1px solid var(--theme-border);
    border-radius: var(--radius-lg);
    padding: 32px 22px;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.business-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--theme-accent), var(--theme-gradient-end));
    transform: scaleX(1);
    opacity: 0.3;
    transform-origin: left;
    transition: opacity 0.4s var(--ease);
}

.business-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
    border-color: var(--theme-accent);
}

.business-card:hover::before {
    opacity: 1;
}

.business-image {
    height: 180px;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.business-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

.business-card:hover .business-image img {
    transform: scale(1.1);
}

.business-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin-bottom: 8px;
}

.business-subtitle {
    font-size: 13px;
    color: var(--theme-text-secondary);
    letter-spacing: 0.3px;
}

/* =====================================================
   产品案例区
   ===================================================== */
.product {
    padding: 96px 0;
    background-color: var(--theme-bg);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(var(--cards-per-row, 4), 1fr);
    gap: 30px;
}

.product-card {
    background-color: var(--theme-card-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--theme-border);
}

.product-card:hover {
    transform: translateY(-12px);
    box-shadow: var(--shadow-xl);
    border-color: var(--theme-accent);
}

.product-image {
    position: relative;
    height: 280px;
    overflow: hidden;
}

.product-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
}

.product-card:hover .product-image::after {
    opacity: 1;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease);
}

.product-card:hover .product-image img {
    transform: scale(1.1);
}

.product-info {
    padding: 24px;
}

.product-name {
    font-size: 19px;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin-bottom: 10px;
}

.product-desc {
    font-size: 14px;
    color: var(--theme-text-secondary);
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =====================================================
   公司实力区
   ===================================================== */
.strength {
    padding: 96px 0;
    background-color: var(--theme-bg);
}

.strength-grid {
    display: grid;
    grid-template-columns: repeat(var(--cards-per-row, 4), 1fr);
    gap: 26px;
}

.strength-card {
    background-color: var(--theme-card-bg);
    padding: 44px 24px;
    text-align: center;
    border-radius: var(--radius-lg);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
    border: 1px solid var(--theme-border);
    position: relative;
    overflow: hidden;
}

.strength-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--theme-accent), var(--theme-gradient-end));
    opacity: 0.3;
    transition: all 0.35s var(--ease);
}

.strength-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--theme-accent);
}

.strength-card:hover::after {
    opacity: 1;
    width: 64px;
}

.strength-image {
    height: 160px;
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.strength-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

.strength-card:hover .strength-image img {
    transform: scale(1.1);
}

.strength-number {
    font-size: 30px;
    font-weight: 800;
    color: var(--theme-accent);
    margin-bottom: 8px;
    line-height: 1;
}

.strength-desc {
    font-size: 14px;
    color: var(--theme-text-primary);
    font-weight: 500;
}

/* =====================================================
   页脚
   ===================================================== */
.footer {
    background-color: var(--theme-footer-bg);
    color: var(--theme-footer-text);
    padding: 72px 0 32px;
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--theme-accent), var(--theme-gradient-end));
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.footer-brand {
    text-align: center;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    width: 100%;
}

.footer-brand .brand-name {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 4px;
    margin: 0;
    background: linear-gradient(90deg, var(--theme-footer-text), var(--theme-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-nav {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 20px;
}

.footer-nav a {
    color: var(--theme-footer-text);
    opacity: 0.85;
    font-size: 13px;
    font-weight: 500;
    padding: 9px 20px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.35s var(--ease);
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.footer-nav a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-gradient-end));
    opacity: 0;
    transition: opacity 0.35s var(--ease);
    z-index: -1;
}

.footer-nav a:hover {
    color: #FFFFFF;
    opacity: 1;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.footer-nav a:hover::before {
    opacity: 1;
}

.footer-media {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
}

.media-item {
    position: relative;
}

.media-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgba(255, 255, 255, 0.85);
    transition: all 0.3s var(--ease);
}

.media-icon {
    font-size: 22px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    transition: all 0.3s var(--ease);
}

.media-name {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
}

.media-link:hover {
    color: #FFFFFF;
    transform: translateY(-2px);
}

.media-link:hover .media-icon {
    background-color: rgba(255, 255, 255, 0.22);
}

.media-qrcode {
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    z-index: 100;
    background-color: #FFFFFF;
    padding: 10px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.media-qrcode img {
    width: 120px;
    height: 120px;
}

.media-item:hover .media-qrcode {
    display: block;
}

.footer-bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 20px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-contact {
    text-align: center;
    color: var(--theme-footer-text);
    width: 100%;
}

.footer-contact .contact-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--theme-footer-text);
}

.footer-contact .contact-details {
    font-size: 14px;
    color: var(--theme-footer-text);
    opacity: 0.82;
    line-height: 1.8;
}

.footer-contact .contact-details p {
    margin-bottom: 6px;
}

.footer-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    text-align: center;
}

.footer-left {
    font-size: 14px;
    color: var(--theme-footer-text);
    opacity: 0.82;
}

.footer-right {
    font-size: 12px;
    color: var(--theme-footer-text);
    opacity: 0.6;
}

/* =====================================================
   预约咨询悬浮入口
   ===================================================== */
.contact-float-btn {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 9999;
    display: none;
}

.contact-float-btn.show {
    display: block;
}

.contact-float-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-gradient-end));
    color: #FFFFFF;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
    transition: all 0.3s var(--ease);
    animation: floatY 3s ease-in-out infinite;
}

.contact-float-link:hover {
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
    transform: translateY(-2px);
}

.contact-float-icon {
    font-size: 18px;
}

/* =====================================================
   预约咨询弹窗
   ===================================================== */
.contact-popup {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.contact-popup.show {
    display: flex;
}

.contact-popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.contact-popup-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: scaleIn 0.3s var(--ease);
}

.contact-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 28px;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    color: #FFFFFF;
}

.contact-popup-header h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.contact-popup-close {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 26px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.85;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.contact-popup-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.contact-popup-form {
    padding: 28px;
}

.contact-popup-form .form-group {
    margin-bottom: 20px;
}

.contact-popup-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.contact-popup-form label .required {
    color: #C62828;
    margin-left: 3px;
}

.contact-popup-form input,
.contact-popup-form select,
.contact-popup-form textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #E0E0E0;
    border-radius: var(--radius-sm);
    font-size: 14px;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
    font-family: inherit;
    background-color: #FAFAFA;
}

.contact-popup-form input:focus,
.contact-popup-form select:focus,
.contact-popup-form textarea:focus {
    outline: none;
    border-color: var(--theme-accent);
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.contact-popup-form textarea {
    resize: vertical;
    min-height: 88px;
}

.form-message {
    padding: 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 14px;
    display: none;
}

.form-message.success {
    display: block;
    background: #E8F5E9;
    color: #2E7D32;
}

.form-message.error {
    display: block;
    background: #FFEBEE;
    color: #C62828;
}

.contact-submit-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-gradient-end));
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.3s var(--ease);
}

.contact-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.contact-submit-btn:disabled {
    background: #CCC;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 次要样式（后台「按钮样式」配置为 secondary 时启用；主题配色会通过内联样式覆盖） */
.contact-submit-btn.secondary {
    background: linear-gradient(135deg, var(--theme-secondary, #9E9E9E), #757575);
}

/* =====================================================
   懒加载 + 滚动动画
   ===================================================== */
.lazy-load {
    opacity: 0;
    transition: opacity 0.4s var(--ease);
}

.lazy-load.loaded {
    opacity: 1;
}

/* =====================================================
   响应式
   ===================================================== */
@media (max-width: 1366px) {
    .banner { height: 500px; }
    .about-content { gap: 40px; }
}

@media (max-width: 768px) {
    .navbar { height: 60px; }
    .navbar .container { padding: 0 16px; }
    .banner { height: 360px; margin-top: 60px; }

    .menu {
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: var(--theme-navbar-bg);
        border-bottom: 1px solid var(--theme-border);
        transform: translateY(-110%);
        opacity: 0;
        transition: all 0.3s var(--ease);
        z-index: 999;
        box-shadow: var(--shadow-lg);
    }

    .menu.active {
        transform: translateY(0);
        opacity: 1;
    }

    .menu ul {
        flex-direction: column;
        gap: 0;
        padding: 12px 0;
    }

    .menu li {
        padding: 12px 24px;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .banner-title,
    .banner-content .banner-title { font-size: 26px; letter-spacing: 1px; }
    .banner-subtitle,
    .banner-content .banner-subtitle { font-size: 13px; letter-spacing: 2px; }
    .banner-arrows { padding: 0 12px; }
    .arrow { width: 36px; height: 36px; font-size: 18px; }

    .about { padding: 56px 0; }
    .about-content { flex-direction: column; text-align: center; gap: 32px; }
    .about-title::after { left: 50%; transform: translateX(-50%); }
    .about-image { height: 260px; max-width: 100%; }
    .about-title { font-size: 26px; }
    .about-subtitle { font-size: 15px; }

    .business, .product, .strength { padding: 56px 0; }
    .section-title { margin-bottom: 32px; }
    .section-title h2 { font-size: 26px; }
    .business-grid, .product-grid, .strength-grid { grid-template-columns: repeat(var(--cards-per-row-mobile, 1), 1fr); gap: 18px; }

    .footer { padding: 44px 0 20px; }
    .footer-content { gap: 26px; }
    .footer-bottom { flex-direction: column; gap: 24px; }
    .footer-info { text-align: center; }

    .contact-float-btn { bottom: 20px; right: 20px; }
    .contact-float-link { width: 58px; height: 58px; padding: 0; border-radius: 50%; justify-content: center; animation: none; }
    .contact-float-text { display: none; }
    .contact-float-icon { font-size: 24px; }
}

@media (max-width: 414px) {
    .banner { height: 300px; }
    .banner-content { padding: 20px; }
    .banner-content .banner-title { font-size: 22px; }
    .banner-content .banner-subtitle { font-size: 12px; }
    .section-title h2 { font-size: 22px; }
    .about-title { font-size: 22px; }
    .strength-number { font-size: 26px; }
}

/* 预约咨询表单隐私说明 */
.contact-privacy {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #888;
    text-align: center;
}