/* 基础设置 */
:root {
    --primary: #3355ff;
    --primary-dark: #2244ee;
    --secondary: #3355ff;
    --dark: #030303;
    --light: #f8f9fa;
    --text: #333;
    --text-light: #666;
    --border: #e1e4e8;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --transition: all 0.3s ease;
}

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

html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    position: relative;
    scroll-behavior: smooth;
}

body {
    font-family: 'Jost', sans-serif;
    color: var(--text);
    line-height: 1.6;
    background-color: #fff;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

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

ul {
    list-style: none;
}

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

/* Base section title style */
.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 0;
    color: #333333;  /* Default color for light backgrounds */
    font-weight: 400;
    letter-spacing: -0.02em;
    position: relative;
    display: inline-block;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 15px;
}

/* White text for dark background sections */
.white-text {
    color: #F5F5F5;
    text-align: center; 
}

/* White text for dark background sections */
.techs-advantages-section .section-title,
.analyzing-process-section .section-title {
    color: white;
}

/* Benefits section specific title style */
.benefits-section .section-title {
    color: #185CE4;
    font-size: 48px;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 0;  /* Remove padding for underline */
}

/* Remove underline for Benefits section title */
.benefits-section .section-title::after {
    display: none;
}

/* Blue text for specific sections */
.solution-2-introducing-tool .section-title,
.kpi-visualization-section .section-title {
    color: #185CE4;
}

/* Dark text for light background sections */
.solution-2-problems .section-title,
.case-studies-section .section-title,
.ui-mockup-section .section-title {
    color: #333333;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 65%;
    height: 2px;
    background-color: var(--secondary);
}

.section-title.no-underline::after {
    display: none;
}

.highlight {
    color: var(--primary);
    position: relative;
}

.highlight::after {
    display: none;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 6px;
    font-weight: 500;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    font-size: 1rem;
    letter-spacing: 0.03em;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
    box-shadow: 0 4px 15px rgba(51, 85, 255, 0.3);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(51, 85, 255, 0.4);
}

.btn-secondary {
    background-color: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.btn-secondary:hover {
    background-color: var(--primary);
    color: white;
    transform: translateY(-3px);
}

/* 导航栏 */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(14px);
    padding: 15px 0;
    transition: all 0.3s ease;
}

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

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

.logo img.logo-default {
    display: block;
    height: 40px;
    margin-right: 10px;
}

.logo img.logo-scrolled {
    display: none;
    height: 40px;
    margin-right: 10px;
}

.logo span {
    font-weight: 600;
    color: white;
    font-size: 1.1rem;
}

nav ul {
    display: flex;
    gap: 30px;
}

nav a {
    color: white;
    font-weight: 500;
    transition: var(--transition);
    padding-bottom: 5px;
    position: relative;
    letter-spacing: 0.01em;
}

nav a:hover, nav a.active {
    color: var(--primary);
}

nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary);
    transition: var(--transition);
    opacity: 0;
}

nav a:hover::after, nav a.active::after {
    width: 100%;
    opacity: 1;
}

.nav-toggle {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: white;
    transition: var(--transition);
}

/* 滚动时的导航栏样式 */
header.scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 滚动时的文字颜色 */
header.scrolled .logo span {
    color: var(--dark);
}

header.scrolled nav a {
    color: var(--text);
}

header.scrolled nav a:hover,
header.scrolled nav a.active {
    color: var(--primary);
}

/* 滚动时导航栏图标的颜色 */
header.scrolled .nav-toggle {
    color: var(--primary);
}

/* 英雄区域 */
.hero {
    padding: 120px 0 80px;
    position: relative;
    overflow: visible;
    background-color: transparent;
    min-height: 65vh;
    display: flex;
    align-items: center;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-image: url('files/img/Homepage/bg_homepage.jpg');
    background-size: cover;
    background-position: bottom center;
    z-index: -1;
    opacity: 1;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    position: relative;
    width: 100%;
    overflow: visible;
    max-width: 1200px;
}

.hero-content {
    flex: 1;
    position: relative;
    z-index: 2;
    max-width: 50%;
    padding-right: 20px;
}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
    max-width: 50%;
    overflow: visible;
}

.hero-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    padding-left: auto;
    position:relative;
    left: 30%;
}

.hero h1 {
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 20px;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.01em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero h1 .second-line {
    display: flex;
    align-items: center;
    margin-top: 5px;
    white-space: nowrap;
}

.hero h1 .ai-img {
    height: 60px;
    transform: scale(1.5);
    transform-origin: left;
    margin:0 0 28px 15px;
    vertical-align: middle;
}

.hero p {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 40px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.hero .highlight {
    color: var(--secondary);
}

.hero .highlight::after {
    display: none;
}

/* 关于我们 */
.about {
    padding: 100px 0;
    background-color: white;
}

.typing-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
}

.illustration-container {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

.illustration-image {
    max-width: 80%;
    height: auto;
}

.typing-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 0 10%;
}

.typingtext01 {
    position: relative;
    backdrop-filter: blur(60px);
    border-radius: 200px;
    background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), rgba(115, 161, 255, 0.4);
    width: auto;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    box-sizing: border-box;
    text-align: center;
    font-size: 36px;
    color: #1865ff;
    font-family: Jost;
    margin: 0 auto;
}

.typing-content::after {
    content: '|';
    animation: blink 1s infinite;
}

.typing-complete .typing-content::after {
    display: none;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.about-cards {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}

.about-card {
    flex: 1;
    max-width: 400px;
    padding: 40px;
    border-radius: 20px;
    background-color: var(--light);
    box-shadow: var(--shadow);
    text-align: center;
    transition: var(--transition);
}

.about-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.about-card p {
    font-size: 1.2rem;
    color: var(--text);
}

.about-partners {
    width: 100%;
    position: relative;
    background-color: #f5f6f5;
    height: 149px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.about-partners p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: center;
    max-width: 1000px;
}

.about-more-btn {
    text-align: center;
    margin-top: 30px;
}

.highlight-blue {
    color: #1865FF;
    font-weight: 600;
}

/* 挑战 */
.challenges {
    padding: 100px 0;
    background-color: var(--light);
}

.challenge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
}

.challenge-card {
    background-color: #F1F6FD;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    position: relative;
    padding-bottom: 20px;
}

.challenge-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.challenge-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.challenge-icon {
    position: absolute;
    left: 50%;
    top: 180px;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.challenge-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.challenge-content {
    padding-top: 60px;
    text-align: center;
}

.challenge-card h3 {
    padding: 0 20px 10px;
    font-size: 1.3rem;
    color: var(--dark);
    margin-top: 0;
}

.challenge-card p {
    padding: 0 20px 0;
    font-size: 0.95rem;
    color: #555555;
    line-height: 1.6;
}

/* 解决方案 */
.solutions {
    padding: 100px 0;
    background-color: white;
}

.solution-item {
    display: flex;
    align-items: center;
    margin-bottom: 80px;
    gap: 50px;
}

.solution-item.reverse {
    flex-direction: row-reverse;
}

.solution-content {
    flex: 1;
}

.solution-image {
    flex: 1;
    text-align: center;
}

.solution-content h3 {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 20px;
    font-weight: 600;
}

.solution-content p {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 30px;
}

/* 资源 */
.resources {
    padding: 100px 0;
    background-color: var(--light);
    overflow: hidden;
}

/* Carousel Container */
.resources-carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 50px;
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

/* Track containing all items (original + duplicated) */
.resources-track {
    display: flex;
    /* Calculate width: (Item Width + Right Margin) * Total Items */
    /* Example: (250px + 20px) * 20 items = 5400px */
    width: calc((250px + 20px) * 20);
    animation: scroll 45s linear infinite;
}

.resources-carousel-container:hover .resources-track {
    animation-play-state: paused;
}

/* Individual resource item */
.resource-item {
    width: 250px; /* Fixed width for each item */
    aspect-ratio: 4 / 3; /* Maintain aspect ratio */
    flex-shrink: 0; /* Prevent items from shrinking */
    margin-right: 20px; /* Space between items */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
    position: relative; /* Needed for overlay if re-enabled */
    transition: transform 0.3s ease;
}

.resource-item:hover {
     transform: translateY(-5px);
}

/* Resource content wrapper */
.resource-content {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Resource image container */
.resource-image {
    width: 100%;
    height: 100%;
}

/* Resource image itself */
.resource-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container */
    display: block; /* Remove extra space */
}

/* Resource overlay (Hidden by default as requested) */
.resource-overlay {
    display: none; /* Hide overlay */
    /* Original overlay styles below if needed later */
    /* 
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    color: white;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    */
}

/* Styles for overlay content if re-enabled */
/*
.resource-item:hover .resource-overlay {
    opacity: 1;
    transform: translateY(0);
}
.resource-overlay h3 { ... }
.resource-overlay p { ... }
.resource-btn { ... }
*/

/* Infinite scroll animation */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Translate left by the width of the original 10 items + their margins */
        /* (250px item width + 20px margin) * 10 items = 2700px */
        transform: translateX(-2700px); 
    }
}

/* Remove old grid and floating animation styles */
/* 
.resources-grid { ... }
.resource-item { ... animation: resourceFloat ... }
@keyframes resourceFloat { ... }
*/

@media (max-width: 992px) {
    .resources-track {
        /* Adjust item width and recalculate track width if needed */
        width: calc((220px + 15px) * 20); /* Example adjustment */
        animation-duration: 40s;
    }
    .resource-item {
        width: 220px;
        margin-right: 15px;
    }
    @keyframes scroll {
        100% {
            transform: translateX(calc(-1 * (220px + 15px) * 10)); /* Recalculate translation */
        }
    }
}

@media (max-width: 768px) {
     .resources-carousel-container {
        -webkit-mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent);
        mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent);
    }
    .resources-track {
        width: calc((180px + 10px) * 20); /* Example adjustment */
        animation-duration: 35s;
    }
    .resource-item {
        width: 180px;
        margin-right: 10px;
    }
     @keyframes scroll {
        100% {
            transform: translateX(calc(-1 * (180px + 10px) * 10)); /* Recalculate translation */
        }
    }
}

@media (max-width: 480px) {
    .resources-track {
        width: calc((150px + 10px) * 20); /* Example adjustment */
        animation-duration: 30s;
    }
    .resource-item {
        width: 150px;
        margin-right: 10px;
    }
     @keyframes scroll {
        100% {
            transform: translateX(calc(-1 * (150px + 10px) * 10)); /* Recalculate translation */
        }
    }
}


/* 联系我们 */
.contact {
    padding: 100px 0;
    background-color: white;
}

.contact-container {
    display: flex;
    gap: 50px;
}

.contact-info {
    flex: 1;
}

.contact-form {
    flex: 1;
}
.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.contact-item i {
    font-size: 1.5rem;
    color: var(--primary);
    margin-right: 20px;
    margin-top: 5px;
}

.contact-icon {
    width: 36px;
    height: 36px;
    margin-right: 20px;
    margin-top: 0;
    object-fit: contain;
}

.contact-item p {
    color: var(--text);
    font-size: 1.1rem;
    margin: 0;
}

.form-group {
    margin-bottom: 20px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(51, 85, 255, 0.1);
}

/* 页脚 */
footer {
    background-color: #3A3E3E;
    color: white;
    padding: 50px 0 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 50px;
}

