/* 
 * 富青会展云 - 设计系统
 * Neo-Tech Fusion 美学方向
 * 深邃科技感 + 东方商务稳重
 */

/* ==========================================
   CSS变量 - 设计令牌
   ========================================== */

:root {
    /* 色彩系统 */
    --color-bg-primary: #0a0a0f;
    --color-bg-secondary: #0f0f18;
    --color-bg-tertiary: #14141f;
    --color-bg-card: rgba(20, 20, 35, 0.7);
    --color-bg-glass: rgba(255, 255, 255, 0.03);

    /* 主色调 - 科技蓝 (专业与信任) */
    --color-primary: #4858ff;
    --color-primary-light: #6b7aff;
    --color-primary-dark: #3a47cc;
    --color-primary-glow: rgba(72, 88, 255, 0.35);

    /* 辅助色 */
    --color-accent-cyan: #00d4ff;
    --color-accent-purple: #a855f7;
    --color-accent-green: #10b981;

    /* 文字色彩 */
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.7);
    --color-text-muted: rgba(255, 255, 255, 0.5);
    --color-text-subtle: rgba(255, 255, 255, 0.3);

    /* 边框与分割线 */
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-hover: rgba(255, 255, 255, 0.2);

    /* 字体系统 */
    --font-display: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
    --font-body: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* 字号比例 */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;

    /* 间距系统 (8px基准) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* 圆角 */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* 阴影 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 40px var(--color-primary-glow);

    /* 过渡 */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    --transition-slower: 500ms ease;

    /* 层级 */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-toast: 400;

    /* 容器宽度 */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1440px;
}

/* ==========================================
   基础重置
   ========================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    min-height: 100vh;
    overflow-x: hidden;
}

img,
video,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

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

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

ul,
ol {
    list-style: none;
}

/* ==========================================
   容器与布局
   ========================================== */

.container {
    width: 100%;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.container--narrow {
    max-width: var(--container-lg);
}

.container--wide {
    max-width: var(--container-2xl);
}

.section {
    padding: var(--space-24) 0;
    position: relative;
}

.section--hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 80px;
}

/* Flex工具类 */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.gap-2 {
    gap: var(--space-2);
}

.gap-4 {
    gap: var(--space-4);
}

.gap-6 {
    gap: var(--space-6);
}

.gap-8 {
    gap: var(--space-8);
}

/* Grid工具类 */
.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* ==========================================
   导航栏
   ========================================== */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    padding: var(--space-4) 0;
    transition: background var(--transition-base), -webkit-backdrop-filter var(--transition-base), backdrop-filter var(--transition-base);
}

.navbar--scrolled {
    background: rgba(10, 10, 15, 0.9);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border);
}

.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar__logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
}

.navbar__logo-icon {
    width: 40px;
    height: 40px;
}

.navbar__nav {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.navbar__link {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
    position: relative;
}

.navbar__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width var(--transition-base);
}

.navbar__link:hover {
    color: var(--color-text-primary);
}

.navbar__link:hover::after {
    width: 100%;
}

.navbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.navbar__toggle {
    display: none;
    width: 32px;
    height: 32px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.navbar__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text-primary);
    transition: transform var(--transition-base), opacity var(--transition-base);
    transform-origin: center;
}

.navbar__toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.navbar__toggle.active span:nth-child(2) {
    opacity: 0;
}

.navbar__toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================
   按钮系统
   ========================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.btn:hover::before {
    opacity: 1;
}

/* 主要按钮 */
.btn--primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #ffffff;
    box-shadow: var(--shadow-md), 0 0 20px var(--color-primary-glow);
}

.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 0 30px var(--color-primary-glow);
}

/* 描边按钮 */
.btn--outline {
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.btn--outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(72, 88, 255, 0.1);
}

/* 大尺寸按钮 */
.btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
    border-radius: var(--radius-xl);
}

/* ==========================================
   Hero区域
   ========================================== */

.hero {
    position: relative;
    overflow: hidden;
}

.hero__canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__canvas canvas {
    width: 100% !important;
    height: 100% !important;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center bottom, transparent 0%, var(--color-bg-primary) 70%);
    z-index: 1;
    pointer-events: none;
}

.hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

/* Badge with glow effect */
.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-glass);
    border: 1px solid rgba(72, 88, 255, 0.3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--color-primary-light);
    margin-bottom: var(--space-6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(72, 88, 255, 0.2);
    animation: badge-glow 3s ease-in-out infinite;
}

@keyframes badge-glow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(72, 88, 255, 0.2);
    }

    50% {
        box-shadow: 0 0 30px rgba(72, 88, 255, 0.4);
    }
}

.hero__star {
    animation: star-pulse 2s infinite ease-in-out;
    transform-origin: center;
    color: var(--color-accent-cyan);
}

@keyframes star-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    50% {
        opacity: 0.7;
        transform: scale(0.9) rotate(15deg);
    }
}

/* Enhanced title with animated gradient */
.hero__title {
    font-family: var(--font-display);
    font-size: clamp(var(--text-4xl), 6vw, var(--text-7xl));
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--space-6);
    background: linear-gradient(135deg,
            var(--color-text-primary) 0%,
            var(--color-primary-light) 50%,
            var(--color-accent-cyan) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: title-gradient 8s ease-in-out infinite;
}

@keyframes title-gradient {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.hero__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-10);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* CTA with glow effect on primary button */
.hero__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.hero__cta .btn--primary {
    box-shadow: 0 0 30px rgba(72, 88, 255, 0.4);
    transition: all var(--transition-base);
}

.hero__cta .btn--primary:hover {
    box-shadow: 0 0 50px rgba(72, 88, 255, 0.6);
    transform: translateY(-2px);
}

/* Enhanced 信任栏 */
.trust-bar {
    margin-top: var(--space-16);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
    position: relative;
}

.trust-bar::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent-cyan));
    border-radius: 1px;
}

.trust-bar__label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: var(--space-6);
}

.trust-bar__label strong {
    color: var(--color-primary-light);
    font-weight: 700;
}

/* Marquee scrolling effect */
.trust-bar__marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, white 5%, white 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, white 5%, white 95%, transparent);
}

.trust-bar__track {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: max-content;
    animation: marquee-scroll 60s linear infinite;
}

.trust-bar__track:hover {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.trust-bar__item {
    flex-shrink: 0;
    position: relative;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
    transition: all var(--transition-base);
}

/* Dot separator */
.trust-bar__item::after {
    content: '•';
    position: absolute;
    right: calc(var(--space-3) * -1 - 0.25em);
    color: var(--color-primary);
    opacity: 0.5;
}

.trust-bar__item:hover {
    color: var(--color-primary-light);
}

/* ==========================================
   痛点卡片
   ========================================== */

/* Pain Points Background - Now Shared */

.pain-points::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.3), transparent);
}

.pain-points .container {
    position: relative;
    z-index: 2;
}

.pain-points__header {
    text-align: center;
    margin-bottom: var(--space-16);
}

.pain-points__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

.pain-card {
    position: relative;
    height: 380px;
    perspective: 1000px;
    cursor: pointer;
}

.pain-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.pain-card:hover .pain-card__inner {
    transform: rotateY(180deg);
}

.pain-card:hover .pain-card__front {
    box-shadow: 0 0 40px var(--color-primary-glow), 0 0 80px rgba(72, 88, 255, 0.15);
}

.pain-card:hover .pain-card__back {
    box-shadow: 0 0 40px var(--color-primary-glow), 0 0 80px rgba(72, 88, 255, 0.2);
}

.pain-card__front,
.pain-card__back {
    position: absolute;
    inset: 0;
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
}

.pain-card__front {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.pain-card__back {
    background: linear-gradient(135deg, var(--color-bg-tertiary), var(--color-bg-card));
    border: 1px solid var(--color-primary);
    transform: rotateY(180deg);
    justify-content: center;
}

.pain-card__icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    background: var(--color-bg-glass);
    border-radius: var(--radius-xl);
    color: var(--color-primary);
}

.pain-card__icon svg {
    width: 100%;
    height: 100%;
}

.pain-card__label {
    font-size: var(--text-sm);
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.pain-card__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-4);
}

.pain-card__desc {
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.pain-card__solution {
    font-size: var(--text-base);
    color: var(--color-text-primary);
    line-height: 1.8;
    text-align: left;
}

.pain-card__solution strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary-light);
    margin-bottom: var(--space-3);
    text-align: center;
}

/* ==========================================
   解决方案金字塔
   ========================================== */

/* Shared Background for Pain Points and Stats */
.pain-points,
.stats {
    position: relative;
    background: var(--color-bg-secondary);
    overflow: hidden;
}

.pain-points::before,
.stats::before {
    display: none;
}

.parallax-bg {
    position: absolute;
    top: -20%;
    /* Extra height for scrolling */
    left: 0;
    width: 100%;
    height: 140%;
    background-image: url('https://image.chinafuturelink.com/attendees.jpg?imageView2/2/w/2000');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    will-change: transform;
}

.pain-points .parallax-bg {
    background-image: url('https://image.chinafuturelink.com/%E7%94%9F%E6%88%90%E5%B1%95%E4%BC%9A%E6%91%84%E5%BD%B1%E5%9B%BE.png?imageView2/2/w/2000');
}

/* Shared Mask Overlay */
.pain-points__mask,
.stats__mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(10, 18, 36, 0.85) 0%,
            rgba(10, 18, 36, 0.9) 50%,
            rgba(10, 18, 36, 0.85) 100%);
    z-index: 1;
}

.solutions {
    position: relative;
    overflow: hidden;
}

.solutions__bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, var(--color-bg-tertiary), var(--color-bg-primary));
    z-index: 0;
    overflow: hidden;
}

#solutions-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* 解决方案区背景 - 上升光束 */
.solutions::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(to top, var(--color-primary), transparent);
    opacity: 0.2;
    z-index: 0;
}

.solutions::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--color-primary-glow) 0%, transparent 70%);
    opacity: 0.15;
    z-index: 0;
}

.solutions__content {
    position: relative;
    z-index: 1;
}

.solutions__header {
    text-align: center;
    margin-bottom: var(--space-16);
}

.pyramid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    max-width: 800px;
    margin: 0 auto;
}

.pyramid__layer {
    width: 100%;
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    text-align: center;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.pyramid__layer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(255, 255, 255, 0.08),
            transparent 40%);
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: 1;
    pointer-events: none;
}

.pyramid__layer:hover::before {
    opacity: 1;
}

/* Hover Indicator - Top Right */
.pyramid__layer::after {
    content: '了解详情 →';
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-full);
    opacity: 0;
    transform: translateX(10px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    z-index: 10;
    pointer-events: none;
}

.pyramid__layer:hover::after {
    opacity: 1;
    transform: translateX(0);
}

.pyramid__layer:hover {
    transform: translateY(-4px);
    cursor: pointer;
}

.pyramid__layer--top {
    max-width: 55%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    box-shadow: var(--shadow-glow), 0 20px 40px rgba(72, 88, 255, 0.3);
    z-index: 3;
}

