/* =========================================================
   万物绿洲 OasisWKS 官网首页
   字体：英文与数字 Montserrat，中文 MiSans（两者都已本地化在 fonts/ 目录）
   设计稿宽度 1920px。尺寸单位：1rem = 100px（在 1920 宽屏下）
   例：0.72rem = 设计稿 72px。屏幕变窄时按比例整体缩放；
   ≤767px 切换为手机布局（按 750 宽手机稿，1rem = 100px@750）。
   ========================================================= */

:root{
  /* —— 品牌色 —— */
  --c-brand: #18b79a;      /* 标准色：悬停 / 选中 */
  --c-green: #23ad92;      /* 设计稿中的静态绿色强调 */
  --c-deep: #00343c;       /* 深墨绿：按钮、页脚 */
  --c-ink: #161718;        /* 主文字 */
  --c-ink-2: #2d3235;      /* 次级文字 */
  --c-ink-3: #686969;      /* 辅助文字 */
  --c-line: #d9dcdc;       /* 分隔线 */
  --c-mint: #95d1cb;       /* 页脚标语、小图标 */
  --bg-soft: #f6f9f5;      /* 品牌介绍区底色 */
  --bg-band: #fbfbfb;      /* 合作品牌底色 */
  --hero-left: #b2c9c7;    /* 头图左侧底色（按设计稿 V3） */
  --hero-deep: #15676a;    /* 头图第二行标题色 */
  --hero-right: #d3e0e0;   /* 头图右侧底色 */
  --brand-gradient: linear-gradient(90deg,#18a491 0%,#48b0cb 25.8%,#5fb7e7 40%,#c39b75 53.7%,#f08f43 59.6%,#ea5e43 100%);

  /* —— 字号规范（1920 稿） —— */
  --fs-display: 0.8rem;   /* 头图标题 / 公司介绍大标题 */
  --fs-h2: 0.8rem;        /* 各板块主标题 */
  --fs-lead: 0.44rem;      /* 板块副标题 / 引言 */
  --fs-case: 0.4rem;      /* 案例悬停卡片标题 */
  --fs-h3: 0.36rem;        /* 卡片标题 */
  --fs-faq: 0.32rem;       /* 问答问题 */
  --fs-faq-on: 0.41rem;    /* 问答 · 悬停/选中时的字号（32→41，字号动画，放大过程始终清晰） */
  --fs-body-l: 0.3rem;    /* 大段正文 / 列表 / 问答说明 */
  --fs-body: 0.24rem;      /* 卡片描述、问答答案 */
  --fs-small: 0.2rem;     /* 导航、按钮、头图说明 */
  --fs-meta: 0.16rem;      /* 了解更多 */

  /* —— 间距规范 —— */
  --sp-section: 1.6rem;  /* 板块上下留白 */
  --sp-head: 0.96rem;      /* 标题组 → 内容 */
  --sp-title: 0.24rem;     /* 主标题 → 副标题 */

  --container: 15.24rem;  /* 内容区宽（左右各 198） */
  --header-h: 1rem;
  --ease: cubic-bezier(.22,1,.36,1);
}

/* 1rem = 100px @1920，随屏宽等比缩放（2K/4K 宽屏同样等比放大，保证头图画面完整无接缝） */
html{ font-size: calc(100vw / 19.2); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

*,*::before,*::after{ box-sizing: border-box; }
body{
  margin: 0; font-size: 16px; color: var(--c-ink); background: #fff;
  font-family: "Montserrat", "MiSans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;  /* 英文/数字 Montserrat，中文 MiSans */
  font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img{ display: block; max-width: 100%; height: auto; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,p,ul,figure{ margin: 0; padding: 0; }
ul{ list-style: none; }
button{ font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
address{ font-style: normal; }
.sr-only{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.c-green{ color: var(--c-green); }
@media (max-width: 767px){ br.pc{ display: none; } }
.hang{ margin-right: -.5em; }   /* 句末全角标点悬挂，让标题视觉居中 */

.container{ width: var(--container); max-width: calc(100% - 40px); margin: 0 auto; }

/* ---------- 通用标题 ---------- */
.section-head{ text-align: center; margin-bottom: var(--sp-head); }
.section-title{ font-size: var(--fs-h2); font-weight: 300; line-height: 1.25; letter-spacing: .01em; color: var(--c-ink); text-wrap: balance; }
.section-title .c-green,.section-title.t-regular{ font-weight: 400; }
.section-lead{ margin-top: var(--sp-title); font-size: var(--fs-lead); font-weight: 300; line-height: 1.6; letter-spacing: .025em; color: var(--c-ink); text-wrap: balance; }
.section-lead .c-green{ font-weight: 350; }   /* 「AI 化解决方案」用 Normal */

/* ---------- 按钮 ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  height: 0.54rem; padding: 0 0.3rem; min-width: 2.15rem;
  font-size: max(var(--fs-small), 13px); font-weight: 600; letter-spacing: .02em;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn-dark{ background: var(--c-deep); color: #fff; }
.btn-dark:hover{ background: var(--c-brand); }
.btn-ghost{ background: rgba(246,249,245,.25); color: var(--c-deep); border: 1px solid #444b4b; }
.btn-ghost:hover{ color: var(--c-brand); border-color: var(--c-brand); background: rgba(246,249,245,.6); }

/* =========================================================
   01 导航
   ========================================================= */
.site-header{ position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: #fff; }
.header-inner{ position: relative; max-width: 19.2rem; height: var(--header-h); margin: 0 auto; padding: 0 0.78rem 0 0.84rem; display: flex; align-items: center; }
.header-logo img{ width: 1.98rem; height: auto; }
.main-nav{ margin-left: auto; display: flex; align-items: center; gap: 0.56rem; }
.main-nav a{
  position: relative; font-size: max(var(--fs-small), 14px); font-weight: 350; color: var(--c-ink-2);
  display: inline-grid; transition: color .25s ease;
}
/* 悬停加粗且不挤动布局：用隐藏的粗体文字占位 */
.main-nav a::after{ content: attr(data-text); font-weight: 600; height: 0; visibility: hidden; overflow: hidden; }
.main-nav a:hover{ color: var(--c-brand); font-weight: 600; }
.nav-contact-m{ display: none !important; }
.header-contact{ margin-left: 0.46rem; min-width: 1.61rem; height: 0.54rem; font-size: max(0.21rem, 14px); }
.nav-toggle{ display: none; }

/* =========================================================
   02 头图 Banner
   画面结构沿用线上版（雕塑 + 毛玻璃 + OASIS/WKS），
   只把左侧底色改为设计稿色 #b2c9c7，并降低左侧灰雾。
   ========================================================= */
.hero{
  position: relative; height: 8.55rem; overflow: hidden; isolation: isolate;
  background: linear-gradient(90deg, var(--hero-left) 50%, var(--hero-right) 50%);
}
.hero-stage{ position: absolute; left: 50%; top: -0.25rem; width: 19.2rem; height: 8.76rem; margin-left: -9.6rem; background: var(--hero-right); }
.hero-stage::before{ content: ""; position: absolute; inset: 0 50% 0 0; background: var(--hero-left); }

.hero-backdrop{ position: absolute; z-index: 1; inset: 0 50% 0 0; overflow: hidden; mix-blend-mode: multiply; }
.hero-backdrop-drift{
  position: absolute; inset: -16%;
  background: url("../images/hero-sculpture.jpg") center / cover no-repeat;
  filter: url(#oasis-material-colors) blur(0.3rem) saturate(.9) contrast(1.05) brightness(1.1);
  opacity: .08; animation: heroBlurDrift 16s ease-in-out infinite alternate;
}
.hero-sculpture{ position: absolute; z-index: 2; left: 1.54rem; top: -0.98rem; width: 19.2rem; height: 11.07rem; mix-blend-mode: multiply; }
.hero-main,.hero-echo{ position: absolute; inset: 0; }
.hero-main img,.hero-echo img{ width: 100%; height: 100%; object-fit: cover; filter: url(#oasis-material-colors); }
.hero-main img{ filter: url(#oasis-material-colors) saturate(1.06) contrast(1.02) brightness(1.1); animation: heroFloat 12s ease-in-out infinite; }
.hero-echo{ opacity: .12; filter: blur(0.26rem) saturate(1.25) brightness(1.1); transform: translate3d(2%,4%,0) scale(1.04); animation: heroEcho 15s ease-in-out infinite alternate; }

.hero-glass{ position: absolute; z-index: 2; inset: 0 50% 0 0; -webkit-backdrop-filter: blur(0.24rem); backdrop-filter: blur(0.24rem); background: rgba(178,201,199,.34); }
.hero-glass::after{
  content: ""; position: absolute; inset: 35% 0 0; background: var(--hero-left);
  -webkit-mask-image: linear-gradient(transparent, #fff 14%); mask-image: linear-gradient(transparent, #fff 14%);
}

.hero-panel{ position: absolute; z-index: 3; top: 0; bottom: 0; overflow: hidden; pointer-events: none; }
.hero-panel-left{ left: 0; width: 9.6rem; }
.hero-panel-right{ left: 9.6rem; width: 9.6rem; }
.hero-display{
  position: absolute; font-family: "Inter OASIS", "Inter", "Arial Black", sans-serif; font-weight: 900;
  line-height: .82; letter-spacing: -.075em; color: #f7faf6; user-select: none; white-space: nowrap;
}
.hero-oasis{
  top: 1.05rem; left: 0.69rem; font-size: 2.36rem; letter-spacing: -.065em; transform: scaleX(1.17); transform-origin: left center;
  background: #f7faf6 url("../images/hero-sculpture.jpg") 30% 48% / 112% auto no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: url(#oasis-material-colors) contrast(1.08) saturate(1.08);
  animation: heroTextDrift 13s ease-in-out infinite alternate;
}
.hero-wks{ right: 0.69rem; bottom: 0.33rem; font-size: 3.4rem; }
.hero-orbit{ position: absolute; left: 50%; top: 42%; aspect-ratio: 1; border: 1px solid rgba(11,61,46,.075); border-radius: 50%; transform: translate(-50%,-50%); }
.hero-orbit-one{ width: 7.09rem; animation: heroOrbit 28s linear infinite; }
.hero-orbit-two{ width: 4.62rem; animation: heroOrbit 36s linear infinite reverse; }
.hero-marker{ position: absolute; left: 86%; font-size: 0.16rem; font-weight: 300; color: rgba(255,255,255,.8); animation: markerPulse 5.2s ease-in-out infinite; }
.hero-marker-one{ top: 12%; }
.hero-marker-two{ top: 34%; }

.hero-copy{ position: absolute; z-index: 5; left: max(0.86rem, calc(50% - 8.74rem)); bottom: 0.87rem; width: 8rem; }
.hero-title{ font-size: var(--fs-display); line-height: 1.25; font-weight: 600; letter-spacing: 0; color: var(--c-ink); }
.hero-title-line{ display: block; white-space: nowrap; }
.hero-title-strong{ font-weight: 650; color: var(--hero-deep); }
/* 标题中的 ×：两条细杠旋转而成，比字体里的符号更好控制大小和位置 */
.hero-x{ position: relative; display: inline-block; width: .5em; height: .5em; margin: 0 .2em 0 .26em; vertical-align: .1em; }
.hero-x::before,.hero-x::after{ content: ""; position: absolute; left: 50%; top: 50%; width: .64em; height: .1em; background: currentColor; transform: translate(-50%,-50%) rotate(45deg); }
.hero-x::after{ transform: translate(-50%,-50%) rotate(-45deg); }
.hero-actions{ margin-top: 0.89rem;   /* 标题下移 50px：按钮位置不变，缩小标题与按钮间距 */  display: flex; gap: 0.2rem; flex-wrap: wrap; }

@keyframes heroFloat{ 0%,100%{ transform: translate3d(-1.4%,1.2%,0) rotate(-.3deg) scale(1.01); } 50%{ transform: translate3d(1.8%,-2.1%,0) rotate(.45deg) scale(1.045); } }
@keyframes heroEcho{ 0%{ transform: translate3d(3%,5%,0) scale(1.03); opacity: .08; } 100%{ transform: translate3d(-2%,1%,0) scale(1.1); opacity: .16; } }
@keyframes heroBlurDrift{ 0%{ transform: translate3d(-2%,-1%,0) scale(1.18) rotate(-.2deg); } 50%{ transform: translate3d(2.4%,1.5%,0) scale(1.25) rotate(.3deg); } 100%{ transform: translate3d(-1%,2.5%,0) scale(1.2) rotate(-.1deg); } }
@keyframes heroTextDrift{ 0%{ background-position: 30% 48%; } 100%{ background-position: 68% 54%; } }
@keyframes heroOrbit{ to{ transform: translate(-50%,-50%) rotate(342deg); } }
@keyframes markerPulse{ 0%,100%{ opacity: .35; } 50%{ opacity: .9; } }

/* =========================================================
   03 公司介绍（左侧与头图文字对齐，右侧从页面中线开始）
   ========================================================= */
.intro{ background: var(--bg-soft); padding: 1.1rem 0 1.04rem; }
.intro-grid{ max-width: 19.2rem; margin: 0 auto; padding: 0 0.6rem 0 0.84rem; display: grid; grid-template-columns: 8.76rem minmax(0,1fr); align-items: start; }
.intro-title{ font-size: var(--fs-display); font-weight: 500; line-height: 1.175; color: var(--c-ink); }
.intro-title span{ display: block; }
.intro-text{ padding-top: 0.04rem; max-width: 9rem; color: var(--c-ink); }
.intro-lead{ font-size: 0.44rem; font-weight: 500; line-height: 1.18; }
.intro-text p:not(.intro-lead){ margin-top: 0.1rem; font-size: var(--fs-body-l); font-weight: 300; line-height: 1.4; }
.intro-text p:last-child{ margin-top: 0.32rem; max-width: 8.7rem; }   /* 一整句话，不手动换行：按 870 宽自然折行＝设计稿的断行，且给滚动条留了余量 */

/* =========================================================
   04 案例（静态显示案例图；悬停切换为品牌色卡片 + 标题）
   ========================================================= */
.cases{ padding: var(--sp-section) 0 2rem; }
.case-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.54rem; }
.case-card{ position: relative; display: block; overflow: hidden; aspect-ratio: 735 / 472; background: #eef2f1; }
.case-img{ width: 100%; height: 100%; object-fit: cover; }
.case-hover{
  position: absolute; inset: 0; padding: 0.38rem 0.45rem; background: center / cover no-repeat;
  opacity: 0; transition: opacity .6s cubic-bezier(.33,0,.2,1);
}
.case-title{
  font-size: var(--fs-case); font-weight: 600; line-height: 1.3; letter-spacing: .01em; color: #fff;
  transform: translateY(0.18rem); transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.case-title span{ display: block; font-weight: 400; }
.case-card:hover .case-hover,.case-card:focus-visible .case-hover{ opacity: 1; }
.case-card:hover .case-title,.case-card:focus-visible .case-title{ transform: none; }

/* =========================================================
   05 合作品牌（向下箭头 + 标题，Logo 墙在浅灰底上）
   ========================================================= */
.clients-head{ display: flex; flex-direction: column; align-items: center; padding-bottom: 1.2rem; }
.clients-chevron{ width: 1.73rem; height: 0.79rem; fill: none; stroke: #232426; stroke-width: 1px; overflow: visible; }
.clients-chevron polyline{ vector-effect: non-scaling-stroke; }
.clients-title{ margin-top: 0.32rem; font-size: var(--fs-lead); font-weight: 300; line-height: 1.6; letter-spacing: .025em; color: var(--c-ink); }
.client-band{ background: var(--bg-band); padding: 1.4rem 0; }
.client-wall{ position: relative; width: 14.91rem; height: 4.57rem; margin: 0 auto; }
.client{ position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; }

/* =========================================================
   06 核心业务（悬停：顶部色条 + 渐变描边 + 列表与"了解更多"变标准色）
   ========================================================= */
.services{ padding: var(--sp-section) 0 0.8rem; }
.service-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.36rem; width: 15.18rem; max-width: 100%; margin: 0 auto; }
.service-card{
  position: relative; display: flex; flex-direction: column; min-height: 6.46rem;
  padding: 0.59rem 0.58rem 0.74rem; border: 1px solid rgba(45,50,53,.28); background: #fff;
}
.service-card::before{ /* 渐变描边 */
  content: ""; position: absolute; inset: -1px; padding: 1px; background: var(--brand-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.service-card::after{ /* 顶部色条 */
  content: ""; position: absolute; left: -1px; right: -1px; top: -0.04rem; height: 0.07rem; background: var(--c-brand);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.service-title{ font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; color: var(--c-ink); }
.service-desc{ margin-top: 0.26rem; min-height: 4.5em; font-size: max(var(--fs-body), 13px); font-weight: 300; line-height: 1.5; letter-spacing: .05em; color: var(--c-ink); }
.service-list{ margin-top: 0.38rem; font-size: var(--fs-body-l); font-weight: 350; line-height: 1.533; color: var(--c-ink); }
.service-list li{ transition: color .3s ease; }
.more{ /* 「了解更多 >>」小按钮 */
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.1rem;
  height: 0.35rem; padding: 0 0.18rem 0 0.22rem; background: var(--c-deep); color: #fff;
  font-size: max(var(--fs-meta), 12px); letter-spacing: .05em; transition: background-color .35s ease;
}
.more i{ /* » 双箭头 */
  width: 0.21rem; height: 0.09rem; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 9'%3E%3Cpath d='M0 .2v1.24l6.4 3.15L0 7.75v1.24l8.33-4.1z M12.74 .2v1.24l6.4 3.15-6.4 3.16v1.24l8.33-4.1z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 9'%3E%3Cpath d='M0 .2v1.24l6.4 3.15L0 7.75v1.24l8.33-4.1z M12.74 .2v1.24l6.4 3.15-6.4 3.16v1.24l8.33-4.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.service-card:hover::before,.service-card:focus-visible::before{ opacity: 1; }
.service-card:hover::after,.service-card:focus-visible::after{ transform: scaleX(1); }
.service-card:hover .service-list li,.service-card:focus-visible .service-list li{ color: var(--c-brand); }
.service-card:hover .more,.service-card:focus-visible .more{ background: var(--c-brand); }

/* =========================================================
   07 常见问题（悬停变色；点击展开，问题字号放大）
   ========================================================= */
.faq{ padding: 0.8rem 0; }
.faq-head{ margin-bottom: 0.64rem; }
.faq-head .section-title{ margin-left: -.06em; }
.faq-lead{ margin-top: 0.24rem; font-size: var(--fs-body-l); font-weight: 300; line-height: 1.533; color: var(--c-ink); }
.faq-item{ border-bottom: 1px solid var(--c-line); }
.faq-q{
  width: 100%; min-height: 1rem; padding: 0.2rem 0.04rem 0 0.02rem; display: flex; align-items: center; text-align: left;
  color: var(--c-ink); transition: color .3s ease;
}
.faq-no{ flex: none; width: 0.86rem; font-size: 0.34rem; font-weight: 500; letter-spacing: -.01em; color: var(--c-ink); }
.faq-text{
  flex: 1; font-size: var(--fs-faq); font-weight: 350; line-height: 1.4;
  transition: font-size .6s cubic-bezier(.22,.61,.36,1), color .45s ease;   /* 起步自然、末段慢慢收住 */
}
.faq-arrow{
  flex: none; width: 0.37rem; height: 0.37rem; margin-left: 0.24rem; background: #999; transition: background-color .5s ease, transform .6s cubic-bezier(.45,.05,.25,1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 37'%3E%3Cpath d='M18.5 37C8.33 37 0 28.68 0 18.5S8.33 0 18.5 0 37 8.33 37 18.5 28.68 37 18.5 37zm2.47-16.96l-3.55 3.55c-.62.62-.62 1.54 0 2.16s1.54.62 2.16 0l6.17-6.17c.3-.3.46-.77.46-1.08s-.15-.77-.46-1.08l-6.17-6.17c-.62-.62-1.54-.62-2.16 0s-.62 1.54 0 2.16l3.55 3.55h-8.63c-.93 0-1.54.62-1.54 1.54s.62 1.54 1.54 1.54h8.63z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 37'%3E%3Cpath d='M18.5 37C8.33 37 0 28.68 0 18.5S8.33 0 18.5 0 37 8.33 37 18.5 28.68 37 18.5 37zm2.47-16.96l-3.55 3.55c-.62.62-.62 1.54 0 2.16s1.54.62 2.16 0l6.17-6.17c.3-.3.46-.77.46-1.08s-.15-.77-.46-1.08l-6.17-6.17c-.62-.62-1.54-.62-2.16 0s-.62 1.54 0 2.16l3.55 3.55h-8.63c-.93 0-1.54.62-1.54 1.54s.62 1.54 1.54 1.54h8.63z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 鼠标移到哪一条，哪一条变色并放大（字号 32→41 平滑过渡；行高固定，不挤动布局） */
.faq-q:hover .faq-text,.faq-q:focus-visible .faq-text{ color: var(--c-brand); font-size: var(--fs-faq-on); }
.faq-q:hover .faq-arrow,.faq-q:focus-visible .faq-arrow{ background: var(--c-brand); }
.faq-item.is-open .faq-text{ color: var(--c-brand); font-size: var(--fs-faq-on); }
.faq-item.is-open .faq-arrow{ background: var(--c-brand); transform: rotate(90deg); }

.faq-a{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq-item.is-open .faq-a{ grid-template-rows: 1fr; }
.faq-a-inner{ overflow: hidden; padding-left: 0.88rem; padding-right: 1.6rem; }
.faq-a-inner > :first-child{ margin-top: 0.04rem; }
.faq-a-inner > :last-child{ margin-bottom: 0.4rem; }
.faq-a p,.faq-a li{ font-size: max(var(--fs-body), 13px); font-weight: 300; line-height: 1.8; letter-spacing: .03em; color: var(--c-ink-2); }
.faq-a ul{ margin-top: 0.12rem; display: grid; gap: 0.1rem; }
.faq-a li b{ display: inline-block; margin-right: .8em; font-weight: 500; color: var(--c-ink); }

/* =========================================================
   08 联系 CTA
   ========================================================= */
.cta{ padding: 0.8rem 0 2rem; text-align: center; }
.cta .section-title{ padding-top: 0.8rem; }
.cta-lead{ max-width: 11.6rem; margin-left: auto; margin-right: auto; }
.btn-pill{
  margin-top: 0.48rem; display: inline-flex; align-items: center; height: 0.79rem; padding: 0 0.06rem 0 0.42rem; gap: 0.32rem;
  border-radius: 0.4rem; background: var(--c-deep); border: 1px solid var(--c-green); color: #fff;
  font-size: 0.34rem; font-weight: 600; letter-spacing: .025em; transition: background-color .3s ease;
}
.btn-pill i{ flex: none; position: relative; width: 0.68rem; height: 0.68rem; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.btn-pill svg{ display: block; width: 0.23rem; height: 0.36rem; margin: 0.04rem 0 0 0.02rem; fill: var(--c-deep); transition: fill .3s ease; }
.btn-pill:hover{ background: var(--c-brand); border-color: var(--c-brand); }
.btn-pill:hover svg{ fill: var(--c-brand); }   /* 悬停只变色，圆形和箭头位置都不动 */

/* =========================================================
   09 页脚（左侧留空，信息列靠右）
   ========================================================= */
.site-footer{ background: var(--c-deep); color: #fff; padding: 0.84rem 0 0.64rem; }
.footer-inner{ max-width: 19.2rem; margin: 0 auto; padding: 0 0.96rem 0 0.84rem; display: flex; justify-content: flex-end; }
.footer-info{ min-width: 4.76rem; }
.footer-qr{ display: flex; gap: 0.69rem; padding-left: 0.06rem; }
.footer-qr figure{ display: flex; flex-direction: column; align-items: center; }
.footer-qr img{ width: 1.86rem; height: 1.86rem; }
.footer-qr figcaption{ margin-top: 0.24rem; font-size: max(0.21rem, 12px); font-weight: 400; line-height: 1.3; letter-spacing: -.02em; white-space: nowrap; }
.footer-tel{ display: inline-block; white-space: nowrap; margin-top: 0.39rem; font-size: 0.52rem; font-weight: 400; line-height: 1.1; letter-spacing: .005em; transition: color .25s ease; }
.footer-tel:hover{ color: var(--c-brand); }
.footer-addr{ margin-top: 0.07rem; font-size: max(0.26rem, 12px); font-weight: 350; line-height: 1.12; }
.footer-copy{ margin-top: 0.61rem; font-size: max(0.26rem, 12px); font-weight: 300; line-height: 1.23; }
.footer-copy a:hover{ color: var(--c-brand); }

/* 减少动态效果偏好 */
@media (prefers-reduced-motion: reduce){
  .hero *{ animation: none !important; }
  *{ transition-duration: .01ms !important; }
}

/* =========================================================
   手机端（≤767px）：按 750 宽手机稿，1rem = 100px@750
   ========================================================= */
@media (max-width: 767px){
  html{ font-size: calc(100vw / 7.5); }
  :root{
    --fs-display: 0.56rem; --fs-h2: 0.52rem; --fs-lead: 0.3rem; --fs-case: 0.32rem; --fs-h3: 0.36rem;
    --fs-faq: 0.3rem; --fs-faq-on: 0.34rem; --fs-body-l: 0.28rem; --fs-body: 0.26rem; --fs-small: 0.26rem; --fs-meta: 0.24rem;
    --sp-section: 1.2rem; --sp-head: 0.64rem; --sp-title: 0.2rem; --container: 6.7rem; --header-h: 1.12rem;
  }
  .container{ max-width: none; }
  .btn{ height: 0.84rem; min-width: 0; padding: 0 0.36rem; font-size: 0.26rem; }

  .header-inner{ padding: 0 0.4rem; }
  .header-logo img{ width: 1.68rem; }
  .header-contact{ display: none; }
  .nav-toggle{ display: grid; gap: 0.12rem; place-content: center; width: 0.8rem; height: 0.8rem; margin-left: auto; margin-right: -0.16rem; }
  .nav-toggle span{ display: block; width: 0.44rem; height: 0.03rem; background: var(--c-deep); transition: transform .3s ease; }
  .nav-open .nav-toggle span:first-child{ transform: translateY(0.075rem) rotate(45deg); }
  .nav-open .nav-toggle span:last-child{ transform: translateY(-0.075rem) rotate(-45deg); }
  .main-nav{
    position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 0.16rem 0.4rem 0.48rem; background: #fff;
    flex-direction: column; align-items: stretch; gap: 0; box-shadow: 0 0.24rem 0.4rem rgba(0,52,60,.08);
    visibility: hidden; opacity: 0; transform: translateY(-0.12rem); transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav-open .main-nav{ visibility: visible; opacity: 1; transform: none; }
  .main-nav a{ display: block; padding: 0.28rem 0; font-size: 0.3rem; border-bottom: 1px solid #eef0f0; }
  .main-nav a::after{ display: none; }
  .nav-contact-m{ display: flex !important; margin-top: 0.4rem; height: 0.88rem; align-items: center; justify-content: center; background: var(--c-deep); color: #fff !important; border: 0 !important; }

  .hero{ height: 12.4rem; background: var(--hero-left); }
  .hero-stage{ left: 0; top: 0; margin: 0; width: 100%; height: 100%; }
  .hero-stage::before{ inset: 0; }
  .hero-backdrop{ inset: 0; }
  .hero-glass{ inset: 50% 0 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero-glass::after{ inset: 0; -webkit-mask-image: linear-gradient(transparent, #fff 18%); mask-image: linear-gradient(transparent, #fff 18%); }
  .hero-panel-left,.hero-panel-right{ left: 0; width: 100%; }
  .hero-sculpture{ left: -0.4rem; top: 1.5rem; width: 10rem; height: 5.76rem; }
  .hero-oasis{ top: 0.56rem; left: 0.38rem; font-size: 1.82rem; transform: scaleX(1.05); }
  .hero-wks{ right: 0.4rem; bottom: auto; top: 4.7rem; font-size: 1.96rem; }
  .hero-orbit-one{ width: 6rem; top: 36%; }
  .hero-orbit-two{ width: 3.9rem; top: 36%; }
  .hero-marker-one{ top: 17%; left: 88%; }
  .hero-marker-two{ top: 39%; left: 11%; }
  .hero-copy{ left: 0.4rem; right: 0.4rem; width: auto; bottom: 0.64rem; }
  .hero-title{ line-height: 1.3; }
  .hero-actions{ margin-top: 0.56rem; gap: 0.2rem; }
  .hero-actions .btn{ flex: 1; }

  .intro{ padding: 1.2rem 0; }
  .intro-grid{ padding: 0 0.4rem; grid-template-columns: 1fr; gap: 0.56rem; }
  .intro-title{ font-size: 0.64rem; }
  .intro-lead{ font-size: 0.38rem; }
  .intro-text p:not(.intro-lead){ font-size: 0.28rem; line-height: 1.6; }
  .intro-text p:last-child{ margin-top: 0.24rem; }

  .cases{ padding-bottom: 1.4rem; }
  .case-grid{ grid-template-columns: 1fr; gap: 0.64rem; }
  .case-card{ aspect-ratio: auto; overflow: visible; background: none; }
  .case-img{ width: 100%; height: auto; aspect-ratio: 735 / 472; }
  .case-hover{ position: static; opacity: 1; padding: 0.24rem 0 0; background: none !important; }
  .case-title{ transform: none; font-size: 0.3rem; font-weight: 500; color: var(--c-ink-2); }
  .case-title span{ font-weight: 400; color: var(--c-ink-3); font-size: 0.26rem; }
  .section-lead br{ display: none; }

  .clients-head{ padding-bottom: 0.64rem; }
  .clients-chevron{ width: 1.2rem; height: 0.55rem; }
  .clients-title{ margin-top: 0.2rem; }
  .client-band{ padding: 0.96rem 0; }
  .client-wall{ width: 6.7rem; height: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.56rem 0.4rem; align-items: center; justify-items: center; }
  .client{ position: static; width: auto; max-width: 100%; max-height: 0.68rem; }

  .services{ padding-bottom: 0.6rem; }
  .service-grid{ grid-template-columns: 1fr; gap: 0.32rem; }
  .service-card{ min-height: 0; padding: 0.56rem 0.48rem 0.56rem; }
  .service-desc{ font-size: 0.26rem; min-height: 0; }
  .service-list{ margin-bottom: 0.48rem; }
  .more{ height: 0.64rem; padding: 0 0.28rem; font-size: 0.24rem; gap: 0.14rem; }
  .more i{ width: 0.3rem; height: 0.13rem; }

  .faq{ padding: 0.6rem 0; }
  .faq-head{ margin-bottom: 0.4rem; }
  .faq-q{ min-height: 1.2rem; padding: 0.24rem 0; align-items: center; }
  .faq-no{ width: 0.72rem; font-size: 0.3rem; }
  .faq-arrow{ width: 0.44rem; height: 0.44rem; margin-left: 0.16rem; }
  .faq-lead{ font-size: 0.26rem; }
  .faq-text{ padding-right: 10%; }
  .faq-a-inner{ padding-left: 0.72rem; padding-right: 0; }

  .cta{ padding: 0.6rem 0 1.4rem; }
  .cta .section-title{ padding-top: 0.6rem; }
  .btn-pill{ height: 1rem; border-radius: 0.5rem; padding: 0 0.08rem 0 0.48rem; gap: 0.28rem; font-size: 0.32rem; }
  .btn-pill i{ width: 0.84rem; height: 0.84rem; }
  .btn-pill svg{ width: 0.28rem; height: 0.44rem; }

  .site-footer{ padding: 0.96rem 0 0.8rem; }
  .footer-inner{ padding: 0 0.4rem; justify-content: flex-start; }
  .footer-info{ width: auto; }
  .footer-qr{ gap: 0.48rem; padding-left: 0; }
  .footer-qr img{ width: 2.2rem; height: 2.2rem; }
  .footer-qr figcaption{ font-size: 0.22rem; }
  .footer-tel{ margin-top: 0.56rem; font-size: 0.48rem; }
  .footer-addr{ font-size: 0.24rem; line-height: 1.5; }
  .footer-copy{ margin-top: 0.48rem; font-size: 0.22rem; line-height: 1.5; }
}

/* 头图英文大字（仅含 OASIS/WKS 的 Inter Black 子集） */
@font-face{ font-family: "Inter OASIS"; font-weight: 900; font-style: normal; font-display: block; src: url("../fonts/inter-900-oasiswks.woff2") format("woff2"); }