.page-main {
  padding-top: var(--nav-height) !important;
}

.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(53, 88, 232, 0.08), transparent 62%),
    radial-gradient(900px 480px at 8% 108%, rgba(96, 165, 250, 0.07), transparent 60%),
    linear-gradient(180deg, #f6f8ff 0%, var(--white) 58%);
}

.hero-bg-glow {
  display: none;
}

.hero-orbs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}

.orb--1 {
  width: 560px;
  height: 560px;
  top: -16%;
  right: 0%;
  background: radial-gradient(circle at 35% 35%, rgba(53, 88, 232, 0.2), rgba(53, 88, 232, 0) 70%);
  animation: orbDrift1 22s ease-in-out infinite alternate;
}

.orb--2 {
  width: 500px;
  height: 500px;
  bottom: -20%;
  left: -6%;
  background: radial-gradient(circle at 60% 40%, rgba(96, 165, 250, 0.2), rgba(96, 165, 250, 0) 70%);
  animation: orbDrift2 26s ease-in-out infinite alternate;
}

.orb--3 {
  width: 340px;
  height: 340px;
  top: 22%;
  left: 34%;
  background: radial-gradient(circle at 50% 50%, rgba(129, 140, 248, 0.13), rgba(129, 140, 248, 0) 70%);
  animation: orbDrift3 30s ease-in-out infinite alternate;
}

.orb--4 {
  width: 280px;
  height: 280px;
  bottom: 6%;
  right: 24%;
  background: radial-gradient(circle at 50% 50%, rgba(147, 197, 253, 0.16), rgba(147, 197, 253, 0) 70%);
  animation: orbDrift1 34s ease-in-out infinite alternate-reverse;
}

@keyframes orbDrift1 {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-46px, 38px) scale(1.1);
  }
}

@keyframes orbDrift2 {
  from {
    transform: translate(0, 0) scale(1.06);
  }
  to {
    transform: translate(56px, -34px) scale(0.96);
  }
}

@keyframes orbDrift3 {
  from {
    transform: translate(0, 0) scale(0.94);
  }
  to {
    transform: translate(38px, 30px) scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .orb {
    animation: none;
  }
}

.hero-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(53, 88, 232, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 88, 232, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 92% 78% at 50% 42%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 92% 78% at 50% 42%, #000 30%, transparent 78%);
}

.hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
  padding: 48px 0 96px;
}

.hero-anim {
  animation: heroEnter 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--d, 0ms);
}

@keyframes heroEnter {
  from {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-anim {
    animation: none;
  }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(53, 88, 232, 0.16);
  border-radius: 100px;
  background: var(--primary-glow);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 24px;
  box-shadow: 0 2px 10px rgba(53, 88, 232, 0.06);
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-accent);
  box-shadow: 0 0 8px var(--primary-accent);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 var(--primary-glow-strong);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(53, 88, 232, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(53, 88, 232, 0);
  }
}

