:root {
    --dark: #061226;
    --hm-dark-1: #020f23;
    --hm-dark-2: #041a3d;
    --hm-accent-start: #49c8ff;
    --hm-accent-end: #0a63ff;
    --hm-glow: 0 0 18px rgba(73,200,255,.48);
    --dark-2: #071a35;
    --blue: #0d6efd;
    --blue-2: #2f85ff;
    --cyan: #20c7d9;
    --green: #16bfa3;
    --ink: #0e1b2e;
    --text: #344054;
    --muted: #6a778b;
    --line: #dfe7f1;
    --soft: #f6f9fd;
    --white: #fff;
    --shadow: 0 18px 48px rgba(13, 34, 64, .12);
    --site-bg: #f6f9fd;
    --site-bg-rgb: 246, 249, 253;
    --site-bg-soft: #f8fbff;
    --site-bg-soft-rgb: 248, 251, 255;
    --site-bg-tint: #eef6ff;
    --site-bg-tint-rgb: 238, 246, 255;
    --site-bg-panel: #ffffff;
    --site-bg-muted: #f3f8ff;
    --site-bg-deep: #061226;
    --site-bg-deep-2: #03142f;
    --site-page-gradient: linear-gradient(180deg, var(--site-bg-soft) 0%, var(--site-bg) 46%, var(--site-bg-soft) 100%);
    --site-blue-glow-soft: rgba(37, 124, 255, .08);
    --site-blue-glow: rgba(45, 139, 255, .12);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--text);
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
    background: var(--soft);
    line-height: 1.55;
}

body.nav-open {
    overflow: hidden;
}

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

button,
input {
    font: inherit;
}

.xqd-form-trap {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.xqd-form-error {
    display: block;
    margin: -6px 0 10px;
    color: #d92d20;
    font-size: 14px;
    line-height: 1.45;
}

.xqd-field-error {
    border-color: #d92d20 !important;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, .12) !important;
}

.layout {
    width: min(1600px, calc(100% - 80px));
    margin: 0 auto;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
    color: var(--white);
    background: transparent;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    backdrop-filter: none;
    transition: background .24s ease, border-color .24s ease, box-shadow .24s ease, backdrop-filter .24s ease;
}

.site-header.is-solid,
body.nav-open .site-header {
    background: linear-gradient(180deg, rgba(4, 24, 54, .96) 0%, rgba(3, 18, 43, .94) 100%);
    border-bottom-color: rgba(80, 179, 255, .14);
    box-shadow: 0 12px 34px rgba(0, 8, 20, .2);
    backdrop-filter: blur(16px);
}

.header-inner {
    width: min(1600px, calc(100% - 80px));
    height: 88px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0;
    color: var(--white);
    font-size: 19px;
    font-weight: 800;
    white-space: nowrap;
}

.brand-logo {
    display: block;
    width: clamp(218px, 18vw, 270px);
    height: auto;
    max-height: 60px;
    object-fit: contain;
    object-position: left center;
}

.main-nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
    padding-left: 72px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
}

.main-nav > a,
.main-nav .nav-link {
    position: relative;
    height: 88px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

.main-nav > a::after,
.main-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    border-radius: 99px;
    background: linear-gradient(90deg, #116dff, #35a9ff);
    box-shadow: 0 0 18px rgba(36, 133, 255, .82);
    transform: scaleX(0);
    transition: transform .18s ease;
}

.main-nav > a:hover,
.main-nav .nav-link:hover,
.main-nav .nav-item:hover > .nav-link,
.main-nav .nav-item:focus-within > .nav-link,
.main-nav .is-active {
    color: var(--white);
}

.main-nav > a:hover::after,
.main-nav .nav-link:hover::after,
.main-nav .nav-item:hover > .nav-link::after,
.main-nav .nav-item:focus-within > .nav-link::after,
.main-nav .is-active::after {
    transform: scaleX(1);
}

.main-nav:has(.nav-item:hover) > .is-active::after,
.main-nav:has(.nav-item:focus-within) > .is-active::after,
.main-nav:has(> a:hover) > .is-active::after,
.main-nav:has(> a:focus-visible) > .is-active::after {
    transform: scaleX(0);
}

.nav-item {
    position: relative;
    height: 88px;
    display: flex;
    align-items: center;
}

.nav-caret {
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .9;
    transition: transform .2s ease, opacity .2s ease;
}

.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret {
    opacity: 1;
    transform: translateY(1px) rotate(225deg);
}

.nav-dropdown {
    --nav-dropdown-panel-width: 1600px;
    --nav-dropdown-screen-gap: 128px;
    --nav-dropdown-card-columns: 5;
    --nav-dropdown-card-gap: 18px;
    --nav-dropdown-panel-padding: 30px 28px 26px;
    --nav-dropdown-panel-radius: 14px;
    --nav-dropdown-card-radius: 10px;
    --nav-dropdown-cover-radius: 9px;
    --nav-dropdown-cover-aspect: 1.28 / 1;
    --nav-dropdown-title-gap: 18px;
    --nav-dropdown-title-size: 18px;
    position: fixed;
    top: 88px;
    left: 50%;
    z-index: 20;
    width: min(var(--nav-dropdown-panel-width), calc(100vw - var(--nav-dropdown-screen-gap)));
    padding-top: 28px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.nav-dropdown-services {
    --nav-dropdown-panel-width: 1600px;
    --nav-dropdown-card-columns: 6;
}

.nav-dropdown-solutions {
    --nav-dropdown-panel-width: 1600px;
    --nav-dropdown-card-columns: 6;
}

.nav-dropdown-knowledge {
    --nav-dropdown-panel-width: min(820px, calc(50vw - 45px));
    --nav-dropdown-screen-gap: 96px;
    --nav-dropdown-card-columns: 3;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.nav-item.is-anchor-jumping .nav-dropdown,
.nav-item.is-anchor-jumping:hover .nav-dropdown,
.nav-item.is-anchor-jumping:focus-within .nav-dropdown {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 12px);
}

.nav-dropdown-inner {
    position: relative;
    padding: var(--nav-dropdown-panel-padding);
    border: 1px solid rgba(185, 211, 255, .72);
    border-radius: var(--nav-dropdown-panel-radius);
    background: linear-gradient(180deg, #f9fcff, #eef5ff);
    box-shadow:
        0 22px 60px rgba(0, 11, 32, .38),
        0 0 36px rgba(22, 113, 255, .18),
        inset 0 1px 0 rgba(255, 255, 255, .95);
    backdrop-filter: blur(10px);
}

.nav-dropdown-inner::before {
    content: "";
    position: absolute;
    left: var(--dropdown-arrow-left, 50%);
    top: -7px;
    width: 18px;
    height: 18px;
    border-left: 1px solid rgba(185, 211, 255, .72);
    border-top: 1px solid rgba(185, 211, 255, .72);
    background: #f9fcff;
    transform: translateX(-50%) rotate(45deg);
}

.nav-dropdown-head {
    display: none;
    gap: 6px;
    padding: 3px 4px 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.nav-dropdown-head strong {
    color: #fff;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 900;
}

.nav-dropdown-head span {
    color: rgba(236, 245, 255, .78);
    font-size: 13px;
    line-height: 1.55;
    white-space: normal;
}

.nav-dropdown-grid {
    display: grid;
    grid-template-columns: repeat(var(--nav-dropdown-card-columns), minmax(0, 1fr));
    gap: var(--nav-dropdown-card-gap);
}

.nav-dropdown-list {
    display: grid;
    grid-template-columns: repeat(var(--nav-dropdown-card-columns), minmax(0, 1fr));
    gap: var(--nav-dropdown-card-gap);
}

.main-nav .dropdown-link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: var(--nav-dropdown-card-radius);
    color: #1f2937;
    background: transparent;
    transition: transform .2s ease, color .2s ease;
}

.main-nav .dropdown-link::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: var(--nav-dropdown-cover-aspect);
    border-radius: var(--nav-dropdown-cover-radius);
    background-color: #061226;
    background-image: var(--dropdown-cover, var(--dropdown-cover-fallback, none));
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 0 1px rgba(0, 28, 74, .12), 0 10px 22px rgba(7, 30, 70, .16);
    transition: box-shadow .2s ease, filter .2s ease, transform .2s ease;
}

.main-nav .dropdown-link::after {
    display: none;
}

.main-nav .dropdown-link:hover,
.main-nav .dropdown-link:focus-visible {
    color: #0d6efd;
    transform: translateY(-2px);
}

.main-nav .dropdown-link:hover::before,
.main-nav .dropdown-link:focus-visible::before {
    filter: brightness(1.08) saturate(1.08);
    box-shadow: inset 0 0 0 1px rgba(42, 132, 255, .24), 0 14px 30px rgba(7, 30, 70, .22);
}

.main-nav .dropdown-link span {
    display: none;
}

.main-nav .dropdown-link strong,
.main-nav .dropdown-link em {
    min-width: 0;
}

.main-nav .dropdown-link strong {
    display: block;
    color: currentColor;
    margin-top: var(--nav-dropdown-title-gap);
    font-size: var(--nav-dropdown-title-size);
    line-height: 1.28;
    font-weight: 600;
    text-align: center;
    white-space: normal;
}

.main-nav .dropdown-link em {
    display: none;
}

.header-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.header-btn {
    min-width: 128px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid rgba(123, 185, 255, .44);
    border-radius: 16px;
    color: var(--white);
    background: linear-gradient(180deg, #247bff, #0b61f4);
    box-shadow: 0 0 24px rgba(30, 116, 255, .56), inset 0 1px 0 rgba(255, 255, 255, .18);
    font-size: 16px;
    font-weight: 800;
}

.header-btn::after {
    content: "";
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-block;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .18);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 7 14.5 12 9.5 17' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
}

.nav-toggle {
    display: none;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 6px;
    background: transparent;
}

.nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 4px auto;
    border-radius: 2px;
    background: var(--white);
    transition: transform .2s ease, opacity .2s ease;
}

.hero {
    position: relative;
    overflow: hidden;
    color: var(--white);
    background: #020b1c;
}

.hero::before {
    display: none;
}

.hero::after {
    display: none;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        var(--hero-slide-image, url("/template/xqd/assets/images/hero-banner-art.svg?v=2026042424")) center center / cover no-repeat;
}

.hero-inner {
    position: relative;
    z-index: 1;
    min-height: 550px;
    display: grid;
    grid-template-columns: minmax(0, 560px);
    align-items: center;
    gap: 44px;
    padding: 108px 70px 88px;
}

.hero-copy h1 {
    margin: 0 0 22px;
    color: var(--white);
    font-size: 52px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0;
}

.hero-copy p {
    margin: 0 0 34px;
    color: rgba(255, 255, 255, .82);
    font-size: 15px;
    font-weight: 700;
}

.hero-actions {
    display: flex;
    gap: 18px;
}

.hero .hero-copy h1,
.hero .hero-copy p,
.hero .hero-actions {
    opacity: 0;
    transform: translate3d(calc(-100vw - 160px), 0, 0);
    transition: opacity .12s ease, transform .48s cubic-bezier(.16, .84, .28, 1);
    will-change: transform, opacity;
}

.hero .hero-copy h1.is-visible,
.hero .hero-copy p.is-visible,
.hero .hero-actions.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@keyframes heroTextRunIn {
    0% {
        opacity: 1;
        transform: translate3d(calc(-100vw - 160px), 0, 0);
    }

    78% {
        opacity: 1;
        transform: translate3d(18px, 0, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.btn {
    min-width: 152px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 800;
}

.btn-primary {
    color: var(--white);
    background: var(--blue);
    box-shadow: 0 16px 34px rgba(13, 110, 253, .28);
}

.btn-outline {
    color: var(--white);
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .04);
}

.hero-graphic {
    position: relative;
    min-height: 332px;
    background:
        var(--hero-slide-image, url("/template/xqd/assets/images/hero-banner-art.svg?v=2026042424")) center right / contain no-repeat;
}

.stats-wrap {
    position: relative;
    z-index: 5;
    margin-top: -54px;
}

.stats-card {
    max-width: 1600px;
    min-height: 110px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 14px;
    background: var(--white);
    box-shadow: 0 14px 34px rgba(7, 22, 46, .18);
}

.stat-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 19px;
    min-width: 0;
    padding: 25px 38px;
}

.stat-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 62px;
    transform: translateY(-50%);
    background: #e3e9f2;
}

.stat-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--blue);
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(13, 110, 253, .1), rgba(13, 110, 253, .03));
}

.stat-icon svg {
    width: 46px;
    height: 46px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.loop-icon::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 3px solid var(--blue);
    border-radius: 5px;
}

.stat-item strong {
    display: block;
    color: #163064;
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.stat-number {
    display: inline-block;
    min-width: 4.2ch;
    will-change: contents;
}

.stat-item p {
    margin: 8px 0 2px;
    color: #334155;
    font-size: 14px;
    font-weight: 800;
}

.stat-item em {
    color: #8a96a8;
    font-style: normal;
    font-size: 12px;
    white-space: nowrap;
}


.section {
    padding: 72px 0;
}

.services-section,
.solution-section,
.case-section {
    background: var(--white);
}

.section-head {
    width: min(640px, 100%);
    margin: 0 auto 36px;
    text-align: center;
}

.section-head h2,
.title-row h2 {
    margin: 0;
    color: var(--ink);
    font-size: 34px;
    line-height: 1.2;
    font-weight: 900;
}

.section-head h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    margin: 16px auto 12px;
    border-radius: 99px;
    background: var(--blue);
}

.section-head p,
.title-row p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.ai-visibility-section {
    position: relative;
    margin-top: -88px;
    padding: 164px 0 66px;
    background:
        radial-gradient(circle at 50% 18%, rgba(33, 123, 234, .1), transparent 34%),
        linear-gradient(180deg, #f4f9ff 0%, #f8fbff 58%, #fff 100%);
}

.ai-visibility-section::before {
    display: none;
}

.ai-visibility-section .layout {
    position: relative;
    z-index: 1;
}

.ai-visibility-section .section-head {
    width: min(760px, 100%);
    margin-bottom: 34px;
}

.ai-visibility-section .section-head h2 {
    color: #102b63;
    font-size: 38px;
}

.ai-visibility-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(360px, .9fr);
    gap: 46px;
    width: min(1168px, 100%);
    margin: 0 auto;
    padding: 36px 34px 38px;
    border: 1px solid rgba(217, 228, 244, .9);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .94));
    box-shadow:
        0 24px 70px rgba(20, 67, 128, .12),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

.visibility-form {
    display: grid;
    gap: 18px;
}

.visibility-form label {
    display: grid;
    gap: 9px;
    color: #163064;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 900;
}

.visibility-form input {
    width: 100%;
    height: 54px;
    border: 1px solid #dce6f3;
    border-radius: 8px;
    padding: 0 18px;
    color: #14294b;
    background: rgba(255, 255, 255, .94);
    font-size: 14px;
    font-weight: 700;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(10, 35, 70, .03);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.visibility-form input::placeholder {
    color: #a7b3c4;
}

.visibility-form input:focus {
    border-color: rgba(13, 110, 253, .72);
    background: #fff;
    box-shadow:
        0 0 0 3px rgba(13, 110, 253, .11),
        inset 0 1px 2px rgba(10, 35, 70, .03);
}

.visibility-form button {
    height: 56px;
    border: 0;
    border-radius: 8px;
    color: var(--white);
    background: linear-gradient(180deg, #1682ff 0%, #0066f5 100%);
    font-size: 17px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 16px 32px rgba(13, 110, 253, .24);
    transition: filter .22s ease, transform .22s ease, box-shadow .22s ease;
}

.visibility-form button:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 20px 38px rgba(13, 110, 253, .3);
}

.visibility-form-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: #8b9ab0;
    font-size: 12px;
    line-height: 1.55;
}

.visibility-form-note span {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border-radius: 50%;
    color: #fff;
    background: var(--blue);
    font-size: 11px;
    font-weight: 900;
}

.visibility-side {
    display: grid;
    grid-template-rows: 192px 1fr;
    gap: 18px;
    min-width: 0;
    padding: 24px 20px 20px;
    border-radius: 14px;
    background:
        radial-gradient(circle at 58% 16%, rgba(47, 133, 255, .18), transparent 34%),
        linear-gradient(180deg, #edf6ff 0%, #f5f9ff 100%);
}

.visibility-art {
    position: relative;
    min-height: 192px;
    overflow: hidden;
    border-radius: 12px;
}

.visibility-art::before {
    content: "";
    position: absolute;
    inset: 14px 22px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(13, 110, 253, .2), transparent 58%);
    filter: blur(10px);
}

.visibility-monitor {
    position: absolute;
    left: 50%;
    top: 33px;
    display: grid;
    place-items: center;
    width: 126px;
    height: 104px;
    border: 8px solid rgba(210, 230, 255, .92);
    border-radius: 14px;
    color: #fff;
    background:
        linear-gradient(140deg, rgba(72, 169, 255, .9), rgba(9, 96, 232, .96));
    box-shadow:
        0 22px 38px rgba(13, 110, 253, .24),
        inset 0 1px 0 rgba(255, 255, 255, .55);
    transform: translateX(-50%);
}

.visibility-monitor span {
    font-size: 44px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: 0 0 16px rgba(255, 255, 255, .5);
}

.visibility-stand {
    position: absolute;
    left: 50%;
    top: 134px;
    width: 118px;
    height: 28px;
    border-radius: 0 0 12px 12px;
    background:
        linear-gradient(180deg, rgba(149, 194, 250, .42), rgba(102, 157, 231, .24));
    transform: translateX(-50%);
}

.visibility-stand::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 138px;
    height: 10px;
    border-radius: 999px;
    background: rgba(62, 128, 218, .16);
    transform: translateX(-50%);
}

.visibility-lens {
    position: absolute;
    right: 52px;
    bottom: 28px;
    width: 56px;
    height: 56px;
    border: 8px solid rgba(17, 115, 247, .86);
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    box-shadow: 0 14px 26px rgba(13, 110, 253, .22);
}

.visibility-lens::after {
    content: "";
    position: absolute;
    right: -22px;
    bottom: -16px;
    width: 34px;
    height: 10px;
    border-radius: 999px;
    background: #0b72f2;
    transform: rotate(45deg);
    transform-origin: left center;
}

.visibility-panel-card {
    position: absolute;
    width: 70px;
    height: 58px;
    border: 1px solid rgba(111, 170, 240, .28);
    border-radius: 10px;
    background: rgba(255, 255, 255, .62);
    box-shadow: 0 16px 30px rgba(68, 132, 210, .12);
}

.visibility-panel-card::before,
.visibility-panel-card::after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    height: 7px;
    border-radius: 99px;
    background: rgba(25, 124, 246, .28);
}

.visibility-panel-card::before {
    top: 15px;
}

.visibility-panel-card::after {
    top: 30px;
    right: 26px;
}

.visibility-panel-card.card-left {
    left: 30px;
    top: 56px;
    transform: rotate(3deg);
}

.visibility-panel-card.card-right {
    right: 26px;
    top: 42px;
    transform: rotate(-5deg);
}

.visibility-chart {
    position: absolute;
    right: 28px;
    bottom: 52px;
    display: flex;
    align-items: end;
    gap: 6px;
    width: 58px;
    height: 58px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .62);
    box-shadow: 0 16px 30px rgba(68, 132, 210, .12);
}

.visibility-chart i {
    display: block;
    flex: 1;
    border-radius: 99px 99px 0 0;
    background: linear-gradient(180deg, #5aa7ff, #0d6efd);
}

.visibility-chart i:nth-child(1) {
    height: 16px;
}

.visibility-chart i:nth-child(2) {
    height: 26px;
}

.visibility-chart i:nth-child(3) {
    height: 36px;
}

.visibility-benefits {
    display: grid;
    gap: 14px;
}

.visibility-benefit {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 92px;
    padding: 18px 20px 18px 18px;
    border: 1px solid rgba(226, 235, 248, .9);
    border-radius: 10px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 14px 30px rgba(40, 86, 148, .08);
}

.benefit-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(180deg, #5aa7ff, #0d6efd);
    box-shadow: 0 12px 24px rgba(13, 110, 253, .24);
}

.benefit-icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.visibility-benefit h3 {
    margin: 0 0 8px;
    color: #102b63;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 900;
}

.visibility-benefit p {
    margin: 0;
    color: #6f7f96;
    font-size: 13px;
    line-height: 1.65;
    font-weight: 700;
}

.service-grid {
    width: 100%;
    min-height: 402px;
    display: grid;
    grid-template-columns: 1fr 1fr 1.6667fr 1fr 1fr;
    align-items: start;
    gap: 0;
    margin: 0 auto;
    padding: 18px 0 0;
    transition: grid-template-columns .3s cubic-bezier(.4, 0, .2, 1);
}

.service-grid:has(.service-card:nth-child(1):hover) {
    grid-template-columns: 1.6667fr 1fr 1fr 1fr 1fr;
}

.service-grid:has(.service-card:nth-child(2):hover) {
    grid-template-columns: 1fr 1.6667fr 1fr 1fr 1fr;
}

.service-grid:has(.service-card:nth-child(3):hover) {
    grid-template-columns: 1fr 1fr 1.6667fr 1fr 1fr;
}

.service-grid:has(.service-card:nth-child(4):hover) {
    grid-template-columns: 1fr 1fr 1fr 1.6667fr 1fr;
}

.service-grid:has(.service-card:nth-child(5):hover) {
    grid-template-columns: 1fr 1fr 1fr 1fr 1.6667fr;
}

.services-section {
    padding: 64px 0 72px;
}

.services-section .section-head {
    width: min(780px, 100%);
    margin-bottom: 42px;
}

.services-section .section-head h2 {
    color: #0b1f3a;
    font-size: 42px;
}

.services-section .section-head h2::after {
    width: 58px;
    height: 6px;
    margin: 18px auto 14px;
    box-shadow: 0 5px 12px rgba(13, 110, 253, .24);
}

.services-section .section-head p {
    display: block;
    margin: 0 auto;
    color: #5f6f84;
    font-size: 16px;
    line-height: 1.85;
    font-weight: 500;
}

.service-card {
    position: relative;
    z-index: 1;
    min-width: 0;
    height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 24px 32px;
    overflow: hidden;
    isolation: isolate;
    border: 0;
    border-radius: 0;
    text-align: center;
    color: inherit;
    text-decoration: none;
    background: #e8f0f8;
    box-shadow: none;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1), background .3s cubic-bezier(.4, 0, .2, 1);
}

.service-card:nth-child(2),
.service-card:nth-child(5) {
    background: #f3f6f9;
}

.service-card:nth-child(4) {
    background: #eaf1f7;
}

.service-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: -2;
    height: 180px;
    background: linear-gradient(135deg, #1068c2 0%, #0b4f9a 100%);
    box-shadow: none;
    transition: background .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1), height .3s cubic-bezier(.4, 0, .2, 1);
}

.service-card:nth-child(2)::before,
.service-card:nth-child(5)::before {
    background: linear-gradient(135deg, #0d56a9 0%, #073d7e 100%);
}

.service-card::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    height: 180px;
    opacity: 0;
    background: none;
    transition: opacity .3s cubic-bezier(.4, 0, .2, 1), height .3s cubic-bezier(.4, 0, .2, 1);
}

.service-card:hover,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured {
    z-index: 5;
    height: 383px;
    transform: translateY(-15px);
    background: #f4f6f8;
    box-shadow: 0 22px 42px rgba(8, 31, 58, .18);
}

.service-card:hover::before,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured::before {
    height: 180px;
    background:
        var(--service-cover-image) center center / cover no-repeat,
        #031126;
    box-shadow: none;
}

.service-card:hover::after,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured::after {
    height: 180px;
    opacity: 0;
    background: none;
}

.service-icon {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    display: inline-grid;
    place-items: center;
    margin-bottom: 12px;
    color: var(--white);
    border-radius: 50%;
    background: transparent;
    filter: drop-shadow(0 8px 12px rgba(0, 38, 92, .24));
    transition: color .26s ease, background .26s ease, filter .26s ease, transform .26s ease;
}

.service-icon::before,
.service-icon::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
}

.service-geo::before {
    inset: 6px;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none'%3E%3Ccircle cx='32' cy='30' r='20' stroke='white' stroke-width='5'/%3E%3Cpath d='M47 45l15 15' stroke='white' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M21 34l8-8 8 7 11-14' stroke='white' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M48 19v11H37' stroke='white' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: none;
}

.service-geo::after {
    display: none;
}

