/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #00A2E2;
    --secondary-color: #0057C2;
    --bg-color: #ffffff;
    --text-color: #000000;
    --text-secondary: #666666;
    --transition: all 0.3s ease;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.container.menu {
    max-width: 1160px;
}

.container.why::before {
    content: '';
    position: absolute;
    max-width: 1040px;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 80px;
    background-color: #ffffff;
    border-radius: 2.125rem 2.125rem 0 0;
}



/* 顶部导航 */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 15px 0;
    background-color: rgba(0, 0, 0, 0.95);
    transition: var(--transition);
}

.header.scrolled {
    background-color: rgba(22, 22, 23, .8);
    backdrop-filter: saturate(180%) blur(20px);
    padding: 15px 0;
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
}

.logo img {
    height: 30px;
    width: auto;
}

.nav {
    display: flex;
    align-items: center;
    gap: 40px;
}

.nav-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    transition: var(--transition);
    position: relative;
}

.nav-link:hover {
    color: var(--primary-color);
}

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

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link.active {
    color: var(--primary-color);
}

.language-switcher {
    display: flex;
    align-items: center;
    /* gap: 8px; */
}

.lang-icon {
    width: 18px;
    height: 18px;
    margin-right: 4px;
    opacity: 0.8;
}

.lang-divider {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    user-select: none;
}

.lang-btn {
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition);
}

.lang-btn:hover {
    color: var(--primary-color);
}

.lang-btn.active {
    color: #ffffff;
    font-weight: 600;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: #ffffff;
    border-radius: 2px;
    transition: var(--transition);
}

/* Hero Banner */
.hero {
    position: relative;
    height: 90vh;
    min-height: 600px;
    background-image: url('assets/bg.jpg');
    background-size: cover;
    background-position: center;
    /* background-attachment: fixed; */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #ffffff;
    padding: 0 20px;
}

