/* Merged CSS */

/* --- style.css --- */
:root {
  /* Colors */
  --primary-orange-start: #FF8A00;
  --primary-orange-end: #FF6A00;
  --primary-orange-solid: #FF7A00;
  --primary-orange-light: #FFF0E0;

  --primary-blue: #3B82F6;
  --primary-blue-dark: #2563EB;
  --primary-blue-light: #EEF4FF;

  --text-dark: #111827;
  /* almost black */
  --text-heading: #1F2D3D;
  --text-body: #475569;
  --text-light: #64748B;
  --text-lighter: #94A3B8;

  --bg-white: #FFFFFF;
  --bg-light: #F7F9FC;
  /* Light gray-blue */
  --bg-footer: #111827;

  --border-color: #E5E7EB;

  --success-green: #22C55E;
  --warning-yellow: #F59E0B;

  /* Spacing */
  --container-width: 1280px;
  --header-height: 72px;
  --section-padding: 80px 0;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* Fonts */
  --font-family: 'Inter', 'Noto Sans SC', sans-serif;
}

/* Reset & Base */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  color: var(--text-body);
  line-height: 1.6;
  background-color: var(--bg-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

ul {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-heading);
  font-weight: 700;
  line-height: 1.2;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.text-center {
  text-align: center;
}

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

.text-primary {
  color: var(--primary-blue);
}

.bg-light {
  background-color: var(--bg-light);
}

/* Components: Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-pill);
  /* Pill radius as per design */
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  white-space: nowrap;
}

:root {
  /* ... existing vars ... */

  /* Register Button Tokens (Figma Exact) */
  --btn-reg-width: 160px;
  --btn-reg-height: 40px;
  --btn-reg-radius: 0px;
  /* Rectangle in Figma seems to have 0 radius based on screenshot, but user mentioned rounded in OCR prompt? Actually looking at the cropped images 153_1131 and 153_1118, they look like rectangles. Wait, OCR says "Corner radius: ≈ 14–16 px". But the read file content for rectangle3 shows no border-radius. Let's look closely at the provided React code: "className={styles.rectangle2}". And CSS: ".rectangle2 { ... width: 160px; height: 40px; ... }". No border-radius in the CSS module.
    HOWEVER, the user prompt says "rounded rectangle button background" in the OCR notes. 
    BUT, the user ALSO provided the CSS module content which has NO border-radius.
    AND the user says "strictly follow Figma prototype... Rectangle 3... Group 215".
    Let's re-read the provided CSS from file read:
    .rectangle2 { ... box-shadow: 0px 10px 10px 0px #fb7c0833; padding: 9px 44px; width: 160px; height: 40px; background-image: linear-gradient(90deg, #ffb221 0%, #fa6f02 100%); ... }
    
    The user's prompt text says "Corner radius: ≈ 14–16 px" in the OCR section, but that might be AI hallucination from the image if the image is blurry. The code reference provided by the user (React/SCSS) is likely the ground truth from Figma-to-Code plugin.
    
    Wait, the user says "Strictly follow Figma prototype...". The provided code snippets are likely what I should base it on.
    The code snippet for 153_1131 (rectangle2) has:
    - width: 160px
    - height: 40px
    - background-image: linear-gradient(90deg, #ffb221 0%, #fa6f02 100%)
    - box-shadow: 0px 10px 10px 0px #fb7c0833
    - padding: 9px 44px (implies centered text)
    - Font: 18px, Inter/PingFang SC...
    
    I will use these EXACT values.
    */
  --btn-reg-bg-start: #ffb221;
  --btn-reg-bg-end: #fa6f02;
  --btn-reg-shadow: 0px 10px 10px 0px rgba(251, 124, 8, 0.2);
  /* #fb7c0833 */
  --btn-reg-font-size: 18px;
  --btn-reg-color: #ffffff;
}

/* ... */

/* Override default button styles to match specific "Register" button */
.btn {
  /* Reset common styles if needed, but btn-primary handles most */
}

/* Ensure outline button also matches size if it's "Learn More" next to it, 
   but user only asked for "Register" button style. 
   Wait, the "Free Experience" button was replaced by "Register".
   The user prompt says "Rectangle 3" (120x32) AND "Group 215" (screenshot 153_1131, 160x40).
   The "Register" button in the header is small, the one in Hero is large.
   
   Let's check the HTML.
   Header: <a href="#" class="btn btn-primary">立即注册</a>
   Hero: <a href="#" class="btn btn-primary btn-lg">立即注册</a>
   
   The code snippet for 153_1131 (160x40) likely corresponds to the Hero button or a standard CTA.
   The code snippet for 153_1118 (120x32) corresponds to "Rectangle 3", likely the Header button.
   
   I need to distinguish them.
   
   .btn-primary (default) -> Header button size (120x32)
   .btn-lg -> Hero button size (160x40)
*/

.btn-primary {
  /* Header button size (Rectangle 3 based) */
  width: 120px;
  height: 32px;
  background-image: linear-gradient(90deg, #ffb221 0%, #fa6f02 100%);
  box-shadow: 0px 6px 10px 0px rgba(251, 124, 8, 0.2);
  /* #fb7c0833 */
  font-size: 14px;

  font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
  color: #ffffff;
  line-height: 22px;
  letter-spacing: 0;
  font-weight: 400;

  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  /* Consistent with request */
}

.btn-primary,
.btn-lg {
  padding: 0;
  border-radius: 0;
}

.btn-lg {
  /* Hero button size (Rectangle 2 / Group 215 based) */
  width: 160px;
  height: 40px;
  box-shadow: 0px 10px 10px 0px rgba(251, 124, 8, 0.2);
  font-size: 18px;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0px 15px 20px 0px rgba(251, 124, 8, 0.3);
  filter: brightness(1.05);
  background-image: linear-gradient(90deg, #ffc44d 0%, #ff8629 100%);
  /* Lighter on hover */
}

.btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0px 5px 5px 0px rgba(251, 124, 8, 0.2);
  filter: brightness(0.95);
  background-image: linear-gradient(90deg, #e6a01e 0%, #e16402 100%);
  /* Darker on active */
}

.btn-primary.disabled,
.btn-primary:disabled {
  background-image: none;
  background-color: #E9ECEF;
  color: #FFFFFFCC;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(1);
}


.btn-outline {
  background: transparent;
  border: 1px solid var(--primary-orange-solid);
  color: var(--primary-orange-solid);
}

.btn-outline:hover {
  background: var(--primary-orange-light);
  color: var(--primary-orange-end);
}

.btn-lg {
  padding: 14px 32px;
  font-size: 16px;
}

.btn-sm {
  padding: 6px 16px;
  font-size: 12px;
  border-radius: var(--radius-md);
  /* Smaller radius for small buttons */
}

.btn-block {
  display: flex;
  width: 100%;
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.site-header,
.header-container {
  width: 100%;
  display: flex;
  align-items: center;
}

.header-container {
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-img {
  height: 40px;
  /* Adjust as needed */
  width: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

/* Remove old logo styles */
/*
.logo-icon { ... }
.logo-text { ... }
*/

.main-nav ul {
  display: flex;
  gap: 32px;
}

.main-nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-dark);
  position: relative;
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.main-nav a.nav-item-custom {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0;
  color: #6c7380;
  display: inline-block;
  vertical-align: middle;
}

.main-nav a.nav-item-custom.active {
  color: #6c7380;
  /* Override active color to match spec */
}

.main-nav a.nav-item-custom:hover,
.main-nav a.active,
.main-nav a:hover {
  color: var(--primary-orange-solid);
}

.main-nav a.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  /* Align with header bottom */
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--primary-orange-solid);
  border-radius: 3px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.login-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-light);
}

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

.hero-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.hero-content {
  flex: 1;
  max-width: 600px;
  z-index: 2;
}

.hero-title {
  font-size: 48px;
  font-weight: 600;
  color: #070c20;
  margin-bottom: 24px;
  line-height: 67px;
  letter-spacing: 0;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
}

.hero-subtitle {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-body);
  display: block;
  margin-top: 16px;
}

.hero-desc {
  font-size: 16px;
  color: var(--text-light);
  margin-bottom: 40px;
  max-width: 540px;
}

.hero-actions {
  display: flex;
  gap: 20px;
  margin-bottom: 60px;
}

