:root {
    --primary: rgb(70,139,223);
    --primary-dark: rgb(35,84,145);
    --primary-soft: rgb(232,243,255);
    --text: #122033;
    --muted: #5d6b7e;
    --line: rgba(70,139,223,.16);
    --white: #ffffff;
    --shadow: 0 16px 40px rgba(39, 92, 160, .10);
    --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    color: var(--text);
    background: linear-gradient(180deg, #edf6ff 0%, #ffffff 34%, #f6fbff 100%);
    font-size: 16px;
    line-height: 1.72;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(70,139,223,.12);
}
.header-inner {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 12px 16px 10px;
}
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: var(--primary-dark);
    letter-spacing: .2px;
}
.logo img { width: 36px; height: 36px; border-radius: 12px; object-fit: contain; }
.mobile-nav {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}
.mobile-nav::-webkit-scrollbar { display: none; }
.mobile-nav a {
    flex: 0 0 auto;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(70,139,223,.08);
    color: #35516f;
    font-size: 13px;
    font-weight: 650;
}
.mobile-nav a.active { background: var(--primary); color: #fff; box-shadow: 0 8px 20px rgba(70,139,223,.25); }
.page-shell { width: min(100%, 760px); margin: 0 auto; padding: 18px 16px 34px; }
.banner {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 26px 20px;
    background: radial-gradient(circle at 78% 16%, rgba(70,139,223,.22), transparent 35%), linear-gradient(135deg, #ffffff 0%, #eaf5ff 100%);
    box-shadow: var(--shadow);
    border: 1px solid rgba(255,255,255,.82);
}
.banner::after {
    content: "";
    position: absolute;
    right: -50px;
    bottom: -70px;
    width: 180px;
    height: 180px;
    background: rgba(70,139,223,.13);
    border-radius: 50%;
}
.kicker, .badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(70,139,223,.10);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 700;
}
h1 { margin: 14px 0 10px; font-size: 30px; line-height: 1.18; letter-spacing: -.8px; }
h2 { margin: 0 0 12px; font-size: 22px; line-height: 1.3; letter-spacing: -.3px; }
h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.35; }
p { margin: 0 0 12px; color: var(--muted); }
.banner-copy, .section, .download-panel, .article-hero, .faq-wrap { position: relative; z-index: 1; }
.banner-desc { font-size: 15px; color: #435a74; }
.banner-app { margin: 20px auto 0; max-width: 245px; filter: drop-shadow(0 22px 34px rgba(31,78,134,.18)); }
.trust-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0 18px; }
.trust-tags span {
    padding: 7px 10px;
    border: 1px solid rgba(70,139,223,.16);
    background: rgba(255,255,255,.74);
    border-radius: 999px;
    font-size: 12px;
    color: #2b527d;
}
.btn-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    min-height: 48px;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(70,139,223,.28);
    border: 0;
}
.section { margin-top: 20px; padding: 20px; border-radius: var(--radius); background: rgba(255,255,255,.86); border: 1px solid rgba(70,139,223,.10); box-shadow: 0 10px 30px rgba(42, 93, 152, .06); }
.section.soft { background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(232,243,255,.88)); }
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
.card {
    padding: 16px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(70,139,223,.12);
    box-shadow: 0 10px 24px rgba(54, 107, 166, .06);
}
.card .icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: var(--primary-soft); color: var(--primary); font-weight: 900; margin-bottom: 10px; }
.data-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 14px; }
.data-block { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 8px; text-align: center; }
.data-block strong { display: block; color: var(--primary-dark); font-size: 18px; }
.data-block span { color: var(--muted); font-size: 11px; }
.steps { counter-reset: step; display: grid; gap: 12px; margin-top: 12px; }
.step { position: relative; padding: 16px 16px 16px 54px; background: #fff; border-radius: 18px; border: 1px solid var(--line); }
.step::before { counter-increment: step; content: counter(step); position: absolute; left: 16px; top: 17px; width: 26px; height: 26px; border-radius: 10px; display: grid; place-items: center; background: var(--primary); color: #fff; font-weight: 800; font-size: 13px; }
.faq-item { padding: 16px 0; border-bottom: 1px solid rgba(70,139,223,.12); }
.faq-item:last-child { border-bottom: 0; padding-bottom: 0; }
.faq-item h3 { color: #1d3551; }
.download-panel { margin-top: 20px; padding: 22px; border-radius: 24px; background: linear-gradient(135deg, var(--primary), #75b8ff); color: #fff; box-shadow: 0 18px 38px rgba(70,139,223,.26); }
.download-panel p, .download-panel h2 { color: #fff; }
.download-panel .btn-download { background: #fff; color: var(--primary-dark); box-shadow: none; }
.article-hero { padding: 24px 20px; border-radius: 28px; background: linear-gradient(135deg, #ffffff 0%, #edf7ff 100%); box-shadow: var(--shadow); border: 1px solid rgba(70,139,223,.12); }
.notice-box { padding: 14px 15px; border-radius: 18px; background: rgba(70,139,223,.09); border: 1px solid rgba(70,139,223,.16); color: #31587f; }
.notice-box strong { display: block; color: var(--primary-dark); margin-bottom: 5px; }
.site-footer { width: min(100%, 760px); margin: 0 auto; padding: 0 16px 28px; }
.footer-card { padding: 20px; background: #fff; border: 1px solid rgba(70,139,223,.12); border-radius: 24px; box-shadow: 0 10px 28px rgba(40,90,150,.06); }
.footer-logo { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 10px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.footer-links a { padding: 6px 10px; border-radius: 999px; background: var(--primary-soft); color: #2c5684; font-size: 12px; }
.copyright { text-align: center; font-size: 12px; margin-top: 14px; }
.pc-notice { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; padding: 24px; background: rgba(247,251,255,.92); backdrop-filter: blur(12px); }
.pc-notice-card { width: min(360px, 92vw); padding: 28px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); text-align: center; }
.pc-logo { width: 54px; height: 54px; border-radius: 16px; margin: 0 auto 14px; }
.pc-notice-card strong { display: block; font-size: 22px; color: var(--primary-dark); margin-bottom: 8px; }
.pc-notice-card span { color: var(--muted); font-size: 14px; }
.desktop-visitor .btn-download { display: none; }
@media (min-width: 761px) {
    body { background: #f6fbff; }
    .page-shell, .site-footer, .header-inner { max-width: 760px; }
}