.hero-title {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* Stars Animation */
  #stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 953px 496px #FFF , 1500px 27px #FFF , 302px 1119px #FFF , 1250px 388px #FFF , 1735px 1855px #FFF , 1287px 783px #FFF , 901px 1235px #FFF , 698px 379px #FFF , 496px 1515px #FFF , 1421px 1952px #FFF , 1622px 299px #FFF , 470px 1155px #FFF , 253px 1081px #FFF , 295px 862px #FFF , 322px 830px #FFF , 1261px 1821px #FFF , 1050px 1027px #FFF , 609px 1981px #FFF , 1778px 1853px #FFF , 1025px 27px #FFF , 455px 1792px #FFF , 332px 1617px #FFF , 147px 1830px #FFF , 186px 1959px #FFF , 1160px 522px #FFF , 842px 506px #FFF , 1814px 573px #FFF , 584px 438px #FFF , 112px 673px #FFF , 586px 1401px #FFF , 730px 533px #FFF , 1685px 1763px #FFF , 1271px 678px #FFF , 103px 1859px #FFF , 506px 219px #FFF , 1285px 1414px #FFF , 354px 1339px #FFF , 1824px 1438px #FFF , 1446px 1717px #FFF , 255px 1232px #FFF , 1121px 1659px #FFF , 922px 458px #FFF , 1799px 258px #FFF , 625px 717px #FFF , 703px 705px #FFF , 1499px 1593px #FFF , 1048px 534px #FFF , 191px 456px #FFF , 90px 1599px #FFF , 1206px 273px #FFF , 1184px 1110px #FFF , 443px 802px #FFF , 1303px 63px #FFF , 1190px 1310px #FFF , 566px 291px #FFF , 973px 1148px #FFF , 855px 1559px #FFF , 1920px 1440px #FFF , 188px 1806px #FFF , 101px 69px #FFF , 827px 1562px #FFF , 1604px 958px #FFF , 1456px 599px #FFF , 433px 1328px #FFF , 1691px 679px #FFF , 1843px 641px #FFF , 103px 571px #FFF , 1394px 768px #FFF , 517px 584px #FFF , 913px 702px #FFF , 1797px 1184px #FFF , 55px 216px #FFF , 1653px 1033px #FFF , 801px 511px #FFF , 1045px 572px #FFF , 1427px 1036px #FFF , 1784px 251px #FFF , 1119px 1284px #FFF , 1482px 673px #FFF , 769px 778px #FFF , 298px 641px #FFF , 70px 1770px #FFF , 385px 1144px #FFF , 781px 235px #FFF , 411px 1641px #FFF , 344px 1111px #FFF , 1424px 1585px #FFF , 1952px 1792px #FFF , 1175px 768px #FFF , 1847px 1477px #FFF , 6px 514px #FFF , 546px 1670px #FFF , 922px 92px #FFF , 1896px 1677px #FFF , 1715px 659px #FFF , 196px 1479px #FFF , 1015px 143px #FFF , 1449px 1698px #FFF , 1795px 35px #FFF , 1454px 741px #FFF;
    animation: animStar 50s linear infinite;
  }
  #stars:after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 953px 496px #FFF , 1500px 27px #FFF , 302px 1119px #FFF , 1250px 388px #FFF , 1735px 1855px #FFF , 1287px 783px #FFF , 901px 1235px #FFF , 698px 379px #FFF , 496px 1515px #FFF , 1421px 1952px #FFF , 1622px 299px #FFF , 470px 1155px #FFF , 253px 1081px #FFF , 295px 862px #FFF , 322px 830px #FFF , 1261px 1821px #FFF , 1050px 1027px #FFF , 609px 1981px #FFF , 1778px 1853px #FFF , 1025px 27px #FFF , 455px 1792px #FFF , 332px 1617px #FFF , 147px 1830px #FFF , 186px 1959px #FFF , 1160px 522px #FFF , 842px 506px #FFF , 1814px 573px #FFF , 584px 438px #FFF , 112px 673px #FFF , 586px 1401px #FFF , 730px 533px #FFF , 1685px 1763px #FFF , 1271px 678px #FFF , 103px 1859px #FFF , 506px 219px #FFF , 1285px 1414px #FFF , 354px 1339px #FFF , 1824px 1438px #FFF , 1446px 1717px #FFF , 255px 1232px #FFF , 1121px 1659px #FFF , 922px 458px #FFF , 1799px 258px #FFF , 625px 717px #FFF , 703px 705px #FFF , 1499px 1593px #FFF , 1048px 534px #FFF , 191px 456px #FFF , 90px 1599px #FFF , 1206px 273px #FFF , 1184px 1110px #FFF , 443px 802px #FFF , 1303px 63px #FFF , 1190px 1310px #FFF , 566px 291px #FFF , 973px 1148px #FFF , 855px 1559px #FFF , 1920px 1440px #FFF , 188px 1806px #FFF , 101px 69px #FFF , 827px 1562px #FFF , 1604px 958px #FFF , 1456px 599px #FFF , 433px 1328px #FFF , 1691px 679px #FFF , 1843px 641px #FFF , 103px 571px #FFF , 1394px 768px #FFF , 517px 584px #FFF , 913px 702px #FFF , 1797px 1184px #FFF , 55px 216px #FFF , 1653px 1033px #FFF , 801px 511px #FFF , 1045px 572px #FFF , 1427px 1036px #FFF , 1784px 251px #FFF , 1119px 1284px #FFF , 1482px 673px #FFF , 769px 778px #FFF , 298px 641px #FFF , 70px 1770px #FFF , 385px 1144px #FFF , 781px 235px #FFF , 411px 1641px #FFF , 344px 1111px #FFF , 1424px 1585px #FFF , 1952px 1792px #FFF , 1175px 768px #FFF , 1847px 1477px #FFF , 6px 514px #FFF , 546px 1670px #FFF , 922px 92px #FFF , 1896px 1677px #FFF , 1715px 659px #FFF , 196px 1479px #FFF , 1015px 143px #FFF , 1449px 1698px #FFF , 1795px 35px #FFF , 1454px 741px #FFF;
  }
  
  #stars2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 433px 787px #FFF , 1476px 1339px #FFF , 219px 343px #FFF , 1950px 414px #FFF , 761px 844px #FFF , 673px 1216px #FFF , 78px 1969px #FFF , 91px 359px #FFF , 996px 371px #FFF , 1296px 1666px #FFF , 1727px 325px #FFF , 1360px 406px #FFF , 602px 1197px #FFF , 1006px 1048px #FFF , 1767px 842px #FFF , 1455px 388px #FFF , 568px 163px #FFF , 1181px 1966px #FFF , 1585px 1681px #FFF , 1632px 639px #FFF , 1507px 256px #FFF , 571px 542px #FFF , 1583px 400px #FFF , 1580px 1034px #FFF , 65px 1936px #FFF , 322px 1424px #FFF , 91px 1335px #FFF , 1520px 57px #FFF , 510px 1619px #FFF , 1233px 1751px #FFF , 1457px 1329px #FFF , 1703px 723px #FFF , 375px 420px #FFF , 81px 364px #FFF , 374px 134px #FFF , 737px 1184px #FFF , 116px 921px #FFF , 766px 610px #FFF , 612px 1420px #FFF , 467px 384px #FFF , 1411px 1885px #FFF , 1579px 967px #FFF , 1615px 954px #FFF , 840px 136px #FFF , 703px 1968px #FFF , 1838px 1748px #FFF , 362px 255px #FFF , 680px 1979px #FFF , 1488px 575px #FFF , 504px 1498px #FFF , 1643px 500px #FFF , 878px 576px #FFF , 1157px 1120px #FFF , 923px 1603px #FFF , 1054px 1151px #FFF , 634px 209px #FFF , 1601px 1259px #FFF , 1408px 1700px #FFF , 1181px 928px #FFF , 298px 1020px #FFF , 1981px 1099px #FFF , 1545px 1181px #FFF , 1247px 65px #FFF , 922px 779px #FFF , 988px 481px #FFF , 1080px 459px #FFF , 69px 549px #FFF , 1091px 466px #FFF , 1158px 446px #FFF , 776px 728px #FFF;
    animation: animStar 100s linear infinite;
  }
  #stars2:after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 433px 787px #FFF , 1476px 1339px #FFF , 219px 343px #FFF , 1950px 414px #FFF , 761px 844px #FFF , 673px 1216px #FFF , 78px 1969px #FFF , 91px 359px #FFF , 996px 371px #FFF , 1296px 1666px #FFF , 1727px 325px #FFF , 1360px 406px #FFF , 602px 1197px #FFF , 1006px 1048px #FFF , 1767px 842px #FFF , 1455px 388px #FFF , 568px 163px #FFF , 1181px 1966px #FFF , 1585px 1681px #FFF , 1632px 639px #FFF , 1507px 256px #FFF , 571px 542px #FFF , 1583px 400px #FFF , 1580px 1034px #FFF , 65px 1936px #FFF , 322px 1424px #FFF , 91px 1335px #FFF , 1520px 57px #FFF , 510px 1619px #FFF , 1233px 1751px #FFF , 1457px 1329px #FFF , 1703px 723px #FFF , 375px 420px #FFF , 81px 364px #FFF , 374px 134px #FFF , 737px 1184px #FFF , 116px 921px #FFF , 766px 610px #FFF , 612px 1420px #FFF , 467px 384px #FFF , 1411px 1885px #FFF , 1579px 967px #FFF , 1615px 954px #FFF , 840px 136px #FFF , 703px 1968px #FFF , 1838px 1748px #FFF , 362px 255px #FFF , 680px 1979px #FFF , 1488px 575px #FFF , 504px 1498px #FFF , 1643px 500px #FFF , 878px 576px #FFF , 1157px 1120px #FFF , 923px 1603px #FFF , 1054px 1151px #FFF , 634px 209px #FFF , 1601px 1259px #FFF , 1408px 1700px #FFF , 1181px 928px #FFF , 298px 1020px #FFF , 1981px 1099px #FFF , 1545px 1181px #FFF , 1247px 65px #FFF , 922px 779px #FFF , 988px 481px #FFF , 1080px 459px #FFF , 69px 549px #FFF , 1091px 466px #FFF , 1158px 446px #FFF , 776px 728px #FFF;
  }
  
  #stars3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 2000px 96px #FFF , 175px 1511px #FFF , 1823px 1211px #FFF , 674px 142px #FFF , 793px 1855px #FFF , 635px 476px #FFF , 107px 1138px #FFF , 206px 764px #FFF , 952px 1526px #FFF , 279px 1359px #FFF , 255px 1848px #FFF , 297px 1805px #FFF , 1610px 1484px #FFF , 832px 590px #FFF , 40px 1393px #FFF , 1927px 1112px #FFF , 616px 1067px #FFF , 553px 714px #FFF , 1435px 1615px #FFF , 19px 547px #FFF , 1256px 1308px #FFF , 1751px 581px #FFF , 188px 1555px #FFF , 230px 933px #FFF , 761px 21px #FFF , 481px 31px #FFF , 848px 1853px #FFF , 1030px 1470px #FFF , 1547px 97px #FFF , 996px 299px #FFF;
    animation: animStar 150s linear infinite;
  }
  #stars3:after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 2000px 96px #FFF , 175px 1511px #FFF , 1823px 1211px #FFF , 674px 142px #FFF , 793px 1855px #FFF , 635px 476px #FFF , 107px 1138px #FFF , 206px 764px #FFF , 952px 1526px #FFF , 279px 1359px #FFF , 255px 1848px #FFF , 297px 1805px #FFF , 1610px 1484px #FFF , 832px 590px #FFF , 40px 1393px #FFF , 1927px 1112px #FFF , 616px 1067px #FFF , 553px 714px #FFF , 1435px 1615px #FFF , 19px 547px #FFF , 1256px 1308px #FFF , 1751px 581px #FFF , 188px 1555px #FFF , 230px 933px #FFF , 761px 21px #FFF , 481px 31px #FFF , 848px 1853px #FFF , 1030px 1470px #FFF , 1547px 97px #FFF , 996px 299px #FFF;
  }
  
  @keyframes animStar {
    from {
      transform: translateY(0px);
    }
    to {
      transform: translateY(-2000px);
    }
  }
  

