/* ======================================================================
   Cloud Pet 宠物用品品牌官网 - 主样式表
   设计: 暖橙 #C4511B + 暖青 #167C78 + 萌系绿 #237554 + 米白 #FFF9F1
   依据: cankao/设计规范.md §17 CSS Design Tokens
   WCAG 2.2 AA · 响应式 1024/860/560 · Reduced Motion 友好
   ====================================================================== */

/* ---------- 设计令牌 (Design Tokens) ---------- */
:root {
    /* 字体 */
    --font-display: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
    --font-body:    "Inter", "Segoe UI", Arial, sans-serif;
    --font-admin:   "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    --ff-sans: var(--font-body);
    --ff-head: var(--font-display);

    /* 品牌色 */
    --color-brand-orange:        #c4511b;
    --color-brand-orange-hover:  #a63e12;
    --color-brand-orange-active: #8c310c;
    --color-brand-apricot:       #f47c2a;
    --color-brand-apricot-soft:  #fff0e5;
    --color-brand-teal:          #167c78;
    --color-brand-teal-hover:    #0f6461;
    --color-brand-teal-soft:     #e7f5f2;
    --color-brand-green:         #237554;
    --color-brand-green-soft:    #eaf6ef;

    /* 中性色 */
    --color-canvas:           #fff9f1;
    --color-surface:          #ffffff;
    --color-surface-warm:     #fff5ea;
    --color-surface-cool:     #f1f8f6;
    --color-text:             #25332f;
    --color-text-secondary:   #66716b;
    --color-text-inverse:     #ffffff;
    --color-border:           #dce5df;
    --color-border-strong:    #b8c7c0;
    --color-overlay:          rgb(20 35 30 / 56%);

    /* 语义色 */
    --color-success: #237554;
    --color-warning: #8a4b08;
    --color-error:   #b42318;
    --color-info:    #167c78;

    /* 兼容别名 (供旧代码引用, 不再扩展) */
    --c-text:    var(--color-text);
    --c-text-2:  var(--color-text-secondary);
    --c-text-3:  #8b948f;
    --c-line:    var(--color-border);
    --c-paper:   var(--color-surface);
    --c-paper-2: var(--color-canvas);
    --c-paper-3: var(--color-border);

    /* 间距 */
    --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
    --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
    --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
    --space-14: 3.5rem; --space-16: 4rem;   --space-18: 4.5rem;
    --space-24: 6rem;   --space-30: 7.5rem;

    /* 圆角 */
    --radius-xs:    .375rem;
    --radius-sm:    .625rem;
    --radius-md:    .875rem;
    --radius-lg:    1.25rem;
    --radius-xl:    1.75rem;
    --radius-cloud: 2rem 2rem 3rem 2rem;
    --radius-pill:  999px;
    --radius:       var(--radius-sm);

    /* 阴影 */
    --shadow-xs: 0 1px 2px rgb(37 51 47 / 6%);
    --shadow-sm: 0 4px 12px rgb(37 51 47 / 7%), 0 1px 3px rgb(37 51 47 / 5%);
    --shadow-md: 0 14px 32px rgb(37 51 47 / 10%), 0 3px 8px rgb(37 51 47 / 6%);
    --shadow-lg: 0 24px 56px rgb(37 51 47 / 14%);

    /* 动效 */
    --duration-fast: 120ms;
    --duration-normal: 200ms;
    --duration-slow: 320ms;
    --ease-standard: cubic-bezier(.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(.2, .8, .2, 1);

    /* 布局 */
    --container-max: 77.5rem;
    --container: 1240px;
    --grid-gap: 1.5rem;
    --header-height: 5rem;
    --focus-ring-color: var(--color-brand-teal);
    --focus-ring-width: 3px;
    --focus-ring-offset: 3px;

    color-scheme: light;
}

/* ---------- 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.no-js .home-reveal, html.no-js .reveal-section { opacity: 1 !important; transform: none !important; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.625;
    color: var(--color-text);
    background: var(--color-canvas);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a {
    color: var(--color-brand-teal);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--color-brand-teal-hover); }

/* 焦点环 (WCAG 2.4.7 / 1.4.11) */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: 2px;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
    margin: 0 0 .5em;
    letter-spacing: -.015em;
}
h1 { font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 800; line-height: 1.12; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; font-weight: 600; }
p  { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; }
strong, b { font-weight: 700; }

/* 跳转到主内容 (无障碍) */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    background: var(--color-brand-orange); color: #fff;
    padding: 10px 18px; border-radius: 0 0 var(--radius-sm) 0;
    font-family: var(--font-display); font-weight: 600; font-size: .9rem;
}
.skip-link:focus { left: 0; color: #fff; }

/* 多语言: 俄语西里尔字符降级 */
html[lang="ru"] body { font-family: 'Inter', 'Segoe UI', Arial, sans-serif; }

/* 锚点偏移 (sticky header 不遮挡) */
[id] { scroll-margin-top: calc(var(--header-height) + var(--space-4)); }

/* ---------- 布局容器 ---------- */
.container {
    width: min(calc(100% - 4rem), var(--container));
    margin: 0 auto;
    padding: 0 24px;
}
.container--narrow  { max-width: 920px; }
.container--article { max-width: 880px; }
.container--detail  { max-width: 1080px; }

.section { padding-block: var(--space-24); }
.section--tight { padding-block: var(--space-16); }
.section--dark {
    background: linear-gradient(135deg, #1f3a36 0%, #16332e 100%);
    color: #d6e3df;
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--paper2 { background: var(--color-surface-warm); }
.section--cool   { background: var(--color-surface-cool); }

.section__head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.section__head .eyebrow {
    display: inline-block;
    color: var(--color-brand-orange);
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .78rem;
    margin-bottom: 12px;
    padding: 5px 14px;
    background: var(--color-brand-apricot-soft);
    border-radius: var(--radius-pill);
}
.section__head p { color: var(--color-text-secondary); font-size: 1.08rem; }
.section__head--left { text-align: left; margin-left: 0; }
.section-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.section-actions--center { justify-content: center; }
.section-spacer { margin-top: 60px; }
.section-spacer--sm { margin-top: 28px; }
.text-light { color: #fff !important; }

/* ---------- 按钮 ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 26px;
    font-family: var(--font-display); font-weight: 600; font-size: .95rem;
    border: 2px solid transparent; border-radius: var(--radius-md);
    cursor: pointer; text-transform: none; letter-spacing: .01em;
    transition: background var(--duration-normal) var(--ease-standard),
                color var(--duration-normal) var(--ease-standard),
                border-color var(--duration-normal) var(--ease-standard),
                transform var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard);
    min-height: 48px;
}
.btn:active { transform: translateY(0); }
.btn--primary {
    background: var(--color-brand-orange); color: #fff; border-color: var(--color-brand-orange);
}
.btn--primary:hover {
    background: var(--color-brand-orange-hover); border-color: var(--color-brand-orange-hover); color: #fff;
    transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.btn--primary:active { background: var(--color-brand-orange-active); border-color: var(--color-brand-orange-active); }

.btn--secondary {
    background: var(--color-surface); color: var(--color-brand-teal); border-color: var(--color-brand-teal);
}
.btn--secondary:hover {
    background: var(--color-brand-teal-soft); color: var(--color-brand-teal-hover); border-color: var(--color-brand-teal-hover);
}

.btn--outline {
    background: transparent; color: var(--color-text); border-color: var(--color-border-strong);
}
.btn--outline:hover {
    background: var(--color-surface-warm); color: var(--color-brand-orange); border-color: var(--color-brand-orange);
}

.btn--outline-light {
    background: transparent; color: #fff; border-color: rgb(255 255 255 / 55%);
}
.btn--outline-light:hover {
    background: #fff; color: var(--color-brand-orange); border-color: #fff;
}

/* 兼容旧模板: btn--gold 映射到主橙 */
.btn--gold { background: var(--color-brand-orange); color: #fff; border-color: var(--color-brand-orange); }
.btn--gold:hover { background: var(--color-brand-orange-hover); border-color: var(--color-brand-orange-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.btn--lg { padding: 16px 34px; font-size: 1rem; min-height: 56px; }
.btn--sm { padding: 9px 18px; font-size: .85rem; min-height: 40px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn--loading { pointer-events: none; opacity: .8; }

/* 文字链接箭头 */
.link-arrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-display); font-weight: 600; font-size: .92rem;
    color: var(--color-brand-teal);
}
.link-arrow:hover { color: var(--color-brand-teal-hover); gap: 10px; }
.link-arrow::after { content: "→"; transition: transform var(--duration-normal) var(--ease-standard); }

/* ---------- 顶部 Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 900;
    background: rgb(255 255 255 / 92%);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow var(--duration-normal) var(--ease-standard);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

/* ---------- 首页沉浸式透明 Header（顶部透明、文字反白；滚动后恢复白底）---------- */
.site-header.is-transparent {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}
/* 透明态下：品牌名 / 导航链接 / 语言切换 / 汉堡键 统一反白，提升图上可读性 */
.site-header.is-transparent .brand,
.site-header.is-transparent .nav-link { color: #fff; }
.site-header.is-transparent .brand:hover { color: #fff; }
.site-header.is-transparent .nav-link:hover,
.site-header.is-transparent .nav-item:hover > .nav-link {
    color: #fff;
    background: rgb(255 255 255 / .14);
}
.site-header.is-transparent .nav-link[aria-current="page"] { color: var(--color-brand-apricot); }
.site-header.is-transparent .nav-link .caret { opacity: .85; }
.site-header.is-transparent .lang-switch__btn {
    background: rgb(255 255 255 / .10);
    color: #fff;
    border-color: rgb(255 255 255 / .30);
}
.site-header.is-transparent .lang-switch__btn:hover {
    background: rgb(255 255 255 / .20);
    border-color: rgb(255 255 255 / .50);
}
.site-header.is-transparent .nav-toggle {
    background: rgb(255 255 255 / .10);
    color: #fff;
    border-color: rgb(255 255 255 / .30);
}
/* 透明态与滚动态之间平滑过渡（背景/边框/阴影由上方统一 transition 接管）*/
.site-header.is-transparent .brand,
.site-header.is-transparent .nav-link,
.site-header.is-transparent .lang-switch__btn,
.site-header.is-transparent .nav-toggle {
    transition: color var(--duration-normal) var(--ease-standard),
                background var(--duration-normal) var(--ease-standard),
                border-color var(--duration-normal) var(--ease-standard);
}
/* 下拉菜单 / 语言菜单 / 移动菜单始终白底，不随透明态改变（与导航栏背景解耦）*/
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--header-height); gap: 24px;
}

/* 品牌 Logo */
.brand {
    display: flex; align-items: center; gap: 10px;
    color: var(--color-text); font-family: var(--font-display); font-weight: 800;
    font-size: 1.25rem; letter-spacing: -.02em; flex-shrink: 0;
}
.brand:hover { color: var(--color-text); }
.brand__logo { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
/* 完整 logo 图(自带 Cloud Pet 文字):按高度缩放,宽度自适应 */
.brand__logo--full { width: auto; height: 40px; max-width: 160px; }
/* 透明态(header 叠在背景图上):彩色 logo 反白处理 */
.site-header.is-transparent .brand__logo--full { filter: brightness(0) invert(1); }
.brand__name { line-height: 1; }
.brand__accent { color: var(--color-brand-orange); font-weight: 800; }
.brand__name b { color: var(--color-brand-orange); }

/* 主导航 */
.main-nav { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-link {
    color: var(--color-text); padding: 10px 14px; border-radius: var(--radius-sm);
    font-family: var(--font-display); font-weight: 600; font-size: .94rem;
    display: inline-flex; align-items: center; gap: 5px;
    transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.nav-link:hover, .nav-item:hover > .nav-link { color: var(--color-brand-orange); background: var(--color-brand-apricot-soft); }
.nav-link[aria-current="page"] { color: var(--color-brand-orange); }
.nav-link .caret { font-size: .6rem; opacity: .6; transition: transform var(--duration-fast); }
.nav-item:hover > .nav-link .caret { transform: rotate(180deg); }

/* Mega menu 下拉 */
.dropdown {
    position: absolute; top: 100%; left: 0; min-width: 240px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    padding: 10px; opacity: 0; visibility: hidden;
    transform: translateY(8px); transition: opacity var(--duration-normal) var(--ease-standard),
                                          visibility var(--duration-normal) var(--ease-standard),
                                          transform var(--duration-normal) var(--ease-standard);
    z-index: 50;
}
.nav-item:hover > .dropdown, .nav-item:focus-within > .dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown--mega { min-width: 580px; padding: 16px; }
.dropdown__group-title {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--color-text-secondary); font-weight: 700;
    margin: 6px 0; padding-left: 8px;
}
.dropdown a {
    display: block; color: var(--color-text); padding: 9px 11px;
    border-radius: var(--radius-sm); font-size: .92rem; font-weight: 500;
    transition: background var(--duration-fast), color var(--duration-fast);
}
.dropdown a:hover { background: var(--color-brand-teal-soft); color: var(--color-brand-teal); }
.dropdown a small { display: block; color: var(--color-text-secondary); font-size: .78rem; font-weight: 400; margin-top: 2px; }
.dropdown__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }

/* Header 右侧工具 */
.header-tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lang-switch { position: relative; }
.lang-flag {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 15px; flex-shrink: 0; overflow: hidden;
}
.lang-flag img { width: 20px; height: 15px; object-fit: cover; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / 8%); }
.lang-switch__btn {
    background: var(--color-surface-warm); color: var(--color-text);
    border: 1px solid var(--color-border);
    padding: 7px 12px; border-radius: var(--radius-sm);
    font-size: .85rem; font-weight: 600;
    cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-display); min-height: 40px;
    transition: background var(--duration-fast), border-color var(--duration-fast);
}
.lang-switch__btn:hover { background: var(--color-brand-apricot-soft); border-color: var(--color-border-strong); }
.lang-switch__menu {
    position: absolute; top: 120%; right: 0; min-width: 180px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    padding: 6px; opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity var(--duration-fast), visibility var(--duration-fast), transform var(--duration-fast);
    z-index: 50;
}
.lang-switch:hover .lang-switch__menu, .lang-switch.is-open .lang-switch__menu,
.lang-switch:focus-within .lang-switch__menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.lang-switch__menu a {
    display: flex; align-items: center; gap: 10px; color: var(--color-text);
    padding: 9px 11px; border-radius: var(--radius-sm); font-size: .9rem;
}
.lang-switch__menu a:hover { background: var(--color-brand-teal-soft); color: var(--color-brand-teal); }
.lang-switch__menu a.is-active {
    background: var(--color-brand-orange); color: #fff; font-weight: 600;
}
.lang-switch__menu a.is-active::after { content: "✓"; margin-left: auto; }

/* 移动汉堡 */
.nav-toggle {
    display: none; width: 44px; height: 44px;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-surface); color: var(--color-text); cursor: pointer;
    padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--duration-normal), opacity var(--duration-normal); }
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 面包屑 ---------- */
.breadcrumb {
    background: var(--color-surface-warm); border-bottom: 1px solid var(--color-border);
    padding: 14px 0; font-size: .85rem;
}
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumb li { color: var(--color-text-secondary); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--color-border-strong); }
.breadcrumb a { color: var(--color-text-secondary); }
.breadcrumb a:hover { color: var(--color-brand-orange); }
.breadcrumb li:last-child { color: var(--color-text); font-weight: 600; }

/* ---------- Hero (首页产品云岛) ---------- */
.hero {
    position: relative; overflow: hidden; isolation: isolate;
    background: linear-gradient(160deg, var(--color-surface-warm) 0%, var(--color-canvas) 60%, var(--color-surface-cool) 100%);
}
.hero__cloud {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle at 82% 18%, rgb(244 124 42 / 12%), transparent 40%),
        radial-gradient(circle at 12% 88%, rgb(22 124 120 / 12%), transparent 42%);
}
.hero__paw {
    position: absolute; z-index: 0; pointer-events: none;
    color: var(--color-brand-apricot); opacity: .14;
}
.hero__paw--1 { top: 16%; right: 6%; width: 90px; transform: rotate(18deg); }
.hero__paw--2 { bottom: 12%; left: 4%; width: 64px; transform: rotate(-24deg); }
.hero__inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px;
    align-items: center; padding: 84px 0 96px;
}
.hero__content { max-width: 600px; }
.hero__badge {
    display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px;
    padding: 7px 16px; border: 1px solid var(--color-brand-apricot);
    border-radius: var(--radius-pill); background: var(--color-brand-apricot-soft);
    color: var(--color-brand-orange); font-family: var(--font-display);
    font-size: .8rem; font-weight: 700; letter-spacing: .04em;
}
.hero__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-brand-apricot); box-shadow: 0 0 0 5px rgb(244 124 42 / 18%); }
.hero h1 {
    font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1.08; letter-spacing: -.035em;
    color: var(--color-text); margin-bottom: 22px; text-wrap: balance;
}
.hero h1 b, .hero h1 strong { color: var(--color-brand-orange); }
.hero__lead {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--color-text-secondary);
    line-height: 1.6; margin-bottom: 32px; max-width: 560px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__stats {
    display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 14px; margin-top: 52px; padding-top: 32px;
    border-top: 1px solid var(--color-border);
}
.hero__stat { }
.hero__stat b {
    font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2rem);
    color: var(--color-brand-orange); display: block; line-height: 1; font-weight: 800;
}
.hero__stat span { color: var(--color-text-secondary); font-size: .84rem; margin-top: 6px; display: block; }