.footer-logo {
    margin-right: 64px;
}

.footer-logo img {
    height: 60px;
}

.footer-nav {
    flex: 1;
    margin-right: 64px;
}

.footer-main-nav {
    display: flex;
    gap: 30px;
    margin-top: 10px;
}

.footer-nav ul li a {
    color: white;
    font-size: 1rem;
    transition: var(--transition);
    position: relative;
    display: block;
}

.footer-nav ul li a:hover {
    color: var(--primary);
    transform: translateY(-2px);
}

/* Footer dropdown menu */
.footer-dropdown {
    position: relative;
}

.footer-dropdown-menu {
    display: none;
    flex-direction: column;
    padding-top: 15px;
    padding-left: 0;
    gap: 10px;
}

.footer-dropdown:hover .footer-dropdown-menu {
    display: flex;
}

.footer-dropdown-menu li a {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    padding: 5px 0;
    transition: all 0.2s ease;
}

.footer-dropdown-menu li a:hover {
    color: var(--primary);
    padding-left: 5px;
}

.footer-contact {
    min-width: 280px;
}

.footer-contact h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 15px;
    letter-spacing: 0.05em;
}

.footer-contact p {
    font-size: 1rem;
    color: white;
    margin-bottom: 10px;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    color: white;
    transition: var(--transition);
    font-size: 1.2rem;
}

.social-links a:nth-child(1) {
    background-color: #1877F2;
}

.social-links a:nth-child(2) {
    background-color: #25D366;
}

.social-links a:nth-child(3) {
    background-color: #FF0000;
}

.social-links a:nth-child(4) {
    background-color: #0A66C2;
}

.social-links a:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.footer-bottom {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.footer-bottom p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 992px) {
    .footer-content {
        flex-wrap: wrap;
    }
    
    .footer-logo {
        margin-right: 0;
        width: 100%;
        text-align: center;
    }
    
    .footer-nav {
        margin-right: 30px;
    }
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 30px;
    }
    
    .footer-nav {
        width: 100%;
        margin-right: 0;
    }
    
    .footer-main-nav {
        flex-direction: column;
        gap: 15px;
    }
    
    .footer-dropdown-menu {
        position: static;
        padding-left: 20px;
    }
    
    .footer-contact {
        width: 100%;
    }
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .hero h1 {
        font-size: 3rem;
    }
    
    .section-title {
        font-size: 2.2rem;
    }
    
    .solution-content h3 {
        font-size: 1.6rem;
    }
}

@media (max-width: 992px) {
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero h1 .ai-img {
        height: 48px;
        margin-top: 12px
    }
}

@media (max-width: 768px) {
    nav ul {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: white;
        padding: 20px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        z-index: 999;
    }
    
    nav ul.show {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    nav ul li {
        width: 100%;
    }
    
    nav ul li a {
        display: block;
        padding: 10px 0;
        color: var(--text);
        font-size: 1.1rem;
    }
    
    .nav-toggle {
        display: block;
    }
    
    .hero {
        padding: 120px 0 80px;
        min-height: auto;
    }
    
    .hero .container {
        flex-direction: column;
    }
    
    .hero-content {
        max-width: 100%;
        padding-right: 0;
        text-align: center;
    }
    
    .hero-image {
        max-width: 100%;
        justify-content: center;
        margin-top: 40px;
    }
    
    .hero-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
        position:relative;
        left: 0;
    }
    
    .about-cards {
        flex-direction: column;
        align-items: center;
    }
    
    .solution-item,
    .solution-item.reverse {
        flex-direction: column;
    }
    
    .contact-container {
        flex-direction: column;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 40px;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 30px;
    }
    
    .hero::before {
        width: 100%;
    }
    
    .hero h1 {
        font-size: 2.2rem;
        align-items: center;
    }
    
    .hero h1 .second-line {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .hero h1 .ai-img {
        height: 48px;
        margin-left: 5px;
    }
    
    /* 移动端下拉菜单样式 */
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: hidden;
        transform: none;
        box-shadow: none;
        min-width: 100%;
        padding: 0;
        margin: 0;
        display: none;
        background-color: rgba(51, 85, 255, 0.05);
        border-left: none;
    }
    
    .dropdown-menu::before {
        display: none;
    }
    
    .dropdown.open .dropdown-menu {
        visibility: visible;
        display: block;
    }
    
    .dropdown-menu li a {
        padding: 8px 20px;
        font-size: 1rem;
        border-left: none;
    }
    
    .dropdown-menu li a:hover {
        background-color: rgba(51, 85, 255, 0.1);
        color: var(--primary);
        padding-left: 20px;
    }
    
    .dropdown > a::after {
        content: '';
        display: inline-block;
        margin-left: 6px;
        vertical-align: middle;
        border-top: 4px solid currentColor;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        transition: transform 0.2s ease;
    }
    
    .dropdown.open > a::after {
        transform: rotate(180deg);
    }
    
    .typing-overlay {
        padding: 0 5%;
    }
    
    .typingtext01 {
        font-size: 24px;
        padding: 6px 16px;
    }
    
    .illustration-image {
        max-width: 100%;
    }
    
    .about-partners {
        height: auto;
        min-height: 149px;
        padding: 15px;
    }
    
    .about-partners p {
        font-size: 1rem;
    }
    
    .section-title {
        width: 90%;
        max-width: 90%;
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.5rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .hero-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
        position:relative;
        left: 0;
    }
    
    .hero h1 .ai-img {
        height: 34px;
        margin-top: 12px
    }
    
    .btn {
        padding: 10px 25px;
        border-radius: 6px;
    }
    
    .typingtext01 {
        font-size: 18px;
        padding: 5px 12px;
        border-radius: 100px;
    }
    
    .about-partners p {
        font-size: 0.9rem;
    }
}

/* Dropdown Menu Styles */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    min-width: 320px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

/* Add dropdown indicator triangle */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu li {
    margin: 0;
    width: 100%;
}

.dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    color: var(--text);
    font-size: 0.9rem;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-menu li a:hover {
    background-color: rgba(51, 85, 255, 0.05);
    color: var(--primary);
    border-left: 3px solid transparent;
}

/* 添加下划线效果，与其他导航项一致 */
.dropdown-menu li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary);
    transition: var(--transition);
    opacity: 0;
}

.dropdown-menu li a:hover::after {
    width: 100%;
    opacity: 1;
}

/* Fix dropdown indicator */
.dropdown > a::after {
    content: none;
}

/* Logo切换样式 */
header.scrolled .logo img.logo-default {
    display: none;
}

header.scrolled .logo img.logo-scrolled {
    display: block;
}

@media (min-width: 769px) {
.hero-image {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 50%;
        max-width: none;
    }
    
.hero-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
        position:relative;
        left: 25%;
    }
}

.typing-line {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

.typing-line:last-child {
    margin-bottom: 0;
}

/* About page styles */
/* Common/general styles moved from about.html */

/* Partners section */
.partners-section {
    padding: 100px 0;
    text-align: center;
    background-color: #f8f9fa; /* Light background for the section */
}

.partners-section .section-title {
    margin-bottom: 60px; /* Increased space below title */
}

.partners-grid {
    display: grid; /* Use grid layout */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Responsive columns */
    justify-content: center;
    gap: 30px; /* Gap between items */
    max-width: 1000px; /* Limit overall width */
    margin: 0 auto; /* Center the grid */
}

.partner-item {
    /* width: 220px; */ /* Remove fixed width, let grid handle it */
    /* height: 120px; */ /* Remove fixed height */
    aspect-ratio: 3 / 2; /* Maintain aspect ratio */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 8px; /* Slightly smaller radius */
    background-color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); /* Subtle shadow */
    transition: all 0.3s ease;
    border: 1px solid #e0e8f3;
}

.partner-item:hover {
    transform: translateY(-5px); /* Keep subtle hover effect */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.partner-item img {
    max-width: 80%; /* Limit logo size within the box */
    max-height: 80%;
    object-fit: contain; /* Ensure logo fits */
    /* filter: grayscale(100%); */ /* Grayscale removed previously */
    transition: all 0.3s ease;
}

/* .partner-item:hover img { ... } */ /* Hover filter removed previously */

/* Stats Section Styles */
.stats-section {
    background-color: #ffffff;
    padding: 20px 0 20px 0;
    text-align: center;
    margin-bottom: -20px;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.05);
}

.stats-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0 auto;
    max-width: 1000px;
}

.stat-item {
    flex: 1;
    padding: 20px 10px;
    position: relative;
}

.stat-divider {
    width: 1px;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.1);
    margin: 0;
}

.stat-number {
    font-size: 48px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    position: relative;
}

.stat-text {
    font-size: 16px;
    color: #777;
    line-height: 1.4;
    font-weight: 400;
}

/* About page responsive styles */
@media (max-width: 992px) {
    .stats-grid {
        flex-wrap: wrap;
    }
    
    .stat-divider {
        display: none;
    }
    
    .stat-item {
        min-width: 40%;
        margin-bottom: 30px;
    }
    
    .partners-grid {
        gap: 40px;
        justify-content: center;
    }
    
    .partner-item {
        width: 200px;
        height: 110px;
    }
}

@media (max-width: 768px) {
    .stats-grid {
        flex-direction: column;
    }
    
    .stat-item {
        width: 100%;
        min-width: 100%;
    }
    
    /* Mobile styles for partners */
    .partners-grid {
        grid-template-columns: 1fr; /* Single column */
        gap: 20px; /* Adjust gap for mobile */
        max-width: 450px; /* Limit width on mobile */
        margin: 0 auto; /* Center the grid container */
        justify-items: center;
    }
    
    .partner-item {
        aspect-ratio: auto; /* Remove aspect ratio */
        padding: 15px 30px; /* Adjust padding for rectangular shape */
        min-height: 100px; /* Ensure minimum height */
        width: 100%; /* Ensure item takes full width of the grid column */
        box-sizing: border-box; /* Include padding in width calculation */
    }
    /* End mobile partners styles */
    
    .partner-item {
        width: 160px;
        height: 100px;
    }
}

/* ============================== */
/* Styles for Solution 1 Page     */
/* ============================== */

.solution-hero {
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
    background-color: #030303; /* Dark background */
    color: white;
}

.solution-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('files/img/Solution_1/Intro/bg_Section_HeroActions.png'); /* Specific background */
    background-size: 150%; /* Enlarged by 1.5 times */
    background-position: right center; /* Horizontally right, vertically centered */
    opacity: 0.3; /* Adjust opacity as needed */
    z-index: 1;
}

.solution-hero .container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 20px 10px 20px;
}

.solution-hero-content {
    flex: 1;
    max-width: 55%;
}

.solution-hero-content .solution-tag {
    display: inline-block;
    background-color: rgba(51, 85, 255, 0.08); /* More transparent background */
    color: var(--primary);
    padding: 6px 18px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 15px;
    position: relative;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.03em;
    transition: all 0.3s ease;
}

/* Add gradient border effect using pseudo-element */
.solution-hero-content .solution-tag::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 8px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(51, 85, 255, 0.4));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.solution-hero-content .solution-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.solution-hero-content h1 {
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.solution-hero-content p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    max-width: 500px;
}

.solution-hero-image {
    flex: 1;
    max-width: 42%;
    text-align: right;
}

.solution-hero-image img {
    max-width: 100%;
    height: auto;
}

