/* Hallmark · genre: modern-minimal · route: custom (tuned, brand palette) · macrostructure: Split Studio (cases)
 * nav: N9 edge-aligned, sticky navy · footer: Ft2 inline single line · enrichment: Tier B hand-built pixel SVG (brand robot + pixel edges)
 * paper: #F5F7FA cool navy-tinted · accent: sand #E9B949 · ink: navy #14213D · type: PingFang SC (system, no web fonts) + system mono for numbers
 * axes: light / sans / warm-amber · tone: technical, plain-spoken · pre-emit critique: P4 H4 E4 S5 R4 V4
 * 一粟AI工坊作品集。只用本机字体，不加载任何外部资源。改颜色改下面 :root 里的变量。
 */

:root {
  /* 品牌色（brand/brand.css） */
  --navy: #14213D;
  --navy-2: #1F3A5F;
  --ink: #0E1726;
  --sand: #E9B949;
  --sand-hover: #F2C965;
  --sand-shade: #C99A2E;
  --sand-light: #F6E7C1;
  --cream: #FFF8EC;
  --teal: #2EC4B6;
  --red: #E63946;

  /* 浅色底上的中性色，都往 navy 偏一点 */
  --paper: #F5F7FA;
  --paper-2: #EEF1F6;
  --surface: #FFFFFF;
  --line: #DCE1EA;
  --line-2: #EAEDF3;
  --line-strong: #B9C2D2;
  --text: #14213D;
  --text-2: #45516A;
  --muted: #667189;

  /* navy 底上的文字和线 */
  --on-navy: #EEF1F7;
  --on-navy-2: #AFBACD;
  --navy-line: #2D466B;

  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;
  --font-num: "SF Mono", ui-monospace, Menlo, Consolas, "PingFang SC", "Microsoft YaHei", monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-28: 112px;
  --gutter: clamp(16px, 4vw, 40px);
  --wrap: 1160px;
  --nav-h: 60px;
  --edge: 16px;

  --radius-s: 6px;
  --radius: 10px;
  --radius-m: 14px;
  --radius-l: 18px;

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur: 160ms;

  --shadow: 0 1px 2px rgba(20, 33, 61, .06), 0 14px 34px -18px rgba(20, 33, 61, .38);

  /* 像素图标（data URI 里的颜色要和上面的变量保持一致） */
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7' shape-rendering='crispEdges'%3E%3Cpath fill='%2321A99C' d='M8 0h2v1H8zM7 1h2v1H7zM6 2h2v1H6zM0 3h2v1H0zM5 3h2v1H5zM1 4h2v1H1zM4 4h2v1H4zM2 5h3v1H2zM3 6h1v1H3z'/%3E%3C/svg%3E");
  --icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23E63946' d='M0 0h2v1H0zM6 0h2v1H6zM1 1h2v1H1zM5 1h2v1H5zM2 2h4v1H2zM3 3h2v2H3zM2 5h4v1H2zM1 6h2v1H1zM5 6h2v1H5zM0 7h2v1H0zM6 7h2v1H6z'/%3E%3C/svg%3E");
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%2314213D' d='M3 0h2v8H3zM0 3h8v2H0z'/%3E%3C/svg%3E");
  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%2314213D' d='M0 3h8v2H0z'/%3E%3C/svg%3E");
  --edge-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='%2314213D' d='M0 0h8v16H0zM8 0h16v8H8zM32 0h8v8h-8zM40 0h8v16h-8zM48 0h8v8h-8z'/%3E%3C/svg%3E");
}

/* ============================================================ 基础 */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--space-3));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--text);
  font: 400 16px/1.8 var(--font);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 60rem) { body { font-size: 17px; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
/* 标题只在标点和空格处换行（keep-all），不会把「中英双语」拆成两半；一段太长放不下时 anywhere 兜底 */
h1, h2, h3 { font-weight: 600; word-break: keep-all; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
li, dd, td { text-wrap: pretty; }   /* 列表、事实表、价格表里也别让最后一行只剩一两个字 */
.pixel { image-rendering: crisp-edges; image-rendering: pixelated; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--navy-2); outline-offset: 3px; border-radius: 4px; }
.nav :focus-visible, .hero :focus-visible, .section--nope :focus-visible,
.section--contact :focus-visible, .foot :focus-visible { outline-color: var(--sand); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--sand); color: var(--ink); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-s); font-weight: 600; text-decoration: none;
}
.skip:focus { top: var(--space-3); }

