:root {
  --orange: #ff5c28;
  --orange-dark: #e54e1f;
  --orange-soft: #fff2ec;
  --orange-cta-bg: #ffe8de;
  --ink: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --bg: #ffffff;
  --bg-muted: #f9fafb;
  --footer: #0b1220;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 10px 40px rgba(17, 24, 39, 0.08);
  --shadow-sm: 0 4px 14px rgba(17, 24, 39, 0.06);
  --container: 1120px;
  --header-height: 68px;
  --hero-max: 1320px;
  --hero-gutter: 72px;
  --hero-surface: #f8f4f0;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(100% - 56px, var(--container));
  margin-inline: auto;
}

.text-accent {
  color: var(--orange);
}

/* Header — frosted glass overlay, same vibe as the hero outline CTA button.
   Alpha is bumped above the button's 0.12 because the header also has to
   stay legible after the user scrolls past the video and lands on a white
   section; 0.55 + saturated blur reads as frosted on both surfaces.
   `position: fixed` floats the header on top of the hero so the video can
   fill the full viewport on the home page. */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.45);
}

/* Pages without a fullscreen hero need their content pushed below the
   fixed header. Home is excluded so its hero owns the top edge; the
   dashboard pages use .dashboard-header (sticky, in-flow) so they
   manage their own offset. */
body:not(.dashboard-body):not([data-page="home"]) {
  padding-top: var(--header-height);
}

/* Fixed header would otherwise clip the top of in-page anchor targets. */
section[id],
main[id] {
  scroll-margin-top: var(--header-height);
}

/* Header spans the full viewport: override .container max-width so logo and
   login/register sit close to the screen edges instead of being centered. */
.header > .container,
.header__inner {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(20px, 3vw, 48px);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-height);
}

.logo {
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.logo img {
  display: block;
  height: 32px;
  width: auto;
}

.logo--light {
  color: #fff;
}

/* Footer's dark surface — invert the orange logo to white. */
.logo--light img {
  filter: brightness(0) invert(1);
}

/* Compact dashboard header (56px tall) — shrink logo slightly. */
.dashboard-header .logo img {
  height: 24px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 0.975rem;
  font-weight: 500;
  /* Stick to the logo: absorb leftover horizontal space on the right so
     space-between no longer pushes nav into the middle. */
  margin-right: auto;
  margin-left: clamp(1.5rem, 3vw, 3rem);
}

.nav a {
  letter-spacing: 0.01em;
}

.nav a {
  color: var(--ink);
  opacity: 0.85;
  transition: color 0.15s, opacity 0.15s;
}

.nav a:hover {
  color: var(--orange);
  opacity: 1;
}

.header__actions {
  display: flex;
  align-items: center;
  /* Tighter base gap — keeps login + register reading as a coupled
     action pair. The language switcher gets extra room via its own
     margin (below) so it visually separates as a utility group. */
  gap: 0.75rem;
  position: relative;
}

/* Group separation: push the lang switcher away from the login/register
   pair. Total lang ↔ login spacing = 0.75rem gap + 0.65rem margin ≈ 1.4rem,
   while login ↔ register stays at 0.75rem. Reads as two distinct groups
   without needing a vertical divider. */
.lang-dropdown {
  position: relative;
  margin-right: 0.65rem;
}

.lang--trigger {
  /* Collapse to natural width — old pill needed min-width + space-between
     to balance icon / text / caret. With borderless + no caret, those rules
     force a wide dead-air gap between text and (now hidden) caret. */
  gap: 0.4rem;
}

.lang__current {
  font-weight: 600;
}

/* Caret removed: the globe icon is a universally understood language-switch
   affordance, and the hover pill tint already signals interactivity.
   Keeping the <span> in HTML (hidden) avoids touching 15 page templates. */
.lang__caret {
  display: none;
}

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 11rem;
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  /* Slightly more opaque than the trigger so the option text stays legible
     against whatever lies underneath the dropdown, but still picks up the
     same glass language. */
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(229, 231, 235, 0.6);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  z-index: 80;
}

.lang-menu[hidden] {
  display: none;
}

.lang-menu li {
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--ink);
  transition: background 0.12s, color 0.12s;
}

.lang-menu li:hover {
  background: var(--orange-soft);
}

.lang-menu li.is-active {
  font-weight: 700;
  color: var(--orange);
  /* Current locale is inert — keep the marker, drop the click affordance. */
  cursor: default;
  background: transparent;
}
.lang-menu li.is-active:hover {
  background: transparent;
}

.lang {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* Borderless + transparent at rest so the trigger reads as a nav-level
     element instead of a distinct control. Hover / open states paint a
     subtle pill tint as feedback — the shape only "appears" on interaction. */
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--ink);
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.lang:hover {
  background: rgba(15, 23, 42, 0.05);
  color: var(--orange);
}

