:root {
    --surface: #ffffff;
    --surface-soft: #f7faff;
    --surface-tint: #edf3fb;
    --text-strong: #0f1728;
    --text-body: #344054;
    --text-muted: #6b7280;
    --brand-blue: #2b8cf8;
    --brand-navy: #163b59;
    --brand-navy-deep: #0e3250;
    --line: rgba(15, 37, 66, 0.12);
    --shadow-card: 0 1.041667vw 2.083333vw rgba(34, 74, 122, 0.12);
}

body {
    margin: 0;
    color: var(--text-strong);
    font-family: "Arial", sans-serif;
    background: #ffffff;
    overflow-x: hidden;
}

.page-shell {
    width: 100vw;
    margin: 0;
    background: var(--surface);
    overflow: hidden;
}

.section {
    padding: 4.6875vw 0;
}

.section-copy {
    width: 80vw;
    margin: 0 auto;
    text-align: center;
}

.section-copy--narrow,
.section-copy--compact {
    width: 80vw;
    max-width: none;
}

.section-copy h2,
.section-band h2 {
    margin: 0;
    font-size: 3.2vw;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.section-copy p {
    margin: 2vw 0 0;
    font-size: 1.8vw;
    line-height: 1.2;
    color: #000;
    text-align: left;
}

.section-copy strong {
    color: var(--brand-blue);
}

.hero {
    position: relative;
    min-height: 56.104167vw;
    padding: 4vw 4.895833vw 5.208333vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
    background: url("../images/banner_img.png") center center / cover no-repeat;
}

.site-logo {
    display: block;
}

.site-logo--hero {
    width: 16vw;
    height: auto;
}

.hero-content {
    width: 100%;
    text-align: left;
    padding: 18.229167vw 0 1.145833vw 37vw;
}

.hero-kicker {
    margin: 0 0 2vw;
    padding-left: .5vw;
    font-size: 1.4vw;
    font-weight: 700;
    letter-spacing: 0.12vw;
    color: #2ea2ff;
}

.hero h1 {
    margin: 0;
    
    font-size: 7vw;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 0.94;
}

.hero-tagline {
    padding-left: .5vw;
    margin: 1.5vw 0 0;
    font-size: 1.6vw;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.92);
}

.about-section {
    padding-top: 5.46875vw;
    padding-bottom: 8vw;
    background: linear-gradient(180deg, rgba(211, 219, 245, .7) 0%, rgba(238, 246, 255, 0.00) 30%);
}

.about-cards {
    height: 28vw;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5625vw;
    align-items: center;
    width: 80vw;
    margin: 3.541667vw auto 0;
}

.about-card {
    position: relative;
    height: 23.229167vw;
    border-radius: 0.989583vw;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 1.666667vw .8vw 2vw 2vw;
    background-color: #d7dfeb;
    box-shadow: 0 0.78125vw 1.770833vw rgba(124, 156, 204, 0.12);
    transition: height 240ms ease, box-shadow 240ms ease, opacity 240ms ease;
}

.about-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.3) 48%, rgba(12, 29, 51, 0.22) 100%);
    transition: background 240ms ease;
}

.about-card__image {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: auto;
    min-height: 100%;
    transform: translateY(-50%);
    transition: filter 240ms ease, opacity 240ms ease;
}

.about-card__copy {
    position: relative;
    z-index: 1;
}

.about-card h3 {
    margin: 0;
    font-size: 1.9vw;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #111827;
}

.about-card p {
    margin: 0.729167vw 0 0;
    font-size: 1.1vw;
    line-height: 1.56;
    color: rgba(15, 23, 40, 0.9);
}

.about-card.is-side {
    opacity: 1;
}

.about-card.is-side .about-card__image {
    opacity: 0.52;
    filter: saturate(0.76) brightness(1.08);
}

.about-card.is-active {
    height: 27.291667vw;
    opacity: 1;
    box-shadow:
        0 1.302083vw 2.604167vw rgba(124, 168, 227, 0.22),
        0 0 0 0.052083vw rgba(143, 191, 252, 0.5);
    z-index: 2;
}

.about-card.is-active::before {
    background: linear-gradient(180deg, rgba(20, 47, 75, 0.08) 0%, rgba(20, 47, 75, 0.12) 36%, rgba(12, 29, 51, 0.72) 100%);
}

.about-card.is-active .about-card__image {
    opacity: 1;
    filter: saturate(1) brightness(0.92);
}