.num {
  font-family: var(--font-num);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.2;
}

/* ============================================================ 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 var(--space-6);
  border: 1px solid transparent; border-radius: var(--radius);
  font: 600 16px/1 var(--font); text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--sand { background: var(--sand); color: var(--ink); }
.btn--sand:hover { background: var(--sand-hover); }
.btn--ghost { border-color: var(--navy-line); color: var(--on-navy); }
.btn--ghost:hover { background: var(--navy-2); border-color: var(--navy-2); }
.btn--navy { background: var(--navy); color: var(--cream); }
.btn--navy:hover { background: var(--navy-2); }
.btn--line { background: var(--surface); border-color: var(--line-strong); color: var(--navy); }
.btn--line:hover { border-color: var(--navy); }

/* ============================================================ 顶栏 */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy); color: var(--on-navy);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out);
}
.nav.is-scrolled { border-bottom-color: var(--navy-line); }
.nav__in {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 17px; text-decoration: none; white-space: nowrap; color: var(--cream);
}
.brand img { width: 30px; height: 30px; }
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__links a {
  padding: 7px 10px; border-radius: 8px;
  color: var(--on-navy-2); font-size: 15px; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.nav__links a:hover { color: var(--on-navy); background: var(--navy-2); }
.nav__links a.nav__cta { margin-left: 6px; background: var(--sand); color: var(--ink); font-weight: 600; }
.nav__links a.nav__cta:hover { background: var(--sand-hover); }
.hide-s { display: none !important; }
@media (min-width: 54rem) {
  .hide-s { display: inline-flex !important; }
  .nav__links { gap: 4px; }
}

.en-ok {
  display: inline-flex; align-items: center;
  margin-left: 10px; padding: 1px 6px;
  border: 1px solid currentColor; border-radius: 4px;
  font: 600 11px/1.5 var(--font-num); letter-spacing: .06em; white-space: nowrap;
  opacity: .75;
}

/* ============================================================ Hero */
.hero { position: relative; background: var(--navy); color: var(--on-navy); }
.hero__in {
  display: grid; gap: var(--space-8);
  padding-top: var(--space-10); padding-bottom: var(--space-12);
}
.hero h1 {
  margin: 0;
  font-size: clamp(2.75rem, 5vw + 1.4rem, 5.25rem);
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--cream);
}
.hero__tagline {
  margin-top: var(--space-3);
  font-size: clamp(1.3rem, 1.4vw + .9rem, 1.85rem);
  line-height: 1.45; font-weight: 600; color: var(--sand);
}
.hero__lede { margin-top: var(--space-5); max-width: 30em; color: var(--on-navy-2); }
.hero__tags {
  list-style: none; margin: var(--space-6) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2) 10px;
}
.hero__tags li {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 5px 12px; border: 1px solid var(--navy-line); border-radius: 8px;
  font-size: 15px; line-height: 1.6; white-space: nowrap; color: var(--on-navy);
}
.px { display: inline-block; width: 8px; height: 8px; flex: none; }
.px--sand { background: var(--sand); }
.px--teal { background: var(--teal); }
.px--cream { background: var(--cream); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

.hero__art { display: flex; align-items: center; gap: var(--space-5); min-width: 0; }

/* 像素机器人：放在一张淡淡的像素格上，格子大小 = 机器人的一个像素 */
.robot { position: relative; flex: none; width: 112px; aspect-ratio: 1; }
.robot::before {
  content: ""; position: absolute; inset: -12.5%;
  background-image:
    linear-gradient(var(--navy-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--navy-line) 1px, transparent 1px);
  background-size: 2.5% 2.5%;
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
  opacity: .7;
}
.robot__img { position: relative; width: 100%; height: 100%; }
.robot__lid {
  position: absolute; top: 40.625%; width: 9.375%; height: 6.25%;
  background: var(--ink); opacity: 0;
}
.robot__lid--l { left: 31.25%; }
.robot__lid--r { left: 59.375%; }
.robot.is-blink .robot__lid { opacity: 1; }
.spark {
  position: absolute; width: 9.375%; aspect-ratio: 1; background: var(--navy-2);
  clip-path: polygon(33.3% 0, 66.6% 0, 66.6% 33.3%, 100% 33.3%, 100% 66.6%, 66.6% 66.6%, 66.6% 100%, 33.3% 100%, 33.3% 66.6%, 0 66.6%, 0 33.3%, 33.3% 33.3%);
}
.spark--a { left: -6%; top: 10%; }
.spark--b { right: -8%; top: 60%; background: var(--sand-shade); width: 6.25%; }
.spark--c { right: 4%; top: -2%; width: 3.125%; clip-path: none; }

.clock {
  flex: 1; min-width: 0;
  padding: var(--space-3) 14px;
  background: var(--ink); border: 1px solid var(--navy-line); border-radius: var(--radius);
  font-size: 13px; line-height: 1.65;
}
.clock__row { display: flex; align-items: center; gap: var(--space-2); font: 600 14px/1.6 var(--font-num); color: var(--on-navy); }
.clock__dot { width: 8px; height: 8px; flex: none; background: var(--on-navy-2); }
.clock.is-online .clock__dot { background: var(--teal); animation: dot 1.6s steps(2, jump-none) infinite; }
.clock__state { color: var(--on-navy); }
.clock__dxb { color: var(--on-navy-2); font-family: var(--font-num); font-size: 12px; }
@keyframes dot { 50% { opacity: .25; } }

@media (min-width: 40rem) {
  .robot { width: 176px; }
}
@media (min-width: 60rem) {
  .hero__in {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: center; gap: var(--space-12);
    padding-top: var(--space-20); padding-bottom: calc(var(--space-20) + var(--space-4));
  }
  .hero__art { flex-direction: column; gap: var(--space-8); }
  .robot { width: 288px; }
  .clock { flex: none; width: 300px; }
}

/* 像素台阶边：navy 往下"滴"进浅色区 */
.edge {
  position: absolute; left: 0; right: 0; height: var(--edge);
  background: var(--edge-tile) repeat-x 0 0 / 64px var(--edge);
  pointer-events: none;
}
.edge--down { bottom: calc(-1 * var(--edge)); }
.edge--into-navy { top: calc(-1 * var(--edge)); transform: scaleY(-1); }

/* ============================================================ 区块通用 */
.section { padding-block: var(--space-16); }
.hero + .section { padding-top: calc(var(--space-16) + var(--edge)); }
@media (min-width: 60rem) {
  .section { padding-block: 96px; }
  .hero + .section { padding-top: calc(96px + var(--edge)); }
}
.sec-head { max-width: 42em; margin-bottom: var(--space-10); }
.sec-head h2 {
  display: flex; align-items: center; gap: var(--space-3);
  margin: 0; font-size: clamp(1.75rem, 1.8vw + 1.1rem, 2.5rem); line-height: 1.3; color: var(--navy);
}
.sec-head h2::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--sand); }
.sec-head p { margin-top: var(--space-3); max-width: 34em; color: var(--text-2); }
.sec-head__meta { display: block; margin-top: var(--space-1); font-size: 14px; color: var(--muted); }
.sec-head--dark h2 { color: var(--cream); }
.sec-head--dark p { color: var(--on-navy-2); }
.fine { margin-top: var(--space-4); font-size: 14px; color: var(--muted); max-width: 42em; }

