/* ============================================================
   KEYINS 官网 · Reset & Base
   REM体系：设计稿 1920px → 1rem = 100px
   html { font-size: calc(100vw / 19.2) }
   小字号用固定 px 变量（--font12~--font30，永远不缩放，保证可读性）
   大标题/大间距用 rem 变量（--font32 起，跟随根元素缩放）
   品牌色：炭黑 #1A1D23 + 科技蓝 #1668E3
   ============================================================ */

/* ---------- CSS 变量 ---------- */
:root {
    /* 品牌色 */
    --charcoal: #1A1D23;
    --charcoal-2: #111111;
    --dark-gray: #374151;
    --mid-gray: #6B7280;
    --light-gray: #9CA3AF;
    --border-gray: #E5E7EB;
    --bg-gray: #F3F4F6;
    --bg-light: #F9FAFB;
    --white: #FFFFFF;
    --accent: #1668E3;
    --accent-hover: #1A7AFF;
    --accent-soft: rgba(22, 104, 227, 0.08);
    --footer-bg: #1A1D23;
    --text-on-dark: rgba(255, 255, 255, 0.70);
    --text-on-dark-strong: rgba(255, 255, 255, 0.92);
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
    --shadow-hover: 0 8px 24px rgba(22, 104, 227, 0.18);
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --navbar-h: 0.74rem;

    /* ---- 固定小字号（永远不缩放，保证可读性） ---- */
    --font12: 12px;
    --font13: 13px;
    --font14: 14px;
    --font15: 15px;
    --font16: 16px;
    --font18: 18px;
    --font20: 20px;
    --font22: 22px;
    --font24: 24px;
    --font26: 26px;
    --font28: 28px;
    --font30: 30px;
    --font17: 17px;
    --font11: 11px;
    --font10: 10px;

    /* ---- rem 大字号（跟随根元素缩放） ---- */
    --font32: 0.32rem;
    --font34: 0.34rem;
    --font36: 0.36rem;
    --font38: 0.38rem;
    --font40: 0.40rem;
    --font42: 0.42rem;
    --font44: 0.44rem;
    --font46: 0.46rem;
    --font48: 0.48rem;
    --font50: 0.50rem;
    --font56: 0.56rem;
    --font60: 0.60rem;
    --font70: 0.70rem;
}

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

html {
    font-size: calc(100vw / 19.2);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: var(--font15);
    color: var(--dark-gray);
    line-height: 1.6;
    background: var(--white);
    min-width: 320px;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; transition: var(--transition); }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; border: none; }
em, i { font-style: normal; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ---------- 工具类 ---------- */
.clearfix::after { content: ""; display: table; clear: both; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-btw { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { display: flex; flex-wrap: wrap; }

/* ---------- 布局容器 ---------- */
.container {
    width: 1220px;
    max-width: 92%;
    margin: 0 auto;
}

.container-w {
    width: 1220px;
    max-width: 94%;
    margin: 0 auto;
}

/* 通用区块标题 */
.section-head {
    text-align: center;
    margin-bottom: 0.6rem;
}
.section-head .en {
    font-size: var(--font14);
    font-weight: 600;
    color: var(--mid-gray);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.12rem;
    display: block;
}
.section-head .cn {
    font-size: var(--font36);
    font-weight: 700;
    color: var(--charcoal);
    line-height: 1.2;
}
.section-head .desc {
    font-size: var(--font16);
    color: var(--mid-gray);
    max-width: 7.2rem;
    margin: 0.15rem auto 0;
    line-height: 1.7;
}