.hero-title {
  font-size: clamp(34px, 4.1vw, 54px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: var(--dark);
  margin-bottom: 20px;
}

.text-gradient {
  background: linear-gradient(92deg, #2f4fd0 0%, #60a5fa 48%, #3558e8 95%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradientFlow 7s ease-in-out infinite;
}

@keyframes gradientFlow {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.hero-desc {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 32px;
  max-width: 560px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 48px;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 32px;
}

.stat-item {
  text-align: left;
}

.stat-num {
  font-size: 32px;
  font-weight: 800;
  color: var(--dark);
  line-height: 1;
}

.stat-label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-divider {
  width: 1px;
  height: 38px;
  background: var(--border);
}

.hero-visual {
  position: relative;
  perspective: 1400px;
}

.hero-visual-glow {
  position: absolute;
  inset: 8% -6% -4% -6%;
  background:
    radial-gradient(closest-side, rgba(53, 88, 232, 0.15), transparent 72%),
    radial-gradient(closest-side at 70% 70%, rgba(96, 165, 250, 0.13), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

.hero-mockup {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  overflow: hidden;
  box-shadow: 0 30px 70px -10px rgba(15, 23, 42, 0.12), 0 0 0 1px var(--primary-glow), var(--shadow-xl);
  transition: transform 0.35s ease-out, box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
  will-change: transform;
}

.hero-mockup:hover {
  box-shadow: 0 40px 80px -12px rgba(15, 23, 42, 0.16), 0 0 0 1px var(--primary-glow-strong), var(--shadow-xl);
}

.hero-chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(53, 88, 232, 0.12);
  box-shadow: 0 10px 30px -8px rgba(23, 32, 51, 0.18);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dark);
  white-space: nowrap;
  animation: chipFloat 6s ease-in-out infinite;
}

.hero-chip svg {
  color: var(--primary-accent);
  flex-shrink: 0;
}

.hero-chip--1 {
  top: 6%;
  left: -30px;
  animation-delay: 0.8s;
}

.hero-chip--2 {
  bottom: 26%;
  right: -26px;
  animation-duration: 7s;
}

.hero-chip--3 {
  bottom: -16px;
  left: 12%;
  animation-duration: 8s;
  animation-delay: 1.6s;
}

.chip-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}

@keyframes chipFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

.hero-version {
  margin-top: 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: rgba(53, 88, 232, 0.04);
  padding: 12px 14px;
}

.hero-version-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.hero-version-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-version-row {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Safety net: the platform label + version + button are 2px away from the card's content
     width at 360px, so a longer label must wrap instead of escaping the card. */
  flex-wrap: wrap;
}

.hero-version-platform {
  min-width: 58px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.hero-version-number {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-dark);
}

.hero-version-row .btn {
  margin-left: auto;
}

.hero-version-pending {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
}

/* Standalone empty state: a block-level placeholder keeps the card's vertical padding
   symmetric (a reused inline-row class would add the UA paragraph margins instead). */
.hero-version-empty {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  user-select: none;
}

.hero-scroll-track {
  width: 22px;
  height: 34px;
  border: 1.5px solid rgba(113, 128, 154, 0.5);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.hero-scroll-thumb {
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: var(--primary-accent);
  animation: scrollHint 1.8s ease-in-out infinite;
}

@keyframes scrollHint {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

.mockup-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  background: rgba(248, 250, 246, 0.8);
  border-bottom: 1px solid var(--border-light);
}

.dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.dot.red {
  background: #ff5f57;
}

.dot.yellow {
  background: #febc2e;
}

.dot.green {
  background: #28c840;
}

.mockup-title {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.mockup-body {
  min-height: 340px;
  display: grid;
  grid-template-columns: 60px 1fr 150px;
}

.mockup-sidebar {
  border-right: 1px solid var(--border-light);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mock-item {
  height: 36px;
  border-radius: 8px;
  background: #dde5f2;
  transition: background var(--transition);
}

.mock-item.active {
  background: var(--primary-glow-strong);
}

.mockup-chat {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mock-line {
  height: 8px;
  border-radius: 4px;
  background: #dde5f2;
}

.mock-line.code {
  background: var(--primary-glow);
}

.mock-code {
  padding: 14px;
  border-radius: var(--radius-sm);
  background: #f7f9fe;
  border: 1px solid rgba(53, 88, 232, 0.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mockup-panel {
  border-left: 1px solid var(--border-light);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mock-step {
  height: 28px;
  border-radius: 6px;
  background: var(--border-light);
}

.mock-step.done {
  background: var(--primary-light);
  border: 1px solid rgba(53, 88, 232, 0.18);
}

.mock-step.active {
  background: var(--primary-glow-strong);
  border: 1px solid rgba(53, 88, 232, 0.28);
}

.w60 { width: 60%; }
.w65 { width: 65%; }
.w70 { width: 70%; }
.w80 { width: 80%; }
.w85 { width: 85%; }
.w88 { width: 88%; }
.w90 { width: 90%; }

.highlights {
  background: var(--bg-alt);
  position: relative;
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.highlight-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
  overflow: hidden;
}

.highlight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary-accent);
  opacity: 0;
  transition: opacity var(--transition);
}

.highlight-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(53, 88, 232, 0.22);
}

.highlight-card:hover::before {
  opacity: 1;
}

.highlight-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 12px;
}

.highlight-desc {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

/* Below 1024px four columns squeeze the cards under ~180px, so drop to two. */
@media (max-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.feature-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  padding: 28px 24px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(53, 88, 232, 0.28);
  background: var(--white);
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  margin-bottom: 14px;
  color: var(--primary-accent);
  background: linear-gradient(180deg, #f6f9ff 0%, #edf2fd 100%);
  border: 1px solid rgba(53, 88, 232, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.feature-card:hover .feature-icon {
  background: linear-gradient(180deg, #7ba0fc 0%, #5b83f4 100%);
  color: var(--white);
  border-color: #5b83f4;
  box-shadow: 0 8px 16px -6px rgba(91, 131, 244, 0.4);
}

.feature-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 10px;
}

.feature-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.timeline {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.timeline li {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--white);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.timeline li:hover {
  transform: translateY(-3px);
  border-color: rgba(53, 88, 232, 0.28);
  box-shadow: var(--shadow-md);
}

.timeline span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-accent);
  color: var(--white);
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--primary-glow-strong);
}

.timeline p {
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.module-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}

.module-pill {
  border-radius: 999px;
  border: 1px solid rgba(53, 88, 232, 0.18);
  background: var(--primary-glow);
  color: var(--primary-dark);
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  transition: all var(--transition);
  cursor: default;
}

.module-pill:hover {
  background: var(--primary-glow-strong);
  border-color: var(--primary-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--primary-glow)
}

@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 40px 0 60px;
  }

  .hero-title {
    font-size: 46px;
  }

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

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

  .timeline {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 36px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .stat-divider {
    display: none;
  }

  .mockup-body {
    grid-template-columns: 1fr;
  }

  .mockup-sidebar,
  .mockup-panel {
    display: none;
  }

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

/* 新增板块样式 */

/* Agent Modes 标签 */
.feature-badge-container {
  margin-bottom: 16px;
}

.feature-mode-tag {
  display: inline-block;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary-dark);
  background: var(--primary-glow-strong);
  border-radius: 6px;
  border: 1px solid rgba(53, 88, 232, 0.15);
}

/* Tooling Grid */
.tooling-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1024px) {
  .tooling-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* The decorative 01/02/03 counter only makes sense where the cards form an ordered
   list. Scope the counter to those two sections so it does not duplicate the numbers
   already written into the advantage titles, nor stamp meaningless ordinals on the
   Skill/Agent/Workflow and scenario cards. */
.landing-root #problems .tooling-grid,
.landing-root #scenes .tooling-grid {
  counter-reset: tool-card;
}

.landing-root #problems .tool-card,
.landing-root #scenes .tool-card {
  counter-increment: tool-card;
}

.tool-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 34px 30px 32px;
  box-shadow: 0 1px 3px rgba(23, 32, 51, 0.03);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
}

.landing-root #problems .tool-card::after,
.landing-root #scenes .tool-card::after {
  content: counter(tool-card, decimal-leading-zero);
  position: absolute;
  top: 24px;
  right: 26px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #c3cde3;
  transition: color var(--transition);
}

.landing-root #problems .tool-card:hover::after,
.landing-root #scenes .tool-card:hover::after {
  color: var(--primary-accent);
}

.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -14px rgba(53, 88, 232, 0.14);
  border-color: rgba(53, 88, 232, 0.22);
}

.tool-icon {
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: var(--primary-accent);
  background: linear-gradient(180deg, #f6f9ff 0%, #edf2fd 100%);
  border: 1px solid rgba(53, 88, 232, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.tool-card:hover .tool-icon {
  background: linear-gradient(180deg, #7ba0fc 0%, #5b83f4 100%);
  color: var(--white);
  border-color: #5b83f4;
  box-shadow: 0 10px 20px -8px rgba(91, 131, 244, 0.45);
}

.tool-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 10px;
}

.tool-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* SSH Grid */
.ssh-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

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

.ssh-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}

.ssh-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-accent);
  background: var(--white);
}

.ssh-icon {
  font-size: 28px;
  margin-bottom: 14px;
}

.ssh-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 10px;
}

.ssh-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Channels Grid */
.channels-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .channels-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.channel-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.channel-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-accent);
}

.channel-icon {
  font-size: 22px;
}

.channel-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
}

/* Arch Grid */
.arch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

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

.arch-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.arch-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(53, 88, 232, 0.22);
}

.arch-icon {
  font-size: 32px;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: var(--primary-light);
  border: 1px solid rgba(53, 88, 232, 0.14);
}

.arch-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 10px;
}

.arch-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ===== 高级化增强 ===== */

/* 滚动显现 */
.reveal-item {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

/* 主按钮流光扫过 */
.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-22deg);
  animation: shineSweep 3.4s ease-in-out infinite;
}

@keyframes shineSweep {
  0%, 55% {
    left: -80%;
  }
  85%, 100% {
    left: 135%;
  }
}

/* 服务对象卡片悬停微光 */
.feature-card {
  position: relative;
  overflow: hidden;
}

.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(53, 88, 232, 0.07), transparent 65%);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

.feature-card:hover::after {
  opacity: 1;
}

/* CTA 深色卡片极光 */
.cta-card::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(96, 165, 250, 0.13) 70deg, transparent 140deg, rgba(53, 88, 232, 0.14) 230deg, transparent 310deg);
  animation: auroraSpin 14s linear infinite;
  pointer-events: none;
}

@keyframes auroraSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-card::after,
  .btn-shine::after,
  .hero-chip,
  .text-gradient,
  .hero-scroll-thumb {
    animation: none;
  }
}

