@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("../font/AlibabaPuHuiTi-3-55-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("../font/AlibabaPuHuiTi-3-65-Medium.ttf") format("truetype");
    font-weight: 500 600;
    font-display: swap;
}

@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("../font/AlibabaPuHuiTi-3-85-Bold.ttf") format("truetype");
    font-weight: 700 900;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    color: #06235d;
    background: #f6fbff;
    font-family: "AlibabaPuHuiTi", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

/* Shared brand title metrics for initproc pages. */
.brand {
    gap: 48px;
}

.brand img {
    width: 100px;
}

.brand span {
    display: grid;
    gap: 3px;
    line-height: 1.1;
}

.brand strong {
    color: #0f1f3d;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
    white-space: nowrap;
}

.brand small {
    color: #335f9f;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
    white-space: nowrap;
}

body.nav-open {
    overflow: hidden;
}

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

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

.hero-copy,
.hero-preview,
.about-copy,
.product-card,
.footer-brand,
.footer-contact,
.footer-follow {
    min-width: 0;
}

.page-width {
    width: min(1212px, calc(100% - 78px));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 74px;
    border-bottom: 1px solid #d7e6fb;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
}

.header-inner {
    width: min(1212px, calc(100% - 78px));
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
}

.brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 48px;
}

.brand img {
    width: 100px;
    flex: 0 0 auto;
}

.brand span {
    display: grid;
    gap: 3px;
}

.brand strong {
    font-size: 21px;
    line-height: 1.1;
    white-space: nowrap;
}

.brand small {
    color: #0f48a8;
    font-size: 13px;
    font-weight: 700;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 43px;
    font-size: 15px;
    font-weight: 700;
}

.site-nav a {
    position: relative;
    height: 73px;
    display: inline-flex;
    align-items: center;
    color: #061f55;
}

.site-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 17px;
    width: 0;
    height: 3px;
    border-radius: 3px;
    background: #0a69ff;
    transform: translateX(-50%);
    transition: width .2s ease;
}

.site-nav a:hover::after,
.site-nav a.active::after {
    width: 36px;
}

.floating-contact {
    position: fixed;
    top: auto;
    right: 24px;
    bottom: 28px;
    z-index: 45;
    width: 150px;
    padding: 14px 12px 13px;
    border: 1px solid rgba(203, 217, 234, .92);
    border-radius: 8px;
    display: grid;
    gap: 9px;
    justify-items: center;
    color: #08245a;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 34px rgba(34, 78, 139, .16);
    backdrop-filter: blur(10px);
}

.floating-contact strong {
    font-size: 15px;
    line-height: 1.2;
}

.floating-contact-qr {
    width: 112px;
    height: 112px;
    padding: 5px;
    border: 1px solid #d4e1f3;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: #fff;
}

.floating-contact-qr img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.floating-contact-phone {
    color: #36527e;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
    text-align: center;
}

.floating-contact-phone a {
    display: block;
    margin-top: 2px;
    color: #0a61d8;
    white-space: nowrap;
}

.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid #cfe0f7;
    border-radius: 8px;
    background: #fff;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.nav-toggle span {
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #0a48af;
}

