@charset "utf-8";

/* 微协同私有化部署页视觉、部署蓝图与响应式样式，by AI.Coding */
:root {
    --private-blue: #1768e5;
    --private-blue-deep: #0a397f;
    --private-cyan: #31bde9;
    --private-green: #27bd88;
    --private-bg: #f3f7fc;
    --private-surface: #ffffff;
    --private-text: #132541;
    --private-muted: #64738b;
    --private-line: #dce7f3;
    --private-shadow: 0 24px 58px rgba(31, 75, 136, .11);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    min-width: 320px;
    margin: 0;
    color: var(--private-text);
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    background: var(--private-bg);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.page-shell { overflow: hidden; }

.private-hero {
    position: relative;
    min-height: 720px;
    padding: 148px 28px 88px;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 20%, rgba(49, 189, 233, .15), transparent 29%),
        radial-gradient(circle at 88% 25%, rgba(23, 104, 229, .13), transparent 27%),
        linear-gradient(180deg, #edf5ff 0%, #f8fbff 67%, #f3f7fc 100%);
}
.private-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .43;
    background-image:
        linear-gradient(rgba(51, 108, 188, .075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(51, 108, 188, .075) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, #000, transparent 94%);
}
.private-hero::after {
    content: "";
    position: absolute;
    right: -270px;
    bottom: -480px;
    width: 850px;
    height: 850px;
    border: 1px solid rgba(23, 104, 229, .08);
    border-radius: 50%;
    box-shadow: 0 0 0 95px rgba(23, 104, 229, .02), 0 0 0 190px rgba(23, 104, 229, .012);
}
.hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr);
    align-items: center;
    gap: 68px;
    width: min(1180px, 100%);
    margin: 0 auto;
}
.hero-copy { min-width: 0; animation: private-reveal .72s ease both; }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: var(--private-blue);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
}
.eyebrow::before {
    content: "";
    width: 34px;
    height: 2px;
    background: linear-gradient(90deg, var(--private-blue), var(--private-cyan));
}
.hero-copy h1 {
    margin: 0;
    font-family: "STSong", "Songti SC", "Microsoft YaHei", serif;
    font-size: clamp(46px, 5.1vw, 70px);
    line-height: 1.13;
    letter-spacing: -.045em;
}
.hero-copy h1 span {
    display: block;
    margin-top: 7px;
    color: var(--private-blue);
}
.hero-description {
    max-width: 585px;
    margin: 27px 0 0;
    color: var(--private-muted);
    font-size: 17px;
    line-height: 1.9;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 33px;
}
.private-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 164px;
    height: 50px;
    padding: 0 24px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 650;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.private-button::after { content: "→"; font-size: 17px; transition: transform .2s ease; }
.private-button:hover { transform: translateY(-2px); }
.private-button:hover::after { transform: translateX(3px); }
.button-primary {
    color: #fff;
    background: linear-gradient(135deg, #247bf0, #1260d8);
    box-shadow: 0 16px 34px rgba(23, 104, 229, .24);
}
.button-secondary {
    color: #24476f;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(75, 122, 183, .25);
}
.button-secondary::after { content: "↓"; }
.button-secondary:hover { background: #fff; }
.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 35px 0 0;
    padding: 0;
    color: #708097;
    font-size: 13px;
    list-style: none;
}
.hero-points li { display: inline-flex; align-items: center; gap: 8px; }
.hero-points li::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--private-green);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(39, 189, 136, .10);
}

