/*
  扶星文化 官网共享样式
  基于 web-prototype 种子模板扩展：双主题 token、移动导航、表单状态、
  AI 业务标签色、首页星轨点缀。所有颜色仍只来自 :root / [data-theme] 的
  变量，不在别处写死色值。
*/

:root {
  --bg:      oklch(98% 0.004 240);
  --surface: oklch(100% 0 0);
  --fg:      oklch(17% 0.014 250);
  --muted:   oklch(52% 0.014 250);
  --border:  oklch(90% 0.008 250);
  --accent:  #0E7EF6;
  --accent-2: #B232ED;
  --success: oklch(62% 0.15 150);
  --danger:  oklch(58% 0.19 25);

  --accent-soft:   color-mix(in oklch, var(--accent) 14%, transparent);
  --accent-2-soft: color-mix(in oklch, var(--accent-2) 16%, transparent);
  --danger-soft:   color-mix(in oklch, var(--danger) 14%, transparent);
  --fg-soft:       color-mix(in oklch, var(--fg) 6%, transparent);
  --surface-2: oklch(96.5% 0.006 250);
  --ink:        oklch(20% 0.028 262);
  --ink-fg:     oklch(96% 0.006 250);
  --ink-muted:  oklch(74% 0.02 255);
  --ink-border: oklch(34% 0.03 262);
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.05);
  --shadow-md: 0 6px 16px rgba(15,23,42,.07), 0 14px 34px rgba(15,23,42,.09);
  --shadow-lg: 0 18px 48px rgba(15,23,42,.12), 0 30px 70px rgba(15,23,42,.10);

  --font-display: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --fs-h1: clamp(38px, 5.2vw, 66px);
  --fs-h2: clamp(28px, 3.6vw, 42px);
  --fs-h3: 21px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-meta: 13px;

  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 20px;
  --gap-lg: 32px;
  --gap-xl: 56px;
  --gap-2xl: 96px;
  --container: 1180px;
  --gutter: 44px;

  --radius: 10px;
  --radius-lg: 18px;

  color-scheme: light;
}

html[data-theme='dark'] {
  --bg:      oklch(15% 0.016 250);
  --surface: oklch(19.5% 0.018 250);
  --fg:      oklch(95% 0.006 250);
  --muted:   oklch(66% 0.02 250);
  --border:  oklch(29% 0.022 250);
  --accent:  #4E9BFF;
  --accent-2: #C878F5;
  --success: oklch(70% 0.15 150);
  --danger:  oklch(68% 0.18 25);
  --surface-2: oklch(17.8% 0.017 250);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.30);
  --shadow-md: 0 8px 20px rgba(0,0,0,.42), 0 16px 40px rgba(0,0,0,.36);
  --shadow-lg: 0 20px 55px rgba(0,0,0,.55), 0 30px 80px rgba(0,0,0,.45);
  color-scheme: dark;
}

/* ─── reset & base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s ease, color 0.2s ease;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ─── skip link ───────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -60px;
  background: var(--fg);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  z-index: 100;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

/* ─── layout primitives ───────────────────────────────────────────── */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(48px, 8vw, var(--gap-2xl)); }
.section + .section { border-top: 1px solid var(--border); }
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap-md); }
.row { display: flex; align-items: center; gap: var(--gap-md); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }
.grid-2-1 { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--gap-xl); align-items: start; }
.grid-1-2 { display: grid; grid-template-columns: 1fr 1.7fr; gap: var(--gap-xl); align-items: start; }
@media (max-width: 920px) {
  .grid-2, .grid-3, .grid-4, .grid-2-1, .grid-1-2 { grid-template-columns: 1fr; }
}

/* ─── type ────────────────────────────────────────────────────────── */
.h1, h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
.h2, h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: 1.14; letter-spacing: -0.015em; margin: 0; }
.h3, h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.35; letter-spacing: -0.005em; margin: 0; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); max-width: 60ch; margin: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--gap-md);
}
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ─── chrome: nav + footer ────────────────────────────────────────── */
.topnav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.topnav-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; gap: var(--gap-lg); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { height: 26px; width: auto; flex-shrink: 0; }
.brand-name { font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--fg); }

.topnav-links { display: flex; gap: var(--gap-lg); }
.topnav-links a { font-size: 14px; color: var(--muted); padding: 6px 0; position: relative; }
.topnav-links a:hover { color: var(--fg); }
.topnav-links a.active { color: var(--fg); font-weight: 600; }
.topnav-links a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -13px;
  height: 2px; background: var(--accent); border-radius: 2px;
}

