/* ============================================================
   极源科技卡网系统 - 全站样式（现代亮色商务风）
   架构：三层设计令牌（primitive → semantic → component）
   风格：Stripe/Notion 式亮色商务，蓝紫主色 + 柔和阴影 + 大留白
   所有 class 名与原版保持一致，确保 JS 交互零破坏
   ============================================================ */

/* ---------- 1. Primitive Tokens（原始令牌：调色板/字号/间距/圆角/阴影/过渡） ---------- */
:root {
    /* 品牌主色 - 蓝紫渐变体系 */
    --c-brand-50:  #eef2ff;
    --c-brand-100: #e0e7ff;
    --c-brand-200: #c7d2fe;
    --c-brand-300: #a5b4fc;
    --c-brand-400: #818cf8;
    --c-brand-500: #6366f1;  /* 主色 */
    --c-brand-600: #4f46e5;
    --c-brand-700: #4338ca;
    --c-brand-800: #3730a3;
    --c-brand-900: #312e81;

    /* 辅助色 - 青色（强调/成功） */
    --c-accent-400: #2dd4bf;
    --c-accent-500: #14b8a6;
    --c-accent-600: #0d9488;

    /* 语义色 */
    --c-success: #10b981;
    --c-warning: #f59e0b;
    --c-danger:  #ef4444;
    --c-info:    #3b82f6;

    /* 中性灰阶（11 阶） */
    --c-gray-50:  #f9fafb;
    --c-gray-100: #f3f4f6;
    --c-gray-200: #e5e7eb;
    --c-gray-300: #d1d5db;
    --c-gray-400: #9ca3af;
    --c-gray-500: #6b7280;
    --c-gray-600: #4b5563;
    --c-gray-700: #374151;
    --c-gray-800: #1f2937;
    --c-gray-900: #111827;

    /* 字体系统 */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
                 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', Consolas, 'Liberation Mono', monospace;

    /* 字号阶梯（模块化比例 1.25） */
    --fs-xs:   0.75rem;   /* 12px */
    --fs-sm:   0.875rem;  /* 14px */
    --fs-base: 1rem;      /* 16px */
    --fs-lg:   1.125rem;  /* 18px */
    --fs-xl:   1.25rem;   /* 20px */
    --fs-2xl:  1.5rem;    /* 24px */
    --fs-3xl:  1.875rem;  /* 30px */
    --fs-4xl:  2.25rem;   /* 36px */
    --fs-5xl:  3rem;      /* 48px */

    /* 字重 */
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* 行高 */
    --lh-tight: 1.25;
    --lh-snug: 1.375;
    --lh-normal: 1.6;
    --lh-relaxed: 1.75;

    /* 间距阶梯（4px 基准） */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;
    --sp-24: 96px;

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

    /* 阴影层级（elevation） */
    --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
    --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(17, 24, 39, 0.07), 0 2px 4px -2px rgba(17, 24, 39, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(17, 24, 39, 0.08), 0 4px 6px -4px rgba(17, 24, 39, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(17, 24, 39, 0.1), 0 8px 10px -6px rgba(17, 24, 39, 0.05);
    --shadow-brand: 0 8px 20px -4px rgba(99, 102, 241, 0.35);

    /* 过渡 */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* 布局 */
    --container-max: 1200px;
    --header-height: 68px;
}

/* ---------- 2. Semantic Tokens（语义令牌：按用途别名） ---------- */
:root {
    --color-bg:           var(--c-gray-50);
    --color-surface:      #ffffff;
    --color-surface-alt:  var(--c-gray-50);
    --color-border:       var(--c-gray-200);
    --color-border-strong: var(--c-gray-300);
    --color-text:         var(--c-gray-900);
    --color-text-secondary: var(--c-gray-600);
    --color-text-muted:   var(--c-gray-400);
    --color-primary:      var(--c-brand-600);
    --color-primary-hover: var(--c-brand-700);
    --color-primary-light: var(--c-brand-50);
    --gradient-brand: linear-gradient(135deg, var(--c-brand-500) 0%, var(--c-brand-700) 100%);
    --gradient-brand-soft: linear-gradient(135deg, var(--c-brand-50) 0%, var(--c-brand-100) 100%);
    --gradient-accent: linear-gradient(135deg, var(--c-brand-400) 0%, var(--c-accent-500) 100%);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; }

::selection {
    background: var(--c-brand-200);
    color: var(--c-brand-900);
}

/* ---------- 4. 布局容器 ---------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--sp-5);
}

/* ---------- 5. 导航栏 ---------- */
.header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    z-index: 1000;
    transition: var(--transition-base);
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    border-bottom-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

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

.logo { display: flex; align-items: center; }

.logo a {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--color-text);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
}

.logo a img { height: 32px; }

.logo i {
    color: var(--color-primary);
    font-size: var(--fs-2xl);
}

.logo-text {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-primary);
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-right: var(--sp-4);
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.nav-link:hover {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.nav-link.active {
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
}

.nav-link i {
    font-size: var(--fs-xs);
    transition: var(--transition-fast);
}

.nav-item:hover .nav-link i {
    transform: rotate(180deg);
}

/* 下拉菜单 */
.dropdown {
    position: relative;
}

/* hover 桥接区：用伪元素绝对定位填补导航项与下拉菜单之间的间隙，
   不占布局空间，避免带下拉的导航项与普通导航项垂直错位 */
.dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--sp-2);
    z-index: 1001;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-2);
    /* 顶部留出 padding 区域填补导航项与菜单之间的间隙，
       鼠标穿越时不会触发 mouseleave 导致菜单缩回 */
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    /* 开启：立即显示过渡；关闭：延迟 200ms 再淡出，留时间让鼠标移入 */
    transition: opacity 200ms ease, visibility 200ms ease, transform 200ms ease;
    transition-delay: 0s, 0s, 0s;
    z-index: 1001;
}