/* 分区之间的细腻过渡 */
.landing-root .section {
  position: relative;
}

.landing-root .highlights {
  background:
    radial-gradient(700px 300px at 12% 0%, rgba(53, 88, 232, 0.04), transparent 70%),
    var(--bg-alt);
}

/* 响应式补充 */
@media (max-width: 1024px) {
  .hero-chip--1 {
    left: -8px;
  }

  .hero-chip--2 {
    right: -8px;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
  }

  .hero-inner {
    padding: 32px 0 72px;
  }

  .hero-chip,
  .hero-scroll {
    display: none;
  }
}

.site-page:has(.landing-root) .navbar {
  background: rgba(247, 249, 255, 0.95);
  border-bottom-color: #e1e8f6;
}

.site-page:has(.landing-root) .navbar .nav-brand-text,
.site-page:has(.landing-root) .navbar .nav-link {
  color: #253451;
}

.site-page:has(.landing-root) .navbar .nav-link:hover,
.site-page:has(.landing-root) .navbar .nav-link.active {
  background: #e6edff;
  color: #2947c7;
}

.site-page:has(.landing-root) .navbar .nav-cta {
  background: #3558e8;
  color: #fff;
}

.landing-root .hero {
  min-height: calc(100svh - var(--nav-height) - 36px);
  align-items: flex-start;
  overflow: visible;
  background: linear-gradient(165deg, #e7eeff 0%, #f6f8ff 48%, #edf3ff 100%);
}

.landing-root .hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px 24px 30px;
}

.landing-root .hero-content {
  text-align: center;
}

.landing-root .hero-title {
  margin-bottom: 8px;
  color: #172033;
  font-size: 3rem;
  letter-spacing: 0;
  line-height: 1.15;
}

.landing-root .hero-desc {
  max-width: none;
  margin: 0;
  color: #4b5a75;
  font-size: 15px;
  line-height: 1.5;
}

.landing-root .hero-version {
  margin-top: 14px;
  border: 0;
  padding: 0;
  background: none;
}

.landing-root .hero-version-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.landing-root .hero-version-list .btn {
  min-height: 40px;
  border-radius: 6px;
  padding: 0 18px;
  font-size: 13px;
}

.landing-root .hero-version-list .btn-primary {
  border: 1px solid #3558e8;
  background: #3558e8;
  color: #fff;
}

.landing-root .hero-version-list .btn-primary:hover {
  border-color: #2947c7;
  background: #2947c7;
  color: #fff;
}

.landing-root .hero-version-list .btn-outline {
  border-color: #9aade7;
  background: transparent;
  color: #2947c7;
}

.landing-root .hero-version-list .btn-outline:hover {
  border-color: #3558e8;
  background: #e7edff;
  color: #2947c7;
}

/* The demo button sits inside .hero-version-list next to the download anchor, so it needs
   the UA button chrome stripped the same way .hero-actions .btn does for its own buttons. */
.landing-root .hero-version-list button.btn {
  border-width: 1px;
  border-style: solid;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* Quiet meta row under the hero CTAs: alternate-platform link + deployment-plan entry.
   Both are intentionally text-weight so the solid download button keeps sole focus. */
.landing-root .hero-download-meta {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #4b5a75;
}

.landing-root .hero-download-meta a,
.landing-root .hero-download-link {
  color: #2947c7;
  text-decoration: none;
}

.landing-root .hero-download-meta a:hover,
.landing-root .hero-download-link:hover {
  text-decoration: underline;
}

.landing-root .hero-download-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.landing-root .hero-download-meta a:focus-visible,
.landing-root .hero-download-link:focus-visible {
  outline: 2px solid #3558e8;
  outline-offset: 3px;
}

.landing-root .hero-version-pending,
.landing-root .hero-version-empty {
  margin: 0;
  color: #4b5a75;
  font-size: 12px;
}

.landing-root .hero-actions {
  justify-content: center;
  gap: 20px;
  margin: 8px 0 0;
  align-items: center;
}

/* The hero conversions are real buttons, not text links. These selectors carry two
   classes (.hero-actions .btn-*) so they outrank this file's earlier bare
   `.landing-root .hero-actions button` reset and re-attach the shared button look. */
.landing-root .hero-actions .btn {
  border: 0;
  padding: 0 22px;
  height: 38px;
  font: inherit;
  font-size: 13px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.landing-root .hero-actions .btn-primary {
  background: var(--primary-accent);
  color: var(--white);
  box-shadow: 0 2px 8px 0 rgba(53, 88, 232, 0.12);
}

.landing-root .hero-actions .btn-primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 4px 12px 0 rgba(53, 88, 232, 0.2);
}

.landing-root .hero-actions .btn-outline {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  color: var(--text);
}

.landing-root .hero-actions .btn-outline:hover {
  border-color: var(--primary-accent);
  background: var(--primary-glow);
  color: var(--primary-dark);
}

.landing-root .hero-actions button:focus-visible,
.landing-root .hero-version-list a:focus-visible {
  outline: 2px solid #3558e8;
  outline-offset: 3px;
}

.landing-root .hero-visual {
  /* The client mockup needs enough width for the composer toolbar to render at
     its true proportions (left tools + permission + ring + vendor mark + model
     name + two action icons + send). At 1100px the conversation column came up
     ~90px short and the send button was clipped, so the cap is raised and the
     element scales proportionally with the viewport. */
  width: min(100%, 1240px, max(720px, (100svh - var(--nav-height) - 285px) * 1.8));
  perspective: none;
}

/* ===== Desktop client mockup =====================================================
   The hero renders a scaled-down replica of the real TransWork desktop client. Column
   widths are derived from the shipped client window (2238 x 1400 reference capture):
     rail 70px (3.2%) · sidebar 486px (22.0%) · conversation 929px (42.0%) · inspector 725px (32.8%)
   They are expressed as percentages of the 4-column body so the replica keeps the client's
   proportions at any card width, instead of drifting as fixed pixel values.
   ================================================================================= */

.landing-root .hero-client {
  display: flex;
  flex-direction: column;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  width: 100%;
  border: 1px solid #d9dfe8;
  border-radius: 8px;
  background: #fff;
  color: #242a34;
  font-size: 13px;
  text-align: left;
  box-shadow: 0 22px 58px rgba(39, 63, 117, 0.16);
  animation: heroPreviewIn 300ms ease-out both;
}

.landing-root .hero-client button,
.landing-root .hero-client input,
.landing-root .hero-client textarea,
.landing-root .hero-client select {
  font: inherit;
}

.landing-root .hero-client button {
  cursor: pointer;
}

.landing-root .hero-client button:focus-visible,
.landing-root .hero-client input:focus-visible {
  outline: 2px solid #3159dd;
  outline-offset: -2px;
}

/* --- Title bar: white, one hairline bottom border, no tint --------------------- */

.landing-root .hero-client-titlebar {
  display: flex;
  height: 4%;
  min-height: 32px;
  flex-shrink: 0;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid #eceff4;
  padding: 0 14px;
  background: #fff;
  font-size: 11.5px;
}

/* The app mark sits over the rail columns, matching the shipped client's
   top-left. It spans the tool strip only — the employee strip starts below it. */
.landing-root .hero-client-mark {
  display: grid;
  /* Mirror the rail's width (3.9% / 34px) and cancel the titlebar's left padding
     so the mark centers exactly above the tool column instead of drifting right. */
  width: 3.9%;
  min-width: 34px;
  margin-left: -14px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
}

.landing-root .hero-client-mark svg {
  width: 20px;
  height: 20px;
}

.landing-root .hero-client-window-controls {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: 16px;
  padding-right: 2px;
}

.landing-root .hero-client-window-controls .hero-ctl {
  display: block;
  position: relative;
  width: 10px;
  height: 10px;
  color: #5b6472;
}

.landing-root .hero-client-window-controls .hero-ctl::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
}

