:root {
    --color-bg: #f8faff;
    --color-surface: #ffffff;
    --color-soft: #f1f5ff;
    --color-soft-2: #eef3ff;
    --color-dark: #071532;
    --color-dark-2: #0b1b40;
    --color-primary: #4c3fff;
    --color-primary-2: #6a5cff;
    --color-cyan: #54d7ff;
    --color-pink: #ff74c8;
    --color-orange: #ff9e5b;
    --color-text: #121b35;
    --color-muted: #66708a;
    --color-border: rgba(89, 105, 150, .16);
    --page-line: rgba(76, 92, 136, .16);
    --page-line-strong: rgba(76, 92, 136, .24);
    --page-line-soft: rgba(76, 92, 136, .095);
    --shadow-soft: 0 22px 70px rgba(42, 53, 111, .12);
    --shadow-card: 0 14px 44px rgba(50, 60, 110, .09);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --container: 1180px;
    --rail-width: min(1296px, calc(100vw - 72px));
    --rail-edge: max(24px, calc((100vw - var(--rail-width)) / 2));
    --header-height: 64px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    color: var(--color-text);
    background: var(--color-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

button,
input,
textarea {
    font: inherit;
}

.container {
    width: min(calc(100% - 48px), var(--container));
    margin: 0 auto;
}

.site-shell {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 80% 3%, rgba(255, 116, 200, .22), transparent 28%),
        radial-gradient(circle at 84% 16%, rgba(84, 215, 255, .14), transparent 32%),
        linear-gradient(180deg, #fbfcff 0%, #f8faff 38%, #ffffff 100%);
}

.site-shell::before {
    content: "";
    position: absolute;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
    --grid-edge: var(--rail-edge);
    background:
        linear-gradient(to right,
            transparent var(--grid-edge),
            var(--page-line) var(--grid-edge),
            var(--page-line) calc(var(--grid-edge) + 1px),
            transparent calc(var(--grid-edge) + 1px),
            transparent calc(100% - var(--grid-edge) - 1px),
            var(--page-line) calc(100% - var(--grid-edge) - 1px),
            var(--page-line) calc(100% - var(--grid-edge)),
            transparent calc(100% - var(--grid-edge))
        );
}

.site-header,
.site-shell main,
.site-footer {
    position: relative;
}

.site-shell main,
.site-footer {
    z-index: 1;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
    padding: 0;
    background: transparent;
    border-bottom: 0;
    pointer-events: none;
}

.site-header::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: rgba(255, 255, 255, .96);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, backdrop-filter .22s ease;
    backdrop-filter: blur(18px);
}

.site-header::after {
    content: "";
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    pointer-events: none;
    background: linear-gradient(to bottom,
        transparent calc(var(--header-height) - 1px),
        rgba(109, 124, 170, .16) calc(var(--header-height) - 1px),
        rgba(109, 124, 170, .16) var(--header-height),
        transparent var(--header-height)
    );
}

.site-header .container,
.site-header a,
.site-header button,
.site-header .ks-mega-layer {
    pointer-events: auto;
}

.site-header.is-scrolled::before,
.site-header:hover::before,
.site-header:focus-within::before,
.site-header.is-menu-open::before,
.site-header.is-mega-open::before {
    opacity: 1;
}

.header-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: var(--header-height);
    gap: 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 285px;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    max-width: 260px;
    height: 38px;
}

.brand-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 34px;
    object-fit: contain;
}

.brand-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3127e9 0%, #6d63ff 68%, #9a8cff 100%);
    box-shadow: 0 8px 18px rgba(76, 63, 255, .18);
}

.brand-mark::before,
.brand-mark::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
}

.brand-mark::before {
    width: 12px;
    height: 12px;
}

.brand-mark::after {
    width: 5px;
    height: 5px;
    background: var(--color-primary);
}

.brand-mark-dot {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
}

.brand-text {
    display: flex;
    align-items: center;
    min-width: 0;
    white-space: nowrap;
}

.brand-text strong {
    display: block;
    max-width: 240px;
    overflow: hidden;
    color: #0b1437;
    font-size: 18px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0;
    text-overflow: ellipsis;
}

.site-header .brand-text em {
    display: none;
}

.brand-text em {
    color: #8a91a8;
    font-size: 12px;
    font-style: normal;
}

.ks-nav {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.ks-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 64px;
}

.ks-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 132px;
    min-height: 64px;
    padding: 0 2px;
    border: 0;
    color: #17203a;
    background: transparent;
    font-size: 13px;
    font-weight: 760;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color .16s ease;
}

.ks-nav-link span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ks-nav-link-button {
    appearance: none;
}

.ks-nav-link:hover,
.ks-nav-item:focus-within .ks-nav-link,
.ks-nav-item.is-active .ks-nav-link {
    color: var(--color-primary);
}

.ks-nav-chevron {
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .72;
    flex: 0 0 auto;
    transition: transform .18s ease;
}

.ks-nav-item.is-active .ks-nav-chevron {
    transform: translateY(2px) rotate(225deg);
}

.ks-mega-layer {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 30;
    width: min(var(--container), calc(100vw - 48px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(-50%, -10px, 0);
    transform-origin: top center;
    transition: opacity .26s ease, visibility .26s ease, transform .34s cubic-bezier(.16, 1, .3, 1);
}

.ks-mega-layer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(-50%, 0, 0);
}

.ks-mega-shell {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(109, 124, 170, .13);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    background: rgba(255, 255, 255, .985);
    box-shadow: 0 34px 88px rgba(31, 42, 86, .16);
    transform-origin: top center;
}

.ks-mega-layer.is-motion-down .ks-mega-shell {
    animation: ksMegaPanelDown .48s cubic-bezier(.16, 1, .3, 1) both;
}

.ks-mega-panel {
    display: none;
}

.ks-mega-panel.is-active {
    display: block;
}

.ks-mega-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    min-height: 318px;
}

.ks-mega-main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 34px 28px 36px;
}

.ks-mega-column {
    display: grid;
    align-content: flex-start;
    gap: 4px;
    min-width: 0;
    padding: 0 26px;
    border-left: 1px solid rgba(109, 124, 170, .10);
}

.ks-mega-column:first-child {
    border-left: 0;
}

.ks-mega-heading {
    margin: 0 0 13px;
    color: #18223d;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.25;
}

.ks-mega-label,
.ks-mega-link {
    display: block;
    min-width: 0;
    padding: 9px 0;
    border-radius: 8px;
    color: #33405f;
    font-size: 13px;
    font-weight: 680;
    line-height: 1.35;
    transition: color .16s ease, transform .16s ease;
}

.ks-mega-label {
    color: #8a91a8;
    cursor: default;
}

.ks-mega-link span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ks-mega-link span::after {
    content: "›";
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .16s ease, transform .16s ease;
}

.ks-mega-link:hover {
    color: var(--color-primary);
    transform: translateX(3px);
}

.ks-mega-link:hover span::after {
    opacity: 1;
    transform: translateX(0);
}

.ks-mega-side {
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 34px 30px 36px;
    background: linear-gradient(180deg, rgba(246, 248, 255, .95), rgba(241, 244, 255, .98));
    border-left: 1px solid rgba(109, 124, 170, .10);
}

.ks-mega-side p {
    margin: 0 0 4px;
    color: #18223d;
    font-size: 14px;
    font-weight: 850;
}