.dropdown:hover .dropdown-menu,
.dropdown.expanded .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

/* 鼠标离开 dropdown 时延迟关闭，避免移到菜单途中闪退 */
.dropdown:not(:hover):not(.expanded) .dropdown-menu {
    transition-delay: 200ms;
}

.dropdown-menu li { margin: 0; }

.dropdown-menu a {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.dropdown-menu a:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* 导航操作按钮 */
.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* 已登录用户菜单 */
.user-menu {
    position: relative;
}

.user-menu-btn {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: var(--transition-fast);
}

.user-menu-btn:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.user-menu-btn .fa-user-circle {
    font-size: var(--fs-lg);
    color: var(--color-primary);
}

.user-menu-btn .fa-chevron-down {
    font-size: var(--fs-xs);
    transition: var(--transition-fast);
}

.user-menu-btn:hover .fa-chevron-down {
    transform: rotate(180deg);
}

.user-menu-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 200ms ease, visibility 200ms ease, transform 200ms ease;
    z-index: 1001;
}

.user-menu-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu-dropdown a {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.user-menu-dropdown a:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.user-menu-dropdown .logout-link:hover {
    background: rgba(239, 68, 68, 0.08);
    color: var(--c-danger);
}

@media (max-width: 768px) {
    .user-menu-btn { width: 100%; justify-content: center; }
    .user-menu-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 1px solid var(--color-border);
        margin-top: var(--sp-2);
        display: none;
    }
    .user-menu-dropdown.open { display: block; }
}

.nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--fs-lg);
    cursor: pointer;
}

/* ---------- 6. 按钮系统 ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-6);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-base);
    white-space: nowrap;
}

.login-btn {
    background: var(--gradient-brand);
    color: #fff;
    padding: var(--sp-2) var(--sp-5);
    font-size: var(--fs-sm);
    box-shadow: var(--shadow-brand);
}

.login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -4px rgba(99, 102, 241, 0.5);
}

.primary-btn {
    background: var(--gradient-brand);
    color: #fff;
    padding: var(--sp-3) var(--sp-6);
    font-size: var(--fs-base);
    box-shadow: var(--shadow-brand);
}

.primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -4px rgba(99, 102, 241, 0.5);
}

.secondary-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
}

.secondary-btn:hover {
    background: #fff;
    color: var(--color-primary);
    border-color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ---------- 7. 英雄区域 ---------- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: calc(var(--header-height) + var(--sp-16)) 0 var(--sp-20);
    color: #fff;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(49, 46, 129, 0.92) 0%, rgba(67, 56, 202, 0.88) 50%, rgba(99, 102, 241, 0.85) 100%);
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
    align-items: center;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: var(--fs-5xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: -0.03em;
    margin-bottom: var(--sp-5);
}

.hero p {
    font-size: var(--fs-lg);
    line-height: var(--lh-relaxed);
    opacity: 0.92;
    margin-bottom: var(--sp-8);
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin: var(--sp-8) 0;
}

.hero-image {
    position: relative;
    z-index: 1;
}

.hero-image img {
    width: 100%;
    border-radius: var(--radius-xl);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.hero-note {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 3px solid var(--c-accent-400);
    backdrop-filter: blur(8px);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius-md);
    margin-top: var(--sp-8);
}

.hero-note p:first-child {
    font-weight: var(--fw-semibold);
    margin-bottom: var(--sp-2);
    color: var(--c-accent-400);
}

.hero-note p {
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    margin-bottom: var(--sp-1);
    opacity: 0.9;
}

/* 英雄侧边栏 */
.hero-sidebar {
    position: absolute;
    right: var(--sp-6);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    z-index: 2;
}