/* Hero 图片云岛 */
.hero__visual { position: relative; }
.hero__visual-main {
    position: relative; aspect-ratio: 4/3; border-radius: var(--radius-xl); overflow: hidden;
    box-shadow: var(--shadow-md); background: var(--color-surface-warm);
}
.hero__visual-main img { width: 100%; height: 100%; object-fit: cover; }
.hero__visual-card {
    position: absolute; background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 14px 18px;
    display: flex; align-items: center; gap: 12px;
}
.hero__visual-card--tl { top: -18px; left: -18px; }
.hero__visual-card--br { bottom: -18px; right: -18px; }
.hero__visual-card-ico {
    width: 40px; height: 40px; border-radius: var(--radius-sm);
    display: grid; place-items: center; color: #fff; flex-shrink: 0;
}
.hero__visual-card-ico--orange { background: var(--color-brand-orange); }
.hero__visual-card-ico--teal   { background: var(--color-brand-teal); }
.hero__visual-card-ico svg { width: 22px; height: 22px; fill: currentColor; }
.hero__visual-card-txt b { display: block; font-family: var(--font-display); font-size: .95rem; color: var(--color-text); }
.hero__visual-card-txt span { font-size: .78rem; color: var(--color-text-secondary); }

/* Cloud Paw Path 品牌曲线 (规范 §3.4) */
.cloud-paw {
    position: absolute; pointer-events: none; z-index: 1;
    color: var(--color-brand-apricot); opacity: .35;
}

/* ---------- 卡片网格 ---------- */
.grid { display: grid; gap: var(--grid-gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* 产品/内容卡片 */
.card {
    position: relative; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--duration-normal) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard),
                border-color var(--duration-normal) var(--ease-standard);
    display: flex; flex-direction: column; height: 100%;
}
.card:hover {
    box-shadow: var(--shadow-md); transform: translateY(-4px);
    border-color: var(--color-border-strong);
}
.card__media {
    position: relative; aspect-ratio: 4/3; overflow: hidden;
    background: var(--color-surface-warm);
}
.card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-standard);
}
.card:hover .card__media img { transform: scale(1.04); }
.card__media--video::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at center, rgb(22 124 120 / 0), rgb(22 124 120 / 35));
    opacity: 0; transition: opacity var(--duration-normal);
}
.card__media--video::before {
    content: "▶"; position: absolute; inset: 0; display: grid; place-items: center;
    color: #fff; font-size: 2rem; z-index: 2; opacity: 0;
    transition: opacity var(--duration-normal);
}
.card__media--video:hover::after { opacity: 1; }
.card__media--video:hover::before { opacity: 1; }
.card__duration {
    position: absolute; right: 10px; bottom: 10px;
    background: rgb(37 51 47 / 78%); color: #fff; font-size: .75rem;
    padding: 3px 9px; border-radius: var(--radius-pill); font-weight: 600;
}
.card__body { padding: 20px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.card__cat {
    color: var(--color-brand-orange); font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px;
    display: inline-block;
}
.card h3 { font-size: 1.12rem; margin-bottom: 10px; line-height: 1.35; }
.card h3 a { color: var(--color-text); }
.card h3 a:hover { color: var(--color-brand-orange); }
.card__excerpt { color: var(--color-text-secondary); font-size: .92rem; flex: 1; line-height: 1.6; }
.card__meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--color-text-secondary); font-size: .82rem; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.card__more {
    margin-top: 14px; font-family: var(--font-display); font-weight: 600;
    font-size: .88rem; color: var(--color-brand-teal); display: inline-flex; align-items: center; gap: 5px;
}
.card__more:hover { color: var(--color-brand-teal-hover); gap: 9px; }
.card__more::after { content: "→"; transition: transform var(--duration-normal); }

