:root {
    --sx-bg: #050b16;
    --sx-bg-soft: #091426;
    --sx-panel: rgba(11, 26, 47, 0.76);
    --sx-panel-solid: #0d1b30;
    --sx-line: rgba(72, 188, 187, 0.16);
    --sx-line-strong: rgba(41, 190, 188, 0.42);
    --sx-cyan: #35c6c2;
    --sx-blue: #0D7A82;
    --sx-green: #7be0c7;
    --sx-text: #eff8ff;
    --sx-muted: #91a6bd;
    --sx-shadow: 0 24px 70px rgba(0, 5, 18, 0.42);
    --sx-radius: 20px;
    --sx-ease: cubic-bezier(.2, .8, .2, 1);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

body {
    color: var(--sx-text);
    font-family: "HarmonyOS Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
    background:
        radial-gradient(circle at 14% 10%, rgba(13, 122, 130, 0.20), transparent 27rem),
        radial-gradient(circle at 85% 32%, rgba(53, 198, 194, 0.09), transparent 30rem),
        linear-gradient(180deg, #050b16 0%, #07101e 48%, #050b16 100%);
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .28;
    background-image:
        linear-gradient(rgba(79, 183, 181, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79, 183, 181, .045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

body::after {
    content: "";
    position: fixed;
    width: 28rem;
    height: 28rem;
    left: var(--sx-pointer-x, 50%);
    top: var(--sx-pointer-y, 20%);
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(13, 122, 130, .11);
    filter: blur(90px);
    transition: left .25s linear, top .25s linear;
}

::selection {
    color: #03101c;
    background: var(--sx-cyan);
}

a {
    transition: color .3s var(--sx-ease), border-color .3s var(--sx-ease), background .3s var(--sx-ease), transform .3s var(--sx-ease);
}

img {
    max-width: 100%;
}

.scroll-progress {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 10002;
    width: var(--sx-scroll, 0%);
    height: 3px;
    background: linear-gradient(90deg, var(--sx-blue), var(--sx-cyan), var(--sx-green));
    box-shadow: 0 0 14px rgba(53, 198, 194, .72);
}

header,
.header,
.navbar,
.site-header,
nav.navbar {
    color: var(--sx-text);
    background: rgba(5, 11, 22, .72) !important;
    border-bottom: 1px solid var(--sx-line) !important;
    box-shadow: 0 10px 40px rgba(0, 7, 20, .16) !important;
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.logo,
.navbar-brand,
.site-logo {
    color: #fff !important;
    font-weight: 800;
    letter-spacing: .04em;
}

nav a,
.nav-link,
.navbar a,
.nav-menu a {
    color: #b9cadd;
    font-weight: 600;
    letter-spacing: .03em;
}

nav a:hover,
nav a.active,
.nav-link:hover,
.nav-link.active,
.navbar a:hover,
.navbar a.active {
    color: var(--sx-cyan) !important;
}

.hero,
.banner,
.hero-section,
#home {
    position: relative;
    isolation: isolate;
    min-height: min(860px, 94vh);
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(3, 10, 23, .95) 0%, rgba(4, 14, 31, .78) 48%, rgba(4, 14, 31, .30) 100%),
        radial-gradient(circle at 76% 40%, rgba(13, 122, 130, .34), transparent 32rem) !important;
}

.hero::before,
.banner::before,
.hero-section::before,
#home::before {
    content: "";
    position: absolute;
    width: 44rem;
    height: 44rem;
    right: -12rem;
    top: 4rem;
    z-index: -1;
    border: 1px solid rgba(77, 220, 255, .18);
    border-radius: 50%;
    box-shadow:
        0 0 0 6rem rgba(13, 122, 130, .045),
        0 0 0 12rem rgba(53, 198, 194, .025);
    animation: sx-orbit 16s linear infinite;
}

.hero::after,
.banner::after,
.hero-section::after,
#home::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: -1;
    height: 38%;
    background: linear-gradient(to top, var(--sx-bg), transparent);
    pointer-events: none;
}

.hero-content,
.banner-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.hero h1,
.banner h1,
.hero-title {
    margin-bottom: 22px;
    color: #fff;
    font-size: clamp(2rem, 2.75vw, 3.35rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.065em;
    text-wrap: balance;
    text-shadow: 0 16px 44px rgba(0, 0, 0, .34);
}

.hero h1 strong,
.hero h1 span,
.banner h1 strong,
.hero-title span {
    color: transparent;
    background: linear-gradient(105deg, #fff 8%, #70d5d0 58%, var(--sx-green));
    background-clip: text;
    -webkit-background-clip: text;
}

.hero p,
.banner p,
.hero-subtitle {
    max-width: 650px;
    color: #adc0d5;
    font-size: clamp(1rem, 1.6vw, 1.24rem);
    line-height: 1.9;
}

.btn,
button,
.button,
.cta-button,
input[type="submit"] {
    position: relative;
    border-radius: 10px !important;
    font-weight: 700;
    letter-spacing: .03em;
    transition: transform .3s var(--sx-ease), box-shadow .3s var(--sx-ease), border-color .3s var(--sx-ease), background .3s var(--sx-ease) !important;
}

.btn-primary,
.primary-btn,
.cta-button,
input[type="submit"] {
    color: #03111f !important;
    border: 1px solid rgba(111, 219, 210, .65) !important;
    background: linear-gradient(110deg, #32bdb8, #0D7A82) !important;
    box-shadow: 0 12px 34px rgba(13, 122, 130, .32) !important;
}

.btn:hover,
button:hover,
.button:hover,
.cta-button:hover,
input[type="submit"]:hover {
    transform: translateY(-3px);
}

.btn-primary:hover,
.primary-btn:hover,
.cta-button:hover,
input[type="submit"]:hover {
    box-shadow: 0 18px 42px rgba(13, 122, 130, .46) !important;
}

.btn-secondary,
.outline-btn,
.btn-outline {
    color: var(--sx-text) !important;
    border: 1px solid var(--sx-line-strong) !important;
    background: rgba(9, 24, 43, .58) !important;
    backdrop-filter: blur(10px);
}

section {
    position: relative;
    color: var(--sx-text);
}

section:nth-of-type(even) {
    background-color: rgba(9, 20, 38, .46);
}

main section,
body > section,
#services,
#advantages,
#cases,
#about,
#contact {
    background-color: transparent !important;
    background-image: none !important;
}

main section:nth-of-type(even),
body > section:nth-of-type(even) {
    background-color: rgba(8, 24, 35, .72) !important;
}

.section-title,
.title,
section > h2,
.container > h2 {
    color: #f6fbff;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 850;
    letter-spacing: -.035em;
}

.section-title::after,
.title::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin: 16px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sx-blue), var(--sx-cyan));
    box-shadow: 0 0 18px rgba(77, 220, 255, .5);
}

.section-subtitle,
.subtitle,
.section-desc {
    color: var(--sx-muted) !important;
    line-height: 1.85;
}

.service-card,
.case-card,
.product-card,
.advantage-card,
.feature-card,
.solution-card,
.card,
.stat-item,
.contact-item,
.team-card {
    position: relative;
    color: var(--sx-text);
    border: 1px solid var(--sx-line) !important;
    border-radius: var(--sx-radius) !important;
    background: linear-gradient(145deg, rgba(15, 34, 60, .86), rgba(7, 18, 34, .72)) !important;
    box-shadow: var(--sx-shadow) !important;
    overflow: hidden;
    backdrop-filter: blur(12px);
    transition: transform .45s var(--sx-ease), border-color .45s var(--sx-ease), box-shadow .45s var(--sx-ease) !important;
}

.service-card::before,
.case-card::before,
.product-card::before,
.advantage-card::before,
.feature-card::before,
.solution-card::before,
.card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(112, 226, 255, .8), transparent);
    opacity: .55;
}