.deployment-visual {
    position: relative;
    min-height: 490px;
}
.private-boundary {
    position: absolute;
    inset: 25px 0 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(62, 115, 180, .2);
    border-radius: 34px;
    box-shadow: var(--private-shadow);
    backdrop-filter: blur(14px);
    animation: private-reveal .82s .1s ease both;
}
.private-boundary::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px dashed rgba(23, 104, 229, .17);
    border-radius: 24px;
}
.private-boundary::after {
    content: "";
    position: absolute;
    top: -120px;
    right: -90px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(49, 189, 233, .12), transparent 68%);
    border-radius: 50%;
}
.boundary-label {
    position: absolute;
    top: 35px;
    left: 42px;
    z-index: 3;
    color: #8292a9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
}
.topology-lines {
    position: absolute;
    inset: 25px 0 0;
    z-index: 1;
    width: 100%;
    height: calc(100% - 25px);
}
.topology-lines path {
    fill: none;
    stroke: rgba(23, 104, 229, .37);
    stroke-width: 1.5;
    stroke-dasharray: 5 8;
}
.topology-lines circle {
    fill: #fff;
    stroke: var(--private-blue);
    stroke-width: 2;
}
.system-node {
    position: absolute;
    z-index: 3;
    padding: 18px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(78, 127, 187, .18);
    border-radius: 18px;
    box-shadow: 0 16px 34px rgba(30, 76, 137, .11);
}
.system-node strong { display: block; margin-top: 11px; font-size: 15px; }
.system-node small { display: block; margin-top: 5px; color: #8a98aa; font-size: 9px; letter-spacing: .09em; }
.node-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    color: #fff;
    background: linear-gradient(145deg, #72bde9, #1768e5);
    border-radius: 13px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(23, 104, 229, .2);
}
.oa-node { top: 92px; left: 43px; width: 142px; }
.oa-node .node-icon { background: linear-gradient(145deg, #a7d132, #64a82b); }
.private-node {
    top: 169px;
    left: 50%;
    width: 154px;
    padding: 21px;
    border-color: rgba(23, 104, 229, .27);
    transform: translateX(-50%);
    box-shadow: 0 21px 46px rgba(23, 104, 229, .18);
}
.private-node .node-icon { width: 48px; height: 48px; font-size: 14px; }
.platform-node { right: 39px; width: 150px; padding: 16px 18px 16px 48px; }
.platform-node strong { margin-top: 0; font-size: 13px; }
.platform-node-top { top: 87px; }
.platform-node-bottom { bottom: 81px; }
.node-dot {
    position: absolute;
    top: 50%;
    left: 19px;
    width: 13px;
    height: 13px;
    background: var(--private-cyan);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(49, 189, 233, .12);
    transform: translateY(-50%);
}
.platform-node-bottom .node-dot { background: var(--private-green); box-shadow: 0 0 0 5px rgba(39, 189, 136, .12); }
.deployment-status {
    position: absolute;
    z-index: 4;
    bottom: 36px;
    left: 43px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    color: #31577e;
    background: #fff;
    border: 1px solid rgba(68, 118, 178, .16);
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(31, 75, 136, .10);
    font-size: 11px;
    font-weight: 650;
}
.deployment-status i {
    width: 7px;
    height: 7px;
    background: var(--private-green);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(39, 189, 136, .1);
}

.private-section { padding: 92px 28px; }
.section-inner { width: min(1120px, 100%); margin: 0 auto; }
.section-head { max-width: 680px; }
.section-head-centered { margin: 0 auto; text-align: center; }
.section-kicker {
    color: var(--private-blue);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
}
.section-head h2,
.path-heading h2 {
    margin: 14px 0 0;
    font-family: "STSong", "Songti SC", "Microsoft YaHei", serif;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.25;
    letter-spacing: -.025em;
}
.section-head p { margin: 17px 0 0; color: var(--private-muted); font-size: 15px; line-height: 1.85; }

.value-section { background: #fff; }
.value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 42px;
}
.value-card {
    position: relative;
    min-height: 255px;
    padding: 31px;
    overflow: hidden;
    background: #f8fbff;
    border: 1px solid var(--private-line);
    border-radius: 20px;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.value-card:hover {
    transform: translateY(-4px);
    border-color: rgba(23, 104, 229, .28);
    box-shadow: 0 20px 44px rgba(31, 75, 136, .10);
}
.value-index {
    position: absolute;
    top: 26px;
    right: 27px;
    color: #d5e2f0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
}
.value-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 48px;
    height: 48px;
    padding: 11px;
    background: #e9f3ff;
    border-radius: 14px;
}
.value-icon i { display: block; height: 5px; background: var(--private-blue); border-radius: 3px; }
.value-icon i:nth-child(2) { opacity: .72; }
.value-icon i:nth-child(3) { opacity: .46; }
.link-icon { position: relative; flex-direction: row; align-items: center; gap: 2px; }
.link-icon i { width: 7px; height: 7px; border-radius: 50%; opacity: 1 !important; }
.link-icon i:nth-child(2) { width: 12px; height: 2px; }
.shield-icon { align-items: center; }
.shield-icon i {
    width: 23px;
    height: 26px;
    background: var(--private-blue);
    border-radius: 12px 12px 14px 14px;
    clip-path: polygon(50% 0, 100% 18%, 88% 78%, 50% 100%, 12% 78%, 0 18%);
}
.value-card h3 { margin: 23px 0 0; font-size: 18px; }
.value-card p { margin: 11px 0 0; color: #74839a; font-size: 13px; line-height: 1.75; }

.document-section { background: #edf5ff; }
.document-layout {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    align-items: start;
    gap: 72px;
}
.document-copy { position: sticky; top: 112px; }
.document-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid rgba(79, 126, 183, .18);
}
.document-summary strong {
    color: var(--private-blue);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    line-height: 1;
}
.document-summary span { color: #7c8ba0; font-size: 11px; line-height: 1.55; }
.document-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.document-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 270px;
    padding: 26px;
    overflow: hidden;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(81, 128, 188, .16);
    border-radius: 20px;
    box-shadow: 0 16px 38px rgba(31, 75, 136, .07);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.document-card::before {
    content: "";
    position: absolute;
    inset: auto -70px -90px auto;
    width: 190px;
    height: 190px;
    background: radial-gradient(circle, rgba(23, 104, 229, .08), transparent 68%);
    border-radius: 50%;
}
.document-card:hover {
    transform: translateY(-4px);
    border-color: rgba(23, 104, 229, .30);
    box-shadow: 0 23px 48px rgba(31, 75, 136, .12);
}
.document-number {
    position: absolute;
    top: 24px;
    right: 25px;
    color: #cfdeed;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
}
.document-type {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: #fff;
    background: linear-gradient(145deg, #45a0ff, #1768e5);
    border-radius: 15px;
    box-shadow: 0 11px 24px rgba(23, 104, 229, .2);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    font-weight: 700;
}
.linux-type { background: linear-gradient(145deg, #3b526f, #152b48); box-shadow: 0 11px 24px rgba(21, 43, 72, .18); }
.wechat-type { background: linear-gradient(145deg, #31d68b, #16a96b); box-shadow: 0 11px 24px rgba(22, 169, 107, .2); }
.innovation-type { background: linear-gradient(145deg, #ef9c4e, #dc6d2d); box-shadow: 0 11px 24px rgba(220, 109, 45, .2); }
.document-content { position: relative; z-index: 1; display: block; margin-top: 28px; }
.document-content strong { display: block; font-size: 17px; line-height: 1.55; }
.document-content small { display: block; margin-top: 11px; color: #7d8ba0; font-size: 12px; line-height: 1.65; }
.document-arrow {
    position: absolute;
    right: 25px;
    bottom: 23px;
    z-index: 1;
    color: var(--private-blue);
    font-size: 20px;
    transition: transform .2s ease;
}
.document-card:hover .document-arrow { transform: translate(3px, -3px); }

.path-section { padding-top: 0; background: #edf5ff; }
.path-panel {
    position: relative;
    display: grid;
    grid-template-columns: .66fr 1.34fr;
    gap: 54px;
    padding: 48px 50px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(120deg, #0a397f, #155ec8 62%, #247bf0);
    border-radius: 24px;
    box-shadow: 0 26px 58px rgba(16, 81, 170, .22);
}
.path-panel::after {
    content: "";
    position: absolute;
    top: -150px;
    right: -80px;
    width: 380px;
    height: 380px;
    border: 58px solid rgba(255, 255, 255, .045);
    border-radius: 50%;
}
.path-heading { position: relative; z-index: 1; }
.path-heading .section-kicker { color: #9cd5ff; }
.path-heading h2 { font-size: clamp(28px, 3vw, 39px); }
.path-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.path-list li { position: relative; padding-left: 47px; }
.path-list li > span {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #9fd7ff;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 10px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 10px;
    font-weight: 700;
}
.path-list strong { display: block; font-size: 14px; }
.path-list p { margin: 7px 0 0; color: rgba(255, 255, 255, .62); font-size: 11px; line-height: 1.65; }

.site-footer {
    padding: 29px 24px 32px;
    color: #78869a;
    background: #fff;
    border-top: 1px solid var(--private-line);
    text-align: center;
    font-size: 12px;
    line-height: 1.9;
}
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-bottom: 4px; color: #4f6078; }
.footer-links a:hover { color: var(--private-blue); }

@keyframes private-reveal {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1020px) {
    .private-hero { min-height: auto; padding-top: 122px; }
    .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .hero-copy { max-width: 720px; }
    .deployment-visual { width: min(620px, 100%); margin: 0 auto; }
    .document-layout { grid-template-columns: 1fr; gap: 40px; }
    .document-copy { position: static; }
    .document-summary { max-width: 300px; }
    .path-panel { grid-template-columns: 1fr; gap: 35px; }
}

@media (max-width: 720px) {
    .private-hero { padding: 108px 18px 66px; }
    .hero-copy h1 { font-size: clamp(40px, 12vw, 58px); }
    .hero-description { font-size: 15px; }
    .hero-actions .private-button { flex: 1 1 160px; }
    .deployment-visual { min-height: 450px; }
    .private-boundary { border-radius: 24px; }
    .private-section { padding: 72px 18px; }
    .value-grid { grid-template-columns: 1fr; }
    .value-card { min-height: 220px; }
    .document-grid { grid-template-columns: 1fr; }
    .document-card { min-height: 240px; }
    .path-panel { padding: 38px 28px; }
    .path-list { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .hero-actions { display: grid; grid-template-columns: 1fr; }
    .hero-actions .private-button { width: 100%; }
    .hero-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .deployment-visual {
        left: 50%;
        width: 540px;
        min-height: 390px;
        transform: translateX(-50%) scale(.78);
        transform-origin: top center;
        margin-bottom: -72px;
    }
    .footer-links { display: none; }
}

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