/* 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;
    padding: 0;
    border-radius: 0; /* Consistent with request */
}

.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;
    padding: 0;
    border-radius: 0;
}

.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;
    width: 100%;
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

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

.logo-img {
    height: 40px; /* Adjust as needed */
    width: auto;
    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 {
    color: var(--primary-orange-solid);
}

.main-nav a:hover, .main-nav a.active {
    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 Section */
.hero-section {
    /* position: relative; */
    /* Dimensions from prototype */
    width: 1440px;
    height: 400px;
    /* Padding updated: 88px top, 890px right, 89px bottom, 80px left */
    /* This creates the space for content on left and leaves room for illustration on right */
    padding: 88px 890px 89px 80px; 
    background-color: #f3f4f7;
    background-image: url("https://web.yayuit.cn/app-page/jindengta/html/images/hero_illustration.png"); /* The full background image */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column; /* Content is stacked vertically: Title, Desc, Button */
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0 auto; /* Center the section */
    overflow: hidden;
    box-sizing: border-box;
}

/* ... existing code ... */

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%; /* Width is constrained by padding-right 890px */
    padding: 0;
}

.hero-title {
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
    font-weight: 600;
    color: #070c20;
    font-size: 48px;
    line-height: 67px;
    letter-spacing: 0;
    margin-bottom: 6px; /* 6px spacing to desc */
    /* width: 288px;  Let width be auto to avoid wrapping if font rendering differs slightly */
    white-space: nowrap;
}

.hero-desc {
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #414b61;
    line-height: 26px;
    letter-spacing: 0;
    width: 470px; /* Fixed width from prototype */
    margin-top: 0;
    margin-bottom: 0;
}

.hero-actions {
    margin-top: 58px; /* 58px margin-top from prototype */
    display: flex;
    /* align-self: stretch;  Not needed if button has specific width */
}

/* Button styles override for this section */
.hero-actions .btn-primary {
    /* Styles from rectangle2 */
    width: 160px; /* Assuming 160px width for "Immediate Registration" based on previous context, prototype says padding 9px 44px */
    /* Prototype: padding: 9px 44px; */
    height: 40px;
    background-image: linear-gradient(90deg, #ffb221 0%, #fa6f02 100%);
    box-shadow: 0px 10px 10px 0px rgba(251, 124, 8, 0.2); /* #fb7c0833 */
    border-radius: 0; /* Assuming rectangle based on "rectangle2" name and lack of radius in provided CSS snippet */
    
    font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #ffffff;
    line-height: 22px;
    font-weight: 400;
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hero-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0px 15px 20px 0px rgba(251, 124, 8, 0.3);
    filter: brightness(1.05);
}

/* ... responsive ... */

@media (max-width: 1440px) {
    .hero-section {
        width: 100%;
        background-position: center;
        padding-left: 5%;
        padding-right: 5%;
    }
}

@media (max-width: 768px) {
    .hero-section {
        height: auto;
        padding: 40px 20px;
        flex-direction: column;
        background-size: cover;
        background-position: right center;
    }
    
    .hero-content {
        align-items: center;
        text-align: center;
    }
    
    .hero-title {
        width: auto;
        height: auto;
        font-size: 36px;
        line-height: 1.2;
    }
    
    .hero-desc {
        width: 100%;
        margin-top: 16px;
    }
}   position: relative;
}

.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;
}

.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); */

}

.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 th, .mock-table td {
    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 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 60px;
    align-items: center;
    padding: 0 40px;
}

.partner-logo {
    display: flex;
    align-items: center;
    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-size: 14px;
    color: var(--text-light);
    font-weight: 400;
    vertical-align: middle;
}

.pricing-users {
    font-size: 14px;
    color: var(--text-light);
    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-header, .swimlane-body {
        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 {
        justify-content: center;
    }
    
    .hero-stats {
        justify-content: center;
    }
    
    .hero-visual {
        width: 100%;
        justify-content: center;
    }
    
    .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;
    }
    
    .feature-cards-grid, .scenario-cards-grid, .pricing-cards-grid, .app-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;
    }
    
    .feature-cards-grid, .scenario-cards-grid, .pricing-cards-grid, .app-grid {
        grid-template-columns: 1fr;
    }
    
    .finance-container {
        flex-direction: column;
    }
    
    .pricing-benefits {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .swimlane-header, .swimlane-body {
        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; }
: auto;
    margin-right: auto;
}

.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 th, .mock-table td {
    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 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 60px;
    align-items: center;
    padding: 0 40px;
}

.partner-logo {
    display: flex;
    align-items: center;
    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-size: 14px;
    color: var(--text-light);
    font-weight: 400;
    vertical-align: middle;
}