.service-global::before {
    left: 10px;
    top: 10px;
    width: 38px;
    height: 38px;
    border: 4px solid currentColor;
    border-radius: 50%;
}

.service-global::after {
    left: 20px;
    top: 9px;
    width: 18px;
    height: 40px;
    border-left: 3px solid currentColor;
    border-right: 3px solid currentColor;
    border-radius: 50%;
    box-shadow: 0 15px 0 -13px currentColor, 0 -15px 0 -13px currentColor;
}

.service-site::before {
    left: 14px;
    top: 13px;
    width: 31px;
    height: 33px;
    border: 4px solid currentColor;
    border-radius: 6px;
    box-shadow: -8px -7px 0 rgba(255, 255, 255, .16);
}

.service-site::after {
    left: 23px;
    top: 25px;
    width: 16px;
    height: 3px;
    border-radius: 99px;
    background: currentColor;
    box-shadow: 0 7px 0 currentColor;
}

.service-ai::before {
    inset: 4px;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none'%3E%3Cpath d='M36 7l25 14v30L36 65 11 51V21L36 7z' stroke='white' stroke-width='4.5'/%3E%3Cpath d='M25 46l8-22h6l8 22' stroke='white' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M29 38h14M51 24v22' stroke='white' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.service-ai::after {
    display: none;
}

.service-video::before {
    left: 13px;
    top: 16px;
    width: 30px;
    height: 27px;
    border: 4px solid currentColor;
    border-radius: 7px;
}

.service-video::after {
    left: 26px;
    top: 24px;
    width: 0;
    height: 0;
    border-left: 11px solid currentColor;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.service-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 6px;
    color: var(--white);
    font-size: 22px;
    line-height: 1.3;
    font-weight: 900;
    writing-mode: horizontal-tb;
    word-break: keep-all;
    text-shadow: none;
    transition: color .26s ease;
}

.service-slogan {
    position: relative;
    z-index: 1;
    display: block;
    min-height: 22px;
    color: rgba(255, 255, 255, .88);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
    white-space: nowrap;
    text-shadow: none;
}

.service-brief,
.service-detail {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: hidden;
    color: #64748b;
    font-size: 14px;
    line-height: 1.85;
    font-weight: 500;
    transition: color .26s ease, margin .26s ease, opacity .26s ease, max-height .26s ease;
}

.service-brief {
    min-height: 52px;
    max-height: 86px;
    margin: 46px 0 24px;
}

.service-detail {
    max-height: 0;
    margin: 0;
    opacity: 0;
}

.service-tags {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(72px, 1fr));
    justify-content: center;
    gap: 8px;
    width: min(310px, 100%);
    max-height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: max-height .26s ease, margin .26s ease, opacity .26s ease, transform .26s ease;
}

.service-tags span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 8px;
    color: #315f99;
    background: #f2f7ff;
    border: 0;
    border-radius: 2px;
    cursor: default;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.service-more {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 118px;
    height: 35px;
    margin-top: auto;
    color: #0d4f9e;
    background: #fff;
    border: 1px solid #e6eef8;
    border-radius: 0;
    font-size: 14px;
    font-weight: 700;
    transition: color .26s ease, background .26s ease, border-color .26s ease;
}

.service-card:hover .service-icon,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-icon {
    color: var(--white);
    background: transparent;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .28));
    transform: translateY(-2px);
}

.service-card:hover h3,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured h3 {
    color: var(--white);
}

.service-card:hover .service-brief,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-brief {
    min-height: 0;
    max-height: 0;
    margin: 0;
    opacity: 0;
}

.service-card:hover .service-detail,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-detail {
    max-height: 92px;
    margin: 38px 0 14px;
    opacity: 1;
    color: #526074;
}

.service-card:hover .service-tags,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-tags {
    max-height: 34px;
    margin: 0 0 18px;
    opacity: 1;
    transform: translateY(0);
}

.service-card:hover .service-tags span,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-tags span {
    color: #315f99;
    background: #f2f7ff;
}

.service-card:hover .service-more,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-more {
    color: var(--white);
    background: var(--blue);
    border-color: var(--blue);
}

.services-section .service-card .service-icon {
    display: none;
}

.services-section .service-card h3,
.services-section .service-card:hover h3,
.services-section .service-grid:not(:has(.service-card:hover)) .service-card.is-featured h3 {
    margin-top: 82px;
}

.services-section {
    background:
        radial-gradient(circle at 50% 0, rgba(219, 237, 255, .94), transparent 34%),
        linear-gradient(180deg, #f9fcff 0%, #edf5ff 100%);
}

.service-grid {
    min-height: 520px;
    grid-template-columns: 1fr 1fr 1.4fr 1fr 1fr;
    align-items: end;
    gap: 14px;
    padding-top: 28px;
}

.service-grid:not(:has(.service-card:hover)) {
    grid-template-columns: 1fr 1fr 1.4fr 1fr 1fr;
}

.service-grid:has(.service-card:nth-child(1):hover) {
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
}

.service-grid:has(.service-card:nth-child(2):hover) {
    grid-template-columns: 1fr 1.4fr 1fr 1fr 1fr;
}

.service-grid:has(.service-card:nth-child(3):hover) {
    grid-template-columns: 1fr 1fr 1.4fr 1fr 1fr;
}

.service-grid:has(.service-card:nth-child(4):hover) {
    grid-template-columns: 1fr 1fr 1fr 1.4fr 1fr;
}

.service-grid:has(.service-card:nth-child(5):hover) {
    grid-template-columns: 1fr 1fr 1fr 1fr 1.4fr;
}

.service-card,
.service-card:nth-child(2),
.service-card:nth-child(4),
.service-card:nth-child(5) {
    height: 458px;
    justify-content: flex-start;
    padding: 48px 26px 34px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(42, 100, 170, .12);
    transform: none;
}

.service-card::before,
.service-card:nth-child(2)::before,
.service-card:nth-child(5)::before {
    inset: 0 0 auto;
    height: 206px;
    background:
        linear-gradient(180deg, rgba(3, 12, 28, .06), rgba(3, 12, 28, .36)),
        var(--service-cover-image) center center / cover no-repeat,
        #031126;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

.service-card::after {
    inset: 0 0 auto;
    height: 206px;
    opacity: 1;
    background:
        radial-gradient(circle at 45% 42%, rgba(255, 255, 255, .16), transparent 24%),
        linear-gradient(120deg, rgba(255, 255, 255, .12), transparent 42%);
}

.service-card:hover,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured {
    z-index: 6;
    height: 500px;
    padding-top: 38px;
    transform: none;
    background: #fff;
    box-shadow: 0 28px 58px rgba(24, 72, 136, .2);
}

.service-card:hover::before,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured::before {
    height: 218px;
    background:
        var(--service-cover-image) center center / cover no-repeat,
        #031126;
}

.service-card:hover::after,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured::after {
    height: 218px;
    opacity: 0;
    background: none;
}

.service-icon,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 18px;
    color: #fff;
    background: transparent;
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, .32));
    transform: none;
}

.service-card:hover .service-icon,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-icon {
    filter: drop-shadow(0 0 16px rgba(66, 170, 255, .55));
}

.service-card h3,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 25px;
    line-height: 1.25;
    text-shadow: 0 6px 18px rgba(0, 32, 90, .18);
}

.service-card:hover h3,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured h3 {
    font-size: 27px;
    text-shadow: 0 8px 22px rgba(0, 0, 0, .26);
}

.service-slogan,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-slogan {
    min-height: auto;
    color: rgba(255, 255, 255, .9);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 800;
}

.service-brief {
    min-height: 78px;
    max-height: 92px;
    margin: 70px 0 28px;
    color: #778395;
    font-size: 14px;
    line-height: 1.85;
    opacity: 1;
}

.service-detail,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-detail {
    max-height: 0;
    margin: 0;
    opacity: 0;
}

.service-card:hover .service-brief,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-brief {
    min-height: 0;
    max-height: 0;
    margin: 0;
    opacity: 0;
}

.service-card:hover .service-detail,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-detail {
    max-height: 88px;
    margin: 54px 0 16px;
    opacity: 1;
    color: #6f7f94;
    font-size: 14px;
    line-height: 1.75;
}

.service-tags {
    max-height: 0;
    margin: 0;
    opacity: 0;
    transform: translateY(8px);
}

.service-card:hover .service-tags,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-tags {
    max-height: 34px;
    margin: 0 0 22px;
    opacity: 1;
    transform: translateY(0);
}

.service-card:hover .service-tags span,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-tags span {
    color: #1f78e7;
    background: #eef6ff;
}

.service-more,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-more {
    max-height: 38px;
    min-width: 132px;
    height: 38px;
    margin-top: auto;
    opacity: 1;
    color: #0d6efd;
    background: #fff;
    border: 1px solid rgba(13, 110, 253, .42);
    border-radius: 4px;
    pointer-events: auto;
}

.service-card:hover .service-more,
.service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-more {
    color: #fff;
    background: #0d6efd;
    border-color: #0d6efd;
    box-shadow: 0 12px 24px rgba(13, 110, 253, .22);
}

.loop-section,
.process-section {
    background: #edf3fa;
}

.loop-section {
    padding: 34px 0 48px;
    background:
        linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%);
}

.process-section {
    padding: 74px 0 84px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.loop-section .section-head {
    margin-bottom: 0;
}

.loop-section .section-head h2 {
    color: #13264b;
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: 0;
}

.loop-section .section-head h2::after {
    display: none;
}

.loop-section .section-head p {
    margin-top: 8px;
    color: #7b8ca5;
    font-size: 14px;
    font-weight: 400;
}

.loop-box {
    --loop-blue: #217bea;
    --loop-surface: #edf4fc;
    position: relative;
    display: grid;
    grid-template-columns: 238px 58px repeat(3, minmax(0, 1fr) 58px) minmax(0, 1fr);
    align-items: start;
    gap: 0;
    width: 100%;
    margin: 0 auto;
    padding: 0 0 106px;
}

.loop-entry {
    position: relative;
    z-index: 2;
    min-height: 296px;
}

.loop-entry h3 {
    margin: 0 0 22px;
    color: #1b315a;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
    text-align: center;
}

.loop-entry-list {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 252px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.loop-entry-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid rgba(209, 224, 241, .9);
    border-radius: 6px;
    color: #263b59;
    background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(247, 251, 255, .9));
    box-shadow: 0 7px 18px rgba(25, 72, 128, .08);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.entry-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: var(--white);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.entry-ai {
    background: #1f77ff;
}

.entry-google {
    background: conic-gradient(from 45deg, #4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0);
}

.entry-baidu {
    color: #111827;
    background: #ffd21d;
}

.entry-video,
.entry-site {
    background: #092434;
}

.loop-entry-funnel {
    position: absolute;
    top: 44px;
    right: -47px;
    z-index: 1;
    width: 76px;
    height: 252px;
    pointer-events: none;
}

.loop-entry-funnel i {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 56px;
    border: 1px solid rgba(61, 142, 228, .12);
    border-left: 0;
    border-radius: 0 22px 22px 0;
    background: linear-gradient(90deg, rgba(77, 153, 238, .14), rgba(77, 153, 238, .018));
    clip-path: polygon(0 0, 74% 0, 100% 50%, 74% 100%, 0 100%);
}

.loop-entry-funnel i:nth-child(1) {
    left: 0;
}

.loop-entry-funnel i:nth-child(2) {
    left: 10px;
    opacity: .72;
}

.loop-entry-funnel i:nth-child(3) {
    left: 20px;
    opacity: .46;
}

.loop-card {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    height: 252px;
    min-height: 0;
    margin-top: 44px;
    padding: 44px 24px 10px;
    border: 1px solid rgba(211, 226, 243, .92);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(244, 249, 255, .96), rgba(230, 239, 249, .98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 14px 34px rgba(33, 76, 125, .08);
}

.loop-card::after {
    display: none;
}

.loop-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px;
    z-index: 1;
    width: 100%;
    height: 44px;
    overflow: visible;
    pointer-events: none;
    shape-rendering: geometricPrecision;
}

.loop-line path {
    fill: none;
    stroke: #2d84ed;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: none;
}

.loop-icon {
    position: absolute;
    top: -31px;
    left: 50%;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: 0;
    border: 4px solid #f8fbff;
    border-radius: 50%;
    color: var(--white);
    background: var(--loop-blue);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .32),
        0 10px 22px rgba(22, 91, 175, .22);
    transform: translateX(-50%);
}

.loop-icon svg {
    position: static;
    inset: auto;
    width: 29px;
    height: 29px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 4.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.loop-card h3 {
    display: block;
    margin: 0 0 16px;
    color: #13264b;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 900;
    text-align: center;
}

.loop-icon::before,
.loop-icon::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    display: none;
}

.loop-green {
    background: #3eaa86;
}

.loop-blue {
    background: #207bea;
}

.loop-indigo {
    background: #237bea;
}

.loop-teal {
    background: #3ba98c;
}

.loop-card ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: max-content;
    max-width: 100%;
    min-height: 136px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.loop-card li {
    position: relative;
    margin: 0;
    padding-left: 13px;
    color: #627590;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.loop-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    background: var(--loop-blue);
}

.loop-arrow {
    position: relative;
    z-index: 3;
    align-self: start;
    width: 30px;
    height: 23px;
    margin: 157px auto 0;
    border: 0;
    background: var(--loop-blue);
    transform: none;
    filter: drop-shadow(0 4px 8px rgba(33, 123, 234, .26));
    clip-path: polygon(0 32%, 62% 32%, 62% 0, 100% 50%, 62% 100%, 62% 68%, 0 68%);
}

.loop-note {
    position: absolute;
    left: 60.88%;
    bottom: 37px;
    z-index: 2;
    margin: 0;
    padding: 0 16px;
    color: #1d6ceb;
    background: #f3f7fc;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    transform: translateX(-50%);
}

.solution-section {
    padding: 62px 0 76px;
    background: linear-gradient(180deg, #eef4fb 0%, #e9f0f8 100%);
}

.solution-section .title-row {
    position: relative;
    display: block;
    margin-bottom: 32px;
    text-align: center;
}

.solution-section .title-row div {
    display: block;
}

.solution-section .title-row h2 {
    margin: 0;
    color: #13264b;
    font-size: 36px;
    line-height: 1.2;
}

.solution-section .title-row p {
    margin: 10px 0 0;
    color: #73849b;
    font-size: 14px;
    font-weight: 400;
}

.solution-section .title-row a {
    position: absolute;
    right: 0;
    top: 11px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1767d8;
    font-size: 14px;
    font-weight: 800;
}

.solution-section .title-row a::after {
    content: "";
    width: 16px;
    height: 10px;
    background: currentColor;
    clip-path: polygon(0 36%, 64% 36%, 64% 0, 100% 50%, 64% 100%, 64% 64%, 0 64%);
}

.title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.title-row a {
    color: var(--blue);
    font-size: 14px;
    font-weight: 800;
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.solution-card {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(201, 218, 238, .75);
    color: var(--white);
    background: var(--dark);
    box-shadow: 0 14px 34px rgba(7, 22, 46, .14);
    transform: translateY(0);
    transition: transform .34s ease, box-shadow .34s ease, border-color .34s ease;
}

.solution-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(5, 16, 35, 0) 0%, rgba(5, 16, 35, .02) 32%, rgba(5, 16, 35, .26) 62%, rgba(3, 10, 24, .82) 100%);
    transition: background .34s ease, opacity .34s ease;
}

.solution-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .98;
    background-position: center;
    background-size: cover;
    filter: brightness(1.12) contrast(1.08) saturate(1.04);
    transform: scale(1);
    transition: transform .56s ease, filter .56s ease;
}

.cover-rack::after {
    background-image: url("/static/images/nopic.png");
}

.cover-track::after {
    background-image: url("/static/images/nopic.png");
}

.cover-clean::after {
    background-image: url("/static/images/nopic.png");
}

.cover-store::after {
    background-image: url("/static/images/nopic.png");
}

.cover-auto::after {
    background-image: url("/static/images/nopic.png");
}

.solution-card:hover {
    border-color: rgba(78, 151, 242, .7);
    box-shadow: 0 20px 46px rgba(7, 22, 46, .2);
    transform: translateY(-8px);
}

.solution-card:hover::before {
    background: linear-gradient(180deg, rgba(5, 16, 35, 0) 0%, rgba(5, 16, 35, .01) 32%, rgba(5, 16, 35, .22) 62%, rgba(3, 10, 24, .78) 100%);
}

.solution-card:hover::after {
    filter: brightness(1.18) contrast(1.1) saturate(1.08);
    transform: scale(1.065);
}

.solution-content {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 28px;
    z-index: 2;
    transform: translateY(0);
    transition: transform .34s ease;
}

.solution-content h3 {
    margin: 0 0 10px;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 900;
}

.solution-content p {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    font-weight: 700;
}

.solution-content div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding-right: 30px;
}

.solution-content span {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .36);
    border-radius: 4px;
    color: rgba(255, 255, 255, .9);
    background: rgba(0, 0, 0, .18);
    font-size: 12px;
    font-weight: 700;
}

.solution-card:hover .solution-content {
    transform: translateY(-6px);
}

.solution-card:hover .solution-content span {
    border-color: rgba(255, 255, 255, .48);
    background: rgba(0, 0, 0, .22);
}

.solution-card i,
.news-card i {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--white);
    transition: background .28s ease, transform .28s ease;
}

.solution-card i::before,
.news-card i::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--dark);
    border-right: 2px solid var(--dark);
    transform: rotate(45deg);
    transition: border-color .28s ease;
}

.solution-card:hover i {
    background: var(--blue);
    transform: translate(3px, -3px);
}

.solution-card:hover i::before {
    border-color: var(--white);
}

.case-section {
    padding: 62px 0 70px;
    background: linear-gradient(180deg, #f4f8fd 0%, #edf3fa 100%);
}

.case-section .title-row {
    position: relative;
    display: block;
    margin-bottom: 30px;
    text-align: center;
}

.case-section .title-row div {
    display: block;
}

.case-section .title-row h2 {
    margin: 0;
    color: #13264b;
    font-size: 36px;
    line-height: 1.2;
}

.case-section .title-row p {
    margin: 10px 0 0;
    color: #73849b;
    font-size: 14px;
    font-weight: 400;
}

.case-section .title-row a {
    position: absolute;
    right: 0;
    top: 11px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1767d8;
    font-size: 14px;
    font-weight: 800;
}

.case-section .title-row a::after {
    content: "";
    width: 16px;
    height: 10px;
    background: currentColor;
    clip-path: polygon(0 36%, 64% 36%, 64% 0, 100% 50%, 64% 100%, 64% 64%, 0 64%);
}

.case-carousel {
    --case-gap: 24px;
}

.case-viewport {
    overflow: hidden;
    margin: -8px 0 -10px;
    padding: 8px 0 10px;
    touch-action: pan-y;
    cursor: grab;
}

.case-viewport.is-dragging {
    cursor: grabbing;
}

.case-track {
    display: flex;
    gap: var(--case-gap);
    will-change: transform;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

.case-track.is-resetting {
    transition: none;
}

.case-viewport.is-dragging .case-track {
    transition: none;
}

.case-card {
    flex: 0 0 calc((100% - 48px) / 3);
    display: block;
    overflow: hidden;
    border: 1px solid rgba(197, 212, 231, .92);
    border-radius: 10px;
    background: var(--white);
    box-shadow: 0 16px 36px rgba(10, 34, 72, .08);
    transform: translateY(0);
    transition: transform .34s ease, box-shadow .34s ease, border-color .34s ease;
}

.case-cover {
    position: relative;
    height: 238px;
    overflow: hidden;
    border-radius: 9px 9px 0 0;
    background: #dbe7f5;
}

.case-cover::before {
    content: "";
    position: absolute;
    inset: -1px;
    background-image: var(--case-cover-image);
    background-position: center;
    background-size: cover;
    filter: brightness(1.02) contrast(1.03);
    transform: scale(1);
    transition: transform .56s ease, filter .56s ease;
}

.case-screen::before {
    background-image: var(--case-cover-image, url("/static/images/nopic.png"));
}

.case-dashboard::before {
    background-image: var(--case-cover-image, url("/static/images/nopic.png"));
}

.case-video::before {
    background-image: var(--case-cover-image, url("/static/images/nopic.png"));
}

.case-body {
    padding: 22px 26px 24px;
}

.case-body h3 {
    margin: 0 0 8px;
    color: #13264b;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 900;
}

.case-body p {
    margin: 0 0 20px;
    color: #73849b;
    font-size: 13px;
    line-height: 1.45;
}

.case-data {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid #e4ebf3;
    padding-top: 17px;
}

.case-data span {
    position: relative;
    min-width: 0;
    text-align: center;
}

.case-data span + span {
    border-left: 1px solid #e4ebf3;
}

.case-data b {
    display: block;
    color: #246fda;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 900;
    transition: color .28s ease;
}

.case-data em {
    display: block;
    margin-top: 8px;
    color: #7b8798;
    font-style: normal;
    font-size: 12px;
    line-height: 1.2;
}

.case-card:hover {
    border-color: rgba(67, 138, 230, .42);
    box-shadow: 0 22px 48px rgba(10, 34, 72, .14);
    transform: translateY(-7px);
}

.case-card:hover .case-cover::before {
    filter: brightness(1.08) contrast(1.05) saturate(1.04);
    transform: scale(1.055);
}

.case-card:hover .case-data b {
    color: #0d6efd;
}

.case-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.case-dots button,
.case-dots span {
    width: 11px;
    height: 11px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d2dbe7;
    cursor: pointer;
    transition: width .24s ease, background .24s ease;
}

.case-dots .active,
.case-dots button.is-active {
    width: 22px;
    background: var(--blue);
}

.process-section .title-row {
    display: block;
    margin-bottom: 50px;
    text-align: center;
}

.process-section .title-row h2 {
    color: #13264b;
    font-size: 36px;
    line-height: 1.2;
}

.process-section .title-row p {
    margin-top: 10px;
    color: #78889f;
    font-size: 15px;
    font-weight: 400;
}

.process-line {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 13.2576%);
    justify-content: space-between;
    gap: 0;
    width: min(1320px, 100%);
    max-width: 1320px;
    margin: 0 auto;
    padding-top: 32px;
}

.process-line::before {
    display: none;
}

.process-flow-svg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 72px;
    overflow: visible;
    pointer-events: none;
}

.process-flow-path {
    fill: none;
    stroke: #b9d4f7;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.process-flow-arrow {
    fill: none;
    stroke: #4c8ff0;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.process-step {
    position: relative;
    z-index: 2;
    min-height: 206px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    text-align: center;
    background: transparent;
    box-shadow: none;
    transform: translateY(0);
    perspective: 1000px;
}

.process-step:nth-of-type(n+2):nth-of-type(-n+5) {
    border-radius: 36px 36px 12px 12px;
}

.process-step::before,
.process-step::after {
    display: none;
}

.process-flip {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transform-style: preserve-3d;
    transition: transform .64s cubic-bezier(.2, .76, .2, 1);
}

.process-step:hover .process-flip {
    transform: rotateY(180deg);
}

.process-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 42px 16px 22px;
    border: 1px solid rgba(222, 232, 246, .95);
    border-radius: inherit;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.process-front {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .88)),
        linear-gradient(135deg, rgba(13, 110, 253, .06), rgba(255, 255, 255, 0));
    box-shadow:
        0 18px 38px rgba(11, 38, 78, .06),
        inset 0 1px 0 rgba(255, 255, 255, .92);
}

