:root {
    --ps-blue: #2878f5;
    --ps-blue-dark: #0f438f;
    --ps-navy: #10284f;
    --ps-ink: #15233a;
    --ps-muted: #718099;
    --ps-line: #dce7f6;
    --ps-soft: #f3f7fd;
    --ps-white: #fff;
}

html { scroll-behavior: smooth; }

body.wx-product-solution-page {
    min-width: 0;
    color: var(--ps-ink);
    background: #fff;
}

.ps-page *, .ps-page *::before, .ps-page *::after { box-sizing: border-box; }
.ps-page a { color: inherit; text-decoration: none; }
.ps-page button { font: inherit; }
.ps-container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

.ps-hero {
    position: relative;
    overflow: hidden;
    padding: 78px 0 72px;
    color: #fff;
    background: var(--ps-blue-dark);
}

.ps-hero::before, .ps-hero::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    pointer-events: none;
}

.ps-hero::before { width: 520px; height: 520px; top: -330px; right: -70px; }
.ps-hero::after { width: 280px; height: 280px; right: 80px; bottom: -220px; }

.ps-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(390px, .9fr);
    gap: 72px;
    align-items: center;
}

.ps-eyebrow, .ps-section-head > span {
    display: block;
    color: #76adff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.ps-hero h1 {
    max-width: 720px;
    margin: 20px 0 22px;
    color: #fff;
    font-size: clamp(42px, 4.4vw, 68px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.035em;
}

.ps-hero h1 em { display: block; margin-top: 10px; color: #82c8ff; font-style: normal; }
.ps-hero__lead { max-width: 680px; color: #c9daf3; font-size: 18px; line-height: 1.9; }
.ps-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.ps-btn {
    display: inline-flex;
    min-width: 142px;
    height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 7px;
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.ps-btn:hover { transform: translateY(-2px); }
.ps-btn--primary { border-color: var(--ps-blue); background: var(--ps-blue); }
.ps-btn--primary:hover { border-color: #1766df; background: #1766df; }
.ps-btn--light { border-color: #fff; color: var(--ps-blue) !important; background: #fff; }
.ps-btn--ghost:hover { background: rgba(255, 255, 255, .08); }

.ps-hero__trust { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 26px; color: #b9ceeb; font-size: 13px; }
.ps-hero__trust span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #58d7a4; vertical-align: 2px; }

.ps-command {
    position: relative;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 20px;
    background: #114fba;
    box-shadow: 0 28px 60px rgba(0, 20, 64, .28);
}

.ps-command__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.ps-command__head span { color: #a9c9fa; font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.ps-command__head i { display: inline-flex; align-items: center; color: #c7dcfb; font-size: 12px; font-style: normal; }
.ps-command__head i::before { content: ""; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #58d7a4; box-shadow: 0 0 0 6px rgba(88, 215, 164, .12); }

.ps-command h2 { margin: 0 0 20px; color: #fff; font-size: 26px; line-height: 1.3; }
.ps-command__flow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ps-command__node { min-height: 108px; padding: 18px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: rgba(255, 255, 255, .08); }
.ps-command__node b { display: block; color: #7eb7ff; font-size: 11px; letter-spacing: .1em; }
.ps-command__node strong { display: block; margin: 10px 0 6px; color: #fff; font-size: 17px; }
.ps-command__node span { color: #bcd2f3; font-size: 12px; line-height: 1.6; }
.ps-command__result { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 18px; border-radius: 12px; color: var(--ps-navy); background: #fff; }
.ps-command__result strong { font-size: 16px; }
.ps-command__result span { color: var(--ps-blue); font-size: 12px; font-weight: 700; letter-spacing: .08em; }

.ps-stats { position: relative; z-index: 3; margin-top: -30px; }
.ps-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid var(--ps-line); border-radius: 16px; background: #fff; box-shadow: 0 18px 45px rgba(26, 63, 119, .11); }
.ps-stat { position: relative; padding: 25px 24px; text-align: center; }
.ps-stat + .ps-stat::before { content: ""; position: absolute; top: 26px; bottom: 26px; left: 0; width: 1px; background: var(--ps-line); }
.ps-stat strong { display: block; color: var(--ps-blue); font-size: 28px; font-weight: 600; }
.ps-stat span { display: block; margin-top: 6px; color: var(--ps-muted); font-size: 13px; }

.ps-section { padding: 92px 0; }
.ps-section--soft { background: var(--ps-soft); }
.ps-section--navy { color: #fff; background: var(--ps-navy); }
.ps-section-head { max-width: 760px; margin-bottom: 42px; }
.ps-section-head--center { margin-right: auto; margin-left: auto; text-align: center; }
.ps-section-head h2 { margin: 14px 0 14px; color: var(--ps-ink); font-size: clamp(30px, 3vw, 44px); line-height: 1.26; letter-spacing: -.025em; }
.ps-section-head p { color: var(--ps-muted); font-size: 16px; line-height: 1.85; }
.ps-section--navy .ps-section-head h2 { color: #fff; }
.ps-section--navy .ps-section-head p { color: #b8c7dc; }

.ps-capabilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ps-capability { position: relative; min-height: 235px; padding: 28px; overflow: hidden; border: 1px solid var(--ps-line); border-radius: 14px; background: #fff; transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease; }
.ps-capability:hover { border-color: #a9c9fb; transform: translateY(-4px); box-shadow: 0 18px 34px rgba(25, 71, 139, .1); }
.ps-capability i { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 10px; color: var(--ps-blue); font-size: 25px; background: #eaf3ff; }
.ps-capability b { position: absolute; top: 30px; right: 28px; color: #c8d8ee; font-size: 13px; letter-spacing: .08em; }
.ps-capability h3 { margin: 24px 0 10px; color: var(--ps-ink); font-size: 20px; }
.ps-capability p { color: var(--ps-muted); font-size: 14px; line-height: 1.8; }

.ps-process { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: ps-step; }
.ps-step { position: relative; min-height: 180px; padding: 28px 22px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: rgba(255, 255, 255, .055); }
.ps-step::before { counter-increment: ps-step; content: "0" counter(ps-step); display: block; margin-bottom: 28px; color: #6eabff; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.ps-step h3 { margin: 0 0 8px; color: #fff; font-size: 17px; }
.ps-step p { color: #b7c6dc; font-size: 13px; line-height: 1.7; }

.ps-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ps-product { display: flex; min-height: 310px; flex-direction: column; padding: 30px; border: 1px solid var(--ps-line); border-radius: 16px; background: #fff; transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease; }
.ps-product:hover { border-color: #9fc4fb; transform: translateY(-4px); box-shadow: 0 20px 42px rgba(28, 73, 142, .11); }
.ps-product__icon { display: inline-flex; width: 74px; height: 74px; align-items: center; justify-content: center; border-radius: 16px; color: #fff; font-size: 34px; background: var(--ps-blue); }
.ps-product small { margin-top: 28px; color: var(--ps-blue); font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.ps-product h3 { margin: 10px 0; color: var(--ps-ink); font-size: 23px; }
.ps-product p { flex: 1; color: var(--ps-muted); font-size: 14px; line-height: 1.8; }
.ps-product strong { margin-top: 22px; color: var(--ps-blue); font-size: 14px; }

.ps-showcase-section { background: #eef5ff; }
.ps-showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ps-showcase-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #d6e5fa; border-radius: 20px; background: #fff; box-shadow: 0 24px 54px rgba(25, 70, 138, .1); }
.ps-showcase-card:first-child { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr); }
.ps-showcase-card figure { position: relative; min-width: 0; margin: 0; overflow: hidden; background: #dfeafa; }
.ps-showcase-card figure::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.45); pointer-events: none; }
.ps-showcase-card img { display: block; width: 100%; height: auto; object-fit: contain; background: #fff; }
.ps-showcase-card__copy { display: flex; min-width: 0; flex: 1; flex-direction: column; justify-content: center; padding: 30px; }
.ps-showcase-card:first-child .ps-showcase-card__copy { padding: 42px 36px; }
.ps-showcase-card__copy > span { color: var(--ps-blue); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.ps-showcase-card__copy h3 { margin: 15px 0 14px; color: var(--ps-ink); font-size: 27px; line-height: 1.4; }
.ps-showcase-card__copy p { color: var(--ps-muted); font-size: 14px; line-height: 1.85; }
.ps-showcase-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ps-showcase-card__tags i { display: inline-flex; padding: 7px 11px; border-radius: 999px; color: #2369d7; font-size: 12px; font-style: normal; background: #eaf3ff; }

.ps-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ps-insight-card { position: relative; min-height: 310px; padding: 34px; overflow: hidden; border: 1px solid var(--ps-line); border-radius: 17px; background: #fff; box-shadow: 0 18px 40px rgba(25, 68, 132, .075); }
.ps-insight-card::after { content: ""; position: absolute; width: 200px; height: 200px; right: -110px; bottom: -120px; border: 34px solid #edf4ff; border-radius: 50%; pointer-events: none; }
.ps-insight-card > b { position: absolute; top: 34px; right: 34px; color: #b7cdf0; font-size: 13px; letter-spacing: .12em; }
.ps-insight-card h3 { margin: 0 0 10px; color: var(--ps-ink); font-size: 24px; }
.ps-insight-card > p { max-width: 560px; color: var(--ps-muted); font-size: 14px; line-height: 1.8; }
.ps-insight-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ps-insight-tags span { display: inline-flex; padding: 9px 13px; border: 1px solid #d8e7fb; border-radius: 8px; color: #38628f; font-size: 13px; background: #f6f9fe; }

body[data-solution="gps"] .ps-capabilities { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-solution="gps"] .ps-capability { min-height: 225px; padding: 24px; }
body[data-solution="gps"] .ps-capability h3 { margin-top: 20px; }
body[data-solution="gps"] .ps-process { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ps-scenarios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ps-scenario { min-height: 172px; padding: 26px; border: 1px solid var(--ps-line); border-radius: 13px; background: #fff; }
.ps-scenario b { color: var(--ps-blue); font-size: 12px; letter-spacing: .1em; }
.ps-scenario h3 { margin: 18px 0 8px; color: var(--ps-ink); font-size: 18px; }
.ps-scenario p { color: var(--ps-muted); font-size: 13px; line-height: 1.75; }

.ps-specs { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 36px; align-items: stretch; }
.ps-spec-card { padding: 34px; border-radius: 16px; color: #fff; background: var(--ps-blue-dark); }
.ps-spec-card > span { color: #78b1ff; font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.ps-spec-card h3 { margin: 16px 0; color: #fff; font-size: 30px; }
.ps-spec-card p { color: #c4d6ef; font-size: 15px; line-height: 1.8; }
.ps-spec-card .iconfont { display: inline-flex; width: 86px; height: 86px; margin-top: 34px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; color: #fff; font-size: 42px; background: rgba(255,255,255,.08); }
.ps-spec-list { display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; border: 1px solid var(--ps-line); border-radius: 16px; background: #fff; }
.ps-spec { min-height: 130px; padding: 26px; border-right: 1px solid var(--ps-line); border-bottom: 1px solid var(--ps-line); }
.ps-spec:nth-child(2n) { border-right: 0; }
.ps-spec:nth-last-child(-n+2) { border-bottom: 0; }
.ps-spec strong { display: block; color: var(--ps-ink); font-size: 17px; }
.ps-spec span { display: block; margin-top: 8px; color: var(--ps-muted); font-size: 13px; line-height: 1.7; }

.ps-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ps-related a { display: flex; min-height: 116px; align-items: center; gap: 18px; padding: 22px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.05); transition: background .2s ease; }
.ps-related a:hover { background: rgba(255,255,255,.1); }
.ps-related i { display: inline-flex; width: 48px; height: 48px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 10px; color: #fff; font-size: 24px; background: var(--ps-blue); }
.ps-related strong { display: block; color: #fff; font-size: 17px; }
.ps-related span { display: block; margin-top: 6px; color: #aebed4; font-size: 12px; }

.ps-cta { padding: 70px 0; background: #fff; }
.ps-cta__panel { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 44px 50px; border-radius: 18px; color: #fff; background: var(--ps-blue); }
.ps-cta__panel h2 { margin: 0 0 10px; color: #fff; font-size: 30px; }
.ps-cta__panel p { color: #dceaff; font-size: 15px; }
.ps-cta__panel .ps-actions { flex: 0 0 auto; margin: 0; }

@media (max-width: 980px) {
    .ps-container { width: min(100% - 32px, 760px); }
    .ps-hero { padding: 58px 0; }
    .ps-hero__grid { grid-template-columns: 1fr; gap: 42px; }
    .ps-command { max-width: 620px; }
    .ps-capabilities, .ps-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ps-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ps-scenarios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ps-specs { grid-template-columns: 1fr; }
    .ps-related { grid-template-columns: 1fr; }
    .ps-showcase-card:first-child { display: flex; grid-column: auto; }
    body[data-solution="gps"] .ps-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body[data-solution="gps"] .ps-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .ps-container { width: calc(100% - 28px); }
    .ps-hero { padding: 46px 0 52px; }
    .ps-hero h1 { font-size: 38px; }
    .ps-hero__lead { font-size: 16px; }
    .ps-command { padding: 20px; }
    .ps-command__flow { grid-template-columns: 1fr; }
    .ps-command__node { min-height: 90px; }
    .ps-stats { margin-top: -18px; }
    .ps-stats__grid { grid-template-columns: repeat(2, 1fr); }
    .ps-stat:nth-child(3)::before { display: none; }
    .ps-stat:nth-child(-n+2) { border-bottom: 1px solid var(--ps-line); }
    .ps-section { padding: 64px 0; }
    .ps-section-head { margin-bottom: 30px; }
    .ps-capabilities, .ps-products, .ps-process, .ps-scenarios { grid-template-columns: 1fr; }
    .ps-capability { min-height: 205px; }
    .ps-showcase-card__copy { padding: 30px 24px; }
    .ps-showcase-card:first-child .ps-showcase-card__copy { padding: 30px 24px; }
    .ps-showcase-card__copy h3 { font-size: 23px; }
    .ps-showcase { grid-template-columns: 1fr; }
    .ps-insights { grid-template-columns: 1fr; }
    .ps-insight-card { min-height: 0; padding: 28px 24px; }
    body[data-solution="gps"] .ps-capabilities, body[data-solution="gps"] .ps-process { grid-template-columns: 1fr; }
    .ps-spec-list { grid-template-columns: 1fr; }
    .ps-spec { border-right: 0; }
    .ps-spec:nth-last-child(-n+2) { border-bottom: 1px solid var(--ps-line); }
    .ps-spec:last-child { border-bottom: 0; }
    .ps-cta__panel { align-items: flex-start; flex-direction: column; padding: 34px 26px; }
    .ps-cta__panel .ps-actions { width: 100%; }
    .ps-cta__panel .ps-btn { width: 100%; }
}