/* 为什么选我们 */
.why-us {
    padding: 30px 0 100px;
    background-color: #ffffff;
    position: relative;
    margin-top: -80px;
    z-index: 2;
}


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

.section-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-color);
}

.section-subtitle {
    font-size: 18px;
    color: var(--text-secondary);
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.8;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.feature-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: var(--transition);
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.feature-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.feature-card:hover .feature-image img {
    transform: scale(1.05);
}

.feature-content {
    padding: 30px;
}

.feature-content h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--secondary-color);
}

.feature-content p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* 产品板块 */
.product {
    padding: 120px 0 100px;
    background-color: #f8f9fa;
    position: relative;
}

.product::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, #f8f9fa, #f8f9fa);
}

.product-header {
    text-align: center;
    margin-bottom: 80px;
}

.product-features {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.product-feature-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.product-feature-item.reverse {
    direction: rtl;
}

.product-feature-item.reverse > * {
    direction: ltr;
}

.product-image {
    width: 80%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.product-image img {
    width: 100%;
    height: auto;
    display: block;
}

.product-feature-content h3 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--secondary-color);
}

.product-feature-content p {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.download-section {
    text-align: center;
    margin-top: 80px;
}

.btn-download {
    padding: 18px 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #ffffff;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(0, 162, 226, 0.3);
}

.btn-download:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 162, 226, 0.4);
}

