:root {
  --ds-page: #f5f8fc;
  --ds-surface: #ffffff;
  --ds-surface-soft: #f9fbff;
  --ds-text: #172033;
  --ds-heading: #10233f;
  --ds-muted: #607089;
  --ds-line: #d9e1ec;
  --ds-line-strong: #c8d5e6;
  --ds-blue: #1769e8;
  --ds-blue-deep: #0f4fb8;
  --ds-cyan: #24b5d8;
  --ds-blue-soft: #edf4ff;
  --ds-green: #119579;
  --ds-warm: #d06b28;
  --ds-shadow: 0 18px 42px rgba(15, 35, 66, 0.1);
  --ds-shadow-soft: 0 10px 28px rgba(15, 35, 66, 0.07);
  --ds-ring: 0 0 0 4px rgba(23, 105, 232, 0.13);
  --ds-radius: 8px;
  --ds-nav-width: 1160px;
}

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

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  color: var(--ds-text);
  background: var(--ds-page) !important;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
  line-height: 1.68;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a {
  text-underline-offset: 3px;
}

img,
video {
  max-width: 100%;
}

::selection {
  background: rgba(23, 105, 232, 0.16);
  color: var(--ds-heading);
}

.top-nav {
  border-bottom: 1px solid rgba(217, 225, 236, 0.9) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(18, 37, 66, 0.035);
}

.top-nav .container,
.top-nav > .container {
  width: min(var(--ds-nav-width), calc(100% - 32px)) !important;
  min-height: 64px !important;
  gap: 20px !important;
}

.brand {
  color: var(--ds-heading) !important;
  letter-spacing: 0 !important;
  line-height: 1.65 !important;
}

.brand img {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 8px !important;
}

.menu {
  gap: 8px !important;
}

.menu a {
  min-height: 38px;
  padding: 7px 12px !important;
  border-radius: var(--ds-radius) !important;
  color: #26476f !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.65 !important;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.menu a:hover,
.menu a.active {
  background: var(--ds-blue-soft) !important;
  color: var(--ds-blue-deep) !important;
}

.hero {
  background:
    linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%) !important;
  border-bottom: 1px solid rgba(217, 225, 236, 0.9);
}

.hero::before,
.hero::after,
.hero-panel::before,
.hero-panel::after,
.hero-box::before,
.hero-box::after {
  opacity: .12 !important;
}

.hero-panel,
.hero-box {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
}

.hero-box {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.hero h1,
h1 {
  color: var(--ds-heading) !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
}

h2,
h3 {
  line-height: 1.22;
  letter-spacing: 0;
}

p,
li {
  line-height: 1.75;
}

.subtitle,
.hero-desc,
.hero-subtitle,
.section-desc,
.purchase-subtitle,
.story-desc,
.workflow-bridge-subtitle {
  color: var(--ds-muted) !important;
}

.kicker,
.section-kicker,
.story-kicker,
.case-video-kicker,
.workflow-bridge-kicker,
.hero-board-kicker,
.hero-kicker {
  border: 1px solid #cfe0f8 !important;
  border-radius: 999px !important;
  background: #f2f7ff !important;
  color: var(--ds-blue-deep) !important;
  letter-spacing: .04em !important;
}

.section,
.content,
.case-section,
.story-section,
.media-section,
.manual-section,
.comparison-section,
.demand-section,
.purchase-section,
.brand-proof-section {
  background: transparent;
}

.content .container,
.case-section .container,
.section .container {
  width: min(1180px, calc(100% - 32px)) !important;
}

.case-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.section-title,
.category-title,
.story-title,
.workflow-bridge-title,
.purchase-title,
.manual-title,
.comparison-title,
.brand-proof-title,
.service-title h2,
.benefits-title h2 {
  color: var(--ds-heading) !important;
  letter-spacing: 0 !important;
}

.hero-panel,
.hero-box,
.hero-solution-board,
.demand-shell,
.demand-card,
.demand-card-block,
.hero-product-card,
.workflow-problem-card,
.workflow-video-card,
.manual-summary-card,
.manual-panel,
.comparison-proof-card,
.comparison-issue-card,
.story-panel,
.story-card,
.media-card,
.benefit-card,
.ai-platform-card,
.hero-video-card,
.case-card,
.article-card,
.news-card,
.info-card,
.gallery-card,
.timeline-card,
.team-card,
.proof-card,
.cert-item,
.contact-card,
.qr-card,
.brand-logo-card,
.modal-card,
.video-modal-card,
.form-shell,
.shell > .panel,
.page > .card,
.wrap .card,
.meta-card,
.result,
.result-row,
.official-item,
.wf-step,
.image-lightbox-dialog {
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius) !important;
  background: var(--ds-surface) !important;
  box-shadow: var(--ds-shadow-soft) !important;
}

.hero-panel,
.hero-box,
.demand-shell,
.story-panel,
.manual-panel,
.comparison-shell,
.case-video-shell {
  box-shadow: var(--ds-shadow) !important;
}

.demand-shell,
.story-panel,
.manual-panel,
.comparison-shell,
.case-video-shell {
  background: #ffffff !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius) !important;
}