.process-back {
    justify-content: center;
    padding: 36px 16px 22px;
    color: var(--white);
    border-color: rgba(75, 145, 244, .68);
    background:
        radial-gradient(circle at 50% 12%, rgba(76, 153, 255, .42), transparent 38%),
        linear-gradient(180deg, #0e4fb9 0%, #0a2f72 100%);
    box-shadow:
        0 24px 48px rgba(12, 65, 151, .2),
        inset 0 1px 0 rgba(255, 255, 255, .22);
    transform: rotateY(180deg);
}

.process-step > span {
    position: absolute;
    top: -25px;
    left: 50%;
    z-index: 3;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 4px solid #dbeaff;
    border-radius: 50%;
    color: var(--white);
    background: linear-gradient(180deg, #1f7dff 0%, #0d62e8 100%);
    box-shadow:
        0 8px 18px rgba(13, 110, 253, .22),
        inset 0 1px 0 rgba(255, 255, 255, .42);
    font-size: 16px;
    line-height: 1;
    font-weight: 900;
    transform: translateX(-50%);
}

.process-step h3 {
    margin: 0 0 14px;
    color: #13264b;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 900;
}

.process-back strong {
    margin: 0 0 14px;
    color: var(--white);
    font-size: 20px;
    line-height: 1.2;
    font-weight: 900;
}

.process-step p {
    margin: 0 auto;
    color: #73849b;
    font-size: 13.5px;
    line-height: 1.72;
}

.process-step p span {
    display: block;
}

@media (min-width: 981px) {
    .loop-section {
        padding: 34px 0 48px;
        background:
            linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%);
    }

    .loop-section .section-head {
        margin-bottom: 0;
    }

    .loop-section .section-head h2 {
        color: #13264b;
        font-size: 32px;
        line-height: 1.25;
        letter-spacing: 0;
    }

    .loop-section .section-head p {
        margin-top: 8px;
        color: #7b8ca5;
        font-size: 14px;
        font-weight: 400;
    }

    .loop-box {
        --loop-blue: #217bea;
        --loop-surface: #edf4fc;
        position: relative;
        display: grid;
        grid-template-columns: 238px 58px repeat(3, minmax(0, 1fr) 58px) minmax(0, 1fr);
        align-items: start;
        gap: 0;
        width: 100%;
        margin: 0 auto;
        padding: 0 0 106px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .loop-entry {
        position: relative;
        z-index: 2;
        grid-column: auto;
        display: block;
        min-height: 296px;
        padding: 0;
        overflow: visible;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .loop-entry h3 {
        margin: 0 0 22px;
        color: #1b315a;
        font-size: 18px;
        line-height: 1.2;
        font-weight: 900;
        text-align: center;
    }

    .loop-entry-list {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        grid-template-columns: none;
        gap: 0;
        height: 252px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .loop-entry-list li {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        height: 38px;
        margin: 0;
        padding: 0 14px;
        border: 1px solid rgba(209, 224, 241, .9);
        border-radius: 6px;
        color: #263b59;
        background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(247, 251, 255, .9));
        box-shadow: 0 7px 18px rgba(25, 72, 128, .08);
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
    }

    .loop-entry-funnel {
        position: absolute;
        top: 44px;
        right: -47px;
        z-index: 1;
        display: block;
        width: 76px;
        height: 252px;
        pointer-events: none;
    }

    .loop-line {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 34px;
        z-index: 1;
        display: block;
        width: 100%;
        height: 44px;
        overflow: visible;
        pointer-events: none;
        shape-rendering: geometricPrecision;
    }

    .loop-card {
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        display: block;
        height: 252px;
        min-height: 0;
        margin-top: 44px;
        padding: 44px 24px 10px;
        border: 1px solid rgba(211, 226, 243, .92);
        border-radius: 8px;
        background:
            linear-gradient(180deg, rgba(244, 249, 255, .96), rgba(230, 239, 249, .98));
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .9),
            0 14px 34px rgba(33, 76, 125, .08);
    }

    .loop-icon {
        position: absolute;
        top: -31px;
        left: 50%;
        display: grid;
        place-items: center;
        width: 60px;
        height: 60px;
        margin: 0;
        border: 4px solid #f8fbff;
        border-radius: 50%;
        color: var(--white);
        background: var(--loop-blue);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .32),
            0 10px 22px rgba(22, 91, 175, .22);
        transform: translateX(-50%);
    }

    .loop-card h3 {
        display: block;
        margin: 0 0 16px;
        color: #13264b;
        font-size: 20px;
        line-height: 1.1;
        font-weight: 900;
        text-align: center;
    }

    .loop-card ul {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        grid-template-columns: none;
        width: max-content;
        max-width: 100%;
        min-height: 136px;
        margin: 0 auto;
        padding: 0;
        gap: 0;
        list-style: none;
    }

    .loop-card li {
        position: relative;
        display: block;
        min-height: 0;
        margin: 0;
        padding: 0 0 0 13px;
        border: 0;
        border-radius: 0;
        color: #627590;
        background: transparent;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.3;
        text-align: left;
    }

    .loop-card li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 7px;
        display: block;
        width: 4.5px;
        height: 4.5px;
        border-radius: 50%;
        background: var(--loop-blue);
    }

    .loop-card li:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .loop-arrow {
        position: relative;
        z-index: 3;
        align-self: start;
        display: block;
        width: 30px;
        height: 23px;
        margin: 157px auto 0;
        border: 0;
        background: var(--loop-blue);
        filter: drop-shadow(0 4px 8px rgba(33, 123, 234, .26));
        transform: none;
        clip-path: polygon(0 32%, 62% 32%, 62% 0, 100% 50%, 62% 100%, 62% 68%, 0 68%);
    }

    .loop-note {
        position: absolute;
        left: 60.88%;
        bottom: 37px;
        z-index: 2;
        display: block;
        margin: 0;
        padding: 0 16px;
        border: 0;
        border-radius: 0;
        color: #1d6ceb;
        background: #f3f7fc;
        box-shadow: none;
        font-size: 14px;
        font-weight: 800;
        line-height: 1;
        transform: translateX(-50%);
    }
}

.process-back p {
    color: rgba(255, 255, 255, .82);
    font-size: 13.5px;
    line-height: 1.82;
}

.process-step:hover .process-front,
.process-step:hover .process-back {
    border-color: rgba(88, 147, 229, .55);
    box-shadow:
        0 22px 48px rgba(11, 38, 78, .1),
        inset 0 1px 0 rgba(255, 255, 255, .94);
}

.news-section {
    position: relative;
    overflow: hidden;
    padding: 64px 0 72px;
    background: transparent;
}

.news-section .title-row {
    position: relative;
    display: block;
    margin-bottom: 20px;
    text-align: center;
}

.news-section .title-row div {
    display: block;
}

.news-section .title-row h2 {
    margin: 0;
    color: #13264b;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 850;
}

.news-section .title-row p {
    margin: 10px auto 0;
    color: #78889f;
    font-size: 15px;
    font-weight: 400;
}

.news-more-row {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.news-more-link {
    display: inline-flex;
    height: 42px;
    padding: 0 22px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(33, 123, 234, .2);
    border-radius: 999px;
    color: #1f74e8;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 10px 22px rgba(24, 91, 178, .08);
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
}

.news-more-link::after {
    content: " ->";
}

.news-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 28px;
}

.news-tabs button {
    height: 36px;
    padding: 0 20px;
    border: 1px solid rgba(174, 202, 238, .95);
    border-radius: 999px;
    color: #5b708b;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 8px 18px rgba(27, 79, 142, .05);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: color .24s ease, background .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.news-tabs button.is-active {
    color: var(--white);
    border-color: #217bea;
    background: linear-gradient(180deg, #2b86ff 0%, #0f63e5 100%);
    box-shadow: 0 12px 24px rgba(33, 123, 234, .24);
}

.news-panel {
    display: none;
}

.news-panel.is-active {
    display: grid;
}

.news-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.news-card {
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(202, 222, 247, .82);
    border-radius: 8px;
    color: #061226;
    background: rgba(255, 255, 255, .96);
    box-shadow:
        0 18px 42px rgba(10, 42, 86, .1),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    transform: translateY(0);
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.news-card img {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: clamp(152px, 9.8vw, 178px);
    flex: 0 0 auto;
    z-index: 1;
    object-fit: cover;
    border-bottom: 1px solid rgba(210, 226, 246, .88);
    color: transparent;
    font-size: 0;
    background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
    transform: none;
    transition: filter .28s ease, opacity .2s ease;
}

.news-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    height: clamp(152px, 9.8vw, 178px);
    border-bottom: 1px solid rgba(210, 226, 246, .88);
    background:
        linear-gradient(135deg, rgba(248, 251, 255, .98) 0%, rgba(235, 245, 255, .98) 100%);
    pointer-events: none;
}

.news-card::after {
    display: none;
}

.news-card img.is-error {
    opacity: 0;
    visibility: hidden;
}

.news-card-content {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 2;
    min-height: 146px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 18px 58px 18px 18px;
}

.news-card-meta {
    display: inline-flex;
    max-width: 100%;
    margin-top: auto;
    align-items: center;
    color: #71839c;
    font-size: 12px;
    line-height: 1.2;
}

.news-card h3 {
    display: -webkit-box;
    min-height: 50px;
    margin: 0 0 8px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #061226;
    font-size: 17px;
    line-height: 1.45;
    text-shadow: none;
}

.news-card-summary {
    display: -webkit-box;
    min-height: 38px;
    margin: 0 0 14px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #5f718a;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
}

.news-card time {
    color: #71839c;
    font-size: 12px;
    white-space: nowrap;
}

.news-card i {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(13, 110, 253, .18);
    border-radius: 50%;
    background: rgba(13, 110, 253, .08);
    backdrop-filter: none;
    transition: background .24s ease, transform .24s ease;
}

.news-card i::before {
    content: "";
    position: static;
    inset: auto;
    display: block;
    width: 15px;
    height: 15px;
    border: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%230d6efd' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: none;
}

.news-card:hover {
    border-color: rgba(64, 146, 255, .76);
    box-shadow:
        0 28px 58px rgba(10, 42, 86, .18),
        0 0 0 1px rgba(64, 146, 255, .1);
    transform: translateY(-5px);
}

.news-card:hover img {
    filter: brightness(1.03) saturate(1.04);
}

.news-card:hover i {
    background: rgba(13, 110, 253, .14);
    transform: translateX(2px);
}

.site-footer {
    padding: 0;
    color: rgba(218, 236, 255, .7);
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background:
        linear-gradient(90deg, rgba(80, 179, 255, .08) 0 1px, transparent 1px 100%) 0 0 / 132px 132px,
        linear-gradient(180deg, #041a3b 0%, #03142f 52%, #020d22 100%);
}

.footer-shell {
    width: 100%;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(90deg, rgba(20, 132, 255, .1), transparent 26%, transparent 74%, rgba(21, 155, 255, .09)),
        linear-gradient(180deg, #041f48 0%, #031936 46%, #020d22 100%);
    box-shadow: 0 -16px 46px rgba(4, 37, 94, .16), inset 0 1px 0 rgba(80, 179, 255, .14);
}

.footer-diagnosis {
    position: relative;
    z-index: 1;
    min-height: 154px;
    border-bottom: 1px solid rgba(80, 179, 255, .18);
    background:
        linear-gradient(90deg, rgba(4, 22, 53, .98), rgba(5, 47, 105, .9), rgba(4, 22, 53, .98));
}

.footer-diagnosis-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(420px, 1fr) auto minmax(300px, 384px);
    align-items: center;
    column-gap: 48px;
    width: min(1600px, calc(100% - 80px));
    min-height: 154px;
    margin: 0 auto;
}

.footer-diagnosis-copy {
    grid-column: 1;
}

.footer-diagnosis::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(104, 190, 255, .08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(104, 190, 255, .06) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    opacity: .35;
}

.footer-diagnosis-copy h2 {
    margin: 0;
    color: var(--white);
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: 0;
    font-weight: 900;
}

.footer-diagnosis-copy p {
    margin: 12px 0 0;
    color: rgba(207, 229, 255, .74);
    font-size: 15px;
    font-weight: 700;
}

.footer-diagnosis-btn {
    position: relative;
    z-index: 2;
    grid-column: 2;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 184px;
    height: 54px;
    padding: 0 28px;
    margin: 0 !important;
    border-radius: 8px;
    color: var(--white) !important;
    background: linear-gradient(180deg, #2497ff 0%, #0d67f2 100%);
    box-shadow: 0 16px 30px rgba(7, 112, 245, .36), 0 0 22px rgba(34, 184, 255, .22);
    font-size: 16px !important;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    transition: filter .24s ease, transform .24s ease, box-shadow .24s ease;
}

.footer-diagnosis-btn:hover,
.footer-diagnosis-btn:focus-visible {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 20px 36px rgba(7, 94, 230, .42);
}

.footer-check {
    position: relative;
    z-index: 2;
    grid-column: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    height: 52px;
    border: 1px solid rgba(95, 189, 255, .26);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .14);
}

.footer-check input {
    width: 100%;
    min-width: 0;
    border: 0;
    padding: 0 20px;
    color: #10264a;
    background: rgba(255, 255, 255, .96);
    font-size: 14px;
    font-weight: 700;
    outline: none;
}

.footer-check input::placeholder {
    color: #8b9ab0;
}

.footer-check button {
    border: 0;
    color: var(--white);
    background: linear-gradient(180deg, #2497ff 0%, #0d67f2 100%);
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    transition: filter .24s ease, transform .24s ease;
}

.footer-check button:hover {
    filter: brightness(1.06);
}

.footer-ai-brain {
    position: relative;
    z-index: 1;
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 126px;
    margin-left: 0;
    pointer-events: none;
}

.footer-ai-brain::before {
    display: none;
}

.footer-ai-brain::after {
    display: none;
}

.footer-ai-brain img {
    position: relative;
    z-index: 1;
    width: 336px;
    max-width: none;
    height: 126px;
    object-fit: contain;
    object-position: center;
    border: 0;
    border-radius: 0;
    mix-blend-mode: screen;
    opacity: 1;
    transform: translateX(0);
    filter: none;
    animation: footerBrainFloat 5.6s ease-in-out infinite;
}

@keyframes footerBrainFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes footerBrainGlow {
    0%,
    100% {
        opacity: .66;
        transform: scale(.98);
    }

    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}

.footer-main {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1.55fr repeat(4, minmax(0, .82fr)) 1.55fr;
    gap: 34px;
    width: min(1600px, calc(100% - 80px));
    margin: 0 auto;
    padding: 36px 0 28px;
}

.footer-about .brand {
    margin-bottom: 16px;
    color: var(--white);
}

.footer-about .brand-logo {
    width: min(270px, 100%);
    max-height: 72px;
}

.site-footer h3 {
    margin: 0 0 16px;
    color: #f5fbff;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .02em;
}

.site-footer p {
    margin: 0 0 10px;
    color: rgba(213, 232, 255, .72);
    font-size: 14px;
    line-height: 1.78;
    font-weight: 500;
}

.footer-about p {
    max-width: 372px;
    margin-bottom: 18px;
}

.footer-brand-copy {
    position: relative;
    padding-left: 13px;
}

.footer-brand-copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: .48em;
    width: 3px;
    height: 3.8em;
    border-radius: 999px;
    background: linear-gradient(180deg, #31d6ff, rgba(31, 116, 255, .25));
    box-shadow: 0 0 14px rgba(49, 214, 255, .28);
}

.site-footer a:not(.brand) {
    display: block;
    margin: 0 0 10px;
    color: rgba(199, 222, 248, .7);
    font-size: 14px;
    line-height: 1.42;
    font-weight: 500;
    transition: color .2s ease, transform .2s ease;
}

.site-footer a:not(.brand):hover {
    color: #48c8ff;
    transform: translateX(2px);
}

.footer-social {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 7px;
    margin: 0;
}

.site-footer .social-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 35px;
    padding: 0 11px 0 7px;
    margin: 0 !important;
    border: 1px solid rgba(87, 182, 255, .24);
    border-radius: 8px;
    color: rgba(234, 247, 255, .9);
    background:
        linear-gradient(135deg, rgba(27, 129, 255, .22), rgba(255, 255, 255, .06));
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 16px rgba(15, 137, 255, .08);
    transition: transform .22s ease, color .22s ease, border-color .22s ease, background .22s ease;
}

.social-logo {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    background: transparent;
    overflow: hidden;
    box-shadow: 0 0 12px rgba(64, 191, 255, .2);
}

.site-footer .social-link svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: none;
}

.site-footer .social-link rect,
.site-footer .social-link path {
    vector-effect: non-scaling-stroke;
}

.site-footer .social-link:hover,
.site-footer .social-link:focus-visible,
.site-footer .social-link.is-qr-open {
    z-index: 30;
    color: #e7f8ff;
    border-color: rgba(72, 200, 255, .62);
    background:
        linear-gradient(135deg, rgba(31, 145, 255, .36), rgba(44, 204, 255, .14));
    transform: translateY(-2px);
}

.social-qr {
    position: absolute;
    left: 50%;
    top: auto;
    bottom: calc(100% + 12px);
    z-index: 80;
    width: 160px;
    padding: 12px 12px 10px;
    border: 1px solid rgba(87, 182, 255, .34);
    border-radius: 12px;
    color: #0f2547;
    background: #fff;
    box-shadow: 0 18px 42px rgba(0, 13, 36, .32), 0 0 22px rgba(32, 161, 255, .16);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px) scale(.96);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
    pointer-events: none;
}

.social-qr::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-right: 1px solid rgba(124, 196, 255, .28);
    border-bottom: 1px solid rgba(124, 196, 255, .28);
    transform: translateX(-50%) rotate(45deg);
}

.site-footer .social-link:hover .social-qr,
.site-footer .social-link:focus-visible .social-qr,
.site-footer .social-link.is-qr-open .social-qr {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
}

.footer-social .social-link:first-child .social-qr {
    left: 0;
    transform: translate(0, 8px) scale(.96);
}

.footer-social .social-link:first-child .social-qr::after {
    left: 38px;
    transform: rotate(45deg);
}

.footer-social .social-link:first-child:hover .social-qr,
.footer-social .social-link:first-child:focus-visible .social-qr,
.footer-social .social-link:first-child.is-qr-open .social-qr {
    transform: translate(0, 0) scale(1);
}

.footer-social .social-link:last-child .social-qr {
    right: 0;
    left: auto;
    transform: translate(0, 8px) scale(.96);
}

.footer-social .social-link:last-child .social-qr::after {
    right: 38px;
    left: auto;
    transform: rotate(45deg);
}

.footer-social .social-link:last-child:hover .social-qr,
.footer-social .social-link:last-child:focus-visible .social-qr,
.footer-social .social-link:last-child.is-qr-open .social-qr {
    transform: translate(0, 0) scale(1);
}

.social-qr-title,
.social-qr-text {
    display: block;
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
}

.social-qr-title {
    margin-bottom: 7px;
    color: #0f2547;
}

.social-qr-text {
    margin-top: 7px;
    color: #405979;
    font-weight: 600;
}

.social-qr-box {
    position: relative;
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border: 6px solid #fff;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(15, 37, 71, .12);
}

.social-qr-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.social-qr-placeholder {
    background:
        linear-gradient(90deg, #101827 0 5px, transparent 5px 10px) 0 0 / 18px 18px,
        linear-gradient(0deg, rgba(16, 24, 39, .92) 0 5px, transparent 5px 10px) 0 0 / 22px 22px,
        #fff;
}

.social-qr-placeholder::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 9px;
    width: 26px;
    height: 26px;
    border: 6px solid #101827;
    background: #fff;
    box-shadow: 67px 0 0 0 #fff, 67px 0 0 6px #101827, 0 67px 0 0 #fff, 0 67px 0 6px #101827;
}

.social-qr-placeholder::after {
    content: "";
    position: absolute;
    left: 23px;
    top: 23px;
    width: 7px;
    height: 7px;
    background: #101827;
    box-shadow:
        67px 0 #101827,
        0 67px #101827,
        41px 40px #101827,
        53px 52px #101827,
        35px 68px #101827,
        72px 70px #101827;
}

.footer-contact p {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: rgba(213, 232, 255, .76);
}

.contact-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: #e4f8ff;
    background: linear-gradient(135deg, rgba(36, 142, 255, .38), rgba(43, 201, 255, .12));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 14px rgba(25, 139, 255, .12);
}

.contact-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.qr-code {
    position: relative;
    width: 96px;
    height: 96px;
    display: grid;
    place-items: end center;
    margin: 16px auto 0;
    padding-bottom: 8px;
    border-radius: 8px;
    overflow: hidden;
    color: #334155;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
}

.footer-qr-placeholder {
    background:
        repeating-linear-gradient(90deg, #111827 0 6px, transparent 6px 12px),
        repeating-linear-gradient(0deg, transparent 0 6px, #111827 6px 12px),
        #fff;
}

.qr-code img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
    min-height: 48px;
    width: min(1600px, calc(100% - 80px));
    margin: 0 auto;
    padding: 0 0 20px;
    border-top: 1px solid rgba(80, 179, 255, .18);
    color: rgba(190, 215, 242, .62);
    font-size: 13px;
    font-weight: 500;
}

.footer-bottom a {
    display: inline-flex !important;
    margin: 0 !important;
    color: rgba(190, 215, 242, .62) !important;
}

.mobile-bottom-bar {
    display: none;
}

@media (max-width: 1360px) {
    .header-inner {
    width: min(1600px, calc(100% - 80px));
        gap: 22px;
    }

    .main-nav {
        gap: 22px;
        padding-left: 42px;
        font-size: 15px;
    }

    .header-btn {
        min-width: 124px;
        height: 48px;
    }
}

@media (max-width: 1180px) {
    .main-nav {
        gap: 18px;
        padding-left: 46px;
        font-size: 15px;
    }

    .nav-dropdown-services {
        --nav-dropdown-panel-width: 1080px;
        --nav-dropdown-screen-gap: 48px;
    }

    .nav-dropdown-solutions {
        --nav-dropdown-panel-width: 1080px;
        --nav-dropdown-screen-gap: 48px;
    }

    .nav-dropdown-knowledge {
        --nav-dropdown-panel-width: min(560px, calc(50vw - 5px));
        --nav-dropdown-screen-gap: 48px;
    }

    .main-nav .dropdown-link strong {
        font-size: 18px;
    }

    .service-grid,
    .solution-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .service-grid:not(:has(.service-card:hover)) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ai-visibility-panel {
        gap: 28px;
        padding: 30px 26px 32px;
    }

    .service-grid:has(.service-card:nth-child(1):hover),
    .service-grid:has(.service-card:nth-child(2):hover),
    .service-grid:has(.service-card:nth-child(3):hover),
    .service-grid:has(.service-card:nth-child(4):hover),
    .service-grid:has(.service-card:nth-child(5):hover) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .loop-box {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 14px;
        padding: 0;
    }

    .loop-arrow {
        display: none;
    }

    .loop-box::before,
    .loop-box::after,
    .loop-card::after,
    .loop-entry-funnel,
    .loop-line,
    .loop-note {
        display: none;
    }

    .footer-main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-diagnosis-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 28px;
        min-height: auto;
        padding: 30px 0;
    }

    .footer-diagnosis-copy,
    .footer-diagnosis-btn {
        grid-column: auto;
    }

    .footer-ai-brain {
        display: none;
    }
}