/* ============================================================ 能做什么 */
.svc { display: grid; gap: var(--space-4); }
.svc__item {
  display: flex; flex-direction: column; gap: var(--space-5); min-width: 0;
  padding: var(--space-6) var(--space-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
}
.svc__head { display: flex; align-items: center; gap: var(--space-3); }
.svc__head h3 { margin: 0; font-size: 1.5rem; line-height: 1.3; color: var(--navy); }
.glyph { width: 32px; height: 32px; flex: none; fill: var(--navy); }
.svc__note {
  margin-left: auto; padding: 1px 10px; border-radius: var(--radius-s);
  background: var(--sand); color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.svc__list { list-style: none; margin: 0; padding: 0; }
.svc__list li { display: grid; gap: 2px; padding: var(--space-3) 0; border-top: 1px solid var(--line-2); }
.svc__list li:first-child { border-top: 0; padding-top: 0; }
.svc__list b { font-weight: 600; color: var(--navy); }
.svc__list span { color: var(--text-2); font-size: .95em; }
.svc__list--plain li { position: relative; padding-left: 18px; color: var(--text-2); font-size: .95em; }
.svc__list--plain li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--space-3) + .9em - 3px);
  width: 6px; height: 6px; background: var(--sand-shade);
}
.svc__list--plain li:first-child::before { top: calc(.9em - 3px); }
.svc__price {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8);
  margin: auto 0 0; padding-top: var(--space-4); border-top: 1px dashed var(--line-strong);
}
.svc__price dt { font-size: 13px; color: var(--muted); }
.svc__price dd { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); }
.svc__price .num { font-size: 1.55rem; color: var(--navy); }
.svc__price .num--s { font-size: 1.15rem; }
.svc__price small { font-size: 13px; color: var(--muted); }