.lang-dropdown.is-open .lang {
  background: rgba(15, 23, 42, 0.08);
  color: var(--orange);
}

.lang__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  /* Inherit color from .lang so hover/open state tints the globe along
     with the text (SVG uses stroke=currentColor). */
  color: inherit;
  opacity: 0.85;
  transition: opacity 0.18s;
}
.lang:hover .lang__icon,
.lang-dropdown.is-open .lang__icon {
  opacity: 1;
}
.lang__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.link:hover {
  color: var(--orange);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s, border-color 0.12s, color 0.12s;
}

.btn:active {
  transform: translateY(1px);
}

.btn--sm {
  padding: 0.45rem 1rem;
  font-size: 0.875rem;
}

.btn--lg {
  padding: 0.85rem 1.35rem;
  font-size: 0.95rem;
}

.btn--primary {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
  box-shadow: 0 4px 14px rgba(255, 92, 40, 0.35);
}

.btn--primary:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
}

.btn--outline {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}

.btn--outline:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.btn--ghost {
  background: #fff;
  color: var(--orange);
  border-color: #fff;
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.9);
}

/* Hero — asymmetric SaaS layout */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Full viewport — the fixed header overlays the top edge instead of
     pushing the hero down, so the video occupies the entire first screen. */
  min-height: 100vh;
  min-height: 100dvh;
  padding: 32px 0 40px;
  overflow: hidden;
  background-color: var(--hero-surface);
}

.hero__inner {
  width: 100%;
  max-width: var(--hero-max);
  margin-inline: auto;
  padding-inline: var(--hero-gutter);
}

/* Hero with full-bleed background video: title + CTA pinned to bottom-left. */
.hero--video {
  padding: 0;
  background-color: #000;
  align-items: stretch;
  justify-content: stretch;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Static cover image — sits on top of the video at full opacity for the
   first ≥5 seconds (and until the video is ready to play through). JS
   adds `.is-hidden` to fade it out and reveal the playing video.
   z-index 1 = above video, below gradient overlay so the bottom CTA
   tint applies to both stages consistently. */
.hero__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.hero__cover.is-hidden {
  opacity: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, 0.55) 100%
  );
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  align-self: flex-end;
  padding: 0 clamp(20px, 4vw, 64px) clamp(36px, 6vh, 80px);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero--video .hero__title {
  max-width: 720px;
  color: #fff;
  margin: 0;
  font-size: clamp(1.85rem, 3.4vw, 3rem);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero--video .hero__title-line--prefix,
.hero--video .hero__title-line--tail,
.hero--video .hero__title-comma {
  color: #fff;
}

.hero--video .hero__cta {
  margin-bottom: 0;
}

.hero--video .hero__cta .btn--outline {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  backdrop-filter: blur(6px);
}

.hero--video .hero__cta .btn--outline:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: #fff;
  color: #fff;
}

@media (max-width: 640px) {
  .hero__content {
    padding-bottom: clamp(32px, 8vh, 56px);
  }
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(420px, 500px) minmax(0, 1.12fr);
  gap: 28px;
  align-items: center;
}

.hero__copy {
  position: relative;
  z-index: 2;
  max-width: 520px;
}

.hero__title {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 0.12em;
}

.hero__title-line--prefix {
  display: block;
}

.hero__title-line--highlight {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0;
}

.hero__title-line--tail {
  display: block;
  color: var(--ink);
}

.hero__title-comma {
  color: var(--ink);
  white-space: pre;
}

.hero__title-comma:empty {
  display: none;
}

.hero__title-rotator {
  display: inline-block;
  vertical-align: bottom;
  position: relative;
}

.hero__title-rotator-viewport {
  display: block;
  height: 1.18em;
  overflow: hidden;
}