@media (max-width: 980px) {
    html,
    body {
        overflow-x: hidden;
    }

    .layout {
        width: min(720px, calc(100% - 32px));
    }

    .site-header .header-inner {
        width: min(720px, calc(100% - 32px));
    }

    .header-inner {
        height: 58px;
    }

    .brand {
        font-size: 15px;
    }

    .brand-logo {
        width: clamp(150px, 48vw, 188px);
        max-height: 44px;
    }

    .header-btn {
        display: none;
    }

    .nav-toggle {
        display: inline-block;
    }

    .main-nav {
        position: fixed;
        left: auto;
        right: 0;
        top: 58px;
        width: 0;
        max-width: 100vw;
        height: calc(100vh - 58px);
        display: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 0;
        background: #051023;
        transform: translateX(100%);
        transition: transform .24s ease;
        overflow: hidden;
        color: #fff;
    }

    .main-nav > a,
    .main-nav .nav-link {
        width: 100%;
        height: 48px;
        justify-content: space-between;
        border-bottom: 1px solid rgba(124, 196, 255, .12);
        color: rgba(246, 251, 255, .96);
        font-size: 17px;
        font-weight: 700;
    }

    .main-nav > a {
        justify-content: flex-start;
    }

    .main-nav > a::after,
    .main-nav .nav-link::after {
        display: none;
    }

    .nav-item {
        display: block;
        height: auto;
    }

    .nav-caret {
        display: block;
        width: 8px;
        height: 8px;
        margin-left: auto;
        border-width: 2px;
        opacity: .78;
        transform: translateY(-2px) rotate(45deg);
    }

    .nav-dropdown {
        position: static;
        width: 100%;
        max-height: 0;
        padding: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: none;
        overflow: hidden;
        transition: max-height .24s ease, opacity .18s ease, visibility .18s ease;
    }

    .main-nav .nav-item.has-dropdown:hover > .nav-dropdown,
    .main-nav .nav-item.has-dropdown:focus-within > .nav-dropdown {
        max-height: 0;
        padding: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: none;
    }

    .main-nav .nav-item.has-dropdown.is-mobile-open > .nav-dropdown,
    .main-nav .nav-item.has-dropdown.is-mobile-open:hover > .nav-dropdown,
    .main-nav .nav-item.has-dropdown.is-mobile-open:focus-within > .nav-dropdown {
        max-height: 760px;
        padding: 4px 0 14px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .nav-item:hover .nav-caret,
    .nav-item:focus-within .nav-caret {
        opacity: .78;
        transform: translateY(-2px) rotate(45deg);
    }

    .nav-item.is-mobile-open > .nav-link .nav-caret {
        opacity: 1;
        transform: translateY(2px) rotate(225deg);
    }

    .nav-dropdown-inner {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .nav-dropdown-inner::before {
        display: none;
    }

    .nav-dropdown-head {
        display: none;
    }

    .nav-dropdown-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .nav-dropdown-list,
    .nav-dropdown-knowledge .nav-dropdown-list {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .main-nav .dropdown-link {
        display: grid;
        min-height: auto;
        grid-template-columns: 30px minmax(0, 1fr);
        column-gap: 13px;
        padding: 12px 0;
        border: 0;
        border-bottom: 1px solid rgba(124, 196, 255, .1);
        border-radius: 0;
        color: #fff;
        background: transparent;
    }

    .main-nav .dropdown-link::before {
        display: none;
    }

    .main-nav .dropdown-link:hover,
    .main-nav .dropdown-link:focus-visible {
        color: #fff;
        transform: none;
    }

    .main-nav .dropdown-link span {
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        border-radius: 9px;
        color: #dff4ff;
        background:
            radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .28), transparent 34%),
            linear-gradient(180deg, #2f9bff, #0d6efd);
        font-size: 11px;
        font-weight: 900;
        box-shadow: 0 8px 18px rgba(13, 110, 253, .2);
    }

    .main-nav .dropdown-link strong {
        grid-column: 2;
        margin-top: 0;
        font-size: 15px;
        line-height: 1.2;
        text-align: left;
    }

    .main-nav .dropdown-link em {
        display: block;
        grid-column: 2;
        margin-top: 5px;
        color: rgba(229, 241, 255, .68);
        font-size: 12px;
        line-height: 1.4;
        font-style: normal;
        font-weight: 600;
        white-space: normal;
    }

    body.nav-open .main-nav {
        left: 0;
        right: auto;
        display: flex;
        width: 100%;
        padding: 18px 22px 24px;
        transform: translateX(0);
        overflow-y: auto;
    }

    body.nav-open .nav-toggle span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    body.nav-open .nav-toggle span:nth-child(2) {
        opacity: 0;
    }

    body.nav-open .nav-toggle span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .hero {
        background:
            radial-gradient(circle at 50% 72%, rgba(20, 105, 230, .2), transparent 34%),
            linear-gradient(180deg, rgba(5, 16, 35, .99), rgba(5, 16, 35, .9)),
            var(--dark);
    }

    .hero-inner {
        min-height: 550px;
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 92px 0 82px;
    }

    .hero-copy h1 {
        font-size: 39px;
    }

    .hero-graphic {
        min-height: 300px;
        background-position: center;
    }

    .stats-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ai-visibility-section {
        padding: 154px 0 58px;
    }

    .ai-visibility-panel {
        grid-template-columns: 1fr;
        width: min(720px, 100%);
    }

    .visibility-side {
        grid-template-rows: auto;
    }

    .visibility-art {
        min-height: 180px;
    }

    .stat-item:nth-child(2) {
        border-right: 0;
    }

    .stat-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--line);
    }

    .service-grid,
    .solution-grid,
    .process-line,
    .news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .case-carousel {
        --case-gap: 18px;
    }

    .case-card {
        flex-basis: calc((100% - 18px) / 2);
    }

    .service-grid {
        min-height: 0;
        display: grid;
        gap: 16px;
        padding-top: 0;
    }

    .service-grid:has(.service-card:nth-child(1):hover),
    .service-grid:has(.service-card:nth-child(2):hover),
    .service-grid:has(.service-card:nth-child(3):hover),
    .service-grid:has(.service-card:nth-child(4):hover),
    .service-grid:has(.service-card:nth-child(5):hover) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-grid:not(:has(.service-card:hover)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-card,
    .service-card:hover {
        height: 340px;
        transform: none;
    }

    .service-card:hover::before,
    .service-card:hover::after {
        height: 100%;
    }

    .loop-box {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process-line {
        max-width: 720px;
        gap: 38px 22px;
    }

    .process-flow-svg {
        display: none;
    }

    .process-step::before,
    .process-step::after {
        display: none;
    }

    .solution-section .title-row div {
        display: block;
    }

    .news-more-row {
        margin-top: 26px;
    }

    .news-tabs {
        flex-wrap: wrap;
    }

    .footer-diagnosis-inner {
        width: min(720px, calc(100% - 32px));
        grid-template-columns: 1fr;
        padding: 28px 0;
        text-align: center;
    }

    .footer-diagnosis-copy h2 {
        font-size: 25px;
    }

    .footer-diagnosis-btn {
        justify-self: center;
    }

    .footer-check {
        grid-template-columns: 1fr;
        height: auto;
    }

    .footer-check input,
    .footer-check button {
        height: 48px;
        text-align: center;
    }

    .footer-main {
        width: min(720px, calc(100% - 32px));
        gap: 26px 22px;
        padding: 30px 0 24px;
        text-align: center;
    }

    .footer-about p {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-about .brand,
    .footer-social,
    .footer-contact p {
        justify-content: center;
    }

    .footer-social {
        align-items: center;
        justify-content: center;
    }

    .footer-social:has(.social-link:hover),
    .footer-social:has(.social-link:focus-visible),
    .footer-social:has(.social-link.is-qr-open) {
        margin-bottom: 206px;
    }

    .footer-social .social-link .social-qr,
    .footer-social .social-link:first-child .social-qr,
    .footer-social .social-link:last-child .social-qr {
        top: calc(100% + 12px);
        bottom: auto;
    }

    .footer-social .social-link .social-qr {
        transform: translate(-50%, -8px) scale(.96);
    }

    .footer-social .social-link:first-child .social-qr,
    .footer-social .social-link:last-child .social-qr {
        transform: translate(0, -8px) scale(.96);
    }

    .footer-social .social-link .social-qr::after,
    .footer-social .social-link:first-child .social-qr::after,
    .footer-social .social-link:last-child .social-qr::after {
        top: -6px;
        bottom: auto;
        border-top: 1px solid rgba(124, 196, 255, .28);
        border-left: 1px solid rgba(124, 196, 255, .28);
        border-right: 0;
        border-bottom: 0;
    }

    .footer-social .social-link:hover .social-qr,
    .footer-social .social-link:focus-visible .social-qr,
    .footer-social .social-link.is-qr-open .social-qr {
        transform: translate(-50%, 0) scale(1);
    }

    .footer-social .social-link:first-child:hover .social-qr,
    .footer-social .social-link:first-child:focus-visible .social-qr,
    .footer-social .social-link:first-child.is-qr-open .social-qr,
    .footer-social .social-link:last-child:hover .social-qr,
    .footer-social .social-link:last-child:focus-visible .social-qr,
    .footer-social .social-link:last-child.is-qr-open .social-qr {
        transform: translate(0, 0) scale(1);
    }

    .footer-bottom {
        width: min(720px, calc(100% - 32px));
        padding: 14px 0 20px;
    }

    .process-line::before {
        display: none;
    }
}

@media (max-width: 640px) {
    body {
        padding-bottom: 58px;
    }

    .layout {
        width: calc(100% - 28px);
    }

    .hero-inner {
        padding: 82px 0 70px;
    }

    .hero-copy h1 {
        margin-bottom: 16px;
        font-size: 32px;
    }

    .hero-copy p {
        margin-bottom: 22px;
        font-size: 13px;
    }

    .hero-actions {
        gap: 10px;
    }

    .btn {
        min-width: 0;
        flex: 1;
        height: 42px;
        font-size: 12px;
    }

    .hero-graphic {
        min-height: 245px;
    }

    .stats-wrap {
        margin-top: -38px;
    }

    .stats-card,
    .ai-visibility-panel,
    .service-grid,
    .solution-grid,
    .process-line,
    .news-grid,
    .loop-box,
    .footer-main {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-about .brand,
    .footer-social,
    .footer-contact p {
        justify-content: center;
    }

    .footer-social {
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
    }

    .qr-code {
        margin: 16px auto 0;
    }

    .case-card {
        flex-basis: 100%;
    }

    .service-grid:has(.service-card:nth-child(1):hover),
    .service-grid:has(.service-card:nth-child(2):hover),
    .service-grid:has(.service-card:nth-child(3):hover),
    .service-grid:has(.service-card:nth-child(4):hover),
    .service-grid:has(.service-card:nth-child(5):hover) {
        grid-template-columns: 1fr;
    }

    .service-grid:not(:has(.service-card:hover)) {
        grid-template-columns: 1fr;
    }

    .stat-item {
        padding: 20px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .stat-item:last-child {
        border-bottom: 0;
    }

    .ai-visibility-section {
        margin-top: 0;
        padding: 52px 0;
    }

    .ai-visibility-section .section-head {
        margin-bottom: 24px;
    }

    .ai-visibility-section .section-head h2 {
        font-size: 27px;
    }

    .ai-visibility-panel {
        padding: 20px 16px 22px;
        border-radius: 12px;
        text-align: left;
    }

    .visibility-form {
        gap: 15px;
    }

    .visibility-form label {
        font-size: 14px;
    }

    .visibility-form input,
    .visibility-form button {
        height: 48px;
    }

    .visibility-side {
        padding: 18px 14px;
    }

    .visibility-art {
        min-height: 156px;
    }

    .visibility-monitor {
        top: 28px;
        width: 104px;
        height: 84px;
        border-width: 6px;
    }

    .visibility-monitor span {
        font-size: 34px;
    }

    .visibility-stand {
        top: 112px;
        width: 94px;
    }

    .visibility-lens {
        right: 38px;
        bottom: 26px;
        width: 44px;
        height: 44px;
        border-width: 6px;
    }

    .visibility-benefit {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
        min-height: auto;
        padding: 14px;
    }

    .benefit-icon {
        width: 42px;
        height: 42px;
    }

    .benefit-icon svg {
        width: 23px;
        height: 23px;
    }

    .visibility-benefit h3 {
        font-size: 17px;
    }

    .section {
        padding: 56px 0;
    }

    .section-head h2,
    .title-row h2 {
        font-size: 27px;
    }

    .title-row {
        display: block;
    }

    .solution-section .title-row div {
        display: block;
    }

    .title-row a {
        display: inline-flex;
        margin-top: 12px;
    }

    .service-card {
        height: 410px;
    }

    .service-card:hover {
        height: 410px;
    }

    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured {
        height: 560px;
    }

    .service-card::before,
    .service-card::after {
        height: 220px;
    }

    .service-card:hover::before,
    .service-card:hover::after,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured::before,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured::after {
        height: 250px;
    }

    .service-icon,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 12px;
    }

    .service-card h3,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured h3 {
        font-size: 26px;
    }

    .service-slogan,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-slogan {
        font-size: 17px;
    }

    .service-brief {
        min-height: 82px;
        margin: 38px 0 24px;
        font-size: 15px;
    }

    .service-card:hover .service-detail,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-detail {
        max-height: 170px;
        margin: 86px 0 18px;
        font-size: 16px;
    }

    .service-tags {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .solution-card {
        min-height: 300px;
    }

    .case-cover {
        height: 190px;
    }

    .case-data {
        gap: 10px;
    }

    .process-step {
        min-height: 146px;
        padding: 40px 18px 22px;
    }

    .news-card {
        min-height: 0;
    }

    .news-card img {
        height: 190px;
    }

    .news-card::before {
        height: 190px;
    }

    .news-card-content {
        min-height: 146px;
        padding: 16px 56px 16px 16px;
    }

    .footer-bottom {
        min-height: auto;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px 18px;
        padding: 16px 0;
    }

    .mobile-bottom-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        height: 58px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        box-shadow: 0 -10px 30px rgba(0, 10, 32, .26), inset 0 1px 0 rgba(105, 196, 255, .18);
    }

    .mobile-bottom-bar a {
        display: grid;
        place-items: center;
        color: var(--white);
        background: #03142f;
        font-size: 13px;
        font-weight: 800;
    }

    .mobile-bottom-bar a:nth-child(2) {
        background: #0755c9;
    }

    .mobile-bottom-bar a:nth-child(3) {
        background: linear-gradient(180deg, #168eff, #0c67ef);
    }
}

@media (max-width: 980px) {
    .services-section {
        padding: 52px 0 56px;
    }

    .services-section .section-head {
        margin-bottom: 24px;
    }

    .service-grid,
    .service-grid:not(:has(.service-card:hover)),
    .service-grid:has(.service-card:nth-child(1):hover),
    .service-grid:has(.service-card:nth-child(2):hover),
    .service-grid:has(.service-card:nth-child(3):hover),
    .service-grid:has(.service-card:nth-child(4):hover),
    .service-grid:has(.service-card:nth-child(5):hover) {
        min-height: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        padding-top: 0;
    }

    .service-card,
    .service-card:hover,
    .service-card:nth-child(2),
    .service-card:nth-child(4),
    .service-card:nth-child(5),
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured {
        height: auto;
        min-height: 246px;
        padding: 24px 18px 20px;
        border-radius: 8px;
        transform: none;
        box-shadow: 0 14px 30px rgba(42, 100, 170, .1);
    }

    .service-card::before,
    .service-card::after,
    .service-card:hover::before,
    .service-card:hover::after,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured::before,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured::after {
        height: 142px;
    }

    .service-icon,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 8px;
    }

    .service-card h3,
    .service-card:hover h3,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured h3 {
        margin-bottom: 4px;
        font-size: 20px;
        line-height: 1.22;
    }

    .service-slogan,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-slogan {
        font-size: 13px;
        line-height: 1.38;
        font-weight: 700;
        white-space: normal;
    }

    .service-brief,
    .service-card:hover .service-brief,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-brief {
        min-height: 0;
        max-height: none;
        margin: 30px 0 14px;
        color: #65758a;
        font-size: 13px;
        line-height: 1.56;
        opacity: 1;
    }

    .service-detail,
    .service-tags,
    .service-card:hover .service-detail,
    .service-card:hover .service-tags,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-detail,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-tags {
        display: none;
    }

    .service-more,
    .service-card:hover .service-more,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-more {
        min-width: 96px;
        height: 32px;
        margin-top: auto;
        font-size: 12px;
        box-shadow: none;
    }

    .service-card:nth-child(5) {
        grid-column: 1 / -1;
    }

    .solution-card {
        min-height: 260px;
    }

    .solution-card:hover {
        transform: none;
    }

    .news-panel .news-card:nth-child(n+5) {
        display: none;
    }

    .footer-main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        text-align: left;
    }

    .footer-about,
    .footer-contact {
        grid-column: 1 / -1;
    }
}

@media (min-width: 641px) and (max-width: 980px) {
    .services-section {
        padding: 58px 0 64px;
    }

    .services-section .section-head {
        width: min(680px, 100%);
        margin-bottom: 30px;
    }

    .service-grid,
    .service-grid:not(:has(.service-card:hover)),
    .service-grid:has(.service-card:nth-child(1):hover),
    .service-grid:has(.service-card:nth-child(2):hover),
    .service-grid:has(.service-card:nth-child(3):hover),
    .service-grid:has(.service-card:nth-child(4):hover),
    .service-grid:has(.service-card:nth-child(5):hover) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        align-items: stretch;
    }

    .service-card,
    .service-card:hover,
    .service-card:nth-child(2),
    .service-card:nth-child(4),
    .service-card:nth-child(5),
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured {
        min-height: 262px;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 28px 24px 22px;
        border: 1px solid rgba(186, 207, 232, .82);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 16px 34px rgba(27, 84, 152, .1);
        transform: none;
    }

    .service-card::before,
    .service-card:nth-child(2)::before,
    .service-card:nth-child(5)::before,
    .service-card:hover::before,
    .service-card:nth-child(2):hover::before,
    .service-card:nth-child(5):hover::before,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured::before {
        height: 158px;
        opacity: 1;
        background:
            linear-gradient(180deg, rgba(3, 12, 28, .06), rgba(3, 12, 28, .36)),
            var(--service-cover-image) center center / cover no-repeat,
            #031126;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    }

    .service-card::after,
    .service-card:hover::after,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured::after {
        height: 158px;
        opacity: 1;
        background:
            radial-gradient(circle at 48% 22%, rgba(79, 182, 255, .26), transparent 34%),
            linear-gradient(120deg, rgba(255, 255, 255, .12), transparent 45%);
    }

    .service-icon,
    .service-card:hover .service-icon,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-icon {
        display: none;
        width: 54px;
        height: 54px;
        margin-bottom: 12px;
        color: #fff;
        filter: drop-shadow(0 0 14px rgba(255, 255, 255, .28));
        transform: none;
    }

    .services-section .service-card h3,
    .services-section .service-card:hover h3,
    .services-section .service-grid:not(:has(.service-card:hover)) .service-card.is-featured h3 {
        margin: 54px 0 5px;
        color: #fff;
        font-size: 21px;
        line-height: 1.24;
        text-shadow: 0 5px 15px rgba(0, 45, 110, .2);
    }

    .service-slogan,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-slogan {
        min-height: 20px;
        color: rgba(255, 255, 255, .96);
        font-size: 13px;
        line-height: 1.35;
        font-weight: 700;
    }

    .service-brief,
    .service-card:hover .service-brief,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-brief {
        min-height: 44px;
        max-height: none;
        margin: 42px 0 16px;
        color: #5f6f84;
        font-size: 13px;
        line-height: 1.55;
        opacity: 1;
    }

    .service-detail,
    .service-tags,
    .service-card:hover .service-detail,
    .service-card:hover .service-tags,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-detail,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-tags {
        display: none;
    }

    .service-more,
    .service-card:hover .service-more,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-more {
        min-width: 104px;
        height: 34px;
        margin-top: auto;
        color: #fff;
        border-color: var(--blue);
        background: var(--blue);
        font-size: 12px;
        box-shadow: 0 10px 20px rgba(13, 110, 253, .18);
    }

    .service-card:nth-child(5) {
        grid-column: 1 / -1;
        min-height: 236px;
    }

    .service-card:nth-child(5)::before,
    .service-card:nth-child(5):hover::before {
        height: 150px;
    }

    .service-card:nth-child(5)::after,
    .service-card:nth-child(5):hover::after {
        height: 150px;
    }

    .service-card:nth-child(5) .service-brief {
        max-width: 520px;
        margin-top: 34px;
    }
}

@media (max-width: 640px) {
    .loop-section,
    .process-section {
        display: none;
    }

    .hero-inner {
        gap: 24px;
        padding: 116px 0 56px;
        text-align: center;
    }

    .hero-bg {
        background-position: 58% center;
    }

    .hero-copy {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    .hero-copy p {
        max-width: 34em;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-graphic {
        min-height: 212px;
    }

    .stats-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        text-align: left;
    }

    .stat-item,
    .stat-item:last-child {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 14px 12px;
        border-right: 0;
        border-bottom: 0;
    }

    .stat-item:not(:last-child)::after {
        display: none;
    }

    .stat-item:nth-child(odd) {
        border-right: 1px solid var(--line);
    }

    .stat-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--line);
    }

    .stat-icon {
        width: 38px;
        height: 38px;
    }

    .stat-icon svg {
        width: 29px;
        height: 29px;
    }

    .stat-item strong {
        font-size: 24px;
        line-height: 1.08;
    }

    .stat-item p {
        font-size: 12px;
        line-height: 1.25;
    }

    .stat-item em {
        display: none;
    }

    .ai-visibility-section {
        padding: 46px 0 48px;
    }

    .visibility-form label:nth-of-type(3),
    .visibility-form label:nth-of-type(4) {
        display: none;
    }

    .visibility-art {
        display: none;
    }

    .visibility-side {
        grid-template-rows: auto;
    }

    .visibility-benefit {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .benefit-icon {
        width: 40px;
        height: 40px;
    }

    .service-grid,
    .service-grid:not(:has(.service-card:hover)),
    .service-grid:has(.service-card:nth-child(1):hover),
    .service-grid:has(.service-card:nth-child(2):hover),
    .service-grid:has(.service-card:nth-child(3):hover),
    .service-grid:has(.service-card:nth-child(4):hover),
    .service-grid:has(.service-card:nth-child(5):hover) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        text-align: center;
        align-items: stretch;
    }

    .service-card,
    .service-card:hover,
    .service-card:nth-child(2),
    .service-card:nth-child(4),
    .service-card:nth-child(5),
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured {
        height: 168px;
        min-height: 168px;
        display: block;
        padding: 0;
        overflow: hidden;
        border: 1px solid rgba(164, 195, 232, .72);
        background: #fff;
        transform: none;
        box-shadow: 0 16px 30px rgba(20, 78, 150, .14);
    }

    .service-card::before,
    .service-card:nth-child(2)::before,
    .service-card:nth-child(5)::before,
    .service-card::after,
    .service-card:hover::before,
    .service-card:nth-child(2):hover::before,
    .service-card:nth-child(5):hover::before,
    .service-card:hover::after,
    .service-card:nth-child(2):hover::after,
    .service-card:nth-child(5):hover::after,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured::before,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured::after {
        inset: 0 0 auto;
        height: 112px;
        opacity: 1;
        background:
            linear-gradient(180deg, rgba(4, 14, 32, .1), rgba(4, 14, 32, .42)),
            var(--service-cover-image) center center / cover no-repeat,
            #031126;
        transform: none;
    }

    .service-card::after,
    .service-card:hover::after,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured::after {
        background:
            radial-gradient(circle at 44% 28%, rgba(75, 181, 255, .22), transparent 34%),
            linear-gradient(120deg, rgba(255, 255, 255, .12), transparent 46%);
    }

    .service-icon,
    .service-card:hover .service-icon,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-icon {
        display: none;
        position: absolute;
        left: 50%;
        top: 22px;
        z-index: 2;
        width: 34px;
        height: 34px;
        margin: 0;
        color: #fff;
        background: transparent;
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, .28));
        transform: translateX(-50%);
    }

    .services-section .service-card h3,
    .services-section .service-card:hover h3,
    .services-section .service-grid:not(:has(.service-card:hover)) .service-card.is-featured h3 {
        position: absolute;
        left: 8px;
        right: 8px;
        top: 44px;
        margin: 0;
        z-index: 2;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 16px;
        line-height: 1.22;
        overflow: hidden;
        text-shadow: 0 4px 12px rgba(0, 40, 100, .22);
    }

    .service-slogan,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-slogan {
        display: none;
    }

    .service-brief,
    .service-card:hover .service-brief,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-brief {
        display: none;
    }

    .service-more,
    .service-card:hover .service-more,
    .service-grid:not(:has(.service-card:hover)) .service-card.is-featured .service-more {
        position: absolute;
        left: 50%;
        bottom: 14px;
        z-index: 2;
        min-width: 78px;
        height: 28px;
        margin: 0;
        color: #fff;
        border-color: var(--blue);
        background: var(--blue);
        font-size: 11px;
        transform: translateX(-50%);
        box-shadow: none;
    }

    .service-card:active {
        transform: translateY(1px);
    }

    .solution-section .title-row a,
    .case-section .title-row a {
        position: static;
        display: inline-flex;
        justify-content: center;
        margin-top: 10px;
    }

    .solution-card {
        min-height: 226px;
    }

    .solution-content {
        left: 16px;
        right: 16px;
        bottom: 20px;
    }

    .solution-content h3 {
        font-size: 22px;
    }

    .case-cover {
        height: 170px;
    }

    .news-card {
        min-height: 0;
    }

    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 18px;
        text-align: center;
    }

    .footer-diagnosis-copy h2 {
        max-width: calc(100% - 28px);
        margin-left: auto;
        margin-right: auto;
        font-size: 20px;
        line-height: 1.25;
    }

    .footer-about,
    .footer-contact {
        grid-column: 1 / -1;
    }

    .footer-about .brand,
    .footer-social,
    .footer-contact p {
        justify-content: center;
        text-align: center;
    }

    .footer-social {
        align-items: center;
        justify-content: center;
    }

    .qr-code {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-bottom {
        justify-content: center;
        text-align: center;
    }
}

.hero-copy {
    text-align: center;
    transform: translateY(0);
}