.pyramid__layer--top:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-glow), 0 30px 60px rgba(72, 88, 255, 0.4);
}

.pyramid__layer--top .pyramid__title,
.pyramid__layer--top .pyramid__desc,
.pyramid__layer--top .pyramid__tag {
    color: #ffffff;
}

.pyramid__layer--middle {
    max-width: 75%;
    background: linear-gradient(135deg, rgba(72, 88, 255, 0.25), rgba(72, 88, 255, 0.08));
    border: 1px solid rgba(72, 88, 255, 0.4);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    z-index: 2;
}

.pyramid__layer--middle:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: var(--color-primary);
    box-shadow: 0 0 30px var(--color-primary-glow);
}

.pyramid__layer--bottom {
    max-width: 95%;
    background: linear-gradient(135deg, rgba(72, 88, 255, 0.08), var(--color-bg-card));
    border: 1px solid var(--color-border);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    z-index: 1;
}

.pyramid__layer--bottom:hover {
    transform: translateY(-4px);
    border-color: rgba(72, 88, 255, 0.5);
    box-shadow: 0 0 20px rgba(72, 88, 255, 0.15);
}

/* 层级连接线 */
.pyramid::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 80%;
    background: linear-gradient(to bottom, var(--color-primary), transparent);
    opacity: 0.2;
    z-index: 0;
}

.pyramid__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: rgba(72, 88, 255, 0.1);
    border-radius: var(--radius-full);
}

.pyramid__layer--top .pyramid__tag {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.pyramid__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-3);
    transition: transform var(--transition-fast);
}

.pyramid__layer:hover .pyramid__title {
    transform: scale(1.02);
}

.pyramid__desc {
    color: var(--color-text-secondary);
    max-width: 500px;
    margin: 0 auto;
}

/* ==========================================
   数据背书
   ========================================== */

/* Stats Background - Now Shared */

/* 数据区背景 - 数据网格效果 */

.stats::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(0deg, transparent 49.5%, rgba(72, 88, 255, 0.03) 49.5%, rgba(72, 88, 255, 0.03) 50.5%, transparent 50.5%),
        linear-gradient(90deg, transparent 49.5%, rgba(72, 88, 255, 0.03) 49.5%, rgba(72, 88, 255, 0.03) 50.5%, transparent 50.5%);
    background-size: 100px 100px;
    animation: stats-grid-pulse 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes stats-grid-pulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.6;
    }
}

.stats__map {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    z-index: 0;
}

.stats__content {
    position: relative;
    z-index: 3;
}

.stats__header {
    text-align: center;
    margin-bottom: var(--space-16);
}

.stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
}

.stat-card {
    text-align: center;
    padding: var(--space-8);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transition: all var(--transition-base);
}

.stat-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 30px var(--color-primary-glow);
    transform: translateY(-4px);
}

.stat-card__number {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-4);
}

.stat-card__label {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

/* ==========================================
   角色升级 Section
   ========================================== */

.role-upgrade {
    position: relative;
    background: linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
    overflow: hidden;
}

.role-upgrade::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, var(--color-primary-glow) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0.2;
    pointer-events: none;
}

.role-upgrade__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    margin-top: var(--space-12);
}

/* Role Card */
.role-card {
    position: relative;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    text-align: center;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transition: all var(--transition-slow);
    overflow: hidden;
}

.role-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent-cyan));
    opacity: 0;
    transition: opacity var(--transition-base);
}

.role-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(72, 88, 255, 0.2);
}

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

/* Before/After States */
.role-card__before,
.role-card__after {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.role-card__before {
    opacity: 0.5;
    margin-bottom: 0;
}

.role-card__after {
    margin-bottom: var(--space-4);
}

/* Icons */
.role-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    transition: all var(--transition-base);
}

.role-card__icon--before {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-muted);
}

.role-card__icon--after {
    width: 80px;
    height: 80px;
    color: #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.role-card__icon--data {
    color: var(--color-accent-blue);
    background: radial-gradient(circle at top left, rgba(72, 88, 255, 0.25), rgba(72, 88, 255, 0.05));
    box-shadow: 0 0 30px rgba(72, 88, 255, 0.2);
}

.role-card__icon--connect {
    color: var(--color-accent-purple);
    background: radial-gradient(circle at top left, rgba(168, 85, 247, 0.25), rgba(168, 85, 247, 0.05));
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.2);
}

.role-card__icon--asset {
    color: var(--color-accent-cyan);
    background: radial-gradient(circle at top left, rgba(0, 212, 255, 0.25), rgba(0, 212, 255, 0.05));
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.2);
}

.role-card:hover .role-card__icon--after {
    transform: scale(1.1);
    box-shadow: 0 0 50px var(--color-primary-glow);
}

/* Titles */
.role-card__old-title {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: line-through;
    font-weight: 400;
}

.role-card__new-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: transform var(--transition-base);
}

.role-card:hover .role-card__new-title {
    transform: scale(1.05);
}

/* Arrow */
.role-card__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: calc(-1 * var(--space-1)) 0 var(--space-2) 0;
    color: var(--color-accent-green);
}

.role-card__arrow svg {
    animation: arrowPulse 1.5s ease-in-out infinite;
}

@keyframes arrowPulse {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.7;
    }

    50% {
        transform: translateY(4px);
        opacity: 1;
    }
}

/* Description */
.role-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    transition: color var(--transition-base);
}

.role-card:hover .role-card__desc {
    color: var(--color-text-primary);
}

/* Responsive */
@media (max-width: 1024px) {
    .role-upgrade__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .role-upgrade__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .role-card {
        padding: var(--space-8);
    }

    .role-card__new-title {
        font-size: var(--text-xl);
    }
}

/* ==========================================
   CTA区域
   ========================================== */

.cta-section {
    position: relative;
    background: linear-gradient(135deg, var(--color-bg-tertiary), var(--color-bg-primary));
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: center;
}

/* 动态背景容器 */
.cta-section__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* 流动光晕效果 */
.cta-section__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
}

.cta-section__glow--1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
    top: -200px;
    left: -100px;
    animation: cta-glow-1 12s ease-in-out infinite;
}

.cta-section__glow--2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--color-accent-cyan) 0%, transparent 70%);
    bottom: -150px;
    right: -100px;
    animation: cta-glow-2 10s ease-in-out infinite;
}

@keyframes cta-glow-1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }

    33% {
        transform: translate(100px, 50px) scale(1.1);
        opacity: 0.5;
    }

    66% {
        transform: translate(50px, -30px) scale(0.9);
        opacity: 0.4;
    }
}

@keyframes cta-glow-2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.25;
    }

    50% {
        transform: translate(-80px, -40px) scale(1.15);
        opacity: 0.45;
    }
}

/* 动态网格背景 */
.cta-section__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(72, 88, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(72, 88, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: cta-grid-move 20s linear infinite;
}

@keyframes cta-grid-move {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(60px, 60px);
    }
}

/* 浮动粒子效果 */
.cta-section__particles {
    position: absolute;
    inset: 0;
}

.cta-section__particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--color-primary);
    border-radius: 50%;
    opacity: 0;
    animation: cta-particle-float 8s ease-in-out infinite;
}

.cta-section__particles span:nth-child(1) {
    left: 10%;
    top: 20%;
    animation-delay: 0s;
    animation-duration: 7s;
}

.cta-section__particles span:nth-child(2) {
    left: 20%;
    top: 80%;
    animation-delay: 1s;
    animation-duration: 9s;
}

.cta-section__particles span:nth-child(3) {
    left: 35%;
    top: 30%;
    animation-delay: 2s;
    animation-duration: 6s;
}

.cta-section__particles span:nth-child(4) {
    left: 50%;
    top: 70%;
    animation-delay: 0.5s;
    animation-duration: 8s;
}

.cta-section__particles span:nth-child(5) {
    left: 65%;
    top: 25%;
    animation-delay: 3s;
    animation-duration: 10s;
}

.cta-section__particles span:nth-child(6) {
    left: 75%;
    top: 85%;
    animation-delay: 1.5s;
    animation-duration: 7s;
}

.cta-section__particles span:nth-child(7) {
    left: 85%;
    top: 40%;
    animation-delay: 2.5s;
    animation-duration: 9s;
}

.cta-section__particles span:nth-child(8) {
    left: 90%;
    top: 60%;
    animation-delay: 0.8s;
    animation-duration: 6s;
}

.cta-section__particles span:nth-child(9) {
    left: 5%;
    top: 50%;
    animation-delay: 4s;
    animation-duration: 8s;
}

.cta-section__particles span:nth-child(10) {
    left: 45%;
    top: 15%;
    animation-delay: 3.5s;
    animation-duration: 11s;
}

@keyframes cta-particle-float {
    0% {
        transform: translateY(0) scale(0);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
        transform: translateY(-10px) scale(1);
    }

    50% {
        opacity: 0.5;
        transform: translateY(-40px) scale(0.8);
    }

    90% {
        opacity: 0.8;
        transform: translateY(-80px) scale(1);
    }

    100% {
        transform: translateY(-100px) scale(0);
        opacity: 0;
    }
}

.cta-section__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.cta-section__title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 700;
    margin-bottom: var(--space-4);
}

.cta-section__desc {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
}

/* ==========================================
   页脚
   ========================================== */

.footer {
    background: var(--color-bg-primary);
    border-top: 1px solid var(--color-border);
    padding: var(--space-16) 0 var(--space-8);
}

.footer__grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}

.footer__brand {
    max-width: 300px;
}

.footer__logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-4);
}

.footer__desc {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.7;
}

.footer__title {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer__link {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

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

.footer__bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.footer__legal {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.footer__copy {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.footer__beian {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.footer__beian-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    transition: color var(--transition-fast);
}

.footer__beian-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.footer__beian-link:hover {
    color: var(--color-text-secondary);
}

.footer__social {
    display: flex;
    gap: var(--space-4);
}

.footer__social-item {
    position: relative;
}

.footer__social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--color-bg-glass);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}

/* 社交图标颜色控制 */
/* 默认状态：全部显示为白色 */
.footer__social-link svg path {
    fill: #ffffff;
    transition: fill var(--transition-base);
}

/* 微信：默认显示为白色，背景路径不再特殊处理 */
/* .footer__social-link--wechat svg path:first-child {
    fill: transparent;
} */

/* Hover状态：恢复原色 */

/* 微信 Hover */
.footer__social-link--wechat:hover svg path {
    fill: #66BB33;
    /* 绿色背景 */
}

/* 小红书 Hover */
.footer__social-link--xhs:hover svg path {
    fill: #FF0000;
    /* 红色内容 */
}

.footer__social-link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(72, 88, 255, 0.1);
}

.hero__cta--center {
    justify-content: center;
    margin-top: 2rem;
    display: flex;
}

/* 二维码弹出框 */
.footer__qrcode-popup {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    z-index: var(--z-dropdown);
}

.footer__social-item:hover .footer__qrcode-popup {
    opacity: 1;
    visibility: visible;
}

.footer__qrcode-box {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    text-align: center;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-xl);
    min-width: 140px;
}