.hero__title-rotator-list {
  display: block;
  transform: translateY(calc(var(--rot-index, 0) * -1.18em));
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__title-rotator-item {
  display: block;
  height: 1.18em;
  line-height: 1.18;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .hero__title-rotator-list {
    transition: none;
  }
}

.hero__lead {
  margin: 0 0 28px;
  color: #5c6370;
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 520px;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 28px;
}

.hero__cta .btn--lg {
  min-height: 52px;
  padding-inline: 1.5rem;
  font-size: 0.95rem;
}

.hero__cta .btn--primary {
  box-shadow: 0 6px 20px rgba(255, 92, 40, 0.32);
}

.hero__cta .btn--outline {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(17, 24, 39, 0.14);
  color: var(--ink);
}

.hero__cta .btn--outline:hover {
  background: #fff;
  border-color: rgba(17, 24, 39, 0.28);
  color: var(--ink);
}

.hero__meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero__social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.hero__social strong {
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hero__social p {
  line-height: 1.35;
}

.hero__social [data-i18n="hero_social_suffix"] {
  opacity: 0.62;
}

.hero .avatar-stack__item {
  width: 31px;
  height: 31px;
  opacity: 0.68;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.06);
}

.avatar-stack {
  display: flex;
  flex-shrink: 0;
}

.avatar-stack__item {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -10px;
  background: linear-gradient(135deg, #fdba74, #fb923c);
  box-shadow: var(--shadow-sm);
}

.avatar-stack__item:first-child {
  margin-left: 0;
}

.avatar-stack__item:nth-child(2) {
  background: linear-gradient(135deg, #93c5fd, #60a5fa);
}

.avatar-stack__item:nth-child(3) {
  background: linear-gradient(135deg, #c4b5fd, #a78bfa);
}

.avatar-stack__item:nth-child(4) {
  background: linear-gradient(135deg, #86efac, #4ade80);
}

.hero__brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  opacity: 0.5;
}

.hero__brands span {
  position: relative;
}

.hero__brands span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -0.72rem;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #d1d5db;
  transform: translateY(-50%);
}

.hero__visual {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: clamp(420px, 68vh, 620px);
  border-radius: 20px;
  overflow: hidden;
  background: transparent;
}

.hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #f8f4f0 0%,
    rgba(248, 244, 240, 0.82) 32%,
    rgba(248, 244, 240, 0) 56%
  );
}

.hero__photo {
  width: 100%;
  height: 100%;
  min-height: inherit;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.hero__photo img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: 80% 32%;
  display: block;
}

html[lang="zh-CN"] .hero__title {
  font-size: clamp(2.05rem, 3.4vw, 2.85rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  max-width: 540px;
  text-wrap: pretty;
}

html[lang="zh-CN"] .hero__title-line--prefix,
html[lang="zh-CN"] .hero__title-line--highlight {
  display: inline;
}

html[lang="zh-CN"] .hero__title-line--highlight {
  align-items: baseline;
}

html[lang="zh-CN"] .hero__title-line--tail {
  display: block;
  margin-top: 0.14em;
  word-break: keep-all;
}

html[lang="zh-CN"] .hero__title-rotator-viewport,
html[lang="zh-CN"] .hero__title-rotator-item {
  height: 1.2em;
  line-height: 1.2;
}

html[lang="zh-CN"] .hero__title-rotator-list {
  transform: translateY(calc(var(--rot-index, 0) * -1.2em));
}

html[lang="zh-CN"] .hero__lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 520px;
}

@media (min-width: 1025px) {
  .hero__grid {
    grid-template-columns: minmax(440px, 500px) minmax(0, 1.08fr);
    gap: 28px;
  }

  .hero__copy {
    transform: translateX(32px);
  }

  .hero__visual {
    transform: translateX(22px);
    margin-right: -36px;
    min-height: clamp(440px, 70vh, 640px);
  }

  .hero__photo img {
    object-position: 84% 34%;
  }

  html[lang="zh-CN"] .hero__title-line--tail {
    white-space: nowrap;
  }
}

@media (max-width: 1280px) {
  :root {
    --hero-gutter: 48px;
  }

  .hero__grid {
    grid-template-columns: minmax(380px, 480px) minmax(0, 1fr);
    gap: 28px;
  }

  .hero__copy {
    transform: none;
  }

  .hero__visual {
    transform: none;
    margin-right: 0;
  }

  .hero__photo {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .hero__photo img {
    transform: none;
  }
}

@media (max-width: 1024px) {
  :root {
    --hero-gutter: 32px;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hero__visual {
    min-height: clamp(280px, 48vw, 380px);
  }

  .hero__visual::before {
    background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 45%,
      rgba(248, 244, 240, 0.75) 78%,
      #f8f4f0 100%
    );
  }

  .hero__photo img {
    object-position: 60% 30%;
  }

  .hero__copy {
    max-width: 100%;
  }

  .hero__title,
  .hero__lead {
    max-width: 100%;
  }

  .hero__copy,
  .hero__visual {
    transform: none;
    margin-right: 0;
  }

  .hero__photo {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .hero__photo img {
    transform: none;
    object-position: 78% 32%;
  }

  html[lang="zh-CN"] .hero__title-line--prefix,
  html[lang="zh-CN"] .hero__title-line--highlight {
    display: block;
  }

  html[lang="zh-CN"] .hero__title-line--highlight {
    display: flex;
  }

  html[lang="zh-CN"] .hero__title-line--tail {
    white-space: normal;
  }
}

/* Sections */
.section {
  padding: 4.5rem 0;
}

.section--muted {
  background: var(--bg-muted);
}

.section__head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 2.5rem;
}

.section__head--left {
  text-align: left;
  margin: 0 0 1rem;
  max-width: 42rem;
}

.section__head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.section__head-row .section__head--left {
  margin-bottom: 0;
}

.section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2rem;
}

/* Secondary pages (activities / cases / process / about) use ONE unified
   page backdrop — light gray (--bg-muted). White cards (filter bar, recruit
   cards, case cards) float on top of it via their own bg + border + shadow.
   This replaces the old two-layer scheme (gray hero band over white body)
   that produced a visible color step once the hairline divider was removed. */
.page-main {
  padding-bottom: 4rem;
  background: var(--bg-muted);
}

.page-hero {
  /* No own background — inherits the unified --bg-muted from .page-main so
     the title region and the content region read as one continuous surface
     (no color step at the seam).
     2.5rem bottom padding keeps the filter region from butting against the
     subtitle; the old 1px border-bottom + separate bg were both removed. */
  padding: 2rem 0 2.5rem;
}

.page-hero h1 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Subtitle directly under the h1 inside .page-hero — muted body weight,
   18px top gap reads as "subtitle to title" (not "next paragraph"). */
.page-hero__desc {
  margin: 18px 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 720px;
}

.breadcrumb {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

.breadcrumb a {
  color: var(--orange);
  font-weight: 600;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.detail-layout {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 0 3rem;
}

.detail-hero-img {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.detail-hero-img img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.detail-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.detail-prose h2 {
  margin: 1.75rem 0 0.65rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.detail-prose p {
  margin: 0 0 1rem;
  color: var(--muted);
  line-height: 1.75;
}

.card-case-cta {
  margin-top: 0.65rem;
  width: 100%;
  justify-content: center;
}

/* Current-page nav link — adds an orange underline pseudo so users can spot
   "you are here" at a glance. The breadcrumb row was removed from the 4
   secondary pages once this signal became strong enough on its own. The
   underline tracks the text width via left/right=0 on the absolute pseudo. */
.nav a.is-active {
  color: var(--orange);
  opacity: 1;
  position: relative;
}
.nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2.5px;
  background: var(--orange);
  border-radius: 2px;
  pointer-events: none;
}

.section__head h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.section__head p {
  margin: 0;
  color: var(--muted);
}

/* Tabs */
.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.tab {
  border: 1px solid var(--line);
  background: #fff;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tab:hover {
  border-color: #d1d5db;
  color: var(--ink);
}

.tab.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

/* Grids */
.grid {
  display: grid;
  gap: 1.25rem;
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.card-recruit {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}

.card-recruit:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.card-recruit__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.card-recruit__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-recruit__tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: rgba(17, 24, 39, 0.75);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
}

.card-recruit__body {
  padding: 1.1rem 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.65rem;
}

.card-recruit__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.card-recruit__meta {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.card-recruit .btn {
  margin-top: auto;
  width: 100%;
}

/* Features */
.features .feature {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.feature__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--orange-soft);
  color: var(--orange);
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}

.feature__icon svg {
  width: 26px;
  height: 26px;
}

.feature h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.feature p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Masonry cases */
.masonry {
  column-count: 3;
  column-gap: 1.25rem;
}

.case-card {
  break-inside: avoid;
  margin-bottom: 1.25rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s;
}

.case-card:hover {
  box-shadow: var(--shadow);
}

.case-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
}

/* Layout-driven editorial rhythm: every 4th card (positions 1, 5, 9, ...)
   renders as a 16:10 wide tile to break the default portrait cadence and
   anchor the top of the masonry. Because the rule is positional, new
   cases automatically inherit the wide treatment when they rotate to
   the top — no per-case `wide` flag needed in the data layer. */
.masonry .case-card:nth-of-type(4n+1) .case-card__media {
  aspect-ratio: 16 / 10;
}

/* Legacy explicit class kept for back-compat in case any future caller
   needs to force a wide tile programmatically. */
.case-card__media--wide {
  aspect-ratio: 16 / 10;
}

.case-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.2s;
}

.case-card:hover .case-card__play {
  opacity: 1;
}

.case-card__play span {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: var(--orange);
  box-shadow: var(--shadow-sm);
}

.case-card__tag {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  background: #fff;
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
}

.case-card__body {
  padding: 0.9rem 1rem 1rem;
}

.case-card__title {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.case-card__author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.case-card__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fde68a, #fbbf24);
}

.case-card__stats {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--muted);
}

/* Stepper */
.stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
}