.hero-copy p {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.hero-actions {
    justify-content: center;
}

@media (max-width: 980px) {
    .loop-section {
        padding: 62px 0 72px;
        background:
            radial-gradient(circle at 50% 0, rgba(204, 231, 255, .72), transparent 34%),
            linear-gradient(180deg, #f8fbff 0%, #edf5ff 100%);
    }

    .loop-section .section-head {
        margin-bottom: 30px;
    }

    .loop-section .section-head h2 {
        font-size: 36px;
        line-height: 1.22;
    }

    .loop-section .section-head p {
        margin-top: 12px;
        font-size: 15px;
    }

    .loop-box {
        --loop-blue: #217bea;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
        padding: 24px;
        border: 1px solid rgba(184, 207, 235, .72);
        border-radius: 18px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(238, 247, 255, .94));
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .9),
            0 24px 58px rgba(24, 78, 138, .12);
    }

    .loop-entry {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 170px minmax(0, 1fr);
        gap: 18px;
        align-items: center;
        min-height: auto;
        padding: 22px 24px;
        overflow: hidden;
        border-radius: 14px;
        background:
            radial-gradient(circle at 12% 20%, rgba(80, 180, 255, .26), transparent 34%),
            linear-gradient(135deg, #071a38 0%, #083d82 58%, #0d6efd 100%);
        box-shadow: 0 18px 42px rgba(10, 53, 116, .2);
    }

    .loop-entry h3 {
        margin: 0;
        color: #fff;
        font-size: 24px;
        line-height: 1.2;
        text-align: left;
    }

    .loop-entry-list {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
        height: auto;
    }

    .loop-entry-list li {
        justify-content: center;
        height: 48px;
        padding: 0 12px;
        border-color: rgba(255, 255, 255, .2);
        color: rgba(255, 255, 255, .94);
        background: rgba(255, 255, 255, .1);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    }

    .loop-entry-funnel,
    .loop-arrow,
    .loop-line {
        display: none;
    }

    .loop-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        min-height: 248px;
        margin-top: 0;
        padding: 28px 22px 24px;
        border-radius: 14px;
        background: #fff;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .9),
            0 16px 38px rgba(28, 78, 138, .09);
    }

    .loop-icon {
        position: relative;
        top: auto;
        left: auto;
        width: 58px;
        height: 58px;
        margin: 0 0 18px;
        border: 0;
        transform: none;
    }

    .loop-card h3 {
        margin: 0 0 14px;
        font-size: 22px;
    }

    .loop-card ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(228px, 100%);
        min-height: 0;
        gap: 8px;
    }

    .loop-card li {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 30px;
        padding: 5px 9px;
        border: 1px solid rgba(33, 123, 234, .16);
        border-radius: 999px;
        color: #406083;
        background: #f5f9ff;
        font-size: 14px;
        line-height: 1.2;
        font-weight: 600;
        text-align: center;
    }

    .loop-card li::before {
        display: none;
    }

    .loop-card li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .loop-note {
        position: static;
        grid-column: 1 / -1;
        justify-self: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 4px auto 0;
        padding: 12px 22px;
        border: 1px solid rgba(33, 123, 234, .2);
        border-radius: 999px;
        color: #1767d8;
        background: #fff;
        box-shadow: 0 12px 28px rgba(24, 78, 138, .08);
        transform: none;
    }
}

@media (max-width: 980px) {
    .hero-copy {
        transform: translateY(0);
    }

    .loop-section {
        padding: 58px 0 66px;
    }

    .loop-box {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        padding: 20px;
    }

    .loop-entry {
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: center;
    }

    .loop-entry h3 {
        text-align: center;
    }

    .loop-entry-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .loop-entry-list li:last-child {
        grid-column: 1 / -1;
    }

    .loop-card {
        min-height: 230px;
    }
}

@media (min-width: 641px) and (max-width: 980px) {
    .hero-inner {
        justify-items: center;
    }

    .hero-copy {
        width: min(640px, 100%);
        margin: 0 auto;
        text-align: center;
    }

    .hero-copy p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        justify-content: center;
    }

    .process-section {
        padding: 62px 0 72px;
        background:
            radial-gradient(circle at 50% 0, rgba(203, 229, 255, .72), transparent 34%),
            linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
    }

    .process-section .title-row {
        margin-bottom: 32px;
    }

    .process-section .title-row h2 {
        font-size: 34px;
    }

    .process-line {
        width: min(720px, 100%);
        max-width: 720px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        padding: 0;
    }

    .process-flow-svg {
        display: none;
    }

    .process-step,
    .process-step:nth-of-type(n+2):nth-of-type(-n+5) {
        min-height: 0;
        border-radius: 14px;
        overflow: hidden;
        background: #fff;
        box-shadow:
            0 18px 42px rgba(28, 78, 138, .11),
            inset 0 1px 0 rgba(255, 255, 255, .92);
        perspective: none;
        transition: transform .24s ease, box-shadow .24s ease;
    }

    .process-step:hover {
        transform: translateY(-2px);
        box-shadow:
            0 24px 50px rgba(28, 78, 138, .14),
            inset 0 1px 0 rgba(255, 255, 255, .92);
    }

    .process-step:hover .process-flip {
        transform: none;
    }

    .process-flip {
        position: static;
        border-radius: inherit;
        transform: none;
        transition: none;
    }

    .process-face {
        position: relative;
        inset: auto;
        min-height: 184px;
        align-items: flex-start;
        padding: 58px 20px 20px;
        overflow: hidden;
        border-color: rgba(193, 213, 237, .82);
        border-radius: inherit;
        backface-visibility: visible;
        transform: none;
    }

    .process-front {
        background:
            radial-gradient(circle at 86% 18%, rgba(66, 170, 255, .18), transparent 30%),
            linear-gradient(135deg, rgba(33, 123, 234, .04), transparent 46%),
            linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(249, 252, 255, .96));
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .92),
            0 16px 38px rgba(28, 78, 138, .08);
    }

    .process-front > * {
        position: relative;
        z-index: 1;
    }

    .process-front::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        z-index: 0;
        height: 5px;
        background: linear-gradient(90deg, #0d6efd, #42b6ff);
    }

    .process-front::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        height: 78px;
        pointer-events: none;
        background:
            linear-gradient(90deg, rgba(33, 123, 234, .06) 1px, transparent 1px),
            linear-gradient(180deg, rgba(33, 123, 234, .05) 1px, transparent 1px),
            linear-gradient(180deg, transparent, rgba(224, 239, 255, .72));
        background-size: 22px 22px, 22px 22px, auto;
        mask-image: linear-gradient(180deg, transparent, #000 42%);
        opacity: .68;
    }

    .process-back {
        display: none;
    }

    .process-step > span {
        top: 20px;
        left: 20px;
        width: auto;
        height: 30px;
        min-width: 48px;
        padding: 0 12px;
        border: 0;
        border-radius: 999px;
        box-shadow: 0 10px 20px rgba(13, 110, 253, .2);
        font-size: 13px;
        transform: none;
    }

    .process-step h3 {
        width: 100%;
        margin: 0 0 16px;
        color: #13264b;
        font-size: 24px;
        line-height: 1.2;
        text-align: left;
    }

    .process-step p {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        margin: 0;
        line-height: 1.2;
    }

    .process-step p span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 30px;
        padding: 5px 9px;
        border: 1px solid rgba(33, 123, 234, .16);
        border-radius: 999px;
        color: #406083;
        background: #f5f9ff;
        font-size: 13px;
        font-weight: 600;
        text-align: center;
    }
}

@media (max-width: 980px) {
    .site-footer {
        background:
            linear-gradient(180deg, #041a3b 0%, #03142f 52%, #020d22 100%);
    }

    .footer-shell {
        background:
            linear-gradient(90deg, rgba(20, 132, 255, .09), transparent 28%, transparent 72%, rgba(21, 155, 255, .08)),
            linear-gradient(180deg, #041f48 0%, #031936 46%, #020d22 100%);
    }

    .footer-diagnosis {
        min-height: 0;
        padding: 18px 0;
        border-bottom: 1px solid rgba(80, 179, 255, .18);
        background: transparent;
    }

    .footer-diagnosis-inner {
        width: min(720px, calc(100% - 32px));
        min-height: 0;
        padding: 22px;
        gap: 16px;
        border: 1px solid rgba(124, 196, 255, .2);
        border-radius: 14px;
        background:
            linear-gradient(135deg, rgba(8, 40, 92, .96), rgba(4, 20, 48, .94));
        box-shadow: 0 18px 42px rgba(0, 12, 34, .24), inset 0 1px 0 rgba(104, 190, 255, .1);
    }

    .footer-diagnosis-copy p {
        max-width: 40em;
        margin-right: auto;
        margin-left: auto;
    }

    .footer-diagnosis-btn {
        justify-self: center;
        min-width: 172px;
        height: 48px;
        padding: 0 22px;
        font-size: 15px !important;
    }

    .footer-check {
        width: min(560px, 100%);
        height: 46px;
        margin: 0 auto;
        grid-column: auto;
        grid-template-columns: minmax(0, 1fr) 148px;
        border-radius: 8px;
    }

    .footer-check input,
    .footer-check button {
        height: 46px;
    }

    .footer-main {
        width: min(720px, calc(100% - 32px));
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 22px 24px;
        padding: 24px 0 22px;
        text-align: center;
    }

    .footer-main > div {
        min-width: 0;
    }

    .footer-about,
    .footer-contact,
    .footer-main > div:not(.footer-about):not(.footer-contact) {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .footer-about {
        grid-column: 1 / -1;
        padding: 0 0 22px;
        border-bottom: 1px solid rgba(105, 196, 255, .14);
        text-align: center;
    }

    .footer-main > div:not(.footer-about):not(.footer-contact) {
        justify-self: center;
        width: max-content;
        max-width: 100%;
        padding: 0;
        text-align: left;
    }

    .footer-contact {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px 18px;
        justify-items: center;
        padding: 20px 0 0;
        border-top: 1px solid rgba(105, 196, 255, .14);
        text-align: center;
    }

    .footer-contact h3 {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    .footer-contact p {
        justify-content: flex-start;
        align-items: center;
        justify-self: center;
        width: max-content;
        max-width: 100%;
        min-height: 40px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        text-align: left;
    }

    .footer-contact .qr-code {
        display: none;
    }

    .footer-about p {
        max-width: 560px;
        margin-right: auto;
        margin-left: auto;
    }

    .footer-social {
        display: flex;
        width: min(520px, 100%);
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px 20px;
        margin: 16px auto 0;
    }

    .site-footer .social-link {
        width: auto;
        justify-content: center;
        height: auto;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .site-footer .social-link:hover,
    .site-footer .social-link:focus-visible,
    .site-footer .social-link.is-qr-open {
        transform: none;
    }

    .footer-social:has(.social-link:hover),
    .footer-social:has(.social-link:focus-visible),
    .footer-social:has(.social-link.is-qr-open) {
        margin-bottom: 0;
    }

    .footer-social .social-link .social-qr,
    .footer-social .social-link:first-child .social-qr,
    .footer-social .social-link:last-child .social-qr {
        position: absolute;
        right: auto;
        left: 50%;
        top: calc(100% + 12px);
        bottom: auto;
        z-index: 120;
        width: 168px;
        transform: translate(-50%, -8px) scale(.96);
    }

    .footer-social .social-link .social-qr::after,
    .footer-social .social-link:first-child .social-qr::after,
    .footer-social .social-link:last-child .social-qr::after {
        display: none;
    }

    .footer-social .social-link:hover .social-qr,
    .footer-social .social-link:focus-visible .social-qr,
    .footer-social .social-link.is-qr-open .social-qr,
    .footer-social .social-link:first-child:hover .social-qr,
    .footer-social .social-link:first-child:focus-visible .social-qr,
    .footer-social .social-link:first-child.is-qr-open .social-qr,
    .footer-social .social-link:last-child:hover .social-qr,
    .footer-social .social-link:last-child:focus-visible .social-qr,
    .footer-social .social-link:last-child.is-qr-open .social-qr {
        transform: translate(-50%, 0) scale(1);
    }

    .footer-about:has(.social-link:hover),
    .footer-about:has(.social-link:focus-visible),
    .footer-about:has(.social-link.is-qr-open) {
        padding-bottom: 202px;
    }

    .footer-bottom {
        width: min(720px, calc(100% - 32px));
        justify-content: center !important;
        gap: 8px 14px;
        padding: 16px 0 22px;
        text-align: center;
    }

    .footer-bottom span {
        flex-basis: 100%;
    }
}

@media (max-width: 640px) {
    .site-footer {
        background:
            linear-gradient(180deg, #041a3b 0%, #03142f 54%, #020d22 100%);
    }

    .footer-diagnosis {
        padding: 14px 0 10px;
    }

    .footer-diagnosis-inner {
        width: calc(100% - 28px);
        padding: 16px;
        gap: 14px;
        border-radius: 12px;
    }

    .footer-diagnosis-copy h2 {
        max-width: 100%;
        font-size: 19px;
        line-height: 1.25;
    }

    .footer-diagnosis-copy p {
        margin-top: 8px;
        font-size: 12px;
        line-height: 1.55;
    }

    .footer-diagnosis-btn {
        width: 100%;
        min-width: 0;
        height: 44px;
        font-size: 14px !important;
    }

    .footer-check {
        width: 100%;
        height: auto;
        grid-template-columns: 1fr;
        gap: 8px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .footer-check input,
    .footer-check button {
        height: 42px;
        border-radius: 8px;
    }

    .footer-main {
        width: calc(100% - 28px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 22px;
        padding: 24px 0 18px;
        text-align: center;
    }

    .footer-about {
        padding: 0 0 22px;
    }

    .footer-about .brand {
        display: flex;
        width: fit-content;
        margin: 0 auto 16px;
        justify-content: center;
    }

    .footer-about .brand-logo {
        display: block;
        margin: 0 auto;
    }

    .footer-about p {
        display: -webkit-box;
        max-width: 100%;
        margin-bottom: 12px;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 12px;
        line-height: 1.6;
    }

    .footer-main > div:not(.footer-about):not(.footer-contact) {
        justify-self: center;
        width: min(118px, 100%);
        max-width: 100%;
        min-height: 0;
        padding: 0;
        text-align: left;
    }

    .site-footer h3 {
        margin-bottom: 9px;
        font-size: 14px;
        text-align: center;
    }

    .footer-main > div:not(.footer-about):not(.footer-contact) h3 {
        text-align: left;
    }

    .site-footer a:not(.brand) {
        margin-bottom: 8px;
        font-size: 12px;
        line-height: 1.35;
        text-align: center;
    }

    .footer-main > div:not(.footer-about):not(.footer-contact) a:not(.brand) {
        text-align: left;
    }

    .footer-social {
        gap: 12px 18px;
    }

    .site-footer .social-link {
        height: auto;
        font-size: 12px;
    }

    .footer-contact {
        grid-template-columns: 1fr;
        gap: 10px;
        justify-items: center;
        padding: 18px 0 0;
    }

    .footer-contact p {
        justify-content: flex-start;
        justify-self: center;
        width: min(260px, 100%);
        max-width: 100%;
        min-height: 0;
        padding: 0;
        text-align: left;
    }

    .footer-social .social-link .social-qr,
    .footer-social .social-link:first-child .social-qr,
    .footer-social .social-link:last-child .social-qr {
        top: calc(100% + 10px);
        bottom: auto;
        width: 156px;
        padding: 10px;
    }

    .social-qr-box {
        width: 108px;
        height: 108px;
    }

    .footer-bottom {
        width: calc(100% - 28px);
        gap: 7px 12px;
        padding: 14px 0 20px;
        font-size: 11px;
        line-height: 1.5;
    }
}

@media (min-width: 641px) and (max-width: 980px) {
    .footer-shell {
        padding-bottom: 96px;
    }

    .footer-main {
        gap: 20px 24px;
        padding: 22px 0 16px;
    }

    .footer-about {
        padding: 0 0 22px;
    }

    .footer-about:has(.social-link:hover),
    .footer-about:has(.social-link:focus-visible),
    .footer-about:has(.social-link.is-qr-open) {
        padding-bottom: 204px;
    }

    .footer-main > div:not(.footer-about):not(.footer-contact) {
        padding: 0;
    }

    .footer-contact {
        gap: 10px 18px;
        padding: 20px 0 0;
    }

    .footer-contact p {
        min-height: 0;
        padding: 0;
        line-height: 1.45;
    }

    .footer-bottom {
        min-height: 44px;
        gap: 8px 16px;
        margin-top: 4px;
        padding: 10px 0 16px;
        line-height: 1.45;
    }

    .footer-bottom span {
        flex-basis: auto;
    }

    .footer-bottom a {
        white-space: nowrap;
    }
}

.home-middle-rebuild {
    --hm-deep: #031b3f;
    --hm-deep-2: #062b68;
    --hm-navy: #081f4d;
    --hm-blue: #0a63ff;
    --hm-blue-2: #1677ff;
    --hm-cyan: #49c8ff;
    --hm-ink: #0b1f44;
    --hm-muted: #6b7a99;
    --hm-soft: var(--site-bg);
    position: relative;
    overflow: hidden;
    color: var(--hm-ink);
    background: var(--hm-soft);
}

.home-middle-rebuild *,
.home-middle-rebuild *::before,
.home-middle-rebuild *::after {
    box-sizing: border-box;
}

.hm-container {
    width: min(1600px, calc(100% - 80px));
    margin: 0 auto;
}

.hm-section {
    position: relative;
    padding: 40px 0;
}

.hm-core-services {
    padding-top: 34px;
    scroll-margin-top: 92px;
}

.hm-section-head {
    width: min(760px, 100%);
    margin: 0 auto 30px;
    text-align: center;
}

.hm-section-head h2,
.hm-row-head h2,
.hm-dashboard-left h2,
.hm-cta-banner h2 {
    margin: 0;
    color: var(--hm-ink);
    font-size: 34px;
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0;
}

.hm-section-head h2::after,
.capability-system-heading h2::after,
.hm-row-head h2::after,
.hm-visibility-copy h2::after,
.home-middle-rebuild .title-row h2::after,
.hm-cta-banner h2::after {
    content: "";
    display: block;
    width: 52px;
    height: 4px;
    margin: 14px auto 12px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--hm-blue), var(--hm-cyan));
    box-shadow: 0 0 18px rgba(47, 168, 255, .45);
}

.hm-cta-banner h2::after {
    margin-right: 0;
    margin-left: 0;
}

.hm-section-head p,
.hm-row-head p,
.hm-dashboard-left > p,
.hm-cta-banner p {
    margin: 0;
    color: var(--hm-muted);
    font-size: 15px;
    line-height: 1.6;
    font-weight: 600;
}

.hm-media-grid {
    display: grid;
    gap: 16px;
}

.hm-six-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.hm-dark-card {
    position: relative;
    isolation: isolate;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(73, 200, 255, .3);
    border-radius: 16px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(3, 27, 63, .14), rgba(3, 27, 63, .94)),
        var(--hm-bg, linear-gradient(135deg, #062b68, #031b3f)) center / cover no-repeat;
    box-shadow:
        0 18px 38px rgba(3, 27, 63, .2),
        0 0 0 1px rgba(10, 99, 255, .08),
        inset 0 1px 0 rgba(255, 255, 255, .16);
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.hm-dark-card::before,
.hm-dark-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.hm-dark-card::before {
    background:
        radial-gradient(circle at 24% 18%, rgba(73, 200, 255, .32), transparent 24%),
        linear-gradient(145deg, rgba(10, 99, 255, .24), transparent 46%),
        linear-gradient(180deg, rgba(3, 27, 63, .18) 0%, rgba(3, 27, 63, .82) 58%, rgba(2, 13, 34, .98) 100%);
}

.hm-dark-card::after {
    opacity: .38;
    background-image:
        linear-gradient(rgba(73, 200, 255, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(73, 200, 255, .12) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(180deg, #000, transparent 72%);
}

.hm-dark-card:hover {
    transform: translateY(-6px);
    border-color: rgba(73, 200, 255, .62);
    box-shadow:
        0 24px 52px rgba(4, 37, 88, .3),
        0 0 32px rgba(47, 168, 255, .18),
        inset 0 1px 0 rgba(255, 255, 255, .2);
}

.hm-service-card {
    display: flex;
    min-height: 258px;
    padding: 20px 18px 18px;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
}

.hm-service-card:focus-visible {
    outline: 3px solid rgba(73, 200, 255, .72);
    outline-offset: 3px;
}

.hm-core-services .hm-media-grid {
    gap: 15px;
}

.hm-core-services .hm-service-card {
    --hm-cover-y: -44px;
    --hm-cover-size: 128%;
    min-height: 282px;
    padding: 0 16px 20px;
    align-items: flex-start;
    border-color: rgba(111, 203, 255, .24);
    border-radius: 12px;
    background: var(--hm-bg, linear-gradient(135deg, #062b68, #031b3f)) center var(--hm-cover-y) / auto var(--hm-cover-size) no-repeat;
    box-shadow:
        0 3px 7px rgba(3, 27, 63, .12),
        0 16px 28px -18px rgba(24, 72, 136, .42),
        0 8px 18px -12px rgba(47, 168, 255, .2),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}

.hm-core-services .hm-service-card:hover {
    box-shadow:
        0 4px 9px rgba(3, 27, 63, .14),
        0 20px 34px -18px rgba(24, 72, 136, .48),
        0 10px 22px -12px rgba(47, 168, 255, .26),
        inset 0 1px 0 rgba(255, 255, 255, .2);
}

.hm-core-services .hm-service-card.hm-visual-01 {
    --hm-cover-y: -76px;
    --hm-cover-size: 132%;
}

.hm-core-services .hm-service-card.hm-visual-02 {
    --hm-cover-y: -42px;
    --hm-cover-size: 126%;
}

.hm-core-services .hm-service-card.hm-visual-03 {
    --hm-cover-y: -56px;
    --hm-cover-size: 130%;
}

.hm-core-services .hm-service-card.hm-visual-04 {
    --hm-cover-y: -44px;
    --hm-cover-size: 128%;
}

.hm-core-services .hm-service-card.hm-visual-05 {
    --hm-cover-y: -52px;
    --hm-cover-size: 130%;
}

.hm-core-services .hm-service-card.hm-visual-06 {
    --hm-cover-y: -38px;
    --hm-cover-size: 126%;
}

.hm-core-services .hm-service-card::before,
.hm-core-services .hm-service-card::after {
    z-index: 0;
}

.hm-core-services .hm-service-card::before {
    inset: auto 0 0;
    height: 52%;
    background:
        linear-gradient(180deg, rgba(2, 14, 36, 0) 0%, rgba(2, 18, 48, .18) 34%, rgba(2, 13, 34, .78) 100%);
}

.hm-core-services .hm-service-card::after {
    display: none;
    opacity: 0;
    background-image:
        linear-gradient(rgba(73, 200, 255, .11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(73, 200, 255, .08) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 64%);
}

.hm-core-services .hm-service-card > * {
    position: relative;
    z-index: 1;
}

.hm-core-services .hm-service-card > div {
    width: 100%;
}

.hm-core-services .hm-card-index {
    display: block;
    align-self: flex-start;
    width: auto;
    height: auto;
    margin-bottom: 9px;
    border: 0;
    border-radius: 0;
    color: #fff;
    background: transparent;
    font-size: 15px;
    line-height: 1;
    box-shadow: none;
}

.hm-core-services .hm-service-card h3 {
    font-size: 17px;
    line-height: 1.2;
}

.hm-core-services .hm-service-card p {
    display: -webkit-box;
    max-width: 96%;
    margin-top: 6px;
    overflow: hidden;
    color: rgba(232, 244, 255, .78);
    font-size: 12px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.hm-card-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    border-radius: 50%;
    color: #d9ecff;
    border: 1px solid rgba(116, 207, 255, .36);
    background: rgba(8, 31, 77, .56);
    font-size: 13px;
    font-weight: 900;
    box-shadow: inset 0 0 14px rgba(47, 168, 255, .12);
}

.hm-service-card h3,
.hm-industry-card h3,
.hm-case-cover h3,
.hm-article-card h3 {
    margin: 0;
    color: #fff;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: 0;
}

.hm-service-card p,
.hm-industry-card p,
.hm-case-cover p {
    margin: 8px 0 0;
    color: rgba(225, 240, 255, .84);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

.hm-capability {
    overflow: hidden;
    padding: 30px 0 18px;
    background:
        radial-gradient(ellipse at 50% 58%, rgba(73, 200, 255, .22) 0%, rgba(10, 99, 255, .11) 24%, transparent 50%),
        radial-gradient(circle at 50% 42%, rgba(21, 117, 255, .12), transparent 23%),
        linear-gradient(180deg, #f9fcff 0%, #eef6ff 58%, #f7fbff 100%);
}

.hm-capability .hm-section-head {
    margin-bottom: 18px;
}

.hm-capability-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(218px, .78fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 0;
    min-height: 220px;
    padding: 0;
}

.hm-capability-lines {
    position: absolute;
    z-index: 2;
    inset: 0 0 auto;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hm-capability-lines path {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.hm-capability-lines .hm-line-soft {
    stroke: rgba(22, 119, 255, .16);
    stroke-width: 1.2;
}

.hm-capability-lines .hm-line-main {
    stroke: rgba(22, 119, 255, .42);
    stroke-width: 1.6;
}

.hm-line-dot {
    fill: #fff;
    stroke: #247dff;
    stroke-width: 3;
    filter: drop-shadow(0 4px 7px rgba(10, 99, 255, .28));
}

.hm-capability-column {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
}

.hm-glass-card {
    position: relative;
    z-index: 3;
    min-height: 166px;
    padding: 18px 20px 16px 66px;
    overflow: hidden;
    border: 1px solid rgba(22, 119, 255, .17);
    border-radius: 8px;
    background:
        radial-gradient(circle at 88% 28%, rgba(73, 200, 255, .13), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, .84), rgba(238, 247, 255, .58));
    box-shadow:
        0 14px 34px rgba(36, 94, 166, .07),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(14px);
}

.hm-glass-card::before {
    content: "";
    position: absolute;
    inset: auto 18px 18px auto;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(73, 200, 255, .18), transparent 68%);
}

.hm-glass-card span {
    position: absolute;
    top: 20px;
    left: 20px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #0a63ff;
    background: rgba(10, 99, 255, .09);
    font-size: 15px;
    font-weight: 900;
}

.hm-glass-card h3 {
    margin: 0 0 7px;
    color: #12346b;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 900;
}

.hm-card-desc {
    margin: 0 0 12px;
    color: #5e7396;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 800;
}

.hm-glass-card ul,
.hm-dashboard-left ul,
.hm-donut-wrap ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-glass-card ul {
    position: relative;
    padding-top: 12px;
}

.hm-glass-card ul::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(22, 119, 255, .18), rgba(22, 119, 255, .06));
}

.hm-glass-card li {
    position: relative;
    padding-left: 22px;
    color: #61718f;
    font-size: 12px;
    line-height: 1.62;
    font-weight: 700;
}

.hm-glass-card li::before {
    content: "";
    position: absolute;
    top: .52em;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 4px;
    background: rgba(10, 99, 255, .1);
    box-shadow: inset 0 0 0 1px rgba(10, 99, 255, .22);
}

.hm-glass-card li::after {
    content: "";
    position: absolute;
    top: calc(.52em + 3px);
    left: 4px;
    width: 4px;
    height: 6px;
    border: solid #0a63ff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.hm-engine-visual {
    position: relative;
    z-index: 4;
    display: grid;
    place-items: center;
    min-height: 220px;
    pointer-events: none;
}

.hm-engine-visual::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 210px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(73, 200, 255, .3), rgba(10, 99, 255, .12) 42%, transparent 72%);
    filter: blur(8px);
}

.hm-engine-asset {
    position: relative;
    z-index: 1;
    display: block;
    width: min(225px, 116%);
    max-width: none;
    height: auto;
    transform: translateY(2px);
    filter: drop-shadow(0 18px 24px rgba(10, 99, 255, .22));
}

.capability-system-section {
    position: relative;
    padding: 40px 0;
    overflow: hidden;
    background: var(--site-bg);
}

.capability-system-section::before {
    display: none;
}

.capability-system-container {
    position: relative;
    z-index: 1;
    width: min(1840px, calc(100% - 80px));
    margin: 0 auto;
}

.capability-system-heading {
    text-align: center;
    margin-bottom: 8px;
}

.capability-system-heading h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0;
    color: #0b1f44;
}

.capability-system-heading h2 span {
    color: #1379ff;
    background: linear-gradient(90deg, #005bff 0%, #00b7ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 14px 28px rgba(34, 132, 255, .18);
}

.capability-system-heading p {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 700;
    color: #6d7fa4;
}

.capability-system-map {
    position: relative;
    isolation: isolate;
    width: 100%;
    aspect-ratio: 1920 / 372;
    min-height: 0;
    background: transparent;
}

.capability-system-map::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 0;
    display: block;
    pointer-events: none;
    background: url("/static/images/home/capability-system-layout-bg-source-20260616.webp") center center / 100% 100% no-repeat;
    opacity: 1;
    filter: none;
}

.capability-system-map::after {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: 1;
    display: block;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(var(--site-bg-rgb), 1) 0%, rgba(var(--site-bg-rgb), 1) 5.15%, rgba(var(--site-bg-rgb), .45) 5.45%, rgba(var(--site-bg-rgb), .12) 5.7%, rgba(var(--site-bg-rgb), 0) 5.9%, rgba(var(--site-bg-rgb), 0) 93.7%, rgba(var(--site-bg-rgb), .12) 94.05%, rgba(var(--site-bg-rgb), .45) 94.45%, rgba(var(--site-bg-rgb), 1) 94.85%, rgba(var(--site-bg-rgb), 1) 100%),
        linear-gradient(180deg, rgba(var(--site-bg-rgb), 0) 0%, rgba(var(--site-bg-rgb), 0) 91%, rgba(var(--site-bg-rgb), .12) 94%, rgba(var(--site-bg-rgb), .62) 98%, rgba(var(--site-bg-rgb), 1) 100%);
    mix-blend-mode: normal;
}

.capability-system-core {
    position: absolute;
    z-index: 7;
    left: 50%;
    top: 5.4%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 164px;
    height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    color: #ffffff;
    background:
        linear-gradient(90deg, rgba(0, 91, 255, .96) 0%, rgba(0, 190, 255, .92) 100%);
    border: 1px solid rgba(174, 224, 255, .78);
    box-shadow:
        0 12px 28px rgba(20, 120, 255, .26),
        0 0 34px rgba(0, 187, 255, .24),
        inset 0 1px 0 rgba(255, 255, 255, .55);
    transform: translateX(-50%);
    pointer-events: none;
    white-space: nowrap;
}

.capability-system-core::before {
    content: "";
    position: absolute;
    inset: -9px -16px;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(ellipse at center, rgba(23, 128, 255, .22) 0%, transparent 68%);
    filter: blur(3px);
}

.capability-system-core-name {
    font-size: 17px;
    line-height: 1;
    font-weight: 900;
}

.capability-system-core-desc {
    position: relative;
    padding-left: 9px;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    color: rgba(235, 248, 255, .92);
}

.capability-system-core-desc::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, .42);
    transform: translateY(-50%);
}

.capability-system-lines {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    overflow: visible;
    pointer-events: none;
    display: none;
}

.capability-system-lines path {
    fill: none;
    stroke: rgba(49, 125, 255, 0.28);
    stroke-width: 2.2;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.capability-system-lines circle {
    fill: #ffffff;
    stroke: rgba(49, 125, 255, 0.86);
    stroke-width: 4;
    filter: drop-shadow(0 0 8px rgba(49, 125, 255, 0.42));
}

.capability-system-card {
    position: absolute;
    z-index: 3;
    min-width: 0;
    height: 85.5%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible;
    transition: none;
}

.capability-system-card-01 {
    left: 5.9%;
    top: 2.6%;
    width: 17.7%;
}

.capability-system-card-02 {
    left: 25.3%;
    top: 2.6%;
    width: 17.5%;
}

.capability-system-card-03 {
    left: 57.7%;
    top: 2.6%;
    width: 17.5%;
}

.capability-system-card-04 {
    left: 75.8%;
    top: 2.6%;
    width: 17.6%;
}

.capability-system-card::before {
    display: none;
}

.capability-system-card::after {
    display: none;
}

.capability-system-card:hover {
    transform: none;
}

.capability-system-card-head {
    position: absolute;
    z-index: 2;
    left: 8.8%;
    right: 7.2%;
    top: 14.5%;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    min-height: 0;
}

.capability-system-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 900;
    color: #1677ff;
    background:
        radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .98) 0%, rgba(248, 252, 255, .94) 45%, rgba(231, 242, 255, .74) 100%);
    border: 1px solid rgba(221, 237, 255, .86);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .98),
        inset 0 -12px 24px rgba(42, 131, 255, .035),
        0 13px 28px rgba(45, 123, 255, .07);
}

.capability-system-card-head > div {
    min-width: 0;
}

.capability-system-card h3 {
    margin: 0 0 5px;
    font-size: 15px;
    line-height: 1.32;
    font-weight: 900;
    color: #126ce8;
}

.capability-system-card p {
    margin: 0;
    font-size: 12px;
    line-height: 1.48;
    font-weight: 700;
    color: #5c6f91;
}

.capability-system-card ul {
    position: absolute;
    z-index: 2;
    left: 10.8%;
    right: 8%;
    top: 50.5%;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 11px;
}

.capability-system-card li {
    position: relative;
    min-height: 22px;
    padding-left: 34px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.36;
    font-weight: 700;
    color: #4a6388;
    white-space: normal;
}

.capability-system-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    display: block;
    width: 21px;
    height: 21px;
    border-radius: 6px;
    border: 1px solid rgba(88, 157, 255, .22);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(224, 239, 255, .76));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .98),
        0 7px 16px rgba(45, 123, 255, .08);
}

.capability-system-card li::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    display: block;
    width: 11px;
    height: 11px;
    background: #247cff;
    mask: var(--capability-icon) center / contain no-repeat;
    -webkit-mask: var(--capability-icon) center / contain no-repeat;
}

.capability-system-card li[data-icon="scan"]::after {
    --capability-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M11 2h2v4h-2V2Zm0 16h2v4h-2v-4ZM2 11h4v2H2v-2Zm16 0h4v2h-4v-2ZM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z'/%3E%3C/svg%3E");
}

.capability-system-card li[data-icon="search"]::after {
    --capability-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M10.5 4a6.5 6.5 0 0 1 5.18 10.43l4.45 4.44-1.42 1.42-4.44-4.45A6.5 6.5 0 1 1 10.5 4Zm0 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z'/%3E%3C/svg%3E");
}

.capability-system-card li[data-icon="matrix"]::after {
    --capability-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M5 5h5v5H5V5Zm9 0h5v5h-5V5ZM5 14h5v5H5v-5Zm9 0h5v5h-5v-5ZM7 7v1h1V7H7Zm9 0v1h1V7h-1ZM7 16v1h1v-1H7Zm9 0v1h1v-1h-1Z'/%3E%3C/svg%3E");
}

.capability-system-card li[data-icon="plan"]::after {
    --capability-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M6 3h9l3 3v15H6V3Zm2 2v14h8V7h-3V5H8Zm2 5h5v2h-5v-2Zm0 4h5v2h-5v-2Z'/%3E%3C/svg%3E");
}

.capability-system-card li[data-icon="spark"]::after {
    --capability-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 2 9.8 8.8 3 11l6.8 2.2L12 20l2.2-6.8L21 11l-6.8-2.2L12 2Zm0 6.6.8 2.4 2.4.8-2.4.8-.8 2.4-.8-2.4-2.4-.8 2.4-.8.8-2.4Z'/%3E%3C/svg%3E");
}

.capability-system-card li[data-icon="check"]::after {
    --capability-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M5 4h14v16H5V4Zm2 2v12h10V6H7Zm8.7 3.7 1.4 1.4-5.3 5.3-3.1-3.1 1.4-1.4 1.7 1.7 3.9-3.9Z'/%3E%3C/svg%3E");
}

.capability-system-card li[data-icon="platform"]::after {
    --capability-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M4 5h6v6H4V5Zm10 0h6v6h-6V5ZM4 15h6v4H4v-4Zm10 0h6v4h-6v-4ZM6 7v2h2V7H6Zm10 0v2h2V7h-2ZM6 17h2v-1H6v1Zm10 0h2v-1h-2v1Z'/%3E%3C/svg%3E");
}

.capability-system-card li[data-icon="flow"]::after {
    --capability-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M5 5h5v5H5V5Zm9 0h5v5h-5V5ZM5 14h5v5H5v-5Zm5-5h2c2.8 0 4 1.2 4 4v1.2l1.6-1.6L19 14l-4 4-4-4 1.4-1.4 1.6 1.6V13c0-1.7-.3-2-2-2h-2V9Z'/%3E%3C/svg%3E");
}

.capability-system-card li[data-icon="brand"]::after {
    --capability-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 2 20 5v6c0 5-3.2 8.5-8 11-4.8-2.5-8-6-8-11V5l8-3Zm0 2.2L6 6.4V11c0 3.7 2.1 6.5 6 8.7 3.9-2.2 6-5 6-8.7V6.4l-6-2.2Zm-3 5.3h6v2H9v-2Zm0 4h6v2H9v-2Z'/%3E%3C/svg%3E");
}

.capability-system-card li[data-icon="monitor"]::after {
    --capability-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M4 5h16v11H4V5Zm2 2v7h12V7H6Zm3 12h6v2H9v-2Zm2-3h2v3h-2v-3Zm-4-5h2l1-2 2.2 4 1.3-2H17v2h-2.4l-2.6 4-2-3.7-.8 1.7H7v-2Z'/%3E%3C/svg%3E");
}

.capability-system-card li[data-icon="chart"]::after {
    --capability-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M13 3a9 9 0 1 1-7.1 14.5l1.6-1.2A7 7 0 1 0 13 5V3Zm-1 1v9H3v-1a9 9 0 0 1 9-8Zm-2 2.3A7 7 0 0 0 5.3 11H10V6.3Z'/%3E%3C/svg%3E");
}

.capability-system-card li[data-icon="loop"]::after {
    --capability-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M17.7 6.3A8 8 0 0 0 4.3 10H2l3.5 4L9 10H6.4a6 6 0 0 1 9.9-2.3l1.4-1.4ZM18.5 10 15 14h2.6a6 6 0 0 1-9.9 2.3l-1.4 1.4A8 8 0 0 0 19.7 14H22l-3.5-4Z'/%3E%3C/svg%3E");
}

.capability-system-crystal {
    position: absolute;
    z-index: 8;
    left: 50%;
    top: 8.4%;
    display: block;
    width: 68%;
    height: auto;
    min-height: 0;
    overflow: visible;
    transform: translateX(-50%);
    pointer-events: none;
}

.capability-system-crystal-glow {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 32px;
    width: 270px;
    height: 82px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(32, 126, 255, 0.32) 0%, rgba(32, 126, 255, 0.12) 42%, transparent 72%);
    filter: blur(10px);
}