.footer__qrcode-box::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--color-border);
}

.footer__qrcode-img {
    display: block;
    width: 100px;
    height: 100px;
    min-width: 100px;
    min-height: 100px;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2);
    object-fit: contain;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
}

.footer__qrcode-box p {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin: 0;
}

/* ==========================================
   通用标题样式
   ========================================== */

.section-header {
    text-align: center;
    margin-bottom: var(--space-16);
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--space-4);
}

.section-desc {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* ==========================================
   动画关键帧
   ========================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

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

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

/* 动画工具类 */
.animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fadeIn {
    animation: fadeIn 0.6s ease-out forwards;
}

.animate-delay-1 {
    animation-delay: 0.1s;
}

.animate-delay-2 {
    animation-delay: 0.2s;
}

.animate-delay-3 {
    animation-delay: 0.3s;
}

.animate-delay-4 {
    animation-delay: 0.4s;
}

/* ==========================================
   滚动触发动画
   ========================================== */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* ==========================================
   响应式设计
   ========================================== */

/* 平板 */
@media (max-width: 1024px) {
    .navbar__nav {
        display: none;
    }

    .navbar__actions {
        display: none;
    }

    .navbar__toggle {
        display: flex;
    }

    .pain-points__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pain-card {
        height: 350px;
    }

    .stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 手机 */
@media (max-width: 768px) {
    :root {
        --space-24: 4rem;
        --space-16: 3rem;
    }

    .hero__title {
        font-size: var(--text-4xl);
    }

    .hero__cta {
        flex-direction: column;
        width: 100%;
    }

    .hero__cta .btn {
        width: 100%;
    }

    .pain-points__grid {
        grid-template-columns: 1fr;
    }

    .pain-card {
        height: 320px;
    }

    .pyramid__layer--top,
    .pyramid__layer--middle,
    .pyramid__layer--bottom {
        max-width: 100%;
    }

    .stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .stat-card {
        padding: var(--space-6);
    }

    .stat-card__number {
        font-size: var(--text-4xl);
    }

    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .footer__bottom {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }
}

/* 小手机 */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--space-4);
    }

    .stats__grid {
        grid-template-columns: 1fr;
    }

    .trust-bar__logos {
        gap: var(--space-8);
    }
}

/* ==========================================
   Logo滚动动画
   ========================================== */

.logo-scroll {
    overflow: hidden;
    position: relative;
}

.logo-scroll::before,
.logo-scroll::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

.logo-scroll::before {
    left: 0;
    background: linear-gradient(to right, var(--color-bg-secondary), transparent);
}

.logo-scroll::after {
    right: 0;
    background: linear-gradient(to left, var(--color-bg-secondary), transparent);
}

.logo-scroll__track {
    display: flex;
    animation: scroll 30s linear infinite;
}

.logo-scroll__track:hover {
    animation-play-state: paused;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ==========================================
   玻璃态效果
   ========================================== */

.glass {
    background: var(--color-bg-glass);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.glass--dark {
    background: var(--color-bg-card);
}

/* ==========================================
   移动端导航菜单
   ========================================== */

.mobile-menu {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 20, 0.75);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    z-index: calc(var(--z-sticky) - 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-8);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu__link {
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.mobile-menu__link:hover {
    color: var(--color-primary);
}

/* ==========================================
   AI匹配引擎页面样式
   ========================================== */

/* Section 1: AI Hero / 概念引入 */
.ai-hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--space-24) + 80px);
    /* 增加导航栏高度 */
    overflow: hidden;
}

.ai-hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(72, 88, 255, 0.15), transparent),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(168, 85, 247, 0.1), transparent);
    z-index: 0;
}

.ai-hero__content {
    position: relative;
    z-index: 1;
}

.ai-hero__title {
    font-family: var(--font-display);
    font-size: clamp(var(--text-3xl), 5vw, var(--text-6xl));
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--space-8);
}

.ai-hero__title .highlight {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 对比卡片 */
.compare-cards {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    margin-top: var(--space-12);
    flex-wrap: wrap;
}

.compare-card {
    position: relative;
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    text-align: center;
    width: 280px;
    transition: all var(--transition-base);
}

.compare-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-border-hover);
}

.compare-card--old {
    opacity: 0.7;
}

.compare-card--old:hover {
    border-color: #ef4444;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.2);
}

.compare-card--new:hover {
    border-color: var(--color-accent-green);
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.3);
}

.compare-card__badge {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare-card__badge--fail {
    background: #ef4444;
    color: white;
}

.compare-card__badge--success {
    background: var(--color-accent-green);
    color: white;
}

.compare-card__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.compare-card--new .compare-card__icon {
    color: var(--color-primary);
}

.compare-card__title {
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.compare-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.compare-card__arrow {
    color: var(--color-primary);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: translateX(0);
    }

    50% {
        opacity: 0.5;
        transform: translateX(10px);
    }
}

/* Section 2: 运作流程 */
.workflow {
    background: var(--color-bg-secondary);
}

.workflow__timeline {
    position: relative;
    padding: var(--space-16) 0;
}

.workflow__line {
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    transform: translateY(-50%);
}

.workflow__progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent-cyan));
    border-radius: 2px;
    transition: width 1s ease;
}

.workflow__steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.workflow__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-2xl);
    background: transparent;
    transition: all var(--transition-base);
    cursor: pointer;
    position: relative;
}

/* hover时底部发光边框效果 */
.workflow__step::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent-cyan));
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.workflow__step:hover::after {
    width: 80%;
}

.workflow__step:hover {
    background: rgba(72, 88, 255, 0.05);
}

.workflow__step-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-bg-primary);
    border: 3px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
    transition: all var(--transition-base);
}

.workflow__step:hover .workflow__step-icon,
.workflow__step.active .workflow__step-icon {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 30px var(--color-primary-glow);
    transform: scale(1.1);
}

.workflow__step-content {
    max-width: 280px;
}

.workflow__step-num {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--space-2);
    transition: all var(--transition-base);
}

.workflow__step:hover .workflow__step-num {
    transform: scale(1.1);
}

.workflow__step-title {
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: var(--space-1);
    transition: all var(--transition-base);
}

.workflow__step:hover .workflow__step-title {
    color: var(--color-primary-light);
}

.workflow__step-subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-family: var(--font-display);
    margin-bottom: var(--space-3);
    transition: all var(--transition-base);
}

/* 描述默认显示但低透明度，hover时高亮 - 不改变高度 */
.workflow__step-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
    opacity: 0.4;
    transition: all 0.3s ease;
}

.workflow__step:hover .workflow__step-desc {
    opacity: 1;
    color: var(--color-text-secondary);
}

/* 箭头指示器样式 - 简洁发光设计 */
.workflow__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    position: relative;
}

.workflow__arrow svg {
    display: none;
}

/* 使用纯CSS三角形箭头 - 无方形边界 */
.workflow__arrow::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid var(--color-accent-cyan);
    filter: drop-shadow(0 0 6px var(--color-accent-cyan)) drop-shadow(0 0 12px rgba(0, 212, 255, 0.5));
    animation: arrowGlow 2s ease-in-out infinite;
}

.workflow__arrow::after {
    display: none;
}

@keyframes arrowGlow {

    0%,
    100% {
        opacity: 0.6;
        filter: drop-shadow(0 0 4px var(--color-accent-cyan)) drop-shadow(0 0 8px rgba(0, 212, 255, 0.3));
    }

    50% {
        opacity: 1;
        filter: drop-shadow(0 0 8px var(--color-accent-cyan)) drop-shadow(0 0 16px rgba(0, 212, 255, 0.6));
    }
}

/* 同色系渐进 - 从浅到深体现阶段递进 */

/* 阶段1：浅蓝 - 起始阶段 */
.workflow__step--stage1 .workflow__step-icon {
    border-color: rgba(107, 122, 255, 0.3);
}

.workflow__step--stage1:hover .workflow__step-icon,
.workflow__step--stage1.active .workflow__step-icon {
    border-color: #7b8aff;
    color: #7b8aff;
    box-shadow: 0 0 25px rgba(123, 138, 255, 0.35);
}

.workflow__step--stage1 .workflow__step-num {
    color: #7b8aff;
}

.workflow__step--stage1::after {
    background: linear-gradient(90deg, #7b8aff, rgba(123, 138, 255, 0.5));
}

.workflow__step--stage1:hover .workflow__step-title {
    color: #8b9aff;
}

/* 阶段2：标准蓝 - 核心阶段 */
.workflow__step--stage2 .workflow__step-icon {
    border-color: rgba(72, 88, 255, 0.3);
}

.workflow__step--stage2:hover .workflow__step-icon,
.workflow__step--stage2.active .workflow__step-icon {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 30px var(--color-primary-glow);
}

.workflow__step--stage2 .workflow__step-num {
    color: var(--color-primary);
}

.workflow__step--stage2::after {
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
}

.workflow__step--stage2:hover .workflow__step-title {
    color: var(--color-primary-light);
}

/* 阶段3：深蓝 - 终极阶段 */
.workflow__step--stage3 .workflow__step-icon {
    border-color: rgba(58, 71, 204, 0.4);
}

.workflow__step--stage3:hover .workflow__step-icon,
.workflow__step--stage3.active .workflow__step-icon {
    border-color: #3a47cc;
    color: #3a47cc;
    box-shadow: 0 0 35px rgba(58, 71, 204, 0.45);
}

.workflow__step--stage3 .workflow__step-num {
    color: #3a47cc;
}

.workflow__step--stage3::after {
    background: linear-gradient(90deg, #3a47cc, rgba(58, 71, 204, 0.6));
}

.workflow__step--stage3:hover .workflow__step-title {
    color: #4a57dc;
}

/* Section 3: 核心功能矩阵 */
.features {
    position: relative;
    overflow: hidden;
}

.features__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 50% at 20% 20%, rgba(72, 88, 255, 0.08), transparent),
        radial-gradient(ellipse 50% 50% at 80% 80%, rgba(168, 85, 247, 0.06), transparent);
    z-index: 0;
}

.features__content {
    position: relative;
    z-index: 1;
}

.features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.feature-card {
    position: relative;
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    text-align: center;
    transition: all var(--transition-base);
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(72, 88, 255, 0.1),
            transparent 40%);
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: 0;
    pointer-events: none;
}

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

.feature-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-primary);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px var(--color-primary-glow);
}

.feature-card__icon {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    background: rgba(72, 88, 255, 0.1);
    border-radius: var(--radius-xl);
    transition: all var(--transition-base);
}

.feature-card:hover .feature-card__icon {
    background: var(--color-primary);
    color: white;
    transform: scale(1.1);
}

.feature-card__title {
    position: relative;
    z-index: 1;
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.feature-card__desc {
    position: relative;
    z-index: 1;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    transition: color var(--transition-base);
}

.feature-card:hover .feature-card__desc {
    color: var(--color-text-secondary);
}

/* 功能卡片颜色变体 - 视觉多样性 */

/* 青色变体 */
.feature-card--cyan .feature-card__icon {
    color: var(--color-accent-cyan);
    background: rgba(0, 212, 255, 0.1);
}

.feature-card--cyan:hover .feature-card__icon {
    background: var(--color-accent-cyan);
}

.feature-card--cyan:hover {
    border-color: var(--color-accent-cyan);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 212, 255, 0.3);
}