/* 主业那块用深色 */
.svc__item--dev { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.svc__item--dev .svc__head h3 { color: var(--cream); }
.svc__item--dev .glyph { fill: var(--sand); }
.svc__item--dev .svc__list li { border-top-color: var(--navy-line); }
.svc__item--dev .svc__list li:first-child { border-top: 0; }
.svc__item--dev .svc__list b { color: var(--cream); }
.svc__item--dev .svc__list span { color: var(--on-navy-2); }
.svc__item--dev .svc__price { border-top-color: var(--navy-line); }
.svc__item--dev .svc__price dt, .svc__item--dev .svc__price small { color: var(--on-navy-2); }
.svc__item--dev .svc__price .num { color: var(--sand); }

@media (min-width: 40rem) {
  .svc__item { padding: var(--space-8); }
  .svc__list:not(.svc__list--plain) li { grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--space-4); }
}
@media (min-width: 60rem) {
  .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  /* 开发是主业：整行宽，左边是能做的事，右边竖排起步价 */
  .svc__item--dev {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    grid-template-areas: "head head" "list price";
    column-gap: var(--space-12); padding: var(--space-10);
  }
  .svc__item--dev .svc__head { grid-area: head; }
  .svc__item--dev .svc__list { grid-area: list; }
  .svc__item--dev .svc__price {
    grid-area: price; flex-direction: column; justify-content: center; gap: var(--space-5);
    margin: 0; padding: 0 0 0 var(--space-10); border-top: 0; border-left: 1px dashed var(--navy-line);
  }
  .svc__item--dev .svc__price .num { font-size: 2rem; }
}

/* ============================================================ 案例 */
.case {
  display: grid; gap: var(--space-8);
  margin-top: var(--space-6); padding: var(--space-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
}
.case:first-of-type { margin-top: 0; }
.case__media { min-width: 0; }
.stage { position: relative; padding: 0 7% 13% 0; }
.case__cap { margin-top: var(--space-4); font-size: 13px; color: var(--muted); }
.shot { display: block; min-width: 0; }
.shot img, .slide img {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow);
}
.shot--side { position: absolute; right: 0; bottom: 0; }
.shot--phone { width: 25%; border-radius: var(--radius-m); border: 3px solid var(--surface); box-shadow: var(--shadow); }
.shot--sheet { width: 48%; }
.shot--sheet img { border-width: 3px; border-color: var(--surface); outline: 1px solid var(--line); }
a.shot:hover img { border-color: var(--line-strong); }