/* Gray dashed track that lives behind all circles. */
.stepper::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px);
  z-index: 0;
}

/* Orange progress line that draws from left to right when the stepper
   reveals. Sits on top of the dashed track. */
.stepper::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 8%;
  height: 2px;
  width: 0;
  background: var(--orange);
  z-index: 0;
  transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.2s;
  box-shadow: 0 0 8px rgba(255, 92, 40, 0.4);
}

.stepper.is-visible::after {
  width: 84%;
}

.stepper__item {
  flex: 1;
  min-width: 120px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.stepper__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line);
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-sm);
  transition: background 0.3s ease, border-color 0.3s ease,
              color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Each step's circle lights up when its own .reveal triggers. */
.stepper__item.is-visible .stepper__icon {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(255, 92, 40, 0.35);
}

.stepper__item strong {
  display: block;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.stepper__item.is-visible strong {
  color: var(--ink);
}

@media (max-width: 768px) {
  .stepper {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .stepper::before,
  .stepper::after {
    left: 22px;
    top: 32px;
    right: auto;
    bottom: 32px;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, var(--line) 0 8px, transparent 8px 14px);
  }
  .stepper::after {
    background: var(--orange);
    height: 0;
  }
  .stepper.is-visible::after {
    height: calc(100% - 64px);
    width: 2px;
  }
  .stepper__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
    width: 100%;
  }
  .stepper__item strong {
    margin: 0;
  }
  .stepper__icon {
    margin-bottom: 0;
    flex-shrink: 0;
  }
}