.landing-root .hero-client-window-controls .hero-ctl--min::before {
  top: 5px;
  height: 1.2px;
}

.landing-root .hero-client-window-controls .hero-ctl--max::before {
  border: 1.2px solid currentColor;
  background: none;
}

.landing-root .hero-client-window-controls .hero-ctl--close::before,
.landing-root .hero-client-window-controls .hero-ctl--close::after {
  content: '';
  position: absolute;
  top: 4.5px;
  left: 0;
  width: 10px;
  height: 1.2px;
  background: currentColor;
}

.landing-root .hero-client-window-controls .hero-ctl--close::before {
  transform: rotate(45deg);
}

.landing-root .hero-client-window-controls .hero-ctl--close::after {
  transform: rotate(-45deg);
}

.landing-root .hero-client-body {
  display: flex;
  position: relative;
  min-height: 0;
  flex: 1;
}

/* --- Rail: two side-by-side columns — tool column + digital-employee column ---
   The shipped client renders these as two separate vertical strips with their
   own backgrounds. Measured on the reference capture: tools 70px on #fafafb,
   employees 94px on #fdfdfe, border at x=164 — a 1 : 1.343 split.
   The conversation column keeps the client's 42.0% share; the two rail strips
   are paid for out of the inspector's padding so nothing gets squeezed. */

.landing-root .hero-client-rail {
  display: flex;
  width: 3.9%;
  min-width: 34px;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid #eceff4;
  padding: 0 0 4px;
  background: #fafafb;
}

/* The client's rail opens with a spaced tool column whose pitch is ~4.2% of the
   window height (59px at the 1400px reference capture). NOTE: percentage padding
   resolves against the WIDTH (the rail is only ~38px wide → ~1px), so the top
   inset must be a fixed length to stay visible. */
.landing-root .hero-client-rail-tools {
  display: flex;
  width: 100%;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.9%;
  overflow: hidden;
  padding-top: 12px;
}

.landing-root .hero-client-rail-tool {
  display: grid;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 8px;
  color: #7d8798;
}

.landing-root .hero-client-rail-tool svg {
  width: 17px;
  height: 17px;
}

.landing-root .hero-client-rail-tool.is-active {
  color: #2563eb;
  background: #e8f0ff;
}

/* Second strip: the employee avatars. Own column, 1.343x the tool strip width,
   lighter background, version footer stays in the tool strip and the blue
   "add employee" pill is pinned at this strip's bottom. */
.landing-root .hero-client-employees {
  display: flex;
  width: 5.25%;
  min-width: 46px;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid #eceff4;
  background: #fdfdfe;
  padding-bottom: 8px;
}

.landing-root .hero-client-employee-list {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding-top: 16px;
  width: 100%;
}

.landing-root .hero-client-employee-add {
  display: grid;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  place-items: center;
  border: 1px solid #bcd3f8;
  border-radius: 50%;
  background: #dbe8fd;
  color: #1d4ed8;
  padding: 0;
}

.landing-root .hero-client-employee-add svg {
  width: 13px;
  height: 13px;
}

.landing-root .hero-client-rail-version {
  flex-shrink: 0;
  padding-top: 8px;
  color: #a3abba;
  font-size: 9px;
  letter-spacing: 0.02em;
}

.landing-root .hero-client-avatar,
.landing-root .hero-client-message-avatar {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border: 1.5px solid transparent;
  border-radius: 50%;
  font-weight: 700;
}