.capability-system-crystal img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter:
        drop-shadow(0 22px 42px rgba(18, 101, 255, 0.22))
        drop-shadow(0 0 30px rgba(22, 119, 255, 0.42));
    transform: none;
}

@media (max-width: 1480px) {
    .capability-system-container {
        width: min(1360px, calc(100% - 56px));
    }

    .capability-system-map {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(138px, .55fr) minmax(0, 1fr) minmax(0, 1fr);
        min-height: 274px;
    }

    .capability-system-map::before {
        display: block;
    }

    .capability-system-card {
        min-height: 218px;
        padding: 20px 20px 18px;
    }

    .capability-system-crystal {
        width: 68%;
    }

    .capability-system-crystal img {
        width: 100%;
    }

    .capability-system-card-head {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 14px;
    }

    .capability-system-num {
        width: 52px;
        height: 52px;
        font-size: 16px;
    }

    .capability-system-card::after {
        left: 20px;
        right: 20px;
        top: 98px;
    }

    .capability-system-card h3 {
        font-size: 15px;
    }

    .capability-system-card p,
    .capability-system-card li {
        font-size: 12px;
    }
}

@media (max-width: 1200px) {
    .capability-system-map {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        min-height: 0;
        padding-top: 0;
        aspect-ratio: auto;
        background: transparent;
    }

    .capability-system-map::before,
    .capability-system-map::after {
        display: none;
    }

    .capability-system-card {
        grid-column: auto;
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        height: auto;
        min-height: 208px;
        padding: 24px;
        border-radius: 10px;
        border: 1px solid rgba(65, 135, 255, 0.22);
        background: rgba(255, 255, 255, 0.84);
        box-shadow:
            0 18px 44px rgba(38, 104, 210, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(10px);
        overflow: hidden;
    }

    .capability-system-crystal {
        display: none;
    }

    .capability-system-core {
        position: relative;
        left: auto;
        top: auto;
        grid-column: 1 / -1;
        justify-self: center;
        width: fit-content;
        margin: 0 auto 2px;
        transform: none;
        pointer-events: auto;
    }

    .capability-system-card::after {
        left: 24px;
        right: 24px;
        top: 112px;
    }

    .capability-system-card-head {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        display: grid;
        grid-template-columns: 54px 1fr;
        gap: 14px;
        align-items: start;
    }

    .capability-system-num {
        position: static;
        width: 50px;
        height: 50px;
        font-size: 16px;
        color: #1677ff;
        background: radial-gradient(circle at 35% 30%, #ffffff 0%, #eaf3ff 48%, #dcecff 100%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            0 10px 24px rgba(45, 123, 255, 0.12);
    }

    .capability-system-card-head > div {
        position: static;
    }

    .capability-system-card h3 {
        margin-top: 1px;
        font-size: 17px;
    }

    .capability-system-card p,
    .capability-system-card li {
        font-size: 14px;
    }

    .capability-system-card ul {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        margin-top: 24px;
        padding-top: 0;
        gap: 12px;
    }

    .capability-system-card li {
        padding-left: 38px;
    }

    .capability-system-card li::before {
        width: 26px;
        height: 26px;
        border-radius: 8px;
    }

    .capability-system-card li::after {
        left: 9px;
        top: 9px;
    }
}

@media (max-width: 768px) {
    .capability-system-section {
        padding: 42px 0 56px;
    }

    .capability-system-container {
        width: min(100% - 32px, 560px);
    }

    .capability-system-heading h2 {
        font-size: 26px;
    }

    .capability-system-heading p {
        font-size: 14px;
    }

    .capability-system-map {
        grid-template-columns: 1fr;
        gap: 16px;
        padding-top: 0;
    }

    .capability-system-map::before {
        width: min(520px, 112%);
        height: 150px;
    }

    .capability-system-card {
        min-height: auto;
        padding: 22px;
    }
}

@media (min-width: 641px) and (max-width: 1200px) {
    .capability-system-container {
        width: min(calc(100% - 56px), 1080px);
    }

    .capability-system-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .capability-system-card {
        min-height: 198px;
        padding: 18px 20px;
    }

    .capability-system-card-head {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
    }

    .capability-system-num {
        width: 46px;
        height: 46px;
        font-size: 15px;
    }

    .capability-system-card h3 {
        margin-top: 0;
        font-size: 16px;
        line-height: 1.25;
    }

    .capability-system-card p,
    .capability-system-card li {
        font-size: 13px;
    }

    .capability-system-card ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 12px;
        margin-top: 18px;
    }

    .capability-system-card li {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr);
        column-gap: 8px;
        align-items: center;
        min-height: 24px;
        padding-left: 0;
        line-height: 1.25;
        white-space: nowrap;
    }

    .capability-system-card li::before {
        position: static;
        grid-column: 1;
        grid-row: 1;
        width: 22px;
        height: 22px;
        border-radius: 7px;
    }

    .capability-system-card li::after {
        position: static;
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        justify-self: center;
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 640px) {
    .capability-system-map {
        gap: 12px;
    }

    .capability-system-card {
        padding: 10px 0;
    }

    .capability-system-card-head {
        position: relative;
        width: calc(100% - 32px);
        max-width: calc(100% - 32px);
        grid-template-columns: 1fr;
        justify-items: center;
        align-items: center;
        margin: 0 auto;
    }

    .capability-system-num {
        position: absolute;
        left: 12px;
        width: 46px;
        height: 46px;
        top: 50%;
        transform: translateY(-50%);
    }

    .capability-system-card-head > div {
        width: max-content;
        max-width: calc(100% - 136px);
        margin: 0 auto;
        text-align: center;
    }

    .capability-system-card h3,
    .capability-system-card p {
        text-align: center;
    }

    .capability-system-heading p {
        color: #4f6688;
    }

    .capability-system-card p {
        color: #3f587c;
    }

    .capability-system-card ul {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: center;
        justify-items: start;
        gap: 6px 0;
        margin: 8px 0 0;
    }

    .capability-system-card li {
        display: grid;
        width: 100%;
        grid-template-columns: 22px minmax(0, 1fr);
        justify-content: start;
        justify-items: start;
        column-gap: 6px;
        min-height: 22px;
        padding: 0 14px;
        font-size: 12px;
        line-height: 1.25;
        color: #2f557c;
        text-align: left;
        white-space: nowrap;
    }

    .capability-system-card li::before {
        position: static;
        grid-column: 1;
        grid-row: 1;
        width: 22px;
        height: 22px;
    }

    .capability-system-card li::after {
        position: static;
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        justify-self: center;
        width: 10px;
        height: 10px;
    }
}

.hm-industries {
    padding-top: 40px;
    padding-bottom: 40px;
    background: transparent;
}

.hm-industries .hm-container {
    position: relative;
}

.hm-industries-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 22px auto 0;
    color: #0a63ff;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    text-decoration: none;
}

.hm-industries-more::after {
    content: "";
    width: 15px;
    height: 9px;
    background: currentColor;
    clip-path: polygon(0 36%, 64% 36%, 64% 0, 100% 50%, 64% 100%, 64% 64%, 0 64%);
}

.hm-solution-carousel {
    position: relative;
}

.hm-solution-viewport {
    overflow: hidden;
    margin: -6px 0 -6px;
    padding: 6px 0;
    cursor: grab;
    touch-action: pan-y;
}

.hm-solution-viewport.is-dragging {
    cursor: grabbing;
}

.hm-solution-viewport .hm-solution-card,
.hm-solution-viewport .hm-solution-card * {
    cursor: grab;
}

.hm-solution-viewport .hm-solution-card {
    -webkit-user-drag: none;
    user-select: none;
}

.hm-solution-viewport .hm-solution-card:active,
.hm-solution-viewport.is-dragging .hm-solution-card,
.hm-solution-viewport.is-dragging .hm-solution-card * {
    cursor: grabbing;
}

.hm-solution-viewport.is-dragging a {
    cursor: grabbing;
    user-select: none;
}

.hm-industries .hm-solution-grid {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    will-change: transform;
}

.hm-industries .hm-solution-slide {
    display: grid;
    flex: 0 0 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    min-width: 100%;
}

.hm-industries .solution-card {
    min-height: 420px;
    border-color: rgba(201, 218, 238, .68);
    border-radius: 8px;
    background: #061634;
    box-shadow: 0 1px 2px rgba(72, 105, 148, .03);
}

.hm-industries .solution-card::before {
    background:
        linear-gradient(180deg, rgba(3, 10, 24, 0) 0%, rgba(3, 10, 24, 0) 48%, rgba(3, 10, 24, .18) 74%, rgba(2, 8, 20, .66) 100%);
}

.hm-industries .solution-card::after {
    inset: -12px;
    background-image: none;
    background-position: center center;
    filter: brightness(1.04) contrast(1.04) saturate(1.06);
    transform: scale(1.035);
}

.hm-industries .cover-rack::after {
    background-position: 54% center;
}

.hm-industries .cover-track::after {
    background-position: 52% center;
}

.hm-industries .cover-clean::after {
    background-position: 48% center;
}

.hm-industries .cover-store::after {
    background-position: 43% center;
}

.hm-industries .cover-auto::after {
    background-position: 47% center;
}

.hm-industries .solution-card[style*="--solution-home-cover-image"]::after {
    background-image: var(--solution-home-cover-image);
}

.hm-industries .solution-card:not([style*="--solution-home-cover-image"])::after {
    background-image: none;
}

.hm-industries .solution-card:hover {
    border-color: rgba(73, 156, 244, .68);
    box-shadow:
        0 1px 3px rgba(57, 91, 137, .04),
        0 5px 12px rgba(91, 142, 202, .045);
}

.hm-industries .solution-card:hover::before {
    background:
        linear-gradient(180deg, rgba(3, 10, 24, 0) 0%, rgba(3, 10, 24, 0) 52%, rgba(3, 10, 24, .14) 76%, rgba(2, 8, 20, .58) 100%);
}