/* About */
.about__text {
  max-width: 640px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.about__text h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 800;
}

.about__text p {
  margin: 0;
  color: var(--muted);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.stat {
  background: var(--bg-muted);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  text-align: center;
  border: 1px solid var(--line);
}

.stat__icon {
  font-size: 1.35rem;
  display: block;
  margin-bottom: 0.35rem;
}

.stat strong {
  display: block;
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--orange);
}

.stat span:last-child {
  font-size: 0.85rem;
  color: var(--muted);
}

/* CTA bar */
.cta-bar {
  background: var(--orange-cta-bg);
  padding: 2.75rem 0;
  border-block: 1px solid rgba(255, 92, 40, 0.15);
}

.cta-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.cta-bar h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
}

.cta-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Footer */
.footer {
  background: var(--footer);
  color: #cbd5e1;
  padding: 3.5rem 0 1.5rem;
  font-size: 0.9rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.1fr 2fr 0.9fr;
  gap: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__tagline {
  margin: 0.75rem 0 0;
  color: #94a3b8;
  max-width: 240px;
  line-height: 1.5;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.footer h3 {
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #f1f5f9;
}

.footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer li {
  margin-bottom: 0.45rem;
}

.footer a:hover {
  color: #fff;
}

.footer__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}

.qr {
  width: 88px;
  height: 88px;
  background: #fff;
  color: var(--footer);
  display: grid;
  place-items: center;
  font-weight: 800;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

.footer__social {
  display: flex;
  gap: 0.5rem;
}

.footer__social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.footer__social a:hover {
  background: var(--orange);
  color: #fff;
}

.footer__bottom {
  padding-top: 1.25rem;
  text-align: center;
  color: #64748b;
  font-size: 0.8rem;
}

.footer__bottom p {
  margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .masonry {
    column-count: 2;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer__aside {
    align-items: flex-start;
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
  }

  .stepper::before {
    display: none;
  }
}

@media (max-width: 900px) {
  .nav,
  .header__actions {
    display: none;
  }

  .header.is-open .nav,
  .header.is-open .header__actions {
    display: flex;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    padding: 1rem 1.25rem 1.25rem;
    gap: 0.75rem;
    box-shadow: var(--shadow-sm);
  }

  .header.is-open .nav {
    padding-bottom: 0;
  }

  .header.is-open .header__actions {
    top: auto;
    position: relative;
    border: 0;
    box-shadow: none;
    padding-top: 0;
  }

  .nav-toggle {
    display: flex;
  }

  .hero {
    min-height: auto;
    padding: 16px 0 32px;
  }

  :root {
    --hero-gutter: 24px;
  }
}

@media (max-width: 640px) {
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .masonry {
    column-count: 1;
  }

  .footer__cols {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }

  .cta-bar__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* === 表单 / 认证页样式（V1 入口三页：login / signup / creator-onboarding） === */

.auth-page {
  background: var(--orange-soft);
  min-height: calc(100vh - 80px);
  padding: 3rem 1rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.auth-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 480px;
  padding: 2rem 2rem 1.5rem;
}

.auth-card--wide {
  max-width: 720px;
}

.auth-card__head {
  text-align: center;
  margin-bottom: 1.5rem;
}

.auth-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.auth-card__subtitle {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
}

.auth-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.auth-card__hint {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  margin: 1.25rem 0 0.5rem;
}

.auth-card__foot {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.auth-card__foot a {
  color: var(--orange);
  text-decoration: none;
  font-weight: 600;
}

.auth-card__foot a:hover {
  color: var(--orange-dark);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.form-label--required::after {
  content: " *";
  color: #e11d48;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.form-textarea {
  resize: vertical;
  min-height: 5rem;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 92, 40, 0.15);
}

.form-group--error .form-input,
.form-group--error .form-textarea,
.form-group--error .form-select {
  border-color: #e11d48;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}

.form-error {
  color: #e11d48;
  font-size: 0.82rem;
  margin: 0;
  min-height: 1em;
}

.form-hint {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0;
}

.btn--block {
  width: 100%;
  justify-content: center;
}

.field-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 640px) {
  .field-grid-2 {
    grid-template-columns: 1fr;
  }
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  font-family: inherit;
}

.chip:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.chip--active {
  background: var(--orange-soft);
  border-color: var(--orange);
  color: var(--orange);
  font-weight: 600;
}

.onboarding-page {
  padding: 2.5rem 1rem 7rem;
  background: var(--orange-soft);
  min-height: 100vh;
}

.onboarding-shell {
  max-width: 720px;
  margin: 0 auto;
}

.onboarding-shell__head {
  text-align: center;
  margin-bottom: 1.5rem;
}

.onboarding-shell__head h1 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.onboarding-shell__head p {
  color: var(--muted);
  margin: 0;
}

.section-block {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(17, 24, 39, 0.04);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

.section-block__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 1rem;
}

.social-account-item {
  position: relative;
  padding: 1rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  background: #fafafa;
}

.social-account-item:last-child {
  margin-bottom: 0;
}

.social-account-item__remove {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--line);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-account-item__remove:hover {
  background: #e11d48;
  color: #fff;
}

.add-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.9rem;
  background: transparent;
  border: 1px dashed var(--orange);
  color: var(--orange);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
}

.add-social-btn:hover {
  background: var(--orange-soft);
}

.completion-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 30;
  box-shadow: 0 -4px 16px rgba(17, 24, 39, 0.06);
}

.completion-bar__inner {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.completion-bar__meter {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.completion-bar__track {
  flex: 1;
  height: 6px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.completion-bar__fill {
  display: block;
  height: 100%;
  background: var(--orange);
  width: 0%;
  transition: width 0.25s ease;
}

.completion-bar__value {
  font-weight: 700;
  color: var(--ink);
  min-width: 3em;
  text-align: right;
}

@media (max-width: 640px) {
  .completion-bar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .completion-bar__inner .btn {
    width: 100%;
  }
}

.toast {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(-1rem);
  background: var(--ink);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
  max-width: 90vw;
}

.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* === Home page polish (scroll reveal + section rhythm + hover micro-interactions) === */

/* A1: scroll-triggered reveal animation.
   Element starts faded + offset, eases into place when 12% in view. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger groups of cards / steps so they don't all pop together. */
.reveal[data-reveal-delay="1"] { transition-delay: 0.08s; }
.reveal[data-reveal-delay="2"] { transition-delay: 0.16s; }
.reveal[data-reveal-delay="3"] { transition-delay: 0.24s; }
.reveal[data-reveal-delay="4"] { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* A2: warm-tinted section variant for visual rhythm between cool muted sections. */
.section--soft {
  background: linear-gradient(180deg, #fff8f3 0%, var(--orange-soft) 100%);
}

/* A3: image zoom on hover for activity / case cards. */
.card-recruit__media img,
.case-card__media img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-recruit:hover .card-recruit__media img,
.case-card:hover .case-card__media img {
  transform: scale(1.06);
}

/* Subtle border tint on hover — picks up the brand orange. */
.card-recruit:hover,
.case-card:hover {
  border-color: rgba(255, 92, 40, 0.4);
}

/* Feature cards: lift + shadow + orange icon background on hover. */
.features .feature {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.features .feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(255, 92, 40, 0.35);
}

.features .feature:hover .feature__icon {
  background: var(--orange);
  color: #fff;
}

.features .feature .feature__icon {
  transition: background 0.25s ease, color 0.25s ease;
}

/* === 数字看 ZOOM — editorial dark stats banner === */

.stats-banner {
  background:
    radial-gradient(1200px 400px at 50% -20%, rgba(255, 92, 40, 0.22), transparent 60%),
    linear-gradient(180deg, #0f1117 0%, #1a1c25 100%);
  color: #fff;
  padding: 5.5rem 0;
  position: relative;
  overflow: hidden;
}

.stats-banner .section__head {
  color: #fff;
}

.stats-banner .section__head h2 {
  color: #fff;
  font-size: clamp(1.7rem, 2.8vw, 2.25rem);
  font-weight: 800;
  margin: 0 0 0.5rem;
}

.stats-banner .section__head p {
  color: rgba(255, 255, 255, 0.65);
}

.stats-banner__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
}

.stats-banner__item {
  text-align: center;
  position: relative;
}

.stats-banner__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -1rem;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.stats-banner__num {
  display: block;
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  font-weight: 800;
  line-height: 1;
  color: var(--orange);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 6px 30px rgba(255, 92, 40, 0.25);
}

.stats-banner__label {
  display: block;
  margin-top: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .stats-banner {
    padding: 3.5rem 0;
  }
  .stats-banner__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1rem;
    margin-top: 2rem;
  }
  .stats-banner__item:nth-child(2n)::after {
    display: none;
  }
}

/* === Activities page filter panel === */

.activity-filter-bar {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-shadow: 0 2px 12px rgba(17, 24, 39, 0.04);
}

.activity-filter-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.activity-filter-row--dates {
  gap: 1.5rem;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--line);
  margin-top: 0.2rem;
}

.activity-filter-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  min-width: 56px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: inherit;
}

.activity-filter-row .chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex: 1;
}

.activity-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 0 0 auto;
}

.activity-filter-field .activity-filter-label {
  min-width: 0;
}

.activity-filter-date {
  font-family: inherit;
  font-size: 0.88rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  min-width: 160px;
}

.activity-filter-date:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 92, 40, 0.12);
}

.activity-filter-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.activity-filter-count {
  font-size: 0.9rem;
  color: var(--muted);
  margin-right: auto;
}

.activity-filter-count strong {
  color: var(--orange);
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0.25rem;
}

.activity-filter-sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.activity-filter-select {
  font-family: inherit;
  font-size: 0.88rem;
  padding: 0.4rem 1.75rem 0.4rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8.5L2 4.5h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  min-width: 140px;
}

.activity-filter-select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 92, 40, 0.12);
}