.topnav-actions { display: flex; align-items: center; gap: var(--gap-sm); }

.theme-toggle {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg);
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-moon { display: none; }
html[data-theme='dark'] .theme-toggle .icon-sun { display: none; }
html[data-theme='dark'] .theme-toggle .icon-moon { display: block; }

.nav-toggle {
  display: none;
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 999px;
  place-items: center;
}
.nav-toggle svg { width: 17px; height: 17px; }

@media (max-width: 760px) {
  .topnav-inner { padding-block: 10px; }
  .topnav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 0 var(--gutter);
    max-height: 0; overflow: hidden;
    visibility: hidden;
    transition: max-height 0.24s ease, padding 0.24s ease, visibility 0.24s ease;
  }
  .topnav-links a { padding: 12px 0; border-top: 1px solid var(--border); }
  .topnav-links a:first-child { border-top: 0; }
  .topnav-links a.active::after { display: none; }
  .topnav.nav-open .topnav-links { max-height: 80vh; overflow-y: auto; visibility: visible; padding-top: var(--gap-sm); padding-bottom: var(--gap-md); }
  .nav-toggle { display: grid; }
  .nav-toggle .icon-close { display: none; }
  .topnav.nav-open .nav-toggle .icon-menu { display: none; }
  .topnav.nav-open .nav-toggle .icon-close { display: grid; }
  .topnav-actions .btn-primary.cta-desktop { display: none; }
}

.pagefoot { padding-block: var(--gap-xl); color: var(--muted); font-size: 13px; border-top: 1px solid var(--border); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--gap-xl); padding-bottom: var(--gap-xl); }
.footer-tagline { margin-top: var(--gap-sm); max-width: 34ch; }
.footer-col-title { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg); margin-bottom: var(--gap-sm); }
.footer-links, .footer-contact { display: flex; flex-direction: column; gap: 10px; }
.footer-links a:hover { color: var(--fg); }
.footer-bottom { padding-top: var(--gap-lg); border-top: 1px solid var(--border); flex-wrap: wrap; gap: 8px 20px; }
.footer-legal { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.footer-legal a { color: var(--muted); }
.footer-legal a:hover { color: var(--fg); }
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--gap-lg); }
}

/* ─── buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform 0.05s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); position: relative; overflow: hidden; }
.btn-primary:hover:not(:disabled) { background: color-mix(in oklch, var(--accent) 88%, black); }
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, color-mix(in oklch, white 35%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-secondary { background: transparent; color: var(--fg); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--fg); }
.btn-ghost { background: transparent; color: var(--fg); border-color: transparent; padding-inline: 8px; }
.btn-ghost:hover { color: var(--accent); }
.btn-arrow::after { content: '→'; transition: transform 0.15s ease; }
.btn-arrow:hover::after { transform: translateX(2px); }
.btn-block { width: 100%; }

.spinner {
  width: 15px; height: 15px;
  border: 2px solid color-mix(in oklch, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── card / surface ──────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease; }
.card-flat { background: transparent; border: 0; padding: 0; }
.card-rule { background: transparent; border: 0; border-top: 1px solid var(--fg); padding: 24px 0 0; border-radius: 0; transition: border-color 0.2s ease, padding-left 0.2s ease; }
.card-rule:hover { border-top-color: var(--accent); padding-left: 10px; }
.card-hover { transition: border-color 0.15s ease, transform 0.15s ease; }
.card-hover:hover { border-color: var(--accent); transform: translateY(-2px); }

/* ─── feature cell ────────────────────────────────────────────────── */
.feature { transition: transform 0.2s ease; }
.feature:hover { transform: translateY(-3px); }
.feature-mark {
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--accent);
  margin-bottom: var(--gap-md);
  background: var(--surface);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.feature:hover .feature-mark { border-color: var(--accent); background: var(--accent-soft); }