.feature-card--cyan::before {
    background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(0, 212, 255, 0.12),
            transparent 40%);
}

/* 蓝色变体 (默认) */
.feature-card--blue .feature-card__icon {
    color: var(--color-primary);
    background: rgba(72, 88, 255, 0.1);
}

.feature-card--blue:hover .feature-card__icon {
    background: var(--color-primary);
}

.feature-card--blue:hover {
    border-color: var(--color-primary);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px var(--color-primary-glow);
}

/* 靛蓝变体 */
.feature-card--indigo .feature-card__icon {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}

.feature-card--indigo:hover .feature-card__icon {
    background: #6366f1;
}

.feature-card--indigo:hover {
    border-color: #6366f1;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(99, 102, 241, 0.3);
}

.feature-card--indigo::before {
    background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(99, 102, 241, 0.12),
            transparent 40%);
}

/* 紫色变体 */
.feature-card--purple .feature-card__icon {
    color: var(--color-accent-purple);
    background: rgba(168, 85, 247, 0.1);
}

.feature-card--purple:hover .feature-card__icon {
    background: var(--color-accent-purple);
}

.feature-card--purple:hover {
    border-color: var(--color-accent-purple);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(168, 85, 247, 0.3);
}

.feature-card--purple::before {
    background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(168, 85, 247, 0.12),
            transparent 40%);
}

/* Section 4: 价值承诺 */
.value {
    background: var(--color-bg-secondary);
}

.value__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

.value-card {
    padding: var(--space-10);
    border-radius: var(--radius-2xl);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    text-align: center;
    transition: all var(--transition-base);
}

.value-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-primary);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.value-card__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.value-card__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    background: rgba(72, 88, 255, 0.1);
    border-radius: var(--radius-lg);
}

.value-card__label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
}

.value-card__number {
    font-family: var(--font-display);
    font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
    font-weight: 700;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-2);
}

.value-card__title {
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.value-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.7;
}

/* 导航链接激活状态 */
.navbar__link--active {
    color: var(--color-primary) !important;
}

/* AI页面响应式 */
@media (max-width: 1024px) {
    .features__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .value__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .value-card:last-child {
        grid-column: 1 / -1;
        max-width: 400px;
        margin: 0 auto;
    }

    .workflow__line {
        display: none;
    }

    .workflow__steps {
        flex-direction: column;
        gap: var(--space-4);
    }

    .workflow__step {
        flex-direction: column;
        text-align: center;
        gap: var(--space-4);
        padding: var(--space-6);
    }

    .workflow__step-icon {
        width: 56px;
        height: 56px;
    }

    .workflow__step-content {
        max-width: none;
    }

    /* 移动端箭头向下 */
    .workflow__arrow {
        width: 100%;
        height: 40px;
        transform: rotate(90deg);
    }

    .workflow__arrow::before {
        animation: arrowGlowVertical 2s ease-in-out infinite;
    }

    @keyframes arrowGlowVertical {

        0%,
        100% {
            opacity: 0.6;
            filter: drop-shadow(0 0 4px var(--color-accent-cyan)) drop-shadow(0 0 8px rgba(0, 212, 255, 0.3));
        }

        50% {
            opacity: 1;
            filter: drop-shadow(0 0 8px var(--color-accent-cyan)) drop-shadow(0 0 16px rgba(0, 212, 255, 0.6));
        }
    }
}

/* ==========================================
   数字化基建页面样式
   ========================================== */

/* 时间轴概览 */
.infra-overview {
    background: var(--color-bg-secondary);
}

.timeline {
    position: relative;
    padding: var(--space-16) 0;
}

.timeline__track {
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    transform: translateY(-50%);
}

.timeline__progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 33%;
    background: linear-gradient(90deg, var(--color-accent-cyan), var(--color-primary));
    border-radius: 2px;
    transition: width 0.5s ease;
}

.timeline__stages {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    padding: 0 5%;
}

.timeline__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all var(--transition-base);
}

.timeline__node {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-bg-card);
    border: 3px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    margin-bottom: var(--space-4);
}

.timeline__stage--active .timeline__node,
.timeline__stage:hover .timeline__node {
    border-color: var(--color-primary);
    box-shadow: 0 0 30px var(--color-primary-glow);
    transform: scale(1.1);
}

.timeline__icon {
    color: var(--color-text-muted);
    transition: color var(--transition-base);
}

.timeline__stage--active .timeline__icon,
.timeline__stage:hover .timeline__icon {
    color: var(--color-primary);
}

.timeline__label {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.timeline__subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ==========================================
   基建模块架构图 (Infrastructure Modules)
   ========================================== */

.infra-modules {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: var(--space-4);
    position: relative;
    margin-top: var(--space-12);
}

/* 模块卡片 */
.infra-module {
    position: relative;
    flex: 1;
    max-width: 320px;
    min-height: 320px;
    text-decoration: none;
    display: block;
}

.infra-module__border {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(255, 255, 255, 0.02) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: all var(--transition-base);
}

.infra-module__glow {
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
    z-index: -1;
}

.infra-module--pre .infra-module__glow {
    background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.3), transparent 70%);
}

.infra-module--during .infra-module__glow {
    background: radial-gradient(ellipse at center, rgba(72, 88, 255, 0.3), transparent 70%);
}

.infra-module--post .infra-module__glow {
    background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.3), transparent 70%);
}

.infra-module:hover .infra-module__glow {
    opacity: 1;
}

.infra-module__content {
    position: relative;
    height: 100%;
    padding: var(--space-8);
    border-radius: 16px;
    background: rgba(17, 24, 39, 0.8);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all var(--transition-base);
}

.infra-module:hover .infra-module__content {
    transform: translateY(-4px);
    background: rgba(17, 24, 39, 0.95);
}

.infra-module__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    transition: all var(--transition-base);
}

.infra-module--pre .infra-module__icon {
    background: rgba(0, 212, 255, 0.1);
    color: var(--color-cyan);
}

.infra-module--during .infra-module__icon {
    background: rgba(72, 88, 255, 0.1);
    color: var(--color-primary);
}

.infra-module--post .infra-module__icon {
    background: rgba(168, 85, 247, 0.1);
    color: var(--color-purple);
}

.infra-module:hover .infra-module__icon {
    transform: scale(1.1);
}

.infra-module__tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: var(--space-3);
}

.infra-module--pre .infra-module__tag {
    background: rgba(0, 212, 255, 0.15);
    color: var(--color-cyan);
}

.infra-module--during .infra-module__tag {
    background: rgba(72, 88, 255, 0.15);
    color: var(--color-primary-light);
}

.infra-module--post .infra-module__tag {
    background: rgba(168, 85, 247, 0.15);
    color: var(--color-purple);
}

.infra-module__title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.infra-module__subtitle {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.infra-module__features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: auto;
}

.infra-module__features span {
    font-size: var(--text-xs);
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-muted);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all var(--transition-base);
}

.infra-module:hover .infra-module__features span {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-secondary);
}

/* 连接线 */
.infra-connector {
    width: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.infra-connector svg {
    width: 100%;
    height: 20px;
}

.infra-connector__arrow {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 10;
}

/* 数据流图例 */
.infra-flow-legend {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    margin-top: var(--space-10);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.infra-flow-legend__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.infra-flow-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.infra-flow-legend__dot--cyan {
    background: var(--color-cyan);
    box-shadow: 0 0 8px var(--color-cyan);
}

.infra-flow-legend__dot--blue {
    background: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary);
}

.infra-flow-legend__dot--purple {
    background: var(--color-purple);
    box-shadow: 0 0 8px var(--color-purple);
}

/* 阶段区块 */
.infra-phase {
    position: relative;
    overflow: hidden;
}

.infra-phase__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.infra-phase--pre .infra-phase__bg {
    background: radial-gradient(ellipse 60% 40% at 20% 20%, rgba(0, 212, 255, 0.08), transparent);
}

.infra-phase--during .infra-phase__bg {
    background: radial-gradient(ellipse 60% 40% at 80% 30%, rgba(72, 88, 255, 0.08), transparent);
}

.infra-phase--post .infra-phase__bg {
    background: radial-gradient(ellipse 60% 40% at 50% 80%, rgba(168, 85, 247, 0.08), transparent);
}

/* 基建卡片网格 */
.infra-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    position: relative;
    z-index: 1;
}

.infra-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.infra-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* 基建功能卡片 */
.infra-card {
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
}

.infra-card--compact {
    padding: var(--space-6);
}

.infra-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
}

.infra-card__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-4);
    transition: all var(--transition-base);
}

.infra-card__icon--cyan {
    background: rgba(0, 212, 255, 0.1);
    color: var(--color-accent-cyan);
}

.infra-card__icon--blue {
    background: rgba(72, 88, 255, 0.1);
    color: var(--color-primary);
}

.infra-card__icon--indigo {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.infra-card__icon--purple {
    background: rgba(168, 85, 247, 0.1);
    color: var(--color-accent-purple);
}

.infra-card:hover .infra-card__icon {
    transform: scale(1.1);
}

.infra-card:hover .infra-card__icon--cyan {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
}

.infra-card:hover .infra-card__icon--blue {
    box-shadow: 0 0 20px var(--color-primary-glow);
}

.infra-card:hover .infra-card__icon--indigo {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
}

.infra-card:hover .infra-card__icon--purple {
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
}

.infra-card__title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.infra-card--compact .infra-card__title {
    font-size: var(--text-base);
}

.infra-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* 功能分组 */
.infra-group {
    margin-bottom: var(--space-12);
}

.infra-group:last-child {
    margin-bottom: 0;
}

.infra-group__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: var(--space-6);
    color: var(--color-text-primary);
}

.infra-group__title svg {
    color: var(--color-primary);
}

/* 安全保障区块 */
.infra-security {
    background: var(--color-bg-secondary);
    position: relative;
    overflow: hidden;
}

.infra-security__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 40% 40% at 20% 80%, rgba(72, 88, 255, 0.06), transparent),
        radial-gradient(ellipse 40% 40% at 80% 20%, rgba(0, 212, 255, 0.06), transparent);
}

.security-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    position: relative;
    z-index: 1;
    justify-items: center;
}

/* 5张卡片时，最后2张居中 */
.security-grid .security-card {
    width: 100%;
    max-width: 400px;
}

.security-grid .security-card:nth-child(4),
.security-grid .security-card:nth-child(5) {
    justify-self: center;
}

/* 第4和第5张卡片居中排列的特殊处理 */
@media (min-width: 769px) {
    .security-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .security-grid .security-card:nth-child(1) {
        grid-column: 1 / 3;
    }

    .security-grid .security-card:nth-child(2) {
        grid-column: 3 / 5;
    }

    .security-grid .security-card:nth-child(3) {
        grid-column: 5 / 7;
    }

    .security-grid .security-card:nth-child(4) {
        grid-column: 2 / 4;
    }

    .security-grid .security-card:nth-child(5) {
        grid-column: 4 / 6;
    }
}