.section-band {
    background:
        radial-gradient(circle at 10% 4%, rgba(0, 115, 255, .08), transparent 25%),
        radial-gradient(circle at 92% 74%, rgba(0, 115, 255, .1), transparent 30%),
        linear-gradient(180deg, #f9fdff 0%, #f4faff 100%);
}

.hero {
    min-height: 526px;
    padding: 42px 0 22px;
    overflow: hidden;
}

.hero-inner {
    position: relative;
    width: min(1280px, calc(100% - 78px));
    display: grid;
    grid-template-columns: minmax(390px, 440px) minmax(0, 1fr);
    align-items: center;
    gap: 28px;
}

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

.hero-copy h1 {
    margin: 0 0 22px;
    color: #071f58;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
}

.hero-lead {
    margin: 0 0 44px;
    color: #076cff;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 800;
    white-space: nowrap;
}

.hero-text {
    max-width: 440px;
    margin: 0 0 58px;
    color: #183466;
    font-size: 17px;
    line-height: 1.95;
    font-weight: 700;
}

.hero-actions,
.product-card .btn {
    display: flex;
    align-items: center;
}

.hero-actions {
    gap: 20px;
    flex-wrap: wrap;
}

.btn {
    min-width: 154px;
    height: 58px;
    border: 1px solid transparent;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 24px;
    font-size: 16px;
    font-weight: 800;
    transition: transform .2s ease, box-shadow .2s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    color: #fff;
    background: #0869f7;
    box-shadow: 0 12px 26px rgba(8, 105, 247, .24);
}

.btn-outline {
    color: #0869f7;
    border-color: #0869f7;
    background: #fff;
}

.btn-green {
    color: #fff;
    background: #10a870;
    box-shadow: 0 12px 24px rgba(16, 168, 112, .2);
}

.hero-preview {
    --preview-scale: 1;
    position: relative;
    margin: 0;
    padding-top: 8px;
    width: calc(810px * var(--preview-scale));
    display: grid;
    grid-template-columns: 270px 520px;
    gap: 20px;
    align-items: start;
    justify-content: end;
    justify-self: start;
    transform: scale(var(--preview-scale));
    transform-origin: left top;
}

.storefront-stage {
    position: relative;
    z-index: 1;
    width: 270px;
    max-width: 270px;
    justify-self: start;
}

.phone-device {
    position: relative;
    z-index: 1;
    padding: 10px;
    border-radius: 34px;
    background: linear-gradient(180deg, #f6fbff 0%, #edf4ff 100%);
    border: 1px solid rgba(203, 220, 242, .78);
    box-shadow: 0 24px 42px rgba(39, 82, 141, .18), 0 3px 10px rgba(255, 255, 255, .9) inset;
}

.phone-screen {
    border-radius: 26px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e3edf9;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    overflow: hidden;
}

.mobile-status,
.mobile-categories,
.mobile-flash,
.mobile-section-title,
.mobile-goods,
.mobile-tabs {
    display: flex;
}

.mobile-status,
.mobile-section-title {
    align-items: center;
    justify-content: space-between;
}

.mobile-status {
    font-size: 12px;
    font-weight: 700;
    color: #1b2340;
}

.mobile-status span {
    font-size: 6px;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

.mobile-categories {
    margin-top: 12px;
    justify-content: space-between;
    gap: 6px;
}

.mobile-categories span {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    color: #23385f;
}

.mobile-categories b {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(145deg, #eef6ff, #dcecff);
    box-shadow: inset 0 -4px 8px rgba(8, 105, 247, .08);
}

.mobile-flash {
    margin-top: 10px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e8eef9;
    flex-direction: column;
    overflow: hidden;
}

.mobile-flash-head {
    min-height: 46px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    background: linear-gradient(90deg, #d81d18 0%, #ef3a2f 100%);
    white-space: nowrap;
}

.mobile-flash-head strong {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    line-height: 1;
}

.mobile-flash-head strong i {
    font-size: 11px;
}

.mobile-flash-head small {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 8px;
    opacity: .92;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-flash-head b {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    background: rgba(255, 255, 255, .18);
}

.mobile-flash-detail {
    padding: 12px;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}

.mobile-flash-cover {
    position: relative;
    border-radius: 12px;
    background: linear-gradient(180deg, #f5f8ff 0%, #eaf2ff 100%);
    min-height: 98px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-flash-countdown {
    position: absolute;
    left: 6px;
    bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: calc(100% - 12px);
    padding: 3px 7px 3px 5px;
    border-radius: 4px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    background: #e31b1b;
    white-space: nowrap;
}

.mobile-flash-clock {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    position: relative;
}

.mobile-flash-clock::before,
.mobile-flash-clock::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: #fff;
    transform-origin: left top;
}

.mobile-flash-clock::before {
    width: 5px;
    height: 2px;
    transform: translate(-1px, -1px) rotate(20deg);
}

.mobile-flash-clock::after {
    width: 2px;
    height: 4px;
    transform: translate(-1px, -4px) rotate(0deg);
}

.mobile-flash-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-content: start;
}

.mobile-flash-info strong {
    font-size: 13px;
    line-height: 1.35;
    color: #25395f;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
}

.mobile-flash-info small,
.mobile-flash-info del {
    font-size: 10px;
    line-height: 1.25;
    color: #7b8aa8;
    white-space: nowrap;
}

.mobile-flash-info del {
    text-decoration: line-through;
}

.mobile-flash-price {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    margin-top: auto;
    white-space: nowrap;
}

.mobile-flash-price label {
    color: #d81d18;
    font-size: 10px;
    font-weight: 800;
}

.mobile-flash-price b {
    color: #d81d18;
    font-size: 16px;
}

.mobile-section-title {
    margin-top: 10px;
    color: #163367;
    font-size: 12px;
    font-weight: 800;
}

.mobile-section-title small {
    color: #8a9ab8;
    font-weight: 600;
}

.mobile-goods {
    margin-top: 8px;
    gap: 10px;
}

.mobile-goods div {
    flex: 1 1 0;
    border: 1px solid #e4ecf8;
    border-radius: 12px;
    padding: 10px;
    background: #fff;
}

.mobile-goods i,
.mobile-goods span,
.mobile-goods b {
    display: block;
    border-radius: 8px;
    background: #edf3ff;
}

.mobile-goods i {
    height: 74px;
    background: linear-gradient(180deg, #eff5ff 0%, #dce9ff 100%);
}

.mobile-goods span {
    margin-top: 8px;
    height: 10px;
}

.mobile-goods b {
    margin-top: 6px;
    width: 58%;
    height: 10px;
}

.mobile-tabs {
    margin: 10px -12px -12px;
    padding: 7px 8px 12px;
    justify-content: space-around;
    border-top: 1px solid #e8eef9;
    background: #fff;
    border-radius: 0 0 26px 26px;
    overflow: hidden;
    clip-path: inset(0 round 0 0 26px 26px);
}

.mobile-tabs span {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #96a2b6;
    font-size: 10px;
    font-weight: 700;
}

.mobile-tabs span.current {
    color: #233d71;
}

.mobile-tabs i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: 17px;
    line-height: 1;
}

.workbench-stage {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    width: 520px;
    max-width: 520px;
    margin-top: 96px;
    justify-self: start;
    transform: scale(.9);
    transform-origin: left top;
    border: 1px solid #d4e1f3;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 26px 48px rgba(31, 70, 125, .18), 0 2px 0 rgba(255, 255, 255, .9) inset;
}

.workbench-toolbar {
    height: 43px;
    border-bottom: 1px solid #e6eef9;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 18px;
    color: #1c5cb7;
    font-size: 11px;
}

.workbench-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.workbench-brand img {
    width: 66px;
}

.workbench-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.workbench-actions i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.workbench-shell {
    display: grid;
    grid-template-columns: 126px 1fr;
    min-height: 380px;
}

.workbench-nav {
    border-right: 1px solid #e9eff8;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.workbench-nav span {
    height: 34px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    color: #55709a;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
}

.workbench-nav i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    margin-right: 8px;
    font-size: 12px;
}

.workbench-nav .current {
    color: #006df1;
    background: #eef5ff;
}

.workbench-body {
    background: #fafcff;
    padding: 10px 11px 13px;
}

.workbench-crumb {
    margin-bottom: 10px;
    color: #112c5a;
    font-size: 12px;
    font-weight: 700;
}

.workbench-card {
    border: 1px solid #e5edf9;
    border-radius: 8px;
    background: #fff;
}

.workbench-station {
    padding: 12px;
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 10px;
    align-items: start;
}

.station-logo {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(145deg, #4b92ff, #1a66f0);
}

.station-info strong {
    display: block;
    margin-bottom: 8px;
    color: #112c5a;
    font-size: 13px;
}

.station-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 6px;
    color: #6d7e9d;
    font-size: 7px;
    line-height: 1.1;
    font-weight: 700;
}

.station-meta span {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.station-meta.secondary {
    margin-top: 6px;
}

.state-ok {
    color: #18a062;
    font-style: normal;
}

.workbench-head {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #112c5a;
    font-size: 12px;
    font-weight: 700;
}

.workbench-head button,
.workbench-footer button {
    border: 0;
    border-radius: 6px;
    padding: 0 10px;
    height: 26px;
    color: #0869f7;
    background: #eef5ff;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
}

.workbench-metrics {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
}

.workbench-metrics div {
    min-height: 46px;
    padding: 6px 5px;
    border: 1px solid #e5edf9;
    border-radius: 7px;
    background: #fff;
}

.workbench-metrics label {
    display: block;
    color: #6f7f9b;
    font-size: 8px;
    line-height: 1.1;
    font-weight: 700;
}

.workbench-metrics strong {
    display: block;
    margin-top: 4px;
    color: #112c5a;
    font-size: 9px;
    line-height: 1;
}

.workbench-footer {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: end;
}

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

.footer-field span {
    min-width: 0;
    padding: 4px 4px;
    border: 1px solid #e5edf9;
    border-radius: 7px;
    color: #6f7f9b;
    font-size: 5px;
    line-height: 1.1;
    background: #fff;
}

.footer-field b {
    color: #112c5a;
    font-size: 6px;
    font-weight: 700;
}

.hero-preview-labels {
    position: relative;
    z-index: 2;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 270px 520px;
    gap: 20px;
    align-items: center;
    color: #1b4d91;
    font-size: 17px;
    font-weight: 500;
    text-align: center;
}

.about,
.products,
.why {
    scroll-margin-top: 94px;
}

.about {
    min-height: 230px;
    margin-top: 34px;
    padding: 30px 44px;
    border: 1px solid #d5e5fb;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 150px minmax(330px, 1fr) minmax(440px, 540px);
    align-items: center;
    gap: 34px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(34, 78, 139, .05);
}

.about-art img {
    width: 150px;
}

.about h2,
.footer-inner h2 {
    margin: 0;
}

.about h2 {
    margin-bottom: 20px;
    font-size: 25px;
}

.about-copy p,
.product-card p,
.footer-inner p {
    margin: 0;
    color: #294575;
    line-height: 1.85;
}

.about-copy p {
    font-size: 15px;
    font-weight: 600;
}

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

.about-points article,
.service-grid article,
.why-grid article {
    border: 1px solid #d8e8fb;
    border-radius: 8px;
    background: rgba(255, 255, 255, .94);
}

.about-points article {
    min-height: 126px;
    padding: 24px 18px;
    text-align: center;
}

.about-points h3,
.service-grid h3,
.why-grid h3,
.product-card h3 {
    margin: 0;
    color: #08245a;
}

.about-points h3 {
    margin-top: 10px;
    font-size: 17px;
}

.about-points p {
    margin: 10px 0 0;
    color: #395682;
    font-size: 13px;
    line-height: 1.65;
    font-weight: 600;
}

.section-title {
    margin: 28px 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #071f58;
    font-size: 25px;
    font-weight: 800;
    text-align: center;
}

.section-title::before,
.section-title::after {
    content: "";
    width: 44px;
    height: 12px;
    background: radial-gradient(circle, #0a6cff 0 3px, transparent 4px), linear-gradient(#b8d5ff, #b8d5ff) center / 28px 1px no-repeat;
}

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

.service-grid article {
    min-height: 178px;
    padding: 28px 18px 22px;
    text-align: center;
}

.service-grid h3 {
    margin-top: 18px;
    font-size: 17px;
}

.service-grid p {
    margin: 12px 0 0;
    color: #294575;
    font-size: 14px;
    line-height: 1.75;
    font-weight: 600;
}

.icon {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #096bff;
    font-size: 24px;
    background: linear-gradient(145deg, #eef6ff, #dcecff);
    box-shadow: inset 0 -6px 12px rgba(8, 105, 247, .08);
}

.icon::before {
    font-size: 25px;
    font-weight: 800;
}

.chart::before { content: "▥"; }
.shield::before { content: "◉"; }
.home::before { content: "⌂"; }
.store::before { content: "▰"; }
.workbench::before { content: "☷"; }
.ticket::before { content: "▱"; }
.bolt::before { content: "ϟ"; }
.data::before { content: "▥"; }
.support::before { content: "◔"; }
.secure::before { content: "◇"; }
.scene::before { content: "●"; }
.iterate::before { content: "↻"; }
.headset::before { content: "◠"; }

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.product-card {
    min-height: 238px;
    overflow: hidden;
    border: 1px solid #0a6cff;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 250px 1fr;
    align-items: stretch;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 252, 255, .96));
    box-shadow: 0 12px 30px rgba(29, 86, 160, .06);
}

.product-card.workbench-product {
    border-color: #16a878;
}

.product-card img {
    width: 100%;
    height: 100%;
    min-height: 238px;
    padding: 18px 14px;
    object-fit: contain;
    object-position: center;
    background:
        radial-gradient(circle at 50% 26%, rgba(8, 105, 247, .12), transparent 38%),
        linear-gradient(180deg, #f5faff 0%, #eaf4ff 100%);
    border-right: 1px solid rgba(213, 230, 250, .8);
}

.workbench-product img {
    background:
        radial-gradient(circle at 50% 26%, rgba(16, 168, 112, .12), transparent 38%),
        linear-gradient(180deg, #f5fffb 0%, #eaf8f3 100%);
}

.product-card div {
    padding: 30px 28px;
}

.product-card h3 {
    color: #0869f7;
    font-size: 24px;
}

.workbench-product h3 {
    color: #10a870;
}

.product-card p {
    margin-top: 20px;
    font-size: 15px;
    font-weight: 600;
}

.product-card .btn {
    width: fit-content;
    min-width: 164px;
    height: 46px;
    margin-top: 28px;
    font-size: 15px;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    margin-bottom: 24px;
}

.why-grid article {
    min-height: 96px;
    padding: 22px 24px;
    display: grid;
    grid-template-columns: 58px 1fr;
    column-gap: 12px;
    align-items: center;
}

.why-grid .icon {
    grid-row: span 2;
    margin: 0;
}

.why-grid h3 {
    font-size: 17px;
}

.why-grid p {
    margin: 8px 0 0;
    color: #36527e;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 600;
}

.site-footer {
    border-top: 1px solid #d8e6f7;
    background: #f8fcff;
}

.footer-inner {
    min-height: 138px;
    padding: 28px 0 24px;
    display: grid;
    grid-template-columns: minmax(470px, 1.36fr) minmax(250px, .72fr) minmax(360px, .9fr);
    gap: 34px;
    align-items: start;
}

.footer-brand {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 12px 18px;
    align-items: start;
}

.footer-brand > div {
    display: contents;
}

.footer-brand img {
    width: 62px;
    margin-top: 0;
}

.footer-brand h2 {
    align-self: start;
}

.footer-brand p {
    grid-column: 1 / -1;
    white-space: nowrap;
}

.footer-contact,
.footer-follow {
    min-width: 0;
    padding-top: 0;
}

.footer-inner h2 {
    margin: 0;
    color: #08245a;
    font-size: 16px;
    line-height: 1.25;
}

.footer-inner p {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.65;
}

.footer-inner a {
    color: #0a61d8;
}

.footer-follow {
    display: grid;
    grid-template-columns: 1fr 88px;
    grid-template-areas:
        "title qr"
        "copy qr";
    gap: 8px 16px;
    align-items: start;
}

.footer-follow h2 {
    grid-area: title;
}

.footer-follow p {
    grid-area: copy;
    margin-top: 0;
    white-space: nowrap;
}

.qr-placeholder {
    grid-area: qr;
    width: 88px;
    height: 88px;
    margin-top: 0;
    padding: 6px;
    border: 1px solid #cbd9ea;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #123b78;
    background: #fff;
    box-shadow: 0 10px 24px rgba(34, 78, 139, .1);
    font-size: 0;
}

.qr-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-record {
    min-height: 50px;
    border-top: 1px solid #deebf8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    color: #5f7192;
    font-size: 12px;
    line-height: 1.5;
}

.footer-record span {
    white-space: nowrap;
}

.footer-record a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #3e5f91;
    white-space: nowrap;
}

.footer-record img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex: 0 0 auto;
}

.footer-record a::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    width: 1px;
    height: 12px;
    background: #c9d9ee;
    transform: translateY(-50%);
}

.footer-record a:hover {
    color: #0a61d8;
}
.brand {
    gap: 48px;
}

.brand img {
    width: 100px;
}

.brand span {
    display: grid;
    gap: 3px;
    line-height: 1.1;
}

.brand strong {
    color: #0f1f3d;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
    white-space: nowrap;
}

.brand small {
    color: #335f9f;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
    white-space: nowrap;
}