:root {
    --blue: #164dd7;
    --ink: #17253b;
    --muted: #657286;
    --pale: #f3f6fa
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    color: var(--ink);
    font-family: Inter, 'Microsoft YaHei', Arial, sans-serif;
    line-height: 1.7
}

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

button {
    font: inherit
}

.wrap {
    width: min(1200px, calc(100% - 64px));
    margin: auto
}

.header {
    height: 88px;
    background: #fff;
    position: relative;
    z-index: 5
}

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

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1
}

.brand strong {
    display: block;
    font-size: 23px;
    letter-spacing: 1px
}

.brand small {
    display: block;
    font-size: 10px;
    color: #7c899b;
    margin-top: 6px;
    letter-spacing: 3px
}

.brandmark {
    height: 34px;
    width: 37px;
    position: relative;
    display: block
}

.brandmark i {
    position: absolute;
    background: var(--blue);
    transform: skew(-25deg);
    width: 9px;
    bottom: 0
}

.brandmark i:nth-child(1) {
    height: 19px;
    left: 3px
}

.brandmark i:nth-child(2) {
    height: 29px;
    left: 14px
}

.brandmark i:nth-child(3) {
    height: 23px;
    left: 25px
}

.navlinks {
    display: flex;
    align-items: center;
    gap: 42px;
    font-size: 14px
}

.navlinks > a:not(.nav-cta) {
    height: 88px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid transparent
}

.navlinks > a.active {
    color: var(--blue);
    border-color: var(--blue)
}

.nav-cta {
    background: var(--ink);
    color: #fff;
    padding: 12px 20px
}

.nav-cta span, .button span {
    margin-left: 24px
}

.menu {
    display: none
}

.hero {
    background: #f2f6fb;
    position: relative;
    overflow: hidden
}

.hero:before {
    content: '';
    position: absolute;
    right: -12%;
    top: 0;
    width: 52%;
    height: 100%;
    background: #e5edf9;
    transform: skew(-14deg)
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns:1fr 1.05fr;
    align-items: center;
    gap: 40px;
    min-height: 650px;
    padding-top: 70px;
    padding-bottom: 70px
}

.hero-copy {
    position: relative;
    z-index: 1
}

.eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--blue);
    margin-bottom: 24px
}

.eyebrow span:not(.dot) {
    color: #98a6ba
}

.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--blue);
    border-radius: 50%;
    margin-right: 8px
}

h1, h2, h3, p {
    margin-top: 0
}

h1 {
    font-size: clamp(42px, 4.3vw, 64px);
    line-height: 1.27;
    letter-spacing: -2px;
    margin-bottom: 24px
}

h1 em {
    font-style: normal;
    color: var(--blue)
}

h2 {
    font-size: clamp(32px, 3.1vw, 45px);
    line-height: 1.35;
    letter-spacing: -1px;
    margin-bottom: 22px
}

.hero-copy > p, .page-hero p {
    font-size: 16px;
    line-height: 2;
    color: #607087;
    max-width: 470px
}

.actions {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 36px
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 22px;
    font-size: 14px;
    font-weight: 700
}

.primary {
    background: var(--blue);
    color: white
}

.text-link, .arrow-link {
    font-size: 14px;
    font-weight: 700
}

.text-link span, .arrow-link span {
    color: var(--blue);
    margin-left: 18px
}

.hero-note {
    margin-top: 95px;
    font-size: 11px;
    color: #8390a1;
    letter-spacing: 1px
}

.hero-note span:not(.note-line) {
    margin: 0 8px
}

.note-line {
    display: inline-block;
    width: 35px;
    height: 1px;
    background: #a7b6c8;
    vertical-align: middle;
    margin-right: 10px
}

.hero-art {
    background: #fff;
    padding: 24px;
    box-shadow: 0 24px 70px #1c47701c;
    border: 1px solid #dce6f3;
    transform: rotate(-1deg)
}