.feature-mark svg { width: 18px; height: 18px; }
.feature h3 { margin-bottom: 8px; }
.feature p { margin: 0; color: var(--muted); font-size: 15px; }
/* feature-list：勾选芯片标记（命中所有 .feature-list，含 .card 内的列表） */
.feature-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.feature-list li { font-size: 14px; color: var(--muted); padding-left: 27px; position: relative; line-height: 1.5; transition: color .18s ease; }
.feature-list li::before { content: ''; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 6px; background: var(--accent-soft); transition: background .2s ease, transform .2s ease; }
.feature-list li::after { content: ''; position: absolute; left: 6px; top: 5px; width: 4px; height: 7px; border: solid var(--accent); border-width: 0 1.7px 1.7px 0; transform: rotate(42deg); transition: border-color .2s ease; }
.feature-list li:hover { color: var(--fg); }
.feature-list li:hover::before { background: var(--accent); transform: scale(1.05); }
.feature-list li:hover::after { border-color: var(--surface); }

/* ─── stat ─────────────────────────────────────────────────────────── */
.stat .stat-num { font-family: var(--font-display); font-size: clamp(48px, 7vw, 80px); line-height: 0.95; letter-spacing: -0.03em; color: var(--accent); font-weight: 700; }
.stat .stat-label { color: var(--muted); font-size: 14px; margin-top: 8px; max-width: 26ch; }
.stat .stat-unit { font-size: 0.5em; opacity: 0.7; margin-left: 2px; }

/* ─── quote ────────────────────────────────────────────────────────── */
.quote { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.4; letter-spacing: -0.01em; max-width: 30ch; }
.quote-author { color: var(--muted); font-size: 14px; margin-top: var(--gap-md); }
.quote-mark { font-family: var(--font-display); font-size: 120px; line-height: 0.7; color: var(--accent); opacity: 0.16; margin-bottom: -20px; }