.ks-mega-side a {
    display: block;
    padding: 6px 0;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.ks-mega-side a span {
    display: block;
    margin-top: 3px;
    color: #69728b;
    font-size: 12px;
    font-weight: 620;
}

.ks-mega-panel.is-motion-down .ks-mega-column > *,
.ks-mega-panel.is-motion-down .ks-mega-side > * {
    animation: ksMegaTextDown .42s cubic-bezier(.16, 1, .3, 1) .12s both;
}

.ks-mega-panel.is-motion-forward .ks-mega-column > *,
.ks-mega-panel.is-motion-forward .ks-mega-side > * {
    animation: ksMegaTextFromRight .44s cubic-bezier(.16, 1, .3, 1) both;
}

.ks-mega-panel.is-motion-backward .ks-mega-column > *,
.ks-mega-panel.is-motion-backward .ks-mega-side > * {
    animation: ksMegaTextFromLeft .44s cubic-bezier(.16, 1, .3, 1) both;
}

.ks-mega-column:nth-child(2) > * { animation-delay: .06s; }
.ks-mega-column:nth-child(3) > * { animation-delay: .10s; }
.ks-mega-side > * { animation-delay: .12s; }

.site-shell main {
    transition: opacity .32s ease, filter .32s ease, transform .32s ease;
}

body.ks-nav-mega-open .site-shell main {
    opacity: .74;
    filter: blur(12px) saturate(.94);
    transform: translateZ(0);
}

@keyframes ksMegaPanelDown {
    from {
        opacity: 0;
        transform: scaleY(.72);
        clip-path: inset(0 0 100% 0 round 0 0 14px 14px);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
        clip-path: inset(0 0 0 0 round 0 0 14px 14px);
    }
}

@keyframes ksMegaTextDown {
    from {
        opacity: 0;
        transform: translate3d(0, -7px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes ksMegaTextFromRight {
    from {
        opacity: 0;
        transform: translate3d(38px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes ksMegaTextFromLeft {
    from {
        opacity: 0;
        transform: translate3d(-38px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.header-actions {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
    min-width: max-content;
    padding-left: 18px;
}


.header-actions .btn {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 13px;
}

.header-actions .btn-primary::after {
    content: "›";
    margin-left: 8px;
    font-size: 18px;
    line-height: 0;
}

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

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

.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #4437f6 0%, #6d5cff 100%);
    box-shadow: 0 14px 34px rgba(76, 63, 255, .26);
}

.btn-primary:hover {
    box-shadow: 0 18px 42px rgba(76, 63, 255, .34);
}

.btn-ghost,
.btn-outline {
    color: #24304f;
    background: rgba(255, 255, 255, .72);
    border-color: rgba(103, 115, 164, .18);
}

.btn-outline {
    min-width: 118px;
    background: #fff;
}

.hero,
.trust-strip,
.solution,
.stats-panel,
.merchant-section,
.category-section,
.tech-section,
.news-section,
.final-cta,
.site-footer {
    border-top: 1px solid var(--page-line-soft);
}

.hero {
    border-top: 0;
}

.btn-lg {
    min-height: 54px;
    padding: 0 34px;
    border-radius: 12px;
    font-size: 16px;
}

.mobile-menu,
.mobile-panel {
    display: none;
}

.hero {
    position: relative;
    min-height: 595px;
    padding: 0;
    overflow: hidden;
    background: #eef5ff;
}

.hero::after {
    display: none;
}


.hero-inner {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(440px, 560px) 1fr;
    align-items: center;
    min-height: 595px;
    text-align: left;
}

.hero-copy {
    max-width: 560px;
    padding-top: 10px;
}

.eyebrow {
    margin: 0 0 16px;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hero h1 {
    margin: 0;
    color: #10172f;
    font-size: clamp(46px, 4vw, 64px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.04em;
    text-shadow: 0 10px 34px rgba(255,255,255,.48);
}

.hero h1 span {
    display: block;
}

.hero-desc {
    max-width: 545px;
    margin: 24px 0 0;
    color: #46546d;
    font-size: 18px;
    font-weight: 600;
}

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

.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 30px;
    margin-top: 30px;
}

.hero-points span {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #69728b;
    font-size: 14px;
    font-weight: 700;
}

.hero-points span::before {
    content: "";
    width: 18px;
    height: 18px;
    margin-right: 8px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #fff 0 25%, transparent 26%),
        linear-gradient(135deg, #7d73ff, #c7c1ff);
    box-shadow: 0 7px 18px rgba(76, 63, 255, .18);
}

.hero-ambient {
    display: none;
}

.hero-video-stage {
    position: absolute;
    z-index: 1;
    top: 56px;
    right: -12px;
    bottom: -34px;
    left: -12px;
    pointer-events: none;
    user-select: none;
}

.hero-video-stage::before,
.hero-video-stage::after {
    display: none;
}

.hero-video {
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 81% 50%;
    opacity: 1;
    filter: saturate(1.22) contrast(1.08);
    background:
        radial-gradient(circle at 70% 36%, rgba(255,116,200,.22), transparent 33%),
        linear-gradient(135deg, #eef2ff, #f8faff);
}






.hero-flow {
    position: absolute;
    z-index: 1;
    top: 54px;
    right: max(-132px, calc((100vw - var(--container)) / 2 - 220px));
    width: min(900px, 58vw);
    height: 560px;
    pointer-events: none;
    user-select: none;
    opacity: 1;
    transform-origin: 62% 48%;
}

.hero-flow-scene {
    position: relative;
    width: 100%;
    height: 100%;
    transform: translateZ(0);
}

.hero-flow-scene::before,
.hero-flow-scene::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.hero-flow-scene::before {
    inset: 8px 0 -6px 70px;
    background:
        radial-gradient(circle at 56% 46%, rgba(92, 102, 255, .27), transparent 0 20%, rgba(92, 102, 255, .10) 21%, transparent 50%),
        radial-gradient(circle at 74% 63%, rgba(57, 224, 176, .20), transparent 0 22%, transparent 46%),
        radial-gradient(circle at 35% 68%, rgba(80, 178, 255, .17), transparent 0 18%, transparent 42%);
    filter: blur(15px);
}

.hero-flow-scene::after {
    top: 70px;
    right: 14px;
    width: 520px;
    height: 360px;
    border: 1px solid rgba(92, 111, 255, .20);
    background:
        linear-gradient(135deg, rgba(255,255,255,.42), rgba(239, 246, 255, .15)),
        repeating-linear-gradient(90deg, transparent 0 23px, rgba(101, 119, 190, .045) 24px 25px);
    transform: rotate(-8deg);
    opacity: .68;
}

.hero-flow-lines {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.flow-rail,
.flow-pulse {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.flow-rail {
    stroke-width: 54;
    opacity: .68;
    filter: url(#flowGlow);
}

.flow-rail-a,
.flow-rail-c {
    stroke: url(#flowTrackA);
}

.flow-rail-b {
    stroke: url(#flowTrackB);
    stroke-width: 44;
    opacity: .60;
}

.flow-pulse {
    stroke: rgba(255, 255, 255, .86);
    stroke-width: 2.2;
    stroke-dasharray: 78 520;
    filter: drop-shadow(0 0 10px rgba(81, 114, 255, .55));
    animation: flowPulse 6.4s linear infinite;
}

.flow-pulse-b {
    animation-delay: -2.2s;
}

.flow-pulse-c {
    animation-delay: -4s;
}

.flow-orbit {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 6px rgba(81, 111, 255, .10), 0 0 24px rgba(81, 111, 255, .52);
    animation: flowDot 5.8s ease-in-out infinite;
}

.flow-orbit-a {
    top: 150px;
    left: 226px;
}

.flow-orbit-b {
    top: 366px;
    left: 516px;
    background: #55e8bd;
    animation-delay: -1.8s;
}

.flow-orbit-c {
    top: 124px;
    right: 138px;
    background: #ffb352;
    animation-delay: -3.1s;
}

.flow-card {
    position: absolute;
    display: grid;
    gap: 3px;
    min-width: 150px;
    padding: 14px 16px;
    border: 1px solid rgba(104, 121, 190, .16);
    border-radius: 14px;
    color: #17203a;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 18px 48px rgba(38, 54, 112, .16);
    backdrop-filter: blur(16px);
    animation: flowCardFloat 7s ease-in-out infinite alternate;
}

.flow-spark {
    position: absolute;
    z-index: 1;
    display: block;
    border: 1px solid rgba(103, 121, 190, .15);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.76), rgba(238, 246, 255, .36)),
        radial-gradient(circle at 30% 30%, rgba(72, 211, 255, .28), transparent 44%);
    box-shadow: 0 14px 38px rgba(36, 52, 112, .10);
    backdrop-filter: blur(12px);
    animation: flowSpark 8s ease-in-out infinite alternate;
}

.flow-spark-a {
    --flow-spark-rotate: -12deg;
    top: 26px;
    left: 336px;
    width: 68px;
    height: 48px;
    transform: rotate(var(--flow-spark-rotate));
}

.flow-spark-b {
    top: 242px;
    left: 168px;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    animation-delay: -2s;
}

.flow-spark-c {
    --flow-spark-rotate: 10deg;
    right: 190px;
    bottom: 40px;
    width: 72px;
    height: 40px;
    transform: rotate(var(--flow-spark-rotate));
    animation-delay: -3.5s;
}

.flow-spark-d {
    --flow-spark-rotate: 14deg;
    top: 210px;
    right: 18px;
    width: 58px;
    height: 78px;
    transform: rotate(var(--flow-spark-rotate));
    animation-delay: -4.4s;
}

.flow-spark-e {
    left: 406px;
    bottom: 110px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(84, 231, 187, .30), rgba(255,255,255,.54));
    animation-delay: -5.5s;
}

.flow-core {
    position: absolute;
    z-index: 2;
    right: 146px;
    top: 136px;
    width: 370px;
    padding: 20px;
    border: 1px solid rgba(95, 112, 186, .17);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(247,250,255,.70)),
        radial-gradient(circle at 18% 0, rgba(86, 207, 255, .16), transparent 36%);
    box-shadow: 0 34px 82px rgba(35, 49, 105, .22);
    backdrop-filter: blur(20px);
    transform: perspective(900px) rotateY(-8deg) rotateX(3deg);
    animation: flowCoreFloat 8s ease-in-out infinite alternate;
}

.flow-core-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.flow-core-head strong {
    display: block;
    color: #14203d;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.1;
}

.flow-core-head span {
    display: block;
    margin-top: 4px;
    color: #6b7890;
    font-size: 11px;
    font-weight: 700;
}

.flow-core-head em {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    color: #118d67;
    background: rgba(70, 226, 176, .16);
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .04em;
}

.flow-core-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.flow-product {
    min-width: 0;
    padding: 11px;
    border: 1px solid rgba(103, 119, 180, .12);
    border-radius: 14px;
    background: rgba(255,255,255,.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.flow-product i {
    display: block;
    width: 42px;
    height: 42px;
    margin-bottom: 9px;
    border-radius: 12px;
    background:
        radial-gradient(circle at 64% 36%, rgba(255,255,255,.94) 0 9%, transparent 10%),
        linear-gradient(135deg, #143b83, #215bd7);
}

.flow-product-green i {
    background:
        radial-gradient(circle at 64% 36%, rgba(255,255,255,.94) 0 9%, transparent 10%),
        linear-gradient(135deg, #18a678, #39d49d);
}

.flow-product-orange i {
    background:
        radial-gradient(circle at 64% 36%, rgba(255,255,255,.94) 0 9%, transparent 10%),
        linear-gradient(135deg, #ff8c38, #ffbd55);
}

.flow-product strong,
.flow-product span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-product strong {
    color: #1a2542;
    font-size: 11px;
    font-weight: 900;
}

.flow-product span {
    margin-top: 2px;
    color: #6d7892;
    font-size: 10px;
    font-weight: 750;
}

.flow-ledger {
    display: grid;
    gap: 7px;
    margin-top: 13px;
}

.flow-ledger p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 8px 9px;
    border-radius: 10px;
    background: rgba(244, 247, 255, .78);
}

.flow-ledger span {
    color: #536079;
    font-size: 10px;
    font-weight: 800;
}

.flow-ledger b {
    color: #4860ff;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.flow-card i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: 3px;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(135deg, #4c3fff, #49cfff);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(76, 63, 255, .24);
}

.flow-card strong {
    font-size: 13px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: .02em;
}

.flow-card span {
    color: #66708a;
    font-size: 11px;
    font-weight: 720;
    line-height: 1.3;
}

.flow-card-order {
    --flow-card-rotate: -7deg;
    z-index: 3;
    top: 76px;
    left: 120px;
    transform: rotate(-7deg);
}

.flow-card-pay {
    z-index: 3;
    top: 46px;
    right: 62px;
    animation-delay: -1.6s;
}

.flow-card-code {
    --flow-card-rotate: 6deg;
    z-index: 3;
    right: -8px;
    bottom: 78px;
    transform: rotate(6deg);
    animation-delay: -3.4s;
}

.flow-card-settle {
    z-index: 3;
    left: 286px;
    bottom: 30px;
    animation-delay: -4.6s;
}

@keyframes flowPulse {
    to {
        stroke-dashoffset: -598;
    }
}

@keyframes flowDot {
    50% {
        transform: translate3d(18px, -12px, 0) scale(1.18);
        box-shadow: 0 0 0 9px rgba(81, 111, 255, .08), 0 0 32px rgba(81, 111, 255, .58);
    }
}

@keyframes flowCardFloat {
    to {
        transform: translate3d(0, -10px, 0) rotate(var(--flow-card-rotate, 0deg));
    }
}

@keyframes flowSpark {
    to {
        transform: translate3d(10px, -12px, 0) rotate(var(--flow-spark-rotate, 0deg));
        opacity: .78;
    }
}

@keyframes flowCoreFloat {
    to {
        transform: perspective(900px) translate3d(0, -8px, 0) rotateY(-6deg) rotateX(4deg);
    }
}

.trust-strip {
    padding: 26px 0;
    overflow: hidden;
    background: rgba(255, 255, 255, .74);
    border-top: 1px solid var(--page-line-soft);
    border-bottom: 1px solid var(--page-line-soft);
}

.partner-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.partner-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: partnerMarquee 32s linear infinite;
}

.logo-wall {
    display: flex;
    align-items: center;
    flex: none;
    gap: 58px;
    padding-right: 58px;
}

.logo-wall span {
    display: flex;
    align-items: center;
    flex: none;
    justify-content: flex-start;
    min-height: 36px;
    color: #24304f;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: 0;
    opacity: .88;
}

.logo-wall span::before {
    content: "";
    width: 18px;
    height: 18px;
    margin-right: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-cyan));
}

.logo-wall span:nth-child(3)::before,
.logo-wall span:nth-child(8)::before {
    background: linear-gradient(135deg, #ff3c5f, #ffb15b);
}

.logo-wall span:nth-child(5)::before,
.logo-wall span:nth-child(7)::before {
    background: linear-gradient(135deg, #ff7a1a, #ffcb4d);
}

@keyframes partnerMarquee {
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

.solution {
    padding: 84px 0 38px;
    background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}

.section-heading {
    margin-bottom: 42px;
}

.section-heading.centered {
    text-align: center;
}

.section-heading.compact {
    margin-bottom: 30px;
}

.section-heading h2 {
    margin: 0;
    color: #15203d;
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0;
}

.section-heading span,
.section-heading > p:not(.eyebrow) {
    display: block;
    margin-top: 12px;
    color: #68728b;
    font-size: 15px;
    font-weight: 550;
}

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

.solution-card {
    --card-glow: rgba(91, 76, 255, .16);
    position: relative;
    min-height: 300px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(102, 116, 160, .12);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,255,.86));
    box-shadow: var(--shadow-card);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.solution-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 12% 100%, rgba(255, 158, 91, .18), transparent 29%);
    pointer-events: none;
}

.solution-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 100%, var(--card-glow), transparent 54%);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}

.solution-card:hover {
    transform: translateY(-6px);
    border-color: rgba(91, 76, 255, .23);
    box-shadow: 0 30px 68px rgba(44, 56, 111, .14);
}

.solution-card:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.solution-card-soft {
    background: linear-gradient(135deg, #fff 0%, #f4f7ff 72%, #eef3ff 100%);
}

.solution-card-pink {
    --card-glow: rgba(235, 99, 173, .14);
    background: linear-gradient(135deg, #fff 0%, #fff5fb 55%, #f1edff 100%);
}

.solution-card-purple {
    --card-glow: rgba(255, 255, 255, .24);
    border-color: rgba(86, 68, 245, .42);
    background: linear-gradient(135deg, #5545f4 0%, #7360ff 47%, #b991ff 100%);
    box-shadow: 0 22px 48px rgba(75, 58, 201, .2);
}

.card-title {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.card-title > div {
    min-width: 0;
}

.card-title h3 {
    margin: 0;
    color: #1d2947;
    font-size: 20px;
    font-weight: 900;
}

.card-title p {
    margin: 8px 0 0;
    color: #69728b;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.card-status {
    flex: none;
    padding: 6px 9px;
    color: #5548eb;
    border-radius: 999px;
    background: #f0eeff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.card-title.light h3,
.card-title.light p {
    color: #fff;
}

.card-title.light .card-status {
    color: #fff;
    background: rgba(255, 255, 255, .19);
}

.solution-ui {
    position: relative;
    z-index: 2;
    margin-top: 18px;
    height: 176px;
    overflow: hidden;
    border: 1px solid rgba(230, 234, 248, .92);
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 20px 38px rgba(44, 56, 111, .09);
    transition: transform .35s ease, box-shadow .35s ease;
}

.solution-card:hover .solution-ui {
    transform: translateY(-2px);
    box-shadow: 0 24px 46px rgba(44, 56, 111, .14);
}

.ui-browser-bar {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 0 13px;
    border-bottom: 1px solid #edf0fb;
    background: #fbfcff;
}

.ui-browser-bar i {
    width: 15px;
    height: 15px;
    border-radius: 5px;
    background: linear-gradient(135deg, #584cff, #8e83ff);
}

.ui-browser-bar span {
    width: 33px;
    height: 5px;
    border-radius: 999px;
    background: #dce2fb;
}

.ui-browser-bar b {
    margin-left: auto;
    padding: 4px 8px;
    color: #5448eb;
    border-radius: 999px;
    background: #ebe8ff;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.ui-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    padding: 10px 12px;
}

.ui-product {
    transition: transform .32s ease, box-shadow .32s ease;
}

.ui-product strong {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 64px;
    margin-bottom: 7px;
    color: #fff;
    border-radius: 8px;
    font-weight: 800;
}

.ui-product strong b {
    color: inherit;
    font-size: 15px;
    line-height: 1;
}

.ui-product strong i {
    color: rgba(255, 255, 255, .86);
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
}

.product-music strong b {
    font-size: 15px;
}

.ui-product small,
.ui-product em {
    display: block;
    font-size: 9px;
    font-style: normal;
}

.ui-product small {
    color: #6c7590;
    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;
}

.ui-product em {
    margin-top: 3px;
    color: #1d2947;
    font-weight: 800;
}

.product-game strong { background: linear-gradient(145deg, #11234e, #3873de); }
.product-video strong { background: linear-gradient(145deg, #6727b8, #ee4b97); }
.product-music strong { background: linear-gradient(145deg, #00a58c, #45da9a); }

.solution-card:hover .ui-product:nth-child(1) { transform: translateY(-3px); }
.solution-card:hover .ui-product:nth-child(2) { transform: translateY(-6px); }
.solution-card:hover .ui-product:nth-child(3) { transform: translateY(-3px); }

.ui-stock,
.ui-orders {
    padding: 10px 10px 8px;
}

.stock-head,
.stock-row {
    display: grid;
    grid-template-columns: 1fr 35px 39px;
    align-items: center;
    gap: 5px;
}

.stock-head {
    height: 22px;
    padding: 0 7px;
    color: #65718b;
    border-radius: 7px;
    background: #f7f9ff;
    font-size: 8px;
    font-weight: 700;
}

.stock-row {
    height: 32px;
    padding: 0 6px;
    border-bottom: 1px solid #eef2fb;
    transition: transform .3s ease, background .3s ease;
}

.stock-row strong {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: #293553;
    font-size: 8.5px;
    font-weight: 700;
    white-space: nowrap;
}

.stock-row i {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    color: #fff;
    border-radius: 4px;
    font-size: 8px;
    font-style: normal;
}

.icon-game { background: #3577e3; }
.icon-video { background: #ed4c92; }
.icon-music { background: #18bb87; }
.icon-point { background: #ff9c4d; }

.stock-row b,
.order-row b {
    color: #28324d;
    font-size: 8px;
}

.state-ok,
.state-low,
.state-warn,
.state-send,
.state-done {
    justify-self: end;
    padding: 4px 6px;
    border-radius: 999px;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.state-ok { color: #18a764; background: #def8e9; }
.state-low { color: #f08a36; background: #fff0de; }
.state-warn { color: #ee5974; background: #ffe3e8; }
.state-send { color: #4b65ee; background: #e5ebff; }
.state-done { color: #7252eb; background: #eee8ff; }

.solution-card:hover .stock-row:nth-child(3),
.solution-card:hover .stock-row:nth-child(5) {
    transform: translateX(3px);
    background: rgba(244, 246, 255, .75);
}

.solution-card:hover .stock-row .state-warn {
    animation: stockAlert .76s ease-in-out infinite alternate;
}

@keyframes stockAlert {
    to {
        box-shadow: 0 0 0 3px rgba(238, 89, 116, .12);
    }
}

.order-head,
.order-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px 43px;
    align-items: center;
    gap: 4px;
}

.order-head {
    height: 22px;
    padding: 0 7px;
    color: #65718b;
    border-radius: 7px;
    background: #f7f9ff;
    font-size: 8px;
    font-weight: 700;
}

.order-row {
    height: 32px;
    padding: 0 6px;
    border-bottom: 1px solid #eef2fb;
    transition: transform .3s ease, background .3s ease;
}

.order-row strong {
    overflow: hidden;
    color: #28324d;
    font-size: 7.5px;
    font-weight: 700;
    white-space: nowrap;
}

.solution-card:hover .order-row:nth-child(3) {
    transform: translateX(4px);
    background: #f7f9ff;
}

.ui-support {
    padding: 10px 11px;
}

.support-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 25px;
    margin-bottom: 6px;
    color: #6a7590;
    font-size: 8px;
    font-weight: 700;
}

.support-tabs strong {
    position: relative;
    color: #5447ff;
}

.support-tabs strong::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: 2px;
    border-radius: 99px;
    background: #5b4dff;
}

.ticket-row {
    display: grid;
    grid-template-columns: 83px 1fr 42px;
    align-items: center;
    gap: 5px;
    height: 40px;
    padding: 0 7px;
    border-top: 1px solid #eef2fb;
    color: #293553;
    transition: background .3s ease, transform .3s ease;
}

.ticket-row b,
.ticket-row span {
    overflow: hidden;
    font-size: 7.5px;
    white-space: nowrap;
}

.solution-card:hover .ticket-row:first-of-type {
    transform: translateX(3px);
    background: #fffbf7;
}

.ui-delivery {
    height: 174px;
    padding: 9px 11px;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.delivery-steps {
    display: flex;
    align-items: center;
    height: 70px;
    padding: 0 10px;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(48, 35, 120, .1);
}

.delivery-steps span {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: none;
    gap: 4px;
    color: #2a3652;
}

.delivery-steps i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    color: #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, #6659ff, #8d80ff);
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
}

.delivery-steps small {
    font-size: 7px;
    font-weight: 700;
    white-space: nowrap;
}

.delivery-steps .success i {
    background: #2dce88;
}

.delivery-progress {
    position: relative;
    flex: 1;
    height: 2px;
    margin: -14px 5px 0;
    overflow: hidden;
    background: #e7e3ff;
}

.delivery-progress::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 36%;
    background: #7467ff;
    transition: width .55s ease;
}

.delivery-progress.second::after {
    width: 62%;
    background: #38ca89;
}

.solution-card:hover .delivery-progress::after {
    width: 100%;
    box-shadow: 0 0 10px rgba(116, 103, 255, .56);
}

.solution-card:hover .delivery-steps .success i {
    transform: scale(1.08);
    transition: transform .32s ease .18s;
}

.delivery-secret {
    margin-top: 10px;
    padding: 10px 11px;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(48, 35, 120, .1);
}

.delivery-secret label {
    display: block;
    margin-bottom: 7px;
    color: #3d4964;
    font-size: 8px;
    font-weight: 800;
}

.delivery-secret div {
    display: flex;
    gap: 7px;
}

.delivery-secret code {
    flex: 1;
    padding: 8px 7px;
    color: #293553;
    border-radius: 7px;
    background: #f3f5ff;
    font-size: 8px;
}

.delivery-secret button {
    padding: 0 11px;
    color: #fff;
    border: 0;
    border-radius: 7px;
    background: #5c4fff;
    font-size: 8px;
    font-weight: 700;
}

.solution-card-purple:hover .ui-delivery {
    box-shadow: none;
}

.ui-report {
    padding: 11px;
}

.report-overview {
    display: flex;
    justify-content: space-between;
    height: 91px;
}

.report-income small {
    display: block;
    color: #647089;
    font-size: 8px;
    font-weight: 700;
}

.report-income strong {
    display: block;
    margin-top: 3px;
    color: #172340;
    font-size: 15px;
}

.report-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 35px;
    margin-top: 8px;
}

.report-bars i {
    width: 8px;
    height: var(--bar-height);
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #8173ff, #5649ed);
    transform: scaleY(.72);
    transform-origin: bottom;
    transition: transform .42s ease;
}

.report-bars i:nth-child(1) { --bar-height: 17px; }
.report-bars i:nth-child(2) { --bar-height: 29px; }
.report-bars i:nth-child(3) { --bar-height: 22px; }
.report-bars i:nth-child(4) { --bar-height: 35px; }
.report-bars i:nth-child(5) { --bar-height: 25px; }
.report-bars i:nth-child(6) { --bar-height: 30px; }

.solution-card:hover .report-bars i {
    transform: scaleY(1);
}

.report-ring {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-top: 10px;
}

.report-ring i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(#594cff 0 56%, #ff8799 56% 68%, #ffc27c 68% 80%, #e8ebfb 80% 100%);
    transition: transform .5s ease;
}

.report-ring i::after {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: inherit;
    background: #fff;
}

.report-ring small {
    position: relative;
    z-index: 1;
    color: #584cff;
    font-size: 8px;
    font-weight: 800;
}

.solution-card:hover .report-ring i {
    transform: rotate(16deg);
}

.report-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-top: 8px;
}

.report-stats span {
    padding: 7px 5px;
    border-radius: 7px;
    background: #f6f8ff;
}

.report-stats small {
    display: block;
    color: #69738c;
    font-size: 7px;
    white-space: nowrap;
}

.report-stats strong {
    display: block;
    margin-top: 3px;
    color: #26324f;
    font-size: 11px;
}

.mock {
    position: relative;
    z-index: 2;
    margin-top: 22px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 24px 54px rgba(44, 56, 111, .12);
}

.mock-shop {
    min-height: 176px;
    padding: 20px;
}

.shop-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 30px;
    margin-bottom: 20px;
    padding: 0 12px;
    border-radius: 9px;
    background: #f2f5ff;
}

.shop-toolbar i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #5f53ff;
}

.shop-toolbar span {
    width: 72px;
    height: 7px;
    border-radius: 999px;
    background: #d8ddf3;
}

.shop-toolbar b {
    width: 36px;
    height: 14px;
    margin-left: auto;
    border-radius: 999px;
    background: #dedaff;
}

.shop-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.shop-products span {
    height: 82px;
    border-radius: 12px;
    background: linear-gradient(145deg, #edf2ff, #d9dfff);
}

.shop-products span:nth-child(2) {
    background: linear-gradient(145deg, #f0ebff, #cfc4ff);
}

.shop-products span:nth-child(3) {
    background: linear-gradient(145deg, #fff0eb, #ffe0d2);
}

.mock-inventory {
    display: grid;
    align-content: center;
    gap: 14px;
    min-height: 176px;
    padding: 22px;
}

.inventory-head,
.inventory-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px 38px;
    align-items: center;
    gap: 12px;
}

.inventory-head span,
.inventory-head i,
.inventory-head b {
    height: 9px;
    border-radius: 999px;
    background: #e7ebfc;
}

.inventory-row span,
.inventory-row i {
    height: 12px;
    border-radius: 999px;
    background: #eef2ff;
}

.inventory-row i {
    background: #d9d3ff;
}

.inventory-row b {
    height: 18px;
    border-radius: 999px;
    background: #def8ea;
}

.inventory-row:nth-child(3) b {
    background: #fff0de;
}

.inventory-row:nth-child(4) b {
    background: #e8e3ff;
}

.mock-dashboard {
    display: grid;
    grid-template-columns: 58px 1fr;
    min-height: 170px;
    overflow: hidden;
}

.mock-sidebar {
    background: linear-gradient(180deg, #eff3ff, #f7f9ff);
    border-right: 1px solid #eef1fb;
}

.mock-sidebar::before {
    content: "";
    display: block;
    width: 26px;
    height: 88px;
    margin: 26px auto;
    border-radius: 999px;
    background: repeating-linear-gradient(180deg, #6257ff 0 8px, transparent 8px 21px);
}

.mock-main {
    padding: 20px;
}

.mock-topbar {
    width: 52%;
    height: 12px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: #eef2ff;
}

.mock-main strong {
    display: block;
    color: #1d2947;
    font-size: 24px;
    letter-spacing: 0;
}

.mock-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 56px;
    margin-top: 18px;
}

.mock-chart i {
    flex: 1;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(180deg, #7d73ff, #d7d2ff);
}

.mock-chart i:nth-child(1) { height: 42%; }
.mock-chart i:nth-child(2) { height: 72%; }
.mock-chart i:nth-child(3) { height: 52%; }
.mock-chart i:nth-child(4) { height: 88%; }
.mock-chart i:nth-child(5) { height: 65%; }

.mock-bars {
    display: flex;
    gap: 8px;
    margin-top: 18px;
}

.mock-bars span {
    flex: 1;
    height: 20px;
    border-radius: 6px;
    background: #f0f3ff;
}

.mock-table {
    display: grid;
    grid-template-columns: .7fr 1fr 1fr .6fr;
    gap: 12px;
    min-height: 176px;
    padding: 22px;
}

.mock-table div {
    height: 12px;
    border-radius: 999px;
    background: #e9edff;
}

.mock-table div:nth-child(4n + 1) {
    background: #4c3fff;
    opacity: .22;
}

.mock-table div:nth-child(4n) {
    background: #ff9e5b;
    opacity: .68;
}

.mock-list {
    min-height: 174px;
    padding: 22px;
}

.mock-list span {
    display: block;
    height: 14px;
    margin-bottom: 17px;
    border-radius: 999px;
    background: linear-gradient(90deg, #e6eaff 0 72%, #6d5cff 72% 100%);
}

.mock-list span:nth-child(2n) {
    background: linear-gradient(90deg, #edf1ff 0 60%, #bcaeff 60% 100%);
}

.mock-support {
    display: grid;
    align-content: center;
    gap: 14px;
    min-height: 176px;
    padding: 20px;
}

.support-ticket {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) 54px;
    align-items: center;
    gap: 12px;
    height: 35px;
    padding: 0 10px;
    border-radius: 10px;
    background: #f5f7ff;
}

.support-ticket i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff9e5b;
}

.support-ticket:nth-child(2) i {
    background: #37d989;
}

.support-ticket:nth-child(3) i {
    background: #6d5cff;
}

.support-ticket span {
    height: 8px;
    border-radius: 999px;
    background: #e5eaff;
}

.support-ticket b {
    color: #6b738b;
    font-size: 10px;
    font-weight: 700;
}

.mock-analytics {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 176px;
    padding: 22px;
}

.analytics-line {
    width: 58%;
    height: 92px;
    border-radius: 16px;
    background:
        linear-gradient(135deg, transparent 42%, rgba(76,63,255,.48) 43% 48%, transparent 49%),
        linear-gradient(26deg, transparent 38%, rgba(76,63,255,.34) 39% 44%, transparent 45%),
        #f3f6ff;
}

.analytics-ring {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: conic-gradient(#4c3fff 0 72%, #eef2ff 72% 100%);
    box-shadow: inset 0 0 0 24px #fff;
}

.mock-store {
    min-height: 176px;
    padding: 22px;
    background: rgba(255,255,255,.92);
}

.store-toolbar {
    height: 34px;
    margin-bottom: 22px;
    border-radius: 10px;
    background: linear-gradient(90deg, #4c3fff 0 62%, #fff 62% 100%);
}

.store-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.store-products span {
    height: 92px;
    border-radius: 16px;
    background: linear-gradient(135deg, #111936, #28345e);
}

.store-products span:nth-child(2) {
    background: linear-gradient(135deg, #0d0e14, #ff3366);
}

.store-products span:nth-child(3) {
    background: linear-gradient(135deg, #21d36b, #c7ffde);
}

.mock-code {
    min-height: 176px;
    padding: 26px;
}

.mock-code strong,
.mock-code code,
.mock-code button {
    display: block;
}

.mock-code strong {
    color: #24304f;
    font-size: 16px;
    font-weight: 900;
}

.mock-code code {
    margin: 20px 0;
    padding: 14px 16px;
    color: #1b2442;
    border-radius: 12px;
    background: #f2f5ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.mock-code button {
    margin-left: auto;
    padding: 9px 18px;
    color: #fff;
    border: 0;
    border-radius: 10px;
    background: var(--color-primary);
}

.mock-delivery {
    min-height: 176px;
    padding: 20px;
}

.delivery-flow {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 47px;
    padding: 0 12px;
    border-radius: 11px;
    background: #f2f0ff;
}

.delivery-flow span,
.delivery-flow b {
    color: #493de0;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.delivery-flow b {
    color: #1f9867;
}

.delivery-flow i {
    position: relative;
    flex: 1;
    height: 2px;
    background: #beb4ff;
}

.delivery-flow i::after {
    content: "";
    position: absolute;
    top: -4px;
    right: 0;
    border-width: 5px 0 5px 7px;
    border-style: solid;
    border-color: transparent transparent transparent #8d7dff;
}

.delivery-code {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 14px 12px;
    border-radius: 11px;
    background: #f8f9ff;
}

.delivery-code code {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: #283458;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    white-space: nowrap;
}

.delivery-code strong {
    flex: none;
    padding: 5px 8px;
    color: #fff;
    border-radius: 999px;
    background: #37c984;
    font-size: 10px;
}

.site-shell main {
    z-index: auto;
}

.solution-v2 {
    position: relative;
    z-index: 3;
    padding: 70px 0 42px;
    background: linear-gradient(180deg, #fff 0%, #fcfdff 100%);
}

.solution-v2 .section-heading,
.solution-v2 .solution-grid {
    width: 100%;
}

.solution-v2 .section-heading {
    margin-bottom: 32px;
}

.solution-v2 .section-heading h2 {
    font-size: 42px;
    line-height: 1.18;
}

.solution-v2 .section-heading span {
    margin-top: 13px;
    font-size: 15px;
}

.chain-icon-library {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.solution-v2 .solution-grid {
    gap: 18px;
}

.solution-v2 .chain-card {
    min-height: 344px;
    padding: 22px 18px 19px;
    border-color: rgba(113, 126, 166, .15);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 14px 40px rgba(35, 45, 86, .07);
}

.solution-v2 .chain-card:nth-child(n+4) {
    min-height: 370px;
}

.solution-v2 .chain-card::before {
    display: none;
}

.solution-v2 .chain-card::after {
    background: radial-gradient(circle at 50% 104%, rgba(83, 69, 244, .08), transparent 58%);
}

.solution-v2 .chain-card:hover {
    transform: translateY(-5px);
    border-color: rgba(83, 69, 244, .24);
    box-shadow: 0 27px 60px rgba(40, 48, 93, .12);
}

.chain-title {
    position: relative;
    z-index: 2;
}

.chain-title h3 {
    margin: 0;
    color: #15203d;
    font-size: 20px;
    font-weight: 900;
}

.chain-title p {
    margin: 7px 0 0;
    color: #6b7690;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.chain-title.light h3,
.chain-title.light p {
    color: #fff;
}

.chain-panel {
    position: relative;
    z-index: 2;
    height: 235px;
    margin-top: 13px;
    overflow: hidden;
    border: 1px solid #e8edf8;
    border-radius: 11px;
    background: #fff;
    transition: transform .34s ease, box-shadow .34s ease;
}

.chain-card:nth-child(n+4) .chain-panel {
    height: 261px;
}

.chain-card:hover .chain-panel {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(38, 47, 91, .08);
}

.store-preview {
    padding: 11px 13px;
}

.store-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    padding-bottom: 11px;
    border-bottom: 1px solid #edf1fa;
}

.store-mark {
    display: block;
    flex: none;
    width: 27px;
    height: 27px;
    margin-right: 2px;
    color: #5a4dff;
}

.store-brand strong {
    color: #202c4b;
    font-size: 12px;
    font-weight: 800;
}

.store-brand em {
    padding: 5px 7px;
    color: #594dff;
    border-radius: 5px;
    background: #eeecff;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
}

.store-brand b {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: #5c50ee;
    font-size: 9px;
}

.store-brand b i {
    width: 5px;
    height: 5px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
}

.store-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.store-item {
    transition: transform .35s ease;
}

.product-cover {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 106px;
    border-radius: 8px;
    color: #fff;
}

.product-cover b {
    margin-top: 8px;
    color: #fff;
    font-size: 12px;
}

.product-cover svg {
    display: block;
    width: 46px;
    height: 46px;
    color: #fff;
}

.steam-item .product-cover {
    background: linear-gradient(145deg, #092555, #1764a3);
}

.video-item .product-cover {
    background: linear-gradient(145deg, #10133f, #3c194d);
}

.video-item .product-cover svg {
    width: 55px;
    height: 55px;
}

.spotify-item .product-cover {
    background: linear-gradient(145deg, #13aa75, #58dbab);
}

.spotify-item .product-cover svg {
    width: 54px;
    height: 54px;
}

.store-item > strong,
.store-item > em {
    display: block;
    margin: 9px 0 0 5px;
    color: #26324e;
    font-size: 10px;
    font-style: normal;
}

.store-item > em {
    margin-top: 7px;
    font-weight: 900;
}

.chain-card:hover .store-item:nth-child(1) { transform: translateY(-3px); }
.chain-card:hover .store-item:nth-child(2) { transform: translateY(-6px); }
.chain-card:hover .store-item:nth-child(3) { transform: translateY(-3px); }

.inventory-preview,
.order-preview {
    padding: 10px 12px 0;
}

.inventory-header,
.inventory-line {
    display: grid;
    grid-template-columns: 1.18fr 1.42fr .72fr .43fr;
    align-items: center;
    gap: 8px;
}

.inventory-header {
    height: 27px;
    color: #69758e;
    font-size: 8px;
    font-weight: 800;
}

.inventory-line {
    height: 46px;
    border-top: 1px solid #eff2fa;
}

.inventory-line strong,
.order-line strong {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
    color: #283450;
    font-size: 9px;
    white-space: nowrap;
}

.sku {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    color: #fff;
    border-radius: 5px;
    font-size: 9px;
    font-style: normal;
}

.sku svg {
    display: block;
    width: 12px;
    height: 12px;
    color: #fff;
}

.video-sku svg {
    width: 13px;
    height: 13px;
}

.steam-sku { background: #22539a; }
.video-sku { background: linear-gradient(135deg, #22bfbc, #5d4ef7); }
.spotify-sku { background: #25bd78; }
.shop-sku { background: #ed3f44; }

.inventory-line code {
    overflow: hidden;
    color: #3b4763;
    font-size: 9px;
    white-space: nowrap;
}

.inventory-line em,
.order-line em,
.service-line em {
    justify-self: start;
    padding: 5px 7px;
    border-radius: 5px;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.inventory-line b {
    color: #34415e;
    font-size: 10px;
}

.stock-enough { color: #1da767; background: #dbf7e8; }
.stock-tight { color: #f08a39; background: #fff0e0; }
.stock-short { color: #ed576e; background: #ffe3e8; }

.chain-card:hover .stock-tight,
.chain-card:hover .stock-short {
    animation: chainStockPulse .8s ease-in-out infinite alternate;
}

@keyframes chainStockPulse {
    to { box-shadow: 0 0 0 4px rgba(241, 102, 74, .11); }
}

.order-header,
.order-line {
    display: grid;
    grid-template-columns: 1.38fr 1.4fr .7fr .78fr .9fr;
    align-items: center;
    gap: 7px;
}

.order-header {
    height: 27px;
    color: #69758e;
    font-size: 8px;
    font-weight: 800;
}

.order-line {
    height: 38px;
    border-top: 1px solid #eff2fa;
}

.order-line > b,
.order-line code,
.order-line small {
    overflow: hidden;
    color: #27334e;
    font-size: 8px;
    white-space: nowrap;
}

.order-line code {
    font-weight: 800;
}

.order-line small {
    color: #7b859b;
}

.order-finished { color: #1da767; background: #dbf7e8; }
.order-shipped { color: #4661e9; background: #e7ecff; }
.order-delivered { color: #654cef; background: #ece8ff; }
.order-wait { color: #f18a36; background: #fff0df; }
.order-closed { color: #7d879d; background: #eef1f7; }

.chain-card:hover .order-line:nth-child(3) {
    background: #f7f8ff;
    transform: translateX(3px);
}

.aftersale-preview {
    padding: 8px 13px 0;
}

.aftersale-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 34px;
    border-bottom: 1px solid #edf1fa;
    color: #778197;
    font-size: 9px;
    font-weight: 700;
}

.aftersale-tabs strong {
    position: relative;
    color: #5446f5;
}

.aftersale-tabs strong::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -12px;
    left: 0;
    height: 2px;
    background: #5547f5;
}

.service-line {
    display: grid;
    grid-template-columns: 10px 1.15fr 1.25fr .8fr .92fr;
    align-items: center;
    gap: 7px;
    height: 42px;
    border-bottom: 1px solid #eff2fa;
}

.service-line > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.dot-wait { background: #ff9d39; }
.dot-work { background: #526dff; }
.dot-done { background: #31be80; }
.dot-off { background: #aeb6ca; }

.service-line b,
.service-line strong,
.service-line small {
    overflow: hidden;
    color: #2c3854;
    font-size: 8px;
    white-space: nowrap;
}

.service-line small {
    color: #79849b;
}

.ticket-wait { color: #ef8b35; background: #fff0df; }
.ticket-work { color: #4a65e8; background: #e7edff; }
.ticket-done { color: #1ba766; background: #def7ea; }
.ticket-off { color: #7a8599; background: #eef2f7; }

.chain-card:hover .service-line:nth-child(2) {
    background: #fffaf4;
    transform: translateX(3px);
}

.solution-v2 .chain-card-delivery {
    border-color: rgba(85, 67, 240, .42);
    background: linear-gradient(135deg, #5544ef 0%, #7562fc 47%, #ae86f7 100%);
    box-shadow: 0 21px 44px rgba(73, 55, 202, .21);
}

.solution-v2 .chain-card-delivery::after {
    background: radial-gradient(circle at 50% 100%, rgba(255, 255, 255, .19), transparent 62%);
}

.delivery-route {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    height: 117px;
    margin-top: 25px;
    padding: 0 29px;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 15px 34px rgba(43, 32, 117, .13);
}

.route-node {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #35415c;
    font-size: 10px;
    font-weight: 700;
}

.route-node i {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b4af5, #8e82ff);
    box-shadow: 0 9px 18px rgba(91, 74, 245, .25);
}

.route-node i svg {
    display: block;
    width: 25px;
    height: 25px;
    color: #fff;
}

.finish-node i {
    background: linear-gradient(135deg, #2dbb79, #65dba5);
}

.finish-node i svg {
    width: 26px;
    height: 26px;
}

.route-link {
    position: relative;
    flex: 1;
    height: 2px;
    margin: -21px 11px 0;
    background: #dbd6ff;
    overflow: hidden;
}

.route-link::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 64%;
    background: #6253f7;
    transition: width .5s ease;
}

.route-complete::after {
    background: #35c785;
}

.chain-card-delivery:hover .route-link::after {
    width: 100%;
    box-shadow: 0 0 10px rgba(84, 235, 163, .54);
}

.delivered-key {
    position: relative;
    z-index: 2;
    margin-top: 17px;
    padding: 15px 18px;
    border-radius: 13px;
    background: #fff;
}

.delivered-title,
.delivered-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.delivered-title span {
    color: #37435d;
    font-size: 11px;
    font-weight: 700;
}

.delivered-title em {
    padding: 5px 9px;
    color: #1ca967;
    border-radius: 5px;
    background: #ddf7e9;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
}

.delivered-value {
    gap: 12px;
    margin-top: 13px;
}

.delivered-value code {
    flex: 1;
    padding: 13px 12px;
    color: #4d5b72;
    border-radius: 8px;
    background: #f4f6fd;
    font-size: 12px;
}

.delivered-value b {
    padding: 13px 18px;
    color: #fff;
    border-radius: 7px;
    background: #5748ef;
    font-size: 11px;
}

.dashboard-preview {
    height: 261px;
    padding: 12px 13px 0;
}

.dashboard-top {
    display: flex;
    justify-content: space-between;
    height: 92px;
}

.revenue-block small,
.revenue-block span {
    display: block;
    color: #71809a;
    font-size: 9px;
    font-weight: 700;
}

.revenue-block strong {
    display: block;
    margin: 7px 0;
    color: #14203c;
    font-size: 20px;
}

.revenue-block strong em {
    margin-left: 6px;
    color: #1eaf72;
    font-size: 10px;
    font-style: normal;
}

.sales-ring {
    display: flex;
    gap: 11px;
    align-items: center;
}

.sales-ring > i {
    position: relative;
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: conic-gradient(#5164e9 0 52%, #7658eb 52% 65%, #44c88a 65% 77%, #ff973d 77% 89%, #f24d48 89% 96%, #eef1f8 96%);
    transition: transform .45s ease;
}

.sales-ring > i::after {
    content: "";
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    background: #fff;
}

.sales-ring ul {
    margin: 0;
    padding: 0;
    color: #47536d;
    font-size: 8px;
    font-weight: 700;
    list-style: none;
}

.sales-ring li {
    position: relative;
    margin: 6px 0;
    padding-left: 12px;
}

.sales-ring li::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #5264ea;
}

.sales-ring li:nth-child(2)::before { background: #7658eb; }
.sales-ring li:nth-child(3)::before { background: #44c88a; }
.sales-ring li:nth-child(4)::before { background: #ff973d; }

.sales-ring b {
    margin-left: 5px;
}

.trend-bars {
    position: relative;
    display: flex;
    align-items: end;
    gap: 12px;
    height: 66px;
    margin: 7px 10px 0 5px;
    padding-bottom: 11px;
    border-bottom: 1px solid #edf1fb;
}

.trend-bars i {
    width: 11px;
    height: var(--trend-height);
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #887cff, #5346ee);
    transform: scaleY(.78);
    transform-origin: bottom;
    transition: transform .4s ease;
}

.trend-bars i:nth-child(1) { --trend-height: 16px; }
.trend-bars i:nth-child(2) { --trend-height: 27px; }
.trend-bars i:nth-child(3) { --trend-height: 23px; }
.trend-bars i:nth-child(4) { --trend-height: 30px; }
.trend-bars i:nth-child(5) { --trend-height: 38px; }
.trend-bars i:nth-child(6) { --trend-height: 29px; }
.trend-bars i:nth-child(7) { --trend-height: 50px; }
.trend-bars i:nth-child(8) { --trend-height: 31px; }
.trend-bars i:nth-child(9) { --trend-height: 40px; }
.trend-bars i:nth-child(10) { --trend-height: 56px; }

.trend-bars small {
    position: absolute;
    right: 27px;
    top: -7px;
    padding: 3px 5px;
    color: #5964d9;
    border: 1px solid #dce0f5;
    border-radius: 4px;
    background: #fff;
    font-size: 7px;
}

.chain-card-report:hover .trend-bars i {
    transform: scaleY(1);
}

.chain-card-report:hover .sales-ring > i {
    transform: rotate(14deg);
}

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 -13px;
}

.dashboard-metrics span {
    min-height: 65px;
    padding: 11px 10px;
    border-right: 1px solid #edf1fa;
}

.dashboard-metrics small {
    display: block;
    color: #72809a;
    font-size: 8px;
}

.dashboard-metrics strong {
    display: block;
    margin-top: 5px;
    color: #182440;
    font-size: 15px;
}

.dashboard-metrics em {
    display: block;
    margin-top: 3px;
    color: #1ba967;
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
}

.gift-banner {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 150px;
    margin-top: 40px;
    padding: 30px 58px;
    overflow: hidden;
    color: #fff;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 82% 45%, rgba(255, 255, 255, .32), transparent 24%),
        linear-gradient(135deg, #3928e8 0%, #653df1 46%, #d08dff 100%);
    box-shadow: 0 30px 70px rgba(76,63,255,.28);
}

.gift-banner h3 {
    margin: 0;
    font-size: 26px;
    font-weight: 900;
}

.gift-banner p {
    margin: 8px 0 18px;
    color: rgba(255,255,255,.78);
    font-size: 15px;
}

.gift-banner a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 0 18px;
    color: var(--color-primary);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 850;
}

.gift-art {
    position: relative;
    width: 240px;
    height: 110px;
}

.gift-art span {
    position: absolute;
    right: 54px;
    bottom: 0;
    width: 92px;
    height: 74px;
    border-radius: 16px;
    background: linear-gradient(135deg, #fff, #d9d2ff);
    box-shadow: 0 18px 40px rgba(17, 25, 54, .24);
}

.gift-art span::before,
.gift-art span::after {
    content: "";
    position: absolute;
    background: #8e78ff;
}

.gift-art span::before {
    left: 41px;
    top: 0;
    width: 10px;
    height: 74px;
}

.gift-art span::after {
    left: 0;
    top: 28px;
    width: 92px;
    height: 10px;
}

.gift-art i,
.gift-art b {
    position: absolute;
    border-radius: 22px;
    transform: rotate(-18deg);
}

.gift-art i {
    left: 22px;
    bottom: 24px;
    width: 68px;
    height: 68px;
    background: rgba(255,255,255,.18);
}

.gift-art b {
    right: 0;
    top: 12px;
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,.24);
}

.stats-panel {
    position: relative;
    min-height: 260px;
    padding: 62px 0 70px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 120%, rgba(69, 101, 255, .42), transparent 42%),
        linear-gradient(180deg, #06122b 0%, #07183a 100%);
}

.stats-wave {
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: -40px;
    height: 170px;
    opacity: .55;
    background:
        repeating-radial-gradient(ellipse at center, transparent 0 12px, rgba(95, 119, 255, .35) 13px 14px, transparent 15px 27px);
    transform: rotate(-2deg) scaleY(.45);
}

.stats-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    text-align: center;
}

.stats-grid div {
    padding: 20px;
}

.stats-grid strong {
    display: block;
    color: #fff;
    font-size: clamp(38px, 4.5vw, 58px);
    font-weight: 850;
    letter-spacing: 0;
}

.stats-grid span {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, .72);
    font-size: 18px;
    font-weight: 700;
}

.merchant-section {
    padding: 68px 0 66px;
    background: #fff;
}

.growth-layout {
    display: grid;
    grid-template-columns: minmax(0, 572px) minmax(390px, 448px);
    justify-content: center;
    align-items: center;
    gap: 78px;
}

.fund-panel {
    position: relative;
    min-height: 440px;
    padding: 21px;
    border: 1px solid #e5eaf5;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 22px 48px rgba(18, 33, 69, .07);
}

.fund-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
}

.fund-panel-head strong {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #121d3b;
    font-size: 15px;
    font-weight: 850;
}

.fund-panel-head strong i {
    display: grid;
    place-items: center;
    width: 33px;
    height: 33px;
    color: #fff;
    border-radius: 9px;
    background: linear-gradient(135deg, #5947ff, #8275ff);
}

.fund-panel-head svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
}

.fund-panel-head > span {
    padding: 8px 16px;
    color: #5847ed;
    border-radius: 999px;
    background: #f1efff;
    font-size: 11px;
    font-weight: 800;
}

.fund-metrics {
    display: grid;
    grid-template-columns: 1.16fr .92fr .92fr;
    gap: 10px;
    margin-bottom: 14px;
}

.fund-metric {
    min-height: 73px;
    padding: 12px 13px;
    border-radius: 9px;
    background: #f6f8fd;
}

.fund-metric.fund-primary {
    background: #f1efff;
}

.fund-metric small {
    display: block;
    margin-bottom: 7px;
    color: #66758e;
    font-size: 11px;
    font-weight: 700;
}

.fund-metric strong {
    color: #101b39;
    font-size: 20px;
    font-weight: 900;
    white-space: nowrap;
}

.fund-metric:not(.fund-primary) strong {
    font-size: 18px;
}

.fund-metric em {
    margin-left: 6px;
    color: #1eae76;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

.fund-activity {
    display: grid;
    grid-template-columns: minmax(0, 1.52fr) minmax(146px, .84fr);
    gap: 13px;
    margin-bottom: 14px;
}

.fund-chart,
.fund-ledger {
    height: 160px;
    padding: 13px 13px 10px;
    border: 1px solid #e9eef7;
    border-radius: 10px;
    background: #fff;
}

.fund-chart > div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
}

.fund-chart strong,
.fund-ledger > strong {
    color: #1a2644;
    font-size: 11px;
    font-weight: 800;
}

.fund-chart span {
    color: #18ae75;
    font-size: 10px;
    font-weight: 800;
}

.fund-chart svg {
    display: block;
    width: 100%;
    height: 106px;
    overflow: visible;
}

.fund-grid {
    fill: none;
    stroke: #edf1fa;
    stroke-width: 1;
}

.fund-graph {
    fill: none;
    stroke: #5947ff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fund-chart circle {
    fill: #5947ff;
}

.fund-ledger p {
    display: grid;
    grid-template-columns: 7px 1fr auto;
    gap: 7px;
    align-items: center;
    margin: 15px 0 0;
    color: #67768f;
    font-size: 10px;
    font-weight: 700;
}

.fund-ledger p i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #20bb81;
}

.fund-ledger p:nth-of-type(2) i {
    background: #287be8;
}

.fund-ledger p:nth-of-type(3) i {
    background: #ff9750;
}

.fund-ledger p b {
    color: #14203c;
    font-size: 10px;
}

.fund-settle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 65px;
    padding: 0 14px;
    border-radius: 9px;
    background: #f6f8fe;
}

.fund-settle small {
    display: block;
    margin-bottom: 5px;
    color: #66758e;
    font-size: 11px;
    font-weight: 700;
}

.fund-settle strong {
    color: #101b39;
    font-size: 16px;
    font-weight: 900;
}

.fund-settle button {
    min-width: 115px;
    min-height: 39px;
    color: #fff;
    border: 0;
    border-radius: 8px;
    background: #5947ff;
    box-shadow: 0 8px 17px rgba(89, 71, 255, .16);
    font-size: 12px;
    font-weight: 800;
}

.growth-copy .eyebrow {
    margin-bottom: 15px;
}

.growth-copy h2 {
    margin: 0;
    color: #15203d;
    font-size: 39px;
    font-weight: 900;
    line-height: 1.27;
    letter-spacing: 0;
}

.growth-copy > p:not(.eyebrow) {
    margin: 15px 0 0;
    color: #68728b;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.8;
}

.growth-benefits {
    display: grid;
    gap: 14px;
    padding: 0;
    margin: 25px 0 0;
    list-style: none;
}

.growth-benefits li {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    align-items: center;
}

.growth-benefits i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: #fff;
    border-radius: 10px;
    background: #5947ff;
    box-shadow: 0 9px 20px rgba(76,63,255,.18);
}

.growth-benefits li:nth-child(2) i {
    background: #287ae8;
}

.growth-benefits li:nth-child(3) i {
    background: #20af80;
}

.growth-benefits li:nth-child(4) i {
    background: #1b2746;
}

.growth-benefits svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.growth-benefits strong {
    display: block;
    color: #1d2947;
    font-size: 14px;
    font-weight: 900;
}

.growth-benefits span {
    display: block;
    margin-top: 3px;
    color: #6a738d;
    font-size: 12px;
    font-weight: 600;
}

.category-section {
    padding: 48px 0 72px;
    background: linear-gradient(180deg, #fbfcff, #fff);
}

.category-section .section-heading {
    margin-bottom: 28px;
}

.category-section .section-heading h2 {
    font-size: 30px;
}

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

.category-row a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 102px;
    padding: 18px 14px;
    color: #15203e;
    border: 1px solid #e5eaf5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 13px 28px rgba(18,33,69,.045);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.category-row a:hover {
    border-color: rgba(89, 71, 255, .25);
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(18,33,69,.08);
}

.category-row i {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    color: #fff;
    border-radius: 9px;
    background: #5947ff;
}

.category-row a:nth-child(2) i {
    background: #ff814b;
}

.category-row a:nth-child(3) i {
    background: #20b182;
}

.category-row a:nth-child(4) i {
    background: #1b2746;
}

.category-row a:nth-child(5) i {
    background: #287be8;
}

.category-row svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.category-row strong,
.category-row span {
    display: block;
}

.category-row strong {
    font-size: 14px;
    font-weight: 900;
}

.category-row span {
    margin-top: 7px;
    color: #67758e;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.tech-section {
    position: relative;
    padding: 76px 0 66px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 10% 18%, rgba(79, 100, 234, .26), transparent 34%),
        radial-gradient(circle at 86% 6%, rgba(95, 72, 214, .22), transparent 32%),
        linear-gradient(110deg, #071632 0%, #07152e 48%, #0a1938 100%);
}

.tech-section::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .28;
    background-image:
        linear-gradient(rgba(137, 158, 221, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(137, 158, 221, .1) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

.tech-section .container {
    position: relative;
    z-index: 1;
}

.section-heading.light h2,
.section-heading.light span {
    color: #fff;
}

.section-heading.light span {
    color: rgba(255, 255, 255, .68);
}

.tech-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 34px;
    margin-bottom: 32px;
}

.tech-heading .section-heading {
    max-width: 690px;
    margin-bottom: 0;
}

.tech-heading .section-heading h2 {
    font-size: 38px;
}

.tech-heading .section-heading span {
    margin-top: 12px;
    line-height: 1.75;
}

.system-status {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 265px;
    padding: 13px 15px;
    border: 1px solid rgba(119, 145, 220, .22);
    border-radius: 12px;
    background: rgba(255, 255, 255, .045);
}

.system-status > i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2bd58f;
    box-shadow: 0 0 0 6px rgba(43, 213, 143, .11);
}

.system-status small,
.system-status strong {
    display: block;
}

.system-status small {
    color: rgba(255,255,255,.55);
    font-size: 11px;
    font-weight: 700;
}

.system-status strong {
    margin-top: 3px;
    font-size: 13px;
    font-weight: 850;
}

.system-status b {
    margin-left: auto;
    color: #4fe2ad;
    font-size: 15px;
    font-weight: 900;
}

.tech-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(380px, .82fr);
    gap: 20px;
    align-items: stretch;
}

.infra-console {
    padding: 20px;
    border: 1px solid rgba(121, 146, 216, .18);
    border-radius: 15px;
    background: rgba(255, 255, 255, .038);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.infra-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 19px;
}

.infra-head strong {
    font-size: 14px;
    font-weight: 850;
}

.infra-head span {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    color: #54ddad;
    border-radius: 999px;
    background: rgba(35, 187, 125, .1);
    font-size: 11px;
    font-weight: 800;
}

.infra-head span i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.infra-route {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

.infra-route > b {
    position: relative;
    flex: 1;
    height: 2px;
    margin: 0 7px;
    background: linear-gradient(90deg, rgba(101, 84, 255, .6), rgba(43, 211, 143, .6));
}

.infra-route > b::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #62e2b1;
}

.infra-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 116px;
    min-height: 118px;
    padding: 12px 6px;
    text-align: center;
    border: 1px solid rgba(126, 150, 223, .14);
    border-radius: 11px;
    background: rgba(17, 36, 78, .6);
}

.infra-node i {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    margin-bottom: 10px;
    color: #8f84ff;
    border-radius: 10px;
    background: rgba(92, 75, 248, .15);
}

.infra-node.finished i {
    color: #45d49d;
    background: rgba(35, 187, 125, .13);
}

.infra-node svg,
.tech-features svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.infra-node strong {
    font-size: 12px;
    font-weight: 850;
}

.infra-node small {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.5);
    font-size: 10px;
    font-weight: 700;
}

.infra-monitor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.health-panel,
.guard-panel {
    min-height: 148px;
    padding: 13px;
    border: 1px solid rgba(122, 147, 216, .12);
    border-radius: 11px;
    background: rgba(8, 22, 50, .43);
}

.health-panel > div,
.guard-panel > div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.health-panel > div strong,
.guard-panel > div strong {
    font-size: 12px;
}

.health-panel > div small,
.guard-panel > div small {
    color: rgba(255,255,255,.42);
    font-size: 10px;
    font-weight: 700;
}

.health-panel p,
.guard-panel p {
    display: flex;
    align-items: center;
    margin: 10px 0 0;
    color: rgba(255,255,255,.68);
    font-size: 11px;
    font-weight: 650;
}

.health-panel p b {
    flex: 1;
    height: 4px;
    margin: 0 13px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(255,255,255,.09);
}

.health-panel p b::after {
    content: "";
    display: block;
    width: 96%;
    height: 100%;
    border-radius: inherit;
    background: #39ce97;
}

.health-panel p:last-child b::after {
    width: 68%;
    background: #8276ff;
}

.health-panel p em {
    color: #46d6a1;
    font-size: 10px;
    font-style: normal;
}

.health-panel p:last-child em {
    color: #9a92ff;
}

.guard-panel p i {
    width: 7px;
    height: 7px;
    margin-right: 9px;
    border-radius: 50%;
    background: #35cc94;
}

.guard-panel p:nth-child(3) i {
    background: #ffad59;
}

.guard-panel p:nth-child(4) i {
    background: #8276ff;
}

.guard-panel p b {
    margin-left: auto;
    color: #fff;
    font-size: 11px;
}

.tech-features {
    display: grid;
    gap: 11px;
}

.tech-features article {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 13px;
    align-items: center;
    min-height: 92px;
    padding: 14px 13px;
    border: 1px solid rgba(121, 146, 216, .16);
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
    transition: border-color .2s ease, background .2s ease;
}

.tech-features article:hover {
    border-color: rgba(113, 96, 255, .4);
    background: rgba(255,255,255,.065);
}

.tech-features i {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    color: #8f85ff;
    border-radius: 11px;
    background: rgba(90, 73, 255, .14);
}

.tech-features article:nth-child(2) i {
    color: #43d29d;
    background: rgba(38, 187, 128, .13);
}

.tech-features article:nth-child(3) i {
    color: #56aeff;
    background: rgba(54, 125, 243, .14);
}

.tech-features strong {
    display: block;
    font-size: 14px;
    font-weight: 850;
}

.tech-features span {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.57);
    font-size: 11px;
    font-weight: 650;
}

.tech-features em {
    align-self: start;
    padding: 5px 7px;
    color: #7fcdff;
    border-radius: 999px;
    background: rgba(56, 126, 236, .13);
    font-size: 9px;
    font-style: normal;
    font-weight: 850;
}

.tech-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 22px;
}

.tech-metrics div {
    padding: 18px 20px;
    border: 1px solid rgba(122,147,216,.16);
    border-radius: 12px;
    background: rgba(255,255,255,.045);
}

.tech-metrics strong {
    display: block;
    color: #fff;
    font-size: 27px;
    font-weight: 900;
    letter-spacing: 0;
}

.tech-metrics span {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.72);
    font-size: 12px;
    font-weight: 750;
}

.tech-metrics small {
    display: block;
    margin-top: 10px;
    color: #49d4a0;
    font-size: 10px;
    font-weight: 800;
}

.news-section {
    padding: 70px 0 76px;
    background: #fff;
}

.row-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

.row-heading a {
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 850;
}

.resource-board {
    display: grid;
    grid-template-columns: minmax(410px, .94fr) minmax(460px, 1.06fr);
    gap: 18px;
}

.resource-featured {
    display: flex;
    flex-direction: column;
    padding: 18px;
    border: 1px solid #e6ebf5;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(19,32,68,.055);
    transition: transform .2s ease, box-shadow .2s ease;
}

.resource-featured:hover,
.resource-list article:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 42px rgba(19,32,68,.09);
}

.resource-visual {
    min-height: 176px;
    margin-bottom: 18px;
    padding: 16px;
    border-radius: 10px;
    background:
        radial-gradient(circle at 86% 12%, rgba(113, 95, 255, .22), transparent 28%),
        linear-gradient(135deg, #f3f1ff, #f8faff);
}

.resource-visual > div {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
}

.resource-visual > div i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #26c286;
}

.resource-visual > div strong {
    font-size: 13px;
    font-weight: 850;
}

.resource-visual > div small {
    margin-left: auto;
    color: var(--color-primary);
    border-radius: 999px;
    background: #fff;
    padding: 5px 9px;
    font-size: 10px;
    font-weight: 850;
}

.resource-visual p {
    display: flex;
    justify-content: space-between;
    margin: 0 0 10px;
    padding: 12px 13px;
    border-radius: 8px;
    background: #fff;
    color: #697792;
    font-size: 11px;
    font-weight: 700;
}

.resource-visual p b {
    color: #15203e;
    font-size: 12px;
}

.resource-visual em {
    display: block;
    margin-top: 12px;
    color: #1cac73;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.resource-featured > span,
.resource-list span {
    color: #5947ff;
    font-size: 11px;
    font-weight: 850;
}

.resource-featured h3 {
    margin: 8px 0 8px;
    color: #1d2947;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.35;
}

.resource-featured > p {
    margin: 0 0 15px;
    color: #6d758e;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.7;
}

.resource-featured > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: #5947ff;
    font-size: 13px;
    font-weight: 850;
}

.resource-featured > a svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.resource-list {
    display: grid;
    gap: 12px;
}

.resource-list article {
    display: grid;
    grid-template-columns: 48px 1fr 34px;
    align-items: center;
    gap: 15px;
    min-height: 139px;
    padding: 17px 18px;
    border: 1px solid #e6ebf5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(19,32,68,.035);
    transition: transform .2s ease, box-shadow .2s ease;
}

.resource-list article > i {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: #5947ff;
    border-radius: 11px;
    background: #f0efff;
}

.resource-list article:nth-child(2) > i {
    color: #2479e6;
    background: #edf5ff;
}

.resource-list article:nth-child(3) > i {
    color: #1cae7a;
    background: #ebfaf4;
}

.resource-list svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.resource-list h3 {
    margin: 7px 0 5px;
    color: #15203d;
    font-size: 16px;
    font-weight: 900;
}

.resource-list p {
    margin: 0;
    color: #6b7890;
    font-size: 12px;
    font-weight: 600;
}

.resource-list article > a {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #5947ff;
    border-radius: 50%;
    background: #f2f0ff;
    font-size: 15px;
    font-weight: 900;
}

.final-cta {
    position: relative;
    padding: 46px 0;
    overflow: hidden;
    background: linear-gradient(180deg, #fff, #f7f9ff);
}

.final-cta-inner {
    position: relative;
    z-index: 2;
    text-align: center;
}

.final-cta h2 {
    margin: 0;
    color: #15203d;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 0;
}

.final-cta p {
    margin: 10px 0 20px;
    color: #68728b;
    font-weight: 650;
}

.final-cta-inner > div {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.final-ribbon {
    position: absolute;
    right: -90px;
    bottom: -90px;
    width: 500px;
    height: 220px;
    border-radius: 50%;
    background: linear-gradient(110deg, transparent 0 18%, rgba(101, 61, 241, .52), rgba(255, 116, 200, .22), transparent 80%);
    transform: rotate(-18deg);
    filter: blur(2px);
}

.site-footer {
    position: relative;
    padding: 64px 0 0;
    color: rgba(255, 255, 255, .76);
    background: linear-gradient(105deg, #07132e, #081731 52%, #08152d);
}

.site-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(111, 101, 255, .62), transparent);
}

.footer-main {
    display: grid;
    grid-template-columns: minmax(274px, 300px) minmax(0, 1fr);
    gap: 96px;
    align-items: start;
}

.brand-footer {
    min-width: 0;
    color: #fff;
}

.brand-footer .brand-text {
    gap: 8px;
}

.brand-footer .brand-text strong {
    color: #fff;
}

.brand-footer .brand-text em {
    color: rgba(255,255,255,.42);
}

.footer-brand p {
    max-width: 290px;
    margin: 20px 0 25px;
    color: rgba(255,255,255,.6);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.75;
}

.footer-account-links {
    display: flex;
    align-items: center;
    gap: 23px;
}

.footer-account-links a {
    position: relative;
    color: rgba(255,255,255,.68);
    font-size: 13px;
    font-weight: 700;
    transition: color .18s ease;
}

.footer-account-links a + a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -12px;
    width: 1px;
    height: 13px;
    background: rgba(255,255,255,.2);
    transform: translateY(-50%);
}

.footer-account-links a:hover {
    color: #fff;
}

.site-footer h4 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    gap: 40px;
}

.footer-column {
    min-width: 0;
}

.footer-column h4 {
    margin-bottom: 16px;
}

.footer-column a {
    display: block;
    margin-top: 11px;
    color: rgba(255,255,255,.58);
    font-size: 13px;
    font-weight: 650;
    transition: color .18s ease;
}

.footer-column a:hover {
    color: #fff;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 62px;
    padding: 20px 0 24px;
    border-top: 1px solid rgba(119,144,213,.13);
    color: rgba(255,255,255,.43);
    font-size: 12px;
    font-weight: 600;
}

.footer-bottom div {
    display: flex;
    align-items: center;
    gap: 21px;
}

.footer-bottom div span {
    position: relative;
    color: rgba(255,255,255,.53);
}

.footer-bottom div span::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 7px;
    vertical-align: 1px;
    border-radius: 50%;
    background: #40cc98;
}

.footer-bottom a {
    color: rgba(255,255,255,.48);
    transition: color .18s ease;
}

.footer-bottom a:hover {
    color: #fff;
}

@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
    .hero {
        isolation: isolate;
    }

    .hero::after {
        content: "";
        position: absolute;
        z-index: 0;
        top: -28%;
        right: -9%;
        width: min(850px, 58vw);
        height: 124%;
        opacity: .72;
        background:
            conic-gradient(from 194deg at 51% 44%, transparent 0 26%, rgba(255, 101, 195, .25), rgba(255, 183, 72, .29), rgba(92, 223, 255, .3), rgba(92, 70, 255, .2), transparent 72%);
        filter: blur(54px);
        animation: heroSpectrum 13s ease-in-out infinite alternate;
        pointer-events: none;
    }

    .hero-ambient {
        position: absolute;
        z-index: 0;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .hero-ambient span {
        position: absolute;
        display: block;
        border-radius: 999px;
        filter: blur(2px);
        mix-blend-mode: multiply;
    }

    .hero-ambient span:nth-child(1) {
        top: 67px;
        right: 31%;
        width: 150px;
        height: 150px;
        opacity: .21;
        background: #ff65bd;
        animation: heroOrbFloat 11s ease-in-out infinite alternate;
    }

    .hero-ambient span:nth-child(2) {
        top: 204px;
        right: 8%;
        width: 262px;
        height: 262px;
        opacity: .14;
        background: #6657ff;
        animation: heroOrbFloat 15s ease-in-out -4s infinite alternate-reverse;
    }

    .hero-ambient span:nth-child(3) {
        right: 38%;
        bottom: 74px;
        width: 132px;
        height: 132px;
        opacity: .17;
        background: #55d7ff;
        animation: heroOrbFloat 12s ease-in-out -6s infinite alternate;
    }

    .hero-copy .eyebrow,
    .hero-copy h1,
    .hero-copy .hero-desc,
    .hero-copy .hero-actions,
    .hero-copy .hero-points {
        animation: heroContentRise .82s cubic-bezier(.16, 1, .3, 1) both;
    }

    .hero-copy h1 { animation-delay: .08s; }
    .hero-copy .hero-desc { animation-delay: .16s; }
    .hero-copy .hero-actions { animation-delay: .24s; }
    .hero-copy .hero-points { animation-delay: .32s; }

    .hero-actions .btn-primary {
        position: relative;
        overflow: hidden;
    }

    .hero-actions .btn-primary::after {
        content: "";
        position: absolute;
        top: -65%;
        left: -56%;
        width: 34%;
        height: 230%;
        background: rgba(255,255,255,.38);
        transform: rotate(27deg);
        animation: buttonSweep 5.6s ease-in-out 1.2s infinite;
    }

    .hero-points span::before {
        animation: pointGlow 2.6s ease-in-out infinite;
    }

    .hero-points span:nth-child(2)::before { animation-delay: .32s; }
    .hero-points span:nth-child(3)::before { animation-delay: .64s; }

    html.motion-enabled .reveal-item {
        opacity: 0;
        transform: translate3d(0, 26px, 0);
        transition:
            opacity .72s cubic-bezier(.16, 1, .3, 1),
            transform .72s cubic-bezier(.16, 1, .3, 1),
            border-color .25s ease,
            box-shadow .3s ease,
            background .25s ease;
    }

    html.motion-enabled .reveal-item.is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    html.motion-enabled .solution-grid .reveal-item:nth-child(2),
    html.motion-enabled .tech-features .reveal-item:nth-child(2),
    html.motion-enabled .resource-list .reveal-item:nth-child(2),
    html.motion-enabled .category-row .reveal-item:nth-child(2) {
        transition-delay: .07s;
    }

    html.motion-enabled .solution-grid .reveal-item:nth-child(3),
    html.motion-enabled .tech-features .reveal-item:nth-child(3),
    html.motion-enabled .resource-list .reveal-item:nth-child(3),
    html.motion-enabled .category-row .reveal-item:nth-child(3) {
        transition-delay: .14s;
    }

    html.motion-enabled .solution-grid .reveal-item:nth-child(4),
    html.motion-enabled .tech-features .reveal-item:nth-child(4),
    html.motion-enabled .category-row .reveal-item:nth-child(4) {
        transition-delay: .05s;
    }

    html.motion-enabled .solution-grid .reveal-item:nth-child(5),
    html.motion-enabled .category-row .reveal-item:nth-child(5) {
        transition-delay: .12s;
    }

    html.motion-enabled .solution-grid .reveal-item:nth-child(6) {
        transition-delay: .19s;
    }

    .motion-surface {
        --pointer-x: 50%;
        --pointer-y: 50%;
        --tilt-x: 0deg;
        --tilt-y: 0deg;
    }

    .solution-v2 .chain-card.motion-surface::after {
        background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(92, 73, 255, .14), transparent 46%);
        transform: none;
    }

    .solution-v2 .chain-card-delivery.motion-surface::after {
        background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255,255,255,.25), transparent 50%);
    }

    .solution-v2 .chain-card.motion-surface:hover {
        transform: perspective(950px) translateY(-5px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    }

    .fund-panel.motion-surface,
    .infra-console.motion-surface,
    .resource-featured.motion-surface {
        overflow: hidden;
        transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease;
    }

    .fund-panel.motion-surface::after,
    .infra-console.motion-surface::after,
    .resource-featured.motion-surface::after {
        content: "";
        position: absolute;
        z-index: 0;
        inset: 0;
        opacity: 0;
        background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(95, 79, 255, .11), transparent 42%);
        transition: opacity .3s ease;
        pointer-events: none;
    }

    .infra-console.motion-surface::after {
        background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(104, 133, 255, .19), transparent 42%);
    }

    .fund-panel.motion-surface > *,
    .infra-console.motion-surface > *,
    .resource-featured.motion-surface > * {
        position: relative;
        z-index: 1;
    }

    .fund-panel.motion-surface:hover,
    .infra-console.motion-surface:hover,
    .resource-featured.motion-surface:hover {
        transform: perspective(1000px) translateY(-3px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    }

    .fund-panel.motion-surface:hover::after,
    .infra-console.motion-surface:hover::after,
    .resource-featured.motion-surface:hover::after {
        opacity: 1;
    }

    .chain-card-delivery .route-link::after {
        animation: deliveryCharge 2.7s ease-in-out infinite;
    }

    .chain-card-delivery .finish-node i,
    .system-status > i,
    .infra-head span i {
        animation: statusGlow 2.2s ease-in-out infinite;
    }

    .chain-card-report .trend-bars i {
        animation: metricBars 2.8s ease-in-out infinite alternate;
    }

    .chain-card-report .trend-bars i:nth-child(even) {
        animation-delay: -.8s;
    }

    .fund-panel.is-visible .fund-graph {
        stroke-dasharray: 440;
        stroke-dashoffset: 440;
        animation: chartDraw 1.4s cubic-bezier(.16, 1, .3, 1) .2s forwards;
    }

    .infra-route > b {
        overflow: hidden;
    }

    .infra-route > b::before {
        content: "";
        position: absolute;
        top: -2px;
        left: -28px;
        width: 28px;
        height: 6px;
        border-radius: 9px;
        background: #a8a1ff;
        box-shadow: 0 0 12px #6654ff;
        animation: routeBeam 2.25s linear infinite;
    }

    .infra-route > b:nth-of-type(2)::before { animation-delay: .35s; }
    .infra-route > b:nth-of-type(3)::before { animation-delay: .7s; }

    .stats-wave {
        animation: statsDrift 8s ease-in-out infinite alternate;
    }

    .gift-art span {
        animation: giftHover 4.6s ease-in-out infinite;
    }

    .final-ribbon {
        animation: ctaRibbon 8s ease-in-out infinite alternate;
    }

    @keyframes heroSpectrum {
        from { transform: translate3d(-16px, -8px, 0) rotate(-3deg) scale(.96); }
        to { transform: translate3d(12px, 8px, 0) rotate(4deg) scale(1.05); }
    }

    @keyframes heroOrbFloat {
        to { transform: translate3d(24px, -25px, 0) scale(1.08); }
    }

    @keyframes heroContentRise {
        from { opacity: 0; transform: translate3d(0, 22px, 0); }
        to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @keyframes buttonSweep {
        0%, 63% { transform: translateX(0) rotate(27deg); opacity: 0; }
        68% { opacity: .64; }
        84%, 100% { transform: translateX(390px) rotate(27deg); opacity: 0; }
    }

    @keyframes pointGlow {
        50% { box-shadow: 0 8px 23px rgba(76,63,255,.34); transform: scale(1.08); }
    }

    @keyframes deliveryCharge {
        0%, 100% { width: 58%; opacity: .8; }
        48% { width: 100%; opacity: 1; box-shadow: 0 0 11px rgba(84,235,163,.48); }
    }

    @keyframes statusGlow {
        50% { box-shadow: 0 0 0 7px rgba(43,213,143,.1), 0 0 14px rgba(43,213,143,.4); }
    }

    @keyframes metricBars {
        to { transform: scaleY(1); }
    }

    @keyframes chartDraw {
        to { stroke-dashoffset: 0; }
    }

    @keyframes routeBeam {
        to { transform: translateX(170px); }
    }

    @keyframes statsDrift {
        to { transform: translate3d(26px, -7px, 0) rotate(-1deg) scaleY(.5); }
    }

    @keyframes giftHover {
        50% { transform: translateY(-8px) rotate(1deg); }
    }

    @keyframes ctaRibbon {
        to { transform: translate3d(-28px, -10px, 0) rotate(-13deg) scale(1.08); }
    }
}


@media (max-width: 1280px) {
    .header-inner {
        column-gap: 14px;
    }

    .ks-nav {
        gap: 11px;
    }

    .ks-nav-link {
        max-width: 104px;
        font-size: 12px;
    }
}

@media (max-width: 1180px) {
    .ks-nav {
        gap: 10px;
    }

    .ks-mega-content {
        grid-template-columns: minmax(0, 1fr) 230px;
    }

    .ks-mega-main {
        gap: 0;
        padding: 28px 20px 30px;
    }

    .solution-grid,
    .resource-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .footer-main {
        grid-template-columns: minmax(236px, 270px) minmax(0, 1fr);
        gap: 48px;
    }
}

@media (max-width: 960px) {
    :root {
        --header-height: 62px;
    }

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

    .header-inner {
        min-height: 62px;
    }

    .site-header::before {
        height: 62px;
        opacity: 1;
    }

    .site-header::after {
        height: var(--header-height);
    }

    .ks-nav,
    .ks-mega-layer,
    .header-actions {
        display: none;
    }

    body.ks-nav-mega-open .site-shell main {
        filter: none;
        opacity: 1;
    }

    .mobile-menu {
        display: inline-flex;
        width: 42px;
        height: 42px;
        margin-left: auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: 1px solid rgba(103,115,164,.16);
        border-radius: 12px;
        background: #fff;
    }

    .mobile-menu span {
        width: 18px;
        height: 2px;
        border-radius: 999px;
        background: #1d2947;
    }

    .mobile-panel {
        display: none;
        width: min(calc(100% - 32px), var(--container));
        margin: 8px auto 0;
        padding: 10px 16px 18px;
        border: 1px solid rgba(103,115,164,.12);
        border-radius: 18px;
        background: rgba(255,255,255,.96);
        box-shadow: 0 18px 60px rgba(31, 42, 86, .10);
    }

    .mobile-panel.is-open {
        display: grid;
        gap: 4px;
    }

    .mobile-panel a,
    .mobile-panel .mobile-link-title {
        display: block;
        padding: 11px 0;
        font-weight: 760;
    }

    .mobile-link {
        color: #1d2947;
    }

    .mobile-link-title {
        color: #1d2947;
    }

    .mobile-subnav {
        display: grid;
        gap: 2px;
        margin: -2px 0 4px 14px;
        padding-left: 12px;
        border-left: 1px solid rgba(103,115,164,.16);
    }

    .mobile-subnav a,
    .mobile-subnav span {
        color: #66708a;
        font-size: 14px;
        padding: 9px 0;
    }

    .mobile-panel-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 8px;
    }

    .hero {
        min-height: auto;
        padding: 98px 0 58px;
    }

    .hero-video-stage {
        display: none;
    }

    .hero-inner,
    .growth-layout,
    .tech-grid {
        grid-template-columns: 1fr;
    }

    .tech-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .resource-board {
        grid-template-columns: 1fr;
    }

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

    .logo-wall {
        grid-template-columns: repeat(4, 1fr);
    }

    .solution-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid,
    .tech-metrics {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 640px) {
    .brand-text em {
        display: none;
    }

    .hero h1 {
        font-size: 40px;
    }

    .hero-desc {
        font-size: 16px;
    }

    .hero-actions,
    .final-cta-inner > div {
        flex-direction: column;
    }

    .hero-actions .btn,
    .final-cta-inner .btn {
        width: 100%;
    }

    .trust-strip p {
        text-align: center;
    }

    .logo-wall {
        grid-template-columns: repeat(2, 1fr);
    }

    .solution-card {
        min-height: auto;
        padding: 22px;
    }

    .gift-banner {
        display: block;
        padding: 28px;
    }

    .gift-art {
        margin: 22px auto 0;
        width: 210px;
    }

    .category-row,
    .footer-nav {
        grid-template-columns: 1fr;
    }

    .footer-bottom,
    .footer-bottom div {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

}