.art-top, .art-bottom {
    display: flex;
    justify-content: space-between;
    color: #8a99ac;
    font-size: 10px;
    letter-spacing: 1.5px
}

.art-top {
    border-bottom: 1px solid #e8edf3;
    padding-bottom: 16px
}

.art-title {
    font-size: 21px;
    font-weight: 700;
    margin: 22px 0
}

.art-title small {
    font-size: 9px;
    color: #a1afbf;
    display: block;
    letter-spacing: 1px
}

.mock-row {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 12px
}

.mock-card {
    background: #f3f6fa;
    padding: 20px;
    display: flex;
    flex-direction: column
}

.mock-card span, .mock-card small {
    font-size: 11px;
    color: #8a9aae
}

.mock-card strong {
    font-size: 24px;
    margin: 10px 0
}

.mock-card.accent {
    background: #e8efff;
    color: var(--blue)
}

.mock-chart {
    margin-top: 15px;
    border: 1px solid #e7edf5;
    padding: 20px
}

.chart-head {
    display: flex;
    justify-content: space-between;
    font-size: 12px
}

.chart-head span {
    font-size: 9px;
    color: #a8b3c2
}

.flow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0 12px
}

.flow div {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.flow i {
    font-style: normal;
    background: #eaf0ff;
    color: var(--blue);
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 10px
}

.flow b {
    font-size: 12px
}

.flow small {
    font-size: 10px;
    color: #91a0b3
}

.flow > span {
    color: #b7c5d6
}

.art-bottom {
    margin-top: 22px
}

.hero-side {
    position: absolute;
    right: 18px;
    bottom: 35px;
    writing-mode: vertical-rl;
    color: #9dafc5;
    font-size: 9px;
    letter-spacing: 2px
}

.section {
    padding: 115px 0
}

.split {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 90px
}

.blue {
    color: var(--blue)
}

.intro-copy {
    max-width: 520px;
    color: var(--muted);
    font-size: 15px
}

.intro-copy .lead {
    font-size: 19px;
    line-height: 1.9;
    color: var(--ink)
}

.intro-copy p {
    margin-bottom: 25px
}

.arrow-link {
    display: inline-block;
    margin-top: 18px;
    padding-bottom: 9px;
    border-bottom: 1px solid #b9c8df
}

.capabilities {
    background: var(--pale)
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 45px
}

.section-head h2 {
    margin-bottom: 0
}

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

.cap-card {
    background: white;
    padding: 28px;
    min-height: 300px;
    transition: transform .2s, box-shadow .2s
}

.cap-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px #243e6015
}

.cap-num {
    display: flex;
    justify-content: space-between;
    color: #9eacbc;
    font-size: 11px
}

.cap-num span {
    color: var(--blue);
    font-size: 19px
}

.cap-icon {
    font-size: 34px;
    color: var(--blue);
    margin: 35px 0 20px
}

.cap-card h3 {
    font-size: 21px;
    margin-bottom: 10px
}

.cap-card p, .scenario-copy p {
    font-size: 14px;
    color: var(--muted)
}

.cap-card small {
    font-size: 9px;
    letter-spacing: 1px;
    color: #a6b2c1
}

.scenario-grid {
    display: grid;
    grid-template-columns:1.1fr .9fr;
    gap: 100px;
    align-items: center
}

.scenario-visual {
    height: 440px;
    background: linear-gradient(135deg, #dce8f5, #a8c2dc);
    position: relative;
    overflow: hidden
}

.scenario-visual:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 49.7%, #fff4 50%, transparent 50.3%), linear-gradient(0deg, transparent 49.7%, #fff4 50%, transparent 50.3%);
    background-size: 60px 60px
}