/* Empty state shown when no activities match filters */
.cards-recruit > .empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
  background: var(--bg-muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.cards-recruit > .empty-state .empty-state__icon {
  display: block;
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.6;
}

.cards-recruit > .empty-state .empty-state__desc {
  margin: 0;
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .activity-filter-bar {
    padding: 1rem;
  }
  .activity-filter-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .activity-filter-row--dates {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .activity-filter-label {
    min-width: 0;
  }
  .activity-filter-row .chip-group {
    width: 100%;
  }
  .activity-filter-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .activity-filter-count {
    margin-right: 0;
    text-align: center;
  }
  .activity-filter-sort {
    justify-content: space-between;
  }
  .activity-filter-select {
    flex: 1;
  }
}

/* "已招满" soft badge — used in admin activity table + public activity detail page.
   Only a visual cue; never disables any action or changes activity status. */
.quota-full-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-left: 0.4rem;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.02em;
  vertical-align: middle;
  white-space: nowrap;
}

/* === Country combobox (creator-onboarding) ===
   Searchable dropdown: ISO code stored in hidden <input name="country">,
   visible label translated by getCountryName(code, locale). Keyboard nav,
   open-on-focus, closes on outside-click. */
.country-combo {
  position: relative;
}
.country-combo__input {
  width: 100%;
  padding-right: 2.25rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1rem) 1.1rem, calc(100% - 0.7rem) 1.1rem;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: inherit;
}
.country-combo__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 4px 12px -2px rgba(15, 23, 42, 0.08);
  max-height: 260px;
  overflow-y: auto;
}
.country-combo__list[hidden] {
  display: none;
}
.country-combo__option {
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--text, #0f172a);
  line-height: 1.3;
}
.country-combo__option:hover,
.country-combo__option.is-highlighted {
  background: var(--bg-soft, #f3f4f6);
}
.country-combo__option[aria-selected="true"] {
  color: var(--orange, #f97316);
  font-weight: 600;
}
.country-combo__empty {
  padding: 0.65rem 0.9rem;
  color: var(--text-muted, #6b7280);
  font-size: 0.88rem;
  font-style: italic;
}

/* === Phone input: dial-code select + national number ===
   Auto-links to the chosen country's code (see selectCountry in script.js);
   the user may still override the code manually between country picks. */
.phone-input {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.phone-input__dial {
  flex: 0 0 auto;
  width: 92px;
  min-width: 92px;
}
.phone-input__number {
  flex: 1 1 auto;
  min-width: 0;
}

/* === Contract block (creator side, inside submission-card) ===
   Three visual states keyed by contract status: pending_creator (action),
   pending_admin (waiting), done (record). */
.contract-block {
  margin: 0.85rem 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--line, #e5e7eb);
  background: var(--bg-soft, #f8fafc);
}
.contract-block--pending {
  border-color: var(--orange, #f97316);
  background: rgba(249, 115, 22, 0.06);
}
.contract-block--waiting {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.06);
}
.contract-block--done {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.06);
}
.contract-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}
.contract-block__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text, #0f172a);
}
.contract-block__badge {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.contract-block__badge--pending {
  background: var(--orange, #f97316);
  color: #fff;
}
.contract-block__badge--waiting {
  background: #f59e0b;
  color: #fff;
}
.contract-block__badge--done {
  background: #10b981;
  color: #fff;
}
.contract-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.contract-block__upload-label {
  cursor: pointer;
}
.contract-block__file {
  font-size: 0.88rem;
  color: var(--text, #0f172a);
  margin: 0.25rem 0;
  word-break: break-all;
}
.contract-block__hint {
  font-size: 0.82rem;
  color: var(--text-muted, #6b7280);
  margin-top: 0.25rem;
}

/* === Partner brand trust strip (home) — infinite marquee =============
   Logos in assets/brands/ are mixed formats (PNG + SVG) and colors but
   all share transparent backgrounds. The grayscale + opacity filter is
   the core leveler — it flattens "some colored / some mono" differences
   into one quiet monochrome stream, restoring full color on hover.
   The row scrolls right→left forever via a duplicated track + translateX
   animation; edges fade out with a gradient mask. */
.brand-strip-section {
  padding: 3rem 0 3.5rem;
}
.brand-strip__title {
  text-align: center;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 2rem;
}

/* Full-bleed viewport (sits OUTSIDE .container) so the marquee runs edge
   to edge; the gradient mask softens both ends so logos fade in/out
   rather than hard-cutting at the boundary. */
.brand-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 100px,
    #000 calc(100% - 100px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 100px,
    #000 calc(100% - 100px),
    transparent 100%
  );
}

/* The track = two identical logo sets laid in one flex row. Animating
   translateX 0 → -50% scrolls exactly one set's width; because the second
   set is identical and immediately follows, the wrap point is invisible.
   width:max-content lets the row size to its content (no wrapping). */
.brand-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  /* --marquee-shift = -(100 / copies)%. JS (buildBrandMarquee) sets it to
     match the actual copy count it renders. The -50% default is the no-JS
     fallback for the 2-copy case but JS normally overrides to e.g. -25%. */
  --marquee-shift: -50%;
  animation: brand-marquee-scroll 50s linear infinite;
  will-change: transform;
}

/* Pause on hover so users can settle on a logo to inspect (and color it). */
.brand-marquee:hover .brand-marquee__track {
  animation-play-state: paused;
}

@keyframes brand-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--marquee-shift)); }
}