.sidebar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-text);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    box-shadow: var(--shadow-lg);
    transition: var(--transition-base);
}

.sidebar-btn i {
    font-size: var(--fs-lg);
    margin-bottom: 2px;
}

.sidebar-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-xl);
}

.share-btn:hover   { background: var(--c-info); color: #fff; }
.group-btn:hover   { background: var(--c-danger); color: #fff; }
.support-btn:hover { background: var(--color-primary); color: #fff; }

/* 咨询按钮点击弹出微信客服二维码：改用居中模态框而非 hover 局部小卡片，
   原因：.hero-sidebar 贴视口右边缘 + .hero-image 产品图占据右半区 + .hero 的
   overflow:hidden，三者共同挤压出的空间极窄，hover 局部弹窗无论往哪个方向弹都会
   遮挡产品图或被裁切；且 .hero-sidebar 在 992px 以下整体隐藏，hover 方案在移动端
   完全不可用，而扫码加客服恰恰是移动端用户的核心场景。居中模态框不受局部空间限制，
   点击触发在桌面/移动端都可用，弹窗结构与 group-buy.html 的 .modal-overlay 保持同款风格。 */
.qrcode-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: var(--sp-4);
}
.qrcode-modal-overlay.active {
    display: flex;
    animation: qrcode-modal-fade-in 0.2s ease;
}
@keyframes qrcode-modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
.qrcode-modal-box {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 320px;
    padding: var(--sp-6);
    text-align: center;
    animation: qrcode-modal-pop-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes qrcode-modal-pop-in { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: none; } }
.qrcode-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-5);
}
.qrcode-modal-header h3 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--color-text);
}
.qrcode-modal-close {
    width: 32px; height: 32px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--fs-lg);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.qrcode-modal-close:hover { background: var(--color-surface-alt); color: var(--color-text); }
.qrcode-modal-box img {
    width: 100%;
    max-width: 220px;
    height: auto;
    border-radius: var(--radius-md);
    display: block;
    margin: 0 auto;
}
.qrcode-modal-box p {
    margin-top: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
}
@media (prefers-reduced-motion: reduce) {
    .qrcode-modal-overlay.active { animation: none; }
    .qrcode-modal-box { animation: none; }
}

/* ---------- 8. 通用区块 ---------- */
.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--sp-12);
}

.section-header h2 {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
    line-height: var(--lh-tight);
    margin-bottom: var(--sp-3);
    color: var(--color-text);
}

.section-header p {
    font-size: var(--fs-lg);
    color: var(--color-text-secondary);
    line-height: var(--lh-normal);
}

/* 通用区块 padding */
.services,
.server-types,
.server-features,
.features,
.pricing,
.contact-section,
.about,
.contact,
.faq {
    padding: var(--sp-24) 0;
}

.services,
.server-features,
.pricing,
.contact {
    background: var(--color-surface);
}

.server-types,
.features,
.contact-section,
.about,
.faq {
    background: var(--color-bg);
}

/* ---------- 9. 卡片系统（服务/特色/服务器类型） ---------- */
.services-grid,
.server-grid,
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--sp-6);
}

.service-card,
.server-card,
.feature-card,
.feature-item,
.faq-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-8);
    text-align: center;
    transition: var(--transition-base);
    box-shadow: var(--shadow-xs);
}

.service-card:hover,
.server-card:hover,
.feature-card:hover,
.feature-item:hover,
.faq-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: var(--c-brand-200);
}

/* 图标容器 */
.service-icon,
.server-icon,
.feature-icon,
.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--sp-5);
    color: var(--color-primary);
    background: var(--color-primary-light);
    transition: var(--transition-base);
}

.service-icon,
.feature-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    font-size: var(--fs-2xl);
}

.server-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    font-size: var(--fs-3xl);
}

.feature-icon {
    width: 56px;
    height: 56px;
    font-size: var(--fs-xl);
}