.hero-box {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.case-card::before,
.demand-card::before,
.hero-product-card::before,
.story-card::before,
.benefit-card::before {
  background: linear-gradient(90deg, var(--ds-blue), var(--ds-green)) !important;
}

.case-title,
.article-title,
.news-title,
.benefit-title,
.hero-product-title,
.demand-card-meta h3,
.workflow-problem-card h3,
.team-card h3,
.timeline-card h3 {
  color: var(--ds-heading) !important;
  letter-spacing: 0 !important;
}

.case-body,
.article-intro,
.news-intro,
.hero-product-desc,
.demand-card-scene,
.demand-card-lead,
.timeline-card p,
.team-card p,
.contact-list,
.info-list {
  color: var(--ds-muted) !important;
}

.case-type,
.article-meta span,
.news-meta span,
.category-count,
.hero-product-no,
.demand-card-no {
  border-color: #d5e4f7 !important;
  background: var(--ds-blue-soft) !important;
  color: var(--ds-blue-deep) !important;
}

.case-no,
.case-card:nth-child(2n) .case-no,
.case-card:nth-child(3n) .case-no {
  border-radius: var(--ds-radius) !important;
  background: var(--ds-blue) !important;
  color: #ffffff !important;
}

.service-list,
.proof-card,
.cert-item {
  border-radius: var(--ds-radius) !important;
}

.service-list,
.demand-list,
.hero-product-list,
.hero-points,
.info-list,
.contact-list {
  border-color: var(--ds-line) !important;
}

.category-tabs,
.tabs,
.manual-nav {
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: var(--ds-shadow-soft) !important;
}

.category-tab,
.tab-btn,
.manual-nav-btn {
  border-radius: var(--ds-radius) !important;
  color: #2c4a70 !important;
}

.category-tab.active,
.tab-btn.active,
.manual-nav-btn.is-active {
  border-color: #c8daf4 !important;
  background: var(--ds-blue-soft) !important;
  color: var(--ds-blue-deep) !important;
}

.hero-action,
.demand-action,
.btn,
.submit-btn,
.product-action,
.article-action,
.news-action,
.floating-consult-btn,
.ask-ai-btn,
.ai-answer-btn,
.gallery-btn {
  border-radius: var(--ds-radius) !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.hero-action.primary,
.demand-action.primary,
.btn-primary,
.submit-btn,
.product-action.primary,
.article-action,
.news-action,
.floating-consult-btn,
.ask-ai-btn,
.ai-answer-btn {
  border: 1px solid var(--ds-blue) !important;
  background: var(--ds-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(23, 105, 232, 0.18) !important;
}

.hero-action.secondary,
.btn-ghost,
.btn-secondary,
.product-action.ghost,
.gallery-btn,
.helper-link {
  border: 1px solid var(--ds-line-strong) !important;
  background: #ffffff !important;
  color: var(--ds-blue-deep) !important;
  box-shadow: none !important;
}

@media (hover: hover) {
  .hero-action:hover,
  .demand-action:hover,
  .btn:hover,
  .submit-btn:hover,
  .product-action:hover,
  .article-action:hover,
  .news-action:hover,
  .floating-consult-btn:hover,
  .ask-ai-btn:hover,
  .ai-answer-btn:hover {
    transform: translateY(-1px);
  }

  .hero-product-card:hover,
  .demand-card:hover,
  .story-card:hover,
  .benefit-card:hover,
  .case-card:hover,
  .article-card:hover,
  .news-card:hover,
  .team-card:hover,
  .proof-card:hover,
  .media-card:hover,
  .brand-logo-card:hover {
    border-color: #bfd2ee !important;
    box-shadow: var(--ds-shadow) !important;
  }
}

input,
select,
textarea,
.input,
.machine-input,
.result-box {
  border: 1px solid var(--ds-line-strong) !important;
  border-radius: var(--ds-radius) !important;
  background: #ffffff !important;
  color: var(--ds-heading) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  outline: none !important;
}

input:focus,
select:focus,
textarea:focus,
.input:focus,
.machine-input:focus,
.result-box:focus {
  border-color: var(--ds-blue) !important;
  box-shadow: var(--ds-ring) !important;
}

label,
.label,
.field-label,
.field label {
  color: #294564 !important;
  font-weight: 750 !important;
}

code,
.meta-value,
.result-value {
  border-radius: 6px;
  background: #eef4fb;
  color: #163a66;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

th,
td {
  border-color: var(--ds-line) !important;
}

.service-list,
.demand-list,
.hero-product-list,
.hero-points {
  color: var(--ds-muted) !important;
}

.empty {
  border-color: var(--ds-line-strong) !important;
  border-radius: var(--ds-radius) !important;
  background: var(--ds-surface) !important;
  color: var(--ds-muted) !important;
}

.footer {
  border-top: 1px solid var(--ds-line) !important;
  background: #ffffff !important;
  color: #758398 !important;
}

.message,
.status,
.tip {
  border-radius: var(--ds-radius) !important;
}

.modal-backdrop,
.video-modal,
.image-lightbox {
  backdrop-filter: blur(10px);
}

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

@media (max-width: 900px) {
  .case-list {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 680px) {
  .top-nav .container,
  .top-nav > .container {
    width: min(var(--ds-nav-width), calc(100% - 32px)) !important;
    min-height: auto !important;
    padding: 10px 0 !important;
  }

  .menu {
    gap: 6px !important;
  }

  .menu a {
    min-height: 32px !important;
    padding: 6px 6px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  .hero-panel,
  .hero-box,
  .demand-shell,
  .story-panel,
  .case-card,
  .article-card,
  .news-card,
  .info-card,
  .gallery-card,
  .timeline-card,
  .team-card,
  .proof-card,
  .contact-card,
  .qr-card {
    border-radius: var(--ds-radius) !important;
  }

  .case-list {
    grid-template-columns: 1fr !important;
  }
}