.building {
    position: absolute;
    bottom: -30px;
    background: repeating-linear-gradient(0deg, #234b77 0 4px, #37668e 5px 17px);
    transform: skewY(-12deg);
    box-shadow: inset -25px 0 #1a3a5c55
}

.b1 {
    height: 270px;
    width: 130px;
    right: 34%
}

.b2 {
    height: 370px;
    width: 100px;
    right: 14%
}

.b3 {
    height: 190px;
    width: 110px;
    right: 2%
}

.visual-label {
    position: absolute;
    top: 38px;
    left: 38px;
    display: flex;
    flex-direction: column;
    color: #174878
}

.visual-label span, .visual-label small {
    font-size: 10px;
    letter-spacing: 2px
}

.visual-label strong {
    font-size: 28px;
    line-height: 1.4;
    margin: 20px 0
}

.scenario-copy p {
    max-width: 390px;
    line-height: 2
}

.cta {
    background: #174bd0;
    color: #fff;
    padding: 75px 0
}

.cta-inner {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.cta h2 {
    margin-bottom: 12px
}

.cta p {
    color: #c2d3ff;
    margin: 0
}

.light {
    color: #a9c0ff
}

.white {
    background: white;
    color: var(--blue)
}

footer {
    background: #121f32;
    color: white
}

.footer-top {
    display: flex;
    justify-content: space-between;
    padding-top: 65px;
    padding-bottom: 65px
}

.footer-brand small {
    color: #94a4b8
}

.footer-top p {
    font-size: 13px;
    color: #93a2b5;
    line-height: 2;
    margin-top: 25px
}

.footer-links {
    display: flex;
    gap: 100px
}

.footer-links div {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 13px;
    color: #aebacb
}

.footer-links b {
    color: white;
    margin-bottom: 8px
}

.footer-bottom {
    border-top: 1px solid #ffffff25;
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #8290a3;
    font-size: 16px
}

.page-hero {
    background: #f2f6fb;
    padding: 115px 0 110px;
    position: relative;
    overflow: hidden
}

.page-hero:after {
    content: '';
    position: absolute;
    right: 7%;
    top: -100px;
    width: 300px;
    height: 500px;
    border: 55px solid #e4edfa;
    transform: rotate(35deg)
}

.page-hero .wrap {
    position: relative;
    z-index: 1
}

.page-number {
    position: absolute;
    right: 5%;
    bottom: 30px;
    font-size: 11px;
    color: #8da1b9;
    letter-spacing: 2px
}

.feature {
    display: grid;
    grid-template-columns:.5fr 1fr 1fr;
    gap: 45px;
    padding: 55px 0;
    border-top: 1px solid #dce4ee;
    scroll-margin-top: 20px
}

.feature-index, .role-grid article > span, .contact-card > span {
    font-size: 10px;
    color: var(--blue);
    letter-spacing: 1.5px;
    font-weight: 700
}

.feature h2 {
    font-size: 32px
}

.feature p, .feature li {
    font-size: 14px;
    color: var(--muted)
}

.feature ul {
    padding: 0;
    list-style: none;
    margin-top: 25px
}

.feature li {
    padding: 9px 0;
    border-bottom: 1px solid #edf0f4
}

.feature li:before {
    content: '↗';
    color: var(--blue);
    margin-right: 12px
}

.feature-panel {
    background: #eaf1fc;
    min-height: 250px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #173e8d
}

.feature-panel.pale {
    background: #f0f4f7;
    color: #294966
}

.feature-panel span {
    font-size: 10px;
    letter-spacing: 2px
}

.feature-panel strong {
    font-size: 23px;
    line-height: 1.5
}

.panel-lines {
    display: flex;
    gap: 6px
}

.panel-lines i {
    height: 5px;
    background: #94acd0;
    width: 20%
}

.panel-lines i:first-child {
    background: var(--blue);
    width: 35%
}

.section-desc {
    max-width: 350px;
    color: var(--muted);
    font-size: 14px
}

.role-grid {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 1px;
    background: #dce4ed;
    border: 1px solid #dce4ed
}

.role-grid article {
    padding: 30px;
    background: white;
    min-height: 240px
}

.role-grid h3 {
    font-size: 20px;
    margin: 50px 0 12px
}

.role-grid p {
    font-size: 14px;
    color: var(--muted)
}

.journey {
    background: #162b48;
    color: white
}

.journey-grid {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 32px;
    margin-top: 60px
}

.journey-grid > div {
    border-top: 1px solid #6b81a1;
    padding-top: 20px
}

.journey-grid span {
    color: #83a7ef;
    font-size: 12px
}

.journey-grid h3 {
    margin: 35px 0 10px
}

.journey-grid p {
    font-size: 14px;
    color: #aab9cb
}

.contact {
    background: #f2f6fb
}

.contact-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 80px
}

.contact-grid > div > p {
    color: var(--muted)
}

.contact-card {
    background: white;
    padding: 45px
}

.contact-card h3 {
    font-size: 25px;
    margin: 55px 0 15px
}

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

@media (max-width: 800px) {
    .wrap {
        width: min(100% - 36px, 1200px)
    }

    .header {
        height: 72px
    }

    .menu {
        display: block;
        border: 0;
        background: none;
        font-size: 24px;
        color: var(--ink)
    }

    .navlinks {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        background: white;
        padding: 10px 18px 24px;
        box-shadow: 0 15px 20px #14243b18
    }

    .navlinks.open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0
    }

    .navlinks > a:not(.nav-cta) {
        height: auto;
        padding: 13px 0
    }

    .nav-cta {
        margin-top: 12px
    }

    .hero-grid, .split, .scenario-grid, .contact-grid {
        grid-template-columns:1fr;
        gap: 40px
    }

    .hero-grid {
        padding: 70px 0;
        min-height: 0
    }

    .hero-note {
        margin-top: 45px
    }

    .hero-art {
        transform: none
    }

    .hero-side {
        display: none
    }

    .section {
        padding: 75px 0
    }

    .cap-grid, .role-grid {
        grid-template-columns:1fr 1fr
    }

    .scenario-grid {
        gap: 35px
    }

    .scenario-visual {
        height: 360px
    }

    .feature {
        grid-template-columns:1fr;
        gap: 15px
    }

    .feature-panel {
        min-height: 200px
    }

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

    .page-hero {
        padding: 85px 0
    }

    .page-hero:after {
        opacity: .5;
        right: -150px
    }

    .footer-links {
        gap: 35px
    }
}

