/* ============================================================
   common.css — L3 消费品/贸易主题 共享样式
   全站复用: token / reset / header / footer / 卡片 / 按钮 / 表单 / 通用组件 / 动效
   页面专属样式(hero/各 section 布局)放各页自己的 <style> 或 page css
   对齐 DESIGN-SYSTEM.md
   ============================================================ */

/* ---- 设计 token §1-3 (放 :root, header/footer 也能取 §9.1) ---- */
:root{
  --bg:        #FBFAF7;
  --bg-alt:    #F2EFE9;
  --surface:   #FFFFFF;
  --ink:       #1A1A1A;
  --ink-soft:  #6B6560;
  --line:      #E5E0D8;
  --brand:     var(--primary-color, #3D5A3D);
  --brand-ink: #2E3A2C;
  --dark:      #22261F;

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif;
  --fs-hero: clamp(36px, 4.6vw, 64px);
  --fs-h2:   clamp(28px, 4vw, 48px);
  --fs-h3:   clamp(18px, 2vw, 22px);
  --fs-body: clamp(15px, 1.2vw, 17px);
  --fs-small: 13px;

  --section-y: clamp(80px, 12vh, 160px);
  --wrap: 1600px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* ---- 全局 reset §9.1 ---- */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img{ display: block; max-width: 100%; }
a{ color: inherit; }

.wrap{ max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.section{ padding-block: var(--section-y); }
.section--alt{ background: var(--bg-alt); }
.section--dark{ background: var(--dark); color: var(--bg); }

/* ---- eyebrow / 标题 / lead §2 ---- */
.eyebrow{ font-size: var(--fs-small); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); margin: 0 0 16px; }
.section--dark .eyebrow{ color: #A9C0A0; }
h1,h2,h3{ font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin: 0; }
.h1{ font-size: clamp(34px,5vw,60px); }
.h2{ font-size: var(--fs-h2); }
.h3{ font-size: var(--fs-h3); letter-spacing: -.01em; }
.lead{ color: var(--ink-soft); max-width: 60ch; }
.section--dark .lead{ color: #C9C4BC; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.ph{ background: linear-gradient(135deg,#DED8CE,#EDE9E1); color:#9a938a; display:grid; place-items:center; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }

/* ---- 按钮 §4 ---- */
.btn{ display: inline-block; padding: 16px 32px; border-radius: 4px; font-weight: 600; font-size: 15px; text-decoration: none; letter-spacing: .01em; transition: transform .2s ease, background .2s ease, color .2s ease; cursor: pointer; border: 1px solid transparent; }
.btn--primary{ background: var(--brand); color: #fff; }
.btn--primary:hover{ background: var(--brand-ink); transform: translateY(-1px); }
.btn--ghost{ background: transparent; border-color: currentColor; color: var(--ink); }
.btn--ghost:hover{ background: var(--ink); color: var(--bg); }
.section--dark .btn--ghost{ color: var(--bg); }
.section--dark .btn--ghost:hover{ background: var(--bg); color: var(--ink); }

/* ---- 文字链接 §4 ---- */
.link{ position: relative; text-decoration: none; font-weight: 600; color: var(--ink); padding-bottom: 2px; }
.link::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background: currentColor; transition: width .3s ease; }
.link:hover::after{ width:100%; }
.link--brand{ color: var(--brand); }
.section--dark .link, .service__item .link{ color:#E8E4DC; }
.section--dark .link--brand{ color:#A9C0A0; }

/* ---- section 头部 ---- */
.sec-head{ max-width: 720px; margin-bottom: 56px; }
.sec-head--center{ margin-inline: auto; text-align: center; }
.sec-head--split{ display:flex; justify-content: space-between; align-items: end; gap: 32px; max-width: none; }

/* ============================================================
   Header §4 — 双层 (顶栏 + 主导航)
   ============================================================ */
.header{ position: sticky; top: 0; z-index: 50; }
.topbar{ background: var(--dark); color: var(--bg); font-size: 13px; border-top: 3px solid var(--brand); }
.topbar__inner{ display:flex; align-items:center; justify-content: space-between; height: 42px; gap: 24px; }
.topbar__contact{ display:flex; align-items:center; gap: 24px; }
.topbar__contact a{ color:#C9C4BC; text-decoration:none; display:inline-flex; align-items:center; gap:7px; letter-spacing:.02em; transition:color .2s; }
.topbar__contact a:hover{ color:#fff; }
.topbar__contact svg{ width:14px; height:14px; flex:none; }
.topbar__right{ display:flex; align-items:center; gap: 18px; }
.topbar__social{ display:flex; gap: 12px; }
.topbar__social a{ color:#B7B2AA; display:grid; place-items:center; transition:color .2s; }
.topbar__social a:hover{ color:#fff; }
.topbar__social svg{ width:16px; height:16px; }
.topbar__sep{ width:1px; height:16px; background: rgba(255,255,255,.18); }
.topbar__search{ background:transparent; border:0; color:#B7B2AA; cursor:pointer; padding:4px; display:grid; place-items:center; transition:color .2s; }
.topbar__search:hover{ color:#fff; }
.topbar__search svg{ width:17px; height:17px; }
.nav{ position:relative; background: rgba(251,250,247,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav__inner{ display:flex; align-items:center; justify-content: space-between; height: 72px; }
.nav__logo{ font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.01em; text-decoration:none; color: var(--ink); }
.nav__logo span{ color: var(--brand); }
.nav__menu{ display:flex; align-items:center; gap: 34px; list-style:none; margin:0; padding:0; }
.nav__menu > li{ display:flex; align-items:center; }
.nav__menu a{ position:relative; display:inline-flex; align-items:center; gap:5px; text-decoration:none; font-weight:500; font-size:15px; letter-spacing:.01em; color: var(--ink); transition: color .2s; padding-block: 6px; }
.nav__menu a::after{ content:""; position:absolute; left:50%; bottom:0; width:0; height:2px; background: var(--brand); transform:translateX(-50%); transition: width .3s ease; }
.nav__menu a:hover, .nav__menu a[aria-current]{ color: var(--brand); }
.nav__menu a:hover::after, .nav__menu a[aria-current]::after{ width:100%; }
.nav__cta .btn{ padding: 11px 22px; font-size: 14px; }

/* ---- 导航下拉 / 超级导航 §13 ---- */
.nav__menu li{ position: relative; }
.drop-ic{ width:12px; height:12px; transition: transform .3s; opacity:.6; }
.has-drop:hover .drop-ic{ transform: rotate(180deg); }
/* 通用下拉面板 */
.drop{ position:absolute; top:100%; left:0; min-width:220px; background:var(--surface); border:1px solid var(--line); border-top:2px solid var(--brand); border-radius:0 0 8px 8px; box-shadow:0 20px 40px rgba(0,0,0,.08); padding:12px; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease, visibility .25s; z-index:60; }
.has-drop:hover .drop, .has-drop:focus-within .drop{ opacity:1; visibility:visible; transform:translateY(0); }
.drop a{ display:block; padding:11px 14px; border-radius:5px; font-size:14px; color:var(--ink-soft)!important; text-decoration:none; transition: background .2s, color .2s; }
.drop a::after{ display:none; } /* 去掉下划线动画伪元素 */
.drop a:hover{ background:var(--bg-alt); color:var(--brand)!important; }
/* 超级导航 (products 全宽, 三栏级联: 一级 | 二级 | 单图) */
.nav__menu li.has-mega{ position:static; }  /* 优先级须高于 .nav__menu li{position:relative}, 让 mega 相对 .nav 全宽定位 */
.mega{ position:absolute; left:0; right:0; top:100%; width:100%; background:var(--surface); border-top:2px solid var(--brand); border-bottom:1px solid var(--line); box-shadow:0 24px 48px rgba(0,0,0,.1); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease, visibility .25s; z-index:59; }
.has-mega:hover .mega, .has-mega:focus-within .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega__inner{ max-width:var(--wrap); margin:0 auto; padding:32px var(--gutter) 38px; display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:40px; }
/* 一级分类列 */
.mega__cats{ display:flex; flex-direction:column; gap:2px; }
.mega__cats > a{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:6px; font-family:var(--font-display); font-size:16px; color:var(--ink)!important; text-decoration:none; transition:background .2s, color .2s; }
.mega__cats > a::after{ display:none; }
.mega__cats > a svg{ width:15px; height:15px; opacity:0; transform:translateX(-4px); transition:.25s; }
.mega__cats > a:hover, .mega__cats > a.is-active{ background:var(--bg-alt); color:var(--brand)!important; }
.mega__cats > a:hover svg, .mega__cats > a.is-active svg{ opacity:1; transform:translateX(0); }
/* 二级子分类列 (随一级切换) */
.mega__subs{ display:none; flex-direction:column; gap:4px; align-content:start; border-left:1px solid var(--line); padding-left:36px; }
.mega__subs.is-shown{ display:flex; }
.mega__subs h5{ font-family:var(--font-body); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 8px; }
.mega__subs a{ padding:9px 0; font-size:14px; color:var(--ink-soft)!important; text-decoration:none; transition:color .2s, padding-left .2s; }
.mega__subs a::after{ display:none; }
.mega__subs a:hover{ color:var(--brand)!important; padding-left:5px; }
/* 右侧单图 (随一级切换) */
.mega__visual{ position:relative; border-radius:8px; overflow:hidden; min-height:220px; background:var(--bg-alt); }
.mega__visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s ease; }
.mega__visual img.is-shown{ opacity:1; }
.mega__visual__cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:20px; background:linear-gradient(transparent, rgba(20,22,17,.8)); color:#fff; }
.mega__visual__cap b{ font-family:var(--font-display); font-size:18px; display:block; }
.mega__visual__cap span{ font-size:13px; color:rgba(255,255,255,.8); }
@media (max-width:860px){ .drop, .mega{ display:none; } }

/* ============================================================
   Banner (内页顶部通用) §ARCH 3.2 — img + tit + desc + btn
   ============================================================ */
.banner{ position: relative; min-height: clamp(280px, 42vh, 460px); display:flex; align-items:center; overflow:hidden; }
.banner__bg{ position:absolute; inset:0; }
.banner__bg picture{display:block;width:100%;height:100%}.banner__bg img{ width:100%; height:100%; object-fit:cover; }
.banner__mask{ position:absolute; inset:0; background: linear-gradient(90deg, rgba(20,22,17,.78), rgba(20,22,17,.4) 60%, rgba(20,22,17,.15)); }
.banner__inner{ position:relative; z-index:2; color:#fff; padding-block: 48px; }
.banner .eyebrow{ color:#C6D4BE; }
.banner__tit{ font-size: clamp(30px,4.5vw,56px); color:#fff; margin:0 0 14px; }
.banner__desc{ color: rgba(255,255,255,.86); max-width: 56ch; margin:0; }

/* ---- Breadcrumb §demo01 ---- */
.crumb{ background: var(--bg-alt); border-bottom:1px solid var(--line); font-size: 13px; }
.crumb__inner{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-block: 14px; color: var(--ink-soft); }
.crumb a{ text-decoration:none; color: var(--ink-soft); transition:color .2s; }
.crumb a:hover{ color: var(--brand); }
.crumb__sep{ opacity:.5; }
.crumb [aria-current]{ color: var(--ink); }

/* ============================================================
   卡片 §4 通用
   ============================================================ */
.card{ background: var(--surface); border:1px solid var(--line); border-radius: 6px; overflow:hidden; text-decoration:none; color:inherit; display:block; transition: box-shadow .3s ease, transform .3s ease; }
.card:hover{ box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 12px 28px rgba(0,0,0,.06); transform: translateY(-2px); }
.card__media{ aspect-ratio: 4/3; overflow:hidden; position:relative; }
.card__media .ph, .card__media img{ width:100%; height:100%; object-fit:cover; transition: transform .7s cubic-bezier(.2,.6,.2,1); }
.card:hover .card__media .ph, .card:hover .card__media img{ transform: scale(1.06); }
.card__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent 55%, rgba(20,22,17,.5)); opacity:0; transition:opacity .4s ease; }
.card:hover .card__media::after{ opacity:1; }
.card__body{ padding: 22px 24px 26px; }
.card__cat{ font-size: var(--fs-small); letter-spacing:.1em; text-transform:uppercase; color: var(--brand); }
.card__title{ margin: 8px 0 10px; }
.card__intro{ color: var(--ink-soft); font-size: 14px; margin:0; }
.blog__media{ aspect-ratio:16/10; }
.blog__date{ font-size:13px; color:var(--ink-soft); letter-spacing:.04em; }

/* ---- grid ---- */
.grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px; }

/* ---- 分类 tab + 横向轮播 ---- */
.cat-tabs{ display:flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.cat-tab{ background:transparent; border:1px solid var(--line); border-radius:4px; padding: 9px 18px; font-size:14px; font-weight:500; color: var(--ink-soft); cursor:pointer; transition: all .2s; }
.cat-tab.is-active{ background: var(--ink); color:#fff; border-color: var(--ink); }
.carousel{ position: relative; }
.carousel__track{ display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3*28px)/4); gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar{ display:none; }
.carousel__track > *{ scroll-snap-align: start; }
.carousel__nav{ position:absolute; top: -70px; right: 0; display:flex; gap: 10px; }
.carousel__btn{ width: 44px; height: 44px; border:1px solid var(--line); background: var(--surface); border-radius: 4px; cursor:pointer; display:grid; place-items:center; color: var(--ink); transition: all .2s; }
.carousel__btn:hover{ background: var(--ink); color:#fff; border-color: var(--ink); }
.carousel__btn svg{ width:18px; height:18px; }

/* ---- overview 富版: 左文案 + 右图标数据卡 (替代"纯标题+文字"空模块 §11.1) ---- */
.rich-overview{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items:center; }
.rich-overview__stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ov-stat{ background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:24px; transition:transform .3s, box-shadow .3s; }
.ov-stat:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.06); }
.ov-stat__ic{ width:44px; height:44px; border-radius:10px; background:rgba(61,90,61,.1); display:grid; place-items:center; margin-bottom:14px; }
.ov-stat__ic svg{ width:22px; height:22px; color:var(--brand); }
.ov-stat b{ font-family:var(--font-display); font-size:30px; font-weight:600; display:block; line-height:1; }
.ov-stat span{ font-size:13px; color:var(--ink-soft); }
@media (max-width:860px){ .rich-overview{ grid-template-columns:1fr; } }

/* ---- overview 变体 B: 图文分栏 (左文案+右真实图, 用于 services) ---- */
.ov-split{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(40px,6vw,80px); align-items:center; }
.ov-split__media{ position:relative; aspect-ratio:5/4; border-radius:10px; overflow:hidden; }
.ov-split__media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.6,.2,1); }
.ov-split__media:hover img{ transform:scale(1.04); }
.ov-split__badge{ position:absolute; left:20px; bottom:20px; z-index:2; background:rgba(34,38,31,.82); backdrop-filter:blur(6px); color:#fff; border-radius:8px; padding:14px 20px; }
.ov-split__badge b{ font-family:var(--font-display); font-size:26px; display:block; line-height:1; }
.ov-split__badge span{ font-size:12px; color:rgba(255,255,255,.8); letter-spacing:.04em; }
.ov-split__points{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px; }
.ov-split__points li{ display:flex; gap:10px; align-items:flex-start; color:var(--ink-soft); font-size:15px; }
.ov-split__points svg{ width:18px; height:18px; color:var(--brand); flex:none; margin-top:3px; }
@media (max-width:860px){ .ov-split{ grid-template-columns:1fr; } }

/* ---- overview 变体 C: 客户评价 quote 两栏 (左证言 + 右信任卡, 用于 cases) ---- */
.quote-blk{ background:var(--dark); color:var(--bg); border-radius:12px; padding:clamp(36px,4vw,60px); position:relative; overflow:hidden; display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(36px,5vw,64px); align-items:center; }
.quote-blk.bg-flow::before{ opacity:.7; }
.quote-blk__main{ position:relative; z-index:1; }
.quote-blk__mark{ font-family:var(--font-display); font-size:72px; line-height:.6; color:#A9C0A0; display:block; margin-bottom:8px; }
.quote-blk__text{ font-family:var(--font-display); font-size:clamp(21px,2.4vw,31px); line-height:1.4; margin:0 0 28px; }
.quote-blk__by{ display:flex; align-items:center; gap:16px; }
.quote-blk__by img{ width:52px; height:52px; border-radius:50%; object-fit:cover; }
.quote-blk__by b{ font-family:var(--font-display); font-size:17px; display:block; }
.quote-blk__by span{ font-size:13px; color:#A9C0A0; }
/* 左侧实景图 (图文型, 非数字) */
.quote-blk{ grid-template-columns:1fr 1.2fr; }
.quote-blk__media{ position:relative; z-index:1; aspect-ratio:4/3; border-radius:10px; overflow:hidden; }
.quote-blk__media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.6,.2,1); }
.quote-blk:hover .quote-blk__media img{ transform:scale(1.05); }
.quote-blk__tag{ position:absolute; left:16px; bottom:16px; z-index:2; background:rgba(255,255,255,.92); color:var(--ink); border-radius:6px; padding:8px 14px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
@media (max-width:860px){ .quote-blk{ grid-template-columns:1fr; gap:32px; } }

/* ---- overview 变体 C: 图标特性行 (竖排, 用于 solutions) ---- */
.feat-rows{ display:grid; gap:2px; }
.feat-row{ display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start; padding:28px 0; border-bottom:1px solid var(--line); }
.feat-row:first-child{ border-top:1px solid var(--line); }
.feat-row__ic{ width:48px; height:48px; border-radius:12px; background:rgba(61,90,61,.1); display:grid; place-items:center; }
.feat-row__ic svg{ width:24px; height:24px; color:var(--brand); }
.feat-row h3{ font-size:19px; margin:0 0 6px; }
.feat-row p{ color:var(--ink-soft); font-size:14px; margin:0; }

/* ---- logo 墙: 自动滚动 (替代纯文字公司名 §11.1) ---- */
.logo-wall{ border-block:1px solid var(--line); padding-block:40px; }
.logo-wall__item{ display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-family:var(--font-display); font-size:22px; font-weight:600; white-space:nowrap; opacity:.5; transition:opacity .3s; }
.logo-wall__item:hover{ opacity:1; color:var(--brand); }
.logo-wall__item svg{ width:26px; height:26px; }


/* ---- 列表页: 左筛选树(sticky) + 右网格 §demo01 ---- */
.listing{ display:grid; grid-template-columns: 280px 1fr; gap: clamp(32px,4vw,56px); align-items:start; }
.filter{ position: sticky; top: 130px; }
.filter__title{ font-family:var(--font-display); font-size:20px; margin:0 0 16px; }
.filter__tree{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.filter__tree li{ border-bottom:1px solid var(--line); }
.filter__tree a{ display:flex; justify-content:space-between; align-items:center; padding:14px 4px; text-decoration:none; color:var(--ink-soft); font-size:14px; transition: color .2s, padding-left .2s; }
.filter__tree a:hover{ color:var(--brand); padding-left:6px; }
.filter__tree a[aria-current]{ color:var(--brand); font-weight:600; }
.filter__tree .count{ font-size:12px; color:var(--ink-soft); background:var(--bg-alt); border-radius:20px; padding:2px 9px; }
.filter__sub{ list-style:none; margin:0 0 8px; padding:0 0 0 14px; }
.filter__sub a{ padding:9px 4px; font-size:13px; }
@media (max-width:860px){
  .listing{ grid-template-columns:1fr; }
  .filter{ position:static; }
  .filter__tree{ display:flex; flex-wrap:wrap; gap:8px; border:0; }
  .filter__tree li{ border:0; }
  .filter__tree > li > a{ border:1px solid var(--line); border-radius:4px; padding:8px 14px; }
  .filter__tree .count, .filter__sub{ display:none; }
}

/* ---- 分页 §demo01 (链接式, 非 ajax) ---- */
.pager{ display:flex; justify-content:center; gap:8px; margin-top: 64px; }
.pager a, .pager span{ min-width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:4px; text-decoration:none; color:var(--ink); font-size:14px; transition: all .2s; padding-inline:12px; }
.pager a:hover{ border-color: var(--ink); }
.pager .is-active{ background: var(--ink); color:#fff; border-color: var(--ink); }
.pager .is-disabled{ opacity:.4; pointer-events:none; }

/* ============================================================
   Form / CTA 询盘 §4 — 两栏(信息 + 表单卡)
   ============================================================ */
.cta{ text-align:left; }
.cta__grid{ display:grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px,6vw,88px); align-items:center; }
.cta__info .eyebrow{ margin-top:0; }
.cta__contacts{ list-style:none; margin: 32px 0 0; padding:0; display:grid; gap: 4px; }
.cta__contacts li{ border-top:1px solid var(--line); }
.cta__contacts li:last-child{ border-bottom:1px solid var(--line); }
.cta__contacts a{ display:flex; align-items:center; gap:16px; padding: 18px 4px; text-decoration:none; color:var(--ink); transition: padding-left .3s ease, color .2s; }
.cta__contacts a:hover{ padding-left:10px; color:var(--brand); }
.cta__contacts svg{ width:22px; height:22px; color:var(--brand); flex:none; }
.cta__ct-label{ font-size:var(--fs-small); color:var(--ink-soft); letter-spacing:.06em; text-transform:uppercase; }
.cta__ct-val{ font-weight:600; font-size:16px; }
.cta__assure{ display:flex; gap:28px; margin-top:32px; flex-wrap:wrap; }
.cta__assure span{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-soft); }
.cta__assure svg{ width:18px; height:18px; color:var(--brand); }
.form-card{ background: var(--surface); border:1px solid var(--line); border-radius:6px; padding: clamp(28px,4vw,44px); }
.form{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align:left; }
.form__field{ display:flex; flex-direction:column; gap:6px; }
.form__field--full{ grid-column: 1 / -1; }
.form label{ font-size: var(--fs-small); color: var(--ink-soft); letter-spacing:.04em; }
.form input, .form textarea, .form select{ background: var(--surface); border:1px solid var(--line); border-radius:4px; padding: 13px 15px; color: var(--ink); font-family:inherit; font-size:15px; }
.form input::placeholder, .form textarea::placeholder{ color: #A69F96; }
.form input:focus, .form textarea:focus, .form select:focus{ outline:none; border-color: var(--brand); }
.form textarea{ resize:vertical; min-height: 110px; }
.form .btn{ justify-self:start; }

/* ============================================================
   Footer §4 — 深色多栏 + 大字水印装饰
   ============================================================ */
.footer{ position:relative; background: var(--dark); color: var(--bg); padding-block: 80px 40px; overflow:hidden; }
.footer::after{ content:"Meridian"; position:absolute; left:50%; bottom:-.28em; transform:translateX(-50%); font-family: var(--font-display); font-weight:700; font-size: clamp(120px, 22vw, 420px); line-height:1; color: rgba(255,255,255,.035); letter-spacing:-.03em; white-space:nowrap; pointer-events:none; user-select:none; }
.footer .wrap{ position:relative; z-index:1; }
.footer__grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 56px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer__logo{ font-family: var(--font-display); font-size: 24px; font-weight:700; margin:0 0 16px; }
.footer__logo span{ color:#A9C0A0; }
.footer__desc{ color:#B7B2AA; font-size:14px; max-width: 30ch; }
.footer__col h4{ font-family: var(--font-body); font-size: var(--fs-small); letter-spacing:.12em; text-transform:uppercase; color:#8f8a82; margin:0 0 20px; }
.footer__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.footer__col a{ text-decoration:none; color:#C9C4BC; font-size:14px; transition:color .2s; }
.footer__col a:hover{ color:#fff; }
.footer__contact{ display:grid; gap:12px; font-size:14px; color:#C9C4BC; }
.footer__contact a{ color:#C9C4BC; text-decoration:none; }
.footer__contact a:hover{ color:#fff; }
.footer__social{ display:flex; gap:14px; margin-top:20px; }
.footer__social a{ width:38px; height:38px; border:1px solid rgba(255,255,255,.2); border-radius:4px; display:grid; place-items:center; color:#C9C4BC; text-decoration:none; transition: all .25s; font-size:13px; }
.footer__social a svg{ width:17px; height:17px; }
.footer__social a:hover{ background: var(--brand); color:#fff; border-color: var(--brand); transform: translateY(-2px); }
.footer__bottom{ display:flex; justify-content:space-between; gap:16px; padding-top: 28px; font-size:13px; color:#8f8a82; flex-wrap:wrap; }
.footer__bottom a{ color:#8f8a82; text-decoration:none; }

/* ============================================================
   动效 §6
   ============================================================ */
[data-fade]{ opacity:0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); }
[data-fade].in{ opacity:1; transform:none; }
[data-fade-left]{ opacity:0; transform: translateX(-30px); transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); }
[data-fade-left].in{ opacity:1; transform:none; }
[data-fade-right]{ opacity:0; transform: translateX(30px); transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); }
[data-fade-right].in{ opacity:1; transform:none; }

/* ---- 环境动效工具 §11.2 ---- */
/* 深色 section 流动渐变背景层 */
.bg-flow{ position:relative; overflow:hidden; }
.bg-flow > *{ position:relative; z-index:1; }
.bg-flow::before{ content:""; position:absolute; inset:-50%; z-index:0;
  background: radial-gradient(circle at 30% 30%, rgba(61,90,61,.35), transparent 45%),
              radial-gradient(circle at 70% 60%, rgba(42,58,44,.5), transparent 50%);
  animation: bgFlow 18s ease-in-out infinite alternate; }
@keyframes bgFlow{ 0%{ transform:translate(0,0) rotate(0deg); } 100%{ transform:translate(6%,4%) rotate(8deg); } }
/* 细网格叠层 */
.bg-grid{ position:relative; }
.bg-grid::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px; opacity:.4; mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%); }
.bg-grid > *{ position:relative; z-index:1; }
/* 浮动微动 */
.float-slow{ animation: floatY 6s ease-in-out infinite; }
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
/* logo 自动滚动 marquee */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee__track{ display:flex; gap:64px; width:max-content; animation: marquee 26s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .bg-flow::before, .float-slow, .marquee__track{ animation:none; }
}

/* ============================================================
   响应式 (公共部分)
   ============================================================ */
@media (max-width: 1024px){
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .footer__grid{ grid-template-columns: 1fr 1fr; gap:36px; }
  .carousel__track{ grid-auto-columns: calc((100% - 28px)/2); }
}
@media (max-width: 860px){
  .nav__menu{ display:none; }
  .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); }
  .cta__grid{ grid-template-columns:1fr; gap:36px; }
  .form{ grid-template-columns:1fr; }
}
@media (max-width: 640px){ .carousel__track{ grid-auto-columns: 82%; } }
@media (max-width: 520px){
  .grid-3, .grid-4, .grid-2{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  [data-fade]{ opacity:1; transform:none; }
}


/* v1.7 global mobile/contact/navigation improvements */
.mg-mobile-nav{display:none}
@media(max-width:767px){
 .header{position:sticky;top:0;z-index:1000}
 .mg-mobile-nav{position:fixed;display:flex;left:0;right:0;bottom:0;z-index:9999;justify-content:space-around;padding:12px;background:#fff;border-top:1px solid #ddd}
 body{padding-bottom:60px}
}
.mg-svg-icon svg{width:1em;height:1em;stroke:#555;fill:none}