.pricing-users {
    font-size: 14px;
    color: var(--text-light);
    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-header, .swimlane-body {
        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 {
        justify-content: center;
    }
    
    .hero-stats {
        justify-content: center;
    }
    
    .hero-visual {
        width: 100%;
        justify-content: center;
    }
    
    .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;
    }
    
    .feature-cards-grid, .scenario-cards-grid, .pricing-cards-grid, .app-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;
    }
    
    .feature-cards-grid, .scenario-cards-grid, .pricing-cards-grid, .app-grid {
        grid-template-columns: 1fr;
    }
    
    .finance-container {
        flex-direction: column;
    }
    
    .pricing-benefits {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .swimlane-header, .swimlane-body {
        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('https://web.yayuit.cn/app-page/jindengta/html/images/hero_illustration.png') no-repeat;
    background-size: 100% 100%;
    padding: 0 72px 80px;
    min-height: 472px;
    margin: 72px auto 0;
    .hero-container {
        padding-top: 88px;
    }
}
.process-diagram-card-img {
   max-width: 1264px;
   max-height: 1062px;
}
.area-3-title{
    font-family: PingFang SC;
    font-weight: 500;
    font-style: Medium;
    font-size: 26px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
}
.area-3-subtitle{
    font-family: PingFang SC;
    font-weight: 400;
    font-style: Regular;
    font-size: 13px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    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;
    height: 500px;
    background: #ffffff;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: hidden;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
}

/* Left Visual Area */
.area-4-cards__visual {
    width: 400px;
    height: 500px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.area-4-cards__visual-img {
    width: 100%;
    height: 100%;
    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 40px;
    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;
    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: #ffb058; --brand-2: #ff7a1a; --shadow: 0 6px 24px rgba(15, 23, 42, .08); --blur: 22px; --trans: 280ms cubic-bezier(.2,.6,.2,1); position: relative; width: 100%; }
.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); }
@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; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* Tabs */
.area-5-cards__tabs { display: flex; flex-direction: column; gap: 12px; }
.area-5-cards__tab { height: var(--tab-h); display: grid; grid-template-columns: 18px 18px 1fr; align-items: center; padding: 0 20px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-size: 18px; color: var(--muted); letter-spacing: .2px; transition: transform var(--trans), box-shadow var(--trans), color var(--trans), background var(--trans), border-color var(--trans), opacity var(--trans); text-align: left; }
.area-5-cards__tab-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.area-5-cards__tab-sep { color: #c6cbd3; text-align: center; }
.area-5-cards__tab-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.area-5-cards__tab:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.08); color: #3a3f45; }
.area-5-cards__tab:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.area-5-cards__tab[disabled] { opacity: .5; cursor: not-allowed; }
.area-5-cards__tab--active { background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); color: #fff; border-color: transparent; box-shadow: 0 10px 28px rgba(255, 122, 26, .35); }

/* 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: 384px; 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%; 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;  box-shadow: 0 14px 40px rgba(15,23,42,.18); 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; }
.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--prev::before, .area-5-cards__btn--next::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; }
  .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; }
  .area-5-cards__device { max-width: 92%; }
}
/* --- area-6-cards.css --- */
: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 */
}
.area-6-cards__list{display:grid;grid-template-columns:1fr;gap:1rem; transition: transform 0.5s ease-in-out;}
.area-6-cards__item{width: 440px;height: 440px;position:relative;border-radius:var(--a6-radius);box-shadow:var(--a6-shadow);overflow:hidden;background:#f6f7f9}
.area-6-cards__header{padding:1.25rem 1.25rem 0.5rem 1.25rem}
.area-6-cards__title{margin:0 0 0.5rem 0;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 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%;
    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 auto;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__tag,.area-6-cards__piece,.area-6-cards__img--pencil{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__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 1.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__item,.area-6-cards__tag,.area-6-cards__piece,.area-6-cards__img--pencil,.area-6-cards__list{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: 32px;
  font-weight: 500;
  color: var(--a7-black);
  line-height: 1.4;
  margin: 0;
  display: flex;
  align-items: baseline;
}

.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: 4px;
  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 { width: 90px; }
.area-7-cards__icon--djcp { width: 90px; }
.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 {
    font-size: 24px;
  }
  .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;
  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: 80%;
  height: 48px;
  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 --- */
: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__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 -16px;
}

.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;
  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 {
  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: 1280px;
  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/html/images/area9/benefits-header.svg");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.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 {
  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__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: 83px;
  height: 60px;
}

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

.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%;
  }
}

/* --- 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%;
  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 */
.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;
  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;
  }
}