:root {
    --blue:#1677ff;
    --blue2:#0d5bd7;
    --navy:#0f2b57;
    --text:#1f2937;
    --muted:#64748b;
    --bg:#f6f9ff;
    --line:#e7eef9;
    --card:#fff;
    --green:#19b36b;
    --shadow:0 18px 50px rgba(22,119,255,.12)
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Arial,sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.75
}

a {
    color:inherit;
    text-decoration:none
}

img {
    max-width:100%;
    display:block
}

.container {
    width:min(1180px,92%);
    margin:auto
}

.site-header {
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(231,238,249,.9)
}

.nav {
    height:74px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px
}

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

.menu {
    display:flex;
    gap:28px;
    font-weight:600;
    color:#34445f
}

.menu a:hover {
    color:var(--blue)
}

.nav-cta,.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    padding:13px 20px;
    font-weight:700;
    transition:.2s
}

.btn-primary,.nav-cta {
    background:linear-gradient(135deg,var(--blue),var(--blue2));
    color:#fff;
    box-shadow:0 10px 28px rgba(22,119,255,.24)
}

.btn-secondary {
    background:#fff;
    color:var(--blue);
    border:1px solid #cfe0ff
}

.btn:hover,.nav-cta:hover {
    transform:translateY(-2px)
}

.hero {
    padding:54px 0 36px;
    background:radial-gradient(circle at 20% 0,#e5f1ff 0,transparent 38%),linear-gradient(180deg,#f8fbff,#fff)
}

.hero-grid {
    display:grid;
    grid-template-columns:1.03fr .97fr;
    gap:40px;
    align-items:center
}

.eyebrow {
    display:inline-flex;
    padding:7px 12px;
    border-radius:999px;
    background:#eaf3ff;
    color:#0d62df;
    font-size:14px;
    font-weight:700
}

.hero h1 {
    font-size:58px;
    line-height:1.06;
    margin:18px 0 14px;
    color:var(--navy);
    letter-spacing:-2px
}

.hero .lead {
    font-size:20px;
    color:#52657f;
    max-width:640px
}

.hero-actions {
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin:26px 0
}

.trust-row {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-top:28px
}

.trust {
    background:#fff;
    border:1px solid var(--line);
    border-radius:15px;
    padding:14px;
    text-align:center;
    box-shadow:0 8px 26px rgba(15,43,87,.05)
}

.trust b {
    display:block;
    color:var(--navy)
}

.hero-media {
    position:relative
}

.hero-media img {
    border-radius:28px;
    box-shadow:var(--shadow)
}

.section {
    padding:76px 0
}

.section.alt {
    background:var(--bg)
}

.section-head {
    text-align:center;
    max-width:760px;
    margin:0 auto 36px
}

.section-head h2 {
    font-size:38px;
    line-height:1.25;
    margin:0 0 12px;
    color:var(--navy)
}

.section-head p {
    color:var(--muted);
    font-size:17px
}

.cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}

.card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:24px;
    box-shadow:0 10px 36px rgba(15,43,87,.05)
}

.card h3 {
    margin:10px 0 8px;
    color:var(--navy)
}

.icon {
    width:48px;
    height:48px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:#eaf3ff;
    color:var(--blue);
    font-size:23px
}

.download-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}

.download-card {
    background:#fff;
    border-radius:22px;
    border:1px solid var(--line);
    padding:24px;
    box-shadow:0 14px 40px rgba(15,43,87,.06)
}

.download-card .meta {
    color:var(--muted);
    font-size:14px
}

.download-card .btn {
    width:100%;
    margin-top:16px
}

.product-shot {
    border-radius:22px;
    border:1px solid var(--line);
    box-shadow:var(--shadow)
}

.split {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:42px;
    align-items:center
}

.checklist {
    display:grid;
    gap:13px;
    margin:20px 0
}

.check {
    display:flex;
    gap:10px
}