/* ─── pill / badge / tag ──────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--accent-soft); color: var(--accent); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.pill-ai { background: var(--accent-2-soft); color: var(--accent-2); }
.tag { display: inline-flex; align-items: center; padding: 4px 10px; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; }

/* ─── form field ──────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; color: var(--muted); font-weight: 500; }
.field label .req { color: var(--danger); }
.input, .textarea, .select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 15px;
}
.input:focus, .textarea:focus, .select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.field.has-error .input, .field.has-error .textarea, .field.has-error .select { border-color: var(--danger); }
.field-error { display: none; font-size: 13px; color: var(--danger); }
.field.has-error .field-error { display: block; }

.form-banner { display: none; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: var(--radius); font-size: 14px; margin-bottom: var(--gap-md); }
.form-banner.is-visible { display: flex; }
.form-banner.success { background: color-mix(in oklch, var(--success) 14%, transparent); color: var(--success); border: 1px solid color-mix(in oklch, var(--success) 40%, transparent); }
.form-banner.error { background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in oklch, var(--danger) 40%, transparent); }

/* ─── table ────────────────────────────────────────────────────────── */
.ds-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ds-table th, .ds-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.ds-table th { color: var(--muted); font-weight: 500; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.ds-table tbody tr:hover { background: var(--fg-soft); }
.ds-table .num-col { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* ─── image placeholder ───────────────────────────────────────────── */
.ph-img {
  background: linear-gradient(135deg, var(--accent-soft), var(--fg-soft)), var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.ph-img.square { aspect-ratio: 1 / 1; }
.ph-img.portrait { aspect-ratio: 3 / 4; }
.ph-img.wide { aspect-ratio: 16 / 9; }

/* ─── divider ──────────────────────────────────────────────────────── */
.rule { border: 0; border-top: 1px solid var(--border); margin: 0; }
.rule-strong { border: 0; border-top: 1px solid var(--fg); margin: 0; }

/* ─── hero ─────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(88px, 13vw, 168px); position: relative; overflow: hidden; }
.hero-center { text-align: center; max-width: 46ch; margin-inline: auto; position: relative; z-index: 1; }
.hero h1 { margin-bottom: var(--gap-md); }
.hero .lead { margin-bottom: var(--gap-lg); margin-inline: auto; }
.hero-cta { display: inline-flex; gap: var(--gap-sm); flex-wrap: wrap; }
.hero-center .hero-cta { justify-content: center; }
.hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-2xl); align-items: center; position: relative; z-index: 1; }
@media (max-width: 920px) { .hero-split { grid-template-columns: 1fr; } }

/* hero canvas — animated node network, brand blue → purple, homepage only */
.hero-canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.65;
}
html[data-theme='dark'] .hero-canvas { opacity: 0.9; }

/* headline: manual line breaks (fixes CJK ladder-wrap at large clamp sizes) */
.hero-lines { display: block; }
.hero-lines .line { display: block; }

.text-gradient {
  background: linear-gradient(100deg, var(--accent) 15%, var(--accent-2) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ─── scroll reveal ───────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ─── log row ──────────────────────────────────────────────────────── */
.log-row { display: grid; grid-template-columns: 120px 1fr 100px; gap: var(--gap-lg); padding: 22px 0; border-top: 1px solid var(--border); align-items: baseline; }
.log-row .meta { color: var(--muted); }
.log-row h3 { font-size: 19px; }
.log-row .pull { text-align: right; }
@media (max-width: 640px) {
  .log-row { grid-template-columns: 1fr; gap: 4px; }
  .log-row .pull { text-align: left; }
}

/* ─── timeline (process steps) ────────────────────────────────────── */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-lg); counter-reset: step; }
@media (max-width: 920px) { .timeline { grid-template-columns: 1fr; } }
.timeline-step { position: relative; padding-top: var(--gap-lg); border-top: 2px solid var(--border); }
.timeline-step .step-num { font-family: var(--font-mono); font-size: 13px; color: var(--accent); letter-spacing: 0.04em; }
.timeline-step h3 { margin-top: 10px; }
.timeline-step p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }

/* ─── value/process split rows used on services + ai pages ───────── */
.service-block + .service-block { margin-top: var(--gap-2xl); }
.service-head { max-width: 60ch; margin-bottom: var(--gap-lg); }

/* ─── sub-page helpers (about / services / ai / contact) ──────────── */
/* about — quick facts */
.fact-list { display: flex; flex-direction: column; margin: 8px 0 0; }
.fact-row { display: flex; justify-content: space-between; gap: var(--gap-md); align-items: baseline; padding: 12px 0; border-top: 1px solid var(--border); }
.fact-row:first-child { border-top: 0; }
.fact-row dt { margin: 0; }
.fact-row dd { margin: 0; text-align: right; font-weight: 500; }

/* services — in-page anchor chips */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
.tag-link { transition: color 0.15s ease, border-color 0.15s ease; }
.tag-link:hover { color: var(--accent); border-color: var(--accent); }

/* ai — direction blocks */
.ai-block-head { display: grid; grid-template-columns: auto 1fr; gap: var(--gap-md); align-items: start; max-width: 62ch; margin-bottom: var(--gap-lg); }
.ai-block-head .pill { margin-top: 6px; }
.ai-block-body { padding-top: var(--gap-md); border-top: 1px solid var(--border); }
.note-card { border-color: color-mix(in oklch, var(--accent-2) 35%, var(--border)); }

/* contact — info lines + next steps */
.contact-line { display: flex; flex-direction: column; gap: 2px; }
.next-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.next-steps li { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 15px; }
.next-num { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--border); font-family: var(--font-mono); font-size: 13px; color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════
   v2 追加：数据带 / 能力栈 / 案例卡 / 合作品牌墙 / 实拍媒体块 / 展示分栏
   仅复用既有 :root token，不新增颜色。
   ══════════════════════════════════════════════════════════════════ */

/* ─── real image media block ──────────────────────────────────────── */
.media { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media.wide { aspect-ratio: 16 / 9; }
.media.ratio-16-10 { aspect-ratio: 16 / 10; }
.media.ratio-4-3 { aspect-ratio: 4 / 3; }

/* brand-tinted overlay — ties separately generated photos into one system */
.media.imgfill { transition: background-size 0.5s ease; }
.media.imgfill::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(155deg, color-mix(in oklch, var(--accent) 14%, transparent), transparent 55%);
  mix-blend-mode: multiply;
}
html[data-theme='dark'] .media.imgfill::after {
  mix-blend-mode: normal;
  background: linear-gradient(155deg, color-mix(in oklch, var(--accent) 26%, transparent), transparent 55%);
}
.case .media::after {
  background:
    linear-gradient(0deg, rgba(10, 14, 24, 0.5) 0%, transparent 42%),
    linear-gradient(155deg, color-mix(in oklch, var(--accent) 14%, transparent), transparent 55%);
}
html[data-theme='dark'] .case .media::after {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, transparent 42%),
    linear-gradient(155deg, color-mix(in oklch, var(--accent) 26%, transparent), transparent 55%);
}
.case:hover .media.imgfill { background-size: 112%; }