.security-card {
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    text-align: center;
    transition: all var(--transition-base);
}

.security-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-primary);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 30px var(--color-primary-glow);
}

.security-card__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(72, 88, 255, 0.1);
    color: var(--color-primary);
    transition: all var(--transition-base);
}

.security-card:hover .security-card__icon {
    background: var(--color-primary);
    color: white;
    transform: scale(1.1);
}

.security-card__title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.security-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* CTA区块 */
.cta-section {
    background: var(--color-bg-primary);
}

.cta-box {
    padding: var(--space-16);
    border-radius: var(--radius-3xl);
    background: linear-gradient(135deg, rgba(72, 88, 255, 0.15), rgba(168, 85, 247, 0.1));
    border: 1px solid rgba(72, 88, 255, 0.3);
    text-align: center;
}

.cta-box__title {
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-bottom: var(--space-4);
}

.cta-box__desc {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
}

.cta-box__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
}

/* 标签颜色变体 */
.section-label--cyan {
    color: var(--color-accent-cyan);
}

.section-label--blue {
    color: var(--color-primary);
}

.section-label--purple {
    color: var(--color-accent-purple);
}

/* 文字颜色 */
.text-cyan {
    color: var(--color-accent-cyan);
}

.text-primary {
    color: var(--color-primary);
}

.text-purple {
    color: var(--color-accent-purple);
}

@media (max-width: 768px) {
    .compare-cards {
        flex-direction: column;
    }

    .compare-card__arrow {
        transform: rotate(90deg);
        animation: pulse-vertical 2s ease-in-out infinite;
    }

    @keyframes pulse-vertical {

        0%,
        100% {
            opacity: 1;
            transform: rotate(90deg) translateX(0);
        }

        50% {
            opacity: 0.5;
            transform: rotate(90deg) translateX(10px);
        }
    }

    .features__grid {
        grid-template-columns: 1fr;
    }

    .value__grid {
        grid-template-columns: 1fr;
    }

    .value-card:last-child {
        max-width: none;
    }

    /* 数字化基建移动端样式 */
    .timeline {
        overflow-x: auto;
        padding-bottom: var(--space-8);
    }

    .timeline__track {
        width: 200%;
        left: 0;
        right: 0;
    }

    .timeline__progress {
        width: 33%;
    }

    .timeline__stages {
        width: 200%;
    }

    .infra-grid,
    .infra-grid--3,
    .infra-grid--4,
    .security-grid {
        grid-template-columns: 1fr;
    }

    .infra-card {
        padding: var(--space-6);
    }

    .security-card__icon {
        width: 64px;
        height: 64px;
        padding: var(--space-3);
    }

    /* 基建模块移动端样式 */
    .infra-modules {
        flex-direction: column;
        gap: var(--space-6);
    }

    .infra-module {
        max-width: none;
        min-height: 280px;
    }

    .infra-module__arrow {
        display: none;
    }

    .infra-connector {
        display: none;
    }

    .infra-flow-legend {
        flex-direction: column;
        align-items: center;
        gap: var(--space-4);
    }

    .cta-box {
        padding: var(--space-8) var(--space-4);
    }

    .cta-box__title {
        font-size: var(--text-2xl);
    }

    .cta-box__actions {
        flex-direction: column;
    }

    /* Footer移动端居中 */
    .footer__bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-6);
    }

    .footer__social {
        justify-content: center;
        width: 100%;
    }

    .footer__legal {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .footer__beian {
        justify-content: center;
    }
}

/* ==========================================
   数据资产页面样式
   ========================================== */

/* 核心理念 - 数据增长图表 */
.data-concept {
    position: relative;
}

.data-growth {
    max-width: 800px;
    margin: var(--space-12) auto 0;
}

.data-growth__chart {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--space-4);
    height: 300px;
    padding: var(--space-8);
    /* background: var(--color-bg-card);
    border-radius: 16px;
    border: 1px solid var(--color-border); */
}

.data-growth__bar {
    flex: 1;
    max-width: 80px;
    height: calc(var(--height) * 1);
    background: linear-gradient(180deg, var(--color-accent-purple), var(--color-primary));
    border-radius: 8px 8px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: var(--space-3);
    position: relative;
    transition: all var(--transition-base);
}

.data-growth__bar:hover {
    transform: scaleY(1.05);
    transform-origin: bottom;
}

.data-growth__bar--active {
    background: linear-gradient(180deg, var(--color-accent-cyan), var(--color-primary));
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
}

.data-growth__label {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    position: absolute;
    bottom: -28px;
    white-space: nowrap;
}

.data-growth__value {
    font-size: var(--text-xs);
    color: var(--color-accent-cyan);
    position: absolute;
    top: -30px;
    white-space: nowrap;
    font-weight: 600;
}

.data-growth__legend {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    margin-top: var(--space-10);
}

.data-growth__legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.data-growth__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.data-growth__dot--purple {
    background: linear-gradient(135deg, var(--color-accent-purple), var(--color-primary));
}

/* 数据中台 */
.data-foundation {
    position: relative;
    overflow: hidden;
}

.data-foundation__bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(0, 212, 255, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.data-foundation__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
    margin-top: var(--space-12);
}

.data-foundation__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.data-foundation__item {
    display: flex;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--color-bg-card);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
}

.data-foundation__item:hover {
    border-color: var(--color-accent-cyan);
    transform: translateX(8px);
}

.data-foundation__icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(0, 212, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-cyan);
    flex-shrink: 0;
}

.data-foundation__info h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.data-foundation__info p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.data-foundation__info strong {
    color: var(--color-accent-cyan);
}

/* 身份融合动画 */
.data-foundation__visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.identity-merge {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-8);
}

.identity-merge__sources {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.identity-merge__source {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-bg-card);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    transition: all var(--transition-base);
}

.identity-merge__source--phone:hover {
    color: var(--color-accent-cyan);
    border-color: var(--color-accent-cyan);
}

.identity-merge__source--email:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.identity-merge__source--wechat:hover {
    color: var(--color-accent-green);
    border-color: var(--color-accent-green);
}

.identity-merge__lines {
    width: 140px;
    height: 100px;
}

.identity-merge__lines svg {
    width: 100%;
    height: 100%;
}

.identity-merge__avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    position: relative;
}

.identity-merge__avatar-ring {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    opacity: 0.3;
    animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.identity-merge__avatar svg {
    width: 64px;
    height: 64px;
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent-purple));
    border-radius: 50%;
    color: white;
}

.identity-merge__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
}

/* 数据资产中心 Dashboard */
.data-dashboard {
    position: relative;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--space-6);
    margin-top: var(--space-12);
}

.dashboard-card {
    background: var(--color-bg-card);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    padding: var(--space-6);
    transition: all var(--transition-base);
}

.dashboard-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
}

.dashboard-card--large {
    grid-row: span 2;
}

.dashboard-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.dashboard-card__badge {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
    background: rgba(72, 88, 255, 0.2);
    color: var(--color-primary-light);
    border-radius: 20px;
}

.dashboard-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.dashboard-card__icon--purple {
    background: rgba(168, 85, 247, 0.1);
    color: var(--color-accent-purple);
}

.dashboard-card__icon--cyan {
    background: rgba(0, 212, 255, 0.1);
    color: var(--color-accent-cyan);
}

.dashboard-card__title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.dashboard-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.dashboard-card__desc strong {
    color: var(--color-primary-light);
}

.dashboard-card__visual {
    margin-top: var(--space-6);
}

.dashboard-card__stats {
    display: flex;
    gap: var(--space-6);
}

.dashboard-card__stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.dashboard-card__stat-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    font-family: var(--font-display);
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dashboard-card__stat-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* AI资源洞察 */
.ai-insights {
    position: relative;
    overflow: hidden;
}

.ai-insights__bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(72, 88, 255, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

/* 放射式布局容器 */
.ai-insights__radial {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-8);
}

/* 中心AI节点 */
.ai-hub {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.ai-hub__core {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-hub__ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid;
    animation: ai-pulse 3s ease-in-out infinite;
}

.ai-hub__ring--1 {
    width: 100%;
    height: 100%;
    border-color: rgba(72, 88, 255, 0.3);
    animation-delay: 0s;
}

.ai-hub__ring--2 {
    width: 140%;
    height: 140%;
    border-color: rgba(0, 212, 255, 0.2);
    animation-delay: 0.5s;
}

.ai-hub__ring--3 {
    width: 180%;
    height: 180%;
    border-color: rgba(168, 85, 247, 0.1);
    animation-delay: 1s;
}

@keyframes ai-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.6;
    }
}

.ai-hub__icon {
    position: relative;
    z-index: 2;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(72, 88, 255, 0.9), rgba(0, 212, 255, 0.9));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 40px rgba(72, 88, 255, 0.5),
        0 0 80px rgba(0, 212, 255, 0.3);
    animation: ai-glow 2s ease-in-out infinite;
}

@keyframes ai-glow {

    0%,
    100% {
        box-shadow:
            0 0 40px rgba(72, 88, 255, 0.5),
            0 0 80px rgba(0, 212, 255, 0.3);
    }

    50% {
        box-shadow:
            0 0 60px rgba(72, 88, 255, 0.7),
            0 0 120px rgba(0, 212, 255, 0.5);
    }
}

.ai-hub__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* SVG连接线 */
.ai-connections {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.ai-connection-line {
    stroke-dasharray: 8 4;
    animation: dash-flow 1.5s linear infinite;
}

@keyframes dash-flow {
    to {
        stroke-dashoffset: -24;
    }
}

.ai-particle {
    filter: blur(1px);
}

/* 卡片样式 - 通用 */
.ai-insights__radial .insight-card {
    position: absolute;
    width: 220px;
    background: var(--color-bg-card);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    padding: var(--space-6);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
}

.ai-insights__radial .insight-card__glow {
    position: absolute;
    inset: -1px;
    border-radius: 17px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.ai-insights__radial .insight-card:hover {
    /* transform: translateY(-4px) scale(1.02); - Removed to prevent overriding specific transforms */
    border-color: transparent;
}

.ai-insights__radial .insight-card:hover .insight-card__glow {
    opacity: 1;
}

.ai-particles-out {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* 卡片位置 */
/* 
 * Elliptical Layout Optimization:
 * We stretch the horizontal axis to form an oval surround.
 * Top/Bottom cards are closer to center (vertical compression).
 * Side cards are pushed out (horizontal expansion).
 */


.insight-card--top {
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
}

.insight-card--top:hover {
    transform: translateX(-50%) translateY(4px) scale(1.02);
}

.insight-card--bottom {
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
}

.insight-card--bottom:hover {
    transform: translateX(-50%) translateY(-4px) scale(1.02);
}

/* 
 * Side cards: 
 * Push outward horizontally (Left 10%, Right 10%)
 * Spread vertically to form ellipse curve (Top 30%, Bottom 70%)
 */
.insight-card--left-top {
    left: 10%;
    top: 30%;
    transform: translateY(-50%);
}

.insight-card--left-top:hover {
    transform: translateY(-50%) translateX(4px) scale(1.02);
}

.insight-card--left-bottom {
    left: 10%;
    top: 70%;
    transform: translateY(-50%);
}

.insight-card--left-bottom:hover {
    transform: translateY(-50%) translateX(4px) scale(1.02);
}

.insight-card--right-top {
    right: 10%;
    top: 30%;
    transform: translateY(-50%);
}

.insight-card--right-top:hover {
    transform: translateY(-50%) translateX(-4px) scale(1.02);
}

.insight-card--right-bottom {
    right: 10%;
    top: 70%;
    transform: translateY(-50%);
}

.insight-card--right-bottom:hover {
    transform: translateY(-50%) translateX(-4px) scale(1.02);
}

/* Legacy Left/Right map to top positions for now or removed */
/* 图标颜色变体 */
.ai-insights__radial .insight-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    transition: all 0.3s ease;
}


.insight-card__icon--blue {
    background: linear-gradient(135deg, rgba(72, 88, 255, 0.2), rgba(72, 88, 255, 0.1));
    color: #4858ff;
}

.insight-card--top:hover .insight-card__icon--blue {
    background: linear-gradient(135deg, rgba(72, 88, 255, 0.4), rgba(72, 88, 255, 0.2));
    box-shadow: 0 0 20px rgba(72, 88, 255, 0.3);
}

.insight-card--top .insight-card__glow {
    background: linear-gradient(135deg, rgba(72, 88, 255, 0.3), transparent);
}

.insight-card__icon--cyan {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 212, 255, 0.1));
    color: #00d4ff;
}