/* Quote Section */
.quote-section {
    padding: 42px 0; /* Increased padding */
    background: linear-gradient(180deg, #769BFA 0%, #FFF 102.17%); /* Added gradient */
    position: relative;
    overflow: visible;
    background-image: url('files/img/Solution_1/Intro/Frame_Section_note.png');
    background-size:90%; /* Fit image within container, maintain aspect ratio */
    background-repeat: no-repeat;
    background-position: center center; /* Center the image */
}

.quote-box {
    overflow: visible;
    padding: 70px 80px; /* Keep padding, adjust if needed based on frame */
    border: none;
    box-shadow: none;
    position: relative;
    max-width: 1050px; /* Keep the wider box */
    margin: 0 auto;
    color: var(--text);
    font-size: 1.15rem;
    line-height: 1.8;
    font-style: normal;
    text-align: left;
    min-height: 200px; /* Keep min-height */
    background-color: transparent; /* Ensure no background color interferes */
}

/* Remove the old decorative elements as the frame contains them */
.quote-box::before,
.quote-box::after,
.quote-box-bottom-deco {
    content: '' !important;
    display: none;
}

.quote-box strong {
    color: var(--primary);
    font-weight: 600;
}

.quote-author {
    text-align: right;
    margin-top: 25px;
    color: #333;
    font-family: Jost;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    font-size: 1rem;
}

/* Problems Section */
.problems-section {
    padding: 4px 0;
}

.problems-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.problem-card {
    background-color: #F1F6FD; /* 修改背景色 */
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid var(--border);
    transition: var(--transition);
}

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

.problem-card-icon {
    margin-bottom: 20px;
}

.problem-card-icon img {
    height: 50px;
}

.problem-card h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--dark);
}

.problem-card p {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.6;
}


/* Solving Approach Section Styles */
.solving-approach-section {
    padding: 100px 0 120px;
    background-color: white;
}

.solving-approach-section .section-title {
    margin-bottom: 0;
}

.solving-approach-section .section-title::after {
    bottom: 0;
}

.solving-approach-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 84px; /* 24px for subtitle spacing + 60px additional space */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Base card styling */
.solving-approach-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
        padding: 0;
    background: #FFF;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(51, 85, 255, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    min-height: 300px;
    max-width: 380px;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.solving-approach-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(51, 85, 255, 0.18);
}

/* First card with background image */
.solving-approach-card:first-of-type {
    background: #333;
}

.solving-approach-card:first-of-type img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    z-index: 1;
}

.solving-approach-card:first-of-type::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.7));
    z-index: 1;
    border-radius: 8px;
}