@media (max-width: 520px) {
    h1 {
        font-size: 39px
    }

    .actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px
    }

    .cap-grid, .role-grid, .journey-grid {
        grid-template-columns:1fr
    }

    .cap-card {
        min-height: 250px
    }

    .section-head, .cta-inner, .footer-top, .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px
    }

    .footer-links {
        gap: 70px
    }

    .flow small {
        font-size: 9px
    }

    .hero-art {
        padding: 15px
    }

    .mock-card {
        padding: 14px
    }

    .mock-card strong {
        font-size: 20px
    }

    .contact-card {
        padding: 28px
    }
}

.business {
    background: #fff
}

.business-grid {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    border-top: 1px solid #d9e2ed
}

.business-grid article {
    padding: 32px 24px 12px 0;
    border-right: 1px solid #e5ebf1;
    margin-right: 24px
}

.business-grid article:last-child {
    border: 0;
    margin: 0
}

.business-grid article > span, .value-grid article > span {
    font-size: 12px;
    color: var(--blue);
    font-weight: 700;
    letter-spacing: 1px
}

.business-grid h3 {
    margin: 45px 0 14px;
    font-size: 20px
}

.business-grid p, .value-grid p, .detail-grid p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.9
}

.business-grid a {
    display: inline-block;
    font-size: 12px;
    color: var(--blue);
    font-weight: 700;
    margin-top: 10px
}

.perspective, .detail-band, .faq, .values {
    background: #f3f6fa
}