.hero-stats {
  display: flex;
  gap: 60px;
  padding-top: 30px;
  border-top: 1px solid var(--border-color);
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-num {
  font-size: 36px;
  font-weight: 800;
  color: var(--primary-orange-solid);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: var(--text-light);
}

.hero-visual {
  display: none;
  /* Hide original visual container */
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* Sections General */
.section {
  padding: var(--section-padding);
}

.section-header {
  margin-bottom: 60px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Platform Diagram Section - Swimlane Style */

/* Product Display Section - Sidebar Layout */

/* Mobile Support Section */

/* Scenario Section */

/* Partners Section */

/* Finance Section */

/* Pricing Section */

/* Footer */

/* Responsive */

/* Animation Utilities */

/* Staggered animation delays for grids */

/* Process Node delays handled in HTML via data-delay (requires JS or manual CSS) */
/* Adding manual CSS for process nodes to keep it simple without complex JS for this part */

.section-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 16px;
  /* Removed image styles */
}

.section-subtitle {
  font-size: 16px;
  color: var(--text-light);
}

/* Platform Diagram Section - Swimlane Style */
.process-diagram-card {
  background: white;

  /* border-radius: var(--radius-xl);
    padding: 40px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--primary-blue-light); */
  /* position: relative;
    overflow-x: auto;  */
}

.swimlane-header {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 2px dashed var(--border-color);
  padding-bottom: 20px;
  margin-bottom: 20px;
  min-width: 900px;
  /* Ensure lanes don't get too squished */
}

.lane-title {
  text-align: center;
  font-weight: 600;
  color: var(--primary-blue);
  font-size: 15px;
}

.swimlane-body {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-width: 900px;
  position: relative;
  gap: 20px;
}

.lane {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  /* Vertical spacing between nodes in a lane */
  padding: 20px 0;
  border-right: 1px dashed #f1f5f9;
  /* Subtle lane divider */
}

.lane:last-child {
  border-right: none;
}

.process-node {
  background: var(--primary-blue-dark);
  color: white;
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
  transition: all 0.3s ease;
  cursor: default;
  z-index: 2;
}

.process-node:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 12px rgba(37, 99, 235, 0.3);
}

.node-spacer {
  height: 40px;
  /* Spacer to align nodes across lanes */
  width: 100%;
}

.process-arrow-down,
.process-arrow-right {
  color: var(--text-lighter);
  font-size: 12px;
  opacity: 0.6;
}

/* Product Display Section - Sidebar Layout */
.product-display-wrapper {
  display: flex;
  gap: 40px;
  background: white;
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow-card);
  min-height: 600px;
}

.tabs-nav-sidebar {
  display: flex;
  flex-direction: column;
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-color);
  padding-right: 20px;
}

.tab-btn {
  padding: 16px 20px;
  text-align: left;
  background: transparent;
  border: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-light);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all 0.2s;
  margin-bottom: 8px;
}

.tab-btn:hover {
  background: #F8FAFC;
  color: var(--text-heading);
}

.tab-btn.active {
  background: var(--primary-orange-light);
  color: var(--primary-orange-solid);
  font-weight: 600;
}

.tab-content-area {
  flex: 1;
  overflow: hidden;
}

.tab-content {
  display: none;
  animation: fadeIn 0.4s ease-out;
  height: 100%;
}

.tab-content.active {
  display: block;
}

.product-screenshot-card {
  background: #FFFFFF;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.screenshot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.screenshot-header h4 {
  font-size: 20px;
  color: var(--text-heading);
}

.header-actions-sm {
  display: flex;
  gap: 12px;
}

.mock-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  flex: 1;
}

.mock-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

.mock-table td,
.mock-table th {
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
}

.mock-table th {
  background: #F8FAFC;
  color: var(--text-light);
  font-weight: 600;
  white-space: nowrap;
}

.mock-table td {
  color: var(--text-body);
}

.mock-table tr:hover td {
  background-color: #F8FAFC;
}

.status-badge {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}

.status-badge.success {
  background: #DCFCE7;
  color: #166534;
}

.status-badge.pending {
  background: #DBEAFE;
  color: #1E40AF;
}

.status-badge.warning {
  background: #FEF3C7;
  color: #92400E;
}

.table-actions {
  display: flex;
  gap: 12px;
  color: var(--text-light);
  cursor: pointer;
}

.table-actions i:hover {
  color: var(--primary-blue);
}

.mock-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #FFFFFF;
  border-top: 1px solid var(--border-color);
  font-size: 13px;
  color: var(--text-light);
}

.pagination-controls {
  display: flex;
  gap: 8px;
}

.pagination-controls button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  background: white;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-body);
  font-size: 12px;
}

.pagination-controls button.active {
  background: var(--primary-orange-solid);
  color: white;
  border-color: var(--primary-orange-solid);
}

.pagination-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mobile Support Section */
.feature-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.feature-card {
  background: white;
  padding: 40px 30px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.feature-card:hover {
  transform: translateY(-12px);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary-orange-light);
}

.card-icon-wrapper {
  width: 72px;
  height: 72px;
  background: var(--primary-orange-light);
  color: var(--primary-orange-solid);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 24px;
  transition: transform 0.3s;
}

.feature-card:hover .card-icon-wrapper {
  transform: scale(1.1) rotate(5deg);
}

.card-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--bg-light);
  color: var(--text-light);
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin-bottom: 16px;
  font-weight: 500;
}

.feature-card h3 {
  font-size: 20px;
  margin-bottom: 20px;
  color: var(--text-heading);
}

.feature-list {
  text-align: left;
  width: 100%;
  padding-left: 10px;
}

.feature-list li {
  margin-bottom: 12px;
  color: var(--text-body);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.feature-list li i {
  color: var(--success-green);
  font-size: 14px;
}

/* Scenario Section */
.scenario-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.scenario-card {
  background: white;
  padding: 40px 30px;
  border-radius: var(--radius-lg);
  transition: all 0.4s ease;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

.scenario-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--primary-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.scenario-card:hover::before {
  transform: scaleX(1);
}

.scenario-card:hover {
  background: white;
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px);
}

.scenario-icon {
  font-size: 40px;
  color: var(--primary-blue);
  margin-bottom: 24px;
}

.scenario-card h3 {
  margin-bottom: 16px;
  font-size: 22px;
}

.scenario-card p {
  color: var(--text-light);
  font-size: 15px;
  margin-bottom: 24px;
  line-height: 1.6;
}

.learn-more-link {
  font-size: 14px;
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.learn-more-link:hover {
  color: var(--primary-orange-solid);
}

.learn-more-link i {
  transition: transform 0.3s;
}

.learn-more-link:hover i {
  transform: translateX(4px);
}

/* Partners Section */
.partners-section {
  padding: 80px 0;
}

.partners-logos-grid {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 60px;
  padding: 0 40px;
}

.partners-logos-grid,
.partner-logo {
  display: flex;
  align-items: center;
}

.partner-logo {
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-lighter);
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.4s;
  cursor: default;
}

.partner-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
  color: var(--text-heading);
  transform: scale(1.05);
}

.partner-logo i {
  font-size: 36px;
}

/* Finance Section */
.finance-container {
  display: flex;
  align-items: center;
  gap: 80px;
}

.finance-content {
  flex: 1;
}

.finance-features {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.finance-features li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  color: var(--text-heading);
}

.finance-features li i {
  color: var(--primary-blue);
  font-size: 22px;
}

.finance-visual {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 20px;
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 20px;
}

.app-tile {
  width: 90px;
  height: 90px;
  background: #F8FAFC;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-heading);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-tile:hover {
  transform: scale(1.1);
  background: white;
  box-shadow: var(--shadow-md);
}

.app-tile i {
  font-size: 32px;
}

.app-tile.tiktok i {
  color: #000000;
}

.app-tile.kuaishou i {
  color: #FF4D00;
}

.app-tile.taobao i {
  color: #FF5000;
}

.app-tile.tmall i {
  color: #FF0036;
}

.app-tile.jd i {
  color: #E1251B;
}

.app-tile.pdd i {
  color: #E02E24;
}

.app-tile.meituan i {
  color: #FFC300;
}

.app-tile.eleme i {
  color: #0097FF;
}

/* Pricing Section */
.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: flex-end;
  margin-bottom: 80px;
}

.pricing-card {
  background: white;
  padding: 50px 30px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  text-align: center;
  position: relative;
  transition: all 0.4s;
  overflow: hidden;
}

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