.hm-industries .solution-card:hover::after {
    filter: brightness(1.08) contrast(1.05) saturate(1.08);
    transform: scale(1.075);
}

.hm-industries .solution-content {
    left: 18px;
    right: 18px;
    bottom: 20px;
    display: grid;
    grid-template-rows: 28px 40px 60px;
    row-gap: 3px;
    align-items: start;
}

.hm-industries .solution-content h3 {
    display: block;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: clamp(18px, 1.35vw, 23px);
    line-height: 1.18;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-shadow: 0 3px 12px rgba(0, 0, 0, .78);
    white-space: nowrap;
}

.hm-industries .solution-content p {
    display: -webkit-box;
    height: 40px;
    margin: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, .94);
    font-size: 14px;
    line-height: 1.42;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .72);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hm-industries .solution-tags {
    gap: 6px;
    width: min(100%, 196px);
    max-height: 60px;
    padding-right: 0;
    overflow: hidden;
    align-content: start;
}

.hm-industries .solution-tags span {
    min-height: 27px;
    padding: 0 9px;
    border-color: rgba(255, 255, 255, .44);
    color: rgba(255, 255, 255, .96);
    background: rgba(3, 13, 32, .54);
    font-size: 12px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .72);
}

.hm-industries .solution-card i {
    bottom: 10px;
}

.hm-industries .solution-card i::before {
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    transform: translate(-56%, -50%) rotate(45deg);
    transform-origin: center;
}

.hm-solution-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.hm-solution-dots button {
    width: 11px;
    height: 11px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d2dbe7;
    cursor: pointer;
    transition: width .24s ease, background .24s ease;
}

.hm-solution-dots button.is-active {
    width: 22px;
    background: var(--hm-blue);
}