.service-card:hover,
.case-card:hover,
.product-card:hover,
.advantage-card:hover,
.feature-card:hover,
.solution-card:hover,
.card:hover,
.contact-item:hover {
    transform: translateY(-9px);
    border-color: var(--sx-line-strong) !important;
    box-shadow: 0 28px 72px rgba(0, 5, 18, .52), 0 0 30px rgba(50, 181, 255, .10) !important;
}

.service-card h3,
.case-card h3,
.product-card h3,
.advantage-card h3,
.feature-card h3,
.solution-card h3,
.card h3 {
    color: #f4fbff;
}

.service-card p,
.case-card p,
.product-card p,
.advantage-card p,
.feature-card p,
.solution-card p,
.card p {
    color: var(--sx-muted);
    line-height: 1.8;
}

.service-icon,
.feature-icon,
.advantage-icon,
.icon-box {
    color: var(--sx-cyan) !important;
    border: 1px solid rgba(77, 220, 255, .25);
    background: linear-gradient(145deg, rgba(13, 122, 130, .24), rgba(53, 198, 194, .07)) !important;
    box-shadow: inset 0 0 22px rgba(77, 220, 255, .07);
}

.case-card img,
.product-card img,
.portfolio-item img {
    filter: saturate(.88) contrast(1.04);
    transition: transform .7s var(--sx-ease), filter .5s var(--sx-ease);
}

