/* ==========================================================
   CMS 系统产品页（portal/product.html）
   依赖：base.css + newnewindex.css（复用首页头部/页脚与设计变量）
   作用域：.jt-cms
   ========================================================== */

/* ---------------- 首屏 ---------------- */

.jt-cms-hero {
    position: relative;
    min-height: 500px;
    background: #2e7cff url(/static/new/img/product/product-banner.png?v=2) no-repeat 50%;
    background-size: cover;
    overflow: hidden;
}

.jt-cms-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(96deg, rgba(11, 45, 150, .84) 0%, rgba(14, 56, 180, .5) 44%, rgba(15, 60, 190, 0) 72%);
    pointer-events: none;
}

.jt-cms-hero-inner {
    position: relative;
    z-index: 1;
    padding: 88px 0 76px;
}

.jt-cms-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.jt-cms-hero h1 {
    margin: 20px 0 0;
    font-size: 54px;
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -1px;
    color: #fff;
}

.jt-cms-hero h1 em {
    font-style: normal;
    color: #a8c8ff;
}

.jt-cms-hero-sub {
    margin: 16px 0 0;
    font-size: 19px;
    font-weight: 600;
    color: rgba(255, 255, 255, .94);
}

.jt-cms-hero-desc {
    max-width: 560px;
    margin: 14px 0 0;
    font-size: 14.5px;
    line-height: 1.95;
    color: rgba(255, 255, 255, .78);
}

.jt-cms-scenes--3 .jt-cms-scene {
    background: #fff;
}

/* 三端 */

.jt-cms-ends {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.jt-cms-end {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px 7px 8px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}

.jt-cms-end img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* 操作区 */

.jt-cms-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
}

.jt-cms-btn-light {
    padding: 16px 28px;
    border-radius: 12px;
    background: #fff;
    color: #1b4ff0;
    font-size: 15px;
    box-shadow: 0 12px 26px rgba(7, 30, 90, .2);
}

.jt-cms-btn-light:hover {
    color: #1b4ff0;
    box-shadow: 0 16px 34px rgba(7, 30, 90, .28);
}

/* 二维码预览 */

.jt-cms-qr {
    position: relative;
}

.jt-cms-qr-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 22px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.jt-cms-qr:hover .jt-cms-qr-btn {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .6);
}

.jt-cms-qr-pop {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 14px);
    z-index: 20;
    width: 168px;
    padding: 12px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(11, 23, 48, .22);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity .22s, transform .22s, visibility .22s;
}

.jt-cms-qr:hover .jt-cms-qr-pop {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.jt-cms-qr-pop img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.jt-cms-qr-pop span {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    text-align: center;
    color: #6d7890;
}

.jt-cms-qr-pop::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 11px;
    height: 11px;
    margin-left: -5px;
    border-radius: 2px;
    background: #fff;
    transform: rotate(45deg);
}

/* ---------------- 通用区块 ---------------- */

.jt-cms-sec {
    padding: 80px 0;
}

.jt-cms-sec--soft {
    background: #f5f8fd;
}

.jt-cms-head {
    max-width: 900px;
    margin: 0 auto 46px;
    text-align: center;
}

.jt-cms-eyebrow {
    display: inline-block;
    padding: 6px 13px;
    border-radius: 20px;
    background: #eef4ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
    color: #3b74f0;
}

.jt-cms-head h2 {
    margin: 16px 0 0;
    font-size: 32px;
    line-height: 1.42;
    font-weight: 800;
    color: #14213b;
}

.jt-cms-head p {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.9;
    color: #6d7890;
}

.jt-cms-sec--dark .jt-cms-eyebrow {
    background: rgba(77, 131, 255, .16);
    color: #9ec2ff;
}

.jt-cms-sec--dark .jt-cms-head h2 {
    color: #fff;
}

.jt-cms-sec--dark .jt-cms-head p {
    color: rgba(255, 255, 255, .58);
}

/* ---------------- 六大能力 ---------------- */

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

.jt-cms-feat {
    padding: 28px 26px;
    border: 1px solid #eef2f9;
    border-radius: 18px;
    background: #fff;
    transition: transform .24s, box-shadow .24s, border-color .24s;
}

.jt-cms-feat:hover {
    border-color: #dbe6fb;
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(23, 55, 111, .1);
}