/* 大分类卡 (首页产品分类) */
.cat-card {
    position: relative; aspect-ratio: 1/1; border-radius: var(--radius-lg);
    overflow: hidden; display: block; box-shadow: var(--shadow-xs);
    isolation: isolate;
    transition: transform var(--duration-normal) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard);
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cat-card img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-standard);
}
.cat-card:hover img { transform: scale(1.06); }
.cat-card__overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgb(37 51 47 / 92%) 0%, rgb(37 51 47 / 35%) 55%, rgb(37 51 47 / 5%) 100%);
}
.cat-card__arrow {
    position: absolute; top: 16px; right: 16px; z-index: 3;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--color-brand-orange); display: grid; place-items: center;
    color: #fff; font-weight: 700; box-shadow: var(--shadow-sm);
    transition: transform var(--duration-normal) var(--ease-standard), background var(--duration-normal);
}
.cat-card:hover .cat-card__arrow { transform: translate(2px,-2px) rotate(-12deg); background: var(--color-brand-orange-hover); }
.cat-card__label {
    position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 3;
    color: #fff; transform: translateY(6px);
    transition: transform var(--duration-normal) var(--ease-standard);
}
.cat-card:hover .cat-card__label { transform: translateY(0); }
.cat-card__label h3 { color: #fff; margin: 0 0 5px; font-size: 1.18rem; }
.cat-card__label small { color: rgb(255 255 255 / 82%); font-size: .84rem; line-height: 1.4; display: block; }

/* 视频列表卡片 (竖版 9:16) */
.video-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 22px; }
.video-card { position: relative; display: flex; flex-direction: column; min-width: 0; transition: transform var(--duration-normal) var(--ease-standard); }
.video-card:hover { transform: translateY(-4px); }
.video-card__media {
    position: relative; aspect-ratio: 9/16; overflow: hidden;
    border-radius: var(--radius-lg); background: linear-gradient(145deg, #1f3a36, #16332e);
    box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-normal);
}
.video-card:hover .video-card__media { box-shadow: var(--shadow-md); }
.video-card__cover { display: block; width: 100%; height: 100%; color: #fff; }
.video-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow); }
.video-card:hover .video-card__cover img { transform: scale(1.05); }
.video-card__play {
    position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center; padding-left: 3px;
    background: rgb(196 81 27 / 92%); color: #fff;
    font-size: 1.35rem; line-height: 1; box-shadow: var(--shadow-md);
    transition: transform var(--duration-normal), background var(--duration-normal);
}
.video-card:hover .video-card__play { transform: scale(1.08); background: var(--color-brand-orange-hover); }
.video-card__duration {
    position: absolute; left: 14px; bottom: 14px; z-index: 3;
    padding: 4px 10px; border-radius: var(--radius-pill);
    background: rgb(37 51 47 / 78%); color: #fff; font-size: .74rem; font-weight: 600;
    backdrop-filter: blur(8px);
}
.video-card__body { padding: 16px 4px 0; }
.video-card__cat {
    color: var(--color-brand-orange); font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em; display: block; margin-bottom: 7px;
}
.video-card h3 { font-size: 1.02rem; line-height: 1.35; margin-bottom: 7px; }
.video-card h3 a { color: var(--color-text); }
.video-card h3 a:hover { color: var(--color-brand-orange); }
.video-card p { color: var(--color-text-secondary); font-size: .88rem; line-height: 1.6; margin: 0; }

/* ---------- 信任/制造能力网格 ---------- */
.trust-grid, .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.feature {
    position: relative; padding: 32px 24px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); height: 100%;
    transition: transform var(--duration-normal) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard),
                border-color var(--duration-normal) var(--ease-standard);
}
.feature:hover {
    border-color: var(--color-brand-teal); box-shadow: var(--shadow-sm); transform: translateY(-4px);
}
.feature__icon {
    width: 56px; height: 56px; margin-bottom: 18px;
    border-radius: var(--radius-md);
    display: grid; place-items: center; color: #fff;
    background: var(--color-brand-teal-soft);
}
.feature__icon svg { width: 28px; height: 28px; }
.feature__icon--orange { background: var(--color-brand-apricot-soft); color: var(--color-brand-orange); }
.feature__icon--teal   { background: var(--color-brand-teal-soft);   color: var(--color-brand-teal); }
.feature__icon--green  { background: var(--color-brand-green-soft);  color: var(--color-brand-green); }
.feature__icon--apricot{ background: var(--color-brand-apricot-soft);color: var(--color-brand-apricot); }
.feature h3 { font-size: 1.08rem; margin-bottom: 10px; }
.feature p { color: var(--color-text-secondary); font-size: .92rem; margin: 0; line-height: 1.6; }
.section--dark .feature { background: rgb(255 255 255 / 5%); border-color: rgb(255 255 255 / 12%); }
.section--dark .feature:hover { border-color: var(--color-brand-apricot); }
.section--dark .feature__icon { background: rgb(244 124 42 / 18%); color: var(--color-brand-apricot); }
.section--dark .feature h3 { color: #fff; }
.section--dark .feature p  { color: #c7d4d0; }

/* ---------- 合作流程 (Cloud Path) ---------- */
.process-cloud { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--grid-gap); counter-reset: step; }
.step {
    position: relative; padding: 38px 22px 26px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
    transition: transform var(--duration-normal) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard),
                border-color var(--duration-normal) var(--ease-standard);
}
.step::before {
    counter-increment: step; content: counter(step);
    position: absolute; top: -20px; left: 22px; z-index: 2;
    background: var(--color-brand-orange); color: #fff;
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 800; font-size: 1rem;
    box-shadow: var(--shadow-sm);
}
.step::after {
    content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--color-brand-orange), var(--color-brand-apricot-soft));
    border-radius: var(--radius-pill); opacity: .8;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--color-border-strong); }
.step h3 { font-size: 1.04rem; margin-bottom: 8px; }
.step p { color: var(--color-text-secondary); font-size: .9rem; margin: 0; }

/* =========================================================================
   Section 7 · 合作流程 Journey (青绿横向时间轴)
   故意与 §6 的橙色编号卡片网格差异化:
   - 青绿/绿调色板 (vs 橙) · 序号圆形节点压在虚线轨道上
   - 节点间用右向箭头连接 (vs 左上角徽章 + 顶部渐变条)
   - 整条流程嵌入柔和青绿带状底 (vs 纸色底上的白色卡片)
   每个节点保留 .step 类, 复用既有 home-reveal 滚动显现动效。
   ========================================================================= */
.section--journey { background: var(--color-surface); }
/* 配合青绿主题的眉标变体 (默认 .section__head .eyebrow 是橙调) */
.section__head .eyebrow--teal {
    color: var(--color-brand-teal);
    background: var(--color-brand-teal-soft);
}

.journey {
    list-style: none; margin: 0;
    padding: var(--space-10) var(--space-6);
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    background: linear-gradient(180deg, var(--color-brand-teal-soft) 0%, var(--color-surface-cool) 100%);
    border: 1px solid rgb(22 124 120 / 14%);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
}
/* 连接所有节点的横向虚线轨道 */
.journey::before {
    content: ""; position: absolute;
    left: calc(10% + 24px); right: calc(10% + 24px);
    top: calc(var(--space-10) + 40px);
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--color-brand-teal) 0 10px, transparent 10px 18px);
    opacity: .55; z-index: 0;
}
.journey__node {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 0 var(--space-2);
}
/* 重置 .step 的卡片样式: 这里节点不是卡片, 不需要边框/阴影/徽章/顶条 */
.journey__node.step {
    padding: 0 var(--space-2);
    background: none; border: 0; box-shadow: none; border-radius: 0;
}
.journey__node.step::before,
.journey__node.step::after { display: none; }
.journey__node.step:hover { transform: none; box-shadow: none; border-color: transparent; }

/* 主视觉序号 — 描边圆圈, 青绿色, 压在轨道上 */
.journey__num {
    width: 80px; height: 80px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-brand-teal);
    color: var(--color-brand-teal);
    font-family: var(--font-display);
    font-weight: 800; font-size: 1.6rem; letter-spacing: .02em;
    box-shadow: var(--shadow-sm);
    transition: background var(--duration-normal) var(--ease-standard),
                color var(--duration-normal) var(--ease-standard),
                transform var(--duration-normal) var(--ease-standard);
}
.journey__body { margin-top: var(--space-5); padding: 0 var(--space-1); }
.journey__title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; color: var(--color-text); margin: 0 0 6px; }
.journey__desc { color: var(--color-text-secondary); font-size: .88rem; line-height: 1.6; margin: 0; }

/* 节点间的右向箭头连接器 (末节点隐藏) */
.journey__arrow {
    position: absolute;
    top: calc(var(--space-10) + 26px);
    right: -14px;
    width: 28px; height: 28px;
    color: var(--color-brand-green);
    background: var(--color-surface);
    border-radius: 50%; z-index: 2;
    transition: color var(--duration-normal) var(--ease-standard);
}
/* hover: 序号填充实色青绿并轻微上浮, 表达可交互 */
.journey__node:hover .journey__num { background: var(--color-brand-teal); color: var(--color-text-inverse); transform: translateY(-3px); }
.journey__node:hover .journey__arrow { color: var(--color-brand-teal); }
/* 键盘焦点环 */
.journey__node:focus-within .journey__num { outline: 3px solid var(--focus-ring-color); outline-offset: 3px; }