.case-card:hover img,
.product-card:hover img,
.portfolio-item:hover img {
    transform: scale(1.055);
    filter: saturate(1.08) contrast(1.05);
}

.stats,
.data-section,
.numbers {
    border-top: 1px solid var(--sx-line);
    border-bottom: 1px solid var(--sx-line);
    background: linear-gradient(90deg, rgba(13, 122, 130, .11), rgba(53, 198, 194, .04), rgba(123, 224, 199, .06)) !important;
}

.stat-number,
.counter,
[data-count] {
    color: var(--sx-cyan) !important;
    font-family: "DIN Alternate", "Arial Narrow", sans-serif;
    font-weight: 800;
    text-shadow: 0 0 26px rgba(77, 220, 255, .28);
}

input,
textarea,
select {
    color: var(--sx-text) !important;
    border: 1px solid rgba(138, 196, 227, .20) !important;
    border-radius: 10px !important;
    outline: none;
    background: rgba(5, 14, 28, .76) !important;
    transition: border-color .25s ease, box-shadow .25s ease;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--sx-cyan) !important;
    box-shadow: 0 0 0 4px rgba(77, 220, 255, .10) !important;
}

input::placeholder,
textarea::placeholder {
    color: #647d96;
}

.modal,
.popup,
.dialog {
    color: var(--sx-text);
    background: rgba(2, 7, 15, .74) !important;
    backdrop-filter: blur(12px);
}

.modal-content,
.popup-content,
.dialog-content {
    color: var(--sx-text);
    border: 1px solid var(--sx-line-strong) !important;
    border-radius: 22px !important;
    background: var(--sx-panel-solid) !important;
    box-shadow: 0 34px 100px rgba(0, 0, 0, .62) !important;
}

footer,
.footer,
.site-footer {
    color: #90a7be !important;
    border-top: 1px solid var(--sx-line) !important;
    background: #030914 !important;
}

footer h3,
footer h4,
.footer h3,
.footer h4 {
    color: #eef8ff !important;
}

footer a,
.footer a {
    color: #90a7be !important;
}

footer a:hover,
.footer a:hover {
    color: var(--sx-cyan) !important;
}

.sx-float-tools {
    position: fixed;
    right: 22px;
    bottom: 24px;
    z-index: 1000;
    display: grid;
    gap: 10px;
}

.sx-float-button {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #dff8ff;
    border: 1px solid var(--sx-line-strong) !important;
    border-radius: 14px !important;
    background: rgba(8, 23, 42, .86) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
    backdrop-filter: blur(14px);
    cursor: pointer;
}

.sx-float-button:hover {
    color: #04111e;
    background: var(--sx-cyan) !important;
}

.sx-backtop {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}

.sx-backtop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sx-toast {
    position: fixed;
    left: 50%;
    bottom: 34px;
    z-index: 10003;
    padding: 12px 18px;
    color: #eafaff;
    border: 1px solid var(--sx-line-strong);
    border-radius: 10px;
    background: rgba(8, 23, 42, .94);
    box-shadow: var(--sx-shadow);
    transform: translate(-50%, 18px);
    opacity: 0;
    pointer-events: none;
    transition: .3s var(--sx-ease);
}

.sx-toast.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
}

.sx-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .75s var(--sx-ease), transform .75s var(--sx-ease);
}

.sx-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.sx-particle-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.sx-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--sx-cyan);
    box-shadow: 0 0 12px var(--sx-cyan);
    opacity: .28;
    animation: sx-float var(--duration) ease-in-out infinite alternate;
}

@keyframes sx-float {
    to { transform: translate3d(var(--travel-x), -80px, 0); opacity: .7; }
}

@keyframes sx-orbit {
    to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
    .hero,
    .banner,
    .hero-section,
    #home {
        min-height: 760px;
        text-align: left;
    }

    .hero h1,
    .banner h1,
    .hero-title {
        font-size: clamp(2rem, 8.8vw, 3.2rem);
    }

    .service-card,
    .case-card,
    .product-card,
    .advantage-card,
    .feature-card,
    .solution-card,
    .card {
        border-radius: 16px !important;
    }
}