/* ─── metrics band ────────────────────────────────────────────────── */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-lg); }
@media (max-width: 760px) { .metrics { grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg) var(--gap-md); } }
.metric { display: flex; flex-direction: column; gap: 6px; }
.metric-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.4vw, 52px); line-height: 1; letter-spacing: -0.02em; color: var(--fg); font-variant-numeric: tabular-nums; }
.metric-num .unit { font-size: 0.46em; color: var(--accent); margin-left: 3px; letter-spacing: 0; font-weight: 700; }
.metric-label { color: var(--muted); font-size: 14px; }
.metric-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }

/* ─── capability stack (business, un-siloed) ──────────────────────── */
.cap-stack { position: relative; }
/* 编号脊柱：贯穿三段能力，呼应"连续链路"叙事，两端淡出 */
.cap-stack::before {
  content: '';
  position: absolute; left: 23px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--accent) 14%, var(--accent-2) 86%, transparent 100%);
  opacity: 0.32;
}
@media (max-width: 760px) { .cap-stack::before { display: none; } }
.cap { display: grid; grid-template-columns: 46px minmax(0, 0.85fr) minmax(0, 1.2fr); gap: var(--gap-lg) var(--gap-xl); align-items: center; padding: var(--gap-xl) 0; border-top: 1px solid var(--border); transition: background 0.2s ease; }
.cap:first-child { border-top: 0; }
.cap:hover { background: var(--fg-soft); }

/* 左侧编号轨 + 徽标（垂直居中，落在脊柱节点上） */
.cap-rail { align-self: stretch; display: grid; place-items: center; position: relative; z-index: 1; }
.cap-badge { margin-bottom: 0; background: var(--bg); }
.cap.is-ai .cap-badge { border-color: color-mix(in oklch, var(--accent-2) 45%, var(--border)); color: var(--accent-2); }
.cap.is-ai:hover .cap-badge { border-color: color-mix(in oklch, var(--accent-2) 62%, var(--border)); }

/* 中间：编号/类别 + 标题 + 价值描述 + 对应业务标签 */
.cap-head { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cap-idx { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--accent); }
.cap-idx b { color: var(--fg); font-weight: 700; }
.cap.is-ai .cap-idx { color: var(--accent-2); }
.cap-head h3 { font-size: clamp(21px, 2.1vw, 25px); }
.cap-desc { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 34ch; }
.cap-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.cap-map { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; }

/* 右侧：发丝线单元格能力面板（呼应 .metrics / .brand-wall 语言） */
.cap-skills { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); min-width: 0; }
.cap-skill { background: var(--surface); padding: 15px 16px; font-size: 14px; line-height: 1.4; color: var(--fg); display: flex; align-items: flex-start; gap: 10px; transition: background 0.18s ease; }
.cap-skill::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: var(--accent); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.cap-skill:hover { background: var(--fg-soft); }
.cap-skill:hover::before { transform: scale(1.55); box-shadow: 0 0 8px var(--accent-soft); }
.cap.is-ai .cap-skill::before { background: var(--accent-2); }
.cap.is-ai .cap-skill:hover::before { box-shadow: 0 0 8px var(--accent-2-soft); }

@media (max-width: 760px) {
  .cap { grid-template-columns: 40px 1fr; gap: var(--gap-sm) var(--gap-md); align-items: start; padding: var(--gap-lg) 0; }
  .cap-head { grid-column: 2; }
  .cap-skills { grid-column: 1 / -1; grid-template-columns: 1fr; }
}
.cap-lines { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; min-width: 0; }

/* ─── case card (image + KPI) ─────────────────────────────────────── */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
@media (max-width: 920px) { .case-grid { grid-template-columns: 1fr; } }
.case { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); transition: border-color 0.15s ease, transform 0.15s ease; }
.case:hover { border-color: var(--accent); transform: translateY(-2px); }
.case .media { border: 0; border-radius: 0; aspect-ratio: 16 / 10; }
.case-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.case-body h3 { font-size: 18px; }
.case-body p { margin: 0; color: var(--muted); font-size: 14px; }
.case-result { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); display: flex; gap: var(--gap-lg); flex-wrap: wrap; }
.kpi { display: flex; flex-direction: column; gap: 2px; }
.kpi b { font-family: var(--font-display); font-size: 21px; color: var(--accent); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 12px; color: var(--muted); }

/* ─── brand / partner wall ────────────────────────────────────────── */
.brand-wall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 760px) { .brand-wall { grid-template-columns: repeat(2, 1fr); } }
.brand-chip { background: var(--surface); display: grid; place-items: center; padding: 24px 12px; text-align: center; color: var(--muted); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; transition: color 0.15s ease, background 0.15s ease; }
.brand-chip:hover { color: var(--fg); background: var(--fg-soft); }