/* ---------- CTA 横幅 ---------- */
.cta-banner {
    position: relative; overflow: hidden;
    background: linear-gradient(120deg, var(--color-brand-teal) 0%, var(--color-brand-green) 100%);
    color: #fff; border-radius: var(--radius-xl);
    padding: 56px 48px; box-shadow: var(--shadow-md);
}
.cta-banner--compact { padding: 32px; border-radius: var(--radius-lg); }
.cta-banner::before {
    content: ""; position: absolute; right: -60px; top: -60px;
    width: 280px; height: 280px; border-radius: 50%;
    background: rgb(244 124 42 / 22%); pointer-events: none;
}
.cta-banner--warm {
    background: linear-gradient(120deg, var(--color-brand-orange) 0%, var(--color-brand-apricot) 100%);
}
.cta-banner--warm::before { background: rgb(255 255 255 / 16%); }
.cta-banner h2, .cta-banner h3, .cta-banner p, .cta-banner__actions { position: relative; z-index: 1; }
.cta-banner h2, .cta-banner h3 { color: #fff; max-width: 640px; }
.cta-banner h3 { font-size: 1.2rem; }
.cta-banner p { color: rgb(255 255 255 / 88%); max-width: 580px; font-size: 1.04rem; }
.cta-banner__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.cta-banner .btn--primary { background: #fff; color: var(--color-brand-teal); border-color: #fff; }
.cta-banner .btn--primary:hover { background: var(--color-surface-warm); color: var(--color-brand-teal-hover); border-color: var(--color-surface-warm); }
.cta-banner--warm .btn--primary { color: var(--color-brand-orange); }
.cta-banner--warm .btn--primary:hover { color: var(--color-brand-orange-hover); }

/* ---------- 详情页 ---------- */
.detail { padding: 56px 0; }
.detail__hero { aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 36px; background: var(--color-surface-warm); }
.detail__hero img { width: 100%; height: 100%; object-fit: cover; }
.detail__title { margin-bottom: 14px; }
.detail__meta {
    display: flex; flex-wrap: wrap; gap: 18px; color: var(--color-text-secondary);
    font-size: .85rem; margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--color-border);
}
.detail__content { font-size: 1.02rem; line-height: 1.8; color: var(--color-text); max-width: 760px; }
.detail__content h2, .detail__content h3 { margin-top: 1.6em; }
.detail__content p { margin-bottom: 1.1em; }
.detail__content img { border-radius: var(--radius-md); margin: 1.4em 0; }
.detail__content ul, .detail__content ol { margin-bottom: 1.2em; }
.detail__layout { display: grid; grid-template-columns: 1fr 340px; gap: 44px; align-items: start; }
.detail__sidebar { position: sticky; top: calc(var(--header-height) + 16px); }
.spec-list {
    background: var(--color-surface-cool); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: 24px;
}
.spec-list h4 { font-size: 1rem; margin-bottom: 16px; color: var(--color-text); }
.spec-list ul { list-style: none; margin: 0; padding: 0; }
.spec-list li {
    padding: 11px 0; border-bottom: 1px dashed var(--color-border);
    font-size: .93rem; display: flex; gap: 10px; align-items: flex-start;
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list li::before { content: "✓"; color: var(--color-brand-teal); font-weight: 700; flex-shrink: 0; }
.spec-list li b { color: var(--color-text); font-weight: 600; }

/* 产品图库 (主图 + 缩略图) */
.gallery-main {
    aspect-ratio: 1/1; border-radius: var(--radius-lg); overflow: hidden;
    background: var(--color-surface-warm); border: 1px solid var(--color-border); margin-bottom: 14px;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; }
.gallery-thumb {
    aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden;
    border: 2px solid transparent; cursor: pointer; padding: 0; background: none;
    transition: border-color var(--duration-fast), transform var(--duration-fast);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover { transform: translateY(-2px); }
.gallery-thumb.is-active { border-color: var(--color-brand-orange); }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 28px 0; }
.gallery img { aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--color-border); cursor: pointer; transition: transform var(--duration-fast), box-shadow var(--duration-fast); }
.gallery img:hover { transform: scale(1.03); box-shadow: var(--shadow-sm); }

/* 视频播放器 */
.video-player { aspect-ratio: 16/9; background: #1f3a36; border-radius: var(--radius-lg); overflow: hidden; position: relative; cursor: pointer; }
.video-player video, .video-player iframe { width: 100%; height: 100%; border: 0; }
.video-player__cover { width: 100%; height: 100%; object-fit: cover; }
.video-player__play {
    position: absolute; inset: 0; display: grid; place-items: center;
    width: 84px; height: 84px; margin: auto; border-radius: 50%;
    background: rgb(196 81 27 / 92%); color: #fff; font-size: 2rem;
    box-shadow: var(--shadow-md); transition: transform var(--duration-normal), background var(--duration-normal);
    pointer-events: none;
}
.video-player:hover .video-player__play { transform: scale(1.1); background: var(--color-brand-orange-hover); }

/* ---------- 联系页 ---------- */
.contact-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; align-items: start; }
.contact-card {
    position: relative; padding: 34px;
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    background: var(--color-surface); box-shadow: var(--shadow-xs);
    transition: box-shadow var(--duration-normal), border-color var(--duration-normal);
}
.contact-card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--color-brand-orange), var(--color-brand-teal));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.contact-card:hover { box-shadow: var(--shadow-sm); border-color: var(--color-border-strong); }
.contact-card__intro { color: var(--color-text-secondary); margin-bottom: 24px; }
.contact-card__title { margin-bottom: 8px; }
.contact-card--info .contact-card__title { margin-bottom: 24px; }
.form-field { margin-bottom: 20px; }
.form-field label {
    display: block; font-family: var(--font-display); font-weight: 600;
    font-size: .88rem; margin-bottom: 7px; color: var(--color-text);
}
.form-field label .req { color: var(--color-error); }
.form-field label .opt { color: var(--color-text-secondary); font-weight: 400; font-size: .82rem; }
.form-field input, .form-field select, .form-field textarea {
    width: 100%; padding: 13px 15px;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: .95rem;
    background: var(--color-surface); color: var(--color-text);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
    min-height: 48px;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--color-text-secondary); }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
    outline: none; border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px var(--color-brand-teal-soft);
}
.form-field textarea { resize: vertical; min-height: 140px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-hint { display: block; margin-top: 7px; font-size: .82rem; color: var(--color-text-secondary); }
.form-field input[type="file"] { padding: 10px 12px; cursor: pointer; min-height: 48px; }
.form-field input[type="file"]::file-selector-button {
    padding: 9px 16px; margin-right: 12px; border: 0; border-radius: var(--radius-sm);
    background: var(--color-brand-teal); color: #fff;
    font-family: var(--font-body); font-size: .85rem; cursor: pointer;
    transition: background var(--duration-fast);
}
.form-field input[type="file"]::file-selector-button:hover { background: var(--color-brand-teal-hover); }

.contact-info__item {
    display: flex; gap: 14px; padding: 18px 0;
    border-bottom: 1px solid var(--color-border);
}
.contact-info__item:last-child { border-bottom: 0; }
.contact-info__icon {
    width: 46px; height: 46px; border-radius: var(--radius-sm);
    background: var(--color-brand-teal-soft); color: var(--color-brand-teal);
    display: grid; place-items: center; flex-shrink: 0;
}
.contact-info__icon--orange { background: var(--color-brand-apricot-soft); color: var(--color-brand-orange); }
.contact-info__icon--wa { background: var(--color-brand-green-soft); color: var(--color-brand-green); }
.contact-info__icon svg { width: 22px; height: 22px; fill: currentColor; }
.contact-info__label {
    font-size: .76rem; color: var(--color-text-secondary);
    text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.contact-info__value { font-family: var(--font-display); font-weight: 600; color: var(--color-text); font-size: 1rem; }

.alert {
    padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 18px;
    font-size: .92rem; border: 1px solid transparent;
}
.alert--ok { background: var(--color-brand-green-soft); color: var(--color-brand-green); border-color: rgb(35 117 84 / 25%); }
.alert--err { background: #fdecec; color: var(--color-error); border-color: rgb(180 35 24 / 25%); }

/* 同意勾选 + 隐私 */
.form-consent { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
.form-consent input[type="checkbox"] { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--color-brand-orange); flex-shrink: 0; }
.form-consent label { font-size: .86rem; color: var(--color-text-secondary); font-weight: 400; margin: 0; }
.form-consent a { color: var(--color-brand-teal); text-decoration: underline; }

/* ---------- WhatsApp 浮动按钮 ---------- */
.wa-float {
    position: fixed; right: 22px; bottom: 22px; z-index: 800;
    width: 60px; height: 60px; border-radius: 50%; background: #25d366;
    display: grid; place-items: center; color: #fff;
    box-shadow: 0 8px 24px rgb(37 211 102 / 45%);
    transition: transform var(--duration-normal);
}
.wa-float:hover { transform: scale(1.08); color: #fff; }
.wa-float svg { width: 32px; height: 32px; fill: #fff; }
.wa-float__pulse { position: absolute; inset: 0; border-radius: 50%; background: #25d366; opacity: .55; animation: wa-pulse 2.4s 6; z-index: -1; }
@keyframes wa-pulse { 0% { transform: scale(1); opacity: .55; } 70%,100% { transform: scale(1.7); opacity: 0; } }

/* 移动端底部询盘条 (产品详情) */
.inquiry-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 700;
    background: var(--color-surface); border-top: 1px solid var(--color-border);
    box-shadow: 0 -6px 18px rgb(37 51 47 / 8%);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    display: none;
}

/* ---------- Footer ---------- */
.site-footer {
    background: #1f3a36; color: #b9c8c3; padding: 64px 0 0;
}
.footer-grid {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
    gap: 36px; padding-bottom: 48px; border-bottom: 1px solid rgb(255 255 255 / 8%);
}
.footer-col h4 {
    color: #fff; font-size: .98rem; margin-bottom: 18px;
    font-family: var(--font-display); font-weight: 700;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
    color: #b9c8c3; font-size: .9rem;
    transition: color var(--duration-fast), padding-left var(--duration-fast);
}
.footer-col a:hover { color: var(--color-brand-apricot); padding-left: 3px; }
.footer-about p { font-size: .9rem; line-height: 1.7; margin-bottom: 16px; color: #b9c8c3; }
.footer-about .brand { color: #fff; margin-bottom: 16px; }
.footer-about .brand__accent { color: var(--color-brand-apricot); }
.footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding: 22px 0; font-size: .82rem; flex-wrap: wrap; gap: 12px;
}
.footer-bottom a { color: #8fa39e; }
.footer-bottom a:hover { color: #fff; }
.footer-phonebox { display: flex; align-items: center; gap: 15px; margin: 0 0 22px; }
.footer-phonebox__icon {
    width: 48px; height: 48px; display: grid; place-items: center;
    color: var(--color-brand-apricot); background: transparent; flex-shrink: 0;
    transition: color var(--duration-normal), transform var(--duration-normal);
}
.footer-phonebox__icon:hover { color: #fff; transform: scale(1.05); }
.footer-phonebox__text { display: flex; flex-direction: column; line-height: 1.2; }
.footer-phonebox__num {
    color: #fff; font-size: 1.3rem; font-weight: 600;
    font-family: var(--font-display); letter-spacing: .3px;
}
.footer-phonebox__num:hover { color: var(--color-brand-apricot); }
.footer-phonebox__sub { font-size: .82rem; color: var(--color-brand-apricot); margin-top: 3px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact .fc-ico { flex-shrink: 0; margin-top: 3px; color: var(--color-brand-apricot); }
.footer-contact li > a { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact li > a .fc-ico { margin-top: 2px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgb(255 255 255 / 8%); display: grid; place-items: center; color: #fff;
}
.footer-social a:hover { background: var(--color-brand-apricot); }

/* ---------- 全站滚动显现 ---------- */
html.no-js .home-reveal, html.no-js .reveal-section,
html.no-js .home-reveal .card, html.no-js .home-reveal .video-card,
html.no-js .reveal-section .card, html.no-js .reveal-section .video-card { opacity: 1 !important; transform: none !important; }
.home-reveal, .reveal-section { opacity: 0; transform: translateY(22px); transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard); }
.home-reveal.is-visible, .reveal-section.is-visible { opacity: 1; transform: translateY(0); }
.home-reveal .card, .home-reveal .cat-card, .home-reveal .cat-tile, .home-reveal .feature, .home-reveal .step, .home-reveal .page-feature, .home-reveal .video-card, .home-reveal .contact-card, .home-reveal .contact-info__item, .home-reveal .filter-bar a, .home-reveal .detail__hero, .home-reveal .gallery img, .home-reveal .cta-banner,
.reveal-section .card, .reveal-section .cat-card, .reveal-section .cat-tile, .reveal-section .feature, .reveal-section .step, .reveal-section .page-feature, .reveal-section .video-card, .reveal-section .contact-card, .reveal-section .contact-info__item, .reveal-section .filter-bar a, .reveal-section .detail__hero, .reveal-section .gallery img, .reveal-section .cta-banner { transition-delay: calc(var(--reveal-i, 0) * 45ms); }
.home-reveal:not(.is-visible) .card, .home-reveal:not(.is-visible) .cat-card, .home-reveal:not(.is-visible) .cat-tile, .home-reveal:not(.is-visible) .feature, .home-reveal:not(.is-visible) .step, .home-reveal:not(.is-visible) .page-feature, .home-reveal:not(.is-visible) .video-card, .home-reveal:not(.is-visible) .contact-card, .home-reveal:not(.is-visible) .contact-info__item, .home-reveal:not(.is-visible) .filter-bar a, .home-reveal:not(.is-visible) .detail__hero, .home-reveal:not(.is-visible) .gallery img, .home-reveal:not(.is-visible) .cta-banner,
.reveal-section:not(.is-visible) .card, .reveal-section:not(.is-visible) .cat-card, .reveal-section:not(.is-visible) .cat-tile, .reveal-section:not(.is-visible) .feature, .reveal-section:not(.is-visible) .step, .reveal-section:not(.is-visible) .page-feature, .reveal-section:not(.is-visible) .video-card, .reveal-section:not(.is-visible) .contact-card, .reveal-section:not(.is-visible) .contact-info__item, .reveal-section:not(.is-visible) .filter-bar a, .reveal-section:not(.is-visible) .detail__hero, .reveal-section:not(.is-visible) .gallery img, .reveal-section:not(.is-visible) .cta-banner { opacity: 0; transform: translateY(16px); }
.home-reveal.is-visible .card, .home-reveal.is-visible .cat-card, .home-reveal.is-visible .cat-tile, .home-reveal.is-visible .feature, .home-reveal.is-visible .step, .home-reveal.is-visible .page-feature, .home-reveal.is-visible .video-card, .home-reveal.is-visible .contact-card, .home-reveal.is-visible .contact-info__item, .home-reveal.is-visible .filter-bar a, .home-reveal.is-visible .detail__hero, .home-reveal.is-visible .gallery img, .home-reveal.is-visible .cta-banner,
.reveal-section.is-visible .card, .reveal-section.is-visible .cat-card, .reveal-section.is-visible .cat-tile, .reveal-section.is-visible .feature, .reveal-section.is-visible .step, .reveal-section.is-visible .page-feature, .reveal-section.is-visible .video-card, .reveal-section.is-visible .contact-card, .reveal-section.is-visible .contact-info__item, .reveal-section.is-visible .filter-bar a, .reveal-section.is-visible .detail__hero, .reveal-section.is-visible .gallery img, .reveal-section.is-visible .cta-banner { opacity: 1; }

/* ---------- 分页 ---------- */
.pagination { margin-top: 44px; text-align: center; }
.pagination ul.pagination, .pagination > ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }
ul.pagination { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }
.pagination li { margin: 0; padding: 0; list-style: none; }
.pagination a, .pagination span, ul.pagination a, ul.pagination span {
    display: grid; place-items: center; min-width: 42px; height: 42px;
    padding: 0 12px; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); font-size: .92rem; color: var(--color-text-secondary); line-height: 1;
}
.pagination a:hover, ul.pagination a:hover { border-color: var(--color-brand-orange); color: var(--color-brand-orange); text-decoration: none; }
.pagination .active > span, .pagination .active > a, ul.pagination .active > span, ul.pagination .active > a {
    background: var(--color-brand-orange); color: #fff; border-color: var(--color-brand-orange); font-weight: 600;
}
.pagination .disabled > span, .pagination .disabled > a, ul.pagination .disabled > span, ul.pagination .disabled > a { opacity: .4; cursor: not-allowed; }

/* ---------- 空状态 ---------- */
.empty { text-align: center; padding: 80px 20px; color: var(--color-text-secondary); }
.empty__ico { width: 80px; height: 80px; margin: 0 auto 20px; color: var(--color-border-strong); }
.empty h3 { color: var(--color-text); margin-bottom: 10px; }
.empty p { max-width: 460px; margin: 0 auto 24px; }

/* ---------- 404 ---------- */
.error-page {
    min-height: 64vh; display: grid; place-items: center; text-align: center;
    padding: 80px 20px; background: linear-gradient(160deg, var(--color-surface-warm), var(--color-canvas));
}
.error-page__code {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(5rem, 16vw, 11rem); line-height: 1;
    background: linear-gradient(135deg, var(--color-brand-orange), var(--color-brand-apricot));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.error-page h1 { font-size: 1.6rem; margin-bottom: 12px; }
.error-page p { color: var(--color-text-secondary); max-width: 480px; margin: 0 auto 28px; }
.error-page__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- 栏目页 Banner ---------- */
.page-banner {
    background: linear-gradient(135deg, var(--color-surface-warm) 0%, var(--color-brand-apricot-soft) 100%);
    color: var(--color-text); padding: 60px 0 52px;
    position: relative; overflow: hidden; isolation: isolate;
}
.page-banner::before {
    content: ""; position: absolute; right: -40px; bottom: -60px;
    width: 260px; height: 260px; border-radius: 50%;
    background: rgb(244 124 42 / 10%); pointer-events: none;
}
.page-banner .container { position: relative; z-index: 1; }
.page-banner h1 { margin-bottom: 12px; max-width: 820px; }
.page-banner p { color: var(--color-text-secondary); max-width: 680px; font-size: 1.06rem; }
.page-banner p:last-child { margin-bottom: 0; }

/* ---------- 标签筛选 Chip ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.filter-bar a, .filter-bar button {
    padding: 9px 18px; border: 1px solid var(--color-border);
    border-radius: var(--radius-pill); font-size: .88rem;
    color: var(--color-text-secondary); font-weight: 600;
    background: var(--color-surface); cursor: pointer;
    font-family: var(--font-body);
    transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
}
.filter-bar a:hover, .filter-bar button:hover { border-color: var(--color-brand-orange); color: var(--color-brand-orange); }
.filter-bar a.is-active, .filter-bar button.is-active {
    background: var(--color-brand-orange); color: #fff; border-color: var(--color-brand-orange);
}
.filter-bar__n {
    display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 5px;
    background: var(--color-surface-cool); color: var(--color-text-secondary);
    border-radius: var(--radius-pill); font-size: .74rem; font-weight: 700;
}
.filter-bar a.is-active .filter-bar__n, .filter-bar button.is-active .filter-bar__n { background: rgb(255 255 255 / 22%); color: #fff; }

/* ---------- 分类概览卡片 (产品列表页) ---------- */
.cat-overview { padding-top: 0; }
.cat-tile {
    position: relative; display: flex; flex-direction: column; min-height: 260px; color: #fff;
    border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: transform var(--duration-normal) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard),
                border-color var(--duration-normal) var(--ease-standard);
    isolation: isolate;
}
.cat-tile:hover {
    transform: translateY(-5px); box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong); text-decoration: none; color: #fff;
}
.cat-tile::after {
    content: "→"; position: absolute; top: 16px; right: 16px; z-index: 4;
    width: 40px; height: 40px; border-radius: 50%; background: var(--color-brand-orange);
    display: grid; place-items: center; color: #fff; font-weight: 700; box-shadow: var(--shadow-sm);
    transition: transform var(--duration-normal), background var(--duration-normal);
}
.cat-tile:hover::after { transform: translate(2px,-2px) rotate(-12deg); background: var(--color-brand-orange-hover); }
.cat-tile__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--color-surface-warm); }
.cat-tile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(37 51 47 / 90%) 0%, rgb(37 51 47 / 38%) 58%, rgb(37 51 47 / 8%) 100%); }
.cat-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow); }
.cat-tile:hover .cat-tile__media img { transform: scale(1.06); }
.cat-tile__body { position: relative; z-index: 2; margin-top: auto; padding: 22px 20px; display: block; transform: translateY(5px); transition: transform var(--duration-normal); }
.cat-tile:hover .cat-tile__body { transform: translateY(0); }
.cat-tile__body h3 { margin: 0 0 5px; font-size: 1.1rem; color: #fff; }
.cat-tile__count { color: rgb(255 255 255 / 78%); font-size: .82rem; font-weight: 500; white-space: normal; }

/* ---------- 列表头部 ---------- */
.list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
.list-head__count { color: var(--color-text-secondary); font-size: .92rem; font-weight: 500; }
.list-head__sort { display: flex; align-items: center; gap: 10px; }
.list-head__sort label { font-size: .85rem; color: var(--color-text-secondary); }
.list-head__sort select {
    padding: 9px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    font-size: .88rem; background: var(--color-surface); color: var(--color-text); cursor: pointer;
}

/* ---------- 底部 CTA 条 ---------- */
.cta-strip {
    background: linear-gradient(120deg, var(--color-brand-teal) 0%, var(--color-brand-green) 100%);
    color: #fff; position: relative; overflow: hidden;
}
.cta-strip::before {
    content: ""; position: absolute; right: -60px; top: -60px;
    width: 240px; height: 240px; border-radius: 50%;
    background: rgb(244 124 42 / 22%); pointer-events: none;
}
.cta-strip__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; position: relative; z-index: 1; }
.cta-strip h2 { color: #fff; margin: 0 0 6px; font-size: clamp(1.5rem, 3vw, 2rem); }
.cta-strip p { color: rgb(255 255 255 / 88%); margin: 0; max-width: 560px; }
.cta-strip__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-strip .btn--primary { background: #fff; color: var(--color-brand-teal); border-color: #fff; }
.cta-strip .btn--primary:hover { background: var(--color-surface-warm); }

/* ---------- 单页特性网格 ---------- */
.page-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); margin-top: 44px; }
.page-feature {
    position: relative; padding: 28px 24px;
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    background: var(--color-surface); box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: transform var(--duration-normal) var(--ease-standard),
                box-shadow var(--duration-normal), border-color var(--duration-normal);
}
.page-feature::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--color-brand-orange), var(--color-brand-teal));
}
.page-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--color-border-strong); }
.page-feature__icon {
    width: 52px; height: 52px; margin-bottom: 16px; border-radius: var(--radius-md);
    background: var(--color-brand-apricot-soft); color: var(--color-brand-orange);
    display: grid; place-items: center;
}
.page-feature h3 { font-size: 1.08rem; margin-bottom: 8px; }
.page-feature p { color: var(--color-text-secondary); font-size: .92rem; margin: 0; }