.landing-root .hero-client-avatar--blue { background: #dbe7ff; color: #2450b5; }
.landing-root .hero-client-avatar--coral { background: #fbe3da; color: #a8472f; }
.landing-root .hero-client-avatar--green { background: #d8eee4; color: #23745a; }
.landing-root .hero-client-avatar--amber { background: #fdeed2; color: #a9701a; }
.landing-root .hero-client-avatar--violet { background: #ebdefb; color: #6d3fb0; }

/* Photographed headshots in the shipped client are full-bleed inside the circle. */
.landing-root .hero-client-avatar--photo {
  padding: 0;
  overflow: hidden;
  background: #cfe4ff;
}

.landing-root .hero-client-photo {
  display: block;
  width: 100%;
  height: 100%;
}

/* The selected employee gets a solid primary ring with a page-coloured gap. */
.landing-root .hero-client-employees .hero-client-avatar[aria-pressed="true"] {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px #fdfdfe;
}

/* --- Sidebar: task records ----------------------------------------------------- */

.landing-root .hero-client-sidebar {
  display: flex;
  width: 22%;
  min-width: 150px;
  flex-shrink: 0;
  flex-direction: column;
  border-right: 1px solid #eceff4;
  background: #fff;
}

.landing-root .hero-client-sidebar-head,
.landing-root .hero-client-chat-head {
  display: flex;
  height: 6.3%;
  min-height: 40px;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid #eceff4;
  padding: 0 12px;
}

.landing-root .hero-client-sidebar-head strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: #1f2733;
  white-space: nowrap;
}

.landing-root .hero-client-sidebar-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #2563eb;
}

.landing-root .hero-client-new {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  background: #e8f0ff;
  color: #2563eb;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.landing-root .hero-client-new svg {
  width: 12px;
  height: 12px;
}

.landing-root .hero-client-new:hover {
  background: #d8e6ff;
}

.landing-root .hero-client-sidebar-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding: 9px 9px 6px;
}

.landing-root .hero-client-search-wrap {
  display: flex;
  position: relative;
  flex-shrink: 0;
  align-items: center;
}

.landing-root .hero-client-search-wrap svg {
  position: absolute;
  left: 9px;
  width: 13px;
  height: 13px;
  color: #9aa3b2;
  pointer-events: none;
}

.landing-root .hero-client-search {
  width: 100%;
  height: 30px;
  border: 1px solid #e6eaf1;
  border-radius: 999px;
  padding: 0 10px 0 28px;
  background: #f7f8fa;
  color: #242a34;
  font-size: 11.5px;
}

.landing-root .hero-client-search::placeholder {
  color: #9aa3b2;
}

.landing-root .hero-client-segment {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
  margin: 10px 0;
  border: 1px solid #eceff4;
  border-radius: 999px;
  padding: 2px;
  background: #fff;
}

.landing-root .hero-client-segment button {
  min-width: 0;
  flex: 1;
  border: 0;
  border-radius: 999px;
  padding: 6px 1px;
  background: transparent;
  color: #5b6472;
  font-size: 11.5px;
}

.landing-root .hero-client-segment button b {
  font-weight: 600;
  color: #8b95a5;
}

.landing-root .hero-client-segment button[aria-selected="true"] {
  background: #e8f0ff;
  color: #2563eb;
  font-weight: 600;
}

.landing-root .hero-client-segment button[aria-selected="true"] b {
  color: #2563eb;
}

.landing-root .hero-client-project-back {
  display: inline-flex;
  flex-shrink: 0;
  width: 100%;
  align-items: center;
  gap: 5px;
  border: 0;
  padding: 6px 8px;
  background: transparent;
  color: #2563eb;
  text-align: left;
}

.landing-root .hero-client-project-back svg {
  width: 13px;
  height: 13px;
}

/* Slim, low-contrast scrollbars inside the mockup — the shipped client uses a hairline
   thumb that only reads as a hint, never the chunky OS default. */
.landing-root .hero-client * {
  scrollbar-width: thin;
  scrollbar-color: #d3d9e3 transparent;
}

.landing-root .hero-client *::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.landing-root .hero-client *::-webkit-scrollbar-track {
  background: transparent;
}

.landing-root .hero-client *::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #d3d9e3;
}

.landing-root .hero-client *::-webkit-scrollbar-thumb:hover {
  background: #bcc4d1;
}

.landing-root .hero-client *::-webkit-scrollbar-corner {
  background: transparent;
}

.landing-root .hero-client-records {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.landing-root .hero-client-record {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 8px;
  background: transparent;
  color: #3c4757;
  text-align: left;
}

.landing-root .hero-client-record-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
}

.landing-root .hero-client-record-dot--done { background: #c9cfd9; }
.landing-root .hero-client-record-dot--busy { background: #2563eb; }

.landing-root .hero-client-record-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  color: #8490a4;
}

.landing-root .hero-client-record-icon svg {
  width: 14px;
  height: 14px;
}

.landing-root .hero-client-record-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-root .hero-client-record-age {
  flex-shrink: 0;
  color: #9aa3b2;
  font-size: 10.5px;
}

.landing-root .hero-client-record-more {
  display: grid;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 50%;
  color: #9aa3b2;
}

.landing-root .hero-client-record-more svg {
  width: 15px;
  height: 15px;
}

.landing-root .hero-client-record:hover .hero-client-record-more {
  background: #e7edf6;
  color: #5b6472;
}

.landing-root .hero-client-record:hover {
  background: #f5f7fb;
}

.landing-root .hero-client-record[aria-current="true"] {
  border-color: #c7dafb;
  background: #ebf3ff;
  color: #1c4fd0;
  font-weight: 600;
}

.landing-root .hero-client-empty-records {
  padding: 0 8px;
  color: #8b95a5;
  font-size: 11.5px;
}

/* --- Conversation column ------------------------------------------------------- */

.landing-root .hero-client-conversation {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  background: #fff;
}

.landing-root .hero-client-chat-head {
  justify-content: flex-end;
  /* The shipped client leaves ~7px of clearance from the sidebar divider,
     not the 27px a uniform 12px padding produced. */
  padding: 0 10px 0 6px;
}

.landing-root .hero-client-chat-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  color: #7d8798;
  font-size: 13px;
}

.landing-root .hero-client-icon-btn {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 5px;
  color: #7d8798;
  font-size: 13px;
}

.landing-root .hero-client-icon-btn svg {
  width: 15px;
  height: 15px;
}

.landing-root .hero-client-chat-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  /* 7.1% matches the shipped client's conversation column padding (66px of 929px). */
  padding: 16px 7.1%;
}

.landing-root .hero-client-message {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 100%;
}

.landing-root .hero-client-message-content {
  min-width: 0;
  flex: 1;
}

.landing-root .hero-client-answer-model {
  display: block;
  margin-bottom: 7px;
  color: #6b7688;
  font-size: 11px;
  font-weight: 600;
}

/* Horizontally scrollable path table that opens a multi-file edit turn. The real client
   scrolls this block; the replica caps the path column so the description column stays
   visible at hero scale instead of being pushed out of the card. */
/* Assistant "what changed" summary — a stacked list, not a table. The shipped
   client groups touched work by area and keeps the detail as quiet sub-text. */
.landing-root .hero-client-codeblock {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 14px;
}

.landing-root .hero-client-touch {
  display: flex;
  margin: 0;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
}

.landing-root .hero-client-touch-label {
  flex-shrink: 0;
  border-radius: 5px;
  padding: 2px 8px;
  background: #e8effc;
  color: #2563eb;
  font-weight: 600;
}

.landing-root .hero-client-touch-detail {
  min-width: 0;
  overflow: hidden;
  color: #5b6472;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-root .hero-client-richtext {
  color: #242a34;
  font-size: 12.5px;
  line-height: 1.72;
}

.landing-root .hero-client-richtext p {
  margin: 0 0 2px;
}

.landing-root .hero-client-richtext p.is-step {
  padding-left: 4px;
}

.landing-root .hero-client-richtext-head {
  margin: 2px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #1f2733;
}

.landing-root .hero-client-spacer {
  display: block;
  height: 8px;
}

.landing-root .hero-client-inline-code {
  border-radius: 4px;
  padding: 1px 5px;
  background: #eef2f8;
  color: #2563eb;
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.landing-root .hero-client-strong {
  font-weight: 700;
  color: #1f2733;
}

.landing-root .hero-client-run-meta {
  margin-top: 10px;
  color: #9aa3b2;
  font-size: 10.5px;
  text-align: right;
}

.landing-root .hero-client-msg-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  color: #a8b0bd;
}

.landing-root .hero-client-msg-actions .hero-client-msg-action {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 6px;
}

.landing-root .hero-client-msg-actions .hero-client-msg-action svg {
  width: 14px;
  height: 14px;
}

.landing-root .hero-client-msg-actions .hero-client-msg-action:hover {
  background: #f3f5f9;
  color: #6b7484;
}

/* "已编辑 N 个文件 +51 -56" summary card + its collapse strip. */
.landing-root .hero-client-edit-card {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  border: 1px solid #eaedf3;
  border-radius: 8px;
  padding: 11px 13px;
  background: #fbfcfe;
  font-size: 12px;
}

.landing-root .hero-client-edit-card strong {
  font-weight: 600;
  color: #1f2733;
}