.case__media--ppt { display: grid; }
.slide { position: relative; margin: 0; min-width: 0; }
.slide--before { width: 72%; }
.slide--after { width: 80%; margin: -9% 0 0 auto; }
/* 标签放在图外面（原稿在左上、改后在右下），不压住幻灯片的标题 */
.slide figcaption {
  display: block; width: fit-content; margin: 0 0 var(--space-2);
  padding: 1px 10px; border-radius: var(--radius-s);
  font-size: 13px; font-weight: 600; line-height: 1.7; white-space: nowrap;
  background: var(--navy); color: var(--cream);
}
.slide--after figcaption { margin: var(--space-2) 0 0 auto; background: var(--sand); color: var(--ink); }
.slide--before img { filter: saturate(.85); }

.case__body { min-width: 0; }
.case__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: 14px; color: var(--text-2); }
.badge {
  display: inline-flex; padding: 1px 10px; border-radius: var(--radius-s);
  background: var(--sand-light); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.7; white-space: nowrap;
}
.case h3 { margin: var(--space-3) 0 0; font-size: clamp(1.35rem, .8vw + 1.05rem, 1.75rem); line-height: 1.45; color: var(--navy); }
.quote {
  margin: var(--space-5) 0 0; padding: 14px var(--space-5) var(--space-3);
  background: var(--cream); border: 1px solid var(--sand-light); border-radius: var(--radius-m);
}
.quote p { color: var(--navy); }
.quote footer { margin-top: 6px; font-size: 13px; color: var(--muted); }
.case__note { margin-top: var(--space-4); font-size: .95em; color: var(--text-2); }
.facts { margin: var(--space-5) 0 0; }
.facts > div { display: grid; gap: 2px; padding: var(--space-3) 0; border-top: 1px solid var(--line-2); }
.facts dt { font-size: 15px; font-weight: 600; color: var(--navy); }
.facts dd { margin: 0; font-size: .95em; color: var(--text-2); }
.case__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

@media (min-width: 40rem) {
  .case { padding: var(--space-8); }
  .facts > div { grid-template-columns: 6.5em minmax(0, 1fr); gap: var(--space-4); }
}
@media (min-width: 60rem) {
  .case {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: var(--space-12); padding: var(--space-10); align-items: start; margin-top: var(--space-8);
  }
  .case__media { position: sticky; top: calc(var(--nav-h) + var(--space-8)); }
  .case--flip .case__media { order: 2; }
}

/* ============================================================ AI 出图样例（有图才显示） */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 48rem) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } }
.gallery figure { margin: 0; min-width: 0; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }
.gallery figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); margin-top: var(--space-2); font-size: 13px; color: var(--text-2); }
.gallery figcaption span { padding: 0 6px; border-radius: 4px; background: var(--paper-2); color: var(--muted); font-size: 12px; white-space: nowrap; }