/* 注: 旧版 FAQ (.faq__q::after 伪元素画加号 / .faq__a-inner) 已废弃,
   原 data-faq-auto 方案改为结构化模板(faq.html). 现行样式见文末"单页定制"段,
   用真实 <span class="faq__icon"> 避免伪元素与 DOM 元素重复出现两个加号. */

/* ---------- Tabs ---------- */
.tabs__head { display: flex; gap: 4px; border-bottom: 2px solid var(--color-border); margin-bottom: 28px; flex-wrap: wrap; }
.tabs__tab {
    padding: 12px 22px; background: none; border: 0; cursor: pointer;
    font-family: var(--font-display); font-weight: 600; font-size: .95rem;
    color: var(--color-text-secondary); border-bottom: 3px solid transparent;
    margin-bottom: -2px; transition: color var(--duration-fast), border-color var(--duration-fast);
}
.tabs__tab:hover { color: var(--color-brand-orange); }
.tabs__tab.is-active { color: var(--color-brand-orange); border-bottom-color: var(--color-brand-orange); }
.tabs__pane { display: none; }
.tabs__pane.is-active { display: block; }

/* ---------- 后台多语言标签页 ---------- */
.lang-tabs { margin-bottom: 0; }
.lang-tabs__head { display: flex; gap: 0; border-bottom: 1px solid #e8e8e8; margin-bottom: 20px; }
.lang-tabs__btn {
    padding: 10px 20px; background: none; border: 1px solid transparent; cursor: pointer;
    font-weight: 500; color: #6c757d; border-bottom: 0; margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: 8px; font-size: 14px;
}
.lang-tabs__btn:hover { color: #444; }
.lang-tabs__btn.is-active { background: #fff; border-color: #e8e8e8; border-bottom-color: #fff; color: var(--color-brand-orange); font-weight: 600; }
.lang-tabs__dot { width: 8px; height: 8px; border-radius: 50%; }
.lang-tabs__dot--ok { background: var(--color-success); }
.lang-tabs__dot--partial { background: #f0ad4e; }
.lang-tabs__dot--empty { background: #d0d0d0; }
.lang-tabs__pane { display: none; padding-top: 10px; }
.lang-tabs__pane.is-active { display: block; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
    :root { --grid-gap: 1.25rem; }
    .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
    .footer-about { grid-column: 1 / -1; }
    .process-cloud { grid-template-columns: repeat(3, 1fr); }
    .trust-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .video-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .page-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .detail__layout { grid-template-columns: 1fr; }
    /* Journey: 5 列过挤, 改为 3+2 错行网格, 隐藏直线轨道由箭头表达流向 */
    .journey { grid-template-columns: repeat(3, 1fr); gap: var(--space-10) 0; padding-inline: var(--space-5); }
    .journey::before { display: none; }
    .detail__sidebar { position: static; }
    .hero__inner { grid-template-columns: 1fr; gap: 36px; }
    .hero__visual { max-width: 540px; }
}

@media (max-width: 860px) {
    :root { --grid-gap: 1rem; }
    .section { padding-block: var(--space-18); }
    .nav-toggle { display: inline-flex; flex-shrink: 0; }
    .main-nav, .header-tools .lang-switch { display: none; }
    body.nav-open { overflow: hidden; }
    body.nav-open .site-header { z-index: 1300; }
    .main-nav.is-open {
        display: flex !important; position: fixed; top: var(--header-height); left: 0; right: 0;
        width: 100vw; height: calc(100vh - var(--header-height)); height: calc(100dvh - var(--header-height));
        background: linear-gradient(180deg, var(--color-surface), var(--color-surface-warm));
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 16px; overflow-y: auto; z-index: 1200; -webkit-overflow-scrolling: touch;
        box-shadow: var(--shadow-lg);
    }
    .main-nav.is-open .nav-item { display: block; width: 100%; flex: 0 0 auto; }
    .main-nav.is-open .nav-link {
        display: flex; width: 100%; justify-content: space-between;
        padding: 16px 12px; border-bottom: 1px solid var(--color-border);
        border-radius: 0; color: var(--color-text); font-size: 1rem;
    }
    .main-nav.is-open .dropdown {
        position: static; display: block; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: 0; border-radius: 0; background: var(--color-surface-warm);
        padding: 4px 0 4px 16px; min-width: 0; max-width: none;
    }
    .main-nav.is-open .dropdown--mega { min-width: 0; padding: 4px 0 4px 16px; }
    .main-nav.is-open .dropdown__grid { display: block; }
    .main-nav.is-open .dropdown a { color: var(--color-text-secondary); padding: 11px 12px; }
    .main-nav.is-open .dropdown a:hover { background: var(--color-brand-apricot-soft); color: var(--color-brand-orange); }
    .header-tools .lang-switch { display: block; }
    .header-tools .lang-switch__btn { padding: 8px 10px; gap: 4px; }
    .header-tools .lang-switch__btn > span:not(.lang-flag):not(.caret) { display: none; }
    .header-tools { gap: 6px; }
    .header-tools > .btn { padding: 9px 14px; font-size: .82rem; }
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .trust-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .video-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-layout { grid-template-columns: 1fr; }
    .process-cloud { grid-template-columns: repeat(2, 1fr); }
    .hero__inner { padding: 56px 0 64px; }
    /* Journey: 折叠为带左侧轨道的纵向时间轴 */
    .journey {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding: var(--space-6) var(--space-5) var(--space-6) var(--space-10);
    }
    .journey::before {
        display: block;
        left: 49px; right: auto;
        top: calc(var(--space-6) + 40px);
        bottom: calc(var(--space-6) + 40px);
        height: auto; width: 3px;
        background: repeating-linear-gradient(180deg, var(--color-brand-teal) 0 10px, transparent 10px 18px);
    }
    .journey__node { flex-direction: row; align-items: flex-start; text-align: left; gap: var(--space-5); padding: 0; }
    .journey__num { flex: 0 0 auto; }
    .journey__body { margin-top: 0; flex: 1; }
    /* 横向箭头改为轨道上的下向折角箭头 */
    .journey__arrow { top: auto; right: auto; left: 36px; bottom: -28px; transform: rotate(90deg); }
    .journey__node--final .journey__arrow { display: none; }
    .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .inquiry-bar { display: flex; gap: 10px; align-items: center; }
    .inquiry-bar .btn { flex: 1; }
}

@media (max-width: 560px) {
    .container { padding: 0 16px; }
    .section { padding-block: var(--space-14); }
    .page-container { width: min(calc(100% - 2rem), var(--container-max)); }
    .hero__inner { padding: 44px 0 52px; }
    .hero__badge { font-size: .72rem; letter-spacing: .03em; }
    .hero__stats { gap: 14px; margin-top: 36px; }
    .hero__visual-card--tl, .hero__visual-card--br { display: none; }
    .page-banner { padding: 44px 0 40px; }
    .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
    .trust-grid, .feature-grid { grid-template-columns: 1fr; }
    .video-list { grid-template-columns: 1fr; }
    .process-cloud { grid-template-columns: 1fr; }
    .page-feature-grid { grid-template-columns: 1fr; }
    /* Journey: 收紧纵向时间轴 */
    .journey { padding: var(--space-5) var(--space-4) var(--space-5) var(--space-8); }
    .journey::before { left: 37px; }
    .journey__num { width: 64px; height: 64px; font-size: 1.3rem; }
    .journey__arrow { left: 28px; bottom: -22px; }
    .journey__title { font-size: .98rem; }
    .footer-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .contact-card { padding: 24px; }
    .cta-banner, .cta-banner--compact { padding: 36px 22px; }
    .cta-strip__inner { flex-direction: column; align-items: stretch; text-align: center; }
    .gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .home-reveal, .reveal-section,
    .home-reveal:not(.is-visible) .card, .home-reveal:not(.is-visible) .cat-card, .home-reveal:not(.is-visible) .cat-tile, .home-reveal:not(.is-visible) .feature, .home-reveal:not(.is-visible) .step, .home-reveal:not(.is-visible) .page-feature, .home-reveal:not(.is-visible) .video-card, .home-reveal:not(.is-visible) .contact-card, .home-reveal:not(.is-visible) .contact-info__item, .home-reveal:not(.is-visible) .filter-bar a, .home-reveal:not(.is-visible) .detail__hero, .home-reveal:not(.is-visible) .gallery img, .home-reveal:not(.is-visible) .cta-banner,
    .reveal-section:not(.is-visible) .card, .reveal-section:not(.is-visible) .cat-card, .reveal-section:not(.is-visible) .cat-tile, .reveal-section:not(.is-visible) .feature, .reveal-section:not(.is-visible) .step, .reveal-section:not(.is-visible) .page-feature, .reveal-section:not(.is-visible) .video-card, .reveal-section:not(.is-visible) .contact-card, .reveal-section:not(.is-visible) .contact-info__item, .reveal-section:not(.is-visible) .filter-bar a, .reveal-section:not(.is-visible) .detail__hero, .reveal-section:not(.is-visible) .gallery img, .reveal-section:not(.is-visible) .cta-banner { opacity: 1; transform: none; }
    /* Journey: 去掉 hover 上浮动效, 仅保留颜色变化 */
    .journey__num, .journey__node:hover .journey__num { transform: none; }
}

/* 移动端安全兜底: 长 section 不因 IntersectionObserver 延迟导致空白 */
@media (max-width: 860px) {
    .home-reveal, .reveal-section { opacity: 1 !important; transform: none !important; }
    .home-reveal:not(.is-visible) .card, .home-reveal:not(.is-visible) .video-card, .home-reveal:not(.is-visible) .cat-card, .home-reveal:not(.is-visible) .feature, .home-reveal:not(.is-visible) .step, .home-reveal:not(.is-visible) .cta-banner,
    .reveal-section:not(.is-visible) .card, .reveal-section:not(.is-visible) .video-card, .reveal-section:not(.is-visible) .cat-card, .reveal-section:not(.is-visible) .feature, .reveal-section:not(.is-visible) .step, .reveal-section:not(.is-visible) .cta-banner { opacity: 1 !important; transform: none !important; }
}

/* =========================================================================
   Hero 沉浸式全屏轮播图 (hero-carousel)
   复用品牌令牌：暖橙/杏色/Manrope/胶囊圆角/缓动函数。
   高度策略 = 视口高度 - sticky header 高度，填满首屏实现沉浸感。
   ========================================================================= */
.hero-carousel {
    --slide-duration: 900ms;
    --autoplay-ms: 6000;
    position: relative;
    width: 100%;
    /* 沉浸式：轮播图上移到 sticky header 后方，高度补回 header 高度，铺满整个视口 */
    margin-top: calc(var(--header-height) * -1);
    min-height: clamp(520px, 100vh, 1080px);
    height: 100vh;
    height: 100dvh; /* dvh 兜底，解决移动端地址栏 */
    overflow: hidden;
    background: #141c1a;
    isolation: isolate;
}
.hero-carousel:focus-visible { outline: none; }
.hero-carousel:focus-visible .hero-carousel__count { opacity: 1; }

/* ---------- 单张幻灯片：绝对叠放，opacity 淡入淡出 ---------- */
.hero-carousel .slide {
    position: absolute; inset: 0; z-index: 1;
    margin: 0;
    opacity: 0; visibility: hidden;
    transition: opacity var(--slide-duration) var(--ease-emphasized),
                visibility 0s linear var(--slide-duration);
    will-change: opacity;
}
.hero-carousel .slide.is-active {
    opacity: 1; visibility: visible; z-index: 2;
    transition: opacity var(--slide-duration) var(--ease-emphasized), visibility 0s;
}

/* ---------- 背景图 + Ken Burns 呼吸缩放（仅活动幻灯片）---------- */
.hero-carousel .slide__media { position: absolute; inset: 0; overflow: hidden; background: #141c1a; }
.hero-carousel .slide__media img {
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.02); will-change: transform;
}
.hero-carousel .slide.is-active .slide__media img { animation: heroKenBurns 30s linear forwards; }
@keyframes heroKenBurns {
    0%   { transform: scale(1.02) translate(0, 0); }
    100% { transform: scale(1.14) translate(-1.2%, -1%); }
}

/* ---------- 双层暗色渐变遮罩（保证白色文字 WCAG AA 对比度）---------- */
.hero-carousel .slide__overlay {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(to top right,
            rgb(20 28 26 / .82) 0%, rgb(20 28 26 / .55) 30%,
            rgb(20 28 26 / .22) 58%, rgb(20 28 26 / .08) 100%),
        linear-gradient(to top, rgb(20 28 26 / .55) 0%, transparent 45%);
}

/* ---------- 文字区：左下定位，最大宽 720px ---------- */
.hero-carousel .slide__content {
    position: absolute; left: 0; bottom: 0; z-index: 3; width: 100%;
    padding: 0 var(--container-pad-x, clamp(20px, 6vw, 90px)) clamp(96px, 13vh, 156px);
    pointer-events: none;
}
.hero-carousel .slide__inner { max-width: 720px; pointer-events: auto; }

.hero-carousel .slide__eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--font-display);
    font-size: clamp(.75rem, 1.1vw, .85rem);
    font-weight: 700; text-transform: uppercase; letter-spacing: .22em;
    color: var(--color-brand-apricot); margin: 0 0 20px;
}
.hero-carousel .slide__eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--color-brand-apricot); flex-shrink: 0; }

.hero-carousel .slide__title {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(2.1rem, 5.2vw, 4.25rem);
    line-height: 1.06; letter-spacing: -.035em; color: #fff;
    margin: 0 0 22px; text-wrap: balance;
    text-shadow: 0 2px 30px rgb(0 0 0 / 25%);
}
.hero-carousel .slide__title b,
.hero-carousel .slide__title strong { color: var(--color-brand-apricot); font-weight: 800; }

.hero-carousel .slide__subtitle {
    font-size: clamp(1rem, 1.7vw, 1.25rem); line-height: 1.6;
    color: rgb(255 255 255 / .88); margin: 0 0 34px; max-width: 600px;
    text-shadow: 0 1px 12px rgb(0 0 0 / 30%);
}

/* ---------- 按钮：深色背景上的白色变体 ---------- */
.hero-carousel .slide__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-carousel .btn { min-height: 52px; padding: 15px 32px; font-size: .98rem; border-radius: var(--radius-pill); }
.hero-carousel .btn--primary {
    border-color: var(--color-brand-orange);
    box-shadow: 0 8px 24px rgb(196 81 27 / .45);
}
.hero-carousel .btn--primary:hover { box-shadow: 0 14px 32px rgb(196 81 27 / .55); transform: translateY(-2px); }
.hero-carousel .btn--outline {
    background: rgb(255 255 255 / .08); color: #fff;
    border-color: rgb(255 255 255 / .55);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.hero-carousel .btn--outline:hover {
    background: #fff; color: var(--color-brand-orange); border-color: #fff;
    transform: translateY(-2px);
}

/* ---------- 文字 stagger 渐入（eyebrow → title → subtitle → actions）---------- */
.hero-carousel .slide [data-anim] { opacity: 0; transform: translateY(26px); }
.hero-carousel .slide.is-active [data-anim] { animation: heroSlideTextIn .8s var(--ease-emphasized) forwards; }
.hero-carousel .slide.is-active [data-anim="eyebrow"]  { animation-delay: .25s; }
.hero-carousel .slide.is-active [data-anim="title"]    { animation-delay: .40s; }
.hero-carousel .slide.is-active [data-anim="subtitle"] { animation-delay: .55s; }
.hero-carousel .slide.is-active [data-anim="actions"]  { animation-delay: .70s; }
@keyframes heroSlideTextIn {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 左右箭头：垂直居中圆形半透明 ---------- */
.hero-carousel__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
    width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; cursor: pointer;
    background: rgb(255 255 255 / .12);
    border: 1px solid rgb(255 255 255 / .25);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: background var(--duration-normal) var(--ease-standard),
                transform var(--duration-normal) var(--ease-standard),
                opacity var(--duration-normal) var(--ease-standard);
}
.hero-carousel__arrow svg { width: 22px; height: 22px; }
.hero-carousel__arrow:hover { background: rgb(255 255 255 / .26); transform: translateY(-50%) scale(1.06); }
.hero-carousel__arrow:active { transform: translateY(-50%) scale(1); }
.hero-carousel__arrow--prev { left: clamp(16px, 3vw, 36px); }
.hero-carousel__arrow--next { right: clamp(16px, 3vw, 36px); }

/* ---------- 底部胶囊指示器：当前项加宽变杏色 ---------- */
.hero-carousel__dots {
    position: absolute; left: 50%; bottom: clamp(28px, 5vh, 52px);
    transform: translateX(-50%); z-index: 20;
    display: flex; gap: 12px; padding: 10px 16px;
    background: rgb(255 255 255 / .10);
    border: 1px solid rgb(255 255 255 / .14);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero-carousel__dot {
    width: 28px; height: 4px; padding: 0; border-radius: var(--radius-pill);
    background: rgb(255 255 255 / .35); border: none; cursor: pointer;
    transition: width .4s var(--ease-emphasized), background var(--duration-normal) var(--ease-standard);
}
.hero-carousel__dot:hover { background: rgb(255 255 255 / .55); }
.hero-carousel__dot.is-active { width: 56px; background: var(--color-brand-apricot); }

/* ---------- 自动播放进度条 ---------- */
.hero-carousel__progress {
    position: absolute; top: 0; left: 0; z-index: 30;
    height: 3px; width: 0%; pointer-events: none;
    background: linear-gradient(90deg, var(--color-brand-apricot), var(--color-brand-orange));
    box-shadow: 0 0 10px rgb(244 124 42 / .6);
    transition: none;
}

/* ---------- 计数 01 / 03 ---------- */
.hero-carousel__count {
    position: absolute; right: clamp(20px, 6vw, 90px);
    bottom: clamp(28px, 5vh, 52px); z-index: 20;
    font-family: var(--font-display); font-size: .9rem; font-weight: 600;
    color: rgb(255 255 255 / .7); letter-spacing: .08em;
}
.hero-carousel__count b { color: #fff; font-size: 1.4rem; font-weight: 800; margin-right: 2px; }

/* ---------- 响应式：平板文字居中 + 隐副标题 ---------- */
@media (max-width: 860px) {
    .hero-carousel { min-height: clamp(480px, 80vh, 700px); }
    .hero-carousel .slide__content { bottom: auto; top: 50%; transform: translateY(-46%); padding: 0 clamp(24px, 7vw, 48px); }
    .hero-carousel .slide__inner { max-width: 100%; text-align: center; margin: 0 auto; }
    .hero-carousel .slide__eyebrow,
    .hero-carousel .slide__actions { justify-content: center; }
    .hero-carousel .slide__subtitle { display: none; }
    .hero-carousel__count { display: none; }
}
/* ---------- 响应式：移动端按钮全宽堆叠 ---------- */
@media (max-width: 560px) {
    .hero-carousel .slide__title { font-size: clamp(1.8rem, 8vw, 2.6rem); }
    .hero-carousel .slide__eyebrow { font-size: .72rem; letter-spacing: .16em; }
    .hero-carousel .btn { width: 100%; }
    .hero-carousel .slide__actions { flex-direction: column; align-items: stretch; }
    .hero-carousel__arrow { width: 40px; height: 40px; top: auto; bottom: 96px; transform: none; }
    .hero-carousel__arrow:hover { transform: scale(1.06); }
    .hero-carousel__arrow--prev { left: 14px; }
    .hero-carousel__arrow--next { right: 14px; }
    .hero-carousel__dot { width: 22px; }
    .hero-carousel__dot.is-active { width: 44px; }
}

/* ---------- 无障碍：reduced-motion 关闭 Ken Burns + 文字动画 ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero-carousel .slide.is-active .slide__media img { animation: none; }
    .hero-carousel .slide [data-anim] { opacity: 1; transform: none; animation: none !important; }
    .hero-carousel .slide { transition-duration: 200ms; }
    .hero-carousel__dot { transition: none; }
}

/* ======================================================================
   图片放大查看 (Lightbox) — 无依赖, 配合 jcxs.js initLightbox()
   ====================================================================== */
.lightbox {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 18, 22, .92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.lightbox[hidden] { display: none; }
.lightbox__img {
    max-width: 90vw; max-height: 86vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    cursor: zoom-out;
}
.lightbox__close,
.lightbox__nav {
    position: absolute; z-index: 2001;
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff; font-size: 2rem; line-height: 1;
    cursor: pointer;
    transition: background .2s, transform .2s;
    -webkit-appearance: none;
}
.lightbox__close:hover,
.lightbox__nav:hover {
    background: rgba(255, 255, 255, .28);
    transform: scale(1.06);
}
.lightbox__close { top: 24px; right: 24px; font-size: 2.4rem; }
.lightbox__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__nav--next:hover { transform: translateY(-50%) scale(1.06); }
@media (max-width: 560px) {
    .lightbox__close, .lightbox__nav { width: 42px; height: 42px; font-size: 1.6rem; }
    .lightbox__close { top: 14px; right: 14px; }
    .lightbox__nav--prev { left: 10px; }
    .lightbox__nav--next { right: 10px; }
    .lightbox__img { max-width: 96vw; max-height: 80vh; }
}

/* ======================================================================
   社交分享 — 配合 jcxs.js initShare()
   ====================================================================== */
.share {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-top: 24px; padding-top: 20px;
    border-top: 1px solid var(--color-border, #e6e1d8);
}
.share__label {
    font-size: .85rem; font-weight: 600;
    color: var(--color-text-secondary, #6b7785);
    letter-spacing: .02em;
}
.share__btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid var(--color-border, #e6e1d8);
    border-radius: 50%;
    background: #fff;
    color: var(--color-text-secondary, #6b7785);
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
    -webkit-appearance: none;
}
.share__btn svg { width: 18px; height: 18px; }
.share__btn:hover {
    background: var(--color-brand-orange, #ff6a3b);
    color: #fff;
    border-color: var(--color-brand-orange, #ff6a3b);
    transform: translateY(-2px);
}
.share__btn--copy.is-copied {
    background: var(--color-brand-teal, #15857a);
    color: #fff; border-color: var(--color-brand-teal, #15857a);
}
.share__tip {
    position: absolute; bottom: 115%; left: 50%; transform: translateX(-50%);
    white-space: nowrap; padding: 4px 10px;
    background: #1a2a30; color: #fff; font-size: .72rem;
    border-radius: 4px; pointer-events: none;
}

/* ======================================================================
   联系页地图
   ====================================================================== */
.contact-map {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--color-border, #e6e1d8);
    box-shadow: 0 10px 30px rgba(26, 42, 48, .08);
    line-height: 0;
}
.contact-map iframe { display: block; }

/* ======================================================================
   FAQ 折叠面板 — 配合 jcxs.js (data-faq-auto 转换 + Accordion)
   ====================================================================== */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq__item {
    border: 1px solid var(--color-border, #e6e1d8);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.faq__item.is-open {
    border-color: var(--color-brand-teal, #15857a);
    box-shadow: 0 6px 18px rgba(21, 133, 122, .1);
}
.faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%;
    padding: 18px 22px;
    background: transparent; border: 0;
    font-size: 1.02rem; font-weight: 600; text-align: left;
    color: var(--color-text, #1a2a30);
    cursor: pointer;
    -webkit-appearance: none;
}
.faq__q-text { flex: 1; }
.faq__icon {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--color-brand-apricot, #ffd9b3);
    color: var(--color-brand-orange, #ff6a3b);
    font-size: 1.1rem; font-weight: 700; line-height: 1;
    transition: transform .25s, background .2s;
}
.faq__item.is-open .faq__icon { transform: rotate(45deg); background: var(--color-brand-orange, #ff6a3b); color: #fff; }
.faq__a {
    max-height: 0; overflow: hidden;
    padding: 0 22px;
    transition: max-height .3s ease, padding .3s ease;
}
.faq__a > *:last-child { margin-bottom: 0; }
.faq__item.is-open .faq__a { padding-bottom: 20px; }

/* ==================================================================
   单页定制样式 (company / history / honors / process / faq / aftersales)
   复用根设计令牌, 每页独立版式, 暖色调 + 萌系绿
   ================================================================== */

/* ---------- 通用: 大图 hero (非首页单页封面) ---------- */
.page-hero {
    position: relative;
    overflow: hidden;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    min-height: clamp(340px, 46vw, 480px);
    display: flex;
    align-items: flex-end;
    color: #fff;
    isolation: isolate;
}
.page-hero__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
    will-change: transform;
}
.page-hero::after {
    content: "";
    position: absolute; inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgb(20 35 30 / 18%) 0%, rgb(20 35 30 / 62%) 100%);
}
.page-hero__inner {
    width: min(calc(100% - 4rem), var(--container));
    margin: 0 auto;
    padding: 0 24px var(--space-18);
}
.page-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display);
    font-weight: 700; text-transform: uppercase;
    letter-spacing: .14em; font-size: .78rem;
    color: var(--color-brand-apricot);
    background: rgb(20 35 30 / 38%);
    padding: 6px 14px; border-radius: var(--radius-pill);
    margin-bottom: 14px;
    backdrop-filter: blur(6px);
}
.page-hero h1 { color: #fff; max-width: 760px; margin-bottom: 12px; }
.page-hero__lead { color: rgb(255 255 255 / 90%); max-width: 620px; font-size: 1.06rem; }
@media (max-width: 640px) { .page-hero { border-radius: 0 0 var(--radius-lg) var(--radius-lg); } }

/* ---------- company: 统计计数 + 价值卡 ---------- */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-top: calc(var(--space-16) * -1);
    position: relative; z-index: 2;
}
.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-5);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: transform var(--duration-normal) var(--ease-emphasized), box-shadow var(--duration-normal);
}
.stat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.stat-card__num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1;
    color: var(--color-brand-orange);
    letter-spacing: -.02em;
}
.stat-card__num small { font-size: 1.3rem; font-weight: 700; }
.stat-card__label {
    margin-top: 8px;
    color: var(--color-text-secondary);
    font-size: .92rem;
    font-weight: 600;
}
@media (max-width: 760px) {
    .stat-strip { grid-template-columns: repeat(2, 1fr); }
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
.value-card {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-10) var(--space-6) var(--space-8);
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: transform var(--duration-normal) var(--ease-emphasized), box-shadow var(--duration-normal);
}
.value-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--color-brand-orange), var(--color-brand-apricot));
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--duration-slow) var(--ease-emphasized);
}
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.value-card:hover::before { transform: scaleX(1); }
.value-card__icon {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    background: var(--color-brand-apricot-soft);
    color: var(--color-brand-orange);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
}
.value-card h3 { margin-bottom: 10px; }
.value-card p { color: var(--color-text-secondary); margin: 0; }
@media (max-width: 860px) { .value-grid { grid-template-columns: 1fr; } }

/* ---------- history: 垂直时间轴 ---------- */
.timeline {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 23px; top: 8px; bottom: 8px;
    width: 3px;
    background: linear-gradient(180deg, var(--color-brand-orange) 0%, var(--color-brand-teal) 100%);
    border-radius: 3px;
    transform: scaleY(0); transform-origin: top;
    transition: transform 1.1s var(--ease-emphasized);
}
.timeline.is-visible::before { transform: scaleY(1); }
.timeline__item {
    position: relative;
    padding-left: 64px;
    padding-bottom: var(--space-12);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
    position: absolute; left: 12px; top: 4px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 3px solid var(--color-brand-orange);
    box-shadow: 0 0 0 5px var(--color-brand-apricot-soft);
    z-index: 1;
}
.timeline__item:nth-child(even) .timeline__dot { border-color: var(--color-brand-teal); box-shadow: 0 0 0 5px var(--color-brand-teal-soft); }
.timeline__year {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--color-brand-orange);
    margin-bottom: 6px;
    letter-spacing: -.01em;
}
.timeline__item:nth-child(even) .timeline__year { color: var(--color-brand-teal); }
.timeline__body {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-normal) var(--ease-emphasized), box-shadow var(--duration-normal);
}
.timeline__body:hover { transform: translateX(6px); box-shadow: var(--shadow-md); }
.timeline__body h3 { margin-bottom: 8px; }
.timeline__body p { margin: 0; color: var(--color-text-secondary); }
@media (max-width: 640px) {
    .timeline::before { left: 15px; }
    .timeline__item { padding-left: 48px; }
    .timeline__dot { left: 4px; }
}

/* ---------- honors: 认证卡片墙 ---------- */
.cert-wall {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
.cert-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-10) var(--space-6);
    text-align: center;
    overflow: hidden;
    transition: transform var(--duration-normal) var(--ease-emphasized), box-shadow var(--duration-normal), border-color var(--duration-normal);
}
.cert-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-brand-apricot);
}
.cert-card__seal {
    width: 84px; height: 84px;
    margin: 0 auto var(--space-5);
    display: grid; place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--color-brand-apricot-soft), var(--color-surface-warm));
    color: var(--color-brand-orange);
    border: 2px dashed var(--color-brand-apricot);
    transition: transform var(--duration-slow) var(--ease-emphasized);
}
.cert-card:hover .cert-card__seal { transform: rotate(-8deg) scale(1.05); }
.cert-card__code {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .08em;
    color: var(--color-brand-teal);
    background: var(--color-brand-teal-soft);
    padding: 4px 12px; border-radius: var(--radius-pill);
    margin-bottom: 12px;
}
.cert-card h3 { margin-bottom: 8px; font-size: 1.15rem; }
.cert-card p { color: var(--color-text-secondary); margin: 0; font-size: .94rem; }
@media (max-width: 860px) { .cert-wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .cert-wall { grid-template-columns: 1fr; } }

