/* General Body Styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    color: #333;
    background-color: #f8f9fa;
}

.container {
    max-width: 70vw;
    width: 100%;
    margin: 0 auto;
    padding: 0 1.042vw;
}

/* Header */
header {
    background: #fff;
    padding: 0.781vw 0;
    border-bottom: 0.052vw solid #e9ecef;
    height: 5.208vw;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

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

.logo img {
    width: 2.188vw;
    height: 2.188vw;
}

.logo-text {
    display: flex;
    flex-direction: column;
    gap: 0.417vw;
}

.chinese-name {
    font-size: 1.354vw;
    font-weight: bold;
    color: #0067E3;
    line-height: 1;
}

nav {
    display: flex;
    align-items: center;
    gap: 5.469vw;
}

nav a {
    color: #9A9A9A;
    text-decoration: none;
    font-size: 0.938vw;
    font-weight: 500;
    transition: color 0.3s ease;
    white-space: nowrap;
}

nav a:hover {
    color: #0067E3;
}

/* Hero Section */
.hero {
    background: url('img/hero-banner.webp') no-repeat center center/cover;
    color: #fff;
    text-align: center;
    height: 43.229vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 3.75vw 0 0 0;
    position: relative;
    overflow: hidden;
}

.hero h1 {
    font-size: 3.125vw;
    margin-bottom: 1.042vw;
}

.hero h2 {
    font-size: 1.979vw;
    margin: 0 auto;
    line-height: 2;
    color: #D2E4FE;
    font-weight: 400;
    margin-bottom: 3.125vw;
}

.hero-phones {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3.385vw;
    position: absolute;
    bottom: -8vw;
    left: 50%;
    transform: translateX(-50%);
}

.hero-phones img {
    height: auto;
    display: block;
}

.phone-left {
    width: 16.094vw;
    height: 32.813vw;
}

.phone-center {
    width: 18.177vw;
    height: 37.135vw;
    z-index: 2;
    position: relative;
}

.phone-right {
    width: 16.094vw;
    height: 32.813vw;
}

.hightlight {
    color: #FF4715;
}

/* Audience Section */
.audience {
    background: url('img/audience_bg.webp') no-repeat center center/cover;
    position: relative;
    height: 32.552vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.audience h2 {
    font-size: 2.188vw;
    color: #333333;
    font-weight: bold;
    text-align: center;
    margin-bottom: 3.125vw;
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75vw;
    max-width: 100%;
}

.audience-card {
    background: linear-gradient(to bottom, #D1E6FF 0%, #FFFFFF 35%);
    border-radius: 0.521vw;
    padding: 2.969vw 1.823vw;
    text-align: center;
    box-shadow: 0 0.26vw 1.042vw rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.audience-card:hover {
    transform: translateY(-0.521vw);
    box-shadow: 0 0.521vw 1.563vw rgba(0, 0, 0, 0.12);
}

.audience-card h3 {
    font-size: 1.458vw;
    color: #0071EF;
    font-weight: 400;
    margin: 0 0 1.302vw;
    padding-bottom: 1.042vw;
    border-bottom: 0.052vw solid #B4B4B4;
    width: 100%;
}

.audience-card p {
    font-size: 1.042vw;
    color: #797979;
    line-height: 1.6;
    margin: 0;
    text-align: center;
}

/* Details Section */
.details {
    padding: 5.208vw 0;
    background-color: #fff;
}

.details h2 {
    font-size: 2.188vw;
    color: #333333;
    font-weight: bold;
    text-align: center;
    margin-bottom: 5vw;
}

.details-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.604vw;
    max-width: 100%;
    overflow: hidden;
}

.details-features {
    flex: 1;
    min-width: 0;
}

.detail-item {
    width: 36.458vw;
    max-width: 100%;
    height: 7.083vw;
    display: flex;
    align-items: center;
    margin-bottom: 1.563vw;
    padding: 1.302vw 1vw;
    border-radius: 0.521vw;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-sizing: border-box;
}

.detail-item.active,
.detail-item:hover {
    background-image: linear-gradient(to right, #FFFFFF 0%, #C1DEFF 100%);
}

.detail-item:last-child {
    margin-bottom: 0;
}

.detail-icon {
    margin-right: 1.771vw;
    filter: none;
    transition: filter 0.3s ease;
}

.detail-icon img {
    width: 3.438vw;
    height: auto;
}

.detail-text {
    flex: 1;
}

.detail-text h3 {
    font-size: 1.458vw;
    color: #666666;
    margin: 0 0 0.573vw;
    transition: color 0.3s ease;
}

.detail-text p {
    font-size: 1.042vw;
    color: #888888;
    margin: 0;
    transition: color 0.3s ease;
}

.detail-item.active .detail-text h3,
.detail-item:hover .detail-text h3 {
    color: #2359E1;
}

.detail-item.active .detail-text p,
.detail-item:hover .detail-text p {
    color: #3F78B8;
}

.detail-item:not(.active):not(:hover) .detail-text h3 {
    color: #666666;
}

.detail-arrow {
    margin-left: 1vw;
    opacity: 0;
    transform: translateX(-0.521vw);
    transition: all 0.3s ease;
}

.detail-arrow img {
    width: 2.813vw;
    height: 2.813vw;
}

.detail-item.active .detail-arrow,
.detail-item:hover .detail-arrow {
    opacity: 1;
    transform: translateX(0);
}

.mock-phone {
    flex: 0 0 33.177vw;
    max-width: 33.177vw;
    text-align: center;
    position: relative;
    background: url('img/phone_bg.webp') no-repeat center center;
    background-size: 100% 100%;
}

.mock-phone img {
    width: 13.854vw;
    height: 34.271vw;
    display: block;
    margin: 0 auto;
}

#phone-screen {
    position: relative;
    z-index: 1;
}

/* About Us Section */
.about-us {
    padding: 5.156vw 0;
    background-color: #F5F8FA;
}

.about-us h2 {
    font-size: 2.188vw;
    color: #333333;
    font-weight: bold;
    text-align: center;
    margin-bottom: 5.156vw;
}

.about-content {
    display: flex;
    gap: 3.125vw;
    align-items: flex-start;
}

.about-text {
    flex: 1;
    color: #666666;
    height: 25.469vw;
}

.about-text p {
    font-size: 1.042vw;
    margin: 0 auto;
    color: #797979;
    font-weight: 400;
}

.about-values {
    margin: 2.65vw 0;
    border-radius: 0.521vw;
}

.about-values p {
    margin: 0.833vw 0;
    font-size: 1.25vw;
    line-height: 1.6;
    color: #333333;
    font-weight: bold;
}

.about-values p:first-child {
    margin-top: 0;
}

.about-values p:last-child {
    margin-bottom: 0;
}

.about-values strong {
    color: #333333;
    font-weight: bold;
}

.about-images {
    flex: 0 0 auto;
    display: flex;
    gap: 0.469vw;
}

.about-images img {
    width: 11.563vw;
    height: 25.469vw;
    object-fit: cover;
    display: block;
}

/* Footer */
footer {
    background-color: #2C2C2C;
    color: #999999;
    padding: 3.385vw 0 2.135vw;
}

.footer-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 2.083vw;
    flex-wrap: wrap;
    border-bottom: 0.052vw solid #BBBBBB;
    padding-bottom: 2.865vw;
}

footer .container {
    padding: unset;
}

.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: 1.302vw;
}

.footer-logo img {
    width: 2.083vw;
    height: 2.083vw;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-text span:first-child {
    font-size: 1.146vw;
    font-weight: bold;
    color: #fff;
}

.footer-about {
    flex-basis: 25%;
}

.footer-desc {
    padding-bottom: 2.865vw;
}

.footer-about p {
    line-height: 1;
    margin-top: 0;
    font-size: 0.729vw;
    color: #BCBEC6;
}

.footer-links h4,
.footer-contact h4 {
    color: #0086FF;
    margin-bottom: 1.667vw;
    font-size: 0.833vw;
}

.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links ul li a {
    font-size: 0.729vw;
    color: #BCBEC6;
    text-decoration: none;
    line-height: 2;
    transition: color 0.3s ease;
}

.footer-links ul li a:hover {
    color: #fff;
}

.footer-contact p {
    margin: 0 0 0.521vw;
    font-size: 0.729vw;
    color: #BCBEC6;
}

.copyright {
    text-align: center;
    margin-top: 1.771vw;
    font-size: 0.625vw;
    color: #BCBEC6;
}

.copyright p {
    margin: 0.26vw 0;
    font-size: 0.729vw;
}

.copyright a {
    text-decoration: none;
    color: #BCBEC6;
    font-size: 0.729vw;
}

.footer-contact {
    padding-top: 3.184vw;
}