.about-card.is-active h3,
.about-card.is-active p {
    color: rgba(255, 255, 255, 0.96);
    font-weight: 600;
}

.section-band {
    min-height: 14vw;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    background-position: center;
    background-size: cover;
}

.section-band h2 {
    font-size: 2.708333vw;
    color: #ffffff;
}

.section-band--network {
    background-image: linear-gradient(0deg, rgba(1, 124, 208, 0.1) 0%, rgba(1, 124, 208, 0.1) 100%),url("../images/network_bj.png");
}

.section-band--why {
    background-image:url("../images/choose_us_bj.png");
}

.network-section {
    padding-top: 4.010417vw;
    padding-bottom: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5.729167vw;
    width: 88vw;
    margin: 0 auto;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 9.739583vw;
}

.stat-card__icon {
    display: inline-flex;
    width: 1.6vw;
    height: 1.6vw;
    margin-bottom: 0.572917vw;
}

.stat-card__icon-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.stat-card__icon svg,
.sector-card__icon svg,
.platform-card__icon svg,
.reason-card__icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 0.104167vw;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stat-card__label {
    margin: 0 0 1vw;
    font-size: 1.2vw;
    line-height: 1.25;
    color: #454545;
}

.stat-card__value {
    margin: 0;
    font-size: 4.6vw;
    font-weight: 700;
    line-height: 1;
    color: #454545;
}

.stat-card__note {
    width: 54%;
    margin: 1.2vw 0 0;
    padding-top: 0.833333vw;
    padding-bottom: 0.833333vw;
    border-top: 0.052083vw solid #D1D1D1;
    border-bottom: 0.052083vw solid #D1D1D1;
    font-size: 1.2vw;
    line-height: 1.45;
    color: #454545;
    white-space:nowrap;
}

.sector-strip {
    position: relative;
    margin-top: 3.541667vw;
    padding: 2.708333vw 5.208333vw 3.125vw;
    background: linear-gradient(180deg, rgba(244, 248, 255, 0) 0%, rgba(239, 245, 255, 0.78) 100%);
}

.sector-strip__line {
    position: absolute;
    left: 8.072917vw;
    right: 8.072917vw;
    top: 5.347917vw;
    height: 0.1vw;
    background: linear-gradient(90deg, transparent, rgba(167, 192, 234, 0.58), transparent);
}

.sector-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2.083333vw;
}

.sector-card {
    position: relative;
    height: 10.4vw;
    text-align: center;
    transition: opacity 220ms ease;
}