/* ---------- process: 步骤进度 ---------- */
.process-rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-5);
}
.process-rail::before {
    content: "";
    position: absolute;
    top: 36px; left: 10%; right: 10%;
    height: 3px;
    background: var(--color-border);
    z-index: 0;
}
.process-rail__progress {
    position: absolute;
    top: 36px; left: 10%;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--color-brand-orange), var(--color-brand-apricot));
    border-radius: 3px;
    z-index: 1;
    /* 进入视口后一次性流到 80% (留出末端给最后圆点), 由 .is-active 驱动 */
    transition: width 1.6s var(--ease-emphasized);
}
.process-rail.is-active .process-rail__progress { width: 80%; }
.process-step {
    position: relative; z-index: 2;
    text-align: center;
}
.process-step__index {
    width: 72px; height: 72px;
    margin: 0 auto var(--space-5);
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-border-strong);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.75rem;
    color: var(--color-text-secondary);
    /* 入场前轻微缩小淡出, 等 .is-active 唤起后随 delay 依次点亮 */
    opacity: .45;
    transform: scale(.9);
    transition: opacity var(--duration-slow) var(--ease-emphasized),
                transform var(--duration-slow) var(--ease-emphasized),
                background var(--duration-slow) var(--ease-emphasized),
                border-color var(--duration-slow) var(--ease-emphasized),
                color var(--duration-slow) var(--ease-emphasized),
                box-shadow var(--duration-slow) var(--ease-emphasized);
}
/* 圆点依序点亮: 5 个步骤各延后一点, 节奏与进度条流动吻合 (CSS 控制, 无 JS 时序干预) */
.process-rail.is-active .process-step:nth-child(1) .process-step__index { transition-delay: 0s, 0s, 0s, 0s, 0s, 0s; }
.process-rail.is-active .process-step:nth-child(2) .process-step__index { transition-delay: .28s, .28s, .28s, .28s, .28s, .28s; }
.process-rail.is-active .process-step:nth-child(3) .process-step__index { transition-delay: .56s, .56s, .56s, .56s, .56s, .56s; }
.process-rail.is-active .process-step:nth-child(4) .process-step__index { transition-delay: .84s, .84s, .84s, .84s, .84s, .84s; }
.process-rail.is-active .process-step:nth-child(5) .process-step__index { transition-delay: 1.12s, 1.12s, 1.12s, 1.12s, 1.12s, 1.12s; }
.process-rail.is-active .process-step__index {
    opacity: 1;
    transform: scale(1);
    background: linear-gradient(135deg, var(--color-brand-orange), var(--color-brand-apricot));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px rgb(247 124 42 / 36%);
}
/* 兼容旧 .process-step.is-active 写法 (若有遗留) */
.process-step.is-active .process-step__index {
    opacity: 1; transform: scale(1);
    background: linear-gradient(135deg, var(--color-brand-orange), var(--color-brand-apricot));
    border-color: transparent; color: #fff;
    box-shadow: 0 8px 20px rgb(247 124 42 / 36%);
}
.process-step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.process-step p { color: var(--color-text-secondary); font-size: .9rem; margin: 0; }
@media (max-width: 860px) {
    .process-rail { grid-template-columns: 1fr; gap: var(--space-8); }
    .process-rail::before, .process-rail__progress { display: none; }
    .process-step { text-align: left; display: grid; grid-template-columns: 72px 1fr; gap: var(--space-5); align-items: center; }
}