.service-card:hover .service-icon,
.server-card:hover .server-icon,
.feature-card:hover .feature-icon,
.feature-item:hover .feature-icon {
    background: var(--gradient-brand);
    color: #fff;
    transform: scale(1.08);
}

.service-card h3,
.server-card h3,
.feature-card h3,
.feature-item h3 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    margin-bottom: var(--sp-3);
}

.service-card p,
.server-card p,
.feature-card p,
.feature-item p {
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    margin-bottom: var(--sp-4);
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--color-primary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    transition: var(--transition-fast);
}

.service-link:hover { color: var(--color-primary-hover); }

.service-link i {
    font-size: var(--fs-xs);
    transition: var(--transition-fast);
}

.service-link:hover i { transform: translateX(4px); }

/* ---------- 10. 价格区域 ---------- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--sp-6);
    margin-top: var(--sp-12);
}

.pricing-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-8);
    text-align: center;
    box-shadow: var(--shadow-xs);
    position: relative;
    transition: var(--transition-base);
}

.pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: var(--c-brand-200);
}

.pricing-card.popular {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-brand);
}

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-brand);
    color: #fff;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    box-shadow: var(--shadow-brand);
}

.pricing-header {
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--color-border);
}

.pricing-header h3 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    margin-bottom: var(--sp-3);
}

.price {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    letter-spacing: -0.02em;
}

.price-period {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    font-weight: var(--fw-normal);
}

.pricing-features { margin-bottom: var(--sp-6); }

.pricing-features ul {
    list-style: none;
    text-align: left;
}

.pricing-features li {
    display: flex;
    align-items: center;
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--c-gray-100);
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
}

.pricing-features li i {
    color: var(--c-success);
    margin-right: var(--sp-2);
    font-size: var(--fs-xs);
}

.pricing-footer { margin-top: var(--sp-6); }

.pricing-details {
    padding: var(--sp-5) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.detail-item {
    display: flex;
    justify-content: space-between;
    padding: var(--sp-2) 0;
    font-size: var(--fs-sm);
}

.detail-label { color: var(--color-text-secondary); }
.detail-value { font-weight: var(--fw-semibold); color: var(--color-text); }

/* ---------- 11. 联系方式 ---------- */
.contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--sp-6);
    margin-top: var(--sp-12);
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.contact-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    font-size: var(--fs-xl);
    flex-shrink: 0;
}

.contact-text h3 {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    margin-bottom: var(--sp-1);
}

.contact-text p {
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

.contact-social {
    margin-top: var(--sp-8);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--color-border);
}

.contact-social h3 {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    margin-bottom: var(--sp-4);
}

.social-links {
    display: flex;
    gap: var(--sp-2);
}

.social-link {
    width: 40px;
    height: 40px;
    background: var(--c-gray-100);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    font-size: var(--fs-base);
    transition: var(--transition-base);
}

.social-link:hover {
    background: var(--gradient-brand);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: var(--shadow-brand);
}

/* ---------- 12. 关于我们 ---------- */
.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-10);
    align-items: center;
}

.about-image img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.about-text h2 {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
    margin-bottom: var(--sp-5);
    color: var(--color-text);
}

.about-text p {
    color: var(--color-text-secondary);
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--sp-4);
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--color-border);
}

.stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-primary);
    margin-bottom: var(--sp-1);
    letter-spacing: -0.02em;
}

.stat-label {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---------- 13. 联系表单 ---------- */
.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-10);
}

.contact-form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: var(--sp-8);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.form-group {
    margin-bottom: var(--sp-5);
}

.form-group label {
    display: block;
    margin-bottom: var(--sp-2);
    font-weight: var(--fw-medium);
    color: var(--color-text);
    font-size: var(--fs-sm);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--color-text);
    transition: var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* ---------- 14. 页脚 ---------- */
.footer {
    background: var(--c-gray-900);
    color: var(--c-gray-300);
    padding: var(--sp-20) 0 var(--sp-8);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--sp-8);
    margin-bottom: var(--sp-10);
}

.footer-logo a {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: #fff;
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    margin-bottom: var(--sp-4);
}

/* order-confirm.html 使用的 footer-section（与 footer-logo 等价） */
.footer-section a {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: #fff;
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    margin-bottom: var(--sp-4);
}

.footer-section h3 {
    color: #fff;
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    margin-bottom: var(--sp-4);
}

.footer-section p {
    color: var(--c-gray-400);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--sp-5);
    max-width: 320px;
}