.check:before {
    content:'✓';
    color:var(--green);
    font-weight:900
}

.steps {
    counter-reset:s;
    display:grid;
    gap:16px
}

.step {
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:20px 20px 20px 68px;
    position:relative
}

.step:before {
    counter-increment:s;
    content:counter(s);
    position:absolute;
    left:20px;
    top:21px;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--blue);
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:700
}

.articles-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}

.article-card {
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
    background:#fff
}

.article-card img {
    aspect-ratio:16/9;
    object-fit:cover
}

.article-card .body {
    padding:18px
}

.article-card h3 {
    margin:0 0 8px;
    line-height:1.45;
    color:var(--navy)
}

.article-card p {
    margin:0;
    color:var(--muted);
    font-size:14px
}

.article-wrap {
    display:grid;
    grid-template-columns:minmax(0,1fr) 310px;
    gap:36px;
    padding:40px 0 80px
}

.article-main {
    min-width:0
}

.breadcrumb {
    font-size:14px;
    color:var(--muted);
    margin-bottom:18px
}

.article-main h1 {
    font-size:38px;
    line-height:1.3;
    color:var(--navy);
    margin:0 0 12px
}

.article-meta {
    color:var(--muted);
    font-size:14px;
    padding-bottom:20px;
    border-bottom:1px solid var(--line)
}

.article-main .cover {
    border-radius:20px;
    margin:24px 0
}

.article-content {
    font-size:17px
}

.article-content h2 {
    font-size:26px;
    color:var(--navy);
    margin:36px 0 12px
}

.article-content h3 {
    font-size:20px;
    color:var(--navy);
    margin-top:26px
}

.article-content p {
    margin:12px 0
}

.article-content ol,.article-content ul {
    padding-left:24px
}

.note {
    padding:16px 18px;
    border-left:4px solid var(--blue);
    background:#f1f6ff;
    border-radius:10px;
    margin:18px 0
}

.sidebar {
    position:sticky;
    top:94px;
    height:max-content
}

.sidebox {
    border:1px solid var(--line);
    border-radius:18px;
    padding:20px;
    margin-bottom:18px;
    background:#fff
}

.sidebox h3 {
    margin-top:0;
    color:var(--navy)
}

.sidebox a {
    display:block;
    padding:8px 0;
    border-bottom:1px dashed var(--line);
    font-size:14px
}

.site-footer {
    background:#0d2343;
    color:#cbd8eb;
    padding:52px 0 24px
}

.footer-grid {
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:32px
}

.site-footer .logo img {
    filter:brightness(0) invert(1);
    opacity:.95
}

.site-footer h3 {
    color:#fff
}

.site-footer a {
    display:block;
    padding:5px 0
}

.copyright {
    border-top:1px solid rgba(255,255,255,.12);
    margin-top:32px;
    padding-top:20px;
    font-size:13px;
    color:#96a9c4
}

.notice {
    font-size:13px;
    color:#7c8ea8
}

.faq details {
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:16px 18px;
    margin:12px 0
}

.faq summary {
    cursor:pointer;
    font-weight:700;
    color:var(--navy)
}

@media(max-width:900px) {
    .menu {
        display:none
    }

    .hero-grid,.split,.article-wrap {
        grid-template-columns:1fr
    }

    .hero h1 {
        font-size:44px
    }

    .trust-row,.cards,.download-grid,.articles-grid {
        grid-template-columns:1fr 1fr
    }

    .sidebar {
        position:static
    }

}

@media(max-width:620px) {
    .hero {
        padding-top:28px
    }

    .hero h1 {
        font-size:38px
    }

    .trust-row,.cards,.download-grid,.articles-grid {
        grid-template-columns:1fr
    }

    .section {
        padding:54px 0
    }

    .section-head h2 {
        font-size:30px
    }

    .footer-grid {
        grid-template-columns:1fr
    }

    .article-main h1 {
        font-size:30px
    }

}