:root {
    --gr-ink: #06101f;
    --gr-navy: #081a31;
    --gr-line: #dce6f0;
    --gr-cyan: #08b8d9;
    --gr-blue: #2563eb;
    --gr-text: #172235;
    --gr-muted: #617188;
    --gr-shadow: 0 18px 50px rgba(20, 48, 78, .10)
}

html {
    scroll-behavior: smooth
}

body {
    background: #f5f8fb !important;
    color: var(--gr-text) !important;
    font-family: Inter, "Microsoft YaHei", system-ui, sans-serif !important
}

.top {
    background: #040c18 !important;
    color: #9db1c8 !important;
    border-bottom: 1px solid rgba(125, 211, 252, .12) !important
}

.top .wrap:before {
    content: "●";
    color: #21d4a7;
    margin-right: 7px
}

.brand {
    letter-spacing: -.6px !important;
    color: #eaf6ff !important
}

.brand b,
.brand i {
    color: #2dd4f1 !important
}

.brand small {
    color: #7190ad !important;
    letter-spacing: .16em !important
}

.search {
    border: 1px solid #294662 !important;
    background: #0b1e35 !important;
    color: #91a9c0 !important;
    border-radius: 9px !important
}

.search strong {
    background: linear-gradient(135deg, var(--gr-cyan), var(--gr-blue)) !important
}

.publish,
.btn,
.empty a {
    background: linear-gradient(135deg, var(--gr-cyan), var(--gr-blue)) !important;
    color: white !important;
    box-shadow: 0 9px 22px rgba(8, 184, 217, .22) !important
}

.head-actions,
.work {
    color: #c9dbec !important
}

header {
    background: rgba(6, 16, 31, .96) !important;
    box-shadow: 0 8px 28px rgba(1, 9, 20, .22) !important
}

.nav,
.navbox,
.nav-wrap {
    background: #08182b !important;
    border-color: #17324d !important;
    color: #b8cadc !important
}

.nav a:first-child,
.more,
.card-tag,
.tag {
    color: #22cae8 !important
}