/* ─── showcase split (text + real image) ──────────────────────────── */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xl); align-items: center; }
@media (max-width: 920px) { .showcase { grid-template-columns: 1fr; gap: var(--gap-xl); } }
.showcase.reverse .showcase-media { order: -1; }
@media (max-width: 920px) { .showcase.reverse .showcase-media { order: 0; } }

/* ══════════════════════════════════════════════════════════════════
   v3 精修：景深阴影 / 分区节奏 / 封面 Hero / 面板化数据 / 图片背景
   配图 base64 在 media.css，仅提供 .img-* 背景，规避预览外链破图
   ══════════════════════════════════════════════════════════════════ */

.imgfill { background-size: cover; background-position: center; background-repeat: no-repeat; }
.abs-bg { position: absolute; inset: 0; z-index: 0; }

/* section rhythm bands */
.section-tint { background: var(--surface-2); }
.section-tint + .section, .section + .section-tint { border-top: 0; }

/* dark contrast band (AI moment) */
.band-dark { position: relative; overflow: hidden; background: var(--ink); color: var(--ink-fg); border-top: 0; }
.band-dark .abs-bg { opacity: 0.4; background-position: center right; }
.band-dark > .container { position: relative; z-index: 1; }
.band-dark h2, .band-dark h3 { color: var(--ink-fg); }
.band-dark .lead { color: var(--ink-muted); }
.band-dark .eyebrow { color: var(--accent-2); }
.band-dark .eyebrow::before { background: var(--accent-2); }
.band-dark .card-rule { border-top-color: var(--ink-border); }
.band-dark .card-rule:hover { border-top-color: var(--accent-2); }
.band-dark .card-rule h3 { color: var(--ink-fg); }
.band-dark .card-rule p { color: var(--ink-muted) !important; }
.band-dark .btn-ghost { color: var(--ink-fg); }
.band-dark .btn-ghost:hover { color: var(--accent-2); }

/* cover hero */
.hero-cover { position: relative; overflow: hidden; background: var(--ink); color: var(--ink-fg); padding-top: clamp(52px, 7vw, 96px); padding-bottom: clamp(76px, 11vw, 148px); border-top: 0; }
.hero-cover .abs-bg { opacity: 0.62; }
.hero-cover .hero-canvas { z-index: 1; opacity: 0.42; }
.hero-cover::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(96deg, var(--ink) 4%, color-mix(in oklch, var(--ink) 66%, transparent) 46%, color-mix(in oklch, var(--ink) 18%, transparent) 100%),
              linear-gradient(0deg, var(--ink) 0%, transparent 48%); }
.hero-cover .hero-inner { position: relative; z-index: 3; max-width: 62ch; text-align: left; margin: 0; }
.hero-cover h1 { color: var(--ink-fg); text-shadow: 0 1px 34px rgba(0,0,0,.4); margin-bottom: var(--gap-md); }
.hero-cover .lead { color: var(--ink-muted); max-width: 46ch; margin: 0 0 var(--gap-lg); }
.hero-cover .eyebrow { color: var(--accent-2); }
.hero-cover .eyebrow::before { background: var(--accent-2); }
.hero-cover .hero-cta { justify-content: flex-start; }
.hero-cover .btn-secondary { color: var(--ink-fg); border-color: color-mix(in oklch, var(--ink-fg) 32%, transparent); }
.hero-cover .btn-secondary:hover { border-color: var(--ink-fg); background: color-mix(in oklch, var(--ink-fg) 8%, transparent); }
.hero-stats { list-style: none; margin: var(--gap-lg) 0 0; padding: var(--gap-lg) 0 0; border-top: 1px solid var(--ink-border); display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: var(--gap-md) clamp(28px, 4vw, 64px); }
.hero-stats li { display: flex; flex-direction: column; gap: 3px; }
.hero-stats b { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.02em; color: var(--ink-fg); font-variant-numeric: tabular-nums; line-height: 1; }
.hero-stats b .unit { font-size: .55em; color: var(--accent-2); margin-left: 2px; }
.hero-stats span { font-size: 13px; color: var(--ink-muted); }

/* elevate solid interactive cards */
.card-hover:hover { box-shadow: var(--shadow-md); }
.case { box-shadow: var(--shadow-sm); }
.case:hover { box-shadow: var(--shadow-md); }