.insight-card--left-top:hover .insight-card__icon--cyan {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.4), rgba(0, 212, 255, 0.2));
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

.insight-card--left-top .insight-card__glow {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), transparent);
}

.insight-card__icon--purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.1));
    color: #a855f7;
}

.insight-card--right-top:hover .insight-card__icon--purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.4), rgba(168, 85, 247, 0.2));
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}

.insight-card--right-top .insight-card__glow {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), transparent);
}

.insight-card__icon--green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
    color: #10b981;
}

.insight-card--bottom:hover .insight-card__icon--green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(16, 185, 129, 0.2));
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.insight-card--bottom .insight-card__glow {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), transparent);
}

/* Orange for Left Bottom */
.insight-card__icon--orange {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.1));
    color: #f59e0b;
}

.insight-card--left-bottom:hover .insight-card__icon--orange {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.4), rgba(245, 158, 11, 0.2));
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}

.insight-card--left-bottom .insight-card__glow {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), transparent);
}

/* Pink for Right Bottom */
.insight-card__icon--pink {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.1));
    color: #ec4899;
}

.insight-card--right-bottom:hover .insight-card__icon--pink {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.4), rgba(236, 72, 153, 0.2));
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.3);
}

.insight-card--right-bottom .insight-card__glow {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.3), transparent);
}

/* 卡片文字 */
.ai-insights__radial .insight-card__title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.ai-insights__radial .insight-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.ai-insights__radial .insight-card__desc strong {
    color: var(--color-primary-light);
}

/* 数据资产页响应式 */
@media (max-width: 768px) {
    .data-growth__chart {
        height: 200px;
        gap: var(--space-2);
        padding: var(--space-4);
    }

    .data-growth__bar {
        max-width: 50px;
    }

    .data-foundation__content {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .identity-merge {
        flex-direction: column;
        padding: var(--space-4);
    }

    .identity-merge__sources {
        flex-direction: row;
    }

    .identity-merge__lines {
        transform: rotate(90deg);
        width: 100px;
        height: 60px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-card--large {
        grid-row: auto;
    }

    /* AI资源洞察响应式 */
    .ai-insights__radial {
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
        padding: var(--space-8) 0;
    }

    .ai-hub {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        order: -1;
        margin-bottom: var(--space-4);
    }

    .ai-hub__core {
        width: 100px;
        height: 100px;
    }

    .ai-hub__icon {
        width: 64px;
        height: 64px;
    }

    .ai-hub__ring--2 {
        width: 130%;
        height: 130%;
    }

    .ai-hub__ring--3 {
        width: 160%;
        height: 160%;
    }

    .ai-connections {
        display: none;
    }

    .ai-insights__radial .insight-card {
        position: relative;
        width: 100%;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
    }

    .insight-card--top,
    .insight-card--bottom,
    .insight-card--left,
    .insight-card--right {
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
    }

    .insight-card--top:hover,
    .insight-card--bottom:hover,
    .insight-card--left:hover,
    .insight-card--right:hover {
        transform: translateY(-4px);
    }
}

/* ==========================================
   驾驶舱可视化样式
   ========================================== */

.cockpit-visual {
    margin-top: var(--space-12);
}

.cockpit-visual__container {
    background: linear-gradient(180deg, rgba(20, 20, 35, 0.6) 0%, rgba(72, 88, 255, 0.05) 100%);
    border-radius: 20px;
    border: 1px solid rgba(72, 88, 255, 0.2);
    padding: var(--space-6);
    overflow: hidden;
    position: relative;
}

.cockpit-visual__container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}

.cockpit-visual__svg {
    width: 100%;
    height: auto;
    display: block;
}

/* 功能卡片网格 */
.dashboard-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-10);
}

.dashboard-feature {
    background: var(--color-bg-card);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    padding: var(--space-6);
    text-align: center;
    transition: all var(--transition-base);
}

.dashboard-feature:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
}

.dashboard-feature__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(72, 88, 255, 0.15), rgba(0, 212, 255, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-light);
    margin: 0 auto var(--space-4);
}

.dashboard-feature__title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.dashboard-feature__desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.dashboard-feature__desc strong {
    color: var(--color-primary-light);
}

/* 响应式 */
@media (max-width: 768px) {
    .cockpit-visual__container {
        padding: var(--space-3);
    }

    .dashboard-features {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

/* ==========================================
   场景解决方案页面样式
   ========================================== */

.solutions-section {
    position: relative;
}

/* 选项卡导航 */
.solutions-tabs {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-10);
}

.solutions-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    overflow: visible;
    z-index: 1;
}

.solutions-tab:hover {
    border-color: var(--color-primary);
    color: var(--color-text-primary);
}

/* 进度条 SVG 容器 */
.solutions-tab__border-svg {
    position: absolute;
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    pointer-events: none;
    z-index: 10;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.solutions-tab--active .solutions-tab__border-svg {
    opacity: 1;
}

.solutions-tab__border-svg rect {
    fill: none;
    stroke: url(#tabProgressGradient);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transform-origin: center;
    transition: none;
    /* JS Animation */
}

/* 隐藏默认边框，使用SVG边框代替激活状态 */
.solutions-tab--active {
    background: linear-gradient(135deg, rgba(72, 88, 255, 0.2), rgba(0, 212, 255, 0.1));
    border-color: transparent;
    /* Hide default border when active */
    color: var(--color-text-primary);
}

.solutions-tab svg {
    opacity: 0.6;
    transition: opacity var(--transition-base);
}

.solutions-tab--active svg,
.solutions-tab:hover svg {
    opacity: 1;
}

/* 选项卡内容 */
.solutions-content {
    position: relative;
    min-height: 500px;
}

.solution-panel {
    display: none;
    opacity: 0;
    animation: fadeIn 0.4s ease forwards;
}

.solution-panel--active {
    display: block;
    opacity: 1;
}

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

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

.solution-panel__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

.solution-panel__tag {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: rgba(72, 88, 255, 0.15);
    color: var(--color-primary-light);
    font-size: var(--text-sm);
    font-weight: 500;
    border-radius: 20px;
    margin-bottom: var(--space-4);
}

.solution-panel__title {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.3;
    margin-bottom: var(--space-4);
}

.solution-panel__pain {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    color: #ef4444;
    font-size: var(--text-sm);
    margin-bottom: var(--space-6);
}

.solution-panel__pain svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* 解决方案功能列表 */
.solution-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.solution-features--compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.solution-feature {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-card);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
}

.solution-feature:hover {
    border-color: var(--color-primary);
}

.solution-feature--small {
    padding: var(--space-3);
}

.solution-feature__icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(72, 88, 255, 0.15), rgba(0, 212, 255, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-light);
    flex-shrink: 0;
}

.solution-feature--small .solution-feature__icon {
    width: 40px;
    height: 40px;
}

.solution-feature__content h4 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.solution-feature--small .solution-feature__content h4 {
    font-size: var(--text-sm);
}

.solution-feature__content p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.solution-feature--small .solution-feature__content p {
    font-size: var(--text-xs);
}

.solution-feature__content strong {
    color: var(--color-primary-light);
}

/* 可视化区域 */
.solution-panel__visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.solution-visual {
    position: relative;
    width: 100%;
    padding: var(--space-8);
}

/* 综合性展会可视化 */
.solution-visual--trade {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.trade-scene-svg {
    width: 100%;
    max-width: 400px;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(72, 88, 255, 0.2));
}

.trade-scene-svg:hover .badge {
    animation: badge-float 2s ease-in-out infinite;
}

@keyframes badge-float {

    0%,
    100% {
        transform: translate(170px, 160px);
    }

    50% {
        transform: translate(170px, 155px);
    }
}

.visual-card {
    background: var(--color-bg-card);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    max-width: 280px;
}

.visual-card--gate {
    margin-left: auto;
}

.visual-card--notification {
    margin-right: auto;
}

.visual-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.visual-card__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.visual-card__dot--green {
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    animation: pulse-dot 2s ease-in-out infinite;
}

.visual-card__dot--dim {
    background: rgba(255, 255, 255, 0.2);
}

/* Scan Line Animation for Gate Card */
.visual-card--gate {
    position: relative;
    overflow: hidden;
}

.visual-card--gate::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(16, 185, 129, 0.1),
            rgba(16, 185, 129, 0.3),
            rgba(16, 185, 129, 0.1),
            transparent);
    animation: scan-line 3s ease-in-out infinite;
}

@keyframes scan-line {
    0% {
        left: -100%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 8px #10b981;
    }

    50% {
        opacity: 0.6;
        box-shadow: 0 0 16px #10b981;
    }
}

/* AI Notification Card Pulse */
.visual-card--notification {
    position: relative;
    animation: card-glow 3s ease-in-out infinite;
}

@keyframes card-glow {

    0%,
    100% {
        box-shadow: 0 0 0 rgba(72, 88, 255, 0);
    }

    50% {
        box-shadow: 0 0 20px rgba(72, 88, 255, 0.3);
    }
}

/* Visual Connector Animation */
.visual-connector {
    display: flex;
    justify-content: center;
    position: relative;
}

.visual-connector svg path {
    animation: dash-flow 1.5s linear infinite;
}

@keyframes dash-flow {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -16;
    }
}

.visual-card__body {
    padding: var(--space-4);
    text-align: center;
}

.visual-card__status {
    display: block;
    color: #10b981;
    font-weight: 600;
    margin-top: var(--space-2);
}