.pricing-card.featured {
  border-color: var(--primary-orange-solid);
  box-shadow: 0 20px 40px rgba(255, 138, 0, 0.15);
  transform: scale(1.05);
  z-index: 2;
}

.pricing-card.featured:hover {
  transform: scale(1.05) translateY(-16px);
}

.pricing-card.featured::before {
  content: 'RECOMMENDED';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-orange-solid);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 0 0 8px 8px;
}

.pricing-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pricing-badge.basic {
  background: #F1F5F9;
  color: #475569;
}

.pricing-badge.pro {
  background: var(--primary-orange-light);
  color: var(--primary-orange-solid);
}

.pricing-badge.enterprise {
  background: #F0FDFA;
  color: #0F766E;
}

.pricing-price {
  font-size: 42px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.pricing-price .period {
  font-weight: 400;
  vertical-align: middle;
}

.pricing-price .period,
.pricing-users {
  font-size: 14px;
  color: var(--text-light);
}

.pricing-users {
  margin-bottom: 30px;
  font-weight: 500;
}

.pricing-features {
  text-align: left;
  margin-bottom: 40px;
  padding: 0 10px;
}

.pricing-features li {
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--text-body);
  display: flex;
  align-items: center;
  gap: 12px;
}

.pricing-features li i {
  color: var(--success-green);
  font-size: 16px;
}

.pricing-benefits {
  display: flex;
  justify-content: center;
  gap: 60px;
  padding: 30px;
  background: linear-gradient(to right, #FFF7ED, #FFF0E0);
  border-radius: var(--radius-lg);
  margin-top: 40px;
  border: 1px solid var(--primary-orange-light);
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--primary-orange-solid);
  font-size: 16px;
}

.benefit-item i {
  font-size: 20px;
}

/* Footer */
.site-footer {
  background: var(--bg-footer);
  color: #94A3B8;
  padding-top: 100px;
}

