/* ============================================================
 * 九州微电 · 企业站公共基础样式
 * 设计风格：高端、清爽、科技感 / 主色：红 灰 黑
 * 作用域：设计令牌(CSS Variables) + Reset + 字体 + 工具类
 * ============================================================ */

/* -----------------------------
 * 1. 设计令牌（Design Tokens）
 * ----------------------------- */
:root {
    /* === 品牌色 === */
    --jz-red:            #D80027;
    --jz-red-hover:      #B8001F;
    --jz-red-light:      #FFE8EC;
    --jz-red-soft:       rgba(216, 0, 39, .08);

    /* === 中性色 === */
    --jz-black:          #0E1116;
    --jz-ink:            #1A1D24;
    --jz-ink-2:          #2C3038;
    --jz-gray-900:       #3B4049;
    --jz-gray-700:       #5F6368;
    --jz-gray-500:       #9AA0A6;
    --jz-gray-300:       #D4D7DC;
    --jz-gray-200:       #E6E8EC;
    --jz-gray-100:       #F1F3F5;
    --jz-gray-50:        #F7F8FA;
    --jz-white:          #FFFFFF;

    /* === 状态色 === */
    --jz-success:        #16A34A;
    --jz-warning:        #F59E0B;
    --jz-danger:         #DC2626;
    --jz-info:           #2563EB;

    /* === 文本色 === */
    --text-primary:      var(--jz-ink);
    --text-secondary:    var(--jz-gray-700);
    --text-muted:        var(--jz-gray-500);
    --text-inverse:      var(--jz-white);

    /* === 边框 === */
    --border-color:      var(--jz-gray-200);
    --border-color-dark: var(--jz-gray-300);

    /* === 背景 === */
    --bg-page:           var(--jz-white);
    --bg-soft:           var(--jz-gray-50);
    --bg-dark:           var(--jz-black);

    /* === 字体 === */
    --font-sans: "Inter", "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue",
                 Helvetica, Arial, sans-serif;
    --font-display: "Barlow", "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    /* === 字号（模块化 1.125 / Major Second） === */
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-24: 24px;
    --fs-28: 28px;
    --fs-32: 32px;
    --fs-40: 40px;
    --fs-48: 48px;
    --fs-56: 56px;
    --fs-64: 64px;

    /* === 行高 === */
    --lh-tight:  1.25;
    --lh-snug:   1.45;
    --lh-normal: 1.65;
    --lh-loose:  1.85;

    /* === 间距（8pt 基准） === */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-7:  32px;
    --sp-8:  40px;
    --sp-9:  48px;
    --sp-10: 64px;
    --sp-11: 80px;
    --sp-12: 96px;
    --sp-13: 120px;

    /* === 圆角 === */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-pill: 999px;

    /* === 阴影 === */
    --shadow-xs: 0 1px 2px rgba(14, 17, 22, .04);
    --shadow-sm: 0 2px 6px rgba(14, 17, 22, .06);
    --shadow-md: 0 8px 24px rgba(14, 17, 22, .08);
    --shadow-lg: 0 18px 48px rgba(14, 17, 22, .12);
    --shadow-xl: 0 30px 80px rgba(14, 17, 22, .16);
    --shadow-red: 0 10px 30px rgba(216, 0, 39, .25);

    /* === 过渡 === */
    --ease-out:  cubic-bezier(.2, .7, .2, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --transition-fast:   150ms var(--ease-out);
    --transition-base:   250ms var(--ease-out);
    --transition-slow:   400ms var(--ease-out);

    /* === 层级 === */
    --z-base:       1;
    --z-raised:     10;
    --z-floating:   100;
    --z-header:     900;
    --z-overlay:    1000;
    --z-modal:      1100;
    --z-toast:      1200;

    /* === 容器/断点 === */
    --container-max:  1440px;
    --container-wide: 1600px;
    --container-pad:  32px;

    /* === 网站顶部高度 === */
    --nav-h:          88px;
    --nav-h-shrink:   68px;
}

/* -----------------------------
 * 2. Reset / Normalize
 * ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--fs-15);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body.disable-scroll { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--jz-ink);
    letter-spacing: -0.01em;
}
p { margin: 0; }

a { color: inherit; text-decoration: none; transition: color var(--transition-base); }
a:hover { color: var(--jz-red); }

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; padding: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

::selection { background: var(--jz-red); color: var(--jz-white); }

/* 滚动条（现代浏览器） */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--jz-gray-100); }
::-webkit-scrollbar-thumb { background: var(--jz-gray-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--jz-gray-500); }

/* -----------------------------
 * 3. 布局容器
 * ----------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}
/* 宽容器（1600）与全宽容器（撑满视口） */
.container-wide {
    width: 100%;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}
.container-fluid {
    width: 100%;
    margin: 0;
    padding: 0;
}
.clearfix::after { content: ""; display: block; clear: both; }

/* -----------------------------
 * 4. 工具类（Utilities）
 * ----------------------------- */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-primary { color: var(--jz-red) !important; }
.text-muted { color: var(--text-muted) !important; }

.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.mb-1 { margin-bottom: var(--sp-1); } .mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); }
.mb-10 { margin-bottom: var(--sp-10); }

.truncate {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.line-clamp-2 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Bootstrap 兼容性占位（页面中仍用到） */
.d-none { display: none !important; }
.row { display: flex; flex-wrap: wrap; margin-left: -12px; margin-right: -12px; }
.row > [class^="col-"] { padding-left: 12px; padding-right: 12px; }

/* -----------------------------
 * 5. 动效（可全局复用）
 * ----------------------------- */
@keyframes jz-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes jz-fade-in {
    from { opacity: 0; } to { opacity: 1; }
}
@keyframes jz-zoom-in {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes jz-shine {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.jz-animate-up   { animation: jz-fade-up .6s var(--ease-out) both; }
.jz-animate-in   { animation: jz-fade-in .6s var(--ease-out) both; }

/* AOS fallback（模板使用了 data-aos="fade-up"） */
[data-aos="fade-up"] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-aos="fade-up"].aos-animate,
.loaded [data-aos="fade-up"] {
    opacity: 1;
    transform: translateY(0);
}