.jt-cms-feat img {
    display: block;
    width: 52px;
    height: 52px;
}

.jt-cms-feat h3 {
    margin: 18px 0 0;
    font-size: 16.5px;
    font-weight: 700;
    color: #14213b;
}

.jt-cms-feat p {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.85;
    color: #7b8798;
}

/* ---------------- 营销场景 ---------------- */

.jt-cms-scenes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.jt-cms-scene {
    margin: 0;
    padding: 16px 16px 22px;
    border: 1px solid #eef2f9;
    border-radius: 18px;
    background: #f8fbff;
    text-align: center;
    transition: transform .24s, box-shadow .24s, border-color .24s;
}

.jt-cms-scene:hover {
    border-color: #dbe6fb;
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(23, 55, 111, .1);
}

.jt-cms-scene img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.jt-cms-scene figcaption {
    margin-top: 16px;
    font-size: 15px;
    font-weight: 700;
    color: #14213b;
}

.jt-cms-scene figcaption::before {
    content: "";
    display: block;
    width: 26px;
    height: 3px;
    margin: 0 auto 10px;
    border-radius: 2px;
    background: #2764f5;
}

.jt-cms-center {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}

.jt-cms-main-btn {
    padding: 16px 30px;
    border-radius: 999px;
    font-size: 15px;
}

/* ---------------- 技术实力 ---------------- */

.jt-cms-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.jt-cms-stat {
    padding: 32px 18px;
    border: 1px solid #eef2f9;
    border-radius: 18px;
    background: #fff;
    text-align: center;
    transition: transform .24s, box-shadow .24s;
}

.jt-cms-stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(23, 55, 111, .1);
}

.jt-cms-stat img {
    display: block;
    width: 42px;
    height: 42px;
    margin: 0 auto;
}

.jt-cms-stat-num {
    margin-top: 14px;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.15;
    color: #2764f5;
}

.jt-cms-stat-num small {
    margin-left: 2px;
    font-size: 15px;
    font-weight: 700;
}

.jt-cms-stat p {
    margin: 10px 0 0;
    font-size: 13px;
    color: #6d7890;
}

/* ---------------- 优势（深色） ---------------- */

.jt-cms-sec--dark {
    position: relative;
    overflow: hidden;
    background: #0b1730;
}

.jt-cms-sec--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask-image: radial-gradient(circle at 50% 0, #000 0%, transparent 76%);
    mask-image: radial-gradient(circle at 50% 0, #000 0%, transparent 76%);
    pointer-events: none;
}

.jt-cms-advs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.jt-cms-adv {
    text-align: center;
}

.jt-cms-adv img {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto;
}

.jt-cms-adv h3 {
    margin: 18px 0 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.jt-cms-adv p {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .55);
}

/* ---------------- 结尾 CTA ---------------- */

.jt-cms-final {
    padding: 40px 0 84px;
}

.jt-cms-final-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    overflow: hidden;
    padding: 46px 52px;
    border-radius: 24px;
    background: linear-gradient(105deg, #1b4ff0, #2e7cff 58%, #4d9bff);
    box-shadow: 0 24px 60px rgba(27, 79, 240, .24);
}

.jt-cms-final-card::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    pointer-events: none;
}

.jt-cms-final-card h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    color: #fff;
}

.jt-cms-final-card p {
    margin: 10px 0 0;
    font-size: 13.5px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .82);
}

.jt-cms-final-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
}

.jt-cms-final-actions .jt-btn {
    padding: 15px 26px;
    border-radius: 12px;
}

/* ---------------- 其它产品页（小程序 / 公众号） ---------------- */

/* 首屏底图变体 */
.jt-cms-hero--mini {
    background-image: url(/static/new/img/product/product-mini-banner.png?v=2);
}

.jt-cms-hero--public {
    background-image: url(/static/new/img/product/product-public-banner.png?v=2);
}

/* 左图右文 */
.jt-cms-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: center;
}

.jt-cms-split-img img {
    display: block;
    width: 100%;
    height: auto;
}

.jt-cms-points {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.jt-cms-point {
    position: relative;
    padding-left: 58px;
}

.jt-cms-point i {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #eef4ff;
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    color: #2764f5;
}

.jt-cms-point h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #14213b;
}

.jt-cms-point p {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.85;
    color: #7b8798;
}