/* ============================================================ 价格 */
.ptable { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
.ptable table { width: 100%; border-collapse: collapse; }
.ptable thead th {
  padding: var(--space-3) var(--space-5); text-align: left;
  font-size: 13px; font-weight: 600; color: var(--muted);
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.ptable .grp th {
  padding: var(--space-4) var(--space-5) var(--space-2); text-align: left;
  font-size: 15px; color: var(--navy); background: var(--surface);
}
.ptable .grp th span { display: inline-flex; align-items: center; gap: 10px; }
.ptable .grp th span::before { content: ""; width: 8px; height: 8px; background: var(--sand); }
.ptable tbody + tbody .grp th { border-top: 1px solid var(--line); }
.ptable td { padding: 14px var(--space-5); vertical-align: top; border-top: 1px solid var(--line-2); min-width: 0; }
.ptable .grp + tr td { border-top: 0; }
.p-name b { display: block; font-weight: 600; color: var(--navy); word-break: keep-all; overflow-wrap: anywhere; }
.p-name span { display: block; font-size: 14px; color: var(--muted); }
.p-price .num { font-size: 1.3rem; color: var(--navy); }
.p-price .chip {
  display: inline-block; margin-left: var(--space-2); padding: 0 8px; border-radius: var(--radius-s);
  background: var(--paper-2); color: var(--text-2); font-size: 13px; line-height: 1.8; white-space: nowrap; vertical-align: 2px;
}
.p-price .chip--promo { background: var(--sand-light); color: var(--ink); font-weight: 600; }
.p-price .then { display: block; margin-top: 2px; font-size: 14px; color: var(--text-2); }
.p-note { font-size: 14px; color: var(--text-2); }
.p-note .extra { display: block; margin-top: 2px; color: var(--muted); }
.ptable col.c-name { width: 32%; }
.ptable col.c-price { width: 30%; }

@media (max-width: 47.99rem) {
  .ptable thead { display: none; }
  .ptable table, .ptable tbody, .ptable tr, .ptable td, .ptable th { display: block; }
  .ptable tr:not(.grp) { padding: 14px var(--space-4); border-top: 1px solid var(--line-2); }
  .ptable .grp + tr { border-top: 0; }
  .ptable td { padding: 0; border: 0; }
  .ptable td + td { margin-top: 6px; }
  .ptable .grp th { padding: var(--space-4) var(--space-4) var(--space-1); }
}

.pay { display: grid; gap: var(--space-4); margin-top: var(--space-10); }
.pay__card { min-width: 0; padding: var(--space-6) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.pay__card h3 { margin: 0; font-size: 1.2rem; color: var(--navy); }
.pay__card > p { margin-top: var(--space-2); font-size: .95em; color: var(--text-2); }
.pay__card > .pay__big { margin-top: var(--space-2); }
.pay__big .num { font-size: 1.6rem; color: var(--navy); }
.pay__card--maint { background: var(--cream); border-color: var(--sand-light); }
.tiers { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.tier__range { font: 600 15px/1.6 var(--font-num); color: var(--navy); }
.tier__range small { margin-left: var(--space-2); font: 400 14px var(--font); color: var(--muted); }
.tier__bar { display: flex; gap: 3px; margin-top: 6px; }
.tier__seg {
  display: flex; align-items: center; justify-content: center; min-width: 0; height: 30px;
  background: var(--navy-2); color: var(--cream); font: 600 13px/1 var(--font-num);
}
.tier__seg:first-child { background: var(--sand); color: var(--ink); }
@media (min-width: 40rem) { .pay__card { padding: var(--space-8); } }
@media (min-width: 60rem) {
  .pay { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .pay__card:first-child { grid-row: span 2; }
}

/* ============================================================ 流程 */
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.step { position: relative; min-width: 0; padding: 0 0 var(--space-8) 56px; }
.step:last-child { padding-bottom: 0; }
.step__n {
  position: absolute; left: 0; top: 0; width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--sand); color: var(--ink); font: 700 16px/1 var(--font-num);
}
.step::before {
  content: ""; position: absolute; left: 17px; top: 44px; bottom: 8px;
  border-left: 2px dashed var(--line-strong);
}
.step:last-child::before { display: none; }
.step h3 { margin: 2px 0 var(--space-1); font-size: 1.15rem; line-height: 1.5; color: var(--navy); }
.step p { font-size: .95em; color: var(--text-2); }
@media (min-width: 60rem) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-6); }
  .step { padding: 56px 0 0; }
  .step::before { left: 46px; right: calc(-1 * var(--space-6) + 10px); top: 17px; bottom: auto; border-left: 0; border-top: 2px dashed var(--line-strong); }
  .step:last-child::before { display: none; }
}

/* ============================================================ 为什么找我 */
.section--why { background: var(--surface); border-block: 1px solid var(--line); }
.why { display: grid; gap: var(--space-6); }
.why__head { margin-bottom: 0; }
.why__bot { width: 72px; height: 72px; margin-top: var(--space-6); }
.why__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.why__list li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--space-3);
  padding: var(--space-5) 0; border-top: 1px solid var(--line);
}
.why__list li::before {
  content: ""; grid-row: span 2; width: 20px; height: 14px; margin-top: 8px;
  background: var(--icon-check) no-repeat 0 0 / contain; image-rendering: pixelated;
}
.why__list h3 { margin: 0; font-size: 1.15rem; line-height: 1.6; color: var(--navy); }
.why__list p { margin-top: var(--space-1); color: var(--text-2); max-width: 34em; }
@media (min-width: 60rem) {
  .why { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-16); }
  .why__head { position: sticky; top: calc(var(--nav-h) + var(--space-10)); align-self: start; }
  .why__bot { width: 96px; height: 96px; }
}

