/* ===================================
   星图AI产品官网 - 核心样式
   版本：v2.0
   职责：CSS变量、样式重置、排版规范、通用工具类
   =================================== */

/* ===================================
   1. CSS变量（严格遵循配色清单）
   =================================== */
:root {
    /* 主色调 */
    --color-primary: #1a42cf;           /* 高饱和科技蓝 */
    --color-secondary: #1890FF;         /* 清爽科技亮蓝 */
    --color-tertiary: #40A9FF;          /* 科技浅亮蓝 */

    /* 辅助色 */
    --color-success: #52C41A;           /* 科技感增长绿 */
    --color-neutral: #6B7280;           /* 科技中性冷灰 */
    --color-warning: #FAAD14;           /* 暖橙警示色 */
    --color-danger: #F5222D;            /* 警示正红色 */

    /* 文字色 */
    --color-text-primary: #262626;      /* 极致深灰 */
    --color-text-secondary: #6B7280;    /* 次要文字 */

    /* 背景色 */
    --color-bg-card: #FAFAFA;           /* 柔和浅灰白 */
    --color-bg-page: #F5F5F5;           /* 清爽护眼浅灰白 */
    --color-bg-white: #FFFFFF;          /* 纯净极致白 */
    --color-bg-warning-light: #FFF7E6;  /* 浅橙背景 */
    --color-bg-danger-light: #FFF1F0;   /* 浅红背景 */
    --color-bg-success-light: #F6FFED;  /* 浅绿背景 */

    /* 间距系统 */
    --spacing-container: 40px;          /* 页面左右内边距 */
    --spacing-section-desktop: 100px;   /* 区块间距（桌面端） */
    --spacing-section-mobile: 40px;     /* 区块间距（移动端） */
    --spacing-card: 32px;               /* 卡片间距 */
    --spacing-card-inner: 40px;         /* 卡片内边距 */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;

    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* 阴影 */
    --shadow-card: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.15);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);

    /* 过渡 */
    --transition-fast: 0.3s ease-in-out;
    --transition-scroll: 0.6s ease-out;
}

/* ===================================
   2. 样式重置与基础设置
   =================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
    line-height: 1.6;
    overflow-x: hidden;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

ul {
    list-style: none;
}

strong {
    font-weight: 600;
}

/* ===================================
   3. 排版规范（严格遵循v2.0）
   =================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.2;
    font-weight: 700;
}

h1 {
    font-size: 48px;
    font-weight: 800;
}

h2 {
    font-size: 36px;
    font-weight: 700;
}

h3 {
    font-size: 24px;
    font-weight: 600;
}

h4 {
    font-size: 18px;
    font-weight: 500;
}

p {
    font-size: 16px;
    line-height: 1.6;
}

.text-small {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* ===================================
   4. 数据新闻风格装饰纹理
   =================================== */

/* 点阵背景图案 - 暗示数据颗粒度 */
.dot-pattern {
    background-image: radial-gradient(circle, var(--color-neutral) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0;
}

.dot-pattern--subtle {
    background-image: radial-gradient(circle, rgba(107, 114, 128, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* 渐变边框 - 引导视觉流动 */
.gradient-border {
    position: relative;
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    background: linear-gradient(135deg, var(--color-tertiary), var(--color-primary));
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: var(--transition-fast);
}

.gradient-border:hover::before {
    opacity: 1;
}

/* 微妙光晕效果 - 增加层次感 */
.glow-effect {
    box-shadow: 0 0 40px rgba(24, 144, 255, 0.08);
}

.glow-effect--strong {
    box-shadow: 0 0 60px rgba(24, 144, 255, 0.12);
}

/* 数据卡片样式 - 强调数据可视化 */
.data-highlight {
    font-family: 'Space Grotesk', monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* ===================================
   5. 数据新闻风格动画
   =================================== */

/* Stagger淡入上移动画 */
@keyframes fadeInUpStagger {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 数字滚动动画 */
@keyframes countUp {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 进度条填充动画 */
@keyframes progressFill {
    from {
        width: 0%;
    }
}

/* Hero标题stagger动画类 */
.hero-animate {
    opacity: 0;
    animation: fadeInUpStagger 0.8s ease-out forwards;
}

.hero-animate--delay-1 { animation-delay: 0.1s; }
.hero-animate--delay-2 { animation-delay: 0.2s; }
.hero-animate--delay-3 { animation-delay: 0.3s; }
.hero-animate--delay-4 { animation-delay: 0.4s; }

/* 数据数字动画 */
.data-number {
    display: inline-block;
    animation: countUp 0.6s ease-out forwards;
}

/* SVG装饰元素容器 */
.svg-decoration {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

/* 波形线装饰 - 暗示数据趋势 */
.wave-decoration {
    width: 100%;
    height: auto;
    opacity: 0.6;
}

/* 圆点图案装饰 - 暗示数据点 */
.dots-decoration {
    width: 120px;
    height: auto;
    opacity: 0.4;
}