.visual-card__time {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.visual-card__message {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.visual-card__matches {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
}

.visual-card__match {
    padding: var(--space-1) var(--space-3);
    background: rgba(72, 88, 255, 0.2);
    color: var(--color-primary-light);
    font-size: var(--text-xs);
    border-radius: 12px;
}

/* 采购对接会可视化 - 匹配报告 */
.match-report {
    background: var(--color-bg-card);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    max-width: 360px;
    margin: 0 auto;
}

.match-report__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    background: rgba(72, 88, 255, 0.1);
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    color: var(--color-text-primary);
}

.match-report__badge {
    padding: var(--space-1) var(--space-2);
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent-purple));
    color: white;
    font-size: var(--text-xs);
    font-weight: 500;
    border-radius: 6px;
}

.match-report__body {
    padding: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.match-report__party {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
}

.match-report__avatar {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.match-report__party--buyer .match-report__avatar {
    background: rgba(0, 212, 255, 0.15);
    color: var(--color-accent-cyan);
}

.match-report__party--supplier .match-report__avatar {
    background: rgba(168, 85, 247, 0.15);
    color: var(--color-accent-purple);
}

.match-report__party span {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    font-weight: 500;
}

.match-report__label {
    font-size: var(--text-xs) !important;
    color: var(--color-text-muted) !important;
    font-weight: 400 !important;
}

.match-report__connection {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.match-report__line {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent-cyan), var(--color-accent-purple));
    position: relative;
    overflow: hidden;
}

.match-report__line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: line-shimmer 2s ease-in-out infinite;
}

@keyframes line-shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Matchmaking Score Pulse */
.match-report__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: rgba(16, 185, 129, 0.15);
    border-radius: 8px;
    animation: score-pulse 2s ease-in-out infinite;
}

@keyframes score-pulse {

    0%,
    100% {
        transform: scale(1);
        background: rgba(16, 185, 129, 0.15);
    }

    50% {
        transform: scale(1.05);
        background: rgba(16, 185, 129, 0.25);
    }
}

/* Duplicate removed - see line 4877 */

.match-report__score span {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.match-report__score strong {
    font-size: var(--text-lg);
    color: #10b981;
    font-weight: 700;
}

.match-report__footer {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-4);
    border-top: 1px solid var(--color-border);
    justify-content: center;
}

.match-report__tag {
    padding: var(--space-1) var(--space-3);
    background: rgba(72, 88, 255, 0.1);
    color: var(--color-primary-light);
    font-size: var(--text-xs);
    border-radius: 12px;
}

/* 采购对接会 SVG 插画样式 */
.solution-visual--match {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.match-scene-svg {
    width: 100%;
    max-width: 400px;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.15));
    pointer-events: none;
}

/* 行业峰会可视化 */
.solution-visual--conference {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.conference-scene-svg {
    width: 100%;
    max-width: 400px;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.15));
}

.conference-scene-svg:hover .vip-card {
    animation: vip-glow 1s ease-in-out infinite;
}

@keyframes vip-glow {

    0%,
    100% {
        filter: url(#stageGlow);
    }

    50% {
        filter: url(#stageGlow) brightness(1.2);
    }
}

.phone-mockup {
    background: var(--color-bg-card);
    border-radius: 20px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    width: 160px;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    transform-style: preserve-3d;
}

.phone-mockup:hover {
    transform: perspective(600px) rotateY(-5deg) rotateX(3deg) translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.admin-view {
    background: var(--color-bg-card);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    flex: 1;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.admin-view:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
}

/* Seat Hover Effects */
.banquet-table__seat {
    transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.banquet-table__seat:hover {
    transform: scale(1.2);
    background: var(--color-primary);
    box-shadow: 0 0 12px var(--color-primary-glow);
}

/* Seat Result Map Animation */
.seat-result__map svg circle {
    transition: all var(--transition-fast);
}

.seat-result__map:hover svg circle[fill="#4858ff"] {
    r: 6;
    filter: drop-shadow(0 0 8px var(--color-primary));
}

.phone-mockup__header {
    padding: var(--space-3);
    background: rgba(72, 88, 255, 0.1);
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.phone-mockup__body {
    padding: var(--space-4);
}

.seat-result {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.seat-result__icon {
    color: var(--color-primary-light);
}

.seat-result__info {
    display: flex;
    flex-direction: column;
}

.seat-result__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.seat-result__value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.seat-result__map {
    background: rgba(72, 88, 255, 0.05);
    border-radius: 8px;
    padding: var(--space-2);
}

.seat-result__map svg {
    width: 100%;
    height: auto;
}

.admin-view {
    background: var(--color-bg-card);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    flex: 1;
    max-width: 280px;
}

.admin-view__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: rgba(168, 85, 247, 0.1);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.admin-view__badge {
    padding: var(--space-1) var(--space-2);
    background: rgba(168, 85, 247, 0.3);
    color: var(--color-accent-purple);
    font-size: var(--text-xs);
    border-radius: 4px;
}

.admin-view__body {
    padding: var(--space-4);
}

.banquet-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
}

.banquet-table {
    display: flex;
    gap: var(--space-2);
}

.banquet-table--offset {
    margin-left: var(--space-4);
}

.banquet-table__seat {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(72, 88, 255, 0.2);
    border: 2px solid var(--color-primary);
    position: relative;
}

.banquet-table__seat::after {
    content: attr(data-name);
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* 响应式 */
@media (max-width: 768px) {
    .solutions-tabs {
        flex-direction: column;
        gap: var(--space-2);
    }

    .solutions-tab {
        justify-content: center;
    }

    .solution-panel__inner {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .solution-panel__title {
        font-size: var(--text-2xl);
    }

    .solution-features--compact {
        grid-template-columns: 1fr;
    }

    .solution-visual--conference {
        flex-direction: column;
        align-items: center;
    }

    .admin-view {
        max-width: 100%;
    }
}

/* ==========================================
   综合性展会可视化场景优化
   ========================================== */

.trade-visual-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}

.visual-card--wide {
    width: 100%;
    max-width: none;
}

.visual-card__status-group {
    display: flex;
    gap: 4px;
}

.visual-card__dot--dim {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.visual-card__body--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    text-align: left;
}

.gate-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.gate-info__text {
    display: flex;
    flex-direction: column;
}

.gate-info__status {
    color: #10b981;
    font-weight: 600;
    font-size: var(--text-sm);
}

.gate-info__time {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.gate-stats {
    display: flex;
    gap: var(--space-4);
}

.gate-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.gate-stat__value {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    font-family: var(--font-display);
}

.gate-stat__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.visual-connector {
    display: flex;
    justify-content: center;
    padding: var(--space-2) 0;
}

.visual-card__badge {
    padding: 2px 8px;
    background: rgba(72, 88, 255, 0.2);
    color: var(--color-primary-light);
    font-size: var(--text-xs);
    border-radius: 10px;
    margin-left: auto;
}

.visual-card__message strong {
    color: var(--color-primary-light);
}

.visual-card__match--primary {
    background: rgba(72, 88, 255, 0.25);
    color: var(--color-primary-light);
}

.visual-card__match--success {
    background: rgba(16, 185, 129, 0.25);
    color: #10b981;
}

.visual-card__action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: linear-gradient(135deg, rgba(72, 88, 255, 0.2), rgba(0, 212, 255, 0.1));
    border-radius: 8px;
    color: var(--color-primary-light);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.visual-card__action:hover {
    background: linear-gradient(135deg, rgba(72, 88, 255, 0.3), rgba(0, 212, 255, 0.2));
}

@media (max-width: 768px) {
    .trade-visual-scene {
        max-width: 100%;
    }

    .visual-card__body--row {
        flex-direction: column;
        align-items: flex-start;
    }

    .gate-stats {
        width: 100%;
        justify-content: space-around;
    }
}

/* ==========================================
   关于我们页面样式
   ========================================== */

/* Section 1: 公司愿景 */
.about-vision {
    padding: var(--space-20) 0;
}

.vision-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.vision-badge {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(72, 88, 255, 0.2), rgba(0, 212, 255, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-8);
    color: var(--color-primary-light);
}

.vision-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.4;
    margin-bottom: var(--space-6);
}

.vision-desc {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: 1.8;
}

/* Section 2: 团队基因 */
.about-team {
    background: linear-gradient(180deg, var(--color-bg-tertiary), var(--color-bg-primary));
}

.team-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}

.team-card {
    flex: 1;
    max-width: 320px;
    background: var(--color-bg-card);
    border-radius: 20px;
    border: 1px solid var(--color-border);
    padding: var(--space-8);
    text-align: center;
    position: relative;
    transition: all var(--transition-base);
}

.team-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
}

.team-card--industry {
    border-top: 3px solid var(--color-accent-purple);
}

.team-card--tech {
    border-top: 3px solid var(--color-accent-cyan);
}

.team-card__icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(72, 88, 255, 0.15), rgba(0, 212, 255, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    color: var(--color-primary-light);
}

.team-card__tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: rgba(72, 88, 255, 0.2);
    color: var(--color-primary-light);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: 20px;
    margin-bottom: var(--space-3);
}

.team-card__title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.team-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.team-card__plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-bg-card);
    border: 2px solid var(--color-border);
    color: var(--color-primary);
    flex-shrink: 0;
}

.team-quote {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.team-quote blockquote {
    position: relative;
    padding: var(--space-6);
}

.team-quote blockquote svg {
    position: absolute;
    top: 0;
    left: 0;
}

.team-quote blockquote p {
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-text-primary);
    font-style: italic;
    line-height: 1.5;
}

/* Section 3: 资质荣誉 */
.about-qualifications {
    padding: var(--space-20) 0;
}

.qualifications-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

.qualification-category {
    background: var(--color-bg-card);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    padding: var(--space-6);
    transition: all var(--transition-base);
}

.qualification-category:hover {
    border-color: var(--color-primary);
}

.qualification-category__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-primary-light);
}

.qualification-category__header h3 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
}

.qualification-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.qualification-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.qualification-item__icon {
    font-size: var(--text-base);
    flex-shrink: 0;
}

/* Section 4: 联系我们 */
.about-contact {
    background: linear-gradient(180deg, var(--color-bg-tertiary), var(--color-bg-primary));
    padding: var(--space-20) 0;
}

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

.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.contact-info__item {
    display: flex;
    gap: var(--space-4);
}

.contact-info__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(72, 88, 255, 0.15), rgba(0, 212, 255, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-light);
    flex-shrink: 0;
}

.contact-info__content h4 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.contact-info__content p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.contact-cta {
    background: var(--color-bg-card);
    border-radius: 24px;
    border: 1px solid var(--color-border);
    padding: var(--space-10);
    text-align: center;
}