@media (max-width: 600px) {
    body::before {
        background-size: 32px 32px;
    }

    .hero,
    .banner,
    .hero-section,
    #home {
        min-height: 680px;
    }

    .hero h1,
    .banner h1,
    .hero-title {
        font-size: clamp(1.9rem, 8.2vw, 2.4rem);
    }

    .hero p,
    .banner p,
    .hero-subtitle {
        line-height: 1.7;
    }

    .sx-float-tools {
        right: 14px;
        bottom: 16px;
    }

    .sx-float-button {
        width: 42px;
        height: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .sx-reveal { opacity: 1; transform: none; }
}

/* Light brand theme */
:root {
    --sx-bg: #f4f9f9;
    --sx-bg-soft: #eaf4f3;
    --sx-panel: rgba(255, 255, 255, .84);
    --sx-panel-solid: #ffffff;
    --sx-line: rgba(13, 122, 130, .14);
    --sx-line-strong: rgba(13, 122, 130, .34);
    --sx-text: #102f33;
    --sx-muted: #617b7e;
    --sx-shadow: 0 22px 60px rgba(29, 75, 78, .11);
}

body {
    color: var(--sx-text) !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(13, 122, 130, .13), transparent 28rem),
        radial-gradient(circle at 88% 30%, rgba(53, 198, 194, .10), transparent 31rem),
        linear-gradient(180deg, #f8fbfb 0%, #eef7f6 48%, #f8fbfb 100%) !important;
}

body::before {
    opacity: .55;
    background-image:
        linear-gradient(rgba(13, 122, 130, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 122, 130, .055) 1px, transparent 1px);
}

body::after {
    background: rgba(13, 122, 130, .07);
}

header,
.header,
.navbar,
.site-header,
nav.navbar {
    color: #153438 !important;
    background: rgba(250, 253, 253, .88) !important;
    border-bottom-color: rgba(13, 122, 130, .13) !important;
    box-shadow: 0 10px 34px rgba(31, 79, 81, .08) !important;
}

nav a,
.nav-link,
.navbar a,
.nav-menu a {
    color: #496467;
}

.hero,
.banner,
.hero-section,
#home {
    color: #143438;
    background:
        linear-gradient(90deg, rgba(246, 251, 250, .98) 0%, rgba(235, 247, 245, .92) 50%, rgba(232, 246, 244, .68) 100%),
        radial-gradient(circle at 76% 40%, rgba(13, 122, 130, .18), transparent 32rem) !important;
}

.hero::before,
.banner::before,
.hero-section::before,
#home::before {
    border-color: rgba(13, 122, 130, .16);
    box-shadow:
        0 0 0 6rem rgba(13, 122, 130, .035),
        0 0 0 12rem rgba(53, 198, 194, .025);
}

.hero::after,
.banner::after,
.hero-section::after,
#home::after {
    background: linear-gradient(to top, #f4f9f9, transparent);
}

.hero h1,
.banner h1,
.hero-title {
    color: #12363a;
    text-shadow: 0 14px 38px rgba(21, 74, 77, .10);
}

.hero h1 strong,
.hero h1 span,
.banner h1 strong,
.hero-title span {
    background: linear-gradient(105deg, #12363a 8%, #0D7A82 58%, #27a69f);
    background-clip: text;
    -webkit-background-clip: text;
}

.hero p,
.banner p,
.hero-subtitle {
    color: #587478;
}

main section,
body > section,
#services,
#advantages,
#features,
#cases,
#about,
#contact {
    color: var(--sx-text) !important;
    background-color: rgba(249, 252, 252, .72) !important;
}

main section:nth-of-type(even),
body > section:nth-of-type(even) {
    background-color: rgba(232, 244, 243, .78) !important;
}

.section-title,
.title,
section > h2,
.container > h2 {
    color: #12363a;
}

.section-subtitle,
.subtitle,
.section-desc {
    color: #6a8184 !important;
}

.service-card,
.case-card,
.product-card,
.advantage-card,
.feature-card,
.solution-card,
.card,
.stat-item,
.contact-item,
.team-card {
    color: var(--sx-text);
    border-color: rgba(13, 122, 130, .14) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(239, 248, 247, .88)) !important;
    box-shadow: 0 20px 48px rgba(37, 82, 84, .10) !important;
}