.footer-logo a img { height: 28px; }

.footer-logo i {
    color: var(--c-brand-400);
    font-size: var(--fs-2xl);
}

.footer-logo p {
    color: var(--c-gray-400);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--sp-5);
    max-width: 320px;
}

.footer-links h3 {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: #fff;
    margin-bottom: var(--sp-4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-links li { margin-bottom: var(--sp-2); }

.footer-links a {
    color: var(--c-gray-400);
    font-size: var(--fs-sm);
    transition: var(--transition-fast);
}

.footer-links a:hover {
    color: var(--c-brand-400);
    padding-left: var(--sp-1);
}

.footer .social-links { margin-top: var(--sp-2); }

.footer .social-link {
    background: rgba(255, 255, 255, 0.08);
    color: var(--c-gray-300);
}

.footer .social-link:hover {
    background: var(--gradient-brand);
    color: #fff;
}

.footer-bottom {
    border-top: 1px solid var(--c-gray-800);
    padding-top: var(--sp-6);
    text-align: center;
    color: var(--c-gray-500);
    font-size: var(--fs-sm);
}

/* ---------- 15. 常见问题 ---------- */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--sp-6);
    margin-top: var(--sp-12);
}

.faq-question {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--sp-4);
}

.faq-q {
    width: 32px;
    height: 32px;
    background: var(--gradient-brand);
    color: #fff;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    margin-right: var(--sp-3);
    flex-shrink: 0;
}

.faq-question h3 {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    margin: 0;
    flex: 1;
    line-height: var(--lh-snug);
}

.faq-answer {
    display: flex;
    align-items: flex-start;
}

.faq-a {
    width: 32px;
    height: 32px;
    background: var(--c-gray-800);
    color: #fff;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    margin-right: var(--sp-3);
    flex-shrink: 0;
}

.faq-answer p {
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    margin: 0;
    flex: 1;
}

/* ---------- 16. 动画 ---------- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---------- 17. 滚动条 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-gray-100); }
::-webkit-scrollbar-thumb {
    background: var(--c-brand-300);
    border-radius: var(--radius-full);
    border: 2px solid var(--c-gray-100);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-brand-500); }

/* ---------- 18. 响应式 ---------- */
@media (max-width: 992px) {
    .hero .container,
    .about-content,
    .contact-content {
        grid-template-columns: 1fr;
    }
    .hero-image { order: -1; }
    .about-stats { grid-template-columns: repeat(2, 1fr); }
    .footer-content { grid-template-columns: 1fr 1fr; }
    .hero-sidebar { display: none; }
}

@media (max-width: 768px) {
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
        padding: var(--sp-4);
        gap: var(--sp-1);
    }

    .nav-menu.active { display: flex; }

    .nav-item { width: 100%; }

    .nav-link {
        width: 100%;
        padding: var(--sp-3);
        justify-content: space-between;
    }

    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 1px solid var(--color-border);
        margin: var(--sp-2) 0 var(--sp-2) var(--sp-4);
        display: none;
    }

    .dropdown:hover .dropdown-menu,
    .dropdown.expanded .dropdown-menu { display: block; }

    /* 移动端关闭桌面端的关闭延迟，避免触屏点击后菜单延迟消失 */
    .dropdown:not(:hover):not(.expanded) .dropdown-menu {
        transition-delay: 0s;
    }

    .nav-actions {
        margin-left: 0;
        margin-top: var(--sp-4);
        width: 100%;
    }

    .login-btn { width: 100%; }

    .nav-toggle { display: flex; }

    .hero { min-height: auto; padding: calc(var(--header-height) + var(--sp-12)) 0 var(--sp-16); }
    .hero h1 { font-size: var(--fs-4xl); }
    .section-header h2 { font-size: var(--fs-2xl); }
    .section-header { margin-bottom: var(--sp-8); }
    .services, .server-types, .server-features, .features,
    .pricing, .contact-section, .about, .contact, .faq {
        padding: var(--sp-16) 0;
    }
}

@media (max-width: 576px) {
    .container { padding: 0 var(--sp-4); }
    .hero h1 { font-size: var(--fs-3xl); }
    .btn { padding: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); }
    .section-header h2 { font-size: var(--fs-xl); }
    .service-card, .feature-item, .pricing-card, .faq-card { padding: var(--sp-5); }
    .footer-content { grid-template-columns: 1fr; }
    .about-stats { grid-template-columns: repeat(2, 1fr); }
}