/* metrics → premium bordered panel with dividers + accent ticks */
.metrics { grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.metric { padding: clamp(22px, 3vw, 32px) clamp(20px, 2.4vw, 28px); gap: 8px; border-left: 1px solid var(--border); position: relative; }
.metric:first-child { border-left: 0; }
.metric::before { content: ''; position: absolute; top: clamp(13px, 1.8vw, 18px); left: clamp(20px, 2.4vw, 28px); width: 22px; height: 3px; background: var(--accent); border-radius: 999px; }
@media (max-width: 760px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric { border-left: 0; border-top: 1px solid var(--border); }
  .metric:nth-child(1), .metric:nth-child(2) { border-top: 0; }
  .metric:nth-child(2n) { border-left: 1px solid var(--border); }
}

/* brand wall + standalone media presence */
.brand-wall { box-shadow: var(--shadow-sm); }
.brand-chip { padding: 30px 14px; font-size: 16px; }
.showcase-media .media, .media.wide, .media.ratio-16-10 { box-shadow: var(--shadow-md); }

/* sub-page hero — subtle brand glow, not a full wash */
.page-hero { position: relative; isolation: isolate; }
/* 子页 hero：标题左对齐撑满容器，正文限宽保证可读（此前被 max-width:52ch 压成居中窄柱） */
.page-hero .lead { max-width: 54ch; }
.hero-cover .pill-ai { background: color-mix(in oklch, var(--accent-2) 26%, transparent); color: #fff; border: 1px solid color-mix(in oklch, var(--accent-2) 55%, transparent); }

/* 关于页 hero：文字压在工作室图上，图做磨砂半透明背景（backdrop-filter 模糊底图，文字保持清晰） */
.hero-frost { position: relative; overflow: hidden; border-top: 0; padding-top: clamp(60px, 8.5vw, 120px); padding-bottom: clamp(60px, 8.5vw, 120px); }
.hero-frost .abs-bg { z-index: 0; }
.hero-frost::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: color-mix(in oklch, var(--bg) 52%, transparent); backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05); }
.hero-frost > .container { position: relative; z-index: 2; }
.hero-frost .hero-inner { max-width: 60ch; }
.hero-frost .lead { max-width: 54ch; }
/* 底图更清晰后，给文字加同色柔光晕，保证可读 */
.hero-frost .eyebrow, .hero-frost h1, .hero-frost .lead { text-shadow: 0 1px 12px color-mix(in oklch, var(--bg) 66%, transparent); }

/* 首页 hero 四数字：窄屏退回 2×2 */
@media (max-width: 640px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } }
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(85% 120% at 100% -10%, var(--accent-soft), transparent 58%); }

.sec-head { max-width: 52ch; }

/* ══════════════════════════════════════════════════════════════════
   v4 微修：图标微动效 / 图文模块入场错峰 / 图片蒙版与缩放一致性
   仍复用既有 token，不新增颜色。
   ══════════════════════════════════════════════════════════════════ */

/* 图标微动效：卡片 / 能力项 / AI 方向 hover 时图标轻微放大点亮 */
.feature-mark svg { transition: transform .28s cubic-bezier(.34, 1.56, .64, 1); }
.feature:hover .feature-mark svg,
.card-hover:hover .feature-mark svg,
.cap:hover .cap-badge svg,
.ai-block:hover .ai-block-head .feature-mark svg { transform: scale(1.12) rotate(-3deg); }
.card-hover:hover .feature-mark { border-color: var(--accent); background: var(--accent-soft); }
.cap:not(.is-ai):hover .cap-badge { border-color: var(--accent); }
.service-head .feature-mark { color: var(--accent); }

/* tag hover 反馈（能力项 / 场景标签） */
.tag { transition: color .16s ease, border-color .16s ease, background .16s ease; }
.cap-lines .tag:hover, .card .tag:hover { color: var(--fg); border-color: var(--accent); background: var(--accent-soft); }

/* 图文模块入场错峰：同一栅格内卡片依次浮现 */
.grid-3 > .reveal:nth-child(2), .grid-4 > .reveal:nth-child(2),
.case-grid > .reveal:nth-child(2), .grid-2 > .reveal:nth-child(2) { transition-delay: .07s; }
.grid-3 > .reveal:nth-child(3), .grid-4 > .reveal:nth-child(3),
.case-grid > .reveal:nth-child(3) { transition-delay: .14s; }
.grid-4 > .reveal:nth-child(4) { transition-delay: .21s; }