.landing-root .hero-client-edit-icon {
  display: grid;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 5px;
  background: #eef2f8;
  color: #6b7688;
}

.landing-root .hero-client-edit-icon svg {
  width: 13px;
  height: 13px;
}

.landing-root .hero-client-diff-add {
  color: #16a34a;
  font-weight: 700;
  font-style: normal;
}

.landing-root .hero-client-diff-del {
  color: #dc2626;
  font-weight: 700;
  font-style: normal;
}

.landing-root .hero-client-change-fold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  border: 1px solid #eaedf3;
  border-radius: 8px;
  padding: 11px 13px;
  color: #5b6472;
  font-size: 11.5px;
}

.landing-root .hero-client-change-caret {
  display: grid;
  place-items: center;
  color: #9aa3b2;
}

.landing-root .hero-client-change-caret svg {
  width: 12px;
  height: 12px;
}

.landing-root .hero-client-message--user {
  align-self: flex-end;
  border-radius: 8px;
  padding: 9px 13px;
  background: #f2f4f8;
}

.landing-root .hero-client-message--assistant {
  align-self: stretch;
}

.landing-root .hero-client-welcome {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #6b7688;
}

.landing-root .hero-client-welcome strong {
  color: #242a34;
}

/* --- Composer: large rounded card with a bottom tool row ----------------------- */

.landing-root .hero-client-composer {
  display: flex;
  position: relative;
  height: 20%;
  min-height: 82px;
  flex-shrink: 0;
  flex-direction: column;
  margin: 0 12px 10px;
  /* The client tints the composer outline blue rather than grey. */
  border: 1px solid #c7d2f3;
  border-radius: 14px;
  padding: 11px 10px 8px 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(52, 86, 176, 0.06);
}

.landing-root .hero-client-composer textarea {
  min-width: 0;
  width: 100%;
  min-height: 0;
  flex: 1;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #242a34;
  font-size: 12.5px;
  line-height: 1.6;
}

.landing-root .hero-client-composer textarea::placeholder {
  color: #9aa3b2;
}

.landing-root .hero-client-composer-grip {
  width: 30px;
  height: 3px;
  flex-shrink: 0;
  align-self: center;
  margin: 2px 0 4px;
  border-radius: 999px;
  background: #e6eaf1;
}

.landing-root .hero-client-composer-toolbar {
  display: flex;
  position: relative;
  width: 100%;
  height: 28px;
  flex-shrink: 0;
  align-items: center;
  gap: 5px;
  color: #6b7688;
  font-size: 11px;
}

.landing-root .hero-client-tool-btn {
  display: grid;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 6px;
  color: #5b6472;
  line-height: 1;
}

.landing-root .hero-client-tool-btn svg {
  width: 15px;
  height: 15px;
}

.landing-root .hero-client-tool-btn--ghost {
  color: #8b95a5;
}

.landing-root .hero-client-permission {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 6px;
  padding: 4px 7px;
  background: transparent;
  color: #dc2626;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.landing-root .hero-client-permission:hover {
  background: #fdf2f2;
}

.landing-root .hero-client-permission svg {
  width: 13px;
  height: 13px;
}

.landing-root .hero-client-caret {
  display: grid;
  place-items: center;
  color: #b3bac6;
}

.landing-root .hero-client-caret svg {
  width: 11px;
  height: 11px;
}

.landing-root .hero-client-context-ring {
  display: inline-grid;
  position: relative;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  place-items: center;
}

.landing-root .hero-client-context-ring svg {
  position: absolute;
  inset: 0;
  width: 26px;
  height: 26px;
}

.landing-root .hero-client-context-ring b {
  font-size: 8px;
  font-weight: 600;
  color: #5b6472;
}

.landing-root .hero-client-model-picker {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
  min-width: 0;
}

.landing-root .hero-client-model-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  padding: 4px 5px;
  background: transparent;
  color: #3c4757;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-root .hero-client-model-trigger:hover {
  background: #f3f5f9;
}

/* Vendor marks are real glyphs, not coloured squares — size the glyph and let
   the artwork carry the brand colour. */
.landing-root .hero-client-model-logo {
  display: inline-grid;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  place-items: center;
  color: #3c4757;
}

.landing-root .hero-client-model-logo svg {
  width: 16px;
  height: 16px;
}

.landing-root .hero-client-model-menu {
  position: absolute;
  z-index: 3;
  bottom: calc(100% + 6px);
  left: 50%;
  width: 250px;
  transform: translateX(-50%);
  margin: 0;
  border: 1px solid #e6eaf1;
  border-radius: 10px;
  padding: 5px;
  background: #fff;
  box-shadow: 0 12px 30px -8px rgba(26, 43, 80, 0.2);
  list-style: none;
}

.landing-root .hero-client-model-menu button {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 7px 8px;
  background: transparent;
  color: #3c4757;
  text-align: left;
  font-size: 11.5px;
}

.landing-root .hero-client-model-menu button:hover {
  background: #f3f5f9;
}

.landing-root .hero-client-model-menu button[aria-selected="true"] {
  background: #eef2f8;
  font-weight: 600;
}

.landing-root .hero-client-model-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-root .hero-client-model-ctx {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 3px;
  color: #8b95a5;
  font-size: 10.5px;
}

.landing-root .hero-client-model-ctx svg {
  width: 10px;
  height: 10px;
  color: #f0b64b;
}

.landing-root .hero-client-send {
  display: grid;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #eef3fd;
  color: #2563eb;
}

.landing-root .hero-client-send svg {
  width: 14px;
  height: 14px;
}

.landing-root .hero-client-send:not(:disabled):hover {
  background: #2563eb;
  color: #fff;
}

.landing-root .hero-client-send:disabled {
  background: #f1f3f7;
  color: #b3bac6;
  cursor: not-allowed;
}

/* --- Inspector ----------------------------------------------------------------- */

.landing-root .hero-client-inspector {
  display: flex;
  position: relative;
  width: 30%;
  min-width: 190px;
  flex-shrink: 0;
  flex-direction: column;
  border-left: 1px solid #eceff4;
  background: #fff;
}

.landing-root .hero-client-inspector-tabs {
  display: flex;
  position: relative;
  height: 6.3%;
  min-height: 40px;
  flex-shrink: 0;
  align-items: stretch;
  gap: 2px;
  border-bottom: 1px solid #eceff4;
  padding: 0 10px;
}

.landing-root .hero-client-inspector-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 8px;
  background: transparent;
  color: #5b6472;
  font-size: 11.5px;
}

.landing-root .hero-client-inspector-tabs button svg {
  width: 14px;
  height: 14px;
}

.landing-root .hero-client-inspector-tabs button[aria-selected="true"] {
  border-bottom-color: #2563eb;
  color: #1c4fd0;
  font-weight: 600;
}