@media (max-width: 1180px) {
    .hm-industries .hm-solution-slide {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hm-industries .solution-card {
        min-height: 300px;
    }
}

@media (min-width: 641px) and (max-width: 1180px) {
    .hm-solution-viewport {
        overflow: hidden;
        touch-action: pan-x pan-y;
    }

    .hm-industries .hm-solution-grid {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        scrollbar-width: none;
        transform: none;
    }

    .hm-industries .hm-solution-grid::-webkit-scrollbar {
        display: none;
    }

    .hm-industries .hm-solution-slide {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

@media (max-width: 980px) {
    .hm-industries .hm-solution-slide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hm-industries .solution-card {
        min-height: 260px;
    }

    .hm-industries .solution-content {
        left: 16px;
        right: 16px;
        bottom: 20px;
    }

    .hm-industries .solution-content h3 {
        font-size: 22px;
    }
}

@media (min-width: 641px) and (max-width: 980px) {
    .hm-industries .solution-content {
        right: 16px;
        bottom: 18px;
        display: flex;
        flex-direction: column;
        gap: 0;
        grid-template-rows: none;
        row-gap: 0;
    }

    .hm-industries .solution-content h3 {
        margin-bottom: 5px;
        font-size: 18px;
        line-height: 1.18;
    }

    .hm-industries .solution-content p {
        height: 20px;
        max-height: 20px;
        margin-bottom: 9px;
        overflow: hidden;
        font-size: 13px;
        line-height: 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
        -webkit-line-clamp: 1;
    }

    .hm-industries .solution-tags {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        width: calc(100% - 48px);
        max-height: 26px;
        overflow: hidden;
        align-content: center;
    }

    .hm-industries .solution-tags span {
        flex: 0 1 auto;
        min-width: 0;
        min-height: 26px;
        padding: 0 8px;
        overflow: hidden;
        font-size: 11.5px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 520px) {
    .hm-industries .hm-solution-slide {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .hm-solution-viewport {
        overflow: hidden;
        touch-action: pan-y;
    }

    .hm-industries .hm-solution-grid {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        scrollbar-width: none;
        transform: none;
    }

    .hm-industries .hm-solution-grid::-webkit-scrollbar {
        display: none;
    }

    .hm-industries .hm-solution-slide {
        grid-template-columns: 1fr;
        gap: 12px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .hm-industries .solution-card {
        aspect-ratio: 8 / 5;
        min-height: 210px;
        max-height: 300px;
    }

    .hm-industries .solution-card::before {
        background: linear-gradient(180deg, rgba(3, 10, 24, 0) 0%, rgba(3, 10, 24, 0) 48%, rgba(3, 10, 24, .18) 74%, rgba(2, 8, 20, .66) 100%);
    }

    .hm-industries .solution-card:hover {
        border-color: rgba(201, 218, 238, .68);
        box-shadow: 0 1px 2px rgba(72, 105, 148, .03);
        transform: none;
    }

    .hm-industries .solution-card:hover::before {
        background: linear-gradient(180deg, rgba(3, 10, 24, 0) 0%, rgba(3, 10, 24, 0) 52%, rgba(3, 10, 24, .14) 76%, rgba(2, 8, 20, .58) 100%);
    }

    .hm-industries .solution-card:hover::after {
        filter: brightness(1.08) contrast(1.05) saturate(1.08);
        transform: scale(1.035);
    }

    .hm-industries .solution-card:hover .solution-content {
        transform: none;
    }

    .hm-industries .solution-card:hover .solution-content span {
        border-color: rgba(255, 255, 255, .44);
        background: rgba(3, 13, 32, .54);
    }

    .hm-industries .solution-card:hover i {
        background: var(--white);
        transform: none;
    }

    .hm-industries .solution-card:hover i::before {
        border-color: var(--dark);
    }

    .hm-industries .solution-content {
        left: 16px;
        right: 58px;
        bottom: 16px;
        display: flex;
        flex-direction: column;
        gap: 0;
        grid-template-rows: none;
        row-gap: 0;
    }

    .hm-industries .solution-content h3 {
        margin-bottom: 5px;
        font-size: 20px;
        line-height: 1.18;
        text-shadow: 0 2px 8px rgba(0, 0, 0, .72);
    }

    .hm-industries .solution-content p {
        display: block;
        height: 18px;
        max-height: 18px;
        overflow: hidden;
        color: rgba(255, 255, 255, .9);
        font-size: 13px;
        line-height: 18px;
        margin-bottom: 7px;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-shadow: 0 2px 8px rgba(0, 0, 0, .72);
        -webkit-line-clamp: 1;
    }

    .hm-industries .solution-tags {
        display: flex;
        flex-wrap: nowrap;
        gap: 5px;
        width: 100%;
        max-height: none;
        overflow: hidden;
        padding-right: 0;
    }

    .hm-industries .solution-tags span {
        min-height: 24px;
        min-width: 0;
        padding: 0 8px;
        flex: 0 1 auto;
        overflow: hidden;
        border-color: rgba(255, 255, 255, .44);
        color: rgba(255, 255, 255, .96);
        background: rgba(3, 13, 32, .58);
        font-size: 11.5px;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hm-solution-dots {
        margin-top: 18px;
    }
}

.hm-industry-card {
    display: flex;
    min-height: 244px;
    padding: 0 18px 20px;
    flex-direction: column;
    justify-content: flex-end;
}

.hm-industry-card::before {
    background:
        radial-gradient(circle at 24% 16%, rgba(73, 200, 255, .24), transparent 28%),
        linear-gradient(135deg, rgba(10, 99, 255, .28), rgba(3, 27, 63, .56) 42%, rgba(2, 13, 34, .94) 100%),
        linear-gradient(180deg, rgba(3, 27, 63, .16) 0%, rgba(3, 27, 63, .82) 58%, rgba(2, 13, 34, .98) 100%);
}

.hm-industry-card strong {
    display: block;
    margin-top: 8px;
    color: rgba(230, 243, 255, .78);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 800;
}

.hm-cases {
    padding-top: 40px;
    padding-bottom: 40px;
    background: transparent;
}

.hm-row-head {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-bottom: 24px;
    text-align: center;
}

.hm-row-head a,
.hm-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 20px;
    border: 1px solid rgba(10, 99, 255, .24);
    border-radius: 8px;
    color: #0a63ff;
    background: rgba(255, 255, 255, .64);
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(20, 67, 128, .07);
}

.hm-case-carousel {
    --hm-case-gap: 18px;
}

.hm-case-viewport {
    overflow: hidden;
    margin: -6px 0;
    padding: 6px 0;
    cursor: grab;
    touch-action: pan-y;
}

.hm-case-viewport.is-dragging {
    cursor: grabbing;
}

.hm-case-grid {
    display: flex;
    gap: var(--hm-case-gap);
    transition: transform .42s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

.hm-case-grid.is-resetting,
.hm-case-viewport.is-dragging .hm-case-grid {
    transition: none;
}

.hm-case-card {
    display: block;
    min-width: 0;
    flex: 0 0 calc((100% - (var(--hm-case-gap) * 3)) / 4);
    overflow: hidden;
    border: 1px solid #e3ebf7;
    border-radius: 8px;
    color: inherit;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(34, 62, 102, .045),
        0 12px 22px -16px rgba(54, 96, 148, .32),
        0 5px 12px -10px rgba(10, 99, 255, .16),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.hm-case-card:hover,
.hm-case-card:focus-within {
    border-color: rgba(18, 104, 255, .34);
    transform: translateY(-3px);
    box-shadow:
        0 2px 4px rgba(34, 62, 102, .06),
        0 16px 28px -17px rgba(54, 96, 148, .38),
        0 8px 18px -11px rgba(10, 99, 255, .2),
        inset 0 1px 0 rgba(255, 255, 255, .92);
}

.hm-case-cover {
    position: relative;
    height: clamp(186px, 10.8vw, 206px);
    padding: 20px 20px 18px;
    overflow: hidden;
    color: #fff;
    background: #dce8f7;
}

.hm-case-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--hm-bg) center / cover no-repeat;
    transition: transform .28s ease;
}

.hm-case-card:hover .hm-case-cover::before,
.hm-case-card:focus-within .hm-case-cover::before {
    transform: scale(1.035);
}

.hm-case-cover-hit {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hm-case-cover-copy {
    position: relative;
    z-index: 3;
    display: flex;
    height: 100%;
    width: min(100%, 285px);
    flex-direction: column;
    align-items: flex-start;
    pointer-events: none;
}

.hm-case-cover h3 {
    display: block;
    color: #fff;
    font-size: 16.5px;
    line-height: 1.35;
    font-weight: 900;
    text-shadow: 0 3px 10px rgba(6, 18, 38, .42);
}

.hm-case-sort {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    min-height: 24px;
    margin-top: auto;
    padding: 0 10px;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 6px;
    color: #075ee8;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 18px rgba(3, 27, 63, .16);
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
    pointer-events: auto;
    backdrop-filter: blur(6px);
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.hm-case-sort::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(10, 99, 255, .12);
}

.hm-case-sort:hover,
.hm-case-sort:focus-visible {
    border-color: rgba(10, 99, 255, .22);
    color: #fff;
    background: #0a63ff;
    box-shadow: 0 10px 22px rgba(10, 99, 255, .26);
}

.hm-case-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 84px;
    border-top: 1px solid rgba(226, 234, 246, .86);
    color: inherit;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
    text-decoration: none;
}

.hm-case-metrics span {
    position: relative;
    display: flex;
    min-width: 0;
    padding: 15px 14px 14px;
    flex-direction: column;
    justify-content: center;
}

.hm-case-metrics span:not(:last-child) {
    border-right: 0;
}

.hm-case-metrics span:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 0;
    bottom: 18px;
    width: 1px;
    background: rgba(213, 225, 241, .86);
}

.hm-case-metrics b {
    display: block;
    color: #0a63ff;
    font-size: 24px;
    line-height: 1;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.hm-case-metrics em {
    display: block;
    margin-top: 8px;
    color: #667896;
    font-size: 12px;
    line-height: 1.3;
    font-style: normal;
    font-weight: 700;
}

.hm-case-dots {
    display: flex;
    min-height: 10px;
    margin-top: 18px;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.hm-case-dots:empty {
    display: none;
}

.hm-case-dots button {
    display: block;
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    appearance: none;
    cursor: pointer;
    background: rgba(10, 99, 255, .22);
    transition: width .22s ease, background-color .22s ease, box-shadow .22s ease;
}

.hm-case-dots button.is-active {
    width: 24px;
    background: #0a63ff;
    box-shadow: 0 6px 16px rgba(10, 99, 255, .24);
}

.hm-case-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 16px auto 0;
    color: #0a63ff;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    text-decoration: none;
}

.hm-case-more::after {
    content: "";
    width: 15px;
    height: 9px;
    background: currentColor;
    clip-path: polygon(0 36%, 64% 36%, 64% 0, 100% 50%, 64% 100%, 64% 64%, 0 64%);
}

.hm-ai-dashboard {
    padding: 40px 0;
    background: transparent;
}

.hm-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 24px;
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(180deg, #1683ff 0%, #0566f6 100%);
    font-size: 14px;
    line-height: 1;
    font-weight: 900;
    box-shadow: 0 13px 24px rgba(5, 102, 246, .24), inset 0 1px 0 rgba(255, 255, 255, .26);
    transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
}

.hm-primary-btn::after {
    content: "";
    width: 14px;
    height: 9px;
    margin-left: 9px;
    background: currentColor;
    clip-path: polygon(0 37%, 66% 37%, 66% 0, 100% 50%, 66% 100%, 66% 63%, 0 63%);
}

.hm-primary-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 18px 34px rgba(5, 102, 246, .32), inset 0 1px 0 rgba(255, 255, 255, .26);
}

.hm-visibility-card {
    --hm-ui-font: "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
    --hm-num-font: "Arial Narrow", Arial, "Segoe UI", sans-serif;
    display: grid;
    grid-template-columns: minmax(300px, .34fr) minmax(0, 1fr);
    gap: 22px;
    min-height: 364px;
    padding: 12px 20px 12px 70px;
    border: 1px solid rgba(218, 229, 244, .94);
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 26px rgba(28, 74, 132, .08), 0 2px 8px rgba(28, 74, 132, .035), 0 1px 0 rgba(255, 255, 255, .88) inset;
    font-family: var(--hm-ui-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.hm-visibility-copy {
    align-self: center;
    padding: 0;
}

.hm-visibility-copy h2 {
    width: fit-content;
    max-width: 100%;
    margin: 0;
    color: #14264c;
    font-size: 32px;
    line-height: 1.14;
    font-weight: 820;
    letter-spacing: 0;
    text-align: left;
}

.hm-visibility-copy > p {
    margin: 11px 0 0;
    color: #6b7f99;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 520;
}

.hm-visibility-points {
    display: grid;
    gap: 11px;
    margin: 19px 0 0;
    padding: 0;
    list-style: none;
}

.hm-visibility-points li {
    position: relative;
    padding-left: 22px;
    color: #4f6683;
    font-size: 13.5px;
    line-height: 1.35;
    font-weight: 540;
}

.hm-visibility-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .43em;
    width: 11px;
    height: 9px;
    background: #1684ff;
    clip-path: polygon(14% 50%, 32% 33%, 45% 47%, 78% 16%, 95% 33%, 45% 81%);
}

.hm-visibility-cta {
    width: 228px;
    min-height: 48px;
    margin-top: 34px;
    border-radius: 6px;
    background: linear-gradient(180deg, #168aff 0%, #076df5 100%);
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: 0 14px 28px rgba(5, 102, 246, .2), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.hm-visibility-cta::after {
    content: "→";
    width: auto;
    height: auto;
    margin-left: 12px;
    background: none;
    clip-path: none;
    font-size: 17px;
    line-height: 1;
    font-weight: 700;
    transform: translateY(-1px);
}

.hm-visibility-board {
    display: grid;
    grid-template-rows: 216px 112px;
    gap: 12px;
    min-width: 0;
}

.hm-board-top {
    display: grid;
    grid-template-columns: minmax(210px, .95fr) minmax(390px, 1.75fr) minmax(240px, 1.08fr);
    gap: 0;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(220, 230, 244, .96);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(31, 83, 142, .055);
}

.hm-board-metrics article {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(223, 232, 244, .92);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(31, 83, 142, .055);
}

.hm-board-panel {
    min-width: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 23px 24px 16px;
}

.hm-board-panel h3 {
    margin: 0;
    color: #263a61;
    font-size: 11px;
    line-height: 1.18;
    font-weight: 780;
}

.hm-board-panel + .hm-board-panel {
    position: relative;
}

.hm-board-panel + .hm-board-panel::before {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 0;
    width: 1px;
    background: linear-gradient(
        180deg,
        rgba(228, 236, 248, 0) 0%,
        rgba(228, 236, 248, .72) 12%,
        rgba(228, 236, 248, .72) 88%,
        rgba(228, 236, 248, 0) 100%
    );
    pointer-events: none;
}

.hm-score-card {
    display: grid;
    justify-items: center;
    align-content: start;
}

.hm-score-card h3 {
    justify-self: start;
}

.hm-score-card h3::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 1.5px solid #9aacc3;
    border-right: 1.5px solid #9aacc3;
    transform: translateY(-1px) rotate(45deg);
}

.hm-score-gauge {
    position: relative;
    display: grid;
    place-items: center;
    width: 132px;
    aspect-ratio: 1;
    margin-top: 10px;
}

.hm-score-gauge svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.hm-score-track,
.hm-score-value,
.hm-score-accent {
    fill: none;
    stroke-width: 10.5;
    stroke-linecap: round;
    transform: rotate(132deg);
    transform-origin: 60px 60px;
}

.hm-score-track {
    stroke: #edf3fb;
    stroke-dasharray: 78 100;
    stroke-dashoffset: 0;
}

.hm-score-value {
    stroke: #3277f4;
    stroke-dasharray: 58 100;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 5px 7px rgba(48, 121, 255, .14));
}

.hm-score-accent {
    stroke: #75d7c9;
    stroke-dasharray: 14 100;
    stroke-dashoffset: -59;
    filter: drop-shadow(0 5px 7px rgba(117, 215, 201, .12));
}

.hm-score-gauge div {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 7px;
}

.hm-score-gauge strong {
    font-family: var(--hm-num-font);
    color: #14264c;
    font-size: 39px;
    line-height: .94;
    font-weight: 820;
    font-variant-numeric: tabular-nums;
}

.hm-score-gauge span {
    color: #1f3255;
    font-size: 12px;
    line-height: 1.15;
    font-weight: 760;
}

.hm-score-card p {
    margin: -2px 0 0;
    color: #6a7e98;
    font-size: 11px;
    line-height: 1.24;
    font-weight: 640;
}

.hm-score-card b,
.hm-trend-summary b,
.hm-board-metrics em b {
    color: #28c690;
    font-weight: 760;
}

.hm-trend-card {
    display: grid;
    grid-template-columns: 102px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 18px;
    padding: 23px 24px 15px;
}

.hm-trend-card h3 {
    grid-column: 1 / -1;
}

.hm-trend-summary {
    align-self: start;
    display: grid;
    gap: 7px;
    padding-top: 16px;
}

.hm-trend-summary span {
    color: #8a9bb2;
    font-size: 11px;
    line-height: 1.22;
    font-weight: 640;
}

.hm-trend-summary strong {
    font-family: var(--hm-num-font);
    color: #1a3768;
    font-size: 24px;
    line-height: 1.05;
    font-weight: 820;
    font-variant-numeric: tabular-nums;
}

.hm-trend-summary small {
    font-family: var(--hm-ui-font);
    color: #7f91a9;
    font-size: 11px;
    font-weight: 620;
}

.hm-trend-summary em {
    color: #7b8da5;
    font-size: 11px;
    line-height: 1.24;
    font-style: normal;
    font-weight: 640;
}

.hm-trend-chart {
    display: block;
    width: 100%;
    height: 142px;
    align-self: end;
    overflow: visible;
}

.hm-chart-grid {
    fill: none;
    stroke: rgba(226, 235, 247, .78);
    stroke-width: 1;
}

.hm-chart-area {
    fill: url("#hm-trend-area-fill");
}

.hm-chart-line {
    fill: none;
    stroke: #347cf7;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 4px 6px rgba(52, 124, 247, .18));
}

.hm-chart-dates text {
    font-family: var(--hm-num-font);
    fill: #7d8fa8;
    font-size: 10px;
    font-weight: 620;
    text-anchor: middle;
    dominant-baseline: middle;
}

.hm-platform-card {
    padding: 23px 22px 16px;
}

.hm-platform-layout {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.hm-platform-donut {
    display: block;
    width: 112px;
    aspect-ratio: 1;
    overflow: visible;
}

.hm-platform-track,
.hm-platform-segment {
    fill: none;
    stroke-width: 16;
}

.hm-platform-track {
    stroke: #edf3fb;
}

.hm-platform-segment {
    stroke-linecap: butt;
    transform: rotate(-90deg);
    transform-origin: 60px 60px;
}

.hm-platform-doubao {
    stroke: #3375f5;
    stroke-dasharray: 32 68;
    stroke-dashoffset: 0;
}

.hm-platform-qianwen {
    stroke: #56c7b5;
    stroke-dasharray: 24 76;
    stroke-dashoffset: -33.3;
}

.hm-platform-deepseek {
    stroke: #245ee8;
    stroke-dasharray: 18 82;
    stroke-dashoffset: -58.6;
}

.hm-platform-yuanbao {
    stroke: #8aa7ff;
    stroke-dasharray: 14 86;
    stroke-dashoffset: -77.9;
}

.hm-platform-ernie {
    stroke: #cbd8ea;
    stroke-dasharray: 12 88;
    stroke-dashoffset: -93.2;
}

.hm-platform-core {
    fill: #fff;
}

.hm-platform-legend {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-platform-legend li {
    display: grid;
    grid-template-columns: 7px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    color: #6c7f98;
    font-size: 10px;
    line-height: 1.18;
    font-weight: 620;
}

.hm-platform-legend i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3375f5;
}

.hm-platform-legend li:nth-child(2) i { background: #56c7b5; }
.hm-platform-legend li:nth-child(3) i { background: #245ee8; }
.hm-platform-legend li:nth-child(4) i { background: #8aa7ff; }
.hm-platform-legend li:nth-child(5) i { background: #cbd8ea; }

.hm-platform-legend span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hm-platform-legend b {
    font-family: var(--hm-num-font);
    color: #6a7d96;
    font-size: 10px;
    font-weight: 700;
}

.hm-board-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

.hm-board-metrics article {
    display: grid;
    grid-template-columns: 28px max-content;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 18px;
    text-align: left;
    border-color: rgba(220, 230, 243, .98);
    border-radius: 7.5px;
    box-shadow: 0 8px 18px rgba(31, 83, 142, .075), 0 1px 0 rgba(255, 255, 255, .9) inset;
}

.hm-metric-icon {
    align-self: start;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-top: 7px;
    border: 1px solid rgba(47, 124, 255, .18);
    border-radius: 8px;
    color: #2e72ef;
    background: linear-gradient(180deg, rgba(239, 247, 255, .96), rgba(255, 255, 255, .72));
    box-shadow: 0 6px 12px rgba(47, 124, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .92);
}

.hm-metric-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hm-board-metrics span:not(.hm-metric-icon) {
    display: block;
    color: #536a86;
    font-size: 11.5px;
    line-height: 1.18;
    font-weight: 680;
}

.hm-board-metrics strong {
    font-family: var(--hm-num-font);
    display: block;
    margin-top: 8px;
    color: #193967;
    font-size: 24px;
    line-height: 1.06;
    font-weight: 820;
    font-variant-numeric: tabular-nums;
}

.hm-board-metrics em {
    display: block;
    margin-top: 7px;
    color: #71849c;
    font-size: 10.5px;
    line-height: 1.24;
    font-style: normal;
    font-weight: 640;
}

.hm-knowledge {
    padding-top: 48px;
    background: #f8fbff;
}

.hm-knowledge .hm-row-head {
    margin-bottom: 24px;
}

.hm-knowledge .hm-row-head h2 {
    font-size: 30px;
}

.hm-knowledge .hm-row-head p {
    color: #7a88a3;
}

.hm-article-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.hm-article-card {
    position: relative;
    display: flex;
    min-height: 138px;
    padding: 16px;
    overflow: hidden;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid rgba(73, 200, 255, .14);
    border-radius: 11px;
    color: #fff;
    text-decoration: none;
    background:
        linear-gradient(180deg, rgba(3, 27, 63, .1), rgba(3, 27, 63, .92)),
        var(--hm-bg, linear-gradient(135deg, #082f68 0%, #061a3c 55%, #031127 100%)) center / cover no-repeat;
    box-shadow: 0 10px 22px rgba(3, 27, 63, .08);
}

.hm-article-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 8%, rgba(73, 200, 255, .14), transparent 30%);
}

.hm-article-card span,
.hm-article-card h3,
.hm-article-card time {
    position: relative;
    z-index: 1;
}

.hm-article-card span {
    align-self: flex-start;
    margin-bottom: 14px;
    padding: 5px 9px;
    border-radius: 7px;
    color: #d9efff;
    background: rgba(10, 99, 255, .38);
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
}

.hm-article-card h3 {
    display: -webkit-box;
    min-height: 44px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px;
}

.hm-article-card time {
    display: block;
    margin-top: 10px;
    color: rgba(230, 243, 255, .7);
    font-size: 12px;
    font-weight: 800;
}

.hm-article-card i {
    display: none;
}

.hm-knowledge-more {
    display: flex;
    width: fit-content;
    margin: 16px auto 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #0a63ff;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    text-decoration: none;
}

.hm-knowledge-more::after {
    content: "";
    width: 15px;
    height: 9px;
    background: currentColor;
    clip-path: polygon(0 36%, 64% 36%, 64% 0, 100% 50%, 64% 100%, 64% 64%, 0 64%);
}

.hm-article-dots {
    display: none;
}

@media (min-width: 1181px) {
    .hm-knowledge .hm-article-card:nth-child(n+11) {
        display: none;
    }
}

.hm-article-track.is-dragging,
.hm-article-track.is-animating {
    scroll-snap-type: none !important;
}

.hm-article-track.is-animating {
    transition: transform .42s cubic-bezier(.22, 1, .36, 1);
}

.hm-article-track.is-dragging,
.hm-article-track.is-resetting {
    transition: none;
}

.hm-home-cta {
    padding: 0;
    background: #01163d;
}

.hm-home-cta .hm-container {
    width: 100%;
    max-width: none;
}

.hm-cta-banner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 30px;
    min-height: 138px;
    overflow: hidden;
    padding:
        28px
        max(520px, calc((100vw - 1600px) / 2 + 520px))
        28px
        max(40px, calc((100vw - 1600px) / 2 + 40px));
    border: 1px solid rgba(78, 165, 255, .26);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    color: #fff;
    background: #01163d;
    box-shadow:
        0 -1px 0 rgba(123, 197, 255, .12),
        inset 0 1px 0 rgba(123, 197, 255, .18),
        inset 0 -1px 0 rgba(7, 58, 126, .58);
}

.hm-cta-banner::before {
    display: none;
}

.hm-cta-banner > div:not(.hm-cta-visual),
.hm-cta-actions {
    position: relative;
    z-index: 2;
}

.hm-cta-banner h2 {
    color: #fff;
    font-size: 30px;
    line-height: 1.14;
    font-weight: 780;
}

.hm-cta-banner p {
    margin-top: 9px;
    color: rgba(222, 238, 255, .78);
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 500;
}

.hm-cta-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.hm-cta-actions .hm-primary-btn,
.hm-cta-actions .hm-secondary-btn {
    width: 144px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 730;
}

.hm-cta-actions .hm-primary-btn::after {
    display: none;
}

.hm-cta-actions .hm-secondary-btn {
    color: rgba(232, 244, 255, .92);
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .04);
    box-shadow: none;
}

.hm-cta-visual {
    position: absolute;
    right: max(0px, calc((100% - 1600px) / 2));
    top: 0;
    bottom: 0;
    z-index: 0;
    width: 560px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 44%, rgba(0, 0, 0, .24) 53%, #000 68%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 44%, rgba(0, 0, 0, .24) 53%, #000 68%, #000 100%);
}

.hm-cta-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/template/xqd/assets/images/footer/footer-ai-diagnosis-alpha.webp") right 10px center / auto calc(100% - 10px) no-repeat;
    opacity: .96;
    animation: hmCtaBrainFloat 4.8s ease-in-out infinite;
    will-change: transform, filter, opacity;
}

@keyframes hmCtaBrainFloat {
    0%,
    100% {
        transform: translate3d(0, 3px, 0);
        filter: drop-shadow(0 0 0 rgba(73, 200, 255, 0));
        opacity: .94;
    }

    50% {
        transform: translate3d(0, -4px, 0);
        filter: drop-shadow(0 0 12px rgba(73, 200, 255, .22));
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero .hero-copy h1,
    .hero .hero-copy p,
    .hero .hero-actions {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .hm-cta-visual::before {
        animation: none;
    }
}

@media (max-width: 1360px) {
    .hm-container {
        width: min(1600px, calc(100% - 56px));
    }

    .hm-six-grid {
        gap: 12px;
    }

    .hm-service-card {
        min-height: 226px;
        padding: 16px 14px;
    }

    .hm-core-services .hm-service-card.hm-service-card {
        --hm-cover-y: -28px;
        --hm-cover-size: 122%;
    }

    .hm-core-services .hm-service-card {
        min-height: 264px;
        padding: 0 14px 18px;
    }

    .hm-industry-card {
        min-height: 218px;
        padding: 0 14px 16px;
    }

    .hm-service-card h3,
    .hm-industry-card h3 {
        font-size: 15px;
    }

    .hm-core-services .hm-service-card h3 {
        font-size: 16px;
    }

    .hm-service-card p,
    .hm-industry-card p {
        font-size: 12px;
    }

    .hm-dashboard-panel {
        grid-template-columns: minmax(318px, .86fr) minmax(158px, .38fr) minmax(310px, .76fr) minmax(198px, .54fr);
        grid-template-rows: 156px 108px;
        padding: 9px;
    }

    .hm-score-panel {
        padding: 22px 20px 16px 22px;
    }

    .hm-line-chart {
        padding: 22px 20px 10px 22px;
    }

    .hm-line-chart svg {
        height: 110px;
    }

    .hm-donut-wrap {
        grid-template-columns: 88px minmax(92px, 1fr);
        padding: 22px 18px 15px;
    }

    .hm-donut {
        width: 86px;
    }

    .hm-dashboard-metrics article {
        padding: 16px 20px 10px;
    }

    .hm-dashboard-metrics strong {
        margin-top: 9px;
        font-size: 24px;
    }

    .hm-dashboard-metrics em {
        margin-top: 6px;
    }
}

@media (max-width: 1180px) {
    .hm-six-grid,
    .hm-case-grid,
    .hm-article-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hm-case-card {
        flex-basis: calc((100% - (var(--hm-case-gap) * 2)) / 3);
    }

    .hm-capability-stage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        min-height: 0;
    }

    .hm-capability-lines {
        display: none;
    }

    .hm-engine-visual {
        grid-column: 1 / -1;
        order: -1;
        min-height: 240px;
    }

    .hm-engine-asset {
        width: min(320px, 80%);
    }

    .hm-dashboard-panel {
        grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "left left"
            "score charts"
            "metrics metrics";
        padding: 10px;
    }

    .hm-dashboard-panel::after {
        display: none;
    }

    .hm-dashboard-left {
        border-right: 0;
        border-bottom: 1px solid rgba(102, 178, 255, .22);
    }

    .hm-chart-panel {
        grid-template-columns: minmax(0, 1fr) minmax(200px, .6fr);
    }

    .hm-dashboard-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hm-dashboard-metrics article:nth-child(3) {
        border-right: 0;
    }

    .hm-cta-banner {
        grid-template-columns: 1fr;
        padding-right: 350px;
    }

    .hm-cta-actions {
        justify-content: flex-start;
    }

    .hm-cta-visual {
        width: 390px;
    }
}

@media (min-width: 761px) and (max-width: 1180px) {
    .hm-cta-banner {
        min-height: 246px;
        padding: 34px 356px 34px 40px;
        gap: 18px;
    }

    .hm-cta-banner h2 {
        max-width: 360px;
    }

    .hm-cta-banner p {
        max-width: 390px;
    }

    .hm-cta-actions {
        gap: 16px;
    }

    .hm-cta-visual {
        top: 42px;
        right: 24px;
        bottom: auto;
        left: auto;
        width: 314px;
        height: 148px;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .hm-cta-visual::before {
        inset: 0;
        background-position: center center;
        background-size: contain;
        opacity: 1;
        filter: drop-shadow(0 18px 30px rgba(0, 119, 255, .28));
    }

    .hm-case-carousel {
        --hm-case-gap: 16px;
    }

    .hm-case-viewport {
        overflow-x: auto;
        overflow-y: hidden;
        touch-action: pan-x pan-y;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .hm-case-viewport::-webkit-scrollbar {
        display: none;
    }

    .hm-case-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - var(--hm-case-gap)) / 2);
        grid-template-columns: none;
        grid-template-rows: repeat(2, minmax(0, auto));
        align-items: stretch;
        transform: none;
    }

    .hm-case-card {
        flex-basis: auto;
        height: 100%;
    }

    .hm-case-card:nth-child(4n + 1) {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .hm-case-cover {
        height: 168px;
        padding: 18px 18px 16px;
    }

    .hm-case-cover h3 {
        font-size: 16px;
        line-height: 1.32;
    }

    .hm-case-metrics {
        min-height: 76px;
    }

    .hm-case-metrics span {
        padding: 12px 12px;
    }

    .hm-case-metrics b {
        font-size: 21px;
    }

    .hm-case-metrics em {
        margin-top: 7px;
        font-size: 11.5px;
    }
}

@media (min-width: 761px) and (max-width: 1180px) {
    .hm-article-viewport {
        overflow: hidden;
        margin: -6px 0;
        padding: 6px 0;
    }

    .hm-article-track {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - 32px) / 3);
        grid-template-columns: none;
        grid-template-rows: repeat(2, minmax(168px, auto));
        gap: 14px 16px;
        overflow: visible;
        scroll-snap-type: none;
        scroll-behavior: auto;
        touch-action: pan-x pan-y;
        scrollbar-width: auto;
    }

    .hm-article-track::-webkit-scrollbar {
        display: none;
    }

    .hm-article-track .hm-article-card {
        min-height: 168px;
    }

    .hm-article-track .hm-article-card:nth-child(6n + 1) {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .hm-article-track .hm-article-card:nth-child(n+13) {
        display: none;
    }

    .hm-article-dots {
        display: flex;
        min-height: 10px;
        margin-top: 16px;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .hm-article-dots:empty {
        display: none;
    }

    .hm-article-dots button {
        display: block;
        width: 9px;
        height: 9px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        appearance: none;
        background: rgba(10, 99, 255, .22);
        transition: width .22s ease, background-color .22s ease, box-shadow .22s ease;
    }

    .hm-article-dots button.is-active {
        width: 24px;
        background: #0a63ff;
        box-shadow: 0 6px 16px rgba(10, 99, 255, .24);
    }
}

@media (max-width: 760px) {
    .hm-container {
        width: calc(100% - 28px);
    }

    .hm-section {
        padding: 48px 0;
    }

    .hm-core-services {
        padding-top: 26px;
    }

    .hm-section-head {
        margin-bottom: 24px;
    }

    .hm-section-head h2,
    .hm-row-head h2,
    .hm-dashboard-left h2,
    .hm-cta-banner h2 {
        font-size: 25px;
    }

    .hm-section-head p,
    .hm-row-head p,
    .hm-dashboard-left > p,
    .hm-cta-banner p {
        font-size: 13px;
    }

    .hm-six-grid,
    .hm-case-grid,
    .hm-article-grid,
    .hm-dashboard-metrics {
        grid-template-columns: 1fr;
    }

    .hm-article-viewport {
        overflow: hidden;
        margin: -6px 0;
        padding: 6px 0;
    }

    .hm-article-track {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 100%;
        grid-template-columns: none;
        grid-template-rows: repeat(3, minmax(156px, auto));
        gap: 12px;
        overflow: visible;
        scroll-snap-type: none;
        scroll-behavior: auto;
        touch-action: pan-x pan-y;
        scrollbar-width: auto;
    }

    .hm-article-track::-webkit-scrollbar {
        display: none;
    }

    .hm-article-track .hm-article-card {
        min-height: 156px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .hm-article-track .hm-article-card:nth-child(n+10) {
        display: none;
    }

    .hm-article-dots {
        display: flex;
        min-height: 10px;
        margin-top: 16px;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .hm-article-dots:empty {
        display: none;
    }

    .hm-article-dots button {
        display: block;
        width: 9px;
        height: 9px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        appearance: none;
        background: rgba(10, 99, 255, .22);
        transition: width .22s ease, background-color .22s ease, box-shadow .22s ease;
    }

    .hm-article-dots button.is-active {
        width: 24px;
        background: #0a63ff;
        box-shadow: 0 6px 16px rgba(10, 99, 255, .24);
    }

    .hm-case-carousel {
        --hm-case-gap: 16px;
    }

    .hm-case-viewport {
        overflow-x: auto;
        overflow-y: hidden;
        cursor: auto;
        touch-action: pan-x pan-y;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .hm-case-viewport::-webkit-scrollbar {
        display: none;
    }

    .hm-case-grid {
        transform: none;
    }

    .hm-case-card {
        flex-basis: 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .hm-case-cover {
        height: 190px;
    }

    .hm-service-card,
    .hm-industry-card {
        min-height: 210px;
    }

    .hm-row-head {
        gap: 14px;
    }

    .hm-row-head a {
        justify-self: center;
    }

    .hm-glass-card {
        min-height: 0;
        padding: 22px 20px 20px 66px;
    }

    .hm-capability-stage {
        grid-template-columns: 1fr;
    }

    .hm-engine-visual {
        min-height: 210px;
    }

    .hm-engine-asset {
        width: min(280px, 92%);
    }

    .hm-dashboard-panel {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "left"
            "score"
            "charts"
            "metrics";
        padding: 10px;
        border-radius: 14px;
    }

    .hm-dashboard-left {
        padding: 16px;
        border-right: 0;
        border-bottom: 1px solid rgba(102, 178, 255, .22);
    }

    .hm-dashboard-left ul {
        grid-template-columns: 1fr;
    }

    .hm-score-panel {
        padding: 16px;
        border-right: 0;
    }

    .hm-chart-panel {
        min-height: 0;
        grid-template-columns: 1fr;
    }

    .hm-line-chart {
        padding: 16px;
        border-right: 0;
        border-bottom: 1px solid rgba(102, 178, 255, .22);
    }

    .hm-line-chart svg {
        height: 130px;
    }

    .hm-donut-wrap {
        grid-template-columns: 90px minmax(0, 1fr);
        padding: 16px;
    }

    .hm-dashboard-metrics article {
        border-right: 0;
        border-bottom: 1px solid rgba(102, 178, 255, .22);
    }

    .hm-dashboard-metrics article:last-child {
        border-bottom: 0;
    }

    .hm-home-cta {
        padding: 0;
        background: #01163d;
    }

    .hm-home-cta .hm-container {
        width: 100%;
    }

    .hm-cta-banner {
        min-height: 0;
        padding: 26px 20px 166px;
        grid-template-columns: 1fr;
        gap: 18px;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .hm-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hm-cta-actions .hm-primary-btn,
    .hm-cta-actions .hm-secondary-btn {
        width: 100%;
    }

    .hm-cta-visual {
        top: auto;
        right: 0;
        bottom: 10px;
        left: 0;
        width: 100%;
        height: 150px;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .hm-cta-visual::before {
        inset: 0;
        background-position: center center;
        background-size: contain;
    }
}

@media (max-width: 1360px) {
    .hm-visibility-card {
        grid-template-columns: minmax(270px, .32fr) minmax(0, 1fr);
        gap: 20px;
        padding: 18px 24px 16px 46px;
    }

    .hm-visibility-copy h2 {
        font-size: 30px;
    }

    .hm-visibility-copy > p {
        font-size: 14px;
    }

    .hm-visibility-points li {
        font-size: 13px;
    }

    .hm-board-top {
        grid-template-columns: minmax(142px, .9fr) minmax(290px, 1.8fr) minmax(202px, 1fr);
    }

    .hm-board-panel {
        padding: 16px 16px 12px;
    }

    .hm-trend-card {
        grid-template-columns: 98px minmax(0, 1fr);
        column-gap: 14px;
    }

    .hm-trend-summary strong {
        font-size: 25px;
    }

    .hm-board-metrics article {
        padding: 15px 14px 11px;
    }
}

@media (max-width: 1180px) {
    .hm-visibility-card {
        grid-template-columns: 1fr;
        padding: 28px;
    }

    .hm-visibility-copy {
        max-width: 680px;
        padding: 0;
    }

    .hm-visibility-cta {
        margin-top: 28px;
    }

    .hm-board-top {
        grid-template-columns: minmax(150px, .9fr) minmax(280px, 1.55fr) minmax(210px, 1fr);
    }
}

@media (max-width: 960px) {
    .hm-board-top {
        grid-template-columns: 1fr;
    }

    .hm-trend-card {
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .hm-board-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hm-platform-layout {
        grid-template-columns: 96px minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .hm-ai-dashboard {
        padding: 26px 0 34px;
    }

    .hm-visibility-card {
        gap: 18px;
        padding: 22px 18px 20px;
        border-radius: 11px;
    }

    .hm-visibility-copy {
        display: block;
        min-height: 0;
        text-align: left;
    }

    .hm-visibility-copy h2 {
        width: 100%;
        font-size: 25px;
        line-height: 1.22;
    }

    .hm-visibility-copy > p {
        width: 100%;
        margin-top: 10px;
        font-size: 13px;
    }

    .hm-visibility-points {
        gap: 9px;
        margin-top: 16px;
        width: 100%;
        justify-items: start;
    }

    .hm-visibility-points li {
        display: inline-flex;
        width: 100%;
        padding-left: 0;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 9px;
        font-size: 12.5px;
        text-align: left;
    }

    .hm-visibility-points li::before {
        position: static;
        flex: 0 0 11px;
        margin-top: .38em;
    }

    .hm-visibility-cta {
        width: 100%;
        min-height: 44px;
        margin-top: 18px;
    }

    .hm-visibility-board {
        grid-template-rows: auto auto;
        gap: 12px;
    }

    .hm-board-top {
        display: block;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .hm-board-panel + .hm-board-panel::before {
        display: none;
    }

    .hm-score-card {
        display: grid;
        grid-template-columns: 118px minmax(0, 1fr);
        align-items: center;
        justify-items: stretch;
        min-height: 134px;
        padding: 16px 18px;
        border: 1px solid rgba(220, 230, 244, .96);
        border-radius: 9px;
        background: linear-gradient(180deg, #fff 0%, #f9fcff 100%);
        box-shadow: 0 8px 18px rgba(31, 83, 142, .06);
    }

    .hm-score-card h3 {
        grid-column: 1 / -1;
        justify-self: start;
        margin-bottom: 8px;
        font-size: 12px;
    }

    .hm-score-gauge {
        width: 108px;
        margin-top: 0;
    }

    .hm-score-gauge strong {
        font-size: 34px;
    }

    .hm-score-card p {
        align-self: center;
        margin: 0;
        color: #526985;
        font-size: 12px;
        line-height: 1.6;
        font-weight: 680;
    }

    .hm-score-card p::before {
        content: "综合评估品牌在 AI 搜索中的曝光、引用与内容基础。";
        display: block;
        margin-bottom: 4px;
        color: #6d8099;
        font-weight: 520;
    }

    .hm-trend-card,
    .hm-platform-card {
        display: none;
    }

    .hm-board-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .hm-board-metrics article {
        grid-template-columns: 26px minmax(0, 1fr);
        justify-content: stretch;
        gap: 8px;
        min-height: 92px;
        padding: 13px 10px 12px;
        text-align: left;
    }

    .hm-board-metrics span:not(.hm-metric-icon) {
        font-size: 11px;
        white-space: normal;
    }

    .hm-board-metrics strong {
        font-size: 22px;
        line-height: 1.05;
    }

    .hm-board-metrics em {
        font-size: 10px;
    }
}

@media (min-width: 761px) and (max-width: 980px) {
    .hm-ai-dashboard {
        padding: 34px 0 42px;
    }

    .hm-visibility-card {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 28px;
    }

    .hm-visibility-copy {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 236px;
        column-gap: 28px;
        max-width: none;
        align-items: center;
    }

    .hm-visibility-copy h2,
    .hm-visibility-copy > p,
    .hm-visibility-points {
        grid-column: 1;
    }

    .hm-visibility-cta {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: center;
        width: 100%;
        margin-top: 0;
    }

    .hm-visibility-board {
        grid-template-rows: auto auto;
        gap: 14px;
    }

    .hm-board-top {
        display: block;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .hm-board-panel + .hm-board-panel::before {
        display: none;
    }

    .hm-score-card {
        display: grid;
        grid-template-columns: 124px fit-content(390px);
        grid-template-rows: auto auto;
        column-gap: 26px;
        row-gap: 8px;
        align-items: center;
        align-content: center;
        justify-content: center;
        justify-items: stretch;
        min-height: 146px;
        padding: 18px 22px;
        border: 1px solid rgba(220, 230, 244, .96);
        border-radius: 9px;
        background: linear-gradient(180deg, #fff 0%, #f9fcff 100%);
        box-shadow: 0 8px 18px rgba(31, 83, 142, .06);
    }

    .hm-score-card h3 {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
        align-self: end;
        width: max-content;
        max-width: 390px;
        margin: 0;
        font-size: 12px;
    }

    .hm-score-gauge {
        grid-column: 1;
        grid-row: 1 / span 2;
        justify-self: center;
        align-self: center;
        width: 124px;
        margin-top: 0;
    }

    .hm-score-card p {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
        justify-self: start;
        width: max-content;
        max-width: 390px;
        margin: 0;
        color: #526985;
        font-size: 13px;
        line-height: 1.65;
        font-weight: 680;
    }

    .hm-score-card p::before {
        content: "综合评估品牌在 AI 搜索中的曝光、引用与内容基础。";
        display: block;
        margin-bottom: 4px;
        color: #6d8099;
        font-weight: 520;
    }

    .hm-trend-card,
    .hm-platform-card {
        display: none;
    }

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

    .hm-board-metrics article {
        grid-template-columns: 26px minmax(0, 1fr);
        justify-content: stretch;
        min-height: 86px;
        padding: 15px 16px;
    }
}

@media (max-width: 760px) {
    .hm-ai-dashboard {
        padding: 24px 0 30px;
    }

    .hm-visibility-card {
        gap: 20px;
        padding: 20px 16px 18px;
        border-radius: 11px;
    }

    .hm-visibility-copy {
        display: flex;
        min-height: 286px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: left;
    }

    .hm-visibility-copy h2,
    .hm-visibility-copy > p,
    .hm-visibility-points {
        width: min(100%, 268px);
    }

    .hm-visibility-points {
        gap: 10px;
        margin-top: 18px;
        justify-items: start;
    }

    .hm-visibility-cta {
        width: 100%;
        min-height: 48px;
        margin-top: 22px;
    }

    .hm-visibility-board {
        grid-template-rows: auto;
    }

    .hm-board-top {
        display: grid;
        overflow: hidden;
        border: 1px solid rgba(220, 230, 244, .96);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 8px 18px rgba(31, 83, 142, .055);
    }

    .hm-board-panel + .hm-board-panel::before {
        display: block;
    }

    .hm-score-card {
        display: grid;
        grid-template-columns: none;
        justify-items: center;
        align-content: start;
        min-height: 0;
        padding: 16px 16px 12px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .hm-score-card h3 {
        grid-column: auto;
        justify-self: start;
        margin-bottom: 0;
        font-size: 11px;
    }

    .hm-score-card p::before {
        content: none;
        display: none;
    }

    .hm-score-gauge {
        width: 124px;
        margin-top: 10px;
    }

    .hm-score-card p {
        margin: -2px 0 0;
        color: #6a7e98;
        font-size: 11px;
        line-height: 1.24;
        font-weight: 640;
    }

    .hm-trend-card {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 10px;
    }

    .hm-platform-card {
        display: block;
    }

    .hm-trend-summary {
        grid-template-columns: auto auto auto;
        align-items: baseline;
        gap: 10px;
        padding-top: 4px;
    }

    .hm-trend-summary strong {
        font-size: 22px;
    }

    .hm-trend-chart {
        height: 112px;
    }

    .hm-platform-layout {
        grid-template-columns: 88px minmax(0, 1fr);
    }

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

    .hm-board-metrics article {
        grid-template-columns: 26px minmax(0, max-content);
        justify-content: center;
        gap: 8px;
        min-height: 112px;
        padding: 14px 10px 13px;
    }

    .hm-board-metrics span:not(.hm-metric-icon) {
        font-size: 11px;
        white-space: nowrap;
    }

    .hm-board-metrics strong {
        font-size: 23px;
        line-height: 1.05;
    }
}