/* Respect users who asked the OS to reduce motion — freeze the marquee. */
@media (prefers-reduced-motion: reduce) {
  .brand-marquee__track {
    animation: none;
  }
}

.brand-marquee__item {
  flex: 0 0 auto;
  width: 160px;
  height: 56px;
  /* Trailing margin (NOT track `gap`) so each item owns its spacing — this
     makes the two copies exactly equal width, so translateX(-50%) wraps
     with zero jump. 64px ≈ the intended inter-logo gap. */
  margin-right: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-marquee__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* The leveler: desaturate + dim so the stream reads as one calm unit. */
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.brand-marquee__item img:hover {
  filter: none;
  opacity: 1;
}

/* White-on-transparent logos (e.g. 24.1.png, 25.1.svg) would be near-
   invisible on the light page under the default grayscale filter. invert(1)
   flips white→black so they read as dark logos consistent with the rest;
   grayscale + opacity then match the row's visual weight. Tagged at runtime
   by tagInvertedBrandLogos() via the BRAND_INVERTED_LOGOS allowlist. */
.brand-marquee__item img.brand-logo-inverted {
  filter: invert(1) grayscale(100%);
  opacity: 0.55;
}
.brand-marquee__item img.brand-logo-inverted:hover {
  /* Keep the invert on hover (the source art is white — without invert it
     would disappear on the light bg); just restore full opacity + color. */
  filter: invert(1);
  opacity: 1;
}

@media (max-width: 1024px) {
  .brand-marquee__item {
    width: 140px;
    height: 48px;
    margin-right: 52px;
  }
}
@media (max-width: 640px) {
  .brand-marquee {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 48px,
      #000 calc(100% - 48px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 48px,
      #000 calc(100% - 48px),
      transparent 100%
    );
  }
  .brand-marquee__item {
    width: 116px;
    height: 44px;
    margin-right: 44px;
  }
}