.hero {
    background: radial-gradient(circle at 72% 12%, rgba(8, 184, 217, .18), transparent 36%), linear-gradient(135deg, #06101f, #0a213d 58%, #102f52) !important
}

.hero-main {
    background: radial-gradient(circle at 80% 15%, rgba(45, 212, 241, .19), transparent 35%), linear-gradient(135deg, #06101f, #102c4e) !important;
    border: 1px solid rgba(125, 211, 252, .18) !important;
    box-shadow: 0 30px 75px rgba(1, 12, 28, .34) !important
}

.eyebrow {
    color: #46dff5 !important
}

.lead {
    color: #bad0e4 !important
}

.category-panel,
.trust-panel {
    background: rgba(10, 30, 53, .88) !important;
    color: #e8f5ff !important;
    border: 1px solid rgba(125, 211, 252, .16) !important;
    backdrop-filter: blur(16px) !important
}

.category-list a,
.trust-panel p,
.trust-item span {
    color: #99b1c8 !important
}

.category-list a:hover {
    background: rgba(45, 212, 241, .09) !important;
    color: #4ae2f7 !important
}

.trust-item {
    border-color: rgba(148, 196, 224, .13) !important
}

.trust-item b {
    color: #e9f6ff !important
}

.ai-box,
.side-cta {
    background: linear-gradient(135deg, rgba(8, 184, 217, .13), rgba(37, 99, 235, .13)) !important;
    color: #2acde9 !important;
    border: 1px solid rgba(45, 212, 241, .18) !important
}

.stats {
    background: #fff !important;
    border-bottom: 1px solid var(--gr-line) !important
}

.stat strong,
.price {
    color: #087f9c !important
}

.channel,
.card,
.content,
.side {
    border-color: var(--gr-line) !important;
    border-radius: 14px !important
}

.channel:hover,
.card:hover {
    border-color: #71d5e6 !important;
    box-shadow: var(--gr-shadow) !important;
    transform: translateY(-3px) !important
}

.supply-cta {
    background: radial-gradient(circle at 80% 20%, rgba(45, 212, 241, .18), transparent 35%), linear-gradient(120deg, #06101f, #12385f) !important;
    border: 1px solid #1b5271 !important
}

.supply-cta a {
    color: #057c97 !important
}

.channel-hero {
    background: radial-gradient(circle at 82% 20%, rgba(45, 212, 241, .2), transparent 32%), linear-gradient(120deg, #06101f, #12385f) !important;
    border-block: 1px solid #173c59 !important
}

.crumb {
    color: #6f8296 !important
}

.filter.active {
    background: #092a46 !important;
    border-color: #0f91ad !important;
    color: #60e6f7 !important
}

.filter {
    border-color: #d7e4ed !important
}

.side a:hover {
    color: #078ba7 !important;
    background: #eef9fc !important
}

.knowledge a {
    border-color: var(--gr-line) !important;
    background: linear-gradient(145deg, #fff, #f5fbfd) !important
}

.knowledge a:hover {
    border-color: #61d0e2 !important;
    box-shadow: var(--gr-shadow) !important
}

body>footer {
    background: #040c18 !important;
    color: #7890a8 !important;
    border-top: 1px solid #14304a !important
}

footer strong {
    color: #e7f7ff !important
}

@media(max-width:600px) {
    .top {
        display: none !important
    }

    .head {
        height: 64px !important
    }

    .brand {
        font-size: 19px !important
    }

    .hero {
        padding-top: 24px !important
    }
}

.portal-block {
    padding: 76px 0;
    background: #fff
}

.portal-dark {
    background: radial-gradient(circle at 80% 10%, rgba(45, 212, 241, .16), transparent 34%), #06101f;
    color: #eaf6ff
}

.portal-soft {
    background: linear-gradient(180deg, #eef7fb, #f8fbfd)
}

.portal-wrap {
    width: min(1240px, 94%);
    margin: auto
}

.portal-kicker {
    color: #20c8e5;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    margin-bottom: 10px
}

.portal-block h2 {
    font-size: clamp(28px, 3vw, 42px);
    letter-spacing: -.04em;
    margin: 0 0 10px
}

.portal-block>div>p {
    color: #8fa9c1;
    max-width: 760px;
    font-size: 16px
}

.dimension-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 32px
}

.dimension-grid a {
    padding: 24px 20px;
    border: 1px solid rgba(125, 211, 252, .16);
    background: rgba(15, 43, 72, .55);
    border-radius: 13px
}

.dimension-grid b {
    color: #26cee9;
    font-size: 12px
}

.dimension-grid strong,
.dimension-grid span {
    display: block
}

.dimension-grid strong {
    font-size: 17px;
    margin-top: 28px
}

.dimension-grid span {
    color: #708ca6
}

.portal-head {
    display: flex;
    justify-content: space-between;
    align-items: end
}

.portal-head>a {
    color: #078ba7;
    font-weight: 800
}

.flow-grid,
.industry-grid,
.desk-grid {
    display: grid;
    gap: 15px;
    margin-top: 30px
}

.flow-grid {
    grid-template-columns: repeat(4, 1fr)
}

.flow-grid article,
.industry-grid a,
.desk-grid a {
    background: #fff;
    border: 1px solid #dce6f0;
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 8px 35px rgba(19, 53, 84, .06)
}

.flow-grid b,
.industry-grid span,
.desk-grid small {
    color: #078ba7;
    font-weight: 900;
    letter-spacing: .1em
}

.flow-grid h3,
.industry-grid h3,
.desk-grid h3 {
    font-size: 20px;
    margin: 20px 0 7px
}

.flow-grid p,
.industry-grid p,
.desk-grid p {
    color: #68798d
}

.industry-grid {
    grid-template-columns: repeat(4, 1fr)
}

.industry-grid a:hover,
.desk-grid a:hover {
    transform: translateY(-4px);
    border-color: #6bd4e5;
    box-shadow: 0 20px 45px rgba(15, 71, 101, .12)
}

.desk-grid {
    grid-template-columns: repeat(3, 1fr)
}

.desk-grid a {
    min-height: 245px;
    background: linear-gradient(150deg, #fff, #eff9fc)
}

.desk-grid strong {
    display: block;
    color: #087f9c;
    margin-top: 26px
}

@media(max-width:900px) {
    .dimension-grid {
        grid-template-columns: repeat(2, 1fr)
    }

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

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

@media(max-width:600px) {
    .portal-block {
        padding: 48px 0
    }

    .flow-grid,
    .industry-grid {
        grid-template-columns: 1fr
    }

    .dimension-grid a:last-child {
        grid-column: 1/-1
    }
}

.brand-logo {
    display: flex !important;
    align-items: center !important;
    min-width: 205px !important
}

.brand-logo img {
    display: block !important;
    width: 184px !important;
    height: auto !important;
    max-height: 58px !important;
    object-fit: contain !important
}

:root {
    --gr-red: #e7272d;
    --gr-red-deep: #c9131b;
    --gr-line: #ebe6e2;
    --gr-shadow: 0 16px 45px rgba(77, 45, 32, .09)
}

body {
    background: #f7f7f7 !important;
    color: #24272d !important
}

.top {
    background: #f6f6f6 !important;
    color: #666 !important;
    border-bottom: 1px solid #e7e7e7 !important
}

.top .wrap:before {
    color: #20a36a
}

.head {
    height: 82px !important
}

.head-actions,
.work {
    color: #333 !important
}

header {
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 4px 18px rgba(43, 30, 24, .07) !important
}

.nav,
.navbox,
.nav-wrap {
    background: #fff !important;
    border-color: #ece7e4 !important;
    color: #333 !important
}

.nav a:first-child,
.more,
.card-tag,
.tag {
    color: var(--gr-red) !important
}

.search {
    background: #fff !important;
    border: 2px solid var(--gr-red) !important;
    color: #888 !important;
    border-radius: 24px !important
}

.search strong,
.publish,
.btn,
.empty a {
    background: linear-gradient(135deg, #ef3439, var(--gr-red-deep)) !important;
    color: #fff !important;
    box-shadow: 0 9px 22px rgba(231, 39, 45, .18) !important
}

.hero {
    background: radial-gradient(circle at 82% 14%, rgba(255, 198, 175, .42), transparent 32%), linear-gradient(120deg, #fff7f2, #fff 52%, #fff0eb) !important
}

.hero-main {
    background: radial-gradient(circle at 82% 15%, rgba(255, 255, 255, .18), transparent 34%), linear-gradient(130deg, #ef3c3f, #d51921 62%, #a90e17) !important;
    border: 0 !important;
    box-shadow: 0 28px 65px rgba(190, 23, 30, .24) !important
}

.eyebrow {
    color: #ffe4ce !important
}

.lead {
    color: #fff0ea !important
}

.category-panel,
.trust-panel {
    background: #fff !important;
    color: #24272d !important;
    border: 1px solid #ece4df !important;
    box-shadow: 0 16px 38px rgba(80, 43, 27, .08) !important;
    backdrop-filter: none !important
}

.category-list a,
.trust-panel p,
.trust-item span {
    color: #666 !important
}

.category-list a:hover {
    background: #fff1ed !important;
    color: var(--gr-red) !important
}

.trust-item {
    border-color: #eee7e3 !important
}

.trust-item b {
    color: #252525 !important
}

.ai-box,
.side-cta {
    background: #fff1ed !important;
    color: #bd1a20 !important;
    border: 1px solid #ffd5ca !important
}

.stat strong,
.price {
    color: var(--gr-red) !important
}

.channel:hover,
.card:hover {
    border-color: #f1aaa4 !important;
    box-shadow: var(--gr-shadow) !important
}

.supply-cta {
    background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .18), transparent 32%), linear-gradient(110deg, #ef3439, #c9161e) !important;
    border: 0 !important
}

.supply-cta a {
    color: var(--gr-red) !important
}

.channel-hero {
    background: radial-gradient(circle at 84% 18%, rgba(255, 255, 255, .17), transparent 30%), linear-gradient(115deg, #ed353a, #c9161e) !important;
    border: 0 !important
}

.filter.active {
    background: var(--gr-red) !important;
    border-color: var(--gr-red) !important;
    color: #fff !important
}

.side a:hover {
    color: var(--gr-red) !important;
    background: #fff2ee !important
}

.knowledge a {
    background: linear-gradient(145deg, #fff, #fff9f6) !important
}

.knowledge a:hover {
    border-color: #efaaa5 !important
}

.portal-dark {
    background: radial-gradient(circle at 82% 12%, rgba(255, 214, 194, .18), transparent 32%), linear-gradient(125deg, #9f1017, #dc252c 58%, #ef4942) !important;
    color: #fff !important
}

.portal-dark .portal-kicker {
    color: #ffd8c2 !important
}

.portal-dark>div>p {
    color: #ffe0d5 !important
}

.dimension-grid a {
    background: rgba(115, 5, 12, .24) !important;
    border-color: rgba(255, 255, 255, .2) !important
}

.dimension-grid b {
    color: #ffd5bc !important
}

.dimension-grid span {
    color: #ffd8d0 !important
}

.portal-soft {
    background: linear-gradient(180deg, #fff4ef, #fffaf7) !important
}

.portal-kicker,
.portal-head>a,
.flow-grid b,
.industry-grid span,
.desk-grid small,
.desk-grid strong {
    color: var(--gr-red) !important
}

.industry-grid a:hover,
.desk-grid a:hover {
    border-color: #eea39e !important;
    box-shadow: var(--gr-shadow) !important
}

.desk-grid a {
    background: linear-gradient(150deg, #fff, #fff7f3) !important
}

body>footer {
    background: #252525 !important;
    color: #aaa !important;
    border-top: 0 !important
}

footer strong {
    color: #fff !important
}

@media(max-width:600px) {
    .brand-logo {
        min-width: 150px !important
    }

    .brand-logo img {
        width: 145px !important;
        max-height: 50px !important
    }

    .head {
        height: 68px !important
    }
}