/* ---------- faq 增强: 分类胶囊 ---------- */
.faq-cats {
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: center;
    margin-bottom: var(--space-10);
}
.faq-cats__chip {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    font-weight: 600; font-size: .92rem;
    cursor: pointer;
    transition: all var(--duration-normal);
}
.faq-cats__chip:hover { border-color: var(--color-brand-apricot); color: var(--color-brand-orange); }
.faq-cats__chip.is-active {
    background: var(--color-brand-orange);
    border-color: var(--color-brand-orange);
    color: #fff;
}
.faq-list { max-width: 820px; margin: 0 auto; }

/* ---------- aftersales: 三步保障 + 对比表 ---------- */
.guarantee-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
.guarantee-card {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-10) var(--space-6);
    border-top: 4px solid var(--color-brand-teal);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-normal) var(--ease-emphasized), box-shadow var(--duration-normal);
}
.guarantee-card:nth-child(2) { border-top-color: var(--color-brand-orange); }
.guarantee-card:nth-child(3) { border-top-color: var(--color-brand-green); }
.guarantee-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.guarantee-card__num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 3.5rem;
    line-height: 1;
    color: var(--color-border);
    margin-bottom: var(--space-4);
}
.guarantee-card h3 { margin-bottom: 10px; }
.guarantee-card p { color: var(--color-text-secondary); margin: 0; }
@media (max-width: 860px) { .guarantee-row { grid-template-columns: 1fr; } }

.compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.compare-table th, .compare-table td {
    padding: var(--space-4) var(--space-5);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.compare-table thead th {
    background: var(--color-surface-cool);
    font-family: var(--font-display);
    color: var(--color-text);
}
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table td:first-child { font-weight: 600; }
.compare-table .ico-yes { color: var(--color-brand-green); font-weight: 700; }
.compare-table .ico-no { color: var(--color-text-secondary); opacity: .5; }
.compare-table .col-highlight { background: var(--color-brand-apricot-soft); }

/* ---------- reveal 增强: 数字/卡片渐显入场 ---------- */
[data-count] { font-variant-numeric: tabular-nums; }