/* 列表项跟随卡片入场逐条上浮（reveal 由脚本切换 is-visible） */
.reveal .feature-list li { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease, color .18s ease; }
.reveal.is-visible .feature-list li { opacity: 1; transform: none; }
.reveal.is-visible .feature-list li:nth-child(2) { transition-delay: .06s; }
.reveal.is-visible .feature-list li:nth-child(3) { transition-delay: .12s; }
.reveal.is-visible .feature-list li:nth-child(4) { transition-delay: .18s; }
.reveal.is-visible .feature-list li:nth-child(5) { transition-delay: .24s; }

/* 图片：统一 hover 缩放（此前仅案例卡有） */
.media.imgfill { background-size: cover; transition: background-size .6s cubic-bezier(.16, 1, .3, 1); }
.media.imgfill:hover { background-size: 108%; }
.showcase-media .media.imgfill:hover, .case:hover .media.imgfill { background-size: 112%; }

/* 独立大图统一底部压暗蒙版，让分别生成的照片像同一套系统（案例卡有自己的蒙版，排除在外） */
.media.wide.imgfill::before,
.media.ratio-16-10.imgfill::before,
.showcase-media .media.imgfill::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, color-mix(in oklch, var(--ink) 46%, transparent) 100%);
  opacity: .6;
}
html[data-theme='dark'] .media.wide.imgfill::before,
html[data-theme='dark'] .media.ratio-16-10.imgfill::before,
html[data-theme='dark'] .showcase-media .media.imgfill::before { opacity: .74; }

/* 图片角标：一致的媒体说明 + 一处克制点缀 */
.media-cap {
  position: absolute; z-index: 2; left: 16px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  color: #fff; background: color-mix(in oklch, var(--ink) 52%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid color-mix(in oklch, #fff 20%, transparent);
}
.media-cap .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }

/* 合作品牌墙：hover 时顶部蓝紫渐变描边划出 */
.brand-chip { position: relative; overflow: hidden; }
.brand-chip::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .28s ease;
}
.brand-chip:hover::after { transform: scaleX(1); }

/* 联系页信息行：带图标框 */
.contact-line.with-icon { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 12px; }
.contact-line .ico { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 10px; color: var(--accent); transition: border-color .18s ease, background .18s ease; }
.contact-line .ico svg { width: 16px; height: 16px; }
.contact-line.with-icon:hover .ico { border-color: var(--accent); background: var(--accent-soft); }
.contact-line .c-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .reveal .feature-list li { opacity: 1; transform: none; }
  .media.imgfill, .feature-mark svg { transition: none; }
  .brand-chip::after { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   v5：合作平台（名称 + 图标）+ 客户走马灯（弱化横向滚动）
   平台图标为站内统一线性风格的品类化标记，非各平台原始 Logo 复刻。
   ══════════════════════════════════════════════════════════════════ */

.platform-row { display: flex; flex-wrap: wrap; gap: var(--gap-sm) var(--gap-md); }
.platform { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.platform:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
/* 用户提供的彩色 app 图标（base64 于 logos.css）→ 背景承载 + 统一转黑白色调 */
.platform-logo { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--border); background-color: var(--surface); background-size: cover; background-position: center; background-repeat: no-repeat; filter: grayscale(1) contrast(1.02); transition: transform .25s ease, filter .3s ease, border-color .25s ease; }
/* 默认黑白，悬浮时淡入还原品牌原色 */
.platform:hover .platform-logo { transform: scale(1.06); filter: grayscale(0) contrast(1); border-color: color-mix(in oklch, var(--fg) 22%, var(--border)); }
@media (prefers-reduced-motion: reduce) { .platform-logo { transition: filter .3s ease; } }
.platform-name { font-size: 14px; font-weight: 600; color: var(--fg); letter-spacing: -.01em; }

.clients-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0; }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee-track { display: flex; width: max-content; align-items: center; animation: marquee-scroll 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.client { flex-shrink: 0; white-space: nowrap; color: var(--muted); font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.client::after { content: '·'; margin: 0 clamp(20px, 3vw, 40px); color: color-mix(in oklch, var(--muted) 45%, transparent); }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; row-gap: 6px; }
  .marquee-track .client[aria-hidden="true"] { display: none; }
}