.perspective-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 100px
}

.perspective-grid > div:first-child > p {
    max-width: 460px;
    color: var(--muted);
    font-size: 15px;
    line-height: 2
}

.principles > div {
    display: flex;
    gap: 24px;
    border-top: 1px solid #d8e2ef;
    padding: 24px 0
}

.principles b {
    font-size: 12px;
    color: var(--blue)
}

.principles h3 {
    font-size: 19px;
    margin: 0 0 5px
}

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

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

.detail-grid article {
    background: white;
    padding: 30px;
    min-height: 215px
}

.detail-grid article > span {
    font-size: 10px;
    letter-spacing: 1.4px;
    color: var(--blue);
    font-weight: 700
}

.detail-grid h3 {
    font-size: 20px;
    margin: 35px 0 10px
}

.boundary-note {
    border-left: 3px solid var(--blue);
    padding: 14px 20px;
    background: #e7eef9;
    font-size: 13px;
    color: #536984;
    margin: 25px 0 0
}

.workflow-list {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px
}

.workflow-list > div {
    border-top: 2px solid #d9e4f3;
    padding-top: 20px
}

.workflow-list span {
    color: var(--blue);
    font-size: 12px;
    font-weight: 700
}

.workflow-list h3 {
    font-size: 19px;
    margin: 35px 0 10px
}

.workflow-list p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.9
}

.case-list {
    margin-top: 50px
}

.case-list article {
    display: grid;
    grid-template-columns:1fr 3fr;
    gap: 50px;
    padding: 40px 0;
    border-top: 1px solid #dce4ee
}

.case-no {
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--blue);
    font-weight: 700
}

.case-list h3 {
    font-size: 23px;
    margin-bottom: 12px
}

.case-list p {
    max-width: 750px;
    color: var(--muted);
    font-size: 15px;
    line-height: 2
}

.case-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.case-tags span {
    background: #edf3fc;
    color: #315da2;
    font-size: 12px;
    padding: 5px 11px
}

.faq-list {
    border-top: 1px solid #d5dfea
}

.faq-list details {
    border-bottom: 1px solid #d5dfea
}

.faq-list summary {
    cursor: pointer;
    list-style: none;
    padding: 23px 0;
    font-weight: 700;
    display: flex;
    justify-content: space-between
}

.faq-list summary::-webkit-details-marker {
    display: none
}

.faq-list summary:after {
    content: '+';
    color: var(--blue);
    font-size: 24px;
    font-weight: 400;
    line-height: 1
}

.faq-list details[open] summary:after {
    content: '−'
}

.faq-list details p {
    color: var(--muted);
    font-size: 14px;
    max-width: 800px;
    padding-bottom: 20px;
    margin: 0;
    line-height: 2
}

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

.value-grid article {
    background: white;
    padding: 32px;
    min-height: 220px
}

.value-grid h3 {
    margin: 45px 0 10px;
    font-size: 21px
}

@media (max-width: 800px) {
    .business-grid, .workflow-list {
        grid-template-columns:repeat(2, 1fr)
    }

    .business-grid article {
        margin: 0;
        padding-right: 20px
    }

    .perspective-grid {
        grid-template-columns:1fr;
        gap: 40px
    }

    .detail-grid {
        grid-template-columns:repeat(2, 1fr)
    }

    .case-list article {
        grid-template-columns:1fr;
        gap: 10px
    }

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

@media (max-width: 520px) {
    .business-grid, .workflow-list, .detail-grid, .value-grid {
        grid-template-columns:1fr
    }

    .business-grid article {
        border-right: 0;
        border-bottom: 1px solid #e5ebf1;
        padding-bottom: 25px
    }

    .business-grid h3, .workflow-list h3, .value-grid h3 {
        margin-top: 20px
    }

    .case-list article {
        padding: 30px 0
    }
}

.aaaa {
    display: block;
    margin: auto;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #20a53a
}