.footer-container {
  display: grid;
  grid-template-columns: 1.5fr 2fr 1.5fr;
  gap: 80px;
  padding-bottom: 80px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand .logo-img.footer-logo-img {
  height: 36px;
  filter: brightness(0) invert(1);
  /* Make logo white for dark footer */
  opacity: 0.9;
}

.footer-desc {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.8;
  color: #CBD5E1;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.footer-col h4 {
  color: white;
  font-size: 16px;
  margin-bottom: 24px;
  font-weight: 600;
}

.footer-col ul li {
  margin-bottom: 14px;
}

.footer-col ul li a {
  font-size: 14px;
  transition: all 0.2s;
}

.footer-col ul li a:hover {
  color: var(--primary-orange-solid);
  padding-left: 4px;
}

.footer-contact {
  text-align: right;
}

.contact-phone {
  font-size: 28px;
  font-weight: 800;
  color: white;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.contact-info {
  font-size: 14px;
  margin-bottom: 10px;
  color: #CBD5E1;
}

.contact-bubble {
  display: inline-block;
  margin-top: 20px;
  background: linear-gradient(135deg, var(--primary-orange-start), var(--primary-orange-end));
  color: white;
  padding: 10px 20px;
  border-radius: 20px 20px 0 20px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(255, 138, 0, 0.3);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.footer-bottom {
  padding: 30px 0;
  text-align: center;
  font-size: 13px;
  color: #64748B;
}

/* Responsive */
@media (max-width: 1200px) {

  .swimlane-body,
  .swimlane-header {
    min-width: 100%;
  }
}

@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }

  .hero-container {
    flex-direction: column;
    text-align: center;
  }

  .hero-content {
    max-width: 100%;
    margin-bottom: 40px;
  }

  .hero-actions,
  .hero-stats,
  .hero-visual {
    justify-content: center;
  }

  .hero-visual {
    width: 100%;
  }

  .hero-3d-graphic img {
    margin-right: 0;
    max-width: 90%;
  }

  .product-display-wrapper {
    flex-direction: column;
  }

  .tabs-nav-sidebar {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding-right: 0;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }

  .tab-btn {
    margin-bottom: 0;
    margin-right: 10px;
    white-space: nowrap;
  }

  .app-grid,
  .feature-cards-grid,
  .pricing-cards-grid,
  .scenario-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .footer-contact {
    text-align: left;
  }

  .pricing-card.featured {
    transform: none;
  }

  .pricing-card.featured:hover {
    transform: translateY(-16px);
  }
}

@media (max-width: 768px) {
  .main-nav {
    display: none;
  }

  .header-actions {
    margin-left: auto;
  }

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

  .app-grid,
  .feature-cards-grid,
  .pricing-cards-grid,
  .scenario-cards-grid {
    grid-template-columns: 1fr;
  }

  .finance-container,
  .pricing-benefits {
    flex-direction: column;
  }

  .pricing-benefits {
    align-items: center;
    gap: 20px;
  }

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

  .swimlane-body,
  .swimlane-header {
    min-width: 800px;
    /* Allow scroll on mobile */
  }
}

/* Animation Utilities */
.fade-up-init {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation delays for grids */
.feature-card:nth-child(1) {
  transition-delay: 0.1s;
}

.feature-card:nth-child(2) {
  transition-delay: 0.2s;
}

.feature-card:nth-child(3) {
  transition-delay: 0.3s;
}

.scenario-card:nth-child(1) {
  transition-delay: 0.1s;
}

.scenario-card:nth-child(2) {
  transition-delay: 0.2s;
}

.scenario-card:nth-child(3) {
  transition-delay: 0.3s;
}

.pricing-card:nth-child(1) {
  transition-delay: 0.1s;
}

.pricing-card:nth-child(2) {
  transition-delay: 0.2s;
}

.pricing-card:nth-child(3) {
  transition-delay: 0.3s;
}

.app-tile:nth-child(1) {
  transition-delay: 0.05s;
}

.app-tile:nth-child(2) {
  transition-delay: 0.1s;
}

.app-tile:nth-child(3) {
  transition-delay: 0.15s;
}

.app-tile:nth-child(4) {
  transition-delay: 0.2s;
}

.app-tile:nth-child(5) {
  transition-delay: 0.25s;
}

.app-tile:nth-child(6) {
  transition-delay: 0.3s;
}

/* Process Node delays handled in HTML via data-delay (requires JS or manual CSS) */
/* Adding manual CSS for process nodes to keep it simple without complex JS for this part */
.process-node {
  opacity: 0;
  transform: scale(0.8);
  animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes popIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.process-diagram-card:not(.animate-in) .process-node {
  animation-play-state: paused;
}

.process-node:nth-child(1) {
  animation-delay: 0.2s;
}

.lane:nth-child(2) .process-node:nth-child(1) {
  animation-delay: 0.3s;
}

.lane:nth-child(2) .process-node:nth-child(3) {
  animation-delay: 0.5s;
}

.lane:nth-child(3) .process-node:nth-child(3) {
  animation-delay: 0.7s;
}

.lane:nth-child(3) .process-node:nth-child(5) {
  animation-delay: 0.9s;
}

.lane:nth-child(3) .process-node:nth-child(7) {
  animation-delay: 1.1s;
}

.lane:nth-child(4) .process-node:nth-child(5) {
  animation-delay: 1.3s;
}

.lane:nth-child(4) .process-node:nth-child(7) {
  animation-delay: 1.5s;
}

.lane:nth-child(5) .process-node:nth-child(5) {
  animation-delay: 1.7s;
}

/* --- style-hero.css --- */
.group-216 {
  background: url('../images/hero_illustration.png') no-repeat;
  background-size: 100% 100%;
  padding: 0 72px 80px;

  margin: 72px auto 0;
}

.group-216 .hero-container {
  padding-top: 88px;
}

.process-diagram-card-img {
  max-width: 1240px;
  max-height: 1062px;
}

.area-3-title {
  font-weight: 500;
  font-style: Medium;
  font-size: 26px;
  line-height: 100%;
}

.area-3-title,
.area-3-subtitle {
  font-family: PingFang SC;
  leading-trim: NONE;
  letter-spacing: 0%;

}

.area-3-subtitle {
  font-weight: 400;
  font-style: Regular;
  font-size: 13px;
  line-height: 1.5em;
  text-align: center;

}

/* --- area-4-cards.css --- */
/* Area 4 Cards Component Styles */
.area-4 {
  background: #F5F7FA;
}

.area-4-cards {
  display: flex;
  width: 100%;
  max-width: 1240px;
  background: #ffffff;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
}

/* Left Visual Area */
.area-4-cards,
.area-4-cards__visual {
  height: 500px;
  overflow: hidden;
}

.area-4-cards__visual {
  width: 400px;
  flex-shrink: 0;
  position: relative;
}

.area-4-cards__visual-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
}

.area-4-cards__visual-img.active {
  opacity: 1;
}

/* Right Content Area */
.area-4-cards__content {
  flex: 1;
  padding: 30px 40px 0;
  display: flex;
  flex-direction: column;
}

/* Tabs Navigation */
.area-4-cards__tabs {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dee4ed;
  margin-bottom: 40px;
  position: relative;
}

.area-4-cards__tab-item {
  padding-bottom: 15px;
  margin-right: 40px;
  font-size: 16px;
  color: #5a677d;
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.area-4-cards__tab-item:last-child {
  margin-right: 0;
}

.area-4-cards__tab-item:hover {
  color: #fb7807;
}

.area-4-cards__tab-item.active {
  color: #fb7807;
  font-weight: 500;
}

.area-4-cards__tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  /* Overlap border */
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #fb7807;
}

.area-4-cards__tab-item.disabled {
  color: #ccc;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tab Content Panes */
.area-4-cards__panes {
  position: relative;
  flex: 1;
}

.area-4-cards__pane {
  display: none;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 60px;
  column-gap: 60px;
  row-gap: 40px;
  animation: fadeIn 0.3s ease-in-out;
}

.area-4-cards__pane.active {
  display: grid;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Feature Item */
.area-4-cards__feature {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.area-4-cards__feature-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.area-4-cards__feature-info {
  display: flex;
  flex-direction: column;
}

.area-4-cards__feature-title {
  font-size: 16px;
  font-weight: 500;
  color: #121212;
  line-height: 22px;
  margin-bottom: 8px;
}

.area-4-cards__feature-desc {
  font-size: 13px;
  color: #5a677d;
  line-height: 18px;
  max-width: 280px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .area-4-cards {
    height: auto;
    flex-direction: column;
  }

  .area-4-cards__visual {
    width: 100%;
    height: 250px;
  }

  .area-4-cards__content {
    padding: 20px;
  }

  .area-4-cards__pane {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .area-4-cards__tabs {
    overflow-x: auto;
    padding-bottom: 5px;
    /* For scrollbar */
  }

  .area-4-cards__tab-item {
    margin-right: 20px;
  }
}

/* --- area-5-cards.css --- */
.area-5-cards {
  --tab-w: 240px;
  --tab-h: 54px;
  --radius: 16px;
  --radius-lg: 20px;
  --gap: 16px;
  --bg: #f7f8fb;
  --card: #fff;
  --text: #1f2329;
  --muted: #8a8f99;
  --line: #e9edf3;
  --brand-1: #FFA318;
  --brand-2: #f7933d;
  --shadow: 0 6px 24px rgba(15, 23, 42, .08);
  --blur: 22px;
  --trans: 280ms cubic-bezier(.2, .6, .2, 1);
  position: relative;
  width: 100%;
  border-radius: 8px;
}

.area-5-cards__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  background: #F5F7FA;
  display: grid;
  grid-template-columns: var(--tab-w) 1fr;
  gap: 24px;
  backdrop-filter: saturate(1.1);
  border-radius: 8px;
}

@media (min-width: 1440px) {
  .area-5-cards__inner {
    max-width: 1280px;
  }
}

@media (min-width: 1920px) {
  .area-5-cards__inner {
    max-width: 1440px;
  }
}

/* Top Tabs */
.area-5-cards-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.area-5-top-tab {
  padding: 10px 24px;
  border-radius: 100px;
  border: 1px solid transparent;
  background: #fff;
  color: #64748b;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.area-5-top-tab:hover {
  color: #333;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.area-5-top-tab.active {
  border-radius: 50px;
  background: #F5F7FA;
  ;
  color: #333;
}

/* Tabs */
.area-5-cards__tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.area-5-cards__tab {
  width: 240px;
  height: 65px;
  cursor: pointer;
  padding-bottom: 5px;
  display: grid;
  grid-template-columns: 22px 18px 1fr;
  align-items: center;
  padding-left: 20px;
  background: url('../images/button1.png') no-repeat;
  background-size: 100% 100%;
  border-radius: 4px;
  font-size: 18px;
  color: var(--muted);
  letter-spacing: .2px;
  transition: transform var(--trans), color var(--trans), opacity var(--trans);
  text-align: left;
}

/* .area-5-cards__tab { height: var(--tab-h); display: grid; grid-template-columns: 18px 18px 1fr; align-items: center; padding: 0 20px; background: url('../images/button2.png');  text-align: left; } */


.area-5-cards__tab-num {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-right: 4px
}

.area-5-cards__tab-sep {
  text-align: center;
}

.area-5-cards__tab-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.area-5-cards__tab:hover {
  transform: translateY(-1px);
}

.area-5-cards__tab:active {
  transform: translateY(0);
}

.area-5-cards__tab[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

/* .area-5-cards__tab--active { border-radius: 4px; background: linear-gradient(180deg, var(--brand-2), var(--brand-1)); color: #fff; border-color: transparent; box-shadow: 0 10px 28px rgba(255, 122, 26, .35); } */
.area-5-cards__tab--active {
  border-radius: 4px;
  background: url('https://web.yayuit.cn/app-page/jindengta/images/button2.png') no-repeat;
  background-size: 100% 100%;
  color: #fff;
  border-color: transparent;
}


/* Panel */
.area-5-cards__panel {
  position: relative;
  background: var(--card);
  overflow: hidden;
}

.area-5-cards__header {
  padding: 8px 12px 16px;
}

.area-5-cards__intro {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: #3d3f45;
  font-weight: 600;
  background: linear-gradient(90deg, #ff9b36, #ff7a1a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Stage and slides */
.area-5-cards__stage {
  position: relative;
  background: #f6f7fa;
  min-height: 412px;
  padding: 0;
  overflow: hidden;
}

.area-5-cards__slides {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
}

.area-5-cards__slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateX(16px) scale(.985);
  transition: transform 300ms ease, opacity 300ms ease;
}

.area-5-cards__slide--active {
  opacity: 1;
  transform: translateX(0) scale(1);
  z-index: 2;
}

.area-5-cards__bg {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  -o-object-fit: cover;
  object-fit: cover;
  filter: blur(var(--blur)) saturate(1.02) brightness(1.02);
  transform: scale(1.02);
}

.area-5-cards__device {
  position: relative;
  max-width: 76%;
  height: auto;
  transform: translateY(8px) scale(.98);
  opacity: 0;
  transition: transform 300ms ease, opacity 300ms ease;
}

.area-5-cards__slide--active .area-5-cards__device {
  transform: translateY(0) scale(1);
  opacity: 1;
  border-radius: 8px;
}

.area-5-cards__device--phone {
  max-width: 28%;
  left: -28%;
}

.area-5-cards__device--pad {
  max-width: 100%;
}

.area-5-cards__device--panel {
  max-width: 64%;
}

/* Controls */
.area-5-cards__controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  z-index: 3;
}

.area-5-cards__btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
  cursor: pointer;
  transition: transform var(--trans), opacity var(--trans), background var(--trans);
  position: relative;
}

.area-5-cards__btn:hover {
  transform: translateY(-1px);
}

.area-5-cards__btn:active {
  transform: translateY(0);
}

.area-5-cards__btn--next::before,
.area-5-cards__btn--prev::before,
.area-5-cards__btn--toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border: 2px solid #444;
  border-left: 0;
  border-top: 0;
  transform: rotate(-45deg);
}

.area-5-cards__btn--prev::before {
  transform: rotate(135deg);
}

.area-5-cards__btn--next::before {
  transform: rotate(-45deg);
}

.area-5-cards__btn--toggle::before {
  width: 12px;
  height: 2px;
  border: 0;
  background: #444;
  box-shadow: 0 -4px 0 0 #444, 0 4px 0 0 #444;
}

/* Expand/Collapse */
.area-5-cards--collapsed .area-5-cards__device {
  transform: translateY(12px) scale(.96);
  opacity: .66;
}

.area-5-cards--collapsed .area-5-cards__stage {
  max-height: 220px;
  transition: max-height 300ms ease;
}

.area-5-cards__stage {
  max-height: 560px;
  transition: max-height 300ms ease;
}

/* Responsive */
@media (max-width: 1024px) {
  .area-5-cards__inner {
    grid-template-columns: 1fr;
  }

  .area-5-cards__tabs {
    order: 2;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .area-5-cards__tab {
    min-width: 200px;
    height: 60px;
    cursor: pointer;
  }

  .area-5-cards__device--phone {
    display: none;
  }
}

@media (max-width: 768px) {
  .area-5-cards__intro {
    font-size: 14px;
    line-height: 22px;
  }

  .area-5-cards__btn {
    width: 32px;
    height: 32px;
  }

  .area-5-cards-tabs {
    gap: 8px;
    margin-bottom: 24px;
  }

  .area-5-top-tab {
    padding: 8px 16px;
    font-size: 14px;
  }
}

@media (max-width: 375px) {
  .area-5-cards__tab {
    min-width: 180px;
    font-size: 16px;
    cursor: pointer;
  }

  .area-5-cards__device {
    max-width: 92%;
  }
}

/* --- area-6-cards.css --- */
:root {
  --a6-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08)
}

.area-6-cards__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  transition: transform 0.5s ease-in-out;
}

.area-6-cards__item--service {
  background: linear-gradient(180deg, #e6f4ff 0%, #d7efff 40%, #dff1ff 100%)
}

.area-6-cards__item--image {
  background: linear-gradient(180deg, #ffe8f1 0%, #ffe1ec 45%, #ffdbe6 100%)
}

.area-6-cards__item--doc {
  background: linear-gradient(180deg, #fff0e2 0%, #ffe7d4 50%, #ffe2ca 100%)
}

/* 卡片 1 机器人与环 */
.area-6-cards__item--service .area-6-cards__img {
  filter: drop-shadow(0 0.25rem 0.75rem rgba(0, 0, 0, 0.12))
}

.area-6-cards__ring {
  transform: translate(-50%, -50%)
}

.area-6-cards__tag {
  box-shadow: 0 0.25rem 0.75rem rgba(126, 203, 255, 0.25)
}

/* 卡片 2 汉堡与飘散元素 */
.area-6-cards__img--burger {
  filter: drop-shadow(0 0.5rem 1.25rem rgba(0, 0, 0, 0.15))
}

/* 卡片 3 文案便签与铅笔 */
.area-6-cards__sheet {
  box-shadow: 0 0.5rem 1.25rem rgba(255, 167, 107, 0.25)
}

.area-6-cards__label {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06)
}

.area-6-cards__badge {
  box-shadow: 0 0.25rem 0.75rem rgba(255, 167, 107, 0.25)
}

.area-6-cards__img--pencil {
  filter: drop-shadow(0 0.5rem 1.25rem rgba(0, 0, 0, 0.12))
}

/* 交互与动画 */
.area-6-cards__item {
  transition: transform 220ms ease, box-shadow 220ms ease
}

.area-6-cards__img--pencil,
.area-6-cards__piece,
.area-6-cards__tag {
  transition: transform 320ms ease, opacity 320ms ease
}

.area-6-cards__item--service:hover .area-6-cards__tag--tl {
  transform: translate(-0.125rem, -0.125rem)
}

.area-6-cards__item--service:hover .area-6-cards__tag--tr {
  transform: translate(0.125rem, -0.125rem)
}

.area-6-cards__item--service:hover .area-6-cards__tag--bl {
  transform: translate(-0.125rem, 0.125rem)
}

.area-6-cards__item--service:hover .area-6-cards__tag--br {
  transform: translate(0.125rem, 0.125rem)
}

.area-6-cards__item--doc:hover .area-6-cards__img--pencil {
  transform: translate(0.125rem, -0.125rem) rotate(-2deg)
}

/* 导航按钮样式 */

/* 响应式布局 */
@media (min-width:48rem) {

  /* 768px */
  /* .area-6-cards__list{grid-template-columns:repeat(2,1fr);gap:1.25rem} */
  .area-6-cards__media {
    min-height: 15rem
  }
}

@media (min-width:64rem) {

  /* 1024px */
  /* .area-6-cards__list{grid-template-columns:repeat(3,1fr);gap:1.5rem} */
  .area-6-cards__header {
    padding: 1.5rem 1.5rem 0.5rem
  }

  .area-6-cards__title {
    font-size: 1.375rem
  }

  .area-6-cards__desc {
    font-size: 0.9375rem
  }
}

@media (min-width:90rem) {

  /* 1440px+ */
  .area-6-cards {
    max-width: 76rem
  }

  .area-6-cards__media {
    min-height: 16rem
  }

  .area-6-cards__img--burger {
    width: 13.5rem
  }

  .area-6-cards__item--service .area-6-cards__img {
    width: 11.25rem
  }
}

/* 可访问性与降级 */
@media (prefers-reduced-motion:reduce) {

  .area-6-cards__img--pencil,
  .area-6-cards__item,
  .area-6-cards__list,
  .area-6-cards__piece,
  .area-6-cards__tag {
    transition: none
  }
}

/* --- area-7-cards.css --- */
:root {
  --a7-orange: #fb7505;
  --a7-black: #121212;
  --a7-gray: #5a677d;
  --a7-bg: #ffffff;
  --a7-border: #f5f7fa;
  --a7-shadow: 0 12px 10px 0 rgba(245, 247, 250, 1);
}

.area-7-cards {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
  overflow: hidden;
}

/* Upper Section: Text + Globe */
.area-7-cards__upper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  min-height: 280px;
}

.area-7-cards__info {
  display: flex;
  flex-direction: column;
  gap: 28px;
  z-index: 2;
  padding-top: 17px;
  padding-left: 40px;
}

.area-7-cards__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.area-7-cards__heading {
  font-size: 24px;
  font-weight: 500;
  color: var(--a7-black);
  line-height: 1.4;
  margin: 0;
  display: flex;
  align-items: baseline;
}
.area-7-pc{
  margin-top: -119px;
}
.area-7-cards__highlight {
  color: var(--a7-orange);
  font-size: 32px;
  font-weight: 500;
  margin-right: 8px;
}

/* Specific styling for "27" */
.area-7-cards__highlight--num {
  font-family: "PingFang SC", sans-serif;
  /* Ensure number font matches */
}

.area-7-cards__sub {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--a7-gray);
  line-height: 20px;
}

.area-7-cards__globe {
  position: absolute;
  right: -20px;
  top: -40px;
  width: 573px;
  height: auto;
  opacity: 0.8;
  z-index: 1;
  pointer-events: none;
}

/* Lower Section: Certifications */
.area-7-cards__certs {
  margin-top: -58px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 20px 24px;
  background-image: linear-gradient(180deg, #f4f5f8 0%, #ffffff 100%);
  border: 2px solid #ffffff;
  border-radius: 8px;
  box-shadow: var(--a7-shadow);
  position: relative;
  z-index: 2;
}

.area-7-cards__cert-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  padding: 0 10px;
}

.area-7-cards__icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #fff;
  margin-bottom: 10px;
  /* Some icons are images directly, some are wrapped in circles in design, 
     but images extracted seem to be the logos themselves. 
     The CSS reference shows ellipses for some.
     Let's unify style: Circular container if needed, or just the image if it contains the circle.
     Checking assets: 
     - iso, djcp, dcmm, lh seem to be standalone images (group211 class in ref).
     - cac, d-awards, ecommerce seem to be inside ellipses in ref.
  */
}

.area-7-cards__icon-wrapper--circle {
  border: 1px solid rgba(90, 103, 125, 0.3);
}

.area-7-cards__icon {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* Adjust sizes based on design reference */
.area-7-cards__icon--iso,
.area-7-cards__icon--djcp,
.area-7-cards__icon--dcmm {
  width: 90px;
}

.area-7-cards__icon--cac {
  width: 76px;
}

.area-7-cards__icon--d-awards {
  width: 50px;
}

.area-7-cards__icon--lh {
  width: 90px;
}

.area-7-cards__icon--ecommerce {
  width: 57px;
}

.area-7-cards__cert-text {
  font-size: 14px;
  color: #000000;
  line-height: 20px;
  max-width: 160px;
}

/* Responsive */
@media (max-width: 1024px) {
  .area-7-cards__upper {
    flex-direction: column;
  }

  .area-7-cards__globe {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 400px;
    align-self: center;
    margin-top: -100px;
    opacity: 0.4;
  }

  .area-7-cards__info {
    padding-left: 0;
  }

  .area-7-cards__certs {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  .area-7-cards__cert-item {
    flex: 0 0 30%;
    min-width: 140px;
  }
}

@media (max-width: 768px) {
  .area-7-cards {
    padding: 20px 16px;
  }

  .area-7-cards__heading,
  .area-7-cards__highlight {
    font-size: 24px;
  }

  .area-7-cards__sub {
    font-size: 13px;
  }

  .area-7-cards__cert-item {
    flex: 0 0 45%;
  }
}

@media (max-width: 375px) {
  .area-7-cards__cert-item {
    flex: 0 0 100%;
  }
}

/* --- area-8-cards.css --- */
:root {
  --a8-bg: #ffffff;
  --a8-text-title: #121212;
  --a8-text-desc: #6b7280;
  --a8-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  --a8-card-border: #eff3f9;
}

.area-8-cards {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 20px;
  background: var(--a8-bg);
}

.area-8-cards__container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

/* Left Column: Service Guarantees */
.area-8-cards__features {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 0 0 356px;
  padding-top: 10px;
}

.area-8-cards__feature-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.area-8-cards__feature-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  -o-object-fit: contain;
  object-fit: contain;
}

.area-8-cards__feature-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.area-8-cards__feature-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--a8-text-title);
  line-height: 1.4;
  margin: 0;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.area-8-cards__feature-desc {
  font-size: 13px;
  color: var(--a8-text-desc);
  line-height: 1.5;
  margin: 0;
}

/* Right Column: Brand Grid */
.area-8-cards__brands {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  flex: 1;
}

.area-8-cards__brand-card {
  background: #ffffff;
  /* border: 1px solid var(--a8-card-border);
  border-radius: 8px;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 4px 8px 8px 0px #eff3f9;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 110px; */
}

/* .area-8-cards__brand-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
} */



.area-8-cards__brand-logo {
  max-width: 100%;
  height: 135px;
  -o-object-fit: contain;
  object-fit: contain;
}

.area-8-cards__brand-name {
  font-size: 14px;
  color: #000000;
  text-align: center;
  margin: 0;
  font-family: "PingFang SC", sans-serif;
}

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

@media (max-width: 1024px) {
  .area-8-cards__container {
    flex-direction: column;
  }

  .area-8-cards__features {
    flex: 0 0 auto;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .area-8-cards__feature-item {
    flex: 0 0 45%;
  }

  .area-8-cards__brands {
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .area-8-cards__brands {
    grid-template-columns: repeat(3, 1fr);
  }

  .area-8-cards__feature-item {
    flex: 0 0 100%;
  }
}

@media (max-width: 480px) {
  .area-8-cards__brands {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- area-9-cards.css --- */

/* Enterprise Card Specifics */

/* Benefits Section - Revised for Pixel Perfection */
.area-9-cards__benefits {
  width: 1280px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  background: #fff;
}

.area-9-cards__benefits-header {
  background-image: url("https://web.yayuit.cn/app-page/jindengta/images/area9/benefits-header.svg");
}

.area-9-cards__benefits-divider {
  width: 1px;
  background-image: linear-gradient(to bottom, #e2e5f3 50%, transparent 50%);
  background-size: 1px 8px;
  margin: 0 14px 0 10px;
  align-self: stretch;
}

.area-9-cards__tag {
  width: 83px;
}

.area-9-cards__tag--wide {
  width: 131px;
}

/* Card Image Hover Effect */

/* Responsive */

/* --- area-10-partners.css --- */
/* Area 10 Partners Section */
.area-10-partners {
  background-color: #fff;
  padding: 80px 0;
}

.area-10-partners__header {
  text-align: center;
  margin-bottom: 48px;
}

.area-10-partners__title {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 44px;
  color: #1D2129;
  margin-bottom: 16px;
}

.area-10-partners__subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #86909C;
}

.area-10-partners__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  align-items: center;
  justify-items: center;
}

.area-10-partners__item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80px;
  background: #FFFFFF;
  border: 1px solid #f2f3f5;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.area-10-partners__item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-color: transparent;
  transform: translateY(-2px);
}

.area-10-partners__logo {
  max-width: 80%;
  max-height: 60%;
  -o-object-fit: contain;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.8;
  transition: all 0.3s ease;
}

.area-10-partners__item:hover .area-10-partners__logo {
  filter: grayscale(0%);
  opacity: 1;
}

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

@media (max-width: 768px) {
  .area-10-partners {
    padding: 40px 0;
  }

  .area-10-partners__title {
    font-size: 24px;
    line-height: 32px;
  }

  .area-10-partners__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .area-10-partners__item {
    height: 64px;
  }
}

@media (max-width: 480px) {
  .area-10-partners__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- footer.css --- */
/* Footer Component - BEM */

/* Left Column */

/* Divider */

/* Middle Columns */

/* Right Column */

/* 3D Character Illustration */

/* Bottom Bar */

/* Responsive */

:root {
  --a6-radius: 0.75rem;
  --a6-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
  --a6-title: #0f172a;
  --a6-text: #475569;
  --a6-blue: #bfe2ff;
  --a6-blue-2: #7ecbff;
  --a6-pink: #ffe1eb;
  --a6-pink-2: #ffd2df;
  --a6-peach: #ffe3cc;
  --a6-peach-2: #ffd7b3;
  --a6-white: #ffffff;
}

.area-6-cards {
  margin: 0 auto;
  padding: 1.5rem 1rem;
  max-width: 80rem;
  position: relative;
}

.area-6-cards__viewport {
  overflow: hidden;
  position: relative;
  margin: 0 40px;
  /* Add margin for buttons */
  padding-top: 4px;
}

.area-6-cards__list {
  display: flex;
  /* Changed from grid to flex for carousel */
  /* gap: 16px; Removed for Safari 13+ compatibility */
  width: -moz-max-content;
  width: max-content;
  /* Ensure it takes full width of content */
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.area-6-cards__item {
  width: 440px;
  height: 440px;
  flex: 0 0 auto;
  /* Prevent shrinking */
  position: relative;
  border-radius: var(--a6-radius);
  /* box-shadow: var(--a6-shadow); */
  overflow: hidden;
  background: #f6f7f9;
  max-width: 100%;
  /* Responsive fallback */
  margin-right: 16px;
  /* Use margin instead of gap for better compatibility */
}

.area-6-cards__item img {
  width: 100%;
  height: auto;
  display: block;
}

.area-6-cards__item:last-child {
  margin-right: 0;
}

/* Mobile responsiveness for items */
@media (max-width: 520px) {
  .area-6-cards__item {
    width: 290px;
    height: 290px;
  }

  .area-6-cards__viewport {
    margin: 0 20px;
  }
}

@media (max-width: 380px) {
  .area-6-cards__item {
    width: 280px;
    height: 280px;
  }
}

.area-6-cards__header {
  padding: 1.25rem 1.25rem 0.5rem;
}

.area-6-cards__title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--a6-title);
  font-weight: 700;
  letter-spacing: 0;
}

.area-6-cards__desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--a6-text);
}

.area-6-cards__media {
  position: relative;
  margin: 0;
  padding: 0 1.25rem 1.25rem;
  min-height: 12rem;
}

.area-6-cards__img {
  display: block;
  max-width: 100%;
  height: auto;
}

.area-6-cards__item--service {
  background: linear-gradient(180deg, #e6f4ff 0%, #d7efff 40%, #dff1ff 100%);
}

.area-6-cards__item--image {
  background: linear-gradient(180deg, #ffe8f1 0%, #ffe1ec 45%, #ffdbe6 100%);
}

.area-6-cards__item--doc {
  background: linear-gradient(180deg, #fff0e2 0%, #ffe7d4 50%, #ffe2ca 100%);
}

.area-6-cards__item--service img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* 卡片 1 机器人与环 */
.area-6-cards__item--service .area-6-cards__media {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 14rem;
}

.area-6-cards__item--service .area-6-cards__img {
  width: 10.5rem;
  z-index: 1;
  filter: drop-shadow(0 0.25rem 0.75rem rgba(0, 0, 0, 0.12));
}

.area-6-cards__ring {
  position: absolute;
  width: 16.5rem;
  height: 16.5rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.area-6-cards__tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 1.125rem;
  background: #ffffff;
  color: #1e293b;
  font-size: 0.8125rem;
  line-height: 1;
  border: 0.0625rem solid #dbeafe;
  box-shadow: 0 0.25rem 0.75rem rgba(126, 203, 255, 0.25);
}

.area-6-cards__tag--tl {
  left: 1rem;
  top: 3.25rem;
}

.area-6-cards__tag--tr {
  right: 1rem;
  top: 2.25rem;
}

.area-6-cards__tag--bl {
  left: 2rem;
  bottom: 2rem;
}

.area-6-cards__tag--br {
  right: 1.25rem;
  bottom: 2.75rem;
}

/* 卡片 2 汉堡与飘散元素 */
.area-6-cards__item--image .area-6-cards__media {
  min-height: 14rem;
}

.area-6-cards__img--burger {
  width: 12.5rem;
  margin: 1rem auto 0;
  filter: drop-shadow(0 0.5rem 1.25rem rgba(0, 0, 0, 0.15));
}

.area-6-cards__piece {
  position: absolute;
  display: block;
}

.area-6-cards__piece--patty {
  width: 5rem;
  left: 1.25rem;
  top: 2.75rem;
  transform: rotate(-6deg);
}

.area-6-cards__piece--lettuce {
  width: 4.5rem;
  right: 2.25rem;
  top: 2.25rem;
}

.area-6-cards__piece--tomato {
  width: 3.25rem;
  right: 2.25rem;
  bottom: 1.75rem;
}

.area-6-cards__dash {
  position: absolute;
}

.area-6-cards__dash--lettuce {
  right: 6.25rem;
  top: 2.75rem;
  opacity: 0.7;
}

/* 卡片 3 文案便签与铅笔 */
.area-6-cards__item--doc .area-6-cards__media {
  min-height: 14rem;
}

.area-6-cards__note {
  position: relative;
  width: 14rem;
  height: 9rem;
  margin: 1rem 5.5rem 0 1.25rem;
}

.area-6-cards__sheet {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  background: #fff3e6;
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1.25rem rgba(255, 167, 107, 0.25);
}

.area-6-cards__sheet--1 {
  width: 11.75rem;
  height: 6.75rem;
  bottom: 0;
}

.area-6-cards__sheet--2 {
  width: 12.5rem;
  height: 7.25rem;
  bottom: 0.5rem;
  opacity: 0.7;
}

.area-6-cards__sheet--3 {
  width: 13.25rem;
  height: 7.75rem;
  bottom: 1rem;
  opacity: 0.45;
}

.area-6-cards__label {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  height: 2rem;
  display: flex;
  align-items: center;
  padding: 0 0.875rem;
  border-radius: 1rem;
  background: #ffffff;
  color: #0f172a;
  font-size: 0.8125rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
}

.area-6-cards__label-bar {
  display: inline-block;
  width: 4.25rem;
  height: 0.3125rem;
  margin-left: 0.5rem;
  border-radius: 0.25rem;
  background: #00d084;
  opacity: 0.45;
}

.area-6-cards__badge {
  position: absolute;
  left: 1rem;
  top: 3.5rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  border-radius: 1.125rem;
  background: #ffffff;
  color: #0f172a;
  font-size: 0.875rem;
  border: 0.0625rem solid #ffd9b8;
  box-shadow: 0 0.25rem 0.75rem rgba(255, 167, 107, 0.25);
}

.area-6-cards__badge-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.area-6-cards__img--pencil {
  position: absolute;
  right: 1rem;
  bottom: 1.25rem;
  width: 7.25rem;
  filter: drop-shadow(0 0.5rem 1.25rem rgba(0, 0, 0, 0.12));
}

/* 交互与动画 */
.area-6-cards__item {
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.area-6-cards__item:hover {
  transform: translateY(-0.125rem);
  /* box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12); */
}


.area-6-cards__img--pencil,
.area-6-cards__piece,
.area-6-cards__tag {
  transition: transform 320ms ease, opacity 320ms ease;
}

.area-6-cards__item--service:hover .area-6-cards__tag--tl {
  transform: translate(-0.125rem, -0.125rem);
}

.area-6-cards__item--service:hover .area-6-cards__tag--tr {
  transform: translate(0.125rem, -0.125rem);
}

.area-6-cards__item--service:hover .area-6-cards__tag--bl {
  transform: translate(-0.125rem, 0.125rem);
}

.area-6-cards__item--service:hover .area-6-cards__tag--br {
  transform: translate(0.125rem, 0.125rem);
}

.area-6-cards__item--image:hover .area-6-cards__piece--patty {
  transform: translateY(-0.25rem) rotate(-8deg);
}

.area-6-cards__item--image:hover .area-6-cards__piece--lettuce {
  transform: translateY(-0.25rem);
}

.area-6-cards__item--image:hover .area-6-cards__piece--tomato {
  transform: translateY(0.25rem);
}

.area-6-cards__item--doc:hover .area-6-cards__img--pencil {
  transform: translate(0.125rem, -0.125rem) rotate(-2deg);
}

/* 导航按钮样式 */
.area-6-cards__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.area-6-cards__btn:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.08);
}

.area-6-cards__btn:active:not(:disabled) {
  transform: translateY(-50%) scale(0.95);
}

.area-6-cards__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f1f5f9;
}

.area-6-cards__btn--prev {
  left: 0;
}

.area-6-cards__btn--next {
  right: 0;
}

/* 响应式布局 */
@media (min-width: 48rem) {

  /* 768px */
  .area-6-cards__media {
    min-height: 15rem;
  }
}

@media (min-width: 64rem) {

  /* 1024px */
  .area-6-cards__header {
    padding: 1.5rem 1.5rem 0.5rem;
  }

  .area-6-cards__title {
    font-size: 1.375rem;
  }

  .area-6-cards__desc {
    font-size: 0.9375rem;
  }
}

@media (min-width: 90rem) {

  /* 1440px+ */
  .area-6-cards {
    max-width: 76rem;
  }

  .area-6-cards__media {
    min-height: 16rem;
  }

  .area-6-cards__img--burger {
    width: 13.5rem;
  }

  .area-6-cards__item--service .area-6-cards__img {
    width: 11.25rem;
  }
}

/* 可访问性与降级 */
.area-6-cards img {
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {

  .area-6-cards__img--pencil,
  .area-6-cards__item,
  .area-6-cards__list,
  .area-6-cards__piece,
  .area-6-cards__tag {
    transition: none;
  }
}

:root {
  --a9c-radius: 12px;
  --a9c-gap: 24px;
  --a9c-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  --a9c-text: #1f2329;
  --a9c-muted: #6b7280;
  --a9c-line: #eef0f3;
  --a9c-green: #22c55e;
  --a9c-basic: #f3f6fb;
  --a9c-pro: #e6fff1;
  --a9c-flagship: #e7f0ff;
  --a9c-enterprise: #fff2cc;
  --a9c-accent: #ff6d3d;
  --a9c-bg: #ffffff;
}

.area-9-cards {
  color: var(--a9c-text);
  padding: 40px 0;
  max-width: 1280px;
  margin: 0 auto;
}

.area-9-cards__tabs {
  display: none;
}

.area-9-cards__title {
  margin: 0 0 20px;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  text-align: center;
}

.area-9-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--a9c-gap);
  align-items: start;
}

.area-9-cards__card {
  background: var(--a9c-bg);
  border-radius: var(--a9c-radius);
  box-shadow: var(--a9c-shadow);
  border: 1px solid var(--a9c-line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 640px;
}

.area-9-cards__card--basic .area-9-cards__stripe {
  background: linear-gradient(90deg, #eef3ff 0%, #e9f0ff 100%);
}

.area-9-cards__card--pro .area-9-cards__stripe {
  background: linear-gradient(90deg, #00d084 0%, #17c964 100%);
}

.area-9-cards__card--flagship .area-9-cards__stripe {
  background: linear-gradient(90deg, #4a7dff 0%, #2a62ff 100%);
}

.area-9-cards__card--enterprise .area-9-cards__stripe {
  background: linear-gradient(90deg, #ffe3a3 0%, #ffd37a 100%);
}

.area-9-cards__header {
  padding: 16px 16px 8px;
}

.area-9-cards__stripe {
  height: 8px;
  border-radius: 0 0 8px 8px;
  margin: -16px -16px 12px;
}

.area-9-cards__card-title {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 800;
  margin: 0 0 6px;
}

.area-9-cards__card-subtitle {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--a9c-muted);
}

.area-9-cards__price {
  display: flex;
  gap: 16px;
  padding: 8px 16px 10px;
  align-items: baseline;
}

.area-9-cards__price-item {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
}

.area-9-cards__price-label {
  font-size: 13px;
  color: var(--a9c-muted);
}

.area-9-cards__price-value {
  font-size: 22px;
  font-weight: 700;
}

.area-9-cards__gallery {
  margin: 0;
  padding: 0 16px 10px;
}

.area-9-cards__gallery-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.area-9-cards__badges {
  display: flex;
  gap: 8px;
  padding: 0 16px 12px;
}

.area-9-cards__badge {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  -o-object-fit: cover;
  object-fit: cover;
}

.area-9-cards__features {
  list-style: none;
  margin: 0;
  padding: 0 16px 6px;
  border-top: 1px dashed var(--a9c-line);
  display: grid;
  gap: 6px;
}

.area-9-cards__feature {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--a9c-text);
}

.area-9-cards__feature-name {
  color: var(--a9c-muted);
}

.area-9-cards__ticks {
  list-style: none;
  margin: 0;
  padding: 8px 16px 12px;
  display: grid;
  gap: 6px;
}

.area-9-cards__tick {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  color: var(--a9c-text);
}

.area-9-cards__check {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #22c55e 0 48%, transparent 48%);
}

.area-9-cards__check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 5px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.area-9-cards__cta-group {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 16px 16px;
  margin-top: auto;
}

.area-9-cards__cta {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid var(--a9c-line);
  background: #fff;
  color: var(--a9c-text);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all .2s;
  flex: 1;
  text-align: center;
}

.area-9-cards__cta:hover {
  background: #f9fafb;
}

.area-9-cards__cta--accent {
  background: var(--a9c-accent);
  border-color: var(--a9c-accent);
  color: #fff;
}

.area-9-cards__cta--accent:hover {
  background: #e65225;
  border-color: #e65225;
}

.area-9-cards__meta {
  font-size: 12px;
  color: var(--a9c-muted);
  white-space: nowrap;
}

/* Enterprise Card Specifics */
.area-9-cards__kpi {
  padding: 16px;
}

.area-9-cards__kpi-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--a9c-text);
  margin-bottom: 16px;
}

.area-9-cards__kpi-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.area-9-cards__kpi-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

.area-9-cards__kpi-step {
  color: #d4a373;
  font-weight: 700;
  font-size: 16px;
}

/* Benefits Section - Revised for Pixel Perfection */
.area-9-cards__benefits {
  margin-top: 40px;
  position: relative;
  width: 1236px;
  margin-left: auto;
  margin-right: auto;
  /* border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
  background: #fff; */
}

.area-9-cards__benefits-header {
  height: 73px;
  background-image: url(https://web.yayuit.cn/app-page/jindengta/images/area9/benefits-header.svg);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px 8px 0 0;
}

.area-9-cards__benefits-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(90deg, #be5a2b 0%, #6b2919 32.08%, #e7743f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 1px;
}

.area-9-cards__benefits-body {
  padding: 40px 20px 50px;
  display: flex;
  align-items: stretch;
  background: #fff;
}

.area-9-cards__benefits-col {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.area-9-cards__benefits-col--wide {
  flex: 1.6;
}

.area-9-cards__benefits-divider-1 {
  margin: 0 16px 0 0px;
}

.area-9-cards__benefits-divider-1,
.area-9-cards__benefits-divider-2 {
  width: 1px;
  background-image: linear-gradient(to bottom, #e2e5f3 50%, transparent 50%);
  background-size: 1px 8px;
  align-self: stretch;
}

.area-9-cards__benefits-divider-2 {
  margin: 0 16px;
}

.area-9-cards__benefits-head {
  margin: 0 0 24px;
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(90deg, #be5a2b 0%, #6b2919 32.08%, #e7743f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
}

.area-9-cards__benefits-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-content: flex-start;
  justify-content: left;
}

.area-9-cards__benefits-list+.area-9-cards__benefits-list {
  margin-top: 16px;
}

.area-9-cards__tag {
  background: rgba(199, 127, 79, 0.05);
  border-radius: 8px;
  color: #cb6524;
  font-size: 16px;
  font-weight: 500;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 71px;
  height: 60px;
}

.area-9-cards__tag--wide {
  width: 122px;
}

.area-9-cards__tag--multiline {
  line-height: 1.2;
  text-align: center;
  font-size: 14px;
}

.area-9-cards__benefits-list--col3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.area-9-cards__complex-tag {
  background: rgba(199, 127, 79, 0.05);
  border-radius: 8px;
  width: 144px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.area-9-cards__complex-title {
  color: #cb6524;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

.area-9-cards__complex-desc {
  color: #6b6c6f;
  font-size: 12px;
  line-height: 1;
}

/* Card Image Hover Effect */
.area-9-cards__card img {
  transition: transform 0.3s ease-in-out;
  display: block;
  width: 100%;
}

.area-9-cards__card img:hover {
  transform: translateY(-10px);
}

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

  .area-9-cards__benefits-body {
    flex-direction: column;
    padding: 24px;
  }

  .area-9-cards__benefits-divider {
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right, #e2e5f3 50%, transparent 50%);
    margin: 24px 0;
  }

  .area-9-cards__benefits-list--col3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .area-9-cards__benefits-list {
    justify-content: flex-start;
  }

  .area-9-cards__benefits-list--col3 {
    grid-template-columns: 1fr;
  }

  .area-9-cards__complex-tag {
    width: 100%;
  }
}

/* Footer Component - BEM */
.footer {
  background: #1e242d;
  width: 100%;
  position: relative;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
}

.footer__main {
  display: flex;
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 81px 77px 99px;
  position: relative;
}

/* Left Column */
.footer__brand {
  /* flex: 0 0 246px; */
  display: flex;
  flex-direction: column;
}

.footer__logo-img {
  width: 246px;
  height: 78px;
  -o-object-fit: contain;
  object-fit: contain;
}

.footer__tagline {
  margin-top: 26px;
  font-size: 12px;
  line-height: 17px;
  color: #c3c4c5;
}

/* Divider */
.footer__divider {
  width: 1px;
  height: 119px;
  background-color: rgba(255, 255, 255, 0.15);
  margin: 0 48px;
  align-self: center;
}

/* Middle Columns */
.footer__nav-group {
  display: flex;
  gap: 48px;
}

.footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.footer__nav-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: #ffffff;
  margin-bottom: 4px;
}

.footer__nav-link {
  font-size: 14px;
  line-height: 20px;
  color: #c3c4c5;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer__nav-link:hover {
  color: #ffffff;
}

/* Right Column */
.footer__contact {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  max-width: 283px;
}

.footer__contact-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: #ffffff;
  margin-bottom: 13px;
}

.footer__phone-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.footer__phone-icon-bg {
  width: 28px;
  height: 28px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__phone-icon {
  width: 20px;
  height: 20px;
}

.footer__phone-number {
  font-size: 22px;
  font-weight: 500;
  line-height: 22px;
  color: #ffffff;
  font-family: Inter, sans-serif;
}

.footer__address {
  font-size: 14px;
  line-height: 22px;
  color: #c3c4c5;
  margin: 0;
}

/* 3D Character Illustration */
.footer__character {
  position: absolute;
  top: -44px;
  right: 389px;
  /* 1440 - 893 - 158 = 389 approx from figma left:893 */
  width: 158px;
  height: 322px;
  pointer-events: none;
  z-index: 10;
}

/* Bottom Bar */
.footer__bottom {
  background: #181d24;
  width: 100%;
  padding: 35px 0;
  text-align: center;
}

.footer__copyright {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: #989898;
  margin: 0;
  font-family: Inter, sans-serif;
}

/* Responsive */
@media (max-width: 1200px) {
  .footer__character {
    display: none;
  }

  .footer__main {
    padding: 60px 40px;
  }

  .footer__contact {
    margin-left: 48px;
  }
}

@media (max-width: 992px) {
  .footer__main {
    flex-wrap: wrap;
    gap: 40px;
  }

  .footer__divider {
    display: none;
  }

  .footer__contact {
    margin-left: 0;
    flex: 0 0 100%;
  }
}

@media (max-width: 768px) {
  .footer__main {
    padding: 40px 20px;
  }

  .footer__nav-group {
    flex-wrap: wrap;
    gap: 30px;
  }
}