* { box-sizing: border-box; }
body { margin: 0; min-width: 1200px; color: rgba(0, 0, 0, 1.0); background: rgba(255, 255, 255, 1.0); font-family: Inter-Regular, "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
.site-header { height: 74px; padding-top: 8px; }
.brand { max-width: 1511px; height: 66px; margin: auto; display: flex; align-items: center; gap: 13px; color: rgba(23, 186, 188, 1.0); font-size: 24px; line-height: 24px; }
.brand img { display: block; }
.hero { height: 370px; background: url('./images/hero-background.png') center / 100% 100% no-repeat; }
.hero-inner { max-width: 1511px; height: 370px; margin: auto; position: relative; }
.hero-copy { position: relative; z-index: 2; padding-top: 91px; }
h1 { font-family: Inter-Bold, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 64px; line-height: 77px; font-weight: 700; color: rgba(255, 255, 255, 1.0); text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.4); white-space: nowrap; }
.hero-copy p { margin: 47px 0 0 67px; font-size: 36px; line-height: 44px; font-weight: 700; color: rgba(255, 255, 255, 1.0); text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4); white-space: nowrap; }
.hero-art { position: absolute; left: 741px; top: 4px; width: 687px; height: 379px; }
.hero-crop { position: absolute; inset: 0 0 13px -100px; overflow: hidden; }
.hero-art img { position: absolute; display: block; }
.art-circle { left: 100px; top: 0; width: 605px; height: 605px; }
.art-phone { left: 264px; top: 41px; width: 271px; height: 544px; }
.art-employer { left: 293px; top: 166px; width: 209px; height: 94px; }
.art-talent { left: 191px; top: 238px; width: 185px; height: 117px; }
.art-person { left: 378px; top: 64px; width: 309px; height: 315px; }
.bubble { position: absolute; width: 30px; height: 31px; border-radius: 50%; background-image: linear-gradient(180deg, rgba(196, 250, 236, 0.83) 19.230770%, rgba(134, 232, 219, 0.83) 98.076922%); }
.bubble-left { left: 11px; top: 301px; }
.bubble-top { left: 609px; top: 60px; }
.bubble-right { left: 731px; top: 185px; width: 20px; height: 19px; }
.information { max-width: 1555px; min-height: 478px; margin: auto; padding: 52px 0 61px; display: grid; grid-template-columns: 504px 457px 530px; gap: 32px; }
h2 { height: 44px; margin-bottom: 24px; font-size: 36px; line-height: 44px; font-family: Inter-Bold, "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 700; }
.product-description { margin-top: 4px; font-size: 18px; line-height: 40px; }
.features { display: grid; grid-template-columns: repeat(2, 213px); gap: 22px 31px; margin: 51px 0 0 8px; font-size: 18px; line-height: 40px; font-weight: 500; }
.features li { height: 71px; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.advantages h2 { margin-left: 9px; }
.advantages ul { display: grid; gap: 19px; margin-top: 28px; }
.advantages li { min-height: 84px; padding: 20px 16px; font-size: 20px; line-height: 40px; font-weight: 500; border-radius: 10px; }
.advantages li:last-child { margin-top: 6px; }
.download-cards { display: flex; gap: 30px; }
.download-card { width: 250px; height: 300px; border-radius: 10px; background: rgba(255, 255, 255, 1.0); box-shadow: 0px 4px 50px 10px rgba(199, 240, 236, 0.8); display: flex; flex-direction: column; align-items: center; padding: 25px 0 17px; }
.download-card h3 { font-size: 24px; line-height: 29px; font-weight: 500; }
.mini-code { width: 172px; height: 172px; object-fit: contain; margin: 14px auto auto; }
.download-card p { font-size: 16px; line-height: 19px; }
.app-card { box-shadow: 0px 4px 30px 10px rgba(223, 246, 244, 1.0); }
.coming-soon { flex: 1; display: flex; align-items: center; color: rgba(5, 87, 92, 1.0); font-size: 24px; }
.site-footer { min-height: 44px; background: rgba(5, 87, 92, 1.0); color: rgba(255, 255, 255, 1.0); display: flex; align-items: center; justify-content: center; padding: 12px 24px; font-size: 13px; line-height: 20px; }
.site-footer a { color: inherit; margin-left: 12px; text-underline-offset: 3px; }
/* Desktop-only adaptation: retain readable type and an unscaled, complete code. */
@media (max-width: 1679px) {
    .brand, .hero-inner { margin-left: 6%; margin-right: 6%; }
    .hero-art { left: auto; right: -20px; }
    h1 { font-size: 48px; }
    .hero-copy p { font-size: 28px; margin-left: 20px; }
    .hero-copy { z-index: 2; }
    .hero-art { transform: scale(.8); transform-origin: right bottom; }
    .information { margin: 0 4%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 440px; gap: 24px; }
    .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; margin-left: 0; font-size: 18px; }
    .advantages li { padding: 12px 0; font-size: 18px; line-height: 32px; }
    .download-cards { gap: 20px; }
    .download-card { width: 210px; }
    .download-card h3 { font-size: 22px; }
}