/* 服务板块 */
.services {
    padding: 120px 0 100px;
    background-color: #ffffff;
    position: relative;
}

.services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, #ffffff, #ffffff);
}

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

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

.service-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: var(--transition);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.service-image {
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.service-card:hover .service-image img {
    transform: scale(1.05);
}

.service-content {
    padding: 40px;
}

.service-content h3 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--secondary-color);
}

.service-content p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* 底部 */
.footer {
    padding: 40px 0;
    background-color: #1a1a1a;
    color: #ffffff;
    text-align: center;
}

.footer p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}


/* 响应式设计 */
@media (min-width: 969px) {
    .nav {
        max-height: none !important;
        overflow: visible !important;
        position: static !important;
        padding: 0 !important;
        flex-direction: row !important;
        background: transparent !important;
    }
}


@media (max-width: 600px) {
    .header.scrolled{
        backdrop-filter:none;
        background-color: rgba(22, 22, 23, .95);
    }

    .nav {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, .95);
        flex-direction: column;
        gap: 20px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease, background-color 0.3s ease
    }

    .header.scrolled .nav{
        background-color: rgba(22, 22, 23, .95);
    }

    .nav.active {
        max-height: 500px;
        padding: 30px 0;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(8px, 8px);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }

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

    .section-title {
        font-size: 32px;
    }

    .product-image {
        width: 100%;
    }
    
    .product-feature-item,
    .product-feature-item.reverse {
        grid-template-columns: 1fr;
        direction: ltr;
        gap: 30px;
    }

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

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

    .section-title {
        font-size: 28px;
    }

    .section-subtitle {
        font-size: 16px;
    }

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

    .feature-content h3 {
        font-size: 20px;
    }

    .product-feature-content h3 {
        font-size: 24px;
    }

    .product-feature-content p {
        font-size: 16px;
    }

    .btn-download {
        padding: 15px 40px;
        font-size: 16px;
    }

    .service-content h3 {
        font-size: 24px;
    }
}