/* 单张大图 */
.jt-cms-wide {
    padding: 16px;
    border: 1px solid #eef2f9;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(23, 55, 111, .06);
}

.jt-cms-wide img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* 三列图卡 */
.jt-cms-scenes--3,
.jt-cms-shots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jt-cms-scenes--3 {
    max-width: 1040px;
    margin: 0 auto;
}

.jt-cms-shots {
    display: grid;
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.jt-cms-shot {
    padding: 16px;
    border: 1px solid #eef2f9;
    border-radius: 18px;
    background: #f8fbff;
    transition: transform .24s, box-shadow .24s, border-color .24s;
}

.jt-cms-shot:hover {
    border-color: #dbe6fb;
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(23, 55, 111, .1);
}

.jt-cms-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* ---------------- 响应式 ---------------- */

@media (max-width: 1024px) {
    .jt-cms-hero-inner {
        padding: 64px 0 56px;
    }

    .jt-cms-hero h1 {
        font-size: 42px;
    }

    .jt-cms-hero-sub {
        font-size: 17px;
    }

    .jt-cms-sec {
        padding: 60px 0;
    }

    .jt-cms-head h2 {
        font-size: 26px;
    }

    .jt-cms-feats,
    .jt-cms-scenes,
    .jt-cms-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jt-cms-advs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px 20px;
    }

    .jt-cms-final-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 36px 32px;
    }

    .jt-cms-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    .jt-cms-split-img {
        max-width: 520px;
        margin: 0 auto;
    }

    .jt-cms-shots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    /* 窄屏改用纯渐变，避免背景图里的手机稿与文案重叠 */
    .jt-cms-hero {
        min-height: 0;
        background-image: linear-gradient(140deg, #1b4ff0 0%, #2e7cff 58%, #59a2ff 100%);
    }

    .jt-cms-hero::before {
        background: none;
    }

    /* 移动端头部只保留 logo 与个人中心，避免导航文字竖排换行 */
    .jt-cms .jt-header .nav .logo {
        width: 118px;
        height: auto;
    }

    .jt-cms .jt-header .nav-wrap > a:not(.login),
    .jt-cms .jt-header .nav-wrap > .product-link {
        display: none;
    }

    .jt-cms-hero-inner {
        padding: 44px 0 46px;
    }

    .jt-cms-hero h1 {
        font-size: 32px;
        letter-spacing: 0;
    }

    .jt-cms-hero-sub {
        font-size: 15px;
    }

    .jt-cms-hero-desc {
        font-size: 13.5px;
        line-height: 1.85;
    }

    .jt-cms-br {
        display: none;
    }

    .jt-cms-ends {
        gap: 8px;
    }

    .jt-cms-end {
        padding: 6px 12px 6px 6px;
        font-size: 12px;
    }

    .jt-cms-hero-actions {
        gap: 10px;
    }

    /* 窄屏时二维码弹层改到按钮下方，避免被首屏裁切 */
    .jt-cms-hero {
        overflow: visible;
    }

    .jt-cms-qr-pop {
        top: calc(100% + 12px);
        bottom: auto;
        width: 148px;
    }

    .jt-cms-qr-pop::after {
        top: -5px;
        bottom: auto;
    }

    .jt-cms-btn-light,
    .jt-cms-qr-btn {
        padding: 13px 18px;
        font-size: 13.5px;
    }

    .jt-cms-sec {
        padding: 44px 0;
    }

    .jt-cms-head {
        margin-bottom: 28px;
    }

    .jt-cms-head h2 {
        font-size: 21px;
        line-height: 1.5;
    }

    .jt-cms-feats {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .jt-cms-feat {
        padding: 20px;
    }

    .jt-cms-scenes,
    .jt-cms-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .jt-cms-scene {
        padding: 10px 10px 16px;
    }

    .jt-cms-advs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jt-cms-shots {
        grid-template-columns: minmax(0, 1fr);
        max-width: 380px;
    }

    .jt-cms-point {
        padding-left: 50px;
    }

    .jt-cms-points {
        gap: 18px;
    }

    .jt-cms-stat-num {
        font-size: 28px;
    }

    .jt-cms-final {
        padding-bottom: 52px;
    }

    .jt-cms-final-card {
        padding: 28px 22px;
        border-radius: 18px;
    }

    .jt-cms-final-card h2 {
        font-size: 20px;
    }

    .jt-cms-final-actions {
        flex-wrap: wrap;
    }
}

/* 桌面端首屏与首页保持同一高度（731px） */
@media (min-width: 1025px) {
    .jt-cms-hero {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 731px;
    }

    .jt-cms-hero-inner {
        padding: 78px 0 70px;
    }
}

/* CMS 首屏：改为首页同款深蓝星空风格（保留背景中的手机案例截图） */
.jt-cms-dark .jt-cms-hero {
    background:
        radial-gradient(ellipse at 78% 30%, rgba(23, 62, 133, .9) 0%, rgba(23, 62, 133, 0) 46%),
        linear-gradient(115deg, rgba(9, 22, 46, .95) 0%, rgba(12, 30, 64, .86) 46%, rgba(17, 43, 92, .52) 100%),
        #09162e url(/static/new/img/product/product-banner.png?v=2) no-repeat 55% center;
    background-size: auto, auto, cover;
}

.jt-cms-dark .jt-cms-hero::before {
    background: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(circle at 30% 42%, #000 24%, transparent 78%);
    mask-image: radial-gradient(circle at 30% 42%, #000 24%, transparent 78%);
}

/* 小程序 / 公众号两页的深蓝星空首屏 */
.jt-cms-dark .jt-cms-hero.jt-cms-hero--mini {
    background:
        radial-gradient(ellipse at 78% 30%, rgba(23, 62, 133, .9) 0%, rgba(23, 62, 133, 0) 46%),
        linear-gradient(115deg, rgba(9, 22, 46, .95) 0%, rgba(12, 30, 64, .86) 46%, rgba(17, 43, 92, .52) 100%),
        #09162e url(/static/new/img/product/product-mini-banner.png?v=2) no-repeat 55% center;
    background-size: auto, auto, cover;
}

.jt-cms-dark .jt-cms-hero.jt-cms-hero--public {
    background:
        radial-gradient(ellipse at 78% 30%, rgba(23, 62, 133, .9) 0%, rgba(23, 62, 133, 0) 46%),
        linear-gradient(115deg, rgba(9, 22, 46, .95) 0%, rgba(12, 30, 64, .86) 46%, rgba(17, 43, 92, .52) 100%),
        #09162e url(/static/new/img/product/product-public-banner.png?v=2) no-repeat 55% center;
    background-size: auto, auto, cover;
}

/* 首屏手机案例图改用 WebP：PNG 1.9~2.3MB → WebP 46~73KB，首次访问不再先白后现 */
@supports (background-image: url("/static/new/img/product/product-banner-2880.webp")) {
    .jt-cms-dark .jt-cms-hero {
        background-image:
            radial-gradient(ellipse at 78% 30%, rgba(23, 62, 133, .9) 0%, rgba(23, 62, 133, 0) 46%),
            linear-gradient(115deg, rgba(9, 22, 46, .95) 0%, rgba(12, 30, 64, .86) 46%, rgba(17, 43, 92, .52) 100%),
            url(/static/new/img/product/product-banner-2880.webp);
    }

    .jt-cms-dark .jt-cms-hero.jt-cms-hero--mini {
        background-image:
            radial-gradient(ellipse at 78% 30%, rgba(23, 62, 133, .9) 0%, rgba(23, 62, 133, 0) 46%),
            linear-gradient(115deg, rgba(9, 22, 46, .95) 0%, rgba(12, 30, 64, .86) 46%, rgba(17, 43, 92, .52) 100%),
            url(/static/new/img/product/product-mini-banner-2880.webp);
    }

    .jt-cms-dark .jt-cms-hero.jt-cms-hero--public {
        background-image:
            radial-gradient(ellipse at 78% 30%, rgba(23, 62, 133, .9) 0%, rgba(23, 62, 133, 0) 46%),
            linear-gradient(115deg, rgba(9, 22, 46, .95) 0%, rgba(12, 30, 64, .86) 46%, rgba(17, 43, 92, .52) 100%),
            url(/static/new/img/product/product-public-banner-2880.webp);
    }
}

@media (max-width: 768px) {
    .jt-cms-dark .jt-cms-hero,
    .jt-cms-dark .jt-cms-hero.jt-cms-hero--mini,
    .jt-cms-dark .jt-cms-hero.jt-cms-hero--public {
        background: linear-gradient(140deg, #0a1a35 0%, #10264d 58%, #16305e 100%);
    }
}