/* ============================================================ 不接的活 */
.section--nope { position: relative; background: var(--navy); color: var(--on-navy); }
.nope { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--navy-line); }
.nope li { display: grid; gap: 2px; padding: var(--space-4) 0; border-bottom: 1px solid var(--navy-line); }
.nope b {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: 1.15rem; font-weight: 600; color: var(--cream);
  text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px;
}
.nope b::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--icon-x) no-repeat 0 0 / contain; }
.nope span { color: var(--on-navy-2); font-size: .95em; }
@media (min-width: 48rem) {
  .nope li { grid-template-columns: 13em minmax(0, 1fr); gap: var(--space-6); align-items: baseline; }
}

/* ============================================================ 问答 */
.faq { max-width: 50rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 18px 40px 18px 0; font-size: 1.1rem; font-weight: 600; line-height: 1.6; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: var(--icon-plus) no-repeat 0 0 / contain;
}
.faq details[open] summary::after { background-image: var(--icon-minus); }
.faq summary:hover { color: var(--navy-2); }
.faq details > div { padding: 0 0 var(--space-5); }
.faq details p { max-width: 36em; color: var(--text-2); }

/* ============================================================ 联系 */
.section--contact { position: relative; background: var(--navy); color: var(--on-navy); }
.contact { display: grid; gap: var(--space-8); }
.contact__head h2 { margin: 0; font-size: clamp(2rem, 2.4vw + 1.2rem, 3rem); line-height: 1.25; color: var(--cream); }
.contact__head p { margin-top: var(--space-4); max-width: 30em; color: var(--on-navy-2); }
.contact__head .contact__time { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--on-navy); font-size: 15px; }
.contact__time .en-ok { margin-left: 0; color: var(--sand); opacity: 1; }
.contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.contact__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label action" "value value" "hint hint";
  gap: 2px var(--space-4); align-items: center;
  padding: var(--space-4) var(--space-5); background: var(--navy-2); border-radius: var(--radius-m);
}
.contact__label { grid-area: label; font-size: 14px; color: var(--on-navy-2); }
.contact__value { grid-area: value; min-width: 0; font-size: 1.2rem; font-weight: 600; color: var(--cream); overflow-wrap: anywhere; }
.contact__value a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.contact__value code { font: 600 1.1rem var(--font-num); }
.contact__hint { grid-area: hint; font-size: 13px; color: var(--on-navy-2); }
.contact__item--main { background: var(--sand); }
.contact__item--main .contact__label, .contact__item--main .contact__hint { color: var(--navy-2); }
.contact__item--main .contact__value { color: var(--ink); font-size: 1.35rem; }
.copy {
  grid-area: action; justify-self: end;
  min-height: 34px; padding: 0 14px; border: 1px solid var(--navy-line); border-radius: 8px;
  background: transparent; color: var(--on-navy); font: 600 14px/1 var(--font); white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.copy:hover { background: var(--navy); border-color: var(--on-navy-2); }
.copy.is-done { border-color: var(--teal); color: var(--teal); }
@media (min-width: 40rem) {
  .contact__item { grid-template-columns: 5.5em minmax(0, 1fr) auto; grid-template-areas: "label value action" ". hint hint"; padding: var(--space-5) var(--space-6); }
}
@media (min-width: 60rem) {
  .contact { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-16); align-items: start; }
}

/* ============================================================ 页脚 */
.foot { background: var(--ink); color: var(--on-navy-2); font-size: 13px; }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-block: var(--space-5); }
.foot p { display: flex; flex-direction: column; gap: 2px; }
.foot b { color: var(--cream); font-weight: 600; }
@media (min-width: 40rem) {
  .foot p { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
  .foot p > span::before { content: "·"; margin-right: 10px; color: var(--navy-line); }
}
.foot a { color: var(--on-navy-2); text-decoration: none; white-space: nowrap; }
.foot a:hover { color: var(--cream); }
.foot .en-ok { margin-left: 0; }

/* ============================================================ 动效 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
}