.landing-root .hero-client-expand {
  display: grid;
  position: absolute;
  top: 50%;
  right: 10px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  place-items: center;
  border-radius: 5px;
  color: #8b95a5;
}

.landing-root .hero-client-expand svg {
  width: 13px;
  height: 13px;
}

.landing-root .hero-client-expand:hover {
  background: #f0f3f8;
  color: #6b7484;
}

.landing-root .hero-client-inspector-content {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding: 14px 13px;
}

.landing-root .hero-client-inspector-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.landing-root .hero-client-field-label {
  color: #8b95a5;
  font-size: 11px;
}

.landing-root .hero-client-task-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #eceff4;
  border-radius: 8px;
  padding: 11px 12px;
}

.landing-root .hero-client-task-summary-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.landing-root .hero-client-task-summary-head strong {
  min-width: 0;
  overflow: hidden;
  color: #1f2733;
  font-size: 12.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-root .hero-client-task-stamp {
  flex-shrink: 0;
  color: #9aa3b2;
  font-size: 10.5px;
}

.landing-root .hero-client-task-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #16a34a;
  font-size: 11.5px;
}

.landing-root .hero-client-task-state i {
  display: grid;
  width: 13px;
  height: 13px;
  place-items: center;
  border: 1.4px solid currentColor;
  border-radius: 50%;
  font-style: normal;
}

.landing-root .hero-client-task-state i::before {
  content: '';
  width: 5px;
  height: 2.6px;
  border-left: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(-45deg) translate(0.5px, -0.5px);
}

.landing-root .hero-client-task-state--busy {
  color: #2563eb;
}

.landing-root .hero-client-task-state--busy i::before {
  width: 6px;
  height: 6px;
  border: 0;
  border-top: 1.4px solid currentColor;
  border-radius: 50%;
  transform: none;
}

.landing-root .hero-client-progress-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  color: #5b6472;
  font-size: 11.5px;
}

.landing-root .hero-client-progress-line b {
  color: #3c4757;
  font-weight: 600;
}

.landing-root .hero-client-progress-bar {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: #e9edf3;
  overflow: hidden;
}

.landing-root .hero-client-progress-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #3b82f6;
}

.landing-root .hero-client-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #3c4757;
  font-size: 11.5px;
  line-height: 1.55;
}

.landing-root .hero-client-steps li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid #e8edf4;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fbfcfe;
}

.landing-root .hero-client-steps li i {
  display: grid;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  place-items: center;
  margin-top: 2px;
  border: 1.4px solid #16a34a;
  border-radius: 50%;
}

.landing-root .hero-client-steps li i::before {
  content: '';
  width: 5px;
  height: 2.6px;
  border-left: 1.4px solid #16a34a;
  border-bottom: 1.4px solid #16a34a;
  transform: rotate(-45deg) translate(0.5px, -0.5px);
}

.landing-root .hero-client-steps li.is-pending i {
  border-color: #c9cfd9;
}

.landing-root .hero-client-delivery {
  border-top: 1px solid #eceff4;
  padding-top: 13px;
}

.landing-root .hero-client-delivery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing-root .hero-client-delivery-link {
  border: 0;
  border-radius: 6px;
  padding: 3px 7px;
  background: #eef4ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 600;
}

.landing-root .hero-client-delivery-link:hover {
  background: #dfeaff;
}

.landing-root .hero-client-delivery-count {
  margin: 0;
  color: #5b6472;
  font-size: 11.5px;
}

.landing-root .hero-client-deliverables {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.landing-root .hero-client-deliverables li {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #eceff4;
  border-radius: 8px;
  padding: 9px 10px;
}

.landing-root .hero-client-file-badge {
  display: grid;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 5px;
  background: #eef4ff;
  color: #3b82f6;
}

.landing-root .hero-client-file-badge svg {
  width: 13px;
  height: 13px;
}

.landing-root .hero-client-file-body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 1px;
}