.solving-approach-card:first-of-type .solving-approach-text {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.solving-approach-card:first-of-type .solving-approach-text h4 {
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Second card (Generative AI) */
.solving-approach-card:nth-child(3) {
    background: linear-gradient(180deg, #FFFFFF 0%, #F6F9FF 100%);
    box-shadow: 0 10px 25px rgba(51, 85, 255, 0.15);
    border: 1px solid rgba(51, 85, 255, 0.1);
}

.solving-approach-card:nth-child(3):hover {
    background: linear-gradient(180deg, #FFFFFF 0%, #EFF4FF 100%);
    box-shadow: 0 15px 35px rgba(51, 85, 255, 0.25);
    transform: translateY(-8px);
}

.solving-approach-card:nth-child(3) img {
    position: relative;
    width: auto;
    height: 80px;
    object-fit: contain;
    margin-bottom: 15px;
    z-index: 2;
}

.solving-approach-card:nth-child(3)::after {
        display: none;
}

.solving-approach-card:nth-child(3) .solving-approach-text {
    position: relative;
    height: auto;
    z-index: 2;
}

.solving-approach-card:nth-child(3) .solving-approach-text h4 {
    color: var(--primary);
    font-weight: 500;
    margin-bottom: 5px;
    text-shadow: none;
}

.solving-approach-card:nth-child(3) .solving-approach-text p {
    color: var(--dark);
    font-size: 1.1rem;
}

/* Text styling for all cards */
.solving-approach-text {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
}

.solving-approach-text h4 {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 0;
    padding: 0 20px;
}

.solving-approach-text p {
    font-size: 1.2rem;
    margin-top: 8px;
        background-color: transparent;
    padding: 0;
    border-radius: 0;
    font-weight: 500;
}

.solving-approach-separator {
    font-size: 2rem;
    color: var(--text-light);
    margin: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 300;
}

.solving-benefits {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 280px;
    max-width: 320px;
}

.solving-benefit-item {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.1rem;
    color: var(--text);
    background-color: white;
    padding: 18px 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.solving-benefit-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.solving-benefit-item img {
    height: 32px;
    width: auto;
}

.solving-benefit-item strong {
    font-weight: 600;
    color: var(--dark);
    margin-right: 5px;
}

/* Remove the dotted-line connector */
.solving-approach-content::before {
        display: none;
    }
    
/* Introducing Section */
.introducing-section {
    padding: 100px 0 180px;
    background-color: #ffffff;
    position: relative; /* Needed for absolute positioning of text */
}

.introducing-section .section-title {
    margin-bottom: 0;
}

.introducing-content {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Container for positioning */
    min-height: 650px; /* Adjusted height */
    margin-top: 80px; /* Increased space below subtitle */
}

.introducing-image {
    position: absolute;
    top: 55%; /* Slightly lower vertical center */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Accurate centering */
    width: 70%; /* Reduce width of image container */
    height: auto;
    text-align: center;
    z-index: 1;
}

.introducing-image img {
    max-width: 80%; /* Image fills its container */
    height: auto;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    border-radius: 24px;
    margin-top: 0; /* Reset margin */
}

.introducing-text {
    position: absolute;
    z-index: 2;
    display: flex;
    justify-content: center; /* Center columns */
    align-items: flex-start;
    width: 98%; /* Slightly wider */
    max-width: 1300px; /* Allow slightly wider max */
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: 560px; /* Increase gap between columns */
}

.introducing-column {
    flex: 0 0 auto; /* Let width adapt to content */
    max-width: 45%; /* Prevent columns from becoming too wide */
    border-radius: 8px;
    background: rgba(241, 246, 253, 0.8); /* Slightly less transparent */
    backdrop-filter: blur(12px);
    padding: 25px 30px; /* Adjust padding */
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.introducing-column h3 {
    color: #185CE4;
    text-align: center;
    font-family: Jost;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 80%;
    background: #DCE8FF;
    padding: 10px 0;
    margin: -25px -30px 25px -30px; /* Extend background to edges */
    border-bottom: 1px solid rgba(24, 92, 228, 0.2);
}

.introducing-list {
    list-style: none;
    padding: 0;
}

.introducing-list li {
    margin-bottom: 10px;
    color: #5A5A5A; /* hsba(0, 0%, 35%, 1) */
    font-family: Jost;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    padding-left: 10px;
    position: relative;
    line-height: 1.4; /* Added reduced line spacing */
}

.introducing-list li::before {
    content: '·'; /* Use a simple dot marker */
    color: #5A5A5A;
    position: absolute;
    left: -5px; /* Position dot slightly left */
    font-weight: bold;
    font-size: 24px; /* Adjust dot size */
    line-height: 1;
}

/* Advantages Section */
.advantages-section {
    padding: 70px 0 50px;
    background-color: #ffffff;
}

.advantage-item {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
}

.advantage-item:nth-child(even) {
    flex-direction: row-reverse;
}

.advantage-text {
    flex: 1;
}

.advantage-text h3 {
    color: #121518;
    font-family: Jost;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 30px */
    margin-bottom: 10px; /* Adjusted margin */
}

.advantage-text p {
    color: var(--text-light); /* Using existing variable */
    font-family: Jost;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}

/* Style for highlighted text within the paragraphs */
.advantage-text p strong {
    color: #185CE4;
    font-family: Jost;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.advantage-image {
    flex: 0 0 45%; /* Fixed width instead of flex: 1 */
    text-align: center;
    border-radius: 10px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.advantage-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Maintain aspect ratio without stretching */
    border-radius: 6px;
}

/* Application Section */
.application-section {
    padding: 100px 0 100px; /* Reduced padding-bottom */
    background-color: #f8f9fa;
    position: relative;
}

.application-gallery {
    position: relative; /* Needed for absolute positioning of blurred images */
    margin-bottom: 30px;
    text-align: center; /* Center the main inline-block image */
    min-height: 350px; /* Adjust as needed based on image size */
}

.gallery-main {
    display: inline-block; /* Allows centering via text-align on parent */
    position: relative; /* To ensure it's above blurred images */
    z-index: 2;
    max-width: 50%; /* Control size of main image */
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    vertical-align: middle; /* Align with absolute positioned images */
}

.gallery-blur {
    position: absolute;
    z-index: 1; /* Behind main image */
    top: 50%;
    max-width: 48%; /* Slightly smaller than main image */
    border-radius: 10px;
    opacity: 1; /* Optional: make them slightly transparent */
}

.gallery-blur-left {
    left: 0; /* Position relative to the left edge of the container */
    transform: translate(-15%, -50%) scale(0.95); /* Move left, center vertically, slightly smaller */
}

.gallery-blur-right {
    right: 0; /* Position relative to the right edge of the container */
    transform: translate(15%, -50%) scale(0.95); /* Move right, center vertically, slightly smaller */
}

/* Stats floating on Application */
.stats-after-app-grid {
    display: grid; /* Use grid layout */
    grid-template-columns: repeat(3, 1fr); /* 3 columns for the second row layout */
    padding-bottom: 36px;
    justify-items: center; /* Center items within grid cells */
    gap: 25px; /* Adjust gap */
    border-radius: 20px;
    max-width: 800px; /* Adjusted max-width for 3 columns */
    /* Removed margin-top and re-added absolute positioning */
    /* margin: 40px auto 0; */
    position: absolute;
    bottom: 20px; /* Adjust vertical position to overlay gallery */
    left: 50%; /* Center the grid horizontally */
    transform: translateX(-50%);
    width: 90%; /* Control width of the absolute element */
    z-index: 10; /* Ensure it's above gallery images */
}

.stat-after-app-item {
    /* New Styles */
    background-color: rgba(241, 246, 253, 0.6); /* #F1F6FD with 60% opacity */
    backdrop-filter: blur(6px);
    padding: 25px 20px; /* Adjusted padding */
    border-radius: 20px; /* Match image */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* Fill grid cell */
    max-width: 240px; /* Prevent becoming too wide */
    box-sizing: border-box;
    
    /* 修复圆角显示问题 */
    position: relative;
    overflow: visible; /* 改为 visible 以确保边框和阴影可以超出元素边界 */
    border: 1px solid #A5C3FF; /* 直接在元素上应用边框 */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}


/* Position items in the grid */
.stat-after-app-item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1;
    transform: translateX(-40%); /* Shift left */
}
.stat-after-app-item:nth-child(2) {
    grid-column: 3 / 4; /* Place in the 3rd column of the first row */
    grid-row: 1;
    transform: translateX(40%); /* Shift right */
}
.stat-after-app-item:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 2;
    /* No transform needed */
}
.stat-after-app-item:nth-child(4) {
    grid-column: 2 / 3;
    grid-row: 2;
    /* No transform needed */
}
.stat-after-app-item:nth-child(5) {
    grid-column: 3 / 4;
    grid-row: 2;
    /* No transform needed */
}


.stat-after-app-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.stat-after-app-icon {
    margin-bottom: -6px;
}

.stat-after-app-icon img {
    height: 70px;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
    transition: transform 0.3s ease, filter 0.3s ease;
}

.stat-after-app-item:hover .stat-after-app-icon img {
    transform: scale(1.15);
    filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.25));
}

.stat-after-app-value {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 5px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.stat-after-app-value .arrow {
    font-size: 2.2rem;
    vertical-align: middle;
    margin-left: 5px;
}

.stat-after-app-value .down { 
    color: #28a745; 
    text-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

.stat-after-app-value .up { 
    color: #dc3545; 
    text-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

.stat-after-app-label {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--dark);
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .stats-after-app-grid {
        flex-direction: column;
        align-items: center;
        position: relative;
        bottom: 0;
        margin-top: -50px;
        margin-bottom: 50px;
    }
    
    .stat-after-app-item {
        max-width: 90%;
        width: 90%;
        margin-bottom: 20px;
    }
    
    .application-section {
        padding-bottom: 50px;
    }
}

/* Why ICC Section */
.why-icc-section {
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}


/* Comprehensive Analyzing Process Section */
.analyzing-process-section {
    padding: 100px 0;
    background-color: #030303; /* Dark background */
    color: white;
}

.comprehensive-analyzing-proces1 {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 60px;
    color: white;
    letter-spacing: 0.5px;
}

.comprehensive-analyzing-proces1 .highlight {
    color: var(--primary);
    position: relative;
}

.card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 50px 40px; /* Increase row and column gap */
    margin-top: 50px !important; /* Override general rule */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.card > div { /* Style for each item div (div, div1, div2...) */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s ease;
    padding: 20px;
    border-radius: 15px;
}

.card > div:hover {
    transform: translateY(-10px);
    background-color: rgba(255, 255, 255, 0.05);
}

.card img {
    height: 100px; /* Larger icon size */
    width: 100px;
    object-fit: contain;
    filter: brightness(0) invert(1); /* Make icons white */
    background-color: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 15px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.card > div:hover img {
    background-color: rgba(255, 255, 255, 0.2);
}

.card > div > div, /* Style for single line text */
.enable-timely-corrections-container { /* Style for two-line text container */
    font-size: 22px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8); /* White with 80% opacity */
    line-height: 1.4;
}

/* Specific style for the two-line text */
.enable-timely-corrections-container p {
    margin: 0;
    line-height: 1.2; /* Reduce line height for stacked text */
    font-size: 22px;
    color: rgba(255, 255, 255, 0.8); /* White with 80% opacity */
}

@media (max-width: 992px) {
    .card {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 30px;
    }
}

@media (max-width: 576px) {
    .card {
        grid-template-columns: 1fr;
    }
    
    .card img {
        height: 80px;
        width: 80px;
    }
    
    .card > div > div,
    .enable-timely-corrections-container,
    .enable-timely-corrections-container p {
        font-size: 18px;
    }
}

/* Responsive Styles for Solution 1 Page */
@media (max-width: 992px) {
    .solution-hero .container { flex-direction: column; text-align: center; }
    .solution-hero-content { max-width: 100%; }
    .solution-hero-image { max-width: 60%; margin-top: 30px; text-align: center; }
    /* Responsive Quote Section adjustments */
    .quote-section {
        background-image: none;
        background: #f8f9fa; /* Fallback background */
        padding: 60px 0; /* Adjust padding */
    }
    .quote-box {
        background-color: #F1F6FD;
        border-radius: 12px;
        padding: 30px 40px; /* Adjust padding */
        max-width: 800px; /* Adjust max-width */
        min-height: auto; /* Remove min-height */
        border: 1px solid var(--primary);
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        transition: border-color 0.3s ease;
        font-size: 1.05rem; /* Adjust font size */
        line-height: 1.7; /* Adjust line height */
    }
    .quote-box:hover {
         border-color: #FD6D10;
    }
    .quote-author {
        font-size: 0.9rem; /* Adjust author font size */
    }
    /* End Responsive Quote Section adjustments */

    .problems-grid { grid-template-columns: 1fr; }
    .solving-approach-content { flex-direction: column; }
    .solving-benefits { margin-top: 20px; width: 100%; max-width: 400px; /* Added max-width */ }
    /* Adjust introducing section layout for tablet */
    .introducing-content { 
        flex-direction: column; 
        min-height: auto; /* Reset min-height */
        margin-top: 50px; /* Adjust margin */
        align-items: center; /* Center items */
    }
    .introducing-image { 
        position: static; /* Reset position */
        transform: none; /* Reset transform */
        width: 80%; /* Adjust width */
        max-width: 600px; /* Add max-width */
        margin-bottom: 40px; /* Add space below image */
        z-index: auto;
    }
    .introducing-image img {
        max-width: 100%; /* Ensure image fits container */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Lighter shadow */
    }
    .introducing-text { 
        position: static; /* Reset position */
        transform: none; /* Reset transform */
        flex-direction: row; /* Columns side-by-side on tablet */
        width: 100%; /* Full width */
        max-width: 900px; /* Limit width */
        gap: 30px; /* Adjust gap */
        z-index: auto;
        justify-content: center; /* Center columns */
    }
    .introducing-column {
        flex: 1; /* Equal width */
        max-width: 400px; /* Limit column width */
        margin: 0; /* Remove auto margins */
        padding: 20px 25px; /* Adjust padding */
    }
    .advantage-item, .advantage-item:nth-child(even) { flex-direction: column; gap: 20px; }
    .advantage-image { order: -1; flex: 0 0 auto; /* Reset flex basis */ width: 80%; max-width: 500px; /* Control image size */ } /* Image first on mobile */
    .stats-after-app-grid { grid-template-columns: 1fr; }
    .why-icc-comparison { flex-direction: column; }
    .why-icc-criteria { flex-direction: row; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; }
    .criteria-item { flex-basis: 45%; justify-content: center; text-align: center;}
    .criteria-item span { text-align: left; flex: initial;}
    .analyzing-process-grid { grid-template-columns: repeat(2, 1fr); }
    .card { gap: 30px 20px; } /* Adjust gap for card layout */

    /* Responsive Stats Grid */
    .stats-after-app-grid {
        position: relative; /* Back to normal flow */
        bottom: auto;
        left: auto;
        transform: none; /* Remove horizontal centering transform */
        width: auto; /* Reset width */
        z-index: auto;
        margin: 40px auto 0; /* Top margin, centered */
        padding-bottom: 0; /* Remove previous padding */

        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        max-width: 600px; /* Adjust max-width for 2 columns */
        gap: 20px; /* Adjust gap if needed */
    }

    /* Reset positioning and transforms for all items */
    .stat-after-app-item:nth-child(1),
    .stat-after-app-item:nth-child(2),
    .stat-after-app-item:nth-child(3),
    .stat-after-app-item:nth-child(4),
    .stat-after-app-item:nth-child(5) {
        grid-column: auto;
        grid-row: auto;
        transform: none; /* Remove horizontal shifts */
    }
    /* End Responsive Stats Grid */
}

@media (max-width: 768px) {
    .solution-hero-content h1 { font-size: 2.2rem; }
    .quote-box { padding: 30px 20px; }
    .quote-box::before { font-size: 3rem; left: 10px; }
    /* Mobile styles for introducing section */
    .introducing-content {
        margin-top: 40px;
    }
    .introducing-image {
        width: 95%; /* Image takes full width */
        max-width: 500px; /* Limit max width on mobile */
        margin-bottom: 30px; /* Space between image and text */
    }
    .introducing-text {
        flex-direction: column; /* Stack columns vertically */
        width: 95%; /* Full width */
        max-width: 500px; /* Limit width */
        gap: 20px; /* Gap between columns */
        align-items: center; /* Center columns */
    }
    .introducing-column {
        width: 100%; /* Full width for each column */
        max-width: none; /* Remove max width constraint */
        text-align: left; /* Align text left within column */
        padding: 20px;
    }
    .introducing-column h3 { font-size: 1.3rem; text-align: center; margin: -20px -20px 20px -20px; } /* Adjust h3 style */
    .introducing-list { padding-left: 0; } /* Remove default list padding */
    .introducing-list li { font-size: 0.95rem; padding-left: 20px; /* Adjust padding */ }
    .introducing-list li::before { left: 5px; /* Adjust bullet position */ }
    /* End of mobile introducing section styles */
    .advantage-text h3 { font-size: 1.4rem; }
    .stat-after-app-value { font-size: 1.8rem; }
    .why-icc-table th, .why-icc-table td { font-size: 0.85rem; padding: 10px 5px; }
    .rating-icons i { font-size: 1rem; }
    .analyzing-process-grid { grid-template-columns: 1fr; }
    .card { grid-template-columns: 1fr; } /* Stack card items */
}

.application-subtitle, .introducing-subtitle, .why-icc-subtitle {
    text-align: center;
    color: var(--text);
    margin-top: 24px;
    margin-bottom: 60px;
    font-size: 1.3rem;
}

/* 添加下面这个通用子元素间距规则 */
section > .container > *:not(.section-title):first-of-type {
    margin-top: 30px; /* Reduced from 40px */
}


/* Ensure challenge-grid doesn't have the !important override */
.challenge-grid {
     margin-top: 50px; /* Keep margin for now, but remove !important */
}

/* Ensure contact-container doesn't have the !important override */
.contact-container {
    margin-top: 50px; /* Keep margin for now, but remove !important */
}

/* Ensure solution-item:first-of-type doesn't have the !important override */
.solution-item:first-of-type {
     margin-top: 50px; /* Keep margin for now, but remove !important */
}

/* Keep specific margin for resources container as it was set */
.resources-carousel-container {
    margin-top: 50px;
}


/* Add this back to avoid layout issues */
.analyzing-process-grid,
.process-item,
.process-item-icon,
.process-item h4 {
    display: none; /* Or remove these rules completely */
}

.comparison-table-wrapper {
    max-width: 1200px;
    margin: 50px auto;
    text-align: center;
}

.comparison-table-image {
    max-width: 100%;
    height: auto;

}

@media (max-width: 768px) {
    .comparison-table-wrapper {
        margin: 30px auto;
    }
    
    .comparison-table-image {
        max-width: 100%;
    }
}

/* ============================== */
/* Styles for Solution 2 Page     */
/* ============================== */

/* Solution 2 Hero Section */
.solution-2-hero {
    background-color: #030303; /* Dark background consistent with S1 */
    color: white;
}

.solution-2-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('files/img/Solution_2/Intro/bg_Section_HeroActions.png'); /* Reusing homepage BG as placeholder */
    background-size: cover;
    background-position: center;
    opacity: 0.2; /* Adjust opacity */
    z-index: 1;
}

.solution-2-hero .solution-hero-content h1 {
    font-size: 2.6rem; /* Slightly adjusted size */
}

.solution-2-hero .solution-hero-image img {
    max-width: 70%; /* Adjusted size */
    margin-top: -20px; /* Overlap adjustment */
    margin-bottom: -50px;
}

/* Solution 2 Quote Section */
.solution-2-quote {
    padding: 80px 0; /* Increased padding */
    background: linear-gradient(180deg, rgba(118, 155, 250, 0.15) -50%, #FFF 25%); /* Added gradient */
    position: relative;
    overflow: visible;
    background-image: url('files/img/Solution_2/Intro/Frame_Section_note.png');
    background-size:80%; /* Fit image within container, maintain aspect ratio */
    background-repeat: no-repeat;
    background-position: center center; /* Center the image */
}

.solution-2-quote .quote-box {
    overflow: visible;
    padding: 35px 80px; /* Keep padding, adjust if needed based on frame */
    border: none;
        box-shadow: none;
    position: relative;
    max-width: 1050px; /* Keep the wider box */
    margin: 0 auto;
    color: var(--text);
    font-size: 1.15rem;
    line-height: 1.8;
    font-style: normal;
    text-align: left;
    min-height: 200px; /* Keep min-height */
    background-color: transparent; /* Ensure no background color interferes */
}

.solution-2-quote .quote-box::before, /* Decorative elements */
.solution-2-quote .quote-box::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: var(--primary);
    opacity: 0.1;
    border-radius: 8px;
}

.solution-2-quote .quote-box::before { /* Top-left deco */
    top: -15px;
    left: -15px;
    transform: rotate(15deg);
    width: 100px;
    height: 40px;
    background-image: linear-gradient(45deg, #3355ff, #6c8cff);
}

.solution-2-quote .quote-box::after { /* Bottom-right deco */
    bottom: -20px;
    right: -20px;
    transform: rotate(-25deg);
    width: 80px;
    height: 80px;
    background-image: linear-gradient(-45deg, #3355ff, #5a7bff);
    border-radius: 50%;
}


/* Solution 2 Problems Section */
.solution-2-problems {
    padding: 80px 0 60px;
    background-color: #F8F9FF; /* Lighter blue background */
}

.solution-2-problems .section-title {
    margin-bottom: 50px;
}

.mic-problems-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px; /* Slightly larger gap */
}

.mic-problems-grid .problem-card {
    background-color: #FFFFFF;
    padding: 35px;
    border-radius: 12px;
    border: 1px solid #E1E4E8; /* Lighter border */
}

.mic-problems-grid .problem-card h3 {
    color: var(--primary);
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.mic-problems-grid .problem-card p {
    font-size: 1rem;
    text-align: left;
}

.mic-problems-grid .problem-card-icon img {
    height: 60px; /* Larger icons */
    margin-bottom: 15px;
}

/* Solution 2 Introducing Tool Section */
.solution-2-introducing-tool {
    padding: 80px 0 40px;
    background-color: #ffffff; /* Fallback background */
    background: radial-gradient(222.7% 48.91% at 45.83% 87.31%, rgba(241, 246, 253, 0.00) 0%, #F1F6FD 100%), radial-gradient(196.93% 41.9% at 19.92% 20.39%, #F1F6FD 0%, rgba(241, 246, 253, 0.00) 100%);
    position: relative; /* Needed if using pseudo-elements for blur later */
}

.solution-2-introducing-tool .section-title {
    margin-bottom: 10px;
    color:#333333;
}

.solution-2-introducing-tool .introducing-subtitle {
    text-align: center;
    color: var(--text);
    margin-top: 24px;
    margin-bottom: 60px;
    font-size: 1.3rem;
}

.introducing-content-split {
    display: flex;
    align-items: center;
    gap: 50px;
}

.introducing-content-split.reverse {
    flex-direction: row-reverse;
}

.introducing-image-map,
.introducing-image-kpi {
    flex: 1.2; /* Give image slightly more space */
    text-align: center;
}

.introducing-image-map img,
.introducing-image-kpi img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.introducing-text-description {
    flex: 1;
    background-color: #F1F6FD;
    padding: 35px 40px;
    border-radius: 10px;
}

.introducing-text-description h3 {
    font-size: 1.6rem;
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: 500;
}

.introducing-text-description p {
    font-size: 1.05rem;
    color: hsba(0, 0%, 35%, 1);
    font-weight: 400;
    line-height: 2;
}

/* KPI Visualization Section */
.kpi-visualization-section {
    padding: 40px 0 80px;
    background-color: #ffffff; /* Fallback background */
    background: radial-gradient(222.7% 48.91% at 45.83% 87.31%, rgba(241, 246, 253, 0.00) 0%, #F1F6FD 100%), radial-gradient(196.93% 41.9% at 19.92% 20.39%, #F1F6FD 0%, rgba(241, 246, 253, 0.00) 100%);
    position: relative; /* Needed if using pseudo-elements for blur later */
}

/* Style for Video Containers */
.video-container {
    border-radius: 16px;
    border: 2px solid rgba(24, 92, 228, 0.15);
    overflow: hidden; /* Ensures video corners are clipped */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    line-height: 0; /* Removes extra space below video */
}

.video-container video {
    display: block; /* Removes extra space below video */
    width: 100%;
    height: auto;
    border-radius: 14px; /* Slightly smaller radius to account for border */
}

/* Remove shadow from images within these sections if they existed */
.introducing-image-map img,
.introducing-image-kpi img {
    box-shadow: none;
}

/* Techs and Advantages Section */
.techs-advantages-section {
    padding: 80px 0 80px;
    background-color: #030303;
    position: relative;
    overflow: hidden;
}

.techs-advantages-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    opacity: 0.05;
    z-index: 0;
}

.techs-advantages-section .container {
    position: relative;
    z-index: 1;
    max-width: none;
    width: 100%;
        padding: 0;
}

.tech-icons-grid {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.tech-item {
    flex: 1;
    position: relative;
    overflow: hidden;
    color: white;
    line-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tech-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tech-image-container img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.tech-image-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: linear-gradient(to bottom, rgba(18, 25, 40, 0) 0%, rgba(18, 25, 40, 0.9) 100%);
    pointer-events: none;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.tech-label {
    position: absolute;
    bottom: 25px;
    width: 100%;
    text-align: center;
    z-index: 2;
    color: white;
    font-size: 1.8rem;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
    left: 0;
    right: 0;
    margin: 0 auto;
}

/* Apply outer border radius */
.tech-item:first-child {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.tech-item:last-child {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* Explicitly set radius for first/last pseudo-elements */
.tech-item:first-child .tech-image-container::after {
    border-bottom-left-radius: 16px;
}

.tech-item:last-child .tech-image-container::after {
    border-bottom-right-radius: 16px;
}

.tech-item:hover img {
    transform: scale(1.1);
    filter: brightness(0.7) blur(2px);
}

.tech-item:hover .tech-label {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Benefits Section */
.benefits-section {
    padding: 60px 0 80px;
    background-color: #030303;
    position: relative;
    margin-top: -1px;
}

.benefits-section .container {
    position: relative;
    z-index: 1;
}

.benefits-section .section-title {
    color: #185CE4;
    font-size: 48px;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 0;
    margin-bottom: 60px;
}

.benefits-section .section-title::after {
        display: none;
}

.benefits-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    color: white;
}

/* Benefits Row Layout */
.benefits-row {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.benefits-row.full-width {
    width: 100%;
}

/* Stats Item Styles */
.stat-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-left: 2px solid white;
    transition: all 0.3s ease;
    cursor: pointer;
}

.benefits-section .stat-item:hover {
    transform: translateY(-5px);
    border-left-color: #185CE4;
}

.benefits-section .stat-number {
    font-size: 64px;
    font-weight: 500;
    color: white;
    line-height: 1;
}

.stat-description {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.8);
}

/* Feature Content Right */
.feature-content-right {
    flex: 1;
    padding: 20px;
}

.feature-content-right h4 {
    font-size: 24px;
    font-weight: 500;
    color: white;
    margin-bottom: 16px;
}

.feature-content-right p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

/* Feature Item Styles */
.feature-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    padding: 20px;
}

.feature-item .feature-content {
    flex: 1;
}

.feature-item .feature-content h4 {
    font-size: 24px;
    font-weight: 500;
    color: white;
    margin-bottom: 16px;
}

.feature-item .feature-content p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

.feature-item img {
    max-width: 400px;
    height: auto;
    border-radius: 8px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .benefits-row {
        flex-direction: column;
    }
    
    .stat-item {
        border-left: none;
        border-bottom: 2px solid white;
        padding-bottom: 20px;
    }
    
    .feature-item {
        flex-direction: column;
    }
    
    .feature-item img {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .stat-number {
        font-size: 48px;
    }
    
    .stat-description {
        font-size: 18px;
    }
    
    .feature-content-right h4,
    .feature-item .feature-content h4 {
        font-size: 20px;
    }
    
    .feature-content-right p,
    .feature-item .feature-content p {
        font-size: 16px;
    }
}

/* Case Studies Section */
.case-studies-section {
    padding: 80px 0 60px;
    background-color: #F8F9FF; /* Light background */
}

.case-study-item {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 60px;
}

.case-study-item.reverse {
    flex-direction: row-reverse;
}

.case-study-image {
    flex: 1;
    text-align: center;
}

.case-study-image img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.case-study-content {
    flex: 1;
}

.case-study-content h3 {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 20px;
    font-weight: 500;
}

.case-study-content ul {
    list-style: none;
    padding-left: 0;
}

.case-study-content li {
    font-size: 1.05rem;
    color: var(--text-light);
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
    line-height: 1.6;
}

.case-study-content li::before {
    content: '\f00c'; /* Font Awesome check icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--primary);
    position: absolute;
    left: 0;
    top: 4px;
}

.case-summary-stats {
    background-color: #ffffff;
    padding: 30px 40px;
    border-radius: 10px;
    text-align: center;
    margin-top: 40px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #E1E4E8;
}

.case-summary-stats p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--text);
}

.case-summary-stats .highlight {
    font-weight: 600;
}

/* UI Mockup Section */
.ui-mockup-section {
    padding: 60px 0 100px;
    background: linear-gradient(180deg, #F8F9FF 0%, #FFFFFF 100%);
    text-align: center;
}

.video-container {
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    cursor: pointer;
}

.demo-video {
    width: 100%;
    height: auto;
    display: block;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}

.video-container:hover .video-overlay {
    background: rgba(0, 0, 0, 0.1);
}

.play-pause-btn {
    width: 80px;
    height: 80px;
    border: none;
    background: rgba(24, 92, 228, 0.9);
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    opacity: 0;
    transform: scale(0.9);
    backdrop-filter: blur(4px);
}

.play-pause-btn:hover {
    background: rgba(24, 92, 228, 1);
    transform: scale(1);
}

.video-container:hover .play-pause-btn {
    opacity: 1;
}

@media (max-width: 768px) {
    .video-container {
        width: 95%;
    }

    .play-pause-btn {
        width: 60px;
        height: 60px;
        font-size: 20px;
    }
}

.laptop-mockup {
    position: relative;
    width: 85%;
    margin: 0 auto;
    display: inline-block;
}

.laptop-screen {
    position: absolute;
    top: 3.2%;
    left: 11.8%;
    width: 76.4%;
    height: 76%;
    overflow: hidden;
    border-radius: 4px;
}

.laptop-screen video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.laptop-frame {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 768px) {
    .laptop-mockup {
        width: 95%;
    }
}

/* Responsive Styles for Solution 2 */
@media (max-width: 992px) {
    .solution-2-hero .solution-hero-image img {
        max-width: 80%;
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Adjust hero image on tablet */
    .mic-problems-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Stack problems */
    .introducing-content-split,
    .introducing-content-split.reverse {
        flex-direction: column;
        gap: 30px;
    }

    /* Stack intro/kpi */
    .tech-icons-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    /* 2x2 tech icons */
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Stack benefits */
    .case-study-item,
    .case-study-item.reverse {
        flex-direction: column;
        gap: 30px;
    }

    /* Stack cases */
    .case-study-image {
        order: -1;
    }

    /* Image first */
    .ui-mockup-section img {
        max-width: 95%;
    }

    /* Responsive adjustments for Solution 2 Quote Section */
    .solution-2-quote {
        background-image: none;
        background: #f8f9fa; /* Fallback background */
        padding: 60px 0; /* Adjust padding */
    }
    .solution-2-quote .quote-box {
        background-color: #F1F6FD;
        border-radius: 12px;
        padding: 30px 40px; /* Adjust padding */
        max-width: 800px; /* Adjust max-width */
        min-height: auto; /* Remove min-height */
        border: 1px solid var(--primary);
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        transition: border-color 0.3s ease;
        font-size: 1.05rem; /* Adjust font size */
        line-height: 1.7; /* Adjust line height */
    }
     .solution-2-quote .quote-box::before, /* Remove deco */
     .solution-2-quote .quote-box::after {
         display: none;
     }
    /* End Responsive Solution 2 Quote Section adjustments */
}

@media (max-width: 768px) {
    .solution-2-hero .solution-hero-content h1 {
        font-size: 2.2rem;
    }

    .solution-2-quote .quote-box {
        padding: 30px 25px;
    }

    .solution-2-quote .quote-box::before,
    .solution-2-quote .quote-box::after {
        display: none;
    }

    /* Hide deco on mobile */
    .mic-problems-grid .problem-card {
        padding: 25px;
    }

    .introducing-text-description {
        padding: 25px 30px;
    }

    .benefit-item.text-icon {
        flex-direction: column;
    }

    /* Stack text/icon benefit */
    .benefit-item.text-icon img {
        max-width: 70%;
        margin-top: 15px;
    }

    .case-summary-stats p {
        font-size: 1.05rem;
    }
}

/* UI Mockup Section */
.ui-mockup-section .video-container {
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: visible;
    cursor: pointer;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.ui-mockup-section .demo-video {
    width: 100%;
    height: auto;
    display: block;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.ui-mockup-section .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}

.ui-mockup-section .video-container:hover .video-overlay {
    background: rgba(0, 0, 0, 0.1);
}

.ui-mockup-section .play-pause-btn {
    width: 80px;
    height: 80px;
    border: none;
    background: rgba(24, 92, 228, 0.9);
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    opacity: 0;
    transform: scale(0.9);
    backdrop-filter: blur(4px);
}

.ui-mockup-section .play-pause-btn:hover {
    background: rgba(24, 92, 228, 1);
    transform: scale(1);
}

.ui-mockup-section .video-container:hover .play-pause-btn {
    opacity: 1;
}

@media (max-width: 768px) {
    .ui-mockup-section .video-container {
        width: 95%;
    }

    .ui-mockup-section .play-pause-btn {
        width: 60px;
        height: 60px;
        font-size: 20px;
    }
}

/* ============================== */
/* Styles for Solution 3 Page     */
/* ============================== */

/* Solution 3 Hero Section */
.solution-3-hero {
    position: relative;
    padding: 120px 0;
    background-image: url('files/img/Solution_3/Intro/bg_Section_HeroActions.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.solution-3-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 100%);
    z-index: 1;
}

.solution-3-hero .container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.solution-3-hero .solution-hero-content {
    max-width: 50%;
    color: #fff;
}

.solution-3-hero .solution-hero-content h1 {
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.3;
}

.solution-3-hero .solution-hero-content p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    max-width: 500px;
}

.solution-3-hero-image {
    flex: 1;
    max-width: 48%;
    text-align: right;
}

.solution-3-hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Solution 3 Quote Section */
.solution-3-quote {

    background: linear-gradient(180deg, rgba(118, 155, 250, 0.20) -83.56%, #FFF 14.92%); /* Added gradient */
    position: relative;
    overflow: visible; /* Allow frame to overflow if needed */
    border-bottom: 1px solid var(--border);
}

.solution-3-quote .container {
    /* Ensure container allows relative positioning for box */
    position: relative;
    background-image: url("files/img/Solution_3/Intro/Frame_Section_note.png");
    background-size: 100%; /* Fit frame within the box */
    background-repeat: no-repeat;
    background-position: center 20%;
}

.solution-3-quote .quote-box {
    max-width: 1050px; /* Adjust width to match frame aspect ratio better */
    min-height: 250px; /* Adjust height */
    margin: 0 auto;
    padding: 70px 90px; /* Increased padding to fit text inside frame */

    color: var(--text);
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: left; /* Text aligns left inside the box */
    /* Remove previous box styles */
        background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    border: none;
    }
    
/* Remove the old decorative pseudo-element */
.solution-3-quote .quote-box::before {
        display: none;
    }
    
.solution-3-quote .quote-author {
    text-align: right;
    margin-top: 20px;
    color: var(--text-light);
    font-size: 0.95rem;
    font-style: italic;
    padding-right: 10%; /* Adjust author position relative to frame */
}

/* Current Situation Section */
.current-situation-section {
    padding: 80px 0;
    background-color: #fff;
}

.current-situation-section .section-title {
    text-align: center;
    font-size: 2.8rem;
    margin-bottom: 60px;
    color: var(--dark);
}

.current-situation-section .section-title::after {
    content: '';
        display: block;
    width: 80px;
    height: 3px;
    background-color: var(--primary);
    margin: 15px auto 0;
}

.situation-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.situation-card {
    background-color: #F8F9FF;
    border-radius: 20px;
    padding: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.situation-card h3 {
    font-size: 2rem;
    color: var(--dark);
    margin-bottom: 20px;
    font-weight: 600;
}

.situation-card p {
    font-size: 1.1rem;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 5px;
}

/* Emphasis styles for numbers */
.situation-card .highlight-number {
    font-size: 2.2rem;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 5px;
}

.situation-card .highlight-text {
    color: var(--text-light);
    font-size: 1.1rem;
    margin-bottom: 20px;
}

/* Specific card styles */
.situation-card.hong-kong {
    grid-row: 1 / span 2;
}

.situation-card.mainland-china {
    height: fit-content;
}

.situation-card.global {
    height: fit-content;
}

@media (max-width: 768px) {
    .situation-card {
        padding: 30px;
    }
    
    .situation-card h3 {
        font-size: 1.8rem;
    }
    
    .situation-card .highlight-number {
        font-size: 2rem;
    }
    
    .situation-card p {
        font-size: 1rem;
    }
}

/* Limitations Section */
.limitations-section {
    padding: 80px 0 60px;
    background-color: #F8F9FF;
}

.limitations-section .section-title {
    margin-bottom: 60px;
    text-align: center;
}

.limitations-section .section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: var(--primary);
    margin: 15px auto 0;
}

.limitations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.limitation-card {
    background-color: #F1F6FD;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.limitation-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.limitation-image {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

.limitation-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.limitation-icon {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 8px;
}

.limitation-icon img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: contain;
}

.limitation-card h3 {
    font-size: 1.3rem;
    color: var(--dark);
    margin: 15px 0;
    font-weight: 500;
    line-height: 1.4;
}

.limitation-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    width: 100%;
}

.limitation-card li {
    font-size: 0.95rem;
    color: var(--text-light);
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
    line-height: 1.6;
}

.limitation-card li::before {
    content: '•';
    position: absolute;
    left: 5px;
    color: var(--primary);
}

@media (max-width: 992px) {
    .limitations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .limitations-grid {
        grid-template-columns: 1fr;
    }
    
    .limitation-card {
        padding: 20px;
    }
    
    .limitation-card h3 {
        font-size: 1.2rem;
    }
}

/* Our Solution Section */
.our-solution-section {
    padding: 80px 0;
    background-color: #fff;
}

.our-solution-section .section-title {
    text-align: center;
    margin-bottom: 60px;
    font-size: 2.8rem;
    color: var(--dark);
}

.our-solution-section .section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: var(--primary);
    margin: 15px auto 0;
}

.solution-content-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
    background-color: rgba(245, 248, 255, 0.7);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.solution-content-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('files/img/Solution_3/bg-pattern.png') repeat;
    opacity: 0.05;
    z-index: 0;
}

.solution-image {
    flex: 1;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.solution-description {
    flex: 1;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.solution-description h3 {
    color: #185CE4;
    text-align: center;
    font-family: Jost;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    background: #DCE8FF;
    display: inline-flex;
    padding: 12px; /* var(--sds-size-space-300) equivalent */
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    border-radius: 8px;
}

.solution-description p {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.60);
    backdrop-filter: blur(7.85px);
    -webkit-backdrop-filter: blur(7.85px); /* Safari 支持 */
    color: rgba(89, 89, 89, 1);
    font-family: Jost;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 200%; /* 40px */
    padding: 15px;
    margin-bottom: 15px;
    width: 100%;
    border: 1px solid rgba(235, 235, 235, 0.8);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.solution-description strong {
    color: var(--dark);
    font-weight: 500;
}

@media (max-width: 992px) {
    .solution-content-wrapper {
        flex-direction: column;
        gap: 40px;
    }

    .solution-image,
    .solution-description {
        width: 100%;
        padding-right: 0;
    }

    .solution-description h3 {
        font-size: 1.8rem;
        text-align: center;
    }

    .solution-description p {
        text-align: center;
    }
}

/* Advantages Section (Solution 3 specific) */
.solution-3-advantages {
    padding: 80px 0;
    background-color: #000;
    position: relative;
    overflow: hidden;
}

.solution-3-advantages .section-title {
    text-align: center;
    color: #fff;
    margin-bottom: 60px;
}

.advantages-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    
}

.advantage-image {
    width: 100%;
    height: auto;
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.advantage-image:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* 特定图片的位置设置 */
.advantage-image:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
}

.advantage-image:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.advantage-image:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
}

.advantage-image:nth-child(4) {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
}

@media (max-width: 992px) {
    .advantages-grid {
        grid-template-columns: 1fr;
        justify-items: center; /* Center items horizontally */
    }
    
    .advantage-image:nth-child(1),
    .advantage-image:nth-child(2),
    .advantage-image:nth-child(3),
    .advantage-image:nth-child(4) {
        grid-column: auto;
        grid-row: auto;
        align-self: auto;
        width: 60%;
    }
}

@media (max-width: 768px) {
    .advantages-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .advantage-image {
        max-width: 100%;
    }
}

/* Case Studies Section (Solution 3 specific) */
.solution-3-cases {
    padding: 80px 0 60px;
    background-color: #F8F9FF;
}

.solution-3-cases .case-study-item {
    margin-bottom: 70px;
    align-items: flex-start; /* Align items top */
}

.solution-3-cases .case-study-image {
    flex: 0 0 45%; /* Fixed width */
    text-align: center;
}

.solution-3-cases .case-study-image img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.solution-3-cases .case-3-image-left img {
    max-width: 85%; /* Slightly smaller image for Case 1 */
}

.solution-3-cases .case-study-content {
    flex: 1;
    padding-top: 10px; /* Align text slightly lower */
}

.solution-3-cases .case-study-content h3 {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 10px;
    font-weight: 500;
    position: relative;
    padding-left: 30px;
}

/* Add blue line before case study titles */
.solution-3-cases .case-study-content h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 80%;
    background-color: var(--primary);
    border-radius: 3px;
}

.solution-3-cases .case-location {
        font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 20px;
    font-style: italic;
    padding-left: 30px;
}

.solution-3-cases .case-study-content ul {
    list-style: none;
    padding-left: 30px; /* Indent list */
    margin: 0;
}

.solution-3-cases .case-study-content li {
    font-size: 1.05rem;
    color: var(--text);
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
    line-height: 1.6;
}

.solution-3-cases .case-study-content li::before {
    content: '\2022'; /* Bullet point */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--primary);
    position: absolute;
    left: 0;
    top: 5px;
    font-size: 0.8em;
}

.solution-3-cases .case-study-content li strong {
    font-weight: 600;
    color: var(--primary-dark);
}

/* Responsive for Solution 3 */
@media (max-width: 992px) {
    /* --- Add these styles --- */
    /* Responsive adjustments for Solution 3 Quote Section */
    .solution-3-quote {
        background: #f8f9fa; /* Fallback background */
        padding: 60px 0; /* Adjust padding */
    }
    .solution-3-quote .container {
        background-image: none; /* Remove background image */
    }
    .solution-3-quote .quote-box {
        background-color: #F1F6FD;
        border-radius: 12px;
        padding: 30px 40px; /* Adjust padding */
        max-width: 800px; /* Adjust max-width */
        min-height: auto; /* Remove min-height */
        border: 1px solid var(--primary); /* Theme color border */
        box-shadow: none; /* Remove shadow */
        font-size: 1.05rem; /* Adjust font size */
        line-height: 1.7; /* Adjust line height */
    }
     .solution-3-quote .quote-box::before, /* Remove deco if they existed */
     .solution-3-quote .quote-box::after {
         display: none;
     }
    /* End Responsive Solution 3 Quote Section adjustments */
    /* --- End of added styles --- */

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

     .solution-3-hero .solution-hero-content {
         max-width: 100%;
     }

     .solution-3-hero-image {
         max-width: 60%;
         margin-top: 30px;
         text-align: center;
     }

     .situation-grid {
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     }

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

     .solution-content-wrapper {
         flex-direction: column;
         gap: 30px;
     }

     .advantages-grid {
         grid-template-columns: 1fr;
         gap: 25px;
     }

     .solution-3-cases .case-study-item,
     .solution-3-cases .case-study-item.reverse {
         flex-direction: column;
         gap: 30px;
     }

     .solution-3-cases .case-study-image {
         order: -1;
         flex: 0 0 auto;
         width: 80%;
         margin: 0 auto;
     }
  }

@media (max-width: 768px) {
    .solution-3-hero .solution-hero-content h1 {
        font-size: 2.4rem;
    }

    .solution-3-quote .quote-box {
        padding: 30px 25px;
    }

    .situation-card {
        padding: 25px;
    }

    .situation-card h3 {
        font-size: 1.3rem;
    }

    .limitation-card img {
        height: auto; /* Allow height to adjust automatically */
    }

    .our-solution-section {
        padding: 60px 0;
    }

    .solution-content-wrapper {
        padding: 30px;
    }

    .solution-description h3 {
        font-size: 1.6rem;
    }

    .solution-3-advantages {
        padding: 60px 0;
    }

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

    /* 2 columns on mobile */
    .advantage-item {
        min-height: 180px;
        padding: 20px;
    }

    .advantage-value {
        font-size: 1.6rem;
    }

    .solution-3-cases .case-study-content h3 {
        font-size: 1.6rem;
    }

    .solution-3-cases .case-study-content li {
        font-size: 1rem;
    }

    .solution-3-cases .case-study-image {
        width: 100%;
    }
}

.situation-card img {
    position: absolute;
    top: 0;
    right: 0;
    width: 120px; /* 放大两倍 */
    height: 120px; /* 放大两倍 */
    transform-origin: left top; /* 以左上角为锚点 */
    z-index: 0; /* 置于容器所有内容的底部 */
    overflow: hidden;
    object-position: left top; /* 以左上角为锚点 */
    opacity: 1;
}

@media (max-width: 992px) {
    .situation-grid {
        grid-template-columns: 1fr;
    }
    
    .situation-card.hong-kong {
        grid-row: auto;
    }
}

.solution-image video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
}

.solutions .solution-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

/* Remove hover effect */
.solutions .solution-image:hover img {
    transform: none;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

/* ============================== */
/* Styles for Solution 4 Page     */
/* ============================== */

/* Solution 4 Hero Section */
.solution-4-hero {
    /* Reusing common solution hero styles, adjusting background */
    background-image: url('files/img/Solution_4/Intro/bg_Section_HeroActions.jpg'); 
    background-size: cover;
    background-position: center;
    color: white;
    padding: 42px 0 42px; /* Reduced padding to match Solution 1 */
}

.solution-4-hero::before {
    /* Optional overlay if needed */
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.2)); /* Slightly darker overlay */
    z-index: 1;
}

.solution-4-hero .solution-hero-content {
    max-width: 50%;
    position: relative;
    z-index: 2;
}

.solution-4-hero .solution-hero-image {
    max-width: 45%;
    position: relative;
    z-index: 2;
    text-align: center;
}

.solution-4-hero .solution-hero-image img {
    max-width: 80%;
    height: auto;
}

/* Solution 4 Quote Section */
.solution-4-quote {
    padding: 40px 0 60px; 
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, #F1F6FD 100%); /* Gradient from white to light blue */
    position: relative;
    overflow: hidden;
}

.solution-4-quote .quote-box {
    background-color: #ffffff; 
    padding: 40px 60px; 
    border-radius: 15px; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); 
    position: relative; 
    max-width: 950px; 
    margin: 0 auto; 
    color: var(--text);
    font-size: 1.1rem; 
    line-height: 1.7; 
    text-align: left;
    border: 1px solid #e0e8f3;
}

/* Add blue decorative border elements */
.solution-4-quote .quote-box::before, 
.solution-4-quote .quote-box::after {
    content: '';
    position: absolute;
    background-color: #3355ff;
    z-index: -1;
}

.solution-4-quote .quote-box::before { /* Top-left corner */
    top: -5px;
    left: -5px;
    width: 100px;
    height: 100px;
    border-top-left-radius: 15px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.solution-4-quote .quote-box::after { /* Bottom-right corner */
    bottom: -5px;
    right: -5px;
    width: 100px;
    height: 100px;
    border-bottom-right-radius: 15px;
    clip-path: polygon(100% 100%, 0 100%, 100% 0);
}

.solution-4-quote .quote-author {
    text-align: right;
    margin-top: 20px;
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Bridge Challenges Section */
.bridge-challenges {
    padding: 80px 0;
    background-color: #F8F9FF; /* Light blue background to match design */
}

.bridge-challenges .section-title {
    text-align: center;
    color: var(--text-dark);
    margin-bottom: 60px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bridge-challenges .section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    width: 80px;
    height: 4px;
    background: var(--primary);
    border-radius: 2px;
}

.bridge-challenge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.bridge-challenge-card {
    background-color: #F1F6FD; /* Light blue background for cards */
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    padding-bottom: 30px;
}

.bridge-challenge-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.bridge-challenge-card img {
    width: 100%;
    height: 200px; /* Fixed height for consistency */
    object-fit: cover;
    display: block;
}

.bridge-challenge-icon {
    position: absolute;
    left: 50%;
    top: 170px; /* Position icon to overlap the image and content */
    transform: translateX(-50%);
    width: 80px; /* Larger icon */
    height: 80px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    padding: 3px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border: 1px solid #e8e8e8;
}

.bridge-challenge-icon img {
    width: 140%;
    height: 140%;
    object-fit: contain;
}

.bridge-challenge-content {
    padding: 60px 25px 15px; /* Increased top padding to account for icon */
    text-align: center;
}

.bridge-challenge-card h3 {
    font-size: 1.4rem;
    color: var(--dark);
    margin-bottom: 15px;
    font-weight: 500;
}

.bridge-challenge-card p {
    font-size: 1rem;
    color: #555555;
    line-height: 1.6;
}

@media (max-width: 992px) {
    .bridge-challenge-grid {
        grid-template-columns: 1fr;
        max-width: 550px;
    }
}

@media (max-width: 768px) {
    .bridge-challenge-card h3 {
        font-size: 1.3rem;
    }
    
    .bridge-challenge-card img {
        height: 180px;
    }
    
    .bridge-challenge-icon {
        top: 150px;
        width: 60px;
        height: 60px;
    }
    
    .bridge-challenge-content {
        padding-top: 50px;
    }
}

/* Solving Approach Section (Solution 4) */
.solution-4-approach {
    padding: 100px 0;
    background-color: #030303; /* Dark background */
    color: white;
}

.solution-4-approach .section-title {
    margin-bottom: 20px;
}

.approach-intro {
    text-align: center;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 60px;
}

.approach-details {
    display: flex;
    gap: 50px;
    align-items: center;
    margin-bottom: 80px;
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
}

.approach-details:last-child {
    margin-bottom: 0;
}

.approach-details.drone-section { /* Specific styling for drone section layout */
    flex-direction: row-reverse;
}

.approach-image {
    flex: 1.2; /* Give image slightly more space */
    text-align: center;
}

.approach-image img {
    max-width: 100%;
    border-radius: 10px;
}

.approach-text {
    flex: 1;
}

.approach-text h3 {
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 15px;
    color: white;
}

.approach-text p {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 25px;
}

.approach-text ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.approach-text li {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 12px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.approach-text li:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.approach-text li i {
    color: var(--primary);
    font-size: 1.2rem;
    width: 20px; /* Fixed width for alignment */
    text-align: center;
}

.approach-text li strong {
    font-weight: 500;
}

/* Successful Case Section */
.successful-case-section {
    padding: 80px 0;
    background-color: #F5F5F5;
}

.case-content-wrapper {
    display: flex;
    justify-content: space-around; /* Adjust spacing */
    align-items: center;
    gap: 25%; /* Gap between items */
    position: relative; /* For layering */
    background-image: url('files/img/Solution_4/Pic_Case_gallery.png');
    background-size: cover;
    background-position: center;
    padding: 64px; /* Add padding */
    border-radius: 16px;
    overflow: hidden;
    min-height: 400px; /* Ensure height */
    min-width: 1200px; 
}

/* Optional overlay for contrast */
.case-content-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.15); /* Light overlay */
    z-index: 1;
    border-radius: 16px;
}

.case-stats-box {
    /* Ensure existing styles are preserved */
    flex: 0 0 auto;
    text-align: center;
    padding: 30px;
    background: rgba(241, 246, 253, 0.60);
    border-radius: 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: relative; /* Keep relative for its ::before */
    z-index: 5; /* Above background gallery, below table overlay */
}

.case-stats-box::before { /* Keep the border effect */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 0.5px;
    background: linear-gradient(to bottom, #A5C3FF, #001E6C);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

.case-stats-box .stat-number { /* Keep existing styles */
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 10px;
    line-height: 1.2;
    min-height: 4.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.case-stats-box .stat-label { /* Keep existing styles */
    font-size: 1.2rem;
    color: var(--text-dark);
    font-weight: 500;
}

/* Styles for the Table Image */
.case-table-overlay {
    position: relative; /* Keep in flex flow */
    z-index: 2; /* Above background/overlay */
    width: 45%; /* Make it smaller */
    max-width: 300px; /* Max width */
    height: auto; /* Auto height */
    border-radius: 12px; /* Match reference */
    box-shadow: none; /* No shadow */
    border: none; /* No border */
    object-fit: contain;
}

/* Remove styles for deleted elements */
/* .case-image { ... } */
/* .case-gallery-bg { ... } */


/* Responsive for Successful Case Section */
@media (max-width: 992px) {
    .case-content-wrapper {
        flex-direction: column;
        padding: 30px;
        background-image: none;
        background-color: #F5F5F5;
        min-height: auto;
    }
    .case-content-wrapper::before {
        display: none; /* Hide overlay */
    }
    .case-table-overlay {
        order: 0; /* Table first */
        width: 100%;
        max-width: 500px; /* Limit width */
        margin-bottom: 25px;
    }
    .case-stats-box {
        order: 1; /* Stats box second */
        width: 100%;
        max-width: 350px; /* Limit width */
    }
}

@media (max-width: 576px) {
     .case-table-overlay {
         max-width: 100%;
     }
     .case-stats-box {
         padding: 20px;
         max-width: 300px;
     }
     .case-stats-box .stat-number {
         font-size: 2.5rem;
         min-height: auto;
     }
     .case-stats-box .stat-label {
         font-size: 1rem;
     }
}
/* ============================== */

/* ============================== */
/* Styles for Application Scenarios Section */
/* ============================== */
.application-scenarios-section {
    padding: 100px 0;
    background-color: #030303; /* Dark background */
    color: white;
}

.application-scenarios-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 60px;
    margin-top: 10px; /* Space below title */
}

.scenario-content {
    display: flex;
    align-items: center; /* Vertically center items */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative; /* Add this for absolute positioning context */
}

.scenario-video {
    flex: 1;
    /* Make this a flex container to center children */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* padding-right: 20px; Ensure some space */
}

/* Style for the new case study image */
.scenario-case-study-image {
    display: block; /* Ensure it's a block element */
    max-width: 50%; /* Max width relative to its container (.scenario-video) */
    height: auto;
    margin-bottom: 30px; /* Space below the image, above the video */
    /* No extra styles needed as per request */
}

.scenario-video-container {
    position: relative;
    box-shadow: 
        inset 9px 9px 28.1px 0 rgba(255, 255, 255, 0.40),
        0 0 20px 2px rgba(241, 246, 253, 0.40),
        0 0 60px 1px rgba(241, 246, 253, 0.40);
    overflow: hidden; /* Clip video to rounded corners */
    border-radius: 12px;
    /* Remove border-image as it conflicts with border-radius */
    border: 1px solid rgba(255, 255, 255, 0.5); /* Use a solid border with transparency instead */
}

.scenario-video video {
    display: block; /* Remove extra space below video */
    width: 100%;
    height: auto;
    /* Removed border-radius from video itself */
}

.scenario-image {
    flex: 1;
    text-align: center; /* Center image if it's smaller than flex container */
    /* padding-left: 20px; Ensure some space */
}

.scenario-image img {
    max-width: 80%;
    height: auto;
    display: inline-block; /* Allows centering */
}

/* Robot image overlay */
.scenario-robot-overlay {
    position: absolute;
    width: 50%; /* Adjust size as needed */
    max-width: 280px;
    height: auto;
    z-index: 10; /* Ensure it's above other content */
    transition: all 0.3s ease;
    pointer-events: none; /* Prevent interaction if it overlaps */
    /* top: -20px; REMOVED */
    /* transform: translateY(-10%); REMOVED */
}

/* Responsive for Application Scenarios */
@media (min-width: 993px) {
    .scenario-robot-overlay {
        /* Position between video and image, slightly above center */
        top: 35%; /* Adjusted from 40% to move higher */
        left: 50%;
        transform: translate(-50%, -50%); 
    }
}

@media (max-width: 992px) {
    .scenario-content {
        flex-direction: column;
        gap: 50px;
        position: relative; /* Needed for absolute positioning of robot */
        padding-bottom: 15%; /* Add padding to make space for robot below video */
    }
    .scenario-video {
        width: 80%; /* Center video container */
        margin: 0 auto;
        padding-right: 0;
    }
    .scenario-image {
        width: 70%;
        margin-left: auto; /* Push the container to the right */
        text-align: right; /* Align image to the right */
        padding-left: 0;
    }
    .scenario-image img {
         max-width: 80%; /* Match video width */
         margin-right: 10%; /* Align right edge with video right edge */
    }

    .scenario-robot-overlay {
        /* Position between video and image, aligned left with video */
        top: auto; /* Reset top */
        bottom: 40%; /* Position relative to bottom of scenario-content */
        left: 10%; /* Align with left edge of video container (which is centered with 80% width) */
        transform: none; /* Reset transform */
         width: 50%; /* Adjust size for smaller screens */
         max-width: 320px;
    }
}

@media (max-width: 768px) {
    .scenario-video {
        width: 95%; /* Wider on smaller screens */
    }
     .scenario-image img {
         max-width: 95%; /* Wider on smaller screens */
         margin-right: 2.5%; /* Adjust right alignment */
    }
}

/* ============================== */

/* ============================== */
/* Styles for Solution 5 Features Section */
/* ============================== */
.features-section {
    padding: 100px 0;
    background-color: #030303; /* Dark background */
}

.features-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    max-width: 800px;
    margin: 20px auto 60px auto; /* Top, auto left/right, bottom */
    font-size: 1.1rem;
    line-height: 1.6;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three equal columns */
    gap: 40px; /* Gap between cards */
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card {
    text-align: center; /* Center image if grid cell is wider */
}

.feature-card img {
    max-width: 100%;
    height: auto;
    display: block; /* Remove extra space */
    margin: 0 auto; /* Center image within card if needed */
    transition: transform 0.3s ease, filter 0.3s ease; /* Add transition */
}

/* Hover effect for feature cards */
.feature-card:hover img {
    transform: scale(1.03); /* Slightly scale up */
    filter: brightness(1.05); /* Slightly increase brightness */
}

/* Responsive layout for Features section */
@media (max-width: 992px) {
    .features-grid {
        grid-template-columns: 1fr; /* Single column */
        justify-items: center; /* Center cards horizontally */
        gap: 30px;
        max-width: 500px; /* Limit width of single column */
    }
    .feature-card {
        width: 100%; /* Ensure card takes full width of grid area */
    }
}

@media (max-width: 768px) {
    .features-grid {
         max-width: 400px;
    }
    .features-subtitle {
        font-size: 1rem;
    }
}

/* ============================== */

/* ============================== */
/* Styles for Solution 5 Video Section */
/* ============================== */

.solution-5-hero {
    padding: 30px 0;
}

.solution-5-video-section {
    padding: 80px 0; /* Add padding */
    background: linear-gradient(180deg, #FFF 77.35%, rgba(118, 155, 250, 0.10) 150%), #FFF; /* Subtle gradient */
}

.video-wrapper {
    border-radius: 24px; /* Large radius */
    border: 1px solid #E0E8F3; /* Subtle border */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); /* Subtle shadow */
    overflow: hidden; /* Clip video */
    max-width: 1000px; /* Limit max width */
    margin: 0 auto; /* Center the wrapper */
}

/* Ensure video container fills wrapper */
.s5-video-container {
    width: 100%; 
    position: relative; 
    line-height: 0; /* Remove potential extra space */
    /* Resetting styles that might be inherited or applied generally */
    border: none;
    box-shadow: none;
    border-radius: 0; 
    overflow: hidden; /* Ensures video corners are clipped if wrapper radius isn't enough */
}

.s5-video-container .demo-video {
    width: 100%;
    display: block;
    border-radius: 0; /* Video fills the container */
}

/* Hide controls and overlay for now */
.s5-video-container .video-controls,
.s5-video-container .video-overlay {
    /* display: none; */
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0; /* Hidden by default, shown on hover via JS */
    transition: opacity 0.3s ease;
    pointer-events: none; /* Allow clicks to pass through overlay initially */
}

.s5-video-container .video-controls {
    bottom: 0;

    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    pointer-events: auto; /* Enable interaction with controls */
    border-bottom-left-radius: 24px; /* Match wrapper radius */
    border-bottom-right-radius: 24px;
}

.s5-video-container .video-overlay {
    top: 0;
    height: 100%; /* Cover area above controls */
    display: flex;
    justify-content: center;
    align-items: center;
}

.s5-video-container .play-pause-btn {
    background: rgba(255,255,255,0.85);
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #333;
    font-size: 20px;
    pointer-events: auto; /* Enable interaction with button */
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.s5-video-container .play-pause-btn:hover {
    background: rgba(255,255,255,1);
    transform: scale(1.1);
}


@media (max-width: 992px) {
    .solution-5-hero {
        padding: 72px 0 30px;
}
}
/* ============================== */

/* ============================== */
/* Styles for Meet the Team Section (About Page) */
/* ============================== */
.team-section {
    padding: 100px 0;
    background-color: #FFFFFF; /* Light blue background, consistent */
}

.team-section .section-title {
    margin-bottom: 30px;
}

.team-category {
    margin-bottom: 50px;
}
.team-category-title {
    font-size: 1.8rem;
    color: var(--primary);
    text-align: center;
    margin-bottom: 40px;
    font-weight: 500;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.team-category-title::before,
.team-category-title::after {
    content: '';
    height: 1px;
    background-color: #e0e0e0;
    flex-grow: 1;
}

.team-category-title::before {
    margin-right: 20px;
}

.team-category-title::after {
    margin-left: 20px;
}

@media (max-width: 768px) {
    .team-category-title::before,
    .team-category-title::after {
        width: 50px;
        flex-grow: 0;
    }
}

@media (max-width: 480px) {
    .team-category-title {
        font-size: 1.5rem;
    }
    
    .team-category-title::before,
    .team-category-title::after {
        width: 30px;
    }
}

.team-grid {
    display: grid;
    gap: 30px;
    justify-content: center; /* Center grid items if they don't fill space */
}

/* Specific grid layout for professor (potentially just one) */
.professor-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 300px)); /* Allow flexibility, max width */
}

/* Specific grid layout for members */
.members-grid {
    grid-template-columns: repeat(3, 1fr); /* Start with 3 columns */
}

.team-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eef2f9;
    overflow: hidden; /* Ensure image corners are clipped if needed */
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(51, 85, 255, 0.12);
}

/* Removed .team-image-placeholder rule */

/* Styles for actual team images */
.team-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover; /* Cover the area, might crop */
    margin: 0 auto 15px auto;
    display: block;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.team-name {
    font-size: 1.2rem; /* Slightly smaller */
    color: var(--dark);
    margin-bottom: 10px; /* Adjusted margin after removing role */
    font-weight: 600;
}

.team-description {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 0;
    /* min-height: 4.5em; REMOVED - Let height be natural */
}


/* ============================== */

/* Responsive adjustments for team grids */
@media (max-width: 992px) {
    .members-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
    }
    .professor-grid {
        /* Keep professor grid flexible or set to 2 columns */
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .members-grid,
    .professor-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
        max-width: 350px; /* Limit width on mobile */
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================== */