.sector-card__icon {
    position: absolute;
    left: 50%;
    top: 2.604167vw;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.125vw;
    height: 3.125vw;
    border-radius: 50%;
    color: #b6caf2;
    background: linear-gradient(180deg, rgba(245, 249, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    box-shadow:
        inset 0 0 0 0.052083vw rgba(212, 225, 245, 0.78),
        0 0.260417vw 0.677083vw rgba(193, 212, 242, 0.06);
    transform: translate(-50%, -50%);
    transition: width 220ms ease, height 220ms ease, color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.sector-card__icon::before {
    content: "";
    width: 44%;
    height: 44%;
    background-color: currentColor;
    -webkit-mask: var(--sector-icon) center / contain no-repeat;
    mask: var(--sector-icon) center / contain no-repeat;
    transition: width 220ms ease, height 220ms ease;
}

.sector-card__icon--consumer {
    --sector-icon: url("../images/industry_icon_01.svg");
}

.sector-card__icon--finance {
    --sector-icon: url("../images/industry_icon_02.svg");
}

.sector-card__icon--technology {
    --sector-icon: url("../images/industry_icon_03.svg");
}

.sector-card__icon--semiconductor {
    --sector-icon: url("../images/industry_icon_04.svg");
}

.sector-card__icon--healthcare {
    --sector-icon: url("../images/industry_icon_05.svg");
}

.sector-card.is-far .sector-card__icon {
    width: 5.5vw;
    height: 5.5vw;
    color: #b8cdf7;
    background: linear-gradient(180deg, rgba(242, 247, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    box-shadow:
        inset 0 0 0 0.052083vw rgba(214, 225, 244, 0.82),
        0 0.364583vw 0.9375vw rgba(188, 207, 238, 0.08);
}

.sector-card.is-near .sector-card__icon {
    width: 6.4vw;
    height: 6.4vw;
    color: #7fa7f3;
    background: linear-gradient(180deg, #dcecff 0%, #f7fbff 100%);
    box-shadow:
        inset 0 0 0 0.052083vw rgba(181, 204, 244, 0.7),
        0 0.520833vw 1.197917vw rgba(142, 177, 228, 0.12);
}

.sector-card.is-center .sector-card__icon {
    width: 6.989583vw;
    height: 6.989583vw;
    color: #58a5ee;
    background: linear-gradient(180deg, #c6e1ff 0%, #f4faff 100%);
    box-shadow:
        inset 0 0 0 0.052083vw rgba(166, 204, 248, 0.48),
        0 0 0 0.625vw rgba(236, 242, 255, 0.98),
        0 0.78125vw 1.71875vw rgba(122, 165, 225, 0.16);
}

.sector-card.is-near .sector-card__icon::before {
    width: 42%;
    height: 42%;
}

.sector-card.is-center .sector-card__icon::before {
    width: 40%;
    height: 40%;
}

.sector-card p {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 80%;
    height: 2.708333vw;
    font-size: 1.1vw;
    line-height: 1.45;
    font-weight: 700;
    color: #2f3642;
    margin: 0 auto;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.625vw;
    margin-top: 2.34375vw;
}

.carousel-dot {
    padding: 0;
    width: 0.833333vw;
    height: 0.833333vw;
    border-radius: 50%;
    border: 0;
    background: rgba(154, 182, 220, 0.45);
    cursor: default;
    transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.carousel-dot.is-active {
    background: rgba(111, 163, 234, 0.95);
    box-shadow: 0 0 0 0.260417vw rgba(224, 236, 255, 0.9);
    transform: scale(1.02);
}

.platform-section {
    position: relative;
    padding-top: 5.729167vw;
    padding-bottom: 6.25vw;
    background: linear-gradient(180deg, rgba(228, 234, 253, .7) 0%, rgba(238, 246, 255, 0.00) 50%);
}

.platform-grid {
    display: grid;
    grid-template-columns: 31.25vw 1fr;
    gap: 5.208333vw;
    align-items: center;
    width: 82vw;
    margin: 3.75vw auto 0;
}

.platform-visual {
    position: relative;
    width: 28.645833vw;
    height: 28.645833vw;
    margin: 5vw auto 0;
}

.platform-visual__ring,
.platform-visual__core {
    position: absolute;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.platform-visual__ring {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.platform-visual__core {
    left: 49%;
    top: 42.5%;
    width: 14vw;
    height: 14vw;
    object-fit: contain;
    transform: translate(-50%, -50%);
}

.platform-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9375vw;
}

.platform-card {
    min-height: 18vw;
    padding: 1.8vw 1.6vw 1.65vw;
    border-radius: 0.729167vw;
    background: rgba(255, 255, 255, 0.96);
    border: 0.052083vw solid rgba(185, 220, 255, 0.72);
    transition: background 300ms ease, border-color 300ms ease, box-shadow 300ms ease, color 300ms ease, transform 300ms ease;
}

.platform-card.is-active {
    color: #ffffff;
    background: linear-gradient(180deg, #73a5f2 0%, #9fbdf0 100%);
    border-color: transparent;
    box-shadow: 0 0.833333vw 1.666667vw rgba(77, 132, 203, 0.22);
}

.platform-card__icon {
    display: inline-flex;
    width: 1.8vw;
    height: 1.8vw;
    color: #79befa;
    transition: color 300ms ease;
}

.platform-card__icon::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask: var(--platform-icon) center / contain no-repeat;
    mask: var(--platform-icon) center / contain no-repeat;
}

.platform-card__icon--engine {
    --platform-icon: url("../images/platform_icon_01.svg");
}

.platform-card__icon--crm {
    --platform-icon: url("../images/platform_icon_02.svg");
}

.platform-card__icon--recommend {
    --platform-icon: url("../images/platform_icon_03.svg");
}

.platform-card__icon--compliance {
    --platform-icon: url("../images/platform_icon_04.svg");
}

.platform-card.is-active .platform-card__icon {
    color: rgba(255, 255, 255, 0.92);
}

.platform-card h3 {
    position: relative;
    margin: 1.145833vw 0 0.677083vw;
    padding-left: 0.833333vw;
    font-size: 1.8vw;
    line-height: 1.28;
    letter-spacing: -0.02em;
    color: #0f2342;
    transition: color 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.platform-card h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.260417vw;
    width: 0.104167vw;
    height: 1.5625vw;
    border-radius: 99vw;
    background: #9ad0ff;
    transition: background 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.platform-card p {
    margin: 0;
    max-width: 78%;
    font-size: 1.1vw;
    line-height: 1.55;
    color: #728197;
    transition: color 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.platform-card.is-active h3 {
    color: rgba(255, 255, 255, 0.96);
}

.platform-card.is-active p {
    color: rgba(255, 255, 255, 0.86);
}

.platform-card.is-active h3::before {
    background: rgba(255, 255, 255, 0.76);
}

.platform-card:hover {
    color: #ffffff;
    background: linear-gradient(180deg, #73a5f2 0%, #9fbdf0 100%);
    border-color: transparent;
    box-shadow: 0 0.833333vw 1.666667vw rgba(77, 132, 203, 0.22);
    transform: translateY(-0.104167vw);
}

.platform-card:hover .platform-card__icon {
    color: rgba(255, 255, 255, 0.92);
}

.platform-card:hover h3 {
    color: rgba(255, 255, 255, 0.96);
}

.platform-card:hover h3::before {
    background: rgba(255, 255, 255, 0.76);
}

.platform-card:hover p {
    color: rgba(255, 255, 255, 0.86);
}

.reasons-section {
    position: relative;
    padding-top: 5vw;
    padding-bottom: 3.75vw;
    background: linear-gradient(180deg, #fff 40%, #eef3fb 100%);
    overflow: hidden;
}

.reasons-section::before {
    content: none;
}

.reasons-section::after {
    content: none;
}

.reasons-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.25vw;
    width: 100vw;
    margin: 0 auto;
    padding: 3.125vw 2.135417vw 3.854167vw;
    box-sizing: border-box;
    aspect-ratio: 3840 / 1144;
    background: url("../images/choose_us_img.png") center center / 100% 100% no-repeat;
}

.reason-card {
    position: relative;
    min-height: 0;
    height: 100%;
    padding: 2.760417vw 1.145833vw 2.1875vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: transparent;
    box-shadow: none;
    clip-path: none;
    box-sizing: border-box;
}

.reason-card::before {
    content: none;
}

.reason-card--left {
    transform: none;
}

.reason-card--right {
    transform: none;
}

.reasons-grid .reason-card:nth-child(2) {
    clip-path: none;
}

.reasons-grid .reason-card:nth-child(3) {
    clip-path: none;
}

.reason-card__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.8vw;
    height: 4.8vw;
    border-radius: 50%;
    background: linear-gradient(180deg, #eff7ff, #dbeafe);
    color: var(--brand-blue);
    box-shadow:
        0 0 0 0.052083vw rgba(92, 165, 248, 0.08),
        0 0.625vw 1.302083vw rgba(90, 140, 210, 0.12);
}

.reason-card__icon-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 56%;
    max-height: 56%;
    object-fit: contain;
}

.reason-card h3 {
    position: relative;
    z-index: 1;
    margin: 2vw 0 0.625vw;
    font-size: 1.6vw;
    letter-spacing: -0.02em;
}

.reason-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    width: 84%;
    font-size: 1.1vw;
    line-height: 1.58;
    color: #888;
}

.site-footer {
    padding: 5vw 0 3vw;
    color: rgba(255, 255, 255, 0.88);
    background: var(--brand-navy);
}

.footer-top,
.footer-bottom {
    width: 80vw;
    margin: 0 auto;
}

.footer-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 1.25vw;
    column-gap: 1.458333vw;
    align-items: end;
}

.site-logo--footer {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    width: 16vw;
    height: auto;
    margin-bottom: 1vw;
}

.footer-tagline {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    margin: 0;
    font-size: 1.1vw;
    font-weight: 600;
    letter-spacing: 0.12vw;
}

.footer-linkedin {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    align-self: end;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2vw;
    height: 2vw;
    text-decoration: none;
}

.footer-linkedin__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translateY(.5vw);
}

.footer-bottom {
    margin-top: 1.822917vw;
    padding-top: 0.9375vw;
    border-top: 0.052083vw solid #fff;
    display: flex;
    justify-content: space-between;
    gap: 1.25vw;
    align-items: center;
    font-size: 1vw;
    color: #fff;
}

.footer-nav {
    display: flex;
    gap: 1.354167vw;
}

.footer-nav a {
    color: rgba(255, 255, 255, 0.8);
}