.landing-root .hero-client-file-body strong {
  overflow: hidden;
  color: #1f2733;
  font-size: 11.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-root .hero-client-file-body em {
  overflow: hidden;
  color: #9aa3b2;
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-root .hero-client-file-diff {
  display: inline-flex;
  flex-shrink: 0;
  gap: 4px;
  font-size: 10.5px;
}

.landing-root .hero-client-file-ops {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  color: #a8b0bd;
}

.landing-root .hero-client-file-op {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 4px;
}

.landing-root .hero-client-file-op svg {
  width: 12px;
  height: 12px;
}

.landing-root .hero-client-more-files {
  align-self: flex-start;
  border: 0;
  padding: 0;
  background: transparent;
  color: #2563eb;
  font-size: 11px;
}

/* --- Inspector: file browser tab ---------------------------------------------- */

.landing-root .hero-client-file-panel {
  gap: 10px;
  padding: 12px;
}

.landing-root .hero-client-repo {
  display: flex;
  align-items: center;
  gap: 9px;
}

.landing-root .hero-client-repo-mark {
  display: grid;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 50%;
  background: #fdf3e2;
  color: #e0a03a;
}

.landing-root .hero-client-repo-mark svg {
  width: 15px;
  height: 15px;
}

.landing-root .hero-client-repo-body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 1px;
}

.landing-root .hero-client-repo-body strong {
  color: #1f2733;
  font-size: 12.5px;
  font-weight: 700;
}

.landing-root .hero-client-repo-body em {
  overflow: hidden;
  color: #9aa3b2;
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-root .hero-client-repo-ops {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  color: #98a2b2;
}

.landing-root .hero-client-repo-op {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 5px;
}

.landing-root .hero-client-repo-op svg {
  width: 13px;
  height: 13px;
}

.landing-root .hero-client-repo-op:hover {
  background: #f0f3f8;
  color: #6b7484;
}

.landing-root .hero-client-file-search {
  display: flex;
  position: relative;
  flex-shrink: 0;
  align-items: center;
}

.landing-root .hero-client-file-search svg {
  position: absolute;
  left: 10px;
  width: 13px;
  height: 13px;
  color: #9aa3b2;
  pointer-events: none;
}

.landing-root .hero-client-file-search input {
  width: 100%;
  height: 30px;
  border: 1px solid #e6eaf1;
  border-radius: 999px;
  padding: 0 12px 0 30px;
  background: #f7f8fa;
  color: #242a34;
  font-size: 11.5px;
}

.landing-root .hero-client-file-search input::placeholder {
  color: #9aa3b2;
}

.landing-root .hero-client-tree {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-root .hero-client-tree-row {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 7px;
  border-radius: 5px;
  padding: 5px 6px;
  color: #3c4757;
  font-size: 11.5px;
}

.landing-root .hero-client-tree-row:hover {
  background: #f5f7fb;
}

.landing-root .hero-client-tree-chevron {
  display: grid;
  width: 8px;
  flex-shrink: 0;
  place-items: center;
  color: #b3bac6;
  font-size: 11px;
}

.landing-root .hero-client-tree-icon {
  flex-shrink: 0;
  color: #f0b64b;
}

.landing-root .hero-client-tree-row.is-file .hero-client-tree-icon {
  color: #9aa4b4;
}

.landing-root .hero-client-tree-icon svg {
  width: 14px;
  height: 14px;
}

.landing-root .hero-client-tree-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-root .hero-client .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@keyframes heroPreviewIn {
  from { opacity: 0.4; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .landing-root .hero-client {
    animation: none;
  }
}

@media (max-width: 768px) {
  .landing-root .hero {
    min-height: 0;
  }

  .landing-root .hero-inner {
    gap: 12px;
    padding: 12px 16px 12px;
  }

  .landing-root .hero-title {
    font-size: 34px;
  }

  .landing-root .hero-actions {
    flex-direction: row;
  }

  .landing-root .hero-visual {
    width: 100%;
  }
}

/* The replica keeps all four client columns down to 900px; below that the sidebar and
   inspector would each collapse under ~150px, so the inspector is dropped rather than
   squeezed into an unreadable width. */
@media (max-width: 900px) {
  .landing-root .hero-client-inspector {
    display: none;
  }
}

@media (max-width: 600px) {
  .landing-root .hero-version-list {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .landing-root .hero-version-list .btn {
    padding: 0 8px;
    font-size: 12px;
    white-space: nowrap;
  }

  .landing-root .hero-client {
    height: 430px;
    aspect-ratio: auto;
  }

  .landing-root .hero-client-body {
    display: grid;
    grid-template-rows: 36px 86px minmax(0, 1fr);
  }

  .landing-root .hero-client-rail {
    width: auto;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    gap: 0;
    border-right: 1px solid #eceff4;
    border-bottom: 0;
    padding: 3px 8px;
  }

  .landing-root .hero-client-rail-tools {
    display: none;
  }

  .landing-root .hero-client-employees {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid #eceff4;
    padding: 3px 12px;
    padding-bottom: 3px;
  }

  .landing-root .hero-client-employee-list {
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: 0;
  }

  .landing-root .hero-client-employee-add {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }

  .landing-root .hero-client-rail-version {
    display: none;
  }

  .landing-root .hero-client-employees .hero-client-avatar {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .landing-root .hero-client-sidebar {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid #eceff4;
  }

  .landing-root .hero-client-sidebar-head {
    height: 26px;
    min-height: 0;
    padding: 0 10px;
  }

  .landing-root .hero-client-new {
    padding: 4px 9px;
  }

  .landing-root .hero-client-sidebar-body {
    display: block;
    padding: 3px 8px;
  }

  .landing-root .hero-client-search-wrap {
    display: inline-flex;
    width: 47%;
    vertical-align: top;
  }

  .landing-root .hero-client-search {
    height: 24px;
  }

  .landing-root .hero-client-segment {
    display: inline-flex;
    width: calc(53% - 7px);
    height: 24px;
    margin: 0 0 0 7px;
    vertical-align: top;
  }

  .landing-root .hero-client-segment button {
    padding: 2px 0;
  }

  .landing-root .hero-client-records {
    max-height: none;
    height: 27px;
    flex-direction: row;
    gap: 3px;
    overflow-x: auto;
  }

  .landing-root .hero-client-record {
    width: auto;
    max-width: 190px;
    flex-shrink: 0;
    border-radius: 999px;
    padding: 3px 9px;
  }

  .landing-root .hero-client-record-age,
  .landing-root .hero-client-record-more {
    display: none;
  }

  .landing-root .hero-client-chat-head {
    height: 30px;
    min-height: 0;
  }

  .landing-root .hero-client-chat-body {
    gap: 8px;
    padding: 9px 12px;
  }

  .landing-root .hero-client-richtext {
    font-size: 11px;
  }

  .landing-root .hero-client-composer {
    height: 67px;
    min-height: 0;
    margin: 0 10px 8px;
    border-radius: 12px;
    padding: 6px 8px 5px 10px;
  }

  .landing-root .hero-client-composer-grip {
    display: none;
  }

  .landing-root .hero-client-composer-toolbar {
    height: 24px;
  }

  .landing-root .hero-client-model-menu {
    width: 210px;
  }
}

/* ===== CTA 深色卡片 ==============================================================
   Layout, glows and type for the dark conversion card. Kept as classes (rather than
   inline styles) so the card shares one palette source with the rest of the page.
   ================================================================================= */

.landing-root .cta-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 60px 48px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--dark) 0%, #1e293b 100%);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
}

.landing-root .cta-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

/* Both glows stay inside the primary blue family — one lighter, one saturated —
   so the card reads as a deeper shade of the page palette, not a second accent. */
.landing-root .cta-glow--top {
  top: -150px;
  left: -150px;
  background: var(--primary-glow-strong);
}

.landing-root .cta-glow--bottom {
  right: -150px;
  bottom: -150px;
  background: rgba(53, 88, 232, 0.28);
}

.landing-root .cta-body {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}

.landing-root .cta-tag,
.landing-root .cta-tag.section-tag {
  margin-bottom: 24px;
  border-color: rgba(53, 88, 232, 0.45);
  background: rgba(53, 88, 232, 0.22);
  color: #b9c8ff;
}

.landing-root .cta-title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--white);
  margin-bottom: 16px;
}

.landing-root .cta-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #cbd5e1;
  margin-bottom: 36px;
}

.landing-root .cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* Ghost button for dark surfaces: white hairline that fills on hover/focus,
   driven entirely by CSS so keyboard focus and pointer hover stay in sync. */
.landing-root .btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: var(--white);
}

.landing-root .btn-ghost:hover,
.landing-root .btn-ghost:focus-visible {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

/* ===== 扫码弹窗 ==================================================================
   Real dialog semantics: dimmed overlay, focusable panel, tab-trapped, closable
   with Escape or a labelled close button.
   ================================================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-panel {
  position: relative;
  width: 90%;
  max-width: 440px;
  padding: 45px 32px 35px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.modal-close:hover,
.modal-close:focus-visible {
  background: var(--bg-alt);
  color: var(--text);
}

.modal-close:focus-visible {
  outline: 2px solid var(--primary-accent);
  outline-offset: 2px;
}

.modal-head {
  margin-bottom: 28px;
}

.modal-tag.section-tag {
  margin-bottom: 16px;
  font-size: 12px;
}

.modal-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--dark);
  margin: 12px 0 8px;
}

.modal-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 320px;
  margin: 0 auto;
}

.modal-qr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  margin-bottom: 24px;
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.modal-qr-img {
  display: block;
  width: 180px;
  height: 180px;
  border-radius: var(--radius-sm);
}

.modal-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.modal-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  display: inline-block;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .landing-root .cta-card {
    padding: 44px 24px;
  }

  .landing-root .cta-title {
    font-size: 24px;
  }
}