.contact-cta__title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.contact-cta__desc {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.contact-cta .btn {
    margin-bottom: var(--space-6);
}

.contact-cta__features {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.contact-cta__features span {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.contact-cta__features svg {
    color: #10b981;
}

/* 响应式 */
@media (max-width: 1024px) {
    .qualifications-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .vision-title {
        font-size: var(--text-2xl);
    }

    .team-grid {
        flex-direction: column;
    }

    .team-card {
        max-width: 100%;
    }

    .team-card__plus {
        transform: rotate(90deg);
    }

    .team-quote blockquote p {
        font-size: var(--text-xl);
    }

    .qualifications-grid {
        grid-template-columns: 1fr;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .contact-cta {
        padding: var(--space-6);
    }
}

/* ==========================================
   公司愿景背景装饰
   ========================================== */

.about-vision {
    position: relative;
    overflow: hidden;
}

.vision-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* 光晕效果 */
.vision-bg__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.3;
}

.vision-bg__glow--1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
    top: -150px;
    left: 10%;
    animation: vision-glow-float 15s ease-in-out infinite;
}

.vision-bg__glow--2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--color-accent-cyan) 0%, transparent 70%);
    bottom: -100px;
    right: 15%;
    animation: vision-glow-float 12s ease-in-out infinite reverse;
}

@keyframes vision-glow-float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.25;
    }

    50% {
        transform: translate(30px, -20px) scale(1.1);
        opacity: 0.4;
    }
}

/* 网格背景 */
.vision-bg__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(72, 88, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(72, 88, 255, 0.04) 1px, transparent 1px);
    background-size: 80px 80px;
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 70%);
    mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 70%);
}

/* 轨道装饰 */
.vision-bg__orbit {
    position: absolute;
    border: 1px dashed rgba(72, 88, 255, 0.15);
    border-radius: 50%;
}

.vision-bg__orbit--1 {
    width: 600px;
    height: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: orbit-rotate 40s linear infinite;
}

.vision-bg__orbit--2 {
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: orbit-rotate 25s linear infinite reverse;
}

.vision-bg__dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 12px var(--color-primary);
}

@keyframes orbit-rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* 浮动粒子 */
.vision-bg__particles {
    position: absolute;
    inset: 0;
}

.vision-bg__particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--color-primary);
    border-radius: 50%;
    opacity: 0;
    animation: vision-particle-float 10s ease-in-out infinite;
}

.vision-bg__particles span:nth-child(1) {
    left: 15%;
    top: 30%;
    animation-delay: 0s;
}

.vision-bg__particles span:nth-child(2) {
    left: 80%;
    top: 25%;
    animation-delay: 2s;
}

.vision-bg__particles span:nth-child(3) {
    left: 25%;
    top: 70%;
    animation-delay: 4s;
}

.vision-bg__particles span:nth-child(4) {
    left: 70%;
    top: 65%;
    animation-delay: 6s;
}

.vision-bg__particles span:nth-child(5) {
    left: 50%;
    top: 20%;
    animation-delay: 8s;
}

@keyframes vision-particle-float {

    0%,
    100% {
        opacity: 0;
        transform: translateY(0) scale(0);
    }

    20% {
        opacity: 0.6;
        transform: translateY(-20px) scale(1);
    }

    80% {
        opacity: 0.6;
        transform: translateY(-60px) scale(1);
    }
}

/* 确保内容在装饰层之上 */
.vision-content {
    position: relative;
    z-index: 1;
}

/* ==========================================
   定价页面样式
   ========================================== */

.pricing-section {
    padding: var(--space-12) 0 var(--space-20);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    align-items: stretch;
}

.pricing-card {
    background: var(--color-bg-card);
    border-radius: 20px;
    border: 1px solid var(--color-border);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all var(--transition-base);
}

.pricing-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
}

.pricing-card__header {
    margin-bottom: var(--space-6);
}

.pricing-card__badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: 20px;
    margin-bottom: var(--space-3);
}

.pricing-card__name {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.pricing-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.pricing-card__price {
    display: flex;
    align-items: baseline;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.pricing-card__currency {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-right: 2px;
}

.pricing-card__amount {
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--color-text-primary);
    font-family: var(--font-display);
    line-height: 1;
}

.pricing-card__amount--custom {
    font-size: var(--text-3xl);
}

.pricing-card__period {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin-left: var(--space-1);
}

.pricing-card__features {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    list-style: none;
}

.pricing-card__feature {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.pricing-card__feature svg {
    flex-shrink: 0;
    color: #10b981;
}

.pricing-card__feature--disabled {
    opacity: 0.5;
}

.pricing-card__feature--disabled svg {
    color: var(--color-text-muted);
}

/* 专业版高亮 */
.pricing-card--featured {
    border-color: var(--color-primary);
    background: linear-gradient(180deg, rgba(72, 88, 255, 0.08) 0%, var(--color-bg-card) 100%);
    transform: scale(1.02);
}

.pricing-card--featured:hover {
    transform: scale(1.02) translateY(-4px);
}

.pricing-card__popular {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-1) var(--space-4);
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent-cyan));
    color: white;
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: 20px;
    white-space: nowrap;
}

/* 商业版样式 */
.pricing-card--enterprise {
    border-style: dashed;
}

/* 按钮占满宽度 */
.btn--block {
    width: 100%;
    justify-content: center;
}

/* FAQ Section */
.pricing-faq {
    background: var(--color-bg-tertiary);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.faq-item {
    background: var(--color-bg-card);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    padding: var(--space-6);
    transition: all var(--transition-base);
}

.faq-item:hover {
    border-color: var(--color-primary);
}

.faq-item__question {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.faq-item__answer {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* 响应式 */
@media (max-width: 1200px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-card--featured {
        transform: none;
    }

    .pricing-card--featured:hover {
        transform: translateY(-4px);
    }
}

@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }

    .pricing-card__amount {
        font-size: var(--text-3xl);
    }
}

/* ==========================================
   Scroll Indicator
   ========================================== */

.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-10);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all var(--transition-base);
    cursor: pointer;
}

.scroll-indicator:hover {
    color: var(--color-primary);
}

.scroll-indicator__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    animation: scroll-bounce 2s ease-in-out infinite;
    transition: all var(--transition-base);
}

.scroll-indicator:hover .scroll-indicator__arrow {
    border-color: var(--color-primary);
    background: rgba(72, 88, 255, 0.1);
    animation-play-state: paused;
    transform: scale(1.1);
}

.scroll-indicator__arrow svg {
    stroke: currentColor;
}

@keyframes scroll-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

/* ==========================================
   Footer Link QR Code Hover
   ========================================== */

.footer__link-item {
    position: relative;
    display: inline-block;
    width: fit-content;
}

.footer__link-item .footer__qrcode-popup {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 100;
    pointer-events: none;
    padding-bottom: 15px;
    /* Increase hover area to prevent flickering */
}

.footer__link-item .footer__qrcode-popup::after {
    content: '';
    position: absolute;
    bottom: 9px;
    /* Adjust based on padding-bottom */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: var(--color-bg-card) transparent transparent transparent;
    z-index: 101;
}

.footer__link-item:hover .footer__qrcode-popup {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* ==========================================
   隐私政策弹窗
   ========================================== */

.privacy-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.privacy-modal--active {
    opacity: 1;
    visibility: visible;
}

.privacy-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.privacy-modal__container {
    position: relative;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    background: var(--color-bg-card);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
}

.privacy-modal--active .privacy-modal__container {
    transform: scale(1) translateY(0);
}

.privacy-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.privacy-modal__title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
}

.privacy-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition-base);
}

.privacy-modal__close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
}

.privacy-modal__body {
    flex: 1;
    overflow: hidden;
}

.privacy-modal__iframe {
    width: 100%;
    height: 70vh;
    border: none;
    background: #fff;
    border-radius: 0 0 16px 16px;
}

@media (max-width: 768px) {
    .privacy-modal__container {
        width: 95%;
        max-height: 90vh;
    }

    .privacy-modal__iframe {
        height: 75vh;
    }
}

/* ==========================================
   Utility Classes
   ========================================== */

.u-hidden {
    display: none;
}

.u-relative-z1 {
    position: relative;
    z-index: 1;
}

.u-overflow-hidden {
    overflow: hidden;
}

/* Animation Utilities */
.u-delay-100 {
    animation-delay: 0.1s;
}

.hero__content--animate-init {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease 0.3s;
}

/* Data Growth Bar Modifiers */
.data-growth__bar--30 {
    --height: 30%;
}

.data-growth__bar--50 {
    --height: 50%;
}

.data-growth__bar--70 {
    --height: 70%;
}

.data-growth__bar--90 {
    --height: 90%;
}

.data-growth__bar--100 {
    --height: 100%;
}

/* Form Utilities */
.demo-form__submit-loading,
.demo-form__message {
    display: none;
}


/* ==========================================
   Demo Booking Modal
   ========================================== */

.demo-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: var(--space-4);
}

.demo-modal--active {
    opacity: 1;
    visibility: visible;
}

.demo-modal__content {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
}

.demo-modal--active .demo-modal__content {
    transform: scale(1) translateY(0);
}

.demo-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
}

.demo-modal__title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.demo-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition-base);
}

.demo-modal__close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
}

.demo-modal__body {
    display: grid;
    grid-template-columns: 1fr 320px;
    max-height: calc(90vh - 80px);
    overflow-y: auto;
}

.demo-modal__form-section {
    padding: var(--space-6);
    border-right: 1px solid var(--color-border);
}

.demo-modal__contact-section {
    padding: var(--space-6);
    background: var(--color-bg-secondary);
}

.demo-modal__section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-5);
}

.demo-modal__section-title svg {
    color: var(--color-primary);
}

/* Form Styles */
.demo-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.demo-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.demo-form__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.demo-form__label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.demo-form__required {
    color: var(--color-error);
}

.demo-form__input,
.demo-form__textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font-size: var(--text-base);
    color: var(--color-text-primary);
    transition: all var(--transition-base);
}

.demo-form__input::placeholder,
.demo-form__textarea::placeholder {
    color: var(--color-text-muted);
}

.demo-form__input:focus,
.demo-form__textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(72, 88, 255, 0.15);
}

.demo-form__textarea {
    resize: vertical;
    min-height: 100px;
}

.demo-form__submit {
    margin-top: var(--space-2);
}

.demo-form__submit-loading {
    display: none;
    align-items: center;
    gap: var(--space-2);
}

.demo-form__spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.demo-form__message {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: 10px;
    font-size: var(--text-sm);
    margin-top: var(--space-4);
}

.demo-form__message--success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--color-success);
}

.demo-form__message--error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--color-error);
}

/* Contact Section */
.demo-contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.demo-contact__item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.demo-contact__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(72, 88, 255, 0.1);
    border-radius: 12px;
    color: var(--color-primary);
}

.demo-contact__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.demo-contact__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.demo-contact__value {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

.demo-contact__value:hover {
    color: var(--color-primary);
}

.demo-contact__qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.demo-contact__qr-label {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.demo-contact__qr-img {
    width: 150px;
    height: 150px;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .demo-modal__body {
        grid-template-columns: 1fr;
    }

    .demo-modal__form-section {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .demo-form__row {
        grid-template-columns: 1fr;
    }

    .demo-contact__qr-img {
        width: 120px;
        height: 120px;
    }
}

/* Solution Visual Image Support */
.solution-visual__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--color-border-highlight);
}

.solution-visual {
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: none;
}