/* ============================================================
   HAOSHI 豪士官网 · Reset & 设计令牌
   ------------------------------------------------------------
   响应式体系（沿用 KEYINS-B / taisiweichuang 的 rem 写法）：
     设计稿 1920px  →  1rem = 100px
     html { font-size: calc(100vw / 19.2) }
     · 大标题 / 大间距 / 容器  → 用 rem（跟随根字号缩放）
     · 正文 / 小字号          → 用固定 px 变量（永不缩放，保证可读性）
   ------------------------------------------------------------
   品牌色（取自 design/*.jpg 实采样）：
     深藏青 #0D3875  主色：标题 / 按钮 / 激活态 / logo
     烘焙金 #C9A163  辅色：数字 / 关键强调 / 悬浮按钮
     浅蓝底 #E9F1FE  区块背景
   ============================================================ */

:root {
    /* ---------- 品牌色 ---------- */
    --navy: #0D3875;
    --navy-deep: #082C57;
    --navy-light: #1C4E8E;
    --navy-soft: rgba(11, 58, 114, 0.08);

    --gold: #C9A163;
    --gold-deep: #AE8848;
    --gold-light: #DDBB80;
    --gold-soft: rgba(201, 161, 99, 0.12);
    --gold-grad: linear-gradient(135deg, #D9B87F 0%, #C39C5C 100%);

    /* ---------- 中性色 ---------- */
    --white: #FFFFFF;
    --bg-page: #E9F1FE;
    --bg-soft: #F4F7FC;
    --bg-mist: #F8FAFD;
    --footer-bg: #F1F4F8;
    --text: #333A45;
    --text-sub: #3E3E3E;
    --text-light: #9AA4B2;
    --border: #E3E9F2;
    --border-light: #EEF2F8;

    /* ---------- 圆角 / 阴影 / 过渡 ---------- */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --shadow-sm: 0 2px 8px rgba(11, 58, 114, 0.06);
    --shadow-md: 0 6px 20px rgba(11, 58, 114, 0.10);
    --shadow-lg: 0 14px 40px rgba(11, 58, 114, 0.16);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- 布局 ---------- */
    --container: 16.8rem;      /* 1680px @1920 */
    --gutter: 1.3rem;         /* 带左侧锚点菜单页面的额外内缩 */
    --header-h: 0.84rem;       /* 84px @1920（与 layout.css v2 保持一致） */

    /* ---------- 固定小字号（不缩放） ---------- */
    --font11: 11px;
    --font12: 12px;
    --font13: 13px;
    --font14: 14px;
    --font15: 15px;
    --font16: 16px;
    --font17: 17px;
    --font18: 18px;
    --font19: 19px;
    --font20: 20px;
    --font21: 21px;
    --font22: 22px;
    --font24: 24px;
    --font26: 26px;
    --font28: 28px;
    --font30: 30px;

    /* ---------- 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;
    --font52: 0.52rem;
    --font56: 0.56rem;
    --font60: 0.60rem;
    --font70: 0.70rem;
    --font72: 0.72rem;
    --font75: 0.75rem;
    --font80: 0.80rem;
    --font120: 1.20rem;
}

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

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

body {
    font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
                 "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC",
                 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: var(--font16);
    color: var(--text);
    line-height: 1.75;
    background: var(--white);
    min-width: 320px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; transition: var(--transition); }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; border: none; }
em, i { font-style: normal; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; color: inherit; outline: none; border: none; background: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.3; }
table { border-collapse: collapse; border-spacing: 0; }
svg { display: block; }

::selection { background: var(--navy); color: #fff; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(11, 58, 114, 0.25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(11, 58, 114, 0.45); }
::-webkit-scrollbar-track { background: var(--bg-soft); }

/* ---------- 布局容器 ---------- */
.container {
    width: var(--container);
    max-width: 92%;
    margin: 0 auto;
    position: relative;
}

/* ---------- 工具类 ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

/* ---------- 区块标题（中文主标题 + icon-line 装饰杠） ---------- */
.section-head { text-align: center; margin-bottom: 0.62rem; }
.section-head .cn {
    font-size: var(--font42);
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
    letter-spacing: 1px;
    display: inline-block;
    position: relative;
    padding-bottom: 0.35rem;
}
/* 装饰条：icon-line.png（藏青-白-金三色条，素材 43x4 与设计稿 1:1，禁用 data:image/svg） */
.section-head .cn::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -0.215rem;
    width: 0.43rem;
    height: 0.04rem;
    background: url(../images/icon-line.png) center/100% 100% no-repeat;
}

.section-head .desc {
    font-size: var(--font16);
    color: var(--text-sub);
    max-width: 8.6rem;
    margin: 0.26rem auto 0;
    line-height: 1.95;
}

/* 左对齐版区块标题（首页 产品系列 / 渠道区块用） */
.section-head.is-left { text-align: left; }
.section-head.is-left .cn::before { left: 0; margin-left: 0; }
.section-head.is-left .desc { margin-left: 0; }

/* 区块标题上的英文副标 */
.section-head .en {
    display: block;
    font-size: var(--font13);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 0.1rem;
}

/* ---------- 按钮 ---------- */
/* 主按钮：烘焙金胶囊（设计稿「了解品牌 +」「查看更多」） */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    border-radius: var(--radius-pill);
    transition: var(--transition);
    white-space: nowrap;
}
.btn-gold {
    min-width: 1.24rem;
    height: 0.55rem;
    padding: 0 0.34rem;
    font-size: var(--font18);
    color: #fff;
    background-image: -webkit-linear-gradient( 90deg, rgb(184,143,87) 0%, rgb(218,177,113) 100%);
    box-shadow: 0 4px 14px rgba(201, 161, 99, 0.35);
}
.btn-gold:hover { box-shadow: 0 8px 24px rgba(201, 161, 99, 0.5); transform: translateY(-2px); }

/* ---------- 内联 SVG 图标（mask 方案，颜色跟随 currentColor） ---------- */
/* 仅保留在用的回顶箭头；其他图标一律用 images/ 下 PNG 实图 */
:root {
    --ico-arrow-u: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20V6M6 12l6-6 6 6' stroke='%23000' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.i-ico {
    display: inline-block;
    width: 1em; height: 1em;
    background: currentColor;
    -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
    mask-position: center; mask-size: contain; mask-repeat: no-repeat;
    vertical-align: -0.12em;
    flex: none;
}
.i-ico.arrow-u { -webkit-mask-image: var(--ico-arrow-u); mask-image: var(--ico-arrow-u); }

/* ---------- 滚动揭示动画保护（对齐 KEYINS-B 方案） ---------- */
.wow-ready .wow { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
    .wow-ready .wow { visibility: visible !important; }
}
.counter-value { font-variant-numeric: tabular-nums; }