.service-card:hover,
.case-card:hover,
.product-card:hover,
.advantage-card:hover,
.feature-card:hover,
.solution-card:hover,
.card:hover,
.contact-item:hover {
    border-color: rgba(13, 122, 130, .34) !important;
    box-shadow: 0 26px 60px rgba(30, 88, 90, .15), 0 0 24px rgba(13, 122, 130, .06) !important;
}

.service-card h3,
.case-card h3,
.product-card h3,
.advantage-card h3,
.feature-card h3,
.solution-card h3,
.card h3 {
    color: #163b3f;
}

.service-card p,
.case-card p,
.product-card p,
.advantage-card p,
.feature-card p,
.solution-card p,
.card p {
    color: #667f82;
}

.service-icon,
.feature-icon,
.advantage-icon,
.icon-box {
    background: linear-gradient(145deg, rgba(13, 122, 130, .13), rgba(53, 198, 194, .06)) !important;
}

.btn-primary,
.primary-btn,
.cta-button,
input[type="submit"] {
    color: #ffffff !important;
    background: linear-gradient(110deg, #159b9d, #0D7A82) !important;
}

.btn-secondary,
.outline-btn,
.btn-outline {
    color: #164348 !important;
    background: rgba(255, 255, 255, .72) !important;
}

.stats,
.data-section,
.numbers {
    background: linear-gradient(90deg, rgba(13, 122, 130, .07), rgba(53, 198, 194, .04), rgba(255, 255, 255, .5)) !important;
}

input,
textarea,
select {
    color: #173a3e !important;
    background: rgba(255, 255, 255, .88) !important;
}

.modal,
.popup,
.dialog {
    background: rgba(22, 56, 59, .28) !important;
}

.modal-content,
.popup-content,
.dialog-content {
    color: var(--sx-text);
    background: #ffffff !important;
    box-shadow: 0 32px 90px rgba(26, 68, 71, .24) !important;
}

footer,
.footer,
.site-footer {
    color: #647d80 !important;
    background: #e6f1f0 !important;
}

footer h3,
footer h4,
.footer h3,
.footer h4 {
    color: #153b3f !important;
}

footer a,
.footer a {
    color: #647d80 !important;
}

.sx-float-button {
    color: #0D7A82;
    background: rgba(255, 255, 255, .90) !important;
    box-shadow: 0 12px 30px rgba(28, 76, 79, .14);
}

.sx-toast {
    color: #173a3e;
    background: rgba(255, 255, 255, .96);
}

/* Light theme readability tune-up */
:root {
    --sx-text-soft: #6c8487;
    --sx-card-border: rgba(13, 122, 130, .20);
}

.hero-tagline {
    background: rgba(13, 122, 130, .08) !important;
    border-color: rgba(13, 122, 130, .22) !important;
    color: #48686b !important;
}

.hero-stats {
    border-top-color: rgba(13, 122, 130, .16) !important;
}

.stat-number {
    color: #0D7A82 !important;
}

.stat-label {
    color: #58767a !important;
}

.btn-outline-white {
    color: #0D7A82 !important;
    border-color: rgba(13, 122, 130, .45) !important;
    background: rgba(255, 255, 255, .88) !important;
}

.hero-stats .stat-item {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.btn-outline-white:hover {
    background: rgba(13, 122, 130, .08) !important;
    border-color: rgba(13, 122, 130, .72) !important;
}

.btn-white {
    color: #0D7A82 !important;
    border-color: rgba(13, 122, 130, .35) !important;
}

.btn-white:hover {
    background: rgba(13, 122, 130, .08) !important;
}

.footer-logo {
    filter: none !important;
}

.footer-section .brand-name,
.footer-section h4,
.footer-section ul li a,
.footer-section > p,
.footer-bottom,
.footer-bottom a,
.wechat-trigger,
.qr-tip {
    color: #48686b !important;
}

.footer-section ul li a:hover,
.wechat-trigger:hover,
.footer-bottom a:hover {
    color: #0D7A82 !important;
}

.wechat-trigger {
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: rgba(13, 122, 130, .18) !important;
}

.contact-qr-arrow,
.qr-arrow {
    border-top-color: #0D7A82 !important;
}

.contact-card,
.service-card,
.feature-card,
.case-card,
.stat-item,
.about-stat-number {
    border-color: var(--sx-card-border) !important;
}

.modal-close {
    background: rgba(13, 122, 130, 0.14) !important;
    color: #12363a !important;
}

.modal-close:hover,
.case-card .case-view-btn:hover {
    color: #0D7A82 !important;
}