/* =========================================================
   VJO 唯简 — theme.css  (V5 · 炭黑 + 白 + 珊瑚橙，参考 zipzipe.com.au)
   Loaded after styles.css. Re-skins the whole page; structure/class names untouched.
   Rule of thumb: dark page, white rounded "bento" blocks, ONE coral orange.
   ========================================================= */
/* Fonts: Sora 400–800 + Noto Sans SC 400/700/900 come from a <link> in index.html <head>. */

/* ---------- 1 · Tokens ---------- */
:root {
  /* V5 palette */
  --bg:         #161616;
  --bg-2:       #1E1E1E;
  --bg-3:       #262626;
  --paper:      #FFFFFF;
  --paper-2:    #F2F2F0;
  --ink:        #FFFFFF;
  --ink-2:      rgba(255, 255, 255, .72);
  --ink-3:      color-mix(in srgb, #FFFFFF 50%, transparent);
  --on-paper:   #161616;
  --on-paper-2: #5A5A5A;
  --on-paper-3: color-mix(in srgb, #161616 62%, #FFFFFF);              /* ≥ 4.5:1 on #FFF and #F2F2F0 */
  --line:       rgba(255, 255, 255, .12);
  --line-paper: #E6E6E3;
  --orange:     #FF4C33;              /* dark grounds, decoration, button fills */
  --orange-2:   #FF6A4D;              /* hover */
  --orange-ink: color-mix(in srgb, #FF4C33 75%, #161616);              /* orange TEXT on white / paper-2 (5.1:1 / 4.6:1) */
  --orange-glow: radial-gradient(closest-side, color-mix(in srgb, #FF4C33 15%, transparent), transparent);
  --err:        #FF4C33;
  --header-bg:  color-mix(in srgb, #161616 95%, transparent);
  --ledge:      #3A3A3A;              /* 3D offset shadow under pills */

  --r-sm: 12px;
  --r: 24px;
  --r-lg: 32px;
  --r-pill: 999px;

  /* legacy token names used throughout styles.css → remapped to V5 */
  --forest:    var(--bg);
  --forest-2:  var(--bg-2);
  --cream:     var(--paper-2);
  --on-dark:   #FFFFFF;
  --on-dark-2: rgba(255, 255, 255, .72);
  --orange-hover: var(--orange-2);
  --mint:      var(--paper-2);
  --peach:     var(--paper-2);
  --line-dark: rgba(255, 255, 255, .12);
  --score-2:   var(--orange);
  --score-3:   var(--orange);

  --fg: #FFFFFF;
  --fg-2: rgba(255, 255, 255, .72);
  --rule: rgba(255, 255, 255, .12);
  --ghost: #FFFFFF;

  --font-display: "Sora", "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
  --font-body:    "Sora", "Noto Sans SC", "PingFang SC", system-ui, sans-serif;

  --r-card: 28px;
  --r-form: 28px;
  --r-input: 14px;
  --cap: 0px;

  /* hand-drawn marks (SVG data-URIs) */
  --hd-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M146 9C96 1 26 6 10 34C-2 58 52 76 112 74C168 72 198 56 193 34C189 15 150 3 84 8' fill='none' stroke='%23FF4C33' stroke-width='3.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --hd-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 28' preserveAspectRatio='none'%3E%3Cpath d='M3 13C28 4 50 20 78 12S128 3 156 12S208 21 236 11S282 5 297 9' fill='none' stroke='%23FF4C33' stroke-width='4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M22 22C70 15 130 23 186 18S262 15 288 17' fill='none' stroke='%23FF4C33' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --hd-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M4 36C13 13 25 12 33 31S50 53 61 33S79 9 90 27S108 47 116 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --hd-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5v19M2.5 12h19M5.3 5.3l13.4 13.4M18.7 5.3 5.3 18.7' fill='none' stroke='%23161616' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --hd-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 5.5l6.5 6.5-6.5 6.5' fill='none' stroke='%23161616' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* light context: everything that sits on white / paper */
section.services > .wrap,
section.industries > .wrap,
section.timeline > .wrap,
section.showcase > .wrap,
section.about > .wrap,
section.faq > .wrap,
.report-card,
.chat-chip,
.price,
.form,
#contactForm,
.chat,
.concept,
.footer {
  --ink: #161616;
  --ink-2: #5A5A5A;
  --ink-3: var(--on-paper-3);
  --line: #E6E6E3;
  --fg: #161616;
  --fg-2: #5A5A5A;
  --rule: #E6E6E3;
  --ghost: #161616;
}
/* dark contexts keep the global (white-on-black) values */
.hero, .proof-bar, .ownership, section.contact, .header, .audit-form {
  --fg: #FFFFFF;
  --fg-2: rgba(255, 255, 255, .72);
  --rule: rgba(255, 255, 255, .12);
  --ghost: #FFFFFF;
}

/* ---------- 2 · Base ---------- */
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
}
::selection { background: var(--orange); color: #161616; }

h1, h2, h3, h4 { font-family: var(--font-display); }
h1:lang(zh), h2:lang(zh) { font-weight: 900; }
h2 {
  font-size: clamp(34px, 4.4vw, 64px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
h2:lang(zh) { line-height: 1.16; letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: anywhere; }
h3 { font-weight: 700; letter-spacing: -0.015em; }

/* keyword in an H2 (if copy ever wraps one) → hand-drawn orange underline */
h2 :is(em, mark, .hl),
:is(.pricing, .services, .industries, .timeline, .showcase, .about, section.faq) h2 :is(em, mark, .hl) {
  color: inherit;
  font-style: normal;
  padding-bottom: .14em;
  background: var(--hd-wave) 0 100% / 100% .26em no-repeat;
}

strong, b { font-weight: 600; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.skip { color: #161616; }

/* kicker: 8px orange square + small caps-spaced label */
.kicker {
  gap: 12px;
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.kicker:lang(zh) { font-size: 13px; letter-spacing: .14em; }
.kicker::before { width: 8px; height: 8px; border-radius: 2px; background: var(--orange); }

/* ---------- 3 · Buttons ---------- */
.btn { font-family: var(--font-body); font-weight: 600; }
.btn-primary {
  background: var(--paper);
  color: #161616;
  box-shadow: 0 6px 0 var(--ledge);
  transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.btn-primary:hover { background: var(--paper); transform: translateY(-2px); box-shadow: 0 8px 0 var(--ledge); }
.btn-primary:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ledge); }

.btn-ghost { background: transparent; color: var(--ghost); border: 1px solid var(--rule); }
.btn-ghost:hover,
:is(.price, .pricing, .services .svc:not(:nth-child(3n+1))) .btn-ghost:hover { background: #161616; border-color: #161616; color: #FFFFFF; }

.btn-dark { background: #161616; color: #FFFFFF; box-shadow: 0 6px 0 color-mix(in srgb, #161616 28%, transparent); }
.btn-dark:hover { background: var(--paper); color: #161616; }

/* links */
.link-btn { color: var(--fg); }
.link-btn:hover { color: var(--orange-ink); }
.contact-list a:hover { color: var(--orange); }

/* ---------- 4 · Header ---------- */
.header { color: var(--on-dark); }
.header.scrolled { background: var(--header-bg); border-bottom-color: var(--line-dark); }
.brand-mark { background: var(--orange); color: #FFFFFF; border-radius: 10px; }
.brand-name { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; }
.brand-cn { border-left-color: var(--rule); color: var(--fg-2); }
.nav a:not(.btn) { color: var(--ink-2); }
.nav a:not(.btn):hover,
.nav a[aria-current]:not(.btn) { color: #FFFFFF; }
.header .btn:not(.nav .btn) { box-shadow: 0 4px 0 var(--ledge); }
.header .btn:not(.nav .btn):hover { box-shadow: 0 6px 0 var(--ledge); }

/* language toggle: white segmented pill */
.lang { padding: 3px; border: 0; background: var(--paper); }
.lang button { color: var(--on-paper-2); }
.lang button:hover { color: #161616; }
.lang button[aria-pressed="true"] { background: #161616; color: #FFFFFF; }
.footer .lang { background: var(--paper-2); }

/* hamburger: transform-only animation (no `top` transition) */
.menu i { top: 21px; transition: transform .25s var(--ease); }
.menu i:nth-of-type(1) { top: 21px; transform: translateY(-4px); }
.menu i:nth-of-type(2) { top: 21px; transform: translateY(4px); }
.menu[aria-expanded="true"] i:nth-of-type(1) { top: 21px; transform: rotate(45deg); }
.menu[aria-expanded="true"] i:nth-of-type(2) { top: 21px; transform: rotate(-45deg); }

/* ---------- 5 · Section rhythm: dark page, white bento blocks ---------- */
section.services,
section.industries,
section.timeline,
section.showcase,
section.about,
section.faq {
  z-index: auto;
  margin-top: 0;
  padding: 12px 24px;
  border-radius: 0;
  background: var(--bg);
}
section.services > .wrap,
section.industries > .wrap,
section.timeline > .wrap,
section.showcase > .wrap,
section.about > .wrap,
section.faq > .wrap {
  max-width: 1520px;
  padding: 72px 64px;
  border-radius: var(--r-lg);
  background: var(--paper);
  color: var(--on-paper-2);
}
section.services { padding-top: 24px; }
section.faq { padding-bottom: 24px; }
section.ownership,
section.pricing,
section.contact { background: var(--bg); color: var(--ink-2); }
section.ownership { padding-block: 120px; }
section.pricing { padding-block: 24px 120px; }
section.contact { margin-top: 0; border-radius: 0; padding-block: 120px; }

.sec-head { margin-bottom: 56px; }
.sec-head h2 + p, .sec-head .sec-sub, .sec-note { color: var(--fg-2); }

/* ---------- 6 · Hero: centred single column ---------- */
.hero {
  min-height: 92vh;
  padding-block: calc(var(--header-h) + 28px) 104px;
  background: var(--bg);
  color: var(--ink-2);
}
/* hand-drawn white squiggles left & right (replace the old outline V) */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 26%;
  right: auto;
  width: 120px;
  height: 60px;
  aspect-ratio: auto;
  background: var(--hd-squiggle) center / contain no-repeat;
  opacity: .9;
  pointer-events: none;
}
.hero::before { left: max(24px, calc(50% - 680px)); transform: rotate(-14deg); }
.hero::after { left: auto; right: max(24px, calc(50% - 680px)); top: 33%; transform: scaleX(-1) rotate(-10deg); }

.hero-glow { --glow-size: 760px; top: min(100%, 900px); }

.hero > .wrap,
.hero :has(> .hero-copy) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;              /* report card top lands inside a 1440×900 first screen */
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1160px;
  text-align: center;
}
.hero-copy .kicker { color: #FFFFFF; margin-bottom: 18px; }
.hero .hero-copy h1 {
  max-width: none;
  margin-bottom: 20px;
  color: #FFFFFF;
  font-size: clamp(44px, 7vw, 96px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.03em;
  text-align: center;
}
.hero .hero-copy h1:lang(zh) { font-weight: 900; line-height: 1.12; letter-spacing: -0.01em; }

/* <em> → hand-drawn orange circle (stretches with the word, both languages) */
.hero h1 em,
.hero h1 :is(mark, .hl, strong) {
  color: #FFFFFF;
  font-style: normal;
  white-space: nowrap;
  padding: 0 .16em;
  margin: 0 -.07em 0 -.03em;
  background: var(--hd-circle) center / 100% 100% no-repeat;
}
/* (2026-10-17) The second-line wave was dropped with the new headline: line 2 is the circled <em>, so the circle is the only mark. */

.hero-sub {
  max-width: 640px;
  margin-inline: auto;
  color: var(--ink-2);
  font-size: 19px;
  line-height: 1.65;
}

/* ---------- audit form → one giant pill with a 3D ledge ---------- */
.audit-form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
  grid-template-rows: 76px auto auto;
  gap: 0;
  width: 100%;
  max-width: 900px;
  margin-top: 30px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: var(--ink-2);
  text-align: left;
}
.audit-form::before {
  content: "";
  grid-row: 1;
  grid-column: 1 / -1;
  z-index: 0;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #FFFFFF 8%, transparent), 0 10px 0 #2E2E2E;
}
.audit-form > * { grid-column: 1 / -1; }
.audit-form > .field {
  position: relative;
  z-index: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  margin: 6px 0;
  padding: 0 24px;
  border-radius: var(--r-pill);
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.audit-form > .field:nth-of-type(1) { grid-column: 1; margin-left: 6px; padding-left: 30px; }
.audit-form > .field:nth-of-type(2) { grid-column: 2; }
.audit-form > .field:nth-of-type(2)::before {
  content: "";
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 1px;
  background: var(--line);
}
.audit-form > .field:focus-within { background: var(--bg-3); }
.audit-form > .field:focus-within::before,
.audit-form > .field:focus-within + .field::before { opacity: 0; }
.audit-form > .field.invalid { box-shadow: inset 0 0 0 2px var(--orange); }
.audit-form label {
  margin: 0 0 2px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
}
.audit-form > .field:focus-within label { color: var(--orange); }
.audit-form .field input,
.audit-form .field input:focus,
.audit-form .field input:focus-visible {
  height: 30px;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  color: #FFFFFF;
  font-size: 17px;
}
.audit-form .field input::placeholder { color: color-mix(in srgb, #FFFFFF 42%, transparent); }
.audit-form .field input[aria-invalid="true"] { box-shadow: none; }
html .audit-form .field input:focus { background-size: 100% 2px; }
.audit-form .field input:-webkit-autofill {
  -webkit-text-fill-color: #FFFFFF;
  box-shadow: 0 0 0 40px var(--bg-3) inset;
  transition: background-color 9999s;
}
.audit-form .err {
  position: absolute;
  top: calc(100% + 22px);
  left: 30px;
  margin: 0;
  color: var(--orange);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.audit-form > .field:nth-of-type(2) .err { left: 24px; }
.audit-form .btn,
.audit-form button[type="submit"] {
  position: relative;
  z-index: 1;
  grid-row: 1;
  grid-column: 3;
  width: auto;
  min-height: 0;
  margin: 8px 8px 8px 4px;
  padding: 0 14px 0 28px;
  gap: 14px;
  background: var(--orange);
  color: #161616;
  font-size: 16px;
  font-weight: 700;
  box-shadow: none;
}
.audit-form .btn:hover { background: var(--orange-2); transform: none; box-shadow: none; }
.audit-form .btn:active { transform: scale(.97); box-shadow: none; }
.audit-form .btn:not([aria-busy="true"])::after {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: #161616;
  -webkit-mask: var(--hd-arrow) center / 20px no-repeat, linear-gradient(#161616 0 0);
  -webkit-mask-composite: xor;
  mask: var(--hd-arrow) center / 20px no-repeat exclude, linear-gradient(#161616 0 0);
  transition: transform .25s var(--ease);
}
.audit-form .btn:hover::after { transform: translateX(3px); }
.audit-form :is(.audit-note, .form-note) {
  margin-top: 22px;
  color: var(--ink-3);
  font-size: 13px;
  letter-spacing: .02em;
  text-align: center;
}
.audit-form:has(.field.invalid) .audit-note { visibility: hidden; }
.audit-form .audit-status { margin-top: 14px; text-align: center; color: var(--ink-2); }
.audit-form .form-status.ok,
.audit-form .form-status.error { background: var(--bg-2); color: #FFFFFF; box-shadow: inset 3px 0 0 var(--orange); text-align: left; }

/* trust line */
.hero-trust {
  justify-content: center;
  gap: 10px 28px;
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 13px;
}
.hero-trust > *::before { background: var(--orange); }
.hero-trust strong, .hero-trust b { color: #FFFFFF; }

/* ---------- report card: 720px white card under the form ---------- */
.audit-visual {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  color: var(--on-paper-2);
}
.audit-visual::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cpath id='c' d='M60,60 m-45,0 a45,45 0 1,1 90,0 a45,45 0 1,1 -90,0'/%3E%3C/defs%3E%3Ctext font-family='PingFang SC,Helvetica Neue,Arial,sans-serif' font-size='10.5' font-weight='600' fill='%23161616'%3E%3CtextPath href='%23c' textLength='281' lengthAdjust='spacing'%3E%E4%B8%AD%E8%8B%B1%E5%8F%8C%E8%AF%AD %C2%B7 %E4%B8%8D%E7%94%A8%E6%B3%A8%E5%86%8C %C2%B7 %E4%B8%8D%E6%8E%A8%E9%94%80 %C2%B7 %3C/textPath%3E%3C/text%3E%3C/svg%3E") center / 100% 100% no-repeat,
    var(--orange);
}
html[lang^="en"] .audit-visual::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cpath id='c' d='M60,60 m-45,0 a45,45 0 1,1 90,0 a45,45 0 1,1 -90,0'/%3E%3C/defs%3E%3Ctext font-family='PingFang SC,Helvetica Neue,Arial,sans-serif' font-size='9.5' font-weight='600' fill='%23161616'%3E%3CtextPath href='%23c' textLength='281' lengthAdjust='spacing'%3EBilingual %C2%B7 No sign-up %C2%B7 No hard sell %C2%B7 %3C/textPath%3E%3C/text%3E%3C/svg%3E") center / 100% 100% no-repeat,
    var(--orange);
}
.audit-visual::after { color: #161616; font-family: var(--font-display); }
/* tighter hero gap (48px) → keep the "2 分钟" stamp clear of the trust line */
@media (min-width: 961px) {
  .audit-visual::before,
  .audit-visual::after { top: -24px; left: -64px; }
}

.report-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 44px;
  align-content: start;
  padding: 48px 48px 44px;
  background: var(--paper);
  border-radius: 28px;
  color: var(--on-paper-2);
  rotate: 1.5deg;
  box-shadow: 0 40px 80px -40px color-mix(in srgb, #161616 70%, transparent);
}
.report-card :is(.report-head, header) { grid-column: 1 / -1; border-bottom-color: var(--line-paper); }
.report-card :is(h2, h3, h4, .report-title) { color: #161616; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.report-card :is(.report-meta, .report-url) { color: var(--on-paper-3); }
.report-card .score-bar { grid-column: 1; }
.report-card .score-bar,
.report-card .score-bar :is(b, strong) { color: #161616; }
.report-card .score-bar:nth-child(n of .score-bar) { --fill: var(--orange); }
.score-bar::before { background: var(--paper-2); }
.report-card .report-list {
  grid-column: 2;
  grid-row: 2 / span 3;
  align-self: start;
  margin-top: 16px;
  padding: 0 0 0 32px;
  border-top: 0;
  border-left: 1px solid var(--line-paper);
}
.report-list-t { color: #161616; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.report-list li { color: var(--on-paper-2); }
.report-list li::before { background: var(--orange); color: #161616; font-family: var(--font-display); }
html.motion .report-card .score-n { color: var(--on-paper-3); }

/* chat chip: white bubble card over the top-right corner */
.chat-chip {
  top: -40px;
  right: -64px;
  bottom: auto;
  width: 280px;
  padding: 16px;
  background: var(--paper);
  color: #161616;
  border-radius: 20px;
  rotate: -2deg;
  box-shadow: 0 8px 0 var(--ledge), 0 28px 50px -20px color-mix(in srgb, #161616 60%, transparent);
}
.chat-chip > :is(p, span:not(.dot), div, .bubble) { background: var(--paper-2); color: #161616; }
.chat-chip > :is(p, span:not(.dot), div, .bubble):nth-child(even of :is(p, span:not(.dot), div, .bubble)),
.chat-chip > :is(.me, .user, .bot) { background: #161616; color: #FFFFFF; }
.chat-chip > :is(.chip-head, .chat-chip-head, small, header) { background: none; color: var(--on-paper-2); }
.chat-chip .dot { background: var(--orange); box-shadow: 0 0 0 3px var(--paper); }

.illus-label { margin-top: 48px; color: var(--ink-3); text-align: center; }

/* ---------- 7 · Proof bar → four dark tiles ---------- */
.proof-bar {
  padding: 0 24px 12px;
  background: var(--bg);
  color: #FFFFFF;
}
.proof-bar > .wrap,
.proof-bar :has(> .proof) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 1520px;
  padding: 0;
}
.proof,
.proof:first-child {
  gap: 16px;
  padding: 24px 26px;
  border: 1px solid color-mix(in srgb, #FFFFFF 6%, transparent);
  border-radius: var(--r);
  background: var(--bg-2);
  color: #FFFFFF;
  font-size: 16px;
}
.proof svg { width: 30px; height: 30px; color: var(--orange); }
.proof :is(small, span) { color: var(--ink-2); }

/* ---------- 8 · Services: three paper-2 cards in a white block ---------- */
.services .svc-grid { gap: 16px; }
.services .svc-grid > .svc {
  --fg: #161616;
  --fg-2: #5A5A5A;
  --rule: #E6E6E3;
  --ghost: #161616;
  padding: 36px 32px 32px;
  border-radius: var(--r);
  background: var(--paper-2);
  color: var(--on-paper-2);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.services .svc-grid > .svc:hover {
  --fg: #FFFFFF;
  --fg-2: rgba(255, 255, 255, .72);
  --rule: color-mix(in srgb, #FFFFFF 14%, transparent);
  --ghost: #FFFFFF;
  background: #161616;
  color: rgba(255, 255, 255, .72);
}
.services .svc-grid > .svc .svc-num {
  margin-bottom: 32px;
  color: var(--orange);
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -0.05em;
}
.services .svc-grid > .svc h4 { letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.services .svc-grid > .svc .svc-list li::before { background: var(--orange-ink); }
.services .svc-grid > .svc:hover .svc-list li::before { background: var(--orange); }
.services .svc-grid > .svc:hover .link-btn:hover { color: var(--orange); }

/* ---------- 9 · Industries: 2×2 cards ---------- */
.ind-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.ind-grid > * {
  padding: 36px 34px 38px;
  border-radius: var(--r);
  background: var(--paper-2);
  transition: background-color .3s var(--ease);
}
.ind-grid > *:hover {
  --ink: #FFFFFF;
  --ink-2: rgba(255, 255, 255, .72);
  --ink-3: color-mix(in srgb, #FFFFFF 50%, transparent);
  --line: color-mix(in srgb, #FFFFFF 14%, transparent);
  background: #161616;
}
.ind-grid > * > :is(h3, strong:first-child) { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.ind-grid > * > :is(.ind-sub, h3 + span, strong:first-child + span) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
  font-weight: 600;
}
.ind-grid > * > .ind-sub::before {
  content: "";
  width: 8px; height: 8px;
  flex: none;
  border-radius: 2px;
  background: var(--orange);
}
.ind-grid p + p { border-top-color: var(--line); }
.ind-x { color: var(--ink-3); font-size: 13px; line-height: 1.55; }

/* six industries → 3 × 2, each card ends with "AI 不做" + a link to its page */
.ind-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ind-grid-6 > * { display: flex; flex-direction: column; padding: 32px 30px 30px; }
.ind-grid-6 > * > :is(h3) { font-size: 26px; }
.ind-grid-6 .ind-x {
  display: block;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}
.ind-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 20px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(var(--orange), var(--orange)) 0 100% / 0% 2px no-repeat;
  transition: background-size .3s var(--ease), color .2s var(--ease);
}
.ind-link:hover,
.ind-link:focus-visible { background-size: 100% 2px; }
@media (max-width: 1100px) { .ind-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 10 · Ownership: charcoal, 2×2 dark tiles ---------- */
.ownership > .wrap,
.ownership :has(> .own-list) { display: block; }
.ownership h2 { max-width: 16em; color: #FFFFFF; font-size: clamp(40px, 5.4vw, 80px); }
.ownership h2:lang(zh) { font-weight: 900; }
.ownership h2 + p { max-width: 640px; color: var(--ink-2); }
.own-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 56px;
}
.own-list li,
.own-list li:last-child {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 18px;
  padding: 30px 32px;
  border: 1px solid color-mix(in srgb, #FFFFFF 6%, transparent);
  border-radius: var(--r);
  background: var(--bg-2);
  color: #FFFFFF;
}
.own-list li::before { width: 36px; height: 36px; background: var(--orange); }
.own-list li strong { display: block; color: #FFFFFF; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.own-list li :is(small, span) { margin-top: 6px; color: var(--ink-2); }
html.motion .own-line { left: -1px; }

/* ---------- 11 · Pricing: charcoal, two big plan cards (no figures, DECISIONS-2026-10-17) ---------- */
.price-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  align-items: stretch;
}
.price,
.price + .price:not(.featured),
.price.featured + .price {
  padding: 56px 56px 48px;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: none;
  color: var(--on-paper-2);
}
.price-kind {
  margin: 0 0 10px;
  color: var(--on-paper-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.price h3 {
  margin: 0 0 14px;
  color: #161616;
  font-size: clamp(40px, 4.2vw, 60px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.price h3:lang(zh) { font-weight: 900; letter-spacing: -0.01em; }
.price .price-desc { max-width: 30em; color: var(--on-paper-2); font-size: 18px; line-height: 1.6; }
.price ul { margin-top: 32px; padding-top: 28px; gap: 14px; border-top-color: var(--line-paper); }
.price li { color: #161616; font-size: 16px; }
.price li::before { background: var(--orange-ink); }
.price :is(.price-fit, .fit) { margin-top: 28px; color: var(--on-paper-2); font-size: 15px; }
.price small { color: var(--on-paper-3); }
/* Care Plan 加购说明（不写金额，价格同样书面报） */
.price .price-addon {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--paper-2);
  color: var(--on-paper-2);
  font-size: 14px;
  line-height: 1.6;
}
.price .price-addon strong { color: #161616; font-weight: 700; }
html:lang(en) .price .price-addon strong { margin-inline-end: .3em; } /* 中文全角冒号自带空隙，英文补一个词距 */
.price .price-quote {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 32px;
  color: #161616;
  font-size: 14px;
  font-weight: 600;
}
.price .price-quote::before {
  content: "";
  width: 8px; height: 8px;
  flex: none;
  border-radius: 2px;
  background: var(--orange);
}
.price .btn { margin-top: 0; min-height: 56px; }

.price.featured {
  --ink: #161616;
  --ink-2: color-mix(in srgb, #161616 78%, transparent);
  --ink-3: color-mix(in srgb, #161616 72%, transparent);
  --fg: #161616;
  --fg-2: color-mix(in srgb, #161616 78%, transparent);
  background: var(--orange);
  color: color-mix(in srgb, #161616 80%, transparent);
}
.price.featured :is(h3, li, .price-fit strong, .price-quote) { color: #161616; }
.price.featured :is(.price-desc, .price-fit, small, .price-kind) { color: color-mix(in srgb, #161616 80%, transparent); }
.price.featured ul { border-top-color: color-mix(in srgb, #161616 18%, transparent); }
.price.featured li::before,
.price.featured .price-quote::before { background: #161616; }
.price :is(.price-tag, .badge, .price-badge) {
  position: static;
  align-self: flex-start;
  height: 30px;
  margin-bottom: 28px;
  background: #161616;
  color: #FFFFFF;
}
.price-note { color: var(--ink-3); }
.price-note strong, .price-note b { color: var(--orange); }

/* ---------- 12 · Timeline: five paper-2 cards with orange progress tab ---------- */
.tl { gap: 14px; }
.tl-item {
  padding: 30px 22px 26px;
  border: 0;
  border-radius: var(--r);
  background: var(--paper-2);
  color: var(--on-paper-2);
}
.tl-item:nth-child(even of .tl-item) { background: var(--paper-2); }
.tl-item:first-child, .tl-item.current, .tl-item[aria-current] { border-color: transparent; }
.tl-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  width: calc((100% - 44px) * var(--n, 1) / 5);
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--orange);
}
.tl-item:nth-child(1) { --n: 1; }
.tl-item:nth-child(2) { --n: 2; }
.tl-item:nth-child(3) { --n: 3; }
.tl-item:nth-child(4) { --n: 4; }
.tl-item:nth-child(5) { --n: 5; }
.tl-item::before,
.tl-item:first-child::before { color: #161616; font-family: var(--font-display); }
.tl-item :is(.tl-time, .tl-when, time) {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--orange);
  color: #161616;
  font-size: 13px;
  font-weight: 700;
}
.tl-item h3 { font-weight: 800; letter-spacing: -0.02em; }
.tl-item dt { color: #161616; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }
.tl-svg .tl-base { stroke: var(--line-paper); }

/* ---------- 13 · Showcase: dark stages, white mocks ---------- */
.showcase .sc-grid { gap: 16px; }
.concept {
  padding: 12px 12px 26px;
  border-radius: var(--r);
  background: var(--paper-2);
}
.concept-stage { border-radius: 18px; background: #161616; }
.demo-tag { background: var(--orange); color: #161616; font-weight: 700; }
.concept figcaption strong { color: #161616; font-weight: 800; }
.concept figcaption > span:not(.demo-tag) { color: var(--on-paper-2); }
.cl-eyebrow { color: var(--orange-ink); }
.cl-btn { background: var(--orange); color: #161616; }
.cl-photo { background: var(--paper-2); }
.cl-photo::before { background: var(--orange); }
.ch-head { background: #161616; color: #FFFFFF; border-bottom: 1px solid var(--line-paper); }
.ch-head .dot { background: var(--orange); }
.ch-b.user { background: #161616; color: #FFFFFF; }
.ch-b.bot { background: var(--paper-2); color: #161616; }
.ch-handoff { background: var(--orange); color: #161616; }
.q-arrow { background: var(--orange); }
.q-arrow::after { border-color: var(--orange); }
.q-summary { box-shadow: inset 0 3px 0 var(--orange); }

/* ---------- 14 · About ---------- */
.about h2 { font-size: clamp(36px, 4.8vw, 64px); }
.about h2:lang(zh) { font-weight: 900; }
.about p:not(.kicker) { color: var(--on-paper-2); }
.about-body > p:first-child { color: #161616; }
.principles li { border-radius: var(--r); background: var(--paper-2); }
.principles strong { color: #161616; font-weight: 700; }
.principles span { color: var(--on-paper-2); }

/* ---------- 15 · FAQ ---------- */
section.faq details {
  border-radius: 20px;
  background: var(--paper-2);
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}
section.faq details[open] { box-shadow: inset 3px 0 0 var(--orange); }
section.faq summary { color: #161616; }
section.faq details > :not(summary) { color: var(--on-paper-2); }

/* ---------- 16 · Contact: charcoal + white form card ---------- */
section.contact h2 { color: #FFFFFF; font-size: clamp(40px, 5.6vw, 80px); }
section.contact h2:lang(zh) { font-weight: 900; }
.contact-copy > p:not(.kicker) { color: var(--ink-2); }
.contact-list { border-top-color: var(--line-dark); }
.contact-list li { border-bottom-color: var(--line-dark); }
.contact-list li > span { color: var(--ink-2); }
.contact-list strong, .contact-list a { color: #FFFFFF; }

.form,
#contactForm {
  padding: 40px;
  border-radius: 28px;
  background: var(--paper);
  color: var(--on-paper-2);
}
.form-demo {
  border-radius: var(--r-sm);
  background: var(--paper-2);
  box-shadow: inset 3px 0 0 var(--orange);
  color: #161616;
}
.form .field label { color: #161616; }
.field abbr, .req-note abbr { color: var(--orange-ink); }
.req-note { color: var(--on-paper-3); }
.form .field :is(input, select) { height: 56px; }
.form .field :is(input, select, textarea) {
  border-radius: var(--r-input);
  background-color: var(--paper-2);
  color: #161616;
}
.form .field :is(input, select, textarea):focus,
.form .field :is(input, select, textarea):focus-visible {
  background-color: var(--paper);
  box-shadow: 0 0 0 2px var(--orange);
}
.form .field :is(input, textarea)::placeholder { color: var(--on-paper-3); }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23161616' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.form .err { color: var(--orange-ink); font-weight: 600; }
.form input[aria-invalid="true"],
.form textarea[aria-invalid="true"],
.form .field.invalid :is(input, select, textarea) { box-shadow: inset 0 0 0 2px var(--orange); }
.form .btn-primary {
  background: #161616;
  color: #FFFFFF;
  box-shadow: 0 6px 0 var(--line-paper);
}
.form .btn-primary:hover { background: var(--orange); color: #161616; box-shadow: 0 8px 0 var(--line-paper); }
.form .btn-primary:active { box-shadow: 0 2px 0 var(--line-paper); }
.form-status.ok { background: var(--paper-2); color: #161616; box-shadow: inset 3px 0 0 #161616; }
.form-status.error { background: var(--paper-2); color: var(--orange-ink); box-shadow: inset 3px 0 0 var(--orange); }

/* ---------- 17 · Ticker: dark-grey pill, white words, orange stars ---------- */
.ticker {
  display: flex;
  align-items: center;
  height: 72px;
  margin: 0 24px 24px;
  padding: 0;
  border: 1px solid color-mix(in srgb, #FFFFFF 6%, transparent);
  border-radius: var(--r-pill);
  background: var(--bg-3);
  color: #FFFFFF;
  -webkit-mask-image: linear-gradient(90deg, transparent, #161616 5%, #161616 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #161616 5%, #161616 95%, transparent);
}
.ticker-track { flex: none; }
.ticker-track span {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ticker-track span::after {
  width: 18px;
  height: 18px;
  margin-inline: 30px;
  border-radius: 0;
  background: var(--orange);
  -webkit-mask: var(--hd-star) center / contain no-repeat;
  mask: var(--hd-star) center / contain no-repeat;
}

/* ---------- 18 · Footer: white rounded block ---------- */
.footer {
  margin: 0 24px 24px;
  padding-top: 64px;
  border-radius: var(--r-lg);
  background: var(--paper);
  color: var(--on-paper-2);
}
.footer > .wrap:first-child,
.footer-grid { padding-top: 0; border-top: 0; }
.footer > .wrap:first-child:has(> .footer-grid) > .footer-grid { padding-top: 0; }
.footer p { color: var(--on-paper-2); }
.footer .footer-full { color: #161616 !important; }
.footer .brand { color: #161616; }
.footer .brand-mark { color: #FFFFFF; }
.footer-nav a,
.footer a:not(.brand):not(.btn) { color: #161616; font-weight: 500; }
.footer-nav a:hover,
.footer a:not(.brand):not(.btn):hover { color: var(--orange-ink); }
.footer h4 { color: #161616; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.footer-ind { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-ind h4 { margin-bottom: 4px; }
.footer-end {
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line-paper);
}
.footer-legal { display: flex; gap: 24px; margin: 0; }
.footer-legal a { font-size: 13px; }
.footer-end .footer-copy { margin-left: auto; }
.footer-areas { gap: 8px; color: #161616; }
.footer-areas > :is(span, a) {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 1.5px solid #161616;
  border-radius: var(--r-pill);
  color: #161616;
  font-size: 13px;
  font-weight: 600;
}
.footer-areas > :is(span, a):not(:last-child)::after { content: none; color: transparent; }
.footer .footer-areas > a:hover { border-color: var(--orange-ink); color: var(--orange-ink); }
.footer-areas > :is(strong, b, h4, .label) { color: #161616; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.footer .footer-social > * { border-color: var(--line-paper); color: #161616 !important; }
.footer .footer-social > a:hover { border-color: #161616; }
.footer-copy { color: var(--on-paper-3) !important; }
.footer-badge { color: #161616; margin-top: 28px; }
.footer::after { color: #161616; font-family: var(--font-display); font-weight: 800; }

/* ---------- 19 · Chat demo ---------- */
.chat-fab {
  background: #161616;
  color: #FFFFFF;
  border: 1.5px solid color-mix(in srgb, #FFFFFF 22%, transparent);
  box-shadow: 0 6px 0 color-mix(in srgb, #161616 35%, transparent), 0 16px 30px -14px color-mix(in srgb, #161616 60%, transparent);
}
.chat-fab:hover,
.chat-fab[aria-expanded="true"] { background: var(--bg-3); }
.chat-fab svg { color: var(--orange); }
.chat {
  border-color: var(--line-paper);
  border-radius: 28px;
  box-shadow: 0 30px 60px -24px color-mix(in srgb, #161616 60%, transparent);
}
.chat-head { background: #161616; color: #FFFFFF; }
.chat-head strong { color: #FFFFFF; }
.chat-head .demo-tag { background: var(--orange); color: #161616; }
.chat-close { color: #FFFFFF; }
.chat-close:hover { background: var(--bg-3); }
.msg.user { background: #161616; color: #FFFFFF; }
.msg.bot { background: var(--paper-2); color: #161616; }
.msg.bot a:hover { color: var(--orange-ink); }
.chat-quick button { border-color: var(--line-paper); color: #161616; }
.chat-quick button:hover { border-color: #161616; background: var(--paper-2); }
.chat-input { border-top-color: var(--line-paper); }
.chat-input input { background: var(--paper-2); color: #161616; }
.chat-input input:focus,
.chat-input input:focus-visible { box-shadow: 0 0 0 2px var(--orange); background: var(--paper); }
.chat-input button { background: var(--orange); color: #161616; }
.chat-input button:hover { background: var(--orange-2); }
.chat-foot { color: var(--on-paper-3); }

/* =========================================================
   20 · AI 落地改版（AI-AUTOMATION-SPEC，2026-10-17）
   三件事（01+03 左列，02 AI 右侧通高） · "我们做过的"真实项目（炭黑直排，和白底的概念演示区分）· 三张月费卡
   ========================================================= */

/* ---------- 20a · Services: three cards. 01 + 03 stack on the left, 02 (AI, two parts) runs tall on the right ---------- */
.services .svc-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.services .svc-grid-3 > .svc { padding: 44px 44px 40px; }
.services .svc-grid-3 > .svc h3 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.services .svc-grid-3 > .svc h3:lang(zh) { font-weight: 900; letter-spacing: 0; }
@media (min-width: 761px) {
  .services .svc-grid-3 > .svc:nth-child(1) { grid-column: 1; grid-row: 1; }
  .services .svc-grid-3 > .svc:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
  .services .svc-grid-3 > .svc:nth-child(3) { grid-column: 1; grid-row: 2; }
}
@media (min-width: 1200px) {
  /* wide cards: deliverables in two columns so the left-hand cards stay short */
  .services .svc-grid-3 > .svc:not(.svc-ai) .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
}
/* card 02: outward (AI front desk) + inward (automation tools) as two inner panels that share the tall card's height */
.services .svc-ai .svc-split { flex: 1 0 auto; display: grid; grid-auto-rows: 1fr; gap: 12px; margin-top: 28px; }
.services .svc-part {
  padding: 26px 28px 24px;
  border-radius: 20px;
  background: var(--paper);
  transition: background-color .3s var(--ease);
}
.services .svc-grid > .svc:hover .svc-part { background: var(--bg-3); }
.services .svc-part h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--fg);
  font-size: 16px;
  letter-spacing: .02em;
  text-transform: none;
}
.services .svc-part h4::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--orange); }
.services .svc-part .svc-list { gap: 12px; }
.services .svc-part .svc-list li { font-size: 16px; }
.services .svc-ai .svc-fit { margin-top: 0; }
.services .svc-part { display: flex; flex-direction: column; }
.services .svc-mini-chat,
.services .svc-flow { margin-top: auto; padding-top: 22px; }
.services .svc-mini-chat { display: grid; gap: 8px; }
.services .svc-mini-chat p {
  max-width: 84%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  background: var(--paper-2);
  color: #161616;
  font-size: 14px;
  line-height: 1.5;
}
.services .svc-mini-chat p:first-child { justify-self: end; border-radius: 16px 16px 4px 16px; background: #161616; color: #FFFFFF; }
.services .svc-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; margin-bottom: 0; }
.services .svc-flow span {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.services .svc-flow span { position: relative; }
.services .svc-flow span + span { margin-left: 22px; }
.services .svc-flow span + span::before { content: "→"; position: absolute; left: -23px; color: var(--orange-ink); font-weight: 700; }
.services .svc-flow span:last-child { border-color: var(--orange); }
.services .svc-grid > .svc:hover .svc-mini-chat p:not(:first-child) { background: var(--bg-2); color: #FFFFFF; }
.services .svc-grid > .svc:hover .svc-mini-chat p:first-child { background: var(--paper); color: #161616; }
.services .svc-edge-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.services .svc-edge-2 p { margin: 0; }
.services .svc-edge-2 p + p { padding-left: 18px; border-left: 1px solid var(--rule); }
.services .svc-links { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 0; }
.services .svc .svc-edge {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--paper);
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.65;
  transition: background-color .3s var(--ease);
}
.services .svc .svc-edge strong {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--fg);
  font-size: 13px;
  font-weight: 700;
}
.services .svc .svc-edge strong::before {
  content: "";
  width: 8px; height: 8px;
  flex: none;
  border-radius: 2px;
  background: var(--orange);
}
.services .svc-grid > .svc:hover .svc-edge { background: var(--bg-3); }
.services .svc a.link-btn { text-decoration-color: var(--orange); }

/* ---------- 20b · Work: real projects on charcoal ---------- */
section.work {
  position: relative;
  padding: 120px 24px;
  background: var(--bg);
  color: var(--ink-2);
}
section.work > .wrap { max-width: 1520px; padding: 0; }
.work .sec-head { padding-inline: 64px; }
.work .sec-head h2 { color: #FFFFFF; font-size: clamp(40px, 5.4vw, 80px); }
.work .sec-head-split > .sec-note { max-width: 40ch; color: var(--ink-2); font-size: 16px; }

.work-list { display: grid; gap: 24px; }
.case {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 64px;
  padding: 64px;
  border: 1px solid color-mix(in srgb, #FFFFFF 7%, transparent);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  color: var(--ink-2);
}
.case-main { min-width: 0; }
.case-side { display: flex; flex-direction: column; min-width: 0; }

.case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 28px; }
.case-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.case-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.case-tag-client { background: var(--paper); color: #161616; }
.case-tag-client::before { background: var(--orange); }
.case-tag-own { border: 1.5px solid color-mix(in srgb, #FFFFFF 55%, transparent); color: #FFFFFF; }
.case-tag-own::before { border: 2px solid var(--orange); }
.case-ind { color: var(--ink-3); font-size: 14px; font-weight: 600; }

.case h3 {
  margin: 0 0 36px;
  color: #FFFFFF;
  font-size: clamp(30px, 2.8vw, 44px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.case h3:lang(zh) { font-weight: 900; line-height: 1.25; letter-spacing: -0.01em; }

.case-story { margin: 0; }
.case-story dt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.case-story dt::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--orange); }
.case-story dd { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.75; }
.case-story dd + dt { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }

.case-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.case-stats li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 0 28px;
  border-top: 1px solid var(--line);
}
.case-stats li:nth-child(-n+2) { padding-top: 0; border-top: 0; }
.case-num {
  display: block;
  color: #FFFFFF;
  font-family: "Sora", var(--font-display);
  font-size: clamp(52px, 5.2vw, 80px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.case-stats li:first-child .case-num { color: var(--orange); }
.case-num small { margin-left: .04em; color: var(--orange); font-size: .5em; letter-spacing: -0.02em; }
.case-num-word { font-family: var(--font-display); font-size: clamp(30px, 2.8vw, 44px); line-height: 1.1; letter-spacing: -0.03em; }
.case-num-word:lang(zh) { font-weight: 900; letter-spacing: 0; }
.case-stats span { color: var(--ink-2); font-size: 14px; line-height: 1.6; }

.case-extra {
  margin: 0 0 4px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.65;
}
.case-data {
  margin: 20px 0 0;
  padding: 20px 22px;
  border-radius: 18px;
  background: var(--bg-3);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.7;
}
.case-data strong { display: block; margin-bottom: 6px; color: #FFFFFF; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.case-status {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: auto 0 0;
  padding-top: 22px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.6;
}
.case-status::before {
  content: "";
  position: relative;
  top: -1px;
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px color-mix(in srgb, #FF4C33 22%, transparent);
}

/* ---------- 20c · Pricing: three plan cards ---------- */
@media (min-width: 1100px) {
  .pricing .price-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .pricing .price-grid-3 > .price { padding: 44px 36px 36px; }
  .pricing .price-grid-3 > .price h3 { font-size: clamp(34px, 3vw, 46px); }
  .pricing .price-grid-3 > .price .price-desc { font-size: 17px; }
}
@media (min-width: 961px) and (max-width: 1099px) {
  .pricing .price-grid-3 { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 640px; margin-inline: auto; }
  .pricing .price-grid-3 > .price.featured { order: -1; }
}

/* ---------- 20d · Responsive ---------- */
@media (max-width: 1180px) {
  .case { gap: 48px; padding: 48px; }
}
@media (max-width: 960px) {
  section.work { padding: 96px 24px; }
  .work .sec-head { padding-inline: 16px; }
  .case { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 40px 36px; }
  .services .svc-grid-3 > .svc { padding: 32px 28px; }
}
@media (max-width: 760px) {
  .services .svc-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .services .svc-ai .svc-split { grid-auto-rows: auto; }
  .services .svc-part { padding: 22px 20px 20px; }
  .services .svc-edge-2 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .services .svc-edge-2 p + p { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 600px) {
  section.work { padding: 72px 10px; }
  .work .sec-head { padding-inline: 14px; }
  .work .sec-head h2 { font-size: 40px; }
  .work-list { gap: 10px; }
  .case { gap: 32px; padding: 28px 20px 24px; border-radius: var(--r); }
  .case-meta { margin-bottom: 20px; }
  .case h3 { margin-bottom: 28px; font-size: 28px; }
  .case-story dd { font-size: 15px; }
  .case-story dd + dt { margin-top: 22px; padding-top: 22px; }
  .case-stats { gap: 0 18px; }
  .case-stats li { padding: 20px 0 22px; }
  .case-num { font-size: 38px; }
  .case-num-word { font-size: 24px; }
  .case-stats span { font-size: 13px; }
  .case-data { padding: 16px 16px; }
  .services .svc-grid-3 > .svc { padding: 28px 22px; }
  .services .svc-grid-3 > .svc h3 { font-size: 24px; }
  .price :is(.price-tag) { height: auto; min-height: 30px; padding-block: 6px; white-space: normal; line-height: 1.3; }
  /* headline: keep it to two lines on a phone (zh 6 glyphs + comma, en "More follow-through.") */
  html .hero .hero-copy h1 { font-size: min(44px, 11vw); }
  html:lang(en) .hero .hero-copy h1 { font-size: min(44px, 8.3vw); }
  /* long circled phrase ("Less busywork.") on a phone: a little more air so the ring clears the letters */
  html:lang(en) .hero .hero-copy h1 { line-height: 1.12; }
  html:lang(en) .hero h1 em { padding: .1em .2em; margin: 0 -.1em; }
}

/* =========================================================
   Responsive (restates everything theme.css overrides from styles.css' 960/600 rules)
   ========================================================= */
@media (max-width: 1180px) {
  .proof,
  .proof:first-child { padding: 22px 20px; font-size: 15px; }
  .hero::before, .hero::after { width: 96px; height: 48px; }
}

@media (max-width: 960px) {
  .nav { background: var(--bg); border-top-color: var(--line-dark); }
  .header:has(.nav.open) { background: var(--bg); }
  .nav a:not(.btn) { color: #FFFFFF; border-bottom-color: var(--line-dark); font-weight: 800; }
  .nav .btn, .nav-cta-mobile { margin-bottom: 8px; }

  .hero { min-height: 0; padding-block: calc(var(--header-h) + 48px) 96px; }
  .hero::before, .hero::after { display: none; }
  .hero > .wrap, .hero :has(> .hero-copy) { gap: 80px; }

  .chat-chip { right: -20px; }

  .proof-bar > .wrap,
  .proof-bar :has(> .proof) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .proof:nth-child(odd) { padding-left: 20px; border-left: 1px solid color-mix(in srgb, #FFFFFF 6%, transparent); }

  section.services > .wrap,
  section.industries > .wrap,
  section.timeline > .wrap,
  section.showcase > .wrap,
  section.about > .wrap,
  section.faq > .wrap { padding: 56px 40px; }

  .services .svc-grid > .svc { padding: 32px 28px; }
  .services .svc-grid > .svc .svc-num { font-size: 60px; margin-bottom: 24px; }

  section.ownership, section.contact { padding-block: 96px; }
  section.pricing { padding-block: 12px 96px; }

  .price-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 600px; margin-inline: auto; }
  .price.featured { order: -1; margin-top: 0; }

  .tl-item { padding: 26px 24px 24px 20px; }
  .tl-item::after { left: 20px; width: calc((100% - 40px) * var(--n, 1) / 5); }
  .tl-item :is(.tl-time, .tl-when, time) { justify-self: start; }

  .footer { padding-top: 56px; }
}

@media (max-width: 760px) {
  /* pill → stacked rounded card */
  .audit-form {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    margin-top: 36px;
  }
  .audit-form::before {
    grid-row: 1 / 4;
    border-radius: var(--r);
  }
  .audit-form > .field:nth-of-type(1),
  .audit-form > .field:nth-of-type(2) {
    grid-column: 1;
    margin: 6px 6px 0;
    padding: 12px 20px;
    border-radius: 18px;
  }
  .audit-form > .field:nth-of-type(1) { grid-row: 1; }
  .audit-form > .field:nth-of-type(2) { grid-row: 2; margin-top: 0; }
  .audit-form > .field:nth-of-type(2)::before { left: 20px; right: 20px; top: 0; bottom: auto; width: auto; height: 1px; }
  .audit-form label { margin-bottom: 4px; }
  .audit-form .err { position: static; margin-top: 6px; white-space: normal; }
  .audit-form .btn,
  .audit-form button[type="submit"] {
    grid-row: 3;
    grid-column: 1;
    justify-content: space-between;
    min-height: 60px;
    margin: 8px;
    padding: 0 10px 0 22px;
    white-space: normal;
    text-align: left;
  }
  .audit-form:has(.field.invalid) .audit-note { visibility: visible; }
  .audit-form :is(.audit-note, .form-note) { margin-top: 26px; }

  .report-card { grid-template-columns: minmax(0, 1fr); }
  .report-card .report-list {
    grid-column: 1;
    grid-row: auto;
    margin-top: 24px;
    padding: 20px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line-paper);
  }
}

@media (max-width: 600px) {
  .lang button { min-width: 38px; }

  .hero { padding-block: calc(var(--header-h) + 36px) 80px; }
  .hero-copy .kicker { margin-bottom: 22px; font-size: 11px; letter-spacing: .1em; }
  .hero .hero-copy h1 { font-size: 44px; margin-bottom: 22px; }
  .hero-sub { font-size: 17px; }
  .hero-trust { flex-direction: column; align-items: center; gap: 8px; }
  .hero > .wrap, .hero :has(> .hero-copy) { gap: 72px; }
  .audit-visual { width: calc(100% - 8px); margin: 0 auto; }
  .report-card { padding: 48px 22px 36px; border-radius: var(--r); rotate: 1deg; }
  .chat-chip { top: auto; right: -6px; bottom: 34px; width: 82%; font-size: 13px; }
  .illus-label { margin-top: 118px; }

  .proof-bar { padding: 0 10px 10px; }
  .proof-bar > .wrap,
  .proof-bar :has(> .proof) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .proof,
  .proof:first-child,
  .proof:nth-child(odd) {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 16px;
    border: 1px solid color-mix(in srgb, #FFFFFF 6%, transparent);
    font-size: 14px;
  }
  .proof svg { width: 26px; height: 26px; }
  .proof :is(small) { font-size: 12px; line-height: 1.45; }

  section.services,
  section.industries,
  section.timeline,
  section.showcase,
  section.about,
  section.faq { padding: 5px 10px; }
  section.services { padding-top: 10px; }
  section.faq { padding-bottom: 10px; }
  section.services > .wrap,
  section.industries > .wrap,
  section.timeline > .wrap,
  section.showcase > .wrap,
  section.about > .wrap,
  section.faq > .wrap { padding: 40px 24px; border-radius: var(--r); }

  .sec-head { margin-bottom: 36px; }
  h2 { font-size: 34px; }

  .services .svc-grid > .svc { padding: 28px 22px; border-radius: 20px; }
  .services .svc-grid > .svc .svc-num { font-size: 56px; margin-bottom: 20px; }

  .ind-grid, .ind-grid-6 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ind-grid > * { padding: 26px 22px 28px; border-radius: 20px; }
  .ind-grid > * > :is(h3, strong:first-child) { font-size: 24px; }

  section.ownership, section.contact { padding-block: 72px; }
  section.pricing { padding-block: 10px 72px; }
  .ownership h2 { font-size: 40px; }
  .own-list { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 40px; }
  .own-list li,
  .own-list li:last-child { grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 22px 20px; border-radius: 20px; }
  .own-list li::before { width: 30px; height: 30px; }
  .own-list li strong { font-size: 18px; }

  .price,
  .price + .price:not(.featured),
  .price.featured + .price { padding: 32px 22px 24px; border-radius: var(--r); }
  .price h3 { font-size: 40px; }
  .price .price-desc { font-size: 16px; }
  .price ul { margin-top: 24px; padding-top: 22px; }

  .tl-item { padding: 24px 18px 20px 16px; border-radius: 20px; }
  .tl-item::after { left: 16px; width: calc((100% - 32px) * var(--n, 1) / 5); }

  .concept { padding: 10px 10px 20px; border-radius: 20px; }

  .form, #contactForm { padding: 24px 18px; border-radius: var(--r); }

  .ticker { height: 60px; margin: 0 10px 10px; }
  .ticker-track span { font-size: 19px; }
  .ticker-track span::after { width: 14px; height: 14px; margin-inline: 20px; }

  .footer { margin: 0 10px 10px; padding-top: 40px; border-radius: var(--r); }
}

/* reduced motion: static end states for the theme's own decorations */
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover, .btn-primary:active, .audit-form .btn:active { transform: none; }
  .audit-form .btn:hover::after { transform: none; }
}

/* =========================================================
   21 · 站点扩展（SITE-EXPANSION.md，2026-10-17）
   AI 四条底线 · 服务卡"了解详情" · FAQ/价格区去往新页面的链接 · 页脚"服务 / 资源"列
   ========================================================= */

/* ---------- 21a · Service cards: detail links sit at the bottom of each card ---------- */
.services .svc-grid-3 > .svc > .svc-links { margin-top: auto; padding-top: 24px; }
.services .svc-grid-3 > .svc-ai > .svc-links { padding-top: 0; }

/* ---------- 21b · AI 四条底线: a charcoal band under the three cards ---------- */
.ai-rules {
  --fg: #FFFFFF;
  --fg-2: rgba(255, 255, 255, .72);
  --rule: rgba(255, 255, 255, .12);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  margin-top: 16px;
  padding: 48px 44px 44px;
  border-radius: var(--r);
  background: #161616;
  color: rgba(255, 255, 255, .72);
}
.ai-rules-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ai-rules-kicker::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--orange); }
.ai-rules-head h3 {
  margin: 0;
  color: #FFFFFF;
  max-width: 30em;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.ai-rules-head h3:lang(zh) { font-weight: 900; letter-spacing: 0; line-height: 1.45; }
.ai-rules-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ai-rules-list li {
  min-width: 0;
  padding: 0 28px;
  border-left: 1px solid var(--rule);
}
.ai-rules-list li:first-child { padding-left: 0; border-left: 0; }
.ai-rules-list li::before { content: none; }
.ai-rules-num {
  display: block;
  margin-bottom: 18px;
  color: var(--orange);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
}
.ai-rules-list h4 {
  margin: 0 0 12px;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
.ai-rules-list p {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  line-height: 1.7;
}
@media (max-width: 1180px) {
  .ai-rules { gap: 32px; }
  .ai-rules-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; }
  .ai-rules-list li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 760px) {
  .ai-rules { padding: 32px 24px 28px; }
  .ai-rules-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ai-rules-list li { padding: 20px 0; border-left: 0; border-top: 1px solid var(--rule); }
  .ai-rules-list li:last-child { padding-bottom: 0; }
  .ai-rules-list li:first-child { padding-top: 0; border-top: 0; }
  .ai-rules-num { margin-bottom: 10px; }
}

/* ---------- 21c · Links out to the FAQ library and the cost guide ---------- */
.faq-more { margin: 28px 0 0; }
.faq-more .link-btn { color: #161616; font-weight: 600; }
.faq-more .link-btn:hover { color: var(--orange-ink); }
.price-guide { margin: 12px 0 0; }
.pricing .price-guide .link-btn { color: #FFFFFF; font-size: 15px; font-weight: 600; }
.pricing .price-guide .link-btn:hover { color: var(--orange); }

/* ---------- 21d · Footer: brand + 3 link columns (服务区域 2026-10-17 去掉，见 PENDING-AREAS.md) ---------- */
.footer-cols { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.footer-follow { margin-top: 24px; }
.footer-follow h4 { margin-bottom: 12px; }
@media (min-width: 961px) {
  .footer > .wrap:first-child.footer-grid,
  .footer-grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 601px) and (max-width: 960px) {
  .footer > .wrap:first-child.footer-grid,
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 21e · Ticker: industries (bold, linked) alternate with strengths (lighter) ---------- */
.ticker-track a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
.ticker-track a:hover { color: var(--orange); }
.ticker-track .tk-adv { font-weight: 500; color: color-mix(in srgb, #FFFFFF 70%, transparent); }
/* 内容加长后放慢；英文更长，再慢一些，保持每秒移动距离接近 */
.ticker-track { animation-duration: 42s; }
html[lang="en-AU"] .ticker-track { animation-duration: 64s; }

/* =========================================================
   22 · 首屏 V2 定稿（HERO-V2-FINAL.md，2026-10-18）
   桌面左文右图：网站主画面为主角 + 三张辅助小卡（小红书笔记 / AI 对话 / 自动化）
   体检表单与报告卡搬到 #audit 区块；合作方式区块 .engage 合并流程 + 账号归你 + 方案 + 付款
   ========================================================= */

/* ---------- 22a · Hero layout ---------- */
/* min-height off: at 1440×900 the four strengths (.proof-bar) must sit inside the first screen */
.hero { min-height: 0; padding-block: calc(var(--header-h) + 64px) 80px; }
.hero::before { top: auto; bottom: 64px; left: max(16px, calc(50% - 720px)); }
.hero::after { display: none; }
.hero > .wrap,
.hero :has(> .hero-copy) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  align-items: center;
  gap: 64px;
}
.hero-copy {
  align-items: flex-start;
  max-width: 620px;
  text-align: left;
}
.hero .hero-copy h1 {
  margin-bottom: 24px;
  font-size: clamp(44px, 5.6vw, 84px);
  text-align: left;
}
html:lang(en) .hero .hero-copy h1 { font-size: clamp(40px, 4.4vw, 66px); line-height: 1.04; }
.hero-sub { max-width: 34em; margin-inline: 0; font-size: 18px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
  margin-top: 36px;
}
.hero-actions .btn-primary { min-height: 58px; padding-inline: 32px; font-size: 16px; }
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(var(--orange), var(--orange)) 0 100% / 0 2px no-repeat;
  transition: background-size .3s var(--ease), color .2s var(--ease);
}
.hero-link::after { content: "→"; transition: transform .25s var(--ease); }
.hero-link:hover { background-size: 100% 2px; }
.hero-link:hover::after { transform: translateX(3px); }

/* ---------- 22b · Hero visual: browser window with a site's first screen ---------- */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 0 0 auto;
  padding: 36px 0 44px;
  color: #161616;
}
.hv-browser {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 22px;
  background: var(--paper);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #FFFFFF 10%, transparent),
    0 24px 48px -30px color-mix(in srgb, #161616 90%, transparent);
}
.hv-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-paper);
}
.hv-bar > i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-paper); }
.hv-bar > i:first-child { background: var(--orange); }
.hv-url {
  flex: 1;
  max-width: 260px;
  margin: 0 auto;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--on-paper-3);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  transform: translateX(-16px);
}
.hv-site { padding: 18px 26px 22px; }
.hv-nav { display: flex; align-items: center; gap: 18px; }
.hv-logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: auto;
  color: #161616;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.hv-logo::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: #161616; }
.hv-nav > span { width: 34px; height: 6px; border-radius: 3px; background: var(--line-paper); }
.hv-nav > em {
  padding: 3px 9px;
  border: 1px solid var(--line-paper);
  border-radius: var(--r-pill);
  color: var(--on-paper-2);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.hv-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin: 26px 0 22px;
}
.hv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  color: var(--orange-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hv-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--orange); }
.hv-h {
  margin: 0;
  color: #161616;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.9vw, 28px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.02em;
}
.hv-h:lang(zh) { font-weight: 900; letter-spacing: 0; line-height: 1.3; }
.hv-p { display: grid; gap: 7px; margin: 14px 0 18px; }
.hv-p span { height: 6px; border-radius: 3px; background: var(--line-paper); }
.hv-p span:last-child { width: 70%; }
.hv-btns { display: flex; align-items: center; gap: 8px; margin: 0; }
.hv-btn {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: #161616;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.hv-btn2 { width: 58px; height: 27px; border: 1px solid var(--line-paper); border-radius: var(--r-pill); }
.hv-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / .92;
  border-radius: 16px;
  background: linear-gradient(165deg, var(--bg-3) 0%, #161616 70%);
}
.hv-img > i { position: absolute; display: block; border-radius: 50%; }
.hv-sun { top: 16%; right: 18%; width: 30%; aspect-ratio: 1; background: var(--orange); }
.hv-hill { left: -20%; bottom: -46%; width: 100%; aspect-ratio: 1; background: var(--ledge); }
.hv-hill2 { right: -34%; bottom: -60%; width: 110%; aspect-ratio: 1; background: color-mix(in srgb, #FFFFFF 86%, var(--orange)); }
.hv-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-paper);
}
.hv-info span { display: grid; gap: 7px; }
.hv-info b { color: var(--on-paper-3); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; }
.hv-info i { display: block; width: 72%; height: 6px; border-radius: 3px; background: var(--line-paper); }

/* three supporting cards on the window's edges */
.hv-card {
  position: absolute;
  z-index: 2;
  padding: 14px;
  border-radius: 18px;
  background: var(--paper);
  color: #161616;
  box-shadow: 0 8px 0 var(--ledge), 0 30px 50px -22px color-mix(in srgb, #161616 85%, transparent);
}
.hv-k {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  color: var(--on-paper-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
}
.hv-k::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--orange); }
.hv-note { left: -56px; bottom: 20px; width: 176px; rotate: -4deg; }
.hv-note-img {
  aspect-ratio: 4 / 3;
  margin-bottom: 10px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 70% 38%, var(--orange) 0 19%, transparent 20%),
    linear-gradient(transparent 66%, var(--line-paper) 66%),
    var(--paper-2);
}
.hv-note-t { margin: 0 0 10px; color: #161616; font-size: 13px; font-weight: 700; line-height: 1.4; }
.hv-note-f { display: flex; align-items: center; gap: 7px; margin: 0; }
.hv-note-f span { flex: 1; height: 5px; border-radius: 3px; background: var(--line-paper); }
.hv-av { width: 16px; height: 16px; border-radius: 50%; background: #161616; }
.hv-heart {
  width: 14px;
  height: 14px;
  background: var(--orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.8-8 11-8 11z'/%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 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.8-8 11-8 11z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero-visual .chat-chip {
  top: 0;
  right: -40px;
  bottom: auto;
  left: auto;
  z-index: 3;
  width: 268px;
  rotate: 2deg;
  font-size: 13px;
}
.hv-auto { right: -24px; bottom: 0; width: 248px; rotate: -1.5deg; }
.hv-flow { counter-reset: hvf; display: grid; gap: 6px; margin: 0; }
.hv-flow span {
  counter-increment: hvf;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--paper-2);
  color: #161616;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.hv-flow span::before {
  content: counter(hvf);
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: #161616;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
}
.hv-flow span:last-child { background: #161616; color: #FFFFFF; }
.hv-flow span:last-child::before { background: var(--orange); color: #161616; }
.hero-visual .illus-label {
  position: absolute;
  left: 2px;
  top: 4px;
  margin: 0;
  color: var(--ink-3);
  font-size: 12px;
  letter-spacing: .04em;
  text-align: left;
}

/* ---------- 22c · Hero responsive ---------- */
@media (max-width: 1180px) {
  .hero > .wrap,
  .hero :has(> .hero-copy) { gap: 48px; }
  .hv-note { left: -32px; }
  .hero-visual .chat-chip { right: -16px; width: 240px; }
  .hv-auto { right: -8px; width: 224px; }
}
@media (max-width: 1100px) {
  .hero { min-height: 0; padding-block: calc(var(--header-h) + 48px) 88px; }
  .hero > .wrap,
  .hero :has(> .hero-copy) { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-copy { max-width: 680px; }
  .hero-visual { max-width: 640px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .hero { padding-block: calc(var(--header-h) + 28px) 56px; }
  .hero-copy .kicker { margin-bottom: 18px; }
  .hero .hero-copy h1 { margin-bottom: 18px; }
  .hero-sub { font-size: 16px; line-height: 1.65; }
  .hero-actions { gap: 14px 24px; margin-top: 26px; }
  .hero-actions .btn-primary { min-height: 54px; padding-inline: 26px; }
  .hero > .wrap,
  .hero :has(> .hero-copy) { gap: 32px; }
  /* phone: the site window plus one chat bubble; no parallax, no sideways slide */
  .hv-note, .hv-auto { display: none; }
  .hero-visual { padding: 0 0 72px; }
  .hv-site { padding: 14px 16px 16px; }
  .hv-bar { height: 32px; padding: 0 12px; }
  .hv-bar > i { width: 8px; height: 8px; }
  .hv-url { font-size: 10px; }
  .hv-nav { gap: 10px; }
  .hv-nav > span { width: 22px; }
  .hv-hero { gap: 14px; margin: 18px 0 14px; }
  .hv-h { font-size: 17px; }
  .hv-p { margin: 10px 0 12px; }
  .hv-btn2 { display: none; }
  .hero-visual .chat-chip {
    top: auto;
    right: 10px;
    bottom: 24px;
    width: min(80%, 290px);
    rotate: -1.5deg;
  }
  .hero-visual .illus-label { top: auto; bottom: 0; }
}
@media (max-width: 600px) {
  .hero .hero-copy h1 { font-size: min(44px, 11vw); }
  html:lang(en) .hero .hero-copy h1 { font-size: min(44px, 8.3vw); }
}

/* ---------- 22d · Free check-up section (#audit) ---------- */
section.audit-sec { position: relative; padding: 120px 24px; background: var(--bg); color: var(--ink-2); }
.audit-sec > .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.audit-head { display: flex; flex-direction: column; align-items: center; max-width: 900px; }
.audit-head .kicker { color: #FFFFFF; }
.audit-head h2 { margin: 0 0 20px; color: #FFFFFF; }
.audit-sub { max-width: 640px; margin: 0 auto; color: var(--ink-2); font-size: 18px; line-height: 1.65; }
.audit-sec .audit-form { margin: 44px auto 0; }
.audit-new { margin: 18px 0 0; }
.audit-new .link-btn { color: #FFFFFF; font-size: 15px; font-weight: 600; }
.audit-new .link-btn:hover { color: var(--orange); }
.audit-visual { margin-top: 96px; text-align: left; }
.audit-visual .illus-label { margin-top: 40px; text-align: center; }
@media (max-width: 960px) {
  section.audit-sec { padding: 96px 24px; }
}
@media (max-width: 600px) {
  section.audit-sec { padding: 72px 10px; }
  .audit-sub { font-size: 16px; }
  .audit-sec .audit-form { margin-top: 32px; }
  .audit-visual { margin-top: 72px; }
  .audit-visual .illus-label { margin-top: 28px; }
}

/* ---------- 22e · 合作方式 (.engage): one anchor, three parts ---------- */
section.engage { background: var(--bg); }
.engage-head { padding-block: 120px 56px; }
.engage-head .kicker { color: #FFFFFF; }
.engage-head h2 { max-width: 16em; margin: 0 0 20px; color: #FFFFFF; }
.engage-sub { max-width: 40em; margin: 0; color: var(--ink-2); font-size: 18px; line-height: 1.65; }
/* the three parts sit one level under the section heading */
.engage .timeline h2,
.engage .pricing .sec-head h2 { font-size: clamp(30px, 3.4vw, 50px); }
.engage .ownership h2 { font-size: clamp(32px, 4vw, 60px); }
.engage section.ownership { padding-block: 104px; }
@media (max-width: 960px) {
  .engage-head { padding-block: 96px 40px; }
}
@media (max-width: 600px) {
  .engage-head { padding-block: 72px 32px; }
  .engage-sub { font-size: 16px; }
  .engage .timeline h2,
  .engage .pricing .sec-head h2 { font-size: 30px; }
  .engage .ownership h2 { font-size: 34px; }
  .engage section.ownership { padding-block: 72px; }
}

/* 决定 26（2026-10-18 修订）：logo 文字统一为「VJO Studio」（HTML 里直接写 Studio），
   Studio 与 VJO 同字体、同字号、同颜色，无竖线，连成一个词组；中英文模式一致 */
.brand-cn {
  display: inline-block !important;
  margin-left: -4px;
  padding-left: 0 !important;
  border-left: 0 !important;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: inherit;
}
@media (max-width: 760px) {
  .brand-cn { font-size: 20px; }
}